@charset "UTF-8";

/* -------------------------------------------------------
    news.html タブレット版（768px〜1439px）
    css/news.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

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

    /* -------------------------
        お知らせ_ニュース（09_お知らせ_ニュース）専用のスタイルです。
        ヘッダー・フッター・共通ボタン等は css/common.css を参照しています。
        ヒーロー波形（.c-wave-hero--yellow）は css/common.css を参照しています。
    ------------------------- */

    :root {
        --color-tag: #C4A865;
        --color-orange-2: #FFA963;
    }

    .l-main {
        min-width: 69.4444vw;
        background: var(--color-cream);
    }


    /* -------------------------
        ページタイトル（ヒーロー）
    ------------------------- */

    .news-hero {
        position: relative;
        width: 100%;
        height: 32.8472vw;
        overflow: hidden;
    }

    .news-hero__photos-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: url("../images/common/deco_hero_wave.svg");
        mask-image: url("../images/common/deco_hero_wave.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: bottom;
        mask-position: bottom;
        -webkit-mask-size: 100% 33vw;
        mask-size: 100% 33vw;
    }

    .news-hero__photos {
        position: absolute;
        right: 11.1111vw;
        bottom: 2.7778vw;
        width: auto;
        height: 18.0556vw;
    }

    .news-hero__inner {
        position: relative;
        max-width: 100vw;
        height: 100%;
        margin: 0 auto;
    }

    .news-hero__title {
        position: absolute;
        left: 15.2778vw;
        top: 16.0417vw;
        margin: 0;
        color: #000;
        font-size: 3.4722vw;
        font-weight: 700;
        letter-spacing: 5px;
    }

    .news-hero__lead {
        position: absolute;
        left: 15.2778vw;
        top: 22.1528vw;
        margin: 0;
        color: #000;
        font-size: 1.3889vw;
        line-height: 1.6;
        font-weight: 500;
    }


    /* -------------------------
        カテゴリタブ・絞り込み
    ------------------------- */

    .news-search {
        position: relative;
        padding: 4.1667vw 1.3889vw 6.25vw;
    }

    .news-search__inner {
        position: relative;
        max-width: 78.4028vw;
        margin: 0 auto;
    }

    .news-search__avatar {
        position: absolute;
        left: 0vw;
        top: -1vw;
        width: 13vw;
        height: auto;
    }

    .news-tabs {
        display: flex;
        justify-content: center;
        gap: 0.1389vw;
        max-width: 52.1528vw;
        margin: 0 auto 3.4722vw;
        padding: 0.6944vw;
        background: #fff;
        border-radius: 6.9444vw;
    }

    .news-tabs__item {
        flex: 1;
        padding: 0.8333vw 0;
        border-radius: 6.9444vw;
        color: #000;
        font-size: 1.3889vw;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        transition: opacity 0.3s;
    }

    .news-tabs__item:hover {
        opacity: 0.7;
    }

    .news-tabs__item--current {
        background: var(--color-orange);
        color: #fff;
    }

    /* -------------------------
        施設ブログ 絞り込み（11_お知らせ_施設ブログ）
        共通部分（パネル本体・ラベル・クリア）は css/common.css の
        .c-search-panel を使用。ここでは拠点ごとのグルーピング表示のみ定義。
    ------------------------- */

    .c-search-panel--locations {
        align-items: flex-start;
    }

    .c-search-panel__locations {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        gap: 1.1111vw;
    }

    .c-search-panel__location {
        display: flex;
        align-items: baseline;
        gap: 1.6667vw;
        padding-top: 1.1111vw;
        border-top: 1px solid #ECE3AF;
    }

    .c-search-panel__location:first-child {
        padding-top: 0;
        border-top: none;
    }

    .c-search-panel__location-name {
        flex-shrink: 0;
        width: 9.1667vw;
        margin: 0;
        color: #333;
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: 1.8px;
        white-space: nowrap;
    }


    /* -------------------------
        お知らせ一覧
    ------------------------- */

    .news-list {
        padding: 0 1.3889vw 27.7778vw;
    }

    .news-list__inner {
        max-width: 78.4028vw;
        margin: 0 auto;
    }

    .news-list__items {
        display: flex;
        flex-direction: column;
        gap: 2.6389vw;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .news-list__item a {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.8333vw;
        min-height: 9.0972vw;
        padding: 2.0833vw 5.5556vw 2.0833vw 3.4722vw;
        background: #fff;
        border-radius: 2.0833vw;
        box-shadow: 3px 0 12px rgba(101, 63, 49, 0.12);
        text-decoration: none;
        color: #000;
        transition: opacity 0.3s;
    }

    .news-list__item a:hover {
        opacity: 0.8;
    }

    .news-list__text {
        display: flex;
        align-items: baseline;
        gap: 0.5556vw;
    }

    .news-list__badge {
        flex-shrink: 0;
        font-size: 1.5278vw;
        font-weight: 700;
        letter-spacing: 1.1px;
    }

    .news-list__excerpt {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 1.25vw;
        line-height: 1.4;
    }

    .news-list__meta {
        display: flex;
        align-items: center;
        gap: 1.6667vw;
    }

    .news-list__tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.1389vw 0.8333vw;
        background: var(--color-orange-2);
        border-radius: 0.8333vw;
        color: #fff;
        font-size: 0.9722vw;
        font-weight: 700;
    }

    .news-list__date {
        font-size: 0.9722vw;
    }

    .news-list__arrow {
        position: absolute;
        right: 2.0833vw;
        top: 75%;
        width: 2.0833vw;
        height: 2.0833vw;
        transform: translateY(-50%);
    }

    .news-list__back {
        display: flex;
        margin: 4.1667vw auto 0;
    }

    .news-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.0833vw;
        margin: 6.25vw 0 0;
    }

    .news-pager__arrow {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 2.1528vw;
        height: 2.1528vw;
    }

    .news-pager__arrow img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .news-pager__arrow--prev img {
        transform: scaleX(-1);
    }

    .news-pager__nums {
        display: flex;
        align-items: center;
        gap: 2.0833vw;
    }

    .news-pager__num {
        color: var(--color-tag);
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.7361vw;
        font-weight: 500;
        text-decoration: none;
    }

    .news-pager__num--current {
        color: var(--color-orange-2);
        font-weight: 700;
    }


    /* -------------------------
        理事長ブログ・施設ブログ一覧（10_お知らせ_理事長ブログ 等で共通使用）
    ------------------------- */

    .blog-grid {
        padding: 0 1.3889vw 27.7778vw;
    }

    .blog-grid__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
    }

    .blog-grid__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.7778vw;
        margin: 0 0 4.1667vw;
        padding: 0;
        list-style: none;
    }

    .blog-grid__item a {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0.6944vw 0.6944vw 1.3889vw;
        background: #fff;
        border-radius: 2.0833vw;
        text-decoration: none;
        color: #000;
        box-shadow: 0 4px 5px rgba(101, 63, 49, 0.2);
        transition: opacity 0.3s;
    }

    .blog-grid__item a:hover {
        opacity: 0.8;
    }

    .blog-grid__photo-wrap {
        margin-bottom: 0.8333vw;
        border-radius: 1.6667vw 1.6667vw 0 0;
    }

    .blog-grid__photo {
        display: block;
        width: 100%;
        aspect-ratio: 260 / 200;
        object-fit: cover;
    }

    .blog-grid__title {
        margin: 0 0 0.8333vw;
        padding: 0 0.6944vw;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 1.25vw;
        font-weight: 500;
        line-height: 1.6;
    }

    .blog-grid__meta {
        margin-top: auto;
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.9722vw;
        padding: 0 2.7778vw 0.6944vw 0.6944vw;
    }

    .blog-grid__tag {
        max-width: 11.8056vw;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3472vw 0.8333vw;
        background: var(--color-orange-2);
        border-radius: 0.8333vw;
        color: #fff;
        font-size: 0.9722vw;
        font-weight: 700;
    }

    .blog-grid__date {
        font-size: 0.9722vw;
    }

    .blog-grid__arrow {
        position: absolute;
        right: 1.4583vw;
        bottom: 1.4583vw;
        width: 2.0833vw;
        height: 2.0833vw;
    }

    .blog-grid__back {
        display: flex;
        margin: 4.1667vw auto 0;
    }

    /* -------------------------
        記事が0件のときの表示
    ------------------------- */

    .blog-grid__item--empty,
    .news-list__empty {
        padding: 4.1667vw 1.3889vw;
        border-radius: 2.0833vw;
        font-size: 1.25vw;
    }
}