@charset "UTF-8";

html {
    scroll-padding-top: 100px;
}
.page-facility {
    --color-gym: #f18e38;
    --color-studio: #82b56a;
    --color-aqua: #4aa3d5;
    --color-relax: #ed7980;
}

/* ========================================== */
/* リード */
/* ========================================== */

.facility-map {
    display: grid;
    grid-template-columns: 976fr 422fr;
    gap: var(--space-40);
    margin-top: var(--space-64);

    @media (width <= 800px) {
        grid-template-columns: 1fr;
    }
}

.facility-map-2f {
    @media (width <= 800px) {
        width: calc(422 / 976 * 100%);
        margin-inline: auto;
    }
}

.facility-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-28);
    margin-top: var(--space-80);

    @media (width <= 1280px) {
        gap: var(--space-20);
    }
    @media (width <= 1024px) {
        gap: var(--space-12);
    }
    @media (width <= 800px) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (width <= 480px) {
        grid-template-columns: 1fr;
    }
}

.facility-nav-btn {
    position: relative;
    display: block;
    background-color: var(--color-primary);
    padding: var(--space-24) var(--space-24);
    border-radius: 9999px;
    color: var(--color-text-inverted);
    font-size: var(--font-size-20);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;

    @media (width <= 1280px) {
        padding: var(--space-16) var(--space-24);
        font-size: var(--font-size-18);
    }

    &:hover {
        transform: scale(1.05);
    }
    &::after {
        position: absolute;
        right: 1.5em;
        top: 50%;
        transform: translateY(-50%);
        background: url(../img/facility/facility-nav-btn-after.svg) 50% 50% / contain no-repeat;
        content: '';
        display: block;
        width: 0.8em;
        height: 0.5em;
    }

    br {
        display: none;

        @media (width <= 1280px) {
            display: inline;
        }
        @media (width <= 800px) {
            display: none;
        }
        @media (width <= 640px) {
            display: inline;
        }
        @media (width <= 480px) {
            display: none;
        }
    }
}

.facility-nav-btn-gym {
    --color-primary: var(--color-gym);
}

.facility-nav-btn-studio {
    --color-primary: var(--color-studio);
}

.facility-nav-btn-aqua {
    --color-primary: var(--color-aqua);
}

.facility-nav-btn-relax {
    --color-primary: var(--color-relax);
}

/* ========================================== */
/* セクション見出し */
/* ========================================== */

.facility-section-header {
    background: 50% 50% / cover no-repeat;
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
    color: var(--color-text-inverted);

    @media (width <= 1280px) {
        padding-top: var(--space-80);
        padding-bottom: var(--space-80);
    }
    @media (width <= 1024px) {
        padding-top: var(--space-64);
        padding-bottom: var(--space-64);
    }
}

.facility-section-header-gym {
    background-image: url(../img/facility/facility-section-header-gym-bg.webp);

    @media (width <= 1024px) {
        background-image: url(../img/facility/facility-section-header-gym-bg-tb.webp);
    }
}

.facility-section-header-studio {
    background-image: url(../img/facility/facility-section-header-studio-bg.webp);

    @media (width <= 1024px) {
        background-image: url(../img/facility/facility-section-header-studio-bg-tb.webp);
    }
}

.facility-section-header-aqua {
    background-image: url(../img/facility/facility-section-header-aqua-bg.webp);

    @media (width <= 1024px) {
        background-image: url(../img/facility/facility-section-header-aqua-bg-tb.webp);
    }
}

.facility-section-header-relax {
    background-image: url(../img/facility/facility-section-header-relax-bg.webp);

    @media (width <= 1024px) {
        background-image: url(../img/facility/facility-section-header-relax-bg-tb.webp);
    }
}

.facility-section-heading {
    font-size: var(--font-size-40);
    font-weight: bold;
    line-height: 1.4;

    @media (width <= 1024px) {
        font-size: var(--font-size-32);
    }
}

.facility-section-heading-en {
    margin-top: var(--space-28);
    font-size: var(--font-size-18);
    line-height: 1.4;
    letter-spacing: 0.1em;

    @media (width <= 1024px) {
        margin-top: var(--space-12);
        font-size: var(--font-size-16);
    }
}

.facility-section-heading-text {
    margin-top: var(--space-36);
    font-size: var(--font-size-20);
    line-height: 1.4;

    @media (width <= 1024px) {
        margin-top: var(--space-24);
        font-size: var(--font-size-16);
    }
}

/* ========================================== */
/* セクション共通 */
/* ========================================== */

.facility-section-sub-heading {
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid;
    font-size: var(--font-size-40);
    font-weight: bold;
    line-height: 1.4;

    @media (width <= 1280px) {
        font-size: var(--font-size-32);
    }

    &::before {
        content: '';
        display: block;
        width: 0.25em;
        height: 0.25em;
        border: 3px solid var(--color-primary);
        border-radius: 50%;
    }
}

.facility-section-sub-heading2 {
    font-size: var(--font-size-32);
    font-weight: bold;
    line-height: 1.4;
    text-align: center;

    @media (width <= 1280px) {
        font-size: var(--font-size-28);
    }
    @media (width <= 1024px) {
        font-size: var(--font-size-24);
    }
}

.facility-section-sub-heading-label {
    flex: 1 0 0%;
}

.facility-section-read {
    display: grid;
    grid-template-columns: 1000fr 340fr;
    grid-template-areas: 'img point' 'text text';
    gap: var(--space-32) var(--space-44);

    @media (width <= 1280px) {
        grid-template-columns: 1000fr 400fr;
        gap: var(--space-24) var(--space-32);
    }
    @media (width <= 800px) {
        grid-template-columns: 2fr 1fr;
    }
    @media (width <= 640px) {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'img img' 'text point' 'text point';
        gap: var(--space-32) var(--space-24);
    }
    @media (width <= 480px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'img' 'point' 'text';
    }
    &:has(.facility-section-read-toggle) {
        grid-template-areas: 'img point' 'toggle point' 'text text';

        @media (width <= 640px) {
            grid-template-areas: 'img img' 'toggle toggle' 'text point';
        }
        @media (width <= 480px) {
            grid-template-areas: 'img img' 'toggle toggle' 'point point' 'text text';
        }
    }
}

.facility-section-read-img {
    grid-area: img;
    /* overflow: hidden; 使うとスライダーの矢印が消える */

    > img {
        @media (width <= 480px) {
            display: block;
            object-fit: cover;
            aspect-ratio: 16 / 11;
        }
    }
    .js-pannellum-viewer {
        aspect-ratio: 1100 / 450;

        @media (width <= 480px) {
            aspect-ratio: 16 / 11;
        }
    }
}

.facility-section-read-pannellum {
    overflow: hidden;
}


.facility-section-read-slider {
    position: relative;

    .splide__slide {
        padding-top: 0;
    }
    .splide__arrow {
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 7.8rem;
        height: 7.8rem;
        background: 50% 50% / contain no-repeat;
        border: none;
        z-index: 1;
        cursor: pointer;

        @media (width <= 1280px) {
            width: 5.8rem;
            height: 5.8rem;
        }
        @media (width <= 800px) {
            width: 4.8rem;
            height: 4.8rem;
        }
        @media (width <= 480px) {
            width: 3.8rem;
            height: 3.8rem;
        }

        svg {
            display: none;
        }
    }
    .splide__arrow--prev {
        left: 0;
        background-image: url(../img/front/top-facility-slider-arrow-prev.svg);
        transform: translate(-50%, -50%);
    }
    .splide__arrow--next {
        right: 0;
        background-image: url(../img/front/top-facility-slider-arrow-next.svg);
        transform: translate(50%, -50%);
    }
}

.facility-section-read-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4) 2%;
    margin-top: var(--space-8);
}

.facility-section-read-thumbnail {
    width: 18.3%;
    max-width: 182px;
    opacity: 0.6;
    cursor: pointer;

    @media (width <= 800px) {
        width: 23.5%;
    }
    @media (width <= 480px) {
        width: 32%;
    }

    &.active {
        opacity: 1;
    }
}

.facility-section-read-toggle {
    grid-area: toggle;
}

.facility-section-read-text {
    grid-area: text;
    font-size: var(--font-size-18);

    @media (width <= 1280px) {
        font-size: var(--font-size-16);
    }
}

.facility-section-read-point {
    display: flex;
    justify-content: center;
    grid-area: point;

    @media (width <= 640px) {
        img {
            width: 200px;
            margin-inline: auto;
        }
    }
    @media (width <= 480px) {
        picture,
        img {
            width: 100%;
        }
    }
}

.facility-section-machine-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-48) var(--space-28);
    margin-top: var(--space-40);

    @media (width <= 1280px) {
        gap: var(--space-32) var(--space-28);
    }
    @media (width <= 1024px) {
        grid-template-columns: repeat(3, 1fr);
    }
    @media (width <= 640px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.facility-section-machine-list:not(.active) {
    .facility-section-machine-list-item:nth-child(n + 5) {
        display: none;
    }
    @media (width <= 1024px) {
        .facility-section-machine-list-item:nth-child(n + 4) {
            display: none;
        }
    }
    @media (width <= 640px) {
        .facility-section-machine-list-item:nth-child(n + 3) {
            display: none;
        }
    }
}

.facility-section-machine-list-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;
}

.facility-section-machine-label {
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-12);
    padding: var(--space-8);
    color: var(--color-text-inverted);
    font-size: var(--font-size-18);
    line-height: 1.4;
    text-align: center;

    @media (width <= 1280px) {
        font-size: var(--font-size-16);
    }
}

.facility-section-machine-description {
    margin-top: var(--space-12);
    font-size: var(--font-size-14);
    line-height: 1.4;
    flex: 1 0 0%;
}

.facility-section-machine-training-parts {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-16);
    
    @media (640px <= width <= 800px) {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }
    @media (width <= 480px) {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }
}
.facility-section-machine-training-parts-label {
    font-size: var(--font-size-12);
    border: 1px solid;
    padding: 0.5em 1em;
    border-radius: 9999px;
    color: var(--color-primary);
    line-height: 1.4;

    @media (640px <= width <= 800px) {
        text-align: center;
    }
    @media (width <= 480px) {
        text-align: center;
    }
}
.facility-section-machine-training-parts-description {
    flex: 1 0 0%;
    padding-top: 0.35em;
    font-size: var(--font-size-14);
    line-height: 1.4;
}

.facility-section-machine-list-toggle {
    background-color: #fff;
    position: relative;
    background-color: transparent;
    display: block;
    width: 397px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: var(--space-48);
    padding: 1em;
    color: var(--color-text);
    border: 1px solid;
    font-size: var(--font-size-18);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        transform: scale(1.05);
    }

    &:not(.active)::before {
        content: 'もっと見る';
    }
    &::after {
        position: absolute;
        right: 1em;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        content: '';
        width: 0.75em;
        height: 0.75em;
        background: 50% 50% / contain no-repeat;
    }
    &:not(.active)::after {
        background-image: url(../img/facility/facility-section-machine-list-toggle-after.svg);
    }
    &.active {
        &::before {
            content: '閉じる';
        }
        &::after {
            background-image: url(../img/facility/facility-section-machine-list-toggle-after-active.svg);
        }
    }
}

/* ========================================== */
/* ジムエリア */
/* ========================================== */

#gym {
    --color-primary: var(--color-gym);
}

.gym-section-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-28);

    @media (width <= 1024px) {
        gap: var(--space-16);
    }
    @media (width <= 640px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-8) 5%;
    }
    @media (width <= 480px) {
        gap: var(--space-8) 3%;
    }
}
.gym-section-nav-btn {
    @media (width <= 640px) {
        width: 30%;
    }
}

/* ========================================== */
/* スタジオエリア */
/* ========================================== */

#studio {
    --color-primary: var(--color-studio);
}

.studio-section-lesson {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.studio-section-lesson-slider {
    .splide__slide {
        padding-top: 0;
    }
}

.primary-btn {
    width: 37.5rem;
    max-width: 100%;
}

/* ========================================== */
/* アクアエリア */
/* ========================================== */

#aqua {
    --color-primary: var(--color-aqua);
}

/* ========================================== */
/* リラックスエリア */
/* ========================================== */

#relax {
    --color-primary: var(--color-relax);
}