:root {
    --bg-main: #fcf9f6;        /* ☕ 紅茶の上品さを引き立てるごく薄いココアベージュ */
    --bg-card: #ffffff;        
    --bg-input: #ffffff;       
    --border-color: #f1e7de;   /* 🍞 柔らかなアースカラーの境界線 */
    --text-primary: #2d251e;   /* 📝 深みのあるローストブラウン（黒より高級感が出ます） */
    --text-secondary: #7c6e65; 
    --accent-gold: #c5a059;    /* 👑 アフタヌーンティーにふさわしいシャンパンゴールド */
    --accent-rose: #f43f5e;    
}

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(45, 37, 30, 0.35), rgba(45, 37, 30, 0.6)), url('../images/back.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 20px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#customHeader #txtTitle {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    font-size: 20px !important;
    font-weight: 700;
    margin: 0 0 4px 0;
}
#customHeader #txtSubTitle {
    color: #fcf9f6 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    font-size: 11px !important;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media(min-width: 768px) {
    #customHeader { padding: 35px 20px !important; }
    #customHeader #txtTitle { font-size: 26px !important; }
    #customHeader #txtSubTitle { font-size: 14px !important; }
    .header-container { flex-direction: row; justify-content: space-between; align-items: center; }
}

.lang-switcher select {
    background: rgba(255, 255, 255, 0.95);
    color: #2d251e;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    width: 100%;
}
/* 画面幅がモバイルサイズ（768px未満など）の場合 */
@media (max-width: 767px) {
  .language-select-container { /* ※実際のクラス名に合わせて変更してください */
    display: block;
    max-width: 50%;      /* 幅を半分以下に制限 */
    margin-left: auto;   /* 右寄せにする */
    margin-right: 0;     /* 右端に密着させる（必要に応じて余白を調整） */
  }

  /* もしselect要素自体にwidth: 100%が効いていない場合は以下も追加 */
  .language-select-container select {
    width: 100%;
  }
}

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

/* 🔍 フィルターカード（モバイル幅50%対応） */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
}

.filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    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.02);
}

.filter-group { flex: none !important; }
.filter-group.half-width { width: calc(50% - 6px) !important; min-width: 130px; }
.filter-group.full-width { width: 100% !important; }

.filter-group label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 600;
}

.filter-group select, .filter-group input {
    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;
    width: 100%;
    box-sizing: border-box;
}

.filter-actions { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
.filter-actions.full-width { width: 100%; }

.btn-primary {
    background: var(--accent-gold);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 37px;
    white-space: nowrap;
}

.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    gap: 6px;
    white-space: nowrap;
}

@media(min-width: 768px) {
    .filter-card { flex-wrap: nowrap; gap: 20px; }
    .filter-group.half-width, .filter-group.full-width { width: auto !important; min-width: 180px; }
    .filter-actions.full-width { width: auto; }
}

/* 🍰 ショップグリッド＆カード */
.results-stats { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
#shopCount { color: var(--accent-gold); font-weight: 700; }

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

.shop-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.shop-info { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.shop-title-row { display: flex; justify-content: space-between; align-items: flex-start; }
.shop-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* お気に入りハートボタン */
.btn-fav {
    background: none; border: none; font-size: 18px; cursor: pointer; padding: 0; color: #ccc;
}
.btn-fav.active { color: var(--accent-rose); }

.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.tag-area { background: #f0f4f8; color: #1e3a8a; }
.tag-price { background: #fef3c7; color: #92400e; }

.shop-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 4px 0; }

/* 地図・ウェブサイト用ボタン行 */
.shop-links { display: flex; gap: 8px; margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border-color); }
.btn-link {
    flex: 1; text-align: center; padding: 8px 0; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none;
}
.btn-waze { background: #33ccff; color: #fff; }
.btn-gmap { background: #ea4335; color: #fff; }
.btn-web { background: #4b5563; color: #fff; }
/* ==========================================
   📱 モバイル用レスポンシブ対応（追加）
   ========================================== */
@media (max-width: 768px) {
    /* ヘッダー内の要素の並びを縦並びから位置調整 */
    #customHeader .header-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
        gap: 12px;
    }

    /* 言語プルダウンの親要素を右端に寄せる */
    #customHeader .lang-switcher {
        width: 100%;             /* 一度親をフル幅にしてから */
        display: flex;
        justify-content: flex-end; /* 中身のselectを右端に寄せる */
    }

    /* セレクトボックス自体の幅を50%以下に制限 */
    #customHeader #langSelect {
        width: 45%;              /* 横幅を半分以下（45%）に指定 */
        max-width: 180px;        /* 広がりすぎないように最大幅も制限 */
        padding: 6px 12px;       /* モバイルで見やすい適度な余白 */
        font-size: 13px;
    }
}


/* 🔗 フッター */
.main-footer { border-top: 1px solid var(--border-color); background: #ffffff; padding: 30px 16px; margin-top: 40px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.footer-share-container { display: flex; justify-content: center; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.share-btn { color: #fff; text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; min-width: 80px; border: none; cursor: pointer; }
.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: 16px 0; }