/* --------------------

reservation-form.php

-------------------- */

/* --- SP ---------- */

@media print,
screen and (max-width: 740px) {

	/* メインタイトルの背景画像（必要に応じてパスを変更してください） */
	.reservation-form-page .main-title {
		background: url("../images/reservation/reservation-bk.jpg") 85% top no-repeat;
		background-size: cover;
	}

	/* コンテンツエリア（ショートコードが入る場所）の余白調整 */
	.reservation-form-page #chapter02 {
		padding: 40px 0;
	}

	.reservation-form-page .contents h2 {
		color: #454545;
		font-size: 100%;
		text-align: center;
		margin: 30px 0 15px;
		letter-spacing: 0;
		line-height: 2em;
	}

	.reservation-form-page .contents h2 span.st-words {
		color: var(--accent-col01);
	}

	.reservation-form-page .contents p.lead {
		font-size: 80%;
		letter-spacing: 0;
		text-align: center;
		padding-bottom: 20px;
	}

	/* その他、リンクエリアなどの装飾が必要な場合に使用 */
	.reservation-form-page .reservation-link {
		background-color: var(--bk-col02);
	}

	.reservation-form-page .reservation-box {
		margin: 0 auto 5%;
		max-width: 380px;
	}
}

/* --- PC ---------- */

@media print,
screen and (min-width: 741px) {

	.reservation-form-page .main-title {
		/* 背景画像を専用のものにする場合はここを修正 */
		background: url("../images/reservation/reservation-bk.jpg") center top no-repeat;
		background-size: cover;
	}

	.reservation-form-page #chapter02 {
		padding: 80px 0;
	}

	.reservation-form-page .contents h2 {
		color: #454545;
		font-size: 150%;
		text-align: center;
		margin: 80px 0 10px;
		letter-spacing: 0;
		line-height: 2.5em;
	}

	.reservation-form-page .contents p.lead {
		text-align: center;
		margin: 0 0 40px;
		font-size: 90%;
	}

	.reservation-form-page .contents h2 span.st-words {
		color: var(--accent-col01);
	}
}

/* --- TB ---------- */

@media print,
(min-width: 768px) and (max-width: 1024px) {

	.reservation-form-page .main-title {
		background: url("../images/reservation/reservation-bk.jpg") 85% top no-repeat;
		background-size: cover;
	}
}