/* ==========================================================================
   demo/b1-method.css — 中小企業の「勝ち筋モデル」
   --------------------------------------------------------------------------
   5 つの設計要素を縦に並べる。

   ★横に 5 列は採らない。
     1 要素あたり 英語・日本語・問い・説明文 の 4 つを持つので、
     5 列にすると 1 列 200px 前後になり、説明文が 8 文字前後で折り返す。
     読ませる文章が入る以上、縦に流すしかない。

   ★左カラムの幅は課題セクション（b1-issues.css）と同じ 200px。
     同じページで「左に見出し、右に中身」の形が 2 回出るので、
     始点が揃っていないと別の作りに見える。

   ★順序に意味がある。課題を特定してからゴールを決める、という順番そのものが
     主張なので、番号は装飾ではなく情報。ol で組んでいる。
   ========================================================================== */

/* 実績帯と勝ち筋モデルに同じ光源を置き、紺色の面に奥行きを持たせる。 */
.stats-band.on-inverse,
.method.on-inverse {
  background-color: var(--navy-950);
  background-image:
    radial-gradient(circle at 14% -10%, rgba(255, 255, 255, 0.13), transparent 36%),
    radial-gradient(circle at 88% 110%, rgba(82, 76, 190, 0.34), transparent 42%),
    linear-gradient(145deg, var(--color-bg) 0%, var(--navy-950) 74%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* 背景文字は低い位置を保ちつつ、次のフッターへはみ出した部分だけを切る。 */
.method.on-inverse {
  overflow: hidden;
}

.method .sec-head__label,
.method .sec-head__lead {
  color: var(--navy-200);
}

.method .sec-head__label::before {
  background-color: var(--navy-300);
}

.method .sec-head__title {
  color: #fff;
}

.method .accelerator {
  margin-top: 0;
  padding: 0;
  /*
    ★overflow は hidden に戻さないこと。
      __flare / __target はセクションの枠外に出る前提で置いてあり、
      hidden にすると光の演出ごと消える。
      背景の KACHISUJI だけを切りたいので、切るのは ::before 側でやる。
  */
  overflow: visible;
  box-shadow: none;
}

/* 背景文字を右へ揃え、セクション下端へ潜らせてフッターとの境界で見切らせる。 */
.method .accelerator::before {
  right: 0;
  left: auto;
  bottom: -0.55em;
  width: 100%;
  text-align: right;
}

.method .accelerator__visual {
  margin-top: 0;
}

.method .accelerator__rail {
  padding: 1.5rem 5.2rem 0 0;
}

.method .accelerator__trigger.is-active {
  transform: none;
}

.method .accelerator__trigger:hover,
.method .accelerator__trigger:focus-visible {
  transform: none;
}

.method .accelerator__trigger::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--accelerator-trace-angle),
    transparent 0 68%,
    rgba(119, 114, 255, 0.35) 74%,
    #fff 82%,
    rgba(119, 114, 255, 0.7) 87%,
    transparent 94%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.method .accelerator__trigger:hover::before,
.method .accelerator__trigger:focus-visible::before {
  opacity: 1;
  animation: accelerator-border-trace 1.15s linear 1 both;
}

.method .accelerator__trigger::after {
  top: 1.6rem;
  right: 1.3rem;
  bottom: auto;
}

.method .accelerator__eyebrow span:nth-child(2) {
  text-indent: 3px;
}

/*
  カードの領域名。
  ★三嶋指示で少し大きく。16.6px → 17.6px（+6%）。
    実測：カードの «文字が入る幅» は 150px しかない。
    18.4px を超えると「明確な／ゴール設計」「やりきる力の／構築」まで
    2 行になってしまう。17.8px が 03 だけが折れる上限で、
    余裕を見て 17.6px（1.1rem）に置いた。ここを上げるならカード幅も広げること。

  ★元は clamp(.85rem, 1.15vw, 1.15rem) だった。
    カードの幅はコンテナ上限（1120px）で頭打ちになるのに文字だけ vw で
    伸び続けるため、1600px 以上では 18.4px に達して 02・05 が折れていた。
    上限を 1.1rem に下げて、広い画面でも折り返しが変わらないようにしている。

  ★auto-phrase / line-break は name_lines の無い 01・04 の «保険»。
    02・03・05 は name_lines の区切りでだけ折れる（glcl_lines_html()。Chrome 以外でも同じ位置）。
*/
.method .accelerator__trigger strong {
  font-size: clamp(1rem, 1.45vw, 1.1rem);
  word-break: auto-phrase;
  line-break: strict;
}

/*
  name_lines の 1 行ぶんは中で折らない（2026-10-15）。
  ★900〜950px でカードの文字幅が 98px まで縮み、«やりきる力の»（6 字・約 99px）が 1px 足りず
    «やりきる／力の／構築» と 3 行になっていた。はみ出しは 1px 程度でカードの余白に収まる。
*/
.method .accelerator__trigger .u-line {
  white-space: nowrap;
}

@property --accelerator-trace-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes accelerator-border-trace {
  to {
    --accelerator-trace-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method .accelerator__trigger:hover::before,
  .method .accelerator__trigger:focus-visible::before {
    animation: none;
  }
}

/* 終点案01＋02：照準リングの中心へ、細い光線と白い閃光を収束させる。 */
/*
  光線。
  ★transform-origin を right center に変えている（既定は center）。
    center のままだと «回転の支点が真ん中» なので、
    画面が広くなってビームが長くなるほど右端が持ち上がる。
    的（.accelerator__target）は右上から rem で固定なので、
    ずれ幅が画面幅ごとに変わっていた（1440px で 7px 上にずれていた）。
    支点を右端に固定すると、長さが変わっても右端の位置が動かない。

  ★inset の上と右は «ビームの右端 = 的の中心» になる値。
    的は top: -1rem / right: -3rem / width: 10rem なので、その中心は
    .accelerator__visual の «上端から 4rem・右端から 2rem»。
    ビームは高さ 0.28rem なので上は 4rem - 0.14rem = 3.86rem、右は 2rem。
    右端で終端させているので «延長線のずれ» が原理的に出ない。
    3rem で止めると 17px ぶん延長することになり、8 度のぶん 2px 高く外れた。
    最後の 1rem ほどは光のにじみに沈むので、線の先端は見えない。
  ★的かビームの寸法を変えたら、この 3.86rem / 2rem も計算し直すこと。
*/
.method .accelerator__beam {
  inset: 3.86rem 2rem auto 3%;
  transform-origin: right center;
  height: 0.28rem;
  background: linear-gradient(90deg, rgba(112, 108, 255, 0.16), #7772ff 55%, #fff);
  clip-path: none;
  opacity: 1;
  box-shadow: 0 0 0.75rem rgba(119, 114, 255, 0.45);
}

.method .accelerator__target {
  top: -1rem;
  right: -3rem;
  width: 10rem;
  border-color: rgba(255, 255, 255, 0.3);
}

.method .accelerator__target::before {
  inset: 22%;
}

.method .accelerator__target::after {
  inset: 42%;
  background: transparent;
  box-shadow: none;
}

.method .accelerator__flare {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  right: auto;
  width: 0.85rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0.65rem #fff,
    0 0 2.2rem 0.8rem #7772ff,
    0 0 4.5rem 1.8rem rgba(119, 114, 255, 0.28);
  animation: accelerator-flare-breathe 3.6s ease-in-out infinite;
}

/* 光源の位置は固定したまま、光量とにじみだけを緩やかに呼吸させる。 */
@keyframes accelerator-flare-breathe {
  0%,
  100% {
    opacity: 0.84;
    filter: brightness(0.94);
    transform: translate(-50%, -50%) scale(0.94);
    box-shadow:
      0 0 0.5rem rgba(255, 255, 255, 0.88),
      0 0 1.8rem 0.65rem rgba(119, 114, 255, 0.78),
      0 0 3.8rem 1.45rem rgba(119, 114, 255, 0.22);
  }

  50% {
    opacity: 1;
    filter: brightness(1.12);
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
      0 0 0.8rem #fff,
      0 0 2.6rem 0.95rem rgba(119, 114, 255, 0.95),
      0 0 5.2rem 2rem rgba(119, 114, 255, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .method .accelerator__flare {
    animation: none;
  }
}

/* 光線の8度に合わせ、各カードの中心を約1.875remずつ上げる。 */
.method .accelerator__rail li:nth-child(1) { transform: translateY(7.5rem); }
.method .accelerator__rail li:nth-child(2) { transform: translateY(5.625rem); }
.method .accelerator__rail li:nth-child(3) { transform: translateY(3.75rem); }
.method .accelerator__rail li:nth-child(4) { transform: translateY(1.875rem); }

/*
  左にリスト、右に渦。

  ★器の名前は .method__layout。
    最初 .method__body にしたが、それは既に各ステップの説明文
    （<p class="method__body">）で使っている名前だった。
    そちらに付いている max-width: var(--measure) を器が拾い、
    1120px あるはずの幅が 714px に潰れた。
*/
.method__layout {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}

@media (min-width: 1024px) {
  .method__layout {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: clamp(var(--space-5), 2vw, var(--space-8));
    /*
      ★center ではなく start。
        リストは 5 項目で 1000px を超えるのに対し、図の高さは 260px 前後。
        center にすると図がリストの真ん中に置かれ、読み始めと読み終わりの
        どちらでも画面の外にいる。start + sticky で、リストを読んでいる間
        ずっと右に残す。
    */
    align-items: start;
  }

  .method__item {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: clamp(var(--space-6), 2.5vw, var(--space-9));
  }

  .method__no {
    font-size: var(--text-xl);
  }

  .method__key {
    font-size: var(--text-xs);
  }

  .method__name,
  .method__q {
    font-size: var(--text-lg);
  }

  .method__body {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
  }
}

.method__list {
  padding: 0;
  list-style: none;
}

.method__item {
  display: grid;
  gap: var(--space-4);
  padding-block: clamp(var(--space-8), 4vw, var(--space-12));
  border-top: var(--border-width) solid var(--color-border);
}

.method__item:last-child {
  border-bottom: var(--border-width) solid var(--color-border);
}

@media (min-width: 900px) {
  .method__item {
    /* 渦を右に置いたぶんリストが狭くなったので 200 → 160px に詰めた */
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }
}

@media (max-width: 899px) {
  .method .accelerator {
    margin-inline: 0;
    /* ★hidden だと背景の KACHISUJI が図の下端（05 の項目の下）で切れ、上 4 割しか見えなかった（2026-10-16）。
         PC と同じく、節（.method は overflow: hidden）の下端で見切らせる。横のはみ出しも節が切る */
    overflow: visible;
  }

  /* ★背景の KACHISUJI を 1 語まるごと見せる（2026-10-16 今林指示）。
       語の幅は字の大きさの約 3.79 倍（Oswald 700・字間 -0.06em の実測）。図の幅（100vw − 左右の余白）を
       3.9 で割り、少し余らせて収める。375px で 86px（語の幅 326px／図 335px）。
       min() なので、もとの大きさで収まる幅ではもとのまま */
  .method .accelerator::before {
    font-size: min(clamp(8rem, 18vw, 18rem), calc((100vw - var(--container-gutter) * 2) / 3.9));
  }

  .method .accelerator__flare {
    display: none;
  }

  .method .accelerator__rail {
    padding: 2rem 0 0;
  }

  .method .accelerator__rail li:nth-child(n) {
    transform: none;
  }
}

/* 番号と英語は Oswald。和文と書体を分けることで、
   ラベル（記号）と言葉（内容）の役割の違いが一目で分かる */
.method__no {
  color: var(--navy-400);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.method__key {
  margin-top: var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
}

.method__name {
  margin-top: var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/*
  問い。
  ★説明文より大きく組む。
    「本当の問題はどこにあるのか」は、その工程が何を決めるものかを
    一番速く伝える。説明文と同じ調子で流すと、ただの前置きに見える。
*/
.method__q {
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

/* ★行末に数文字だけ残るのを防ぐ。
   01 の説明文が「…特定す／る」と最後の 1 文字を落としていた。

   ★pretty ではなく balance を使っている。
     pretty を試したところ和文では効かず、最終行 35px（約 2 文字）が残った。
     balance は行の長さを揃えるので、2 行の段落なら確実に半分ずつに割れる。
     行数が増える段落では balance の効きが落ちるので、
     説明文が 3 行以上になったらここは見直すこと。 */
.method__body {
  max-width: var(--measure);
  text-wrap: balance;
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

/* ==========================================================================
   勝ち筋モデルの図（入れ子の器）
   --------------------------------------------------------------------------
   参照：NewsPicks 法人プランの図解。

   ★向こうの .lottie ファイルは使っていない。構造を写して自前で描いている。

   1 段 = 器 1 つ。器は次の 3 本の線でできている。
     ・縁の楕円（実線・全周）　器を上から覗いている形になる
     ・壁（実線）　縁の左右から下へ落ちて底で合わさる
     ・内側の破線楕円　器の内面を示す。英語名はこの上に乗る

   ★線の太さを段で変えている。
     手前（小さい器）ほど太く、奥（大きい器）ほど細い。
     全部同じ太さだと «平面に描いた同心円» に見えて、
     器が入れ子になっている感じが出ない。
   ========================================================================== */
.method__figure {
  width: 100%;
}

@media (min-width: 1024px) {
  .method__figure {
    position: sticky;
    /* ヘッダー（固定）の下に潜らない位置 */
    top: clamp(var(--space-16), 18vh, 11rem);
  }
}

.funnel3d {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.funnel3d__rim,
.funnel3d__wall {
  fill: none;
  stroke: var(--color-text-strong);
  /* --n は 0（一番小さい・手前）から 4（一番大きい・奥）。
     手前ほど太く見せる */
  /* キャンバスが 1720 幅になったので、見た目の太さを保つため実数も上げる。
     手前ほど太い（入れ子を伝えるため） */
  stroke-width: calc(6px - var(--n) * 0.5px);
  stroke-linecap: round;
}

/* 器の内面。破線 */
.funnel3d__inner {
  fill: none;
  stroke: var(--navy-300);
  stroke-width: 2;
  stroke-dasharray: 10 10;
}

/*
  英語名。
  ★白フチ（paint-order: stroke）で下の破線を切っている。
    切らないと破線が文字に重なって読みにくい。
    背景に矩形を敷く方法もあるが、面の色が変わると破綻する。
*/
.funnel3d__label {
  fill: var(--color-text-strong);
  font-family: var(--font-numeric);
  /* 添付では英語名がかなり大きい。1120 幅のキャンバスに対して 46px
     （実表示は列幅 448px で約 18px） */
  font-size: 46px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--color-bg);
  /* ★10 では足りなかった。縁の実線・内面の破線が文字の輪郭に触れて
     PERSONA / ISSUE が読みづらかった。18（実表示で約 7px）で離れる。 */
  stroke-width: 18;
  stroke-linejoin: round;
}

.funnel3d__arrowhead {
  fill: var(--color-text-strong);
}

/* トルネードは保存版へ退避。現行B-1では比較案決定まで表示しない。 */
.method__layout {
  display: none;
}

/* B1ではセクション見出しがh2のため、詳細タイトルはh3で文書構造を保つ。 */
.method .accelerator__detail > p {
  font-size: 0.85rem;
}

/*
  説明文。
  ★method-concepts.css は .9rem（14.4px）。三嶋指示で 15px に上げている。
    向こうは比較デモ（demo/method/）と共有しているファイルなので、
    直接いじらず .method 配下だけを上書きする。
*/
.method .accelerator__detail div span {
  font-size: 15px;
}

.method .accelerator__detail h3 {
  color: #fff;
  font-size: clamp(2rem, 2.4vw, 2.75rem);
  line-height: 1.25;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .method .accelerator__detail {
    grid-template-columns: 8rem minmax(16rem, 22rem) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3.5rem);
  }
}

.method__figure {
  display: none;
}

@media (min-width: 1024px) {
  .method__item {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
    padding-block: clamp(var(--space-8), 4vw, var(--space-12));
  }

  .method__no,
  .method__q {
    font-size: var(--text-2xl);
  }

  .method__key {
    font-size: var(--text-sm);
  }

  .method__name {
    font-size: var(--text-xl);
  }

  .method__body {
    margin-top: var(--space-4);
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   ACCELERATOR — 比較デモ demo/method/ から採用した «勝ち筋を決める» の図
   --------------------------------------------------------------------------
   ★もとは demo/method-concepts.css にあり、b1 はそのファイルを丸ごと読んでいた。
     ところが b1 で実際に効いていたのは 192 規則中 44 だけ（実測）で、
     残り 148 は他の 4 案（vector-flow / strategy-triangle / relay-flow /
     strategy-prism）のもの。採用案だけをここへ移し、b1 は読むのをやめた。

   ★★置き場所はこのファイルの末尾でなければならない。
     もとの読み込み順は b1-method.css → method-concepts.css で、
     両方が .accelerator を触っている（b1-method.css 側に 43 か所）。
     前に置くと勝ち負けが入れ替わる。

   ★.method-concept--accelerator .accelerator（地を navy-950 で塗る）は
     持ってきていない。その親クラスは比較デモ側のもので、b1 には無い。
   ★書式は移動元のまま（1 行 1 規則）。整形すると差分が読めなくなるので触らない。
   ========================================================================== */

.accelerator { position:relative; margin-top:5rem; padding:clamp(2rem,4vw,4rem); overflow:hidden; color:#fff; isolation:isolate; }
.accelerator::before { content:"KACHISUJI"; position:absolute; z-index:-1; right:-.04em; bottom:-.28em; color:rgba(255,255,255,.035); font:700 clamp(8rem,18vw,18rem)/1 var(--font-numeric); letter-spacing:-.06em; }
.accelerator__eyebrow { display:flex; align-items:center; gap:1rem; color:var(--navy-300); font:500 .72rem/1 var(--font-numeric); letter-spacing:.22em; }
.accelerator__eyebrow span:nth-child(2) { display:grid; place-items:center; width:2.25rem; height:2.25rem; color:#fff; border:1px solid var(--navy-500); border-radius:50%; }
.accelerator__visual { position:relative; min-height:23rem; margin-top:1rem; }
.accelerator__beam { position:absolute; z-index:-1; inset:7rem 2% auto 1%; height:7.5rem; background:linear-gradient(90deg,var(--navy-600),var(--navy-400) 70%,#fff); clip-path:polygon(0 31%,87% 31%,87% 0,100% 50%,87% 100%,87% 69%,0 69%); transform:rotate(-8deg); transform-origin:center; opacity:.72; }
.accelerator__target { position:absolute; z-index:-1; top:.5rem; right:1%; width:15rem; aspect-ratio:1; border:1px solid rgba(255,255,255,.34); border-radius:50%; }
.accelerator__target::before,.accelerator__target::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
.accelerator__target::before { inset:18%; }
.accelerator__target::after { inset:37%; background:#fff; box-shadow:0 0 3rem rgba(255,255,255,.55); }
.accelerator__rail { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.5rem,1.5vw,1.5rem); margin:0; padding:2.5rem 4rem 0 0; list-style:none; }
.accelerator__rail li:nth-child(1) { transform:translateY(6rem); }
.accelerator__rail li:nth-child(2) { transform:translateY(4.5rem); }
.accelerator__rail li:nth-child(3) { transform:translateY(3rem); }
.accelerator__rail li:nth-child(4) { transform:translateY(1.5rem); }
.accelerator__trigger { position:relative; width:100%; min-height:11rem; padding:1.2rem; color:#fff; text-align:left; border:1px solid rgba(255,255,255,.28); background:rgba(4,2,39,.78); backdrop-filter:blur(8px); cursor:pointer; transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.accelerator__trigger::after { content:""; position:absolute; right:1rem; bottom:1rem; width:.55rem; height:.55rem; border-top:1px solid; border-right:1px solid; transform:rotate(45deg); }
.accelerator__trigger:hover,.accelerator__trigger:focus-visible { transform:translateY(-.6rem); border-color:#fff; outline:none; }
.accelerator__trigger.is-active { transform:translateY(-1rem); color:var(--navy-950); border-color:#fff; background:#fff; box-shadow:0 1.5rem 4rem rgba(0,0,0,.32); }
.accelerator__number,.accelerator__key { display:block; font-family:var(--font-numeric); }
.accelerator__number { color:var(--navy-300); font-size:1.7rem; line-height:1; }
.accelerator__trigger.is-active .accelerator__number { color:var(--navy-500); }
.accelerator__key { margin-top:.75rem; font-size:.68rem; letter-spacing:.14em; }
.accelerator__trigger strong { display:block; margin-top:.65rem; font-size:clamp(.85rem,1.15vw,1.15rem); line-height:1.5; }
.accelerator__details { position:relative; margin-top:1rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.22); }
.accelerator__detail { display:grid; grid-template-columns:9rem minmax(0,1.3fr) minmax(15rem,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.accelerator__detail[hidden] { display:none; }
.accelerator__detail > p { color:var(--navy-300); font:500 .75rem/1.5 var(--font-numeric); letter-spacing:.14em; }
.accelerator__detail > p span { display:block; color:#fff; font-size:3.5rem; line-height:1; letter-spacing:0; }
.accelerator__detail div { padding-left:1.5rem; border-left:1px solid var(--navy-500); }
.accelerator__detail div strong,.accelerator__detail div span { display:block; }
.accelerator__detail div strong { font-size:1.1rem; }
.accelerator__detail div span { margin-top:.8rem; color:var(--navy-200); font-size:.9rem; line-height:1.8; }

@media (max-width: 899px) {
  .accelerator { margin-inline:calc(var(--container-pad) * -1); padding:2rem var(--container-pad) 3rem; }
  .accelerator__visual { min-height:auto; }
  .accelerator__beam,.accelerator__target { display:none; }
  .accelerator__rail { grid-template-columns:1fr; gap:.6rem; padding:2rem 0 0; }
  .accelerator__rail li:nth-child(n) { transform:none; }
  .accelerator__trigger { min-height:0; display:grid; grid-template-columns:3rem 6rem 1fr; align-items:center; gap:.75rem; }
  .accelerator__number,.accelerator__key,.accelerator__trigger strong { margin:0; }
  .accelerator__trigger.is-active { transform:translateX(.5rem); }
  .accelerator__details { margin-top:2rem; }
  .accelerator__detail { grid-template-columns:1fr; gap:1.25rem; }
  .accelerator__detail div { padding:0; border:0; }
}

/*
  899px 以下：詳細を各項目の直下で開閉する（2026-10-16 今林指示）。
  ★.is-inline と .accelerator__drawer は js/method-accelerator.js が付ける。JS が無いときは上の縦並び＋下の詳細のまま。
  ★高さは grid-template-rows の 0fr ⇄ 1fr で動かす（中身の高さを JS で測らない）。
    余白は詳細の padding ではなく子の margin で取る（padding は 0fr でも残るため）。
  ★閉じた項目は visibility: hidden で読み上げからも外す。閉じ終わってから消えるよう、遅らせて切り替える。
*/
@media (max-width: 899px) {
  .method .accelerator.is-inline .accelerator__details { display:none; }
  .method .accelerator__drawer { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1),visibility 0s linear .45s; }
  .method .accelerator__drawer.is-open { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1),visibility 0s; }
  .method .accelerator__drawer > .accelerator__detail { min-height:0; overflow:hidden; opacity:0; transition:opacity .3s ease; }
  .method .accelerator__drawer.is-open > .accelerator__detail { opacity:1; transition:opacity .4s ease .1s; }
  /* 番号・英語・見出しは直上の項目と同じなので画面には出さない。h3 は文書構造のため読み上げ用に残す（.u-visually-hidden と同じ手） */
  .method .accelerator__drawer > .accelerator__detail > p { display:none; }
  .method .accelerator__drawer > .accelerator__detail > h3 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .method .accelerator__drawer > .accelerator__detail > div { margin-top:1.25rem; }
  .method .accelerator__drawer > .accelerator__detail > :last-child { margin-bottom:1.75rem; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .method .accelerator__drawer,
  .method .accelerator__drawer.is-open,
  .method .accelerator__drawer > .accelerator__detail,
  .method .accelerator__drawer.is-open > .accelerator__detail { transition:none; }
}