@charset "utf-8";
/*---------------------------------
| main visual
---------------------------------*/
.mv {
    position: relative;
    margin-top: 90px;
    width: 100vw;
    height: calc(100vh - 90px);
    overflow: hidden;
    background-color: #fff;
}
.mv_item {
    opacity: 0;
}
.gear {
    position: absolute;
}
.mv_msg {
    position: absolute;
    top: 43%;
    left: calc(50% - 280px);
    display: block;
    width: 0;
    box-sizing: content-box;
    overflow: hidden;
    background-color: #ff001a;
    white-space: nowrap;
    color: #fff;
    font-size: 8.4rem;
    text-align: left;
    transform: translateY(-43%);
}
.mv_msg span {
    display: block;
    padding: 4px 10px;
    font-weight: 700;
}
.mv_msg.second {
    transform: translateY(calc(50% + 20px));
}
#person1 {
    /* 縦位置 */
    position: absolute;
    top: 50%;
    /* 横位置 */
    left: 50%;
    width: 40%;
    transform: translateX(-140%) translateY(-35%);
}
#person2 {
    /* 縦位置 */
    position: absolute;
    top: 50%;
    transform: translateX(-85%) translateY(-30%);
    /* 横位置 */
    left: 50%;
    width: 33%;
}
#person3 {
    /* 縦位置 */
    position: absolute;
    top: 50%;
    transform: translateX(-10%) translateY(-70%);
    /* 横位置 */
    left: 50%;
    width: 80vh;
    width: 30%;
}
#person4 {
    /* 縦位置 */
    position: absolute;
    top: 50%;
    transform: translateX(45%) translateY(-40%);
    /* 横位置 */
    left: 50%;
    width: 35%;
}
#gear1 {
    top: 60%;
    left: -5%;
    width: 10%;
}
#gear2 {
    top: 70%;
    left: 5%;
    width: 10%;
}
#gear3 {
    top: -5%;
    left: 30%;
    width: 15%;
}
#gear4 {
    top: 18%;
    left: 40%;
    width: 10%;
}
#gear5 {
    bottom: 10%;
    right: 30%;
    width: 15%;
}
#gear6 {
    bottom: -5%;
    right: 25%;
    width: 10%;
}
#gear7 {
    top: -5%;
    right: 10%;
    width: 8%;
}
#gear8 {
    top: 15%;
    right: -2%;
    width: 15%;
}
@media screen and (max-height:900px) {
    #person1 {
        transform: translateX(-142%) translateY(-32%);
    }
    #person2 {
        transform: translateX(-85%) translateY(-33%);
    }
    #person3 {
        transform: translateX(0%) translateY(-67%);
    }
    #person4 {
        transform: translateX(58%) translateY(-40%);
    }
}
/* アニメーション設定 */
.arrowWrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 120px;
  transform: translateX(-50%);
}

.arrowInner p {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: end;
  color: #fe263c;
}

.arrow {
  width: 1px;
  height: 70px;
  margin: 10px auto 0;
  position: relative;
  overflow: hidden;
}

.arrow::before {
  content: '';
  width: 2px;
  height: 70px;
  margin: 50px auto 0;
  background-color: #fe263c;
  position: absolute;
  top: -120px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 70px, 0);
    transform: translate3d(-50%, 70px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 70px, 0);
    transform: translate3d(-50%, 70px, 0);
  }
}
@media screen and (max-width:1024px) {
    .mv {
        height: 50vh;
        margin-top: 60px;
    }
    .mv_msg {
        font-size: 4.0rem;
        left: calc(50% - 140px);
    }
    #person1 {
        transform: translateX(-135%) translateY(-35%);
    }
    #person2 {
        transform: translateX(-60%) translateY(-25%);
    }
    #person3 {
        transform: translateX(20%) translateY(-80%);
    }
    #person4 {
        transform: translateX(45%) translateY(-40%);
    }
}
@media screen and (max-width:600px) {
    .mv {
        margin-top: 60px;
        height: calc(100vh - 60px);
    }
    .mv_msg {
        font-size: 3.8rem;
        left: calc(50% - 130px);
        top: 40%;
    }
    .mv_msg.second {
        transform: translateY(calc(50% + 10px));
    }
    #person1 {
        top: unset;
        width: auto;
        left: 50%;
        bottom: 0;
        transform: translateX(-63%) translateY(60%);
    }
    #person1 img {
        width: 48vh;
        max-width: unset;
    }
    #person2 {
        width: auto;
        transform: translateX(-108%) translateY(-104%);
    }
    #person2 img {
        width: 240px;
        width: 28vh;
        max-width: unset;
    }
    #person3 {
        width: auto;
        transform: translateX(0%) translateY(-128%);
    }
    #person3 img {
        width: 260px;
        width: 32vh;
        max-width: unset;
    }
    #person4 {
        width: auto;
        transform: translateX(-16%) translateY(-46%);
    }
    #person4 img {
        width: 290px;
        width: 40vh;
        max-width: unset;
    }
    #gear1 {
        top: 65%;
        left: -5%;
        width: 30%;
    }
    #gear2 {
        top: 50%;
        left: 15%;
        width: 30%;
    }
    #gear3 {
        top: -5%;
        left: 15%;
        width: 35%;
    }
    #gear4 {
        top: 10%;
        left: 0;
        width: 25%;
    }
    #gear5 {
        bottom: unset;
        top: 20%;
        right: 0%;
        width: 30%;
    }
    #gear6 {
        bottom: unset;
        top: 15%;
        right: 30%;
        width: 30%;
    }
    #gear7 {
        top: unset;
        bottom: -8%;
        right: -5%;
        width: 40%;
    }
    #gear8 {
        top: unset;
        bottom: 15%;
        right: -2%;
        width: 25%;
    }
    .arrowWrap {
        height: 120px;
    }
    .arrow::before {
        width: 3px;
    }
}