@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */

/* mainElementHeaderWrap
------------------------------------------------------------------------ */
/* pLeadTxtBox
--------------------------------- */
	.pLeadTxt {
		text-shadow: 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff,
					 0 0 .5em #fff, 0 0 .5em #fff, 0 0 .5em #fff, 0 0 .5em #fff, 0 0 .5em #fff,
					 0 0 .6em #fff, 0 0 .6em #fff, 0 0 .6em #fff, 0 0 .6em #fff, 0 0 .6em #fff,
					 0 0 .8em #fff, 0 0 .8em #fff, 0 0 .8em #fff, 0 0 .8em #fff, 0 0 .8em #fff;
	}



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



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

/* ------------------------------------------------------------------------
	concept
------------------------------------------------------------------------ */
/* conceptIntroContainer
------------------------------------------------------------------------ */
	.conceptIntroContainer {
		padding-top:	var(--site-marpad-XXL);
		padding-bottom:	var(--site-marpad-XXL);
	}
	.conceptIntroContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 7%;
		--default-bgWavyBox-pattern-scale:		-1.3 1.3;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.58;
		--default-bgWavyBox-pattern-translateX:	10%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
	.conceptIntroContainer .bgWavyBox_1::before {
		transform-origin: 50% 50%;
	}
	.conceptIntroContainer .bgWavyBox_2 {
		display: none; /* アニメーション効かない環境下では非表示 */
	}
	.conceptIntroContainer .bgWavyBox_2::before {
		transform-origin: 45% 45%;
		mix-blend-mode: overlay;
	}
@media screen and (max-width: 1050px) {
	.conceptIntroContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center calc(var(--site-marpad-XXL) + 44%);
		--default-bgWavyBox-pattern-scale:		-5.5 5.5;
		--default-bgWavyBox-pattern-rotate:		7deg;
		--default-bgWavyBox-pattern-translateX:	142%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
}
@media screen and (max-width: 736px) {
	.conceptIntroContainer {
		padding-top:	var(--site-marpad-M);
		padding-bottom:	var(--site-marpad-M);
	}
	.conceptIntroContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center calc(var(--site-marpad-M) + 44%);
	}
}
@media screen and (max-width: 450px) {
	.conceptIntroContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center calc(var(--site-marpad-M) + 38%);
	}
}

/* ==============
	ANIME
============== */
@media screen {
	/*[data-js_show_target="conceptIntroContainer"] .bgWavyBox::before {
		opacity: 0; // 初期値 //
	}*/
	[data-js_show_target="conceptIntroContainer"] .bgWavyBox_2 {
		display: block; /* アニメーション効く環境下では表示 */
	}
	
	[data-js_show_target-passed="conceptIntroContainer"] .bgWavyBox_1::before {
		animation: 12s ease both infinite alternate ANIME-conceptIntroContainer_1;
	}
	[data-js_show_target-passed="conceptIntroContainer"] .bgWavyBox_2::before {
		--default-bgWavyBox-pattern-opacity:	.52;
		animation: 30s ease 0s both infinite alternate ANIME-conceptIntroContainer_2;
	}
}
@media screen and (max-width: 1050px) {
	[data-js_show_target-passed="conceptIntroContainer"] .bgWavyBox_1::before {
		animation: 35s ease -2.5s both infinite alternate ANIME-conceptIntroContainer_1_TB;
	}
	[data-js_show_target-passed="conceptIntroContainer"] .bgWavyBox_2::before {
		--default-bgWavyBox-pattern-opacity:	.35;
		animation: 29s ease 0s both infinite alternate ANIME-conceptIntroContainer_2_TB;
	}
}
@keyframes ANIME-conceptIntroContainer_1 {
	0% {	rotate: 8deg;	transform: skew(0deg, 0deg);}
	100% {	rotate: 4deg;	transform: skew(30deg, 10deg);}
}
@keyframes ANIME-conceptIntroContainer_2 {
	0%,5% {		transform: scale(1.5, 1.5)	rotate(6deg)	translate(13%, 10%)	skew(0deg, 0deg);}
	30% {		transform: scale(1.2, 1.2)	rotate(-5deg)	translate(7%, 7%)	skew(17deg, 12deg);}
	60% {		transform: scale(1.6, 1.1)	rotate(10deg)	translate(10%, 5%)	skew(10deg, -1deg);}
	85% {		transform: scale(1.4, 1.4)	rotate(0deg)	translate(12%, 10%)	skew(7deg, 7deg);}
	98%, 100% {	transform: scale(1.5, 1.5)	rotate(8deg)	translate(11%, 7%)	skew(0deg, 3deg);}
}
@keyframes ANIME-conceptIntroContainer_1_TB {
	0%,2% {	scale: -5 5;		rotate: 8deg;	translate: 142% -5%;	transform: skew(0deg, 0deg);	opacity: .2;}
	40% {	scale: -5 5;		rotate: -1deg;	translate: 90% 7%;										opacity: .55;}
	75% {						rotate: 6deg;							transform: skew(0deg, -2deg);	opacity: .5;}
	100% {	scale: -7 7;		rotate: -30deg;	translate: 20% 12%;		transform: skew(18deg, -6deg);	opacity: .35;}
}
@keyframes ANIME-conceptIntroContainer_2_TB {
	0% {	scale: 4 4;			rotate: 0deg;	translate: 10% 5%;	transform: skew(0deg, 0deg);}
	50% {	scale: 3.5 3;		rotate: 10deg;}
	100% {	scale: 4 5;			rotate: 4deg;	translate: 50% 10%;	transform: skew(25deg, 15deg);}
}

/* conceptIntroSection
------------------------------------------------------------------------ */
	.conceptIntroSection {
		--__gtColumns-A_pic: max(400px, (1050 / 1920 * 100%));
	}
	/* txt */
	.conceptIntroSection.SmkGridBox_A-forward .SmkGridBox_A__txt {
		margin-left:	0;								/* _A__pic を余白なし全幅で使うためリセットの0 */
		padding: calc(15px + 2rem + .5vw) clamp(27px, 3.2vw, 70px);
	}
	.conceptIntroSection .SmkGridBox_A__txt .ttl {
		margin-bottom: .1em;
	}
	.conceptIntroSection .SmkGridBox_A__txt .txtBox {
		line-height: 2.6;
	}
	/* pic */
	.conceptIntroSection .SmkGridBox_A__pic {
		padding: 5rem 50px;
	}
	.conceptIntroSection .SmkGridBox_A__pic .ttl {
		display: none;
	}
	.conceptIntroSection .SmkGridBox_A__pic .picBox {
		width: calc(450 / (1050 - (50 * 2)) * 100%);	/* =(ロゴ画像幅 / (先祖(セクション)幅 - 親(_A__pic)の余白) * 100%) */
		min-width: 290px;								/* 親からのはみ出し注意 */
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 1050px) {
	/* txt */
	.conceptIntroSection.SmkGridBox_A-forward .SmkGridBox_A__txt {
		margin-top: clamp(calc(15px + 1rem), (55 / 540 * 100vw), calc(25px + 2rem));
		padding: 0;
	}
	.conceptIntroSection .SmkGridBox_A__txt .ttl {
		display: none;
	}
	.conceptIntroSection .SmkGridBox_A__txt .txtBox {
		line-height: 2.46;
		text-align: center;
	}
	/* pic */
	.conceptIntroSection .SmkGridBox_A__pic {
		padding: 0;
	}
	.conceptIntroSection .SmkGridBox_A__pic .ttl {
		display: block;
		text-align: center;
		margin-bottom: .55em;
	}
	.conceptIntroSection .SmkGridBox_A__pic .picBox {
		width: calc(325 / 540 * 100%);
		max-width: 370px;
		min-width: auto;
	}
}
/* =================================
	ANIME
================================= */
@media screen {
	/* pic */
	.conceptIntroSection .SmkGridBox_A__pic .picBox[data-js_show_target="blur"] {
		--default-jsShowTarget-transition-opacity:		opacity 1500ms ease-out 100ms;
		--default-jsShowTarget-transition-blur:			filter 1200ms ease-out 200ms;
		opacity: .15;
	}
	.conceptIntroSection .SmkGridBox_A__pic .picBox[data-js_show_target-passed="blur"] {
		opacity: 1;
	}
}







/* conceptStyleWrap | 共通設定
---------------------------------------------------------------------------------- */
	/* グリッドボックスの幅(セクションの幅) */
	.conceptStyleWrap [class*="SmkGridBox_A-"] {
		--concept-conceptStyle-gridbox-width: 1600;
		width: var(--site-sizeContentWide-M3);
		max-width: calc(var(--concept-conceptStyle-gridbox-width) * 1px);
	}
	/* テキストエリアの小さい写真 */
	.conceptStyleWrap .subPhBox {
		width: 95%;
		max-width: 338px;
		margin-top: 1.5em;
	}
	/* テキストエリアのボタン */
	.conceptStyleWrap .btnBox {
		margin-top: 1.75em;
	}
	.conceptStyleWrap .btnBox a {
		display: grid;
		grid-template-columns: 1fr;
		align-content: center;
		align-items: center;
		gap: .35em;
		position: relative;
		z-index: 0;
		min-height: 67px;
		line-height: 1.1;
		color: #fff;
		font-family: var(--site-font_family-en_1);
		font-size: 1.0625em;
		text-align: center;
		letter-spacing: .02em;
		width: min(85%, min(17em, 260px));
		background: rgba(0, 47, 96, .4);
		padding: .575em 1.8em .725em;
	}
	.conceptStyleWrap .btnBox a .label {
		padding: 0 1.1em;
	}
	.conceptStyleWrap .btnBox a .arrow {
		position: relative;
		width: 100%;
		height: 0;
		border-top: 1px solid;
	}
	.conceptStyleWrap .btnBox a .arrow::after {
		content: "";
		position: absolute;
		inset: auto 0 0 auto;
		width: 1.1em;
		height: 0;
		border-top: 1px solid;
		transform: rotate(45deg) skewX(-45deg);
		transform-origin: right bottom;
	}
	/* hover, focus */
	.conceptStyleWrap .btnBox a[href] {
		transition: background .22s ease-out;
	}
	.conceptStyleWrap .btnBox a[href] .arrow {
		transition: scale .25s ease-out;
		transform-origin: left center;
	}
	@media (hover: hover) and (pointer: fine) {
		.conceptStyleWrap .btnBox a[href]:hover {
			background: rgba(0, 47, 96, .65);
		}
		.conceptStyleWrap .btnBox a[href]:hover .arrow {
			scale: 1.033 1;
		}
	}
	.conceptStyleWrap .btnBox a[href]:focus-visible {
			background: rgba(0, 47, 96, .65);
	}
@media screen and (max-width: 1050px) {
	.conceptStyleWrap :where([class*="SmkGridBox_A-"]) .SmkGridBox_A__txt > * {
		width: 100%;
		max-width: none;
	}
	.conceptStyleWrap :where([class*="SmkGridBox_A-"]) .SmkGridBox_A__txt > * .SmkTxt_marginAdjustBox {
		text-align: center;
	}
	/* テキストエリアの小さい写真 */
	.conceptStyleWrap .subPhBox {
		width: 75%;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	/* テキストエリアのボタン */
	.conceptStyleWrap .btnBox a {
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 736px) {
	.conceptStyleWrap :where([class*="SmkGridBox_A-"]) .SmkGridBox_A__txt > * .SmkTxt_marginAdjustBox {
		display: block;
		text-align: center;
	}
	/* テキストエリアの小さい写真 */
	.conceptStyleWrap .subPhBox {
		width: max(240px, 50%);
		margin-top: 1.9em;
	}
	/* テキストエリアのボタン */
	.conceptStyleWrap .btnBox {
		margin-top: 2.3em;
	}
	.conceptStyleWrap .btnBox a {
		min-height: 54px;
		font-size: 1em;
		width: min(85%, min(17em, 180px));
	}
}




/* ------------------------------------------------------------------------
	area
------------------------------------------------------------------------ */
/* areaContainer
------------------------------------------------------------------------ */
	.areaContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 30%;
		--default-bgWavyBox-pattern-scale:		1.3 1.3;
		--default-bgWavyBox-pattern-rotate:		-7deg;
		--default-bgWavyBox-pattern-opacity:	.2;
		--default-bgWavyBox-pattern-translateX:	-10%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
@media screen and (max-width: 1050px) {
	.areaContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 43%;
		--default-bgWavyBox-pattern-scale:		2.75 2.75;
		--default-bgWavyBox-pattern-translateX:	0%;
	}
}
/* areaSection
------------------------------------------------------------------------ */
	.areaSection[class*="SmkGridBox_A-"] {
		--concept-conceptStyle-gridbox-width: 1380;
		--__gtColumns-A_pic: max(400px, (860 / var(--concept-conceptStyle-gridbox-width) * 100%));
	}
	.areaSection [class*="bgBoxShadow_"] {
	 	--default-bgBoxShadow_-padding: 0px;
	}
	.areaSection [class*="bgBoxShadow_"] .imgcapkeep {
	 	padding: 1.4em 1.9em;
	}





/* ------------------------------------------------------------------------
	position
------------------------------------------------------------------------ */
/* positionContainer
------------------------------------------------------------------------ */
	.positionContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 18%;
		--default-bgWavyBox-pattern-scale:		-1.75 1.75;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.35;
		--default-bgWavyBox-pattern-translateX:	15%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
@media screen and (max-width: 1050px) {
	.positionContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 30%;
		--default-bgWavyBox-pattern-scale:		-2.75 2.75;
		--default-bgWavyBox-pattern-translateX:	0%;
	}
}
/* positionSection
------------------------------------------------------------------------ */
	.positionSection[class*="SmkGridBox_A-"] {
		--__gtColumns-A_pic: max(400px, (940 / var(--concept-conceptStyle-gridbox-width) * 100%));
	}
	.positionSection [class*="bgBoxShadow_"] {
	 	--default-bgBoxShadow_-padding: 0px;
	}
	.positionSection [class*="bgBoxShadow_"] .imgcapkeep {
	 	padding: 1.4em 1.9em;
	}





/* ------------------------------------------------------------------------
	access
------------------------------------------------------------------------ */
/* accessContainer
------------------------------------------------------------------------ */
	.accessContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 10%;
		--default-bgWavyBox-pattern-scale:		-2.5 2.5;
		--default-bgWavyBox-pattern-rotate:		-7deg;
		--default-bgWavyBox-pattern-opacity:	.2;
		--default-bgWavyBox-pattern-translateX:	60%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
@media screen and (max-width: 1050px) {
	.accessContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 40%;
		--default-bgWavyBox-pattern-scale:		3 3;
		--default-bgWavyBox-pattern-translateX:	0%;
	}
}
/* accessSection
------------------------------------------------------------------------ */
	.accessSection[class*="SmkGridBox_A-"] {
		--__gtColumns-A_pic: max(400px, (1100 / var(--concept-conceptStyle-gridbox-width) * 100%));
	}
	
	.accessSection .subPhBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3px;
		max-width: 523px;
	}
@media screen and (max-width: 1050px) {
	.accessSection .subPhBox {
		width: 75%;
		max-width: 553px;
	}
}
@media screen and (max-width: 736px) {
	.accessSection .subPhBox {
		width: max(363px, 50%);
	}
}





/* ------------------------------------------------------------------------
	design
------------------------------------------------------------------------ */
/* designContainer
------------------------------------------------------------------------ */
	.designContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 0%;
		--default-bgWavyBox-pattern-scale:		-2.5 2.5;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.36;
		--default-bgWavyBox-pattern-translateX:	5%;
		--default-bgWavyBox-pattern-translateY:	0;
	}
@media screen and (max-width: 1050px) {
	.designContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 38%;
		--default-bgWavyBox-pattern-scale:		-3 3;
		--default-bgWavyBox-pattern-translateX:	0%;
	}
}
/* designSection
------------------------------------------------------------------------ */
	.designSection[class*="SmkGridBox_A-"] {
		--__gtColumns-A_pic: max(400px, (840 / var(--concept-conceptStyle-gridbox-width) * 100%));
	}
	/* テキストエリアの小さい写真 */
	.designSection .subPhBox {
		max-width: 342px;
	}





/* ------------------------------------------------------------------------
	plan
------------------------------------------------------------------------ */
/* planContainer
------------------------------------------------------------------------ */
	.planContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 0%;
		--default-bgWavyBox-pattern-scale:		1.75 1.75;
		--default-bgWavyBox-pattern-rotate:		-8deg;
		--default-bgWavyBox-pattern-opacity:	.36;
		--default-bgWavyBox-pattern-translateX:	-15%;
		--default-bgWavyBox-pattern-translateY:	-8%;
	}
@media screen and (max-width: 1050px) {
	.planContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 36%;
		--default-bgWavyBox-pattern-scale:		1.85 1.85;
		--default-bgWavyBox-pattern-translateX:	0%;
	}
}
/* planSection
------------------------------------------------------------------------ */
	.planSection[class*="SmkGridBox_A-"] {
		--__gtColumns-A_pic: max(400px, (840 / var(--concept-conceptStyle-gridbox-width) * 100%));
	}