@charset "utf-8";
/* ================================================================
   site.css — 全ページ共通(有限会社 成田鍍金工業所)
   デザイン: r2-c0「c2 の中身 × c0 の紙と写真」。使い方は docs/site-components.md

   1. トークン(色・書体・寸法)
   2. 土台(リセット・文字・フォーカス・キャプション)
   3. ヘッダー / ナビ / メニューボタン
   4. ボタン
   5. 節の共通(.sec / .sec-head / .h2)
   6. 下層ページの部品(ページの頭・パンくず・左見出しの段組・本文・定義表・年表・図版・方針文)
   7. トップから流用できる部品(ラインの台紙と寸法図・断面図・路線図・給与・認証マーク・SDGs・引用)
   8. お問い合わせの紺の帯
   9. フッター / スマホの電話バー
   10. レスポンシブ(1180 / 960 / 600 / 480 / 375 / 360)
   ================================================================ */

/* ---------------------------------------------------------------- 1. トークン
   - 地: --paper(ページの紙) / --paper-2(紙・濃。区切りの面) / --sheet(紙の上の台紙) / --plate(白。認証マークの台だけ)
   - 文字と線: --navy(本文・見出し・図の線) / --ink-2(鉄の灰緑。キャプション・補足・項目名)
   - ミント(--mint / --mint-deep / --mint-pale)は図の中だけ。地と文字には使わない
   - 書体: --mincho(見出し・大きな数字) / --sans(本文) / --fig(数字・キャプションの欧文。和文は Zen Kaku に落ちる) */
:root{
  --navy:#171C61;
  --ink-2:#4B5B55;
  --blue:#005BAC;
  --paper:#ECF1EB;
  --paper-2:#DFE8E1;
  --sheet:#F6F9F5;
  --plate:#FFFFFF;
  --white:#FFFFFF;
  --black:#000000;
  --mint:#9DCDB4;
  --mint-deep:#6FA88D;
  --mint-pale:#CFE4D8;
  --gold:#D2A143;
  --safety:var(--gold);
  --on-navy:#E3E7F2;
  --on-navy-2:#C9CEE3;
  --rule:rgba(23,28,97,.17);
  --rule-soft:rgba(23,28,97,.1);
  --header-h:72px;
  --gutter:clamp(16px,4.4vw,64px);
  --maxw:1312px;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --fig:"IBM Plex Sans","Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  /* 断面図: 素材・亜鉛・クロメート 3 色(ユニクロ=青みの銀 / 白=銀白 / 黒)。画面上のイメージ */
  --steel:#DCE3E1;
  --zinc-1:#B3BEC2;--zinc-2:#CBD3D6;
  --cr-uni-1:#AFC2DE;--cr-uni-2:#E3EBF7;
  --cr-white-1:#F2F4F5;--cr-white-2:#D6DCDF;
  --cr-black-1:#1E2126;--cr-black-2:#3A3F47;
}

/* ---------------------------------------------------------------- 2. 土台 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.85;font-weight:400;letter-spacing:.03em;font-kerning:normal;-webkit-font-smoothing:antialiased;line-break:strict;overflow-wrap:anywhere;text-autospace:normal}
figcaption,.spec dd,.terms dd,.sdgs li,.env__years span,.lineplate__head p,.titleblock dd,.co__dl dd,.news__list p,.dtable dd,.chrono p,.page-head__lead,.prose li{word-break:auto-phrase}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--white)}
h1,h2,h3,h4{margin:0;font-family:var(--mincho);font-weight:700;font-feature-settings:"palt";word-break:auto-phrase;text-wrap:balance;letter-spacing:.04em}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.nb{display:inline-block}
/* ==== 採用の募集: 停止中(2026-10-05〜) ====
   data-recruit の付いた箇所(トップの採用の節・ナビの「採用情報」・お問い合わせの採用案内・404 の一覧)を全ページで隠す。
   募集を再開するときは、この囲み(==== から ==== まで)をまるごと消す。あわせて site/_redirects の 2 行と、sitemap.xml のコメントも戻す */
[data-recruit]{display:none !important}
/* トップ: 採用の節(紙・濃)が抜けると「お知らせ」と「会社情報」が同じ紙色で続くため、会社情報を紙・濃にして区切る */
#recruit[data-recruit]+#company{background:var(--paper-2)}
#recruit[data-recruit]+#company .route__stop:not(.route__stop--goal)::before{background:var(--paper-2)}
/* お問い合わせ: 最後の採用案内が抜けると、紙・濃の節がフッター(紙・濃)と続くため線で区切る */
main:has(>[data-recruit]:last-child)+.site-footer{border-top:1px solid var(--rule)}
/* ==== ここまで ==== */
.nw{white-space:nowrap}
.num{font-family:var(--fig);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:var(--white);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}

/* 写真キャプション(全写真共通・c0 の作法): 設備名を太字の紺、事実を鉄の灰緑で小さく */
.cap{font-family:var(--fig);font-size:13.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.05em}
.cap b{font-family:var(--sans);font-weight:700;color:var(--navy);margin-inline-end:.7em}

/* ---------------------------------------------------------------- 3. ヘッダー */
.site-header{position:sticky;top:0;z-index:60;background:rgba(236,241,235,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.site-header__in{height:var(--header-h);display:flex;align-items:center;gap:22px;width:min(100% - 2*var(--gutter),1552px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex:none;white-space:nowrap}
.brand__mark{width:40px;height:auto}
.brand__name{display:block;font-family:var(--mincho);font-weight:700;font-size:19px;letter-spacing:.08em;line-height:1.2;font-feature-settings:"palt"}
.brand__kind{display:block;font-size:11.5px;font-weight:500;letter-spacing:.26em;color:var(--ink-2);margin-bottom:2px}
.site-nav ul{list-style:none;display:flex;gap:4px}
.site-nav a{display:block;padding:8px 10px;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.site-nav a:hover{text-decoration:underline}
/* 今いるページ: 文字の下に紺の線 */
.site-nav a[aria-current="page"]{font-weight:700;background:linear-gradient(var(--navy),var(--navy)) left bottom/100% 2px no-repeat}
.site-nav a[aria-current="page"]:hover{text-decoration:none}
.hd-tel{display:flex;flex-direction:column;align-items:flex-end;flex:none;padding-left:22px;border-left:1px solid var(--rule);text-decoration:none;line-height:1.3}
.hd-tel__num{display:flex;align-items:center;gap:7px;font-family:var(--fig);font-size:20px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.hd-tel svg{width:15px;height:15px;flex:none;fill:currentColor}
.hd-tel__time{font-size:12px;color:var(--ink-2);letter-spacing:.06em;white-space:nowrap}
.hd-tel:hover .hd-tel__num{text-decoration:underline}
.menu-btn{display:none}

/* ---------------------------------------------------------------- 4. ボタン */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:12px 26px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid var(--navy);border-radius:3px;line-height:1.3;letter-spacing:.06em}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn--fill{background:var(--navy);color:var(--white)}
.btn--fill:hover{background:#0F1347;text-decoration:none}
.btn__stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}
.btn__lbl{font-size:13px;font-weight:500;letter-spacing:.1em;white-space:nowrap}
.btn__num{font-family:var(--fig);font-size:22px;font-weight:600;letter-spacing:.04em;line-height:1.25;white-space:nowrap}
.btn--tel{padding:11px 26px 11px 22px}
.btn--line{background:transparent;color:var(--navy)}
.btn--line:hover{background:rgba(255,255,255,.55)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:32px}
.more{display:inline-block;font-weight:700;font-size:15.5px;padding-block:4px;white-space:nowrap}
.more-row{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px}

/* ---------------------------------------------------------------- 5. 節の共通 */
.sec{padding:clamp(88px,9vw,136px) 0}
.sec--tint{background:var(--paper-2)}
.sec--tight{padding:clamp(64px,6vw,96px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end;margin-bottom:56px}
.sec-head h2,.h2{font-size:clamp(1.85rem,2.7vw,2.55rem);line-height:1.45}
.sec-head p{max-width:34em}

/* ---------------------------------------------------------------- 6. 下層ページの部品 */
/* 6-1 ページの頭: パンくず+明朝の h1+リード(+任意の写真)。写真ありは .page-head--photo */
.page-head{padding:clamp(40px,5vw,72px) 0 clamp(48px,5.5vw,80px)}
.page-head__in{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 64px;align-items:end}
.page-head__title{margin-top:18px;font-size:clamp(2.15rem,3.6vw,3.3rem);line-height:1.3;letter-spacing:.06em}
.page-head__lead{margin-top:20px;max-width:30em;font-size:17px;line-height:1.95}
.page-head__photo img{width:100%;object-fit:cover}
.page-head__photo figcaption{margin-top:12px}
/* 写真ありの時: 写真の下側が紙・濃の帯に乗る(トップのヒーローと表題欄の関係を小さく再現) */
.page-head--photo{padding-bottom:0;background:linear-gradient(to bottom,var(--paper) calc(100% - 64px),var(--paper-2) calc(100% - 64px))}
.page-head--photo .page-head__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.page-head--photo .page-head__text{padding-bottom:calc(64px + clamp(28px,3vw,48px))}
.page-head--photo .page-head__photo{display:flex;flex-direction:column;justify-content:flex-end}
.page-head--photo .page-head__photo figcaption{margin-top:0;padding:10px 0 18px;min-height:64px}
/* パンくず: トップ › ページ名 */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;font-size:13.5px;line-height:1.6;color:var(--ink-2);letter-spacing:.06em}
.crumbs li{white-space:nowrap}
.crumbs li+li::before{content:"›";margin:0 .7em;color:var(--ink-2)}
.crumbs a{color:inherit}
.crumbs [aria-current="page"]{color:var(--navy);font-weight:500}

/* 6-2 左に見出し・右に本文の段組(トップの「お知らせ」と同じ比率) */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8.4fr);gap:24px 48px;align-items:start}
.split__head p{margin-top:14px;max-width:24em;color:var(--ink-2);font-size:15px}
.split + .split{margin-top:clamp(64px,7vw,104px)}

/* 6-3 本文: 見出し・段落・箇条書き */
.prose{max-width:40em}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2.2em;font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.5}
.prose h3{margin-top:2em;font-size:clamp(1.2rem,1.5vw,1.38rem);line-height:1.55}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{list-style:none}
.prose li{position:relative;padding-left:1.4em}
.prose li+li{margin-top:.45em}
.prose ul>li::before{content:"";position:absolute;left:.3em;top:.78em;width:.42em;height:.42em;background:var(--navy)}
.prose ol{counter-reset:prose}
.prose ol>li{counter-increment:prose;padding-left:2em}
.prose ol>li::before{content:counter(prose);position:absolute;left:0;top:0;font-family:var(--mincho);font-weight:700;font-size:1.05em}
.prose .note,.note{font-size:14px;color:var(--ink-2)}
.lead{font-size:17px;line-height:1.95;max-width:32em}

/* 6-4 定義表(会社概要・募集要項): dt=項目名、dd=中身。--wide は項目名が長い時 */
.dtable{border-top:1px solid var(--rule)}
.dtable>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.dtable dt{font-size:14.5px;font-weight:500;color:var(--ink-2);letter-spacing:.08em;padding-top:1px}
.dtable dd{line-height:1.8}
.dtable dd>*+*{margin-top:.5em}
.dtable--wide>div{grid-template-columns:10em minmax(0,1fr)}
.dtable .big{font-family:var(--mincho);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:.02em;line-height:1.4;font-feature-settings:"palt"}
.dtable ul{list-style:none}
.dtable .sub{display:block;font-size:14px;color:var(--ink-2)}

/* 6-5 年表: 左に年(明朝)と月、右に出来事。縦の細い線と点でつなぐ */
.chrono{list-style:none;position:relative;--yw:7.6em}
.chrono li{display:grid;grid-template-columns:var(--yw) minmax(0,1fr);gap:0 40px;padding:14px 0;position:relative}
.chrono li::before{content:"";position:absolute;left:calc(var(--yw) + 20px);top:0;bottom:0;width:1px;background:var(--rule);transform:translateX(-.5px)}
.chrono li:first-child::before{top:26px}
.chrono li:last-child::before{bottom:auto;height:26px}
.chrono li::after{content:"";position:absolute;left:calc(var(--yw) + 20px);top:22px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--paper);border:2px solid var(--navy)}
.sec--tint .chrono li::after{background:var(--paper-2)}
.chrono time{display:flex;align-items:baseline;justify-content:flex-end;gap:.5em;white-space:nowrap;font-size:14px;color:var(--ink-2);line-height:1.6}
.chrono time b{font-family:var(--mincho);font-weight:600;font-size:22px;color:var(--navy);letter-spacing:.02em;line-height:1.2}
.chrono p{line-height:1.8;padding-top:2px}
.chrono p+p{margin-top:.3em}

/* 6-6 図版+キャプション */
.fig img{width:100%}
.fig figcaption{margin-top:12px}
.fig--narrow{max-width:480px}
.fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px}

/* 6-7 方針文の引用ブロック: 明朝の条文+番号+右寄せの署名 */
.policy{background:var(--sheet);padding:clamp(28px,4vw,56px) clamp(22px,4vw,64px)}
.policy+.policy{margin-top:24px}
.policy__title{font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.5}
.policy__body{margin-top:20px;padding-left:22px;border-left:2px solid var(--navy);font-family:var(--mincho);font-size:17.5px;line-height:2;font-weight:500}
.policy__body>*+*{margin-top:1em}
.policy__list{list-style:none;counter-reset:policy}
.policy__list li{counter-increment:policy;position:relative;padding-left:2.2em}
.policy__list li+li{margin-top:.6em}
.policy__list li::before{content:counter(policy) ".";position:absolute;left:0;top:0;font-weight:700}
.policy__sign{margin-top:28px;text-align:right;font-size:15px;line-height:1.9}
.policy__sign time{font-family:var(--fig)}

/* ---------------------------------------------------------------- 7. トップから流用できる部品 */
/* 7-1 2 つのラインの台紙(写真+同じ縮尺の寸法図+仕様表)。subgrid で 2 枚の行を揃える */
.lines__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;grid-template-rows:auto auto repeat(5,auto)}
.lineplate{grid-row:span 7;display:grid;grid-template-rows:subgrid;background:var(--sheet);padding-bottom:14px}
.lineplate__head{padding:30px 32px 22px}
.lineplate__head h3{font-size:clamp(1.45rem,1.9vw,1.75rem);line-height:1.4}
.lineplate__head h3 small{display:inline-block;margin-left:.9em;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:.08em}
.lineplate__head p{margin-top:8px}
.lineplate__visual{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;padding:0 32px 10px}
.lineplate__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lineplate__photo figcaption{margin-top:10px}
.dim{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0 0}
.dim__svg{width:100%;max-width:250px;margin-inline:auto}
.dim figcaption{font-size:12.5px;line-height:1.55;text-align:center;color:var(--ink-2);margin-top:10px;letter-spacing:0}
.dim__box{fill:var(--mint-pale);stroke:var(--navy);stroke-width:1.4}
.dim__ghost{fill:none;stroke:var(--navy);stroke-opacity:.4;stroke-width:1;stroke-dasharray:4 4}
.dim__ghost-t{font-family:var(--sans);font-size:12.5px;fill:var(--ink-2);text-anchor:middle;font-weight:500}
.dim__line{stroke:var(--navy);stroke-width:1;fill:none}
.dim__ext{stroke:var(--navy);stroke-width:.8;fill:none}
.dim__t{font-family:var(--mincho);font-size:21px;font-weight:600;fill:var(--navy);text-anchor:middle}
.dim__hole{fill:var(--sheet);stroke:var(--navy);stroke-width:1.3}
.dim__lead{fill:none;stroke:var(--navy);stroke-width:1}
.dim__note{font-family:var(--sans);font-size:14px;font-weight:700;fill:var(--navy)}
.dim__floor{stroke:var(--navy);stroke-width:1.1}
.spec{grid-row:span 5;display:grid;grid-template-rows:subgrid;padding:6px 32px 0}
.spec>div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--rule)}
.spec dt{font-weight:500;font-size:14px;line-height:1.85;color:var(--ink-2);letter-spacing:.08em}
.spec dd{line-height:1.75}
.spec .big{display:inline-block;font-family:var(--mincho);font-size:21px;font-weight:600;letter-spacing:.02em;font-feature-settings:"palt"}

/* 7-2 めっき皮膜の断面図(SVG は docs の雛形をそのまま使う) */
.coat{background:var(--sheet);padding:30px 28px 18px;max-width:560px;width:100%}
.coat svg{width:100%;height:auto}
.coat figcaption{font-size:13px;line-height:1.7;color:var(--ink-2);margin-top:10px}
.coat .lbl{font-family:var(--mincho);font-size:17px;font-weight:700;fill:var(--navy)}
.coat .lbl-s{font-size:13px;font-weight:500;fill:var(--ink-2)}
.coat .ld{stroke:var(--navy);stroke-width:1;fill:none}
.coat .coat-ln{stroke:var(--navy);stroke-width:1.2}
.coat .coat-div{stroke:var(--navy);stroke-opacity:.6;stroke-width:1;stroke-dasharray:3 3;fill:none}

/* 7-3 電車の路線図(名古屋駅 → 大府駅 → 石浜駅 → 工場) */
.route{list-style:none;margin-top:24px;position:relative;padding-left:40px}
.route::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--navy)}
.route li{position:relative;line-height:1.5}
.route__stop{padding:6px 0;font-weight:700;font-size:16.5px}
.route__stop::before{content:"";position:absolute;left:-34px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--paper);border:2.5px solid var(--navy)}
.sec--tint .route__stop::before{background:var(--paper-2)}
.route__stop span{font-size:13px;font-weight:500;margin-left:.7em;color:var(--ink-2)}
.route__ride{padding:8px 0 8px 2px;font-size:14px;color:var(--ink-2)}
.route__stop--key b{font-family:var(--mincho);font-size:20px}
.route__walk{font-weight:700;color:var(--navy);font-size:15px}
.route__stop--goal::before{border-radius:2px;background:var(--navy)}

/* 7-4 給与(大きな明朝の数字)と募集の要点 */
.pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
/* 給与の欄と SDGs の項目は「紙」色の面。紙・濃(.sec--tint)の節の中に置くこと */
.pay__item{background:var(--paper);padding:28px 32px}
.pay__item h3{font-size:22px}
.pay__item h3 small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-2);margin-left:.7em;letter-spacing:.06em}
.pay__amt{margin-top:12px;font-size:15px;font-weight:500;line-height:1.3}
.pay__amt b{font-family:var(--mincho);font-size:clamp(30px,3vw,42px);font-weight:600;letter-spacing:.01em;margin:0 .14em;font-feature-settings:"palt"}
.pay__item p+p{margin-top:12px}
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;margin-top:28px}
.terms>div{padding-top:14px;border-top:1px solid var(--rule)}
.terms dt{font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:.1em}
.terms dd{margin-top:4px;line-height:1.7}

/* 7-5 認証マーク(白い台に載せる。画像は改変しない) */
.certs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:18px}
.cert{display:flex;flex-direction:column}
.cert img{width:100%;height:150px;object-fit:contain;background:var(--plate);padding:16px}
.cert figcaption{margin-top:10px;font-family:var(--fig);font-size:13.5px;line-height:1.6;color:var(--navy)}

/* 7-6 SDGs 行動宣言(左に宣言、右に 3 つの取組) */
.sdgs{margin-top:72px;padding-top:36px;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8.4fr);gap:48px}
.sdgs__lead p{margin-top:12px}
.sdgs ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sdgs li{padding:20px 22px 22px;background:var(--paper)}
.sdgs li b{display:block;font-family:var(--mincho);font-weight:700;font-size:17px;line-height:1.55;margin-bottom:8px;letter-spacing:.04em}

/* 7-7 短い引用(理念・品質方針の一文) */
.quote{margin-top:14px;padding:2px 0 2px 18px;border-left:2px solid var(--navy);font-family:var(--mincho);font-size:17.5px;line-height:1.9;font-weight:500}

/* ---------------------------------------------------------------- 8. お問い合わせの紺の帯 */
.contact{background:var(--navy);color:var(--white);position:relative}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 72px;align-items:center}
.contact h2{color:var(--white)}
.contact p{margin-top:18px;max-width:30em;color:var(--on-navy)}
.contact__tel{display:block;text-decoration:none;color:var(--white)}
.contact__tel .k{display:block;font-size:14px;letter-spacing:.12em;color:var(--on-navy-2)}
.contact__tel .v{display:block;white-space:nowrap;font-family:var(--mincho);font-size:clamp(2.3rem,5.4vw,4.6rem);font-weight:600;line-height:1.2;letter-spacing:.03em;font-feature-settings:"palt"}
.contact__tel .t{display:block;font-size:15px;margin-top:4px;color:var(--on-navy)}
.contact__tel:hover .v{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.contact__sub{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:15px}
.contact__sub dt{color:var(--on-navy-2);font-size:14px;letter-spacing:.08em;padding-top:1px}
.contact__sub dd{font-family:var(--fig)}
.contact__sub a{color:var(--white)}
.contact .btn--line{border-color:rgba(255,255,255,.7);color:var(--white);margin-top:26px}
.contact .btn--line:hover{background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------- 9. フッター / 電話バー */
.site-footer{padding:64px 0 40px;background:var(--paper-2)}
.ft{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px 56px;align-items:start}
.ft__logo{width:112px;height:auto}
.ft__addr{font-style:normal;font-size:15px;line-height:1.9}
.ft__addr strong{display:block;font-family:var(--mincho);font-size:18px;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.ft__addr .num{white-space:nowrap}
.ft__nav ul{list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:2px 36px}
.ft__nav a{display:inline-block;padding:4px 0;font-size:15px;text-decoration:none;white-space:nowrap}
.ft__nav a:hover{text-decoration:underline}
.ft__nav a[aria-current="page"]{font-weight:700}
.ft__copy{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.callbar{display:none}

/* ---------------------------------------------------------------- 10. レスポンシブ */
@media (min-width:600px){
  .hero__lead,.sec-head p,.process__head p,.finish__text p,.contact p,.env__block p,.split__head p,.prose p,.lead{word-break:auto-phrase}
}

/* header: 6 項目のナビは約 1180px 必要。それ未満はメニューボタンに畳む(process.js の 1180 と対) */
@media (max-width:1179.98px){
  .hd-tel{order:2;padding-left:18px}
  .menu-btn{order:3}
  .hd-tel__time{display:none}
  .menu-btn{display:inline-flex;flex:none;white-space:nowrap;align-items:center;gap:9px;height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:3px;background:transparent;color:var(--navy);font:inherit;font-weight:500;font-size:15px;letter-spacing:.08em;cursor:pointer}
  .menu-btn__bars{flex:none;width:18px;height:12px;position:relative;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
  .menu-btn__bars::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--navy)}
  .menu-btn[aria-expanded="true"] .menu-btn__bars{border-color:transparent}
  .menu-btn[aria-expanded="true"] .menu-btn__bars::after{top:3px;transform:rotate(45deg);box-shadow:none}
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--navy);transform:rotate(-45deg)}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);display:none;max-height:calc(100svh - var(--header-h));overflow:auto}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:8px var(--gutter) 20px}
  .site-nav a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--rule-soft)}
  .site-nav a[aria-current="page"]{background:linear-gradient(var(--navy),var(--navy)) left top/3px 100% no-repeat;padding-left:16px}
  html:not(.js) .site-nav{position:static;display:block;border:0}
  html:not(.js) .site-header__in{flex-wrap:wrap;height:auto;padding:10px 0}
  html:not(.js) .site-nav ul{flex-direction:row;flex-wrap:wrap;padding:0}
  html:not(.js) .menu-btn{display:none}
}

@media (max-width:960px){
  :root{--header-h:62px}
  .brand__mark{width:34px}
  .brand__name{font-size:17px}
  .brand__kind{font-size:10.5px;letter-spacing:.22em}
  .hd-tel{display:none}

  .sec{padding:76px 0}
  .sec--tight{padding:56px 0}
  .sec-head{grid-template-columns:1fr;margin-bottom:36px;gap:16px}

  /* 1 段組では帯を敷かず、写真の下にキャプションを置くだけ */
  .page-head--photo{background:none;padding-bottom:clamp(40px,6vw,56px)}
  .page-head--photo .page-head__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .page-head--photo .page-head__text{padding-bottom:0}
  .page-head--photo .page-head__photo figcaption{min-height:0;padding:0;margin-top:12px}
  .split{grid-template-columns:minmax(0,1fr);gap:20px}
  .policy__body{font-size:16.5px;padding-left:16px}

  .lines__pair{grid-template-columns:1fr;grid-template-rows:none;gap:28px}
  .lineplate{grid-row:auto;grid-template-rows:none;padding-bottom:8px}
  .spec{grid-row:auto;grid-template-rows:none;padding:4px 20px 4px}
  .lineplate__head{padding:22px 20px 16px}
  .lineplate__head h3{font-size:23px}
  .lineplate__head h3 small{display:block;margin:2px 0 0}
  .lineplate__visual{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;padding:0 20px 6px}
  .spec>div{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .spec dt{font-size:13.5px}

  .coat{padding:18px 14px 14px;max-width:none}
  .coat .lbl{font-size:18.5px}
  .coat .lbl-s{font-size:15px}

  .cert img{height:124px;padding:12px}
  .sdgs{grid-template-columns:1fr;gap:20px;margin-top:52px}
  .sdgs ul{grid-template-columns:1fr;gap:12px}
  .sdgs li{padding:16px 18px 18px}

  .pay{grid-template-columns:1fr;gap:14px}
  .pay__item{padding:22px 20px}
  .terms{grid-template-columns:1fr 1fr}

  .contact__grid{grid-template-columns:1fr;gap:32px}
  .contact .btn--line{width:100%;justify-content:center}

  .ft{grid-template-columns:1fr;gap:24px}
  .ft__logo{width:96px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:7px 14px calc(7px + env(safe-area-inset-bottom));background:var(--navy);color:var(--white);text-decoration:none;font-weight:700;white-space:nowrap;transition:transform .25s ease,visibility .25s}
  .callbar.is-hidden{transform:translateY(110%);visibility:hidden}
  .callbar:focus-visible{outline-color:var(--white);outline-offset:-6px}
  .callbar svg{flex:none;width:20px;height:20px;fill:currentColor}
  .cb-main{display:flex;flex-direction:column;line-height:1.15}
  .callbar .n{font-family:var(--fig);font-size:22px;font-weight:600;letter-spacing:.03em}
  .callbar .t{font-size:12px;font-weight:500;color:var(--on-navy-2)}
  .cb-act{flex:none;margin-left:4px;padding:6px 12px;border:1px solid rgba(255,255,255,.6);border-radius:3px;font-size:14px;line-height:1.2}
  body{padding-bottom:60px}
}

@media (max-width:599.98px){
  .page-head__lead{font-size:16px}
  .dtable>div,.dtable--wide>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:13px 0}
  .dtable dt{font-size:13.5px}
  /* 年表: 年を本文の上に置き、線と点は左端へ */
  .chrono li{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0 14px 28px}
  .chrono li::before,.chrono li::after{left:6px}
  .chrono li::after{top:21px}
  .chrono li:first-child::before{top:25px}
  .chrono li:last-child::before{height:25px}
  .chrono time{justify-content:flex-start}
  .chrono time b{font-size:20px}
  .btn-row .btn{width:100%;justify-content:center}
}

@media (max-width:480px){
  .terms{grid-template-columns:1fr}
  .certs{gap:10px}
  .cert img{height:96px;padding:10px}
  .cert figcaption{font-size:12.5px}
  .lineplate__visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dim__t{font-size:24px}
  .dim__note{font-size:17px}
  .dim__ghost-t{font-size:15px}
  .pay__amt b{font-size:26px;margin:0 .1em}
}

@media (max-width:374.98px){
  .site-header__in{gap:10px}
  .brand{gap:9px}
  .brand__mark{width:30px}
  .brand__name{font-size:15px;letter-spacing:.04em}
  .brand__kind{font-size:10px;letter-spacing:.18em}
  .menu-btn{padding:0 10px;gap:6px;font-size:14px;letter-spacing:.04em}
  .btn--tel{padding-inline:16px}
  .btn__num{font-size:20px}
  .callbar{gap:10px;padding-inline:10px}
  .cb-act{padding:5px 9px;font-size:13.5px}
  .pay__amt b{font-size:23px}
  .sec-head h2,.h2{font-size:1.62rem}
  .lineplate__head{padding-inline:16px}
  .lineplate__visual{padding-inline:16px;gap:12px}
  .spec{padding-inline:16px}
  .page-head__title{font-size:2rem}
}

@media (max-width:360px){
  .contact__sub{grid-template-columns:1fr;gap:0}
  .contact__sub dt{margin-top:10px}
  .contact__sub a[href^="mailto"]{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}