/* LINE向けページ(Cloudflare Pages)— トークンは bonus_design/DESIGN.md が正本。Web用に 1080px 基準の値を 16px 基準へ換算 */
:root{
  --bg:#fbfaf6;--surface:#f1eee7;--text-primary:#1d1b18;--text-secondary:#6b665e;--border:#dcd7cd;
  --accent:#d0321c;--on-accent:#ffffff;--ok:#2f7a4b;
  --font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-hand:"Klee One","Noto Sans JP",sans-serif;
  --radius-s:8px;--radius-l:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.8;letter-spacing:.02em}
header{max-width:640px;margin:0 auto;padding:32px 16px 8px}
header .sub{font-size:13px;color:var(--text-secondary);font-weight:700;letter-spacing:.12em;margin:0 0 10px}
header h1{font-size:28px;line-height:1.3;font-weight:900;margin:0;letter-spacing:-.01em}
main{max-width:640px;margin:0 auto;padding:8px 16px 64px}
h2{font-size:22px;font-weight:900;line-height:1.35;margin:48px 0 12px;padding-top:12px;border-top:3px solid var(--text-primary)}
h3{font-size:18px;font-weight:700;margin:28px 0 8px}
p{margin:0 0 16px}
strong{font-weight:700}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.lead{background:var(--surface);border-left:4px solid var(--accent);border-radius:var(--radius-s);padding:14px 16px;margin:20px 0}
.memo{font-family:var(--font-hand);color:var(--accent);font-size:15px;margin:-6px 0 18px 12px;transform:rotate(-2deg);transform-origin:left top}
.memo{position:relative;padding-left:22px}
.memo::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d0321c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M10 38l4-12L34 6l8 8-20 20-12 4z'/><path d='M28 12l8 8'/></svg>") no-repeat center/contain}
table{width:100%;border-collapse:collapse;margin:12px 0 24px;font-size:14px;line-height:1.5}
th,td{border:1px solid var(--border);padding:8px;vertical-align:top;text-align:left}
th{background:var(--surface);color:var(--text-secondary);font-weight:700;font-size:13px}
tr:nth-child(even) td{background:var(--surface)}
td.ng{color:var(--accent);font-weight:700}td.ok{color:var(--ok);font-weight:700}
td.num{color:var(--accent);font-weight:900;font-size:18px;white-space:nowrap}
ul{padding-left:22px}li{margin-bottom:6px}
.card{border:1px solid var(--border);border-radius:var(--radius-s);padding:18px 16px;margin:18px 0;background:var(--bg)}
.card h3{margin:0 0 6px;font-size:17px}
.card .for{font-size:13px;color:var(--text-secondary);margin:0 0 10px}
.card ul{margin:0 0 12px;font-size:15px}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;padding:12px 16px;border-radius:var(--radius-l)}
.btn.sub{background:var(--bg);color:var(--text-primary);border:2px solid var(--text-primary)}
.note{font-size:13px;color:var(--text-secondary)}
.pr{font-size:12px;color:var(--text-secondary);margin:0 0 8px}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}
footer{text-align:center;color:var(--text-secondary);font-size:13px;padding:20px}
/* 特典一覧 */
.bonus{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--border);text-decoration:none;color:inherit}
.bonus:last-of-type{border-bottom:1px solid var(--border)}
.bonus img{width:104px;height:104px;border-radius:var(--radius-s);border:1px solid var(--border);display:block}
.bonus .n{font-size:12px;color:var(--accent);font-weight:900;letter-spacing:.1em}
.bonus h3{margin:2px 0 4px;font-size:17px;line-height:1.35}
.bonus p{margin:0;font-size:13px;color:var(--text-secondary)}
.bonus .go{font-size:13px;font-weight:700;color:var(--accent);margin-top:6px;display:block}
/* 特典ページ(HTML版) */
.bonus-head{max-width:640px;margin:0 auto;padding:28px 16px 0;text-align:center}
.bonus-head .sub{font-size:13px;color:var(--text-secondary);font-weight:700;letter-spacing:.12em;margin:0 0 8px;text-align:left}
.bonus-head .sub .n{color:var(--accent);font-size:16px;margin-left:8px}
.bonus-head .art{width:200px;height:200px;display:block;margin:0 auto}
.bonus-head h1{font-size:28px;line-height:1.3;font-weight:900;margin:8px 0 12px;letter-spacing:-.01em}
.bonus-head h1 .sub2{display:block;font-size:15px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;letter-spacing:.02em}
.bonus-head .promise{text-align:left;font-size:15px;margin:0 0 16px}
.bonus-head .profile{text-align:left;background:var(--surface);border-left:4px solid var(--accent);border-radius:var(--radius-s);padding:12px 14px;font-size:13px;line-height:1.7;margin-bottom:8px}
.bonus-head .profile b{display:block;margin-bottom:2px}
main h2:first-child{margin-top:24px}
.pen{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'><path d='M0 8 C 60 5, 140 11, 200 8' fill='none' stroke='%23d0321c' stroke-width='5' stroke-linecap='round'/></svg>");background-repeat:repeat-x;background-position:0 100%;background-size:120px 8px;padding-bottom:4px;font-weight:700}
p.lead{margin-bottom:6px;background:none;border:0;padding:0;font-weight:700}
.fig{display:block;width:100%;max-width:420px;height:auto;margin:4px auto 12px}
.cta{margin:8px 0 28px}.cta .lbl{font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.sp{height:56px;border-bottom:1px solid var(--border);margin-bottom:12px}
table.sheet td{height:44px}td.idx{width:36px;text-align:center;color:var(--accent);font-weight:900}
td.blank{background:var(--bg)!important}
tbody tr:nth-child(even) td.ng,tbody tr:nth-child(even) td.ok,tbody tr:nth-child(even) td.idx{background:var(--bg)}
ol{padding-left:26px}ol li::marker{color:var(--accent);font-weight:900}
blockquote{margin:0 0 20px;padding:12px 16px;background:var(--surface);border-left:4px solid var(--accent);border-radius:var(--radius-s)}
blockquote p{margin:0 0 6px}blockquote p:last-child{margin:0}
/* アコーディオン(特化型エージェント) */
details.agent{border:1px solid var(--border);border-radius:var(--radius-s);margin:0 0 10px;background:var(--bg)}
details.agent summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr 20px;grid-template-areas:"no nm ar" "no tg ar";align-items:center;column-gap:8px;padding:12px 14px;min-height:44px}
details.agent summary::-webkit-details-marker{display:none}
details.agent summary .no{grid-area:no;color:var(--accent);font-weight:900;font-size:18px;text-align:center}
details.agent summary .nm{grid-area:nm;font-weight:700;font-size:16px;line-height:1.4}
details.agent summary .tg{grid-area:tg;font-size:12px;color:var(--text-secondary);margin-top:2px}
details.agent summary::after{grid-area:ar;content:"";width:10px;height:10px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);justify-self:center;transition:transform .15s}
details.agent[open] summary::after{transform:rotate(-135deg)}
details.agent[open] summary{border-bottom:1px solid var(--border)}
details.agent .body{padding:14px 14px 4px}
details.agent .body h3{display:none}
.next{margin:36px 0 0}.next .lbl{font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.others{margin-top:40px;padding-top:16px;border-top:1px solid var(--border)}
.others .lbl{font-size:13px;color:var(--text-secondary);margin:0 0 6px}
.others a{display:block;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none;font-size:15px;font-weight:700}
.others a::before{content:"→ ";color:var(--accent)}