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

.delay01 { animation-delay:0.1s; }
.delay02 { animation-delay:0.2s; }
.delay03 { animation-delay:0.3s; }
.delay04 { animation-delay:0.4s; }
.delay05 { animation-delay:0.5s; }
.delay06 { animation-delay:0.6s; }
.delay07 { animation-delay:0.7s; }
.delay08 { animation-delay:0.8s; }
.delay09 { animation-delay:0.9s; }
.delay10 { animation-delay:1.0s; }

.delay11 { animation-delay:1.1s; }
.delay12 { animation-delay:1.2s; }
.delay13 { animation-delay:1.3s; }
.delay14 { animation-delay:1.4s; }
.delay15 { animation-delay:1.5s; }
.delay16 { animation-delay:1.6s; }
.delay17 { animation-delay:1.7s; }
.delay18 { animation-delay:1.8s; }
.delay19 { animation-delay:1.9s; }
.delay20 { animation-delay:2.0s; }

.t-delay01 { transition-delay:0.1s; }
.t-delay02 { transition-delay:0.2s; }
.t-delay03 { transition-delay:0.3s; }
.t-delay04 { transition-delay:0.4s; }
.t-delay05 { transition-delay:0.5s; }
.t-delay06 { transition-delay:0.6s; }
.t-delay07 { transition-delay:0.7s; }
.t-delay08 { transition-delay:0.8s; }
.t-delay09 { transition-delay:0.9s; }
.t-delay10 { transition-delay:1.0s; }
.t-delay11 { transition-delay:1.1s; }
.t-delay12 { transition-delay:1.2s; }
.t-delay13 { transition-delay:1.3s; }
.t-delay14 { transition-delay:1.4s; }
.t-delay15 { transition-delay:1.5s; }
/*画像が横から少しずつスライド表示*/
.smooth {
  clip-path: inset(0 100% 0 0);
  transition: 2.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
}
.smooth.is-animated {
  clip-path: inset(0);
}

.smooth-01 {
  clip-path: inset(0 100% 0 0);
  transition: 1.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smooth-01.is-animated {
  clip-path: inset(0);
}

/*テキスト背景が上がる*/
.textUp { color: transparent; overflow: hidden; position: relative; transition: 0ms 450ms; opacity: 0;}
.textUp::after { background: #000; bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; transform: translate(0, 100%);}
.textUp.add-show { color: #000; opacity: 1;}
.textUp.add-show::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
.imgUp { overflow: hidden; position: relative; opacity: 0;}
.imgUp::after { background: var(--base-color); bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; transform: translate(0, 100%);}
.imgUp.add-show { opacity: 1;}
.imgUp.add-show::after {
	animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

.swiper-slide-active .textUp { color: #fff; opacity: 1; animation-delay: 0.2s; }
.swiper-slide-active .textUp::after {
	animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
} 
@keyframes mask-bg {
  0% {
    transform: translate(0%, 101%);
  }
  40%, 60% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(0, -100%);
  }
}

/*フワッと表示*/
.fadeup { opacity: 0; }
.fadeup.add-show {
	animation-name: fadeupAnime;/*アニメーションの定義名*/
	animation-duration:.8s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnime{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}


.fadeIN { opacity: 0; }
.fadeIN.add-show {
	animation-name: fadeupAnime;/*アニメーションの定義名*/
	animation-duration:1.0s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnime{
  from {
	  opacity: 0;
  }
  to {
	  opacity: 1;
  }
}

.img-wrap-center.add-show {
	opacity: 0;
	animation: img-wrap-center 2s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes img-wrap-center {
  0% {
	opacity: 0;
	clip-path: circle(0 at 50% 50%);
	-webkit-clip-path: circle(0 at 50% 50%);
  }
  100% {
	opacity: 1;
	clip-path: circle(100% at 50% 50%);
	-webkit-clip-path: circle(100% at 50% 50%);
  }
}

.leftSlide.add-show { 
	animation-name: leftSlide;/*アニメーションの定義名*/
	animation-duration:1.5s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
}
/*アニメーションの開始から終了までを指定する*/
@keyframes leftSlide{
  from {
	  transform: translateX(-9999px);
  }
  to {
	  transform: translateX(0px);
  }
}
.rightSlide {transform: translateX(9999px);}
.rightSlide.add-show { 
	animation-name: rightSlide;/*アニメーションの定義名*/
	animation-duration:1.5s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
	animation-delay: 0.4s;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes rightSlide{
  from {
	  transform: translateX(9999px);
  }
  to {
	  transform: translateX(0px);
  }
}


.photoHover { overflow: hidden; }
.photoHover img { transition: 1s all; }
.photoHover:hover img { transform:scale(1.1,1.1); transition:1s all; }

.open-cartain,.open-cartain02{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}
.open-cartain {
  z-index: 99999;
  background: #000;
  animation-duration: 0.7s;
  animation-delay:0.9s;
  animation-fill-mode: forwards;
  animation-name: open-cartain;
}
.open-cartain02{
  z-index: 999999;
  background: #333;
  animation-duration: 0.5s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  animation-name: open-cartain02;
}

@keyframes open-cartain{
0% {
  width: 100%;
  left:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  left: 100%;
}
}
@keyframes open-cartain02{
0% {
  width: 100%;
  left:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  left: 100%;
}
}

/*テキストスライド*/
.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}