@charset "utf-8";
/* CSS Document */



/* 一覧ページ　カテゴリーリスト
-----------------------------------*/
.works .inner_900 {
	padding: 0;
}
ul.works_img_list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
ul.works_img_list:after {
    content: "";
    display: block;
    width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
ul.works_img_list li {
	width: 28%;
	margin: calc((100% - (28% * 3)) / 6) ;
}
ul.works_img_list li a.mask {
  position: relative;
  transition: .2s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block;/*画像をくくるspanタグをブロック要素にする*/
  line-height: 0;/*行の高さを0にする*/
  overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
ul.works_img_list li a.mask:hover::before {/*hoverした時の変化*/
  content:"";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(0,0,0,0.5);/*背景色*/
}
ul.works_img_list li a img {
  transform: scale(1);
  filter: blur(0);
  transition: .2s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  heigth: auto;
}
ul.works_img_list li a:hover img {/*hoverした時の変化*/
  transform: scale(1.05);/*拡大の値を変更したい場合はこの数値を変更*/
  filter: blur(1px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}
ul.works_img_list li a.mask:hover::after { /*虫眼鏡アイコン*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	content: "";
	background-image: url("../img/works/zoom.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	z-index: 100;
}
ul.works_img_list li a.mask 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にする*/
}
ul.works_img_list li a.mask:hover span.cap {/*hoverした時の変化*/
  opacity: 1;
}
@media only screen and (max-width:520px) {
	ul.works_img_list {
		margin-bottom: 2rem;
	}
	.works ul.works_img_list {
		justify-content: center;
	}
	ul.works_img_list li {
		width: 45%;
		margin: calc((100% - (45% * 2)) / 6) ;
	}

}