:root{
  --brand:#f6b000; --ink:#111827; --muted:#6b7280; --panel:#fff; --soft:#fff7e6;
  --bg:#f9fafb; --radius:14px; --gap:16px; --max:1100px;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans JP',sans-serif; color:var(--ink); background:var(--bg); line-height:1.75}
img{max-width:100%; height:auto}
a{color:#1f2937}
.wrap{max-width:var(--max); margin:0 auto; padding:0px}
/* ヒーロー */
.hero{grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; background:var(--panel); border-radius:20px; padding:18px; box-shadow:0 1px 8px rgba(0,0,0,.05)}
.badge{display:inline-block; background:var(--brand); color:#111; font-weight:700; padding:6px 10px; border-radius:999px}
.hero h1{font-size:clamp(1.4rem, 2.8vw, 2.2rem); margin:.4em 0}
.hero p.lead{color:#101010; margin:.5em 0 0}
.hero figure{margin:0}
.hero .cover{border:1px solid #eee; aspect-ratio: 16/9; background:#fff url('images/krg01.jpg') center/cover no-repeat}
.qa-pair01{display:grid; grid-template-columns: 1fr .5fr; gap:30px; align-items:center; background:var(--panel); border-radius:20px; padding:24px 14px; box-shadow:0 1px 8px rgba(0,0,0,.05);background:linear-gradient(180deg, #fff, #fffef7);
  border:1px solid #f0e7cf; border-radius:14px; }
.qa-pair--02 .cover{ border:1px solid #eee; aspect-ratio: 44/12; background:#fff url('images/krg03.jpg') center/cover no-repeat}
.qa-pair--02 .cover02{ border:1px solid #eee; margin-top: 15px; aspect-ratio: 25/14; background:#fff url('images/krg04.jpg') center/cover no-repeat}
.qa-pair--02 figure{margin:0}
.qa-pair--03 .cover{ aspect-ratio: 25/25; background:#fff url('images/krg09.jpg') center/cover no-repeat; width:70%;margin: 0 auto;}
.qa-pair--03 .cover02{ border:1px solid #eee; aspect-ratio: 25/25; background:#fff url('images/krg10.jpg') center/cover no-repeat; width:70%;margin: 0 auto;}
.qa-pair--03 figure{margin:0}
/* スマホ幅（例：最大768px）で縦並びへ */
@media screen and (max-width: 767px)  {
  .qa-pair01 {
     display: inline-block; grid-template-columns: 1.2fr .5fr; gap:30px; align-items:center; background:var(--panel); border-radius:20px; padding:14px; box-shadow:0 1px 8px rgba(0,0,0,.05)/* ta */
  }
.qa-pair--03 .cover{ width:90%;}
.qa-pair--03 .cover02{ width:90%;}
}
.badge{display:inline-block; background:var(--brand); color:#111; font-weight:700; padding:6px 10px; border-radius:999px}
.qa-pair01 p.lead{color:var(--muted); margin:.5em 0 0}
.qa-pair01 figure{margin:0}
.qa-pair01 .cover{ border:1px solid #eee; aspect-ratio: 10/13; background:#fff url('images/krg02.jpg') center/cover no-repeat; width: 100%}
/* スマホ幅（例：最大768px）で縦並びへ */
@media screen and (max-width: 767px)  {
  .qa-pair01 .cover {border: 1px solid #eee; aspect-ratio: 10 / 13; background: #fff url(images/krg02.jpg) center / cover no-repeat;
   width: 70%; margin: 0 auto;/* taび */
  }
}
/* レイアウト：本文＋目次 */
.layout{grid-template-columns: 1fr 280px; gap:24px; margin-top:24px}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} .layout{grid-template-columns: 1fr} }
/* 目次（固定） */
.toc{position:sticky; top:24px; align-self:start; background:#fff; border:1px solid #eee; border-radius:14px; padding:16px}
.toc h3{margin:0 0 8px}
.toc ul{list-style:none; padding:0; margin:0}
.toc li{margin:6px 0}
.toc a{color:#374151; text-decoration:none}
.toc a:hover{text-decoration:underline}
/* セクション */
section{background:#fff; border:1px solid #eee; border-radius:14px; padding:20px; margin-bottom:16px}
@media screen and (max-width: 767px)  {
section{padding:0px;}
}
section h2{font-size:clamp(1.2rem, 2vw, 1.6rem); margin:0 0 8px}
section .sub{margin:0 0 10px}
/* Q&Aカード（アコーディオンなし） */
.qa-grid{display:grid; grid-template-columns: 1fr; gap:16px}
/* 既存の .qa-card 系は利用しつつ、縦ペアカードを追加 */
.qa-grid{display:grid; grid-template-columns: 1fr; gap:16px} /* ← 横並びを完全に無効化 */
.qa-pair{
  background:linear-gradient(180deg, #fff, #fffef7);
  border:1px solid #f0e7cf; border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 1px 8px rgba(0,0,0,.05);
}
.qa-block{display:grid; grid-template-columns: 42px 1fr; gap:12px}
@media screen and (max-width: 767px)  {
  .qa-block {display:inline-block;}
}
.qa-block .avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.qa-block.q .avatar{background:#111; color:#fff}
.qa-block.a .avatar{background:#f6b000; color:#111}
.qa-block .text h3.ti{margin:.1em 0 .4em; font-size:1rem}
.qa-block .text p{margin:.4em 0}
/* ペアの強調（ハイライト用） */
.qa-pair.highlight{border-color:#ffd58a; background:#fff7e6}
/* 引用強調は以前のまま使用可能 */
.pull{border-left:4px solid #f6b000; background:#fffaf0; padding:12px; border-radius:10px; color:#1f2937}
/* ダークモード対応（必要箇所のみ） */
@media (prefers-color-scheme: dark){
  .qa-pair{border-color:#2a313b; background:linear-gradient(180deg, #11151b, #0f1319)}
  .qa-pair.highlight{background:#1b1f26; border-color:#594213}
}
/* 引用強調 */
.pull{border-left:4px solid var(--brand); background:#fffaf0; padding:12px; border-radius:10px; color:#1f2937}
/* 特典・図鑑ギャラリー */
.gallery{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px}
.thumb{border:1px solid #eee; border-radius:12px; background:#fff; padding:8px; margin-top: 0px!important; margin-bottom: 10px!important;}
.thumb .ph{aspect-ratio: 4/3; background:#f3f4f6 url('img/sticker_book.jpg') center/cover no-repeat}
.thumb .ph--01{aspect-ratio: 4/3; background:#f3f4f6 url('images/krg05.png') center/cover no-repeat}
.thumb .ph--02{aspect-ratio: 4/3; background:#f3f4f6 url('images/krg06.png') center/cover no-repeat}
.thumb .ph--03{aspect-ratio: 4/3; background:#f3f4f6 url('images/krg07.jpg') center/cover no-repeat}
.thumb .ph--04{aspect-ratio: 4/3; background:#f3f4f6 url('images/krg08.jpg') center/cover no-repeat}
.thumb h4{margin:.6em 0 .2em; font-size:.95rem}
.thumb p{margin:0; color:var(--muted); font-size:.9rem}
/* 商品情報（定義リスト） */
.facts{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 640px){ .facts{grid-template-columns:1fr} }
.facts dl{margin:0; background:#fff; border:1px solid #eee; border-radius:12px; padding:12px}
.facts dt{font-weight:700}
.facts dd{margin:0 0 .4em; color:#374151}
/* CTA */
.cta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:#111; color:#fff; border-radius:14px; padding:16px}
.cta .btn{display:inline-block; background:var(--brand); color:#111; font-weight:700; padding:10px 14px; border-radius:10px; text-decoration:none}
.cta small{color:#d1d5db}
/* アクセシビリティ補助 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* ダークモード */
@media (prefers-color-scheme: dark){
  body{background:#0b0f14; color:#e5e7eb}
  section, .hero, .toc{background:#0f1319; border-color:#1f2937}
  .hero .cover{border-color:#1f2937}
  .qa-card{border-color:#2a313b; background:linear-gradient(180deg, #11151b, #0f1319)}
  .qa-card.highlight{background:#1b1f26; border-color:#594213}
  .pull{background:#161b22}
  .thumb{background:#0f1319; border-color:#1f2937}
  .facts dl{background:#0f1319; border-color:#1f2937}
  .cta{background:#0c1016}
  .toc a{color:#cbd5e1}
}
/* スクロール余白 */
:is(h2,h3){scroll-margin-top:80px}
p {margin-top:0!important;}
h3 {margin-top:0!important;background-color: inherit!important;border-left: inherit!important;font-weight: 700!important;padding: 0!important;width: auto!important;font-size: 16px!important;}
h2 {background-color: initial!important; color: initial!important; font-size: 20px!important; font-weight: 700; padding: initial!important; position: initial!important; width: 100%;  font-size: clamp(1.2rem, 2vw, 1.6rem)!important; margin: 0 0 8px!important;}
.lp-container {
 width: 100%;
 margin: 0 auto;
 text-align: center;
}
.info-box {
 border: 2px solid #ff6600;
 padding: 20px;
 background: #fff;
 border-radius: 8px;
 font-size: 1rem;
 line-height: 1.6;
 width: 100%;
 display: block;
}
.info-box p {
  margin: 8px 0;
}
.btn-square-so-pop {
  position: relative;
    display: inline-block;
    padding: 0.5em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #ff0000;
    border-radius: 10px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    font-weight: bold;
    border: solid 2px #801136;
    width: 60%;
    margin: 0 auto;
    font-size: 120%;
    text-align: center;
}
@media screen and (max-width: 767px)  {
.btn-square-so-pop {
    width: 100%;
    font-size: 100%;
}
}
.btn01 {
    display: block;
    text-align: center;
    width: 100%;
    margin: 20px auto 0 auto!important;
}
.btn01 a {
    color: #ffffff!important;
    text-decoration: none!important;
}
.btn01 .btn-square-so-pop:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.sp-only {
    display: none !important;
}
@media screen and (max-width: 767px) {
    .sp-only {
        display: block !important;
    }
}