/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.js-fadeIn {
  opacity: 0;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -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);
}

/* first view setting for slick */
.item-slider {
  opacity: 0;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

.item-slider.slick-initialized {
  opacity: 1;
}

/* =====================================
    * 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 responsive objects */
main .sp-component {
  display: block;
}

main .pc-component {
  display: none;
}

@media only screen and (min-device-width: 560px) {
  main .sp-component {
    display: none;
  }
  main .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: vincente, serif;
  font-size: calc(46 * (100vw / 750));
  font-weight: 600;
  letter-spacing: calc(7.36 * (100vw / 750));
  line-height: calc(160 * (100vw / 750));
  text-align: center;
}

/* =====================================
    *  Style of SP *
===================================== */
/* Style of heading */
.heading {
  display: block;
  margin: calc(105 * (100vw / 750)) auto 0;
  width: calc(640 * (100vw / 750));
}

.heading-txt {
  font-family: vincente, serif;
  font-size: calc(112 * (100vw / 750));
  font-weight: 600;
  letter-spacing: calc(17.92 * (100vw / 750));
  padding-bottom: calc(30 * (100vw / 750));
  text-align: center;
}

.heading-txt::after {
  content: "";
  background-color: #000;
  display: block;
  height: 1px;
  margin-top: calc(18 * (100vw / 750));
  width: 100%;
}

.subtitle-txt {
  font-family: vincente, serif;
  font-size: calc(60 * (100vw / 750));
  font-weight: bold;
  letter-spacing: calc(10 * (100vw / 750));
  line-height: 1.04;
  text-align: center;
}

/* Style of main__container */
.main__container .slick-slide {
  margin-left: 0 !important;
}

.item1__container--inner {
  margin: calc(90 * (100vw / 750)) auto 0;
  width: calc(639 * (100vw / 750));
}

.item2__container {
  margin: calc(140 * (100vw / 750)) calc(37 * (100vw / 750)) 0 auto;
  width: calc(526 * (100vw / 750));
}

.item3__container--inner {
  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(140 * (100vw / 750)) auto 0;
}

.item3-img1 {
  margin: auto auto 0 calc(37 * (100vw / 750));
  width: calc(413 * (100vw / 750));
}

.item3-img2 {
  margin: calc(40 * (100vw / 750)) calc(37 * (100vw / 750)) 0 auto;
  width: calc(526 * (100vw / 750));
}

.item4__container {
  margin: calc(140 * (100vw / 750)) auto 0;
  width: calc(640 * (100vw / 750));
}

.item5__container--inner {
  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(140 * (100vw / 750)) auto 0;
}

.item5-img1 {
  margin: auto 0 0 auto;
  width: calc(563 * (100vw / 750));
}

.item5-img2 {
  margin: calc(-345 * (100vw / 750)) auto 0 0;
  width: calc(376 * (100vw / 750));
}

.item6__container--inner {
  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(140 * (100vw / 750)) auto 0;
}

.item6-img1 {
  margin: auto auto 0 calc(37 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.item6-img2 {
  margin: calc(40 * (100vw / 750)) calc(37 * (100vw / 750)) 0 auto;
  width: calc(450 * (100vw / 750));
}

.item7__container {
  margin: calc(140 * (100vw / 750)) auto 0;
  width: calc(563 * (100vw / 750));
}

.item8__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0 0;
  width: calc(640 * (100vw / 750));
}

.item9__container {
  margin: calc(140 * (100vw / 750)) 0 0 auto;
  width: calc(600 * (100vw / 750));
}

.item10__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item10-img1 {
  margin: auto;
  width: calc(675 * (100vw / 750));
}

.item10-img2 {
  margin: calc(40 * (100vw / 750)) auto 0;
  width: calc(490 * (100vw / 750));
}

.item11__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item11__container .inner--bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: calc(40 * (100vw / 750)) auto 0;
  width: calc(690 * (100vw / 750));
}

.item11-img1 {
  margin: auto;
  width: calc(640 * (100vw / 750));
}

.item11-img2, .item11-img3 {
  width: calc(330 * (100vw / 750));
}

.item12__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item12-img1 {
  margin-left: calc(37 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.item12-img2 {
  margin: calc(40 * (100vw / 750)) calc(37 * (100vw / 750)) 0 auto;
  width: calc(450 * (100vw / 750));
}

.item13__container {
  margin: calc(140 * (100vw / 750)) auto 0;
  width: calc(676 * (100vw / 750));
}

.item14__container--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: calc(140 * (100vw / 750)) auto 0;
  width: calc(676 * (100vw / 750));
}

.item14-img2 {
  width: calc(676 * (100vw / 750));
}

.item15__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item15__container .inner--bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 80px auto 0;
  width: 900px;
}

.item15-img1 {
  position: relative;
  z-index: 1;
  margin: auto 0 0 auto;
  width: calc(525 * (100vw / 750));
}

.item15-img3 {
  position: relative;
  z-index: 2;
  margin: calc(-388 * (100vw / 750)) auto 0 0;
  width: calc(375 * (100vw / 750));
}

.item16__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item16-img1 {
  margin: auto;
  width: calc(600 * (100vw / 750));
}

.item16-img2 {
  margin: calc(40 * (100vw / 750)) auto 0;
  width: calc(450 * (100vw / 750));
}

.item17__container {
  margin: calc(140 * (100vw / 750)) auto 0;
  width: calc(600 * (100vw / 750));
}

.item18__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item18-img1 {
  margin: auto auto 0 calc(30 * (100vw / 750));
  width: calc(562 * (100vw / 750));
}

.item18-img2 {
  margin: calc(40 * (100vw / 750)) calc(30 * (100vw / 750)) 0 auto;
  width: calc(450 * (100vw / 750));
}

.item19__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item19__container--inner .inner--bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: calc(40 * (100vw / 750)) auto 0;
  width: calc(690 * (100vw / 750));
}

.item19-img1 {
  margin: auto;
  width: calc(526 * (100vw / 750));
}

.item19-img2, .item19-img3 {
  width: calc(330 * (100vw / 750));
}

.item20__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item20-img2 {
  margin: auto;
  width: calc(600 * (100vw / 750));
}

.item20-img3 {
  margin: calc(40 * (100vw / 750)) auto 0;
  width: calc(488 * (100vw / 750));
}

.item21__container--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item21-img1 {
  margin: calc(40 * (100vw / 750)) auto 0 0;
  width: calc(562 * (100vw / 750));
}

.item21-img2 {
  margin: auto calc(30 * (100vw / 750)) 0 auto;
  width: calc(450 * (100vw / 750));
}

.item22__container--inner {
  margin: calc(140 * (100vw / 750)) auto 0;
}

.item22__container--inner .inner--bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: calc(40 * (100vw / 750));
  width: calc(750 * (100vw / 750));
}

.item22-img1 {
  margin: auto;
  width: calc(600 * (100vw / 750));
}

.item22-img2, .item22-img3 {
  width: calc(365 * (100vw / 750));
}

.checkall__btn {
  margin: calc(160 * (100vw / 750)) auto 0;
}

.genre {
  display: inline-block;
  font-family: vincente, serif;
  font-size: calc(34 * (100vw / 750));
  letter-spacing: calc(5.44 * (100vw / 750));
  line-height: 0.82;
  margin-right: calc(80 * (100vw / 750));
  position: relative;
}

.genre-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: block;
  margin: calc(54 * (100vw / 750)) auto 0;
  padding: 0 calc(70 * (100vw / 750)) calc(200 * (100vw / 750));
  text-align: center;
}

.genre > a {
  color: #000;
  text-decoration: none;
}

.genre::after {
  content: "/";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(116 * (100vw / 750));
  -webkit-transform: rotate(12deg);
      -ms-transform: rotate(12deg);
          transform: rotate(12deg);
}

.genre__sec--bottom {
  margin-top: calc(42 * (100vw / 750));
}

.genre1 {
  margin-right: calc(66 * (100vw / 750));
}

.genre2::after {
  content: "/";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(175 * (100vw / 750));
  -webkit-transform: rotate(12deg);
      -ms-transform: rotate(12deg);
          transform: rotate(12deg);
}

.genre3 {
  margin-right: calc(66 * (100vw / 750));
}

.genre3::after {
  content: "/";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(98 * (100vw / 750));
  -webkit-transform: rotate(12deg);
      -ms-transform: rotate(12deg);
          transform: rotate(12deg);
}

.genre4, .genre6 {
  margin-right: 0;
  padding: 0;
}

.genre4::after, .genre6::after {
  content: "";
}