@charset "UTF-8";
div.box{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items:  center;
    flex-wrap: nowrap;
    position: relative;
}

main img{
  width: 100%;
  display: flex;
  height: auto;
}

  /*下からフェードイン*/
  .js-fadeBottom {
      opacity: 0;
      visibility: hidden;
      transform: translateY(80px);
      transition: opacity 1s,visibility 1s, transform 1s;
  }
  .js-fadeBottom.inview {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
  }

    /*下からフェードイン*/
    .js-fadeBottom2 {
        opacity: 0;
        visibility: hidden;
        transform: translateY(80px);
        transition: opacity 0.5s,visibility 0.5s, transform 0.5s;
    }
    .js-fadeBottom2.inview {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

      /*下からフェードイン*/
  .js-fadeBottom3 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 1.0s,visibility 1.0s, transform 1.0s;
}
.js-fadeBottom3.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

  /*下からフェードイン*/
  .js-fadeBottom4 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
}
.js-fadeBottom4.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

  /*下からフェードイン*/
  .js-fadeBottom5 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 2.0s,visibility 2.0s, transform 2.0s;
}
.js-fadeBottom5.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

  /*下からフェードイン*/
  .js-fadeBottom6 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 2.5s,visibility 2.5s, transform 2.5s;
}
.js-fadeBottom6.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

  /*下からフェードイン*/
  .js-fadeBottom7 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 3.0s,visibility 3.0s, transform 3.0s;
}
.js-fadeBottom7.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

  /*下からフェードイン*/
  .js-fadeBottom8 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 3.5s,visibility 3.5s, transform 3.5s;
}
.js-fadeBottom8.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
  /*上からフェードイン*/
  .js-fadeTop {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-80px);
      transition: opacity 1s,visibility 1s, transform 1s;
  }
  .js-fadeTop.inview {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
  }

  .js-fadeTop2 {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-80px);
    transition: opacity 1s,visibility 1s, transform 1s;
    transition-delay: 1s;
}
.js-fadeTop2.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.js-fadeTop3 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeTop3.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.js-fadeTop4 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: opacity 1s,visibility 1s, transform 1s;
  transition-delay: .5s;
}
.js-fadeTop4.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


  /* 左からフェードイン*/
  .js-fadeLeft {
      opacity: 0;
      visibility: hidden;
      transform: translateX(80px);
      transition: opacity 1s,visibility 1s, transform 1s;
  }
  .js-fadeLeft.inview {
      opacity: 1;
      visibility: visible;
      transform: translateX(0px);
  }

  /* 左からフェードイン2*/
  .js-fadeLeft2 {
      opacity: 0;
      visibility: hidden;
      transform: translateX(80px);
      transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
  }
  .js-fadeLeft2.inview {
      opacity: 1;
      visibility: visible;
      transform: translateX(0px);
  }

  /* 右からフェードイン*/
  .js-fadeRight {
      opacity: 0;
      visibility: hidden;
      transform: translateX(-80px);
      transition: opacity 1s,visibility 1s, transform 1s;
  }
  .js-fadeRight.inview {
      opacity: 1;
      visibility: visible;
      transform: translateX(0px);
  }

    /* 右からフェードイン2*/
    .js-fadeRight2 {
      opacity: 0;
      visibility: hidden;
      transform: translateX(-80px);
      transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
  }
  .js-fadeRight2.inview {
      opacity: 1;
      visibility: visible;
      transform: translateX(0px);
  }

  /* スケーリングフェードイン*/
  .js-fadeScale {
    opacity: 0;
    width: 0;
    transition: width 1s;
  }
  .js-fadeScale.inview {
    opacity: 1;
    width: 80%;
    transition-delay: .3s; 
  }

    /* スケーリングフェードイン*/
    .js-fadeScale1 {
        opacity: 0;
        width: 0;
        transition: width 1s;
      }
      .js-fadeScale1.inview {
        opacity: 1;
        width: 80%;
        transition-delay: .3s; 
      }

        /* スケーリングフェードイン*/
  .js-fadeScale2 {
    opacity: 0;
    width: 0;
    transition: width 1s;
  }
  .js-fadeScale2.inview {
    opacity: 1;
    width: 80%;
    transition-delay: .3s; 
  }

    /* スケーリングフェードイン*/
    .js-fadeScale3 {
        opacity: 0;
        width: 0;
        transition: width 1s;
      }
      .js-fadeScale3.inview {
        opacity: 1;
        width: 80%;
        transition-delay: .5s; 
      }

        /* スケーリングフェードイン*/
  .js-fadeScale4 {
    opacity: 0;
    width: 0;
    transition: width 1s;
  }
  .js-fadeScale4.inview {
    opacity: 1;
    width: 80%;
    transition-delay: .7s; 
  }

    /* スケーリングフェードイン*/
    .js-fadeScale5 {
        opacity: 0;
        width: 0;
        transition: width 1s;
      }
      .js-fadeScale5.inview {
        opacity: 1;
        width: 80%;
        transition-delay: 0.9s; 
      }


          /* スケーリングフェードイン*/
    .js-fadeScale6 {
      opacity: 0;
      width: 0;
      transition: width .3s;
    }
    .js-fadeScale6.inview {
      opacity: 1;
      width: 80%;
      transition-delay: .3s; 
    }