ul.thumbzoom {
	margin: 30px auto 40px;
        width: 100%;
        text-align: center;
        list-style-type: none;                     /* リストマークを非表示→・の表示を消す */
}



ul.thumbzoom li {
	margin: 0px 20px 20px 0px;                 /* 右と下にスペース 20px */
        float: left;                               /* 左回り込み */
}



ul.thumbzoom a {
	border: 2px solid rgb(187, 187, 187);      /* 画像に 2pxの枠　RGBの色指定 */
        border-image: none;
        width: 150px;                               /* サムネイル画像を格納するエリアの幅と高さ→※重要※実際の画像のサイズはhtml内の右側で指定する！ */
        height: 112px;　　　　　　　　　　　　　　 
        overflow: hidden;                          /* 指定したサイズからはみ出た部分は、非表示（overflow: hidden;） */
        display: block;                            /* リンクタグ（a）を、ブロックレベル（display: block;）に　*/
        position: relative;　　　　　　　　　　　　/* ある場所からの相対位置（relative） */
        z-index: 1；　　　　　　　　　　　　　　　 /* 重なる順序を指定するプロパティ→画像が重なって表示されたら、サムネイル画像が下（数値の多きい方が上） */
}



ul.thumbzoom a img {
	left: 0px;                                 /* サムネイル画像の固定位置 */
        top: 0px;
        position: absolute;　　　　　　　　　　　　/* 画像（img）は、絶対配置（position: absolute;）に */
}



ul.thumbzoom a:hover {
	overflow: visible;                         /* はみ出た部分も表示（overflow: visible;）する。 */
        z-index: 2;　　　　　　　　　　　　　　  　/* 画像が重なって表示されたら、サムネイル画像が上（数値の多きい方が上） */
}



ul.thumbzoom a:hover img {
	background: rgb(255, 255, 255);
        padding: 5px;
        border: 2px solid rgb(51, 51, 51);
        border-image: none;
        width: 300px;                              /* マウスオーバー時の画像の大きさの調整  */
        height: 224px;
}




/* floatによる回り込みを解除（clear: both;） */

.clearfix::after {
	height: 0px;
        line-height: 0;
        clear: both;
        display: block;
        visibility: hidden;
        content: ".";
}



.clearfix {
	display: inline-block;
}


/* MacIE用 */
* + html .clearfix {
	height: 1%;
}



* html .clearfix {
	height: 1%;
}



.clearfix {
	display: block;
}