@charset "UTF-8";

/* ==========================================================================
   デザイン設計書に基づく変数定義
   ========================================================================== */
:root {
    /* カラー設計 */
    --base-color: #f9f9f7;           /* ミルクホワイト（背景：目に優しく上品） */
    --pure-white: #ffffff;           /* 純白（カードの背景などで使用） */
    --main-color: #1a365d;           /* ディープブルー（濃い青：信頼と可読性） */
    --sub-color: #e2e8f0;            /* フォグブルー（清潔感） */
    --accent-color: #fef3c7;         /* ベビーイエロー（優しさ） */
    --text-color: #333333;           /* 基本文字色 */

    /* 横幅設計 */
    --container-width: 1200px;       /* PC版のコンテンツ最大幅 */

    /* 文字設計（14px・実用的・高密度設計） */
    --font-base: "Noto Sans JP", sans-serif;
    --font-heading: "Shippori Mincho", serif;
    --base-font-size: 16px;          /* 14pxから16pxへ */
    --base-line-height: 1.8;         /* 1.5から1.8へ広げてゆとりを出す */
    --base-letter-spacing: 0.05em;   /* 0.01から0.05へ。文字の間を少しあける */

    --section-space: 30px; 
    
    /* 要素（見出しと本文など）の間隔も少し詰めるとさらに締まります */
    --element-space: 0px; 
}

/* ==========================================================================
   共通の基本ルール
   ========================================================================== */
body {
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
    -webkit-font-smoothing: antialiased;

    /* --- 【完全確定版】左上に新緑の葉、右下に薄桃色の花びらがはっきり浮かぶ優秀なベースカラー --- */
    background-color: #fdfbf7; /* ベースは上品で淡いアイボリークリーム */
    
    background-image: 
        /* ★左上の葉っぱ（みずみずしいペールグリーン：サイズと濃さを維持） */
        radial-gradient(ellipse 350px 250px at 15% 20%, rgba(193, 221, 202, 0.45) 0%, rgba(193, 221, 202, 0.2) 20%, transparent 100%),
        /* ★右下の花びら：同化を完全に防ぐ、ごく淡いアプリコット・ペールピンクへ修正。存在感（0%〜25%）をクッキリ強化 */
        radial-gradient(ellipse 320px 220px at 85% 80%, rgba(254, 224, 212, 0.55) 0%, rgba(254, 224, 212, 0.25) 25%, transparent 100%);
    
    background-attachment: fixed;
    background-size: 100% 100%;
}


section {
    padding: var(--section-space) 0;
}

/* 1200px幅を維持し、中央に寄せるための共通クラス */
.inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* 見出し：h1のみ情緒ある明朝、h2以降は視認性重視のゴシック */
h1 {
    font-family: var(--font-heading);
    color: var(--main-color);
    font-weight: 700;
}

h2, h3, h4 {
    font-family: var(--font-base);
    color: var(--main-color);
    font-weight: 600;
    line-height: 1.4;
}

/* 共通の見出し（h4）の上のマージンも基本は「なし」か「最小限」に */
h4 {
    margin-top: 10px;
    font-size: 18px;
    letter-spacing: 0.1em;
}

/* 段落と段落の間をしっかりあける */
p {
    margin-bottom: 0.5em;
}

/* ボタンの共通パーツ（わずかな角丸・マウスホバーで薄くなる） */
.btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: var(--main-color);
    color: var(--pure-white);
    border-radius: 4px; /* わずかな角丸 */
    text-align: center;
    transition: opacity 0.3s;
    font-weight: 700;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.7; /* ホバーで少し薄くなる */
}

/* 画像の基本（レスポンシブの土台・縦横比維持） */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* --- ボタン共通設定（アクセントカラーVer.） --- */
.service-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--main-color);
    color: #ffffff !important;
    border: 2px solid var(--main-color); /* 枠線をメインカラーで描いておく */
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    padding-right: 40px !important; /* 矢印が文字と重ならないように右側に余白を確保 */
    transition: all 0.3s ease;
}

/* ホバー時の変化：文字をベビーイエローに変え、枠線も光らせる */
.service-btn:hover {
    background-color: #2a4d7d; /* わずかに明るく */
    color: var(--accent-color) !important; /* 文字をアクセントカラーに！ */
    border-color: var(--accent-color);   /* 枠線もアクセントカラーに！ */
}


.service-btn:hover::before {
    left: 100%;
}

/* キラッと光る演出：白ではなく「ベビーイエロー」の光を通す */
.service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* グラデーションをアクセントカラー（ベビーイエロー）に変更 */
    background: linear-gradient(120deg, transparent, rgba(254, 243, 199, 0.6), transparent);
    transition: all 0.6s ease;
}

/* 矢印（>） */
.service-btn::after {
    content: ">";
    position: absolute;
    right: 15px;                 /* 右端からの位置 */
    top: 50%;
    transform: translateY(-50%); /* 上下中央揃え */
    font-weight: 700;
    transition: transform 0.3s ease; /* ★動くスピード（0.3秒かけてなめらかに） */
}

/* --- 【最重要】マウスを載せた（ホバー）時に矢印を右に動かす --- */
.service-btn:hover::after {
    transform: translate(6px, -50%); /* ★右に6pxスライドさせつつ、上下中央を維持 */
}

.external-link {
    color: #0066cc;
    text-decoration: underline;
    transition: all 0.3s ease;
    padding: 0 2px;
    border-radius: 2px;
}

.external-link:hover {
    color: var(--main-color);
    background-color: var(--accent-color);
    text-decoration: none;
}

/* ==========================================================================
   下層ページ共通：リスト形式（略歴・アクセス・疾患リスト共通）
   ========================================================================== */

/* 1. 親要素：横並びを確実に実行 */
.career-list {
    display: flex !important;   /* 強制的に横並びを有効化 */
    flex-wrap: wrap;            /* 幅が狭い時のみ折り返し */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 2. 項目名（dt）：おむつかぶれ等の長い文字も1行で収める */
.career-list dt {
    width: 120px !important;    /* 120pxに固定 */
    flex-shrink: 0;             /* 縮ませない */
    font-weight: 700;           /* 項目名は太字 */
    color: var(--main-color);
    padding: 12px 0;            /* 上下余白を統一 */
    box-sizing: border-box;
    line-height: 1.6;
}

/* 3. 本文（dd）：項目の右隣にピタッと配置 */
.career-list dd {
    width: calc(100% - 120px) !important; /* 100%からdtの幅を引く */
    margin: 0;
    padding: 12px 0;            /* dtと高さを合わせる */
    border-bottom: 1px solid #e2e8f0; /* 下線で区切る */
    box-sizing: border-box;
    line-height: 1.6;
    vertical-align: top;
}

/* 本文内の改行調整 */
.career-list dd br {
    display: block;
    margin-bottom: 5px;
    content: "";
}

/* --- 注意喚起・強調用の赤字 --- */
.text-alert {
    color: #c53030; /* 落ち着いた赤色 */
    font-weight: 700;
}

/* リスト(dd)全体を赤字にする場合の微調整 */
dd.text-alert {
    line-height: 1.6;
}


/*===== 以下　トップページのCSS =====*/

/* ==========================================================================
   ヘッダー上段：ロゴと情報のレイアウト
   ========================================================================== */

/* トップページ専用の「ゆとり」上書き設定 */
.tp-section {
    padding: 80px 0; /* 基本の30pxを、トップページだけ80pxに広げる */
}

.tp-section p {
    margin-bottom: 1.5em; /* トップページだけ段落間を広げる */
}

.header-upper {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    padding: 4px 0;
}

/* ロゴ：大きく、かつ縦横比を維持 */
.header-logo img {
    height: 68px;
    width: auto;
    margin-left: 10px;
    display: block;
}

/* 右側情報エリア：四角い枠で囲み、左揃えにする */
.header-info {
    padding: 10px 15px;
    text-align: left; /* 枠内を左揃えに */
}

/* 電話番号エリア：アイコンと数字を密着させる */
.info-tel {
    display: flex;
    align-items: center;
    gap: 4px;  
    margin-bottom: 3px;
}

.tel-icon {
    height: 1.4em; 
    width: auto;
    max-width: 25px; 
}

.tel-number {
    font-size: 1.6rem;   /* 少し大きく */
    font-weight: 700;
    color: var(--main-color);
    line-height: 1 !important; /* 全体設定に勝つために追記 */
}

/* 住所エリア：文字を少し大きく */
.info-address {
    font-size: 13px;
    line-height: 1.4;
    color: var(--main-color);
}

/* ここからが「間延び」を消すためのピンポイント追記 */
.info-address p {
    line-height: 1.3 !important; /* 全体の1.8を上書き */
    margin-bottom: 0 !important; /* 段落下の余白をゼロにする */
}

.zip {
    margin-top: 2px; /* 郵便番号の上の隙間を微調整 */
}

/* ==========================================================================
   下段ナビゲーション：横並びと色の修正
   ========================================================================== */
.g-nav {
    background-color: var(--main-color);
}

.nav-list {
    display: flex;
    justify-content: center; /* 左右に広げず、中央に集める */
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.nav-list li {
        width: 160px; /* ボタン1つの幅を指定して、間延びを防ぐ */
        position: relative; /* 子要素のプルダウンメニューを絶対位置にするための基準 */
}

.nav-list li a {
    display: block;
    padding: 15px 20px;
    color: #ffffff !important; /* 文字色を白に強制 */
    text-decoration: none;
    font-weight: 400;
    font-size: 14px !important;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color 0.3s;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

/* ホバーアクションは維持 */
.nav-list li a:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--accent-color) !important;
}

.nav-list li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.nav-list li a:hover::after {
    width: 100%;
}

/* ★プルダウンメニューの親要素（診療案内） */
.dropdown-item {
    position: relative;
}



/* ★連動：文字が矢印と重ならないように、親（aタグ）の右側に少しだけ隙間を開ける */
.dropdown-trigger {
    position: relative !important;
    padding-right: 20px !important;
}

/* ==========================================================================
   診療案内：文字のすぐ横で動く、上品な下向きカッコ（V字）の定義
   ========================================================================== */

/* 1. 診療案内リンク自体の設定 */
.dropdown-trigger {
    position: relative !important;
    display: inline-flex !important;  /* 文字の長さに合わせて幅をフィットさせる */
    align-items: center;
    justify-content: center;
    padding-right: 32px !important;   /* 文字のすぐ右側にカッコ用の固定隙間を作る */
    width: 100%;
    height: 100%;
}

/* 2. 本物のV字カッコ（画像を使わず、正方形の右と下だけ線を描いて45度回転） */
.dropdown-trigger::before {
    content: "" !important;
    position: absolute !important;
    right: 24px;                      /* 文字のすぐ右横の位置へ固定 */
    top: 45%;                         /* 上下中央の微調整 */
    width: 6px !important;            /* カッコのサイズ（幅） */
    height: 6px !important;           /* カッコのサイズ（高さ） */
    border-right: 2px solid #ffffff !important; /* ★白くて細い綺麗な線 */
    border-bottom: 2px solid #ffffff !important;
    transform: translateY(-50%) rotate(45deg) !important; /* ★45度傾けて下向きのカッコ「 ∨ 」にする */
    transition: transform 0.3s ease, border-color 0.3s !important;
}

/* 3. マウスを載せた（ホバー）時：カッコがベビーイエローに変わり、さらにコロンと上を向く */
.dropdown-item:hover .dropdown-trigger,
.dropdown-item:hover .dropdown-trigger::before {
    color: var(--accent-color) !important;
}

.dropdown-item:hover .dropdown-trigger::before {
    border-color: var(--accent-color) !important;
    /* ★ホバーするとカッコがくるっと「上向き（ ∧ ）」に180度回転し、メニューが開いたことを伝えます */
    transform: translateY(-25%) rotate(225deg) !important; 
}

/* ★初期状態：プルダウンメニューを隠しておく（アニメーション可能にする設定） */
.dropdown-menu {
    position: absolute;
    top: 100%;       /* 「診療案内」ボタンの真下に配置 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 中央に寄せつつ、少し下に下げておく */
    background-color: var(--pure-white);
    border: 1px solid var(--sub-color);
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(26, 54, 93, 0.15); /* ほんのりリッチな影 */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 160px; /* メニューの横幅を固定 */
    z-index: 1000;
    
    /* 滑らかにフワッと現れるための設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* プルダウンメニュー内の各リンク（上下並び） */
.dropdown-menu li {
    width: 100%;
}


/* ★最優先強制設定：プルダウン内の文字は、既存の白命令をねじ伏せて「メインカラー（紺）」にします */
.g-nav .nav-list .dropdown-menu li a {
    color: var(--main-color) !important; /* 強制的にメインカラーの紺色に */
    background-color: transparent !important; /* 背景は一旦透明に */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    text-align: center;
    display: block;
    transition: background-color 0.2s, color 0.2s;
}

/* プルダウンメニュー内の項目にマウスを載せた時 */
.dropdown-menu a:hover {
    background-color: var(--accent-color); /* ベビーイエロー */
    color: var(--main-color);
}

/* ★【核心】「診療案内」にマウスを載せた時、プルダウンをフワッと出現させる */
.dropdown-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* 本来の位置（真下）へスッと移動しながら現れる */
}


/* ★最優先強制設定：プルダウン内の項目にマウスを載せた（ホバー）時 */
.g-nav .nav-list .dropdown-menu li a:hover {
    background-color: var(--accent-color) !important; /* 背景をベビーイエローに */
    color: var(--main-color) !important;             /* 文字は紺色のまま */
}


/*===== hero画像セクション =====*/

#hero {
    position: relative;
    height: 80vh; 
    min-height: 500px;
    max-height: 900px;
    overflow: hidden;
}

/* 全体35秒のサイクル（5枚 × 7秒） */
.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 30%; 
    opacity: 0;
    animation: crossFadeZoom 35s infinite;
}

/* 各画像の開始タイミング（7秒ずつずらす） */
.hero-img1 { background-image: url("../img/hero1.webp"); animation-delay: 0s; }
.hero-img2 { background-image: url("../img/hero2.webp"); animation-delay: 7s; }
.hero-img3 { background-image: url("../img/hero3.webp"); animation-delay: 14s; }
.hero-img4 { background-image: url("../img/hero4.webp"); animation-delay: 21s; }
.hero-img5 { background-image: url("../img/hero5.webp"); animation-delay: 28s; }


    /* 1.15倍から1.0倍へのズームアウトと、重なり合うフェード 
     クロスフェード＆ズームアウトのアニメーション */
@keyframes crossFadeZoom {
    0% {
        opacity: 0;
        transform: scale(1.15); /* アップから開始 */
    }
    /* 約2秒かけて現れる（前の画像と重なり始める） */
    5.7% {
        opacity: 1;
    }
    /* 7秒時点。ここから次の画像が重なり始めても消えずに残る */
    20% {
        opacity: 1;
    }
    /* 9秒時点までかけてゆっくり消えることで、色が混ざり合う */
    25.7% {
        opacity: 0;
        transform: scale(1.0); /* 最終的に引きへ */
    }
    100% {
        opacity: 0;
    }
}

/* ヒーローコンテンツ全体の配置を左下へ */
.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: flex-end;   /* 下揃え */
    justify-content: flex-start; /* 左揃え */
    padding-bottom: 60px;    /* 下端から少し浮かせる（ここがポイント） */
}

/* キャッチコピーの箱のデザイン */
.hero-content h1 {
    font-size: 2.0rem;       /* 少しだけサイズを絞って上品に */
    line-height: 1.5;
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.7); /* 白を少し強めて読みやすく */
    padding: 25px 40px;
    border-radius: 0 4px 4px 0; /* 左側を直線にして端に寄せる演出 */
    border-left: 10px solid var(--main-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 浮遊感を出して高級感をプラス */
}

/*===== お知らせ（ニュース）セクション ===== */

#news {
    padding: var(--section-space) 0;
    padding-bottom: 20px; /* 下側の余白を半分に削る */
}

.news-header h2 {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

/* スクロールする「箱」の設定 */
.news-scroll-box {
    height: 240px;
    overflow-y: auto;
    /* 箱の中だけを「純白」に。これで暗い印象が消え、文字が際立ちます */
    background-color: var(--pure-white); 
    border: 1px solid #e2e8f0;
    padding: 15px 25px;
}

/* スクロールバーをおしゃれにする */
.news-scroll-box::-webkit-scrollbar {
    width: 12px; 
}
.news-scroll-box::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 6px;
}


.news-header {
    border-bottom: 2px solid var(--main-color);
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-list li {
    padding: 12px 0;
    border-bottom: 1px dashed #ccc; /* 境界線は点線で控えめに */
    display: flex;
    align-items: flex-start; /* 文字が複数行になっても上が揃うように */
}

.news-list li:last-child {
    border-bottom: none;
}

/* ニュースの本文 */
.news-txt {
    flex: 1;
    margin-left: 15px;
    line-height: 1.8; /* ゆったりとした行間 */
    color: var(--text-color);
}


/* ===== 診療科ガイドセクション ===== */

#service-guide {
    padding: var(--section-space) 0;
}

.service-flex {
    display: flex !important;      /* 強制横並び */
    justify-content: space-between;
    gap: 30px;
}

.service-card {
    flex: 1;
    background-color: var(--pure-white);
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important; /* 下線を消す */
    color: var(--text-color);
    display: block;                /* aタグを箱として機能させる */
    transition: border-color 0.3s;
}

.service-card:hover {
    border-color: var(--main-color);
}

.service-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.service-body {
    padding: 20px;
}

.service-body h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--main-color);
}

/* 文字の行間と高さを固定してボタン位置を揃える */
.service-body p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    height: 4.8em; 
    overflow: hidden;
}


.service-card:hover .service-btn {
    background-color: #2a4d7d;
}

.service-card:hover {
    left: 100%;
}

.service-card:hover::after {
    transform: translateX(4px);
}

.service-img img {
    width: 100%;
    height: 240px; /* 写真の高さを揃えて整然と見せる */
    object-fit: cover; /* 画像を歪ませずに収める */
}

/* ===== 診療案内・アクセス概要セクション ===== */

#home-access {
    padding: var(--section-space) 0;
    }

.access-flex {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.time-table, .access-summary {
    flex: 1;
}

/* 診療時間テーブルの装飾 */
.time-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px; /* 高密度設計：少し小さく */
    background-color: var(--pure-white); /* テーブルの背景は純白でクリーンに */
}

.time-table th, .time-table td {
    border: 1px solid #ddd;
    padding: 10px 5px;
    text-align: center;
}

.time-table th {
    background-color: var(--sub-color);
    color: var(--main-color);
}

.table-note {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}

/* アクセス概要の装飾 */
.summary-box {
    margin-top: 6px;
    line-height: 1.8;
}

.summary-tel {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 10px;
}

.summary-btn-area {
    margin-top: 20px;
}


.map-link {
    display: inline-flex;
    align-items: center;
    color: #0066cc;
    text-decoration: underline;
    font-size: 15px;
    margin: 6px 0 10px;
}

.map-link img {
    height: 1.8em;
    margin-right: 5px;
}

/* Googleマップリンク用の微調整（文字が光る演出） */
.map-link {
    display: inline-flex;
    align-items: center;
    color: #0066cc;
    font-weight: 700;
    transition: opacity 0.3s;
}

.map-link:hover {
    opacity: 0.7;
    color: rgba(231, 217, 22);
    transform: translateY(-3px);
    text-decoration: none;
}

/* 余白調整 */
.table-btn-area {
    margin-top: 20px;
}


/* ====外来点数の加算についての規定セクション===== */

#calculation {
    padding: var(--section-space) 0;
    padding-top: 20px;  
    padding-bottom: 20px; 
}

/* ニュースの箱と同じスタイル */
.calculation-container {
    background-color: var(--pure-white); /* 箱の中は白 */
    border: 1px solid #eeeeee;
    padding: 10px 30px;
}

.calculation-list {
    margin: 0;
    padding: 0;
}

/* 項目ごとの行設定 */
.calc-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px dashed #ddd;
    align-items: flex-start; /* 上揃え */
}

.calc-item:last-child {
    border-bottom: none;
}

/* 左側：項目名（幅を固定して垂直位置を揃える） */
.calc-title {
    width: 240px;           /* 項目名の長さに合わせて調整 */
    flex-shrink: 0;         /* 幅が縮まないように固定 */
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--main-color);
    font-size: 14px;
}

/* 右側：説明文（行間を引き締め、頭を揃える） */
.calc-txt {
    flex: 1;                /* 残りの幅をすべて使用 */
    margin: 0;
    font-size: 14px;
    line-height: 1.5;      
    color: var(--text-color);
    text-align: justify;    /* 両端を揃えて美しく */
}

/* ==========================================================================
   トップページ最下部：連携医療機関セクション（画像アクセント版）
   ========================================================================== */
#affiliated-hospitals {
    padding: 50px 0;
    background-color: rgba(253, 251, 247, 0.65); /* ほんのりアイボリー背景を透かす */
    border-top: 1px dashed var(--sub-color);
}

/* 画像とコンテンツを横並びにする親コンテナ */
.hospital-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 縦方向を中央揃えにして美しく */
    gap: 40px;
}

/* 左側のテキストエリア（全体の75%を使う） */
.hospital-main-content {
    flex: 1;
}

.hospital-title {
    font-size: 18px !important;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 12px !important;
}

.hospital-lead {
    font-size: 14px !important;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 25px !important;
    text-align: justify;
}

/* 病院リスト：1200px大画面の中で綺麗に2列でスッキリ並べる */
.hospital-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hospital-grid li {
    width: calc((100% - 12px) / 2); /* 2列配置 */
    font-size: 14px !important;
    color: var(--text-color);
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    padding-left: 24px;
    text-align: left;
}

/* 病院名の先頭に小さな医療アイコン風の「・」をCSSで添える */
.hospital-grid li::before {
    content: "＋";
    position: absolute;
    left: 8px;
    color: var(--main-color);
    font-size: 11px;
    font-weight: 700;
}

/* 右側の小さな画像枠（大きすぎないサイズに完全に固定） */
.hospital-side-img {
    flex: 0 0 240px; /* 横幅を240pxに固定 */
    height: 180px;   /* 4:3のすっきりした比率 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.08); /* ほんのり浮かせる上品な影 */
    background-color: #fff;
}

.hospital-deco-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように保護 */
}

/* ==========================================================================
   トップページ最下部：連携医療機関セクション（画像アクセント版）
   ========================================================================== */
#affiliated-hospitals {
    padding: 50px 0;
    background-color: rgba(253, 251, 247, 0.65); /* ほんのりアイボリー背景を透かす */
    border-top: 1px dashed var(--sub-color);
}

/* 画像とコンテンツを横並びにする親コンテナ */
.hospital-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 縦方向を中央揃えにして美しく */
    gap: 40px;
}

/* 左側のテキストエリア（全体の75%を使う） */
.hospital-main-content {
    flex: 1;
}

.hospital-title {
    font-size: 18px !important;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 12px !important;
}

.hospital-lead {
    font-size: 14px !important;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 25px !important;
    text-align: justify;
}

/* 病院リスト：1200px大画面の中で綺麗に2列でスッキリ並べる */
.hospital-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hospital-grid li {
    width: calc((100% - 12px) / 2); /* 2列配置 */
    font-size: 14px !important;
    color: var(--text-color);
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    padding-left: 24px;
    text-align: left;
}

/* 病院名の先頭に小さな医療アイコン風の「・」をCSSで添える */
.hospital-grid li::before {
    content: "＋";
    position: absolute;
    left: 8px;
    color: var(--main-color);
    font-size: 11px;
    font-weight: 700;
}

/* 右側の小さな画像枠（大きすぎないサイズに完全に固定） */
.hospital-side-img {
    flex: 0 0 240px; /* 横幅を240pxに固定 */
    height: 180px;   /* 4:3のすっきりした比率 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.08); /* ほんのり浮かせる上品な影 */
    background-color: #fff;
}

.hospital-deco-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように保護 */
}


/* ========================================
   トップへ戻るボタン
   角丸スクエア版
======================================== */

#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100; /* 他の要素より上に */
}

#page-top a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border-radius: 14px;

    border: 2px solid rgba(255,255,255,0.95);

    background-color: rgba(255,255,255,0.18);

    box-shadow: black 2px 2px 3px -2px;

    transition:
        transform 0.3s,
        opacity 0.3s,
        border-color 0.3s,
        background-color 0.3s;

    opacity: 0.8;
}


/* hover */

#page-top a:hover {

    transform: translateY(-3px);

    opacity: 1;

    border-color: #ffffff;

    background-color: rgba(255,255,255,0.26);
}


/* ==================================== 
         フッターセクション 
==================================== */
footer {
    background-color: var(--sub-color);
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

/* フッターのロゴ：初期状態 */
.footer-logo a {
    display: inline-block;
    transition: all 0.3s ease; /* 動きをなめらかにする */
}

/* フワッと少し浮き上がり、透明度を少し変える */
.footer-logo a:hover {
    transform: translateY(-3px); /* 3pxだけ上に浮く */
    opacity: 0.8;                /* ほんの少しだけ薄くする */
    filter: brightness(1.2);    /* 画像全体を少し明るくする */
} 

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
}

.footer-logo img {
    height: 50px; /* ヘッダーより少し控えめに */
    width: auto;
    margin-bottom: 15px;
}

.footer-address {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color);
}

.footer-nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列に並べてコンパクトに */
    gap: 10px 30px;
}

.footer-nav a {
    font-size: 13px;
    color: var(--main-color);
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

/* コピーライトエリア：高さを抑えつつ、中身を完璧に上下中央にする */
.copyright {
    background-color: var(--main-color);
    color: #ffffff;
    display: flex;            /* Flexboxを開始 */
    justify-content: center;  /* 左右中央 */
    align-items: center;       /* 上下中央（これで張り付きが解消されます） */
    height: 28px;             /* 帯の高さ自体を固定して細くする */
    box-sizing: border-box;
}

.copyright p {
    margin: 0 !important;    /* ブラウザが勝手につける上下余白を強制削除 */
    padding: 0 !important;   /* 内側の余白も強制削除 */
    font-size: 10px;
    letter-spacing: 0.1em;
    display: inline-block;   /* 余計な挙動をさせない */
    vertical-align: middle;  /* 垂直方向の基準を中央に */
    position: relative;
    top: -5px; /* 目視で5px上に持ち上げる（文字の「重み」対策） */
    
}



/* ===    ここから下層ページ用のスタイル    === */

/* --------------下層ページ共通ヘッダー--------------- */

.page-header-bg {
    width: 100%;
    height: 120px;              /* ★ここで高さを「短い幅」に固定します */
   
    background-size: cover;      /* ★画像の比率を保ったまま、エリアを埋め尽くす設定 */
    background-position: center; /* 画像のど真ん中を映す（上下左右の中央） */
    display: flex;
    align-items: center;         /* 文字を上下中央に */
    justify-content: center;     /* 文字を左右中央に */
    position: relative;
    overflow: hidden;
}

/* 2. bodyのクラス名によって、背景画像だけを差し替える */
body.greeting-page .page-header-bg { background-image: url(../img/bg-greeting.webp); }
body.access-page   .page-header-bg { background-image: url(../img/bg-access.webp); }
body.general-page  .page-header-bg { background-image: url(../img/bg-general.webp); }
body.kids-page     .page-header-bg { background-image: url(../img/bg-kids.webp); }
body.reserve-page  .page-header-bg { background-image: url(../img/bg-reserve.webp); }
body.first-page    .page-header-bg { background-image: url(../img/bg-first.webp); }

/* 文字を読みやすくするために、画像の上に薄い膜を張る */
.page-header-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.4); /* 白を40%被せて、下の画像を優しくぼかす */
    backdrop-filter: blur(2px);     /* さらに背景をぼかす（これで文字が際立ちます） */
    z-index: 1;
}

.page-header-bg h2 {
    position: relative;
    z-index: 2;
    color: var(--main-color);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 文字の周りを少し光らせて可読性アップ */
}
/* -------------------------------------- */

/* ==========================================================================
   院長紹介（greeting）ページ
   ========================================================================== */

/* --- ページヘッダー：隙間を物理的にゼロにしてナビに密着 --- */
.greeting-header {
    background-color: var(--base-color);
    padding: 0  10px 0.3em;
    margin: 0.2em auto; 
    text-align: center;
    border-bottom: 1px solid var(--sub-color); 
    box-sizing: border-box;
}
.greeting-header h2 {
    color: var(--main-color) ;
    font-size: 1.5rem;
    letter-spacing: 0.1em;

    /* 文字を右に動かす設定 */
    padding-left: 2em; /* 数値を大きくするほど右に寄ります。お好みで調整してください */
    text-align: left;  /* 中央揃えを解除して、左からの距離で位置を決めます */
    
    /* 背景画像の上で文字を浮き立たせる設定 */
    position: relative;
    z-index: 2;
}

/* --- レイアウト全体：1900pxでも間延びしないよう1000pxに制限 --- */
.greeting-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; /* 上部余白も引き締め */
}

.doctor-visual {
    flex: 0 0 350px;
    max-width: 350px;
}
.doctor-visual img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.doctor-detail {
    flex: 1;
}

/* 挨拶メッセージ部分 */
.doctor-name {
    font-size: 1.1rem;
    color: var(--main-color);
    margin-bottom: 5px;
}
.doctor-name span {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: var(--font-heading);
    margin: 0 10px;
}
.message-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--main-color);
}
.message-body p {
    margin-bottom: 1.2em;
    line-height: 1.7; /* 行間を少し引き締め */
}

/* --- セクション見出し：ラインアクセント形式 --- */
.career-section h4, 
.doctor-memo h4 {
    display: block;
    border-left: 6px solid var(--main-color);
    border-bottom: 1px solid var(--sub-color);
    padding: 5px 0 5px 15px;
    margin: 25px 0 10px 0;
    color: var(--main-color);
    position: relative;
}
/* イエローのマーカー */
.career-section h4::before,
.doctor-memo h4::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60%;
    background-color: var(--accent-color);
}

.doctor-memo .career-list {
  font-size: 15px; /* 文字サイズを15pxに固定 */
}


/* 資格リスト内の複数行対応 */
.career-list dd br {
    margin-bottom: 5px;
}

/* =============================================
    ここから診療時間・アクセスページ用のスタイル
============================================== */

/* --- アクセスページ内のセクション間の高さを縮める --- */

/* 1. 各セクション（診療時間・交通・地図）の上下の隙間を最小限に */
#access-detail section {
    padding-top: 10px;  
    padding-bottom: 16px; }


/* 2. 各セクションのタイトル(h4)の上の無駄な空きを消す */
#access-detail .career-section h4 {
    margin-top: 5px;      /* ほぼゼロに近い感覚まで詰める */
}

/* 3. 項目同士（career-section）の間隔も狭める */
#access-detail .career-section {
    margin-bottom: 15px;  /* 35pxなどになっていたら15px程度に */
}

/* 診療時間テーブルの詳細設定 */
.table-wrapper {
    max-width: 900px; /* ★ここがポイント：これ以上横に広がらないようにする */
    margin: 0 auto ; /* 中央に寄せつつ、下に余白を作る */
    overflow-x: auto; /* 万が一の横はみ出し対策 */
}

.time-table-detailed {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--pure-white);
}

.time-table-detailed th, 
.time-table-detailed td {
    border: 1px solid #ddd;
    padding: 15px 20px;
    text-align: center;
}

.time-table-detailed th {
    background-color: #f1f4f8;
    color: var(--main-color);
    font-weight: 700;
}

.table-note {
    font-size: 14px; /* 注釈は少し小さめに */
    color: #ff0000;
    margin-top: 10px;
    line-height: 1.6;
}

/* 地図の枠 */
.google-map {
    margin-top: 15px;
    line-height: 0;
    border: 1px solid #eee;
}

/* 当日web予約のこと */
.reserve-notice {
    background-color: #fff; /* ボックスの中でさらに白背景にして目立たせる */
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #dcdcdc;
    text-align: left; /* 箇条書きは左揃えが読みやすい */
    display: inline-block; /* 中央に寄せるため */
    max-width: 500px;
}

.reserve-notice p {
    color: #c53030; /* 警告・注意の赤色（少し落ち着いた赤） */
    font-size: 15px;
    margin-bottom: 5px !important;
    text-align: center; /* 注意文は中央揃えに */
}

.reserve-notice ul {
    list-style: none;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
}

.reserve-notice li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 5px;
}

.reserve-notice li::before {
    content: "※";
    position: absolute;
    left: 0;
}



/* ボックス全体を中央揃えに強制 */

/* ボタンのコンテナ */
.btn-container {
    width: 100%;
    margin: 20px 0;
}

/* 予約ボタン：さらにリッチな動き */
.reserve-btn-large {
    display: inline-block;
    background-color: var(--main-color);
    color: #fff !important;
    padding: 18px 60px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 0 #0d1b2f; /* 立体感のある影（ボタンの厚み） */
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden; /* 光る演出用 */
}

/* ホバー時の動き：ボタンが押し込まれるような演出 */
.reserve-btn-large:hover {
    transform: translateY(3px); /* 3px下に沈む */
    box-shadow: 0 1px 0 #0d1b2f; /* 影を薄くして押し込んだ感を出す */
    background-color: #234677;
}

/* さらに光が走るエフェクト */
.reserve-btn-large::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.5s;
}

.reserve-btn-large:hover::after {
    left: 120%; /* マウスを載せると光が左から右へ走り抜ける */
}

/* 予約ボックス全体：1900pxでも中央にどっしり配置 */
.reserve-action-box {
    display: flex;
    flex-direction: column; /* 縦並びを強制 */
    align-items: center;    /* 中央揃え */
    text-align: center;
    padding: 40px 20px;
    background-color: var(--accent-color); /* ベビーイエロー */
    border-radius: 12px;
    margin: 40px auto;
    max-width: 800px;       /* 横に広がりすぎないよう制限 */
}

.reserve-main-txt {
    font-weight: 700;
    margin-bottom: 20px !important;
    font-size: 1.1rem;
    color: var(--main-color);
}

/* 注意書き：白背景で読みやすく */
.reserve-notice {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: left; /* リストは左揃えが綺麗 */
    width: 90%;
    max-width: 500px;
}

.notice-title {
    color: #c53030; /* 注意を促す赤 */
    font-weight: 700;
    margin-bottom: 10px !important;
}

.reserve-notice li {
 color: #ff0000;
}

/* ★リッチな予約ボタン：沈み込み ＋ 光の演出 */
.reserve-btn-rich {
    display: inline-block;
    background-color: var(--main-color);
    color: #fff !important;
    padding: 20px 60px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    /* ボタンの厚み（影） */
    box-shadow: 0 6px 0 #0d1b2f; 
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* ホバー：ボタンが実際に「押された」ように沈む */
.reserve-btn-rich:hover {
    transform: translateY(4px);    /* 下に沈む */
    box-shadow: 0 2px 0 #0d1b2f;   /* 影を薄くして押し込みを表現 */
    background-color: #234677;     /* 少し色を明るく */
}

/* ボタン表面を光が走り抜ける演出 */
.reserve-btn-rich::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(30deg);
}

.reserve-btn-rich:hover::after {
    left: 150%;
    transition: 0.6s;
}

/* ===予約方法（reserve）ページはここから==== */

.reserve-sub-text {
    font-size: 14px;
    color: #666;
    margin-top: 15px !important;
}

.reserve-sub-text.text-alert {
    color: #c53030 !important;
}

/* i-Call案内ボックス：清潔感のあるライトブルー系で差別化 */
.icall-status-container {
    background-color: #f8fafc;
    border: 1px solid var(--sub-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
}

.icall-header {
    background-color: var(--main-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.icall-badge {
    background-color: var(--accent-color);
    color: var(--main-color);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.icall-info-title {
    color: #fff !important;
    font-weight: 700;
    margin: 0 !important;
}

.icall-body {
    padding: 20px;
}

.icall-status-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #cbd5e1;
}

.icall-status-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.status-label {
    flex: 0 0 110px;
    background-color: #e2e8f0;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 700;
    height: fit-content;
    padding: 4px 0;
    text-align: center;
    border-radius: 4px;
}

.status-label.alert {
    background-color: #fed7d7;
    color: #c53030;
}

.status-content {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 !important;
}

/* 機能リストをボタン風に見せる */
.icall-functions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.func-item {
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    padding: 5px 15px;
    border-radius: 20px;
    color: #4f58d1;
    font-weight: 700;
    
    /* ★リッチな立体感を出すシャドウを追加 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 
                inset 0 -1px 0 rgba(0, 0, 0, 0.1); 
    
    display: inline-block;
    transition: all 0.2s ease;
}

.func-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    border-color: var(--main-color);
    color: var(--main-color);
}

/* ===============================
   初診の方へのページはここから
  ================================ */
/* イラストとテキストの横並び：上端で綺麗に揃える設定 */
.item-with-img {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ★centerからflex-startへ変更（上端揃えに強制） */
    gap: 20px;
    width: 100%;
}

.first-icon {
    width: auto;
    max-width: 100px;
    height: auto;
    max-height: 80px;
    flex-shrink: 0; /* ★画面が狭くなっても画像が絶対に潰れないお守り */
}

/* Adobe案内 */
.adobe-guide {
    margin-top: 20px;
    font-size: 13px;
}

/* --- 初診の流れ：構造調整 --- */
.flow-item {
    background: #fff;
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 画像とタイトルを同じ高さで横並びにする */
.flow-header {
    display: flex;
    align-items: center; /* 上下中央で綺麗に揃える */
    gap: 15px;           /* 画像と文字の間の隙間 */
    margin-bottom: 10px; /* 下のp文との隙間 */
}

/* 数字イラスト画像のサイズ固定 */
.flow-img {
    width: 70px;
    height: auto;
    object-fit: contain; /* 画像が歪まないように保護 */
    flex-shrink: 0;      /* 画像が押し潰されるのを防ぐ */
}

.flow-item h5 {
    font-size: 18px;
    letter-spacing: 0.1em;
    color: var(--main-color);
    font-weight: 600;
    margin: 0 !important; /* 横並びがずれないよう余白をリセット */
}

/* 下の行のp文 */
.flow-item p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 !important;
    /* 必要に応じて、画像の幅(80px+隙間15px=95px)の分だけ左に余白を入れて、
       文字の始まりをタイトルと揃えるときれいです */
    padding-left: 95px; 
}

/* 最後の2連ボタン 
最後のボタンエリア全体のレイアウト */
.final-action-area {
    width: 80%;
    margin: 60px auto 20px;
    padding: 50px 20px;
    background-color: var(--accent-color); /* エリア全体をベビーイエローにして注目させる */
    text-align: center;
    border-radius: 15px;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 30px; /* ボタン同士の適度な距離 */
    flex-wrap: wrap;
}

/* --- WEB予約（紺色）の装い --- */
.action-reserve {
    background-color: var(--main-color) !important;
    color: #fff !important;
}

/* --- アクセス（白色）の装い --- */
.action-access {
    background-color: #fff !important;
    color: var(--main-color) !important;
    box-shadow: 0 6px 0 #dcdcdc !important; /* 白ボタン用の少し明るい影 */
}

.action-access:hover {
    box-shadow: 0 2px 0 #dcdcdc !important; /* 押し込んだ時の影 */
}

/* 白ボタン用の「光の反射」を少し濃くして見えやすくする */
.action-access::before {
    background: linear-gradient(
        to right,
        rgba(26, 54, 93, 0) 0%,
        rgba(26, 54, 93, 0.1) 50%, /* 紺色の光が走る */
        rgba(26, 54, 93, 0) 100%
    ) !important;
}

.action-message {
    font-weight: 700;
    margin-bottom: 25px !important;
    text-align: center;

    line-height: 1.9;
}

.action-btn {
    flex: 1;
    max-width: 300px;
    padding: 18px 0;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
}
/* アクセスは白、予約は紺で強弱をつける */
.action-btn.access {
    background: #fff;
    color: var(--main-color);
    border: 2px solid var(--main-color);
}
.action-btn.reserve {
    background: var(--main-color);
    color: #fff;
}
.action-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}



/* ========================================================
   一般皮膚科：クリック開閉式・症状写真レイアウトのページはここから
  ======================================================== */
/* --- 一般皮膚科：クリック開閉式・症状写真レイアウト --- */
.disease-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.disease-text {
    flex: 1;
}

/* ★開閉パーツ（details）全体の幅を一回り大きく（180px）広げる */
.disease-img-details {
    flex: 0 0 180px;
    text-align: center;
}

/* 「症状例を見る」というボタンの見た目 */
.disease-img-summary {
    font-size: 12px; 
    font-weight: 700;
    color: var(--main-color);
    background-color: var(--accent-color); /* ベビーイエロー */
    padding: 6px 0;          /* 上下を少し広げてボタンとしての存在感をアップ */
    border-radius: 4px;
    cursor: pointer;
    list-style: none;        /* デフォルトの三角矢印を消す */
    outline: none;
    border: 1px solid var(--main-color);
    transition: background-color 0.2s;
}

.disease-img-summary:hover {
    background-color: #fff4d1;
}

/* Webkit系（Safari/Chrome）の三角矢印を消す */
.disease-img-summary::-webkit-details-marker {
    display: none;
}

/* ★クリックして現れる写真の枠（見やすさ重視：180px × 135px） */
.disease-img-wrap {
    width: 180px;
    height: 135px;
    margin-top: 10px;
    border-radius: 6px;      /* 少し角を丸くして上品に */
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); /* 画像が大きくなった分、影も少しリッチに */
    background-color: var(--pure-white);
}

.disease-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   PCではスマホUIを非表示
========================================================= */

.hamburger-btn,
.mobile-menu,
.mobile-fixed-footer {
    display: none;
}


/* 夜のレスポンシブ用の安全装置：スマホでは画像を非表示にしてリストを1列にする */
@media (max-width: 750px) {
    .hospital-container {
        flex-direction: column;
    }
    .hospital-side-img {
        display: none; /* スマホでは目立たせないために画像を非表示にする */
    }
    .hospital-grid li {
        width: 100%; /* スマホでは1列にする */
    }
}


/* =========================================================
   スマホ専用レスポンシブ（750px以下）
========================================================= */

@media screen and (max-width: 750px) {

    /* ========================================
       共通
    ======================================== */

    html,
    body {
        overflow-x: hidden;
    }

    body {
        padding-bottom: 68px !important;
    }

    .inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tp-section {
        padding: 48px 0;
    }


    /* ========================================
       header
    ======================================== */

    header {
        position: sticky;
        top: 0;
        z-index: 999;

        background-color: rgba(255,255,255,0.96);
        backdrop-filter: blur(8px);

        border-bottom: 1px solid #e5e7eb;
    }

    .header-upper {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        min-height: 64px;

        padding: 10px 0;
    }

    .header-info,
    .g-nav {
        display: none !important;
    }

    .header-logo {
        width: 100%;
    }

    .header-logo img {
        height: 40px;
        width: auto;
        max-width: 200px;
    }


    /* ========================================
       ハンバーガーボタン完成版
    ======================================== */

    .hamburger-btn {
        position: fixed !important;

        top: 27px !important;
        right: 16px !important;

        width: 58px;
        height: 58px;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        background-color: var(--main-color) !important;

        border-radius: 14px;

        border: 2px solid var(--accent-color);

        z-index: 10000;

        box-shadow: 0 8px 24px rgba(26,54,93,0.22);

        cursor: pointer;
    }

    /* 三本線 */

    .hamburger-btn span {
        width: 22px !important;
        height: 2px !important;

        background-color: #ffffff !important;

        border-radius: 10px;

        transition: all 0.3s ease;
    }

    /* MENU文字 */

    .hamburger-btn::after {
        content: "MENU";

        position: absolute;

        bottom: 7px;
        left: 50%;

        transform: translateX(-50%);

        color: #ffffff;

        font-size: 8px;
        font-weight: 700;

        letter-spacing: 0.08em;

        line-height: 1;
    }

    /* active時 */

    .hamburger-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* ========================================
    ドロワー全体
    ======================================== */

    .mobile-menu {
        
        display: block !important;
        position: fixed;

        top: 10px;
        right: -100%;

        width: 78%;

        max-width: 320px;

        height: auto;

        min-height: 520px;

        max-height: calc(100vh - 20px);

        background-color: var(--main-color);

        border-radius: 22px 0 0 22px;

        overflow: hidden;

        z-index: 9999;

        transition: right 0.3s ease;

        box-shadow:
            -8px 0 24px rgba(0,0,0,0.22);
    }


    /* 開いた状態 */

    .mobile-menu.active {
        right: 0;
    }


    /* ========================================
    上部ヘッダー
    ======================================== */

    .mobile-menu-header {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        padding:
            18px 22px 10px;
    }


    /* ========================================
    シンボル
    ======================================== */

    .mobile-menu-symbol img {

        width: 64px;

        height: auto;

        display: block;

        border-radius: 16px;

        padding: 5px;
        
        background-color: var(--accent-color);

        /* background-color: rgba(255,255,255,0.06); */

        border: 2px solid var(--base-color);

        box-shadow:
            0 0 14px rgba(254,243,199,0.22);
    }


    /* ========================================
    メニューリスト
    ======================================== */

    .mobile-menu ul {

        list-style: none;

        margin: 0;

        padding: 4px 0 10px;

        display: flex;

        flex-direction: column;
    }


    /* 各項目 */

    .mobile-menu li a {

        display: block;

        padding: 18px 24px;

        color: #fff;

        text-decoration: none;

        font-size: 1rem;

        font-weight: 700;

        border-top:
            1px solid rgba(255,255,255,0.08);

        position: relative;

        overflow: hidden;

        transition:
            background-color 0.25s ease,
            transform 0.25s ease,
            padding-left 0.25s ease;
    }

    /* hover・タップ */

    .mobile-menu li a:hover,
    .mobile-menu li a:active {

        background-color:
            rgba(255,255,255,0.08);

        padding-left: 30px;

        transform: translateX(2px);
    }

        /* 光 */

    .mobile-menu li a::before {

        content: "";

        position: absolute;

        top: 0;
        left: -120%;

        width: 70%;

        height: 100%;

        background:
            linear-gradient(
                120deg,
                transparent,
                rgba(255,255,255,0.18),
                transparent
            );

        transition: left 0.45s ease;
        }


        /* hover時 */

        .mobile-menu li a:hover::before,
        .mobile-menu li a:active::before {

            left: 130%;
        }

    /* ========================================
    ドロワー背景暗転
    ======================================== */

    .mobile-menu-overlay {

        display: none;

        position: fixed;

        inset: 0;

        background:
            rgba(0,0,0,0.38);

        z-index: 9997;

        opacity: 0;

        transition:
            opacity 0.3s ease;
    }


    /* 開いた時 */

    .mobile-menu-overlay.active {

        display: block;

        opacity: 1;
    }

    /* ========================================
       hero
    ======================================== */

    #hero {
        height: 62vh;
        min-height: 420px;
    }

    .hero-content {
        padding-bottom: 32px;
    }

    .hero-content h1 {
        font-size: 1.35rem;
        line-height: 1.7;

        padding: 18px 20px;

        width: calc(100% - 16px);
        max-width: 92%;

        border-left-width: 6px;
    }


    /* ========================================
       お知らせ
    ======================================== */

    .news-scroll-box {
        height: auto;
        max-height: 320px;
        padding: 14px 16px;
    }

    .news-list li {
        flex-direction: column;
        gap: 6px;
    }

    .news-txt {
        margin-left: 0;
        font-size: 14px;
        line-height: 1.7;
    }


    /* ========================================
       診療案内カード
    ======================================== */

    .service-flex {
        flex-direction: column !important;
        gap: 24px;
    }

    .service-card {
        width: 100%;
    }

    .service-img img {
        height: 220px;
    }

    .service-body {
        padding: 18px;
    }

    .service-body h3 {
        font-size: 1.25rem;
    }

    .service-body p {
        height: auto;
        overflow: visible;

        font-size: 14px;
        line-height: 1.8;

        margin-bottom: 18px;
    }


    /* ========================================
       診療時間・アクセス
    ======================================== */

    .access-flex {
        flex-direction: column !important;
        gap: 40px;
    }

    .time-table,
    .access-summary {
        width: 100%;
    }


    .time-table table {
    width: 100% !important;

    table-layout: fixed;

    border-collapse: collapse;

    display: table;

    font-size: 11px;
    }

    .time-table th,
    .time-table td {
        padding: 10px 2px;

        text-align: center;

        word-break: keep-all;
    }

    /* 左端の「診療時間」列だけ少し広く */

    .time-table th:first-child,
    .time-table td:first-child {
        width: 34%;
    }


    .summary-tel {
        font-size: 1.15rem;
    }


    /* ========================================
       外来点数加算
    ======================================== */

    .calculation-container {
        padding: 12px 16px;
    }

    .calc-item {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }

    .calc-title {
        width: 100%;
        font-size: 15px;
        font-weight: 700;
    }

    .calc-txt {
        font-size: 14px;
        line-height: 1.8;
    }


    /* ========================================
       連携病院
    ======================================== */

    .hospital-container {
        flex-direction: column !important;
        gap: 24px;
    }

    .hospital-main-content {
        width: 100%;
    }

    .hospital-grid {
        flex-direction: column;
        gap: 10px;
    }

    .hospital-grid li {
        width: 100% !important;
        font-size: 13px !important;
        line-height: 1.6;
    }

    .hospital-side-img {
        display: none;
    }


    /* ========================================
       下層ページ共通
    ======================================== */

    .page-header-bg {
        height: 90px;
    }

    .page-header-bg h2 {
        font-size: 1.35rem;
        text-align: center;
        padding: 0 12px;
    }


    /* ========================================
       greetingページ
    ======================================== */

    .greeting-wrapper {
        flex-direction: column !important;
        gap: 24px;
        padding: 0 16px;
    }

    .doctor-visual {
    width: 78%;

    max-width: 320px;

    margin: 0 auto;

    flex: none;
    }

    .doctor-visual img {
        width: 100%;
        height: auto;

        border-radius: 8px;
    }
    .doctor-name {
        font-size: 1rem;
    }

    .doctor-name span {
        font-size: 1.5rem;
    }

    .message-title {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .career-list {
        display: block !important;
    }

    .career-list dt,
    .career-list dd {
        width: 100% !important;
        display: block;
    }

    .career-list dt {
        padding-bottom: 4px;
        border-bottom: none;
    }

    .career-list dd {
        padding-top: 0;
        margin-bottom: 16px;
    }


    /* ========================================
       access：診療時間テーブル修正版
    ======================================== */

    .table-wrapper {
        overflow-x: visible;
    }

    .time-table-detailed {
        width: 100% !important;

        min-width: 0 !important;

        table-layout: fixed;

        font-size: 11px;
    }

    .time-table-detailed th,
    .time-table-detailed td {
        padding: 10px 2px;

        word-break: keep-all;

        text-align: center;
    }

    /* 左列だけ少し広め */

    .time-table-detailed th:first-child,
    .time-table-detailed td:first-child {
        width: 34%;
    }

    /* ========================================
    access：予約ボタン縮小
    ======================================== */

    .reserve-btn-large {
        width: 88%;

        max-width: 320px;

        padding: 16px 18px;

        font-size: 1rem;

        line-height: 1.5;

        border-radius: 40px;
    }

    /* ========================================
    access：GoogleMap高さ調整
    ======================================== */

    .google-map iframe {
        height: 320px !important;
    }

    /* ========================================
       reserveページ
    ======================================== */

    /* ========================================
    section間隔
    ======================================== */

    #reserve-detail .career-section {
        margin-bottom: 22px;
    }


    .reserve-notice {
        width: 100%;
    }

    .icall-status-row {
        flex-direction: column;
        gap: 8px;
    }

    .status-label {
        width: 100%;
        flex: none;
    }

    /* ========================================
    reserveページ：スマホ最適化
    ======================================== */


    /* 全体余白 */

    #reserve-detail section {
        padding-top: 22px;
        padding-bottom: 22px;
    }


    /* 見出し下余白 */

    #reserve-detail .career-section h4 {
        margin-bottom: 18px;
    }


    /* 本文の行間 */

    #reserve-detail p,
    #reserve-detail dd,
    #reserve-detail li {
        line-height: 1.9;
    }


    /* ========================================
    i-Callボックス
    ======================================== */

    .icall-status-container {
        margin-top: 12px;

        border-radius: 10px;

        overflow: hidden;
    }


    /* 上部タイトル帯 */

    .icall-header {
        padding: 10px 14px;

        gap: 10px;
    }


    /* バッジ */

    .icall-badge {
        font-size: 10px;

        padding: 3px 8px;
    }


    /* タイトル */

    .icall-info-title {
        font-size: 15px;
    }


    /* 本文 */

    .icall-body {
        padding: 16px;
    }


    /* 状況行 */

    .icall-status-row {
        gap: 10px;

        margin-bottom: 12px;

        padding-bottom: 12px;
    }


    /* ラベル */

    .status-label {
        font-size: 12px;

        padding: 5px 0;
    }


    /* 本文 */

    .status-content {
        font-size: 14px;

        line-height: 1.8;
    }


    /* ========================================
    ボタン群
    ======================================== */

    .icall-functions {
        gap: 12px;

        margin-top: 18px;
    }


    /* 各ボタン */

    .func-item {
        font-size: 12px;

        padding: 7px 16px;

        border-radius: 999px;

        line-height: 1.4;
    }


    /* ========================================
    reserve-action-box
    ======================================== */

    .reserve-action-box {
        width: 92%;

        max-width: 520px;

        margin: 28px auto;

        padding: 22px 14px;

        border-radius: 12px;
    }


    /* 説明文 */

    .reserve-main-txt,
    .reserve-txt {
        font-size: 0.8rem;

        line-height: 1.9;

        margin-bottom: 18px !important;
    }


    /* 注意ボックス */

    .reserve-notice {
        width: 100%;

        padding: 16px 14px;

        border-radius: 8px;
    }


    /* 注意本文 */

    .reserve-notice li,
    .reserve-notice p {
        font-size: 13px;

        line-height: 1.8;
    }

    /* ========================================
    reserve：スマホボタン文字最適化
    ======================================== */
    /* ========================================
    general / kids：予約ボタン最適化
    ======================================== */

    .reserve-btn-rich {
        width: 96%;

        max-width: 340px;

        padding: 15px 18px;

        font-size: 0.78rem;

        line-height: 1.4;

        letter-spacing: 0.01em;

        border-radius: 40px;

        margin: 0 auto;

        white-space: nowrap;

        text-align: center;
    }
    /* 補足文 */

    .reserve-sub-text {
        font-size: 12px;

        line-height: 1.8;

        margin-top: 16px !important;
    }

    /* ========================================
    初診の方へ
    ======================================== */

    .item-with-img {
        flex-direction: column !important;
        gap: 12px;
    }

    .first-icon {
        max-width: 72px;
        margin: 0 auto;
    }

    .flow-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .flow-img {
        width: 60px;
    }

    .flow-item p {
        padding-left: 0;
        margin-top: 10px !important;
    }

    .action-buttons {
        flex-direction: column;
    }

    /* section間の余白整理 */

    #first-detail section {
        padding-top: 22px;
        padding-bottom: 22px;
    }


    /* 見出し下余白 */

    #first-detail .career-section h4 {
        margin-bottom: 18px;
    }


    /* 本文 */

    #first-detail p,
    #first-detail dd,
    #first-detail li {
        line-height: 1.9;
    }


    /* ========================================
    必要な持ち物エリア
    ======================================== */

    /* 小画像＋テキスト */

    .item-with-img {
        display: flex !important;

        flex-direction: row !important;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 18px;
    }


    /* アイコン */

    .first-icon {
        width: 56px;

        max-width: 56px;

        flex-shrink: 0;

        margin: 0;
    }


    /* 説明文 */

    .item-with-img p,
    .item-with-img dd {
        flex: 1;
    }


    /* ========================================
    問診票ダウンロード
    ======================================== */

    .adobe-guide {
        margin-top: 14px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* ダウンロードボタン */

    .reserve-btn-large {
        width: 88%;

        max-width: 280px;

        padding: 14px 14px;

        font-size: 0.8rem;

        line-height: 1.5;

        border-radius: 40px;

        white-space: nowrap;
    }


    /* Adobe画像 */

    .adobe-guide img {
        width: 110px;

        height: auto;

        margin-top: 8px;
    }


    /* ========================================
    初診フロー
    ======================================== */

    .flow-item {
        padding: 14px 14px;

        margin-bottom: 14px;

        border-left-width: 3px;
    }


    /* 上部 */

    .flow-header {
        display: flex;

        flex-direction: row !important;

        align-items: center;

        gap: 12px;

        margin-bottom: 10px;
    }


    /* 数字アイコン */

    .flow-img {
        width: 52px;

        flex-shrink: 0;
    }


    /* タイトル */

    .flow-item h5 {
        font-size: 17px;

        line-height: 1.5;
    }


    /* 本文 */

    .flow-item p {
        padding-left: 0 !important;

        font-size: 13px;

        line-height: 1.8;

        margin-top: 0 !important;
    }


    /* ========================================
    first：最下部CTA最終調整
    ======================================== */

        /* 上部テキスト */

    .action-message {
        font-size: 0.8rem;

        line-height: 1.9;

        margin-bottom: 18px !important;
    }

    /* 背景BOX */

    .final-action-area {
        width: 92%;

        max-width: 420px;

        margin: 34px auto 18px;

        padding: 22px 14px;

        border-radius: 12px;
    }


    /* ボタン群 */

    .action-buttons {
        gap: 10px;
    }


    /* ボタン */

    .action-btn {
        width: 82%;

        max-width: 240px;

        padding: 13px 10px;

        border-radius: 40px;

        margin: 0 auto;
    }

    /* ========================================
    section間整理
    ======================================== */

    #first-detail .career-section {
        margin-bottom: 24px;
    }


    /* ========================================
    一般皮膚科・小児皮膚科
    ======================================== */

    .disease-box {
        display: block !important;
    }

    /* ========================================
    スマホ専用：症例画像アコーディオン修正版
    ======================================== */

    @media screen and (max-width: 750px) {

    /* details本体 */

    .disease-img-details {
        width: 100%;

        display: block;

        margin-top: 10px;

        text-align: center;
    }

    /* ボタン */

    .disease-img-summary {
        display: inline-block;

        min-width: 140px;

        padding: 8px 18px;

        font-size: 12px;

        border-radius: 6px;

        text-align: center;
    }

    /* 超重要：
    閉じている時は高さ完全ゼロ */

    .disease-img-details:not([open]) .disease-img-wrap {
        display: none;
    }

    /* 開いた時だけ高さ生成 */

    .disease-img-details[open] .disease-img-wrap {
        display: block;

        width: 68%;

        max-width: 220px;

        height: 135px;

        margin: 10px auto 0;

        overflow: hidden;

        border-radius: 8px;
    }
    .disease-img-details[open] .disease-photo {
        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;
    }

    }


    /* ========================================
    固定フッター
    ======================================== */

    footer {
        display: none !important;
    }

    .mobile-fixed-footer {
        position: fixed;

        bottom: 0;
        left: 0;

        width: 100%;
        height: 68px;

        display: flex !important;

        z-index: 9999;

        border-top: 2px solid var(--main-color);

        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }
    .fixed-foot-btn {
        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        text-decoration: none;

        padding-bottom: env(safe-area-inset-bottom);
    }

    .fixed-foot-btn.tel {
        background-color: var(--accent-color);
        color: var(--main-color);
    }

    .fixed-foot-btn.access {
        background-color: var(--accent-color);
        color: var(--main-color);

        border-left: 2px solid #ffffff;
    }

    .foot-tell-icon {
        width: 20px;
        height: 20px;

        margin-right: -2px;
    }

    .foot-map-icon {
        width: 22px;
        height: 22px;

        object-fit: contain;

        margin-right: -4px;
    }

    .foot-label {
        line-height: 1;

        font-size: 15px;
        font-weight: 600;
        color: var(--main-color);

        letter-spacing: 0.05em;
    }


    /* ========================================
       トップへ戻るボタン
    ======================================== */

    #page-top {
        bottom: 90px;
        right: 16px;
    }

    #page-top a {
        width: 42px;
        height: 42px;
    }


    /* ========================================
       共通余白調整
    ======================================== */

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    p {
        line-height: 1.8;
    }

}

.demo-note {
    margin-top: 10px;

    font-size: 11px;

    line-height: 1.7;

    color: #b6b5b5;

    text-align: center;
}