/* toc.html #toc-workflow：2026-10-20採用のA案
   色は現行サイトのNavy・Goldと、直前の瓶の図（流路の淡い青・作業の青い粒・金の首）から取る。Spectrumは使わない。
   文字：本文・注記は16px以上、操作・単位は14px以上。ボタンは48px角。 */
.twx {
  --tw-navy: #0B1F33; --tw-body: #222222; --tw-sub: #4A5866; --tw-muted: #5D6670;
  --tw-line: #D5DBE1; --tw-paper: #F8F7F3; --tw-paper-line: #E4E0D5;
  --tw-pipe: #DCE9EF; --tw-pipe-2: #E8EEEB; --tw-flow: #4B94B6; --tw-flow-soft: #C8DFEA;
  --tw-gold: #D8B46A; --tw-gold-line: #B58B42; --tw-gold-fill: #EBCB86; --tw-gold-soft: #F6E8C8; --tw-gold-ink: #6A4B16;
  --tw-ease: cubic-bezier(.2, .7, .25, 1);
}
.twx .toc-workflow__intro { margin-bottom: 0; }
.twx svg { display: block; }
.twx [hidden] { display: none !important; }

/* 図版の面：直前の瓶の図と同じ紙色の面に置く */
.twx-panel { margin-top: clamp(28px, 3.4vw, 44px); padding: clamp(24px, 4.2vw, 60px) clamp(16px, 4.4vw, 64px) clamp(28px, 4vw, 52px); border: 1px solid var(--tw-paper-line); background: var(--tw-paper); }

/* 計器の見出し（何を操作するか）と、初期値に戻す */
.twx-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--tw-paper-line); }
.twx-bar__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--tw-navy); }
.twx-bar__title span { font-size: 16px; font-weight: 500; color: var(--tw-muted); white-space: nowrap; }
.twx-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 2px; border: 0; border-bottom: 1px solid #8A949E; background: none; color: var(--tw-navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.twx-reset svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.twx-reset:disabled { opacity: .28; cursor: not-allowed; }
.twx-reset:hover:not(:disabled) { color: #82602B; }

/* まとまりの名前：線で範囲を示す（枠を入れ子にしない） */
.twx-group { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1.5; color: var(--tw-sub); white-space: nowrap; }
.twx-group::before, .twx-group::after { content: ""; flex: 1 1 auto; height: 1px; background: #C6CDD4; }

.twx-name { margin: 0; font-size: 20px; font-weight: var(--heading-weight); line-height: 1.4; color: var(--tw-navy); white-space: nowrap; }
.twx-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px 0 11px; border-radius: 13px; background: var(--tw-gold-soft); box-shadow: inset 0 0 0 1.5px var(--tw-gold-line); color: var(--tw-gold-ink); font-size: 14px; font-weight: 700; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.twx-value { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--tw-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.twx-value output { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.twx-value span { font-size: 15px; font-weight: 700; color: var(--tw-sub); }

.twx-step { display: flex; gap: 8px; }
.twx-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--tw-navy); border-radius: 10px; background: #fff; color: var(--tw-navy); cursor: pointer; transition: background-color .15s, color .15s; }
.twx-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.twx-btn:hover:not(:disabled) { background: var(--tw-navy); color: #fff; }
.twx-btn:disabled { opacity: .28; cursor: not-allowed; }
.twx-btn:focus-visible, .twx-reset:focus-visible { outline: 3px solid var(--tw-gold-line); outline-offset: 3px; }

.twx-compare { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--tw-sub); white-space: nowrap; }
.twx-compare.is-changed { color: var(--tw-navy); }

/* 解説：前半（どこが制約か）に印、後半（どうなるか） */
.twx-feedback { margin: 0; color: var(--tw-navy); }
.twx-feedback__lead { font-size: 22px; font-weight: 700; line-height: 1.7; background: linear-gradient(transparent 62%, var(--tw-gold-soft) 62%, var(--tw-gold-soft) 92%, transparent 92%); }
.twx-feedback__detail { font-size: 18px; font-weight: 700; line-height: 1.8; color: var(--tw-body); }

/* モデルの前提：図版の外、読み物として */
.twx-premise { max-width: 46em; margin: 22px auto 0; font-size: 16px; line-height: 1.9; color: var(--tw-muted); }

@media (max-width: 700px) {
  .twx-bar__title { font-size: 16px; }
  .twx-feedback__lead { font-size: 20px; }
  .twx-feedback__detail { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .twx * { transition: none !important; animation: none !important; } }

/* 案A｜円で比べる（2026-10-20 採用）：図が主、言葉は図の下で結論を述べる。
   - 円の「面積」を処理能力に比例させる（直径＝D20×√(件数/20)）。0件起点の正円で、工程と完成件数は同じ尺度
   - すべての円の中心の高さを揃える。ボトルネックの円の上端と下端から完成件数の円まで金の点線を2本引き、
     ボトルネックが完成件数の大きさを決めていることを示す（点線の位置は a.js が置く）
   - 名前・数字は円の外（上）、操作は円の下。読む順：まとまり → 名前と数字 → 円 → 操作 → 下の解説 */
.twx-a { --d20: 216px; }
.twx-a__model { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 76px minmax(0, 1.06fr); grid-template-rows: auto auto auto var(--d20) auto; margin-top: 34px; }
.twx-a__gp { grid-column: 1 / 6; grid-row: 1; }
.twx-a__go { grid-column: 7; grid-row: 1; }
.twx-a__stage, .twx-a__out { display: contents; }
.twx-a [data-col="1"] > * { grid-column: 1; }
.twx-a [data-col="3"] > * { grid-column: 3; }
.twx-a [data-col="5"] > * { grid-column: 5; }
.twx-a [data-col="7"] > * { grid-column: 7; }
.twx-a__head { grid-row: 2; justify-self: center; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 26px; }
.twx-a .twx-value { grid-row: 3; justify-self: center; margin: 6px 0 20px; }
.twx-a__well { position: relative; z-index: 1; grid-row: 4; display: flex; align-items: center; justify-content: center; }
.twx-a .twx-step, .twx-a .twx-compare { grid-row: 5; justify-self: center; align-self: start; margin-top: 22px; }
.twx-a .twx-compare { display: flex; align-items: center; min-height: 48px; }

/* 円：幅と高さを同じ式で決める（文字を入れないため、常に正円） */
.twx-a__circle { display: block; flex: none; width: calc(var(--d20) * var(--r)); height: calc(var(--d20) * var(--r)); border-radius: 50%; background: var(--tw-pipe); box-shadow: inset 0 0 0 2px var(--tw-navy); transition: width .3s var(--tw-ease), height .3s var(--tw-ease), background-color .2s, box-shadow .2s; }
.twx-a__stage.is-limiting .twx-a__circle { background: var(--tw-gold-fill); box-shadow: inset 0 0 0 3px var(--tw-gold-line); }
.twx-a__circle--out { width: calc(var(--d20) * var(--rmin)); height: calc(var(--d20) * var(--rmin)); background: var(--tw-navy); box-shadow: none; }
.twx-a .twx-value--out output { color: var(--tw-navy); }

/* ボトルネックの円の上端・下端から完成件数の円への点線（円の背後を通り、円の縁に接する） */
.twx-a__lv { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-top: 2px dashed var(--tw-gold-line); pointer-events: none; }
.twx.is-lv-ready .twx-a__lv { transition: left .3s var(--tw-ease), top .3s var(--tw-ease), width .3s var(--tw-ease), height .3s var(--tw-ease); }
.twx:not(.is-ready) .twx-a__lv { display: none; }
.twx-a__arrow, .twx-a__to { grid-row: 4; align-self: center; justify-self: center; color: #8C99A5; }
.twx-a__arrow svg { width: 30px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.twx-a__arrow[data-col="2"] { grid-column: 2; }
.twx-a__arrow[data-col="4"] { grid-column: 4; }
.twx-a__to { grid-column: 6; color: var(--tw-gold-line); }
.twx-a__to svg { width: 44px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 解説：図版の下、中央の軸で結論を読む */
.twx-a__feedback { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--tw-paper-line); text-align: center; text-wrap: balance; }
.twx-a__feedback .twx-feedback__lead { margin-right: .4em; }

@media (max-width: 1179px) { .twx-a { --d20: 188px; } }
@media (max-width: 1060px) { .twx-a { --d20: 156px; } .twx-a .twx-value output { font-size: 42px; } }

/* 縦の構図（タブレット縦・スマホ）：工程を上から下へ。円は左の列に中央揃え（同じ列で大きさを見比べる） */
@media (max-width: 900px) {
  .twx-a { --d20: 104px; }
  .twx-a__model { display: block; margin-top: 22px; }
  .twx-a__gp { margin-bottom: 14px; }
  .twx-a__go { margin: 18px 0 14px; }
  .twx-a__stage, .twx-a__out { display: grid; grid-template-columns: var(--d20) minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
  .twx-a [data-col] > .twx-a__well { grid-column: 1; grid-row: 1 / span 2; width: var(--d20); height: var(--d20); margin: 0; align-items: center; }
  .twx-a [data-col] > .twx-a__head { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; margin: 0; }
  .twx-a [data-col] > .twx-value { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin: 2px 0 0; }
  .twx-a .twx-value output { font-size: 40px; }
  .twx-a [data-col] > .twx-step { grid-column: 3; grid-row: 1 / span 2; flex-direction: column-reverse; gap: 8px; margin: 0; align-self: center; }
  .twx-a [data-col] > .twx-compare { grid-column: 2 / 4; grid-row: 3; justify-self: start; margin: 6px 0 0; min-height: 0; }
  .twx-a__lv { border-top: 0; border-left: 2px dashed var(--tw-gold-line); }
  .twx-a__arrow, .twx-a__to { display: flex; justify-content: center; justify-self: start; width: var(--d20); height: 26px; margin: 2px 0; align-items: center; }
  .twx-a__arrow svg, .twx-a__to svg { transform: rotate(90deg); width: 26px; height: 13px; }
  .twx-a__to svg { width: 30px; height: 15px; }
  .twx-a__feedback { margin-top: 26px; padding-top: 22px; text-align: left; text-wrap: pretty; }
  .twx-a__feedback .twx-feedback__lead { display: table; margin: 0; }
  .twx-a__feedback .twx-feedback__detail { display: block; margin-top: 6px; }
}
@media (max-width: 380px) { .twx-a { --d20: 92px; } .twx-a__stage, .twx-a__out { column-gap: 12px; } }