@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 .is-active { animation: s_up 10.0s ease 0.2s forwards; overflow: inherit; display: inline-block;}




.cont01 .inner .btn.is-active { overflow: inherit; opacity: 1;}
.cont01 .inner .btn.is-active ul li:nth-of-type(1) { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(2) { animation: s_up 1.0s ease 0.8s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(3) { animation: s_up 1.0s ease 1.1s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(4) { animation: s_up 1.0s ease 1.4s forwards; overflow: inherit; display: inline-block; opacity: 0;}


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

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

.cont02 .inner .move.is-active .box > * { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; opacity: 0;}




}


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

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


.cont01 .inner .ttl .is-active { animation: s_up 1.0s ease 0.2s forwards; overflow: inherit; display: inline-block;}




.cont01 .inner .btn.is-active { overflow: inherit; opacity: 1;}
.cont01 .inner .btn.is-active ul li:nth-of-type(1) { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(2) { animation: s_up 1.0s ease 0.8s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(3) { animation: s_up 1.0s ease 1.1s forwards; overflow: inherit; display: inline-block; opacity: 0;}
.cont01 .inner .btn.is-active ul li:nth-of-type(4) { animation: s_up 1.0s ease 1.4s forwards; overflow: inherit; display: inline-block; opacity: 0;}


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

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

.cont02 .inner .move.is-active .box > * { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; opacity: 0;}




}