@charset "UTF-8";
@import url("//use.fontawesome.com/releases/v5.7.2/css/all.css");
/* mixins
------------------------------------------------------- */
/* 色指定
------------------------------------------------------- */
#top .pc {
  display: none !important;
}
#top .wrap:has(header.is-shown) .top-main:not(.is-fit-scene07) {
  height: calc(100dvh - 80px);
}
#top .wrap .top-main {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100dvh;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
#top .wrap .top-main.is-fit-scene07 {
  height: 162.8vw;
}
#top .wrap .top-main.is-fit-scene07 .scene07.is-active {
  position: relative;
  inset: auto;
  display: block;
  height: auto;
}
#top .wrap .top-main.is-fit-scene07 .scene07.is-active .main_img {
  position: relative;
  inset: auto;
  height: auto;
}
#top .wrap .top-main.is-fit-scene07 .scene07.is-active .main_img svg {
  display: block;
  width: 100%;
  height: auto;
}
#top .wrap .top-main .main_section {
  position: absolute;
  inset: 0;
  z-index: 0;
  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: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#top .wrap .top-main .main_section h3 {
  z-index: 1;
  opacity: 0;
}
#top .wrap .top-main .main_section .main_img {
  position: absolute;
  inset: 0;
  z-index: 0;
  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: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
}
#top .wrap .top-main .main_section .main_img img {
  width: auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#top .wrap .top-main .main_section.is-active {
  pointer-events: auto;
}
#top .wrap .top-main .main_section .scene-item {
  opacity: 0;
}
#top .wrap .top-main .main_section.scene01 h2 {
  width: 50%;
}
#top .wrap .top-main .main_section.scene02 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#top .wrap .top-main .main_section.scene02 h3 {
  width: 50%;
  margin-top: 50%;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene02 .main_img {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
  height: auto;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene02 .main_img img {
  width: 100%;
  height: auto;
  -o-object-position: 60% center;
     object-position: 60% center;
}
#top .wrap .top-main .main_section.scene02.is-active h3 {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.25s both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.25s both;
}
#top .wrap .top-main .main_section.scene02.is-active .main_img {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0s both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0s both;
}
#top .wrap .top-main .main_section.scene03 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#top .wrap .top-main .main_section.scene03 h3 {
  width: 90%;
}
#top .wrap .top-main .main_section.scene03 .photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}
#top .wrap .top-main .main_section.scene03 .photos p {
  width: 100%;
  height: 25dvh;
  overflow: hidden;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene03 .photos p img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
#top .wrap .top-main .main_section.scene03.is-active .photos p {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
}
#top .wrap .top-main .main_section.scene03.is-active .photos p:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#top .wrap .top-main .main_section.scene03.is-active .photos p:nth-child(2) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
#top .wrap .top-main .main_section.scene03.is-active .photos p:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#top .wrap .top-main .main_section.scene03.is-active .photos p:nth-child(4) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
#top .wrap .top-main .main_section.scene03.is-active h3 {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.5s both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.5s both;
}
#top .wrap .top-main .main_section.scene04 h3 {
  width: 18%;
  margin-top: 8%;
}
#top .wrap .top-main .main_section.scene04 .photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 92%;
  margin: auto;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene04 .photos p {
  width: 35%;
}
#top .wrap .top-main .main_section.scene04 .main_bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene04.is-active .main_bg {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.6s both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.6s both;
}
#top .wrap .top-main .main_section.scene04.is-active h3 {
  -webkit-animation: fadeInall 0.8s cubic-bezier(0.2, 0, 0, 1) 0.8s both;
          animation: fadeInall 0.8s cubic-bezier(0.2, 0, 0, 1) 0.8s both;
}
#top .wrap .top-main .main_section.scene04.is-active .photos {
  -webkit-animation: fadeInall 0.8s cubic-bezier(0.2, 0, 0, 1) 1s both;
          animation: fadeInall 0.8s cubic-bezier(0.2, 0, 0, 1) 1s both;
}
#top .wrap .top-main .main_section.scene05 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#top .wrap .top-main .main_section.scene05 #main_img05,
#top .wrap .top-main .main_section.scene05 #main_img05_smp {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#top .wrap .top-main .main_section.scene05 h3 {
  width: 75%;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 {
  opacity: 1;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 path {
  fill: #fff;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter {
  transform-box: fill-box;
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter:nth-child(1) {
  --from: 378.7%;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter:nth-child(2) {
  --from: 135.4%;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter:nth-child(3) {
  --from: 29.4%;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter:nth-child(4) {
  --from: -85.8%;
}
#top .wrap .top-main .main_section.scene05 .main_text05-01 .scram-letter:nth-child(5) {
  --from: -179%;
}
#top .wrap .top-main .main_section.scene05 svg image {
  opacity: 0;
}
#top .wrap .top-main .main_section.scene05 svg rect.main05_cls2 {
  opacity: 0;
}
#top .wrap .top-main .main_section.scene05.is-active .main_img {
  opacity: 1;
}
#top .wrap .top-main .main_section.scene05.is-active svg image {
  -webkit-animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--tile-delay, 0s);
          animation-delay: var(--tile-delay, 0s);
}
#top .wrap .top-main .main_section.scene05.is-active svg rect.main05_cls2 {
  -webkit-animation: fadeInCover 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInCover 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--rect-delay, 0.75s);
          animation-delay: var(--rect-delay, 0.75s);
}
#top .wrap .top-main .main_section.scene05.is-active .main_text05-01 .scram-letter {
  -webkit-animation: scramSpread 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
          animation: scramSpread 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  -webkit-animation-delay: var(--text1-delay, 1.3s);
          animation-delay: var(--text1-delay, 1.3s);
}
#top .wrap .top-main .main_section.scene05.is-active .main_text05-02 {
  -webkit-animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--text2-delay, 1.5s);
          animation-delay: var(--text2-delay, 1.5s);
}
#top .wrap .top-main .main_section.scene06 h3 {
  width: 75%;
}
#top .wrap .top-main .main_section.scene06 .main_img {
  width: 130%;
}
#top .wrap .top-main .main_section.scene06 .main_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 80% center;
     object-position: 80% center;
}
#top .wrap .top-main .main_section.scene06.is-active h3 {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.25s both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) 0.25s both;
}
#top .wrap .top-main .main_section.scene06.is-active .main_img {
  -webkit-animation: slideRight 3s linear forwards;
          animation: slideRight 3s linear forwards;
}
#top .wrap .top-main .main_section.scene07 .main_img {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#top .wrap .top-main .main_section.scene07 .main_img svg {
  width: 100%;
  height: 100%;
}
#top .wrap .top-main .main_section.scene07 .main_img.smp #main_img07_smp {
  width: 100%;
  height: auto;
}
#top .wrap .top-main .main_section.scene07 .pc {
  display: none;
}
#top .wrap .top-main .main_section.scene07 #main_M_b,
#top .wrap .top-main .main_section.scene07 #main_M_b_smp,
#top .wrap .top-main .main_section.scene07 #main_img07-01,
#top .wrap .top-main .main_section.scene07 #main_img07_smp-01,
#top .wrap .top-main .main_section.scene07 #main_text07,
#top .wrap .top-main .main_section.scene07 #main_text07_smp,
#top .wrap .top-main .main_section.scene07 #main_img07 > image,
#top .wrap .top-main .main_section.scene07 .main07_isolate > image {
  opacity: 0;
}
#top .wrap .top-main .main_section.scene07 rect.main05_cls2 {
  opacity: 0;
}
#top .wrap .top-main .main_section.scene07.is-active .main_img {
  opacity: 1;
}
#top .wrap .top-main .main_section.scene07.is-active #main_M_b,
#top .wrap .top-main .main_section.scene07.is-active #main_M_b_smp {
  -webkit-animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
}
#top .wrap .top-main .main_section.scene07.is-active #main_img07-01,
#top .wrap .top-main .main_section.scene07.is-active #main_img07_smp-01,
#top .wrap .top-main .main_section.scene07.is-active #main_img07 > image,
#top .wrap .top-main .main_section.scene07.is-active .main07_isolate > image {
  -webkit-animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--tile-delay, 0.25s);
          animation-delay: var(--tile-delay, 0.25s);
}
#top .wrap .top-main .main_section.scene07.is-active rect.main05_cls2 {
  -webkit-animation: fadeInCover 0.45s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInCover 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--tile-delay, 0.25s);
          animation-delay: var(--tile-delay, 0.25s);
}
#top .wrap .top-main .main_section.scene07.is-active #main_text07,
#top .wrap .top-main .main_section.scene07.is-active #main_text07_smp {
  -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
          animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
  -webkit-animation-delay: var(--text-delay, 1s);
          animation-delay: var(--text-delay, 1s);
}
@media only screen and (min-width: 961px) {
  #top .pc {
    display: block !important;
  }
  #top .smp {
    display: none !important;
  }
  #top .wrap .top-main {
    height: 100vh;
    margin-top: 0;
  }
  #top .wrap .top-main.is-fit-scene07 {
    height: 100vh;
  }
  #top .wrap .top-main.is-fit-scene07 .scene07.is-active {
    position: absolute;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
  #top .wrap .top-main.is-fit-scene07 .scene07.is-active .main_img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  #top .wrap .top-main.is-fit-scene07 .scene07.is-active .main_img svg {
    height: 100%;
  }
  #top .wrap .top-main .main_section .main_img img {
    width: 100%;
    height: auto;
    -o-object-fit: unset;
       object-fit: unset;
  }
  #top .wrap .top-main .main_section.scene01 h2 {
    width: 20%;
  }
  #top .wrap .top-main .main_section.scene02 h3 {
    width: 20%;
    margin-top: 8%;
  }
  #top .wrap .top-main .main_section.scene02 .main_img img {
    margin-bottom: -6%;
  }
  #top .wrap .top-main .main_section.scene03 h3 {
    width: 52%;
  }
  #top .wrap .top-main .main_section.scene03 h3.main-text01 {
    margin: 2% auto 0 2%;
  }
  #top .wrap .top-main .main_section.scene03 h3.main-text02 {
    margin: 0 2% 2% auto;
  }
  #top .wrap .top-main .main_section.scene03 .photos {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #top .wrap .top-main .main_section.scene03 .photos p {
    width: 50%;
    height: 50dvh;
  }
  #top .wrap .top-main .main_section.scene04 h3 {
    width: 18%;
    margin-top: 8%;
  }
  #top .wrap .top-main .main_section.scene04 .photos {
    width: 73%;
    margin: auto;
  }
  #top .wrap .top-main .main_section.scene04 .photos p {
    width: 35%;
  }
  #top .wrap .top-main .main_section.scene04 .main_bg {
    width: 32%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
  }
  #top .wrap .top-main .main_section.scene05 h3 {
    width: 42%;
  }
  #top .wrap .top-main .main_section.scene05 .main_img #main_img05 {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #top .wrap .top-main .main_section.scene06 h3 {
    width: 30%;
  }
  #top .wrap .top-main .main_section.scene06 .main_img {
    width: 100%;
  }
  #top .wrap .top-main .main_section.scene06.is-active .main_img {
    -webkit-animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
            animation: fadeInall 0.5s cubic-bezier(0.2, 0, 0, 1) both;
  }
  #top .wrap .top-main .main_section.scene07 .smp {
    display: none;
  }
  #top .wrap .top-main .main_section.scene07 .pc {
    display: block;
  }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
  #top {
    font-size: 16px;
    font-size: 1rem;
  }
}
/*# sourceMappingURL=maps/top-main.css.map */