/* ============================================
   redesign.css — リッチセクション（test-section-prototype.html の After を本番化）
   - style.css の後に読み込む。色は全て既存トークン（--moss/--terra/--gold/--paper…）のまま忠実移植。
   - 第1弾: ④「なぜ続くのか」(.edu--rich)。⑦以降は順次追記。
   - 比較ハーネス(.harness*)はプロトタイプ専用のため移植しない。
   ============================================ */

/* ===== ④ .edu--rich：写真＋図解＋過剰あしらい ===== */
.edu--rich { background: var(--paper); }

/* 透かし漢字を過剰に大きく＋左下に2文字目 */
.edu--rich .bg-watermark { font-size: 320px; opacity: .05; top: -40px; right: -60px; }
.edu--rich .bg-watermark2 {
  position: absolute; left: -50px; bottom: 40px;
  font-family: var(--f-serif); font-weight: 700;
  font-size: 240px; color: var(--moss); opacity: .04;
  pointer-events: none; z-index: 0; line-height: 1;
}

/* リード上の手書き風ラベル */
.scribble {
  font-family: var(--f-hand); color: var(--terra);
  font-size: 15px; display: inline-block;
  transform: rotate(-3deg); position: relative; margin: 4px 0 0 4px;
}
.scribble::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 6px; background: var(--terra-tint); border-radius: 50%; opacity: .7; z-index: -1;
}

/* 冒頭フルブリード帯ビジュアル */
.edu--rich .hero-strip {
  position: relative; z-index: 1; margin: 28px -28px 0; height: 180px; overflow: hidden;
}
.edu--rich .hero-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.edu--rich .hero-strip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,106,130,.15), rgba(42,36,32,.55));
}
.edu--rich .hero-strip__cap {
  position: absolute; left: 24px; bottom: 18px; z-index: 2; color: #fff;
  font-family: var(--f-serif); font-weight: 600; font-size: 17px; line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.markpen { background: linear-gradient(transparent 55%, rgba(195,90,59,.85) 55%); padding: 0 .1em; }
.rcard__title .markpen { background: linear-gradient(transparent 60%, var(--gold-soft) 60%); }

/* 縦の点線コネクタ（01→02→03 を動線でつなぐ） */
.rflow { position: relative; }
.rflow::before {
  content: ""; position: absolute; left: 50%; top: 60px; bottom: 90px;
  width: 0; border-left: 2px dashed var(--moss-soft); opacity: .5; z-index: 0;
}

/* リッチreasonカード（図解を主役に） */
.rcard {
  position: relative; z-index: 1; background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  margin-top: 52px; border: 1px solid var(--line-soft); padding-top: 0;
}
.rcard--c1 { background: #fff; }
.rcard--c2 { background: var(--moss-wash); border-color: var(--moss-tint); }
.rcard--c3 { background: #fbfaf6; border-color: rgba(184,137,74,.18); }

/* 連番：塗り円バッジを左上角からはみ出させる */
.rcard__num {
  position: absolute; top: -22px; left: -22px; z-index: 4;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--moss); color: #fff;
  font-family: var(--f-mono); font-weight: 500; font-size: 24px;
  box-shadow: 0 6px 16px rgba(31,106,130,.38); border: 4px solid #fff;
}
.rcard--flip .rcard__num { left: auto; right: -22px; background: var(--terra); box-shadow: 0 4px 14px rgba(195,90,59,.32); }

/* カードヘッダー帯（バッジ＋タイトル）3枚統一 */
.rcard__head { display: flex; align-items: center; min-height: 60px; padding: 14px 18px 14px 52px; }
.rcard--flip .rcard__head { padding: 14px 52px 14px 18px; justify-content: flex-end; text-align: right; }
.rcard__title { font-family: var(--f-serif); font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--ink); margin: 0; }

/* 図解画像（クリーン表示）＋本文 */
.rcard__diagram { width: 100%; display: block; background: #fff; }
.rcard__body { padding: 22px 22px 24px; position: relative; }
.rcard__cap { font-size: 13px; line-height: 1.85; color: var(--ink-soft); margin: 0; }

/* 結論リボン（主役級） */
.answer-ribbon {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 16px;
  background: var(--moss); color: #fff; border-radius: var(--r-md);
  font-family: var(--f-serif); font-weight: 600; font-size: 15px;
  box-shadow: 0 4px 12px rgba(31,106,130,.22);
}
.answer-ribbon::before {
  content: "翠の答え"; flex: 0 0 auto;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em;
  background: rgba(255,255,255,.22); color: #fff; padding: 4px 8px; border-radius: 999px;
}
.rcard--flip .answer-ribbon { background: var(--terra); box-shadow: 0 4px 12px rgba(195,90,59,.22); }

/* 手書き丸囲み */
.circle-mark { position: relative; display: inline-block; padding: 0 .15em; }
.circle-mark::after {
  content: ""; position: absolute; inset: -6px -8px;
  border: 2.5px solid var(--terra-soft); border-radius: 50%; transform: rotate(-4deg); opacity: .85;
}

/* bridge を矢印つきリボンで装飾 */
.bridge--rich {
  position: relative; z-index: 1; margin-top: 44px; text-align: center;
  font-family: var(--f-serif); font-weight: 600; font-size: 18px; color: var(--moss-dark);
  background: var(--moss-tint); padding: 22px 20px 26px; border-radius: var(--r-md);
}
.bridge--rich::after {
  content: "▼"; position: absolute; left: 50%; bottom: -12px;
  transform: translateX(-50%); color: var(--moss-tint); font-size: 20px;
}
.bridge--rich .scribble { color: var(--terra); font-size: 14px; }

/* セクション末CTA（※計測配線は未実施＝見た目のみ。Lead発火は script.js 改修が要・別判断） */
.edu-cta { position: relative; z-index: 1; margin-top: 36px; text-align: center; }
.edu-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 420px; padding: 18px 24px;
  background: var(--line-brand); color: #fff;
  font-family: var(--f-sans); font-weight: 700; font-size: 17px;
  border-radius: 999px; text-decoration: none; box-shadow: 0 8px 22px rgba(6,199,85,.32);
}
.edu-cta__note { margin-top: 10px; font-size: 12px; color: var(--ink-mute); }

/* ===== ⑦ .honest：巨大数字＋権威バッジ（After） ===== */
.bignum { text-align: center; margin: 24px 0 32px; position: relative; z-index: 1; }
.bignum__value { font-family: var(--f-serif); font-weight: 700; font-size: 72px; line-height: 1; color: var(--moss-dark); letter-spacing: -.02em; }
.bignum__unit { font-size: 28px; }
.bignum__label { font-size: 13px; color: var(--ink-mute); margin-top: 8px; letter-spacing: .08em; }
.authority { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; margin-bottom: 24px; }
.authority__card { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 24px 16px; text-align: center; border-top: 3px solid var(--moss-soft); }
.authority__badge { font-family: var(--f-mono); font-weight: 600; font-size: 15px; color: var(--moss-dark); letter-spacing: .04em; margin-bottom: 6px; }
.authority__desc { font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.authority__src { display: block; text-align: center; font-size: 11px; color: var(--ink-mute); margin-bottom: 24px; }
.authority__src a { color: var(--moss); }