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

/* ===== LINEマイページ（v0.32.0） ===== */
.ckd-mypage {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 12px 24px;
	font-feature-settings: "palt";
	line-height: 1.7;
	color: #3d3a32;
}
.ckd-mypage__loading {
	text-align: center;
	color: #6b6b60;
	padding: 32px 0;
}
.ckd-mypage__head {
	font-size: 1.1rem;
	font-weight: 700;
	color: #4a5d3a;
	margin: 8px 0 16px;
}
.ckd-mp-card {
	border: 1px solid #dfe4d8;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 14px;
	background: #fbfcf9;
}
.ckd-mp-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #4a5d3a;
	margin: 0 0 10px;
}
.ckd-mp-when {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 4px;
}
.ckd-mp-menus {
	color: #5f5f55;
	margin: 0 0 12px;
}
.ckd-mp-plan {
	font-weight: 700;
	margin: 0 0 6px;
}
.ckd-mp-remaining {
	margin: 0 0 6px;
}
.ckd-mp-remaining strong {
	font-size: 1.3em;
	color: #3b6d11;
}
/* ★v1.17.0：ご予約が2件以上のとき、1件ずつを見分けるための区切り。
   ★1件のときは .ckd-mp-res--next が付かないので、見た目はこれまでと同じ。 */
.ckd-mp-res--next {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.ckd-mp-note {
	color: #6b6b60;
	font-size: 0.9rem;
	margin: 8px 0 0;
}
.ckd-mp-btn {
	display: block;
	text-align: center;
	background: #5f7a3f;
	color: #fff !important;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 700;
	margin: 12px 0 0;
}
.ckd-mp-btn:hover {
	background: #526b36;
}

/* マイページのひとこと（v0.34.0）：ごぶさた／プランのご案内 */
.ckd-mp-notice {
	background: #f4f7f0;
	border-left: 4px solid #8aa46a;
	border-radius: 0;
	padding: 14px 16px;
	margin: 0 0 14px;
}
.ckd-mp-notice-text {
	margin: 0;
	color: #45463c;
	font-size: 0.95rem;
	line-height: 1.8;
}
.ckd-mp-notice-link {
	display: inline-block;
	margin-top: 10px;
	color: #4a5d3a;
	font-weight: 700;
	text-decoration: underline;
}
.ckd-mp-notice--quiet {
	background: transparent;
	border-left: none;
	border-top: 1px solid #e2e7dc;
	padding: 14px 2px 0;
	margin-top: 6px;
}
.ckd-mp-notice--quiet .ckd-mp-notice-text {
	color: #6b6b60;
	font-size: 0.88rem;
}

/* ============================================================
 * マイページのお知らせ（v1.8.0）：休診・年末年始など、店から全員へ
 *
 * ★ひとこと（.ckd-mp-notice）とは別の見た目にする。
 *   あれは「そっと添える」もの、こちらは「必ず読んでほしい」もの。
 *   同じ色・同じ形にすると、休診のお知らせが案内文に埋もれる。
 * ★とはいえ、いちばん強い色は予約ボタン（#5f7a3f）に取ってある。
 *   お知らせを赤くすると、次にすることが「予約」から動いてしまう。
 *   → 落ち着いた砂色の面で「別のもの」だと分かる程度に留める。
 *
 * ★v1.8.1：見出しを1つ置き、1件ずつ**別のカード**にした。
 *   v1.8.0 は1つの枠の中を細い線で区切っていたため、
 *   ・上に何も無いので**唐突に始まって見え**（直前のカードの続きに読める）
 *   ・件と件の境が細い線1本しかなく、**内容が別だと分かりにくい**
 *   という2つが起きていた。
 *   ★区切りは「線を引く」より「離す」ほうが強い。
 * ============================================================ */
.ckd-mp-news__head {
	font-size: 0.85rem;
	font-weight: 700;
	color: #8a6d2f;
	letter-spacing: 0.04em;
	margin: 18px 0 8px;
	padding: 0 2px;
}
.ckd-mp-news {
	background: #fdf8ee;
	border: 1px solid #e8dcc2;
	border-radius: 10px;
	padding: 14px 16px;
	/* ★カード同士の間。ほかのカード（14px）よりわずかに詰めて、
	   「お知らせという1つのまとまり」に見えるようにする */
	margin: 0 0 10px;
}
/* まとまりの最後だけ、次の項目との間を空ける */
.ckd-mp-news:last-of-type {
	margin-bottom: 14px;
}
/* ★v1.8.2：見出し。目が止まる場所を1つ作る */
.ckd-mp-news__title {
	margin: 0 0 6px;
	color: #6b5216;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.ckd-mp-news__text {
	margin: 0;
	color: #45463c;
	font-size: 0.95rem;
	line-height: 1.8;
}

/* ★v1.8.2：「くわしく見る」は文字リンクではなく枠線ボタン。
   ★お知らせの枠は砂色なので、緑の枠線ボタンのままだと浮く。
     枠と文字だけ砂色系に寄せ、形（大きさ・角丸・余白）は
     .ckd-mp-btn--outline のまま使う。★形を変えると別の部品に見える。 */
.ckd-mp-news .ckd-mp-btn.ckd-mp-news__btn {
	color: #6b5216 !important;
	border-color: #d8c49a;
	margin-top: 12px;
}
.ckd-mp-news .ckd-mp-btn.ckd-mp-news__btn:hover {
	background: #f6ecd8;
}

/* 「閉じる」。★読む邪魔にならないよう、右端に小さく置く。
   ★セレクタを2つ重ねているのは、.ckd-mp-minilink が
     このファイルの**後ろ**で display:inline-block を指定しているため。
     クラス1つ同士だと後ろが勝ち、v1.8.1 では「くわしく見る」と
     同じ行に並んで出ていた（実機でご指摘いただいた形）。
   ★同じ強さの指定が2つあるときは、順番ではなく強さで決める。
     順番に頼ると、行を並べ替えただけで見た目が変わる。 */
.ckd-mp-news .ckd-mp-news__hide {
	display: block;
	text-align: right;
	margin-top: 12px;
	font-size: 0.8rem;
}

/* プラン案内の枠線ボタン（v0.36.0）：予約ボタンより一段控えめ */
.ckd-mp-btn.ckd-mp-btn--outline {
	background: transparent;
	color: #4a5d3a !important;
	border: 2px solid #9bb178;
	padding: 10px 16px;
}
.ckd-mp-btn.ckd-mp-btn--outline:hover {
	background: #eef2e8;
}

/* お客様自身の表示設定（v0.36.0）：静かな小さいリンク */
.ckd-mp-minilink {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.8rem;
	color: #8a8a7e;
	text-decoration: underline;
	cursor: pointer;
}
.ckd-mp-restore {
	margin: 20px 0 0;
	text-align: center;
}
.ckd-mp-restore .ckd-mp-minilink {
	margin-top: 0;
}

/* ★v0.38.0：リマインダーの受け取り状態を示す、ごく控えめな説明文 */
.ckd-mp-quiet {
	font-size: 0.78rem;
	color: #9a978c;
	line-height: 1.6;
}

/* 未連携の方：ボタン下のご案内（v0.34.1） */
.ckd-mp-note--sub {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e2e7dc;
	font-size: 0.88rem;
	line-height: 1.8;
}

.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;
	/* ★v1.32.1：minmax(0,1fr)。既定（1fr＝最小が中身の幅）だと、長いメニュー名（nowrap）に
	   　 引っぱられてカードが画面の右へ 12px はみ出し、スマホで金額が「¥8,0」と切れていた。 */
	grid-template-columns: minmax(0, 1fr);
	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;
	/* ★v0.84.0：時間を選ぶメニューも同じ右端に値段を出すようになったので、右そろえにする */
	text-align: right;
}

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

/* ★v0.92.0（A-3）：竹林堂シェアパスの会員価格。
   通常価格は「もとの値段」として控えめに残し、実際にかかる金額を主役にする。
   ★「20%OFF」のような割引率は書かない（割引券に見えるため。引き継ぎ書 §4）。
   ★金額そのものは booking.js が差し込む。ここには数字を書かない。 */
.ckd-menu__was {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: #a8a496;
	text-decoration: line-through;
}

.ckd-menu__member {
	display: block;
	color: #6b8e5a;
}

.ckd-menu__memberlabel {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	color: #8a7a4a;
	letter-spacing: 0.02em;
	/* ★.ckd-menu__price small の margin-left を打ち消す（別行に出すため） */
	margin-left: 0;
}

.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.83.0：空き状況プレビュー（メニューを選ぶ前の下見）。
   新しい色は足していない（既存のカレンダー・注記と同じ色をそのまま使う）。
   中の枠は .ckd-cal5 / .ckd-slot をそのまま流用するため、ここでは器だけを定義する。 */
.ckd-peek {
	margin: 0 0 16px;
}

.ckd-peek__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cfcabb;
	border-radius: 10px;
	background: #fbfcf9;
	color: #4a5d3a;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.ckd-peek__toggle:hover {
	background: #f2f5ee;
	border-color: #9dbb8d;
}

.ckd-peek__caret {
	font-size: 0.7rem;
	color: #6b8e5a;
}

.ckd-peek__body {
	padding: 4px 2px 0;
}

/* hidden 属性が効くように（display を持つ指定に負けないため） */
.ckd-peek__body[hidden] {
	display: none;
}

.ckd-peek__note {
	margin: 10px 2px 0;
	font-size: 0.78rem;
	line-height: 1.6;
	color: #6f6a5c;
}

.ckd-peek__picked {
	margin: 8px 2px 0;
	padding: 8px 12px;
	border: 1px solid #9dbb8d;
	border-radius: 8px;
	background: #e9f2e4;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #33531f;
}

.ckd-peek__picked[hidden] {
	display: none;
}

.ckd-peek__clear {
	border: none;
	background: none;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #4a5d3a;
	text-decoration: underline;
	cursor: pointer;
}

.ckd-peek__fitmsg {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	color: #5a7050;
}

/* ★v0.86.0：今の組み合わせが入らないときだけ、注意の色にする
   （「◯◯からご案内できます」という前向きな案内とは意味が違うので、同じ色で出さない） */
.ckd-peek__fitmsg--warn {
	color: #8a5a1f;
	font-weight: 600;
}

/* ★v0.84.0：下見で押した枠。日時選択の画面でも見つけやすいように印を付ける
   （色だけに頼らず、枠線も太くする） */
.ckd-slot.is-peeked {
	border-color: #4a5d3a;
	border-width: 2px;
	font-weight: 700;
}

/* ★v0.98.0：いま決まっている日時。
   「下見で見ていた枠（is-peeked）」とは意味が違うので、見た目もはっきり分ける。

   ★v0.97.0 まで、下見で選んだ枠は**枠線だけ**だったのに対し、
     おすすめ枠（is-reco）は**塗りつぶし**だった。
     お客様がご自分で選んだ枠より、システムが薦める枠のほうが強く見えていた。
     ★「誰が決めたか」がいちばん強く見えるようにする。

   ★is-reco / is-peeked より後ろに書く（詳細度が同じなので、後勝ちで塗りが優先される）。
     CSSの詳細度は数える。 */
.ckd-slot.is-picked {
	background: #4a5d3a;
	border-color: #4a5d3a;
	color: #fff;
	font-weight: 700;
}

.ckd-slot.is-picked::after {
	content: ' ✓';
}

/* ★色だけに頼らない（色弱の方への配慮）。✓ と太字でも分かるようにしてある */
.ckd-slot.is-picked:hover:not(.is-off) {
	background: #3d4d30;
	border-color: #3d4d30;
}

/* ★v0.98.0：飛ばして済んだステップ。「済」だと分かり、かつ現在地（is-on）とは区別する */
.ckd-steps span.is-done {
	color: #4a5d3a;
	font-weight: 600;
}

/* ★v0.99.0（A-5a）：オプションポイントの欄。
   ★シェアパスをお持ちでない方には、そもそもこの欄を出さない（「0pt」も出さない）。 */
.ckd-points {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #f6f3ec;
	border-left: 4px solid #b9a86a;
	border-radius: 6px;
}

.ckd-points__h {
	margin: 0 0 6px;
	font-size: 0.92rem;
}

.ckd-points__bal {
	margin: 0 0 8px;
	font-size: 0.86rem;
}

.ckd-points__use {
	display: block;
	margin: 0 0 8px;
	font-weight: 700;
	cursor: pointer;
}

/* ★v0.99.1：対象外のオプションが選ばれているときだけ出す1行。
   黙って上限が下がると、お客様には理由が分からない。

   ★色は赤（.ckd-error = #b3432f）にしない。
     赤は「送信できません」等のエラー専用。ここは選べないだけで、先へは進める。
     v0.86.0 の .ckd-peek__fitmsg--warn（#8a5a1f）とまったく同じ意味・同じ色にそろえる。
     ★「全部同じ色で出す」と、いちばん大事な警告が死ぬ。 */
.ckd-points__ng {
	margin: 0;
	font-size: 0.82rem;
	color: #8a5a1f;
	font-weight: 600;
	line-height: 1.7;
}

/* ★v1.0.0（A-5b）：クーポンコードの欄。
   ★ポイント欄（.ckd-points）と見た目をそろえる。
     どちらも「合計に効く追加の操作」なので、違う見た目にすると
     お客様には別の種類の機能に見えてしまう。 */
.ckd-coupon {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #f6f3ec;
	border-left: 4px solid #b9a86a;
	border-radius: 6px;
}

.ckd-coupon__h {
	margin: 0 0 6px;
	font-size: 0.92rem;
}

.ckd-coupon__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.ckd-coupon__row input[type="text"] {
	flex: 1;
	min-width: 0;
	/* ★入力は小文字でも通る（正規化はサーバー側の1か所）。
	   ただし見た目は大文字にそろえて、貼り付けたコードが読み取りやすいようにする。 */
	text-transform: uppercase;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.04em;
}

.ckd-coupon__apply,
.ckd-coupon__clear {
	flex: 0 0 auto;
	background: #6b8e5a;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 8px 14px;
	font-weight: 700;
	cursor: pointer;
}

.ckd-coupon__apply[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ckd-coupon__clear {
	background: transparent;
	color: #6b6555;
	text-decoration: underline;
	padding: 2px 6px;
	font-weight: 600;
}

.ckd-coupon__on {
	margin: 0;
	font-size: 0.9rem;
}

.ckd-coupon__msg {
	margin: 8px 0 0;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.7;
}

/* ★使えないときの色は赤にしない。
   赤（.ckd-error = #b3432f）は「送信できません」専用。
   クーポンが使えなくても、通常価格で先へ進める。
   v0.86.0 の .ckd-peek__fitmsg--warn、v0.99.1 の .ckd-points__ng と同じ色。
   ★注意の色を増やす前に、同じ意味の色がすでにないか探す。 */
.ckd-coupon__msg--warn {
	color: #8a5a1f;
}

.ckd-coupon__msg--ok {
	color: #33531f;
}

/* ★v0.84.0：下見した時刻に入らない長さのメニュー。
   「消す」のではなく「選べない」にする。何があるかは見えたままにしておく。 */
.ckd-menu__card.is-na {
	background: #f6f5f0;
	border-color: #e7e3d6;
	cursor: default;
}

.ckd-menu__card.is-na .ckd-menu__title,
.ckd-menu__card.is-na .ckd-dur,
.ckd-menu__card.is-na .ckd-menu__price,
.ckd-menu__card.is-na .ckd-menu__variantrow {
	color: #a8a496;
}

.ckd-menu__na {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: #a8a496;
	white-space: nowrap;
}

/* ★v0.84.0：時間の▼。文字だけだと「選べる」ことに気づかれないため、
   押せる形（枠＋▼）にして、タップできる面積も広げる。 */
.ckd-vsel {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ckd-vsel::after {
	content: "▼";
	position: absolute;
	right: 0.7em;
	font-size: 0.62rem;
	color: #6b8e5a;
	pointer-events: none;
}

/* 枠の色・太さは従来のまま（既に押せる見た目になっている）。
   足すのは「▼の場所を空ける」「押せる面積を広げる」だけ。 */
.ckd-menu__variantrow select.ckd-variant,
select.ckd-variant {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.42em 2.1em 0.42em 0.7em;
	line-height: 1.2;
	cursor: pointer;
}

.ckd-menu__variantrow select.ckd-variant:hover {
	background: #f7faf4;
}

.ckd-menu__card.is-na .ckd-vsel::after {
	color: #c4bfae;
}

.ckd-menu__card.is-na select.ckd-variant {
	border-color: #e7e3d6;
	background: #f6f5f0;
	color: #a8a496;
	cursor: default;
}

/* ★v0.37.0：指名予約の担当選択（控えめ。選択肢は減らさない・押し付けない） */
.ckd-staffpick {
	margin: 6px 2px 14px;
}

.ckd-staffpick__head {
	margin: 0 0 8px;
	font-size: 0.86rem;
	font-weight: 600;
	color: #3d3a32;
}

.ckd-staffpick__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ckd-staffpick__opt {
	padding: 7px 14px;
	border: 1px solid #cfcabb;
	border-radius: 999px;
	background: #fff;
	color: #3d3a32;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}

.ckd-staffpick__opt:hover {
	border-color: #6b8e5a;
	color: #4a6b3b;
}

.ckd-staffpick__opt.is-on {
	background: #6b8e5a;
	border-color: #6b8e5a;
	color: #fff;
}

.ckd-staffpick__note {
	margin: 8px 2px 0;
	font-size: 0.76rem;
	line-height: 1.6;
	color: #6a6553;
}

.ckd-summary__staff {
	margin: 2px 0;
	font-size: 0.86rem;
	color: #3d3a32;
}

/* ★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.25.0：インラインオプション提案（選択中メニュー直下のパネル。※v0.24.0の一言は撤去） */
.ckd-inline-reco {
	margin: -4px 0 0 18px;
	padding: 10px 14px;
	background: #f7f4ea;
	border: 1px solid #e4dcc4;
	border-radius: 10px;
	animation: ckd-inline-in 0.25s ease;
}

@keyframes ckd-inline-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ckd-inline-reco__head {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 600;
	color: #7a5c1e;
}

.ckd-inline-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px;
	font-size: 0.88rem;
	color: #3d3a32;
	cursor: pointer;
}

.ckd-inline-opt__name {
	flex: 1;
	min-width: 0;
}

.ckd-inline-opt__price {
	color: #6b8e5a;
	font-weight: 600;
	white-space: nowrap;
}

.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;
}

/* ★v0.49.0 カレンダー登録（予約確認ページ）
   「その場で使える道具」として静かに置く。売り込みの見た目にしない。
   ★v0.49.1：スマホで画面からはみ出していたのを修正。
   このサイトは box-sizing が全体に効いていないため、幅を指定する箇所では
   個別に border-box を指定しないと「幅100％＋左右の余白」で必ずはみ出す。 */
.ckd-addcal {
	box-sizing: border-box;
	max-width: 100%;
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid #e3e0d6;
	border-radius: 10px;
	background: #fcfbf7;
}
.ckd-addcal__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: #4a4a44;
}
/* ボタンは常に縦積み。横並びは幅の計算が狂いやすく、機種による事故が起きやすいため */
.ckd-addcal__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.ckd-addcal .ckd-btn {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	text-align: center;
	white-space: normal; /* 文字数が増えても、はみ出さずに折り返す */
	word-break: break-word;
}
.ckd-addcal .ckd-note {
	margin: 10px 0 0;
	max-width: 100%;
	font-size: 12px;
	line-height: 1.6;
	color: #7a7568;
	overflow-wrap: anywhere; /* 長いURLなどでも横に伸びない */
}

/* ★v0.49.1：以前からあったはみ出しもあわせて修正。
   「予約をキャンセル」などのボタンが min-width:240px の固定幅で、
   画面の狭い端末では枠からはみ出していた（LINEアプリ内ブラウザで顕著）。 */
.ckd-mg-actions {
	max-width: 100%;
}
.ckd-mg-actions .ckd-btn {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 320px;
	white-space: normal;
}

/* 念のための歯止め：予約確認ページの各ブロックが画面幅を超えないようにする */
.ckd-booking,
.ckd-summary,
.ckd-done {
	box-sizing: border-box;
	max-width: 100%;
}
.ckd-booking { max-width: min(720px, 100%); }

/* ★v0.71.0：来院前リマインダーの設定カード（マイページ） */
.ckd-rm-card {
	margin-top: 20px;
}
/* ★v0.72.0：受け取りON/OFFを枠付きの行にして押しやすく */
.ckd-rm-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border: 1px solid #dfe4d8;
	border-radius: 10px;
	background: #fff;
	font-size: 0.95rem;
	color: #3a3a34;
	cursor: pointer;
	margin-top: 6px;
}
.ckd-rm-toggle-row input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: #5f7a3f;
}
.ckd-rm-timing {
	margin-top: 16px;
}
.ckd-rm-label {
	margin: 0 0 10px;
	font-size: 0.88rem;
	color: #6b6b60;
}
/* ★v0.72.0：タイミング候補（ラジオ）。1行ずつ・選択中は緑枠 */
.ckd-rm-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ckd-rm-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid #dfe4d8;
	border-radius: 10px;
	background: #fff;
	font-size: 0.95rem;
	color: #45463c;
	cursor: pointer;
}
.ckd-rm-opt input.ckd-rm-radio {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: #5f7a3f;
}
.ckd-rm-opt.is-selected {
	border: 2px solid #5f7a3f;
	background: #f1f5ea;
	color: #3b4a26;
	font-weight: 700;
	padding: 10px 13px;
}
/* ★v0.72.0：「その他（自由入力）」の行。「施術の」を縦積みさせない */
.ckd-rm-custom {
	margin-top: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #dfe4d8;
	border-radius: 10px;
}
.ckd-rm-custom-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	font-size: 0.95rem;
	color: #3a3a34;
}
.ckd-rm-custom-lead {
	white-space: nowrap;
	flex: none;
}
.ckd-rm-num {
	/* ★v0.72.1：テーマ側の input{width:100%} 等に負けて枠がはみ出すのを防ぐため、幅を確実に固定する */
	width: 64px !important;
	max-width: 64px;
	min-width: 0;
	flex: 0 0 64px;
	box-sizing: border-box;
	text-align: center;
	font-size: 0.95rem;
	padding: 8px 6px;
	border: 1px solid #cdd3c4;
	border-radius: 8px;
}
.ckd-rm-unit-seg {
	display: inline-flex;
	flex: none;
	border: 1px solid #cdd3c4;
	border-radius: 8px;
	overflow: hidden;
}
.ckd-rm-unit-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: #fff;
	color: #5f5f55;
	font-size: 0.9rem;
	padding: 8px 12px;
	cursor: pointer;
	line-height: 1;
}
.ckd-rm-unit-btn + .ckd-rm-unit-btn {
	border-left: 1px solid #cdd3c4;
}
.ckd-rm-unit-btn.is-active {
	background: #5f7a3f;
	color: #fff;
	font-weight: 700;
}
/* ★v0.72.0：現在の設定バッジ */
.ckd-rm-current {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 10px 12px;
	background: #eef2e8;
	border-radius: 8px;
	font-size: 0.85rem;
	color: #3b4a26;
}
.ckd-rm-bell {
	flex: none;
	color: #5f7a3f;
}
.ckd-rm-save {
	margin-top: 14px;
}
/* ★v1.42.0：「ご来院の [3] 時間前」の行・おやすみ中の一言・保存の結果 */
.ckd-rm-timing[hidden],
.ckd-rm-quiet[hidden] {
	display: none;
}
.ckd-rm-hours-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 0.95rem;
	color: #3a3a34;
	white-space: nowrap;
}
/* ★v1.42.1：iPhone（LINEの中のブラウザ）で数字が下に切れて見えなかった。
   テーマ側の select の高さ・上下の余白・行の高さが効いて、文字の入る場所が無くなっていた。
   → 見た目の形を自分で持つ（appearance:none）。高さは決め打ち、上下の余白は0、行の高さ＝高さ。
     ★16px 未満だと iPhone が勝手に拡大するので 16px 以上。 */
.ckd-rm-card select.ckd-rm-hours,
select.ckd-rm-hours {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	width: 84px !important;
	min-width: 84px !important;
	max-width: 84px !important;
	height: 46px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 30px 0 14px !important;
	line-height: 44px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #3b4a26 !important;
	text-align: left !important;
	text-indent: 0 !important;
	vertical-align: middle !important;
	border: 1px solid #b9c2ad !important;
	border-radius: 10px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f7a3f' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 11px center !important;
	background-size: 12px 8px !important;
	box-shadow: none !important;
	flex: 0 0 auto;
}
.ckd-rm-quiet {
	margin: -6px 0 14px;
	padding: 9px 12px;
	background: #fbf5e6;
	border-radius: 8px;
	font-size: 0.85rem;
	color: #6b5420;
	white-space: normal;
}
.ckd-rm-lead {
	margin-bottom: 8px;
}
.ckd-rm-msg {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: #a23b2a;   /* ★v1.42.1：出るのは保存できなかったときだけ */
}
.ckd-rm-msg:empty {
	display: none;
}
/* ★v0.72.3：保存確認トースト（画面下に一瞬表示） */
.ckd-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 12px);
	z-index: 99999;
	max-width: 88%;
	padding: 11px 20px;
	background: #3a4a2c;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	border-radius: 22px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.ckd-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ==========================================================================
   竹林堂シェアパス 共有メンバーの登録フォーム（v0.89.0・[chikurindo_share_join]）
   ★テーマ側CSSに負けて崩れることがあるため、幅と余白は自分で持つ。
   ========================================================================== */
.ckd-sharejoin { max-width: 560px; margin: 0 auto; line-height: 1.7; }
.ckd-sharejoin__h { font-size: 1.25em; margin: 0 0 .6em; }
.ckd-sharejoin__lead { margin: 0 0 1.2em; }
.ckd-sharejoin__form p { margin: 0 0 1em; }
.ckd-sharejoin__form label { display: block; font-weight: 600; }
.ckd-sharejoin__form input {
	box-sizing: border-box; width: 100%; max-width: 100%;
	padding: .6em .7em; font-size: 16px; /* iOSで拡大されないように16px */
	border: 1px solid #c9c4b4; border-radius: 4px; background: #fff;
}
.ckd-sharejoin__hint { display: block; margin-top: .3em; font-size: .85em; color: #6a6553; font-weight: 400; }
.ckd-sharejoin__note { font-size: .9em; color: #6a6553; }
.ckd-sharejoin__btn {
	display: inline-block; width: 100%; padding: .9em 1.2em;
	font-size: 1.05em; font-weight: 700; color: #fff; background: #3f5d3f;
	border: 0; border-radius: 4px; cursor: pointer;
}
.ckd-sharejoin__btn:hover { background: #344d34; }
.ckd-sharejoin__done,
.ckd-sharejoin__err { padding: 1em 1.1em; border-radius: 4px; margin: 0 0 1.2em; }
.ckd-sharejoin__done { background: #eaf3e6; border: 1px solid #b8d3ab; }
.ckd-sharejoin__err  { background: #fbf1e6; border: 1px solid #e0c9a6; }

/* ============================================================
   ★v1.5.0：マイページの「たたんだ見出し」
   
   ・たたむのは「次回のご予約以外が2つ以上あるとき」だけ。
     1つしか無い方の画面は、これまでと1ピクセルも変わらない。
   ・★たたむなら、見出しに数字を入れる。
     「月額プラン ＋」だけだと開かれなければ何も伝わらないが、
     「月額プラン　残り 2 / 4 回 ＋」ならたたんだままで用が足りる。
   ・色と角丸は .ckd-mp-card にそろえる。★注意の色（#8a5a1f）はここでは使わない。
   ============================================================ */
.ckd-mp-fold {
	border: 1px solid #dfe4d8;
	border-radius: 10px;
	background: #fbfcf9;
	margin: 0 0 10px;
	overflow: hidden;
}
.ckd-mp-fold__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 13px 16px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}
.ckd-mp-fold__label {
	font-weight: 700;
	color: #4a5d3a;
	flex: 0 0 auto;
}
.ckd-mp-fold__val {
	flex: 1;
	min-width: 0;
	color: #3b6d11;
	font-weight: 700;
}
.ckd-mp-fold__val strong { font-size: 1.15em; }
/* ★添え物は色も太さも落とす。同じ強さで並べると、数字が埋もれる */
.ckd-mp-fold__val small {
	color: #6b6b60;
	font-weight: 400;
	font-size: 0.85em;
}
.ckd-mp-fold__mark {
	flex: 0 0 auto;
	color: #8a9a7a;
	font-weight: 700;
	line-height: 1;
}
/* 開いているときは ＋ を × に見せる（画像を増やさない） */
.ckd-mp-fold--open .ckd-mp-fold__mark {
	display: inline-block;
	transform: rotate(45deg);
}
.ckd-mp-fold__body {
	padding: 0 16px 16px;
}
/* リマインダーは中に入力があるので、上に区切りを入れて見やすくする */
.ckd-mp-fold.ckd-rm-card .ckd-mp-fold__body {
	border-top: 1px solid #e7ebe1;
	padding-top: 12px;
}

/* ============================================================
   ★v1.5.1：マイページの「見るだけの行」

   ・開いても情報が増えないもの（月額プラン・シェアパス）は**開閉しない**。
     v1.5.0 で開閉を付けたが、押しても同じことが書いてあるだけだった。
     ★開いて何もできないなら、開閉ボタンは害にしかならない。
   ・たたむのは「操作できるもの」だけ（リマインダー）。
   ============================================================ */
.ckd-mp-info {
	border: 1px solid #dfe4d8;
	border-radius: 10px;
	background: #fbfcf9;
	padding: 12px 16px;
	margin: 0 0 10px;
}
.ckd-mp-info__head {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.ckd-mp-info__label {
	font-weight: 700;
	color: #4a5d3a;
	flex: 0 0 auto;
}
.ckd-mp-info__val {
	color: #3b6d11;
	font-weight: 700;
}
.ckd-mp-info__val strong { font-size: 1.15em; }
/* ★プラン名は長い（body care +【for men's】）。見出しと同じ行に置かず、次の行へ */
.ckd-mp-info__line {
	margin: 3px 0 0;
}
.ckd-mp-info__line strong {
	font-size: 1.15em;
	color: #3b6d11;
}
/* ★添え物は色も太さも落とす。同じ強さで並べると、数字が埋もれる */
.ckd-mp-info__line small,
.ckd-mp-info__head small {
	color: #6b6b60;
	font-size: 0.85em;
}

/* ============================================================
   ★v1.5.2：マイページの「お使いいただける特典」（クーポン券）

   ・金額は「1,000円 ／ OFF」の2行（ちくりんさんのご指摘）。
     「1,000 ／ 円OFF」だと円が下に来て落ち着かない。
   ・★クーポンコードは券に描かない（CSSにも置き場所を作らない）。
   ============================================================ */
.ckd-cp {
	display: flex;
	align-items: stretch;
	border: 1px solid #cfd9c4;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	margin: 0 0 10px;
}
.ckd-cp:last-child { margin-bottom: 0; }
.ckd-cp__amt {
	flex: 0 0 108px;   /* ★v1.32.2：96→108px（iPhone の字の幅で「10,000円」まで1行に収める。右の名前を狭めすぎない。tools/check-coupon-ticket.js） */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #eef2e7;
	color: #3b6d11;
	font-weight: 700;
	line-height: 1.1;
	padding: 12px 6px;
	/* 切り取り線に見せる */
	border-right: 1px dashed #b9c7a8;
}
.ckd-cp__num { font-size: 1.25rem; white-space: nowrap; }   /* ★v1.32.2：金額と「円」を折り返さない */
.ckd-cp__yen { font-size: 0.68em; font-weight: 700; margin-left: 1px; }
.ckd-cp__unit { font-size: 0.95rem; letter-spacing: 0.08em; margin-top: 2px; }
.ckd-cp__body { flex: 1; min-width: 0; padding: 12px 14px; }
.ckd-cp__name { margin: 0; font-weight: 700; line-break: strict; }   /* ★v1.32.2：「ク／ーポン」のように「ー」の前で折り返さない */
.ckd-cp__cond { margin: 4px 0 0; color: #6b6b60; font-size: 0.85rem; }
.ckd-cp__till { margin: 6px 0 0; color: #6b6b60; font-size: 0.8rem; }
.ckd-cp__go {
	display: inline-block;
	margin: 8px 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: #5f7a3f;
	text-decoration: none;
	border: 1px solid #5f7a3f;
	border-radius: 6px;
	padding: 5px 12px;
	background: #fff;
}
/* たたんだ「ほかの特典」は、券のカードの中に入るので余白をそろえる */
.ckd-cp-more { margin-top: 10px; }
.ckd-cp-more .ckd-mp-fold__body { padding: 12px 12px 12px; }
.ckd-cp__headnum { color: #3b6d11; }

/* ★v1.5.3〜：特典まわりの知らせ（v1.5.8 で絞り込みは廃止。いまは失敗の理由だけ） */
.ckd-menu__narrow {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #f6f3ec;
	border-left: 4px solid #b9a86a;
	border-radius: 6px;
	font-size: 0.9rem;
}

/* ★v1.5.7：特典の確認に失敗したときの知らせ。琥珀（#8a5a1f）。赤はエラー専用 */
.ckd-menu__narrow--warn {
	border-left-color: #8a5a1f;
	color: #8a5a1f;
	font-weight: 600;
}

/* ============================================================
   ★v1.5.8：特典の対象メニューに付ける印

   ・絞り込み（対象だけ出す）をやめ、**全部見せて対象に印**を付ける形にした。
     絞ると「すべて見る」を押した瞬間にどれが対象か分からなくなっていた。
   ・★対象外をグレーにする案は採らなかった。
     この画面には既に「グレー＝下見の時刻に入らず**選択不可**」（.is-na）がいる。
     同じ見た目に2つの意味を持たせると、選べるのに諦められる。
   ・★色は緑系（#3b6d11）。琥珀（#8a5a1f）は注意、赤（#b3432f）はエラー専用。
     これは「お得」の知らせなので、どちらでもない。
   ============================================================ */
.ckd-menu__cpbadge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	background: #eef2e7;
	color: #3b6d11;
	border: 1px solid #b9c7a8;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: 2px;
}

/* ============================================================
   ★v1.20.0：大切な方とシェアする（マイページ）★v1.20.1 で見出しを変更

   ・★見た目は .ckd-mp-card にそろえる（新しい枠を作らない）。
   ・発行したURLは **読める形で必ず出す**。
     LINEのアプリ内ブラウザでは clipboard が使えないことがあるため、
     「コピーできたはず」を前提にしない。
   ・★入力欄は readonly。触れる／選べるが、書き換えられない。
   ============================================================ */
.ckd-mp-invite__out:empty {
	display: none;
}

.ckd-mp-invite__url {
	margin: 8px 0 0;
}

.ckd-mp-invite__url input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #cfd6c6;
	border-radius: 8px;
	background: #fbfcfa;
	font-size: 0.82rem;
	/* ★長いURLを折り返さず、選びやすくする */
	white-space: nowrap;
	overflow-x: auto;
}

.ckd-mp-invite__btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* ★v1.32.1：スマホでは、メニュー名を「…」で切らずに折り返す（カードが画面に収まったため、名前が切れないように） */
@media (max-width: 600px) {
	.ckd-booking .ckd-menu__title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}