/* 品質管理（quality.html）専用。検査成績書の組み＝箱なし・罫線の強弱・下端揃え・機種名の銘板組み */

/* ---- 頭：題とリード（左 1〜6列）＋ 認証の記録（右 8〜12列） ---- */
.q-top{padding-bottom:0;}
.q-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:56px;}
.q-head-l{grid-column:1/7;min-width:0;}
.q-head-l .sec-head{margin-bottom:24px;}
.q-head-l .lead{margin:0;max-width:none;}
.q-cert{grid-column:8/13;min-width:0;}
.q-cert-rows{margin:0;border-top:1px solid transparent;} /* 上の線（g5）は rv-rule の ::before が引く */
.q-cert-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--g4);}
.q-cert-row dt b{display:block;font-family:var(--ff-en);font-weight:700;font-size:32px;line-height:32px;letter-spacing:.04em;color:var(--g8);font-variant-numeric:tabular-nums;white-space:nowrap;}
.q-cert-row dt b.jpw{font-family:var(--ff-jp);font-size:20px;letter-spacing:0;}
.q-cert-row dd{margin:0;font-size:14px;line-height:24px;color:var(--g6);white-space:nowrap;}
.q-cert .note{margin-top:16px;max-width:none;}
.q-cert .note .q-s{display:inline-block;} /* 1文＝1かたまり。折れるのは文と文の間だけ（語の途中・行頭の長音・「取得。」の孤立を出さない） */

/* ---- 帯写真2枚：頭は 50vh、中は 44vh（頭より必ず低い） ---- */
.band.q-basket img{height:clamp(320px,50vh,560px);object-position:50% 52%;}
.band.q-mid img{height:clamp(280px,44vh,480px);}

/* ---- 左レール（1〜3列）＋ 右本文（4〜12列） ---- */
.q-reg,.q-pol{scroll-margin-top:68px;}
.q-rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;}
.q-rail-h{grid-column:1/4;min-width:0;}
.q-rail-b{grid-column:4/13;min-width:0;}
.q-reg .q-rail-h{position:sticky;top:92px;padding-top:8px;}   /* 8px＝見出しの下端を表の見出し行の下端に揃える値。92+8＝見出しは 100px で止まる */
.q-pol .q-rail-h{padding-top:24px;}                            /* 24px＝見出しの下端を第1条の1行目の下端に揃える値 */
.q-rail-h .h3{font-size:24px;line-height:32px;}
.q-cap{margin-top:8px;font-size:14px;line-height:24px;color:var(--g6);font-variant-numeric:tabular-nums;}
.q-rail-h .more{margin-top:4px;}
.q-rail-b.rv-rule,.q-articles.rv-rule{border-top:1px solid transparent;} /* 上の線（g5）は rv-rule の ::before が引く */

/* ---- 測定機一覧（主役）：761px 以上 ---- */
@media (min-width:761px){
  .q-ledger{table-layout:fixed;font-size:14px;}
  .q-ledger th,.q-ledger td{padding:20px 16px 20px 0;line-height:24px;vertical-align:baseline;border-bottom:0;border-top:1px solid var(--g4);}
  .q-ledger thead th{padding:16px 16px 12px 0;border-top:0;color:var(--g7);} /* 表頭は g3 の面の上＝g6 だと 3.9:1 で読みにくいので一段上げる */
  .q-ledger thead th:nth-child(1){width:34%;} .q-ledger thead th:nth-child(2){width:22%;} .q-ledger thead th:nth-child(3){width:30%;} .q-ledger thead th:nth-child(4){width:14%;}
  .q-ledger tbody th{font-size:16px;font-weight:700;color:var(--g8);white-space:normal;}
  .q-ledger tbody td{color:var(--g6);}
  .q-ledger td.mdl{font-family:var(--ff-en);font-weight:500;font-size:24px;letter-spacing:.04em;color:var(--g8);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .q-ledger td.mdl.jp{font-family:var(--ff-jp);font-weight:700;font-size:16px;letter-spacing:0;} /* ハイソメット＝和文は和文書体で。1語1書体 */
  .q-ledger td.r{font-size:20px;color:var(--g8);padding-right:0;}
  .q-ledger th.r{padding-right:0;}
  .q-ledger tr.same th{font-weight:400;color:var(--g6);border-top-color:transparent;} /* 「〃」の行は種別の列だけ線を引かない＝まとまりが線の切れ目で見える */
  .q-ledger tbody tr:last-child th,.q-ledger tbody tr:last-child td{border-bottom:1px solid var(--g5);}
}
@media (min-width:761px) and (hover:hover){.q-ledger tbody tr:hover>*{background:rgba(255,255,255,.03);}}

/* ---- 品質方針（3条）：畳まず、20px で置く ---- */
.q-articles{margin:0;}
.q-articles li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--g4);font-size:20px;line-height:1.7;color:var(--g8);}
.q-articles li b{font-family:var(--ff-en);font-weight:500;font-size:20px;line-height:1.7;color:var(--g6);}
.q-articles li span{text-wrap:balance;word-break:auto-phrase;}
.q-pol .sec-cta{margin-top:48px;}

/* ---- 999px 以下：1列 ---- */
@media (max-width:999px){
  .q-head,.q-rail{display:block;}
  .q-head{padding-bottom:48px;}
  .q-cert{margin-top:32px;}
  .q-reg .q-rail-h{position:static;}
  .q-reg .q-rail-h,.q-pol .q-rail-h{padding-top:0;}
  .q-rail-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px;margin-bottom:16px;}
  .q-cap,.q-rail-h .more{margin-top:0;}
}

/* ---- 760px 以下：スマホ ---- */
@media (max-width:760px){
  .q-head{padding-bottom:40px;}
  .q-cert-row{padding:16px 0;}
  .q-cert-row dt b{font-size:24px;line-height:24px;}
  .q-cert-row dt b.jpw{font-size:16px;}
  .band.q-basket img{height:clamp(220px,36vh,320px);object-position:50% 45%;}
  .band.q-mid img{height:clamp(200px,30vh,280px);}
  .q-rail-h .h3{font-size:20px;line-height:28px;}
  .q-cap{font-size:13px;}
  /* 測定機一覧：種別の見出し行＋機種の行。台数は必ず機種名と同じ行（site.css の table.list4 には依存しない） */
  .q-ledger,.q-ledger tbody{display:block;}
  .q-ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .q-ledger th,.q-ledger td{display:block;padding:0;border:0;white-space:normal;}
  .q-ledger tr{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:16px 0 12px;border-top:1px solid var(--g4);}
  .q-ledger tbody tr:first-child{border-top:0;}
  .q-ledger tbody tr:last-child{border-bottom:1px solid var(--g5);}
  .q-ledger tbody th{grid-column:1/-1;grid-row:1;font-size:16px;font-weight:700;line-height:24px;color:var(--g8);}
  .q-ledger td:nth-of-type(1){grid-column:1;grid-row:2;font-size:13px;line-height:24px;color:var(--g7);}
  .q-ledger td.mdl{grid-column:2;grid-row:2;font-family:var(--ff-en);font-weight:500;font-size:20px;line-height:24px;letter-spacing:.04em;color:var(--g8);}
  .q-ledger td.mdl.jp{font-family:var(--ff-jp);font-weight:700;font-size:16px;letter-spacing:0;}
  .q-ledger td.r{grid-column:3;grid-row:2;font-size:20px;line-height:24px;color:var(--g8);}
  .q-ledger tr.same{padding:0 0 12px;border-top:0;}                /* 「〃」の行＝上の線と余白を無くして前の行に寄せる */
  .q-ledger tr.same th{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} /* 〃は画面から外し、読み上げには残す */
  .q-ledger tr.same td{grid-row:1;}
  .q-articles li{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:20px 0;font-size:16px;}
  .q-articles li b{font-size:16px;}
  .q-pol .sec-cta{margin-top:32px;}
}

/* ---- のっぺり対策（2026-09-21・あきと指摘）：色は足さない。A案の3つの床（g1/g2/g3）の切り替え・表頭の面・台帳の縞だけ（共通＝site.css「面の段」） ---- */
@media (min-width:761px){
  .q-ledger thead th{background:var(--g3);padding-left:16px;}
  .q-ledger tbody th,.q-ledger tbody td{padding-left:16px;}
  .q-ledger td.r,.q-ledger th.r{padding-right:16px;}
  .q-ledger tbody tr:nth-child(even)>*{background:rgba(22,26,32,.35);}
}
@media (max-width:760px){
  .q-ledger tr,.q-ledger tr.same{padding-inline:12px;}   /* 「〃」の行は padding の一括指定で左右が0に戻っていた＝縞の行だけ12px左にずれる（2026-09-29 修正） */
  .q-ledger tbody tr:nth-child(even){background:rgba(22,26,32,.35);}
}

/* ---- 画像と動きの底上げ（2026-10-02）。共通部品（[data-tilt]・[data-depth]・[data-scrub]・video[data-auto]・figure[data-ai]）は site.css。ここは置き場所だけ ----
   quality-02：頭の帯＝[data-depth] だけ（最初の画面なので起き上がりは付けない・生成なし・札なし）。
   quality-04：中の帯＝[data-tilt]（帯の既定 6°→0）＋[data-depth]。どちらも HTML の属性だけで、ここに書く物は無い。
   2026-10-29（10/27本社撮影の実写に差し替え・02-SHOOT §1 Q1・Q2）：生成AIの連番（quality-01）とループ（quality-03）をやめ、静止の写真に。
   .q-gauge：測定機の左レール（sticky）の中、添え書きの下に「定盤の上での測定（2026年撮影）」。sticky の中なので起き上がり・視差は付けない。
     PC は 3:4（レールの幅 266px・img/quality/surface-plate-*）。999px以下は表の後ろへ回して 4:3（<picture> の source＝surface-plate-wide-*）。
   .q-dial：品質方針の左レール、下線リンクの下に「拡大鏡と顕微鏡での検査（2026年撮影）」（4:3・img/quality/inspection-scope-*）。999px以下は見出しの行の下・3条の前。
   枠（.sx-frame＝canvas・video を重ねる映像の枠）は使わない。比率は写真の width/height（source と img）が決める。シャッター（.rv-shut）は site.css の figure.rv-shut img がそのまま掛かる。 */
.q-gauge,.q-dial{margin:24px 0 0;}
.q-gauge picture{display:block;}
.q-gauge img,.q-dial img{display:block;width:100%;height:auto;}
.q-gauge figcaption,.q-dial figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--note);}

@media (max-width:999px){
  /* 測定機：レールの中身（見出し・添え書き・図）を .q-rail の flex に直に並べ、図だけ表の後ろへ。見出しと添え書きは今と同じ1行（両端揃え） */
  .q-reg .q-rail{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px;}
  .q-reg .q-rail-h{display:contents;}
  .q-reg .q-rail-b{order:1;flex:1 1 100%;min-width:0;margin-top:16px;}
  .q-gauge{order:2;flex:1 1 100%;max-width:560px;margin-top:40px;}
  /* 品質方針：見出しの行の下に1段で */
  .q-dial{flex:1 1 100%;max-width:560px;margin:16px 0 24px;}
}
@media (max-width:760px){.q-gauge{margin-top:32px;}}

/* ==== 2026-11-06 70周年型（旧 quality-show.css を移した） ==== */
/* 品質管理の見本だけの見た目（共通は src/show.css） */
.q-hero { --hn: clamp(64px, 11vw, 168px); }
.q-hero .show-l2 { font-size: clamp(34px, 5.2vw, 76px); line-height: 1.1; }
.q-hero .show-l2 > span { display: block; }
.q-hero .show-l3 { font-size: clamp(28px, 3.4vw, 48px); }
.q-hero .show-note > span { max-width: 42em; }
.q-sec .show-sub:first-child { margin: 0 0 12px; }
.q-polsec { background: var(--g1); border-top: 1px solid var(--line); }
.q-polsec .show-h2 { margin-top: 0; }
.q-polmore { margin: 0 0 clamp(8px, 2vw, 24px); }
.q-polsec .show-lines-sec { border-top: 0; }
.q-polcta { padding-bottom: clamp(48px, 7vw, 96px); }
.q-pol-tx .ln + .ln { margin-top: .4em; }
@media (max-width: 560px) { .q-hero { --hn: clamp(44px, 14vw, 64px); } }
.q-sec .show-kind .u { display: inline-block; }
@media (max-width: 899px) and (max-height: 700px) { .q-pol-tx { font-size: clamp(18px, 4.8vw, 21px); line-height: 1.5; } .q-polsec .show-lines-ph { aspect-ratio: 2 / 1; } }

/* 2026-11-06 スマホ：型式（例 FTA-S4S3000-D）の途中で折らない */
@media (max-width: 760px) { .q-ledger td.mdl { white-space: nowrap; } }
/* 2026-11-06 背の低いスマホ：品質方針（3条）の止めた場面で最後の行が下の帯にぎりぎり → 字を少し小さく */
@media (max-width: 760px) and (max-height: 700px) { .q-pol-tx { font-size: 17px; } }
/* 2026-11-06 スマホ：品質方針（3条）の止めた場面は文が長いので、写真を低く・字を一段小さく（最後の行が下の帯にかからない） */
@media (max-width: 760px) { .q-polsec .show-lines-ph { aspect-ratio: 21 / 9; } .q-pol-tx { font-size: 17px; line-height: 1.55; } }

/* 2026-11-06 測定機の場面（「取得の年」の場面を置き換え）：大きな数字の代わりに測定機の名前を大きく。止めない時は名前（.q-kind）と機種の行だけ */
.q-big { display: none; }
html.show-live .q-ins .steps:not(.flat) .q-big { display: block; grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 34px; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.08; font-weight: 700; letter-spacing: .02em; color: var(--ink); white-space: nowrap; font-feature-settings: "palt";
  clip-path: inset(0 100% 0 0); }
html.show-live .q-ins .steps:not(.flat) .beat.on .q-big { clip-path: inset(0 0 0 0); transition: clip-path .6s var(--m6-out, ease-out) .05s; }
html.show-live .q-ins .steps:not(.flat) .show-meter { align-self: end; }
html.show-live .q-ins .steps:not(.flat) .show-rail { margin-top: 0; }
html.show-live .q-ins .steps:not(.flat) .q-kind { display: none; }
html.show-live .q-ins .steps:not(.flat) .show-mk { margin-top: 0; font-size: 16px; color: var(--ink-2); }
.q-ins .show-mk { font-feature-settings: "palt"; }
.q-cert { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--note); text-align: right; }
@media (max-width: 899px) {
  html.show-live .q-ins .steps:not(.flat) .q-big { font-size: clamp(34px, 10.5vw, 48px); margin-bottom: 26px; }
  html.show-live .q-ins .steps:not(.flat) .show-mk { font-size: 14px; }
  .q-cert { text-align: left; }
}
