@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; }


/*テキスト背景が上がる*/
.textUp { color: transparent; overflow: hidden; position: relative; transition: 0ms 450ms; opacity: 0;}
.textUp::after { background: #000; bottom: -10px; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; transform: translate(0, 100%);}
.textUp.add-show { opacity: 1; color: inherit; }
.textUp.add-show::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%)
  }
}

.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);
}

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

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