@charset "UTF-8";

#pageHeader::before { background-image: url(../images/page_icon_reserve.svg); }

.secTitle { font-weight: 500; }
@media screen and (min-width:1145px), print {
	.secHeader { margin-bottom: 80px; }
	.secTitle { font-size: 20px; }
	.secText {
		font-size: 14px;
		margin-top: 15px;
	}
	.secHeader ~ * { margin-top: 90px; }
}
@media screen and (max-width:1144px) {
	.secHeader { margin-bottom: 60px; }
	.secTitle { font-size: 17.5px; }
}

#basic {
	@media screen and (min-width:1145px), print {
		.table-layout {
			.t-title { white-space: nowrap; }
		}
	}
}

#timeList {
	dl {
		display: flex;
		dt {
			color: #fff;
			text-align: center;
			background-color: var(--color-green);
		}
	}
	@media screen and (min-width:1145px), print {
		padding-top: 15px;
		line-height: 32px;
		li + li { margin-top: 25px; }
		dt {
			width: 100px;
			margin-right: 16px;
		}
		dd {
			font-size: 18px;
			small { font-size: 16px; }
		}
	}
	@media screen and (max-width:1144px) {
		padding-top: 6px;
		line-height: 28px;
		li + li { margin-top: 22px; }
		dt {
			width: 88px;
			margin-right: 13px;
		}
		dd {
			font-size: 16px;
			small { font-size: 14px; }
		}
	}
}

#flow {
	.c-inner {
		background-color: #f8f7f4;
		position: relative;
		&::before {
			content: "";
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			display: block;
			position: absolute;
			pointer-events: none;
			mix-blend-mode: multiply;
			border-style: solid;
			border-color: #f1efe9 transparent transparent #f1efe9;
		}
	}
	@media screen and (min-width:1145px), print {
		.c-inner {
			padding: 60px 70px 65px;
			&::before { border-width: 20px; }
		}
	}
	@media screen and (max-width:1144px) {
		margin-block: 50px 44px;
		.c-inner {
			margin-inline: -25px;
			padding: 44px 25px 42px;
			&::before { border-width: 12.5px; }
		}
	}
}

#caution {
	.list li {
		padding-left: 1em;
		text-indent: -1em;
		* { text-indent: 0; }
	}
	.detailList dt { font-weight: 500; }
	@media screen and (min-width:1145px), print {
		.border-box { margin-top: 75px; }
		.detailList {
			margin-top: 90px;
			overflow: hidden;
			& > li {
				width: calc(50% - 50px);
				margin-bottom: 80px;
			}
			.left { float: left; }
			.right { float: right; }
			dt small, dd { font-size: 14px; }
			dd { margin-top: 16px; }
		}
	}
	@media screen and (max-width:1144px) {
		.border-box { margin-top: 37px; }
		.detailList {
			& > li { margin-top: 44px; }
			dd {
				font-size: 12px;
				line-height: 24.5px;
				margin-top: 10px;
			}
		}
	}
}

#status {
	#reserveLink button {
		color: #fff;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f0b31c;
		border-radius: 999px;
		margin-inline: auto;
    width: 100%;
    padding: 0;
    border: none;
    font-family: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
	}
	.calendar iframe { aspect-ratio: 4 / 3; }
	@media screen and (min-width:1145px), print {
		#reserveLink {
			margin-top: 100px;
			button {
				height: 100px;
				max-width: 800px;
				font-size: 20px;
				transition-duration: .3s;
				transition-property: background-color;
				&:hover { background-color: var(--color-green); }
			}
		}
	}
	@media screen and (max-width:1144px) {
		#reserveLink {
			margin-top: 25px;
			button { height: 75px; }
		}
		.calendar { margin-inline: -25px; }
	}
}

#howToUse {
	@media screen and (min-width:1145px), print {
		margin-top: 190px !important;
		.text-list {
			font-size: 14px;
			margin-top: 75px;
		}
		.list {
			overflow: hidden;
			.left { float: left; }
			.right { float: right; }
			.clear { clear: both; }
			& > li {
				margin-top: 85px;
				letter-spacing: 0.07em;
				width: calc(50% - 50px);
				dd {
					font-size: 14px;
					margin-top: 15px;
				}
			}
			&:is(.lang-en .list) {
				display: flex;
				flex-direction: column;
				& > li {
					width: 100%;
					float: none !important;
				}
			}
		}
	}
	@media screen and (max-width:1144px) {
		margin-top: 95px;
		.l-title {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		.text-list {
			font-size: 12px;
			line-height: 24.5px;
		}
		.list {
			display: flex;
			flex-direction: column;
			& > li {
				margin-top: 36px;
				dd {
					font-size: 12px;
					line-height: 24.5px;
					margin-top: 14px;
				}
			}
		}
	}
}