@charset "UTF-8";

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

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

    /* -------------------------
        このファイルは services.html（07_サービスを探す）専用のスタイルです。
        ヘッダー・フッター・共通ボタン・共通見出し（.c-heading）・
        ヒーロー波形マスク（.c-photo-wave-mask）は css/common.css を参照しています。
        絞り込みUI・カードのレイアウト思想は facilities.html（05_施設を探す）に合わせています。
    ------------------------- */

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

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


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

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

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

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

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

    .services-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;
    }

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


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

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

    .services-search__inner {
        max-width: 78.8889vw;
        margin: 0 auto;
    }

    /* -------------------------
        サービス一覧
    ------------------------- */

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

    .services-list__inner {
        max-width: 78.8889vw;
        margin: 0 auto;
    }

    .services-list__group {
        position: relative;
        margin-bottom: 4.8611vw;
    }

    .services-list__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 3.1944vw;
        margin: 0 0 3.4722vw;
        padding: 0 2.0833vw;
        background: var(--color-orange);
        border-radius: 6.9444vw;
        color: #fff;
        font-size: 1.3889vw;
        font-weight: 500;
    }

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

    .service-card {
        position: relative;
        width: 24.3056vw;
        height: 24.3056vw;
        overflow: hidden;
        background-color: #fff;
        border-radius: 1.3889vw;
        box-shadow: 0 4px 5px rgba(152, 124, 82, 0.1);
    }

    .service-card a {
        display: block;
        width: 100%;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .service-card__photo {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .service-card__photo--placeholder {
        object-fit: contain;
        padding: 2.7778vw 2.7778vw 7.7083vw;
    }

    .service-card__bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4.9306vw;
        padding: 0 2.0833vw;
        background: #fff;
        border-radius: 0 0 1.3889vw 1.3889vw;
    }

    .service-card__name {
        overflow: hidden;
        color: #000;
        font-size: 1.3889vw;
        font-weight: 700;
        letter-spacing: 1px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .service-card__arrow {
        flex-shrink: 0;
        width: 2.2917vw;
        height: 2.2917vw;
    }

    .service-card--placeholder,
    .service-card--placeholder-photo {
        background-color: #D9D9D9;
    }

    .service-card--placeholder .service-card__comingsoon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .service-card--placeholder-photo .service-card__comingsoon {
        position: absolute;
        left: 50%;
        top: 42%;
        transform: translate(-50%, -50%);
    }

    .service-card__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .service-card__note {
        color: var(--color-orange);
        font-size: 0.9722vw;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.5px;
    }
    .service-card__comingsoon {
        color: #fff;
        font-size: 1.8056vw;
        font-weight: 700;
        letter-spacing: 1.3px;
    }

    .services-list__group--with-bubble {
        position: relative;
        padding-top: 0.6944vw;
    }

    .services-list__group--pt-lg {
        padding-top: 3.4722vw;
    }

    .services-bubble {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24.2361vw;
        aspect-ratio: 349 / 102;
        margin: 0 0 1.3889vw 4.1667vw;
        top: -1.0417vw;
        left: 13.1944vw;
        padding: 0.5556vw 1.6667vw 1.8056vw;
        font-size: 1.1806vw;
        line-height: 1.7361vw;
        letter-spacing: 0.85px;
    }

    .services-bubble--sm {
        position: absolute;
        top: 2.7778vw;
        left: 13.1944vw;
        width: 11.7361vw;
        aspect-ratio: 169 / 112;
        z-index: 2;
        padding: 0.4167vw 0.8333vw 1.5278vw;
        font-size: 1.25vw;
        line-height: 1.7361vw;
        letter-spacing: 0.9px;
    }

    .services-list__more {
        display: flex;
        margin: 10.4167vw auto 0;
    }
}