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

body{
	color:#fff;
  font-family:'Noto Sans JP', sans-serif;
	width:100%;
	 -webkit-text-size-adjust: 100%;
  background: url("../img/bg.jpg");
}
.inner{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.inner2{
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
.wrap{
    overflow: hidden;
}
/**** header main_visual ****/
.logo{
  position: fixed;
  top:0;
  left: 5%;
  background: url("../img/logo_bg.jpg");
  box-shadow: 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67);
  z-index: 9999;
}
.logo p{
  max-width: 114px;
  width: 100%;
  margin: 0 auto;
}
.logo p a{
  transition: .5s;
  padding: 8px;
  display: block;
}
.logo p a:hover{
  opacity: 0.6;
}
.mv_wrap{
  position: relative;
}
.main_visual{
  background: url("../img/main_bg.jpg") no-repeat top center;
  background-size: auto;
  width: 100%;
  position: relative;
}
.fire_fighter{
  background: url("../img/fire_fighter.png") no-repeat right bottom;
  background-size: contain;
  padding-bottom: 8.7%;
}
.smoke_left,.smoke_right{
  position: absolute;
  bottom: 0;
}
.smoke_left{
  margin-right: auto;
  max-width: 534px;
  width: 28.0609568465581%;
  animation: sl 6s ease infinite;
}
.smoke_right{
  margin-left: auto;
  max-width: 483px;
  width: 25.38097740409879%;
  animation: sr 6s ease infinite;
}
.smoke_wrap{
  position: relative;
  z-index: 0;
}
.mv_txt{
  max-width: 598px;
  padding-top: 11.6%;
  padding-bottom: 34%;
	margin-left: 215px;
}
.under_txt_wrap{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}
.under_txt{
	background: -webkit-linear-gradient(top, rgba(136,0,0,0) 40%, rgba(136,0,0,1) 90%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(to bottom, rgba(136,0,0,0) 40%, rgba(136,0,0,1) 90%); /* W3C */
}
.under_txt p{
  float: left;
}
.under_txt .clear p:nth-child(1){
  width: 49.3636363636364%;
}
.under_txt .clear p:nth-child(2){
  width: 46.5454545454545%;
  overflow: hidden;
  position: relative;
}
.under_txt .clear p:nth-child(2) .mv_txt3{
  background: url("../img/mv_txt3.png") no-repeat right top;
  height: 100%;
  position: absolute;
  background-size: cover;
  right: 0;
  top: 0;
  padding-right:0%;
  animation: fire 10s linear;
}
.under_txt .clear p:nth-child(2) .mv_txt3::before{
  content: " ";
  position: absolute;
  height: 0%;
  animation: fire_line 10s linear;
  left:0;
  top: 50%;
	transform: translate(0, -50%);
}
.under_txt .clear p:nth-child(2) .mv_txt3::after{
  content: " ";
  position: absolute;
  animation: fire_flower 10s linear;
  left: -25px;
  top: 50%;
	transform: translate(0, -50%);
  height: 70%;
}
/*** main_contents ***/
.catch{
  background: url("../img/catch_bg.png") no-repeat center top;
  padding-bottom: 16.5%;
  background-size: cover;
}
.catch .inner2{
  position: relative;
}
.catch .inner2 h1{
  font-size: 3rem;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 13px rgba(0,0,0,0.9);
  padding-top: 21.637%;
  line-height: 1.5;
  position: relative;
}
/***** blue_line temp *****/
.blue_line_length_wrap{
  height: 786px;  
  width: 38px;
  position: absolute;
  overflow: hidden;
}
.blue_line_length{
  width: 2px;
  height: 786px;
  background: #24eaf9;
  position: absolute;
  box-shadow: 0 0 18px #00c0ff,0 0 18px #00c0ff;
  left: 0;
  right: 0;
  margin: auto;
}
.blue_line_length::after{
  content: " ";
  position: absolute;
  box-shadow: 0 0 5px #fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+10,ffffff+50,ffffff+90&0+10,1+50,0+90 */
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 90%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 10%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 90%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 10%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  animation: bl_leng 2.6s linear infinite;
}
.blue_line_side_wrap{
  width: 786px;
  height: 38px;  
  position: absolute;
  overflow: hidden;
}
.blue_line_side{
  width: 786px;
  height: 2px;
  background: #24eaf9;
  position: absolute;
  box-shadow: 0 0 18px #00c0ff,0 0 18px #00c0ff;
  top: 0;
  bottom: 0;
  margin: auto;
}
.blue_line_side::before{
  content: " ";
  position: absolute;
  box-shadow: 0 0 5px #fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,1+50,0+100 */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
  animation: bl_side 3.2s linear infinite;
}
/***** ▲▲ END ▲▲ blue_line temp *****/

.catch .blue_line_length_wrap{
  left: -3.8%;
  top: 230px;
}
.catch .blue_line_side_wrap{
  left:-13%;
  bottom: -6.2%;
}
/**** cont1 ****/
.cont1{
  position: relative;
  z-index: 1;
}
.cont1::before{
  content: url("../img/c1img.png");
  position: absolute;
  left: 0;
  top: -84px;
  box-shadow: 20px 20px 0 #3d0101;
  z-index: 1;
}
.cont1::after{
  content: " ";
  position: absolute;
  left: 20px;
  top: -64px;
  width: 700px;
  height: 700px;
  background: linear-gradient(0deg, rgba(1,7,61,0.4), rgba(61,1,52,0.4), rgba(61,1,1,0.4), rgba(1,61,56,0.4));
  /*opacity: 0.4;
  background: #3d0101;*/
  z-index: 1;
  animation: grabg 10s linear infinite;
  background-size: 600% 600%;
}
.c1inner h2,.c1inner ul{
  position: relative;
  z-index: 2;
}
.red_line{
  font-size: 1.875rem;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.05em;
  position: relative;
}
.red_line::before{
  content: " ";
  position: absolute;
  width: 945px;
  height: 4px;
  left: 0;
  right: 0;
  bottom: -21px;
  margin: auto;
  background: -moz-linear-gradient(left, rgba(126,0,0,0) 0%, rgba(126,0,0,0.76) 38%, rgba(126,0,0,1) 50%, rgba(126,0,0,0.76) 62%, rgba(126,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(126,0,0,0) 0%,rgba(126,0,0,0.76) 38%,rgba(126,0,0,1) 50%,rgba(126,0,0,0.76) 62%,rgba(126,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(126,0,0,0) 0%,rgba(126,0,0,0.76) 38%,rgba(126,0,0,1) 50%,rgba(126,0,0,0.76) 62%,rgba(126,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007e0000', endColorstr='#007e0000',GradientType=1 ); /* IE6-9 */

}
.red_line::after{
  content: " ";
  position: absolute;
  height: 4px;
  bottom: -21px;
  margin: auto;
  animation: red_line 4s linear infinite;
}
.cont1 ul{
  margin-top: 10.6%;
}
.cont1 ul li{
  font-size: 1.5rem;
  vertical-align: bottom;
  margin-bottom: 5.4%;
  display: table;
  text-shadow: 0 0 13px #4b4b4b;
}
.cont1 ul li:nth-child(2){
  margin-left: 40px;
}
.cont1 ul li:nth-child(3){
  margin-left: 80px;
}
.cont1 ul li:nth-child(4){
  margin-left: 120px;
}
.cont1 ul li:nth-child(5){
  margin-left: 160px;
}
.cont1 ul li span{
  display: table-cell;
}
.cont1 ul li span:nth-child(1){
  width: 43px;
  margin-right: 40px;
}
.cont1 ul li span:nth-child(2){
  padding-left: 40px;
}
.cont1 ul li span img{
  -webkit-filter: drop-shadow(0 0 10px rgba(0,192,255,0.54));
  filter: drop-shadow(0 0 10px rgba(0,192,255,0.54));
}
.c1inner{
  position: relative;
}
.c1inner .blue_line_length_wrap{
  right: 0;
  top: 57%;
  z-index: 0;
}
.c1inner .blue_line_side_wrap{
  right:-6.4%;
  bottom: -18.6%;
  z-index: 0;
}
.c1inner::after{
  content: url("../img/problem.png");
  position: absolute;
  right: -59px;
  bottom: -76px;
}
/*** cont2 ***/
.cont2{
  margin-top: 190px;
}
.c2_inner_wrap{
  padding-top: 70px;
  padding-bottom: 153px;
  position: relative;
  background: url("../img/c2_bg.png") no-repeat center top;
  z-index: 1;
}
.cont2 h2{
  font-size: 2rem;
  text-align: center;
}
.cont2 h2 span{
  position: relative;
  z-index: 1;
  text-shadow: 1px 0 5px rgba(5,5,5,1.0);
  font-weight: bold;
}
.cont2 h2 img{
  width: 100%;
  max-width: 586px;
  margin: -7px auto 0;
}
.cont2 h2 + p{
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202,0 0 24px #7b0202;
  letter-spacing: 0.05em;
  font-weight: bold;
  line-height: 1.583333333;
  margin-top: 30px;
  position: relative;
}
.cont2 h2 + p::after{
  content: url("../img/arrow.png");
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  margin: auto;
}
.cont2 .inner{
  position: relative;
}
.cont2 .inner::before{
  content: url("../img/demerit.png");
  position: absolute;
  left: 30px;
  bottom: -10px;
}
.cont2 .blue_line_length_wrap{
  left: 7.3%;
  bottom: -50px;
}
.cont2 .blue_line_side_wrap{
  left: 1.9%;
  bottom: -38px;
}
.cont2 .inner2{
  padding-bottom: 30px;
}
.c2_inner_wrap2{
  position: relative;
}
.c2_inner_wrap2::before{
  content: url("../img/c2_img.png");
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.c2_inner_wrap2::after{
  content: " ";
  position: absolute;
  width: 600px;
  padding-bottom: 400px;
  right: -14px;
  top: 14px;
  animation: grabg 10s linear infinite;
  background: linear-gradient(0deg, rgba(1,7,61,0.4), rgba(61,1,52,0.4), rgba(61,1,1,0.4), rgba(1,61,56,0.4));
  background-size: 600% 600%;
}
.c2_txt_wrap{
  padding-left: 70px;
  font-size: 1.25rem;
  line-height: 1.9;
  letter-spacing: 0.065em;
  position: relative;
  z-index: 2;
}
.c2_txt_wrap p{
  margin-bottom: 13px;
}
.c2txt{
  text-align: center;
  font-size: 2.25rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
}
/**** cont3 ****/
.cont3{
  background: url("../img/c3_bg.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
  margin-top: 50px;
  padding-bottom: 65px;
}
.cont3 h2{
  padding-top: 80px;
  margin-bottom: 60px;
}
.cont3 h2:nth-of-type(2){
  padding-top: 65px;
}
.cont3 p{
  line-height: 2.1111111;
  font-size: 1.125rem;
  letter-spacing: 0.065em;
  padding-left: 5%;
}
/**** bnr ****/
.bnr{
  margin-top: 100px;
  position: relative;
}
.bnr .blue_line_side_wrap {
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.bnr .blue_line_side {
  width: 100%;
}
.bnr .blue_line_side::before{
  content: " ";
  position: absolute;
  animation: bl_side 3.2s linear infinite;
}
.bnr p{
  max-width: 910px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bnr p a{
  display: block;
  box-shadow: 14px 14px 6px #000000; 
}
.bnr p a:hover{
	animation: rumble 0.12s linear infinite;
}
/**** cont4 ****/
.cont4{
  margin-top: 100px;
}
.cont4 h2 + p{
  margin-top: 65px;
  font-size: 1.25rem;
  text-align: center;
  letter-spacing: 0.09em;
}
.c4cap{
  margin-top: 70px;
  margin-bottom: 60px;
  background: url("../img/c4_logo.png") no-repeat bottom right 60px;
}
.c4cap h3{
  max-width: 400px;
  text-align: center;
  background: #0b3363;
  font-size: 1.875rem;
  font-style: italic;
  padding: 24px 0;
  letter-spacing: 0.09em;
  box-shadow: 11px 11px 6px #000;
}
.c4cap p{
  font-size: 1.25rem;
  line-height: 1.9;
  letter-spacing: 0.09em;
  padding-left: 40px;
  margin-top: 35px;
  margin-bottom: 45px;
}
.c4cap p:nth-of-type(2){
  margin-bottom: 0;
}
.red{
  color: #ff0606;
}
.c4cap + .inner2 p a{
  text-align: center;
  color: #fff;
  border: solid 3px #7e0000;
  display: block;
  font-size: 1.875rem;
  letter-spacing: 0.09em;
  font-weight: bold;
  padding: 25px 0;
  box-shadow: 0 0 36px rgba(106,2,2,0.67),0 0 36px rgba(106,2,2,0.67),0 0 36px rgba(106,2,2,0.67),0 0 36px rgba(106,2,2,0.67),0 0 36px rgba(106,2,2,0.67) ,0 0 30px rgba(106,2,2,0.67)inset,0 0 30px rgba(106,2,2,0.67)inset,0 0 30px rgba(106,2,2,0.67)inset;
  transition: .4s;
}
.c4cap + .inner2 p a:hover{
  box-shadow: 0 0 0 rgba(106,2,2,0.67);
  border:solid 3px #b50000;
  text-shadow: 0 0 15px #fff;
}
/**** form ****/
.form{
  margin-top: 100px;
}
.form h2{
  background: #7e0000;
  text-align: center;
  font-style: italic;
  text-shadow: 6px 6px 5px #000;
  font-size: 2.25rem;
  padding: 30px 0;
}
.form_inner{
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
}
.form_inner p{
  font-size: 1.25rem;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}
input,textarea{
  width: 100%;
  margin: 10px auto 0;
  padding: 5px 10px 6px;
  border: solid 3px #7e0000;
  border-radius: 10px;
  background: rgba(45,47,51,0.4);
  color: #fff;
  letter-spacing: 0.1em;
}
input{
  font-size: 1.5rem;
}
textarea{
  font-size: 1.125rem;
}
.send_wrap{
  max-width: 250px;
  margin: 0 auto;
}
input.send{
  border-radius: 0;
  border:solid 3px #fff;
  background: none;
  box-shadow: 0 0 21px rgba(255,255,255,0.67),0 0 21px rgba(255,255,255,0.67),0 0 21px rgba(255,255,255,0.67),0 0 21px rgba(255,255,255,0.67) inset;
  transition: .4s;
  padding-top: 9px;
  cursor: pointer;
  margin-top: 30px;
  font-weight: bold;
}
input.send:hover{
  box-shadow: 0 0 0 #fff;
}
footer{
  background: #7e0000;
  padding-top: 18px;
}
footer p{
  text-align: center;
}
footer p a{
  vertical-align: bottom;
  background: #fff;
  padding: 2px 4px;
  color: #7e0000;
  transition: .3s;
  margin-left: 5px;
}
footer p a:hover{
  opacity: .7;
}
footer p.copy{
  text-align: center;
  margin-top: 10px;
  padding-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
/*#pagetop{
  width: 60px;
  height: 60px;
  background: #24eaf9;
  display: block;
  position: fixed;
  right: 100px;
  bottom: 100px;
  transform: rotate(-45deg);
  border-radius: 2px;
  z-index: 9999;
  box-shadow: 0 0 10px #00c0ff;
}*/
#pagetop a{
  color: #fff;
  position: fixed;
  bottom:80px;
  right:80px;
  transition:.5s;
  background: #24eaf9;
  z-index: 9999;
  width: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  box-shadow: 0 0 10px #00c0ff;
  letter-spacing: 0.1em;
}
#pagetop a:hover{
  background: #7e0000;
  box-shadow: 0 0 10px rgba(106,2,2,0.67);
}
#pagetop a::after{
  content: " ";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #24eaf9 transparent;
  border-radius: 2px;
  transition:.5s;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top:-10px;
  width: 0;
}
#pagetop a:hover::after{
  content: " ";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #7e0000 transparent;
  border-radius: 2px;
  transition:.5s;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top:-20px;
  width: 0;
}
#pagetop a::before{
  content: " ";
  height: 32px;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top:-20px;
  width: 100%;
}
span.wpcf7-not-valid-tip{
  margin-top: 10px;
  font-size: 0.75rem !important;
}
/**** cont_result *****/
.cont_result{
	background: #121212;
	padding-top: 25px;
	margin-top: 100px;
}
.crcap{
	padding-bottom: 50px;
	margin-top: 50px;
}
.cont_result h2 + p{
	margin-top: 65px;
	font-size: 1.25rem;
	text-align: center;
	letter-spacing: 0.09em;
	line-height: 1.5;
}
.cont_result .dev_li{
  max-width: 350px;
	width:50%;
  float: left;
  margin-top: 50px;
}
.cont_result .dev_li:nth-child(3n+2){
  margin: 50px 2.2272727272% 0;
}
.hover_wrap{
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition:		all 0.4s ease;
}
.mask{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  padding: 10%;
  padding-top: 0;
  color: #fff;
  opacity: 0;
  transition:		all 0.4s ease;
}
.site_url{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition:		all 0.4s ease;
  margin: 0 auto;
  max-width: 310px;
	width: 88.57142857%;
  border-top: solid 1px #fff;
}
.site_url p{
	max-width: 150px;
	min-width: 120px;
  width: 42.85714285%;
  margin: 0 auto;
  margin-top: 12%;
}
.site_url a{
  color: #fff;
  text-align: center;
  display: block;
  border: solid 1px #fff;
  padding-top: 7px;
  padding-bottom: 7px;
  transition:		all 0.4s ease;
  box-shadow: 0 0 3px #fff;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
}
.site_url a:hover{
  background: #fff;
  color: #333;
  box-shadow: inherit;
}
/*.site_url span{
  color: #fff;
  text-align: center;
  display: block;
  border: solid 1px #fff;
  padding-top: 7px;
  padding-bottom: 7px;
  transition:		all 0.4s ease;
  box-shadow: 0 0 3px #fff;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  cursor: pointer;
}
.site_url span:hover{
  background: #fff;
  color: #333;
  box-shadow: inherit;
}*/
.hover_wrap:hover{
  box-shadow: 0 0 10px #fff;
}
.hover_wrap:hover .mask{
  opacity: 1;
  padding-top: 10%;
}
.hover_wrap:hover .mask .site_url{
  opacity: 1;
  padding-bottom: 10%;
}
.caption h5{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .2em;
}
.caption p{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .1em;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-left: 1em;
  line-height: 1.25;
}
.caption p:nth-child(6){
  margin-bottom: 0;
}
.dev_li h3{
	text-align: center;
	font-size: 1.25rem;
	margin-bottom: 20px;
}
.result_btn{
	margin-top: 25px;
}
.result_btn p{
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 2.2%;
	cursor: pointer;
	background: linear-gradient(to left, #0b3363 50%, #24eaf9 50%);
	color:#777;
	transition: .2s;
	background-size: 200%;
	background-position-x: right;
	border-radius: 5px;
}
.result_btn p:hover{
	color: #fff;
	background-position-x: left;
}
.result_btn .lp_result_btn{
	float: left;
	max-width: 400px;
	width: 36.363636%;
	margin-left: 9.096%;
	margin-right: 4.454545%;
}
.result_btn .site_result_btn{
	float: right;
	max-width: 400px;
	width: 36.363636%;
	margin-right: 9.096%;
	margin-left: 4.454545%;
}
.site_result,.lp_result{
	display: none;
}
.result_btn p.active_btn{
	background: #24eaf9;
	color:#fff;
	box-shadow: 0 0 10px #00c0ff;
	display: block;
}
.active{
	display: block;
}
@keyframes sl{
  0%{
    left:0;
  }
  50%{
    left:2%;
  }
  100%{
    left:0;
  }
}
@keyframes sr{
  0%{
    right:-3%;
  }
  50%{
    right:0;
  }
  100%{
    right:-3%;
  }
}
@keyframes fire {
  0%{
    padding-right: 100%;
  }
  60%{
    padding-right: 100%;
  }
  100%{
    padding-right: 0%;
  }
}
@keyframes fire_line {
  59%{
    height: 7%;
    background: -webkit-linear-gradient(top, rgba(255,125,3,0) 20%, rgba(136,0,0,1) 50%, rgba(136,0,0,0) 80%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to bottom, rgba(136,0,0,0) 20%, rgba(136,0,0,1) 50%, rgba(136,0,0,0) 80%); /* W3C */
  }
  60%{
    width: 4px;
  }
  100%{
    height: 70%;
    width: 4px;
  }
}
@keyframes fire_flower {
  50%{
    background: url("../img/fire_flower.png") no-repeat top center;
    width:10px;
    left: -5px;
    opacity: 0;
  }
  80%{
    width: 50px;
    left: -25px;
    opacity: 1;
  }
  900%{
    opacity: 1;
  }
  95%{
    width: 50px;
    left: -25px;
}
  100%{
    opacity: 0;
    background: url("../img/fire_flower.png") no-repeat top 25% center;
  }
}
@keyframes bl_leng {
  0%{
    top:-70px;
    width: 2px;
    height: 70px;
  }
  50%{
    top:786px;
  }
}
@keyframes bl_side {
  0%{
    left:-70px;
    width: 70px;
    height: 2px;
  }
  50%{
    left:786px;
  }
}
@keyframes red_line{
  0%{
    opacity: 0.1;
    left: 0;
    background: -moz-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f96868', endColorstr='#00f96868',GradientType=1 ); /* IE6-9 */
    width: 200px;
}
  40%{
    opacity: 1;
  }
  60%{
    background: -moz-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f96868', endColorstr='#00f96868',GradientType=1 ); /* IE6-9 */
  }
  80%{
    opacity: 0;
    left: 745px;
    width: 200px;
  }
  81%{
    display: none;
    width: 0;
  }
  100%{
    display: none;
    width: 0;
  }
}
@keyframes grabg{
  0%{background-position:50% 0%}
  50%{background-position:50% 100%}
  100%{background-position:50% 0%}
}
@keyframes bl_side {
  0%{
    left:-70px;
    width: 70px;
    height: 2px;
  }
  50%{
    left:100%;
  }
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(2px,-2px);}
	25%	{transform:rotate(0.8deg)	translate(0px,2px);}
	37.5%	{transform:rotate(0.4deg)	translate(-2px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(2px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,2px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-2px,-2px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
@media screen and (min-width:1021px){
  .sp_mv{
    display: none;
  }
}
@media screen and (max-width:1020px){
  .inner{
    padding: 0 2%;
    width: 100%;
    margin: 0 auto;
  }
  .inner2{
    padding: 0 2%;
    width: 100%;
    margin: 0 auto;
  }
  .main_visual{
    display: none !important;
  }
  .sp_mv{
    display: block;
  }
}
@media screen and (max-width:980px){
  html{
    font-size: 16px;
  }
  /**** header main_visual ****/
  .logo{
    position: fixed;
    top:0;
    left: 2%;
    background: url("../img/logo_bg.jpg");
    box-shadow: 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67), 0 0 20px rgba(0,0,0,0.67);
    z-index: 9999;
  }
  .logo p{
    max-width: 70px;
    width: 100%;
    margin: 0 auto;
  }
  .logo p a{
    padding:7px 5px;
    display: block;
  }
  .catch {
    background: url("../img/catch_bg.png") no-repeat center top;
    padding-bottom: 16.5%;
    background-size: cover;
  }
  .catch .inner2 h1{
    font-size: 2rem;
    padding-top: 7%;
    width: 70%;
    margin: 0 auto;
  }
#pagetop a{
  color: #fff;
  position: fixed;
  bottom:5%;
  right:5%;
  transition:.5s;
  background: #24eaf9;
  z-index: 9999;
  width: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  box-shadow: 0 0 10px #00c0ff;
  letter-spacing: 0.1em;
}
#pagetop a::after{
  content: " ";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #24eaf9 transparent;
  border-radius: 2px;
  transition:.5s;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top:-30px;
  width: 0;
}
#pagetop a::before{
  content: " ";
  height: 32px;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top:-20px;
  width: 100%;
}
}
@media screen and (max-width:764px){
  html{
    font-size: 12px;
  }
  .logo{
    display: none;
  }
  /*** catch ***/
  .catch .inner2 h1{
    font-size: 2rem;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding: 5% 0;
    line-height: 2;
  }
  .blue_line_length_wrap{
    display: none;
  }
  .blue_line_side_wrap{
    width: 98%;
  }
  .blue_line_side{
    width: 100%;
  }
  .blue_line_side {
    left: 0;
  }
  .catch .blue_line_length_wrap {
    left:0;
    right: 0;
    margin: auto;
    top: 20%;
  }
  .catch .blue_line_side_wrap {
    left:0;
    right: 0;
    margin: auto;
  }
  /*** cont1 ***/
  .red_line {
    font-size: 1.75rem;
    line-height: 1.5;
		letter-spacing: 0.2em;
  }
  .red_line::before {
    content: " ";
    position: absolute;
    width: 90%;
    height: 4px;
    left: 0;
    right: 0;
    bottom: -21px;
    margin: auto;
  }
  .cont1::before {
    content: " ";
    display: none;
  }
  .cont1::after {
    display: none;
  }
  .red_line::after {
    content: " ";
    position: absolute;
    height: 4px;
    bottom: -21px;
    margin: auto;
    animation: sp_red_line 4s linear infinite;
  }
  .c1inner::after {
    display: none;
  }
  .cont1 ul {
    margin-top: 50px;
    padding: 5%;
    padding-top: 10%;
    background: url("../img/c1_sp_bg.png.jpg") no-repeat top center;
    background-size: cover;
  }
  .cont1 ul li{
    line-height: 1.5;
  }
  .cont1 ul li:nth-child(2),.cont1 ul li:nth-child(3),.cont1 ul li:nth-child(4),.cont1 ul li:nth-child(5){
    margin-left: 0;
  }
  .cont1 ul li span:nth-child(2) {
    padding-left: 5%;
    width: 93%;
  }
  .cont1 ul li span {
    vertical-align: baseline;
  }
  .c1inner .blue_line_side_wrap {
    display: none;
  }
  /**** cont2 ****/
  .cont2{
    margin-top: 2%;
  }
  .c2_inner_wrap {
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .c2_inner_wrap + .inner{
    padding: 0;
  }
  .cont2 .c2_inner_wrap2 .inner2{
    padding-bottom: 2%;
    width: 100%;
    animation: grabg 10s linear infinite;
    background: linear-gradient(0deg, rgba(1,7,61,0.4), rgba(61,1,52,0.4), rgba(61,1,1,0.4), rgba(1,61,56,0.4));
    background-size: auto;
    background-size: 600% 600%;
  }
  .cont2 h2 img{
    width: 80%;
  }
  .cont2 h2 + p{
    font-size: 1.25rem;
    margin-top: 3%;
  }
  .cont2 h2 + p::after {
    content: " ";
    display: none;
  }
  .cont2 .c2_inner_wrap{
    position: relative;
  }
  .cont2 .c2_inner_wrap2{
    background: url("../img/c2_img.png") no-repeat right -200px center;
  }
  .cont2 .c2_inner_wrap::after {
    content: " ";
    position: absolute;
    background: url("../img/arrow.png") no-repeat;
    width: 8%;
    padding-bottom:9.7%;
    background-size: cover;
    top: inherit;
    bottom: 3%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .c2_txt_wrap{
    padding-left: 0;
    font-size: 1.125rem;
    margin-top: 0;
    padding: 2%;
  }
  .cont2 .inner::before{
    display: none;
  }
  .c2_inner_wrap2::before,.c2_inner_wrap2::after {
    content: " ";
    display: none;
  }
  .cont2 .blue_line_side_wrap{
    display: none;
   /* left: 0;
    right: 0;
    margin: auto;
    width: 78.4%;
    bottom: -14%;*/
  }
  .c2txt{
    font-size: 1.75rem;
    line-height: 1.5;
  }
  /**** cont3 ****/
  .cont3{
    margin-top: 0%;
    padding-bottom: 5%;
  }
  .cont3 h2{
    padding-top: 5%;
    margin-bottom: 40px;
  }
  .cont3 h2:nth-of-type(2){
    padding-top: 5%;
    margin-bottom: 40px;
    line-height: 1.5;
    margin-top: 4%;
  }
  .cont3 p{
    line-height: 1.5;
    padding-left: 0;
    padding: 0 5%;
  }
  /**** bnr ****/
  .bnr{
    margin-top: 7%;
  }
  .bnr .inner{
    width: 90%;
    margin: 0 auto;
  }
  .bnr p a {
    display: block;
    box-shadow: 5px 5px 3px #000000;
  }
  /**** cont4 ****/
  .cont4{
    margin-top: 12%;
  }
	.cont4 .red_line {
		letter-spacing: 0;
  }
  .cont4 h2 + p{
    margin-top: 45px;
    line-height: 1.5;
  }
  .c4cap{
    margin-top: 5%;
    background: url("../img/c4_logo.png") no-repeat center 0px;
    -webkit-background-size: 70%;
    background-size: 70%;
    margin-bottom: 5%;
  }
  .c4cap h3{
    margin: 0 auto;
    padding:5% 3%;
    box-shadow: 4px 4px 3px #000;
    font-size: 1.5rem;
  }
  .c4cap p{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
  }
  .c4cap + .inner2 p a {
    width: 80%;
    margin: 0 auto;
    font-size: 1.5rem;
    box-shadow: 0 0 12px rgba(106,2,2,0.67),0 0 12px rgba(106,2,2,0.67),0 0 12px rgba(106,2,2,0.67),0 0 12px rgba(106,2,2,0.67),0 0 12px rgba(106,2,2,0.67) ,0 0 10px rgba(106,2,2,0.67)inset,0 0 10px rgba(106,2,2,0.67)inset,0 0 10px rgba(106,2,2,0.67)inset;
    padding:14px 0;
  }
  /**** form ****/
  .form {
    margin-top: 8%;
  }
  .form h2{
    font-size: 1.75rem;
    padding: 20px 0;
  }
  .form_inner{
    padding:5% 2% 1%;
  }
  .form_inner p {
    font-size: 1.25rem;
    margin-bottom:20px;
    letter-spacing: 0.1em;
  }
  input.send{
    box-shadow: 0 0 10px rgba(255,255,255,0.67),0 0 10px rgba(255,255,255,0.67),0 0 10px rgba(255,255,255,0.67),0 0 10px rgba(255,255,255,0.67) inset;
    margin-top: 2%;
  }
  .copy{
    padding: 12px 10px;
  }
	/**** result ****/
	.cont_result{
		padding-top: 7%;
		margin-top: 7%;
	}
	.cont_result h2 + p{
		margin-top: 12%;
	}
	.crcap{
		margin-bottom: 7%;
		margin-top: 7%;
	}
	.cont_result .dev_li{
		max-width: 350px;
		width:48.5%;
		float: left;
		margin-top: 7%;
	}
	.cont_result .dev_li:nth-child(3n+2){
		margin: inherit;
		margin-top: 7%;
	}
	.cont_result .dev_li:nth-child(odd){
		margin-right: 3%;
	}
	.hover_wrap:hover {
    box-shadow: inherit;
	}
	.hover_wrap .mask {
    opacity: 1;
		position: inherit;
		padding: 2%;
		background: #0b3363;
	}
	.hover_wrap:hover .mask{
		padding-top: 2%;
		padding-bottom: 2%;
	}
	.hover_wrap .mask .site_url {
		opacity: 1;
		padding-bottom: 2%;
		margin-bottom: 5%;
	}
	.hover_wrap:hover .mask .site_url{
		position: inherit;
		padding-bottom: 2%;
	}
	.site_url{
		position: inherit;
	}
	.site_url p{
		margin-top: 10%;
		max-width: 200px;
		width: 100%;
	}
	.site_url p a{
		padding: 10px;
		font-size: 1.25rem;
	}
}
@keyframes sp_red_line{
  0%{
    opacity: 0;
    left: 0;
    background: -moz-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f96868', endColorstr='#00f96868',GradientType=1 ); /* IE6-9 */
    width: 15%;
  }
  5%{
    opacity: 0;
  }
  20%{
    opacity: 0.2;
  }
  50%{
    opacity: 1;
  }
  60%{
    background: -moz-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(249,104,104,0) 0%, rgba(249,104,104,1) 50%, rgba(249,104,104,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f96868', endColorstr='#00f96868',GradientType=1 ); /* IE6-9 */
  }
  80%{
    opacity: 0;
    left: 80%;
    width: 15%;
  }
  81%{
    display: none;
    width: 0;
  }
  100%{
    display: none;
    width: 0;
  }
}
@media screen and (max-width:480px){
	/**** result ****/
	.cont_result .dev_li{
		max-width: 350px;
		width:100%;
		float: inherit;
		margin-top: 12%;
	}
	.cont_result .dev_li:nth-child(3n+2){
		margin: inherit;
		margin-top: 12%;
	}
	.cont_result .dev_li:nth-child(odd),.cont_result .dev_li,.cont_result .dev_li:nth-child(3n+2) {
		margin: 12% auto 0;
	}
.result_btn p{
	text-align: center;
	font-size: 1rem;
	padding: 3.2% 2.2%;
}
}
@media screen and (max-width:470px){
   .catch .inner2 h1{
    font-size: 1.375rem;
    width: 90%;
}
}
@media screen and (max-width:320px){
  html{
    font-size: 10px;
  }
  .catch .inner2 h1{
    font-size: 1.25rem;
    width: 90%;
  }
}