/* OPT だけの部品（見た目の基本は vsl.css＝VSL と共通）。グラデは中間色→暗い色だけ、白は入れない */
/* 小見出し（節の中の区切り）：細い罫線＋白の太い明朝 */
.sub-h{display:flex;align-items:center;gap:12px;margin:40px 0 18px;font-size:19px;font-weight:700;line-height:1.5;color:#ffffff}
.sub-h:before{content:"";flex:0 0 4px;align-self:stretch;background:var(--accent,#c0bdb7)}
.sub-h span{display:block}

/* 問題提起：チェック＋赤い下線マーカー（VSL の .hl と同じ） */
.pain-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.pain-list li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:14px 14px 14px 12px;background:#181716;border:1px solid #403d38}
.pain-list li:before{content:"✓";display:grid;place-items:center;width:30px;height:30px;font-size:16px;font-weight:700;color:#ffffff;background:#b3162b}
.pain-list p{margin:0;font-size:16px;font-weight:700;line-height:1.85;color:#ffffff}
.cost-bento{margin-top:24px}
.cost-bento .bt-k{margin-top:4px;font-size:19px;line-height:1.45}
.cost-bento .bt-s{margin:0!important;letter-spacing:.18em}
.pair-bento{margin-top:22px}
.pair-bento .bt-k{margin:4px 0 6px;font-size:18px}
.pair-bento .bt-s{letter-spacing:.04em}
.pair-bento .bt .ic,.cost-bento .bt .ic{width:38px;height:38px}
.pair-bento .bt-s:first-of-type,.cost-bento .bt-s:first-of-type{letter-spacing:.2em}

/* ベネフィット：役割の2段（あなた＝金×黒／浮いた時間＝濃色台紙） */
.role-split{display:grid;margin-top:24px;border:1px solid #403d38}
.role{padding:18px 18px 16px}
.role-k{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.24em}
.role p:not(.role-k){margin:0;font-size:16.5px;font-weight:700;line-height:1.85}
.role.you{background:linear-gradient(115deg,#2a65b8 0%,#3c7dd9 45%,#2e6cc4 70%,#1c519c 100%)}
.role.you p{color:#111111!important}
.role.you strong{color:#111111;border-bottom:2px solid #111111}
.role.sys{background:#181716}
.role.sys .role-k{color:var(--accent,#c0bdb7)}
.role.sys p:not(.role-k){color:#ffffff;font-weight:500}

/* ベネフィットの5項目：英字ラベルを小さく */
.benefit-sec .d-no{letter-spacing:.2em}

/* 3ステップ・クロージングの3項目：番号ラベルを大きく */
.steps3 .consult-item{padding-bottom:16px}
.steps3 .ci-no,.get3 .ci-no{font-size:13px;letter-spacing:.2em}
.steps3 h3{font-size:17.5px!important;line-height:1.6}

/* 記録カード：小見出しと注記 */
.p-opt .record .stat-tiles{margin-top:14px}
.p-opt .record>.copy{padding:0 16px}
.p-opt .bar-note{margin-top:12px;font-size:12.5px;line-height:1.8;color:#d0cdc8}

/* FAQ（details の開閉） */
.faq-list{display:grid;gap:10px}
.faq-item{background:#181716;border:1px solid #403d38}
.faq-item summary{display:grid;grid-template-columns:34px 1fr 20px;gap:12px;align-items:center;padding:16px 14px;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .q,.faq-item .a{display:grid;place-items:center;width:34px;height:34px;font-size:16px;font-weight:700;color:#ffffff}
.faq-item .q{background:linear-gradient(120deg,#514e48,#2f74d4 55%,#514e48)}
.faq-item .a{background:#b3162b}
.fq-t{font-size:16px;font-weight:700;line-height:1.65;color:#ffffff}
.faq-item summary i{position:relative;width:18px;height:18px}
.faq-item summary i:before,.faq-item summary i:after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:var(--accent,#c0bdb7);transition:transform .25s}
.faq-item summary i:after{transform:rotate(90deg)}
.faq-item[open] summary i:after{transform:rotate(0)}
.faq-a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:2px 14px 18px;border-top:1px dashed #4c4943;padding-top:16px}
.faq-a .copy p{font-size:15.5px;line-height:1.9}

/* クロージング：写真の見出しの要点も単色 */
.p-opt .closing-copy p{font-size:16px}
.legal-links .sep{color:#235cac}
/* OPTの文字量に合わせた調整 */
html body.p-opt .hero-copy h1 em{font-size:.7em;line-height:1.45}
html body.p-opt main .bubble{font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
html body.p-opt .sticky-cta .cta{font-size:15px;letter-spacing:-.02em;white-space:nowrap}
html body.p-opt .sticky-cta .bubble{font-size:12.5px;white-space:nowrap}
@media(max-width:359px){html body.p-opt main .bubble{font-size:11.5px}html body.p-opt .sticky-cta .cta{font-size:13px!important}html body.p-opt .sticky-cta .bubble{font-size:11px}}
html body.p-opt .head-visual h2 strong,html body.p-opt .section-head h2 strong{word-break:keep-all;overflow-wrap:anywhere}
html body.p-opt .hero-copy h1 em{font-size:.7em!important;line-height:1.45!important}
html body.p-opt .hero-description p{font-size:min(3.75vw,15px)!important;line-height:1.7}
html body.p-opt .key-line+.copy{margin-top:18px}
html body.p-opt .record .stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body.p-opt .record .stat-tiles>div{min-width:0}
html body.p-opt .record .stat-tiles dd{font-size:17px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
html body.p-opt .record .stat-tiles>div:last-child:nth-child(odd){grid-column:1/-1}
html body.p-opt .steps3 .ci-no:before,html body.p-opt .get3 .ci-no:before{content:none}
html body.p-opt .who-card.is-op .who-h{display:block;line-height:1.6}
html body.p-opt .who-card.is-op .who-h span{display:block;margin:0 0 6px;letter-spacing:.24em}
html body.p-opt .record .stat-tiles dd{font-size:16px}
html body.p-opt .hero-description p{font-size:min(3.6vw,14px)!important}
@media(min-width:1100px){
 html body.p-opt .side-rail .cta{font-size:13px!important;letter-spacing:-.02em;padding:12px 40px 12px 8px!important}
 html body.p-opt .side-rail .bubble{font-size:11.5px!important;white-space:nowrap;letter-spacing:-.02em}
}
@media(min-width:1100px) and (max-width:1250px){html body.p-opt .side-rail .cta{font-size:12px!important}html body.p-opt .side-rail .bubble{font-size:10.5px!important}}

/* ===== 帯（2026-11-13 v7）：見出しの「行ごとの帯」はやめ、一枚帯＋立体＋斜めを vsl2_extra.css（v7）で共通に当てる。ここは小見出し・ラベルだけ ===== */
:root{--band-a:linear-gradient(100deg,#2259a7 0%,#514e48 55%,#282724 100%);--band-b:linear-gradient(100deg,#403e39 0%,#32302d 55%,#2a2825 100%);--band-r:linear-gradient(100deg,#8e1426,#5c0c1a)}
html body.p-opt .section-head .eyebrow{display:inline-flex!important;padding:5px 12px;background:var(--band-b);color:#ffffff!important;letter-spacing:.24em}
html body.p-opt .section-head .eyebrow:before{background:#2562b7!important;width:16px!important}
html body.p-opt .sub-h{padding:10px 14px;background:var(--band-a);font-size:18px}
html body.p-opt .sub-h:before{background:#2562b7}
html body.p-opt .key-line{padding:14px 16px!important;background:var(--band-b)!important;border-left:4px solid #2562b7!important;color:#ffffff}
html body.p-opt .key-line .hl{color:#ffffff}
html body.p-opt .d-no,html body.p-opt .ci-no{display:inline-block;padding:2px 9px;background:var(--band-b);color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;letter-spacing:.18em}
html body.p-opt .record-top h3,html body.p-opt .fv-rec-h,html body.p-opt .who-h{background:var(--band-a)!important;color:#ffffff!important}
html body.p-opt .role.sys .role-k,html body.p-opt .bt-s:first-of-type{color:#c8c5c0}
html body.p-opt .design-t .d-no{display:table;margin-bottom:8px}
html body.p-opt .ci-top .ci-no{display:table!important;margin:0 0 8px!important;padding:2px 9px!important;background:var(--band-b)!important}

/* 声の説明文：暗い地でも読める色に（2026-11-13） */
html body main .fineprint,html body main .fineprint p{color:#d9d7d4!important;-webkit-text-fill-color:#d9d7d4!important;font-size:13.5px!important;line-height:1.85!important}

/* 2026-11-14 自動売買の思い込み：番号なし。思い込みの一文を灰色の点線枠で見せ、▼で「そこが違います」へつなぐ */
html body .myth{margin:6px 0 0;padding:22px 18px 18px;background:#ffffff!important;box-shadow:var(--wcard-sh)!important;text-align:center}
html body .myth p{margin:0;font-size:15.5px;line-height:1.9;font-weight:700;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;text-shadow:none!important}
html body .myth .myth-q{display:block;margin:12px 0;padding:12px 10px;border:1px dashed #4180d8;background:#f5f4f3;color:#235cac!important;-webkit-text-fill-color:#235cac!important;font-size:16.5px;line-height:1.7;text-wrap:balance}
html body .myth .manual-arrow{margin:10px 0 -6px;color:#4d4a44!important}