:root {
	--root-font-size: 16;
	--main_color: #e27700;
}

#hall_information {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	section {
		margin-top: 5em;
	}
	.menu {
		display: flex;
		justify-content: center;
		gap: 1em;
		flex-wrap: wrap;
		a {
			border: 2px solid var(--main_color);
			padding: 1em;
			border-radius: 0.5em;
			display: inline-flex;
			align-items: center;
			text-decoration: none;
			&:after {
				content: '';
				background-image: url("../images/hall_information/arrow.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 2em;
				height: 0.6em;
			}
			&:hover {
				background-color: var(--main_color);
				color: #fff;
				opacity: 1;
				&:after {
					background-image: url("../images/hall_information/arrow-on.svg");
				}
			}
		}
	}
	section#about {
		.about-wrap {
			gap: 1em;
			display: flex;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.text {
			background-color: #daeeff;
			padding: 1.5em;
			flex: 1;
			@media screen and (max-width: 768px) {
				order: 2;
			}
			dl {
				margin: 0;
				display: flex;
				flex-wrap: wrap;
			}
			dt {
				&:after {
					content: '：';
				}
			}
			dd {
				margin-left: 0;
			}
			ul {
				padding-left: 1em;
			}
			li {
				padding: 0;
			}
		}
		.photo {
			flex: 1;
			margin: 0;
			@media screen and (max-width: 768px) {
				order: 1;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	#rooms {
		display: grid;
		gap: 2em;
		grid-template-columns: repeat(2, 1fr);
		margin-top: 3em;
		@media screen and (max-width: 768px) {
			grid-template-columns: repeat(1, 1fr);
		}
		.title {
			font-size: calc( 18 / var(--root-font-size) * 1rem );
			background-color: #fff;
			margin-top: 0;
			margin-bottom: 0;
			padding-bottom: 1em;
			&:before {
				content: '・';
			}
		}
		.photo {
			margin: 0;
			img {
				width: 100%;
				height: auto;
				vertical-align: top;
			}
		}
		.room {
			background-color: #daeeff;
		}
		.text {
			padding: 1em;
		}
		.message {
			margin-top: 0;
			padding-bottom: 1em;
			border-bottom: 1px dashed #000;
			p {
				margin: 0;
			}
		}
		.recommend {
			font-size: calc( 18 / var(--root-font-size) * 1rem );
		}
		.notice {
			font-size: calc( 16 / var(--root-font-size) * 1rem );
		}
		.price {
			text-align: right;
		}
	}
	.option-title {
		background-color: #eee;
		font-size: calc( 16 / var(--root-font-size) * 1rem );
		padding: 0.5em;
		padding-left: 1.5em;
		position: relative;
		line-height: 1em;
		&:before {
			position: absolute;
			top: 0;
			left: 0;
			content: '';
			width:0;
			height:0;
			border-style:solid;
			border-width: 1em 0 1em 1em;
			border-color: transparent transparent transparent var(--main_color);
		}
	}
	#options, #parking {
		.option-wrap {
			display: grid;
			gap: 2em;
			grid-template-columns: repeat(3, 1fr);
			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		.title {
			&:before {
				content: '・';
			}
		}
		.photo {
			margin: 0;
			img {
				width: 100%;
				height: auto;
				vertical-align: top;
			}
		}
		.text {
			background-color: #daeeff;
			padding: 0.5em;
			text-align: right;
			margin: 0;
		}
	}
	#price {
		table {
			width: 100%;
			box-sizing: border-box;
			border-collapse: collapse;
			@media screen and (max-width: 768px) {
				word-break: break-all;
				table-layout: fixed;
				display: block;
				overflow: scroll;
			}
		}
		th, td {
			border: 1px solid #000;
			padding: 0.5em;
		}
		th {
			background-color: #daeeff;
			font-weight: normal;
		}
		td {
			text-align: center;
		}
		.room_name {
			text-align: left;
		}
		.table_wrap {
			margin-top: 2em;
			margin-left: 2em;
			margin-right: 2em;
			@media screen and (max-width: 768px) {
				margin-left: 0;
				margin-right: 0;
				white-space: nowrap;
			}
		}
		.price {
			text-align: right;
		}
		li {
			padding: 0;
		}
	}
	section#flow {
		section {
			margin-top: 3em;
		}
		.flow-wrap {
			display: flex;
			justify-content: center;
		}
		dl {
			display: flex;
			align-items: flex-start;
			gap: 1em;
			padding-bottom: 1.5em;
			position: relative;
			@media screen and (max-width: 768px) {
				flex-wrap: wrap;
			}
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: calc(50% - 0.5em);
				width:0;
				height:0;
				border-style:solid;
				border-width: 1em 1em 0 1em;
				border-color: var(--main_color) transparent transparent transparent;
			}
			&:last-of-type {
				padding-bottom: 0;
				&:after {
					display: none;
				}
			}
		}
		dt {
			width: 4em;
			text-align: center;
			padding: 0.5em;
			color: #fff;
			background-color: var(--main_color);
			border-radius: 0.5em;
			line-height: 1em;
		}
		dd {
			margin-left: 0;
		}
		.pdf {
			width: 1em;
			height: 1em;
			object-fit: contain;
		}
		.link {
			text-align: center;
			a {
				padding: 0.5em 2em;
				border-radius: 9999px;
				color: #fff;
				font-weight: bold;
				gap: 0.5em;
				text-decoration: none;
				display: inline-flex;
				align-items: center;
				background-color: var(--main_color);
				&:after {
					content: '';
					background-image: url("../images/hall_information/arrow2.svg");
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 2em;
					height: 1em;
				}
			}
		}
	}
	.update {
		margin-top: 5em;
		text-align: right;
	}
}

.page_title.hall_information {
	&:before {
		background-image: url("../images/hall_information/logo.png");
	}
}