body{background:var(--paper);font-size:16px}

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

/* ===== header ===== */
header{background:#fff;border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;min-height:58px;gap:10px;max-width:980px;margin:0 auto;padding:0 20px}
.logo{width:28px;height:28px;border-radius:7px;display:block}
.hd .name{color:var(--ink);text-decoration:none;font-weight:800;font-size:16px}
.hd a.back{margin-left:auto;font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.hd a.back:hover{color:var(--accent)}

/* ===== タイトル＋安心バッジ ===== */
.page-head{text-align:center;padding:40px 0 26px}
h1{font-size:25px;font-weight:900;margin-bottom:8px}
.page-head .sub{font-size:14.5px;color:var(--ink-soft)}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badges span{background:#fff;border:1px solid #cbe5d4;color:var(--ok);font-size:12.5px;font-weight:700;padding:6px 15px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.badges span::before{content:"✓";font-weight:900}

/* ===== 2カラムレイアウト ===== */
.layout{display:grid;grid-template-columns:1fr 350px;gap:26px;align-items:start;padding-bottom:64px}
@media(max-width:860px){.layout{grid-template-columns:1fr}}

.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin-bottom:20px}
.panel h2{font-size:17.5px;font-weight:900;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.panel h2::before{content:"";width:4px;height:19px;background:var(--accent);border-radius:2px;flex-shrink:0}

/* ── 製品のおさらい ── */
.recap{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
@media(max-width:560px){.recap{grid-template-columns:1fr}}
.recap-fig{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;justify-content:center}
.mini-page{background:#fff;width:96px;height:126px;box-shadow:0 2px 8px rgba(34,48,60,.16);position:relative;padding:14px 11px;font-size:7px;color:#3a4652}
.mini-page h4{text-align:center;letter-spacing:.3em;font-size:8.5px;margin-bottom:8px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.mini-page .ml{height:4px;background:#e2e7ec;border-radius:2px;margin-bottom:6px}
.mini-page .ml.s{width:60%}
.mini-page .mt{position:absolute;bottom:44px;left:11px;font-size:7.5px;color:#111;outline:1px solid var(--accent);outline-offset:2px}
.mini-page .ms{position:absolute;bottom:10px;right:9px;width:24px;height:24px;border:1.8px solid var(--hanko);border-radius:50%;color:var(--hanko);font-size:6.5px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-weight:700;opacity:.92}
.recap-body p{font-size:14.5px;color:var(--ink-soft);margin-bottom:10px}
.recap-body p b{color:var(--ink)}
.recap-body .feats{display:flex;flex-direction:column;gap:5px}
.recap-body .feats div{font-size:13.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
.recap-body .feats div::before{content:"✓";color:var(--ok);font-weight:900;flex-shrink:0}

/* ── 4つの安心 ── */
.assure .item{display:flex;gap:13px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:14.5px;line-height:1.8}
.assure .item:last-child{border-bottom:none;padding-bottom:0}
.assure .item:first-of-type{padding-top:0}
.assure .item .ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--ok-soft);display:flex;align-items:center;justify-content:center;font-size:17px}
.assure .item b{display:block;color:var(--ink);font-size:15px}
.assure .item span{color:var(--ink-soft);font-size:13.5px}

/* ── 購入の流れ ── */
.flow-steps{display:flex;flex-direction:column;gap:0;counter-reset:fstep}
.fstep{display:flex;gap:14px;position:relative;padding-bottom:20px}
.fstep:last-child{padding-bottom:0}
.fstep::before{counter-increment:fstep;content:counter(fstep);width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.fstep:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:30px;bottom:0;width:1.5px;background:var(--line)}
.fstep b{display:block;font-size:15px}
.fstep span{font-size:13.5px;color:var(--ink-soft);line-height:1.75;display:block}

/* ── 有効期間 ── */
.valid p{font-size:14px;color:var(--ink-soft);line-height:1.9}
.valid p b{color:var(--ink)}
.valid p+p{margin-top:10px}

/* ── ミニFAQ ── */
details{border-bottom:1px dashed var(--line)}
details:last-of-type{border-bottom:none}
summary{cursor:pointer;padding:13px 2px;font-weight:700;font-size:14.5px;list-style:none;display:flex;gap:10px;align-items:center;line-height:1.6}
summary::before{content:"Q";color:var(--accent);font-weight:900;flex-shrink:0}
summary::after{content:"＋";margin-left:auto;color:var(--ink-soft)}
details[open] summary::after{content:"－"}
details .a{padding:0 2px 14px 26px;font-size:13.5px;color:var(--ink-soft);line-height:1.85}
details .a b{color:var(--ink)}

/* ===== 右：購入カード（PCでは追従） ===== */
.buy-col{position:sticky;top:20px}
@media(max-width:860px){.buy-col{position:static}}
.buy-card{background:#fff;border:2px solid var(--accent);border-radius:14px;overflow:hidden;box-shadow:0 16px 44px rgba(31,95,168,.16)}
.buy-top{background:var(--accent);color:#fff;text-align:center;padding:22px 22px 18px}
.buy-top .plan{font-size:12px;letter-spacing:.14em;font-weight:700;opacity:.85;margin-bottom:4px}
.buy-top .amount{font-size:46px;font-weight:900;line-height:1.1}
.buy-top .amount small{font-size:15px;font-weight:700;margin-left:3px}
.buy-top .once{margin-top:6px;font-size:12px;background:rgba(255,255,255,.16);display:inline-block;padding:3px 14px;border-radius:14px}
.buy-body{padding:20px 22px 22px}
.buy-body ul{list-style:none;margin-bottom:18px}
.buy-body li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;display:flex;gap:9px;line-height:1.6}
.buy-body li::before{content:"✓";color:var(--ok);font-weight:700;flex-shrink:0}
.buy-body li:last-child{border-bottom:none}
/* Stripe決済リンク：実装時にhrefをStripeのPayment Link URLに差し替える */
.stripe-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16.5px;border-radius:var(--radius);padding:16px 20px;box-shadow:0 4px 14px rgba(31,95,168,.28);transition:transform .12s,box-shadow .12s}
.stripe-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,95,168,.32)}
.stripe-note{text-align:center;font-size:11.5px;color:var(--ink-soft);margin-top:10px;line-height:1.7}
.pay-icons{display:flex;justify-content:center;gap:6px;margin-top:12px}
.pay-icons span{border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-size:10px;color:var(--ink-soft);font-weight:700;letter-spacing:.03em}
.guarantee{margin-top:14px;background:var(--ok-soft);border:1px solid #cbe5d4;border-radius:var(--radius);padding:11px 13px;font-size:12px;color:var(--ok);font-weight:700;text-align:center;line-height:1.7}

.help{margin-top:4px;text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.8;padding:0 6px}

footer{border-top:1px solid var(--line);background:#fff;padding:24px 0;font-size:13px;color:var(--ink-soft)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--accent)}

/* ===== 購入前の同意チェック ===== */
.consent-check{display:flex;gap:10px;align-items:flex-start;text-align:left;background:#f7f9fb;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;margin-bottom:12px}
.consent-check input{width:18px;height:18px;margin-top:3px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.consent-check label{font-size:12.5px;line-height:1.8;cursor:pointer}
.buy-confirm{font-size:12.5px;color:var(--ink);text-align:center;margin-bottom:10px}
.stripe-btn.is-disabled{background:#aebcc9;box-shadow:none;cursor:not-allowed;pointer-events:none}