@charset "utf-8";
.topPage .header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.topPage .header__logo {
  margin: 58px 0 0 77px;
}
.topMainVisual h2 {
  position: absolute;
  top: 604px;
  left: 69px;
  z-index: 2;
  width: min(85vw, 1482px);
}
.topMainVisual h2 img {
  width: 100%;
}
.mainVisual__slider {
  width: 77vw;
  margin: 0 0 0 auto;
}
.mainVisual__slider img {
  height: 100%;
}
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-pointer-events {
  height: min(72vw, 861px);
}
.about {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  margin-top: calc(15vw - 9px);
}
.about h3 {
  font-size: min(7vw, 100px);
  position: absolute;
  top: -73px;
  left: -38px;
  font-weight: bold;
  color: #000;
}
.about__contents {
  display: flex;
}
.about__contentsTextArea {
  padding: 42px 17px 0 100px;
}
.about_contentsTextAreaTit {
  font-weight: bold;
  font-size: min(3vw, 28px);
}
.about_contentsTextAreaText {
  margin-top: 30px;
  font-size: min(2.5vw, 24px);
}
.about__contents--right {
  flex-direction: row-reverse;
  margin-top: -44px;
}
.about__contents--right .about__contentsTextArea {
  padding: 107px 53px 0 20px;
}
.select {
  margin-top: 11vw;
}
.select h3 {
  text-align: center;
  font-size: 100px;
  font-size: min(7vw, 100px);
}
.select__contents {
  display: flex;
  justify-content: center;
  z-index: 2;
  position: relative;
}
.select__contentsBox {
  margin: 59px 24px 0;
}
.select__contentsLink {
  position: relative;
  display: block;
}
.select__contentsLink img {
  width: 100%;
}
.select__contentsLink span {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(50, 50, 50, 0.6);
  color: #fff;
  font-weight: normal;
  width: 100%;
  text-align: center;
  padding: 17px 15px;
  font-size: min(3vw, 28px);
}
.select__movie {
  background-color: #cfd6d9;
  padding: 216px 0 180px;
  text-align: center;
  position: relative;
  top: calc(-6vw - 9px);
  z-index: 1;
}
.select__movie video {
  width: min(100% - 48px, 1200px);
}

/* tablet
---------------------------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1330px) {
  .topPage .header__logo {
    margin: 58px 0 0 3vw;
    width: 43vw;
  }
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .topMainVisual h2 {
    width: 61vw;
    top: 50vw;
  }
}
@media screen and (min-width:768px) and (max-width:1630px) {
  .about h3 {
    left: 2vw;
    top: -5vw;
  }
}
@media screen and (min-width:768px) and (max-width:1380px) {
  .about__contentsImgArea {
    width: 50%;
  }
  .about__contentsImgArea img {
    width: 100%;
  }
  .about__contentsTextArea {
    width: 50%;
    padding: 42px 17px 0 24px;
  }
  .about__contents--right {
    margin-top: 20px;
  }
  .about__contents--right .about__contentsTextArea {
    padding: 20px 24px 0 20px;
  }
}

/* SP
---------------------------------------------------------------------------------*/
@media screen and (max-width: 767px){
  .topPage .header__logo {
    margin: 0;
    width: 73vw;
  }
  .topMainVisual h2 {
    width: 74vw;
    top: 74vw;
    left: 1vw;
  }
  .mainVisual__slider {
    width: 100%;
  }
  .infinite-slider .swiper-slide {
    margin-left: 10px;
  }
  .about {
    max-width: auto;
    margin-top: 31vw;
  }
  .about h3 {
    font-size: 10vw;
    top: -7vw;
    left: 3vw;
  }
  .about__contents {
    display: block;
  }
  .about__contentsImgArea {
    width: 92vw;
    margin: 0 0 0 auto;
  }
  .about__contentsTextArea {
    padding: 0 3vw;
  }
  .about_contentsTextAreaTit {
    font-size: 5vw;
    margin-top: 5vw;
  }
  .about_contentsTextAreaText {
    margin-top: 4vw;
    font-size: 4vw;
  }
  .about__contents--right {
    margin-top: 10vw;
  }
  .about__contents--right .about__contentsTextArea {
    padding: 0 3vw;
  }
  .about__contents--right .about__contentsImgArea {
    margin: 0 auto 0 0;
  }
  .select h3 {
    font-size: 10vw;
  }
  .select__contents {
    display: block;
  }
  .select__contentsBox {
    margin: 6vw 3vw;
  }
  .select__contentsLink span {
    font-size: 4vw;
    padding: 4vw 3vw;
  }
  .select__movie {
    padding: 9vw 3vw;
    top: 0;
  }
  .select__movie video {
    width: 100%;
  }  
}

/* PC
---------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
  .infinite-slider .swiper-slide {
    width: auto !important;
    margin-left: 20px;
  }
  .contact {
    margin: 4vw auto 0;
  }
}