/* 防災えらび
   避難誘導標識の緑と、公共サインで使われるUDフォントを軸にしたデザイン。
   目立たせるのはトップの「備蓄チェックリスト」だけで、ほかは静かに保つ。 */
:root{
  --paper:#F3F6F4;      /* 掲示板のような冷たい白 */
  --surface:#FFFFFF;
  --ink:#14211C;        /* 緑みのある黒 */
  --muted:#56635E;
  --rule:#C9D3CF;
  --green:#00704A;      /* 避難誘導標識の緑 */
  --green-tint:#E2EEE8;
  --caution:#FFD400;    /* PR表記の帯 */
  --focus:#0B57D0;
  --measure:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:1rem;line-height:1.75;font-feature-settings:"palt" 1;
}
a{color:var(--green);text-underline-offset:.2em}
a:focus-visible,.buy:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.4;font-weight:700;margin:0}
p{margin:0}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px}

/* PR表記：黄色の帯で、ページを開いてすぐ目に入る位置に */
.pr-band{background:var(--caution);color:var(--ink);font-size:.8125rem;line-height:1.6;padding:8px 16px;text-align:left}

.site-head{background:var(--surface);border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px;max-width:46rem;margin:0 auto;padding:14px 16px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:1.125rem}
.logo-mark{width:22px;height:22px;background:var(--green);border-radius:3px;position:relative}
.logo-mark::after{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:1px}

/* トップ */
.hero{padding:48px 0 32px}
.hero h1{font-size:clamp(1.75rem,5.5vw,2.5rem);line-height:1.35;letter-spacing:.01em}
.lead{margin-top:16px;max-width:var(--measure);color:var(--muted)}

/* 備蓄チェックリスト（このサイトでいちばん目立たせる要素） */
.checklist{background:var(--surface);border:2px solid var(--ink);border-radius:4px;padding:20px 20px 16px}
.checklist-title{font-size:1rem;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.check-rows{list-style:none;margin:0;padding:0}
.check-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:18px 0;border-bottom:1px dashed var(--rule)}
.check-row:last-child{border-bottom:0}
.check-box{width:28px;height:28px;border:2px solid var(--ink);border-radius:2px}
.check-label{font-weight:700;font-size:1.125rem}
.check-target{font-size:clamp(1.25rem,4vw,1.625rem);font-weight:700;color:var(--green);
  font-variant-numeric:tabular-nums;line-height:1.3}
.check-link{white-space:nowrap;font-size:.875rem;font-weight:700;padding:10px 14px;
  border:2px solid var(--green);border-radius:4px;text-decoration:none}
.check-link:hover{background:var(--green);color:#fff}
.note-small{margin-top:12px;font-size:.8125rem;color:var(--muted)}
.how{margin:40px 0 0;max-width:var(--measure)}
.how h2,.guide h2,main section>h2{font-size:1.125rem;margin-bottom:8px}

/* テーマ別ページ */
.crumb{display:flex;gap:8px;padding-top:24px;font-size:.8125rem;color:var(--muted)}
.page-title{margin-top:8px;font-size:clamp(1.5rem,5vw,2rem)}
.updated{font-size:.8125rem;color:var(--muted);margin-top:4px}
.target-panel{margin:24px 0;padding:16px 20px;background:var(--green);color:#fff;border-radius:4px}
.target-caption{font-size:.875rem}
.target-value{font-size:clamp(1.5rem,5vw,2rem);font-weight:700;font-variant-numeric:tabular-nums}
.guide{max-width:var(--measure);margin-bottom:40px}
.guide p+p{margin-top:8px}

/* ランキング：スコア順に並ぶので番号を付ける */
.ranking{list-style:none;margin:16px 0 0;padding:0;border-top:2px solid var(--ink)}
.rank-item{display:grid;grid-template-columns:2rem 112px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--rule)}
.rank-no{font-size:1.5rem;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;line-height:1.2}
.rank-img img{width:112px;height:112px;object-fit:contain;background:var(--surface);border:1px solid var(--rule)}
.rank-name{font-size:1rem;font-weight:700}
.rank-name a{color:var(--ink);text-decoration:none}
.rank-name a:hover{text-decoration:underline}
.rank-price{margin-top:6px;font-size:1.375rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.rank-price span{font-size:.875rem;margin-left:2px}
.rank-review{display:flex;flex-wrap:wrap;gap:12px;font-size:.875rem}
.stars{color:#8A5A00;font-weight:700}
.rank-shop{font-size:.8125rem;color:var(--muted)}
.rank-note{margin-top:8px;font-size:.875rem;background:var(--green-tint);padding:8px 12px;border-radius:4px}
.rank-note ul{margin:0;padding-left:1.2em}
.buy{display:inline-block;margin-top:12px;padding:10px 18px;background:var(--green);color:#fff;
  font-weight:700;font-size:.9375rem;border-radius:4px;text-decoration:none}
.buy:hover{background:#005638}

/* 固定ページ */
main dl{display:grid;grid-template-columns:8em 1fr;gap:8px 16px;margin:16px 0 32px}
main dt{font-weight:700}
main dd{margin:0}
main>h1{padding-top:32px;margin-bottom:16px}
main>h2{margin:24px 0 8px;font-size:1.125rem}
main>p{max-width:var(--measure)}

.site-foot{margin-top:64px;padding-top:20px;padding-bottom:40px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.credit{margin-bottom:4px}

@media (max-width:560px){
  .check-row{grid-template-columns:auto 1fr;}
  .check-link{grid-column:2;justify-self:start}
  .rank-item{grid-template-columns:1.75rem 88px 1fr;gap:10px}
  .rank-img img{width:88px;height:88px}
  .buy{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}