/* ==========================================
   PACE ACADEMY / 日本語タイポグラフィ調整 v2
   style.css・color-theme-override.css・diagnosis.css の
   「後に」読み込むこと
   ------------------------------------------
   英字用の巨大ディスプレイサイズは、全角文字では
   1行に収まらず変な位置で折れる（孤児行が発生する）。
   → 日本語の文字数に合わせてサイズを引き直す。
========================================== */

/* ---------- 1. 全体の改行ルール ---------- */
body {
  line-break: strict;        /* 句読点を行頭に来させない */
  overflow-wrap: break-word; /* 長い英単語・URLだけ折り返す */
}

/* ---------- 2. 見出し全体の共通設定 ---------- */
.hero-title,
.section-heading h2,
.related-heading h2,
.shoes-content h2,
.about-content h2,
.recommend-heading h2,
.quote-section blockquote,
.footer-title,
.intro-lead,
.diagnosis-hero h1,
.quiz-step legend {
  text-wrap: balance;   /* 対応ブラウザで行の長さを均等に */
  letter-spacing: 0;    /* ネガティブ字間は全角では接触の原因 */
}

/* ---------- 3. ヒーロー ----------
   「自分のペースで、」= 9文字
   コンテナ幅 850px ÷ 9文字 ≒ 92px が上限 */
.hero-title {
  font-size: clamp(2.5rem, 5.9vw, 5.7rem);
  line-height: 1.16;
  margin: 1.6rem 0 2.3rem;
}

/* ---------- 4. シューズ診断セクション ----------
   「見つけよう。」= 6文字、コンテナ 750px → 約112px 上限 */
.shoes-content h2 {
  font-size: clamp(2.5rem, 6.8vw, 6.8rem);
  line-height: 1.14;
}

/* ---------- 5. About ----------
   「走ることは、」= 6文字、実カラム幅 約490px → 約78px 上限 */
.about-content h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 1.22;
  margin: 2rem 0 3rem;
}

/* ---------- 6. Intro のリード文 ----------
   「ただ速く走るためではなく、」= 13文字 → 約54px 上限 */
.intro-lead {
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.45;
}

/* ---------- 7. 日記・関連セクションの見出し ----------
   こちらはカラムが広いため元サイズのまま。
   字間と行間のみ日本語用に調整 */
.section-heading h2,
.related-heading h2 {
  line-height: 1.1;
}

.journal-card-content h3 {
  letter-spacing: 0;
  line-height: 1.3;
}

/* ---------- 8. 名言・フッター ---------- */
.quote-section blockquote {
  line-height: 1.5;
}

.footer-title {
  line-height: 1.15;
}

/* 英字のみの項目は英字用の詰めを維持 */
.related-name {
  letter-spacing: -0.045em;
}

/* ---------- 9. 本文の行長 ---------- */
.intro-copy {
  max-width: 34em; /* 日本語は1行34字前後が読みやすい */
}

.about-content > p:not(.section-number):not(.eyebrow) {
  max-width: 34em;
}

.hero-description {
  max-width: 26em;
}

/* ---------- 10. 診断ページ（diagnosis.css の上書き） ---------- */
/* 「次の一足を、」= 6文字 → ヒーローと同じ理屈で上限を引き直す */
.diagnosis-hero h1 {
  font-size: clamp(2.5rem, 5.9vw, 5.7rem);
  line-height: 1.16;
}

/* 質問文（最長15文字前後）がクイズ列に収まるサイズへ */
.quiz-step legend {
  font-size: clamp(1.7rem, 3.2vw, 3.4rem);
  line-height: 1.3;
}

.recommend-heading h2 {
  line-height: 1.1;
}

.shoe-recommend-name {
  letter-spacing: 0;
  line-height: 1.2;
}

/* ---------- 11. モバイル ---------- */
@media (max-width: 760px) {
  /* ヒーロー: 1行6文字前後で折れ、<br> が文の区切りとして機能 */
  .hero-title {
    font-size: clamp(2.4rem, 13.5vw, 4rem);
    line-height: 1.2;
  }

  .shoes-content h2 {
    font-size: clamp(2.4rem, 13.5vw, 4rem);
    line-height: 1.2;
  }

  /* 文中の強制改行は解除して自然な折り返しに任せる */
  .hero-description br,
  .intro-copy br,
  .note-copy br,
  .shoes-copy br,
  .about-content p br {
    display: none;
  }
}

/* 超狭幅では大見出しの <br> も解除（1文字行の発生を防ぐ） */
@media (max-width: 360px) {
  .hero-title br,
  .shoes-content h2 br,
  .section-heading h2 br,
  .about-content h2 br,
  .recommend-heading h2 br {
    display: none;
  }
}
.shoe-map-heading h2 {
  font-size: clamp(2.2rem, 6vw, 6rem);
  letter-spacing: 0;
  line-height: 1.16;
  text-wrap: balance;
}