@charset "urf-8";
@import url('component.css');
/************************************************
    KOSEI inc.
    採用サイト: https://koseikogyo.co.jp/recruit/
    20250630 -
************************************************/
/*　---------------------------------------------
    Top Hero
-------------------------------------------------　*/
.ly_topHero {
    position: relative;
    top:0;
    display: grid;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 8rem;
    background-color:rgb(var(--clr-main));

    .bl_topHero-cont {
        position: relative;
        width: 100%;
        /* max-width: var(--cont-width); */
        max-width: 1200px;
        margin: 0 auto;

        .bl_topHero-title {
            color:rgb(var(--clr-main));
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 700;
        }
    }
    .bl_topHero-msg {
        position: absolute;
        right: 1rem;
        bottom: 1.5rem;
        display: grid;
        grid-template-rows: repeat(2, auto);
        z-index: 100;

            .bl_topHero-msg01 { margin-right: 5rem }
            .bl_topHero-msg02 { margin-left: 9rem }

        span {
            display: inline-block;
            /* display: grid;
            place-content: center; */
            margin: .5rem 0;
            padding: .5rem;
            color: #fff;
            font-family: "Zen Kurenaido", sans-serif;
            font-weight: 400;
            font-size: clamp(2.4rem, 5vw, 3.4rem);
            background: rgb(var(--clr-main));
            text-align: center;
            line-height: 1;

            img {
                width: 100%;
                max-height: 60px;
            }
        }
    }
    .bl_topHero-text {
        margin: 2rem auto;
        color: #fff;
        font-family: "Zen Kaku Gothic New", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans","BIZ UDPゴシック", "BIZ UDPGothic", Meiryo, sans-serif;
        font-size: 1.2rem;

        p { padding: 1rem 0; }
    }
}
@media (max-width: 640px) {
    .ly_topHero {
        .bl_topHero-text {
            width: 90%;
            margin: 2rem auto 4rem;
            font-size: 1.2rem;
        }
    }
}

/* --- Slide show ------------------------------ */
.bl_heroSlider {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 740px;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgb(167 213 220 / 0.2);
        z-index: 5;
      }
  }
  .fade-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
  }
  .fade-img.active {
    opacity: 1;
    z-index: 1;
  }
/* --- Loop Photo ------------------------------ */
.bl_slideImage {
    position: absolute;
    bottom: -18%;
    width: 100%;
    overflow: hidden;
    z-index: 1100;
  }
  .bl_slideImage-track {
    position: relative;
    display: flex;
    width: max-content;
    height: 340px;
    padding-bottom: 2rem;
    animation: scroll-left 60s linear infinite;
    /* animation: scroll-left 60s linear infinite; */

    .el_slideImage1 { box-shadow: 10px 10px 0px 0px rgb(162 202 220 / 1.0); }
    .el_slideImage2 { box-shadow: 10px 10px 0px 0px rgb(235 230 207 / 1.0); }
    .el_slideImage3 { box-shadow: 10px 10px 0px 0px rgb(199 217 172 / 1.0); }
    .el_slideImage4 { box-shadow: 10px 10px 0px 0px rgb(242 195 59 / 1.0); }
    .el_slideImage5 { box-shadow: 10px 10px 0px 0px rgb(236 241 232 / 1.0); }
    .el_slideImage6 { box-shadow: 10px 10px 0px 0px rgb(200 200 200 / 1.0); }

    img { z-index: 9; }
    span { position: relative; z-index: 8; }
    span::after {
        content:"";
        position: absolute;
        display: block;
        inset: 0;
        background-color: rgb(167 213 220 / 0.3);
        z-index: 10;
    }
  }
  .zigzag {
    width: 100%;
    max-width: 380px;
    margin-right: 32px;
  }
  .up { align-self: flex-start; }
  .down { align-self: flex-end; }


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

@media (max-width: 960px) {
    .ly_topHero {
        padding-bottom: 5rem;
    }
    .bl_slideImage { bottom: -16%; }
    .bl_slideImage-track {
        height: 270px;
        padding-bottom: 2rem;
    }
    .zigzag {
        max-width: 280px;
        margin-right: 32px;
    }
}
@media (max-width: 640px) {
    .ly_topHero {
        padding-bottom: 0;
    }
    .bl_slideImage { bottom: -15%; }
    .bl_slideImage-track {
        height: 220px;
        padding-bottom: 2rem;
    }
    .zigzag {
        max-width: 200px;
        margin-right: 32px;
    }
}
/*　---------------------------------------------
    Cont
-------------------------------------------------　*/
.ly_workarea {
    width: 100%;
    margin: 300px 0 100px;

    /* 会社紹介 */
    .bl_company {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        width: 100%;

        .bl_company-contWrap {
            grid-area: 1 / 1 / 2 / 2;
            display: grid;
            place-content: center;
            justify-self: end;
            width: 70%;
            max-width: 500px;

            .bl_company-cont {
                padding-top: 48px;
                text-align: center;

                .bl_company-contTitle {
                    text-align: center;
                    font-size: clamp(30px, 5vw + .1rem, 40px);
                    font-weight: 400;
                    line-height: 1.2;

                    span {
                        display: block;
                        font-size: 1rem;
                        margin-bottom: .7rem;
                    }
                }
                .bl_company-contTxt {
                    padding: 2rem 0;

                    span { margin: .25rem 0; }
                }
                .bl_company-explain { display: block; }
            }
        }
        .bl_company-img {
            grid-area: 1 / 2 / 2 / 3;
            width: 100vw;
            max-width: 1000px;
            overflow: hidden;

            img { margin-left: 100px; padding-right:100px; }
        }
    }

    /* 仕事の流れ */
    .bl_workflow {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        width: 100%;

        .bl_workflow-contWrap {
            grid-area: 1 / 2 / 2 / 3;
            display: grid;
            place-content: center;
            justify-self: start;
            width: 70%;
            max-width: 500px;

            .bl_workflow-cont {
                padding-top: 48px;
                text-align: center;
                line-height: 1.4;

                .bl_workflow-contTitle {
                    text-align: center;
                    font-size: clamp(30px, 5vw + .1rem, 40px);
                    font-weight: 400;
                    line-height: 1.2;

                    span {
                        display: block;
                        font-size: 1rem;
                        margin-bottom: .7rem;
                    }
                }
                .bl_workflow-contTxt {
                    padding: 2rem 0;

                    span { margin: .25rem 0; }
                }
                .bl_workflow-explain { display: block; }
            }
        }
        .bl_workflow-img {
            grid-area: 1 / 1 / 2 / 2;
            justify-self: end;
            width: 100vw;
            max-width: 1000px;
            overflow: hidden;
            float: right;
            text-align: right;

            img { margin-right: 100px; padding-right:100px; }
        }
    }
}
@media (max-width: 960px) {
    .ly_workarea {
        .bl_company {
            grid-template-columns: 60% 40%;

            .bl_company-contWrap {
                justify-self: center;

                .bl_company-cont {
                    .bl_company-contTitle {
                        font-size: clamp(26px, 5vw + .1rem, 34px);
                    }
                    .bl_company-contTxt { line-height: 1.4; }
                }
            }

            .bl_company-img {
                img {
                    margin-left: 50px;
                    padding-right: 50px;
                }
            }
        }
        .bl_workflow {
            grid-template-columns: 40% 60%;
            width: 100%;

            .bl_workflow-contWrap {
                width: 90%;

                .bl_workflow-cont {
                    .bl_workflow-contTitle {
                        font-size: clamp(26px, 5vw + .1rem, 34px);
                        line-height: 1.2;
                    }
                }
            }

            .bl_workflow-img {
                img {
                    margin-right: 50px;
                    padding-right: 50px;
                }
            }
        }
    }
}
@media (max-width: 640px) {
    .ly_workarea {
        margin: 220px 0 60px;

        .bl_company {
            display: block;

            .bl_company-contWrap {
                width: 100%;
                margin: 0 auto 1rem;
            }
            .bl_company-img {
                width: 160vw;
            }
        }

        .bl_workflow {
            display: block;

            .bl_workflow-contWrap {
                width: 90%;
                margin: auto;
                margin-bottom: 2rem;
            }
            .bl_workflow-img {
                float: none;
                width: 160vw;
            }
        }
    }
}
/* --- Interview Section ------------------------------ */
.ly_interview {
    width: 100%;
    margin: -92px auto 0;
    overflow: visible;

    --mask:
        radial-gradient(80px at 50% 112px,#000 99%,#0000 101%) calc(50% - 128px) 0/256px 51% repeat-x,
        radial-gradient(80px at 50% -48px,#0000 99%,#000 101%) 50% 64px/256px calc(51% - 64px) repeat-x,
        radial-gradient(80px at 50% calc(100% - 112px),#000 99%,#0000 101%) calc(50% - 128px) 100%/256px 51% repeat-x,
        radial-gradient(80px at 50% calc(100% + 48px),#0000 99%,#000 101%) 50% calc(100% - 64px)/256px calc(51% - 64px) repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);

    background: rgb(var(--clr-main));
}
    .bl_interview-cont {
        position: relative;
        display: grid;
        grid-template-columns: 30% 70%;
        inset: 0;
        width: 100%;
        /* max-width: var(--cont-width); */
        height: 100%;
        margin: auto;
        padding: 140px 0;
        color: #fff;
        contain: content;

        .bl_interview-contTxt {
            display: grid;
            place-content: end;
            row-gap: 16px;
            padding: 0 2rem;

            .bl_interview-contUp {
                color: #fff;
                writing-mode: vertical-rl;

                .bl_interview-title {
                    margin: 0 1rem;
                    font-size: clamp(28px, 5vw, 36px);
                    font-weight: 500;
                    line-height: 1.4;
    
                    span { display: block; }
                }
                .bl_interview-subtitle {
                    margin: 0;
                    font-size: clamp(20px, 5vw, 24px);
                    font-family: "Zen Kaku Gothic New", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans","BIZ UDPゴシック", sans-serif;
                    font-weight: 400;
                    line-height: 1.5;
                }
                .bl_interview-contDown {
                    text-align: center;
                }
            }
        }
    }
    .bl_interviewPhoto {
        display: block;
        height: 100vw;
        object-fit: cover;
    }

    .bl_interview-slide {
        display: grid;
        inset: 0;
        /* width: 100%; */
        width: clamp(100%, 100vw + 1rem, 1200px);
        min-height: 300px;
        height: 100%;

        /* カード式スライド */
        .slider {
            width: 100%;
            max-width: 1180px;
            overflow: hidden;
            margin: auto 0;
        }
        
        .slider-track {
            display: flex;
            align-items: flex-start;
            transition: transform 0.5s ease;
        }
        
        .card {
            position: relative;
            flex: 0 0 25%; /* 親幅の1/4 */
            height: auto;
            aspect-ratio: 3 / 2; /* 比率を保って高さを決める */
            margin-right: 2%;     /* 適度な間隔（あとでJSと同期） */
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            font-size: .9rem;
            line-height: 1.4;

            figcaption {
                margin-top: .8rem;
            }

            &::after {
                content:"";
                position: absolute;
                top:0;
                left:0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgb(var(--clr-main), 0.3);
                transition: all .3s;
                cursor: pointer;
            }
            &:hover::after {background-color: rgb(var(--clr-main), 0.1); }
        }
    }

@media (max-width: 960px) {
    .bl_interview-cont {
        .bl_interview-contTxt {

            & .bl_interview-contUp {
                .bl_interview-title {
                    margin: 0 .5rem;
                    font-size: clamp(20px, 5vw + .1rem, 28px);
                    font-weight: 500;
                    line-height: 1.2;
                }
                .bl_interview-subtitle {
                    font-size: clamp(16px, 5vw + .1rem, 18px);
                    line-height: 1.5;
                }
                .bl_interview-contTxt-detail {
                    font-size: clamp(.85rem, 5vw + .1rem, 16px);
                    line-height: 1.3;
                }
            }
        }
        & .bl_interview-slide {
            .slider {
                width: 100%;
                max-width: 600px;
            }
        }
    }
}
@media (max-width: 768px) {
    .ly_interview {
        --mask:
            radial-gradient(53.81px at 50% 76px,#000 99%,#0000 101%) calc(50% - 80px) 0/160px 51% repeat-x,
            radial-gradient(53.81px at 50% -36px,#0000 99%,#000 101%) 50% 40px/160px calc(51% - 40px) repeat-x,
            radial-gradient(53.81px at 50% calc(100% - 76px),#000 99%,#0000 101%) calc(50% - 80px) 100%/160px 51% repeat-x,
            radial-gradient(53.81px at 50% calc(100% + 36px),#0000 99%,#000 101%) 50% calc(100% - 40px)/160px calc(51% - 40px) repeat-x;
        -webkit-mask: var(--mask);
                mask: var(--mask);
    }
    .bl_interview-cont { width: 90%; }
}
@media (max-width: 640px) {
    .ly_interview { margin: 0 auto; }
    .bl_interview-cont {
        display: block;
        width: 100%;
        padding: 120px 0 80px;

        .bl_interview-contTxt {
            place-content:start;
            padding: 0 1rem;

            .bl_interview-contUp {
                writing-mode:inherit;

                .bl_interview-title {
                    margin: 0;
                    padding: .5rem 0 1rem;

                    span { display: inline-block; }
                }
                .bl_interview-contTxt-detail { line-height: 1.6; }
            }
            .bl_interview-contDown { text-align: left; }
        }
    }

    .bl_interview-slide { min-height: 260px; }
}
@media (max-width: 480px) {
    .bl_interview-slide {
        .card {
            flex: 0 0 28%;
            font-size: .8rem;
        }
    }
}
/* --- Number Kosei Section ------------------------------ */
.ly_numberKosei {
    .bl_numberKosei-cont {
        position: relative;

        width: 100%;
        max-width: var(--cont-width);
        margin: 0 auto;
        padding: 100px 0 80px;
        text-align: center;
        background-image: url(../img/number_bg1_index.svg), url(../img/number_bg2_index.svg);
        background-repeat: no-repeat, no-repeat;
        background-size: 26%, 26%;
        background-position: 0 50%, 100% 50%;

        .bl_numberKosei-title {
            width: 80%;
            max-width: 400px;
            margin: 0 auto;
        }
        .bl_numberKosei-txt {
            width: 80%;
            max-width: 400px;
            margin: 0 auto;
            padding: 2rem 0;
        }
    }
}
@media (max-width: 1024px) {
    .ly_numberKosei {
        .bl_numberKosei-cont {
            max-width: var(--cont-width);
            margin: 0 auto;
            padding: 100px 0 80px;
            background-size: 22%, 22%;
            background-position: 5% 50%, 95% 50%;

            .bl_numberKosei-title {
                width: 80%;
                max-width: 320px;
            }
        }
    }
}
@media (max-width: 768px) {
    .ly_numberKosei {
        .bl_numberKosei-cont {
            max-width: var(--cont-width);
            margin: 0 auto;
            padding: 100px 0 80px;
            background-size: 18%, 18%;
            background-position: 8% 50%, 92% 50%;

            .bl_numberKosei-title {
                width: 80%;
                max-width: 300px;
            }
            .bl_numberKosei-txt {
                width: 80%;
                max-width: 340px;
                padding: 2rem 0;
            }
        }
    }
}
@media (max-width: 480px) {
    .ly_numberKosei {
        .bl_numberKosei-cont {
            max-width: var(--cont-width);
            margin: 0 auto;
            @media (max-width: 768px) {
                .ly_numberKosei {
                    .bl_numberKosei-cont {
                        max-width: var(--cont-width);
                        margin: 0 auto;
                        padding: 100px 0 80px;
                        background-size: 18%, 18%;
                        background-position: 8% 50%, 92% 50%;
            
                        .bl_numberKosei-title {
                            width: 80%;
                            max-width: 300px;
                        }
                        .bl_numberKosei-txt {
                            width: 80%;
                            max-width: 340px;
                            padding: 2rem 0;
                        }
                    }
                }
            }
            background-size: 27%, 27%;
            background-position: 1% 20%, 97% 20%;

            .bl_numberKosei-title {
                width: 70%;
                max-width: 240px;
            }
            .bl_numberKosei-txt {
                width: 80%;
                max-width: 300px;
                padding: 2rem 0;
            }
        }
    }
}
/* --- FAQ Section ------------------------------ */
.ly_faq {
    .bl_faq-cont {
        display: grid;
        grid-template-columns: 30% 45% 25%;
        inset: 0;
        align-items: center;
        width: 100%;
        max-width: var(--cont-width);
        margin: 0 auto;
        padding: 2rem 1rem;
        background-color: #E7ECF0;

        div { padding: 2rem 1rem; }

        .bl_faq-img {
            text-align: right;

            img {
                width: 100%;
                max-width: 120px;
            }
        }
        .bl_faq-title {
            h2 {
                color: rgb(var(--clr-sub-gray));
                font-size: clamp(1.4rem, 5vw, 2.3rem);
                font-weight: 400;
            }
        }
    }
}
@media (max-width: 960px) {
    .ly_faq {
        .bl_faq-cont {
            grid-template-columns: 16% 54% 30%;
            padding: 2rem;
        }
    }
}
@media (max-width: 768px) {
    .ly_faq {
        .bl_faq-cont {
            display: grid;
            grid-template-columns: 30% 70%;
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            align-items: center;
            padding: 1rem 0 2rem;

            .bl_faq-img {
                grid-area: 1 / 1 / 2 / 2;
                padding: 1rem;
            }
            .bl_faq-title {
                grid-area: 1 / 2 / 2 / 3;
                padding: 1rem;
            }

            .bl_faq-link {
                grid-area: 2 / 1 / 3 / 3;
                padding: 0;
                text-align: center;
            }
        }
    }
}
@media (max-width: 480px) {
    .ly_faq {
        .bl_faq-cont {
            grid-template-columns: 20% 80%;
            padding: 2rem 0;
        }
    }
}
/* --- Info Section ------------------------------ */
.ly_info {
    .bl_info-cont {
        display: grid;
        grid-template-columns: 25% 75%;
        inset: 0;
        align-items: center;
        /* column-gap: 2%; */
        width: 100%;
        max-width: var(--cont-width);
        margin: 0 auto;
        padding: 4rem 2rem;

        h2 {
            color: rgb(var(--clr-main));
            font-size: clamp(1.4rem, 5vw, 2.1rem);
            font-weight: 400;
            text-align: center;
        }

        .bl_info-list {
            .bl_info-listWrap {
                .bl_info-listItem {
                    padding: .6rem 1rem;
                    border-bottom: solid 1px #dfdfdf;

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

                    a {
                        display: grid;
                        grid-template-columns: minmax(0, 130px) 1fr;
                        /* color: rgb(var(--clr-main)); */

                        &:hover {
                            color: rgb(var(--clr-main-light));
                        }
                        .bl_info-listItem-date { }
                        .bl_info-listItem-txt { }
                    }
                }
            }
        }
    }
}
@media (max-width: 768px) {
    .ly_info {
        .bl_info-cont {
            display: block;

            h2 { padding-bottom: 1.2rem; }
        }
    }
}
@media (max-width: 640px) {
    .ly_info {
        .bl_info-cont {
            .bl_info-list {
                .bl_info-listWrap {
                    .bl_info-listItem {
                        a {
                            display: grid;
                            grid-auto-flow: row;
                            grid-template-columns: auto;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 480px) {
    .ly_info {
        .bl_info-cont {
            padding: 2.5rem 1.5rem;

            .bl_info-title { font-size: .85rem; }
        }
    }
}