/* サブスクLP 追加スタイル（style.css のあとに読み込む） */
.cancel-box{background:var(--ink);color:var(--white);border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:6px}
.cancel-box b{font-family:var(--font-head);font-weight:900;font-size:24px;line-height:1.4;color:var(--hl)}
.cancel-box span{font-size:14px;color:var(--light-text)}
.chips.three .chip{flex:1 1 180px}
.tiny{font-size:12px;color:var(--sub2)}

/* 月額の比較（棒） */
.bars{display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:14px;align-items:center}
.bar .nm{font-size:15px;font-weight:700}
.bar .nm small{display:block;font-weight:400;font-size:12px;color:var(--light-text)}
.bar .track{background:#2E323B;border-radius:999px;height:36px;position:relative;overflow:hidden}
.bar .fill{height:100%;border-radius:999px;background:#6B7280;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;font-weight:700;font-size:14px;white-space:nowrap;color:var(--white)}
.bar.me .fill{background:var(--hl);color:var(--ink)}
.bar.me .nm{color:var(--hl)}

/* プラン */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line2);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px}
.plan.main{border:3px solid var(--accent)}
.plan .pn{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}
.plan .tagline{font-size:14px;color:var(--sub)}
.plan .money{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan .money div{background:var(--bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;line-height:1.35}
.plan .money small{font-size:12px;color:var(--sub2)}
.plan .money b{font-family:var(--font-head);font-weight:900;font-size:24px}
.plan .money b span{font-size:13px}
.plan .total{background:var(--hl);border-radius:10px;padding:10px 14px;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:10px}
.plan ul{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--sub);padding-left:0}
.plan li{display:flex;gap:8px}
.plan li svg{flex:none;margin-top:3px}
.plan .btn{margin-top:auto}
.plan-note{font-size:12px;color:var(--sub2)}

/* 請求のタイムライン */
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tl .s{background:var(--white);border:1px solid var(--line2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.tl .s small{font-weight:700;color:var(--accent)}
.tl .s b{font-size:15px}
.tl .s.pay{background:var(--hl);border-color:var(--hl)}
.tl .s.free{background:#E4F1E8;border-color:#CFE5D6}

@media (max-width:640px){
  .bar{grid-template-columns:1fr;gap:6px}
  .cancel-box b{font-size:20px}
  .plan{padding:22px}
}

/* レビューキャンペーンの大きな帯（ヒーローの先頭） */
.campaign-banner{display:flex;flex-direction:column;gap:6px;background:#F6DE6A;color:#16181D;border-radius:16px;padding:16px 20px;margin:0 0 18px;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.campaign-banner:hover{filter:brightness(.98)}
.campaign-banner .cb-tag{display:inline-block;align-self:flex-start;background:#0B5C45;color:#fff;font-family:var(--font-head,inherit);font-weight:900;font-size:22px;letter-spacing:.02em;line-height:1.4;border-radius:999px;padding:8px 22px;margin-bottom:4px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.campaign-banner .cb-main{font-family:var(--font-head,inherit);font-weight:900;font-size:22px;line-height:1.5}
.campaign-banner .cb-main b{background:#fff;border-radius:6px;padding:0 6px}
.campaign-banner .cb-note{font-size:12px;line-height:1.6;color:#3F444D}
@media (max-width:600px){.campaign-banner .cb-main{font-size:18px}.campaign-banner .cb-tag{font-size:17px;padding:7px 16px}}

/* 2つのキャンペーンを、色と大きな札ではっきり分ける */
.camp{padding-top:56px;padding-bottom:56px}
.camp-badge{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:16px;border-radius:999px;padding:6px 18px 6px 6px}
.camp-badge span{border-radius:999px;padding:6px 14px;font-size:14px}
.camp .h2{font-size:clamp(26px,5vw,38px)}
/* ① レビューキャンペーン：黄色・太い枠 */
.camp-1{background:#F6DE6A;border-top:6px solid #0B5C45;border-bottom:6px solid #0B5C45}
.camp-1 .camp-badge{background:#fff;color:#0B5C45}
.camp-1 .camp-badge span{background:#0B5C45;color:#fff}
.camp-1 .card.soft{background:#fff;border:2px solid #0B5C45}
.camp-1 .lead,.camp-1 .muted{color:#16181D}
/* ② 友達紹介：深緑 */
.camp-2{background:#0B5C45;color:#fff}
.camp-2 .camp-badge{background:#F6DE6A;color:#16181D}
.camp-2 .camp-badge span{background:#16181D;color:#F6DE6A}
.camp-2 .h2,.camp-2 .lead{color:#fff}
.camp-2 .card.soft{background:#fff;color:#16181D;border:2px solid #F6DE6A}
.camp-2 .muted{color:#D9E8E2}

/* 事業者情報へのリンク：移動先を一瞬ハイライトして、押したことが分かるようにする */
.company:target{animation:mg-target 2.4s ease-out}
@keyframes mg-target{0%,40%{background:#F6DE6A}100%{background:transparent}}
.company{scroll-margin-top:80px}

/* よくある質問：Q/Aの丸印・左の太い線・区切りで読みやすく */
#faq .faq{gap:14px}
#faq .faq details{background:#fff;border:1px solid #E4E6E1;border-left:6px solid #0B5C45;border-radius:14px;padding:18px 22px;transition:box-shadow .2s,background .2s}
#faq .faq details:hover{box-shadow:0 4px 14px rgba(11,92,69,.10)}
#faq .faq details[open]{background:#F7FAF8;border-left-color:#F2C500;box-shadow:0 4px 14px rgba(11,92,69,.10)}
#faq .faq summary{gap:14px;align-items:center;cursor:pointer;font-size:17px}
#faq .faq summary::before{content:"Q";flex:none;width:32px;height:32px;border-radius:50%;background:#0B5C45;color:#fff;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
#faq .faq summary span,#faq .faq summary{line-height:1.5}
#faq .faq summary::after{margin-left:auto;font-size:20px}
#faq .faq details[open] summary{padding-bottom:14px;border-bottom:1px dashed #C9CEC6}
#faq .faq p{position:relative;margin-top:14px;padding-left:46px;font-size:15px;line-height:1.8;color:#3F444D}
#faq .faq p::before{content:"A";position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#F6DE6A;color:#16181D;font-weight:900;display:flex;align-items:center;justify-content:center}
@media (max-width:600px){#faq .faq details{padding:14px 14px}#faq .faq summary{font-size:15px}#faq .faq p{padding-left:42px}}
/* ヒーローのキャッチ（ホームページも、サブスクの時代。） */
.hero .eyebrow{font-family:var(--font-head,inherit);font-weight:900;font-size:26px;line-height:1.4;letter-spacing:.03em;margin:6px 0 10px}
.hero .eyebrow::after{content:"";display:block;width:72px;height:6px;border-radius:3px;background:#F6DE6A;margin-top:8px}
@media (max-width:600px){.hero .eyebrow{font-size:20px}}

/* 導入文を読みやすく（1文ずつ改行・要点を太字＋マーカー） */
.key{display:flex;flex-direction:column;gap:4px;color:#16181D;line-height:1.7}
.hero-sub.key{font-size:19px}
.lead.key{font-size:17px!important}
.key b{font-weight:700;background:linear-gradient(transparent 62%,#F6DE6A 62%)}
@media (max-width:600px){.hero-sub.key{font-size:16px}.lead.key{font-size:15px!important}}

/* プラン名 */
.plan .pn-id{display:inline-block;background:#0B5C45;color:#fff;font-size:13px;font-weight:900;border-radius:999px;padding:3px 12px;letter-spacing:.04em}
.plan.main .pn-id{background:#16181D;color:#F6DE6A}

/* 解約について：色分け */
.cancel-sec{background:#fff}
.cancel-sec .card.soft{border:0;border-top:6px solid #0B5C45;background:#E8F2EC;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.cancel-sec .card.soft .t{color:#0B5C45;font-size:20px;font-weight:900;font-family:var(--font-head,inherit)}
.cancel-sec .card.soft:nth-child(2){border-top-color:#E0B800;background:#FFF6CC}
.cancel-sec .card.soft:nth-child(2) .t{color:#16181D}
.cancel-sec .card.soft:nth-child(3){border-top-color:#16181D;background:#23262D;color:#fff}
.cancel-sec .card.soft:nth-child(3) .t{color:#F6DE6A}
.cancel-sec .card.soft:nth-child(3) p{color:#E6E8EC}
.cancel-sec .muted{background:#F4F5F1;border-left:4px solid #0B5C45;border-radius:8px;padding:12px 16px}
.key span{text-wrap:balance}
@media (max-width:600px){.hero-sub.key{font-size:15px}}
.camp-1 .key b{background:linear-gradient(transparent 62%,#fff 62%)}

/* 紹介キャンペーン：カードの文字を大きく */
.camp-2 .card.soft .t{font-family:var(--font-head,inherit);font-weight:900;font-size:26px;line-height:1.4}
.camp-2 .card.soft p{font-size:16px;line-height:1.8}
.camp-2 .card.soft p b{display:inline-block;font-size:21px;font-weight:900;color:#0B5C45;margin-bottom:4px}
@media (max-width:600px){.camp-2 .card.soft .t{font-size:22px}.camp-2 .card.soft p{font-size:15px}.camp-2 .card.soft p b{font-size:18px}}

/* 申込フォーム：補助表示 */
.fhint{font-size:12px;color:#555B66;line-height:1.5}
.phone-fmt{margin-top:8px;gap:8px}
.phone-fmt .chip-btn{min-height:40px;padding:6px 14px;font-size:14px}
#goal-other{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #B9BEB5;border-radius:10px;min-height:48px;width:100%;margin-top:10px;background:#fff}
#goal-other[hidden]{display:none}