@charset "utf-8";
/* CSS Document */
.scrolldown{
	position:absolute;
	left:50%;
	top:36vh;
	height:100px;}
.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 100px;
	background: rgba(255,255,255,0.5);
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;}
.scrolldown2::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 100px;
	background: #222;
	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:100px;
		top:50px;
		opacity: 0;}
}
@media screen and (max-width:650px){
.scrolldown{
	bottom:100px;}
}
@media screen and (max-width:500px){
.scrolldown{
	bottom:80px;}
}
/*ふわっと*/
.flex{
	display:flex;
	flex-wrap: wrap;}
.flex2{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;}
.box{
	opacity: 0;}
.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);  }
  to {
    opacity: 1;
	transform: translateY(0);  }
}
.fadeUp2{
	animation-name:fadeUpAnime2;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;}
@keyframes fadeUpAnime2{
  from {
  opacity: 0;
  transform: translateY(30px);
  }

  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger2{
    opacity: 0;}
/* smooth */
span.smoothText {
	overflow: hidden;
	display: block;}
span.smoothTextTrigger{
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);}
.zoomInText{
	position: relative;}
.zoomInText span.mask{
	position: relative;
	transition: .5s ease-in-out;
	display: block;
    line-height: 0;
    overflow:hidden;}
.zoomInText:hover span.mask::before{
	content:"";
	position: absolute;
	z-index:2;
	top:12px;
	left:10px;
	width: calc(100% - 20px);
    height: calc(100% - 20px);
	background: rgba(255,255,255,0.7);}
.zoomInText img{
	transform: scale(1);
	filter: blur(0);
	transition: .8s ease-in-out;}
.zoomInText:hover img{
	transform: scale(1.2);
	filter: blur(2px);}
.zoomInText span.cap{
	width: 70%;
	opacity:0;
	transition: .5s ease-in-out;
	position: absolute;
	z-index:3;
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #333;
    line-height: 1.5;
	text-align: center;}
.zoomInText:hover span.cap{
	opacity:1;}
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
/*下から上*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
	background: url("../images/top_haikei1.png")no-repeat center;}
@keyframes bgDUextendAnime{
0% {
		transform-origin:bottom;
		transform:scaleY(0);}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);}
	50.001% {
		transform-origin:top;}
	100% {
		transform-origin:top;
		transform:scaleY(1);}
}
.bgappearTrigger,
.bgDUextendTrigger{
    opacity: 0;}
.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;}
.zoomIn a:hover img{
	transform: scale(1.2);}
.mask{
    display: block;
    line-height: 0;
    overflow: hidden;}