/* =========================================================
   トップ（index.html）専用。共通の site.css のあとに読み込まれ、上書きする。
   決まり：色は g1〜g8＋赤だけ／文字は 12・13・14・16・20・24・32・48（h1 だけ可変）／影なし／角丸 4px まで。
   戻し方：B1〜B7 の各ブロックは独立。ブロックごと消せばその節は site.css の見た目に戻る
   （B1 を消す時だけ .hero-band-sp{display:none} の1行を残す）。
   ========================================================= */

/* ===== B1 最初の画面：建物と赤に文字を掛けない =====
   写真（img）と赤帯（svg）を「同じ縦横比の箱」にして同じ top で動かす＝両者は必ず重なったまま。 */
.hero-photo,.hero-band{inset:auto;left:0;width:100%;}
@media (min-width:861px){
  /* 3:2 の写真。画面が 3:2 より横長の時だけ縦に余りが出るので、屋根の赤（写真の y=374/1600＝幅の 15.58%）が
     ヘッダーの下 28px（＝96px）に来るまで上へ送る。送れる上限は「余り」まで。 */
  .hero-photo,.hero-band-pc{height:max(100%,66.667vw);top:clamp(min(0px,100% - 66.667vw),96px - 15.58vw,0px);}
  .hero-band-sp{display:none;}
  .hero-shade{background:linear-gradient(180deg,rgba(22,26,32,.55) 0%,rgba(22,26,32,0) 26%,rgba(22,26,32,0) 56%,rgba(22,26,32,.88) 82%,rgba(22,26,32,.92) 100%);}
  .hero-copy{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:48px;align-items:end;padding-bottom:40px;}
  .hero-r{border-top:1px solid rgba(230,234,240,.38);padding-top:16px;}
  .hero-sub{margin-top:0;max-width:none;}
  .hero-cue{margin-top:4px;}
}
@media (min-width:861px) and (max-height:820px){.hero-h1{font-size:48px;}}
@media (min-width:861px) and (min-aspect-ratio:21/9){.hero-photo,.hero-band-pc{top:clamp(min(0px,100% - 66.667vw),72px - 15.58vw,0px);}}
/* 表示領域が低い時。実際のブラウザはタブとアドレス欄の分だけ画面より低い
   （1366×768 の画面＝約1366×650／1536×864＝約1536×730／1280×720＝約1280×600）。
   見えるアスファルトは「高さ − 屋根の赤の位置 − 幅の29.75%」しかないので、
   写真を屋根の赤がヘッダーの下 4px（72px＝上の 21:9 と同じ値）に来るまで上へ送り、文字の組みを低くする：
   h1 40px・左列＝h1 の幅ぴったり（min-content）／右列＝残り全部＝説明文が2行に収まる。761px 以上の高さには効かない。 */
@media (min-width:861px) and (max-height:760px){
  .hero-photo,.hero-band-pc{top:clamp(min(0px,100% - 66.667vw),72px - 15.58vw,0px);}
  .hero-copy{grid-template-columns:min-content minmax(0,1fr);padding-bottom:24px;}
  .hero-h1{font-size:40px;line-height:1.25;}
  .hero-h1 .u,.hero-kicker{white-space:nowrap;} /* 左列の幅を h1 の1行ぶんに決めるため（和文は折らないと1字幅まで潰れる） */
  .hero-kicker{margin-bottom:8px;}
}
@media (min-width:861px) and (max-height:640px){.hero-copy{padding-bottom:16px;} .hero-h1{line-height:1.2;}} /* さらに低い時：下余白 −8px・h1 の行間 −4px（1280×600 で 扉の下端〜肩書き 25px・食い込み0）。これより低いと幾何学的に収まらない */
@media (max-width:860px){
  /* 縦長の画面：重ねない。上＝写真（4:5 の切り出し）、下＝地の色の上に文字。 */
  #hero{display:grid;grid-template-rows:minmax(280px,1fr) auto;align-items:stretch;height:auto;min-height:100svh;}
  .hero-fig{position:relative;inset:auto;overflow:hidden;border-bottom:1px solid var(--line);}
  .hero-photo,.hero-band-sp{height:max(100%,125vw);top:min(0px,(100% - 125vw) * .35);}
  .hero-band-pc{display:none;}
  .hero-band-sp .glow{filter:url(#bandblur-sp);}
  .hero-shade{background:linear-gradient(180deg,rgba(22,26,32,.55) 0,rgba(22,26,32,0) 120px);}
  .hero-copy{padding:24px var(--pad);}
  .hero-sub{max-width:36em;}
}
@media (max-width:760px){
  #hero{min-height:calc(100svh - 56px - env(safe-area-inset-bottom));}
  .hero-h1{font-size:clamp(28px,8.3vw,32px);}
}
/* 行の折れ目：対応しているブラウザ（Chrome・Edge）では文節で折る＝「事務機｜器」「ご覧いた｜だけます」を防ぐ。非対応（Safari）は今のまま */
.hero-sub,.hero-cue{word-break:auto-phrase;}

/* ===== B2 工場見学：字幕帯（映像の上に文字を置かない） =====
   .tour-stick の上下の border を「黒帯」にする。高さ（offsetHeight）は 100svh のまま＝スクロールの計算は変わらず、
   canvas は内側（clientHeight）に合わせて描かれる＝映像は歪まない。site.js・scrollseq.js は触らない。 */
.tour-stick{--cap-h:152px;overflow:visible;border-top:68px solid var(--lb);border-bottom:var(--cap-h) solid var(--lb);}
.tour-cap{position:absolute;left:0;right:0;top:100%;height:var(--cap-h);z-index:4;border-top:1px solid var(--line);}
.tour-cap-in{max-width:var(--w);height:100%;margin:0 auto;padding:16px var(--pad) 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);align-items:start;}
.tour-cap-l{position:relative;}
.tour-sub{position:static;max-width:none;}
.tour-sub .en{font-size:13px;line-height:20px;color:var(--note);margin-bottom:4px;}
.tour-sub .jp{font-size:16px;color:var(--ink-2);text-shadow:none;max-width:40em;}
.tour-sub .jp b{color:var(--ink);margin-bottom:0;}
/* 進み具合：丸い点 → 9本の目盛り（いまの章だけ 16px・通り過ぎた章は g7） */
.tour-dots{display:flex;position:absolute;left:56px;top:2px;width:144px;height:16px;gap:0;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line-strong);}
.tour-dots i{width:1px;height:8px;border-radius:0;background:var(--line-strong);transition:height .2s,background .2s;}
.tour-dots i.on{height:16px;background:var(--ink);}
.tour-dots i:has(~ i.on){background:var(--ink-2);}
.tour-title{position:static;max-width:none;}
.tour-title b{text-shadow:none;}
.tour-lead{margin-top:4px;color:var(--note);text-shadow:none;}
.tour-skip{margin-top:8px;min-height:44px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.tour-skip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
@media (max-width:1100px){.tour-stick{--cap-h:184px;}}
@media (max-width:760px){
  .tour-stick{--cap-h:256px;border-top-width:60px;border-bottom-width:calc(var(--cap-h) + 56px + env(safe-area-inset-bottom));}
  .tour-cap-in{display:block;}
  /* 見学の説明は第1章のあいだだけ、字幕帯のすぐ上に出す（第2章から消える。DOM には残る） */
  .tour-title{position:absolute;left:0;right:0;top:auto;bottom:100%;padding:16px var(--pad);background:var(--lb);border-top:1px solid var(--line);transition:opacity .3s,visibility 0s;}
  .tour-stick:has(#tourDots i:first-child:not(.on)) .tour-title{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;}
  .tour-skip{position:absolute;left:var(--pad);bottom:16px;margin:0;}
}
.qa .tour-title,.still .tour-title,.qa .tour-dots i,.still .tour-dots i{transition:none!important;}
/* 動きを減らす設定・JS なし：見学は1画面の静止画に畳む（6,300px の空送りをなくす）。9か所の説明は足跡に出る */
.still .tour,.no-js .tour{height:auto;}
.still .tour-stick,.no-js .tour-stick{position:relative;}

/* ===== B3 見学の足跡：3×3 のべた焼き ===== */
.no-js #footprints{display:block;}
#footprints{padding:64px 0 72px;border-top:1px solid var(--line);}
.fp-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:auto 1fr;grid-template-areas:"sheet a" "sheet b";column-gap:clamp(32px,5vw,80px);}
.fp-a{grid-area:a;} .fp-b{grid-area:b;margin-top:32px;} .fp-sheet{grid-area:sheet;}
.fp-h{font-size:24px;line-height:1.4;color:var(--ink);font-feature-settings:"palt";}
.fp-a .note{margin-top:8px;}
.fp-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px;}
.fp-sheet button{display:block;width:100%;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--note);}
.fp-sheet img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);background:var(--panel-2);transition:border-color .25s;}
.fp-sheet button:hover img,.fp-sheet button:focus-visible img{border-color:var(--ink);}
.fp-sheet button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
.fp-sheet .cap{display:flex;gap:8px;margin-top:8px;font-size:13px;line-height:1.5;}
/* 番号だけに当てる（子結合子）。題の中の .nw（括弧の塊）に欧文書体・補足色・字間が移らないように */
.fp-sheet .cap>span{flex:none;font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;color:var(--note);font-variant-numeric:tabular-nums;}
/* 題の括弧の塊は HTML 側で .nw（折らない）に包んである＝必ず括弧の前で折れる。
   keep-all＋overflow-wrap:anywhere は使わない：Safari は収まらない語を禁則無視で切り、「構内（｜正門から）」と始め括弧が行末に残る。 */
.fp-sheet .cap b{font-weight:400;color:var(--ink-2);word-break:normal;overflow-wrap:normal;line-break:strict;}
.fp-d{display:none;margin-top:4px;font-size:13px;line-height:1.7;color:var(--note);}
.still .fp-d,.no-js .fp-d{display:block;padding-right:8px;} /* 隣のコマの説明と字がくっつかないように */
/* 「会社の規模」「生産設備」「主な製品」は HTML 側で .nw に包んである＝「生｜産設備」とも「「｜生産設備」とも折れない。
   文節折りは対応ブラウザ（Chrome・Edge）だけ。非対応（Safari）は普通の折り方＋禁則（keep-all には落とさない）。 */
.fp-after{margin-top:0;word-break:normal;overflow-wrap:normal;line-break:strict;}
@supports (word-break:auto-phrase){.fp-after{word-break:auto-phrase;}}
#footprints .sec-cta{margin-top:24px;}
.fp-note{margin-top:24px;font-size:13px;}
@media (max-width:860px){
  #footprints{padding:40px 0 48px;}
  .fp-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"a" "sheet" "b";}
  .fp-h{font-size:20px;}
  .fp-sheet{margin-top:24px;gap:16px 8px;}
  .fp-sheet .cap{display:block;} .fp-sheet .cap>span{margin-right:6px;}
}
/* 360px 以下：1コマの幅（約85〜99px）に「（スター精密）」7字（91px）が収まらず枠をはみ出すので、括弧の塊を「まとめて次の行へ送り、それでも入らなければ中で折る」箱にする。
   塊の頭が「（」なので、始め括弧が行末に残ることは無い。 */
@media (max-width:360px){.fp-sheet .cap .nw{display:inline-block;white-space:normal;}}

/* ===== B4 会社の規模と主な取引先：諸元表 ===== */
.scale{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:start;}
.scale>*{min-width:0;}
.scale-head{position:sticky;top:100px;}
.scale-head .sec-head{margin-bottom:24px;}
.nums{display:block;border-top:1px solid var(--line-strong);}
.num{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;padding:20px 0;border-top:0;border-bottom:1px solid var(--line);}
.num .c{grid-column:1;grid-row:1;margin-top:0;}
.num .n,.num .n.n-iso{grid-column:2;grid-row:1;font-size:48px;line-height:1;letter-spacing:-.01em;text-align:right;}
.num .n small{font-size:16px;}
.num .note{grid-column:1/-1;margin-top:8px;font-size:13px;}
.num:nth-child(1){--d:0s;} .num:nth-child(2){--d:.08s;} .num:nth-child(3){--d:.16s;} .num:nth-child(4){--d:.24s;} .num:nth-child(5){--d:.32s;}
/* 小見出しは読み上げと見出しの段のために残し、画面では「主要取引先」の行が一覧の見出しを兼ねる */
.nums-clients-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.nums-clients{grid-template-columns:1fr;gap:0 32px;margin-top:0;border-top:0;}
.nums-clients li{font-size:14px;line-height:20px;padding:12px 0;}
@media (min-width:1160px){.nums-clients{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.scale{grid-template-columns:minmax(0,1fr);} .scale-head{position:static;margin-bottom:32px;}}
@media (max-width:760px){
  .num .n,.num .n.n-iso{font-size:32px;}
  .num .n small{font-size:13px;}
  .num:nth-child(1){--d:0s;} .num:nth-child(2){--d:.08s;} .num:nth-child(3){--d:.16s;} .num:nth-child(4){--d:.24s;} .num:nth-child(5){--d:.32s;}
  .nums-clients{gap:0;}
}

/* ===== B5 各ページのご案内：案内板（build.py が出す markup のまま・CSS だけ） =====
   2026-09-21 あきと指摘「のっぺり」→ 各行の頭に、そのページの顔になっている実写の小さな絵（3:2）を置いた。
   文字と罫だけの1画面は、暗い1色が画面の9割を占めて平らに見えていた（実測 89.5%）。絵は新しい飾りではなく、行き先そのものの写真。 */
body.top .guide{display:block;}
body.top .guide a{grid-template-columns:192px minmax(0,4fr) minmax(0,6fr) 32px;column-gap:clamp(24px,3vw,48px);align-items:center;padding:20px 0;}
body.top .guide a img{grid-column:1;grid-row:1;display:block;width:192px;height:128px;object-fit:cover;border:1px solid var(--g4);background:var(--g3);opacity:.9;transition:opacity .2s linear,border-color .2s linear;}
body.top .guide a:hover img,body.top .guide a:focus-visible img{opacity:1;border-color:var(--g6);}
body.top .guide a b{grid-column:2;grid-row:1;font-size:32px;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;}
body.top .guide a span{grid-column:3;grid-row:1;font-size:16px;color:var(--note);max-width:none;word-break:auto-phrase;}
body.top .guide a i{grid-column:4;grid-row:1;justify-self:end;align-self:center;font-size:20px;}
body.top .guide a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
/* 群の区切り：6件目（会社概要・沿革）と 9件目（お問い合わせ）の頭に、強い罫と間 */
body.top .guide li:nth-child(6),body.top .guide li:nth-child(9){margin-top:48px;border-top:1px solid var(--line-strong);}
@media (max-width:1100px){body.top .guide a{grid-template-columns:160px minmax(0,4fr) minmax(0,6fr) 24px;} body.top .guide a img{width:160px;height:108px;} body.top .guide a b{font-size:24px;line-height:1.4;}}
@media (max-width:860px){
  body.top .guide a{grid-template-columns:96px minmax(0,1fr) 24px;column-gap:16px;row-gap:12px;padding:20px 0;align-items:center;}
  body.top .guide a img{grid-column:1;grid-row:1;width:96px;height:64px;}
  body.top .guide a b{grid-column:2;grid-row:1;font-size:20px;line-height:1.4;}
  body.top .guide a span{grid-column:1/-1;grid-row:2;font-size:14px;color:var(--note);word-break:normal;} /* 狭い列で文節折りにすると右端がガタつくので、ここは普通の折り方 */
  body.top .guide a i{grid-column:3;grid-row:1;font-size:16px;}
  body.top .guide li:nth-child(6),body.top .guide li:nth-child(9){margin-top:32px;}
}

/* ===== B6 新着情報：箱をやめて罫の表に ===== */
body.top .news{margin-top:0;background:none;border:0;border-top:1px solid transparent;border-radius:0;padding:0;box-shadow:none;}
body.top .news li{padding:20px 0;}
body.top .news li:last-child{border-bottom:1px solid var(--line);}
body.top .news h3{font-size:16px;line-height:1.7;}
body.top .news p{margin-top:0;color:var(--ink-2);}
@media (min-width:1000px){body.top .news li>div{display:grid;grid-template-columns:12em minmax(0,1fr);column-gap:28px;align-items:baseline;}}
/* 新着情報の編集画面（2026-10-20）で本文・リンク・PDF を足した記事：2段落目以降も右の列に積む（無いと左右へ交互に散る）。1段落の記事の見た目は変わらない */
@media (min-width:1000px){body.top .news li>div>h3{grid-row:1/span 6;} body.top .news li>div>p{grid-column:2;}}
body.top .news li>div>p+p{margin-top:6px;}
body.top .news .nl-sub{display:block;margin-top:2px;font-size:14px;color:var(--note);}

/* ===== B7 結び：このページ最後の相談の行 ===== */
body.top #news .sec-cta{margin-top:64px;padding-top:32px;border-top:1px solid var(--line-strong);gap:8px 32px;}
body.top #news .sec-cta a.go{font-size:20px;font-weight:700;}
body.top #news .sec-cta a.tel{font-size:32px;line-height:1.2;}

/* ===== B9 見学の第6章「自動旋盤の機構（拡大）」＝実写（カム式自動旋盤が真鍮を削る・2018年）を再生 ===== */
.tour-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .5s var(--ease);pointer-events:none;}
.tour-stick.live .tour-live{opacity:1;}
.qa .tour-live,.still .tour-live{display:none;}

/* ===== B8 「主な生産品目」：一覧＋製品ページの実物写真6点（2026-10-01 3Dのバルブから差し替え＝形に出典が無かった）。
   写真は製品ページの「単体」と同じ明るい地の白黒＝暗い床の上に標本の札のように並べる。 ===== */
.parts-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;}
.parts-list{border-top:1px solid var(--line-strong);}
.parts-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:700;line-height:1.4;color:var(--ink);font-feature-settings:"palt";}
.parts-copy .more{margin-top:24px;}
.parts-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.parts-shots img{display:block;width:100%;height:auto;aspect-ratio:500/365;object-fit:cover;}
@media (max-width:860px){
  .parts-grid{grid-template-columns:1fr;gap:24px;}
  .parts-shots{gap:4px;}
  .parts-list li{font-size:16px;padding:10px 0;}
}


/* ===== B10 画像と動きの底上げ（2026-10-02）：index-01・02・03・05 =====
   共通部品（[data-tilt]・[data-depth]・[data-scrub]・figure[data-ai] の札と説明）は site.css。ここは置き場所と、このページだけの登場だけ。
   動く状態は JS が付けるクラス（.is-in／.ix-pre／.ix-gd・.ix-on）の配下だけ＝JS無効・?qa=1・動きを止める設定では最初から最終状態。
   最初の画面（B1）と工場見学（B2）には何も足さない。戻し方＝このブロックと index.js の B10 を消し、index.html の2つの figure を外し、
   ul.parts-shots の class を ix-tilt→reveal に戻して data-tilt を外す。 */

/* index-01 → 2026-10-29 実写へ差し替え：「会社の規模と主要取引先」の左列、リードの下に「製造フロアの自動旋盤の列（2026年撮影）」（1:1・白黒に回転灯の赤だけ残す）。
   PC＝左列の幅いっぱいの 1:1（表示領域の高さ 760px 以下は 3:2）／860px以下＝リードと諸元表のあいだに幅いっぱいの 16:9。
   左列の貼り付き（sticky）は外す：1366×650 で画像の下が画面の外に隠れるため。右列の諸元表は触らない。 */
.scale-head{position:static;}
.ix-place{margin:32px 0 0;}
.ix-place .sx-frame{--ar:1/1;background:transparent;}   /* シャッターが開く前に枠の地を見せない */
.ix-place figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--note);}
@media (min-width:861px) and (max-height:760px){.ix-place .sx-frame{--ar:3/2;}}
@media (max-width:860px){.ix-place{margin-top:24px;} .ix-place .sx-frame{--ar:16/9;} .ix-place .sx-frame>img{object-position:50% 30%;}}   /* 1:1 の写真を 16:9 に切るとき、上寄り（回転灯の列は画像の上 1/5〜中ほどにある。真ん中で切ると一番高い灯の頭が上端にかかる） */

/* index-02 → 2026-10-29「工程の帯」（.ix-flow）：主な生産品目のあと（各ページのご案内の前）の全幅の帯。
   2026-11-06 あきと「何が言いたいかわからない」→「材料→加工→検査→製品」の4段。各段＝写真（1:1）・物差し（目盛り＋赤い1pxの線）・番号と段の名前・事実1行とリンク。
   PC＝4列（写真は行1・線は行2・名前は行3・事実は行4）。760px以下＝2×2（写真→名前→事実を2段）・線は一番下に1本。
   動く時（motion6.css）：PC は4列のまま1段ずつ開く／スマホは写真を1枠に重ねて、事実は今の段だけ（画面に収めるため）。 */
.ix-flow{margin:0;padding:0 var(--pad) 40px;}   /* 左右に --pad の余白（全幅の帯の文字は --pad から＝site.css の .band と同じ規律） */
.ix-flow-h{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.08em;color:var(--ink);}
.ix-flow-h::before{content:"";width:24px;height:1px;background:var(--red);}
.ix-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;}
.ix-flow-grid .c1{grid-column:1;} .ix-flow-grid .c2{grid-column:2;} .ix-flow-grid .c3{grid-column:3;} .ix-flow-grid .c4{grid-column:4;}
.ix-flow-ph{--ar:1/1;grid-row:1;}
.ix-flow-rule{grid-row:2;grid-column:1/-1;position:relative;height:7px;margin-top:8px;}
.ix-flow-ticks{position:absolute;left:0;right:0;top:0;height:6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;}
.ix-flow-ticks i{display:block;width:1px;height:6px;background:var(--line-strong);}
.ix-flow-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform-origin:0 50%;transition:transform 1.2s var(--ease);}
.js:not(.qa):not(.still) .ix-flow.ix-flow-pre:not(.ix-flow-on) .ix-flow-line{transform:scaleX(0);transition:none;}
.ix-flow-cap{grid-row:3;display:flex;align-items:baseline;gap:10px;margin:14px 0 0;padding-left:8px;line-height:1.3;color:var(--ink);}
.ix-flow-cap .en{font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.06em;color:#ff6a6f;font-variant-numeric:tabular-nums;}
.ix-flow-cap b{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:.06em;}
.ix-flow-fact{grid-row:4;margin:8px 0 0;padding:0 16px 0 8px;}
.ix-flow-fact p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2);text-wrap:pretty;}
.ix-flow-fact .u{display:inline-block;}
.ix-flow-fact small{display:block;margin-top:2px;font-size:12px;color:var(--note);}
.ix-flow-to{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);}
.ix-flow-to:hover{color:#fff;text-decoration-color:var(--ink);}
@media (max-width:760px){
  .ix-flow{padding-bottom:28px;}
  .ix-flow-grid,.ix-flow-ticks{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ix-flow-grid .c3{grid-column:1;} .ix-flow-grid .c4{grid-column:2;}
  .ix-flow-ph.c3,.ix-flow-ph.c4{grid-row:4;margin-top:20px;}
  .ix-flow-cap{grid-row:2;margin-top:10px;} .ix-flow-cap.c3,.ix-flow-cap.c4{grid-row:5;}
  .ix-flow-fact{grid-row:3;padding-right:4px;} .ix-flow-fact.c3,.ix-flow-fact.c4{grid-row:6;}
  .ix-flow-fact p{font-size:13px;}
  .ix-flow-fact small{font-size:13px;}   /* スマホは13px未満の文字を作らない（qa/mobile_check.py） */
  .ix-flow-rule{grid-row:7;margin-top:16px;}             /* 線は一番下に1本 */
  .ix-flow-ticks i:nth-child(n+3){display:none;}        /* 目盛りは2列ぶん */
}

/* index-03：製品写真6点。ul 全体は共通部品の [data-tilt]（奥へ寝た所から、送るほど正面へ起きる・PC 8°／スマホ 4°・画面の上30%で平ら）。
   加えて li の登場：rotateX(18deg)・下へ32px・透明 → 平ら、0.6秒、左上から0.04秒ずつ（6枚目は0.2秒遅れ＝全体0.8秒）。
   拡大・translateZ・hover の拡大は使わない。.ix-pre は index.js が「動かす」と決めた時だけ付ける。 */
.ix-tilt li{transform-origin:50% 100%;transition:opacity .6s var(--ease),transform .6s var(--ease);}
.js:not(.qa):not(.still) .ix-tilt.ix-pre:not(.is-in) li{opacity:0;transform:perspective(800px) rotateX(18deg) translateY(32px);transition:none;}
.ix-tilt.is-in li:nth-child(2){transition-delay:.04s;} .ix-tilt.is-in li:nth-child(3){transition-delay:.08s;}
.ix-tilt.is-in li:nth-child(4){transition-delay:.12s;} .ix-tilt.is-in li:nth-child(5){transition-delay:.16s;}
.ix-tilt.is-in li:nth-child(6){transition-delay:.2s;}

/* index-05：各ページのご案内（B5）の小さな絵9点。markup は build.py のまま。
   行が画面に入ったら（index.js が li に .ix-on）、絵だけが0.5秒で決まる：左から開く（clip-path）＋左の縦辺を軸に −14°→0。
   行の文字と罫は動かさない。拡大なし。.ix-gd は index.js が「動かす」と決めた時だけ ul に付ける。 */
body.top .guide.ix-gd a img{clip-path:inset(0);transform:perspective(600px) rotateY(0deg);transform-origin:0 50%;transition:opacity .2s linear,border-color .2s linear,clip-path .5s var(--ease),transform .5s var(--ease);}
.js:not(.qa):not(.still) body.top .guide.ix-gd li:not(.ix-on) a img{clip-path:inset(0 100% 0 0);transform:perspective(600px) rotateY(-14deg);transition:none;}