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

@keyframes floating-Y {
  0% {   transform: translateY(-5%);}
  100% { transform: translateY( 5%);}
}

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

@keyframes s_up2 {
  0% {   transform: translateY( 5%); opacity: 0;}
  100% { transform: translateY( 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;
  }
}

@keyframes flight3 {
  from {
    transform: translateX( 100px);
    opacity: 0;
  }
  to {
    transform: translateX( 0);
    opacity: 1;
  }
}

@keyframes flight4 {
  from {
    transform: translateX( -100px);
    opacity: 0;
  }
  to {
    transform: translateX( 0);
    opacity: 1;
  }
}

@keyframes flight5 {
  from {
    transform: translate(-100px, 100px);
    opacity: 0;
  }
  to {
    transform: translateX( 0);
    opacity: 1;
  }
}



/*.is-active_textL {
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: showText 0s linear 1s forwards;
}

.is-active_textL::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 1;
  animation: slideBar 1s ease forwards;
}*/

/*.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 slideBar3 {
  0%   { left: 0%; transform: rotateX(100%);}
  100% { left:  100%; transform: rotateX(0);}
}

/* テキスト表示（黒帯通過後） */
@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 .bg .inner .box .img01 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img01 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 0.5s forwards;}
.cont01 .bg .inner .box .img01 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 1.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img02 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img02 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont01 .bg .inner .box .img02 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img03 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img03 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.5s forwards;}
.cont01 .bg .inner .box .img03 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img04 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img04 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 2.0s forwards;}
.cont01 .bg .inner .box .img04 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 3.0s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img08 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img08 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 0.5s forwards;}
.cont01 .bg .inner .box .img08 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 1.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img09 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont01 .bg .inner .box .img09 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont01 .bg .inner .box .img09 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}



.cont01 .bg .inner .box .img05.is-active { animation: s_up 1.0s ease 4.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img05.is-active span { animation: floating-Y 1.8s ease-in-out infinite alternate-reverse; display: inline-block;}
.cont01 .bg .inner .box .img06.is-active { animation: zoom 1.0s ease 3.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img07.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img10.is-active { animation: s_up 1.0s ease 1 forwards; overflow: inherit;}
.cont01 .bg .inner .box .img11.is-active { animation: flight 1.2s ease-out 1s forwards;}
.cont01 .bg .inner .box .img12.is-active { animation: flight 1.2s ease-out 2s forwards;}
.cont01 .bg .inner .box .img13.is-active { animation: flight 1.2s ease-out 3s forwards;}
.cont01 .bg .inner .box .img15.is-active { animation: flight5 1.2s ease-out 4s forwards;}
.cont01 .bg .inner .box .img14.is-active { animation: s_up 1.0s ease 1s forwards; overflow: inherit;}

.cont01 .bg .inner .box .img16.is-active { animation: s_up 1.0s ease 2s forwards; overflow: inherit;}



.cont02 .bg .inner .ttl h2.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: inline-block;}
.cont02 .bg .inner .ttl p .is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit;}

.cont02 .bg .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .bg .inner .box h3.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .bg .inner .box h4.is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont02 .bg .inner .box h4.is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont02 .bg .inner .box h4.is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}



.cont03 .bg .inner .airplane.is-active { animation: flight2 2.0s ease 1.0s forwards; overflow: inherit;}
.cont03 .bg .inner .ttl .is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .bg .inner .present.is-active { animation: zoom 1.0s ease 1.0s forwards; overflow: inherit;}
.cont03 .bg .inner .ttl_insta.is-active { animation: s_up 1.0s ease 1.2s forwards; overflow: inherit; display: block;}
.cont03 .bg .inner .insta.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont03 .bg .inner .ttl h3 {  opacity: 0;}
.cont03 .bg .inner .ttl .is-active h3 { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: inline-block;}

.cont03 .bg .inner dl.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont03 .bg .inner .btn .is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block;}
.cont03 .bg .inner .line .is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block;}





.cont04 .bg .inner .ttl h2.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .ttl .dela-gothic-one.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .ttl .move.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit; display: block;}

.cont04 .bg .inner .box.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .box .fukidashi.is-active { animation: zoom 1.0s ease 1.0s forwards; overflow: inherit; display: block;}

.cont04 .bg .inner .box .move01.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 2.0s forwards; z-index: 1;}
.cont04 .bg .inner .box .move01.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 2.0s forwards;}

.cont04 .bg .inner .box .move02.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 2.0s forwards; z-index: 1;}
.cont04 .bg .inner .box .move02.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 2.5s forwards;}

.cont04 .bg .inner .box .inboxR .is-active { position: relative; display: inline-block; overflow: hidden; z-index: 1; opacity: 1.0;}
.cont04 .bg .inner .box .inboxR .is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 3.0s forwards;}



.cont05 .bg .inner h2.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box.is-active::before { opacity: 0; animation: s_up 1.0s ease 1.5s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box dl.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box h3.is-active { animation: s_up 1.0s ease 1.5s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box p.is-active { animation: s_up 1.0s ease 2.0s forwards; overflow: inherit; display: block;}


}


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

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

.cont01 .bg .inner .box .img01 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img01 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 0.5s forwards;}
.cont01 .bg .inner .box .img01 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 1.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img02 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img02 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont01 .bg .inner .box .img02 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img03 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img03 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.5s forwards;}
.cont01 .bg .inner .box .img03 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img04 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img04 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 2.0s forwards;}
.cont01 .bg .inner .box .img04 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 3.0s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img08 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img08 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 0.5s forwards;}
.cont01 .bg .inner .box .img08 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 1.5s forwards; position: relative; z-index: 1;}

.cont01 .bg .inner .box .img09 .is-active_textL { position: relative; display: block; overflow: hidden;}
.cont01 .bg .inner .box .img09 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont01 .bg .inner .box .img09 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}



.cont01 .bg .inner .box .img05.is-active { animation: s_up 1.0s ease 4.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img06.is-active { animation: flight3 1.0s ease 0.5s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img07.is-active { animation: flight3 1.0s ease 1.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img08.is-active { animation: flight3 1.0s ease 1.5s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img13.is-active { animation: flight4 1.0s ease 2.0s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img09.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont01 .bg .inner .box .img09.is-active span { animation: floating-Y 1.8s ease-in-out infinite alternate-reverse; display: block;}
.cont01 .bg .inner .box .img10.is-active { animation: zoom 1.0s ease 1 forwards; overflow: inherit;}
.cont01 .bg .inner .box .img11.is-active { animation: s_up 1.2s ease-out 1s forwards;}
.cont01 .bg .inner .box .img12.is-active { animation: s_up 1.2s ease-out 2s forwards;}

.cont01 .bg .inner .box .img16.is-active { animation: s_up 1.0s ease 1s forwards; overflow: inherit;}





.cont02 .bg .inner .ttl h2.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: inline-block;}
.cont02 .bg .inner .ttl p .is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit;}

.cont02 .bg .inner .move.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .bg .inner .box h3.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}
.cont02 .bg .inner .box h4 .is-active_textL { position: relative; display: inline-block; overflow: hidden;}
.cont02 .bg .inner .box h4 .is-active_textL::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color11); z-index: 2; animation: slideBar 1s ease 1.0s forwards;}
.cont02 .bg .inner .box h4 .is-active_textL img { opacity: 0; animation: showImage 0.8s ease 2.0s forwards; position: relative; z-index: 1;}



.cont03 .bg .inner .airplane.is-active { animation: flight2 2.0s ease 1.0s forwards; overflow: inherit;}
.cont03 .bg .inner .ttl .is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit;}
.cont03 .bg .inner .present.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}
.cont03 .bg .inner .ttl_insta.is-active { animation: s_up 1.0s ease 1.2s forwards; overflow: inherit; display: block;}
.cont03 .bg .inner .insta.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}

.cont03 .bg .inner dl.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont03 .bg .inner .btn .is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block;}
.cont03 .bg .inner .line .is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit; display: inline-block;}





.cont04 .bg .inner .ttl h2.is-active { animation: s_up 1.0s ease 1s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .ttl .dela-gothic-one.is-active { animation: s_up 1.0s ease 1s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .ttl .move.is-active { animation: zoom 1.0s ease 1s forwards; overflow: inherit; display: block;}

.cont04 .bg .inner .box.is-active { animation: s_up 1.0s ease 0.5s forwards; overflow: inherit; display: block;}
.cont04 .bg .inner .box .fukidashi.is-active { animation: zoom 1.0s ease 1.0s forwards; overflow: inherit; display: block;}

.cont04 .bg .inner .box .move01.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 2.0s forwards; z-index: 1;}
.cont04 .bg .inner .box .move01.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 2.0s forwards;}

.cont04 .bg .inner .box .move02.is-active { position: relative; display: inline-block; overflow: hidden; opacity: 0; animation: showImage 1.0s ease 2.0s forwards; z-index: 1;}
.cont04 .bg .inner .box .move02.is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 2.5s forwards;}

.cont04 .bg .inner .box .inboxR .is-active { position: relative; display: block; overflow: hidden; z-index: 1; opacity: 1.0;}
.cont04 .bg .inner .box .inboxR .is-active::before { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: var(--color00); z-index: 2; animation: slideBar2 1.0s ease 3.0s forwards;}



.cont05 .bg .inner h2.is-active { animation: s_up 1.0s ease 1.0s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box.is-active { animation: s_up 1.0s ease 1.5s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box.is-active::before { opacity: 0; animation: s_up 1.0s ease 2.0s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box dl.is-active { animation: s_up 1.0s ease 1.5s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box h3.is-active { animation: s_up 1.0s ease 2.0s forwards; overflow: inherit; display: block;}
.cont05 .bg .inner .box p.is-active { animation: s_up 1.0s ease 2.5s forwards; overflow: inherit; display: block;}


}