@charset "utf-8";

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



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

/* main
------------------------------------------------------------------------ */
	main {
		/*color: rgba(var(--site-themeColor-base_text), 1);*/
		background: #fff;
	}


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

/* premiumPlanHeaderWrap
------------------------------------------------------------------------ */
	.premiumPlanHeaderWrap {
		position: relative;
		z-index: 0;
		min-height: 500px; /* feeling. */
		color: #fff;
		background: #272727 url("../images/roomplan/premium/main.jpg") 56% center / cover no-repeat;
		padding-top: clamp(120px, (180 / 1600 * 100vw), 180px);
		padding-bottom: clamp(120px, (170 / 1600 * 100vw), 170px);
	}
	.premiumPlanHeaderWrap::before {} /* 背景画像アニメーション に使用 */
	.premiumPlanHeaderWrap[data-bgcap-parent]::after {
		/* キャプション文言はHTMLに設定済。スタイルはdefault.css参照（[data-bgcap-parent]::after） */
		font-size: 1rem;
		opacity: .66;
	}
@media screen and (max-width: 1200px) {
	.premiumPlanHeaderWrap {
		margin-top: var(--site-stickyHeader-height); /* ヘッダーに被せない */
		padding-top: clamp((110px + 2rem), (130 / 375 * 100vw), 180px);
		padding-bottom: clamp((50px + 2rem), (70 / 375 * 100vw), 120px);
	}
}

/* breadcrumbWrap
---------------------------------------------------- */
	.breadcrumbWrap {
	}

/* premiumPlanTitleBox
---------------------------------------------------- */
	.premiumPlanTitleBox {
		display: grid;
		grid-template-columns: calc(500 / 1260 * 100%) calc(720 / 1260 * 100%);
		justify-content: space-between;
		align-items: center;
	}
	
	.premiumPlanTitleDescription {
		line-height: 1.35;
		font-size: clamp(1.225rem, (17 / 1400 * 100vw), 1.7rem);
		text-align: center;
		letter-spacing: .085em;
	}
	.premiumPlanTitleDescription .ttlBox {}
	.premiumPlanTitleDescription .ttlBox .heading {
		line-height: 1;
		font-family: var(--site-font_family-en_1);
		font-size: 4.705882em;
		letter-spacing: .08em;
	}
	.premiumPlanTitleDescription .ttlBox .heading .subTtl {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .25em;
		width: 100%;
		font-size: .425em;
		margin-top: .45em;
	}
	.premiumPlanTitleDescription .ttlBox .heading .subTtl::before,
	.premiumPlanTitleDescription .ttlBox .heading .subTtl::after {
		content: "";
		flex: 0 0 1.53em;
		border-top: 1px solid rgba(235, 220, 185, .48);
	}
	.premiumPlanTitleDescription .ttlBox .heading .gradientGold {
		color: transparent;
		background: linear-gradient(90deg, #a0886b 0%, #ebdcb9 25%, #a0886b 50%, #ebdcb9 75%, #a0886b 100%);
		-webkit-background-clip: text;
				background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.premiumPlanTitleDescription .txtBox {
		display: grid;
		grid-template-columns: 1fr;
		max-width: 620px;
		margin-top: 2em;
		margin-left: auto;
		margin-right: auto;
	}
	.premiumPlanTitleDescription .txtBox .txtL {
		line-height: 2.08;
		font-size: 1.588235em;
		letter-spacing: .13em;
	}
	.premiumPlanTitleDescription .txtBox .txtL .num {
		line-height: .55;
		color: rgba(var(--site-themeColor-accent_3), 1);
		font-family: var(--site-font_family-en_2);
		font-size: 2.333333em;
		margin-left: .02em;
		margin-right: .03em;
	}
	.premiumPlanTitleDescription .txtBox .txtS {
		line-height: 1.666667;
		font-size: max(1.375rem, 1em);
		margin-top: .2em;
		padding-top: .9em;
		border-top: 1px solid rgba(255, 255, 255, .48);
	}
	
	.premiumPlanTitleLandplotMap {
		order: -1;
	}
	.premiumPlanTitleLandplotMap .pic {}
	.premiumPlanTitleLandplotMap small {
		font-size: 1rem;
		padding-left: 1em;
		padding-right: 1em;
		opacity: .85;
	}

	.premiumPlanTitleDescription br.PC {
		display: inline;
	}
	.premiumPlanTitleDescription br.SP {
		display: none;
	}
@media screen and (max-width: 900px) {
	.premiumPlanTitleBox {
		grid-template-columns: 1fr;
		gap: calc(2.25em + 20px) 0;
	}
	
	.premiumPlanTitleDescription {
		font-size: clamp(1.5rem, (18 / 800 * 100vw), 1.8rem);
		letter-spacing: .055em;
	}
	.premiumPlanTitleDescription .ttlBox .heading {
		font-size: 3.25em;
	}
	.premiumPlanTitleDescription .txtBox {
		width: 94%;
	}
	.premiumPlanTitleDescription .txtBox .txtL {
		font-size: 1.333333em;
		letter-spacing: .08em;
	}
	.premiumPlanTitleDescription .txtBox .txtL .num {
		font-size: 2.65em;
	}
	.premiumPlanTitleDescription .txtBox .txtS {
		line-height: 1.666667;
		margin-top: .2em;
		padding-top: .9em;
		border-top: 1px solid rgba(255, 255, 255, .48);
	}
	
	.premiumPlanTitleLandplotMap {
		order: 0;
	}
}
@media screen and (max-width: 520px) {
	.premiumPlanTitleDescription {
		font-size: 1.5rem;
		letter-spacing: .055em;
	}
	.premiumPlanTitleDescription .ttlBox .heading {
		font-size: 2.333333em;
	}
	.premiumPlanTitleDescription .txtBox .txtL {
		line-height: 1.45;
	}
	.premiumPlanTitleDescription .txtBox .txtL .num {
		line-height: .85;
	}
	.premiumPlanTitleDescription .txtBox .txtS {
		margin-top: .9em;
		padding-top: 1em;
	}
	.premiumPlanTitleDescription br.PC {
		display: none;
	}
	.premiumPlanTitleDescription br.SP {
		display: inline;
	}
}
/* ==========
	ANIME
========== */
@media screen {
	/* 背景画像アニメーション ---------- */
	[data-js_show_target="premiumPlanHeaderWrap"] {
		opacity: 1;
	}
	[data-js_show_target="premiumPlanHeaderWrap"]::before {
		content: "";
		opacity: 1;
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(20, 0, 20, .55);
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	[data-js_show_target="premiumPlanHeaderWrap"]::before {
		animation: 2200ms ease-in 0ms both ANIME-premiumPlanHeaderWrap_beforeBgColor;
	}
	/* ページ名等 ---------- */
	[data-js_show_target="premiumPlanTitleBox"] {
		opacity: 1;
	}
	[data-js_show_target="premiumPlanTitleBox"] .ttlBox,
	[data-js_show_target="premiumPlanTitleBox"] .txtBox,
	[data-js_show_target="premiumPlanTitleBox"] .premiumPlanTitleLandplotMap {
		opacity: 0;
	}
	[data-js_show_target-passed="premiumPlanTitleBox"] .ttlBox {
		animation: 2000ms ease 0ms both ANIME-premiumPlanTitleBox_childItem;
	}
	[data-js_show_target-passed="premiumPlanTitleBox"] .txtBox {
		animation: 2000ms ease 300ms both ANIME-premiumPlanTitleBox_childItem;
	}
	[data-js_show_target-passed="premiumPlanTitleBox"] .premiumPlanTitleLandplotMap {
	/*	animation: 3000ms ease 650ms both ANIME-premiumPlanTitleLandplotMap;*/
		animation: 2300ms ease-in 0ms both ANIME-premiumPlanTitleLandplotMap;
	}
}
@keyframes ANIME-premiumPlanHeaderWrap_beforeBgColor {
	0% {	opacity: 1;}
	100% {	opacity: 0;}
}
@keyframes ANIME-premiumPlanTitleBox_childItem {
	0% {	opacity: 0; translate: 0 30px;}
	100% {	opacity: 1; translate: 0 0;}
}
@keyframes ANIME-premiumPlanTitleLandplotMap {
	0% {	opacity: 0;}
	100% {	opacity: 1;}
}
@media (prefers-reduced-motion: reduce) {
	[data-js_show_target="premiumPlanTitleBox"],
	[data-js_show_target="premiumPlanTitleBox"] .ttlBox,
	[data-js_show_target="premiumPlanTitleBox"] .txtBox,
	[data-js_show_target="premiumPlanTitleBox"] .premiumPlanTitleLandplotMap {
		opacity: 1 !important;
		animation: none !important;
	}
}



/* floorPlanSection | roomplan.cssの設定に調整を加える
------------------------------------------------------------------------ */
	/* specWrap
	---------------------------------------------------- */
	.floorPlanSection .specWrapDeco {
		color: #fff;
		background: linear-gradient(to right, #272727 26.5%, #555 50%, #272727 73.5%);
		border: 0 solid transparent;
		border-width: 8px 0;
		border-image: linear-gradient(to right, #99794a, #faebc7, #99794a);
		border-image-slice: 1;
	}
	/* captionWrap
	---------------------------------------------------- */
	.floorPlanSection .captionWrap {
		padding-top: 50px;
	}
@media screen and (max-width: 736px) {
	/* specWrap
	---------------------------------------------------- */
	.floorPlanSection .specWrapDeco {
		border-width: 6px 0;
	}
}


/* premiumFeatureWrap | プレミアムプラン用の特徴紹介コンテンツ
---------------------------------------------------- */
	.premiumFeatureWrap {
	}

	/* =================
		PCTBSP共通
	================= */
	.premiumLotPlanBox {
	}
	.premiumLotPlanFeatureBox {
		margin-top: var(--site-marpad-XL);
		margin-left: auto;
		margin-right: auto;
	}
	.premiumLotPlanFeatureBox img {
		width: 100%;
		max-width: none;
	}
	.premiumLotPlanFeatureBox .featurePlanPic {}
	.premiumLotPlanFeatureBox .featurePlanPic .planPicItem {}
	.premiumLotPlanFeatureBox .featureList {}
	.premiumLotPlanFeatureBox .featureItem {
		line-height: 1.4167;
		font-size: clamp(1.1rem, (12 / 1500 * 100vw), 1.2rem);
		background: #fff;
		padding: clamp(12px, (25 / 330 * 100%), 25px);
	}
	.premiumLotPlanFeatureBox .featureItem .ttlBox {
		display: grid;
		grid-template-columns: 1.4em 1fr;
		align-items: baseline;
		gap: 0 .3em;
		font-size: clamp(1.5rem, (18 / 1400 * 100vw), 1.8rem);
		letter-spacing: normal;
	}
	.premiumLotPlanFeatureBox .featureItem .ttlBox .num {
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		line-height: .8;
		color: rgba(var(--site-themeColor-accent_1_text), 1);
		font-family: var(--site-font_family-en_2);
		font-size: 1.222222em;
		text-align: center;
		background: rgba(var(--site-themeColor-accent_1), 1);
	}
	.premiumLotPlanFeatureBox .featureItem .ttlBox .ttl {
		color: rgba(var(--site-themeColor-accent_1), 1);
	}
	.premiumLotPlanFeatureBox .featureItem .txtBox {
		margin-top: 1em;
	}
	.premiumLotPlanFeatureBox .featureItem .picBox {
		position: relative;
		margin-top: 1.15em;
	}
	.premiumLotPlanFeatureBox .featureItem .picBox .pic {
	}
	.premiumLotPlanFeatureBox .featureItem .picBox .imgcapkeep {
		font-size: 1rem;
		letter-spacing: normal;
	}
	.premiumLotPlanBtn {
		margin-top: 50px;
	}

/* =================
	PCレイアウト
================= */
@media screen and (min-width: 900.02px) {
	.premiumLotPlanBox {
		width: 92%;
		max-width: 1260px;
	}
	.premiumLotPlanFeatureBox {
		--premiumLotPlanBox-width_value:						1260; /* 親要素の幅 */
		--premiumLotPlanFeatureBox-width_value:					1260; /* 自分の幅 */
		--premiumLotPlanFeatureBox-featurePlanPic-width_value:	600; /* 間取図エリアの幅 */
		--_z_cellWidth: calc(var(--premiumLotPlanFeatureBox-featurePlanPic-width_value) / var(--premiumLotPlanFeatureBox-width_value) * 100%); /* 間取図エリアのセル幅(%) = 600/1260*100% = 47.619% */
		
		width: calc(var(--premiumLotPlanFeatureBox-width_value) / var(--premiumLotPlanBox-width_value) * 100%);	/* =1260/1400*100% = 90% */
		max-width: calc(var(--premiumLotPlanFeatureBox-width_value) * 1px);								/* 1260px */

		/* 子要素を重ねる設定（featurePlanPicとfeatureListを同じセルに重ねる） */
		display: grid;
		align-items: center;
	}
	.premiumLotPlanFeatureBox .featurePlanPic,
	.premiumLotPlanFeatureBox .featureList { /* 子要素を重ねる設定（featurePlanPicとfeatureListを同じセルに重ねる） */
		grid-column: 1;
		grid-row: 1;
	}
	.premiumLotPlanFeatureBox .featurePlanPic {
		display: grid;
	}
	.premiumLotPlanFeatureBox .featurePlanPic .planPicItem {
		width: var(--_z_cellWidth);
		margin-left: auto;
		margin-right: auto;
	}
	.premiumLotPlanFeatureBox .featureList {
		display: grid;
		gap: 10px var(--_z_cellWidth); /* rowは最低限10px確保しておく。columnは間取図幅分スキマを空ける。 */
		pointer-events: none; /* 間取図の為に一旦クリックを素通りさせる */
		
		/* ▼更新時に調整する */
		grid-template:
			"item1 item2" auto
			"item3 item4" auto /
			 1fr   1fr;
		height: 100%;
		align-items: start;		/* start = 上揃え */
		align-content: stretch;	/* stretch = 均等配置 */
		padding-top: 20px;		/* 微調整 */
	}
	.premiumLotPlanFeatureBox .featureItem_1 { grid-area: item1; }
	.premiumLotPlanFeatureBox .featureItem_2 { grid-area: item2; }
	.premiumLotPlanFeatureBox .featureItem_3 { grid-area: item3; }
	.premiumLotPlanFeatureBox .featureItem_4 { grid-area: item4; }
				/* ////////////////////// 数を増やす例 //////////////////////
				.premiumLotPlanFeatureBox .featureList {
					grid-template:
						"item1 item2" auto
						"item3 item4" auto
						".     item5" auto /
						 1fr   1fr;
				}
				.premiumLotPlanFeatureBox .featureItem_5 { grid-area: item5; }
				////////////////////////////////////////////////////////// */
	
	.premiumLotPlanFeatureBox .featureItem {
		pointer-events: auto; /* クリック復活 */
	}
}

/* =================
	TBレイアウト
================= */
@media screen and (max-width: 900px) {
	.premiumLotPlanFeatureBox {
		display: block;
	}
	.premiumLotPlanFeatureBox .featurePlanPic {
		max-width: 550px;
		margin-left: auto;
		margin-right: auto;
	}
	.premiumLotPlanFeatureBox .featureList {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
		align-items: start;		/* start|stretch どちらも可 */
		gap: 30px 30px;
		width: 100%;
	/*	max-width: calc((330px * 2) + 30px);*/
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
	}
	.premiumLotPlanFeatureBox .featureItem {
		font-size: 1.25rem;
	}
	.premiumLotPlanFeatureBox .featureItem .ttlBox {
		font-size: 1.5em;
	}
}

/* =================
	SPレイアウト
================= */
@media screen and (max-width: 736px) {
	.premiumLotPlanFeatureBox {
	}
	.premiumLotPlanFeatureBox .featureList {
		display: block; /* グリッド解除 */
		width: 89%;
	}
	.premiumLotPlanFeatureBox .featureItem {
		font-size: clamp(1.115rem, (11.15 / 375 * 100vw), 1.25rem);
		letter-spacing: .12em;
	}
	.premiumLotPlanFeatureBox .featureItem + .featureItem {
		margin-top: 30px;
	}
	.premiumLotPlanFeatureBox .featureItem .ttlBox {
		font-size: 1.358744em;
	}
	.premiumLotPlanBtn {
		margin-top: 40px;
	}
}





/* premiumEquipmentSection
------------------------------------------------------------------------ */
	.premiumEquipmentSection {
	}
	.premiumEquipmentHeader {
		line-height: 1.05;
		color: rgba(var(--site-themeColor-accent_1), 1);
		font-family: var(--site-font_family-en_1);
		font-size: clamp(4rem, (50 / 736 * 100vw), 5rem);
		text-align: center;
		letter-spacing: .1em;
		border-bottom: 6px solid transparent;
		border-image: linear-gradient(to right, #99794a, #faebc7, #99794a);
		border-image-slice: 1;
		translate: 0 1px; /* ズレ対策 */
	}
	.premiumEquipmentHeader .heading {
		translate: 0 .24em;
	}
	.premiumEquipmentHeader .heading br.SP {
		display: none;
	}
	.premiumEquipmentBody {
		background: rgba(0, 0, 0, .05);
		padding-top: clamp(70px, (70 / 375 * 100vw), 120px);
		padding-bottom: clamp(80px, (80 / 375 * 100vw), 140px);
	}
@media screen and (max-width: 900px) {
	.premiumEquipmentHeader .heading br.SP {
		display: inline;
	}
}

/* eqListWrap
---------------------------------------------------- */
	.premiumEquipmentBody .eqListWrap {
		display: grid;
	}
	.premiumEquipmentBody .eqList {
		overflow-wrap: break-word; /* 長い英語対策 */
	}
	.premiumEquipmentBody .eqList.generalColBoxFlex {
		--default-generalColBoxFlex-rowGap:			clamp(30px, (60 / 1400 * 100vw), 60px);
		--default-generalColBoxFlex-columnGap:		clamp(30px, (60 / 1400 * 100vw), 60px);
		/*--default-generalColBoxFlex-columnCount:	3;*/
	}
	.premiumEquipmentBody .eqListItem {
	}
	.premiumEquipmentBody .eqListItem .pic {
		position: relative;
	}
	.premiumEquipmentBody .eqListItem .pic img {
		width: 100%;
		max-width: none;
	}
	.premiumEquipmentBody .eqListItem .ttl {
		line-height: 1.4;
		color: rgba(var(--site-themeColor-accent_1), 1);
		font-size: clamp(1.7rem, (20 / 1400 * 100vw), 2rem);
		letter-spacing: .1em;
		padding: .8em 0 .6em;
	}
	.premiumEquipmentBody .eqListItem .txt {
		overflow-wrap: break-word; /* 長い英語対策 */
		font-size: clamp(1.3rem, (14 / 1200 * 100vw), 1.4rem);
		/*text-align: justify;*/
		letter-spacing: .18em;
	}
@media screen and (max-width: 900px) {
	.premiumEquipmentBody .eqList.generalColBoxFlex {
		--default-generalColBoxFlex-columnCount:	2;
	}
	.premiumEquipmentBody .eqListItem .ttl {
		font-size: clamp(1.7rem, (20 / 900 * 100vw), 1.8rem);
	}
	.premiumEquipmentBody .eqListItem .txt {
		font-size: clamp(1.3rem, (14 / 900 * 100vw), 1.4rem);
	}
}
@media screen and (max-width: 600px) {
	.premiumEquipmentBody .eqList.generalColBoxFlex {
		--default-generalColBoxFlex-columnCount:	1;
	}
	.premiumEquipmentBody .eqListItem .ttl {
		font-size: 1.6rem;
	}
	.premiumEquipmentBody .eqListItem .txt {
		line-height: 1.7;
		font-size: 1.3rem;
	}
}



/* aerotechWrap
---------------------------------------------------- */
	.premiumEquipmentBody .aerotechWrap {
		background: #fff;
		padding-top: clamp(40px, (40 / 375 * 100vw), 100px);
		padding-bottom: clamp(40px, (40 / 375 * 100vw), 100px);
	}
	.premiumEquipmentBody .aerotechBox {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 calc(60 / 1000 * 100%);
		align-items: center;
		width: 90%;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.premiumEquipmentBody .aerotechTxtBox {}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox {}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox .ttl {
		display: block;
		line-height: 1.35;
		font-size: clamp(1.55rem, (18 / 1200 * 100vw), 1.8rem);
		text-align: center;
		margin-bottom: 1.5em;
	}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox .logo {
		display: block;
		width: clamp(160px, (264 / 470 * 100%), 264px);
		margin-left: auto;
		margin-right: auto;
	}
	.premiumEquipmentBody .aerotechTxtBox .txt {
		font-size: clamp(1.3rem, (14 / 1200 * 100vw), 1.4rem);
		text-align: justify;
		margin-top: 2.5em;
	}
	.premiumEquipmentBody .aerotechPicBox {}
	.premiumEquipmentBody .aerotechPicBox .pic {}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox .logo img,
	.premiumEquipmentBody .aerotechPicBox .pic img {
		width: 100%;
	}
@media screen and (max-width: 900px) {
	.premiumEquipmentBody .aerotechBox {
		grid-template-columns: 1fr;
		gap: clamp(30px, (30 / 375 * 100%), 50px) 0;
		width: 88%;
		max-width: 550px;
	}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox .ttl {
		display: block;
		line-height: 1.35;
		font-size: clamp(1.5rem, (15 / 375 * 100vw), 1.9rem);
		text-align: center;
		margin-bottom: 1.5em;
	}
	.premiumEquipmentBody .aerotechTxtBox .ttlBox .logo {
		width: clamp(180px, (180 / 375 * 100%), 264px);
	}
	.premiumEquipmentBody .aerotechTxtBox .txt {
		font-size: clamp(1.3rem, (13 / 375 * 100vw), 1.4rem);
		margin-top: 2em;
	}
}




/* planDetailNavWrap
------------------------------------------------------------------------ */
	.planDetailNavWrap {
		background-color: #fff;
	}