/***************************************************
 * Generated by SVG Artista on 8/21/2025, 4:00:58 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 225.8690643310547px;
  stroke-dasharray: 225.8690643310547px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.05s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.05s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 159.38836669921875px;
  stroke-dasharray: 159.38836669921875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.06s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-3 {
  stroke-dashoffset: 123.63436889648438px;
  stroke-dasharray: 123.63436889648438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.15s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.12s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.15s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 209.9875946044922px;
  stroke-dasharray: 209.9875946044922px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.18s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 135.20632934570312px;
  stroke-dasharray: 135.20632934570312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.24s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.24s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 73.27234649658203px;
  stroke-dasharray: 73.27234649658203px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.3s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.3s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-7 {
  stroke-dashoffset: 73.27421569824219px;
  stroke-dasharray: 73.27421569824219px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.36s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.36s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
}

svg .svg-elem-8 {
  stroke-dashoffset: 307.0077819824219px;
  stroke-dasharray: 307.0077819824219px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.42s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.42s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(5, 153, 217);
}

svg .svg-elem-9 {
  stroke-dashoffset: 307.00555419921875px;
  stroke-dasharray: 307.00555419921875px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.48s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.48s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
}

svg .svg-elem-10 {
  stroke-dashoffset: 175.813232421875px;
  stroke-dasharray: 175.813232421875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.54s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.54s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(5, 153, 217);
}

svg .svg-elem-11 {
  stroke-dashoffset: 175.80712890625px;
  stroke-dasharray: 175.80712890625px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
}

svg .svg-elem-12 {
  stroke-dashoffset: 73.27323150634766px;
  stroke-dasharray: 73.27323150634766px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.66s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.66s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-13 {
  stroke-dashoffset: 73.27154541015625px;
  stroke-dasharray: 73.27154541015625px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.72s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.72s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
}

svg .svg-elem-14 {
  stroke-dashoffset: 173.3435516357422px;
  stroke-dasharray: 173.3435516357422px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.78s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.78s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-15 {
  stroke-dashoffset: 24.88140869140625px;
  stroke-dasharray: 24.88140869140625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.84s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.84s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-16 {
  stroke-dashoffset: 427.6219482421875px;
  stroke-dasharray: 427.6219482421875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.9s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.9s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-17 {
  stroke-dashoffset: 380.7700500488281px;
  stroke-dasharray: 380.7700500488281px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.96s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.96s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-18 {
  stroke-dashoffset: 135.21002197265625px;
  stroke-dasharray: 135.21002197265625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.02s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.02s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-19 {
  stroke-dashoffset: 73.27313232421875px;
  stroke-dasharray: 73.27313232421875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.08s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.08s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-20 {
  stroke-dashoffset: 73.27497863769531px;
  stroke-dasharray: 73.27497863769531px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.14s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.14s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-20 {
  stroke-dashoffset: 0;
}

svg .svg-elem-21 {
  stroke-dashoffset: 471.5433654785156px;
  stroke-dasharray: 471.5433654785156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.2s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.2s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s;
}

svg.active .svg-elem-21 {
  stroke-dashoffset: 0;
  fill: rgb(5, 153, 217);
}

svg .svg-elem-22 {
  stroke-dashoffset: 471.54376220703125px;
  stroke-dasharray: 471.54376220703125px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.26s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.26s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-22 {
  stroke-dashoffset: 0;
}

svg .svg-elem-23 {
  stroke-dashoffset: 73.27327728271484px;
  stroke-dasharray: 73.27327728271484px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.32s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.32s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s;
}

svg.active .svg-elem-23 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-24 {
  stroke-dashoffset: 73.27371978759766px;
  stroke-dasharray: 73.27371978759766px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.38s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.38s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
}

svg.active .svg-elem-24 {
  stroke-dashoffset: 0;
}

svg .svg-elem-25 {
  stroke-dashoffset: 173.35256958007812px;
  stroke-dasharray: 173.35256958007812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.44s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.44s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s;
}

svg.active .svg-elem-25 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-26 {
  stroke-dashoffset: 57.49962615966797px;
  stroke-dasharray: 57.49962615966797px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.5s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.5s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-26 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}



.p-top-hero {
  background-color: rgba(255,255,255,0.3);
  background-image: url(/common/img/top/mv_bg1.svg);
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.p-top-hero__main01 {
  position: absolute;
  background-color: #FFF;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99991;
}
.p-top-hero-animation-active .p-top-hero__main01 {
  animation:  anim01 1.5s cubic-bezier(0.33, 1, 0.68, 1) 4s forwards;
}
.p-top-hero-animation-skip .p-top-hero__main01 {
  display: none;
}
.p-top-hero__main01 > svg {
  transform: translateX(-100vw) scale(1.2);
  transition: all 1.2s;
  width: 100vw;
  max-width: 90vw;
  height: auto;
  max-width: none;
}
.p-top-hero__main01 > svg.active {
  transform: translateX(0) scale(1.2);
}
.p-top-hero__main02 {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99992;
  margin: auto;
  padding: 0 5vw;
}
.p-top-hero-animation-active .p-top-hero__main02 {
  animation:  anim01 1.5s cubic-bezier(0.33, 1, 0.68, 1) 4s forwards;
}
.p-top-hero-animation-skip .p-top-hero__main02 {
  display: none;
}
@keyframes anim01 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
.p-top-hero__main03 {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-top-hero-animation-active .p-top-hero__main03 {
  animation:  anim02 1.5s cubic-bezier(0.33, 1, 0.68, 1) 4s forwards;
}
@keyframes anim02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    z-index: 0;
  }
}
.p-top-hero__main03 > svg {
  position: relative;
  z-index: 1;
  max-width: 90vw;
}
.p-top-hero__main03::before {
  content: "";
  display: block;
  width: 100%;
  height: 22vh;
  background: url(/common/img/bg_footer.svg) repeat-x top center;
  background-size: auto calc(100%);
  animation: bgLoopScroll 200s linear infinite reverse;
  position: absolute;
  top: 10vh;
  z-index: 0;
}
.p-top-hero__main03::after {
  content: "";
  display: block;
  width: 100%;
  height: 22vh;
  margin-bottom: 0;
  background: url(/common/img/bg_footer.svg) repeat-x bottom;
  background-size: auto calc(100%);
  animation: bgLoopScroll 200s linear infinite;
  position: absolute;
  bottom: 0;
  z-index: 0;
}
.p-top-hero__scroll {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10vh;   
}
#anim-skip-btn {
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
  font-family: var(--ffont-family-english);
  font-size: 27px;
  bottom: 5vh;
  cursor: pointer;
  z-index: 99999;
  color: #000;
  animation:  anim01 1.5s cubic-bezier(0.33, 1, 0.68, 1) 4s forwards;
}
.p-top-hero-animation-skip #anim-skip-btn {
  display: none;
}
#anim-skip-btn:hover {
  color: var(--mainColor);
}



main {
  margin: 0;
}
@media screen and (min-width: 768px) and (min-height: 550px) {
  html, body {
    margin: 0;
    height: 100vh;
    scroll-snap-type: y mandatory; /* 縦方向にスナップ */
  }
  main > *:not(:last-child) {
    height: 100vh;               /* 画面いっぱいの高さ */
    scroll-snap-align: start;    /* セクションの先頭でスナップ */
  }
  main > *:last-child {
    scroll-snap-align: start;    /* セクションの先頭でスナップ */
  }
  main > .section {
    /* padding-top: 2rem; */
    padding-top: 13vh;
  }
  footer {
    scroll-snap-align: end;
  } 
}
@media screen and (min-width: 768px) and (min-height: 650px) {
  html, body {
    margin: 0;
    height: 100vh;
    scroll-snap-type: y mandatory; /* 縦方向にスナップ */
  }
  main > *:not(:last-child) {
    height: 100vh;               /* 画面いっぱいの高さ */
    scroll-snap-align: start;    /* セクションの先頭でスナップ */
  }
  main > *:last-child {
    scroll-snap-align: start;    /* セクションの先頭でスナップ */
  }
  main > .section {
    padding-top: 13vh;
  }
  footer {
    scroll-snap-align: end;
  } 
}