@charset "UTF-8";

#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #B3FFD4;
	z-index: 9999999;
	text-align: center;	
	color: #B3FFD4;
}


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


.splashbg{
    display: none;
}

body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #B3FFD4;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

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


#container{
	opacity: 0;
}


body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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






body{
	margin: 0;
	padding: 0;
	}

.background{
	background-image: url("image/blak.svg");
	width: 375px;
	height: 677px;
	background-size:auto;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.close{
	position: absolute;
	top:10px;
	left:330px;
}

.back{
	position: absolute;
	top:620px;
	left:10px;

}

.next{
	position: absolute;
	top:620px;
	left:330px;

}

.comment{
	display: flex;
	position: absolute;
	top:290px;
	left:25px;
	
}



.serif1{
	position: absolute;
	top:60px;
	left:5px;	animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.serif2{
	position: absolute;
	top:180px;
	left:15px;
	animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



.serif3{
	position: absolute;
	top:80px;
	right: 5px;
	animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



.serif4{
	position: absolute;
	top:200px;
	right: 15px;
	animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.delay-time00{
animation-delay: 2s;	
}

.delay-time02{
animation-delay: 2.2s;
}

.delay-time04{
animation-delay: 2.4s;
}

.delay-time06{
animation-delay: 2.6s;
}



.top{
	position: absolute;
	top:0px;
}


.text_1{
	width: 90%;
	padding-top: 20px;
	color: #FFFFFF;
	text-align: center;
	margin: auto;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	line-height: 25px;
	font-size: small;	
}

.text_2{
	position: absolute;
	bottom:20px;
	left:80px;
	color: #FFFFFF;
	text-align: center;
	font-size: xx-small;
}


.button{
	position: absolute;
}