/*
 * news.css — ニュース一覧セクション — フルイドレスポンシブ版
 * 基準幅: 1420px (1rem=10px)
 * clamp(): 770px〜1920px
 */

/* ========================================
   1. ニュース一覧セクション全体
   ======================================== */
.news-sections {
    margin-top: 13vh;
}

.news-list {
    padding: clamp(21px, 2.75vw, 53px) clamp(65px, 8.45vw, 162px) clamp(43px, 5.63vw, 108px);
    background: #FBFBF8;
    margin-top: clamp(135px, 17.61vw, 338px);
}

/* ========================================
   2. セクションヘッダー
   ======================================== */
.news-list__header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: clamp(43px, 5.63vw, 108px);
}

.news-list__header-inner {
    text-align: right;
    position: relative;
}

.news-list__title-en {
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(30px, 3.94vw, 76px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #000000;
    line-height: 1;
    margin: 0;
}

.news-list__title-ja {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(11px, 1.06vw, 20px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000000;
    margin: clamp(6px, 0.85vw, 16px) 0 0;
}

.news-list__header-line {
    width: clamp(52px, 6.83vw, 131px);
    height: clamp(1.069px, 0.139vw, 2.75px);
    background: #000000;
    align-self: flex-start;
    margin-top: clamp(5px, 0.70vw, 14px);
}

.news-page .news-list .low_fv__title-block {
    top: clamp(99.328px, 12.917vw, 255.750px);
    right: var(--top-62);
    width: max-content;
}

.news-page .news-list .low_fv__title-sub {
    width: 100%;
}

.news-page .news-list .low_fv__title-line {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

/* ========================================
   3. タグフィルター
   ======================================== */
.news-list__tags {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: var(--top-68);
    margin-bottom: var(--top-12);
}

.news-list__tag {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(9px, 0.85vw, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #000000;
    text-decoration: none;
    padding: clamp(4px, 0.56vw, 11px) clamp(8px, 0.99vw, 19px);
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    border: none;
    background: none;
}

.news-list__tag:first-child { padding-left: 0; }
.news-list__tag:hover { opacity: 0.5; }
.news-list__tag.is-active { opacity: 1; color: #000000; }

/* ========================================
   4. ニュース記事リスト
   ======================================== */
.news-list__items {
    position: relative;
    z-index: 10001;
    border-top: clamp(0.535px, 0.069vw, 1.375px) solid #000000;
    transition: border-color 0.2s ease;
}

.news-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--top-23) 0;
    border-bottom: clamp(0.535px, 0.069vw, 1.375px) solid #000000;
    text-decoration: none;
    color: #000000;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.news-list__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #A50C27;
    z-index: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.2s ease;
}

.news-list__item > * {
    position: relative;
    z-index: 1;
}

.news-list__item:hover {
    color: #fff;
    border-bottom-color: transparent;
}

.news-list__items:has(.news-list__item:first-child:hover) {
    border-top-color: transparent;
}

.news-list__item:has(+ .news-list__item:hover) {
    border-bottom-color: transparent;
}

.news-list__item:hover .news-list__item-date,
.news-list__item:hover .news-list__item-category,
.news-list__item:hover .news-list__item-title {
    color: #fff;
}

.news-list__item-date,
.news-list__item-category,
.news-list__item-title {
    transition: color 0.2s ease 0.1s;
}

.news-list__item:hover .news-list__item-date,
.news-list__item:hover .news-list__item-category,
.news-list__item:hover .news-list__item-title {
    transition-delay: 0s;
}

.news-list__item:hover::before {
    clip-path: inset(0 0 0 0);
}

.news-list__item:hover .news-list__item-arrow img,
.news-list__item:hover .news-list__item-arrow svg {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.news-list__item-arrow img,
.news-list__item-arrow svg {
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.news-list__item-content {
    flex: 1;
    min-width: 0;
    transition: transform 0.2s ease;
}

.news-list__item:hover .news-list__item-content {
    transform: translateX(clamp(12.833px, 1.667vw, 33px));
}

.news-list__item-meta {
    display: flex;
    align-items: baseline;
    gap: 0;
    margin-bottom: clamp(5px, 0.70vw, 14px);
}

.news-list__item-date {
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(9px, 0.85vw, 16px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000000;
    white-space: nowrap;
    min-width: clamp(44px, 5.77vw, 111px);
}

.news-list__item-category {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(9px, 0.85vw, 16px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000000;
    white-space: nowrap;
}

.news-list__item-title {
    font-family: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
    font-size: clamp(11px, 1.06vw, 20px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

.news-list__item-arrow {
    flex-shrink: 0;
    margin-left: clamp(22px, 2.82vw, 54px);
    display: flex;
    align-items: center;
}

.news-list__item-arrow svg {
    width: clamp(43px, 5.63vw, 108px);
    height: clamp(13px, 1.69vw, 32px);
    display: block;
}

/* ========================================
   5. ページネーション
   ======================================== */
.news-list__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.56vw, 11px);
    margin-top: clamp(43px, 5.63vw, 108px);
}

.news-list__page-prev,
.news-list__page-next {
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(11px, 0.99vw, 19px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #000000;
    text-decoration: underline;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    background: none;
    border: none;
    padding: clamp(2px, 0.28vw, 5px) clamp(9px, 1.13vw, 22px);
}

.news-list__page-prev:hover,
.news-list__page-next:hover { opacity: 0.7; }

.news-list__page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(22px, 2.82vw, 54px);
    height: clamp(22px, 2.82vw, 54px);
    border-radius: 50%;
    border: clamp(0.535px, 0.069vw, 1.375px) solid #000000;
    font-family: 'Proxima Nova', 'Montserrat', Arial, sans-serif;
    font-size: clamp(11px, 0.99vw, 19px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #000000;
    text-decoration: none;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    background: none;
}

.news-list__page-num:hover { opacity: 0.7; }
.news-list__page-num.is-active {
    background: #000000;
    color: #ffffff;
    opacity: 1;
}

.news-list__page-dots {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.28vw, 5px);
    padding: 0 clamp(4px, 0.56vw, 11px);
    opacity: 0.3;
}

.news-list__page-dot {
    width: clamp(3px, 0.28vw, 5px);
    height: clamp(3px, 0.28vw, 5px);
    background: #000000;
    border-radius: 50%;
}

@media screen and (max-width: 769px) {
    .news-page {
        --sp-u: calc(100vw / 390);
        --sp-10: 2.564vw;
        --sp-12: 3.077vw;
        --sp-14: 3.590vw;
        --sp-16: 4.103vw;
        --sp-18: 4.615vw;
        --sp-20: 5.128vw;
        --sp-24: 6.154vw;
        --sp-30: 7.692vw;
        --sp-32: 8.205vw;
        --sp-34: 8.718vw;
        --sp-40: 10.256vw;
        --sp-44: 11.282vw;
        --sp-50: 12.821vw;
        --sp-56: 14.359vw;
        --sp-60: 15.385vw;
        --sp-78: 20vw;
        --sp-80: 20.513vw;
        --sp-84: 21.538vw;
        --sp-85: 21.795vw;
        --sp-content-width: calc(100vw - var(--sp-24) * 2);
        min-width: 0;
        overflow-x: hidden;
        background: #fbfbf8;
    }
.news-page .news-sections {
        position: relative;
        margin-top: 0;
        overflow: hidden;
        background: #fbfbf8;
    }

    .news-page .news-sections__blob {
        right: auto;
        left: 100%;
        height: auto;
        transform: translateX(calc(-100% + clamp(106.944px, 13.889vw, 275px)));
        opacity: 0.5;
        display: block;
    }

    .news-page .news-list {
        position: relative;
        z-index: 10001;
        margin-top: 0;
        padding: 39.744vw var(--sp-24) var(--sp-80);
        padding-top: calc(clamp(138px, 38.46vw, 296px) + 45.897vw);
        background: transparent;
    }

    .news-page .news-list .low_fv__title-block {
        position: absolute;
        top: var(--sp-94);
        right: var(--sp-24);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: max-content;
        max-width: 100%;
        margin: 0;
        transform: none;
        text-align: right;
    }

    .news-page .news-list .low_fv__title-en {
        margin: 0 0 var(--sp-12);
        font-size: 9.231vw;
        line-height: 1;
        letter-spacing: 0.05em;
        text-align: right;
    }

    .news-page .news-list .low_fv__title-sub {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2.051vw;
        width: 100%;
        margin: 0;
    }

    .news-page .news-list .low_fv__title-line {
        display: block;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        height: clamp(0.535px, 0.069vw, 1.375px);
        background: #000;
    }

    .news-page .news-list .low_fv__title-ja {
        margin: 0;
        font-size: var(--sp-14);
        line-height: 1;
        letter-spacing: 0.05em;
        white-space: nowrap;
        text-align: right;
    }

    .news-page .news-list__tags {
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        margin: 0 0 5.897vw;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .news-page .news-list__tags::-webkit-scrollbar {
        display: none;
    }

    .news-page .news-list__tag {
        flex: 0 0 auto;
        padding: 0 var(--sp-16) 0 0;
        font-size: var(--sp-12);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.05em;
    }

    .news-page .news-list__tag:first-child {
        padding-left: 0;
        padding-right: var(--sp-24);
    }

    .news-page .news-list__items {
        border-top: clamp(0.535px, 0.069vw, 1.375px) solid #000;
        transition: border-color 0.2s ease;
    }

    .news-page .news-list__item {
        align-items: flex-start;
        min-height: 34.872vw;
        padding: 6.154vw 0 5.128vw;
        border-bottom: clamp(0.535px, 0.069vw, 1.375px) solid #000;
    }

    .news-page .news-list__item:nth-child(3) {
        min-height: 41.538vw;
    }

    .news-page .news-list__item:hover {
        border-bottom-color: transparent;
    }

    .news-page .news-list__items:has(.news-list__item:first-child:hover) {
        border-top-color: transparent;
    }

    .news-page .news-list__item:has(+ .news-list__item:hover) {
        border-bottom-color: transparent;
    }

    .news-page .news-list__item-content {
        width: clamp(239px, 66.67vw, 513px);
        flex: 0 1 auto;
    }

    .news-page .news-list__item-meta {
        gap: var(--sp-16);
        margin-bottom: 4.872vw;
    }

    .news-page .news-list__item-date,
    .news-page .news-list__item-category {
        min-width: 0;
        font-size: var(--sp-12);
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.05em;
    }

    .news-page .news-list__item-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 3.846vw;
        font-weight: 400;
        line-height: 1.73;
        letter-spacing: 0.05em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        width: clamp(239px, 66.67vw, 513px);
    }

    .news-page .news-list__item-arrow {
        align-self: center;
        width: 14.359vw;
        margin-top: 0;
        margin-left: var(--sp-20);
    }

    .news-page .news-list__item-arrow img,
    .news-page .news-list__item-arrow svg {
        display: block;
        width: 14.359vw;
        height: 10.256vw;
        object-fit: contain;
    }

    .news-page .news-list__pagination {
        display: flex;
        justify-content: center;
        gap: var(--sp-8, 2.051vw);
        margin-top: 11.026vw;
    }

    .news-page .news-list__page-num {
        width: 10.256vw;
        height: 10.256vw;
        font-size: var(--sp-14);
        line-height: 1;
        opacity: 1;
    }

    .news-page .news-list__page-num:nth-of-type(5),
    .news-page .news-list__page-num:nth-of-type(6) {
        display: none;
    }

    .news-page .news-list__page-dots {
        gap: 2.051vw;
        padding: 0 1.026vw;
        opacity: 1;
    }

    .news-page .news-list__page-dot {
        width: 1.026vw;
        height: 1.026vw;
    }

    .news-page .cta {
        padding: 0 0 var(--sp-80);
        background: #fbfbf8;
    }

    .news-page .cta__inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-24);
        max-width: none;
        padding: 0 var(--sp-24);
    }

    .news-page .cta__card {
        width: var(--sp-content-width);
        max-width: var(--sp-content-width);
        justify-self: center;
        aspect-ratio: 342 / 257;
        border-radius: 2.051vw;
    }

    .news-page .cta__card-content {
        width: 100%;
        padding: var(--sp-32) var(--sp-20);
    }

    .news-page .cta__card-top,
    .news-page .cta__desc {
        width: clamp(290.385px, 77.436vw, 595.482px);
        max-width: 100%;
    }

    .news-page .cta__label {
        font-size: var(--sp-16);
        line-height: 4.615vw;
    }

    .news-page .cta__title {
        margin-bottom: 2.051vw;
        font-size: 8.205vw;
        line-height: 1;
    }

    .news-page .cta__desc {
        font-size: var(--sp-14);
        line-height: 5.641vw;
    }

    .news-page .cta__arrow-circle {
        width: 11.282vw;
        height: 11.282vw;
    }

    .news-page .cta__arrow-circle img {
        width: 4.615vw;
        height: 4.615vw;
    }

    .news-page .page-breadcrumb {
        display: flex;
        width: var(--sp-content-width);
        margin: 0 auto var(--sp-95);
        padding: 0;
        font-size: var(--sp-12);
    }

    .news-page .page-breadcrumb__arrow {
        width: 1.795vw;
    }

    .news-page .footer-marquee {
        height: var(--sp-85);
        overflow: visible;
    }

    .news-page .footer-marquee__text {
        height: var(--sp-90);
        font-size: 30.769vw;
        line-height: 1.1;
    }

    body.news-page .footer.footer--about {
        min-height: auto;
        padding: 14.359vw var(--sp-24) 10.256vw;
        border-radius: 10.256vw 10.256vw 0 0;
    }

    body.news-page .footer-about__nav-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: var(--sp-84);
    }

    body.news-page .footer-about__col {
        gap: var(--sp-24);
    }

    body.news-page .footer-about__col--sub {
        margin-top: var(--sp-24);
    }

    body.news-page .footer-about__col--sns {
        margin-top: calc(var(--sp-34) + var(--sp-34));
    }

    body.news-page .footer-about__nav-link {
        width: max-content;
        font-size: var(--sp-18);
        line-height: 1;
    }

    body.news-page .footer-about__nav-link--privacy,
    body.news-page .footer-about__sns-head,
    body.news-page .footer-about__sns-link {
        font-size: var(--sp-14);
        line-height: 1;
    }

    body.news-page .footer-about__sns-links {
        gap: var(--sp-30);
    }

    body.news-page .footer-about__sns-link {
        width: clamp(221.154px, 58.974vw, 453.615px);
    }

    body.news-page .footer-about__sns-arrow {
        width: var(--sp-16);
    }

    body.news-page .footer-about__divider {
        display: none;
    }

    body.news-page .footer-about__bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-56);
        padding-top: 0;
    }

    body.news-page .footer-about__bottom-left {
        align-items: center;
        text-align: center;
        gap: var(--sp-16);
    }

    body.news-page .footer-about__logo-img {
        width: clamp(290.385px, 77.436vw, 595.482px);
    }

    body.news-page .footer-about__copyright {
        font-size: 2.564vw;
    }

    body.news-page .footer-about__totop {
        width: var(--sp-60);
        height: var(--sp-60);
        margin: 0 auto;
    }

    body.news-page .footer-about__totop-arrow {
        width: var(--sp-30);
        height: 5.641vw;
        transform: rotate(-90deg);
    }
}