@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, img, small, strong, b, dl, dt, dd, ol, ul, li,
form, label, legend, table, tbody, tfoot, thead, tr, th, td, footer, header, menu, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: bottom;
  background: transparent;
}

html {
  touch-action: manipulation;
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}

ul li {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  vertical-align: baseline;
}

a:hover {
  opacity: 0.7;
}

table {
  border-spacing: 0;
}

img {
  width: 100%;
}

/* ===================================================================================
  resetここまで
=================================================================================== */
body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif;
  color: #fff;
  font-size: 24px;
}
@media screen and (max-width: 750px) {
  body {
    font-size: 3.2vw;
  }
}

.float_area {
  display: none;
}
@media screen and (max-width: 750px) {
  .float_area {
    display: block;
    width: 100%;
    padding: 2.9333333333vw 0;
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
  }
}
.float_area .float_btn {
  width: 666px;
  margin: 0 auto;
  filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  .float_area .float_btn {
    width: 88.8vw;
    filter: drop-shadow(2vw 2vw 1.3333333333vw rgba(0, 0, 0, 0.2));
  }
}

.wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.wrapper::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(../img/bg.jpg) no-repeat top center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.wrapper .container {
  width: 750px;
  height: 100vh;
  margin: 0 auto;
  transform: translateX(25%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 1760px) {
  .wrapper .container {
    transform: translateX(35%);
  }
}
@media screen and (max-width: 1500px) {
  .wrapper .container {
    transform: none;
    z-index: -1;
  }
}
@media screen and (max-width: 750px) {
  .wrapper .container {
    width: 100vw;
  }
}
.wrapper .container .left {
  display: flex;
  align-items: center;
  height: 100vh;
  position: absolute;
  top: 0;
  left: -700px;
}
@media screen and (max-width: 1760px) {
  .wrapper .container .left {
    left: -650px;
  }
}
@media screen and (max-width: 1500px) {
  .wrapper .container .left {
    display: none;
  }
}
.wrapper .container .left .top_nav {
  width: 602px;
  height: 675px;
}
.wrapper .container .left .top_nav .fixed_btn {
  width: 500px;
  margin: 30px auto 0;
  filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.2));
}
.wrapper .container .left .top_nav .nav_list {
  width: 328px;
  margin: 65px auto 0;
}
.wrapper .container .left .top_nav .nav_list li {
  margin-top: 40px;
}
.wrapper .container .left .top_nav .nav_list li:first-child {
  margin-top: 0;
}
.wrapper .container .right {
  text-align: center;
  position: absolute;
  right: -126px;
  bottom: 70px;
  z-index: 9999;
}
@media screen and (max-width: 1000px) {
  .wrapper .container .right {
    position: fixed;
    right: 20px;
    bottom: 20px;
  }
}
.wrapper .top_btn {
  width: 94px;
}
@media screen and (max-width: 1000px) {
  .wrapper .top_btn.pc_btn {
    display: none;
  }
}
.wrapper .top_btn.sp_btn {
  display: none;
}
@media screen and (max-width: 1000px) {
  .wrapper .top_btn.sp_btn {
    display: block;
    width: 94px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
  }
}
@media screen and (max-width: 750px) {
  .wrapper .top_btn.sp_btn {
    width: 12.5333333333vw;
    right: 2.6666666667vw;
    bottom: 24vw;
  }
}
.wrapper .contents {
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  transform: translateX(25%);
  position: relative;
  z-index: 999;
}
@media screen and (max-width: 1760px) {
  .wrapper .contents {
    transform: translateX(35%);
  }
}
@media screen and (max-width: 1500px) {
  .wrapper .contents {
    transform: none;
  }
}
.wrapper .contents .relative {
  position: relative;
}
.wrapper .contents .fv_area {
  position: relative;
}
.wrapper .contents .fv_area .fv_video_area {
  position: absolute;
  top: 738px;
  left: 337px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .fv_area .fv_video_area {
    top: 98.4vw;
    left: 44.9333333333vw;
  }
}
.wrapper .contents .fv_area .fv_video_area .fv_video_img {
  width: 400px;
  position: absolute;
  top: -64px;
  left: -60px;
  z-index: 999;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .fv_area .fv_video_area .fv_video_img {
    width: 53.3333333333vw;
    top: -8.5333333333vw;
    left: -8vw;
  }
}
.wrapper .contents .fv_area .fv_video_area .fv_video {
  width: 282px;
  border-radius: 10px;
  border: 7px solid rgba(255, 255, 255, 0.5);
  filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.2));
  box-sizing: border-box;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .fv_area .fv_video_area .fv_video {
    width: 37.6vw;
    border-radius: 1.3333333333vw;
    border: 0.9333333333vw solid rgba(255, 255, 255, 0.5);
    filter: drop-shadow(0.9333333333vw 0.9333333333vw 0 rgba(0, 0, 0, 0.2));
  }
}
.wrapper .contents .fv_area .fv_video_area .fv_play_btn {
  display: block;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  .wrapper .contents .fv_area .fv_video_area .fv_play_btn {
    width: 5.3333333333vw;
    filter: drop-shadow(0.6666666667vw 0.6666666667vw 0.4vw rgba(0, 0, 0, 0.2));
  }
}
.wrapper .contents .fv_area .fv_video_area .fv_play_btn.playActive {
  display: none;
}
.wrapper .contents .cta_btn {
  width: 666px;
  margin: 0 auto;
  filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.2));
  position: absolute;
  left: 0;
  right: 0;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .cta_btn {
    width: 88.8vw;
    filter: drop-shadow(2vw 2vw 1.3333333333vw rgba(0, 0, 0, 0.2));
  }
}
.wrapper .contents .cta_btn.btn01 {
  top: 30px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .cta_btn.btn01 {
    top: 4vw;
  }
}
.wrapper .contents .cta_btn.btn02 {
  bottom: 80px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .cta_btn.btn02 {
    bottom: 10.6666666667vw;
  }
}
.wrapper .contents .cta_btn.btn03 {
  bottom: 23px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .cta_btn.btn03 {
    bottom: 3.0666666667vw;
  }
}
.wrapper .contents .video_slider {
  background: #1A1A1A;
}
.wrapper .contents .video_slider .slider {
  margin-bottom: 0;
}
.wrapper .contents .video_slider .slider .slick-slide {
  margin: 0 25px;
  position: relative;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-slide {
    margin: 0 3.3333333333vw;
  }
}
.wrapper .contents .video_slider .slider .slick-slide .play_btn {
  display: block;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-slide .play_btn {
    width: 16vw;
  }
}
.wrapper .contents .video_slider .slider .slick-slide .play_btn.playActive {
  display: none;
}
.wrapper .contents .video_slider .slider .slick-slide video {
  width: 100%;
  border-radius: 20px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-slide video {
    border-radius: 2.6666666667vw;
  }
}
.wrapper .contents .video_slider .slider .slick-dots {
  bottom: -65px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-dots {
    bottom: -8.6666666667vw;
  }
}
.wrapper .contents .video_slider .slider .slick-dots li {
  width: 24px;
  height: 24px;
  margin: 0 25px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-dots li {
    width: 3.2vw;
    height: 3.2vw;
    margin: 0 3.3333333333vw;
  }
}
.wrapper .contents .video_slider .slider .slick-dots li button {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-dots li button {
    width: 3.2vw;
    height: 3.2vw;
  }
}
.wrapper .contents .video_slider .slider .slick-dots li button::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 15px;
  background: #666;
  opacity: 1;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .video_slider .slider .slick-dots li button::before {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 2vw;
  }
}
.wrapper .contents .video_slider .slider .slick-dots li.slick-active button::before {
  background: #F45E00;
}
.wrapper .contents .foot_nav {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 120px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .foot_nav {
    bottom: 16vw;
  }
}
.wrapper .contents .foot_nav li {
  padding-right: 25px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .foot_nav li {
    padding-right: 3.3333333333vw;
  }
}
.wrapper .contents .foot_nav li::before {
  content: "|";
  color: #fff;
  padding-right: 25px;
}
@media screen and (max-width: 750px) {
  .wrapper .contents .foot_nav li::before {
    padding-right: 3.3333333333vw;
  }
}
.wrapper .contents .foot_nav li:first-child::before {
  content: none;
}
.wrapper .contents .foot_nav li:last-child {
  padding-right: 0;
}
.wrapper .contents .foot_nav li a {
  color: #fff;
  letter-spacing: 0.18em;
}/*# sourceMappingURL=style.css.map */