/*
 * Studio Tsuzuri Child - LIFF アプリ準拠デザイン
 *
 * 設計方針：
 *  LIFF 会員アプリの世界観に統一する。
 *  - ソフトティール（くすみ青緑）をプライマリカラー
 *  - ベージュ系オフホワイトの紙のような背景
 *  - 英字見出しは Cormorant Garamond セリフ体（既に親テーマで読み込み済み）
 *  - 日本語見出しは太字ゴシック（Noto Sans JP）
 *  - カードは白・控えめな角丸・極薄シャドウ・たっぷり余白
 *  - ボタンはティール塗りつぶし or ティール枠
 */

/* ============================================================
 * 必須：[hidden] 属性を尊重する
 *
 * ブラウザ UA は [hidden] { display: none } を当てるが、
 * 子テーマで display: grid / flex 等を別途指定するとそれが勝ってしまう。
 * booking-form.js が element.hidden = true で行を隠すため、
 * これを確実に効かせる必要がある（料金シミュレーターのオプション行・
 * 平日割引行・選択日バッジ・空時間枠等の動的表示制御）。
 * ============================================================ */
.tsuzuri-booking-form-wrap [hidden],
.tsuzuri-plans [hidden],
#single_gallery [hidden],
.bcal__chosen[hidden],
.bcal__slots[hidden],
.bcal__slots-empty[hidden] {
	display: none !important;
}

/* ============================================================
 * デザイントークン（LIFF アプリと統一）
 * ============================================================ */
:root {
	--st-primary: #7DA9A6;          /* メインティール */
	--st-primary-dark: #5C8D89;     /* ホバー時 */
	--st-primary-light: #B0CDCB;    /* 補助 */
	--st-primary-bg: #F0F5F4;       /* バッジ背景・薄塗り */

	--st-bg: #F8F8F6;               /* ページ全体背景 */
	--st-card: #FFFFFF;             /* カード背景 */
	--st-text: #1F2937;             /* 見出し・主要テキスト */
	--st-text-sub: #6B7280;         /* サブテキスト */
	--st-text-muted: #9CA3AF;       /* キャプション */
	--st-border: #E5E7EB;           /* 区切り線 */
	--st-border-light: #F3F4F6;

	--st-accent-green: #E6F4EA;     /* 平日割引バッジ背景 */
	--st-accent-green-text: #1E7C3A;
	--st-danger: #DC2626;
	--st-info: #5C8AC2;

	--st-radius: 12px;
	--st-radius-sm: 8px;
	--st-radius-pill: 999px;
	--st-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
	--st-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	--st-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);

	--st-serif: 'Cormorant Garamond', 'Noto Serif JP', serif;
}

/* ============================================================
 * ショートコード共通：empty / セリフ英字見出し
 * ============================================================ */
.tsuzuri-empty {
	padding: 40px 20px;
	background: var(--st-card);
	border: 1px solid var(--st-border);
	color: var(--st-text-sub);
	text-align: center;
	border-radius: var(--st-radius);
}

/* セリフ体英字見出し（LIFF の "Estimate" "PLAN DETAILS" "WEEKDAY DISCOUNT" 風） */
.st-serif-headline {
	font-family: var(--st-serif);
	font-weight: 500;
	font-style: italic;
	color: var(--st-text);
	text-align: center;
	margin: 0;
	line-height: 1;
}

.st-serif-headline--xl  { font-size: 56px; letter-spacing: 0.02em; }
.st-serif-headline--lg  { font-size: 36px; }
.st-serif-headline--sm  { font-size: 18px; letter-spacing: 0.05em; font-style: normal; }

.st-section-sub {
	display: block;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.4em;
	color: var(--st-text-sub);
	margin-top: 8px;
}

.st-divider-line {
	display: block;
	width: 60px;
	height: 1px;
	background: var(--st-border);
	margin: 24px auto;
}

/* ============================================================
 * プラン一覧（[tsuzuri_plans] / .tsuzuri-plans）
 * LIFF アプリの「ご希望のプランをお選びください」風
 *
 * TCD親の .gallery_list / .item / .animate_background は使わない
 * （flex + width:calc(50%-25px) が干渉するため）
 * ============================================================ */
.tsuzuri-plans {
	margin: 32px 0;
	display: grid;
	gap: 16px;
	width: auto;
	max-width: 100%;
	padding: 0;
	list-style: none;
}

/* プランカード本体（独自クラス） */
.tsuzuri-plan-card {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	margin: 0;
	background: var(--st-card);
	border: 1px solid var(--st-border-light);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	overflow: hidden;
	text-decoration: none !important;
	color: var(--st-text) !important;
	transition: box-shadow .2s ease, transform .2s ease;
}

.tsuzuri-plan-card:hover {
	box-shadow: var(--st-shadow-md);
	transform: translateY(-2px);
	color: var(--st-text) !important;
}

.tsuzuri-plan-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--st-primary-bg);
}

.tsuzuri-plan-card__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	position: static !important;
}

.tsuzuri-plan-card__body {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tsuzuri-plan-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--st-text);
	margin: 0;
	line-height: 1.4;
	letter-spacing: 0;
}

.tsuzuri-plan-card__price {
	font-size: 24px;
	font-weight: 700;
	color: var(--st-text);
	margin: 0 !important;
	line-height: 1.2 !important;
}

.tsuzuri-plan-card__desc {
	color: var(--st-text-sub);
	font-size: 13px;
	line-height: 1.7 !important;
	margin: 6px 0 0 !important;
}

/* 会員様限定バッジ */
.plan-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--st-card);
	border-radius: var(--st-radius-pill);
	z-index: 2;
}

.plan-badge--member {
	background: var(--st-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tsuzuri-plan-card.is-member-only .tsuzuri-plan-card__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.04);
	pointer-events: none;
}

/* ============================================================
 * 単体プラン要素：価格・リンク・画像
 * ============================================================ */
.tsuzuri-price {
	font-weight: 700;
	color: var(--st-text);
	font-size: inherit;
}

.tsuzuri-link {
	color: var(--st-primary) !important;
	border-bottom: 1px solid var(--st-primary);
	text-decoration: none !important;
	padding-bottom: 1px;
}

.tsuzuri-plan-image {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--st-radius);
}

.tsuzuri-plan-image--small  { max-width: 200px; }
.tsuzuri-plan-image--medium { max-width: 400px; }
.tsuzuri-plan-image--large  { max-width: 100%; }

/* ============================================================
 * ボタン：design_button を LIFF 風に上書き
 * ============================================================ */
a.design_button,
button.design_button,
.tsuzuri-plan-button,
.tsuzuri-booking-form-wrap .design_button,
.plan-memberonly .design_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--st-primary) !important;
	color: #fff !important;
	border: 1px solid var(--st-primary) !important;
	padding: 16px 36px !important;
	border-radius: var(--st-radius-sm) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
	min-height: 52px;
	line-height: 1 !important;
	width: auto;
	max-width: 100%;
	font-family: inherit !important;
}

a.design_button:hover,
button.design_button:hover {
	background: var(--st-primary-dark) !important;
	border-color: var(--st-primary-dark) !important;
}

button.design_button:active {
	transform: translateY(1px);
}

/* セカンダリ（白背景＋ティール枠） */
.design_button--ghost,
.tsuzuri-booking-form-wrap .design_button--ghost {
	background: var(--st-card) !important;
	color: var(--st-primary) !important;
	border-color: var(--st-primary) !important;
}

.design_button--ghost:hover {
	background: var(--st-primary-bg) !important;
	color: var(--st-primary-dark) !important;
}

.design_button--line {
	background: #06c755 !important;
	border-color: #06c755 !important;
}

.design_button--line:hover {
	background: #05a647 !important;
	border-color: #05a647 !important;
}

/* ============================================================
 * 予約フォーム全体ラッパー
 * ============================================================ */
.tsuzuri-booking-form-wrap {
	max-width: 720px;
	margin: 40px auto;
	background: var(--st-card);
	border: 1px solid var(--st-border-light);
	border-radius: var(--st-radius);
	padding: 40px 32px;
	box-shadow: var(--st-shadow);
}

.tsuzuri-booking-form-wrap .design_headline2 {
	font-family: var(--st-serif) !important;
	font-style: italic;
	font-size: 36px !important;
	color: var(--st-text);
	text-align: center;
	margin: 0 0 8px !important;
	font-weight: 500;
	padding: 0 !important;
	display: block !important;
	width: auto !important;
}

.tsuzuri-booking-form-wrap .plan-reservation__lead,
.tsuzuri-booking-form-wrap .plan-memberonly__lead {
	text-align: center;
	color: var(--st-text-sub);
	font-size: 13px;
	letter-spacing: 0.3em;
	margin: 0 0 32px !important;
	line-height: 1.6 !important;
}

.tsuzuri-booking-form-wrap .plan-reservation__lead small,
.tsuzuri-booking-form-wrap .plan-memberonly__lead small {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: normal;
	color: var(--st-text-muted);
}

/* ============================================================
 * フォーム要素：行・ラベル・入力欄
 * ============================================================ */
.contact-form .contact__row,
.tsuzuri-booking-form-wrap .contact__row {
	margin-bottom: 24px;
}

.contact-form .contact__label,
.tsuzuri-booking-form-wrap .contact__label {
	display: block;
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--st-text);
	letter-spacing: 0.03em;
}

.contact-form .required,
.tsuzuri-booking-form-wrap .required {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: var(--st-primary);
	color: #fff;
	border-radius: var(--st-radius-pill);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	vertical-align: middle;
}

.tsuzuri-booking-form-wrap input[type="text"],
.tsuzuri-booking-form-wrap input[type="email"],
.tsuzuri-booking-form-wrap input[type="tel"],
.tsuzuri-booking-form-wrap textarea,
.tsuzuri-booking-form-wrap select {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: var(--st-card);
	color: var(--st-text);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

.tsuzuri-booking-form-wrap input:focus,
.tsuzuri-booking-form-wrap textarea:focus,
.tsuzuri-booking-form-wrap select:focus {
	outline: none;
	border-color: var(--st-primary);
	box-shadow: 0 0 0 3px rgba(125, 169, 166, 0.15);
}

.tsuzuri-booking-form-wrap input:disabled {
	background: var(--st-bg);
	color: var(--st-text-sub);
}

/* ============================================================
 * プラン選択ラジオ（multi モード）
 * LIFF の「ご希望のプランをお選びください」風
 * ============================================================ */
.tsuzuri-plan-selector .plan-radio-group {
	display: grid;
	gap: 12px;
}

.plan-radio {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 18px 20px;
	background: var(--st-card);
	border: 2px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	cursor: pointer;
	transition: all .15s ease;
	margin: 0;
}

.plan-radio:hover {
	border-color: var(--st-primary-light);
}

.plan-radio.is-checked,
.plan-radio:has(input:checked) {
	border-color: var(--st-primary);
	background: var(--st-primary-bg);
}

.plan-radio input[type="radio"] {
	width: 18px !important;
	height: 18px;
	margin: 0;
	accent-color: var(--st-primary);
	cursor: pointer;
}

.plan-radio__name {
	font-weight: 700;
	font-size: 16px;
	color: var(--st-text);
}

.plan-radio__price {
	font-weight: 700;
	color: var(--st-text);
	white-space: nowrap;
	font-size: 15px;
}

.plan-radio__duration {
	color: var(--st-text-sub);
	font-size: 13px;
	white-space: nowrap;
}

@media screen and (max-width: 600px) {
	.plan-radio {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
	}
	.plan-radio__name { grid-column: 2; }
	.plan-radio__price,
	.plan-radio__duration { grid-column: 2; font-size: 13px; }
}

/* ============================================================
 * 予約カレンダー（LIFF アプリ準拠）
 * ============================================================ */
.tsuzuri-booking-form-wrap .booking-calendar {
	background: var(--st-card);
	border: 1px solid var(--st-border-light);
	border-radius: var(--st-radius);
	padding: 24px 20px;
	margin: 12px 0;
}

/* ヘッダー（< 2026年5月 >） */
.tsuzuri-booking-form-wrap .bcal__head {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding: 0 8px 16px;
	margin-bottom: 4px;
}

.tsuzuri-booking-form-wrap .bcal__nav {
	background: transparent;
	border: none;
	border-radius: var(--st-radius-pill);
	width: 36px;
	height: 36px;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--st-text);
	transition: background .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsuzuri-booking-form-wrap .bcal__nav:hover:not(:disabled) {
	background: var(--st-primary-bg);
}

.tsuzuri-booking-form-wrap .bcal__nav:disabled {
	opacity: .25;
	cursor: not-allowed;
}

.tsuzuri-booking-form-wrap .bcal__title {
	font-weight: 700;
	font-size: 18px;
	color: var(--st-text);
	letter-spacing: 0.02em;
}

/* 凡例（フッター位置に：● 予約あり ー 撮影不可） */
.tsuzuri-booking-form-wrap .bcal__legend {
	display: flex !important;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	padding: 16px 0 0;
	margin: 16px 0 0 !important;
	font-size: 12px;
	color: var(--st-text-sub);
	border-top: 1px solid var(--st-border-light);
	order: 99; /* 視覚的に最下に */
}

/* 凡例を最下部にするため flex 順序操作 */
.tsuzuri-booking-form-wrap .booking-calendar {
	display: flex;
	flex-direction: column;
}

.tsuzuri-booking-form-wrap .bcal__legend span {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
}

.tsuzuri-booking-form-wrap .bcal__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--st-primary);
}
.tsuzuri-booking-form-wrap .bcal__dot--ok    { background: var(--st-primary); }
.tsuzuri-booking-form-wrap .bcal__dot--mid   { background: var(--st-primary); }
.tsuzuri-booking-form-wrap .bcal__dot--ng    { background: transparent; border: 1px solid var(--st-text-muted); width: 12px; height: 1px; border-radius: 0; }
.tsuzuri-booking-form-wrap .bcal__dot--off   { background: transparent; border: 1px solid var(--st-text-muted); width: 12px; height: 1px; border-radius: 0; }

/* 曜日ヘッダー */
.tsuzuri-booking-form-wrap .bcal__weekdays {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	margin-bottom: 8px;
}

.tsuzuri-booking-form-wrap .bcal__wd {
	text-align: center;
	font-size: 13px;
	color: var(--st-text-sub);
	padding: 8px 0;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.tsuzuri-booking-form-wrap .bcal__wd--sun { color: #DC2626; }
.tsuzuri-booking-form-wrap .bcal__wd--sat { color: var(--st-info); }

/* 日付グリッド */
.tsuzuri-booking-form-wrap .bcal__grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.tsuzuri-booking-form-wrap .bcal__cell {
	aspect-ratio: 1;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--st-radius-sm);
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	color: var(--st-text);
	padding: 0;
	transition: all .15s ease;
	position: relative;
	gap: 3px;
	font-family: inherit;
}

.tsuzuri-booking-form-wrap button.bcal__cell {
	background: transparent;
}

.tsuzuri-booking-form-wrap .bcal__cell:hover:not(.bcal__cell--off):not(.bcal__cell--past):not(.bcal__cell--closed):not(.bcal__cell--busy) {
	background: var(--st-primary-bg);
}

.tsuzuri-booking-form-wrap .bcal__cell--off {
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.tsuzuri-booking-form-wrap .bcal__cell--past {
	color: var(--st-text-muted);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: var(--st-text-muted);
	text-decoration-thickness: 1.5px;
	background: var(--st-bg);
	pointer-events: none;
}

.tsuzuri-booking-form-wrap .bcal__cell--closed {
	color: var(--st-text-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.tsuzuri-booking-form-wrap .bcal__cell--busy {
	color: var(--st-text-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.tsuzuri-booking-form-wrap .bcal__cell--selected {
	background: var(--st-primary) !important;
	color: #fff !important;
}

.tsuzuri-booking-form-wrap .bcal__cell--sun:not(.bcal__cell--off):not(.bcal__cell--past) { color: #DC2626; }
.tsuzuri-booking-form-wrap .bcal__cell--sat:not(.bcal__cell--off):not(.bcal__cell--past) { color: var(--st-info); }
.tsuzuri-booking-form-wrap .bcal__cell--selected.bcal__cell--sun,
.tsuzuri-booking-form-wrap .bcal__cell--selected.bcal__cell--sat { color: #fff !important; }

.tsuzuri-booking-form-wrap .bcal__date {
	font-size: 17px;
	line-height: 1;
	font-weight: 600;
}

/* セル下部の状態マーカー（予約あり=ティール丸） */
.tsuzuri-booking-form-wrap .bcal__mark {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
}
.tsuzuri-booking-form-wrap .bcal__mark--ok    { background: var(--st-primary); }
.tsuzuri-booking-form-wrap .bcal__mark--mid   { background: var(--st-primary); }
.tsuzuri-booking-form-wrap .bcal__mark--busy  { background: transparent; }
.tsuzuri-booking-form-wrap .bcal__mark--closed,
.tsuzuri-booking-form-wrap .bcal__mark--off   { background: transparent; }

/* 時間枠リスト（LIFF風 3列ボックス） */
.tsuzuri-booking-form-wrap .bcal__slots {
	margin-top: 24px;
	padding: 20px;
	background: var(--st-bg);
	border-radius: var(--st-radius);
}

.tsuzuri-booking-form-wrap .bcal__slots-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--st-text);
	margin: 0 0 14px !important;
	line-height: 1.5 !important;
	text-align: center;
}

.tsuzuri-booking-form-wrap .bcal__slots-list {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.tsuzuri-booking-form-wrap .bcal__slots-list button {
	background: var(--st-card);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	padding: 14px 8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	color: var(--st-text);
	font-family: inherit;
	transition: all .15s ease;
}

.tsuzuri-booking-form-wrap .bcal__slots-list button:hover:not(:disabled) {
	border-color: var(--st-primary);
	color: var(--st-primary);
}

.tsuzuri-booking-form-wrap .bcal__slots-list button[aria-pressed="true"],
.tsuzuri-booking-form-wrap .bcal__slots-list button.is-selected {
	background: var(--st-primary);
	color: #fff;
	border-color: var(--st-primary);
}

.tsuzuri-booking-form-wrap .bcal__slots-list button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.tsuzuri-booking-form-wrap .bcal__slots-empty {
	margin: 0 !important;
	color: var(--st-text-sub);
	font-size: 13px;
	text-align: center;
}

.tsuzuri-booking-form-wrap .bcal__chosen {
	margin: 16px 0 0 !important;
	padding: 14px 20px;
	background: var(--st-primary-bg);
	color: var(--st-primary-dark);
	border-radius: var(--st-radius-sm);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	line-height: 1.5 !important;
	border: 1px solid var(--st-primary);
}

@media screen and (max-width: 480px) {
	.tsuzuri-booking-form-wrap .bcal__slots-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
 * 撮影人数 select / オプション
 * ============================================================ */
.tsuzuri-booking-form-wrap .bf__select {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: var(--st-card);
}

.tsuzuri-booking-form-wrap .bf__hint {
	margin: 8px 0 0 !important;
	font-size: 12px;
	color: var(--st-text-sub);
	line-height: 1.6 !important;
}

.tsuzuri-booking-form-wrap .bf__options {
	list-style: none !important;
	padding: 0 !important;
	margin: 8px 0 0 !important;
	display: grid;
	gap: 10px;
}

.tsuzuri-booking-form-wrap .bf__opt {
	background: var(--st-card);
	border: 2px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	transition: all .15s ease;
	margin: 0 !important;
}

.tsuzuri-booking-form-wrap .bf__opt:has(input:checked) {
	border-color: var(--st-primary);
	background: var(--st-primary-bg);
}

.tsuzuri-booking-form-wrap .bf__opt label {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	cursor: pointer;
	margin: 0;
}

.tsuzuri-booking-form-wrap .bf__opt input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--st-primary);
}

.tsuzuri-booking-form-wrap .bf__opt-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--st-text);
}

.tsuzuri-booking-form-wrap .bf__opt-price {
	color: var(--st-primary);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.tsuzuri-booking-form-wrap .bf__opt-desc {
	display: block;
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--st-text-sub);
	line-height: 1.7;
	margin-top: 6px;
}

/* ============================================================
 * 料金サマリ（LIFF の "Estimate / 料金シミュレーション" 風）
 * ============================================================ */
.tsuzuri-booking-form-wrap .bf__price {
	margin: 32px 0 24px;
	padding: 32px 28px 24px;
	background: var(--st-card);
	border: 1px solid var(--st-border-light);
	border-radius: var(--st-radius);
	position: relative;
}

/* "Estimate" の擬似要素ヘッダーを bf__price 上に挿入 */
.tsuzuri-booking-form-wrap .bf__price::before {
	content: "Estimate";
	display: block;
	font-family: var(--st-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 42px;
	color: var(--st-text);
	text-align: center;
	margin-bottom: 4px;
	line-height: 1;
}

.tsuzuri-booking-form-wrap .bf__price::after {
	content: "料 金 シ ミ ュ レ ー シ ョ ン";
	display: block;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.4em;
	color: var(--st-text-sub);
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--st-border);
}

.tsuzuri-booking-form-wrap .bf__price-title {
	display: none; /* 既存の "料金の目安" は ::before で置換するので非表示 */
}

.tsuzuri-booking-form-wrap .bf__price-list {
	margin: 0;
	display: grid;
	gap: 0;
}

.tsuzuri-booking-form-wrap .bf__price-list > div {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--st-border-light);
}

.tsuzuri-booking-form-wrap .bf__price-list > div:last-child {
	border-bottom: none;
}

.tsuzuri-booking-form-wrap .bf__price-list dt {
	font-size: 14px;
	color: var(--st-text);
	margin: 0;
	font-weight: 500;
}

.tsuzuri-booking-form-wrap .bf__price-list dd {
	margin: 0;
	font-weight: 700;
	color: var(--st-text);
	text-align: right;
	font-size: 16px;
}

.tsuzuri-booking-form-wrap .bf__price-total {
	margin-top: 8px;
	padding-top: 16px !important;
	border-top: 2px solid var(--st-border) !important;
}

.tsuzuri-booking-form-wrap .bf__price-total dt {
	font-size: 16px !important;
	color: var(--st-text) !important;
	font-weight: 700;
}

.tsuzuri-booking-form-wrap .bf__price-total dd {
	font-size: 28px !important;
	color: var(--st-primary) !important;
	font-weight: 700;
}

.tsuzuri-booking-form-wrap .bf__price-discount dd {
	color: var(--st-accent-green-text) !important;
}

.tsuzuri-booking-form-wrap .bf__price-note {
	margin: 16px 0 0 !important;
	font-size: 11px;
	color: var(--st-text-muted);
	line-height: 1.7 !important;
	text-align: center;
}

/* ============================================================
 * 送信ボタン群
 * ============================================================ */
.contact__buttons {
	display: flex;
	gap: 12px;
	margin: 28px 0 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.contact__buttons .design_button {
	flex: 1 1 240px;
	max-width: 360px;
}

.contact__note {
	font-size: 12px;
	color: var(--st-text-muted);
	line-height: 1.8;
	margin-top: 16px;
	text-align: center;
}

.contact__note strong {
	color: var(--st-text);
}

.contact__feedback {
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: var(--st-radius-sm);
	text-align: center;
	font-size: 14px;
}

.contact__feedback--success {
	background: var(--st-accent-green);
	color: var(--st-accent-green-text);
	border: 1px solid #b8e0c4;
}

.contact__feedback--error {
	background: #fde8e8;
	color: var(--st-danger);
	border: 1px solid #f0c4c4;
}

/* TCD .post_content の汎用 p スタイルを上書き */
.tsuzuri-booking-form-wrap p {
	line-height: 1.6;
	margin: 0 0 .5em;
}

.tsuzuri-booking-form-wrap label {
	line-height: 1.5;
}

/* ============================================================
 * プラン詳細ページ（page-plan.php / TCD #single_gallery 上書き）
 * ============================================================ */

/* スペック表示を LIFF 風に */
#single_gallery .spec_list .plan-spec__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--st-text-sub);
	margin-bottom: 6px;
	text-transform: uppercase;
	font-weight: 500;
}

#single_gallery .spec_list .plan-spec__value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--st-text);
}

#single_gallery .spec_list small {
	display: inline-block;
	font-size: 11px;
	color: var(--st-accent-green-text);
	background: var(--st-accent-green);
	padding: 2px 10px;
	border-radius: var(--st-radius-pill);
	margin-top: 6px;
}

/* 含まれるもの */
.plan-includes {
	list-style: none;
	padding: 0;
	margin: 16px 0 32px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px 28px;
}

.plan-includes li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.plan-includes__icon {
	flex: 0 0 auto;
	color: var(--st-primary);
}

.plan-includes__text {
	font-size: 14px;
	color: var(--st-text);
	line-height: 1.6;
}

/* オプション */
.plan-options {
	list-style: none;
	padding: 0;
	margin: 16px 0 32px;
	display: grid;
	gap: 12px;
}

.plan-options li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 16px;
	padding: 16px 18px;
	background: var(--st-card);
	border: 1px solid var(--st-border-light);
	border-radius: var(--st-radius-sm);
	margin: 0;
}

.plan-options__name {
	font-weight: 600;
	color: var(--st-text);
}

.plan-options__price {
	font-weight: 700;
	color: var(--st-primary);
	white-space: nowrap;
}

.plan-options__desc {
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--st-text-sub);
	line-height: 1.6;
	margin-top: 4px;
}

/* 平日割引バッジ（プラン詳細・プラン一覧で使う） */
.weekday-discount-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: var(--st-accent-green);
	color: var(--st-accent-green-text);
	border-radius: var(--st-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

.weekday-discount-badge::before {
	content: "✓";
	font-weight: bold;
}

/* WEEKDAY DISCOUNT バナー（料金サマリ前に置く大型バッジ） */
.weekday-discount-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--st-accent-green);
	border: 1px solid #b8e0c4;
	border-radius: var(--st-radius);
	margin: 24px 0;
}

.weekday-discount-banner__icon {
	font-size: 32px;
	flex: 0 0 auto;
}

.weekday-discount-banner__text {
	flex: 1;
}

.weekday-discount-banner__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--st-accent-green-text);
	font-weight: 600;
	margin-bottom: 2px;
	text-transform: uppercase;
}

.weekday-discount-banner__main {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--st-text);
	margin-bottom: 2px;
}

.weekday-discount-banner__sub {
	display: block;
	font-size: 12px;
	color: var(--st-text-sub);
}

/* プラン詳細ヘッダー（#gallery_header）を LIFF 風に */
#single_gallery .plan-spec__label,
#single_gallery .plan-spec__value {
	font-family: inherit;
}

/* 戻るボタン */
#gallery_header_button {
	text-align: center;
	padding: 60px 20px;
}

/* 会員様限定プランの誘導 */
.plan-memberonly {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 20px;
	background: var(--st-bg);
	border-radius: var(--st-radius);
}

.plan-memberonly .design_button {
	min-width: 280px;
}

/* ============================================================
 * レスポンシブブレイクポイント
 *
 * 〜640px        スマホ縦（基準・ベーススタイル）
 * 641〜1023px    タブレット〜小型PC
 * 1024px〜       PC（標準）
 * 1280px〜       ワイドPC
 * ============================================================ */

/* ----- スマホ縦（〜640px）：縦積み・コンパクト ----- */
@media screen and (max-width: 640px) {
	.tsuzuri-booking-form-wrap {
		padding: 28px 20px;
		margin: 24px auto;
		border-radius: 8px;
	}

	.tsuzuri-booking-form-wrap .design_headline2 {
		font-size: 28px !important;
	}

	.tsuzuri-booking-form-wrap .bf__price {
		padding: 24px 18px 20px;
	}

	.tsuzuri-booking-form-wrap .bf__price::before {
		font-size: 34px;
	}

	.tsuzuri-booking-form-wrap .bf__price-total dd {
		font-size: 22px !important;
	}

	.plan-includes {
		grid-template-columns: 1fr;
	}

	.contact__buttons .design_button {
		max-width: 100%;
	}

	.tsuzuri-plan-card__title {
		font-size: 17px;
	}

	.tsuzuri-plan-card__price {
		font-size: 22px;
	}

	.tsuzuri-plan-card__body {
		padding: 16px 18px;
	}

	.tsuzuri-booking-form-wrap .bcal__slots-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ----- タブレット〜小型PC（641〜1023px） ----- */
@media screen and (min-width: 641px) {
	/* プラン一覧を 2 列に */
	.tsuzuri-plans {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* 単発カード（[tsuzuri_plan]）は 1 列のまま */
	.tsuzuri-plans:has(.item:only-child) {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
	}
}

/* ----- PC（1024px〜）：ゆったり大きく ----- */
@media screen and (min-width: 1024px) {
	/* 予約フォーム全体ラッパー：幅と余白を広げる */
	.tsuzuri-booking-form-wrap {
		max-width: 920px;
		padding: 56px 64px;
		border-radius: 16px;
		margin: 56px auto;
	}

	/* 見出し */
	.tsuzuri-booking-form-wrap .design_headline2 {
		font-size: 44px !important;
		margin-bottom: 12px !important;
	}

	.tsuzuri-booking-form-wrap .plan-reservation__lead,
	.tsuzuri-booking-form-wrap .plan-memberonly__lead {
		font-size: 14px;
		margin-bottom: 40px !important;
	}

	/* フォーム要素：余白広め */
	.tsuzuri-booking-form-wrap .contact__row {
		margin-bottom: 28px;
	}

	.tsuzuri-booking-form-wrap .contact__label {
		font-size: 15px;
		margin-bottom: 12px;
	}

	.tsuzuri-booking-form-wrap input[type="text"],
	.tsuzuri-booking-form-wrap input[type="email"],
	.tsuzuri-booking-form-wrap input[type="tel"],
	.tsuzuri-booking-form-wrap textarea,
	.tsuzuri-booking-form-wrap select {
		padding: 16px 18px;
		font-size: 16px;
	}

	/* プラン選択ラジオ：余裕のあるパディング */
	.plan-radio {
		padding: 22px 26px;
	}

	.plan-radio__name {
		font-size: 17px;
	}

	.plan-radio__price {
		font-size: 17px;
	}

	.plan-radio__duration {
		font-size: 14px;
	}

	/* オプション */
	.tsuzuri-booking-form-wrap .bf__opt label {
		padding: 18px 22px;
	}

	.tsuzuri-booking-form-wrap .bf__opt-name {
		font-size: 15px;
	}

	.tsuzuri-booking-form-wrap .bf__opt-price {
		font-size: 16px;
	}

	/* カレンダー：セル大きめ・読みやすく */
	.tsuzuri-booking-form-wrap .booking-calendar {
		padding: 32px;
	}

	.tsuzuri-booking-form-wrap .bcal__head {
		padding: 0 12px 20px;
	}

	.tsuzuri-booking-form-wrap .bcal__title {
		font-size: 22px;
	}

	.tsuzuri-booking-form-wrap .bcal__nav {
		width: 44px;
		height: 44px;
		font-size: 26px;
	}

	.tsuzuri-booking-form-wrap .bcal__wd {
		font-size: 14px;
		padding: 12px 0;
	}

	.tsuzuri-booking-form-wrap .bcal__cell {
		font-size: 19px;
		gap: 4px;
	}

	.tsuzuri-booking-form-wrap .bcal__date {
		font-size: 19px;
	}

	.tsuzuri-booking-form-wrap .bcal__mark {
		width: 7px;
		height: 7px;
	}

	.tsuzuri-booking-form-wrap .bcal__legend {
		gap: 24px;
		font-size: 13px;
		padding: 20px 0 0;
		margin-top: 20px !important;
	}

	/* 時間枠選択：PC は 4 列 */
	.tsuzuri-booking-form-wrap .bcal__slots {
		padding: 28px;
		margin-top: 28px;
	}

	.tsuzuri-booking-form-wrap .bcal__slots-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}

	.tsuzuri-booking-form-wrap .bcal__slots-list button {
		font-size: 17px;
		padding: 18px 8px;
	}

	.tsuzuri-booking-form-wrap .bcal__chosen {
		padding: 16px 24px;
		font-size: 15px;
		margin-top: 20px !important;
	}

	/* Estimate ヘッダー */
	.tsuzuri-booking-form-wrap .bf__price {
		margin: 40px 0 32px;
		padding: 40px 36px 32px;
	}

	.tsuzuri-booking-form-wrap .bf__price::before {
		font-size: 56px;
	}

	.tsuzuri-booking-form-wrap .bf__price::after {
		font-size: 12px;
		margin-bottom: 28px;
		padding-bottom: 28px;
	}

	.tsuzuri-booking-form-wrap .bf__price-list dt {
		font-size: 15px;
	}

	.tsuzuri-booking-form-wrap .bf__price-list dd {
		font-size: 17px;
	}

	.tsuzuri-booking-form-wrap .bf__price-total dt {
		font-size: 17px !important;
	}

	.tsuzuri-booking-form-wrap .bf__price-total dd {
		font-size: 32px !important;
	}

	/* 平日割引バナー */
	.weekday-discount-banner {
		padding: 22px 26px;
		gap: 20px;
	}

	.weekday-discount-banner__icon {
		font-size: 40px;
	}

	.weekday-discount-banner__main {
		font-size: 18px;
	}

	.weekday-discount-banner__sub {
		font-size: 13px;
	}

	/* 送信ボタン群 */
	.contact__buttons {
		gap: 16px;
		margin: 36px 0 20px;
	}

	a.design_button,
	button.design_button {
		padding: 18px 44px !important;
		font-size: 16px !important;
		min-height: 56px;
	}

	/* プラン一覧：PC でも 2 列維持（ワイドPC で 3 列に） */
	.tsuzuri-plans {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.tsuzuri-plan-card__body {
		padding: 24px 28px;
		gap: 8px;
	}

	.tsuzuri-plan-card__title {
		font-size: 20px;
	}

	.tsuzuri-plan-card__price {
		font-size: 28px;
	}

	.tsuzuri-plan-card__desc {
		font-size: 14px;
		margin-top: 8px !important;
	}

	/* プラン詳細スペック */
	#single_gallery .spec_list .plan-spec__label {
		font-size: 12px;
	}

	#single_gallery .spec_list .plan-spec__value {
		font-size: 20px;
	}

	/* 含まれるもの */
	.plan-includes {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 14px 32px;
	}
}

/* ----- ワイド PC（1280px〜）：プラン一覧を 3 列に ----- */
@media screen and (min-width: 1280px) {
	.tsuzuri-plans:not(.tsuzuri-plans--featured) {
		grid-template-columns: repeat(3, 1fr);
	}

	/* featured レイアウトは 2 列のまま大きく見せる */
	.tsuzuri-plans--featured {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

/* ----- スマホ最適化の追加 ----- */
@media screen and (max-width: 480px) {
	.tsuzuri-booking-form-wrap .bcal__legend {
		gap: 12px;
		font-size: 11px;
	}

	.tsuzuri-booking-form-wrap .bcal__title {
		font-size: 16px;
	}

	.weekday-discount-banner {
		padding: 14px 16px;
		gap: 12px;
	}

	.weekday-discount-banner__icon {
		font-size: 26px;
	}

	.weekday-discount-banner__main {
		font-size: 14px;
	}
}

/* ============================================================
 * 親テーマの p / a 等の reset を補強
 * .post_content 内のリンク色を統一
 * ============================================================ */
.post_content .tsuzuri-booking-form-wrap a:not(.design_button),
.post_content .tsuzuri-plans a {
	color: var(--st-text);
}

.post_content .design_button {
	color: #fff !important;
}

/* ============================================================================
 *
 * テーマ非依存レイアウト（.stm-* プレフィックス）
 *
 * page-plan.php / page-member-app.php のレイアウトを
 * プラグイン側で完結させる。どのテーマでも安定動作。
 *
 * ============================================================================ */

/* ----- ページラッパー ----- */
.stm-page {
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--st-text);
	background: var(--st-bg);
	font-feature-settings: "palt";
	line-height: 1.7;
}

.stm-page * {
	box-sizing: border-box;
}

/* ----- ページヒーロー（汎用） ----- */
.stm-hero {
	padding: 80px 24px 60px;
	text-align: center;
	background: var(--st-bg);
}

.stm-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.stm-hero__en {
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 18px;
	letter-spacing: 0.15em;
	color: var(--st-primary);
	margin: 0 0 8px;
}

.stm-hero__title {
	font-size: 36px;
	font-weight: 700;
	color: var(--st-text);
	margin: 0 0 16px;
	letter-spacing: 0.05em;
}

.stm-hero__lead {
	color: var(--st-text-sub);
	font-size: 15px;
	line-height: 1.9;
	margin: 0;
}

/* ----- アーカイブ（プラン一覧）コンテナ ----- */
.stm-archive {
	padding: 40px 24px 80px;
}

.stm-archive__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* ----- ジャンルセクション ----- */
.stm-genre-section {
	margin-bottom: 80px;
}

.stm-genre-section:last-child {
	margin-bottom: 0;
}

.stm-genre-header {
	text-align: center;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--st-border);
}

.stm-genre-header__en {
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 16px;
	letter-spacing: 0.2em;
	color: var(--st-primary);
	margin: 0 0 6px;
}

.stm-genre-header__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--st-text);
	margin: 0 0 8px;
	letter-spacing: 0.05em;
}

.stm-genre-header__desc {
	max-width: 640px;
	margin: 8px auto 0;
	color: var(--st-text-sub);
	font-size: 14px;
	line-height: 1.9;
}

/* ----- CTA セクション（プラン一覧最下部） ----- */
.stm-cta {
	background: var(--st-card);
	padding: 60px 24px;
	margin: 0;
	border-top: 1px solid var(--st-border);
}

.stm-cta__inner {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.stm-cta__en {
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--st-primary);
	margin: 0 0 6px;
}

.stm-cta__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
}

.stm-cta__lead {
	color: var(--st-text-sub);
	margin: 0 0 24px;
}

/* ============================================================
 * プラン詳細：ヒーロー
 * ============================================================ */
.stm-plan-hero {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--st-primary-bg);
}

.stm-plan-hero__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 1;
}

.stm-plan-hero__image--placeholder {
	background: linear-gradient(135deg, var(--st-primary-light), var(--st-primary-bg));
}

.stm-plan-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%);
	z-index: 2;
}

.stm-plan-hero__caption {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
	color: #fff;
}

.stm-plan-hero__category {
	display: inline-block;
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	padding-bottom: 2px;
}

.stm-plan-hero__title {
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: 0.03em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.stm-plan-hero__catch {
	margin: 0;
	font-size: 15px;
	color: rgba(255,255,255,0.95);
	line-height: 1.8;
	max-width: 680px;
}

.stm-plan-hero.is-member-only .plan-badge--member {
	position: absolute;
	top: 24px;
	right: 24px;
	left: auto;
}

/* ============================================================
 * プラン詳細：スペック表
 * ============================================================ */
.stm-plan-spec {
	background: var(--st-card);
	padding: 32px 24px;
	border-bottom: 1px solid var(--st-border);
}

.stm-plan-spec__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.stm-plan-spec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
}

.stm-plan-spec__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 4px;
}

.stm-plan-spec__label {
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 13px;
	color: var(--st-primary);
	letter-spacing: 0.1em;
}

.stm-plan-spec__value {
	font-size: 20px;
	font-weight: 700;
	color: var(--st-text);
	letter-spacing: 0.02em;
}

.stm-plan-spec__note {
	display: inline-block;
	margin-top: 2px;
	padding: 2px 10px;
	font-size: 11px;
	color: var(--st-accent-green-text);
	background: var(--st-accent-green);
	border-radius: var(--st-radius-pill);
	align-self: flex-start;
}

/* ============================================================
 * プラン詳細：本文セクション
 * ============================================================ */
.stm-plan-content {
	padding: 60px 24px;
}

.stm-plan-content__inner {
	max-width: 800px;
	margin: 0 auto;
}

.stm-plan-section {
	margin-bottom: 48px;
}

.stm-plan-section:last-child {
	margin-bottom: 0;
}

.stm-section-header {
	text-align: center;
	margin-bottom: 24px;
}

.stm-section-header__en {
	font-family: var(--st-serif);
	font-style: italic;
	font-size: 16px;
	letter-spacing: 0.2em;
	color: var(--st-primary);
	margin: 0 0 6px;
}

.stm-section-header__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--st-text);
	margin: 0;
	letter-spacing: 0.05em;
}

.stm-plan-description {
	font-size: 15px;
	line-height: 2;
	color: var(--st-text);
}

.stm-plan-description p {
	margin: 0 0 1.2em;
}

/* ============================================================
 * プラン詳細：予約セクション + 戻るリンク
 * ============================================================ */
.stm-plan-reservation {
	background: var(--st-bg);
	padding: 60px 24px;
}

.stm-plan-reservation__inner {
	max-width: 900px;
	margin: 0 auto;
}

.stm-back-nav {
	text-align: center;
	padding: 60px 24px 80px;
}

/* ============================================================
 * 汎用ボタン（テーマ非依存）
 * ============================================================ */
.stm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 36px;
	background: var(--st-primary);
	color: #fff !important;
	border: 1px solid var(--st-primary);
	border-radius: var(--st-radius-sm);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .2s ease, transform .1s ease;
	min-height: 52px;
	line-height: 1;
}

.stm-button:hover {
	background: var(--st-primary-dark);
	border-color: var(--st-primary-dark);
}

.stm-button--ghost {
	background: var(--st-card);
	color: var(--st-primary) !important;
}

.stm-button--ghost:hover {
	background: var(--st-primary-bg);
	color: var(--st-primary-dark) !important;
}

/* ============================================================
 * モバイル調整
 * ============================================================ */
@media screen and (max-width: 640px) {
	.stm-hero {
		padding: 60px 20px 40px;
	}
	.stm-hero__title {
		font-size: 28px;
	}
	.stm-plan-hero {
		min-height: 280px;
	}
	.stm-plan-hero__title {
		font-size: 26px;
	}
	.stm-plan-spec__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.stm-plan-content {
		padding: 40px 20px;
	}
	.stm-plan-reservation {
		padding: 40px 20px;
	}
	.stm-genre-section {
		margin-bottom: 56px;
	}
}

@media screen and (min-width: 1024px) {
	.stm-hero {
		padding: 100px 24px 80px;
	}
	.stm-hero__title {
		font-size: 44px;
	}
	.stm-plan-hero {
		min-height: 500px;
	}
	.stm-plan-hero__title {
		font-size: 48px;
	}
	.stm-genre-header__title {
		font-size: 30px;
	}
}

/* ============================================================================
 *
 * tsz-photo-plans 互換 フォトプランカード（.pp-* クラス）
 *
 * 参考プラグイン tsz-photo-plans の HTML/CSS 構造を採用し、
 * LIFF API のプラン情報を表示する。
 * カラーは LIFF アプリ風のティールに統一。
 *
 * ============================================================================ */

.pp-wrap-front {
	display: block;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px;

	/* CSS 変数（LIFF アプリ風） */
	--pp-text:    #4a5560;
	--pp-bg:      #ffffff;
	--pp-accent:  #94b3b5;             /* くすみティール（プラン詳細向け） */
	--pp-amount:  #1f2937;             /* 価格の濃い文字色 */
	--pp-divider: #e5e7eb;
	--pp-radius:  18px;
	--pp-space:   24px;
	--pp-space2:  14px;
	--pp-warning: #c75c5c;              /* 平日割引・注意事項の赤系 */
	--pp-warning-bg: rgba(199,92,92,.06);
	--pp-soft-bg: rgba(15,23,42,.04);
	--pp-font-heading: 'Cormorant Garamond', 'Noto Serif JP', "Hiragino Mincho ProN", serif;
	--pp-font-body:    inherit;
}

.pp-plan {
	background: var(--pp-bg);
	color: var(--pp-text);
	border: 1px solid rgba(15, 23, 42, .10);
	border-radius: var(--pp-radius);
	overflow: hidden;
	margin: 0 0 24px;
}

.pp-plan.is-member-only {
	border-color: var(--pp-accent);
}

/* ----- ヒーロー画像 ----- */
.pp-hero {
	position: relative;
}

.pp-hero img {
	width: 100%;
	height: auto;
	display: block;
}

.pp-hero .plan-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

/* ----- ボディ ----- */
.pp-body {
	padding: var(--pp-space);
	font-family: var(--pp-font-body);
	line-height: 1.75;
}

/* ----- タイトル ----- */
.pp-title {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: .02em;
	text-align: center;
	color: var(--pp-accent);
	font-weight: 600;
	font-family: inherit;
	padding: 0;
}

/* ----- 説明文ボックス（pp-lead-box） ----- */
.pp-lead {
	margin-top: 14px;
	text-align: center;
}

.pp-lead-box {
	display: inline-block;
	max-width: 52rem;
	width: 100%;
	text-align: center;
	padding: 14px 18px;
	background: var(--pp-soft-bg);
	border-radius: 12px;
	font-size: .95rem;
	color: var(--pp-text);
	line-height: 1.7;
}

.pp-lead-box p { margin: 0; }

/* ----- 価格 ----- */
.pp-price {
	margin-top: 18px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 2px;
	color: var(--pp-amount);
	font-family: var(--pp-font-body);
}

.pp-price-amount {
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.pp-price-unit {
	font-size: 1rem;
	font-weight: 500;
	margin-left: 2px;
}

.pp-price-tax {
	font-size: .85rem;
	opacity: .8;
	margin-left: 4px;
	font-weight: 400;
}

/* ----- 平日割引注記（赤系） ----- */
.pp-price-note {
	margin-top: 8px;
	text-align: center;
	font-size: .95rem;
	color: var(--pp-warning);
	font-weight: 500;
}

/* ----- セクション ----- */
.pp-section {
	margin-top: 22px;
	padding: 22px 22px 18px;
	border: 1px solid rgba(15, 23, 42, .08);
	background: var(--pp-soft-bg);
	border-radius: 14px;
}

.pp-section-title {
	margin: 0 0 14px;
	font-size: 1rem;
	color: var(--pp-accent);
	text-align: center;
	font-weight: 600;
	line-height: 1.35;
	padding: 0;
}

/* ----- リスト（チェックマーク付き） ----- */
.pp-wrap-front .pp-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pp-wrap-front .pp-list li {
	list-style: none !important;
	position: relative;
	padding: 12px 0 12px 56px;
	margin: 0 !important;
	min-height: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px dotted var(--pp-divider);
	color: var(--pp-text);
}

.pp-wrap-front .pp-list li:last-child {
	border-bottom: none;
}

.pp-wrap-front .pp-list li::marker {
	content: '' !important;
}

/* ----- チェックアイコン（円形バッジ） ----- */
.pp-wrap-front .pp-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(148, 179, 181, .15);
	color: var(--pp-accent);
	font-size: 1rem;
	font-weight: bold;
}

/* ----- カスタムアイコン（画像） ----- */
.pp-wrap-front .pp-list li.has-icon::before {
	content: '';
	display: none;
}

.pp-wrap-front .pp-list li.has-icon {
	padding-left: 56px;
}

.pp-custom-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	object-fit: contain;
}

/* ----- 追加オプションリスト用：価格・説明の表示 ----- */
.pp-wrap-front .pp-list-addons li {
	flex-wrap: wrap;
}

.pp-addon-name {
	font-weight: 500;
}

.pp-addon-price {
	margin-left: auto;
	color: var(--pp-accent);
	font-weight: 600;
	font-size: .95rem;
}

.pp-addon-desc {
	flex-basis: 100%;
	margin-top: 4px;
	font-size: .85rem;
	color: var(--pp-text);
	opacity: .7;
	line-height: 1.6;
	padding-left: 0;
}

/* ----- 注意事項（赤系） ----- */
.pp-notice {
	margin-top: 20px;
	padding: var(--pp-space2);
	background: var(--pp-warning-bg);
	border-radius: 12px;
	font-size: .92rem;
	color: var(--pp-warning);
	text-align: center;
}

.pp-notice p { margin: 0; }

/* ----- エラー表示 ----- */
.pp-error {
	padding: 14px 18px;
	border: 1px solid rgba(15, 23, 42, .12);
	border-radius: 12px;
	background: rgba(15, 23, 42, .03);
	color: var(--pp-text);
	text-align: center;
}

/* ============================================================
 * モバイル調整
 * ============================================================ */
@media (max-width: 640px) {
	.pp-wrap-front {
		--pp-space: 18px;
		padding: 0 12px;
	}
	.pp-section {
		padding: 18px 16px 14px;
		border-radius: 12px;
	}
	.pp-section-title {
		font-size: 0.98rem;
		margin-bottom: 12px;
	}
	.pp-price-amount {
		font-size: 1.95rem;
	}
	.pp-title {
		font-size: 1.15rem;
	}
}

/* ============================================================
 * page-plan.php との連携（プラグイン提供テンプレート）
 * ============================================================ */
.stm-plan-page-wrap {
	padding: 60px 16px 30px;
	background: var(--st-bg);
}