/* Course Menu Order — front
   配色は .cmo-theme-* のCSS変数に集約している。
   サイト側で微調整したい場合は .cmo-form-wrap に対して変数を上書きすればよい。
   例）.cmo-form-wrap { --cmo-accent: #b88a44; } */

.cmo-form-wrap {
	/* テーマ共通のレイアウト変数 */
	--cmo-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
	--cmo-width: 1220px;
	--cmo-gutter: 20px;
	--cmo-w: min( var( --cmo-width ), calc( 100vw - var( --cmo-gutter ) * 2 ) );
	--cmo-cols: 4;

	box-sizing: border-box;
	max-width: var( --cmo-w );
	margin: 0 auto;
	background: var( --cmo-paper );
	color: var( --cmo-text );
	font-family: var( --cmo-gothic );
	font-size: 15px;
	line-height: 1.8;
}

/* ============================================================
   テーマ：和モダン（既定）
   墨・金茶・生成り。写真を主役にし、色数を絞る
   ============================================================ */
.cmo-theme-wamodern {
	--cmo-text: #2b2622;
	--cmo-muted: #8c8279;
	--cmo-faint: #b0a89f;
	--cmo-line: #e6ded1;
	--cmo-paper: #fbf9f5;
	--cmo-card: #ffffff;
	--cmo-accent: #c9a961;
	--cmo-accent-dark: #a08247;
	--cmo-selected: #a08247;
	--cmo-sel-w: 2px;
	--cmo-card-border: #ece5da;
	--cmo-dim: 0.78;
	--cmo-btn-bg: #2b2622;
	--cmo-btn-text: #fbf9f5;
	--cmo-req: #8c7a5c;
	--cmo-req-bg: transparent;
	--cmo-req-border: #d9c9a8;
	--cmo-note: #a0623f;
	--cmo-box-bg: #f4eee3;
}

/* ============================================================
   テーマ：クラシック（従来の見た目）
   ============================================================ */
.cmo-theme-classic {
	--cmo-text: #3c3532;
	--cmo-muted: #8b807b;
	--cmo-faint: #8b807b;
	--cmo-line: #e0d9d6;
	--cmo-paper: transparent;
	--cmo-card: #ffffff;
	--cmo-accent: #e08d95;
	--cmo-accent-dark: #c8626d;
	--cmo-selected: #cf3b46;
	--cmo-sel-w: 3px;
	--cmo-card-border: transparent;
	--cmo-dim: 0.55;
	--cmo-btn-bg: #3a3a8c;
	--cmo-btn-text: #ffffff;
	--cmo-req: #ffffff;
	--cmo-req-bg: #cf3b46;
	--cmo-req-border: #cf3b46;
	--cmo-note: #cf3b46;
	--cmo-box-bg: #efd9da;
}

/* ============================================================
   テーマ：青磁（写真館ロゴの色から）
   ロゴ：#569eae（青緑）／#c0b9a8（ベージュグレー）／#717071（グレー）
   ============================================================ */
.cmo-theme-seiji {
	--cmo-text: #3b4446;
	--cmo-muted: #717071;
	--cmo-faint: #9aa3a5;
	--cmo-line: #dfe3e2;
	--cmo-paper: #f7fafa;
	--cmo-card: #ffffff;
	--cmo-accent: #569eae;
	--cmo-accent-dark: #3f7d8c;
	--cmo-selected: #569eae;
	--cmo-sel-w: 2px;
	--cmo-card-border: #e3e7e6;
	--cmo-dim: 0.8;
	--cmo-btn-bg: #569eae;
	--cmo-btn-text: #ffffff;
	--cmo-req: #ffffff;
	--cmo-req-bg: #569eae;
	--cmo-req-border: #569eae;
	--cmo-note: #3f7d8c;
	--cmo-box-bg: #eef4f5;
}

/* 見出しは青緑の丸数字＋ベージュグレーの細罫 */
.cmo-theme-seiji .cmo-block-head {
	border-bottom: 1px solid #c0b9a8;
	padding: 0 0 10px;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.cmo-theme-seiji .cmo-block-head__num {
	color: #fff;
	background: var(--cmo-accent);
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.cmo-theme-seiji .cmo-choice,
.cmo-theme-seiji .cmo-choice__label,
.cmo-theme-seiji .cmo-allergy__box,
.cmo-theme-seiji .cmo-subq {
	border-radius: 8px;
}

.cmo-theme-seiji .cmo-submit__btn {
	border: 0;
	border-radius: 24px;
	box-shadow: 0 4px 12px rgba( 86, 158, 174, 0.3 );
}

.cmo-theme-seiji .cmo-section__label {
	font-weight: 600;
}

/* テーマ未指定でも壊れないように既定値を持たせる */
.cmo-form-wrap:not( [class*="cmo-theme-"] ) {
	--cmo-text: #2b2622;
	--cmo-muted: #8c8279;
	--cmo-faint: #b0a89f;
	--cmo-line: #e6ded1;
	--cmo-paper: #fbf9f5;
	--cmo-card: #ffffff;
	--cmo-accent: #c9a961;
	--cmo-accent-dark: #a08247;
	--cmo-selected: #a08247;
	--cmo-sel-w: 2px;
	--cmo-card-border: #ece5da;
	--cmo-dim: 0.78;
	--cmo-btn-bg: #2b2622;
	--cmo-btn-text: #fbf9f5;
	--cmo-req: #8c7a5c;
	--cmo-req-bg: transparent;
	--cmo-req-border: #d9c9a8;
	--cmo-note: #a0623f;
	--cmo-box-bg: #f4eee3;
}

/* テーマの本文カラム（960px等）より広げたい場合に、親の幅を超えて左右へはみ出す。
   親が中央寄せでない場合はコース設定でオフにできる。 */
.cmo-form-wrap *,
.cmo-form-wrap *::before,
.cmo-form-wrap *::after {
	box-sizing: border-box;
}

.cmo-form-wrap.is-breakout {
	width: var( --cmo-w );
	max-width: none;
	margin-left: calc( 50% - var( --cmo-w ) / 2 );
	margin-right: 0;
}

.cmo-theme-wamodern,
.cmo-theme-seiji {
	padding: 40px 32px;
}

@media ( max-width: 767px ) {
	/* 青磁のみ。和モダンは従来どおり 40px 32px を維持する */
	.cmo-theme-seiji {
		padding: 24px 16px;
	}
}

.cmo-title {
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 14px;
}

/* 和モダン：タイトル下に細い金の罫を引く */
.cmo-theme-wamodern .cmo-title {
	letter-spacing: 0.04em;
}

.cmo-theme-wamodern .cmo-title::after {
	content: "";
	display: block;
	width: 36px;
	height: 1px;
	background: var( --cmo-accent );
	margin: 14px auto 0;
}

.cmo-intro {
	font-size: 14px;
	margin: 0 0 16px;
	text-align: center;
}

.cmo-intro p {
	margin: 0 0 0.8em;
}

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

.cmo-base-note {
	text-align: center;
	font-size: 14px;
	margin: 0 0 12px;
}

.cmo-base-note {
	color: var(--cmo-muted);
}

/* ---- ブロック見出し ---- */
.cmo-block-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
	margin: 44px 0 0;
}

.cmo-block-head__num {
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* クラシック：ピンクのベタ帯 */
.cmo-theme-classic .cmo-block-head {
	background: var(--cmo-accent);
	color: #fff;
	padding: 8px 16px;
	border-left: 6px solid var(--cmo-accent-dark);
	font-weight: 600;
	gap: 0;
}

.cmo-theme-classic .cmo-block-head__num::after {
	content: ".";
}

/* 和モダン：色帯をやめ、上下の細罫と金の番号で区切る */
.cmo-theme-wamodern .cmo-block-head {
	border-top: 1px solid var(--cmo-line);
	border-bottom: 1px solid var(--cmo-line);
	padding: 13px 0;
	letter-spacing: 0.04em;
}

.cmo-theme-wamodern .cmo-block-head__num {
	color: var(--cmo-accent);
}

.cmo-block {
	padding: 0;
}

/* ---- セクション ---- */
.cmo-section {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--cmo-line);
}

.cmo-section[hidden] {
	display: none;
}

.cmo-section__head {
	flex: 0 0 180px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-top: 4px;
}

.cmo-section__label {
	font-weight: 600;
}

.cmo-section__body {
	flex: 1 1 60%;
	min-width: 260px;
}

.cmo-section__desc,
.cmo-section__note {
	flex: 1 1 100%;
	font-size: 13px;
	color: var(--cmo-muted);
	margin: 0;
}

.cmo-section__note {
	color: var(--cmo-note);
}

/* 必須バッジ。写真より目立たせない */
.cmo-req {
	display: inline-block;
	background: var(--cmo-req-bg);
	color: var(--cmo-req);
	border: 1px solid var(--cmo-req-border);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	padding: 3px 7px;
	border-radius: 2px;
	white-space: nowrap;
}

.cmo-req--any {
	color: var(--cmo-muted);
	border-color: var(--cmo-line);
	background: transparent;
}

.cmo-req--sm {
	margin-left: 6px;
	transform: scale( 0.9 );
}

/* ---- 選択肢カード ---- */
.cmo-choices {
	display: grid;
	/* PCは横4つ固定。テーマ側で --cmo-cols を上書きすれば変更できる */
	grid-template-columns: repeat( var( --cmo-cols, 4 ), minmax( 0, 1fr ) );
	/* 行間は列間より広く取る。カードが縦に詰まって見えるのを防ぐ */
	gap: 28px 16px;
}

.cmo-choice {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 選択肢ごとの表示幅。横長の画像を見せたいときに2枠以上を占有させる */
.cmo-choice--span2 {
	grid-column: span 2;
}

.cmo-choice--span3 {
	grid-column: span 3;
}

.cmo-choice--span4 {
	grid-column: span 4;
}

/* 幅を広げたカードは画像の縦横比を横長にし、説明文を読ませる想定 */
.cmo-choice--span2 .cmo-choice__img,
.cmo-choice--span3 .cmo-choice__img,
.cmo-choice--span4 .cmo-choice__img {
	aspect-ratio: 16 / 7;
}

.cmo-choice--span2 .cmo-choice__sub,
.cmo-choice--span3 .cmo-choice__sub,
.cmo-choice--span4 .cmo-choice__sub {
	font-size: 13px;
	line-height: 1.7;
	margin-top: 4px;
}

.cmo-choice[hidden] {
	display: none;
}

.cmo-choice__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cmo-choice__label {
	display: flex;
	flex-direction: column;
	background: var(--cmo-card);
	border: var(--cmo-sel-w) solid var(--cmo-card-border);
	padding: 8px;
	cursor: pointer;
	flex: 1;
	transition: border-color 0.15s ease;
}

/* 未選択の淡さは画像だけに適用する。文字が薄くなると読みにくいため */
.cmo-choice__label .cmo-choice__img {
	opacity: var(--cmo-dim);
	transition: opacity 0.15s ease;
}

.cmo-choice__label:hover .cmo-choice__img {
	opacity: 0.92;
}

.cmo-choice__radio:checked + .cmo-choice__label {
	border-color: var(--cmo-selected);
}

.cmo-choice__radio:checked + .cmo-choice__label .cmo-choice__img {
	opacity: 1;
}

.cmo-choice__radio:focus-visible + .cmo-choice__label {
	outline: 2px solid var(--cmo-accent-dark);
	outline-offset: 2px;
}

.cmo-choice__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cmo-choice__img--none {
	background: var(--cmo-line);
}

.cmo-choice__name {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--cmo-text);
	line-height: 1.6;
	margin-top: 9px;
}

.cmo-choice__sub {
	display: block;
	font-size: 12px;
	color: var(--cmo-muted);
}

.cmo-choice__price {
	display: block;
	font-size: 11px;
	color: var(--cmo-accent-dark);
	/* 料理名が1行でも2行でも、価格はカード下端で揃える */
	margin-top: auto;
	padding-top: 6px;
}

.cmo-choice__plan {
	display: block;
	font-size: 11px;
	color: var(--cmo-muted);
	margin-top: auto;
	padding-top: 6px;
}

/* 注記は料理名の直下に出す。pではなくspanなので display を明示する */
.cmo-choice__note {
	display: block;
	font-size: 12px;
	line-height: 1.6;
	color: var(--cmo-note);
	margin: 4px 0 0;
}

.cmo-choice--static .cmo-choice__name {
	font-weight: 600;
}

/* ---- 選択に付随する追加質問 ---- */
/* カードの中は幅が狭く文章が読めないため、選択肢グリッドの下に全幅で出す */
.cmo-subq-wrap {
	margin-top: 20px;
}

.cmo-subq-wrap[hidden] {
	display: none;
}

/* 旧フォームと同じ「【○○】をご選択のお客様のみお答えください。」 */
.cmo-subq__note {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 12px;
}

.cmo-theme-wamodern .cmo-subq__note {
	font-weight: 500;
	color: var(--cmo-note);
}

.cmo-subq {
	padding: 20px;
	background: var(--cmo-box-bg);
}

.cmo-subq__row + .cmo-subq__row {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dotted var(--cmo-line);
}

.cmo-subq__label {
	display: block;
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 10px;
}

.cmo-subq__field {
	display: block;
}

.cmo-form .cmo-subq__field select,
.cmo-form .cmo-subq__field input[type="text"] {
	max-width: 420px;
	width: 100%;
	background: #fff;
}

.cmo-subq__opt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 20px;
	font-size: 14px;
}

/* ---- 人数入力行 ---- */
.cmo-numrow {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px dotted var(--cmo-line);
}

.cmo-numrow:first-child {
	border-top: 0;
}

.cmo-numrow[hidden] {
	display: none;
}

.cmo-numrow__media {
	flex: 0 0 180px;
}

.cmo-numrow__body {
	flex: 1 1 auto;
}

.cmo-choice__desc {
	font-size: 12px;
	color: var(--cmo-muted);
}

.cmo-form .cmo-numrow__input select {
	width: auto;
	min-width: 90px;
}

.cmo-numrow__input {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.cmo-form input[type="text"],
.cmo-form input[type="tel"],
.cmo-form input[type="email"],
.cmo-form input[type="date"],
.cmo-form input[type="number"],
.cmo-form select,
.cmo-form textarea {
	border: 1px solid var(--cmo-line);
	background: var(--cmo-card);
	padding: 11px;
	font-size: 15px;
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	border-radius: 2px;
}

.cmo-form input[type="number"] {
	max-width: 160px;
}

/* 子供料理・ご利用人数の入力欄はもう少し広く取る */
.cmo-numrow__input input[type="number"],
.cmo-section--headcount input[type="number"] {
	width: 200px;
	max-width: 100%;
	padding: 12px;
	font-size: 16px;
}

/* ---- 汎用フィールド ---- */
.cmo-field {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cmo-line);
}

.cmo-field[hidden] {
	display: none;
}

.cmo-field__head {
	flex: 0 0 180px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-top: 8px;
}

.cmo-field__body {
	flex: 1 1 60%;
	min-width: 260px;
}

.cmo-field__note {
	font-size: 12px;
	color: var(--cmo-muted);
	margin: 4px 0 0;
}

.cmo-radio {
	display: block;
	margin: 4px 0;
}

/* ---- 苦手食材 ---- */
.cmo-allergy-has .cmo-radio {
	margin: 0 0 10px;
}

.cmo-allergy[hidden] {
	display: none;
}

.cmo-allergy__note {
	font-weight: 600;
	margin: 18px 0 12px;
	line-height: 1.7;
}

.cmo-theme-wamodern .cmo-allergy__note {
	font-weight: 500;
	color: var(--cmo-note);
}

.cmo-allergy__box {
	background: var(--cmo-box-bg);
	padding: 20px;
}

.cmo-allergy-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
}

/* 2人目以降は罫線で区切る */
.cmo-allergy-row + .cmo-allergy-row {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba( 0, 0, 0, 0.18 );
}

.cmo-allergy-row__f {
	display: block;
	margin: 0;
	min-width: 0;
}


.cmo-allergy-row__label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
}

.cmo-form .cmo-allergy-row input[type="text"],
.cmo-form .cmo-allergy-row select,
.cmo-form .cmo-allergy-row textarea {
	width: 100%;
	max-width: none;
	background: #fff;
}

/* 選択肢の文言が長いので、メニューは文言に合わせた幅（最低でも名前欄と同じ） */
.cmo-form .cmo-allergy-row select {
	width: auto;
	min-width: min( 420px, 100% );
	max-width: 100%;
}

.cmo-form .cmo-allergy-row input[type="text"] {
	max-width: 420px;
}

.cmo-form .cmo-allergy-row textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.7;
}

.cmo-allergy-row__del {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	font-size: 20px;
	cursor: pointer;
	color: var(--cmo-muted);
	line-height: 1;
}

.cmo-allergy-row + .cmo-allergy-row .cmo-allergy-row__del {
	top: 14px;
}

.cmo-allergy-row__del[hidden] {
	display: none;
}

/* 削除ボタンと見出しが重ならないように */
.cmo-allergy-row:has( .cmo-allergy-row__del:not( [hidden] ) ) {
	padding-right: 28px;
}

.cmo-allergy-add {
	margin: 16px 0 0;
}

.cmo-allergy-add button {
	border: 1px solid var(--cmo-accent);
	background: var(--cmo-card);
	color: var(--cmo-accent-dark);
	padding: 8px 18px;
	cursor: pointer;
	border-radius: 2px;
	font-size: 14px;
}

.cmo-allergy-add button[hidden] {
	display: none;
}

@media ( max-width: 767px ) {
	.cmo-allergy__box,
	.cmo-subq {
		padding: 16px;
	}

	.cmo-form .cmo-allergy-row select {
		width: 100%;
	}
}

/* ---- エラー ---- */
.cmo-field-error {
	color: #cf3b46;
	font-size: 13px;
	margin: 6px 0 0;
	display: none;
}

.cmo-field-error.is-shown {
	display: block;
}

.has-error {
	background: #fdf3f3;
}

/* 和モダン：セクションの余白を広めに取り、罫は細く */
.cmo-theme-wamodern .cmo-section {
	padding: 28px 0;
}

.cmo-theme-wamodern .cmo-section__label {
	font-weight: 500;
	letter-spacing: 0.04em;
}

.cmo-theme-wamodern .cmo-intro,
.cmo-theme-wamodern .cmo-base-note {
	color: var(--cmo-muted);
	font-size: 13px;
	line-height: 1.95;
}

.cmo-error {
	border: 1px solid #cf3b46;
	background: #fdf3f3;
	color: #cf3b46;
	padding: 12px 16px;
	margin: 0 0 20px;
}

.cmo-done {
	text-align: center;
	padding: 60px 20px;
}

.cmo-done__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 16px;
}

.cmo-done__body p {
	margin: 0 0 0.8em;
}

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

/* ---- 合計・送信 ---- */
.cmo-total {
	margin-top: 24px;
	padding: 16px;
	background: var(--cmo-card);
	border: 1px solid var(--cmo-line);
}

.cmo-total__row {
	margin: 0 0 4px;
}

.cmo-total__note {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--cmo-muted);
}

/* ---- 入力確認パネル ---- */
.cmo-form__body.is-step-hidden {
	display: none;
}

/* 確認画面では入力用の案内文は不要 */
.cmo-form-wrap.is-confirming .cmo-intro,
.cmo-form-wrap.is-confirming .cmo-base-note {
	display: none;
}

.cmo-form-wrap.is-confirming {
	scroll-margin-top: 16px;
}

.cmo-confirm {
	margin-top: 24px;
	border: 1px solid var(--cmo-line);
	background: var(--cmo-card);
	padding: 28px;
}

.cmo-confirm__head {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

.cmo-confirm__note {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--cmo-muted);
	text-align: center;
}

.cmo-confirm__list {
	margin: 0;
}

.cmo-confirm__row {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cmo-line);
}

.cmo-confirm__row:first-child {
	border-top: 1px solid var(--cmo-line);
}

.cmo-confirm__row dt {
	flex: 0 0 220px;
	font-weight: 600;
	margin: 0;
}

.cmo-confirm__row dd {
	flex: 1 1 auto;
	margin: 0;
	word-break: break-word;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cmo-confirm__thumbs {
	display: inline-flex;
	gap: 8px;
	flex-shrink: 0;
}

.cmo-confirm__thumb {
	width: 88px;
	height: 66px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--cmo-line);
}

.cmo-confirm__text {
	flex: 1 1 200px;
}

.cmo-confirm__total {
	margin-top: 20px;
	padding: 16px;
	background: var(--cmo-paper);
}

.cmo-submit {
	text-align: center;
	margin: 40px 0;
}

.cmo-submit__back {
	background: var(--cmo-card);
	color: var(--cmo-text);
	border: 1px solid var(--cmo-line);
	padding: 14px 32px;
	font-size: 15px;
	cursor: pointer;
	border-radius: 3px;
	margin-right: 12px;
}

.cmo-submit__back:hover {
	background: var(--cmo-paper);
}

.cmo-submit__btn:disabled,
.cmo-submit__back:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cmo-submit__note {
	color: var(--cmo-note);
	font-size: 13px;
	line-height: 1.9;
}

.cmo-submit__btn {
	background: var(--cmo-btn-bg);
	color: var(--cmo-btn-text);
	border: 0;
	padding: 15px 48px;
	font-size: 15px;
	letter-spacing: 0.06em;
	cursor: pointer;
	border-radius: 2px;
}

.cmo-submit__btn:hover {
	opacity: 0.88;
}

.cmo-submit__privacy {
	margin-top: 12px;
	font-size: 13px;
}

.cmo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- 一覧 ---- */
.cmo-list {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 20px;
}

.cmo-list__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--cmo-line, #e0d9d6);
	height: 100%;
}

.cmo-list__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.cmo-list__body {
	display: block;
	padding: 14px;
}

.cmo-list__venue {
	display: block;
	font-size: 12px;
	color: #8b807b;
}

.cmo-list__title {
	display: block;
	font-weight: 600;
	margin: 4px 0;
}

.cmo-list__price {
	display: block;
	font-size: 13px;
	color: #c8626d;
}

.cmo-list__cta {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: #c8626d;
	border-bottom: 1px solid currentColor;
}

@media ( max-width: 1024px ) {
	.cmo-form-wrap {
		--cmo-cols: 3;
	}

	/* 列数より大きい span は全幅に丸める */
	.cmo-choice--span4 {
		grid-column: span 3;
	}
}

@media ( max-width: 782px ) {
	.cmo-form-wrap {
		--cmo-cols: 2;
	}

	.cmo-choice--span2,
	.cmo-choice--span3,
	.cmo-choice--span4 {
		grid-column: span 2;
	}

	.cmo-choice--span2 .cmo-choice__img,
	.cmo-choice--span3 .cmo-choice__img,
	.cmo-choice--span4 .cmo-choice__img {
		aspect-ratio: 16 / 9;
	}

	/* スマホは画面際の余白を詰める。--cmo-gutter は画面端との隙間 */
	.cmo-form-wrap {
		--cmo-gutter: 8px;
	}

	.cmo-theme-wamodern {
		padding: 24px 14px;
	}

	.cmo-choices {
		gap: 24px 12px;
	}

	.cmo-confirm {
		padding: 16px;
	}

	.cmo-confirm__row {
		display: block;
	}

	.cmo-confirm__row dt {
		margin-bottom: 4px;
	}

	.cmo-confirm__thumb {
		width: 72px;
		height: 54px;
	}

	.cmo-submit__back {
		display: block;
		width: 100%;
		margin: 0 0 12px;
	}

	.cmo-section,
	.cmo-field {
		display: block;
	}

	.cmo-section__head,
	.cmo-field__head {
		margin-bottom: 8px;
	}

	.cmo-numrow {
		display: block;
	}

	.cmo-numrow__media {
		max-width: 220px;
		margin-bottom: 8px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cmo-choice__label {
		transition: none;
	}
}

/* ============================================================
   ユーティリティ
   ============================================================ */

/* スマホだけで改行する <br>（例：テキスト<br class="br-sp">続き） */
.br-sp {
	display: none;
}

@media ( max-width: 767px ) {
	.br-sp {
		display: block;
	}
}