@charset "UTF-8";



/* --------------------------------------------------
  under_layer
-------------------------------------------------- */
.under_layer {
  padding-top: 95px;
}
/*pc + tablet style*/
@media screen and (min-width: 1024px) {
}
/*short pc style*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .under_layer {
    padding-top: calc(121 / 375 * 100vw);
  }
}



/* --------------------------------------------------
  lnav_list
-------------------------------------------------- */
.section#lnav nav {
  position: relative;
  z-index: 10;
}
.lnav_list {
  display: flex;
  justify-content: flex-end;
}
.lnav_list li:not(:last-child) {
  margin-right: 30px;
}
.lnav_list li a {
  display: block;
  position: relative;
  font-size: 30px;
}
.lnav_list li a.cu {
  color: #fafafa;
}
.lnav_list li a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}
.lnav_list li a.cu:before {
  background-color: #1e1e1e;
}
.lnav_list li a span {
  position: relative;
}
/*short pc + tablet style*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
}
/*tablet style*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
/*sp style*/
@media screen and (max-width: 767px) {
  .lnav_list {
    flex-direction: column;
    align-items: flex-end;
  }
  .lnav_list li:not(:last-child) {
    margin-bottom: calc(20 / 375 * 100vw);
    margin-right: 0;
  }
  .lnav_list li a {
    font-size: calc(30 / 375 * 100vw);
  }
}



/* --------------------------------------------------
  movie
-------------------------------------------------- */
#movie.section {
  position: relative;
  z-index: 0;
  padding: calc(427 / 1280 * 100%) 0 0;
}
#movie.section .movie_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 10px 10px 35px 0px rgba(0, 0, 0, 0.05);
}
#movie.section .movie_wrap.movie_ss2020 {
  display: none;
}
#movie.section .movie_wrap a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent center center / cover no-repeat;
}
#movie.section .movie_wrap .movie_arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  background-color: #1e1e1e;
  border-radius: 100%;
  transform: translate3d(-50%, -50%, 0);
}
#movie.section .movie_wrap .movie_arrow span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/collections/arrow_play.png) center center / cover no-repeat;
}
/*short pc + tablet style*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
}
/*tablet style*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
/*sp style*/
@media screen and (max-width: 767px) {
  #movie.section {
    padding-top: calc(210 / 375 * 100vw);
  }
  #movie.section .movie_wrap a {
  }
  #movie.section .movie_wrap .movie_arrow {
    width: calc(40 / 375 * 100vw);
    height: calc(40 / 375 * 100vw);
  }
}



/* --------------------------------------------------
  collections_index
-------------------------------------------------- */
#lnav + #collections_index .section {
  padding-top: 0;
}
#collections_index .thumb_list {
/*  display: none;
  opacity: 0;
  transition: opacity 400ms ease;*/
}
#collections_index .thumb_list.show {
  display: flex !important;
  /*opacity: 1;*/
}
#collections_index .thumb_list.show:not(:last-child) {
  margin-bottom: 0;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #collections_index {
    position: relative;
    z-index: 10;
  }
}



/* --------------------------------------------------
  item_wrap
-------------------------------------------------- */
.item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.info_wrap {
  width: calc(220 / 970 * 100%);
}
.info_wrap .info_inner {
  position: relative;
  bottom: 0;
  background-color: #fafafa;
}
.info_wrap .info_inner.fixed {
  /*position: fixed;*/
  position: relative;
  margin-bottom: calc(50 / 1280 * 100%);
}
.info_wrap .back_btn {
  margin-bottom: 30px;
}
.info_wrap .back_btn a:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 7px;
  margin-right: 5px;
  background: url(../img/common/arrow-back.svg) 0 0 / 100% auto no-repeat;
}
.info_wrap .text_wrap .hd {
  font-size: 24px;
}
.info_wrap .text_wrap .hd:not(:last-child) {
  margin-bottom: 20px;
}
.info_wrap .text_wrap .hd span {
  display: block;
  padding: 0 1px;
  background-color: #ebebeb;
}
.info_wrap .text_wrap .text {
  font-size: 16px;
  line-height: 2;
}
.info_wrap .text_wrap .text:not(:last-child) {
  margin-bottom: 21px;
}
.info_wrap .text_wrap .btn {
  font-size: 16px;
}
.info_wrap .text_wrap .btn a {
  display: block;
  width: 53px;
  background-color: #f81006;
  text-align: center;
  color: #fafafa;
}
.info_wrap .text_wrap .btn a span {
  display: block;
  padding: 5px 0 3px;
}
.img_wrap {
  width: calc(720 / 970 * 100%);
  box-shadow: 10px 10px 35px 0px rgba(0, 0, 0, 0.05);
}
/*short pc + tablet style*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
}
/*tablet style*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
/*sp style*/
@media screen and (max-width: 767px) {
  .item_wrap {
    flex-direction: column-reverse;
  }
  .info_wrap {
    width: calc(217 / 375 * 100vw);
    min-height: calc(94 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
  }
  .info_wrap .info_inner {
    width: calc(217 / 375 * 100vw);
  }
  .info_wrap .info_inner.fixed {
    margin-bottom: calc(20 / 375 * 100vw);
  }
  .info_wrap .back_btn {
    margin-bottom: calc(20 / 375 * 100vw);
  }
  .info_wrap .back_btn a:before {
    width: calc(14 / 375 * 100vw);
    height: calc(7 / 375 * 100vw);
    margin-right: calc(5 / 375 * 100vw);
  }
  .info_wrap .text_wrap .hd {
    font-size: calc(24 / 375 * 100vw);
  }
  .info_wrap .text_wrap .hd:not(:last-child) {
    margin-bottom: calc(8 / 375 * 100vw);
  }
  .info_wrap .text_wrap .text {
    font-size: calc(16 / 375 * 100vw);
  }
  .info_wrap .text_wrap .text:not(:last-child) {
    margin-bottom: calc(11 / 375 * 100vw);
  }
  .info_wrap .text_wrap .btn {
    font-size: calc(16 / 375 * 100vw);
  }
  .info_wrap .text_wrap .btn a {
    width: calc(53 / 375 * 100vw);
  }
  .info_wrap .text_wrap .btn a span {
    padding: calc(5 / 375 * 100vw) 0 calc(3 / 375 * 100vw);
  }
  .img_wrap {
    width: calc(276 / 375 * 100vw);
  }
}



/* --------------------------------------------------
  collections_detail
-------------------------------------------------- */
#collections_detail .section {
  padding-top: 0;
}
/*short pc + tablet style*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
}
/*tablet style*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
/*sp style*/
@media screen and (max-width: 767px) {
}




/* --------------------------------------------------
  768px〜 hover pc + tablet style
  touchデバイスでhoverを使うと2回クリックしないと
  いけないくなるので、.notouchを先頭につけてください
-------------------------------------------------- */
@media screen and (min-width: 768px) {

  .notouch a {
    transition: opacity 400ms ease;
  }
  .notouch a:not(.cu):hover {
    opacity: 0.7;
  }

}