@charset "utf-8";
/* CSS Document */

@keyframes s_up {
  0% {   transform: translateY( 30px); opacity: 0;}
  100% { transform: translateY( 0%); opacity: 1;}
}

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

@keyframes zoom {
  0% {   transform: scale( 0%); opacity: 0;}
  100% { transform: scale( 100%); opacity: 1;}
}



@keyframes floating1 {
  0% {
    opacity:0;
    transform:translateY(-10px)
  }
  50% {
    opacity:1;
    transform:translateY(8px)
  }
  100% {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes rotateY3D {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }
  50% {
    transform: rotateY(90deg);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}



/* 黒帯スライドアニメーション */
@keyframes slideBar {
  0%   { left: -100%;}
  100% { left:  100%;}
}

@keyframes slideBar2 {
  0%   { left: 0%;}
  100% { left:  100%;}
}

/* テキスト表示（黒帯通過後） */
@keyframes showText {
  to { opacity: 1.0;}
}

/* 画像フェードインアニメーション */
@keyframes showImage {
  from { opacity: 0;}
  to {   opacity: 1;}
}




@media only screen and (min-width: 768px)  {

.effect { opacity: 0;}
.is-active { overflow: hidden;}


.cont01 .inner .ttl::after { opacity: 0; animation: s_up 1.0s ease 2.5s forwards; overflow: inherit; z-index: 10;}
.cont01 .inner .ttl h2.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont01 .inner .ttl .fukidashi.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit; z-index: 10;}

.cont01 .inner .ttl .move.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 0.5s forwards; z-index: 1;}
.cont01 .inner .ttl .move.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: white; z-index: 2; animation: slideBar2 1.0s ease 0.5s forwards;}

.cont01 .inner p.is-active { opacity: 0; animation: s_up 1.0s ease 2.5s forwards; overflow: inherit; z-index: 10;}


.cont02 .inner .box01 .ttl.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont02 .inner .box01 ol.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}


.cont02 .inner .box02 .day h3.is-active { animation: rotateY3D 0.5s ease-in-out 0.8s forwards; overflow: inherit; transform-style: preserve-3d;}


.cont02 .inner .box02 .day .ttl.is-active { opacity: 1.0; overflow: inherit;}
.cont02 .inner .box02 .day .ttl.is-active p { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(1) { animation: floating1 0.6s linear 0.5s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(2) { animation: floating1 0.6s linear 0.8s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(3) { animation: floating1 0.6s linear 1.1s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(4) { animation: floating1 0.6s linear 1.4s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(5) { animation: floating1 0.6s linear 1.7s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(6) { animation: floating1 0.6s linear 2.0s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(7) { animation: floating1 0.6s linear 2.3s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(8) { animation: floating1 0.6s linear 2.6s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(9) { animation: floating1 0.6s linear 2.9s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(10) { animation: floating1 0.6s linear 3.2s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(11) { animation: floating1 0.6s linear 3.5s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(12) { animation: floating1 0.6s linear 3.8s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(13) { animation: floating1 0.6s linear 4.1s both;}


.cont02 .inner .box02 .day .mtx.is-active { animation: s_up 1.0s ease 1.0s forwards;}
.cont02 .inner .box02 .day .img.is-active { animation: s_up 1.0s ease 0.5s forwards;}


}


@media only screen and (max-width: 767px) {

.effect { opacity: 0;}
.is-active { overflow: hidden;}


.cont01 .inner .ttl::after { opacity: 0; animation: s_up 1.0s ease 2.5s forwards; overflow: inherit; z-index: 10;}
.cont01 .inner .ttl h2.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont01 .inner .ttl .fukidashi.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit; z-index: 10;}

.cont01 .inner .ttl .move.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 0.5s forwards; z-index: 1;}
.cont01 .inner .ttl .move.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: white; z-index: 2; animation: slideBar2 1.0s ease 0.5s forwards;}

.cont01 .inner p.is-active { opacity: 0; animation: s_up 1.0s ease 2.5s forwards; overflow: inherit; z-index: 10;}


.cont02 .inner .box01 .ttl.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont02 .inner .box01 ol.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}


.cont02 .inner .box02 .day h3.is-active { animation: rotateY3D 0.5s ease-in-out 0.8s forwards; overflow: inherit; transform-style: preserve-3d;}


.cont02 .inner .box02 .day .ttl.is-active { opacity: 1.0; overflow: inherit;}
.cont02 .inner .box02 .day .ttl.is-active p { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; z-index: 10;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(1) { animation: floating1 0.6s linear 0.5s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(2) { animation: floating1 0.6s linear 0.8s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(3) { animation: floating1 0.6s linear 1.1s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(4) { animation: floating1 0.6s linear 1.4s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(5) { animation: floating1 0.6s linear 1.7s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(6) { animation: floating1 0.6s linear 2.0s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(7) { animation: floating1 0.6s linear 2.3s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(8) { animation: floating1 0.6s linear 2.6s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(9) { animation: floating1 0.6s linear 2.9s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(10) { animation: floating1 0.6s linear 3.2s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(11) { animation: floating1 0.6s linear 3.5s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(12) { animation: floating1 0.6s linear 3.8s both;}
.cont02 .inner .box02 .day .ttl.is-active h4 span:nth-of-type(13) { animation: floating1 0.6s linear 4.1s both;}


.cont02 .inner .box02 .day .mtx.is-active { animation: s_up 1.0s ease 1.0s forwards;}
.cont02 .inner .box02 .day .img.is-active { animation: s_up 1.0s ease 0.5s forwards;}


}