@charset "UTF-8";
@import url("grid.css");

a:hover img{
opacity: 0.6;
filter: alpha(opacity=50);
-moz-opacity:0.6;
outline:none;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
	text-align:center;
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
a:hover {
    color: #999;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: inline-block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: inline-block !important; }
}

/*メイン画像
-------------------------------------*/
.mainimg img {
    width: 100vw;
}

.main{
    text-align: center;
}

.center {
	text-align: center;
	margin-bottom: 4rem;
}

 .mousepointer-hand {
    cursor: pointer;
}
        #mainImg{
            border: 1px solid #111;
            margin-bottom: 10px;
            height: 423px;
        }
        #subImg{
            display: flex;
            justify-content: space-between;
        }
        #subImg li{
            width: 24%;
            border: 1px solid #ccc;
        }
        #subImg li.current{
            border: 1px solid #14dfff;
        }
        @media (max-width: 1000px) {
            #mainImg{height: 60vw}
        }
         .wrap1 {
          width: 100%;
           max-width: 800PX !important;
           margin: 0 auto;
         }

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: #ccc;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #666;
}