@charset "UTF-8";
/* ============================================================
   MOTION — スクロールで動く演出（トップページ用）
   ------------------------------------------------------------
   ここに書いてあるのは「見た目の土台」と「動く前の状態」だけです。
   実際に動かしているのは assets/js/scroll-motion.js です。

   ★ 動く前に隠す指定は .motion-js が付いているときだけ効きます。
     （JSが止まった環境では隠れず、そのまま読める状態になります）
   ============================================================ */

/* ---------- 1. 上部のスクロール進捗ライン ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 400; pointer-events: none;
  background: rgba(237, 232, 220, 0.07);
}
.scroll-progress__bar {
  height: 100%; background: var(--gold-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 2. マスクから立ち上がる文章 ---------- */
/* JSが [data-rise] の中身を .m-mask で包みます */
.m-mask { display: block; overflow: hidden; }
.m-mask > .m-mask__in { display: block; will-change: transform, opacity; }
.motion-js .m-mask > .m-mask__in { transform: translateY(110%); opacity: 0; }

/* ---------- 3. バラバラ → 集合するカード ---------- */
[data-cluster] > * { will-change: transform, opacity; }

/* ---------- 4. シャッターのように開く写真 ---------- */
[data-clip] { will-change: clip-path; }
.motion-js [data-clip] { clip-path: inset(100% 12% 0% 12%); }
/* 中の写真は少し大きめに置いて、開きながら引いていく */
[data-clip] img { will-change: transform; }

/* ---------- 5. AREA（日本地図と拠点カード） ---------- */
.area-sec {
  position: relative;
  padding: clamp(70px, 9vw, 118px) 0;
  overflow: hidden;
}
.area-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

/* --- カードの置き場 --- */
.area-stack { display: grid; gap: 14px; }
/* パソコンでは重ねる（JSが is-stacked を付けます） */
.area-stack.is-stacked {
  display: block; position: relative;
  /* 上の余白は、奥に下がったカードがのぞく分の場所です */
  padding-top: clamp(34px, 4.5vw, 62px);
  height: clamp(330px, 37vw, 420px);
}
.area-stack.is-stacked .area-card {
  position: absolute; left: 0; right: 0; top: 0;
  /* 上を軸に小さくすると、うしろのカードの頭がのぞいて束に見えます */
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

/* --- 拠点カード --- */
.area-card {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px);
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line-soft); border-radius: 6px;
  /* 下地を不透明にして、重なったときに後ろの文字が透けないようにします */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    var(--bg);
  cursor: pointer;
  transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.area-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(85% 70% at 12% 100%, rgba(198, 167, 104, 0.20), transparent 68%);
  opacity: 0; transition: opacity 0.55s var(--ease-out);
}
.area-card:hover { border-color: var(--line); }
.area-card.is-active { border-color: var(--gold-400); }
.area-card.is-active::before { opacity: 1; }

.area-card__no {
  position: relative;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em; color: var(--gold-300);
}
.area-card__body { position: relative; }
.area-card__jp {
  font-size: clamp(28px, 3.8vw, 46px); font-weight: 700;
  line-height: 1.15; margin-bottom: 6px;
}
.area-card__en {
  font-family: var(--font-en); font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.22em; color: var(--text-mute);
  transition: color 0.4s var(--ease-out);
}
.area-card.is-active .area-card__en { color: var(--gold-300); }
.area-card__pref {
  position: relative; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim);
}
/* --- 拠点をえらぶボタン --- */
.area-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(26px, 4vw, 46px);
}
.area-chip {
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 9px 20px; font-size: 13px; color: var(--text-dim);
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.area-chip:hover { border-color: var(--line); color: var(--text); }
.area-chip.is-active {
  border-color: var(--gold-400); color: var(--gold-200);
  background: rgba(198, 167, 104, 0.14);
}

/* --- 日本地図 --- */
.area-map { position: relative; display: flex; justify-content: center; }
/* 高さを基準にすると、細長い日本列島でも大きく表示できます */
.jmap {
  height: clamp(330px, 44vw, 560px);
  width: auto; max-width: 100%;
  overflow: visible;
}
/* 金色に染めた日本列島。うっすら光をまとわせています */
/* ※ここで filter を指定すると、SVG側の色変換を打ち消してしまうので指定しません */
.jmap__img { opacity: 0.9; }
.jmap__link {
  stroke: rgba(198, 167, 104, 0.20);
  stroke-width: 1.4; stroke-dasharray: 4 9;
}
.jmap__lead { stroke: rgba(198, 167, 104, 0.35); stroke-width: 1.4; transition: stroke 0.4s; }
.jmap__ring {
  fill: none; stroke: rgba(198, 167, 104, 0.45); stroke-width: 1.4;
  opacity: 0.55; transition: stroke 0.4s, opacity 0.4s;
}
.jmap__dot { fill: var(--gold-300); transition: fill 0.4s; }
.jmap__halo {
  fill: rgba(198, 167, 104, 0.16); opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.jmap__label {
  fill: var(--text-mute); font-family: var(--font-jp);
  font-size: 20px; letter-spacing: 0.08em; transition: fill 0.4s;
  /* 地図に重なっても読めるよう、背景色でふちどります */
  paint-order: stroke;
  stroke: var(--navy-700); stroke-width: 5px; stroke-linejoin: round;
}
.jmap__hit { fill: transparent; }
.jmap__pin { cursor: pointer; }
.jmap__pin:focus-visible { outline: none; }
.jmap__pin:focus-visible .jmap__ring,
.jmap__pin:hover .jmap__ring { stroke: var(--gold-200); opacity: 1; }
.jmap__pin:hover .jmap__label { fill: var(--text); }

/* 光っている拠点 */
.jmap__pin.is-active .jmap__dot { fill: #FFF6E2; }
.jmap__pin.is-active .jmap__ring { stroke: var(--gold-200); opacity: 1; }
.jmap__pin.is-active .jmap__lead { stroke: var(--gold-300); }
.jmap__pin.is-active .jmap__label { fill: var(--gold-200); font-weight: 700; }
.jmap__pin.is-active .jmap__halo { opacity: 1; animation: jmapPulse 2.4s var(--ease-out) infinite; }

@keyframes jmapPulse {
  0%   { transform: scale(0.5); opacity: 0.6; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* --- 見出し・カード・地図・拠点ボタンを1画面に収める --- */
/* 画面に貼り付いている間に下のボタンが見切れないよう、
   高さの単位（vh＝画面の高さ）を基準にサイズを決めています */
.area-sec {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-block: clamp(28px, 5vh, 70px);
}
.area-sec > .container { width: 100%; }
.area-sec .sec-head { margin-bottom: clamp(16px, 3vh, 40px); }
.jmap { height: clamp(260px, 52vh, 560px); }
.area-stack.is-stacked {
  padding-top: clamp(26px, 4vh, 58px);
  height: clamp(280px, 46vh, 440px);
}
.area-chips { margin-top: clamp(16px, 3vh, 38px); }

.section > .container, .area-sec > .container { position: relative; z-index: 1; }

/* ---------- 7. スマホ・タブレット調整 ---------- */
@media (max-width: 900px) {
  /* 画面が狭いときは、地図を上・カードを下にして縦に並べる。
     カードが重なる動きはパソコンと同じままにします */
  /* 画面に貼り付いている間、見出しが上のメニュー帯に隠れないようにする */
  .area-sec { padding-top: calc(var(--header-h) + 16px); padding-bottom: 16px; }
  .area-layout { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 26px); }
  .area-map { order: -1; margin-inline: auto; width: 100%; }
  .jmap { height: clamp(190px, 32vh, 330px); }
  .area-stack.is-stacked {
    padding-top: clamp(18px, 3vh, 34px);
    height: clamp(200px, 28vh, 260px);
  }
  .area-chips { margin-top: clamp(12px, 2.4vh, 26px); }
}
@media (max-width: 640px) {
  .area-card { padding: 18px 20px; gap: 10px; }
  .area-card__jp { font-size: 28px; }
  .jmap__label { font-size: 26px; }
  /* ボタンが2段になっても収まるよう、少し小さく */
  .area-chip { padding: 7px 15px; font-size: 12px; }
}