/*=============================================================
 tools
=============================================================*/
#video .ttl-box h1 {
  width: 423px;
}
@media only screen and (max-width: 1400px) {
  #video .ttl-box h1 {
    width: 30.2142857143vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .ttl-box h1 {
    width: 56.5625vw;
  }
}
#video .videos-list {
  margin-bottom: 44px;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list {
    margin-bottom: 3.1428571429vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list {
    margin-bottom: 6.875vw;
  }
}
#video .videos-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul {
    gap: 1.5714285714vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.4375vw 1.5625vw;
  }
}
#video .videos-list ul li {
  position: relative;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: url("../img/video/frame_btm-pc.png") no-repeat bottom center, url("../img/video/frame_top-pc.png") no-repeat top center;
  background-size: 100% auto;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul li {
    border-bottom-width: 0.4285714286vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li {
    border-radius: 1.5625vw;
  }
}
#video .videos-list ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: calc(100% - 40px);
  background: url("../img/video/frame_rp-pc.png") repeat-y;
  background-size: 100% auto;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul li::before {
    height: calc(100% - 2.8571428571vw);
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li::before {
    height: calc(100% - 5.46875vw);
  }
}
#video .videos-list ul li a {
  position: relative;
  display: block;
  padding: 20px;
  color: #363636;
  text-decoration: none;
  transition: all 0.25s ease;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul li a {
    padding: 1.4285714286vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li a {
    padding: 3.125vw;
  }
}
#video .videos-list ul li a .thumb {
  position: relative;
  margin-bottom: 12px;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul li a .thumb {
    margin-bottom: 0.8571428571vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li a .thumb {
    margin-bottom: 1.25vw;
  }
}
#video .videos-list ul li a .thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background: url("../img/video/play.svg") no-repeat top center;
  background-size: contain;
  transform-origin: 0 0;
  transition: all 0.4s ease;
}
@media only screen and (max-width: 1400px) {
  #video .videos-list ul li a .thumb::after {
    width: 4.8571428571vw;
    height: 4.8571428571vw;
  }
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li a .thumb::after {
    width: 9.84375vw;
    height: 9.84375vw;
  }
}
#video .videos-list ul li a p {
  position: relative;
  font-size: 18px;
  line-height: 1.2;
  color: #363636;
  display: block;
  flex-grow: 1;
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li a p {
    font-size: 3.125vw;
  }
}
#video .videos-list ul li a:hover .thumb::after {
  transform: scale(1.5) translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
  #video .videos-list ul li a:hover .thumb::after {
    transform: translate(-50%, -50%);
    mix-blend-mode: unset;
  }
}