@charset "UTF-8";

/* ============ TOP HEADER ============ */
.homePage .header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.65);
}
.homePage .header.is-scrolled {
  background: rgba(24, 15, 12, .95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-shadow: none;
}

/* ============ HERO ============ */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  background: #0e0c0a; overflow: hidden; color: #fff;
}
.hero__seq, .hero__img { position: absolute; inset: 0; }
.hero__img { opacity: 0; transition: opacity 1.6s ease; }
.hero__img img, .hero__img video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__img.is-show { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 32%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
}
.hero__copy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0; transition: opacity 2.2s ease;
  text-shadow: 0 1px 24px rgba(0,0,0,.55);
}
.hero__copy.is-show { opacity: 1; }
/* リターンツールの実データから抽出したロゴ画像に変更(CB 8/20: フォントがリターンツールと不一致のため)。
   旧テキスト(font-size)の見た目の横幅と揃うよう、widthを同スケールで指定。 */
/* 画像化(SVG)によりtext-shadowが効かなくなったため、同じ数値のdrop-shadowで視認性を補う。
   下の.hero__ja(タグライン)のtext-shadowと揃えている。フッター側(footer__brandEn)には適用しない */
.hero__en { display: block; width: clamp(300px, 56vw, 669px); height: auto; filter: drop-shadow(0 1px 24px rgba(0,0,0,.55)); }
.hero__ja { margin-top: 18px; font-size: clamp(14px, 1.9vw, 21px); letter-spacing: .38em; text-indent: .38em; }
.hero__pre {
  position: absolute; top: calc(var(--header-h) + 14px); right: 16px; z-index: 4;
  border: 1px solid rgba(255,255,255,.8); color: rgba(255,255,255,.9);
  font-size: 11px; letter-spacing: .2em; padding: 3px 10px;
}
/* 外観完成予想CGの注釈(CB 8/21)。右下はSKIP/REPLAYボタン(.hero__ctrl)があるため、その直上に置く。
   冒頭〜途中のカットは環境写真ベースの動画なので、外観CG(.hero__img--05)が出る
   is-ended の時だけ表示する(実写に「外観完成予想CG」と出ると誤表示になるため) */
.hero__note {
  position: absolute; right: 18px; bottom: 67px; z-index: 4;
  font-family: var(--ff-min); font-size: 10px; letter-spacing: .06em;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.7);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero.is-ended .hero__note { opacity: 1; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4;
  font-family: var(--ff-en); font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.75);
  padding-bottom: 34px;
}
.hero__scroll::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 28px;
  background: rgba(255,255,255,.6); animation: scrollLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine { 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }
.hero__ctrl { position: absolute; right: 18px; bottom: 18px; z-index: 5; display: flex; gap: 10px; }
.hero__skip, .hero__replay {
  font-family: var(--ff-en); font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.45); padding: 8px 18px 8px 20px;
  background: rgba(0,0,0,.25); transition: background .3s, opacity .3s;
}
.hero__skip:hover, .hero__replay:hover { background: rgba(0,0,0,.5); }
.hero__replay { display: none; }
.hero.is-ended .hero__skip { display: none; }
.hero.is-ended .hero__replay { display: block; }

/* ============ STRONG ============ */
.strong {
  padding: clamp(28px, 4vw, 48px) var(--gutter); color: var(--c-paper);
  background: linear-gradient(rgba(22, 18, 14, .55), rgba(22, 18, 14, .55)), url(../assets/imgs/bg_stone.jpg) center / cover;
}
.strong__copy {
  text-align: center; font-size: clamp(20px, 2.6vw, 32px); font-weight: 400;
  letter-spacing: .18em; margin-bottom: clamp(30px, 4.5vw, 52px);
}
.strong__copy em {
  display: inline-block; margin: 0 .04em; vertical-align: baseline;
  font-family: var(--ff-en); font-style: italic; font-weight: 400;
  font-size: 1.65em; line-height: 1; color: #cfa972;
}
.strong__copy::after {
  content: ""; display: block; width: min(720px, 86%); height: 1px;
  background: rgba(255,255,255,.25); margin: clamp(26px, 4vw, 44px) auto 0;
}
.strong__list {
  display: flex; justify-content: center; flex-wrap: wrap;
}
.strong { --strong-max: 1200px; }
.strong .section__inner { max-width: var(--strong-max); }
.strong__item {
  padding: 4px clamp(14px, 2vw, 30px); text-align: left;
  display: flex; flex-direction: column;
}
.strong__item + .strong__item { border-left: 1px solid rgba(255,255,255,.25); }
.strong__label { font-size: 11.5px; letter-spacing: .05em; color: rgba(247,245,241,.75); }
.strong__label--lg { font-size: 15px; letter-spacing: .1em; color: var(--c-paper); }
.strong__val { margin-top: auto; padding-top: 2px; font-size: clamp(16px, 1.6vw, 21px); font-weight: 500; letter-spacing: .08em; white-space: nowrap; line-height: 1.3; }
.strong__sub { display: inline-block; margin-left: .3em; font-size: 11px; letter-spacing: .02em; color: rgba(247,245,241,.7); vertical-align: baseline; }
.strong__val em { font-family: var(--ff-en); font-style: italic; font-size: 1.9em; line-height: 1; font-weight: 400; color: #cfa972; }
/* 「〜」はEB Garamondに無い字形のため和文フォールバックが大きく太く出てしまう(CB 8/26)。
   数字と並んだときに浮かないよう、専用に級数を落として正立体で挟む */
.strong__val em .strong__wave { font-family: var(--ff-min); font-style: normal; font-size: .5em; font-weight: 500; }
/* 鉄道所要時間の注釈。フッターではなく(※)を付けた『渋谷』駅の項目の直下に置く(CB 8/17)。
   左端は『渋谷』の列に合わせる(列の左端は画面幅1200〜1920pxで内側幅の50.1〜50.4%で安定)。
   幅を絞って2〜3行に折り返す。 */
.strong__note {
  margin: 14px 0 0 50.3%; padding-left: clamp(14px, 2vw, 30px);
  max-width: min(360px, 32%);
  font-size: 11px; line-height: 1.7; letter-spacing: .02em;
  color: rgba(247,245,241,.62); text-align: left;
}

/* ============ 地勢〜閑適 ============ */
.chisei figcaption { margin-top: 8px; font-size: var(--fs-caption); color: var(--c-gray); letter-spacing: .06em; }
.chiseiHead { display: flex; align-items: flex-start; gap: 10px; }
.chiseiHead__ja { writing-mode: vertical-rl; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: .5em; line-height: 1.2; }
.chiseiHead__body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chiseiHead__en { font-family: var(--ff-en); font-style: italic; font-size: clamp(12px, 1.05vw, 14px); letter-spacing: .12em; color: var(--c-gray); }
.chiseiHead__line { width: 1px; height: clamp(80px, 10vw, 140px); background: var(--c-ink); margin-top: 6px; }

.chisei__row1 { display: grid; grid-template-columns: 1fr auto auto; gap: clamp(20px, 3.4vw, 48px); align-items: start; margin-bottom: clamp(48px, 7vw, 88px); }
.chisei__vertCopy {
  writing-mode: vertical-rl; font-size: clamp(14px, 1.35vw, 17px);
  letter-spacing: .22em; line-height: 2.4; padding-top: 8px; max-height: 30em;
}
.chisei__main { max-width: none; }
.chisei__main img { width: 100%; }

.chisei__row2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; margin-bottom: 125px; }
.chisei__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; }
.chisei__collageMain { grid-column: 1 / -1; }
.chisei__collage img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.chisei__collageMain img { aspect-ratio: 4/3; }
.chisei__collageCap { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--c-gray); letter-spacing: .06em; }
.chisei__mapSide { position: relative; }
.chisei__mapSp { display: none; }
.chisei__map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * clamp(24px, 4vw, 56px) - 20px);
  right: calc(-1 * max(var(--gutter), (100vw - 1080px) / 2) + 20px);
}
.chisei__map img {
  width: 100%; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 68%, transparent 96%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 68%, transparent 96%);
}
.chisei__map figcaption { position: absolute; left: 40%; bottom: 0; margin: 0; }
.chisei__text { font-size: 15px; line-height: 2.3; letter-spacing: .03em; max-width: 34em; }
.chisei__map .chisei__text {
  position: absolute;
  left: 7%;
  top: auto;
  bottom: 35.6875px;
  max-width: calc(21em + 60px);
  z-index: 1;
  background: transparent;
  box-shadow: none;
}

.chisei__row3 { display: grid; grid-template-columns: auto auto 1fr; gap: clamp(20px, 3.4vw, 48px); align-items: start; margin-bottom: clamp(48px, 7vw, 88px); }
.chisei__vertCopy--kanteki { max-height: 28em; }
.chisei__bridgeMain { max-width: 960px; margin: 0; }
.chisei__bridgeMain video { width: 100%; display: block; }
.chisei__seasonStack { position: relative; display: block; }
.chisei__seasonStack img { width: 100%; display: block; }
.chisei__seasonGreen { position: absolute; inset: 0; opacity: 0; animation: seasonFade 16s ease-in-out infinite; }
@keyframes seasonFade {
  0%, 37.5% { opacity: 0; }
  50%, 87.5% { opacity: 1; }
  100% { opacity: 0; }
}

/* 本文列(1fr)の実測366pxに対し、しだれ桜ブロックの指定改行(最長395px)が収まらないため
   minmax()で本文列の最小幅を430pxに底上げ(CB 8/20)。写真側(1.8fr)がそのぶん少し縮む */
.chisei__row4 { display: grid; grid-template-columns: minmax(430px, 1fr) 1.8fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 7vw, 88px); }
/* row4と同様、本文列(1fr)の指定改行(最長412px)が366pxに収まらないため最小幅を底上げ(CB 8/20) */
.chisei__row5 { display: grid; grid-template-columns: 1.8fr minmax(430px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.chisei__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.chisei__pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.chisei .note { margin-top: 32px; }

/* ============ 敷地配置 ============ */
.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__grid { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: clamp(20px, 3vw, 40px); }
.plans__ph { aspect-ratio: 4/3; background: #e5e1da; position: relative; }
.plans__ph--img { display: block; width: 100%; cursor: pointer; background: #fff; padding: 20px; }
.plans__ph--img img { width: 100%; height: 100%; object-fit: contain; }
.planModal {
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 6, .88);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
  animation: modalIn .4s ease;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.planModal__img { animation: modalImgIn .45s ease; }
@keyframes modalImgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.planModal[hidden] { display: none; }
.planModal__img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.planModal__close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; cursor: pointer; }
.planModal__close::before, .planModal__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 1px; background: #fff;
}
.planModal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.planModal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.plans__cap { margin-top: 12px; font-size: 15px; letter-spacing: .12em; line-height: 1.8; }
.plans__detailBtn { margin-top: 16px; width: 100%; min-width: 0; }

/* ============ TOYOTA HOME EST ============ */
.estSec {
  background: #fff url(../assets/imgs/bg_paper.jpg) center / cover;
  background-blend-mode: multiply;
  color: var(--c-ink);
  padding: clamp(72px, 11vw, 140px) var(--gutter);
}
.estSec__inner { display: grid; grid-template-columns: 1fr 663px; gap: clamp(14px, 2vw, 28px); align-items: start; }
.estSec__en {
  font-family: var(--ff-en); font-size: clamp(34px, 3.7vw, 58px);
  letter-spacing: .12em; line-height: 1.15; color: #687168;
}
.estSec__copy { margin-top: 26px; font-size: clamp(17px, 1.85vw, 25px); letter-spacing: .16em; white-space: nowrap; }
.estSec__text { margin-top: 18px; font-size: 14px; line-height: 2.3; letter-spacing: .03em; color: var(--c-ink-soft); max-width: 32em; }
.estSec__btn {
  display: inline-flex; align-items: center; gap: 20px; margin-top: 30px;
  border: 1px solid var(--c-ink); padding: 14px 34px; color: var(--c-ink);
  font-size: 14px; letter-spacing: .2em; transition: background .3s, color .3s;
}
.estSec__btn span { font-family: var(--ff-en); }
.estSec__btn:hover { background: var(--c-ink); color: #fff; }
.estSec__works { display: grid; grid-template-columns: 420px 227px; gap: 16px; align-items: start; }
.estSec__work { position: relative; }
.estSec__work img { width: 100%; object-fit: cover; }
.estSec__work--land img { aspect-ratio: 3/2; }
.estSec__work--port { width: 100%; }
/* 左(420x280)と高さを揃える。右は幅227pxなので 227/280 に。
   上部をトリミングする指定(object-position:bottom)で、ソファ側の構図を残す(CB 8/10) */
.estSec__work--port img { aspect-ratio: 227/280; object-position: bottom; }
.estSec__work figcaption { margin-top: 8px; font-size: 11.5px; color: var(--c-gray); letter-spacing: .02em; white-space: nowrap; }
/* 施工例2点の注釈は1本にまとめる(CB 8/17)。グリッド全幅に置き、右の画像の右下に寄せる */
.estSec__worksCap { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--c-gray); letter-spacing: .02em; text-align: right; }

/* ============ SP ============ */
.pcbr { display: inline; }
.spbr { display: none; }
@media (max-width: 860px) {
  .pcbr { display: none; }
  .spbr { display: inline; }
  .hero { min-height: 480px; }
  /* MVのトリミング(CB)。寄せすぎると外壁が近く圧迫感が出るため、
     道路の抜けと2棟の重なりが見える位置(55%)にして奥行きを残す。
     この位置はコピー帯が明るいので、下の .hero__shade を濃くして可読性を確保する。 */
  /* 0819差し替えのCGは主役の建物が右寄りのため、SPの切り出しを40%に。
     55%だと壁面だけになり、街並みの奥行きが出ない */
  .hero__img--05 video, .hero__img--05 img, .hero__img--final img { object-position: 40% center; }
  /* コピーが明るい外壁・空に重なるため、SPのみシェードを濃くする(CB: 文字が見にくい) */
  .hero__shade {
    background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.54) 100%);
  }
  .hero__pre { right: 12px; }

  /* ストロングポイント: 揃った2×2グリッド */
  /* 指定の4行(spbr)がそのまま収まる級数に調整 */
  .strong__copy { font-size: 20px; letter-spacing: .1em; line-height: 1.9; }
  /* コピー下の区切り線はSPでは出さない */
  .strong__copy::after { display: none; }
  .strong__list {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .strong__item {
    display: grid; grid-template-rows: 2.5em auto; align-content: start;
    padding: 18px 14px; border-bottom: 1px solid rgba(255,255,255,.2);
  }
  .strong__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.2); }
  .strong__item + .strong__item { border-left: none; }
  .strong__label { font-size: 10.5px; letter-spacing: .02em; line-height: 1.6; color: rgba(247,245,241,.72); }
  .strong__label--lg { font-size: 12.5px; }
  .strong__val {
    margin: 0; padding: 0; align-self: end;
    font-size: 15px; line-height: 1.3; white-space: nowrap; letter-spacing: .02em;
  }
  .strong__val em { font-size: 1.7em; }
  /* 360px級の狭幅端末では列幅が足りず、nowrapの所要時間が中央の罫線に触れるため級数を1段下げる。
     iPhone SE(375px)は改行(spbr)で収まるので影響させない(CB 8/21) */
  /* SPは列に合わせる必要がないため、全幅に戻す */
  .strong__note { margin: 14px 0 0; padding: 0; max-width: none; }

  /* 地勢: 縦積み・PC用絶対配置を全解除 */
  .chisei__row1 { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .chiseiHead { order: -1; align-items: center; gap: 12px; }
  .chiseiHead__ja { writing-mode: horizontal-tb; letter-spacing: .3em; }
  .chiseiHead__line { width: clamp(48px, 16vw, 90px); height: 1px; margin-top: 0; }
  /* ローマ字は罫線の右に置く(CB)。bodyをdisplay:contentsにして
     見出し→罫線→ローマ字 を一列に並べる */
  .chiseiHead__body { display: contents; }
  .chiseiHead__ja { order: 1; }
  .chiseiHead__line { order: 2; }
  .chiseiHead__en { order: 3; }
  /* リード文は横書きで表示(SPでは手動改行を効かせず自然折り返し) */
  .chisei__vertCopy {
    display: block; writing-mode: horizontal-tb; max-height: none;
    line-height: 2.1; font-size: 14px; letter-spacing: .06em; padding-top: 0;
  }
  /* SP側の改行はpcbr/spbrの各<br>クラスで個別制御するため、ここでの一括非表示は撤去(CB 8/20) */
  /* chisei__text(地勢の本文3箇所)がkanteki(vertCopy)の14pxより1px大きく感じるとのCBのため、SPのみ揃える */
  .chisei__text { font-size: 14px; }
  /* PC側のalign-items(start/center)がSPのflex-columnにも引き継がれ、
   本文(chisei__text/chisei__vertCopy)が幅いっぱいに広がらず指定改行が収まらなかったため、stretchで上書き(CB 8/20) */
.chisei__row2, .chisei__row3, .chisei__row4, .chisei__row5 { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
  .chisei__row2 { margin-bottom: 56px; }
  .chisei__mapSide { position: static; }
  .chisei__map { position: relative; inset: auto; margin: 0; }
  .chisei__map img {
    -webkit-mask-image: none; mask-image: none;
  }
  .chisei__map { display: block; position: static; margin: 0; }
  .chisei__map > img, .chisei__map > .aerialDummy, .chisei__map > figcaption { display: none; }
  /* SP専用の航空写真は使わない(多摩川写真の下はリード文。航空写真はコラージュ下の1枚のみ) */
  .chisei__mapSp { display: none; }
  .chisei__map .chisei__text, .chisei__mapSide .chisei__text { position: static; max-width: none; margin: 14px 0 0; box-shadow: none; }
  .chisei__row3 .chiseiHead { flex-direction: row; }
  .chisei__bridgeMain { max-width: none; }
  .chisei__row4 .chisei__text { order: 2; }
  .chisei__row5 .chisei__text { order: 2; }

  .plans__grid { grid-template-columns: 1fr; }
  .estSec__inner { grid-template-columns: 1fr; }
  /* 実績写真の列が固定幅(420px+227px=663px)のままだと親の1fr列を押し広げ、
     本文(max-width:32em=448px)が画面外にはみ出すため、SPは1列にしてコンテンツ幅内に収める */
  .estSec__head, .estSec__works { min-width: 0; }
  .estSec__works { grid-template-columns: 1fr; gap: 20px; }
  /* SPは1列なのでPCの高さ揃えは解除 */
  .estSec__work--port img { aspect-ratio: 2/3; object-position: center; }
}

/* ===== TECHNOLOGY 誘導(飛び先=パワースケルトンの世界観に合わせた黒×鉄骨バナー) ===== */
.techLink { display: block; text-decoration: none; }
.techLink__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(420px, 52vw, 640px); padding: clamp(56px, 8vw, 110px) var(--gutter); color: #fff;
  background: linear-gradient(rgba(8,8,10,.42), rgba(8,8,10,.66)), url(../technology/imgs/tech_house_mist.jpg) center / cover;
}
.techLink__ey { font-size: clamp(12px, 1.4vw, 15px); letter-spacing: .3em; text-indent: .3em; color: rgba(255,255,255,.8); margin-bottom: 18px; }
.techLink__en { font-family: var(--ff-en); font-size: clamp(26px, 3.8vw, 50px); letter-spacing: .26em; text-indent: .26em; font-weight: 400; }
.techLink__ja { margin-top: 14px; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .45em; text-indent: .45em; color: rgba(255,255,255,.82); }
/* 親(.techLink__inner)がalign-items:centerのflex-columnで、このpだけshrink-to-fitして
   SPの指定改行が収まらなかったため、align-selfで幅いっぱいに広げる(text-align:centerは維持) */
.techLink__lead { margin-top: 26px; font-size: clamp(13px, 1.5vw, 16px); line-height: 2; letter-spacing: .08em; color: rgba(255,255,255,.9); align-self: stretch; }
.techLink__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 13px 36px; border: 1px solid rgba(255,255,255,.6); font-family: var(--ff-en); font-size: 13px; letter-spacing: .18em; transition: background .3s, color .3s; }
.techLink:hover .techLink__btn { background: #fff; color: #0e0c0a; }

/* エリア概念図(空撮予定ダミー): ブレンド/マスク解除・コンテンツ幅内・縦に伸ばして本文下端を左コラージュと揃える */
.chisei__map img, .chisei__mapSp img { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.chisei__mapSide { position: static; }
.chisei__map { position: relative; inset: auto; display: block; height: auto; }
.chisei__map img {
  width: min(1440px, calc(100% + (clamp(24px, 4vw, 56px) - 3px) + max(0px, (100vw - 1080px) / 2 - var(--gutter))));
  max-width: none; height: auto; min-height: 0; object-fit: contain; flex: none; display: block;
  margin-left: calc(-1 * (clamp(24px, 4vw, 56px) - 3px));
  mix-blend-mode: multiply;
}
.chisei__map { position: relative; }
/* キャプションは本文の直上に置く。下端を写真高さの101.4%に合わせる
   (CB 8/10で87%→ さらに本文2行ぶん=14.4%下げ。PCのみ) */
.chisei__map figcaption { position: absolute; left: 0; bottom: calc(100% - 101.4%); margin: 0; z-index: 2; }
/* 本文は航空写真の「絵柄が切れる位置」より下に置き、絵柄に重ならないようにする。
   実測: 絵柄の下端は写真高さの約67%(広い幅)〜90%(狭い幅)で変動する
   （本文幅は450px固定なので、写真が小さい狭い幅ほど本文が絵柄の中央寄りまで伸びるため）。
   最も厳しい90%を基準にすれば全幅で絵柄を避けられる。
   ※ここだけtop基準にしている理由: 揃える相手が「写真の下端」ではなく「写真内の絵柄の切れ目」で、
     絵柄は写真と一緒に拡縮するため、％指定のほうが全幅で破綻しない。
     本文が写真下端からはみ出す分(最大約96px)は .chisei__mapSide の padding-bottom で確保する。 */
/* 30em(450px)だと「多摩川や旧六郷用水散策路...」の指定改行1行目(実測510px)が収まらず
   余分な折り返しが発生するため35em(525px)に拡張(CB 8/20)。本文は写真の下(top:104.4%)に
   あるため、幅を広げても写真内の絵柄とは重ならない */
.chisei__map .chisei__text { position: absolute; left: 0; top: 104.4%; bottom: auto; max-width: 35em; margin: 0; z-index: 2; }
/* 上記のはみ出し分を行の高さに含める（結果として「閑適」も自然に下がる）
   本文を2行ぶん下げたぶん、逃げ余白も広げる */
.chisei__mapSide { padding-bottom: 190px; }

/* ===== 間取り(成城プラン式: スペックを上・大判図面を下・ダミー掲載) ===== */
.plans__head { max-width: 900px; margin: 0 auto clamp(24px, 3.4vw, 40px); text-align: center; }
.plans__theme { font-family: var(--ff-en); font-size: clamp(15px, 1.7vw, 19px); letter-spacing: .12em; color: var(--c-ink); }
.plans__type { margin-top: 8px; font-size: clamp(22px, 2.8vw, 32px); font-weight: 500; letter-spacing: .1em; }
.plans__dl { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; margin-top: clamp(16px, 2.2vw, 24px); }
.plans__dlRow { display: flex; gap: 10px; font-size: 14px; letter-spacing: .05em; }
/* 項目名と数値の色を揃える（CB: 色の違いが気になるので同じに） */
.plans__dlRow dt { color: inherit; }
.plans__dlRow dd { font-weight: 500; }
.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: 688fr 456fr; 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枚目)を下げる量=72px(画像原寸)、2F列幅456pxに対する比率で指定。
   ※nth-child ではなく nth-of-type を使う理由: 同じ親に .dmyMark(span)を置いているため、
     nth-child だと数え方がずれて1階側にpaddingが当たってしまう。
   ％paddingは列幅基準でスケールするため、画面幅が変わっても揃いは維持される。
   ※transformは演出(.rv)が使用するため位置決めには使わない。 */
.plans__drawing:nth-of-type(2) { padding-top: 15.789%; }
.plans__note { margin-top: 16px; text-align: center; }
/* 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) {
  .techLink__inner { min-height: 260px; }
}

/* エリア概念図の空撮ダミー(コーディング・枠なし／UK標準dmy=赤斜線+中央「ダミー」) */
.aerialDummy { position: relative; background: #cfcfcf; min-height: 260px; }
.aerialDummy__lead { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .06em; color: #6f6f6f; }
.chisei__map .aerialDummy { flex: 1 1 auto; }
.chisei__mapSp .aerialDummy { min-height: 200px; }

/* ===== SP: 地勢の航空写真まわり =====
   上の「エリア概念図」PC用指定(.chisei__map img / figcaption / .chisei__text)は
   メディアクエリ外かつ後方にあるため、同じ詳細度だと後書き優先で勝ってしまう。
   そのためSP用の打ち消しは必ずここ(ファイル最後)に置く。
   航空写真はコラージュ下の1枚のみ表示し、キャプションと本文は写真の下へ縦に流す。 */
@media (max-width: 860px) {
  /* 航空写真はSPのみ画面幅いっぱいに。セクションの左右padding(var(--gutter))を打ち消す */
  .chisei__map > img {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-left: calc(var(--gutter) * -1);
  }
  .chisei__map > figcaption {
    display: block; position: static; margin: 8px 0 0;
    font-size: var(--fs-caption); color: var(--c-gray); letter-spacing: .06em;
  }
  .chisei__map .chisei__text {
    position: static; max-width: none; margin: 14px 0 0;
  }
  /* PC用の逃げ余白はSPでは不要 */
  .chisei__mapSide { padding-bottom: 0; }

  /* 間取図は縦並び。1F/2Fを同縮尺のまま、縦の外壁ラインを揃える。
     実測: 1F外壁 x=227.5/574(原寸688幅) ・ 2F外壁 x=70.5/416.5(原寸456幅)＝壁間346pxで一致。
     2Fの幅 = 456/688 = 66.2791% ／ 左送り = (227.5-70.5)/688 = 22.8198%
     ※.plans__drawings のベース指定はメディアクエリ外かつ後方にあるため、ここで上書きする。 */
  .plans__drawings { grid-template-columns: 1fr; gap: 28px; }
  .plans__drawing:nth-of-type(2) {
    padding-top: 0;            /* 横並び用の水平壁線合わせは解除 */
    width: 66.2791%;
    margin-left: 22.8198%;
  }
}

/* 狭幅端末(360px級)の所要時間の収まり調整(CB 8/21)。
   iPhone SE(375px)は改行で収まるため 374px 以下だけ級数を下げる */
@media (max-width: 374px) {
  .strong__val { font-size: 14px; }
}
/* iPhone SE(第1世代)級の320px幅。C2/C3が14pxでは収まらないためもう1段下げる */
@media (max-width: 340px) {
  .strong__val { font-size: 12px; }
}