@charset "UTF-8";

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

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

    /* -------------------------
        施設を探す_下層（個別施設ページテンプレート）
        ヒーロー波形マスク（.c-photo-wave-mask）は css/common.css を参照しています。
        共通見出し（.c-heading）も css/common.css を参照しています。
    ------------------------- */

    .l-main {
        background: var(--color-yellow-pale);
    }

    .facility-top {
        position: relative;
        background-color: var(--color-yellow-pale);
    }


    /* -------------------------
        施設タイトル
    ------------------------- */

    .facility-head {
        position: relative;
        padding: 15.4861vw 0 0;
    }

    .facility-head:last-child {
        padding-bottom: 5.5556vw;
    }

    .facility-head__deco {
        position: absolute;
        right: 4.375vw;
        top: 14.0972vw;
        width: 24.8611vw;
        height: auto;
        pointer-events: none;
    }

    .facility-head__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-head__heading {
        display: flex;
        align-items: center;
        gap: 1.3889vw;
    }

    .facility-head__tag {
        display: inline-flex;
        align-items: center;
        padding: 0.3472vw 1.3889vw;
        background: var(--color-orange);
        border-radius: 0.2778vw;
        color: #fff;
        font-size: 1.3194vw;
        font-weight: 700;
    }

    .facility-head__title {
        font-size: 3.5417vw;
        font-weight: 700;
        line-height: 4.1667vw;
        letter-spacing: 2.55px;
    }

    .facility-head__sub {
        display: flex;
        align-items: center;
        gap: 1.1111vw;
        margin-top: 1.1111vw;
        font-size: 1.1111vw;
        line-height: 2.0833vw;
    }

    .facility-head__sub-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 2.6389vw;
        padding: 0.3472vw 1.3889vw;
        background: #fff;
        border-radius: 13.8889vw;
        font-size: 1.1111vw;
        font-weight: 700;
    }


    /* -------------------------
        写真ギャラリー
    ------------------------- */

    .facility-gallery {
        padding: 5.5556vw 0;
    }

    .facility-gallery__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-gallery__main {
        position: relative;
    }

    .facility-gallery__frame {
        position: relative;
        width: 100%;
        aspect-ratio: 1130 / 636;
        overflow: hidden;
        border-radius: 2.0833vw;
    }

    .facility-gallery__photo {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .facility-gallery__photo.is-active {
        opacity: 1;
    }

    .facility-gallery__nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 4.2361vw;
        height: 4.2361vw;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity 0.3s;
    }

    .facility-gallery__nav:hover {
        opacity: 0.8;
    }

    .facility-gallery__nav--prev {
        left: -2.0833vw;
    }

    .facility-gallery__nav--next {
        right: -2.0833vw;
    }

    .facility-gallery__nav-icon {
        display: block;
        width: 100%;
        height: 100%;
    }

    .facility-gallery__nav--prev .facility-gallery__nav-icon {
        transform: rotate(180deg);
    }

    .facility-gallery__thumbs {
        width: 66.6667vw;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 1.3889vw;
        margin-top: 1.3889vw;
        padding: 0;
        list-style: none;
    }

    .facility-gallery__thumbs li {
        width: calc((100% - 6.9444vw) / 6);
    }

    .facility-gallery__thumb-btn {
        display: block;
        width: 100%;
        padding: 0;
        background: none;
        border: 3px solid transparent;
        border-radius: 0.9028vw;
        cursor: pointer;
        transition: border-color 0.3s;
    }

    .facility-gallery__thumb-btn.is-active {
        border-color: var(--color-orange);
    }

    .facility-gallery__thumb-btn img {
        display: block;
        width: 100%;
        height: 5.8333vw;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 0.6944vw;
    }


    /* -------------------------
        ひだまり感染警戒クラス
    ------------------------- */

    .facility-notice {
        padding: 5.5556vw 0 6.25vw;
    }

    .facility-notice__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 4.1667vw 8.3333vw;
        background: #fff;
        text-align: center;
    }

    .facility-notice__deco-dots {
        position: absolute;
        left: -14.7222vw;
        top: -5.2083vw;
        width: 14.0278vw;
        height: auto;
        pointer-events: none;
    }

    .facility-notice__deco-wave {
        position: absolute;
        left: 78.5417vw;
        top: 8.75vw;
        width: 18.2639vw;
        height: auto;
        pointer-events: none;
    }

    .facility-notice__label {
        font-size: 1.6667vw;
        font-weight: 400;
    }

    .facility-notice__status {
        margin-top: 0.5556vw;
        padding-bottom: 0.8333vw;
        border-bottom: 1px solid var(--color-orange);
        color: var(--color-orange);
        font-size: 3.0556vw;
        font-weight: 500;
    }

    .facility-notice__note {
        margin-top: 0.8333vw;
        font-size: 0.9722vw;
        text-align: left;
    }


    /* -------------------------
        ブログを見る
    ------------------------- */

    .facility-blog {
        position: relative;
        width: 100%;
        min-width: 69.4444vw;
        overflow: visible;
        background: var(--color-yellow-pale);
        padding: 17.3611vw 0;
    }

    .facility-blog__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 120%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
        max-width: 120%;
    }

    .facility-blog__inner {
        position: relative;
        z-index: 1;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-blog__slider {
        position: relative;
    }

    .facility-blog__viewport {
        overflow: hidden;
        padding: 0.6944vw 0;
    }

    .facility-blog__list {
        display: flex;
        gap: 1.3889vw;
    }

    .facility-blog__item {
        flex: 0 0 auto;
    }

    .facility-blog__item a {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0.6944vw 0.6944vw 1.3889vw;
        background: #fff;
        border-radius: 2.0833vw;
        box-shadow: 0 4px 5px rgba(101, 63, 49, .2);
        text-decoration: none;
        color: inherit;
    }

    .facility-blog__photo-wrap {
        border-radius: 1.6667vw 1.6667vw 0 0;
        margin: 0 0 0.8333vw;
    }

    .facility-blog__photo {
        display: block;
        width: 100%;
        aspect-ratio: 302 / 190;
        object-fit: cover;
    }

    .facility-blog__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0 0.6944vw;
        margin: 0 0 0.8333vw;
        font-size: 1.25vw;
        line-height: 1.5;
    }

    .facility-blog__meta {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 0.9722vw;
        padding: 0 2.7778vw 0 0.6944vw;
    }

    .facility-blog__arrow {
        position: absolute;
        right: 1.3889vw;
        bottom: 1.3889vw;
        width: 2.0833vw;
        height: 2.0833vw;
    }

    .facility-blog__tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 1.6667vw;
        padding: 0.1389vw 0.7639vw 0.1389vw 0.8333vw;
        line-height: 1.4;
        text-align: center;
        background: #ffa963;
        border-radius: 0.8333vw;
        color: #fff;
        font-size: 0.9722vw;
        font-weight: 700;
    }

    .facility-blog__date {
        flex-shrink: 0;
        font-size: 0.9722vw;
        white-space: nowrap;
    }

    .facility-blog__staff {
        position: absolute;
        width: 22.9167vw;
        top: 29.8611vw;
        right: -18.75vw;
    }

    .facility-blog__back {
        display: flex;
        width: 27.7778vw;
        margin: 4.1667vw auto 0;
    }



    /* -------------------------
        施設について
    ------------------------- */

    .facility-about {
        padding: 13.8889vw 0 4.8611vw;
    }

    .facility-about__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-about__lead {
        max-width: 59.7222vw;
        margin: 0 auto;
        text-align: left;
        font-size: 1.3889vw;
        line-height: 2.4306vw;
    }

    .facility-about__deco-houses {
        position: absolute;
        left: -4.1667vw;
        top: -5.5556vw;
        width: 19.4444vw;
        height: auto;
        pointer-events: none;
    }

    .facility-about__deco-coil {
        position: absolute;
        left: -13.8889vw;
        top: 9.3056vw;
        width: 15.3472vw;
        height: auto;
        pointer-events: none;
    }

    .facility-about__deco-chevron {
        position: absolute;
        left: 75.2083vw;
        top: 20.625vw;
        width: 22.6389vw;
        height: auto;
        pointer-events: none;
    }

    /* -------------------------
        ご案内
    ------------------------- */

    .facility-info {
        padding: 2.0833vw 0 4.8611vw;
    }

    .facility-info__inner {
        max-width: 67.2222vw;
        margin: 0 auto;
        padding: 0;
    }

    .facility-info__table {
        margin: 0;
    }

    .facility-info__row {
        display: flex;
        gap: 1.7361vw;
        padding: 0.6944vw 0;
    }

    .facility-info__row dt {
        flex-shrink: 0;
        width: 9.0278vw;
        font-size: 1.5972vw;
        font-weight: 500;
        line-height: 3.125vw;
    }

    .facility-info__row dd {
        margin: 0;
        font-size: 1.5278vw;
        font-weight: 400;
        line-height: 3.125vw;
        letter-spacing: 1.1px;
    }

    .facility-greeting {
        position: relative;
        display: flex;
        gap: 3.8194vw;
        margin-top: 2.7778vw;
        padding: 3.4722vw 4.1667vw;
        background: #fff;
        border: 2px solid var(--color-orange);
        border-radius: 1.3889vw;
    }

    .facility-greeting__deco-bird {
        position: absolute;
        right: -4.8611vw;
        bottom: -4.8611vw;
        width: 10.4167vw;
        height: auto;
        pointer-events: none;
    }

    .facility-greeting__photo {
        flex-shrink: 0;
        width: 11.4583vw;
        height: 11.4583vw;
        border-radius: 50%;
        object-fit: cover;
    }

    .facility-greeting__label {
        color: var(--color-orange);
        font-size: 1.8056vw;
        font-weight: 700;
        letter-spacing: 1.3px;
    }

    .facility-greeting__name {
        margin-top: 0.2778vw;
        font-size: 1.1111vw;
        line-height: 2.0833vw;
    }

    .facility-greeting__text {
        margin-top: 0.6944vw;
        font-size: 1.3889vw;
        line-height: 2.4306vw;
    }


    /* -------------------------
        設備紹介
    ------------------------- */

    .facility-rooms {
        padding: 2.0833vw 0 4.8611vw;
    }

    .facility-rooms__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-rooms__list {
        display: flex;
        flex-wrap: wrap;
        gap: 2.0833vw 1.3889vw;
        list-style: none;
        margin: 0 0 2.0833vw;
        padding: 0;
    }

    .facility-rooms__deco {
        position: absolute;
        right: -4.1667vw;
        bottom: -11.8056vw;
        width: 14.5833vw;
        height: auto;
        pointer-events: none;
    }

    .facility-rooms__deco-wave {
        position: absolute;
        left: -18.8889vw;
        top: -10.6944vw;
        width: 21.6667vw;
        height: auto;
        pointer-events: none;
    }

    .facility-rooms__deco-dots {
        position: absolute;
        left: 80.2778vw;
        top: 50.6944vw;
        width: 14.0278vw;
        height: auto;
        pointer-events: none;
    }

    .facility-room-card {
        width: calc((100% - 2.7778vw) / 3);
        background: #fff;
        border-radius: 1.3889vw;
        overflow: hidden;
    }

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

    .facility-room-card__photo--placeholder {
        object-fit: contain;
        padding: 2.7778vw;
        background: var(--color-cream);
    }

    .facility-room-card__title {
        margin: 1.3889vw 1.3889vw 0;
        color: var(--color-orange);
        font-size: 1.5278vw;
        font-weight: 700;
        text-align: center;
        letter-spacing: 1.1px;
    }

    .facility-room-card__text {
        padding: 1.1111vw 2.0833vw 1.3889vw;
        font-size: 1.0417vw;
        line-height: 1.5278vw;
        letter-spacing: -0.75px;
    }


    /* -------------------------
        現在の空き状況
    ------------------------- */

    .facility-vacancy {
        padding: 2.0833vw 0 4.8611vw;
    }

    .facility-vacancy__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
        text-align: center;
    }

    .facility-vacancy__calendar {
        display: block;
        width: 100%;
        border-radius: 0.6944vw;
    }


    /* -------------------------
        アクセス
    ------------------------- */

    .facility-access {
        padding: 2.0833vw 0 10.4167vw;
    }

    .facility-access__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .facility-access__deco-coil {
        position: absolute;
        left: -12.8472vw;
        top: -5.2778vw;
        width: 13.75vw;
        height: auto;
        pointer-events: none;
    }

    .facility-access__deco-wave {
        position: absolute;
        left: 78.6806vw;
        top: 21.5972vw;
        width: 21.6667vw;
        height: auto;
        pointer-events: none;
    }

    .facility-access__card {
        display: flex;
        gap: 2.7778vw;
        padding: 2.0833vw;
        background: #fff;
        border-radius: 1.3889vw;
    }

    .facility-access__map {
        width: 36.9444vw;
        flex-shrink: 0;
        border-radius: 0.6944vw;
        height: 30.2083vw;
    }

    .facility-access__table {
        flex: 1;
        margin: 0;
    }

    .facility-access__row {
        display: flex;
        gap: 2.0833vw;
        padding: 0.9722vw 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .facility-access__row:last-child {
        border-bottom: none;
    }

    .facility-access__row dt {
        flex-shrink: 0;
        width: 6.9444vw;
        font-size: 1.5278vw;
        font-weight: 500;
        padding: 0.2083vw 0;
    }

    .facility-access__row dd {
        margin: 0;
        font-size: 1.5278vw;
        font-weight: 400;
        letter-spacing: 1.1px;
        padding: 0.2083vw 0;
    }

    .facility-access__row a {
        color: inherit;
    }


    /* -------------------------
        見学・お問い合わせCTA
    ------------------------- */

    .facility-cta {
        padding: 0 0 27.7778vw;
    }

    .facility-cta__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
        text-align: center;
    }

    .facility-cta__deco {
        position: absolute;
        left: -4.8611vw;
        bottom: -9.7222vw;
        width: 13.8889vw;
        height: auto;
        pointer-events: none;
    }

    .facility-cta__box {
        padding: 4.8611vw;
        background: var(--color-yellow);
        border-radius: 1.3889vw;
    }

    .facility-cta__lead {
        color: var(--color-green);
        font-size: 2.2222vw;
        font-weight: 700;
        line-height: 3.8194vw;
        letter-spacing: 1.6px;
    }

    .facility-cta__buttons {
        display: flex;
        justify-content: center;
        gap: 6.25vw;
        margin-top: 4.0278vw;
    }

    .facility-cta__back {
        display: inline-flex;
        margin: 5.5556vw auto 0;
        font-size: 1.5278vw;
        letter-spacing: 4.4px;
    }

    .facility-embed-comingsoon {
        font-size: 1.8056vw;
    }

}