@charset "utf-8";
/* ==========================================================================
   株式会社サンプルネジ制作（サイト工房 サンプルサイト・架空の企業サイト）
   専用スタイルシート / v1.2
   --------------------------------------------------------------------------
   v1.2 で変えたこと
   - 書体をシステムフォント任せから、見出し／本文／英数字の3役へ分けた
     ローカル同梱フォントへ変更（00a・01節）
   - 硬い長方形のまま重ねていた写真の重なりを解消（08節 .prec / 09節 .st4）
   - 検査台写真が表示幅によって帯状になり主題が消える問題を修正（08節 .creed__rec）
   - 端まで届く白いフェードを、主題にかからない範囲まで縮小（04節）
   - 縦書きを1種類の部品の反復から、役割の違う3種類（.vt / .vaxis / .vverb）へ
   - 「英字ラベル→横見出し→本文→写真」の同型反復を、ページごとに崩した
   --------------------------------------------------------------------------
   v1.1 から引き継ぐ設計方針
   - 左右2分割の反復をやめ、セクションごとに「何を最も伝えたいか」で構図を決める
   - 全幅の背景色を水平線で切り替えない。ページ全体の淡いグラデーションと、
     コンテンツの背面だけに置く色面（.tint）で階層をつくる
   - 記録線（.rail）を1本、ページ全体へ通してセクションをつなぐ
   - CTAとメニューから四角い枠・塗りを外し、文字・細線・矢印で構成する
   - 白・黒・グレー・低彩度の青灰色でパレットを統一する（全5ページ共通）
   --------------------------------------------------------------------------
   目次
   00a 書体の読み込み（@font-face・外部CDNへ接続しない）
   00  基盤（変数・リセット）
   01  文字組み（見出し／本文／英数字の3役）
   02  ページの地（連続する背景・色面・記録線）
   03  モチーフ（目盛り・縦書き3種・工程番号・注記線）
   04  画像（比率・焦点・フェード）
   05  ヘッダー／ナビゲーション
   06  リンク・CTA（箱を使わない）
   07  フッター／次に読むページ
   08  トップページ
   09  技術と品質
   10  製品情報
   11  会社案内
   12  お問い合わせ
   13  モーション
   14  レスポンシブの調整
   ========================================================================== */

/* ===== 00a 書体の読み込み ==============================================
   3書体・6ファイルのみ。すべて assets/fonts/ へ同梱し、実行時に外部CDNへ
   接続しない。ライセンスは SIL Open Font License 1.1（同梱の OFL-*.txt）。

   | 役割     | 書体                  | ウェイト | 用途                          |
   | 日本語見出し | IBM Plex Sans JP      | 500/600 | h1〜h3・大きなコピー・縦書き・企業名 |
   | 日本語本文  | Zen Kaku Gothic New   | 400/500 | 本文・ナビ・フォーム・キャプション   |
   | 英数字    | IBM Plex Mono         | 400/500 | 工程番号・英字ラベル・年号・記号    |

   収録文字：本サイトで使用する全文字 ＋ ASCII ＋ ひらがな ＋ カタカナ ＋ 約物
   （975字）。文章を差し替えて未収録の漢字が出た場合は、その字だけ
   フォールバックの角ゴシックで表示される（文字が消えることはない）。
   再サブセットの手順は README.md に記載。
   ====================================================================== */
@font-face{
  font-family:"IBM Plex Sans JP";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-sans-jp-500.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans JP";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-sans-jp-600.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/zen-kaku-gothic-new-400.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/zen-kaku-gothic-new-500.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ===== 00 基盤 ========================================================== */
:root{
  /* 配色：白い壁・鋼材・図面の線・青い作業着を一つの体系にする
     （基準色は WEB色見本 原色大辞典 https://www.colordic.org/ の色名に対応） */
  --paper:#FFFFFF;      /* 基本の白：主背景・余白 */
  --paper-w:#F5F5F5;    /* 温度を持つ白：やわらかい面 */
  --mist:#DCDCDC;       /* 霧のグレー：細線・境界 */
  --haze:#B0C4DE;       /* 淡い青灰色：透過する色面・工程の気配 */
  --slate:#708090;      /* スレートグレー：工程番号・図面線 */
  --steel:#4682B4;      /* スチールブルー：小面積の強調（面へ広く塗らない） */
  --deep:#2F4F4F;       /* 深い青灰色：見出し・縦書き・濃色面 */
  --ink:#20272B;        /* 本文の黒 */

  /* 文字用の派生色（白地・淡色地でWCAG AAを満たす明度に調整） */
  --slate-tx:#5A6872;   /* 補助文字（白地 5.7:1 / #F5F5F5地 5.3:1） */
  --steel-tx:#35618A;   /* 操作時の文字色（白地 6.5:1 / 最も濃い色面の上でも 5.2:1）*/
  --ink-70:rgba(32,39,43,.78);  /* 白地 10.1:1 */

  /* 線：図面の細線として、濃さを3段階だけ持つ */
  --line:rgba(112,128,144,.34);
  --line-soft:rgba(112,128,144,.18);
  --line-hair:rgba(112,128,144,.10);

  /* 書体：3役。フォールバックは Mac / Windows / iPhone で印象が大きく変わらない
     順（ヒラギノ角ゴ → BIZ UDPGothic → Noto Sans JP → 游ゴシック → メイリオ）。
     読込に失敗しても、この並びで必ず角ゴシックが当たる。 */
  --jp-head:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Noto Sans JP","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --jp-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Noto Sans JP","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular","SF Mono","DejaVu Sans Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  /* v1.1 からの別名（未改修箇所が残っても崩れないように残す） */
  --sans:var(--jp-body);

  --gut:clamp(18px,4.6vw,44px);
  --maxw:1340px;
  --rowgap:clamp(42px,5.4vw,86px);
  --ease:cubic-bezier(.22,.61,.24,1);

  /* 記録線の位置：全幅要素からも同じ x 座標を参照できるようにする */
  --railx:calc((100% - min(100%, var(--maxw)))/2 + max(8px, var(--gut) - 26px));

  /* 中央寄せの内側から、画面端へ写真を逃がすための量。
     セクション側で overflow-x:clip しているため、横スクロールは発生しない。
     v1.2：2048px のような広い画面で帯写真が伸びすぎ、max-height と噛み合って
     8:1 のような極端な比率になっていた。逃がす先を --vwcap で頭打ちにする。 */
  --vwcap:min(100vw, 1680px);
  --bleed:calc(var(--gut) + max(0px, (var(--vwcap) - var(--maxw))/2));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 本文は Zen Kaku Gothic New。行間は 1.75〜1.95 の範囲に収める */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--jp-body);
  font-weight:400;
  font-size:16px;
  line-height:1.88;
  font-feature-settings:"palt" 1;
  letter-spacing:.024em;
  text-underline-offset:.24em;
  /* iPhone のセーフエリア（横向き時の切り欠き）を避ける */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
@media (min-width:1000px){body{font-size:17px;line-height:1.86}}

img,picture,svg{max-width:100%}
img{height:auto;border:0;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.skip{
  position:absolute;left:8px;top:-60px;z-index:80;
  background:var(--ink);color:#fff;padding:10px 18px;
  font-size:14px;text-decoration:none;transition:top .2s;
}
.skip:focus{top:8px}
:target,main[id],section[id],[id^="s-"],[id^="c-"],[id^="f0"],[id^="x-"],[id^="p-"]{
  scroll-margin-top:clamp(72px,11vh,116px);
}
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ===== 01 文字組み ====================================================== */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  position:relative;z-index:1;   /* 背面の色面より前に置く */
}
.wrap--tight{max-width:1020px}

/* --- 本文（Zen Kaku Gothic New）：日本語でおおむね33〜38字 ---------------
   1行が長くなりすぎないよう max-width を em で持たせる。 */
.p{max-width:36em;line-height:1.88}
.p+.p{margin-top:1.05em}
.p--lead{font-size:clamp(16.5px,2vw,19px);line-height:1.86;max-width:32em;letter-spacing:.018em}
.p--s{font-size:14.5px;line-height:1.85;color:var(--slate-tx);max-width:34em}

/* --- 見出し（IBM Plex Sans JP）------------------------------------------
   本文より字間を詰め、ウェイト（600）とサイズで役割差を明確にする。
   本文 .024em ／ h3 .012em ／ h2 .004em ／ .big -.018em と、
   大きくなるほど詰める。 */
.h2,.h3,.big,h1,h2,h3,h4{font-family:var(--jp-head);font-weight:600}
.h2{font-size:clamp(22.5px,3.1vw,33px);line-height:1.44;letter-spacing:.004em}
.h3{font-size:clamp(17.5px,2.1vw,21px);line-height:1.56;letter-spacing:.012em}

/* 極端に大きい文字：ページごとの最重要見出しと、企業理念の間奏だけに使う。
   5ページで同じサイズ・同じ太さにしないため、ページ別の修飾子を持たせる。 */
.big{font-weight:600;line-height:1.26;letter-spacing:-.018em;font-size:clamp(29px,5.6vw,58px)}
.ln{display:block}

/* トップページの主見出し＝サイト全体でいちばん大きい1つ */
.big--hero{font-size:clamp(31px,4.6vw,60px);line-height:1.2;letter-spacing:-.026em}
/* 下層ページの h1：トップより一段小さく、ページごとにも差を付ける */
.big--page{font-size:clamp(27px,3.5vw,43px);line-height:1.3;letter-spacing:-.012em}
.big--page-l{font-size:clamp(28px,3.9vw,48px);line-height:1.28;letter-spacing:-.016em}
.big--page-s{font-size:clamp(26px,3.1vw,38px);line-height:1.34;letter-spacing:-.008em}
/* 理念の間奏：大きさより静けさ。ウェイトを落として色を沈める */
.big--quiet{font-weight:500;color:var(--deep);letter-spacing:-.006em}
.big--creed{font-size:clamp(28px,4.6vw,52px);line-height:1.38;font-weight:500}

/* 小見出しに相当する太字（項目名・引用・リンク見出し）も見出し書体へ寄せる。
   本文（Zen Kaku Gothic New）との差がはっきりしないと、
   結局ひと続きの角ゴシックに見えてしまうため。 */
.small__q,.dl dd,.ccreed__lbl,.ft__name,.next__list a,.send,
.note b,.list--row .n,.xtopics__list b,.xflow__list b,.chist__list b,
.prec__steps b,.field label,.nav a{
  font-family:var(--jp-head);
}
.small__q,.dl dd,.ft__name,.next__list a,.send,
.note b,.xtopics__list b,.xflow__list b,.chist__list b{font-weight:600}

/* 英数字（IBM Plex Mono）：工程番号・英字ラベル・年号・記号 */
.mono{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate-tx);font-weight:400;
  font-variant-numeric:tabular-nums;
}
.year{font-family:var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* 見出しの前に置く小さなラベル */
.eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:13px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-soft);transform:translateY(-4px)}
.eyebrow--short::after{flex:none;width:clamp(28px,5vw,72px)}

/* 定義リスト（会社概要・所在地） */
.dl{border-top:1px solid var(--line-soft)}
.dl>div{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 2px;border-bottom:1px solid var(--line-soft)}
.dl dt{font-size:12.5px;font-family:var(--mono);letter-spacing:.16em;color:var(--slate-tx)}
.dl dd{margin:0;font-size:16.5px;font-weight:700}
@media (min-width:700px){
  .dl>div{grid-template-columns:170px 1fr;gap:20px;align-items:baseline;padding:18px 4px}
  .dl dt{padding-top:.25em}
}

/* ===== 02 ページの地 ==================================================== */
/* 全幅の背景色を水平線で切り替えず、ページ全体を通した色温度の変化にする。
   割合指定のため、ページの長さが変わっても境目が生まれない。 */
main{
  position:relative;
  background:linear-gradient(180deg,
    #FFFFFF 0%, #FBFCFD 9%, #FFFFFF 20%, #F7F8F9 33%,
    #FDFDFD 46%, #F6F8F9 60%, #FFFFFF 72%, #F8FAFB 86%, #FFFFFF 100%);
}
/* さらに大きな淡い色面を重ねる（輪郭を持たないため境界線にならない） */
main::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 16% at 6% 12%, rgba(176,196,222,.17), rgba(176,196,222,0) 72%),
    radial-gradient(52% 14% at 96% 38%, rgba(176,196,222,.14), rgba(176,196,222,0) 74%),
    radial-gradient(70% 15% at 18% 66%, rgba(112,128,144,.075), rgba(112,128,144,0) 74%),
    radial-gradient(58% 13% at 88% 88%, rgba(176,196,222,.12), rgba(176,196,222,0) 74%);
}

/* 局所の色面：コンテンツの背面だけに置く。
   楕円を自分の箱へ内接させ（50% 50%）、四辺で必ず透明へ抜く。
   こうしないと箱の縁に色の段差が出て、水平線で切り替わったように見える。 */
.tint{position:absolute;z-index:0;pointer-events:none}
.tint--haze{background:radial-gradient(50% 50% at 50% 50%, rgba(176,196,222,.30), rgba(176,196,222,.13) 46%, rgba(176,196,222,0) 100%)}
.tint--steel{background:radial-gradient(50% 50% at 50% 50%, rgba(70,130,180,.13), rgba(70,130,180,.05) 48%, rgba(70,130,180,0) 100%)}
.tint--mist{background:radial-gradient(50% 50% at 50% 50%, rgba(220,220,220,.62), rgba(220,220,220,.24) 48%, rgba(220,220,220,0) 100%)}
.tint--deep{background:radial-gradient(50% 50% at 50% 50%, rgba(47,79,79,.12), rgba(47,79,79,.04) 48%, rgba(47,79,79,0) 100%)}

/* セクション：背景を持たせない。
   横方向だけを切り（画面端へ逃がした写真が横スクロールを生まないため）、
   縦は次のセクションへ色面・写真・線が抜けられるよう visible のままにする。 */
.sec,.fv,.small,.prec,.frail,.faero,.creed,.close,
.thero,.pintro,.cat,
.chero,.ccreed,.chist,.cwork,.chand,.cprof,
.xhero,.xtopics,.xflow,.xform,.xplace{
  position:relative;overflow-x:clip;overflow-y:visible;
}
.sec{padding-block:var(--rowgap)}
.sec--tight{padding-block:clamp(28px,3.6vw,54px)}
.sec--flush{padding-top:0}

/* 記録線：1本の線をページ全体へ通す（スクロールで少しずつ濃くなる） */
.rail{position:absolute;top:0;bottom:0;left:0;right:0;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);pointer-events:none;z-index:0}
.rail__l{position:absolute;top:0;bottom:0;left:max(8px,calc(var(--gut) - 26px));width:1px;background:var(--line-hair)}
.rail__l::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(47,79,79,.55),rgba(112,128,144,.28));
  transform:scaleY(var(--grow,1));transform-origin:top;
}
/* 工程の節：全幅セクションからでも同じ x 座標へ置ける */
.node{position:absolute;left:var(--railx);width:15px;height:1px;background:var(--slate);opacity:.75}
.node--lg{width:24px;height:1px;background:var(--deep)}

/* ===== 03 モチーフ ===================================================== */
/* 精密目盛り */
.scale{
  position:relative;height:15px;overflow:hidden;
  background-image:
    repeating-linear-gradient(to right, rgba(112,128,144,.75) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to right, rgba(112,128,144,.34) 0 1px, transparent 1px 8px);
  background-size:100% 15px,100% 8px;
  background-repeat:repeat-x,repeat-x;
  background-position:left top,left top;
}
.scale--s{height:10px;background-size:100% 10px,100% 6px}
.scan{
  position:absolute;left:0;top:0;bottom:0;width:104px;pointer-events:none;opacity:0;
  background:linear-gradient(to right, rgba(70,130,180,0), rgba(70,130,180,.62), rgba(70,130,180,0));
}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* --- 縦書き：役割の違う3種類 --------------------------------------------
   1種類の部品を全ページへ機械的に置くと、それ自体がテンプレートになる。
   v1.2 では「何のための縦書きか」で3種類に分け、置く位置も揃えない。

     .vt    小さな分類ラベル（罫線つき）  … 分野名・章の名前
     .vaxis 大きなキーワード（罫線なし）  … 構図の軸そのもの
     .vverb 短い動詞＋工程番号（測定線つき）… 写真と工程を結ぶ

   DOM上は自然な読み順のまま。装飾として重複する語だけ aria-hidden にする。
   長文・CTA・ナビ・フォームのラベルには使わない。 */

/* [1] 小さな分類ラベル */
.vt{
  display:flex;align-items:center;gap:12px;
  font-family:var(--jp-head);
  font-size:13px;font-weight:600;letter-spacing:.3em;color:var(--deep);
  margin-bottom:16px;
}
.vt__l{display:block;width:38px;height:1px;background:var(--steel);flex:none}

/* [2] 構図の軸になる大きなキーワード（罫線を持たない） */
.vaxis{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--jp-head);font-weight:600;color:var(--deep);
  font-size:clamp(21px,4.4vw,27px);letter-spacing:.16em;line-height:1.1;
  margin-bottom:14px;
}
.vaxis__n{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.2em;
  color:var(--steel-tx);flex:none;
}

/* [3] 短い動詞＋工程番号。写真と工程のつながりを示す */
.vverb{
  display:flex;align-items:center;gap:11px;
  font-family:var(--jp-head);font-weight:600;color:var(--deep);
  font-size:15px;letter-spacing:.22em;
  margin-bottom:12px;
}
.vverb__n{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;
  color:var(--steel-tx);flex:none;font-variant-numeric:tabular-nums;
}
.vverb__l{display:block;height:1px;background:var(--steel);flex:1;max-width:64px}

@media (min-width:1000px){
  .vt{
    writing-mode:vertical-rl;text-orientation:upright;
    flex-direction:column;align-items:center;gap:16px;
    font-size:clamp(14px,1.15vw,16px);letter-spacing:.34em;margin:0;
  }
  .vt__l{width:1px;height:clamp(44px,6.6vw,88px)}

  .vaxis{
    writing-mode:vertical-rl;text-orientation:upright;
    flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,24px);
    font-size:clamp(30px,3.5vw,50px);letter-spacing:.2em;margin:0;
  }
  .vaxis__n{writing-mode:vertical-rl;text-orientation:sideways;letter-spacing:.22em}

  .vverb{
    writing-mode:vertical-rl;text-orientation:upright;
    flex-direction:column;align-items:center;gap:13px;
    font-size:clamp(15px,1.4vw,19px);letter-spacing:.28em;margin:0;
  }
  .vverb__n{writing-mode:vertical-rl;text-orientation:sideways}
  .vverb__l{width:1px;height:clamp(34px,5vw,70px);max-width:none;flex:none}
}

/* 700〜999px：2〜4文字の短いものだけ縦書きのまま残す。
   大きな軸文字は本文幅を圧迫するため、横書きへ戻して小さくする。 */
@media (min-width:700px) and (max-width:999px){
  .vt,.vverb{
    writing-mode:vertical-rl;text-orientation:upright;
    flex-direction:column;align-items:center;margin:0;
  }
  .vt{gap:12px;font-size:14px;letter-spacing:.3em}
  .vt__l{width:1px;height:40px}
  .vverb{gap:10px;font-size:14.5px;letter-spacing:.24em}
  .vverb__l{width:1px;height:32px;max-width:none;flex:none}
  .vaxis{font-size:clamp(20px,2.6vw,26px);letter-spacing:.14em}
}

/* 工程番号 */
.num{
  font-family:var(--mono);font-size:clamp(26px,3.6vw,42px);line-height:1;
  color:var(--slate-tx);letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.num--s{font-size:clamp(19px,2.4vw,26px)}
.stephd{display:flex;align-items:baseline;gap:15px;margin-bottom:12px}

/* 注記：部品の見るべき箇所へ細線を伸ばして短い言葉を置く */
.notes{display:grid;gap:0;margin-top:20px;border-top:1px solid var(--line-soft)}
.note{
  display:grid;grid-template-columns:auto 1fr;gap:3px 13px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--line-soft);
}
.note__k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--steel-tx);padding-top:.3em}
.note b{grid-column:2;font-size:15.5px}
.note span{grid-column:2;font-size:14.5px;line-height:1.8;color:var(--slate-tx)}

/* 測定線：写真の見るべき箇所へ細線が伸び、小さな記号が付く。
   読ませる説明は写真の外（.notes）に置き、文字を写真へ重ねない。 */
.marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.mark{position:absolute;display:block;height:1px}
.mark i{
  display:block;height:1px;background:var(--steel);
  transform:scaleX(0);transform-origin:left center;transition:transform .85s var(--ease);
}
.mark i::after{
  content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
  border-radius:50%;background:var(--steel);
}
.mark em{
  position:absolute;left:-32px;top:-10px;font-style:normal;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--paper);background:var(--deep);padding:2px 6px;
  opacity:0;transition:opacity .5s .45s var(--ease);
}
html.motion .rv-in .mark i{transform:scaleX(1)}
html.motion .rv-in .mark em{opacity:1}
html:not(.motion) .mark i{transform:scaleX(1)}
html:not(.motion) .mark em{opacity:1}
/* 狭い幅では線と記号を出さない（写真が小さく、指し示す精度が保てないため） */
@media (max-width:699px){.marks{display:none}}

/* ===== 04 画像 ========================================================= */
.fig{position:relative}
.fig picture{display:block}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.cap{
  margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--slate-tx);
  display:flex;gap:10px;align-items:flex-start;max-width:34em;
}
.cap__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--steel-tx);flex:none;padding-top:.28em}
.note-img{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--slate-tx);margin-top:9px}

/* --- 端のなじませ方 -----------------------------------------------------
   既定は「あえてエッジを残す」。下の指定を付けた画像だけを処理する。

   v1.1 は割合（％）指定だったため、画面が広く写真が大きくなるほど
   フェードも広がり、2048px では帯写真の上端に 55px を超える白い霧が出て
   主題（手元・部品）が消えていた。
   v1.2 では px 固定にして、どの表示幅でも端 28〜56px までに閉じ込める。
   写真の中央へは決して届かない。 */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .im-fl picture{ /* 左端だけを溶かす（見出しを重ねる側） */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 52px);
            mask-image:linear-gradient(to right,transparent 0,#000 52px);
  }
  .im-fr picture{ /* 右端だけを画面外へ逃がす */
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 48px);
            mask-image:linear-gradient(to left,transparent 0,#000 48px);
  }
  .im-fb picture{ /* 下端だけを次のセクションへなじませる */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent 100%);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent 100%);
  }
  .im-ft picture{ /* 上端だけを前のセクションへなじませる */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);
            mask-image:linear-gradient(to bottom,transparent 0,#000 34px);
  }
  .im-fd picture{ /* 斜めに一方向だけ抜く（角を落とす目的） */
    -webkit-mask-image:linear-gradient(107deg,transparent 0,#000 56px);
            mask-image:linear-gradient(107deg,transparent 0,#000 56px);
  }
  /* 重ねる小写真の接触面だけを局所的になじませる（§5.3）。
     画像全体へ blur をかけず、主題そのものはぼかさない。 */
  .im-touch-l picture{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px);
            mask-image:linear-gradient(to right,transparent 0,#000 40px);
  }
}
/* 色温度と黒の深さを5ページでそろえる（過度なぼかし・フィルターは重ねない） */
.tn-a picture{filter:saturate(.94) contrast(1.02)}
.tn-b picture{filter:saturate(.88) contrast(1.01) brightness(1.015)}
.tn-c picture{filter:saturate(.98) contrast(1.04)}

/* 部分拡大（同じ写真から細部を取り出し、全体写真との主従をつくる） */
.zoom{position:relative;overflow:hidden;background:var(--paper-w)}
.zoom img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--zx,50%) var(--zy,50%);
  transform:scale(var(--zs,2.2));
  transform-origin:var(--zx,50%) var(--zy,50%);
}

/* ===== 05 ヘッダー ===================================================== */
.demorail{background:var(--paper);border-bottom:1px solid var(--line-hair)}
.demorail p{
  max-width:var(--maxw);margin-inline:auto;padding:6px var(--gut);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--slate-tx);
}
.demorail__tag{color:var(--steel-tx);border:1px solid rgba(70,130,180,.38);padding:1px 7px}

.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:saturate(1.08) blur(3px)}
.hd__in{
  max-width:var(--maxw);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hd__rule{height:1px;background:var(--line-hair)}
.wordmark{text-decoration:none;display:block;line-height:1.2;padding-block:6px;min-height:44px}
/* 企業名は見出し書体。全ページで同じ印象を先に決める要素 */
.wordmark__ja{display:block;font-family:var(--jp-head);font-size:clamp(15px,2.4vw,18px);font-weight:600;letter-spacing:.055em}
.wordmark__en{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--slate-tx);margin-top:4px}

/* メニューボタン：外枠と塗りを持たない。文字と2本の細線だけで構成する */
.menub{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;cursor:pointer;
  padding:11px 2px 11px 10px;min-width:44px;min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.menub__bars{display:block;width:22px;height:9px;position:relative;flex:none}
.menub__bars::before,.menub__bars::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:var(--ink);
  transition:transform .32s var(--ease),top .32s var(--ease),width .32s var(--ease);
}
.menub__bars::before{top:0}
.menub__bars::after{top:8px;width:15px}
.menub[aria-expanded="true"] .menub__bars::before{top:4px;transform:rotate(45deg)}
.menub[aria-expanded="true"] .menub__bars::after{top:4px;width:100%;transform:rotate(-45deg)}
.menub__tx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink)}
.menub:hover .menub__bars::after{width:100%}

.nav{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line-soft);
  padding:4px var(--gut) 20px;
  max-height:calc(100vh - 100%);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s .26s;
}
.nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s 0s}
.nav a{
  display:flex;align-items:center;gap:12px;min-height:48px;
  padding:11px 2px;text-decoration:none;border-bottom:1px solid var(--line-hair);
  font-size:16px;font-weight:700;
}
.nav a .mono{flex:none}
.nav a[aria-current="page"]{color:var(--deep)}
.nav a[aria-current="page"]::after{content:"";width:16px;height:1px;background:var(--steel);align-self:center}

@media (min-width:1000px){
  .menub{display:none}
  .nav{
    position:static;opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible;
    background:none;border:0;padding:0;display:flex;gap:clamp(14px,2.2vw,30px);
  }
  .nav ul{display:flex;gap:clamp(14px,2.4vw,32px)}
  /* 上下の余白でクリック領域を44px相当まで広げる（ヘッダーの高さは変わらない） */
  .nav a{border:0;padding:9px 1px;min-height:0;font-size:14.5px;font-weight:500;letter-spacing:.04em;position:relative;display:block}
  .nav a .mono{display:none}
  .nav a::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
    transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
  }
  .nav a:hover::before,.nav a:focus-visible::before{transform:scaleX(1)}
  .nav a[aria-current="page"]{font-weight:700}
  .nav a[aria-current="page"]::before{transform:scaleX(1);background:var(--steel);height:2px}
  .nav a[aria-current="page"]::after{display:none}
}

/* ===== 06 リンク・CTA ================================================== */
/* 箱を使わず、文字・細線・矢印だけで構成する。
   主導線と副導線は、文字サイズ・ウェイト・線の長さ・置く位置で区別する。 */
.alink{
  display:inline-flex;align-items:center;gap:.7em;
  text-decoration:none;color:var(--deep);font-weight:700;
  min-height:44px;padding-block:9px;
  -webkit-tap-highlight-color:transparent;
}
.alink__tx{
  position:relative;
  box-shadow:inset 0 -1px 0 0 rgba(47,79,79,.32);  /* 常に見える下線＝色に依存しない手がかり */
  transition:box-shadow .3s var(--ease),color .3s var(--ease);
}
.alink__ar{
  position:relative;display:block;height:1px;flex:none;
  background:currentColor;width:34px;
  transition:width .34s var(--ease),transform .34s var(--ease);
}
.alink__ar::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.alink:hover,.alink:focus-visible{color:var(--steel-tx)}
.alink:hover .alink__tx,.alink:focus-visible .alink__tx{box-shadow:inset 0 -1px 0 0 currentColor}
.alink:hover .alink__ar,.alink:focus-visible .alink__ar{width:52px}

/* 主導線：大きく、線も長い */
.alink--lead{font-size:clamp(17px,2.1vw,20.5px);letter-spacing:.01em}
.alink--lead .alink__ar{width:46px}
.alink--lead:hover .alink__ar,.alink--lead:focus-visible .alink__ar{width:68px}
/* 副導線：小さく、ウェイトを落とし、主導線の下または後ろへ置く */
.alink--sub{font-size:14.5px;font-weight:500;color:var(--slate-tx)}
.alink--sub .alink__tx{box-shadow:inset 0 -1px 0 0 rgba(112,128,144,.34)}
.alink--sub .alink__ar{width:24px}
.alink--sub:hover .alink__ar,.alink--sub:focus-visible .alink__ar{width:38px}

/* 主導線と副導線の組：横並びではなく、大小と行送りで差をつける */
.acts{display:grid;gap:6px;justify-items:start;margin-top:22px}
@media (min-width:700px){
  .acts{grid-auto-flow:column;grid-auto-columns:max-content;align-items:baseline;gap:clamp(24px,4vw,54px)}
}

/* 写真へ食い込む見出しの下地。
   白い長方形に見せないため、右と上の両方向へ必ず透明へ抜く。
   （下地は疑似要素に持たせ、文字自体はぼかさない） */
.onphoto{position:relative}
.onphoto > *{position:relative}
.onphoto::before{content:none}
@media (min-width:700px){
  .onphoto::before{
    content:"";position:absolute;inset:-56px -6px -16px -10px;pointer-events:none;
    /* v1.1 は右端だけを抜いていたため、白い長方形が写真へ貼られたように見えていた。
       v1.2 は上・右・下の三方向へ必ず抜き、光が当たっているように見せる。
       文字の背後（左寄りの範囲）は不透明のまま残すのでコントラストは落とさない。 */
    background:linear-gradient(99deg,
      rgba(255,255,255,.96) 0,
      rgba(255,255,255,.945) 50%,
      rgba(255,255,255,.80) 76%,
      rgba(255,255,255,0) 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 22px),transparent 100%);
  }
}

/* ===== 07 フッター／次に読むページ ===================================== */
.next{position:relative;padding-block:clamp(28px,3.6vw,46px);border-top:1px solid var(--line-hair)}
.next__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:grid;gap:16px}
.next__ttl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--slate-tx)}
.next__list{display:grid;gap:12px}
.next__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:44px;
  text-decoration:none;border-bottom:1px solid var(--line-soft);padding-block:10px;
  font-size:clamp(16px,2.1vw,19px);font-weight:700;
}
.next__list a span:last-child{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--steel-tx);
  transition:transform .3s var(--ease);flex:none;
}
.next__list a:hover,.next__list a:focus-visible{border-bottom-color:var(--deep)}
.next__list a:hover span:last-child,.next__list a:focus-visible span:last-child{transform:translateX(6px)}
@media (min-width:700px){.next__list{grid-template-columns:1fr 1fr;gap:12px 36px}}

.ft{position:relative;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(176,196,222,.09),rgba(176,196,222,.16))}
.ft__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(36px,5vw,64px) var(--gut) 30px;position:relative;z-index:1}
.ft__top{display:grid;gap:clamp(24px,3.4vw,48px)}
.ft__name{font-size:clamp(17px,2.3vw,20px);font-weight:700;letter-spacing:.05em}
.ft__addr{margin-top:11px;font-size:14.5px;line-height:1.85;color:var(--slate-tx)}
/* 短い語のリンクでもタップ領域が44px相当になるよう、左右へ余白を持たせる。
   リスト側を同じ量だけ引き戻すので、文字の左端は本文とそろったまま。 */
.ft nav ul{display:grid;gap:4px;margin-left:-14px}
.ft nav a{
  position:relative;display:inline-flex;align-items:center;
  min-height:44px;min-width:44px;padding-inline:14px;
  font-size:14.5px;text-decoration:none;
  box-shadow:inset 0 -1px 0 0 transparent;transition:box-shadow .3s;
}
.ft nav a:hover,.ft nav a:focus-visible{box-shadow:inset 0 -1px 0 0 var(--slate)}
.ft__note{
  margin-top:clamp(26px,3.4vw,44px);padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:12.5px;line-height:1.85;color:var(--slate-tx);max-width:60em;
}
.ft__copy{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--slate-tx)}
@media (min-width:700px){.ft__top{grid-template-columns:1.4fr 1fr 1fr}}

/* ===== 08 トップページ ================================================= */
/* [1] ファーストビュー：写真は右上へ抜け、見出しは写真の左下へ食い込む */
.fv{position:relative;padding-top:clamp(16px,2.4vw,30px);padding-bottom:clamp(34px,5vw,74px);overflow-x:clip}
.fv__in{position:relative}
.fv__photo{position:relative;margin-inline:calc(var(--bleed)*-1)}
.fv__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:52% 50%}
.fv__type{position:relative;z-index:2;margin-top:22px}
.fv__co{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--steel-tx);display:block;width:max-content;max-width:100%;margin-bottom:14px}
.fv__h1{margin-bottom:18px}
.fv__scale{margin:20px 0 16px;max-width:520px}
.fv__meta{display:grid;gap:8px;margin-top:20px}
.fv__meta li{display:flex;align-items:baseline;gap:12px;font-size:14px;color:var(--slate-tx)}
.fv__meta b{font-size:15.5px;color:var(--ink);font-weight:700}
/* 写真の下端は白でぼかさず、淡い青灰の色面へ受け渡す */
.fv__tint{left:-6%;right:-14%;top:34%;bottom:-42%}

/* [2] 社会を支える小さな部品：大きな言葉が主役、写真は小さく添える */
.small{position:relative}
.small__q{
  font-size:clamp(18px,2.4vw,23px);font-weight:700;line-height:1.6;
  color:var(--deep);max-width:25em;margin-top:clamp(18px,2.6vw,30px);
}
.small__body{margin-top:clamp(16px,2.2vw,26px)}
.small__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:46% 58%}
.small__tint{left:44%;right:-18%;top:-14%;bottom:6%}

/* [3] 長年の経験が、精度を生む。
   --------------------------------------------------------------------------
   v1.1 は旋盤写真の右下へ測定写真を硬い長方形のまま重ね、面積の約26%が
   重なって職人の手とマイクロメーターが衝突していた（指摘スクリーンショット2）。

   v1.2 は重ねること自体をやめ、
     ・旋盤写真＝「削る」／測定写真＝「測る」と役割を分ける
     ・2枚は上下へずらし、間に 28〜44px の余白を置く
     ・その余白に縦書きの動詞と工程番号（02 / 03）を通して関係を示す
     ・「経験」を大きな縦書きにして構図の軸にする
     ・英字ラベル→大見出し→本文→写真という順序をやめ、軸→見出し→写真の順にする
   ------------------------------------------------------------------------ */
.prec{position:relative}

/* 主写真：旋盤に向かう職人（作業全体）。焦点は手元の部品 */
.prec__a img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:44% 34%}
/* 副写真：マイクロメーター（測定の細部）。主写真より明確に小さくする */
.prec__b img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 46%}
.prec__b{position:relative}

.prec__steps{margin-top:22px}
.prec__steps li{display:grid;grid-template-columns:auto 1fr;gap:2px 15px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.prec__steps li:first-child{border-top:1px solid var(--line-soft)}
.prec__steps .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--steel-tx);padding-top:.42em}
.prec__steps b{font-family:var(--jp-head);font-weight:600;font-size:16px;letter-spacing:.01em}
.prec__steps p{font-size:14.5px;color:var(--slate-tx);line-height:1.8;grid-column:2}
/* 02「削る」と 03「測る」は右の2枚の写真と対応する。
   一覧を下へ並べただけに見せないよう、対応する行にだけ細い測定線を出す。 */
.prec__steps li[data-tie]{position:relative}
.prec__steps li[data-tie] .n{color:var(--deep);font-weight:500}
.prec__steps li[data-tie]::after{
  content:"";position:absolute;right:-2px;top:22px;width:26px;height:1px;background:var(--steel);opacity:.85;
}
.prec__tint{left:-12%;right:36%;top:8%;bottom:-16%}

/* [4] 鉄道：全幅の横長。説明は写真の下端へ食い込ませる */
.frail{position:relative;margin-top:clamp(26px,3.6vw,44px)}
.frail__fig img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:44% 56%;min-height:190px}
.frail__tx{position:relative;z-index:2;margin-top:16px}
.frail__tx h3{margin-bottom:9px}
/* [4b] 航空：縦長・小さく・余白を大きく取り、鉄道とは密度を変える */
.faero{position:relative;margin-top:clamp(24px,3.4vw,44px)}
.faero__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:46% 58%}
.faero__tx h3{margin-bottom:9px}

/* [5] 企業理念：画面幅を使った大きな言葉の間奏（写真と文章の2列にしない） */
.creed{position:relative;padding-block:clamp(38px,4.6vw,72px);overflow-x:clip}
.creed__big{max-width:16em}
.creed__body{max-width:33em;margin-top:clamp(20px,2.8vw,32px)}
.creed__tint{left:-10%;right:-10%;top:-8%;bottom:-14%}

/* 間奏の締め：検査台の写真
   --------------------------------------------------------------------------
   何が主題か：検査台の盆に並ぶ同型の精密部品（約50本）と、
              そこから一本を取り上げている職人の手。
              キャプション「同じ形が並ぶこと…」の根拠は“並んだ部品”のほう。

   v1.1 の問題（指摘スクリーンショット3）：
     aspect-ratio:16/5 に max-height:min(30vh,250px) が重なり、
     2048px では 2048×250＝8.19:1 という極端な帯になっていた。
     さらに object-position:50% 44% が画面中央＝手と壁を指していたため、
     根拠となる部品群が枠の外へ落ち、手だけが見える表示幅が生まれていた。
     上端には割合指定の白フェード（高さの22％＝55px）もかかっていた。

   v1.2 の方針：
     ・帯をやめ、比率を 16:9（1.78:1）にする。16:7＝2.29:1 より横長にしない
     ・元画像も 16:9 なので、デスクトップとタブレットでは一切トリミングしない
       ＝どの表示幅でもトレーと部品群が必ず全部入る
     ・スマートフォンだけ <picture> で 1x1 版へ切り替え、4:3 で下寄せに切る
     ・max-height は与えない（与えると比率が壊れて元の不具合が再発する）
     ・上端の白フェードは削除し、自然な写真端を残す

   焦点位置：デスクトップ 50% 62%／タブレット 50% 62%／スマートフォン 45% 72%
            （いずれも下側のトレーと部品群を基準にした値） */
.creed__rec{margin-top:clamp(30px,4.2vw,56px)}
.creed__rec img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 62%;
}
/* 写真の脇に置く小さな軸。写真の主題（トレーと部品）へはかからない */
.creed__recv{color:var(--slate-tx)}

/* [6] 問い合わせ導線：四角いボタンを使わず、本文から文字リンクへつなぐ */
.close{position:relative;overflow-x:clip;padding-bottom:clamp(30px,4.4vw,60px)}
.close__fig img{width:100%;aspect-ratio:3/1;object-fit:cover;object-position:50% 56%;min-height:180px}
.close__tx{position:relative;z-index:2;margin-top:-12px}
.close__h2{max-width:22em}
.close__tint{left:-8%;right:20%;top:26%;bottom:-10%}

/* 全幅の帯写真は、キャプションだけを本文の列へそろえる */
.ccreed__strip figcaption{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
/* 左端へ抜ける写真のキャプションは、本文の左端まで戻す */
@media (min-width:1000px){
  .chand__fig .cap{padding-left:var(--bleed)}
}
.field__head{display:grid;gap:14px}
.field__act,.prec__act,.small__act{margin-top:18px}

@media (min-width:1000px){
  .fv{padding-bottom:clamp(46px,6vw,88px)}
  .fv__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .fv__photo{grid-column:6/13;grid-row:1;margin-inline:0;margin-right:calc(var(--bleed)*-1)}
  .fv__photo img{aspect-ratio:auto;height:min(66vh,600px);min-height:0}
  /* 見出しの列（1〜6）と写真の列（6〜12）は6列目を共有しており、
     見出しが写真の左端へわずかに食い込む構図。
     v1.2 で左端のフェードを 52px へ狭めたため、文字が実写真へ乗ると読みにくい。
     文字側の幅を抑え、どの表示幅でも写真の手前で止まるようにする。 */
  .fv__type{grid-column:1/7;grid-row:1;align-self:end;margin-top:0;padding-bottom:clamp(6px,1.6vw,22px)}
  .fv__type .p--lead{max-width:21em}
}
/* 1000〜1279px は列幅に対して主見出しが大きく、写真へ届いてしまう */
@media (min-width:1000px) and (max-width:1279px){
  .big--hero{font-size:clamp(31px,3.9vw,46px)}
}
@media (min-width:1000px){
  .fv__vt{grid-column:5/6;grid-row:1;align-self:start;justify-content:center;padding-top:clamp(16px,3vw,44px);z-index:2}

  .small__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .small__hd{grid-column:1/8;grid-row:1}
  .small__vt{grid-column:12/13;grid-row:1;justify-self:center;align-self:start;padding-top:clamp(6px,1.4vw,18px)}
  .small__fig{grid-column:9/12;grid-row:1/5;margin-top:clamp(38px,4.8vw,78px);align-self:start}
  /* 引用の一文が1行に収まる幅を与える（「す。」だけが次行へ落ちるのを防ぐ） */
  .small__q{grid-column:1/7;grid-row:2}
  .small__body{grid-column:1/6;grid-row:3}
  .small__act{grid-column:1/6;grid-row:4}

  /* 軸（経験）→ 見出し → 主写真 → 動詞 → 副写真 の順に読ませる。
     写真どうしは列も行も分け、重なりを持たせない。 */
  .prec__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .prec__axis{grid-column:1/2;grid-row:1/4;justify-self:center;align-self:start;
    padding-top:clamp(10px,2.4vw,38px);z-index:2}
  .prec__hd{grid-column:2/7;grid-row:1;padding-top:clamp(8px,1.6vw,24px)}
  .prec__a{grid-column:7/12;grid-row:1/3;margin-top:clamp(28px,4.4vw,64px)}
  .prec__va{grid-column:6/7;grid-row:2;justify-self:center;align-self:end;
    padding-bottom:clamp(10px,1.8vw,26px)}
  .prec__steps{grid-column:2/6;grid-row:2;margin-top:clamp(26px,3.6vw,50px)}
  /* 副写真は主写真の下へ、28〜44px あけて置く（重ねない） */
  .prec__b{grid-column:8/12;grid-row:3;margin-top:clamp(28px,3.2vw,44px)}
  .prec__vb{grid-column:7/8;grid-row:3;justify-self:center;align-self:start;
    margin-top:clamp(34px,4vw,58px)}
  .prec__act{grid-column:2/7;grid-row:3;align-self:start;margin-top:clamp(22px,3vw,40px)}
  .prec__a img{max-height:min(60vh,600px)}
  .prec__b img{max-height:min(38vh,400px)}

  .frail__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .frail__fig{grid-column:1/13;grid-row:1;margin-inline:calc(var(--bleed)*-1)}
  /* v1.1 は縦書き「鉄道」を負のマージンで写真の下端へ重ねていたが、
     この写真は作業台が暗く、濃い文字色ではコントラストが足りなかった。
     写真の外へ出し、下地なしでも読める位置に置く。 */
  .frail__vt{grid-column:1/2;grid-row:2;justify-self:center;align-self:start;margin-top:clamp(8px,1.2vw,20px)}
  .frail__tx{grid-column:2/7;grid-row:2;margin-top:clamp(-96px,-8vw,-52px);z-index:2;align-self:start;
    padding:clamp(18px,2.2vw,28px) clamp(52px,6vw,96px) clamp(6px,1vw,12px) 0;}
  .frail__note{grid-column:8/13;grid-row:2;align-self:start;margin-top:16px}

  .faero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:start}
  .faero__fig{grid-column:7/10;grid-row:1}
  .faero__vt{grid-column:11/12;grid-row:1;justify-self:center;padding-top:clamp(10px,2vw,26px)}
  .faero__tx{grid-column:2/6;grid-row:1;padding-top:clamp(24px,4vw,64px)}

  .creed__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .creed__tx{grid-column:2/11;grid-row:1}
  .creed__vt{grid-column:12/13;grid-row:1;justify-self:center;align-self:start;padding-top:clamp(6px,1.4vw,18px)}

  /* 検査台の写真：帯にせず、本文列の内側で 16:9 のまま見せる。
     縦書きとキャプションは写真の右へ逃がし、部品群にはかけない。 */
  .creed__recin{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:start}
  .creed__rec{grid-column:1/9;grid-row:1;margin-top:0}
  .creed__recv{grid-column:9/10;grid-row:1;justify-self:center;padding-top:clamp(12px,2vw,30px)}
  .creed__reccap{grid-column:10/13;grid-row:1;padding-top:clamp(14px,2.4vw,36px)}

  .close__tx{margin-top:clamp(-70px,-5.6vw,-34px)}
  .close__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:end}
  .close__head{grid-column:1/7;grid-row:1;
    padding:clamp(16px,2vw,26px) clamp(48px,6vw,92px) clamp(8px,1.2vw,14px) 0;}
  .close__body{grid-column:7/12;grid-row:1;padding-bottom:clamp(4px,1vw,12px)}
  .close__acts{grid-column:1/12;grid-row:2;margin-top:clamp(18px,2.4vw,30px)}
}

/* ===== 09 技術と品質 =================================================== */
.thero{position:relative;padding-top:clamp(22px,3.2vw,42px);overflow-x:clip}
.thero__h1{max-width:18em}
.thero__lead{margin-top:20px;margin-bottom:clamp(22px,3.4vw,44px)}
.thero__band{position:relative;overflow:hidden}
.thero__band img{width:100%;aspect-ratio:21/9;object-fit:cover;min-height:190px}
.thero__tint{left:-8%;right:-8%;top:40%;bottom:-30%}

/* 工程：全体を1本の記録として読ませる。偶数・奇数の左右反転はしない。
   横方向のはみ出しは .step ではなく .flow でまとめて切る。
   こうしないと、工程をまたぐ縦書き（.st2__axis「切削」）が
   セクションの境界で切り落とされてしまう。 */
.flow{position:relative;overflow-x:clip}
.step{position:relative;padding-block:clamp(26px,3.4vw,48px);overflow:visible}
.step__lead{max-width:38em}
.list{margin-top:18px;display:grid;gap:9px}
.list li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14.5px;line-height:1.8;color:var(--slate-tx)}
.list li::before{content:"";width:13px;height:1px;background:var(--steel);margin-top:.85em}

/* 確認項目を写真の余白へ縦に流し込まず、工程の要約として横へ並べる形。
   同じ .list を全ページで縦に反復させないための別構造。 */
.list--row{margin-top:0;border-top:1px solid var(--line-soft);padding-top:clamp(14px,1.8vw,22px)}
.list--row li{
  display:block;grid-template-columns:none;gap:0;
  padding-top:15px;color:var(--slate-tx);font-size:14.5px;line-height:1.78;
}
.list--row li::before{
  display:block;width:22px;margin:0 0 11px;background:var(--steel);
}
.list--row .n{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--steel-tx);margin-bottom:5px;
}
@media (min-width:700px){
  .list--row{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(18px,2.6vw,40px)}
  .list--row li{padding-top:0}
}

/* 01 素材と用途：写真は上端の細い帯。文字が主役 */
.st1__fig img{width:100%;aspect-ratio:5/2;object-fit:cover;object-position:50% 52%;min-height:120px}
.st1__tint{left:-14%;right:42%;top:18%;bottom:-18%}
/* 02 切削：横長の大きな写真が主役。見出しを写真へ食い込ませる */
.st2{padding-top:clamp(10px,1.6vw,20px)}
.st2__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:44% 30%;min-height:200px}
.st2__tx{position:relative;z-index:2;margin-top:-10px}
/* 03 ねじ山：文章を写真の上へ置き、細部へ測定線を伸ばす */
.st3__fig{position:relative}
.st3__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%}
.st3__tint{left:36%;right:-16%;top:-10%;bottom:14%}
.st3__marks .mark--a{left:19%;top:34%;width:17%}
.st3__marks .mark--b{left:44%;top:63%;width:20%}
/* 04 測定と検査
   --------------------------------------------------------------------------
   v1.1 は検査台写真をマイクロメーター写真の右下へ硬い長方形のまま重ね、
   面積の約18%（モバイルでは28%）が重なって、
   マイクロメーターを持つ手と、盆から一本を取り上げる手が衝突していた
   （指摘スクリーンショット1）。

   v1.2 は
     ・マイクロメーター写真を主写真として左へ大きく置く
     ・検査台写真は右の別の列へ移し、下へずらす（重ねない）
     ・2枚の間の列に縦書き「測る」と工程番号 04、細い測定線を通す
     ・見出し・本文・3つの確認項目を写真の余りへ2分割せず、
       主写真 → 見出しと本文 → 3項目 の順に上から読み進められるようにする
   ------------------------------------------------------------------------ */
/* 主写真：マイクロメーターの目盛りを読む手元。焦点は目盛りと指先 */
.st4__a img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 48%}
/* 副写真：検査台に整列した部品。焦点は盆の中の部品群（下寄り） */
.st4__b img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:46% 52%}
.st4__b{position:relative}
/* 05 記録：写真を控えめにし、台帳・番号・伸びる線・余白を主役にする */
.st5{padding-bottom:clamp(40px,5.4vw,80px)}
.st5__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:48% 55%}
.st5__tint{left:-10%;right:52%;top:-6%;bottom:-8%}

@media (min-width:1000px){
  .thero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:end}
  .thero__h1w{grid-column:1/8;grid-row:1}
  .thero__lead{grid-column:8/13;grid-row:1;margin-top:0;margin-bottom:0;padding-bottom:6px}

  .st1__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .st1__fig{grid-column:6/13;grid-row:1;margin-right:calc(var(--bleed)*-1)}
  .st1__tx{grid-column:2/8;grid-row:2;margin-top:clamp(22px,3vw,40px)}
  .st1__list{grid-column:8/12;grid-row:2;margin-top:clamp(52px,6.4vw,96px)}

  .st2__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .st2__fig{grid-column:1/11;grid-row:1;margin-left:calc(var(--bleed)*-1)}
  /* 「切削」は写真の右の空き列へ。上端を前セクションの余白へ持ち上げ、
     01 と 02 をまたぐ位置に置く（.step は overflow-y:visible） */
  .st2__axis{grid-column:11/13;grid-row:1;justify-self:center;align-self:start;
    margin-top:clamp(-108px,-8vw,-56px);z-index:2}
  .st2__tx{grid-column:2/8;grid-row:2;margin-top:clamp(-92px,-7vw,-46px);align-self:start;
    padding:clamp(18px,2.2vw,28px) clamp(52px,6vw,96px) clamp(4px,1vw,10px) 0;}
  .st2__body{grid-column:8/13;grid-row:2;margin-top:clamp(18px,2.6vw,34px)}

  .st3__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .st3__tx{grid-column:1/8;grid-row:1}
  .st3__vt{grid-column:12/13;grid-row:1;justify-self:center;align-self:start;padding-top:8px}
  .st3__fig{grid-column:3/13;grid-row:2;margin-top:clamp(20px,2.8vw,36px);margin-right:calc(var(--bleed)*-1)}
  .st3__notes{grid-column:3/9;grid-row:3;margin-top:clamp(16px,2.2vw,28px)}

  /* 主写真（1〜7列）と副写真（9〜12列）の間に、8列目を丸ごとあける。
     その1列に縦書き「測る」＋工程番号＋測定線を通し、2枚を結ぶ。 */
  .st4__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .st4__a{grid-column:1/8;grid-row:1;margin-left:calc(var(--bleed)*-1)}
  .st4__vv{grid-column:8/9;grid-row:1;justify-self:center;align-self:start;
    padding-top:clamp(64px,9vw,150px);z-index:2}
  .st4__b{grid-column:9/13;grid-row:1;align-self:start;margin-top:clamp(78px,10vw,164px)}
  .st4__tx{grid-column:2/8;grid-row:2;margin-top:clamp(30px,4vw,56px)}
  .st4__list{grid-column:2/12;grid-row:3;margin-top:clamp(26px,3.4vw,46px)}
  .st4__b img{max-height:min(40vh,420px)}

  .st5__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .st5__vt{grid-column:1/2;grid-row:1;justify-self:center;align-self:start;padding-top:clamp(14px,2.4vw,34px)}
  .st5__tx{grid-column:2/7;grid-row:1}
  .st5__fig{grid-column:9/13;grid-row:1;margin-top:clamp(44px,6vw,92px)}
}

/* ===== 10 製品情報 ===================================================== */
/* 4分野それぞれに異なる視覚構造を与える（同じ部品への差し替えにしない） */
.pintro{position:relative;padding-top:clamp(22px,3.2vw,42px);padding-bottom:clamp(26px,3.6vw,50px);overflow-x:clip}
.pintro__fig img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:45% 62%}
.pintro__tint{left:30%;right:-16%;top:20%;bottom:-40%}

.cat{position:relative;overflow-x:clip;overflow-y:visible}

/* 01 鉄道：大きな横長写真を低い位置へ。注記線で見るべき箇所を示す */
.crail{padding-block:clamp(28px,3.6vw,52px)}
.crail__fig{position:relative}
.crail__fig img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:44% 58%;min-height:200px}
.crail__tint{left:-12%;right:24%;top:-10%;bottom:34%}
.crail__marks .mark--a{left:22%;top:30%;width:14%}
.crail__marks .mark--b{left:46%;top:56%;width:16%}
.crail__marks .mark--c{left:66%;top:38%;width:13%}

/* 02 航空：縦長・小さく・余白を大きく。鉄道と密度を変える */
.caero{padding-block:clamp(34px,4.6vw,78px)}
.caero__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:48% 58%}
.caero__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--slate-tx);display:block;margin-bottom:10px}

/* 03 産業機械：画面幅近くまで使う横長。文章は上下へ分解する */
.cbolt{padding-block:clamp(28px,3.6vw,52px)}
.cbolt__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:45% 56%;min-height:190px}
.cbolt__tint{left:-6%;right:-6%;top:22%;bottom:-16%}

/* 04 特注：図録・標本のように見せる（1枚から数か所を拡大する）
   見出し「特注ネジ・小型精密部品」のうち "特注" だけを縦書きへ分離し、
   残りを横書きで受ける。1000px未満では素直な横書きへ戻す。 */
.ccus{padding-block:clamp(28px,3.6vw,52px)}
.ccus__vin{display:inline}
@media (min-width:1000px){
  .ccus__h2{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,20px)}
  .ccus__vin{
    writing-mode:vertical-rl;text-orientation:upright;
    font-size:clamp(30px,3.2vw,42px);letter-spacing:.14em;line-height:1;
    color:var(--deep);flex:none;padding-top:2px;
  }
  .ccus__rest{padding-top:.28em}
}
.plate{position:relative;margin-top:clamp(20px,2.8vw,34px)}
.plate__main img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 55%}
.plate__zooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);margin-top:14px}
.plate__z{position:relative}
.plate__z .zoom{aspect-ratio:1/1;outline:1px solid var(--line-soft);outline-offset:-1px}
.plate__z figcaption{
  margin-top:8px;font-size:11.5px;line-height:1.65;color:var(--slate-tx);
  display:grid;gap:2px;
}
.plate__z figcaption .mono{font-size:10.5px;letter-spacing:.18em;color:var(--steel-tx)}
.ccus__tint{left:24%;right:-14%;top:-8%;bottom:12%}

@media (min-width:1000px){
  .pintro__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:end}
  .pintro__tx{grid-column:1/9;grid-row:1}
  .pintro__fig{grid-column:9/12;grid-row:1;margin-bottom:clamp(-40px,-3.4vw,-18px)}
  .pintro__vt{display:flex;grid-column:12/13;grid-row:1;justify-self:center;align-self:center}

  .crail__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .crail__hd{grid-column:1/7;grid-row:1}
  /* 「鉄道」は写真の左端に沿って立て、本文は写真の反対側（右）へ離す。
     航空（右端・小さな .vt）とは、位置も大きさも変える。 */
  .crail__axis{grid-column:8/10;grid-row:1;justify-self:end;align-self:end;
    padding-bottom:clamp(4px,1vw,14px)}
  .crail__fig{grid-column:1/13;grid-row:2;margin-top:clamp(22px,3vw,40px);margin-inline:calc(var(--bleed)*-1)}
  .crail__fig img{aspect-ratio:21/9}
  /* 説明は写真の外側と下端へ食い込ませる */
  .crail__tx{grid-column:2/7;grid-row:3;margin-top:clamp(-84px,-6.4vw,-44px);z-index:2;align-self:start;
    padding:clamp(18px,2.2vw,26px) clamp(48px,6vw,92px) clamp(4px,1vw,10px) 0;}
  .crail__notes{grid-column:8/13;grid-row:3;margin-top:clamp(18px,2.4vw,32px)}
  .crail__act{grid-column:2/7;grid-row:4}

  .caero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:start}
  .caero__hd{grid-column:2/6;grid-row:1}
  .caero__fig{grid-column:7/10;grid-row:1/3}
  .caero__vt{display:flex;grid-column:11/12;grid-row:1;justify-self:center;padding-top:clamp(8px,1.6vw,22px)}
  .caero__tx{grid-column:2/6;grid-row:2;margin-top:clamp(20px,2.6vw,34px)}

  .cbolt__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .cbolt__hd{grid-column:1/8;grid-row:1}
  .cbolt__fig{grid-column:1/13;grid-row:2;margin-top:clamp(20px,2.6vw,34px);margin-inline:calc(var(--bleed)*-1)}
  .cbolt__body{grid-column:2/7;grid-row:3;margin-top:clamp(22px,3vw,40px)}
  .cbolt__notes{grid-column:8/13;grid-row:3;margin-top:clamp(40px,5vw,76px)}

  .ccus__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .ccus__hd{grid-column:1/6;grid-row:1}
  .ccus__tx{grid-column:1/6;grid-row:2}
  .ccus__plate{grid-column:6/13;grid-row:1/4;margin-right:calc(var(--bleed)*-1)}
  .ccus__act{grid-column:1/6;grid-row:3;align-self:start}
}

/* ===== 11 会社案内 ===================================================== */
.chero{position:relative;overflow-x:clip}
.chero__fig img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:55% 55%;min-height:210px}
.chero__tx{position:relative;z-index:2;padding-top:clamp(18px,2.6vw,30px)}
.chero__tint{left:-8%;right:-8%;top:52%;bottom:-34%}
/* 年号を大きな薄い数字として次のセクションへまたがらせる */
.ghost{
  position:absolute;z-index:0;pointer-events:none;
  font-family:var(--mono);font-weight:400;line-height:1;
  font-size:clamp(84px,17vw,230px);letter-spacing:.02em;
  color:rgba(112,128,144,.11);
}

.ccreed{position:relative;padding-block:clamp(38px,4.8vw,74px);overflow-x:clip}
/* 見出し語は小さく、理念の言葉そのものを主役にする */
.ccreed__lbl{font-size:16px;font-weight:700;letter-spacing:.16em;color:var(--slate-tx);margin-bottom:14px}
.ccreed__big{max-width:15em}
.ccreed__body{max-width:33em;margin-top:clamp(18px,2.6vw,30px)}
.ccreed__strip{margin-top:clamp(28px,4vw,52px);overflow:hidden}
.ccreed__strip img{width:100%;aspect-ratio:5/2;object-fit:cover;object-position:45% 56%;min-height:96px}

/* 沿革：一覧表ではなく、台帳写真と時間軸を重ねた記録として見せる */
.chist{position:relative;overflow-x:clip}
.chist__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:48% 52%}
.chist__list{position:relative;padding-left:28px}
.chist__axis{position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--line-soft)}
.chist__axis::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--deep);transform:scaleY(var(--grow,1));transform-origin:top}
.chist__list li{position:relative;padding-block:13px}
.chist__list li::before{
  content:"";position:absolute;left:-28px;top:21px;width:9px;height:9px;
  border:1px solid var(--deep);background:var(--paper);border-radius:50%;
}
.chist__list .year{display:block;font-size:13px;letter-spacing:.16em;color:var(--steel-tx)}
.chist__list b{display:block;font-size:16.5px;margin-top:3px}
.chist__list p{font-size:14.5px;color:var(--slate-tx);line-height:1.8;margin-top:5px;max-width:34em}
.chist__tint{left:36%;right:-14%;top:-6%;bottom:8%}

/* 支えてきた仕事：写真を大きく扱い、説明は短く添える */
.cwork{position:relative;overflow-x:clip}
.cwork__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:48% 56%;min-height:180px}
.cwork__tx{position:relative;z-index:2;margin-top:16px}

/* 技術継承：2人の手元・縦書き・記録線 */
.chand{position:relative;overflow-x:clip}
.chand__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%}
.chand__tint{left:-14%;right:46%;top:6%;bottom:-12%}

.cprof{position:relative}
.cprof__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:55% 52%}

@media (min-width:1000px){
  /* 見出しの下地は右端を写真へ溶かし、白いカードに見せない */
  .chero__tx{
    margin-top:clamp(-104px,-7vw,-48px);max-width:min(800px,74%);
    padding:clamp(24px,2.8vw,38px) clamp(58px,7vw,108px) 0 0;
  }
  .chero__ghost{right:2%;bottom:-58%}

  .ccreed__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .ccreed__tx{grid-column:2/11;grid-row:1}
  .ccreed__vt{display:flex;grid-column:12/13;grid-row:1;justify-self:center;align-self:start;padding-top:6px}

  .chist__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  /* v1.1 は見出しが 1〜6列、台帳写真が 6〜12列で6列目を共有しており、
     見出しの右端が写真の下へ入っていた。列を分けて重なりをなくす。 */
  .chist__hd{grid-column:1/6;grid-row:1}
  /* 年号つきの縦書きを時間軸の起点に置く。company の既存の縦書き
     （縁の下＝右端の .vt／受け継ぐ＝中央の .vt）とは形も位置も変える。 */
  .chist__axisv{grid-column:1/2;grid-row:2;justify-self:center;align-self:start;
    padding-top:clamp(6px,1.4vw,20px);z-index:2}
  .chist__tl{padding-left:clamp(8px,1.6vw,22px)}
  /* 台帳写真は見出しの高さから始まり、年表の2行分にまたがる。
     左端を溶かして時間軸の側へ引き込むが、文字の上へは重ねない。 */
  .chist__fig{grid-column:6/13;grid-row:1/3;margin-top:clamp(-26px,-2vw,-8px);margin-right:calc(var(--bleed)*-1)}
  .chist__tl{grid-column:2/6;grid-row:2;margin-top:clamp(16px,2.4vw,34px);z-index:2}
  .chist__note{grid-column:2/6;grid-row:3}

  .cwork__fig{margin-inline:0}
  .cwork__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .cwork__tx{grid-column:2/8;grid-row:1;margin-top:clamp(-80px,-6vw,-42px);align-self:start;
    padding:clamp(18px,2.2vw,26px) clamp(48px,6vw,92px) clamp(4px,1vw,10px) 0;}
  .cwork__act{grid-column:9/13;grid-row:1;align-self:end;margin-bottom:clamp(8px,1.6vw,20px)}

  .chand__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:start}
  .chand__fig{grid-column:1/8;grid-row:1;margin-left:calc(var(--bleed)*-1)}
  .chand__vt{display:flex;grid-column:8/9;grid-row:1;justify-self:center;padding-top:clamp(20px,3.4vw,52px)}
  .chand__tx{grid-column:9/13;grid-row:1;padding-top:clamp(20px,3.4vw,52px)}

  .cprof__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:start}
  .cprof__tx{grid-column:1/8;grid-row:1}
  .cprof__fig{grid-column:9/13;grid-row:1;margin-top:clamp(8px,1.6vw,26px)}
}

/* ===== 12 お問い合わせ ================================================= */
.xhero{position:relative;padding-top:clamp(20px,3vw,38px);padding-bottom:clamp(28px,4vw,56px);overflow-x:clip}
.xhero__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 58%}
.xhero__tx{position:relative;z-index:2;margin-top:18px}
.xhero__tint{left:26%;right:-14%;top:-12%;bottom:20%}

/* 相談できる内容：均等なカードにせず、番号付きの文章と写真を不均等に組む */
.xtopics{position:relative;overflow-x:clip}
.xtopics__list{display:grid;gap:0}
.xtopics__list li{
  display:grid;grid-template-columns:auto 1fr;gap:5px 14px;
  padding:15px 2px;border-bottom:1px solid var(--line-soft);
}
.xtopics__list li:first-child{border-top:1px solid var(--line-soft)}
.xtopics__list .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--steel-tx);padding-top:.45em}
.xtopics__list b{font-size:16px}
.xtopics__list p{grid-column:2;font-size:14.5px;color:var(--slate-tx);line-height:1.8}
.xtopics__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 55%}
.xtopics__tint{left:40%;right:-16%;top:-8%;bottom:16%}

/* 流れ：単なる縦リストにせず、1本の線・番号・検査写真で工程として見せる */
.xflow{position:relative;overflow-x:clip}
/* 記録線（左端）→ 節（丸）→ 工程番号 → 本文 の順に並べ、重ならないようにする */
.xflow__list{position:relative;counter-reset:st;padding-left:58px}
.xflow__axis{position:absolute;left:5px;top:16px;bottom:22px;width:1px;background:var(--line-soft)}
.xflow__axis::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--deep);transform:scaleY(var(--grow,1));transform-origin:top}
.xflow__list li{position:relative;padding:16px 0}
.xflow__list li::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:-36px;top:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--steel-tx);
}
.xflow__list li::after{
  content:"";position:absolute;left:-56px;top:22px;width:7px;height:7px;
  border:1px solid var(--deep);background:var(--paper);border-radius:50%;
}
.xflow__list b{display:block;font-size:16px}
.xflow__list p{font-size:14.5px;color:var(--slate-tx);line-height:1.8;margin-top:4px;max-width:34em}
.xflow__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:46% 32%}

/* フォーム：操作性を優先し、入力欄は整った構造のまま。
   まわりの説明・写真・見出しを背景色の長方形へ閉じ込めない。 */
.xform{position:relative;overflow-x:clip}
.xform__tint{left:-10%;right:34%;top:4%;bottom:-6%}
.xform__fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.demo-note{
  border-left:2px solid var(--steel);padding:2px 0 2px 14px;
  font-size:14px;line-height:1.8;color:var(--ink);
  display:grid;gap:3px;max-width:36em;margin-top:18px;
}
.demo-note b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--steel-tx)}
.form{margin-top:24px;display:grid;gap:17px;max-width:620px}
.field{display:grid;gap:7px}
.field label{font-size:13.5px;font-weight:700;letter-spacing:.03em}
.field .req{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--steel-tx);margin-left:8px}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:0;border-bottom:1px solid var(--slate);
  padding:11px 2px;width:100%;border-radius:0;
  transition:border-color .25s,box-shadow .25s;
}
.field select{
  -webkit-appearance:none;appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 1px),calc(100% - 7px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field textarea{min-height:124px;resize:vertical;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--deep);box-shadow:0 1px 0 0 var(--deep);outline:none;
}
.field .hint{font-size:12.5px;color:var(--slate-tx);line-height:1.7}
.form__act{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px}
/* 送信ボタン：塗りと外枠を使わないが、操作対象と分かる太さの下線を残す */
.send{
  display:inline-flex;align-items:center;gap:.75em;
  background:none;border:0;border-bottom:2px solid var(--deep);
  color:var(--deep);font-size:16px;font-weight:700;
  padding:11px 4px 9px;min-height:44px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.send__ar{position:relative;display:block;width:30px;height:1px;background:currentColor;flex:none;transition:width .32s var(--ease)}
.send__ar::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.send:hover,.send:focus-visible{color:var(--steel-tx);border-bottom-color:var(--steel)}
.send:hover .send__ar,.send:focus-visible .send__ar{width:44px}
.form__msg{font-size:14px;line-height:1.8;border-left:2px solid var(--deep);padding:10px 0 10px 14px;max-width:38em}
.form__msg[hidden]{display:none}

/* 所在地：工場外観を、ページの静かな締めとして扱う */
.xplace{position:relative;overflow-x:clip;padding-bottom:clamp(30px,4vw,56px)}
.xplace__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:55% 54%}

@media (min-width:1000px){
  .xhero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .xhero__fig{grid-column:5/13;grid-row:1;margin-right:calc(var(--bleed)*-1)}
  .xhero__fig img{aspect-ratio:16/9}
  .xhero__tx{grid-column:1/8;grid-row:1;align-self:end;margin-top:0;margin-bottom:clamp(-40px,-3vw,-16px);
    padding:clamp(18px,2.2vw,28px) clamp(56px,6.6vw,104px) clamp(6px,1.2vw,16px) 0;}
  .xhero__tx .big{font-size:clamp(30px,3.9vw,50px)}

  .xtopics__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .xtopics__hd{grid-column:1/7;grid-row:1}
  .xtopics__list{grid-column:1/7;grid-row:2}
  .xtopics__vt{display:flex;grid-column:7/8;grid-row:2;justify-self:center;align-self:start;padding-top:clamp(18px,3vw,48px)}
  .xtopics__fig{grid-column:8/13;grid-row:2;margin-top:clamp(30px,4.6vw,74px)}

  .xflow__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .xflow__hd{grid-column:2/8;grid-row:1}
  .xflow__list{grid-column:2/8;grid-row:2;margin-top:clamp(10px,1.6vw,20px)}
  .xflow__vv{grid-column:8/9;grid-row:2;justify-self:center;align-self:center}
  .xflow__fig{grid-column:9/13;grid-row:2;align-self:end;margin-bottom:clamp(10px,2vw,30px);margin-right:calc(var(--bleed)*-1)}
  .xflow__note{grid-column:2/8;grid-row:3}

  .xform__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px)}
  .xform__tx{grid-column:1/8;grid-row:1}
  .xform__fig{grid-column:9/13;grid-row:1;margin-top:clamp(40px,6vw,104px)}

  .xplace__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2.2vw,26px);align-items:end}
  .xplace__tx{grid-column:1/6;grid-row:1;padding-bottom:clamp(6px,1.4vw,20px)}
  .xplace__fig{grid-column:6/13;grid-row:1;margin-right:calc(var(--bleed)*-1)}
}

/* --- 大きな写真の高さの上限 -------------------------------------------
   画面幅いっぱいへ広げた写真は、比率のままでは縦に伸びすぎるため上限を置く。

   v1.1 の問題：この上限が aspect-ratio を上書きするため、画面が広いほど
   実際の表示比率が横長になっていた。2048px では
   帯写真が 4.9:1〜8.2:1 に達し、写真の主題が枠の外へ出ていた。

   v1.2 の対応：
     ・--vwcap で全幅写真の伸びを 1680px で止める（00節）
     ・そのうえで上限を引き上げ、どの表示幅でも実表示比率が
       おおむね 3.2:1 以内に収まるようにする
     ・vh だけに依存させない（横に長い画面で潰れるため min() の px 側を効かせる）
   実測（2048px）：最も横長のものでも 3.0:1。16:7 を超えてはいけない
   検査台写真（.creed__rec）は 1.78:1。 */
@media (min-width:1000px){
  /* .wrap の外に置いた「画面幅いっぱい」の写真は --bleed を通らないため、
     2048px では実幅がそのまま 2048px になる。上限をさらに引き上げて、
     この4点も 3.2:1 以内へ収める。 */
  /* vh 側を大きめに取る。横に広く縦が短いウィンドウ（2048×800 など）でも
     vh 側が先に効いて帯が潰れないようにするため。 */
  .thero__band img,.close__fig img,.chero__fig img,.cwork__fig img{max-height:min(74vh,660px)}
  .ccreed__strip img{max-height:min(74vh,660px)}
  /* --bleed を通る写真（実幅は最大 1680px） */
  .frail__fig img{max-height:min(62vh,570px)}
  .creed__rec img{max-height:none}          /* 比率を壊さない。上限は与えない */
  .st1__fig img{max-height:min(46vh,420px)}
  .st2__fig img{max-height:min(58vh,505px)}
  .st3__fig img{max-height:min(52vh,450px)}
  .st4__a img{max-height:min(56vh,486px)}
  .st5__fig img{max-height:min(42vh,360px)}
  .crail__fig img{max-height:min(62vh,570px)}
  .cbolt__fig img{max-height:min(62vh,570px)}
  .plate__main img{max-height:min(50vh,430px)}
  .caero__fig img{max-height:min(50vh,430px)}
  .chist__fig img{max-height:min(46vh,400px)}
  .chand__fig img{max-height:min(50vh,430px)}
  .cprof__fig img{max-height:min(58vh,500px)}
  .xhero__fig img{max-height:min(56vh,486px)}
  .xtopics__fig img{max-height:min(46vh,400px)}
  .xflow__fig img{max-height:min(44vh,376px)}
  .xform__fig img{max-height:min(46vh,400px)}
  .xplace__fig img{max-height:min(50vh,430px)}
}

/* ===== 13 モーション =================================================== */
/* 初期状態を隠すのは html.motion のときだけ。
   JavaScript無効／prefers-reduced-motion では最初からすべて見えている。 */
html.motion [data-rv]{will-change:transform,opacity}

/* 基本：ごく短い上方向の移動だけ。左右からのスライドは使わない */
html.motion [data-rv="up"]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.motion [data-rv="up-s"]{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
/* 写真：数px〜十数pxの差で現れ、工程の前後関係をつくる */
html.motion [data-rv="ph"]{opacity:0;transform:translateY(14px);transition:opacity .95s var(--ease),transform 1.05s var(--ease)}
html.motion [data-rv="ph2"]{opacity:0;transform:translateY(6px);transition:opacity .85s .1s var(--ease),transform .95s .1s var(--ease)}
html.motion [data-rv="ph3"]{opacity:0;transform:translateY(22px);transition:opacity 1.05s .05s var(--ease),transform 1.15s .05s var(--ease)}
/* 帯の写真だけ、上から下へ一度だけ開く */
html.motion [data-rv="band"]{clip-path:inset(0 0 100% 0);opacity:.001;transition:clip-path 1.1s var(--ease),opacity .45s linear}
/* 縦書き3種は、それぞれ別の現れ方にする（同じ動きの反復にしない）
   .vt    罫線が伸びてから文字（v1.1 から継続）
   .vaxis 文字だけがゆっくり沈み込む（罫線を持たないため）
   .vverb 工程番号 → 測定線 → 動詞 の順に、工程の流れとして現れる */
html.motion [data-rv="vt"] .vt__l{transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
html.motion [data-rv="vt"] .vt__tx{opacity:0;transform:translateY(8px);transition:opacity .7s .26s var(--ease),transform .7s .26s var(--ease)}

html.motion [data-rv="vax"] .vaxis__tx{opacity:0;transform:translateY(16px);transition:opacity 1.05s .08s var(--ease),transform 1.05s .08s var(--ease)}
html.motion .rv-in[data-rv="vax"] .vaxis__tx{opacity:1;transform:none}

html.motion [data-rv="vvb"] .vverb__n{opacity:0;transition:opacity .5s .1s var(--ease)}
html.motion [data-rv="vvb"] .vverb__l{transform:scaleY(0);transform-origin:top;transition:transform .55s .22s var(--ease)}
html.motion [data-rv="vvb"] .vverb__tx{opacity:0;transform:translateY(7px);transition:opacity .62s .44s var(--ease),transform .62s .44s var(--ease)}
html.motion .rv-in[data-rv="vvb"] .vverb__n{opacity:1}
html.motion .rv-in[data-rv="vvb"] .vverb__l{transform:none}
html.motion .rv-in[data-rv="vvb"] .vverb__tx{opacity:1;transform:none}
/* 699px以下では測定線が横向きになるため、伸ばす向きも変える */
@media (max-width:699px){
  html.motion [data-rv="vvb"] .vverb__l{transform:scaleX(0);transform-origin:left}
}
html.motion [data-rv="lines"] .ln{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.motion [data-rv="lines"] .ln:nth-child(2){transition-delay:.13s}
html.motion [data-rv="lines"] .ln:nth-child(3){transition-delay:.26s}

html.motion .rv-in[data-rv="up"],
html.motion .rv-in[data-rv="up-s"],
html.motion .rv-in[data-rv="ph"],
html.motion .rv-in[data-rv="ph2"],
html.motion .rv-in[data-rv="ph3"]{opacity:1;transform:none}
html.motion .rv-in[data-rv="band"]{clip-path:inset(0 0 0 0);opacity:1}
html.motion .rv-in[data-rv="vt"] .vt__l{transform:scaleY(1)}
html.motion .rv-in[data-rv="vt"] .vt__tx{opacity:1;transform:none}
html.motion .rv-in[data-rv="lines"] .ln{opacity:1;transform:none}
html.motion [data-rv][data-dl="1"]{transition-delay:.11s}
html.motion [data-rv][data-dl="2"]{transition-delay:.22s}

/* 精密目盛りを測定線が一度だけ走る */
html.motion .scan{animation:none}
html.motion .rv-in .scan,html.motion .scan.rv-in{animation:scan 1.6s .5s var(--ease) 1 both}
@keyframes scan{
  0%{opacity:0;transform:translateX(0)}
  16%{opacity:1}
  84%{opacity:1}
  100%{opacity:0;transform:translateX(420px)}
}

/* 大きな訴求文字：スクロールでごくわずかに字間が変わる */
.big[data-sp]{letter-spacing:calc(-.012em + var(--sp,0) * .024em)}

/* 記録線・時間軸：スクロールに合わせて少しずつつながる */
html.motion .rail__l::after,
html.motion .chist__axis::after,
html.motion .xflow__axis::after{transition:transform .25s linear}

/* CTAの下線と矢印は :hover / :focus-visible で動く（06節で定義） */

/* reduced motion：情報を失わない静止状態にする */
@media (prefers-reduced-motion:reduce){
  /* 出現・移動をやめ、最初から完成した静止状態にする（情報は失わない） */
  html.motion [data-rv],
  html.motion [data-rv] .ln,
  html.motion [data-rv] .vt__l,
  html.motion [data-rv] .vt__tx,
  html.motion [data-rv] .vaxis__tx,
  html.motion [data-rv] .vverb__n,
  html.motion [data-rv] .vverb__l,
  html.motion [data-rv] .vverb__tx{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  /* 測定線と記号は「描かれ終わった状態」で静止させる */
  .mark i{transform:scaleX(1)!important;transition:none!important}
  .mark em{opacity:1!important;transition:none!important}
  /* 目盛りを走る測定線は出さない（装飾のみで情報を持たない） */
  .scan{animation:none!important;opacity:0!important}
  /* 記録線・時間軸は伸ばさず、最初からつながった状態にする */
  .rail__l::after,.chist__axis::after,.xflow__axis::after{transform:none!important;transition:none!important}
  /* 操作時の伸縮も止める（状態の変化は色と下線で伝わる） */
  .alink__ar,.alink__tx,.send__ar,.cat__fig,
  .next__list a span:last-child,.menub__bars::before,.menub__bars::after{transition:none!important}
  *{scroll-behavior:auto!important}
}

/* ===== 14 レスポンシブの調整 =========================================== */
/* --- タブレット（700〜999px）：1列へ積み直すだけにせず、独自の組みにする --- */
@media (min-width:700px) and (max-width:999px){
  :root{--rowgap:clamp(44px,5.4vw,74px)}
  /* 写真が画面を占有し続けないよう、幅と高さを抑える */
  .fig img{max-height:56vh}
  .fv__photo img{aspect-ratio:16/9;max-height:52vh}
  .fv__type{margin-top:20px}
  .fv__scale{max-width:60%}

  .small__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .small__hd{grid-column:1/10;grid-row:1}
  .small__fig{grid-column:8/13;grid-row:2/4;margin-top:18px}
  .small__q{grid-column:1/8;grid-row:2}
  .small__body{grid-column:1/8;grid-row:3}
  .small__act{grid-column:1/8;grid-row:4}

  /* タブレットでも2枚の写真は重ねない（原則どおり）。
     縦書きの動詞を写真の脇の1列へ入れて、前後関係だけを示す。 */
  .prec__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .prec__axis{grid-column:1/13;grid-row:1;justify-self:start}
  .prec__hd{grid-column:1/13;grid-row:2}
  .prec__a{grid-column:1/9;grid-row:3;margin-top:22px}
  .prec__va{grid-column:9/10;grid-row:3;justify-self:center;align-self:end;padding-bottom:12px}
  .prec__steps{grid-column:1/8;grid-row:4;margin-top:34px}
  .prec__vb{grid-column:8/9;grid-row:4;justify-self:center;align-self:start;margin-top:44px}
  .prec__b{grid-column:9/13;grid-row:4;align-self:start;margin-top:38px}
  .prec__act{grid-column:1/13;grid-row:5;margin-top:24px}
  .prec__a img{aspect-ratio:4/3}
  .prec__b img{aspect-ratio:1/1}

  .frail__fig img{aspect-ratio:21/9}
  .faero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:start}
  .faero__fig{grid-column:1/6;grid-row:1}
  .faero__tx{grid-column:6/13;grid-row:1;padding-top:20px}

  .st1__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .st1__fig{grid-column:1/13;grid-row:1}
  .st1__tx{grid-column:1/8;grid-row:2;margin-top:22px}
  .st1__list{grid-column:8/13;grid-row:2;margin-top:34px}
  /* 04 測定と検査：タブレットでも重ねない。9列目を縦書きの通り道にする */
  .st4__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .st4__a{grid-column:1/9;grid-row:1}
  .st4__vv{grid-column:9/10;grid-row:1;justify-self:center;align-self:start;padding-top:56px}
  .st4__b{grid-column:10/13;grid-row:1;align-self:start;margin-top:66px}
  .st4__tx{grid-column:1/10;grid-row:2;margin-top:34px}
  .st4__list{grid-column:1/13;grid-row:3;margin-top:26px}
  .st5__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .st5__tx{grid-column:1/8;grid-row:1}
  .st5__fig{grid-column:8/13;grid-row:1;margin-top:26px}

  .pintro__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:end}
  .pintro__tx{grid-column:1/9;grid-row:1}
  .pintro__fig{grid-column:9/13;grid-row:1}
  .caero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:start}
  .caero__hd{grid-column:1/13;grid-row:1}
  .caero__fig{grid-column:1/6;grid-row:2;margin-top:18px}
  .caero__tx{grid-column:6/13;grid-row:2;margin-top:24px}
  .ccus__plate{margin-top:20px}

  .chist__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .chist__hd{grid-column:1/10;grid-row:1}
  .chist__axisv{grid-column:10/13;grid-row:1;justify-self:end;align-self:end}
  .chist__tl{grid-column:1/8;grid-row:2;margin-top:18px;padding-left:0}
  .chist__fig{grid-column:8/13;grid-row:2;margin-top:30px}
  .chand__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .chand__fig{grid-column:1/9;grid-row:1}
  .chand__tx{grid-column:1/11;grid-row:2;margin-top:22px}
  .cprof__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:start}
  .cprof__tx{grid-column:1/9;grid-row:1}
  .cprof__fig{grid-column:9/13;grid-row:1}

  .xhero__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .xhero__fig{grid-column:1/13;grid-row:1}
  .xhero__fig img{aspect-ratio:2/1}
  .xhero__tx{grid-column:1/11;grid-row:2;margin-top:-30px;
    padding:20px 60px 6px 0;}
  .xtopics__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .xtopics__hd{grid-column:1/13;grid-row:1}
  .xtopics__list{grid-column:1/8;grid-row:2}
  .xtopics__fig{grid-column:8/13;grid-row:2;margin-top:30px}
  .xflow__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .xflow__hd{grid-column:1/13;grid-row:1}
  .xflow__list{grid-column:1/8;grid-row:2}
  .xflow__vv{grid-column:8/9;grid-row:2;justify-self:center;align-self:start;margin-top:34px}
  .xflow__fig{grid-column:9/13;grid-row:2;align-self:end;margin-bottom:18px}
  .xform__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
  .xform__tx{grid-column:1/9;grid-row:1}
  .xform__fig{grid-column:9/13;grid-row:1;margin-top:60px}
  .xplace__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:end}
  .xplace__tx{grid-column:1/7;grid-row:1}
  .xplace__fig{grid-column:7/13;grid-row:1}
}

/* --- 1000px未満に共通する調整 --- */
@media (max-width:999px){
  /* 縦長写真が画面を連続して占有しないよう高さを抑える */
  .fig img{max-height:62vh}
  .small__fig img{aspect-ratio:1/1}
  .prec__a img{aspect-ratio:4/3}
  .caero__fig img{aspect-ratio:4/5}
  .cprof__fig img{aspect-ratio:4/3}
  .xform__fig img{aspect-ratio:16/9}
  .ccreed__strip img{aspect-ratio:16/6}
  /* 検査台写真：タブレットでも 16:9 のまま。部品群を切らない */
  .creed__rec img{aspect-ratio:16/9;object-position:50% 62%}
  .plate__zooms{gap:9px}
  /* 大きな薄い年号は、幅が足りない環境では文字と重なるため出さない */
  .ghost{display:none}
}

/* --- 700px未満 --- */
@media (max-width:699px){
  :root{--rowgap:clamp(42px,10vw,60px)}
  .fig img{max-height:58vh}
  .fv__photo img{aspect-ratio:4/3;max-height:50vh}
  .fv__scale{max-width:100%}
  .thero__band img{aspect-ratio:16/9;min-height:0}
  .crail__fig img{aspect-ratio:3/2}
  .cbolt__fig img{aspect-ratio:3/2}
  .chero__fig img{aspect-ratio:3/2}
  .close__fig img{aspect-ratio:16/9}
  .frail__fig img{aspect-ratio:16/9}
  .st1__fig img{aspect-ratio:2/1}
  .st2__fig img{aspect-ratio:4/3}
  .cwork__fig img{aspect-ratio:3/2}
  .plate__zooms{grid-template-columns:repeat(3,1fr)}
  .ghost{font-size:clamp(70px,22vw,120px)}
  /* 縦長・正方形の写真が画面を占有し続けないよう、横長寄りへ切り替える */
  .caero__fig img{aspect-ratio:1/1}
  .pintro__fig img{aspect-ratio:3/2}
  .ccus__plate{margin-top:16px}
  /* 対になる小さい写真は右へ寄せ、大小の差だけで前後関係を示す。
     v1.2：スマートフォンでは写真どうしを一切重ねない（v1.1 は .st4__b を
     -13% 重ねており、390px で面積の28%が重なっていた）。 */
  .prec__b{max-width:58%;margin-left:auto;margin-top:16px}
  .st4__b{max-width:56%;margin-left:auto;margin-top:18px}
  /* 検査台写真：スマートフォンだけ 1x1 版へ切り替え、4:3 で下寄せに切る。
     手だけの切り抜きにならないよう、焦点をトレー側（下）へ寄せる。 */
  .creed__rec img{aspect-ratio:4/3;object-position:45% 72%}
}

@media (max-width:400px){
  .big{font-size:clamp(27px,8.4vw,38px)}
  .big--hero{font-size:clamp(27px,8.8vw,40px)}
  .num{font-size:25px}
  .plate__zooms{grid-template-columns:1fr 1fr;gap:8px}
  .plate__z:nth-child(3){display:none}
}

/* 印刷 */
@media print{
  .demorail,.hd,.nav,.menub,.next,.rail,.tint,.ghost{display:none}
  main{background:none}
  main::before{display:none}
  body{font-size:11pt}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
}