@charset "UTF-8";

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #0071be;
	z-index: 9999999;
	text-align:center;
	color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: bold;
    width: 92%;
    animation: fadein 1s;
}

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

            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                #splash-logo {
                    font-size: 4rem;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                #splash-logo {
                    font-size: 5rem;
                }
            }


/*========= 画面遷移のためのCSS ===============*/

body{
    background:#0071be;/*遷移アニメーションと同じ色を指定*/
}

body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*上に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 9999999;
    width: 100%;
    height: 100vh;
    bottom:50%;
	left:0;
    transform: scaleY(1);
    background-color: #0071be;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

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

@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

.buruburu {
    display: inline-block;
    animation: hurueru .3s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(8px, 8px) rotateZ(1deg)}
    50% {transform: translate(0px, 8px) rotateZ(0deg)}
    75% {transform: translate(8px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}