/*==================================================
ギャラリーのためのcss
===================================*/
main {
    padding-bottom: 200px;
}

section {

    margin: 0px auto;
    padding: 0px 0px;
    max-width: 1320px;
    /* text-align: center; */
    /* max-width: 600px; */
}

a {
    text-decoration: none;
}

.gallery {
    columns: 4;
    /*段組みの数*/
    padding: 0 15px;
    /*ギャラリー左右に余白をつける*/
    margin: 0;
}

.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;
    }
}

/* --------------------------------------------------------------------- */
/* 単コンテンツ表示のためのcss--------------------------------------------- */
/* --------------------------------------------------------------------- */
.disp {
    text-align: center;
    padding-bottom: 500px;
}


a#nextBtn p,
a#backBtn p {
    width: 130px;
    margin: 10px auto;
    color: var(--main-clr-2);
    background-color: var(--main-clr-1);
    border-radius: 100px;
    font-size: 20px;
    font-weight: bold;
}

.disp h4 {
    font-size: 40px;
    margin: 0px;
}

.disp img {
    display: inline-block;
    width: 95%;
    /* max-width: 1200px; */
    max-height: 1800px;
    height: auto;
    max-width: 600px;
}