@charset "UTF-8";

/**********************************************************
 * トップページ
 **********************************************************/
/*
スプラッシュスクリーン
================================================ */
/* スプラッシュ表示中はスクロールを止めたい場合 */
body.splash-active {
  overflow: hidden;
}

/* スプラッシュ本体 */
#splash {
  position: fixed;
  inset: 0;
  background: var(--color-main-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* アニメーション用の初期値 */
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 1s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 中身（ロゴなど） */
#splash .splash-inner {
  text-align: center;
}
#splash .splash-logo {
  display: block;
  width: 784px;
}

/* 消えるときのクラス：右方向にスライドしてフェードアウト */
#splash.splash--hide {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

@media (768px <= width < 1920px) {
  #splash .splash-logo {
    width: 40.833vw;
  }
}
@media (width < 768px) {
  #splash .splash-logo {
    width: 66.667vw;
  }
}


/*
HERO
================================================ */
.hero {
  position: relative;
  height: 1080px;
  overflow: hidden;
}
.hero__logo {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) !important;
  width: 580px;
  z-index: 1;
}

.hero__bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero__bg video {
  position: absolute;
  top: 50%;
  left: -11%;
  transform: translateY(-50%);
  width: 120%;
  height: 120%;
  object-fit: cover;
}

@media (768px <= width < 1920px) {
  .hero {
    height: 56.25vw;
  }
  .hero__logo {
    bottom: 4.167vw;
    width: 30.208vw;
  }
}

@media (width < 768px) {
  .hero {
    height: 88.8vw;
  }
  .hero__logo {
    bottom: 8.533vw; /*32px */
    width: 57.867vw; /* 217px */
  }
  .hero__bg video {
    top: 58%;
    left: -4.5%;
    transform: translateY(-58%);
    width: 105%;
    height: 100%;
  }
}

/*
CONCEPT
================================================ */
#concept {
  position: relative;
  padding: 290px 0 60px;
}
#concept .inner {
  position: relative;
  margin: 0 auto;
  padding: 0 0 560px;
  max-width: 1500px;
}
#concept .label {
  position: absolute;
  top: 210px;
  right: 0;
  padding: 54px 32px;
}
#concept .l-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
#concept .visual {
  position: relative;
  right: -160px;
  width: 1300px;
  height: 1300px;
}
#concept .caption {
  position: absolute;
  right: 0;
  bottom: 140px;
}
#concept .copy {
  margin-bottom: 90px;
  font-size: 66px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
}
#concept .copy sup {
  font-size: 22px;
}
#concept .lead {
  font-size: 24px;
  letter-spacing: .05em;
  line-height: 2;
}
#concept .lead sup {
  font-size: 14px;
}

@media (768px <= width < 1920px) {
  #concept {
    padding: 15.104vw 0 3.125vw;
  }
  #concept .inner {
    padding: 0 0 29.167vw;
    max-width: 78.125vw;
  }
  #concept .label {
    top: 10.938vw;
    padding: 2.813vw 1.667vw;
  }
  #concept .visual {
    right: -8.333vw;
    width: 67.708vw;
    height: 67.708vw;
  }
  #concept .caption {
    bottom: 7.292vw;
  }
  #concept .copy {
    margin-bottom: 4.688vw;
    font-size: 3.438vw;
  }
  #concept .copy sup {
    font-size: 1.146vw;
  }
  #concept .lead {
    font-size: 1.25vw;
  }
  #concept .lead sup {
    font-size: 0.729vw;
  }
}

@media (width < 768px) {
  #concept {
    padding: 0;
  }
  #concept .inner {
    padding: 0 0 24vw;
    max-width: 100%;
  }
  #concept .label {
    top: 9.333vw;
    padding: 6.2397vw 3.1203vw;
  }
  #concept .l-visual {
    position: relative;
  }
  #concept .visual {
    bottom: -10vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 120%;
    height: auto;
  }
  #concept .caption {
    right: 9.867vw;
    bottom: 17.333vw;
  }
  #concept .l-text {
    margin: -4.267vw auto 0;
    max-width: 73vw;
  }
  #concept .copy {
    margin-bottom: 5.333vw;
    font-size: 4.8vw; /* 18px */
    line-height: 1.7;
  }
  #concept .copy sup {
    font-size: 1.6vw; /* 6px */
  }
  #concept .lead {
    font-size: 3.333vw; /* 12.5px */
  }
  #concept .lead sup {
    font-size: 1.867vw; /* 7px */
  }
}


/*
ABOUT
================================================ */
#about {
  position: relative;
  margin-bottom: 270px;
}
#about .inner {
  position: relative;
  margin-inline: auto;
  padding: 0 0 194px;
  max-width: 1515px;
}
#about .label {
  margin-bottom: 150px;
  padding: 22px 79px;
}
#about .l-visual {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
#about .visual {
  position: relative;
  left: -120px;
  width: 1080px;
  height: 1080px;
}
#about .caption {
  position: absolute;
  left: 84px;
  bottom: 130px;
}
#about .l-text {
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#about .copy,
#about .lead {
  letter-spacing: .05em;
}
#about .copy {
  margin-bottom: 90px;
  font-size: 57px;
  font-weight: 700;
  line-height: 1.5;
}
#about .lead {
  margin: 0 0 90px 0;
  font-size: 24px;
  line-height: 2;
}
#about .lead sup {
  font-size: 14px;
}
#about .button__view--fill {
  margin-left: 60px;
}

@media (768px <= width < 1920px) {
  #about {
    margin-bottom: 14.063vw;
  }
  #about .inner {
    padding: 0 0 10.104vw;
    max-width: 78.906vw;
  }
  #about .label {
    margin-bottom: 7.813vw;
    padding: 1.146vw 4.115vw;
  }
  #about .visual {
    left: -6.25vw;
    width: 56.25vw;
    height: 56.25vw;
  }
  #about .caption {
    left: 4.375vw;
    bottom: 6.771vw;
  }
  #about .copy {
    margin-bottom: 4.688vw;
    font-size: 2.969vw;
  }
  #about .lead {
    margin: 0 0 4.688vw 0;
    font-size: 1.25vw;
  }
  #about .lead sup {
    font-size: 0.729vw;
  }
  #about .button__view--fill {
    margin-left: 3.125vw;
  }
}

@media (width < 768px) {
  #about {
    margin-bottom: 0;
  }
  #about .inner {
    max-width: 100%;
    padding: 0 0 32vw;
  }
  #about .label {
    margin: 0 auto 13.333vw;
    padding: 3.1203vw 10.8vw;
  }
  #about .l-visual {
    position: static;
  }
  #about .visual {
    bottom: -10vw;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: auto;
  }
  #about .caption {
    top: 27.467vw;
    right: 6.667vw;
    left: auto;
    bottom: auto;
  }
  #about .l-text {
    margin-inline: auto;
    max-width: 66.667vw;
  }
  #about .copy {
    margin-bottom: 6.667vw;
    font-size: 5.333vw; /* 20px */
  }
  #about .lead {
    margin: 0 0 7.467vw 0;
    font-size: 3.333vw; /* 12.5px */
  }
  #about .lead sup {
    font-size: 1.867vw; /* 7px */
  }
  #about .button__view--fill {
    margin-left: auto;
    margin-right: auto;
  }
}

/*
PRODUCTS
================================================ */
#products {
  margin-top: 50px;
  padding: 0 0 56px;
  color: var(--color-light);
}
#products .inner {
  margin-inline: auto;
  max-width: 1515px;
}
#products .label {
  margin-bottom: 100px;
  padding: 31px 33px;
}
.product-item {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 160px;
  margin-bottom: 300px;
}
.product-item:nth-of-type(even) {
  flex-direction: row-reverse;
  gap: 80px;
}
.product-item:nth-of-type(even) .button__more {
  margin-left: auto;
}

.l-item__img {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* 縦の英字タイトル */
.vtitle {
  position: absolute;
  right: -226px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  font-family: "trade-gothic-next", sans-serif;
  font-size: 129px;  
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.product-item:nth-of-type(even) .caption {
  margin-top: 100px;
}
.product-item  sup {
  font-size: 14px;
  vertical-align: super;
}
@media (768px <= width < 1920px) {
  .product-item  sup {
    font-size: 0.729vw;
  }
}
@media (width < 768px) {
  .product-item  sup {
    font-size: 1.733vw; /* 6.5px */
  }
}

/* テキストボックス */
.item__info .name,
.item__info .desc {
  font-size: 22px;
}
.item__info .name {
  margin-bottom: .5em;
  letter-spacing: .05em;
}
.item__info .desc {
  margin-bottom: 1.5em;
}

#products .button__view {
  margin-left: auto;
}

#products .caption {
  background: var(--bg-color-light);
}

#products .note {
  margin: 300px auto 180px;
}

/* シャンプー */
.item-shampoo .l-item__img {
  margin-top: 120px;
}
.item-shampoo .vtitle {
  top: -10px;
}
.item-shampoo .caption {
  justify-content: flex-start;
  margin: 0 0 20px 180px;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: 630px !important;
}
.item-shampoo .caption .line {
  margin-bottom: 0;
}
.item-shampoo .caption .l-type {
  display: flex;
  gap: 4px;
}
.item-shampoo .caption .type {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  transform: rotate(180deg); /* 向きを調整 */
}

/* トリートメント */
.item-treatment {
  align-items: center;
}
.item-treatment .vtitle {
  top: -50px;
}

/* ヘアミルク */
.item-hairmilk .vtitle {
  top: -20px;
}
.item-hairmilk .item__info {
  padding: 80px 0 0;
}
.item-hairmilk .caption {
  margin: 0 0 214px 184px;
}

/* ヘアオイル */
.product-item.item-hairoil {
  margin-bottom: 200px;
}
.item-hairoil .item__info {
  padding: 60px 0 0;
}
.item-hairoil .vtitle {
  top: -90px;
}

@media (768px <= width < 1920px) {
  #products {
    margin-top: 2.604vw;
    padding: 0 0 2.917vw;
  }
  #products .inner {
    max-width: 78.906vw;
  }
  #products .label {
    margin-bottom: 5.208vw;
    padding: 1.615vw 1.719vw;
  }
  .product-item {
    gap: 8.333vw;
    margin-bottom: 15.625vw;
  }
  .product-item:nth-of-type(even) {
    gap: 4.167vw;
  }
  .product-item.item-shampoo {
    gap: 13.021vw;
  }

  /* 縦の英字タイトル */
  .vtitle {
    right: -11.771vw;
    font-size: 6.719vw;
  }
  .product-item:nth-of-type(even) .caption {
    margin-top: 5.208vw;
  }

  #products .note {
    margin: 15.625vw auto 9.375vw;
  }

  /* テキストボックス */
  .item__info .name,
  .item__info .desc {
    font-size: 1.146vw;
  }

  /* シャンプー */
  .item-shampoo .vtitle {
    top: -0.521vw;
  }
  .item-shampoo .caption {
    gap: 1.042vw;
    margin: 0 0 1.042vw 9.375vw;
    height: 32.813vw !important;
  }
  .item-shampoo .caption .l-type {
    gap: 0.208vw;
  }

  /* トリートメント */
  .item-treatment .vtitle {
    top: -2.604vw;
  }

  /* ヘアミルク */
  .item-hairmilk .vtitle {
    top: -1.042vw;
  }
  .item-hairmilk .item__info {
    padding: 4.167vw 0 0;
  }
  .item-hairmilk .caption {
    margin: 0 0 11.146vw 9.583vw;
  }

  /* ヘアオイル */
  .product-item.item-hairoil {
    margin-bottom: 10.417vw;
  }
  .item-hairoil .item__info {
    padding: 3.125vw 0 0;
  }
  .item-hairoil .vtitle {
    top: -4.687vw;
  }
}

@media (width < 768px) {
  #products {
    margin-top: 5.333vw;
    padding: 0 0 8vw;
  }
  #products .inner {
    max-width: 100%;
  }
  #products .label {
    margin: 0 auto;
    padding: 3.1203vw 4.7997vw;
  }
  .product-item,
  .product-item:nth-of-type(even) {
    flex-direction: column;
    align-items: center;
  }
  .product-item {
    gap: 5.333vw;
    margin-bottom: 36vw;
  }
  .product-item:nth-of-type(even) {
    gap: 5.333vw;
  }
  #products .caption {
    display: none;
  }
  .product-item:nth-of-type(even) .button__more {
    margin: 0 auto;
  }

  /* 縦の英字タイトル */
  .vtitle {
    right: -16vw;
    font-size: 12vw; /* 45px */
  }

  /* テキストボックス */
  .item__info .name,
  .item__info .desc {
    text-align: center;
    font-size: 3.333vw; /* 12.5px */
  }

  #products .button__view {
    margin: 0 auto;
  }

  #products .note {
    margin: 20vw auto 10.667vw;
  }

  /* シャンプー */
  .item-shampoo .vtitle {
    top: -5.333vw;
  }

  /* トリートメント */
  .item-treatment .vtitle {
    top: 9.067vw;
    text-indent: -1.5em;
  }

  /* ヘアミルク */
  .item-hairmilk .vtitle {
    top: -8vw;
  }
  .item-hairmilk .item__info {
    padding: 0;
  }

  /* ヘアオイル */
  .product-item.item-hairoil {
    margin-bottom: 13.333vw;
  }
  .item-hairoil .item__info {
    padding: 0;
  }
  .item-hairoil .vtitle {
    top: -8vw;
  }
}


/*
NEWS
================================================ */
#news {
  position: relative;
  padding: 225px 0;
}
#news .inner {
  margin-inline: auto;
  max-width: 1188px;
}
#news .label {
  position: absolute;
  top: 188px;
  right: 0;
  padding: 97px 31px;
}
#news .button__view--fill {
  margin-left: auto;
}
.news-track {
  display: grid;
  gap: 59px;
  grid-template-columns: repeat(3,1fr);
  margin-bottom: 63px;
}
.news-item {
  max-width: 355px;
}

@media (768px <= width < 1920px) {
  #news {
    padding: 11.719vw 0;
  }
  #news .inner {
    max-width: 61.875vw;
  }
  #news .label {
    top: 9.792vw;
    padding: 5.052vw 1.615vw;
  }
  .news-track {
    gap: 3.073vw;
    margin-bottom: 3.281vw;
  }
  .news-item {
    max-width: 18.49vw;
  }
}

@media (width < 768px) {
  #news {
    padding: 44.8vw 0 33.333vw;
  }
  #news .inner {
    max-width: 100%;
  }
  #news .label {
    top: 18.667vw;
    padding: 9.6003vw 3.1203vw;
  }
  #news .button__view--fill {
    margin: 0 auto;
  }
  .news-track {
    display: flex;
    gap: 8.533vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-padding-inline: 14.667%;
    margin-bottom: 12vw;
    padding: 0 14.667% 3.733vw;
  }
  .news-item {
    flex: 0 0 80%;
    scroll-snap-align: center;
    max-width: 52.667vw;
  }
}