/* ==== ヘッダー来店予約ボタン / FVバッジ / SPヘッダー調整（?ver剥がし対策で新URLに集約） ==== */
/* ============================================
   Header CTA - 赤枠「店舗予約」ボタン
   ============================================ */
.l-hd__icon--reserve {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.l-hd__reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: 2px solid #9B0014;
  border-radius: 6px;
  background-color: #9B0014; /* PCも赤塗りで目立たせる（2026-07-29 澤田さん承認） */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}

.l-hd__reserve-btn:hover {
  background-color: #7A0010; /* 塗りボタンのホバーは少し濃い赤 */
  color: #fff;
}

.l-hd__reserve-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.l-hd__reserve-txt {
  letter-spacing: 0.05em;
}

/* SP/タブレット: ヘッダーは元の構成（🔍検索・✉お問い合わせ）に戻す。
   来店予約はドロワー先頭CTA＋下部固定バーへ集約するため、ヘッダーのボタンは非表示。
   （検索/お問い合わせの非表示・中央寄せは撤去＝親テーマの既定表示に戻す） */
@media screen and (max-width: 1271px) {
  .l-hd__icon--reserve {
    display: none !important;
  }
  /* ドロワー最下部（企業情報）がスクロール下端に貼り付き、
     iOSの慣性スクロール/URLバー開閉の弾みでタップできない問題の対策。
     ドロワー先頭に来店予約CTAを足した分も含め、最下部に十分な余白を確保する。 */
  /* 【重要】ドロワー高さを動的ビューポート(dvh)基準に上書き。
     親テーマは height:calc(var(--vh,1vh)*100 - 68px) だが --vh がJSで未設定＝100vh扱いになり、
     モバイルの下部ツールバー分だけドロワーが長くなり最下部(通販はこちら)がツールバー裏に隠れていた。
     dvhはツールバー可視分を自動で除くため最下部まで確実に表示される（非対応環境は親ルールにフォールバック）。 */
  #sp_menu.sp_menu_open {
    height: calc(100dvh - 68px);
  }
  #sp_menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* 最下部(通販はこちら)がスクロール下端に貼り付き、慣性スクロールでタップしづらい
     問題の対策。赤帯(.l-sp__info)の最下部に余白を付与＝項目間には空白を作らず、
     一番下(通販の下)だけにクリアランスを確保する。 */
  #sp_menu .l-sp__info {
    padding-bottom: 48px;
  }
}

/* ============================================
   SPドロワー先頭：来店予約CTA（「店舗検索」の上）
   ============================================ */
.l-sp__reserve-cta {
  margin: 14px 16px 6px;
}
.l-sp__reserve-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 26px;
  background-color: #9B0014;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(155, 0, 20, 0.32);
}
.l-sp__reserve-cta__link:active {
  background-color: #7A0010;
}
.l-sp__reserve-cta__icon {
  width: 20px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================
   FV バッジ型CTA - 赤いギザギザバッジ
   ============================================ */
.p-home-fv-badge {
  position: absolute;
  right: 30px;
  bottom: 200px; /* お得情報バナーの上に収める（PC。SPは非表示） */
  z-index: 10;
  width: 160px;
  height: 160px;
}

.p-home-fv-badge__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  transition: transform 0.3s;
}

.p-home-fv-badge__link:hover {
  transform: scale(1.08);
}

/* スカラップ（丸い波型）の背景 */
.p-home-fv-badge__bg {
  display: block;
  position: absolute;
  inset: -5%;
  background-color: #9B0014;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 5 C108 5,115 15,118 15 C121 15,130 7,137 10 C144 13,145 24,148 26 C151 28,162 24,167 30 C172 36,166 46,167 49 C168 52,178 58,180 65 C182 72,174 80,174 83 C174 86,182 94,182 101 C182 108,174 114,174 117 C174 120,182 128,180 135 C178 142,168 148,167 151 C166 154,172 164,167 170 C162 176,151 172,148 174 C145 176,144 187,137 190 C130 193,121 185,118 185 C115 185,108 195,100 195 C92 195,85 185,82 185 C79 185,70 193,63 190 C56 187,55 176,52 174 C49 172,38 176,33 170 C28 164,34 154,33 151 C32 148,22 142,20 135 C18 128,26 120,26 117 C26 114,18 108,18 101 C18 94,26 86,26 83 C26 80,18 72,20 65 C22 58,32 52,33 49 C34 46,28 36,33 30 C38 24,49 28,52 26 C55 24,56 13,63 10 C70 7,79 15,82 15 C85 15,92 5,100 5Z' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 5 C108 5,115 15,118 15 C121 15,130 7,137 10 C144 13,145 24,148 26 C151 28,162 24,167 30 C172 36,166 46,167 49 C168 52,178 58,180 65 C182 72,174 80,174 83 C174 86,182 94,182 101 C182 108,174 114,174 117 C174 120,182 128,180 135 C178 142,168 148,167 151 C166 154,172 164,167 170 C162 176,151 172,148 174 C145 176,144 187,137 190 C130 193,121 185,118 185 C115 185,108 195,100 195 C92 195,85 185,82 185 C79 185,70 193,63 190 C56 187,55 176,52 174 C49 172,38 176,33 170 C28 164,34 154,33 151 C32 148,22 142,20 135 C18 128,26 120,26 117 C26 114,18 108,18 101 C18 94,26 86,26 83 C26 80,18 72,20 65 C22 58,32 52,33 49 C34 46,28 36,33 30 C38 24,49 28,52 26 C55 24,56 13,63 10 C70 7,79 15,82 15 C85 15,92 5,100 5Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  animation: fv-badge-pulse 2s ease-in-out infinite;
}

@keyframes fv-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.p-home-fv-badge__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.p-home-fv-badge__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.p-home-fv-badge__txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.05em;
}

.p-home-fv-badge__underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SP: バッジサイズ調整 */
@media screen and (max-width: 767px) {
  /* SPではFVバッジを非表示（代わりに下部固定バーを表示） */
  .p-home-fv-badge {
    display: none !important;
  }

  .p-home-fv-badge__icon {
    width: 40px;
    height: 40px;
  }

  .p-home-fv-badge__txt {
    font-size: 12px;
  }
}

/* ============================================
   来店予約 右端 縦長固定CTA（③）
   - PC専用（SPはヘッダーの来店予約ボタンに一本化）
   - FV通過後にフェードイン
   - 予約フォーム(qualification)ページでは非出力（functions.php側で制御）
   ============================================ */
.c-reserve-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(24px, -50%);
  z-index: 9000;
  background-color: #9B0014;
  color: #fff;
  text-decoration: none;
  border-radius: 12px 0 0 12px;
  padding: 18px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.c-reserve-rail.is-visible {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}

.c-reserve-rail:hover {
  background-color: #7f0010;
}

.c-reserve-rail__icon {
  width: 34px;
  height: 30px;
  flex-shrink: 0;
}

.c-reserve-rail__txt {
  writing-mode: vertical-rl;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.15;
}

.c-reserve-rail__play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fff;
  color: #9B0014;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* SP/タブレットでは右端タブは非表示（代わりに下部固定バー） */
@media screen and (max-width: 1271px) {
  .c-reserve-rail {
    display: none !important;
  }
}

/* ============================================
   SP専用：下部固定CTAバー（③のSP版）
   - FV通過後に下からスライドアップ
   ============================================ */
.c-reserve-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.14);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.c-reserve-bottombar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.c-reserve-bottombar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 26px;
  background-color: #9B0014;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(155, 0, 20, 0.4);
}

.c-reserve-bottombar__icon {
  width: 20px;
  height: 18px;
  flex-shrink: 0;
}

/* PC（≥1272px）では下部バーは非表示（PCは右端タブに一本化） */
@media screen and (min-width: 1272px) {
  .c-reserve-bottombar {
    display: none !important;
  }
}

/* ============================================
   SPファーストビュー：来店予約バナー（お得情報の上・赤地×白）
   ★独立クラスで自己完結。お得情報(.p-home-fv-banner)のクラスは一切使わないため、
     CSS未適用でもお得情報のクローン（黒・重なり・PC表示）に化けない。
   - フォントはお得情報と同じ Noto Sans JP を明示指定。
   - スマホ(≤767px)のみ表示（既定は display:none でPC/タブレット非表示）。
   - お得情報と同じ横位置(width:85%; right:19px)で、その真上(bottom:101px)に配置。
   ============================================ */
.p-home-fv-reserve {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-home-fv-reserve {
    display: flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    right: 19px;
    width: 85%;
    bottom: 101px;
    z-index: 8;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 6px;
    background-color: #9B0014;
    box-shadow: 0 4px 12px rgba(155, 0, 20, 0.4);
    text-decoration: none;
  }
  .p-home-fv-reserve__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-home-fv-reserve__icon svg {
    width: 26px;
    height: 23px;
  }
  .p-home-fv-reserve__body {
    display: flex;
    flex-direction: column;
  }
  .p-home-fv-reserve__ttl {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
  }
  .p-home-fv-reserve__txt {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
  }
}