@charset "UTF-8";

body {
    color: #505C60;

    &.home {
        .site-header {
            .header-bg {
                display: none;
            }
        }
    }
}



.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    .header-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 911px;
        z-index: -2;
        height: 100vh;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(1.19rem, 2vw, 2.75rem) 0 clamp(2rem, 2vw, 7.75rem) clamp(1rem, 4vw, 2rem);
    }

    .site-logo {
        display: block;
        position: relative;
        z-index: 10;

        img {
            display: block;
            max-width: 100%;
            height: auto;
            aspect-ratio: 150 / 48;
        }
    }

    .kv-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 1;
        pointer-events: none;

        img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 1 / 1;
        }
    }
    .header-menu {
        text-align: center;
        position: relative;
        z-index: 20;
        padding-right: clamp(1rem, 5vw, 2rem);
        .menu-toggle {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            padding: clamp(2.19rem, 2vw, 2.81rem) clamp(1.25rem, 2vw, 7.25rem) clamp(0.75rem, 2vw, 2.19rem) clamp(0.31rem, 1vw, 7.25rem);
            color: var(--color-logo);
            font-family: var(--font-en);
            font-size: 1.125rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            line-height: 1;
            position: relative;
            z-index: 21;

            .menu-icon-svg {
                display: inline-flex;
                width: 22px;
                height: 12px;

                svg {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }

            .menu-label {
                display: block;
                margin-top: clamp(0.25rem, 1vw, 0.5rem);
            }
        }

        .main-navigation {
            display: none;
        }
        .main-navigation.active {
            font-family: var(--font-en);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(100, 100, 100, 0.8);
            z-index: 1001;
            width: 100vw;
            padding: 2rem 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            height: 100vh;
        }
        .main-navigation.active ul {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            align-items: flex-end;
        }
        .main-navigation.active ul li {
            text-align: center;
        }
        .main-navigation.active ul li a {
            font-size: 1.25rem;
            color: #fff;
            text-decoration: none;
            font-family: var(--font-en);

        }
    }
}

.kv-bg {
    position: fixed;
    top: 0;
    left: -23rem;
    width: 52.5rem;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    transform: translateY(0);

    svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

.kv {
    position: relative;
    height: 100vh;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .kv-inner {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        padding: 12.4rem 1rem 0;
        z-index: 10;

        .kv-title {
            font-family: var(--font-en);
            font-size: clamp(1.5rem, 4vw, 2.625rem);
            font-weight: 400;
            line-height: 1.8;
            letter-spacing: 0.01em;
            margin-bottom: 5.1rem;
            opacity: 0;
            transform: translateY(1rem);
            animation: fadeInUp 1s ease-out forwards;
            animation-delay: 0s;
        }

        .kv-description {
            font-family: var(--font-ja);
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            line-height: 2;
            color: #505C60;

            p {
                margin: 0;
                opacity: 0;
                transform: translateY(1rem);
                animation: fadeInUp 1s ease-out forwards;

                &:not(:first-child) {
                    margin-top: 0.5rem;
                }

                &:nth-of-type(1) {
                    animation-delay: 0.5s;
                }

                &:nth-of-type(2) {
                    animation-delay: 1s;
                }

                &:nth-of-type(3) {
                    animation-delay: 1.5s;
                }
            }
        }

        .kv-scroll {
            position: absolute;
            right: 2rem;
            bottom: -5.73rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-en);
            font-size: 0.875rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            text-align: center;
            background: none;
            border: none;
            cursor: pointer;
            /* Remove default button styles */
            padding: 0;
        }

        .kv-scroll .scroll-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            animation: scrollTextFade 2s infinite ease-in-out;
        }

        .kv-scroll .scroll-line {
            width: 1px;
            height: 40px;
            background: #505C60;
            animation: scrollLineBounce 2s infinite ease-in-out;
        }

    }


    .kv-title,
    .kv-description,
    .kv-scroll {
        position: relative;
    }
}

.fade-up {
    opacity: 0;
    transform: translateY(2rem);
    transition: all 1s ease-out;
}

.fade-up.inview {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bk {
    background-color: #efefef;
}

/*service ---------------------------------------------*/
.service {
    padding: 8rem 0;
    position: relative;

    & > .service-inner {
        max-width: 1180px;
        margin: 0 auto 6rem;
        padding: 0 1rem;
        position: relative;
        z-index: 10;

        .service-title {
            font-family: var(--font-en);
            font-size: 2.625rem;
            font-weight: 400;
            line-height: 1.8;
            letter-spacing: 0.01em;
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(1rem);
            animation: fadeInUp 1s ease-out forwards;
            animation-delay: 0s;
        }

        .service-subtitle {
            font-family: var(--font-en);
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(1rem);
            animation: fadeInUp 1s ease-out forwards;
            animation-delay: 0.5s;
        }

        .service-text {
            font-family: var(--font-ja);
            font-size: 1rem;
            line-height: 2;
            color: #505C60;

            p {
                margin: 0;
                opacity: 0;
                transform: translateY(1rem);
                animation: fadeInUp 1s ease-out forwards;

                &:not(:first-child) {
                    margin-top: 0.5rem;
                }

                &:nth-of-type(1) {
                    animation-delay: 1s;
                }

                &:nth-of-type(2) {
                    animation-delay: 1.5s;
                }

                &:nth-of-type(3) {
                    animation-delay: 2s;
                }

                &:nth-of-type(4) {
                    animation-delay: 2.5s;
                }
            }
        }
    }

    .service-header {
        max-width: 1200px;
        margin: 0 auto 6rem;
        padding: 0 2rem;
        position: relative;

        .service-label {
            font-family: var(--font-en);
            font-size: 1.75rem;
            font-weight: 400;
            line-height: 1;
            margin-bottom: 0.5rem;
            color: #505C60;
            position: relative;
            z-index: 10;
        }

        .service-headline {
            display: flex;
            justify-content: space-between;
            padding-left: 0;
            z-index: 10;
            position: relative;
            @media (max-width: 1024px) {
                flex-direction: column;
                align-items: flex-start;
            }

            .service-main-title {
                font-family: var(--font-en);
                font-size: 2rem;
                font-weight: 400;
                line-height: 1.6;
                letter-spacing: 0.05em;
                margin: 0 0 2rem;
            }

            .service-lead {
                font-family: var(--font-ja);
                font-size: 0.95rem;
                line-height: 2;
                color: #505C60;
                max-width: 700px;
            }
        }

        .service-number {
            font-family: var(--font-en);
            font-size: 1.125rem;
            font-weight: 400;
            margin-top: 0.25rem;
            flex-shrink: 0;
            line-height: 1;
        }
    }

    .service-columns {
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(1rem, 2vw, 2rem);
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 clamp(1rem, 2vw, 2rem);
        z-index: 10;

        .service-column {
            width: clamp(14rem, 20vw, 18.5rem);
            height: auto;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            z-index: 10;
            padding: 4rem 1rem 0 1rem;
            background-size: cover;
            background-position: top center;

            & > * {
                position: relative;
                z-index: 1;
            }

            .service-column-title {
                font-family: var(--font-ja);
                font-size: 1.125rem;
                font-weight: 500;
                margin-bottom: 1rem;
                color: #505C60;
                width: 100%;
                text-align: center;
            }

            .service-column-desc {
                font-family: var(--font-ja);
                font-size: 0.875rem;
                line-height: 1.5;
                color: #505C60;
                justify-content: flex-start
            }
        }
        @media (max-width: 768px) {
            .service-column {
                width: 90%;
            }
        }

        @media (max-width: 768px) {
            flex-wrap: wrap;
            justify-content: center;
        }
    }
}


/*news,about background ------------------------------*/
.news-about-bk {
    background-color: #efefef;
}

/*news ---------------------------------------------*/
.news {
    padding: 6rem 0;
    position: relative;
    z-index: 10;

    .news-inner {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .news-title {
        font-family: var(--font-en);
        font-size: 2.5rem;
        font-weight: 400;
        margin-bottom: 3rem;
        color: #505C60;
    }

    .news-list {
        list-style: none;
        padding: 0;
        margin: 0;

        .news-item {
            border-bottom: 1px solid #B0B0B0;
            padding: 2rem 0;
            transition: background 0.3s;

            &:hover {
                background: rgba(0, 0, 0, 0.03);
            }

            .news-date {
                font-size: 0.875rem;
                color: #888;
                margin-bottom: 0.75rem;
                display: block;
            }

            .news-link {
                display: block;
                text-decoration: none;
                color: inherit;

                .news-heading {
                    font-size: 1.125rem;
                    font-weight: 500;
                    color: #333;
                    margin-bottom: 0.5rem;
                }

                .news-excerpt {
                    font-size: 0.95rem;
                    color: #505C60;
                    line-height: 1.8;
                }
            }
        }
    }
}

/*about ---------------------------------------------*/

.about {
    position: relative;
    padding: 8rem 0;
    z-index: 10;


    .about-inner {
        position: relative;
        z-index: 10;

        .about-title {
            font-family: var(--font-en);
            font-size: 2rem;
            font-weight: 400;
            line-height: 1.6;
            letter-spacing: 0.05em;
            color: #505C60;
            margin: 0 auto 6rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 8.75rem;
            padding-bottom: 8.75rem;
            opacity: 0;
            transform: translateY(2rem);
            transition: all 1s ease-out;
            animation: fadeInUp 1s ease-out forwards;
        }
        .about-contact {

            .contact-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 1000px;
                margin: 0 auto;
                flex-wrap: nowrap;
                padding-top: 20rem;
                flex-direction: column-reverse;

                .contact-item {
                    width: 40%;
                    text-align: center;

                    .contact-heading {
                        font-family: var(--font-en);
                        font-size: 1.125rem;
                        font-weight: 400;
                        color: #505C60;
                        margin-bottom: 0.25rem;
                    }

                    .contact-sub {
                        font-family: var(--font-ja);
                        font-size: 0.875rem;
                        color: #505C60;
                    }
                }

                .contact-title {
                    width: 100%;
                    font-family: var(--font-en);
                    font-size: 1.5rem;
                    font-weight: 400;
                    color: #505C60;
                    margin: 4rem 0;
                    text-align: center;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .about-contact {
        height: auto;
        padding: 6rem 1rem;
        background-size: 100% 100%;
        background-position: center bottom, center center;

        .contact-content {
            flex-direction: column;
            align-items: center;
            padding-top: 4rem;

            .contact-item {
                width: 100%;
                margin-bottom: 2rem;
            }

            .contact-title {
                margin: 3rem 0;
                font-size: 1.25rem;
            }
        }
    }
}


/* members ---------------------------------------------*/
.members {
    padding: 8rem 1rem;
    position: relative;
    z-index: 10;

    .members-inner {
        max-width: 1200px;
        margin: 0 auto;

        .members-title {
            font-family: var(--font-en);
            font-size: 2.5rem;
            font-weight: 400;
            color: #505C60;
            margin-bottom: 3rem;
            text-align: left;
        }

        .members-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 2rem;

            .member {
                width: calc(33.333% - 1.333rem);
                padding: 2.5rem;
                border-right: 1px solid #B0B0B0;
                border-bottom: 1px solid #B0B0B0;

                .member-name-en {
                    font-size: 1.25rem;
                    font-weight: 400;
                    margin-bottom: 1.56rem;
                }

                .member-name-ja {
                    font-size: 0.95rem;
                    margin-bottom: 3.5rem;
                }

                .member-role {
                    font-size: 0.875rem;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .members {
        padding: 6rem 1rem;

        .members-inner {
            .members-list {
                flex-direction: column;
                gap: 1.5rem;

                .member {
                    width: 100%;
                    padding: 2rem 1.5rem;
                }
            }
        }
    }
}

/* footer ---------------------------------------------*/
.site-footer {
    color: #505C60;
    padding: 6rem 1rem;
    position: relative;
    background-color: #efefef;

    .footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
        position: relative;
        z-index: 10;
    }

    .footer-left {
        display: flex;
        flex-direction: column;
        gap: 4.3rem;

        .footer-logo {
            img {
                max-width: 150px;
                height: auto;
                display: block;
            }
        }

        .footer-catch {
            font-family: var(--font-en);
            font-size: 1.5rem;
            line-height: 1.8;
        }
    }

    .footer-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: auto;
        font-family: var(--font-en);
        font-size: 0.875rem;
        line-height: 2;
        margin-right: 7.5rem;
        @media (max-width: 768px) {
            margin: 0 auto;
        }

        .footer-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, auto);
            gap: 1rem 3rem;
            align-items: flex-end;

            li {
                margin-bottom: 0.5rem;
            }

            a {
                text-decoration: none;
                color: #647378;
                transition: filter 0.3s;
            }
            a:hover {
                filter: brightness(1.2);
            }
        }
    }

    .footer-copy {
        width: 100%;
        margin-top: 4rem;
        text-align: center;
        font-size: 0.75rem;
        color: #505C60;
    }
}

@media (max-width: 768px) {
    .site-footer {
        .footer-inner {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer-left {
            align-items: center;

            .footer-catch {
                font-size: 1.25rem;
            }
        }

        .footer-nav {
            align-items: center;

            .footer-menu {
                display: grid;
                grid-template-columns: repeat(2, auto);
                gap: 1rem 3rem;
                align-items: center;
            }
        }
        ul#global-menu {
                margin: 0 auto;
        }
    }
}

@keyframes scrollLineBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.6;
    }
}

@keyframes scrollTextFade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


.service-consulting {
    .service-columns {
        position: relative;
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        height: 1000px;
    }

    .service-column {
        position: absolute;
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        background: none;
        padding: 0;
        height: auto;
    }

    .service-column:nth-child(1) {
        top: 0;
        left: 0;
    }

    .service-column:nth-child(2) {
        top: 200px;
        left: 0;
    }

    .service-column:nth-child(3) {
        top: 420px;
        left: 0;
    }

    .service-column:nth-child(4) {
        top: 640px;
        left: 0;
    }

    .service-column-title {
        width: 15.875rem;
        height: 15.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        padding: 1rem 1.5rem;
        color: #647378;
    }

    .service-column-desc {
        width: 500px;
        max-width: none;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        color: #647378;
    }

    @media (max-width: 768px) {
        .service-column {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .service-column-desc {
            max-width: 100%;
        }
    }
}

.service-development {
    position: relative;

    .service-line {
        position: absolute;
        top: 44.2rem;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #959FA2;
        transform: scaleX(1);
        transform-origin: left center;
        opacity: 1;
        z-index: 10;
    }

    .service-column-dot {
        position: absolute;
        top: 44rem;
        left: 50%;
        width: 0.625rem;
        height: 0.625rem;
        background-color: #959FA2;
        border-radius: 50%;
        transform: translateX(-50%) scale(0);
        opacity: 0;
        z-index: 10;
    }

    .service-columns {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: baseline;

        .service-column {
            width: 18.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 10;

            .service-column-title {
                position: relative;
                z-index: 0;
            }

            .service-line {
                width: 100%;
                height: 1px;
                background-color: #959FA2;
                margin: 2rem 0 1rem;
                transform: scaleX(0);
                transform-origin: left center;
                opacity: 0;
            }

            .service-column-desc {
                position: relative;
                font-size: 0.95rem;
                line-height: 2;
                color: #505C60;
                padding: 1.41rem 1.595rem;
            }
        }
    }

    @media (max-width: 768px) {
        .service-columns {
            flex-direction: column;
            align-items: center;

            .service-column {
                width: 100%;
                max-width: 35.875rem;

                .service-column-title {
                    width: 18.79306rem;
                    height: 18.793rem;
                }
            }
        }
    }
}

.service-consulting-img {
    position: relative;
    margin: 0 0 0 auto;
    padding-left: 4rem;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 11;
    white-space: nowrap;

    img {
        width: 80%;
        height: auto;
        max-width: none;
        display: inline-block;
    }

    @media (max-width: 1024px) and (min-width: 769px) {
        img {
            width: 100%;
            margin: 0 auto;
            display: block;
        }
    }
    @media (max-width: 768px) {
        padding-left: 0;
        img {
            width: 80%;
            height: auto;
            margin: 0 auto;
            display: block;
        }
    }
}

.service-development-img {
    position: relative;
    margin: 0 0 0 auto;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 11;
    white-space: nowrap;

    img {
        width: 109.1875rem;
        height: 18.793rem;
        flex-shrink: 0;
        display: inline-block;
        aspect-ratio: 109.1875 / 18.793;
    }

    @media (max-width: 1200px) {
        height: auto;
    }

    @media (max-width: 1024px) and (min-width: 769px) {
        img {
            width: 90%;
            margin: 0 auto;
            display: block;
        }
    }

    @media (max-width: 768px) {
        top: auto;
        margin-top: 4rem;
        height: auto;
        overflow-x: auto;
        white-space: nowrap;

        img {
            aspect-ratio: auto;
            width: 80%;
            height: auto;
            margin: 0 auto;
            display: block;
        }
    }
}



@keyframes bounceFade {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-10px);
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .header-menu .main-navigation.active {
        width: 100%;
        box-sizing: border-box;
    }
}