/* loading動き */
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 297.90698727142353px;
    stroke-dasharray: 297.90698727142353px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 297.90698727142353px
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 297.90698727142353px;
    stroke-dasharray: 297.90698727142353px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 297.90698727142353px
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s both, animate-svg-fill-1 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s both;
  animation: animate-svg-stroke-1 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s both, animate-svg-fill-1 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s both
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 593.8300170898438px;
    stroke-dasharray: 593.8300170898438px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 593.8300170898438px
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 593.8300170898438px;
    stroke-dasharray: 593.8300170898438px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 593.8300170898438px
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.32s both, animate-svg-fill-2 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.62s both;
  animation: animate-svg-stroke-2 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.32s both, animate-svg-fill-2 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.62s both
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 120.19974517822266px;
    stroke-dasharray: 120.19974517822266px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 120.19974517822266px
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 120.19974517822266px;
    stroke-dasharray: 120.19974517822266px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 120.19974517822266px
  }
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.44s both, animate-svg-fill-3 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.74s both;
  animation: animate-svg-stroke-3 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.44s both, animate-svg-fill-3 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.74s both
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 238.39590454101562px;
    stroke-dasharray: 238.39590454101562px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 238.39590454101562px
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 238.39590454101562px;
    stroke-dasharray: 238.39590454101562px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 238.39590454101562px
  }
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.56s both, animate-svg-fill-4 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.86s both;
  animation: animate-svg-stroke-4 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.56s both, animate-svg-fill-4 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.86s both
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 2069.464599609375px;
    stroke-dasharray: 2069.464599609375px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2069.464599609375px
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 2069.464599609375px;
    stroke-dasharray: 2069.464599609375px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2069.464599609375px
  }
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.6799999999999999s both, animate-svg-fill-5 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.98s both;
  animation: animate-svg-stroke-5 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.6799999999999999s both, animate-svg-fill-5 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.98s both
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 256.90525817871094px;
    stroke-dasharray: 256.90525817871094px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 256.90525817871094px
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 256.90525817871094px;
    stroke-dasharray: 256.90525817871094px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 256.90525817871094px
  }
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.8s both, animate-svg-fill-6 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s both;
  animation: animate-svg-stroke-6 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.8s both, animate-svg-fill-6 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s both
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 511.9100646972656px;
    stroke-dasharray: 511.9100646972656px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 511.9100646972656px
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 511.9100646972656px;
    stroke-dasharray: 511.9100646972656px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 511.9100646972656px
  }
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.9199999999999999s both, animate-svg-fill-7 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.22s both;
  animation: animate-svg-stroke-7 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.9199999999999999s both, animate-svg-fill-7 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.22s both
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 217.280029296875px;
    stroke-dasharray: 217.280029296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 217.280029296875px
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 217.280029296875px;
    stroke-dasharray: 217.280029296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 217.280029296875px
  }
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.04s both, animate-svg-fill-8 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.3399999999999999s both;
  animation: animate-svg-stroke-8 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.04s both, animate-svg-fill-8 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.3399999999999999s both
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 242.93670654296875px;
    stroke-dasharray: 242.93670654296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 242.93670654296875px
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 242.93670654296875px;
    stroke-dasharray: 242.93670654296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 242.93670654296875px
  }
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.16s both, animate-svg-fill-9 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.46s both;
  animation: animate-svg-stroke-9 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.16s both, animate-svg-fill-9 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.46s both
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 211.09930419921875px;
    stroke-dasharray: 211.09930419921875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 211.09930419921875px
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 211.09930419921875px;
    stroke-dasharray: 211.09930419921875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 211.09930419921875px
  }
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.28s both, animate-svg-fill-10 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.58s both;
  animation: animate-svg-stroke-10 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.28s both, animate-svg-fill-10 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.58s both
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 242.9342498779297px;
    stroke-dasharray: 242.9342498779297px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 242.9342498779297px
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 242.9342498779297px;
    stroke-dasharray: 242.9342498779297px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 242.9342498779297px
  }
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.4s both, animate-svg-fill-11 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.7s both;
  animation: animate-svg-stroke-11 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.4s both, animate-svg-fill-11 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.7s both
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 32.10763931274414px;
    stroke-dasharray: 32.10763931274414px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 32.10763931274414px
  }
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 32.10763931274414px;
    stroke-dasharray: 32.10763931274414px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 32.10763931274414px
  }
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.5199999999999998s both, animate-svg-fill-12 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.8199999999999998s both;
  animation: animate-svg-stroke-12 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.5199999999999998s both, animate-svg-fill-12 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.8199999999999998s both
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 92.65997314453125px;
    stroke-dasharray: 92.65997314453125px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.65997314453125px
  }
}

@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 92.65997314453125px;
    stroke-dasharray: 92.65997314453125px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.65997314453125px
  }
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.64s both, animate-svg-fill-13 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.94s both;
  animation: animate-svg-stroke-13 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.64s both, animate-svg-fill-13 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.94s both
}

@-webkit-keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 7.9547882080078125px;
    stroke-dasharray: 7.9547882080078125px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 7.9547882080078125px
  }
}

@keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 7.9547882080078125px;
    stroke-dasharray: 7.9547882080078125px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 7.9547882080078125px
  }
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-stroke-14 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.76s both, animate-svg-fill-14 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.06s both;
  animation: animate-svg-stroke-14 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.76s both, animate-svg-fill-14 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.06s both
}

@-webkit-keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 5.486290693283081px;
    stroke-dasharray: 5.486290693283081px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 5.486290693283081px
  }
}

@keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 5.486290693283081px;
    stroke-dasharray: 5.486290693283081px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 5.486290693283081px
  }
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-stroke-15 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.88s both, animate-svg-fill-15 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.1799999999999997s both;
  animation: animate-svg-stroke-15 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.88s both, animate-svg-fill-15 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.1799999999999997s both
}

@-webkit-keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 310.2061462402344px;
    stroke-dasharray: 310.2061462402344px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 310.2061462402344px
  }
}

@keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 310.2061462402344px;
    stroke-dasharray: 310.2061462402344px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 310.2061462402344px
  }
}

@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-stroke-16 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.9999999999999998s both, animate-svg-fill-16 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.3s both;
  animation: animate-svg-stroke-16 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.9999999999999998s both, animate-svg-fill-16 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.3s both
}

@-webkit-keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 275.1186218261719px;
    stroke-dasharray: 275.1186218261719px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 275.1186218261719px
  }
}

@keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 275.1186218261719px;
    stroke-dasharray: 275.1186218261719px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 275.1186218261719px
  }
}

@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-stroke-17 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.12s both, animate-svg-fill-17 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.42s both;
  animation: animate-svg-stroke-17 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.12s both, animate-svg-fill-17 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.42s both
}

@-webkit-keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 159.280029296875px;
    stroke-dasharray: 159.280029296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 159.280029296875px
  }
}

@keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 159.280029296875px;
    stroke-dasharray: 159.280029296875px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 159.280029296875px
  }
}

@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-stroke-18 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.24s both, animate-svg-fill-18 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.54s both;
  animation: animate-svg-stroke-18 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.24s both, animate-svg-fill-18 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.54s both
}

@-webkit-keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 89.24187469482422px;
    stroke-dasharray: 89.24187469482422px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 89.24187469482422px
  }
}

@keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 89.24187469482422px;
    stroke-dasharray: 89.24187469482422px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 89.24187469482422px
  }
}

@-webkit-keyframes animate-svg-fill-19 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-stroke-19 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.3600000000000003s both, animate-svg-fill-19 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.66s both;
  animation: animate-svg-stroke-19 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.3600000000000003s both, animate-svg-fill-19 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.66s both
}

@-webkit-keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 126.87861633300781px;
    stroke-dasharray: 126.87861633300781px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.87861633300781px
  }
}

@keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 126.87861633300781px;
    stroke-dasharray: 126.87861633300781px
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.87861633300781px
  }
}

@-webkit-keyframes animate-svg-fill-20 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(255, 100, 80)
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-stroke-20 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.48s both, animate-svg-fill-20 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.78s both;
  animation: animate-svg-stroke-20 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.48s both, animate-svg-fill-20 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.78s both
}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width:767px) {
  #mask {
    width: 50vw;
  }
}

/* Loading アイコンの大きさ設定　*/
/* #splash_logo svg{
      width:100%;
  }
   */




/* 　　　MV　　　 */
#MV {
  display: block;
  width: 100%;
  height: 90vh;

}

.mv-contents {
  display: flex;
  margin: 110px auto;
  max-width: 1200px;
  align-items: center;
}

.mv-logo {

  width: 37.7rem;
}

.mv-copy p {
  text-align: left;
  font-size: 4.7rem;
  line-height: 68px;
  margin-left: 40px;
  font-weight: 700;
}

@media screen and (max-width:767px) {
  .mv-contents {
    display: block;
  }

  .mv-logo {
    width: 50%;
    margin: 0 auto;
  }

  .mv-copy p {
    text-align: center;
    font-size: 2.2rem;
    line-height: 4.5rem;
    margin: 40px 0 0 0;
  }

}

#about {
  padding-bottom: 0;
  margin-top: 100px;
}

#about .about-img-scale {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 60px 0 0px 0;
  overflow: hidden;
}

#about .about-img {
  position: absolute;
  width: 1200px;
  height: 500px;
  background-image: url(../image/top/about-img.jpg);
  background-size: cover !important;
  background-position: center;
  border-radius: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#about .vision {
  width: 100%;
  height: auto;
  background-image: url(../image/top/vision-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 85% 35px;
  background-color: #FF6450;
  padding: 150px 0;

}

#about .vision .wrap {
  display: flex;
  text-align: center;
  margin: 0 auto;
}

#about .vision .wrap div:first-child {
  width: 40%;
}

#about .vision .wrap div:nth-child(2) {
  width: 60%;
}

#about .vision .vision-logo-wh {
  width: 300px;
  background-image: url(../image/top/vision-logo-wh.png);
  background-size: 300px auto;
  background-repeat: no-repeat;
  background-position: center;
}

#about .vision h1,
#about .vision h2,
#about .vision h4 {
  color: #fff;
  text-align: left;
}

@media screen and (max-width:767px) {
  #about .about-img-scale {
    height: 280px;
  }

  #about .vision {
    background-position: 95% 90%;
  }

  #about .vision .wrap {
    display: block;
  }

  #about .vision .wrap div:nth-child(2) {
    width: 100%;
  }

  #about .vision .vision-logo-wh {
    width: 300px;
    height: auto;
    background-size: 100% auto;
  }
}

#whatwedo,
#works {
  background-color: #F7F7F7;
}

#whatwedo .wwd-contents {
  display: flex;
  max-width: 100%;
  margin-top: 46px;
}
@media screen and (min-width: 768px) {
#whatwedo .wwd-contents :first-child{
  transition-delay: 0.2s;
}
#whatwedo .wwd-contents :nth-child(2){
  transition-delay: 0.4s;
}
#whatwedo .wwd-contents :nth-child(3){
  transition-delay: 0.6s;
}
#whatwedo .wwd-contents :nth-child(4){
  transition-delay: 0.8s;
}

}
#whatwedo .wwd-contents li,
#whatwedo .wwd-contents img {
  width: 250px;
}

#whatwedo .wwd-contents li {
  margin-right: 67px;
}
#whatwedo .wwd-contents li :last-child {
  margin-right: 0;
}

#whatwedo .wwd-contents p {
  margin-top: 10px;
  text-align: center;
}

#whatwedo .wwd-tag-area {
  margin-top: 48px;
}

#whatwedo .wwd-tag-area ul {
  text-align: center;
  margin: auto;
}

#whatwedo .wwd-tag-area ul :nth-child(2) {
  margin-top: 20px;
}

#whatwedo .wwd-tag-area ul li {
  display: inline-block;
  background-color: #fff;
  margin: 0 4px;
  padding: 8px 17px;
  border-radius: 30px;
  font-weight: 500;
}

@media screen and (max-width:767px) {
  #whatwedo .wwd-contents {
    display: block;
    margin-right: 0;
    
  }
  #whatwedo .wwd-contents li {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 40px;

  }

  #whatwedo .wwd-contents img {
    width: 100%;
  }

  #whatwedo .wwd-tag-area ul :nth-child(2) {
    margin-top: 0px;
  }

  #whatwedo .wwd-tag-area ul li {
    margin: 4px;
  }
}

#works .loop-slide-wrap {
  display: flex;
  overflow: hidden;
}

#works .loop-slide {
  display: flex;
  margin-top: 80px;
}

#works .loop-contents {
  width: 150px;
  height: 150px;
  border-radius: 150px;
  margin: 0 15px;
}

#works .loop-contents img {
  width: 100%;
}

.loop-slide {
  display: flex;
  animation: loop-slide 50s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width:767px) {
  #works .loop-contents {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    margin: 0 5px;
  }

  #works .loop-slide {
    margin-top: 30px;
  }
}


/* スライド */
.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 100%;
  margin: 0 auto;
  margin-top: 80px;
}

.slider .s-wrap {
  width: 70vw;
  /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;

  display: flex;
}

.slider .s-wrap .s-content {
  width: 50%;
  float: left;
  /* background-color: #FF6450; */
}

.slider .s-wrap .s-content h3 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 60px;

}

.slider .s-wrap .s-content .s-text-ul {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 33px;
  width: 100%;
  line-height: 2.8rem;

}

.slider .s-wrap .s-content .s-text-ul li {
  float: left;
}

.slider .s-wrap .s-content .s-text-ul li:first-child {
  width: 30%
}

.slider .s-wrap .s-content .s-text-ul :last-child {
  width: 70%;
}

.slider .s-wrap .s-content .s-text-ul .color-box p {
  width: fit-content;
  float: left;
  padding: 0 4px 0 4px !important;
  background-color: #FF6450;
  border-radius: 5px;
  color: #FFF;
  font-size: 1.2rem;
}

.slider .s-wrap .s-content .s-text-ul .color-box :first-child {
  margin-bottom: 5px;
  margin-right: 5px;
}

.slider .s-wrap .slider-link {
  width: 45%;
}

.slider .s-wrap .slider-link :hover {
  opacity: 0.5;
}

.slider .s-wrap .visit-btn {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 70px;
  border: 1px solid #000;
  background-color: none;
  border-radius: 100%;
  z-index: 2;

  transition: 1s;
}

.slider .s-wrap .visit-btn p {
  position: absolute;
  font-size: 1.8rem;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  color: #000;
}

.v-arrow {
  position: relative;
  display: inline-block;
  padding: 0 0 0 6px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
  margin-left: 40px;
  top: 41%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.v-arrow::before,
.v-arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.v-btn-arrow::before {
  left: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #000;
}

.v-btn-arrow::after {
  left: 7px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 2px;
}

.slider .s-wrap img {
  width: 100%;
  margin-left: 5%;
  border-radius: 20px;
  transition: 1s;
}

.slider .slick-slide {
  transform: scale(0.8);
  /*左右の画像のサイズを80%に*/
  transition: all 1.0s;
  /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;
  /*透過50%*/
}

.slider .slick-slide.slick-center {
  transform: scale(1);
  /*中央の画像のサイズだけ等倍に*/
  opacity: 1;
  /*透過なし*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 5px solid #FF6450;
  /*矢印の色*/
  border-right: 5px solid #FF6450;
  /*矢印の色*/
  height: 15px;
  width: 15px;
  z-index: 99;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 10.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 10.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  width: 70vw;
}

.slick-dots li {
  display: inline-block;
  margin: 0px;
  width: 12.5%;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 100%;
  /*ドットボタンのサイズ*/
  height: 2px;
  /*ドットボタンのサイズ*/
  display: block;
  float: left;
  border-radius: 0%;
  background: #FFF;
  /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #FF6450;
  /*ドットボタンの現在地表示の色*/
}

@media screen and (max-width:767px) {
  .slider {
    margin-top: 30px;
  }

  .slider .s-wrap {
    flex-direction: column-reverse;
    width: 85vw;
  }

  .slider .s-wrap .s-content {
    width: 100%;
  }

  .slider .s-wrap .slider-link {
    width: 100%;
  }

  .slider .s-wrap .s-content .s-text-ul li:first-child {
    width: 35%
  }

  .slider .s-wrap .s-content .s-text-ul :last-child {
    width: 65%;
  }

  .slider .s-wrap .s-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 45px;
    margin-bottom: 20px;

  }

  .slider .s-wrap .s-content .s-text-ul {
    font-size: 1.4rem;
    margin-bottom: 16px;
    width: 100%;
    line-height: 2.2rem;
  }

  .slider .s-wrap .s-content .s-text-ul .color-box p {
    font-size: 1.1rem;
  }

  .slider .s-wrap img {
    width: 100%;
    margin-left: 0;
    border-radius: 40px;
  }

  .slider .s-wrap .visit-btn {
    top: 37%;
    right: 0%;


  }



  .slick-prev,
  .slick-next {
    top: 24%;
  }

  .slick-prev {
    /*戻る矢印の位置と形状*/
    left: 4.0%;
  }

  .slick-next {
    /*次へ矢印の位置と形状*/
    right: 4.0%;
  }

  .slick-dots {
    margin-top: 15px;
  }
}


#recruit {
  position: relative;
  height: 100vh;
}

#recruit .rec-txt-area {
  width: 60%;
}

#recruit .recruit-img {
  position: absolute;
  float: right;
  width: 40%;
  height: 70%;
  top: 100px;
  right: 0;
  background-image: url(../image/top/recruit-img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 40px 0 0 40px;
}

#recruit .recruit-img p {
  position: absolute;
  left: 5%;
  bottom: 10%;
  font-size: 10.8rem;
  font-weight: 700;
  color: none;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

#recruit .nav-contact {
  margin-left: 0;
  margin-top: 40px;
}

@media screen and (max-width:767px) {
  #recruit {
    height: auto;
  }

  #recruit .rec-txt-area {
    width: 100%;
    margin-top: 280px;
  }

  #recruit .recruit-img {
    width: 90%;
    height: 250px;
  }

  #recruit .recruit-img p {
    font-size: 7.2rem;
    left: 5%;
    bottom: 12%;
  }
}

#company {
  background-color: #F7F7F7;
  margin-top: 100px;
}

#company .wrap {
  height: auto;
  margin-top: 100px;
}

#company .company-logo {
  display: block;
  float: left;
  width: 640px;
  margin-top: -270px;
}

#company .com-txt-area {
  margin-left: 40%;
  text-align: left
}

#company .com-txt-area .com-txt {
  display: flex;
  margin-top: 30px;
}

#company .com-txt-area .com-txt li {
  font-size: 1.5rem;
  width: 150px;
  font-weight: 400;
  line-height: 3.0rem;
}

#company .com-txt-area .com-txt li p {
  font-size: 1.5rem;
}

#company .com-txt-area .com-txt :last-child {
  width: 400px;
}
#company .oe-link{
  display: inline-block;
  text-decoration: underline;
}
#company .oe-link :hover{
  opacity: 0.6;
}
#company .oe-link i{
  margin-left: 5px;
  width: 20px !important;
}

@media screen and (max-width:767px) {
  #company {
    width: 90%;
    margin-left: 10%;
    background-color: #F7F7F7;
    padding-top: 30px;
    margin-top: 0;
  }

  #company .wrap {
    margin-top: 0px;
  }

  #company .company-logo {
    width: 80%;
    margin-top: -90px;
    margin-left: -10%;
  }

  #company .com-txt-area .com-txt {
    display: block;
    margin-top: 30px;
  }

  #company .com-txt-area {
    margin-left: 0;
    text-align: left;
  }

  #company .com-txt-area .com-txt li {
    font-size: 1.4rem;
    max-width: 100%;
    margin-top: 10px;
  }

  #company .com-txt-area .com-txt .sp-b {
    font-weight: 700;
  }

  #company .com-txt-area .com-txt li p {
    font-size: 1.4rem;
    max-width: 100%;
    padding-left: 1em;
    text-indent: -1em;
  }
}

#policy {
  position: relative;
  padding: 250px 0 150px 0;
}

#policy h1 {
  font-size: 2.4rem;
  color: #000;
  padding-bottom: 60px;
}
#policy h2 {
  font-size: 2.2rem;
  color: #000;
  font-weight: 700;
  background-color: #f5f5f5;
  border-bottom: 2px solid #ccc;
  margin-top: 50px;
  font-size: 22px;
  margin-bottom: 30px;
  line-height: 1.4;
  position: relative;
  padding: 15px 20px;
}
#policy h3 {
  font-size: 1.8rem;
  color: #000;
  padding-bottom: 25px;
  font-weight: 700;
  
}
#policy h1 span {
  font-size: 1.2rem;
  color: #FF6450;
}

#policy .body-txt {
  text-align: left;
}

#policy p {
  font-size: 1.6rem;
  padding-bottom: 25px;
}

#policy strong {
  font-weight: 700;
}
#policy p a{
  font-size: 1.6rem;
  color: #FF6450;
  text-decoration: underline;
}
#policy hr{
  margin-top: 50px;
  color: #ccc;
}
#policy ol{
  padding: 50px 70px 30px 70px;
  list-style: decimal;
  font-size: 1.6rem;
      line-height: 3rem;
}
#policy li{
 padding-bottom: 25px;
}
@media screen and (max-width:767px) {
  #policy h1 {
    font-size: 2.0rem;
    line-height: 3.4rem;
  }
  #policy h2{
    font-size: 1.8rem;
  }

  #policy ol{
    padding: 0 30px 20px 30px;
  }


}