/* ==========================================================================
   ビブグルマン・ブランドカラー定義
   ========================================================================= */
body {
    background-color: #f9f5eb; /* 落ち着きと高級感のある温かみのあるクリーム色 */
    color: #2c2523;
}

/* メインヘッダー：ミシュランの伝統的な深い赤 */
.main-header {
    background: linear-gradient(135deg, #bd1622 0%, #990f19 100%); /* ビブグルマン・レッド */
    box-shadow: 0 4px 20px rgba(153, 15, 25, 0.15);
}

#header-subtitle { 
    color: #bd1622;            /* ミシュランレッドの文字 */
    background: #ffffff; 
    border: 1px solid #f3d078; /* ほのかなゴールドの縁取り */
}

/* フィルター & 検索ボックス */
#search-input:focus,
.filters-grid select:focus {
    border-color: #bd1622;     /* フォーカス時にミシュランレッドに */
    box-shadow: 0 0 0 3px rgba(189, 22, 34, 0.1);
}

/* レストランカード */
.michelin-card { 
    background: #ffffff; 
    border: 1px solid #eadecf; /* 親しみやすいウォームベージュの境界線 */
    box-shadow: 0 6px 16px rgba(44, 37, 35, 0.04); 
}

/* バッジタグ */
.badge-cuisine { background: #f5efe6; color: #6e5d53; } /* 伝統料理を想起させるアースカラー */
.badge-price { background: #fdf2d1; color: #856404; }   /* 落ち着いたゴールド系（ビブグルマンの価値） */
.status-open { color: #287a43; }                        /* 深みのあるグリーン */

/* アクションボタン */
.btn-maps { background: #3a6073; }                      /* シックなスレートブルー */
.btn-waze { background: #00b0ff; }                      /* Waze公式ブルー */
.btn-web { background: #bd1622; }                       /* 公式リンクはミシュランレッド */
.btn-web:hover { background: #990f19; }

/* ヘッダーエリア：背景画像の明るさを活かす設定 */
.main-header {
    text-align: center; 
    padding: 50px 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    max-width: 1200px; 
    margin: 0 auto;
    /* 明るさをキープするため暗転を極限まで薄く */
    background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.22)), url('images/fc-back.jpg') center/cover no-repeat #2d3748; 
    border-radius: 0 0 16px 16px; 
    min-height: 220px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.lang-container { position: absolute; right: 20px; top: 20px; z-index: 10; }
#lang-select { background: rgba(255, 255, 255, 0.95); border: 1px solid #cbd5e0; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.main-header h1 { font-size: 3rem; font-weight: 900; margin: 0; color: #ffffff; letter-spacing: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
#header-subtitle { font-size: 0.85rem; color: #e53e3e; letter-spacing: 1.5px; margin: 12px 0 0 0; font-weight: bold; background: #ffffff; padding: 6px 20px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 検索 ＆ フィルター（4列配置） */
.search-container { display: flex; gap: 10px; justify-content: center; margin: 30px 0 20px 0; }
#search-input { flex: 1; max-width: 500px; padding: 12px 16px; background: #ffffff; border: 2px solid #cbd5e0; border-radius: 8px; outline: none; font-size: 0.95rem; }
#near-me-btn { padding: 12px 20px; background: #ffffff; border: 2px solid #cbd5e0; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 0.9rem; }
.filters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; background: #ffffff; padding: 20px; border-radius: 12px; border: 2px solid #cbd5e0; }
.filters-grid label { color: #4a5568; font-size: 0.75rem; font-weight: 800; display: block; margin-bottom: 6px; }
.filters-grid select { width: 100%; padding: 10px; background: #f7fafc; border: 2px solid #cbd5e0; border-radius: 6px; font-weight: 600; }
.results-counter { color: #4a5568; font-size: 0.9rem; font-weight: 800; margin: 15px 0 5px 0; text-align: right; }

/* グリッド ＆ カード */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; width: 100%; margin-bottom: 40px; }
.michelin-card { background: #ffffff; border: 2px solid #cbd5e0; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; }
.card-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.michelin-card h2 { margin: 0 0 4px 0; font-size: 1.25rem; color: #1a202c; }
.distance-badge { background: #fff5f5; border: 1px solid #fed7d7; color: #e53e3e; font-size: 0.75rem; font-weight: bold; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

/* 各種タグ・バッジ */
.meta-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.badge { font-size: 0.7rem; font-weight: bold; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.badge-cuisine { background: #edf2f7; color: #4a5568; }
.badge-price { background: #fefcbf; color: #744210; }
.badge-card { background: #e2e8f0; color: #4a5568; }

.status-row { font-size: 0.85rem; margin: 6px 0; font-weight: bold; }
.status-open { color: #2f855a; }
.status-closed { color: #c53030; }
.hours-sub { color: #718096; font-weight: normal; }

.desc-box { background: #fff5f5; border-left: 4px solid #e53e3e; padding: 10px; font-size: 0.85rem; margin: 12px 0 0 0; border-radius: 0 6px 6px 0; }
.desc-box p { margin: 4px 0 0 0; color: #4a5568; line-height: 1.4; }

/* アクションボタン */
.card-footer-actions { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.map-buttons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-footer-actions a { text-align: center; padding: 10px 0; text-decoration: none; font-size: 0.85rem; font-weight: bold; color: #fff; border-radius: 6px; display: block; }
.btn-maps { background: #2b6cb0; }
.btn-waze { background: #00bcd4; }
.btn-web { background: #e53e3e; }

/* フッター */
.main-footer { text-align: center; padding: 40px 20px; margin-top: 40px; border-top: 2px solid #cbd5e0; background: #fff; }
.disclaimer { font-size: 0.75rem; color: #718096; max-width: 800px; margin: 0 auto 20px auto; line-height: 1.5; font-weight: 500; }
.footer-share-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
.footer-share-container button { color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-weight: bold; cursor: pointer; }
.btn-wa { background: #22c55e; }
.btn-wc { background: #16a34a; }
.btn-ln { background: #059669; }
.btn-cp { background: #2d3748; }
.copyright { font-size: 0.8rem; color: #718096; margin-top: 10px; font-weight: bold; }

/* レスポンシブ設計 */
@media screen and (max-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 768px) {
    .grid-container { grid-template-columns: 1fr; gap: 20px; }
    .main-header { padding: 20px 10px !important; min-height: 120px !important; }
    .main-header h1 { font-size: 1.8rem !important; }
    #header-subtitle { font-size: 0.65rem !important; padding: 4px 12px !important; margin-top: 6px !important; }
    .filters-grid { grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px !important; }
}
/* ==========================================================================
   モバイル向け（画面幅 768px 以下）の高さ超圧縮レイアウト
   ========================================================================= */
@media (max-width: 768px) {
    /* 1. ヘッダー自体の高さを低くし、余白を削る */
    .main-header {
        padding: 12px 16px !important;
        height: auto !important;
        min-height: 110px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    /* タイトル文字を小さくして1行に収める（言語セレクトと被らない左側に寄せる） */
    .main-header h1 {
        font-size: 1.3rem !important;
        margin: 0 0 4px 0 !important;
        max-width: 65%; /* 右側の言語ボタンのスペースを確保 */
        line-height: 1.2;
        text-align: left !important;
    }

    /* サブタイトル（MICHELIN GUIDE...）も極小化 */
    #header-subtitle {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        align-self: flex-start;
        display: inline-block;
    }

    /* 言語ボタンを完全に右上固定にし、文字被りを完全に防ぐ */
    .lang-select-container {
        position: absolute !important;
        top: 12px !important;
        right: 16px !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    .lang-select-container select {
        padding: 4px 24px 4px 8px !important;
        font-size: 0.8rem !important;
        height: 30px !important;
    }

    /* 2. 検索窓とNear Meボタンのエリアの余白を圧縮 */
    .search-container {
        margin: 8px 0 !important;
        gap: 6px !important;
    }

    /* 検索窓とNear Meの高さも少しコンパクトに */
    #search-input {
        height: 40px !important;
        font-size: 0.9rem !important;
    }
    .btn-near-me {
        height: 40px !important;
        font-size: 0.85rem !important;
        padding: 0 10px !important;
    }

    /* 3. 【最重要】縦並びだった4つのフィルターを「2列×2行」のコンパクトなグリッドに変更 */
    .filters-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2列に分割 */
        gap: 6px !important; /* 隙間を狭く */
        padding: 8px !important;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* フィルター内の各要素の無駄な上下余白を排除 */
    .filter-group {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* 「CUISINE」「AREA」などのラベル文字を小さくして、セレクトボックスと同じ行か極小に */
    .filter-group label {
        font-size: 0.65rem !important;
        margin-bottom: 2px !important;
        color: #7a6e67;
    }

    /* セレクトボックス自体の高さを低くする */
    .filter-group select {
        height: 34px !important;
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
    }

    /* 見つかった店舗数のカウンターの余白も詰める */
    .results-counter {
        margin: 6px 0 2px 0 !important;
        font-size: 0.85rem !important;
    }
}