@charset "utf-8";
/* =========================================================
   cards.css — カード・サマリー表示コンポーネント（全ページ共通）

   このファイル1箇所を変更するだけでサイト全体のサマリーカードデザインが変わる。

   クラス早見表:
     .reserveSummaryCard    ← 日時選択・確認画面のサマリーカード
     .shopInfo              ← メニュー選択・スタッフ選択ページのショップ情報
     .summaryRow            ← reserveSummaryCard 内の行
     .shopInfo-row          ← shopInfo 内の行
     .summaryLabel          ← ラベル（"SALON" "MENU" 等）
     .shopInfo-label        ← shopInfo のラベル
     .summaryContent        ← reserveSummaryCard のメインテキスト
     .shopInfo-main         ← shopInfo のメインテキスト
     .shopInfo-en           ← 店舗英語名
     .summaryEnname         ← メニュー英語名
     .ka-btn-change         ← 変更ボタン（buttons.css に定義）
     #prev-res-bar          ← 前回と同じ予約をする フローティングカード
   ========================================================= */

/* ── 予約サマリーカード / ショップ情報カード ─────────────────
   .reserveSummaryCard = 日時選択・確認画面
   .shopInfo           = メニュー選択・スタッフ選択
   ここを1箇所変更するだけでサイト全体のサマリーデザインが変わる。
   ─────────────────────────────────────────────────────── */
.reserveSummaryCard,
.shopInfo {
  margin: 0 0 8px;
  border-top: 1px solid rgba(164, 128, 117, 0.15);
  border-bottom: 1px solid rgba(164, 128, 117, 0.15);
  border-radius: 0;
  background: transparent;
  padding: 4px 0;
}

.reserveSummaryCard .summaryRow,
.shopInfo .shopInfo-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(164, 128, 117, 0.10);
  gap: 10px;
}

.reserveSummaryCard .summaryRow:last-child,
.shopInfo .shopInfo-row:last-child {
  border-bottom: none;
}

.reserveSummaryCard .summaryShopInfo,
.reserveSummaryCard .summaryMenuInfo,
.shopInfo .shopInfo-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* ── ラベル（SALON / MENU / STAFF 等） ──────────────────
   細いセリフ体の英字ラベル + オレンジのボーダーライン。
   ─────────────────────────────────────────────────────── */
.summaryLabel,
.shopInfo-label {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--ka-gold);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 101, 0, 0.35);
}

.reserveSummaryCard .summaryContent {
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 700;
  color: var(--ka-ink);
  line-height: 1.4;
  margin: 0;
}
.shopInfo-main {
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 700;
  color: var(--ka-ink);
  line-height: 1.4;
  margin: 0;
}

/* ── 店舗/メニュー 英語名（サブテキスト） ────────────────── */
.shopInfo-en {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 600;
  color: var(--ka-subtext);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2px 0 0;
  line-height: 1.3;
}

.summaryEnname {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 600;
  color: var(--ka-subtext);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}

.shopInfo-main a {
  color: inherit;
  text-decoration: none;
}

.reserveSummaryCard .menuMeta {
  font-size: 13px;
  color: var(--ka-ink-soft);
  font-weight: 500;
  margin-top: 1px;
}

/* ── shopInfo-sub ── 店舗のサブ情報（電話番号・住所等） ─── */
.shopInfo-sub {
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 400;
  color: var(--ka-ink);
  margin: 0;
  line-height: 1.5;
}

.shopInfo-sub a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 400;
  color: var(--ka-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.shopInfo-sub a:link,
.shopInfo-sub a:visited {
  color: var(--ka-ink);
}

.shopInfo-sub a:hover {
  color: var(--ka-orange);
}

/* =========================================================
   REPEAT RESERVATION — 前回と同じ予約（インラインリンク）
   shop / menu 両ページ共通で使用する。
   ========================================================= */
#reserve .selectWrap p#pre_res {
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: center;
}

#reserve .selectWrap .pre_res a {
  display: block;
  width: 72%;
  margin: 0 auto;
  padding: 14px 0;
  text-align: center;
  text-decoration: none;
  color: #675852;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  transition: opacity 0.25s ease;
}

#reserve .selectWrap .pre_res a::before {
  content: "Repeat Reservation";
  position: static;
  display: block;
  margin-bottom: 8px;
  font-family: 'Cormorant SC', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(164, 128, 117, 0.60);
}

#reserve .selectWrap .pre_res a::after {
  content: "Reserve Again \2192";
  display: block;
  margin-top: 8px;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(164, 128, 117, 0.80);
}

#reserve .selectWrap .pre_res a:hover {
  opacity: 0.72;
}

#reserve .selectWrap .pre_res a:focus-visible {
  outline: 1px solid rgba(164, 128, 117, 0.45);
  outline-offset: 4px;
}

@media only screen and (max-width: 480px) {
  #reserve .selectWrap .pre_res a {
    width: 86%;
    padding: 10px 0;
    font-size: 15px;
  }

  #reserve .selectWrap .pre_res a::before {
    font-size: 9px;
  }

  #reserve .selectWrap .pre_res a::after {
    font-size: 10px;
  }
}

/* =========================================================
   #prev-res-bar — 前回と同じWEB予約をする フローティングカード
   select_shop・select_menu ページの右下に固定表示される。
   JSで表示/非表示を制御（display: none をデフォルトとし、JSで show する）。
   ========================================================= */
#prev-res-bar {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 10px;
  z-index: 200;
  width: 260px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(184, 154, 114, 0.22);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.11);
}

#prev-res-bar .prev-res-bar__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--ka-subtext);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s;
}

#prev-res-bar .prev-res-bar__close:hover {
  opacity: 1;
}

#prev-res-bar .prev-res-bar__link {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 10px;
  text-decoration: none;
  color: var(--ka-ink);
  border-radius: 8px;
  transition: background 0.15s;
}

#prev-res-bar .prev-res-bar__link:hover {
  background: rgba(248, 244, 240, 0.8);
}

#prev-res-bar .prev-res-bar__eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ka-gold);
  margin-bottom: 6px;
}

#prev-res-bar .prev-res-bar__text {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 300;
  color: var(--ka-ink);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

#prev-res-bar .prev-res-bar__menu {
  font-size: 11px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#prev-res-bar .prev-res-bar__text--guest {
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

#prev-res-bar .prev-res-bar__arrow {
  display: block;
  text-align: right;
  font-family: var(--font-ja);
  font-size: 11px;
  font-weight: 300;
  color: var(--ka-gold);
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(184, 154, 114, 0.18);
  padding-top: 8px;
  margin-top: 8px;
}

@media (max-width: 360px) {
  #prev-res-bar {
    right: 8px;
    width: 240px;
  }
}

/* ── スマホ: サマリーカード・shopInfo の縦幅を詰める ───────── */
@media (max-width: 768px) {
  /* stepBar 直下のカードに menu の pre_res マージン相当の間隔を追加 */
  .reserveSummaryCard {
    margin-top: 12px;
  }

  .reserveSummaryCard .summaryRow,
  .shopInfo .shopInfo-row {
    padding: 7px 0;
  }

  .reserveSummaryCard .summaryContent,
  .shopInfo-main {
    font-size: 14px;
  }

  .summaryLabel,
  .shopInfo-label {
    font-size: 10px;
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  .shopInfo-sub,
  .shopInfo-sub a {
    font-size: 13px;
  }

  .shopInfo-en,
  .summaryEnname {
    font-size: 10px;
  }
}