@charset "UTF-8";
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* コピペ用
@include media(375px, min) {
数値での指定可能
}
@include media(spM) {
minかmaxを略した場合はmin-widthで展開
}
@include media(spM,max) {
}
*/
@media screen and (min-width: 1201px) {
  .iftab {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .ifpc {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .iftab {
    display: none;
  }
  .mvFukidashi {
    display: block !important;
    opacity: 0;
  }
}
.mainVisual {
  width: 100%;
  position: relative;
}
.mainVisual .imgBox img {
  width: 100%;
}
.mainVisual .mvSvg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mainVisual .mvSvg .mvIn svg {
  position: relative;
  z-index: 1;
}
.mainVisual .mvSvg .mvIn .mvFukidashi {
  display: none;
  position: absolute;
}

@media screen and (min-width: 1201px) {
  .mainVisual .mvSvg .mvIn .mvFukidashi {
    display: none;
  }
  .mainVisual a {
    position: relative;
  }
  .mainVisual a:hover {
    cursor: url(../img/top/mv/fukidashi/cursor.png), auto;
  }
  .mainVisual a:hover .mvFukidashi {
    display: block !important;
  }
  .mainVisual a.aNone {
    cursor: initial;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .mainVisual .mvSvg .mvIn .mvFukidashi {
    display: block;
  }
}
/*=============== 画面が読み込まれるとpng画像がループして動く =================*/
/*suteps()でフレーム数指定*/
.steps1 {
  background: url("../img/top/mv/people/steps1.png") no-repeat;
  animation: stepsline1 0.8s steps(4) infinite;
}

.steps2 {
  background: url("../img/top/mv/people/steps2.png") no-repeat;
  animation: stepsline2 1s steps(4) infinite;
}

.steps3 {
  background: url("../img/top/mv/people/steps3.png") no-repeat;
  animation: stepsline3 1s steps(5) infinite;
}

.steps4 {
  background: url("../img/top/mv/people/steps4.png") no-repeat;
  animation: stepsline4 0.9s steps(6) infinite;
}

.steps5 {
  background: url("../img/top/mv/people/steps5.png") no-repeat;
  animation: stepsline5 1s steps(7) infinite;
}

.steps {
  position: absolute;
  background-size: auto 100%;
}

@media screen and (min-width: 768px) {
  .steps1 {
    width: 10vw; /*1フレーム分の横幅*/
    height: 10vw; /*1フレーム分の縦幅*/
    top: 4.7%;
    left: 43.5%;
  }
  @keyframes stepsline1 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -40vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps2 {
    width: 11vw; /*1フレーム分の横幅*/
    height: 11vw; /*1フレーム分の縦幅*/
    top: 35.6%;
    left: 54.1%;
  }
  @keyframes stepsline2 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -44vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps3 {
    width: 9.3vw; /*1フレーム分の横幅*/
    height: 9.3vw; /*1フレーム分の縦幅*/
    top: 44%;
    left: 8.6%;
  }
  @keyframes stepsline3 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -46.5vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps4 {
    width: 11.2vw; /*1フレーム分の横幅*/
    height: 11.2vw; /*1フレーム分の縦幅*/
    top: 57.2%;
    left: 33.1%;
  }
  @keyframes stepsline4 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -67.1vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps5 {
    width: 9.31vw; /*1フレーム分の横幅*/
    height: 9.31vw; /*1フレーム分の縦幅*/
    top: 64%;
    left: 57%;
  }
  @keyframes stepsline5 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -65.1vw 0; /*画像のフルサイズ指定*/
    }
  }
}
@media screen and (max-width: 767px) {
  .steps1 {
    width: 17vw;
    height: 17vw;
    top: 30.2%;
    left: 41.1%;
  }
  @keyframes stepsline1 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -68vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps2 {
    width: 20vw;
    height: 20vw;
    top: 51.2%;
    left: 59%;
  }
  @keyframes stepsline2 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -80vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps3 {
    width: 16.5vw;
    height: 16.5vw;
    top: 69.5%;
    left: 22.6%;
  }
  @keyframes stepsline3 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -82.5vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps4 {
    width: 19.5vw;
    height: 19.5vw;
    top: 78.5%;
    left: 66.2%;
  }
  @keyframes stepsline4 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -116.8vw 0; /*画像のフルサイズ指定*/
    }
  }
  .steps5 {
    width: 16.5vw;
    height: 16.5vw;
    top: 20.9%;
    left: 13.5%;
  }
  @keyframes stepsline5 {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -115.4vw 0; /*画像のフルサイズ指定*/
    }
  }
}
/*=============== partsアニメーション =================*/
/*-- 気球 --------------*/
.bigBalloon {
  position: absolute;
  animation: bigBalloon 6s infinite;
}
.bigBalloon img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .bigBalloon {
    width: 18.5vw;
    top: 1.9%;
    right: -0.8%;
  }
  @keyframes bigBalloon {
    0% {
      top: 1%;
    }
    50% {
      top: 3%;
      right: 1%;
    }
    100% {
      top: 1%;
    }
  }
}
@media screen and (max-width: 767px) {
  .bigBalloon {
    width: 14.2vw;
    top: 2.5%;
    left: 6%;
  }
  @keyframes bigBalloon {
    0% {
      top: 2.2%;
    }
    50% {
      top: 1.2%;
    }
    100% {
      top: 2.2%;
    }
  }
}
/*-- 飛行機 --------------*/
.airplane {
  position: absolute;
  animation: linear airplane 8s infinite;
}
.airplane img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .airplane {
    width: 13.9vw;
    top: 25.8%;
    left: 1.1%;
  }
  @keyframes airplane {
    0% {
      top: 24.5%;
    }
    50% {
      top: 27%;
      left: 2%;
    }
    100% {
      top: 24.5%;
    }
  }
}
@media screen and (max-width: 767px) {
  .airplane {
    width: 14.2vw;
    top: 7%;
    right: 6%;
  }
  @keyframes airplane {
    0% {
      top: 7%;
    }
    50% {
      top: 3%;
    }
    100% {
      top: 7%;
    }
  }
}
/*-- 風船（PC、タブレット） --------------*/
@media screen and (min-width: 768px) {
  .balloon {
    width: 2.4vw;
    position: absolute;
  }
  .balloon img {
    width: 100%;
  }
  .balloon1 {
    top: 41.3%;
    left: 2%;
    animation: linear balloon1 2s infinite;
  }
  @keyframes balloon1 {
    0% {
      top: 41.3%;
    }
    25% {
      top: 41.8%;
    }
    50% {
      top: 41.3%;
    }
    75% {
      top: 40.8%;
    }
    100% {
      top: 41.3%;
    }
  }
  .balloon2 {
    top: 8.2%;
    left: 8.5%;
    animation: linear balloon2 2.5s infinite;
  }
  @keyframes balloon2 {
    0% {
      top: 8.2%;
    }
    25% {
      top: 8%;
    }
    50% {
      top: 8.2%;
    }
    75% {
      top: 8.7%;
    }
    100% {
      top: 8.2%;
    }
  }
  .balloon3 {
    top: 6.1%;
    left: 12%;
    animation: linear balloon3 2s infinite;
  }
  @keyframes balloon3 {
    0% {
      top: 6.1%;
    }
    25% {
      top: 6.2%;
    }
    50% {
      top: 6.1%;
    }
    75% {
      top: 5.8%;
    }
    100% {
      top: 6.1%;
    }
  }
  .balloon4 {
    top: 10.5%;
    left: 22.8%;
    animation: linear balloon4 2.2s infinite;
  }
  @keyframes balloon4 {
    0% {
      top: 10.5%;
    }
    25% {
      top: 10%;
    }
    50% {
      top: 10.5%;
    }
    75% {
      top: 10.7%;
    }
    100% {
      top: 10.5%;
    }
  }
  .balloon5 {
    top: 8.7%;
    left: 60.8%;
    animation: linear balloon5 2.9s infinite;
  }
  @keyframes balloon5 {
    0% {
      top: 8.7%;
    }
    25% {
      top: 9%;
    }
    50% {
      top: 8.7%;
    }
    75% {
      top: 8.5%;
    }
    100% {
      top: 8.7%;
    }
  }
  .balloon6 {
    top: 11.6%;
    left: 63.6%;
    animation: linear balloon6 2.2s infinite;
  }
  @keyframes balloon6 {
    0% {
      top: 11.6%;
    }
    25% {
      top: 11.2%;
    }
    50% {
      top: 11.6%;
    }
    75% {
      top: 12%;
    }
    100% {
      top: 11.6%;
    }
  }
  .balloon7 {
    top: 32%;
    left: 76.4%;
    animation: linear balloon7 2.8s infinite;
  }
  @keyframes balloon7 {
    0% {
      top: 32%;
    }
    25% {
      top: 31%;
    }
    50% {
      top: 32%;
    }
    75% {
      top: 33%;
    }
    100% {
      top: 32%;
    }
  }
  .balloon8 {
    top: 28.1%;
    left: 96.4%;
    animation: linear balloon8 2.3s infinite;
  }
  @keyframes balloon8 {
    0% {
      top: 28.1%;
    }
    25% {
      top: 28.4%;
    }
    50% {
      top: 28.1%;
    }
    75% {
      top: 27.8%;
    }
    100% {
      top: 28.1%;
    }
  }
  .balloon9 {
    top: 43.6%;
    left: 94.7%;
    animation: linear balloon9 2.1s infinite;
  }
  @keyframes balloon9 {
    0% {
      top: 43.6%;
    }
    25% {
      top: 43.3%;
    }
    50% {
      top: 43.6%;
    }
    75% {
      top: 43.9%;
    }
    100% {
      top: 43.6%;
    }
  }
}/*# sourceMappingURL=top_mv.css.map */