@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);
}

.main-inner a:hover img{
    opacity: 0.7;
    -webkit-transition: .3s;
    transition: .3s;
}

/* 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: 74px;
  width: 380px;
  /* style of text */
  color: #000;
  font-family: ambroise-firmin-std, serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 1.62px;
  line-height: 74px;
  text-align: center;
}

/* ===============================================
    *  Style of PC *
=============================================== */
main {
  overflow-x: hidden;
  /* background-image: url("../../imgs/page_pc.jpg"); */
  /* background-position-x: 26px; */
  /* background-position-y: -25px; */
  background-repeat: no-repeat;
  background-size: 1400px;
}

/* style of heading-text */
.heading-text {
  display: block;
  font-family: ambroise-firmin-std, serif;
  font-size: 74px;
  font-weight: 300;
  letter-spacing: 5.18px;
  line-height: 0.91;
  margin: 50px auto 0;
  text-align: center;
}

.heading-text .subtitle {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 3.24px;
  line-height: normal;
  margin-bottom: -58px;
}

.heading-text .genre {
  display: block;
  font-size: 38px;
  letter-spacing: 10.26px;
  line-height: 1.76;
  margin-top: -5px;
}

/* style of lineup */
.lineup {
  background-color: #d3d1c7;
  display: block;
  font-family: ambroise-firmin-std, serif;
  font-weight: 300;
  height: 650px;
  margin: 54px -200% 0;
  padding: 0 200%;
  width: 100%;
  /* style of arrow */
  /* style of dots */
}

.lineup .sec-title {
  display: block;
  font-size: 40px;
  letter-spacing: 4.4px;
  line-height: normal;
  margin: 0 auto;
  padding-top: 45px;
  position: relative;
  right: 4px;
  text-align: center;
}

.lineup-img__container {
  margin: 40px auto 0;
  width: 952px;
}

.lineup .slick-prev {
  top: 50%;
  height: 30px;
  width: 18px;
}

.lineup .slick-prev::before {
  content: "" !important;
  background: url("../../imgs/plugin/slick/arrow_left.png");
  background-repeat: no-repeat;
  background-size: contain;
  /*display: inline-block;*/
  height: 100%;
  vertical-align: middle;
  width: 100%;
  display: none;
}

.lineup .slick-next {
  top: 50%;
  right: -5px;
  height: 30px;
  width: 18px;
}

.lineup .slick-next::before {
  content: "" !important;
  background: url("../../imgs/plugin/slick/arrow_right.png");
  background-repeat: no-repeat;
  background-size: contain;
  /*display: inline-block;*/
  height: 100%;
  vertical-align: middle;
  width: 100%;
  display: none;
}

.lineup .slick-dots {
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  margin: 30px auto 0;
  position: unset;
  text-align: center;
  vertical-align: middle;
}

.lineup .slick-dots li {
  display: inline-block;
  height: auto;
  margin: 0 7px;
  padding: 0;
  vertical-align: middle;
  width: auto;
}

.lineup .slick-dots li.slick-active button {
  background-color: #000;
}

.lineup .slick-dots li button {
  border: 1px solid;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 0;
  height: 8px;
  padding: 0;
  -webkit-transition: background .3s;
  transition: background .3s;
  width: 8px;
}

.lineup .slick-dots li button::before {
  content: unset;
  display: none;
}

.lineup .item {
  margin-right: 30px;
}

.lineup .viewmore__btn {
  border: solid 1px #000;
  color: #000;
  display: block;
  font-size: 18px;
  height: 34px;
  letter-spacing: 1.08px;
  line-height: 34px;
  margin: 50px auto 80px;
  position: relative;
  right: 4px;
  text-align: center;
  width: 158px;
}

/* style of each section */
/* common style */
.sec-title {
  font-family: ambroise-firmin-std, serif;
  font-size: 54px;
  font-weight: 300;
  letter-spacing: normal;
  text-align: left;
}

.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: 13px;
  font-weight: 500;
  letter-spacing: 0.65px;
  line-height: 1.85;
  text-align: justify;
}

.d-quotation {
  font-family: quasimoda, sans-serif;
  font-size: 13px;
  letter-spacing: 0.65px;
  line-height: 1.85;
  margin: 0 2px;
}

.credit {
  font-family: quasimoda, sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 2;
}

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

.credit > a {
  color: #000;
}

.credit .discount {
  color: #e51b00;
  margin-left: 5px;
}

.credit .discount-rate {
  font-size: 10px;
  letter-spacing: 1px;
}

/* styling1 */
.styling1 {
  display: block;
  margin: 120px auto 0;
  width: 790px;
}

.styling1 .sec__container--primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styling1 .sec__container--primary .img1 {
  margin: 0 70px 0 0;
  width: 420px;
}

.styling1 .sec__container--primary .border-animation.active {
  position: absolute;
  top: 12px;
  right: auto;
  bottom: auto;
  left: 10px;
  height: 630px;
  width: 420px;
}

.styling1 .sec__container--primary .desc__container {
  margin: auto auto auto 0;
  width: 292px;
}

.styling1 .sec__container--primary .desc {
  margin-top: 23px;
  padding-left: 1px;
}

.styling1 .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-top: 72px;
  padding-right: 36px;
}

.styling1 .sec__container--secondary .img2 {
  margin: 0 0 0 auto;
  width: 380px;
}

.styling1 .sec__container--secondary .credit__container {
  margin: auto 0 0 auto;
  position: relative;
  top: 4px;
  width: 330px;
}

.styling1 .sec__container--secondary .credit:nth-child(3) {
  margin-right: 10px;
}

.styling1 .sec__container--secondary _:-ms-lang(x)::-ms-backdrop, .styling1 .sec__container--secondary .credit__container {
  height: 100px;
}

/* styling2 */
.styling2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 120px auto 0;
  padding-left: 6px;
  width: 952px;
}

.styling2 .sec__container--primary .sec-title {
  margin: 2px auto 0 -12px;
}

.styling2 .sec__container--primary .img1 {
  margin: 60px 100px 0 0;
  width: 450px;
}

.styling2 .sec__container--primary .border-animation.active {
  position: absolute;
  top: -13px;
  right: auto;
  bottom: auto;
  left: -13px;
  height: 675px;
  width: 450px;
}

.styling2 .sec__container--secondary .img2 {
  margin: 0;
  width: 400px;
}

.styling2 .sec__container--secondary .desc {
  margin-top: 26px;
}

.styling2 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin: 8px auto 0 0;
  width: 330px;
}

.styling2 .sec__container--secondary .credit:nth-child(3) {
  margin-right: 10px;
}

/* styling3 */
.styling3 {
  display: block;
  margin: 133px auto 0;
  padding-left: 6px;
  width: 700px;
}

.styling3 .sec__container--primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styling3 .sec__container--primary .img1 {
  margin: 0 50px 0 0;
  width: 400px;
}

.styling3 .sec__container--primary .border-animation.active {
  position: absolute;
  top: -13px;
  right: auto;
  bottom: auto;
  left: -13px;
  height: 600px;
  width: 400px;
}

.styling3 .sec__container--primary .desc__container {
  margin: auto 0 0 0;
  width: 250px;
}

.styling3 .sec__container--primary .desc {
  letter-spacing: 1px;
  margin: 20px auto 14px 0;
}

.styling3 .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-top: 60px;
  padding-left: 12px;
}

.styling3 .sec__container--secondary .img2 {
  margin: 0 auto 0 0;
  width: 380px;
}

.styling3 .sec__container--secondary .credit__container {
  margin: auto 30px 0 auto;
  position: relative;
  top: 4px;
  width: 200px;
}

.styling3 .sec__container--secondary .credit:nth-child(1) {
  text-align: right;
}

.styling3 .sec__container--secondary .credit:nth-child(4) {
  text-align: right;
}

.styling3 .sec__container--secondary _:-ms-lang(x)::-ms-backdrop, .styling3 .sec__container--secondary .credit__container {
  height: 150px;
}

/* styling4 */
.styling4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 132px auto 0;
  padding-right: 16px;
  width: 942px;
}

.styling4 .sec__container--primary {
  margin-top: -11px;
}

.styling4 .sec__container--primary .img1 {
  margin: 58px 100px 0 0;
  width: 420px;
}

.styling4 .sec__container--secondary .img2 {
  margin: 0;
  position: relative;
  width: 420px;
}

.styling4 .sec__container--secondary .border-animation.active {
  content: "";
  position: absolute;
  top: -13px;
  right: auto;
  bottom: auto;
  left: 10px;
  height: 630px;
  width: 420px;
}

.styling4 .sec__container--secondary .desc {
  margin-top: 26px;
  letter-spacing: 1px;
}

.styling4 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin: 8px auto 0 0;
  width: 330px;
}

.styling4 .sec__container--secondary .credit:nth-child(3) {
  margin-right: 10px;
}

/* styling5 */
.styling5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 127px auto 0;
  width: 780px;
}

.styling5 .sec__container--primary {
  padding-right: 18px;
}

.styling5 .sec__container--primary .img1 {
  margin: 0 auto;
  width: 400px;
}

.styling5 .sec__container--primary .border-animation.active {
  position: absolute;
  top: -13px;
  right: auto;
  bottom: auto;
  left: 10px;
  height: 600px;
  width: 400px;
}

.styling5 .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 60px;
}

.styling5 .sec__container--secondary .img2 {
  margin: 0 70px 0 0;
  width: 380px;
}

.styling5 .sec__container--secondary .desc__container {
  margin: auto 0;
  padding-top: 6px;
  width: 324px;
}

.styling5 .sec__container--secondary .sec-title {
  padding-left: 4px;
}

.styling5 .sec__container--secondary .desc {
  margin-top: 24px;
}

.styling5 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin: 6px auto auto 0;
}

.styling5 .sec__container--secondary .credit:nth-child(4) {
  margin-right: 10px;
}

/* styling6 */
.styling6 {
  display: block;
  margin: 122px auto 0;
  padding-right: 10px;
  width: 815px;
}

.styling6 .sec__container--primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.styling6 .sec__container--primary .img1 {
  margin: 0 0 0 83px;
  width: 420px;
}

.styling6 .sec__container--primary .border-animation.active {
  position: absolute;
  top: 10px;
  right: auto;
  bottom: auto;
  left: -13px;
  height: 630px;
  width: 420px;
}

.styling6 .sec__container--primary .desc__container {
  margin: auto 0;
  padding-top: 6px;
  width: 310px;
}

.styling6 .sec__container--primary .desc {
  letter-spacing: 1px;
  margin-top: 24px;
}

.styling6 .sec__container--primary .desc .spacing {
  letter-spacing: 1.3px;
}

.styling6 .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-top: 72px;
  padding-right: 20px;
}

.styling6 .sec__container--secondary .img2 {
  margin: 100px 0 0 0;
  width: 360px;
}

.styling6 .sec__container--secondary .img-credit__container {
  margin: 0 60px 0 0;
  width: 350px;
}

.styling6 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin: 24px auto 0 0;
}

.styling6 .sec__container--secondary .credit:nth-child(1) {
  margin-right: 10px;
}

/* styling7 */
.styling7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: 126px auto 0;
  padding-right: 20px;
  width: 940px;
}

.styling7 .sec__container--primary {
  margin-left: 100px;
  width: 420px;
}

.styling7 .sec__container--primary .img1 {
  margin: 0;
}

.styling7 .sec__container--primary .border-animation.active {
  position: absolute;
  top: -13px;
  right: auto;
  bottom: auto;
  left: 10px;
  height: 630px;
  width: 420px;
}

.styling7 .sec__container--primary .desc {
  letter-spacing: 1px;
  margin-top: 25px;
}

.styling7 .sec__container--secondary {
  width: 420px;
}

.styling7 .sec__container--secondary .sec-title {
  margin-top: -12px;
}

.styling7 .sec__container--secondary .img2 {
  margin: 58px 0 0 0;
}

.styling7 .sec__container--secondary .credit__container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  margin: 25px auto 0 0;
  padding-right: 40px;
}

.styling7 .sec__container--secondary .credit:nth-child(5) {
  margin-right: 10px;
}

/* style of checkall__btn */
.checkall__btn {
  margin: 95px auto 140px;
  position: relative;
  right: 4px;
}

/* ===============================================
    * Style of Tablet *
=============================================== */
@media only screen and (max-device-width: 1024px) {
  /* style of heading-text */
  .heading-text {
    font-size: calc(74 * (100vw / 1400));
    letter-spacing: calc(5.18 * (100vw / 1400));
    margin: calc(50 * (100vw / 1400)) auto 0;
  }
  .heading-text .subtitle {
    font-size: calc(18 * (100vw / 1400));
    letter-spacing: calc(3.24 * (100vw / 1400));
    margin-bottom: calc(-58 * (100vw / 1400));
  }
  .heading-text .genre {
    font-size: calc(38 * (100vw / 1400));
    letter-spacing: calc(10.26 * (100vw / 1400));
    margin-top: calc(-5 * (100vw / 1400));
  }
  /* style of lineup */
  .lineup {
    height: calc(615 * (100vw / 1400));
    margin: calc(54 * (100vw / 1400)) -200% 0;
    padding: 0 200%;
    width: 100%;
  }
  .lineup .sec-title {
    font-size: calc(40 * (100vw / 1400));
    letter-spacing: calc(4.4 * (100vw / 1400));
    padding-top: calc(45 * (100vw / 1400));
    right: calc(4 * (100vw / 1400));
  }
  .lineup-img__container {
    margin: calc(40 * (100vw / 1400)) auto 0;
    width: calc(880 * (100vw / 1400));
  }
  .lineup .item {
    margin-right: calc(12 * (100vw / 1400));
  }
  .lineup .viewmore__btn {
    border: solid calc(1 * (100vw / 1400)) #000;
    font-size: calc(18 * (100vw / 1400));
    height: calc(34 * (100vw / 1400));
    letter-spacing: calc(1.08 * (100vw / 1400));
    line-height: calc(34 * (100vw / 1400));
    margin: calc(50 * (100vw / 1400)) auto calc(80 * (100vw / 1400));
    right: calc(4 * (100vw / 1400));
    width: calc(158 * (100vw / 1400));
  }
  /* style of each section */
  /* common style */
  .sec-title {
    font-size: calc(54 * (100vw / 1400));
  }
  .desc {
    font-size: calc(13 * (100vw / 1400));
    letter-spacing: calc(0.65 * (100vw / 1400));
  }
  .d-quotation {
    font-size: calc(13 * (100vw / 1400));
    letter-spacing: calc(0.65 * (100vw / 1400));
    margin: 0 calc(2 * (100vw / 1400));
  }
  .credit {
    font-size: calc(12 * (100vw / 1400));
    letter-spacing: calc(1.2 * (100vw / 1400));
  }
  .credit .discount {
    margin-left: calc(5 * (100vw / 1400));
  }
  .credit .discount-rate {
    font-size: calc(10 * (100vw / 1400));
    letter-spacing: calc(1 * (100vw / 1400));
  }
  /* styling1 */
  .styling1 {
    margin: calc(120 * (100vw / 1400)) auto 0;
    width: calc(880 * (100vw / 1400));
  }
  .styling1 .sec__container--primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .styling1 .sec__container--primary .img1 {
    margin: 0 calc(70 * (100vw / 1400)) 0 0;
    width: calc(420 * (100vw / 1400));
  }
  .styling1 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(12 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(10 * (100vw / 1400));
    height: calc(630 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling1 .sec__container--primary .desc__container {
    margin: auto auto auto 0;
    width: calc(292 * (100vw / 1400));
  }
  .styling1 .sec__container--primary .desc {
    margin-top: calc(23 * (100vw / 1400));
    padding-left: calc(1 * (100vw / 1400));
  }
  .styling1 .sec__container--secondary {
    margin-top: calc(72 * (100vw / 1400));
    padding-right: calc(36 * (100vw / 1400));
  }
  .styling1 .sec__container--secondary .img2 {
    margin: 0 0 0 auto;
    width: calc(380 * (100vw / 1400));
  }
  .styling1 .sec__container--secondary .credit__container {
    margin: auto 0 0 auto;
    top: calc(4 * (100vw / 1400));
    width: calc(400 * (100vw / 1400));
  }
  .styling1 .sec__container--secondary .credit:nth-child(2n) {
    margin-right: calc(10 * (100vw / 1400));
  }
  .styling1 .sec__container--secondary _:-ms-lang(x)::-ms-backdrop, .styling1 .sec__container--secondary .credit__container {
    height: calc(100 * (100vw / 1400));
  }
  /* styling2 */
  .styling2 {
    margin: calc(120 * (100vw / 1400)) auto 0;
    padding-left: calc(6 * (100vw / 1400));
    width: calc(952 * (100vw / 1400));
  }
  .styling2 .sec__container--primary .sec-title {
    margin: calc(2 * (100vw / 1400)) auto 0 calc(-12 * (100vw / 1400));
  }
  .styling2 .sec__container--primary .img1 {
    margin: calc(60 * (100vw / 1400)) calc(100 * (100vw / 1400)) 0 0;
    width: calc(450 * (100vw / 1400));
  }
  .styling2 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(-13 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(-13 * (100vw / 1400));
    height: calc(675 * (100vw / 1400));
    width: calc(450 * (100vw / 1400));
  }
  .styling2 .sec__container--secondary .img2 {
    margin: 0;
    width: calc(400 * (100vw / 1400));
  }
  .styling2 .sec__container--secondary .desc {
    margin-top: calc(26 * (100vw / 1400));
  }
  .styling2 .sec__container--secondary .credit__container {
    margin: calc(8 * (100vw / 1400)) auto 0 0;
    width: calc(380 * (100vw / 1400));
  }
  .styling2 .sec__container--secondary .credit:nth-child(3) {
    margin-right: calc(10 * (100vw / 1400));
  }
  /* styling3 */
  .styling3 {
    margin: calc(133 * (100vw / 1400)) auto 0;
    padding-left: calc(6 * (100vw / 1400));
    width: calc(700 * (100vw / 1400));
  }
  .styling3 .sec__container--primary .img1 {
    margin: 0 calc(50 * (100vw / 1400)) 0 0;
    width: calc(400 * (100vw / 1400));
  }
  .styling3 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(-13 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(-13 * (100vw / 1400));
    height: calc(600 * (100vw / 1400));
    width: calc(400 * (100vw / 1400));
  }
  .styling3 .sec__container--primary .desc__container {
    margin: auto 0 0 0;
    width: calc(250 * (100vw / 1400));
  }
  .styling3 .sec__container--primary .desc {
    letter-spacing: calc(1 * (100vw / 1400));
    margin: calc(20 * (100vw / 1400)) auto calc(14 * (100vw / 1400)) 0;
  }
  .styling3 .sec__container--secondary {
    margin-top: calc(60 * (100vw / 1400));
    padding-left: calc(12 * (100vw / 1400));
  }
  .styling3 .sec__container--secondary .img2 {
    margin: 0 auto 0 0;
    width: calc(380 * (100vw / 1400));
  }
  .styling3 .sec__container--secondary .credit__container {
    margin: auto calc(30 * (100vw / 1400)) 0 auto;
    top: calc(4 * (100vw / 1400));
    width: calc(210 * (100vw / 1400));
  }
  .styling3 .sec__container--secondary _:-ms-lang(x)::-ms-backdrop, .styling3 .sec__container--secondary .credit__container {
    height: calc(150 * (100vw / 1400));
  }
  /* styling4 */
  .styling4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: calc(132 * (100vw / 1400)) auto 0;
    padding-right: calc(16 * (100vw / 1400));
    width: calc(942 * (100vw / 1400));
  }
  .styling4 .sec__container--primary {
    margin-top: calc(-11 * (100vw / 1400));
  }
  .styling4 .sec__container--primary .img1 {
    margin: calc(58 * (100vw / 1400)) calc(100 * (100vw / 1400)) 0 0;
    width: calc(420 * (100vw / 1400));
  }
  .styling4 .sec__container--secondary .img2 {
    margin: 0;
    width: calc(420 * (100vw / 1400));
  }
  .styling4 .sec__container--secondary .border-animation.active {
    content: "";
    position: absolute;
    top: calc(-13 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(10 * (100vw / 1400));
    height: calc(630 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling4 .sec__container--secondary .desc {
    margin-top: calc(26 * (100vw / 1400));
    letter-spacing: calc(1 * (100vw / 1400));
  }
  .styling4 .sec__container--secondary .credit__container {
    margin: calc(8 * (100vw / 1400)) auto 0 0;
    width: calc(400 * (100vw / 1400));
  }
  .styling4 .sec__container--secondary .credit:nth-child(3) {
    margin-right: calc(10 * (100vw / 1400));
  }
  /* styling5 */
  .styling5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: calc(127 * (100vw / 1400)) auto 0;
    width: calc(880 * (100vw / 1400));
  }
  .styling5 .sec__container--primary {
    padding-right: calc(18 * (100vw / 1400));
  }
  .styling5 .sec__container--primary .img1 {
    margin: 0 auto;
    width: calc(400 * (100vw / 1400));
  }
  .styling5 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(-13 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(10 * (100vw / 1400));
    height: calc(600 * (100vw / 1400));
    width: calc(400 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary {
    margin-top: calc(60 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary .img2 {
    margin: 0 calc(70 * (100vw / 1400)) 0 0;
    width: calc(410 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary .desc__container {
    margin: auto 0;
    padding-top: calc(6 * (100vw / 1400));
    width: calc(410 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary .sec-title {
    padding-left: calc(4 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary .desc {
    margin-top: calc(24 * (100vw / 1400));
  }
  .styling5 .sec__container--secondary .credit__container {
    margin: calc(6 * (100vw / 1400)) auto auto 0;
  }
  .styling5 .sec__container--secondary .credit:nth-child(4) {
    margin-right: calc(10 * (100vw / 1400));
  }
  /* styling6 */
  .styling6 {
    margin: calc(122 * (100vw / 1400)) auto 0;
    padding-right: calc(10 * (100vw / 1400));
    width: calc(815 * (100vw / 1400));
  }
  .styling6 .sec__container--primary .img1 {
    margin: 0 0 0 calc(83 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling6 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(10 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(-13 * (100vw / 1400));
    height: calc(630 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling6 .sec__container--primary .desc__container {
    margin: auto 0;
    padding-top: calc(6 * (100vw / 1400));
    width: calc(310 * (100vw / 1400));
  }
  .styling6 .sec__container--primary .desc {
    letter-spacing: calc(1 * (100vw / 1400));
    margin-top: calc(24 * (100vw / 1400));
  }
  .styling6 .sec__container--primary .desc .spacing {
    letter-spacing: calc(1.3 * (100vw / 1400));
  }
  .styling6 .sec__container--secondary {
    margin-top: calc(72 * (100vw / 1400));
    padding-right: calc(20 * (100vw / 1400));
  }
  .styling6 .sec__container--secondary .img2 {
    margin: calc(100 * (100vw / 1400)) 0 0 0;
    width: calc(360 * (100vw / 1400));
  }
  .styling6 .sec__container--secondary .img-credit__container {
    margin: 0 calc(60 * (100vw / 1400)) 0 0;
    width: calc(370 * (100vw / 1400));
  }
  .styling6 .sec__container--secondary .credit__container {
    margin: calc(24 * (100vw / 1400)) auto 0 0;
  }
  .styling6 .sec__container--secondary .credit:nth-child(1) {
    margin-right: calc(10 * (100vw / 1400));
  }
  /* styling7 */
  .styling7 {
    margin: calc(126 * (100vw / 1400)) auto 0;
    padding-right: calc(20 * (100vw / 1400));
    width: calc(940 * (100vw / 1400));
  }
  .styling7 .sec__container--primary {
    margin-left: calc(100 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling7 .sec__container--primary .img1 {
    margin: 0;
  }
  .styling7 .sec__container--primary .border-animation.active {
    position: absolute;
    top: calc(-13 * (100vw / 1400));
    right: auto;
    bottom: auto;
    left: calc(10 * (100vw / 1400));
    height: calc(630 * (100vw / 1400));
    width: calc(420 * (100vw / 1400));
  }
  .styling7 .sec__container--primary .desc {
    letter-spacing: calc(1 * (100vw / 1400));
    margin-top: calc(25 * (100vw / 1400));
  }
  .styling7 .sec__container--secondary {
    width: calc(420 * (100vw / 1400));
  }
  .styling7 .sec__container--secondary .sec-title {
    margin-top: calc(-12 * (100vw / 1400));
  }
  .styling7 .sec__container--secondary .img2 {
    margin: calc(58 * (100vw / 1400)) 0 0 0;
  }
  .styling7 .sec__container--secondary .credit__container {
    margin: calc(25 * (100vw / 1400)) auto 0 0;
    padding-right: calc(10 * (100vw / 1400));
  }
  .styling7 .sec__container--secondary .credit:nth-child(5) {
    margin-right: calc(10 * (100vw / 1400));
  }
  /* style of checkall__btn */
  .checkall__btn {
    margin: calc(95 * (100vw / 1400)) auto calc(140 * (100vw / 1400));
    right: calc(4 * (100vw / 1400));
  }
}