/* ==========================
   スマホ表示用（newsList li を newsHero li と同じ見た目に）
========================== */
@media screen and (max-width: 768px) {

    body {
        padding: 16px;
    }

    header {
        min-width: 100%;
        min-height: 84px;
        padding: 16px 0 24px 0;
    }

    .breadCrumb {
        width: 100%;
    }

    .newsHero {
        margin: 0 0 16px 0;
    }

    .newsHero h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .newsHero li img {
        width: 240px;
        /* newsHero li と同じ */
        height: auto;
    }

    .newsHero li div {
        padding: 0 24px;
    }

    .labelWrap {
        margin-bottom: 8px;
    }

    .newsList {
        gap: 16px;
    }

    /* li 自体 */
    .newsList li {
        display: flex;
        align-items: center;
        width: 100%;
        /* スマホ幅に合わせる */
        backdrop-filter: blur(8px);
        line-height: normal;
    }

    .newsList li a {
        display: flex;
        align-items: center;
    }

    /* .labelWrap */
    .newsList li div .labelWrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .newsList li div {
        padding: 0 24px;
    }

    /* .labelWrap 内の span 要素（tag と day） */
    .newsList li div .labelWrap span,
    .newsList li div .labelWrap p {
        display: flex;
        align-items: center;
    }

    /* 画像サイズ */
    .newsList li img {
        width: 240px;
        /* newsHero li と同じ */
        height: auto;
    }

    /* h3 見出しサイズ（必要で調整） */
    .newsList li h3 {
        font-size: 18px;
        line-height: 24px;
        margin: 0;
    }

    .article {
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone　11 Pro Max・XS Max　 */


/* 最小　621 × 1344 px の比率画像解像度にて定義  */

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

    .newsHero {
        margin: 0 0 40px 0;
    }

    .newsHero li a {
        display: block;
    }

    .newsHero li a img {
        width: 100%;
    }

    .newsHero li div {
        padding: 16px;
    }

    .newsList {
        gap: 40px;
    }

    .newsList li a img {
        width: 100%;
    }

    .newsList li a {
        display: block;
    }


    .newsList li div {
        padding: 24px;
    }

}