/* JET 省人化診断 — Design System v2.0 (2026-07-25)
   原則: 文字は最小・余白は最大・装飾は最小限・階層は明快 */

:root{
  --ink:#0B1F33; --ink-2:#5A6B7B; --ink-3:#8B99A6;
  --line:#E4E9EF; --line-2:#F0F3F7;
  --bg:#FFFFFF; --bg-2:#F7F9FB; --bg-3:#0B1F33;
  --accent:#E97317; --accent-2:#D0640C; --accent-bg:#FEF6EF;
  --r:12px; --r-lg:16px;
  --sp:clamp(56px,7vw,96px);
  --font:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}
img,svg{display:block;max-width:100%}
/* 🔴 SVGの既定サイズ(2026-08-03 追加)
   上の display:block により、インラインSVGはブロック要素になる。
   viewBox しか持たないアイコンSVGはサイズ指定が無いと
   「コンテナ幅いっぱい × 同比率の高さ」まで膨らむ(実際に .note で約1000px四方の
   巨大アイコンが表示される事故が起きた)。
   ここで低詳細度の既定値を置き、各コンポーネント側(.btn svg 等)で上書きする。
   ※ 詳細度は (0,0,1) なので .xxx svg (0,1,1) には必ず負ける = 既存の指定は壊さない */
svg{width:22px;height:22px;flex:none}
a{color:inherit;text-decoration:none}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.sec{padding:var(--sp) 0}
.sec--tint{background:var(--bg-2)}
.sec--ink{background:var(--bg-3);color:#fff}

/* Typography ------------------------------------------------ */
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.28;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(21px,2.6vw,28px);line-height:1.4;letter-spacing:-.01em;font-weight:800}
h3{font-size:16px;font-weight:700}
.lede{font-size:clamp(15px,1.7vw,17px);color:var(--ink-2);line-height:1.75}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cap{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}

/* Header ---------------------------------------------------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hd .wrap{height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:16px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.logo em{font-style:normal;font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:0}
.hd nav{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:600}
.hd nav a:not(.btn){color:var(--ink-2);transition:color .15s}
.hd nav a:not(.btn):hover{color:var(--ink)}
@media(max-width:820px){.hd nav a:not(.btn){display:none}}

/* Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:999px;
  padding:13px 26px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.16s ease;white-space:nowrap}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--bg-2);border-color:var(--ink-3);transform:none}
.btn--on-ink{background:#fff;color:var(--ink)}
.btn--on-ink:hover{background:#f1f4f7}
.btn svg{width:16px;height:16px;stroke-width:2.2}

/* Grid & Cards ---------------------------------------------- */
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.g-3,.g-4,.g-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4,.g-6{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.18s ease}
.sec--tint .card{background:#fff}
a.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,31,51,.06)}

/* 業界カード */
.ind{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:22px 20px}
.ind .ico{width:30px;height:30px;color:var(--accent);stroke-width:1.6}
.ind b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ind span{font-size:12px;color:var(--ink-3);line-height:1.55}
.ind .arw{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;color:var(--accent);opacity:0;transform:translateX(-4px);transition:.18s}
a.ind:hover .arw{opacity:1;transform:translateX(0)}

/* 小さな特徴チップ(アイコン+短語) */
.feat{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 8px;text-align:center}
.feat svg{width:22px;height:22px;color:var(--ink-2);stroke-width:1.7}
.feat span{font-size:12.5px;font-weight:700;letter-spacing:-.01em}

/* 対応領域 */
.dom{padding:24px}
.dom svg{width:26px;height:26px;color:var(--accent);stroke-width:1.6;margin-bottom:12px}
.dom b{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px}
.dom span{font-size:13px;color:var(--ink-2);line-height:1.65}

/* FAQ ------------------------------------------------------- */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-size:14.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:.2s;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{font-size:13.5px;color:var(--ink-2);padding:0 0 20px;line-height:1.8}

/* Notes ----------------------------------------------------- */
.note{background:var(--accent-bg);border:1px solid #F3DCC4;border-radius:var(--r);padding:18px 22px;font-size:13.5px}
.note b{font-weight:700}
/* 文中に置くアイコン。display:block のままだと改行されるので inline-block に戻す */
.note svg{display:inline-block;vertical-align:-3px;width:17px;height:17px;color:var(--accent);stroke-width:1.8}
.foot{background:var(--bg-3);color:#7C8B99;font-size:12px;padding:32px 0;text-align:center;line-height:1.9}
.foot a{color:#A9B7C4}

/* Utilities ------------------------------------------------- */
.divider{height:1px;background:var(--line);border:0}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--accent-bg);color:var(--accent-2);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;white-space:nowrap}
.pill svg{width:14px;height:14px;stroke-width:2.4}
.crumb{font-size:12px;color:var(--ink-3);padding-top:20px}
.crumb a:hover{color:var(--ink-2)}
@media print{.hd,.foot,.no-print{display:none!important}}

/* ヘッダーの補助リンク(本体サイトへの導線)— 2026-08-03 追加
   診断ページに本体のフルグローバルナビはコピーしない方針。
   理由: ① 通知バー等が二重管理になる ② 静的HTMLなのでログイン状態を反映できない
        ③ 入力ページに離脱先を増やすと診断の完了率が落ちる
   そのため主要3本だけを置き、狭い画面では畳んで主要導線を優先する。 */
.hd nav .nav-sub{white-space:nowrap}
@media(max-width:900px){.hd nav .nav-sub{display:none}}
@media(max-width:420px){.logo em{display:none}}