/* 現地調査予約 — フロント

   配色は既存テーマに合わせている。
     主色 #802726（テーマの見出し・必須バッジと同じ）／ 明主色 #a12626
     淡い背景 #fdf7f6 ／ 罫線 #e3ddd9
   #a12626 は白地だとコントラストが 2.6:1 しかなく読みづらいので、
   文字色に使う場合は #802726（白地で 5.9:1）にする。

   テーマは ress.min.css を読んでいるので box-sizing は border-box。
   ただしテーマ更新で外れても崩れないよう、このセクション内では明示する。
   文字サイズは px で指定する（テーマは html{font-size:62.5%} の rem 運用で、
   こちらが rem を使うと将来テーマ側を触ったときに連鎖して崩れるため）。 */
/* 予約ページの枠組み。
   テーマの下層ページ（page-contact.php）と同じ見た目にそろえている。
   contact.css を読まずに済ませるため、必要なぶんだけここで持つ。 */
.tsb-page__inner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.tsb-page__body {
	margin-bottom: 160px;
}

.tsb-page .intro {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.tsb-page__body {
		margin-bottom: 80px;
		padding: 0 5%;
	}
}

.tsb-section {
	position: relative;
	padding: 0 0 20px;
	color: #1a1a1a;
	/* テーマのヘッダーは position:fixed・背景透明で、画面上部およそ100pxに常に居座る。
	   自動スクロールでその下に中身が潜らないよう、逃げを確保する。 */
	scroll-margin-top: 120px;
}

/* JS が scrollIntoView で寄せる先にも同じ逃げを持たせる
   （「選び直す」でカレンダーへ戻るときに、日付がヘッダーに隠れないように） */
.tsb-cal,
.tsb-booking__done,
.tsb-booking__step--form {
	scroll-margin-top: 120px;
}

.tsb-section,
.tsb-section *,
.tsb-section *::before,
.tsb-section *::after {
	box-sizing: border-box;
}

.tsb-section img,
.tsb-section table {
	max-width: 100%;
}

.tsb-section__container {
	max-width: 860px;
	margin: 0 auto;
}

/* テーマの下層ページ見出し .layer-h3（中央寄せ・26px・#333）にそろえる。 */
.tsb-section__title {
	margin: 0 0 20px;
	color: #333;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.tsb-section__lead {
	margin-bottom: 28px;
	color: #333;
	font-size: 16px;
	line-height: 1.9;
}

.tsb-booking {
	padding: 26px 24px 30px;
	background: #fdf7f6;
	border: 1px solid #e3ddd9;
	color: #1a1a1a;
}

.tsb-booking__steplabel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 700;
}

.tsb-booking__stepno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: #802726;
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
}

/* カレンダー ----------------------------------------------------------- */

.tsb-cal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 12px;
}

.tsb-cal__month {
	min-width: 8em;
	color: #1a1a1a;
	text-align: center;
	font-size: 19px;
	font-weight: 700;
}

.tsb-cal__navbtn {
	width: 40px;
	height: 40px;
	background: #fff;
	color: #802726;
	border: 2px solid #a12626;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.tsb-cal__navbtn:disabled {
	color: #9a9a9a;
	border-color: #ddd;
	cursor: default;
}

.tsb-cal__loading {
	padding: 40px 0;
	color: #555;
	text-align: center;
}

/* ★テーマの contact.css が全テーブルに
     `table th, table tr { display: block; text-align: left; }`
     を当てている。これを受けるとカレンダーの曜日見出しが縦に7段並び、
     列幅もバラバラになる。表の組み方をここで明示して打ち消す。
     （このショートコードをどのページに貼っても崩れないようにするため、
       テンプレート側で contact.css を外すのとは別に、CSS 側でも閉じておく） */
.tsb-cal__table {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: #fff;
	color: #1a1a1a;
}

.tsb-cal__table thead { display: table-header-group; }
.tsb-cal__table tbody { display: table-row-group; }
.tsb-cal__table tr    { display: table-row; }

.tsb-cal__table th,
.tsb-cal__table td {
	display: table-cell;
}

.tsb-cal__table th,
.tsb-cal__table td {
	border: 1px solid #e3ddd9;
}

.tsb-cal__wd {
	padding: 8px 0;
	text-align: center;
	background: #f5f1ee;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
}

.tsb-cal__wd--0 { color: #b3261e; }
.tsb-cal__wd--6 { color: #1b5e8a; }

.tsb-cal__cell {
	height: 92px;
	padding: 5px 4px;
	vertical-align: top;
}

.tsb-cal__cell.is-empty {
	background: #fafafa;
}

.tsb-cal__date {
	margin-bottom: 4px;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.tsb-cal__mark--none {
	color: #6b6b6b;
	text-align: center;
}

/* 枠のボタン。空き／満席／受付なしを、色だけでなく記号でも区別する。 */
.tsb-slotbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	width: 100%;
	margin-bottom: 4px;
	padding: 4px 6px;
	background: #f2f2f2;
	color: #6b6b6b;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.tsb-slotbtn__mark {
	font-size: 14px;
	font-weight: 700;
}

.tsb-slotbtn--open {
	background: #f5f1ee;
	color: #802726;
	border-color: #a12626;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tsb-slotbtn--open:hover,
.tsb-slotbtn--open:focus-visible {
	background: #802726;
	color: #fff;
	border-color: #802726;
}

.tsb-slotbtn--selected,
.tsb-slotbtn--selected:hover,
.tsb-slotbtn--selected:focus-visible {
	background: #802726;
	color: #fff;
	border-color: #802726;
	box-shadow: inset 3px 0 0 #802726;
}

.tsb-cal__legend {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-top: 12px;
	color: #444;
	font-size: 13px;
}

.tsb-legend--open { color: #802726; font-weight: 600; }
.tsb-legend--full { color: #6b6b6b; }
.tsb-legend--none { color: #6b6b6b; }

/* 入力フォーム --------------------------------------------------------- */

.tsb-booking__step--form {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px dashed #e3ddd9;
}

.tsb-booking__chosen {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-left: 4px solid #802726;
	color: #1a1a1a;
	font-size: 16px;
}

.tsb-booking__chosen strong {
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
}

.tsb-booking__change {
	padding: 5px 16px;
	background: #fff;
	color: #802726;
	border: 2px solid #802726;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.tsb-booking__change:hover,
.tsb-booking__change:focus-visible {
	background: #802726;
	color: #fff;
}

/* 入力欄。
   既存のお問い合わせフォーム（/contact/contact.html）と同じ見た目にそろえている。
   ただしテーマのクラス（.formTable / .required など）には寄りかからず、
   この中だけで閉じている。テーマを触らずに差し込む作りのため。 */

.tsb-form__fields {
	display: grid;
	gap: 22px;
}

.tsb-field__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/* 必須／任意のバッジ。テーマの .required（背景 #802726・白文字）に合わせる。 */
.tsb-badge {
	flex: 0 0 auto;
	min-width: 4.4em;
	padding: 3px 8px;
	background: #802726;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
}

.tsb-badge--any {
	background: #fff;
	border: 1px solid #a8a09b;
	color: #6d6d6d;
}

/* テーマの入力欄（高さ40px・角丸7px・罫線 #ccc）に寄せる。
   高さは内容に任せ、指で押しやすい 48px を下限として確保する。 */
.tsb-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 7px;
	color: #1a1a1a;
	font-family: inherit;
	font-size: 16px; /* iOS で入力時に拡大されないよう 16px を下回らせない */
	line-height: 1.5;
}

.tsb-input::placeholder {
	color: #9a9a9a;
}

.tsb-textarea {
	min-height: 150px;
	resize: vertical;
}

.tsb-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: linear-gradient( 45deg, transparent 50%, #802726 50% ), linear-gradient( 135deg, #802726 50%, transparent 50% );
	background-position: calc( 100% - 20px ) calc( 50% + 2px ), calc( 100% - 14px ) calc( 50% + 2px );
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.tsb-input:focus-visible {
	outline: 2px solid #802726;
	outline-offset: 1px;
}

.tsb-field__hint {
	margin: 6px 0 0;
	color: #6d6d6d;
	font-size: 13px;
	line-height: 1.6;
}

/* ハニーポット。人には見せない。 */
.tsb-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tsb-form__privacy {
	margin: 26px 0 0;
	color: #333;
	font-size: 14px;
	line-height: 1.8;
}

/* ★テーマの layout.css に `a, a:link { color: #333 }` がある。
   詳細度が (0,1,1) なので、クラス1つ (0,1,0) では負ける。
   こちらの <a> は :link / :visited まで書いて必ず勝たせる。 */
.tsb-form__privacylink,
.tsb-form__privacylink:link,
.tsb-form__privacylink:visited {
	color: #064bb6;
	text-decoration: underline;
}

.tsb-form__error {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: #fdecea;
	border: 1px solid #c0392b;
	color: #8c1d18;
	font-size: 15px;
	font-weight: 600;
}

/* 主ボタン。ここが一番押してほしい場所なので、塗りで強く出す
   （選び直す・プライバシーポリシーは線や文字リンクで弱くしてある）。 */
.tsb-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 340px;
	min-height: 60px;
	margin: 28px auto 0;
	padding: 15px 36px;
	background: #802726;
	border: 1px solid #802726;
	border-radius: 7px;
	color: #fff;
	line-height: 1.4;
	cursor: pointer;
}

.tsb-form__submit span {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.tsb-form__submit .tsb-form__arrow {
	flex: 0 0 auto;
	width: 22px;
	height: 10px;
	fill: #fff;
}

.tsb-form__submit:hover,
.tsb-form__submit:focus-visible {
	background: #6b1d1c;
	border-color: #6b1d1c;
}

.tsb-form__submit.is-sending {
	opacity: 0.6;
	cursor: progress;
}

/* 完了表示 ------------------------------------------------------------- */

.tsb-booking__done {
	padding: 34px 20px;
	color: #1a1a1a;
	text-align: center;
}

.tsb-booking__donetitle {
	margin: 0 0 14px;
	color: #802726;
	font-size: 22px;
	font-weight: 700;
}

.tsb-booking__doneslot {
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e3ddd9;
	border-left: 4px solid #802726;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
}

.tsb-booking__donebody p {
	margin: 0 0 6px;
	color: #1a1a1a;
	font-size: 16px;
	line-height: 1.8;
}

/* スマホ --------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.tsb-section {
		padding: 40px 0 10px;
	}

	.tsb-section__title {
		font-size: 20px;
	}

	.tsb-section__lead {
		font-size: 15px;
		line-height: 1.8;
	}

	.tsb-booking {
		padding: 18px 12px 22px;
	}

	.tsb-booking__steplabel {
		font-size: 15px;
	}

	.tsb-cal__cell {
		height: auto;
		min-height: 76px;
		padding: 3px 2px;
	}

	/* 1マスが約46pxしかない。折り返しを止めつつ、本文が10pxまで
	   落ちないよう、左右の余白を削って文字の場所を確保する。 */
	.tsb-slotbtn {
		gap: 2px;
		min-height: 32px;
		padding: 5px 2px;
		font-size: 12px;
		white-space: nowrap;
	}

	.tsb-slotbtn__mark {
		font-size: 11px;
	}

	.tsb-cal__cell {
		padding: 4px 2px;
	}

	.tsb-cal__legend {
		flex-wrap: wrap;
		gap: 10px;
		font-size: 12px;
	}

	.tsb-field__label {
		font-size: 15px;
	}

	.tsb-badge {
		min-width: 4.2em;
		padding: 3px 4px;
		font-size: 11px;
	}

	.tsb-textarea {
		min-height: 130px;
	}

	.tsb-form__submit {
		max-width: 100%;
	}
}