@charset "UTF-8";
/* CSS Document */

html,body{ overflow-x: hidden; font-family: "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;} 
p{ font-size: 16px; color: #333; line-height: 170%;}
h1{ line-height: 155%;}

body{ width: 100%;} 	
	
.pc{ display: block;}    
.sp{ display: none;}
.sp-atten{ display: none;} 

.sec-inner{ width: 960px; margin: 0 auto;}
.sec-inner p{ font-size: 17px; color: #333; line-height: 175%; margin: 50px 0;}
.sec-inner ul{ margin-left: 20px;}
.sec-inner ul li{ font-size: 17px; color: #333; line-height: 175%; padding: 10px 0; }
.sec-inner img{ width: auto; margin: auto;}
.contentbox{ background: #fff; padding: 40px 0; margin: 60px 0;}
.contentbox-inner{ width: 840px; margin: 0 auto;}
.flex{ display: flex; justify-content: space-between;}	

.yelleow{ color: #fff000;}
.red{ color: #ff0009;}
.underline{ text-decoration: underline;}
.msmall{ font-size: 0.6em;}
.small{ font-size: 0.8em;}
.mlarge{ font-size: 1.2em;}
.large{ font-size: 1.4em;}
.strong{ font-weight: 900;}
.maker{ background: #fff000;padding: 1px 2px;}
.gothic{ font-family: "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;} 
.min{ font-family: 'Noto Serif JP', serif;}
.flash {animation: flash 2s linear infinite;} 



@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
  
  
  100% {
    opacity: 1;
  }
}

/**/ 	
	
header{ font-size: 13px; color: #fff; letter-spacing: 7px; text-align: center;}		
.mainVisual	{ background-image: url(../images/mainvisual-bg.png); background-position: center; background-size: cover; padding: 20px 0 0 0;}	
.mainVisual h1{ width: 462px; margin: 120px auto 80px auto;}
.mainVisual h1 img{ width: 100%;}

.subcopy{ width: 100%; text-align: center; background: rgba(0,0,0,0.90); padding: 70px 0 50px 0;}
.subcopy-top{ width: 875px; margin: 0 auto;}
.subcopy-top img{ width: 100%;}
.subcopy p{ font-size: 26px; text-decoration: underline; font-weight: 900; color: #fff; margin: 50px 0 20px 0;}
.subcopy p br.br{ display: none;}	
	
/**/  

#topContent { background: #000; text-align: center; width:100%; height: 100%; border-top: 1px solid #00eaff; border-bottom: 1px solid #00eaff; padding: 50px 0;}
#topContent h1{ animation: flash 1s linear infinite; margin: 20px auto 60px auto;}
#topContent h1 img{ width: 511px; margin: 0 auto;}
.topContentText{ }	
.topContentText p{ font-size: 24px; color: #fff; margin: 30px 0;}

/**/  

.sec01{}
.sec01 h1{ background: url("../images/sec01-h-bg.png")center; background-repeat: repeat; background-size: cover; padding: 40px 0 30px 0; margin: 0;}

.sec01 h1 img{ width: 817px; margin: auto;}
.sec01 .sec-inner{ margin: 120px auto 60px auto;}
.sec01 .sec-inner .img{ float: right;}

.sec01 h2{ font-size: 17px; background: #eee; padding: 5px 6px 5px 6px; margin: 0; display: inline-block;}
.sec01 p{}


/**/  

.sec02{ background: url("../images/sec02-bg.png")center; background-size: cover; padding: 80px 0; margin: 0;}
.sec02 h1{ }
.sec02 h1 img{ width: 975px; margin: auto;}

.sec02 p{}

.sec02 .contentbox-inner{ margin: 40px auto;}
.sec02 .contentbox-inner .img{ float: right;}

/**/  

.sec03{ background: url("../images/sec03-bg.png")center; background-size: cover; padding: 80px 0; margin: 0;}
.sec03 h1{ }
.sec03 h1 img{ width: 953px; margin: auto;}

.sec03 p{}

.sec03 .contentbox-inner{ margin: 40px auto;}
.sec03 .contentbox-inner .img{ float: right;}

/**/
	
.form{ background: #000; border-left: 2px solid #00eaff; border-right: 2px solid #dc0094;}
.form::before,
.form::after{ content: ""; display: block; height: 2px; background: linear-gradient(to right, #00eaff 0%, #dc0094 100%);}
.form .sec-inner{ padding: 120px 0 180px 0;}
.form .sec-inner > h1{ font-size: 32px; color: #00eaff; margin: 0 0 80px 0; text-align: center;}
.form .sec-inner > h1 br.br{ display: none;}
.form .sec-inner > h1 br.brpc{ display: block;}	
.h-border{ width: 65px; height: 3px; margin: auto; background: #00eaff; margin-bottom: 80px;}
.form .sec-inner p{ margin: 0;}
.form-box{ width: 960px; margin: 0 auto 40px auto; background: #fff; padding: 80px 0 100px 0;}
.form-box > h1{ font-size: 24px; text-align: center; margin-bottom: 30px;}

.QR{}
.QR p.img img{ margin-right: 20px;}

/**/  
	
.submit-area{ width: 350px; height: 60px; margin: 50px auto 0 auto; border-radius: 100px;  background: rgb(255,222,0); background: linear-gradient(90deg, rgba(255,222,0,1) 0%, rgba(255,246,0,1) 100%);  transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; text-align: center;box-shadow: 5px 5px 20px #fffa77;}
.submit-area:hover { box-shadow: 0px 0px 2px #ddd;}	
.submit-area input[type="submit"] { width: 350px; height: 60px; font-size: 18px; color: #333; ;border: 0px; background: rgba(0,0,0,0.00); cursor: pointer;}

.secure{ width: 960px; margin: auto; font-size: 16px; color: #fff; line-height: 175%;}

/**/  

footer{ background: #333; padding: 10px 0; text-align: center;}	
footer p{ color: #fff; font-size: 14px; letter-spacing: 4px;}
	


@media screen and (max-width: 1024px){

.pc{ display: block;}   
.sp{ display: none;} 
.sp-atten{ display: none;} 
br{ display: none;} 
img{ max-width: 100%;}

.contentbox{ background: #fff; padding: 40px 0; margin: 60px 0;}
.contentbox-inner{ width: 90%; margin: 0 auto;}
.sec-inner{ width: 90%; margin: 0 auto;}
.flex{ display: flex; justify-content: space-between;}	

/**/ 
	
.mainVisual	{ padding: 5px 0 0 0;}
	
header{}		
	
.main-visual-contents{ text-align: right;}
.mainvisual-copy1{}
.mainvisual-copy1 img{ width: auto; margin: auto;}

.subcopy{ }
.subcopy-top{ width: min(90%, 545px); margin: auto;}
.subcopy-top img{ max-width: 100%;}
.subcopy p{ width: 90%; font-size: 24px; margin: 50px auto 20px auto;}	

/**/ 
	
.topContentText{ width: 90%; margin: auto;}	
	
/**/  

.sec01 h1 img{ width: 90%; margin: auto;}
.sec02 h1 img{ width: 90%; margin: auto;}
.sec03 h1 img{ width: 90%; margin: auto;}	
	
/**/  
	
.form{ background: #000;}
.form-box{ width: 90%; background: #fff; padding: 80px 0; margin: 0 auto 40px auto;}
.form .sec-inner{ padding: 120px 0;}

.QR{ display: none;}
	
/**/  

.submit-area{ width: 350px; height: 60px; margin: 50px auto 0 auto; border-radius: 100px;  background: rgb(255,222,0); background: linear-gradient(90deg, rgba(255,222,0,1) 0%, rgba(255,246,0,1) 100%);  transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; text-align: center;box-shadow: 5px 5px 20px #fffa77;}
.submit-area:hover { box-shadow: 0px 0px 2px #ddd;}	
.submit-area input[type="submit"] { width: 350px; height: 60px; font-size: 18px; color: #333; ;border: 0px; background: rgba(0,0,0,0.00); cursor: pointer;}

.secure{ width: 90%; }	
	
/**/  

footer{ background: #333; padding: 2px 0; text-align: center;}	
footer p{ color: #fff; font-size: 12px; letter-spacing: 2px;}	

}



@media screen and (max-width: 1024px) and (min-width: 769px){
	
}



@media screen and (max-width: 768px) {

body{ overflow-x: hidden!important;} 

.pc{ display: none;}    
.sp{ display: block;}
.sp-atten{ display: inline-block;} 
img{ max-width: 100%;} 
.sec-inner .img{ display: block; }
.sec-inner img{ width: auto; margin: auto;}
.flex{ display: block; justify-content: space-between;}	
.contentbox{ padding: 20px 0;}
 
/**/ 

.ex{ margin-bottom: 5px;}
	

.mainVisual	{ padding: 5px 0 0 0;}
	
.subcopy p br.br{ display: block;}	
header{ margin-bottom: 40px;}	

/**/  

#topContent { }
#topContent h1{ }
#topContent h1 img{ width: min(90%, 390px); margin: 0 auto;}

.topContentText{ text-align: left;}	
.topContentText p{ font-size: 18px; margin: 20px 0;}

/**/  

.sec01 h1 img{ width: min(90%, 587px); margin: auto;}
.sec02 h1 img{ width: min(90%, 505px); margin: auto;}
.sec03 h1 img{ width: min(90%, 559px); margin: auto;}		
	
/**/  

.sec01{}
.sec01 h1{ padding: 40px 0; }

.sec01 .sec-inner{ margin: 80px auto;}
.sec01 .sec-inner .img{ float: none;}
.sec01 h2{ font-size: 16px; background: #eee; padding: 5px 6px 5px 6px; margin: 0; display: inline-block;}
.sec01 p{}
	
/**/  

.sec02{ padding: 80px 0; margin: 0;}
.sec02 h1{ }
.sec02 h1 img

.sec02 p{}

.sec02 .contentbox-inner{ }
.sec02 .contentbox-inner .img{ }

/**/  

.sec03{ padding: 80px 0; margin: 0;}
.sec03 h1{ }
.sec03 h1 img{}

.sec03 p{}

.sec03 .contentbox-inner{}
.sec03 .contentbox-inner .img{}
	
/**/  
	
.form .sec-inner{ padding: 80px 0;}
.form .sec-inner > h1{ font-size: 24px; color: #00eaff; margin: 0 0 60px 0;}
.form .sec-inner p{ margin: 0;}
.form-box{ width: 90%; margin: 0 auto 40px auto; background: #fff; padding: 30px 0 100px 0;}
.form-box > h1{ font-size: 20px;}	
	
}




@media screen and (max-width: 640px) {

p{ font-size: 14px;}

.submit-area{ width: 80%; height: 45px; font-size: 12px; margin: 30px auto 0 auto; }
.submit-area input[type="submit"] { height: 45px; }

}




@media screen and (max-width: 450px) {	

.sec-inner p{ font-size: 15px; line-height: 175%; margin: 40px 0;}
.sec-inner ul li{ font-size: 15px; padding: 5px 0; }
.contentbox{ background: #fff; padding: 10px 0; margin: 40px 0;}
.contentbox-inner{ padding: 0;}
	
.mainVisual	{ padding: 5px 0 0 0;}
header{ font-size: 10px;}

.mainVisual h1{ width: 50%; margin: 60px auto 50px auto;}
.mainVisual h1 img{ max-width: 100%;}

.subcopy{ width: 100%; text-align: center; background: rgba(0,0,0,0.90); padding: 40px 0 ;}
.subcopy-top{}
.subcopy-top img{ }
.subcopy p{ font-size: 13px; text-align: center; margin: 20px auto 0 auto;}	

.main-visual-contents{ text-align: right;}
.main-visual-contents img{ width: 100%; margin: auto;}	
.mainvisual-copy1{}
.mainvisual-copy1 img{}		

	
#topContent { padding: 20px 0;}
#topContent h1 { margin: 20px auto;}
#topContent h1 img{ width: 80%; margin: 20px auto 40px auto;}
.topContentText p{ font-size: 14px;}

	
/**/  

.sec01{}
.sec01 h1{ padding: 20px 0;}

.sec01 h1 img{}
.sec01 .sec-inner{ margin: auto; padding: 20px 0;}
.sec01 .sec-inner .img{ float: none;}

.sec01 p{}

/**/  

.sec02{ padding: 40px 0; margin: 0;}
.sec02 h1{ }
.sec02 h1 img

.sec02 p{}

.sec02 .contentbox-inner{ }
.sec02 .contentbox-inner .img{ }

/**/  

.sec03{ padding: 40px 0; margin: 0;}
.sec03 h1{ }
.sec03 h1 img{}

.sec03 p{}

.sec03 .contentbox-inner{}
.sec03 .contentbox-inner .img{}
	
.form{ }
.form::before,
.form::after{ }
.form .sec-inner{ padding: 40px 0 60px 0;}
.form .sec-inner > h1{ font-size: 18px;  margin: 0 0 40px 0;}
.form .sec-inner > h1 br.brpc{ display: none;}		
.form .sec-inner > h1 br.br{ display: block;}	
.h-border{ width: 10%; margin-bottom: 50px; height: 1px;}	
.form-box{ width: 95%; padding: 40px 0 80px 0;}
.form-box > h1{ font-size: 18px;}
.secure{ font-size: 12px;}

.btnarrow { padding: 8px 20px;}
.submit-area input[type="submit"] { width: 90%; font-size: 16px;}
footer p{ font-size: 10px;}	

}


@media screen and (max-width: 414px) {


}



/* add ---------------- */ 

#topContent2{
	background: #000; text-align: center; width:100%; height: 100%; border-top: 1px solid #00eaff; border-bottom: 1px solid #00eaff; padding: 100px 0 50px 0;
}

#topContent2 > h1{ font-size: 48px; color: #00eaff; margin: 0 0 80px 0; text-align: center; line-height: 135%;}
#topContent2 > h1 br.br{ display: none;}

#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section{ text-align: left; margin-bottom: 25px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1{ font-size: 29px; position: relative; padding: 20px 0 20px 45px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1:before { position: absolute; top: 17px; left: 0;content: url('../images/checkbox.png?');}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1{ font-size: 29px; position: relative; padding: 20px 0 20px 50px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1:before { position: absolute; top: 40px; left: 0;content: url('../images/checkbox.png?');}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section > div{ background: #f4f4f4; padding: 5px 0; text-align: center;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section > div > p { font-size: 18px; color: #333; line-height: 155%; margin: 10px 0;}



@media screen and (max-width: 768px) {
#topContent2{  padding: 70px 0 50px 0;}	
#topContent2 > h1{ font-size: 28px; margin: 0 0 40px 0;}
#topContent2 > .sec-inner > .contentbox{ padding: 10px 0;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner{ width: 88%; margin: 0 auto;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1{ font-size: 20px; padding: 20px 0 20px 35px; }
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1:before { top: 17px; content: url('../images/checkbox_sp.png?');}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1{ font-size: 20px; padding: 20px 0 20px 35px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1:before { top: 32px; content: url('../images/checkbox_sp.png?');}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section > div > p { font-size: 15px; width: 90%; margin: 10px auto; text-align: left;}
}

@media screen and (max-width: 430px) {
#topContent2{ padding: 50px 0 20px 0;}	
#topContent2 > h1{ font-size: 24px; margin: 0 0 20px 0;}
#topContent2 > .sec-inner > .contentbox{ padding: 20px 0 10px 0;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner{ width: 88%; margin: 0 auto;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1{ font-size: 20px; padding: 5px 0 5px 35px; margin-bottom: 10px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1{ font-size: 20px; padding: 5px 0 5px 35px;margin-bottom: 10px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1:before { top: 21px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1:before { top: 38px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section > div{ padding: 10px 0;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section > div > p { }	
}
@media screen and (max-width: 375px) {
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section h1{ font-size: 18px;}
#topContent2 > .sec-inner > .contentbox > .contentbox-inner > section.first h1{ font-size: 18px;}
}