/* ============================================================
 *  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;  /* デフォルト（トップページ） */
}
/* 2026-07-27 3軸カラー（婦人科ピンク／皮膚科ミント）をやめ、ゴールドに統一。
   サイト全体をゴールドに寄せたため、ここだけ科ごとに色が変わると浮く。
   components.css の背景色指定（.page-tab.gyn.active{background:#D4A5A5} など）も
   合わせて打ち消す。 */
.page-tab.gyn.active,
.page-tab.dermatology.active,
.page-tab.cosmetic.active,
.page-tab.beauty.active {
    background: #2A3142;
    border-bottom-color: #C9A96E;
}

/* ============================================================
 *  上部タブはスマホだけ。PCではグローバルナビと役割が重なるため出さない。
 *  タブを消すぶんヘッダーを最上部へ。実際の位置は header.php の
 *  スクリプトがタブの高さを測って合わせる（下記はJS無効時の既定値）。
 * ============================================================ */
@media (min-width: 769px) {
    .page-tabs { display: none; }
    .header { top: 0; }
}

/* 2026-08-08 タブを横幅で等分する（ともちん指示）。
   「トップ」を外して3つになったので、左寄せ＋横スクロールをやめ、
   1つずつが同じ幅を取る形にした。flex:1 1 0 なので、
   将来タブが増減しても自動で等分され、数字を直す必要はない。 */
.page-tab {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}

@media (max-width: 768px) {
    .page-tabs {
        flex-wrap: nowrap;
    }
    .page-tab {
        padding: 12px 6px;
        font-size: 11px;
        white-space: nowrap;
        letter-spacing: 0.05em;
    }
}

/* とても狭い画面（iPhone SEの旧型など320px）だけ、字と字間を詰める。
   「形成外科・美容外科」が9文字あり、11px・字間.05em のままだと
   3等分した幅（107px）に収まらず、はみ出す。実測して決めた値。 */
@media (max-width: 359px) {
    .page-tab {
        padding: 12px 3px;
        font-size: 10px;
        letter-spacing: 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;
    /* components.css が flex（横1列）にしているのを打ち消す。
       2026-08-05 ロゴを上・メニューを下の2段にしたため、中身は縦に積む。
       1段目・2段目それぞれの中で横に並べる。 */
    display: block;
}

/* ============================================================
 *  ヘッダーの2段組み
 *
 *  1段目：ロゴ（左）　…　電話番号・WEB予約（右）
 *  2段目：メニュー（中央）
 *
 *  2026-08-05 ロゴを上・メニューを下の2段に。
 *  2026-08-08 ロゴを中央から左へ（ともちん決定）。あわせて電話番号を追加。
 *
 *  【なぜメニューだけ中央なのか】
 *  1段目は左にロゴ（240px）、右に電話＋WEB予約（約270px）で、
 *  ほぼ同じ重さのものが両端に1つずつ乗っている＝1段目じたいが左右対称。
 *  だから2段目を中央に置くと、1段目の重心と縦が通る。
 *  メニューを左に寄せると、2段目の右側だけが大きく空き、
 *  その真上に電話番号とWEB予約という重いものが乗って上下がちぐはぐになる。
 *  項目が増減しても左右に均等に伸びる、という利点もある（今後1つ増える予定）。
 *
 *  【スマホは1段のまま】
 *  2段にしても縦が伸びるだけで、メニューは開かないと見えない。
 *  1段目だけを使い、ロゴ左・ハンバーガー右にする。
 * ============================================================ */
.header-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* ロゴ左・右側ひとまとまり。PC・スマホ共通 */
}
.header-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.header-row2 {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* ============================================================
 *  電話番号（PCのみ）
 *
 *  番号そのものは header.php がサイト設定から読む。ここには書かない。
 *  スマホでは出さない。画面下の固定バー（.sp-cta）に電話予約があり、
 *  ヘッダーにも置くと同じものが二重になるため。
 * ============================================================ */
.header-tel {
    display: none;                    /* 既定は非表示。PCだけ出す（下の @media） */
    align-items: center;
    gap: 9px;
    color: #1A1F2E;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}
.header-tel:hover { opacity: .7; }
.header-tel-ic { width: 18px; height: 18px; flex: none; color: var(--gold); }
.header-tel-l {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    letter-spacing: .1em;
    line-height: 1;
    color: var(--gold-deep);
    margin-bottom: 3px;
}
.header-tel-n {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.1;
}
@media (min-width: 769px) {
    .header-tel { display: flex; }
}

/* ロゴ：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 {
    /* 2026-08-05 140px → 240px（ともちん決定）。
       ロゴの縦横比は 5:1 なので、240px幅＝高さ48px。

       【高さとの関係】
       1段目の高さは「ロゴの高さ」と「WEB予約ボタンの高さ（40px）」の
       大きいほうで決まる（下の .header-row1 の min-height）。
       200pxまではボタンのほうが高いのでヘッダーは変わらないが、
       240pxではロゴが8px勝つので、ヘッダーも8px高くなる（114→122px）。
       ここを変えるときはヘッダーの高さも動く、と覚えておくこと。

       ロゴはSVGなので、大きくしても粗くならない。
       スマホは下の @media で160pxに戻している（画面幅の都合）。 */
    width: 240px;
    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; }

/* ============================================================
 *  ドロップダウン（PC）　2026-07-31 追加
 *
 *  管理画面のメニューで一段下げた項目がある親にだけ付く。
 *  子が無ければ従来どおりのただのリンクなので、他の項目には影響しない。
 *  全幅のメガメニューではなく、項目の下に出る素直なドロップダウン。
 *  JavaScriptは使わず :hover と :focus-within だけで開く。
 * ============================================================ */
.header-nav-has {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* 親リンクとドロップダウンのあいだにすき間があるとマウスが外れてしまう。
   親の下に余白を持たせて、そこを通って降りられるようにする。 */
.header-nav-has > .header-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 0;
    margin: -12px 0;
}
.header-nav-caret {
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.25s;
    opacity: 0.6;
    flex: none;
}
.header-nav-has:hover .header-nav-caret,
.header-nav-has:focus-within .header-nav-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.header-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 21rem;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #ECE6DA;
    box-shadow: 0 12px 24px -16px rgba(62, 56, 47, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 60;
}
.header-nav-has:hover .header-drop,
.header-nav-has:focus-within .header-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.header-drop-i {
    display: block;
    padding: 15px 26px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #1A1F2E;
    transition: background 0.2s, color 0.2s;
}
.header-drop-i + .header-drop-i {
    border-top: 1px solid #ECE6DA;
}
.header-drop-i:hover {
    background: #FCFAF6;
    color: #9C7E47;
}
.header-drop-i:focus-visible {
    outline: 2px solid #9C7E47;
    outline-offset: -2px;
}
/* 一言。管理画面の「説明」欄が空なら、この行ごと出力されない */
.header-drop-d {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #6E665B;
}

/* 画面の端で切れないように寄せる。左右どちらの端でも中身が読める */
.header-nav > .header-nav-has:last-child .header-drop,
.header-nav > .header-nav-has:nth-last-child(2) .header-drop {
    left: auto;
    right: 0;
    transform: translate(0, -6px);
}
.header-nav > .header-nav-has:last-child:hover .header-drop,
.header-nav > .header-nav-has:last-child:focus-within .header-drop,
.header-nav > .header-nav-has:nth-last-child(2):hover .header-drop,
.header-nav > .header-nav-has:nth-last-child(2):focus-within .header-drop {
    transform: translate(0, 0);
}

/* ============================================================
 *  Header Actions（WEB予約ボタン）
 * ============================================================ */
.header-actions {
    gap: 20px;
}
.header-reserve {
    /* 2026-08-05 紺（#1A1F2E）→ ゴールド（ともちん指示）。
       色は var(--gold) を使う。数値を直に書かないこと。
       サイトのゴールドは footer.css の :root が持っていて（#B89A5E）、
       トップのヒーローの「WEB予約」ボタンも同じ変数を見ている。
       直に書くと、色を変えたときにヘッダーだけ取り残される。 */
    background: var(--gold);
    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: var(--gold-deep);
}

/* ============================================================
 *  Header Menu Button（ハンバーガー）
 *
 *  【このボタンの体裁を持つのはこのファイルだけ】
 *  2026-08-05 まで components.css にも同じものが書かれていて、幅・高さ・
 *  線の間隔が食い違っていた。片方だけ直す事故が実際に起きたので、
 *  components.css 側は削除した。ここを直せば全ページに効く。
 *
 *  2026-08-08 スマホ専用ではなくなった。メニューが横に収まらない幅では
 *  PCでもこのボタンに切り替わる（下の「ナビの切り替え」を参照）。
 *  見た目の指定は幅に関係なく常に読ませ、出す・出さないだけを切り替える。
 * ============================================================ */
/* ハンバーガー。ボタン自体は44px角（タップ領域）。
   その中に三本線（22px×3本・6px間隔＝高さ15px）と文字を縦に積む。

   2026-08-05 三本線の下に「メニュー」の文字を足した（ともちん決定・案A）。
   三本線だけだと押せるものだと気づかない方がいるため。

   文字を足すにあたり、線は .header-menu-lines でくくっている。
   以前は button の直下に span が3つ並ぶだけだったので、文字の span を
   足すと :nth-child の番号がずれ、文字まで「線」として描かれてしまう。

   中身の高さは 15px → 28px になるが 44px の枠に収まるので、
   **ヘッダーの高さは変わらない**（実測 73px のまま）。 */
.header-menu-btn {
    /* 出す・出さないは下の「ナビの切り替え」だけが決める。ここは見た目のみ。 */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.header-menu-btn .header-menu-lines {
    position: relative;
    width: 22px;
    height: 15px;
    flex: 0 0 auto;
}
.header-menu-btn .header-menu-lines span {
    position: absolute;
    left: 0;
    width: 22px;
    height: 1.5px;
    background: #3E382F;
    border-radius: 1px;
    transition: top .25s, transform .25s, opacity .2s;
}
.header-menu-btn .header-menu-lines span:nth-child(1) { top: 0; }
.header-menu-btn .header-menu-lines span:nth-child(2) { top: 6.75px; }
.header-menu-btn .header-menu-lines span:nth-child(3) { top: 13.5px; }
/* 開いているときは × に。文字は「メニュー」のまま変えない（案A）。
   開いた瞬間にメニューが画面を覆うので、×印だけで閉じられることは伝わる。
   文字が入れ替わると、その一瞬だけ視線がボタンに戻ってしまう。 */
.header-menu-btn.active .header-menu-lines span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.header-menu-btn.active .header-menu-lines span:nth-child(2) { opacity: 0; }
.header-menu-btn.active .header-menu-lines span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }

/* 文字。9px より大きくすると「メニュー」の横幅がボタン（44px）を超える。
   実測：9px → 38.8px ／ 10px → 43.1px ／ 11px → 47.4px（はみ出す）。 */
.header-menu-btn .header-menu-txt {
    margin-top: 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 9px;
    letter-spacing: .06em;
    line-height: 1;
    color: #3E382F;
    white-space: nowrap;
}

/* ============================================================
 *  ナビの切り替え（メニュー ⇄ ハンバーガー）　2026-08-08
 *
 *  【なぜ幅の数字で切り替えないのか】
 *  メニュー8項目の横幅は841px。左右64pxの余白を足すと969px必要で、
 *  それを下回るとメニューが右に切れる。だが**項目を1つ増やすたびに
 *  必要な幅が変わる**（「症例」なら1028px、「ドクターズコスメ」なら1112px）。
 *  数字を書くと、メニューを増やしたときにここも直す約束事が生まれ、
 *  忘れると「狭い画面でだけ切れる」という気づきにくい壊れ方をする。
 *
 *  そこで assets/js/main.js が**メニューの実際の幅を測って**、
 *  収まらなければ <html> に .nav-compact を付ける。項目が増減しても
 *  ここを直す必要はない。
 *
 *  @media の1120px は、JavaScriptが動かないときの保険。
 *  8項目（969px必要）はもちろん、9項目まではだいたいこれで足りる。
 *  **この2つは対になっている。片方だけ直さないこと。**
 * ============================================================ */
.nav-compact .header-nav,
.nav-compact .header-row2   { display: none; }
.nav-compact .header-menu-btn { display: flex; }

@media (max-width: 1120px) {
    .header-nav,
    .header-row2   { display: none; }
    .header-menu-btn { display: flex; }
}

/* ドロップインのメニュー（.sp-menu）は、開いているときだけ出す。
   2026-08-08 まで components.css に「769px以上では出さない」という
   指定があり、PCの幅でハンバーガーを押しても何も開かなかった。
   幅で決めるのをやめ、開いているかどうかだけで決める（components.css 側は削除）。 */
.sp-menu,
#spMenu { display: none; }
.sp-menu.active, .sp-menu.is-open,
#spMenu.active, #spMenu.is-open { display: block; }
@media (max-width: 768px) {
    /* 2026-07-27 ここでPC用の余白（padding:18px 64px）を上書きしている。
       components.css 側にスマホ用の指定があるが、このファイルが後に読まれるため
       PC用の64pxがスマホにも効き、ロゴが右へずれていた。 */
    .header-inner { padding: 14px 20px; }
    .header .logo img { width: 160px; }
    .header .logo { margin: 0; line-height: 0; }

    /* 2026-07-27 スマホはヘッダーのWEB予約を出さない。
       画面下に固定バー（.sp-cta）を置くため、ここでは不要。 */
    .header-reserve { display: none; }

}
}

/* ============================================================
 *  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 > li > 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 > li > a:hover {
    color: #C9A96E;
}

/* ============================================================
 *  SP Menu：アコーディオン　2026-07-31 追加
 *
 *  子を持つ項目だけ、行全体をタップで開閉する。
 *  親はページに移動しない。親ページへは子の1つ目（「クリニック案内」）から入る。
 *  背景色は敷かず、罫線とインデントだけで階層を示す。
 * ============================================================ */
.sp-menu-accbtn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: #1A1F2E;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.sp-menu-accbtn:focus-visible {
    outline: 2px solid #9C7E47;
    outline-offset: 2px;
}
.sp-menu-caret {
    margin-left: auto;
    width: 8px;
    height: 8px;
    flex: none;
    border-right: 1.2px solid #9AA0AE;
    border-bottom: 1.2px solid #9AA0AE;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s;
}
.sp-menu-acc.is-open .sp-menu-caret {
    transform: rotate(-135deg) translate(-3px, -3px);
}

/* 閉じている状態。JavaScriptが動かない環境では is-open が付かないため、
   その場合に隠れたままにならないよう .js-acc が付いたときだけ閉じる。 */
.sp-menu-list.js-acc .sp-menu-accbody {
    display: none;
}
.sp-menu-list.js-acc .sp-menu-acc.is-open .sp-menu-accbody {
    display: block;
}
.sp-menu-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 14px;
}
.sp-menu-sub li {
    border-bottom: 0;
}
.sp-menu-sub a {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: #4A4F5C;
    padding: 10px 0;
}
.sp-menu-sub a:hover {
    color: #9C7E47;
}
/* 2026-08-08 .sp-menu-contact / .sp-menu-tel の指定を削除。
   ドロップインから電話番号とWEB予約を外したため（footer.php の .sp-cta に集約）。 */

/* ============================================================
 *  Body padding（固定ヘッダー分のオフセット維持）
 * ============================================================ */
/* JavaScriptが無効なときのための既定値。
   実際の高さは header.php のスクリプトが読み込み時に測って上書きする。 */
body {
    padding-top: 134px; /* page-tabs (54px) + header (80px) */
}
@media (max-width: 768px) {
    body { padding-top: 80px; }
}