#home-news {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5vw 0;
}

.news-none-cta #fix-cta.is-visible {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* ========================================
   ニュースコンテンツ
======================================== */
.home-news-contents {
    border: solid 2px var(--border);
    box-shadow: var(--shadow);
    padding: clamp(20px, 2vw, 36px) clamp(20px, 2vw, 36px);
}

.home-news-item {
    padding: 10px 0;
    position: relative;
    margin-bottom: 2vw;
}

.home-news-item::before {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--border);

    position: absolute;
    bottom: -1vw;
    left: 0;
}

.home-news-item:last-of-type::before {
    display: none;
}

.home-news-item:last-of-type {
    margin-bottom: 0;
    border-bottom: 0;
}

.home-item-bg {
    width: 100%;
    height: 100%;
    padding: 20px 0;

    overflow-x: hidden;
    overflow-y: visible;

    position: relative;
}

.home-item-bg::after {
    content: "";
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;

    position: absolute;
    top: 50%;
    right: -20%;
    transform: translateY(-50%);

    z-index: -1;

    transition: right .3s ease;
}

/* .home-news-item:hover .home-item-bg::after {
    right: -15%;
} */

.home-news-item:nth-of-type(3n + 1) .home-item-bg::after {
    background-image: url(../img/n-1.webp);
}
.home-news-item:nth-of-type(3n + 2) .home-item-bg::after {
    background-image: url(../img/n-2.webp);
}
.home-news-item:nth-of-type(3n + 3) .home-item-bg::after {
    background-image: url(../img/n-3.webp);
}

/* ニュース詳細出来次第解除 */
.home-news-item a {
    /* pointer-events: none;
    cursor: default; */

    display: flex;
    gap: clamp(30px, 5vw, 60px);
}

.home-news-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(18px, 2.5vw, 40px);
    aspect-ratio: 1 / 1;
    transform: rotate(45deg);

    background: var(--base);
    border-radius: 999px;

    transition: transform .3s ease;
}

.home-news-item:hover .home-news-arrow {
    transform: rotate(90deg);
}

.home-news-arrow img {
    display: block;
    width: 60%;
    filter: brightness(0) invert(1);
}

.home-news-category {
    padding: 5px 20px;
    background: var(--base);
    color: var(--white);
    border-radius: 999px;
    font-size: clamp(9px, .9vw, 12px);
    font-weight: 600;
}

.home-news-meta {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    /* padding: 20px 0; */
}

.home-news-date {
    color: var(--text);
    font-size: clamp(10px, 1vw, 14px);
    font-weight: 600;
}
.home-news-title {
    color: var(--text);
    font-size: clamp(13px, 1.1vw, 16px);

    transition: color .3s ease;
}

.home-news-item a:hover .home-news-title {
    color: var(--base);
}

.home-news-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 1;
    padding-left: clamp(30px, 5vw, 60px);
    border-left: solid 2px var(--border);

    margin-right: 30px;
}

/* .home-news-thumbnail {
    width: 20%;
    aspect-ratio: 3 / 1;
    object-fit: contain;
}

.home-news-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
} */

/* ====================================
   NEWS ページネーション
==================================== */

.home-news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
    width: 100%;
    margin-top: 80px;
}

/* ====================================
   ページ番号・ボタン共通
==================================== */

.home-news-pagination .page-numbers {
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 0;
    margin: 0;

    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    border: 2px solid #999;
    border-radius: 50%;
    background: #fff;
    color: #555;

    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

/* ====================================
   ページ番号
==================================== */

@media (hover: hover) {

    .home-news-pagination a.page-numbers:not(.prev):not(.next):hover {
        border-color: #e60013;
        color: #e60013;
        transform: translateY(-3px);
    }

}

/* ====================================
   現在のページ
==================================== */

.home-news-pagination .page-numbers.current {
    position: relative;

    background: #e60013;
    border-color: #e60013;
    color: #fff;

    cursor: default;
}

/* ====================================
   ページ省略記号
==================================== */

.home-news-pagination .page-numbers.dots {
    width: 36px;
    height: 52px;
    flex: 0 0 36px;

    border: none;
    background: transparent;
    color: #999;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;

    cursor: default;
}

/* ====================================
   左右矢印
==================================== */

.home-news-pagination .page-numbers.prev,
.home-news-pagination .page-numbers.next {
    border: 2px solid #e60013;
    color: #e60013;

    /* PREV / NEXT の文字を非表示 */
    font-size: 0;
}

/* CSSで矢印を生成 */

.home-news-pagination .page-numbers.prev::before,
.home-news-pagination .page-numbers.next::before {
    content: "";
    display: block;

    width: 14px;
    height: 14px;

    border-top: 4px solid #e60013;
    border-right: 4px solid #e60013;

    transition: border-color .3s ease;
}

/* 左矢印 */

.home-news-pagination .page-numbers.prev::before {
    transform: rotate(-135deg);
    margin-left: 6px;
}

/* 右矢印 */

.home-news-pagination .page-numbers.next::before {
    transform: rotate(45deg);
    margin-right: 6px;
}

/* ====================================
   矢印ホバー
==================================== */

@media (hover: hover) {

    .home-news-pagination .page-numbers.prev:hover,
    .home-news-pagination .page-numbers.next:hover {
        background: #e60013;
        transform: translateY(-3px);
    }

    .home-news-pagination .page-numbers.prev:hover::before,
    .home-news-pagination .page-numbers.next:hover::before {
        border-color: #fff;
    }

}

/* ====================================
   フォーカス
==================================== */

.home-news-pagination a.page-numbers:focus-visible {
    outline: 3px solid #e60013;
    outline-offset: 4px;
}

/* ====================================
   タブレット
==================================== */

@media (max-width: 1024px) {

    .home-news-pagination {
        gap: 10px;
        margin-top: 65px;
    }

    .home-news-pagination .page-numbers {
        width: 46px;
        height: 46px;
        flex-basis: 46px;

        font-size: 19px;
    }

    .home-news-pagination .page-numbers.dots {
        height: 46px;
    }

}

/* ====================================
   スマートフォン
==================================== */

@media (max-width: 767px) {

    .home-news-pagination {
        gap: 7px;
        margin-top: 30px;
    }

    .home-news-pagination .page-numbers {
        width: 38px;
        height: 38px;
        flex-basis: 38px;

        border-width: 2px;
        font-size: 15px;
    }

    .home-news-pagination .page-numbers.prev::before,
    .home-news-pagination .page-numbers.next::before {
        width: 10px;
        height: 10px;
        border-width: 3px;
    }

    .home-news-pagination .page-numbers.prev::before {
        margin-left: 4px;
    }

    .home-news-pagination .page-numbers.next::before {
        margin-right: 4px;
    }

    .home-news-pagination .page-numbers.dots {
        width: 22px;
        height: 38px;
        flex-basis: 22px;

        font-size: 15px;
        letter-spacing: 1px;
    }

}

@media (max-width: 701px) {
    .home-news-item a {
        flex-direction: column;
        align-items: baseline;
        gap: 10px;
    }

    .home-news-meta {
        flex-direction: row;
    }

    .home-news-bottom {
        margin: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 10px;
        border: none;
    }
}

/* ====================================
   小型スマートフォン
==================================== */

@media (max-width: 440px) {

    #home-news {
        width: 90%;
    }

    .home-news-pagination {
        gap: 5px;
    }

    .home-news-pagination .page-numbers {
        width: 34px;
        height: 34px;
        flex-basis: 34px;

        font-size: 14px;
    }

    .home-news-pagination .page-numbers.dots {
        width: 18px;
        height: 34px;
        flex-basis: 18px;
    }

    .home-news-contents {
        margin: 0;
        padding: 0 20px;
    }

}


/* ====================================
   NEWS ページネーション 無効状態
==================================== */

.home-news-pagination .page-numbers.is-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* ====================================
   NEWS ページネーション ホバー
==================================== */

@media (hover: hover) {

    /* ページ番号 */
    .home-news-pagination a.page-numbers:not(.prev):not(.next):hover {
        border-color: #e60013;
        color: #e60013;
        transform: translateY(-3px);
    }

    /* 有効な矢印のみホバー */
    .home-news-pagination a.page-numbers.prev:hover,
    .home-news-pagination a.page-numbers.next:hover {
        background: #e60013;
        transform: translateY(-3px);
    }

    /* ホバー時に矢印を白く */
    .home-news-pagination a.page-numbers.prev:hover::before,
    .home-news-pagination a.page-numbers.next:hover::before {
        border-color: #fff;
    }

}

/* ====================================
   NEWS ページネーション 無効ホバー防止
==================================== */

.home-news-pagination .page-numbers.is-disabled:hover {
    background: #fff;
    transform: none;
}

.home-news-pagination .page-numbers.is-disabled:hover::before {
    border-color: #e60013;
}


/* ====================================
   NEWS 詳細ページ
==================================== */
.single-body {
    /* width: 80%; */
    width: min(90%, 1280px);
    /* max-width: 1400px; */
    margin: 0 auto;
    padding: 30px 0 60px;
}

.single-news {
    border: solid 2px var(--border);
    box-shadow: var(--shadow);
    padding: clamp(20px, 2vw, 36px) clamp(20px, 2vw, 36px);
}

.single-news-title {
    font-size: clamp(20px, 2vw, 28px);
}

.single-news-thumbnail {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: contain;
}

.single-news-thumbnail img {
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.single-news-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-bottom: 10px;
}

.single-news-category {
    padding: 5px 20px;
    background: var(--base);
    color: var(--white);
    border-radius: 999px;
    font-size: clamp(9px, .9vw, 12px);
    font-weight: 600;
}

.single-news-date {
    color: var(--text);
    font-size: clamp(10px, 1vw, 14px);
    font-weight: 600;
}

.single-news-back {
    width: 50%;
    margin: 50px auto 20px;
    padding: 15px 5px;
    background-color: var(--white);
    border: solid 2px var(--base);
    border-radius: 999px;
    text-align: center;

    transition: background-color .4s ease;
}

.single-news-back a {
    color: var(--base);
    font-size: 14px;
    font-weight: 700;

    transition: color .3s ease;
}

.single-news-back:hover {
    background-color: var(--base);
    border: solid 2px var(--white);
}

.single-news-back:hover a {
    color: var(--white);
}

.single-news-content h3 {
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--base);
    color: var(--white);
    font-size: clamp(16px, 1.3vw, 22px);
}

.single-news-content p {
    font-size: 14px;
    font-weight: 500;
}


@media (max-width: 440px) {
    .single-news-back {
        width: 100%;
    }
}


/* ====================================
   パンくずリスト
==================================== */

.breadcrumb {
    width: min(90%, 1280px);
    margin: 30px auto 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.8;
}

.breadcrumb-list li:not(:last-child)::after {
    content: "›";
    color: #999;
    font-size: 16px;
}

.breadcrumb-list a {
    color: #777;
    text-decoration: none;
    transition: color .3s ease;
}

.breadcrumb-list a:hover {
    color: #e60013;
}

.breadcrumb-list li[aria-current="page"] {
    color: #222;
    font-weight: 600;
}

/* ====================================
   SP
==================================== */

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

    .breadcrumb {
        width: 92%;
        margin-top: 20px;
    }

    .breadcrumb-list {
        gap: 6px;
    }

    .breadcrumb-list li {
        gap: 6px;
        font-size: 11px;
    }
}


/* ====================================
   NEWS詳細　リンク
==================================== */
.single-news-entry {
    margin-top: 20px;
}
.single-news-entry a {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 14px;
    font-weight: 700;

    color: var(--base);
}

.single-news-entry a span {
    display: block;
}