@charset "UTF-8";

body {

    .top-kv .heading .sub,
    .top-kv .heading .main,
    .top-kv .js-infiniteloop,
    .g-header {
        transition-property: opacity, transform;
        transition-duration: .75s;
        transition-timing-function: var(--ttf-eo-expo);
        opacity: 0;

        &.is-in {
            opacity: 1;
            transform: none
        }
    }

    .top-kv .heading .sub,
    .top-kv .heading .main {
        transform: translate(-10rem)
    }

    .g-header {
        transform: translateY(-10rem)
    }

    .top-kv .js-infiniteloop {
        transition-duration: 1.15s;

        &.is-reverse {
            transform: translate(-40rem)
        }

        &:not(.is-reverse) {
            transform: translate(40rem)
        }
    }
}

@media(width<=767px) {
    body {

        .top-kv .heading .sub,
        .top-kv .heading .main,
        .top-kv .js-infiniteloop,
        .g-header {
            transition-property: opacity;
            transform: none
        }

        .top-kv .js-infiniteloop {
            transition-duration: .65s
        }
    }
}

.top-kv {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;

    @media(width>767px) {
        padding-bottom: 1.2rem;
        min-height: 800px;
        height: 100dvh
    }

    @media(width<=767px) {
        height: 100svh;
        min-height: 112.6rem
    }

    .heading {
        display: grid;
        gap: .8rem;
        margin-bottom: 7.2rem;

        @media(width<=767px) {
            gap: 9.2rem;
            padding-left: 6rem;
            margin-block: auto;
            padding-top: 20rem
        }

        .sub {
            font-size: 2.4rem;
            line-height: 2.125;

            @media(width<=767px) {
                font-size: 3.2rem;
                line-height: 1.6875
            }
        }

        .main {
            font-size: 4rem;
            line-height: calc(51/40);
            font-weight: 700;

            @media(width<=767px) {
                font-size: 5.3rem;
                line-height: calc(87/53)
            }
        }
    }

    .js-infiniteloop {
        flex-shrink: 0;
        font-size: 16.2rem;
        line-height: 1.3;
        --loop-duration: 60s;
        pointer-events: none;

        @media(width<=767px) {
            font-size: 18.4rem
        }

        +.js-infiniteloop {
            margin-top: -.15lh
        }

        .js-infiniteloop-item {
            >p {
                display: flex;
                align-items: baseline;

                >* {
                    flex-shrink: 0;
                    margin-right: 2.4rem
                }

                span {
                    color: var(--cc-blue-A);
                    opacity: .1
                }

                img {
                    border-radius: 100px
                }
            }
        }
    }
}

.top-news {
    padding-block: 10rem 7.2rem;
    overflow: hidden;

    @media(width<=767px) {
        padding-block: 8rem 12rem
    }

    >.inner {
        @media(width>767px) {
            display: grid;
            grid-template-columns: 19rem 1fr;
            column-gap: 10rem;
            padding-left: 12rem
        }
    }

    .text {
        display: flex;

        @media(width>767px) {
            flex-direction: column
        }

        @media(width<=767px) {
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 4.8rem
        }

        .l-heading-A {
            .en {
                @media(width>767px) {
                    font-size: 5.2rem
                }

                @media(width<=767px) {
                    font-size: 7.6rem
                }
            }
        }

        .l-button-A {
            width: 19rem;
            height: 5rem;

            @media(width>767px) {
                margin-top: auto
            }

            @media(width<=767px) {
                margin-right: 0;
                width: 27.5rem;
                height: 7rem;
                font-size: 2.4rem
            }

            &:after {
                right: 1.6rem
            }
        }
    }

    .news_list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 5rem;

        @media(width<=767px) {
            display: flex;
            column-gap: 6.4rem
        }
    }

    .l-news_item {
        @media(width<=767px) {
            flex-shrink: 0;
            width: 39.4rem
        }
    }
}

.top-about {
    padding-block: 10rem;

    @media(width<=767px) {
        padding-block: 15rem 10rem
    }

    .l-heading-A {
        margin-bottom: 5rem;

        @media(width<=767px) {
            margin-bottom: 8rem
        }
    }

    .about-text {
        font-weight: 700;

        @media(width>767px) {
            margin-left: auto;
            width: 86.4rem
        }

        .text-catch {
            margin-bottom: 3.6rem;
            font-size: 4rem;
            line-height: 1.5;

            @media(width<=767px) {
                margin-bottom: 5.2rem;
                font-size: 4.6rem;
                line-height: calc(66/46)
            }
        }

        .text-desc {
            @media(width>767px) {
                font-size: 2rem;
                line-height: 1.8
            }

            +.text-desc {
                margin-top: 1lh
            }
        }
    }

    .about-strength {
        margin-top: 11rem;
        background-color: rgb(from var(--cc-white-A) r g b / .8);

        @media(width>767px) {
            padding: 7.6rem 9.2rem
        }

        @media(width<=767px) {
            margin-top: 8rem;
            padding-block: 8.8rem 10rem
        }

        .strength-heading {
            margin-bottom: 4.8rem;
            text-align: center;
            font-weight: 700;
            font-size: 2.6rem;
            line-height: calc(45/26);

            @media(width<=767px) {
                font-size: 3.6rem;
                line-height: calc(58/36)
            }
        }

        .strength-list {
            display: grid;

            @media(width>767px) {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 7.2rem
            }

            @media(width<=767px) {
                row-gap: 10rem
            }
        }

        .strength_item {
            .item-heading {
                img {
                    margin-inline: auto
                }

                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-block: 3.2rem 2rem;
                    border-radius: 100px;
                    height: 5rem;
                    background-color: #ccedf7;
                    font-size: 2rem;
                    text-align: center;

                    @media(width<=767px) {
                        margin-block: 4.8rem 2.8rem;
                        height: 8.8rem;
                        font-size: 3.6rem
                    }
                }
            }
        }
    }

    .js-infiniteloop {
        --loop-duration: 40s;
        margin-top: 5.2rem;

        @media(width<=767px) {
            margin-top: 10rem
        }
    }

    .js-infiniteloop-item {
        img {
            padding-right: 8rem
        }
    }
}

.top-business {
    padding-top: 10rem;

    @media(width<=767px) {
        padding-top: 14rem
    }

    .l-heading-A {
        margin-bottom: 7.2rem;

        @media(width<=767px) {
            margin-bottom: 5rem
        }
    }

    .business-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        @media(width>767px) {
            gap: 6rem
        }

        @media(width<=767px) {
            gap: 2rem
        }

        .l-button-A {
            width: 100%;

            @media(width<=767px) {
                padding-right: 2rem;

                &:after {
                    right: 2.2rem
                }
            }
        }
    }

    .business-section {
        padding-top: 8rem;

        @media(width<=767px) {
            padding-top: 14rem
        }

        .section_header {
            position: relative;
            padding-bottom: 3.2rem
        }

        .header_heading {
            margin-bottom: 3.6rem;
            font-size: 5rem;
            line-height: 1;
            font-weight: 700;

            @media(width<=767px) {
                margin-bottom: 6rem;
                font-size: 6rem
            }
        }

        .header_catch {
            margin-bottom: 2rem;
            font-size: 2.8rem;
            line-height: 1.5;
            font-weight: 700;
            color: var(--cc-blue-A);

            @media(width<=767px) {
                margin-bottom: 6.4rem;
                font-size: 4.2rem;
                line-height: calc(61/42)
            }
        }

        .header_desc {
            +.header_desc {
                margin-top: 1lh
            }
        }

        .header_img {
            position: absolute;

            @media(width>767px) {
                right: 2rem;
                bottom: 0
            }

            @media(width<=767px) {
                right: 4rem;
                top: 0;

                &.-realestate {
                    top: 2.4rem
                }

                &.-parking {
                    top: -3.2rem
                }
            }
        }
    }

    .realestate-service {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 8rem;
        position: relative;

        .service-heading {
            display: grid;
            text-align: center;
            margin-top: -27rem;
            gap: .8rem;
            position: absolute;
            line-height: 1;

            @media(width<=767px) {
                margin-top: -20rem
            }

            .en {
                font-size: 4.2rem;
                letter-spacing: .05em;
                color: var(--cc-blue-A);

                @media(width<=767px) {
                    font-size: 3.4rem
                }
            }

            .ja {
                font-size: 2.5rem;
                font-weight: 700;

                @media(width<=767px) {
                    font-size: 2.4rem;
                    line-height: 1.25
                }
            }
        }

        .sabi_link {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -33.5rem;
            margin-left: -53.1rem;
            padding-bottom: .1em;
            border-radius: 100px;
            width: 13.4rem;
            height: 3rem;
            color: var(--cc-blue-A);
            background-color: #fff;
            position: absolute;

            @media(width<=767px) {
                margin-top: -25.8rem;
                margin-left: -34rem;
                width: 11.8rem;
                height: 3.2rem;
                font-size: 1.9rem
            }

            &:after {
                margin-inline: auto;
                background-color: #fff;
                position: absolute;
                inset-inline: 0;
                top: calc(100% + 1.4rem);

                @media(width<=767px) {
                    width: 2rem;
                    top: calc(100% + 1.2rem)
                }
            }
        }
    }

    .parking-service {
        display: grid;
        padding-top: 8.8rem;

        @media(width>767px) {
            grid-template-columns: repeat(4, 1fr);
            gap: 5rem 4rem
        }

        @media(width<=767px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 7.2rem 3.2rem
        }

        .service_item {
            display: flex;
            flex-direction: column;

            &:nth-child(odd) {
                .service_heading {
                    background-color: #dcf0f1
                }
            }

            &:nth-child(2n) {
                .service_heading {
                    background-color: #ccedf7
                }
            }
        }

        .service_heading {
            display: flex;
            align-items: center;
            margin-bottom: 1.6rem;
            border-radius: var(--radius-C);
            font-size: 1.8rem;
            line-height: 1.5;
            font-weight: 700;
            position: relative;

            @media(width>767px) {
                gap: 2rem;
                padding-left: 1.6rem;
                height: 8.8rem
            }

            @media(width<=767px) {
                justify-content: center;
                flex-direction: column;
                gap: .4rem;
                margin-bottom: .8rem;
                padding-block: 2rem;
                font-size: 3.2rem;
                text-align: center;
                line-height: 1.25;
                margin-bottom: 2.4rem;

                &.-sp_r2 {
                    min-height: 20rem
                }
            }

            .link {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                padding-bottom: 1.2rem;
                width: 8.2rem;
                height: auto;
                aspect-ratio: 1/1;
                font-size: 1.6rem;
                background-color: var(--cc-blue-A);
                color: #fff;
                position: absolute;
                top: -4.4rem;
                right: -2.8rem;

                @media(width<=767px) {
                    width: 9.8rem;
                    font-size: 2.3rem
                }

                &:after {
                    position: absolute;
                    background-color: #fff;
                    bottom: 1.6rem;

                    @media(width<=767px) {
                        width: 2.8rem
                    }
                }
            }
        }

        .service_desc {
            flex-shrink: 0;
            line-height: 1.75;

            @media(width<=767px) {
                line-height: calc(38/24)
            }
        }
    }

    .sublease-heading {
        margin-bottom: 3.2rem;
        font-size: 2.8rem;
        line-height: 1.35;
        font-weight: 700;
        color: var(--cc-blue-A);
        text-align: center;

        @media(width<=767px) {
            font-size: 3.2rem
        }
    }

    .sublease_contents {
        display: grid;

        @media(width>767px) {
            grid-template-columns: 1fr 1fr;
            gap: 2rem
        }

        @media(width<=767px) {
            gap: 3.2rem
        }
    }

    .sublease_contents-item {
        >.inner {
            border-radius: 1.2rem;
            padding-block: 4.8rem;
            background-color: #fff;
            text-align: center;

            @media(width<=767px) {
                padding-block: 5.6rem
            }
        }

        .heading {
            margin-bottom: 2rem;
            font-size: 2.4rem;
            font-weight: 700;
            line-height: calc(31/24);
            color: var(--cc-blue-A);

            @media(width<=767px) {
                margin-bottom: 2.8rem;
                font-size: 2.8rem
            }
        }

        .desc {
            margin-bottom: 4rem;
            font-size: 1.8rem;
            font-weight: 700;
            line-height: calc(28/18);

            @media(width<=767px) {
                font-size: 2.2rem
            }
        }

        .img {
            display: flex;
            justify-content: center
        }

        .note {
            margin-top: 1.6rem;
            font-size: 1.55rem;
            line-height: 1.8;

            @media(width<=767px) {
                font-size: 2rem
            }
        }
    }

    .business-example {
        padding-block: 10rem;
        overflow: hidden;

        @media(width<=767px) {
            padding-block: 12.4rem
        }

        .example-heading {
            margin-bottom: 4rem;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1;
            text-align: center;
            margin-bottom: 4.8rem;

            @media(width<=767px) {
                font-size: 3.8rem;
                margin-bottom: 4.8rem
            }
        }

        .js-sp_carousel {
            overflow: visible;

            .splide__track {
                overflow: visible
            }

            .splide__list {
                @media(width>767px) {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 1.2rem 4.5rem
                }
            }

            .splide__slide {
                .img {
                    --r: .8rem;
                    position: relative;

                    img {
                        border-radius: var(--r)
                    }

                    .type {
                        padding-inline: 1.5rem;
                        border-radius: 0 var(--r) 0 var(--r);
                        font-size: 1.3rem;
                        position: absolute;
                        left: 0;
                        bottom: 0;

                        @media(width<=767px) {
                            padding-inline: 2rem;
                            font-size: 2.6rem
                        }
                    }
                }

                .name {
                    margin-top: .8rem;
                    margin-left: .4rem;

                    @media(width>767px) {
                        line-height: 1.625;
                        min-height: 2lh
                    }

                    @media(width<=767px) {
                        margin-top: .8rem;
                        font-size: 2.8rem
                    }
                }
            }

            .splide__arrows {
                @media(width>767px) {
                    display: none
                }
            }

            .js-splide_arrow-A {
                position: absolute;
                top: 13rem;
                z-index: 1;

                &.is-prev {
                    left: -2rem
                }

                &.is-next {
                    right: -2rem
                }
            }
        }
    }

    .business-bottom_heading {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2.4rem;
        border-radius: 100px;
        height: 6rem;
        color: #fff;
        text-align: center;
        background-color: var(--cc-blue-C);
        font-size: 2.8rem;
        line-height: 1.5;
        font-weight: 700;

        @media(width<=767px) {
            margin-bottom: 3.2rem;
            height: 7rem
        }
    }

    .realestate-solpro {
        padding-block: 10rem 14rem;

        @media(width<=767px) {
            padding-block: 12rem 16rem
        }

        .solpro_logo {
            display: flex;
            justify-content: center;
            margin-bottom: 2.8rem;
            mix-blend-mode: darken;

            @media(width<=767px) {
                margin-bottom: 4rem
            }
        }

        .solpro_catch {
            margin-bottom: 1.6rem;
            text-align: center;
            font-size: 3.4rem;
            line-height: calc(49/34);
            font-weight: 700;

            @media(width<=767px) {
                margin-bottom: 3.6rem;
                font-size: 3.6rem;
                line-height: calc(58/36)
            }
        }

        .solpro_desc {
            text-align: center
        }

        .solpro-features {
            display: grid;
            margin-top: 4.8rem;

            @media(width>767px) {
                grid-template-columns: repeat(4, 1fr);
                gap: 4rem
            }

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

            .feature_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-block: 2.4rem;
                border-radius: 2rem;
                background-color: #fff;
                text-align: center;

                @media(width<=767px) {
                    padding-block: 3.6rem
                }

                .feature_heading {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 1.2rem;
                    font-size: 1.8rem;
                    line-height: 1;
                    font-weight: 700;

                    @media(width>767px) {
                        gap: 2rem
                    }

                    @media(width<=767px) {
                        font-size: 3.2rem;
                        gap: 2.4rem;
                        margin-bottom: 1.6rem
                    }
                }

                .feature_desc {
                    @media(width>767px) {
                        line-height: 1.625
                    }

                    @media(width<=767px) {
                        font-size: 2.8rem;
                        line-height: 1.5
                    }
                }
            }
        }

        .solpro-step {
            margin-top: 6rem;

            @media(width<=767px) {
                margin-top: 8rem
            }

            @media(width<=767px) {
                margin-bottom: 3.2rem
            }

            .step_heading {
                display: flex;
                font-weight: 700;
                margin-bottom: 3.2rem;

                @media(width>767px) {
                    margin-inline: auto;
                    width: fit-content;
                    align-items: center
                }

                @media(width<=767px) {
                    justify-content: center;
                    margin-bottom: 4rem
                }

                .tag {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 1.2rem;
                    border-radius: 50%;
                    width: 7.5rem;
                    height: 7.5rem;
                    background-color: var(--cc-blue-C);
                    color: #fff;
                    font-size: 2.6rem;
                    letter-spacing: .1em;
                    text-align: center;

                    @media(width<=767px) {
                        grid-row: 1/2;
                        margin-right: 1.2rem;
                        width: 12.8rem;
                        height: 12.8rem;
                        font-size: 4.4rem
                    }
                }

                .text {
                    display: flex;
                    align-items: baseline;
                    font-size: 2.7rem;

                    @media(width<=767px) {
                        flex-direction: column;
                        justify-content: center;
                        font-size: 3.2rem
                    }

                    .number {
                        color: var(--cc-blue-C);
                        font-size: 3.2rem;
                        line-height: 1;
                        letter-spacing: -.1em;

                        @media(width<=767px) {
                            font-size: 4.6rem
                        }

                        .n {
                            margin-right: .1em;
                            font-size: 5.5rem;

                            @media(width<=767px) {
                                margin-left: .15em;
                                font-size: 8rem
                            }
                        }
                    }
                }
            }

            .step_list {
                display: grid;
                gap: 1.6rem;

                @media(width<=767px) {
                    gap: 2rem
                }
            }

            .step-item {
                border: 1px solid var(--cc-blue-C);
                background-color: #fff;

                @media(width>767px) {
                    display: grid;
                    align-items: center;
                    grid-template-columns: 36.4rem 1fr;
                    border-radius: 100px;
                    height: 9rem;
                    padding-left: 4.8rem
                }

                @media(width<=767px) {
                    border-radius: 1.2rem;
                    padding: 3.6rem 4rem
                }

                .heading {
                    display: flex;
                    align-items: center;
                    line-height: 1;

                    @media(width<=767px) {
                        margin-bottom: 3.2rem
                    }

                    .number {
                        display: flex;
                        align-items: center;
                        color: var(--cc-blue-C);
                        font-size: 2.8rem;

                        @media(width<=767px) {
                            font-size: 3.8rem
                        }

                        .n {
                            margin-top: -.15em;
                            font-size: 3.7rem;
                            margin-left: .15em;

                            @media(width<=767px) {
                                font-size: 5.4rem
                            }
                        }
                    }

                    .ja {
                        margin-left: 2.4rem;
                        padding-left: 1.6rem;
                        border-left: 1px solid;
                        font-size: 2rem;
                        font-weight: 700;

                        @media(width<=767px) {
                            padding-left: 2rem;
                            font-size: 3.2rem
                        }
                    }
                }

                .desc {
                    @media(width>767px) {
                        font-size: 1.8rem;
                        line-height: 1.5
                    }
                }
            }
        }

        .solpro-example {
            padding-top: 8rem;

            .example_heading {
                margin-bottom: 3.2rem;
                font-weight: 700;
                font-size: 2.8rem;
                line-height: 1;
                letter-spacing: .05em;
                text-align: center;

                @media(width<=767px) {
                    margin-bottom: 4rem;
                    font-size: 3.8rem
                }
            }

            .example_wrap {
                display: grid;

                @media(width>767px) {
                    grid-template-columns: repeat(5, 1fr);
                    gap: 1.2rem
                }

                @media(width<=767px) {
                    gap: 4rem
                }
            }

            .example-list {
                @media(width>767px) {
                    padding: 2rem 1rem 1.5rem;
                    border-radius: 2rem;
                    background-color: #fff
                }

                @media(width<=767px) {
                    position: relative
                }

                .heading {
                    font-weight: 700;

                    @media(width>767px) {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: .8rem;
                        min-height: 2lh;
                        font-size: 1.8rem;
                        line-height: calc(23/18);
                        text-align: center
                    }

                    @media(width<=767px) {
                        font-size: 2.8rem;
                        line-height: 1;
                        position: absolute;
                        top: 4.5rem;
                        left: 4.5rem;
                        z-index: 5
                    }
                }

                .splide__track {
                    @media(width<=767px) {
                        overflow: visible
                    }
                }

                .splide__list {
                    @media(width>767px) {
                        display: grid;
                        gap: 2.4rem
                    }

                    @media(width<=767px) {
                        border-radius: 2rem;
                        background-color: #fff
                    }
                }

                .splide__slide {
                    position: relative;

                    @media(width<=767px) {
                        box-sizing: content-box;
                        padding: 10.8rem 4.5rem 4.5rem;
                        width: 32.4rem;

                        &:last-child {
                            margin-right: 0 !important
                        }
                    }

                    &:not(:first-child) {
                        &:before {
                            content: "";
                            width: 1.5rem;
                            height: 1.5rem;
                            border-radius: .3rem;
                            background-color: #83ccd2;
                            transform: rotate(45deg);
                            position: absolute;

                            @media(width>767px) {
                                margin-inline: auto;
                                inset-inline: 0;
                                top: -2.45rem;
                                clip-path: polygon(100% 0, 100% 100%, 0 100%)
                            }

                            @media(width<=767px) {
                                margin-block: auto;
                                inset-block: 0 -6.3rem;
                                left: .3rem;
                                width: 2.6rem;
                                height: 2.6rem;
                                clip-path: polygon(0 0, 100% 0, 100% 100%)
                            }
                        }
                    }

                    .caption {
                        padding: .4rem 1rem;
                        font-size: 1rem;
                        line-height: 1.6;
                        background-color: #fff;
                        position: absolute;
                        left: 0;
                        bottom: 0;

                        @media(width<=767px) {
                            padding: .6rem 1.6rem;
                            font-size: 2rem;
                            left: 4.45rem;
                            bottom: 4.45rem
                        }
                    }
                }

                .splide__arrows {
                    @media(width>767px) {
                        display: none
                    }
                }

                .js-splide_arrow-A {
                    position: absolute;
                    top: 18.8rem;
                    z-index: 10;

                    &.is-prev {
                        left: -2rem
                    }

                    &.is-next {
                        left: calc(100vw - 11.8rem)
                    }
                }
            }

            .example-link {
                margin-top: 4.8rem;

                @media(width<=767px) {
                    margin-top: 9.6rem
                }

                .heading {
                    margin-bottom: 2rem;
                    font-size: 2rem;
                    line-height: 1;
                    text-align: center;

                    @media(width<=767px) {
                        margin-bottom: 2.4rem;
                        font-size: 3.2rem
                    }
                }
            }
        }
    }

    .parking-ap {
        padding-block: 10rem 16rem;

        @media(width<=767px) {
            padding-block: 13rem
        }

        .business-bottom_heading {
            margin-bottom: 3.6rem
        }

        .ap_catch {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rem;
            margin-bottom: 3.6rem;

            @media(width<=767px) {
                margin-bottom: 5rem
            }

            &:after {
                transform: scaleX(-1)
            }

            .text {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.6rem;
                font-weight: 700;
                text-align: center;

                .m {
                    font-size: 4.8rem;
                    line-height: calc(52/48);
                    letter-spacing: .12em;

                    @media(width<=767px) {
                        font-size: 5.4rem;
                        line-height: calc(54/59)
                    }
                }

                .s {
                    font-size: 2.8rem;
                    line-height: 1;
                    letter-spacing: .05em;

                    @media(width<=767px) {
                        font-size: 3.2rem;
                        line-height: 1.25
                    }
                }
            }
        }

        .ap_img {
            display: flex;
            justify-content: center;
            margin-bottom: 2.4rem;

            @media(width<=767px) {
                margin-bottom: 3.6rem
            }
        }

        .ap_desc {
            font-size: 1.8rem;
            line-height: calc(31/18);
            text-align: center;
            color: var(--cc-blue-C);

            @media(width>767px) {
                font-weight: 700
            }

            @media(width<=767px) {
                font-size: 3.2rem;
                line-height: 1.5625
            }
        }

        .ap-free {
            margin-top: 4.8rem;

            @media(width<=767px) {
                margin-top: 10rem
            }

            .heading {
                margin-bottom: 2.4rem;
                font-weight: 700;
                font-size: 2.2rem;
                line-height: 1;
                letter-spacing: .05em;
                text-align: center;

                @media(width<=767px) {
                    margin-bottom: 3.2rem;
                    font-size: 3.8rem
                }
            }

            .list {
                display: grid;

                @media(width>767px) {
                    grid-template-columns: repeat(3, 22.8rem);
                    justify-content: center;
                    gap: 2rem
                }

                @media(width<=767px) {
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1rem
                }
            }

            .list-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: .4rem;
                border-radius: 2rem;
                background-color: #fff;
                text-align: center;
                font-weight: 700;
                font-size: 1.8rem;
                line-height: calc(25/18);

                @media(width>767px) {
                    height: auto;
                    aspect-ratio: 1/1
                }

                @media(width<=767px) {
                    gap: .8rem;
                    height: 26.5rem;
                    font-size: 2.4rem;
                    line-height: 1.375
                }
            }
        }

        .ap-consult {
            margin-top: 4.8rem;
            padding: 6rem 8rem;
            background-color: #daf0f1;

            @media(width<=767px) {
                padding: 6rem 4rem 8rem
            }

            .heading {
                margin-bottom: 2.4rem;
                font-weight: 700;
                font-size: 2.2rem;
                line-height: 1;
                letter-spacing: .05em;
                text-align: center;

                @media(width<=767px) {
                    margin-bottom: 3.2rem;
                    line-height: 1.4375;
                    font-size: 3.8rem
                }
            }

            .list {
                display: grid;

                @media(width>767px) {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1.8rem 3rem
                }

                @media(width<=767px) {
                    gap: 1.2rem
                }
            }

            .list-item {
                display: flex;
                align-items: center;
                gap: 1.2rem;
                padding-left: 1.6rem;
                min-height: 6.4rem;
                background-color: #fff;
                font-size: 1.9rem;
                line-height: calc(27/19);
                letter-spacing: .05em;

                @media(width<=767px) {
                    gap: 1.6rem;
                    min-height: 8.2rem;
                    font-size: 2.8rem;
                    line-height: calc(34/28)
                }

                &:before {
                    flex-shrink: 0;
                    background-color: var(--cc-blue-C)
                }
            }

            .l-button-A {
                margin-top: 3.2rem;

                @media(width<=767px) {
                    margin-top: 4rem
                }
            }
        }

        .ap-aside {
            display: grid;
            margin-top: 6rem;
            gap: 4.8rem;

            @media(width>767px) {
                grid-template-columns: repeat(2, 1fr)
            }

            @media(width<=767px) {
                margin-top: 12rem
            }

            .item {
                border: 1px solid var(--cc-blue-C);
                background-color: #fff;

                @media(width>767px) {
                    height: 44rem;
                    padding-top: 6.8rem;
                    padding-inline: 4rem
                }

                @media(width<=767px) {
                    padding-block: 7.2rem 6rem
                }

                .l-button-A {
                    --my-bg: #4dbbaa;
                    margin-top: 2.8rem;

                    @media(width<=767px) {
                        width: calc(100% - 10rem);
                        font-size: 3rem
                    }

                    @media(hover:hover) {
                        &:hover {
                            --my-color: #4dbbaa;
                            --my-bg: #fff
                        }
                    }
                }
            }

            .item_heading {
                display: flex;
                justify-content: center;
                margin-bottom: 4.4rem;

                @media(width>767px) {
                    align-items: center;
                    min-height: 7.8rem
                }

                @media(width<=767px) {
                    margin-bottom: 3.3rem
                }
            }

            .item_desc {
                text-align: center;

                @media(width>767px) {
                    font-size: 1.8rem;
                    line-height: calc(34/18)
                }

                @media(width<=767px) {
                    font-size: 3.2rem;
                    line-height: 1.5625
                }
            }
        }
    }
}

.top-company {
    padding-block: 12rem 10rem;

    @media(width<=767px) {
        padding-block: 18rem 14rem
    }

    .l-heading-A {
        margin-bottom: 5rem;

        @media(width<=767px) {
            margin-bottom: 6rem
        }
    }

    .company-contents {
        display: grid;
        gap: 4rem;

        @media(width<=767px) {
            gap: 10rem
        }
    }

    .contents-item {
        padding-block: 7.2rem;
        background-color: rgb(from var(--cc-white-A) r g b / .8);

        @media(width>767px) {
            padding-inline: 11.6rem
        }

        .item-heading {
            display: flex;
            align-items: baseline;
            gap: 2.4rem;
            margin-bottom: 2.8rem;
            line-height: 1;
            color: var(--cc-blue-A);

            @media(width<=767px) {
                flex-wrap: wrap;
                margin-bottom: 4.8rem
            }

            .ja {
                font-weight: 700;
                font-size: 2.4rem;
                letter-spacing: .05em;

                @media(width<=767px) {
                    font-size: 3.2rem
                }
            }

            .en {
                font-size: 2.4rem;

                @media(width<=767px) {
                    font-size: 2.8rem
                }
            }
        }

        .item-catch {
            margin-bottom: 2.4rem;
            font-weight: 700;
            font-size: 2.8rem;
            line-height: calc(41/28);

            @media(width<=767px) {
                margin-bottom: 3rem;
                font-size: 3.8rem;
                line-height: calc(54/38)
            }
        }

        .item-desc {
            @media(width>767px) {
                font-size: 1.8rem
            }
        }

        .item-values {
            display: grid;
            gap: 3.2rem;

            @media(width<=767px) {
                gap: 10rem;
                margin-top: 10rem
            }
        }

        .value-title {
            display: flex;
            margin-bottom: 1.6rem;
            line-height: 1;

            @media(width>767px) {
                align-items: baseline;
                column-gap: 1.6rem
            }

            @media(width<=767px) {
                flex-direction: column;
                row-gap: 3rem;
                margin-bottom: 4rem
            }

            .en {
                display: flex;
                align-items: baseline;
                column-gap: 2rem;
                color: var(--cc-blue-A);

                @media(width<=767px) {
                    column-gap: 3rem
                }

                .number {
                    font-size: 3.7rem;

                    @media(width<=767px) {
                        font-size: 6.8rem
                    }
                }

                .title {
                    font-size: 3.4rem;

                    @media(width<=767px) {
                        font-size: 6rem
                    }
                }
            }

            .ja {
                font-weight: 700;
                font-size: 1.8rem;
                padding-left: 2.2rem;
                position: relative;

                @media(width<=767px) {
                    margin-left: 1rem;
                    font-size: 3.8rem;
                    padding-left: 4.8rem
                }

                &:before {
                    content: "";
                    height: .9em;
                    border-left: 2px solid;
                    position: absolute;
                    left: 0;
                    bottom: 0
                }
            }
        }

        .value-desc {
            @media(width>767px) {
                font-size: 1.8rem;
                line-height: 1.5
            }
        }
    }
}

.top-profile {
    padding-block: 12rem 18rem;

    @media(width<=767px) {
        padding-block: 14rem 20rem
    }

    .l-heading-A {
        margin-bottom: 4rem
    }

    .profile-table {
        display: grid;
        line-height: 1.875;

        @media(width>767px) {
            grid-template-columns: 30rem 1fr;
            column-gap: 2.6rem
        }

        @media(width<=767px) {
            font-size: 2.4rem;
            line-height: calc(46/24)
        }

        >div {
            @media(width>767px) {
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: subgrid
            }

            @media(width<=767px) {
                padding-block: 2.8rem;
                border-bottom: 1px solid var(--cc-blue-A)
            }

            >:is(dt, dd) {
                @media(width>767px) {
                    padding-block: 1.6rem
                }
            }

            >dt {
                color: var(--cc-blue-A);
                font-weight: 700;

                @media(width>767px) {
                    grid-column: 1/2;
                    border-bottom: 1px solid var(--cc-blue-A)
                }
            }

            >dd {
                @media(width>767px) {
                    grid-column: 2/3;
                    border-bottom: 1px solid #E1E1E1;
                    padding-left: .8rem
                }

                a {
                    color: var(--cc-blue-A);
                    text-decoration: underline;

                    @media(hover:hover) {
                        &:hover {
                            text-decoration: none
                        }
                    }
                }
            }
        }
    }
}

.top-access {
    padding-block: 12rem 18rem;

    @media(width<=767px) {
        padding-block: 14rem 20rem
    }

    .l-heading-A {
        margin-bottom: 4rem;

        @media(width<=767px) {
            margin-bottom: 10rem
        }
    }

    .access-contents {
        display: grid;
        gap: 5rem;
        line-height: 1.625;

        @media(width<=767px) {
            gap: 13rem;
            line-height: calc(46/24)
        }
    }

    .contents-item {
        display: grid;

        @media(width>767px) {
            grid-template-columns: auto auto;
            grid-template-rows: auto 44.5rem;
            align-items: flex-end;
            grid-auto-flow: column;
            justify-content: space-between;
            row-gap: 2rem
        }

        .text {
            @media(width<=767px) {
                margin-bottom: 3.6rem
            }
        }

        .text-place {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: .8rem;
            border-radius: 100px;
            padding: .2rem 2.6rem;
            width: fit-content;
            text-align: center;

            @media(width<=767px) {
                margin-bottom: 2.4rem;
                padding: .4rem 0;
                min-width: 21.6rem
            }
        }

        .map {
            @media(width>767px) {
                grid-row: 2/3;
                grid-column: 1/-1;
                height: 100%
            }

            @media(width<=767px) {
                margin-bottom: 3.6rem;
                height: 35rem
            }

            iframe {
                width: 100%;
                height: 100%
            }
        }

        .l-button-A {
            @media(width>767px) {
                width: 38rem;
                height: 6rem
            }
        }
    }
}

.top-history {
    padding-block: 12rem 17rem;

    @media(width<=767px) {
        padding-block: 14rem 16rem
    }

    .l-heading-A {
        margin-bottom: 4rem
    }

    .history-table {
        display: grid;
        font-weight: 700;
        line-height: 1.625;

        @media(width>767px) {
            grid-template-columns: 28.5rem 1fr
        }

        @media(width<=767px) {
            line-height: calc(46/24)
        }

        >div {
            border-bottom: 1px solid #E1E1E1;

            @media(width>767px) {
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: subgrid;
                padding-block: 1.4rem
            }

            @media(width<=767px) {
                padding-block: 2.4rem
            }

            >dt {
                color: var(--cc-blue-A);

                @media(width>767px) {
                    grid-column: 1/2
                }
            }

            >dd {
                @media(width>767px) {
                    grid-column: 2/3
                }
            }
        }
    }
}

.top-csr {
    padding-block: 11.2rem 10rem;
    position: relative;

    @media(width<=767px) {
        padding-bottom: 16rem
    }

    .l-heading-A {
        @media(width<=767px) {
            margin-bottom: 7.2rem
        }
    }

    .csr-desc {
        margin-bottom: 5.2rem;
        font-weight: 700;
        font-size: 2.8rem;
        line-height: calc(45/28);
        text-align: center;

        @media(width<=767px) {
            margin-bottom: 4rem;
            font-size: 3.8rem;
            line-height: calc(54/38)
        }
    }

    .athtag {
        padding-block: 6rem;

        @media(width<=767px) {
            padding-block: 7.2rem
        }
    }

    .athtag-img {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;

        @media(width<=767px) {
            margin-bottom: 4.4rem
        }
    }

    .athtag-heading {
        margin-bottom: 2.4rem;
        font-weight: 700;
        font-size: 3.3rem;
        line-height: calc(45/33);
        text-align: center;

        @media(width<=767px) {
            margin-bottom: 3.6rem;
            font-size: 3.8rem;
            line-height: calc(54/38)
        }
    }

    .athtag-desc {
        +.athtag-desc {
            margin-top: 1lh
        }
    }

    .csr-link {
        margin-top: 6rem;

        @media(width<=767px) {
            margin-top: 4.8rem
        }
    }
}

.top-recruit {
    padding-block: 14rem;
    position: relative;
    z-index: 0;

    @media(width>767px) {
        background-color: var(--cc-white-A)
    }

    @media(width<=767px) {
        padding-top: 8.5rem;
        background-color: var(--cc-gray-B)
    }

    .l-heading-A {
        margin-bottom: 16rem;

        @media(width<=767px) {
            margin-bottom: 32rem
        }
    }

    .bg {
        z-index: -1;

        img {
            object-position: center top
        }
    }
}