@charset "UTF-8";

/* ==========================================================================
   タイポグラフィ統一システム v3（案A：コンパクト版）
   作成日: 2026-05-01

   【v3での変更点】
   ・本文サイズを 16px → 15px に縮小（一般的なコーポレートサイト基準）
   ・見出しサイズも全体的にひと回りコンパクトに調整
   ・行間を 1.8 → 1.7 に変更してより詰まった見た目に
   ・全体的に洗練された印象になるよう調整

   【読み込み順序】
   1. top_school.css（リセット・ベース）
   2. top_style.css（既存スタイル）
   3. typography-unify.css ← このファイル（最後に読み込む）

   ========================================================================== */


/* --------------------------------------------------------------------------
   1. デザイントークン（CSS変数）- コンパクト版
   -------------------------------------------------------------------------- */
:root {
  /* フォントサイズ：8段階のスケール（v2より全体的に縮小） */
  --fs-hero:  2rem;        /* 32px - ヒーロー大見出し（v2: 40px） */
  --fs-xxl:   1.75rem;     /* 28px - セクション大見出し（v2: 32px） */
  --fs-xl:    1.25rem;     /* 20px - 中見出し（v2: 24px） */
  --fs-lg:    1.125rem;    /* 18px - 小見出し・強調（v2: 20px） */
  --fs-md:    0.9375rem;   /* 15px - 本文（v2: 16px） */
  --fs-sm:    0.875rem;    /* 14px - 補助テキスト（v2: 15px） */
  --fs-xs:    0.8125rem;   /* 13px - 注釈 */
  --fs-xxs:   0.75rem;     /* 12px - コピーライト等 */

  /* 行間（v2より詰めた値） */
  --lh-tight: 1.4;
  --lh-snug:  1.5;
  --lh-base:  1.7;         /* 本文用（v2: 1.8） */

  /* 字間 */
  --ls-base:    0.04em;
  --ls-heading: 0.05em;

  /* フォントウェイト */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
}


/* --------------------------------------------------------------------------
   2. #main のフォントサイズ補正（最重要）
   -------------------------------------------------------------------------- */
#main {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}


/* --------------------------------------------------------------------------
   3. 見出しの統一
   -------------------------------------------------------------------------- */
#main h1,
#main .h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

#main h2,
#main .h2,
.mod-article h2 {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

#main h3,
#main .h3,
.mod-article h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

#main h4 {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

#main h5,
#main h6 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}


/* --------------------------------------------------------------------------
   4. 採用エリア（interview-section）の見出し
   -------------------------------------------------------------------------- */
#main .section-title,
#main h2.section-title,
.mod-article .section-title {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

#main .content-body .section-title:not(:first-child),
#main .content-body h2.section-title:not(:first-child) {
  font-size: var(--fs-xl);
  margin-top: 40px;
  background: transparent;
  padding: 0 0 16px 0;
}

#main .color-blue {
  color: #00A3E0;
}


/* --------------------------------------------------------------------------
   5. 本文要素の統一
   -------------------------------------------------------------------------- */
#main p,
#main li,
#main dd,
#main dt {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

#main .content-body p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  margin-bottom: 1em;
}

#main small,
#main figcaption,
#main .note,
#main .caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}


/* --------------------------------------------------------------------------
   6. セクション見出しの統一（BEM版）
   -------------------------------------------------------------------------- */
.section-heading__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.section-heading__title {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

.section-heading__desc {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   7. ニュース（お知らせ）セクション
   -------------------------------------------------------------------------- */
.news__date {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.news__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}

.news__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.news__body p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   8. キャンペーンセクション
   -------------------------------------------------------------------------- */
.campaigns__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  font-weight: var(--fw-bold);
}

.campaigns__title {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

.campaigns__counter {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.campaigns__counter span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.campaign-slide__category {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  font-weight: var(--fw-bold);
}

.campaign-slide__visual-title {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

.campaign-slide__price-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.campaign-slide__price {
  font-size: 2rem; /* 32px - 価格は強調のため大きめ */
  line-height: 1.1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.campaign-slide__price sub {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.campaign-slide__price-note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.campaign-slide__limit {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.campaign-slide__cta-text,
.campaign-slide__body p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   9. 「選ばれる4つの理由」セクション
   -------------------------------------------------------------------------- */
.reason__num {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.reason__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

.reason__desc {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   10. プランカードセクション
   -------------------------------------------------------------------------- */
.plans__tab {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.plan-card__badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}

.plan-card__name {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

.plan-card__duration {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.plan-card__fit {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.plan-card__price-label {
  font-size: var(--fs-xs);
}

.plan-card__price {
  font-size: var(--fs-xl);
  line-height: 1.2;
  font-weight: var(--fw-bold);
}
.plan-card__price sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}

.plan-card__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}


/* --------------------------------------------------------------------------
   11. FAQ（よくある質問）
   -------------------------------------------------------------------------- */
.faq__question-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.faq__question::before {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.faq__question::after {
  font-size: var(--fs-lg);
}

.faq__answer p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   12. アクセスセクション
   -------------------------------------------------------------------------- */
.access__info-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}

.access__info-text {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.access__info-text--tel {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.access__method-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.access__method-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}


/* --------------------------------------------------------------------------
   13. ボタン統一
   -------------------------------------------------------------------------- */
#main .btn {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}

#main .btn--primary,
#main .btn--full {
  font-size: var(--fs-md);
}

#main .btn-toggle,
#main .btn-toggle span {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}


/* --------------------------------------------------------------------------
   14. フッター・固定CTA
   -------------------------------------------------------------------------- */
.footer__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.footer__info {
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.footer__links a,
.footer__lang {
  font-size: var(--fs-xs);
}

.footer__copy {
  font-size: var(--fs-xxs);
}

.float-cta__btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}


/* --------------------------------------------------------------------------
   15. テーブル
   -------------------------------------------------------------------------- */
#main table,
#main th,
#main td {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}


/* --------------------------------------------------------------------------
   16. ユーティリティクラスの統一
   -------------------------------------------------------------------------- */
#main .lrg  { font-size: var(--fs-lg); }
#main .tax  { font-size: var(--fs-sm); }
#main .small { font-size: var(--fs-sm); }


/* --------------------------------------------------------------------------
   17. レスポンシブ調整（スマホ：768px以下）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-hero: 1.625rem;    /* 26px */
    --fs-xxl:  1.375rem;    /* 22px */
    --fs-xl:   1.125rem;    /* 18px */
    --fs-lg:   1rem;        /* 16px */
    --fs-md:   0.875rem;    /* 14px */
  }

  #main .section-title {
    font-size: 1.25rem; /* 20px */
    padding: 20px 16px;
  }

  .campaign-slide__price {
    font-size: 1.625rem; /* 26px */
  }

  /* iOS自動ズーム防止 */
  input, textarea, select {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   18. PC大画面（1024px以上）の微調整
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .section-heading__title,
  .campaigns__title {
    font-size: 2rem; /* 32px */
  }

  #main .section-title {
    font-size: 2rem; /* 32px */
  }
}