.page-main {
	.facility {
		background-color: light-dark(#eee, #333);
		h2 {
			margin: 0;
			color: light-dark(#333, #fafafa);
		}
		.card-container {
			display: flex;
			gap: 45px;
			margin-left: 60px;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 15px;
				padding: 15px 45px 15px 15px;
				border-radius: 10px;
				background-color: #7f7fff;
				color: light-dark(#e0e0ff, #1c1c1c);
				font-size: 24px;
				text-decoration: none;
				line-height: 1;
				&::before {
					position: absolute;
					right: -26px;
					content: "";
					display: block;
					height: 52px;
					width: 52px;
					border-radius: 50%;
					background-color: light-dark(#eee, #333);
				}
				&::after {
					position: absolute;
					right: -24px;
					content: "→";
					display: block;
					margin: 5px;
					border-radius: 50%;
					padding: 10px;
					background-color: #7f7fff;
					font-size: 16px;
				}
				svg {
					border-radius: 8px;
					padding: 15px;
					background-color: light-dark(#e0e0ff, #333);
				}
			}
		}
	}
	.info {
		h2 {
			margin: 0;
			color: #7f7fff;
		}
		ul {
			padding-left: 60px;
			list-style: none;
			font-weight: bold;
			li {
				display: flex;
				gap: 30px;
				div {
					border-top: 1px #ddd solid;
					padding: 10px 0;
				}
				div:first-child {
					width: 5em;
				}
				div:last-child {
					width: 100%;
				}
				iframe {
					width: 100%;
					height: auto;
					aspect-ratio: 5/2;
					padding-top: 10px;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.page-main {
		.facility {
			padding-bottom: 30px;
			.card-container {
				flex-direction: column;
				margin: 30px 36px 0 36px;
				a {
					justify-content: start;
				}
			}
		}
		.info {
			ul {
				padding: 0;
				li {
					gap: 15px;
					div:last-child {
						font-size: 14px;
					}
					iframe {
						aspect-ratio: 1;
					}
				}
			}
		}
	}
}