/* 基本設定 */
html {
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box; /*  paddingを含めて幅を計算する魔法の1行 */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横へのはみ出しを強制カット */
    width: 100%;
    -webkit-text-size-adjust: 100%; /* iPhoneなどの勝手な文字拡大を防止 */
    /* ヒラギノ丸ゴを最優先にし、予備として一般的な丸ゴシックを指定します */
    font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", "Meiryo UI", sans-serif;
    /* 以前設定したメインカラーも適用 */
    color: #333;
    line-height: 1.8;
}

/* --- ヘッダー全体のレイアウト --- */
header {
    background: #fff;
    padding: 10px 5%; /* 上下を少し詰めるとスッキリします */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* 広がりすぎ防止 */
    margin: 0 auto;
}

/* --- ロゴの設定 --- */
.logo {
    flex-shrink: 0; 
}

.logo img {
    height: 50px; /* ここで高さを固定すれば巨大化しません */
    width: auto;
    display: block;
}

/* --- ナビゲーション（ここを1つにまとめる） --- */
.nav-links {
    list-style: none;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 1. すべてのメニューボタンの共通設定 */
.nav-links li a {
    text-decoration: none;
    padding: 8px 15px; /* 少し広めにしました */
    border-radius: 25px;
    font-weight: bold;
    font-size: 13px;
    color: #4d18ad;
    background-color: #f3e5f5;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(77, 24, 173, 0.1);
}

/* 2. マウスを乗せた時の共通動作 */
.nav-links li a:hover {
    background-color: #4d18ad;
    color: #ffffff;
    transform: translateY(-2px);
}

/* 3. 初診ボタンだけ、色を上書き（!importantで優先順位を上げます） */
.nav-links li a.btn-first-visit {
    background-color: #4d18ad !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(77, 24, 173, 0.3) !important;
}

.nav-links li a.btn-first-visit:hover {
    background-color: #6a2cc9 !important;
}

/* --- スマホ用の設定（画面幅768px以下） --- */
@media (max-width: 1024px) {
    /* メニュー項目が多いので、1024px以下でハンバーガーに切り替えるのが安全です */
    
    .hamburger {
        display: block !important; /* 三本線を表示 */
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%; /* 通常は隠す */
        width: 250px;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        flex-direction: column; /* ★スマホでは縦に並べる */
        justify-content: center;
        z-index: 999;
        transition: 0.3s;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        right: 0; /* JSでactiveがついたら表示 */
    }

    .nav-links li {
        margin: 10px 0;
    }
}

/* PCでは隠す */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
    z-index: 1100;
}

/* スマホ画面（1024px以下）での設定 */
@media (max-width: 1024px) {
    .hamburger {
        display: block; /* 確実に表示させる */
    }

    .hamburger span {
        display: block;
        width: 30px;      /* 幅を固定 */
        height: 3px;      /* 太さを指定 */
        background-color: #4d18ad; /* 弁天の紫（これで見えるはず！） */
        margin-bottom: 6px; /* 線と線の間隔 */
        transition: 0.3s;
    }
    
    /* 3本目の線のマージンをなくす */
    .hamburger span:last-child {
        margin-bottom: 0;
    }
}

#access {
    /* 数値を大きくすればするほど、画面の下の方で止まるようになります */
    scroll-margin-top: 1vh; /* 画面の高さの1%分、手前で止まる設定 */
}


#faq {
    padding: 60px 0;
}

.faq-sub-link {
    text-align: right;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.faq-list dt {
    background: #f8f4ff; /* 薄い紫 */
    color: #4d18ad;     /* 弁天の紫 */
    padding: 15px 20px;
    font-weight: bold;
    border-left: 5px solid #4d18ad;
    margin-top: 20px;
    position: relative;
}

.faq-list dt::before {
content: "Q";                /* アイコンの中に「Q」の文字を入れます */
    background-color: #dcd0f7;   /* パステル調の優しい薄紫 */
    color: #4d18ad;              /* 文字色は病院のテーマカラーの紫 */
    border-radius: 50%;          /* ⭕ これで完全な「丸」になります */
    font-size: 0.95rem;          /* 中の文字サイズ */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;                 /* 丸の大きさ（縦横を同じにすると綺麗な丸になります） */
    height: 28px;
    margin-right: 12px;          /* 質問テキストとの間の隙間 */
    vertical-align: middle;      /* 文字と高さを中央で揃えます */
}

.faq-list dd {
    padding: 20px;
    border: 1px solid #f8f4ff;
    border-top: none;
    line-height: 1.8;
    background: #fff;
    margin-left: 0;
}

.faq-list dd::before {
    content: "A.";
    font-weight: bold;
    color: #ff9800; /* オレンジを差し色に */
    margin-right: 10px;
}

.faq-list small {
    display: block;
    margin-top: 10px;
    color: #666;
    font-size: 0.85rem;
}

.faq-banners a {
    display: inline-block;
    background: #eee;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
}

section {
    width: 100%;
    overflow: hidden;
    display: block;
}

/* ヒーローエリアのベース */
.hero {
    position: relative;
    height: 80vh; /* 高さを少し調整 */
    overflow: hidden;
}

.slideshow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* スライド共通設定 */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slider6 18s infinite; /* 合計30秒で設定 */
}

/* 各スライドの画像指定 */
.slide1 { background-image: url('mocomoco.jpg'); animation-delay: 0s; }
.slide2 { background-image: url('mikan.JPG'); animation-delay: 3s; }
.slide3 { background-image: url('romio.JPG'); animation-delay: 6s; }
.slide4 { background-image: url('yoshiyoshi.JPG'); animation-delay: 9s; }
.slide5 { background-image: url('mocogonta.png'); animation-delay: 12s; }
.slide6 { background-image: url('dog.JPG'); animation-delay: 15s; }

/* 6枚用のフェードアニメーション計算 */
@keyframes slider6 {
    0% { opacity: 0; }
    5% { opacity: 1; }   /* 1.5秒かけてフェードイン */
    16% { opacity: 1; }  /* 約5秒間表示（30秒の16.6%） */
    21% { opacity: 0; }  /* 1.5秒かけてフェードアウト */
    100% { opacity: 0; }
}

/* 文字の重なり順を高くして固定する */
.hero-content {
    position: relative; /* または absolute */
    z-index: 10;        /* 前面（スライドより大きい数字） */
    pointer-events: none; /* 下にあるボタンなどが押せるようにする設定 */
    /* 背景画像の上で文字を読みやすくするための影 */
    text-shadow: 0 0 15px #fff, 0 0 10px #fff, 0 0 5px #fff;
}

/* レイアウト */
.container {
    padding: 60px 10%;
}

body {
    background-color: #fff;
}

.bg-light { 
    background-color: #f8f4ff; /* 薄紫 */
}

h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #4d18ad; /* 弁天の青 */
}

.flex {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.flex div { flex: 1; min-width: 300px; }

img { max-width: 100%; border-radius: 10px; }

/* 画像を表示する枠の設定 */
.facility-photo {
    width: 100%;
    height: 200px; /* ここの高さを固定 */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    margin-bottom: 15px;
    background-color: #f9f9f9; /* 画像がない部分を薄いグレーに（任意） */
    border-radius: 8px;
    overflow: hidden;
}

/* 画像自体の設定 */
.facility-photo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;     /* 横幅を自動調整 */
    height: auto;    /* 高さを自動調整 */
    object-fit: contain; /* 枠の中に全体が収まるようにする */
}

/* チョコレート中毒関係 */
.calc-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
    text-align: left;
}

.full-width {
    grid-column: 1 / 3;
}

select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1rem;
    background-color: #fff;
    font-family: inherit;
}

/* 危険度別の背景色は前回の設定をそのまま使用 */

/* メチルキサンチン中毒のデータリスト全体の枠 */
.data-list-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #4d18ad; /* 上部に区切り線 */
    text-align: left;
}

.data-list-area h4 {
    color: #4d18ad;
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
}

/* メチルキサンチン中毒スマホで横スクロールできるようにする設定 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #fff;
}

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

.data-table th {
    background-color: #f3e5f5; /* 薄紫 */
    color: #4d18ad;
}

/* 危険度が高いものを強調 */
.data-table tr td:last-child {
    font-weight: bold;
    color: #c62828; /* 赤色 */
}

/* 判定メッセージを常に太字にする */
.risk-message {
    font-weight: bold;
    font-size: 1.1rem; /* 少し大きくするとより目立ちます */
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
}

/* 緊急時（40mg以上）のメッセージをさらに強調 */
.status-danger .risk-message,
.status-emergency .risk-message {
    font-size: 1.2rem;
    text-decoration: underline; /* 下線を追加 */
}

/* 文字を震わせるアニメーション */
@keyframes shake {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    25% { transform: translate(2px, 1px) rotate(1deg); }
    50% { transform: translate(-1px, -2px) rotate(-1deg); }
    75% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* 警告・緊急時にアニメーションを適用 */
.status-danger .risk-message,
.status-emergency .risk-message {
    display: inline-block; /* アニメーションを有効にするため */
    animation: shake 0.2s infinite; /* 0.2秒ごとにずっと震える */
    font-size: 1.3rem;
}

/* 時刻表示のスタイル */
.calc-time {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    display: none; /* 初期状態は隠しておく */
}

.table-caption {
    font-size: 0.75rem;
    color: #888;
    margin-top: 8px;
    text-align: center;
}

.calc-box {
    max-width: 600px; /* お好みの幅でOK */
    margin: 40px auto; /* 左右をautoにすることで中央に寄ります */
    padding: 30px;
    border: 2px solid #4d18ad;
    border-radius: 20px;
    background-color: #ffffff; /* 白背景 */
    text-align: center; /* 中の文字やボタンを中央に */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ボタンが横幅いっぱいにならないように調整 */
.calc-box .btn-first-visit {
    display: inline-block;
    margin-top: 15px;
}

/* 診療時間テーブル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}

/* カレンダーエリアの調整 */
.access-calendar {
    flex: 1;
    min-width: 300px; /* スマホでこれより狭くなると自動で縦に並ぶ */
}

.calendar-container {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #f3e5f5; /* メインカラーに合わせた薄い紫の枠線 */
}

/* カレンダーの高さをテーブルに合わせる（微調整） */
.calendar-container iframe {
    width: 100% !important;
    height: 450px !important; /* テーブルの高さに合わせて調整してください */
    border-radius: 10px;
}

/* 表（table）のデザインを紫基調に */
th {
    background: #f3e5f5;
    color: #4d18ad;
}


/* テーブルとカレンダーを包む枠の設定 */
.access-flex {
    display: flex;
    gap: 30px;          /* 地図と情報の間の隙間 */
    align-items: flex-start;
    flex-wrap: wrap;    /* 画面が狭いときは縦に並べる */
    width: 100%;
}

/*  テーブル（診療時間）とカレンダーを50%ずつにする */
.access-map, 
.access-calendar {
    flex: 1;            /* 均等に広がる設定 */
    min-width: 350px;   /* スマホなどでこれより狭くなったら縦に並ぶ */
}

/* 診療時間テーブル自体の横幅を100%にする */
.access-map table {
    width: 100% !important;
    margin-top: 0;
}

/* 画面幅いっぱいに広げる設定 */
.container-fluid {
    width: 100% !important;
    padding: 20px 2% !important; /* 左右にわずか2%だけ余白を残してギリギリまで広げる */
    max-width: 100% !important;   /* 最大幅の制限を解除 */
}

/* フレックスボックスの幅を最大化 */
#schedule .access-flex {
    width: 100% !important;
    gap: 20px !important; /* 隙間を少し詰めるとさらに大きく見えます */
}

/* テーブルとカレンダーの箱を最大限広げる */
.schedule-table, .access-calendar {
    flex: 1 !important;
}

/* テーブル自体の文字を少し大きくして見やすくする */
.schedule-table table {
    width: 100% !important;
    font-size: 1.1rem !important; /* 文字を少し大きく */
}

/* カレンダーの高さをさらに出して存在感を出す */
.calendar-container iframe {
    height: 550px !important; /* 400pxから550pxにアップ */
}

/* 地図自体をレスポンシブ（可変）にする */
.access-map iframe {
    width: 100%;
    height: 400px;      /* 地図の高さ */
    border-radius: 10px;
}

/* 説明文のエリア */
.access-info {
    flex: 1;            /* 伸び縮みできるようにする */
    min-width: 300px;
}

.access-info h3{
    color: #4d18ad;     /* 変更した青色に合わせる */
    margin-top: 0;
}

.access-info p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.tel-link {
    color: #4d18ad; /* 弁天の青色 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold;
    font-size: 1.2rem;
}

/* パソコンではクリック無効、スマホでは有効にする設定（任意） */
@media (min-width: 768px) {
    .tel-link {
        pointer-events: none; /* パソコンではリンクを反応させない */
        color: #333;         /* パソコンでは普通の文字色に */
    }
}

/* スマホ画面（幅768px以下）での調整 */
@media (max-width: 768px) {
    .hero {
        height: 40vh; /* スマホでは動画の高さを少し抑える */
    }
    .hero-content h1 {
        font-size: 1.8rem; /* 文字をスマホサイズに小さくする */
    }
    .access-flex {
        gap: 20px; /* スマホでは地図と文字の間隔を狭める */
    }
}

/* スマホ固定電話ボタンのスタイル */
.mobile-fortune-bar {
    display: none; /* 基本は非表示（PCなど） */
}

@media screen and (max-width: 768px) {
    .mobile-fortune-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        background: rgba(255, 255, 255, 0.9); /* 少し透ける白 */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999; /* 一番手前に表示 */
    }

    .btn-ft-tel {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #4d18ad; /* 弁天の紫 */
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        padding: 15px;
        border-radius: 50px; /* 丸いボタンで温かみを */
        font-size: 1.1rem;
        transition: transform 0.2s;
    }

    .btn-ft-tel:active {
        transform: scale(0.95); /* 押した時に少し凹む演出 */
    }

    .icon-phone {
        margin-right: 10px;
        font-size: 1.3rem;
    }

    /* ボタンの分だけフッターの下に余白を作る（文字が隠れないように） */
    body {
        padding-bottom: 80px;
    }
}

.staff-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px;
    overflow: hidden;
    border-radius: 50%; /* これで写真を正円にします */
    border: 3px solid #4d18ad; /* 枠線をメインカラーの紫に */
}

.staff-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 写真が歪まないように調整 */
}

.first-visit-banner {
    background: linear-gradient(rgba(77, 24, 173, 0.8), rgba(77, 24, 173, 0.8)), url('clinic-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 60px;
    border-radius: 20px;
    text-align: center;
}

.first-visit-banner h2 {
    color: #fff; /* バナー内は白文字に */
    margin-bottom: 20px;
}

.download-box {
    text-align: center;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.btn-download {
    display: inline-block;
    background-color: #4d18ad; /* 弁天の紫 */
    color: #fff !important;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid #4d18ad;
}

.btn-download:hover {
    background-color: #fff;
    color: #4d18ad !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(77, 24, 173, 0.2);
}

.note {
    font-size: 0.85rem;
    color: #666;
}

.banner-btn {
    display: inline-block;
    background: #fff;
    color: #4d18ad;
    padding: 12px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
}

a img {
  cursor: pointer; /* カーソルを指の形にする */
  transition: opacity 0.3s; /* 変化を滑らかにする */
}

a img:hover {
  opacity: 0.8; /* マウスを乗せた時に少し薄くする */
}

.image-center {
  text-align: center;
}

/* バナーを並べるエリアの設定 */
.banner-grid {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返す */
    gap: 15px;      /* バナー同士の隙間 */
    margin-top: 20px;
    justify-content: center; /* 中央寄せ */
}

/* 画像リンクの共通設定 */
.banner-grid a {
    display: inline-block;
    transition: transform 0.3s ease; /* マウスを乗せた時の動き */
    max-width: 300px; /* バナーの最大幅（PC用） */
    width: 100%;       /* スマホでは横幅いっぱい */
}

/* 画像自体の設定 */
.banner-grid img {
    width: 100%;       /* 親要素（aタグ）の幅に合わせる */
    height: auto;      /* 縦横比を保つ */
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* ほんのり影をつける */
}

/* マウスを乗せた時のエフェクト（少し大きくする） */
.banner-grid a:hover {
    transform: scale(1.05);
}

/* 右下のページ移動用やじるし */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background: #4d18ad;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-weight: bold;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: opacity 0.3s, transform 0.3s;
}

.back-to-top:hover {
    transform: translateY(-5px);
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/* ============================================================
   【最終解決】グリッド配置とカードの見た目
   ============================================================ */

/* 1. カードを横に並べる設定（これを追加！） */
.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
}

/* 2. カード全体の枠組みを整える */
.card {
    background-color: #ffffff !important;
    padding: 20px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    /* 古いスタイルの干渉を防ぐ */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* 3. 画像エリアの調整 */
.facility-photo {
    width: 100% !important;
    height: 180px !important; /* 高さを固定して揃える */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* 4. 画像自体の「白」を透明化して馴染ませる */
.facility-photo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important; /* 画像の背景を透かす */
    filter: brightness(1.02) contrast(1.1) !important; /* 少し明るくして白に馴染ませる */
    border: none !important;
    box-shadow: none !important;
}

/* 5. テキストの調整 */
.card h3 {
    font-size: 1.15rem !important;
    color: #4d18ad !important; /* 病院のテーマカラー */
    margin: 10px 0 !important;
    font-weight: bold !important;
    border: none !important;
    padding: 0 !important;
}

.facility-text {
    font-size: 0.85rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   【院内設備】左右の余白を確保し、診療案内と同じ幅で4つ並べる
   ============================================================ */

/* 1. 院内設備セクション全体に診療案内と同じ左右余白（10%）を持たせる */
#facilities {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* 2. グリッドの設定（4列に固定） */
#facilities .grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important; /* 診療案内と同じ隙間 */
    width: 100% !important;
    padding: 0 !important; /* グリッド自体の余白はリセット */
    margin: 0 auto !important; /* 中央寄せ */
}

/* 3. カードの見た目を整える */
#facilities .card {
    flex: none !important;
    width: 100% !important;
    padding: 20px !important; /* カード内の余白を診療案内と合わせる */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* 4. 画像の枠（高さを揃える） */
#facilities .facility-photo {
    width: 100% !important;
    height: 160px !important; /* 4枚並び用の高さ */
    margin-bottom: 15px !important;
}

/* 5. レスポンシブ対応 */

/* タブレット（画面幅1024px以下）では2枚並び */
@media (max-width: 1024px) {
    #facilities .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* スマホ（画面幅768px以下）では左右余白を減らし、1枚並び */
@media (max-width: 768px) {
    #facilities {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    #facilities .grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    #facilities .facility-photo {
        height: 200px !important; /* スマホでは1枚が大きくなるので高さを戻す */
    }
}

/* 夜間病院セクションの独自デザイン */
.section-subtitle {
    text-align: center;
    margin-top: -30px;
    margin-bottom: 40px;
    color: #666;
    font-size: 0.95rem;
}

.night-hospital-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.night-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(77, 24, 173, 0.1); /* 弁天の紫を混ぜた影 */
    border: 1px solid #e0d5f5;
}

.night-card-content {
    flex: 1;
    padding: 40px;
}

.location-tag {
    display: inline-block;
    background: #4d18ad;
    color: #fff;
    padding: 3px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.night-card-content h3 {
    margin: 0 0 15px 0;
    color: #4d18ad;
    font-size: 1.4rem;
    text-align: left;
}

.night-time {
    font-weight: bold;
    color: #d32f2f; /* 目立つ赤 */
    margin-bottom: 5px;
}

.night-address {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 25px;
}

/* 夜間病院の電話番号：青い背景を消し、弁天のスタイルと統一 */
.night-tel-simple {
    display: inline-block;
    color: #4d18ad !important; /* 弁天の紫 */
    font-size: 2rem;           /* 弁天の案内に合わせた大きなサイズ */
    font-weight: bold;
    text-decoration: none;
    margin: 10px 0;
    padding: 0;                /* 背景の塗りつぶしをなくすため余白をリセット */
    background: none !important; /* 背景色を強制的に消去 */
}

/* スマホでのサイズ調整 */
@media (max-width: 768px) {
    .night-tel-simple {
        font-size: 1.6rem;
    }
}

.night-tel-btn:hover {
    background: #6a2cc9;
    transform: scale(1.02);
}

.night-link {
    display: block;
    text-align: center;
    color: #4d18ad;
    font-size: 0.9rem;
    text-decoration: underline;
}

.night-card-map {
    flex: 1;
    min-height: 300px;
}

.night-card-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* スマホ対応：縦に並べる */
@media (max-width: 900px) {
    .night-card {
        flex-direction: column;
    }
    .night-card-content {
        padding: 25px;
    }
    .night-card-map {
        height: 250px;
    }
}

/* 枠なし・シンプルデザイン */
.emergency-minimal {
    padding: 40px 0;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.emergency-title-simple {
    color: #4d18ad;
    font-size: 1.4rem;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

/* タイトルの下にだけ細い線を引く（さりげない区切り） */
.emergency-title-simple::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #4d18ad;
    margin: 10px auto 0;
    opacity: 0.3;
}

.emergency-lead {
    font-size: 1rem;
    color: #333;
    margin-bottom: 30px;
}

.emergency-contact-simple {
    margin-bottom: 30px;
}

.emergency-sub-text {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 5px;
}

.emergency-number {
    font-size: 2rem;
    color: #4d18ad !important;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.05em;
}

/* 注釈部分：中央に寄せつつ文頭を揃える */
.emergency-notes-simple {
    display: inline-block;
    text-align: left;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.emergency-notes-simple p {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 4px;
    line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .emergency-number {
        font-size: 1.6rem;
    }
    .emergency-notes-simple {
        padding: 15px 20px 0;
        width: 100%;
        box-sizing: border-box;
    }
}

.payment-logos {
    margin-top: 15px;
    text-align: left;
}
.logo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.logo-label {
    font-size: 1.0rem;
    color: #555;
    font-weight: bold;
}
.pay-img-logo {
    height: 26px; /* ロゴの高さを一列できれいに揃える */
    width: auto;
    object-fit: contain;
}