/* ui-pop.css — 予約フォーム (v3: お店のロゴ・写真を使い、ふつうの使いやすさを優先する)
 *
 * 色は4色のみ: 黄 #fedd6b / 紺 #003f67 / 白 #f5f5f5 / 赤 #ad0003
 *  - 上部の紺の帯にお店のロゴ。本文は白地・紺の文字
 *  - 黄色は「次へ」ボタンと進み線だけ。選んだものは紺で塗る
 *  - 必須の項目には赤い「必須」。進めないときは該当の項目を赤い線で囲み、画面下に理由を出す
 *  - 押せない状態は新しい色を作らず、紺の透明度で表す
 */

:root {
  --yellow: #fedd6b;
  --navy: #003f67;
  --white: #f5f5f5;
  --red: #ad0003;

  --line: 1.5px solid var(--navy);
  --hair: 1px solid rgba(0, 63, 103, .22);
  --body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --header-h: 86px;

  /* コマの形(読み込み中のマスクで使う)。生成AIで作った絵の輪郭をSVGに起こしたもの */
  --meeple: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M48.1%204.1L51.4%204.0L55.3%205.0L57.6%206.1L60.5%208.6L62.7%2011.9L63.9%2015.3L64.4%2018.1L64.0%2024.3L74.4%2028.1L84.5%2033.0L87.3%2034.7L89.5%2036.6L90.6%2037.7L92.5%2040.5L93.1%2043.3L92.6%2046.1L91.2%2048.2L89.5%2049.6L86.7%2050.8L84.5%2051.3L74.4%2052.2L73.3%2052.7L73.0%2053.4L73.2%2055.1L81.3%2069.6L84.7%2076.3L88.0%2085.3L88.7%2088.7L88.6%2092.6L87.3%2094.8L85.6%2095.7L83.3%2096.0L66.0%2096.0L63.2%2095.9L61.5%2095.6L59.1%2092.6L51.8%2078.6L51.4%2078.0L50.3%2077.3L49.7%2077.3L48.6%2078.0L41.5%2091.5L39.7%2094.4L38.5%2095.5L36.3%2096.0L16.7%2096.0L14.4%2095.7L13.3%2095.2L12.2%2094.3L11.6%2093.2L11.2%2090.9L11.5%2087.5L12.7%2083.1L14.3%2078.6L18.1%2070.7L26.8%2055.1L27.1%2053.9L26.8%2052.8L25.6%2052.2L15.6%2051.3L13.3%2050.8L10.5%2049.6L8.8%2048.3L7.4%2046.1L6.9%2043.3L7.5%2040.5L10.0%2037.0L14.4%2033.7L25.6%2028.1L36.0%2024.3L35.6%2018.1L36.6%2013.6L37.9%2010.8L39.5%208.6L42.5%206.1L44.7%205.0L48.1%204.1Z'%20fill='black'/%3E%3C/svg%3E");

  /* form.html の onDayCreate が参照する変数 */
  --fp-sunday-holiday-color: var(--red);
  --fp-saturday-color: var(--navy);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; color: var(--navy); background: var(--white);
  font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.hidden, [hidden] { display: none !important; }

/* ───────── 上部: 紺の帯 + ロゴ + 5つのステップ ───────── */
.pop-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--navy); color: var(--white); }
.pop-header__row { max-width: 600px; margin: 0 auto; height: 50px; padding: 0 16px; display: flex; align-items: center; }
.pop-logo { display: block; height: 34px; width: auto; }
.pop-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 600px; margin: 0 auto; padding: 0 16px 10px; list-style: none; }
.pop-step i { display: block; height: 4px; border-radius: 2px; background: rgba(245, 245, 245, .28); transition: background-color .2s; }
.pop-step span { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; color: rgba(245, 245, 245, .6); white-space: nowrap; }
.pop-step.is-done i, .pop-step.is-current i { background: var(--yellow); }
.pop-step.is-done span { color: var(--white); }
.pop-step.is-done span::before { content: "✓ "; }
.pop-step.is-current span { color: var(--yellow); font-weight: 900; }

/* ───────── ページ ───────── */
.container { width: 100%; max-width: 600px; margin: 0 auto; padding: calc(var(--header-h) + 16px) 16px 150px; }
.container > div[id^="page"] { animation: page-in .18s ease-out both; }   /* opacity のみ(下部の固定バーを壊さない) */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }


.section { margin: 22px 0; scroll-margin-top: calc(var(--header-h) + 12px); }
.instruction-text { margin: 10px 0 6px; font-size: 22px; font-weight: 900; line-height: 1.45; }

.note { font-size: 13px; line-height: 1.75; margin: 12px 0 0; padding: 10px 12px; background: rgba(0, 63, 103, .07); border-radius: 8px; }
a, .store-link { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 項目名 + 必須/任意 */
.field-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.req, .opt { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.6; }
.req { background: var(--red); color: var(--white); }
.opt { background: rgba(0, 63, 103, .14); color: var(--navy); }

/* 進めない項目: 赤い線で囲んで目立たせる */
.section.is-error { margin-left: -12px; padding-left: 8px; border-left: 4px solid var(--red); }
.section.is-error .field-label { color: var(--red); }
.section.is-error input:not([type="checkbox"]), .section.is-error textarea { border-color: var(--red); }

/* ───────── 入力 ───────── */
input:not([type="checkbox"]), textarea, select {
  width: 100%; font: inherit; font-size: 16px; color: var(--navy); background: transparent;
  border: var(--line); border-radius: 8px; padding: 12px 12px; min-height: 52px;
  appearance: none; -webkit-appearance: none;
}
textarea { min-height: 96px; }
input::placeholder, textarea::placeholder { color: rgba(0, 63, 103, .45); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--yellow); }
select:disabled { opacity: .4; }
.pop-ready select.pop-native { display: none; }

.error-message { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--red); }
.error-message:not(:empty)::before { content: "! "; }

/* 確認チェック */
.agree { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: var(--line); border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.agree input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--navy); }
.agree .req { margin-left: 6px; }

/* ───────── ボタン ───────── */
button { font: inherit; font-weight: 700; font-size: 16px; color: var(--navy); background: transparent; border: 0; border-radius: 10px; min-height: 52px; padding: 12px 18px; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: not-allowed; }
button:focus-visible, .pop-row:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* 主ボタン: お店のサイトと同じ、黄色の丸いボタン */
.button-group button:not(.back), .close-button { background: var(--yellow); border: 2px solid var(--navy); border-radius: 999px; font-weight: 900; transition: transform .1s; }
.button-group button:not(.back):active, .close-button:active { transform: scale(.98); }
.button-group button.btn-submit { background: var(--navy); color: var(--white); }
.button-group button.is-disabled:not(.back) { background: rgba(0, 63, 103, .1); border-color: rgba(0, 63, 103, .25); color: rgba(0, 63, 103, .5); }
.button-group { flex-wrap: wrap; row-gap: 8px; }
.button-group {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--white); border-top: var(--hair);
}
.button-group > button { flex: 1; max-width: 340px; }
.button-group.single > button { max-width: 568px; }
.button-group button.back { flex: 0 0 auto; padding-left: 6px; padding-right: 10px; }
.button-group button.back::before { content: "← "; }

#showNearbyDatesBtn { width: 100%; margin-top: 14px; border: var(--line); background: transparent; }

/* ───────── 選択肢 ───────── */
.pop-choice { display: grid; gap: 8px; }
.pop-choice--hours { grid-template-columns: repeat(3, 1fr); }
.pop-choice--rows { gap: 8px; }

/* チップ(人数・滞在時間) / 時刻ボタン: 選べる=細枠、選んだ=紺で塗る */
.pop-chip:not(.pop-row), .time-option {
  display: flex; align-items: baseline; justify-content: center; gap: 1px; margin: 0; min-height: 52px; padding: 10px 6px; text-align: center;
  background: transparent; color: var(--navy); border: var(--line); border-radius: 8px;
  font-weight: 700; font-variant-numeric: tabular-nums; align-items: center;
  transition: background-color .1s, color .1s;
}
.pop-chip:not(.pop-row):active, .time-option:active { background: rgba(0, 63, 103, .08); }
.pop-chip.on:not(.pop-row), .time-option.selected { background: var(--navy); color: var(--yellow); }
.time-option:hover { background: transparent; color: var(--navy); }
.time-option.selected:hover { background: var(--navy); color: var(--yellow); }
.time-option.unavailable, .time-option.unavailable:hover { background: transparent; color: var(--navy); border-color: rgba(0, 63, 103, .3); opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.unavailable { color: var(--red); font-weight: 700; }
.pop-choice.is-disabled .pop-chip { opacity: .4; }

/* 数字を大きく、単位(名・時間・分)を小さく薄く */
.num { font-size: 18px; font-weight: 700; line-height: 1; }
.unit { font-size: 14px; font-weight: 500; line-height: 1; margin: 0 2px 0 1px; }

/* 一覧の行(店舗・席タイプ): 選んだ行は紺で反転 */
.pop-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 72px; padding: 10px 12px; border: var(--line); border-radius: 10px; background: transparent; transition: background-color .12s, color .12s; }
.pop-row:active { background: rgba(0, 63, 103, .06); }
.pop-row__img { flex: none; width: 88px; height: 62px; object-fit: cover; border-radius: 6px; background: rgba(0, 63, 103, .1); }
.pop-row__text { flex: 1; min-width: 0; }
.pop-row__title { display: block; font-size: 16px; font-weight: 900; line-height: 1.4; }
.pop-row__sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.5; opacity: .8; }
.pop-row::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: var(--line); transition: background-color .12s, border-color .12s; }
.pop-row.on { background: var(--navy); color: var(--white); }
.pop-row.on::after { background: var(--yellow); border-color: var(--yellow); }
.pop-hint { grid-column: 1 / -1; margin: 0; padding: 12px; border: 1.5px dashed rgba(0, 63, 103, .35); border-radius: 8px; font-size: 14px; text-align: center; opacity: .75; }

/* ───────── 人数: ボードゲームのコマ(ミープル) ───────── */
.meeples__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meeples__count { display: flex; align-items: baseline; gap: 6px; font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.meeples__count small { font-size: 16px; font-weight: 700; }
.step-btn { flex: none; width: 56px; height: 56px; padding: 0; border: var(--line); border-radius: 50%; font-size: 28px; line-height: 1; font-weight: 500; }
.step-btn:active { background: var(--navy); color: var(--yellow); }
.meeples__grid { display: grid; grid-template-columns: repeat(8, 1fr); margin-top: 12px; }
.meeple { display: grid; place-items: center; min-height: 46px; padding: 5px; border-radius: 8px; color: rgba(0, 63, 103, .16); transition: color .12s; }
.meeple svg { width: 100%; height: 100%; }
.meeple.on { color: var(--navy); }
.meeple.just-on svg { animation: meeple-hop .22s ease-out; }
@keyframes meeple-hop { 0% { transform: translateY(0) scale(.85); } 55% { transform: translateY(-5px) scale(1.06); } 100% { transform: none; } }

/* ───────── 時刻の周辺 ───────── */
#timeOptions { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; white-space: normal !important; overflow: visible !important; margin-bottom: 10px !important; }
#timeOptions > span { grid-column: 1 / -1; color: var(--navy) !important; opacity: .7; font-size: 14px; }
#timeLegend { color: var(--navy) !important; font-size: 13px !important; margin: 0 0 12px !important; opacity: .75; }
#timeTableMessage { color: var(--red) !important; font-weight: 700; }
#nearbyDatesContainer { margin-top: 18px; }
#nearbyDatesContainer h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 900; }
#nearbyDatesContainer .time-option { flex: 0 0 auto; min-width: 74px; }

/* ───────── カレンダー ───────── */
#reserveDate { display: none; }
.flatpickr-calendar.inline { width: 100%; max-width: none; background: transparent; border: var(--line); border-radius: 10px; box-shadow: none; padding: 6px 6px 8px; touch-action: manipulation; }
.flatpickr-calendar input, .flatpickr-calendar select { width: auto; min-height: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; color: var(--navy); }
.flatpickr-calendar input:focus, .flatpickr-calendar select:focus { box-shadow: none; outline: 3px solid var(--yellow); }
.flatpickr-calendar .flatpickr-monthDropdown-months { appearance: none; -webkit-appearance: none; background-image: none; cursor: pointer; }
.flatpickr-calendar .numInputWrapper { width: 6ch; }
.flatpickr-calendar .numInputWrapper span { display: none; }
.flatpickr-calendar .flatpickr-current-month input.cur-year { width: 100%; }
.flatpickr-months .flatpickr-month { height: 44px; display: flex; align-items: center; justify-content: center; }
.flatpickr-current-month { position: static; width: auto; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; height: auto; font-size: 17px; font-weight: 900; color: var(--navy); }
.flatpickr-current-month .cur-month, .flatpickr-current-month input.cur-year { font-weight: 900; color: var(--navy); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { width: 44px; height: 44px; padding: 12px; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--navy); }
span.flatpickr-weekday { font-weight: 700; font-size: 12px; color: var(--navy); opacity: .7; }
span.flatpickr-weekday:nth-of-type(1) { color: var(--red) !important; opacity: 1; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
.dayContainer { padding: 0; }
.flatpickr-day { max-width: none; height: 46px; line-height: 42px; margin: 1px 0; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); border: 2px solid transparent; }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(0, 63, 103, .08); border-color: transparent; color: var(--navy); }
.flatpickr-day.today { border-color: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.flatpickr-day.today:hover { background: rgba(0, 63, 103, .08); }
.flatpickr-calendar .dayContainer .flatpickr-day.selected, .flatpickr-calendar .dayContainer .flatpickr-day.selected:hover { background: var(--navy); border-color: var(--navy); color: var(--yellow); }
.flatpickr-calendar .dayContainer .flatpickr-day.saturday { color: var(--navy) !important; }
.flatpickr-calendar .dayContainer .flatpickr-day.sunday, .flatpickr-calendar .dayContainer .flatpickr-day.holiday { color: var(--red) !important; }
.flatpickr-calendar .dayContainer .flatpickr-day.selected.holiday, .flatpickr-calendar .dayContainer .flatpickr-day.selected.saturday { color: var(--yellow) !important; }
.flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled.holiday, .flatpickr-calendar .dayContainer .flatpickr-day.flatpickr-disabled.saturday {
  background: transparent !important; color: var(--navy) !important; opacity: .25; cursor: not-allowed !important; text-decoration: line-through;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { opacity: .18; }

/* ───────── 店舗情報・ここまでの条件 ───────── */
#storeInfoSection { padding: 14px; background: rgba(0, 63, 103, .07); border-radius: 10px; font-size: 14px; }
#storeInfoSection:empty { display: none; }
.store-info-wrapper { overflow: hidden; }
.store-info-content { opacity: 0; transition: opacity .25s ease-out; }
.store-info-content.show { opacity: 1; }
#storeInfoSection p { margin: 8px 0; }
#storeInfoSection p:first-child { margin-top: 0; }

.pop-summary { display: block; margin: 0 0 14px; padding: 12px 14px; background: rgba(0, 63, 103, .07); border-radius: 10px; }
.pop-summary:empty { display: none; }
.store-name-header { display: block; font-weight: 900; font-size: 15px; line-height: 1.5; }
.sum-addr, .sum-body { font-size: 13px; }
.sum-addr { opacity: .75; }
.sum-body { margin-top: 8px; padding-top: 8px; border-top: var(--hair); font-weight: 700; }

/* ───────── 確認ページ ───────── */
#page5 > p:first-of-type { margin: 4px 0 14px; padding: 10px 12px; border-left: 4px solid var(--red); background: rgba(173, 0, 3, .07); color: var(--red) !important; font-weight: 700; text-align: left !important; border-radius: 0 8px 8px 0; }
.confirmation-box { border: var(--line); border-radius: 10px; padding: 4px 16px 10px; }
.confirmation-box h3 { margin: 12px 0 2px; font-size: 13px; font-weight: 900; letter-spacing: .06em; opacity: .7; }
.confirmation-box h3:not(:first-of-type) { margin-top: 18px; padding-top: 12px; border-top: var(--hair); }
.confirmation-box p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin: 0; padding: 9px 0; border-bottom: var(--hair); }
.confirmation-box p:last-child { border-bottom: 0; }
.confirmation-box strong { flex: 0 0 7.8em; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: .7; }
.confirmation-box p span { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.confirmation-box p span:only-of-type { flex: 1 1 0; }

/* ───────── 予約完了/エラー ───────── */
.modal-overlay { position: fixed; inset: 0; z-index: 100; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px 20px; background: var(--white); }
.modal-content { width: 100%; max-width: 420px; background: transparent; border: 0; box-shadow: none; border-radius: 0; text-align: center; }
.modal-header { padding: 0; }
.modal-header h2 { margin: 18px 0 0; font-size: 26px; font-weight: 900; color: var(--navy) !important; }
.result-icon { width: auto; height: auto; margin: 0 auto; display: block; border: 0; background: none; box-shadow: none; }
.success-icon::before { content: "✓"; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-size: 38px; font-weight: 900; }
.error-icon::before { content: "!"; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--red); color: var(--red); font-size: 38px; font-weight: 900; }
.modal-body { padding: 14px 0 20px; }
#reservationSummary { background: transparent !important; color: var(--navy) !important; border-top: var(--line); border-bottom: var(--hair); border-radius: 0 !important; padding: 14px 0 !important; font-weight: 700; }
#reservationMessage { color: var(--navy) !important; font-size: 14px !important; line-height: 1.75; }
.modal-content:has(.error-icon) .modal-header h2, .modal-content:has(.error-icon) #reservationSummary { color: var(--red) !important; }
.modal-content:has(.error-icon) #reservationSummary { border-top-color: var(--red); }
.modal-footer { padding: 0; text-align: center; }
.modal-footer a { text-decoration: none; }
.close-button { width: 100%; max-width: 280px; }

/* ───────── 読み込み中: 0.3秒より長いときだけ表示 ───────── */
.loading-overlay { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(245, 245, 245, .92); opacity: 0; animation: overlay-in .15s ease-out .3s forwards; }
@keyframes overlay-in { to { opacity: 1; } }
.loading-spinner { width: 52px; height: 52px; margin: 0; border: 0; border-radius: 0; background: var(--navy); -webkit-mask: var(--meeple) center / contain no-repeat; mask: var(--meeple) center / contain no-repeat; animation: hop .8s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.05, .92); } 45% { transform: translateY(-18px) scale(.95, 1.06); } }
.loading-text { color: var(--navy); font-size: 14px; font-weight: 700; }

/* ───────── 進めない理由の表示 ───────── */
.pop-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; max-width: 568px; margin: 0 auto;
  padding: 12px 14px; background: var(--white); border: 2px solid var(--red); border-left-width: 8px; border-radius: 8px;
  color: var(--red); font-size: 14px; font-weight: 700; line-height: 1.55; animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────── LINEログイン枠 (line-integration.js) ───────── */
.line-box { padding: 14px; background: rgba(0, 63, 103, .07); border-radius: 10px; font-size: 14px; margin: 0 0 14px; }
.line-box__title { font-weight: 900; font-size: 15px; margin-bottom: 4px; }
.line-btn { width: 100%; margin-top: 10px; border: var(--line); border-radius: 999px; background: transparent; }
.line-btn:active { background: var(--navy); color: var(--yellow); }
.line-hint { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--red); }
.line-sub { margin-top: 6px; font-size: 13px; }
.line-note { font-size: 12.5px; line-height: 1.7; margin: 0; }

.pop-legacy-desc { margin-top: 10px; font-size: 14px; }
.pop-ready .pop-legacy-desc { display: none; }

@media (max-width: 380px) {
  #timeOptions { grid-template-columns: repeat(3, 1fr); }
    .pop-row__img { width: 76px; height: 54px; }
}

/* ───────── 視覚効果を減らす設定 ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .loading-spinner { animation: fade 1.4s ease-in-out infinite !important; animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  @keyframes fade { 50% { opacity: .35; } }
}

/* カレンダーの凡例 */
.cal-legend { margin: 10px 0 0; font-size: 12.5px; opacity: .75; }

/* 「ご予約にあたってのお願い」: 長いときは折りたたむ */




.agree-box.is-locked .agree { opacity: .45; }