@charset "UTF-8";

.modal-video{background:rgba(0,0,0,0.7)!important;}
#block-video .list-video{display:flex;flex-wrap:wrap;gap:60px 40px;margin-top:60px;margin-bottom:60px;}
#block-video .list-video > li{width:calc((100% - 80px) / 3);}
#block-video .list-video > li a{display:block;cursor:pointer;}
#block-video .list-video > li .category{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px;margin-bottom:10px;}
#block-video .list-video > li .category span{display:inline-block;white-space:nowrap;font-size:12px;background:#f2f2f2;padding:2px 10px 0;letter-spacing:0;border-radius:2px;}
#block-video .list-video > li .category span::before{content:"#";}
#block-video .list-video > li .img{display:block;width:100%;height:0;padding-bottom:56.5%;position:relative;overflow:hidden;}
#block-video .list-video > li .img::before{content:"";display:block;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
#block-video .list-video > li .img::after{content:"";display:block;width:80px;height:80px;background:url(/img/video/play.png) no-repeat;background-size:contain;position:absolute;top:50%;left:50%;margin:-40px 0 0 -40px;z-index:3;transition:.2s ease;}
#block-video .list-video > li a:hover .img::after{transform:scale(1.1);}
#block-video .list-video > li .img img{width:100%;height:100%;display:block;position:absolute;top:0;left:0;object-fit:cover;z-index:1;}
#block-video .list-video > li .ttl{font-size:18px;font-weight:bold;margin:20px auto 5px;}
#block-video .list-video > li .inner{font-size:14px;}

@media (max-width: 850px) {
  #block-video .list-video{gap:40px 20px;}
  #block-video .list-video > li{width:calc((100% - 40px) / 3);}
  #block-video .list-video > li .category span{font-size:11px;}
}
@media (max-width: 640px) {
  #block-video .list-video{gap:30px 20px;margin-top:40px;margin-bottom:40px;}
  #block-video .list-video > li{width:calc((100% - 20px) / 2);}
  #block-video .list-video > li .category span{font-size:10px;padding:1px 8px 0;}
  #block-video .list-video > li .img::after{width:50px;height:50px;margin:-25px 0 0 -25px;}
  #block-video .list-video > li .ttl{font-size:15px;margin-top:12px;}
  #block-video .list-video > li .inner{font-size:12px;}
}