/* =============================================================================
 *  KT CLINIC — 下層ページの見出し（共通）
 *  2026-07-31 新規
 *
 *  下層ページの「英字 ＋ 見出し」の見た目を、このファイル1つで決める。
 *
 *      CLINIC              ← 英字（ラベル）
 *      クリニック案内        ← 見出し（明朝）
 *
 *  【なぜ1ファイルにまとめたか】
 *  それまで見出しは4通りに分かれていた。
 *    ・クリニック案内など5ページ … 英字なし／明朝 40px
 *    ・お知らせなど5ページ       … 英字 11px／ゴシック 36px
 *    ・症例                     … 英字 13px／ゴシック 28px
 *    ・ドクターズコスメ           … 英字 13px／ゴシック 28px
 *  同じ指定を各ページのCSSに書き足すと、次にどれか1つだけ直したときに
 *  また分かれてしまう。診療時間表を inc/hours.php に一本化したのと同じ理由で、
 *  **見出しの体裁はここだけで決める。** 各ページのCSSでは指定しないこと。
 *
 *  【新しいページを作るときは】
 *  マークアップをこうする。クラスは .kt-page-en と .kt-page-h1。
 *
 *      <p class="kt-page-en">Clinic</p>
 *      <h1 class="kt-page-h1">クリニック案内</h1>
 *
 *  既存ページはページごとに違うクラス名を使っているので、
 *  下の「既存ページ」の並びにそのセレクタを足してある。
 *  読み込みは functions.php で最後に行うので、各ページのCSSより後に効く。
 * ========================================================================== */

/* ===== 英字（ラベル） ==================================================== */
.kt-page-en,
/* 既存ページ */
.kt-archive-eyebrow,
.kt-doctor-eyebrow,
.kt-column-eyebrow,
.kt-case-archive .case-arch-en,
.kt-product-archive .product-arch-en {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1.6;
    color: #9C7E47;
    text-transform: uppercase;
    margin: 0 0 1.15rem;
}

/* ===== 見出し ============================================================ */
.kt-page-h1,
/* 既存ページ */
.kt-archive-title,
.kt-doctor-archive-title,
.kt-column-archive-title,
.kt-case-archive .case-arch-header h1,
.kt-product-archive .product-arch-header h1,
.kt-cln .cln-h1,
.kt-visit .vst-h1,
.kt-dcal .cal-h1,
.kt-prc .prc-h1,
.kt-trarch .arh-h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;          /* 40px */
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: #3E382F;
    margin: 0 0 1.3rem;
}

/* ===== 見出しの器：パンくずからの距離と左右の余白 =========================
 *  2026-07-31 追加。
 *
 *  それまでページごとに4通りに分かれていた。
 *  （パンくずの下端から見出しの器の上端まで）
 *    症例・ドクターズコスメ …  60px
 *    クリニック案内ほか4枚  …  64px
 *    診療内容              …  76px
 *    アーカイブ5枚          … 116px
 *  ともちんの判断で **76px** に統一。パンくずの下余白 20px ＋ ここの 56px。
 *
 *  padding は上・左右だけを指定する。**下は各ページのまま**にしておくこと。
 *  アーカイブ系は見出しのすぐ下にタブや一覧が続くので、
 *  下余白を一律にすると詰まってしまう。
 * ====================================================================== */
.kt-page-head,
/* 既存ページ */
.kt-cln .cln-head,
.kt-visit .vst-head,
.kt-dcal .cal-head,
.kt-prc .prc-head,
.kt-trarch .arh,
.kt-faq-hero,
.kt-news-hero,
.kt-campaign-hero,
.kt-doctor-archive-hero,
.kt-column-archive-hero,
.kt-case-archive .case-arch-header,
.kt-product-archive .product-arch-header {
    padding-top: 3.5rem;        /* 56px */
    padding-left: 2.5rem;       /* 40px */
    padding-right: 2.5rem;
}

/* 症例・ドクターズコスメは、見出しの器の外側にも上余白がある。
   二重になるのでここで消す。（左右と下はそのまま） */
.kt-case-archive,
.kt-product-archive {
    padding-top: 0;
}

/* ===== リード文 ==========================================================
 *  44rem / 46rem / 制限なし の3通りだったので 46rem に統一。
 *  制限が無いと、広い画面で1行が長くなりすぎる。
 * ====================================================================== */
.kt-page-lead,
/* 既存ページ */
.kt-cln .cln-sub,
.kt-visit .vst-sub,
.kt-dcal .cal-sub,
.kt-prc .prc-sub,
.kt-trarch .arh-sub,
.kt-archive-subtitle,
.kt-doctor-archive-subtitle,
.kt-column-archive-subtitle,
.kt-product-archive .product-arch-lead {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===== スマホ ============================================================
 *  1080px 以下。左揃えは各ページの器（padding や text-align）が持つので、
 *  ここでは文字の大きさだけ下げる。
 * ====================================================================== */
@media (max-width: 1080px) {
    .kt-page-h1,
    .kt-archive-title,
    .kt-doctor-archive-title,
    .kt-column-archive-title,
    .kt-case-archive .case-arch-header h1,
    .kt-product-archive .product-arch-header h1,
    .kt-cln .cln-h1,
    .kt-visit .vst-h1,
    .kt-dcal .cal-h1,
    .kt-prc .prc-h1,
    .kt-trarch .arh-h1 {
        font-size: 1.75rem;     /* 28px */
    }
    .kt-page-en,
    .kt-archive-eyebrow,
    .kt-doctor-eyebrow,
    .kt-column-eyebrow,
    .kt-case-archive .case-arch-en,
    .kt-product-archive .product-arch-en {
        margin-bottom: 0.9rem;
    }
    /* 器の余白もスマホ用に詰める。
       各ページのCSSにもスマホ用の指定が残っているが、
       このファイルが最後に読まれるのでこちらが効く。 */
    .kt-page-head,
    .kt-cln .cln-head,
    .kt-visit .vst-head,
    .kt-dcal .cal-head,
    .kt-prc .prc-head,
    .kt-trarch .arh,
    .kt-faq-hero,
    .kt-news-hero,
    .kt-campaign-hero,
    .kt-doctor-archive-hero,
    .kt-column-archive-hero,
    .kt-case-archive .case-arch-header,
    .kt-product-archive .product-arch-header {
        padding-top: 2.5rem;    /* 40px */
        padding-left: 1.25rem;  /* 20px */
        padding-right: 1.25rem;
    }
}