@charset "utf-8";

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --fontSizeBase: 1.6rem;
    --lineHeightBase: 1.5;
    --colorTextBase: #222;
    --colorMain: #D80E19;
    --colorWhite: #fff;
    --colorGray: rgb(93, 93, 93);
    --colorBG: #F8F8F8;
    --gatterSide: min(2rem, 4vw);
    --paddingMain: 8rem;
    --widthMain: 124rem;
    --widthSub: 96rem;

    @media(min-width: 768px){
        --paddingMain: 10.8rem;
    }
}
html{
    font-size: 62.5%;
}
body{
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
    color: var(--colorTextBase);
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    opacity: 0;
    transition: opacity .6s cubic-bezier(0.47, 0, 0.75, 0.72);

    &.loadend{
        opacity: 1;
    }

    &.loadend:not(.no-transition){
        .header-menu-sp{
            transition: opacity .4s, visibility .4s;
        }
    }

    &:not(.open-menu){
        .header-menu-sp-icon{
            .icon.close{
                display: none !important;
            }
        }
    }

    &.open-menu{
        overflow: hidden;

        @media(min-width: 1200px){
            overflow: initial;
        }

        .header-menu-sp-icon{
            .icon.open{
                display: none !important;
            }
        }

        .header-menu-sp{
            opacity: 1;
            visibility: visible;
        }
    }
}
body.open-menu :is(.header-menu-sp,.header-menu-sp-icon,.main) {
    scrollbar-gutter: stable;
    overflow: auto;
}
img, iframe{
    display: block;
    max-width: 100%;
    height: auto;
}
li{
    list-style: none;
}
a{
    color: inherit;
    text-decoration: none;
}
h1{
    font-size: calc(var(--fontSizeBase) * 2);
}
h2{
    font-size: calc(var(--fontSizeBase) * 2);
}
h3{
    font-size: calc(var(--fontSizeBase) * 1.5);
}
h4, h5, small{
    font: inherit;
}
.container{
    max-width: var(--widthMain);
    margin-inline: auto;
    padding-left: var(--gatterSide);
    padding-right: var(--gatterSide);
    box-sizing: content-box;
}
.container-padding{
    padding-top: var(--paddingMain);
    padding-bottom: var(--paddingMain);
}
.decoration{
    color: var(--colorMain);
    font-weight: 700;
    line-height: 1;
    margin-bottom: .8rem;
}
.btn-area{
    a, button{
        display: block;
        background: var(--colorMain);
        color: var(--colorWhite);
        text-align: center;
        padding: 1.6rem 2rem;
        max-width: 20rem;
        font-size: 1.4rem;
        border-radius: .4rem;
        transition: opacity .4s;

        &:hover{
            opacity: .7;
        }
    }
    button{
        cursor: pointer;
        border: none;
        width: 100%;
        line-height: inherit;
    }
}

/* header */
.header{
    padding-right: var(--gatterSide);
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--colorWhite);

    &.visit-top{
        background: transparent;
    }

    @media(min-width: 1200px){
        position: static;
        background: transparent;
    }

    .header-container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 999;

        .logo__link{
            max-width: 18rem;
            box-sizing: content-box;
            padding: 2rem 4rem 2rem var(--gatterSide);
            background: var(--colorWhite);
            border-radius: 0 0 4rem 0;
        }

        .header-menu-sp-icon{
            display: block;

            .menu-icon{
                width: 2.8rem;

                .icon{
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            @media(min-width: 1200px){
                display: none;
            }
        }

        .header-menu-pc{
            display: none;

            @media(min-width: 1200px){
                display: block;
            }

            .global-nav ul{
                display: flex;
                align-items: center;
                column-gap: 1.6rem;
                font-size: 1.4rem;

                a{
                    display: block;
                    padding: .8rem;
                }

                li:not(.to-contact){
                    a:hover{
                        text-decoration: underline;
                    }
                }

                .to-contact{
                    a{
                        background-color: var(--colorMain);
                        color: var(--colorWhite);
                        padding: 1.2rem 4rem;
                        border-radius: .4rem;
                        transition: .4s;

                        &:hover{
                            opacity: .7;
                        }
                    }
                }
            }
        }
    }

    .header-menu-sp{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--colorWhite);
        z-index: 98;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 8rem 1.2rem 4rem;
        visibility: hidden;
        opacity: 0;

        @media(min-width: 1200px){
            display: none;
        }

        .global-nav__list{
            max-width: calc(100% - var(--gatterSide)* 2);
            margin-inline: auto;

            li:not(.to-contact){
                border-bottom: .1rem solid var(--colorGray);

                a{
                    padding: 1.6rem 2rem;
                    display: block;
                }
            }
            li.to-contact{
                a{
                    background: var(--colorMain);
                    color: var(--colorWhite);
                    display: block;
                    text-align: center;
                    font-size: 1.4rem;
                    padding: 2rem;
                    max-width: 20rem;
                    margin-inline: auto;
                    margin-top: 4rem;
                }
            }
        }
    }
}

/* top */
.main-visual{
    position: relative;

    &::after{
        content: '';
        position: absolute;
        left: 0;
        display: block;
        top: -12rem;
        width: max(28rem, 35%);
        bottom: 15%;
        background: var(--colorMain);
        z-index: -1;
    }

    .inner{
        margin-left: auto;
        margin-top: 2rem;
        position: relative;
        max-width: calc(100% - var(--gatterSide));

        @media(min-width: 768px){
            max-width: 80%;
        }

        .text-area{
            position: absolute;
            top: 50%;
            left: 8%;
            translate: 0 -50%;
            color: var(--colorWhite);
            text-shadow: 0 0 .1rem rgba(0, 0, 0, 1);
            z-index: 2;

            @media(min-width: 768px){
                left: 12%;
            }

            .text{
                font-size: clamp(2.8rem, 5vw, calc(var(--fontSizeBase) * 2.5));
                font-weight: 700;
                margin-bottom: .8rem;
            }
            .decoration-text{
                letter-spacing: .1rem;
            }
        }
        .img-area{
            position: relative;

            &::after{
                content: '';
                display: block;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background: rgba(0, 0, 0, .3);
            }
        }
    }
}
.section-top__about-us{
    overflow-x: hidden;

    .flex-area{
        display: flex;
        column-gap: 10rem;
        row-gap: 5.2rem;
        flex-direction: column;

        @media(min-width: 768px){
            flex-direction: row;
        }

        & > div{
            flex: 1;
        }
        
        .left{
            @media(min-width: 768px) {
                flex: 0 0 40%;
                align-self: center;
            }
            h3{
                margin-top: 3.2rem;
            }
            .text{
                margin-top: 2rem;
                line-height: 2;
            }
            .btn-area{
                margin-top: 4rem;
            }
        }
        .right{
            position: relative;
            --margin-bottom: 5rem;
            margin-bottom: var(--margin-bottom);
            margin-right: calc(50% - 50vw + var(--scrollBarSize, 0) / 2);
            align-self: flex-start;

            &::after{
                content: '';
                position: absolute;
                top: 3rem;
                left: calc(var(--gatterSide) * -1);
                right: var(--gatterSide);
                bottom: calc(var(--gatterSide) * -1);
                display: block;
                background: var(--colorMain);
                z-index: -1;

                @media(min-width: 768px){
                    left: -5rem;
                    right: 0;
                    bottom: calc(var(--margin-bottom) * -1);
                }
            }

            .img-area{
                box-shadow: 0 0 1rem rgba(0, 0, 0, .2);
            }
        }
    }
}
.section-top__recruit{
    background: var(--colorBG);

    .title{
        margin-bottom: 3.2rem;
    }

    h3{
        margin-bottom: 2.8rem;
        color: var(--colorMain);

        br{
            display: none;

            @media(min-width: 768px){
                display: block;
            }
        }
    }

    .top-text{
        letter-spacing: .1rem;
        line-height: 1.75;
    }

    .recruit-cards{
        display: flex;
        flex-direction: column;
        row-gap: 4rem;
        margin-top: 4.8rem;

        .card{
            display: flex;
            flex-direction: column;
            background: var(--colorWhite);
            padding: 4rem var(--gatterSide);
            column-gap: 4rem;
            row-gap: 2.8rem;
            box-shadow: 0 0 1rem rgba(0, 0, 0, .2);

            @media(min-width: 768px){
                flex-direction: row;
                padding: 4rem;
            }

            .img-area{
                flex: 7;
            }
            .text-area{
                flex: 12;

                h4{
                    color: var(--colorMain);
                    font-weight: 700;
                    font-size: calc(var(--fontSizeBase) * 1.25);
                    margin-bottom: 2rem;
                }

                .card-text{
                    margin-bottom: 2rem;
                    line-height: 2;
                    letter-spacing: .1rem;
                }

                .flex-area{
                    margin-bottom: 2rem;
                    display: flex;
                    gap: 2rem;
                    flex-direction: column;


                    @media(min-width: 768px){
                        flex-direction: row;
                    }

                    & > div{
                        flex: 1;
                    }
                }

                .box-area{
                    h5{
                        background: var(--colorGray);
                        color: var(--colorWhite);
                        padding: .8rem 1.6rem;
                    }
                    .text{
                        background: var(--colorBG);
                        padding: 1.2rem;
                        font-size: 1.4rem;
                        line-height: 2;

                        span.price-adjust{
                            display: flex;

                            & > span:first-of-type{
                                flex: 0 0 4em;
                            }
                            & > span:last-of-type{
                                flex: 0 0 5em;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
    .btn-area-b-wrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
        column-gap: 2rem;
        row-gap: 2rem;
        margin-top: 6rem;

        @media(min-width: 768px){
            flex-direction: row;
        }

        a{
            background: var(--colorMain);
            color: var(--colorWhite);
            display: block;
            min-width: 24rem;
            text-align: center;
            padding: 3rem .8rem;
            border-radius: .8rem;
            transition: .4s;

            &:hover{
                opacity: .7;
            }
        }
    }
}
.section-top__job{
    background: var(--colorBG);
    padding-bottom: var(--paddingMain);

    .title{
        margin-bottom: 3.2rem;
    }

    .jobs-area__list{
        display: flex;
        flex-direction: column;
        --itemColumnSize: 2rem;
        column-gap: var(--itemColumnSize);
        row-gap: 2rem;

        @media(min-width: 768px){
            flex-direction: row;
        }

        .jobs-area__item{
            background: var(--colorWhite);
            font-size: 1.4rem;
            padding: 2rem;

            @media(min-width: 768px){
                flex: 0 0 calc(100% / 4 - var(--itemColumnSize) * 3 / 4);
            }

            a{
                transition: .4s;

                &:hover{
                    opacity: .7;
                }

                .jobs-area__date {
                    margin-bottom: .8rem;
                    font-size: 1.2rem;
                    font-weight: 700;
                }

                .field{
                    display: flex;
                    column-gap: 1.2rem;

                    & + .field{
                        margin-top: .8rem;
                    }

                    .label{
                        font-size: 1.2rem;
                        background: var(--colorMain);
                        color: var(--colorWhite);
                        padding: .4rem;
                        flex: 0 0 6em;
                        text-align: center;
                        align-self: baseline;
                        line-height: 1;
                        border-radius: .4rem;
                    }

                    .text{
                        flex: 1;
                    }
                }
            }
        }
    }

    .note{
        margin-top: 2.8rem;
        text-align: center;
    }
    .btn-area{
        margin-top: 4rem;

        a{
            margin-inline: auto;
        }
    }
}
.section-top__business{
    h2{
        margin-bottom: 2.8rem;
    }
    .text{
        letter-spacing: .1rem;
        line-height: 1.75;
    }
    .item-list{
        display: flex;
        flex-direction: column;
        column-gap: 2rem;
        row-gap: 4.8rem;
        margin-top: 6rem;

        @media(min-width: 768px){
            flex-direction: row;
        }

        .item{
            flex: 1;

            h3{
                margin: 1.6rem 2.4rem .8rem;
            }
            .item-text{
                line-height: 1.75;
                letter-spacing: .1rem;
                padding-left: 2.4rem;
                padding-right: 2.4rem;
            }
        }
    }
    .btn-area{
        margin-top: 4rem;

        a{
            margin-inline: auto;
        }
    }
}
.section-top__main-achievements{
    color: var(--colorWhite);
    background: var(--colorMain);

    .decoration{
        color: inherit;
    }

    .flex-area{
        display: flex;
        flex-direction: column;
        column-gap: 8rem;

        @media(min-width: 768px){
            flex-direction: row;
        }

        .left{
            flex: 0 0 55%;
            display: flex;
            flex-direction: column;
            column-gap: 6rem;
            
            @media(min-width: 768px){
                flex-direction: row;
            }

            .left__inner{
                @media(min-widht: 768px){
                    flex: 0 0 11em;
                }
            }

            .img-area{
                margin-top: 3.2rem;
                margin-bottom: 2.8rem;

                @media(min-width: 768px){
                    margin-top: 0;
                    margin-bottom: 0;
                }
                img{
                    max-height: 20rem;
                    object-fit: cover;
                    width: 100%;

                    @media(min-width: 768px){
                        max-height: 100%;
                    }
                }
            }
        }

        .right{
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            flex: 1;

            h3{
                margin-bottom: 3.2rem;
            }

            .text{
                max-width: 40rem;
                line-height: 2;
                letter-spacing: .1rem;
            }

            .btn-area{
                margin-top: 4rem;

                a{
                    background: var(--colorWhite);
                    color: var(--colorMain);
                    font-weight: 700;
                    margin-left: auto;
                }
            }
        }
    }
}
.section-top__news{
    h2{
        margin-bottom: 3.2rem;
    }
    .no-articles {
        text-align: center;
        letter-spacing: .2rem;
        padding-left: .2rem;
        padding-top: 4rem;
        padding-bottom: 2rem;
    }
    .news-area__list{
        display: flex;
        flex-direction: column;
        column-gap: 2rem;
        row-gap: 2rem;

        @media(min-width: 768px){
            flex-direction: row;
            
            > li{
                flex: 0 0 calc(100% / 3 - 2rem * 2 / 3);
            }
        }

        a{
            transition: .4s;

            &:hover{
                opacity: .7;
            }
            
            img{
                aspect-ratio: 3 / 2;
                object-fit: cover;
                object-position: center;
            }
            span.no-image{
                display: block;
                aspect-ratio: 3 / 2;
                background: #ddd;
            }
            .news-area__date{
                font-size: 1.2rem;
                font-weight: 700;
                margin-top: 1.2rem;
                margin-bottom: .4rem;
                padding-left: 1.2rem;
                padding-right: 1.2rem;
            }
            .news-area__link{
                font-size: 1.4rem;
                padding-left: 1.2rem;
                padding-right: 1.2rem;
            }
        }
    }
    .btn-area{
        margin-top: 4.8rem;

        a{
            margin-inline: auto;
        }
    }
}

.column-single-area, .section-job-single-area, .job-list-area, .column-list-area, .page{
    .page-main-title-area{
        padding-top: 2rem;

        .page-title-decoration{
            text-transform: capitalize;
            font-weight: 700;
        }
        .page-title{
            color: var(--colorMain);
            margin-bottom: 2rem;
            font-size: calc(var(--fontSizeBase) * 2.5);
        }
    }
    .page-thumbnail-area{
        margin-left: var(--gatterSide);
        margin-right: var(--gatterSide);

        img{
            max-height: 32rem;
            width: 100%;
            object-fit: cover;
            object-position: bottom;
        }
    }
}

/* company */
.section-company-greeting{
    .container{
        position: relative;
        
        &::before{
            @media(min-width: 768px){
                content: '';
                display: block;
                position: absolute;
                left: 0;
                background: var(--colorBG);
                z-index: -1;
                height: 60%;
                right: calc(50% - 50vw + var(--scrollBarSize, 0));
                top: calc(var(--paddingMain) / 2);
            }
        }
    }
    .inner-container{
        max-width: var(--widthSub);
        margin-inline: auto;

        .flex-area{
            display: flex;
            flex-direction: column;
            row-gap: 4.8rem;

            @media(min-width: 768px){
                flex-direction: row;
                align-items: flex-end;
            }

            .left{
                flex: 7;

                .inner{
                    @media(min-width: 768px){
                        padding-right: 10rem;
                    }

                    h2{
                        margin-bottom: 2.8rem;
                    }
                    h3{
                        margin-bottom: 1.6rem;
                        color: var(--colorMain);
                    }
                    .text{
                        letter-spacing: .1rem;
                        line-height: 2;

                        p + p{
                            margin-top: 2em;
                        }
                    }
                }
            }
            .right{
                flex: 3;

                .name{
                    text-align: right;
                    line-height: 2;
                }
            }
        }
    }
}
.section-company-philosophy{
    background:
        linear-gradient(0deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
        url(../img/company_philosophy.webp);
    background-position: center;
    background-size: cover;
    color: var(--colorWhite);

    .container{
        max-width: var(--widthSub);
        
        .flex-area{
            display: flex;
            flex-direction: column;
            column-gap: 12rem;
            row-gap: 4rem;

            @media(min-width: 768px){
                flex-direction: row;
            }

            .decoration{
                color: inherit;
            }
            h3{
                margin-bottom: 2.4rem;
            }
            .text{
                letter-spacing: .1rem;
                line-height: 2;
            }
        }
    }
}
.section-company-strengths{
    .decoration{
        text-align: center;
    }
    .title{
        text-align: center;
        margin-bottom: 4.8rem;
    }

    .strengths-lists{
        display: flex;
        flex-direction: column;
        --strengths-point-gatter: 2.8rem;
        column-gap: var(--strengths-point-gatter);
        row-gap: 6rem;
        counter-reset: number;

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

        .strengths-point{
            counter-increment: number;
            display: flex;

            @media(min-width: 768px){
                flex: 0 0 calc(100% / 3 - var(--strengths-point-gatter) * 3 / 4);
            }

            &::before{
                content: '0' counter(number);
                font-size: calc(var(--fontSizeBase)* 1.5);
                font-weight: 700;
                padding-right: 1.2rem;
                margin-right: 1.2rem;
                color: var(--colorMain);
                border-right: .6rem solid var(--colorMain);
            }

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

                h3{
                    color: var(--colorMain);
                }

                .text{
                    font-size: 1.4rem;
                    line-height: 2;
                    letter-spacing: .1rem;
                    padding-bottom: 2rem;
                    margin-top: 2rem;
                }
                .img-area{
                    margin-top: auto;
                }
            }
        }
    }
}
.section-company-norms{
    background: var(--colorMain);
    color: var(--colorWhite);

    .decoration{
        text-align: center;
        color: inherit;
    }
    .title{
        text-align: center;
        margin-bottom: 4.8rem;
    }

    .norms-list{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        --norms-gatter: 2rem;
        column-gap: var(--norms-gatter);
        counter-reset: number;
        row-gap: 2.8rem;

        @media(min-width: 768px){
            --norms-gatter: 4rem;
            flex-direction: row;
            row-gap: 6rem;
        }

        .norm{
            counter-increment: number;
            display: flex;
            flex: 0 0 calc(100% / 2 - var(--norms-gatter) * 2 / 3);

            @media(min-width: 768px){
                justify-content: center;
                flex: 0 0 calc(100% / 3 - var(--norms-gatter) * 3 / 4);
            }

            .text{
                margin-top: .8rem;
                line-height: 1.75;
                letter-spacing: .1rem;
                br{
                    display: none;

                    @media(min-width: 768px){
                        display: block;
                    }
                }
            }

            &::before{
                content: '0' counter(number);
                font-size: calc(var(--fontSizeBase)* 1.5);
                font-weight: 700;
                padding-right: 1.2rem;
                margin-right: 1.2rem;
                color: var(--colorWhite);
                border-right: .6rem solid var(--colorWhite);
            }
        }
    }
}
.section-company-business{
    .flex-area{
        display: flex;
        flex-direction: column-reverse;
        row-gap: 6rem;

        @media(min-width: 768px){
            flex-direction: row;
            position: relative;

            & > div{
                flex: 0 0 50%;
            }

            .left{
                position: sticky;
                top: 0;
                margin-left: calc(50% - 50vw + var(--scrollBarSize, 0) / 2);
                align-self: flex-start;

                img{
                    height: 100vh;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
        .right{
            @media(min-width: 768px){
                padding-left: 8rem;
            }

            .title{
                margin-bottom: 4.8rem;
            }

            h3{
                font-size: var(--fontSizeBase);
                background: var(--colorMain);
                color: var(--colorWhite);
                text-align: center;
                padding: .8rem;
                margin-bottom: 1.2rem;

                @media(min-width: 768px){
                    max-width: 20rem;
                }
            }
            .text{
                line-height: 2;
                letter-spacing: .1rem;

                + h3{
                    margin-top: 4.8rem;
                }
            }
        }
    }
}
.section-company-profile{
    background: var(--colorBG);

    .container{
        max-width: var(--widthSub);

        .title{
            margin-bottom: 4.8rem;
        }

        table{
            width: 100%;
            border-top: .1rem solid;
            border-collapse: collapse;

            th, td{
                border-bottom: .1rem solid;
                text-align: left;
                padding: 3.6rem 0;
            }
            th{
                width: 25%;
            }
            td{
                padding-left: 1em;
                padding-right: 1em;
            }
        }
    }
}
.section-company-access{
    .container{
        max-width: var(--widthSub);

        .title{
            margin-bottom: 4.8rem;
        }

        .h3-wrap{
            padding: .8rem 2.8rem;
            background: var(--colorBG);
            display: flex;
            align-items: center;
            column-gap: .8rem;
            margin-bottom: 2rem;

            .deco-circle{
                border: .3rem solid var(--colorMain);
                border-radius: 50%;
                height: 1.6rem;
                width: 1.6rem;
                position: relative;
                top: .1rem;
            }
            h3{
                font-size: calc(var(--fontSizeBase) * 1.25);
            }
        }

        .flex-area{
            display: flex;
            flex-direction: column;
            column-gap: 4rem;
            row-gap: 4rem;

            @media(min-width: 768px){
                flex-direction: row;
            }

            & + .h3-wrap{
                margin-top: 6rem;
            }

            .right{
                flex: 3;

                iframe{
                    min-height: 28rem;
                }
            }
            .left{
                flex: 2;
                line-height: 1.75;
                p + p{
                    margin-top: 2em;
                }
            }
        }
    }
}

/* business */
.section-business-area{
    overflow-x: hidden;
    position: relative;

    &::after{
        content: '';
        display: block;
        position: absolute;
        top: calc(var(--paddingMain) + 18rem);
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--colorBG);
        z-index: -1;

        @media(min-width: 768px){
            top: calc(var(--paddingMain) + 6rem);
        }
    }
    
    .container{
        max-width: var(--widthSub);

        .flex-area{
            position: relative;
            margin-bottom: 6rem;

            @media(min-width: 768px){
                margin-bottom: 10rem;
            }

            & .img-area.pc{
                display: none;
            }
            & .img-area.sp{
                margin-bottom: 2.8rem;
            }

            @media(min-width: 768px){
                & > div:has(.img-area.pc){
                    position: relative;
                    width: 100vw;
                    left: calc(50% - 50vw + var(--scrollBarSize, 0) / 2);
                }
                & .img-area.pc{
                    width: 50%;
                    display: block;
                }
                & .img-area.sp{
                    display: none;
                }
                & > .right:has(.img-area.pc) .img-area{
                    margin-left: auto;
                }

                & > div:has(.inner){
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
                & > .right:has(.inner) .inner{
                    margin-left: auto;
                    padding-left: 8rem;
                }
                & > .left:has(.inner) .inner{
                    padding-right: 8rem;
                }
            }
            
            .top-text{
                br{
                    display: none;

                    @media(min-width: 768px){
                        display: block;
                    }
                }
            }
            .inner{
                @media(min-width: 768px){
                    width: 50%;
                }

                h2{
                    margin-bottom: 2.8rem;
                }
                .top-text{
                    letter-spacing: .1rem;
                    line-height: 1.75;
                }
            }
        }

        .point-area{
            --business-point-gatter: 4rem;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: var(--business-point-gatter);
            row-gap: 4rem;
            counter-reset: number;

            @media(min-width: 768px){
                flex-direction: row;
            }

            & > .point{
                flex: 0 0 calc(50% - var(--business-point-gatter) / 2);
                counter-increment: number;
                display: flex;

                h3{
                    color: var(--colorMain);
                }
                .text{
                    line-height: 2;
                    letter-spacing: .1rem;
                    margin-top: .8rem;
                }

                &::before {
                    content: '0' counter(number);
                    font-size: calc(var(--fontSizeBase)* 1.5);
                    font-weight: 700;
                    padding-right: 1.2rem;
                    margin-right: 1.2rem;
                    color: var(--colorMain);
                    border-right: .6rem solid var(--colorMain);
                }
            }
        }
    }
}

/* history */
.section-history{
    counter-reset: number;

    .sticky-area{
        @media(min-width: 768px){
            position: relative;
            display: flex;

            & > div{
                flex: 1;

                &:has(.text){
                    flex: 0 0 50%;
                }
            }

            .sticky{
                position: sticky;
                top: 0;
                align-self: flex-start;

                &.left{
                    margin-left: calc(50% - 50vw + var(--scrollBarSize, 0) / 2);
                }
                &.right{
                    margin-right: calc(50% - 50vw + var(--scrollBarSize, 0) / 2);
                }

                img{
                    height: 100vh;
                    object-fit: cover;
                    object-position: center;
                }
            }

            .left:has(.text-area){
                padding-right: 8rem;
            }
            .right:has(.text-area){
                padding-left: 8rem;
            }
        }
        
        & + .sticky-area{
            margin-top: 2rem;
            @media(min-width: 768px){
                margin-top: 8rem;
            }
        }

        .right:has(.img-area),
        .right:has(.text-area){
            padding-top: 6rem;
            @media(min-width: 768px){
                padding-top: 0;
            }
        }
    }

    h2{
        margin-bottom: 4.8rem;
    }
    .h3-wrap{
        counter-increment: number;
        display: flex;
        color: var(--colorMain);
        &::before{
            content: counter(number);
            font-size: calc(var(--fontSizeBase) * 1.5);
            font-weight: 700;
            flex: 0 0 1em;
        }
        h3{
            margin-bottom: 1.2rem;
        }
    }
    .text-area{
        & + .text-area{
            margin-top: 6rem;
        }
        .text{
            letter-spacing: .1rem;
            line-height: 2;
        }
    }
}

/* define */
.section-define-wrap{
    .container{
        max-width: var(--widthSub);

        .title-wrap{
            display: flex;
            column-gap: 2.8rem;
            margin-bottom: 4.8rem;

            @media(min-width: 768px){
                &::after{
                    content: '';
                    display: block;
                    flex: 1;
                    height: 1.2rem;
                    width: 100%;
                    background: var(--colorMain);
                    align-self: flex-end;
                    position: relative;
                    bottom: .8rem;
                }
            }
        }
        
        .top-text{
            line-height: 2;
            letter-spacing: .2rem;
        }
    }
    .img-area.full-size{
        img{
            max-height: 32rem;
            object-fit: cover;
            width: 100%;
        }
    }

    .section-define-area1{
        h3{
            color: var(--colorMain);
            margin-bottom: 1.2rem;
        }
        .text{
            letter-spacing: .2rem;
            line-height: 2;

            & + h3{
                margin-top: 6rem;
            }
        }
    }
    .section-define-area3{
        .top-text{
            margin-bottom: 4.8rem;
        }

        .point-area{
            --define-point-gatter: 4rem;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: var(--define-point-gatter);
            row-gap: 4rem;
            counter-reset: number;

            @media(min-width: 768px){
                flex-direction: row;
            }

            & > .point{
                flex: 0 0 calc(50% - var(--define-point-gatter) / 2);
                counter-increment: number;
                display: flex;

                &::before{
                    content: '0' counter(number);
                    font-size: calc(var(--fontSizeBase)* 1.5);
                    font-weight: 700;
                    padding-right: 1.2rem;
                    margin-right: 1.2rem;
                    color: var(--colorMain);
                    border-right: .6rem solid var(--colorMain);
                }

                h3{
                    color: var(--colorMain);
                    margin-bottom: .8rem;
                }
                .text{
                    line-height: 2;
                    letter-spacing: .1rem;
                }
            }
        }
    }

    .section-define-area4{
        .container{
            padding-top: 0;

            .flex-area{
                display: flex;
                flex-direction: column;
                row-gap: 4.8rem;

                @media(min-width: 768px){
                    flex-direction: row;
                }

                & + .flex-area{
                    margin-top: 8rem;
                }

                & > div{
                    flex: 0 0 50%;

                    h3{
                        color: var(--colorMain);
                        margin-bottom: 1.2rem;
                    }
                    .text{
                        line-height: 2;
                        letter-spacing: .1rem;
                    }
                }
                @media(min-width: 768px){
                    & > .left{
                        order: -1;

                        &:has(.text){
                            padding-right: 4rem;
                        }
                    }
                    & > .right:has(.text){
                        padding-left: 4rem;
                    }
                }
            }
        }
    }
    .section-define-area5{
        .container{
            padding-top: 0;
        }

        .point-area{
            --define-point-gatter: 4rem;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: var(--define-point-gatter);
            row-gap: 4rem;
            counter-reset: number;

            @media(min-width: 768px){
                flex-direction: row;
            }

            & > .point{
                flex: 0 0 calc(50% - var(--define-point-gatter) / 2);
                counter-increment: number;
                display: flex;

                .point-text-area{
                    padding-right: 1.2rem;
                    margin-right: 1.2rem;
                    border-right: .6rem solid var(--colorMain);
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    line-height: 1;

                    &::before{
                        content: 'Point';
                        color: var(--colorMain);
                        font-size: 1.4rem;
                        font-weight: 700;
                        margin-bottom: .2rem;
                    }
                    &::after{
                        content: '0' counter(number);
                        font-size: calc(var(--fontSizeBase)* 1.5);
                        font-weight: 700;
                        color: var(--colorMain);
                    }
                }

                h3{
                    color: var(--colorMain);
                    margin-bottom: .8rem;
                }
                .text{
                    line-height: 2;
                    letter-spacing: .1rem;
                    word-break: break-all;
                }
            }
        }
    }
}

/* recruit */
.section-recruit-area1{
    .title{
        margin-bottom: 4.8rem;
    }
    table{
        width: 100%;
        border-spacing: 0;

        :is(th, td){
            border: .1rem solid var(--colorGray);
            border-bottom: none;
            padding: 2.8rem 1.2rem;

            @media(min-width: 768px){
                padding: 2.8rem;
            }
        }
        th{
            border-right: none;
            width: 28%;
            background: var(--colorBG);

            @media(min-width: 768px){
                width: 20%;
            }
        }
        tbody{
            tr:first-of-type{
                th{
                    border-radius: .4rem 0 0 0;
                }
                td{
                    border-radius: 0 .4rem 0 0;
                }
            }
            tr:last-of-type{
                th{
                    border-radius: 0 0 0 .4rem;
                    border-bottom: .1rem solid var(--colorGray);
                }
                td{
                    border-radius: 0 0 .4rem 0;
                    border-bottom: .1rem solid var(--colorGray);
                }
            }
        }
    }
}
.section-top__job.section-recruit-area1-5{
    background: var(--colorBG);
    padding-bottom: 0;
}
.section-recruit-area2{
    .title{
        margin-bottom: 4.8rem;
    }

    h3{
        background: var(--colorMain);
        color: var(--colorWhite);
        text-align: center;
        padding: 2rem;
        border-radius: .4rem .4rem 0 0;
    }
    .contact-content{
        background: var(--colorWhite);
        border-radius: 0 0 .4rem .4rem;
        border: .1rem solid #aaa;
        border-top: none;

        .inner{
            max-width: var(--widthSub);
            margin-inline: auto;
            padding: 4rem var(--gatterSide);
            box-sizing: content-box;

            @media(min-width: 768px){
                padding: 8rem 4rem;
            }

        }

        & + h3{
            margin-top: 6rem;
        }

        .text{
            line-height: 2;
            letter-spacing: .1rem;
            & + .text{
                border-top: .1rem solid #aaa;
                padding-top: 4rem;
                margin-top: 4rem;
            }
        }

        .note-area {
            margin-top: 1.2rem;
            font-size: 1.3rem;
            margin-bottom: 4.8rem;

            @media(min-width: 768px){
                margin-left: 26rem;
            }
        }
    }
}

/* works */
.section-works{
    table{
        width: 100%;
        border-spacing: 0;

        :is(th, td){
            border: .1rem solid var(--colorGray);
            border-bottom: none;
            padding: 2.8rem 1.2rem;

            @media(min-width: 768px){
                padding: 2.8rem;
            }
        }
        th{
            background: var(--colorBG);
        }
        tbody{
            tr:first-of-type{
                th:first-of-type{
                    border-radius: .4rem 0 0 0;
                }
                th:last-of-type{
                    border-radius: 0 .4rem 0 0;
                }
            }
            tr:last-of-type{
                td:first-of-type{
                    border-radius: 0 0 0 .4rem;
                    border-bottom: .1rem solid var(--colorGray);
                }
                td:last-of-type{
                    border-radius: 0 0 .4rem 0;
                    border-bottom: .1rem solid var(--colorGray);
                }
            }
            tr{
                *:first-of-type{
                    border-right: none;
                }
            }
        }
    }
}

/* contact common */
.wpcf7-form{
    .field{
        display: flex;
        flex-direction: column;
        column-gap: 2rem;

        @media(min-width: 768px){
            flex-direction: row;
        }

        & + .field{
            margin-top: 2rem;
        }

        .input{
            @media(min-width: 768px){
                flex: 1;
            }

            select{
                padding: .9rem 1.2rem;
                font: inherit;
                line-height: inherit;
                border: .1rem solid var(--colorGray);
                border-radius: .4rem;
            }
        }
        &.file-area{
            @media(min-width: 768px){
                min-height: 4.42rem;
                display: flex;
                align-items: center;
            }
        }
        .label{
            @media(min-width: 768px){
                flex: 0 0 24rem;
            }
        }

        label{
            display: flex;
            align-items: center;
            column-gap: 2rem;
            margin-bottom: .8rem;

            @media(min-width: 768px){
                margin-bottom: 0;
                min-height: 4.42rem;
            }

            .required{
                display: block;
                font-size: 1rem;
                background: var(--colorMain);
                color: var(--colorWhite);
                line-height: 1;
                padding: .8rem;
                border-radius: .4rem;
            }
        }

        :is(input:not([type=file]), textarea){
            padding: .8rem 1.2rem;
            border: .1rem solid var(--colorGray);
            border-radius: .4rem;
            width: 100%;
            line-height: 2;
        }
    }

    .wpcf7-form-control.wpcf7-submit{
        font: inherit;
        line-height: inherit;
        border: none;
        background: var(--colorMain);
        color: var(--colorWhite);
        display: block;
        cursor: pointer;
        text-align: center;
        padding: 1.6rem 2rem;
        max-width: 20rem;
        font-size: 1.4rem;
        border-radius: .4rem;
        width: 100%;
        margin-inline: auto;
        transition: opacity .4s;

        &:hover{
            opacity: .7;
        }
    }
    .wpcf7-not-valid-tip{
        font-size: 1.2rem;
        color: var(--colorMain);
        margin-top: .4rem;
    }
    .wpcf7-response-output{
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: center;
    }
}

/* contact */
.section-contact{
    .container{
        max-width: var(--widthSub);

        .btn-area{
            margin-top: 4.8rem;
        }
    }
}

/* job list */
.section-job-list{
    .container{
        max-width: var(--widthSub);

        .job-search-form{
            border-bottom: .2rem solid var(--colorGray);
            padding-bottom: 4rem;

            .form-title{
                text-align: center;
                background: var(--colorGray);
                color: var(--colorWhite);
                margin-inline: auto;
                max-width: 28rem;
                padding: 1.2rem;
                line-height: 1;
                margin-bottom: 2.8rem;
            }

            .label-row{
                display: flex;
                flex-wrap: wrap;
                font-size: 1.4rem;
                column-gap: 1rem;
                row-gap: 1.2rem;
                margin-bottom: 4rem;
                margin-inline: auto;
                max-width: 26rem;

                @media(min-width: 500px) {
                    max-width: 44rem;
                }

                @media(min-width: 768px){
                    max-width: 80rem;
                }

                label{
                    flex: 0 0 8rem;
                    cursor: pointer;
                }
            }
            .btn-area{
                button{
                    margin-inline: auto;
                }
            }
        }

        .archive-job__note-text{
            margin-top: 6rem;
            margin-bottom: 6rem;
            text-align: center;
            font-size: clamp(1.6rem, 1.5vw, 1.8rem);
            letter-spacing: .2rem;
            padding-left: .2rem;
        }

        .jobs-list-area{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            column-gap: 2rem;
            row-gap: 2rem;

            @media(min-width: 768px){
                flex-direction: row;
            }

            a{
                flex: 0 0 calc(100% / 3 - 2rem * 2 / 3);
                display: block;
                background: var(--colorBG);
                padding: 2.8rem;
                border-radius: .8rem;
                font-size: 1.4rem;
                transition: .4s;

                &:hover{
                    opacity: .7;
                }

                .jobs-list-area__date{
                    font-size: 1.2rem;
                    font-weight: 700;
                    margin-bottom: .8rem;
                }
                .field{
                    display: flex;
                    column-gap: 1.2rem;

                    .label{
                        font-size: 1.2rem;
                        background: var(--colorMain);
                        color: var(--colorWhite);
                        padding: .4rem;
                        flex: 0 0 6em;
                        text-align: center;
                        align-self: baseline;
                        line-height: 1;
                        border-radius: .4rem;
                    }

                    & + .field{
                        margin-top: .8rem;
                    }
                }
            }
        }
    }
}

/* privacy */
.section-privacy{
    .container{
        max-width: var(--widthSub);

        .top-text{
            line-height: 2;
            letter-spacing: .1rem;
            margin-bottom: 4.8rem;
        }
        h3{
            margin-bottom: .8rem;
            color: var(--colorMain);
        }
        .text{
            line-height: 2;
            letter-spacing: .1rem;

            & + h3{
                margin-top: 2.8rem;
            }
        }
    }
}

/* pagination */
.pagination{
    margin-top: 6.4rem;
    .screen-reader-text {
        display: none;
    }
    .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        row-gap: .8rem;
        column-gap: .4rem;

        & > * {
            min-width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: .2rem solid var(--colorMain);
            font-size: 1.4rem;
            color: var(--colorMain);
            
            &.current {
                background: var(--colorMain);
                color: var(--colorWhite);
            }
            &:is(.next, .prev, .dots) {
                border-color: transparent;
                min-width: 3.2rem;
            }
        }
    }
}

/* home */
.blog{
    .no-articles{
        text-align: center;
        letter-spacing: .2rem;
        padding-left: .2rem;
    }
    .grid-area{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
        column-gap: 2rem;
        row-gap: 4rem;

        a{
            transition: .4s;

            &:hover{
                opacity: .7;
            }

            img{
                aspect-ratio: 3 / 2;
                object-fit: cover;
                object-position: center;
            }
            span.no-image{
                aspect-ratio: 3 / 2;
                display: block;
                background: #ddd;
            }
            .text-area{
                padding: 1.2rem 1.2rem 0;

                .date{
                    font-size: 1.2rem;
                    font-weight: 700;
                    margin-bottom: .4rem;
                }
                .card-title{
                    font-size: 1.4rem;
                }
            }
        }
    }
}

/* column */
.section-single-area{
    .container{
        max-width: var(--widthSub);

        .thumbnail-area{
            margin-bottom: 4rem;
            img{
                margin-inline: auto;
            }
        }
        .time {
            margin-top: 1.2rem;
            margin-bottom: 4rem;
            /* text-align: right; */
            font-size: 1.4rem;
            font-weight: 700;
        }

        .article-link-btn-area{
            display: flex;
            justify-content: space-between;
            column-gap: 2rem;
            margin-top: 8rem;
            border-top: .1rem solid var(--colorGray);
            padding-top: 4rem;
            font-size: 1.4rem;
        }

        .content{
            line-height: 2;
            letter-spacing: .1rem;

            h1, h2{
                color: var(--colorMain);
                line-height: 1.25;
            }
            & > :not(:is(h1, h2, h3)) + *{
                margin-top: 2em;
            }
            & > * + :is(h1, h2){
                margin-top: 4.8rem;
                margin-bottom: 2rem;
            }
            & > * + h3{
                margin-top: 3.2rem;
                margin-bottom: .8rem;
            }
            table {
                border-collapse: separate;
                border-spacing: 0;
                empty-cells: show;
                border-top: .1rem solid;
                border-left: .1rem solid;

                th, td{
                    border: .1rem solid;
                    border-top: none;
                    border-left: none;
                    padding: 2.4rem 1.2rem;
                    text-align: left;
                }
                th{
                    background: var(--colorBG);
                }
            }
            a{
                text-decoration: underline;
                color: var(--colorMain);
                transition: .4s;

                &:hover{
                    opacity: .7;
                }
            }
            ul{
                li::before{
                    content: '・';
                    margin-right: .25em;
                }
            }
            ol{
                counter-reset: number;

                li{
                    counter-increment: number;

                    &::before{
                        content: counter(number) '.';
                        margin-right: .25em;
                    }
                }
            }
            & :is(ol, ul) li + li{
                margin-top: .25em;
            }
            dl{
                display: flex;
                border: .1rem solid;

                dt{
                    background: var(--colorBG);
                    border-right: .1rem solid;
                }
            }
            & :is(dt, dd){
                flex: 1;
                padding: 1.2rem;
            }
        }
    }
}

/* single job */
.section-job-single-area{
    .container.container-padding{
        max-width: var(--widthSub);
        .time{
            font-size: 1.4rem;
            margin-top: .8rem;
            margin-bottom: 2rem;
        }
        .bottom-text{
            margin-top: 4.8rem;
            text-align: center;
        }
        table{
            width: 100%;
            border-spacing: 0;

            :is(th, td){
                border: .1rem solid var(--colorGray);
                border-bottom: none;
                padding: 2.8rem 1.2rem;

                @media(min-width: 768px){
                    padding: 2.8rem;
                }
            }
            th{
                border-right: none;
                width: 28%;
                background: var(--colorBG);

                @media(min-width: 768px){
                    width: 20%;
                }
            }
            tbody{
                tr:first-of-type{
                    th{
                        border-radius: .4rem 0 0 0;
                    }
                    td{
                        border-radius: 0 .4rem 0 0;
                    }
                }
                tr:last-of-type{
                    th{
                        border-radius: 0 0 0 .4rem;
                        border-bottom: .1rem solid var(--colorGray);
                    }
                    td{
                        border-radius: 0 0 .4rem 0;
                        border-bottom: .1rem solid var(--colorGray);
                    }
                }
            }
        }
        .btn-area{
            margin-top: 4.8rem;

            a{
                margin-inline: auto;
            }
        }
        .article-link-btn-area{
            display: flex;
            justify-content: space-between;
            margin-top: 6rem;
        }
    }
}

/* footer */
.footer{
    background: var(--colorGray);
    color: var(--colorWhite);
    padding: 6rem var(--gatterSide) 4rem;

    .footer-container{
        max-width: var(--widthMain);
        margin-inline: auto;

        .footer-content-area{
            display: flex;
            flex-direction: column;
            row-gap: 4rem;

            @media(min-width: 1000px){
                flex-direction: row;
                justify-content: space-between;
            }

            .footer-sidebar{
                font-size: 1.4rem;

                .logo-area{
                    max-width: 28rem;
                    margin-bottom: 2.8rem;
                }
                .text{
                    line-height: 1.75;
                }
                .to-privacy{
                    margin-top: 2.4rem;

                    a{
                        transition: .4s;

                        &:hover{
                            text-decoration: underline;
                            opacity: .7;
                        }
                    }
                }
            }

            .global-nav > ul{
                display: flex;
                flex-direction: column;
                font-size: 1.4rem;
                column-gap: 4.8rem;

                & > li{
                    border-bottom: .1rem solid;
                    padding: 1.6rem 1em;

                    @media(min-width: 768px){
                        border-bottom: none;
                        padding: 0;
                        min-width: 4em;
                    }
                }

                a{
                    transition: .4s;
                    &:hover{
                        text-decoration: underline;
                        opacity: .7;
                    }
                }

                .sub-menu{
                    padding-left: 1em;
                    margin-top: .8rem;

                    @media(min-width: 768px){
                        padding-left: 0;
                    }

                    li{
                        &::before{
                            content: '-';
                            margin-right: .3rem;
                        }
                        font-size: 1.2rem;
                        & + li{
                            margin-top: .8rem;
                        }
                    }
                }

                @media(min-width: 768px){
                    flex-direction: row;
                    flex-wrap: wrap;
                    row-gap: 2.8rem;
                    max-width: 64rem;
                }
            }
        }

        .copyright{
            text-align: center;
            font-size: 1.2rem;
            margin-top: 4.8rem;
        }
    }
}