@charset "UTF-8";
/* ============================================================
   SPINE — PHILOSOPHY「背骨タイムライン」
   ------------------------------------------------------------
   HARC HP/harc-top3.html の PHILOSOPHY(Promise) から移植し、
   このサイトの配色トークン（--surface / --line / --gold-*）に
   合わせ直したもの。使うのは index-test.html だけ。

   動きの仕組み（詳しくは assets/js/spine.js）
     ① 中央に1本の罫を引き、スクロール量に合わせて上から伸ばす
     ② 罫の先端に菱形の印。印が項目を通り過ぎた時点でその項目が開く
     ③ 開く＝上下2枚のカードの間が 0fr → 1fr で割れる
        （高さをJSで測らないので、文字量やリサイズで崩れない）
     ④ PCは左右交互のジグザグ。スマホは罫が左端の1列
     ⑤ 日本語の行動指針は1文字ずつ送る（分割はJS側）

   閉じている間は上下カードの接する辺の border を消してあるので
   1枚のカードに見える。開いて初めて中身があったと分かる。
   ============================================================ */

.spine {
  --railw: 1px;
  --railx: 0px;                          /* 罫のX位置。SPは左端、PCだけ中央(50%)へ */
  --gapx: clamp(18px, 4vw, 52px);        /* 罫とカードの距離＝連結線の長さ */
  --gapy: 18px;                          /* 項目どうしの縦の間隔。PCで広げる */
  --spine-r: 4px;                        /* 外側の角だけ丸める（サイト全体の作法に合わせる） */
  position: relative;
  display: grid;
  grid-template-columns: var(--railw) minmax(0, 1fr);
  column-gap: var(--gapx); row-gap: 18px;
  margin-top: clamp(26px, 5vw, 52px);
}

/* ---------- 中央の罫（地・伸びる線・先端の印） ---------- */
.spine__rail, .spine__draw {
  position: absolute; top: 0; bottom: 0; left: var(--railx);
  margin-left: calc(var(--railw) / -2);
  width: var(--railw); pointer-events: none;
}
.spine__rail { background: var(--line-soft); }
.spine__draw {
  background: linear-gradient(180deg, rgba(198, 167, 104, 0.35), var(--gold-400));
  transform-origin: 50% 0; transform: scaleY(var(--p, 0));
}
.spine__mark {
  position: absolute; left: var(--railx); top: calc(var(--p, 0) * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--gold-400); transform: rotate(45deg); pointer-events: none;
  /* 罫を跨ぐので、地の色でふちどって線を切って見せる */
  box-shadow: 0 0 0 5px var(--bg);
}

/* ---------- 1項目 ---------- */
.spine__i { grid-column: 2; position: relative; }
.spine__link {                            /* 罫からカードへ伸びる連結線 */
  position: absolute; top: clamp(22px, 3vw, 32px);
  height: 1px; width: var(--gapx);
  left: calc(var(--gapx) * -1); background: var(--gold-400);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.8s var(--ease-out);
}
.spine__link::after {                     /* 罫側の端に打つ菱形 */
  content: ""; position: absolute; top: 50%; left: -3px;
  width: 6px; height: 6px; background: var(--gold-400);
  transform: translateY(-50%) rotate(45deg);
}
.spine__i.is-open .spine__link { transform: scaleX(1); }

/* ---------- 上下のカード ---------- */
.spine__box {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 30px);
  transition: border-color 0.8s var(--ease-out), background 0.8s var(--ease-out);
}
.spine__i.is-open .spine__box { border-color: var(--line); background: rgba(255, 255, 255, 0.86); }
/* 上下2枚を1枚に見せるため、接する辺の線を消す。角丸も外側だけに残す */
.spine__box--top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-bottom: 0; border-radius: var(--spine-r) var(--spine-r) 0 0;
}
.spine__box--btm { border-top: 0; border-radius: 0 0 var(--spine-r) var(--spine-r); }

/* 連番は、このサイトの他の連番と同じ扱いに揃える。
   .biz-card__no / .area-card__no / .news-item__date はどれも
   UIフォントの太字・等幅数字・広めのトラッキングで組んであるので、
   ここだけ明朝系(--font-en)にしていると数字の表情が浮く。 */
.spine__no {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; color: var(--gold-500);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* 英単語は明朝系のまま。寸法は差し替え前の .harc-item__en に戻して、
   拠点名(.area-card__en)と同じ「開くと金に変わる」作法を足す。
   ※ .area-card__en は紺地なので --text-mute で足りるが、
     こちらはクリーム地。--text-mute(#8A93A5) だと 2.7:1 で
     大きな文字の基準3:1に届かないため、本文と同じ --text-dim(5.2:1)にする */
.spine__en {
  display: block; margin-top: 8px; font-family: var(--font-en);
  font-size: clamp(18px, 2.2vw, 26px); letter-spacing: 0.06em; line-height: 1.25;
  color: var(--text-dim); transition: color 0.8s var(--ease-out);
}
.spine__i.is-open .spine__en { color: var(--gold-500); }
/* 大きな1文字。クリーム地では金が明るすぎて同化するので、
   .theme-light .harc-item__mark と同じ濃い金のグラデーションを使う */
.spine__l {
  font-family: var(--font-en); font-weight: 500; line-height: 0.9;
  font-size: clamp(46px, 6vw, 76px);
  background: linear-gradient(135deg, #C09A4C 0%, #9A7A2C 45%, #775C15 74%, #B08F3E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.32; transform: translateY(0.1em);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.spine__i.is-open .spine__l { opacity: 1; transform: none; }

/* ---------- 開く部分 ---------- */
.spine__body {
  display: grid; grid-template-rows: 0fr;
  border-inline: 1px solid var(--line-soft);
  background: var(--surface);
  transition: grid-template-rows 0.9s var(--ease-out),
              border-color 0.8s var(--ease-out), background 0.8s var(--ease-out);
}
.spine__i.is-open .spine__body { grid-template-rows: 1fr; border-color: var(--line); background: rgba(255, 255, 255, 0.86); }
.spine__bodyIn { overflow: hidden; }
.spine__note {
  max-width: 44em; font-size: 14px; line-height: 2.05; color: var(--text-dim);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 2.6vw, 30px);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s var(--ease-out) 0.14s, transform 0.8s var(--ease-out) 0.14s;
}
.spine__i.is-open .spine__note { opacity: 1; transform: none; }

/* ---------- 下カード：行動指針（1文字ずつ送る） ---------- */
/* 寸法は差し替え前の .harc-item__jp に合わせる */
.spine__ja {
  display: block;
  font-size: clamp(15px, 1.8vw, 19px); font-weight: 700; letter-spacing: 0.06em;
}
.spine__ja span {
  display: inline-block; opacity: 0; transform: translateY(0.5em);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 45ms);
}
.spine__i.is-open .spine__ja span { opacity: 1; transform: none; }

/* ---------- PC：左右交互のジグザグ ---------- */
@media (min-width: 821px) {
  .spine {
    /* 項目の間隔＝順次展開の「間」。詰めすぎると4項目が1画面に収まってしまい、
       罫の伸びも展開も一瞬で終わって順番に開いて見えなくなる。
       1項目あたり画面の半分ぶんスクロールする配分にしてある */
    --gapy: clamp(40px, 10vh, 96px);
    --railx: 50%;
    grid-template-columns: minmax(0, 1fr) var(--railw) minmax(0, 1fr);
    row-gap: 0;
  }
  .spine__i[data-side="l"] { grid-column: 1; }
  .spine__i[data-side="r"] { grid-column: 3; }
  .spine__i[data-i="0"] { grid-row: 1; }
  .spine__i[data-i="1"] { grid-row: 2; }
  .spine__i[data-i="2"] { grid-row: 3; }
  .spine__i[data-i="3"] { grid-row: 4; }
  .spine__i:not([data-i="0"]) { margin-top: var(--gapy); }
  /* 左の項目は罫が右側にあるので、線も菱形も向きを返す */
  .spine__i[data-side="l"] .spine__link { left: auto; right: calc(var(--gapx) * -1); transform-origin: 100% 50%; }
  .spine__i[data-side="l"] .spine__link::after { left: auto; right: -3px; }
}

/* ---------- 動きを控える設定のとき ----------
   「罫を引き終わって全部開いている」完成形で置く（JS側の分岐と対） */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .spine__draw { transform: scaleY(1); }
  html:not(.motion-full) .spine__mark { display: none; }
  html:not(.motion-full) .spine__link { transform: scaleX(1); }
  html:not(.motion-full) .spine__body { grid-template-rows: 1fr; }
  html:not(.motion-full) .spine__l,
  html:not(.motion-full) .spine__note,
  html:not(.motion-full) .spine__ja span { opacity: 1; transform: none; transition: none; }
}
html.motion-reduced .spine__draw { transform: scaleY(1); }
html.motion-reduced .spine__mark { display: none; }
html.motion-reduced .spine__link { transform: scaleX(1); }
html.motion-reduced .spine__body { grid-template-rows: 1fr; }
html.motion-reduced .spine__l,
html.motion-reduced .spine__note,
html.motion-reduced .spine__ja span { opacity: 1; transform: none; transition: none; }