/* ドコモのあんしん賃貸保証 まとめておトクキャンペーン 特集LP のスタイル。
   ページ構成の順にまとめている：共通変数／共通パーツ（ボタン・「詳細N」リンク）／ヘッダー／
   KV（キービジュアル＋注記帯）／ページ内ナビ／HOW TO（4ステップとパネル）／
   キャンペーン・特典のバナー集／FAQ／詳細・ご確認事項／フッター／下部固定バー／
   レスポンシブ（861px・860px・560px・400pxで切り替え）。
   数値の多くは実測で決めているため、文言やサイズを変えるときは各コメントの注意書きを読むこと */

:root{
  --red:#C50037; --red-dark:#9A002B; --red-soft:#FBE7EE;
  --gold:#F5A800; --gold-soft:#FFF4D6; --gold-deep:#8a5a00;
  --ink:#1D1B22; --sub:#55525E; --line:#EAE7E2;
  --paper:#ffffff; --mist:#F7F5F2;
  /* ステップの配色は .fstep--bonus / --c1 / --c2 / --c3 の4テーマ（下の定義を参照） */
  --shadow:0 10px 30px rgba(29,27,34,.08);
  /* ページ共通のボックス幅（KVの各ボックス／HOW TOで共通。1か所で変更可） */
  --box-w:840px;
  /* HOW TOのボーナス特典バッジ（黄）の列幅。全ステップで同じ幅にすることで、
     閉じた状態のまま上から下へ見たときに黄のバッジが縦一列に揃う。
     バッジ文言を長くするときはここも実測して広げる */
  --col-bonus:128px;
  /* 見出し行の申し込みボタンの列幅。並び順は「STEPバッジ｜タイトル｜進呈ポイント｜ボタン」で、
     この2つの列幅を固定することでバッジの左端とボタンの右端が全ステップで縦一列に揃う。
     861px以上で全ステップのタイトルが1行に収まる前提の値（変えるときは実測する） */
  --col-btn:138px;
  --font:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
/* 詳細のli（#n1〜#n8）にも適用＝「（詳細N）」クリックの
   着地点がstickyヘッダーの裏に隠れないように。値はtopbar高（ロゴ48px時で約72px）＋余白 */
section[id],.fstep[id],.notes__list li[id]{scroll-margin-top:88px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* キーボード利用者向けスキップリンク（フォーカス時のみ出現） */
.skip{position:absolute;left:8px;top:-48px;z-index:100;background:var(--ink);color:#fff;font-weight:800;font-size:13px;padding:10px 16px;border-radius:0 0 8px 8px;text-decoration:none;transition:top .15s}
.skip:focus{top:0}
/* リンクは未訪問・訪問済みで色を変えない（ブラウザ既定の青／紫にならないように）。
   :where()で詳細度を上げていないので、色を持つボタン・チップ類の指定を邪魔しない */
a:where(:link,:visited){color:var(--red-dark)}
/* 「（詳細N）」の参照リンク：最低11pxを保証し、点線下線でリンクと分かるように。
   ※1のような2文字の記号ではなく5文字相当あるため、上付き（vertical-align:super）にはしない
   （上付きだと窮屈で読めない）。nowrapで括弧の途中では折り返さない。
   padding＋負マージンでレイアウトを動かさずタップ領域を拡大 */
.fn{font-size:max(.78em,11px);color:var(--sub);font-weight:700;white-space:nowrap;margin-left:1px}
a.fn{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;padding:6px 4px;margin:-6px -3px}
a.fn:hover,a.fn:focus-visible{text-decoration-style:solid}
.notes__list li:target{background:var(--gold-soft);border-radius:8px;padding:4px 8px}


.sec__eyebrow{text-align:center;font-size:13px;font-weight:900;letter-spacing:.18em;color:var(--red);margin-bottom:6px}
.sec__title{font-size:clamp(23px,4.3vw,34px);font-weight:900;text-align:center;line-height:1.35;margin-bottom:12px}
.sec__title em{font-style:normal;color:var(--red)}
.sec__lead{text-align:center;color:var(--sub);font-size:14.5px;max-width:680px;margin:0 auto 34px}
.sec__lead b{color:var(--ink)}
.sec__endnote{max-width:780px;margin:26px auto 0;font-size:12px;color:var(--sub);line-height:1.7;text-align:center}
/* 本文中のページ内リンク（詳細・ご確認事項やバナー集への誘導など）。デフォルトの青リンクにしない */
.sec__endnote a,.fstep__point a,.sec__lead a:not(.fn){color:var(--red-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:800;text-decoration:none;border-radius:999px;padding:13px 24px;transition:.16s;cursor:pointer;border:none;font-family:inherit;font-size:14px}
.btn--svc{background:var(--svc-soft);color:var(--svc-ink);border:1.5px solid var(--svc-bd);box-shadow:none}
.btn--svc:hover{background:var(--svc-bd);transform:translateY(-2px)}
.btn--svcline{background:#fff;color:var(--svc-ink);border:1.5px dashed var(--svc-ink);margin-left:8px}
.btn--svcline:hover{background:var(--svc-soft)}
.btn--solid{background:var(--red);color:#fff;border:1.5px solid var(--red)}
.btn--solid:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn--gold{background:var(--gold);color:#3a2600}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,168,0,.4)}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* ヘッダーは左寄せ（画面左端基準。中央寄せにはしない）。
   事業ブランドロゴ（左端）とサービスロゴ（右端）は左右に離して置く
   ＝ブランドルールで同一レイヤーへの並置は不可のため、間隔を詰めない */
.topbar__inner{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,6vw,64px)}
/* スローガンロゴ（支給の.aiから変換したSVG）。スローガンの文字が読める範囲で控えめなサイズ。
   狭幅ではサービスアイコン側をobject-fit:containで縮ませて横はみ出しを防ぐ */
.topbar__logo{width:auto;height:clamp(37px,10.4vw,56px);flex:none}
/* サービスアイコンはサービス紹介ページへのリンク。リンクがフレックスアイテムになるので、
   縮む指定（flex:0 1 auto / min-width:0）はリンク側に移し、画像はその中で追従させる。 */
.topbar__servicelink{flex:0 1 auto;min-width:0;display:block;line-height:0}
.topbar__servicelink:hover{opacity:.85}
.topbar__service{width:auto;height:clamp(20px,7.5vw,38px);max-width:100%;object-fit:contain;object-position:left center}

/* ===== KV：キービジュアル（赤背景の領域）＋注記帯（濃赤） ===== */
.kv{position:relative}
/* 背景画像の上に中央のKV画像を重ねる。背景色は画像の読み込み前と透過部分の下地 */
.keyvisual{position:relative;overflow:hidden;background:#D2133D;text-align:center}
.keyvisual__bg{position:absolute;inset:0;z-index:0;margin:0}
.keyvisual__bg img{width:100%;height:100%;object-fit:cover;object-position:center center}
/* KV画像。861px以上はPC用（横長）、860px以下はSP用（縦長）。切り替えはindex.htmlのpictureのmedia。
   画像を差し替えるときはassets/main_pc・main_sp・main_bgを同じ縦横比で入れ替える
   （比率が変わる場合はindex.html側のwidth/height属性も合わせる＝読み込み時のズレ防止） */
.keyvisual__main{position:relative;z-index:1;margin:0;padding:20px 0 0;line-height:0}
.keyvisual__main img{margin-inline:auto}
/* --- 注記帯（濃赤）：エントリーCTA＋条件チップ＋打消しの注記 --- */
/* KV画像の直下に置く。景表法の打消し表示を主要表示と一体で認識させるための位置なので動かさない */
.keyvisual__notes{background:#2E0909;color:#fff}
.keyvisual__inner{max-width:1000px;margin:0 auto;padding:28px 20px;text-align:center}
/* エントリーCTA。狭幅では帯の内寸いっぱいまで伸ばす。
   下部固定バーのCTA（.cpbar__btn--entry）と同じ意匠にそろえている
   ＝ピル・最大幅530px・文字色#241700・白の内枠。片方だけ変えないこと */
.keyvisual__entry{max-width:530px;margin:0 auto 24px}
.keyvisual__entry a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;background:var(--gold);color:#241700;font-weight:900;font-size:clamp(15px,3vw,20px);text-decoration:none;border-radius:999px;padding:13px 24px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transition:.16s}
.keyvisual__entry a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 12px 26px rgba(0,0,0,.3)}
/* 条件チップ（契約継続・進呈時期・有効期限）。進呈時期と有効期限は進呈施策表示ガイドラインの
   明示要件なので削らない（ポイント種別はKV画像内に明記されている） */
/* 2×2の固定グリッドで組む（flex-wrapにしない）。flex-wrapだと行割りが文字幅で決まるため、
   Webフォント（loadの後に届く）に切り替わった瞬間に「2＋2」→「3＋1」へ並び直して見えた（実測：1000px以上）。
   グリッドなら行割りが文字幅に依存しないので、字体が変わっても箱は動かない。⚠ flexに戻さないこと */
.keyvisual__chips{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.keyvisual__chips li{display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;color:#2E0909;font-weight:900;font-size:clamp(12.5px,2.4vw,15px);line-height:1.4;border-radius:6px;padding:11px 22px}
/* 打消しの注記。帯の中身はすべて中央寄せ（.keyvisual__innerのtext-align:centerを継ぐ） */
.keyvisual__fine{list-style:none;margin:14px auto 0;max-width:840px;font-size:12px;line-height:1.9}
.keyvisual__fine li{margin-top:2px}
.keyvisual__fine .fn{color:#fff}

/* ===== ページ内ナビ（KV直後・KVの外に置く） =====
   sticky化はしない（topbar高がclamp可変のため追従は保守コスト過大） */
.pagenav{background:#fff;border-bottom:1px solid var(--line)}
/* 狭幅では横スクロールではなく折り返す（チップが画面端で切れて見えるのを避ける） */
.pagenav__inner{max-width:calc(var(--box-w) + 40px);margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagenav__chip{flex:none;min-height:40px;display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--red-dark);background:transparent;border:1.5px solid #8F8A93;border-radius:999px;padding:6px 16px;text-decoration:none;white-space:nowrap}
.pagenav__chip:hover{background:var(--red-soft)}
.pagenav__chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ===== HOW TO ===== */
.how{padding:60px 0;background:#fff}
.flow{list-style:none;max-width:var(--box-w);margin:0 auto;display:flex;flex-direction:column;gap:16px}
.fstep{background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:22px 24px;border-left:6px solid var(--svc)}

/* --- ステップのテーマ配色（サービスごとに固定）：
       STEP1＝黄／STEP2＝赤（dカード）／STEP3＝青（インターネット）／STEP4＝緑（でんき・ガス）。
       配色は4変数だけで切り替わる：--svc=アクセント／--svc-soft=淡色地／--svc-bd=枠／--svc-ink=文字。
       左端バー・STEPバッジ・進呈ポイント・ボタン・強調テキストがこれに追従する --- */
.fstep--bonus{--svc:var(--gold);--svc-soft:var(--gold-soft);--svc-bd:#F1D48A;--svc-ink:var(--gold-deep)}
.fstep--c1{--svc:var(--red);--svc-soft:var(--red-soft);--svc-bd:#F0BACD;--svc-ink:var(--red)}
.fstep--c2{--svc:#1E6FD9;--svc-soft:#EAF2FE;--svc-bd:#B7D3F7;--svc-ink:#1257AE}
.fstep--c3{--svc:#0B8449;--svc-soft:#E8F7EF;--svc-bd:#A9DFC3;--svc-ink:#07743F}
/* テーマ色のベタ塗りボタン（見出し行の申し込み導線。STEP1のみ黄の.btn--goldを使う） */
.btn--theme{background:var(--svc);color:#fff}
.btn--theme:hover{filter:brightness(.92);transform:translateY(-2px)}

/* --- 1段目：STEPバッジ＋タイトル＋特典バッジ2列 --- */
.fstep__head{display:flex;align-items:center;gap:12px}
/* min-width＝全ステップで同じ幅にし、タイトルの開始位置を縦に揃える */
.fstep__no{flex:none;min-width:86px;background:var(--svc-soft);color:var(--svc-ink);font-weight:700;font-size:12px;border-radius:10px;padding:6px 12px;line-height:1;display:inline-flex;align-items:baseline;justify-content:center;gap:3px;border:1.5px solid var(--svc-bd)}
.fstep__no b{font-size:20px;font-weight:900}
.fstep__no--gold{font-size:15px;font-weight:900;padding:8px 10px}
.fstep__title{font-size:clamp(18px,3.2vw,23px);font-weight:900;flex:1 1 auto;min-width:0}
/* タイトル行に置くCTA（STEP1のエントリー）。1行に収めるため通常のbtnより控えめな余白
   （チップやボタンを広げるときは861〜999pxでタイトルの折り返しを実測すること） */
.btn--inline{flex:none;width:var(--col-btn);padding:10px 11px;font-size:13.5px;margin-left:0}
.fstep--entry{background:linear-gradient(160deg,#fffdf5,var(--gold-soft))}

/* 特典バッジ（黄）の固定1列グリッド。--col-bonusで全ステップ同幅にし、
   閉じた状態のまま上から下へ見たときにバッジが縦一列に揃うようにする */
.fstep__pts{flex:none;display:grid;grid-template-columns:var(--col-bonus);align-items:center}
/* STEP1には進呈ポイントのバッジを置かない（合計額の足し上げ表示はしない）。
   861px以上で申込ボタンの位置を他STEPと揃えるための空スペーサー */
.fstep__spacer{flex:none;width:var(--col-bonus)}
/* 進呈ポイントと申し込みボタンのまとめ箱。861px以上はdisplay:contentsで透過させて
   「STEPバッジ｜タイトル｜進呈ポイント｜ボタン」の4カラムの列揃えを保ち、
   860px以下はこの箱ごと1行にして、2つが別の行に分かれないようにする */
.fstep__end{display:contents}
.fstep__pts--b{grid-template-columns:var(--col-bonus)}
/* 進呈ポイントの表示。ボタンと誤認されないよう、ピル型・影付きの「押せそうな」見た目にはせず、
   「進呈ポイント」のラベル付き・角丸の淡い帯にする */
.fstep__teaser{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;padding:5px 12px;border-radius:6px;border:1.5px solid var(--svc-bd);background:var(--svc-soft);color:var(--svc-ink);white-space:nowrap;justify-self:start;box-shadow:none}
.fstep__teaser__cap{font-size:11px;font-weight:900;letter-spacing:.02em}
.fstep__teaser b{font-size:14.5px;font-weight:900;color:var(--svc-ink)}
.fstep__teaser--bonus{background:var(--svc-soft);color:var(--svc-ink);border-color:var(--svc-bd)}

/* --- 2段目：既存契約者向けの誘導文＋くわしく見る --- */
.fstep__sub{display:flex;align-items:center;gap:14px;margin-top:10px}
.fstep__guide{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--sub);line-height:1.7}
.fstep__guide b{color:var(--svc-ink)}
.fstep__sub .reveal__btn{flex:none}

/* パネル内の画像は861px以上で左に寄せ、右の空きスペースへテキストを回り込ませる。
   paysteps・タイムライン・注意書き・ボタンは回り込みを解除して全幅に戻す */
.fstep__media{max-width:360px;margin:0 auto 14px}
@media(min-width:861px){
  .fstep__media{float:left;width:300px;max-width:44%;margin:0 20px 12px 0}
  .reveal__panel-inner::after{content:"";display:block;clear:both}
  .paysteps,.timeline,.fstep__point,.fstep__actions{clear:left}
}
.fstep__media img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
.fstep .reveal__panel-inner>p:where(:not([class])){font-size:14.5px;color:var(--ink)}
.fstep .reveal__panel-inner>p:where(:not([class])) b{color:var(--svc-ink)}
.fstep__point{background:#fff;border:1px dashed #DAD5CE;border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--sub);margin-top:8px;text-align:left}
.fstep__point b{color:var(--svc-ink)}

/* --- 2択の選択肢ブロック（STEP3のhome 5G／ドコモ光）---
   「どちらか1つ」であることが分かるよう、バナー＋サービス名＋一言＋申込ボタンを
   2カラムで並べ、間に「または」を置く。860px以下は縦積み。
   バナー画像は支給待ちのプレースホルダー（index.htmlのTODOコメント参照） */
.pick{list-style:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:0 14px;margin:14px 0 4px;text-align:center;clear:left}
.pick__item{background:#fff;border:1.5px solid var(--svc-bd);border-radius:14px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;align-items:center}
.pick__media{width:100%;margin:0}
.pick__media img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
/* 画像からも同じ遷移先へ飛べるようにする。すぐ下の申込ボタンと遷移先が同じなので、
   タブ移動と読み上げが二重にならないよう aria-hidden + tabindex="-1" を付けて
   マウス・タップ専用の導線にしている（キーボードと支援技術は申込ボタンを使う）。 */
.pick__media a{display:block;border-radius:10px}
/* 説明図（.fstep__media）からも遷移できるようにする。遷移先が一意に決まる図だけに付ける。
   同じ遷移先のボタンが同じ画面内にある場合は、上と同じ理由で支援技術から外している。 */
.medialink{display:block;border-radius:inherit;padding:0;border:0;background:none;font:inherit;cursor:pointer;width:100%}

/* ===== お申込み先の選択ダイアログ ===== */
/* STEP3・STEP4は遷移先が2つある。見出し行の「お申込み」と、STEP4の説明図（1枚で
   2サービスを説明している）を押すとこのダイアログが開き、どちらへ進むかを選ばせる。
   パネル内の2択（.pick / .fstep__actions）は明示的な単一遷移先なので直リンクのまま。
   テーマ色は .fstep--cN のカスタムプロパティを載せて各STEPと揃えている。 */
/* <dialog>を知らないブラウザ（Safari 15.3以前）にはUA既定の dialog:not([open]){display:none} が無く、
   閉じているダイアログの中身がフッター直前に本文として描画される。UA既定と同じ内容を明示する。
   対応ブラウザでは既定と同じ宣言なので挙動は変わらない。⚠ 削らないこと */
dialog:not([open]){display:none}
.chooser{margin:auto;border:0;padding:0;width:100%;max-width:min(520px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:var(--ink);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.chooser::backdrop{background:rgba(20,16,24,.55)}
.chooser__inner{padding:22px 20px 18px}
.chooser__ttl{font-size:17px;font-weight:900;line-height:1.5;margin:0 0 8px;color:var(--svc-ink)}
.chooser__lead{font-size:13px;line-height:1.9;margin:0 0 16px;color:var(--ink)}
.chooser__list{list-style:none;display:grid;gap:14px;margin:0 0 16px;padding:0}
.chooser__list .btn{width:100%}
.chooser__foot{display:flex;justify-content:flex-end}
.chooser__close{font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  border-radius:999px;padding:8px 14px;transition:.16s;
  background:var(--mist);border:1.5px solid var(--line);color:var(--sub)}
.chooser__close:hover{background:var(--line)}
.chooser__close:focus-visible,.medialink:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* ダイアログを開いている間は背面をスクロールさせない */
html.is-locked{overflow:hidden}
.medialink:hover{opacity:.9}
.pick__media a:hover img{border-color:var(--svc)}
.pick__name{font-size:16px;font-weight:900;color:var(--svc-ink);line-height:1.4}
.pick__desc{font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.7;flex:1 1 auto}
.pick__desc b{color:var(--svc-ink)}
.pick__btn{margin-top:2px;width:100%;padding:11px 14px;font-size:13.5px}
.pick__or{align-self:center;display:flex;justify-content:center}
.pick__or span{display:inline-block;background:var(--svc-soft);color:var(--svc-ink);border:1.5px solid var(--svc-bd);border-radius:999px;font-size:12px;font-weight:900;padding:4px 10px;white-space:nowrap}

/* --- お支払い情報の登録方法（paysteps） --- */
.paysteps{margin-top:14px;text-align:left}
.paysteps__lead{font-weight:900;font-size:13px;color:var(--svc-ink);margin-bottom:10px}
.paysteps__list{list-style:none;display:flex;flex-direction:column;gap:10px}
.paystep{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;align-items:baseline;gap:10px}
.paystep__no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--svc-ink,var(--ink));color:#fff;font-weight:900;font-size:12px;border-radius:999px}
.paystep__title{font-size:14.5px;font-weight:900;color:var(--ink);margin-bottom:6px}
.paystep__desc{font-size:13px;color:var(--ink);line-height:1.7}
/* --svc（黄テーマでは #F5A800）は白背景の文字色として使えないため --svc-ink を使う */
.paystep__desc b{color:var(--svc-ink)}
.paystep__desc a{color:var(--svc-ink);font-weight:800;text-decoration:underline;word-break:break-all}
.paystep__faq{margin-top:10px;background:var(--mist);border-radius:10px;padding:10px 12px}
.paystep__faqq{font-size:12.5px;font-weight:900;color:var(--svc-ink);margin-bottom:4px}
.paystep__faqa{font-size:12.5px;color:var(--sub);line-height:1.6}
.paystep__note{font-size:12px;color:var(--sub);line-height:1.6;margin-top:8px}
.paysteps__goal{margin-top:12px;background:var(--gold-soft);border:1.5px solid #F1D48A;border-radius:10px;padding:12px 14px;font-weight:800;font-size:13px;color:var(--gold-deep);text-align:center}
.paysteps__deadline{font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:8px;text-align:left}
.paysteps__deadline::before{content:"📅 ";opacity:.8}
.fstep__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.reveal__panel-inner>p:where(:not([class])){text-align:left;font-size:13px;color:var(--sub);margin-top:8px}
.substeps{margin:8px 0 0;padding-left:1.3em;text-align:left;display:flex;flex-direction:column;gap:6px}
.substeps li{font-size:13px;color:var(--ink);line-height:1.6}
.substeps li::marker{font-weight:900;color:var(--svc-ink)}
.substeps b{color:var(--svc-ink)}

/* --- 受け取りまでの流れ（タイムライン。画像を使わずHTML/CSSで実装＝文言変更に強い） --- */
.timeline{list-style:none;display:flex;gap:26px;margin:16px 0 4px;padding:0;text-align:left}
.timeline__item{position:relative;flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.timeline__item::after{content:"→";position:absolute;left:calc(100% + 13px);top:50%;transform:translate(-50%,-50%);font-weight:900;color:var(--sub);font-size:16px;line-height:1}
.timeline__item:last-child::after{content:none}
.timeline__item--goal{background:var(--gold-soft);border-color:var(--gold)}
.timeline__when{font-size:11.5px;font-weight:900;color:var(--svc-ink)}
.timeline__what{font-size:13px;font-weight:800;color:var(--ink);line-height:1.5}
@media(max-width:560px){
  .timeline{flex-direction:column;gap:22px}
  .timeline__item::after{content:"↓";left:50%;top:calc(100% + 11px);transform:translate(-50%,-50%)}
  .timeline__item:last-child::after{content:none}
}

/* --- ＋くわしく見る（reveal開閉） --- */
/* white-space:nowrap＝ラベルが2行に折り返さないようにする（PCでのSTEP5対策） */
.reveal__btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px dashed var(--svc-ink,#716C7A);color:var(--sub);font-weight:800;font-size:12.5px;padding:8px 14px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.reveal__btn:hover{background:var(--mist);border-color:var(--svc);color:var(--svc-ink)}
.reveal__icon{display:inline-block;font-size:14px;line-height:1;transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.reveal__btn.is-open .reveal__icon{transform:rotate(45deg)}
.reveal__panel{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.34,1.56,.64,1)}
.reveal__panel-inner{padding-top:14px;opacity:0;transition:opacity .2s ease}
.reveal__panel.is-open .reveal__panel-inner{opacity:1;transition:opacity .25s ease .1s}

/* --- dポイント（期間・用途限定）ラベル：pt表示に必ず併記 --- */
/* white-space:nowrap＝ラベル内での改行を禁止（KVの3カラムカード内で折り返さないため。
   最狭320px時もカード内幅264px＞ラベル幅のため、はみ出しは起きない） */
/* パネル内は「3,000pt」などの金額を主役にする。
   dポイント（期間・用途限定）のラベルは枠を外して小さく添える */
.pt-strong{font-size:1.45em;font-weight:900;color:var(--svc-ink,var(--red));letter-spacing:-.01em}
.reveal__panel .ptlabel,.substeps .ptlabel{font-size:11px;font-weight:700;color:var(--sub);background:none;border:0;padding:0 0 0 4px}
.ptlabel{display:inline-block;align-self:center;font-size:12px;font-weight:800;color:var(--red);background:#fff;border:1.5px solid var(--red);border-radius:999px;padding:2px 10px;line-height:1.6;white-space:nowrap}

.btn:focus-visible,.keyvisual__entry a:focus-visible,.reveal__btn:focus-visible,.cpbar__btn:focus-visible,.faq__item summary:focus-visible,a.fn:focus-visible,.cps__banner:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ===== 単体キャンペーンのバナー集（ガイドライン対応：他キャンペーンはLP下部のバナー掲載のみ） ===== */
.cps{padding:60px 0;background:#fff;border-top:1px solid var(--line)}
.cps__grid{list-style:none;max-width:var(--box-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cps__banner{display:flex;flex-direction:column;gap:8px;text-decoration:none;border-radius:14px}
.cps__banner img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .16s}
.cps__banner:hover img{transform:translateY(-3px)}
.cps__label{font-size:13.5px;font-weight:800;color:var(--red-dark);text-align:center}
/* バナー素材が未支給のサービス用のテキストタイル（他バナーと同じ面積・角丸で並べる。
   ブランドのクリエイティブを自作しないための代替表示。素材支給後は<picture>へ差し替える） */
.cps__banner--text .cps__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:720/300;border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,#fff,var(--mist));box-shadow:var(--shadow);padding:16px;text-align:center;transition:transform .16s}
.cps__banner--text:hover .cps__tile{transform:translateY(-3px)}
.cps__tile__name{font-size:clamp(22px,3.4vw,30px);font-weight:900;color:var(--red)}
.cps__tile__desc{font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.7}
.cps__more{display:inline-block;margin-right:10px;padding:3px 14px;border-radius:999px;background:var(--red);color:#fff;font-size:.62em;font-weight:900;letter-spacing:.08em;vertical-align:.18em}
.cps__note{max-width:var(--box-w);margin:16px auto 0;font-size:12px;color:var(--sub);line-height:1.8}
@media(max-width:640px){.cps__grid{grid-template-columns:1fr;max-width:420px}}

/* ===== FAQ ===== */
.faq{padding:60px 0;background:var(--mist)}
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq__item summary{cursor:pointer;padding:16px 46px 16px 18px;position:relative;list-style:none}
/* summary内の見出し（h3）。ブラウザ既定のh3装飾を打ち消してsummaryの見た目を維持する */
.faq__q{display:inline;font-size:15px;font-weight:700;line-height:inherit}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--red);transition:.2s}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__item p{padding:0 18px 18px;font-size:14px;color:var(--sub)}

/* ===== notes（詳細・ご確認事項）：詳細1〜8と全特典共通のご注意事項・規約を
   1ブロックに統合している。※Nは本文からのアンカーの着地先なので、
   アコーディオンには入れず常時表示にする ===== */
.notes{padding:44px 0;background:#fff;border-top:1px solid var(--line)}
.notes__ttl{font-size:13px;font-weight:900;color:var(--sub);text-align:center;margin-bottom:16px;letter-spacing:.06em}
.notes__list{max-width:820px;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:8px}
.notes__list li{font-size:12px;line-height:1.8;color:var(--sub);display:flex;gap:8px}
.notes__list li span{flex:none;font-weight:900;color:var(--ink)}
/* 本文テキストは必ずこのラッパーに入れる：flexコンテナ直下にインラインのa等を置くと
   匿名flexアイテムに分割され、リンクの前後で改行が崩れるため（※7で発生した実バグ） */
.notes__txt{flex:1 1 auto;min-width:0}
.notes__txt a:not(.fn){color:var(--red-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* --- 全特典共通のご注意事項・規約。詳細（詳細1〜8）の続きとして
   同じ小さな文字組みで表示する（特典ごとの進呈条件・対象外条件は詳細側に集約） --- */
.notes__lead{max-width:820px;margin:0 auto 12px;font-size:12px;color:var(--sub);line-height:1.9}
/* 「規約と注釈が混ざっている」という指摘に構造で応えるための小見出し。
   詳細1〜8＝本文の「（詳細N）」リンクの着地先／ご注意事項・規約＝本文から参照しない番号なし「※」 */
.notes__sub{max-width:820px;margin:22px auto 8px;font-size:14px;font-weight:900;color:var(--ink)}
/* ※Nクリック時にJSが挿入する「本文へ戻る」リンク（script.js参照） */
.notes__back{flex:none;align-self:flex-end;font-weight:800;color:var(--red);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;padding:4px 2px}

/* ===== リンクアイコン（ドコモのリンクアイコン規則に合わせる） =====
   .lnk-new＝新規／ポップアップウィンドウを表示するリンク（重なった四角）
   .lnk-in ＝ページ内リンク（下向きのくの字）
   通常のリンク（＞）・前のページへ戻る（＜）・ページの先頭へ戻る（∧）・メール（封筒）・
   ダウンロード（↓）・PDF は、該当するリンクを作るときに同じ方式で足す。
   アイコンはマスク＋currentColorなので白文字のフッターでも文字色に追従する。
   マスク未対応の環境ではアイコンを出さない（レイアウトは崩さない） */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .lnk-new::after,.lnk-in::before{content:"";display:inline-block;flex:none;width:.9em;height:.9em;background-color:currentColor;vertical-align:-.08em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
  .lnk-new::after{margin-left:.35em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.7.7h6.6v6.6H9.1V2.9H4.7z'/%3E%3Cpath d='M1.3 4.5h6.4v6.8H1.3z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.7.7h6.6v6.6H9.1V2.9H4.7z'/%3E%3Cpath d='M1.3 4.5h6.4v6.8H1.3z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E")}
  .lnk-in::before{margin-right:.3em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* ボタン類はgapで間隔が付くので余白を二重にしない */
  .btn.lnk-new::after,.keyvisual__entry a.lnk-new::after,.cpbar__btn.lnk-new::after{margin-left:0}
  .cps__label.lnk-new::after{width:.85em;height:.85em}
}

/* ===== footer ===== */
/* 下端の余白は追従バー（.cpbar・position:fixed）に隠れるぶんの確保。
   body側に付けるとフッターより下に body の地色が見えてしまうので、
   フッターの背景で塗りつぶされるようにここへ持たせている。 */
.foot{padding:38px 0 calc(38px + 88px + env(safe-area-inset-bottom));background:#211f26;color:#b8b5bf;text-align:center}
/* シロヌキ版スローガンロゴ（支給の.aiから変換したSVG） */
.foot__logo{width:auto;height:clamp(51px,9.3vw,65px);margin:0 auto 14px}
.foot__links{margin:0 auto 14px;max-width:760px}
.foot__links ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px}
.foot__links a{display:inline-block;color:#fff;font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:7px 2px}
.foot__links a:hover{text-decoration-thickness:2px}
.foot__copy{font-size:12px;opacity:.85}

/* ===== 下部スティッキーバー：エントリー導線とページ保存のみ =====
   他のキャンペーン・特典へのボタンは置かない（1つのLPで複数のキャンペーンを訴求しないため）。
   全コントロールはタップ高44px以上を確保する */
.cpbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(33,31,38,.97);display:flex;align-items:stretch;justify-content:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.cpbar__btn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:800;padding:8px 6px;border-radius:999px;transition:.15s;border:1.5px solid transparent}
.cpbar__btn--entry{max-width:530px;min-height:52px;margin:0 auto;background:var(--gold);color:#241700;font-weight:900;font-size:clamp(14px,3.2vw,16px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.cpbar__btn:hover{filter:brightness(.96);transform:translateY(-1px)}


/* ===== responsive ===== */
/* 860px＝HOW TOの見出し行で固定列（進呈ポイント・ボタン）を取れなくなる下限 */
@media(max-width:860px){
  /* 幅が足りないので固定列をやめ、タイトルの下に折り返す（縦の列揃えはPCのみ） */
  .fstep__head{flex-wrap:wrap}
  .fstep__spacer{display:none}
  .fstep__sub{flex-wrap:wrap;gap:10px}
  /* 2択ブロックは縦積み（「または」は上下の区切りとして中央に） */
  .pick{grid-template-columns:1fr;gap:12px 0;max-width:420px;margin-inline:auto}
  .fstep__guide{flex:1 1 100%}
  /* 進呈ポイントと申し込みボタンはまとめ箱ごと1行にして行の右端へ寄せる
     （別々に折り返すと縦に3段になるため）。タイトルは残り幅で折り返す */
  .fstep__end{display:flex;flex:0 0 auto;align-items:center;gap:10px;order:2;margin-left:auto}
  .fstep__pts{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:8px}
  .btn--inline{width:auto;flex:none}
  /* 狭幅ではバッジ・ボタン類を行の右端に寄せる（テキストは左のまま） */
  .fstep__sub .reveal__btn{margin-left:auto}
}
@media(max-width:560px){
  /* 狭幅ではエントリーCTAを帯の内寸いっぱいに広げ、チップの余白を詰める */
  .keyvisual__inner{padding:22px 14px}
  .keyvisual__entry{max-width:100%}
  /* 狭幅ではチップの間隔と余白を詰める（2×2グリッド自体は全幅共通。基本ルール側を参照） */
  .keyvisual__chips{gap:6px;align-items:stretch}
  .keyvisual__chips li{padding:8px 10px}
  .btn--svcline{margin-left:0}
  /* 狭幅ではタイトルを常にSTEPバッジの下の行に置く（タイトルの長短で「横に並ぶ/落ちる」が
     ステップごとに混在して見えるのを防ぐ＝iPhone mini系での見栄え対策） */
  /* 見出しは3段（STEPバッジ／タイトル／進呈ptと申込ボタン）になっていて1段ぶん無駄だった。
     STEPバッジと同じ段に進呈pt・申込ボタンを並べ、タイトルを次の段に落として2段にする。 */
  .fstep__end{order:1}
  .fstep__title{flex:1 1 100%;order:2}
  /* 進呈ポイントと申し込みボタンは同じ1行に収める（別々の行に積むと左寄せ・右寄せが
     交互になって行頭がガタつくため）。左＝進呈ポイント／右＝ボタンで固定し、
     1行に収まるよう文字と余白を詰めている（320px幅でも収まる実測値） */
  .fstep__head{column-gap:10px}
  .fstep__pts{flex:0 0 auto;justify-content:flex-start}
  .fstep__teaser{padding:4px 9px;font-size:11.5px}
  .fstep__teaser b,.fstep__teaser--total b{font-size:13px}
  .btn--inline{padding:9px 10px;font-size:12.5px}
  .fstep__actions{justify-content:stretch}
  .fstep__actions .btn{flex:1 1 100%}
  .cpbar{gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
}
/* 840pxのボックスを取れない幅では、fstepの左右パディングを詰めてタイトル1行を維持する */
@media(max-width:1000px){
  .fstep{padding:22px 18px}
}
@media(max-width:400px){
  /* 最狭幅では「進呈ポイント」のラベルを省いて1行を維持する（値と単位は残す） */
  .wrap{padding:0 14px}
  .fstep{padding:16px 14px}
  .paystep{padding:12px}
  .paystep__faq{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}