@charset "utf-8";


@media only screen and (max-width: 960px) {
    img { max-width: 100%; }
}

  body {
	  margin: 0px;
	  padding:0px;
  }


.gray{
		background-color:#dbd5d9;
}



.sect02{
		padding-top:0px;
}
.sect02 div {
	margin: 0px 0;
	text-align: center;

}
.sect02 p {
	margin: 40px 0;
	text-align: center;
}

span {
	position: absolute;
	top: 0;
	width: 24px;
	height: 24px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(-45deg);
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
 span:nth-of-type(1) {
	animation-delay: 0s;
}
span:nth-of-type(2) {
	top: 16px;
	animation-delay: .15s;
}
span:nth-of-type(3) {
	top: 32px;
	animation-delay: .3s;
}

@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*------------------------------------------------------------------------------
  anim
------------------------------------------------------------------------------*/

.scrollanime {
	opacity: 0;
}

.scrollanime2 {
	opacity: 0;
}


.fadeInDown {
	animation-name: fadeInDown;
	animation-duration: 1s;   /*フェード時間*/
	animation-fill-mode: forwards;   /*アニメーション後そのまま*/
}
@keyframes fadeInDown {
	0% {
		opacity: 0;			
	}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}

.fadeInDown2 {
	animation-name: fadeInDown;
	animation-duration: 3s;   /*フェード時間*/
	animation-fill-mode: forwards;   /*アニメーション後そのまま*/
}
@keyframes fadeInDown2 {
	0% {
		opacity: 0;			
	}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}

.fadeInDown3 {
	animation-name: fadeInDown;
	animation-duration: 1.5s;   /*フェード時間*/
	animation-fill-mode: forwards;   /*アニメーション後そのまま*/
}
@keyframes fadeInDown2 {
	0% {
		opacity: 0;			
	}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}


.updown {
	transform: translateY(-50px);
}
.downup {
	transform: translateY(25px);
}

.sect02{
	overflow: hidden;    /*スクロールバー非表示*/
}
.slide-right {
	transform: translateX(80px);
}
.slide-left {
	transform: translateX(-80px);
}







  /*スライダー*/



.wrap {
  	width: 1200%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}

.slideshow {
  display: flex;
  -webkit-animation: loop-slide 40s linear 0s infinite;
  animation: loop-slide 40s linear 0s infinite;
}


@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
 
  .slideshow {
  	width: 1200%;
    display: flex;
    -webkit-animation: loop-slide 40s linear 0s infinite;
    animation: loop-slide 40s linear 0s infinite;
  }

  .slide-paused:active .slideshow {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
/*
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
*/
/*
 .content {
  }
  
  .content-hover {
    transition: all 0.2s;
    margin-right: 20px;
  }

  .content-hover:active {
    transform: translateY(-20px);
    border-radius: 0 10%;
    box-shadow: 0 3px 10px 0 #333;
    opacity: 0.8;
    cursor: pointer;
  }*/
}