@charset "utf-8";
/* 株式会社ミナセ電材 共通スタイル（index.html から書き出し・直接編集しない） */
:root{
    --navy:#0E2A47;        /* 主色 */
    --navy-d:#0A1E33;
    --ink:#14181D;         /* 文字 */
    --paper:#F7F8FA;       /* 背景 */
    --steel:#5A6672;
    --steel-l:#E8ECF0;
    --blue:#1E88C7;        /* アクセント＝澄んだ青 */
    --blue-d:#14679B;
    --blue-l:#EAF3FA;
    --line-d:rgba(247,248,250,.16);
    --line-l:rgba(20,24,29,.14);
    --hd:112px;            /* ヘッダーの高さ（PC） */
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--paper); color:var(--ink);
        font-family:'Zen Kaku Gothic New',sans-serif; -webkit-font-smoothing:antialiased; }
  .mono{ font-family:'Space Grotesk',monospace; letter-spacing:.06em; }
  h1,h2,h3,.lead,.btn{ word-break:auto-phrase; text-wrap:balance; }
  img{ max-width:100%; height:auto; }
  a{ color:inherit; }

  /* ============ ヘッダー（parts-catalog header-08 スプリット2段） ============ */
  .hd{ position:fixed; top:0; left:0; right:0; z-index:50; background:#fff; border-bottom:1px solid var(--steel-l); }
  .hd .util{ border-bottom:1px solid var(--steel-l); background:var(--blue-l); color:var(--navy); }
  .hd .util .in{ max-width:1320px; margin:0 auto; padding:7px 28px; display:flex;
                 justify-content:space-between; align-items:center; gap:16px; }
  .hd .util .l{ display:flex; gap:22px; }
  .hd .util a{ color:var(--steel); text-decoration:none; font-size:13px; }
  .hd .util a:hover{ color:var(--blue-d); }
  .hd .util .r{ display:flex; align-items:center; gap:14px; font-size:12px; color:var(--steel); }
  .hd .util .tel{ color:var(--navy); font-weight:700; font-size:15px; text-decoration:none; letter-spacing:.02em; }
  .hd .main .in{ max-width:1320px; margin:0 auto; padding:14px 28px; display:flex;
                 align-items:center; justify-content:space-between; gap:24px; }
  .logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .logo img{ width:44px; height:44px; object-fit:contain; }
  .logo .nm{ font-weight:900; font-size:21px; letter-spacing:.04em; color:var(--navy); line-height:1.15; }
  .logo .nm small{ display:block; font-family:'Space Grotesk',monospace; font-size:9px;
                   letter-spacing:.22em; color:var(--steel); font-weight:500; margin-top:3px; }
  .navwrap{ display:flex; align-items:center; gap:24px; }
  nav{ display:flex; gap:26px; align-items:center; }
  nav a{ text-decoration:none; font-size:15.5px; font-weight:700; color:var(--ink); position:relative; padding:6px 0; }
  nav a::after{ content:""; position:absolute; left:0; bottom:-14px; height:3px; width:0;
                background:var(--blue); transition:width .25s; }
  nav a:hover::after{ width:100%; }
  .btn-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
            font-weight:700; font-size:14px; padding:13px 22px; text-decoration:none;
            white-space:nowrap; transition:background .2s; }
  .btn-cta:hover{ background:var(--blue); }
  .burger{ display:none; width:46px; height:46px; border:1px solid var(--steel-l); background:#fff;
           align-items:center; justify-content:center; cursor:pointer; }
  .burger span{ display:block; width:20px; height:1.5px; background:var(--navy); position:relative; }
  .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--navy); }
  .burger span::before{ top:-6px; } .burger span::after{ top:6px; }
  .drawer{ display:none; border-top:1px solid var(--steel-l); background:#fff; }
  .drawer.open{ display:block; }
  .drawer a{ display:block; padding:15px 28px; border-bottom:1px solid var(--steel-l);
             text-decoration:none; font-weight:700; font-size:16px; }

  /* ============ FV（fv-catalog fv-56 HorizonPin を移植） ============ */
  .fv{ position:relative; overflow:hidden; }
  .fv.hero{ width: 100%; }   /* ヒーローは全幅 */
  .fv .panel{ min-height:100vh; padding:calc(var(--hd) + 5vh) 8vw 12vh; display:flex;
              flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
  /* JSなし＝縦積みで全文読める。GSAP成功時だけ横トラック化する */
  .j .track.go{ display:flex; width:300%; }
  .j .track.go .panel{ width:33.33333%; flex:none; height:100vh; }

  .fv .tag{ font-size:11px; letter-spacing:.34em; margin-bottom:22px; display:flex; align-items:center; gap:14px; }
  .fv .tag::before{ content:""; width:54px; height:1px; background:currentColor; }
  .fv .pnum{ position:absolute; left:8vw; right:auto; bottom:4vh; font-size:clamp(90px,15vw,200px); font-weight:700;
             line-height:1; color:transparent; -webkit-text-stroke:1px var(--line-d); pointer-events:none; }
  .fv .ph{ position:absolute; inset:0; z-index:0; background-position:center; background-size:cover; }
  .fv .panel>*:not(.ph){ position:relative; z-index:1; }
  .fv .panel>.pnum{ position:absolute; }

  /* P1 左＝濃紺の面／右＝写真をそのまま見せる */
  .p1{ background:var(--navy-d); color:#fff; }
  .p1 .ph{ inset:0; background-image:url('../images/fv.jpg'); }
  .p1 .ph::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(10,30,51,.90) 0%, rgba(10,30,51,.68) 46%, rgba(10,30,51,.36) 100%); }
  .p1 .p1-in{ width:100%; max-width:62rem; }
  .p1 .tag{ color:#6FC3F2; }
  .p1 h1{ font-size:clamp(48px,8.6vw,124px); font-weight:900; line-height:1.18; margin:0; letter-spacing:.01em;
          text-shadow:0 2px 30px rgba(10,30,51,.45); }
  .p1 .lead{ color:rgba(255,255,255,.9); margin-top:26px; line-height:2.05; max-width:34em;
             font-size:clamp(15.5px,1.45vw,19px); text-shadow:0 1px 16px rgba(10,30,51,.55); }
  .p1 .rule{ width:96px; height:2px; background:var(--blue); margin-top:34px; }

  /* P2 ペーパー：数字 */
  .p2{ background:#fff; color:var(--ink); }
  .p2 .ph{ display:none; }
  .p2 .tag{ color:var(--steel); }
  .p2 h2{ font-size:clamp(32px,5.4vw,76px); font-weight:900; line-height:1.38; margin:0; color:var(--navy); }
  .p2 .nums{ margin-top:56px; display:flex; gap:5vw; flex-wrap:wrap; align-items:flex-end; }
  .p2 .n{ padding:0; }
  .p2 .n b{ display:block; font-size:clamp(44px,7.2vw,110px); font-weight:700; line-height:1.02;
            color:var(--navy); letter-spacing:-.03em; white-space:nowrap;
            font-family:'Space Grotesk',monospace; }
  .p2 .n b small{ font-size:.28em; color:var(--blue-d); margin-left:.14em; font-weight:700;
                  letter-spacing:.02em; white-space:nowrap; font-family:'Zen Kaku Gothic New',sans-serif; }
  .p2 .n span{ display:block; margin-top:12px; font-size:13.5px; letter-spacing:.14em; color:var(--steel); }
  .p2 .pnum{ -webkit-text-stroke-color:var(--line-l); }

  /* P3 銅：取扱メーカー検索へ */
  .p3{ background:linear-gradient(150deg,#2E9BD8 0%,#1E88C7 58%,#1673AE 100%); color:#fff; }
  .p3 .tag{ color:rgba(255,255,255,.88); }
  .p3 h2{ font-size:clamp(38px,7vw,100px); font-weight:900; line-height:1.26; margin:0; }
  .p3 .lead{ color:rgba(255,255,255,.92); margin-top:26px; line-height:2; max-width:28em; font-size:clamp(15.5px,1.45vw,19px); }
  .p3 .btn{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; margin-top:34px;
            padding:18px 42px; background:var(--navy); color:#fff; font-weight:700; letter-spacing:.06em;
            text-decoration:none; white-space:nowrap; transition:background .2s, transform .2s; }
  .p3 .btn:hover{ background:var(--navy-d); }
  .p3 .btn:hover{ transform:translateX(4px); }
  .p3 .pnum{ -webkit-text-stroke-color:rgba(255,255,255,.34); bottom:2vh; font-size:clamp(70px,10vw,140px); }

  .prog{ position:absolute; left:8vw; bottom:5vh; width:200px; height:1px; background:var(--line-d); z-index:8; }
  .prog i{ position:absolute; inset:0; right:auto; width:0; background:var(--blue); }
  .hint{ position:absolute; right:3.2vw; top:50%; transform:translateY(-50%); writing-mode:vertical-rl;
         font-size:10px; letter-spacing:.4em; color:rgba(255,255,255,.55); z-index:8; mix-blend-mode:difference; }

  /* 指で動かす画面むけのヒント。指のマークが上下に動く。
     触り始めるか、FVが少し進んだら消える（JS側 fv.js）。9秒でも消える */
  .fvhint{ position:absolute; left:50%; bottom:calc(5vh + 26px); transform:translateX(-50%);
           display:flex; flex-direction:column; align-items:center; gap:9px; z-index:9;
           color:rgba(255,255,255,.94); font-size:11.5px; letter-spacing:.2em;
           text-shadow:0 1px 12px rgba(10,30,51,.7); pointer-events:none;
           opacity:1; transition:opacity .55s ease; }
  .fvhint.off{ opacity:0; }
  /* hidden を付けても、クラス側の display:flex が UA の [hidden]{display:none} に勝ってしまう。
     見えないまま画面に残り続けるので、明示的に消す */
  .fvhint[hidden]{ display:none; }
  .fvhint .fh{ animation:fvhand 2s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .fvhint .fh{ animation:none; } }
  @keyframes fvhand{
    0%, 100%{ transform:translateY(5px); opacity:.6; }
    50%     { transform:translateY(-6px); opacity:1; }
  }

  @media (max-width:980px){
    :root{ --hd:96px; }
    nav{ display:none; }
    .hd .util .l{ display:none; }
    .burger{ display:flex; }
    .btn-cta{ display:none; }
  }
  @media (max-width:768px){
    /* 屋号が「株式会社ミナセ電／材」と割れないようにする */
    .logo .nm{ font-size:16.5px; white-space:nowrap; }
    .logo .nm small{ font-size:8px; letter-spacing:.18em; }
    .logo img{ width:36px; height:36px; }
    /* スマホは分割をやめ、写真を全面に敷いて縦グラデで読ませる */
    .p1 .ph{ inset:0; width:100%; }
    .p1 .ph::after{ inset:0; width:100%;
      background:linear-gradient(180deg, rgba(10,30,51,.86) 0%, rgba(10,30,51,.78) 45%, rgba(10,30,51,.92) 100%); }
    .p1 .p1-in{ width:100%; }
    .fv .panel{ padding:calc(var(--hd) + 4vh) 7vw 10vh; }
    /* 縦に積むと align-items:flex-end が「右寄せ」として効いてしまい、
       数字が画面の右端に寄っていた（実測）。左揃えに戻す */
    .p2 .nums{ flex-direction:column; align-items:flex-start; gap:22px; margin-top:34px; }
    .p2 .n b{ font-size:clamp(40px,13vw,58px); }
    .p2 .ph{ display:none; }
    /* 背面の大きな数字が本文に重なる（02は「拠点（本社・営業所2・工場1）」の行、
       03は「取扱メーカーを検索する」ボタンとヒント）。狭い画面では1枚目だけ残す */
    .p2 .pnum, .p3 .pnum{ display:none; }
    .fv .pnum{ font-size:clamp(64px,18vw,96px); }
    /* 横に進むことが分かるよう、スマホでは進み具合のバーを出す（縦書きの説明は出さない） */
    .hint{ display:none; }
    /* iOSはアドレスバー（下のツールバー）の高さぶん、画面の下が隠れる。
       100vh は隠れた分まで含むので、下からの位置指定はツールバーの裏に入ってしまう
       （実機で「上にスライド」が見切れていた）。
       いま実際に見えている高さ = 100dvh。差の 100vh - 100dvh が隠れている高さなので、その分持ち上げる。 */
    .prog{ left:7vw; right:7vw; width:auto; bottom:calc(5vh + 4px + 84px); }
    .fvhint{ bottom:calc(5vh + 26px + 92px); }
    /* 下からではなく「いま見えている高さ（100dvh）」から上に置く。
       アドレスバーが出ていても引っ込んでいても、必ず見える位置に来る */
    @supports (height:100dvh){
      .fvhint{ top:calc(100dvh - 90px); bottom:auto; }
      .prog{ top:calc(100dvh - 22px); bottom:auto; }
    }
    .p1 .lead br{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }
  /* ==SECTIONS-CSS-START== */
  /* ============================================================
     以下、FV下のセクション（section-catalog から移植・当サイトの配色に合わせて再スコープ）
     ============================================================ */
  .sec{ padding:110px 0; position:relative; }
  .sec .wrap{ width:min(1320px, calc(100% - 56px)); margin:0 auto; }
  .eyebrow{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.28em;
            text-transform:uppercase; color:var(--blue-d); display:inline-flex; align-items:center; gap:12px; }
  .eyebrow::before{ content:""; width:30px; height:2px; background:var(--blue); }   /* 署名モチーフ：青の細線 */
  .sec h2{ font-weight:900; font-size:clamp(26px,3.6vw,46px); line-height:1.36; margin:14px 0 0; color:var(--navy); }
  .sec .lead{ color:var(--steel); font-size:16.5px; line-height:2.05; margin:20px 0 0; max-width:36em; }
  .sec p, .sec dd, .sec li, .sec figcaption, .sec summary,
  .s-recruit p, .s-quote p, .s-quote h2, .s-banner .tx span, .ft address{ word-break:auto-phrase; text-wrap:pretty; }
  .sec-head{ margin-bottom:52px; }
  /* グリッドの子は min-content で押し広げないようにする（スマホでの横はみ出し対策） */
  .sec .inner>*, .sec .duo>*, .sec .grid>*, .s-quote .in>*, .s-contact .grid>*{ min-width:0; }
  .eyebrow{ flex-wrap:wrap; max-width:100%; }
  .sec dd, .ft address{ overflow-wrap:anywhere; }   /* 「／」区切りの長い行がはみ出さないように */
  .btn-line{ display:inline-flex; align-items:center; gap:10px; padding:16px 34px; background:var(--navy);
             color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; white-space:nowrap;
             transition:background .2s; }
  .btn-line:hover{ background:var(--blue-d); }
  .btn-ghost{ display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border:1.5px solid var(--navy);
              color:var(--navy); font-weight:700; font-size:14.5px; text-decoration:none; transition:.2s; }
  .btn-ghost:hover{ background:var(--navy); color:#fff; }

  /* 写真に重なる塗りつぶしの四角（スクロールでずれ出てくる） */
  .deco{ position:absolute; z-index:1; background:var(--blue); pointer-events:none; }

  /* --- S1 リード（sec-intro-02 左に画像＋課題提起） --- */
  .s-intro{ background:#fff; }
  .s-intro .duo{ display:grid; grid-template-columns:44% 1fr; gap:64px; align-items:center; }
  .s-intro .ph{ position:relative; }
  .s-intro .ph img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; position:relative; z-index:2; }
  .s-intro .deco{ left:-14px; bottom:-14px; width:42%; height:26%; }
  .s-intro .body p{ font-size:17px; line-height:2.15; margin:0 0 22px; color:var(--ink); }
  .s-intro .body p.k{ font-weight:700; color:var(--navy); font-size:clamp(19px,2.1vw,26px); line-height:1.9; }
  .s-intro .body .rule{ width:80px; height:2px; background:var(--blue); margin:30px 0; }

  /* --- S2 事業内容（sec-services-01 ベントーグリッド） --- */
  .s-biz{ background:var(--paper); }
  .bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:14px; }
  .bento .tile{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--steel-l);
                text-decoration:none; color:#fff; display:block; }
  .bento .t-big{ grid-column:span 2; grid-row:span 2; }
  .bento .t-wide{ grid-column:span 2; }
  .bento .bgph{ position:absolute; inset:0; background-size:cover; background-position:center;
                transition:transform 1s cubic-bezier(.22,1,.36,1); }
  .bento .tile:hover .bgph{ transform:scale(1.06); }
  .bento .shade{ position:absolute; inset:0;
                 background:linear-gradient(180deg, rgba(10,30,51,0) 34%, rgba(10,30,51,.86) 100%); }
  .bento .t-big .shade{ background:linear-gradient(180deg, rgba(10,30,51,0) 18%, rgba(10,30,51,.62) 52%, rgba(10,30,51,.94) 100%); }
  .bento .lab{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
  .bento .lab .no{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.26em;
                   color:#8FD0F5; display:block; margin-bottom:8px; }
  .bento .lab h3{ margin:0; font-size:clamp(17px,1.7vw,22px); font-weight:900;
                  word-break:auto-phrase; text-wrap:balance; }
  .bento .lab p{ margin:8px 0 0; font-size:14.5px; line-height:1.9; color:rgba(255,255,255,.86); }
  .bento .t-text{ background:var(--navy); color:#fff; padding:26px 24px; display:flex; align-items:center; }
  .bento .t-text p{ margin:0; font-size:clamp(15px,1.5vw,18px); line-height:2; font-weight:700; }
  .bento .t-text b{ color:#8FD0F5; }
  .bento .arw{ position:absolute; right:16px; top:14px; z-index:2; color:#fff; font-size:15px;
               opacity:0; transform:translateX(-6px); transition:.3s; }
  .bento .tile:hover .arw{ opacity:1; transform:translateX(0); }

  /* --- S3 売って、つくって、直す。（sec-craft-04 sticky画像差し替え） --- */
  .s-craft{ background:#fff; }
  .s-craft .duo{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:56px; align-items:start; }
  .s-craft .ch{ min-height:74vh; display:flex; flex-direction:column; justify-content:center; }
  .s-craft .ch .no{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.28em;
                    color:var(--blue-d); display:flex; align-items:center; gap:14px; }
  .s-craft .ch .no::after{ content:""; flex:1; height:1px; background:var(--steel-l); }
  .s-craft .ch h3{ font-size:clamp(21px,2.6vw,32px); font-weight:900; line-height:1.65; margin:18px 0 16px; color:var(--navy); }
  .s-craft .ch p{ color:var(--steel); font-size:16.5px; line-height:2.1; margin:0; max-width:32em; }
  .s-craft .ch p + p{ margin-top:16px; }
  .s-craft .ch .em{ color:var(--ink); font-weight:700; }
  /* 章ごとの写真はスマホだけで使う。デスクトップでは display:none なので読み込まれない */
  .s-craft .ch .chimg{ display:none; }
  .s-craft .visual{ position:sticky; top:calc(var(--hd) + 24px); height:74vh; overflow:hidden; background:var(--navy-d); }
  .s-craft .vimg{ position:absolute; inset:0; background-size:cover; background-position:center;
                  clip-path:inset(0 0 100% 0); }
  .s-craft .vimg:first-child{ clip-path:inset(0 0 0% 0); }
  .s-craft .vlabel{ position:absolute; left:18px; bottom:16px; z-index:5; font-family:'Space Grotesk',monospace;
                    font-size:10px; letter-spacing:.24em; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); }
  .s-craft .vno{ position:absolute; right:18px; top:14px; z-index:5; font-family:'Space Grotesk',monospace;
                 font-size:11px; letter-spacing:.2em; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); }

  /* --- S4 見積CTA（sec-cta-02 コンパクト帯） --- */
  .s-quote{ background:var(--navy); color:#fff; padding:56px 0; }
  .s-quote .in{ width:min(1320px,calc(100% - 56px)); margin:0 auto; display:flex; align-items:center;
                justify-content:space-between; gap:36px; flex-wrap:wrap; }
  .s-quote h2{ color:#fff; font-size:clamp(20px,2.4vw,30px); margin:0; line-height:1.6; }
  .s-quote p{ margin:12px 0 0; color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.95; max-width:44em; }
  .s-quote .acts{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .s-quote .btn-line{ background:var(--blue); }
  .s-quote .btn-line:hover{ background:#fff; color:var(--navy); }
  .s-quote .tel{ color:#fff; text-decoration:none; font-weight:700; font-size:15px; }
  .s-quote .tel small{ display:block; font-weight:400; font-size:11.5px; color:rgba(255,255,255,.66); margin-top:4px; }

  /* --- S5 取扱メーカー（sec-features-04 索引リスト） --- */
  .s-makers{ background:#fff; }
  .s-makers .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
                   border-bottom:2px solid var(--navy); padding-bottom:20px; }
  .s-makers .cnt{ font-family:'Space Grotesk',monospace; font-size:12px; color:var(--steel); white-space:nowrap; }
  .s-makers .pull{ font-family:'Space Grotesk',monospace; font-weight:700; font-size:clamp(64px,11vw,150px);
                   line-height:.92; color:var(--navy); letter-spacing:-.03em; margin:44px 0 0; }
  .s-makers .pull small{ font-size:.22em; letter-spacing:.14em; color:var(--steel); margin-left:.4em; }
  .s-makers .pull-note{ color:var(--steel); font-size:15.5px; margin:10px 0 0; }
  .s-makers .idx{ list-style:none; margin:40px 0 0; padding:0;
                  display:grid; grid-template-columns:1fr 1fr; column-gap:56px; }
  .s-makers .row{ display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:baseline;
                  padding:15px 6px; border-bottom:1px solid var(--steel-l); transition:padding .25s,background .25s; }
  .s-makers .row:hover{ padding-left:16px; background:var(--blue-l); }
  .s-makers .row .n{ font-family:'Space Grotesk',monospace; font-size:11px; color:var(--steel); }
  .s-makers .row b{ font-size:16.5px; font-weight:700; color:var(--ink); }
  .s-makers .row span{ font-family:'Space Grotesk',monospace; font-size:12px; color:var(--steel); }
  .s-makers .foot{ margin-top:46px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
  .s-makers .foot p{ margin:0; color:var(--steel); font-size:13.5px; }

  /* --- S6 取扱分野（sec-gallery-01 マーキー） --- */
  .s-fields{ background:var(--navy-d); color:#fff; padding:96px 0 104px; overflow:hidden; }
  .s-fields h2{ color:#fff; }
  .s-fields .lead{ color:rgba(255,255,255,.7); }
  .s-fields .marquee{ margin-top:52px; display:flex; gap:20px; width:max-content;
                      animation:mq 46s linear infinite; }
  @keyframes mq{ to{ transform:translateX(-50%); } }
  .s-fields figure{ margin:0; width:340px; flex:none; }
  .s-fields figure img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
  .s-fields figcaption{ margin-top:14px; font-size:16px; font-weight:700; }
  .s-fields figcaption small{ display:block; font-family:'Space Grotesk',monospace; font-size:10px;
                              letter-spacing:.22em; color:#8FD0F5; margin-bottom:6px; font-weight:400; }

  /* --- S7 主な取扱製品（3×2グリッド） --- */
  .s-items{ background:var(--paper); }
  .s-items .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
  .s-items figure{ margin:0; background:#fff; border:1px solid var(--steel-l); }
  .s-items figure img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
  .s-items figcaption{ padding:16px 18px 18px; font-size:16px; font-weight:700; color:var(--navy); }
  .s-items figcaption small{ display:block; font-weight:400; font-size:13.5px; color:var(--steel); margin-top:5px; }

  /* --- S8 バナー（sec-links-09 三段バナー・1大2小） --- */
  .s-banner{ background:#fff; padding:0 0 110px; }
  .s-banner .grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
  .s-banner a{ position:relative; overflow:hidden; text-decoration:none; color:#fff; display:flex;
               align-items:flex-end; min-height:180px; padding:26px 28px; }
  .s-banner .b-main{ grid-row:span 2; min-height:376px; }
  .s-banner .bg{ position:absolute; inset:0; background-size:cover; background-position:center;
                 transition:transform 1s cubic-bezier(.22,1,.36,1); }
  .s-banner a:hover .bg{ transform:scale(1.05); }
  .s-banner .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,30,51,.28) 0%, rgba(10,30,51,.86) 100%); }
  .s-banner .tx{ position:relative; z-index:2; }
  .s-banner .tx small{ display:block; font-family:'Space Grotesk',monospace; font-size:10px;
                       letter-spacing:.24em; color:#8FD0F5; margin-bottom:8px; }
  .s-banner .tx b{ font-size:clamp(17px,1.9vw,24px); font-weight:900; display:block; }
  .s-banner .tx span{ font-size:14.5px; color:rgba(255,255,255,.82); display:block; margin-top:8px; }

  /* --- S9 拠点（2×2） --- */
  .s-office{ background:var(--paper); }
  .s-office .grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
  .s-office .card{ background:#fff; border:1px solid var(--steel-l); display:grid; grid-template-columns:38% 1fr; }
  .s-office .card img{ display:block; width:100%; height:100%; min-height:190px; object-fit:cover; }
  .s-office .card .in{ padding:24px 26px 26px; }
  .s-office .card h3{ margin:0; font-size:18px; font-weight:900; color:var(--navy); }
  .s-office .card .kind{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.24em;
                         color:var(--blue-d); display:block; margin-bottom:8px; }
  .s-office .card dl{ margin:16px 0 0; display:grid; grid-template-columns:72px 1fr; gap:6px 12px; font-size:15px; }
  .s-office .card dt{ color:var(--steel); font-size:13px; padding-top:2px; }
  .s-office .card dd{ margin:0; line-height:1.85; min-width:0; overflow-wrap:anywhere; }
  .s-office .card dd a{ color:var(--navy); font-weight:700; text-decoration:none; }

  /* --- S10 会社概要（sec-about-02 罫線インデックス） --- */
  .s-company{ background:#fff; }
  .s-company .inner{ display:grid; grid-template-columns:34% 1fr; gap:64px; align-items:start; }
  .s-company .left{ position:sticky; top:calc(var(--hd) + 24px); }
  .s-company .left .ph{ margin-top:32px; }
  .s-company .left .ph img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
  .s-company .left .ph-cap{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.22em;
                            color:var(--steel); margin-top:10px; }
  .s-company dl.spec{ margin:0; border-top:2px solid var(--navy); }
  .s-company .r{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:19px 4px;
                 border-bottom:1px solid var(--steel-l); }
  .s-company .r dt{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.2em;
                    color:var(--steel); padding-top:4px; }
  .s-company .r dd{ margin:0; font-size:16px; line-height:1.9; }
  .s-company .r dd small{ display:block; color:var(--steel); font-size:13.5px; margin-top:3px; }

  /* --- S11 代表挨拶（sec-message-01 ポートレート＋署名） --- */
  .s-message{ background:var(--navy-d); color:#fff; }
  .s-message h2{ color:#fff; }
  .s-message .duo{ display:grid; grid-template-columns:1fr 38%; gap:64px; align-items:center; }
  .s-message .ph-in{ position:relative; display:block; }
  .s-message .ph img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; position:relative; z-index:2; }
  .s-message .deco{ right:-14px; bottom:-14px; width:38%; height:24%; }
  .s-message .ph .cap{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.22em;
                       color:rgba(255,255,255,.5); margin-top:14px; position:relative; z-index:2; }
  .s-message p{ font-size:17px; line-height:2.2; color:rgba(255,255,255,.86); margin:0 0 20px; }
  .s-message .sign{ margin-top:32px; font-size:14px; color:rgba(255,255,255,.7); }
  .s-message .sign b{ display:block; font-size:19px; color:#fff; margin-top:6px; letter-spacing:.08em; }

  /* --- S12 採用（sec-cta-06 背景写真バナー・全幅） --- */
  .s-recruit{ position:relative; min-height:420px; display:flex; align-items:center;
              padding:96px 0; overflow:hidden; }
  .s-recruit .bg{ position:absolute; inset:0; background:url('../images/recruit-1.jpg') center/cover; }
  .s-recruit .bg::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(10,30,51,.92) 0%, rgba(10,30,51,.72) 46%, rgba(10,30,51,.28) 100%); }
  .s-recruit .in{ position:relative; z-index:2; width:min(1320px,calc(100% - 56px)); margin:0 auto; color:#fff; }
  .s-recruit h2{ color:#fff; }
  .s-recruit p{ color:rgba(255,255,255,.86); font-size:16.5px; line-height:2.1; margin:20px 0 0; max-width:30em; }
  .s-recruit .jobs{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 32px; }
  .s-recruit .jobs span{ border:1px solid rgba(255,255,255,.45); padding:9px 20px; font-size:14.5px; }

  /* --- S13 FAQ（sec-faq-03 左sticky×番号アコーディオン） --- */
  .s-faq{ background:#fff; }
  .s-faq .inner{ display:grid; grid-template-columns:32% 1fr; gap:60px; align-items:start; }
  .s-faq .left{ position:sticky; top:calc(var(--hd) + 24px); }
  .s-faq .list{ border-top:2px solid var(--navy); }
  .s-faq details{ border-bottom:1px solid var(--steel-l); }
  .s-faq summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
                  font-weight:700; font-size:16.5px; color:var(--navy); line-height:1.8; }
  .s-faq summary::-webkit-details-marker{ display:none; }
  .s-faq summary::after{ content:""; position:absolute; right:8px; top:31px; width:13px; height:13px;
                         border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
                         transform:rotate(45deg); transition:transform .25s; }
  .s-faq details[open] summary::after{ transform:rotate(-135deg); }
  .s-faq .a{ padding:0 40px 24px 0; color:var(--steel); font-size:16px; line-height:2.05; }

  /* --- S14 お知らせ（sec-news-01 左見出し＋右リスト） --- */
  .s-news{ background:var(--paper); }
  .s-news .inner{ display:grid; grid-template-columns:30% 1fr; gap:56px; align-items:start; }
  .s-news ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--steel-l); }
  .s-news li a{ display:grid; grid-template-columns:110px 116px 1fr; gap:20px; align-items:baseline;
                padding:22px 4px; border-bottom:1px solid var(--steel-l); text-decoration:none;
                color:var(--ink); transition:background .2s,padding .2s; }
  .s-news li a:hover{ background:#fff; padding-left:14px; }
  .s-news time{ font-family:'Space Grotesk',monospace; font-size:13.5px; color:var(--steel); }
  .s-news .cat{ font-size:11.5px; border:1px solid var(--blue); color:var(--blue-d);
                text-align:center; padding:3px 0; }
  .s-news .ttl{ font-size:16.5px; font-weight:700; line-height:1.8; }

  /* --- S15 お問い合わせ（sec-cta-10 静かな受付） --- */
  .s-contact{ background:#fff; }
  .s-contact .grid{ display:grid; grid-template-columns:1fr 44%; gap:60px; align-items:start; }
  .s-contact .points{ list-style:none; margin:34px 0 0; padding:26px 0 0; border-top:1px solid var(--steel-l); }
  .s-contact .points li{ display:flex; gap:16px; align-items:baseline; padding:10px 0; }
  .s-contact .points b{ display:block; }
  .s-contact .points span{ display:block; margin-left:0; margin-top:4px; }
  .s-contact .points .no{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.18em;
                          color:var(--blue-d); flex:0 0 auto; }
  .s-contact .points b{ font-weight:700; font-size:16px; color:var(--navy); }
  .s-contact .points span{ color:var(--steel); font-size:14.5px; margin-left:.6em; }
  .s-contact .panel{ background:var(--paper); border:1px solid var(--steel-l); padding:34px 34px 36px; position:relative; }
  .s-contact .panel::before{ content:""; position:absolute; top:-1px; left:34px; width:56px; height:3px; background:var(--blue); }
  .s-contact .way + .way{ border-top:1px dashed var(--steel-l); margin-top:26px; padding-top:26px; }
  .s-contact .way-label{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--blue-d); margin:0 0 12px; }
  .s-contact .tel-big{ display:inline-block; font-family:'Space Grotesk',monospace; font-weight:700;
                       font-size:clamp(28px,3.2vw,38px); letter-spacing:.03em; color:var(--navy);
                       text-decoration:none; line-height:1.2; }
  .s-contact .note{ display:block; color:var(--steel); font-size:14px; margin-top:8px; line-height:1.9; }

  /* --- フッター（parts-catalog footer-04 メガフッター） --- */
  .ft{ background:var(--navy-d); color:rgba(255,255,255,.78); padding:72px 0 0; }
  .ft .wrap{ width:min(1320px,calc(100% - 56px)); margin:0 auto; }
  .ft .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px;
            border-bottom:1px solid rgba(255,255,255,.14); }
  .ft .brand .nm{ font-weight:900; font-size:19px; color:#fff; letter-spacing:.04em; }
  .ft .brand .nm small{ display:block; font-family:'Space Grotesk',monospace; font-size:9px;
                        letter-spacing:.22em; color:rgba(255,255,255,.5); margin-top:5px; font-weight:400; }
  .ft .brand address{ font-style:normal; font-size:14.5px; line-height:2; margin-top:20px; }
  .ft .brand .tel{ color:#fff; font-weight:700; text-decoration:none; font-size:17px;
                   font-family:'Space Grotesk',monospace; display:inline-block; margin-top:12px; }
  .ft h4{ font-size:12px; letter-spacing:.16em; color:#8FD0F5; margin:0 0 16px; font-weight:700; }
  .ft ul{ list-style:none; margin:0; padding:0; }
  .ft li{ margin-bottom:11px; }
  .ft a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:14.5px; }
  .ft a:hover{ color:#fff; }
  .ft .btm{ display:flex; justify-content:space-between; align-items:center; gap:20px;
            padding:22px 0 26px; font-size:12px; color:rgba(255,255,255,.5); flex-wrap:wrap; }

  /* --- レスポンシブ --- */
  @media (max-width:980px){
    .sec{ padding:84px 0; }
    .s-intro .duo, .s-craft .duo, .s-company .inner, .s-message .duo,
    .s-faq .inner, .s-news .inner, .s-contact .grid{ grid-template-columns:1fr; gap:40px; }
    .s-company .left, .s-faq .left{ position:static; }
    /* .s-craft .visual は sticky をやめるだけ。**static にしてはいけない。**
       中の .vimg が inset:0 の絶対配置なので、基準が外側の要素に移り、
       画像が箱の外まで広がる（実測 430x1873px の巨大なぼけた写真になっていた） */
    .s-craft .visual{ position:relative; }
    /* トップの「売って、つくって、直す。」は、読み進めると右の写真が差し替わる作り。
       スマホはスクロールで章を追い越すので差し替えが成立せず、最後の1枚だけが残っていた。
       写真は3つの章と1対1で対応しているので、章ごとにその写真を置く */
    #visual{ display:none; }
    .s-craft .ch .chimg{ display:block; aspect-ratio:3/2; background-size:cover;
                         background-position:center; margin:0 0 20px; }
    /* 縦を 44vh で決めると、横長の写真（3:2）が縦長の箱に押し込まれ、
       拡大されて粗く見える（430px幅だと 430x440＝ほぼ正方形の箱になっていた）。
       写真そのものの比率に合わせれば、切り取らずに収まる */
    .s-craft .visual{ height:auto; aspect-ratio:3/2; margin-bottom:24px; }
    .s-craft .ch{ min-height:auto; padding:26px 0; }
    .s-makers .idx{ grid-template-columns:1fr; }
    .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
    .bento .t-big{ grid-column:span 2; grid-row:span 2; }
    /* 説明文が長いぶん、大タイルは全面に薄い紺をかけて読ませる */
    .bento .t-big .shade{ background:linear-gradient(180deg, rgba(10,30,51,.42) 0%, rgba(10,30,51,.88) 58%, rgba(10,30,51,.95) 100%); }
    .bento .lab h3{ font-size:17px; }
    .s-items .grid{ grid-template-columns:1fr 1fr; }
    .s-office .grid{ grid-template-columns:1fr; }
    .s-banner .grid{ grid-template-columns:1fr; }
    .s-banner .b-main{ grid-row:auto; min-height:220px; }
    .ft .top{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:768px){
    /* 電話番号は指で押す。実測 21〜37px しかなかったので 44px を確保する */
    a[href^="tel:"]{ display:inline-flex; flex-direction:column; justify-content:center; min-height:44px; }
    /* ヘッダーの帯だけは高さを変えられない（FVのピン留めが --hd を基準にしている）。
       余白で当たり判定だけ広げ、負のマージンで見た目の高さは元のまま保つ */
    .hd .util .tel{ min-height:0; padding:12px 6px; margin:-12px -6px; }
    .sec .wrap{ width:calc(100% - 40px); }
    .s-intro .deco{ left:-9px; bottom:-9px; }
    .s-message .deco{ right:-9px; bottom:-9px; }
    .s-intro .body p.k{ font-size:19px; }
    /* 会社概要の表：見出し150pxのままだと、中身が177pxしか残らず
       「販売事業／加工事業／…」が8文字ごとに折り返していた（実測）。見出しを上に出す */
    .s-company .r{ grid-template-columns:1fr; gap:6px; padding:16px 4px; }
    .s-company .r dt{ padding-top:0; }
    .s-office .card{ grid-template-columns:1fr; }
    /* 1列に積んだとき、height:100% は **WebKit（iPhone）だけ**行の高さを無視して
       画像が下の文字の上まで伸びる（実測 234px の行に 511px の画像）。
       比率で高さを決め切ると、どのブラウザでも同じ大きさに収まる。 */
    .s-office .card img{ height:auto; min-height:0; aspect-ratio:16/9; }
    .s-items .grid{ grid-template-columns:1fr; }
    .s-fields figure{ width:250px; }
    .s-news li a{ grid-template-columns:1fr; gap:6px; }
    .s-news .cat{ justify-self:start; padding:3px 14px; }
    .ft .top{ grid-template-columns:1fr; gap:32px; }
    .s-quote .in{ flex-direction:column; align-items:flex-start; }
  }

  /* ============================================================
     固定ページ（STEP 7）
     ============================================================ */
  .page-hero{ background:var(--navy-d); color:#fff; padding:calc(var(--hd) + 62px) 0 62px; position:relative; }
  .page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--blue); }
  .page-hero .wrap{ width:min(1320px,calc(100% - 56px)); margin:0 auto; }
  .page-hero .crumb{ font-size:12px; color:rgba(255,255,255,.6); margin-bottom:26px; display:flex; gap:10px; }
  .page-hero .crumb a{ color:rgba(255,255,255,.8); text-decoration:none; }
  .page-hero .crumb a:hover{ color:#fff; }
  .page-hero .eyebrow{ color:#8FD0F5; }
  .page-hero .eyebrow::before{ background:#8FD0F5; }
  .page-hero h1{ font-size:clamp(28px,4.2vw,50px); font-weight:900; margin:14px 0 0; line-height:1.32;
                 word-break:auto-phrase; text-wrap:balance; }
  .page-hero .lead{ color:rgba(255,255,255,.76); font-size:16.5px; line-height:2.05; margin:18px 0 0; max-width:38em; }

  .sec h3.mid{ font-size:clamp(19px,2.2vw,26px); font-weight:900; color:var(--navy); margin:0 0 18px; line-height:1.6; }
  .sec .note{ color:var(--steel); font-size:15px; line-height:1.95; margin:14px 0 0; }
  .anchor{ scroll-margin-top:calc(var(--hd) + 20px); }

  /* 表（取扱品・会社概要・募集要項） */
  .tbl{ width:100%; border-collapse:collapse; margin-top:24px; }
  .tbl th, .tbl td{ border-bottom:1px solid var(--steel-l); padding:16px 14px; text-align:left;
                    font-size:16px; line-height:1.95; vertical-align:top; }
  .tbl th{ width:210px; color:var(--navy); font-weight:700; background:var(--paper); }
  .tbl tr:first-child th, .tbl tr:first-child td{ border-top:2px solid var(--navy); }

  /* 工程（縦のタイムライン）
     既定＝濃紺の塗りつぶし丸（修理の流れ）／ .num を付けると中抜きの特大数字（応募の流れ） */
  .steps{ list-style:none; margin:44px 0 0; padding:0; counter-reset:st; }
  .steps li{ counter-increment:st; position:relative; padding:0 0 46px 90px; }
  .steps li:last-child{ padding-bottom:0; }
  .steps li::before{ content:counter(st,decimal-leading-zero); position:absolute; left:0; top:0;
                     width:54px; height:54px; border-radius:50%; background:var(--navy); border:none; color:#fff;
                     font-family:"Space Grotesk",monospace; font-size:17px; font-weight:700; letter-spacing:.04em;
                     display:flex; align-items:center; justify-content:center; z-index:1; }
  .steps li::after{ content:""; position:absolute; left:26px; top:62px; bottom:-6px; width:2px;
                    background:linear-gradient(180deg, var(--steel-l) 0%, rgba(232,236,240,.4) 100%); }
  .steps li:last-child::after{ display:none; }
  .steps li b{ display:block; font-size:19px; color:var(--navy); padding-top:10px; line-height:1.6; }
  .steps li span{ display:block; color:var(--steel); font-size:16px; line-height:2.05; margin-top:10px; max-width:44em; }

  /* .num ＝ 丸をやめて中抜きの特大数字 */
  .steps.num li{ padding:0 0 50px 112px; }
  .steps.num li::before{ width:auto; height:auto; border-radius:0; background:none; color:transparent;
                         -webkit-text-stroke:1.5px var(--blue); font-size:58px; line-height:1;
                         letter-spacing:-.02em; top:-8px; display:block; }
  .steps.num li::after{ left:3px; top:62px; width:1px;
                        background:linear-gradient(180deg, var(--steel-l) 0%, rgba(232,236,240,.4) 100%); }
  .steps.num li b{ padding-top:2px; }


  /* 沿革 */
  .hist{ list-style:none; margin:24px 0 0; padding:0; border-top:2px solid var(--navy); }
  .hist li{ display:grid; grid-template-columns:130px 1fr; gap:20px; padding:16px 4px;
            border-bottom:1px solid var(--steel-l); font-size:16px; }
  .hist time{ font-family:"Space Grotesk",monospace; color:var(--blue-d); font-weight:700; }

  /* 拠点の簡易案内図（Googleマップは使わない） */
  .route{ margin-top:20px; background:var(--paper); border:1px solid var(--steel-l); padding:20px 22px; }
  .route .r-line{ display:flex; align-items:center; gap:0; margin:6px 0 14px; }
  .route .r-node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
  .route .r-dot{ width:13px; height:13px; border-radius:50%; background:var(--navy); }
  .route .r-node:last-child .r-dot{ background:var(--blue); }
  .route .r-bar{ flex:1 1 auto; height:2px; background:var(--steel-l); }
  .route .r-lab{ font-size:13px; color:var(--steel); white-space:nowrap; }
  .route .r-node:last-child .r-lab{ color:var(--navy); font-weight:700; }
  .route p{ margin:0; font-size:15px; color:var(--steel); line-height:1.95; }

  /* 取扱メーカー検索 */
  .mk-controls{ display:grid; grid-template-columns:1fr 260px; gap:14px; margin-bottom:18px; }
  .mk-controls input[type=search], .mk-controls select{
    width:100%; padding:16px 18px; font-size:16px; border:1.5px solid var(--steel);
    background:#fff; color:var(--ink); font-family:inherit; }
  .mk-controls input[type=search]:focus, .mk-controls select:focus{ outline:2px solid var(--blue); outline-offset:1px; }
  .mk-meta{ display:flex; align-items:baseline; gap:14px; margin:0 0 14px; }
  .mk-meta strong{ font-family:"Space Grotesk",monospace; font-size:30px; color:var(--navy); font-weight:700; line-height:1.25; }
  .mk-meta span{ color:var(--steel); font-size:15px; }
  .mk-table-wrap{ overflow-x:auto; border-top:2px solid var(--navy); }
  .mk-table{ width:100%; border-collapse:collapse; min-width:680px; }
  .mk-table th{ background:var(--paper); font-size:12px; letter-spacing:.08em; color:var(--steel);
                text-align:left; padding:12px 14px; border-bottom:1px solid var(--steel-l); white-space:nowrap; }
  .mk-table td{ padding:16px 14px; border-bottom:1px solid var(--steel-l); font-size:15.5px; vertical-align:top; }
  .mk-table tr:hover td{ background:var(--blue-l); }
  .mk-name-ja{ font-weight:700; color:var(--navy); display:block; }
  .mk-name-kana{ display:block; font-size:12.5px; color:var(--steel); margin-top:3px; }
  .mk-en{ font-family:"Space Grotesk",monospace; font-size:14px; color:var(--steel); }
  .mk-cat{ white-space:nowrap; font-size:14px; }
  .mk-items{ color:var(--steel); font-size:14px; }
  [data-mk-empty]{ padding:40px 4px; color:var(--steel); font-size:16px; }
  [data-mk-status]{ margin:14px 0 0; padding:12px 16px; background:var(--blue-l); font-size:15px; line-height:1.9; }
  [data-mk-status][data-kind="error"]{ background:#FDECEC; }
  .mk-dl{ margin-top:34px; background:var(--paper); border:1px solid var(--steel-l); padding:22px 24px; }
  .mk-dl b{ display:block; color:var(--navy); font-size:16.5px; margin-bottom:8px; }
  .mk-dl a{ color:var(--blue-d); font-weight:700; }

  /* フォーム */
  .form{ margin-top:28px; }
  .form .fld{ margin-bottom:22px; }
  .form label{ display:block; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; }
  .form .req{ background:var(--blue); color:#fff; font-size:10.5px; padding:2px 8px; margin-left:8px;
              font-weight:700; letter-spacing:.06em; vertical-align:2px; }
  .form .opt{ background:var(--steel-l); color:var(--steel); font-size:10.5px; padding:2px 8px; margin-left:8px;
              vertical-align:2px; }
  .form input[type=text], .form input[type=email], .form input[type=tel],
  .form input[type=date], .form input[type=number], .form textarea, .form select{
    width:100%; padding:14px 16px; font-size:16px; border:1.5px solid var(--steel-l); background:#fff;
    font-family:inherit; color:var(--ink); }
  .form input:focus, .form textarea:focus, .form select:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
  .form textarea{ min-height:170px; resize:vertical; }
  .form .two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .form .hint{ color:var(--steel); font-size:13.5px; margin:6px 0 0; }
  .form .agree{ display:flex; gap:10px; align-items:flex-start; font-size:15px; margin:26px 0; }
  .form .submit{ display:inline-flex; align-items:center; gap:10px; padding:18px 46px; background:var(--navy);
                 color:#fff; font-weight:700; font-size:15px; border:none; cursor:pointer; font-family:inherit; }
  .form .submit:hover{ background:var(--blue-d); }
  .form-note{ background:var(--paper); border-left:3px solid var(--blue); padding:18px 22px; margin:0 0 28px;
              font-size:15px; color:var(--steel); line-height:1.95; }

  /* 規約など長文 */
  .doc h3{ font-size:18.5px; font-weight:900; color:var(--navy); margin:36px 0 12px; }
  .doc p, .doc li{ font-size:16px; line-height:2.1; color:var(--ink); }
  .doc ul{ padding-left:1.4em; }
  .doc li{ margin-bottom:6px; }

  /* 狭い画面では、道順の図を縦に積む。
     駅名は白抜きせず折り返さない指定なので、横並びのままだと 320px で 26px はみ出していた
     （「近鉄奈良線 東花園駅 → 中央環状線 → 本社／関西営業所」）。
     縦に積めば、駅名がどれだけ長くなってもはみ出さない。 */
  /* 事業内容ページの切り替え画像だけ、トップより少し低い（もとは直書きの height:60vh）。
     **直書きにするとスマホ用の指定に勝ってしまう**ので、クラスで持たせる。
     実際、直書きの高さ60vhと比率指定がぶつかって、幅593pxまで広がっていた */
  .s-craft .visual.v60{ position:sticky; top:calc(var(--hd) + 24px); height:60vh; }
  @media (max-width:980px){
    .s-craft .visual.v60{ position:relative; top:auto; height:auto; aspect-ratio:3/2; }
  }

  @media (max-width:480px){
    .route{ padding:18px 16px; }
    .route .r-line{ flex-direction:column; align-items:flex-start; gap:0; margin:4px 0 14px; }
    .route .r-node{ flex-direction:row; align-items:center; gap:10px; }
    .route .r-bar{ flex:0 0 auto; width:2px; height:16px; margin-left:5px; }
    .route .r-lab{ font-size:13px; }
  }

  @media (max-width:768px){
    .tbl th, .tbl td{ display:block; width:auto; }
    .tbl th{ border-bottom:none; padding-bottom:6px; }
    .tbl tr:first-child td{ border-top:none; }
    .steps li{ padding:0 0 36px 72px; }
    .steps li::before{ width:46px; height:46px; font-size:15px; }
    .steps li::after{ left:22px; top:54px; }
    .steps li b{ font-size:18px; padding-top:6px; }
    .steps.num li{ padding:0 0 40px 84px; }
    .steps.num li::before{ font-size:44px; top:-6px; }
    .steps.num li::after{ left:2px; top:50px; }
    .hist li{ grid-template-columns:1fr; gap:4px; }
    .mk-controls{ grid-template-columns:1fr; }
    .form .two{ grid-template-columns:1fr; }
  }
  /* ==SECTIONS-CSS-END== */