@charset "UTF-8";

html {
	width:100%;
	margin:0 auto;
	text-align: center;
	animation: loading 1s;
	font-family: 'Noto Sans JP', sans-serif;
}
img {
	width: 100%;
	pointer-events: none;
	vertical-align: top;
}
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width:770px){
	.pc{display: none;}
	.sp{display: block;}
}
body {
	width:100%;
	margin: 0 auto;
	background:#000;
}
.all_back{
	max-width:800px;
	margin:0 auto;
	position: fixed;
  	z-index: -1;
  	top: 0;
  	right:0;
  	left:0;
  	bottom:0;
  	overflow: hidden;
}
.all_back img{
	width:100%;
	margin:0 auto;
	text-align: center;
}
@media screen and (max-width: 769px){
.all_back img{ 
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
}
}
.fv_top{
	max-width:800px;
	margin:0 auto;
}

.wrapper{
	max-width:800px;
	margin:0 auto;
}
.fv_bottom{
	width:100%;
	background:#393867;
	margin:-1% 0 0 0;
	padding:5% 0 10% 0;
}
.fv_bottom img{
	width:80%;
}
.pink_zone{
	width:100%;
	margin:0 auto;
}
.pink_back{
	position: relative;
}
.pink_txt{
	position: absolute;
	margin:0;
	top:30%;
	right:0;
	left:0;
	bottom:0;
}
.pink_txt p{
	font-size:2.5em;
	color:#fff;
	font-family: serif;
}
@media screen and (max-width:770px){
	.pink_txt p{
		font-size:1.5em;
	}
}
.cvr_txt{
	width:100%;
	margin:0 auto;
	background:rgb(57,56,103,0.5);
	padding:5% 0;
}
.cvr_txt img{
	width:80%;
}
.comit_btn{
	width:60%;
	margin:0 20%;
}
.cvr_btn{
	width:50%;
	margin:0 25%;
}
@media screen and (max-width:770px){
	.cvr_btn{
		width:80%;
		margin:0 auto;
	}
}
.point_zone{
	width:100%;
	margin:0 auto;
	padding:5% 0;
	background:url(../img/point_back.jpg)no-repeat;
	background-size:cover;
}
@media screen and (max-width:770px){
	.point_zone{
		padding:10% 0 5% 0;
	}
}
.step_title{
	width:80%;
	margin:0 auto;
}
.point1,.point2{
width:80%;
margin:5% 10%;
}
.point3{
	width:80%;
margin:5% 10% 15% 10%;
}
@media screen and (max-width:770px){
	.point3{
	margin:5% 10% 10% 10%;
	}
}
.uservoice{
	width:100%;
	margin:0 auto;
	padding:10% 0;
	background:#1c1b61;
}
.voice1,.voice3{
	width:80%;
	margin:5% 0 0 20%;
}
@media screen and (max-width:770px){
	.voice1,.voice3{
		width:90%;
		margin:5% 0 0 10%;
	}
}
.voice2{
	width:80%;
	margin:5% 0;
}
@media screen and (max-width:770px){
	.voice2{
		width:90%;
		margin:5% 10% 0 0;
	}
}
footer{
	background:#fff;
	padding:10px 0;
}
a{
	text-decoration: none;
}
.f_menu a{
	display:block;
	color:#000;
}