@charset "UTF-8";
/* =========================================================================
   common-form.css
   ログイン後の各画面で共有できるフォーム / 概要テーブル / 確定ボタンの
   共通コンポーネント。
   ※ レイアウト・カード・見出しの土台は mypage_2.css の
      .main-layout / .main / .point-head / .point-container / .point-title
      を共有し、ここでは「ラベル＋値の一覧表」「入力欄」「戻る/次へ」だけを定義。
   デザイントークン（mypage_2.css と統一）
     primary blue : #59b8e8
     light blue bg: #f0faff
     text dark    : #1f2937
     text muted   : #4b5563 / #6b7280
     border light : #f3f4f6 / #e5e7eb
     accent red   : #ef4444
   ========================================================================= */

:root {
  --form-blue: #59b8e8;
  --form-blue-soft: #f0faff;
  --form-text: #1f2937;
  --form-muted: #6b7280;
  --form-border: #e5e7eb;
  --form-red: #ef4444;
}

/* 確認系画面の最大幅（購入画面の .point-layout=64rem よりやや絞る） */
.confirm-layout {
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
  width: 100%;
  font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   ラベル＋値の一覧表（概要・入力フォームを 1 枚に集約）
   ------------------------------------------------------------------------- */
.confirm-summary {
  border: 1px solid var(--form-border);
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  text-align: left;
}

.confirm-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f3f4f6;
}

/* 一覧の最終行は下線を消す（行が toggle ラッパーで包まれる場合も考慮し
   :last-child と「直後に行が無い」両方を許容） */
.confirm-summary > .confirm-row:last-child,
.confirm-summary > div:last-child > .confirm-row {
  border-bottom: 0;
}

.confirm-label {
  flex: 0 0 38%;
  max-width: 38%;
  padding: 0.95rem 1.25rem;
  background-color: #f9fafb;
  font-weight: 700;
  color: var(--form-text);
  display: flex;
  align-items: center;
}

/* 必須マーク（英語ページ向けに赤アスタリスク） */
.confirm-label.required::after {
  content: "*";
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--form-red);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.confirm-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.95rem 1.25rem;
  color: var(--form-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* 金額・ポイントの強調 */
.confirm-value .confirm-total {
  font-weight: 700;
  color: var(--form-red);
  white-space: nowrap;
}

.confirm-value.confirm-point {
  font-weight: 700;
  color: var(--form-blue);
}

/* 入力欄を含む値セルは縦並び（入力＋エラー） */
.confirm-value--field {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

/* 複数行テキスト（振込先など）は上揃え＆改行を保持 */
.confirm-value--top {
  align-items: flex-start;
  line-height: 1.7;
}

/* 複数ラジオ等を縦に積みたい行 */
.confirm-row--block .confirm-value {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.confirm-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.confirm-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-weight: 500;
  color: var(--form-text);
  cursor: pointer;
}

.confirm-radio input[type="radio"] {
  height: 1rem;
  width: 1rem;
  accent-color: var(--form-blue);
}

.confirm-note-text {
  font-size: 0.9rem;
  color: var(--form-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   入力欄（テキスト / セレクト）の共通スタイル
   ------------------------------------------------------------------------- */
.confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #fff;
  color: var(--form-text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.confirm-input::placeholder {
  color: #9ca3af;
}

.confirm-input:focus {
  outline: none;
  border-color: var(--form-blue);
  box-shadow: 0 0 0 3px rgba(89, 184, 232, 0.18);
}

/* セレクト用の矢印アイコン */
select.confirm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
}

/* テキストエリア */
textarea.confirm-input {
  min-height: 6rem;
  line-height: 1.6;
  resize: vertical;
}

/* 日付入力（カレンダーアイコンの位置調整） */
input[type="date"].confirm-input {
  min-height: 2.85rem;
}

/* 郵便番号 + 検索ボタンの横並び */
.confirm-inline {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.confirm-inline .confirm-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.confirm-inline .confirm-zip-btn {
  flex: 0 0 auto;
  border: 1px solid var(--form-blue);
  background-color: #fff;
  color: var(--form-blue);
  border-radius: 12px;
  padding: 0 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.confirm-inline .confirm-zip-btn:hover {
  background-color: var(--form-blue);
  color: #fff;
}

/* バリデーションエラー（.error-box は既存 style.css を利用。最低限の見た目を担保） */
.confirm-value .error-box {
  color: var(--form-red);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

/* 補足テキスト（国名が無い場合の案内など） */
.confirm-hint {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--form-muted);
}

/* -------------------------------------------------------------------------
   戻る / 次へ ボタン列
   ------------------------------------------------------------------------- */
.confirm-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-width: 120px;
}

.confirm-btn--back {
  background-color: #fff;
  color: var(--form-muted) !important;
  border: 1px solid #d1d5db;
}

.confirm-btn--back:hover {
  background-color: #f9fafb;
  color: var(--form-text) !important;
  text-decoration: none;
}

.confirm-btn--next {
  background-color: var(--form-blue);
  color: #fff !important;
  border: 1px solid var(--form-blue);
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
}

.confirm-btn--next:hover {
  opacity: 0.92;
  color: #fff !important;
  text-decoration: none;
}

.confirm-btn i {
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   クレジットカード決済（PayPal Hosted Fields）用
   ※ #card-number / #expiration-date / #cvv は PayPal が iframe を差し込む
      コンテナ。入力欄と同じ見た目になるよう枠と高さを付与する。
   ------------------------------------------------------------------------- */
.confirm-layout .confirm-card-heading {
  font-weight: 700;
  color: var(--form-text);
  font-size: 1.15rem;
  margin: 2rem 0 1.25rem;
  text-align: left;
}

.confirm-hosted-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 2.85rem !important;
  min-height: 0 !important;
  padding: 0 0.85rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* PayPal が差し込む iframe を枠いっぱいに収める（既定150pxによる崩れ防止） */
.confirm-hosted-field iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

/* PayPal がフォーカス/エラー時に付与するクラス、および iframe フォーカス */
.confirm-hosted-field:focus-within,
.confirm-hosted-field.paypal-hosted-fields-focused {
  border-color: var(--form-blue);
  box-shadow: 0 0 0 3px rgba(89, 184, 232, 0.18);
}

.confirm-hosted-field.paypal-hosted-fields-invalid {
  border-color: var(--form-red);
}

.confirm-cards-img {
  height: 26px;
  width: auto;
  margin-top: 0.6rem;
  align-self: flex-start;
}

.confirm-powered {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--form-muted);
}

/* 全幅（中央寄せ）ボタン：カード決済の確定ボタン用 */
.confirm-btn--full {
  display: flex;
  width: 100%;
  max-width: 340px;
  margin: 1.5rem auto 0;
}

.confirm-payment-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--form-muted);
  line-height: 1.6;
}

div#card-number {
    padding: 0;
}

/* -------------------------------------------------------------------------
   カード情報入力パネル（カード会社提供フォーム風）
   ラベルを入力欄の上に配置し、有効期限とCVVを横並びにした
   決済フォームの定番レイアウト。装飾は既存トークンの範囲でシンプルに。
   ------------------------------------------------------------------------- */
.card-form {
  margin-top: 1.75rem; /* 上の購入内容パネルとの間隔 */
  border: 1px solid var(--form-border);
  border-radius: 20px;
  background-color: #fff;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: left;
}

/* 見出し行：タイトル（鍵アイコン付き）＋ 対応ブランドロゴ */
.card-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* パネル内タイトルは confirm-card-heading の余白を打ち消す */
.confirm-layout .card-form-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.card-form-title .fa-lock {
  color: var(--form-blue);
  font-size: 1rem;
}

/* ヘッダ内のブランドロゴは余白なしで右寄せ */
.card-form-header .confirm-cards-img {
  margin: 0;
  align-self: center;
}

/* 項目（ラベル＋入力欄） */
.card-form-field {
  margin-bottom: 1.1rem;
}

.card-form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--form-text);
}

/* 有効期限・セキュリティコードの横並び */
.card-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.card-form-grid .card-form-field {
  margin-bottom: 0.5rem;
}

/* ラベルは下揃え（1行/2行が混在しても入力欄側の基準を揃える） */
.card-form-grid .card-form-label {
  display: flex;
  align-items: flex-end;
}

/* CVVのラベルが2行に折り返しても入力欄の縦位置が揃うよう、
   ラベル行・入力行・補足行をサブグリッドで2カラム間で共有する */
@supports (grid-template-rows: subgrid) {
  .card-form-grid > .card-form-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3; /* ラベル / 入力欄 / 補足 の3行分 */
    align-content: start;
  }
}

/* サブグリッド非対応の古いブラウザ向けフォールバック：
   折り返しが起きるスマホ幅ではラベルに2行分の高さを確保する */
@supports not (grid-template-rows: subgrid) {
  @media (max-width: 480px) {
    .card-form-grid .card-form-label {
      min-height: 3.2em; /* line-height 1.6 × 2行 */
    }
  }
}

/* CVV の補足 */
.card-form-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--form-muted);
  line-height: 1.5;
}

/* 暗号化の注記（鍵アイコン付き） */
.card-form-secure-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem 0 0 !important;
  font-size: 0.8rem;
  color: var(--form-muted);
  line-height: 1.6;
  text-align: left;
}

.card-form-secure-note .fa-lock {
  color: var(--form-blue);
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

/* パネル内の Powered by は上余白を詰める */
.card-form .confirm-powered {
  margin-top: 0.5rem;
  font-weight: bold;
}

/* スマホ：パネルの左右余白を少し詰める */
@media (max-width: 480px) {
  .card-form {
    padding: 1.25rem 1rem 1rem;
  }

  .card-form-grid {
    gap: 0.75rem;
  }
}

/* -------------------------------------------------------------------------
   PayPal ホスト型決済（order_paypal）の iframe
   ------------------------------------------------------------------------- */
.confirm-paypal-iframe {
  width: 100%;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background-color: #f9fafb;
}

/* -------------------------------------------------------------------------
   購入完了（order_finish）
   ------------------------------------------------------------------------- */
.confirm-finish {
  text-align: center;
  padding: 1.5rem 1rem;
}

.confirm-finish-icon {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  background-color: var(--form-blue-soft);
  color: var(--form-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
}

.confirm-finish p {
  margin: 0.4rem 0;
  color: var(--form-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.confirm-finish p:first-of-type {
  color: var(--form-text);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

/* 成功アラート（.alert .alert-success は既存 style.css を利用）を中央寄せ＆余白調整 */
.confirm-layout .alert-success {
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   振込申請完了（transfer_finish）：完了メッセージ＋振込先口座ボックス
   ------------------------------------------------------------------------- */
.confirm-complete {
  text-align: center;
}

.confirm-complete-msg {
  margin: 1rem 0 0;
  color: var(--form-text);
  font-size: 1rem;
  line-height: 1.9;
}

.confirm-bank-box {
  margin-top: 1.75rem;
  border: 1px solid var(--form-border);
  border-radius: 16px;
  background-color: #f9fafb;
  padding: 1.5rem 1.75rem;
  color: var(--form-text);
  font-size: 0.95rem;
  line-height: 1.9;
  word-break: break-word;
}

.confirm-bank-box b {
  color: var(--form-text);
}

/* -------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .confirm-row {
    flex-direction: column;
  }

  .confirm-label {
    flex-basis: auto;
    max-width: 100%;
    padding-bottom: 0.25rem;
  }

  .confirm-value {
    padding-top: 0.5rem;
  }
}

/* =========================================================================
   スケジュールから予約（reservation_schedule）
   ----------------------------------------------------------------------
   ダッシュボード（mypage_2.css の .main-layout / .main / .point-layout /
   .point-container / .point-head）とポイント購入画面のカード意匠を踏襲。
   レイアウト・カード・見出し・チェックリストは mypage_2.css を共有し、
   ここでは「現在時刻バー」「日付ナビ」「時間帯タブ」「予約テーブル」
   「まとめて予約ボタン」「予約確認ダイアログ」だけを定義する。
   既存 style.css の .sched-nav / .sched-table 等は .reserve-sched 配下で
   上書きするため、他画面の旧デザインには影響しない。
   ========================================================================= */

/* スケジュール画面はフォーム系よりやや広め（購入画面と同じ 64rem 基準） */
.reserve-sched {
  text-align: left;
}

/* バリデーションエラー（コントローラが返す HTML をそのまま内包） */
.reserve-errors {
  margin-bottom: 1.5rem;
}
.reserve-errors .alert {
  border-radius: 14px;
}

/* -------------------------------------------------------------------------
   現在時刻バー
   ------------------------------------------------------------------------- */
.reserve-clock {
  margin-bottom: 1.5rem;
}
.reserve-clock-now {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--form-text);
  white-space: nowrap;
}
.reserve-clock-now .material-symbols-outlined {
  font-size: 1.35rem;
  color: var(--form-blue);
}
.reserve-clock-label {
  font-size: 0.95rem;
  color: var(--form-text);
}
.reserve-clock-time {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.reserve-clock-note {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--form-muted);
  line-height: 1.6;
}
.reserve-clock-note a {
  color: var(--form-blue);
  font-weight: 600;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   予約カード（.point-container を流用しつつ余白を最適化）
   ------------------------------------------------------------------------- */
.reserve-card {
  text-align: left;
}

/* -------------------------------------------------------------------------
   日付ナビゲーション（mypage_2.css の lesson-calendar-* を流用）
   ------------------------------------------------------------------------- */
.reserve-date-head {
  margin-bottom: 1.75rem;
  padding: 0;
}
/* PC・タブレット：日付は左、＜今日＞トグルは右寄せ */
.reserve-date-nav {
  width: 100%;
  justify-content: space-between;
}
.reserve-date {
  display: inline-block;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--form-text);
  white-space: nowrap;
}
.reserve-date .yr {
  font-size: 1.15rem;
  font-weight: 700;
}
.reserve-date .num {
  color: var(--form-text);
  font-size: 1.9rem;
}
.reserve-date .wd {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--form-text);
}
/* トグル内の無効ボタン */
.reserve-date-nav .lesson-calendar-toggle .arrow.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  background-color: transparent;
}
.reserve-date-nav .lesson-calendar-toggle .arrow .material-symbols-outlined {
  font-size: 1.35rem;
}
.reserve-date-nav .lesson-calendar-toggle .arrow:not(.is-disabled):hover {
  color: var(--form-blue);
}
.reserve-date-nav .lesson-calendar-toggle .text:hover {
  color: var(--form-blue);
}

/* -------------------------------------------------------------------------
   時間帯タブ（旧 .sched-nav を上書きしてセグメントコントロール化）
   ------------------------------------------------------------------------- */
.reserve-sched .sched-nav {
  width: 100%;
  margin: 0 0 1.75rem;
  padding: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  background-color: #f3f4f6;
  border-radius: 16px;
  font-size: 1rem;
}
.reserve-sched .sched-nav li {
  display: block;
  flex: 1 1 0;
  min-width: 7rem;
  width: auto;
  padding: 0;
  list-style: none;
}
.reserve-sched .sched-nav a.timezone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.55rem 0.5rem;
  border-radius: 12px;
  background-color: transparent;
  color: var(--form-muted);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transition: all 0.15s ease;
}
.reserve-sched .sched-nav a.timezone .tz-name {
  font-size: 1rem;
}
.reserve-sched .sched-nav a.timezone .tz-time {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.85;
}
.reserve-sched .sched-nav a.timezone:hover {
  background-color: #fff;
  color: var(--form-text);
  text-decoration: none;
}
.reserve-sched .sched-nav li.on a.timezone {
  background-color: #2c67cc;
  color: #fff;
  box-shadow: 0 6px 16px rgba(44, 103, 204, 0.35);
}

/* -------------------------------------------------------------------------
   時間帯セクション見出し
   ------------------------------------------------------------------------- */
.reserve-sched h3.s-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--form-text);
  border-bottom: 1px solid var(--form-border);
}
.reserve-sched h3.s-title .material-symbols-outlined {
  font-size: 1.4rem;
  color: var(--form-blue);
}

/* -------------------------------------------------------------------------
   予約テーブル（旧 .sched-table を上書き）
   ------------------------------------------------------------------------- */
.reserve-box {
  margin-bottom: 0.5rem;
}
.reserve-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 0.5rem;
}
.reserve-sched .sched-table.reserve-table {
  width: 100%;
  margin-bottom: 0;
  font-size: 1rem;
  border-collapse: separate;
  border-spacing: 0;
}
.reserve-sched .sched-table.reserve-table > thead > tr > th {
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--form-muted);
  text-align: left;
  border-bottom: 1px solid var(--form-border);
  white-space: nowrap;
}
.reserve-sched .sched-table.reserve-table > thead > tr > th:last-child,
.reserve-sched .sched-table.reserve-table > tbody > tr > td.link {
  text-align: right;
}
.reserve-sched .sched-table.reserve-table > tbody > tr {
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* ホバー背景はマウス操作端末のみ（タッチ端末で選択解除後に色が残るのを防ぐ） */
@media (hover: hover) and (pointer: fine) {
  .reserve-sched .sched-table.reserve-table > tbody > tr:hover {
    background-color: var(--form-blue-soft);
  }
}
.reserve-sched .sched-table.reserve-table > tbody > tr.sched_select {
  background-color: #e8f6fe;
  box-shadow: inset 3px 0 0 var(--form-blue);
}
.reserve-sched .sched-table.reserve-table > tbody > tr > td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle !important;
  border: 0;
}
/* 開始時間 */
.reserve-sched .sched-table.reserve-table td.date {
  width: 6.5rem;
  padding-left: 0.9rem !important;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--form-text);
  text-align: left;
}
/* 講師 */
.reserve-sched .sched-table.reserve-table .teacher-box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.reserve-sched .sched-table.reserve-table .teacher-box .photo {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  margin: 0;
  float: none;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f3f4f6;
}
.reserve-sched .sched-table.reserve-table .teacher-box .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reserve-sched .sched-table.reserve-table .teacher-box .name {
  display: block;
  font-weight: 600;
  color: var(--form-blue);
}
.reserve-sched .sched-table.reserve-table .teacher-box .name a {
  color: var(--form-blue);
  font-weight: 700;
}
.reserve-sched .sched-table.reserve-table .teacher-box .name a:hover {
  color: var(--form-blue);
  text-decoration: underline;
}
/* ポイント */
.reserve-sched .sched-table.reserve-table td.point {
  width: 7rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--form-text);
  text-align: left;
  white-space: nowrap;
}
.reserve-sched .sched-table.reserve-table td.point .pt-unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--form-text);
  margin-left: 0.1rem;
}
/* 予約ボタン */
.reserve-sched .sched-table.reserve-table td.link {
  width: 9rem;
}
.reserve-sched .sched-table.reserve-table .go_reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  border-radius: 10px;
  border: 1px solid #cce5f1;
  background-color: #fff;
  color: var(--form-blue);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.reserve-sched .sched-table.reserve-table > tbody > tr.sched_select .go_reserve {
  background-color: var(--form-blue);
  border-color: var(--form-blue);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(89, 184, 232, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  .reserve-sched .sched-table.reserve-table .go_reserve:hover {
    background-color: var(--form-blue);
    border-color: var(--form-blue);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(89, 184, 232, 0.28);
  }
}
/* 空き無しメッセージ */
.reserve-sched .sched-table.reserve-table td.reserve-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--form-muted);
  font-size: 0.95rem;
  cursor: default;
}
.reserve-sched .sched-table.reserve-table > tbody > tr.reserve-empty-row {
  cursor: default;
}
.reserve-sched .sched-table.reserve-table > tbody > tr.reserve-empty-row:hover {
  background-color: transparent;
}

/* -------------------------------------------------------------------------
   まとめて予約ボタン
   ------------------------------------------------------------------------- */
.reserve-bulk {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.reserve-bulk #block_booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.6rem;
  border-radius: 9999px;
  background-color: var(--form-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
  transition: all 0.15s ease;
}
.reserve-bulk #block_booking .material-symbols-outlined {
  font-size: 1.2rem;
}
.reserve-bulk #block_booking:hover {
  opacity: 0.92;
  text-decoration: none;
}
.reserve-bulk #block_booking.disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* 注意事項（points-list を流用、上下余白だけ調整） */
.reserve-notes {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   予約確認ダイアログ（#Overlay）
   ※ #Overlay / .bg-overlay は汎用挙動。ダイアログ本体は .reserve-dialog で
     スコープし、他画面のダイアログに影響しないようにする。
   ------------------------------------------------------------------------- */
#Overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
}
#Overlay .bg-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(17, 24, 39, 0.55);
}
.reserve-dialog {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 30rem;
  background: #fff;
  border-radius: 20px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.reserve-dialog .dialog-header {
  padding: 1.5rem 1.5rem 0;
}
.reserve-dialog .dialog-header h3 {
  margin: 0;
  padding-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--form-text);
  border-bottom: 1px solid var(--form-border);
}
.reserve-dialog .dialog-inner {
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  max-height: calc(100vh - 16rem);
}
.reserve-dialog #confirm {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reserve-dialog #confirm li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  background-color: var(--form-blue-soft);
  color: var(--form-text);
  font-size: 0.95rem;
}
.reserve-dialog #confirm li + li {
  margin-top: 0.5rem;
}
.reserve-dialog #confirm li::before {
  content: "schedule";
  font-family: 'Material Symbols Outlined';
  font-size: 1.1rem;
  color: var(--form-blue);
  margin-right: 0;
}
.reserve-dialog #cancel-warn {
  margin: 1rem 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background-color: #fef2f2;
  color: var(--form-red);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
}
.reserve-dialog #errors {
  margin: 1rem 0 0;
}
.reserve-dialog #errors .alert {
  border-radius: 12px;
  margin: 0;
}
.reserve-dialog .dialog-footer {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
}
.reserve-dialog .dialog-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.7rem 1.6rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reserve-dialog .dialog-footer #confirm-ok {
  background-color: var(--form-blue);
  color: #fff;
  border: 1px solid var(--form-blue);
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
}
.reserve-dialog .dialog-footer #confirm-ok:hover {
  opacity: 0.92;
  text-decoration: none;
}
.reserve-dialog .dialog-footer .btn-default {
  background-color: #fff;
  color: var(--form-muted);
  border: 1px solid #d1d5db;
}
.reserve-dialog .dialog-footer .btn-default:hover {
  background-color: #f9fafb;
  color: var(--form-text);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 日付見出し・ナビ */
  .reserve-date .yr,
  .reserve-date .wd {
    font-size: 1.05rem;
  }
  .reserve-date .num {
    font-size: 1.7rem;
  }
  .reserve-date-nav {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .reserve-date-nav .lesson-calendar-toggle .arrow {
    padding: 0.4rem 0.6rem;
  }
  .reserve-date-nav .lesson-calendar-toggle .text {
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
  }

  /* 時間帯タブ：オリジナル同様に大きめのタイルを3列グリッドで配置 */
  .reserve-sched .sched-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .reserve-sched .sched-nav li {
    min-width: 0;
    width: auto;
  }
  .reserve-sched .sched-nav a.timezone {
    min-height: 3.4rem;
    padding: 0.6rem 0.4rem;
  }

  /* 表示幅を確保：カード左右の余白を詰め、テーブルをカード端まで広げる */
  .reserve-sched .point-container.reserve-card {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .reserve-table-wrap {
    margin-left: -0.4rem;
    margin-right: -0.4rem;
  }

  /* セクション見出し */
  .reserve-sched h3.s-title {
    font-size: 1.1rem;
  }

  /* テーブル */
  .reserve-sched .sched-table.reserve-table > thead > tr > th {
    padding: 0.5rem 0.35rem;
    font-size: 0.85rem;
  }
  .reserve-sched .sched-table.reserve-table > tbody > tr > td {
    padding: 0.85rem 0.35rem;
  }
  .reserve-sched .sched-table.reserve-table td.date {
    width: 3rem;
    padding-left: 0.4rem !important;
    font-size: 1.05rem;
  }
  .reserve-sched .sched-table.reserve-table td.teacher {
    width: auto;
  }
  .reserve-sched .sched-table.reserve-table .teacher-box {
    gap: 0.45rem;
  }
  .reserve-sched .sched-table.reserve-table .teacher-box .photo {
    width: 56px;
    height: 56px;
  }
  /* 名前が長くても折り返してボタンが切れないようにする */
  .reserve-sched .sched-table.reserve-table .teacher-box .name {
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .reserve-sched .sched-table.reserve-table td.point {
    width: 3.3rem;
    font-size: 1.05rem;
  }
  .reserve-sched .sched-table.reserve-table td.point .pt-unit {
    font-size: 0.75rem;
  }
  /* 予約ボタン列は固定幅で確保し、見切れないようにする */
  .reserve-sched .sched-table.reserve-table td.link {
    width: 4.4rem;
    padding-right: 0.4rem !important;
    white-space: nowrap;
  }
  .reserve-sched .sched-table.reserve-table .go_reserve {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  /* まとめて予約 */
  .reserve-bulk {
    justify-content: center;
  }
  .reserve-bulk #block_booking {
    width: 100%;
    min-height: 3rem;
    font-size: 1.05rem;
  }
}

/* =========================================================================
   ご利用状況 / ポイント履歴（point_history）
   ----------------------------------------------------------------------
   レイアウト・カード・見出しは mypage_2.css（.main-layout / .main /
   .point-layout / .point-container / .point-title）を共有し、フォーム行は
   本ファイル上部の .confirm-summary / .confirm-row / .confirm-label /
   .confirm-value / .confirm-input / .confirm-btn を流用する。
   ここでは「プラン名」「履歴テーブル」「期間入力」など本画面固有の
   見た目だけを .history-page 配下にスコープして定義する。
   ========================================================================= */

.history-page {
  text-align: left;
}

/* 現在のプラン名（ポイントを強調） */
.history-page .history-plan-name {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--form-text);
}
.history-plan-point {
  margin-left: 0.6rem;
  color: var(--form-blue);
}

/* 入力欄は幅広カード内で間延びしないよう適度な幅に抑える */
.history-card .confirm-input {
  max-width: 24rem;
}

/* 名前・内容など単独入力は他の入力欄と同じ柔らかい枠（薄グレー・角丸12px）に統一。
   外部CSSに上書きされても勝てるよう詳細度を上げ、直下の入力のみを対象にして
   期間（.history-daterange 内の枠なし入力）には影響させない。 */
.history-card .confirm-value > .confirm-input {
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.history-card .confirm-value > .confirm-input:focus {
  border-color: var(--form-blue);
  box-shadow: 0 0 0 3px rgba(89, 184, 232, 0.18);
  outline: none;
}

/* カード内のラベルは見出し＋補足を縦に積む */
.history-card .confirm-summary {
  margin-bottom: 1.5rem;
}
.history-card .confirm-label {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
}
.history-card .confirm-label span {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--form-muted);
}

/* プラン操作ボタン列のアイコン */
.history-plan-actions .confirm-btn i {
  margin-right: 0.1rem;
}

/* 補足テキスト類（.main-layout p { margin:0 } を上書きするため詳細度を上げる） */
.history-page .history-note {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--form-muted);
  line-height: 1.7;
}
.history-page .history-period {
  margin: 0.75rem 0 0;
  text-align: right;
  font-size: 0.85rem;
  color: var(--form-muted);
}
.history-notes {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--form-muted);
  line-height: 1.8;
}
.history-page .history-notes p {
  margin: 0 0 0.5rem;
}
.history-page .history-notes p:last-child {
  margin-bottom: 0;
}
.history-page .history-empty {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--form-muted);
}

/* ページネーション（layouts.pagination-get）の中央寄せ＋余白 */
.history-pager {
  margin: 0 0 1.25rem;
  text-align: center;
}
.history-pager:last-of-type {
  margin: 1.25rem 0 0;
}

/* -------------------------------------------------------------------------
   ポイント履歴テーブル（旧 .p-histry-table を上書き）
   ------------------------------------------------------------------------- */
.history-page .p-histry-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}
.history-page .p-histry-table > thead > tr > th {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--form-muted);
  text-align: left;
  border-bottom: 1px solid var(--form-border);
  white-space: nowrap;
}
.history-page .p-histry-table > tbody > tr {
  border-bottom: 1px solid #e5e7eb;
}
.history-page .p-histry-table > tbody > tr:nth-child(even) {
  background-color: #f7fafc;
}
.history-page .p-histry-table > tbody > tr > td {
  padding: 0.85rem 0.75rem;
  vertical-align: middle !important;
  border: 0;
  color: var(--form-text);
}
.history-page .p-histry-table .h-date {
  width: 13rem;
  white-space: nowrap;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.history-page .p-histry-table .h-detail {
  font-weight: 400;
}
.history-page .p-histry-table .h-detail .h-detail-text {
  color: var(--form-text);
}
/* 領収書ボタン（右寄せ） */
.history-page .p-histry-table .btn_receipt {
  float: right;
  margin-left: 1rem;
}
.history-page .p-histry-table .btn_receipt a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #cce5f1;
  background-color: #fff;
  color: var(--form-blue);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: all 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .history-page .p-histry-table .btn_receipt a:hover {
    background-color: var(--form-blue);
    border-color: var(--form-blue);
    color: #fff;
    text-decoration: none;
  }
}

/* -------------------------------------------------------------------------
   受講証明書：期間（From 〜 To）入力
   ------------------------------------------------------------------------- */
/* 期間入力は1つの角丸フィールドにまとめ、内側の日付入力は枠なしにする */
.history-daterange {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  max-width: 28rem;
  padding: 0.15rem 0.85rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.history-daterange:focus-within {
  border-color: var(--form-blue);
  box-shadow: 0 0 0 3px rgba(89, 184, 232, 0.18);
}
.history-daterange:has(.confirm-input.is-invalid) {
  border-color: var(--form-red);
}
.history-daterange .confirm-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 0.5rem 0.25rem;
  min-height: 0;
}
.history-daterange .confirm-input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
.history-daterange-sep {
  flex: 0 0 auto;
  color: var(--form-muted);
  font-weight: 700;
}

/* 入力エラー時の枠（共通） */
.confirm-input.is-invalid {
  border-color: var(--form-red);
}

/* -------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .history-plan-name {
    font-size: 1.05rem;
  }
  .history-page .p-histry-table > thead > tr > th,
  .history-page .p-histry-table > tbody > tr > td {
    padding: 0.7rem 0.4rem;
  }
  .history-page .p-histry-table .h-date {
    width: auto;
    white-space: normal;
    font-size: 0.9rem;
  }
  .history-page .p-histry-table .btn_receipt {
    float: none;
    display: block;
    margin: 0.5rem 0 0;
    text-align: right;
  }
  .history-daterange {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .history-daterange .confirm-input {
    width: auto;
    max-width: 100%;
    flex: 1 1 auto;
  }
  .history-daterange-sep {
    text-align: center;
  }
}

/* =========================================================================
   レッスン予約詳細 / 履歴詳細（reservation_detail.blade.php）
   ----------------------------------------------------------------------
   レイアウト土台（.main-layout / .main / #sidebar）と、カード（.point-container）
   / 見出し（.point-title）は mypage_2.css・common-sidebar.css を共有する。
   ここでは予約詳細画面に固有のヒーローカード・Zoom入室パネル・チェック
   リスト・メッセージボードなどだけを .rd-page 配下にスコープして定義する。
   デザイントークンは common-form.css 上部の :root 変数を流用：
     --form-blue #59b8e8 / --form-blue-soft #f0faff / --form-text #1f2937
     --form-muted #6b7280 / --form-border #e5e7eb / --form-red #ef4444
   履歴詳細（終了後）のアクセントカラーはグリーン #5cc7a6 を用いる。
   ========================================================================= */

.rd-page {
  --rd-green: #5cc7a6;
  --rd-green-dark: #1f7a5e;
  --rd-green-soft: #eefaf4;
  --rd-pink: #f0a8b8;
  --rd-pink-text: #d6536f;
  text-align: left;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  color: var(--form-text);
  -webkit-font-smoothing: antialiased;
}
.rd-page a { text-decoration: none; }
.rd-page a:hover { text-decoration: none; }

/* -------------------------------------------------------------------------
   ページ見出し（パンくず＋タイトル＋前後ナビ）
   ------------------------------------------------------------------------- */
.rd-head { margin-bottom: 1.5rem; }
.rd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}
.rd-breadcrumb .material-symbols-outlined { font-size: 16px; }
.rd-breadcrumb-current { color: var(--form-muted); }

.rd-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.rd-page h1.page-title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--form-text);
  letter-spacing: -0.01em;
}

.rd-pagebtns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rd-pagebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--form-border);
  background-color: #fff;
  color: #374151;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.rd-pagebtn .material-symbols-outlined { font-size: 18px; }
.rd-pagebtn:not(.is-disabled):hover {
  border-color: var(--form-blue);
  color: var(--form-blue);
}
.rd-pagebtn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   ヒーローカード（予約サマリー）
   .point-container と同じ意匠だが、ステータスバーを全幅で出すため余白を自前管理
   ------------------------------------------------------------------------- */
.rd-hero {
  margin-bottom: 2rem;
  border-top: 4px solid var(--form-blue);
  border-radius: 0 0 28px 28px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.rd-hero--done { border-top-color: var(--rd-green); }

.rd-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem clamp(1rem, 3vw, 2.75rem);
  border-bottom: 1px solid #f3f4f6;
  background: linear-gradient(90deg, var(--form-blue-soft) 0%, #fbfdff 100%);
}
.rd-status-strip--done {
  background: linear-gradient(90deg, var(--rd-green-soft) 0%, #fbfefc 100%);
}
.rd-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fff;
  border: 1px solid #cfeafb;
  color: #1f6f99;
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  font-size: 0.85rem;
}
.rd-status-badge--done {
  border-color: #c7ecdc;
  color: var(--rd-green-dark);
}
.rd-status-badge .material-symbols-outlined { font-size: 18px; color: var(--rd-green); }
.rd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--form-blue);
  animation: rd-softpulse 1.8s ease-in-out infinite;
}
@keyframes rd-softpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.rd-code { font-size: 0.85rem; color: var(--form-muted); }
.rd-code strong { color: #374151; font-weight: 700; letter-spacing: 0.02em; }

.rd-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

/* 講師ブロック */
.rd-teacher {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.rd-teacher-photo {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--form-border);
  background-color: #eef6fb;
}
.rd-teacher-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-teacher-info { min-width: 0; }
.rd-teacher-label {
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.rd-page h2.rd-teacher-name {
  margin: 0 0 0.3rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--form-text);
}
.rd-page h2.rd-teacher-name a { color: var(--form-blue); }
.rd-page h2.rd-teacher-name a:hover { color: var(--form-blue); }
.rd-page h2.rd-teacher-name span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--form-muted);
  margin-left: 0.15rem;
}
.rd-teacher-lesson {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--form-blue);
  font-weight: 600;
}
.rd-teacher-lesson:hover { text-decoration: underline; }
.rd-teacher-lesson .material-symbols-outlined { font-size: 16px; }

/* 日時ブロック */
.rd-datetime {
  border: 1px solid #eef2f4;
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
  background-color: #fcfdfe;
}
.rd-datetime-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.rd-datetime-label .material-symbols-outlined { font-size: 18px; color: var(--form-blue); }
.rd-datetime--done .rd-datetime-label .material-symbols-outlined { color: var(--rd-green); }
.rd-page .rd-datetime-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--form-text);
  line-height: 1.25;
}

/* メタ統計 */
.rd-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rd-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f9fafb;
  border: 1px solid #f1f3f5;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
}
.rd-stat .material-symbols-outlined { font-size: 18px; color: var(--form-blue); }
.rd-stat--done .material-symbols-outlined { color: var(--rd-green); }
.rd-stat-label { font-size: 0.8rem; color: #9ca3af; }
.rd-stat-value { font-weight: 800; color: var(--form-text); }
.rd-stat-value small { font-size: 0.78rem; font-weight: 600; color: var(--form-muted); margin-left: 0.1rem; }

/* Zoom 入室パネル */
.rd-join {
  background: linear-gradient(160deg, #eaf7fe 0%, #f4fbff 100%);
  border: 1px solid #d8eefb;
  border-radius: 22px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.rd-join-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: #fff;
  border: 1px solid #cfeafb;
  border-radius: 9999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f6f99;
  margin-bottom: 1rem;
}
.rd-join-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
.rd-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--form-blue);
  color: #fff !important;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  border: none;
  box-shadow: 0 10px 24px rgba(89, 184, 232, 0.32);
  transition: opacity 0.15s ease;
}
.rd-join-btn:hover { opacity: 0.92; color: #fff !important; text-decoration: none; }
.rd-join-btn .material-symbols-outlined { font-size: 24px; }
.rd-join-meta {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}
.rd-join-meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 0.2rem;
}
.rd-join-link {
  font-size: 0.8rem;
  color: var(--form-blue) !important;
  font-weight: 600;
  word-break: break-all;
}
.rd-join-link:hover { text-decoration: underline; }
.rd-page .rd-join-note {
  font-size: 0.76rem;
  color: #8aa6b5;
  margin: 0.85rem 0 0;
  line-height: 1.5;
}

/* ヒーロー下部：お礼＋カレンダー */
.rd-hero-foot { padding: 0 clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.rd-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background-color: #fbfdff;
  border: 1px solid #eef4f8;
  border-radius: 16px;
  padding: 1rem 1.15rem;
}
.rd-notice-icon { font-size: 22px; color: var(--form-blue); margin-top: 1px; flex-shrink: 0; }
.rd-page .rd-notice-text {
  font-size: 0.9rem;
  color: var(--form-muted);
  line-height: 1.7;
  margin: 0;
}
.rd-notice-text strong { color: var(--form-text); }
.rd-cal-wrap { margin-top: 0.8rem; }
.rd-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--form-border);
  background-color: #fff;
  color: #374151 !important;
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.rd-cal-btn:hover { border-color: var(--form-blue); color: var(--form-blue) !important; text-decoration: none; }
.rd-cal-btn svg { display: block; }

/* 履歴詳細：完了パネル */
.rd-done-panel {
  background: linear-gradient(160deg, #edfaf4 0%, #f6fefb 100%);
  border: 1px solid #d4efe4;
  border-radius: 22px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.rd-done-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--rd-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  box-shadow: 0 8px 18px rgba(92, 199, 166, 0.35);
  animation: rd-popin 0.5s ease-out;
}
.rd-done-icon .material-symbols-outlined { font-size: 34px; color: #fff; }
@keyframes rd-popin { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.rd-done-title { font-size: 1.15rem; font-weight: 800; color: var(--rd-green-dark); margin-bottom: 0.2rem; }
.rd-page .rd-done-text { font-size: 0.85rem; color: #6b8479; margin: 0 0 1.1rem; line-height: 1.6; }
.rd-done-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--form-blue);
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.9rem 1.25rem;
  box-shadow: 0 10px 24px rgba(89, 184, 232, 0.3);
  transition: opacity 0.15s ease;
}
.rd-done-btn:hover { opacity: 0.92; color: #fff !important; text-decoration: none; }
.rd-done-btn .material-symbols-outlined { font-size: 22px; }

/* -------------------------------------------------------------------------
   汎用カード見出し・リード文（.point-container 内で使用）
   ------------------------------------------------------------------------- */
.rd-page .rd-section-lead {
  margin: 0 auto 2rem;
  font-size: 0.96rem;
  color: var(--form-muted);
  max-width: 38rem;
  line-height: 1.7;
}
.rd-attention { color: var(--form-red); font-weight: 600; }

.rd-page h3.rd-card-head {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--form-text);
}
.rd-card-head--center { justify-content: center; text-align: center; }
.rd-card-head-icon { font-size: 24px; color: #f59e0b; }

/* チェックリスト（レッスン前にご確認ください） */
.rd-check-card .rd-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.rd-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--form-muted);
  line-height: 1.6;
}
.rd-check-list li .material-symbols-outlined {
  font-size: 20px;
  color: #4fc3f7;
  flex-shrink: 0;
  margin-top: 1px;
}
.rd-check-list strong { color: var(--form-text); }
.rd-check-list a { color: var(--form-blue); font-weight: 600; }
.rd-check-list a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   フォームカード（テーマ入力・ご意見・ポイント送付など）
   既存の .ls-box / .form-control / .radio-inline 等の見た目を .rd-page 配下で
   上書きし、デザイントークンに合わせる。
   ------------------------------------------------------------------------- */
.rd-form-body { max-width: 42rem; margin: 0 auto; }
.rd-page .rd-form-body .ls-box { margin-bottom: 1.6rem; }
.rd-page .rd-form-body .ls-box:last-of-type { margin-bottom: 0; }
.rd-page .ls-box > label {
  display: block;
  font-weight: 500;
  color: var(--form-text);
  margin-bottom: 0.6rem;
}
.rd-page .ls-box > label span { color: var(--form-red); margin-left: 0.2rem; }
.rd-page .ls-box > p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--form-muted);
  line-height: 1.7;
}

/* 入力欄（input / textarea / select）共通の柔らかい枠 */
.rd-page .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #fff;
  color: var(--form-text);
  font-size: 1rem;
  line-height: 1.6;
  font-family: inherit;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rd-page textarea.form-control { resize: vertical; min-height: 3.5rem; }
.rd-page .form-control:focus {
  outline: none;
  border-color: var(--form-blue);
  box-shadow: 0 0 0 3px rgba(89, 184, 232, 0.18);
}
.rd-page select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

/* ラジオ / チェックボックスをチップ状に */
.rd-page .ls-box .radio,
.rd-page .ls-box .checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}
.rd-page .ls-box .radio-inline,
.rd-page .ls-box .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--form-border);
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: #374151;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.rd-page .ls-box .radio-inline:hover,
.rd-page .ls-box .checkbox-inline:hover { border-color: var(--form-blue); }
.rd-page .ls-box .radio-inline input,
.rd-page .ls-box .checkbox-inline input { accent-color: var(--form-blue); margin: 0; }
.rd-page .ls-box label.checked {
  border-color: var(--form-blue);
  background-color: var(--form-blue-soft);
  color: #1f6f99;
}
.rd-page .ls-box .text-warning { color: #b45309; font-size: 0.85rem; margin: 0.5rem 0 0; }
.rd-page .ls-box .text-info { color: var(--form-blue); font-size: 0.85rem; margin: 0.5rem 0 0; }

/* readonly 表示（入力不可時のテキスト） */
.rd-readonly {
  padding: 0.8rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background-color: #f9fafb;
  color: var(--form-text);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* エラー */
.rd-page .error-box {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  background-color: #fef2f2;
  color: var(--form-red);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
}

/* 補足リスト（kome-list / check-list 相当） */
.rd-page .rd-kome-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.rd-page .rd-kome-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--form-muted);
  line-height: 1.8;
}
.rd-page .rd-kome-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: #9ca3af;
}

/* 送信ボタン（既存 .btn-blue / .btn-next / .btn-order をピル型に） */
.rd-page .btn-box { text-align: center; margin-top: 1.75rem; }
.rd-page .btn-blue,
.rd-page .btn-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 9999px;
  padding: 0.85rem 3rem;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.rd-page .btn-blue {
  background-color: #41a7e1;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
}
.rd-page .btn-blue:hover { opacity: 0.9; color: #fff !important; text-decoration: none; }
.rd-page .btn-blue .material-symbols-outlined { font-size: 18px; }

/* 完了報告：セレクト＋ボタン横並び */
.rd-report-row,
.rd-point-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rd-report-row .form-control { width: auto; min-width: 16rem; }
.rd-page .btn-line-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid var(--form-blue);
  background-color: #fff;
  color: var(--form-blue);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rd-page .btn-line-blue:hover {
  background-color: var(--form-blue);
  color: #fff;
}
.rd-point-row .form-control { width: auto; max-width: 12rem; }
.rd-point-unit { font-weight: 700; color: var(--form-muted); }
.rd-page .rd-note-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--form-muted);
  line-height: 1.7;
}

/* 完了報告（読み取り専用ステータス） */
.rd-status-result {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  background-color: var(--rd-green-soft);
  border: 1px solid #cdeede;
  color: var(--rd-green-dark);
  font-weight: 700;
  font-size: 1rem;
}
.rd-status-result { display: flex; width: fit-content; }
.rd-status-result .material-symbols-outlined { color: var(--rd-green); font-size: 20px; }

.rd-raty-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
.rd-raty-row input[type="text"] {
  width: 20px;
  padding: 0;
  border: none;
  text-align: center;
  color: #ff9f43;
  font-weight: 700;
  font-size: 18px;
}

/* レッスン評価（raty を中央に） */
.rd-rating { text-align: center; }
.rd-rating .raty { display: inline-block; }
.rd-rating .raty img { width: 36px; height: 36px; }

/* -------------------------------------------------------------------------
   下部レッスンナビ
   ------------------------------------------------------------------------- */
.rd-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: #fff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 2.5rem;
}
.rd-bottom-nav a,
.rd-bottom-nav .is-disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #374151;
  font-weight: 600;
  font-size: 0.88rem;
}
.rd-bottom-nav a:hover { color: var(--form-blue); }
.rd-bottom-nav .is-disabled { opacity: 0.4; cursor: not-allowed; }
.rd-bottom-nav a .material-symbols-outlined,
.rd-bottom-nav .is-disabled .material-symbols-outlined { font-size: 18px; }
.rd-bottom-nav-date { font-size: 0.95rem; color: var(--form-muted); font-weight: 600; }

/* -------------------------------------------------------------------------
   メッセージボード
   ------------------------------------------------------------------------- */
.rd-msg-compose {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.rd-msg-compose .form-control { flex: 1 1 18rem; }
.rd-page .rd-msg-send {
  padding: 0.85rem 1.8rem;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
}
.rd-msg-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rd-page .rd-msg-list .message-box {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
/* 講師から（左寄せ・青背景） */
.rd-page .rd-msg-list .message-from { align-self: flex-start; align-items: flex-start; }
.rd-page .rd-msg-list .message-from .rd-msg-bubble {
  background-color: var(--form-blue-soft);
  border: 1px solid #dceefb;
  border-radius: 4px 16px 16px 16px;
}
.rd-page .rd-msg-list .message-from .message-meta { justify-content: flex-start; }
.rd-page .rd-msg-list .message-from .message-meta .user a,
.rd-page .rd-msg-list .message-from .message-meta .user { color: var(--form-blue); font-weight: 600; }
/* ユーザーから（右寄せ・白背景） */
.rd-page .rd-msg-list .message-to { align-self: flex-end; align-items: flex-end; }
.rd-page .rd-msg-list .message-to .rd-msg-bubble {
  background-color: #fff;
  border: 1px solid var(--form-border);
  border-radius: 16px 4px 16px 16px;
}
.rd-page .rd-msg-list .message-to .message-meta { justify-content: flex-end; }
/* 事務局など（from_admin） */
.rd-page .rd-msg-list .message-box:not(.message-from):not(.message-to) { align-self: flex-start; max-width: 90%; }
.rd-page .rd-msg-list .message-box:not(.message-from):not(.message-to) .rd-msg-bubble {
  background-color: #f9fafb;
  border: 1px solid var(--form-border);
  border-radius: 16px;
}
.rd-msg-bubble { padding: 0.8rem 1rem; }
.rd-page .rd-msg-bubble p { margin: 0; color: #374151; font-size: 0.92rem; line-height: 1.7; white-space: pre-wrap; }
.rd-page .rd-msg-list .message-meta {
  list-style: none;
  display: flex;
  gap: 0.6rem;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.75rem;
  color: #9ca3af;
}
.rd-page .rd-msg-list .message-meta li { display: inline; }
.rd-page .rd-msg-empty { text-align: center; color: var(--form-muted); margin: 0; }

/* -------------------------------------------------------------------------
   キャンセルカード（ピンクアクセント）
   ------------------------------------------------------------------------- */
.rd-cancel-card { border-top-color: var(--rd-pink) !important; }
.rd-page .rd-cancel-text {
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--form-muted);
  max-width: 42rem;
  line-height: 1.8;
}
.rd-cancel-actions { text-align: center; }
.rd-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 9999px;
  background-color: #fff;
  border: 1px solid var(--rd-pink);
  color: var(--rd-pink-text) !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 2.2rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.rd-cancel-btn:hover { background-color: #fdf2f5; text-decoration: none; }
.rd-cancel-btn .material-symbols-outlined { font-size: 18px; }

/* -------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rd-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rd-page h1.page-title { font-size: 1.5rem; }
  .rd-head-row { align-items: flex-start; }
  .rd-teacher { flex-direction: row; }
  .rd-report-row .form-control,
  .rd-point-row .form-control { width: 100%; min-width: 0; }
  .rd-page .btn-blue,
  .rd-page .btn-pink { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .rd-page .rd-msg-list .message-box { max-width: 92%; }
  .rd-msg-compose .rd-msg-send { width: 100%; }
}

/* -------------------------------------------------------------------------
   不具合修正①：アンケートのプルダウンが選択値を表示せず「…」になる問題。
   Bootstrap の .form-inline .form-control{width:auto}（PC幅）が勝つと
   appearance:none の <select> が潰れて値が省略されるため、全幅に固定する。
   ------------------------------------------------------------------------- */
.rd-page .ls-box .form-inline { display: block; width: 100%; }
.rd-page .ls-box select.form-control,
.rd-page .ls-box .form-inline > select.form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   不具合修正②：プルダウン／入力欄で選択値・入力文字が縦に切れて上端しか
   見えない問題。Bootstrap の .form-control{ height:34px } 等の固定高さが
   本デザインの上下パディングと競合し、文字がはみ出して切れていた。
   プロフィール画面（user_form_2.css）と同方針で固定高さを解除し、
   余白に合わせて高さが伸びるようにする。
   ------------------------------------------------------------------------- */
.rd-page input.form-control,
.rd-page select.form-control,
.rd-page textarea.form-control,
.rd-page .form-control {
  height: auto !important;
  min-height: 2.75rem;
  line-height: 1.5 !important;
}
.rd-page textarea.form-control { min-height: 3.5rem; }

/* ==========================================================================
   決済処理中オーバーレイ（order_confirm）
   - スクロール位置に関係なく画面中央に必ず表示（PC・SP共通）
   - 決済中の誤操作・二重送信も防止する
   ========================================================================== */
.payment-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* JS からは display:flex で表示される */
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.payment-processing-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 32px 40px;
  max-width: 90vw;
  text-align: center;
}
.payment-processing-spinner {
  font-size: 2.5rem;
  color: #1a73e8;
  display: block;
  margin-bottom: 16px;
}
.payment-processing-text {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #333;
}
.payment-processing-note {
  font-size: 0.8125rem;
  color: #666;
  margin: 0;
  line-height: 1.7;
}
/* 決済中は背面ページのスクロールを固定 */
body.payment-processing {
  overflow: hidden;
}
@media (max-width: 767px) {
  .payment-processing-box {
    padding: 24px 20px;
    width: 100%;
    max-width: 320px;
  }
}