@charset "utf-8";

/*===================================
4-2-5
===================================*/

/*========= ローディング画面のためのCSS ===============*/
#splash {
position: fixed;
width: 100%;
height: 100%;
background:#393e3d;
z-index: 9999999;
text-align:center;
color:#ffffff;
}

#splash-logo {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:1.8em;
}
#splash-logo p{font-weight: normal; white-space: nowrap;}
#splash-logo i{font-size:0.8em; margin:0 10px 0 0;}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg1,.splashbg2{display: none;}
body.appear .splashbg1,body.appear .splashbg2{display:block;}
/*右に消えるエリア*/
body.appear .splashbg1{
animation-name:PageAnime;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left:50%;
transform: scaleX(1);
background-color:#393e3d;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
0% {transform-origin:left; transform:scaleX(1);}
50% {transform-origin:right;}
100% {transform-origin:right; transform:scaleX(0);}
}

/*左に消えるエリア*/
body.appear .splashbg2{
animation-name:PageAnime2;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
right:50%;
transform: scaleX(1);
background-color:#393e3d;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
0% {transform-origin:right; transform:scaleX(1);}
50% {transform-origin:left;}
100% {transform-origin:left; transform:scaleX(0);}
}

/*画面遷移の後現れるコンテンツ設定*/
#wrapper{opacity: 0;/*はじめは透過0に*/}
/*bodyにappearクラスがついたら出現*/
body.appear #wrapper{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay:0.2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes PageAnimeAppear{
0% {opacity: 0;}
100% {opacity: 1;}
}