@charset "UTF-8";
/********************************************************/
/* -------------------------------------------
 * MV
 * -------------------------------------------*/
.top-mv {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.top-mv__swiper .swiper-slide {
  overflow: hidden;
}
.top-mv__swiper img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.top-mv__swiper-thumbnail {
  margin-top: min(17vw / 4.5, calc(17 * var(--px)));
}

.top-mv__swiper-thumbnail .swiper-slide {
  position: relative;
  border-radius: calc(10 * var(--px));
  overflow: hidden;
}
@media (any-hover: hover) {
  .top-mv__swiper-thumbnail .swiper-slide:hover {
    cursor: pointer;
  }
}

.top-mv__swiper-thumbnail .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3764705882);
  border-radius: calc(10 * var(--px));
}

.top-mv__swiper-thumbnail .swiper-slide-thumb-active::after {
  display: none;
}

/* -------------------------------------------
 * top-intro
 * -------------------------------------------*/
.top-intro {
  padding-block: min(40vw / 4.5, calc(40 * var(--px)));
}

.top-intro__nav {
  border-radius: min(5vw / 4.5, calc(5 * var(--px)));
  background-color: #e6e6e6;
  padding: min(17vw / 4.5, calc(17 * var(--px))) min(25vw / 4.5, calc(25 * var(--px)));
}
.top-intro__nav .main-nav-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;
  font-size: var(--f14);
  color: var(--navy);
}
.top-intro__nav .main-nav-list > li .main-nav-link {
  padding-block: 0.5em;
}
.top-intro__nav .main-nav-list > li:not(:first-child) {
  padding-top: 0;
}
.top-intro__nav .main-nav-list > li:not(:last-child) {
  background-image: radial-gradient(circle, #c0c0c0 0.5px, transparent 0.5px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 2px 1px;
  padding-bottom: 0;
}
.top-intro__nav .link-with-icon__arrow {
  width: calc(19 * var(--px));
  height: calc(19 * var(--px));
  background: var(--orange);
}
.top-intro__nav .link-with-icon__arrow::before, .top-intro__nav .link-with-icon__arrow::after {
  font-size: var(--f12);
  color: #fff;
  content: "arrow_downward";
}
.top-intro__nav .link-with-icon__arrow::before {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.top-intro__nav .link-with-icon__arrow::after {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@media (any-hover: hover) {
  .top-intro__nav .main-nav-link.link-with-icon:hover .link-with-icon__arrow::before, .top-intro__nav .main-nav-link.link-with-icon:hover .link-with-icon__arrow::after {
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  }
  .top-intro__nav .main-nav-link.link-with-icon:hover .link-with-icon__arrow::before {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .top-intro__nav .main-nav-link.link-with-icon:hover .link-with-icon__arrow::after {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.top-intro__banner-area {
  margin-top: min(35vw / 4.5, calc(35 * var(--px)));
}

.top-intro__banner img {
  border-radius: min(5vw / 4.5, calc(5 * var(--px)));
}

/* -------------------------------------------
 * message
 * -------------------------------------------*/
.top-message {
  position: relative;
  background: #272727 url(../img/top/message_bg.webp) no-repeat top center/contain;
}

.top-message__body {
  position: relative;
  z-index: 1;
  padding-block: min(89vw / 4.2, calc(89 * var(--px))) min(58vw / 4.2, calc(58 * var(--px)));
}

.top-message__tagline {
  font-family: var(--toppan);
  font-size: var(--f21);
  font-weight: 500;
  color: #fff;
  text-shadow: calc(0.5 * var(--px)) calc(0.87 * var(--px)) calc(5 * var(--px)) rgba(0, 0, 0, 0.2);
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.top-message__tagline::after {
  background: url(../img/common/under-line01.svg) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  width: min(152vw / 4.2, calc(152 * var(--px)));
  aspect-ratio: 152/25;
  bottom: -12%;
  right: 0;
  z-index: -1;
  pointer-events: none;
}

.top-message__title {
  margin-top: min(33vw / 4.2, calc(33 * var(--px)));
  font-family: var(--toppan);
  font-size: var(--f43);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.top-message__text {
  margin-top: min(42vw / 4.2, calc(42 * var(--px)));
  font-size: var(--f16);
  font-weight: 600;
  color: #fff;
}

.top-message__support-banner {
  display: block;
  margin-top: min(42vw / 4.2, calc(42 * var(--px)));
  text-decoration: none;
  color: inherit;
}

.top-message__support-banner-body {
  position: relative;
  height: min(213vw / 4.2, calc(213 * var(--px)));
  border-radius: min(5vw / 4.2, calc(5 * var(--px)));
}
.top-message__support-banner-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url(../img/top/message_support-banner-bg.webp) no-repeat center/cover;
  z-index: 0;
}

.top-message__support-banner-label,
.top-message__support-banner-title,
.top-message__support-banner-circles,
.top-message__support-banner-more {
  z-index: 1;
}

.top-message__support-banner-label {
  position: absolute;
  top: -1em;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #fff;
  border-radius: min(5vw / 4.2, calc(5 * var(--px)));
  padding: 0.45em 0.7em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.top-message__support-banner-label::after {
  display: inline-block;
  width: min(10vw / 4.2, calc(10 * var(--px)));
  height: min(8vw / 4.2, calc(8 * var(--px)));
  background: #fff;
  content: "";
  position: absolute;
  top: calc(100% - 1 * var(--px));
  left: 14%;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  pointer-events: none;
}

.top-message__support-banner-label-text {
  font-size: var(--f14);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #31a7e0;
  white-space: nowrap;
}

.top-message__support-banner-content {
  position: relative;
  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;
  padding-top: min(33vw / 4.2, calc(33 * var(--px)));
}

.top-message__support-banner-title {
  position: relative;
  font-family: var(--toppan);
  font-size: var(--f21);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin-bottom: min(14vw / 4.2, calc(14 * var(--px)));
}

.top-message__support-banner-circles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: min(9vw / 4.2, calc(9 * var(--px)));
}

.top-message__support-banner-circle {
  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;
  width: min(85vw / 4.2, calc(85 * var(--px)));
  height: min(85vw / 4.2, calc(85 * var(--px)));
  border: calc(1 * var(--px)) solid #fff;
  border-radius: 100vmax;
  font-size: var(--f13);
  font-weight: 400;
  line-height: 1.33;
  text-align: center;
  color: #fff;
}

.top-message__support-banner-more {
  position: absolute;
  right: 0;
  bottom: 0;
  gap: min(6vw / 4.2, calc(6 * var(--px)));
  width: min(137vw / 4.2, calc(137 * var(--px)));
  height: min(34vw / 4.2, calc(34 * var(--px)));
  padding: min(6vw / 4.2, calc(6 * var(--px))) min(10vw / 4.2, calc(10 * var(--px)));
  background: url(../img/top/message_support-banner-label-bg.webp) no-repeat center center/cover;
}
.top-message__support-banner-more.link-with-icon {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding-right: min(12vw / 4.2, calc(12 * var(--px)));
}
.top-message__support-banner-more .link-with-icon__label {
  font-size: var(--f14);
  font-weight: 500;
  line-height: 1;
  color: #0e67a2;
}
.top-message__support-banner-more .link-with-icon__arrow {
  width: min(16vw / 4.2, calc(16 * var(--px)));
  height: min(16vw / 4.2, calc(16 * var(--px)));
  background: var(--orange);
}

.top-message__support-banner-more .link-with-icon__arrow::before,
.top-message__support-banner-more .link-with-icon__arrow::after {
  font-size: var(--f11);
  color: #fff;
}

/* -------------------------------------------
 * about
 * -------------------------------------------*/
.top-about {
  padding-block: min(64vw / 4.2, calc(64 * var(--px))) min(59vw / 4.2, calc(59 * var(--px)));
  position: relative;
}

.top-about__rotate-img {
  position: absolute;
  width: 92.4%;
  height: auto;
  aspect-ratio: 418/421;
  top: 64%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

.top-about__img {
  margin-top: min(36vw / 4.2, calc(36 * var(--px)));
}

.top-about__more-button {
  margin-top: min(33vw / 4.2, calc(33 * var(--px)));
}

/* -------------------------------------------
 * salon
 * -------------------------------------------*/
.top-salon {
  padding-block: min(70vw / 4.2, calc(70 * var(--px))) min(58vw / 4.2, calc(58 * var(--px)));
  aspect-ratio: 450/540;
  width: 100%;
  height: auto;
  position: relative;
  background: #ebebeb;
}

.top-salon__bg {
  background: url(../img/top/salon_bg.webp) no-repeat center center/cover;
  position: absolute;
  aspect-ratio: 270/530;
  width: min(270vw / 4.5, calc(270 * var(--px)));
  height: auto;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.top-salon__inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.top-salon__badge {
  width: min(131vw / 4.2, calc(131 * var(--px)));
  margin-top: min(28vw / 4.2, calc(28 * var(--px)));
  height: auto;
  aspect-ratio: 1;
  position: relative;
}

.top-salon__badge-text {
  font-family: var(--toppan);
  color: #fff;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
}

.top-salon__rotate-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  width: 100%;
  height: auto;
}

.top-salon__more-button {
  margin-top: auto;
}

/* -------------------------------------------
 * salary
 * -------------------------------------------*/
.top-salary {
  padding-block: min(128vw / 4.2, calc(128 * var(--px))) min(42vw / 4.2, calc(42 * var(--px)));
  position: relative;
  background: url(../img/top/salary_bg.webp) no-repeat center center/cover;
}
.top-salary .section__sub-title,
.top-salary .section__title,
.top-salary .section__lead {
  color: #fff;
}
.top-salary .section__title {
  line-height: 1.6;
}

.top-salary__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: min(14vw / 4.2, calc(14 * var(--px)));
  margin-top: min(41vw / 4.2, calc(41 * var(--px)));
}
.top-salary__list > li {
  position: relative;
  background: #fff;
  border-radius: min(4vw / 4.2, calc(4 * var(--px)));
  padding-block: min(17vw / 4.2, calc(17 * var(--px))) min(10vw / 4.2, calc(10 * var(--px)));
}

.top-salary__list-item-label {
  background: var(--navy);
  color: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  padding: 0.35em 0.8em;
  border-radius: min(4vw / 4.2, calc(4 * var(--px)));
  white-space: nowrap;
  margin-inline: auto;
}

.top-salary__list-item-body {
  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;
  gap: min(12vw / 4.2, calc(12 * var(--px)));
  margin-top: min(9vw / 4.2, calc(9 * var(--px)));
}

.top-salary__list-item-term {
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  font-family: var(--toppan);
  font-size: var(--f21);
}

.top-salary__list-item-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin: 0;
}

.top-salary__list-item-value--rate {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.top-salary__list-item-value--amount {
  gap: min(4vw / 4.2, calc(4 * var(--px)));
}

.top-salary__list-item-num {
  font-family: var(--en);
  font-size: min(51vw / 4.2, calc(51 * var(--px)));
  font-weight: 500;
  line-height: 1;
  color: var(--orange);
}

.top-salary__list-item-unit {
  font-size: min(32vw / 4.2, calc(32 * var(--px)));
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--toppan);
  color: var(--orange);
}

.top-salary__list-item-range {
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--toppan);
  color: var(--orange);
}

.top-salary__list-item-max {
  font-size: var(--f13);
  font-weight: 500;
  line-height: 1.4;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-family: var(--toppan);
  color: var(--orange);
}

.top-salary__list-item-note {
  font-size: var(--f11);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #666;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.top-salary__more-button {
  margin-top: min(32vw / 4.2, calc(32 * var(--px)));
}

/* -------------------------------------------
 * benefits
 * -------------------------------------------*/
.top-benefits {
  padding-block: min(75vw / 4.2, calc(75 * var(--px))) min(66vw / 4.2, calc(66 * var(--px)));
  background: var(--main-bg);
}

.top-benefits__list {
  margin-top: min(40vw / 4.2, calc(40 * var(--px)));
  counter-reset: top-benefits-list;
}
.top-benefits__list > li {
  counter-increment: top-benefits-list;
}
.top-benefits__list > li:first-child {
  border-top: calc(1 * var(--px)) solid rgba(192, 192, 192, 0.5);
}
.top-benefits__list > li {
  border-bottom: calc(1 * var(--px)) solid rgba(192, 192, 192, 0.5);
}

.top-benefits__list-item-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(15vw / 4.2, calc(15 * var(--px)));
  padding-block: min(18vw / 4.2, calc(18 * var(--px)));
  text-decoration: none;
  color: inherit;
}

.top-benefits__list-item-num {
  font-family: var(--en);
  font-size: min(18vw / 4.2, calc(18 * var(--px)));
  font-weight: 500;
  line-height: 1.4;
  color: var(--orange);
  width: min(29vw / 4.2, calc(29 * var(--px)));
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.top-benefits__list-item-num::before {
  content: counter(top-benefits-list, decimal-leading-zero) ".";
}

.top-benefits__list-item-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: min(18vw / 4.2, calc(18 * var(--px)));
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
}

.top-benefits__list-item-link .link-with-icon__arrow {
  width: min(24vw / 4.2, calc(24 * var(--px)));
  height: min(24vw / 4.2, calc(24 * var(--px)));
  background: var(--orange);
}

.top-benefits__list-item-link .link-with-icon__arrow::before,
.top-benefits__list-item-link .link-with-icon__arrow::after {
  font-size: var(--f13);
  color: #fff;
}

/* -------------------------------------------
 * staff
 * -------------------------------------------*/
.top-staff {
  position: relative;
  z-index: 1;
}

.top-staff__head {
  background: url(../img/top/staff_head-bg.webp) no-repeat center center/cover;
  width: 100%;
  height: auto;
  aspect-ratio: 450/403;
  position: relative;
  z-index: 0;
}

.top-staff__head-title-area {
  position: absolute;
  top: min(40vw / 4.5, calc(40 * var(--px)));
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}

.top-staff__head-title-inner {
  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;
}

.top-staff__head-logo {
  width: min(98vw / 4.5, calc(98 * var(--px)));
  height: auto;
}

.top-staff__title {
  font-size: var(--f50);
  font-family: var(--en);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

.top-staff__column {
  background: url(../img/top/staff_column-bg.webp) no-repeat center center/cover;
  position: relative;
  z-index: 1;
  padding-block: min(37vw / 4.2, calc(37 * var(--px))) min(103vw / 4.2, calc(103 * var(--px)));
  overflow-x: clip;
}

.top-staff__more-button {
  margin-top: min(32vw / 4.2, calc(32 * var(--px)));
}

/* -------------------------------------------
 * instagram
 * -------------------------------------------*/
.top-instagram {
  background: #fff;
  position: relative;
  padding-block: 0 min(50vw / 4.2, calc(50 * var(--px)));
}
.top-instagram::before {
  background: url(../img/top/instagram_separator.webp) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  aspect-ratio: 900/102;
  bottom: 100%;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.top-instagram__head {
  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;
  text-align: center;
}

.top-instagram__icon {
  width: min(29vw / 4.2, calc(29 * var(--px)));
  height: auto;
  aspect-ratio: 1;
}
.top-instagram__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.top-instagram__sub-title {
  margin-top: min(24vw / 4.2, calc(24 * var(--px)));
  font-size: var(--f21);
  font-weight: 500;
  line-height: 1;
}

.top-instagram__title {
  margin-top: min(8vw / 4.2, calc(8 * var(--px)));
  font-size: var(--f29);
  font-weight: 500;
  line-height: 1.2;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.top-instagram__title::before {
  background: url(../img/common/under-line02.svg) no-repeat center;
  background-size: contain;
  content: "";
  display: inline-block;
  position: absolute;
  width: min(230vw / 4.2, calc(230 * var(--px)));
  aspect-ratio: 216/27;
  bottom: -33%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.top-instagram__title-inner {
  position: relative;
  z-index: 1;
}

.top-instagram__title-en {
  font-family: var(--en);
}

.top-instagram__img-link-wrap {
  display: block;
}

.top-instagram__img-link {
  display: block;
}

.top-instagram__img {
  margin-top: min(48vw / 4.2, calc(48 * var(--px)));
}
.top-instagram__img img {
  display: block;
  width: 100%;
  height: auto;
}

.top-instagram__account-link-wrap {
  margin-top: min(24vw / 4.2, calc(24 * var(--px)));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.top-instagram__account-link {
  display: block;
  font-family: var(--en);
  font-size: var(--f13);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  position: relative;
}
.top-instagram__account-link::after {
  background: currentColor;
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: min(0.5vw / 4.2, calc(0.5 * var(--px)));
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* -------------------------------------------
 * トップロード後
 * -------------------------------------------*/
/* ローディングオーバーレイ */
.top-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200vh;
  z-index: 9999;
  pointer-events: none;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(48, 41, 36)), color-stop(80%, rgb(48, 41, 36)), color-stop(96%, rgba(48, 41, 36, 0)), to(rgba(48, 41, 36, 0)));
  background: linear-gradient(180deg, rgb(48, 41, 36) 0%, rgb(48, 41, 36) 80%, rgba(48, 41, 36, 0) 96%, rgba(48, 41, 36, 0) 100%);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 1400ms;
          transition-duration: 1400ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

[data-loaded=true] .top-loading {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

/* 01. MVスライダー */
.top-mv__swiper img {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 1200ms;
          transition-duration: 1200ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}

[data-loaded=true] .top-mv__swiper img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ヘッダーロゴ */
.header__logo-area::before,
.header__logo-wrap {
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-delay: 1100ms;
          transition-delay: 1100ms;
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

.header__logo-area::before {
  -webkit-transform: translateY(10%) translateX(-50%);
          transform: translateY(10%) translateX(-50%);
}

.header__logo-wrap {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}

[data-loaded=true] .header__logo-area::before,
[data-loaded=true] .header__logo-wrap {
  opacity: 1;
}

[data-loaded=true] .header__logo-area::before {
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
}

[data-loaded=true] .header__logo-wrap {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* PC時背景ナビ */
.pc-bg__nav-area,
.pc-bg__logo-area {
  opacity: 0;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-delay: 1500ms;
          transition-delay: 1500ms;
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

.pc-bg__nav-area {
  -webkit-transform-origin: center right;
          transform-origin: center right;
}

.pc-bg__logo-area {
  -webkit-transform-origin: center left;
          transform-origin: center left;
}

[data-loaded=true] .pc-bg__nav-area,
[data-loaded=true] .pc-bg__logo-area {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* MVスライダーサムネイル */
.top-mv__swiper-thumbnail {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-delay: 1500ms;
          transition-delay: 1500ms;
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

[data-loaded=true] .top-mv__swiper-thumbnail {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

/* トップイントロ */
.top-intro__nav {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-delay: 1800ms;
          transition-delay: 1800ms;
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

[data-loaded=true] .top-intro__nav {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}/*# sourceMappingURL=top.css.map */