@charset "UTF-8";
/**************************************/
/* -------------------------
 * トップ共通
 * ------------------------- */
.top-main {
  position: relative;
}

.top-sec-ttl {
  font-size: var(--fz80);
  line-height: 1;
}
.top-sec-ttl .sub-ttl {
  font-size: var(--fz16);
}

.top-sec-ttl--slide {
  position: absolute;
  left: 0;
  bottom: -2.2rem;
  line-height: 1;
  color: #fff;
  font-size: var(--fz160);
}
@media (max-width: 1240px) {
  .top-sec-ttl--slide {
    bottom: -1rem;
  }
}
@media (max-width: 834px) {
  .top-sec-ttl--slide {
    bottom: -0.7rem;
  }
}
@media (max-width: 499px) {
  .top-sec-ttl--slide {
    bottom: -0.5rem;
  }
}

/* STYLE GALLERY、SALONモーダル */
.modal,
.salon-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.modal.is-active,
.salon-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* オーバーレイ */
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  z-index: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.modal__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* モーダルのコンテンツ */
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 69rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 639px) {
  .modal__content {
    width: 90%;
  }
}

/* モーダルを閉じるボタン */
.modal__close-btn {
  width: 2.7rem;
  height: 2.7rem;
  z-index: 10;
  position: absolute;
  top: 3.5rem;
  right: 3.5rem;
  cursor: pointer;
  z-index: 1001;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.modal__close-btn:hover {
  opacity: 0.7;
}

/* ナビゲーションボタンのカスタマイズ */
.modal-common {
  /* 前への矢印 */
  /* 次への矢印 */
  /* 画像サイズ調整 */
}
.modal-common .swiper-button-prev,
.modal-common .swiper-button-next {
  color: #fff;
  aspect-ratio: 1;
  width: 31px;
  height: 31px;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.modal-common .swiper-button-prev:hover,
.modal-common .swiper-button-next:hover {
  opacity: 0.7;
}
.modal-common .swiper-button-prev::after,
.modal-common .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  aspect-ratio: 1;
  width: 31px;
  height: 31px;
  margin: auto;
}
.modal-common .swiper-button-prev {
  left: 10vw;
}
@media (max-width: 834px) {
  .modal-common .swiper-button-prev {
    left: 5rem;
  }
}
@media (max-width: 639px) {
  .modal-common .swiper-button-prev {
    left: 2rem;
    left: 3%;
  }
}
.modal-common .swiper-button-prev::after {
  background-image: url(../img/top/modal_chevron-left.svg);
}
.modal-common .swiper-button-next {
  right: 10vw;
}
@media (max-width: 834px) {
  .modal-common .swiper-button-next {
    right: 5rem;
  }
}
@media (max-width: 639px) {
  .modal-common .swiper-button-next {
    right: 2rem;
    right: 3%;
  }
}
.modal-common .swiper-button-next::after {
  background-image: url(../img/top/modal_chevron-right.svg);
}
.modal-common .swiper-slide img {
  height: auto;
  width: 100%;
}

.modal-swiper-common {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  width: 100%;
  height: auto;
}
.modal-swiper-common .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  visibility: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.modal-swiper-common .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.modal-swiper-common .swiper-slide-active {
  opacity: 1;
  visibility: visible;
}

/* -------------------------
 * MV
 * ------------------------- */
.top-mv__inner {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
}
@media (max-width: 834px) {
  .top-mv__inner {
    height: 40rem;
  }
}

.top-mv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top-mv__video-block {
  width: 100%;
  height: 100%;
}
.top-mv__video-block video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* オンラインストアボタン */
.online-store-btn {
  position: absolute;
  bottom: 2.6rem;
  right: 2.6rem;
  z-index: 20;
  position: fixed;
  border-radius: 50%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  background: #959a98;
  width: 13.8rem;
  height: 13.8rem;
  text-align: center;
  line-height: 2.2rem;
  padding-top: 3.8rem;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  overflow: hidden;
}
@media (max-width: 834px) {
  .online-store-btn {
    bottom: 1rem;
    right: 1rem;
    width: 10rem;
    height: 10rem;
    padding-top: 2.2rem;
    gap: 0.5rem;
  }
}
.online-store-btn.link--slide-text .txt--slide {
  height: 4.4rem !important;
}
.online-store-btn.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease !important;
  transition: opacity 0.3s ease !important;
}

.no-transition-delay {
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
  -webkit-transition-duration: 0.2s !important;
  transition-duration: 0.2s !important;
  -webkit-transition-timing-function: ease !important;
  transition-timing-function: ease !important;
}

/* ロード時の要素の読み込み */
.load-delay01,
.load-delay02 {
  opacity: 0;
}
.load-delay01.show,
.load-delay02.show {
  opacity: 1;
  -webkit-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
}

.load-delay01.show {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.load-delay02.show {
  -webkit-transition-delay: 4s;
  transition-delay: 4s;
}

/* -------------------------
 * イントロ
 * ------------------------- */
/* 斜めにしたから出てくる見出し*/
.skew-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.skew-ttl span {
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transform: translate3d(0, 100%, 0) skewY(18deg);
  transform: translate3d(0, 100%, 0) skewY(18deg);
  -webkit-transform-origin: left;
  transform-origin: left;
  display: block;
}
.skew-ttl.active span {
  -webkit-transform: translate3d(0, 0, 0) skewY(0);
  transform: translate3d(0, 0, 0) skewY(0);
}
.skew-ttl.active span:nth-child(1) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.skew-ttl.active span:nth-child(2) {
  -webkit-transition-delay: 0.075s;
  transition-delay: 0.075s;
}
.skew-ttl.active span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.skew-ttl.active span:nth-child(4) {
  -webkit-transition-delay: 0.225s;
  transition-delay: 0.225s;
}
.skew-ttl.active span:nth-child(5) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.skew-ttl.active span:nth-child(6) {
  -webkit-transition-delay: 0.375s;
  transition-delay: 0.375s;
}
.skew-ttl.active span:nth-child(7) {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}
.skew-ttl.active span:nth-child(8) {
  -webkit-transition-delay: 0.525s;
  transition-delay: 0.525s;
}
.skew-ttl.active span:nth-child(9) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.skew-ttl.active span:nth-child(10) {
  -webkit-transition-delay: 0.675s;
  transition-delay: 0.675s;
}

.top-intro__ttl-img-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.top-intro__ttl-img.skew-ttl {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.top-intro__ttl-img.skew-ttl span {
  width: 100%;
}

.top-intro__ttl-img-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}
@media (max-width: 834px) {
  .top-intro__ttl-img-wrap {
    gap: 3rem;
  }
}
@media (max-width: 499px) {
  .top-intro__ttl-img-wrap {
    gap: 2rem;
  }
}

.top-intro__ttl-img-wrap--pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 834px) {
  .top-intro__ttl-img-wrap--pc {
    display: none;
  }
}

.top-intro__ttl-img-wrap--sp {
  display: none;
}
@media (max-width: 834px) {
  .top-intro__ttl-img-wrap--sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.top-intro__ttl-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 834px) {
  .top-intro__ttl-img {
    gap: 0.5%;
  }
}
.top-intro__ttl-img .right-space {
  margin-right: 2%;
}
@media (max-width: 499px) {
  .top-intro__ttl-img .right-space {
    margin-right: 3%;
  }
}
.top-intro__ttl-img img {
  height: clamp(3rem, 6vw, 9rem);
  width: auto;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  max-width: 100%;
}
@media (max-width: 834px) {
  .top-intro__ttl-img img {
    height: 6rem;
  }
}
@media (max-width: 499px) {
  .top-intro__ttl-img img {
    height: 5rem;
  }
}
@media (max-width: 399px) {
  .top-intro__ttl-img img {
    height: 4.3rem;
  }
}

.top-intro__ttl-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.top-intro__ttl-img img {
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
  transform: translate3d(0, 100%, 0) skewY(12deg);
  -webkit-transform-origin: left;
  transform-origin: left;
  display: block;
}
.top-intro__ttl-img.active img {
  -webkit-transform: translate3d(0, 0, 0) skewY(0);
  transform: translate3d(0, 0, 0) skewY(0);
}
.top-intro__ttl-img.active img:nth-child(1) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.top-intro__ttl-img.active img:nth-child(2) {
  -webkit-transition-delay: 0.075s;
  transition-delay: 0.075s;
}
.top-intro__ttl-img.active img:nth-child(3) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.top-intro__ttl-img.active img:nth-child(4) {
  -webkit-transition-delay: 0.225s;
  transition-delay: 0.225s;
}
.top-intro__ttl-img.active img:nth-child(5) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.top-intro__ttl-img.active img:nth-child(6) {
  -webkit-transition-delay: 0.375s;
  transition-delay: 0.375s;
}
.top-intro__ttl-img.active img:nth-child(7) {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}
.top-intro__ttl-img.active img:nth-child(8) {
  -webkit-transition-delay: 0.525s;
  transition-delay: 0.525s;
}
.top-intro__ttl-img.active img:nth-child(9) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.top-intro__ttl-img.active img:nth-child(10) {
  -webkit-transition-delay: 0.675s;
  transition-delay: 0.675s;
}
.top-intro__ttl-img.active img:nth-child(11) {
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}
.top-intro__ttl-img.active img:nth-child(12) {
  -webkit-transition-delay: 0.825s;
  transition-delay: 0.825s;
}
.top-intro__ttl-img.active img:nth-child(13) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}
.top-intro__ttl-img.active img:nth-child(14) {
  -webkit-transition-delay: 0.975s;
  transition-delay: 0.975s;
}
.top-intro__ttl-img.active img:nth-child(15) {
  -webkit-transition-delay: 1.05s;
  transition-delay: 1.05s;
}
.top-intro__ttl-img.active img:nth-child(16) {
  -webkit-transition-delay: 1.125s;
  transition-delay: 1.125s;
}
.top-intro__ttl-img.active img:nth-child(17) {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
.top-intro__ttl-img.active img:nth-child(18) {
  -webkit-transition-delay: 1.275s;
  transition-delay: 1.275s;
}
.top-intro__ttl-img.active img:nth-child(19) {
  -webkit-transition-delay: 1.35s;
  transition-delay: 1.35s;
}
.top-intro__ttl-img.active img:nth-child(20) {
  -webkit-transition-delay: 1.425s;
  transition-delay: 1.425s;
}
.top-intro__ttl-img.active img:nth-child(21) {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.top-intro__ttl-img.active img:nth-child(22) {
  -webkit-transition-delay: 1.575s;
  transition-delay: 1.575s;
}
.top-intro__ttl-img.active img:nth-child(23) {
  -webkit-transition-delay: 1.65s;
  transition-delay: 1.65s;
}
.top-intro__ttl-img.active img:nth-child(24) {
  -webkit-transition-delay: 1.725s;
  transition-delay: 1.725s;
}
.top-intro__ttl-img.active img:nth-child(25) {
  -webkit-transition-delay: 1.8s;
  transition-delay: 1.8s;
}
.top-intro__ttl-img.active img:nth-child(26) {
  -webkit-transition-delay: 1.875s;
  transition-delay: 1.875s;
}
.top-intro__ttl-img.active img:nth-child(27) {
  -webkit-transition-delay: 1.95s;
  transition-delay: 1.95s;
}
.top-intro__ttl-img.active img:nth-child(28) {
  -webkit-transition-delay: 2.025s;
  transition-delay: 2.025s;
}
.top-intro__ttl-img.active img:nth-child(29) {
  -webkit-transition-delay: 2.1s;
  transition-delay: 2.1s;
}
.top-intro__ttl-img.active img:nth-child(30) {
  -webkit-transition-delay: 2.175s;
  transition-delay: 2.175s;
}
.top-intro__ttl-img.active img:nth-child(31) {
  -webkit-transition-delay: 2.25s;
  transition-delay: 2.25s;
}
.top-intro__ttl-img.active img:nth-child(32) {
  -webkit-transition-delay: 2.325s;
  transition-delay: 2.325s;
}
.top-intro__ttl-img.active img:nth-child(33) {
  -webkit-transition-delay: 2.4s;
  transition-delay: 2.4s;
}
.top-intro__ttl-img.active img:nth-child(34) {
  -webkit-transition-delay: 2.475s;
  transition-delay: 2.475s;
}
.top-intro__ttl-img.active img:nth-child(35) {
  -webkit-transition-delay: 2.55s;
  transition-delay: 2.55s;
}
.top-intro__ttl-img.active img:nth-child(36) {
  -webkit-transition-delay: 2.625s;
  transition-delay: 2.625s;
}
.top-intro__ttl-img.active img:nth-child(37) {
  -webkit-transition-delay: 2.7s;
  transition-delay: 2.7s;
}
.top-intro__ttl-img.active img:nth-child(38) {
  -webkit-transition-delay: 2.775s;
  transition-delay: 2.775s;
}
.top-intro__ttl-img.active img:nth-child(39) {
  -webkit-transition-delay: 2.85s;
  transition-delay: 2.85s;
}
.top-intro__ttl-img.active img:nth-child(40) {
  -webkit-transition-delay: 2.925s;
  transition-delay: 2.925s;
}
.top-intro__ttl-img.active img:nth-child(41) {
  -webkit-transition-delay: 3s;
  transition-delay: 3s;
}
.top-intro__ttl-img.active img:nth-child(42) {
  -webkit-transition-delay: 3.075s;
  transition-delay: 3.075s;
}
.top-intro__ttl-img.active img:nth-child(43) {
  -webkit-transition-delay: 3.15s;
  transition-delay: 3.15s;
}
.top-intro__ttl-img.active img:nth-child(44) {
  -webkit-transition-delay: 3.225s;
  transition-delay: 3.225s;
}
.top-intro__ttl-img.active img:nth-child(45) {
  -webkit-transition-delay: 3.3s;
  transition-delay: 3.3s;
}
.top-intro__ttl-img.active img:nth-child(46) {
  -webkit-transition-delay: 3.375s;
  transition-delay: 3.375s;
}
.top-intro__ttl-img.active img:nth-child(47) {
  -webkit-transition-delay: 3.45s;
  transition-delay: 3.45s;
}
.top-intro__ttl-img.active img:nth-child(48) {
  -webkit-transition-delay: 3.525s;
  transition-delay: 3.525s;
}
.top-intro__ttl-img.active img:nth-child(49) {
  -webkit-transition-delay: 3.6s;
  transition-delay: 3.6s;
}
.top-intro__ttl-img.active img:nth-child(50) {
  -webkit-transition-delay: 3.675s;
  transition-delay: 3.675s;
}
.top-intro__ttl-img.active img:nth-child(51) {
  -webkit-transition-delay: 3.75s;
  transition-delay: 3.75s;
}
.top-intro__ttl-img.active img:nth-child(52) {
  -webkit-transition-delay: 3.825s;
  transition-delay: 3.825s;
}
.top-intro__ttl-img.active img:nth-child(53) {
  -webkit-transition-delay: 3.9s;
  transition-delay: 3.9s;
}
.top-intro__ttl-img.active img:nth-child(54) {
  -webkit-transition-delay: 3.975s;
  transition-delay: 3.975s;
}
.top-intro__ttl-img.active img:nth-child(55) {
  -webkit-transition-delay: 4.05s;
  transition-delay: 4.05s;
}
.top-intro__ttl-img.active img:nth-child(56) {
  -webkit-transition-delay: 4.125s;
  transition-delay: 4.125s;
}
.top-intro__ttl-img.active img:nth-child(57) {
  -webkit-transition-delay: 4.2s;
  transition-delay: 4.2s;
}
.top-intro__ttl-img.active img:nth-child(58) {
  -webkit-transition-delay: 4.275s;
  transition-delay: 4.275s;
}
.top-intro__ttl-img.active img:nth-child(59) {
  -webkit-transition-delay: 4.35s;
  transition-delay: 4.35s;
}
.top-intro__ttl-img.active img:nth-child(60) {
  -webkit-transition-delay: 4.425s;
  transition-delay: 4.425s;
}
.top-intro__ttl-img.active img:nth-child(61) {
  -webkit-transition-delay: 4.5s;
  transition-delay: 4.5s;
}
.top-intro__ttl-img.active img:nth-child(62) {
  -webkit-transition-delay: 4.575s;
  transition-delay: 4.575s;
}
.top-intro__ttl-img.active img:nth-child(63) {
  -webkit-transition-delay: 4.65s;
  transition-delay: 4.65s;
}
.top-intro__ttl-img.active img:nth-child(64) {
  -webkit-transition-delay: 4.725s;
  transition-delay: 4.725s;
}
.top-intro__ttl-img.active img:nth-child(65) {
  -webkit-transition-delay: 4.8s;
  transition-delay: 4.8s;
}
.top-intro__ttl-img.active img:nth-child(66) {
  -webkit-transition-delay: 4.875s;
  transition-delay: 4.875s;
}
.top-intro__ttl-img.active img:nth-child(67) {
  -webkit-transition-delay: 4.95s;
  transition-delay: 4.95s;
}
.top-intro__ttl-img.active img:nth-child(68) {
  -webkit-transition-delay: 5.025s;
  transition-delay: 5.025s;
}
.top-intro__ttl-img.active img:nth-child(69) {
  -webkit-transition-delay: 5.1s;
  transition-delay: 5.1s;
}
.top-intro__ttl-img.active img:nth-child(70) {
  -webkit-transition-delay: 5.175s;
  transition-delay: 5.175s;
}
.top-intro__ttl-img.active img:nth-child(71) {
  -webkit-transition-delay: 5.25s;
  transition-delay: 5.25s;
}
.top-intro__ttl-img.active img:nth-child(72) {
  -webkit-transition-delay: 5.325s;
  transition-delay: 5.325s;
}
.top-intro__ttl-img.active img:nth-child(73) {
  -webkit-transition-delay: 5.4s;
  transition-delay: 5.4s;
}
.top-intro__ttl-img.active img:nth-child(74) {
  -webkit-transition-delay: 5.475s;
  transition-delay: 5.475s;
}
.top-intro__ttl-img.active img:nth-child(75) {
  -webkit-transition-delay: 5.55s;
  transition-delay: 5.55s;
}
.top-intro__ttl-img.active img:nth-child(76) {
  -webkit-transition-delay: 5.625s;
  transition-delay: 5.625s;
}
.top-intro__ttl-img.active img:nth-child(77) {
  -webkit-transition-delay: 5.7s;
  transition-delay: 5.7s;
}
.top-intro__ttl-img.active img:nth-child(78) {
  -webkit-transition-delay: 5.775s;
  transition-delay: 5.775s;
}
.top-intro__ttl-img.active img:nth-child(79) {
  -webkit-transition-delay: 5.85s;
  transition-delay: 5.85s;
}
.top-intro__ttl-img.active img:nth-child(80) {
  -webkit-transition-delay: 5.925s;
  transition-delay: 5.925s;
}
.top-intro__ttl-img.active img:nth-child(81) {
  -webkit-transition-delay: 6s;
  transition-delay: 6s;
}
.top-intro__ttl-img.active img:nth-child(82) {
  -webkit-transition-delay: 6.075s;
  transition-delay: 6.075s;
}
.top-intro__ttl-img.active img:nth-child(83) {
  -webkit-transition-delay: 6.15s;
  transition-delay: 6.15s;
}
.top-intro__ttl-img.active img:nth-child(84) {
  -webkit-transition-delay: 6.225s;
  transition-delay: 6.225s;
}
.top-intro__ttl-img.active img:nth-child(85) {
  -webkit-transition-delay: 6.3s;
  transition-delay: 6.3s;
}
.top-intro__ttl-img.active img:nth-child(86) {
  -webkit-transition-delay: 6.375s;
  transition-delay: 6.375s;
}
.top-intro__ttl-img.active img:nth-child(87) {
  -webkit-transition-delay: 6.45s;
  transition-delay: 6.45s;
}
.top-intro__ttl-img.active img:nth-child(88) {
  -webkit-transition-delay: 6.525s;
  transition-delay: 6.525s;
}
.top-intro__ttl-img.active img:nth-child(89) {
  -webkit-transition-delay: 6.6s;
  transition-delay: 6.6s;
}
.top-intro__ttl-img.active img:nth-child(90) {
  -webkit-transition-delay: 6.675s;
  transition-delay: 6.675s;
}
.top-intro__ttl-img.active img:nth-child(91) {
  -webkit-transition-delay: 6.75s;
  transition-delay: 6.75s;
}
.top-intro__ttl-img.active img:nth-child(92) {
  -webkit-transition-delay: 6.825s;
  transition-delay: 6.825s;
}
.top-intro__ttl-img.active img:nth-child(93) {
  -webkit-transition-delay: 6.9s;
  transition-delay: 6.9s;
}
.top-intro__ttl-img.active img:nth-child(94) {
  -webkit-transition-delay: 6.975s;
  transition-delay: 6.975s;
}
.top-intro__ttl-img.active img:nth-child(95) {
  -webkit-transition-delay: 7.05s;
  transition-delay: 7.05s;
}
.top-intro__ttl-img.active img:nth-child(96) {
  -webkit-transition-delay: 7.125s;
  transition-delay: 7.125s;
}
.top-intro__ttl-img.active img:nth-child(97) {
  -webkit-transition-delay: 7.2s;
  transition-delay: 7.2s;
}
.top-intro__ttl-img.active img:nth-child(98) {
  -webkit-transition-delay: 7.275s;
  transition-delay: 7.275s;
}
.top-intro__ttl-img.active img:nth-child(99) {
  -webkit-transition-delay: 7.35s;
  transition-delay: 7.35s;
}
.top-intro__ttl-img.active img:nth-child(100) {
  -webkit-transition-delay: 7.425s;
  transition-delay: 7.425s;
}
.top-intro__ttl-img.active img:nth-child(101) {
  -webkit-transition-delay: 7.5s;
  transition-delay: 7.5s;
}
.top-intro__ttl-img.active img:nth-child(102) {
  -webkit-transition-delay: 7.575s;
  transition-delay: 7.575s;
}
.top-intro__ttl-img.active img:nth-child(103) {
  -webkit-transition-delay: 7.65s;
  transition-delay: 7.65s;
}
.top-intro__ttl-img.active img:nth-child(104) {
  -webkit-transition-delay: 7.725s;
  transition-delay: 7.725s;
}
.top-intro__ttl-img.active img:nth-child(105) {
  -webkit-transition-delay: 7.8s;
  transition-delay: 7.8s;
}
.top-intro__ttl-img.active img:nth-child(106) {
  -webkit-transition-delay: 7.875s;
  transition-delay: 7.875s;
}
.top-intro__ttl-img.active img:nth-child(107) {
  -webkit-transition-delay: 7.95s;
  transition-delay: 7.95s;
}
.top-intro__ttl-img.active img:nth-child(108) {
  -webkit-transition-delay: 8.025s;
  transition-delay: 8.025s;
}
.top-intro__ttl-img.active img:nth-child(109) {
  -webkit-transition-delay: 8.1s;
  transition-delay: 8.1s;
}
.top-intro__ttl-img.active img:nth-child(110) {
  -webkit-transition-delay: 8.175s;
  transition-delay: 8.175s;
}
.top-intro__ttl-img.active img:nth-child(111) {
  -webkit-transition-delay: 8.25s;
  transition-delay: 8.25s;
}
.top-intro__ttl-img.active img:nth-child(112) {
  -webkit-transition-delay: 8.325s;
  transition-delay: 8.325s;
}
.top-intro__ttl-img.active img:nth-child(113) {
  -webkit-transition-delay: 8.4s;
  transition-delay: 8.4s;
}
.top-intro__ttl-img.active img:nth-child(114) {
  -webkit-transition-delay: 8.475s;
  transition-delay: 8.475s;
}
.top-intro__ttl-img.active img:nth-child(115) {
  -webkit-transition-delay: 8.55s;
  transition-delay: 8.55s;
}
.top-intro__ttl-img.active img:nth-child(116) {
  -webkit-transition-delay: 8.625s;
  transition-delay: 8.625s;
}
.top-intro__ttl-img.active img:nth-child(117) {
  -webkit-transition-delay: 8.7s;
  transition-delay: 8.7s;
}
.top-intro__ttl-img.active img:nth-child(118) {
  -webkit-transition-delay: 8.775s;
  transition-delay: 8.775s;
}
.top-intro__ttl-img.active img:nth-child(119) {
  -webkit-transition-delay: 8.85s;
  transition-delay: 8.85s;
}
.top-intro__ttl-img.active img:nth-child(120) {
  -webkit-transition-delay: 8.925s;
  transition-delay: 8.925s;
}
.top-intro__ttl-img.active img:nth-child(121) {
  -webkit-transition-delay: 9s;
  transition-delay: 9s;
}
.top-intro__ttl-img.active img:nth-child(122) {
  -webkit-transition-delay: 9.075s;
  transition-delay: 9.075s;
}
.top-intro__ttl-img.-sp img {
  -webkit-transform: translate3d(0, 0, 0) skewY(0);
  transform: translate3d(0, 0, 0) skewY(0);
}

.top-intro {
  position: relative;
  z-index: 10;
  background: white;
  padding-block: 17.8rem 13.3rem;
  margin-top: 100vh;
}
@media (max-width: 834px) {
  .top-intro {
    margin-top: 40rem;
  }
}

.top-intro__body {
  margin-block: 7rem 8.5rem;
  display: grid;
  grid-template-columns: 1fr 14.6rem;
  gap: 3rem 10%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
@media (max-width: 834px) {
  .top-intro__body {
    grid-template-columns: 1fr;
    margin-block: 4rem;
  }
}

.top-intro__body-txt-area {
  display: grid;
  grid-template-columns: 49% 40%;
  gap: 3rem 2%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 834px) {
  .top-intro__body-txt-area {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 499px) {
  .top-intro__body-txt-area {
    row-gap: 2rem;
  }
}

.top-intro__txt--en {
  font-size: var(--fz12);
  color: #959a98;
  line-height: 1.8;
}

@media (max-width: 834px) {
  .top-intro__btn {
    margin: 0 auto;
  }
}

/* イントロスライダー */
:root {
  --top-intro-slider-aspect-pc: 1352 / 650;
  --top-intro-slider-aspect-sp: 750 / 462;
}

.top-intro__slider-wrap {
  position: relative;
  overflow: hidden;
  height: auto;
  aspect-ratio: var(--top-intro-slider-aspect-pc);
  margin: 0 auto;
  z-index: 10;
  max-width: 1350px;
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 834px) {
  .top-intro__slider-wrap {
    width: 100%;
    aspect-ratio: var(--top-intro-slider-aspect-sp);
  }
}

.top-intro-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top-intro-slider__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top-intro-slider__item.active .top-intro-slider__img {
  -webkit-animation: topIntroSlide 1s cubic-bezier(0.08, 0.355, 0.11, 1)
    forwards;
  animation: topIntroSlide 1s cubic-bezier(0.08, 0.355, 0.11, 1) forwards;
}

.top-intro-slider__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  position: relative;
  top: 0;
  left: 0;
}
@media (max-width: 834px) {
  .top-intro-slider__img img {
    aspect-ratio: var(--top-intro-slider-aspect-sp);
    -o-object-position: center top;
    object-position: center top;
  }
}

@-webkit-keyframes topIntroSlide {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes topIntroSlide {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}
/* MENU */
.top-intro-menu {
  margin-top: 14.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 834px) {
  .top-intro-menu {
    margin-top: 3rem;
  }
}

.top-intro-menu__flex {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  gap: 1rem 16%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 834px) {
  .top-intro-menu__flex {
    grid-template-columns: 1fr;
  }
}

.top-intro-menu__list {
  margin-block: 8.8rem 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-column-gap: 11%;
  -moz-column-gap: 11%;
  column-gap: 11%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 834px) {
  .top-intro-menu__list {
    margin-block: 3rem;
    -webkit-column-gap: 4%;
    -moz-column-gap: 4%;
    column-gap: 4%;
  }
}

.top-intro-menu__list-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1.6rem 0 1.6rem 1.7rem;
  border-bottom: 1px solid #ddd;
}
@media (max-width: 834px) {
  .top-intro-menu__list-link {
    padding: 0.8rem 0 0.8rem 0rem;
  }
}

.top-intro-menu__list-txt {
  font-size: var(--fz20);
}

/* -------------------------
 * PRODUCT
 * ------------------------- */
.top-product {
  position: relative;
  z-index: 10;
  padding-block: 15rem 8.5rem;
  background-color: #d3d6d5;
}

.top-product_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  gap: 1.5rem;
}

.top-product__list {
  margin-block: 5.8rem 5.3rem;
  padding: 6rem 11%;
  border-radius: 20px;
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8rem 12%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 834px) {
  .top-product__list {
    grid-template-columns: repeat(3, 1fr);
    margin-block: 3rem 1rem;
    padding: 3rem 2rem;
    gap: 3rem 16.5%;
  }
}
.top-product__list li {
  -ms-flex-item-align: center;
  align-self: center;
}

.top-product__list-img.oggi-otto {
  width: 6.3rem;
  margin: 0 auto;
}

.top-product__list-item--with-note .note {
  font-size: var(--fz10);
  text-align: center;
  color: #a7aaa8;
  margin-top: 1.2rem;
}

.top-product__bottom-note {
  font-size: var(--fz12);
  text-align: center;
}

/* -------------------------
 * COLLECTION
 * ------------------------- */
.top-collections {
  padding-block: 12.7rem 17.5rem;
  position: relative;
  z-index: 10;
  background: #fff;
}

.top-collection {
  margin-bottom: 18.4rem;
}
@media (max-width: 834px) {
  .top-collection {
    margin-bottom: 6rem;
  }
}

.top-collection__kv {
  aspect-ratio: 1513/770;
  background: url(../img/top/collection_kv.webp) no-repeat center center/cover;
  position: relative;
  margin-left: calc((100vw - min(1350px, 90vw)) / 2);
  width: calc(100vw - (100vw - min(1350px, 90vw)) / 2);
  height: auto;
}
@media (max-width: 834px) {
  .top-collection__kv {
    aspect-ratio: 1376/1612;
    width: 100%;
    background: url(../img/top/collection_kv-sp.webp) no-repeat center
      center/cover;
  }
}

.top-collection__body {
  margin-top: 2.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 499px) {
  .top-collection__body {
    margin-top: 2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 1rem;
  }
}

.top-collection__body-txt {
  font-size: var(--18);
}

/* -------------------------
 * STYLE GALLERY
 * ------------------------- */
.top-style-gallery {
  overflow-x: hidden;
  margin-bottom: 15.5rem;
}
@media (max-width: 834px) {
  .top-style-gallery {
    margin-bottom: 5rem;
  }
}

.style-gallery__btn-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* メインのスライダー */
.style-gallery__swiper {
  width: 100%;
  margin: 2.2rem auto 2.6rem;
}
@media (max-width: 834px) {
  .style-gallery__swiper {
    margin-block: 2rem;
  }
}
.style-gallery__swiper .swiper-wrapper {
  height: auto;
}
.style-gallery__swiper img {
  aspect-ratio: 270/360;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.style-gallery__slide {
  cursor: pointer;
  overflow: hidden;
}
.style-gallery__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 270/360;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.style-gallery__slide img:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.style-gallery__slide {
  cursor: pointer;
}
.style-gallery__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 270/360;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  overflow: hidden;
}
.style-gallery__slide img:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* モーダル内のスライダー */
.modal-swiper {
  aspect-ratio: 690/920;
}
.modal-swiper .swiper-slide img {
  aspect-ratio: 690/920;
}

/* -------------------------
 * RECRUIT
 * ------------------------- */
.top-recruit {
  background: url(../img/top/recruit_bg.webp) no-repeat center center/cover;
  padding: 13rem 3rem 9.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 834px) {
  .top-recruit {
    padding: 3rem 2rem;
  }
}

.top-recruit__txt {
  margin-block: 2.9rem 2.6rem;
  max-width: 50.2rem;
  text-align: center;
}
@media (max-width: 834px) {
  .top-recruit__txt {
    margin-block: 3rem 2rem;
  }
}

/* -------------------------
 * SALON
 * ------------------------- */
.top-salon {
  padding-bottom: 15rem;
  position: relative;
  z-index: 10;
  background: #fff;
}

.top-salon__kv {
  aspect-ratio: 1513/770;
  background: url(../img/top/salon_kv.webp) no-repeat center center/cover;
  position: relative;
  width: 100%;
  height: auto;
}

.top-salon__sec-ttl {
  margin-left: calc((100vw - min(1350px, 90vw)) / 2);
}

.top-salon__list {
  margin-top: 10.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5.7rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 834px) {
  .top-salon__list {
    margin-top: 3rem;
    gap: 5rem;
  }
}
.top-salon__list li {
  display: grid;
  grid-template-columns: 48% 48%;
  gap: 1.6rem 8%;
}
@media (max-width: 834px) {
  .top-salon__list li {
    grid-template-columns: 1fr;
  }
}

.top-salon__chain-name {
  font-size: var(--fz24);
}

.top-salon__location-name {
  font-size: var(--fz20);
  margin-left: 0.4rem;
}

.top-salon__detail-list {
  margin-block: 2rem 3.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 1.6rem;
}
@media (max-width: 834px) {
  .top-salon__detail-list {
    row-gap: 0rem;
    margin-block: 1rem 0.4rem;
  }
}
.top-salon__detail-list dt {
  font-size: var(--fz14);
  color: #878787;
  width: 16%;
}
.top-salon__detail-list dd {
  width: 84%;
}
@media (max-width: 639px) {
  .top-salon__detail-list dd {
    margin-bottom: 1.2rem;
  }
}
@media (max-width: 639px) {
  .top-salon__detail-list dt,
  .top-salon__detail-list dd {
    width: 100%;
  }
}

.top-salon__list-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.7rem;
}
@media (max-width: 834px) {
  .top-salon__list-btns {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.top-salon__list-img {
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.top-salon__list-img:hover {
  opacity: 0.7;
}

/* SALONモーダル内のスライダー */
.salon-modal-swiper {
  aspect-ratio: 840/580;
}
.salon-modal-swiper .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.2rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.salon-modal-swiper .swiper-slide img {
  aspect-ratio: 840/580;
}

.base-btn--salon-modal {
  min-height: 3.9rem;
} /*# sourceMappingURL=top.css.map */