/* ==========================================================================
   lower-page.css — 下層ページ共通の本文レイアウト

   header / gnav / NEXT / CONTACT / footer は既存コンポーネントをそのまま使う。
   ここではページ見出し、本文＋INDEXの2カラム、INDEXの外観だけを担当する。
   ========================================================================== */

.c-lower-head {
  padding-top: calc(var(--header-height) + var(--space-y-160));
  padding-inline: var(--space-side);
}

.c-lower-head__inner {
  display: flex;
  align-items: center;
  /* 幅が足りなくなったら日本語を次の行へ落とす。折り返さないと
     日本語側が語中で折れる（768pxの「お問い合わせ完／了」など） */
  flex-wrap: wrap;
  gap: var(--space-y-60) var(--space-x-60);
}

/* 英字はページ名の添え。見出し本体は日本語側（__jp）で、そちらが h1 になる。
   トップMV（p-index-mv__en / __copy）、セクション見出し（c-lower-section-head__en /
   __jp）、詳細の eyebrow と同じ並び。文字は英字のほうが大きいが、見出しレベルは
   文字サイズではなく役割で決める */
.c-lower-head__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-100);
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

.c-lower-head__jp {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-28);
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

/* NEWS / WORKS 詳細の見出し。桁はこの modifier では決めない。見出しは本文と
   同じ桁に載せるのが規則で、その本文の桁がページで違うため。
     NEWS詳細   … 本文が1280。__inner に c-lower-content を併記して合わせる
     WORKS詳細  … 本文が全幅。__inner は素のまま
   日付などの追加情報はページ側で足す */
.c-lower-head--detail {
  padding-top: calc(var(--header-height) + var(--space-y-120));
}

.c-lower-head--detail .c-lower-head__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-y-8) var(--space-x-8);
}

.c-lower-head__detail-eyebrow {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

.c-lower-head__detail-title {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-36);
  line-height: 1.75;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

.c-lower-layout {
  width: 100%;
  padding: var(--space-y-160) var(--space-side) var(--space-y-240);
}

/* 上端はページ種別で決まる。
   --list は先頭要素が自前で上パディングを持つ場合に、そのぶんを引いて
   文字の始まりを他の下層ページへ揃える。引かれる側は news-item.css の
   c-news-item__link の行内パディング。 */
.c-lower-layout--list {
  padding-top: calc(var(--space-y-160) - var(--space-y-40));
}

.c-lower-layout--detail {
  padding-top: var(--space-y-80);
}

/* 下端は「末尾に操作要素があるか」で決まる。ページ種別とは別の軸なので
   modifier では持たせない。LOAD MORE は押し切ると hidden が付いて消えるため、
   そこで 160 → 220 へ自動で戻る。
   ※ :has() は引数のうち最も高い詳細度を加算するので、この宣言は (0,2,0) になる。
     SP の --detail（(0,1,0)）では上書きできないため、SPブロック側にも
     同じ形の :has() を置いて詳細度を揃えてある。片方だけ触らないこと */
.c-lower-layout:has(
  .c-back-to-list,
  .c-load-more:not([hidden])
) {
  padding-bottom: var(--space-y-160);
}

.c-lower-layout__inner {
  width: 100%;
}

.c-lower-layout__inner--index {
  display: grid;
  grid-template-columns:
    calc(200px + var(--space-x-120))
    minmax(0, 1fr);
}

.c-lower-layout__main {
  position: relative;
  z-index: 0;
  min-width: 0;
}

.c-lower-content {
  width: 100%;
  max-width: var(--lower-content-max);
  margin-inline: auto;
}

/* 本文が数行しかないページ用。桁を中身の幅まで詰めて画面中央へ置く。
   上限を残すのは、1行が長いときに桁いっぱいまで伸びないようにするため。
   行の中央揃えはPCだけ。SP側で左揃えへ戻している */
.c-lower-content--center {
  width: fit-content;
  max-width: min(100%, var(--lower-content-max));
  text-align: center;
}

/* INDEX列を持たない1カラムページ用。本文が横いっぱいに使えるので、
   桁の上限を --lower-single-max まで広げる（tokens.css が上限を2つ持つのに
   受け側が --lower-content-max の1本しか無く、各ページで再実装されていた）。
   NEWS一覧・CONTACT が使う */
.c-lower-content--single {
  max-width: var(--lower-single-max);
}

.c-lower-layout__aside {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-right: var(--space-x-120);
}

/* --- lower-page section heading --------------------------------------- */
.c-lower-section-head {
  display: flex;
  align-items: center;
  /* 横並びに収まらなくなったら日本語を次の行へ落とす。
     折り返さないと日本語側が語中で折れる（c-lower-head__inner と同じ理由）。
     --stack は flex-direction: column なので影響を受けない */
  flex-wrap: wrap;
  gap: var(--space-y-40) var(--space-x-40);
}

.c-lower-section-head__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: 1.25;
  letter-spacing: 0.07em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

.c-lower-section-head__jp {
  margin-top: 0;
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-24);
  line-height: 1.5;
  letter-spacing: 0.15em;
  font-feature-settings: "palt" 1;
}

/* 縦組みの見出し（SERVICE / RECRUIT）。ABOUT の横並びと本体を共有する */
.c-lower-section-head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-y-20) var(--space-x-20);
}

/* --- lower-page 2カラムセクション ---------------------------------------
   左に見出し・要点、右に本文を置く下層の基本セクション。
   セクション間隔と左右の内側余白は、各ページ側の担当。 */
.c-lower-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

/* --- lower-page メッセージページ ------------------------------------------
   404 と お問い合わせ完了。見出しの下に数行の本文と戻る導線だけを置く。
   2ページで責務・構造・見た目が同じなので、ページ固有CSSへは複製しない。
   c-lower-layout__inner と併記して使う */
.c-lower-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 本文と戻る導線の間。ページ末尾の c-view-more 系の上余白は
     NEWS / WORKS 一覧の LOAD MORE、NEWS詳細の BACK to LIST と同じ 120 で揃える。
     SPで上書きしないのも同じ（--space-y-120 がSP幅で縮む） */
  gap: var(--space-y-120) var(--space-x-120);
}

.c-lower-message__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-32) var(--space-x-32);
}

/* CONTACTのリード（p-contact__lead）と同じ級数・組版 */
.c-lower-message__lead {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-32);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

/* 戻る導線。align-items: center の縦並びで潰れないように */
.c-lower-message__back {
  flex-shrink: 0;
}

/* --- lower-page 本文組版 -------------------------------------------------
   下層本文の基準。見出し・リード・キャプションは各ページで別に指定する。 */
.c-lower-copy {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-16);
  line-height: 2.5;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

/* --- lower-page data table -------------------------------------------- */
.c-lower-table {
  width: 800px;
  max-width: 100%;
}

.c-lower-table__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-y-20) var(--space-x-20);
  align-items: center;
  padding: var(--space-y-32) 0 calc(var(--space-y-32) - 1px);
  border-bottom: 1px solid transparent;
  background-image: var(--line-dash-x);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  font-family: var(--font-jp);
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.15em;
  font-feature-settings: "palt" 1;
}

.c-lower-table__row > dt {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}

.c-lower-table__row strong {
  font-weight: 700;
}

.c-lower-table a {
  color: var(--color-brand);
}

.c-lower-rule {
  position: relative;
  width: 100%;
  height: 1px;
  border: 0;
}

.c-lower-rule::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-image: var(--line-dash-x);
}

/* --- page index --------------------------------------------------------- */
.c-page-index {
  position: sticky;
  top: calc(var(--header-height) + var(--space-y-80));
  width: 200px;
  overflow: hidden;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
}

.c-page-index__toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-y-8) var(--space-x-8);
  /* 20px icon（＋／－） + 上32px + 下28px = Figma の 80px */
  padding: var(--space-y-32) var(--space-x-32) var(--space-y-28);
  cursor: pointer;
}

.c-page-index__toggle::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background-image: var(--line-dash-x);
  transition: opacity var(--dur) var(--ease);
}

.c-page-index__toggle[aria-expanded="false"]::after {
  opacity: 0;
}

.c-page-index__toggle:focus-visible {
  outline-offset: -2px;
}

.c-page-index__list-icon {
  display: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.c-page-index__list-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.c-page-index__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: left;
  color: rgba(0, 0, 0, 0.3);
}

.c-page-index__state {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.c-page-index__state img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease);
}

.c-page-index__state-plus {
  opacity: 0;
}

.c-page-index__toggle[aria-expanded="false"] .c-page-index__state-minus {
  opacity: 0;
}

.c-page-index__toggle[aria-expanded="false"] .c-page-index__state-plus {
  opacity: 1;
}

.c-page-index__panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.c-page-index__panel[aria-hidden="true"] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.c-page-index__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.c-page-index__panel-body {
  padding: var(--space-y-32) var(--space-x-32) var(--space-y-36);
}

.c-page-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-20) var(--space-x-32);
}

.c-page-index__link {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: 1.5;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

/* ==========================================================================
   SP

   下層にSPカンプは無い。余白は docs/sp-strategy.md 決定14 の既定リズムに従い、
   構造だけを1カラムへ組み替える。文字は原則トークンのまま使う。
   ========================================================================== */
/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   INDEXを本文の上へ出す。PCは左に 200px + 追い込み120px（実寸284px）を
   固定で取る2カラムで、1024pxでは本文が656px、768pxでは400pxまで痩せる。
   組版が成立しないのはこの1点が効いているので、まずここを外す
   （調査は docs/tablet-audit.md の B-1）。
   DOM順が aside → main なので、1カラムにすればそのまま本文の上に来る。
   2カラムの前提が消えるので aside の右padding と INDEX の追従も外す。

   INDEXと本文の間は、ブロック間の既定（--space-y-48）では足りない。
   上が --space-y-120（レイアウトの上padding 96px）なので、38.4pxだと
   本文がINDEXにぶら下がって見える。--space-y-80（64px）で切り離す。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .c-lower-layout__inner--index {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-96) var(--space-x-96);
  }

  .c-lower-layout__aside {
    padding-right: 0;
  }

  /* 本文の上に置く以上、追従する意味が無い。幅も内幅いっぱいへ */
  .c-page-index {
    position: static;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .c-page-index__list {
    flex-flow: row wrap;
  }
}

@media (max-width: 767px) {
  /* --- 見出し ------------------------------------------------------------ */
  /* 詳細ページ（--detail）もこの値で受ける。PC側は 160 と 120 で差を付けて
     いるが、SPでは両方 96 に揃える。ここは --detail の宣言（ファイル上部）
     より後ろにあり、詳細度も同じなので上書きが効く */
  .c-lower-head {
    padding-top: calc(var(--header-height) + var(--space-y-96));
  }

  /* 英字と日本語を横に並べる幅が無い */
  .c-lower-head__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-y-16) var(--space-x-16);
  }

  /* SPではPCの --fs-100 から一段下げる */
  .c-lower-head__en {
    font-size: var(--fs-80);
  }

  /* --- 本文レイアウト ---------------------------------------------------- */
  /* 上はPCの160、下は240の落とし先。SPでは 96 / 120 で受ける */
  .c-lower-layout {
    padding-block: var(--space-y-96) var(--space-y-120);
  }

  /* --list は下端を持たないので、base の 120 がそのまま残る */
  .c-lower-layout--list {
    padding-top: calc(var(--space-y-96) - var(--space-y-40));
  }

  .c-lower-layout--detail {
    padding-block: var(--space-y-80) var(--space-y-120);
  }

  /* 末尾に操作要素があるページの下端。PC側の :has() が (0,2,0) で、
     上の modifier（(0,1,0)）では負けるため、同じ形で書き直す。
     PC は 160 → 押し切ると 220 と広がるが、SPはどちらも 120 で揃える。
     SPの既定リズム（決定14）では、この位置に 160 と 120 の差を作る意味がない */
  .c-lower-layout:has(
    .c-back-to-list,
    .c-load-more:not([hidden])
  ) {
    padding-bottom: var(--space-y-96);
  }

  /* --- メッセージページ ---------------------------------------------------- */
  .c-lower-content--center {
    text-align: left;
  }

  .c-lower-message__body {
    gap: var(--space-y-24) var(--space-x-24);
  }

  /* --- セクション見出し --------------------------------------------------- */
  .c-lower-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-y-16) var(--space-x-16);
  }

  /* --- 2カラムセクション --------------------------------------------------- */
  .c-lower-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-48) var(--space-x-48);
  }

  /* --- 表組み ------------------------------------------------------------- */
  /* 見出し列180pxを取ると本文が読めないので、dt / dd を縦積みにする */
  .c-lower-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-10) var(--space-x-10);
    align-items: start;
    padding-block: var(--space-y-24) calc(var(--space-y-24) - 1px);
  }

  /* --- INDEX -------------------------------------------------------------- */
  /* 本文の上へ出すのは中間層と共通（上の1023pxブロック）。ここは余白だけ */
  .c-page-index__toggle {
    padding: var(--space-y-24) var(--space-x-24) var(--space-y-20);
  }

  .c-page-index__panel-body {
    padding: var(--space-y-28) var(--space-x-24) var(--space-y-28);
  }

  .c-page-index__list {
    gap: var(--space-y-16) var(--space-x-16);
  }
}