@charset "UTF-8";


/* ---------------------------------------------------------------- */
/* #region Category Layout  */
/* ---------------------------------------------------------------- */
.category {}

.category__breadcrumb {}

.category__top {}

.category__list {
  padding-top: 32px;
  padding-bottom: 48px;

  @media (min-width: 769px) {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.category__about {}

.category__lineup {
  padding-top: 40px;
  padding-bottom: 40px;

  @media (min-width: 769px) {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}

.category__related {
  padding-top: 32px;
  padding-bottom: 40px;

  @media (min-width: 769px) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.category__history {
  padding-top: 32px;
  padding-bottom: 40px;

  @media (min-width: 769px) {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

/* #endregion Category Layout */


/* ---------------------------------------------------------------- */
/* #region Category Common Components */
/* ---------------------------------------------------------------- */

/* セクション見出し */
.categoryHeading {}

.categoryHeading__eyebrow {
  color: var(--color-gold);
  font-family: var(--font-HankenGrotesk);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.13px;
}

.categoryHeading__text {
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.44px;
}

/* 商品グリッド */
.productsGrid {
  display: grid;
  gap: 32px 16px;
  justify-content: center;
  grid-template-columns: repeat(2, 150px);

  @media (min-width: 769px) {
    gap: 40px;
    grid-template-columns: repeat(auto-fit, 171px);
  }
}

.productsGrid__item {}

/* ラインナップグリッド */
.lineupGrid {
  display: grid;
  gap: 32px 16px;
  justify-content: center;
  grid-template-columns: repeat(2, 150px);

  @media (min-width: 769px) {
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(254px, auto));
  }
}

.lineupGrid__item {}

/* #endregion Category Common Components */


/* ---------------------------------------------------------------- */
/* #region Category ラインナップ  */
/* ---------------------------------------------------------------- */

.categoryLineup {}

.categoryLineup__heading {
  margin-bottom: 40px;

  @media (min-width: 769px) {
    margin-bottom: 80px;
  }
}

.categoryLineup__body {}

/* #endregion Category ラインナップ */


/* outlet */
/* #　追加　商品ヘッドラインアウトレット */
.category__outlet {
  position: relative;
}

.category__outlet__banner {
  width: 100%;
  height: 491px;

  @media (min-width: 769px) {
    height: 310px;
  }
}

.category__outlet__banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}

.category__outlet__body {
  position: absolute;
  left: 0;
  bottom: 32px;
  width: 100%;
  padding-left: 22px;

  @media (min-width: 769px) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding-left: 0;
  }
}

.category__outlet__title {
  color: var(--color-white);
  font-size: 29px;
  font-family: var(--font-HankenGrotesk);
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.2);


  @media (min-width: 769px) {
    font-size: 85px;
  }
}

.category__outlet__text {
  font-size: 14px;
  font-family: var(--font-NotoSansJP);
  color: var(--color-white);
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.2);

  @media (min-width: 769px) {
    font-size: 25px;
  }
}

.category__banner {
  width: 100%;
}

.category__banner img {
  width: 100%;
}

.category__outlet__info {
  max-width: 732px;
  padding: 0 16px;
  margin: 0 auto;
  margin-top: 40px;
}

.category__outlet__info h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-bottom: 32px;

  @media (min-width: 769px) {
    font-size: 20px;
  }
}

.category__outlet__info p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;

  @media (min-width: 769px) {
    font-size: 14px;
  }
}

.category__outlet__info ul {
  list-style: disc;
  padding-left: 20px;
  margin: 16px 0;
}

.category__outlet__info ul li {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;

  @media (min-width: 769px) {
    font-size: 14px;
  }
}

/* トグルアコーディオン */
.category__outlet__accordion {
  margin-top: 24px;
}

.category__outlet__accordion-item {
  border: 1px solid #C8C8C8;
  background-color: #fff;
  overflow: hidden;
}

.category__outlet__accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  transition: opacity 0.3s linear;
  -webkit-tap-highlight-color: transparent;
}

.category__outlet__accordion-button:hover {
  opacity: 0.7;
}

.category__outlet__accordion-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0;
  flex: 1;

  @media (min-width: 769px) {
    font-size: 16px;
  }
}

.category__outlet__accordion-icon {
  flex: 0 0 20px;
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-mask-image: url(../../../images/common/icons/plus.svg);
  mask-image: url(../../../images/common/icons/plus.svg);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #2A2727;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.category__outlet__accordion-button.active .category__outlet__accordion-icon {
  -webkit-mask-image: url(../../../images/common/icons/minus.svg);
  mask-image: url(../../../images/common/icons/minus.svg);
}

.category__outlet__accordion-contents {
  padding: 0 16px;
  height: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s linear, height 0.3s ease;
}

.category__outlet__accordion-button.active + .category__outlet__accordion-contents {
  height: auto;
  visibility: visible;
  opacity: 1;
  padding: 16px;
  padding-top: 0;
}

.category__outlet__accordion-contents p {
  margin-bottom: 12px;
}

.category__outlet__accordion-contents p:last-child {
  margin-bottom: 0;
}

.category__outlet__accordion-contents ul {
  margin-top: 8px;
  padding-top: 8px;
  margin-bottom: 0;
  border-top: 1px solid #C8C8C8;
}