@charset "utf-8";

#wrap .section#section0{clear:both; margin:0px 0 0 0; padding:0; position: relative; width:100%; height:100%;}
#wrap .section#section0 .container{position:relative; width:100%; height:100%; margin:0; padding:0;}
.section .fp-tableCell{}

#wrap .pc_video{display:block;}
#wrap .mobile_video{display:none;}

#wrap .visual{ position: relative; top:0; width: 100%;height:100vh; background:#e9f8fe; background: url(../img/s_img/main_visual_bg.png) no-repeat center 0px; -webkit-background-size:cover !important; background-size: cover; }
#wrap .visual .bg{position: absolute;z-index: 2;width: 100%;height: 100%;  }

#wrap .visual .video{position: relative;z-index: 1; left: 0;width: 100%;height: 100%;overflow: hidden; padding-top:0px;}
#wrap .visual .video .box_v{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: 100%;} 
#wrap .visual .video .box_v iframe{position: absolute;z-index: 1;top: -5%; left: -5%; width: 110%; height: 110%;display: none;}
#wrap .visual .video .box_v figure{position: absolute;z-index: 1; margin:0; padding:0; width: 100%; height: 100%;}
#wrap .visual .video .box_v figure video{width: 100%;height: 100%; margin:0; padding:0; object-fit: cover; object-position: center;}

#wrap .visual .video .box_v figure video.mobile_video{width : 100%;}
#wrap .visual .video .box_v figure .ctrl{position:absolute; top:590px; left:0; width:100%; text-align:center;  z-index:9999;}
#wrap .visual .video .box_v figure .ctrl button{display:inline-block; overflow:hidden; width:16px; height:16px; background:url(../img/s_img/mainvisual_ctrl.png) no-repeat; font-size:3px; color:transparent;}
#wrap .visual .video .box_v figure .ctrl button.pause{background-position:2px 0; }
#wrap .visual .video .box_v figure .ctrl button.play{background-position:-24px 0;}
 
 
#wrap .visual .fix_txt{position: absolute;top:73%;left: 0;width: 100%;z-index:90;}
#wrap .visual .fix_txt h3.move_ef{font-size:48px;font-weight:400; padding:10px 0 0 0px; margin:0; color: #fff; font-weight:600;letter-spacing:-0.03em; line-height:1.3; text-align: center; text-shadow:0px 0px 5px rgba(0,0,0,0.22);}
#wrap .visual .fix_txt h3.move_ef span.pc_cut{display:block;}
#wrap .visual .fix_txt h4.move_ef{text-align: center; padding-top:18px; font-size:22px; line-height:1.5;font-weight:400; color: #fff; letter-spacing:-0.03em;text-shadow:0px 0px 5px rgba(0,0,0,0.22);}


.home_box{position: absolute; z-index:99; top:73%; text-align:center; width: 100%; }
.home_box h3{ font-size:24px;font-weight:400; margin:0 auto 20px auto; max-width:100%; margin-right:18.75%; color: #fff; font-weight:300;letter-spacing:0em; line-height:1.1; text-align: right; padding-right: 0px; }
.home_box p.txt{ font-size:36px; line-height:1.3;margin:0 auto; max-width:100%; margin-right:18.75%; font-weight:500; color: #fff; letter-spacing:0em;text-align: right; padding-right:0px;}
.home_box p.btn{font-size:18px; font-weight:400;width: 1200px;margin: 20px auto ; height:40px; line-height:38px;color:#fff; letter-spacing:0em;width:200px; margin:0 auto; margin-top:60px;  border:2px solid #fff; text-align:center;}


.home_box h3 span.pc_cut{display:block;}
.home_box p.txt span.pc_cut{display:block;}

.home_box h3.black{color:#111;}
.home_box p.black{color:#111;}
.home_box p.btn{color:#fff;}
.home_box p.btn a{color:#fff;}


.main_scroll_box { position:absolute; right:50px; width:51px;  height: 108px;   top:73%; margin: auto; text-align: center; z-index: 9999; opacity: 1; opacity:1; }
.main_scroll_box h6 { text-transform: uppercase; font-size: 12px; line-height: 100%; letter-spacing: 0; color: #fff; }
.main_scroll { width: 13px; height: 73px; margin: auto; margin-top: 14px; position: relative; overflow: hidden; }
.main_scroll span { position: absolute; left: 0; right: 0; margin: auto; top: -100%; width: 1px; height: 100%; background-color: #fff; }
.main_scroll:after { position: absolute; content:''; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); left: 0; bottom: 2px; right: 0; margin: auto; }
.scroll_circle { content:''; position: absolute; left: 0; right: 0; bottom: -12px; margin: auto; width: 45px; height: 45px; z-index: -1; }
.scroll_circle span { content:''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #fff; width: 100%; height: 100%; border-radius: 100%; opacity: 0.2; }


#wrap .visual .btn_box{position: absolute;bottom:0;left: 0;z-index: 1000;width: 100%;z-index: 300;}
#wrap .visual .btn_box ul.btn{width: 540px;margin: 0 auto; padding:0;}
#wrap .visual .btn_box ul.btn:after{display: block;content: '';clear: both;}
#wrap .visual .btn_box ul.btn li{float: left;width: 270px;height: 80px; margin:0; padding:0;}
#wrap .visual .btn_box ul.btn li a{display: block;width: 100%;margin-top: 16px;height: 64px;text-align: center;font-size: 20px;color:#fff;font-weight: normal;letter-spacing: -1px;line-height: 64px;background: #333;}
#wrap .visual .btn_box ul.btn li.on a{background:#00A651; }
#wrap .visual .btn_box ul.btn li a:hover{height: 80px;margin-top: 0;font-size: 25px; font-weight:500;line-height: 80px;letter-spacing: 0;}

#wrap .visual .scroll_down{position:absolute; bottom:100px; z-index: 200;width: 100%;}
#wrap .visual .scroll_down p{color: #fff;text-align: center;padding-bottom: 55px;font-size: 13px;font-weight: 300;letter-spacing: 0.5px; background: url(../img/s_img/home_scroll_down.png) no-repeat center 100%;}


.move_ef{transition: all 0.25s ease 0s; -webkit-transition: all 0.25s ease 0s;}
.hidden {position:absolute; left:-10000px;}
.sp{display:inline-block; overflow:hidden; width:5px;height:5px;line-height:99em;vertical-align:top}





@media all and (max-width:1850px){

  .home_box h3{ margin-right:12%; }
  .home_box p.txt{ margin-right:12%;}

  
  } /* end */
  
  



@media (max-width: 1600px) {


#wrap .visual{height: auto; background: none !important; margin:0px 0 0 0 !important; padding:0 !important;  }
#wrap .visual .video .box figure{position: absolute;z-index: 1;top:0px; left: 0; width: 100%; height: 100%; margin:0; padding:0;}
#wrap .visual .video .box figure video{width: 100%;height: 100%; margin:0; padding:0;}
#wrap .visual .bg{display: none;}
#wrap .visual .video .box .bg{display: block;}

#wrap .visual .fix_txt h3.move_ef{font-size:42px;}
#wrap .visual .fix_txt h4.move_ef{font-size:20px;}


.home_box h3{ margin-right:8%; }
.home_box p.txt{ margin-right:8%;}




} /* 1600px End */

@media (max-width: 1400px) {


.section#section0 .fp-tableCell{position: relative;width: 100%;height: 900px;}
#wrap .visual{height: auto; margin:0px 0 0 0 !important; padding:0 !important;  }


} /* 1400px End */



@media (max-width: 1300px) {


.section#section0 .fp-tableCell{position: relative;width: 100%;height: 100% !important;}
#wrap .visual{height: auto; margin:0px 0 0 0 !important; padding:0 !important;  }
#wrap .visual .video{position:relative;  width: 135%;height: 135%; left: -25%;top:-25%; }



} /* 1400px End */



@media (max-width: 1199px) {

.section#section0{position: relative; width:100%; height: auto !important; margin:0; padding:0;}
.section#section0 .container{position:relative; width:100%; height:auto;}

#wrap .visual{height: auto; margin:0px 0 0 0 !important; padding:0 !important;  }
#wrap .visual .video{position:relative;  width: 125%;height: 130%; left: -25%;top:0px; }
#wrap .visual .video .box figure{position: absolute;z-index: 1;top:0px; left: 0; width: 100%; height: 100%; margin:0; padding:0;}
#wrap .visual .video .box figure video{width: 100%;height: 100%; margin:0; padding:0;}
#wrap .visual .bg{display: none;}
#wrap .visual .video .box .bg{display: block;}


#wrap .visual  .scroll_down{display:none;}
#wrap .visual  .scroll_down p{display:none;}
#wrap #content .section#section0 .scroll_down{display:none}

#wrap .visual .fix_txt h3.move_ef{font-size:38px;}
#wrap .visual .fix_txt h3.move_ef span.pc_cut{display:block;}
#wrap .visual .fix_txt h4.move_ef{ display:block !important;font-size:18px; }


.home_box{top:70%; }
.home_box h3{ font-size:19px;  }
.home_box p.txt{font-size:29px; }



}/* 1199px End*/




@media (max-width: 991px) {

/*991px section0 */

#wrap .visual .video{}
#wrap .visual {
  height: auto;
  margin: 0px 0 0 0 !important;
  padding: 0 !important;
}
#wrap .visual .fix_txt{top:28%;}
#wrap .visual .fix_txt h3.move_ef{font-size:34px;}
#wrap .visual .fix_txt h4.move_ef{font-size:18px; }
#wrap .visual .btn_box{position: absolute;bottom:0;left: 0;z-index: 1000;width: 100%;z-index: 300;}
#wrap .visual .btn_box ul.btn{width: 540px;margin: 0 auto; padding:0;}
#wrap .visual .btn_box ul.btn:after{display: block;content: '';clear: both;}
#wrap .visual .btn_box ul.btn li{float: left;width: 270px;height: 60px; margin:0; padding:0;}
#wrap .visual .btn_box ul.btn li a{display: block;width: 100%;margin-top: 6px;height: 54px;text-align: center;font-size: 18px;color:#fff;font-weight: normal;letter-spacing: -1px;line-height:54px;background: #333;}
#wrap .visual .btn_box ul.btn li.on a{background:#00A651; }
#wrap .visual .btn_box ul.btn li a:hover{height:60px;margin-top: 0;font-size: 22px; font-weight:500;line-height: 60px;letter-spacing: 0;}


.home_box{top:20vh;   }
.home_box h3{ font-size:16px; padding-right:0; }
.home_box p.txt{font-size:24px; padding-right:0; }


}/* 991px End*/


@media (max-width: 768px) {

#wrap .pc_video{display:none;}
#wrap .mobile_video{display:block; }
#wrap .visual{  -webkit-background-size:cover !important; background-size: cover; }

#wrap .visual .video .box_v figure video {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: none;
  object-position: top;
}

#wrap .visual{background:liner-gradient(to bottom,#3b98d2, #91cde6);}
#wrap .section#section0{position: relative; width:100%; height:100%;}
#wrap .section#section0 .container{position:relative; width:100%; height:100%;}

#wrap .section#section0{  height:720px;}
/* #wrap .visual{height:720px; transition-duration: 4s; background:linear-gradient(to bottom,#3b98d2, #91cde6) !important;background-size:100%; margin:0px 0 0 0 !important; padding:0 !important;} */

#wrap .visual{height:720px; transition-duration: 4s; background: url(../img/s_img/main_visual_bg_m.jpg) no-repeat center -25px !important; background-size:100%; margin:0px 0 0 0 !important; padding:0 !important;
  transform: scale(1);
  animation: scaleImage 5s ease-out forwards;

}
@keyframes scaleImage {
  100% {
      transform: scale(1);
  }

}



@keyframes fadeInText {
  100% {
      opacity: 1;
  }

}
/* #wrap .visual{height:720px; transition-duration: 4s;  
  background-image: linear-gradient(rgba(256, 256, 256, 0.277), rgba(256, 256, 256, 0.25)), 
  url("../img/s_img/main_visual_bg_m.jpg") !important; background-position : center 0% !important;
 background-size:100%; margin:0px 0 0 0 !important; padding:0 !important;}
 */


#wrap .visual .video{position:relative;  width: 100%;height: 100%; left:0%;top:0px; transition:all 0.3s 0.1s;}

#wrap .visual .btn_box ul.btn{width:100%;margin: 0 auto;}
#wrap .visual .btn_box ul.btn:after{display: block;content: '';clear: both;}
#wrap .visual .btn_box ul.btn li{float: left;width:50%;height: 60px;}
#wrap .visual .btn_box ul.btn li a{display: block;width: 100%;margin-top: 16px;height: 44px;text-align: center;font-size:18px;color:#fff;font-weight: normal;letter-spacing: -1px;line-height: 44px;background: #333;}
#wrap .visual .btn_box ul.btn li.on a{background:#00A651; }
#wrap .visual .btn_box ul.btn li a:hover{height:60px;margin-top: 0;font-size:20px; font-weight:500;line-height:60px;letter-spacing: 0;}



.fix_txt { top:20%;}
#wrap .visual .fix_txt { top: 0%;}
.home_box p.txt {
  margin-right: auto;
}
.home_box h3{text-align:center; font-size:3.5vw; padding-right:0; margin:0 auto 20px auto; max-width:100%;}
.home_box p.txt{text-align:center;font-size:4.2vw; padding-right:0;max-width:100%;}
.home_box { top:45vh;}

}/* 768px End*/




@media all and ( max-width: 480px ){

  .home_box h3{text-align:center; font-size:3.5vw; padding-right:0; margin:0 auto 20px auto; max-width:100%;}
  .home_box p.txt{text-align:center;font-size:4.2vw; padding-right:0;max-width:100%;}
  .home_box { top:45vh;}

} /* end */