:root{
  /* base — 白・グレー・黒 */
  --paper:#ffffff;
  --bg:#f9fafb;
  --ink:#111827;
  --text:#1f2937;
  --sub:#4b5563;
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:#e5e7eb;
  --line2:#d1d5db;
  /* アクセント＝Excelのグリーン。
     面（背景）には使わず、ふちどり・記号・強調にだけ使う。 */
  --accent:#217346;
  --accent-dark:#1a5c38;
  --accent-mid:#2f8f5b;
  --accent-pale:#eaf4ee;
  --accent-line:#a9d4bd;
  /* 注意喚起（法令・免責）だけに使う。緑と役割を混ぜない */
  --alert:#b4342a;
  --alert-pale:#fbf0ee;
  --alert-line:#e8cfcb;
  --radius:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Meiryo",system-ui,sans-serif;
  background:var(--paper);color:var(--text);
  font-size:15px;line-height:1.8;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

.wrap{max-width:1152px;margin:0 auto;padding:0 20px}
.wrap-n{max-width:1024px;margin:0 auto;padding:0 20px}
.wrap-s{max-width:768px;margin:0 auto;padding:0 20px}
.sec{border-bottom:1px solid var(--line)}
.sec.gray{background:var(--bg)}
.pad{padding:44px 0}
.pad-s{padding:30px 0}

/* ---------- typography ---------- */
h1,h2,h3,h4{letter-spacing:-.01em;font-weight:600;line-height:1.4;color:var(--ink)}
h1{font-size:30px;line-height:1.35}
h2{font-size:23px;margin-bottom:6px}
h3{font-size:17px}
h4{font-size:15px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.lead{font-size:15px;color:var(--sub);line-height:1.85}
.small{font-size:13px;color:var(--muted)}
.xs{font-size:12px;color:var(--faint)}
.sec-head{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head p{font-size:14px;color:var(--sub);margin-top:2px}

/* ---------- icons ---------- */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.ic.lg{width:20px;height:20px}
.ic.sm{width:13px;height:13px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2);background:var(--paper);color:var(--text);
  font-size:14px;font-weight:600;padding:9px 16px;border-radius:var(--radius);transition:background .12s,border-color .12s}
.btn:hover{background:var(--bg)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ink:hover{background:#374151}
/* 唯一の色付きCTA＝ダウンロード（＝いちばん測りたい行動） */
.btn-dl{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-dl:hover{background:var(--accent-dark)}
.btn-lg{font-size:15px;padding:12px 22px}
.btn-sm{font-size:13px;padding:6px 12px;font-weight:600}
.btn-block{width:100%}

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:40}
header.site .row{display:flex;align-items:center;gap:26px;height:60px}
.logo{display:flex;align-items:baseline;gap:8px;flex:none}
.logo b{font-size:20px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.logo span{font-size:10px;letter-spacing:.16em;color:var(--faint);font-weight:700}
nav.main{display:flex;gap:2px;flex:1;flex-wrap:wrap}
nav.main button{font-size:13.5px;color:var(--sub);padding:6px 10px;border-radius:var(--radius)}
nav.main button:hover{background:var(--bg);color:var(--ink)}
nav.main button.on{color:var(--ink);font-weight:700;background:var(--bg)}

/* ---------- search ---------- */
.searchbox{display:flex;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox input{flex:1;border:none;outline:none;padding:12px 14px;font-size:15px;background:transparent}
.searchbox button{background:var(--ink);color:#fff;padding:0 20px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.searchbox.sm input{padding:8px 12px;font-size:14px}
.searchbox.sm button{padding:0 14px;font-size:13px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line2);border-radius:999px;padding:5px 13px;font-size:13px;color:var(--sub);background:var(--paper);display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--bg);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tag{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--bg);color:var(--muted);
  font-size:11.5px;padding:2px 8px;border-radius:4px;line-height:1.7}
.tag.law{border-color:#e8cfcb;background:var(--alert-pale);color:var(--alert)}
.tag.new{border-color:#cfe0e5;background:var(--accent-pale);color:var(--accent);font-weight:700}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}

.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:16px;display:block;text-align:left;transition:border-color .12s,background .12s}
.card:hover{border-color:var(--line2);background:#fcfcfd}
.card h3{font-size:15.5px;margin-bottom:5px;line-height:1.5}
.card p{font-size:13px;color:var(--muted);line-height:1.7}
.card .meta{display:flex;gap:12px;margin-top:10px;font-size:11.5px;color:var(--faint);flex-wrap:wrap}
.card .meta span{display:inline-flex;align-items:center;gap:4px}

.linkcard{border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;display:flex;align-items:center;gap:10px;background:var(--paper);text-align:left;font-size:14px;color:var(--text);transition:border-color .12s,background .12s}
.linkcard:hover{border-color:var(--line2);background:var(--bg)}
.linkcard .ic{color:var(--muted)}
.linkcard b{font-weight:600;flex:1}
.linkcard i{font-style:normal;font-size:11.5px;color:var(--faint)}

/* ---------- list rows ---------- */
.rows{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.row-t{display:grid;grid-template-columns:1fr 150px 110px 130px;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--paper);text-align:left;width:100%}
.row-t:last-child{border-bottom:none}
.row-t:hover{background:var(--bg)}
.row-t .nm{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.row-t .ds{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.65}
.row-t .c{font-size:12.5px;color:var(--sub)}
.row-t .n{font-size:12.5px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- excel preview ---------- */
.xls{border:1px solid var(--line2);border-radius:var(--radius);overflow:auto;background:var(--paper)}
.xls table{font-size:12px;min-width:640px}
.xls th,.xls td{border:1px solid #dfe3e8;padding:5px 8px;text-align:left;white-space:nowrap;line-height:1.6}
.xls thead.col th{background:#f1f3f5;color:var(--faint);text-align:center;font-weight:600;font-size:11px;height:22px}
.xls td.rn,.xls th.rn{background:#f1f3f5;color:var(--faint);text-align:center;font-weight:600;width:34px;font-size:11px}
.xls td.ttl{font-weight:700;color:var(--ink);font-size:13px}
.xls td.hd{background:#eef1f3;font-weight:700;color:var(--text)}
.xls td.mut{color:var(--faint)}
.xls-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--bg);font-size:12px;color:var(--muted)}
.xls-tabs{display:flex;gap:0;border-top:1px solid var(--line);background:var(--bg);padding:0 8px}
.xls-tabs span{font-size:11.5px;padding:5px 12px;color:var(--faint);border:1px solid transparent;border-bottom:none}
.xls-tabs span.on{background:var(--paper);border-color:var(--line);color:var(--text);font-weight:600}

/* ---------- notice ---------- */
.notice{border:1px solid var(--line);border-left:3px solid var(--faint);background:var(--bg);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;font-size:13px;color:var(--sub);line-height:1.85}
.notice.alert{border-left-color:var(--alert);background:var(--alert-pale);border-color:#eddad6}
.notice b{color:var(--ink);display:block;margin-bottom:4px;font-size:13.5px}
.notice ul{margin-top:6px}
.notice li{padding-left:14px;position:relative}
.notice li:before{content:"";position:absolute;left:3px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--faint)}

/* ---------- detail layout ---------- */
.dtl{display:grid;grid-template-columns:1fr 316px;gap:40px;align-items:start}
.side{position:sticky;top:110px}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--paper);margin-bottom:12px}
.panel h4{font-size:13.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.spec{width:100%;font-size:13px}
.spec th{text-align:left;color:var(--muted);font-weight:400;padding:5px 0;width:82px;vertical-align:top;white-space:nowrap}
.spec td{padding:5px 0;color:var(--text);vertical-align:top}
.crumb{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--muted);padding:12px 0;flex-wrap:wrap}
.crumb button:hover{color:var(--ink);text-decoration:underline}
.crumb .ic{width:12px;height:12px;color:var(--faint)}
.blk{margin-bottom:30px}
.blk>h2{font-size:19px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.blk p{font-size:14.5px;color:var(--sub);line-height:1.9}
.bullets li{position:relative;padding-left:17px;font-size:14.5px;color:var(--sub);line-height:1.9}
.bullets li:before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--line2)}
.checks li{position:relative;padding-left:22px;font-size:14px;color:var(--sub);line-height:1.9}
.checks li .ic{position:absolute;left:0;top:5px;color:var(--accent);width:14px;height:14px;stroke-width:2.4}
.steps{counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:30px;font-size:14.5px;color:var(--sub);line-height:1.9;margin-bottom:10px}
.steps li:before{content:counter(s);position:absolute;left:0;top:5px;width:20px;height:20px;border:1px solid var(--line2);border-radius:50%;
  font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;line-height:1}
.steps li b{color:var(--ink);font-weight:600}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field label i{font-style:normal;font-size:11px;color:var(--alert);margin-left:5px;font-weight:600}
.field label i.opt{color:var(--faint)}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;border:1px solid var(--line2);border-radius:var(--radius);padding:9px 12px;font-size:14px;outline:none;background:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:110px;resize:vertical;line-height:1.8}
.field .hint{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.7}
.radios{display:flex;flex-direction:column;gap:7px}
.radios label{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--sub);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px}
.radios label:hover{background:var(--bg)}
.radios input{margin-top:5px;accent-color:var(--accent)}

/* ---------- footer ---------- */
footer.site{background:var(--bg);border-top:1px solid var(--line);padding:36px 0 26px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;margin-bottom:26px}
footer.site h5{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:.03em}
footer.site li{margin-bottom:6px}
footer.site li button{font-size:12.5px;color:var(--muted);text-align:left}
footer.site li button:hover{color:var(--ink);text-decoration:underline}
footer.site .fine{border-top:1px solid var(--line);padding-top:16px;font-size:11.5px;color:var(--faint);line-height:1.85}

.hide{display:none!important}
.done{border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;background:var(--bg)}
.done .ic{width:34px;height:34px;color:var(--accent);stroke-width:1.5;margin-bottom:8px}

@media(max-width:900px){
  .dtl{grid-template-columns:1fr;gap:26px}
  .side{position:static}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .row-t{grid-template-columns:1fr;gap:5px}
  .row-t .n{text-align:left}
  header.site{position:static}
  h1{font-size:24px}
  h2{font-size:20px}
}
@media(max-width:560px){
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  nav.main{display:none}
}

/* ================= 実サイト用の追加 ================= */
.hact{flex:none;display:flex;align-items:center;gap:12px}
.loginlink{font-size:13px;color:var(--muted);padding:6px 4px;border-bottom:1px solid transparent}
.loginlink:hover{color:var(--ink);border-bottom-color:var(--line2)}
nav.main a{font-size:13.5px;color:var(--sub);padding:6px 10px;border-radius:var(--radius)}
nav.main a:hover{background:var(--bg);color:var(--ink)}
nav.main a.on{color:var(--ink);font-weight:700;background:var(--bg)}
.crumb a:hover{color:var(--ink);text-decoration:underline}
footer.site li a{font-size:12.5px;color:var(--muted)}
footer.site li a:hover{color:var(--ink);text-decoration:underline}

.checks.inline{display:flex;gap:20px;flex-wrap:wrap}
.facet{display:flex;gap:8px;align-items:baseline;margin-bottom:8px}
.facet>.xs{width:74px;flex:none}
.dtl2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.sidelist li{margin-bottom:6px}
.sidelist a{font-size:13px;color:var(--sub);line-height:1.6}
.sidelist a:hover{color:var(--ink);text-decoration:underline}
.spec.big{font-size:14px}
.spec.big th{width:110px}
.row-t.static{cursor:default}
.row-t.static:hover{background:var(--paper)}
.xls-scroll{overflow-x:auto}
.xls{overflow:visible}
.xls td.grp{background:#eef1f3;font-weight:700}
.blk p a,.notice a,.lead a,.small a,.xs a{text-decoration:underline}
.blk p a:hover,.notice a:hover{color:var(--accent)}
.ic.big{width:34px;height:34px;stroke-width:1.5;color:var(--accent);margin-bottom:8px}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:var(--radius);font-size:13.5px;z-index:80;display:none;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:90%}
.toast.show{display:block}

/* login */
.loginbox{max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--paper)}
.loginbox-head{margin-bottom:20px}
.loginbox-head .logo{display:flex;justify-content:center;align-items:baseline;gap:8px}
.loginbox-head .logo span{letter-spacing:.16em}
.loginfoot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.flowbox{max-width:440px;margin:26px auto 0;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--bg)}
.flow{counter-reset:fl}
.flow li{counter-increment:fl;position:relative;padding-left:30px;margin-bottom:12px;font-size:13.5px;line-height:1.7}
.flow li:before{content:counter(fl);position:absolute;left:0;top:3px;width:20px;height:20px;border:1px solid var(--line2);border-radius:50%;
  font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;line-height:1;background:var(--paper)}
.flow li b{display:block;color:var(--ink);font-weight:600}
.flow li span{color:var(--muted);font-size:12.5px}

@media(max-width:900px){
  .dtl2{grid-template-columns:1fr;gap:26px}
  header.site{position:static}
}
@media(max-width:560px){
  .hact .btn{display:none}
  .facet{flex-direction:column;gap:4px}
  .facet>.xs{width:auto}
}
.loginbox-head h1{font-size:17px;text-align:center;margin-top:10px}

/* ================= Excelグリーンの効かせ方 =================
   面（背景）には使わない。ふちどり・記号・強調だけに使う。
   法令注意の赤とは役割を分ける。 */

/* 見出しラベルに縦の緑バー */
.eyebrow{display:flex;align-items:center;gap:7px}
.eyebrow:before{content:"";width:3px;height:12px;background:var(--accent);border-radius:1px;flex:none}

/* Excelファイルであることを示す印 — カード全体に緑の点が散る */
.card .meta span:first-child .ic,
.linkcard .ic,
.panel h4 .ic,
.sidelist li:before{color:var(--accent)}

/* カードは上辺に緑を差してホバーを分かりやすく */
.card{border-top:2px solid transparent;transition:border-color .12s,background .12s}
.card:hover{border-top-color:var(--accent);border-color:var(--line2);background:#fcfdfc}

/* 一覧の行は左に緑のふちどり */
.row-t{border-left:3px solid transparent;transition:border-color .12s,background .12s}
.row-t:hover{border-left-color:var(--accent);background:var(--accent-pale)}
.row-t.static:hover{border-left-color:transparent;background:var(--paper)}

/* リンクカードも左の緑で */
.linkcard{border-left:3px solid transparent}
.linkcard:hover{border-left-color:var(--accent);border-color:var(--line2);background:#fcfdfc}

/* チェックマーク・手順番号・流れの番号 */
.checks li .ic{color:var(--accent)}
.steps li:before,.flow li:before{border-color:var(--accent-line);color:var(--accent);font-weight:700}

/* タグ */
.tag.new{border-color:var(--accent-line);background:var(--accent-pale);color:var(--accent-dark);font-weight:700}
.card .meta .tag.law,.row-t .tag.law{border-color:var(--alert-line)}

/* 入力まわりのフォーカスを緑に */
.searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.chip.on{background:var(--accent);border-color:var(--accent)}
.chip:hover{border-color:var(--accent-line);color:var(--accent-dark)}
.chip.on:hover{background:var(--accent-dark);color:#fff}

/* 注意ブロック：情報は緑、法令は赤のまま */
.notice{border-left-color:var(--accent)}
.notice.alert{border-left-color:var(--alert)}
.notice b .ic{color:var(--accent)}
.notice.alert b .ic{color:var(--alert)}

/* パンくず・本文リンク */
.crumb a:hover{color:var(--accent-dark)}
.blk p a,.notice a{color:var(--accent-dark)}

/* フッターの見出しに緑の小バー */
footer.site h5{display:flex;align-items:center;gap:6px}
footer.site h5:before{content:"";width:3px;height:10px;background:var(--accent);border-radius:1px}

/* 区切り見出し */
.blk>h2{border-bottom:2px solid var(--line)}
.blk>h2{position:relative}
.blk>h2:after{content:"";position:absolute;left:0;bottom:-2px;width:44px;height:2px;background:var(--accent)}

/* ---- Excelプレビューを本物のExcelに寄せる ---- */
.xls{border-color:var(--accent-line)}
.xls-bar{background:var(--accent-pale);color:var(--accent-dark);border-bottom-color:var(--accent-line);font-weight:600}
.xls-bar .ic{color:var(--accent)}
.xls thead th{background:#eef1f3}
.xls td.hd{border-bottom:2px solid var(--accent)}
.xls td.grp{color:var(--accent-dark)}
.xls-tabs{border-top-color:var(--accent-line)}
.xls-tabs span.on{color:var(--accent-dark);font-weight:700;border-bottom:2px solid var(--accent);margin-bottom:-1px}

/* ダウンロードボタンは緑のまま少し強く */
.btn-dl{box-shadow:0 1px 0 var(--accent-dark)}
.btn-dl:hover{box-shadow:0 1px 0 var(--accent-dark)}

/* 固定ヘッダーに隠れないように */
:target,[id]{scroll-margin-top:76px}

/* グリッドの子は既定で min-width:auto のため、中身の最小幅で列が押し広げられる。
   詳細ページで横スクロールが出ていた原因。 */
.dtl>*,.dtl2>*,.grid>*{min-width:0}
.xls,.xls-scroll{max-width:100%}
body{overflow-x:hidden}