@charset "UTF-8";

/* intro tap */
.intro_tab{overflow: hidden; position: absolute; left: 50%; bottom: 40px; z-index: 5; width: 100%; max-width: 1200px; padding: 0 70px; transform: translateX(-50%); -webkit-transform: translateX(-50%); background-color:linear-gradient(to top,rgba(0,0,0,0.1), rgba(0,0,0,0.9)); }
.intro_tab .tv_btn{
    
    background-image: url(../img/video_play_icon.png); 
    background-position: 55% 50%; 
    background-color: rgba(10,50,84,.5);
    border-color: rgba(255,255,255,.3);
}
.intro_tab .tv_btn.video_stop{
    overflow: hidden; 
    float: left; 
    width: 65px; 
    height: 65px; 
    background: url(../img/video_stop_icon.png) 50% 50% no-repeat #00aeef; 
    border: 1px solid #00aeef; 
    border-radius: 50%; 
    font-size: 0; 
    text-indent: -9999px;
}
.intro_tab .slide_tab{float: left; width: 225px; height: 65px;}
.intro_tab .tv_btn + .slide_tab{margin-left: 20px;}
.intro_tab .slide_tab + .tv_btn{margin-left: 20px;}
.intro_tab .slide_btn{display: none; position: relative; width: 60%; height: 100%; padding-left: 95px; border: 1px solid rgba(255,255,255,.3); border-radius: 32px; background-color: rgba(10,50,84,.5); font-size: 15px; color: #fff !important; line-height: 65px; letter-spacing: 0;}
.video_active .slide_btn{display: none;}
.intro_tab .slide_btn::before{content: ""; position: absolute; left: 20px; top: 23px; width: 24px; height: 19px; background: url(../img/slide_menu_icon.png) 0 0 no-repeat;}
.intro_tab .navigation{ width: 100%; height: 100%; padding-top: 18px; border-radius: 32px; background-color: #00aeef; text-align: center; box-sizing: border-box;}
.video_active .navigation{display:block;}
.intro_tab .navigation .navi_btn{overflow: hidden; display: inline-block; width: 31px; height: 20px; font-size: 0; text-indent: -9999px; vertical-align: middle;}
.intro_tab .navigation .prev{background: url(../img/slide_arrow_prev.png) 0 50% no-repeat;}
.intro_tab .navigation .next{background: url(../img/slide_arrow_next.png) 0 50% no-repeat;}
.intro_tab .navigation .progress{display: inline-block; position: relative; width: 43px; height: 28px; margin: 0 30px; vertical-align: middle;}
.intro_tab .navigation .progress::before{content: ""; position: absolute; left: 3px; top: 15px; width: 37px; height: 1px; background-color: #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); opacity: .5;}
.intro_tab .navigation .progress span{position: absolute; font-size: 16px; color: #fff; line-height: 1;}
.intro_tab .navigation .progress .num{left: 0; top: 0;}
.intro_tab .navigation .progress .max{right: 0; bottom: 0; opacity: .5;}
.intro_tab .full_video_btn{position: absolute; right: 70px; bottom: 28px; z-index: 13; padding-left: 30px; font-weight: 600; font-size: 18px; color: #fff !important; line-height: 1;}
.intro_tab .full_video_btn::before{content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; background: url(../img/ico_full_video.png) 0 0 no-repeat;}
.intro_tab .barogagi{
    display:block;
    height: 100%; 
    position:absolute;
    width:15%;
    padding-left: 0px; 
    border: 1px solid rgba(255,255,255,.3); 
    border-radius: 32px; 
    background-color: rgba(10,50,84,.5); 
    font-size:18px; 
    color: #fff !important; 
    line-height: 65px; 
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    bottom:0;
    right:70px;
}
.intro_tab.active .slide_btn{
    display:none;
}
.intro_tab.active .navigation{
    display:block;
}
#fullVideoBtn{
    display:none;
}

.se0 .main_video_wrap {
   z-index: -1;
}

@media all and (min-width:320px) and (max-width:700px){
    #wrap .container .section.se0 .scroll{
        display:none;
    }
    
  .intro_tab{overflow:visible; position: absolute; left: 50%; bottom: 50px; z-index: 5; width: 100%; max-width: 100%; padding: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); margin:0 auto;}
  .intro_tab .tv_btn{overflow: hidden; float: left; width: 35px; height: 35px; background: url(../img/video_stop_icon.png) 50% 50% no-repeat #00aeef; border: 1px solid #00aeef; border-radius: 50%; font-size: 0; text-indent: -9999px; margin-left:10px;}
  .intro_tab .tv_btn.video_stop{background-image: url(../img/video_play_icon.png); background-position: 55% 50%; background-color: rgba(10,50,84,.5); border-color: rgba(255,255,255,.3);}
  .intro_tab .slide_tab{float: left; width: 180px; height: 35px;}
  .intro_tab .tv_btn + .slide_tab{margin-left: 10px;}
  .intro_tab .tv_btn {
    background-image: url(../img/video_play_icon.png);
    background-position: 55% 50%;
    background-color: rgba(10,50,84,.5);
    border-color: rgba(255,255,255,.3);
}
.intro_tab .tv_btn.video_stop {
    overflow: hidden;
    float: left;
    width:35px;
    height:35px;
    background: url(../img/video_stop_icon.png) 50% 50% no-repeat #00aeef;
    border: 1px solid #00aeef;
    border-radius: 50%;
    font-size: 0;
    text-indent: -9999px;
}
 
  .intro_tab .slide_tab + .tv_btn{margin-left: 10px;}
  .intro_tab .slide_btn{display: none; position: relative; width: 55%; height: 100%; padding-left: 40px; border: 1px solid rgba(255,255,255,.3); border-radius: 32px; background-color: rgba(10,50,84,.5); font-size: 13px; color: #fff !important; line-height: 35px; letter-spacing: 0;}
  .intro_tab .slide_btn::before{content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 19px; background: url(../img/slide_menu_icon.png) 0 0/100% no-repeat;}
  .intro_tab .navigation{width: 80%; height: 100%; padding-top: 2px; border-radius: 32px; background-color: #00aeef; text-align: center; box-sizing: border-box; margin-left:10px;}
  .intro_tab .navigation .navi_btn{overflow: hidden; display: inline-block; width: 31px; height: 20px; font-size: 0; text-indent: -9999px; vertical-align: middle;}
  .intro_tab .navigation .prev{background: url(../img/slide_arrow_prev.png) 0 50% no-repeat;}
  .intro_tab .navigation .next{background: url(../img/slide_arrow_next.png) 0 50% no-repeat;}
  .intro_tab .navigation .progress{display: inline-block; position: relative; width: 43px; height: 28px; margin: 0 10px; vertical-align: middle;}
  .intro_tab .navigation .progress::before{content: ""; position: absolute; left: 3px; top: 15px; width: 37px; height: 1px; background-color: #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); opacity: .5;}
  .intro_tab .navigation .progress span{position: absolute; font-size: 16px; color: #fff; line-height: 1;}
  .intro_tab .navigation .progress .num{left: 0; top: 0;}
  .intro_tab .navigation .progress .max{right: 0; bottom: 0; opacity: .5;}
  .intro_tab .full_video_btn{position: absolute; right: 50%; bottom: -25px; z-index: 13; padding-left: 30px; font-weight: 600; font-size: 18px; color: #fff !important; line-height: 1; transform: translatex(50%);}
  .intro_tab .full_video_btn::before{content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; background: url(../img/ico_full_video.png) 0 0 no-repeat;}
  .intro_tab .barogagi{right:10px; font-size:13px; width:35%; line-height: 35px; }
  /* intro tab */
}