/* ===================================================================
   共通スタイル

   【方針】
   ・Figma の指定（背景 #FFFFFF / 文字 #000000 / Inter Medium / 字間広め）に合わせる
   ・モバイルファースト。375px を基準に、320px の小型端末から
     デスクトップまで崩れないようにする
   ・文字サイズは clamp() で画面幅に応じて滑らかに変化させる
     （Figma は約6倍に拡大されたラフなので、実寸は読みやすさを優先）
   =================================================================== */

:root {
  /* ---- 色（Figma準拠） ---- */
  --c-text:        #000000;
  --c-text-weak:   #666060;
  --c-bg:          #ffffff;
  --c-bg-soft:     #f7f4f2;
  --c-border:      #dcd6d1;

  /* アクセント（ブライダル系の上品なトーン） */
  --c-accent:      #a8968c;
  --c-accent-dark: #8a7568;

  /* 注意喚起 */
  --c-alert-bg:     #fdf6f0;
  --c-alert-border: #d9a05b;
  --c-alert-text:   #8a5a1e;

  /* フッター */
  --c-footer-bg:   #3a3634;
  --c-footer-text: #ffffff;

  /* ボタン */
  --c-btn-bg:       #3a3634;
  --c-btn-bg-hover: #201d1c;
  --c-btn-text:     #ffffff;
  --c-btn-disabled: #c9c4c0;

  /* ---- フォント ---- */
  /* Inter は欧文のみ対応。和文は端末のゴシックにフォールバックする */
  --font-main: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-code: "Inter", "SFMono-Regular", Consolas, "Courier New", monospace;

  /* ---- 字間（Figmaは25%。和文で25%は読みづらいため用途別に調整）---- */
  --ls-body:  0.06em;
  --ls-title: 0.12em;
  --ls-logo:  0.2em;
  --ls-code:  0.2em;

  /* ---- レイアウト ---- */
  --w-container: 480px;
  --radius:      6px;

  /* 画面幅に応じて余白を変える（320pxでも詰まりすぎないように） */
  --space-page: clamp(14px, 4.5vw, 22px);
}

html {
  font-size: 100%;
  /* 端末の横向き切り替えで文字サイズが勝手に変わるのを防ぐ */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  /* 16px 未満にするとスマホで入力時に自動ズームされるため、本文は16px以上を守る */
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: var(--ls-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* 想定外の横スクロールを防ぐ */
  overflow-x: hidden;
}

/* 1カラムを中央に置く。スマホでは画面いっぱい、PCでは中央寄せ */
.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  background: var(--c-bg);
}

/* hidden 属性が付いた要素は、必ず隠す。

   ⚠️ ブラウザ標準の [hidden] { display: none } は弱く、
      こちらで .btn { display: flex } のように display を指定していると
      そちらが優先され、hidden を付けても表示されたままになります。
      （「次へ進む」ボタンが隠れなかった原因） */
[hidden] {
  display: none !important;
}

/* 画像・動画・表がはみ出さないようにする */
img,
video,
table {
  max-width: 100%;
}

/* 長いURLやメールアドレスでの横はみ出しを防ぐ */
.lead,
.text-weak,
.terms,
.code-meta,
.error-block__text {
  overflow-wrap: anywhere;
}


/* ===================================================================
   ヘッダー
   =================================================================== */

.site-header {
  padding: clamp(14px, 4vw, 20px) var(--space-page);
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}

.site-header__logo {
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ロゴ画像のとき。文字のときと同じくらいの高さにそろえています */
.site-header__logo-image {
  display: block;
  height: clamp(18px, 5vw, 22px);
  width: auto;
  margin-inline: auto;
}


/* ===================================================================
   メイン
   =================================================================== */

.site-main {
  padding-bottom: clamp(28px, 8vw, 44px);
  min-height: 40vh;
}

.section {
  padding: clamp(20px, 6vw, 30px) var(--space-page);
}

.section + .section {
  border-top: 1px solid var(--c-border);
}


/* ===================================================================
   パンくずリスト（サイト内の現在位置）

   「このページはサイトのどこにあるのか」を示します。
   予約手続きの進み具合は、下のステップ表示が担当します。

   控えめなサイズにして、主張しすぎないようにしています。
   =================================================================== */

.breadcrumb {
  padding: 12px var(--space-page) 10px;
  border-bottom: 1px solid var(--c-border);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  /* 項目が多いときは折り返す（横スクロールさせない） */
  flex-wrap: wrap;
  row-gap: 2px;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-text-weak);
}

/* 項目のあいだの区切り（＞） */
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin: 0 7px;
  border-top: 1px solid #cbc4be;
  border-right: 1px solid #cbc4be;
  transform: rotate(45deg);
}

.breadcrumb__home {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-right: 4px;
}

.breadcrumb__link {
  color: inherit;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 現在いるページ */
.breadcrumb__item.is-current {
  color: var(--c-text);
}


/* ===================================================================
   ステップ表示（予約手続きの進み具合）

   「手続きのどこまで進んでいるか」を示します。

     STEP 1 / 5
     メニュー選択
     ●━━━○━━━○━━━○━━━○

   現在地だけをはっきり見せ、まだ通っていないステップは薄く表示します。
   =================================================================== */

.stepper {
  padding: clamp(16px, 5vw, 22px) var(--space-page) clamp(14px, 4.5vw, 20px);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}

.stepper__count {
  font-size: clamp(0.625rem, 2.7vw, 0.6875rem);
  letter-spacing: 0.16em;
  color: var(--c-text-weak);
}

/* 現在のステップ番号だけ濃く出す */
.stepper__now {
  color: var(--c-text);
  font-weight: 600;
}

.stepper__name {
  margin-top: 4px;
  margin-bottom: clamp(14px, 4vw, 18px);
  font-size: clamp(1.05rem, 4.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: 1.4;
}

.stepper__list {
  display: flex;
  align-items: flex-start;
}

.stepper__item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* ステップとステップをつなぐ線。丸の中心の高さに合わせる */
.stepper__item + .stepper__item::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #e0dad5;
}

/* 通過済みまでの線は少し濃くして、進んだ分が分かるようにする */
.stepper__item.is-current::before,
.stepper__item.is-done::before {
  background: var(--c-accent);
}

.stepper__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.stepper__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #ddd6d0;
  background: var(--c-bg);
  font-size: 0.75rem;
  line-height: 1;
  color: #b3aaa3;
  /* 線より前に出して、丸の中を線が横切らないようにする */
  position: relative;
  z-index: 1;
}

.stepper__label {
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: #b3aaa3;
}

/* 通過済み */
.stepper__item.is-done .stepper__dot {
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

.stepper__item.is-done .stepper__label {
  color: var(--c-accent-dark);
}

/* 現在地。ここだけ黒く塗って強調する */
.stepper__item.is-current .stepper__dot {
  background: var(--c-text);
  border-color: var(--c-text);
  color: #fff;
  font-weight: 600;
}

.stepper__item.is-current .stepper__label {
  color: var(--c-text);
  font-weight: 600;
}

/* 画面が狭いときは丸の下の文字を隠して、番号だけにする。
   現在のステップ名は上に大きく出ているので、意味は伝わります。

   display:none ではなく画面外へ飛ばしているのは、
   目には見えなくても音声読み上げには読ませたいからです。 */
@media (max-width: 479px) {
  .stepper__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ===================================================================
   見出し・テキスト
   =================================================================== */

.page-title {
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: var(--ls-title);
  margin-bottom: 16px;
}

.heading {
  font-size: clamp(0.95rem, 4vw, 1.1rem);
  font-weight: 600;
  margin: 26px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--c-accent);
}

.lead {
  margin-bottom: 16px;
  line-height: 1.9;
}

.text-weak {
  color: var(--c-text-weak);
  font-size: clamp(0.8rem, 3.4vw, 0.875rem);
  line-height: 1.8;
}

.text-center {
  text-align: center;
}


/* ===================================================================
   TOPページ

   【1画面に収める仕組み】
   TOPはスクロールなしで全文が見えるようにします。
   body を縦に並ぶ「ヘッダー / 本文 / フッター」の3段組にして、
   本文だけが伸び縮みするようにしています。
   高さの単位に svh を使うのは、スマホでアドレスバーが出入りしても
   画面の高さが変わらないようにするためです。

   ※ 万一入りきらない場合は、文字を潰すのではなくスクロールを許します
     （読めなくなるほうが問題なので）。
   =================================================================== */

body.page-top {
  /* 【フォント指定】TOPは Verdana。
     Verdana は欧文専用のフォントなので、和文は端末のゴシックに自動で切り替わります。 */
  font-family: Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

/* 【スクロールなしで1画面に収める】
   TOP・予約遷移・完了の3画面はこの指定を使います。
   高さの単位に svh を使うのは、スマホでアドレスバーが出入りしても
   画面の高さが変わらないようにするためです。

   ※ 万一入りきらない場合は、文字を潰さずスクロールを許します。 */
body.page-top,
body.page-redirect,
body.page-code {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page-top .site-main,
.page-redirect .site-main,
.page-code .site-main {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* 中身のかたまりを縦に伸ばして、ボタンを下端側に置く */
.page-code .section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-block: clamp(14px, 4vw, 22px);
}

/* 本文は上から詰めて置き、ボタンだけを下端に寄せる
   （文章と規約リンクの間が不自然に空かないようにするため） */
.page-top .section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(14px, 4vw, 24px);
}

/* ヒーローが縦を占領しすぎないための保険 */
.page-top .hero__image,
.page-top .hero__placeholder {
  max-height: 30svh;
}


/* ---- TOPページの本文 ----
   【行間25px / 文字間隔】CRAFYサイトの実測値（本文 line-height 1.5〜1.7）に合わせています。
   font-size 15px × line-height 25px なので、指定どおり行間はちょうど 25px です。 */
.intro p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 25px;
}

.intro p:last-child {
  margin-bottom: 0;
}

/* 冒頭の注意事項ブロック（アイキャッチ強化：大きく・太字・赤）
   2026-08-13 レビュー反映 */
.intro__alert {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1.5px solid #c0392b;
  border-radius: var(--radius);
  background: #fdf3f2;
}

.intro__alert p {
  margin-bottom: 8px;
  font-size: clamp(1rem, 4.4vw, 1.125rem);
  line-height: 1.6;
  font-weight: 700;
  color: #c0392b;
}

.intro__alert p:last-child {
  margin-bottom: 0;
}

.intro__terms {
  margin-top: 18px;
  font-size: 14px;
  line-height: 25px;
}

/* margin-top: auto で、余った縦の余白をすべてボタンの上に押しつけます。
   結果としてボタンが画面の下端側に固定されます。 */
.page-top .btn-stack {
  margin-top: auto;
  padding-top: clamp(16px, 4vw, 24px);
}


/* ===================================================================
   ヒーロー（Figma はおよそ 8:3 の横長バナー）
   =================================================================== */

.hero {
  position: relative;
}

.hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  background: var(--c-bg-soft);
}

/* 見出しは画像の中央に重ねる（Figma準拠） */
.hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--space-page);
  text-align: center;
  font-size: clamp(0.95rem, 4.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  color: #fff;
  /* 写真の明るさに関係なく文字が読めるよう影を付ける */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* 画像が未支給のときのプレースホルダー
   案内文は上端に寄せる（中央に重なる見出しと干渉させないため） */
.hero__placeholder {
  width: 100%;
  aspect-ratio: 8 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg, #efe9e5, #efe9e5 10px, #e6dfda 10px, #e6dfda 20px
  );
  color: var(--c-text-weak);
  font-size: clamp(0.625rem, 2.6vw, 0.6875rem);
  line-height: 1.6;
  text-align: center;
  padding: 8px 12px;
}


/* ===================================================================
   スクリーンリーダー用（画面には見えないが読み上げられるテキスト）
   =================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ===================================================================
   注意書きボックス
   =================================================================== */

.notice {
  background: var(--c-alert-bg);
  border: 1px solid var(--c-alert-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: clamp(12px, 3.6vw, 16px);
  margin: 18px 0;
}

.notice__title {
  font-weight: 600;
  font-size: clamp(0.875rem, 3.6vw, 0.9375rem);
  color: var(--c-alert-text);
  margin-bottom: 8px;
}

.notice__list {
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  line-height: 1.85;
}

.notice__list li {
  padding-left: 1em;
  text-indent: -1em;
}

.notice__list li::before {
  content: "・";
}

/* 強調版。現在は未使用ですが、注意喚起を強めたい箇所が出た時に使えます */
.notice--strong {
  border-color: #c0392b;
}

.notice--strong .notice__title {
  color: #c0392b;
}


/* ===================================================================
   ボタン
   =================================================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  /* 指で押しやすい高さを確保する（44px以上） */
  min-height: 52px;
  padding: 13px 18px;
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  border-radius: var(--radius);
  font-size: clamp(0.9375rem, 3.8vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  transition: background-color 0.2s;
}

.btn:hover,
.btn:focus-visible {
  background: var(--c-btn-bg-hover);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--c-btn-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--outline {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--c-bg-soft);
}

.btn--accent {
  background: var(--c-accent);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--c-accent-dark);
}

/* 外部リンクを示すアイコン */
.btn__ext-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ボタン内のアイコン（画像保存など）。文字サイズに合わせて拡大縮小する */
.btn__icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.btn--icon {
  gap: 8px;
}

.btn.is-copied {
  background: #1a7f37;
  color: #fff;
}

.btn-stack > * + * {
  margin-top: 12px;
}


/* ===================================================================
   テキストリンク
   =================================================================== */

.link {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 外部タブで開くことを示すアイコン。
   em 指定なので、隣の文字サイズが変わればアイコンも同じ比率で追従します。
   和文は字面が四角く大きいため、1em では図形が勝ってしまいます。
   実際の見た目が文字と揃う 0.85em にしています。 */
.link__ext-icon {
  width: 0.85em;
  height: 0.85em;
  flex: none;
}


/* ===================================================================
   ブランドロゴ（素材未支給のためテキストで代替）
   Figma では画像ロゴ。素材が届いたら <img> に差し替える
   =================================================================== */

.brand-block + .brand-block {
  margin-top: clamp(24px, 7vw, 34px);
}

.brand-logo {
  margin-bottom: 10px;
  line-height: 1.2;
}

.brand-logo__name {
  display: block;
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: var(--ls-logo);
}

.brand-logo__sub {
  display: block;
  font-size: clamp(0.4375rem, 1.9vw, 0.5rem);
  letter-spacing: 0.32em;
  color: var(--c-text-weak);
  margin-top: 4px;
}

.brand-logo--lg .brand-logo__name {
  font-size: clamp(1.35rem, 6vw, 1.7rem);
}

.brand-logo--lg .brand-logo__sub {
  font-size: clamp(0.5rem, 2.2vw, 0.5625rem);
}

/* ブランドごとの字面をFigmaの雰囲気に寄せる */
.brand-logo--crafy .brand-logo__name {
  font-family: "Times New Roman", "Yu Mincho", serif;
  letter-spacing: 0.24em;
}

.brand-logo--glanta .brand-logo__name {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  letter-spacing: 0.04em;
}

.brand-logo--lufica .brand-logo__name {
  font-family: "Times New Roman", "Yu Mincho", serif;
  letter-spacing: 0.22em;
  font-size: clamp(0.9rem, 3.8vw, 1.05rem);
}

/* -------------------------------------------------------------------
   ロゴ画像が支給された場合の表示

   shops.json の logo に書いたパスへファイルを置くと、
   自動でこちら（画像）に切り替わります。
   ------------------------------------------------------------------- */

/* 【サイズの決め方】
   3ブランドのロゴは形の比率がまったく違います。
     CRAFY        … 横3.2倍（ロゴ＋英字タグライン）
     glänta       … 横1.7倍（筆記体で背が高い）
     Luficä bridal… 横9.5倍（横に長い1行）
   高さだけをそろえると Luficä が極端に長くなり、glänta が小さく見えます。
   そこで高さと幅の両方に上限を付け、先に当たったほうで止めています。 */
.brand-logo__image {
  display: block;
  max-height: clamp(26px, 7.5vw, 34px);
  max-width: clamp(118px, 34vw, 150px);
  width: auto;
  height: auto;
  /* 一覧では左寄せ、ブランド見出しでは中央（.brand-head 側で上書き） */
  margin-right: auto;
}

.brand-logo--lg .brand-logo__image {
  max-height: clamp(34px, 9.5vw, 44px);
  max-width: clamp(150px, 44vw, 200px);
}

/* glänta は筆記体で背が高いぶん横幅が出ないため、他より小さく見えます。
   高さの上限だけ少し上げて、見た目の大きさをそろえています。 */
.brand-logo--glanta .brand-logo__image {
  max-height: clamp(34px, 9.5vw, 44px);
}

.brand-logo--lg.brand-logo--glanta .brand-logo__image {
  max-height: clamp(44px, 12vw, 56px);
}

.brand-head .brand-logo__image {
  margin-inline: auto;
}

/* ブランド見出しのエリア（ステップ1・2の上部） */
.brand-head {
  padding: clamp(18px, 5.5vw, 26px) var(--space-page) 6px;
  text-align: center;
}

.brand-head--tight {
  padding-top: clamp(10px, 3.5vw, 16px);
}

.brand-head .brand-logo {
  margin-bottom: 0;
}

/* ブランド写真（Figmaではリング写真のカルーセル。やや横長） */
.brand-visual__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.brand-visual__placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg, #f3efec, #f3efec 10px, #e9e3de 10px, #e9e3de 20px
  );
  color: var(--c-text-weak);
  font-size: clamp(0.6875rem, 3vw, 0.8125rem);
  text-align: center;
  padding: 12px;
}

/* 写真下のカルーセルのドット（Figma準拠） */
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 2px;
}

.carousel-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8d1cb;
}

.carousel-dots span.is-current {
  background: var(--c-text-weak);
}


/* ===================================================================
   ステップ見出し（「1. メニューをご選択ください。」など）
   =================================================================== */

.step-title {
  font-size: clamp(0.95rem, 4.2vw, 1.1rem);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: var(--ls-title);
  margin-bottom: 18px;
}

/* 1行に収めたい見出し。字間を詰めて折り返しを防ぎます */
.step-title--nowrap {
  letter-spacing: 0.02em;
  font-size: clamp(0.875rem, 3.9vw, 1.05rem);
  white-space: nowrap;
}

.step-title--center {
  text-align: center;
}


/* ===================================================================
   メニュー行（サムネイル＋テキスト＋シェブロン）
   =================================================================== */

.menu-list {
  display: grid;
  gap: 10px;
}

/* 【2026-08-13 修正】左に正方形の画像、右にテキスト2行（名前＋特典1行）。
   ・カードの高さを画像（正方形）の大きさに合わせ、画像が上下いっぱいに収まります。
     （カードの上下パディングを無くし、画像を左端・全高に敷いています）
   ・はみ出しは切り抜き（トリミング）。
   ・画像が正方形で細いぶん右のテキスト幅に余裕があり、特典は1行に収まります。 */
.menu-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 0;   /* 丸角ではなく直角（クライアント指示 2026-08-13） */
  overflow: hidden;
  transition: background-color 0.15s;
}

.menu-row:hover,
.menu-row:focus-visible {
  background: var(--c-bg-soft);
}

/* 左の正方形画像（カードの高さ＝この画像の大きさ。上下いっぱいに敷く） */
.menu-row__thumb {
  flex: none;
  width: clamp(60px, 17vw, 72px);
  aspect-ratio: 1 / 1;   /* 正方形 */
  overflow: hidden;
  background: #f3efec;
}

.menu-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 正方形に切り抜き（トリミング） */
  display: block;
}

/* 右のテキスト（名前＋特典の2行）。画像の高さの中で縦中央に置く */
.menu-row__body {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 8px clamp(10px, 3vw, 14px);
}

.menu-row__name {
  display: block;
  font-size: clamp(0.8rem, 3.9vw, 0.92rem);
  letter-spacing: var(--ls-body);
  line-height: 1.4;
}

.menu-row__benefit {
  display: block;
  font-size: clamp(0.72rem, 3.3vw, 0.8rem);
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 2px;
}

/* シェブロン（>） */
.menu-row__arrow,
.shop-row__arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--c-text);
  border-right: 1.5px solid var(--c-text);
  transform: rotate(45deg);
}

.menu-row__arrow {
  align-self: center;
  margin-right: clamp(12px, 3.4vw, 16px);
}

.menu-list--lg {
  gap: 14px;
}

.menu-row--lg .menu-row__body {
  padding: clamp(14px, 4.4vw, 20px) clamp(10px, 3vw, 14px);
}

.menu-row--lg .menu-row__name,
.menu-row--lg .menu-row__benefit {
  font-size: clamp(0.875rem, 3.9vw, 1rem);
  line-height: 1.65;
}

.menu-row--lg .menu-row__arrow {
  width: 10px;
  height: 10px;
  border-width: 2px;
  margin-right: clamp(12px, 3.6vw, 18px);
}


/* ===================================================================
   店舗行（店舗名＋シェブロンのみ。Figma準拠）
   =================================================================== */

.shop-list {
  display: grid;
  gap: 10px;
}

.shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px clamp(12px, 4vw, 18px);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: background-color 0.15s;
}

.shop-row:hover,
.shop-row:focus-visible {
  background: var(--c-bg-soft);
}

.shop-row__name {
  font-size: clamp(0.875rem, 3.8vw, 0.9375rem);
  letter-spacing: 0.1em;
}

.shop-row--disabled {
  background: var(--c-bg-soft);
  color: var(--c-text-weak);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.shop-row--disabled:hover {
  background: var(--c-bg-soft);
}

.shop-row__note {
  font-size: clamp(0.6875rem, 3vw, 0.75rem);
  line-height: 1.65;
}

.shop-row__note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 現在地から最寄りを探す（2026-08-13 追加）--- */
.nearest {
  margin-bottom: 14px;
  text-align: center;
}

.btn--sm {
  min-height: 40px;
  padding: 8px 16px;
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
}

.btn__pin-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.nearest__status {
  margin-top: 8px;
  font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  line-height: 1.6;
}

.nearest__status--attention {
  color: #c0392b;
}

/* 最寄り店舗の強調とバッジ */
.shop-row--nearest {
  border-color: var(--c-accent-dark);
  box-shadow: 0 0 0 1px var(--c-accent-dark) inset;
}

.shop-row__nearest {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-accent-dark);
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  vertical-align: middle;
}


/* ===================================================================
   予約ページへの遷移画面（ステップ3）
   =================================================================== */

.redirect-keep {
  font-size: clamp(0.95rem, 4.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  text-decoration: underline;
  text-underline-offset: 5px;
  margin-bottom: clamp(12px, 4vw, 18px);
}

/* Figma の赤字注意文 */
.redirect-warn {
  color: #c0392b;
  font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: var(--ls-body);
  margin-bottom: clamp(18px, 6vw, 28px);
}

/* 遷移画面を縦3分割にして、案内を中央、ボタンを下に置く

   高さは body 側の1画面レイアウト（.page-redirect）から受け取ります。
   ここで min-height を決め打ちすると、ヘッダーやステップ表示の高さが
   変わったときに画面から溢れてしまうためです。 */
.redirect {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-block: clamp(14px, 4vw, 24px);
}

.redirect__center {
  /* 余白を伸ばして中央に配置する */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.redirect__foot {
  /* 下端に寄せる */
  margin-top: auto;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 中央配置は .redirect__center が担当するため、上下の余白は持たせない */
  margin: 0;
  color: var(--c-text-weak);
}

.loading__text {
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
  letter-spacing: 0.16em;
}

.loading__dots {
  display: inline-flex;
  gap: 6px;
}

.loading__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: loading-bounce 1.2s ease-in-out infinite;
}

.loading__dots span:nth-child(2) { animation-delay: 0.2s; }
.loading__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-bounce {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}


/* ===================================================================
   紹介コード表示
   =================================================================== */

.code-label {
  text-align: center;
  font-size: clamp(0.8125rem, 3.5vw, 0.875rem);
  color: var(--c-text-weak);
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.code-box {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(16px, 5vw, 22px) clamp(12px, 4vw, 18px);
  margin-top: 8px;
  text-align: center;
}

.code-box__code {
  /* 画面幅に応じて大きく。小型端末でもはみ出さない */
  font-size: clamp(1.75rem, 11vw, 2.5rem);
  font-weight: 500;
  letter-spacing: var(--ls-code);
  /* 数字と英字の見分けがつきやすいフォントを使う */
  font-family: var(--font-code);
  /* 長押しで選択・コピーできるようにする（コピーボタンが使えない環境向け） */
  user-select: all;
  -webkit-user-select: all;
  margin-bottom: 14px;
  line-height: 1.3;
  word-break: break-all;
}

.code-box__copy {
  min-height: 46px;
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
}

.code-box__fallback {
  margin-top: 10px;
}

/* 「この画面をスクリーンショットで保存してください。」（Figma準拠） */
.code-note {
  margin-top: 20px;
  font-size: clamp(0.875rem, 3.8vw, 0.9375rem);
  line-height: 1.85;
  letter-spacing: var(--ls-body);
  text-align: center;
}

/* 【2026-08-13 修正】左寄せ・1行目太字（クライアント指示） */
.code-note--alert {
  text-align: left;
  line-height: 1.7;
}

.code-note--alert strong {
  display: inline-block;
  margin-bottom: 6px;
  font-size: clamp(0.9375rem, 4vw, 1.0625rem);
  font-weight: 700;
}

/* 「この画面を保存する」ボタン */
.code-save {
  margin-top: 16px;
}

/* 端末側の都合で自動保存ができない場合に出る、長押し保存の案内 */
.code-save__fallback {
  margin-top: 16px;
  text-align: center;
}

.code-save__fallback img {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.code-meta {
  margin-top: 22px;
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  border-top: 1px solid var(--c-border);
}

.code-meta__row {
  display: flex;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--c-border);
}

.code-meta__row dt {
  flex: none;
  width: 6.5em;
  color: var(--c-text-weak);
}

.code-meta__row dd {
  flex: 1;
  min-width: 0;
}

.thanks-mark {
  text-align: center;
  font-size: clamp(2.25rem, 12vw, 3rem);
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: 14px;
}


/* ===================================================================
   フォーム
   =================================================================== */

.form-field {
  margin-bottom: clamp(20px, 6vw, 28px);
}

.form-label {
  display: block;
  font-size: clamp(0.875rem, 3.8vw, 0.9375rem);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-required {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #c0392b;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

.form-sublabel {
  display: block;
  font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  color: var(--c-text-weak);
  margin-bottom: 4px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 12px;
  /* 16px 未満だとスマホで入力時に自動ズームされるため固定 */
  font-size: 16px;
  border: 1px solid #c8c2bc;
  border-radius: var(--radius);
  background: #fff;
  /* iOSでの角丸・影を打ち消す */
  appearance: none;
  -webkit-appearance: none;
}

.form-select {
  /* 見た目を揃えるため矢印を自前で描く */
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-weak) 50%),
                    linear-gradient(135deg, var(--c-text-weak) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-col {
  flex: 1;
  min-width: 0;
}

.form-email {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-email__local {
  flex: 1 1 40%;
  min-width: 0;
}

.form-email__at {
  flex: none;
  color: var(--c-text-weak);
}

.form-email__domain {
  flex: 1 1 55%;
  min-width: 0;
}

.form-email__custom {
  margin-top: 10px;
}

.form-hint {
  font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  color: var(--c-text-weak);
  margin-top: 6px;
  line-height: 1.75;
}

.form-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
  cursor: pointer;
}

.form-agree input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--c-accent-dark);
}

.form-error {
  background: #fdecea;
  border: 1px solid #c0392b;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
  color: #96281b;
}

.form-error-msg {
  font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  color: #c0392b;
  margin-top: 6px;
}


/* -------------------------------------------------------------------
   未入力エラーの見せ方

   最初は何も出さず、送信しようとしたときだけ
   「赤囲い線 ＋ 赤文字」に変わります。
   ------------------------------------------------------------------- */

[data-field].is-error .form-input,
[data-field].is-error .form-select,
[data-field].is-error .time-select .form-select {
  border-color: #c0392b;
  /* 1pxのままだと赤が細く見えるので少し太くする */
  border-width: 1.5px;
  background: #fffafa;
}

[data-field].is-error .form-label,
[data-field].is-error .form-sublabel {
  color: #c0392b;
}

/* 項目4（日付・時刻）は横1行に並べる（Figma準拠） */
.form-datetime {
  display: flex;
  gap: 10px;
  align-items: center;
}

.form-datetime > .form-subfield {
  flex: 1 1 0;
  min-width: 0;
}



/* 同意チェックボックスは枠が無いので、囲みごと赤くする */
[data-field].is-error .form-agree {
  padding: 10px 12px;
  border: 1.5px solid #c0392b;
  border-radius: var(--radius);
  background: #fffafa;
}


/* -------------------------------------------------------------------
   入力させず表示だけする項目（ご予約された店舗）
   ------------------------------------------------------------------- */

/* Figma では他の入力欄と同じ枠なので、見た目もそろえます
   （入力できないことは、背景を少し落として示します） */
.form-static {
  padding: 12px;
  border: 1px solid #c8c2bc;
  border-radius: var(--radius);
  background: #faf8f7;
  font-size: 16px;
  line-height: 1.5;
}

.form-static__brand {
  display: block;
  font-size: clamp(0.6875rem, 3vw, 0.75rem);
  color: var(--c-text-weak);
  letter-spacing: var(--ls-title);
  margin-bottom: 1px;
}


/* -------------------------------------------------------------------
   日付欄（タップでカレンダー）
   ------------------------------------------------------------------- */

.form-date {
  position: relative;
}

.form-date__input {
  padding-right: 38px;
}

/* 端末標準のカレンダーアイコンは見た目がそろわないので隠し、自前のものを重ねる */
.form-date__input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 【2026-08-13 修正】カレンダーアイコンの位置・余白・大きさを調整（クライアント指示）
   少し小さく・右余白を詰め・色を濃くして視認性を上げています */
.form-date__icon {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--c-accent-dark);
  pointer-events: none;
}


/* -------------------------------------------------------------------
   時刻の選択（10分刻み）

   「時」と「分」のプルダウンを横に並べます。初期表示は --:-- です。
   iPhone ではプルダウンが画面下のドラム式で開くので、
   指でなぞって選ぶ操作感になります。
   ------------------------------------------------------------------- */

.time-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-select__col {
  flex: 1;
  min-width: 0;
}

.time-select__sep {
  flex: none;
  font-size: 18px;
  color: var(--c-text-weak);
}

/* ハニーポット（機械的な投稿を弾くための、人には見えない入力欄） */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 【クライアント指示 2026-08-09】
   メールアドレスと日時は、狭い画面でも横に並べたままにします。
   そのぶん余白を詰めて収まるようにしています。 */
@media (max-width: 359px) {
  .form-row,
  .form-email,
  .form-datetime {
    gap: 6px;
  }

  .form-input,
  .form-select {
    padding-inline: 8px;
  }

  .form-email__at {
    font-size: 0.875rem;
  }
}


/* ===================================================================
   エラー表示（?ref= が無効なときなど）
   =================================================================== */

.error-block {
  padding: clamp(28px, 9vw, 44px) var(--space-page);
  text-align: center;
}

.error-block__title {
  font-size: clamp(1rem, 4.4vw, 1.15rem);
  font-weight: 600;
  margin-bottom: 14px;
}

.error-block__text {
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
  color: var(--c-text-weak);
  line-height: 1.95;
}


/* ===================================================================
   規約ページ
   =================================================================== */

.terms {
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
}

.terms p {
  margin-bottom: 12px;
}

.terms__subheading {
  font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
  font-weight: 600;
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}

.terms__brand {
  font-weight: 600;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.terms__list {
  margin-bottom: 14px;
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  line-height: 1.9;
}

.terms__list li {
  padding-left: 1em;
  text-indent: -1em;
}

.terms__list li::before {
  content: "・";
}

/* 制作用のメモ。公開前に削除すること */
.terms__note {
  background: #fffbe6;
  border: 1px dashed #b89400;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  color: #7a5c00;
  margin-bottom: 14px !important;
}


/* ===================================================================
   フッター
   =================================================================== */

/* TOPを1画面に収めるため、高さを詰めてスリムにしています */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: clamp(10px, 3vw, 13px) var(--space-page);
  /* iPhone のホームバー領域を避ける */
  padding-bottom: calc(clamp(10px, 3vw, 13px) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
  line-height: 1.5;
}

.site-footer__links {
  margin-bottom: 4px;
}

.site-footer__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__copyright {
  font-size: clamp(0.625rem, 2.6vw, 0.6875rem);
  opacity: 0.85;
  letter-spacing: 0.02em;
}


/* ===================================================================
   フォーカス表示（キーボード操作時に現在位置が分かるようにする）
   =================================================================== */

:focus-visible {
  outline: 2px solid var(--c-accent-dark);
  outline-offset: 2px;
}


/* ===================================================================
   開発用マーカー（未確定箇所を目立たせる）
   公開前に必ず消すこと
   =================================================================== */

.todo-marker {
  display: inline-block;
  background: #ffec3d;
  color: #7a5c00;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px dashed #b89400;
}


/* ===================================================================
   タブレット・PC（481px 以上）

   このサイトはスマホ前提のため、幅を広げずに中央へ寄せます。
   周囲を薄い色にして、コンテンツの範囲が分かるようにします。
   =================================================================== */

@media (min-width: 481px) {
  body {
    background: var(--c-bg-soft);
  }

  .site-header {
    border-top: 1px solid var(--c-border);
  }

  .site-header,
  .site-main {
    border-inline: 1px solid var(--c-border);
  }

  /* 画面が高いときも縦に間延びしないよう、上下に余白を作る */
  .site-header {
    margin-top: 24px;
  }

  .site-footer {
    margin-bottom: 24px;
  }
}


/* ===================================================================
   横向き・低い画面（キーボード表示時など）
   =================================================================== */

@media (max-height: 480px) and (orientation: landscape) {
  .hero__image,
  .hero__placeholder {
    /* 横向きでヒーローが画面を占領しないよう抑える */
    aspect-ratio: 16 / 4;
  }

  .site-main {
    min-height: 0;
  }
}


/* ===================================================================
   印刷（紹介コードを紙に残したい場合）
   =================================================================== */

@media print {
  body {
    background: #fff;
  }

  .site-footer,
  .btn,
  .btn-stack,
  .terms__note,
  .loading {
    display: none !important;
  }

  .site-header,
  .site-main {
    max-width: none;
    border: 0;
    margin: 0;
  }

  .code-box {
    border: 2px solid #000;
  }
}


/* ===================================================================
   「動きを減らす」設定をしている利用者への配慮
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .loading__dots span {
    animation: none;
    opacity: 0.6;
  }
}


/* -------------------------------------------------------------------
   完了画面を1画面に収めるための詰め（クライアント指示 2026-08-09）

   小さい端末（375x667）でもスクロールなしで全部見えるよう、
   この画面だけ余白を詰めています。
   ------------------------------------------------------------------- */

.page-redirect .stepper,
.page-code .stepper {
  padding-block: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px);
}

.page-code .code-label {
  margin-top: 0;
}

.page-code .code-box {
  padding: clamp(12px, 3.5vw, 16px) clamp(10px, 3vw, 14px);
}

.page-code .code-box__code {
  margin-bottom: 10px;
}

.page-code .code-note {
  margin-top: 14px;
  line-height: 1.6;
}

.page-code .code-save {
  margin-top: 12px;
}

.page-code .code-meta {
  margin-top: 14px;
}

.page-code .code-meta__row {
  padding-block: 7px;
}


/* 予約遷移の画面も1画面に収める（クライアント指示 2026-08-09） */

.page-redirect .stepper__name {
  margin-bottom: clamp(10px, 3vw, 12px);
}

.page-redirect .step-title {
  margin-bottom: 12px;
}

.page-redirect .redirect-keep {
  margin-bottom: 10px;
}

.page-redirect .redirect-warn {
  margin-bottom: 14px;
}

.page-redirect .redirect__center {
  padding-block: 10px;
}

.page-redirect .redirect-status {
  line-height: 1.6;
}

/* 完了画面をあと少し詰める（375x667 の実測に合わせた微調整） */

.page-code .code-box__code {
  font-size: clamp(1.5rem, 9.5vw, 2.25rem);
  margin-bottom: 8px;
}

.page-code .code-box__copy {
  min-height: 42px;
}

.page-code .code-note {
  margin-top: 10px;
  font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
}

.page-code .code-meta {
  margin-top: 10px;
}

.page-code .code-meta__row {
  padding-block: 6px;
}

/* 予約遷移の画面は、ボタンが増えても1画面に収まるように詰める
   （予約ページを開くと「次へ進む」と残り時間が増えるため） */

.page-redirect .redirect__center {
  padding-block: 4px;
}

.page-redirect .redirect-countdown {
  margin-bottom: 8px;
  line-height: 1.5;
}

.page-redirect .btn {
  min-height: 48px;
}

.page-redirect .btn-stack > * + * {
  margin-top: 8px;
}

.page-redirect .stepper {
  padding-block: 10px;
}

/* あと少しの詰め（375x667 の実測に合わせた微調整） */

.page-redirect .step-title {
  margin-bottom: 8px;
}

.page-redirect .redirect-keep {
  margin-bottom: 8px;
}

.page-redirect .redirect-warn {
  margin-bottom: 10px;
}

/* -------------------------------------------------------------------
   予約ページを開くまでの進捗バー

   「止まっているのでは」と思わせないための表示です。
   待ち時間ちょうどで満たされます（時間は JavaScript から渡します）。
   ------------------------------------------------------------------- */

.reserve-progress {
  width: 100%;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: var(--c-border);
  overflow: hidden;
}

.reserve-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-accent-dark);
}

.reserve-progress.is-running .reserve-progress__bar {
  animation: reserve-progress-fill var(--reserve-delay, 2s) linear forwards;
}

@keyframes reserve-progress-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* 動きを減らす設定の端末では、アニメーションの代わりに
   バーを出したままにして「処理中」であることだけ示します */
@media (prefers-reduced-motion: reduce) {
  .reserve-progress.is-running .reserve-progress__bar {
    animation: none;
    width: 100%;
  }
}

/* 自動で開けなかったときは、案内とボタンを目立たせる */

.redirect-status--attention {
  color: var(--c-alert-text);
  font-weight: 600;
}

.btn--accent.is-waiting {
  animation: reserve-btn-pulse 1.6s ease-in-out 3;
}

@keyframes reserve-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 150, 140, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(168, 150, 140, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--accent.is-waiting { animation: none; }
}