div.circle a img{
    border-radius: 20%;
    -ms-transition-duration: 0.2s;
    transition-duration : 0.2s;
    }
 
div.circle a:hover img{
    border-radius: 0%;
    opacity: 0.8;
    }
span.sample2 {
    font-family: "arial black";
},sans-serif;
text-decoration: none;
.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 90%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

.img_pick{

  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_pick img{
  width: 90%;
  transition-duration: 0.5s;
}
.img_pick:hover img{
  transform: scale(0.9);
  transition-duration: 0.7s;
}

.img_zyoui{
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.img_zyoui img{
  width: 100%;
  cursor: pointer;
}
.img_zyoui:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 100em; /* 線の長さ */color:#d3d3d3
}
.catch:before {
  margin-right: 1em; /* 文字の右隣 */color:#d3d3d3
}
.catch:after {
  margin-left: 1em; /* 文字の左隣 */color:#d3d3d3
}