@charset "utf-8";

#main-area{
	background-image: url('../img/race_img.PNG'); /* 背景画像のパス */
	background-repeat: repeat-y; /* 縦方向に画像を繰り返す */
	background-position: left top; /* 画像を左上に配置 */
	background-size: 3% auto;
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
	columns: 3;/*段組みの数*/
	padding:10px 10px;/*ギャラリー左右に余白をつける*/
	margin:0;
	}
	
	.gallery li {
			margin-bottom: 10px;/*各画像下に余白をつける*/
	list-style:none;
	}
	
	/*ギャラリー内のイメージは横幅100%にする*/
	.gallery img{
		width:100%;
		height:auto;
		vertical-align: bottom;/*画像の下にできる余白を削除*/}
	
	/*　横幅900px以下の段組み設定　*/
	@media only screen and (max-width: 900px) {
		.gallery{
		columns:3;
		}	
	}
	
	@media only screen and (max-width: 768px) {
		.gallery{
		columns: 2;
		}	
	}

/*画像を出現させるアニメーションCSS*/
/* .flipLeft{
	animation-name: flipLeft;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	perspective-origin: left center;
	opacity: 0;
	}
	
	@keyframes flipLeft{
		from {
		 transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
		}
	
		to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
		}
	} */

/*　画像の拡大＋テキスト出現　*/

.zoomInText {
  position: relative;
  overflow: hidden;
}

.zoomInText:hover span.mask::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* 黒いマスク */
	clip-path: inset(20% 0 20% 0);
  opacity: 0;
  animation: fadeinCenter 0.5s forwards;
}

@keyframes fadeinCenter {
  from {
    clip-path: inset(30% 10% 30% 10%); /* 初期状態 */
    opacity: 0;
  }
  to {
    clip-path: inset(20% 0% 20% 0%); /* 最終状態（広がったマスク） */
    opacity: 1;
  }
}

.zoomInText img{
  transform: scale(1);
  filter: blur(0);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInText:hover img{/*hoverした時の変化*/
  transform: scale(1.05);/*拡大の値を変更したい場合はこの数値を変更*/
	filter: brightness(70%); /* 画像をやや暗くする */
  /*filter: blur(1px);ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomInText span.cap{
  opacity:0;
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index:3;/*テキストを前面に出す*/
  top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.zoomInText:hover span.cap{/*hoverした時の変化*/
  opacity:1;
}