:root{
  color-scheme:light;
  /* 土台は議会の窓（デジタル庁デザインシステムの値）。アクセント色は緑 #186a3b の1色だけ */
  --bg:#ffffff; --fg:#333333; --muted:#595959; --line:#cccccc; --soft:#f2f2f2;
  --p:#186a3b; --pc:#e6f4ea; --opc:#0b5530; --link:#0b5530; --visited:#5b3a8c;
  --focus:#ffd43d; --focus-outline:#000000;
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",system-ui,sans-serif;
  --fs:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--fs);line-height:1.7;letter-spacing:.02em;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
h1,h2,h3{font-weight:700;text-wrap:balance;color:var(--fg)}
.h1{font-size:clamp(1.75em,1.1em + 1.6vw,2.25em);line-height:1.4}
.h2{font-size:1.5em;line-height:1.5}
.ttl{font-size:1.375em;line-height:1.45}
.lead{font-size:1.125em}
.muted{color:var(--muted)}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:visited{color:var(--visited)}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:4px solid var(--focus-outline);outline-offset:2px;box-shadow:0 0 0 2px var(--focus)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
main,.card-b,.box,.panel,.sheet{min-width:0}
.src,.card-b,.cert{overflow-wrap:anywhere}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;width:100%}
@media (max-width:600px){.wrap{padding:0 16px}}
.skip{position:absolute;left:8px;top:-200px;z-index:30;background:#fff;color:var(--link);padding:12px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:8px}

/* M3 のステートレイヤー（押せるものの上に薄い膜） */
.sl{position:relative}
.sl::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity .15s}
.sl:hover::before{opacity:.08}
.sl:active::before,.sl:focus-visible::before{opacity:.12}

/* 上の帯（M3 Top app bar） */
.appbar{background:#fff;border-bottom:1px solid var(--line)}
.appbar-in{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;min-height:68px;padding-block:6px}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none;min-height:48px;border-radius:8px;padding-right:8px}
.brand:visited{color:var(--fg)}
.brand svg{width:32px;height:32px;flex:none;color:var(--p)}
.brand b{display:block;font-size:18px;line-height:1.3}
.brand small{display:block;font-size:14px;color:var(--muted);line-height:1.3;font-weight:500}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:24px;color:var(--fg);text-decoration:none;font-weight:500}
.nav a:visited{color:var(--fg)}
.nav a[aria-current=page]{background:var(--pc);color:var(--opc);font-weight:700}
@media (max-width:480px){.nav{margin-left:0;width:100%}.nav a{padding:0 12px}}

/* ボタン */
.btn-f,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 24px;border-radius:24px;font-family:inherit;font-size:1em;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;line-height:1.4}
.btn-f{background:var(--p);color:#fff;border:1px solid var(--p)}
.btn-f:visited{color:#fff}
.btn-o{background:#fff;color:var(--opc);border:1px solid var(--p)}
.btn-o:visited{color:var(--opc)}
.btn-t{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:24px;border:0;background:transparent;color:var(--opc);font-family:inherit;font-size:1em;font-weight:700;cursor:pointer}

/* ヒーロー */
.hero{position:relative}
.hero-img{display:block;width:100%;height:440px;object-fit:cover;object-position:center 40%;background:#e6e6e6}
.hero-over{position:relative;margin-top:-160px}
.sheet{background:#fff;border-radius:16px;padding:32px;max-width:860px;box-shadow:0 1px 3px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:16px}
@media (max-width:600px){.hero-img{height:240px}.hero-over{margin-top:-40px}.sheet{padding:24px 16px}}
.img-cap{font-size:14px;color:var(--muted);padding-top:8px}

/* 検索・チップ（M3 Search bar / Filter chip） */
.search{display:flex;align-items:center;gap:16px;height:56px;padding:0 16px 0 20px;border-radius:28px;background:#eee;max-width:640px}
.search input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:1.125em;color:var(--fg);height:52px}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none}
.search:focus-within{outline:4px solid var(--focus-outline);outline-offset:2px;box-shadow:0 0 0 2px var(--focus)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips .lab{font-weight:700;margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:8px;border:1px solid #767676;background:#fff;color:var(--fg);font-family:inherit;font-size:1em;font-weight:500;cursor:pointer}
.chip[aria-pressed=true]{background:var(--pc);border-color:var(--p);color:var(--opc);font-weight:700}
.chip .ck{display:none}
.chip[aria-pressed=true] .ck{display:inline}
.defs{display:flex;flex-direction:column;gap:8px;padding:16px 24px;background:var(--soft);border-radius:12px}

/* 一覧とカード */
.sec{padding-top:32px;display:flex;flex-direction:column;gap:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px;list-style:none;padding:0}
.grid>li[hidden]{display:none}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.card-b{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.stretch{color:var(--fg);text-decoration:none}
.stretch:visited{color:var(--fg)}
.stretch:hover{text-decoration:underline}
.stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.tags{list-style:none;padding:4px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:2px 12px;border-radius:8px;background:var(--soft);color:var(--fg);font-size:1em}
.tag svg{flex:none;color:var(--p)}
.card .src{margin-top:auto;padding-top:8px}
.panel{background:var(--pc);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
.box{border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.cert{display:flex;flex-direction:column;gap:6px;padding-block:16px;border-top:1px solid var(--line)}
.cert:first-of-type{border-top:0;padding-top:0}
.src{font-size:14px;color:var(--muted);line-height:1.7}
.src a{color:var(--muted)}
.info{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px}
.info dt{font-weight:700}
.info dd{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){.info{grid-template-columns:1fr;gap:0}.info dd{margin-bottom:8px}}
.crumbs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;list-style:none;padding:0}
.steps li{background:var(--soft);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;list-style:none;padding:0}
.pics img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:#e6e6e6}
.pics figcaption{font-size:14px;color:var(--muted);padding-top:4px}
.prose{display:flex;flex-direction:column;gap:16px;max-width:46em}
.prose h2{padding-top:16px}
.prose ul,.prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
main{flex:1;padding-bottom:24px}

/* 下の帯 */
.foot{background:var(--soft);margin-top:32px;padding:32px 0;flex:none}
.foot-in{display:flex;flex-direction:column;gap:24px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.foot h2{font-size:1em;font-weight:700;margin:0 0 4px}
.foot ul{list-style:none;padding:0;display:flex;flex-direction:column}
.sns-row{display:flex;flex-wrap:wrap;gap:12px}
.sns-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:8px;border:1px solid #767676;background:#fff;color:var(--fg);font-weight:500;text-decoration:none}
.sns-link:hover{background:var(--soft)}
.sns-ic{flex:none;width:24px;height:24px}
.foot li a{display:inline-flex;align-items:center;min-height:48px}
.foot li a .sns-ic{margin-right:8px}
.foot a[aria-current=page]{font-weight:700;color:var(--fg)}
.credit{font-size:14px;color:var(--muted);line-height:1.7}
.credit a{color:var(--muted)}

/* 受付フォーム（本物の label と input。押せる所は48px、文字は16px以上） */
.form{display:flex;flex-direction:column;gap:20px;max-width:640px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-weight:700}
.req{font-weight:500;color:var(--muted)}
.hint{color:var(--muted)}
.field input[type="text"],.field input[type="email"],.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:1em;color:var(--fg);background:#fff;border:1px solid #767676;border-radius:8px}
.field textarea{min-height:200px;resize:vertical;line-height:1.7}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:4px solid var(--focus-outline);outline-offset:2px;box-shadow:0 0 0 2px var(--focus)}
.check{display:flex;align-items:flex-start;gap:12px}
.check input{flex:none;width:24px;height:24px;margin:12px 0 0;accent-color:var(--p)}
.check label{display:flex;align-items:center;min-height:48px;font-weight:700}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
