/* ══════════════════════════════════════════════════════════════════════
   kintsugi-repair.css
   金継ぎ診断（2026-08-29）の修理CSS。2026-09-03 に本体へ適用。
   出典: Antigravity_website/Claude成果物/2026-08-29_金継ぎ診断_自社サイト/
         03_修理CSS_kintsugi-repair.css
   このファイルは必ず既存CSS（css/style.css 等・ページ内 <style>）の
   「後ろ」で読み込むこと。読み込み順を変えると効かなくなる。
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 金継ぎ追補スタイル（naoshi planner 自動生成・2026-08-29）══
   元の規則と同じセレクタ・同じmediaで後から上書きする。:root の変数は触らない。
   直した行: 35・手で見る行: 24 */
/* [font] 役割「本文」の 20.8px を近いサイズ 19.2px へ寄せる（25%以内・一番使われている値へ） */
.concept-subtitle { font-size: 19.2px; }
/* [font] 役割「本文」の 20px を近いサイズ 19.2px へ寄せる（25%以内・一番使われている値へ） */
.services-package-price strong { font-size: 19.2px; }
/* [font] 役割「本文」の 16.8px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.showcase-sub { font-size: 17.6px; }
/* [font] 役割「本文」の 16px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.services-packages-intro { font-size: 17.6px; }
/* [font] 役割「本文」の 15.4px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.services-package-summary { font-size: 17.6px; }
/* [font] 役割「本文」の 15.2px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.service-description { font-size: 17.6px; }
/* [font] 役割「本文」の 14.4px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.copyright { font-size: 17.6px; }
/* [font] 役割「本文」の 13.4px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ） */
.services-package-outcome { font-size: 13.6px; }
/* [font] 役割「本文」の 12.8px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ） */
.service-subtitle-en { font-size: 13.6px; }
/* [font] 役割「本文」の 12px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ） */
.services-package-outcome strong { font-size: 13.6px; }
/* [font] 役割「本文」の 11.5px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-packages-kicker { font-size: 13.6px; }
/* [font] 役割「本文」の 11.5px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-package-components li { font-size: 13.6px; }
/* [font] 役割「本文」の 11.2px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-package-number { font-size: 13.6px; }
/* [font] 役割「本文」の 11.2px を近いサイズ 13.6px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-package-price span { font-size: 13.6px; }
/* [font] 役割「本文」の 9.9px を近いサイズ 12px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-package-components span { font-size: 12px; }
/* [font] 役割「ボタン」の 15.2px を近いサイズ 14.4px へ寄せる（25%以内・一番使われている値へ） */
.btn-large { font-size: 14.4px; }
/* [font] 役割「ボタン」の 13.6px を近いサイズ 14.4px へ寄せる（25%以内・一番使われている値へ） */
.service-number { font-size: 14.4px; }
/* [font] 役割「ボタン」の 13.6px を近いサイズ 14.4px へ寄せる（25%以内・一番使われている値へ） */
.footer-nav-list a { font-size: 14.4px; }
/* [font] 役割「ボタン」の 12.5px を近いサイズ 14.4px へ寄せる（25%以内・一番使われている値へ） */
.services-package-link { font-size: 14.4px; }
/* [font] 役割「ボタン」の 11.5px を近いサイズ 12px へ寄せる（25%以内・一番使われている値へ・極小） */
.sc-card .sc-tag { font-size: 12px; }
/* [font] 役割「h3」の 25.6px を近いサイズ 29.6px へ寄せる（25%以内・一番使われている値へ） */
.sc-card-featured h3 { font-size: 29.6px; }
/* [font] 役割「h3」の 20.8px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.service-title { font-size: 17.6px; }
/* [font] 役割「h3」の 19.2px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.faq-question { font-size: 17.6px; }
/* [font] 役割「h3」の 17.9px を近いサイズ 17.6px へ寄せる（25%以内・一番使われている値へ） */
.sc-card h3 { font-size: 17.6px; }
/* [font] 役割「補足」の 10.4px を近いサイズ 12px へ寄せる（25%以内・一番使われている値へ・極小） */
.services-package-tag { font-size: 12px; }
/* [radius] 角丸 12px を 10px へ（6種→3） */
.podcast-mini-embed { border-radius: 10px; }
/* [color] 似て非なる色 #121212 → #030303 */
.service-card { background-color: #030303; }
/* [color] 似て非なる色 #05070A → #030303 */
.sc-card { background-color: #030303; }
/* [color] 似て非なる色 #171313 → #030303 */
.services-package-visual { background-color: #030303; }
/* [color] 似て非なる色 #282828 → #333333 */
.podcast-mini-embed { background-color: #333333; }
/* [color] 似て非なる色 #06080C → #030303 */
.sc-card .sc-tag { background-color: #030303; }
/* [color] 似て非なる色 #FF5A67 → #FF6B6B */
.services-packages-lead span { color: #FF6B6B; }
/* [color] 似て非なる色 #141414 → #030303 */
.podcast-mini-toggle { background-color: #030303; }
/* [z] z-index 1000 → 100（層は1/10/100） */
.header { z-index: 100; }
/* [z] z-index 999 → 100（層は1/10/100） */
.podcast-mini-player { z-index: 100; }

/* ══════════════════════════════════════════════════════════════
   金継ぎ 手仕事（自動処方が当てない領分・2026-08-29）
   新色は発明せず、サイトが既に持っている色だけで直す。
   ══════════════════════════════════════════════════════════════ */

/* ── 破れ①: 白文字 × ブランド赤の地（比4.17／床4.5）
   地だけを、サイトが既に hover で使っている濃い赤へ深める。
   通常時 #C1121F・ホバー #A4161A（--color-secondary）で段差も残る。 */
.btn-primary { background: #C1121F; box-shadow: 0 4px 15px rgba(193, 18, 31, 0.3); }
.btn-primary:hover { background: #A4161A; }
.service-number { background: #C1121F; }
.nav-link-cta { background: #C1121F; }
.nav-link-cta:hover { background: #A4161A; }

/* ── 破れ②: ブランド赤の文字 × 白地（比4.17／床4.5）
   文字側を同じ濃い赤へ。地は白のまま。 */
.news-date { color: #C1121F; }
.faq-answer a { color: #C1121F; }
.contact-cta .btn-primary { background: #ffffff; color: #C1121F; }

/* ── 乱れ①: 角丸 6種 → 3種（8 / 30 / 999 に寄せる） */
.services-package-components li { border-radius: 8px; }
.podcast-mini-embed, .podcast-mini-embed iframe { border-radius: 8px; }
.services-package-card { border-radius: 30px; }
.hamburger span { border-radius: 999px; }

/* ── 乱れ②: 似て非なる色（節の地は残し、面の色だけ寄せる）
   #1A1A1A → #030303（カードの地）／#F9F9F9 → #FFFFFF（FAQの地）
   #0C0C0C・#080808・#0A0A0F は節の地（セクションの拍）なので統合しない。 */
.faq-item { background-color: #FFFFFF; }
/* .production-features li は「白いカードに濃い文字」。機械が寄せたがった #1A1A1A は
   地ではなく文字の色なので、地として塗らない（見送り・理由を診断書へ）。 */

/* ── 乱れ③: 文字サイズの段数
   h3 は「カードの題」1段にまとめる（自動処方の17.6pxは小さすぎたので20.8pxへ戻す）。 */
.service-title, .faq-question, .sc-card h3, .sc-card-featured h3,
.services-package-body h3 { font-size: 20.8px; }

/* 節の見出しは1本の clamp に統一する（節ごとの上書きをやめる） */
.section-title,
.introduction .section-title,
.production-style .section-title,
.kobe-statement .section-title { font-size: clamp(2rem, 5vw, 3rem); }

/* 本文は 13.6 / 17.6 / 24（見出し級）の3段に寄せる */
.copyright { font-size: 13.6px; }
.footer-description { font-size: 13.6px; }
.services-package-components span { font-size: 13.6px; }
.concept-subtitle { font-size: 17.6px; }
.faq-answer { font-size: 17.6px; }
.kobe-text p { font-size: 17.6px; }
.introduction-text p { font-size: 17.6px; }

/* ── 破れ③: 縦の重なり
   背景画像が 20s の拡大アニメで親の枠を19〜22px越え、次の見出しに被る。
   飾りの層なので、親側で収める。 */
.introduction-bg { overflow: hidden; }


/* ── 手仕事その2: light-theme 側の !important を越える
   このサイトはスクロールで body.light-theme が付く。明色側の規則が !important 付きなので、
   同じ強さで上書きしないと修理が効かない。 */
body.light-theme .contact-cta .btn-primary { color: #C1121F !important; }
body.light-theme .faq-answer a, .faq-answer a { color: #C1121F !important; }
body.light-theme .news-date, .news-date { color: #C1121F !important; }

/* ── 破れ④: 配色の transition が5秒（color / background とも）。
   その5秒のあいだ、文字と地が中間色になって読めない時間が生まれている。
   飾りの気持ちよさは 0.6秒で十分に残る。 */
.section-title, .production-features li, .faq-item, .faq-answer,
.introduction, .concept, .services, .kobe-statement, .production-style {
  transition-duration: 0.6s !important;
}

/* ── 手仕事その3: 残った段数と角丸を詰める（768/390で残っていた分） */
/* h3 は「カードの題」1段へ。お知らせの見出しも同じ役割。 */
.news-title, .news-title a { font-size: 20.8px; }
/* 本文は 13.6 / 17.6 / 見出し級 の3段へ */
.contact-cta-text { font-size: 17.6px; }
.concept-catchphrase { font-size: 17.6px; }
.hero-text { font-size: 17.6px; }
/* 角丸は 8 / 30 / 999 の3種へ */
.services-package-outcome { border-radius: 8px; }
#podcast-mini-embed iframe, .podcast-mini-embed iframe { border-radius: 8px; }
/* 白地に置いたブランド赤の文字（比4.17）を、濃い赤へ */
.contact-cta .btn-primary { color: #C1121F !important; }

/* ── 手仕事その4: 白地に近い面のブランド赤の文字（.btn-secondary 比4.17）
   文字と枠線を、サイトが既に持っている濃い赤へ。地は触らない。 */
.btn-secondary { color: #C1121F; border-color: #C1121F; }
.btn-secondary:hover { color: #A4161A; border-color: #A4161A; }