@charset "utf-8";

/* =============================================================================
   page-shell.css — ページ見出しを左カラムに置く版面（2026-08-31）
   -----------------------------------------------------------------------------
   enqueue 順: … → common → **page-shell** → 各ページ CSS。
   ページ固有の中身（Company の差し替え器、Service / Recruit / Contact の本文など）は各ページ CSS が持つ。

   ページ見出しの帯（`.c-page-heading`）を上に出す代わりに、見出し・言語切替・
   その場のナビをまとめて左カラムへ入れ、丸ごと sticky で貼り付ける。
   スクロールしても左カラムは残り、本文だけが進む。

   版面は Topics の「1340 シェル + 250px 右レール」（`css/sidebar_style.css`）の
   左右反転。`#content` だけ 1340 系にして、増えた幅を左カラムが使う。
   本文カラムは従来どおり 960 系に収まる。

   左カラムはロゴの左端から始まり、罫は 200px（2026-10-06 デザイン FB で 290 → 220、2026-10-21 ユーザー判断で 200）。
   本文は「左カラムと本文の間」と「本文の右から器の右端まで」が等しくなる位置に置く（2026-10-20 ユーザー判断。
   1440px 以上で 90 / 90（罫 220px の頃は 80 / 80）。それまでは間 24px・右 136px で、見出しが左カラムに密着して見えた）。
   本文 960 はヘッダーの器の中央より 100px 右へ寄るが、全体で見るとこのほうがきれい（同日ユーザー判断）。
   2026-09-18〜09-30 は罫 150px で本文を器の中央に乗せていた。
   ============================================================================ */

body.site-page {
  --page-shell-gap: var(--space-md);

  /* レールの幅＝罫の長さ。200px（2026-10-21 ユーザー判断「少し削ってよい」。2026-10-06 デザイン FB「線も短く」で 220px、2026-09-30 は 290px）。
     **文字量ではなく版面が決める**ので、全ページで同じ長さの罫になる。
     ⚠️ 一番長い項目（Service の「コミュニケーションデザイン」13字 × 14px = 182px）より短くしない。 */
  --page-shell-rail: 200px;

  /* 左カラムと本文の間の下限（24px）。間と本文の右の余白は残りを等しく分け合う（下の .page-shell）。 */

  /* 左カラムをロゴの箱より内側へ入れる量。罫の左端をロゴの箱の左端（＝ガター端）に
     揃える（2026-09-30 ユーザー指定）。以前は G の丸みを見込んで 8px 内側へ入れていた。 */
  --page-shell-inset: 0px;

  /* 左カラムの色。ヘッダー nav と同じ3段で、非選択 → 現在地（本文インク #4c4948）→
     hover（#2b2a29）の順に濃くする。現在地は **文字色 + 罫の濃さ**で示す
     （weight も太さも足さない。下の各規則を参照）。
     ⚠️ 現在地をロゴ（実測 #666666）と同値で止めないこと。2026-08-31〜10-01 はそうして
     いたが、非選択 #717171 との差が 5.41:1 対 4.60:1 しかなく、文字の濃淡で現在地が
     読み取れなかった（2026-10-01 ユーザー指摘）。
     ⚠️ 薄い側の下限は AA。#f8f8f8 上で #717171 が 4.60:1 で、これ以上は薄くできない
     （#8c8c8c は 3.17:1 で落ちる）。差を広げるときは濃い側を動かす。 */
  --page-shell-ink: var(--color-heading);
  --page-shell-hover: var(--color-link-hover);
  --page-shell-muted: #717171;

  /* 先頭（ページ見出し）18px / 続きの項目 14px（2026-10-06 デザイン FB。項目が本文 16px と
     同じ大きさで、本文より大きく見えていた。2026-09-30 は 20 / 16px）。
     ⚠️ 1024 以下の横一列は 16px のまま（PC への FB なので広げない）。先頭項目も同じ値に落とす
     （横一列で寸法差が凸凹に見える）。 */
  --page-shell-size: 14px;
  --page-shell-size-primary: 18px;

  /* 罫は項目の**下**にあるので、文字は自分の罫に寄せ、余白は上に置く。
     ⚠️ 上下を同値にすると「均一」ではなく**下が広い**見え方になる。line-height の
     半行分が下に付くため、padding 12/12 でも実測は上 13px / 下 15.4px だった。
     数値ではなく描画位置で合わせること（Range で文字の実描画範囲を測る）。
     下は文字の行の箱の下端から罫まで 6px（2026-09-30 ユーザー指定）。 */
  --page-shell-pad-top: var(--space-md);
  --page-shell-pad-bottom: 6px;
}

/* このシェルを使うページだけ 1340 系の器にする。
   ⚠️ 幅だけでなく **gutter もここが持つ**。ページ CSS 側に
   `#content { padding: 0 }` を書いているページ（Recruit / Contact）があり、
   幅だけ渡すと左カラムが画面端に貼り付く。 */
#content:has(.page-shell-page) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-wide-box);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ページ内アンカーの着地点。詰めて着地すると見出しが画面上端に貼り付く。 */
.page-shell-page :target {
  scroll-margin-top: var(--space-xl);
}

/* ⚠️ ヘッダーとの間隔は `--space-header-gap`（`#header-wrapper` の高さ）が全ページ
   共通で持つ。ここに padding-block-start を足さないこと。足すとこのシェルを使う
   ページだけ本文開始位置が下にずれ、Topics / Works と揃わなくなる（実際に 16px
   ずれていた）。 */
/* 列は「左カラム / 間 / 本文 / 右の余白」。間と右の余白が同じ 1fr なので、置ける限り両者は等しい
   （1440px 以上で 80 / 80、1280px で 63 / 63）。間だけ `--page-shell-gap`（24px）の下限を持つ。
   ⚠️ 本文の列は `minmax(0, var(--container))` にする。`var(--container)` を直に書くと
   1025〜1096 あたりで器からはみ出す。
   ⚠️ 幅が足りなくなると間が下限で止まり、右の余白が 0 まで減ってから本文が縮む（1100px で間 24・右 0）。
   1024 の畳みとは別に BP を足さないための形。 */
.page-shell {
  display: grid;
  grid-template-columns:
    var(--page-shell-rail)
    minmax(var(--page-shell-gap), 1fr)
    minmax(0, var(--container))
    minmax(0, 1fr);
  column-gap: 0;
}

/* ⚠️ 幅は**ここで持つ**（トラックに stretch させない）。罫の長さ = この幅 − inset*2 で、
   全ページ同じ長さになる。間は2列目が受け持つので column-gap は 0。 */
.page-shell__rail {
  grid-column: 1;
  width: var(--page-shell-rail);
  padding-inline: var(--page-shell-inset);
}

.page-shell__body {
  grid-column: 3;
  min-width: 0;
}

/* ⚠️ sticky は**グリッド項目ではなくその中の箱**に付ける。
   .page-shell__rail は行の高さまで stretch するので、そこに sticky を置くと
   「動く余地がゼロ」になって一度も貼り付かない（align-items: start にすると
   今度は sticky の入れ物が縮んで同じく動かない）。stretch した器 +
   その中の短い sticky、という組でしか成立しない。 */
.page-shell__rail-inner {
  position: sticky;
  top: var(--space-lg);
}

/* --- 左カラムの中身（見出し + その場のナビ）------------------------------- */
/* 上罫は引かない。先頭項目はページ見出しなので、その上に線があると
   「何かの続き」に見える。区切りは各項目の下罫だけが持つ。 */
.page-shell__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-shell__item {
  border-bottom: 1px solid var(--color-line);
}

/* 先頭項目はページ見出し（h1）を兼ねる。h1 自身は素の箱にして、
   見え方はリンク（またはリンクでない span）側で持つ。 */
.page-shell__heading {
  margin: 0;
  font: inherit;
}

/* 先頭項目の上には罫が無く、ここがカラムの先頭。上を広げると見出しだけ下がって
   本文カラム（ヒーロー）の上端とズレるので、**上は詰めたまま下だけ寄せる**。
   上の余白は 0（2026-10-06 に 8 → 0。ヘッダー下の gap を 48 にしたぶん上げ、字面の上端を 54px、ヒーローの上端 48px に寄せた）。 */
.page-shell__item--primary .page-shell__link {
  padding-block: 0 var(--page-shell-pad-bottom);
  font-size: var(--page-shell-size-primary);
  letter-spacing: 0.02em;
}

.page-shell__link {
  position: relative;
  display: block;
  padding-block: var(--page-shell-pad-top) var(--page-shell-pad-bottom);
  color: var(--page-shell-muted);
  font-family: var(--font-latin);
  font-size: var(--page-shell-size);
  font-weight: 400;
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease);
}

/* 現在地の罫。**出方は wipe ではなく fade**（transform を持たない）。
   切替のたびに左から線が伸びると、本文のクロスフェードより先にレールが目立つ。
   ⚠️ **太さは区切り線と同じ 1px**。ここだけ 2px にすると現在地の行だけ罫が太くなり、
   細い縦カラムの中で悪目立ちする。現在地は太さではなく**罫の濃さ**が示す
   （区切り線 #e2e2e2 に対して #4c4948）。 */
.page-shell__link::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--page-shell-ink);
  content: "";
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

/* ⚠️ 行き先が無いページの見出しは a ではなく span で出す。
   反応するのはリンクだけにする。
   hover は現在地より一段濃く。現在地の項目に触れたときも反応が見える。 */
a.page-shell__link:hover {
  color: var(--page-shell-hover);
}

/* ⚠️ 現在地に weight を足さない。ヘッダーの nav が weight 400 のまま色だけで
   現在地を示しているので、その真下にあるこのカラムだけ太らせると揃わない。 */
.page-shell__link[aria-current] {
  color: var(--page-shell-ink);
}

.page-shell__link[aria-current]::after {
  opacity: 1;
}

.page-shell__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* --- 言語切替（持つページだけ）-------------------------------------------- */
/* レールの項目とは役割が違う。上の各行は「このページ / このセクションの中の
   移動先」だが、これは**同じ地点の別バージョンへ渡る**もの。罫も持たないので、
   リストの続きに見えないところまで離して注記の位置に置く。

   ⚠️ **数値ではなく罫からの描画距離で決めること**。レール自身の行間隔は
   「罫 → 次の文字 25px」（`--page-shell-pad-top` 24 + half-leading）。
   `--space-sm`(16) だと 14px / `--lh-snug` の half-leading 2.8 を足しても約 20px で、
   **他の行より詰まる**。それで「罫の無い最終行」に見えていた。
   `--space-lg`(32) で約 37px。行間隔より広いが 1.5 行分。 */
.page-shell__rail .lang-menu {
  margin-top: var(--space-lg);
}

.page-shell__rail .lang-menu p {
  color: var(--page-shell-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ⚠️ 言語切替は p に色を当てるだけでは足りない。common.css が
   `.lang-menu p a` と `.lang-menu p .current`（= --color-heading）に直接色を持って
   いるので、現在言語の「JP」だけ本文インクのまま残る。ここも同じ2色に揃える。 */
.page-shell__rail .lang-menu p a {
  color: var(--page-shell-muted);
}

.page-shell__rail .lang-menu p .current {
  color: var(--page-shell-ink);
}

.page-shell__rail .lang-menu p a:hover {
  color: var(--page-shell-hover);
}

/* --- 1024 以下は左カラムを本文の上へ横一列で畳む --------------------------- */
@media (max-width: 1024px) {
  body.site-page {
    /* 横一列になるので、下の本文と左端を揃える。ロゴとの光学調整は要らない。 */
    --page-shell-inset: 0;
    /* 縦のカラム（PC）だけ 14px に落とした（2026-10-06）。横一列は従来の 16px のまま。 */
    --page-shell-size: 16px;
    /* 上の余白が行そのものを押し下げるので、一段控えめにする（2026-10-06 に 16 → 8。ヘッダー下の gap を 48 にしたぶん）。 */
    --page-shell-pad-top: var(--space-2xs);
  }

  /* ここから下は 1340 の器を持つ意味が無くなるので幅の指定も外す
     （viewport が器より狭く実害は無いが、宣言を残さない）。 */
  #content:has(.page-shell-page) {
    max-width: calc(var(--container) + 2 * var(--gutter));
  }

  /* ページ内アンカーの着地点。sticky した左カラムの下端より下に置く。 */
  .page-shell-page :target {
    scroll-margin-top: var(--space-lg);
  }

  .page-shell {
    display: block;
  }

  /* ⚠️ `display: block` にしても `width` は効き続ける。ほどかないとレールが 166px の
     まま横一列を潰し、メニューが縦に折り返す（実測 6行）。
     同じ理由で `justify-self` をレールに持たせないこと。Chrome は block レイアウトの
     block-level box にも効かせるので、こちらも漏れて fit-content に縮む。 */
  .page-shell__rail {
    width: auto;
  }

  /* 見出し + ナビを1行に畳んで、言語切替を同じ行の右へ。 */
  .page-shell__rail-inner {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-line);
  }

  .page-shell__rail .lang-menu {
    margin-top: 0;
    padding-block: var(--space-2xs) var(--page-shell-pad-bottom);
  }

  .page-shell__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-lg);
  }

  .page-shell__item {
    border-bottom: 0;
  }

  .page-shell__link {
    padding-block: var(--page-shell-pad-top) var(--page-shell-pad-bottom);
  }

  /* 横一列では寸法差が凸凹に見えるだけなので、先頭項目も他と同じ大きさにする
     （主役であることは並び順と現在地表示が示す）。 */
  .page-shell__item--primary .page-shell__link {
    padding-block: var(--page-shell-pad-top) var(--page-shell-pad-bottom);
    font-size: var(--page-shell-size);
  }

  /* ナビを持たないページは項目が直下に来る。放っておくとグリッド列の幅いっぱいに
     伸びて、現在地の下線だけがナビを持つページより長くなる。 */
  .page-shell__rail-inner > .page-shell__item {
    justify-self: start;
  }

  /* ページ内アンカー（Service / Recruit）は横一列に詰めると見づらいので出さない
     （2026-09-30 ユーザー判断）。見出しは残す。ページ先頭へ戻るリンクであると同時に、
     いまどのページにいるかを示す現在地の表示でもある。言語切替も同じ行の右に残る。
     Company 系のレール（.aboutus-rail）は別ページへの導線なので、そのまま全部出す。 */
  .page-shell__nav .page-shell__item:not(.page-shell__item--primary) {
    display: none;
  }
}

/* --- スマホ（ヘッダーがモバイルの寸法になる 790 以下）は上を詰める -------------- */
/* 見出し行は文字の上に --page-shell-pad-top（8px）のタップ領域を持つので、共通の gap
   （--space-header-gap-compact）からその分を引き、最初の文字の位置を Topics などと揃える
   （2026-10-01。2026-09-30 は gap 24px）。
   ⚠️ gap は固定ヘッダーの面の伸び（790 以下の --header-reveal-extend = 8px）より狭くしない。
   狭いと面が本文の先頭に被る（css/header_style.css）。 */
@media (max-width: 790px) {
  body.site-page:has(.page-shell-page) > #header-wrapper {
    height: calc(var(--mobile-header-height) + var(--space-header-gap-compact) - var(--page-shell-pad-top));
  }

  body.site-page:has(.page-shell-page) {
    --page-shell-pad-top: var(--space-2xs);
  }

  .page-shell__rail-inner {
    margin-bottom: var(--space-md);
  }
}