:root {
  /*---  anm01  ---*/
  --anm01_duration: 20s;
  /*-- 全体尺　--*/
  --anm01_num: 4;
  /*-- レイヤー数　--*/
  --anm01_w: 900px;
  /*-- 画像幅　--*/

  /*---  anm02   ---*/
  --anm02_duration: 28s;
  --anm02_num: 4;
  --anm02_w: 800px;

  /*---  anm03   ---*/
  --anm03_duration: 4.5s;
  --anm03_num: 3;
  --anm03_w: 900px;

  /*---  anm04   ---*/
  --anm04_duration: 18s;
  --anm04_num: 3;
  --anm04_w: 700px;
}


/*========================== プレビュー調整用 ====*/
.anm_container {
  margin: 0px auto 0px;
}

.tmp_txt {
  text-align: center;
}

/*=================================== 共通 ====*/
.anm_container {
  transform-origin: center;
  animation-play-state: paused;
}


.fade_show.fd_up {
  opacity: 0;
  transform: translateY(60px);
}

.fade_showed.fd_up {
  opacity: 1;
  transition: all 0.8s ease;
  animation-play-state: running;
}

.fade_showed.dly1 {
  transition-delay: .1s;
}

.fade_showed.dly2 {
  transition-delay: .2s;
}

.fade_showed.dly3 {
  transition-delay: .3s;
}

#main .fd {
  animation: fade 1s linear 0s 1 normal;
}

#main .fd_R {
  animation: fade_R .7s linear 0s 1 normal;
  transition-delay: .5s;
}

#main .fd_L {
  animation: fade_L .7s linear 0s 1 normal;
  transition-delay: .4s;
}

#main .fd_up {
  animation: fade_up .7s linear 0s 1 normal;
}

@media screen and (max-width: 767px) {
  #main .fd_L {
    animation: fade_L_sp .7s linear 0s 1 normal;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade_R {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade_L {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade_L_sp {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade_up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade_showed.fd_R {
  opacity: .5;
  transition: all 0.7s linear, transform 0.7s;
  transform: translateX(0);
  transition-delay: 5s;
}




.anm,
.anm2,
.anm3,
.anm4,
.anm5 {
  will-change: animation;
}


.slidebutton {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.slidebutton label {
  display: block;
  padding: 5px 10px;
  margin: 0 5px;
  border-radius: 100px;
  background: #aac8ff;
  color: #fff;
  text-align: center;
}

.slidebutton input {
  display: none;
}

.slidebutton input:checked+label {
  background: #2864f0;
  transition: background 1s ease;
}

@media screen and (max-width: 767px),
print {
  .slidebutton {
    margin-top: 24px;
    font-size: 1.2rem;
  }

  .slidebutton label {
    padding: 3px 15px;
  }
}



._show {
  opacity: 1;
  transition: all 1s ease;
  */
}

._hidden {
  opacity: 0;
  transition: all 1s ease;
}

/*============================================*/

/*--------------------------------anm01--*/
#anm01 {
  width: var(--anm01_w);
  position: relative;
  margin-top: -10px;
}

#anm01 .anm_bg {
  visibility: hidden;
}

/*------txt ----*/
#anm01-2 {
  width: var(--anm01_w);
  position: relative;
}

#anm01-2 .anm_bg {
  visibility: hidden;
  margin-top: -10px;
}

#anm01 .anm {
  visibility: hidden;
  animation: anm_rise var(--anm01_duration) 0s infinite;
}

#anm01 .anm2 {
  visibility: hidden;
  animation: anm_bounce3 var(--anm01_duration) 0s infinite;
}

#anm01 .anm3 {
  visibility: hidden;
  animation: anm_fade2 var(--anm01_duration) 0s infinite;
}

#anm01 .anm4 {
  overflow: hidden;
  visibility: hidden;
  animation: anm_rollup var(--anm01_duration) 0s ease-in infinite;
}

@media screen and (max-width: 767px),
print {
  #anm01 .anm4 {
    animation: anm_rollup2 var(--anm01_duration) 0s ease-in infinite;
  }
}

#anm01 .anm5 {
  visibility: hidden;
  animation: anm_bounce3-2 var(--anm01_duration) 0s linear infinite;
}

#anm01-2 .anm {
  visibility: hidden;
  animation: anm_fade2 var(--anm01_duration) 0s infinite;
}


#anm01 .anm_paper {
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 90%;
  overflow: hidden;
}

#anm01 .dly1,
#anm01-2 .dly1 {
  animation-delay: calc(var(--anm01_duration)/var(--anm01_num));
}

#anm01 .dly2,
#anm01-2 .dly2 {
  animation-delay: calc(var(--anm01_duration)/var(--anm01_num)*2);
}

#anm01 .dly3,
#anm01-2 .dly3 {
  animation-delay: calc(var(--anm01_duration)/var(--anm01_num)*3);
}

/*--------------------------------anm02--*/
#anm02 {
  position: relative;
  width: var(--anm02_w);
  margin-top: 20px;
}

#anm02 .anm {
  visibility: hidden;
  animation: anm_bounce4 var(--anm02_duration) 0s infinite;
}

@media screen and (max-width: 767px),
print {
  #anm02 {
    margin: -10px auto 5px;
  }
}

#anm02 .dly1 {
  animation-delay: calc(var(--anm02_duration)/var(--anm02_num));
}

#anm02 .dly2 {
  animation-delay: calc(var(--anm02_duration)/var(--anm02_num)*2);
}

#anm02 .dly3 {
  animation-delay: calc(var(--anm02_duration)/var(--anm02_num)*3);
}


/*--------------------------------anm03--*/
#anm03 {
  position: relative;
  width: var(--anm03_w);
  margin-top: 20px;
}

#anm03 .anm {
  animation: anm_bounce2 var(--anm03_duration) 0s ease-out infinite;
}

@media screen and (max-width: 767px),
print {
  #anm03 .anm {
    animation: anm_bounce2_sp var(--anm03_duration) 0s ease-out infinite;
  }
}

#anm03 .dly1 {
  animation-delay: calc(var(--anm03_duration)/var(--anm03_num));
}

#anm03 .dly2 {
  animation-delay: calc(var(--anm03_duration)/var(--anm03_num)*2);
}

/*--------------------------------anm04--*/
#anm04 {
  position: relative;
  width: var(--anm04_w);
  margin: 60px auto;
}

#anm04 .anm {
  visibility: hidden;
  animation: anm_fade var(--anm04_duration) 0s infinite;
}

#anm04 .anm2 {
  visibility: hidden;
  animation: anm_bounce var(--anm04_duration) 0s infinite;
}

#anm04 .dly1 {
  animation-delay: calc(var(--anm04_duration)/var(--anm04_num));
}

#anm04 .dly2 {
  animation-delay: calc(var(--anm04_duration)/var(--anm04_num)*2);
}

/*--------------------------------anm_btn--*/
.anm_btn {
  animation: anm_float 1.2s 0s linear infinite;
}



/*----------------------------------*/
.anm_bg,
.anm_ly1,
.anm_ly2,
.anm_ly3,
.anm_ly4,
.anm_ly5 {
  width: 100%;
}

.anm_ly1,
.anm_ly2,
.anm_ly3,
.anm_ly4,
.anm_ly5 {
  position: absolute;
  top: 0;
  left: 0;
}

.anm_fix {
  position: relative;
}

.anm_ly1 {
  z-index: 1;
}

.anm_ly2 {
  z-index: 2;
}

.anm_ly3 {
  z-index: 3;
}

.anm_ly4 {
  z-index: 4;
}

.anm_ly5 {
  z-index: 5;
}

.anm .anm2 {
  vertical-align: middle;
}

@media screen and (max-width: 767px),
print {
  .anm_container {
    max-width: 100vw;
  }

  #anm01 {
    position: relative;
    top: 0;
    left: auto;
    margin: 20px auto 0;
  }

  #anm04 {
    margin-bottom: 40px;
  }

}



/*====animation setting====*/
@keyframes anm_bounce {
  0% {
    visibility: visible;
    opacity: 0.2;
  }

  1.8% {
    top: -20px;
  }

  3.6% {
    top: 0;
    opacity: 1;
  }

  27.3% {
    top: 0;
    opacity: 1;
  }

  35.3% {
    top: -120px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_bounce2 {
  0% {
    top: 0;
  }

  4% {
    top: -20px;
  }

  8% {
    top: 0px;
  }

  12% {
    top: -15px;
  }

  16% {
    top: 0px;
  }

  100% {
    top: 0;
  }
}

@keyframes anm_bounce2_sp {
  0% {
    top: 0;
  }

  4% {
    top: -15px;
  }

  8% {
    top: 0px;
  }

  12% {
    top: -10px;
  }

  16% {
    top: 0px;
  }

  100% {
    top: 0;
  }
}

@keyframes anm_bounce3 {
  0% {
    visibility: visible;
    opacity: 0.2;
  }

  1.5% {
    top: -20px;
  }

  3% {
    top: 0;
    opacity: 1;
  }

  23% {
    top: 0;
    opacity: 1;
  }

  28% {
    top: -120px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_bounce3-2 {
  0% {
    visibility: visible;
    top: 20px;
    opacity: 0.2;
  }

  3% {
    top: 0;
    opacity: 1;
  }

  6% {
    top: 10px;
  }

  9% {
    top: 0;
  }

  12% {
    top: 10px;
  }

  15% {
    top: 0;
  }

  18% {
    top: 10px;
  }

  21% {
    top: 0;
  }

  24% {
    top: 10px;
    opacity: 1;
  }

  28% {
    top: -120px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_bounce4 {
  0% {
    visibility: visible;
    opacity: 0.2;
  }

  1.8% {
    top: -20px;
  }

  3.6% {
    top: 0;
    opacity: 1;
  }

  23% {
    top: 0;
    opacity: 1;
  }

  27% {
    top: -120px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_fall {
  0% {
    visibility: visible;
    opacity: 0;
    top: -120px;
    filter: blur(20px);
  }

  4.5% {
    top: 10px;
  }

  6% {
    top: 0;
    opacity: 1;
    filter: blur(0);
  }

  49% {
    top: 0;
    opacity: 1;
  }

  57% {
    top: 60px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_fade {
  0% {
    visibility: visible;
    top: -20px;
    opacity: 0;
  }

  10% {
    top: 0;
    opacity: 1;
  }

  27.3% {
    top: 0;
    opacity: 1;
  }

  36.3% {
    top: 20px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_fade2 {
  0% {
    visibility: visible;
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  26% {
    opacity: 1;
  }

  28% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_rise {
  0% {
    visibility: visible;
    top: 50px;
    opacity: 0;
  }

  6% {
    top: 0;
    opacity: 1;
  }

  24% {
    top: 0;
    opacity: 1;
  }

  29% {
    top: -50px;
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anm_rollup {
  0% {
    visibility: visible;
    top: 230px;
    opacity: 0;
  }

  6% {
    top: 120px;
    opacity: 1;
  }

  22% {
    top: -100px;
    opacity: 1;
  }

  27% {
    top: -200px;
    opacity: 0;
  }

  100% {
    opacity: 0
  }
}

@keyframes anm_rollup2 {
  0% {
    visibility: visible;
    top: 160px;
    opacity: 0;
  }

  6% {
    top: 50px;
    opacity: 1;
  }

  22% {
    top: -50px;
    opacity: 1;
  }

  27% {
    top: -200px;
    opacity: 0;
  }

  100% {
    opacity: 0
  }
}

@keyframes anm_float {
  0% {
    top: -4px;
  }

  50% {
    top: 4px;
  }

  100% {
    top: -4px;
  }
}