@charset "UTF-8";
/* ============================================================
   AREA — 画面に固定している間、見出しも下のボタンも必ず映るようにする
   （index-test.html 専用）
   ------------------------------------------------------------
   ★直しているもの★
   .area-sec は ScrollTrigger で画面に固定（pin）される。
   固定中は 100vh に収まっている中身しか見えないのに、
   実測すると 1440×620 で「中身594px / 画面620px」＝余りが26pxしかなかった。
   ブックマークバーが一段増えるだけで、見出しか下のボタンが切れる。

   原因は、地図とカードの高さが vh に対して大きすぎたこと。
   motion.css は 52vh / 46vh を積んでいて、そこに見出し128px・
   ボタン44px・余白62pxが乗ると 620px ではほぼ余地が残らない。

   ここでは「先に見出しとボタンの席を確保し、残りを地図に渡す」
   考え方に変える。地図は縮んでも読めるが、見出しと導線は切れたら困る。
   ============================================================ */

.area-sec {
  /* 100vh ぴったりだと、固定中に1pxでも溢れると切れる。
     余白を vh 基準にして、低い画面ほど詰める */
  padding-block: clamp(18px, 3.2vh, 56px);
}

/* 見出しの下の余白は、低い画面では真っ先に削ってよい部分 */
.area-sec .sec-head { margin-bottom: clamp(10px, 2.2vh, 34px); }
.area-sec .sec-head__jp { line-height: 1.35; }

/* 地図：残りの高さを受け取る側。上限を 44vh まで下げる
   （52vh のままだと、見出しとボタンの席が残らない） */
.area-sec .jmap { height: clamp(190px, 40vh, 480px); }

/* 重なるカード：こちらも vh 基準を一段下げる */
.area-sec .area-stack.is-stacked {
  padding-top: clamp(14px, 2.4vh, 42px);
  height: clamp(190px, 34vh, 380px);
}

/* 拠点をえらぶボタン＝下の導線。ここは削らない。
   固定中に必ず画面内に残したいので、上の余白だけ詰める */
.area-sec .area-chips { margin-top: clamp(10px, 2vh, 30px); }

/* 画面がとくに低いときは、地図とカードを横に並べたまま更に詰める */
@media (max-height: 700px) {
  .area-sec .sec-head__en { margin-bottom: 8px; }
  .area-sec .sec-head__jp { font-size: clamp(20px, 2.6vw, 30px); }
  .area-sec .jmap { height: clamp(170px, 36vh, 340px); }
  .area-sec .area-stack.is-stacked { height: clamp(170px, 30vh, 300px); }
}

/* ============================================================
   NETWORK との境目をつくる
   ------------------------------------------------------------
   ★直しているもの★
   NETWORK も AREA も .theme-navy で、実測するとどちらも
   rgb(22,35,63) の同じ地色。境目の線も影も無かった。
   幾何的には1pxも重なっていないのに（実測 0px／はみ出し0件）、
   下から上がってくる AREA の見出しと地図が
   「NETWORK の続き」に見えて内容が混ざる。

   さらに NETWORK の最後の項目(03 事業)は左から2列目に置いてあり、
   下に沈んで見えるので、AREA の見出しとぶつかって見える。

   面を1段沈め、金の細線と影で「別の面が下から来た」と分かるようにする。
   ============================================================ */
.area-sec {
  /* 地色を一段深くする。--bg ごと差し替えるので、
     これを参照している .area-card の下地も自動で追従する */
  --bg: var(--navy-900);
  background: var(--bg);
  border-top: 1px solid rgba(198, 167, 104, 0.22);
  /* 上から覆いかぶさってきた面に見せる影 */
  box-shadow: 0 -26px 64px rgba(0, 0, 0, 0.5);
}
/* 地図のラベルのふちどりは、変えた地色に合わせる
   （motion.css は --navy-700 でふちどっている） */
.area-sec .jmap__label { stroke: var(--navy-900); }

/* NETWORK の終わりに余白を足して、03 の項目が AREA の見出しへ
   食い込んで見えないようにする */
#network { padding-bottom: clamp(52px, 9vh, 120px); }

/* ============================================================
   ピン留めをやめたぶんの調整（area-flat.js と対）
   ------------------------------------------------------------
   固定していたときは 100vh に収める必要があったが、
   普通に流すので高さの縛りは外す。
   代わりに地図を sticky で画面に残し、
   カードが流れるあいだ、光る街が見えている状態を保つ。
   ============================================================ */
/* ★overflow:hidden があると sticky は動かない★
   その要素が基準の枠になってしまい、枠自体はスクロールしないので
   地図が画面に貼り付かず、そのまま流れていく（実測で確認）。
   ここは切り取る必要がないので visible に戻す。 */
.area-sec { min-height: 0; display: block; overflow: visible; }
/* ★sticky は「自分の入れ物」の中でしか動けない★
   align-items:start にすると項目が伸びず、入れ物＝自分の高さになって
   可動域がゼロになる（実測：地図が途中で消えていた）。
   項目は伸ばしたまま、内側の包みを sticky にする。 */
.area-sec .area-layout { align-items: stretch; }
.area-sec .area-map { position: static; align-self: stretch; display: block; }
.area-sec .area-map__in {
  position: sticky; top: clamp(5rem, 14vh, 7.5rem);
  display: flex; justify-content: center;
}
/* 重ね置きをやめたので、カードは普通に縦に並べる */
.area-sec .area-stack {
  display: grid; gap: clamp(10px, 1.8vw, 18px);
  height: auto; padding-top: 0;
}
.area-sec .area-card { position: relative; scroll-margin-top: clamp(5rem, 20vh, 10rem); }
.area-sec .jmap { height: clamp(240px, 44vh, 520px); }

@media (max-width: 900px) {
  /* 縦並びのときは地図を上に固定して、カードだけが流れる */
  .area-sec .area-map { order: -1; }
  .area-sec .area-map__in { top: 64px; }
  .area-sec .jmap { height: clamp(180px, 30vh, 300px); }
}