/* 表示領域全体 */
.itmFade,.itmFade2,.itmFade3 {
  position : relative;
  width: 100%;
  height: 100%;
}
.itmFade::before {
  content : "";
  display : block;
  padding-top : calc((998 / 1920)*100vh);
}
.itmFade2::before{
  content : "";
  display : block;
  padding-top : calc((300 / 375)*100vw);
}
.itmFade3::before{
  content : "";
  display : block;
  padding-top : calc((90 / 375)*100vw);
}
.btnFade{
  height: auto;
}
.btnFade::before {
  padding-top: calc((91.95 / 1920)*100vw);
}


/* アニメーションの設定 */
.itmFade .item,.itmFade2 .item {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  opacity : 0;
  animation : itmFade2-chg-itm-anim 10s infinite;
}
.itmFade3 .item {
  position : absolute;
  top : 0;
  left : 50%;
  transform: translateX(-50%);
  width : 100%;
  height : 100%;
  opacity : 0;
  animation : itmFade2-chg-itm-anim 10s infinite;
}
#fixed_button.itmFade3 .wrap_btn .liquid.l,#fixed_button.itmFade3 .wrap_btn .liquid.r{
  top: 0;
}
/* 1つ目のアイテム */
.itmFade .item:nth-of-type( 1 ),.itmFade2 .item:nth-of-type( 1 ),.itmFade3 .item:nth-of-type( 1 ) {
  animation-delay : 0s;
}
/* 2つ目のアイテム */
.itmFade .item:nth-of-type( 2 ),.itmFade2 .item:nth-of-type( 2 ),.itmFade3 .item:nth-of-type( 2 ) {
  animation-delay : 5s;
}

.btnFade .item {
  height: auto;
}

/* アニメーションの進行 */
@keyframes itmFade2-chg-itm-anim {
  0% {
    opacity : 0;
    z-index : 2;
  }
  17%{
    opacity : 1;
  }
  50%{
    opacity : 1;
  }
  65%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}