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

/*画像が横から少しずつスライド表示*/
.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: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smooth-01.is-animated {
  clip-path: inset(0);
}

/*テキスト背景が上がる*/
.textUp {
  color: transparent;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.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;
}
.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%)
  }
}

/*フワッと表示*/
.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);
  }
}

.cover { animation-name:innerText; animation-duration:1.0s; animation-delay: 0.5s; animation-fill-mode:forwards; opacity: 0; overflow: hidden; }
@keyframes innerText {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}
.bgLine::before{ 
	animation-name:Line; animation-duration:1.0s; animation-delay: 0.3s; animation-fill-mode:forwards; animation-timing-function: ease-in-out;
	content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 50%; background-color: #fff; opacity: 0;
}
@keyframes Line {
	0% {
		opacity: 1; transform-origin:-200%; transform:scaleX(0);
	}
	40% {
		transform-origin:left; transform:scaleX(1);
	}
	60% {
		transform-origin:right;
	}
	100% {
		transform-origin:200%; transform:scaleX(0);
	}
}
.cover02 { font-weight: bold; animation-name:innerText02; animation-duration:1.0s; animation-delay: 0.6s;/*テキストは少し遅れて出てくる*/ animation-fill-mode:forwards; opacity: 0;
}
@keyframes innerText02 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.bgLine02::before{
	animation-name:Line02; animation-duration:1.0s; animation-delay: 0.4s; animation-fill-mode:forwards; animation-timing-function: ease-in-out;
	content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 50%; background-color: #fff; opacity: 0;
}
@keyframes Line02{
	0% {
		opacity: 1.0; transform-origin:-200%; transform:scaleX(0);
	}
	40% {
		transform-origin:left; transform:scaleX(1);
	}
	60% {
		transform-origin:right;
	}
	100% {
		transform-origin:right; transform:scaleX(0);
	}
}

/*テキストスライド*/
.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;
  }
}

/*スクロールダウン全体の場所*/
.scrolldown1{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
	/*全体の高さ*/
	height:50px;
	z-index: 100;
}

@media screen and (max-width: 767px) {
	.scrolldown1{
		position:absolute;
		left:6%;
		bottom:10px;
		/*全体の高さ*/
		height:50px;
		z-index: 100;
	}
}

/*Scrollテキストの描写*/
.scrolldown1 span{
	/*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
	/*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	font-family:'Roboto Condensed', sans-serif; font-weight:bold;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

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