@charset "utf-8";

/*　キラッ　*/
.shine {
  margin: 0 auto;
	max-width: 600px;
}
.shine span.mask {
	position: relative;
  display: block;
  line-height: 0;
  overflow: hidden;
}

.shine span.mask::before {
	position: absolute;
	content:"";
	width: 100%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	right: -50%;/*画面の見えていない左から右へ移動するスタート地点*/
/*	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);*/
	background: #fff;
}

/*.shine span.mask:hover::before {*/
.shine span.mask::before {/*hoverした時の変化*/
/*	animation-timing-function:ease-in;*/
	animation: shine 10s infinite;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		right: -100%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

/* fade */
.img-box {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
	.img-box {
		width: auto;
		height: 300px;
	}
}
.img1, .img2 {
  background: center center no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  z-index: 0;
  opacity: 0;
  animation: anime 10s infinite;
}
@media screen and (max-width: 768px) {
  .img1, .img2 {
    height: 300px;
  }
}
.img1:nth-of-type(1) {
  animation-delay: 0s;
}
.img2:nth-of-type(2) {
  animation-delay: 4s;
}

@keyframes anime {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
/*    transform: scale(1.2);*/
  }
}

/*========= レイアウトのためのCSS ===============*/

/*a{
	color: #333;
	text-decoration: none;
}*/

.lead{
	text-align: center;
	padding: 50px 20px;
}

/*画像のレスポンシブ*/

img{
	width:100%;
	height: auto;
}


/*　横幅　*/

.shine{
    width:100%;
}

.arrow_wrap {
	position: relative;
}
.scrolldown4{
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
  0%{bottom:1%;}
  50%{bottom:3%;}
 100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
  font-size: 2rem;
  letter-spacing: 0.05em;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:1px;
  height: 50px;
  background:#eee;
}