@charset "utf-8";

/* PC  コンテンツ　　　　　-------------- */
@media only screen and (min-width:1024px){
    /* Img_gallery  幅300px */
    #gallery_box{
        position:relative;
        width:300px;
        height: auto;
        margin-left: 30px;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: 0px;
        float: right;
    }
    .base{
        position:relative;
        top:0px;
        left:0px;
        padding-top:75%;
        margin: 0px;
    }
    .base img{
        position:absolute;
        top:0px;
        left:0px;
        z-index:1;
        width:100%;
        opacity:0;
        margin: 0px;
        transition-property:opacity;
        transition-duration:1s;
        border: solid 0.05em #ccc;
    }
    .gallery{
        position:relative;
        top: 0px;
        left:0px;
        width:100%;
        height: 35px;
        margin-top: 8px;
        margin-bottom: 6px;
        display: flex;
        display: inline-block;
        text-align:center;
        padding: 0px;
    }
    .gallery img{
        width:35px;
        height: 35px;
        object-fit: cover;
        cursor:pointer;
        margin-right: 8px;
        margin-left: 0px;
        padding: 0px;
        border: solid 0.05em #ccc;
    }
    .gallery img:hover{
        opacity:0.5;
    }
}

/* Tablet  コンテンツ　　　　　-------------- */
@media only screen and (max-width:1024px){
    /* Img_gallery  幅300px */
    #gallery_box{
        position:relative;
        width:300px;
        height: auto;
        margin-left: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: 0px;
        float: right;
    }
    .base{
        position:relative;
        top:0px;
        left:0px;
        padding-top:75%;
        margin: 0px;
    }
    .base img{
        position:absolute;
        top:0px;
        left:0px;
        z-index:1;
        width:100%;
        opacity:0;
        margin: 0px;
        transition-property:opacity;
        transition-duration:1s;
    }
    .gallery{
        position:relative;
        top: 0px;
        left:0px;
        width:100%;
        height: 35px;
        margin-top: 8px;
        margin-bottom: 6px;
        display: flex;
        display: inline-block;
        text-align:center;
        padding: 0px;
    }
    .gallery img{
        width:35px;
        height: 35px;
        object-fit: cover;
        cursor:pointer;
        margin-right: 8px;
        margin-left: 0px;
        padding: 0px;
    }
    .gallery img:hover{
        opacity:0.5;
    }
}


/* スマホ 644px以下　--------------------*/
@media only screen and (max-width:644px){
    /* Img_gallery  幅280px */
    #gallery_box{
        position:relative;
        width:280px;
        height: auto;
        margin-left: auto;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: auto;
        float: none;
    }
    .base{
        position:relative;
        top:0px;
        left:0px;
        padding-top:75%;
        margin: 0px;
    }
    .base img{
        position:absolute;
        top:0px;
        left:0px;
        z-index:1;
        width:100%;
        opacity:0;
        margin: 0px;
        transition-property:opacity;
        transition-duration:1s;
    }
    .gallery{
        position:relative;
        top: 0px;
        left:0px;
        width:278px;
        height: 35px;
        margin-top: 8px;
        margin-bottom: 5px;
        display: flex;
        display: inline-block;
        text-align:center;
        padding: 0px;
    }
    .gallery img{
        width:35px;
        height: 35px;
        object-fit: cover;
        cursor:pointer;
        padding: 0px;
        margin-right: 8px;
        margin-left: 0px;
    }
    .gallery img:hover{
        opacity:0.5;
    }

}