/* ============================================================
 * Kingfin JP — Common Styles
 * 全ページ共通の reset / 変数 / ヘッダー / フッター / モバイルナビ
 * ============================================================ */

/* リセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* CSS 変数（Trust Bright パレット） */
:root {
  /* アクセント */
  --y:    #EAB308;
  --y10:  rgba(234,179,8,.12);
  --y20:  rgba(234,179,8,.24);
  --bl:   #2563EB;
  --bl10: rgba(37,99,235,.10);
  --bl20: rgba(37,99,235,.22);
  --grn:  #10B981;
  --grn10:rgba(16,185,129,.10);
  --grn20:rgba(16,185,129,.22);
  --pur:  #7C3AED;
  --pur10:rgba(124,58,237,.10);
  --pur20:rgba(124,58,237,.22);
  --red:  #DC2626;
  --red10:rgba(220,38,38,.10);
  --red20:rgba(220,38,38,.22);
  /* ライトサーフェス */
  --bg:   #F0F6FC;
  --dk:   #FFFFFF;
  --dk2:  #F8FAFC;
  --ink:  #0F172A;
  --gray: #64748B;
  --gray2:#475569;
  --bd:   rgba(15,23,42,.10);
  --bd2:  rgba(15,23,42,.06);
}

/* ベース */
body {
  font-family: 'Inter', -apple-system, 'Hiragino Sans', 'Meiryo', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ヘッダー */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: 68px; display: flex; align-items: center;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--bd);
  backdrop-filter: blur(14px);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px;
}
.logo { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.logo-star { color: var(--bl); font-size: 20px; }
.logo-text { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  padding: 7px 12px; font-size: 13px; font-weight: 500;
  color: var(--gray2); border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav a:hover, .nav a.active { color: var(--ink); background: rgba(37,99,235,.06); }
.nav a.active { color: var(--bl); }
.hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 言語トグル (JP / EN) */
.lang-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--bd); border-radius: 7px;
  overflow: hidden; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; margin-right: 2px;
}
.lang-toggle a {
  padding: 6px 11px; color: var(--gray2);
  transition: background .2s, color .2s; line-height: 1;
}
.lang-toggle a.lang-active { background: var(--bl); color: #fff; }
.lang-toggle a:not(.lang-active):hover { color: var(--ink); background: rgba(37,99,235,.08); }
.mnav-lang {
  display: flex; gap: 0; margin-bottom: 8px;
  border: 1px solid var(--bd); border-radius: 8px; overflow: hidden;
  width: fit-content;
}
.mnav-lang a {
  padding: 10px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .04em; border-bottom: none !important; color: var(--gray2) !important;
}
.mnav-lang a.lang-active { background: var(--bl); color: #fff !important; }

.hdr-login {
  padding: 7px 18px; font-size: 13px; font-weight: 600; color: var(--ink);
  background: transparent; border: 1.5px solid var(--bd);
  border-radius: 7px; transition: border-color .2s, color .2s;
}
.hdr-login:hover { border-color: var(--bl); color: var(--bl); }
.hdr-signup {
  padding: 7px 18px; font-size: 13px; font-weight: 700;
  background: var(--bl); color: #fff; border-radius: 7px;
  transition: background .2s;
}
.hdr-signup:hover { background: #1d4ed8; }

/* ハンバーガー */
.ham {
  display: none; flex-direction: column; gap: 5px; padding: 6px;
  margin-left: auto; background: none; border: none; cursor: pointer;
}
.ham span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* モバイルナビ */
.mnav {
  position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.98); z-index: 998;
  padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform .32s ease;
  overflow-y: auto;
}
.mnav.open { transform: translateX(0); }
.mnav a {
  display: block; padding: 14px 0; font-size: 16px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--bd2);
}
.mnav-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.btn-y-full {
  display: block; text-align: center; padding: 13px;
  background: var(--bl); color: #fff; font-weight: 700; border-radius: 8px;
}
.btn-ghost-full {
  display: block; text-align: center; padding: 13px;
  border: 1.5px solid var(--bd); color: var(--ink); font-weight: 600; border-radius: 8px;
}

/* フッター */
.footer { border-top: 1px solid var(--bd); padding: 40px 0; background: var(--dk2); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.footer-logo { display: flex; align-items: center; gap: 7px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 12px; color: var(--gray); transition: color .2s; }
.footer-links a:hover { color: var(--bl); }
.footer-copy { font-size: 11px; color: var(--gray); }

/* レスポンシブ */
@media (max-width: 768px) {
  .nav, .hdr-right .hdr-login, .hdr-right .hdr-signup { display: none; }
  .hdr-right .lang-toggle { display: none; }
  .ham { display: flex; }
}

/* ============================================================
 * 日本語テキストの改行最適化
 * ・カタカナ・英単語の途中切れを防止
 * ・見出しは文節単位で改行（word-break: auto-phrase, Chrome 119+）
 * ・本文は自然な改行を許可しつつ単語の途中切れを抑制
 * ============================================================ */

/* ベース: 日本語ページ全体に line-break: strict を適用 */
html[lang="ja"] body {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 見出し・タイトル系: 文節単位で自然に改行 */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6,
html[lang="ja"] .page-hero h1,
html[lang="ja"] .step-guide-title,
html[lang="ja"] .step-card h3,
html[lang="ja"] .cat-toc-title,
html[lang="ja"] .cat-toc-name,
html[lang="ja"] .article-card h2,
html[lang="ja"] .article-card h3,
html[lang="ja"] .cta-banner h3,
html[lang="ja"] .hero h1,
html[lang="ja"] .hero-title,
html[lang="ja"] .section-title,
html[lang="ja"] .card-title,
html[lang="ja"] .model-card h3,
html[lang="ja"] .feature-card h3,
html[lang="ja"] .feature-title,
html[lang="ja"] .faq-q {
  word-break: auto-phrase;  /* 文節単位で改行（モダンブラウザ） */
  line-break: strict;
  overflow-wrap: break-word;
}

/* auto-phrase 未対応ブラウザ向けフォールバック: カタカナ・英単語の途中切れを防止 */
@supports not (word-break: auto-phrase) {
  html[lang="ja"] h1,
  html[lang="ja"] h2,
  html[lang="ja"] h3,
  html[lang="ja"] h4,
  html[lang="ja"] .page-hero h1,
  html[lang="ja"] .step-guide-title,
  html[lang="ja"] .step-card h3,
  html[lang="ja"] .cat-toc-title,
  html[lang="ja"] .article-card h2,
  html[lang="ja"] .article-card h3,
  html[lang="ja"] .cta-banner h3,
  html[lang="ja"] .section-title,
  html[lang="ja"] .model-card h3,
  html[lang="ja"] .feature-card h3,
  html[lang="ja"] .feature-title,
  html[lang="ja"] .faq-q {
    word-break: keep-all;   /* 単語の途中で切らない */
    overflow-wrap: break-word;
  }
}

/* 本文・段落: 文節単位の改行 + カタカナ語の途中切れ防止 */
html[lang="ja"] p,
html[lang="ja"] li,
html[lang="ja"] td,
html[lang="ja"] dd,
html[lang="ja"] .step-card p,
html[lang="ja"] .article-card p,
html[lang="ja"] .step-guide-sub,
html[lang="ja"] .cat-toc-sub,
html[lang="ja"] .page-hero p,
html[lang="ja"] .hero-sub,
html[lang="ja"] .section-sub,
html[lang="ja"] .faq-a p,
html[lang="ja"] .model-detail-lead,
html[lang="ja"] .model-detail-block p,
html[lang="ja"] .model-detail-block li {
  word-break: auto-phrase;       /* Chrome 119+ / Safari 17+ : 文節単位で改行 */
  line-break: strict;            /* 句読点 (、。) を行頭に置かない (禁則処理) */
  overflow-wrap: anywhere;       /* 極端に長い英単語のみ折り返し許可 */
  text-wrap: pretty;             /* 段落末の孤立語を抑制 */
  hanging-punctuation: allow-end;/* 句読点を行末にぶら下げる */
}

/* auto-phrase 未対応ブラウザ (Firefox 等) でのフォールバック:
   カタカナ・英単語の途中切れを keep-all で防止 */
@supports not (word-break: auto-phrase) {
  html[lang="ja"] p,
  html[lang="ja"] li,
  html[lang="ja"] td,
  html[lang="ja"] dd,
  html[lang="ja"] .model-detail-lead,
  html[lang="ja"] .model-detail-block p,
  html[lang="ja"] .model-detail-block li,
  html[lang="ja"] .page-hero p,
  html[lang="ja"] .hero-sub,
  html[lang="ja"] .section-sub {
    word-break: keep-all;        /* CJK内では1文字単位で折り返し可、英単語は途中で切らない */
    overflow-wrap: anywhere;     /* 長すぎる単語のみ最後の手段で折り返し */
    line-break: strict;
  }
}

/* ===== ユーティリティ：途中で改行させたくない語句に付与 =====
   使い方: <span class="nb">アフィリエイト<wbr>プログラム</span>
   - inline-block で1単位として扱い、白スペース折り返し禁止
   - 但しコンテナを超えた場合は wbr の位置で安全に折り返し */
.nb {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
}
.nb-strong {
  /* どんなに長くても絶対に切らない（短い固有名詞向け） */
  white-space: nowrap;
  word-break: keep-all;
}

/* ボタン・チップ・ラベル系: 短い文字列は1行で表示、長い場合は文節単位で折り返し */
html[lang="ja"] .btn-y-full,
html[lang="ja"] .btn-ghost-full,
html[lang="ja"] .hdr-login,
html[lang="ja"] .hdr-signup,
html[lang="ja"] .cta-btn,
html[lang="ja"] .btn-primary,
html[lang="ja"] .btn-secondary,
html[lang="ja"] .step-link,
html[lang="ja"] .read-link,
html[lang="ja"] .filter-btn,
html[lang="ja"] .step-card-label,
html[lang="ja"] .article-cat,
html[lang="ja"] .hero-badge,
html[lang="ja"] .nav a,
html[lang="ja"] .mnav a {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

/* はじめての方へ ナビリンク */
.nav-start {
  color: var(--gray2) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.nav-start::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grn);
  flex-shrink: 0;
}
.mnav-start {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.mnav-start::before {
  content: '● ';
  color: var(--grn);
  font-size: 8px;
}

/* ================================================
   AEO一問一答ブロック
   ================================================ */
.aeo-qa-block {
  background: #EFF6FF;
  border-left: 4px solid var(--bl);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  border-radius: 0 8px 8px 0;
}
.aeo-qa-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}
.aeo-qa-list {
  margin: 0;
  padding: 0;
}
.aeo-qa-item {
  margin-bottom: 0.85rem;
}
.aeo-qa-item:last-child {
  margin-bottom: 0;
}
.aeo-qa-question {
  font-weight: 700;
  font-size: 0.95rem;
  color: #222;
  margin-bottom: 0.2rem;
}
.aeo-qa-answer {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.6;
  margin: 0;
}