/* =======================================================================================
	COMMON
======================================================================================= */
	.siteWrap {
		background-color: #f7f2ea;
	}

	.btn button,
	button.toggleAreaCloseBtn {
		position: relative;
		display: block;
		width: 90%;
		max-width: 500px;
		background: linear-gradient(to bottom, #FFF 0%, #f7f2ea 100%);
		margin: 0 auto;
		padding: 5px 50px 5px 20px;
		border: 1px solid rgba(0, 0, 0, .08);
	}
	button.toggleAreaCloseBtn {
		margin-top: var(--site-marpad-L)
	}
	.btnToggle button::after,
	button.toggleAreaCloseBtn::after {
		content: "+";
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		display: block;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 27px;
		font-size: 24px;
	}
	@media (hover: hover) and (pointer: fine) {
		.btnToggle button:hover,
		button.toggleAreaCloseBtn:hover {
			cursor: pointer;
		}
	}


	.leadTxt {
		text-align: left;
		padding: 0;
	}

@media screen and (max-width: 900px) {
	.leadTxt {
		text-align: center;
	}
}

/* =======================================================================================
	PAGE
======================================================================================= */
	.pTtlCol .picBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: min(5vw, 30px);
	}
	.pTtlCol .picBox p:nth-of-type(2) {
		transform: translateY(-30%);
	}
	.pTtlCol .txtUnit {
		align-self: center;
	}
	.pTtlCol .txtBox {
		font-size: 1.2em;
	}
@media print, screen and (min-width: 1460.02px) {
	.pTtlCol {
		position: relative;
		margin-right: calc(-1 * ((83dvw - 1200px) / 2));
		padding-left: 40px;
	}
}
@media print, screen and (min-width: 900.02px) {
	.pTtlCol {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: min(5vw, 30px);
	}
	.pTtlCol .picBox {
		order: 3;
	}
}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 900px) {
	.pTtlCol .txtUnit {
		margin-top: var(--site-marpad-M);
	}
}

/* lNavWrap
------------------------------------------------------------------- */
	.lNavWrap {
		background: url("../images/share/bg_bottom@pc.png") bottom center no-repeat;
		background-size: cover;
		margin: var(--site-marpad-XXL) 0 var(--site-marpad-M);
	}
	.lNav {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}
	.lNav li {
		position: relative;
	}
	.lNav li:not(:first-child)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		display: block;
		width: 1px;
		height: 80%;
		background: rgba(0, 0, 0, .15);
	}
	.lNav li a {
		display: flex;
		align-items: center;
		text-align: center;
		font-size:	1.4em;
		margin: 5px 10px 5px;
		padding: 5px 10px 5px;
		transition: 0.3s background ease;
	}
	.lNav li a .label {
		flex-grow: 1;
	}
	.lNav li a::after {
		flex-shrink: 1;
		content: "";
		border: 5px solid transparent;
		border-top-color: #000;
		transition: 0.3s transform ease;
	}

	@media (hover: hover) and (pointer: fine) {
		.lNav li a[href]:hover {
			background: rgba(255, 255, 255, .3);
		}
		.lNav li a[href]:hover::after {
			transform: translateY(2px);
		}
	}
	.lNav li.is_current a[href] {
		background: #f7f2ea;
		margin-bottom:0;
		padding-bottom: 10px;
		border-radius: 8px 8px 0 0;
	}
	.lNav li.is_current a[href]::after {
		transform: translateY(2px);
	}
@media screen and (max-width: 1200px) {
	.lNav {
	}
	.lNav li a {
		font-size:	min(1.8vw,1.4em);
	}
}
@media screen and (max-width: 900px) {
	.lNavWrap {
		margin: var(--site-marpad-L) 0 var(--site-marpad-S);
	}
	.lNav {
		grid-template-columns: repeat(3, 1fr);
	}
	.lNav li:nth-child(3n+1)::before {
		display: none;
	}
	.lNav li a {
		font-size:	min(2.8vw,1.4em);
	}
	.lNav li.is_current a[href] {
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-radius: 0 0;
	}
}
@media screen and (max-width: 600px) {
	.lNavWrap {
		background-size: 190% auto;
	}
	.lNav {
		grid-template-columns: repeat(2, 1fr);
	}
	.lNav li:last-child {
		grid-column: 1 / 3;
	}
	.lNav li:nth-child(3n+1)::before {
		display: block;
	}
	.lNav li:nth-child(2n+1)::before {
		display: none;
	}
	.lNav li a {
		font-size:	min(3.8vw,1.4em);
	}
}



/* linkUnitWrap
------------------------------------------------------------------- */
	.linkUnitWrap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--site-marpad-S) var(--site-marpad-S);
	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(1) {	transition-delay: 100ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(2) {	transition-delay: 200ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(3) {	transition-delay: 300ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(4) {	transition-delay: 400ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(5) {	transition-delay: 500ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(6) {	transition-delay: 600ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(7) {	transition-delay: 700ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(8) {	transition-delay: 800ms;	}
	.linkUnit[data-js_show_target_suite_descendant]:nth-of-type(9) {	transition-delay: 900ms;	}

	.linkUnit a {
		position: relative;
		display: block;
		text-align: center;
		background: #FFF;
		padding: 30px 30px;
		border-top: 8px solid #aa895e;
		box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .1);
		transition: 0.3s transform ease, 0.3s box-shadow ease;
	}
	.linkUnit a::after {
		content: "+";
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		width: 30px;
		height: 30px;
		color: #FFF;
		font-size: 24px;
		line-height: 27px;
		text-align: center;
		background: #aa895e;
	}

	@media (hover: hover) and (pointer: fine) {
		.linkUnit a[href]:hover {
			transform: translateY(2px);
			box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .28); 
		}
	}

	.linkUnit .type {
		display: block;
		color: #aa895e;
		font-size: 1.2em;
	}
	.linkUnit .type i {
		display: inline-block;
		margin: 0 5px;
	}
	.linkUnit .type::after {
		content: "";
		display: block;
		width: 50px;
		height: 1px;
		background: #aa895e;
		margin: 0.5em auto 0.8em;
	}
	.linkUnit .areaLabel {
		font-size: 0.76em;
	}
	.linkUnit .area {
		display: block;
	}
	.linkUnit .area em {
		font-size: 2.2em;
		letter-spacing: 0.05em;
		line-height: 1.2;
	}
	.linkUnit .area .tsubo {
		display: inline-block;
	}

@media screen and (max-width: 900px) {
	.linkUnitWrap {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 500px) {
	.linkUnitWrap {
		grid-template-columns: repeat(1, 1fr);
	}
}


/* modalUnitWrap
------------------------------------------------------------------- */
	.modalUnit {
		width: 90%;
		/*height: 90dvh;*/
		max-width: 1260px;
		margin: 5% auto 5%;
		padding: 0 30px;
	}
	.modalUnit .modalUnitInner {
		height: 100%;
		padding: 30px 0 50px 60px ;
		border-top: 10px solid #aa895e;

		display: grid;
		grid-template-columns: 53% 47%;
		grid-template-rows: auto auto;
		gap: 30px 30px;
	}
	.modalUnit .specUnit {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.modalUnit .type {
		display: block;
		color: #aa895e;
		font-size: 1.2em;
	}
	.modalUnit .type i {
		display: inline-block;
		margin: 0 5px;
	}
	.modalUnit .type::after {
		content: "";
		display: block;
		width: 50px;
		height: 1px;
		background: #aa895e;
		margin: 0.5em 0 0.8em;
	}
	.modalUnit .areaLabel {
		font-size: 0.76em;
	}
	.modalUnit .area {
		display: block;
	}
	.modalUnit .area em {
		font-size: 2.2em;
		letter-spacing: 0.05em;
		line-height: 1.2;
	}
	.modalUnit .area .tsubo {
		display: inline-block;
	}
	.modalUnit .madori {
		text-align: center;
		align-self: center;
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}

	.equIco {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.equIcoInner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
		gap: 10px;

		padding: 50px 30px;
		background-color: #f7f2ea;
	}
	.equIco em {
		display: block;
		text-align: center;
		font-size: 0.9rem;
		line-height: 1.2;
		letter-spacing: 0;
		font-family: var(--site-font_family-sans);
		margin-top: 5px;
	}

@media screen and (max-width: 900px) {
	.modalUnit .modalUnitInner {
		padding-left: 30px;
	}
	.modalUnit .specUnit {
	}
	.modalUnit .madori {
		position: sticky;
		top: 40px;
		align-self: flex-start;
		padding-top: 50px;
	}
	.equIco {
	}
	.equIcoInner {
		padding: 50px 10px;
	}
}
@media screen and (max-width: 736px) {
	.modalUnit .modalUnitInner {
		padding-left: 0px;
		grid-template-columns: 1fr;
	}
	.modalUnit .specUnit {
		text-align: center;
	}
	.modalUnit .type::after {
		margin-left: auto;
		margin-right: auto;
	}
	.modalUnit .madori {
		position: static;
		padding-top: 0;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.equIco {
		grid-row: 3 / 4;
	}
}




/* tabNav
------------------------------------------------------------------- */
	.tabNavWrap {
		margin-bottom: var(--site-marpad-S);
	}
	.tabNav {
		display: flex;
		justify-content: center;
		font-size: 1.2em;
	}
	.tabNav li {
		display: flex;
		align-items: center;
	}
	.tabNav li::before {
		content: "";
		display: block;
		width: 1px;
		height: 1em;
		background: rgba(0, 0, 0, .15);
		margin: 0 20px;
	}
	.tabNav li:first-child::before {
		display: none;
	}
	.tabNav li a {
		position: relative;
	}
	.tabNav li a::after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 0;
		display: block;
		width: 100%;
		height: 1px;
		background: #aa895e;
		transform: scaleX(0);
		transform-origin: left top;
		transition: 0.3s transform ease;
	}
	.tabNav li.is_current a::after {
		transform: scaleX(1);
	}

	@media (hover: hover) and (pointer: fine) {
		.tabNav li a[href]:hover::after {
			transform: scaleX(1);
		}
	}

@media screen and (max-width: 736px) {
	.tabNav {
		flex-wrap: wrap;
	}
	.tabNav li {
		width: 33%;
	}
	.tabNav li:first-child::before {
		display: block;
	}
	.tabNav li a {
		flex-grow: 1;
		display: block;
		text-align: center;
	}
}




/* labelUnit */
	.labelUnit {
		max-width: 700px;
		padding: 30px;
		background: rgba(0, 0, 0, .03);
	}

@media print, screen and (min-width: 736.02px) {
	.labelUnit .generalColBox {
		--base-generalColBox-margin-column: 30px;
		justify-content: center;
	}
	.labelUnit .generalColBox p {
		width: auto;
		text-align: center;
	}
	.labelUnit .generalColBox p img {
		height: 200px;
		width: auto;
	}
}

/* ======================================================================================
	MODAL_UNIT_VIEWER | 住戸プランモーダル（表示/非表示の最低限の共通部分はassets/gadget/lightbox/setting.css参照）
====================================================================================== */



/* ======================================================================================
	TOGGLE_AREA | 住戸配置図の開閉
	※ setting.jsのslideToggleFocusを利用。開閉アニメーション（高さ）はjQueryのslideDown/slideUpが
	※ displayを直接制御するため、CSS側ではdisplayを一切指定しない（指定するとslideUp開始時に
	※ 高さが0として計測されてしまい、アニメーションが効かなくなる）。初期非表示はHTML側の
	※ インラインstyle="display:none"で持たせている。
====================================================================================== */



/* ======================================================================================
	FLOOR_TABS | 各階平面図タブ（表示/非表示の最低限のみ。内部レイアウトは別途指定）
====================================================================================== */
	.tabCont {
		display: none;
		text-align: center;
	}
	.tabCont.is_active {
		display: block;
		animation: roomplanTabContFadeIn .3s ease;
	}
	@keyframes roomplanTabContFadeIn {
		from	{ opacity: 0; }
		to		{ opacity: 1; }
	}