@charset "UTF-8";

.page_title_top {
	&::after {
		background-image: url("../../img/page/facility/banner.jpg");
	}
}

#contents {
	padding: 16rem 0 20rem;

	@media screen and (max-width: 767px) {
		padding: 0 0 10rem;
	}

	#page-facility {
		.brief {
			margin-top: 2rem;
			font-family: "Noto Sans JP";
			font-weight: 400;
			font-size: 1.8rem;
			line-height: 1.5;
			text-align: center;
			letter-spacing: 0.08em;

			@media screen and (max-width: 767px) {
				margin-top: 1.5rem;
				font-size: 1.6rem;
			}
		}

		.map {
			margin: 4rem auto 10rem;
			max-width: 108rem;
			position: relative;
			@media screen and (max-width: 767px) {
				margin: 2rem auto 5rem;
			}

			& img {
			}
			.image-map {
				position: absolute;
				z-index: 99;
				width: 18.2rem;
				height: 9rem;
				transition: 0.3s ease-in all;
				@media screen and (max-width: 767px) {
					/* background-color: #267bca17; */
				}
				&:hover {
					background-color: #267bca17;
				}
			}
			.image-map1 {
				top: 13rem;
				left: 3rem;
				@media screen and (max-width: 767px) {
					width: 12.2rem;
					height: 8rem;
					top: 1rem;
					left: 1rem;
				}
			}
			.image-map2 {
				top: 33rem;
				left: 30rem;
				@media screen and (max-width: 767px) {
					top: 10rem;
					left: 1rem;
					width: 15.2rem;
					height: 6rem;
				}
			}
			.image-map3 {
				top: 10rem;
				right: 18rem;
				@media screen and (max-width: 767px) {
					top: 1rem;
					right: 1rem;
					width: 15.2rem;
					height: 6rem;
				}
			}
			.image-map4 {
				top: 34rem;
				right: 4rem;
				@media screen and (max-width: 767px) {
					top: 8rem;
					right: 1rem;
					width: 15.2rem;
					height: 7rem;
				}
			}
		}

		.accordion-container {
			margin-top: 4rem;

			@media screen and (max-width: 767px) {
				margin-top: 2rem;
			}

			.accordion-title {
				width: 100%;
				background-color: #267bca;
				height: 6.2rem;
				border-radius: 3.1rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 2.5rem 0 4rem;
				cursor: pointer;

				@media screen and (max-width: 767px) {
					height: 4rem;
					border-radius: 2rem;
					padding: 0 2rem;
				}

				& p {
					font-family: "Noto Sans JP";
					font-weight: 700;
					font-size: 2.2rem;
					color: #ffffff;

					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
					}
				}

				.accordion-arrow {
					width: 1.9rem;
					transition: transform 0.3s ease;

					@media screen and (max-width: 767px) {
						width: 1.2rem;
					}
				}
			}

			.facility-list {
				display: none;

				.facility-item {
					padding: 6rem 0;
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 7rem;
					border-bottom: 0.2rem solid #9db5cd;

					@media screen and (max-width: 767px) {
						padding: 3rem 0;
						grid-template-columns: 1fr;
						gap: 2rem;
					}

					.left-info {
						.facility-name {
							font-family: "Zen Maru Gothic";
							font-weight: 700;
							font-size: 3.4rem;
							line-height: 1;
							letter-spacing: 0.08em;
							color: #267bca;

							@media screen and (max-width: 767px) {
								font-size: 2rem;
							}
						}

						.facility-address {
							margin-top: 2.5rem;
							font-family: "Noto Sans JP";
							font-weight: 400;
							font-size: 2rem;
							line-height: 1.5;
							letter-spacing: 0.08em;

							@media screen and (max-width: 767px) {
								margin-top: 1.5rem;
								font-size: 1.6rem;
							}
						}

						.link-box {
							margin-top: 4rem;
							background-color: #f0f6fa;
							padding: 2rem 2.3rem;

							@media screen and (max-width: 767px) {
								margin-top: 2rem;
								padding: 1.5rem;
							}

							& a {
								padding-left: 1em;
								position: relative;
								font-family: "Noto Sans JP";
								font-weight: 600;
								font-size: 2rem;
								line-height: 1.5;
								margin: 0.2em 0;
								letter-spacing: 0.08em;
								/* text-decoration-line: underline; */
								/* text-decoration-color: #267BCA; */
								/* text-underline-offset: 0.2em; */
								border-bottom: 0.2rem solid #267bca;
								display: block;

								&::before {
									content: "";
									position: absolute;
									left: 0;
									top: 50%;
									transform: translateY(-50%);
									background-image: url("../../img/page/facility/link-arrow.svg");
									background-size: contain;
									background-repeat: no-repeat;
									width: 1.2rem;
									height: 1.8rem;
								}

								@media screen and (max-width: 767px) {
									font-size: 1.4rem;

									&::before {
										width: 1rem;
										height: 1.4rem;
									}
								}
							}
						}
					}

					.right-img {
						border-radius: 2.5rem;
						overflow: hidden;
						height: 37rem;
						@media screen and (max-width: 767px) {
							height: 24.8rem;
						}
						& img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center;
							vertical-align: top;
						}
					}
				}

				.facility-item:last-child {
					border-bottom: none;
				}
			}
		}

		.accordion-container.open {
			.accordion-title {
				.accordion-arrow {
					transform: rotate(180deg);
				}
			}

			.facility-list {
				display: block;
			}
		}
	}
}