@charset "UTF-8";
/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.js-fadeIn {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
      -ms-transform: translate(0, 50px);
          transform: translate(0, 50px);
  /* y軸方向に下げておくことで、下から上に上がってくるようなアニメーションになります */
  -webkit-transition: all 1500ms;
  transition: all 1500ms;
}

.js-fadeIn.js-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

/* setting for slick */
#js-imgSlider {
  opacity: 0;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

#js-imgSlider.slick-initialized {
  opacity: 1;
}

/* border animation */
.border-animation.active {
  display: block;
  overflow: hidden;
  z-index: 2;
}

.border-animation.active .border1, .border-animation.active .border2, .border-animation.active .border3, .border-animation.active .border4 {
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  background: transparent;
  height: 0px;
  position: absolute;
  width: 0px;
}

.border-animation.active .border1 {
  -webkit-animation-name: border1;
          animation-name: border1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  bottom: 0;
  left: 0;
  height: calc(990 * (100vw / 750));
  width: 1px;
}

.border-animation.active .border2 {
  -webkit-animation-name: border2;
          animation-name: border2;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  top: 0;
  left: 0;
  height: 1px;
  width: calc(660 * (100vw / 750));
}

.border-animation.active .border3 {
  -webkit-animation-name: border3;
          animation-name: border3;
  -webkit-animation-delay: .8s;
          animation-delay: .8s;
  top: 0;
  right: 0;
  height: calc(990 * (100vw / 750));
  width: 1px;
}

.border-animation.active .border4 {
  -webkit-animation-name: border4;
          animation-name: border4;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  right: 0;
  bottom: 0;
  height: 1px;
  width: calc(660 * (100vw / 750));
}

@-webkit-keyframes border1 {
  0% {
    height: 0;
    background: #bfa67c;
  }
  100% {
    height: calc(990 * (100vw / 750));
    background: #bfa67c;
  }
}

@keyframes border1 {
  0% {
    height: 0;
    background: #bfa67c;
  }
  100% {
    height: calc(990 * (100vw / 750));
    background: #bfa67c;
  }
}

@-webkit-keyframes border2 {
  0% {
    width: 0;
    background: #bfa67c;
  }
  100% {
    width: calc(660 * (100vw / 750));
    background: #bfa67c;
  }
}

@keyframes border2 {
  0% {
    width: 0;
    background: #bfa67c;
  }
  100% {
    width: calc(660 * (100vw / 750));
    background: #bfa67c;
  }
}

@-webkit-keyframes border3 {
  0% {
    height: 0;
    background: #bfa67c;
  }
  100% {
    height: calc(990 * (100vw / 750));
    background: #bfa67c;
  }
}

@keyframes border3 {
  0% {
    height: 0;
    background: #bfa67c;
  }
  100% {
    height: calc(990 * (100vw / 750));
    background: #bfa67c;
  }
}

@-webkit-keyframes border4 {
  0% {
    width: 0;
    background: #bfa67c;
  }
  100% {
    width: calc(660 * (100vw / 750));
    background: #bfa67c;
  }
}

@keyframes border4 {
  0% {
    width: 0;
    background: #bfa67c;
  }
  100% {
    width: calc(660 * (100vw / 750));
    background: #bfa67c;
  }
}

@media only screen and (min-device-width: 1024px) {
  .border-animation.active .border1 {
    -webkit-animation-name: border1;
            animation-name: border1;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    bottom: 0;
    left: 0;
    height: 675px;
    width: 1px;
  }
  .border-animation.active .border2 {
    -webkit-animation-name: border2;
            animation-name: border2;
    -webkit-animation-delay: .4s;
            animation-delay: .4s;
    top: 0;
    left: 0;
    height: 1px;
    width: 450px;
  }
  .border-animation.active .border3 {
    -webkit-animation-name: border3;
            animation-name: border3;
    -webkit-animation-delay: .8s;
            animation-delay: .8s;
    top: 0;
    right: 0;
    height: 675px;
    width: 1px;
  }
  .border-animation.active .border4 {
    -webkit-animation-name: border4;
            animation-name: border4;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 450px;
  }
  @-webkit-keyframes border1 {
    0% {
      height: 0;
      background: #bfa67c;
    }
    100% {
      height: 675px;
      background: #bfa67c;
    }
  }
  @keyframes border1 {
    0% {
      height: 0;
      background: #bfa67c;
    }
    100% {
      height: 675px;
      background: #bfa67c;
    }
  }
  @-webkit-keyframes border2 {
    0% {
      width: 0;
      background: #bfa67c;
    }
    100% {
      width: 450px;
      background: #bfa67c;
    }
  }
  @keyframes border2 {
    0% {
      width: 0;
      background: #bfa67c;
    }
    100% {
      width: 450px;
      background: #bfa67c;
    }
  }
  @-webkit-keyframes border3 {
    0% {
      height: 0;
      background: #bfa67c;
    }
    100% {
      height: 675px;
      background: #bfa67c;
    }
  }
  @keyframes border3 {
    0% {
      height: 0;
      background: #bfa67c;
    }
    100% {
      height: 675px;
      background: #bfa67c;
    }
  }
  @-webkit-keyframes border4 {
    0% {
      width: 0;
      background: #bfa67c;
    }
    100% {
      width: 450px;
      background: #bfa67c;
    }
  }
  @keyframes border4 {
    0% {
      width: 0;
      background: #bfa67c;
    }
    100% {
      width: 450px;
      background: #bfa67c;
    }
  }
}

/* =====================================
    * setting for base style    *
    *               of the page *
===================================== */
.main-area .main-inner {
  width: 100%;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul, li {
  list-style: none;
}

/* for english */
.eng {
  font-family: quasimoda, sans-serif;
}

/* for responsive objects */
.sp-component {
  display: block;
}

.pc-component {
  display: none;
}

@media only screen and (min-device-width: 560px) {
  .sp-component {
    display: none;
  }
  .pc-component {
    display: block;
  }
}

/* ===============================================
    ! Layout !
=============================================== */
/* ===============================================
    ! Object !
=============================================== */
/* viewall__btn */
.checkall__btn {
  border: solid 1px #000000;
  display: block;
  height: calc(160 * (100vw / 750));
  width: calc(676 * (100vw / 750));
  /* style of text */
  color: #000;
  font-family: ambroise-firmin-std, serif;
  font-size: calc(46 * (100vw / 750));
  font-weight: 500;
  letter-spacing: calc(5.2 * (100vw / 750));
  line-height: calc(150 * (100vw / 750));
  text-align: center;
}

/* =====================================
    *  Style of SP *
===================================== */
main {
  /* background-image: url("../../imgs/page_sp_01.jpg"); */
  /* background-position-y: 116px; */
  /* background-image: url("../../imgs/page_sp_02.jpg"); */
  /* background-position-y: 7368px; */
  background-repeat: no-repeat;
  background-size: contain;
}

/* style of heading-text */
.heading-text {
  display: block;
  font-family: ambroise-firmin-std, serif;
  font-size: calc(112 * (100vw / 750));
  font-weight: 300;
  letter-spacing: calc(7.84 * (100vw / 750));
  line-height: 0.89;
  margin: calc(84 * (100vw / 750)) auto 0;
  text-align: center;
}

.heading-text .subtitle {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: calc(30 * (100vw / 750));
  font-weight: normal;
  letter-spacing: calc(5.4 * (100vw / 750));
  line-height: normal;
  margin-bottom: calc(-76 * (100vw / 750));
}

.heading-text .genre {
  display: block;
  font-size: calc(57 * (100vw / 750));
  letter-spacing: calc(15.39 * (100vw / 750));
  line-height: 1.75;
  margin-top: calc(-6 * (100vw / 750));
}

/* style of lineup */
.lineup {
  background-color: #d3d1c7;
  display: block;
  font-family: ambroise-firmin-std, serif;
  font-weight: 300;
  height: calc(850 * (100vw / 750));
  margin: calc(74 * (100vw / 750)) 0 0;
  width: 100%;
}

.lineup .sec-title {
  display: block;
  font-size: calc(66 * (100vw / 750));
  letter-spacing: calc(7.26 * (100vw / 750));
  line-height: normal;
  margin: 0 auto;
  padding-top: calc(50 * (100vw / 750));
  text-align: center;
}

.lineup-img__container {
  margin-top: calc(50 * (100vw / 750));
}

.lineup .item {
  margin-right: calc(16 * (100vw / 750)) !important;
}

.lineup .viewmore__btn {
  border: solid 1px #000;
  color: #000;
  display: block;
  font-size: calc(34 * (100vw / 750));
  height: calc(60 * (100vw / 750));
  letter-spacing: calc(2.04 * (100vw / 750));
  line-height: calc(60 * (100vw / 750));
  margin: calc(70 * (100vw / 750)) auto calc(100 * (100vw / 750));
  text-align: center;
  width: calc(261 * (100vw / 750));
}

/* style of each section */
/* common style */
.sec-title {
  font-family: ambroise-firmin-std, serif;
  font-size: calc(87 * (100vw / 750));
  font-weight: 300;
  letter-spacing: normal;
  text-align: center;
}

.img1 {
  display: block;
  position: relative;
}

.img2, .img3 {
  display: block;
}

.desc {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-size: calc(24 * (100vw / 750));
  font-weight: 500;
  letter-spacing: calc(2 * (100vw / 750));
  line-height: 2;
  text-align: justify;
}

.d-quotation {
  font-family: quasimoda, sans-serif;
  font-size: calc(24 * (100vw / 750));
  letter-spacing: calc(1.2 * (100vw / 750));
  line-height: 2;
  margin-right: calc(8 * (100vw / 750));
}

.credit {
  font-family: quasimoda, sans-serif;
  font-size: calc(24 * (100vw / 750));
  letter-spacing: calc(2.4 * (100vw / 750));
  line-height: 1.75;
}

.credit__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
}

.credit > a {
  color: #000;
}

.credit .discount {
  color: #e51b00;
}

.credit .discount-rate {
  font-size: calc(22 * (100vw / 750));
  letter-spacing: calc(2.2 * (100vw / 750));
}

.credit .discount {
  margin-left: calc(8 * (100vw / 750));
}

/* styling1 */
.styling1 {
  display: block;
  margin-top: calc(126 * (100vw / 750));
}

.styling1 .sec__container--primary .img1 {
  margin: calc(60 * (100vw / 750)) auto 0 calc(35 * (100vw / 750));
  width: calc(660 * (100vw / 750));
}

.styling1 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(20 * (100vw / 750));
  height: calc(990 * (100vw / 750));
  width: calc(660 * (100vw / 750));
}

.styling1 .sec__container--primary .desc {
  margin-top: calc(70 * (100vw / 750));
  padding: 0 calc(36 * (100vw / 750));
}

.styling1 .sec__container--secondary .img2 {
  margin: calc(90 * (100vw / 750)) auto 0;
  width: calc(562 * (100vw / 750));
}

.styling1 .sec__container--secondary .credit__container {
  margin: calc(40 * (100vw / 750)) calc(44 * (100vw / 750)) 0;
}

.styling1 .sec__container--secondary .credit:nth-child(2n) {
  margin-right: calc(16 * (100vw / 750));
}

/* styling2 */
.styling2 {
  display: block;
  margin-top: calc(122 * (100vw / 750));
}

.styling2 .sec__container--primary .img1 {
  margin: calc(80 * (100vw / 750)) auto 0 calc(55 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling2 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(-20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(-20 * (100vw / 750));
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling2 .sec__container--secondary .img2 {
  margin: calc(40 * (100vw / 750)) calc(35 * (100vw / 750)) 0 auto;
  width: calc(525 * (100vw / 750));
}

.styling2 .sec__container--secondary .desc {
  margin-top: calc(48 * (100vw / 750));
  padding: 0 calc(37 * (100vw / 750));
}

.styling2 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin-top: calc(28 * (100vw / 750));
  padding: 0 calc(70 * (100vw / 750)) 0 calc(36 * (100vw / 750));
}

.styling2 .sec__container--secondary .credit:nth-child(3) {
  margin-right: calc(16 * (100vw / 750));
}

/* styling3 */
.styling3 {
  display: block;
  margin-top: calc(124 * (100vw / 750));
}

.styling3 .sec__container--primary .img1 {
  margin: calc(80 * (100vw / 750)) calc(50 * (100vw / 750)) 0 auto;
  width: calc(630 * (100vw / 750));
}

.styling3 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(-20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(-20 * (100vw / 750));
  height: calc(945 * (100vw / 750));
  width: calc(630 * (100vw / 750));
}

.styling3 .sec__container--primary .desc {
  margin-top: calc(50 * (100vw / 750));
  padding: 0 calc(36 * (100vw / 750));
}

.styling3 .sec__container--secondary .img2 {
  margin: calc(90 * (100vw / 750)) auto 0;
  width: calc(630 * (100vw / 750));
}

.styling3 .sec__container--secondary .credit__container {
  margin-top: calc(50 * (100vw / 750));
  padding: 0 calc(46 * (100vw / 750));
}

.styling3 .sec__container--secondary .credit__container .credit:nth-child(2) {
  margin-right: calc(20 * (100vw / 750));
}

/* styling4 */
.styling4 {
  display: block;
  margin-top: calc(124 * (100vw / 750));
}

.styling4 .sec__container--primary .img1 {
  margin: calc(80 * (100vw / 750)) calc(55 * (100vw / 750)) 0 auto;
  width: calc(600 * (100vw / 750));
}

.styling4 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(-20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(20 * (100vw / 750));
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling4 .sec__container--secondary .img2 {
  margin: calc(40 * (100vw / 750)) auto 0 calc(35 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling4 .sec__container--secondary .desc {
  margin-top: calc(50 * (100vw / 750));
  padding: 0 calc(36 * (100vw / 750));
}

.styling4 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin-top: calc(28 * (100vw / 750));
  padding: 0 calc(60 * (100vw / 750)) 0 calc(36 * (100vw / 750));
}

.styling4 .sec__container--secondary .credit__container .credit:nth-child(3) {
  margin-right: calc(16 * (100vw / 750));
}

/* styling5 */
.styling5 {
  display: block;
  margin-top: calc(124 * (100vw / 750));
}

.styling5 .sec__container--primary .img1 {
  margin: calc(80 * (100vw / 750)) auto 0 calc(35 * (100vw / 750));
  width: calc(660 * (100vw / 750));
}

.styling5 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(-20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(20 * (100vw / 750));
  height: calc(990 * (100vw / 750));
  width: calc(660 * (100vw / 750));
}

.styling5 .sec__container--primary .desc {
  letter-spacing: calc(2.2 * (100vw / 750));
  margin-top: calc(46 * (100vw / 750));
  padding: 0 calc(38 * (100vw / 750));
}

.styling5 .sec__container--secondary .img2 {
  margin: calc(90 * (100vw / 750)) auto 0;
  width: calc(600 * (100vw / 750));
}

.styling5 .sec__container--secondary .credit__container {
  margin-top: calc(48 * (100vw / 750));
  padding: 0 calc(46 * (100vw / 750));
}

.styling5 .sec__container--secondary .credit__container .credit:nth-child(4) {
  margin-right: calc(20 * (100vw / 750));
}

/* styling6 */
.styling6 {
  display: block;
  margin-top: calc(124 * (100vw / 750));
}

.styling6 .sec__container--primary .img1 {
  margin: calc(56 * (100vw / 750)) calc(50 * (100vw / 750)) 0 auto;
  width: calc(630 * (100vw / 750));
}

.styling6 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(-20 * (100vw / 750));
  height: calc(945 * (100vw / 750));
  width: calc(630 * (100vw / 750));
}

.styling6 .sec__container--primary .desc {
  margin-top: calc(70 * (100vw / 750));
  padding: 0 calc(38 * (100vw / 750));
}

.styling6 .sec__container--secondary .img2 {
  margin: calc(90 * (100vw / 750)) auto 0 calc(35 * (100vw / 750));
  width: calc(450 * (100vw / 750));
}

.styling6 .sec__container--secondary .img3 {
  margin: calc(60 * (100vw / 750)) calc(35 * (100vw / 750)) 0 auto;
  width: calc(450 * (100vw / 750));
}

.styling6 .sec__container--secondary .credit__container {
  margin-top: calc(40 * (100vw / 750));
  padding: 0 calc(70 * (100vw / 750));
}

.styling6 .sec__container--secondary .credit__container .credit:nth-child(1) {
  margin-right: calc(20 * (100vw / 750));
}

/* styling7 */
.styling7 {
  display: block;
  margin-top: calc(126 * (100vw / 750));
}

.styling7 .sec__container--primary .img1 {
  margin: calc(80 * (100vw / 750)) calc(55 * (100vw / 750)) 0 auto;
  width: calc(600 * (100vw / 750));
}

.styling7 .sec__container--primary .border-animation.active {
  position: absolute;
  top: calc(-20 * (100vw / 750));
  right: auto;
  bottom: auto;
  left: calc(20 * (100vw / 750));
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling7 .sec__container--secondary .img2 {
  margin: calc(40 * (100vw / 750)) auto 0 calc(35 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.styling7 .sec__container--secondary .desc {
  margin-top: calc(44 * (100vw / 750));
  padding: 0 calc(38 * (100vw / 750));
}

.styling7 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin-top: calc(30 * (100vw / 750));
  padding: 0 calc(60 * (100vw / 750)) 0 calc(36 * (100vw / 750));
}

.styling7 .sec__container--secondary .credit__container .credit:nth-child(5) {
  margin-right: calc(20 * (100vw / 750));
}

/* style of checkall__btn */
.checkall__btn {
  margin: calc(156 * (100vw / 750)) auto calc(200 * (100vw / 750));
}