@charset "utf-8";
/*
Theme Name: NOEL child
Theme URI:https://tcd-theme.com/tcd072
Description:WordPressテーマ「NOEL」の子テーマ
Template:noel_tcd072
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

:root {
	--tcd-font-type1: Arial,"Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
	--tcd-font-type2: "Noto Sans JP",sans-serif;
	--tcd-font-type3: Palatino,"Yu Kyokasho","游教科書体","UD デジタル 教科書体 N","游明朝","游明朝体","Hiragino Mincho Pro","Meiryo",serif;
	--tcd-font-type-logo: "Noto Sans JP",sans-serif;
}
:root {
	--theme-color1: #ff8900;
	--theme-color1-rgb: 255, 137, 0;
	--theme-color2: #4b5e63;
	--theme-color2-rgb: 75,94,99;
	--black: #192021;
	--black-rgb: 25,32,33;
	--red: #e52c00;
	--pd1: 120px;
	--pd2: 80px;
	--pd3: 50px;
	--pd4: 30px;
	--font2: chamfer-gothic-ludlow,sans-serif;
	--gradation1: linear-gradient(45deg,rgba(var(--theme-color2-rgb),.08) 50%,rgba(var(--theme-color2-rgb),.18) 50%);
	--font-size1: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);
	--font-size2: clamp(1.875rem, 1.534rem + 1.7vw, 2.813rem);
	--font-size3: clamp(1.375rem, 1.239rem + 0.68vw, 1.75rem);
	--header-height:var(--header-height);
}
:root {
  --brown: #7c5c3a;
  --brown-light: #a07850;
  --black: #1a1817;
  --gray: #888480;
  --gray-light: #c8c5c0;
  --bg: #ffffff;
  --bg-warm: #faf8f5;
  --border: #e8e4de;
  --green: #4a7c5a;
  --green-light: #5d9470;

  /* ===== TYPE SCALE ===== */
  --text-xs: clamp(10px, 0.6rem + 0.1vw, 12px); /* 極小ラベル */
  --text-sm: clamp(11px, 0.7rem + 0.15vw, 13px); /* ラベル・キャプション */
  --text-base: clamp(13px, 0.8rem + 0.2vw, 15px); /* 本文 */
  --text-md: clamp(15px, 0.9rem + 0.3vw, 17px); /* やや大きい本文 */
  --text-h4: clamp(17px, 1rem + 0.5vw, 21px); /* 小見出し */
  --text-h3: clamp(22px, 1.2rem + 1.2vw, 30px); /* 中見出し */
  --text-h2: clamp(28px, 1.4rem + 2vw, 44px); /* セクション見出し */
  --text-display: clamp(40px, 2.5rem + 1vw, 64px); /* 装飾的大数字 */
  --text-h1: clamp(48px, 3rem + 6vw, 112px); /* ヒーロー見出し */
}
@media screen and (max-width:750px) {
:root {	
	--pd1:80px;
	--pd2:50px;
	--pd3:30px;
	--pd4:15px;
	}	
}	
html {scroll-padding-top:var(--header-height);}

#body {overflow: hidden;}

#page_header {margin-top:calc(var(--header-height) * -1);margin-top:0;}

#container #one_col {
	max-width:100%!important;
	width:100%!important;
	margin:0 auto!important;
	/* padding:50px 0 150px;
	padding-bottom:var(--pd1);*/
}
.inner {
	margin: 0 auto;
	width:90%;
}
@media screen and (max-width:1182px) {
	.inner {width:90%;}
}


.post_content {font-size:18px;font-weight:500;color:var(--black);}
.post_content > section:not(:last-child) {padding-bottom:var(--pd1);}
.post_content > section {padding-top:var(--pd1);}
.post_content > section > section:not(:last-child) {padding-bottom:var(--pd2);}
.post_content > section > section {padding-top:var(--pd2);}


.post_content h1, .post_content h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6 {margin:unset;padding:unset;}
.post_content .secondary-title {
	font-size:var(--font-size2);
	font-family:"roboto";
	width: fit-content;
	display: block;
	position: relative;
	padding: 0 1em;
	color: var(--black);
	color:var(--theme-color2);
	text-align:center;
	margin-left:auto;margin-right:auto;
	z-index:0;
}
.post_content .secondary-title.white {color:#fff;}
.post_content .secondary-title::before {
	content:attr(data-title); position: absolute;
	font-size:calc(var(--font-size2) * 0.5);
	/*letter-spacing:0.5em;
	text-indent: 0.5em;*/
    top: -1.2em; left: 50%;
    transform: translateX(-50%);
    width: max-content;
}
.post_content .secondary-title::after {
	content: ""; position: absolute;
	display: block;
	top: 50%;
	left:calc((100vw - var(--el-width)) / -2);
	width: 100vw;
	height: 1px;
	background-color: currentcolor;
	background:radial-gradient(
		circle closest-corner,transparent calc(var(--el-width)/2),currentcolor calc(var(--el-width)/2)
	);
	z-index: -1;
}
.post_content .main-title + * {padding-top:var(--pd2);}
.post_content .secondary-title + * {padding-top:var(--pd3);}





.post_content .tertiary-title {
	position: relative;
	font-size:var(--font-size3); text-align: center;
	padding:0.5em 1.5em;
	margin-left:auto; margin-right:auto;
	color: var(--theme-color2);
	width: max-content;

	&::before,&::after {position: absolute;top: -1px; width: 10px; height: 100%; content: ''; border-top: solid 1px; border-bottom: solid 1px;}
	&::before {border-left: solid 1px;left: 0;}
	&::after {border-right: solid 1px;right: 0;}
}

.post_content .tertiary-title.type2 {
	position:static;
	background:rgba(var(--theme-color2-rgb),0.2);padding:0.5em 1em;
	border-left:5px solid var(--theme-color2);
	width: 100%;
    text-align: left;
	
	&::before,&::after {display:none;}
}
.post_content .wideTt {
	background:var(--theme-color1);
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 3%;
	font-size: var(--text-h2);
}


.box-design {
  border: 1px solid #e4e8ec;
  border-radius: 12px;
  padding:var(--pd4);
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

.linkBtn {width:min(420px , 100%);}
.linkBtn a {
	display:block;
	padding:1.5em;
	box-sizing: border-box;
	position: relative;
	width:100%;
	font-size: 16px;
	font-weight: bold;
	background: #fff;
	color: var(--theme-color2) !important;
	border: 1px solid var(--theme-color2);
	border-radius:50px;
	transition: 0.2s;
}
.linkBtn:is(.arrow ,.download) a {padding-right: 2.5em;}
.linkBtn:is(.arrow ,.download) a:before {
	position: absolute;
	content: "\f345";
	font-family: 'dashicons';
	right: 1.5em;
	transition:0.2s;
}
.linkBtn.arrow a:before {content: "\f345";}
.linkBtn.download a:before {content: url("https://icongr.am/material/download.svg?size=20&color=4b5e63");}
.linkBtn a:hover {
	background: rgba(var(--theme-color2-rgb),0.1);
	color: var(--theme-color2) !important;
	top: 2px;
	box-shadow: unset;
	backdrop-filter: blur(10px);
}
.linkBtn.hover-type2 a:hover {background: rgba(255,255,255 ,0.5);}
.linkBtn.arrow a:hover:before {right:1em;}

.linkBtn.wide a {max-width: 100%;}


.anime1 {
	display:block;
	opacity: 0;
	transition: clip-path 1.5s;
	/*transition-delay: 0.5s;*/
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}
.anime1.scale {transform: scale(1.4);}
.anime1.fade {
	opacity: 1;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
}
.anime1.fade > * {transition-delay: calc((sibling-index() - 1) * 1.5s);}
.anime1.fade.scale {transform: scale(1);}

@keyframes slideDown {
	0% {
		top:-80px;
  }
	100% {
		top:0px;
	}
}





.post_content p { margin: unset;}

.theme-color1 {color:var(--theme-color1);}
.txt-re {color: #ff0000;}
.txt-or {color: #ff7510;}
.txt-or2 {color: #cc7711;}
.txt-pi {color: #ff28c0;}
.txt-pu {color: #5500ff;}
.txt-pp {color: #ad15b7;}
.txt-gold {color: #5e4813;}
.txt-bk {color: #222;}
.txt-gr {color: #38B600;}
.txt-bl {color: #0055ff;}
.txt-lb {color: #2ea2f3;}
.txt-ml {color: #a3c52b;}
.txt-dgr {color: #228322;}
.txt-ye {color: #ffcc1d;}
.txt-wh {color: #fff;}
.txt-cha {color: #622700;}

.big {font-size:1.5em;}
.big2 { font-size: 1.75em;}
.big3 {font-size: 2em;}
.big4 {font-size: 2.5em;}
.big5 {font-size: 3em;}
.small {font-size: 0.75em;}
.small2 {font-size: 0.5em;}
.mgnA {margin-left:auto;margin-right:auto;}
.pc_right { float: right;}
.pc_left { float: left;}
.fll {float: left;}
.flr {float: right;}
.enleft { text-align: left;}
.enright { text-align: right;}
.encent { text-align: center; }
.encent_mL { text-align: center; margin: 0px auto;}
.mobile_only {display: none;}
.pc_only {display:block;}
.font13 { font-size: 13px;}
.bold { font-weight: bold;}
.clear-fix {height: 100%;overflow: hidden; zoom: 1;}
.wid20_m100 {width:20%;}
.wid30_m100 {width:30%;}
.wid35_m100 {width:35%;}
.wid40_m100 {width: 40%;}
.wid45_m100 {width: 45%;}
.wid48_m100 {width: 48%;}
.wid50_m100 {width:50%;}
.wid55_m100 {width: 55%;}
.wid60_m100 {width:60%;}
.wid65_m100 {width:65%;}
.wid70_m100 {width:70%;}
.wid80_m100 {width:80%;}
.wid100 {width:100%;}
.lh180 {line-height: 1.8em;}
.mgnt5 {margin-top:5px;}
.mgnt10 {margin-top:10px !important;}
.mgnt15 {margin-top:15px !important;}
.mgnt20 {margin-top:20px !important;}
.mgnt30 {margin-top:30px !important;}
.mgnt40 {margin-top:40px !important;}
.mgnt50 {margin-top:50px !important;}
.mgnt60 {margin-top:60px !important;}
.mgnt80 {margin-top: 80px !important;}
.mgnt100 {margin-top: 100px;}
.pdt20 {padding-top: 20px !important;}
.pdl10 {padding-left: 10px !important;}
.pdl20 {padding-left: 20px !important;}
.pdl30 {padding-left: 30px !important;}
.pdt10 { padding-top: 10px !important;}
.pdt60 { padding-top: 60px !important;}
.pdt80 { padding-top: 80px !important;}
.kome {text-indent: -1em;padding-left: 1em;}


.flexbox {
	display: flex;
	flex-wrap: wrap;
}
.flexbox.between {
	justify-content:space-between;
}
.dashicons, .dashicons-before:before {vertical-align:middle;font-size:1em;}

@media screen and (max-width:768px) {

.wid100 {width:100%;}
.txt-pi {color: #ff28c0;}	
	
.wid20_m100 {width:100% !important;}
.wid25_m100 {width:100% !important;}
.wid30_m100 {width:100% !important;}
.wid35_m100 {width:100% !important;}
.wid40_m100 {width:100% !important;}
.wid45_m100 {width:100% !important;}
.wid48_m100 {width:100% !important;}
.wid50_m100 {width:100% !important;}
.wid55_m100 {width:100% !important;}
.wid60_m100 {width:100% !important;}
.wid65_m100 {width:100% !important;}
.wid70_m100 {width:100% !important;}
.wid75_m100 {width:100% !important;}
.wid80_m100 {width:100% !important;}
.wid85_m100 {width:100% !important;}
.mgnt5 {margin-top:5px;}
.mgnt10 {margin-top:10px !important;}
.mgnt15 {margin-top:15px !important;}
.mgnt20 {margin-top:20px !important;}
.mgnt30 {margin-top:30px !important;}
.mgnt50 {margin-top:50px !important;}
.mgnt60 {margin-top:60px !important;}
.mgnt80 {margin-top: 80px !important;}
.pdt20 {padding-top: 20px !important;}
.pdl10 {padding-left: 10px !important;}
.pdl30 {padding-left: 30px !important;}
.pdt10 { padding-top: 10px !important;}
.pdt60 { padding-top: 60px !important;}
.pdt80 { padding-top: 80px !important;}
.encent_mL { text-align: left; margin: 0px auto;}
.mobile_only {display: block;}
.encent_mbleft {text-align: left !important;}
.pc_only {display:none;}
.pc_right {float: none;}
.pc_left {float: none;}
.fll {float: none;}
.flr {float: none;}
	
}

@media screen and (max-width:450px) {
.wid100 {width:100%;}
.txt-pi {color: #ff28c0;}
.wid20_m100 {width:98% !important;}
.wid30_m100 {width:98% !important;}
.wid40_m100 {width:98% !important;}
.wid45_m100 {width:98% !important;}
.wid48_m100 {width:98% !important;}
.wid50_m100 {width:98% !important;}
.wid55_m100 {width:98% !important;}
.wid60_m100 {width:98% !important;}
.wid65_m100 {width:98% !important;}
.wid70_m100 {width:98% !important;}
.wid80_m100 {width:98% !important;}
.mgnt5 {margin-top:5px;}
.mgnt10 {margin-top:10px !important;}
.mgnt15 {margin-top:15px !important;}
.mgnt20 {margin-top:20px !important;}
.mgnt30 {margin-top:30px !important;}
.mgnt50 {margin-top:50px !important;}
.mgnt60 {margin-top:60px !important;}
.mgnt80 {margin-top: 80px !important;}
.pdt20 {padding-top: 20px !important;}
.pdl10 {padding-left: 10px !important;}
.pdl30 {padding-left: 30px !important;}
.pdt10 { padding-top: 10px !important;}
.pdt60 { padding-top: 60px !important;}
.pdt80 { padding-top: 80px !important;}	
.encent_mL { text-align: left; margin: 0px auto;}
.mobile_only {display: block;}
.pc_only {display:none;}
.pc_right {float: none;}
.pc_left {float: none;}
.fll {float: none;}
.flr {float: none;}
	
}

@media screen and (max-width:550px){
#page_header_inner {height: 400px !important;}	
}