main {
    padding-top: 80px;
    width: 100%;
    overflow: hidden;


    @media(width<=768px) {
        padding-top: 52px;
    }

    section {
        margin: 0 auto;
        max-width: 1250px;
    }

    section[id] {
        scroll-margin-top: 96px;

        @media(width<=768px) {
            scroll-margin-top: 68px;
        }
    }

    section.hero {
        max-width: none;
        scroll-margin-top: 0;

        .layout {
            position: relative;
            min-height: min(760px, calc(100dvh - 80px));
            background-color: rgb(20, 22, 23);

            @media(width<=768px) {
                min-height: 420px;
                height: 58dvh;
            }

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 1;
                background:
                    linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .06) 52%, rgba(0, 0, 0, .16)),
                    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .14));
                pointer-events: none;
            }

            img {
                width: 100%;
                height: min(760px, calc(100dvh - 80px));
                object-fit: cover;
                filter: saturate(1.05) contrast(1.04);

                @media(width<=768px) {
                    height: 58dvh;
                    min-height: 420px;
                }
            }

            .text {
                text-align: center;
                inset: 0;
                margin: auto;
                position: absolute;
                width: fit-content;
                height: fit-content;
                z-index: 2;
                padding: 22px 30px;
                border-radius: 8px;
                background-color: rgba(0, 0, 0, .24);
                backdrop-filter: blur(2px);
                box-shadow: 0 18px 48px rgba(0, 0, 0, .22);

                @media(width<=768px) {
                    width: calc(100% - 32px);
                    padding: 18px 16px;
                }

                h1 {
                    color: rgb(0, 162, 234);
                    font-size: 42px;
                    font-weight: bold;
                    line-height: 1.35;
                    text-shadow:
                        0 2px 0 rgba(0, 0, 0, .80),
                        0 6px 20px rgba(0, 0, 0, .72);

                    @media(width<=768px) {
                        font-size: 28px;
                    }

                    .lead {
                        font-size: 28px;
                        letter-spacing: 0;
                        color: rgb(255, 255, 255);

                        @media(width<=768px) {
                            font-size: 20px;
                        }
                    }
                }

                p {
                    padding-top: 16px;
                    color: rgb(255, 255, 255);
                    font-size: 18px;
                    font-weight: bold;
                    text-shadow:
                        0 2px 0 rgba(0, 0, 0, .82),
                        0 5px 18px rgba(0, 0, 0, .72);

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

                    br {
                        display: none;

                        @media(width<=768px) {
                            display: inline-block;
                        }
                    }
                }

                .hero-btn {
                    width: fit-content;
                    min-width: 220px;
                    margin: 24px auto 0;
                    padding: 14px 48px 14px 28px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 4px;
                    background-image: linear-gradient(90deg, rgba(61, 200, 194, 1), rgba(61, 156, 194, 1) 50%, rgba(197, 125, 233, 1));
                    color: rgb(255, 255, 255);
                    font-size: 17px;
                    font-weight: bold;
                    line-height: 1.4;
                    position: relative;
                    box-shadow: 0 14px 30px rgba(0, 162, 234, .28);
                    transition: transform .2s ease, box-shadow .2s ease;

                    &::after {
                        content: "＞";
                        width: 24px;
                        height: 24px;
                        border-radius: 99px;
                        background-color: rgba(41, 41, 41, .88);
                        display: grid;
                        place-items: center;
                        position: absolute;
                        right: 14px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 13px;
                    }

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 18px 36px rgba(0, 162, 234, .34);
                    }

                    @media(width<=768px) {
                        min-width: 0;
                        width: 100%;
                        margin-top: 20px;
                        padding: 13px 44px 13px 20px;
                        font-size: 16px;
                    }
                }
            }
        }
    }

    section.news {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.news-title {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;

            @media(width<=768px) {
                font-size: 22px;
            }

            &::before {
                content: "";
                width: 100%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 100%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }


        }

        .wrapper {
            padding: 8px 20px;
            width: 80%;
            margin: 32px auto;
            border-radius: 8px;
            background-color: rgb(37, 39, 40);
            border: 1px solid rgba(240, 248, 255, .14);
            box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

            @media(width<=768px) {
                width: 100%;
                margin: 24px auto;
            }

            .outer {
                a {
                    display: flex;
                    align-items: center;
                    padding: 16px 8px;
                    column-gap: 16px;
                    transition: color .2s ease, transform .2s ease;

                    &:hover {
                        color: rgb(139, 214, 248);
                        transform: translateX(4px);
                    }

                    @media(width<=768px) {
                        display: grid;
                        row-gap: 8px;
                    }

                    &:nth-child(1) {
                        border-bottom: solid 1px rgba(240, 248, 255, .14);
                    }

                    &:nth-child(2) {
                        border-bottom: solid 1px rgba(240, 248, 255, .14);
                    }

                    .inner {
                        display: flex;
                        column-gap: 16px;
                        align-items: center;

                        span {
                            border-radius: 4px;
                            padding: 4px 10px;
                            background-color: rgba(0, 162, 234, .18);
                            border: 1px solid rgba(0, 162, 234, .36);
                            color: rgb(151, 222, 255);
                            font-size: 13px;

                            @media(width<=768px) {
                                padding: 4px;

                            }
                        }
                    }
                }
            }
        }
    }

    section.instagram {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .container {
            width: 80%;
            margin: 32px auto 0;
            padding: 24px;
            border-radius: 8px;
            background-color: rgb(37, 39, 40);
            border: 1px solid rgba(240, 248, 255, .14);
            box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

            @media(width<=768px) {
                width: 100%;
                padding: 12px;
                margin-top: 24px;
            }

            .insta-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;

                @media(width<=768px) {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 8px;
                }

                a {
                    position: relative;
                    display: block;
                    overflow: hidden;
                    border-radius: 6px;
                    aspect-ratio: 1 / 1;
                    background-color: rgb(28, 30, 31);

                    &::after {
                        content: "Instagram";
                        position: absolute;
                        inset: auto 10px 10px;
                        padding: 5px 8px;
                        border-radius: 4px;
                        background-color: rgba(0, 0, 0, .58);
                        color: rgb(255, 255, 255);
                        font-size: 12px;
                        font-weight: bold;
                        text-align: center;
                        opacity: 0;
                        transform: translateY(6px);
                        transition: opacity .2s ease, transform .2s ease;

                        @media(width<=768px) {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }

                    &:hover::after {
                        opacity: 1;
                        transform: translateY(0);
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform .3s ease, filter .3s ease;
                    }

                    &:hover img {
                        transform: scale(1.05);
                        filter: brightness(.86);
                    }
                }
            }
        }
    }

    section.service {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;


            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .wrapper {
            margin: 32px auto;
            display: grid;
            justify-content: center;
            grid-template-columns: 42% 42%;
            grid-template-rows: 1fr 1fr;
            column-gap: 56px;
            row-gap: 40px;

            @media(width<=1000px) {
                grid-template-columns: 48% 48%;
                column-gap: 24px;

            }

            @media(width<=768px) {
                grid-template-columns: auto;
                grid-template-rows: 1fr;
                margin: 24px auto;
            }

            .outer {
                padding: 32px;
                background-color: rgb(37, 39, 40);
                border: 1px solid rgba(240, 248, 255, .14);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                row-gap: 16px;
                box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

                br {
                    display: none;
                }

                @media(width<=768px) {
                    padding: 24px 16px;

                    br {
                        display: inline-block;
                    }
                }

                h3 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 24px 32px;
                    min-height: 64px;
                    max-height: 64px;
                    font-weight: bold;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 4px;
                    background-color: rgba(0, 162, 234, .16);
                    border: 1px solid rgba(0, 162, 234, .34);
                    color: rgb(207, 240, 255);

                }

                img {
                    width: 100%;
                    aspect-ratio: 4 / 3;
                    object-fit: cover;
                    border-radius: 6px;
                    background-color: rgb(28, 30, 31);
                }

                .service-table {
                    width: 98%;
                    margin: 32px auto 16px;
                    border-collapse: separate;
                    border-spacing: 0;
                    overflow: hidden;
                    border-radius: 8px;
                    font-size: 15px;
                    color: rgb(21, 21, 21);

                    @media(width<=768px) {
                        width: 100%;
                    }

                    thead {
                        background-color: rgb(117, 187, 255);

                        tr {
                            th {
                                border: solid 1px rgba(41, 41, 41, .72);
                                padding: 1em;
                                text-align: center;
                            }
                        }
                    }

                    tbody {
                        text-align: center;
                        background-color: rgb(117, 187, 255);
                        white-space: nowrap;

                        tr {
                            th {
                                font-weight: bold;
                                border: solid 1px rgba(41, 41, 41, .72);
                                padding: 1em .4em;
                                text-align: center;
                            }

                            td {
                                background-color: rgb(197, 231, 255);
                                border: solid 1px rgba(41, 41, 41, .72);
                                padding: 1em;
                            }
                        }
                    }
                }

                ul {
                    li {
                        font-size: 15px;
                        margin-left: 16px;
                        list-style-type: disc;
                        color: rgba(240, 248, 255, .74);
                    }
                }

            }
        }
    }

    section.price {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .container {
            display: grid;
            row-gap: 24px;

            .wrapper {
                width: 90%;
                margin: 32px auto 0;
                background-color: rgb(37, 39, 40);
                padding: 24px;
                border-radius: 8px;
                border: 1px solid rgba(240, 248, 255, .14);
                box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

                @media(width<=768px) {
                    width: 100%;
                    padding: 20px 16px;
                }

                h3 {
                    font-size: 18px;
                    font-weight: bold;
                    border-bottom: solid 1px rgba(240, 248, 255, .18);
                    padding: 18px 18px 18px 24px;
                    gap: 12px;
                    position: relative;
                    display: flex;
                    align-items: center;

                    @media(width<=768px) {
                        padding: 18px 18px 18px 20px;
                        gap: 10px;
                    }

                    &::before {
                        content: "";
                        width: 5px;
                        height: 28px;
                        background-image: linear-gradient(180deg, rgb(0, 162, 234), rgb(139, 214, 248));
                        box-shadow: 0 0 18px rgba(0, 162, 234, .34);
                        position: relative;
                        top: 0;
                        left: 0;
                        flex-shrink: 0;
                        border-radius: 99px;

                        @media(width<=768px) {
                            width: 4px;
                            height: 24px;
                            left: 0;
                        }
                    }
                }

                .price-table {
                    width: 98%;
                    margin: 32px auto 16px;
                    border-collapse: separate;
                    border-spacing: 0;
                    overflow: hidden;
                    border-radius: 8px;
                    font-size: 15px;
                    color: rgb(21, 21, 21);

                    @media(width<=768px) {
                        width: 100%;
                    }

                    thead {
                        background-color: rgb(0, 162, 234);

                        tr {
                            th {
                                border: solid 1px rgba(41, 41, 41, .72);
                                padding: 1em;
                                text-align: center;
                            }
                        }
                    }

                    tbody {
                        font-weight: bold;
                        text-align: center;
                        background-color: rgb(117, 187, 255);

                        tr {
                            td {
                                border: solid 1px rgba(41, 41, 41, .72);
                                padding: 1em;
                            }
                        }
                    }
                }

                ul {
                    li {
                        font-size: 15px;
                        padding-left: 38px;
                        position: relative;
                        display: flex;
                        align-items: flex-start;

                        @media(width<=768px) {
                            padding-left: 30px;
                        }

                        &::before {
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-radius: 99px;
                            background-color: rgb(0, 162, 234);
                            position: absolute;
                            top: 8px;
                            left: 16px;

                            @media(width<=768px) {
                                left: 6px;
                            }
                        }
                    }
                }
            }
        }
    }

    section.trainer {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .container {
            width: 90%;
            margin: 0 auto;
            display: grid;
            row-gap: 24px;

            @media(width<=768px) {
                width: 100%;
            }

            .wrapper {
                padding: 32px;
                background-color: rgb(48, 55, 55);
                border: 1px solid rgba(240, 248, 255, .14);
                border-radius: 8px;
                display: grid;
                row-gap: 16px;
                box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

                @media(width<=768px) {
                    padding: 32px 16px;
                }

                .img-box {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    place-items: center;
                    column-gap: 8px;

                    img {
                        width: 100%;
                        aspect-ratio: 4 / 3;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }

                h3 {
                    font-size: 20px;
                    font-weight: bold;
                    color: rgb(151, 222, 255);
                }

                .detail-box {
                    font-size: 15px;

                    display: grid;
                    grid-template-columns: 68px 1fr;

                    dt,
                    dd {
                        border-bottom: solid 1px rgba(240, 248, 255, .16);
                        padding: 8px;
                    }
                }

                .text-box {
                    color: rgba(240, 248, 255, .74);

                    span {
                        color: rgb(151, 222, 255);
                        font-weight: bold;
                    }
                }
            }
        }
    }

    section.review {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 16px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .google-logo-box {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;

            img {
                width: 120px;
                height: auto;
                object-fit: contain;
            }
        }

        .container {
            width: 90%;
            margin: 32px auto 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;

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

            @media(width<=768px) {
                width: 100%;
                margin-top: 24px;
            }

            .review-card {
                padding: 24px;
                border-radius: 8px;
                background-color: rgb(37, 39, 40);
                border: 1px solid rgba(240, 248, 255, .14);
                box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
                display: flex;
                flex-direction: column;
                gap: 16px;

                @media(width<=768px) {
                    padding: 22px 18px;
                }

                .review-meta {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;

                    .star {
                        &::before {
                            content: "★★★★★";
                            color: rgb(255, 215, 0);
                            font-size: 14px;
                        }
                    }

                    span {
                        padding: 4px 10px;
                        border-radius: 4px;
                        background-color: rgba(0, 162, 234, .16);
                        border: 1px solid rgba(0, 162, 234, .34);
                        color: rgb(151, 222, 255);
                        font-size: 13px;
                        font-weight: bold;
                    }
                }

                p {
                    color: rgba(240, 248, 255, .78);
                    font-size: 15px;
                }
            }
        }
    }

    section.faq {
        padding: 56px 24px;

        @media(width<=768px) {
            padding: 40px 24px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .container {
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;

            @media(width<=768px) {
                width: 100%;
            }

            details {
                position: relative;
                color: rgb(240, 248, 255);
                border-radius: 8px;
                background-color: rgb(37, 39, 40);
                border: 1px solid rgba(240, 248, 255, .14);
                box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

                summary {
                    cursor: pointer;
                    padding: 16px 28px 16px 40px;
                    list-style: none;
                    display: flex;
                    align-items: center;

                    &::-webkit-details-marker {
                        display: none;
                    }

                    &::before {
                        content: "Q.";
                        left: 16px;
                        position: absolute;
                        color: rgb(90, 147, 221);
                        font-weight: bold;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        right: 16px;
                        transform: translateY(-25%) rotate(45deg);
                        width: 7px;
                        height: 7px;
                        margin-left: 10px;
                        border-bottom: 3px solid rgba(240, 248, 255, .72);
                        border-right: 3px solid rgba(240, 248, 255, .72);
                        transition: transform .5s;
                    }
                }

                &[open] {
                    summary::after {
                        transform: translateY(-50%) rotate(225deg);
                    }
                }

                p {
                    padding: 16px 16px 16px 40px;
                    color: rgba(240, 248, 255, .74);

                    &::before {
                        content: "A.";
                        left: 16px;
                        position: absolute;
                        color: rgb(221, 118, 90);
                        font-weight: bold;
                    }

                    a {
                        color: rgb(90, 147, 221);
                        text-decoration: underline;
                    }
                }

                .gallery {
                    padding: 0 16px 16px 40px;

                    img {
                        display: block;
                        width: min(100%, 360px);
                        height: auto;
                        border-radius: 8px;
                        cursor: pointer;
                    }
                }

                .modal {
                    position: fixed;
                    inset: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0, 0, 0, .8);
                    z-index: 1000;

                    opacity: 0;
                    visibility: hidden;

                    transition: .3s;

                    &.active {
                        opacity: 1;
                        visibility: visible;
                    }

                    .modal-img {
                        width: min(90%, 1000px);
                        max-height: 90vh;
                        object-fit: contain;
                    }
                }
            }

        }
    }

    section.access {
        padding: 56px 24px 72px;

        @media(width<=768px) {
            padding: 40px 24px;
        }

        h2.section-lead {
            text-align: center;
            padding: 1em;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0;
            text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media(width<=768px) {
                font-size: 20px;
            }

            &::before {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: -24px;
                background-color: rgb(0, 162, 234);
            }

            &::after {
                content: "";
                width: 50%;
                height: 3px;
                position: relative;
                top: 4px;
                left: 24px;
                background-color: rgb(0, 162, 234);
            }
        }

        .container {
            background-color: rgb(48, 55, 55);
            padding: 32px;
            border-radius: 8px;
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border: 1px solid rgba(240, 248, 255, .14);
            box-shadow: 0 18px 44px rgba(0, 0, 0, .24);

            @media(width<=768px) {
                width: 100%;
                padding: 32px 16px;
            }

            .access-btn-box {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 8px;
            }

            .trial-btn {
                width: fit-content;
                min-width: 220px;
                padding: 14px 48px 14px 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                background-image: linear-gradient(90deg, rgba(61, 200, 194, 1), rgba(61, 156, 194, 1) 50%, rgba(197, 125, 233, 1));
                color: rgb(255, 255, 255);
                font-size: 16px;
                font-weight: bold;
                line-height: 1.4;
                position: relative;
                box-shadow: 0 14px 30px rgba(0, 162, 234, .28);

                &::after {
                    content: "→";
                    width: 24px;
                    height: 24px;
                    border-radius: 99px;
                    background-color: rgba(41, 41, 41, .88);
                    display: grid;
                    place-items: center;
                    position: absolute;
                    right: 14px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 13px;
                }

                @media(width<=768px) {
                    width: 100%;
                    min-width: 0;
                }
            }

            ul {
                li {
                    margin-bottom: 12px;

                    a {
                        text-decoration: underline;
                        text-underline-offset: 4px;
                    }
                }
            }

            .access-media-row {
                display: grid;
                grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
                gap: 18px;
                align-items: stretch;

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

                .access-photo,
                .map {
                    min-width: 0;
                }

                .access-photo {
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        max-height: 360px;
                        object-fit: contain;
                        border-radius: 8px;
                        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);

                        @media(width<=768px) {
                            height: auto;
                            max-height: none;
                        }
                    }
                }

                .map {
                    iframe {
                        display: block;
                        width: 100%;
                        height: 100%;
                        min-height: 300px;
                        border-radius: 8px;
                        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);

                        @media(width<=768px) {
                            height: 300px;
                        }
                    }
                }
            }

            .parking-map {
                margin-top: 28px;

                h3 {
                    margin-bottom: 16px;
                    font-size: 18px;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    &::before,
                    &::after {
                        content: "";
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        background: url("../images/icon-car.png") center / contain no-repeat;
                        flex-shrink: 0;
                    }
                }

                .parking-images {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 18px;
                    align-items: start;

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

                    img {
                        display: block;
                        width: 100%;
                        height: auto;
                        border-radius: 8px;
                        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
                    }
                }
            }

            dl {
                .gym-info {
                    display: flex;

                    dt {
                        width: 80px;
                        font-weight: bold;
                        flex-shrink: 0;
                    }
                }
            }

        }
    }
}