@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * STYLES..............各種スタイル
 */





/*------------------------------------*\
    $STYLES
\*------------------------------------*/
.wrap { overflow: hidden }

.hide {
    content-visibility: auto;
    display: none;
}

.fade-in {
    transform: translateY(100px);
    opacity: 0;
    transition:
        transform 1s var(--linear),
        opacity 1s var(--easeOutQuart);
}
.fade-in.active {
    transform: translateY(0);
    opacity: 1;
}


.header { position: relative }
@media screen and (min-width: 1440px) {
    .header { border-top: 10px solid black }
}

    .logo {
        position: relative;
        z-index: 1;
        margin-inline: auto;
    }
    @media screen and (min-width: 768px) {
        .logo {
            padding-top: 58px;
            width: 245px;
        }
    }
    @media screen and (max-width: 767px) {
        .logo {
            width: 81.667px;
            padding-top: 23px;
            padding-bottom: 22px;
        }
    }

    .main-visual {
        position: relative;
        width: min(1200px, 100%);
        margin-inline: auto;
    }
    @media screen and (min-width: 768px) {
        .main-visual { margin-top: -10px }
    }

        .main-visual__textBox { position: absolute }
        @media screen and (min-width: 768px) {
            .main-visual__textBox {
                top: calc(100% * (306 / 800));
                left: calc(100% * (122 / 1200));
            }
        }
        @media screen and (max-width: 767px) {
            .main-visual__textBox {
                top: calc(100% * (653 / 1468));
                left: calc(100% * (52 / 1125));
            }
        }

            .main-visual__caption {
                font-size: clamp(6.667rem, calc(100vw * (130 / 1200)), 13.0rem);
                font-weight: 700;
                line-height: 1;
            }
            @media screen and (min-width: 768px) {
                .main-visual__caption { margin-bottom: calc(1em * (43 / 130)) }
            }
            @media screen and (max-width: 767px) {
                .main-visual__caption { margin-bottom: calc(1em * (52 / 200)) }
            }

            .main-visual__text {
                font-size: clamp(2.4rem, calc(100vw * (36 / 1200)), 3.6rem);
                font-weight: 600;
                line-height: 1;
            }


    .nav {
        position: fixed;
        z-index: 999;
    }
    @media screen and (min-width: 1440px) {
        .nav {
            top: 164px;
            left: calc(50% + 600px);
            display: flex;
            justify-content: center;
            width: min(calc((100% - 1200px) / 2), 280px);
        }
    }
    @media screen and (max-width: 1439px) {
        .nav {
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
        }
    }

        .nav__button {
            position: absolute;
            top: 10px;
            right: calc(100% * (20 / 375));
            z-index: 1;
            width: 40px;
            padding-top: 35.333px;
            padding-left: .1em;
            font-size: 1.0rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: .2em;
            text-align: center;
            white-space: nowrap;
            pointer-events: visible;
        }
        .nav__button::before,
        .nav__button::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 1px;
            background-color: black;
            transition:
                top .15s var(--linear),
                transform .15s var(--linear);
        }
        .nav__button::before { top: 13.333px }
        .nav__button::after { top: 21.333px }
        .nav__flag:checked ~ .nav__button::before {
            top: 17.667px;
            transform: translateX(-50%) rotate(15deg);
        }
        .nav__flag:checked ~ .nav__button::after {
            top: 17.667px;
            transform: translateX(-50%) rotate(-15deg);
        }


        @media screen and (max-width: 1439px) {
            .nav__container {
                width: 100%;
                height: 100vh;
                padding-inline: calc(100% * (20 / 375));
                background-color: white;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                pointer-events: none;
                transition: clip-path .3s var(--linear);
            }
            .nav__flag:checked ~ .nav__container {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                pointer-events: visible;
            }
        }

            .nav__list {
                display: flex;
                flex-direction: column;
                row-gap: 3.5em;
                line-height: 1.75;
                white-space: nowrap;
            }
            @media screen and (min-width: 1440px) {
                .nav__list { font-size: 1.3rem }
            }
            @media screen and (max-width: 1439px) {
                .nav__list {
                    padding-top: 74px;
                    margin-bottom: 52px;
                    font-size: 1.6rem;
                    text-align: center;
                }
            }

            .nav__options {}
                .nav__options__list {
                    display: flex;
                    flex-direction: column;
                    row-gap: 16.333px;
                    width: 100%;
                }

                    .nav__options__item {
                        max-width: 335px;
                        margin-inline: auto;
                    }
    

    .other-links {
        position: fixed;
        top: 50%;
        left: min(68px, calc(100% * (68 / 1920)));
        transform: translateY(-50%);
    }

        .other-links__list {
            display: flex;
            flex-direction: column;
            row-gap: 36px;
        }

            .other-links__item {
                font-size: 1.6rem;
                font-weight: 400;
                line-height: 1;
                writing-mode: vertical-lr;
            }


.footer {
    padding-inline: calc(100% * (20 / 375));
    background-color: var(--primaryColor);
}

    .footer__inner {
        width: min(100%, 1200px);
        margin-inline: auto;
    }
    @media screen and (min-width: 768px) {
        .footer__inner {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-top: 50px;
            padding-bottom: 59px;
        }
    }
    @media screen and (max-width: 767px) {
        .footer__inner {
            padding-top: 40px;
            padding-bottom: 43px;
        }
    }

        @media screen and (min-width: 768px) {
            .footer__main {
                display: flex;
                align-items: flex-end;
                margin-right: calc(100% * (50 / 1200));
            }
        }
        @media screen and (max-width: 767px) {
            .footer__main { margin-bottom: 18.333px }
        }

            @media screen and (min-width: 768px) {
                .footer__details { width: 367px }
            }

                .footer__logo {}
                @media screen and (min-width: 768px) {
                    .footer__logo {
                        width: 245px;
                        margin-bottom: 17px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .footer__logo {
                        width: 81.667px;
                        margin-inline: auto;
                        margin-bottom: 13px;
                    }
                }

                .copyright {
                    line-height: 1;
                    letter-spacing: .05em;
                }
                @media screen and (min-width: 768px) {
                    .copyright {
                        margin-bottom: 17px;
                        font-size: 1.2rem;
                    }
                }
                @media screen and (max-width: 767px) {
                    .copyright {
                        padding-left: .05em;
                        margin-bottom: 18.333px;
                        font-size: 1.0rem;
                        text-align: center;
                    }
                }

                .footer__address {
                    font-size: 1.2rem;
                    line-height: 1.75;
                    letter-spacing: .1em;
                }

                .footer__nav {
                    font-size: 1.3rem;
                    line-height: 1.75;
                }

                    .footer__nav__item { width: max-content }
                    .footer__nav__item:not(:last-of-type) { margin-bottom: 1.75em }
                    .footer__nav__link:hover {
                        color: black;
                        opacity: 0.75;
                    }


                .footer__catch {
                    height: 134px;
                    padding-block: 2px;
                    margin-right: -65px;
                    margin-bottom: -6.5px;
                }

                    .footer__catch p {
                        font-size: 13.0rem;
                        font-weight: 700;
                        line-height: 1;
                        white-space: nowrap;
                    }
                    .footer__catch span { vertical-align: -15px }


                .footer__buttons {}

                    .footer__button__item {
                        width: min(100%, 335px);
                        margin-inline: auto;
                    }
                    .footer__button__item:not(:last-of-type) { margin-bottom: 16.333px }


.return-top {
    position: fixed;
    right: min(210px, calc(100vw * (210 / 1920)));
    bottom: 4%;
    width: min(101px, calc(100vw * (101 / 1920)));
    z-index: 999;
}
    .return-top__link {
        display: block;
        animation: returnTop 12s var(--linear) infinite;
    }

@keyframes returnTop {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}


.main { padding-inline: calc(100% * (20 / 375)) }

    .main__inner {
        width: min(100%, 1200px);
        margin-inline: auto;
    }


/*Message*/
@media screen and (min-width: 768px) {
    .msg {
        width: min(100%, 950px);
        padding-top: 150px;
        padding-bottom: 200px;
        margin-inline: auto;
    }
}
@media screen and (max-width: 767px) {
    .msg {
        padding-top: 70px;
        padding-bottom: 97px;
    }
}

    @media screen and (min-width: 768px) {
        .msg__inner {
            display: flex;
            justify-content: space-between;
        }
    }

        @media screen and (min-width: 768px) {
            .msg__title { width: calc(100% * (350 / 950)) }
        }
        @media screen and (max-width: 767px) {
            .msg__title {
                width: min(253px, 100%);
                margin-inline: auto;
                margin-bottom: 33px;
            }
        }

        @media screen and (min-width: 768px) {
            .msg__content {
                width: calc(100% * (475 / 950));
                padding-top: 14px;
            }
        }

            /*h3*/.msg__label { line-height: 1.5 }
            @media screen and (min-width: 768px) {
                .msg__label {
                    margin-bottom: 17px;
                    font-size: 2.4rem;
                }
            }
            @media screen and (max-width: 767px) {
                .msg__label {
                    margin-bottom: 3.667px;
                    font-size: 1.6rem;
                }
            }


/*Business*/
@media screen and (min-width: 768px) {
    .business { margin-bottom: 233px }
}
@media screen and (max-width: 767px) {
    .business { margin-bottom: 78.333px }
}

    @media screen and (min-width: 768px) {
        .business h2 { margin-bottom: 19px }
    }

    @media screen and (min-width: 768px) {
        .business__content {
            display: grid;
            grid-template-columns: calc(100% * (500 / 1200)) calc(100% * (650 / 1200));
            justify-content: space-between;
        }
    }

        @media screen and (min-width: 768px) {
            .business__details {
                grid-column: 1 / 1;
                grid-row: 1 / 1;
            }
        }

            .business__label {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            @media screen and (min-width: 768px) {
                .business__label {
                    padding-top: 7px;
                    padding-left: .3em;
                    height: 273px;
                    font-size: 2.4rem;
                    letter-spacing: .3em;
                }
            }
            @media screen and (max-width: 767px) {
                .business__label {
                    padding-left: .2em;
                    margin-bottom: 4px;
                    height: 165.333px;
                    font-size: 2.667rem;
                    letter-spacing: .2em;
                }
            }


        .business__images { display: flex }
        @media screen and (min-width: 768px) {
            .business__images {
                grid-column: 2 / 3;
                grid-row: 1 / 3;
                flex-wrap: wrap;
                column-gap: calc(100% * (50 / 650));
            }
        }
        @media screen and (max-width: 767px) {
            .business__images { column-gap: 15px }
        }

            .business__image:first-of-type { width: 100% }
            .business__image:not(:first-of-type) {
                flex-grow: 1;
                width: 1px;
            }
            @media screen and (min-width: 768px) {
                .business__image:first-of-type { margin-bottom: calc(100% * (50 / 650)) }
            }
            @media screen and (max-width: 767px) {
                .business__image:first-of-type { margin-bottom: 15px }
            }


        @media screen and (min-width: 768px) {
            .business__button {
                grid-column: 1 / 1;
                grid-row: 2 / 3;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
            }
        }


@media screen and (min-width: 768px) {
    .company { margin-bottom: 103px }
}
@media screen and (max-width: 767px) {
    .company { margin-bottom: 66.333px }
}

    @media screen and (min-width: 768px) {
        .company__content {
            display: flex;
            justify-content: space-between;
        }
    }

        @media screen and (min-width: 768px) {
            .company__details {
                display: flex;
                width: calc(100% * 2 / 3);
            }
        }
        @media screen and (max-width: 767px) {
            .company__details { margin-bottom: 15px }
        }

            @media screen and (min-width: 768px) {
                .company__details h2 {
                    width: calc(100% * (182 / 800));
                    min-width: max-content;
                    padding-right: 1em;
                }
            }
            @media screen and (max-width: 767px) {
                .company__details h2 { margin-bottom: 17px }
            }

            @media screen and (min-width: 768px) {
                .company__details__inner { width: calc(100% * (618 / 800)) }
            }
            @media screen and (max-width: 767px) {
                .company__details__inner { margin-bottom: 17px }
            }

                .company__box {
                    display: flex;
                    letter-spacing: .1em;
                }
                @media screen and (min-width: 768px) {
                    .company__box {
                        font-size: 1.4rem;
                        line-height: calc(30 / 14);
                    }
                    .company__box:not(:last-of-type) { margin-bottom: calc(1em * (30 / 14)) }
                }
                @media screen and (max-width: 767px) {
                    .company__box {
                        font-size: 1.2rem;
                        line-height: 1.75;
                    }
                    .company__box:not(:last-of-type) { margin-bottom: 1.75em }
                }

                    .company__label { min-width: 6.6em }
                    @media screen and (min-width: 768px) {
                        .company__label { width: calc(100% * (185 / 618)) }
                    }
                    @media screen and (max-width: 767px) {
                        .company__label { width: calc(100% * (355 / 1005)) }
                    }

                    .company__text {
                        flex-grow: 1;
                        width: 1px;
                    }


        @media screen and (min-width: 768px) {
            .company__map { width: calc(100% * (350 / 1200)) }
        }

            .company__map__body {
                width: 100%;
                border: none;
                filter: grayscale(1);
            }
            @media screen and (min-width: 768px) {
                .company__map__body { height: 400px }
            }
            @media screen and (max-width: 767px) {
                .company__map__body { height: 133.333px }
            }