/* ==========================================================================
   KL Premium Supermarkets - エルメスオレンジ・ラグジュアリーデザイン
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cinzel', 'Times New Roman', 'Helvetica Neue', Arial, sans-serif;
  background-color: #faf8f5; /* 柔らかく上品なエクリュホワイト */
  color: #2b2523; /* 高級感を底上げする深みのあるショコラブラウン */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   ヘッダー（Hero）領域
   ========================================================================== */
.hero {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 80px 20px !important; /* 上下の余白を少し広げて、画像を贅沢に見せる */
  background-color: #0abab5; /* フォールバックカラー（ティファニーブルー） */
  border-bottom: 3px solid #2b2523; /* 引き締めのショコラブラウンライン */
  z-index: 1;
}

/* 背景画像の上に薄いシネマティックな暗幕（オーバーレイ）を敷いて文字の可読性を100%にする */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(43, 37, 35, 0.45) 0%, rgba(43, 37, 35, 0.6) 100%);
  z-index: -1; /* テキストの裏、背景画像の上に配置 */
}

/* 言語選択バー */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 40px auto;
}

#lang-select {
  padding: 8px 16px;
  border-radius: 0px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#lang-select option {
  color: #2b2523;
}

#lang-select:hover {
  background: #fff;
  color: #0abab5;
}

/* メインテキスト：完璧なセンタリング */
.hero-flex-layout {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-text-box {
  flex: 1 !important;
  max-width: 800px !important;
  text-align: center !important;
}

.hero-text-box h1 {
  font-size: 3rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 4px !important;
  line-height: 1.3 !important;
  margin-bottom: 18px !important;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 
               0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hero-text-box p {
  font-size: 1.2rem !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  max-width: 700px;
  margin: 0 auto !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   メインコンテンツ & 検索セクション
   ========================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.search-section {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-box {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 650px;
  margin-bottom: 15px;
}

#search-input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid #dcd6cd;
  border-radius: 0px;
  font-size: 0.95rem;
  background-color: #fff;
  color: #2b2523;
  transition: border-color 0.3s;
}

#search-input::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

#search-input:focus {
  outline: none;
  border-color: #0abab5 !important;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.2) !important;
}

#near-me-btn {
  padding: 14px 24px;
  background-color: #0abab5 !important;
  color: #e2e8f0 !important; /* 🛠️ 修正：文字色をグレー気味で見えるように変更 */
  border: none;
  border-radius: 0px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#near-me-btn:hover {
  background-color: #089b96 !important;
  color: #ffffff !important;
}

/* 件数表示バッジ化 */
.counter-box {
  display: inline-block !important;
  margin-top: 15px !important;
  padding: 8px 20px !important;
  background-color: #2b2523 !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

#match-count {
  font-size: 1.1rem !important;
  color: #0abab5 !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
}

/* ==========================================================================
   ✨ 3列グリッドレイアウト（ショップリスト）
   ========================================================================== */
.shop-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.shop-card {
  background: #ffffff;
  border: 1px solid #eae6df;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(42, 38, 37, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(243, 112, 33, 0.08);
  border-color: #0abab5;
}

.shop-header {
  background-color: #fbfbfa;
  padding: 20px 24px;
  border-bottom: 1px solid #f4f1ea;
}

.shop-header h3 {
  font-size: 1.2rem;
  color: #2b2523;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.4;
}

.distance-badge {
  background: #fbeee6;
  color: #0abab5;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 0px;
  font-weight: 600;
  border: 1px solid #f9d7c3;
}

.shop-body {
  padding: 24px;
  font-size: 0.88rem;
  color: #44403c;
  flex: 1;
}

.shop-body p {
  margin-bottom: 0;
  border-bottom: 1px solid #f1ede4;
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.shop-body p:last-of-type {
  border-bottom: none;
}

.shop-body p strong {
  color: #0abab5;
  font-weight: 600;
  display: inline-block;
  width: 120px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.shop-body p span, 
.shop-body p:not(strong) {
  color: #2b2523;
  font-weight: 550;
}

.price-tag {
  color: #bfa15f !important;
  font-weight: bold !important;
  letter-spacing: 2px;
}

.shop-features {
  margin-top: 20px;
  padding: 14px 16px;
  background-color: #f6fbfb;
  border-left: 3px solid #0abab5;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
  border-radius: 2px;
}

/* カードフッターのボタン */
.shop-footer-btns {
  padding: 0 24px 24px 24px;
  display: flex;
  gap: 8px;
}

.btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-gmap {
  background-color: #f4f1ea;
  color: #4a453e;
  border: 1px solid #dcd6cd;
}

.btn-gmap:hover { background-color: #eae5da; }

.btn-waze {
  background-color: #e8f4f8;
  color: #2b7a94;
  border: 1px solid #c3e2ed;
}

.btn-waze:hover { background-color: #d4eaf2; }

/* Android, iOS, WEB専用短縮ボタン */
.btn-android {
  background-color: #3DDC84 !important;
  color: #2b2b2b !important; /* 🛠️ 修正：チャコールグレー */
  border: 1px solid #2bb866 !important;
}
.btn-android:hover { background-color: #32c473 !important; }

.btn-ios {
  background-color: #007AFF !important;
  color: #ffffff !important;
  border: 1px solid #0062cc !important;
}
.btn-ios:hover { background-color: #0062cc !important; }

.btn-web {
  background-color: #6C757D !important;
  color: #ffffff !important;
  border: 1px solid #5a6268 !important;
}
.btn-web:hover { background-color: #5a6268 !important; }

.app-badge {
  background-color: #e8f4f8 !important;
  color: #2b7a94 !important;
  padding: 2px 8px !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  font-size: 0.75rem !important;
}

/* ==========================================================================
   フッター & 免責事項
   ========================================================================== */
.main-footer {
  background-color: #2b2523;
  color: #fff;
  padding: 50px 20px;
  text-align: center;
  margin-top: 80px;
  border-top: 3px solid #0abab5;
}

.footer-disclaimer {
  max-width: 800px;
  margin: 0 auto 20px auto !important;
  padding: 15px 20px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid #6C757D !important;
  border-radius: 0 4px 4px 0;
  text-align: left !important;
}

.footer-disclaimer p {
  font-size: 0.78rem !important;
  color: #a69e9b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.footer-share {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.f-icon, .f-btn-copy {
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.2s;
}

.f-icon:hover, .f-btn-copy:hover { opacity: 0.85; }

.wa { background-color: #1ebd59; }
.wc { background-color: #72a727; }
.line { background-color: #06b64e; }
.f-btn-copy { background-color: #0abab5; color: #fff; }

.footer-copy {
  font-size: 0.8rem;
  color: #a69e9b;
  letter-spacing: 1px;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.2rem;
  color: #8c857b;
  padding: 40px 0;
}

/* ==========================================================================
   📱 レスポンシブ対応（閉じカッコエラーを完全修正）
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .shop-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .hero {
    padding: 40px 15px !important;
  }
  .hero-text-box h1 {
    font-size: 2.2rem !important;
  }
  .hero-text-box p {
    font-size: 1rem !important;
  }
  .shop-list {
    grid-template-columns: 1fr;
  }
  .search-box {
    flex-direction: column;
    gap: 8px;
  }
  #near-me-btn {
    width: 100%;
  }
}
/* ==========================================================================
   📱 モバイル用画面（スマホ）の縦幅・余白の極限短縮最適化
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* ヘッダー全体の縦の余白を極限まで削る */
  .hero {
    padding: 15px 15px 20px 15px !important;
  }

  /* 言語選択バーの上の無駄なスペースを縮小 */
  .top-bar {
    margin: 0 auto 15px auto !important;
  }

  #lang-select {
    padding: 6px 12px !important; /* セレクトボックス自体も少しスリムに */
    font-size: 0.8rem !important;
  }

  /* メインタイトルの文字サイズと上下の余白を小さく */
  .hero-text-box h1 {
    font-size: 1.7rem !important; /* 文字が2行〜3行に綺麗に収まるサイズに縮小 */
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
  }

  /* サブタイトルを少し小さくして行間を詰める */
  .hero-text-box p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
  }

  /* メインコンテンツ全体の上の余白をガッツリ削る */
  .container {
    padding: 15px 15px 40px 15px !important;
  }

  /* 検索セクションの階層をコンパクトに */
  .search-section {
    margin-bottom: 20px !important;
  }

  /* 入力欄とNear Meボタンの隙間を詰める */
  .search-box {
    flex-direction: column;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  #search-input {
    padding: 10px 15px !important; /* 縦幅をスマートに */
    font-size: 0.9rem !important;
  }

  #near-me-btn {
    width: 100%;
    padding: 10px 24px !important; /* 縦幅をスマートに */
    font-size: 0.85rem !important;
  }

  /* 件数表示バッジの無駄な余白をカット */
  .counter-box {
    margin-top: 5px !important;
    padding: 5px 16px !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
  }
  
  #match-count {
    font-size: 0.95rem !important;
  }

  /* 1列グリッドの隙間も少し詰める */
  .shop-list {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    margin-top: 15px !important;
  }
}