main {
  text-align: center;
}

h3 {
  font-size: 22px;
  font-weight: bold;
}

.workGalley {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  text-align: left;
  margin: 50px 60px;
}

/* リストの左寄せのためにバッファを追加 */
.workGalley::after {
  content: "";
  display: block;
  width: 29%;
}

.item {
  margin: 20px;
  display: inline-block;
  width: 27%;
  height: 20%;
  text-align: left;
  img {
    /* border-radius */
    border-radius: 30px;

    /* box-shadow */
    box-shadow: 12px 14px 4px -6px rgba(0, 0, 0, 0.6);
  }

  p {
    font-size: 14px;
  }
}


.display_box {
  display: inline-block;
  margin-bottom: 27px;
  position: relative;

  img {
    width: 100%;
  }
}


.display_box {
	display: inline-block;
  margin-bottom: 27px;
  position: relative;

  img {
    width: 100%;
  }
}
.display_box .caption {
	font-size: 30px;
	color:			#fff;
  margin-top: 50%;
text-align: right;
font-weight: bold;


}
.display_box .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
  border-radius: 30px;
}
.display_box:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		20%;	/* 右にずらす */
}