@charset "UTF-8";

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

#about {
	.information {
		dl:not(:last-child) {
			display: flex;
			dt { flex-shrink: 0; }
		}
		dl:last-child { margin-top: 2em; }
	}
	@media screen and (min-width:1145px), print {
		dl:not(:last-child) {
			dt {
				width: 108px;
				&:is(.lang-en dt) { width: 170px; }
			}
		}
	}
	@media screen and (max-width:1144px) {
		dl:not(:last-child) {
			dt { width: 92px; }
		}
	}
}

#floormap {
	background-color: var(--bg-gray);
	#map { pointer-events: none; }
	@media screen and (min-width:1145px), print {
		&:is(.lang-en #floormap) { margin-top: 250px !important; }
		padding-top: 100px;
		#map {
			margin-top: -372px;
			margin-left: 90px;
		}
	}
	@media screen and (max-width:1144px) {
		margin-top: 90px !important;
		padding-top: 90px !important;
		padding-bottom: 20% !important;
		#map { margin-top: -55%; }
	}
}

#choice {
	.title {
		line-height: 1;
		text-align: center;
		& > span { display: inline-block; }
		.ja { font-weight: 600; }
	}
	.mainText {
		& > * + * { margin-top: 2em; }
		p:empty { display: none; }
	}
	.themes {
		& > li {
			dt svg { vertical-align: middle; }
			.orange {
				color: #e99450;
				svg { fill: #e99450; }
			}
			.green {
				color: #169243;
				svg { fill: #169243; }
			}
			.red {
				color: #d82b1b;
				svg { fill: #d82b1b; }
			}
			.cyan {
				color: #1996bd;
				svg { fill: #1996bd; }
			}
			.yellow {
				color: #efb918;
				svg { fill: #efb918; }
			}
			.magenta {
				color: #d41556;
				svg { fill: #d41556; }
			}
			.blue {
				color: #316bab;
				svg { fill: #316bab; }
			}
		}
	}
	@media screen and (min-width:1145px), print {
		.title {
			.ja {
				font-size: 27px;
				margin-bottom: 10px;
			}
		}
		.mainText {
			margin-top: 90px;
			text-align: center;
		}
		.themes {
			margin-top: 90px;
			display: flex;
			flex-wrap: wrap;
			gap: 90px 50px;
			& > li {
				width: calc(50% - 50px);
				dt {
					font-size: 20px;
					margin-bottom: 15px;
					svg {
						width: 30px;
						margin-top: -0.2em;
						margin-right: 0.7em;
					}
				}
				dd { font-size: 14px; }
			}
		}
	}
	@media screen and (max-width:1144px) {
		padding-block: 100px !important;
		.title {
			.ja {
				font-size: 21px;
				margin-bottom: 10px;
			}
		}
		.mainText { margin-top: 44px; }
		.themes {
			margin-top: 43px;
			& > li + li { margin-top: 42px; }
			& > li {
				dt {
					font-size: 17.5px;
					svg {
						width: 26px;
						margin-top: -0.2em;
						margin-right: 0.7em;
					}
				}
				dd {
					font-size: 12px;
					line-height: 24.5px;
					margin-top: 10px;
				}
			}
		}
	}
}

#features {
	.c-inner {
		position: relative;
		background-color: var(--bg-gray);
		&::after {
			content: "";
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			display: block;
			position: absolute;
			border-style: solid;
			border-color: #e9e8de transparent transparent #e9e8de;
		}
	}
	.list li {
		padding-left: 1em;
		text-indent: -1em;
		&::before {
			content: "■";
			display: inline;
			color: var(--color-green);
		}
	}
	@media screen and (min-width:1145px), print {
		.c-inner {
			padding: 60px 70px 65px;
			&::after { border-width: 20px; }
		}
	}
	@media screen and (max-width:1144px) {
		padding: 0 !important;
		.c-inner {
			padding: 44px 25px;
			&::after { border-width: 12.5px; }
		}
	}
}