@charset "utf-8";

/* ============================================
 * map 共通変数
 * ============================================ */
/* ローカル変数はサイト共通変数（variables.css）のエイリアス */
:root {
    --map-primary:      var(--color-primary);
    --map-primary-dark: var(--color-primary-darker);
    --map-accent:       #d4e8a5; /* このページ固有の淡色 */
    --map-light-bg:     #f7fbef; /* このページ固有の淡緑背景 */
    --map-border:       #dfe8c0; /* このページ固有のボーダー */
    --map-text:         var(--color-text);
    --map-muted:        var(--color-muted);
    --map-pdf:          var(--color-danger);
    --map-link:         var(--color-accent);
    --map-bg:           var(--color-bg);
}

/* ============================================================
   ラッパー
   ============================================================ */
#map {
    padding: 40px 0;
    background: var(--map-bg);
}
#map .inner {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#map.no-padding-top {
    padding-top: 0;
}

/* ============================================================
   ページタイトル（支部ページ）
   ============================================================ */
.page-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--map-text);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--map-primary);
}

/* ============================================================
   地図エリア
   ============================================================ */
.clinic-map-section {
    margin-bottom: 32px;
}
.clinic-map-section .section-title {
    margin: 0 0 16px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: bold;
    color: var(--map-primary);
    background: var(--map-light-bg);
    border-left: 5px solid var(--map-primary);
    border-radius: 0 4px 4px 0;
}
#clinic-map {
    width: 100%;
    height: 520px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid var(--map-border);
}

/* ============================================================
   区別セクション
   ============================================================ */
.ward-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ward-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ward-heading {
    margin: 0;
    padding: 10px 18px;
    font-weight: bold;
    font-size: 17px;
    color: var(--map-primary);
    background: var(--map-light-bg);
    border-left: 5px solid var(--map-primary);
    border-radius: 0 4px 4px 0;
}
.ward-heading::after {
    content: none;
}

/* ============================================================
   クリニックカード
   ============================================================ */
.ward-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}
.clinic-card {
    border: 1px solid var(--map-border);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
    line-height: 1.65;
    transition: background-color .25s, box-shadow .25s, border-color .25s, transform .15s;
    scroll-margin-top: 100px;
    display: flex;
    flex-direction: column;
}
.clinic-card:hover {
    border-color: var(--map-accent);
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.12);
}
.clinic-card.is-focused {
    border-color: var(--map-primary);
    background: var(--map-light-bg);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.18);
}
.clinic-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--map-border);
}
.clinic-head h2,
.clinic-head h3,
.clinic-name {
    padding: 0;
    margin: 0;
}
.clinic-head h2::after,
.clinic-head h3::after {
    content: none;
}
.clinic-no {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: bold;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: var(--map-primary);
    color: #fff;
    border-radius: 50%;
}
.clinic-name {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: bold;
    flex: 1;
    line-height: 1.4;
    background: none !important;
    border-left: none !important;
    border-radius: 0!important;
}
.clinic-name a {
    color: var(--map-text);
    text-decoration: none;
}
.clinic-name a:hover {
    color: var(--map-primary);
    text-decoration: underline;
}
.clinic-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clinic-dr,
.clinic-address,
.clinic-tel {
    font-size: 13px;
    color: #333;
}
.clinic-dr strong,
.clinic-tel strong {
    color: var(--map-primary);
    margin-right: 4px;
}
.clinic-tel {
    display: flex;
    align-items: center;
}
.clinic-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}
.clinic-details-link,
.back-to-map {
    display: inline-block;
    font-size: 12px;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.4;
}
.clinic-details-link {
    color: #fff;
    background: var(--map-primary);
    border: 1px solid var(--map-primary);
}
.clinic-details-link:hover {
    background: var(--map-primary-dark);
    border-color: var(--map-primary-dark);
}
.back-to-map {
    color: var(--map-primary);
    background: var(--map-light-bg);
    border: 1px solid var(--map-border);
}
.back-to-map:hover {
    background: #dde6f2;
}

/* ============================================================
   マップUI（Google Map ピン・吹き出し）
   ============================================================ */
.map-number-pin {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--map-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
}
.map-info-window {
    font-size: 14px;
    line-height: 1.5;
}
.custom-bubble {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #333;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.custom-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* ============================================================
   map/index.php 固有
   ============================================================ */
/* メインマップ画像 */
.map-intro {
    text-align: center;
    margin: 0 0 32px;
}
.map-intro img {
    max-width: 100%;
    height: auto;
}

/* 後方互換: 既存の .txC もスタイリング */
.txC {
    text-align: center;
    margin: 0 0 28px;
}
.txC img {
    max-width: 100%;
    height: auto;
}

/* 見出し */
#map .inner h2 {
    margin: 32px 0 18px;
    padding: 10px 18px;
    font-size: 20px;
    font-weight: bold;
    color: var(--about-text);
    background: var(--map-light-bg);
    border-left: 5px solid var(--map-primary);
    border-radius: 0 4px 4px 0;
}
#map .inner h2::after {
    content: none;
}
#map .inner h2:first-of-type,
#map .inner .map-intro + h2 {
    margin-top: 0;
}

#map .inner h3 {
    margin: 0 0 24px;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: bold;
    color: #6b8220;
    background: #f2f8e4;
    border-left: 4px solid #a2c32d;
    border-radius: 4px;
}
#map .inner h3:first-of-type {
    margin-top: 0;
}

/* 本文 */
#map .inner > p,
#map .inner > section p {
    line-height: 1.9;
    font-size: 15px;
    margin: 8px 0 24px;
    color: #333;
    padding-top: 0;
}

/* セクションタイトルバー（.tit を h3 互換にスタイリング） */
.tit {
    display: block;
    margin: 0 0 24px;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: bold;
    color: #6b8220;
    background: #f2f8e4;
    border-left: 4px solid #a2c32d;
    border-radius: 4px;
}

/* 検索バナーボックス */
.box {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    border: 1px solid var(--map-border);
    border-radius: 8px;
    background: #fafbfc;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}
.box:hover {
    box-shadow: 0 2px 8px rgba(31, 60, 136, 0.08);
}
.Btnimg img {
    display: block;
    max-width: 180px;
    border-radius: 4px;
}
.txri .col {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #444;
}

/* 6支部リストボタン */
#map .inner > ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
#map .inner > ol li {
    margin: 0;
    padding: 0;
}
#map .inner > ol li a {
    display: block;
    padding: 12px 16px;
    background: #86b534;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}
#map .inner > ol li a:hover {
    background: var(--map-primary-dark);
    transform: translateY(-1px);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1100px) {
    .ward-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #map {
        padding: 20px 0;
    }
    #map .inner h2 {
        font-size: 17px;
        padding: 8px 14px;
    }
    .tit {
        font-size: 15px;
        padding: 8px 14px;
    }
    .box {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
    }
    #map .inner > ol {
        grid-template-columns: repeat(2, 1fr);
    }
    .clinic-map-section .section-title,
    .ward-heading {
        font-size: 15px;
        padding: 8px 14px;
    }
}

@media (max-width: 700px) {
    .ward-grid {
        grid-template-columns: 1fr;
    }
    #clinic-map {
        height: 420px;
    }
}