img{
	width: 100%;
}

body{
	max-width: 750px;
	margin: 0 auto;
	position: relative;
	overflow-x: hidden;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

#preaf {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #eb48c7;
	z-index: 9999999;
	text-align:center;
	color:#fff;
	max-width: 750px;
	margin: 0 auto;
}

#preaf-logo {
	position: absolute;
	width: 70%;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.logo__shake{
	animation: shakeshake 2s linear infinite;
}


.fv_charcter{
	width: 70%;
	margin: 8% auto 0;
}

.animate__bounceOut{
	animation-delay: 1s;
	animation-duration:0.1s;
}

/* shakeshake */
@keyframes shakeshake {
  15% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(5deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
}

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

/*画面遷移アニメーション*/

/*bodyにappearクラスがついたら出現*/
.preafbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #b9379d;
	animation-name:preafPageAnime;
	animation-duration:0.5s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:0.85s;
	z-index: 9999999;

}

@keyframes preafPageAnime{
	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;
	width: 100%;
	height: 100%;
	max-width: 750px;
	margin: 0 auto;

}

#container{
	animation-name:preafPageAnimeAppear;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

.container__bg{
	display: block;
	width: 100vw;
	max-width: 750px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-image: url(../img/bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

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

/* 追加 */
#container{
	text-align: center;
}

.body__layer{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100%;
	background: #eb48c7;
	opacity: 0.9;
	max-width: 750px;
	margin: 0 auto;
}

.container__layer{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100%;
	background: #eb48c7;
	opacity: 0.9;
	max-width: 750px;
	margin: 0 auto;
	z-index: 2;
}

.mainCnt__wrapper{
	position: absolute;
	z-index: 3;

}

.main__logo{
	width: 90%;
	margin: 0 auto;
	padding-top: 10%;
}

.main__text{
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 1.5;
	font-size: min(4vw,30px);
	padding: 8% 0 6%;
}

.mainBtn__wrapper{
	text-align: center;
	font-size: min(4.8vw,36px);
	font-weight: bold;
}

.btn{
	color: #333;
	width: 90%;
	margin: 4% auto 0;
	padding: 5% 6%;
	background: #ffffffd4;
	border-radius: 30px;
	position: relative;
	border: 2px solid #333;
}

.btn:after{
	position: absolute;
	display: block;
	content: '';
	background-image: url(../img/eye.webp);
	background-size: contain;
	width: 50px;
	background-repeat: no-repeat;
	height: 30px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.main__subtext{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	font-size: min(3.733vw,28px);
	line-height: 1.4;
	padding-top: 2%;
	margin-bottom: 5%;
}

.main__subtext span{
	display: inline-block;
	font-size: min(5.333vw,40px);
	border-bottom: 2px solid #fff;
	padding-bottom: 1%;
	margin-bottom: 2%;
}

.footer{
	font-size: min(3.2vw,24px);
	color: #fff;
	line-height: 1.2;
	padding-top: 25%;
	padding-bottom: 3%;
}