.intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
}
.intro-start .intro {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 2s 0.1s cubic-bezier(0.65, 0, 0.35, 1);
  transition: opacity 2s 0.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.intro-has-done .intro {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1.2s 0.5s, visibility 0.1s 1.4s;
  transition: opacity 1.2s 0.5s, visibility 0.1s 1.4s;
}

.intro-slide {
  position: relative;
  width: 100%;
  height: 100svh;
}
.intro-slide .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.intro-slide .slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center right;
     object-position: center right;
}

@-webkit-keyframes firstFadeZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  7% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}

@keyframes firstFadeZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  7% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}
@-webkit-keyframes fadeZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}
@keyframes fadeZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}
.intro__text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  font-family: adobe-garamond-pro, serif;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  z-index: 10;
  opacity: 0;
}
.intro-start .intro__text {
  opacity: 1;
  -webkit-transition: opacity 1s 1.1s;
  transition: opacity 1s 1.1s;
}

@media only screen and (min-width: 1025px) {
  html {
    width: var(--content-width, 100vw);
  }
}

.intro-start {
  height: 100svh;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .intro-start {
    height: 100vh;
  }
}

.intro-has-done {
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.main {
  position: relative;
  padding: 251px 0 128px;
  background-image: url(../images/common/bg.png);
  background-size: 400px 400px;
  background-repeat: repeat;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .main {
    padding: 55px 55px 121px 90px;
  }
}

.hero {
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 2s 0.8s;
  transition: opacity 2s 0.8s;
  min-height: 549px;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .hero {
    width: 68.416988417%;
    margin-left: auto;
    padding-top: 0;
    max-width: 876px;
    max-height: 1093px;
  }
}
.intro-has-done .hero {
  opacity: 1;
  visibility: visible;
}

#hero__slide {
  width: 100%;
  height: 100%;
}
#hero__slide .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 390/549;
}
@media only screen and (min-width: 1025px) {
  #hero__slide .swiper-wrapper .swiper-slide img {
    aspect-ratio: 886/1093;
  }
}

.home .nav {
  display: block;
  width: 261px;
  margin: 108px auto 60px;
}
@media only screen and (min-width: 1025px) {
  .home .nav {
    width: 112px;
    margin: -35px 0 0;
  }
}
.home .nav-listWrapper {
  row-gap: 50px;
  margin: 0;
}
@media only screen and (min-width: 1025px) {
  .home .nav-listWrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    row-gap: 37px;
  }
}
@media only screen and (min-width: 1025px) {
  .home .nav__list {
    -webkit-column-gap: 26px;
       -moz-column-gap: 26px;
            column-gap: 26px;
    padding: 0;
    margin-inline: unset;
  }
  .home .nav__list--sub {
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
  }
}