@charset "UTF-8";
/* ==========================================================================
   LIFE HOUSE renewal — layout.css
   サイトシェル / ヒーロー / ヘッダー / ドロワー / フッター / アクションバー

   レイアウトの考え方
   ------------------------------------------------------------------
   スマホ特化型。画面幅によらず常に1カラムで、本体（.site-frame）は
   最大 var(--site-max) に制限して中央寄せする。
   広い画面で左右に生まれた余白には .pc-rail を置く。

   ★ position:fixed の扱い（重要）
     ヘッダー / ドロワー / ローダーは「ビューポートに固定」しつつ
     「横幅は本体の帯に収める」必要がある。
     .site-frame に contain:layout や transform をかけて封じ込める方法は
     使えない（どちらも fixed の包含ブロックを作ってしまい、fixed が
     絶対配置に化けてスクロールで流れていく）。
     そのため封じ込めは行わず、各 fixed 要素自身が
       left:50% / translateX(-50%) / width:100% / max-width:var(--site-max)
     で本体と同じ帯を再現する。--frame-band にまとめてある。
   ========================================================================== */

/* 本体（.site-frame）と同じ横位置・同じ幅を、ビューポート固定のまま再現する。
   これを当てた要素は「スマホ枠の中だけ」に描画される。 */
.site-header,
.drawer-clip,
.drawer-scrim {
  position: fixed;
  left: 50%;
  width: 100%;
  max-width: var(--site-max);
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */
/* 本文の帯ではなく画面全体を覆う（PC でも余白レールごと隠す） */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  gap: var(--sp-5);
  background: var(--c-charcoal);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* 同じセッションの2ページ目以降（<head> のスクリプトが付ける） */
.lh-seen .loader {
  display: none;
}

.loader__logo {
  width: clamp(120px, 22vw, 168px);
  margin-inline: auto;
  opacity: 0.95;
  animation: loader-in 0.9s var(--ease-out) both;
}

.loader__track,
.loader__num {
  animation: loader-in 0.9s var(--ease-out) 0.2s both;
}

@keyframes loader-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.loader__track {
  width: min(220px, 52vw);
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.loader__bar {
  height: 100%;
  width: 0;
  background: var(--c-white);
  transition: width 0.25s linear;
}

.loader__num {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Hero panel（デスクトップ左 / モバイル上部）
   -------------------------------------------------------------------------- */
.hero-panel {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* 柱（マストヘッド） / 見出し / 足元クレジット の3段 */
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  /* 上は固定ヘッダー、下は固定アクションバーに潜らないよう余白を確保 */
  padding: calc(var(--header-h) + var(--sp-4)) var(--sp-gutter)
    calc(var(--actionbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--text-invert);
  isolation: isolate;
}

.hero-panel__media,
.hero-panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* 写真は明暗が予測できないので、上下＋中央に薄いスクリムを重ねて
   ロゴ・ナビ・スクロール表示のコントラストを常に確保する。 */
.hero-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse 60% 46% at 50% 46%,
      rgba(var(--c-ink-rgb), 0.34) 0%,
      rgba(var(--c-ink-rgb), 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--c-ink-rgb), 0.45) 0%,
      rgba(var(--c-ink-rgb), 0.12) 30%,
      rgba(var(--c-ink-rgb), 0.12) 60%,
      rgba(var(--c-ink-rgb), 0.6) 100%
    );
}

/* ★ justify-content は center にしないこと（旧 place-content:center）。
   列トラックが max-content で縮み、中の見出しが
   「タグラインの幅」を基準に決まってしまう。列は器いっぱいに
   伸ばしたうえで、中身を justify-items で中央に寄せる。 */
.hero-panel__center {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}

/* 下層ページのヒーロー見出し ＝ 雑誌の特集扉。
   セクション見出し（.sec-title__en）と同じ Anton のテキストを
   写真の上に大きく置く。書体・行送りは components.css の .hero-panel__en。

   ★ 写真の上なので字は白。影の色は黒ではなく最濃インディゴ
     （--shadow-text と同じ考え方）。
   ★ ここで指定するのは「大文字の高さ」（--en-cap）と色だけ。
     中央揃えは親の .hero-panel__center（text-align:center）が持つ。 */
.hero-panel__title {
  --en-cap: clamp(2.75rem, 1.2rem + 9vw, 4.5rem);
  --en-fill: var(--c-white);
  width: 100%;
  text-shadow: 0 1px 3px rgba(var(--c-ink-rgb), 0.7),
    0 2px 18px rgba(var(--c-ink-rgb), 0.5);
}

/* デザインは旧 .page-hero__jp（罫で囲った丸いラベル）を継承。写真の上なので白。 */
.hero-panel__tagline {
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem var(--sp-3);
  border: var(--tick-w) solid rgba(var(--c-white-rgb), 0.6);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: rgba(var(--c-white-rgb), 0.92);
  text-shadow: var(--shadow-text);
}

.hero-panel__tagline::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-white);
}

.hero-panel__foot {
  display: grid;
  gap: var(--sp-4);
}

.hero-panel__foot-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* スクロール誘導 */
.scroll-cue {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: var(--shadow-text);
}

.scroll-cue__line {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -50%;
  height: 50%;
  background: var(--c-white);
  animation: scroll-cue 2.2s var(--ease) infinite;
}

@keyframes scroll-cue {
  0% {
    transform: translateY(0);
  }
  60%,
  100% {
    transform: translateY(300%);
  }
}

/* SNS */
.sns {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

/* 各サービスのブランドカラーで塗った丸ボタン。
   以前は「白のヘアライン枠＋白アイコン」で全部同じ見た目だったが、
   SNSは各社のロゴ規定色で出す方針に変更した。

   ★ 色は修飾クラス（.sns__link--*）が --sns-bg / --sns-color に入れ、
     ここは形と挙動だけを持つ。ドロワーやPCレールのように
     「地が淡くて丸ボタンだと重い」場所は、下の個別指定で
     塗りを外してアイコンだけを --sns-color にしている。

   ★ 白いグリフ＋ブランド色の地は各社のロゴ規定どおりの形。
     LINE の緑と白は文字なら AA 未達だが、ここはテキストではなく
     ロゴマークなので各社規定を優先している（base.css のコメント参照）。 */
.sns a {
  display: grid;
  place-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--sns-bg, transparent);
  color: var(--c-white);
  /* 写真の上に置かれることが多いので、地との境目に細いリングを入れる。
     Instagram の暗い青紫が夜景の写真に溶けるのを防ぐ。 */
  box-shadow: 0 0 0 1px rgba(var(--c-white-rgb), 0.3);
  transition: transform var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.sns a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--c-white-rgb), 0.55),
    0 6px 16px rgba(var(--c-ink-rgb), 0.35);
}

.sns svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* --- 各サービスの色 ---
   Instagram だけ塗りがグラデーション。単色が要る場所（アイコンだけの
   表示）のために --sns-color も併せて持たせている。 */
.sns__link--instagram {
  --sns-bg: var(--g-instagram);
  --sns-color: var(--c-instagram);
}

.sns__link--line {
  --sns-bg: var(--c-line);
  --sns-color: var(--c-line-deep);
}

.sns__link--youtube {
  --sns-bg: var(--c-youtube);
  --sns-color: var(--c-youtube);
}

/* ヒーロー足元の SNS は 1 / 2・3 の変則2段組み。
     1
     23
   縦1列だとファーストビューの縦を食い、横1列だと足元が間延びするため、
   2列グリッドの1段目に1つ・2段目に2つを置いている。
   grid-template-areas で明示しないと 1・2 が同じ行に入ってしまう。 */
.statement__foot .sns,
.hero-panel__foot .sns {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-areas:
    "one ."
    "two three";
  justify-content: start;
  gap: var(--sp-2);
}

.statement__foot .sns li:nth-child(1),
.hero-panel__foot .sns li:nth-child(1) {
  grid-area: one;
}

.statement__foot .sns li:nth-child(2),
.hero-panel__foot .sns li:nth-child(2) {
  grid-area: two;
}

.statement__foot .sns li:nth-child(3),
.hero-panel__foot .sns li:nth-child(3) {
  grid-area: three;
}

.statement__foot .sns a,
.hero-panel__foot .sns a {
  width: 34px;
  height: 34px;
}

/* --------------------------------------------------------------------------
   Site frame（スマホ特化型の本体枠）
   常に1カラム・最大幅 var(--site-max) で中央表示する。

   ここに contain / transform / filter / perspective の類を足さないこと。
   いずれも position:fixed 子孫の包含ブロックになり、ヘッダーとドロワーが
   ビューポートではなくこの枠（＝文書全長）に貼り付いてしまう。
   fixed 要素の横幅制限はファイル冒頭の .site-header/.drawer-clip/... の
   共通ルールで行っている。

   z-index も付けないこと。stacking context ができると、中の
   header / drawer / loader の重なり順がこの枠の中に閉じてしまい、
   枠の外にある action-bar との前後関係を指定できなくなる。
   pc-rail と action-bar は意図的にこの外側（body直下）に置き、
   ブラウザの実際の幅を基準に配置する。
   -------------------------------------------------------------------------- */
.site-frame {
  position: relative;
  max-width: var(--site-max);
  min-height: 100vh;
  margin-inline: auto;
  background: var(--bg-body);
}

/* --------------------------------------------------------------------------
   Shell（本文カラム）
   -------------------------------------------------------------------------- */
/* action-bar のぶんの逃げは .shell ではなく .site-footer が持つ。
   .shell に付けると、フッター（濃色）の下に本文背景色の帯が残ってしまうため。
   .site-footer は常に .shell の最後の子である前提。 */
.shell {
  position: relative;
  z-index: 2;
  background: var(--bg-body);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
/* ヒーロー写真の上に重なるので position:fixed。
   最上部では透明（白文字）、スクロールすると不透明（黒文字）に切り替わる。 */
.site-header {
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* 本文の左右余白（--sp-gutter）より意図的に狭くしている。
     ヘッダーは要素が3つ（ロゴ / 地域名 / burger）並ぶため、
     本文と同じ余白だと中央の地域名が詰まって見えるため。
     ※ そのぶんロゴの左端は本文の見出し位置とは揃わない。 */
  padding-inline: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
  background: rgba(var(--c-paper-rgb), 0);
  transition: background var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.site-header.is-stuck {
  background: rgba(var(--c-paper-rgb), 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

/* 写真の上に乗っている状態。影は黒ではなく最濃インディゴ */
.site-header.is-on-photo {
  color: var(--c-white);
  text-shadow: 0 1px 10px rgba(var(--c-ink-rgb), 0.55);
}

.site-header.is-on-photo .site-header__place {
  color: rgba(255, 255, 255, 0.92);
}

.site-header.is-on-photo .burger {
  border-color: var(--line-invert);
  background: rgba(var(--c-white-rgb), 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header.is-on-photo .burger:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
}

.site-header__logo {
  display: block;
  width: clamp(84px, 12vw, 104px);
  flex-shrink: 0;
}

.site-header__logo img {
  width: 100%;
}

/* 最上部ではヒーロー写真に重なるので白ロゴ、スクロールしたら黒ロゴ。
   出し分けは .is-on-photo だけで完結させる（JS からのインライン style は廃止）。
   初期値は HTML 側で is-on-photo を付けてあるので、JS 実行前のちらつきも出ない。 */
.site-header__logo .logo--white {
  display: none;
}

.site-header.is-on-photo .site-header__logo .logo--black {
  display: none;
}

.site-header.is-on-photo .site-header__logo .logo--white {
  display: block;
}

.site-header__place {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
  white-space: nowrap;
}

/* 行頭の印。旧版は点滅する「稼働ランプ」だったが、計器の語彙なので
   点滅を外し、静止した丸にした（components.css の .ed-dot と同じ扱い）。 */
.site-header__place::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

.site-header.is-on-photo .site-header__place {
  color: rgba(var(--c-white-rgb), 0.92);
}

.site-header.is-on-photo .site-header__place::before {
  background: var(--c-accent-light);
}

/* ハンバーガー
   ★ flex: none は必須。外すと 390px 幅で潰れる。
     .site-header__inner は flex で、ロゴは flex-shrink:0、
     .site-header__place は white-space:nowrap（＝min-content が
     テキスト全幅になり縮まない）。縮み代を引き受けられるのがここだけなので、
     指定が無いと 46px → 22px まで潰れ、右余白も 16px → 3px になる。
     iPhone 12〜16（390px）と SE（375px）が該当し、
     タップ領域も 44px の最小基準を割る。 */
.burger {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

/* 狭い画面ではエリア表記のほうを引っ込める。
   ロゴとハンバーガーはどちらも縮ませない前提なので、
   3つ目のこれが余白調整の受け皿になる。 */
@media (max-width: 400px) {
  .site-header__place {
    display: none;
  }
}

.burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.burger:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Drawer（全画面メニュー）— design01 に合わせた「白 × インディゴ」
   -------------------------------------------------------------------------- */
/* スクリムもドロワー本体と同じ帯だけを覆う。
   ビューポート全面を暗くすると pc-rail まで巻き込み、
   「スマホ枠の中で開いている」という見せ方が崩れるため。 */
.drawer-scrim {
  top: 0;
  height: 100dvh;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(var(--c-ink-rgb), 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
}

.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* ★ ドロワーは「クリップ枠」の中でスライドさせる。
     退避先は本体の右どなり＝PCではちょうど右レールの位置になるため、
     transform でずらすだけだと閉じている間も、さらに開閉アニメーションの
     0.4秒間もずっと、ドロワーがレールの上を通過して見えてしまう。
     （visibility を transition させる方式でも、アニメーション中は
       表示されたままなので解決しない）

     そこで本体と同じ帯にビューポート固定の枠を置き、overflow:hidden で
     帯からはみ出した部分を一切描かせない。
     枠が position:fixed なので、中のドロワーは position:absolute で
     同じ挙動になり、かつ枠のクリップが確実に効く。 */
.drawer-clip {
  top: 0;
  height: 100dvh;
  z-index: var(--z-drawer);
  overflow: hidden;
  /* 閉じている間、帯全体で下の操作を奪わないようにする */
  pointer-events: none;
}

/* design01 と同じ「淡色の地にインディゴを差す」構成。
   以前は --c-charcoal のベタ塗り＋白文字だったが、
   レールを反転したのに合わせてこちらも反転している。
   面が明るくなったぶん幅を少し広げ、左に本文を覗かせる量は保つ。 */
/* ★ 収まり優先（スクロールさせない）の設計
     12項目 + 会社情報 + LINEバー + 足元を固定の余白で積むと、
     実測で iPhone 15 Pro Max（dvh 802px）でも 816px となり全機種で溢れる。
     そこで縦の余白をすべて画面高に連動させ（--dh）、
     さらに低い画面ではファイル末尾のメディアクエリで
     会社情報 → 足元 の順に落とす。

     overflow-y:auto は残すこと。想定外の端末・文字サイズ設定で
     それでも溢れたときに、スクロールで到達できる逃げ道が必要。
     「スクロールが不要になるように組む」のであって
     「スクロールを禁止する」のではない。

     --dh は 1dvh 相当の可変単位。dvh 非対応環境では vh に落ちる。 */
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86%, 420px);
  pointer-events: auto;
  display: grid;
  /* 見出し / 本文（伸びる） / LINEバー / 足元 の4段 */
  grid-template-rows: auto 1fr auto auto;
  --dh: 1vh;
  background: var(--c-white);
  color: var(--text-main);
  box-shadow: -12px 0 40px rgba(var(--c-ink-rgb), 0.16);
  transform: translateX(100%);
  transition: transform var(--dur-2) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: clamp(0.625rem, calc(1.6 * var(--dh)), 1rem) var(--sp-5);
  border-bottom: 1px solid var(--rail-line);
}

.drawer__quick {
  display: flex;
  gap: var(--sp-2);
}

.drawer__quick a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem var(--sp-4);
  border: 1px solid var(--rail-line-strong);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.drawer__quick a:hover {
  background: var(--c-charcoal);
  color: var(--c-white);
  border-color: var(--c-charcoal);
}

.drawer__quick svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 閉じるボタンはインディゴのベタ（design01 の「＋」ボタンと同じ扱い） */
.drawer__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  background: var(--c-charcoal);
  color: var(--c-white);
  transition: background var(--dur-1) var(--ease);
}

.drawer__close:hover {
  background: var(--c-accent-deep);
}

.drawer__close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.drawer__body {
  padding: clamp(0.875rem, calc(2.4 * var(--dh)), 1.5rem) var(--sp-5);
}

/* design01 の右レールナビと同じ組み方を2列に展開したもの。
   連番 → 欧文 → 和文。現在地は左の縦罫が濃くなる。

   ★ 縦罫はコンテナ（::before）ではなく各項目の border-left で引くこと。
     1本の罫をコンテナに置くと1列目にしか効かず、2列目が宙に浮く。 */
.drawer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 行間だけ画面高に連動（列間は横幅の問題なので固定） */
  row-gap: clamp(0.625rem, calc(2.2 * var(--dh)), 1.5rem);
  column-gap: var(--sp-4);
  counter-reset: drawer-nav;
}

/* 1項目は「左に連番、右に 和文ルビ → 欧文」の2列組み。
   連番は2行ぶんを縦に貫き、上下中央に置く。

       カジトル
   01
       KAJITORU
*/
.drawer-nav a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 1px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rail-line);
  counter-increment: drawer-nav;
  transition: color var(--dur-1) var(--ease);
}

/* 連番。2行ぶんを貫いて上下中央（align-self は親の align-items:center が効く） */
.drawer-nav a::before {
  content: counter(drawer-nav, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / 3;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-stone);
}

/* ルビが上、項目名が下。DOM は en → jp の順だが、
   読み上げ順（欧文 → 和文）を変えたくないので配置だけ入れ替える。 */
.drawer-nav .jp {
  grid-column: 2;
  grid-row: 1;
}

.drawer-nav .en {
  grid-column: 2;
  grid-row: 2;
}

/* 現在地・ホバーで、その項目の縦罫だけが濃くなる。
   border-left の真上に重ねるので left は -1px。 */
.drawer-nav a::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-charcoal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease-out);
}

.drawer-nav a:hover::after,
.drawer-nav a[aria-current="page"]::after {
  transform: scaleY(1);
}

.drawer-nav a:hover,
.drawer-nav a[aria-current="page"] {
  color: var(--c-charcoal);
}

/* 商品の棚（上段）だけは、縦罫と連番をその商品の色にする。
   4つ並ぶ場所なので、色がそのまま商品の見分けになる。
   .is-* クラスが --product 系を持ち込むので（base.css）、
   ここは「どのトークンを使うか」だけを書けばよい。 */
.drawer-nav--product a::after {
  background: var(--product);
}

.drawer-nav--product a::before {
  color: var(--product-ink);
}

.drawer-nav--product a:hover,
.drawer-nav--product a[aria-current="page"] {
  color: var(--product-ink);
}

/* 2列にしたぶん1列あたりの幅が狭い。
   実機スマホ（375px）ではドロワー322px → 1列あたり文字幅は約112px しかなく、
   最長の "INSPECTION"（10文字）が 15px + 0.14em では収まらない。
   14px + 0.08em まで落として約95pxに収めている。
   項目名を増やすときはここの余裕を確認すること。 */
.drawer-nav .en {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  /* body の line-height 1.7 が効くと1行24px になり、6行で30px 損する */
  line-height: 1.3;
  letter-spacing: 0.08em;
  /* 万一それでも溢れる語が来ても、はみ出さずに折り返す */
  overflow-wrap: anywhere;
}

/* 320px 級（iPhone SE 第1世代など）だけは 14px/0.08em でも
   "INSPECTION" が約7px 溢れるので、この帯だけ一段落とす。
   実測：vw320 → 1列あたり文字幅 88.6px に対し 14px時 95.2px / 13px時 83.2px。 */
@media (max-width: 360px) {
  .drawer-nav .en {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }

  /* ルビも同時に詰める。ここを落とさないと「アフターサービス」
     「お家づくりの流れ」（8文字）が先に折り返す。 */
  .drawer-nav .jp {
    font-size: 0.625rem;
    letter-spacing: 0;
  }
}

.drawer-nav .jp {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-sub);
}

/* --- ドロワー上段：商品の棚 ------------------------------------------------
   2列2段（KAJITORU / CRAFREE ・ CRAFREE α / GREENBELL）。
   商品は「どれを建てるか」を選ぶ入口なので、一般メニューと混ぜずに
   独立させている。項目の組み方（連番→欧文→和文の3段積み）と列幅は
   下段と共通で、区切り罫と見出しラベルだけがこのブロックの担当。
   連番は .drawer-nav が各々 counter-reset を持つため、
   上段 01-04 → 下段 01-10 と別系統で振り直される。 */
.drawer-nav--product {
  padding-bottom: clamp(0.625rem, calc(1.8 * var(--dh)), 1rem);
  margin-bottom: clamp(0.625rem, calc(1.8 * var(--dh)), 1rem);
  border-bottom: 1px solid var(--rail-line);
}

/* 上段の見出し。項目そのものではないので連番の系列には入れない。 */
.drawer-nav__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: clamp(0.375rem, calc(1.1 * var(--dh)), 0.625rem);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
}

.drawer-nav__label span {
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  color: var(--text-sub);
}

.drawer__info {
  margin-top: clamp(0.875rem, calc(2.6 * var(--dh)), 2rem);
  padding-top: clamp(0.75rem, calc(1.8 * var(--dh)), 1.5rem);
  border-top: 1px solid var(--rail-line);
  display: grid;
  gap: 2px;
  font-size: var(--fs-small);
  color: var(--text-sub);
  line-height: 1.7;
}

.drawer__info .name {
  color: var(--text-main);
  letter-spacing: 0.08em;
}

.drawer__info a {
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--rail-line-strong);
}

.drawer__info a:hover {
  color: var(--c-accent);
  border-color: currentColor;
}

/* 足元は LINE グリーンのベタ帯で締める（右レールの LINE バーと同じ語彙）。
   文字とアイコンが --c-ink なのは配色の趣味ではなく可読性の要件。
   白文字だと 2.2:1 で AA 未達（base.css の --c-line のコメント参照）。 */
.drawer__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(0.75rem, calc(1.8 * var(--dh)), 1.5rem) var(--sp-5);
  background: var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  transition: background var(--dur-2) var(--ease);
}

.drawer__cta:hover {
  background: var(--c-line-deep);
}

.drawer__cta svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.drawer__cta .rail-arrow {
  margin: 0 0 0 auto;
  background: var(--c-ink);
}

.drawer__cta .rail-arrow::after {
  border-color: var(--c-ink);
}

.drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: clamp(0.625rem, calc(1.4 * var(--dh)), 1rem) var(--sp-5)
    calc(clamp(0.625rem, calc(1.4 * var(--dh)), 1rem) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rail-line);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-sub);
}

/* ドロワー内の SNS は淡色の地。丸ボタンで並べると3つの色面が
   フッター行で悪目立ちするので、塗りを外してアイコンだけを
   各サービスの色にする（Instagram は単色 --sns-color 側を使う）。 */
.drawer__foot .sns {
  gap: var(--sp-3);
}

.drawer__foot .sns a {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--sns-color);
}

.drawer__foot .sns a:hover {
  background: none;
  box-shadow: none;
  transform: translateY(-1px);
}

.drawer__foot .sns svg {
  width: 20px;
  height: 20px;
}

/* dvh が使える環境では実効ビューポート基準にする。
   iOS のアドレスバーが出ている状態の高さで詰めたいので dvh が正しい。 */
@supports (height: 1dvh) {
  .drawer {
    --dh: 1dvh;
  }
}

/* 画面が低いときは優先度の低いものから落として、スクロールを発生させない。
   会社情報はフッターに同じ内容があるので最初に落とす。 */
@media (max-height: 660px) {
  .drawer__info {
    display: none;
  }
}

@media (max-height: 520px) {
  .drawer__foot {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Page hero（下層ページの見出し帯）
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: var(--sp-8) var(--sp-gutter) var(--sp-7);
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  border-bottom: var(--tick-w) solid var(--line);
}

/* 商品ページだけ、帯の上端に商品色のラインを通す。
   CRAFREE α はここでゴールドのグラデーションが出る唯一の広い面なので、
   高さを詰めすぎないこと（4px 未満だと艶が見えず、ただの黄土色になる）。 */
[data-product] .page-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: var(--product-grad);
}

/* 参照元の CLASSIFICATION ボックス相当。罫で囲った計器ラベル */
.page-hero__jp {
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem var(--sp-3);
  border: var(--tick-w) solid var(--line-strong);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.page-hero__jp::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--product-ink, var(--c-accent));
}

/* 商品ページではラベルの文字と枠も商品色に寄せる */
[data-product] .page-hero__jp {
  border-color: var(--product);
  color: var(--product-ink);
}

.page-hero__lead {
  margin-top: var(--sp-4);
  max-width: 46em;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-sub);
}

/* パンくず */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-4) var(--sp-gutter) 0;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-sub);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--sp-2);
  color: var(--c-mist);
}

.breadcrumb a:hover {
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--sp-section);
  /* 下は「本来の余白 + action-bar の高さ」。
     バーの裏までフッターの濃色を敷き詰め、白い帯が残らないようにする。 */
  padding: var(--sp-8) var(--sp-gutter)
    calc(var(--sp-6) + var(--actionbar-h) + env(safe-area-inset-bottom));
  color: var(--text-invert);
  background: var(--c-charcoal);
  isolation: isolate;
  overflow: hidden;
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(var(--c-charcoal-rgb), 0.7),
    rgba(var(--c-charcoal-rgb), 0.92)
  );
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
}

.site-footer__logo {
  width: 132px;
}

.site-footer__name {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
}

.site-footer__info {
  display: grid;
  gap: 2px;
  font-size: var(--fs-small);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer__info a:hover {
  color: var(--c-white);
}

.site-footer__copy {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--tick-w) solid var(--line-invert);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  /* 11px なので AA には 4.5:1 必要。0.5 では 3.8:1 で足りない。 */
  color: rgba(255, 255, 255, 0.62);
}

/* フッター上端の計器帯（HUD と同じ語彙でページを締める） */
.site-footer__hud {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: var(--tick-w) solid var(--line-invert);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: rgba(var(--c-white-rgb), 0.66);
}

.site-footer__hud span:last-child {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Action bar（下部固定 CTA）
   body 直下（.site-frame の外）に置くが、幅はサイト本体（.site-frame）に揃え、
   画面中央に固定する。PCでも余白ではなく本体の真下に表示される。
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: var(--site-max);
  transform: translateX(-50%);
  z-index: var(--z-actionbar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--c-ink);
  color: var(--text-invert);
  padding-bottom: env(safe-area-inset-bottom);
}

.action-bar a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--actionbar-h);
  padding: var(--sp-3) var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  transition: background var(--dur-1) var(--ease);
}

/* 各ボタンの上端にアクセントの目盛（ホバーで全幅に伸びる） */
.action-bar a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent-light);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.action-bar a:hover::before {
  transform: scaleX(1);
}

.action-bar a + a {
  border-left: var(--tick-w) solid rgba(var(--c-white-rgb), 0.18);
}

.action-bar a:hover {
  background: var(--c-accent-deep);
}

.action-bar svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   スマホ特化型サイトのため、タブレット／デスクトップ用の
   見開きレイアウト（写真パネル固定＋本文カラム分割）は採用しない。
   常に1カラム・最大幅 var(--site-max) で中央表示する（.site-frame 参照）。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   PC rail（.site-frame の左右に生まれる余白の活用）— design01

   body 直下（.site-frame の外）に置き、実ビューポート中央を基準に
   .site-frame の外側ぴったりの位置を calc() で計算する。
   余白が十分に取れる幅（min-width）でのみ表示。

   ★ 地の色について
     以前はここを --c-charcoal のベタ塗りにして白文字を乗せていたが、
     design01 で「ほぼ白の地にインディゴを差す」構成へ反転した。
     地は html の --c-rail-bg で、レール自身は背景を持たない。
     そのため、ここに置く文字は必ず --text-main / --text-sub 側を使うこと。
     --text-invert のまま残すと、淡色の地に白文字で見えなくなる。

   ★ 高さについて
     レールはスクロールさせない。入りきらない分はカード側が縮んで吸収し、
     それでも足りない場合はファイル末尾の高さメディアクエリで
     優先度の低いものから要素ごと間引く。
   ========================================================================== */
.pc-rail {
  /* 表示は最下部のメディアクエリで display:flex に切り替える */
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  height: 100vh;
  width: var(--pc-rail-w);
  padding: var(--sp-7) 0 calc(var(--actionbar-h) + var(--sp-5));
  overflow: hidden;
  color: var(--text-main);

  /* 本体の外側にできる余白の幅（片側）。
     fixed 要素なので % はビューポート幅に対して解決される。 */
  --rail-margin: calc(50% - var(--site-max) / 2);
  /* その余白の中で「横中央」に置くための、画面端からの距離 */
  --rail-offset: calc((var(--rail-margin) - var(--pc-rail-w)) / 2);
}

/* 本体に寄せるのではなく、余白そのものの中央に置く（左右対称） */
.pc-rail--left {
  left: var(--rail-offset);
}

.pc-rail--right {
  right: var(--rail-offset);
}

/* --------------------------------------------------------------------------
   画面の外端に立つ縦罫と、それに沿う縦組みテキスト
   design01 の「左端＝所在地／右端＝タグライン」。
   位置はレールではなくビューポートの端を基準にする。
   -------------------------------------------------------------------------- */
.edge-rule {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rail-line);
  z-index: 1;
}

.edge-rule--left {
  left: clamp(28px, calc((50vw - var(--site-max) / 2 - var(--pc-rail-w)) / 2 - 14px), 96px);
}

.edge-rule--right {
  right: clamp(28px, calc((50vw - var(--site-max) / 2 - var(--pc-rail-w)) / 2 - 14px), 96px);
}

/* 罫の上端に重ねるアクセントの太線（design01 左端のインディゴの棒） */
.edge-rule--left::before {
  content: "";
  position: absolute;
  top: var(--sp-7);
  left: -1px;
  width: 3px;
  height: 84px;
  background: var(--c-charcoal);
}

/* 縦組みテキスト。左は下から上、右は上から下に読ませる。 */
.edge-rule__text {
  position: absolute;
  left: 50%;
  writing-mode: vertical-rl;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  color: var(--c-charcoal);
}

.edge-rule--left .edge-rule__text {
  top: calc(var(--sp-7) + 110px);
  transform: translateX(-50%) rotate(180deg);
}

.edge-rule--right .edge-rule__text {
  top: 26%;
  transform: translateX(-50%);
  color: var(--c-stone);
}

/* --------------------------------------------------------------------------
   左レール：ロゴ → キャッチ → 導線カード3枚 → NEWS
   -------------------------------------------------------------------------- */
.pc-rail__logo img {
  width: 132px;
}

.pc-rail__catch {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  letter-spacing: 0.08em;
  color: var(--c-charcoal);
}

/* カード3枚は残りの高さを受け取り、その中で等間隔に散る */
.rail-cards {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

/* design01 の導線カード。
   罫だけの白いカードに、左下へインディゴの小さな四角を掛ける。
   写真はカードの右下からはみ出させて、枠に収まりきらない感じを作る。 */
.rail-card {
  border-radius: var(--radius-md);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  align-items: stretch;
  gap: var(--sp-3);
  /* min-height は付けないこと。縮小を止めると .rail-cards の箱からあふれ、
     下の NEWS に重なる。高さが足りない場合は下のメディアクエリで
     カードごと間引く方針。 */
  min-height: 0;
  overflow: hidden;
  padding: var(--sp-4) 0 var(--sp-5) var(--sp-4);
  border: 1px solid var(--rail-line);
  background: var(--c-white);
  transition: border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* 左下に掛かる四角。差し色ポイントとして --c-flare（テラコッタ）を使う。 */
.rail-card::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
  background: var(--c-flare);
  transition: transform var(--dur-2) var(--ease-out);
}

.rail-card:hover {
  border-color: var(--rail-line-strong);
  transform: translateY(-2px);
}

.rail-card:hover::after {
  transform: scale(1.25);
}

/* 連番（01）とカテゴリ（EVENT）は1行に並べる。どちらも inline-block で、
   間隔は .rail-card__cat の margin-left が持つ。 */
.rail-card__no {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--c-stone);
}

.rail-card__cat {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

/* セリフの欧文見出し（Marcellus）。このレールの主役。
   <span> のままだと和文サブタイトルと同じ行に流れるので display:block は必須。 */
.rail-card__title {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--c-charcoal);
}

.rail-card__jp {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--text-main);
}

/* 細く長い矢印。design01 の「⟶」 */
.rail-arrow {
  display: block;
  position: relative;
  width: 44px;
  height: 1px;
  margin-top: var(--sp-4);
  background: var(--c-stone);
  transition: width var(--dur-2) var(--ease-out);
}

.rail-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-stone);
  border-right: 1px solid var(--c-stone);
  transform: rotate(45deg);
}

.rail-card:hover .rail-arrow,
.rail-feature:hover .rail-arrow {
  width: 62px;
}

/* 導線カードの矢印は、左側（テキスト領域）の右端に寄せる。
   右端を固定したまま、ホバーで左へ伸びる。 */
.rail-card .rail-arrow {
  margin-left: auto;
}

/* 写真はカードの高さいっぱい（上端〜下端）に広げ、右端の罫にも掛ける。幅は 42% のまま。
   カードの padding（上 sp-4 / 下 sp-5）と枠線 1px を負マージンで打ち消している。
   はみ出した分はカードの overflow:hidden と角丸で切り取られる。 */
.rail-card__media {
  margin: calc(var(--sp-4) * -1 - 1px) -1px calc(var(--sp-5) * -1 - 1px) 0;
  min-height: 0;
  overflow: hidden;
  background: var(--c-sand);
}

.rail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.rail-card:hover .rail-card__media img {
  transform: scale(1.05);
}

/* NEWS 行 */
.rail-news {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rail-line);
}

.rail-news__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--fs-micro);
}

.rail-news__label {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
}

.rail-news__date {
  font-family: var(--font-label);
  color: var(--text-sub);
}

.rail-news__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  line-height: 1.8;
  color: var(--text-main);
}

.rail-news__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.rail-news__more .rail-arrow {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   右レール：連番ナビ → FOLLOW US → LINE バー → FEATURED WORKS
   -------------------------------------------------------------------------- */
/* design01 のナビ。縦罫を通し、現在地だけ濃い線を重ねる。
   ドロワーと同じ項目（商品4＋その他10）を出すため2列組み。

   ★ 縦罫はコンテナ（::before）ではなく各項目の border-left で引くこと。
     1本の罫をコンテナに置くと1列目にしか効かず、2列目が宙に浮く
     （.drawer-nav と同じ理由。1列だった頃はコンテナ側に引いていた）。 */
.pc-rail__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 行間は詰め気味。和文ルビを足したぶん、ここを --sp-3 にすると
     足元の FEATURED WORKS が 100vh から押し出される。 */
  row-gap: var(--sp-2);
  column-gap: var(--sp-3);
  counter-reset: rail-nav;
}

/* 1項目は「左に連番、右に 和文ルビ → 欧文」の2列組み（ドロワーと同じ）。
   連番は2行ぶんを縦に貫き、上下中央に置く。

   ★ 連番に独立した行を与えないこと。レールは height:100vh /
     overflow:hidden で、はみ出した分はスクロールできずに切り落とされる。
     14項目で連番を1行使うと実測で 90px はみ出し、
     足元の FEATURED WORKS が切れる。 */
.pc-rail__nav a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 1px;
  padding-left: var(--sp-3);
  /* --rail-line(10%) だと --c-rail-bg の上でほぼ見えないので一段強く */
  border-left: 1px solid var(--rail-line-strong);
  counter-increment: rail-nav;
  transition: color var(--dur-1) var(--ease);
}

/* ルビが上、項目名が下。DOM は欧文 → 和文の順だが、
   読み上げ順を変えたくないので配置だけ入れ替える。 */
.pc-rail__nav .label {
  grid-column: 2;
  grid-row: 2;
}

.pc-rail__nav .jp {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-micro);
  line-height: 1.25;
  color: var(--text-sub);
}

/* 連番（01, 02 …）。2行ぶんを貫いて上下中央。 */
.pc-rail__nav a::before {
  content: counter(rail-nav, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / 3;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  /* body の line-height 1.7 が効くと1項目あたり7px 損する（14項目で約100px） */
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-stone);
}

/* 現在地は縦罫の該当区間を濃くする。border-left の真上に重ねるので left は -1px。 */
.pc-rail__nav a::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-charcoal);
  transform: scaleY(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.pc-rail__nav a:hover::after,
.pc-rail__nav a[aria-current="page"]::after {
  transform: scaleY(1);
}

.pc-rail__nav a:hover,
.pc-rail__nav a[aria-current="page"] {
  color: var(--c-charcoal);
}

/* 商品の棚（PRODUCT）はドロワーと同じく商品色で見分けさせる */
.pc-rail__nav--product a::after {
  background: var(--product);
}

.pc-rail__nav--product a::before {
  color: var(--product-ink);
}

.pc-rail__nav--product a:hover,
.pc-rail__nav--product a[aria-current="page"] {
  color: var(--product-ink);
}

/* 2列にしたぶん1列あたりの幅が狭い。レール幅は clamp(260px, 22vw, 340px) で、
   最小の260pxのとき1列あたり約110px。最長の "INSPECTION" は
   15px + 0.18em では約130px あり収まらないので、ドロワーと同じ
   14px + 0.08em（約95px）まで落としている。
   項目名を増やすときはここの余裕を確認すること。 */
.pc-rail__nav .label {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* レール幅は 22vw 連動なので、1420px 未満では 340px まで育たない。
   実測：レール284px（≒ビューポート1290px）を下回ると
   "INSPECTION" が1行に収まらず2行に折れる。この帯だけ一段落とす。
   （ドロワーの @media 360px と同じ考え方・同じ値）
   和文ルビも同時に詰める。最長の「クラフリー アルファ」は
   レール260px（＝ビューポート1180px、レールが出る下限）では
   それでも2行に折れるが、縦は 100vh に収まる範囲。 */
@media (max-width: 1290px) {
  .pc-rail__nav .label {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }

  .pc-rail__nav .jp {
    font-size: 0.625rem;
    letter-spacing: 0;
  }
}

/* --- 右レール上段：商品の棚 ------------------------------------------------
   ドロワー上段と同じ構成（2列2段＋区切り罫＋見出しラベル）。
   連番は nav ごとの counter-reset で 上段01-04 → 下段01-10 に振り直される。 */
.pc-rail__nav--product {
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rail-line-strong);
}

.pc-rail__nav-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
}

.pc-rail__nav-label span {
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  color: var(--text-sub);
}

/* FOLLOW US（罫だけの箱） */
.rail-follow {
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding: var(--sp-4);
  border: 1px solid var(--rail-line);
}

.rail-follow__label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
}

/* レール内の SNS は淡色の地に乗るので、罫なし・インディゴのアイコンにする */
.pc-rail__sns {
  gap: var(--sp-3);
}

/* PC余白レールも淡色の地なので、ドロワーと同じくアイコンのみ着色 */
.pc-rail__sns a {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--sns-color);
}

.pc-rail__sns a:hover {
  background: none;
  box-shadow: none;
  transform: translateY(-1px);
}

.pc-rail__sns svg {
  width: 20px;
  height: 20px;
}

/* LINE グリーンのベタ塗りバー（design01 の「公式LINEで相談」）。
   文字・アイコンが --c-ink な理由は .drawer__cta と同じ（白文字は AA 未達）。 */
.rail-line-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  transition: background var(--dur-2) var(--ease);
}

.rail-line-cta:hover {
  background: var(--c-line-deep);
}

.rail-line-cta svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.rail-line-cta .rail-arrow {
  margin: 0 0 0 auto;
  background: var(--c-ink);
}

.rail-line-cta .rail-arrow::after {
  border-color: var(--c-ink);
}

/* FEATURED WORKS カード */
.rail-feature {
  position: relative;
  border-radius: var(--radius-md);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) 0;
  border: 1px solid var(--rail-line);
  background: var(--c-white);
  transition: border-color var(--dur-2) var(--ease);
}

.rail-feature:hover {
  border-color: var(--rail-line-strong);
}

.rail-feature__label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-charcoal);
}

.rail-feature__label,
.rail-feature__en,
.rail-feature__jp {
  display: block;
}

.rail-feature__en {
  margin-top: var(--sp-5);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.rail-feature__jp {
  margin-top: var(--sp-2);
  font-size: var(--fs-lead);
  letter-spacing: 0.08em;
}

/* flex 列の中で矢印が縦に潰れないよう、幅は自前で保つ */
.rail-feature > .rail-arrow {
  align-self: flex-start;
  flex: 0 0 auto;
}

.rail-feature__media {
  flex: 1 1 auto;
  min-height: 60px;
  margin: var(--sp-4) calc(var(--sp-4) * -1) 0;
  overflow: hidden;
  background: var(--c-sand);
}

.rail-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.rail-feature:hover .rail-feature__media img {
  transform: scale(1.05);
}

/* 「VIEW ALL WORKS ⟶ ＋」。＋ だけインディゴのベタ */
.rail-feature__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin: 0 calc(var(--sp-4) * -1);
  padding-left: var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.rail-feature__plus {
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--c-charcoal);
  color: var(--c-white);
  font-size: 1.125rem;
  line-height: 1;
  transition: background var(--dur-2) var(--ease);
}

.rail-feature:hover .rail-feature__plus {
  background: var(--c-accent-deep);
}

/* --------------------------------------------------------------------------
   表示の閾値
   -------------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .pc-rail {
    display: flex;
  }
}

/* 縦罫は左右の余白がさらに広いときだけ（本体に近すぎると窮屈になる） */
@media (min-width: 1420px) {
  .edge-rule {
    display: block;
  }
}

/* 画面が低いときは、レールをスクロールさせるのではなく要素を間引く。
   優先度の低いものから落とす：
     NEWS → FEATURED WORKS の写真 → 3枚目のカード → 2枚目とFOLLOW US。 */
/* design01 のモックは高さ941px。それ未満だとカード3枚＋NEWSは物理的に
   収まらないので、NEWS から先に落とす。 */
@media (max-height: 940px) {
  .rail-news {
    display: none;
  }

  /* ★ 右レールの FEATURED WORKS は、写真だけを落として文字とボタンを残す。
     ここを間引かないと、写真が潰れながらもカードの箱から中身があふれる。
     実測（ビューポート高 → 箱/中身）:
       940px → 241/261    900px → 201/261    855px → 156/261
     855px は 1920×1080 で Chrome を最大化したときの標準値で、
     このとき「VIEW ALL WORKS」が画面外へ 22px 脱落して押せなくなっていた。
     .rail-feature に overflow:hidden を付けて隠す対処は不可。
     ボタンごと消える（＝導線が無くなる）。 */
  .rail-feature__media {
    display: none;
  }

  /* 写真を落としたら、カードは伸びずに中身の高さで止める。
     既定の flex:1 1 auto のままだと、短くなった中身に対して箱だけが
     レールの余りを全部吸って伸び、写真があった位置が白い空洞になる。 */
  .rail-feature {
    flex: 0 0 auto;
  }
}

/* ★ 右レールは写真を落としたあとは伸縮する要素が無く、高さが固定になる。
     MENU に AIRMAKER を足して1行（41px）増えたとき、FEATURED WORKS の
     「VIEW ALL WORKS」の下端が 785px → 826px に下がり、高さ 786〜826px の
     画面で押せなくなった。要素は間引かず、余白だけを詰めて吸収する
     （詰めたあとの下端は 770px。追加前の 785px より余裕がある）。
     MENU の項目を増やしたら、この下端を実測し直すこと。 */
@media (max-height: 860px) {
  .rail-follow {
    margin-top: var(--sp-4);
  }

  .rail-line-cta {
    padding-block: var(--sp-3);
  }
}

@media (max-height: 800px) {
  .rail-cards .rail-card:nth-child(n + 3) {
    display: none;
  }
}

@media (max-height: 680px) {
  .rail-cards .rail-card:nth-child(n + 2),
  .rail-follow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Page hero を hero-panel 内（写真の上）に置いたときの見た目
   -------------------------------------------------------------------------- */
.hero-panel .page-hero {
  padding: 0;
  justify-items: center;
  text-align: center;
  border-bottom: 0;
  margin-top: var(--sp-4);
}

.hero-panel .page-hero__lead {
  margin-top: var(--sp-2);
  /* 文章量に関わらず、どのページでも同じ横幅にそろえる。狭い画面では器に収める */
  width: 23rem;
  max-width: 100%;
  text-align: left;
  color: rgba(var(--c-white-rgb), 0.92);
  text-shadow: var(--shadow-text);
}

[data-product] .hero-panel .page-hero::before {
  display: none;
}