@charset "utf-8";

/*-----------------------------------------------
	hero
-----------------------------------------------*/

.top-hero {
  position: relative;
  z-index: 9;
}

.top-hero__ttl {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 600px;
  height: 200px;
  max-width: 100%;
  margin: auto;
}

.top-hero__frame {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 120px);
  height: calc(var(--vh, 1vh) * 100);
}

.top-hero__movie {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.top-hero_kv {
  width: 100%;
  height: calc(100vh - 120px);
  /* height: calc(var(--vh, 1vh) * 100); */
  background-image: url(../img/index/kv.jpg);
  background-size: cover;
  background-position: 50% 80%;
}

@media only screen and (max-width: 767px) {
  .top-hero__ttl img {
    /* margin-top: -8%; */
  }
  .top-hero_kv {
    background-image: url(../img/index/kv_sp.jpg);
    background-position: 50% 50%;
  }
}


/*-----------------------------------------------
	main
-----------------------------------------------*/


/*-----( common )-----*/

.top-sec-head__eng {
  height: 32px;
}

.top-sec-head__eng img {
  width: auto;
  height: 100%;
}

.top-sec-head__jp {
  margin-top: 16px;
  font-weight: 500;
}

.btf__bnr {
  display: block;
  margin: 90px auto 0;
}

@media only screen and (max-width: 767px) {
  /*-----( common )-----*/
  .top-sec-head__eng {
    height: 27px;
    text-align: center;
  }
  .top-sec-head__jp {
    text-align: center;
  }
  .btf__bnr {
    margin: 60px auto 0;
  }
}


/*-----------------------------------------------
	news
-----------------------------------------------*/


/*-----( top-news )-----*/

.top-news {
  display: flex;
  justify-content: space-between;
  padding: 110px 0 100px;
}

.news {
  width: 47%;
  margin-right: 3%;
}

.news-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 13px;
}

.news-list li {
  border-bottom: 1px solid #DFE1E2;
}

.news-list a {
  display: flex;
  padding: 30px 0 25px;
  text-decoration: none;
}

.news-list time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 90px;
  height: 25px;
  background: #F2EFEC;
  border-radius: 13px;
  color: #E88B1B;
  font-size: 12px;
}

.news-list span {
  display: block;
  margin: 1px 0 0 4%;
  color: #222;
}

.news-btm__btn {
  display: none;
}


/*-----( fb )-----*/

.fb-block {
  flex-shrink: 0;
  width: 500px;
}

.fb-block iframe {
  height: 505px;
}


/*-----( Instagram )-----*/

.insta-block {
  flex-shrink: 0;
  width: 500px;
}

.insta-block iframe {
  height: 550px;
}

@media only screen and (max-width: 979px) {
  /*-----( top-news )-----*/
  .top-news {
    display: block;
  }
  .news {
    width: 80%;
    margin: 0 auto 80px;
  }
  /*-----( fb )-----*/
  .fb-block {
    margin: 0 auto;
  }
  /*-----( Instagram )-----*/
  .insta-block {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 979px) {
  /*-----( top-news )-----*/
  .top-news {
    display: block;
  }
  .news {
    width: 80%;
    margin: 0 auto 80px;
  }
  /*-----( fb )-----*/
  .fb-block {
    margin: 0 auto;
  }
  /*-----( Instagram )-----*/
  .insta-block {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  /*-----( top-news )-----*/
  .top-news {
    padding: 67px 0 0;
  }
  .news {
    width: 100%;
    margin: 0 auto 80px;
  }
  .news-head {
    display: block;
    margin: 0 0 18px;
  }
  .news-head__btn {
    display: none;
  }
  .news-list a {
    display: block;
    padding: 20px 0 22px;
  }
  .news-list time {
    font-size: 12px;
  }
  .news-list span {
    display: block;
    margin: 7px 0 0 0;
  }
  .news-btm__btn {
    display: flex;
    margin: 40px auto 0;
  }
  .fb-block {
    width: 100%;
    margin-bottom: 80px;
  }
  .fb-block iframe {
    width: 100%!important;
    max-width: 336px!important;
    height: 388px!important;
    margin: 0 auto!important;
  }
  .insta-block {
    width: 100%;
    margin-bottom: 80px;
  }
  .insta-block iframe {
    width: 100%!important;
    max-width: 336px!important;
    height: 388px!important;
    margin: 0 auto!important;
  }
}

@media only screen and (max-width: 320px) {
  .fb-block iframe {
    min-width: 288px!important;
    max-width: 288px!important;
    height: 340px!important;
  }
}


}
@media only screen and (max-width: 320px) {
  .insta-block iframe {
    min-width: 288px!important;
    max-width: 288px!important;
    height: 340px!important;
  }
}

/*-----------------------------------------------
	pickup
-----------------------------------------------*/
.pickup,
.plan {
  width: 95%;
  max-width: 1520px;
  margin: 0 auto;
  background: #F8F7F2;
}
.pickup-head {
  padding: 113px 0 60px;
  text-align: center;
}
.pu-slider {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.pu-slider__item {
  display: block;
  padding: 0 5.5%;
  color: #222;
  text-decoration: none;
  transition: all .4s ease-out;
}
.pu-slider__img {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 264px;
  border: 2px solid #3C1A1A;
}
.pu-slider__item img {
  transition: all .4s ease-out;
}
.pu-slider-box {
  position: relative;
  z-index: 2;
  width: 83%;
  margin: -47px auto 0;
  padding: 38px 9% 42px;
  background: #fff;
}
.pu-slider-box time {
  display: block;
  margin: 0 0 2px;
  color: #E88B1B;
  font-size: 20px;
  font-weight: 700;
}
.pu-slider .slick-arrow {
  position: absolute;
  z-index: 2;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  height: 30px;
}
.pu-slider .slick-prev {
  top: 121px;
  left: -55px;
  background: url(../img/common/arw_05.svg) left top / cover no-repeat;
}
.pu-slider .slick-next {
  top: 121px;
  right: -55px;
  background: url(../img/common/arw_04.svg) left top / cover no-repeat;
}
@media (hover: hover) {
  .pu-slider__item:hover img {
    transform: scale(1.1);
  }
}
@media only screen and (max-width: 1279px) {
  .pu-slider__item img {
    width: auto;
    max-width: none;
    height: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .pickup {
    width: 100%;
    padding: 0 0 80px;
  }

  .pickup-head {
    padding: 88px 0 40px;
  }

  .pu-slider__item {
    padding: 0 1.485%;
    color: #222;
    text-decoration: none;
    transition: all .4s ease-out;
  }

  .pu-slider__img {
    height: 177px;
  }

  .pu-slider__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .pu-slider-box {
    width: 88%;
    margin: -23px auto 0;
    padding: 19px 7% 23px;
  }

  .pu-slider-box time {
    margin: 0 0 7px;
    font-size: 16px;
  }

  .pu-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
  }

  .pu-slider .slick-dots li {
    margin: 0 10px;
  }

  .pu-slider .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #C4C4C4;
    border-radius: 5px;
  }

  .pu-slider .slick-dots .slick-active button {
    background: #E88B1B;
  }

  .pu-slider .slick-arrow {
    width: 12px;
    height: 18px;
  }

  .pu-slider .slick-prev {
    top: 78px;
    left: -18px;
  }

  .pu-slider .slick-next {
    top: 78px;
    right: -14px;
  }
}

/*-----------------------------------------------
	plan
-----------------------------------------------*/
.plan {
	padding: 100px 0 298px;
}
.plan-head {
  padding: 67px 0 0;
  text-align: center;
}
.plan-lead {
  margin: 21px auto 40px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .plan {
    width: 100%;
    padding: 0;
    background: #fff;
  }

  .plan-head {
    padding: 45px 0 0;
  }

  .plan-lead {
    width: 92%;
    margin: 20px auto 44px;
  }
}

/*-----------------------------------------------
	movie
-----------------------------------------------*/
.movie .wrapper {
  position: relative;
  margin: -198px auto 0;
}
.movie .wrapper::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  display: block;
  width: 18%;
  height: 0;
  padding-top: 8.59%;
  background: url(../img/index/bg_movie.svg) left top / cover no-repeat;
}
.movie-head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
  pointer-events: none;
}
.movie-head-inner {
  margin: 104px 0 0;
}
.movie-box {
  position: relative;
  z-index: 2;
  width: 80%;
  height: 0;
  margin: 0 0 0 auto;
  padding-top: 45%;
}
.movie__btn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.movie__btn img {
  position: absolute;
  top: 0;
  left: 0;
}
.movie__btn img:first-child {
  z-index: 2;
}
.movie__btn img:last-child {
  z-index: 1;
}
@media (hover: hover) {
  .movie__btn:hover img:first-child {
    display: none;
  }
}
.movie-box iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  .movie {
    position: relative;
  }

  .movie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 282px;
    background: #F8F7F2;
  }

  .movie .wrapper {
    margin: 0 auto;
    padding: 81px 0 0;
  }

  .movie .wrapper::before {
    display: none;
  }

  .movie-head {
    position: relative;
    display: block;
    height: auto;
    text-align: center;
  }

  .movie-head-inner {
    margin: 0 auto 0;
  }

  .movie-box {
    width: 100%;
    height: 0;
    margin: 40px auto 0;
    padding-top: 55%;
  }
}

/*-----------------------------------------------
	more
-----------------------------------------------*/
.more {
  padding: 0 0 20px;
  background: #E88B1B;
}
.more-head {
  padding: 92px 0 60px;
  text-align: center;
  color: #fff;
}
.more-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.more-nav li {
  width: 47.27%;
  margin: 0 0 60px;
}
.sns {
  padding: 88px 0 80px;
}
.sns-head {
  padding: 0 0 64px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .more {
    padding: 0 0 51px;
  }

  .more-head {
    padding: 67px 0 39px;
  }

  .more-nav {
    display: block;
  }

  .more-nav li {
    width: 100%;
    margin: 0 auto 26px;
  }

  .sns-head {
    padding: 0 0 44px;
  }
}