@charset "UTF-8";

/*************************
main
SP_layout（980px未満）
*************************/

#LP {
	.facilityMAP {
		display: flex;
		align-items: center;
		flex-flow: row wrap;
		gap: 1em;
		margin-bottom: 5em;
		width: 100%;

		> li {
			position: relative;
			display: inline-block;
			width: calc((100% - 1em) / 2);

			> button {
				background-color: #1a3969;
				border-radius: 1000px;
				border: none;
				color: #fff;
				cursor: pointer;
				font-size: 3vw;
				font-weight: 700;
				line-height: 1.5;
				outline: none;
				appearance: none;
				-webkit-appearance: none;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column wrap;
				transition: filter .4s;
				position: relative;
				padding: 0 2.4em;
				width: 100%;
				min-height: 4em;

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
				}

				&::before {
					background-color: #1a3969;
					border: 2px solid #fff;
					border-radius: 50%;
					right: .8em;
					transform: translateY(-50%);
					width: 1.2em;
					height: 1.2em;
				}

				&::after {
					border: 0;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					right: calc(1.2em + 1px);
					transform: translateY(-50%) rotate(45deg);
					width: .4em;
					height: .4em;
				}

				&:hover { filter: brightness(1.1); }
			}
		}
	}
}

.facilityModal-overlay {
    background-color: rgba(0, 0, 0, .6);
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &.is_open { 
        animation: fadeIn .2s ease-out forwards;
        display: flex;

        .facilityModal-content { animation: modalPopUp .25s cubic-bezier(.16, 1, 0.3, 1) forwards; }
    }

    &.is_closing {
        animation: fadeOut .2s ease-in forwards;

        .facilityModal-content {
            animation: modalPopDown .2s ease-in forwards;
        }
    }
}

.facilityModal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	font-size: 3vw;
	position: relative;
    padding: 1.5em 1.5em 2.5em 1.5em;
    max-width: 800px;
    width: 90%;

	.mapImage {
		background-color: #f0f0f0;
		aspect-ratio: 100 / 59;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1em;
		width: 100%;

		img {
			display: block;
			margin: 0 auto;
			width: 100%;
		}
	}

	.facilityModal-block {
		display: flex;
		flex-flow: column wrap;
		gap: .8em;
	}

	.facility-close {
		background: transparent;
		border: none;
		border-radius: 50%;
		cursor: pointer;
		transition: background-color .2s ease;
		position: absolute;
		top: .8em;
		right: .8em;
		padding: 0;
		width: 2em;
		height: 2em;
	}

	.facility-close:hover { background-color: rgba(0, 0, 0, .05); }

	.facility-close::before,
	.facility-close::after {
		background-color: #666;
		border-radius: .07em;
		content: '';
		transition: background-color .2s ease;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.4em;
		height: .14em;
	}

	.facility-close::before { transform: translate(-50%, -50%) rotate(45deg); }
	.facility-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

	.facility-close:hover::before,
	.facility-close:hover::after { background-color: #000; }
}

/* --- アニメーション定義 --- */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalPopUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalPopDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

/**************************************************
main
PC_layout（980px以上）
**************************************************/

@media screen and (min-width: 980px) {
	#LP {
		.facilityMAP {
			> li {
				width: calc((100% - 3em) / 4);
				> button { font-size: 16px; }
			}
		}
	}

	.facilityModal-content {
		font-size: 20px;
		width: 100%;
	}
}