.article_card_inner {
    display: flex;                    /* Flexbox でカードを並べる */
    margin: 0 auto;                   /* 親要素を中央揃え */
    max-width: 800px;                 /* 最大幅を設定 */
    width: 100%;
}

 /* 各カードのスタイル */
.article-card {
    width: calc(33.3% - 20px); /* 3つのカードを横に並べるため、幅を3分の1に設定 */
    background-color: #fff;           /* 白背景 */
    border-radius: 8px;               /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    overflow: hidden;                 /* 画像がはみ出さないように */
    transition: transform 0.3s ease;  /* ホバー時のアニメーション */
    /* 必要に応じて最小幅や最大幅を設定 */
    margin: 10px;
    min-height: 400px;
}

@media screen and (max-width: 768px)  {
    .article-card {
        width: 80%;
        margin: 20px auto;
    }
}

.img-card-top {
    width: 100%;                       /* 幅 100% */
    height: 200px;                     /* 高さを固定 */
    overflow: hidden;                  /* 画像がはみ出ないように */
}

.img-card-top-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.img-card-top img {
    object-fit: cover;                 /* 画像のアスペクト比を保ちながら領域に収める */
    width: 100%;
    height: 100%;
}

.article-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
}

.cont-card-top {
    padding: 20px;
}

.cont-card-top .article_tag_time span {
    font-size: 14px;
    color: #9A5F5F;
}

.cont-card-top time {
    color: #19292D;
    font-size: 12px;
}

/* 親要素にFlexboxを設定 */
.articles-container {
    display: flex;
    flex-wrap: wrap;   /* 子要素が折り返し可能 */
    justify-content: flex-start; /* 要素を左寄せ */
    align-items: flex-start;     /* 1行の場合、上部に揃える */
    width: 100%;
}

.articles-container-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

/*PC　トップ*/
.top-card {
    width: 100%;
    background-color: #fff;           /* 白背景 */
    border-radius: 8px;               /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    overflow: hidden;                 /* 画像がはみ出さないように */
    transition: transform 0.3s ease;  /* ホバー時のアニメーション */
    /* 必要に応じて最小幅や最大幅を設定 */
    margin: 10px;
    max-height: 350px !important;
}

.top-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
}

@media screen and (min-width: 768px)  {

    .top-card h3 {
        font-size: 23px;
    }
    
}

@media screen and (max-width: 768px)  {
    .top-card {
        width: 80%;
        margin: 20px auto;
    }
    
    .top-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: #000000;
    }
}

.img-card-top {
    width: 100%;                       /* 幅 100% */
    height: 200px;                     /* 高さを固定 */
    overflow: hidden;                  /* 画像がはみ出ないように */
}

.img-card-top-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.img-card-top img {
    object-fit: cover;                 /* 画像のアスペクト比を保ちながら領域に収める */
    width: 100%;
    height: 100%;
}

.cont-card-top {
    padding: 20px;
}

.cont-card-top .article_tag_time span {
    font-size: 14px;
}

.cont-card-top time {
    color: #19292D;
    font-size: 12px;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}