@charset "utf-8";

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

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

/* ------------------------------------------------------------------------
	 myPageSection
------------------------------------------------------------------------ */
	.myPageSection .myPageWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.myPageSection .myPageWrap .txtBox {
		width: 50%;
	}
	.myPageSection .myPageWrap .picBox {
		width: 40%;
	}
	
/*txtBox*/
	.myPageSection .myPageWrap .txtBox .jaTtl {
		position: relative;
		margin-bottom:1.5em;
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 736;
		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)
		);
		font-family: var(--site-font_family-serif);
	}	
	.myPageSection .myPageWrap .txtBox .jaTtl::after {
		position: absolute;
		content: "";
		left: 50%;
		transform: translateX(-50%);
		bottom: -1.2em;
		width: 40px;
		height: 1px;
		background: #555;
	}	
	.myPageSection .myPageWrap .txtBox .txt {
		padding-top:1.2em;
		text-align: center;
	}	
	
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.myPageSection .contbox {
		padding: clamp(40px, (40 / 736 * 100vw), 60px) ;
	}
}
@media screen and (max-width: 900px) {
	.myPageSection .contbox {
		padding: clamp(30px, (30 / 480 * 100vw), 40px) ;
	}
	.myPageSection .myPageWrap .txtBox {
		width: 100%;
	}
	.myPageSection .myPageWrap .picBox {
		width: 100%;
		margin-top:1.5em;
	}
	.myPageSection .myPageWrap .picBox p {
		margin-left:auto;
		margin-right:auto;
		max-width:300px;
	}

}

/* ------------------------------------------------------------------------
 flowSection
------------------------------------------------------------------------ */
	.flowSection .hTtl {
		text-align: center;
		margin-bottom:var(--site-marpad-S);
	}
	.flowSection .hTtl .hTxtStyh4{
		padding: 0.5em 1.5em;
		margin-bottom: 0;
		line-height: 1.6;
	}

@media screen and (max-width: 736px) { /*{SP}*/
}

/*flowWrap-----------------------------*/
	.flowWrap {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
	}
	.flowWrap .headingBox {
		width: 32%;
		padding: clamp(30px, (30 / 1200 * 100vw), 40px);
	}
	.flowWrap .detailBox {
		width: 68%;
		padding: clamp(30px, (30 / 1200 * 100vw), 40px);
	}
	
@media screen and (max-width: 1050px) { /*{belowTBs}*/
	.flowWrap .headingBox {
		width: 100%;
		padding: clamp(10px, (10 / 736 * 100vw), 20px) 20px;
	}
	.flowWrap .detailBox {
		width: 100%;
	}
}	
@media screen and (max-width: 736px) { /*{SP}*/
	.flowWrap .detailBox {
		padding: clamp(25px, (25 / 736 * 100vw), 30px);
	}
}


	
/*headingBox---*/
	.flowWrap .headingBox {
		display: flex;
		align-items: center;
		color:#fff;
		background: #276254;
	}
	.flowWrap .headingBox .headingUnit {
		display: flex;
		align-items: center;
		width: 100%;
	}
	.flowWrap .headingBox .headingUnit .num {
		margin-right:0.3em;
		--M-fluidFontSize-max-fontsize: 65;
		--M-fluidFontSize-min-fontsize: 55;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1050;
		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)
		);
		font-family: var(--site-font_family-en_1);
		font-style: italic;
		line-height: 1;
	}
	.flowWrap .headingBox .headingUnit .ttl {
		font-size:1.2em;
		font-family: var(--site-font_family-serif);
		line-height: 1.6;
	}
	
/*detailBox---*/
	.flowWrap .detailBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.flowWrap .detailBox .detailUnit {
		width: 100%;
		line-height: 1.6;
	}



/*個別-----*/
/*01*/
	.flowWrap.step01 .detailBox .detailElement {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flowWrap.step01 .detailBox .detailElement .txt {
		padding-right:2em;
	}
	.flowWrap.step01 .detailBox .detailElement .btn_req .generalBtnUnit {
		width: 100%;
		min-width: 250px;
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.flowWrap.step01 .detailBox .detailElement {
		flex-wrap: wrap;
	}
	.flowWrap.step01 .detailBox .detailElement .txt {
		width: 100%;
		padding-right: 0em;
		margin-bottom:1em;
	}
	.flowWrap.step01 .detailBox .detailElement .btn_req {
		width: 100%;
	}
	.flowWrap.step01 .detailBox .detailElement .btn_req .generalBtnUnit {
		margin-right:auto;
	}
}	

/*03*/
	.flowWrap.step03 .detailBox .detailElement {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flowWrap.step03 .detailBox .detailElement .txt {
		padding-right:2em;
	}
	.flowWrap.step03 .detailBox .detailElement .pic {
		min-width:300px;
	}
	
@media screen and (max-width: 736px) { /*{SP}*/
	.flowWrap.step03 .detailBox .detailElement {
		flex-wrap: wrap;
	}
	.flowWrap.step03 .detailBox .detailElement .txt {
		width: 100%;
		margin-bottom:1em;
	}
	.flowWrap.step03 .detailBox .detailElement .pic {
		width: 100%;
		min-width:auto;
		text-align: center;
	}
}


/*04*/
	.flowWrap.step04 .detailBox .detailElement {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flowWrap.step04 .detailBox .detailElement .txt {
		padding-right:2em;
	}
	.flowWrap.step04 .detailBox .detailElement .pic {
		min-width:300px;
	}
	
@media screen and (max-width: 736px) { /*{SP}*/
	.flowWrap.step04 .detailBox .detailElement {
		flex-wrap: wrap;
	}
	.flowWrap.step04 .detailBox .detailElement .txt {
		width: 100%;
		margin-bottom:1em;

	}
	.flowWrap.step04 .detailBox .detailElement .pic {
		width: 100%;
		min-width:auto;
		text-align: center;
	}
}


/*arrow	*/
	.flowWrap:not(:last-of-type) {
	  position: relative;
	  margin-bottom:60px;
	}
	.flowWrap:not(:last-of-type)::after {
	  content: "";
	  display: block;
	  position: absolute;
	  bottom: -40px;
	  left: 50%;
	  width: 0;
	  height: 0;
	  transform: translateX(-50%);
	  border: 30px solid transparent;
	  border-top: 20px solid #878891;
	  border-bottom-width: 0;
	}

/* ▲━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->