/* 現地見積予約 — フロント
   テーマが body { color:#FFFFFF } を指定しており、各セクションが個別に
   文字色を上書きする作りになっている。そのため、このセクションでは
   文字色を明示しないと白文字を継承してしまう。以下、色は必ず明示する。

   配色は既存テーマに合わせている。
     背景・枠線 #009ec0 / 淡色 #e7f6f8 / アクセント #ff901e
   ただし #009ec0 は白地に置くとコントラストが 2.6:1 しかなく読みづらいため、
   文字色として使う場合は暗い #00647a（白地で 5.9:1）を使う。 */

/* 直後に来る #inquiry は padding-top:80px / margin-top:-80px というアンカー用の
   ハックが当たっており、直前の要素へ80px分かぶさってくる（同じ指定はテーマ内の
   7箇所で使われているため、テーマ側は変更しない）。
   こちらで下に余白を確保し、重ね順を上げて隠れないようにする。
   背景を白で塗るのは main { background:#fff } に合わせ、
   #inquiry の水色が食い込んで見えるのを防ぐため。 */
.tks-section {
	position: relative;
	z-index: 1;
	padding: 60px 0 110px;
	background: #fff;
	color: #1a1a1a;
	scroll-margin-top: 20px;
}

/* テーマは box-sizing: border-box を一部のクラスにしか当てていないため、
   width:100% の入力欄が padding と border の分だけコンテナからはみ出す。
   このセクションの中だけ border-box に統一して横スクロールを止める。 */
.tks-section,
.tks-section *,
.tks-section *::before,
.tks-section *::after {
	box-sizing: border-box;
}

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

.tks-section__container {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}

.tks-section__title {
	margin: 0 0 18px;
	padding-left: 14px;
	border-left: 5px solid #009ec0;
	color: #1a1a1a;
	font-size: 24px;
	line-height: 1.4;
}

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

.tks-booking {
	padding: 26px 24px 30px;
	background: #f8fdfe;
	border: 1px solid #cfe9ef;
	color: #1a1a1a;
}

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

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

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

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

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

.tks-cal__navbtn {
	width: 40px;
	height: 40px;
	background: #fff;
	color: #00647a;
	border: 2px solid #009ec0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

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

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

.tks-cal__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: #fff;
	color: #1a1a1a;
}

.tks-cal__table th,
.tks-cal__table td {
	border: 1px solid #dbeef2;
}

.tks-cal__wd {
	padding: 8px 0;
	background: #e7f6f8;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
}

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

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

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

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

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

/* 枠のボタン。空き／満席／受付なしを、色だけでなく記号でも区別する。 */
.tks-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;
}

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

.tks-slotbtn--open {
	background: #e7f6f8;
	color: #00647a;
	border-color: #009ec0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tks-slotbtn--open:hover,
.tks-slotbtn--open:focus-visible {
	background: #00647a;
	color: #fff;
	border-color: #00647a;
}

.tks-slotbtn--selected,
.tks-slotbtn--selected:hover,
.tks-slotbtn--selected:focus-visible {
	background: #00647a;
	color: #fff;
	border-color: #00647a;
	box-shadow: inset 3px 0 0 #ff901e;
}

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

.tks-legend--open { color: #00647a; font-weight: 600; }
.tks-legend--full { color: #6b6b6b; }
.tks-legend--none { color: #6b6b6b; }

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

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

.tks-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 #ff901e;
	color: #1a1a1a;
	font-size: 16px;
}

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

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

.tks-booking__change:hover,
.tks-booking__change:focus-visible {
	background: #00647a;
	color: #fff;
}

.tks-form__table {
	width: 100%;
	background: transparent;
	color: #1a1a1a;
}

/* テーマ側の table.tbl-enquiry は td:first-child にだけ色を当てているため、
   入力欄側のセルにも明示しておく。 */
.tks-form__table tr td {
	color: #1a1a1a;
}

/* テーマの .form-control は height:37px を content-box 前提で組んでいる。
   border-box に統一した以上そのままでは文字が切れるので、高さは内容に任せ、
   指で押しやすい 48px を下限として確保する。 */
.tks-form__table .form-control,
.tks-form__table .form-control02 {
	width: 100%;
	height: auto;
	padding: 12px 14px;
	color: #1a1a1a;
	font-size: 16px; /* iOS で入力時に拡大されないよう 16px を下回らせない */
	line-height: 1.5;
}

.tks-form__table .form-control {
	min-height: 48px;
}

.tks-form__table .form-control02 {
	min-height: 150px;
	margin-bottom: 20px;
}

.tks-form__table select.form-control {
	background: #e7f6f8;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: linear-gradient( 45deg, transparent 50%, #00647a 50% ), linear-gradient( 135deg, #00647a 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;
}

.tks-form__table .form-control:focus-visible,
.tks-form__table .form-control02:focus-visible {
	outline: 2px solid #00647a;
	outline-offset: 1px;
}

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

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

/* テーマの .btn-submit は矢印画像でボタンの高さを稼ぐ作りになっている。
   こちらは画像に依存せず、padding と line-height で高さを確保する。 */
.tks-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 44px auto 0;
	padding: 15px 46px;
	border: none;
	line-height: 1.4;
}

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

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

.tks-form__submit:hover,
.tks-form__submit:focus-visible {
	background: #f07f0a;
	border-color: #f07f0a;
}

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

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

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

.tks-booking__donetitle {
	margin: 0 0 14px;
	color: #00647a;
	font-size: 22px;
	font-weight: 700;
}

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

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

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

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

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

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

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

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

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

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

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

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

	/* 画面下部に .fxsp-menu（電話／お問い合わせ／LINE）が position:fixed で
	   居座るため、その分の逃げを確保する。テーマ側には余白の指定がない。 */
	.tks-section {
		padding-bottom: 190px;
	}

	.tks-form__table tr td:first-child,
	.tks-form__table tr td:last-child {
		display: block;
		width: 100%;
		padding: 0;
	}

	.tks-form__table tr td:first-child {
		top: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 8px;
		font-size: 15px;
	}

	/* テーマの必須／任意バッジは padding:5px 30px で、スマホでは幅を食いすぎる。
	   横並びを保ちつつ、ラベルの文字に場所を譲る。 */
	.tks-form__table tr td span.required-blue,
	.tks-form__table tr td span.norequired {
		flex: 0 0 auto;
		min-width: 4.6em;
		margin-right: 0;
		padding: 4px 0;
		text-align: center;
		font-size: 13px;
	}

	.tks-form__table tr {
		display: block;
		margin-bottom: 4px;
	}

	.tks-form__table .form-control02 {
		min-height: 130px;
	}
}