/* 使用している技術：技術のつながり（2026-09-27）
   データ＝scratchpad/articles/flow.json、HTML＝techflow.py が作る（同じ HTML を2通りに見せる）。
   - 1151px 以上：左から右への4列（段階＝列、矢印は列のすき間の横線。subgrid で段をそろえる）
   - それより狭い画面／subgrid が無いブラウザ：上から下への番号つきの流れ（縦の線と、段階の間に「渡すもの」）
   角ゼロ・影なし。深緑は段階の番号と「詳しく」だけ。文字は 15px（名前・段階）と 13px（一言・矢印の言葉）、
   スマホの「どこからどこへ」だけ 12px。線と矢じりは淡い地の上で 3:1 以上。絞り込みで外れた箱と矢印は薄く（techflow.js）。 */
.tf{--tf-pic:72px;--tf-line:#7d8a85;margin:8px 0 64px}
.tf-title,.tech-list-title{font-family:var(--rd-mincho);font-weight:500;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.6;letter-spacing:.06em;color:var(--rd-ink);margin:0}
.tf-lead{max-width:44em;margin:8px 0 24px;color:var(--rd-muted);font-size:.9375rem;line-height:1.9}
.tf-panel{background:var(--rd-soft);padding:28px 24px 32px}
.tf-flow,.tf-nodes,.tf-hand{list-style:none;margin:0;padding:0}
.tf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 箱（1つの技術。箱全体がリンク）。右上の「詳しく →」の幅（約64px）を空けて、狭い箱では絵を縮める */
.tf-box{container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic go" "name name" "line line";align-content:start;column-gap:8px;height:100%;padding:16px;background:#fff;border:1px solid var(--rd-line);color:inherit;text-decoration:none;transition:border-color .2s ease}
.tf-pic{grid-area:pic;display:block;width:min(var(--tf-pic),calc(100cqi - 72px));aspect-ratio:1;background:var(--rd-soft)}
.tf-pic img{display:block;width:100%;height:100%;object-fit:contain}
.tf-go{grid-area:go;justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--rd-green);white-space:nowrap}
.tf-arw{font-family:var(--rd-latin);transition:transform .2s ease}
.tf-name{grid-area:name;margin-top:12px;font-family:var(--rd-gothic);font-weight:500;font-size:15px;line-height:1.5;letter-spacing:.02em;color:var(--rd-ink);word-break:keep-all;overflow-wrap:anywhere}
.tf-line{grid-area:line;margin-top:4px;font-size:13px;line-height:1.6;letter-spacing:.02em;color:var(--rd-muted);word-break:auto-phrase;text-wrap:pretty}
.tf-box:hover{border-color:var(--rd-green)}
.tf-box:hover .tf-arw{transform:translateX(3px)}

/* 絞り込み：その治療で使わない技術と、その矢印を薄く（ポインタを当てる・フォーカスで戻す） */
.tf-node,.tf-edge{transition:opacity .25s ease}
.tf-node.is-dim,.tf-edge.is-dim{opacity:.3}
.tf-node.is-dim:hover,.tf-node.is-dim:focus-within{opacity:1}

/* ── 縦の流れ（1150px 以下の既定）：左に番号と縦の線、段階ごとに箱、その下に次へ渡すもの ── */
.tf-flow{padding-left:48px}
.tf-stage{position:relative}
.tf-stage+.tf-stage{margin-top:32px}
.tf-stage:not(:last-child)::before{content:"";position:absolute;left:-32px;top:32px;bottom:-32px;width:1px;background:#c4cfca}
.tf-sh{position:relative;display:flex;align-items:center;min-height:32px;margin:0 0 16px;font-family:var(--rd-mincho);font-weight:500;font-size:15px;line-height:1.5;letter-spacing:.06em;color:var(--rd-ink)}
.tf-num{position:absolute;left:-48px;top:0;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--rd-green);background:var(--rd-soft);color:var(--rd-green);font-family:var(--rd-latin);font-weight:400;font-size:13px;line-height:1;letter-spacing:.02em}
.tf-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px}
.tf-hand{display:grid;gap:8px;margin-top:16px}
.tf-edge{position:relative;padding:0 0 4px 24px;font-size:13px;line-height:1.55}
.tf-edge::before{content:"";position:absolute;left:8px;top:4px;bottom:8px;width:1px;background:var(--tf-line)}
.tf-edge::after{content:"";position:absolute;left:4px;bottom:2px;border-style:solid;border-width:7px 4.5px 0;border-color:var(--tf-line) transparent transparent}
.tf-elabel{display:block;color:var(--rd-ink);letter-spacing:.04em;word-break:keep-all;overflow-wrap:anywhere}
.tf-eroute{display:block;font-size:12px;line-height:1.6;color:var(--rd-muted);letter-spacing:.02em}
.tf-to{font-family:var(--rd-latin);margin:0 .4em}

/* スマホ：箱は1列。絵を左、文字を右 */
@media(max-width:599px){
.tf{margin-bottom:48px}
.tf-lead{font-size:.875rem;line-height:1.85;margin-bottom:16px}
.tf-panel{padding:20px 12px 24px}
.tf-flow{padding-left:40px}
.tf-num{left:-40px;width:28px;height:28px}
.tf-sh{min-height:28px}
.tf-stage:not(:last-child)::before{left:-27px;top:28px}
.tf-nodes{grid-template-columns:minmax(0,1fr);gap:8px}
.tf-box{--tf-pic:64px;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"pic name" "pic line" "pic go";grid-template-rows:auto auto 1fr;column-gap:12px;padding:12px}
.tf-name{margin-top:0}
.tf-go{justify-self:start;align-self:end;margin-top:8px}
}

/* ── PC：左から右への図（1151px 以上。subgrid が使えるブラウザだけ） ── */
@media(min-width:1151px){
@supports (grid-template-columns:subgrid){
.tf{--tf-gap:clamp(100px,8.4vw,128px);--tf-pic:80px}
.tf-flow{--tf-colw:minmax(0,260px);display:grid;grid-template-rows:auto repeat(var(--tf-rows),auto);row-gap:12px;padding-left:0} /* 列の幅は最大260px：段階が少ない図（治療ページ用）でも箱が横に伸びすぎない */
.tf-flow[data-cols="4"]{grid-template-columns:var(--tf-colw) var(--tf-gap) var(--tf-colw) var(--tf-gap) var(--tf-colw) var(--tf-gap) var(--tf-colw)}
.tf-flow[data-cols="3"]{grid-template-columns:var(--tf-colw) var(--tf-gap) var(--tf-colw) var(--tf-gap) var(--tf-colw)}
.tf-flow[data-cols="2"]{grid-template-columns:var(--tf-colw) var(--tf-gap) var(--tf-colw)}
.tf-flow[data-cols="1"]{grid-template-columns:var(--tf-colw)}
.tf-stage{grid-row:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.tf-stage+.tf-stage{margin-top:0}
.tf-stage:nth-child(1){grid-column:1 / span 2}
.tf-stage:nth-child(2){grid-column:3 / span 2}
.tf-stage:nth-child(3){grid-column:5 / span 2}
.tf-stage:nth-child(4){grid-column:7 / span 2}
.tf-stage:last-child{grid-column-end:span 1}
.tf-stage:not(:last-child)::before{display:none}
.tf-sh{grid-row:1;grid-column:1;align-self:end;gap:12px;min-height:0;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid #cfd9d3}
.tf-num{position:static;width:28px;height:28px;flex:none}
.tf-nodes,.tf-hand{grid-row:2 / -1;grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:inherit;margin:0}
.tf-node{grid-column:1;grid-row:var(--r) / span var(--span)}
.tf-node--tall .tf-box{grid-template-columns:minmax(0,1fr);grid-template-areas:"go" "pic" "name" "line";align-content:center}
.tf-node--tall .tf-pic{width:min(192px,100cqi);margin-top:8px}
/* 矢印：列のすき間の、その段の高さの真ん中に横線。言葉は線の 8px 上 */
.tf-edge{grid-column:2;grid-row:var(--r);padding:0}
.tf-edge::before{left:0;right:8px;top:50%;bottom:auto;width:auto;height:1px}
.tf-edge::after{left:auto;right:0;top:calc(50% - 4px);bottom:auto;border-width:4.5px 0 4.5px 8px;border-color:transparent transparent transparent var(--tf-line)}
.tf-elabel{position:absolute;left:4px;right:12px;bottom:calc(50% + 8px);text-align:center;color:var(--rd-muted);line-height:1.45}
.tf-eroute{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}}

@media(prefers-reduced-motion:reduce){.tf-box,.tf-arw,.tf-node,.tf-edge{transition:none}.tf-box:hover .tf-arw{transform:none}}
@media print{.tf-node.is-dim,.tf-edge.is-dim{opacity:1}}

/* 2026-09-27 ほかにも使う技術：図の箱にしていない技術を、段階ごとに名前のボタンで（その段階の最後の箱の下から） */
.tf-more{margin-top:16px}
.tf-more-h{margin:0 0 8px;font-size:12px;line-height:1.5;letter-spacing:.06em;color:var(--rd-muted)}
.tf-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tf-chip{transition:opacity .25s ease}
.tf-chip a{display:inline-block;padding:7px 10px;border:1px solid var(--rd-line);background:#fff;color:var(--rd-ink);font-size:13px;line-height:1.45;letter-spacing:.02em;text-decoration:none}
.tf-chip a:hover{border-color:var(--rd-green);color:var(--rd-green)}
.tf-chip.is-dim{opacity:.3}
.tf-chip.is-dim:hover,.tf-chip.is-dim:focus-within{opacity:1}
@media(min-width:1151px){@supports (grid-template-columns:subgrid){
.tf-flow{grid-template-rows:auto repeat(var(--tf-rows),auto) auto}
.tf-nodes,.tf-hand{grid-row:2 / span var(--tf-rows)}
.tf-more{grid-row:var(--mr) / -1;grid-column:1;align-self:start;margin-top:4px}
}}
@media(prefers-reduced-motion:reduce){.tf-chip{transition:none}}
@media print{.tf-chip.is-dim{opacity:1}}

/* 2026-09-27 直し：PC では矢印の言葉の層（.tf-hand）が列全体に重なり、箱とボタンのクリックを奪っていた。層は押せないものなので素通りさせる */
.tf-hand{pointer-events:none}

/* 2026-09-27 図の箱にしていない技術：小さな写真つきの箱（名前のボタンから置き換え）。治療を選ぶと、その治療の図に切り替わる（techflow.js） */
.tf[hidden]{display:none}
.tf-minis{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.tf-mbox{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:#fff;border:1px solid var(--rd-line);color:var(--rd-ink);text-decoration:none}
.tf-mbox--nopic{grid-template-columns:minmax(0,1fr) auto;padding:14px 12px}
.tf-mbox:hover{border-color:var(--rd-green)}
.tf-mpic{display:block;width:48px;height:48px;background:var(--rd-soft)}
.tf-mpic img{display:block;width:100%;height:100%;object-fit:cover}
.tf-mname{font-family:var(--rd-gothic);font-size:14px;line-height:1.5;font-weight:500;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.tf-mgo{color:var(--rd-green);font-family:var(--rd-latin);font-size:13px;transition:transform .2s ease}
.tf-mbox:hover .tf-mgo{transform:translateX(3px)}
@media(min-width:600px) and (max-width:1150px){.tf-minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tf-mgo{transition:none}.tf-mbox:hover .tf-mgo{transform:none}}
/* 2026-09-27 小さな箱も、写真の箱と同じく「薄くする」（消さない） */
.tf-mini{transition:opacity .25s ease}
.tf-mini.is-dim{opacity:.3}
.tf-mini.is-dim:hover,.tf-mini.is-dim:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.tf-mini{transition:none}}
@media print{.tf-mini.is-dim{opacity:1}}

/* ── 2026-09-27 スマホの読みやすさ：技術のつながりの図（599px 以下だけ。PC・タブレットの図は変えない） ──
   写真の箱は1行に詰める（絵 52px・名前と一言・右に →）。「ほかにも使う技術」は段階ごとに1行にたたみ、押すと開く（techflow.js）。
   治療を選ぶと、その治療で使う技術がある段階だけ開く。使わない技術は今までどおり薄くする */
@media(max-width:599px){
.tf-panel{padding:16px 10px 20px}
.tf-flow{padding-left:36px}
.tf-num{left:-36px}
.tf-stage:not(:last-child)::before{left:-23px}
.tf-stage+.tf-stage{margin-top:28px}
.tf-sh{margin-bottom:12px}
.tf-nodes{gap:8px}
.tf-box{--tf-pic:52px;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"pic name go" "pic line go";grid-template-rows:auto 1fr;column-gap:10px;padding:10px 10px 10px 8px}
.tf-go{grid-area:go;align-self:center;margin:0;gap:0;font-size:0}
.tf-go .tf-arw{font-size:15px}
.tf-name{font-size:15px;line-height:1.45}
.tf-line{margin-top:2px}
.tf-more{margin-top:8px}
.js .tf-more-h{display:flex;align-items:center;min-height:46px;margin:0;padding:0 12px;border:1px solid var(--rd-line);background:#fff;font-size:13px;letter-spacing:.04em;color:var(--rd-ink)}
.js .tf-more.is-ready .tf-more-h{padding:0}
.js .tf-more:not(.is-open) .tf-minis{display:none}
.tf-more.is-open .tf-minis{margin-top:8px}
.tf-more-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:0;padding:0 12px;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.tf-more-toggle::after{content:"+";margin-left:auto;font:300 22px/1 var(--rd-latin);color:var(--rd-green)}
.tf-more-toggle[aria-expanded="true"]::after{content:"−"}
.tf-more-count{font:400 12px/1 var(--rd-latin);letter-spacing:.02em;color:var(--rd-muted);padding:3px 6px;border:1px solid var(--rd-line)}
.tf-mbox{min-height:52px}
}