@charset 'utf-8';

:root{
    --basic-fontcolor:#333;
    --color-white:#FFF;
    --color-white-opacity70:rgba(255,255,255,0.7);
    --color-white-opacity50:rgba(255,255,255,0.5);
    --color-white-opacity30:rgba(255,255,255,0.3);
    --color-gray:#DCDCDC;
    --color-blue:#064F88;
    --accent-color01:#F85E1D;
    --accent-color02:#C4B37C;
    --accent-color03:#002F55;
    --accent-color04:#C6E4FD;
    --accent-color05:#588C9A;
    --tr-fast:0.2s ease;
    --tr-normal:0.4s ease;
    --tr-slow:0.6s ease;
}

html{
    font-size:62.5%;
}

body{
    font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
    letter-spacing:0.02em;
    background-color:var(--color-blue);
}
main{
    overflow:hidden;
}

th,h1,h2,h3,h4,h5,h6,p,a,img,strong{
    color:var(--basic-fontcolor);
    vertical-align:top;
}

.br-sp{
    display:none;
}
@media (width < 768px){
    .br-sp{
        display:block;
    }
    .br-pc{
        display:none;
    }
}

.inner{
    width:100%;
    max-width:1300px;
    padding-right:3.4rem;
    padding-left:3.4rem;
    margin-right:auto;
    margin-left:auto;
}
@media (width < 768px){
    .inner{
        padding-right:1.5rem;
        padding-left:1.5rem;
    }
}

.content-title{
    display:flex;
    align-items:center;
    margin-bottom:8rem;
    & .h2{
        height:16rem;
        border-radius:8rem;
        font-size:clamp(2.8rem, 2.103vw + 2.127rem, 5rem);
        line-height:1.4;
        padding:3.2rem clamp(5rem, 9.56vw + 1.941rem, 15rem) 3.2rem;
    }
}
@media (width < 768px){
    .content-title{
        margin-bottom:4rem;
        & .h2{
            max-width:85%;
            height:auto;
            padding:2rem clamp(5rem, 6.522vw + 2.913rem, 8rem);
        }
    }
}

.h2{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0.2em;
    letter-spacing:0.12em;
    font-feature-settings:'palt';
    & span{
        display:block;
        font-size:clamp(1.2rem, 0.191vw + 1.139rem, 1.4rem);
        letter-spacing:0.05em;
        color:var(--accent-color02);
    }
}
.h3{
    width:100%;
    max-width:36rem;
    font-size:clamp(2rem, 0.765vw + 1.755rem, 2.8rem);
    font-weight:600;
    text-align:center;
    line-height:1.6;
    padding:0 3rem;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:5rem;
    position:relative;
    &:before{
        content:"";
        display:block;
        width:100%;
        height:clamp(5rem, 2.868vw + 4.082rem, 8rem);
        mask-image:url(../img/h3.svg);
        -webkit-mask-image:url(../img/h3.svg);
        mask-repeat:no-repeat;
        -webkit-mask-repeat:no-repeat;
        mask-size:contain;
        -webkit-mask-size:contain;
        mask-position:center;
        -webkit-mask-position:center;
        background-color:var(--color-white);
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
    }
}
@media (width < 768px){
    .h3{
        width:clamp(26rem, 8.715vw + 23.211rem, 30rem);
        margin-bottom:4rem;
    }
}

.txt{
    font-weight:500;
    font-size:clamp(1.5rem, 0.191vw + 1.439rem, 1.7rem);
    line-height:1.8;
}

img{
    -webkit-touch-callout:none;
    user-select:none;
    pointer-events:none; 
}

section,
footer{
    & a[target="_blank"]{
        &:after{
            content:"";
            display:inline-block;
            vertical-align:middle;
            width:0.9em;
            height:0.9em;
            background-image:url(../img/link.svg);
            background-repeat:no-repeat;
            background-position:center;
            background-size:contain;
            margin-top:-0.3rem;
            margin-left:0.6rem;
        }
    }
}


/* =========== header ============ */
#header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    width:100%;
    padding:2.4rem 0 2.4rem 2.4rem;
    position:fixed;
    top:0;
    z-index:50;
    & h1{
        & img{
            width:clamp(14rem, 13.384vw + 9.717rem, 28rem);
        }
    }
    & .menu-btn{
        display:none;
    }
    & ul{
        display:flex;
        align-items:center;
        gap:1.2rem;
        background-color:var(--color-white);
        border-radius:5rem 0 0 5rem;
        box-shadow:0 2px 6px rgba(0, 18, 33, 0.2);
        padding:1.6rem 3rem 1.6rem 4rem;
        & li{
            & a{
                display:flex;
                align-items:center;
                gap:0.6rem;
                text-decoration:none;
                font-size:1.6rem;
                font-weight:600;
                white-space:nowrap;
                padding:0.8rem;
                transition:all var(--tr-normal);
                -webkit-transition:all var(--tr-normal);
                &:after{
                    content:"";
                    display:block;
                    width:1rem;
                    height:1rem;
                    mask-image:url(../img/arrow01.svg);
                    -webkit-mask-image:url(../img/arrow01.svg);
                    mask-repeat:no-repeat;
                    -webkit-mask-repeat:no-repeat;
                    mask-position:center;
                    -webkit-mask-position:center;
                    mask-size:contain;
                    -webkit-mask-size:contain;
                    background-color:var(--accent-color05);
                    transition:all var(--tr-normal);
                    -webkit-transition:all var(--tr-normal);
                }
            }
            &:not(:last-child){
                & a{
                    &:hover{
                        color:var(--accent-color01);
                        &:after{
                            transform:translateY(42%);
                            -webkit-transform:translateY(42%);
                        }
                    }
                }
            }
            &:last-child{
                margin-left:0.6rem;
                & a{
                    gap:0.8rem;
                    color:var(--color-white);
                    background:var(--accent-color01);
                    border:2px solid var(--accent-color01);
                    border-radius:4rem;
                    padding:0.8rem 2.4rem;
                    &:after{
                        width:0.9rem;
                        height:0.9rem;
                        mask-image:url(../img/arrow02.svg);
                        -webkit-mask-image:url(../img/arrow02.svg);
                        background-color:var(--color-white);
                    }
                    &:hover{
                        color:var(--accent-color01);
                        background-color:var(--color-white);
                        border-color:var(--accent-color01);
                        &:after{
                            background-color:var(--accent-color01);
                            transform:translate(40%,-35%);
                            -webkit-transform:translate(40%,-35%);
                        }
                    }
                }
            }
        }
    }
}

@media (width < 1300px){
    #header{
        padding:1rem 0 1rem 1.5rem;
        & h1{
            z-index:1;
        }
        & .menu-btn{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:0.8rem;
            width:7.8rem;
            height:6.4rem;
            border-radius:4rem 0 0 4rem;
            background-color:var(--color-white);
            box-shadow:0 2px 4px rgba(0, 18, 33, 0.2);
            padding:1rem 1.5rem 1rem 2.4rem;
            z-index:1;
            &:after{
                content:"MENU";
                font-size:clamp(1.1rem, 0.096vw + 1.069rem, 1.2rem);
                font-weight:600;
                text-align:center;
                color:var(--color-blue);
                text-box:trim-both cap alphabetic;
            }
            & span{
                display:block;
                width:3rem;
                height:1.9rem;
                background:linear-gradient(var(--color-blue), var(--color-blue)) left 0 top 8px / 100% 3px no-repeat;
                margin-right:auto;
                margin-left:auto;
                position:relative;
                transition:all var(--tr-normal);
                -webkit-transition:all var(--tr-normal);
                &:before,
                &:after{
                    content:"";
                    display:block;
                    width:100%;
                    height:3px;
                    background-color:var(--color-blue);
                    position:absolute;
                    left:0;
                    transition:all var(--tr-normal);
                    -webkit-transition:all var(--tr-normal);
                }
                &:before{
                    top:0;
                }
                &:after{
                    bottom:0;
                }
            }
            &.open{
                &:after{
                    content:"CLOSE";
                }
                & span{
                    background:transparent;
                    &:before{
                        transform:rotate(45deg);
                        -webkit-transform:rotate(45deg);
                        top:8px;
                    }
                    &:after{
                        transform:rotate(-45deg);
                        -webkit-transform:rotate(-45deg);
                        bottom:8px;
                    }
                }
            }
        }
        & ul{
            opacity:0;
            transform:translateY(-20px);
            transition:0.3s;
            visibility:hidden;
            position:absolute;
            width:36rem;
            height:100vh;
            overflow-y:auto;
            flex-direction:column;
            gap:0;
            border-radius:0;
            box-shadow:none;
            padding-top:8.4rem;
            top:0;
            right:0;
            z-index:0;
            &.open{
                visibility:visible;
                opacity:1;
                transform:translateY(0);
            }
            & li{
                width:100%;
                & a{
                    width:100%;
                    font-size:clamp(1.7rem, 0.096vw + 1.669rem, 1.8rem);
                    justify-content:center;
                    padding:1.6rem 2rem;
                }
                &:not(:last-child){
                    border-bottom:1px dashed var(--color-gray);
                    & a:after{
                        content:none;
                    }
                }
                &:last-child{
                    margin-top:2.4rem;
                    margin-left:0;
                    & a{
                        padding:1.2rem 3rem;
                        &:after{
                            width:1rem;
                            height:1rem;
                            margin-top:0.3rem;
                        }
                    }
                }
            }
        }
    }
}
@media (width < 768px){
    #header{
        height:7.4rem;
        padding-top:0.6rem;
        padding-bottom:0.6rem;
        transition:var(--tr-fast);
        -webkit-transition:var(--tr-fast);
        &.open{
            background-color:var(--color-blue);
        }
        & h1{
            & a{
                & img{
                    width:clamp(20rem, 13.043vw + 15.826rem, 26rem)
                }
            }
        }
        & .menu-btn{
            width:6.8rem;
            height:6rem;
            padding:0 1.5rem 0 2.4rem;
            
        }
        & ul{
            width:100%;
            height:100vh;
            background:linear-gradient(var(--color-blue) 7.4rem, var(--color-white) 0%);
            background-color:var(--color-blue);
            padding-top:9.2rem;
            & li{
                &:last-child{
                    & a{
                        max-width:24rem;
                        margin:0 auto;
                    }
                }
            }
        }
    }
}


/* =========== mainVisual ============ */
#mainVisual{
    width:100%;
    height:112svh;
    max-height:1120px;
    position:relative;
    & img{
        display:block;
        width:76%;
        height:100%;
        object-fit:cover;
        object-position:center;
        border-radius:0 0 0 8rem;
        margin-right:0;
        margin-left:auto;
        filter:brightness(0.95);
        opacity:0;
        animation:fadeIn 0.6s ease forwards;
    }
    & .catchcopy{
        position:absolute;
        left:8%;
        bottom:21svh;
        opacity:0;
        transform:translateY(10px);
        animation:fadeIn 0.8s ease forwards;
        animation-delay:0.4s;
        & h2{
            color:var(--color-white);
            font-size:clamp(5.8rem, 2.048vw + 4.203rem, 7rem);
            font-weight:700;
            letter-spacing:0.07em;
        }
    }
}

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

@media (width < 768px){
    #mainVisual{
        height:94svh;
        max-height:520px;
        & img{
            width:82%;
            border-radius:0 0 0 6rem;
            object-position:10% center;
        }
        & .catchcopy{
            left:1.5rem;
            bottom:15%;
            & h2{
                font-size:clamp(3.1rem, 5vw + 1.5rem, 5.4rem);
            }
        }
    }
}


/* =========== about ============ */
#about{
    padding-top:12rem;
    margin:6rem 0 -5px;
    & .inner{
        & .sec-about{
            display:flex;
            align-items:flex-start;
            gap:8%;
            margin-bottom:8rem;
            & .about-img{
                display:grid;
                grid-template-columns:repeat(24,1fr);
                grid-template-rows:repeat(28,1fr);
                width:46%;
                aspect-ratio:6/7;
                & img{
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    border-radius:1.4rem;
                    &.fade-in{
                        opacity:0;
                        transform:translateY(30px);
                        transition:0.6s ease;
                        &.show{
                            opacity:1;
                            transform:translateY(0);
                        }
                        &:nth-child(1){
                            grid-column:1/14;
                            grid-row:1/11;
                            transition-delay:0.2s;
                        }
                        &:nth-child(2){
                            grid-column:16/26;
                            grid-row:8/14;
                            transition-delay:0.3s;
                        }
                        &:nth-child(3){
                            grid-column:3/23;
                            grid-row:16/29;
                            transition-delay:0.4s;
                        }
                    }
                }
            }
            & .about-txt{
                width:auto;
                & p{
                    color:var(--color-white);
                    font-size:clamp(1.5rem, 0.287vw + 1.408rem, 1.8rem);
                    font-weight:500;
                    line-height:2;
                    margin-bottom:3.6rem;
                    &.fade-in{
                        opacity:0;
                        transform:translateY(30px);
                        transition:0.8s ease;
                        &.show{
                            opacity:1;
                            transform:translateY(0);
                        }
                        &:nth-child(1){
                            transition-delay:0s;
                        }
                        &:nth-child(2){
                            transition-delay:0.3s;
                        }
                        &:nth-child(3){
                            transition-delay:0.6s;
                        }
                    }
                }
            }
        }
        & .sec-movie{
            & h3{
                color:var(--color-white);
            }
            & video{
                display:block;
                width:80%;
                aspect-ratio:16/9;
                background-color:var(--accent-color03);
                margin:0 auto;
            }
        }
    }
    & .scroll-txt{
        position:relative;
        display:inline-block;
        width:100%;
        height:clamp(6rem, 21.739vw + -0.957rem, 16rem);
        overflow:hidden;
        margin-top:12rem;
        &:before{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:200%;
            height:100%;
            background-image:url(../img/DAIICHIKENZAI.svg);
            background-repeat:repeat-x;
            background-size:auto 100%;
            animation:slide 20s linear infinite;
            opacity:0.1;
        }
    }
}

@keyframes slide{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media (width < 768px){
    #about{
        padding-top:6rem;
        margin-top:0;
        & .inner{
            & .sec-about{
                flex-direction:column;
                align-items:center;
                gap:8rem;
                margin-bottom:0;
                & .about-img{
                    width:90%;
                    max-width:50rem;
                }
                & .about-txt{
                    & p{
                        margin-bottom:2.4rem;
                    }
                }
            }
        }
        & .scroll-txt{
            margin-top:10rem;
        }
    }
}


/* =========== environent ============ */
#environment{
    padding-top:clamp(25rem, 33.461vw + 14.293rem, 60rem);
    position:relative;
    z-index:1;
    margin-bottom:-8rem;
    &:before{
        content:"";
        display:block;
        width:100%;
        height:clamp(30rem, 47.801vw + 14.704rem, 80rem);
        background-image:image-set(
            url("../img/webp/img_environment.webp") type("image/webp"),
            url("../img/img_environment.jpg") type("image/jpeg")
        );
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
    }
    & .env-bg{
        position:relative;
        padding-bottom:8rem;
        &:before{
            content:"";
            display:block;
            width:130%;
            height:100%;
            background:linear-gradient(#E8F5F9 50%, #F9F3E0);
            border-top-left-radius:50% 20svw;
            border-top-right-radius:50% 20svw;
            border-bottom-left-radius:50% 20svw;
            border-bottom-right-radius:50% 20svw;
            position:absolute;
            top:8rem;
            left:50%;
            transform:translateX(-50%);
            -webkit-transform:translateX(-50%);
            z-index:-1;
        }
        & .content-title{
            justify-content:center;
            margin-top:-9rem;
            & .h2{
                min-width:30rem;
                align-items:center;
                text-align:center;
                color:var(--color-white);
                background-color:var(--color-blue);
            }
        }
        & .inner{
            & .desc{
                text-align:center;
                margin-bottom:12rem;
                & h3{
                    font-size:clamp(2.4rem, 0.956vw + 2.094rem, 3.4rem);
                    color:var(--color-blue);
                    margin-bottom:3rem;
                }
                & .txt{
                    line-height:2;
                }
                &.fade-in{
                    opacity:0;
                    transform:translateY(20px);
                    transition:0.6s ease;
                    transition-delay:0.2s;
                    &.show{
                        opacity:1;
                        transform:translateY(0);
                    }
                }
            }
        }
        & .scroll-gallery{
            width:100%;
            overflow:hidden;
            margin-bottom:16rem;
            & .scroll-track{
                display:flex;
                align-items:flex-start;
                gap:2rem;
                width:max-content;
                animation:scroll-left 70s linear infinite;
                & img{
                    width:clamp(21rem, 15.296vw + 16.105rem, 37rem);
                    height:auto;
                    object-fit:contain;
                    margin-right:0;
                    flex-shrink:0;
                    border-radius:2rem;
                    &:nth-child(odd){
                        margin-top:4rem;
                    }
                }
            }
        }
        & .inner{
            & .h3{
                color:var(--accent-color03);
                &:before{
                    background-color:var(--accent-color03);
                }
            }
            & .sec-number{
                margin-bottom:14rem;
                & .sec-content{
                    display:flex;
                    flex-wrap:wrap;
                    gap:clamp(1rem, 0.956vw + 0.694rem, 2rem);
                    & .number-box{
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        background-color:var(--color-white);
                        border-radius:0.8rem;
                        padding:2rem;
                        & .box-content{
                            display:flex;
                            justify-content:center;
                            align-items:center;
                            gap:4%;
                            width:100%;
                            & .number-data{
                                display:flex;
                                flex-direction:column;
                                justify-content:center;
                                align-items:center;
                                gap:1.4rem;
                                & .data-item{
                                    font-size:clamp(1.4rem, 0.096vw + 1.369rem, 1.5rem);
                                    text-align:center;
                                    font-weight:600;
                                    white-space:nowrap;
                                    line-height:1.5;
                                    text-box:trim-both cap alphabetic;
                                    border-radius:4rem;
                                    padding:1.2rem 1.6rem;
                                }
                                &:first-of-type .data-item{
                                    color:var(--color-white);
                                    background-color:var(--color-blue);
                                }
                                &:last-of-type .data-item{
                                    color:var(--color-blue);
                                    background-color:var(--accent-color04);
                                }
                                & .number{
                                    display:flex;
                                    justify-content:center;
                                    align-items:baseline;
                                    font-weight:bold;
                                    white-space:nowrap;
                                    line-height:1;
                                    & p:first-child{
                                        display:flex;
                                        align-items:center;
                                        font-family:"Urbanist", sans-serif;
                                        font-size:clamp(5rem, 1.912vw + 4.388rem, 7rem);
                                        color:var(--color-blue);
                                    }
                                    & p:last-child{
                                        font-size:clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
                                        color:var(--color-blue);
                                        margin-left:0.2rem;
                                    }
                                    & span{
                                        font-size:2.6rem;
                                        margin:0 0.1em;
                                    }
                                }
                            }
                            & .chart{
                                width:32%;
                            }
                        }
                        &.danjo,
                        &.gaikoku{
                            & .number-data{
                                flex:1;
                            }
                        }
                        &.danjo,
                        &.gaikoku,
                        &.nenrei{
                            width:calc(50% - (clamp(1rem, 0.956vw + 0.694rem, 2rem)/2));
                        }
                        &.kinmu{
                            width:calc(65% - (clamp(1rem, 0.956vw + 0.694rem, 2rem)/2));
                            & .box-content{
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                gap:7%;
                                & .number-data{
                                    flex-direction:row;
                                    gap:14%;
                                    &:first-child{
                                        justify-content:flex-end;
                                        border-right:1px solid var(--color-gray);
                                        padding-right:7%;
                                    }
                                    &:last-child{
                                        justify-content:flex-start;
                                    }
                                }
                            }
                        }
                        &.zangyou{
                            width:calc(35% - (clamp(1rem, 0.956vw + 0.694rem, 2rem)/2));
                        }
                        &.nenrei{
                            & .box-content{
                                gap:0;
                                max-width:44rem;
                                & ul{
                                    display:flex;
                                    flex-direction:column;
                                    gap:1.8rem;
                                }
                                & ul:first-child{
                                    border-right:1px solid var(--color-gray);
                                    padding:1.6rem 5% 1rem 0;
                                    & li{
                                        display:flex;
                                        align-items:baseline;
                                        gap:0.2em;
                                        height:3rem;
                                        & p{
                                            font-weight:bold;
                                            &:first-child{
                                                font-size:clamp(1.8rem, 0.382vw + 1.678rem, 2.2rem);
                                                font-family:"Urbanist", sans-serif;
                                            }
                                            &:last-child{
                                                font-size:clamp(1.3rem, 0.096vw + 1.269rem, 1.4rem);
                                            }
                                        }
                                    }
                                }
                                & ul:last-child{
                                    flex:1;
                                    & li{
                                        display:flex;
                                        align-items:center;
                                        gap:4%;
                                        & .bar{
                                            display:block;
                                            height:3rem;
                                            background-color:var(--color-blue);
                                            &.bar-6{
                                                width:90%;
                                            }
                                            &.bar-5{
                                                width:calc(90%/6*5);
                                            }
                                            &.bar-4{
                                                width:calc(90%/6*4);
                                            }
                                            &.bar-2{
                                                width:calc(90%/6*2);
                                            }
                                        }
                                        & .number{
                                            display:flex;
                                            align-items:baseline;
                                            gap:0.2em;
                                            font-weight:bold;
                                            line-height:1;
                                            & p{
                                                color:var(--color-blue);
                                                &:first-child{
                                                    font-family:"Urbanist", sans-serif;
                                                    font-size:clamp(2.4rem, 0.574vw + 2.216rem, 3rem);
                                                }
                                                &:last-child{
                                                    font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & h4{
                            font-size:clamp(1.8rem, 0.191vw + 1.739rem, 2rem);
                            text-align:center;
                            margin-bottom:3rem;
                        }
                        &.fade-in{
                            opacity:0;
                            transform:translateY(20px);
                            transition:0.6s ease;
                            &.show{
                                opacity:1;
                                transform:translateY(0);
                                &:nth-child(1){
                                    transition-delay:0.2s;
                                }
                                &:nth-child(2){
                                    transition-delay:0.3s;
                                }
                                &:nth-child(3){
                                    transition-delay:0.4s;
                                }
                                &:nth-child(4){
                                    transition-delay:0.5s;
                                }
                                &:nth-child(5){
                                    transition-delay:0.6s;
                                }
                            }
                        }
                    }
                    & .number-box-group{
                        display:flex;
                        flex-wrap:wrap;
                        gap:clamp(1rem, 0.956vw + 0.694rem, 2rem);
                        width:calc(50% - (clamp(1rem, 0.956vw + 0.694rem, 2rem)/2));
                        & .number-box{
                            width:calc(50% - (clamp(1rem, 0.956vw + 0.694rem, 2rem)/2));
                            & .box-content{
                                flex-direction:column;
                                gap:0;
                            }
                            &.fade-in{
                                &:nth-child(1){
                                    transition-delay:0.7s;
                                }
                                &:nth-child(2){
                                    transition-delay:0.8s;
                                }
                                &:nth-child(3){
                                    transition-delay:0.9s;
                                }
                                &:nth-child(4){
                                    transition-delay:1.0s;
                                }
                            }
                        }
                        & .note{
                            font-size:1.4rem;
                        }
                    }
                }
            }
            & .sec-hukuri{
                & .sec-content{
                    &.fade-in{
                        opacity:0;
                        transform:translateY(30px);
                        transition:0.6s ease;
                        transition-delay:0.2s;
                        &.show{
                            opacity:1;
                            transform:translateY(0);
                        }
                    }
                    & ul{
                        display:flex;
                        flex-wrap:wrap;
                        justify-content:center;
                        gap:clamp(1rem, 0.382vw + 0.878rem, 1.4rem);
                        & li{
                            display:flex;
                            flex-direction:column;
                            align-items:center;
                            justify-content:center;
                            width:calc(calc(100% - (clamp(1rem, 0.382vw + 0.878rem, 1.4rem)*2))/3);
                            background-color:var(--color-white);
                            border-radius:1rem;
                            color:var(--color-blue);
                            text-align:center;
                            font-size:clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
                            font-weight:600;
                            line-height:1.5;
                            padding:1.2rem 2%;
                            & span{
                                display:block;
                                font-size:1.3rem;
                                font-weight:normal;
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes scroll-left{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

@media (width < 768px){
    #environment{
        & .env-bg{
            padding-bottom:4rem;
            &:before{
                top:5rem;
            }
            & .content-title{
                margin-bottom:5rem;
            }
            & .scroll-gallery{
                margin-bottom:8rem;
            }
            & .inner{
                & .desc{
                    margin-bottom:6rem;
                }
                & .sec-number{
                    margin-bottom:8rem;
                    & .sec-content{
                        flex-direction:column;
                        & .number-box{
                            padding:1.5rem 1.8rem;
                            & h4{
                                margin-bottom:1.6rem;
                            }
                            & .box-content{
                                & .chart{
                                    width:28%;
                                }
                                & .number-data{
                                    & .data-item{
                                        padding:1.2rem;
                                    }
                                }
                            }
                            &.kinmu{
                                & .box-content{
                                    gap:3rem;
                                    & .number-data{
                                        gap:2rem;
                                        &:first-child{
                                            padding-right:3rem;
                                        }
                                    }
                                }
                            }
                            &.nenrei{
                                & .box-content{
                                    width:100%;
                                }
                            }
                            &.danjo,
                            &.gaikoku,
                            &.nenrei{
                                & h4{
                                    margin-bottom:2.4rem;
                                }
                            }
                            &.danjo,
                            &.gaikoku,
                            &.nenrei,
                            &.kinmu,
                            &.zangyou{
                                width:100%;
                            }
                        }
                        & .number-box-group{
                            width:100%;
                            gap:1rem;
                        }
                    }
                }
                & .sec-hukuri{
                    & .sec-content{
                        & ul{
                            & li{
                                width:calc(50% - (clamp(1rem, 0.382vw + 0.878rem, 1.4rem))/2);
                                min-height:7rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 490px){
    #environment{
        & .env-bg{
            & .inner{
                & .desc{
                    & .txt{
                        text-align:left;
                    }
                }
                & .sec-number{
                    & .sec-content{
                        & .number-box{
                            &.kinmu{
                                & .box-content{
                                    flex-direction:column;
                                    & .number-data{
                                        &:first-child{
                                            border-right:0;
                                            padding-right:0;
                                        }
                                        & .data-item{
                                            width:7rem;
                                        }
                                        & .number{
                                            width:11rem;
                                            justify-content:flex-end;
                                        }
                                    }
                                }
                            }
                        }
                        & .number-box-group{
                            flex-direction:column;
                            & .number-box{
                                width:100%;
                            }
                        }
                    }
                }
                & .sec-hukuri{
                    & .sec-content{
                        & ul{
                            & li{
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 460px){
    #environment{
        & .env-bg{
            & content-title{
                & .h2{
                    width:80%;
                    min-width:unset;
                }
            }
        }
    }
}


/* =========== responsibility ============ */
.content-bg{
    padding-top:22rem;
    position:relative;
    &:before{
        content:"";
        display:block;
        width:100%;
        height:31rem;
        background-repeat:no-repeat;
        background-position:center;
        background-size:cover;
        position:absolute;
        top:0;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        z-index:-1;
    }
}

@media (width < 768px){
    .content-bg{
        padding-top:16rem;
        &:before{
            height:22rem;
        }
    }
}

#responsibility{
    background-color:var(--accent-color03);
    padding-bottom:16rem;
    position:relative;
    z-index:0;
    & .content-bg{
        padding-top:clamp(42rem, 13.652vw + 31.352rem, 50rem);
        position:relative;
        &:before{
            height:clamp(50rem, 13.652vw + 39.352rem, 58rem);
            background-image:image-set(
                url("../img/webp/img_responsibility.webp") type("image/webp"),
                url("../img/img_responsibility.jpg") type("image/jpeg")
            );
        }
        & .content-title{
            justify-content:center;
            & .h2{
                text-align:center;
                background-color:var(--color-white);
                color:var(--accent-color03);
            }
        }
        & .inner{
            & .txt{
                color:var(--color-white);
                text-align:justify;
                margin-bottom:3.2rem;
            }
            & .resp-content{
                display:flex;
                flex-direction:column;
                gap:2rem;
                & .resp-item{
                    background-color:var(--color-white);
                    border-radius:2rem;
                    overflow:hidden;
                    & .li-title{
                        font-size:clamp(1.7rem, 0.287vw + 1.608rem, 2rem);
                        color:var(--accent-color03);
                        text-box:trim-both cap alphabetic;
                        background-color:#CDE4EB;
                        padding:2rem 2.6rem;
                    }
                    & .li-content{
                        display:flex;
                        justify-content:space-between;
                        gap:2rem;
                        padding:2.4rem 2.8rem;
                        & ul{
                            display:flex;
                            flex-direction:column;
                            gap:1rem;
                            flex:1;
                            & li{
                                display:flex;
                                align-items:flex-start;
                                gap:0.3em;
                                font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                                text-align:justify;
                                line-height:1.6;
                                &:before{
                                    content:"";
                                    display:block;
                                    width:clamp(1.8rem, 0.574vw + 1.616rem, 2.4rem);
                                    height:clamp(1.8rem, 0.574vw + 1.616rem, 2.4rem);
                                    border-radius:50%;
                                    background-color:var(--accent-color04);
                                    background-clip:content-box;
                                    padding:0.4em;
                                    flex:none;
                                }
                            }
                        }
                        & .sdgs-logo{
                            display:flex;
                            align-items:center;
                            gap:1rem;
                            & img{
                                width:9rem;
                            }
                        }
                    }
                    &.fade-in{
                        opacity:0;
                        transform:translateY(30px);
                        transition:0.6s ease;
                        &.show{
                            opacity:1;
                            transform:translateY(0);
                        }
                        &:nth-child(1){
                            transition-delay:0.2s;
                        }
                        &:nth-child(2){
                            transition-delay:0.4s;
                        }
                        &:nth-child(3){
                            transition-delay:0.6s;
                        }
                    }
                }
            }
        }
    }
}

@media (width < 960px){
    #responsibility{
        & .content-bg{
            & .inner{
                & .resp-content{
                    gap:1.2rem;
                    & .resp-item{
                        & .li-title{
                            text-align:center;
                        }
                        & .li-content{
                            flex-direction:column;
                            gap:2.4rem;
                            padding:1.6rem 2rem;
                            & .sdgs-logo{
                                justify-content:center;
                                gap:0.6rem;
                                & img{
                                    max-width:10rem;
                                    width:calc((100% - 0.6rem)/4);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 768px){
    #responsibility{
        padding-bottom:8rem;
        & .content-bg{
            padding-top:32rem;
            &:before{
                height:38rem;
            }
        }
    }
}

@media (width < 430px){
    #responsibility{
        & .content-bg{
            & .inner{
                & .resp-content{
                    & .resp-item{
                        & .li-content{
                             & .sdgs-logo{
                                flex-wrap:wrap;
                                max-width:calc(10rem*2 + 1rem);
                                margin:0 auto;
                                & img{
                                    width:calc(50% - 1rem);
                                }
                             }
                        }
                    }
                }
            }
        }
    }
}


/* =========== works ============ */
#works{
    padding-bottom:16rem;
    & .content-bg{
        &:before{
            background-image:image-set(
                url("../img/webp/img_works.webp") type("image/webp"),
                url("../img/img_works.jpg") type("image/jpeg")
            );
        }
        & .content-title{
            & .h2{
                background-color:var(--color-white);
                color:var(--accent-color03);
                border-top-left-radius:0;
                border-bottom-left-radius:0;
            }
        }
        & .inner{
            &.fade-in{
                opacity:0;
                transform:translateY(30px);
                transition:0.6s ease;
                transition-delay:0.2s;
                &.show{
                    opacity:1;
                    transform:translateY(0);
                }
            }
            & .note{
                font-size:1.4rem;
                color:var(--color-white);
                margin-bottom:2rem;
            }
            & .works-content{
                & ul{
                    display:flex;
                    flex-wrap:wrap;
                    gap:4.6rem 2rem;
                    margin-bottom:6rem;
                    & .works-item{
                        width:calc(50% - 1rem);
                        & .works-img{
                            width:100%;
                            border-radius:20px;
                            overflow:hidden;
                            margin-bottom:1.2rem;
                            position:relative;
                            & img{
                                display:block;
                                width:100%;
                                object-fit:cover;
                                transition:all var(--tr-slow);
                                -webkit-transition:all var(--tr-slow);
                            }
                            &:before{
                                content:"";
                                display:block;
                                width:6rem;
                                height:6rem;
                                border-bottom-left-radius:2rem;
                                background-image:url(../img/zoom.svg);
                                background-repeat:no-repeat;
                                background-size:3rem auto;
                                background-position:center;
                                background-color:var(--color-white);
                                position:absolute;
                                top:0;
                                right:0;
                                z-index:1;
                            }
                            &:after{
                                content:"";
                                display:block;
                                width:100%;
                                height:100%;
                                background-color:var(--accent-color03);
                                opacity:0;
                                position:absolute;
                                top:0;
                                left:0;
                                z-index:0;
                                transition:all var(--tr-slow);
                                -webkit-transition:all var(--tr-slow);
                            }
                            &:hover{
                                cursor:pointer;
                                & img{
                                    scale:1.2;
                                }
                                &:after{
                                    opacity:0.4;
                                }
                            }
                        }
                        & .works-info{
                            & p{
                                color:var(--color-white);
                                &:first-child{
                                    display:flex;
                                    align-items:baseline;
                                    gap:0.4rem 1rem;
                                    font-size:1.4rem;
                                    margin-bottom:0.4rem;
                                    & span{
                                        font-size:1.4rem;
                                    }
                                }
                                &:last-child{
                                    font-size:clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
                                    font-weight:600;
                                }
                            }
                        }
                    }
                }
            }
            & .button-area{
                display:flex;
                justify-content:center;
                align-items:center;
                & .more-button{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    gap:1rem;
                    color:var(--color-white);
                    font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                    font-weight:600;
                    border:2px solid var(--color-white);
                    border-radius:4rem;
                    padding:1.4rem 3.6rem;
                    transition:all var(--tr-fast);
                    -webkit-transition:all var(--tr-fast);
                    &:before{
                        content:"";
                        display:block;
                        width:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                        height:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                        mask-image:url(../img/plus.svg);
                        -webkit-mask-image:url(../img/plus.svg);
                        mask-repeat:no-repeat;
                        -webkit-mask-repeat:no-repeat;
                        mask-position:center;
                        -webkit-mask-position:center;
                        mask-size:contain;
                        -webkit-mask-size:contain;
                        background-color:var(--color-white);
                    }
                    &:hover{
                        background-color:var(--color-white);
                        color:var(--color-blue);
                        &:before{
                            background-color:var(--color-blue);
                        }
                    }
                }
            }
        }
    }
}

.hidden{
  display:none;
}

/* モーダル */
.modal-wrapper{
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    z-index:20;
    width:100%;
    height:100%;
    z-index:50;
    & .modal-layer{
        height:100%;
        background:rgba(50, 50, 50, .85);
        cursor:pointer;
    }
    & .modal-container{
        display:flex;
        justify-content:center;
        align-items:center;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        width:min(calc(100% - 40px), 1200px);
        max-width:100%;
        height:calc(100% - 6rem);
        max-height:70rem;
        margin-top:1rem;
        & .container-inner{
            display:inline-block;
            height:100%;
            position:relative;
            & .modal-content{
                flex:1;
                height:100%;
            }
            & .modal-close{
                position:absolute;
                top:0;
                right:0;
                transform:translate(50%, -50%);
                width:5rem;
                height:5rem;
                background:var(--color-white);
                border-radius:50%;
                cursor:pointer;
                transition:all var(--tr-fast);
                -webkit-transition:all var(--tr-fast);
                &:hover{
                    background-color:var(--color-blue);
                    &:before,
                    &:after{
                        background-color:var(--color-white);
                    }
                }
                &:before,
                &:after{
                    position:absolute;
                    top:50%;
                    left:50%;
                    width:22px;
                    height:3px;
                    background:var(--color-blue);
                    content:'';
                    transition:all var(--tr-fast);
                    -webkit-transition:all var(--tr-fast);
                }
                &:before{
                    transform:translate(-50%, -50%) rotate(45deg);
                }
                &:after{
                    transform:translate(-50%, -50%) rotate(-45deg);
                }
            }
        }
    }
    & .works-img{
        display:flex;
        justify-content:center;
        align-items:center;
        /* width:100%; */
        height:100%;
        & picture{
            width:auto;
            height:100%;
            & img{
                width:100%;
                height:100%;
                object-fit:contain;
            }
        }
    }
}

@media (width < 768px){
    #works{
        padding-bottom:8rem;
        & .content-bg{
            & .inner{
                & .note{
                    display:none;
                }
                & .works-content{
                    & ul{
                        flex-direction:column;
                        gap:3rem;
                        & .works-item{
                            width:100%;
                            & .works-img{
                                &:before{
                                    display:none;
                                }
                                &:hover{
                                    cursor:default;
                                    & img{
                                        scale:1;
                                    }
                                    &:after{
                                        opacity:0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


/* =========== equipment ============ */
#equipment{
    padding-bottom:16rem;
    & .content-bg{
        &:before{
            background-image:image-set(
                url("../img/webp/img_equipment.webp") type("image/webp"),
                url("../img/img_equipment.jpg") type("image/jpeg")
            );
        }
        & .content-title{
            justify-content:flex-end;
            & .h2{
                background-color:var(--color-white);
                color:var(--accent-color03);
                border-top-right-radius:0;
                border-bottom-right-radius:0;
            }
        }
        & .inner{
            display:flex;
            align-items:center;
            gap:4%;
            margin-top:-8rem;
            & img{
                width:42%;
                &.fade-in{
                    opacity:0;
                    transform:translateY(30px);
                    transition:0.6s ease;
                    transition-delay:0.4s;
                    &.show{
                        opacity:1;
                        transform:translateY(0);
                    }
                }
            }
            & .equipment-list{
                flex:1;
                display:flex;
                flex-wrap:wrap;
                gap:1.4rem;
                padding:4rem 0;
                & li{
                    width:calc(50% - 0.7rem);
                    font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                    color:var(--color-white);
                    align-content:center;
                    background-color:var(--accent-color03);
                    border-radius:16px;
                    padding:1.6rem 2rem;
                }
                &.fade-in{
                    opacity:0;
                    transform:translateY(30px);
                    transition:0.6s ease;
                    transition-delay:0.2s;
                    &.show{
                        opacity:1;
                        transform:translateY(0);
                    }
                }
            }
        }
    }
}

@media (width < 840px){
    #equipment{
        & .content-bg{
            & .inner{
                flex-direction:column-reverse;
                justify-content:flex-start;
                gap:3rem;
                margin-top:0;;
                & img{
                    width:80%;
                }
                & .equipment-list{
                    padding-top:0;
                }
            }
        }
    }
}
@media (width < 768px){
    #equipment{
        padding-bottom:8rem;
    }
}
@media (width < 490px){
    #equipment{
        & .content-bg{
            & .inner{
                & img{
                    width:100%;
                }
                & .equipment-list{
                    flex-direction:column;
                    gap:1rem;
                    width:100%;
                    padding:0;
                    & li{
                        width:100%;
                    }
                }
            }
        }
    }
}


/* =========== company ============ */
#company{
    padding-bottom:12rem;
    & .content-bg{
        &:before{
            background-image:image-set(
                url(../img/webp/img_company.webp) type("image/webp"),
                url(../img/img_company.jpg) type("image/jpeg")
            );
        }
        & .content-title{
            justify-content:center;
            & .h2{
                min-width:30rem;
                text-align:center;
                background-color:var(--color-white);
                color:var(--accent-color03);
            }
        }
    }
    & .inner{
        max-width:1000px;
        & section{
            & .h3{
                color:var(--color-white);
                &:before{
                    background-color:var(--color-white);
                }
            }
            &:not(:last-child){
                border-bottom:2px dashed var(--color-white-opacity50);
                padding-bottom:6rem;
                margin-bottom:6rem;
            }
            & p{
                font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                color:var(--color-white);
                line-height:1.6;
            }
            &.company-info{
                & ul{
                    display:flex;
                    flex-direction:column;
                    gap:1.8rem;
                    & li{
                        display:flex;
                        align-items:center;
                        gap:3%;
                        font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                        & h4{
                            color:var(--color-white);
                            text-align:center;
                            font-weight:600;
                            width:20rem;
                            background-color:var(--accent-color03);
                            border-radius:5rem;
                            padding:1rem 3rem;
                        }
                    }
                }
                & .about-holdings{
                    display:flex;
                    align-items:center;
                    gap:4%;
                    border:1px solid var(--color-white-opacity50);
                    padding:2rem 2.4rem;
                    margin-top:4rem;
                    & img{
                        display:block;
                        width:18rem;
                    }
                    & .desc{
                        & h4{
                            font-size:clamp(1.6rem, 0.096vw + 1.569rem, 1.7rem);
                            font-weight:600;
                            color:var(--color-white);
                            margin-bottom:1.6rem;
                        }
                        & p{
                            text-align:justify;
                            margin-bottom:1rem;
                        }
                        & a{
                            font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                        }
                    }
                }
            }
            &.company-access{
                & .map{
                    margin-top:2rem;
                }
            }
            &.company-history{
                & ul{
                    & li{
                        display:flex;
                        align-items:stretch;
                        gap:8rem;
                        & .year{
                            white-space:nowrap;
                            padding:1.4rem 0;
                            position:relative;
                            &:before{
                                content:"";
                                display:block;
                                width:1px;
                                height:100%;
                                background-color:var(--color-white-opacity30);
                                position:absolute;
                                top:0;
                                right:-4rem;
                            }
                            & p{
                                display:flex;
                                align-items:center;
                                gap:0.15em;
                                font-size:clamp(2rem, 0.765vw + 1.755rem, 2.8rem);
                                font-weight:600;
                                position:relative;
                                & span{
                                    display:block;
                                    font-size:clamp(1.3rem, 0.287vw + 1.208rem, 1.6rem);
                                    font-weight:normal;
                                    margin-top:0.2em;
                                }
                                &:after{
                                    content:"";
                                    display:block;
                                    width:8px;
                                    height:8px;
                                    border-radius:50%;
                                    background-color:#DACA96;
                                    position:absolute;
                                    top:50%;
                                    transform:translateY(-50%);
                                    -webkit-transform:translateY(-50%);
                                    right:calc(-4rem - 4px);
                                }
                            }
                        }
                        & > p{
                            padding:1.4rem 0;
                            margin-top:clamp(0.6rem, 0.382vw + 0.478rem, 1rem);

                        }
                    }
                }
            }
            &.company-partners{
                & ul{
                    display:grid;
                    grid-template-columns:max-content auto;
                    column-gap:2.4rem;
                    & li{
                        display:grid;
                        grid-template-columns:subgrid;
                        grid-column:span 2;
                        align-items:center;
                        border-bottom:1px solid var(--color-white-opacity30);
                        padding-bottom:1.4rem;
                        margin-bottom:1.4rem;
                        &:last-child{
                            margin-bottom:0;
                        }
                        & p:first-child{
                            font-weight:600;
                        }
                        & p:last-child{
                            font-size:clamp(1.2rem, 0.191vw + 1.139rem, 1.4rem);
                            color:var(--color-white-opacity70);
                        }
                    }
                }
            }
             &.fade-in{
                opacity:0;
                transform:translateY(30px);
                transition:0.6s ease;
                transition-delay:0.2s;
                &.show{
                    opacity:1;
                    transform:translateY(0);
                }
            }
        }
        & a{
            color:var(--color-white);
            text-decoration:underline;
            &[href^="tel"]{
                text-decoration:none;
            }
            &:hover{
                opacity:0.6;
            }
        }
    }
}

@media (width < 768px){
    #company{
        padding-bottom:8rem;
        & .inner{
            & section{
                &.company-info{
                    & ul{
                        & li{
                            & h4{
                                width:16rem;
                            }
                        }
                    }
                    & .about-holdings{
                        flex-direction:column;
                        gap:2.4rem;
                    }
                }
                &.company-history{
                    & ul{
                        & li{ 
                            gap:4rem;
                            & .year{
                                &:before{
                                    right:-2rem;
                                }
                                & p{
                                    &:after{
                                        right:calc(-2rem - 4px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 460px){
    #company{
        & .content-bg{
            & .content-title{
                & .h2{
                    width:80%;
                    min-width:unset;
                }
            }
        }
        & .inner{
            & section{
                &.company-info{
                    & ul{
                        gap:2.4rem;
                        & li{
                            flex-direction:column;
                            align-items:flex-start;
                            gap:1.4rem;
                            & h4{
                                width:100%;
                                text-align:left;
                                padding:1rem 2.5rem;
                            }
                            & p,
                            & a{
                                padding:0 2.5rem;
                            }
                        }
                    }
                }
            }
        }
    }
}


/* =========== recruit ============ */
#recruit{
    padding:0 3.4rem;
    margin-bottom:6rem;
    & .recruit-banner{
        display:flex;
        align-items:stretch;
        border-radius:2rem;
        background-color:var(--color-white);
        overflow:hidden;
        container-type:inline-size;
        & .recruit-txt{
            order:1;
            width:48cqw;
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            justify-content:flex-start;
            padding:8rem 4cqw 8rem 12cqw;
            & .h2{
                font-size:clamp(2.2rem, 1.721vw + 1.649rem, 4rem);
                color:var(--color-blue);
                position:relative;
                &:before{
                    content:"";
                    display:block;
                    width:10cqw;
                    height:3px;
                    background-color:var(--color-blue);
                    position:absolute;
                    left:-12cqw;
                    bottom:30%;
                }
            }
            & .desc{
                font-weight:600;
                font-size:clamp(1.6rem, 0.382vw + 1.478rem, 2rem);
                margin-top:2rem;
                margin-bottom:7rem;
            }
            & a{
                font-size:clamp(1.5rem, 0.096vw + 1.469rem, 1.6rem);
                font-weight:600;
                color:var(--color-white);
                white-space:nowrap;
                text-decoration:none;
                background-color:var(--accent-color01);
                border:2px solid var(--accent-color01);
                border-radius:5rem;
                padding:1.8rem 4rem;
                transition:all var(--tr-normal);
                -webkit-transition:all var(--tr-normal);
                &:after{
                    content:"";
                    display:inline-block;
                    vertical-align:middle;
                    width:0.8em;
                    height:0.8em;
                    mask-image:url(../img/arrow02.svg);
                    -webkit-mask-image:url(../img/arrow02.svg);
                    mask-repeat:no-repeat;
                    -webkit-mask-repeat:no-repeat;
                    mask-position:center;
                    -webkit-mask-position:center;
                    mask-size:contain;
                    -webkit-mask-size:contain;
                    background-color:var(--color-white);
                    background-image:none;
                    margin-top:-0.3rem;
                    margin-left:0.6rem;
                    transition:all var(--tr-normal);
                    -webkit-transition:all var(--tr-normal);
                }
                &:hover{
                    color:var(--accent-color01);
                    background-color:var(--color-white);
                    border-color:var(--accent-color01);
                    &:after{
                        background-color:var(--accent-color01);
                        transform:translate(40%,-35%);
                        -webkit-transform:translate(40%,-35%);
                    }
                }
            }
        }
        &:before,
        &:after{
            content:"";
            display:block;
            width:26cqw;
            height:100%;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            position:absolute;
            top:0;
        }
        &:before{
            right:26%;
            background-image:url(../img/img_recruit01.jpg);
        }
        &:after{
            right:0;
            background-image:url(../img/img_recruit02.jpg);
        }
         &.fade-in{
            opacity:0;
            transform:translateY(30px);
            transition:0.6s ease;
            transition-delay:0.2s;
            &.show{
                opacity:1;
                transform:translateY(0);
            }
        }
    }
}

@media (width < 840px){
    #recruit{
        & .recruit-banner{
            & .recruit-txt{
                padding-top:5rem;
                padding-bottom:5rem;
                & .desc{
                    margin-top:1.5rem;
                    margin-bottom:3rem;
                }
                & a{
                    padding:1.2rem 3rem;
                }
            }
        }
    }
}

@media (width < 768px){
    #recruit{
        padding:0 1.5rem;
    }
}

@media (width < 640px){
    #recruit{
        & .recruit-banner{
            flex-wrap:wrap;
            & .recruit-txt{
                width:100%;
                padding-top:3rem;
                padding-bottom:3rem;
                padding-left:15cqw;
                & .h2{
                    &:before{
                        width:12cqw;
                        left:-15cqw;
                    }
                }
            }
             &:before,
             &:after{
                position:unset;
                width:50cqw;
                height:240px;
             }
             &:before{
                order:2;
             }
             &:after{
                order:3;
             }
        }
    }
}


/* =========== footer ============ */
#footer{
    padding:0 3.4rem;
    .footer-logo{
        display:flex;
        align-items:center;
        justify-content:center;
        border-bottom:1px solid var(--color-white-opacity30);
        padding-bottom:2rem;
        margin-bottom:1.6rem;
        & img{
            display:block;
            width:100%;
            max-width:30rem;
            margin:0 auto;
        }
    }
    & .footer-bottom{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:1.6rem;
        margin-bottom:2rem;
        & small{
            font-size:1.3rem;
            color:var(--color-white);
        }
        & ul{
            display:flex;
            align-items:center;
            & li{
                display:flex;
                align-items:center;
                &:not(:last-child){
                    margin-right:1.2rem;
                    & a{
                        padding-right:1.2rem;
                        &:hover{
                            opacity:0.6;
                        }
                    }
                    &:after{
                        content:"/";
                        display:block;
                        font-size:1.2rem;
                        color:var(--color-white);
                        margin-bottom:-0.2rem;
                    }
                }
                 a{
                    font-size:1.3rem;
                    color:var(--color-white);
                    text-decoration:none;
                 }
            }
        }
    }
}

@media (width < 960px){
    #footer{
        & .footer-bottom{
            flex-direction:column-reverse;
            justify-content:center;
        }
    }
}

@media (width < 768px){
    #footer{
        padding:0 1.5rem;
    }
}

@media (width < 680px){
    #footer{
        padding-bottom:7rem;
    }
}

@media (width < 490px){
    #footer{
        & .footer-bottom{
            gap:2.4rem;
            & ul{
                flex-direction:column;
                & li:not(:last-child){
                    padding-right:0;
                    margin-right:0;
                    margin-bottom:1rem;
                    &:after{
                        content:none;
                    }
                }
            }
        }
    }
}


#sp-fix{
    display:none;
}

@media (width < 1300px){
    #sp-fix{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        position:fixed;
        bottom:0;
        right:0;
        z-index:1;
        & a{
            display:flex;
            align-items:center;
            justify-content:center;
            height:6rem;
            color:var(--color-white);
            background-color:var(--accent-color01);
            text-align:center;
            text-decoration:none;
            border-top:2px solid var(--accent-color01);
            border-left:2px solid var(--accent-color01);
            border-bottom:2px solid var(--accent-color01);
            border-radius:2rem 0 0 0;
            padding:0 2.4rem;
            transition:all var(--tr-normal);
            -webkit-transition:all var(--tr-normal);
            & span{
                font-weight:600;
                font-size:1.6rem;
                text-align:center;
                letter-spacing:0.03em;
                & .sp-only{
                    display:none;
                }
            }
            &:after{
                content:"";
                display:inline-block;
                vertical-align:middle;
                width:1.2em;
                height:1.2em;
                mask-image:url(../img/arrow02.svg);
                -webkit-mask-image:url(../img/arrow02.svg);
                mask-repeat:no-repeat;
                -webkit-mask-repeat:no-repeat;
                mask-position:center;
                -webkit-mask-position:center;
                mask-size:contain;
                -webkit-mask-size:contain;
                background-color:var(--color-white);
                background-image:none;
                margin-left:0.6rem;
                transition:all var(--tr-normal);
                -webkit-transition:all var(--tr-normal);
            }
            &:hover{
                color:var(--accent-color01);
                background-color:var(--color-white);
                border-color:var(--accent-color01);
                &:after{
                    background-color:var(--accent-color01);
                    transform:translate(40%,-25%);
                    -webkit-transform:translate(40%,-25%);
                }
            }
        }
    }
}

@media (768px <= width < 1300px){
    #sp-fix{
        top:8.8rem;
        bottom:unset;
        & a{
            flex-direction:column;
            gap:0.8rem;
            width:auto;
            height:auto;
            border-radius:1.2rem 0 0 1.2rem;
            padding:2rem 1.5rem;
            &:after{
                width:1em;
                height:1em;
                margin-left:0;
            }
            & span{
                display:inline-block;
                writing-mode:vertical-lr;
                letter-spacing:0.12em;
            }
        }
    }
}

@media (width < 768px){
    #sp-fix{
        width:100%;
        & a{
            & span{
                & .sp-only{
                    display:inline;
                }
            }
        }
        &.fade-in{
            opacity:0;
            transform:translateY(30px);
            transition:0.6s ease;
            transition-delay:0.6s;
            &.show{
                opacity:1;
                transform:translateY(0);
            }
        }
    }
}