/* ===========================================================
   安全書類メーカー 共通スタイル
   このファイルを直せば全ページの見た目が変わります
   =========================================================== */

:root{
  /* 面 */
  --ink:#12161A;          /* 文字・濃い面 */
  --ink-2:#4A555E;        /* 補助文字 */
  --line:#96A2AC;         /* 入力枠 */
  --line-soft:#DCE2E7;    /* 罫線 */
  --bg:#F2F5F7;           /* 背景 */
  --paper:#FFFFFF;
  /* 主色 */
  --go:#00693B;
  --go-dark:#00512E;
  --go-soft:#E8F2ED;
  --stop:#B81C24;
  --stop-soft:#FCF2F2;
  --mark:#E8A317;
  /* 形 */
  --r:10px;
  --r-sm:7px;
  --shadow:0 1px 2px rgba(18,22,26,.05), 0 6px 20px rgba(18,22,26,.05);
}

html{ scroll-behavior:smooth }
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}

/* ---------- 上端のライン（旧: 斜めストライプ） ---------- */
.hazard{
  height:4px;
  background:linear-gradient(90deg, var(--go) 0%, var(--go) 55%, var(--mark) 55%, var(--mark) 100%);
}

/* ---------- サイト内メニュー ---------- */
.sitebar{
  background:var(--ink);
  border-bottom:none;
  position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.sitebar .in{
  max-width:1000px; margin:0 auto;
  display:flex; align-items:stretch; gap:0;
  padding:0 14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sitebar .in::-webkit-scrollbar{ display:none }
.sitebar a{
  color:#A9B6C0; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:.02em;
  padding:15px 14px 13px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.sitebar a:hover{ color:#fff }
.sitebar a[aria-current="page"]{ color:#fff; border-bottom-color:var(--mark) }
.sitebar .home{
  color:#fff; font-weight:900; font-size:15px;
  padding-left:0; padding-right:20px; letter-spacing:.03em;
  border-bottom-color:transparent !important;
}
.sitebar .home span{ color:var(--mark); margin-right:2px }
.sitebar a:focus-visible{ outline:2px solid var(--mark); outline-offset:-4px }

/* ---------- ページ見出し ---------- */
header{
  background:linear-gradient(180deg, #171C21 0%, var(--ink) 100%);
  color:#fff;
  padding:52px 18px 46px;
  position:relative;
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(0,105,59,.9), rgba(232,163,23,.55), transparent);
}
header h1{
  font-size:clamp(25px,5.4vw,38px);
  font-weight:900; line-height:1.3; letter-spacing:-.02em;
}
header .lede{
  margin-top:14px; font-size:16.5px; line-height:1.85;
  color:#B9C5CE; max-width:62ch;
}
header .eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.22em;
  color:var(--mark); margin-bottom:12px; text-transform:uppercase;
}

/* ---------- 手順タブ ---------- */
nav.steps, nav.tabs{
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:47px; z-index:30;
  box-shadow:0 1px 3px rgba(18,22,26,.04);
}
nav.steps button, nav.tabs button{
  font-size:14.5px; letter-spacing:.01em;
  padding:16px 6px 14px;
  border-bottom-width:3px;
  color:var(--ink-2);
  transition:color .15s ease;
}
nav.steps .num{
  width:26px; height:26px; font-size:14px;
  background:#E4E9ED; font-weight:900;
}
nav.steps button[aria-current="true"], nav.tabs button[aria-current="true"]{ color:var(--go) }

/* ---------- 面 ---------- */
.card, .qa, .toc, .note, .sheetwrap, .gridwrap, .none, .opt, .people li, .subs li{
  border-radius:var(--r);
}
.card, .qa, .toc, .sheetwrap, .gridwrap{
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
}
.card>h3{
  font-size:16px; font-weight:900;
  letter-spacing:.02em;
  border-bottom-width:2px;
  padding-bottom:12px; margin-bottom:18px;
}
h2{ letter-spacing:-.01em }

/* ---------- 入力 ---------- */
input, select, textarea{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover{ border-color:var(--ink-2) }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--go);
  box-shadow:0 0 0 3px rgba(0,105,59,.16);
}
label{ letter-spacing:.01em }

/* ---------- ボタン ---------- */
button.big{
  border-radius:var(--r-sm);
  letter-spacing:.02em;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
button.big:active{ transform:translateY(1px) }
button.big.go{ box-shadow:0 1px 2px rgba(0,81,46,.3) }
button.big:focus-visible, button:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,105,59,.35);
}

/* ---------- 強調ブロック ---------- */
.tellme, .box{ border-left-width:3px; border-radius:0 var(--r-sm) var(--r-sm) 0 }
.warnbox, .warn{ border-left-width:3px; border-radius:0 var(--r-sm) var(--r-sm) 0 }
.krbar{ border-radius:var(--r); border-width:1px; box-shadow:var(--shadow) }
.result, .verdict{ border-radius:var(--r); box-shadow:var(--shadow) }
.verdict{ border-width:2px }
.ans{ border-left-width:3px; border-radius:0 var(--r-sm) var(--r-sm) 0 }

/* ---------- トップのツールカード ---------- */
a.tool{
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  position:relative;
}
a.tool:hover{
  border-color:var(--go);
  box-shadow:0 2px 4px rgba(18,22,26,.06), 0 14px 30px rgba(18,22,26,.09);
  transform:translateY(-2px);
}
a.tool .t{ letter-spacing:-.01em }
a.tool .tags span{
  border-radius:999px; padding:3px 11px;
  font-size:13px; font-weight:700; color:var(--go-dark);
  background:var(--go-soft);
}
.cta{ border-radius:var(--r-sm); letter-spacing:.02em }

/* ---------- フッター ---------- */
footer{
  background:var(--ink);
  color:#93A1AC;
  padding:44px 18px 40px;
  font-size:14.5px; line-height:1.9;
  border-top:1px solid rgba(255,255,255,.07);
}
footer .wrap{ max-width:1000px }
footer strong{
  color:#fff; font-size:16px; font-weight:900;
  letter-spacing:.03em; margin-bottom:10px;
}
footer a{
  color:#DCE3E8; text-decoration:none;
  border-bottom:1px solid rgba(220,227,232,.28);
  padding-bottom:1px;
}
footer a:hover{ color:#fff; border-bottom-color:#fff }

/* ---------- 印刷 ---------- */
@media print{
  .hazard, .sitebar{ display:none !important }
}


/* ================================================
   v2 レイアウト統一（2026-08-19）
   ページ幅・見出し・トップの2列グリッド
   ================================================ */
main,.wrap{max-width:900px}
main{padding-top:26px}
header{padding-top:54px;padding-bottom:48px}
header h1{font-size:clamp(25px,5.4vw,36px)}
header .lede{max-width:34em}
main > p,.qa p{max-width:42em}
main > h2{margin-top:46px}
main > h2:first-child{margin-top:0}

/* トップページのツール一覧だけ2列にする */
@media(min-width:820px){
  main:has(> a.tool){display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  main:has(> a.tool) > *{grid-column:1/-1}
  main:has(> a.tool) > a.tool{grid-column:auto;margin:0}
  main:has(> a.tool) > a.tool:nth-last-of-type(1):nth-of-type(odd){grid-column:1/-1}
}
a.tool{position:relative}
a.tool::after{content:"\2192";position:absolute;right:18px;top:18px;color:var(--go);font-weight:700;opacity:.45;transition:opacity .15s ease,transform .15s ease}
a.tool:hover::after{opacity:1;transform:translateX(3px)}
@media(max-width:560px){a.tool::after{display:none}}
@media print{a.tool::after{display:none}}


/* ================================================
   LP（トップページ）専用 2026-08-19
   ================================================ */
body:has(main.lp){background:var(--paper)}
main.lp{max-width:none;margin:0;padding:0;display:block}

/* ヒーロー */
.lp-hero .wrap{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;max-width:900px}
@media(min-width:900px){.lp-hero .wrap{grid-template-columns:1.08fr .92fr;gap:48px}}
.lp-hero h1{margin:0 0 14px}
.lp-hero .lede{margin:0}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lp-btn{display:inline-block;padding:15px 24px;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .15s ease,border-color .15s ease}
.lp-btn.on{background:var(--go);color:#fff}
.lp-btn.on:hover{background:var(--go-dark)}
.lp-btn.off{border-color:rgba(255,255,255,.5);color:#fff}
.lp-btn.off:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.lp-marks{display:flex;flex-wrap:wrap;gap:6px 20px;margin:22px 0 0;padding:0;list-style:none;font-size:13.5px;color:rgba(255,255,255,.8)}
.lp-marks li::before{content:"\2713";color:var(--mark);font-weight:700;margin-right:6px}

/* 用紙（このページの主役） */
.sheet{background:#fff;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.4);padding:12px;aspect-ratio:297/210;display:flex;flex-direction:column;gap:8px}
.sheet-t{font-size:12px;font-weight:700;color:#12161A;text-align:center;letter-spacing:.3em;border-bottom:2px solid #12161A;padding-bottom:6px}
.sheet-b{flex:1;border:1px solid #B9C4CC;background-image:repeating-linear-gradient(to bottom,transparent 0 15px,#D5DCE1 15px 16px),repeating-linear-gradient(to right,transparent 0 calc(100%/7 - 1px),#D5DCE1 calc(100%/7 - 1px) calc(100%/7))}
.sheet-b::before{content:"";display:block;height:16px;background:#EEF4F0;border-bottom:1px solid #B9C4CC}
@media(max-width:899px){.sheet{max-width:420px;margin:0 auto}}

/* セクション */
.lp-sec{border-top:1px solid var(--line-soft)}
.lp-sec>.wrap{padding:56px 18px}
.lp-tag{font-size:11.5px;letter-spacing:.16em;font-weight:700;color:var(--go);margin:0 0 10px}
.lp-sec h2{font-size:clamp(20px,4.6vw,27px);margin:0 0 10px}
.lp-sec>.wrap>p.lead{color:var(--ink-2);margin:0 0 28px;max-width:38em;line-height:1.85}
.lp-3{display:grid;gap:16px}
@media(min-width:760px){.lp-3{grid-template-columns:repeat(3,1fr)}}
.lp-i{border:1px solid var(--line-soft);border-radius:10px;padding:20px 18px;background:var(--paper)}
.lp-i b{display:block;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mark);letter-spacing:.08em;margin-bottom:10px}
.lp-i h3{font-size:17px;margin:0 0 8px}
.lp-i p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.8}
.lp-tools{display:grid;gap:18px}
@media(min-width:760px){.lp-tools{grid-template-columns:1fr 1fr}}
.lp-tools a.tool{margin:0}
.lp-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lp-facts li{padding-left:26px;position:relative;line-height:1.85;color:var(--ink-2)}
.lp-facts li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--go);font-weight:700}
.lp-facts b{color:var(--ink)}
.lp-q{border-top:1px solid var(--line-soft)}
.lp-q:last-of-type{border-bottom:1px solid var(--line-soft)}
.lp-q summary{padding:16px 0;font-weight:700;cursor:pointer;font-size:15.5px}
.lp-q summary::marker{color:var(--go)}
.lp-q p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px;line-height:1.85}
.lp-news{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lp-news li{border-top:1px solid var(--line-soft);padding:16px 0;display:grid;gap:4px}
.lp-news li:last-child{border-bottom:1px solid var(--line-soft)}
.lp-news time{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);letter-spacing:.05em}
.lp-news span{font-size:15px;line-height:1.7}
.lp-more{display:inline-block;margin-top:22px;font-weight:700;color:var(--go);text-decoration:none;border-bottom:2px solid var(--go-soft);padding-bottom:2px}
.lp-more:hover{border-bottom-color:var(--go)}
.lp-end{background:var(--go-soft);border-top:1px solid var(--line-soft)}
.lp-end .wrap{padding:56px 18px;text-align:center}
.lp-end h2{font-size:clamp(21px,4.8vw,28px);margin:0 0 12px}
.lp-end p{color:var(--ink-2);margin:0 auto 26px;max-width:34em;line-height:1.85}
.lp-end .lp-actions{justify-content:center}
.lp-end .lp-btn.off{border-color:var(--go);color:var(--go)}
.lp-end .lp-btn.off:hover{background:#fff}
@media print{.lp-hero,.lp-sec,.lp-end{display:none}}