@charset "utf-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ここからファーストビュー */

.first-view {
  /* border: 1px solid #102344; */
  margin-top: 70px;
}

.first-view-inner {
  /* border: 2px solid #F79A0F; */
  height: calc(100vh - 210px);
  margin-left: auto;
  margin-right: auto;
}

.slider img {
  /* border: 2px solid #F79A0F; */
  width: 100vw;
}

.slider .sp {
  display: none;
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}



.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots li:nth-child(4) {
  display: none;
}

.slick-dots li:nth-child(5) {
  display: none;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  /*ドットボタンのサイズ*/
  height: 8px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc;
  /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #102344;
  /*ドットボタンの現在地表示の色*/
}

@media (min-width: 1876px) {
  .slick-dots {
    margin: -550px 0 0 0;
  }
}

@media (max-width: 700px) {
  .first-view {
    /* border: 1px solid #102344; */
    margin-top: 50px;
  }

  .first-view-inner {
    /* border: 2px solid #F79A0F; */
    height: 210px;
  }

  .slider .sp {
    display: block;
  }

  .slider .pc {
    display: none;
  }
}

/* ここまでファーストビュー */

/* ここからカテゴリー */
.category-menu {
  margin-top: 48px;
}

/* ここからカテゴリー＞ページリンク */
.page-link {
  /* border: 2px solid #F79A0F; */
  display: flex;
  max-width: calc(60%);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 0;
  justify-content: space-between;
  align-items: center;
}

.page-link li {
  /* border: 2px solid #F79A0F; */
  margin-left: 8px;
  margin-right: 8px;
  white-space: nowrap;
}

.page-link li:first-child {
  margin-left: 0;
}

.page-link li:last-child {
  margin-right: 0;
}

.page-link p {
  text-align: center;
}

.page-link .en {
  text-transform: capitalize;
  color: #B3ADA7;
  font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: italic;
  margin-top: -5px;
}

@media (max-width: 700px) {
  .page-link {
    /* border: 2px solid #F79A0F; */
    display: block;
    max-width: 80%;
  }

  .page-link li {
    margin-top: 16px;
  }
}

/* ここからカテゴリー＞詳細 */
.category-list {}

.category-item {
  /* border: 1px solid #102344; */
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.category-item section {
  /* border: 1px solid #102344; */
  margin-top: 80px;
}

.category-item h2 {
  color: #C8AAB1;
  font-family: "Noto Serif Display", serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
}


.category-item ul {
  /* border: 1px solid #102344; */
  display: flex;
  margin-top: 16px;
}

.category-item li {
  /* border: 1px solid #102344; */
  margin: 32px 32px 0 0;
  width: 100%;
}

.category-item li:last-child {
  margin-right: 0;
}

.category-item dl {
  margin-top: 8px;
}

.category-item dt {
  font-weight: bold;
}

#color dt,
#price dt {
  text-align: center;
  white-space: nowrap;
}

.category-item dd {
  font-size: 13px;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .category-item section {
    /* border: 1px solid #102344; */
    margin-top: 48px;
  }

  #season ul,
  #style ul,
  #scene ul {
    overflow-x: scroll;
  }

  #season li,
  #style li,
  #scene li {
    flex-shrink: 0;
    width: 150px;
    margin: 16px 16px 16px 0;
  }

  #season li:last-child,
  #style li:last-child,
  #scene li:last-child {
    margin: 16px 0 16px 0;
  }

  #color ul,
  #price ul {
    /* border: 1px solid #102344; */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 120pxd);
  }

  .color-item01,
  .price-item01 {
    grid-column: 1/3;
    grid-row: 1/2;
  }

  .color-item02,
  .price-item02 {
    grid-column: 3/5;
    grid-row: 1/2;
  }

  .color-item03,
  .price-item03 {
    grid-column: 5/7;
    grid-row: 1/2;
  }

  .color-item04,
  .price-item04 {
    grid-column: 2/4;
    grid-row: 2/3;
  }

  .color-item05,
  .price-item05 {
    grid-column: 4/6;
    grid-row: 2/3;
  }

  #season dt,
  #color dt,
  #style dt,
  #scene dt {
    font-size: 12px;
  }

  #color li,
  #price li {
    /* border: 1px solid #102344; */
    margin: 8px;
  }
}


/* ここまでカテゴリー */