/* ============================================================
 * クッションページ（page-cushion.php）専用CSS。全て #cushion スコープ。
 * 色は設定（inc/cushion/{slug}.php の brand）から CSS変数で注入される。
 * 幅は 640px の1カラム。
 *
 * 2026-09-30 伊藤さん指示「生成AIで作った感じが出ている」→ 装飾だけ削る版。
 *  やめたもの＝ピル型ラベル／角丸カード＋影／チェック丸／番号丸＋縦線／ボタンのシェブロン／見出し下のバー
 *  残したもの＝構成・文言・ブランド色。本文は左寄せ、枠線の箱は「共通条件」の1つだけ。
 * ============================================================ */
#cushion{--cp-primary:#FF008C;--cp-primary-dark:#D1006F;--cp-light:#FFF1F7;--cp-accent:#FFE600;--cp-ink:#222;
 font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:var(--cp-ink);background:#fff;line-height:1.8;font-size:16px;-webkit-text-size-adjust:100%;}
#cushion *{box-sizing:border-box;}
#cushion .cp-wrap{max-width:640px;margin:0 auto;padding:0 16px;}
#cushion h1,#cushion h2,#cushion p,#cushion ul,#cushion ol{margin:0;padding:0;}
#cushion ul,#cushion ol{list-style:none;}
#cushion a{color:var(--cp-primary);}

/* 上部バー */
/* 上部バー：黒系の背景に白文字（2026-09-30 伊藤さん） */
#cushion .cp-topbar{background:#222;font-size:12px;color:#fff;}
#cushion .cp-topbar .cp-wrap{display:flex;align-items:center;gap:8px;height:34px;}
#cushion .cp-pr{color:#fff;font-size:11px;border:1px solid rgba(255,255,255,.6);padding:1px 5px;line-height:1.3;}
#cushion .cp-topbar__label{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cushion .cp-topbar__asof{margin-left:auto;white-space:nowrap;color:rgba(255,255,255,.8);}

/* 送客先ロゴ（白地・中央） */
#cushion .cp-logo{text-align:center;padding:18px 0 16px;}
#cushion .cp-logo img{width:96px;height:auto;display:inline-block;vertical-align:top;}

/* カード内のキャンペーン画像（送客先の素材） */
#cushion .cp-card__img{margin:12px 0 18px;}
#cushion .cp-card__img a{display:block;cursor:pointer;}
#cushion .cp-card__img a:hover img{opacity:.9;}
#cushion .cp-card__img img{display:block;width:100%;height:auto;box-sizing:border-box;border:2px solid var(--cp-primary);border-radius:8px;padding:6px;background:#fff;}
#cushion .cp-card--no .cp-card__img img{border-color:#444;}

/* 1. ファーストビュー */
#cushion .cp-hero{background:var(--cp-primary);color:#fff;text-align:center;padding:34px 0 30px;}
#cushion .cp-eyebrow{font-size:13px;font-weight:700;margin-bottom:10px;opacity:.9;}
#cushion .cp-h1{font-size:24px;line-height:1.4;font-weight:800;}
#cushion .cp-h1 em{font-style:normal;color:var(--cp-accent);font-size:1.3em;line-height:1.2;display:inline-block;margin-top:4px;white-space:nowrap;}
#cushion .cp-sub{font-size:14px;line-height:1.8;margin-top:12px;}
#cushion .cp-scroll{display:inline-block;margin-top:14px;color:#fff;font-size:14px;font-weight:700;}

/* 質問の箱（Q. → はい／いいえ の問答に見せる） */
#cushion .cp-q{display:flex;align-items:flex-start;gap:8px;background:var(--cp-light);border-radius:8px;padding:14px 16px;font-size:16px;font-weight:700;line-height:1.6;margin-bottom:28px;}
#cushion .cp-q__mark{flex:none;color:var(--cp-primary);font-weight:900;font-size:18px;line-height:1.4;}

/* 見出し共通（装飾なし・左寄せ） */
#cushion .cp-h2{font-size:19px;font-weight:800;line-height:1.4;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #ddd;}

/* 2. 振り分け（カードなし・区切り線のみ） */
#cushion .cp-choose{padding:40px 0 8px;}
#cushion .cp-card{padding:4px 0 36px;margin-bottom:36px;border-bottom:1px solid #e5e5e5;}
/* はい／いいえ の吹き出し（下向きのしっぽで、その下の内容を指す） */
#cushion .cp-card__who{position:relative;display:flex;align-items:center;gap:12px;background:var(--cp-primary);color:#fff;font-size:15px;font-weight:800;line-height:1.5;padding:10px 14px;border-radius:6px;margin-bottom:24px;}
#cushion .cp-card__who::after{content:"";position:absolute;left:26px;bottom:-11px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid var(--cp-primary);}
#cushion .cp-card__who b{flex:none;font-size:22px;line-height:1;padding-right:12px;border-right:1px solid rgba(255,255,255,.55);}
#cushion .cp-card--no .cp-card__who{background:#444;}
#cushion .cp-card--no .cp-card__who::after{border-top-color:#444;}
#cushion .cp-card__points{margin-top:6px;line-height:1.2;color:var(--cp-primary);}
#cushion .cp-card__points strong{font-size:36px;font-weight:900;}
#cushion .cp-card__points span{font-size:16px;font-weight:800;margin-left:2px;}
#cushion .cp-card__lead{font-size:15px;font-weight:700;margin-top:6px;}
#cushion .cp-card__badge{font-size:14px;font-weight:700;color:#d00;margin-top:4px;}
#cushion .cp-card .cp-btn{margin-top:14px;}
#cushion .cp-card__alt{margin-top:8px;font-size:13px;text-align:center;}
#cushion .cp-card__alt a{text-decoration:underline;}
/* 申し込み先の名前＋注記（1つの枠・ボタンの直前） */
#cushion .cp-card__dest{margin:16px 0 18px;padding:12px 14px;background:#f5f5f5;border-radius:6px;font-size:13px;color:#444;line-height:1.7;}
#cushion .cp-card__name{font-size:13px;color:#444;}
#cushion .cp-card__name b{font-weight:800;color:var(--cp-ink);}
#cushion .cp-card__notes{margin-top:4px;font-size:13px;color:#555;}
#cushion .cp-card__notes li{padding-left:1em;text-indent:-1em;}
#cushion .cp-card__notes li::before{content:"・";}

/* ボタン（送客CTA）：2026-09-30 伊藤さん「ボタンってわかりやすく」→ 下縁の立体（box-shadow 0 4px 0）＋角丸＋右端の矢印＋押すと沈む */
#cushion .cp-btn{position:relative;display:block;width:100%;background:var(--cp-primary);color:#fff;text-decoration:none;font-weight:800;font-size:17px;line-height:1.3;padding:16px 44px 16px 20px;border-radius:10px;text-align:center;box-shadow:0 4px 0 var(--cp-primary-dark);margin-bottom:4px;}
#cushion .cp-btn::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-top:3px solid #fff;border-right:3px solid #fff;transform:translateY(-50%) rotate(45deg);}
#cushion .cp-btn:hover{background:var(--cp-primary-dark);}
#cushion .cp-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--cp-primary-dark);}
#cushion .cp-btn--sm{font-size:15px;padding:14px 40px 14px 18px;}

/* 3. 共通条件（枠線の箱はここだけ） */
#cushion .cp-cond{padding:12px 0 8px;}
#cushion .cp-box{border:1px solid #ccc;padding:20px 20px;}
#cushion .cp-box__ttl{font-size:16px;font-weight:800;margin-bottom:8px;}
#cushion .cp-check{list-style:disc;padding-left:1.3em;}
#cushion .cp-check li{font-size:14px;line-height:1.7;margin-top:4px;}
#cushion .cp-box__foot{margin-top:12px;font-size:12px;color:#666;line-height:1.6;}

/* 4. 流れ（素の番号） */
#cushion .cp-flow{padding:28px 0 4px;}
#cushion .cp-steps{counter-reset:cp;}
#cushion .cp-steps li{counter-increment:cp;padding-left:1.6em;position:relative;margin-bottom:12px;}
#cushion .cp-steps li::before{content:counter(cp) ".";position:absolute;left:0;top:0;font-weight:800;color:var(--cp-primary);}
#cushion .cp-steps b{display:block;font-size:15px;font-weight:800;line-height:1.5;}
#cushion .cp-steps span{display:block;font-size:14px;color:#555;line-height:1.7;}

/* 5. あわせて使える割引（素のテキスト行） */
#cushion .cp-extras{padding:20px 0 4px;}
#cushion .cp-extras__list li{margin-top:10px;}
#cushion .cp-extras__list a{display:block;text-decoration:none;color:var(--cp-ink);}
#cushion .cp-extras__list b{display:block;font-size:15px;font-weight:800;}
#cushion .cp-extras__list span{display:block;font-size:14px;color:#555;line-height:1.6;}
#cushion .cp-extras__list em{display:inline-block;font-style:normal;font-size:13px;font-weight:700;color:var(--cp-primary);text-decoration:underline;margin-top:2px;}

/* 6. 最後のCTA */
#cushion .cp-final{padding:28px 0 4px;}
#cushion .cp-final__row{margin-bottom:14px;}
#cushion .cp-final__who{font-size:13px;font-weight:700;margin-bottom:6px;color:#555;display:flex;align-items:center;gap:8px;}
#cushion .cp-final__who b{flex:none;display:inline-block;background:var(--cp-primary);color:#fff;font-size:13px;line-height:1;padding:5px 9px;border-radius:4px;}
#cushion .cp-final__row--no .cp-final__who b{background:#444;}

/* 7. すべてのキャンペーンを見る（受け皿。主ボタン2つと区別するため白地＋枠） */
#cushion .cp-all{padding:36px 0 8px;}
#cushion .cp-all__lead{font-size:14px;font-weight:700;text-align:center;margin-bottom:10px;color:#444;}
#cushion .cp-btn--ghost{background:#fff;color:var(--cp-primary);border:2px solid var(--cp-primary);box-shadow:0 4px 0 #f3c2da;font-size:14px;padding-left:10px;padding-right:34px;}
#cushion .cp-btn--ghost::after{right:14px;border-top-color:var(--cp-primary);border-right-color:var(--cp-primary);}
#cushion .cp-btn--ghost:hover{background:var(--cp-light);}
#cushion .cp-btn--ghost:active{box-shadow:0 0 0 #f3c2da;}

/* フッター */
#cushion .cp-foot{padding:28px 0 48px;border-top:1px solid #e5e5e5;margin-top:44px;}
#cushion .cp-foot__article{font-size:13px;margin-bottom:12px;}
#cushion .cp-foot__article a{text-decoration:underline;}
#cushion .cp-foot__note{font-size:11px;color:#777;line-height:1.7;}
#cushion .cp-foot__op{font-size:11px;color:#777;margin-top:8px;}

/* PC */
@media (min-width:640px){
 #cushion .cp-h1{font-size:30px;}
 #cushion .cp-h1 em{font-size:1.4em;}
 #cushion .cp-sub{font-size:15px;}
 #cushion .cp-hero{padding:40px 0 34px;}
 #cushion .cp-card__points strong{font-size:40px;}
 #cushion .cp-btn{width:auto;min-width:360px;margin-left:auto;margin-right:auto;}
 #cushion .cp-btn--ghost{font-size:16px;padding-left:20px;padding-right:44px;}
 #cushion .cp-btn--ghost::after{right:20px;}
}