/* ============================================================
   TimeWaver8 — トップページ（index.html）専用レイヤー
   2026-07-27 改訂：ダークのティール／ゴールドを廃止し、
   process.html と同じ「紙 × ポップ原色」へ統一した。

   配色の唯一のルール
   ── 色は「4領域」のためだけに使う。
      道具（TW・ヒーリー・メナード・AI）には色をつけない。
      4領域と道具は一対一で対応しないため、色をつけると嘘になる。
   ── それ以外のアクセントは赤（--c1）1色のみ。
   ── 玄関は静かに、process.html で5色が咲く。段差をつくる。
   ============================================================ */

.renewal-framework {
  /* 4領域の色（process.html の c1〜c5 と同一値） */
  --rf-body:          #E63329; /* 体   BODY */
  --rf-heart:         #FF4D9D; /* 心   HEART */
  --rf-environment:   #189FD4; /* 環境 ENVIRONMENT */
  --rf-consciousness: #FFC400; /* 意識 CONSCIOUSNESS */
  --rf-whole:         #2C3BC8; /* 全体 WHOLE（中心のみ） */

  /* 体の面塗りだけ、紙文字でコントラスト比4.5を満たす深さに調整。
     文字・罫・ボタンの赤は --c1（#E63329）のまま。 */
  --rf-body-fill:     #D92B1F;

  --rf-paper:  #FFFDF6;
  --rf-paper-2:#F5EDDC;
  --rf-ink:    #16130F;
  --rf-muted:  #55504a;
  --rf-line:   rgba(22, 19, 15, 0.22);
  --rf-hair:   rgba(22, 19, 15, 0.12);

  --c1: #E63329; /* 唯一のアクセント（ラベル・罫・アクション） */

  --rf-display: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

.renewal-framework main { overflow: hidden; }

.renewal-framework h1,
.renewal-framework h2,
.renewal-framework h3 {
  font-family: var(--rf-display);
  color: var(--rf-ink);
}
.renewal-framework h2 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.renewal-framework h3 { font-weight: 700; }
.renewal-framework .section-label {
  color: var(--c1);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.rf-kicker,
.rf-domain-en,
.rf-cycle-num,
.rf-feature-link > span {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
}

/* ------------------------------------------------------------
   01 ヒーロー
   4つの点＝4領域。まだ意味は明かさず、下の2×2で回収する。
   ------------------------------------------------------------ */
.rf-hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 150px 0 110px;
  background: var(--rf-paper);
}
.rf-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 860px; }
.rf-kicker { color: var(--c1); font-size: 11px; font-weight: 700; margin-bottom: 28px; }
.rf-hero h1 {
  font-size: clamp(42px, 8.4vw, 88px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 0.01em;
  margin-bottom: 30px;
}
.rf-hero-lead {
  font-family: var(--rf-display);
  font-size: clamp(18px, 2.9vw, 27px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}
.rf-hero-copy { max-width: 660px; margin: 0 auto; color: var(--rf-muted); }
.rf-hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

.rf-hero-orbit {
  position: absolute;
  width: min(78vw, 660px);
  aspect-ratio: 1;
  border: 1px solid var(--rf-hair);
  border-radius: 50%;
  z-index: 1;
}
.rf-hero-orbit span {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--rf-ink);
}
.rf-hero-orbit span:nth-child(1) { top: -8px;   left: 50%; margin-left: -8px; background: var(--rf-body); }
.rf-hero-orbit span:nth-child(2) { top: 50%;    right: -8px; margin-top: -8px; background: var(--rf-heart); }
.rf-hero-orbit span:nth-child(3) { bottom: -8px; left: 50%; margin-left: -8px; background: var(--rf-environment); }
.rf-hero-orbit span:nth-child(4) { top: 50%;    left: -8px; margin-top: -8px; background: var(--rf-consciousness); }

/* ------------------------------------------------------------
   共通セクション
   ------------------------------------------------------------ */
.rf-place,
.rf-depth,
.rf-role { padding: 120px 0; border-top: 2px solid var(--rf-ink); }
.rf-place { background: var(--rf-paper-2); text-align: center; }
.rf-place-inner { max-width: 760px; }
.rf-place p:not(.section-label) { color: var(--rf-muted); margin-bottom: 24px; }
.rf-section-lead { max-width: 740px; margin: 0 auto 56px; color: var(--rf-muted); }

/* ------------------------------------------------------------
   03 4領域 ─ このページの見せ場
   隙間ゼロの2×2。カードを4枚並べるのではなく、
   1枚の面を4色に分けたものとして見せる（＝箱ではなく窓）。
   モバイルでも1列に落とさない。落とすと「4つで1枚」が崩れるため。
   ------------------------------------------------------------ */
.rf-domains { padding: 140px 0; text-align: center; background: var(--rf-paper); }

.rf-domain-orbit {
  width: min(100%, 820px);
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  position: relative;
  border: 3px solid var(--rf-ink);
}
.rf-domain {
  min-height: 230px;
  padding: 46px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: var(--rf-ink);
}
.rf-domain--heart         { background: var(--rf-heart); }
.rf-domain--body          { background: var(--rf-body-fill); color: var(--rf-paper); }
.rf-domain--environment   { background: var(--rf-environment); }
.rf-domain--consciousness { background: var(--rf-consciousness); }

.rf-domain-en { font-size: 10px; font-weight: 700; opacity: 0.75; }
.rf-domain h3 {
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  margin: 10px 0 12px;
  color: inherit;
}
.rf-domain p { font-size: 14px; line-height: 1.85; color: inherit; opacity: 0.88; }

/* 中心には何も置かない。
   4色が直に触れ合う交点そのものが「1枚を4色に分けた」ことの証明なので、
   そこを図形で塞ぐと、レイアウトが言えていることを弱い言葉で説明し直すことになる。 */

.rf-domain-note {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 34px;
  text-align: left;
  border-top: 2px solid var(--rf-ink);
  border-bottom: 2px solid var(--rf-ink);
}
.rf-domain-note p { color: var(--rf-muted); }
.rf-domain-note strong {
  display: block;
  font-family: var(--rf-display);
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.75;
  margin: 12px 0;
  color: var(--rf-ink);
}
.rf-domain-note .link-arrow { margin-top: 18px; display: inline-block; }

/* ------------------------------------------------------------
   04 5つのステップ ─ ここでは色を使わない
   5色は process.html の担当。玄関では墨だけで通す。
   ------------------------------------------------------------ */
.rf-cycle { padding: 140px 0; background: var(--rf-paper-2); }
.rf-cycle-foundation {
  max-width: 900px;
  margin: 0 auto 56px;
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px 44px;
  align-items: center;
  border: 2px solid var(--rf-ink);
  background: var(--rf-paper);
}
.rf-cycle-foundation span,
.rf-trust-card > span {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c1);
}
.rf-cycle-foundation strong {
  display: block;
  margin-top: 10px;
  font-family: var(--rf-display);
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 700;
  line-height: 1.6;
}
.rf-cycle-foundation p { color: var(--rf-muted); }

/* 土台の4つだけは色を出す（4領域なので） */
.rf-cycle-foundation ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--rf-ink);
}
.rf-cycle-foundation li {
  padding: 12px 6px;
  text-align: center;
  font-family: var(--rf-display);
  font-weight: 700;
  color: var(--rf-ink);
}
.rf-cycle-foundation li:nth-child(1) { background: var(--rf-body-fill); color: var(--rf-paper); } /* 体 */
.rf-cycle-foundation li:nth-child(2) { background: var(--rf-heart); }        /* 心 */
.rf-cycle-foundation li:nth-child(3) { background: var(--rf-environment); }   /* 環境 */
.rf-cycle-foundation li:nth-child(4) { background: var(--rf-consciousness); } /* 意識 */

.rf-cycle-list { max-width: 830px; margin: 0 auto; position: relative; list-style: none; padding: 0; }
.rf-cycle-list::before {
  content: '';
  position: absolute;
  left: 31px; top: 45px; bottom: 45px;
  width: 2px;
  background: var(--rf-ink);
  opacity: 0.16;
}
.rf-cycle-list li { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 24px 0; position: relative; }
.rf-cycle-num {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rf-paper);
  border: 2px solid var(--rf-ink);
  color: var(--rf-ink);
  font-weight: 700;
  z-index: 1;
}
.rf-cycle-list h3 { font-size: 23px; margin: 3px 0 6px; }
.rf-cycle-list p { color: var(--rf-muted); }

.rf-cycle-support {
  max-width: 830px;
  margin: 36px auto 0;
  padding: 22px 26px;
  border-left: 4px solid var(--c1);
  background: var(--rf-paper);
}
.rf-cycle-support strong { font-family: var(--rf-display); font-size: 18px; font-weight: 700; }
.rf-cycle-support p { margin-top: 5px; color: var(--rf-muted); font-size: 14px; }

.rf-cycle-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 56px; }
.rf-feature-link {
  padding: 32px;
  border: 2px solid var(--rf-ink);
  background: var(--rf-paper);
  transition: transform 0.18s, box-shadow 0.18s;
}
.rf-feature-link:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--c1); }
.rf-feature-link > span { display: block; font-size: 9px; font-weight: 700; color: var(--c1); }
.rf-feature-link strong { display: block; font-family: var(--rf-display); font-size: 21px; font-weight: 700; margin: 8px 0; }
.rf-feature-link small { color: var(--rf-muted); }

/* ------------------------------------------------------------
   05 整える道具 ─ 色をつけない（4領域と一対一ではないため）
   ------------------------------------------------------------ */
.rf-tools { padding: 140px 0; background: var(--rf-paper); }
.rf-tools-note {
  max-width: 740px;
  margin: -34px auto 44px;
  text-align: center;
  color: var(--rf-muted);
  font-size: 13px;
}
.rf-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  border: 3px solid var(--rf-ink);
}
.rf-tool {
  min-height: 250px;
  padding: 32px 28px;
  background: var(--rf-paper);
  border-right: 2px solid var(--rf-ink);
  border-bottom: 2px solid var(--rf-ink);
  transition: background 0.18s;
}
.rf-tools-grid > .rf-tool:nth-child(2n) { border-right: 0; }
.rf-tools-grid > .rf-tool:nth-last-child(-n+2) { border-bottom: 0; }
a.rf-tool:hover { background: var(--rf-paper-2); }
.rf-tool > span { font-family: var(--font-display); color: var(--c1); font-weight: 700; font-size: 12px; }
.rf-tool h3 { font-size: 21px; margin: 14px 0 12px; }
.rf-tool p { color: var(--rf-muted); font-size: 14px; }

/* ------------------------------------------------------------
   06 書いている人間
   ------------------------------------------------------------ */
.rf-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.rf-split-copy p { color: var(--rf-muted); margin-bottom: 20px; }
.rf-role blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--c1);
  background: var(--rf-paper-2);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.9;
  color: var(--rf-ink);
}

/* ------------------------------------------------------------
   08 セッション
   ------------------------------------------------------------ */
.rf-session { padding: 130px 0; text-align: center; border-top: 2px solid var(--rf-ink); background: var(--rf-paper-2); }
.rf-session-inner { max-width: 760px; }
.rf-session p:not(.section-label) { color: var(--rf-muted); max-width: 640px; margin: 0 auto; }
.rf-session strong { color: var(--rf-ink); }

/* ------------------------------------------------------------
   画像スロット（Codex が <img> に差し替えたら効かなくなる）
   ------------------------------------------------------------ */
.img-slot {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border: 2px dashed var(--rf-line);
  background: rgba(22, 19, 15, 0.04);
  color: var(--rf-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.8;
}

.rf-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0.28;
  pointer-events: none;
}
.rf-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.rf-hero-media .img-slot { height: 100%; border: 0; background: none; }

.rf-domain-illust { margin: 0 auto 44px; max-width: 520px; }
.rf-domain-illust img { width: 100%; height: auto; display: block; }

.rf-steps-illust { margin: 0 auto 44px; max-width: 900px; }
.rf-steps-illust img { width: 100%; height: auto; display: block; }
.rf-steps-illust .img-slot { min-height: 140px; }

.rf-tool-illust {
  margin: 0 0 18px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(22, 19, 15, 0.04);
}
.rf-tool-illust img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rf-tool-illust .img-slot { min-height: 0; height: 100%; border: 0; }

.rf-writer-photo {
  margin: 26px 0 0;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid var(--rf-ink);
}
.rf-writer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-writer-photo .img-slot { min-height: 0; height: 100%; border: 0; }

/* ------------------------------------------------------------
   お客様の声の注記
   ------------------------------------------------------------ */
.renewal-framework .voice-note {
  margin-top: 20px;
  color: var(--rf-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.rf-split-copy .link-arrow + .link-arrow { margin-left: 24px; }

/* ------------------------------------------------------------
   アクセシビリティの床
   ------------------------------------------------------------ */
.renewal-framework a:focus-visible,
.renewal-framework button:focus-visible {
  outline: 3px solid var(--c1);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .renewal-framework * { animation: none !important; transition: none !important; }
  .rf-feature-link:hover { transform: none; }
}

/* ------------------------------------------------------------
   レスポンシブ
   2×2 は崩さない。1列にすると「1枚を4色に分けた」読みが壊れるため。
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .rf-hero { min-height: auto; padding: 140px 0 96px; }
  .rf-hero-orbit { width: 116vw; }
  .rf-place, .rf-depth, .rf-role, .rf-domains, .rf-cycle, .rf-tools, .rf-session { padding: 88px 0; }
  .rf-domain { min-height: 168px; padding: 26px 20px; }
  .rf-domain h3 { font-size: 26px; margin: 6px 0 8px; }
  .rf-domain p { font-size: 12.5px; line-height: 1.75; }
  .rf-domain-note { padding: 26px 22px; }
  .rf-split { grid-template-columns: 1fr; gap: 28px; }
  .rf-cycle-foundation { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .rf-cycle-foundation ul { grid-column: auto; }
  .rf-cycle-links { grid-template-columns: 1fr; }
  .rf-tools-grid { grid-template-columns: 1fr; }
  .rf-tool { min-height: auto; border-right: 0; }
  .rf-tools-grid > .rf-tool:last-child { border-bottom: 0; }
  .img-slot { min-height: 140px; font-size: 11px; }
  .rf-writer-photo { max-width: 100%; }
  .rf-split-copy .link-arrow + .link-arrow { margin-left: 0; display: block; margin-top: 12px; }
}

@media (max-width: 430px) {
  .rf-hero h1 { letter-spacing: 0; }
  .rf-domain { min-height: 148px; padding: 20px 15px; }
  .rf-domain h3 { font-size: 21px; }
  .rf-domain p { font-size: 11.5px; }
  .rf-domain-en { font-size: 9px; }
  .rf-cycle-list li { grid-template-columns: 50px 1fr; gap: 18px; }
  .rf-cycle-num { width: 50px; height: 50px; }
  .rf-cycle-list::before { left: 24px; }
}

/* ------------------------------------------------------------
   ボタン
   style.css の .btn-primary::before（ホバー時に色面をスライドさせる演出）を止める。
   あれはラベルが <span> で包まれている前提の実装で、素のテキストだと
   擬似要素が文字より上に描かれてラベルが読めなくなる。
   ポスター的な平面とも合わないので、色の反転＋影が縮む形に置き換える。
   ------------------------------------------------------------ */
.renewal-framework .btn-primary::before,
.renewal-framework .btn-secondary::before { content: none; }

.renewal-framework .btn-primary,
.renewal-framework .btn-secondary {
  font-family: var(--rf-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 3px solid var(--rf-ink);
  border-radius: 0;
  background: var(--rf-paper);
  color: var(--rf-ink);
  box-shadow: 6px 6px 0 var(--rf-ink);
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
}

/* 主ボタン：赤へ反転。面塗り用の深い赤を使う（紙文字でコントラスト4.78） */
.renewal-framework .btn-primary:hover,
.renewal-framework .btn-primary:focus-visible {
  background: var(--rf-body-fill);
  color: var(--rf-paper);
  border-color: var(--rf-ink);
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(3px, 3px);
}

/* 副ボタン：墨へ反転 */
.renewal-framework .btn-secondary:hover,
.renewal-framework .btn-secondary:focus-visible {
  background: var(--rf-ink);
  color: var(--rf-paper);
  border-color: var(--rf-ink);
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(3px, 3px);
}

/* LINEボタンはブランド色を維持。押し込みだけ同じ挙動にする */
.renewal-framework .btn-line,
.renewal-framework .btn-line:hover,
.renewal-framework .btn-line:focus-visible {
  color: #fff !important;
  border-color: var(--rf-ink) !important;
}
.renewal-framework .btn-line { background: #06C755 !important; }
.renewal-framework .btn-line:hover,
.renewal-framework .btn-line:focus-visible {
  background: #04833A !important;
  box-shadow: 2px 2px 0 var(--rf-ink) !important;
}

/* テキストリンクもティール由来の罫が残っていたので、紙面に合わせる */
.renewal-framework .link-arrow {
  font-family: var(--rf-display);
  font-weight: 700;
  color: var(--rf-ink);
  border-bottom: 2px solid var(--rf-line);
}
.renewal-framework .link-arrow:hover,
.renewal-framework .link-arrow:focus-visible {
  color: var(--c1);
  border-color: var(--c1);
}

@media (prefers-reduced-motion: reduce) {
  .renewal-framework .btn-primary:hover,
  .renewal-framework .btn-secondary:hover { transform: none; }
}

/* ------------------------------------------------------------
   トップへ戻るボタン
   既定は透明地＋1pxのティール罫で、紙の上ではほぼ見えなかった。
   他のボタンと同じ作法（角ゼロ・3pxの墨罫・硬い影・押し込み）に揃えて、
   赤の面塗りで出す。赤はこのページで唯一のアクション色なので用途が一致する。
   ------------------------------------------------------------ */
.renewal-framework #back-to-top {
  width: 56px;
  height: 56px;
  bottom: 28px;
  right: 28px;
  border-radius: 0;
  background: var(--rf-body-fill);
  color: var(--rf-paper);
  border: 3px solid var(--rf-ink);
  box-shadow: 5px 5px 0 var(--rf-ink);
  transition: opacity .3s ease, visibility .3s ease,
              transform .14s, background .14s, box-shadow .14s;
}
.renewal-framework #back-to-top svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.renewal-framework #back-to-top.visible { transform: translateY(0); }
.renewal-framework #back-to-top:hover,
.renewal-framework #back-to-top:focus-visible {
  background: var(--rf-ink);
  color: var(--rf-paper);
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(3px, 3px);
}

@media (max-width: 768px) {
  .renewal-framework #back-to-top {
    width: 48px; height: 48px;
    bottom: 18px; right: 18px;
    box-shadow: 4px 4px 0 var(--rf-ink);
  }
  .renewal-framework #back-to-top svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .renewal-framework #back-to-top:hover { transform: none; }
}

/* ------------------------------------------------------------
   ナビ内のボタン（既存CSSの衝突を解く）

   サイト内検索：warhol-taro-theme が「紙地・墨文字」を指定しているが、
     #site-nav a:not(.nav-cta) { color: var(--wt-paper) !important; }
   が後から白を !important で当てるため、紙地に白文字で消えていた。
   .btn-header-search は .nav-cta を持たないので :not() をすり抜ける。

   LINE登録：style.css は緑（#06C755）だが warhol-taro-theme が黄へ上書きし、
   文字色だけ style.css の #fff !important が残るため「黄地に白文字」になっていた。
   ブランド色の緑へ戻す。
   ------------------------------------------------------------ */
.renewal-framework #site-nav .btn-header-search,
.renewal-framework .header-actions .btn-header-search {
  background: var(--rf-paper) !important;
  color: var(--rf-ink) !important;
  border: 2px solid var(--rf-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  padding: 8px 14px;
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
}
.renewal-framework #site-nav .btn-header-search:hover,
.renewal-framework #site-nav .btn-header-search:focus-visible {
  background: var(--rf-ink) !important;
  color: var(--rf-paper) !important;
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

.renewal-framework #site-nav .nav-cta--line,
.renewal-framework .nav-cta--line {
  background: #06C755 !important;
  color: #fff !important;
  border: 2px solid var(--rf-ink) !important;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  transition: background .14s, box-shadow .14s, transform .14s;
}
.renewal-framework #site-nav .nav-cta--line:hover,
.renewal-framework #site-nav .nav-cta--line:focus-visible {
  background: #04833A !important;
  opacity: 1 !important;
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
  .renewal-framework #site-nav .btn-header-search:hover,
  .renewal-framework #site-nav .nav-cta--line:hover { transform: none; }
}

/* ------------------------------------------------------------
   ロゴ
   既定は 13px の明朝ライト＋小さな上付きの「8」で、本文と見分けがつかなかった。
   このページの語彙（丸ゴシックの太字・角ゼロ・2〜3pxの墨罫・硬い影・平らな原色）
   だけで組み直す。新しい要素は足さない。
   「8」は判子として独立させ、単体でも印になる形にしておく。
   ------------------------------------------------------------ */
.renewal-framework .logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--rf-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--rf-ink);
  transition: none;
}
.renewal-framework .logo:hover { opacity: 1; }

.renewal-framework .logo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-left: 8px;
  vertical-align: baseline;
  font-family: var(--rf-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--rf-paper);
  background: var(--rf-body-fill);
  border: 2px solid var(--rf-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--rf-ink);
  transition: background .14s, box-shadow .14s, transform .14s;
}
.renewal-framework .logo:hover span,
.renewal-framework .logo:focus-visible span {
  background: var(--rf-ink);
  box-shadow: 1px 1px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

@media (max-width: 768px) {
  .renewal-framework .logo { font-size: 15px; }
  .renewal-framework .logo span {
    width: 22px; height: 22px; font-size: 14px;
    margin-left: 6px; box-shadow: 2px 2px 0 var(--rf-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .renewal-framework .logo:hover span { transform: none; }
}

/* ------------------------------------------------------------
   このページの要点 ／ AIに渡す
   ページを読まずにAIへ投げる人が増える前提の区画。
   要点は本文として表示する（人にもクローラーにも見えるようにするため）。
   ------------------------------------------------------------ */
.renewal-framework .ai-digest {
  padding: 90px 0;
  background: var(--rf-paper);
  border-top: 3px solid var(--rf-ink);
}
.ai-digest-inner { max-width: 880px; }
.renewal-framework .ai-digest h2 { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 24px; }

.renewal-framework .ai-digest ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border: 3px solid var(--rf-ink);
}
.renewal-framework .ai-digest li {
  padding: 16px 20px 16px 46px;
  position: relative;
  line-height: 1.9;
  border-bottom: 2px solid var(--rf-hair);
}
.renewal-framework .ai-digest li:last-child { border-bottom: 0; }
.renewal-framework .ai-digest li::before {
  content: '';
  position: absolute;
  left: 20px; top: 26px;
  width: 10px; height: 10px;
  background: var(--c1);
  border: 2px solid var(--rf-ink);
}

.ai-digest-action {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--rf-paper-2);
  border: 3px solid var(--rf-ink);
}
.ai-digest-action p {
  flex: 1 1 300px;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--rf-muted);
}
.renewal-framework .ai-digest-action .btn-secondary { flex-shrink: 0; cursor: pointer; }

@media (max-width: 768px) {
  .renewal-framework .ai-digest { padding: 70px 0; }
  .ai-digest-action { gap: 16px; padding: 20px; }
  .renewal-framework .ai-digest-action .btn-secondary { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   コピー完了トースト（導線つき）
   主たる利用はスマホ。「コピーしました」だけでは次の操作が分からないので、
   貼り付け先へのリンクを同じトーストに置く。押す時間が要るため表示も長め。
   ------------------------------------------------------------ */
.toast--action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: min(92vw, 460px);
  padding: 12px 14px 12px 18px;
  background: var(--rf-ink);
  color: var(--rf-paper);
  border: 2px solid var(--rf-ink);
  box-shadow: 5px 5px 0 var(--rf-body-fill);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
}
.toast--action a {
  flex-shrink: 0;
  margin-left: auto;
  padding: 8px 14px;
  background: var(--rf-paper);
  color: var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: 2px solid var(--rf-ink);
}
.toast--action a:active { background: var(--rf-consciousness); }

@media (max-width: 480px) {
  .toast--action { bottom: 84px; gap: 10px; }
  .toast--action a { margin-left: 0; width: 100%; text-align: center; }
}