/* 🎨 KLHAIRTRANS プレミアム・ライトクリーン・スタイル */
:root {
    --bg-main: #f4f6fa;        /* 🌤️ 清潔感のある明るい極薄のグレーブルー */
    --bg-card: #ffffff;        /* 🏥 病院らしいクリーンで真っ白なカード */
    --bg-input: #ffffff;       /* 🔍 入力エリアも白ベースで統一 */
    --border-color: #e2e8f0;   /* 🌐 優しく洗練された薄い境界線 */
    --text-primary: #1e293b;   /* 📝 視認性の高い、上品な濃いネイビーグレー */
    --text-secondary: #64748b; /* 🧊 落ち着きのあるミディアムグレー */
    --accent-blue: #0284c7;    /* 🔹 清々しい青空のようなスカイメディカルブルー */
    --accent-rose: #ef4444;    
    --accent-green: #10b981;   
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

/* 🖼️ ヘッダー背景画像 & グラデーションオーバーレイ */
#customHeader {
    position: relative !important;
    background-image: linear-gradient(rgba(14, 34, 61, 0.25), rgba(10, 25, 47, 0.45)), url('../images/back.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* 📱 スマホでは上下の余白を「20px」に半減させて超コンパクトに */
    padding: 20px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 💡 画像の上でも文字がくっきり読めるようテキスト影を維持 */
#customHeader #txtTitle {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(14, 34, 61, 0.85), 0 1px 3px rgba(0,0,0,0.5);
    /* 📱 スマホでの文字サイズを20pxに少し縮小し、高さを抑える */
    font-size: 20px !important;
    font-weight: 700;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
#customHeader #txtSubTitle {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 4px rgba(14, 34, 61, 0.85), 0 1px 2px rgba(0,0,0,0.5);
    /* 📱 スマホでのサブタイトルを12pxに */
    font-size: 12px !important;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* 📱 スマホでの要素間の隙間を狭く */
    gap: 12px;
}

/* 💻 PCなどのデスクトップ画面では元のゆったりしたサイズに戻す */
@media(min-width: 768px) {
    #customHeader {
        padding: 40px 20px !important;
    }
    #customHeader #txtTitle {
        font-size: 24px !important;
        margin: 0 0 8px 0;
    }
    #customHeader #txtSubTitle {
        font-size: 14px !important;
    }
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
}

.lang-switcher select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    /* 📱 スマホでのプルダウンの上下パディングを少し薄く（10px→8px） */
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media(min-width: 768px) {
    .lang-switcher select { 
        width: auto; 
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* 🔍 メインコンテナ＆フィルター */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    /* 📱 スマホでのコンテナ上部の余白を縮小（24px→12px） */
    padding: 12px 16px 24px 16px;
}

/* 🧱 フィルターカード全体の構造 */
.filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* 📱 スマホでのカード内パディングを14px、要素の隙間を12pxに詰め、下のマージンも削減 */
    padding: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 💡 エリア選択（Location）枠をスマホで「半分(50%)」にする設定 */
.filter-group {
    width: calc(50% - 6px) !important; 
    min-width: 130px;
    flex: none !important;
}

.filter-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px; /* 📱 スマホでラベル下の隙間を詰める */
    font-weight: 600;
}

.filter-group select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    /* 📱 スマホでのプルダウンの高さを少しスリムに */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 🔘 ボタンやチェックボックスを綺麗に並べるための外枠 */
.filter-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
}

.btn-primary {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    /* 📱 スマホでのボタンの上下パディングを調整して少し低く */
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    height: 37px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.btn-primary:hover {
    background: #0369a1; 
}

/* 🟩 カスタムチェックボックス */
.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    gap: 6px;
    color: var(--text-primary);
    white-space: nowrap;
}

/* 💻 PCなどのデスクトップ画面（横幅768px以上）での最適化（元サイズを維持） */
@media(min-width: 768px) {
    .main-container {
        padding: 24px 16px;
    }
    .filter-card {
        padding: 20px;
        flex-wrap: nowrap; 
        justify-content: flex-start;
        gap: 24px;
        margin-bottom: 24px;
    }
    .filter-group {
        width: 200px !important; 
    }
    .filter-group label {
        font-size: 13px;
        margin-bottom: 8px;
    }
    .filter-group select {
        padding: 10px 16px;
        font-size: 14px;
    }
    .filter-actions {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    .btn-primary {
        padding: 12px 24px;
        font-size: 14px;
        height: 42px;
    }
    .checkbox-container {
        font-size: 14px;
        gap: 8px;
    }
}

/* 🏗️ グリッドレイアウト */
.results-stats {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

@media(min-width: 768px) {
    .results-stats {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

#clinicCount {
    color: var(--accent-blue); 
    font-weight: 700;
}

.clinic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media(min-width: 768px) {
    .clinic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width: 1024px) {
    .clinic-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 🏥 クリニックカード内部の調整 */
.clinic-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.clinic-card h3 {
    color: var(--text-primary) !important;
}

.clinic-image-container {
    background-color: #f1f5f9 !important; 
}

/* アコーディオンの中身 */
.accordion-content {
    border-top: 1px solid var(--border-color) !important;
}
.accordion-content p {
    color: #334155 !important; 
}
.accordion-content h4 {
    font-weight: 700 !important;
}

/* 詳細を開くボタンの配列調整 */
.btn-toggle-accordion {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-toggle-accordion:hover {
    background: #f1f5f9 !important;
}

/* 🔗 フッター */
.main-footer {
    border-top: 1px solid var(--border-color);
    background: #ffffff; 
    padding: 40px 16px;
    margin-top: 60px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.02);
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
}

.footer-disclaimer {
    line-height: 1.6;
    margin-bottom: 24px;
}

.footer-share-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    min-width: 90px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wa-btn { background: #128c7e; }
.wechat-btn { background: #07c160; }
.line-btn { background: #06c755; }
.copy-btn { background: #64748b; }

.footer-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 24px 0;
}

.footer-bottom {
    font-size: 12px;
    color: var(--text-secondary);
}