カスタマイズガイド | 予約システム RSYS

カスタマイズについて

RSYSのフロントUIを安全にカスタマイズするための基本方針と前提ルールをご案内します。

RSYSのフロントUIは、既存のスタイルを直接変更するのではなく、 追加CSSによる上書きを前提として設計されています。

本マニュアルでは、この前提に基づき、各UIパーツごとにカスタマイズ方法を解説しています。レイアウト・配色・余白・文字サイズなどを調整することで、サイト全体のデザインやブランドイメージに合わせた表示が可能です。

ワンポイントアドバイス

カスタマイズは、既存のクラスや構造を維持したままCSSで上書きすることが基本です。特に「data-rsys-*」属性はUI制御に使用されているため、セレクター指定の際はこれらを活用すると安定したカスタマイズが行えます。

注意点

本プラグインの予約モーダル内UIは、WordPressテーマのCSSの影響を受けにくい独立構造として設計されています。
ただし、スタートブロック（ショートコードでページ内に直接出力される部分）はテーマの影響を受けます。
特に typeB は、テーマのCSS（レイアウト・余白・ボタン・画像など）の影響により、デフォルトの見た目が維持できない場合があります。
typeA はボタン単体のシンプルな構造のため、typeB と比べてテーマの影響を受けにくい構成です。

モーダル全体構造

RSYSの予約UIは、専用のモーダル構造によって構成されています。

RSYSの予約UIは、ユーザビリティを重視し、画面全体を活用したモーダル形式で設計されています。 WordPressのページ構造に依存せず、フル画面に近い表示で利用できるため、安定した操作性と視認性を確保しています。

設計の考え方

本プラグインの予約UIは、WordPressテーマの影響を受けにくい構造として設計されています。

UI構造を分離したモーダル設計（固定TOP / スクロール領域 / 固定BOTTOM）
テーマCSSの影響を受けにくい独立レイアウト
追加CSSで上書き可能なクラス設計
機能制御用の data属性の採用

これにより、予約モーダル内の各STEPは、テーマに依存せず安定した状態で表示・カスタマイズが可能です。

ただし、この設計はモーダル内UIに限定されます。

スタートブロックはショートコードによりページ本文中へ直接出力されるため、WordPressテーマのCSSの影響を受けます。

特に typeB（左右ブロック構成）はテーマの影響を受けやすく、レイアウトが崩れる場合があります。その場合は、追加CSSで縦一列レイアウトへ変更するなどの調整を行ってください。

注意点

モーダル構造は複数の領域で連携して動作しているため、構造の変更は行わないでください。
固定TOP・スクロール領域・固定BOTTOMの関係を保ったままカスタマイズしてください。

追加CSSガイドライン

追加CSSによるカスタマイズの適用範囲と、調整時の注意点についてご案内します。

RSYSのフロントUIは、追加CSSによる上書きで柔軟にカスタマイズできるよう設計されています。配色・余白・フォント・ボタンデザインなど、多くの見た目はCSSのみで調整可能です。

追加CSSで対応可能な内容

背景色・文字色・ボーダー・影などの装飾変更
余白（margin / padding）の調整
フォントサイズ・行間・文字スタイルの変更
ボタンやリンクの見た目の変更
テーブルやグリッドの装飾調整
アイコンサイズや色の調整

追加CSSでの対応が難しい・推奨されない内容

要素の削除や非表示を前提としたレイアウト変更
モーダルの固定TOP・スクロール領域・固定BOTTOMの構造変更
高さや表示領域に影響する大幅なレイアウト変更
Step構造（step-content-*）の表示制御の変更
data属性に依存する要素の役割変更

設計上の注意点

RSYSのUIは、以下の構造を前提として動作しています。

モーダル構造（固定TOP / スクロール領域 / 固定BOTTOM）
ステップ制御（Step1〜Step4の切り替え）
data属性によるUI制御

これらはCSSだけで制御されているものではなく、 JavaScriptによって連動して動作しています。

ワンポイントアドバイス

カスタマイズは「見た目の調整」に留め、レイアウト構造や表示制御に関わる変更は避けることで、安定した動作を維持できます。

CSS変数の使い方

RSYSでは、CSS変数を使うことでUIの見た目をまとめて調整することができます。

追加CSSでは、通常通りセレクターを指定して個別の見た目を調整することができます。一方で、RSYSでは一部の色やサイズをCSS変数で管理しているため、変数の値を上書きすることで、該当箇所をまとめて変更することも可能です。

細かく調整したい場合はセレクター指定、 UI全体の印象を整えたい場合はCSS変数の上書きを使い分けてください。

通常のCSSで個別に調整する方法

追加CSS 例

.rsys-reservation-banner-reserve {
  background: #1a73c9;
  color: #fff;
  border-radius: 999px;
}

.reservation-grid thead th {
  border-bottom: 2px solid #758391;
}

特定の要素だけを変更したい場合に適しています。

CSS変数を書き換えてまとめて調整する方法

追加CSS 例

[data-rsys-modal-box] {
  --rsys-color-ao: #0f6ecf;
  --rsys-color-aka: #d93b57;
  --rsys-step1-icon-size: 28px;
}

同じ変数を使用している箇所をまとめて変更したい場合に便利です。

CSS変数の適用範囲（スコープ）

CSS変数は、定義する場所によって影響範囲が変わります。

:root → サイト全体に適用されます
スタートブロック → そのブロック内のみ適用されます
[data-rsys-modal-box] → モーダル内のみ適用されます

スコープ例

:root {
  --rsys-color-ao: #1a7dcc;
}

.rsys-reservation {
  --rsys-color-ao: #0f6ecf;
}

[data-rsys-modal-box] {
  --rsys-color-ao: #d93b57;
}

同じ変数でも、定義する場所によって適用範囲が変わるため、どこに書くかを意識して調整してください。

使い分けの目安

一部分だけ変更したい → セレクター指定
全体の色やサイズを変更したい → CSS変数
特定エリアだけ変更したい → スコープ指定

ワンポイントアドバイス

CSS変数の上書きは影響範囲が広いため、変更後はスタートブロック・モーダル両方を確認してください。

CSS変数一覧

主なCSS変数を、定義されているスコープごとにまとめています。色を表す変数は、見本色も併せて掲載しています。

:root（全体に適用）

変数名	値	用途
`--rvs-ok`	#2ca02c	正常・完了系の表示色です。
`--rvs-ng`	#e53935	エラー・不可系の表示色です。
`--rvs-muted`	#d0d5db	補助的なグレー表示に使用されます。
`--rsys-color-enpaku`	#f4f6f8	淡い背景色です。
`--rsys-color-aka`	#ad2339	赤系の強調色です。
`--rsys-color-CobaltBlue`	#0068b7	青系の基調色です。
`--rsys-color-ChromeGreen`	#006c3a	緑系の基調色です。
`--rsys-color-AshGrey`	#9f9f9d	補助的なグレー色です。
`--rsys-color-muted`	#d0d5db	無効・補助系に使用される色です。
`--rsys-color-overlay`	rgba(0, 0, 0, 0.5)	オーバーレイ背景色です。
`--rsys-color-hai_line`	#758391	線や区切りの色です。
`--rsys-color-hai_border_soft`	#e0e0e0	淡いボーダー色です。

[data-rsys-modal-box]（モーダル内に適用）

Surface

変数名	値	用途
`--rsys-color-shiro`	#ffffff	基本の白背景です。
`--rsys-color-junpaku`	#fafbfc	メイン面の背景色です。
`--rsys-color-enpaku`	#f4f6f8	淡い背景色です。
`--rsys-color-kusumi`	#cccccc	くすみ系の補助色です。

Text

変数名	値	用途
`--rsys-color-shikkoku`	#00000f	最も濃い文字色です。
`--rsys-color-sumi`	#1f2937	本文テキスト色です。
`--rsys-color-kuro_cha`	#353233	濃色の補助テキストです。
`--rsys-color-nezumi`	#667085	やや淡いテキスト色です。

Border

変数名	値	用途
`--rsys-color-mizu`	#6896c4	ボーダーや補助線に使われる青系色です。
`--rsys-color-usuzumi`	#c6ced6	淡いボーダー色です。

State

変数名	値	用途
`--rsys-color-ao`	#1a7dcc	受付中などの青系状態色です。
`--rsys-color-midori`	#219a26	成功・完了系の緑色です。
`--rsys-color-cha`	#c87012	注意・補足系の色です。
`--rsys-color-aka`	#df304e	警告・不可系の赤色です。
`--rsys-color-aka_usui`	#fff7f7	赤系の淡い背景色です。
`--rsys-color-aka_sukashi`	#df304e66	赤系の透過色です。
`--rsys-color-emerald`	#22b893	補助的な緑系アクセント色です。
`--rsys-color-ki`	#f4b400	黄色系の強調色です。
`--rsys-color-hai`	#8c96a0	無効・補助系のグレー色です。
`--rsys-color-hai_sukashi`	#c7cfd7	淡いグレー背景です。

Focus / Ring

変数名	値	用途
`--rsys-color-mizu_ao`	#4a89c7	フォーカス系の青色です。
`--rsys-color-mizu_ao_sukashi`	rgba(74, 137, 199, 0.14)	フォーカスリング用の透過色です。
`--rsys-color-ao_sukashi_strong`	rgba(26, 125, 204, 0.22)	強めの青系透過色です。
`--rsys-color-ao_sukashi`	rgba(220, 76, 100, 0.12)	淡い透過色です。

Policy / Consent

変数名	値	用途
`--rsys-color-hakushi`	#f8fafc	同意UIや補助背景に使われる淡色です。
`--rsys-color-hai_border`	#d7dde3	淡いボーダー色です。
`--rsys-color-hai_dark`	#7b8794	濃いグレー色です。
`--rsys-color-midori_dark`	#16a34a	濃い緑色です。
`--rsys-color-hakushi2`	#f8fafc	補助背景色です。
`--rsys-color-hai_border2`	#d7dde3	補助ボーダー色です。

Overlay / Sign

変数名	値	用途
`--rsys-color-kuro_sukashi`	rgba(0, 0, 0, 0.72)	スクロールサインなどで使う透過黒です。

Grid

変数名	値	用途
`--rsys-color-hai_border3`	#d7dde3	グリッド用のボーダー色です。
`--rsys-color-hai_strong`	#9fa7ae	やや強めのグレー色です。
`--rsys-color-hakushi3`	#f8fafc	グリッド背景用の淡色です。
`--rsys-color-hai_usui`	#f3f5f7	薄いグレー背景です。
`--rsys-color-hai_disabled`	#f1f3f5	無効セルや無効背景に使用されます。
`--rsys-color-mizu_hover`	#edf6ff	ホバー時の背景色です。
`--rsys-color-mizu_select`	#dceeff	選択時の背景色です。
`--rsys-grid-fade-surface-rgb`	255, 255, 255	グリッド端のフェード表現に使うRGB値です。
`--rsys-grid-sticky-shadow`	rgba(15, 23, 42, 0.08)	固定要素の影色です。
`--rsys-color-shadow`	rgba(15, 23, 42, 0.08)	共通の影色です。

Form / Input

変数名	値	用途
`--rsys-color-shiro2`	#ffffff	フォーム背景用の白色です。
`--rsys-color-shiro3`	#ffffff	補助的な白背景色です。
`--rsys-color-aka_usui`	#fff7f7	入力エラー周辺で使う淡い赤背景です。
`--rsys-input-ng-border`	var(--rsys-color-aka)	入力エラー時のボーダー色です。
`--rsys-grid-surface`	var(--rsys-color-junpaku)	Step1グリッド面の背景色です。
`--rsys-color-available`	var(--rsys-color-ao)	受付中状態の基準色です。

Layout

変数名	値	用途
`--rsys-fixed-top-height`	124px	固定TOP領域の基準高さです。
`--rsys-step1-table-width`	min(1000px, 100vw)	Step1テーブル全体の基準幅です。
`--rsys-step1-day-col-width`	calc((var(--rsys-step1-table-width) - var(--rsys-step1-time-col-width)) / 7)	Step1の日付列幅を計算するための値です。

Step1 Icon

変数名	値	用途
`--rsys-step1-icon-size`	25px	Step1アイコンサイズです。
`--rsys-step1-icon-offset-y`	0px	Step1アイコンの縦位置調整です。
`--rsys-step1-icon-opacity`	1	Step1アイコンの透過度です。

スタートブロック / ボタン・簡易カレンダー

スタートブロックに表示される各ボタンの見た目を、追加CSSで調整する方法を紹介します。

カスタマイズのポイント

スタートブロックはモーダルとは異なり、WordPressテーマのCSSの影響を受けます。
特に typeB（左右レイアウト）はテーマの影響を受けやすく、幅・余白・配置が崩れる場合があります。
その場合は、左右構成を維持するのではなく、追加CSSで縦一列レイアウトへ変更することを推奨します。
レイアウトの影響を避けたい場合は、シンプルな構造の typeA（予約ボタン単体）の利用も有効です。
背景色・文字色・角丸を調整することで、ボタンの印象を大きく変更できます。
電話・予約・マップは用途ごとに色を分けると視認性が向上します。
簡易カレンダーを含めて配色を統一すると、ブロック全体のデザインに一体感が出ます。

対象DOM

HTML構造

<div class="rsys-reservation-actions rsys-reservation-actions-type-a" data-rsys-role="actions">
  <a class="reservation-banner banner-reserve rsys-reservation-banner rsys-reservation-banner-reserve"
     data-id="1"
     data-rsys-action="reserve"
     data-rsys-venue-id="1">
    <i class="rsys-icon fa-regular fa-calendar-days"></i>
    <span class="rsys-reservation-banner-label">インターネット予約</span>
  </a>
</div>

<div class="reservation-right rsys-reservation-side rsys-reservation-side-right" data-rsys-role="actions">
  <a href="tel:09031056869"
     class="reservation-banner banner-tel rsys-reservation-banner rsys-reservation-banner-tel"
     data-rsys-action="tel"
     data-rsys-venue-id="5">
    <i class="rsys-icon fa-solid fa-phone"></i>
    <span class="rsys-reservation-banner-label">お問い合わせ・ご予約 <strong>09031056869</strong></span>
  </a>

  <a class="reservation-banner banner-reserve rsys-reservation-banner rsys-reservation-banner-reserve"
     data-id="5"
     data-rsys-action="reserve"
     data-rsys-venue-id="5">
    <i class="rsys-icon fa-regular fa-calendar-check"></i>
    <span class="rsys-reservation-banner-label">インターネット予約</span>
  </a>

  <a href="#"
     class="reservation-banner banner-map rsys-reservation-banner rsys-reservation-banner-map"
     data-rsys-action="map"
     data-rsys-venue-id="5">
    <i class="rsys-icon fa-solid fa-diamond-turn-right"></i>
    <span class="rsys-reservation-banner-label">Googleマップで会場を確認</span>
  </a>
</div>

対象セレクター

対象CSS

.reservation-banner
.rsys-reservation-banner
.banner-tel
.banner-reserve
.banner-map
.rsys-reservation-banner-label
.reservation-banner .rsys-icon
.reservation-right .reservation-banner strong
.rsys-reservation-actions
.reservation-right
.calendar-wrapper
.calendar-caption
.calendar-nav
.calendar-table
.day-number
.status-icon

カスタマイズ例（追加CSS） / パターン① 和風カスタマイズ

追加CSS


/* ========================================
   Start Block Custom Pattern ①
   和風 / 和モダン
   基調色 : #b79b5b
======================================== */

/* ------------------------
   全体の世界観
------------------------ */
.rsys-reservation {
  --rsys-wa-base: #b79b5b;
  --rsys-wa-base-dark: #8f7742;
  --rsys-wa-base-soft: #d6c49a;
  --rsys-wa-paper: #f8f3e7;
  --rsys-wa-paper-deep: #efe5cf;
  --rsys-wa-ink: #2f2a22;
  --rsys-wa-brown: #6c5840;
  --rsys-wa-red: #8f3b2e;
  --rsys-wa-green: #4f6b3c;
  --rsys-wa-border: #cdbb90;
}

/* ------------------------
   会場名
------------------------ */
.rsys-reservation-venue-name {
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rsys-wa-ink);
  text-align: center;
}

/* ------------------------
   typeA / typeB 共通ボタンエリア
------------------------ */
.rsys-reservation-actions,
.reservation-right {
  gap: 14px;
}

.rsys-reservation-actions {
  max-width: 480px;
}

/* ------------------------
   ボタン共通
------------------------ */
.rsys-reservation-banner,
.reservation-banner {
  position: relative;
  min-height: 78px;
  padding: 1.05em 1.4em;
  border: 1px solid var(--rsys-wa-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdfa 0%, var(--rsys-wa-paper) 100%);
  color: var(--rsys-wa-ink);
  box-shadow:
    0 2px 8px rgba(47, 42, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.rsys-reservation-banner:hover,
.reservation-banner:hover {
  transform: translateY(-1px);
  border-color: var(--rsys-wa-base);
  box-shadow:
    0 6px 16px rgba(47, 42, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: var(--rsys-wa-ink);
}

/* 左端の和風アクセント */
.rsys-reservation-banner::before,
.reservation-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(
    180deg,
    var(--rsys-wa-base-soft) 0%,
    var(--rsys-wa-base) 100%
  );
}

/* ラベル */
.rsys-reservation-banner-label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: inherit;
}

/* アイコン */
.reservation-banner .rsys-icon,
.rsys-reservation-banner .rsys-icon {
  width: 30px;
  font-size: 24px;
  color: inherit;
  opacity: 0.92;
}

/* ------------------------
   インターネット予約
------------------------ */
.banner-reserve {
  background: linear-gradient(180deg, #c9b173 0%, var(--rsys-wa-base) 100%);
  border-color: var(--rsys-wa-base-dark);
  color: #fffdf8;
}

.banner-reserve::before {
  background: linear-gradient(180deg, #e2d2ac 0%, #f4ead2 100%);
}

.banner-reserve:hover {
  background: linear-gradient(180deg, #bea567 0%, var(--rsys-wa-base-dark) 100%);
  color: #fffdf8;
}

/* ------------------------
   電話
------------------------ */
.banner-tel {
  background: linear-gradient(180deg, #a44839 0%, var(--rsys-wa-red) 100%);
  border-color: #7a2f24;
  color: #fffdf8;
}

.banner-tel::before {
  background: linear-gradient(180deg, #d9aa9b 0%, #f1ddd7 100%);
}

.banner-tel:hover {
  background: linear-gradient(180deg, #953e31 0%, #7d3328 100%);
  color: #fffdf8;
}

/* 電話番号 */
.reservation-right .reservation-banner strong {
  display: block;
  margin-top: 2px;
  font-size: 1.45em;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: inherit;
}

/* ------------------------
   マップ
------------------------ */
.banner-map {
  background: linear-gradient(180deg, #5f7b49 0%, var(--rsys-wa-green) 100%);
  border-color: #425833;
  color: #fffdf8;
}

.banner-map::before {
  background: linear-gradient(180deg, #bfd0b3 0%, #e6efe1 100%);
}

.banner-map:hover {
  background: linear-gradient(180deg, #546c41 0%, #445835 100%);
  color: #fffdf8;
}

/* ------------------------
   ボタンテキストバランス
------------------------ */
.rsys-reservation-actions .reservation-banner .rsys-reservation-banner-label,
.reservation-right .reservation-banner .rsys-reservation-banner-label {
  width: 100%;
}

.reservation-right .reservation-banner .rsys-reservation-banner-label {
  font-size: 0.88rem;
}

/* ------------------------
   カレンダー外枠
------------------------ */
.reservation-left .calendar-caption {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--rsys-wa-ink);
}

.reservation-left .calendar-wrapper {
  padding: 0.8em;
  border: 1px solid var(--rsys-wa-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fffefb 0%, var(--rsys-wa-paper) 100%);
  box-shadow:
    0 2px 8px rgba(47, 42, 34, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* 月送り */
.reservation-left .calendar-nav {
  margin-bottom: 0.7em;
  color: var(--rsys-wa-ink);
  font-weight: 700;
}

.reservation-left .calendar-nav button {
  border-radius: 8px;
  color: var(--rsys-wa-brown);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.reservation-left .calendar-nav button:hover {
  background: rgba(183, 155, 91, 0.12);
  color: var(--rsys-wa-base-dark);
}

/* テーブル全体 */
.calendar-table {
  border-collapse: collapse;
  background: #fffefb;
}

/* 曜日ヘッダー */
.calendar-table th {
  background: var(--rsys-wa-paper-deep);
  border: 1px solid var(--rsys-wa-border);
  color: var(--rsys-wa-brown);
  font-size: 0.75rem;
  font-weight: 800;
}

/* 通常セル */
.calendar-table td {
  border: 1px solid #d8ccb0;
  background: #fffefb;
  color: var(--rsys-wa-ink);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

/* hover */
.calendar-table td:not(.rsys-past-mask):hover {
  background: #f7efdc;
  border-color: var(--rsys-wa-base);
}

/* 日付 */
.day-number {
  color: var(--rsys-wa-brown);
  font-weight: 700;
}

/* アイコン位置 */
.calendar-table .status-icon {
  justify-content: center;
  padding: 8px 0 0;
  margin-top: 2px;
}

/* ステータス色 */
.calendar-table td.reception {
  color: var(--rsys-wa-base-dark);
}

.calendar-table td.note {
  color: var(--rsys-wa-green);
}

.calendar-table td.rsys-past-mask {
  background: #f2eee5;
  color: #b7b0a0;
}

/* 月間カレンダーのアイコン */
.rsys-reservation-calendar-table .rsys-icon.fa-circle-dot,
.rsys-reservation-calendar-table .rsys-icon.fa-circle {
  color: var(--rsys-wa-base-dark);
}

.rsys-reservation-calendar-table .rsys-icon.fa-circle-xmark {
  color: var(--rsys-wa-red);
}

.rsys-reservation-calendar-table .rsys-icon.fa-circle-minus {
  color: #a7a093;
}

/* typeAの単独ボタン余白調整 */
.rsys-reservation--type-a .rsys-reservation-actions {
  margin-top: 6px;
}

/* ------------------------
   スマホは最低限のみ
------------------------ */
@media screen and (max-width: 768px) {
  .rsys-reservation-banner,
  .reservation-banner {
    min-height: 72px;
    padding: 0.95em 1.15em;
  }

  .rsys-reservation-venue-name {
    font-size: 0.9rem;
  }

  .reservation-right .reservation-banner strong {
    font-size: 1.3em;
  }

  .reservation-left .calendar-wrapper {
    padding: 0.6em;
  }
}

カスタマイズ例（追加CSS） / パターン② レイアウト編集

パターン②の追加CSS例です。予約ボタンのみを残し、簡易カレンダーと縦並びにレイアウトを変更しました。

追加CSS

/* ========================================
   Start Block Custom Pattern ②
   和モダン配色そのまま / typeBを縦積みカード化
======================================== */

/* --------------------------------------------------
   typeB全体を1カラムカード化
-------------------------------------------------- */
.rsys-reservation--type-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 18px 22px;
  border: 1px solid #cdbb90;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffefb 0%, #f8f3e7 100%);
  box-shadow:
    0 4px 14px rgba(47, 42, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

/* 左右レイアウト解除 */
.rsys-reservation--type-b .reservation-left,
.rsys-reservation--type-b .reservation-right {
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* 会場名 */
.rsys-reservation--type-b .rsys-reservation-venue-name {
  order: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2f2a22;
  text-align: center;
}

/* カレンダー */
.rsys-reservation--type-b .reservation-left {
  order: 2;
}

.rsys-reservation--type-b .calendar-caption {
  margin-bottom: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2f2a22;
  text-align: center;
}

.rsys-reservation--type-b .calendar-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.8em;
  border: 1px solid #cdbb90;
  border-radius: 14px;
  background: #fffefb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* 右側ボタン群 */
.rsys-reservation--type-b .reservation-right {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* spacer不要 */
.rsys-reservation--type-b .reservation-right .spacer {
  display: none;
}

/* 電話・マップは非表示 */
.rsys-reservation--type-b .banner-tel,
.rsys-reservation--type-b .banner-map {
  display: none;
}

/* 予約ボタンだけ残す */
.rsys-reservation--type-b .banner-reserve {
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 1.05em 1.35em;
  border-radius: 14px;
  border: 1px solid #8f7742;
  background: linear-gradient(180deg, #c9b173 0%, #b79b5b 100%);
  color: #fffdf8;
  box-shadow:
    0 2px 8px rgba(47, 42, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rsys-reservation--type-b .banner-reserve:hover {
  background: linear-gradient(180deg, #bea567 0%, #8f7742 100%);
  color: #fffdf8;
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(47, 42, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ボタン左の帯 */
.rsys-reservation--type-b .banner-reserve::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, #e2d2ac 0%, #f4ead2 100%);
}

/* ラベルとアイコン */
.rsys-reservation--type-b .banner-reserve .rsys-reservation-banner-label {
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.rsys-reservation--type-b .banner-reserve .rsys-icon {
  width: 30px;
  font-size: 24px;
  color: inherit;
}

/* --------------------------------------------------
   カレンダーもカード幅に合わせて整える
-------------------------------------------------- */
.rsys-reservation--type-b .calendar-table {
  width: 100%;
}

.rsys-reservation--type-b .calendar-table th,
.rsys-reservation--type-b .calendar-table td {
  border-color: #d8ccb0;
}

.rsys-reservation--type-b .calendar-table th {
  background: #efe5cf;
  color: #6c5840;
}

.rsys-reservation--type-b .calendar-table td {
  background: #fffefb;
}

.rsys-reservation--type-b .calendar-table td:not(.rsys-past-mask):hover {
  background: #f7efdc;
  border-color: #b79b5b;
}

.rsys-reservation--type-b .day-number {
  color: #6c5840;
  font-weight: 700;
}

.rsys-reservation--type-b .calendar-nav {
  margin-bottom: 0.7em;
  color: #2f2a22;
  font-weight: 700;
}

.rsys-reservation--type-b .calendar-nav button {
  color: #6c5840;
  border-radius: 8px;
}

.rsys-reservation--type-b .calendar-nav button:hover {
  background: rgba(183, 155, 91, 0.12);
  color: #8f7742;
}

/* --------------------------------------------------
   typeAは配色のみ継承し、レイアウトは変えない
-------------------------------------------------- */
.rsys-reservation--type-a .rsys-reservation-actions {
  max-width: 480px;
}

/* --------------------------------------------------
   余白調整
-------------------------------------------------- */
.rsys-reservation--type-b .reservation-banner + .reservation-banner {
  margin-top: 0;
}

/* --------------------------------------------------
   念のためスマホ時だけ詰める
-------------------------------------------------- */
@media screen and (max-width: 768px) {
  .rsys-reservation--type-b {
    max-width: 100%;
    padding: 16px 14px 18px;
    border-radius: 16px;
  }

  .rsys-reservation--type-b .banner-reserve {
    min-height: 72px;
    padding: 0.95em 1.1em;
  }

  .rsys-reservation--type-b .rsys-reservation-venue-name {
    font-size: 0.95rem;
  }
}

カスタマイズ例（追加CSS） / パターン③ フェミニン調カスタマイズ

パターン③の追加CSS例です。淡いピンクとラベンダーを基調に、やわらかい雰囲気へ調整しています。

追加CSS

/* ========================================
   Start Block Custom Pattern ③
   フェミニン / パステル
   ※ ①②を外したうえで単独使用
======================================== */

/* ------------------------
   全体背景
------------------------ */
body {
  background: #8fb3d9;
}

/* ------------------------
   世界観カラー
------------------------ */
.rsys-reservation {
  --rsys-fem-pink: #ffcce5;
  --rsys-fem-pink-deep: #ff99cc;
  --rsys-fem-pink-soft: #ffeaf4;
  --rsys-fem-lavender: #f9f4ff;
  --rsys-fem-cream: #fff9f9;
  --rsys-fem-mint: #eafff4;
  --rsys-fem-text: #6f5463;
  --rsys-fem-text-strong: #5b4350;
  --rsys-fem-border: #f3d7e6;
  --rsys-fem-shadow: rgba(255, 153, 204, 0.18);
}

/* ------------------------
   会場名
------------------------ */
.rsys-reservation-venue-name {
  margin-bottom: 10px;
  font-size: 0.96rem;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rsys-fem-text-strong);
  text-align: center;
}

/* ------------------------
   ボタン共通
------------------------ */
.rsys-reservation-actions,
.reservation-right {
  gap: 14px;
}

.rsys-reservation-banner,
.reservation-banner {
  position: relative;
  min-height: 78px;
  padding: 1.05em 1.4em;
  border: 1px solid #e9cddd;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--rsys-fem-cream) 100%);
  color: var(--rsys-fem-text);
  box-shadow:
    0 4px 14px rgba(255, 153, 204, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.rsys-reservation-banner:hover,
.reservation-banner:hover {
  transform: translateY(-1px);
  border-color: var(--rsys-fem-pink-deep);
  box-shadow:
    0 8px 20px var(--rsys-fem-shadow),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  color: var(--rsys-fem-text-strong);
}

/* 左側のアクセント */
.rsys-reservation-banner::before,
.reservation-banner::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--rsys-fem-pink) 0%,
    var(--rsys-fem-pink-deep) 100%
  );
}

/* ラベル */
.rsys-reservation-banner-label {
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: inherit;
}

/* アイコン */
.reservation-banner .rsys-icon,
.rsys-reservation-banner .rsys-icon {
  width: 30px;
  font-size: 24px;
  color: inherit;
  opacity: 0.92;
}

/* ------------------------
   電話
------------------------ */
.banner-tel {
  background: linear-gradient(180deg, #ffeff7 0%, #ffd6ea 100%);
  border-color: #f0bfd8;
  color: #8a4f67;
}

.banner-tel::before {
  background: linear-gradient(180deg, #ff9ece 0%, #ff84c1 100%);
}

.banner-tel:hover {
  background: linear-gradient(180deg, #ffe5f2 0%, #ffcce5 100%);
  color: #7b445b;
}

.reservation-right .reservation-banner strong {
  display: block;
  margin-top: 2px;
  font-size: 1.4em;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: inherit;
}

/* ------------------------
   インターネット予約
------------------------ */
.banner-reserve {
  background: linear-gradient(180deg, #f9eaff 0%, #ffe0ef 100%);
  border-color: #ebc8dc;
  color: #7a4f77;
}

.banner-reserve::before {
  background: linear-gradient(180deg, #d8b2ff 0%, #ff99cc 100%);
}

.banner-reserve:hover {
  background: linear-gradient(180deg, #f4e5ff 0%, #ffd6ea 100%);
  color: #6c466a;
}

/* ------------------------
   マップ
------------------------ */
.banner-map {
  background: linear-gradient(180deg, #f4fff9 0%, #eafff4 100%);
  border-color: #cfeedd;
  color: #557565;
}

.banner-map::before {
  background: linear-gradient(180deg, #a8ffd3 0%, #89ffc4 100%);
}

.banner-map:hover {
  background: linear-gradient(180deg, #effff7 0%, #d6ffea 100%);
  color: #4b6759;
}

/* ------------------------
   ボタン内の見た目
------------------------ */
.rsys-reservation-actions .reservation-banner .rsys-reservation-banner-label,
.reservation-right .reservation-banner .rsys-reservation-banner-label {
  width: 100%;
}

.reservation-right .reservation-banner .rsys-reservation-banner-label {
  font-size: 0.9rem;
}

/* ------------------------
   簡易カレンダー
------------------------ */
.reservation-left .calendar-caption {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--rsys-fem-text-strong);
}

.reservation-left .calendar-wrapper {
  padding: 0.8em;
  border: 1px solid var(--rsys-fem-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%);
  box-shadow:
    0 4px 14px rgba(255, 204, 229, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

/* 月送り */
.reservation-left .calendar-nav {
  margin-bottom: 0.7em;
  color: var(--rsys-fem-text-strong);
  font-weight: 700;
}

.reservation-left .calendar-nav button {
  border-radius: 999px;
  color: #b86b90;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.reservation-left .calendar-nav button:hover {
  background: rgba(255, 204, 229, 0.28);
  color: #a3547d;
}

/* 曜日ヘッダー */
.calendar-table th {
  background: #fff0f7;
  border: 1px solid #f3d7e6;
  color: #9a6e83;
  font-size: 0.75rem;
  font-weight: 800;
}

/* 日付セル */
.calendar-table td {
  border: 1px solid #f5ddea;
  background: #fffdff;
  color: var(--rsys-fem-text);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.calendar-table td:not(.rsys-past-mask):hover {
  background: #fff0f7;
  border-color: #f0bfd8;
}

/* 日付 */
.day-number {
  color: #8d6a7c;
  font-weight: 700;
}

/* アイコン位置 */
.calendar-table .status-icon {
  justify-content: center;
  padding: 8px 0 0;
  margin-top: 2px;
}

/* 状態色 */
.calendar-table td.reception {
  color: #d46ea0;
}

.calendar-table td.note {
  color: #86b8a1;
}

.calendar-table td.rsys-past-mask {
  background: #faf4f7;
  color: #ccb8c3;
}

/* 月間カレンダーのアイコン色 */
.rsys-reservation-calendar-table .rsys-icon.fa-circle-dot,
.rsys-reservation-calendar-table .rsys-icon.fa-circle {
  color: #d46ea0;
}

.rsys-reservation-calendar-table .rsys-icon.fa-circle-xmark {
  color: #cc8aa8;
}

.rsys-reservation-calendar-table .rsys-icon.fa-circle-minus {
  color: #c7b8c2;
}

/* ------------------------
   typeAの単独ボタン余白
------------------------ */
.rsys-reservation--type-a .rsys-reservation-actions {
  margin-top: 6px;
  max-width: 520px;
}

/* ------------------------
   最低限のレスポンシブ
------------------------ */
@media screen and (max-width: 768px) {
  .rsys-reservation-banner,
  .reservation-banner {
    min-height: 72px;
    padding: 0.95em 1.15em;
  }

  .rsys-reservation-venue-name {
    font-size: 0.9rem;
  }

  .reservation-right .reservation-banner strong {
    font-size: 1.28em;
  }

  .reservation-left .calendar-wrapper {
    padding: 0.65em;
  }
}

ワンポイントアドバイス

同じボタン構造でも、配色・形状・配置を組み合わせることで印象を大きく変えることができます。まずは「色を変える」「並びを変える」など、変化の方向を一つ決めてから調整するとまとまりやすくなります。

注意点

背景色やボタン色を大きく変更する場合は、文字色やアイコン色とのコントラストを必ず確認してください。特に電話番号やカレンダーの日付は、雰囲気よりも視認性を優先することをおすすめします。

モーダル固定TOP

モーダル上部に固定表示されるステッパー・会場名・来場時間表示・週ナビの見た目を、追加CSSで調整する方法を紹介します。

カスタマイズのポイント

パターン①は、既存レイアウトを維持したまま色調だけを変更する例です。
パターン②は、4分割の薄型ステップバーへ整理し、よりフラットで実用的な印象へ調整する例です。
パターン③は、番号を疑似要素で追加し、横一列のフェミニンなフラットバーとして見せ方を変える例です。
会場名・来場時間表示や週ナビも含めて配色を揃えると、固定TOP全体の統一感を出しやすくなります。

対象DOM

HTML構造

<div class="rsys-modal-fixed-top" data-rsys-modal-fixed="top">
  <!-- ステップナビ -->
  <div class="stepper">
    <div class="step active">
      <div class="circle">1</div>
      <span>step 1</span>
      <div class="label">日程と時間の選択</div>
    </div>
    <div class="step">
      <div class="circle">2</div>
      <span>step 2</span>
      <div class="label">お客様情報の入力</div>
    </div>
    <div class="step">
      <div class="circle">3</div>
      <span>step 3</span>
      <div class="label">入力内容のご確認</div>
    </div>
    <div class="step">
      <div class="circle">4</div>
      <span>step 4</span>
      <div class="label">受付完了</div>
    </div>
  </div>

  <!-- 会場名 / 来場時間 -->
  <div class="reservation-meta">
    <span class="meta-block" data-rsys-meta="venue">
      <span class="meta-label">【 会場 】</span>
      <span class="meta-value meta-venue">世田谷区等々力7丁目 平屋5LDK</span>
    </span>

    <span class="meta-separator">｜</span>

    <span class="meta-block" data-rsys-meta="datetime">
      <span class="meta-label">【 ご来場時間 】</span>
      <span class="meta-value meta-datetime"></span>
    </span>
  </div>

  <!-- 週ナビ -->
  <div class="rsys-week-nav" data-ui="week-nav">
    <button
      id="prevWeekBtn"
      class="rsys-week-nav-btn rsys-week-nav-btn-prev disabled"
      type="button"
      data-role="week-prev"
      aria-label="前の週"
      disabled=""
    >
      <i class="rsys-icon fa-solid fa-caret-left rsys-week-nav-icon" aria-hidden="true"></i>
      <span class="rsys-week-nav-btn-text">前の週</span>
    </button>

    <span
      id="currentWeekLabel"
      class="rsys-week-nav-label"
      data-role="week-label"
      aria-live="polite"
    >2026年3月29日 ～ 4月4日</span>

    <button
      id="nextWeekBtn"
      class="rsys-week-nav-btn rsys-week-nav-btn-next"
      type="button"
      data-role="week-next"
      aria-label="次の週"
    >
      <span class="rsys-week-nav-btn-text">次の週</span>
      <i class="rsys-icon fa-solid fa-caret-right rsys-week-nav-icon" aria-hidden="true"></i>
    </button>
  </div>

  <!-- スクロールサイン -->
  <div
    class="rsys-modal-scroll-sign rsys-modal-scroll-sign-top"
    data-role="modal-scroll-sign-top"
    data-rsys-scroll-sign="top"
    aria-hidden="true"
    style="display: none; top: 318px;"
  >
    <i class="rsys-icon fa-regular fa-circle-up rsys-modal-scroll-sign-icon" aria-hidden="true"></i>
  </div>
</div>

対象セレクター

対象CSS

/* モーダル固定TOP全体 */
.rsys-modal-fixed-top
[data-rsys-modal-fixed="top"]

/* ステップガイド全体 */
.stepper
.step
.step.active
.step.complete
.step .circle
.step > span
.step .label
.step:nth-child(1) .label::before
.step:nth-child(2) .label::before
.step:nth-child(3) .label::before
.step:nth-child(4) .label::before

/* 会場・来場時間表示 */
.reservation-meta
.meta-block
.meta-label
.meta-value
.meta-venue
.meta-datetime
.meta-datetime:empty::before
.meta-separator

/* 週ナビ全体 */
.rsys-week-nav
.rsys-week-nav-btn
.rsys-week-nav-btn-prev
.rsys-week-nav-btn-next
.rsys-week-nav-btn.disabled
.rsys-week-nav-btn:disabled
.rsys-week-nav-btn-text
.rsys-week-nav-label
.rsys-week-nav-icon

/* スクロールサイン */
.rsys-modal-scroll-sign
.rsys-modal-scroll-sign-top
.rsys-modal-scroll-sign-icon

カスタマイズ例（追加CSS） / パターン① 現行レイアウト維持 / 和風テーマ

追加CSS

/* ========================================
   Modal Fixed TOP Custom Pattern ①
   現行レイアウト維持 / 和風テーマ
======================================== */

/* ----------------------------------------
   和風テーマ用トークン
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  --rsys-wa-bg: #f6f1e7;
  --rsys-wa-bg-soft: #fbf8f2;
  --rsys-wa-paper: #fffdf8;
  --rsys-wa-line: #cdbb90;
  --rsys-wa-line-soft: #ddd2b7;
  --rsys-wa-ink: #2f2a22;
  --rsys-wa-brown: #6c5840;
  --rsys-wa-gold: #b79b5b;
  --rsys-wa-gold-dark: #8f7742;
  --rsys-wa-red: #8f3b2e;
  --rsys-wa-green: #4f6b3c;
  --rsys-wa-shadow: rgba(47, 42, 34, 0.08);
}

/* ----------------------------------------
   固定TOP全体
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  background:
    linear-gradient(180deg, #fffefb 0%, var(--rsys-wa-bg) 100%);
  border-bottom: 1px solid var(--rsys-wa-line-soft);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.65),
    0 4px 14px var(--rsys-wa-shadow);
}

/* ----------------------------------------
   ステッパー全体
---------------------------------------- */
[data-rsys-modal-fixed="top"] .stepper {
  max-width: 980px;
  padding: 18px 20px 8px;
}

/* 線 */
[data-rsys-modal-fixed="top"] .step:not(:last-child)::after {
  top: 17px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      var(--rsys-wa-line) 0%,
      #dbcda9 50%,
      var(--rsys-wa-line) 100%
    );
  opacity: 0.95;
}

/* 各ステップ */
[data-rsys-modal-fixed="top"] .step {
  padding: 0 8px;
}

/* STEP 表記 */
[data-rsys-modal-fixed="top"] .step span {
  margin-top: 4px;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Noto Serif JP", serif;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rsys-wa-brown);
  background: transparent;
  text-transform: lowercase;
}

/* 丸番号 */
[data-rsys-modal-fixed="top"] .step .circle {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #c9b173 0%, var(--rsys-wa-gold) 100%);
  border: 1px solid var(--rsys-wa-gold-dark);
  color: #fffdf8;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    0 2px 6px rgba(47, 42, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ラベル */
[data-rsys-modal-fixed="top"] .step .label {
  margin-top: 2px;
  padding-top: 6px;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rsys-wa-brown);
}

/* 現在のステップ */
[data-rsys-modal-fixed="top"] .step.active .circle {
  background:
    linear-gradient(180deg, #a44839 0%, var(--rsys-wa-red) 100%);
  border-color: #7a2f24;
  color: #fffdf8;
}

[data-rsys-modal-fixed="top"] .step.active span {
  color: var(--rsys-wa-red);
}

[data-rsys-modal-fixed="top"] .step.active .label {
  color: var(--rsys-wa-ink);
}

/* 完了済みステップ */
[data-rsys-modal-fixed="top"] .step.complete .circle {
  background:
    linear-gradient(180deg, #5f7b49 0%, var(--rsys-wa-green) 100%);
  border-color: #425833;
  color: #fffdf8;
}

[data-rsys-modal-fixed="top"] .step.complete span {
  color: var(--rsys-wa-green);
}

[data-rsys-modal-fixed="top"] .step.complete .label {
  color: var(--rsys-wa-brown);
}

/* 未到達ステップ */
[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) .circle {
  background:
    linear-gradient(180deg, #aca08c 0%, #8f8778 100%);
  border-color: #7b7366;
  color: #fffdf8;
}

[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) span,
[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) .label {
  color: #7c7366;
}

/* ----------------------------------------
   会場 / 来場時間表示
---------------------------------------- */
[data-rsys-modal-fixed="top"] .reservation-meta {
  max-width: 960px;
  margin: 6px auto 0;
  padding: 14px 18px 12px;
  border-top: 1px solid var(--rsys-wa-line-soft);
  border-bottom: 1px solid var(--rsys-wa-line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 100%);
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--rsys-wa-ink);
  letter-spacing: 0.03em;
}

[data-rsys-modal-fixed="top"] .meta-block {
  gap: 6px;
}

[data-rsys-modal-fixed="top"] .meta-label {
  color: var(--rsys-wa-red);
  font-weight: 800;
}

[data-rsys-modal-fixed="top"] .meta-value {
  color: var(--rsys-wa-ink);
  font-weight: 700;
}

[data-rsys-modal-fixed="top"] .meta-separator {
  margin: 0 12px;
  color: #b9a782;
  opacity: 1;
}

[data-rsys-modal-fixed="top"] .meta-datetime:empty::before {
  content: "－－－未選択－－－";
  color: #8f8778;
  opacity: 1;
}

/* ----------------------------------------
   週ナビ
---------------------------------------- */
[data-rsys-modal-fixed="top"] .rsys-week-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px 14px;
  gap: 14px;
  background:
    linear-gradient(180deg, var(--rsys-wa-paper) 0%, #f8f3e7 100%);
  border-top: 1px solid rgba(255,255,255,0.7);
  border-bottom: 1px solid var(--rsys-wa-line);
}

/* 中央ラベル */
[data-rsys-modal-fixed="top"] .rsys-week-nav-label {
  min-width: 290px;
  padding: 9px 16px;
  border: 1px solid var(--rsys-wa-line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 4px rgba(47, 42, 34, 0.05);
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--rsys-wa-ink);
}

/* ボタン共通 */
[data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rsys-wa-gold-dark);
  background:
    linear-gradient(180deg, #c9b173 0%, var(--rsys-wa-gold) 100%);
  color: #fffdf8;
  font-family:
    "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow:
    0 2px 6px rgba(47, 42, 34, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-btn:hover:not(.disabled):not(:disabled) {
  background:
    linear-gradient(180deg, #bea567 0%, var(--rsys-wa-gold-dark) 100%);
  border-color: var(--rsys-wa-gold-dark);
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px rgba(47, 42, 34, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* disabled */
[data-rsys-modal-fixed="top"] .rsys-week-nav-btn.disabled,
[data-rsys-modal-fixed="top"] .rsys-week-nav-btn:disabled {
  background:
    linear-gradient(180deg, #d9d1c2 0%, #c5bcab 100%);
  border-color: #b4aa98;
  color: #f8f4ec;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

/* アイコン */
[data-rsys-modal-fixed="top"] .rsys-week-nav-icon {
  top: 0;
  width: 15px;
  height: 15px;
  color: inherit;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-btn-text {
  line-height: 1;
}

/* ----------------------------------------
   スクロールサイン
---------------------------------------- */
[data-rsys-modal-fixed="top"] .rsys-modal-scroll-sign-icon {
  font-size: 28px;
  color: rgba(108, 88, 64, 0.88);
  filter: drop-shadow(0 2px 4px rgba(47, 42, 34, 0.14));
}

/* ----------------------------------------
   スマホ
---------------------------------------- */
@media (max-width: 768px) {
  [data-rsys-modal-fixed="top"] .stepper {
    padding: 14px 12px 6px;
  }

  [data-rsys-modal-fixed="top"] .step .circle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }

  [data-rsys-modal-fixed="top"] .step span {
    font-size: 10px;
  }

  [data-rsys-modal-fixed="top"] .step .label {
    font-size: 11px;
    line-height: 1.45;
  }

  [data-rsys-modal-fixed="top"] .reservation-meta {
    padding: 12px 12px 10px;
    font-size: 13px;
    line-height: 1.75;
  }

  [data-rsys-modal-fixed="top"] .meta-separator {
    margin: 0 8px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav {
    padding: 8px 8px 12px;
    gap: 8px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-label {
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (max-width: 500px) {
  [data-rsys-modal-fixed="top"] .reservation-meta {
    font-size: 12px;
  }

  [data-rsys-modal-fixed="top"] .meta-block {
    display: inline;
  }

  [data-rsys-modal-fixed="top"] .meta-label,
  [data-rsys-modal-fixed="top"] .meta-value {
    display: inline;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav {
    gap: 6px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
    padding: 6px 8px;
    font-size: 10px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-label {
    font-size: 11px;
    padding: 7px 8px;
  }
}

カスタマイズ例（追加CSS） / パターン② 薄型ステップバー + 和風

追加CSS

/* ========================================
   Modal Fixed TOP Custom Pattern ②（改）
   薄型ステップバー + 和風
======================================== */

/* ----------------------------------------
   和風トークン
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  --rsys-wa-bg: #ebe3d6;
  --rsys-wa-bg-strong: #e4dac8;
  --rsys-wa-line: #cdbb90;
  --rsys-wa-ink: #2f2a22;
  --rsys-wa-brown: #6c5840;
  --rsys-wa-gold: #b79b5b;
  --rsys-wa-red: #8f3b2e;
}

/* ----------------------------------------
   固定TOP：背景レイヤー強化（←今回のキモ）
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  background:
    linear-gradient(180deg, #f8f4ec 0%, var(--rsys-wa-bg) 100%);
  border-bottom: 1px solid var(--rsys-wa-line);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.05);
}

/* ----------------------------------------
   ステップバー：薄型グリッド
---------------------------------------- */
[data-rsys-modal-fixed="top"] .stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

/* 線は完全排除 */
[data-rsys-modal-fixed="top"] .step:not(:last-child)::after {
  display: none;
}

/* ----------------------------------------
   各ステップ：フラット化
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step {
  padding: 10px 6px 8px;
  border-right: 1px solid var(--rsys-wa-line);
  text-align: center;
  background: transparent;
}

/* 最後の線は不要 */
[data-rsys-modal-fixed="top"] .step:last-child {
  border-right: none;
}

/* ----------------------------------------
   STEP表記
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--rsys-wa-brown);
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 丸番号は非表示（スリム化） */
[data-rsys-modal-fixed="top"] .step .circle {
  display: none;
}

/* ----------------------------------------
   ラベル（メイン）
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step .label {
  margin-top: 2px;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--rsys-wa-ink);
}

/* ----------------------------------------
   ACTIVE（現在ステップ）
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step.active {
  background: var(--rsys-wa-bg-strong);
}

[data-rsys-modal-fixed="top"] .step.active span {
  color: var(--rsys-wa-red);
}

[data-rsys-modal-fixed="top"] .step.active .label {
  color: var(--rsys-wa-ink);
}

/* ----------------------------------------
   完了
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step.complete {
  opacity: 0.75;
}

/* ----------------------------------------
   未到達
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) {
  opacity: 0.5;
}

/* ----------------------------------------
   会場 / 来場時間
---------------------------------------- */
[data-rsys-modal-fixed="top"] .reservation-meta {
  max-width: 960px;
  margin: 6px auto 0;
  padding: 10px 12px;
  font-size: 14px;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--rsys-wa-ink);
  border-top: 1px solid var(--rsys-wa-line);
}

[data-rsys-modal-fixed="top"] .meta-label {
  color: var(--rsys-wa-red);
  font-weight: 700;
}

/* ----------------------------------------
   週ナビ（軽量）
---------------------------------------- */
[data-rsys-modal-fixed="top"] .rsys-week-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 10px 10px;
  background: transparent;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-label {
  font-size: 13px;
  font-family:
    "Yu Mincho", serif;
}

/* ボタンは軽く */
[data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
  padding: 6px 10px;
  font-size: 12px;
}

カスタマイズ例（追加CSS） / パターン③ フェミニン / 横一列フラットバー

追加CSS

/* ========================================
   Modal Fixed TOP Custom Pattern ③（改）
   フェミニン / 横一列フラットバー
   ①②③④は文字と横並び
======================================== */

/* ----------------------------------------
   フェミニントークン
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  --rsys-fem-bg: #f6e8ef;
  --rsys-fem-bg-strong: #f0dbe5;
  --rsys-fem-panel: #fff8fb;
  --rsys-fem-line: #e2c4d0;
  --rsys-fem-line-strong: #d8afbf;
  --rsys-fem-accent: #cf5f8a;
  --rsys-fem-accent-dark: #a94770;
  --rsys-fem-text: #3b2c33;
  --rsys-fem-text-soft: #8d7881;
  --rsys-fem-shadow: rgba(207, 95, 138, 0.10);
}

/* ----------------------------------------
   固定TOP全体
   ※背景は前回より明確に見える強さ
---------------------------------------- */
[data-rsys-modal-fixed="top"] {
  background:
    linear-gradient(180deg, #fbf3f7 0%, var(--rsys-fem-bg) 100%);
  border-bottom: 1px solid var(--rsys-fem-line);
  box-shadow:
    0 4px 14px var(--rsys-fem-shadow),
    inset 0 -1px 0 rgba(255,255,255,0.72);
}

/* ----------------------------------------
   ステップバー全体
---------------------------------------- */
[data-rsys-modal-fixed="top"] .stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  min-height: 0;
  border-top: 1px solid var(--rsys-fem-line);
  border-left: 1px solid var(--rsys-fem-line);
  background: rgba(255, 255, 255, 0.14);
}

/* 既存の線を消す */
[data-rsys-modal-fixed="top"] .step:not(:last-child)::after {
  display: none;
}

/* ----------------------------------------
   各ステップ
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step {
  min-height: 66px;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--rsys-fem-line);
  border-bottom: 1px solid var(--rsys-fem-line);
  background: rgba(255, 255, 255, 0.16);
  text-align: center;
}

/* circle 非表示 */
[data-rsys-modal-fixed="top"] .step .circle {
  display: none;
}

/* step 1 等は非表示 */
[data-rsys-modal-fixed="top"] .step > span {
  display: none;
}

/* ----------------------------------------
   ラベル
   ※番号は横並び before
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step .label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38em;
  margin: 0;
  padding: 0;
  font-family:
    "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rsys-fem-text);
}

/* 番号共通 */
[data-rsys-modal-fixed="top"] .step .label::before {
  display: inline-block;
  font-family:
    "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--rsys-fem-accent-dark);
}

/* 各番号 */
[data-rsys-modal-fixed="top"] .step:nth-child(1) .label::before {
  content: "①";
}
[data-rsys-modal-fixed="top"] .step:nth-child(2) .label::before {
  content: "②";
}
[data-rsys-modal-fixed="top"] .step:nth-child(3) .label::before {
  content: "③";
}
[data-rsys-modal-fixed="top"] .step:nth-child(4) .label::before {
  content: "④";
}

/* ----------------------------------------
   active
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step.active {
  background:
    linear-gradient(180deg, #f9e2eb 0%, var(--rsys-fem-bg-strong) 100%);
}

[data-rsys-modal-fixed="top"] .step.active .label {
  color: #8c2f57;
}

[data-rsys-modal-fixed="top"] .step.active .label::before {
  color: var(--rsys-fem-accent);
}

/* ----------------------------------------
   complete
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step.complete {
  background:
    linear-gradient(180deg, #fff7fa 0%, #f7e8ef 100%);
}

[data-rsys-modal-fixed="top"] .step.complete .label::before {
  color: #bf7395;
}

/* ----------------------------------------
   未到達
---------------------------------------- */
[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) .label {
  color: var(--rsys-fem-text-soft);
}

[data-rsys-modal-fixed="top"] .step:not(.active):not(.complete) .label::before {
  color: #c9a8b7;
}

/* ----------------------------------------
   会場 / 来場時間
---------------------------------------- */
[data-rsys-modal-fixed="top"] .reservation-meta {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--rsys-fem-line);
  background: transparent;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--rsys-fem-text);
}

[data-rsys-modal-fixed="top"] .meta-label {
  color: var(--rsys-fem-accent);
}

[data-rsys-modal-fixed="top"] .meta-value {
  color: var(--rsys-fem-text);
}

[data-rsys-modal-fixed="top"] .meta-separator {
  margin: 0 10px;
  color: #ccb5bf;
  opacity: 1;
}

[data-rsys-modal-fixed="top"] .meta-datetime:empty::before {
  content: "－－－未選択－－－";
  color: #9f8a93;
  opacity: 1;
}

/* ----------------------------------------
   週ナビ
---------------------------------------- */
[data-rsys-modal-fixed="top"] .rsys-week-nav {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 12px 10px;
  gap: 10px;
  background: transparent;
  border-bottom: 1px solid var(--rsys-fem-line);
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rsys-fem-text);
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rsys-fem-line-strong);
  background: #fffafb;
  color: var(--rsys-fem-accent-dark);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-btn:hover:not(.disabled):not(:disabled) {
  background: #fff1f6;
  border-color: #dca8bc;
  color: var(--rsys-fem-accent-dark);
  transform: none;
  box-shadow: none;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-btn.disabled,
[data-rsys-modal-fixed="top"] .rsys-week-nav-btn:disabled {
  background: #faf5f7;
  border-color: #eadbe2;
  color: #c9b8bf;
}

[data-rsys-modal-fixed="top"] .rsys-week-nav-icon {
  color: inherit;
}

/* ----------------------------------------
   スクロールサイン
---------------------------------------- */
[data-rsys-modal-fixed="top"] .rsys-modal-scroll-sign-icon {
  color: rgba(182, 97, 132, 0.82);
}

/* ----------------------------------------
   レスポンシブ
---------------------------------------- */
@media (max-width: 768px) {
  [data-rsys-modal-fixed="top"] .step {
    min-height: 58px;
    padding: 0 8px;
  }

  [data-rsys-modal-fixed="top"] .step .label {
    font-size: 12px;
    gap: 0.28em;
  }

  [data-rsys-modal-fixed="top"] .step .label::before {
    font-size: 14px;
  }

  [data-rsys-modal-fixed="top"] .reservation-meta {
    font-size: 12px;
    padding: 10px 10px 8px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav {
    padding: 7px 8px 9px;
    gap: 6px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
  }

  [data-rsys-modal-fixed="top"] .rsys-week-nav-label {
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  [data-rsys-modal-fixed="top"] .step {
    min-height: 54px;
    padding: 0 4px;
  }

  [data-rsys-modal-fixed="top"] .step .label {
    font-size: 10px;
  }

  [data-rsys-modal-fixed="top"] .step .label::before {
    font-size: 12px;
  }
}

ワンポイントアドバイス

モーダル固定TOPは、ステップの見せ方を変えるだけでも全体の印象が大きく変わります。レイアウトを変える場合でも、会場名・来場時間・週ナビのトーンを揃えると、固定領域全体の統一感を保ちやすくなります。

注意点

ステッパーのラベルや週ナビの文字色を変更する際は、背景色とのコントラストを必ず確認してください。特にパターン②・③のように情報密度を上げるレイアウトでは、雰囲気よりも視認性と判読性を優先することをおすすめします。

予約画面 / カレンダーナビゲーション

STEP1上部に表示される週ナビゲーションの見た目を、追加CSSで調整するためのガイドです。前週・次週ボタン、中央の日付ラベルの配色や文字の印象を変えることで、予約画面全体の雰囲気に合わせたデザインへ調整できます。

カスタマイズのポイント

週ナビは、背景色だけでなく文字の印象でも雰囲気が大きく変わります。
中央ラベルは日付表示の視認性が重要なため、装飾よりも読みやすさを優先すると実用的です。
ボタンは前週・次週の操作性が伝わるよう、文字サイズ・太さ・余白を調整すると印象が変わります。
今回のように、背景は共通のまま内部要素だけ変更する形でも十分にテーマ差を出せます。

対象DOM

HTML構造

<div class="rsys-week-nav" data-ui="week-nav">
  <button
    id="prevWeekBtn"
    class="rsys-week-nav-btn rsys-week-nav-btn-prev disabled"
    type="button"
    data-role="week-prev"
    aria-label="前の週"
    disabled=""
  >
    <i class="rsys-icon fa-solid fa-caret-left rsys-week-nav-icon" aria-hidden="true"></i>
    <span class="rsys-week-nav-btn-text">前の週</span>
  </button>

  <span
    id="currentWeekLabel"
    class="rsys-week-nav-label"
    data-role="week-label"
    aria-live="polite"
  >2026年3月29日 ～ 4月4日</span>

  <button
    id="nextWeekBtn"
    class="rsys-week-nav-btn rsys-week-nav-btn-next"
    type="button"
    data-role="week-next"
    aria-label="次の週"
  >
    <span class="rsys-week-nav-btn-text">次の週</span>
    <i class="rsys-icon fa-solid fa-caret-right rsys-week-nav-icon" aria-hidden="true"></i>
  </button>
</div>

対象セレクター

対象	セレクター	主な変更内容
週ナビ全体	`.rsys-week-nav`	背景色・余白・全体の見せ方
中央の日付ラベル	`.rsys-week-nav-label`	フォント・文字サイズ・太さ・色
ボタン共通	`.rsys-week-nav-btn`	背景・枠線・角丸・文字の印象
前週ボタン	`.rsys-week-nav-btn-prev`	個別の余白・アイコン位置調整
次週ボタン	`.rsys-week-nav-btn-next`	個別の余白・アイコン位置調整
ボタン内文字	`.rsys-week-nav-btn-text`	文字サイズ・太さ・字間
矢印アイコン	`.rsys-week-nav-icon`	色・サイズ・余白の調整
非活性状態	`.rsys-week-nav-btn.disabled`, `.rsys-week-nav-btn:disabled`	色を弱めて操作不可を表現

カスタマイズ例（追加CSS） / パターン① 和風

週ナビゲーション和風カスタマイズの参考画像 — 和風カスタマイズの追加CSS例です。

追加CSS

/* ========================================
   Week Nav Custom Pattern ① 和風（内部のみ）
   Google Fonts:
   Zen Old Mincho
======================================== */

/* 例:
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700;900&display=swap');
*/

/* ラベル */
.rsys-week-nav-label {
  font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #2b241b;
}

/* ボタン */
.rsys-week-nav-btn {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #7a6233;
  border-radius: 0;
  background: rgba(255, 248, 232, 0.85);
  color: #4a3920;
  font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  box-shadow:
    0 2px 6px rgba(47, 42, 34, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.rsys-week-nav-btn:hover:not(.disabled):not(:disabled) {
  background: rgba(255, 250, 240, 0.96);
  border-color: #6d562b;
  color: #2f2415;
}

/* disabled */
.rsys-week-nav-btn.disabled,
.rsys-week-nav-btn:disabled {
  background: rgba(210, 198, 171, 0.9);
  border-color: #a18e68;
  color: #7f7258;
  box-shadow: none;
}

/* アイコン */
.rsys-week-nav-icon {
  font-size: 13px;
  color: currentColor;
}

.rsys-week-nav-btn-prev .rsys-week-nav-icon {
  margin-right: 0.35em;
}

.rsys-week-nav-btn-next .rsys-week-nav-icon {
  margin-left: 0.35em;
}

フェミニン風について

フェミニン風に調整する場合も、基本的な対象セレクターは同じです。フォントを丸みのある書体へ変更し、文字サイズ・ウェイト・角丸・色味をやわらかく整えることで、やさしい印象の週ナビへ変更できます。

ワンポイントアドバイス

週ナビはカレンダー本体の直前に表示されるため、装飾を強くしすぎるよりも、「中央の日付がひと目で読めること」と「前週・次週ボタンが自然に押せそうに見えること」を優先すると、実用性の高いデザインに仕上がります。

注意点

.rsys-week-nav-label は日付が動的に入るため、固定幅を厳しくしすぎると崩れる場合があります。
.rsys-week-nav-btn は非活性状態があるため、通常時と disabled 時の差を分かりやすくしてください。
アイコンを消す場合は、前週・次週の方向が文字だけでも十分伝わるか確認してください。

予約画面 / 週カレンダー（STEP1）

STEP1に表示される週カレンダーは、背景色やセルの見せ方を調整することで、表形式のままでも印象を大きく変えることができます。グリッド線を使った従来のテーブル表示から、カードのように見せるレイアウトへ変更することで、より視覚的に分かりやすく、デザイン性の高いUIへ調整可能です。

カスタマイズのポイント

.step-content-1 に背景色を設定すると、カレンダー全体の空気感を大きく変えられます
border-collapse: separate と border-spacing を使うことで、セルをカード状に見せることができます
th / td の角丸や影の有無によって、硬い印象・やわらかい印象を作り分けられます
ヘッダー行と時間列を別トーンにすると、視認性を保ったままテーマ性を強められます
アイコンカラーもテーマに合わせて調整すると、全体の統一感が高まります

対象DOM

HTML構造

<div class="step-content step-content-1">
  <div class="reservation-grid-container" data-ui="reservation-grid">
    <div class="reservation-grid-wrapper">
      <table class="reservation-grid" data-role="week-grid">
        <thead>
          <tr class="calendar-header-row">
            <th class="time-label"></th>
            <th>...</th>
          </tr>
        </thead>
        <tbody>
          <!-- 時間行・各セル -->
        </tbody>
      </table>
    </div>
  </div>
</div>

対象セレクター

対象	セレクター	主な調整内容
全体背景	`.step-content-1`	背景色・空気感
外枠	`.reservation-grid-container`	全体の見せ方
ラッパー	`.reservation-grid-wrapper`	背景・影
テーブル	`.reservation-grid`	spacing・構造
セル共通	`.reservation-grid th, .reservation-grid td`	角丸・影・背景
ヘッダー	`.reservation-grid thead th`	日付行の見た目
時間列	`.reservation-grid th:first-child`	左列の強調
通常セル	`.reservation-grid td`	ベース調整
hover	`.reservation-grid td:not(.disabled):hover`	操作時の変化
無効セル	`.reservation-grid td.disabled, .reservation-grid td.closed-day`	不可・休業表現
状態アイコン	`.rsys-slot-status-icon`	色・トーン

カスタマイズ例（追加CSS） / 和風

追加CSS

/* Week Grid Custom Pattern ① 和風 */

.step-content-1 {
  background: linear-gradient(180deg, #f5eee2 0%, #ece2d1 100%);
}

.reservation-grid {
  border-collapse: separate;
  border-spacing: 6px;
}

.reservation-grid th,
.reservation-grid td {
  border-radius: 2px;
  background: rgba(255, 251, 244, 0.96);
  box-shadow: 0 2px 6px rgba(47, 42, 34, 0.08);
}

.reservation-grid thead th {
  background: linear-gradient(180deg, #d6c39d 0%, #c9b180 100%);
  color: #2f2a22;
}

.reservation-grid td:not(.disabled):hover {
  background: #f8edd8;
}

フェミニン風について

フェミニン風に調整する場合は、背景を明るくし、角丸を大きめに設定し、影を弱めることで、やわらかく軽やかな印象に仕上がります。

注意点

border-spacing を大きくしすぎると連続性が失われます
状態アイコンは視認性を優先してください

予約画面 / 状態アイコン（凡例）

週カレンダー下部に表示される状態アイコンの凡例です。このブロックはレイアウトを大きく変えるよりも、アイコン色や文字の印象を調整することで、カレンダー全体の雰囲気に合わせやすくなります。

カスタマイズのポイント

このブロックは、アイコン色の調整が最も印象に影響します
背景色を入れると、凡例全体の視認性が上がります
フォントファミリーを変えるだけでも、カレンダー本体との統一感が出ます
装飾を増やしすぎるよりも、意味がひと目で伝わることを優先するのが実用的です

対象DOM

HTML構造

<div class="iconinfo">
  <div class="legend-item available">
    <i class="rsys-icon fa-solid fa-circle-dot"></i>
    <span>受付中</span>
  </div>
  <div class="legend-item partial">
    <i class="rsys-icon fa-solid fa-circle-exclamation"></i>
    <span>同席あり</span>
  </div>
  <div class="legend-item unavailable">
    <i class="rsys-icon fa-solid fa-circle-xmark"></i>
    <span>予約不可</span>
  </div>
  <div class="legend-item closed">
    <i class="rsys-icon fa-solid fa-circle-minus"></i>
    <span>休業日</span>
  </div>
</div>

対象セレクター

対象	セレクター	主な調整内容
凡例全体	`.iconinfo`	背景色・上下境界線
各項目	`.iconinfo .legend-item`	フォント・文字サイズ・文字色
アイコン共通	`.iconinfo .rsys-icon`	サイズ
受付中	`.iconinfo .available .rsys-icon`	アイコン色
同席あり	`.iconinfo .partial .rsys-icon`	アイコン色
予約不可	`.iconinfo .unavailable .rsys-icon`	アイコン色
休業日	`.iconinfo .closed .rsys-icon`	アイコン色

追加CSS参考例

追加CSS

/* ========================================
   Icon Info Custom Sample
======================================== */

.iconinfo {
  background: linear-gradient(180deg, #efe6d6 0%, #e4d7bf 100%);
  border-top: 1px solid #d2c3a6;
  border-bottom: 1px solid #d2c3a6;
}

.iconinfo .legend-item {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 13px;
  font-weight: 600;
  color: #3a3328;
}

.iconinfo .rsys-icon {
  font-size: 14px;
}

.iconinfo .available .rsys-icon {
  color: #3f6b7a;
}

.iconinfo .partial .rsys-icon {
  color: #5b7d4f;
}

.iconinfo .unavailable .rsys-icon {
  color: #b14a3a;
}

.iconinfo .closed .rsys-icon {
  color: #9a8f7a;
}

解説

このブロックは、背景色・アイコン色・フォントを調整するだけでも印象が大きく変わります。カレンダー本体のテーマカラーに合わせてアイコン色を整えると、UI全体に統一感が出ます。

ワンポイントアドバイス

このブロックは装飾を見せる場所ではなく、状態の意味を正確に伝える場所です。アイコン色の差が分かりやすい状態を保つことを優先してください。

注意点

.iconinfo は横方向に広く使うため、padding や並びを大きく変更しないほうが安全です
状態アイコンは色差が小さくなりすぎないよう注意してください
フォント変更時は可読性を優先してください

Step2｜お客様情報入力フォーム

予約画面の Step2 に表示されるお客様情報入力フォームです。このブロックは入力項目数が多いため、背景色・セクション面・入力欄・必須表示の印象を調整すると、フォーム全体の雰囲気を大きく変えることができます。

対象DOM

HTML構造

<div class="step-content step-content-2" data-rsys-step="2">
  <div id="step2Form" class="rvs-form" data-step2-valid="0" data-rsys-form="step2">

    <div class="rvs-section" data-rsys-form-section="customer">
      <div class="rvs-row" data-rsys-field-row="name">
        <div class="rvs-label" data-rsys-label="name">
          <span class="rvs-badge-required">必須</span>
          <span class="rvs-label-text">お名前</span>
        </div>
        <div class="rvs-field" data-rsys-field="name">
          <div class="rvs-grid-2" data-rsys-field-group="name">
            <div class="rvs-input" data-rsys-input-wrap="last_name">
              <label class="rvs-sub">姓</label>
              <input type="text" name="last_name" data-rsys-input="last_name">
            </div>
            <div class="rvs-input" data-rsys-input-wrap="first_name">
              <label class="rvs-sub">名</label>
              <input type="text" name="first_name" data-rsys-input="first_name">
            </div>
          </div>
          <span class="rvs-status" data-rsys-status="name" aria-hidden="true">
            <i class="rsys-icon fa-solid fa-circle-check rvs-status-icon"></i>
          </span>
        </div>
      </div>
    </div>

    <div class="rvs-section" data-rsys-form-section="address-note">...</div>
    <div class="rvs-section" data-rsys-form-section="policy">...</div>

  </div>
</div>

対象セレクター

対象	セレクター	主な変更内容
Step2 全体背景	`.step-content.step-content-2`	フォーム全体の背景色・空気感
セクション面	`.step-content-2 .rvs-section`	背景色・枠線・角丸
行区切り	`.step-content-2 .rvs-row`	境界線
項目名	`.step-content-2 .rvs-label-text`	文字色・太さ
必須バッジ	`.step-content-2 .rvs-badge-required`	背景色・文字色
任意バッジ	`.step-content-2 .rvs-badge-optional`	背景色・文字色
入力欄	`.step-content-2 .rvs-input input, .step-content-2 .rvs-input textarea`	背景色・枠線・角丸
フォーカス時	`.step-content-2 .rvs-input input:focus, .step-content-2 .rvs-input textarea:focus`	フォーカス色
エラー時	`.step-content-2 .rvs-input input[aria-invalid="true"], .step-content-2 .rvs-input textarea[aria-invalid="true"]`	エラー配色
OKアイコン	`.step-content-2 .rvs-status.is-ok .rvs-status-icon`	成功色
NGアイコン	`.step-content-2 .rvs-status.is-ng .rvs-status-icon`	エラー色
ポリシー枠	`.step-content-2 .policy-details`	枠線・背景
ポリシー本文	`.step-content-2 .policy-box`	本文背景・文字色
同意UI	`.step-content-2 .policy-consent`	背景・枠線
同意ON	`.step-content-2 .policy-consent input[type="checkbox"]:checked ~ .policy-consent-icon .policy-consent-icon-on`	チェック色
未入力メッセージ	`.step-content-2 .rvs-step2-required-message`	メッセージ配色

カスタマイズ例（追加CSS）

追加CSS

/* Step2 和風カラーテーマ */

.step-content.step-content-2 {
  background: #bfa46f;
  border-radius: 12px;
}

.step-content-2 .rvs-section {
  background: #f7f3e9;
  border: 2px solid #8b6f3d;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 18px;
}

.step-content-2 .rvs-row {
  border-bottom: 1px solid #d6c7a3;
}

.step-content-2 .rvs-label-text {
  color: #3b2f1c;
  font-weight: 700;
}

.step-content-2 .rvs-badge-required {
  background: #8c2f2f;
  color: #fff;
}

.step-content-2 .rvs-badge-optional {
  background: #6b7280;
  color: #fff;
}

.step-content-2 .rvs-input input,
.step-content-2 .rvs-input textarea {
  background: #ffffff;
  border: 2px solid #8b6f3d;
  border-radius: 6px;
}

.step-content-2 .rvs-input input:focus,
.step-content-2 .rvs-input textarea:focus {
  border-color: #2f5d8a;
  box-shadow: 0 0 0 2px rgba(47, 93, 138, 0.2);
}

.step-content-2 .rvs-input input[aria-invalid="true"],
.step-content-2 .rvs-input textarea[aria-invalid="true"] {
  background: #fbe4e4;
  border-color: #a33;
}

.step-content-2 .rvs-status.is-ok .rvs-status-icon {
  color: #2e7d32;
}

.step-content-2 .rvs-status.is-ng .rvs-status-icon {
  color: #b00020;
}

.step-content-2 .policy-details {
  border: 1px solid #8b6f3d;
  background: #fdfaf4;
}

.step-content-2 .policy-box {
  background: #ffffff;
  color: #2b2b2b;
}

.step-content-2 .policy-consent {
  background: #f3ead7;
  border: 1px solid #8b6f3d;
}

.step-content-2
  .policy-consent input[type="checkbox"]:checked
  ~ .policy-consent-icon
  .policy-consent-icon-on {
  color: #2e7d32;
}

.step-content-2 .rvs-step2-required-message {
  background: #fbe4e4;
  border: 1px solid #b00020;
  color: #8c2f2f;
}

解説

Step2 全体に金茶系の背景色を入れ、フォームブロックごとに明るい面を重ねることで、デフォルトから一目で印象が変わる構成になっています。入力欄は白を維持しつつ枠線だけテーマに寄せることで、視認性を落とさずに雰囲気を調整できます。

ワンポイントアドバイス

フォームは入力欄だけでなく、外側の背景とセクション面を同時に変えると印象が大きく変わります。

注意点

入力欄のコントラストは必ず確保してください
状態色（エラー・成功）は識別できる差を維持してください
ポリシーUIも含めて配色を統一するとまとまりやすくなります

Step2｜プライバシーポリシー・同意UI

プライバシーポリシーの表示および同意チェックUIのカスタマイズ対象です。このブロックはフォーム本体とは役割が異なるため、装飾よりも可読性と視認性の維持を重視して調整します。

対象DOM

HTML構造

<div class="rvs-row -full" data-rsys-field-row="policy">
  <div class="rvs-field" data-rsys-field="policy">

    <div class="policy-block">
      <details class="policy-details">
        <summary class="policy-summary">
          プライバシーポリシーを確認する
        </summary>

        <div class="policy-box">
          <!-- ポリシー本文 -->
        </div>
      </details>
    </div>

    <label class="policy-consent">
      <input type="checkbox" name="agree" required>
      <span class="policy-consent-icon">
        <i class="policy-consent-icon-off"></i>
        <i class="policy-consent-icon-on"></i>
      </span>
      <span class="pcx-text">プライバシーポリシーに同意する</span>
    </label>

  </div>

  <p class="rvs-step2-required-message"></p>
</div>

対象セレクター

要素	セレクター
ブロック全体	`.rvs-row.-full[data-rsys-field-row="policy"]`
枠（details）	`.policy-details`
開閉ヘッダー	`.policy-summary`
本文エリア	`.policy-box`
同意ラベル全体	`.policy-consent`
チェックアイコン	`.policy-consent-icon`
同意テキスト	`.pcx-text`
エラーメッセージ	`.rvs-step2-required-message`

解説

このブロックは入力フォームではなく、内容確認および同意を目的としたUIです。枠のデザイン、本文の読みやすさ、同意チェックの視認性に絞って調整するのが適切です。

ワンポイントアドバイス

本文エリアは明るい背景を維持すると読みやすさが保たれます。

注意点

背景色を濃くしすぎると本文が読みにくくなります
同意チェックUIは視認しやすい配色にしてください
policy-box のスクロール領域は変更しないでください
フォーム全体とトーンを揃えると自然に仕上がります

Step3｜確認画面

予約内容とお客様情報を確認する画面です。このブロックは入力画面ほど操作要素が多くないため、背景色・セクション枠・見出し帯・表の見せ方を整えることで、確認フェーズらしい落ち着いた印象へ調整できます。

対象DOM

HTML構造

<div class="step-content step-content-3">
  <div class="confirm-section">
    <h4>ご予約内容</h4>
    <table class="confirm-table">
      <tbody>
        <tr>
          <th>会場</th>
          <td id="c-venue">世田谷区等々力7丁目 平屋5LDK</td>
        </tr>
        <tr>
          <th>日時</th>
          <td id="c-date">2026年4月3日 12：00 時からのご予定</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="confirm-section">
    <h4>お客様情報</h4>
    <table class="confirm-table">
      <tbody>
        <tr>
          <th>お名前</th>
          <td id="c-name">Taiga Miura</td>
        </tr>
        <tr>
          <th>フリガナ</th>
          <td id="c-kana">ミウラ タイガ</td>
        </tr>
        <tr>
          <th>電話番号</th>
          <td id="c-tel">0312345678</td>
        </tr>
        <tr>
          <th>メール</th>
          <td id="c-email">earthcrew.yeti@gmail.com</td>
        </tr>
        <tr>
          <th>郵便番号</th>
          <td id="c-zip">854-0517</td>
        </tr>
        <tr>
          <th>ご住所</th>
          <td id="c-address">長崎県雲仙市小浜町マリーナ SEASIDE-ONE</td>
        </tr>
        <tr>
          <th>ご質問・ご要望</th>
          <td id="c-note"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

対象セレクター

対象	セレクター	主な変更内容
確認画面全体	`.step-content-3`	余白・全体バランス
セクション枠	`.step-content-3 .confirm-section`	背景色・枠線・角丸
セクション見出し	`.step-content-3 .confirm-section > h4`	背景帯・文字色・印象
見出しアクセント	`.step-content-3 h4::before`	補助色
テーブル全体	`.step-content-3 .confirm-table`	面の見せ方
行ホバー	`.step-content-3 .confirm-table tr:hover td`	軽い視認補助
見出しセル	`.step-content-3 .confirm-table th`	背景色・文字色・区切り
値セル	`.step-content-3 .confirm-table td`	文字色
行区切り	`.step-content-3 .confirm-table tr:not(:last-child) th, .step-content-3 .confirm-table tr:not(:last-child) td`	境界線
セクション間余白	`.step-content-3 .confirm-section + .confirm-section`	ブロック間余白

カスタマイズ例（追加CSS）

追加CSS

/* =========================================================
   Step3 確認画面｜和風カラーテーマ
========================================================= */

/* ▼ スクロール領域（※ガイド非掲載対象） */
.rsys-modal-scroll-body {
  background: #bfa46f;
}

/* ▼ 全体余白バランス */
.step-content-3 {
  padding: 20px 16px 90px;
}

/* ▼ セクション（和紙） */
.step-content-3 .confirm-section {
  background: #f7f3e9;
  border: 2px solid #8b6f3d;
  border-radius: 12px;
  overflow: hidden;
}

/* ▼ セクション見出し */
.step-content-3 .confirm-section > h4 {
  background: linear-gradient(
    90deg,
    #8b6f3d 0%,
    #a88a54 100%
  );
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ▼ 見出しアクセント（既存beforeを上書き） */
.step-content-3 h4::before {
  background: #d4b26a;
}

/* ▼ テーブル全体 */
.step-content-3 .confirm-table {
  background: #ffffff;
}

/* ▼ 行 */
.step-content-3 .confirm-table tr {
  transition: background 0.15s ease;
}

/* ▼ 行ホバー（軽い演出） */
.step-content-3 .confirm-table tr:hover td {
  background: #f3ead7;
}

/* ▼ 見出しセル */
.step-content-3 .confirm-table th {
  background: #f3ead7;
  color: #3b2f1c;
  font-weight: 700;
  border-right: 1px solid #d6c7a3;
}

/* ▼ 値セル */
.step-content-3 .confirm-table td {
  color: #2b2b2b;
}

/* ▼ 行区切り */
.step-content-3 .confirm-table tr:not(:last-child) th,
.step-content-3 .confirm-table tr:not(:last-child) td {
  border-bottom: 1px solid #d6c7a3;
}

/* ▼ セクション間余白 */
.step-content-3 .confirm-section + .confirm-section {
  margin-top: 20px;
}

/* =========================================================
   Step3 レスポンシブ調整
========================================================= */

@media screen and (max-width: 768px) {
  .step-content-3 {
    padding: 14px 10px 80px;
  }

  .step-content-3 .confirm-section {
    border-radius: 10px;
  }

  .step-content-3 .confirm-section > h4 {
    font-size: 14px;
    padding: 10px 12px;
  }

  .step-content-3 .confirm-table,
  .step-content-3 .confirm-table tbody,
  .step-content-3 .confirm-table tr {
    display: block;
    width: 100%;
  }

  .step-content-3 .confirm-table th,
  .step-content-3 .confirm-table td {
    display: block;
    width: 100%;
  }

  .step-content-3 .confirm-table th {
    border-right: none;
    border-bottom: none;
    font-size: 12px;
    padding: 8px 10px 4px;
    background: transparent;
    color: #8b6f3d;
  }

  .step-content-3 .confirm-table td {
    padding: 6px 10px 10px;
    border-bottom: 1px solid #d6c7a3;
    font-size: 14px;
  }

  .step-content-3 .confirm-table tr:last-child td {
    border-bottom: none;
  }
}

解説

今回のカスタマイズでは、Step2 の和風フォームとトーンを揃えるために、確認画面の外側にも金茶系の背景色を使い、セクション自体は和紙風の明るい面で包む構成にしています。入力画面から確認画面へ進んだときに、同じテーマの中で自然につながりつつ、フェーズが切り替わったことも視覚的に分かりやすくなります。

また、確認画面は入力欄がないため、フォームのような細かな装飾ではなく、セクション見出し・表の背景・見出しセル・区切り線の整え方が印象を左右します。値セルは白を維持し、ラベルセルのみを薄い和紙色にすることで、和風の雰囲気を出しつつ可読性を保っています。

レスポンシブでは、スマートフォン幅で th / td を縦積みに切り替えています。住所や長い会場名などの情報が詰まって見えやすい画面なので、モバイルではラベル → 値の順に積むことで、確認画面として読みやすい構成にしています。

ワンポイントアドバイス

確認画面は、入力画面のように派手な装飾を増やすよりも、セクション見出しと表の整理感を整える方が、実用性の高いカスタマイズになりやすいです。

注意点

値セルの背景まで濃くしすぎると、住所やメールアドレスなどの長文が読みにくくなります。
見出し帯を強く装飾する場合は、本文側は白または明るい背景にして情報の読みやすさを残してください。
スマホ表示では横並びテーブルのままだと詰まりやすいため、今回のように縦積みへ切り替える方が安全です。
.rsys-modal-scroll-body の背景色は全体演出として有効ですが、他ステップとの兼ね合いもあるため、ガイドでは参考セレクターとして前面に出しすぎない方が扱いやすいです。

Step4｜完了画面（送信結果）

予約送信後の結果を表示する画面です。ローディング表示・成功メッセージ・エラーメッセージの3状態を持ち、装飾よりも「読みやすさ」と「状態の分かりやすさ」が重要なブロックです。

対象DOM

HTML構造

<div class="step-content step-content-4">

  <!-- ローディング -->
  <div class="step4-loading">
    <i class="rsys-icon fa-solid fa-circle-notch loading-icon"></i>
    <p>予約を確定しています。しばらくお待ちください…</p>
  </div>

  <!-- 結果 -->
  <div class="step4-body">
    <h2 class="step4-title">ご予約を確定できませんでした。</h2>
    <p class="step4-message">エラーメッセージ</p>
  </div>

</div>

対象セレクター

対象	セレクター	調整内容
全体	`.step-content-4`	余白・中央配置・背景
ローディング領域	`.step4-loading`	配置・間隔
スピナー	`.step4-loading .loading-icon`	サイズ・色・回転印象
ローディング文言	`.step4-loading p`	フォントサイズ・色
結果全体	`.step4-body`	レイアウト
タイトル	`.step4-title`	成功/失敗の強調色・サイズ
メッセージ	`.step4-message`	行間・可読性

ワンポイントアドバイス

成功・失敗でタイトルの色だけ変えると視認性が大きく向上します
メッセージは改行が多くなるため、line-height を広めにすると読みやすくなります
ローディングは長く感じやすいため、スピナー＋短文でシンプルにまとめるのが適切です

注意点

背景色を強くしすぎると、メッセージの可読性が落ちます
フォントサイズを小さくしすぎると、特にスマホで読みにくくなります
成功・失敗でレイアウトを変えるのではなく、色・文言のみで状態を表現する方が安全です

予約画面 / フッターナビゲーション（ボタンエリア）

予約画面下部に表示される操作ボタン（戻る・閉じる・次へ）のデザイン調整例です。このエリアはユーザーの操作導線に直結するため、配色・強弱の設計が重要なポイントになります。特に「次へ」「送信」ボタンは、他のボタンよりも視覚的に強くすることで、迷わないUIを実現できます。

対象セレクター

対象CSS

.footer-buttons
.step-btn
.back-btn
.close-btn
.next-btn
.next-btn.is-submit
.step-btn.disabled

カスタマイズ例①（和風）

追加CSS

.footer-buttons {
  background: #bfa46f;
}

.step-btn {
  background: #ffffff;
  color: #5a4631;
  border: 1px solid #d8c7a3;
  border-radius: 6px;
  font-weight: 600;
}

.next-btn:not(.disabled):not(:disabled) {
  background: #8b6f3d;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.step-btn.disabled,
.step-btn:disabled {
  background: #e6dfd2;
  color: #b8ad96;
  border-color: #e6dfd2;
}

カスタマイズ例②（フェミニン）

追加CSS

.footer-buttons {
  background: #c17d97;
}

.step-btn {
  background: #ffffff;
  color: #c17d97;
  border: 1px solid #c17d97;
  border-radius: 999px;
  font-weight: 700;
}

.next-btn:not(.disabled):not(:disabled) {
  background: #c17d97;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-weight: 900;
}

.step-btn.disabled,
.step-btn:disabled {
  background: #e3ccd4;
  color: #ffffff;
  border-color: #e3ccd4;
}

ワンポイントアドバイス

「次へ」「送信」は他のボタンより明確に強調する
無効状態は色を落とし、押せないことが一目で分かるようにする
背景色とボタンのコントラストをしっかり取ると、操作性が向上します

注意点

.next-btn は状態（disabled / enabled）で見た目が変わるため、両方の指定が必要です
.step-btn.disabled は既存CSSで !important が使われているため、上書き時は注意してください
デザイン変更は追加CSSで上書きする形で行い、既存DOM・JSは変更しないでください