#wrapper2 {
  width:100%;
  margin: 0;
  padding: 0;
  position:relative;
}

#containerXXX {
  padding:10px 0 50px 0 ;
  margin: 0 auto;
  list-style:none;
}

.item {
  margin: 8px;
  width: 240px;
  padding: 8px;
  box-shadow:0 2px 5px #aaa;
  background:#FFF;
  color:#666;
  float: left;
  border-radius:5px;
  border-bottom:5px solid #3a3a3a;
}
.item img {
  width: 100%;
}
.item img:hover {
	opacity: 0.8;
}
.item div{
	border-bottom: 1px dashed #ccc;
	padding-bottom:5px;
}
.cap {
	margin: 10px 0 5px;
	font-weight:bold;
	font-size: 16px;
}
.des {
	font-size:12px;
}




.containerX {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 準備 */
  position: relative;
}

.childX {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 水平・垂直方向の中央揃え */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}



#wrapper3 {
  width:100%;
margin: auto;
  padding: 0;
  position:relative;
}







/*====================================
※リンク：画像ホバーアクション
====================================*/
.image{
    width: 240px;
}
.image16 a{
    display: block;
    position: relative;
}
.image a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover::before{
    animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .6;
    }
    100% {
        opacity: 0;
    }
}