:root {

    --bs-border-width: 1px !important;

    --bs-border-color-translucent: #e50012 !important;

    --global-section-padding: 40px;

}

/* Remove underline from shop_list anchor tag */
.shop_list a {
    text-decoration: none;
}

/* Show underline on hover for inner anchor tags within shop cards */
.shop_list .card-body a:hover {
    text-decoration: underline;
}

/* メニュー専用CSS */

#wrapper {

    background: #fffde5;

}



/* メニュー専用CSS */

.hero {

    display: grid;

    place-content: center;

    background: #f8931f url("/images/menu/title.jpg") no-repeat center / cover;

    height: min(40vh, 360px);

    border-radius: 8px;

    width: 100%;

}



.hero h1 {

    color: white;

    display: grid;

    place-content: center;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.16);

    border: 1.5px solid rgba(255, 255, 255, 0.3);

    text-shadow: 1px 1px 5px saddlebrown;

    border-radius: 8px;

}



section:not(.title) {

    padding-block: var(--global-section-padding);

  }

  

.fair_menu_info {

    color: var(--bs-red);

}



.fair_menu_info .border {

    border-color: var(--bs-red) !important;

}



#fair_menu .btn {

    border: var(--bs-border-width) solid var(--bs-red);

    color: var(--bs-red);

}



#fair_menu .btn:hover {

    color: var(--bs-red) !important;

    border: var(--bs-border-width) solid var(--bs-red) !important;

    background-color: #fffde5 !important;

}







/* 追記 */

  .info-label {
    background-color: #eee;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    flex-basis: 70px;
    flex-shrink: 0;
    flex-grow: 0;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
/* カードのグリッド配置を安定させる */
.row.row-cols-1 .col,
.row.row-cols-md-2 .col,
.row.row-cols-lg-3 .col {
  display: flex;
  justify-content: center;
}

/* 店舗カード本体 */
.shop-list-card {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 1.5rem;
  margin: 0.5rem 0.5rem 2.5rem 0.5rem; /* 下に余白を多めに */
  width: 100%;
  max-width: 600px;
  min-width: 260px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* カード内のパディング調整 */
.shop-list-card > .pt-4 {
  padding-bottom: 4.5rem; /* ボタン分の余白を確保 */
}

/* ラベル幅固定 */
.shop-list-card .info-label,
.shop-list-label {
  background-color: #eee;
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  flex-basis: 70px;
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  margin: 0.25rem 0;
}

/* テイクアウトボタン（PC） */
.shop-list-card .btn-takeout {
  background-color: #E50012;
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  left: 1.5rem;         /* ← 追加：左側にも余白を設定 */
  z-index: 2;
  display: flex;        /* ← inline-flex から flex に変更 */
  align-items: center;
  min-width: 160px;
  width: auto;          /* ← 必要なら幅を自動に */
  justify-content: center; /* ← ボタン内の内容を中央寄せ */
  border-radius: 999px; /* ← 角丸を維持 */
  padding-left: 1rem;   /* ← 左側の余白を追加 */
  padding-right: 1rem;  /* ← 右側の余白を追加 */
}

/* カード内リスト */
.shop-list-card ul.list-unstyled {
  margin-bottom: 0;
}

/* カード内リスト項目 */
.shop-list-card li.d-flex {
  align-items: center;
  margin-bottom: 0.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .shop-list-card {
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  .shop-list-card .btn-takeout {
    position: static;
    display: flex;
    margin: 1rem auto 0 auto;
    width: 90%;
    right: auto;
    left: auto;
    bottom: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
  .shop-list-card > .pt-4 {
    padding-bottom: 1rem;
  }
  .shop-list-card .btn-takeout {
    position: static;
    display: flex;
    margin: 1rem auto 0 auto;
    width: 90%;
    right: auto;
    left: auto;
    bottom: auto;
  }

/* テイクアウトボタンの高さを常に一定にする */
.shop-list-card .btn-takeout {
  min-height: 48px; /* 必要に応じて高さを調整 */
  box-sizing: border-box;
}

/* ホバー時も高さを維持 */
.shop-list-card .btn-takeout:hover,
.shop-list-card .btn-takeout:focus {
  background-color: #ff0015 !important; /* 明るい赤に */
  color: #fff !important;
  border: none !important;
  opacity: 1 !important;
  display: flex !important;
  min-height: 48px; /* 通常時と同じ高さを指定 */
  box-sizing: border-box;
}

/* ボタン内の画像中央揃え */
.shop-list-card .btn-takeout img {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle;
}

/* カード全体リンクのアンダーライン・色を消す（aタグ用に強化） */
a.shop-list-card,
a.shop-list-card:hover,
a.shop-list-card:focus,
a.shop-list-card:active {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* モーダル内の2カラムをPCで横並びに強制 */
@media (min-width: 768px) {
  #menuModal .modal-body > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  #menuModal .modal-body > .row > .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
  }
}

/* モーダルの閉じるボタンを横並びに */
#menuModal .modal-body .modal-footer-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

#menuModal .modal-body .modal-footer-btns .btn {
  flex: 1 1 0;
  min-width: 120px;
}

/* モーダルヘッダーの背景・下線・影を完全に消す */
#menuModal .modal-header,
.modal-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#menuModal .modal-content,
.modal-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* モーダル本体は透明、modal-bodyだけ下地をつける */
#menuModal .modal-content,
.modal-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* modal-bodyに下地（例：白＋角丸＋影）をつける */
#menuModal .modal-body,
.modal-body {
  background: #fff !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
  padding: 2rem !important;
}

/* モーダルのフッター（ボタン下）の下地を消す */
#menuModal .modal-footer-btns,
#menuModal .modal-footer,
.modal-footer-btns,
.modal-footer {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* 閉じるボタン内のアイコン（fa-xmark）を白に */
#menuModal .modal-header .fa-xmark,
.modal-header .fa-xmark {
  color: #fff !important;
}

/* モーダルヘッダーのボタンだけ透明に */
#menuModal .modal-header .btn,
#menuModal .modal-header .close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* テイクアウトボタンのデザイン例（必要に応じて調整） */
.btn-takeout {
  background: #ce0606 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.2s, color 0.2s;
}

.btn-takeout:hover, .btn-takeout:focus {
  background: #ff0015 !important;
}

/* テイクアウトボタンの幅を80%にする */
.modal-footer-btns .btn-takeout {
  width: 80% !important;
  max-width: 600px;
  min-width: 180px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 店舗カードにドロップシャドウを追加 */
.shop-card {
  /* 現在の赤いラインがborderで指定されている場合、ここで上書き・削除します */
  border: 1px solid #e9ecef; /* 例：控えめな境界線 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.shop-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
/* 検索フォームのレスポンシブ対応 */
.search-form {
  width: 100%; /* モバイルでは100% */
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) { /* PC (lg) では70% */
  .search-form {
    width: 70%;
  }
}
/* ★★★ この部分を書き換えます ★★★ */
/* 
  入力欄にフォーカスが当たっている時、
  または、入力があって有効な状態(:valid)の時にスライダーを非表示にする
*/
#keyword:focus + .placeholder-container,
#keyword:valid + .placeholder-container {
  display: none;
}

/* 
  required属性によってブラウザが勝手に追加するスタイル
  (入力がない時の赤い枠線など)を無効化します
*/
#keyword:invalid {
  box-shadow: none;
}


/* ▼▼ 以下は変更ありません ▼▼ */

/* スライドするプレースホルダーのコンテナ */
.placeholder-container {
  position: absolute;
  left: 50px;
  top: 0;
  right: 10px;
  bottom: 0;
  color: #6c757d;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* スライドするテキスト全体を動かすための要素 */
.placeholder-slider {
  animation: slide-up 9s infinite ease-in-out;
}

.placeholder-slider span {
  display: block;
  line-height: 48px;
}

/* 上にスライドするアニメーション */
@keyframes slide-up {
  0%, 25% {
    transform: translateY(0);
  }
  33%, 58% {
    transform: translateY(-48px);
  }
  66%, 91% {
    transform: translateY(-96px);
  }
  100% {
    transform: translateY(-144px);
  }
}

/* モーダル内の電話番号リンクのスタイル */
#modalShopTel a {
  text-decoration: none;
}
#modalShopTel a:hover {
  text-decoration: underline;
}

.shop-card-tel {
  font-size: 1.25rem; /* 文字サイズを大きく */
  text-decoration: none;
}
.shop-card-tel:hover {
  text-decoration: underline;
}

/* プルダウンボタンのスタイル上書き */
.location_list .dropdown-toggle {
  background-color: #fff; /* 背景色を指定 */
  color: #212529; /* テキストの色を白に */
  border-color: #748999; /* ボーダーの色も合わせる */
  min-width: 220px; /* 横幅を固定 */
  text-align: left; /* テキストを左揃えに */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location_list .dropdown-toggle:hover,
.location_list .dropdown-toggle:focus,
.location_list .dropdown-toggle:active {
  background-color: #fff; /* ホバー時の色を少し濃くする */
  color: #212529;
  border-color: #748999;
}

/* プルダウンメニューの枠線を調整 */
.location_list .dropdown-menu {
  --bs-dropdown-border-color: #dee2e6;
}

/* プルダウン選択時の背景色を濃くする */
.location_list .dropdown-item:active,
.location_list .dropdown-item:hover,
.location_list .dropdown-item:focus {
  background-color: #e9ecef;
}

/* 無効化されたドロップダウンボタンのスタイル */
.location_list .dropdown .btn:disabled {
  background-color: #f8f9fa; /* 非常に薄いグレー */
  color: #adb5bd; /* 明るいテキスト色 */
  border-color: #e9ecef; /* 明るいボーダー色 */
  opacity: 1; /* Bootstrapのデフォルトのopacityを上書き */
}