@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 s_up_bg {
  0% { transform: translateX(-100%); opacity: 1;}
  100% { transform: translateX(0); opacity: 1;}
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes flight {
  from {
    transform: translate(100px, 100px); /* 左下から */
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes flight2 {
  from {
    transform: translate(-400px, 400px); /* 左下から */
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}




/*.is-active_textL {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.is-active_textL::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 2;
  animation: slideBar 1s ease forwards;
}
*/
/* 修正ポイント：アニメーションでopacityをゆっくり変化させる */
/*.is-active_textL img {
/*  opacity: 0;
/*  animation: showImage 0.8s ease 1s forwards;  /* 1s遅らせて0.8秒かけて表示 */
/*  position: relative;
/*  z-index: 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 .move01.is-active { animation: s_up 1.0s ease 0.1s forwards; overflow: inherit; display: inline-block;}
.cont01 .inner .ttl .move02.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: inline-block;}
.cont01 .inner .box.is-active { animation: zoom 1.0s ease 2.0s forwards; overflow: inherit;}

.cont02 .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .inner .box h3.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit;}
.cont02 .inner .box .move02.is-active { animation: s_left 1.0s ease 1.5s forwards; overflow: inherit;}

.cont03 .inner .ttl h2.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .inner .ttl p.is-active { animation: s_up 1.0s ease 1.5s forwards; overflow: inherit;}
.cont03 .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .inner .box h3.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit;}
.cont03 .inner .box .move02.is-active { animation: s_left 1.0s ease 1.5s forwards; overflow: inherit;}




}


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

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


.cont01 .inner .ttl .move01.is-active { animation: s_up 1.0s ease 0.1s forwards; overflow: inherit; display: inline-block;}
.cont01 .inner .ttl .move02.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: inline-block;}
.cont01 .inner .box.is-active { animation: zoom 1.0s ease 2.0s forwards; overflow: inherit;}

.cont02 .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .inner .box h3.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit;}
.cont02 .inner .box .move02.is-active { animation: s_left 1.0s ease 1.5s forwards; overflow: inherit;}

.cont03 .inner .ttl h2.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .inner .ttl p.is-active { animation: s_up 1.0s ease 1.5s forwards; overflow: inherit;}
.cont03 .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .inner .box h3.is-active { animation: zoom 1.0s ease 1.5s forwards; overflow: inherit;}
.cont03 .inner .box .move02.is-active { animation: s_left 1.0s ease 1.5s forwards; overflow: inherit;}




}