/*
    PAY-01 Step6（B-8）— 広告なしモードの3ページ（/pricing・/subscription/complete・
    /subscription/restore）の見た目。台本は docs/tasks/PAY-01/design-visual.html。

    🔴 値は全部このサイトが既に持っているものを写している（style-inventory.md の実測）。
       新しい色・新しいフォント・新しいブレークポイントは1つも足していない。
    🔴 @media を1つも書かない＝幅の分岐は max-width だけで足りる（設計 方針D）。
       共有 CSS の PC 版は <link media="(min-width: 768px)"> で着せられるので、
       ここで 768px を書くと**しきい値が2箇所**になる。
    📌 3ページで共有する1枚（判断V1）＝複製すると3枚がじわじわズレるため。
*/

/* ── ページ全体（部品2 の型＝.h2_wrap に固有クラスを足してその下に書く）────── */
.adfree_page {
  line-height: 1.8;
}

/* 🔑 リンク色は #0066cc（色4-a・2026-08-29 決定）＝文章ページ（/legal/privacy）の系統。
      共有 CSS の既定 #05f は本文に混ぜると強すぎるので、このページの中だけ上書きする。 */
.adfree_page a {
  color: #0066cc;
  text-decoration: none;
}

.adfree_page a:hover {
  text-decoration: underline;
}

/* 小見出し。/legal/privacy の h3 と同じ姿だが、単位は rem に寄せている
   （あちらの em はサイト内では少数派・2026-08-29 決定）。1rem = 10px。 */
.adfree_h3 {
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid #888;
  padding-bottom: 0.3rem;
  margin: 2rem 0 1rem;
}

/* ── 価格（主役）──────────────────────────────────────────
   🔑 いまは本文に埋もれているのを独立ブロックにする。金額を先頭に置かず
      「月額 100 円」の語順を保つのは AdSense 規約（広告の値段と誤読される）。 */
.adfree_price {
  margin: 1.5rem 0;
  font-size: 1.6rem;
}

.adfree_price strong {
  font-size: 3.2rem;
  line-height: 1.2;
}

.adfree_price .adfree_tax {
  color: #666;
  font-size: 1.3rem;
}

/* ── 箇条書き（説明の4項目）────────────────────────────── */
.adfree_points {
  margin: 1rem 0 2rem 1.5rem;
  padding: 0;
  list-style: none;
}

.adfree_points > li {
  margin: 0.4rem 0;
}

/* ── CTA（その画面の主役の行動・1画面に1つ）──────────────────
   🔴 値は共有 CSS の .ofuse_banner_wrap（濃い青の支援バナー）から写した。
      ただし**クラス名は借りない**（あちらは Green では使用箇所ゼロ＝死んだ規則で、
      「使われていないから」と消された瞬間にこちらが静かに崩れる）。2026-08-29 決定。 */
.adfree_cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 15px;
  background-color: #12779d;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  margin: 2rem 0 0.8rem;
  box-sizing: border-box;
}

/*  🔴 <a> に着せたとき、文字色は<b>これを書かないと青いまま</b>になる。
    理由＝上の `.adfree_page a` は（クラス1＋要素1）で、`.adfree_cta` の（クラス1）より
    詳細度が<b>高い</b>。「後に書いたほうが勝つ」のは詳細度が同じときだけ。
    ⚠️ 2026-08-29 に実際に踏んだ＝ボタンは濃い青に塗れたのに文字だけリンク色で残り、
       <b>画面を撮るまで気付かなかった</b>（ビルドもテストも緑のまま）。
    ⇒ クラスを2つ重ねて（クラス2）にし、リンク規則に勝たせる。 */
/*  🎨 <b>ボタンを中央へ</b>（L1-7-c・3ページ共通で統一・2026-09-03 ユーザー承認）。
    <c>.adfree_cta</c> は <c>width:100%; max-width:500px</c> なので、広い画面では
    <b>左に寄って見える</b>。左右 auto で器の中心に置く。
    ⚠️ <b>この1行は <c>/pricing</c> と <c>/subscription/complete</c> にも効く</b>＝
       3ページで1枚の CSS を共有する判断V1 のとおりで、<b>巻き添えではなく統一</b>。 */
.adfree_page .adfree_cta {
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

.adfree_page .adfree_cta:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #fff;
}

/* ── 脇役のボタン（コピー・地図にもどる）────────────────────
   /contact の #submit_button と同じ姿。あちらは width:80px 固定で
   長い文言が入らないので、幅だけ padding で可変にしている。 */
.adfree_button {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background-color: #fafafa;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 1.4rem;
  text-align: center;
  color: #333;
  text-decoration: none;
  box-sizing: border-box;
}

/* 同上＝<a> に着せる場合があるので、リンク規則に勝てる詳細度で文字色を決める。 */
.adfree_page .adfree_button {
  color: #333;
}

.adfree_page .adfree_button:hover {
  background-color: #fefefe;
  text-decoration: none;
  color: #333;
}

/* ── 状態の3色（設計 方針B）────────────────────────────────
   ✅ 進んでよし ／ 📋 待って・案内 ／ ⛔ 止まって。
   🔑 3色ともサイトの別の場所で既に使われている色から取っている:
      #deedee = 右カラムの小見出し帯 ／ #fafafa+#eee = カード ／ #fee+#f00 = 検証エラー。 */
.adfree_box_ok {
  background-color: #deedee;
  padding: 15px;
  border-radius: 3px;
  margin: 0 0 15px;
}

.adfree_box_note {
  background-color: #fafafa;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 3px;
  margin: 0 0 15px;
}

.adfree_box_err {
  background-color: #fee;
  border: 1px solid #f00;
  color: #f00;
  font-weight: bold;
  padding: 15px;
  border-radius: 3px;
  margin: 0 0 15px;
}

/* ── カード（持ち出しの案内をまとめる囲み）──────────────────
   共有 CSS の .solar_eclipse_glass_wrap と同じ寸法。 */
.adfree_card {
  margin: 15px 0 20px;
  padding: 15px;
  border: 1px solid #eee;
  background-color: #fafafa;
  border-radius: 3px;
}

/* ── 入力欄（/contact のフォームと同じ姿）──────────────────
   🔴 券の文字列は約170文字あるので、素の size="40" では明確に狭い。 */
.adfree_input {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 30px;
  line-height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1.3rem;
}

/* 入力欄＋ボタンを横に並べる。max-width が効くので狭い画面では自然に縮む。 */
.adfree_input_row {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 500px;
}

.adfree_input_row > .adfree_button {
  flex-shrink: 0;
}

/* ── QR の器 ────────────────────────────────────────────
   🔴 line-height: 0 ＝ SVG は inline 要素なので、行の descender ぶん
      器が下に膨らむ（AD-05 で広告の器が膨らんだのと同じ現象）。 */
.adfree_qr {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #eee;
  margin: 10px 0;
  line-height: 0;
}

/*  ── 最終確認画面の器（PAY-01 L1-7-c）──────────────────────
    🎨 <b>行が長すぎるのを止める</b>＝この画面は左カラムの幅いっぱい（PC で 1000px 超）まで
       文が伸びていて、<b>目が行末から次の行頭へ戻れない</b>状態だった。
    📌 760px は<b>新しいしきい値ではない</b>＝画面幅の分岐ではなく<b>器の上限</b>なので、
       @media は要らないし、狭い画面では単に効かなくなるだけ（方針D と衝突しない）。 */
#adfree_confirm_wrap {
  max-width: 760px;
}

/* ── 申込内容の一覧（最終確認画面・PAY-01 L-1 / L1-7-b で2列に組み直し）────
   🔴 表ではなく <dl>。要素は増やさず、行を .adfree_terms_row で包んで
      <b>左に項目名・右に中身</b>の2列に組む（台本＝design-confirm.html の案2「台帳」）。
   🔑 <b>@media は1つも書かない</b>（設計 方針D）＝狭い幅への対応は flex-wrap に任せる。
      右カラムの最小幅（320px）が入らなくなった瞬間に<b>自動で縦積みに戻る</b>ので、
      しきい値をこのファイルに持たなくて済む（共有 CSS の PC 版は <link media> で着せられており、
      ここに 768px を書くと<b>しきい値が2箇所</b>になる）。
   📌 色は既にこのファイルで使っている値だけ（#eee の罫・#333 の見出し）。新色ゼロ。 */
/*  🎨 <b>台帳を罫線で囲う</b>（L1-7-d・2026-09-03 ユーザー要望）。
    上辺しか無かったので、<b>左右と下辺を足して1つの表に見せる</b>。
    📌 色は <b>#ccc</b>＝このファイルが入力欄の枠で既に使っている値（新色ゼロ）。
       行の仕切り（#eee）より<b>一段濃い</b>ので、<b>外枠と中の仕切りが同じ強さで喧嘩しない</b>。 */
.adfree_terms {
  margin: 1.5rem 0 2rem;
  padding: 0;
  border: 1px solid #ccc;
}

/*  🔴 <b>縦の余白と罫線は「行の器」が持つ</b>（L1-7-b）。
    2列に組むと dt と dd が横に並ぶので、<b>両方が罫を持つと1行に2本引かれる</b>。
    ⚠️ 旧 `.adfree_terms > dt` / `> dd` は<b>子セレクタなので、行を器で包んだ時点で当たらなくなった</b>
       （L1-7-a）。ここへ引っ越すのが正しい直し方で、残しておくと<b>永久に効かない規則</b>になる。 */
/*  🔴 <b>縦の余白は「行の器」ではなく左右のマスが持つ</b>（L1-7-d で移した）。
    項目名のマスに背景色を敷いたので、<b>余白が器の側にあると色が上下に届かず</b>、
    帯だけが宙に浮いて見える。マスの内側に余白を入れると、<b>色が行の高さいっぱいに伸びる</b>
    （flex の既定 <c>align-items: stretch</c> が、背の低いマスを相手の高さまで引き伸ばす）。 */
/*  🎨 <b>罫は外枠・列の境・行の仕切りを全部 #ccc で揃える</b>（L1-7-d・2026-09-03 ユーザー要望）。
    当初は行の仕切りだけ #eee で一段薄くしていたが、<b>外枠を #ccc にした途端に見えなくなった</b>
    （罫の濃さは絶対値ではなく<b>隣に何が引かれているかで決まる</b>）。⇒ 素直に格子にする。
    📌 <b>最後の行だけ下の罫を消す</b>＝外枠の下辺と重なって<b>二重線</b>になるため。 */
.adfree_terms_row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}

.adfree_terms_row:last-child {
  border-bottom: 0;
}

/*  左＝項目名の列。180px を下限に、220px までで頭打ちにする。
    🎨 <b>背景を敷いて「ラベル列」にする</b>（L1-7-d・2026-09-03 ユーザー要望）。
       色は <b>#deedee</b>＝<b>このサイトが右カラムの小見出し帯で使っている色</b>そのもの
       （共有 CSS の <c>#plugins_wrap .plugin_wrap > p</c> と同じ値）。<b>新色ではない</b>。
    📌 <b>文字色は #666 から #333 に戻した</b>＝背景が「これはラベルだ」と言ってくれるので、
       字まで淡くする必要がなくなった。むしろ色の上に #666 を置くとコントラストが落ちる
       （#333 なら 10.5:1・#666 だと 4.8:1 でぎりぎり）。
    📌 <b>右との隙間は margin で取る</b>＝padding だと色の内側に隙間ができて帯が間延びする。
       折り返して縦積みになったときも、margin なら本文が字下げされない。 */
.adfree_terms_row > dt {
  flex: 1 0 180px;
  max-width: 220px;
  margin: 0 1.5rem 0 0;
  padding: 1.2rem 1rem;
  background-color: #deedee;
  border-right: 1px solid #ccc;
  color: #333;
  font-size: 1.3rem;
  font-weight: bold;
}

/*  右＝中身の列。
    🔑 <b>flex-grow を 999 にしてある</b>＝余った幅はほぼ全部こちらが取る。
       そして flex-basis 320px が入らなくなると <b>flex-wrap が下へ折り返す</b>＝縦積みに戻る。
    📌 上下の余白は dt と同じ 1.2rem＝<b>左右のマスで1行目の高さが揃う</b>。 */
.adfree_terms_row > dd {
  flex: 999 1 320px;
  margin: 0;
  padding: 1.2rem 1rem 1.2rem 0;
}

/*  🎨 <b>料金だけ声を大きくする</b>（L1-7-c）＝一番知りたい数字が6行のうちの3行目に
    他と同じ大きさで埋もれていたのを、主役に戻す。
    🔴 <b>語順「月額 100円」は動かさない</b>＝金額を先頭に置くと AdSense 規約に触れる
       （このページに出る広告の値段と誤読される）。<b>大きくするのは字だけ</b>。
    📌 1.8rem は既存の階段の値（共有 CSS の h2 と同じ）。新しい寸法は足していない。 */
.adfree_terms_row_price > dd > b {
  font-size: 1.8rem;
}

/*  🎨 <b>確定ボタンだけ2行組みにする</b>（L1-7-d）＝主文「申込みを確定する」の下に
    行き先の注記を小さく置く。
    🔴 <b><c>.adfree_cta</c> 本体は触らない</b>＝あれは3ページ共有で、
       <c>/pricing</c> と <c>/subscription/complete</c> のボタンまで縦積みになる。
       ID で絞れば<b>この1つのボタンだけ</b>に効く（詳細度でもクラスに勝つ）。 */
#adfree_confirm_buy {
  flex-direction: column;
}

/*  注記は<b>小さく・細く</b>＝主文より目立たせない。
    主文が「これは申込みだ」と言う役で、注記は「行き先はここ」と添えるだけ。 */
.adfree_cta_sub {
  font-size: 1.3rem;
  font-weight: normal;
}

/* ── 補助 ────────────────────────────────────────────── */
.adfree_small {
  color: #666;
  font-size: 1.3rem;
}

.adfree_center {
  text-align: center;
}

/* 🔴 JavaScript が無効なときだけ出る注意書き（PAY-01 G2-3・2026-09-06）。
 * この画面の案内・エラー表示・保存の可否判定は全部 JS なので、JS が切れていると
 * <b>手当てのメッセージ自体が動かない</b>＝ここが唯一読める文字になる。
 * 📌 だから「読み飛ばされない見た目」にする＝枠と地色を付ける。 */
.adfree_noscript {
    border: 1px solid #c0392b;
    background: #fdf3f2;
    border-radius: 6px;
    padding: 1.2rem 1.4rem;
    margin: 0 0 1.6rem;
    line-height: 1.7;
}