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

/* ---------------------------------------------------------
main
----------------------------------------------------------*/
main {
  display: block;
  width: 100%;
  padding-top: 79px;
}
main .slider img {
  width: 100%;
  height: auto;
}
main .slider .movie {
  position: relative;
  width: 100%;
  padding-top: 50%;
}
main .slider video.object-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}
main .slider {
  width: 100%;
  height: 50vw;
  overflow: hidden;
}
main .slider.swiper-container-initialized {
  height: auto;
}

/* ---------------------------------------------------------
article
----------------------------------------------------------*/
article .wrapper {
  display: flex;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
.sec
----------------------------------------------------------*/
.sec {
  position: relative;
}
.sec a {
  display: block;
  transition: opacity .3s;
}
.sec a:hover {
  opacity: .7;
}
.sec h2 {
  position: absolute;
  top: 0;
  left: 50%;
}
.sec h2 img,
.sec .pic img {
  width: 100%;
  height: auto;
}
.sec .ttl-white.is-black img {
  opacity: 0;
}

/* ---------------------------------------------------------
#play
----------------------------------------------------------*/
#play {
  width: 50%;
}
#play h2 {
  width: calc(158 / 683 * 100%);
  margin: calc(291 / 683 * 100%) 0 0 calc(-79 / 683 * 100%);
}
#play .ttl-white.is-black {
  background: url(../images/ttl_play_black.svg) no-repeat;
}

/* ---------------------------------------------------------
#encounters
----------------------------------------------------------*/
#encounters {
  width: 50%;
}
#encounters h2 {
  width: calc(427 / 683 * 100%);
  margin: calc(291 / 683 * 100%) 0 0 calc(-213 / 683 * 100%);
}
#encounters .ttl-white.is-black {
  background: url(../images/ttl_encounters_black.svg) no-repeat;
}

/* ---------------------------------------------------------
#catalogue
----------------------------------------------------------*/
#catalogue {
  width: 100%;
}
#catalogue h2 {
  width: calc(392 / 1366 * 100%);
  margin: calc(70 / 1366 * 100%) 0 0 calc(-196 / 1366 * 100%);
}
#catalogue .ttl-white.is-black {
  background: url(../images/ttl_catalogue_black.svg) no-repeat;
}

/* ---------------------------------------------------------
#movie
----------------------------------------------------------*/
#movie {
  width: 50%;
}
#movie .txt-play-white {
  position: absolute;
  top: 0;
  left: calc(20 / 683 * 100%);
  width: calc(83 / 683 * 100%);
  margin-top: calc(20 / 683 * 100%);
}
#movie .time-white {
  position: absolute;
  top: 0;
  right: calc(23 / 683 * 100%);
  width: calc(60 / 683 * 100%);
  margin-top: calc(24 / 683 * 100%);
}
#movie .txt-play-white.is-black {
  background: url(../images/txt_play_black.svg) no-repeat;
}
#movie .time-white.is-black {
  background: url(../images/txt_time_black.svg) no-repeat;
}
#movie .txt-play-white.is-black img,
#movie .time-white.is-black img {
  opacity: 0;
}
#movie .txt-play img,
#movie .time img {
  width: 100%;
  height: auto;
}
#movie h2 {
  width: calc(210 / 683 * 100%);
  margin: calc(291 / 683 * 100%) 0 0 calc(-105 / 683 * 100%);
  z-index: 2;
}
#movie .ttl-white.is-black {
  background: url(../images/ttl_movie_black.svg) no-repeat;
}

#movie .movie {
  position: relative;
  width: 100%;
  padding-top: 100%;
  z-index: -1;
}
#movie video.object-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

/* ---------------------------------------------------------
#interest
----------------------------------------------------------*/
#interest {
  width: 50%;
}
#interest.pic-none a {
  width: 100%;
  height: 100%;
  background: url("../images/instagram.jpg") no-repeat;
  background-size: cover;
}
#interest h2 {
  width: calc(306 / 683 * 100%);
  margin: calc(291 / 683 * 100%) 0 0 calc(-153 / 683 * 100%);
  z-index: 2;
}
#interest .ttl-white.is-black {
  background: url(../images/ttl_interest_black.svg) no-repeat;
}
#interest .insta-box {
  display: flex;
  flex-wrap: wrap;
}
#interest .insta-box .pic {
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
}
#interest .insta-box .pic img {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width:769px) {
  #pagetop {
    display: none;
  }
}

/* ---------------------------------------------------------
media queries
----------------------------------------------------------*/
@media screen and (max-width:768px) {
  
/* ---------------------------------------------------------
main sp
----------------------------------------------------------*/
  main {
    padding-top: calc(119 / 750 * 100vw);
  }
  main .slider .movie {
    padding-top: 100%;
  }
  main .slider {
    height: calc(750 / 750 * 100vw);
    overflow: hidden;
  }
  
/* ---------------------------------------------------------
article sp
----------------------------------------------------------*/
  article .wrapper {
    display: block;
  }
  
/* ---------------------------------------------------------
.sec sp
----------------------------------------------------------*/
  
  
/* ---------------------------------------------------------
#play sp
----------------------------------------------------------*/
  #play {
    width: 100%;
  }
  #play h2 {
    width: calc(205 / 750 * 100vw);
    margin: calc(309 / 750 * 100vw) 0 0 calc(-102 / 750 * 100vw);
  }
  #play .ttl-white.is-black {
    background: url(../images/ttl_play_black_sp.svg) no-repeat;
  }
  
/* ---------------------------------------------------------
#encounters sp
----------------------------------------------------------*/
  #encounters {
    width: 100%;
  }
  #encounters h2 {
    width: calc(565 / 750 * 100vw);
    margin: calc(309 / 750 * 100vw) 0 0 calc(-282 / 750 * 100vw);
  }
  #encounters h2 img {
    height: calc(133 / 750 * 100vw);
  }
  #encounters .ttl-white.is-black {
    background: url(../images/ttl_encounters_black_sp.svg) no-repeat;
  }

/* ---------------------------------------------------------
#catalogue sp
----------------------------------------------------------*/
  #catalogue h2 {
    width: calc(500 / 750 * 100vw);
    margin: calc(78 / 750 * 100vw) 0 0 calc(-250 / 750 * 100vw);
  }
  #catalogue .ttl-white.is-black {
    background: url(../images/ttl_catalogue_black_sp.svg) no-repeat;
  }
  
/* ---------------------------------------------------------
#movie sp
----------------------------------------------------------*/
  #movie {
    width: 100%;
  }
  #movie .txt-play-white {
    left: calc(20 / 750 * 100vw);
    width: calc(96 / 750 * 100vw);
    margin-top: calc(17 / 750 * 100vw);
  }
  #movie .time-white {
    right: calc(22 / 750 * 100vw);
    width: calc(64 / 750 * 100vw);
    margin-top: calc(10 / 750 * 100vw);
  }
  #movie h2 {
    width: calc(281 / 750 * 100vw);
    margin: calc(309 / 750 * 100vw) 0 0 calc(-140 / 750 * 100vw);
  }
  #movie .ttl-white.is-black {
    background: url(../images/ttl_movie_black_sp.svg) no-repeat;
  }

/* ---------------------------------------------------------
#interest sp
----------------------------------------------------------*/
  #interest {
    width: 100%;
  }
  #interest.pic-none a {
    height: 100vw;
  }
  #interest h2 {
    width: calc(405 / 750 * 100vw);
    margin: calc(307 / 750 * 100vw) 0 0 calc(-202 / 750 * 100vw);
  }
  #interest .ttl-white.is-black {
    background: url(../images/ttl_interest_black_sp.svg) no-repeat;
  }

  
  
}