:root{
  --navy:#10233F; --navy2:#1d3a63; --yellow:#FFC531; --yellow-soft:#FFF3CF;
  --paper:#FFFBF4; --card:#FFFFFF; --gray:#EEF0F3; --gray2:#D5DAE1; --text:#10233F; --muted:#4a5a72;
  --green:#176B43; --green-bg:#E4F4EB; --warn-bg:#FFF3CF; --danger:#9B1C1C;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;background:var(--paper);color:var(--text);line-height:1.8;font-size:16px;overflow-wrap:anywhere}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--yellow);color:var(--navy);padding:10px 14px;border-radius:8px;font-weight:700;z-index:50}
.skip:focus{top:8px}
a{color:var(--navy2)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--yellow)}
main:focus{outline:none}
h1,h2,h3{line-height:1.4;margin:0 0 .6em}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}

.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding-top:6px;padding-bottom:6px}
.brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem;padding:8px 0}
.brand:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--yellow)}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{color:#fff;text-decoration:none;padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;font-size:.95rem}
.nav a[aria-current="page"]{background:var(--yellow);color:var(--navy);font-weight:700}
.nav a:focus-visible{outline-color:#fff}
.count{display:inline-block;min-width:1.4em;padding:0 .4em;margin-left:.3em;border-radius:99px;background:#fff;color:var(--navy);font-size:.8rem;text-align:center;font-weight:700}
.count:empty{display:none}
main{padding-top:24px;padding-bottom:40px;min-height:60vh}

.hero{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px 20px;margin-bottom:20px}
.hero h1{font-size:1.9rem;margin-bottom:.3em}
.hero .sub{color:var(--yellow);font-weight:700;margin-bottom:1em}
.hero p{color:#eaf0f8}
.card{background:var(--card);border:1px solid var(--gray2);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.steps{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:var(--yellow-soft);border-radius:var(--radius);padding:14px 16px;margin:0}
.steps b{display:block}
.notice{background:var(--warn-bg);border-left:6px solid var(--yellow);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.notice.safe{background:var(--green-bg);border-left-color:var(--green)}
.notice.alert{background:#FDECEC;border-left-color:var(--danger)}
.muted{color:var(--muted);font-size:.92rem}

.btn{font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:10px 20px;border-radius:12px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--gray)}
.btn-primary{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-primary:hover{background:#ffd25e}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy2)}
.btn-link{border:none;background:none;text-decoration:underline;min-height:44px;padding:8px;color:var(--navy)}
.btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.btn-sm{min-height:44px;padding:6px 14px;font-size:.95rem}

.tools{display:grid;gap:12px;margin-bottom:12px}
label.lbl{display:block;font-weight:700;margin-bottom:4px}
input[type=search],input[type=text],textarea{font:inherit;width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--gray2);border-radius:10px;background:#fff;color:var(--text)}
input:focus-visible,textarea:focus-visible{border-color:var(--navy)}
textarea{min-height:90px;resize:vertical;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{font:inherit;min-height:44px;padding:6px 14px;border-radius:99px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff}
.chip .n{font-size:.8rem;opacity:.85;margin-left:.3em}

.tcard{position:relative;background:#fff;border:1px solid var(--gray2);border-radius:var(--radius);padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px}
.tcard:hover{border-color:var(--navy)}
.tcard .tag{font-size:.8rem;font-weight:700;background:var(--gray);border-radius:99px;padding:2px 10px;align-self:flex-start}
.tcard .id{font-size:.8rem;color:var(--muted)}
.tcard h3{margin:0;padding-right:48px;font-size:1rem}
.tcard h3 a{color:var(--navy);text-decoration:none}
.tcard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.tcard h3 a:focus-visible{outline:none}
.tcard:focus-within{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--yellow)}
.tcard .sit{font-size:.9rem;color:var(--muted);margin:0}
.fav{position:absolute;top:8px;right:8px;z-index:2;min-width:44px;min-height:44px;border-radius:10px;border:2px solid var(--gray2);background:#fff;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--navy)}
.fav[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow)}
.fav:focus-visible{outline:3px solid var(--navy);box-shadow:0 0 0 6px var(--yellow)}
.crumb{font-size:.9rem;margin-bottom:12px}

.meta{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:16px}
.meta .card{margin:0}
.meta dt{font-size:.85rem;color:var(--muted);font-weight:700}
.meta dd{margin:0}
.msg{white-space:pre-wrap;background:#fff;border:2px solid var(--navy);border-radius:var(--radius);padding:16px 18px;line-height:1.9;font-size:1.02rem}
.msg.final{border-color:var(--green);background:#fff}
mark.ph{background:var(--yellow);color:var(--navy);padding:0 .25em;border-radius:4px;font-weight:700;border-bottom:2px solid var(--navy)}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;margin:12px 0;cursor:pointer;font-weight:700}
.switch input{width:26px;height:26px;accent-color:var(--navy);flex:none}
.fieldbox{margin-bottom:14px}
.fieldbox .ph-hint{font-size:.85rem;color:var(--muted)}
.two{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:800px){.two{grid-template-columns:1fr 1fr;align-items:start}.sticky{position:sticky;top:76px}}
.warn{background:#FDECEC;border:2px solid var(--danger);border-radius:12px;padding:12px 16px;margin:12px 0}
.ok-note{color:var(--green);font-weight:700}
.status{min-height:1.6em;font-weight:700;color:var(--green)}
.empty{text-align:center;padding:30px 10px;color:var(--muted)}
.site-footer{background:var(--gray);padding:20px 0;font-size:.9rem;color:var(--muted)}

@media(max-width:360px){
  h1{font-size:1.35rem}.hero h1{font-size:1.5rem}.hero{padding:20px 14px}
  .btn{width:100%}.btn-row{flex-direction:column}.nav a{padding:10px 8px;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more){.card,.tcard{border-color:var(--navy)}}

@media print{
  body{background:#fff;font-size:12pt}
  .site-header,.site-footer,.skip,.no-print,.btn-row,.crumb{display:none!important}
  .msg{border:1px solid #000;break-inside:avoid}
  mark.ph{background:none;border-bottom:1px solid #000}
  main{padding:0}
}