@layer base,common;
:root{
    --main_width:70%;
    --side_width:min(calc(100% - (100% - var(--main_width)) / 2),1000px);
	--navy:#0C132F;
}
@layer base{
    html{
        font-family:"Noto Sans JP", -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    }
    body,h1,h2,h3,h4,p,div,tr,td,ul,li,ol,dl,dt,dd{
        padding: 0;
        margin: 0;
        line-height: 1.7;
    }
    picture,img{
        width: 100%;
        max-width: 100%;
        display:block;
    }
    a{
        display: block;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
    }
    h1{
        font-size: 5rem;
        @media(1200px < width){
            font-size: clamp(5rem, -0.5385rem + 7.3846vw, 8rem);
        }
        @media(769px < width < 950px){
                font-size: clamp(61px, -19.7238px + 10.4972vw, 80px);
                padding-right: 10px;
        }
        @media (width <= 768px){
                font-size: clamp(3.8125rem, 6.1331rem + -4.8346vw, 5rem);
        }
    }
    h2{
        font-size: 4rem;
        text-align: center;
        @media(1200px < width){
            font-size: clamp(4rem, -0.5385rem + 7.3846vw, 6rem);
        }
    }
    h1,h2{
        font-family: Roboto Condensed;
        font-weight: 500;
        line-height: 1;
    }
    h3{
        font-size: 1.7rem;
        @media(1200px <= width){
            font-size: 2.7rem;
        }
        @media(769px < width < 1200px){
                font-size: clamp(1.5rem, -0.6237rem + 4.4186vw, 2.6875rem);
        }
        @media (width <= 768px){
                font-size: clamp(1.5rem, -0.2884rem + 3.7209vw, 2.5rem);
        }        
        span{
            font-size: 2.2rem;
            display: inline-block;
            margin-left: 10px;
            @media(1200px <= width){
                font-size: 3rem;
            }
            @media(950px < width < 1200px){
                font-size: clamp(1.5rem + 0.3rem, -0.6237rem + 4.4186vw, 2.6875rem + 0.3rem);
            }
            @media(769px < width < 950px){
                font-size: 1.82rem;
            }
            @media (width <= 768px){
                    font-size:2.2rem;
            }               
        }
    }
    h4{
        font-size: 1.2rem;
        font-weight: 400;
        text-align: center;
    }
    p{
        font-size: clamp(12px, 2.5px + 1vw, 16px);
    }
}
@layer common{
    .flex{
        display: flex;
    }
    .entry_btn{
        color: #fff;
        background-color: #000;
        border: 1.5px solid #000;
        margin: 20px auto;
        padding: 10px 100px;
        width: fit-content;
        border-radius: 50px;
        font-size: 1.3rem;
    }
    @supports (corner-shape: squircle) {
        .card {
            corner-shape: squircle;
        }
    }
    .entry_btn:hover{
        color: #000;
        background-color: #fff;
        border: 1.5px solid #000;
    }
    .indent{
        display: block;
    }
    @media (width <= 768px){
        .entry_btn{
            margin-left: 0;
            margin-right: 0;
            padding: 5px 45px;
        }
}
/* header */
header{
    padding: 15px 10px;
    .flex{
        align-items: center;
        justify-content: space-between;
        width: min(var(--main_width), 1000px);
        margin: auto;
        img[alt*="logo"]{
            width: 35%;
            min-width: 230px;
        }
        .entry_btn{
            margin: 0;
        }
    }
}
@media (width <= 768px){
    header{
        padding: 10px;
        position: fixed;
        background: #FFF;
        z-index: 999;
        top: 0;
        left: 0;
        .flex{
            width: 100%;
            img[alt*="logo"]{
                width: 45%;
                min-width: 150px;
            }        
        }
    }
}

/* recruit */
.sec_recruit{
    background: url(../img/recruit/bg.webp) center no-repeat;
    /* background: linear-gradient(135deg,#dff6f8 0%,#eef2f5 50%,#f6e9ef 100%); */
    background-size: cover;
    padding-bottom: 80px;
    @media(width <= 768px){
        padding-bottom: 30px;
        padding-top: 50px;
    }
    .sec_absolute{
        position: relative;
        padding: 100px 0;
        > div{
            z-index: 1;
        }
        > picture{
            position: absolute;
            z-index: 0;
        }
    }
    .sec_join{
        padding: 100px 0;
        > div{
            /* width: 30vw; */
            width: min(var(--main_width), 1000px);
            /* margin-left: calc((100% - var(--main_width)) / 2); */
            margin-right: auto;
            margin-left: auto;
            h4{
                text-align: left;
            }
            .entry_btn{
                margin-left: 10px;
            }
        }
        > picture{
            top: 0;
            right: 0;
            width: min(55vw,700px);
            /* width: 55vw; */
        }
    }
    /* @media (1200px < width){
        sec_join}{
            > picture{
                width: min(55vw,700px);
            }
        }
    } */
    @media (width <= 768px){
        .sec_join{
            padding-top: 180px;
            padding-bottom: 0;
            > div{
                margin: 0;
                padding: 5% 5% 0;
                .entry_btn{
                    margin-bottom: 0;
                }
            }
        }
    }
    .sec_hire{
        padding: 180px 0 100px;
        @media(1400px <= width){
            max-height: 65dvh;
        }
        @media(769px < width < 950px){
            padding-top: 60px;
        }
        @media(width <= 768px){
            display: flex;
            gap: 15px;
            padding-bottom: 20px;
            padding-top: 0;
        }
        @media(width <= 540px){
            flex-direction: column;
        }
        picture:first-child{
            display: none;
            @media(width <= 768px){
                display: block;
                width: 50%;
                position: static;
            }
        }        
        picture:last-child{
            top: 0;
            left: 0;
            width: 42vw;
            max-width: 580px;
            @media(width <= 768px){
                display: none;
            }
        }
        .vertical{
            writing-mode: vertical-rl;
            width: min(var(--main_width), 1000px);
            /* margin-right: calc((100% - var(--main_width)) / 2); */
            margin-left: auto;
            margin-right: auto;
            h4{
                text-align: left;
                font-weight: 700;
                font-size: 2.5rem;
                line-height: 1.3;
            }
            h2{
                text-align: left;
                font-weight: 700;
                margin: 0 10px 0 15px;
            }
            p{
                line-height: 2.2;
            }
            @media(1200px < width){
                font-size: clamp(2.5rem, -0.5385rem + 7.3846vw, 4rem);
            }
            @media(768px < width < 950px){
                h4{
                    font-size: clamp(28px, -17.7348px + 6.0773vw, 40px);
                }
                h2{
                    font-size: clamp(42px, -46.221px + 11.6022vw, 64px);
                }
                p{
                    font-size: 0.73rem;
                }
            }
            @media(width <= 768px){
                padding-right: 5%;
                padding-left: 5%;
                writing-mode: lr;
                width: 90%;

                h4{
                    font-size: clamp(25px, -17.7348px + 6.0773vw, 40px);
                    br{
                        display: none;
                    }
                }
                h2{
                    font-size: clamp(42px, -46.221px + 11.6022vw, 64px);
                    margin: 10px 0 15px 0;
                }
                p{
                    font-size: 0.73rem;
                }                
            }
        }
    }
    h3{
        margin-bottom: 10px;
    }
    .sec_charm{
        margin-left: auto;
        margin-bottom: 50px;
    }
    .sec_work{
        margin-right: auto;
    }
    .sec_flex{
        width: min(calc(100% - (100% - var(--main_width)) / 2),1000px);
        gap: 15px;
        > div{
            width: 50%;
            p{
                line-height: 2.2;
                /* font-size: 0.8rem; */
            }
        }
        > picture{
            width: 50%;
        }
        @media (1200px < width){
            width: calc(100% - (100% - var(--main_width)) / 2);
            /* > div{
                width: 100%;
            }
            > picture{
                width: 100%;
            } */
        }
        @media(width <= 768px){
                flex-direction: column;
                width: 100%;
                margin: 0 auto;
                > div{
                    padding: 0 5%;
                    width: 90%;
                }
                > picture{
                    width: 70%;
                }
        }
        @media(width <= 600px){
                > picture{
                    width: 85%;
                }
        }
    }
    @media(width <= 768px){
            .sec_work{
                flex-direction: column-reverse;
            }
            .sec_charm{
                margin-bottom: 30px;
                > picture{
                    margin-left: auto;
                }
            }
            .sec_recruit
    }
}
/* interview */
.sec_interview{
    background: url(../img/recruit/interview_bg.webp) center no-repeat;
    background-size: cover;
    padding: 80px 0;
    
    > div{
        width: min(var(--main_width), 1000px);
        margin: 50px auto 0;
    }
    p{
        /* font-size: 0.8rem; */
        line-height: 2;
    }
    div .flex{
        border-bottom: 1px solid #000;
        padding-bottom: 15px;
        margin-bottom: 15px;
        justify-content: flex-start;
        align-items: center;
        gap: 15%;

        div:first-child{
            font-weight: 700;
            font-size: 1.5rem;
        }
        div:last-child{
            color: #666;
        }
        span{
            margin-right: 10px;
        }
    }
}
@media (width <= 768px){
    .sec_interview{
        padding-top: 50px;
        > div{
            width: 90%;
        }
        div .flex{
            flex-direction: column;
        }
    }
}

/* entry */
.sec_entry{
    background: url(../img/recruit/bg.webp) center no-repeat;
    /* background: linear-gradient(135deg,#dff6f8 0%,#eef2f5 50%,#f6e9ef 100%); */
    background-size: cover;
    padding: 80px 0 40px;
    
    table{
        width: min(var(--main_width),1000px);
        margin: 3% auto 0;
        border-collapse: collapse;

        tbody tr{
            td{
                padding: 20px 10px;
                border-bottom: 1px solid #999;
                font-weight: 700;
                line-height: 1.7;

                .flex{
                    gap: 15px;
                    margin: 0 0 20px 0;
                }
                .flex:has(ol){
                    flex-direction: column;
                    gap: 5px;
                }
                .flex dt{
                    min-width: 115px;
                    @media (width <= 768px){
                        min-width: 90px;
                    }
                }
                .flex dd{
                    ol{
                        /* list-style: none; */
                        li{
                            list-style-position: inside;
                            padding-left: 1.5em;
                            text-indent: -1.5em;
                            line-height: 1.6;
                            margin: 8px 0;

                        }
                        li:nth-child(1){
                            br{
                                display: none;
                                @media (width <= 768px){
                                    display: block;
                                }
                            }
                        }
                        li:nth-child(1)::marker {
                            content: "① ";
                        }
                        li:nth-child(2)::marker {
                            content: "② ";
                        }
                        li:nth-child(3)::marker {
                            content: "③ ";
                        }                                                
                    }
                }
                .flex dd .indent{
                    text-indent: 1.5em;
                    font-size: 0.7rem;
                }
                .line_1{
                    align-items: flex-start;
                    /* line-height: 1.7; */
                }
            }
            td:first-child{
                width: 40%;
                vertical-align: top;
                @media (width <= 768px){
                    width: 30%;
                }
            }
            td:last-child{
                width: 60%;
                color: #666;
                @media (width <= 768px){
                    font-size: 0.8rem;
                    width: 70%;
                }                
            }
        }
        tbody tr:nth-child(7){
            td{
                .flex .sp_br{
                    display: none;
                    @media (width <= 768px){
                        display: block;
                    }
                }
            }
        }

        /* tbody tr:nth-child(6),
        tbody tr:last-child{
            td{
                .flex dt{
                    min-width: 65px;
                }
            }
        } */
    }
    @media (width <= 768px){
            padding-top: 40px;
            table{
                width: 90%;
            }
            .entry_btn{
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
}

/* footer */
footer{
	background-color: #FFF;

    .container {
        width: 100%;
        text-align: center;
        padding: 2% 0;

        .copyright {
            font-size: 10px;
            text-align: center;
            color: var(--navy);
        }
    }
}