@charset "UTF-8";

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

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

    /* -------------------------
        このファイルは facilities.html（05_施設を探す）専用のスタイルです。
        ヘッダー・フッター・共通ボタン・共通見出し（.c-heading）・
        ヒーロー波形背景（.c-wave-hero--yellow）は css/common.css を参照しています。
    ------------------------- */

    :root {
        --color-tag: #C4A865;
    }

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


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

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

    .facilities-hero__photo {
        position: absolute;
        inset: 0;
        background-color: var(--color-yellow);
    }

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

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

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

    .facilities-hero__illust {
        position: absolute;
        left: 72.5694vw;
        top: 15.4167vw;
        width: 16.7361vw;
        height: auto;
    }


    /* -------------------------
        絞り込み検索
    ------------------------- */

    .facilities-search {
        padding: 6.9444vw 1.3889vw 6.25vw;
    }

    .facilities-search__inner {
        max-width: 84.0278vw;
        margin: 0 auto;
    }

    .facilities-search__map-link {
        flex-shrink: 0;
        margin-left: auto;
        padding: 0;
        border: none;
        background: none;
        color: #4e4e4e;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 0.9722vw;
        font-weight: 500;
        text-decoration: underline;
        cursor: pointer;
    }

    /* -------------------------
        拠点マップ（「エリア分けについて」モーダル内）
    ------------------------- */

    .facilities-map__card {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45.2778vw;
        max-width: 100%;
        aspect-ratio: 652 / 634;
        margin: 0 auto;
        background: #fff;
        padding: 3.4722vw 0.6944vw;
        border-radius: 1.7361vw;
    }

    .facilities-map__svg {
        width: 63.7%;
        height: auto;
    }

    .map-region .map-label {
        font-size: 1.5278vw;
        font-weight: 500;
        fill: #fff;
        letter-spacing: 0.5px;
    }


    /* -------------------------
        施設一覧
    ------------------------- */

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

    .facilities-list__inner {
        max-width: 84.0278vw;
        margin: 0 auto;
    }

    .facilities-list__grid {
        display: grid;
        grid-template-columns: repeat(3, 24.3056vw);
        justify-content: center;
        gap: 2.7778vw;
        margin: 0 0 10.4167vw;
        padding: 0;
        list-style: none;
    }

    .facility-card {
        background: #fff;
        border-radius: 2.0833vw;
        box-shadow: 0 4px 5px rgba(152, 124, 82, 0.1);
        overflow: hidden;
    }

    .facility-card a {
        display: block;
        position: relative;
        padding: 0.6944vw;
        color: inherit;
        text-decoration: none;
    }

    .facility-card__photo-wrap {
        display: block;
        overflow: hidden;
        border-radius: 1.6667vw 1.6667vw 0 0;
    }

    .facility-card__photo {
        display: block;
        width: 100%;
        margin: 0;
        aspect-ratio: 350 / 280;
        object-fit: cover;
    }

    .facility-card__category {
        margin: 0.6944vw 0.6944vw 0.3472vw;
        overflow: hidden;
        color: #000;
        font-size: 0.8333vw;
        font-weight: 500;
        letter-spacing: -0.6px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .facility-card__name {
        margin: 0.6944vw 0.6944vw 0.3472vw;
        color: #000;
        font-size: 1.5278vw;
        font-weight: 700;
        letter-spacing: 0;
    }

    .facility-card__name-sub {
        font-size: 1.3194vw;
    }

    .facility-card__area-row {
        display: flex;
        align-items: center;
        gap: 1.3889vw;
        margin: 1.0417vw 0.6944vw 1.3889vw;
    }

    .facility-card__area-tag {
        height: 1.6667vw;
        padding: 0 0.5556vw;
        border-radius: 0.4167vw;
        font-size: 0.9722vw;
    }

    .facility-card__area {
        margin: 0;
        color: #000;
        font-size: 0.9722vw;
        font-weight: 400;
    }

    .facility-card__arrow {
        position: absolute;
        right: 1.6667vw;
        bottom: 1.6667vw;
        width: 2.0833vw;
        height: 2.0833vw;
    }

    .facilities-list__more {
        display: flex;
        margin: 0 auto;
    }
}