/*
ビューアの中のモーダル用のcss
*/

.modalParent{
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.modalBackGround{
    display: block;
    position: absolute;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

.modalBody{
    display: block;
    position: relative;
    height: 78vh;
    width: calc(-32px + 100vw);
    max-width: 600px;
    background-color: white;
    border-radius: 8px;
}

.modalIframe{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.modalLoading{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.modalLoadingInner {
    display:block;
    height:70px;
    width: 70px;
}

.js-loader-hero {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    &::after {
        animation: loader 0.5s linear infinite;
        border: 5px solid rgba(242, 80, 109, 0.8);
        border-radius: 50%;
        border-right: 5px solid rgba(242, 80, 109, 0.20);
        border-top: 5px solid rgba(242, 80, 109, 0.20);
        content: "";
        height: 50px;
        width: 50px;
        transform-origin: 50% 50%;
    }
}
@keyframes loader {
	0% {
   	transform: rotate(0);
   }
   100% {
   	transform: rotate(360deg);
   }
}