@charset "UTF-8";

/* TOPから移設（2026-10-02）。元の指定は css/unique.css の敷地配置・間取りブロック
   構成：見出し「間取り」→ 敷地配置図 → Plan Ⅴ */
.planPage .plans { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px)); }
/* 敷地配置図（参考：エスト経堂 PLANページの全体区画図）→ 下に Plan Ⅴ */
.planPage .landplan__img { margin-bottom: clamp(56px, 8vw, 104px); }

/* ============ 敷地配置 ============ */
.landplan__img img { width: 100%; mix-blend-mode: multiply; }
.landplan__img figcaption { margin-top: 8px; text-align: right; }

/* ============ 間取り ============ */
.landplan { padding-bottom: clamp(21px, 3.3vw, 43px); }
.landplan__img { position: relative; }
/* CB(8/19): 図の上に重ねず、図の下・右寄せに置く
   （トリミングで右下が公園の樹木になり、重ねるとグレー文字が判読できないため） */
.landplan__cap { position: static; width: auto; max-width: none; white-space: nowrap; text-align: right; font-size: var(--fs-note); line-height: 1.7; color: var(--c-gray); letter-spacing: .02em; }
.plans { padding-top: clamp(21px, 3.3vw, 43px); }

/* ===== 間取り(成城プラン式: スペックを上・大判図面を下・ダミー掲載) ===== */
.plans__theme { margin-bottom: clamp(20px, 2.8vw, 32px); text-align: center; font-family: var(--ff-en); font-size: clamp(40px, 5.2vw, 60px); letter-spacing: .04em; line-height: 1.15; color: var(--c-gold); }

/* スペック欄（2026-10-02 追加／参考：エスト経堂の暗色帯。左＝タイプ・面積、右＝INTERIOR COLOR） */
.plans__spec {
  width: min(1400px, calc(100vw - 2 * var(--gutter))); margin: 0 0 clamp(24px, 3.4vw, 40px) 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr auto; background: var(--c-ink-soft); color: var(--c-white);
  padding: clamp(32px, 4.4vw, 64px) clamp(24px, 6vw, 120px);
}
.plans__specMain { padding-right: clamp(32px, 4vw, 64px); }
.plans__specColor { padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid rgba(255,255,255,.3); }
.plans__type { font-family: var(--ff-en); font-size: clamp(36px, 4vw, 50px); line-height: 1.1; letter-spacing: .02em; }
.plans__typeSub { margin-left: 4px; font-family: var(--ff-min); font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .12em; }
.plans__dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 44px; margin-top: clamp(18px, 2vw, 26px); }
.plans__dlRow { display: flex; align-items: baseline; gap: 14px; font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .12em; }
.plans__dlRow dd { font-size: 13px; letter-spacing: .04em; }
.plans__num { margin-right: 2px; font-family: var(--ff-en); font-size: clamp(28px, 3vw, 38px); letter-spacing: 0; }
.plans__floor { margin-top: clamp(12px, 1.4vw, 18px); font-size: 14px; letter-spacing: .12em; }
.plans__specTtl { display: inline-block; font-family: var(--ff-en); font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .1em; border-bottom: 1px solid currentColor; line-height: 1.3; }
.plans__colorDl { margin-top: clamp(16px, 2vw, 26px); font-size: 14px; line-height: 1.9; letter-spacing: .12em; }
.plans__colorDl > div { display: flex; }
.plans__colorDl > div + div { margin-top: 8px; }
.plans__colorDl dt { flex-shrink: 0; }
.plans__drawings {
  width: min(1400px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%);
  background: #fff; padding: clamp(16px, 2.5vw, 40px); border: 1px solid rgba(0,0,0,.08);
  display: grid; grid-template-columns: 1063fr 783fr; gap: clamp(24px, 4vw, 64px); align-items: start;
}
.plans__drawing { margin: 0; position: relative; }
.plans__drawing img { width: 100%; display: block; }
/* 方位アイコン: 2階図面の右下(「2F」表記の左隣の余白)に重ねる。
   ％指定なので画面幅が変わっても図面との大小関係は一定。図面自体のサイズは変えない。 */
.plans__drawing .plans__compass {
  position: absolute; right: 12%; bottom: 2%; width: 13%; height: auto;
  mix-blend-mode: multiply;
}
/* 1F/2Fの外壁ラインを揃える。2F(2枚目)を下げる量=126px(画像原寸)、2F列幅783pxに対する比率で指定。
   ※nth-child ではなく nth-of-type を使う理由: 同じ親に .dmyMark(span)を置いているため、
     nth-child だと数え方がずれて1階側にpaddingが当たってしまう。
   ％paddingは列幅基準でスケールするため、画面幅が変わっても揃いは維持される。
   ※transformは演出(.rv)が使用するため位置決めには使わない。 */
.plans__drawing:nth-of-type(2) { padding-top: 16.09%; }
.plans__note { margin-top: 16px; text-align: center; }
/* 凡例：間取図ボックスの右下。重ねると2F図面に被るため、1Fを2行ぶち抜きにして2F列の下段に置く */
.plans__drawing:first-of-type { grid-row: 1 / span 2; }
.plans__legend { grid-column: 2; align-self: end; justify-self: end; width: min(290px, 55%); margin: 0; }
.plans__drawings { row-gap: clamp(12px, 1.6vw, 24px); }
.plans__legend img { width: 100%; display: block; }
/* BELS(省エネ性能ラベル): 間取り図の下に控えめなサイズで置く */
.plans__bels { margin: clamp(24px, 3.4vw, 40px) auto 0; max-width: 460px; }
.plans__bels img { width: 100%; display: block; }

@media (max-width: 860px) {
  /* 間取図は縦並び。1F/2Fを同縮尺のまま、縦の外壁ラインを揃える。
     実測(0904図面): 2F東側外壁 x=731/783 ・ 1F東側外壁 x=921/1063 ＝ 左送り190px(原寸)で一致。
     2Fの幅 = 783/1063 = 73.6595% ／ 左送り = 190/1063 = 17.8740%
     ※.plans__drawings のベース指定はメディアクエリ外かつ後方にあるため、ここで上書きする。 */
  /* スペック欄は縦積み（区切り線は横向きに） */
  .plans__spec { grid-template-columns: 1fr; padding: 32px 24px; }
  .plans__specMain { padding-right: 0; }
  .plans__specColor { margin-top: 24px; padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
  .plans__dl { flex-direction: column; }
  .plans__drawings { grid-template-columns: 1fr; gap: 28px; }
  .plans__drawing:first-of-type { grid-row: auto; }
  .plans__legend { grid-column: auto; width: min(260px, 75%); }
  .plans__drawing:nth-of-type(2) {
    padding-top: 0;            /* 横並び用の水平壁線合わせは解除 */
    width: 73.6595%;
    margin-left: 17.8740%;
  }
}