@charset "utf-8";

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

/* =======================================================================================
	PAGE 
======================================================================================= */
	.colWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.colWrap .picBox{
		position: relative;
	}	
	.colWrap .txtBox .ttl {
		display: block;
		padding-top:1.2em;
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1050;
		--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);
		line-height: 1.6;
	}
	.colWrap .txtBox .txt {
		padding-top:1em;
	}
	

	
/* ------------------------------------------------------------------------
detailsSection
------------------------------------------------------------------------ */
.facadeSection .js_swipeMe_active .js_swipeMeInnerBoxOverlay,
.facadeSection .js_swipeMe_active .js_swipeMeInnerBox img {width: 230%;}



/* ------------------------------------------------------------------------
detailsSection
------------------------------------------------------------------------ */
	.detailsSection{
		margin-bottom:  6em ;
	}
	.detailsSection .colWrap{
		margin: 6em auto 3em;
	}
	.detailsSection .colWrap h4.ptHeading{
		width: 100%;
		text-align: center;
		margin-bottom: 3em;
	}
	.detailsSection .colWrap .txtBox{
		width: 48%;
		border-bottom: 2px solid rgba(var(--site-themeColor-accent_2), 1);
		padding-bottom: 1.5em;
	}
	.detailsSection .colWrap .txtBox .num {
		position: relative;
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1050;
		--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-en_1);
		/*letter-spacing: -0.05em;*/
		line-height: 1.6;
		display: flex;
		align-items: center;
		color: rgba(var(--site-themeColor-accent_2), 1);
	}
	.detailsSection .colWrap .txtBox .num::after {
		margin-left: 1.5rem;
		content: "";
		width: 100%;		
		height: 1px;
		background-color: rgba(var(--site-themeColor-accent_2), 1);
	}
	.detailsSection .colWrap .txtBox .ttl{
		padding-top:1em;
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 22;
		letter-spacing: 0.1em;
		text-align: center;
		color: rgba(var(--site-themeColor-accent_2), 1);
	}

	.detailsSection .colWrap .txtBox .txt{
		margin-top: 1em;
		display: block;
	}	
	.detailsSection .colWrap .txtBox .txt .innner{
		display: flex;
		justify-content: center;
		font-size: 1.25em;
		line-height: 1.25;
		letter-spacing: 0.08em;
	}
	.detailsSection .colWrap .txtBox .txt .innner::before { 
		content: '・';
		display: block;
		margin-right: 0.5em;
	}
	.detailsSection .colWrap .txtBox .txt .innner:nth-child(2){
		margin-top: 0.5em;
	}
	.detailsSection .colWrap .txtBox .txt .innner small{
		font-size:0.774em;
	}

@media screen and (min-width: 480.02px) and (max-width: 1050px) { /*{TBs}*/
/*	.detailsSection .colWrap .txtBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	.detailsSection .colWrap .txtBox:not(:first-of-type) {
		padding-top:clamp(40px, (40 / 1200 * 100vw), 60px) ;
	}

	.detailsSection .colWrap .txtBox {
		width: 50%;
	}*/
}
@media screen and (max-width: 1050px) { 
	.detailsSection .colWrap .txtBox{
		width: 100%;
	}
	.detailsSection .colWrap .txtBox:last-child {
		margin-top:clamp(40px, (40 / 1050 * 100vw), 60px);
	}
}
@media screen and (max-width: 736px) {

}
@media screen and (max-width: 480px) { /*{SP}*/
	.detailsSection .colWrap {
		margin: 3em auto 0 ;
		max-width:350px;
	}	
	.detailsSection .colWrap .txtBox:last-child {
		margin-top:clamp(20px, (20 / 480 * 100vw), 30px);
	}
	.detailsSection .colWrap .txtBox .txt .innner{
		font-size: 1.15em;

	}
}		


/* ------------------------------------------------------------------------
livingdiningSection
------------------------------------------------------------------------ */
	.livingdiningSection {
		position: relative;
		z-index: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.1);
		margin-left: auto;
		margin-right: auto;
		padding: 0 0 var(--site-marpad-L);
		margin-bottom: var(--site-marpad-XXL);
	}
	.livingdiningWrap {
		/*display: flex;*/
		width: 90%;
		max-width: 1800px;
		/*justify-content: space-between;
		align-items: center;
		align-content: center;*/
		color: #181818;
		margin: 0 auto;
	}

	/* pic
	---------------------------------------------------- */
	.livingdiningWrap .picWrap {
		/*width: 53.334%;
		max-width: 1047px;*/
	}
	.livingdiningWrap .picBox {
		position: relative;
		transform: translateY(calc(var(--site-marpad-M) * -1));
	}
	.livingdiningWrap .picWrap .en {
		position: absolute;
		top: 0;
		left: -1em;
		z-index: 1;
		writing-mode: vertical-rl;

		--M-fluidFontSize-max-fontsize: 45;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw;
		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);
		letter-spacing: 0.2em;
		line-height: 1;
		color: rgba(var(--site-themeColor-accent_2), 1);
	}

	/* pTtl
	---------------------------------------------------- */
	.livingdiningWrap .pTtlBox {
		/*order: -1;
		width: 35%;
		padding-left: 5%;*/
		transform: translateY(calc(var(--site-marpad-XXS) * -1));
	}
	/*.livingdiningWrap .pTtlBox .hTxt{
		text-align: left;
	}
	.livingdiningWrap .pTtlBox .leadTxtBox {
		text-align: left;
	}*/
@media screen and (max-width: 1200px) {
	.livingdiningWrap .pTtlBox {
		/*padding-left: 3%;*/
	}
}
@media screen and (max-width: 1000px) {
	.livingdiningSection{
		padding-bottom: var(--site-marpad-XXL);
	}
	.livingdiningWrap{
		display: block;
	}
/*	.livingdiningWrap .pTtlBox,
	.livingdiningWrap .picWrap {
		width: 86%;
		max-width: 740px;
		margin-right: 20px;
	}*/
/*	.livingdiningWrap .picWrap {
		margin-left: auto;
	}*/
	.livingdiningWrap .picBox {
		/*transform: translateY(0);*/
	}
/*	.livingdiningWrap .picWrap + .pTtlBox {
		padding:  var(--site-marpad-XS) 0 var(--site-marpad-XS);
	}*/
/*	.livingdiningWrap .pTtlBox {
		margin-left: auto;
		padding-left: 0;
	}*/
}
@media screen and (max-width: 736px) {
	.livingdiningWrap .picWrap .en {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
}


/*shoenelabelWrap
-------------------------------------------*/
.shoenelabelWrap .label{
	max-width: 500px;
	margin: 0 auto;
}



/* ------------------------------------------------------------------------
digitallibrarySection
------------------------------------------------------------------------ */
/*digitallibraryWrap
--------------------------------------------------*/
	.digitallibraryWrap {
		position: relative;
	}
	.digitallibraryWrap .txtBox {
		position: absolute;
		top: 50%;
		z-index: 2;
		color: rgba(var(--site-variationColor-whitish), 1);
		color: #fff;
		/*inset: 50% 0 auto auto;*/
	}
	.digitallibraryWrap .txtBox .enHeading_S{
		color: rgba(var(--site-variationColor-whitish), 1);
		margin-bottom: 0.5em;
	}
	.digitallibraryWrap .txtBox .enHeading_S::after {
		display: none;
	}
	.digitallibraryWrap .txtBox .txt{
		line-height: 1.4;
	}

	.digitallibraryWrap .txtBox .btn_guide a {
		background: none;
		color: #b3efd2;
	  --M-fluidFontSize-max-fontsize: 14;
	  --M-fluidFontSize-min-fontsize: 12;
		text-align: left;
		padding: 0.5em 0;
		margin: 1.5em 0 0 0;
		letter-spacing: .05em;
	}
	.digitallibraryWrap .txtBox .btn_guide a .label {
		text-decoration: underline;
		text-underline-offset: 5px;
	}
	.digitallibraryWrap .txtBox .btn_guide a .en {
		display: inline;
		font-size: 1.4em;
		letter-spacing: .05em;
	}
	.digitallibraryWrap .txtBox .btn_guide a .ico{
		right: 0;
		background-image: url("../images/share/ico_arr_green.svg");
	}
	@media (hover: hover) and (pointer: fine) {
		.digitallibraryWrap .txtBox .btn_guide a:hover .label {
			text-decoration:none;
		}
		.digitallibraryWrap .txtBox .btn_guide a:hover {
			box-shadow: none;
		}
	}
@media screen and (min-width: 736.02px) {
	.digitallibraryWrap .txtBox {
		right: 0;
		text-align: left;
		border-left: 1px solid rgba(255,255,255,0.52);
		padding: 2em 4em;
		width: calc(900 / 1920 * 100vw);
		transform: translateY(-50%);
	}
	.digitallibraryWrap .txtBox .enHeading_S{
		text-align: left;
	}
	.digitallibraryWrap .txtBox .btn_req a {
		margin: 1.5em 0 0 0;
	}
	
}
@media screen and (max-width: 1600px) {
	.digitallibraryWrap .txtBox {
		width: 92.8125%;
		max-width: 700px;
	  }
}
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.digitallibraryWrap .picBox img {
		display: block;
		width: 100%;
		object-fit: cover;
		aspect-ratio: 800 / 400;
	}

}
@media screen and (max-width: 1000px) { 
	.digitallibraryWrap .txtBox {
		max-width: 500px;
	  }

	.digitallibraryWrap .txtBox .btn_req a {
		max-width: 300px;
	}
	.digitallibraryWrap .txtBox .btn_guide a .en {
		display:block;
	}
	.digitallibraryWrap .txtBox .txt br{
		display: none;
	}
}

@media screen and (max-width: 736px) { /*{SP}*/
	.digitallibraryWrap .txtBox {
		padding: 2em 0;
		width: 80%;
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: none;
	}
	.digitallibraryWrap .txtBox .txt {
		 text-align: center;
	}
	.digitallibraryWrap .txtBox .btn_req a {
		margin-top: 3em;
	}
	.digitallibraryWrap .txtBox .btn_guide a  {
		margin-top: 1.5em;
		max-width: 350px;
		line-height: 1.8;
		margin-left: auto;
		margin-right: auto;
	}
	.digitallibraryWrap .picBox img {
		aspect-ratio:auto;
		min-height: clamp(440px, (440 / 480 * 100vw), 600px);
	}
}


/* ------------------------------------------------------------------------
planSection
------------------------------------------------------------------------ */
	.planSection .categoryTtlWrap .picBox img {
	  object-position: 30% 0;
	}



/* ------------------------------------------------------------------------
equipmentSection
------------------------------------------------------------------------ */
	.equipmentSection .categoryTtlWrap .picBox img {
	  object-position: 20% 0;
	}
	.equipmentSection .colWrap .item{
		width: 31.5%;
	}


@media screen and (min-width: 736.02px) and (max-width: 1050px) { /*{TBs}*/
	.equipmentSection .colWrap .item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
	}
	.equipmentSection .colWrap .item:not(:first-of-type) {
		padding-top:clamp(40px, (40 / 1200 * 100vw), 60px) ;
	}
	.equipmentSection .colWrap .picBox,
	.equipmentSection  .colWrap .txtBox {
		width: 48%;
	}
	.equipmentSection  .colWrap .txtBox .ttl {
	  padding-top: 0em;
	}
}
@media screen and (max-width: 736px) {
	.equipmentSection .colWrap{
		width: 85.625%;
	}
	.equipmentSection .colWrap {
		max-width:504px;
		margin-left:auto;
		margin-right:auto;
	}	
	.equipmentSection .colWrap .item{
		width: 100%;
	}
	.equipmentSection .colWrap .item:nth-child(n+2) {
		margin-top:clamp(40px, (40 / 1200 * 100vw), 60px);
	}
}	















































/* -----------------------------------------------------------------------------
	プラン詳細の共通スタイル
----------------------------------------------------------------------------- */

/* floorPlanSection
---------------------------------------------------------------------------
- 各ブレイクポイントは適宜サイズ変更するように
---------------------------------------------------------------------------
- floorPlanSection
	- roomplanUnit
		- roomplanSpec		(グリッドレイアウト。{┣} … 1列目一行_2列目二行・垂直方向結合有)
			- specUnit-*	(name | layout | detailInfo | note)
		- roomplanMerit
		- roomplanPic
------------------------------------------------------------------------ */
/* /////////////////////////////////////////// (外側) */

	.floorPlanSection {
		margin-top: var(--site-marpad-M);
	}
	.floorPlanSection .roomplanUnit {
		width: 100%;
		line-height: 1.9;
		color: #000;
		font-family: inherit;
		font-size: 1.4rem;
		letter-spacing: normal;
		background: #fff;
		margin: 0 auto;
		padding: 80px 30px; /* 0px 2.5%; */
	}
	.floorPlanSection .floorPlanCaptionFooter {
		width: 100%;
		margin: 0 auto;
		padding: 20px 0;
	}

/* /////////////////////////////////////////// (内容) */

	/* roomplanSpec | グリッド設定{┣}
	--------------------------------- */
	.floorPlanSection .roomplanSpec {
		display:	-ms-grid;
		display:		grid;
		grid-template-areas:
			"A B"
			"A C";
	/*	-ms-grid-rows:			auto;
		grid-template-rows:		auto;*/
		-ms-grid-columns:		240px 1fr;
		grid-template-columns:	240px 1fr; /* A = 240px */
	}
	.floorPlanSection .roomplanSpec .specUnit-name { /* A (左) */
		-ms-grid-row:		1;
		-ms-grid-column:	1;
		-ms-grid-row-span:	2; /* 垂直方向結合2マス分 */
		grid-area: A;
	}
	.floorPlanSection .roomplanSpec .specUnit-layout { /* B (右上) */
		-ms-grid-row:		1;
		-ms-grid-column:	2;
		grid-area: B;
	}
	.floorPlanSection .roomplanSpec .specUnit-detailInfo { /* C (右下) */
		-ms-grid-row:		2;
		-ms-grid-column:	2;
		grid-area: C;
	}
	
	/* roomplanSpec
	--------------------------------- */
	.floorPlanSection .roomplanSpec {}
	.floorPlanSection [class^="specUnit-"] {}
	
	.floorPlanSection .roomplanSpec small {
		line-height: inherit;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		letter-spacing: normal;
	}
	
	.floorPlanSection .roomplanSpec .hr { display: none; } /* 不要な場合は display:none; */
	.floorPlanSection .roomplanSpec hr {
		display: block;
		width: 100%;
		height: 0;
		color: transparent;
		background: none;
		margin: 0;
		padding: 0;
		border: none;
	}
	
	/* ********** name */
	.floorPlanSection .specUnit-name {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		text-align: center;
		padding: 0.3em 0;
	}
	.floorPlanSection .specUnit-name .spec-type {
		position: relative;
		line-height: 1;
		font-family: 'Italianno', serif;
		font-size: 5.214em; /* = 7.3rem */
		letter-spacing: 0.02em;
		padding: 0 30px 0 40px;
	}
	.floorPlanSection .specUnit-name .spec-type::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: -30px;
		width: 60px;
		height: 2px;
		background: #696969;
		margin: auto;
	}
	.floorPlanSection .specUnit-name .spec-type .st {
		letter-spacing: 0.03em;
	}
	.floorPlanSection .specUnit-name .spec-type .num {
		line-height: 0.848;
		font-size: 1.178em; /* = 8.6rem */
		letter-spacing: normal;
		margin-left: 0.03em;
	}
	
	/* ********** layout */
	.floorPlanSection .specUnit-layout {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		padding: 0.3em 0;
	}
	.floorPlanSection .specUnit-layout .spec-ldk {
		width: 100%;
		line-height: 1.5;
		font-size: 1.714em;
		letter-spacing: 0.03em;
	}
	.floorPlanSection .specUnit-layout .ldkUnit {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.floorPlanSection .specUnit-layout .ldkUnit > b {
		/*display: block;
		line-height: 1.302;
		font-size: 1.302em;*/
		margin-right: 0.1em;
	}
	.floorPlanSection .specUnit-layout .ldkUnit .ldkNum {
		line-height: 0.8;
		font-size: 1.4em;
	}
	.floorPlanSection .specUnit-layout .element {
		display: inline-block;
	}
	.floorPlanSection .specUnit-layout .element b {
		margin: 0 0.1em;
	}
	.floorPlanSection .specUnit-layout .element .ja {
		font-size: 0.98em;
		letter-spacing: 0.04em;
	}
	.floorPlanSection .specUnit-layout .element small {
		display: inline-block;
		font-family: inherit;
		font-size: 0.75em;
	}
	/* ********** hr_1 */
	/*.floorPlanSection .specUnit-layout + .hr {
		display: block;
		margin: 20px 0;
		border-top: 1px solid #836a5a;
	}*/
	
	/* ********** detailInfo */
	.floorPlanSection .specUnit-detailInfo {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		padding-top: 0.2em; /* 微調整 */
	}
	.floorPlanSection .specUnit-detailInfo .detailList {
		width: 100%;
	}
	.floorPlanSection .specUnit-detailInfo .row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 0.5em 0 0.2em 0;
	}
	/* -- head -- */
	.floorPlanSection .specUnit-detailInfo .row .head {}
	.floorPlanSection .specUnit-detailInfo .row .head::after {
		content: "／";
		padding: 0 0 0 .2em;
	}
	.floorPlanSection .specUnit-detailInfo .row .head .ttl {}
	/* -- data -- */
	.floorPlanSection .specUnit-detailInfo .row .data {}
	.floorPlanSection .specUnit-detailInfo .row .area {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.floorPlanSection .specUnit-detailInfo .row .area > *,
	.floorPlanSection .specUnit-detailInfo .row .area > * .value {
		display: inline-block;
	}
	.floorPlanSection .specUnit-detailInfo .row .area .meter {
		margin-right: 0.3em;
	}
	.floorPlanSection .specUnit-detailInfo .row .area .meter .value {
		line-height: 0.675;
		font-size: 1.857em;
		margin-right: 0.07em;
		transform: translateY(-0.5%)
	}
	.floorPlanSection .specUnit-detailInfo .row .area_small {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		line-height: 1.5;
	}
	/* area_floor */
	.floorPlanSection .specUnit-detailInfo .row .area_floor {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 0.6em;
	}
	.floorPlanSection .specUnit-detailInfo .row .area_floor > * {
		display: inline-block;
		margin-right: 1.5em;
	}
	.floorPlanSection .specUnit-detailInfo .row .area_floor > * .value {
		display: inline-block;
	}
			/* -- Individual -- */
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="lot"] .head {
				width: 5.65em;
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="building"] .head {
				width: 7.65em;
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="service"] .head {
				width: 9.65em;
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="lot"] .data {
				width: calc(99.9% - 5.65em);
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="building"] .data {
				width: calc(99.9% - 7.65em);
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="service"] .data {
				width: calc(99.9% - 9.65em);
			}
			.floorPlanSection .specUnit-detailInfo .row[data-rowtype="building"] .data[data-datatype="floor"] {
				width: 100%;
			}
	/* ********** hr_2 */
	/*.floorPlanSection .specUnit-note + .hr {
		display: block;
	}*/
	
	
	/* roomplanMerit
	--------------------------------- */
	.floorPlanSection .roomplanMerit {
		color: #000;
		background: rgba(141,113,54, .22);
		margin-top: 30px;
		padding: 30px;
	}
	.floorPlanSection .roomplanMerit li {
		display: flex;
		justify-content: flex-start;
		line-height: 1.6;
		width: 92%;
		margin: 0 auto;
	}
	.floorPlanSection .roomplanMerit li:nth-of-type(n+2) {
		margin-top: 0.65em;
	}
	.floorPlanSection .roomplanMerit li::before {
		content: "◉";
		margin-right: 0.3em;
	}
	
	
	/* roomplanPic
	--------------------------------- */
	.floorPlanSection .roomplanPic {
		margin-top: var(--site-marpad-L);
		text-align: center;
	}

@media screen and (max-width: 1050px) { /*{belowTBs}*/
/* /////////////////////////////////////////// (外側) */
	
	.floorPlanSection .roomplanUnit {
		font-size: 1.3rem;
		padding: 50px 3% 60px;
	}

/* /////////////////////////////////////////// (内容) */

	/* roomplanSpec
	--------------------------------- */
	.floorPlanSection .roomplanSpec {
		display: block; /* グリッド解除 */
	}
	/* ********** name */
	.floorPlanSection .specUnit-name {
		display: block; /* フレックスボックス解除 */
		margin-bottom: 20px;
		padding: 0 0 20px;
		border-bottom: 2px solid #696969;
	}
	.floorPlanSection .specUnit-name .spec-type {
		font-size: 4.5em;
		padding: 0;
	}
	.floorPlanSection .specUnit-name .spec-type::before {
		display: none;
	}
	/* ********** layout */
	.floorPlanSection .specUnit-layout {
		padding-left:	1em;
		padding-right:	1em;
	}
	/* ********** detailInfo */
	.floorPlanSection .specUnit-detailInfo {
		padding-top: 0.35em; /* 微調整 */
	}
	.floorPlanSection .specUnit-detailInfo .row {
		padding-top:	0.8em;
		padding-bottom:	0.35em;
		padding-left:	1em;
		padding-right:	1em;
		border-top: 1px solid #e6e6e6;
	}
	/* roomplanMerit
	--------------------------------- */
	/* roomplanPic
	--------------------------------- */
	.floorPlanSection .roomplanMerit {
		padding: 30px 0;
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
/* /////////////////////////////////////////// (外側) */
	
	.floorPlanSection .roomplanUnit {
		padding-top:	30px;
		padding-bottom:	45px;
	}

/* /////////////////////////////////////////// (内容) */

	/* roomplanSpec
	--------------------------------- */
	/* ********** name */
	.floorPlanSection .specUnit-name {
		margin-bottom:	15px;
		padding-bottom:	15px;
	}
	.floorPlanSection .specUnit-name .spec-type {
		font-size: 3.5em;
	}
	/* ********** layout */
	.floorPlanSection .specUnit-layout {
		padding-left:	0.1em;
		padding-right:	0.1em;
	}
	/* ********** detailInfo */
	.floorPlanSection .specUnit-detailInfo .row {
		display: block; /* フレックスボックス解除 */
		padding-left:	0.1em;
		padding-right:	0.1em;
	}
	.floorPlanSection .specUnit-detailInfo .row::after { /* clearfix | ex.☆親子関係で面揃えする(=float)ための準備(feeling.) */
		content: ""; display: block; clear: both;
	}
	/* -- head -- */
	.floorPlanSection .specUnit-detailInfo .row .head {
		display: block;
		float: left;			/* ☆親要素1 | float */
	}
	/* -- data -- */
	.floorPlanSection .specUnit-detailInfo .row .data {}
	.floorPlanSection .specUnit-detailInfo .row .head + .data {
		display: inline;		/* ☆親要素2 | 1番目の子要素をfloatするため自身はインラインにする */
	}
	.floorPlanSection .specUnit-detailInfo .row .area {
		display: block;
		float: left;			/* ☆親要素2の子要素 | float */
	}
	.floorPlanSection .specUnit-detailInfo .row .area_small {
		display: block; /* フレックスボックス解除(解除しなくてもよい) */
		clear: both;
		font-size: 0.92em;
		opacity: 0.8; /* 気持ち軽くする(不要なら削除) */
		padding-top: 0.2em;
	}
	/* area_floor */
	.floorPlanSection .specUnit-detailInfo .row .area_floor {
		clear: both;
	}
	.floorPlanSection .specUnit-detailInfo .row .area_floor > * {
		margin-right: 1.2em;
	}
	/* roomplanMerit
	--------------------------------- */
	/* roomplanPic
	--------------------------------- */
}
@media screen and (max-width: 480px) { /*{SPs}*/
/* /////////////////////////////////////////// (外側) */

	.floorPlanSection .roomplanUnit {
		font-size: 1.2rem;
	}
}




/* ----------------------------------------------------------------------------------
	プランリスト
---------------------------------------------------------------------------------- */

/* planDetailNavWrap
------------------------------------------------------------------------ */
	.planDetailNavWrap {
		margin: 0 auto ;
		padding: 42px 0 50px;
	}
	.planDetailNavWrap .contbox .enHeading_S {
	  --M-fluidFontSize-max-fontsize: 24;
	  --M-fluidFontSize-min-fontsize: 20;
	}
	.planDetailNavWrap ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.planDetailNavWrap li {
		flex: 0 0 32.333%;
		display: block;
		margin: 5px 0.5%;
	}
	.planDetailNavWrap li a {
		display: flex;
		position: relative;
		width: 100%;
		max-width: none;
		line-height: 1.35;
		font-size: clamp(1.3rem, 1vw, 1.5rem);
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		background: rgba(255,255,255,1);
		margin: 0;
		padding: 12px 9px;
		opacity: 1;
		transition: color 0.15s ease-out, background 0.3s ease-out, border 0.15s ease-out;
	}
	.planDetailNavWrap li .nameBox,
	.planDetailNavWrap li .specBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 3px 0;
	}
	.planDetailNavWrap li .nameBox {
		flex: 0 0 5.35em;
		justify-content: center;
		text-align: center;
		margin-right:	0.6em;
		padding-right:	0.4em;
		border-right: 1px solid rgba(0,0,0,.6);
	}
	.planDetailNavWrap li .nameBox .st {
		margin-right: 0.115em;
	}
	.planDetailNavWrap li .nameBox .num {
		display: inline-block;
		line-height: 1.1;
		font-size: 1.15em;
	}
	.planDetailNavWrap li .specBox {
		flex: 1 1;
		text-align: left;
		padding-right:15px;
	}
	.planDetailNavWrap li .specBox .ldk {
		color: inherit;
		font: inherit;
	}
	.planDetailNavWrap li .specBox .sto {
		display: inline-block;
		font-size: 1.4rem;
	}
	.planDetailNavWrap li .specBox .sto small {
		display: inline-block;
		color: inherit;
		font: inherit;
		font-size: 0.8em;
		opacity: 1;
	}
	
	/* hover, focus, current */
	.planDetailNavWrap li.is-current a {
		color: #fff;
		background:rgba(var(--site-themeColor-accent_1), 1);
		box-shadow: none;
	}
	.planDetailNavWrap li.is-current .nameBox {
		border-right: 1px solid rgba(255,255,255,.6);
	}
	
	@media (hover: hover) and (pointer: fine) {
		.planDetailNavWrap li:not(.is-current) a:hover,
		.planDetailNavWrap li:not(.is-current) a:focus {
			background:rgba(var(--site-themeColor-accent_1), 1);
			color: #fff;
		}
		.planDetailNavWrap li:not(.is-current) a:hover .nameBox, 
		.planDetailNavWrap li:not(.is-current) a:focus .nameBox {
			border-right: 1px solid rgba(255,255,255,.6);
		}
	}
	.planDetailNavWrap li:not(.is-current) a[href]:focus-visible {}
	.planDetailNavWrap li:not(.is-current) a[href]:focus-visible::before {
		background:rgba(var(--site-themeColor-accent_1), 1);
	}

@media screen and (max-width: 1200px) { /*{belowTB}*/
	.planDetailNavWrap li {
		flex: 0 0 49%;
	}
}
@media screen and (max-width: 640px) {
	.planDetailNavWrap {
		padding: 30px 0;
	}
	.planDetailNavWrap ul {
		width: 94%;
	}
	.planDetailNavWrap li {
		flex: 0 0 100%;
		margin: 3px 0;
	}
}


/* returnPlanlistBtnWrap
------------------------------------------------------------------------ */
	.returnPlanlistBtnWrap {
		display:block;
	}
	.returnPlanlistBtn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.returnPlanlistBtn .txt {
		padding-right:0.5em;
		color:#fff;
	}
	/*circleIconBtnBox*/
	.planDetailNavWrap .circleIconBtnBox {
		width: 30px;
		height:30px;
		background: rgba(var(--site-themeColor-base_text-accent), 1);
	}
	.planDetailNavWrap .circleIconBtnBox::after {
		background: rgba(var(--site-themeColor-base_text-accent), 1);
	}
	.planDetailNavWrap .circleIconBtnBox:hover::after {
		opacity: 0;
	}