/* style.css */

/* ハンバーガーボタン */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 10px;
  color: #fff;
}

/* メニュー本体（デフォルトは横並び） */
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

/* スマホ表示でアコーディオン化 */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    background-color: var(--primary-color);
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu a {
    width: 100%;
    padding: 10px 15px;
    display: block;
  }
}


.nav-menu {
  display: none;
  /* ...省略... */
}
.nav-menu.open {
  display: flex;
}


/* 基本設定とリセット */
:root {
    --primary-color: #4a6da7; /* テーマカラー（例） */
    --secondary-color: #f0f4f8; /* 背景などに使う薄い色（例） */
    --text-color: #333;
    --text-light: #555;
    --border-color: #ddd;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --button-bg: var(--primary-color);
    --button-text: #fff;
    --button-hover-bg: #3a5685;
    --reserve-button-mobile-bg: #28a745; /* スマホ用予約ボタン背景色 (緑系の例) */
    --reserve-button-mobile-hover-bg: #218838; /* スマホ用予約ボタンホバー背景色 */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* 基本のフォントサイズ */
}

body {
    font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
    line-height: 1.7;
    color: var(--text-color);
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* 余白対策 */
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.8em;
    line-height: 1.4;
    font-weight: 600; /* 少し太めに */
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; color: var(--primary-color); }
h3 { font-size: 1.4rem; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.3em; margin-top: 2em;}
h4 { font-size: 1.2rem; margin-top: 1.5em; }

p {
    margin-bottom: 1.2em;
    color: var(--text-light);
}

address {
    font-style: normal; /* addressタグのイタリック解除 */
    line-height: 1.5;
}

/* コンテナ */
.container {
    max-width: 1100px; /* 最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ボタン */
.button {
    display: inline-block;
    padding: 0.6em 1.2em;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* border-colorもtransitionに追加 */
}

.button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-text);
    text-decoration: none;
}

/* ヘッダー */
.site-header {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    background-color: #fff;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* スマホで折り返す */
}

.logo h1 {
    margin: 0; /* h1のデフォルトマージン解除 */
    font-size: 1rem; /* 見出しレベルは維持しつつサイズ調整 */
}
.logo img {
    max-height: 50px; /* ロゴの高さ調整 */
}

.header-info {
    text-align: right;
    font-size: 0.9rem;
}
.header-info address {
    margin-bottom: 0.5em;
}
/* PC表示での予約ボタンのスタイル */
.reserve-button {
    font-size: 0.9rem;
    padding: 0.5em 1em;
}

/* グローバルナビゲーション */
.global-nav {
    background-color: var(--primary-color);
    padding: 5px 0;
}
.global-nav ul {
    list-style: none;
    display: flex;
    justify-content: center; /* 中央揃え */
    flex-wrap: wrap; /* 折り返し */
}
.global-nav li {
    margin: 0 10px;
}
.global-nav a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.global-nav a:hover,
.global-nav a.selected {
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
.global-nav a.selected {
    cursor: default; /* 選択中の項目はクリックできないように */
    background-color: rgba(255, 255, 255, 0.1); /* 少しだけ色を変える */
}

/* ページタイトルバー */
.page-title-bar {
    background-color: var(--secondary-color);
    padding: 25px 0;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}
.page-title-bar h2 {
    margin: 0;
    border-bottom: none; /* h2のデフォルトスタイル上書き */
}

/* メインコンテンツ */
.main-content {
    padding-bottom: 40px; /* フッターとのスペース */
}
.content-wrapper {
    /* 必要なら背景色やパディング追加 */
}

/* 各セクション */
.clinic-section {
    margin-bottom: 40px;
}
.clinic-policy p:last-child {
    margin-bottom: 0;
}

/* スタッフ情報 */
.staff-member {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--secondary-color);
}
.staff-member h4 {
    margin-top: 0; /* 最初の見出しのマージン削除 */
    margin-bottom: 1em;
    color: var(--primary-color);
}

.staff-details dt {
    font-weight: bold;
    margin-top: 1em;
    /* color: var(--primary-color); */ /* 強調する場合 */
}
.staff-details dd {
    margin-left: 0; /* デフォルトのマージンリセット */
    margin-bottom: 0.5em;
    color: var(--text-light);
    padding-left: 1em; /* 字下げ */
    border-left: 3px solid var(--primary-color); /* 左にアクセント */
}
.staff-details dt:first-of-type {
    margin-top: 0;
}

/* 院内写真ギャラリー */
.clinic-gallery h3 {
    margin-bottom: 1.5em;
}
.gallery-grid {
    display: grid;
    /* 最小180px、最大1fr(均等割)で自動的にカラム数を調整 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px; /* グリッドアイテム間の隙間 */
}
.gallery-grid figure {
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden; /* はみ出し防止 */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 画像のアスペクト比を固定 */
    object-fit: cover; /* 比率を保ちつつ領域を埋める */
}
.gallery-grid figcaption {
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    background-color: var(--secondary-color);
}

/* フッター */
.site-footer {
    background-color: #333;
    color: #eee;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 40px; /* メインコンテンツとのスペース */
}
.site-footer p {
    margin: 0;
    color: #ccc; /* 文字色を調整 */
}

/* ========================================= */
/* レスポンシブ対応 (768px以下)             */
/* ========================================= */
@media (max-width: 768px) {
    html {
        font-size: 15px; /* スマホ用に少しフォントサイズを小さく */
    }

    /* ヘッダー: ロゴと情報を縦積み、左揃え */
    .header-container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ヘッダー情報ブロック（住所と予約ボタン） */
    .header-info {
        text-align: left;    /* テキスト左揃え */
        margin-top: 10px;    /* ロゴとの間に少しマージン */
        width: 100%;         /* 幅を100%に */
        margin-bottom: 20px; /* 下にマージンを追加してナビとの間隔を確保 */
    }

    /* アプリ予約ボタンのスタイル（スマホ用） */
    .reserve-button {
        /* サイズ調整 */
        padding: 0.8em 1.6em; /* パディングを増やして大きく */
        font-size: 1rem;      /* フォントサイズも少し大きく */

        /* 色の変更 */
        background-color: var(--reserve-button-mobile-bg); /* 変数で指定した背景色 */
        border: 1px solid var(--reserve-button-mobile-bg); /* 枠線も同色に */
        color: #ffffff;           /* 文字色は白 */

        /* レイアウト調整 */
        display: inline-block; /* インラインブロック要素に */
        width: auto;          /* 幅自動 */
        text-align: center;   /* テキスト中央揃え */
        margin-top: 5px;      /* 住所との間に少しマージン */
    }

    /* アプリ予約ボタンのホバースタイル（スマホ用） */
    .reserve-button:hover {
        background-color: var(--reserve-button-mobile-hover-bg); /* 変数で指定したホバー色 */
        border-color: var(--reserve-button-mobile-hover-bg); /* 枠線も同色に */
        color: #ffffff; /* 文字色は白 */
    }

    /* グローバルナビ */
    .global-nav ul {
        justify-content: flex-start; /* 左揃えに */
        padding-left: 5px; /* 左に少し余白 */
    }
    .global-nav li {
        margin: 5px 5px; /* 上下左右に少しマージン */
    }
    .global-nav a {
        padding: 8px 10px; /* ボタンのサイズを少し小さく */
    }

    /* 見出しサイズの調整 */
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }

    /* ギャラリーの調整 */
    .gallery-grid {
        /* 最小幅を少し調整 */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px; /* 隙間を少し狭く */
    }
}

/* ========================================= */
/* レスポンシブ対応 (480px以下)             */
/* ========================================= */
@media (max-width: 480px) {
     html {
        font-size: 14px; /* さらに小さい画面用にフォント調整 */
    }
    .container {
        padding-left: 10px;  /* コンテナ左右の余白を狭く */
        padding-right: 10px;
    }
     .gallery-grid {
        /* 画面幅が小さい時は強制的に2カラムにするなど */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* 隙間をさらに狭く */
    }
    .staff-member {
        padding: 15px; /* スタッフ情報のパディングを少し減らす */
    }

    /* 必要であれば、480px以下でさらにボタンサイズ等を調整 */
    /* 例：もう少しボタンを大きくしたい場合など */
    /*
    .reserve-button {
        padding: 0.9em 1.8em;
        font-size: 1.05rem;
    }
    */
}



/* --- style.css に以下のコードを追加 --- */

/* Q&A Section Specific Styles */
.clinic-qa h3 {
    margin-bottom: 1.5em; /* Q&Aタイトル下のマージン */
}

.qa-list {
    /* Q&Aリスト全体を囲むコンテナ（必要ならスタイル追加） */
}

.qa-item {
    margin-bottom: 25px; /* 各Q&A間のスペース */
    padding: 20px;       /* 内側の余白 */
    border: 1px solid var(--border-color); /* 枠線 */
    border-left: 5px solid var(--primary-color); /* 左側にアクセント線 */
    border-radius: 4px;  /* 角を少し丸める */
    background-color: #fff; /* 背景色（セクション背景と区別） */
}

.qa-item dl {
    margin: 0; /* dl要素のデフォルトマージンをリセット */
}

.qa-item dt {
    font-weight: bold;          /* 質問(Q)を太字に */
    color: var(--primary-color); /* 質問(Q)の色をテーマカラーに */
    margin-top: 0;              /* 上マージンリセット */
    margin-bottom: 0.5em;       /* QとAの間に少しスペース */
    font-size: 1.1rem;          /* 質問の文字サイズ */
    line-height: 1.5;           /* 行間調整 */
}

.qa-item dd {
    margin-left: 0;         /* 回答(A)のデフォルトインデントをリセット */
    padding-left: 2.7em;     /* Aマーク分+テキストのインデント */
    position: relative;      /* Aマークを絶対配置するための基点 */
    color: var(--text-light); /* 回答の文字色 */
    border-left: none;      /* 以前のスタイルを上書き */
    padding-bottom: 0;      /* 下パディングリセット */
    margin-bottom: 0;       /* 下マージンリセット */
    line-height: 1.7;       /* 行間調整 */
}

/* QマークとAマークの共通スタイル */
.q_mark, .a_mark {
    display: inline-block;      /* インラインブロック要素 */
    font-weight: bold;          /* 太字 */
    color: var(--primary-color);/* テーマカラー */
    width: 2em;                 /* 幅を固定して位置を揃える */
    text-align: left;           /* 左揃え */
}

/* Qマークの固有スタイル（dtの先頭にある想定） */
.q_mark {
     margin-right: 0.7em;        /* Qマークと質問文の間のスペース */
}

/* Aマークの固有スタイル（ddの先頭に配置） */
.a_mark {
    position: absolute;         /* ddに対して絶対配置 */
    left: 0;                    /* 左端に配置 */
    top: 0;                     /* 上端に配置 */
    margin-right: 0;            /* 右マージン不要 */
}

/* Q&A内のリンク */
.qa-item dd a {
    font-weight: bold; /* 少し強調 */
    /* 色はデフォルトのリンク色を継承 */
}


/* --- ここまで --- */


/* --- style.css に以下のコードを追加 --- */

/* Reservation Page Specific Styles */

.reservation-intro p,
.reservation-first-visit p,
.reservation-return-visit p,
.reservation-notes p {
    margin-bottom: 1em; /* 各セクション内の段落下のスペース */
}

/* アプリダウンロードリンクのコンテナ */
.app-links {
    margin: 1.5em 0;
    padding: 1.5em;
    background-color: var(--secondary-color); /* 薄い背景色 */
    border-radius: 8px;
    text-align: center; /* リンクボタンを中央揃え */
}
.app-links p {
     margin-bottom: 1em;
     font-weight: bold;
}
.app-links .button {
    margin: 5px; /* ボタン間のスペース */
}
/* 各ボタンの色分け（例） */
.app-info-link {
    background-color: #6c757d; /* グレー系 */
}
.app-info-link:hover {
     background-color: #5a6268;
}
.app-store-link.ios {
     background-color: #007bff; /* 青系 */
}
 .app-store-link.ios:hover {
     background-color: #0056b3;
}
.app-store-link.android {
     background-color: #28a745; /* 緑系 */
}
 .app-store-link.android:hover {
      background-color: #218838;
 }

/* 初診・再診などの小見出し */
.section-subtitle {
    font-size: 1.3rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4em;
    margin-top: 2em;
    margin-bottom: 1em;
}
.subtitle-marker {
    color: #f49fa2; /* 元のHTMLで使われていたピンク色 */
    margin-right: 0.3em;
}

/* 注意書き（確認事項など）のボックス */
.important-notes {
    background-color: #fffbe6; /* 薄い黄色背景 */
    border: 1px solid #ffeeba; /* 黄色系ボーダー */
    border-left: 5px solid #ffc107; /* 左側に濃い黄色のアクセント */
    padding: 15px;
    margin: 1.5em 0;
    border-radius: 4px;
}
.important-notes p,
.important-notes ul {
    margin-bottom: 0.5em; /* ボックス内の要素間スペース */
}
 .important-notes p:last-child,
 .important-notes ul:last-child {
    margin-bottom: 0; /* 末尾要素のマージン削除 */
 }
 /* 注意事項の中の特に強調したい部分 (strongタグ) */
 .important-notes strong {
     color: #d9534f; /* やや赤みがかった色で強調 */
 }

/* 箇条書きリストのスタイル */
.reservation-first-visit ul,
.reservation-return-visit ul,
.reservation-notes ul {
    list-style: none; /* デフォルトの黒丸を消す */
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
.reservation-first-visit li,
.reservation-return-visit li,
.reservation-notes li {
    padding-left: 1.5em; /* テキストのインデント */
    position: relative;   /* ::before の位置基準 */
    margin-bottom: 0.8em; /* リスト項目間のスペース */
    line-height: 1.6;     /* 行間を少し広げる */
}
/* CSSでリストマーク（・）を追加 */
.reservation-first-visit li::before,
.reservation-return-visit li::before,
.reservation-notes li::before {
    content: '・'; /* リストマークの文字 */
    position: absolute;
    left: 0;
    color: var(--primary-color); /* テーマカラーに合わせる */
    font-weight: bold;
}

/* 予約ボタン（リンク）のコンテナ */
.reservation-action {
    text-align: center; /* ボタンを中央揃え */
    margin: 2em 0;      /* 上下のマージン */
}

/* 大きめの予約ボタン（リンク） */
.reserve-link.large {
    padding: 0.8em 2em; /* 通常のボタンより大きく */
    font-size: 1.2rem;  /* 文字も大きく */
    font-weight: bold;
}

/* 埋め込みiframeのコンテナ */
.iframe-container {
    text-align: center; /* iframeを中央揃え */
    margin: 2em 0;
}
/* 埋め込みiframe自体のスタイル */
.reservation-iframe {
    max-width: 100%; /* 親要素の幅を超えないように */
    border: 1px solid var(--border-color); /* 枠線 */
    background-color: #fff; /* 読み込み中の背景色など */
}

/* 電話番号のスタイル */
.phone-number {
     font-weight: bold;
     color: var(--primary-color); /* 電話番号を目立たせる */
     /* 必要なら white-space: nowrap; を追加して改行を防ぐ */
}

/* --- ここまで --- */

/* --- style.css に以下のコードを追加 --- */

/* Mental Health Page Specific Styles */

/* ページ内目次 (Table of Contents) */
.page-toc {
    background-color: var(--secondary-color); /* 薄い背景色 */
    padding: 1.5em;
    margin-bottom: 2.5em; /* 目次と記事リストの間のスペース */
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.toc-title {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.2rem; /* 目次タイトルサイズ */
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5em;
}
.page-toc ul {
    list-style: none; /* リストマーク削除 */
    padding-left: 0;
    margin-bottom: 0; /* ul自体の下マージン削除 */
    /* 幅が広い画面で2列表示にする場合（任意）*/
    /* column-count: 2; */
    /* column-gap: 20px; */
}
.page-toc li {
    margin-bottom: 0.6em; /* 目次項目間のスペース */
}
.page-toc a {
    text-decoration: none;
    /* color: var(--text-light); */ /* 目立たなくする場合 */
}
 .page-toc a:hover {
    /* text-decoration: underline; */ /* ホバー時に下線 */
    color: var(--link-hover-color); /* ホバー色 */
 }

/* 記事リスト全体のコンテナ */
.article-list {
    /* 特に指定がなければ不要 */
}

/* 個々の記事 */
.mental-health-article {
    margin-bottom: 3em; /* 記事間のスペース */
    padding-bottom: 2em; /* 区切り線とのスペース */
    border-bottom: 1px dashed var(--border-color); /* 記事の区切り線 */
}
/* 最後の記事の下には区切り線不要 */
.mental-health-article:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

/* 記事タイトル (元の埋め込みスタイルを再現) */
.mental-health-article h4 {
    font-size: 1.6em; /* 元のスタイル */
    line-height: 1.6em; /* 元のスタイル */
    margin-bottom: 0.8em; /* タイトルと本文の間 */
    color: var(--primary-color); /* 他の見出しと色を合わせる */
    margin-top: 0; /* 上マージンリセット */
}

/* 記事本文のコンテナ */
.article-content {
    color: var(--text-light); /* 標準のテキスト色 */
    line-height: 1.8; /* 行間を少し広めにとる */
}
.article-content p {
    margin-bottom: 1.2em; /* 段落間のスペース */
}
.article-content p:last-child {
    margin-bottom: 0; /* コンテナ末尾の段落のマージン削除 */
}
/* 記事本文中のリスト（例：高齢者の不眠症） */
 .article-content ul {
    list-style: disc; /* 標準の黒丸リストマーク */
    margin-top: 1em;
    margin-bottom: 1.2em;
    padding-left: 2em; /* リストのインデント */
 }
  .article-content li {
     margin-bottom: 0.5em; /* リスト項目間のスペース */
  }

/* --- ここまで --- */

/* --- style.css に以下のコードを追加 --- */

/* Access Page Specific Styles */

.access-info h3,
.access-maps h3 {
    margin-bottom: 1.5em; /* セクションタイトルの下のスペース */
}

/* 所在地ブロック、アクセス方法ブロック */
.address-block,
.access-method {
    margin-bottom: 2em; /* 各情報ブロック間のスペース */
}

.address-block h4,
.access-method h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0.5em;
    padding-bottom: 0.2em;
     /* 見出しマーカーの色や形を他ページと合わせるか、専用にするか */
}
.address-block h4 .subtitle-marker,
.access-method h4 .subtitle-marker {
     color: var(--primary-color);
     margin-right: 0.3em;
}

/* 所在地のアドレス表記 */
.address-block address {
    font-style: normal;
    line-height: 1.7; /* 行間調整 */
    padding: 1em; /* 少し内側に余白 */
    background-color: var(--secondary-color); /* 背景色 */
    border-left: 3px solid var(--primary-color); /* 左アクセント */
    display: inline-block; /* ブロック要素化 */
}

/* アクセス方法の説明文 */
.access-method p {
    line-height: 1.7;
    padding-left: 0.5em; /* 少しインデント */
}
/* 駐車場住所 */
.access-method address {
    font-style: normal;
    display: block; /* 住所は改行して表示 */
    margin: 0.5em 0 0.5em 1em; /* 少しインデントと上下マージン */
    font-size: 0.95em;
    color: var(--text-light);
}

/* 地図セクション */
.access-maps {
    margin-top: 2.5em; /* アクセス情報との間にスペース */
}

/* 画像地図 */
.image-map {
    margin: 0 0 2.5em 0; /* Googleマップとの間のスペース */
    text-align: center; /* 画像を中央揃え */
}
.image-map img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    margin-bottom: 0.5em; /* キャプションとのスペース */
}
.image-map figcaption {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Googleマップのコンテナ */
.google-map-container {
    margin-top: 2em;
    position: relative; /* iframeの比率維持のため */
    width: 100%;
    padding-bottom: 66.66%; /* アスペクト比 3:2 (450/600) 、必要なら調整 */
    /* padding-bottom: 75%; */ /* アスペクト比 4:3 */
    /* padding-bottom: 56.25%; */ /* アスペクト比 16:9 */
    height: 0;
    overflow: hidden;
}
.google-map-container h4 {
    /* 見出しが必要な場合は position: absolute などで配置するか、 */
    /* コンテナの外に配置する */
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 1em;
    position: absolute; /* 一旦、非表示または左上に配置 */
    top: -2.5em; /* 見出し分の高さを確保 */
    left: 0;
    width: 100%;
    text-align: left;
}

/* Googleマップ iframe */
.google-map-iframe {
    border: 0; /* デフォルトの枠線を消す */
    position: absolute; /* コンテナに対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Googleマップの下のリンク（任意） */
.google-map-container + p {
    text-align: center;
    margin-top: 1em;
    font-size: 0.9rem;
}


/* --- ここまで --- */


/* --- style.css に以下のコードを追加 --- */

/* Top Page Specific Styles */

/* キャッチコピー画像 */
.hero-image-section {
    text-align: center;     /* 画像を中央揃え */
    margin-bottom: 2em;     /* 下の要素とのスペース */
    background-color: #fff; /* 背景色（必要なら） */
    padding: 0;             /* パディング（必要なら） */
}
.hero-image-section figure {
    margin: 0; /* figureのデフォルトマージン削除 */
}
.hero-image-section img {
     max-width: 100%;  /* 幅が親要素を超えないように */
     height: auto;     /* 高さは自動 */
     display: block;   /* 下にできる余白対策 */
     margin: 0 auto;   /* 中央揃え */
}

/* トップページの強調お知らせ (旧<font color=red>) */
.top-highlight-notice {
    background-color: #fff0f0; /* 薄い赤背景 */
    color: #c00;           /* やや濃い赤文字 */
    border: 1px solid #fcc;
    border-left: 5px solid #c00; /* 左側にアクセント */
    padding: 1em 1.5em;
    text-align: center;
    margin-bottom: 2em;
    border-radius: 4px;
    font-size: 1.1rem;      /* 少し大きめの文字 */
}
.top-highlight-notice p {
    margin: 0;
    font-weight: bold;
}
.top-highlight-notice strong {
     /* 必要ならさらに強調 */
}

/* 重要なお知らせ (PHPで表示される部分) */
.important-notice {
    background-color: var(--secondary-color); /* 他のセクションと区別する背景色 */
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--primary-color); /* アクセント */
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: 4px;
}
.notice-main {
    /* titleとbodyのコンテナ */
}
.notice-title {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.8em;
}
.notice-body {
    line-height: 1.7;
}
/* お知らせ内容にスタイルが必要な場合（例：pタグ） */
.notice-body p { margin-bottom: 0.5em; }
.notice-body p:last-child { margin-bottom: 0; }

/* トップページの2カラムレイアウト */
.top-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホでは1カラム */
    gap: 30px; /* カラム間の隙間 */
}
/* タブレット幅以上で2カラムに */
@media (min-width: 768px) {
    .top-content-grid {
        grid-template-columns: 2fr 1fr; /* 左(ニュース)を広めに */
    }
}

/* お知らせセクション (左カラム) */
.top-news h3 {
    /* 見出しスタイル (共通スタイルを継承 or 個別指定) */
    margin-top: 0; /* グリッドアイテム先頭なら上マージン不要 */
    margin-bottom: 1em;
}
.news-list-container {
    /* コンテナスタイル */
}
.news-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5em 0; /* 下にマージン */
}
/* お知らせリストの各項目 (include_news.php の出力HTMLに依存) */
/* 例：<li><span class="news-date">...</span><a href=...>...</a></li> の場合 */
.news-list li {
    border-bottom: 1px dotted var(--border-color);
    padding: 0.8em 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.news-list li:first-child { padding-top: 0; }
.news-list li:last-child { border-bottom: none; padding-bottom: 0; }
.news-list .news-date { /* 日付部分 */
    font-weight: bold;
    display: inline-block;
    margin-right: 1em;
    min-width: 8em; /* 日付の幅をある程度揃える */
    color: var(--text-color);
}
.news-list a {
    /* ニュースタイトルのリンクスタイル */
    text-decoration: none;
}
.news-list a:hover {
    text-decoration: underline;
}

/* 「過去のお知らせ」リンク */
.list-jump {
    text-align: right;
    font-size: 0.9rem;
    margin-top: 1em;
}
 .list-jump a {
     font-weight: bold;
 }

/* サイドバー (右カラム) */
.top-sidebar {
    /* サイドバー全体のスタイル */
    background-color: var(--secondary-color); /* 背景色 */
    padding: 1.5em;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    /* スマホ表示の時、ニュースとの間にマージンがgapでつく */
}
/* サイドバー内のセクション */
.top-access {
    /* アクセスセクションのスタイル */
}
.top-access h3 {
    margin-top: 0;
    font-size: 1.3rem; /* 少し小さめ */
    margin-bottom: 1em;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4em;
}
/* 診療時間表 */
.timetable-container {
    text-align: center;
    margin-bottom: 1.5em;
}
.timetable-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.5em;
    border: 1px solid var(--border-color); /* 枠線 */
}
.timetable-note {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
}
/* 電話情報 */
.phone-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: #fff; /* 白背景 */
    padding: 0.8em;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
.phone-icon {
    width: auto;
    height: 1.5em; /* アイコンサイズ調整 */
    margin-right: 0.5em;
    vertical-align: middle;
}
.phone-number {
    color: var(--primary-color);
}
/* アクセスボタン */
.access-link {
     text-align: center;
 }
  .access-link .button {
      /* ボタン固有のスタイルが必要なら追加 */
      width: 100%; /* ボタンをコンテナ幅いっぱいに */
  }

/* --- ここまで --- */

/* --- style.css に以下のコードを追加・調整 --- */

/* News Archive Page Specific Styles (if needed) & Base .news-list adjustments */

.news-archive h3 {
    /* h3共通スタイルが適用される */
    margin-bottom: 1.5em;
}

/* お知らせリストの基本スタイル（トップページと共通） */
.news-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5em 0;
}

.news-list li {
    border-bottom: 1px dotted var(--border-color);
    padding: 1em 0; /* 上下のパディングを少し増やす */
    font-size: 1rem;  /* 文字サイズを標準に */
    line-height: 1.6;
    display: flex;    /* Flexboxを使って日付とタイトルを横並び */
    flex-wrap: wrap;  /* スマホで折り返す */
    gap: 0 1.5em;     /* 日付とタイトルの間の隙間 */
}
.news-list li:first-child {
     padding-top: 0.5em; /* 上の罫線とのスペース */
     border-top: 1px solid var(--border-color); /* リスト上部にも罫線 */
}
.news-list li:last-child {
     border-bottom: none; /* 最後の項目は下罫線なし */
}

/* 日付部分 (<time>または<span>) */
.news-list .news-date {
    font-weight: normal; /* 太字解除（任意） */
    flex-shrink: 0;      /* 日付が縮まないように */
    min-width: 10em;     /* 日付表示幅の最小値（揃えやすくするため） */
    color: var(--text-light); /* やや薄い文字色 */
    margin-right: 0; /* gapで指定するので不要 */
}

/* タイトル部分 (<span>) */
.news-list .news-title {
    flex-grow: 1; /* 残りの幅をタイトルが取る */
}

.news-list .news-title a {
    /* ニュースタイトルのリンクスタイル */
    text-decoration: none;
    font-weight: bold; /* タイトルを太字に */
}
.news-list .news-title a:hover {
    text-decoration: underline;
}

/* お知らせがない場合のメッセージ */
.no-content-message {
    padding: 2em;
    text-align: center;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 1em;
}
 .no-content-message p {
     margin: 0;
     font-style: italic;
     color: var(--text-light);
 }

/* お知らせ一覧ページ固有のリストスタイル（必要なら） */
/* .news-list.archive-list { */
    /* 例: 全幅を使うようにするなど */
/* } */

/* --- ここまで --- */


/* --------------------------------------
  カウンセリングページ用スタイル
-------------------------------------- */

.counseling-page h2 {
  /* 既存の見出しスタイルに合わせるか、ここで指定 */
  /* 例: 
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #005a9c; 
  margin-bottom: 20px;
  padding-bottom: 10px;
  */
}

.counseling-page h3 {
  /* 既存の見出しスタイルに合わせるか、ここで指定 */
  /* 例: 
  font-size: 20px;
  color: #005a9c;
  border-left: 5px solid #005a9c;
  padding-left: 10px;
  margin-top: 30px;
  margin-bottom: 15px;
  */
}

.counseling-page h4 {
 /* 例:
  font-size: 16px;
  color: #444;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  */
}


.counseling-page section {
  margin-bottom: 40px; /* セクション間の余白 */
}

.counseling-page p {
  line-height: 1.8; /* 行間を広めにとる */
  margin-bottom: 1em;
}

.counseling-page ul {
  list-style: disc; /* 基本的な箇条書きマーカー */
  margin-left: 20px;
  margin-bottom: 1em;
}

.counseling-page ul li {
  margin-bottom: 0.5em;
}

/* 導入部分の不安リスト */
.counseling-intro .intro-concerns {
  list-style: none; /* マーカーを消す場合 */
  margin-left: 0;
  padding-left: 1.5em;
  text-indent: -1.5em; /* 字下げ風 */
}
.counseling-intro .intro-concerns li::before {
  content: "・"; /* 代わりのマーカー */
  margin-right: 0.5em;
}


/* Q&Aセクション */
.qa-section dl dt {
  font-weight: bold;
  margin-top: 15px;
  /* 例: 背景色やアイコンを追加しても良い */
  /* background: url(../img/q-icon.png) no-repeat left center; */
  /* padding-left: 25px; */
}

.qa-section dl dd {
  margin-left: 1.5em; /* 回答を少しインデント */
  margin-bottom: 10px;
  padding-left: 5px; /* 少し左に余白 */
  /* border-left: 2px solid #eee; */ /* 左に区切り線を入れるなど */
}

/* 注釈 */
.counseling-page .note {
  font-size: 0.9em;
  color: #666;
}

/* 画像コンテナ */
.counseling-page .image-container {
  text-align: center; /* 画像を中央揃えにする場合 */
  margin: 20px 0;
}

.counseling-page .image-container img {
  max-width: 100%; /* コンテナ幅に合わせて縮小 */
  height: auto; /* アスペクト比を維持 */
  /* 例: 少し枠線や影をつける場合 */
  /* border: 1px solid #ddd; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.1); */
}

/* ---------- レスポンシブ対応が必要な場合はここに追加 ---------- */
/* 例: スマートフォン表示用の調整 */
/* @media screen and (max-width: 768px) {
  .qa-section dl dd {
      margin-left: 0; 
  }
} */

/* --- こころの健康ページ：病気解説タイルリンク (サイズ調整版) --- */

/* セクション全体の間隔調整 (変更なし) */
.disease-links-section {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* セクション内の見出し (変更なし) */
.disease-links-section h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  color: #444;
}

/* タイルを囲むコンテナ */
.disease-tile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* ★隙間を少し小さく (例: 1.5rem -> 1rem) */
  justify-content: center;
}

/* 各タイル (リンク) のスタイル */
.disease-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; /* ★幅を小さく (例: 160px -> 120px) */
  height: 80px; /* ★高さを小さく (例: 160px -> 120px) */
  padding: 0.8rem; /* ★内側の余白を少し調整 */
  background-color: #f9f9f9;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #337ab7;
  font-size: 1rem; /* ★フォントサイズを少し調整 (例: 1.1rem -> 1rem) */
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* タイルにマウスが乗った時のスタイル (変更なし) */
.disease-tile:hover {
  background-color: #eaf4ff;
  border-color: #bddcff;
  color: #23527c;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* タイル内のテキスト (span) のスタイル (変更なし) */
.disease-tile span {
  display: block;
}


/* --- レスポンシブ対応 (画面幅が狭い場合) --- */
/* 例: 画面幅が 768px 以下の場合 (変更なし、または必要なら微調整) */
@media (max-width: 768px) {
  .disease-tile {
    width: 110px;
    height: 110px;
    font-size: 0.95rem;
  }
  .disease-tile-container {
    gap: 0.8rem;
  }
}

/* 例: 画面幅が 480px 以下の場合 (★ここを修正) */
@media (max-width: 480px) {
  /* 見出しサイズ (変更なし) */
  .disease-links-section h3 {
      font-size: 1.2rem;
  }

  /* ▼▼▼ 以下のスタイルを置き換え ▼▼▼ */
  .disease-tile-container {
     gap: 0.5rem; /* ★タイルが小さいので隙間も小さく (例: 0.5rem) */
   }

  .disease-tile {
    /* 4列表示のための計算: (コンテナ幅 - 隙間3つ分) / 4 */
    /* gapが0.5remの場合、隙間3つで1.5rem。それを4で割った0.375remを基準の25%から引く */
    width: calc(25% - 0.375rem); /* ★4列表示になるように幅を計算 */
    height: auto; /* 高さは幅に合わせる */
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    font-size: 0.75rem; /* ★フォントサイズをかなり小さく調整 */
    padding: 0.3rem; /* ★パディングも小さく調整 */
    /* 必要であれば、他のスタイル（box-shadowなど）も調整 */
  }
  /* ▲▲▲ ここまで置き換え ▲▲▲ */

}