/* ============================================================
   金継ぎ 追補CSS  sposai-trivia.com  2026-08-27
   本体は1行も変えない。<head> の最後にこの1枚を足すだけ。
   ============================================================ */

/* ── 元栓（色を1本ずつに絞る） ───────────────────────── */
:root{
  --ink:#0f1b2d;          /* #101c2e と統合（ほぼ同じ紺が2本あった） */
  --paper:#ffffff;        /* #fafbfc と統合（見えない差の白） */
  --accent:#c2410c;       /* 橙は1本に。文字でも床4.5を満たす濃さ */
  --accent-deep:#c2410c;
  --warn:#c2410c;
  --line:#c6d0e0;         /* 罫線を白から離す（薄すぎて線が見えなかった） */
  --radius:18px;
  --radius-lg:18px;
}

/* ── 破れ: 読めない文字 ─────────────────────────────── */
.site-footer .container small,
.container > small{ color:var(--muted); }
.stat-label{ color:#c6d0e0; }
.viewpoint-points li{ color:var(--muted); }

/* ── 乱れ: 似て非なる色 ─────────────────────────────── */
.problem-thumb{ background:#fff; }
.viewpoint-points li.is-point-active{ background:#fff; }
.flow-num{ background:#c6d0e0; }
.faq-icon{ border-color:#c6d0e0; }
.deco-orange{ color:#ffb38a; }
.deco-mint{ color:#b9e7d4; }

/* ── 乱れ: 文字の段（役割ごとに揃える） ───────────────── */
/* 本文 = 14 / 16 / 表示用clamp の3段 */
p,li,dd,dt,td,th,blockquote{ font-size:14px; }
.section-lead,.statement-sub,.statement-sub-line,.cta-copy p,.cta-points li,.price-note,.problem-note,.stats-note,.profile-body p,.faq-a p,.faq-a li,.route-result p,.cta-sub,.cta-privacy{ font-size:16px; }
p .ph,.statement-text .ph,.price-value{ font-size:clamp(23px,2.66vw,34px); }

/* 見出し */
h2 .ph{ font-size:clamp(26px,3.28vw,42px); }
.profile-en{ font-size:inherit; }
.post-card-body h3,.viewpoint h3,.price-card h3,.problem-card h3,.article-card h3,.route-blog-card h3,.route-card h4{ font-size:18px; }

/* ボタン・ラベル = 14 / 16 の2段（極小文字もここで消える） */
.btn,.faq-q{ font-size:16px; }
.btn-lg{ font-size:16px; }
.price-badge,.footer-nav a,.global-nav a,.price-kicker,.price-link,.tag,.brand-tagline,.profile-social a,.route-choice,.route-choice-label,.route-blog-meta span{ font-size:14px; }

/* 補足 = 12 / 17 の2段 */
.price-value small{ font-size:12px; }

/* その他（span/div） = 14 / 16 / 56 の3段 */
.check-sheet-title,.check-row,.problem-num,.marquee-track span{ font-size:14px; }

/* ── 乱れ: 角丸を3種（999 / 18 / 6）へ ────────────────── */
.route-blog-card,.route-blog-thumb,.check-sheet,.viewpoint-icon,.viewpoint-points,.journey-caption li,.nav-toggle,.cta-panel,.journey-caption-copy{ border-radius:18px; }
.check-row i,.statement-text em::before,.nav-toggle span:not(.sr-only),.faq-icon::before,.faq-icon::after,.route-card h4::before,.deco-cross::before,.deco-cross::after{ border-radius:6px; }

/* ── 第2巡: 残った段・色・角丸 ──────────────────────── */
/* 本文の段（クラス指定に負けていた分を明示で寄せる） */
.eyebrow,.post-card-body p,.problem-card p,.flow-time,.flow-num,.route-choice-arrow,.article-card p{ font-size:14px; }
.journey-caption-copy p{ font-size:16px; }

/* 色（rgba合成で残っていた近似色を1本へ） */
.site-header{ background:rgba(255,255,255,.82); }
.journey-illust{ border-color:#c6d0e0; }
.journey-caption li{ border-color:#c6d0e0; }
.journey-caption li.is-point-active{ background:#fff; }

/* 破れ: 番号丸の地を白へ戻し、文字が床を割らないようにする */
.flow-num{ background:#fff; border-color:#c6d0e0; color:var(--muted); }

/* 角丸: 3種（999 / 18 / 6）へ。カーソルの棒は丸棒に */

/* 型紙を新たに踏まないための字間（数字ラベルに広い字間は要らない） */
.problem-num{ letter-spacing:.02em; }

/* 縦の重なり: 拡大する活性カードが親の枠を越えていた */
.journey-caption{ padding-bottom:14px; }

/* ── 第3巡: 残りの段と、飾りが本文に被る事故 ────────── */
.cta-form .btn{ font-size:16px; }

/* 縦の重なり: 視差(parallax)の移動量に上限が無く、
   スクロール位置によって図版が次の節の見出しへ乗り上げていた。
   この一枚だけ視差を止める（他の演出はそのまま）。 */
.journey-media{ transform:none !important; }


/* ============================================================
   金継ぎ 定番の型はずし（手順3）  sposai-trivia.com  2026-08-27
   AIが最初に出す型紙のうち、CSSだけで外せるものをここで外す。
   ============================================================ */

/* ── 1. スクロールでふわっと出す演出を外す（54箇所）─────────
      クラス名（.reveal / .ph）は残したまま、演出だけ無効にして
      最初から表示する。hover のときだけ transition を戻して
      「押せる物」の手触りは残す。 */
.reveal,
.article-grid > .article-card.reveal{
  opacity:1;
  transform:none;
  transition:none;
}
.reveal:hover,
.article-grid > .article-card.reveal:hover{
  transition:transform .28s var(--ease),
             box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
/* 見出しを語句単位で立ち上げる演出（.ph）も同じく最初から表示 */
.ph{
  opacity:1;
  transform:none;
  transition:none;
}

/* ── 2. グラデーション文字をやめて単色に ────────────────
      強調は太さ（800）と大きさ（56px）が既に付いている。
      色は既存パレットの #ffb38a（濃紺の地で比10超）。 */
.stat-value{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:#ffb38a;
  color:#ffb38a;
}
.stat-value small{
  -webkit-text-fill-color:#fff;
  color:#fff;
}

/* ── 3. ガラス調（背景ぼかし）をやめて不透明の面に ──────── */
.site-header{
  background:#ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ── 4. 背景の光のにじみ（ぼかした円）を外して平らな地色に ── */

/* ── 3b. ガラス調はもう1枚あった: 数字パネルの半透明＋ぼかし。
      不透明の面に戻す。地は節と同じ濃紺（新しい色を足さない）。
      パネルの輪郭は元からある1pxの白縁が受け持つ。 */
.stat{
  background:#0f1b2d;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ── 手順2の是正: 演出を外して現れた分の取りこぼし ──────────
      .reveal の opacity:0 で測れていなかった文字が出てきた。
      本文の段（14px）に寄せる。 */
.viewpoint-points li{ font-size:14px; }
.footer-brand p{ font-size:14px; }
.journey-caption li{ font-size:14px; }   /* 390pxだけ13pxに落ちていた */

/* ── 5. 「SCROLL ↓」の印を外した分、最初の画面を詰める ─────
      印は本体から削除（下の HTML）。次の節（帯）の頭が
      最初の画面で見えるように、ヒーローの下余白を詰める。 */


/* ============================================================
   金継ぎ 手順4（文面）に伴う最小のCSS  2026-08-27
   足した文の器だけ。段は本文の 14 / 16 の中に収めている。
   ============================================================ */

/* 悩みの節の最後・放置した先の一文 */
.problem-after{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}

/* ¥29,800の脇・高い安いの物差し */
.price-compare{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

/* 数字3つ並びを外したあとの帯。数字の一文だけ白で立てる */
.stats-note{ margin-top:0; }
.stats-note strong{
  display:block;
  margin:8px 0;
  color:#fff;
  font-weight:700;
}
.stats-proof{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:9px;
  margin-top:8px;
}
.stats-count{
  display:inline-block;
  min-width:3ch;
  color:#ffb38a;
  font-family:var(--font-en);
  font-size:clamp(52px,6vw,76px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.055em;
  line-height:.9;
  text-align:right;
}
.stats-count-suffix{
  color:#fff;
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
}
@media (max-width:560px){
  .stats-note strong{ margin:10px 0; }
  .stats-proof{ gap:7px; margin-top:10px; }
  .stats-count{ font-size:clamp(50px,18vw,68px); }
  .stats-count-suffix{ font-size:18px; }
}


/* ============================================================
   金継ぎ 手順5 第1段: カード格子をほどく  2026-08-27
   対象は「流れ #flow」と「FAQ #faq」の2節。
   文言・リンク・開閉の動きは1文字も変えない。
   箱（枠・角丸・影・地色）を外し、罫線と番号で並びを見せる。
   ============================================================ */

/* ── 流れ #flow: カード4枚 → 番号つきの手順 ─────────── */
.flow-grid{ gap:0; }
.flow-step{
  min-height:0;
  padding:26px 0 28px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.flow-step:not(:last-child){ border-bottom:1px solid var(--line); }

/* 活性の段だけ濃く・他を薄くする演出は、箱が無いと読みづらい。
   4段とも最初から読める状態にする（進行は左の線と番号の色が示す）。 */
.flow-grid[data-step-flow] .flow-step,
.flow-grid[data-step-flow] .flow-step.is-step-active{
  opacity:1;
  transform:none;
}
.flow-step.is-step-active{
  background:none;
  box-shadow:none;
  border-color:var(--line);
}
.flow-illust{ opacity:1; transform:none; }

/* 番号の丸を、見出しの行に合わせる */
.flow-num{ top:24px; }

/* 所要時間の帯が列いっぱいに伸びていた（grid で align-self が効かない）。
   内容の幅に戻す。 */
.flow-time{ justify-self:start; }

/* 狭い幅の取りこぼし: 図版が2列目に居座り、本文の段を半分に潰していた
   （テーマ側の @media より後ろに .flow-illust{grid-column:2} があるため
   打ち消されていた）。テーマ本来の意図どおり、図版を本文の上へ戻す。 */
@media (max-width:560px){
  .flow-illust{
    grid-column:1;
    grid-row:auto;
    order:-1;
    align-self:start;
    width:96px;
    margin:0 0 14px;
  }
}

/* ── FAQ #faq: カード5枚 → 罫線だけの一覧 ───────────── */
.faq-list{
  gap:0;
  border-top:1px solid var(--line);
}
.faq-item{
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.faq-item.is-open{ border-bottom-color:var(--line); }
.faq-q{ padding:21px 2px; }
.faq-a-inner{ padding:0 2px; }
.faq-item.is-open .faq-a-inner{ padding-bottom:22px; }


/* ============================================================
   金継ぎ 手順5 第2段: 料金をカード3枚 → 縦の比較表  2026-08-27
   文言もリンク先も変えない。中身を4つの列（プラン／料金／
   できること／申し込み）に並べ替えるだけ。
   ============================================================ */

.price-grid{
  display:block;
  width:100%;
  max-width:1000px;
  margin-inline:auto;
  transform:none;
  border-top:1px solid var(--line);
}

.price-card{
  position:relative;
  display:grid;
  /* 列幅は割合で固定する。中身の長さで決めると行ごとに列がずれ、
     3つの価格が縦に揃わなくなる（表にする意味が消える）。 */
  grid-template-columns:25% 26% minmax(0,1fr) 124px;
  align-items:start;
  column-gap:28px;
  padding:24px 14px 24px 15px;
  border:0;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.price-card:hover{
  transform:none;
  box-shadow:none;
  background:var(--tint);
  border-color:transparent;
  border-bottom-color:var(--line);
}
/* いちばん選ばれている行だけ、左に一本 */
.price-card-featured,
.price-card-featured:hover{
  border-left-color:var(--accent);
  border-bottom-color:var(--line);
  box-shadow:none;
}

/* 1列目 プラン */
.pc-name{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.price-illust{ width:34px; height:34px; margin-bottom:2px; }
.price-card h3{ margin-top:0; font-size:18px; }
.price-badge{
  position:static;
  transform:none;
  margin-top:4px;
  padding:3px 11px;
  background:var(--accent);
  box-shadow:none;
}

/* 2列目 料金（点線の仕切りは表の罫線と二重になるので外す） */
.price-value{ margin-top:0; padding-bottom:0; border-bottom:0; }
/* 「（税込・買い切り）」が語の途中で折れないように */
.price-value small{ white-space:nowrap; }
.price-compare{ margin-top:9px; }

/* 3列目 できること */
.price-list{ margin-top:2px; }

/* 4列目 申し込み */
.pc-go{ align-self:center; }
.price-link{ margin-top:0; padding-top:0; white-space:nowrap; }

/* 狭い幅では1行を縦に積む */
@media (max-width:900px){
  .price-card{
    grid-template-columns:1fr;
    row-gap:14px;
    padding:22px 10px 24px 13px;
  }
  .pc-go{ align-self:start; }
  .price-link{ white-space:normal; }
}

/* 2026-10-24: four current services, using the existing pricing treatment. */
#services .price-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  border-top:0;
}
#services .price-card {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  gap:18px;
  min-width:0;
  padding:26px 24px;
  border-top:1px solid var(--line);
}
#services .price-card:hover { border-top-color:var(--line); }
#services .pc-go { align-self:end; }
#services .price-value { line-height:1.5; overflow-wrap:anywhere; }
#services .price-value small { display:inline-block; }
#services .price-label { display:block; font-size:16px; font-family:var(--font-jp); }
#services .price-label:not(:first-child) { margin-top:12px; }
#services .price-range { display:block; font-size:clamp(20px,2vw,26px); }
@media (max-width:720px) {
  #services .price-grid { grid-template-columns:minmax(0,1fr); }
  #services .price-card { padding:24px 16px; }
}