/* ============================================================
 *  KT CLINIC — Phase 2B Header CSS
 *  共通ヘッダー（page-tabs / header / sp-menu）を A案+C案配色で上書き
 *
 *  Phase 2B / 2026-05-25
 *  - 既存 components.css の page-tabs / header / sp-menu ルールを上書き
 *  - 配色C案を適用（婦人科ピンク #E08AA0 / 皮膚科ミント #7DC9A8 / 形成・美容ゴールド #C9A96E）
 *  - フォントを A案準拠（Noto Sans JP 主体、Cormorant Garamond 廃止）
 * ============================================================ */

/* ============================================================
 *  Page Tabs（最上部の3軸切替）
 * ============================================================ */
.page-tabs {
    background: #1A1F2E;
    border-bottom: 0.5px solid #2A3142;
}
.page-tab {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.2s;
    padding: 14px 32px;
    border-bottom: 2px solid transparent;
}
.page-tab:hover {
    background: #2A3142;
    color: #fff;
}

/* アクティブ：科目色でアンダーライン＋背景を少し明るく */
.page-tab.active {
    background: #2A3142;
    color: #fff;
    font-weight: 500;
    border-bottom-color: #C9A96E;  /* デフォルト（トップページ） */
}
.page-tab.gyn.active {
    border-bottom-color: #E08AA0;
}
.page-tab.dermatology.active {
    border-bottom-color: #7DC9A8;
}
.page-tab.cosmetic.active {
    border-bottom-color: #C9A96E;
}
/* Legacy: .page-tab.beauty.active は cosmetic と同等にしておく */
.page-tab.beauty.active {
    border-bottom-color: #C9A96E;
}

@media (max-width: 768px) {
    .page-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .page-tab {
        padding: 12px 18px;
        font-size: 11px;
        white-space: nowrap;
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }
}

/* ============================================================
 *  Header
 * ============================================================ */
.header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 0.5px solid #E8EAED;
    backdrop-filter: blur(10px);
    box-shadow: none;
}
.header-inner {
    max-width: 1440px;
    padding: 18px 64px;
}

/* ロゴ：font-familyを上書き（SVGメインだが念のため） */
.header .logo {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 22px;
    letter-spacing: 0.18em;
    color: #1A1F2E;
}
.header .logo img {
    width: 140px;
    height: auto;
}

/* ============================================================
 *  Header Nav（PC）
 * ============================================================ */
.header-nav {
    gap: 32px;
    align-items: center;
}
.header-nav-item {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: #1A1F2E;
    transition: color 0.2s;
    position: relative;
}
.header-nav-item:hover {
    color: #C9A96E;
}
/* 各科目に hover で科目色 */
.header-nav-item--gyn:hover  { color: #C16A82; }   /* 婦人科：濃いめピンク */
.header-nav-item--derm:hover { color: #56AC85; }   /* 皮膚科：濃いめミント */
.header-nav-item--cos:hover  { color: #9C7E47; }   /* 形成外科・美容外科：濃いめゴールド */

/* 現在ページの科目ナビをアクティブ表示（body class で判定） */
body.page-id-gynecology  .header-nav-item--gyn,
body[class*="gynecology"] .header-nav-item--gyn   { color: #C16A82; font-weight: 500; }
body[class*="dermatology"] .header-nav-item--derm { color: #56AC85; font-weight: 500; }
body[class*="cosmetic"]    .header-nav-item--cos,
body[class*="beauty"]      .header-nav-item--cos  { color: #9C7E47; font-weight: 500; }

/* ============================================================
 *  Header Actions（WEB予約ボタン）
 * ============================================================ */
.header-actions {
    gap: 20px;
}
.header-reserve {
    background: #1A1F2E;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.12em;
    padding: 11px 24px;
    border-radius: 2px;
    transition: background 0.2s;
}
.header-reserve:hover {
    background: #2A3142;
}

/* ============================================================
 *  Header Menu Button（SP用ハンバーガー）
 * ============================================================ */
.header-menu-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: none;
    flex-direction: column;
    justify-content: space-around;
}
.header-menu-btn span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: #1A1F2E;
    border-radius: 1px;
    transition: all 0.2s;
}
@media (max-width: 768px) {
    .header-menu-btn { display: flex; }
}

/* ============================================================
 *  SP Menu
 * ============================================================ */
.sp-menu {
    background: #fff;
    border-left: 0.5px solid #E8EAED;
}
.sp-menu-inner {
    padding: 80px 32px 40px;
}
.sp-menu-list li {
    border-bottom: 0.5px solid #E8EAED;
}
.sp-menu-list a {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #1A1F2E;
    display: block;
    padding: 18px 0;
}
.sp-menu-list a:hover {
    color: #C9A96E;
}
.sp-menu-contact {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 0.5px solid #E8EAED;
}
.sp-menu-tel {
    display: block;
    text-align: center;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1A1F2E;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

/* ============================================================
 *  Body padding（固定ヘッダー分のオフセット維持）
 * ============================================================ */
body {
    padding-top: 100px; /* page-tabs (約46px) + header (約60px) */
}
@media (max-width: 768px) {
    body { padding-top: 96px; }
}