/* ============================================================
   style.pc.css  —  PC（1024px以上）用レイアウト（本採用 / 2026-09-13 作成・2026-09-14 本採用）
   ------------------------------------------------------------
   ・2026-09-14、スマホ用(*.html)とPC用(*_pc.html)の2ファイル体制を1ファイルに統合。
     以降は全15ページ（index.html ほか）から読み込まれる。
   ・下の @media (min-width: 1024px) より外に書いてよいのは、
     スマホ幅では使わない .pc-only 要素の既定値だけ。
     それ以外は1行残らずメディアクエリの中に入れること。
     → スマホ幅（〜1023px）では既存デザインに一切影響しない。
   ・既存HTMLに inline style が多いため、必要な箇所のみ !important で上書きしている。
     いずれ inline style をクラス化してから !important を外すのが望ましい（未着手）。
   ・余白は8pxスケール（8/16/24/32/40/64）、影は拡散型の弱い影で統一。
   ・配色・フォントは既存ブランドのまま（ネイビー/オリーブ/クリーム/ゴールド、
     Noto Serif JP + Noto Sans JP）。
   ============================================================ */

/* PC専用要素は既定で非表示（index.html には存在しない要素なので既存に影響なし） */
.pc-only { display: none; }

/* 下層ページには診療時間カードが無いため、script.js に診療ステータスを書かせるだけの
   受け皿として #clinic-status-summary を置いている。画面には一切出さない。
   （判定ロジックを PC版で二重実装しないための仕掛け） */
.pc-status-source { display: none !important; }

@media (min-width: 1024px) {

    /* ページ内アンカー（#contact-area 等）へ飛んだとき、
       固定ヘッダーの下に見出しが隠れないようにする */
    html { scroll-padding-top: 120px; }

    /* ---------- 全体の器 ---------- */
    .container {
        max-width: 1280px;
        padding-bottom: 0;
        box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08);
    }

    /* PCでは下部固定の電話バーは出さない（ヘッダーに常時表示するため） */
    .fixed-call-bar { display: none !important; }

    /* 「ページ最上部へ戻る」丸ボタン：PCでは電話バーが無いので右下隅でよい。
       位置の基準はPC用コンテナ（最大1280px）の右端から30px内側。 */
    .scroll-top-btn {
        width: 48px;
        height: 48px;
        bottom: 30px;
        margin-left: calc(min(50%, 640px) - 30px - 48px);
    }

    .scroll-top-btn svg {
        width: 24px;
        height: 24px;
    }

    /* ---------- ヘッダー：グローバルナビ＋電話を常時表示 ---------- */
    .main-header { padding: 10px 32px; }

    .header-content {
        max-width: 1216px;
        margin: 0 auto;
        gap: 24px;
    }

    .header-content img {
        width: 58px !important;
        height: 58px !important;
    }

    .name-container { align-items: flex-start; text-align: left; }
    .clinic-name { font-size: 1.3rem; }
    .clinic-name-en { font-size: 0.8rem; }

    /* ハンバーガーとドロワーはPCでは不要 */
    .menu-btn-container { display: none !important; }
    .nav-drawer, .nav-overlay { display: none !important; }

    .pc-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .pc-nav a {
        display: block;
        padding: 10px 14px;
        color: var(--primary-navy);
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: border-color 0.2s, color 0.2s;
        white-space: nowrap;
    }

    .pc-nav a:hover {
        color: var(--accent-olive);
        border-bottom-color: var(--accent-olive);
    }

    /* 現在地表示：今見ているページのナビ項目は、hover と同じ見た目を常時つける。
       診療案内の子ページ（超音波検査など）を見ている時は親の「診療案内」に付く。 */
    .pc-nav a.active {
        color: var(--accent-olive);
        border-bottom-color: var(--accent-olive);
    }

    .pc-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        padding-left: 24px;
        border-left: 1px solid rgba(139, 139, 94, 0.25);
        flex-shrink: 0;
    }

    .pc-status {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        background: #F1F1EC;
        color: #6B6B58;
        border: 1px solid #E2E2D8;
        white-space: nowrap;
    }

    /* 受付時間内だけ緑。時間外はグレーのまま（電話してよい時間かが一目で分かる） */
    .pc-status.is-open {
        background: #E8F5E9;
        color: #2E7D32;
        border-color: #A5D6A7;
    }

    .pc-tel {
        font-family: 'Noto Serif JP', serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--primary-navy);
        text-decoration: none;
        letter-spacing: 0.02em;
    }

    .pc-tel-note {
        font-size: 0.68rem;
        color: #666;
        white-space: nowrap;
    }

    /* ---------- 見出し ---------- */
    .section-title-wrapper { margin: 0 0 32px; gap: 24px; }
    .section-title-wrapper::before,
    .section-title-wrapper::after { width: 64px; }
    .section-title { font-size: 1.7rem; }

    /* ---------- ヒーロー ---------- */
    /* 2026-09-14 方針変更：額縁（コンテナ幅1280px）優先に統一。
       以前はコンテンツ幅より20pxだけ広い1320pxにして迫力を出していたが、
       ヘッダー・診療時間カード・施設ギャラリーがすべて1280pxで揃っている中で
       ヒーローだけが左右20pxはみ出すため、「意図的な演出」ではなく
       「ズレ・ミス」として知覚されてしまっていた（社長指摘）。
       医療機関サイトでは一貫性＝信頼感に直結するため、幅を揃える方を優先する。
       迫力は幅ではなく、画像の高さ・トリミング（object-position）で担保する。 */
    .hero {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }

    .hero-main-img {
        height: clamp(460px, 46vh, 600px);
        object-fit: cover;
        object-position: center 38%;
    }

    .hero-top-overlay { top: 16%; width: min(90%, 900px); }
    .hero-floor-overlay { bottom: 104px; width: min(90%, 860px); }
    .hero-floor-title { font-size: 2.1rem; line-height: 1.5; margin-bottom: 16px; }
    .hero-floor-subtitle { font-size: 1.1rem; line-height: 1.9; }
    .location-tag { font-size: 1.05rem; padding: 16px; }

    /* ---------- 診療時間：表（左）／受付・注意（右）の2カラム ---------- */
    .consultation-section { padding: 64px 40px; }

    .consultation-card {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 24px 40px;
        align-items: start;
        max-width: 1040px;
        margin: 0 auto;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    }

    .consultation-card .consultation-summary {
        grid-column: 1 / -1;
        margin-bottom: 0;
        font-size: 1.05rem;
        padding: 16px;
        border-radius: 8px;
    }

    .consultation-card .hours-table {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
        font-size: 1rem;
    }

    .consultation-card .hours-table th { padding: 14px 8px; }
    .consultation-card .hours-table td { padding: 18px 8px; }

    .consultation-card .reception-info-box {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 0;
        padding: 24px;
        border-radius: 8px;
    }

    .consultation-card .info-item { font-size: 0.95rem; margin-bottom: 16px; }

    .consultation-card .alert-banner-soft {
        grid-column: 1 / -1;
        margin-bottom: 0;
        padding: 24px 32px;
    }

    .consultation-card .center { grid-column: 1 / -1; }
    .consultation-card .center .btn-premium-gold { max-width: 360px !important; }

    /* ---------- お知らせ（院長あいさつ）：読みやすい行長に制限 ---------- */
    .news-section { padding: 64px 40px; }

    .news-section .greeting-card {
        max-width: 820px;
        margin: 0 auto;
        padding: 0;
    }

    .news-section .rounded-badge {
        max-width: 480px;
        margin: 0 auto 32px;
        padding: 16px 24px;
        border-radius: 8px;
    }

    .news-section .greeting-content p { font-size: 1.02rem; }

    /* ---------- 当院の特徴：3カラムのカード ---------- */
    .features-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding: 64px 40px;
        align-items: stretch;
    }

    .features-section > .section-title-wrapper { grid-column: 1 / -1; }

    .features-section > .brick-banner {
        grid-column: 1 / -1;
        max-width: 1000px;
        margin: 0 auto 16px;
        border-radius: 8px;
    }

    .features-section > .feature-item {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid rgba(139, 139, 94, 0.22);
        border-radius: 8px;
        padding: 32px 28px !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    }

    .features-section > .feature-item h3 { font-size: 1.2rem; line-height: 1.6; }
    .features-section > .feature-item p { flex: 1 1 auto; font-size: 0.95rem; }
    .features-section > .feature-item > div:last-child { margin-top: auto; }

    /* ---------- 診療案内 ---------- */
    .services-section { padding: 64px 0; }

    /* 冒頭の写真＋説明文を左右2カラムに */
    .services-section .pc-services-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto 40px;
        padding: 0 40px !important;
        text-align: left !important;
    }

    .services-section .pc-services-intro img {
        height: 320px;
        object-fit: cover;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07) !important;
    }

    .services-section .feature-detail-box {
        max-width: 1100px;
        margin: 0 auto 40px !important;
        padding: 28px 32px !important;
    }

    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* 超音波検査（目玉）は2列分を使って横長に見せる */
    .services-grid .service-item-card.featured {
        grid-column: span 2 !important;
        justify-content: center;
    }

    .services-grid .service-item-card {
        padding: 24px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(26, 43, 76, 0.10);
    }

    /* 診療案内一覧ページ：最後の行にカードが2枚だけ余った時、左に寄せず中央2列に配置する */
    .pc-services .services-grid .service-item-card:nth-last-child(2) { grid-column: 2 / span 1; }
    .pc-services .services-grid .service-item-card:nth-last-child(1) { grid-column: 3 / span 1; }

    .services-grid .service-item-card h4 { font-size: 1.02rem; }
    .services-grid .service-item-card p { font-size: 0.88rem !important; }

    .services-section .pc-services-cta { margin-top: 40px !important; }

    /* ---------- 施設ギャラリー：横スクロールをやめて4列グリッドに ---------- */
    .facility-gallery-section { padding: 32px 0 64px; }

    .facility-gallery-hint { display: none; }

    .facility-gallery-scroll {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        overflow: visible;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 40px 24px;
    }

    .facility-gallery-item {
        flex: none;
        max-width: none;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    }

    /* 高さ固定ではなく縦横比で指定し、画面幅が変わっても比率が保たれるようにする */
    .facility-gallery-item img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }

    /* ---------- 基本情報：住所など（左）／地図（右）＋電話カード（下段全幅） ---------- */
    .clinic-info { padding: 64px 40px; }

    .clinic-info .info-banner-blue {
        max-width: 1040px;
        margin: 0 auto;
        height: 120px !important;
        justify-content: center;
        border-radius: 8px 8px 0 0;
    }

    .clinic-info .pc-info-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 40px;
        align-items: start;
        max-width: 1040px;
        margin: 0 auto !important;
        padding: 40px !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* 住所・院長・駐車場・駐輪場・交通機関 → 左カラム。
       項目が増減してもレイアウトが崩れないよう、行数に依存しない置き方にしている。 */
    .clinic-info .pc-info-list {
        grid-column: 1;
        grid-row: 1;
    }

    .clinic-info .pc-info-list > div { margin-bottom: 32px !important; }
    .clinic-info .pc-info-list > div:last-child { margin-bottom: 0 !important; }

    /* 地図 → 右カラム。左カラムの高さに合わせて伸びる */
    .clinic-info .pc-map {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        height: auto !important;
        min-height: 440px;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    /* 電話カード → 最下段に全幅 */
    .clinic-info .pc-info-box > #contact-area {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 32px;
        padding: 32px 40px !important;
        border-radius: 8px !important;
    }

    .clinic-info #contact-area a[href^="tel:"] { font-size: 2.2rem !important; }

    .clinic-info #contact-area > div > div {
        max-width: 420px !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }

    /* ---------- フッター ---------- */
    .footer { padding: 64px 40px; }

    /* ============================================================
       ここから下は「下層14ページ共通」のPCレイアウト
       （2026-09-14 追加。トップページには .pc-main が無いので影響しない）
       ------------------------------------------------------------
       考え方：
       ・スマホ用HTMLをPCで開くと、本文が1280px幅いっぱいに広がって
         1行100文字超になる＝「スマホの拡大表示」の正体はほぼこれ。
       ・そこで <main class="pc-main"> の直下要素を既定860pxの
         読み物カラムに閉じ込め、写真ギャラリー・カードグリッドだけ
         .pc-wide で外側（最大1080px）まで開放する、という2段構えにした。
       ・.pc-main > * とワイルドカードで当てているのは、既存HTMLの直下要素が
         section / div / nav と混在しており、要素名を列挙すると
         ページ追加時に取りこぼすため（取りこぼし＝そのページだけ全幅で崩れる）。
       ============================================================ */

    .pc-main {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* 既定：読み物カラム。日本語18pxで約45文字/行に収まる幅 */
    .pc-main > * {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 写真ギャラリー・カードグリッドなど、横に広げたい区画だけ開放する */
    .pc-main > .pc-wide { max-width: 100%; }

    /* 既存HTMLの inline padding（20px前後の左右余白）はカラム幅で担保するため打ち消す。
       inline style が相手なので !important が必要。
       ただし .about-intro-card のように「それ自体が枠付きの箱」になっている直下要素は、
       打ち消すと文字が枠にぶつかるので除外する。
       （除外対象は audit_children.py で機械的に洗い出したもの：
         全14ページ中、直下要素で装飾された箱は .about-intro-card だけ） */
    .pc-main > *:not(.about-intro-card) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 固定ヘッダー分は html の scroll-padding-top (120px) で確保済み。
       既存HTMLの inline scroll-margin-top:75px が加算されると
       アンカー移動時に見出しが画面のかなり下に来てしまうので打ち消す。 */
    .pc-main [style*="scroll-margin-top"] { scroll-margin-top: 0 !important; }

    /* キーボード操作時のフォーカス位置が分かるようにする（PCで初めて意味を持つ） */
    .pc-nav a:focus-visible,
    .pc-main a:focus-visible,
    .pc-main summary:focus-visible {
        outline: 2px solid var(--accent-olive);
        outline-offset: 3px;
        border-radius: 4px;
    }

    /* ---------- 下層ページのヘッダー ---------- */
    /* 本番HTMLではロゴ＋医院名のリンクが flex-grow:1 で横幅を食い尽くすため、
       そのままだとPCナビが右端に押し出されて窮屈になる */
    .pc-brand-link { flex-grow: 0 !important; }

    /* ---------- パンくずリスト（.breadcrumb） ---------- */
    /* 左右の padding は .pc-main > * の打ち消しに任せ、ここでは上下と文字サイズだけ整える。 */
    .pc-main .breadcrumb {
        padding-top: 20px;
        font-size: 0.78rem;
    }

    /* ---------- 目次（.page-toc） ---------- */
    .pc-main .page-toc {
        gap: 12px;
        padding: 28px 0 0;
        max-width: 860px;
        margin: 0 auto;
    }

    .pc-main .toc-link {
        flex: 0 1 auto;
        min-width: 150px;
        max-width: 240px;
        padding: 14px 20px;
        font-size: 0.9rem;
        border-radius: 8px;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .pc-main .toc-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
        border-color: var(--accent-olive);
    }

    /* スマホでは「縦2列・列方向に読む」配置だが、PCは3列に広げて素直な読み順にする */
    .pc-main .toc-grid-2col {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-auto-flow: row;
    }

    /* ---------- 本文セクションの余白 ---------- */
    .pc-main > section { padding-top: 24px !important; padding-bottom: 48px !important; }
    .pc-main > section:first-of-type { padding-top: 8px !important; }

    /* ページ先頭のバナー画像。トリミングすると図版入りバナー（市の健診など）の
       情報が欠けるので、幅を読み物カラムに揃えるだけにして切らない。 */
    .pc-main > div:first-child img { border-radius: 12px; }

    /* ---------- 共通パーツの拡大 ---------- */
    .pc-main .feature-detail-box {
        padding: 28px 32px !important;
        margin: 28px 0 !important;
        border-radius: 4px 12px 12px 4px;
    }

    .pc-main .feature-tag { font-size: 0.85rem !important; padding: 5px 16px !important; }

    /* 箱の最後の段落の下マージンが余白として二重に効き、中身が上寄りに見えるのを防ぐ */
    .pc-main .feature-detail-box > p:last-child,
    .pc-main .feature-detail-box > ul:last-child { margin-bottom: 0; }

    .pc-main .faq-item { padding: 24px 28px; }
    .pc-main .faq-question { font-size: 1.1rem; }

    .pc-main .about-intro-card { padding: 40px 48px; border-radius: 12px; }
    .pc-main .about-intro-title { font-size: 1.35rem; }

    .pc-main .about-intro-actions {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    /* 「↑トップへ」＋「トップページに戻る」の並び */
    .pc-main > div:last-child { padding-bottom: 64px !important; }

    /* ---------- 当院について：特徴01〜05をカードとして見せる ---------- */
    .pc-main .feature-item {
        background: #fff;
        border: 1px solid rgba(139, 139, 94, 0.22);
        border-radius: 8px;
        padding: 40px !important;
        margin-bottom: 32px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    }

    .pc-main .feature-item:last-child { margin-bottom: 0; }

    /* ---------- 当院について：院内設備（写真＋説明を左右に） ---------- */
    /* :has が使えないブラウザでは縦積みのまま。その場合でも写真だけが
       1000px超に引き伸ばされないよう、先に上限を掛けておく。 */
    .pc-wide .equipment-photo-item { max-width: 1000px; margin: 0 auto 32px; }
    .pc-wide .equipment-photo-item .about-photo { max-width: 420px; }

    /* 機器写真は縦長（689x800）で説明文が短いものが多い。
       画像の幅を広く取ると縦に伸びて右側が空くだけなので、300pxに抑えている。
       写真の下端に機器名が焼き込まれているものがあるため、object-fit でのトリミングはしない。 */
    .pc-wide .equipment-photo-item:has(> img) {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 32px;
        align-items: center;
    }

    .pc-wide .equipment-photo-item:has(> img) .about-photo { max-width: 100%; }
    .pc-wide .equipment-photo-item:has(> img) .equipment-item-desc { margin-top: 0; }

    /* 写真の無い項目（経皮的動脈血酸素飽和度測定器）は読み物カラムに揃える */
    .pc-wide .equipment-photo-item:not(:has(> img)) { max-width: 860px; }

    .pc-wide .ventilation-section,
    .pc-wide > h3 { max-width: 1000px; margin-left: auto; margin-right: auto; }

    .pc-wide .ventilation-section > h3 { font-size: 1.25rem; margin-bottom: 24px; }

    /* ---------- 当院について：施設のご紹介（写真8枚） ---------- */
    .pc-wide .about-photo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin: 0 !important;
    }

    .pc-wide .about-photo-grid .about-photo {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    }

    /* 読み物カラム内の2枚組（外観＋周辺地図）は引き伸ばさない */
    .pc-main .feature-item .about-photo-grid { gap: 24px; }

    /* ---------- 診療内容：カード一覧 ---------- */
    .pc-services .services-grid { padding: 0 !important; max-width: 100%; }

    /* ---------- 院長紹介・各診療ページの見出し ---------- */
    .pc-main .greeting-subheading { font-size: 1.15rem; }
    .pc-main h3 { line-height: 1.7; }

    /* ---------- 料金表など ---------- */
    .pc-main table { font-size: 1rem !important; }
    .pc-main table td { padding: 12px 8px !important; }
}

/* ------------------------------------------------------------
   1024〜1199px（小さめのノートPC）。
   ヘッダーの要素数が多く、この幅だとナビと電話番号がぶつかるので
   一段だけ詰める。1200px以上では上のスタイルがそのまま効く。
   ------------------------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1199px) {
    .main-header { padding: 10px 20px; }
    .header-content { gap: 12px; }
    .pc-nav a { padding: 10px 8px; font-size: 0.82rem; }
    .pc-contact { padding-left: 16px; }
    .pc-tel { font-size: 1.3rem; }
    .pc-tel-note { font-size: 0.62rem; }
    .clinic-name { font-size: 1.1rem; }
    .clinic-name-en { font-size: 0.72rem; }
    .header-content img { width: 48px !important; height: 48px !important; }

    .pc-main { padding: 0 24px; }
    .pc-wide .equipment-photo-item:has(> img) { grid-template-columns: 280px minmax(0, 1fr); }
    .pc-wide .about-photo-grid { grid-template-columns: repeat(3, 1fr); }
}