@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * CHANGE_STYLES.......スタイル変更
 * COMPANY.............会社概要
 * ACCESS..............アクセス
 */





/*------------------------------------*\
    $CHANGE_STYLES
\*------------------------------------*/
.text-with-image { margin-block: clamp(96px, calc(100vw * (96 / 375)), 144px) }
.catch { color: rgb(255, 0, 0); font-size: 28px; line-height: 1.4; font-weight: bold;}
    @media screen and (min-width: 768px) {
        .text-with-image__item {
            background-size: calc(100% * (736 / 1920)) calc(100% - 16px - clamp(32px, calc(100vw * (32 / 375)), 64px));
        }
    }

        @media screen and (min-width: 768px) {
            .text-with-image__image img { height: calc(100% - clamp(32px, calc(100vw * (32 / 375)), 64px)) }
        }

        .text-with-image__details { background-color: white }
        @media screen and (min-width: 768px) {
            .text-with-image__details { margin-top: clamp(32px, calc(100vw * (32 / 375)), 64px) }
        }

            .text-with-image__details__inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                color: var(--fontSubBrown);
            }




/*------------------------------------*\
    $COMPANY
\*------------------------------------*/
.company {}

    .company__table {}

        .company__table__list {
            margin-bottom: clamp(48px, calc(100vw * (48 / 375)), 80px);
            border-bottom: 1px solid var(--background6);
        }

            .company__table__item { border-top: 1px solid var(--background6) }

                .company__column {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                }

                    .company__label {
                        flex-grow: 1;
                        width: min(280px, 100%);
                        min-height: calc(clamp(64px, calc(100vw * (64 / 375)), 104px) + 2px);
                        border-top: 2px solid var(--background6);
                    }
                    @media screen and (min-width: 768px) {
                        .company__label { background-color: rgb(0 0 0 / 0.3) }
                    }

                        .company__label span {
                            position: relative;
                            display: flex;
                            align-items: center;
                            height: 100%;
                            padding-inline: clamp(12px, calc(100vw * (12 / 375)), 20px);
                            font-size: 1.6rem;
                            letter-spacing: .1em;
                            white-space: nowrap;
                        }

                        .company__label span::before {
                            content: "";
                            position: absolute;
                            top: calc(50% - 1em);
                            left: clamp(6px, calc(100vw * (6 / 375)), 10px);
                            width: 2px;
                            height: 2em;
                            background-color: var(--primaryColor);
                        }

                    .company__content {
                        flex-grow: 1;
                        width: calc(100% - 280px);
                        min-width: 50%;
                        max-width: 100%;
                        min-height: calc(clamp(64px, calc(100vw * (64 / 375)), 104px) + 2px);
                        padding-block: 10px;
                        padding-inline: clamp(12px, calc(100vw * (12 / 375)), 24px);
                    }

                        .company__inline {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            column-gap: 20px;
                            row-gap: 4px;
                            height: 100%;
                        }
                        .company__inline > p:not(:last-of-type) { white-space: nowrap }

                    @media screen and (max-width: 768px) {
                        .text--small {
                            font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.6rem);
                        }

                        .company__label span {
                            position: relative;
                            display: flex;
                            align-items: center;
                            height: 100%;
                            padding-inline: clamp(14px, calc(100vw * (14 / 375)), 24px);
                            font-size: 1.8rem;
                            letter-spacing: .1em;
                            white-space: nowrap;
                        }
                    }

/*------------------------------------*\
    $ACCESS
\*------------------------------------*/
.access {}

    .access__block:not(.is-active) { opacity: 0 }
    @media screen and (min-width: 768px) {
        .access__block {
            display: grid;
            grid-template-columns: calc(100% * (768 / 1920)) 1fr;
        }
    }
    @media screen and (max-width: 767px) {
        .access__block {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    }

        .access__details { background-color: black }
        .access__block.is-active .access__details { animation: slideRight .3s linear both }
        @media screen and (min-width: 768px) {
            .access__details {
                min-height: min(480px, calc(100vw * (320 / 768)));
                margin-bottom: clamp(32px, calc(100vw * (32 / 375)), 64px);
            }
        }
        @media screen and (max-width: 767px) {
            .access__details { width: calc(100vw * (359 / 375)) }
        }

            .access__details__inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                padding-top: clamp(32px, calc(100vw * (32 / 375)), 41px);
                padding-right: calc(var(--sidePadding) + 16px);
                padding-left: clamp(32px, calc(100vw * (32 / 375)), 128px);
                padding-bottom: clamp(48px, calc(100vw * (48 / 375)), 61px);
            }


        .access__block.is-active .access__map { animation: slideLeft .3s linear both }
        .access__map img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 100% 50%;
        }
        @media screen and (min-width: 768px) {
            .access__map {
                margin-top: clamp(32px, calc(100vw * (32 / 375)), 64px);
                margin-left: max(-128px, calc(-100vw * (64 / 768)));
            }
        }
        @media screen and (max-width: 767px) {
            .access__map {
                width: calc(100vw * (359 / 375));
                height: calc(100vw * (256 / 375));
                margin-top: min(calc(-100vw * (32 / 375)), -32px);
                margin-left: auto;
            }
        }

            .access__map__inner {
                width: 100%;
                height: 100%;
                background-color: white;
                color: black;
            }