/* 画面切り替えエフェクト */
.changePageIn {
    position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
    height: 100%;
    mask-image: linear-gradient(#000, #000), url(../img/all/effect_hall.svg);
    mask-repeat: no-repeat;
    mask-position: 0px 0px, center center;
    mask-size: 100% 100%, 0px 0px;
    mask-composite: exclude;
    background-color: orange;
	z-index: 1000;
}

/* これで指定→ 	animation: circleOut 0.7s ease-out 0s 1 normal forwards; */
@keyframes circleIn {
	  0% {mask-size: 100% 100%,    0px    0px;opacity:1;}
	 99% {mask-size: 100% 100%, 1200px 1200px;opacity:1;}
	100% {mask-size: 100% 100%, 1200px 1200px;opacity:0;}
}

/* 画面切り替えエフェクト */
/* 最初からdisplay:none;にすると、ちらつくのでfuncsjpでnoneにする */
.changePageOut {
    position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
    height: 100%;
    mask-image: linear-gradient(#000, #000), url(../img/all/effect_hall.svg);
	mask-repeat: no-repeat;
    mask-position: 0px 0px, center center;
	mask-size: 100% 100%, 1200px 1200px;
	mask-composite: exclude;
    background-color: orange;
	z-index: 1000;
}

@keyframes circleOut {
	  0% {mask-size: 100% 100%, 1200px 1200px;opacity:0;}
	  1% {mask-size: 100% 100%, 1200px 1200px;opacity:1;}
	100% {mask-size: 100% 100%,    0px    0px;opacity:1;}
}



/* windowベース設定 */
.baseWindow{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 95%;
    height: fit-content;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
}

/* 汎用ボタン */
[class^="btn_"] {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    height: 50px;
}

/* カバー */
[class^="cover_bk_"] {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity:0;
	background-color: rgba(0,0,0,0.2);
	backdrop-filter: blur(3px);
}
.cover_bk_1 {z-index: 100;}
.cover_bk_2 {z-index: 200;}
.cover_bk_3 {z-index: 300;}
@keyframes cover_bk_IN {
	  0% {opacity:0;backdrop-filter: blur(0px);}
	100% {opacity:1;backdrop-filter: blur(3px);}
}
@keyframes cover_bk_OUT {
	  0% {opacity:1;backdrop-filter: blur(3px);}
	100% {opacity:0;backdrop-filter: blur(0px);}
}

/* ローディングエフェクト */
.loading{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
    gap: 10px;
	z-index: 500;
}

[class^="loadingBar_"] {
	display: none;
	width: 10px;
	height: 30px;
	background: #fff;
	border-radius: 20px;
}
.loadingBar_1{animation: loadingBarAnim 0.7s ease-out 0s infinite alternate-reverse;}
.loadingBar_2{animation: loadingBarAnim 0.7s ease-out 0.2s infinite alternate-reverse;}
.loadingBar_3{animation: loadingBarAnim 0.7s ease-out 0.4s infinite alternate-reverse;}
.loadingBar_4{animation: loadingBarAnim 0.7s ease-out 0.6s infinite alternate-reverse;}
.loadingBar_5{animation: loadingBarAnim 0.7s ease-out 0.8s infinite alternate-reverse;}

@keyframes loadingBarAnim {
	  0% {transform:scaleY(1);}
	100% {transform:scaleY(1.5);}
}