@charset "utf-8";
/* =========================================================
   間取り（ROOM PLAN）  アルファステイツ南金田 御座プレイス
   ・一覧：外観パース（pers.webp）＋タイプ別ハイライト（pers_a〜e.webp）を重ね、
     btn_area（nav_a〜e.webp）マウスオンで該当ハイライトを表示（鷹匠町仕様）
   ・詳細：白下地 城下（shiroshita）roomplan の unit_spec を踏襲
   ========================================================= */

#roomplan {
	--margin-block: 80px;
}
#roomplan .p-roomplan {
	margin-bottom: 80px;
}
#roomplan img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
#roomplan .font-en {
	font-family: 'Gilda Display', 'Times New Roman', serif;
	font-weight: 400;
}

/* =========================================================
   一覧ページ  ── main-img（パース＋ハイライト）
   ========================================================= */
#roomplan .main-img {
	margin: 0 auto 30px;
	max-width: 900px;
}
#roomplan .main-img h2 {
	text-align: center;
	font-size: 1.6rem;
	letter-spacing: 2px;
	line-height: 1.7;
	font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
	color: #654B2B;
	margin-top: 30px;
}
#roomplan .main-img p.lead {
	text-align: center;
	font-size: 1.4rem;
	line-height: 2;
	font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
	color: #333;
	margin: 30px 0 50px;
}
#roomplan .main-img .block_img {
	position: relative;
	text-align: center;
	margin: 0 auto;
}
#roomplan .main-img .img_room {
	position: relative;
	z-index: 1;
}
#roomplan .main-img .list_hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	pointer-events: none;
}
#roomplan .main-img .list_hover > li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.3s ease;
}
#roomplan .main-img .list_hover > li.current {
	opacity: 1;
}
#roomplan .main-img p.small {
	text-align: right;
	font-size: 0.8rem;
	margin-top: 8px;
	color: #555;
}
@media (max-width: 768px) {
	#roomplan .main-img h2 { font-size: 1.3rem; letter-spacing: 1px; }
	#roomplan .main-img p.lead { font-size: 1rem; }
}

/* =========================================================
   タイプナビ btn_area（一覧＋詳細下部で共用／nav_a〜e.webp）
   ========================================================= */
#roomplan .btn_area {
	width: 100%;
	max-width: 1100px;
	margin: 30px auto 0;
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
#roomplan .btn_area.active {
	display: flex;
}
#roomplan .btn_area li {
	width: calc((100% - 48px) / 5);
	max-width: 300px;
	position: relative;
	border: 1px solid #e3ded0;
	transition: box-shadow 0.3s, border-color 0.3s;
}
#roomplan .btn_area li a {
	display: block;
	width: 100%;
	height: 100%;
}
#roomplan .btn_area li a img {
	width: 100%;
}
#roomplan .btn_area li a:hover,
#roomplan .btn_area li.hovering {
	filter: brightness(1.03);
}
#roomplan .btn_area li:hover {
	border-color: #897613;
	box-shadow: 0 3px 10px rgba(137, 118, 19, 0.18);
}
#roomplan .btn_area li.current {
	border: 2px solid #897613;
}
#roomplan .btn_area li a.no-link,
#roomplan .btn_area li a.soldout {
	pointer-events: none;
}
#roomplan .btn_area li a.no-link {
	filter: grayscale(100%) opacity(0.4);
}

/* Coming soon（E以外）：リンクさせず、マウスオンでサムネイル上に表記する */
#roomplan .btn_area li.is-soon .soon {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: default;
}
#roomplan .btn_area li.is-soon .soon img {
	width: 100%;
	vertical-align: bottom;
}
#roomplan .btn_area li.is-soon .soon__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-family: 'Gilda Display', serif;
	font-size: clamp(13px, 1.4vw, 18px);
	letter-spacing: 0.08em;
	opacity: 0;
	transition: opacity 0.3s;
}
/* .hovering はタッチ操作時に JS が付与するため hover と併記 */
#roomplan .btn_area li.is-soon:hover .soon__label,
#roomplan .btn_area li.is-soon.hovering .soon__label {
	opacity: 1;
}
@media (max-width: 960px) {
	#roomplan .btn_area li { width: calc((100% - 24px) / 3); }
}
@media (max-width: 600px) {
	#roomplan .btn_area li { width: calc((100% - 12px) / 2); }
}

/* =========================================================
   詳細ページ  ── unit_spec / unit_trace（城下 roomplan 踏襲）
   ========================================================= */
#roomplan .block_plan-detail {
	width: min(92%, 1240px);
	margin: 0 auto;
	background: #fff;
}
#roomplan .block_plan-detail .inner {
	width: min(92%, 1100px);
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#roomplan .block_plan-detail .unit_spec {
	width: min(37%, 400px);
}
#roomplan .block_plan-detail sup {
	vertical-align: super;
	font-size: 0.6em;
}
#roomplan .block_plan-detail .set_name-ldk {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #aaa089;
	padding-bottom: 14px;
}
#roomplan .block_plan-detail .set_name-ldk .spec_name {
	width: min(30%, 130px);
}
#roomplan .block_plan-detail .set_name-ldk .spec_ldk {
	width: min(64%, 295px);
	margin-top: 1rem;
}
#roomplan .block_plan-detail .spec_ldk .main {
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1;
	color: #333;
	margin-bottom: 0.6rem;
}
#roomplan .block_plan-detail .spec_ldk .main .size-large {
	font-size: clamp(46px, 6vw, 76px);
}
#roomplan .block_plan-detail .spec_ldk .sub {
	font-size: clamp(13px, 1.35vw, 16px);
	line-height: 1.5;
	color: #333;
}
#roomplan .block_plan-detail .spec_area {
	margin: 20px 0;
}
#roomplan .block_plan-detail .spec_area .main {
	font-size: clamp(14px, 1.5vw, 20px);
	line-height: 1;
	color: #333;
}
#roomplan .block_plan-detail .spec_area .main p {
	font-size: clamp(12px, 1.1vw, 14px);
	margin-bottom: 6px;
}
#roomplan .block_plan-detail .spec_area .main .size-large {
	font-size: clamp(40px, 5.2vw, 60px);
}
#roomplan .block_plan-detail .spec_area .main .size-middle {
	font-size: clamp(22px, 2.6vw, 34px);
}
#roomplan .block_plan-detail .spec_area .wrap_sub {
	margin-top: 14px;
}
#roomplan .block_plan-detail .spec_area .wrap_sub dl {
	/* 項目名は最長ラベル幅に固定し、数値側で ㎡・坪 の桁位置を縦に揃える */
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: baseline;
	width: max-content;
	max-width: 100%;
	margin-left: auto; /* wrap_sub の右端に寄せる */
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 1.4;
	color: #333;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
#roomplan .block_plan-detail .spec_area .wrap_sub dl dt {
	/* 「住居専有面積」「総面積」を最長ラベルの幅まで両端揃えに伸ばす */
	text-align: justify;
	text-align-last: justify;
}
#roomplan .block_plan-detail .spec_area .wrap_sub dl dd {
	display: flex;
	align-items: baseline;
	margin-inline-start: 0; /* dd のブラウザ既定インデントを解除し ／ をラベル直後に付ける */
}
#roomplan .block_plan-detail .spec_area .wrap_sub dl dt,
#roomplan .block_plan-detail .spec_area .wrap_sub dl dd {
	padding: 3px 0;
}
#roomplan .block_plan-detail .spec_area .area_slash {
	flex: 0 0 auto;
}
#roomplan .block_plan-detail .spec_area .area_sqm {
	/* 右揃え＋等幅数字で小数点と m2 の位置が全行で一致する */
	flex: 1 1 auto;
	text-align: right;
	white-space: nowrap;
}
#roomplan .block_plan-detail .spec_area .area_tsubo {
	flex: 0 0 auto;
	white-space: nowrap;
}
#roomplan .block_plan-detail .spec_area .area_tsubo-int {
	/* 1桁でも2桁分の幅を確保し、（ 0.54坪）と（25.00坪）の小数点を揃える */
	display: inline-block;
	width: 2ch;
	text-align: right;
}
#roomplan .block_plan-detail .spec_area .area_sqm-int--lg {
	/* 住居専有面積のみ小数点より前を拡大 */
	font-size: 1.8em;
	line-height: 1;
}
#roomplan .block_plan-detail .spec_area .wrap_sub dl .total-area {
	padding-top: 8px;
	margin-top: 6px;
	border-top: 1px solid #e3e0d9;
}
#roomplan .block_plan-detail .img_elevation {
	margin: 24px auto 0;
	max-width: 420px;
}
#roomplan .block_plan-detail .btn_pdf {
	text-align: center;
	font-size: clamp(15px, 1.2vw, 18px);
	margin-top: 24px;
}
#roomplan .block_plan-detail .btn_pdf a {
	display: block;
	border: 1px solid #645b48;
	padding: 16px 0;
	color: #645b48;
	transition: 0.4s background-color, 0.4s border-color, 0.4s color;
}
#roomplan .block_plan-detail .btn_pdf a:hover {
	text-decoration: none;
	background-color: #ece6d8;
	border-color: #000;
}
#roomplan .block_plan-detail .unit_trace {
	width: min(57%, 640px);
	text-align: center;
}
#roomplan .block_plan-detail .unit_trace img {
	width: auto;
	max-width: 100%;
}
#roomplan .block_plan-detail .unit_trace .hanrei {
	width: min(78%, 440px);
	margin: 18px auto 0;
}
#roomplan .block_plan-detail .unit_trace .hanrei img {
	width: 100%;
}

/* 一覧リード：全邸南向き を強調（マーカー下線） */
#roomplan .main-img p.lead .marker {
	background: linear-gradient(transparent 58%, rgba(214, 156, 49, 0.42) 58%);
	padding: 0 0.1em;
	font-weight: 600;
}

@media (max-width: 970px) {
	/* unit_spec を display: contents で解いて、間取り図（unit_trace）を
	   住戸位置図（img_elevation）より前に並べ替える */
	#roomplan .block_plan-detail .inner { display: flex; flex-direction: column; }
	#roomplan .block_plan-detail .unit_spec { display: contents; width: 92%; margin: 0 auto; }
	#roomplan .block_plan-detail .set_name-ldk,
	#roomplan .block_plan-detail .spec_area { width: 92%; margin-left: auto; margin-right: auto; }
	#roomplan .block_plan-detail .set_name-ldk { justify-content: flex-start; }
	#roomplan .block_plan-detail .set_name-ldk .spec_ldk { width: 62%; margin-left: 5%; }
	#roomplan .block_plan-detail .img_elevation { width: 70%; order: 2; }
	#roomplan .block_plan-detail .btn_pdf { display: none; } /* PC only（SPは下部で表示） */
	#roomplan .block_plan-detail .unit_trace { width: 100%; margin-top: 3rem; order: 1; }
	/* SP用PDFボタン */
	#roomplan .plan-pdf-sp {
		width: 92%;
		max-width: 380px;
		margin: 30px auto 0;
		text-align: center;
	}
	#roomplan .plan-pdf-sp a {
		display: block;
		border: 1px solid #645b48;
		padding: 16px 0;
		color: #645b48;
	}
}
@media (min-width: 971px) {
	#roomplan .plan-pdf-sp { display: none; }
}

/* =========================================================
   SP：コンテンツ左右の余白を縮小（inner--base 20px＋92%入れ子の解消）
   ========================================================= */
@media (max-width: 810px) {
	#roomplan .inner--base { margin-inline: 12px; }
	/* 詳細：白箱と内側の 92%×92% を解いて幅いっぱいに */
	#roomplan .block_plan-detail { width: 100%; }
	#roomplan .block_plan-detail .inner { width: 100%; padding: 28px 14px; }
	#roomplan .block_plan-detail .unit_spec { width: 100%; }
	#roomplan .block_plan-detail .set_name-ldk,
	#roomplan .block_plan-detail .spec_area { width: 100%; }
	#roomplan .plan-pdf-sp { width: 100%; }
}

/* =========================================================
   面積表：画面幅に応じた見せ方の調整
   ========================================================= */

/* SP：ブロックが横幅を使い切るよう文字サイズを可変にする */
@media (max-width: 519px) {
	#roomplan .block_plan-detail .spec_area .wrap_sub dl {
		font-size: clamp(14px, 5.05vw, 26px);
	}
}

/* タブレット：住戸名／LDK と 面積表を横並びにする */
@media (min-width: 520px) and (max-width: 970px) {
	#roomplan .block_plan-detail .inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center; /* 住戸名/LDK と 面積表を上下中央で揃える */
	}
	#roomplan .block_plan-detail .set_name-ldk {
		width: 42%;
		margin-left: 0;
		margin-right: 0;
	}
	#roomplan .block_plan-detail .spec_area {
		width: 55%;
		margin: 0;
	}
	/* 810px を境に inner--base の左右余白が変わるため係数を分ける */
	#roomplan .block_plan-detail .spec_area .wrap_sub dl {
		font-size: clamp(14px, 2.75vw, 22px);
	}
	#roomplan .block_plan-detail .unit_trace {
		width: 100%;
		order: 1;
	}
	#roomplan .block_plan-detail .img_elevation {
		width: 60%;
		order: 2;
	}
}

@media (min-width: 811px) and (max-width: 970px) {
	#roomplan .block_plan-detail .spec_area .wrap_sub dl {
		font-size: clamp(14px, 2.2vw, 22px);
	}
}