@charset "utf-8";

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
    columns: 4;/*段組みの数*/
    padding:0 15px;/*ギャラリー左右に余白をつける*/
    /* margin:0; */
    /* 追記 */
    margin: 0 auto;
    max-width: 128rem;
    width: 100%;
    height: auto;
    }
    
    .gallery li {
        margin-bottom: 20px;/*各画像下に余白をつける*/
    list-style:none;
    }
    
    /*ギャラリー内のイメージは横幅100%にする*/
    .gallery img{
        width:100%;
        height:auto;
        vertical-align: bottom;/*画像の下にできる余白を削除*/}
    
    /*　横幅900px以下の段組み設定　*/
    /* @media only screen and (max-width: 900px) {
        .gallery{
        columns:3;
        }	
    }
    
    @media only screen and (max-width: 768px) {
        .gallery{
        columns: 2;
        }	
    } */

    /* タブレット版 */
    @media screen and (min-width:481px) and (max-width:1280px){
        .gallery {
            padding: 0 4.8rem;
            columns: 2;
        }
    }

    /* スマホ版 */

    @media screen and (max-width:480px){
        .gallery {
            padding: 0;
            columns: 2;
        }
    }