/*
 * cafe_yoyaku_customer_v2.css
 * お客様用の予約画面（cafe_yoyaku_customer）の新デザイン。スマホで片手で予約できることを基準にしている。
 * <html> に cyui2 クラスが付いている端末だけに効く（付け外しはテンプレート冒頭のスクリプト）。
 * 既存の JS は、選択済み・入力もれ・選べない項目をセレクトボックスの背景色で表している。
 * その色を cafe_yoyaku_customer_v2.js が data-cyv-state 属性（filled / error / off）へ写し、ここで色を付け直す。
 * 商品の行（.input_row）の display は既存 JS が block かどうかで行数を数えるので、変えない。
 */
@media screen {

html.cyui2 {
	--cy-bg: #f5f2ed;
	--cy-surface: #ffffff;
	--cy-ink: #2a2420;
	--cy-sub: #756b62;
	--cy-line: #e5ded4;
	--cy-line-strong: #cfc6ba;
	--cy-brand: #7b2a22;
	--cy-brand-dark: #5f1f19;
	--cy-brand-soft: #f8eeeb;
	--cy-warn: #8a5200;
	--cy-warn-line: #e3c26b;
	--cy-warn-soft: #fff6dc;
	--cy-hot: #c2412d;
	--cy-hot-soft: #fde8e2;
	--cy-ok: #1e7f55;
	--cy-ok-soft: #e3f4eb;
	--cy-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
	--cy-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23756b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
}

html.cyui2 body {
	margin: 0;
	background: var(--cy-bg);
	color: var(--cy-ink);
	font-family: var(--cy-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
html.cyui2 body > br { display: none; }

/* ---------- 枠 ---------- */
html.cyui2 .bggg { width: auto; height: auto; background: transparent !important; }
html.cyui2 .wrapper1,
html.cyui2 .syouhin_id_colmn_wrap {
	display: block;
	width: auto;
	min-width: 0;
	max-width: 560px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
html.cyui2 .wrapper1 > br { display: none; }

/* スタッフが代わりに入力するモード（?admin=999）は、色と帯ではっきり区別する */
html.cyui2.cyv-admin body { background: #f6e9e6; }
html.cyui2.cyv-admin .bggg::before {
	content: "スタッフ入力モード（お電話でのご予約を代わりに入力しています）";
	display: block;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--cy-brand);
}

/* ---------- 見出し ---------- */
html.cyui2 .rogo_title {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 20px 0 6px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--cy-sub);
}
html.cyui2 .rogo_title img { position: static; width: 36px; }
html.cyui2 .wrapper1 > div[style*="120%"] {
	margin: 4px 0 18px;
	font-size: clamp(19px, 5.6vw, 28px) !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .03em;
}
/* お店からひとこと：白地のカード。ここだけ丸みのあるやわらかい書体（Kiwi Maru。読み込みは cafe_yoyaku_customer_v2.js） */
html.cyui2 .tubuyaki_area {
	width: auto;
	max-width: none;
	margin: 0 0 16px;
	padding: 14px 18px 16px;
	font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", var(--cy-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
	color: #3a322c;
	background: var(--cy-surface);
	border: 1px solid var(--cy-line);
	border-radius: 14px;
	box-sizing: border-box;
}
html.cyui2 .tubuyaki_area:empty { display: none; }
html.cyui2 .tubuyaki_area::before {
	content: "お店からひとこと";
	display: block;
	font-family: var(--cy-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 2px;
	letter-spacing: .06em;
	color: var(--cy-brand);
}
html.cyui2 .kujimade {
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 22px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--cy-ink);
	background: var(--cy-warn-soft);
	border: 1px solid var(--cy-warn-line);
	border-radius: 14px;
	box-sizing: border-box;
}
html.cyui2 .kujimade::before {
	content: "ご予約の前に";
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cy-warn);
}
html.cyui2 .kujimade p { margin: 0 0 6px; }
html.cyui2 .honjitsu_raiten {
	display: block;
	margin: 0 0 20px;
	padding: 16px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--cy-ok);
	background: var(--cy-ok-soft);
	border-radius: 14px;
}

/* ---------- ボタン ---------- */
html.cyui2 .button {
	width: auto;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 12px;
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
html.cyui2 .button:focus-visible { outline: 3px solid rgba(123, 42, 34, .35); outline-offset: 2px; }
html.cyui2 .new_or_kakunin br { display: none; }
html.cyui2 .new_or_kakunin > div { margin-bottom: 12px; }
html.cyui2 .new_yoyaku,
html.cyui2 .kakunin,
html.cyui2 .kakunin_submit,
html.cyui2 input.cancel {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 58px;
	margin: 0;
	font-size: 17px;
}
html.cyui2 .new_yoyaku,
html.cyui2 .kakunin_submit {
	min-height: 62px;
	font-size: 19px;
	color: #fff;
	background: var(--cy-brand);
	border-color: var(--cy-brand);
	box-shadow: 0 6px 16px rgba(123, 42, 34, .28);
}
html.cyui2 .new_yoyaku:active,
html.cyui2 .kakunin_submit:active { background: var(--cy-brand-dark); }
html.cyui2 .kakunin { color: var(--cy-brand-dark); background: var(--cy-surface); border-color: var(--cy-brand); }
html.cyui2 .kakunin_submit { margin-top: 16px; }
html.cyui2 input.cancel { margin: 0 0 12px; color: var(--cy-hot); background: transparent; border-color: var(--cy-hot); }
html.cyui2 .saisyokara {
	min-height: 40px;
	max-width: none;
	margin: 0 0 6px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cy-sub);
	background: transparent;
	border: 1px solid var(--cy-line-strong);
}

/* ---------- 入力欄 ---------- */
html.cyui2 .daimei {
	width: auto;
	margin: 18px 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cy-ink);
}
html.cyui2 .customer_area_new br,
html.cyui2 .customer_area_kakunin br { display: none; }
html.cyui2 input.customer,
html.cyui2 select.customer {
	display: block;
	width: 100%;
	max-width: none;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	text-align: left;
	color: var(--cy-ink);
	background-color: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 12px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
html.cyui2 select.customer,
html.cyui2 .sonota .input_row select {
	padding-right: 40px;
	background-image: var(--cy-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}
html.cyui2 input.customer::placeholder { font-weight: 400; color: #a79d93; }
html.cyui2 input.customer:focus,
html.cyui2 select.customer:focus,
html.cyui2 .sonota .input_row select:focus,
html.cyui2 textarea.bikou:focus {
	outline: none;
	border: 1.5px solid var(--cy-brand);
	box-shadow: 0 0 0 4px rgba(123, 42, 34, .14);
}
html.cyui2 .customer_area_new { padding-bottom: 8px; }

/* ---------- 商品えらびの手がかり（味覚表など） ---------- */
html.cyui2 .syouhin_id_colmn { margin-top: 22px; font-size: 0; }
html.cyui2 .js-modal__btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(50% - 4px);
	max-width: none;
	height: auto;
	min-height: 46px;
	margin: 0 8px 8px 0;
	padding: 8px 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1px solid var(--cy-line-strong);
	border-radius: 12px;
	vertical-align: top;
}
html.cyui2 .js-modal__btn.button:nth-of-type(6n+4),
html.cyui2 .js-modal__btn.button.cyv-even { margin-right: 0; }
html.cyui2 .js-modal__main {
	width: 100%;
	max-width: 560px;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 20px 18px 28px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--cy-ink);
	border-radius: 18px 18px 0 0;
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* 元の出し入れはアニメーションの終わり状態に頼っていて、閉じたあと別の窓を開くと前の窓が重なって残ることがある。
   新デザインでは、開いている窓（_slideUp が付いた窓）だけを表示する */
html.cyui2 .js-modal__main,
html.cyui2 .js-modal__main._slideDown {
	display: none;
	bottom: 0 !important;
	opacity: 1 !important;
	max-height: 90%;
	height: auto;
	animation: none !important;
}
html.cyui2 .js-modal__main._slideUp { display: block; animation: cyv-sheet-up .22s ease-out !important; }
@keyframes cyv-sheet-up {
	from { transform: translateY(28px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
html.cyui2 .js-modal__main > br { display: none; }
html.cyui2 .js-modal__main img { display: block; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 8px; }
html.cyui2 .cyv-m-title { margin: 0 44px 14px 0; font-size: 19px; font-weight: 700; line-height: 1.4; }
html.cyui2 .js-modal__main p { margin: 0; }
html.cyui2 .js-modal__main p.cyv-m-head {
	margin: 20px 0 10px;
	padding: 8px 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cy-brand-dark);
	background: var(--cy-brand-soft);
	border-left: 4px solid var(--cy-brand);
	border-radius: 4px 10px 10px 4px;
}
html.cyui2 .js-modal__main .cyv-m-title + p.cyv-m-head { margin-top: 0; }
html.cyui2 .js-modal__main p.cyv-m-item { margin-top: 10px; padding: 0 4px; font-size: 16px; font-weight: 700; }
html.cyui2 .js-modal__main p.cyv-m-sub { padding: 0 4px 10px 18px; font-size: 13px; color: var(--cy-sub); border-bottom: 1px dashed var(--cy-line); }
html.cyui2 .js-modal__main p.cyv-m-note { margin-top: 10px; padding: 0 4px; font-size: 13px; line-height: 1.6; color: var(--cy-sub); }
html.cyui2 .js-modal__main p.cyv-m-rank {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 4px;
	font-size: 16px;
	border-bottom: 1px solid var(--cy-line);
}
html.cyui2 .cyv-rank {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-style: normal;
	font-size: 14px;
	font-weight: 700;
	color: var(--cy-sub);
	background: var(--cy-bg);
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}
html.cyui2 .cyv-rank.cyv-r1 { color: #fff; background: #d4a514; }
html.cyui2 .cyv-rank.cyv-r2 { color: #fff; background: #9aa3ad; }
html.cyui2 .cyv-rank.cyv-r3 { color: #fff; background: #b9794a; }
html.cyui2 .js-modal__main p.js-modal__btn--close {
	width: 160px;
	margin: 24px auto 0;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--cy-ink);
	border: 1px solid var(--cy-line-strong);
	border-radius: 999px;
	cursor: pointer;
}
html.cyui2 .js-modal__main .js-modal__btn--close--fix { top: 14px; right: 14px; background: var(--cy-ink); }

/* ---------- 合計の帯（上に張り付く） ---------- */
html.cyui2 .sticky-wrap.block4 {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--cy-ink);
}
html.cyui2 .sticky-wrap .c-marker { background: none; }

/* ---------- 商品の行 ---------- */
html.cyui2 table.table_wrap1 {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	border-collapse: separate;
	border-spacing: 0;
}
html.cyui2 table.table_wrap1 table { width: 100%; margin: 0; padding: 0; border-spacing: 0; }
html.cyui2 table.table_wrap1 td { padding: 0; }
html.cyui2 table.table_wrap1 td.box_number_td {
	display: block;
	width: auto;
	margin: 0;
	padding: 14px 16px 6px;
	color: var(--cy-ink);
	border: 0;
}
html.cyui2 .sonota .input_row {
	width: auto;
	margin: 0 0 12px;
	padding: 14px;
	font-size: 0;
	font-weight: 400;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1px solid var(--cy-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(60, 40, 20, .06);
	overflow: hidden;
}
html.cyui2 .sonota .input_row > div:first-child {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cy-brand);
}
html.cyui2 .sonota .input_row select {
	height: 52px;
	margin: 0 0 8px;
	padding-left: 12px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--cy-ink) !important;
	background-color: var(--cy-surface) !important;
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 10px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
html.cyui2 .sonota .input_row select.product_select { display: block; width: 100%; }
html.cyui2 .sonota .input_row select.mame_or_hiki,
html.cyui2 .sonota .input_row select.weight,
html.cyui2 .sonota .input_row select.quentity {
	width: calc(50% - 4px);
	margin-right: 8px;
	padding-right: 30px;
	font-size: 15px;
	background-position: right 10px center;
	vertical-align: middle;
}
html.cyui2 .sonota .input_row select.weight { margin-right: 0; }
html.cyui2 .sonota .input_row select.quentity { width: 104px; margin: 0 12px 0 0; }
/* 選び終えた項目・入力もれ・この商品では選べない項目 */
html.cyui2 .sonota .input_row select[data-cyv-state="filled"] {
	background-color: var(--cy-brand-soft) !important;
	border-color: var(--cy-brand);
}
html.cyui2 .sonota .input_row select[data-cyv-state="error"] {
	background-color: var(--cy-hot-soft) !important;
	border: 2px solid var(--cy-hot);
}
html.cyui2 .sonota .input_row select[data-cyv-state="off"] {
	color: #a79d93 !important;
	background-color: #ece7e0 !important;
	border-color: var(--cy-line);
}
html.cyui2 .sonota .price_disp {
	display: inline-block;
	width: auto;
	margin: 0;
	vertical-align: middle;
	font-size: 19px;
	font-weight: 700;
	color: var(--cy-ink);
	font-variant-numeric: tabular-nums;
}
html.cyui2 .sonota .del_botan {
	float: right;
	width: auto;
	min-height: 36px;
	margin: 8px 0 0;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cy-sub);
	background: transparent;
	border: 1px solid var(--cy-line-strong);
}
html.cyui2 .add_row_sonota {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 52px;
	font-size: 15px;
	color: var(--cy-brand);
	background: transparent;
	border: 1.5px dashed var(--cy-brand);
}

/* ---------- 備考・合計・送信 ---------- */
html.cyui2 .submit_area { margin: 0; padding-bottom: 48px; }
html.cyui2 .submit_area br { display: none; }
html.cyui2 .submit_area .bikou_wrap { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.5; }
html.cyui2 textarea.bikou {
	display: block;
	width: 100%;
	height: 112px;
	margin-top: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 12px;
	box-sizing: border-box;
}
html.cyui2 .madayoyaku {
	display: block;
	margin: 18px 0 10px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cy-warn);
	background: var(--cy-warn-soft);
	border: 1px solid var(--cy-warn-line);
	border-radius: 10px;
}
html.cyui2 .submit_area .total_price_disp {
	margin-left: 2px;
	font-size: 26px;
	font-weight: 700;
	color: var(--cy-ink);
	font-variant-numeric: tabular-nums;
}
html.cyui2 .submit_area > .c-marker {
	display: block;
	margin: 18px 0 8px;
	font-size: 15px;
	font-weight: 700;
	background: none;
}
html.cyui2 .osiharai img { width: 100%; max-width: 420px; }
html.cyui2 .sbmit_btn {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 64px;
	margin: 22px 0 12px;
	font-size: 19px;
	color: #fff;
	background: var(--cy-brand) !important;
	border: 0;
	box-shadow: 0 8px 20px rgba(123, 42, 34, .3);
}
html.cyui2 .sbmit_btn[data-cyv-state="off"],
html.cyui2 .sbmit_btn:disabled {
	background: #b3a99f !important;
	box-shadow: none;
}
html.cyui2 .loading { position: static; text-align: center; }

/* ---------- 押して選ぶ部品（プルダウンの置き換え。組み立ては cafe_yoyaku_customer_v2.js） ---------- */
/* 元の select は残したまま見えなくする。既存 JS が値や選択肢を読むので、display は変えない */
html.cyui2 select.cyv-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
}
html.cyui2 .cyv-pick { font-size: 15px; }
html.cyui2 .cyv-pick-label { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--cy-sub); }
html.cyui2 .cyv-pick button {
	margin: 0;
	font-family: inherit;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 12px;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .12s, border-color .12s, color .12s;
}
html.cyui2 .cyv-pick button b { font-weight: 700; }
html.cyui2 .cyv-pick button i { font-style: normal; }
html.cyui2 .cyv-pick button:focus-visible { outline: 3px solid rgba(123, 42, 34, .35); outline-offset: 2px; }
html.cyui2 .cyv-pick button[aria-pressed="true"] {
	color: #fff;
	background: var(--cy-brand);
	border-color: var(--cy-brand);
}
html.cyui2 .cyv-pick button[aria-pressed="true"] i { color: #fff !important; }
html.cyui2 .cyv-pick[data-cyv-state="error"] button { background: var(--cy-hot-soft); border-color: var(--cy-hot); }
html.cyui2 .cyv-pick[data-cyv-state="off"] { display: none !important; }

/* 来店日：曜日をそろえたカレンダー */
html.cyui2 .cyv-pick-date .cyv-pick-box {
	padding: 6px 12px 12px;
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 14px;
}
html.cyui2 .cyv-cal-month { margin: 8px 2px 4px; font-size: 14px; font-weight: 700; }
html.cyui2 .cyv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html.cyui2 .cyv-cal-h { padding: 2px 0; font-size: 11px; font-weight: 600; text-align: center; color: var(--cy-sub); }
html.cyui2 .cyv-cal-h.cyv-sat { color: #235f9e; }
html.cyui2 .cyv-cal-h.cyv-sun { color: var(--cy-hot); }
html.cyui2 .cyv-pick-date .cyv-cal button {
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--cy-line);
	border-radius: 10px;
	background: var(--cy-bg);
}
html.cyui2 .cyv-pick-date .cyv-cal button b { font-size: 17px; font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-pick-date .cyv-cal button.cyv-sat { color: #235f9e; }
html.cyui2 .cyv-pick-date .cyv-cal button.cyv-sun { color: var(--cy-hot); }
html.cyui2 .cyv-pick-date .cyv-cal button[aria-pressed="true"] { color: #fff; background: var(--cy-brand); border-color: var(--cy-brand); }

/* 来店時間：時間帯と空き状況 */
html.cyui2 .cyv-pick-time .cyv-pick-box { display: grid; gap: 8px; }
html.cyui2 .cyv-pick-time button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 0 16px;
	font-size: 17px;
	text-align: left;
}
html.cyui2 .cyv-pick-time button i { font-size: 13px; font-weight: 700; color: var(--cy-ok); }

/* 商品の行の中 */
html.cyui2 .cyv-pick-product button.cyv-field {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 10px 40px 10px 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	background-image: var(--cy-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
}
html.cyui2 .cyv-pick-product button.cyv-field.cyv-empty { font-weight: 600; color: var(--cy-brand); border-style: dashed; border-color: var(--cy-brand); }
html.cyui2 .cyv-pick-seg .cyv-pick-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.cyui2 .cyv-pick-seg button { min-height: 48px; font-size: 15px; }
html.cyui2 .cyv-pick-weight .cyv-pick-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html.cyui2 .cyv-pick-weight button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 4px 0;
	border-radius: 10px;
}
html.cyui2 .cyv-pick-weight button b { font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-pick-weight button i { font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--cy-hot); }
html.cyui2 .cyv-pick-qty { display: inline-block; margin: 14px 14px 0 0; vertical-align: middle; }
html.cyui2 .cyv-pick-qty .cyv-pick-box { display: inline-flex; align-items: center; }
html.cyui2 .cyv-pick-qty button.cyv-step {
	width: 46px;
	height: 46px;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	border-radius: 50%;
}
html.cyui2 .cyv-pick-qty button.cyv-step:disabled { color: var(--cy-line-strong); border-color: var(--cy-line); cursor: default; }
html.cyui2 .cyv-pick-qty span { min-width: 58px; font-size: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-pick-qty span.cyv-empty { font-size: 14px; font-weight: 600; color: var(--cy-sub); }
html.cyui2 .sonota .input_row .price_disp { margin-top: 14px; }
html.cyui2 .sonota .input_row .del_botan { margin-top: 18px; }
html.cyui2 .sonota .input_row.cyv-noproduct .cyv-pick-seg,
html.cyui2 .sonota .input_row.cyv-noproduct .cyv-pick-weight,
html.cyui2 .sonota .input_row.cyv-noproduct .cyv-pick-qty,
html.cyui2 .sonota .input_row.cyv-noproduct .price_disp,
html.cyui2 .sonota .input_row.cyv-noproduct .del_botan { display: none; }

/* 商品を選ぶ一覧 */
html.cyui2.cyv-lock,
html.cyui2.cyv-lock body { overflow: hidden; }
html.cyui2 .cyv-sheet-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	align-items: flex-end;
	justify-content: center;
	background: rgba(42, 36, 32, .5);
}
html.cyui2 .cyv-sheet-overlay.cyv-open { display: flex; }
html.cyui2 .cyv-sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	background: var(--cy-surface);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -8px 30px rgba(42, 36, 32, .25);
	overflow: hidden;
}
html.cyui2 .cyv-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 17px; }
html.cyui2 .cyv-sheet-close {
	min-height: 40px;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--cy-sub);
	background: transparent;
	border: 1px solid var(--cy-line-strong);
	border-radius: 10px;
	cursor: pointer;
}
html.cyui2 .cyv-sheet-q {
	flex: none;
	height: 46px;
	margin: 0 16px 10px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--cy-ink);
	background: var(--cy-bg);
	border: 1.5px solid var(--cy-line);
	border-radius: 12px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
html.cyui2 .cyv-sheet-q:focus { outline: none; border: 1.5px solid var(--cy-brand); }
html.cyui2 .cyv-sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
html.cyui2 .cyv-sheet-list button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 0;
	border-top: 1px solid var(--cy-line);
	cursor: pointer;
}
html.cyui2 .cyv-sheet-list button b { font-weight: 700; }
html.cyui2 .cyv-sheet-list button i { flex: none; font-style: normal; font-size: 13px; color: var(--cy-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-sheet-list button[aria-pressed="true"] { background: var(--cy-brand-soft); }
html.cyui2 .cyv-sheet-list button[aria-pressed="true"] b { color: var(--cy-brand-dark); }
html.cyui2 .cyv-sheet-none { margin: 0; padding: 24px 16px; font-size: 14px; color: var(--cy-sub); text-align: center; }
@media (min-width: 700px) {
	html.cyui2 .cyv-sheet-overlay { align-items: center; }
	html.cyui2 .cyv-sheet { border-radius: 18px; max-height: 80vh; }
}

/* 文字入力中（スマホのキーボードが出ている間）は、下へスクロールできるようページの下に余白を足す */
html.cyui2.cyv-kb body { padding-bottom: 60vh; }

} /* @media screen */

/* ---------- 商品を選ぶ一覧：種類の切り替え・味の並べ替え・味覚グラフつきカード ---------- */
@media screen {
html.cyui2 .cyv-sheet-cats,
html.cyui2 .cyv-sheet-sorts {
	flex: none;
	display: flex;
	gap: 6px;
	padding: 0 16px 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
html.cyui2 .cyv-sheet-cats::-webkit-scrollbar,
html.cyui2 .cyv-sheet-sorts::-webkit-scrollbar { display: none; }
html.cyui2 .cyv-sheet-sorts:empty { display: none; }
html.cyui2 .cyv-chip {
	flex: none;
	min-height: 36px;
	padding: 4px 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1px solid var(--cy-line-strong);
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
html.cyui2 .cyv-chip.cyv-chip-on { color: #fff; background: var(--cy-brand); border-color: var(--cy-brand); }
html.cyui2 .cyv-sheet-sorts .cyv-chip { min-height: 32px; font-size: 12px; background: var(--cy-bg); border-color: var(--cy-line); }
html.cyui2 .cyv-sheet-sorts .cyv-chip.cyv-chip-on { color: var(--cy-brand-dark); background: var(--cy-brand-soft); border-color: var(--cy-brand); }
html.cyui2 .cyv-sheet-group {
	padding: 10px 16px 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cy-brand);
	background: var(--cy-bg);
	border-top: 1px solid var(--cy-line);
}
html.cyui2 .cyv-sheet-list button.cyv-card { justify-content: flex-start; gap: 12px; min-height: 76px; padding: 10px 16px; }
html.cyui2 .cyv-radar { flex: none; width: 92px; height: 92px; }
html.cyui2 .cyv-radar.cyv-icon { width: 60px; height: 60px; margin: 0 16px; }
html.cyui2 img.cyv-photo { object-fit: cover; border-radius: 14px; background: #f3ebe1; }
html.cyui2 .cyv-radar-none { display: block; }
html.cyui2 .cyv-card-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
html.cyui2 .cyv-card-body b { font-size: 15px; font-weight: 700; line-height: 1.4; }
html.cyui2 .cyv-card-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--cy-sub); font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-card-roast { font-weight: 700; color: var(--cy-brand-dark); }
html.cyui2 .cyv-card-note { font-size: 13px; line-height: 1.5; color: var(--cy-ink); }
html.cyui2 .cyv-card-score { font-size: 12px; font-weight: 700; color: var(--cy-brand); }
}

/* ---------- 包装・発送（商品の下の欄。組み立ては cafe_yoyaku_customer_v2.js） ---------- */
/* 包装・発送が入った商品の行は、画面に出さない。既存 JS が行の display を見るので、display は変えずに畳む */
html.cyui2 .sonota .input_row.cyv-extra-row {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	opacity: 0;
	pointer-events: none;
}
html.cyui2 .cyv-extras {
	margin: 4px 0 20px;
	padding: 16px 14px 14px;
	text-align: left;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1px solid var(--cy-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(60, 40, 20, .06);
}
html.cyui2 .cyv-extras-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html.cyui2 .cyv-extras-title b { font-size: 16px; font-weight: 700; }
html.cyui2 .cyv-extras-title i { font-size: 12px; font-style: normal; font-weight: 600; color: var(--cy-sub); }
html.cyui2 .cyv-extras-group { margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--cy-sub); }
html.cyui2 .cyv-extra-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	padding: 10px 10px 10px 14px;
	border: 1.5px solid var(--cy-line);
	border-radius: 12px;
}
html.cyui2 .cyv-extra-item.cyv-on { background: var(--cy-brand-soft); border-color: var(--cy-brand); }
html.cyui2 .cyv-extra-name { min-width: 0; }
html.cyui2 .cyv-extra-name b { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
html.cyui2 .cyv-extra-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
html.cyui2 .cyv-extra-meta em { font-size: 14px; font-style: normal; font-weight: 600; color: var(--cy-sub); font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-extra-meta i { padding: 1px 8px; font-size: 11px; font-style: normal; font-weight: 700; color: var(--cy-sub); border: 1px solid var(--cy-line-strong); border-radius: 999px; }
html.cyui2 .cyv-extra-step { display: flex; flex: none; align-items: center; }
html.cyui2 .cyv-extra-step b { min-width: 50px; font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-extra-step b.cyv-empty { font-size: 13px; font-weight: 600; color: var(--cy-sub); }
html.cyui2 .cyv-extras button {
	margin: 0;
	font-family: inherit;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
html.cyui2 .cyv-extras button:focus-visible { outline: 3px solid rgba(123, 42, 34, .35); outline-offset: 2px; }
html.cyui2 .cyv-extras button.cyv-step { width: 44px; height: 44px; padding: 0; font-size: 21px; font-weight: 700; line-height: 1; border-radius: 50%; }
html.cyui2 .cyv-extras button.cyv-step:disabled { color: var(--cy-line-strong); border-color: var(--cy-line); cursor: default; }
html.cyui2 .cyv-extras-note { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: var(--cy-sub); }
html.cyui2 .cyv-extra-ship { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
html.cyui2 .cyv-extra-ship button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 6px 4px;
	border-radius: 12px;
}
html.cyui2 .cyv-extra-ship button b { font-size: 14px; font-weight: 700; line-height: 1.35; }
html.cyui2 .cyv-extra-ship button i { font-size: 12px; font-style: normal; font-weight: 600; color: var(--cy-sub); font-variant-numeric: tabular-nums; }
html.cyui2 .cyv-extra-ship button[aria-pressed="true"] { color: #fff; background: var(--cy-brand); border-color: var(--cy-brand); }
html.cyui2 .cyv-extra-ship button[aria-pressed="true"] i { color: #fff; }

/* ---------- お届け先（発送を選んだときだけ出る。組み立ては cafe_yoyaku_customer_v2.js） ---------- */
html.cyui2 .cyv-todoke {
	margin: -8px 0 20px;
	padding: 16px 14px 14px;
	text-align: left;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1px solid var(--cy-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(60, 40, 20, .06);
}
html.cyui2 .cyv-todoke > .cyv-extras-note { margin: 6px 0 12px; }
html.cyui2 .cyv-td { margin-top: 12px; padding: 12px; background: var(--cy-bg); border: 1px solid var(--cy-line); border-radius: 12px; }
html.cyui2 .cyv-td-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
html.cyui2 .cyv-td-title b { font-size: 15px; font-weight: 700; }
html.cyui2 .cyv-td-title i { padding: 1px 10px; font-size: 12px; font-style: normal; font-weight: 700; color: #fff; background: var(--cy-brand); border-radius: 999px; }
html.cyui2 .cyv-td-field { display: block; margin-top: 10px; }
html.cyui2 .cyv-td-field b,
html.cyui2 .cyv-td-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--cy-sub); }
html.cyui2 .cyv-td-label { margin-top: 14px; }
html.cyui2 .cyv-td-field input {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	font-family: inherit;
	font-size: 16px;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	border-radius: 10px;
	box-sizing: border-box;
}
html.cyui2 .cyv-td-field input:focus { border-color: var(--cy-brand); outline: 3px solid rgba(123, 42, 34, .18); }
html.cyui2 .cyv-td-field input.cyv-td-err { background: var(--cy-hot-soft); border: 2px solid var(--cy-hot); }
html.cyui2 .cyv-td-msg { margin-top: 4px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--cy-hot); }
html.cyui2 .cyv-td-msg:empty { display: none; }
html.cyui2 .cyv-td-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
html.cyui2 .cyv-todoke button {
	margin: 0;
	font-family: inherit;
	color: var(--cy-ink);
	background: var(--cy-surface);
	border: 1.5px solid var(--cy-line-strong);
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
html.cyui2 .cyv-todoke button:focus-visible { outline: 3px solid rgba(123, 42, 34, .35); outline-offset: 2px; }
html.cyui2 .cyv-todoke button.cyv-td-chip { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; border-radius: 10px; }
html.cyui2 .cyv-todoke button.cyv-td-chip[aria-pressed="true"] { color: #fff; background: var(--cy-brand); border-color: var(--cy-brand); }
html.cyui2 .cyv-todoke button.cyv-step { width: 38px; height: 38px; padding: 0; font-size: 19px; font-weight: 700; line-height: 1; border-radius: 50%; }
html.cyui2 .cyv-todoke button.cyv-step:disabled { color: var(--cy-line-strong); border-color: var(--cy-line); cursor: default; }
html.cyui2 .cyv-todoke .cyv-extra-step b { min-width: 42px; font-size: 14px; }
html.cyui2 .cyv-todoke button.cyv-td-clear { margin-top: 10px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--cy-sub); background: transparent; border-width: 1px; border-radius: 8px; }