/* --------------------------------------------------------------------- */
/* コンテンツ一覧のためのcss--------------------------------------------- */
/* --------------------------------------------------------------------- */
/* コンテンツリストのコンテナ */
main {
    padding-bottom: 200px;
}

section {

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

a {
    text-decoration: none;
}

#contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#contents a {
    text-decoration: none;
    width: 300px;
    margin: 10px auto;
}

/* コンテンツのコンテナ */
.content {
    display: block;
    text-align: left;
    overflow-wrap: break-word;
    border-bottom: 1px solid var(--main-clr-1);

}

/* コンテンツタイトル、説明文のコンテナ */
.textContainer {
    margin: 10px 0px 0px 0px;
}

/* コンテンツタイトル */
.content h4 {
    color: var(--main-clr-1);
    --brdr: var(--sub-clr-2);
    margin: 0px;
    font-size: 20px;
    /* width: 80%; */
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: normal;

}

/* コンテンツの説明文 */
.content p {
    color: black;
    margin: 0px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

.imageContainer {
    display: inline-block;
    width: 50%;
    height: 150px;
}

/* コンテンツのサムネイル */
img {
    display: inline-block;
    width: 300px;
    height: 150px;
    vertical-align: top;
    object-fit: cover;
    /* object-position: 0% 9%; */
}



@media screen and (max-width:1320px) {
    section {
        width: 1000px;
    }

    #contents {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width:1000px) {
    section {
        width: 680px;
    }

    #contents {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:700px) {
    section {
        width: 100%;
    }

    #contents {
        display: block;

    }

    .content {
        padding: 15px;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .textContainer {
        display: inline-block;
        vertical-align: top;
        margin-left: 20px;
        width: calc(50% - 20px);
    }

    .content h4 {
        font-size: 20px;
    }
}

@media screen and (max-width:560px) {


    .imageContainer {
        height: 100px;
    }
}

/* --------------------------------------------------------------------- */
/* 全部表示ボタンのためのcss--------------------------------------------- */
/* --------------------------------------------------------------------- */
a#allviewBtn {
    text-decoration: none;
}

#allviewBtn p {
    width: 130px;
    margin: 0px auto;
    color: var(--main-clr-2);
    background-color: var(--main-clr-1);
    border-radius: 100px;
    font-weight: bold;
}

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

.pageLinkBtn {
    display: block;
}

#nextBtn,
#backBtn {
    display: inline-block;
    margin: 0px 10px;
}

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: 100%;
    max-width: 1200px;
    max-height: 1800px;
    height: auto;
    max-width: 600px;
}