@charset "UTF-8";

/* 採用情報 ================================================== */
/* ==========================================================

    body id="recruit"

    読み込み
    H2：pageTitle
    働くということ：work
    先輩の声：senior
    募集要項：job

============================================================ */
/* 読み込み ================================================= */

@import url("./common.css");   /* 共通：全ページ */

/* 読み込み ================================================= */
/* ========================================================= */
/* H2 ====================================================== */

section{

    &.pageTitle{
        /* この一覧の共通部分は、common.cssの「タイトルデザイン」で一元管理している */

        /* 共通部分の個別設定（上書き含む）*/

        /* 写真 */
        &::before{
            background-image: url(../img/recruit/page_img.jpg);
        }

        @media screen and (width <= 600px){

            /* 写真 */
            &::before{
                background-position: right top;
                background-size: 130%;
            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* 働くということ =========================================== */

section.work{
    /* background-color: var(--color-Bg-Beige02); */

    .boxArea{
        position: relative;
        padding-top: min(3%, 40px);
        padding-bottom: 0;
        padding-left: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-right: clamp(70px, 22.85vw - 67.14px, 230px);

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: 200px;
            left: -7%;
            content: "";
            display: inline-block;
            width: 17%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece01.png) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }

        /* ピース：右下 */
        &::after{
            position: absolute;
            bottom: 100px;
            right: -17%;
            content: "";
            display: inline-block;
            width: 30%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece05.png) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }

        h3{
            text-align: center;
        }

        p{
            margin-bottom: clamp(30px, 5vw + 0px, 65px);
            padding-bottom: clamp(30px, 5vw + 0px, 65px);
            border-bottom: 1px solid #ccc;

            &:last-child{
                border-bottom: none;
            }

        }

        @media screen and (width <= 600px){
            padding-top: 1vh;
            padding-left: 0;
            padding-right: 0;

            /* ピース：左上 */
            &::before{
                background: none;
            }

            /* ピース：右下 */
            &::after{
                background: none;
            }

            p{
                margin-bottom: 3vh;
                padding-bottom: 3vh;
            }

        }

    }

}

/* 働くということ =========================================== */
/* ========================================================= */
/* 先輩の声 ================================================= */

section.senior{
    position: relative;
    padding-top: min(8%, 100px);
    padding-bottom: min(10%, 130px);
    background-color: var(--color-Bg-Beige02);

    /* ピース：左下 */
    &::before{
        position: absolute;
        bottom: 15%;
        left: 4%;
        content: "";
        display: inline-block;
        width: min(20%, 260px);
        aspect-ratio: 3/5;
        background: url(../img/common/page_main_piece08.png) top left no-repeat;
        background-size: contain;
    }

    /* ピース：右下 */
    &::after{
        position: absolute;
        bottom: -3%;
        right: 2%;
        content: "";
        display: inline-block;
        width: min(25%, 320px);
        aspect-ratio: 1/1;
        background: url(../img/common/page_main_piece06.png) top left no-repeat;
        background-size: contain;
    }

    .boxArea{
        position: relative;
        padding-left: clamp(30px, 6.45vw - 23.87px, 60px);   /* MIN：835px ～ MAX：1300px */
        padding-right: clamp(30px, 6.45vw - 23.87px, 60px);   /* MIN：835px ～ MAX：1300px */
        z-index: 10;

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: 100px;
            left: -13%;
            content: "";
            display: inline-block;
            width: 17%;
            aspect-ratio: 5/8;
            background: url(../img/common/page_main_piece02.png) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }

        h3{
            text-align: center;
        }

        .seniorVoice{
            display: grid;
            flex-wrap: wrap;
            gap: clamp(35px, 5.37vw - 9.89px, 60px);   /* MIN：835px ～ MAX：1300px */
            grid-template-columns: 1fr 1fr;
            justify-content: space-between;   /* 横方向 */
            align-items: start;    /* 縦方向 */
            margin-top: clamp(30px, 5vw + 0px, 65px);

            li{
                height: 100%;
                text-align: center;
                /* margin-top: clamp(18px, 1.71vw + 7.71px, 30px); */
                padding: 6% 8% 10%;
                background-color: var(--color-Design-Pink01);
                border: 2px solid var(--color-Design-Pink03);
                border-radius: var(--border-radius-M);

                .seniorPersona{

                    .join{
                        width: fit-content;
                        color: #FFF;
                        margin-right: clamp(15px, 3.22vw - 11.93px, 30px);   /* MIN：835px ～ MAX：1300px */
                        padding: 2px 15px 3px;
                        background-color: var(--color-Design-Pink03);
                        border-radius: 999px;
                    }

                }

                .seniorTl{
                    font-weight: 600;
                    color: var(--color-Design-Pink03);
                    margin-top: clamp(10px, 2.85vw - 7.14px, 30px);
                }

                .seniorComment{
                    text-align: left;
                    margin-top: clamp(10px, 1.42vw + 1.42px, 20px);
                    padding-top: clamp(10px, 2.85vw - 7.14px, 30px);
                    border-top: 1px solid var(--color-Design-Pink03);

                    .bold{
                        font-weight: 500;
                        color: var(--color-Design-Pink03);
                    }

                }

            }

        }

    }

    @media screen and (600px < width <= 834px){

        .boxArea{
            padding-left: 5%;
            padding-right: 5%;

            .seniorVoice{
                grid-template-columns: 1fr;

                li{
                    padding: 3% 6% 5%;

                    .seniorTl{
                        font-size: clamp(16px, 1.71vw + 5.68px, 20px) !important;   /* MIN：601px ～ MAX：834px */

                        br{
                            display: none;
                        }

                    }

                }

            }

        }

    }

    @media screen and (width <= 600px){
        padding-top: 4vh;
        padding-bottom: 5vh;

        /* ピース：左下 */
        &::before{
            background: none;
        }

        /* ピース：右下 */
        &::after{
            background: none;
        }

        .boxArea{
            padding-left: 0;
            padding-right: 0;

            /* ピース：左上 */
            &::before{
                background: none;
            }

            .seniorVoice{
                gap: 4vh;
                grid-template-columns: 1fr;
                margin-top: 3vh;
                padding: 0.5vh 0 2vh;

                li{

                    .seniorPersona{

                        .join{
                            margin-right: 15px;
                            padding: 2px 10px 3px;
                        }

                    }

                    .seniorTl{
                        margin-top: 3vh;
                    }

                    .seniorComment{
                        margin-top: 2vh;
                        padding-top: 2vh;
                    }

                }

            }

        }

    }

}

/* 先輩の声 ================================================= */
/* ========================================================= */
/* 募集要項 ================================================= */

section.job{

    .boxArea{
        padding-top: min(8%, 100px);
        padding-bottom: 0;

        h3{
            text-align: center;
        }

        .jobDescription{
            width: 80%;
            margin: 0 auto;

            dl{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: clamp(30px, 5vw + 0px, 65px);

                dt{
                    display: grid;
                    align-items: center;
                    width: 20%;
                    text-align: center;
                    padding: clamp(18px, 1.71vw + 7.71px, 30px) 0;
                    background-color: var(--color-Bg-Beige02);
                    border-right: 1px solid var(--color-Design-Gray01);
                    border-bottom: 1px solid var(--color-Design-Gray01);

                    &:first-child{
                        border-top: 1px solid var(--color-Design-Gray01);

                        + dd{
                            border-top: 1px solid var(--color-Design-Gray01);
                        }

                    }

                }

                dd{
                    width: 79%;
                    margin-left: 1%;
                    padding: clamp(18px, 1.71vw + 7.71px, 30px) 3%;
                    border-bottom: 1px solid var(--color-Design-Gray01);

                    .listDisc{

                        li{
                            margin-top: 4px;
                        }

                    }

                }

                & + dl{
                    margin-top: clamp(80px, 11.42vw + 11.42px, 160px);
                }

            }

            /* 募集に関するお問い合わせ */
            .recruitContact{
                text-align: center !important;
                margin: 10% auto 0 !important;
            }

        }

        @media screen and (width <= 600px){
            padding-top: 5vh;
            padding-bottom: 3vh;

            .jobDescription{
                width: 100%;

                dl{

                    dt{
                        width: 100%;
                        padding: 5px 0;
                        border: 1px solid var(--color-Design-Gray01);

                        &:first-child{

                            + dd{
                                border-top: none;
                            }

                        }

                    }

                    dd{
                        width: 100%;
                        margin-left: 0;
                        padding: 10px 0;
                        border-bottom: none;

                        .listDisc{

                            li{
                                margin-top: 3px;
                            }

                        }

                    }

                    & + dl{
                        margin-top: 3vh;
                        padding-top: 6vh;
                        border-top: 1px dotted var(--color-Design-Gray01);
                    }

                }

            }

        }

    }

}

/* 募集要項 ================================================= */
/* ========================================================= */