@charset "utf-8";

:root{
  --ink:#1b2430;
  --ink-soft:#5c6672;
  --line:#dfe3e8;
  --paper:#ffffff;
  --surface:#f4f6f8;
  --down:#1e7a4b;      /* 値下がり */
  --lowest:#a8630b;    /* 底値 */
  --focus:#2c5fa8;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.85;
  font-feature-settings:"palt";
}

a{color:var(--focus)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ---- 年齢確認 ---- */
#agegate{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
html[data-age="ok"] #agegate{display:none}
.gate-box{max-width:440px;text-align:center}
.gate-box h1{font-size:1.25rem;margin:0 0 4px;letter-spacing:.04em}
.gate-box p{color:#c3cad3;font-size:.9rem;line-height:1.8;margin:0 0 24px}
.gate-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gate-btns button{
  font:inherit;padding:13px 26px;border-radius:3px;cursor:pointer;border:1px solid transparent;
}
.gate-yes{background:#fff;color:var(--ink);font-weight:700}
.gate-no{background:transparent;color:#c3cad3;border-color:#4a5563}

/* ---- ヘッダ ---- */
.pr-band{
  background:var(--surface);border-bottom:1px solid var(--line);
  font-size:.75rem;color:var(--ink-soft);padding:7px 0;line-height:1.6;
}
header.site{border-bottom:1px solid var(--line);padding:20px 0 16px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;text-decoration:none;color:inherit}
.brand b{font-size:1.35rem;letter-spacing:.06em;font-weight:800}
.brand span{font-size:.78rem;color:var(--ink-soft)}
nav.site{margin-top:12px;font-size:.85rem}
nav.site a{margin-right:18px;text-decoration:none;color:var(--ink-soft)}
nav.site a:hover{color:var(--ink);text-decoration:underline}

/* ---- トップ ---- */
.lede{padding:44px 0 36px;border-bottom:1px solid var(--line)}
.lede h2{
  font-size:1.75rem;line-height:1.5;margin:0 0 14px;font-weight:800;letter-spacing:.01em;
}
.lede p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:62ch}

.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:.82rem}
.legend div{display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.chip{
  display:inline-block;padding:2px 9px;border-radius:2px;
  font-size:.72rem;font-weight:700;color:#fff;letter-spacing:.04em;
}
.chip.down{background:var(--down)}
.chip.low{background:var(--lowest)}
.chip.flat{background:#7c8794}

section{padding:36px 0}
section h3{font-size:1.05rem;margin:0 0 6px;font-weight:800}
section > p.note{margin:0 0 22px;color:var(--ink-soft);font-size:.88rem}

ul.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ul.entries li{border-bottom:1px solid var(--line)}
ul.entries a{
  display:block;padding:16px 0;text-decoration:none;color:inherit;
}
ul.entries a:hover .t{text-decoration:underline}
ul.entries .t{font-weight:700;line-height:1.6}
ul.entries .d{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:3px}

.panel{
  background:var(--surface);border:1px solid var(--line);
  padding:20px 22px;font-size:.9rem;line-height:1.85;
}
.panel h3{margin-top:0}
.panel p:last-child{margin-bottom:0}

/* ---- 記事 ---- */
article{padding:40px 0 8px}
article h1{font-size:1.5rem;line-height:1.55;margin:0 0 10px;font-weight:800}
.meta{font-size:.8rem;color:var(--ink-soft);margin:0 0 30px}
article h2{
  font-size:1.08rem;margin:38px 0 12px;padding-left:11px;
  border-left:3px solid var(--ink);font-weight:800;line-height:1.6;
}
article p{margin:0 0 18px;max-width:70ch}
article ul{margin:0 0 18px;padding-left:1.3em}
article li{margin-bottom:7px}
.callout{
  border:1px solid var(--line);border-left:3px solid var(--lowest);
  background:var(--surface);padding:15px 18px;font-size:.9rem;margin:0 0 22px;
}
.callout p{margin:0}

.backlink{border-top:1px solid var(--line);padding:22px 0;font-size:.88rem}

/* ---- フッタ ---- */
footer.site{
  border-top:1px solid var(--line);margin-top:20px;padding:26px 0 44px;
  font-size:.82rem;color:var(--ink-soft);
}
footer.site nav{margin-bottom:12px}
footer.site nav a{margin-right:16px;color:var(--ink-soft)}
footer.site p{margin:0 0 6px;line-height:1.8}

@media (max-width:600px){
  body{font-size:15px}
  .lede{padding:32px 0 28px}
  .lede h2{font-size:1.4rem}
  article h1{font-size:1.28rem}
  .wrap{padding:0 16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}