@charset "UTF-8";
/*
---
---------------------------------------------------------------------------*/
   
/* --- category list ----*/
.ariticle-category-flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
.article-category-box {
    width: calc(50% - 25px);
    position: relative;
    z-index: 0;
}
.article-category-box > a {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-decoration: none;
}
.article-cat-image {
    width: 40%;
    max-width: 160px;
    padding-right: 10px;
    padding-bottom: 10px;
    position: relative;
}
.article-cat-image img {
    width: 100%;
}
.article-cat-image::before {
    content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background-color: #aaa;
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
}
.article-category-box.up .article-cat-image::before {
    background-color: #f15a24;
}
.article-category-box.kyo .article-cat-image::before {
    background-color: #00a1cc;
}
.article-category-box.ju .article-cat-image::before {
    background-color: #7c4ec4;
}
.article-category-box.mm .article-cat-image::before {
    background-color: #fc7baf;
}
.article-category-box.tu .article-cat-image::before {
    background-color: #009a31;
}

.article-cat-text {
    flex: 1;
}
.article-cat-text h6 {
    color: #333;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.article-cat-text p {
    line-height: 1.8;
    padding-bottom: 0;
}

        @media only screen and (max-width: 767px) {
            .ariticle-category-flex-box {
                gap: 20px;
            }
            .article-category-box {
                width: 100%;
            }
        }
        @media only screen and (max-width: 545px) {
            .article-cat-text p {
                font-size: 13px;
                line-height: 1.6;
            }
            .article-cat-text h6 {
                font-size: 14px;
                margin-bottom: 0.5rem;
            }
            .article-cat-image {
                width: 35%;
            }
        }


/* --- 記事 --- */
div#kobetu .ariticle-category-flex-box {
    margin-top: 80px;
    margin-bottom: 50px;
}