@charset "utf-8";
@media print, screen and (min-width: 751px) {
  /* mainImg */
  #mainImg {
    position: relative;
    padding-bottom: calc(530 / 1400 * 100vw);
    overflow: hidden;
  }
  #mainImg .main_Bg {
    position: absolute;
    width: calc(1400 / 1400 * 100vw);
    bottom: 0;
    left: 0;
    z-index: 4;
  }
  #mainImg h1 {
    position: absolute;
    width: calc(578 / 1400 * 100vw);
    top: calc(44 / 1400 * 100vw);
    left: calc(419 / 1400 * 100vw);
    z-index: 6;
  }
  #mainImg .text01 {
    position: absolute;
    width: calc(394 / 1400 * 100vw);
    top: calc(31 / 1400 * 100vw);
    right: 0;
    z-index: 6;
  }
  #mainImg .text02 {
    position: absolute;
    width: calc(331 / 1400 * 100vw);
    top: calc(215 / 1400 * 100vw);
    left: calc(1017 / 1400 * 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(145 / 1400 * 100vw);
    top: calc(40 / 1400 * 100vw);
    left: calc(62 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky02 {
    width: calc(67 / 1400 * 100vw);
    top: calc(208 / 1400 * 100vw);
    left: calc(168 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky03 {
    width: calc(115 / 1400 * 100vw);
    top: calc(277 / 1400 * 100vw);
    left: calc(-20 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky04 {
    width: calc(67 / 1400 * 100vw);
    top: calc(28 / 1400 * 100vw);
    left: calc(306 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky05 {
    width: calc(48 / 1400 * 100vw);
    top: calc(45 / 1400 * 100vw);
    left: calc(264 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky06 {
    width: calc(67 / 1400 * 100vw);
    top: calc(31 / 1400 * 100vw);
    left: calc(872 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky07 {
    width: calc(83 / 1400 * 100vw);
    top: calc(169 / 1400 * 100vw);
    left: calc(1033 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky08 {
    width: calc(62 / 1400 * 100vw);
    top: calc(274 / 1400 * 100vw);
    left: calc(950 / 1400 * 100vw);
  }
  #mainImg .main_sky .sky.sky09 {
    width: calc(67 / 1400 * 100vw);
    top: calc(-1 / 1400 * 100vw);
    left: calc(1295 / 1400 * 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 / 1400 * 100vw);
    top: calc(58 / 1400 * 100vw);
    left: calc(597 / 1400 * 100vw);
  }
  #mainImg .main_bird .bird.bird02 {
    width: calc(38 / 1400 * 100vw);
    top: calc(157 / 1400 * 100vw);
    left: calc(1148 / 1400 * 100vw);
  }
  #mainImg .main_bird .bird.bird03 {
    width: calc(54 / 1400 * 100vw);
    top: calc(186 / 1400 * 100vw);
    left: calc(1206 / 1400 * 100vw);
  }
  #mainImg .main_bird .bird.bird04 {
    width: calc(38 / 1400 * 100vw);
    top: calc(139 / 1400 * 100vw);
    left: calc(1237 / 1400 * 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(64 / 1400 * 100vw);
    top: calc(360 / 1400 * 100vw);
    left: calc(420 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people01.move {
    width: calc(58 / 1400 * 100vw);
    top: calc(340 / 1400 * 100vw);
    left: calc(600 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people02.set {
    width: calc(34 / 1400 * 100vw);
    top: calc(390 / 1400 * 100vw);
    left: calc(500 / 1400 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people02.move {
    width: calc(30 / 1400 * 100vw);
    top: calc(360 / 1400 * 100vw);
    left: calc(670 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people03.set {
    width: calc(86 / 1400 * 100vw);
    top: calc(340 / 1400 * 100vw);
    left: calc(895 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people03.move {
    width: calc(82 / 1400 * 100vw);
    top: calc(330 / 1400 * 100vw);
    left: calc(930 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people04.set {
    width: calc(34 / 1400 * 100vw);
    top: calc(350 / 1400 * 100vw);
    left: calc(280 / 1400 * 100vw);
    z-index: 3;
  }
  #mainImg .main_people .people.people04.move {
    width: calc(32 / 1400 * 100vw);
    top: calc(340 / 1400 * 100vw);
    left: calc(320 / 1400 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people05.set {
    width: calc(66 / 1400 * 100vw);
    top: calc(420 / 1400 * 100vw);
    left: calc(1120 / 1400 * 100vw);
    z-index: 3;
  }
  #mainImg .main_people .people.people05.move{
    width: calc(62 / 1400 * 100vw);
    top: calc(390 / 1400 * 100vw);
    left: calc(750 / 1400 * 100vw);
    z-index: 3;
  }
  #mainImg .main_people .people.people06.set {
    width: calc(70 / 1400 * 100vw);
    top: calc(380 / 1400 * 100vw);
    left: calc(1280 / 1400 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people06.move {
    width: calc(80 / 1400 * 100vw);
    top: calc(405 / 1400 * 100vw);
    left: calc(980 / 1400 * 100vw);
    z-index: 2;
  }
  #mainImg .main_people .people.people07.set {
    width: calc(52 / 1400 * 100vw);
    top: calc(400 / 1400 * 100vw);
    left: calc(880 / 1400 * 100vw);
    z-index: 4;
  }
  #mainImg .main_people .people.people07.move {
    width: calc(58 / 1400 * 100vw);
    top: calc(410 / 1400 * 100vw);
    left: calc(380 / 1400 * 100vw);
    z-index: 4;
  }
  #mainImg .main_people .people.people08.set {
    width: calc(56 / 1400 * 100vw);
    top: calc(390/ 1400 * 100vw);
    left: calc(120 / 1400 * 100vw);
    z-index: 1;
  }
  #mainImg .main_people .people.people08.move {
    width: calc(50 / 1400 * 100vw);
    top: calc(330 / 1400 * 100vw);
    left: calc(20 / 1400 * 100vw);
    z-index: 4;
  }
}
/*

アニメーション

*/
@media print, screen and (min-width: 751px) {
  #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.08);
      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.03);
      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(0.4vw, 1.1vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes sky_in02 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.5vw, 0.6vw);
      opacity: 0.7;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes sky_in03 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.2vw, 0.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.6vw, 1vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in01 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.4vw, 0.9vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in02 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.5vw, 0.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, 1vw);
      opacity: 0.8;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes bird_in04 {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(0.6vw, 1vw);
      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(-2.5vw, -0.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people01_move {
    0% {
      transform: scale(0.9) translate(-2.5vw, -0.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people02 {
    0% {
      transform: scale(0.9) translate(1.8vw, -2.2vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people02_move {
    0% {
      transform: scale(0.9) translate(1.8vw, -2.2vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people03 {
    0% {
      transform: scale(1) translateY(0);
    }
    50% {
      transform: scale(1.09) translateY(-0.5vw);
    }
    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(-1.5vw, -2vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people05_move {
    0% {
      transform: scale(0.85) translate(-1.5vw, -2vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people06 {
    0% {
      transform: scale(0.85) translate(1vw, -1.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people06_move {
    0% {
      transform: scale(0.85) translate(1vw, -1.5vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people07 {
    0% {
      transform: translate(-7vw, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes people07_move {
    0% {
      transform: translate(-7vw, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes people08 {
    0% {
      transform: scale(1.2) translate(3vw, 1vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
  @keyframes people08_move {
    0% {
      transform: scale(1.2) translate(3vw, 1vw);
    }
    100% {
      transform: scale(1) translate(0, 0);
    }
  }
}