/**
 * モーダル
 *
 * @format
 */

/* モーダル オープンボタン */
.modal__open, .modal__close {
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.modal {
    --modalWidth: min(80%, 1200px);
    --modalHeight: 80%;

	display: none;

	&.is-open {
		display: block;
	}

	& .modal__container,
	& .modal__overlay {
		will-change: transform;
	}

	&[aria-hidden='false'] {
		& .modal__overlay {
			animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
		}

		& .modal__container {
			animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
		}

        & .modal__close {
			animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
		}
	}

	&[aria-hidden='true'] {
		& .modal__overlay {
			animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
		}
		& .modal__container {
			animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
		}
		& .modal__close {
            animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
		}
	}
}

@media screen and (max-width: 480px) {
    .modal {
        --modalHeight: 60%;
    }
}

/* モーダル オーバーレイ */
.modal__overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(51, 51, 51, 0.7);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1200;
}

/* モーダル コンテイナー */
.modal__container {
	background-color: #fff;
	width: var(--modalWidth);
	height: var(--modalHeight);
	overflow-y: auto;
	position: relative; /* Close btnの位置基準 */

	/* スクロールバー非表示 */
	-ms-overflow-style: none; /* IE/Edge用 */
	&::-webkit-scrollbar {
		display: none;
	} /* Chrome, Safari用 */
}

/* モーダル ヘッダー */
.modal__header {
	/* タイトルとCloseボタンを横並びにしたい時は以下を使用 ※「__container」と「__close」のpositionを解除 */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: space-between; */
}

/* モーダル クローズボタン */
.modal__close {
    --closeButtonSize: 65px;
    --barHeight: 4px;
    width: var(--closeButtonSize);
    aspect-ratio: 1/1;
	position: fixed;
    top: calc(50% - var(--modalHeight) / 2 - var(--closeButtonSize) / 3);
    right: calc(50% - var(--modalWidth) / 2 - var(--closeButtonSize) / 3);
    z-index: 1400;
    border: 1px solid #c3c3c3;
    border-radius: 50%;
    background-color: #fff;

    &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(var(--closeButtonSize) * 0.45);
        height: var(--barHeight);
        border-radius: 10px;
        background-color: #434343;
    }

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

}
@media screen and (max-width: 480px) {
    .modal__close {
        --closeButtonSize: 40px;
        --barHeight: 2px;
    }
}

.modal__title {
	/* 文字を切り取り（非表示） */
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
}

/* モーダル 文書部分 */
.modal__content {
	text-align: left;
    padding-block: 2%;
}

/* モーダルアニメーション */
@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}