@charset "utf-8";

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

	main {
		background: none;
	}

	.contbox {
		width: 90%;
		max-width: 1100px;
	}

/* PCTBSP
--------------------------------- */
@media screen and (max-width: 900px) {
	br.PC {
		display: none;
	}
}



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

/* ------------------------------------------------------------------------
	myPageHeader
------------------------------------------------------------------------ */
	.myPageHeader {
		background: #fff var(--site-variationColor-pattern_veil_PC-url) center center / max(1920px, 100%) auto no-repeat;
		padding-top:	clamp(50px, (50 / 375 * 100vw), 100px);
		padding-bottom:	clamp(50px, (50 / 375 * 100vw), 100px);
	}
	.myPageHeader .myPageWrap {
		display: grid;
		grid-template-columns: calc(600 / 1100 * 100%) calc(400 / 1100 * 100%);
		justify-content: space-between;
		/*align-items: center;*/
		line-height: 1.5;
		letter-spacing: .08em;
		font-size: clamp(1.25rem, (16 / 1200 * 100vw), 1.6rem);
	}

/*txtBox*/
	.myPageHeader .myPageWrap .txtBox {
		text-align: center;
	}
	.myPageHeader .myPageWrap .txtBox .heading {
		line-height: 1.3;
		font-family: var(--site-font_family-en_1);
		font-size: 1.875em;
		letter-spacing: .1em;
		padding: .8em 0 .7em;
		border: 1px solid currentColor;
		border-width: 1px 0;
	}
	.myPageHeader .myPageWrap .txtBox .subTtl {
		font-size: 1.5em;
		margin-top: 2.25em;
	}
	.myPageHeader .myPageWrap .txtBox .subTtl::after {
		content: "";
		display: block;
		width: 2em;
		height: 0;
		margin-top: .5em;
		margin-bottom: .9em;
		margin-left: auto;
		margin-right: auto;
		border-top: 1px solid currentColor;
	}
	.myPageHeader .myPageWrap .txtBox .txt small {
		font-family: inherit;
		font-size: max(1rem, .75em);
	}

/*picBox*/
	.myPageHeader .myPageWrap .picBox {
		align-self: center;
	}
	.myPageHeader .myPageWrap .picBox .pic .imgcapkeep {
		font-size: 1rem;
		letter-spacing: normal;
	}

@media screen and (max-width: 900px) {
	.myPageHeader .myPageWrap {
		grid-template-columns: 1fr;
		font-size: clamp(1.175rem, (12.5 / 375 * 100vw), 1.35rem);
	}

	.myPageHeader .myPageWrap .txtBox .heading {
		font-size: 1.75em;
	}
	.myPageHeader .myPageWrap .txtBox .subTtl {
		font-size: 1.45em;
		margin-top: 1.5em;
	}

	.myPageHeader .myPageWrap .picBox {
		margin-top: 1.9em;
	}
	.myPageHeader .myPageWrap .picBox .pic {
		width: 86%;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 900px) {
	.myPageHeader {
		background: #fff var(--site-variationColor-pattern_veil_SP-url) center center / max(750px, 100%) auto no-repeat;
	}
}





/* ------------------------------------------------------------------------
	stepSection
------------------------------------------------------------------------ */
	.stepSection {
		line-height: 1.85;
		font-size: clamp(1.25rem, (14 / 1200 * 100vw), 1.4rem);
		padding-top:	clamp(50px, (50 / 375 * 100vw), 80px);
		padding-bottom:	clamp(50px, (50 / 375 * 100vw), 80px);
	}
	.stepSection .stepSectionHeading {
		line-height: 1.590591;
		font-size: 1.571428em;
		text-align: center;
		letter-spacing: .1em;
		margin-bottom: clamp(35px, (35 / 375 * 100vw), 80px);
		padding: .8em 0 .7em;
		border: 1px solid currentColor;
		border-width: 1px 0;
	}
@media screen and (max-width: 900px) {
	.stepSection {
		font-size: clamp(1.2rem, (12.5 / 375 * 100vw), 1.4rem);
	}
	.stepSection .stepSectionHeading {
		font-size: 1.3em;
	}
}


/*stepList-----------------------------*/
	.stepList {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(70px, (88 / 1200 * 100vw), 88px) 0;
	}
	.stepUnit {
		display: grid;
		grid-template-columns: 33.272727% 1fr;
		gap: 0;
		position: relative;
		z-index: 0;
		background: #fff;
	}
	.stepUnit:not(:last-child)::after {
		content: "";
		display: block;
		position: absolute;
		inset: 100% auto auto calc(33.272727% / 2);
		z-index: -1;
		width: auto;
		height: 30px;
		aspect-ratio: 8 / 3;
		background: #3f3f3f;
		clip-path: polygon(0% 0, 100% 0%, 50% 100%);
		translate: -50% -1px; /* -1pxはスキマ対策 */
	}
	.stepUnit .headingBox {
		padding: 40px clamp(17px, (24 / 1200 * 100vw), 24px);
	}
	.stepUnit .detailBox {
		padding: 40px clamp(22px, (34 / 1200 * 100vw), 34px);
	}
	.stepUnit img {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
	}
@media screen and (max-width: 900px) {
	.stepList {
		gap: 60px 0;
	}
	.stepUnit {
		grid-template-columns: 1fr;
	}
	.stepUnit:not(:last-child)::after {
		inset: calc(100% + ((60px - 23px) / 2)) auto auto 50%;
		height: 23px;
		aspect-ratio: 8 / 2.5;
		translate: -50% 0;
	}
	.stepUnit .headingBox,
	.stepUnit .detailBox {
		padding: 20px;
	}
}



/*headingBox---*/
	.stepUnit .headingBox {
		display: flex;
		align-items: center;
		color: #fff;
		background: #3f3f3f;
	}
	.stepUnit .headingBox .headingUnit {
		display: grid;
		grid-template-columns: 2.95em 1fr;
		align-items: center;
		gap: 0 .9em;
		width: 100%;
	}
	.stepUnit .headingBox .headingUnit .num {
		line-height: .5;
		color: #fff;
		font-family: var(--site-font_family-en_2);
		font-size: 5.5em;
		font-style: italic;
		translate: 0 -.04em; /* 微調整 */
	}
	.stepUnit .headingBox .headingUnit .ttl {
		line-height: 1.677;
		font-size: 1.285714em;
		letter-spacing: .03em;
	}

/*detailBox---*/
	.stepUnit .detailBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.stepUnit .detailBox .detailUnit {
		width: 100%;
		text-align: justify;
		letter-spacing: .1em;
	}
	.stepUnit .detailBox :where(.detailElement).cssGrid {
		--campaign-stepUnit_detailElement-cssGrid-gridTemplateColumns: 1fr 300px; /* 初期値: 1fr min(35%, 300px); */
		display: grid;
		grid-template-columns: var(--campaign-stepUnit_detailElement-cssGrid-gridTemplateColumns);
		align-items: center;
		gap: calc(15px + .5em) 6%;
	}
@media screen and (max-width: 900px) {
	.stepUnit .headingBox .headingUnit {
		grid-template-columns: 2.4em 1fr;
	}
	.stepUnit .headingBox .headingUnit .num {
		font-size: 4em;
	}
}
@media screen and (max-width: 736px) {
	.stepUnit .detailBox :where(.detailElement).cssGrid {
		--campaign-stepUnit_detailElement-cssGrid-gridTemplateColumns: 1fr; /* 初期値: 1fr; */
	}
}
@media screen and (max-width: 480px) {
	.stepUnit .headingBox .headingUnit {
		grid-template-columns: 2.1em 1fr;
	}
	.stepUnit .headingBox .headingUnit .num {
		font-size: 3.2em;
		translate: 0 0; /* 微調整のリセット */
	}
	.stepUnit .headingBox .headingUnit .ttl {
		font-size: 1.28em;
	}
}



/*個別-----*/
/*01*/
	/*.stepUnit01 .detailBox :where(.detailElement).cssGrid {
		--campaign-stepUnit_detailElement-cssGrid-gridTemplateColumns: 1fr 268px;
	}*/
	.stepUnit01 .detailBox .detailElement .txt_uki_button_yori {
		display: inline;
	}
	.stepUnit01 .detailBox .detailElement .txt_kaki_button_yori {
		display: none;
	}
	.stepUnit01 .detailBox .detailElement .btn_req [class*="generalButton"],
	.stepUnit01 .detailBox .detailElement .btn_req [class*="generalBtnUnit"] {
		width: 100%;
		max-width: none;
		letter-spacing: .18em;
	}
@media screen and (max-width: 900px) {
	/*.stepUnit01 .detailBox :where(.detailElement).cssGrid {
		--campaign-stepUnit_detailElement-cssGrid-gridTemplateColumns: 1fr;
	}*/
}
@media screen and (max-width: 736px) {
	.stepUnit01 .detailBox .detailElement .txt_uki_button_yori {
		display: none;
	}
	.stepUnit01 .detailBox .detailElement .txt_kaki_button_yori {
		display: inline;
	}
	.stepUnit01 .detailBox .detailElement .btn_req [class*="generalButton"],
	.stepUnit01 .detailBox .detailElement .btn_req [class*="generalBtnUnit"] {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*02*/
	.stepUnit02 {}

/*03*/
@media screen and (max-width: 736px) {
	.stepUnit03 .detailBox .detailElement .pic img {
		display: block;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*04*/
@media screen and (max-width: 736px) {
	.stepUnit04 .detailBox .detailElement .pic img {
		display: block;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}