/* ─── FVデザイン微調整スタイル（/test で確定した値） ───
   front-page.php のインライン<style>から切り出し。
   ─────────────────────────────────────────── */

/* スクールロゴ - カラー表示・サイズUP・枠なし */
.section-logos__item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 140px !important;
    height: auto !important;
}
body .section-logos .section-logos__group .section-logos__item img,
html body .section-logos__item img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
}

/* ⑥ ロゴマーキー: 間隔を狭く・速度UP
   注意: 以前ここに設定していた overflow-x:auto（ドラッグスクロール対応）は、
   CSSアニメーション（transform）と同時に動作すると、ブラウザがスクロール
   位置を再計算するタイミングでアニメーションに周期的なジャンプ（ガクつき）
   が発生する原因になっていたため廃止した。現在は overflow:hidden 前提の
   完全自動アニメーションのみとする。 */
.section-logos__group {
    align-items: center !important;
    gap: 12px !important;
    animation-duration: 18s !important;
}
.section-logos__marquee:hover .section-logos__group {
    animation-play-state: paused;
}

/* ① FV上部余白を詰めてタイトルを下寄せに見せる */
.section-fv {
    padding: 60px 0 80px !important;
}
@media (max-width: 768px) {
    .section-fv {
        padding: 60px 0 30px !important;
    }
    .section-fv__content {
        padding: 60px 0 16px !important;
    }
}

/* ⑧ 「国内最大級のスクール比較サイト」フォント1.5倍・改行なし */
.fv__title-sub {
    font-size: 33px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    white-space: nowrap !important;
}
/* ① メインタイトル: サブタイトルと横幅を揃える・下余白なし */
.fv__title-main {
    max-width: 400px !important;
    margin-top: 50px !important;
    margin-bottom: 70px !important;
}
.fv__title {
    margin-bottom: 0 !important;
}
/* ② リード文: PC・SP共通で2行表示・各行nowrap */
.section-fv__lead {
    white-space: nowrap !important;
}
br.sp-br {
    display: inline !important;
}
br.pc-br {
    display: inline !important;
}
@media (max-width: 768px) {
    .fv__title-sub {
        font-size: 20px !important;
        margin-bottom: 12px !important;
        white-space: nowrap !important;
    }
    .fv__title-main {
        font-size: 32px !important;
    }
    .section-fv__lead {
        white-space: normal !important;
    }
    br.pc-br {
        display: none !important;
    }
}

/* ④ 統計ブロックを拡大 */
.section-fv__stats {
    padding: 25px 40px !important;
    gap: 32px !important;
    max-width: 640px !important;
    margin-top: 24px !important;
    align-items: center !important;
}
.section-fv__stat {
    text-align: center !important;
    flex: 1 !important;
}
.section-fv__stat-label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}
.section-fv__stat-number {
    font-size: 40px !important;
}
.section-fv__stat-unit {
    font-size: 15px !important;
}
.section-fv__stat-divider {
    height: 48px !important;
}
@media (max-width: 768px) {
    .section-fv__stats {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 90px !important;
        gap: 0 !important;
        margin-top: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .section-fv__stat {
        text-align: center !important;
        flex: 1 !important;
        padding: 0 8px !important;
    }
    .section-fv__stat-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    .section-fv__stat-number {
        font-size: 22px !important;
    }
    .section-fv__stat-unit {
        font-size: 11px !important;
    }
    .section-fv__stat-divider {
        width: 1px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
}


/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    .section-fv {
        padding: 40px 0 60px !important;
    }
    .fv__title-sub {
        font-size: 26px !important;
    }
    .fv__title-main {
        max-width: 400px !important;
    }
    .section-fv__lead {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    .section-fv__stats {
        padding: 22px 28px !important;
        gap: 20px !important;
        max-width: 100% !important;
        margin-top: 32px !important;
    }
    .section-fv__stat-number {
        font-size: 32px !important;
    }
    .section-fv__stat-label {
        font-size: 10px !important;
    }
    .section-fv__stat-divider {
        height: 44px !important;
    }
    .section-search__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .section-articles__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .section-search__grid { grid-template-columns: 1fr; }
  .section-articles__grid { grid-template-columns: 1fr; }
}

/* ============================================
   FV: 全要素の左端を整列
   ============================================ */
.section-fv__content {
    text-align: left !important;
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
}

/* サブタイトル */
.section-fv__content .fv__title-sub {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
}

/* メインタイトル（親コンテナ） */
.section-fv__content .fv__title,
.section-fv__content .fv__title-main {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* メインタイトル: 「あなたの理想が叶う」「スクールが見つかる！」の2行で必ず改行し、各行内では改行させない（PC/SP共通） */
.section-fv__content .fv__title-main > span {
    display: block;
    white-space: nowrap;
}

/* PC: 2行構成を保ったまま、幅制限で行内が折り返らないようにする */
@media (min-width: 769px) {
  .fv__title-main,
  .section-fv__content .fv__title-main {
      max-width: none !important;
      font-size: clamp(28px, 3.2vw, 44px) !important;
  }
}

/* PC: 実績ブロックの数字（10,000等）がグリッド列内で改行しないよう少し縮小（SPは対象外） */
@media (min-width: 769px) {
  .section-fv__content .section-fv__stat-number {
      font-size: 26px !important;
      white-space: nowrap !important;
  }
}

/* リード文 */
.section-fv__content .section-fv__lead {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

/* 統計ボックス: grid で横幅を一元管理 */
.section-fv__content .section-fv__stats {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
}

/* SP対応: コンテナのパディングは維持しつつ、要素間で追加インデントを発生させない（PCは元の2カラムグリッドを維持） */
@media (max-width: 768px) {
  .section-fv .container,
  .section-fv__inner {
      display: block !important;
  }
  .section-fv__content {
      max-width: 100% !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
  }
  .section-fv__content .section-fv__stats {
      max-width: 100% !important;
  }
}

/* ============================================
   FV: 光学的整列補正（optical alignment）
   技術的整列済みの上に、視覚的な凸凹を微調整
   ============================================ */

/* サブタイトル */
.section-fv__content .fv__title-sub {
    margin-left: 0px !important;
}

/* メインタイトル h1: 0 に戻し、各行で個別に制御 */
.section-fv__content .fv__title-main {
    margin-left: 0 !important;
}
/* 1行目「あなたの理想が叶う」*/
.section-fv__content .fv__title-line1 {
    margin-left: 0px !important;
    width: fit-content !important;
}
/* 2行目「スクールが見つかる！」*/
.section-fv__content .fv__title-line2 {
    margin-left: -5px !important;
}

/* リード文: 改行なし・SP は縮小で収める */
.section-fv__content .section-fv__lead {
    margin-left: 1px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* 統計ボックス: 左右1.5px拡張・内側padding */
.section-fv__content .section-fv__stats {
    margin-left: -1.5px !important;
    margin-right: -1.5px !important;
    width: calc(100% + 3px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    column-gap: 32px !important;
}
/* 統計アイテム */
.section-fv__content .section-fv__stat {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* padding */
.section-fv__content {
    padding: 10px !important;
}

/* SP: 補正値をSP用に調整 */
@media (max-width: 768px) {
  .section-fv__content .fv__title-main {
      margin-left: -3px !important;
  }
  /* リード文: SP は sp-br で2行 × 11px でコンテナ内に収める */
  .section-fv__content .section-fv__lead {
      font-size: 11px !important;
  }
  /* stats SP: padding 縮小・divider 間隔を詰める */
  .section-fv__content .section-fv__stats {
      padding: 12px 6px !important;
      column-gap: 4px !important;
  }
  /* stat アイテム内側 padding を除去して横幅を最大化 */
  .section-fv__content .section-fv__stat {
      padding: 0 !important;
  }
  /* stat-number: 画面幅に応じて clamp 縮小 */
  .section-fv__content .section-fv__stat-number {
      font-size: clamp(14px, 4.2vw, 18px) !important;
  }
  .section-fv__content .section-fv__stat-unit {
      font-size: 9px !important;
  }
  .section-fv__content .section-fv__stat-label {
      font-size: 12px !important;
  }

}

/* ─── /test-move の FVデザイン調整パネルで確定した値を反映 ─── */
@media (max-width: 768px) {
  .section-fv { padding-top: 24px !important; padding-bottom: 30px !important; }
  .section-fv__content { padding-left: 16px !important; padding-right: 16px !important; margin-left: 0px !important; }
  .fv__title-sub { font-size: 20px !important; }
  .section-fv__content .fv__title-main { font-size: 32px !important; margin-left: -3px !important; }
  .section-fv__content .section-fv__lead { font-size: 13.5px !important; margin-left: 0px !important; }
  .section-fv__content .section-fv__stat-number { font-size: 22px !important; }
  .section-fv__content .section-fv__stat-label { font-size: 13px !important; }
  .section-fv__content .section-fv__stat-unit { font-size: 9.75px !important; }
  .section-fv__content .section-fv__stats { padding: 12px 6px !important; margin-top: 25px !important; margin-left: 0px !important; width: 100% !important; max-width: 100% !important; }
}