@charset "UTF-8";

/**********************************************************
* 商品ページ
**********************************************************/
.product {
  padding: 0 0 56px;
  color: var(--color-light);
}
@media (768px <= width < 1920px) {
  .product {
    padding: 0 0 2.917vw;
  }
}
@media (width < 768px) {
  .product {
    padding: 0 0 8vw;
  }
}
.product .meta {
  display: inline-block;
  margin-top: 1em;
}

/*
一覧ページ
================================================ */
.product-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 290px;
}
.l-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 180px;
  margin-bottom: 230px;
}
.l-label > label {
  padding: 5px 10px 10px;
  font-size: 30px;
  line-height: 1;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  text-align: center;
  cursor: pointer;
}
.product-tab input,
.product-tab__contents {
  display: none;
}
.l-label > label:hover,
.l-label label:has(:checked) {
  border-top: 3px solid var(--color-light);
  border-bottom: 3px solid var(--color-light);
}
.product-tab__contents {
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  justify-content: center;
  gap: 160px 138px;
}
.product-tab__contents .product-item {
  flex-direction: column;
  gap: 20px;
}
.product-tab .item__img {
  width: 405px;
  height: 776px;
}
.product-tab__contents .item__info {
  display: flex;
  flex-direction: column;
}
@media (768px <= width < 1920px) {
  .product-tab {
    margin: 0 auto 15.104vw;
  }
  .l-label {
    gap: 9.375vw;
    margin-bottom: 11.979vw;
  }
  .l-label > label {
    padding: 0.26vw 0.521vw 0.521vw;
    border-top: 0.156vw solid transparent;
    border-bottom: 0.156vw solid transparent;
    font-size: 1.563vw;
  }
  .l-label > label:hover,
  .l-label label:has(:checked) {
    border-top: 0.156vw solid var(--color-light);
    border-bottom: 0.156vw solid var(--color-light);
  }
  .product-tab__contents {
    gap: 8.333vw 7.187vw;
  }
  .product-tab__contents .product-item {
    gap: 1.042vw;
  }
  .product-tab .item__img {
    width: 21.094vw;
    height: 40.417vw;
  }
}
@media (width < 768px) {
  .product-tab {
    margin: 0 auto 25.333vw;
  }
  .l-label {
    gap: 5.333vw;
    margin-bottom: 26.667vw;
  }
  .l-label > label {
    padding: 0.533vw 1.333vw 1.333vw;
    border-top: 0.4vw solid transparent;
    border-bottom: 0.4vw solid transparent;
    font-size: 4vw; /* 15px */
  }
  .l-label > label:hover,
  .l-label label:has(:checked) {
    border-top: 0.4vw solid var(--color-light);
    border-bottom: 0.4vw solid var(--color-light);
  }
  .product-tab__contents {
    gap: 20vw 2.667vw;
    padding: 0 2.667vw;
    width: 100%;
  }
  .product-tab__contents .product-item {
    gap: 2.667vw;
  }
  .product-tab .item__img {
    width: 33.6vw;
    height: 64.533vw;
  }
  .product-tab .item__img.item-label::before {
    top: 6.667vw;
    right: -4vw;
    width: 12.8vw;
    height: 12.8vw;
    background-size: 12.8vw 12.8vw;
  }
  .product .product-tab .item__info {
    text-align: left;
    font-size: 2.667vw;
  }
  .product .product-tab .product-name.en {
    font-size: 6.133vw;
  }
}

/* ===== シャンプー ===== */
.product-tab .item-shampoo .bottle img {
  width: 243px;
}
@media (768px <= width < 1920px) {
  .product-tab .item-shampoo .bottle img {
    width: 12.656vw;
  }
}
@media (width < 768px) {
  .product-tab .item-shampoo .bottle img {
    width: 21.333vw;
  }
}

/* ===== トリートメント ===== */
.product-tab .item-treatment .bottle img {
  width: 249px;
}
@media (768px <= width < 1920px) {
  .product-tab .item-treatment .bottle img {
    width: 12.969vw;
  }
}
@media (width < 768px) {
  .product-tab .item-treatment .bottle img {
    width: 21.333vw;
  }
}

/* ===== ヘアミルク ===== */
.product-tab .item-hairmilk .bottle img {
  width: 207px;
}
@media (768px <= width < 1920px) {
  .product-tab .item-hairmilk .bottle img {
    width: 10.781vw;
  }
}
@media (width < 768px) {
  .product-tab .item-hairmilk .bottle img {
    width: 18.133vw;
  }
}

/* ===== ヘアオイル ===== */
.product-tab .item-hairoil .bottle img {
  width: 193px;
}
@media (768px <= width < 1920px) {
  .product-tab .item-hairoil .bottle img {
    width: 10.052vw;
  }
}
@media (width < 768px) {
  .product-tab .item-hairoil .bottle img {
    width: 17.067vw;
  }
}


/*
詳細ページ
================================================ */
.product .note {
  margin: 260px auto 162px;
  text-align: justify;
}
.product sup {
  margin-left: -0.25em;
  margin-right: 0.25em;
  font-size: 14px;
  vertical-align: super;
}
.product sup.type-sup {
  margin: 0;
}
.product .item__info {
  font-size: 23px;
  letter-spacing: .05em;
}
.product .product-name.en {
  margin-bottom: .5em;
  font-size: 47px;
  font-weight: 700;
}
.product .product-name.jp {
  margin-bottom: 1em;
}
.product .description {
  line-height: 1.8;
}
@media (768px <= width < 1920px) {
  .product .item__info {
    font-size: 1.198vw;
  }
  .product .product-name.en {
    font-size: 2.448vw;
  }
  .product .note {
    margin: 13.542vw auto 8.438vw;
  }
  .product sup {
    font-size: 0.729vw;
  }
}
@media (width < 768px) {
  .product .item__info {
    text-align: center;
    gap: 4vw;
    font-size: 3.333vw; /* 12.5px */
  }
  .product .product-name.en {
    font-size: 6.133vw; /* 23px */
  }
  .product .note {
    margin: 19.467vw auto 10.667vw;
  }
  .product sup {
    font-size: 1.733vw; /* 6.5px */
  }
}

.item-label::before {
  position: absolute;
  top: 85px;
  left: -68px;
  content: "";
  display: block;
  width: 163px;
  height: 163px;
  background-size: 163px 163px;
  z-index: 1;
}
.item-hairmilk .item-label::before {
  background-image: url(../../img/products/label_hairmilk.svg?ver4);
}
.item-hairoil .item-label::before {
  background-image: url(../../img/products/label_hairoil.svg?ver2);
}
@media (768px <= width < 1920px) {
  .item-label::before {
    top: 4.427vw;
    left: -3.542vw;
    width: 8.49vw;
    height: 8.49vw;
    background-size: 8.49vw 8.49vw;
  }
}
@media (width < 768px) {
  .item-label::before {
    top: 11.333vw;
    right: -9.067vw;
    left: auto;
    width: 21.733vw;
    height: 21.733vw;
    background-size: 21.733vw 21.733vw;
  }
}

/* ===== label ===== */
.product .label {
  position: absolute;
  top: 400px;
  left: 0;
  padding: 70px 32px;
}
@media (768px <= width < 1920px) {
  .product .label {
    top: 20.833vw;
    padding: 3.646vw 1.667vw;
  }
}
@media (width < 768px) {
  .product .label {
    top: 40vw;
    padding: 3.8403vw 3.1203vw;
  }
}

/* ===== product-item ===== */
.product-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
}
@media (768px <= width < 1920px) {
  .product-item {
    gap: 4.688vw;
  }
}
@media (width < 768px) {
  .product-item {
    flex-direction: column;
    gap: 13.333vw;
  }
}

.points-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.points-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 26px;
  padding: 17px 0;
  position: relative;
  min-height: 78px;
  border-left: 2px solid var(--color-light);
}
.points-item:nth-child(3n) {
  border-right: 2px solid var(--color-light);
}
.points-item .txt {
  line-height: 1.2;
  font-size: 23px;
  letter-spacing: .05em;
}
.points-item.hline::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  width: calc(100% - 15px);
  height: 2px;
  background: var(--color-light);
}
@media (768px <= width < 1920px) {
  .points-item {
    margin: 0 0 1.354vw;
    padding: 0.885vw 0;
    min-height: 4.063vw;
    border-left: 0.104vw solid var(--color-light);
  }
  .points-item:nth-child(3n) {
    border-right: 0.104vw solid var(--color-light);
  }
  .points-item .txt {
    font-size: 1.198vw;
  }
  .points-item.hline::after {
    bottom: -0.677vw;
    width: calc(100% - 0.781vw);
    height: 0.104vw;
  }
}
@media (width < 768px) {
  .points-item {
    margin: 0 0 2.4vw;
    padding: 2.4vw 0;
    min-height: 11.2vw;
    border-left: 0.267vw solid var(--color-light);
  }
  .points-item:nth-child(3n) {
    border-right: 0.267vw solid var(--color-light);
  }
  .points-item .txt {
    font-size: 2.933vw; /* 11px */
  }
  .points-item.hline::after {
    bottom: -1.2vw;
    width: calc(100% - 2.667vw);
    height: 0.267vw;
  }
}

/* ===== product-section ===== */
.product-section {
  max-width: 1100px;
}
@media (768px <= width < 1920px) {
  .product-section {
    max-width: 57.292vw;
  }
}
@media (width < 768px) {
  .product-section {
    max-width: 88vw;
  }
}

/* ===== product-titleS ===== */
.product-titleS {
  flex-shrink: 0;
  padding: 28px 47px;
  width: fit-content;
  letter-spacing: .1em;
  font-size: 38px;
  border-top: 3px solid var(--color-light);
  border-bottom: 3px solid var(--color-light);
}
@media (768px <= width < 1920px) {
  .product-titleS {
    padding: 1.458vw 2.448vw;
    font-size: 1.979vw;
    border-top: 0.156vw solid var(--color-light);
    border-bottom: 0.156vw solid var(--color-light);
  }
}
@media (width < 768px) {
  .product-titleS {
    padding: 3.2vw 3.2vw;
    font-size: 4.667vw; /* 17.5px */
    border-top: 0.4vw solid var(--color-light);
    border-bottom: 0.4vw solid var(--color-light);
  }
}

/* ===== points ===== */
.points {
  margin: 85px auto 0;
}
@media (768px <= width < 1920px) {
  .points {
    margin: 4.427vw auto 0;
  }
}
@media (width < 768px) {
  .points {
    margin: 16.8vw auto 0;
  }
}

/* points-head */
.points-head {
  display: flex;
  align-items: center;
  gap: 74px;
  margin: 0 0 129px;
}
@media (768px <= width < 1920px) {
  .points-head {
    gap: 3.854vw;
    margin: 0 0 6.719vw;
  }
}
@media (width < 768px) {
  .points-head {
    flex-direction: column;
    gap: 7.467vw;
    margin: 0 auto 11.467vw;
  }
}

/* icon-list */
.icon-list {
  display: flex;
  align-items: center;
  gap: 36px;
}
.icon-item.hair-loving {
  width: 188px;
}
.icon-item.damage-care {
  width: 136px;
}
.icon-item.color-retention {
  width: 156px;
}
.icon-item.moisture-balance {
  width: 145px;
}
.icon-item.rich-gloss {
  width: 114px;
}
@media (768px <= width < 1920px) {
  .icon-list {
    gap: 1.875vw;
  }
  .icon-item.hair-loving {
    width: 9.792vw;
  }
  .icon-item.damage-care {
    width: 7.083vw;
  }
  .icon-item.color-retention {
    width: 8.125vw;
  }
  .icon-item.moisture-balance {
    width: 7.552vw;
  }
  .icon-item.rich-gloss {
    width: 5.938vw;
  }
}
@media (width < 768px) {
  .icon-list {
    gap: 4.8vw;
  }
  .icon-item.hair-loving {
    width: 26.4vw;
  }
  .icon-item.damage-care {
    width: 19.2vw;
  }
  .icon-item.color-retention {
    width: 22vw;
  }
  .icon-item.moisture-balance {
    width: 20.4vw;
  }
  .icon-item.rich-gloss {
    width: 16.133vw;
  }
}

/* ===== caption ===== */
.product .l-caption {
  margin: 100px auto 0;
  max-width: 1520px;
}
.product .caption {
  background: var(--bg-color-light);
}
.product .caption-reserve {
  margin-left: auto;
}
@media (768px <= width < 1920px) {
  .product .l-caption {
    margin: 5.208vw auto 0;
    max-width: 79.167vw;
  }
}
@media (width < 768px) {
  .product .l-caption {
    display: none;
  }
}

/* ===== related ===== */
.related {
  margin: 90px auto 0;
  max-width: 1100px;
}
@media (768px <= width < 1920px) {
  .related {
    margin: 4.688vw auto 0;
    max-width: 57.292vw;
  }
}
@media (width < 768px) {
  .related {
    margin: 20vw auto 0;
    max-width: 100%;
  }
}

.related .product-titleS {
  margin-bottom: 117px;
}
@media (768px <= width < 1920px) {
  .related .product-titleS {
    margin-bottom: 6.094vw;
  }
}
@media (width < 768px) {
  .related .product-titleS {
    margin: 0 auto 20vw;
  }
}

.related-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  gap: 136px;
  letter-spacing: .05em;
}
.related-item {
  display: grid;
  grid-template-rows: 492px auto auto;
  justify-content: center;
  text-align: center;
  font-size: 22px;
}
.related-img {
  align-self: center;
}
.related .shampoo-refill img {
  width: 278px;
}
.related .trial img {
  width: 314px;
}
.related-title_en {
  margin: 54px 0 .5em;
  font-size: 45px;
  font-weight: 700;
}
.related-price {
  margin-top: .5em;
}
@media (768px <= width < 1920px) {
  .related-list {
    gap: 7.083vw;
  }
  .related-item {
    grid-template-rows: 25.625vw auto auto;
    font-size: 1.146vw;
  }
  .related .shampoo-refill img {
    width: 14.479vw;
  }
  .related .trial img {
    width: 16.354vw;
  }
  .related-title_en {
    margin: 2.813vw 0 .5em;
    font-size: 2.344vw;
  }
}
@media (width < 768px) {
  .related-list {
    grid-template-columns: 1fr;
    gap: 20vw;
  }
  .related-item {
    grid-template-rows: 1fr auto auto;
    font-size: 3.333vw; /* 12.5px */
  }
  .related .shampoo-refill img {
    width: 37.067vw;
  }
  .related .trial img {
    width: 41.867vw;
  }
  .related-title_en {
    margin: 10.133vw 0 .5em;
    font-size: 6.667vw; /* 25px  */
  }
}

/*
スポットライト（商品画像）
================================================ */
.product-img__bg img {
  opacity: 0;
  transition: opacity 0.15s linear;
  transition-delay: .25s; /* ← .25秒遅らせる */
}
.item__img.active .product-img__bg img {
  opacity: 1;
}