@charset "utf-8";

/* -------------------------------------------------- */
/* #block-video */
/* -------------------------------------------------- */
#block-video{position:relative;padding-bottom:18%;}
#block-video::after{content:"";display:block;width:100%;height:0;padding-bottom:20%;background:url(/img/concept/back.png) no-repeat top center;background-size:100% auto;position:absolute;left:0;bottom:0;z-index:2;}
#block-video .container2{padding-bottom:0;}
#block-video .container2::before{content:"";display:block;width:190px;height:0;padding-bottom:15%;background:url(/img/concept/img01.png) no-repeat center bottom;background-size:100% auto;position:absolute;left:100px;bottom:-150px;z-index:3;max-width:15%;}
#block-video .container2::after{content:"";display:block;width:198px;height:0;padding-bottom:14%;background:url(/img/concept/img02.png) no-repeat center bottom;background-size:100% auto;position:absolute;right:100px;bottom:-150px;z-index:3;max-width:15%;}

#block-video .video{width:720px;height:405px;max-width:100%;margin:auto;position:relative;}
#block-video .video video,
#block-video .video iframe{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
/*
#block-video .video::before{content:"";display:block;width:100%;height:100%;background:url(/img/concept/movie.png) no-repeat center center rgba(0,0,0,0.3);background-size:79px auto;position:absolute;left:0;top:0;z-index:3;cursor:pointer;}
#block-video .video.active::before{display:none;}
*/
#block-video .video + .lead{max-width:720px;margin:auto}

/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:1299px){
  #block-video .container2::before{left:2%;bottom:-12vw;}
  #block-video .container2::after{right:2%;bottom:-12vw;}

}
@media screen and (min-width:1px) and (max-width:999px){

}
@media screen and (min-width:1px) and (max-width:869px){
  #block-video .video{width:100%;height:0;padding-bottom:56.3%;}
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:599px){

  #block-video{padding-bottom:23%;}
  #block-video::after{padding-bottom:25%;background-size:150% auto;}

}