@charset "UTF-8";

/* =========================================================================
 * menespark - ネット予約 統合CSS
 * 配置: /assets/reserve.css
 *
 * 旧 reserve.css（構造・白配色）と reserve-form.css（黒×ゴールド上書き）を
 * 1本にまとめたもの。2層構成をやめたので .rsv-body--dark での色上書きは不要。
 * 全ステップページで
 *     $page_css = ['/assets/reserve.css'];
 * とだけ書けばよい。
 *
 * 前提: 1rem = 10px（html に 62.5%）。Bootstrap Icons。
 *
 * 目次
 *   01 変数・ガワ
 *   02 レイアウト（PC2カラム / SP1カラム）
 *   03 ステップ進捗（.rsv-prog）
 *   04 見出し・注記・アラート
 *   05 日時グリッド（週ナビ / 表 / マス / SPの日ページ送り）
 *   06 フリーモード（セラ選択）
 *   07 選択肢（.rc-opt / .rc-dopt）
 *   08 入力フォーム（contact）
 *   09 確認画面（confirm）
 *   10 完了画面（complete）
 *   11 予約内容カード（伝票）
 *   12 SP下端バー・ボトムシート
 *   13 適用中バナー
 * ========================================================================= */


/* =========================================================================
 * 01 変数・ガワ
 * ========================================================================= */

.rsv-body {
    --rsv-gold: #c9a86c;
    --rsv-gold-line: rgba(201, 168, 108, .38);
    --rsv-gold-bg: rgba(201, 168, 108, .09);
    --rsv-bg: #0c0c0f;
    --rsv-panel: #15151a;
    --rsv-panel-2: #1b1b21;
    --rsv-sunken: #101014;
    --rsv-line: #2a2a30;
    --rsv-text: #ece7df;
    --rsv-dim: #9a948b;
    --rsv-mute: #5f5b54;
    --rsv-green: #2ecc71;
    --rsv-check: #2ecc71;
    --rsv-check-line: rgba(46, 204, 113, .45);
    --rsv-box: #3a3a44;
    --rsv-red: #e5484d;
    --rsv-blue: #5a8dd6;
    --rsv-orange: #e0701f;
    --rsv-pink: #c2385f;
    --rsv-dock-h: 66px;
}

/* 横はみ出し止めは html だけに掛ける。
   body に overflow を付けると、body が「切り抜き枠」になり、
   position:fixed の下端バーがページ末尾（フッターの位置）に
   閉じ込められてしまう。ここは触らないこと。 */
html:has(body.rsv-body) {
    min-height: 100%;
    overflow-x: clip;
}

body.rsv-body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rsv-bg);
    color: var(--rsv-text);
}

.rsv-body > footer,
.rsv-body > .footer,
.rsv-body > .site-footer {
    margin-top: auto;
}

.rsv-body .datatime-wapper {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 0;
}


/* =========================================================================
 * 02 レイアウト
 *
 * PC  : 左コンテンツ + 右300pxの伝票（sticky）
 * SP  : 1カラム。伝票は右カラムごと隠し、下端バー（12節）に置き換える。
 *       complete.php だけは右カラムの中身が本文なので、下に回して表示する。
 * ========================================================================= */

.rsv-side {
    display: none;
}

@media (min-width: 1024px) {

    .rsv-body .rsv-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        align-items: start;
    }

    .rsv-body .rsv-layout .rsv-wrap {
        max-width: none;
        width: auto;
        margin: 0;
    }

    .rsv-body .rsv-side {
        display: block;
        position: sticky;
        top: 12px;
    }
}

@media (max-width: 1023px) {

    .rsv-body .rsv-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .rsv-body .rsv-layout .rsv-wrap {
        width: 100%;
    }

    /* SPでは右カラム＝伝票を出さない（下端バーに集約） */
    .rsv-body .rsv-layout .rsv-side {
        display: none;
    }

    /* complete.php: 「受け付けました」カードの下に回して表示 */
    .rsv-body .rsv-layout--side-below .rsv-side {
        display: block;
        position: static;
        width: 100%;
        order: 1;
    }

    .rsv-body .rsv-layout--side-below .rsv-wrap {
        order: 0;
    }
}

/* confirm.php: 1カラム中央寄せ */
.rsv-body .rsv-layout--single {
    display: block;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.rsv-body .rsv-layout--single .rsv-wrap {
    max-width: none;
    width: auto;
    margin: 0;
}


/* =========================================================================
 * 03 ステップ進捗（旧 .rsv-steps を置き換え）
 *
 * 旧版は5枠を横並びにしていて、SPで 0.8rem まで縮んで読めなかった。
 * 現在地は文字で出し、進み具合は帯だけで見せる。
 * ========================================================================= */

.rsv-prog {
    margin-bottom: 16px;
}

.rsv-prog__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 7px;
}

.rsv-prog__count {
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
}

.rsv-prog__now {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rsv-text);
}

.rsv-prog__next {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--rsv-dim);
}

.rsv-prog__bar {
    display: flex;
    gap: 3px;
}

.rsv-prog__seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--rsv-line);
}

.rsv-prog__seg.is-done {
    background: var(--rsv-gold-line);
}

.rsv-prog__seg.is-now {
    background: var(--rsv-gold);
}


/* ── 決定済みチップ（_chips.php） ──
   進むほど増えていく「いま決まっていること」の帯。
   SPでは伝票を画面から追い出しているので、直前に決めたことを
   確かめる場所がここしかない。各項目に「変更」を付ける。 */
.rsv-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rsv-chips::-webkit-scrollbar {
    display: none;
}

.rsv-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border: 1px solid var(--ap-line);
    background: var(--ap-panel-v2);
    border-radius: 999px;
    padding: 6px 8px 6px 12px;
    font-size: 1.1rem;
    color: var(--rsv-text);
    white-space: nowrap;
}

.rsv-chip__img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rsv-chip__t {
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rsv-chip__edit {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--rsv-gold);
    text-decoration: none;
    border: 1px solid var(--rsv-gold-line);
    border-radius: 999px;
    padding: 2px 9px;
}

.rsv-chip__edit:hover {
    background: rgba(201, 168, 108, .12);
}


/* =========================================================================
 * 04 見出し・注記・アラート
 * ========================================================================= */

.rsv-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rsv-text);
    margin: 0 0 6px;
}

.rsv-req {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    background: #e53935;
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
}

.rsv-note {
    font-size: 1.1rem;
    color: var(--rsv-dim);
    text-align: center;
    margin-top: 14px;
}

.rsv-alert {
    background: #2a1416;
    border: 1px solid #5a2a2e;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #e6a9ac;
    margin-bottom: 14px;
}

.rsv-alert--ok {
    background: rgba(120, 180, 120, .10);
    border-color: rgba(120, 180, 120, .40);
    color: #a8d49a;
}

.rsv-empty {
    border: 1px solid #2c2c33;
    border-radius: 12px;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--rsv-dim);
    background: var(--ap-panel-v2);
    padding: 50px 16px;
    text-align: center;
    font-size: 1.3rem;
}

/* ── 行き止まりの案内（タイムサービスの窓に空きが無いとき） ──
   何も押せない画面をそのまま見せない。逃げ道のボタンまでを1枚にまとめる。 */
.rsv-deadend {
    background: #241a10;
    border: 1px solid #6b4f22;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.rsv-deadend__head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f0d590;
    margin-bottom: 8px;
}

.rsv-deadend__body {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--rsv-dim);
    margin: 0 0 14px;
}

.rsv-deadend__btn {
    display: block;
    padding: 13px 16px;
    border-radius: 8px;
    background: var(--rsv-gold);
    color: #14140f;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.rsv-deadend__btn:hover {
    background: #f0d590;
}

.rsv-deadend__note {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--rsv-mute);
    text-align: center;
    margin: 10px 0 0;
}


/* 入口でセラ確定のときの見出し */
.rsv-therapist-head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rsv-panel);
    border: 1px solid var(--rsv-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.rsv-therapist-head__img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rsv-therapist-head__name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rsv-text);
}

.rsv-therapist-head__label {
    display: inline-block;
    font-size: 1.1rem;
    color: var(--rsv-gold);
    border: 1px solid var(--rsv-gold);
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 6px;
    vertical-align: middle;
}

/* 入口確定カード（日時・指名） */
.rsv-fixed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--rsv-panel);
    border: 1px solid var(--rsv-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.rsv-fixed__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rsv-fixed__label {
    flex-shrink: 0;
    width: 40px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rsv-gold);
    border: 1px solid var(--rsv-gold);
    border-radius: 4px;
    padding: 2px 0;
    text-align: center;
}

.rsv-fixed__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rsv-text);
}

.rsv-fixed__value--thera {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rsv-fixed__img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* =========================================================================
 * 05 日時グリッド
 * ========================================================================= */

/* ── 凡例 ── */
.rsv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 1.1rem;
    color: var(--rsv-dim);
    margin-bottom: 12px;
}

.rsv-legend b {
    margin-right: 3px;
    font-size: 1.3rem;
}

.rsv-legend .is-open {
    color: var(--rsv-green);
}

.rsv-legend .is-tent {
    color: var(--rsv-gold);
}

.rsv-legend .is-book {
    color: var(--rsv-red);
}

.rsv-legend .is-tel {
    color: var(--rsv-blue);
}

.rsv-legend .is-off {
    color: var(--rsv-mute);
}

/* ── 週ナビ ── */
.rsv-weeknav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(135deg, rgba(201, 168, 108, .16), rgba(201, 168, 108, .04));
    border: 1px solid var(--rsv-gold-line);
    border-radius: 8px 8px 0 0;
    padding: 5px 8px;
}

.rsv-weeknav__btn {
    font-size: 1.2rem;
    color: var(--rsv-gold);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--rsv-panel);
    border: 1px solid var(--rsv-line);
    white-space: nowrap;
}

.rsv-weeknav__btn.is-disabled {
    color: #55524c;
    border-color: #22222a;
    pointer-events: none;
}

.rsv-weeknav__range {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rsv-text);
    text-align: center;
}

/* ── 表 ── */
.rsv-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 列は等幅に割る。1画面の日数は datetime.php の $DT_PAGE_DAYS（既定6）で決まり、
   CSS側は日数を知らなくても自動で割れる。
   min-width を付けると横スクロールに戻るので、付けないこと。 */
.rsv-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--rsv-panel);
    border: 1px solid var(--rsv-line);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.rsv-grid th,
.rsv-grid td {
    border: 1px solid #26262c;
    text-align: center;
}

/* 横スクロールしても時刻列は動かさない。
   背景を透かすと下の列が見えるので、必ず不透明にしておくこと。 */
.rsv-grid__time {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 52px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rsv-text);
    background: var(--rsv-panel-2);
    padding: 6px 8px;
    white-space: nowrap;
    box-shadow: 1px 0 0 #26262c;
}

/* 左上の角（時刻列 × 曜日行）は両方に重なるので一段上に */
.rsv-grid thead .rsv-grid__time {
    z-index: 3;
}

.rsv-grid__day {
    font-size: 1.2rem;
    color: var(--rsv-text);
    background: var(--rsv-panel-2);
    padding: 8px 4px;
    line-height: 1.3;
}

.rsv-grid__day small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--rsv-dim);
}

.rsv-grid__day.is-sun {
    color: #e58b8b;
}

.rsv-grid__day.is-sat {
    color: #8bb4e5;
}

/* ── マス（セラ確定モード） ── */
.rsv-cell {
    padding: 0;
    height: 40px;
}

.rsv-cell__form {
    margin: 0;
    height: 100%;
}

.rsv-cell__btn {
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rsv-green);
    cursor: pointer;
    transition: background .12s;
}

.rsv-cell__sym {
    font-size: 1.4rem;
}

.rsv-cell.is-open {
    background: rgba(46, 204, 113, .12);
}

.rsv-cell.is-open:hover {
    background: rgba(46, 204, 113, .22);
}

.rsv-cell.is-book {
    background: rgba(229, 72, 77, .10);
}

.rsv-cell.is-book .rsv-cell__sym {
    color: var(--rsv-red);
}

.rsv-cell.is-tent .rsv-cell__sym {
    color: var(--rsv-gold);
}

.rsv-cell.is-tel .rsv-cell__sym {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--rsv-blue);
}

.rsv-cell.is-off .rsv-cell__sym {
    color: var(--rsv-mute);
}

/* ── マス（フリーモード・店全体） ── */
.fg-cell {
    padding: 0;
    height: 40px;
    text-align: center;
}

.fg-cell__btn {
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rsv-green);
    cursor: pointer;
    transition: background .12s;
}

.fg-cell__sym {
    font-size: 1.4rem;
}

.fg-cell--open {
    background: rgba(46, 204, 113, .12);
}

.fg-cell--open:hover {
    background: rgba(46, 204, 113, .22);
}

.fg-cell--x {
    background: rgba(229, 72, 77, .10);
}

.fg-cell--x .fg-cell__sym {
    color: var(--rsv-red);
}

.fg-cell--off .fg-cell__sym {
    color: var(--rsv-mute);
}

/* ── 本日の終了済み枠 ── */
.rsv-cell.is-past,
.rsv-cell.is-past:hover,
.fg-cell.is-past,
.fg-cell.is-past:hover {
    background: #0b0b0d;
}

.rsv-cell.is-past .rsv-cell__sym,
.fg-cell.is-past .fg-cell__sym {
    color: #3a3830;
    cursor: default;
}

/* ── 日付固定モードで対象外の列 ── */
.rsv-grid__day.is-dimmed,
.rsv-cell.is-col-dimmed,
.fg-cell.is-col-dimmed {
    filter: grayscale(1);
    opacity: .38;
}

.rsv-cell.is-col-dimmed .rsv-cell__sym,
.fg-cell.is-col-dimmed .fg-cell__sym {
    pointer-events: none;
}

/* ── クーポン期限外の日（押せるが確認を出す） ── */
.rsv-cell.is-coupon-out,
.fg-cell.is-coupon-out {
    background: rgba(0, 0, 0, .32);
    opacity: .62;
}

.rsv-cell.is-coupon-out .rsv-cell__btn,
.fg-cell.is-coupon-out .fg-cell__btn {
    cursor: pointer;
}


/* =========================================================================
 * 06 フリーモード（セラ選択）
 * ========================================================================= */

.fg-picked {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rsv-gold-bg);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rsv-text);
}

.fg-picked__ico {
    color: var(--rsv-gold);
}

.fg-picked__change {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rsv-gold);
    text-decoration: none;
    border: 1px solid var(--rsv-gold-line);
    border-radius: 6px;
    padding: 5px 12px;
    transition: background .12s;
}

.fg-picked__change:hover {
    background: rgba(201, 168, 108, .12);
}

.fg-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.rsv-body_data {
    text-align: left;
}

.rsv-body .thera-card__instant-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #1d9e75;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}

.rsv-body .thera-card__time {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
    color: var(--accent-ore, #e0701f);
}

.rsv-body .thera-card__img-wrap--free {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsv-body .thera-card__free-ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rsv-gold);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
/* ── セラピスト選択カード ──
   選ぶ対象であることを、選択肢（.rc-opt / .rc-dopt）と同じ緑で示す。
   カード側は既に枠を持っているので、内側の枠は消すこと。
   残すと枠が二重に見える。 */
.rsv-body .fg-card-grid .thera_card_d {
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--rsv-check-line);
    border-radius: var(--ap-radius, 0.8rem);
    background: var(--rsv-panel);
    overflow: hidden;
    transition: border-color .12s;
}

.rsv-body .fg-card-grid .thera_card_d:hover {
    border-color: var(--rsv-check);
}

.rsv-body .fg-card-grid .thera_card_d .thera-card__thumb {
    border: 0;
}

/* =========================================================================
 * 07 選択肢
 *
 * ラジオ・チェックの丸は場所のわりに情報がないので隠し、
 * 選択中は左の金の帯とチェックで示す。
 * ========================================================================= */

.rc-form {
    margin-top: 4px;
}

.rc-block {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-panel-v2);
    padding: 16px;
    margin-bottom: 14px;
}

.rc-block__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rsv-text);
    margin: 0 0 12px;
}

.rc-req {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    background: #e53935;
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
}

.rc-any {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    background: #2f7d55;
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
}

.rc-cat-name {
    font-size: 1.2rem;
    color: var(--rsv-dim);
    margin: 12px 0 6px;
}

.rc-filter-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    color: var(--rsv-gold);
    margin-bottom: 8px;
}

.rc-req-note {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--rsv-dim);
    margin: 4px 0 10px;
}

.rc-note-honshimei {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--rsv-dim);
    margin: 2px 0 12px;
}

/* ── 選択肢1件 ──
   左端にチェックボックス／ラジオを置き、選択は緑のレ点だけで示す。
   選んでも枠線と背景は変えない（金ボーダー＋金背景はくどかった）。
   形は input の type から出し分ける。複数可＝四角 / 1つだけ＝丸。 */
.rc-opt {
    position: relative;
    display: block;
    padding: 12px 14px 12px 44px;
    border: 1px solid var(--ap-line);
    background: var(--rsv-sunken);
    border-radius: var(--ap-radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .12s;
}

.rc-opt:last-child {
    margin-bottom: 0;
}

/* 触っているあいだの合図。選択中の緑（下の :has(input:checked)）とは
   別物なので、ここでは薄いほうを使う。 */
.rc-opt:hover {
    border-color: var(--rsv-check-line);
}

/* ラジオ・チェックの実体は隠す（キーボード操作は残す） */
.rc-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* 枠。1行目の高さに合わせて固定で置く（中央寄せにすると、
   説明文が長い行だけ枠が下に落ちて位置がそろわない） */
.rc-opt::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--rsv-box);
    border-radius: 3px;
    background: transparent;
    transition: border-color .12s;
}

/* 1つだけ選ぶものは丸 */
.rc-opt:has(input[type="radio"])::before {
    border-radius: 50%;
}

/* レ点。枠の上に重ねる */
.rc-opt::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 1.3rem;
    color: var(--rsv-check);
    opacity: 0;
    transition: opacity .12s;
}

/* 選択中の緑は :hover ではなくこちらに持たせること。
   hover 側だけに持たせると、他をタップして hover が外れた瞬間に
   枠が灰色へ戻り、レ点だけが残る。 */
.rc-opt:has(input:checked),
.rc-opt.is-checked {
    border-color: var(--rsv-check);
}

.rc-opt:has(input:checked)::before,
.rc-opt.is-checked::before {
    border-color: var(--rsv-check);
}

.rc-opt:has(input:checked)::after,
.rc-opt.is-checked::after {
    opacity: 1;
}

/* 選択中をもう少し強く出したくなったら、この2行のコメントを外す。
.rc-opt:has(input:checked),
.rc-opt.is-checked {
    background: rgba(46, 204, 113, .06);
}
*/

.rc-opt:focus-within {
    /* outline: 2px solid rgba(46, 204, 113, .5); */
    /* outline-offset: 2px; */
}


/* セラに紐づいて固定表示される指名料。
   input を持たないので :has() が効かない。丸とレ点を直に指定する。 */
.rc-opt--locked {
    border-color: var(--rsv-check);
    cursor: default;
}

.rc-opt--locked::before {
    border-radius: 50%;
    border-color: var(--rsv-check);
}

.rc-opt--locked::after {
    opacity: 1;
}

.rc-opt__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rc-opt__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.rc-opt__name {
    font-size: 1.3rem;
    color: var(--rsv-text);
}

.rc-opt__dur {
    font-size: 1.2rem;
    color: var(--rsv-gold);
    margin-left: 5px;
}

.rc-opt__price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rsv-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rc-opt__price--ts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.35;
    text-align: right;
}

.rc-opt__price-sale {
    font-weight: 700;
    color: var(--rsv-gold);
}

.rc-opt__price-orig {
    font-size: 1rem;
    font-weight: 400;
    color: var(--rsv-dim);
    text-decoration: line-through;
}

.rc-opt__desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--rsv-dim);
}

/* 選べない行（開催前・終了済み・対象外） */
.rc-opt--off {
    opacity: .45;
    filter: grayscale(1);
    cursor: default;
}

.rc-opt--off input {
    pointer-events: none;
}

.rc-opt--done {
    opacity: .22;
    filter: grayscale(1) brightness(.7);
}

/* ── 指名ブロック：必須であることを常時明示 ── */
.rc-block--required {
    transition: border-color .2s, background-color .2s;
}

.rc-block--required.is-unselected {
    border-color: var(--rsv-red);
    /* background: rgba(192, 57, 43, .06); */
}

.rc-block--required.is-unselected .rc-req-note {
    color: var(--rsv-red);
    font-weight: 600;
}

.rc-block--required.is-shake {
    animation: rcShake .5s;
}

@keyframes rcShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .rc-block--required.is-shake {
        animation: none;
    }
}

/* ── 割引の行（coupon.php 専用） ── */
.rc-kind {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    padding: 1px 8px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}

.rc-kind--coupon {
    background: var(--rsv-pink);
}

.rc-kind--ts {
    background: var(--rsv-orange);
}

.rc-kind--event {
    background: var(--tst-blue, #5a8dd6);
}




.rc-dopt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px 12px 44px;
    margin-bottom: 8px;
    border: 1px solid var(--ap-line);
    border-radius: 10px;
    background: var(--rsv-sunken);
    cursor: pointer;
    transition: border-color .15s;
}

.rc-dopt:last-child {
    margin-bottom: 0;
}

.rc-dopt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
/* 割引はどれか1つなので丸で固定 */
.rc-dopt::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--rsv-box);
    border-radius: 50%;
    background: transparent;
    transition: border-color .12s;
}

.rc-dopt::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 13px;
    top: 14px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 1.3rem;
    color: var(--rsv-check);
    opacity: 0;
    transition: opacity .12s;
}

/* 選べない行（div で出る・差し替えボタン付き）は、押せる丸に見せない */
.rc-dopt--off::before,
.rc-dopt--off::after {
    display: none;
}

.rc-dopt--off {
    padding-left: 13px;
}

.rc-dopt:hover {
    border-color: var(--rsv-check-line);
}

/* .rc-opt と同じ理由で、選択中の緑は hover ではなくこちらに持たせる */
.rc-dopt.is-checked,
.rc-dopt:has(input[type="radio"]:checked) {
    border-color: var(--rsv-check);
}

.rc-dopt.is-checked::before,
.rc-dopt:has(input[type="radio"]:checked)::before {
    border-color: var(--rsv-check);
}

.rc-dopt.is-checked::after,
.rc-dopt:has(input[type="radio"]:checked)::after {
    opacity: 1;
}

.rc-dopt:focus-within {
    /* outline: 2px solid rgba(46, 204, 113, .5); */
    /* outline-offset: 2px; */
}



.rc-dopt__head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rc-dopt__ttl {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rsv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-dopt__meta {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--rsv-gold);
}

.rc-dopt__desc {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--rsv-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rc-dopt__desc s {
    color: var(--rsv-dim);
    margin: 0 2px;
}

.rc-dopt__desc b {
    color: var(--rsv-gold);
    font-weight: 600;
}

.rc-dopt--off {
    opacity: .45;
    filter: grayscale(1);
    cursor: default;
}

.rc-dopt--off:hover {
    border-color: var(--rsv-line);
}

.rc-dopt--done {
    opacity: .22;
    filter: grayscale(1) brightness(.7);
}

/* ── 送信・戻る ── */
.rc-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 20px;
}

.rc-actions--stack {
    flex-direction: column;
    gap: 10px;
}

.rc-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid var(--rsv-gold-line);
    border-radius: 8px;
    color: var(--rsv-gold);
    text-decoration: none;
    font-size: 1.2rem;
    white-space: nowrap;
}

.rc-submit {
    display: block;
    flex: 1;
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s;
}

.rc-submit.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.rc-sub-actions {
    margin-top: 14px;
    text-align: center;
}

.rc-sub-actions button,
.rc-sub-actions a {
    background: none;
    border: none;
    padding: 0;
    color: var(--rsv-gold);
    font-family: inherit;
    font-size: 1.2rem;
    text-decoration: underline;
    cursor: pointer;
}

/* 送信ボタンが下端バーへ移ったあと、本文側の .rc-actions は戻るリンクだけになる。
   1つしか残らないので全幅にして、押しやすさを送信ボタンと揃える。 */
body.has-dock-submit .rc-actions {
    justify-content: stretch;
}

body.has-dock-submit .rc-actions .rc-back {
    flex: 1 1 auto;
    width: 100%;
    padding: 13px 16px;
    font-size: 1.3rem;
}


/* =========================================================================
 * 08 入力フォーム（contact.php）
 *    もとは contact.php の inline <style> にあったもの。こちらへ移設。
 * ========================================================================= */

.rc-field {
    margin: 16px 0;
}

.rc-field__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--rsv-text);
    margin-bottom: 8px;
}

.rc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    line-height: 1.3;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 1.4rem;
}

.rc-input:focus {
    outline: none;
    border-color: var(--rsv-gold);
    background: rgba(255, 255, 255, .08);
}

.rc-input::placeholder {
    color: rgba(255, 255, 255, .3);
}

.rc-input[readonly] {
    opacity: .75;
}

.rc-select {
    width: 100%;
}

.rc-textarea {
    resize: vertical;
    min-height: 92px;
    line-height: 1.6;
    font-family: inherit;

    border: 1px solid var(--ap-line);
    background: var(--rsv-sunken);
    border-radius: var(--ap-radius);
}

.rc-field__hint {
    display: block;
    font-size: 1.1rem;
    color: var(--rsv-dim);
    margin-top: 5px;
}

.rc-code-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 2rem;
}

.rc-stage-lead {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--rsv-dim);
    margin: 0 0 16px;
    padding: 0 2px;
}

.rc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 820px) {

    .rc-cards {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.rc-card {
    background: var(--rsv-panel);
    border: 1px solid #3a3320;
    border-radius: 12px;
    padding: 18px 16px;
    transition: opacity .2s, border-color .2s;
}

.rc-card--dim {
    opacity: .45;
}

.rc-card.is-open {
    border-color: var(--rsv-gold);
}

.rc-card__title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rsv-text);
}

.rc-card__lead {
    margin: 0 0 14px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--rsv-dim);
}

.rc-card .rc-field {
    margin-bottom: 10px;
}

.rc-card-sub {
    margin-top: 11px;
    text-align: center;
}

.rc-card-sub a {
    color: var(--rsv-gold);
    font-size: 1.2rem;
    text-decoration: underline;
}

.rc-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--rsv-gold);
    border-radius: 8px;
    padding: 11px;
    color: var(--rsv-gold);
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
}

.rc-acc-btn i {
    transition: transform .25s;
}

.rc-card.is-open .rc-acc-btn i {
    transform: rotate(180deg);
}

.rc-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s;
}

.rc-card.is-open .rc-acc-body {
    max-height: 1600px;
}

.rc-card.is-open .rc-benefits {
    display: none;
}

.rc-acc-inner {
    padding-top: 16px;
}

.rc-alert-mini {
    background: rgba(200, 80, 80, .12);
    border: 1px solid rgba(200, 80, 80, .4);
    border-radius: 8px;
    padding: 9px 11px;
    margin: 0 0 12px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #e8a0a0;
}

.rc-alert-mini div + div {
    margin-top: 4px;
}

.rc-benefits {
    background: rgba(255, 255, 255, .03);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 18px;
    list-style: none;
}

.rc-benefits li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--rsv-text);
    margin-bottom: 8px;
}

.rc-benefits li:last-child {
    margin-bottom: 0;
}

.rc-benefits i {
    flex-shrink: 0;
    color: var(--rsv-gold);
    font-size: 1.5rem;
    line-height: 1.4;
}

.rc-sms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--rsv-gold-bg);
    border: 1px solid rgba(201, 168, 108, .30);
    border-radius: 8px;
    padding: 11px 13px;
    margin: 0 0 16px;
}

.rc-sms__ico {
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--rsv-gold);
}

.rc-sms__txt {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--rsv-dim);
}

.rc-hit {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(120, 180, 120, .10);
    border: 1px solid rgba(120, 180, 120, .35);
    border-radius: 8px;
    padding: 11px 13px;
    margin: 0 0 16px;
}

.rc-hit__ico {
    font-size: 2rem;
    line-height: 1;
    color: #8fbf7a;
}

.rc-hit__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rsv-text);
}

.rc-hit__sub {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--rsv-dim);
    margin-top: 2px;
}

.rc-login-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--rsv-gold);
    border-radius: 10px;
    background: rgba(201, 168, 108, .08);
    color: #e8dcc4;
    text-decoration: none;
    font-size: 1.4rem;
    transition: background .15s;
}

.rc-login-hint:hover {
    background: rgba(201, 168, 108, .16);
}

.rc-login-hint > .bi-person-circle {
    flex: 0 0 auto;
    font-size: 2rem;
    color: var(--rsv-gold);
}

.rc-login-hint__text {
    flex: 1 1 auto;
    line-height: 1.4;
}

.rc-login-hint__text strong {
    color: var(--rsv-gold);
}

.rc-login-hint__arrow {
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: var(--rsv-gold);
}


/* =========================================================================
 * 09 確認画面（confirm.php）
 * ========================================================================= */

.rc-confirm {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-panel-v2);
    padding: 4px 16px;
    margin-bottom: 14px;
}

.rc-confirm__row {
    display: flex;
    gap: 14px;
    padding: 13px 0;
    align-items: flex-start;
    border-bottom: 1px dashed rgba(255, 255, 255, .13);
}

.rc-confirm__row:last-child {
    border-bottom: none;
}

.rc-confirm__label {
    flex: 0 0 76px;
    font-size: 1.1rem;
    letter-spacing: .08em;
    color: var(--rsv-dim);
    padding-top: 3px;
}

.rc-confirm__value {
    flex: 1;
    min-width: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--rsv-text);
}

.rc-confirm__vrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rc-confirm__opt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 1.3rem;
}

.rc-confirm__opt + .rc-confirm__opt {
    margin-top: 4px;
}

.rc-confirm__yen {
    font-style: normal;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rc-confirm__yen--minus {
    color: #e53935;
}

.rc-confirm__sub {
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rsv-dim);
    margin-top: 5px;
}

.rc-confirm__thera {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.rc-confirm__thera-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rc-confirm__coupon-detail {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--rsv-gold);
    margin-top: 3px;
}

.rc-confirm__coupon-until {
    display: block;
    font-size: 1rem;
    color: var(--rsv-dim);
    margin-top: 3px;
}

.rc-confirm__row--total {
    align-items: baseline;
    border-bottom: none;
}

.rc-confirm__value--total {
    text-align: right;
}

.rc-confirm__total {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
}

.rc-confirm__note,
.rc-confirm__caution {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rsv-dim);
    text-align: right;
    margin: 6px 0;
}

.rc-confirm__caution {
    margin: 14px 0;
}

/* ── 備考欄に自動で付く印（クーポン・タイムセール・イベントの利用） ── */
.rc-note-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 10px;
    padding: 9px 11px;
    background: var(--rsv-gold-bg);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 8px;
}

.rc-note-auto span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rsv-gold);
    white-space: nowrap;
}

.rc-note-auto small {
    flex-basis: 100%;
    font-size: 1rem;
    color: var(--rsv-dim);
}

.rc-confirm__note-text {
    white-space: normal;
    line-height: 1.6;
}


/* =========================================================================
 * 10 完了画面（complete.php）
 * ========================================================================= */

.rc-complete {
    text-align: center;
    padding: 10px 4px 30px;
}

.rc-complete--hero {
    width: 100%;
    padding: 26px 22px;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-panel-v2);
}

.rc-complete__icon {
    font-size: 5.6rem;
    line-height: 1;
    color: var(--rsv-gold);
    margin-bottom: 12px;
}

.rc-complete__title {
    font-size: 2.2rem;
    color: #fff;
    margin: 0 0 18px;
}

.rc-complete__no {
    display: inline-block;
    background: var(--ap-panel-dwn);
    border-radius: var(--ap-radius);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 10px;
    padding: 10px 22px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .7);
}

.rc-complete__no-label {
    font-size: 1.1rem;
    color: var(--rsv-dim);
    margin-right: 8px;
}

.rc-complete__no strong {
    display: block;
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: #f0d590;
    margin-top: 3px;
}

.rc-complete__lead {
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--rsv-dim);
    margin-bottom: 16px;
}

.rc-complete__lead strong {
    color: var(--rsv-gold);
}

.rc-complete__sublink {
    color: var(--rsv-gold);
    font-size: 1.3rem;
    text-decoration: none;
}

.rc-complete__sublink:hover {
    text-decoration: underline;
}

.rc-contact-btn {
    display: inline-flex;
    flex: 1;
    min-width: 90px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
}

.rc-contact-btn--call {
    background: var(--rsv-gold);
    color: #1a1a1f;
}

.rc-contact-btn--sms {
    background: transparent;
    color: var(--rsv-gold);
    border: 1px solid var(--rsv-gold);
}

.rc-contact-btn--line {
    background: #06c755;
    color: #fff;
    border: 1px solid #06c755;
}

.rc-contact-btn--chat {
    background: transparent;
    color: #a98adf;
    border: 1px solid #8a5cd8;
}

/* 右カラムのカード群 */
.rs-side-card {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-panel-v2);
    padding: 16px;
    margin-bottom: 12px;
}

.rs-side-card:last-child {
    margin-bottom: 0;
}

.rs-side-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rsv-gold);
    margin-bottom: 10px;
}

.rs-side-card__lead {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 10px;
    color: var(--rsv-dim);
}

.rs-flow {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-flow__step {
    position: relative;
    padding: 0 0 15px 22px;
}

.rs-flow__step:last-child {
    padding-bottom: 0;
}

.rs-flow__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #4a463f;
    background: var(--rsv-panel);
    box-sizing: border-box;
    z-index: 1;
}

.rs-flow__step::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 13px;
    bottom: 0;
    width: 1px;
    background: #33302a;
}

.rs-flow__step:last-child::after {
    display: none;
}

.rs-flow__step.is-done::before {
    border-color: var(--rsv-gold);
    background: var(--rsv-gold);
}

.rs-flow__step.is-done::after {
    background: rgba(201, 168, 108, .45);
}

.rs-flow__step.is-now::before {
    border-color: var(--rsv-gold);
    background: var(--rsv-panel);
    box-shadow: 0 0 0 3px rgba(201, 168, 108, .18);
    animation: rs-flow-pulse 2s ease-in-out infinite;
}

@keyframes rs-flow-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(201, 168, 108, .18);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(201, 168, 108, .05);
    }
}

@media (prefers-reduced-motion: reduce) {

    .rs-flow__step.is-now::before {
        animation: none;
    }
}

.rs-flow__k {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rsv-mute);
}

.rs-flow__step.is-done .rs-flow__k {
    color: var(--rsv-gold);
}

.rs-flow__step.is-now .rs-flow__k {
    color: var(--rsv-text);
}

.rs-flow__v {
    display: block;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--rsv-dim);
}

.rs-contact__phone {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--rsv-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.rs-contact__btns {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.rs-side-links {
    display: flex;
    flex-direction: column;
}

.rs-side-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 4px;
    font-size: 1.3rem;
    color: var(--rsv-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: color .12s;
}

.rs-side-link:last-child {
    border-bottom: none;
}

.rs-side-link:hover {
    color: var(--rsv-gold);
}

.rs-side-link i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 1.5rem;
    color: var(--rsv-gold);
}

.rs-side-link__arw {
    margin-left: auto;
    font-size: 1.1rem;
    color: #6d6860;
}


/* =========================================================================
 * 11 予約内容カード（伝票 / _summary_body.php）
 *
 * 旧版は「なし」「未設定」の行を常に出していたので、何も決まっていない
 * 画面ほどカードが長くなっていた。今は決まった行だけ出す（PHP側で hidden）。
 * ========================================================================= */

.rs-card {
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    background: var(--ap-panel-v2);
    overflow: hidden;
}

.rs-card__head {
    padding: 12px 14px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--rsv-gold);
    border-bottom: 1px solid var(--ap-line);
}

.rs-card__body {
    padding: 14px;
}

.rs-block {
    margin-bottom: 12px;
}

.rs-block__k {
    display: block;
    font-size: 1rem;
    letter-spacing: .12em;
    color: var(--rsv-text);
    margin-bottom: 3px;
}

/* ── 2段の明細（見出し／内容）──
   幅300pxの右カラムで「見出し ─ 内容 ─ 金額」を1行に詰めると
   内容がほぼ潰れるため、見出しを上、内容と金額を下段の1行にする。

   項目ごとの罫線は入れない。8項目に線を引くと線のほうが目立って表に見える。
   見出しと内容は近づけ、項目と項目のあいだを空けてまとまりを作る。 */
.rs-sec {
    margin-bottom: 14px;
}

.rs-sec:last-child {
    margin-bottom: 0;
}

.rs-sec__k {
    display: block;
    font-size: 1rem;
    letter-spacing: .12em;
    color: var(--rsv-dim);
}

.rs-sec__v {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--rsv-text);
}

.rs-sec__v--when {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* オプションは複数行になるので横並びをやめる（中の .rs-optline が1行ずつ持つ） */
.rs-sec__v--stack {
    display: block;
}

/* 未登録。確定した値と同じ強さで出すと決定済みに見えるので、細く・薄くする。
   .rs-sec__v--when と併用されるため、大きさと太さもここで戻す。 */
.rs-sec__v.is-empty {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--rsv-mute);
}

/* 「割引」見出しの下に3種を並べる。1種類も選ばれていないときは
   未登録の1行だけになる（perkempty） */
.rs-sec .rs-perk:first-of-type {
    padding-top: 2px;
}

/* hidden 属性は display 指定に負ける。内側で display を持つので明示する */
.rs-sec[hidden],
.rs-sec__v[hidden] {
    display: none !important;
}

.rs-when {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--rsv-text);
    font-variant-numeric: tabular-nums;
}

.rs-thera {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rs-thera__img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.rs-thera__body {
    min-width: 0;
}

.rs-thera__name {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-text);
}

.rs-thera__tag {
    display: inline-block;
    margin-top: 4px;
    font-size: 1rem;
    color: var(--rsv-gold);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 3px;
    padding: 1px 7px;
}

.rs-rule {
    border: 0;
    border-top: 1px dashed rgba(255, 255, 255, .13);
    margin: 12px 0;
}

.rs-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 1.2rem;
    color: var(--rsv-text);
}

.rs-line__k {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--rsv-dim);
}

.rs-line__v {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
}

.rs-line__v.is-empty {
    color: var(--rsv-mute);
}
/* ── 未選択の行 ──
   日時・セラピスト・コースの3行は決まっていなくても出す（_summary_body.php）。
   確定した値と同じ強さで出すと決定済みに見えるので、細く・薄くする。 */
.rs-when.is-empty {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--rsv-mute);
}

.rs-thera__name.is-empty {
    font-weight: 400;
    color: var(--rsv-mute);
}

/* タイトルは真っ先に縮む。金額は残す */
.rs-line__title {
    flex: 1 100 auto;
    min-width: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-price,
.rs-cp-disc {
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 600;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-cp-disc {
    color: var(--rsv-orange);
}

.rs-kind {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    padding: 0 7px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
}

.rs-kind--coupon {
    background: var(--rsv-pink);
}

.rs-kind--ts {
    background: var(--rsv-orange);
}

.rs-kind--event {
    background: var(--tst-blue, #5a8dd6);
}

/* ── 割引・イベント（バッジの下で改行する2段組み） ──
   幅300pxの右カラムに「バッジ＋タイトル＋金額」を1行で詰めると
   タイトルがほぼ潰れるため、バッジを1段目、内容を2段目に分ける。 */
.rs-perk {
    padding: 6px 0;
}

.rs-perk + .rs-perk {
    border-top: 1px dashed rgba(255, 255, 255, .07);
}

.rs-perk .rs-kind {
    margin-bottom: 4px;
}

.rs-perk__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.rs-perk__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.2rem;
    color: var(--rsv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-perk__sub {
    flex: 0 1 auto;
    max-width: 55%;
    font-style: normal;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rsv-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* イベントの対象者は金額ではないので金にしない */
.rs-perk__sub--plain {
    font-weight: 400;
    color: var(--rsv-dim);
}

.rs-line--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.rs-line--stack .rs-line__k {
    text-align: left;
}

.rs-line__v--stack {
    display: block;
    text-align: right;
}

.rs-optline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--rsv-text);
}

.rs-optline em {
    font-style: normal;
    font-weight: 600;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--rsv-gold-line);
}

.rs-total__k {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.rs-total__v {
    font-size: 2rem;
    font-weight: 700;
    color: var(--rsv-gold);
    font-variant-numeric: tabular-nums;
}

.rs-total-note {
    font-size: 1rem;
    color: var(--rsv-dim);
    text-align: right;
    margin-top: 4px;
}


/* =========================================================================
 * 12 SP下端バー・ボトムシート（_dock.php）
 * ========================================================================= */

.rs-dock {
    display: none;
}

.rs-sheet {
    display: none;
}

@media (max-width: 1023px) {

    .rs-dock {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* フッターやサイト共通の固定要素より必ず上に */
        z-index: 1000;
        background: rgba(16, 16, 20, .96);
        border-top: 1px solid var(--rsv-line);
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* バーの分だけ本文の下に余白を作る（フッターが隠れないように） */
    body.has-dock {
        padding-bottom: calc(var(--rsv-dock-h) + env(safe-area-inset-bottom));
    }

    .rs-sheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1010;
    }

    .rs-sheet[hidden] {
        display: none;
    }
}

.rs-dock__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}

.rs-dock__sum {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: var(--rsv-text);
    font-family: inherit;
    cursor: pointer;
}

.rs-dock__line {
    display: block;
    font-size: 1.1rem;
    color: var(--rsv-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-dock__line i {
    font-size: .9rem;
    margin-left: 3px;
}

.rs-dock__amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--rsv-text);
    font-variant-numeric: tabular-nums;
}

.rs-dock__amount small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--rsv-dim);
}

/* 本文から move してきた送信ボタン。.rc-submit の全幅指定を打ち消す。
   文言でボタン幅が伸び縮みすると要約側の折り返しが毎回変わって落ち着かないので、
   45%で固定する。長い文言はJS側で短いものに差し替えている。 */
.rs-dock .rs-dock__next,
.rs-dock .rc-submit {
    display: block;
    flex: 0 0 45%;
    width: 45%;
    max-width: 45%;
    padding: 12px 10px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rs-dock .rs-dock__next.is-disabled {
    opacity: .5;
}

.rs-sheet__veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
}

.rs-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 84%;
    overflow-y: auto;
    background: var(--rsv-panel-2);
    border-top: 1px solid var(--rsv-gold-line);
    border-radius: 14px 14px 0 0;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    animation: rsSheetUp .22s ease-out;
}

@keyframes rsSheetUp {

    from {
        transform: translateY(14px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rs-sheet__panel {
        animation: none;
    }
}

.rs-sheet__grip {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #3a3a42;
    margin: 0 auto 12px;
}

/* シート内の伝票は枠を持たない（シート自体が枠のため） */
.rs-sheet .rs-card {
    background: none;
    border: 0;
    border-radius: 0;
}

.rs-sheet .rs-card__head {
    padding-top: 0;
}

.rs-sheet .rs-card__body {
    padding: 14px 0 0;
}

.rs-sheet__close {
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    border: 1px solid var(--rsv-line);
    border-radius: 8px;
    background: none;
    color: var(--rsv-dim);
    font-family: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

/* シートを開いている間は裏をスクロールさせない */
body.rs-sheet-open {
    overflow: hidden;
}


/* =========================================================================
 * 13 適用中バナー
 * ========================================================================= */

.rsv-coupon-banner,
.rsv-event-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rsv-gold-bg);
    border: 1px solid var(--rsv-gold-line);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
}

.rsv-coupon-banner__label,
.rsv-event-banner__label {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rsv-gold);
}

.rsv-coupon-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.rsv-event-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rsv-coupon-banner__title,
.rsv-event-banner__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rsv-text);
}

.rsv-coupon-banner__price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--rsv-gold);
}

.rsv-event-banner__period {
    font-size: 1.1rem;
    color: var(--rsv-dim);
}

.rsv-coupon-banner__applied,
.rsv-event-banner__applied {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--rsv-gold);
    color: #1a1a1a;
    border-radius: 999px;
    padding: 3px 10px;
}

/* タイムセールの適応できるコースを知らせてあげる */
.rc-dopt__fix {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.1rem dashed #3a3a40;
    opacity: 1;
    pointer-events: auto;
}

.rc-dopt__fix-lead {
    display: block;
    margin-bottom: 0.8rem;
    color: #c8c2b8;
    font-size: 1.2rem;
    line-height: 1.5;
}

.rc-dopt__fix-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0.6rem;
    padding: 1.1rem 1.2rem;
    border: 0.1rem solid var(--rsv-gold);
    border-radius: 0.8rem;
    background: var(--rsv-gold);
    color: #14140f;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: 0.15s;
}

.rc-dopt__fix-btn:hover {
    background: #f0d590;
    border-color: #f0d590;
    color: #14140f;
}

.rc-dopt__fix-price s {
    margin-right: 0.6rem;
    color: rgba(20, 20, 15, 0.55);
    font-size: 1.2rem;
}

.rc-dopt__fix-price b {
    font-size: 1.4rem;
    font-weight: 700;
    color: #14140f;
}

.rc-dopt__fix-name {
    flex: 1;
}

.rc-dopt__fix-price {
    flex: 0 0 auto;
    white-space: nowrap;
}

.rc-dopt--fixable {
    opacity: 1;
    filter: none;
    border-color: var(--rsv-line);
}

.rc-dopt--fixable .rc-dopt__head,
.rc-dopt--fixable .rc-dopt__meta,
.rc-dopt--fixable .rc-dopt__desc {
    opacity: 0.5;
    filter: grayscale(1);
}
.rc-dopt__fix-note {
    display: block;
    color: #9a948b;
    font-size: 1.15rem;
    line-height: 1.5;
}
/* クーポンの本文　続きを見る */
.rc-dopt__desc--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.rc-dopt__desc--clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}


/* ── 詳細を見る／つづきを読む ──
   文字幅だけが判定だと、少し外れたタップが <label> に届いて
   その行が選ばれてしまう。全幅・高さ44pxのボタン形にして、
   押せる場所を見た目でも分かるようにする。
   （既定動作の抑止は coupon.php 側のJSが行っている） */
.rc-dopt__more {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 50%;
    margin: 0 auto;
    padding: 0.5rem 1.2rem;
    border: 0.1rem 1px solid var(--rsv-line);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    background: var(--ap-panel-v2);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, .03);
    color: var(--rsv-gold);
    font-size: 1.2rem;
    text-decoration: none;
    cursor: pointer;
}

.rc-dopt__more:hover {
    border-color: var(--rsv-gold-line);
    background: rgba(201, 168, 108, .10);
}

/* hidden 属性は display 指定に負ける。上で display:flex を持たせたので明示する */
.rc-dopt__more[hidden] {
    display: none !important;
}
/* =========================================================================
 * 14 予約の進み具合（includes/rsv_flow.php）
 *
 * 完了画面の本文に置く3段のタイムライン。
 * マイページ（/member/css/style.css）にも同じ形がある。片方だけ直さないこと。
 * 丸の背景リングでつなぎ線を隠しているので、カードの地色を変えるときは
 * --rsvf-bg も一緒に変える。
 * ========================================================================= */

.rsvf {
    --rsvf-bg: var(--rsv-panel-2);
    --rsvf-line: var(--rsv-line);
    --rsvf-done: var(--rsv-green);
    --rsvf-now: var(--rsv-gold);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
}

.rsvf__step {
    min-width: 0;
    text-align: center;
}

.rsvf__rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
}

.rsvf__rail::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
    background: var(--rsvf-line);
}

.rsvf__step:first-child .rsvf__rail::before {
    left: 50%;
}

.rsvf__step:last-child .rsvf__rail::before {
    right: 50%;
}

.rsvf__step.is-done .rsvf__rail::before {
    background: rgba(46, 204, 113, .55);
}

.rsvf__ico {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--rsvf-bg);
    border: 2px solid var(--rsvf-line);
    color: var(--rsv-mute);
    box-shadow: 0 0 0 4px var(--rsvf-bg);
}

.rsvf__step.is-done .rsvf__ico {
    background: var(--rsvf-done);
    border-color: var(--rsvf-done);
    color: #0c0c0f;
}

.rsvf__step.is-now .rsvf__ico {
    background: var(--rsvf-now);
    border-color: var(--rsvf-now);
    color: #14140f;
    box-shadow: 0 0 0 4px var(--rsvf-bg), 0 0 0 8px rgba(201, 168, 108, .18);
}

.rsvf__b {
    display: block;
    margin-top: 8px;
    padding: 0 4px;
}

.rsvf__t {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rsv-text);
}

.rsvf__step.is-wait .rsvf__t {
    color: var(--rsv-mute);
    font-weight: 400;
}

.rsvf__x {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--rsv-dim);
}

.rsvf__step.is-wait .rsvf__x {
    color: var(--rsv-mute);
}

.rsvf__here {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    display: none;
    background: var(--rsvf-now);
    color: #14140f;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- 完了画面のボタン2つ ----
   PCは横並び、SPは縦積み。文字リンクだと押せると気づかれないので、
   どちらもボタンの形にする。主役（チャット / お店ページ）は金地。 */
.rc-cbtns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.rc-cbtn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s, opacity .12s;
}

.rc-cbtn i {
    font-size: 1.6rem;
}

.rc-cbtn.-go {
    background: var(--rsv-gold);
    color: #14140f;
    background: transparent;
    color: #a98adf;
    border: 1px solid #8a5cd8;
}

.rc-cbtn.-go:hover {
    opacity: 0.7;
}

.rc-cbtn.-sub {
    background: transparent;
    border: 1px solid var(--rsv-gold-line);
    color: var(--rsv-gold);
}

.rc-cbtn.-sub:hover {
    background: rgba(201, 168, 108, .12);
}



@media (max-width: 400px) {

    .rsvf__t {
        font-size: 1.15rem;
    }

    .rsvf__x {
        font-size: .95rem;
    }
}

/* =========================================================================
 * グリッドのSP調整
 *
 * 日ページ送り（reserve-ui.js）の判定と同じ 767px。片方だけ変えると
 * 「5日に絞ったのに min-width で横スクロールが残る」状態になるので、
 * 必ず両方そろえること。
 * ========================================================================= */

@media (max-width: 767px) {

    /* 1画面6日。375px なら 時刻44px ＋ 6列×55px。
       320px でも1列46pxあるので、日付も記号も無理なく読める。 */
    .rsv-grid__time {
        width: 44px;
        font-size: 1.1rem;
        padding: 5px 2px;
    }

    .rsv-grid__day {
        font-size: 1.1rem;
        padding: 6px 0;
    }

    .rsv-grid__day small {
        font-size: .9rem;
    }

    .rsv-cell,
    .fg-cell,
    .rsv-cell__btn,
    .fg-cell__btn {
        height: 36px;
    }

    .rsv-cell__btn,
    .fg-cell__btn,
    .rsv-cell__sym,
    .fg-cell__sym {
        font-size: 1.5rem;
    }

    /* TELだけは3文字。列幅に収めるため一段小さく */
    .rsv-cell.is-tel .rsv-cell__sym {
        font-size: 1.05rem;
        letter-spacing: -.04em;
    }

    .rsv-weeknav {
        padding: 5px 6px;
    }

    .rsv-weeknav__btn {
        padding: 6px 9px;
        font-size: 1.1rem;
    }

    .rsv-weeknav__range {
        font-size: 1.1rem;
    }
}


/* =========================================================================
 * SP 微調整
 * ========================================================================= */

@media (max-width: 600px) {
    .rc-dopt__more {
        width: 100%;
    }
    .rsv-body .datatime-wapper {
        width: 100%;
        padding: 16px 10px;
    }

    .fg-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .rc-block {
        padding: 12px;
    }

    .rc-input {
        /* 16px 未満だと iOS が拡大するため下げない */
        font-size: 1.6rem;
    }

    .rs-card__body {
        padding: 12px;
    }

    .rs-side-card {
        padding: 14px;
    }

    .rs-contact__phone {
        font-size: 1.7rem;
    }
    .rc-cbtns {
        flex-direction: column;
        align-items: stretch;
    }

    .rc-cbtn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* =========================================================================
 * 15 クーポン期限外の確認モーダル（_cpout.php）
 *    もとは datetime.php の inline <style> にあったもの。こちらへ移設。
 * ========================================================================= */

.cpout-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
    background: rgba(0, 0, 0, .62);
}

.cpout-overlay[hidden] {
    display: none;
}

.cpout-dialog {
    width: 100%;
    max-width: 40rem;
    padding: 2.2rem 2.2rem 1.8rem;
    border: 0.1rem solid #5c4a1e;
    border-radius: 1.2rem;
    background: var(--rsv-panel);
    color: var(--rsv-text);
    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, .5);
}

.cpout-title {
    margin-bottom: 1rem;
    color: #f0d590;
    font-size: 1.6rem;
    font-weight: 600;
}

.cpout-body {
    font-size: 1.35rem;
    line-height: 1.7;
    color: #c8c2b8;
}

.cpout-body strong {
    color: #f0d590;
    font-weight: 600;
}

.cpout-pick {
    display: block;
    margin-top: 1rem;
    color: var(--rsv-dim);
    font-size: 1.25rem;
}

.cpout-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.8rem;
}

.cpout-btn {
    flex: 1;
    padding: 1.1rem 0;
    border: 0.1rem solid;
    border-radius: 0.8rem;
    background: transparent;
    font-family: inherit;
    font-size: 1.35rem;
    cursor: pointer;
    transition: .15s;
}

.cpout-btn--ghost {
    border-color: #3a3a40;
    color: #b8b2a8;
}

.cpout-btn--ghost:hover {
    background: var(--rsv-panel-2);
}

.cpout-btn--gold {
    border-color: var(--rsv-gold);
    background: var(--rsv-gold);
    color: var(--rsv-panel);
    font-weight: 600;
}

.cpout-btn--gold:hover {
    background: #f0d590;
    border-color: #f0d590;
}


/* =========================================================================
 * 16 送信中の抑制・会員確認ページのバー
 * ========================================================================= */

/* 二重送信ガード。JSは印を付けるだけで、実際の防止は confirm.php 側 */
body.rs-sending .rc-submit {
    opacity: .55;
    pointer-events: none;
}

/* 会員登録のアコーディオンを開いている間は、
   下端バーの「ログインして進む」を隠す（押し間違いを防ぐ） */
body.rc-signup-open .rs-dock .rs-dock__next {
    display: none;
}

/* hidden 属性は display 指定に負ける。JSで出し分ける要素はここに追記すること。 */
.rc-confirm__row[hidden],
#rcPlaceBox[hidden] { display: none !important; }
.rs-line[hidden] { display: none !important; }
/* =========================================================================
 * 17 割引ページの簡略表示（coupon.php / RESERVE_DISCOUNT_COMPACT）
 *
 * 2026-08-17。情報量を削るための追加。旧表示に戻すときは coupon.php の
 * 定数を false にするだけでよく、ここのCSSは残しておいて構わない
 * （対応するHTMLが出なくなるので何も起きない）。
 * ========================================================================= */

/* 見出しの右に置く「どちらか1つ」。
   消した「併用はできません…」の代わり。 */
.rc-onlyone {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.1rem 0.9rem;
    border: 0.1rem solid var(--rsv-line);
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--rsv-dim);
    white-space: nowrap;
}

/* 選択中だけ出る解除マーク。
   ✓ ではなく ✕ にして「押すと外れる」と分かるようにしている。
   .rc-dopt::before の金の帯と同じく、選択中のみ表示。 */
.rc-dopt__x {
    position: absolute;
    top: 0.7rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--rsv-gold);
    opacity: 0;
    pointer-events: none;
    transition: background .12s;
}

.rc-dopt.is-checked .rc-dopt__x,
.rc-dopt:has(input[type="radio"]:checked) .rc-dopt__x {
    opacity: 1;
}

.rc-dopt:hover .rc-dopt__x {
    background: rgba(201, 168, 108, .18);
}

/* ✕ のぶん右側を空ける */
.rc-dopt:has(.rc-dopt__x) {
    padding-right: 3.2rem;
}

/* 説明文は最初から畳む（旧: 2行clamp＋つづきを読む） */
.rc-dopt__desc--hide {
    display: none;
}

.rc-dopt__desc--hide.is-open {
    display: block;
}

/* 選べない割引のまとめ。
   コース差し替えボタンが付くぶん、選べない行のほうが背が高くなる。
   下へ回して畳む。 */
.rc-others {
    margin-top: 1rem;
    border: 0.1rem solid var(--rsv-line);
    border-radius: 1rem;
    overflow: hidden;
}

.rc-others summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 1.2rem;
    font-size: 1.15rem;
    color: var(--rsv-dim);
    cursor: pointer;
    list-style: none;
}

.rc-others summary::-webkit-details-marker {
    display: none;
}

.rc-others__arw {
    margin-left: auto;
    font-size: 1rem;
    color: var(--rsv-gold);
    transition: transform .2s;
}

.rc-others[open] .rc-others__arw {
    transform: rotate(180deg);
}

.rc-others__body {
    padding: 0 1.2rem 1.2rem;
}
/* =========================================================================
 * 18 料金の注記（confirm.php）と無断キャンセルの注意（complete.php）
 *
 * どちらも「読み飛ばされると困る」ものなので、地の文ではなく枠を付ける。
 * ========================================================================= */

/* confirm: 合計のすぐ下。目安であることを伝える */
.rc-estimate {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 1.2rem 0 0.4rem;
    padding: 1.1rem 1.2rem;
    border: 0.1rem solid var(--rsv-gold-line);
    border-radius: 0.8rem;
    background: var(--rsv-gold-bg);
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--rsv-dim);
}

.rc-estimate i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--rsv-gold);
    font-size: 1.3rem;
}

.rc-estimate b {
    color: var(--rsv-text);
    font-weight: 600;
}

/* complete: 完了カードの下 */
.rc-notice {
    background: var(--rsv-panel);
    border: 0.1rem solid var(--rsv-line);
    border-radius: 1rem;
    /* 上のヒーローカードに下マージンが無いので、ここで離す。
       付けないと2枚のカードが接して1枚に見える。 */
    margin: 1.2rem 0;
    padding: 1.3rem 1.4rem;
}

.rc-notice__h {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rsv-gold);
    margin-bottom: 0.8rem;
}
.rc-notice__b {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--rsv-dim);
}

.rc-notice__b b {
    color: var(--rsv-text);
    font-weight: 600;
}

/* 出張の3段目（includes/rsv_flow.php が is-skip を付ける）。
   会員側 /member/css/reservations.css にも同じ指定がある。
   出張はお客さまが場所を指定するので、住所が届くのを待つ工程が無い。
   段は残したまま、進行させず灰色で置く。 */
.rsvf__step.is-skip .rsvf__t {
    color: var(--text-muted);
    font-weight: 400;
}

.rsvf__step.is-skip .rsvf__x {
    color: var(--text-muted);
}