@charset "utf-8";
@media (max-width: 750.99px) {
  /* mainImg */
  #mainImg {
    position: relative;
    padding-bottom: calc(1000 / 750 * 100vw);
    overflow: hidden;
  }
  #mainImg .main_Bg {
    position: absolute;
    width: calc(750 / 750 * 100vw);
    bottom: 0;
    left: 0;
    z-index: 4;
  }
  #mainImg h1 {
    position: absolute;
    width: calc(578 / 750 * 100vw);
    top: calc(156 / 750 * 100vw);
    left: calc(91 / 750 * 100vw);
    z-index: 6;
  }
  #mainImg .text01 {
    position: absolute;
    width: calc(415 / 750 * 100vw);
    top: calc(22 / 750 * 100vw);
    right: 0;
    z-index: 6;
  }
  #mainImg .text02 {
    position: absolute;
    width: calc(331 / 750 * 100vw);
    top: calc(477 / 750 * 100vw);
    left: calc(380 / 750 * 100vw);
    z-index: 3;
  }
  /* mainImg sky */
  #mainImg .main_sky {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #mainImg .main_sky .sky {
    position: absolute;
  }
  #mainImg .main_sky .sky.sky01 {
    width: calc(141 / 750 * 100vw);
    top: calc(66 / 750 * 100vw);
    left: calc(0 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky02 {
    width: calc(46 / 750 * 100vw);
    top: calc(306 / 750 * 100vw);
    left: calc(-6 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky03 {
    width: calc(67 / 750 * 100vw);
    top: calc(374 / 750 * 100vw);
    left: calc(22 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky04 {
    width: calc(111 / 750 * 100vw);
    top: calc(491 / 750 * 100vw);
    left: calc(-22 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky05 {
    width: calc(46 / 750 * 100vw);
    top: calc(67 / 750 * 100vw);
    left: calc(260 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky06 {
    width: calc(63 / 750 * 100vw);
    top: calc(519 / 750 * 100vw);
    left: calc(191 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky07 {
    width: calc(113 / 750 * 100vw);
    top: calc(569 / 750 * 100vw);
    left: calc(274 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky08 {
    width: calc(72 / 750 * 100vw);
    top: calc(126 / 750 * 100vw);
    left: calc(527 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky09 {
    width: calc(83 / 750 * 100vw);
    top: calc(281 / 750 * 100vw);
    left: calc(705 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky10 {
    width: calc(47 / 750 * 100vw);
    top: calc(415 / 750 * 100vw);
    left: calc(669 / 750 * 100vw);
  }
  #mainImg .main_sky .sky.sky11 {
    width: calc(56 / 750 * 100vw);
    top: calc(579 / 750 * 100vw);
    left: calc(701 / 750 * 100vw);
  }
  /* mainImg bird */
  #mainImg .main_bird {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }
  #mainImg .main_bird .bird {
    position: absolute;
  }
  #mainImg .main_bird .bird.bird01 {
    width: calc(69 / 750 * 100vw);
    top: calc(171 / 750 * 100vw);
    left: calc(268 / 750 * 100vw);
  }
  #mainImg .main_bird .bird.bird02 {
    width: calc(19 / 750 * 100vw);
    top: calc(358 / 750 * 100vw);
    left: calc(620 / 750 * 100vw);
  }
  #mainImg .main_bird .bird.bird03 {
    width: calc(27 / 750 * 100vw);
    top: calc(372 / 750 * 100vw);
    left: calc(649 / 750 * 100vw);
  }
  #mainImg .main_bird .bird.bird04 {
    width: calc(19 / 750 * 100vw);
    top: calc(349 / 750 * 100vw);
    left: calc(664 / 750 * 100vw);
  }
  /* mainImg people */
  #mainImg .main_people {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
  }
  #mainImg .main_people .people {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }
  #mainImg .main_people .people.people01.set {
    width: calc(78 / 750 * 100vw);
    top: calc(690 / 750 * 100vw);
    left: calc(240 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people01.move {
    width: calc(84 / 750 * 100vw);
    top: calc(765 / 750 * 100vw);
    left: calc(320 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people02.set {
    width: calc(38 / 750 * 100vw);
    top: calc(700 / 750 * 100vw);
    left: calc(410 / 750 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people02.move {
    width: calc(36 / 750 * 100vw);
    top: calc(660 / 750 * 100vw);
    left: calc(650 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people03.set {
    width: calc(105 / 750 * 100vw);
    top: calc(575 / 750 * 100vw);
    left: calc(265 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people03.move {
    width: calc(105 / 750 * 100vw);
    top: calc(575 / 750 * 100vw);
    left: calc(260 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people04.set {
    display: none;
    width: calc(34 / 750 * 100vw);
    top: calc(600 / 750 * 100vw);
    left: calc(280 / 750 * 100vw);
    z-index: 3;
  }
  #mainImg .main_people .people.people04.move {
    display: none;
    width: calc(32 / 750 * 100vw);
    top: calc(600 / 750 * 100vw);
    left: calc(320 / 750 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people05.set {
    width: calc(76 / 750 * 100vw);
    top: calc(650 / 750 * 100vw);
    left: calc(130 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people05.move {
    width: calc(84 / 750 * 100vw);
    top: calc(760 / 750 * 100vw);
    left: calc(550 / 750 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people06.set {
    width: calc(106 / 750 * 100vw);
    top: calc(820 / 750 * 100vw);
    left: calc(420 / 750 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people06.move {
    width: calc(88 / 750 * 100vw);
    top: calc(660 / 750 * 100vw);
    left: calc(490 / 750 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people07.set {
    width: calc(76 / 750 * 100vw);
    top: calc(840 / 750 * 100vw);
    left: calc(250 / 750 * 100vw);
    z-index: 4;
  }
  #mainImg .main_people .people.people07.move {
    width: calc(66 / 750 * 100vw);
    top: calc(800 / 750 * 100vw);
    left: calc(140 / 750 * 100vw);
    z-index: 4;
  }
  #mainImg .main_people .people.people08.set {
    width: calc(88 / 750 * 100vw);
    top: calc(790 / 750 * 100vw);
    left: calc(620 / 750 * 100vw);
    z-index: 4;
  }
  #mainImg .main_people .people.people08.move {
    width: calc(78 / 750 * 100vw);
    top: calc(690 / 750 * 100vw);
    left: calc(20 / 750 * 100vw);
    z-index: 3;
  }
}
/*

アニメーション

*/
@media screen and (max-width: 750.99px) {
  #mainImg h1 {
    opacity: 0;
  }
  #mainImg h1.move {
    animation: mainTitle 1.1s ease-in-out 0.4s normal both;
  }
  #mainImg .text02 {
    opacity: 0;
  }
  #mainImg .text02.move {
    animation: mainText02 1.1s ease-in-out 1s normal both;
  }
  @keyframes mainTitle {
    0% {
      transform: scale(0.9);
      opacity: 0;
    }
    30% {
      transform: scale(1.06);
      opacity: 1;
    }
    60% {
      transform: scale(0.96);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes mainText02 {
    0% {
      transform: translateY(0) scale(0.96);
      opacity: 0;
    }
    30% {
      transform: translateY(-0.6vw) scale(1.02);
      opacity: 1;
    }
    60% {
      transform: translateY(0) scale(0.96);
      opacity: 1;
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  #mainImg .scIn.fadeInMain {
    opacity: 0
  }
  #mainImg .scIn.fadeInMain.move {
    opacity: 1;
    transition-duration: 1600ms;
    transition-property: opacity;
    transition-timing-function: ease;
  }
  #mainImg .scIn.fadeInSky {
    opacity: 0
  }
  #mainImg .scIn.fadeInSky.move {
    opacity: 1;
    transition-duration: 1800ms;
    transition-property: opacity;
    transition-timing-function: ease;
  }
  /* main_sky */
  #mainImg .main_sky .sky_in01 {
    animation: sky_in01 8s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_sky .sky_in02 {
    animation: sky_in02 7.6s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_sky .sky_in03 {
    animation: sky_in03 7.8s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_sky .sky_in04 {
    animation: sky_in04 8.4s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_bird .sky_in01 {
    animation: bird_in01 7.6s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_bird .sky_in02 {
    animation: bird_in02 7.2s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_bird .sky_in03 {
    animation: bird_in03 6.6s infinite linear;
    animation-fill-mode: forwards;
  }
  #mainImg .main_bird .sky_in04 {
    animation: bird_in04 6.8s infinite linear;
    animation-fill-mode: forwards;
  }
  @keyframes sky_in01 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(1vw, 2.6vw);
      opacity: 0.9;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes sky_in02 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(1.2vw, 2.2vw);
      opacity: 0.7;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes sky_in03 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.8vw, 2.8vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes sky_in04 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.8vw, 2.4vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in01 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(1vw, 2vw);
      opacity: 0.9;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in02 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(1.2vw, 1.8vw);
      opacity: 0.7;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in03 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.8vw, 2.6vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in04 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.8vw, 2.4vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  #mainImg .main_people .people.people01.set.on {
    animation: people01 4s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people01.move.on {
    animation: people01_move 4s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people02.set.on {
    animation: people02 4s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people02.move.on {
    animation: people02_move 4s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people03.set.on {
    animation: people03 0.9s ease-in-out 1.5s;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people03.move.on {
    animation: people03 0.9s ease-in-out 1.5s;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people03 .in_people img {
    animation: people03_in 1.5s linear infinite;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people04.set.on {
    animation: people04 3s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people04.move.on {
    animation: people04_move 3s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people05.set.on {
    animation: people05 3s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people05.move.on {
    animation: people05_move 3s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people06.set.on {
    animation: people06 2.5s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people06.move.on {
    animation: people06_move 2.5s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people07.set.on {
    animation: people07 5s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people07.move.on {
    animation: people07_move 5s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people08.set.on {
    animation: people08 4s linear;
    animation-fill-mode: none;
  }
  #mainImg .main_people .people.people08.move.on {
    animation: people08_move 4s linear;
    animation-fill-mode: none;
  }
  @keyframes people01 {
    0% {
      transform: scale(0.9) translate(-7vw, -1.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people01_move {
    0% {
      transform: scale(0.9) translate(-7vw, -1.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people02 {
    0% {
      transform: scale(0.9) translate(4vw, -7vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people02_move {
    0% {
      transform: scale(0.9) translate(4vw, -7vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people03 {
    0% {
      transform: scale(1) translateY(0);
    }
    50% {
      transform: scale(1.09) translateY(-1.0vw);
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }
  @keyframes people03_in {
    0% {
      transform: rotate(0);
    }
    50% {
      transform: rotate(3deg);
    }
    100% {
      transform: rotate(0);
    }
  }
  @keyframes people04 {
    0% {
      transform: scale(0.9) translate(0.6vw, -0.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people04_move {
    0% {
      transform: scale(0.9) translate(0.6vw, -0.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people05 {
    0% {
      transform: scale(0.85) translate(-4vw, -6vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people05_move {
    0% {
      transform: scale(0.85) translate(-4vw, -6vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people06 {
    0% {
      transform: scale(0.9) translate(3vw, -6vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people06_move {
    0% {
      transform: scale(0.9) translate(3vw, -6vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people07 {
    0% {
      transform: translate(-11vw, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes people07_move {
    0% {
      transform: translate(-11vw, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes people08 {
    0% {
      transform: scale(1.1) translate(6vw, 3vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people08_move {
    0% {
      transform: scale(1.1) translate(6vw, 3vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
}