@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */

/* =======================================================================================
	PAGE 
======================================================================================= */

/* ------------------------------------------------------------------------
 introSection
------------------------------------------------------------------------ */
/* introWrap
-----------------------------------------------------------*/
	.introWrap > * {
		display: block;
	}
	.introWrap .logo {
		width: 35.83%;
		padding-bottom:1em;
		margin-left:auto;
		margin-right:auto;
	}
	.introWrap .txt {
		text-align: center;
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 28;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		letter-spacing: 0.3em;
		color:#d5b864;
	}
@media screen and (max-width: 900px) {
	.introWrap .logo {
		width: 40%;
	}
	.introWrap .txt {
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 600;
		letter-spacing: 0.3em;
	}
}
@media screen and (max-width: 600px) {
	.introWrap .logo {
		width: 50%;
	}
}








/* ------------------------------------------------------------------------
 conceptSection
------------------------------------------------------------------------ */
	.conceptSection.contbox {
		margin-top: clamp(80px, (100 / 1200 * 100vw), 150px) ;
	}
@media screen and (max-width: 800px) {
	.conceptSection.contbox {
		margin-top: clamp(20px, (20 / 480 * 100vw), 30px) ;
		max-width:600px;
	}
}
/* photoWrap
-----------------------------------------------------------*/
	.conceptSection .photoWrap {
		position: relative;
	}
	.conceptSection .photoWrap .txtBox {
		width: 100%;
		text-align: center;
		z-index: 2;
	}
	.conceptSection .photoWrap .txtBox .txt {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 3;
		color: #e0cc91;
		text-shadow: 0 0 2px #000, 0 0 5px #000, 0 0 10px #000, 0 0 20px #000, 0 0 40px #000, 0 0 40px #000, 0 0 40px #000, 1px 1px 2px #000, -1px -1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;		
	}
	.conceptSection .photoWrap .picBox {
		position: relative;
		z-index: 0;

	}


@media screen and (min-width: 900.02px) {
	.conceptSection .photoWrap .txtBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 90%;
	}
}
@media screen and (max-width: 900px) {
	.conceptSection .photoWrap .txtBox {
		padding-bottom:2em;
	}
	.conceptSection .photoWrap .txtBox .txt {
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 800;
		--M-fluidFontSize-min-viewport: 600;
		line-height: 2;
		text-shadow: none;		
	}
	
	.conceptSection .photoWrap .imgcapkeep {right:-22px;}

}


/* conceptWrap
-----------------------------------------------------------*/
	.conceptWrap {
		position: relative;
		margin-top: clamp(-80px, (-80 / 1200 * 100vw), -200px) ;
	}

/* txtBox
-----------------------------------*/
	.conceptWrap .txtBox .ptHeading {
		width: 100%;
		color: #564100;
	}
	.conceptWrap .txtBox .iconElement {
		color: #564100;
	}
	.conceptWrap .txtBox .iconElement dl dt {
		text-align: center;
		border-bottom: 1px solid #564100;
	}
	.conceptWrap .txtBox .iconElement dl dt .icon {
		display: block;
		width: 60%;
		margin-left:auto;
		margin-right:auto;
	}
	.conceptWrap .txtBox .iconElement dl dt .ttl {
		display: block;
		margin:0.8em 0;
	}
	.conceptWrap .txtBox .iconElement dl dd.txt {
		padding: 0.5em 0.2em 0;
		line-height: 1.8;
	}
	
@media screen and (min-width: 900.02px) {
	.conceptWrap {
		position: relative;
		z-index: 5;
	}
	/* txtBox
	-----------------------------------*/
	.conceptWrap .txtBox {
		position: absolute;
		width:100%;
		height:100%;
	}
	.conceptWrap .txtBox .ptHeading {
		width: 60%;
		margin: var(--site-marpad-L) auto 0;
	}
	.conceptWrap .txtBox .iconElement {
		position: absolute;
		width: 25%;
	}
	.conceptWrap .txtBox .iconElement.icon01 {  top:10%; left:14%;}
	.conceptWrap .txtBox .iconElement.icon02 {  top:10%; right:14%;}	
	.conceptWrap .txtBox .iconElement.icon03 {  top:40%; left:5%;}
	.conceptWrap .txtBox .iconElement.icon04 {  top:38%; right:5%;}	
	.conceptWrap .txtBox .iconElement.icon05 {  top:62%; left:22%;}
	.conceptWrap .txtBox .iconElement.icon06 {  top:62%; right:22%;}	
	
	.conceptWrap .txtBox .iconElement dl dt {
		border-bottom: 1px solid #564100;
	}
}

@media screen and (min-width: 1000.02px) {
	.conceptWrap .txtBox .ptHeading {
		width: 60%;
	}
	.conceptWrap .txtBox .iconElement {
		width: 22%;
	}
	
	.conceptWrap .txtBox .iconElement.icon01 {  top:12%; left:20%;}
	.conceptWrap .txtBox .iconElement.icon02 {  top:11%; right:18%;}	
	.conceptWrap .txtBox .iconElement.icon03 {  top:40%; left:5%;}
	.conceptWrap .txtBox .iconElement.icon04 {  top:40%; right:5%;}	
	.conceptWrap .txtBox .iconElement.icon05 {  top:62%; left:22%;}
	.conceptWrap .txtBox .iconElement.icon06 {  top:62%; right:22%;}	
}

@media screen and (min-width: 1200.02px) {
	.conceptWrap .txtBox .iconElement dl dt .ttl {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.4;
	}
	
	.conceptWrap .txtBox .iconElement.icon01 {  top:12%; left:17%;}
	.conceptWrap .txtBox .iconElement.icon02 {  top:12%; right:17%;}	
	.conceptWrap .txtBox .iconElement.icon03 {  top:40%; left:5%;}
	.conceptWrap .txtBox .iconElement.icon04 {  top:40%; right:5%;}	
	.conceptWrap .txtBox .iconElement.icon05 {  top:62%; left:22%;}
	.conceptWrap .txtBox .iconElement.icon06 {  top:62%; right:22%;}	
}

@media screen and (min-width: 900.02px) and (max-width: 1200px) {
	.conceptWrap .txtBox .hTxtStyh2 {
		--M-fluidFontSize-max-fontsize: 18;
	}
	.conceptWrap .txtBox .iconElement dl dt .ttl {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 800;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.2;
	}
	.conceptWrap .txtBox .iconElement dl dd.txt {
		font-size: 0.8em;
		line-height: 1.4;
	}
}

@media screen and (min-width: 1400.02px) {
	.conceptWrap .txtBox .iconElement.icon01 {  top:13%; left:20%;  width: 20%;}
	.conceptWrap .txtBox .iconElement.icon02 {  top:13%; right:20%; width: 20%;}	
	.conceptWrap .txtBox .iconElement.icon03 {  top:42%; left:5%;}
	.conceptWrap .txtBox .iconElement.icon04 {  top:42%; right:5%;}	
	.conceptWrap .txtBox .iconElement.icon05 {  top:65%; left:25%;}
	.conceptWrap .txtBox .iconElement.icon06 {  top:65%; right:25%;}	
}

@media screen and (max-width: 900px) {
	.conceptWrap {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		margin-top: clamp(-40px, (-40 / 60 * 100vw), -80px) ;
	}
	
	
	
	/* txtBox
	-----------------------------------*/
	.conceptWrap .txtBox .ptHeading {
		margin-top : var(--site-marpad-M);
		color: rgba(var(--site-variationColor-yellow), 1);
	}
	.conceptWrap .txtBox .iconElement {
		color: rgba(var(--site-variationColor-yellow), 1);
	}
	.conceptWrap .txtBox .iconElement dl dt {
		text-align: center;
		border-bottom: 1px solid rgba(var(--site-variationColor-yellow), 1);
	}
	.conceptWrap .txtBox .iconElement dl dt .ttl {
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 800;
		--M-fluidFontSize-min-viewport: 480;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
	}
	.conceptWrap .txtBox .iconElement dl dd.txt {
		font-size: 1em;
	}
	.conceptWrap .txtBox .iconUnit {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.conceptWrap .txtBox .iconUnit .iconElement {
		width: 47%;
		margin-top:30px;
	}
	.conceptWrap .txtBox .iconElement dl dd.txt {
		padding: 0.5em 0.2em 0;
		font-size:1em;
		line-height: 1.8;
	}
}


@media screen and (max-width: 600px) {
	.conceptWrap .txtBox .iconUnit {
		display: none;
	}
}

@media screen and (max-width: 480px) { /*{SPs}*/
/*	.conceptWrap .txtBox .iconUnit .iconElement {
		width: 100%;
	}
	.conceptWrap .txtBox .iconElement dl dt .icon {
		width: 40%;
	}*/
}


/* ------------------------------------------------------------------------
 conceptSwperWrap
------------------------------------------------------------------------ */
@media print, screen and (min-width: 600.02px) {
	.conceptSwperWrap {
		display: none;
	}
}
@media screen and (max-width: 600px) {
	.conceptSwperWrap {
		position: relative;
		margin-top:30px;
	}
	.conceptSwperWrap .iconElement {
		color:rgba(var(--site-variationColor-yellow), 1);
	}
	.conceptSwperWrap .iconElement dl dt {
		text-align: center;
		/*border-bottom: 1px solid rgba(var(--site-variationColor-yellow), 1);*/
	}
	.conceptSwperWrap .iconElement dl dt > span{
		display: block;
	}
	.conceptSwperWrap .iconElement dl dt .icon {
		margin-left:auto;
		margin-right:auto;
		width: 40%;
	}

	.conceptSwperWrap .iconElement dl dt .ttl {
		margin: 0.8em 0 0;
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
	}
	.conceptSwperWrap .iconElement dl dd.txt {
		padding: 1em 1em 0;
		font-size:1em;
		line-height: 1.8;
	}

	/* 矢印カスタマイズ */
	.conceptSwperWrap .swiper-button-prev::after,
	.conceptSwperWrap .swiper-button-next::after {
	  content: "";
	  margin: auto;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  width: 0;
	  height: 0;
	}
	
	.conceptSwperWrap .swiper-button-prev {
		left:-20px;
	}
	.conceptSwperWrap .swiper-button-next {
		right:-20px;
	}
	
	
	.conceptSwperWrap .swiper-button-prev::after {
	  border-bottom: 10px solid transparent;
	  border-right: 20px solid rgba(255,255,255,.8);
	  border-top: 10px solid transparent;
	}
	.conceptSwperWrap .swiper-button-next::after {
	  border-bottom: 10px solid transparent;
	  border-left: 20px solid rgba(255,255,255,.8);
	  border-top: 10px solid transparent;
	}



}




/* ------------------------------------------------------------------------
 summaryWrap
------------------------------------------------------------------------ */
	.summaryWrap .txt {
		color:#e0cc91;
	}