/* 竹林堂整体院 予約システム：ナチュラルな雰囲気のメニュー表示 */

.ckd-menu {
	max-width: 720px;
	margin: 0 auto;
	font-feature-settings: "palt";
	line-height: 1.7;
}

.ckd-menu__category {
	font-size: 1.15rem;
	color: #4a5d3a;
	border-left: 5px solid #8aa876;
	background: #f4f6ef;
	padding: 0.55em 0.8em;
	border-radius: 0 8px 8px 0;
	margin: 2em 0 0.9em;
}

/* カテゴリごとに色味だけ変えて見分けやすくする（レイアウトは変更しない） */
.ckd-menu__category.ckd-cat-seitai {
	color: #7a4a2c;
	border-left-color: #c1875e;
	background: #f8f0e6;
}

.ckd-menu__category.ckd-cat-relax {
	color: #3d5c66;
	border-left-color: #7fa0ad;
	background: #eef4f6;
}

.ckd-menu__category.ckd-cat-option {
	color: #6b6350;
	border-left-color: #b3aa93;
	background: #f4f1e9;
}

.ckd-menu__category.ckd-cat-member {
	color: #8a6a2e;
	border-left-color: #d1a15f;
	background: #faf3e3;
}

.ckd-menu__list {
	display: grid;
	gap: 12px;
}

.ckd-menu__card {
	background: #fdfcf8;
	border: 1px solid #e4e0d3;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(90, 80, 60, 0.06);
}

.ckd-menu__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 12px;
}

.ckd-menu__name {
	font-weight: 600;
	color: #3d3a32;
}

.ckd-menu__price {
	font-weight: 700;
	color: #6b8e5a;
	white-space: nowrap;
}

.ckd-menu__price small {
	font-weight: 400;
	color: #8a8674;
	margin-left: 2px;
}

.ckd-menu__desc {
	margin: 0.5em 0 0;
	font-size: 0.88rem;
	color: #6f6a5c;
}

/* スマホ（幅480px以下）でも読みやすく */
@media (max-width: 480px) {
	.ckd-menu__card {
		padding: 12px 13px;
	}
	.ckd-menu__category {
		font-size: 1.05rem;
	}
	.ckd-steps span {
		font-size: 0.72rem;
	}
	.ckd-bar {
		flex-wrap: wrap;
	}
	.ckd-bar .ckd-btn {
		flex: 1;
		padding-left: 0.8em;
		padding-right: 0.8em;
		font-size: 0.88rem;
	}
	.ckd-slot {
		font-size: 0.72rem;
		padding: 7px 0;
	}
	.ckd-cal5 {
		gap: 4px;
	}
	.ckd-cal5__head {
		font-size: 0.8rem;
	}
	.ckd-menu__title {
		font-size: 0.82rem;
	}
	.ckd-menu__price {
		font-size: 0.95rem;
	}
	.ckd-menu__category {
		font-size: 0.98rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ===== 予約フォーム（第2弾） ===== */

.ckd-booking {
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.7;
}

.ckd-steps {
	display: flex;
	gap: 8px;
	margin: 0 0 1.2em;
}

.ckd-steps span {
	flex: 1;
	text-align: center;
	font-size: 0.82rem;
	padding: 0.45em 0.2em;
	background: #eeece3;
	color: #8a8674;
	border-radius: 999px;
}

.ckd-steps span.is-on {
	background: #6b8e5a;
	color: #fff;
	font-weight: 600;
}

.ckd-select {
	display: block;
	cursor: pointer;
}

.ckd-select:has(input:checked) {
	border-color: #6b8e5a;
	box-shadow: 0 0 0 2px rgba(107, 142, 90, 0.25);
}

.ckd-dur {
	color: #8a8674;
	font-weight: 400;
}

/* メニュー名と金額の折り返しを統一（名前は左で折り返し、金額は常に右で1行） */
.ckd-booking .ckd-menu__head {
	flex-wrap: nowrap;
	align-items: flex-start;
}

.ckd-booking .ckd-menu__name {
	flex: 1;
	min-width: 0;
}

.ckd-menu__category small {
	font-size: 0.68em;
	font-weight: 500;
	white-space: nowrap;
}

/* メニューカード：全カード2行構成（1行目=名前／2行目=目安時間 or 時間選択）・金額は右で上下中央 */
.ckd-menu__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ckd-menu__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 2.9em;
	gap: 2px;
}

.ckd-menu__title {
	font-weight: 600;
	color: #3d3a32;
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ckd-menu__left .ckd-dur {
	padding-left: 1.7em; /* ボタンの分だけ字下げ */
	font-size: 0.78rem;
}

.ckd-menu__variantrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 1.7em;
	font-size: 0.78rem;
	color: #6f6a5c;
}

.ckd-menu__variantrow > span {
	white-space: nowrap;
	flex: none;
}

.ckd-menu__variantrow select.ckd-variant {
	flex: none;
	width: auto;
	max-width: 12em;
	padding: 0.3em 0.4em;
	font-size: 0.85rem;
}

select.ckd-variant {
	border: 1.5px solid #6b8e5a;
	border-radius: 8px;
	padding: 0.35em 0.5em;
	background: #fff;
	color: #4a5d3a;
	font-weight: 600;
	font-size: 0.92rem;
	max-width: 100%;
}

.ckd-bar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: rgba(253, 252, 248, 0.95);
	border-top: 1px solid #e4e0d3;
	padding: 12px 4px;
	margin-top: 1.2em;
}

.ckd-bar__total strong {
	color: #6b8e5a;
	font-size: 1.15rem;
}

.ckd-btn {
	background: #6b8e5a;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.7em 1.5em;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap; /* ボタン文字の2行折り返しを防ぐ */
}

.ckd-btn--sm {
	padding: 0.45em 1em;
}

.ckd-btn:disabled {
	background: #c9c5b6;
	cursor: not-allowed;
}

.ckd-btn--ghost {
	background: #fff;
	color: #6b8e5a;
	border: 1.5px solid #6b8e5a;
}

.ckd-note {
	font-size: 0.85rem;
	color: #6f6a5c;
}

.ckd-error {
	color: #b3432f;
	font-weight: 600;
}

/* カレンダー（5日表示・横スクロールなし） */
.ckd-calnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.8em 0;
	font-weight: 600;
	color: #4a5d3a;
}

.ckd-cal5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
}

.ckd-cal5__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ckd-cal5__head {
	text-align: center;
	font-weight: 700;
	font-size: 0.88rem;
	color: #3d3a32;
	padding: 4px 0 6px;
	line-height: 1.3;
}

.ckd-cal5__head small {
	font-weight: 500;
	color: #8a8674;
}

.ckd-cal5__head.is-sun,
.ckd-cal5__head.is-sun small { color: #b3432f; }
.ckd-cal5__head.is-sat,
.ckd-cal5__head.is-sat small { color: #3a6ea5; }

.ckd-slot {
	display: block;
	width: 100%;
	font-size: 0.78rem;
	padding: 6px 0;
	border: 1px solid #cfcabb;
	border-radius: 8px;
	background: #fff;
	color: #3d3a32;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}

.ckd-slot:hover:not(.is-off) {
	background: #6b8e5a;
	border-color: #6b8e5a;
	color: #fff;
}

.ckd-slot.is-off {
	background: #f0eee6;
	border-color: #e7e3d6;
	color: #c4bfae;
	cursor: default;
}

/* ★v0.23.0：時間おすすめ表示。前後の予約と間があかない枠。
   色だけに頼らず枠線もわずかに濃くする（色弱の方への配慮）。hoverは通常の◯と同じ */
.ckd-slot.is-reco {
	background: #e9f2e4;
	border-color: #9dbb8d;
	color: #33531f;
}

.ckd-reco-note {
	margin: 10px 2px 0;
	font-size: 0.78rem;
	line-height: 1.6;
	color: #5a7050;
}

/* ★v0.24.0：オプションおすすめバッジ（淡い金茶の小さなチップ。選択操作には影響しない） */
.ckd-optbadge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #f4ecd9;
	border: 1px solid #dcc99a;
	color: #7a5c1e;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.6;
	vertical-align: 1px;
	white-space: nowrap;
}

/* ★v0.24.0：オプション一覧への一言（進むボタンの帯の上。オプション欄が見えたら消える） */
.ckd-optnote {
	margin: 0 2px 4px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #8a8371;
	text-align: right;
}

.ckd-cal5__na {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #f2f0e8;
	border-radius: 8px;
	color: #8a8674;
	font-size: 0.72rem;
	line-height: 1.5;
	padding: 8px 2px;
	min-height: 120px;
}

.ckd-calscroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ckd-cal {
	border-collapse: collapse;
	width: 100%;
	min-width: 560px;
	background: #fdfcf8;
	font-size: 0.85rem;
}

.ckd-cal th,
.ckd-cal td {
	border: 1px solid #e4e0d3;
	text-align: center;
	padding: 4px 2px;
	min-width: 64px;
}

.ckd-cal thead th {
	background: #f4f6ef;
	color: #4a5d3a;
}

.ckd-cal thead th.is-sun { color: #b3432f; }
.ckd-cal thead th.is-sat { color: #3a6ea5; }

.ckd-cal tbody th {
	background: #faf8f1;
	font-weight: 500;
	color: #6f6a5c;
	min-width: 52px;
}

.ckd-cal td.is-free button {
	width: 100%;
	background: #eef4e8;
	border: none;
	border-radius: 6px;
	color: #4a7c3a;
	font-weight: 700;
	padding: 5px 0;
	cursor: pointer;
}

.ckd-cal td.is-free button:hover {
	background: #6b8e5a;
	color: #fff;
}

.ckd-cal td.is-full,
.ckd-cal td.is-na {
	color: #c1bcab;
	background: #f7f5ee;
}

.ckd-cal td.is-closed,
.ckd-cal td.is-line {
	background: #f0ede3;
	color: #8a8674;
	font-size: 0.8rem;
	vertical-align: middle;
}

/* お客様情報フォーム */
.ckd-summary {
	background: #f4f6ef;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 1.2em;
}

.ckd-summary h3 {
	margin: 0 0 0.4em;
	font-size: 1rem;
	color: #4a5d3a;
}

.ckd-summary__total {
	font-weight: 700;
	color: #6b8e5a;
}

.ckd-form label {
	display: block;
	margin-bottom: 0.9em;
	font-size: 0.92rem;
	font-weight: 600;
	color: #3d3a32;
}

.ckd-form input[type="text"],
.ckd-form input[type="email"],
.ckd-form input[type="tel"],
.ckd-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.3em;
	padding: 0.6em 0.8em;
	border: 1px solid #d5d0c0;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	box-sizing: border-box;
}

.ckd-req {
	background: #b3432f;
	color: #fff;
	font-size: 0.7rem;
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 4px;
	vertical-align: middle;
}

.ckd-policy {
	background: #faf8f1;
	border: 1px solid #e4e0d3;
	border-radius: 10px;
	padding: 12px 14px;
	margin: 1em 0;
}

.ckd-policy h3 {
	margin: 0 0 0.5em;
	font-size: 0.95rem;
	color: #b3432f;
}

.ckd-policy pre {
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 0.83rem;
	color: #6f6a5c;
	max-height: 220px;
	overflow-y: auto;
	margin: 0;
}

.ckd-agree {
	font-weight: 700;
}

.ckd-done {
	background: #f4f6ef;
	border-radius: 12px;
	padding: 28px 20px;
	text-align: center;
}

.ckd-done h3 {
	color: #4a5d3a;
	margin: 0 0 1em;
}

.ckd-done__msg {
	margin: 0 0 1.4em;
	line-height: 1.9;
}

.ckd-done__manage {
	margin: 0 0 1.4em;
}

.ckd-done__manage .ckd-btn {
	display: inline-block;
	text-decoration: none;
}

.ckd-done__manage .ckd-note {
	margin-top: 0.7em;
}

/* 予約の確認・キャンセル画面 */
.ckd-mg-lead {
	margin: 0 0 1.1em;
	line-height: 1.8;
}

.ckd-mg-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.8em;
}

.ckd-mg-actions .ckd-btn {
	min-width: 240px;
}

.ckd-langtoggle {
	text-align: right;
	margin-bottom: 6px;
}

.ckd-langtoggle button {
	background: none;
	border: 1px solid #cfcabb;
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-size: 0.8rem;
	color: #6f6a5c;
	cursor: pointer;
}

.ckd-langtoggle button:hover {
	border-color: #6b8e5a;
	color: #4a5d3a;
}

.ckd-changenote {
	background: #fff7e0;
	border: 1.5px solid #e0b94f;
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 1em;
	font-size: 0.88rem;
	color: #7a5c00;
	line-height: 1.6;
}

/* ★追加：body care+会員向け「施術内容変更（振替）」トグル */
.ckd-swap {
	background: #fbeee0;
	border: 1.5px solid #d9a15f;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 1.1em;
	font-size: 0.9rem;
	color: #6b4a1e;
	line-height: 1.6;
}
.ckd-swap label {
	font-weight: 600;
	cursor: pointer;
}
.ckd-swap .ckd-note {
	margin: 4px 0 0;
	color: #6b4a1e;
}

.ckd-linebox {
	background: #fff;
	border: 2px solid #06c755;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 1.2em 0;
}

.ckd-linebox h4 {
	margin: 0 0 0.4em;
	color: #06a94a;
	font-size: 0.98rem;
}

.ckd-linebox__code {
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: 0.25em;
	color: #3d3a32;
	margin: 0.3em 0;
}