@charset "UTF-8";


@media (max-width: 1030px){
#topimage{height: 600px;}
.wrapper{width:960px;}
.entry,.entry2{height:600px;}
}


@media (max-width: 980px){
	
#topimage{height: 600px;}
.wrapper{width:90%;margin:0 auto;padding:40px;}
.entry,.entry2{height:600px;}
	
.title p{width:100%}
	
	
.top-copy {
    width: 600px;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}

.top-copy h2{font-size:25px;}
.top-copy div {
    width: 42px;
    float: left;
    margin-right: 20px;
}
.top-copy p {font-size:12.5px;}
	
.title h2:before,.title h2:after{width:100px;}
		
.title h2 {
    font-size: 28px;
    color: #666;
	line-height: 30px;}
	

/*about*/
.about{width:100%;background-color:#fff;}
.about-lead{width:480px;float:left;}
.about-image{width:180px;float:right;margin-top:40px;}
	
	
/*benefit*/	
	
.benefit{width:100%;background-color:#fafafa;}
.about h3{font-size:18px;padding-left:20px;border-left:10px solid #F4D15C;}

.benefit-item{box-sizing:border-box;
	width:38%;padding:20px 4%;text-align:center;
}
.benefit-item h3{font-size:18px;}
.benefit-item p{text-align:left;font-size:12px;}


/*voice*/


.voice{width:100%;background-color:#fff;}
.voice h3{font-size:35px;text-align:center;margin:40px 0px;}
.voice-image{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #464646;
	position:relative;
	height:400px;
	margin-top: 40px;
	border-radius: 20px;
}


.how-to-entry-box{margin:20px 0px;}

.how-to-entry-item{box-sizing:border-box;
	width:100%;padding:0px 3%;text-align:center;}

.how-to-entry-item div{border:2px solid #ccc;padding:15px;font-size:20px;}
.how-to-entry-item div{border:2px solid #e1e1e1;padding:15px;font-size:20px;border-radius: 10px;width:auto;background-color:#f8f8f8;}
.how-to-entry-item p{text-align:center;font-size:12px;margin-bottom:0px;}


.right-vector {height:50px;background-image:url(image/bottom-vector-gray.png);background-repeat: no-repeat;background-position: center center;width:100%;margin-top:-10px;}
.right-vector img{display: none;}


/Q and A/

.q-and-a{background-color: #fafafa;padding-bottom:40px;}
.qa-box{padding:5%;border:1px solid #ccc;background-color: #fff;border-radius: 20px;margin:45px auto 0px;width:100%;box-sizing: border-box;}
.qa-box h3{font-size:25px;margin-top:20px;}

/*partner*/
.partner-box::after{
  content:"";
  display: block;
  width:32%;
}

.partner-box li{padding: 20px;color:#666;width:48%;float:left;font-size:12px;box-sizing: border-box;margin-top:15px;text-align:center;border:3px solid #ddd;border-radius: 10px;}

.partner .wrapper{margin-bottom:30px;}


/*messeage*/


.message-text{width:100%;}


.message .wrapper{background: none;margin-bottom:60px;}

}
@media (max-width:720px){header{height:80px;background:rgba(255,255,255,0.98);}
	
	header h1{margin:10px 10px 2px 0px;font-size:10px;float:right;color:#888;
	}
	header #logo{padding:10px 0px 0px 10px;width:100px;}
	#entry-top{padding: 0px 10px 0 0;clear:right;}
	#entry-top a{font-size:14px;}
	
		
#page-top {
    position: fixed;
    bottom: 10px;
    right: 15px;
    font-size: 77%;
}
#page-top a {
    text-decoration: none;
    color: #fff;
    width: 100px;
    border-radius: 5px;
}
}


@media (max-width: 500px){
	#entry-top{padding: 5px 5px 0 0;clear:right;}


	body{font-size:11.2px;}
	.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}
	.top-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	
.entry-btn img{width:7px;}
	
	
	
#topimage {
	height: 100vh;background-image: url(image/top-image-sp.jpeg);}
	
	.top-copy{width:100%;float:none;text-align:center;}
	.about-lead {
    width: 100%;
	float: left;}
	
	.entry-btn{width:90%;}
	
	div{box-sizing: border-box;}
	header{height:80px;background:rgba(255,255,255,0.98);}
	
	header h1{margin:10px 10px 2px 0px;font-size:10px;float:right;color:#888;
	}
	header #logo{padding:10px 0px 0px 10px;width:100px;}
	#entry-top{padding: 5px 10px 0 0;}
	#entry-top a{}


.square_btn {
    font-size: 13px;margin-right:10px;
}

.top-copy h2{font-size:20px;margin:10px;}
.top-copy div{width:30px;float:none;margin:0 auto;}

.top-copy p{width:80%;float:none;margin-left:10px;margin:0 auto;

-webkit-transform:scale(0.85);
-moz-transform:scale(0.85);
-ms-transform:scale(0.85);
-o-transform:scale(0.85);
transform:scale(0.85);
	}
.top-copy p br{display:none;}

.scrole-notice {
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    text-align: center;
}
.scrole-notice img{width:50px;}
	
.title h2:before, .title h2:after {
    width: 20px;
}
	
	.title h2{font-size:16px;line-height:10px;}
	.about h3{font-size:14px;padding-left:10px;}
	

.about-lead{margin-bottom:20px;}
.about-image{width:80%;float:none;margin:20px auto;}
	
	
.benefit{width:100%;background-color:#fafafa;}

.benefit-item{box-sizing:border-box;
	width:75%;padding:10px 4%;text-align:center;}
.benefit-item h3{font-size:18px;}
.benefit-item p{text-align:left;font-size:12px;}
	
	
	
/*voice*/
	
	.voice-image{height:45vw;border-radius: 5px;}
	
	.voice h3{font-size:14px;margin:20px 0px;}
	
	.voice ul {
    margin-top: 20px;
}
	
	
	.voice li {
    padding: 5px;
    background-color: #FD999D;
    width: 91px;
    float: left;
    margin-right: 10px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    border-radius: 5px;
}
	
	
	
	
.entry-btn{
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #fff;
    border: solid 1px #fff;
    border-radius: 0px;
    transition: .4s;
	position:absolute;
	top:50%;
	left:50%;
	width:300px;
	height:40px;
	font-size:17px;
	margin-left:-165px;;
	margin-top:-20px;
	text-align:center;
	padding-top:25px;
}

	
	.qa-box{margin-top:30px;}
	.partner-box{margin-top:20px;}
	.partner-box li{width:100%;}
	
	.company table{margin:40px 0px 20px;}
	.company td{padding:5px;width:auto;min-width:90px;}
	
	.message-text{margin-top:30px;}
	
	.message-text h3{font-size:14px;padding-left:10px;
		
	}
	
	.how-to-entry-item div{font-size:14px;padding:14px;}
	
	.message .wrapper{margin-bottom:40px;}
	
}
	
	


@media (max-width: 330px){
	header #logo{padding:10px 0px 0px 10px;width:90px;}
	
	
.top-copy h2{font-size:16px;margin:10px;}
.top-copy div{width:30px;float:none;margin:0 auto;}

.top-copy p{width:80%;float:none;margin-left:10px;margin:0 auto;

-webkit-transform:scale(0.75);
-moz-transform:scale(0.75);
-ms-transform:scale(0.75);
-o-transform:scale(0.75);
transform:scale(0.75);
	
	line-height:160%;
	}
	
	
	.entry-btn{
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #fff;
    border: solid 1px #fff;
    border-radius: 0px;
    transition: .4s;
	position:absolute;
	top:50%;
	left:50%;
	width:250px;
	height:40px;
	font-size:14px;
	margin-left:-140px;;
	margin-top:-20px;
	text-align:center;
	padding-top:25px;
}
	
	
	.voice li{margin-right:5px;width:78px;margin-top:5px;}
}