/* ==========================================================================
   demo/b1-values.css — 大切にしていること（4 項目・アコーディオン）
   --------------------------------------------------------------------------
   ★この節は本文が 1,300 字を超える。全部並べると画面 4 枚分になり、
     直前のサービスセクションと合わせて «長文が続くだけ» の帯になる。
     閉じている間は «番号＋見出し» だけを見せ、開いた 1 つだけ本文を出す。

   ★開閉は <details name="values"> の素の機能。JS を書いていない。
     name を揃えると «同時にひとつだけ開く» がブラウザ側で成立する。
     name 未対応の環境では複数開くだけで、内容はすべて読める。
     読ませることが目的の節なので、JS 無しで完結する方を採った。
   ========================================================================== */

/* ==========================================================================
   導入 — 336 万通り
   --------------------------------------------------------------------------
   比較デモ demo/values/2/（02 / EDITORIAL FOLD）から採用。
   クラス名も向こうと同じにしてある（後で差分を取りやすくするため）。
   ※ b1 は values-concepts.css を読み込まないので名前の衝突は起きない。

   ★336 を大きく置いて «数の話» を一目で成立させ、本文は 1 段落だけ出す。
     残り 3 段落は畳む。導入 4 段落を全部並べると、それだけで «長い文章» の
     印象が付き、下のアコーディオンまで読んでもらえない。
   ========================================================================== */

.values-origin {
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  align-items: start;
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  padding-block: clamp(var(--space-6), 3vw, var(--space-10));
  border-block: var(--border-width) solid var(--color-border);
}

@media (min-width: 900px) {
  .values-origin {
    grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.55fr);
  }
}

.values-origin__number {
  display: flex;
  align-items: baseline;
  color: var(--navy-800);
}

/* ★line-height を 0.8 まで詰めている。数字だけなので下に空きが出ない */
.values-origin__number strong {
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: var(--fw-medium);
  line-height: 0.8;
  letter-spacing: -0.055em;
}

.values-origin__number span {
  margin-left: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}

/* 最初の 1 段落だけ常時表示。本文より少し強く組む */
.values-origin__copy > p {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  line-break: strict;
}

.values-origin details {
  margin-top: var(--space-6);
}

.values-origin summary {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: fit-content;
  color: var(--navy-700);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  list-style: none;
}

.values-origin summary::-webkit-details-marker {
  display: none;
}

.values-origin summary:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 4px;
}

/* ＋／− の丸。下の 4 項目は ＋→× なので、こちらは別の形にして役割を分けている */
.values-origin summary::before {
  width: 1.25rem;
  height: 1.25rem;
  content: "+";
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.875rem;
  line-height: 1.05rem;
  text-align: center;
}

.values-origin details[open] summary::before {
  content: "−";
}

/* 開いた 3 段落は、文章の流れを追いやすい 1 列で表示する */
.values-origin__more {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.values-origin__more p {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  line-break: strict;
}

/*
  «次の 4 つです» の一行。
  ★導入とリストの継ぎ目なので、本文より一段強く組む。
    ここが弱いと、下のアコーディオンが «急に現れた箱» に見える。
*/
.values__bridge {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}

@media (max-width: 767px) {
  .values__bridge {
    font-size: clamp(0.875rem, 3.72vw, 1rem);
    white-space: nowrap;
  }
}

/* ==========================================================================
   4 項目 — 左が索引、右が本文
   --------------------------------------------------------------------------
   比較デモ demo/values/1/（01 / FOCUS RAIL）から採用。
   クラス名も向こうと同じにしてある（後で差分を取りやすくするため）。
   ※ b1 は values-concepts.css を読み込まないので名前の衝突は起きない。

   ★<details> のアコーディオンから差し替えた。
     アコーディオンは開くと索引が下へ流れ、全体像が見えなくなる。
     左右に分けると、読んでいる間も «あと 3 つある／今どれを読んでいる» が
     常に見えている。1 項目 330 字前後を読ませる節なので、こちらが合う。
   ========================================================================== */

.values-rail {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
  border-block: var(--border-width) solid var(--navy-800);
}

/*
  ★左右に割るのは 1240px 以上だけ。900px からにしない。
    索引の項目名を 1 行に保つには索引幅が 480px 要る（後述）。
    900〜1239px で 2 列にすると索引が 355〜490px になり、
    02「完全オーダーメイドによる、過不足のない支援」が 2 行に折れる。
    1 列に落とせば項目名は全幅を使えるので、必ず 1 行に収まる。
*/
@media (min-width: 1240px) {
  .values-rail {
    /*
      ★索引の幅（三嶋指示で 550px → 511px）。
        下限は «項目名が 2 行にならないこと»。実測：
          最長の項目名（02・21 字）の字面 368px
          ＋ 左 padding 32（選択中）＋ 右 24 ＋ 番号列 40 ＋ gap 16 = 480px
        1 : 1.35 で 1440px 表示のとき 511px。余裕 31px。
        ★これ以上詰めると 02 が折れる。比率を触るときは
          「字面 368 + 112」を下回っていないか確かめること。
    */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    /* ★一番長い項目に合わせて高さを固定する。
       これが無いと、タブを切り替えるたびに下のセクションが上下に跳ねる。 */
    min-height: 38rem;
  }
}

/* ==========================================================================
   左：索引
   ========================================================================== */

@media (min-width: 1240px) {
  .values-rail__nav {
    border-right: var(--border-width) solid var(--color-border);
  }
}

.values-rail__nav button {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    color 280ms ease,
    background-color 280ms ease,
    padding-left 280ms ease;
}

/*
  選択中と hover。
  ★左の padding が伸びて «選ばれた行だけ前に出る» 動きにしている。
    色だけで示すより、どれを見ているかが分かりやすい。
  ★紺地に白。--color-text-muted（5.68:1）→ 白（17.90:1）で、
    どちらの状態も本文の基準 4.5:1 を満たす。
*/
.values-rail__nav button:hover,
.values-rail__nav button[aria-selected="true"] {
  padding-left: var(--space-8);
  color: var(--white);
  background: var(--navy-800);
}

@media (max-width: 767px) {
  .values-rail__nav button,
  .values-rail__nav button:hover,
  .values-rail__nav button[aria-selected="true"] {
    padding: 22px var(--space-4);
  }
}

.values-rail__nav button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.values-rail__nav .u-numeric {
  font-size: var(--text-xl);
  line-height: 1;
}

.values-rail__nav strong {
  font-size: var(--text-base);
  line-height: var(--lh-heading);
}

/* ==========================================================================
   右：本文
   ========================================================================== */

.values-rail__stage {
  position: relative;
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  padding-top: clamp(var(--space-6), 3.5vw, var(--space-12));
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-50), var(--white) 68%);
}

@media (max-width: 767px) {
  .values-rail__stage {
    padding-inline: var(--space-5);
  }
}

/*
  地に薄く敷く番号。

  ★「336」から「開いている項目の番号」に変えた（三嶋確認）。理由は 3 つ。
    ・336 は «多い» と言う数字。このパネルは «その一社にどう向き合うか» を
      書いている場所なので、地が «多さ» を主張すると本文と逆を向く。
    ・336 は同じセクションの上部に 160px で出ており、同一画面に 2 回出る
      （実測：見出し 284–412px、パネル 579px〜、ビューポート 900px）。
      同じ数字の反復は «強調» ではなく «使い回し» に見える。
    ・番号なら開いている項目に連動して変わる。状態を示す働きがある。

  ★«1（社）» も検討した。336 万通り → 向き合うのは 1 社、という筋は
    3 案で一番強い。ただし単体の「1」は 148px の細い一本線で数字に見えず、
    「1社」にすると 社 が Oswald に無く Noto へ落ちて、384px では
    書体の混在がはっきり出る。地に敷く文字としては成立しなかった。

  ★content は :has() で切り替えている。JS を足していない。
    開いているパネル（hidden でない .values-rail__panel）の data-no を見て 4 通り。

  ★rgba(9,4,89,0.035) は白地に対して 1.03:1。読ませる文字ではないので
    コントラスト基準の対象外（装飾テキスト）。上に載る本文の可読性も落とさない。
*/
.values-rail__stage::after {
  position: absolute;
  right: 0em;
  bottom: -0.24em;
  content: "01";
  color: rgba(9, 4, 89, 0.035);
  font-family: var(--font-numeric);
  font-size: clamp(12rem, 28vw, 24rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  pointer-events: none;
}

.values-rail__stage:has(.values-rail__panel[data-no="02"]:not([hidden]))::after {
  content: "02";
}

.values-rail__stage:has(.values-rail__panel[data-no="03"]:not([hidden]))::after {
  content: "03";
}

.values-rail__stage:has(.values-rail__panel[data-no="04"]:not([hidden]))::after {
  content: "04";
}

.values-rail__panel {
  position: relative;
  z-index: 1;
  max-width: 43rem;
  animation: values-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.values-rail__eyebrow {
  color: var(--navy-500);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.values-rail__eyebrow span {
  margin-right: var(--space-2);
  font-size: var(--text-3xl);
}

/* ★h3。セクションの h2（336 万通り…）の下なので階層を飛ばさない */
.values-rail__stage h3 {
  margin-block: var(--space-5) var(--space-8);
  color: var(--color-text-strong);
  font-size: var(--text-3xl);
  line-height: var(--lh-heading);
  text-wrap: balance;
  word-break: auto-phrase;
}

.values-copy p {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  text-wrap: pretty;
  line-break: strict;
}

.values-copy p + p {
  margin-top: var(--space-5);
}

/* 切り替えたことが分かる程度の動き。横 1rem だけ */
@keyframes values-panel-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .values-rail__nav button {
    transition: none;
  }

  .values-rail__panel {
    animation: none;
  }
}