@charset "utf-8";
/* CSS Document */

main .content {
  max-width: 1280px;
  margin: 0 auto;
}
main img {
  width: 100%;
}
main .slide {
  font-size: 0px;
  margin-bottom: 0.6rem;
  height: 705px;
  overflow: hidden;
}
main .slide li {
  font-size: 0px;
}
main .two {
  font-size: 0px;
}
main .two a {
  width: 49.7%;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
main .two video {
  transition-duration: 0.3s;
  width: 100%;
}
main .two video:hover {
  opacity: 0.7;
}
main .three {
  font-size: 0px;
}
main .three a {
  width: 32.969%;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
main .three video {
  width: 100.6%;
  margin-left: -0.3%;
  transition-duration: 0.3s;
}
main .three video:hover {
  opacity: 0.7;
}

/*---------------------------------------------------------------
横幅768px～1000pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1280px) {
  main .slide {
    height: 55vw;
  }
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  main .slide {
    margin-bottom: 0.3rem;
    height: 54vw;
  }
  main .two a {
    margin-bottom: 0.3rem;
  }

  main .three a {
    width: 49.7%;
    margin-bottom: 0.3rem;
  }
  main .three_1 a:nth-of-type(2) {
    order: 3;
    width: 100%;
  }
  main .three_1 a:nth-of-type(3) {
    order: 2;
  }
  main .three video {
    width: 101%;
    margin-left: -0.5%;
  }
  main .three_2 a:nth-of-type(3) {
    order: 4;
  }
  main .three_2 a:nth-of-type(4) {
    order: 6;
  }
  main .three_2 a:nth-of-type(5) {
    order: 5;
  }

  main .three_2 a:nth-of-type(6) {
    order: 3;
  }
  main .two_2 a {
    width: 100%;
  }
  main .two_2 a:nth-of-type(2) {
    order: 1;
  }
  main .two_2 a:nth-of-type(1) {
    order: 2;
  }
}