@charset "UTF-8";


@media screen and (min-width:414px) {

    /*  ----------------  president  ---------------------*/
    .president_flex {
        max-width: 390px;
    }
}

@media screen and (min-width:480px) {

    /* -------------------  interview  -------------------  */
    .interview_box.another {
        width: 80%;
        margin: 0 auto;
    }


    /*  ----------------  president  ---------------------*/

    .president_flex {
        width: 80%;
        /*  仮 */
        margin: 0 auto 1.8rem;

    }

    .president_history {
        width: 80%;
        margin: 0 auto;
    }

    .president_textBox {
        width: 80%;
        margin: 0 auto 2rem;
    }

    /* ---------------  COMPANY  ------------------- */
    .company {
        background-image: url(images/company_bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 5rem 0 4.2rem;
    }

    .company_mainBox {
        /* z-index: 1; */
        width: 90%;
        margin: 0 auto;
        max-width: none;
    }


    /* ---------------  RECRUIT  ------------------- */
    .accordion {
        width: 90%;
        margin: 0 auto;
    }

}

@media screen and (min-width:768px) {

    /* ---------------  main_visual  ------------------- */
    #mv {}

    /* .mv_container  {
        width: 100%;
        height: 100vh;
    } */
    .swiper-wrapper div {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 50%;
        /*paddding-topでやるやり方は縦横比を崩さず可変で変えるタイプの画像調整なので、固定レイアウトの方がいい場合はheightでpx指定でもいいと思います*/
        width: 100%;
        margin: 0;
    }

    /* FV：512*1024で作成（1:2）  */
    .swiper-slide.mv1 {
        background-image: url(images/fv-2024050601.jpg);
        /*任意で画像変えてください*/
    }

    .swiper-slide.mv2 {
        background-image: url(images/work_2.jpg);
        /*任意で画像変えてください*/
    }

    .swiper-slide.mv3 {
        background-image: url(images/line_4_ufe.jpg);
        /*任意で画像変えてください*/
    }


    /* ---------------  philosophy  保留  ------------------- */
    /* .philosophy_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .philosophy_box {
        width: 48%;
    }
    .philosophy_box:nth-child(3) {
        margin: 0 auto;
    } */



    /* ---------------  infographics  ------------------ */
    .infographics {
        padding: 5rem 0 5.8rem;
        background-image: url(images/infographics_bg.jpg);
    }

    /* 横並びPC */
    .infographics_pcFlex1 {
        display: flex;
        /* flex-wrap: wrap; */
        width: 100%;
        gap: 19px;
    }

    .infographics_flex1 {
        width: 100%;
        gap: 16px;
    }

    .infographics_box1 {}

    .infographics_box2 {
        /* width: 50%; */
        /* margin-bottom: 0; */
    }

    .infographics_box2.another {
        width: 50%;
        margin-bottom: 0;
    }

    /* 横並びPC */
    .infographics_pcFlex2 {
        display: flex;
        width: 100%;
        gap: 19px;
    }

    .infographics_flex2 {
        display: flex;
        width: 100%;
        gap: 19px;
    }

    .infographics_imageBox4 {
        padding-top: 1.6rem;
    }

    /* 画像高さ調整 */
    .infographics_image3 {
        margin: 3rem auto 0;
    }

    /* --------------------  WORK  ----------------------- */

    .work_flex1 {
        width: 100%;
    }

    .work_flex1,
    .work_flex2,
    .work_flex3,
    .work_flex4,
    .work_flex5,
    .work_flex6 {
        padding: 3rem 0;
    }

    .work_flex1 {
        background-image: url(images/thumbnail/ses_thumbnail.jpeg);
    }

    .work_flex2 {
        background-image: url(images/thumbnail/carrier-coordinator_thumbnail.jpeg);
    }

    .work_flex3 {
        background-image: url(images/thumbnail/manufacturing_thumbnail.jpeg);
    }

    .work_flex4 {
        background-image: url(images/thumbnail/carrier_thumbnail.jpeg);
    }

    .work_flex5 {
        background-image: url(images/thumbnail/google-program_thumbnail.jpeg);
    }

    .work_flex6 {
        background-image: url(images/thumbnail/food-delivery_thumbnail.jpeg);
    }

    .work_inner {
        max-width: 1074px;
        padding: 0 2rem;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .work_inner.reverse {
        flex-direction: row-reverse;
    }

    .work_box1 {
        width: 50%;
        padding: 0;

    }

    .work_box2 {
        width: 50%;
    }

    .work_box2_textBox {
        background: rgba(255, 255, 255, 0.9);
        padding: 2.2rem 2rem;
        margin-bottom: 0;
    }

    .work_br1 {
        display: none;
    }

    .work_br2 {
        display: initial;
    }

    /*  */


    /* --------------------  interview  ----------------------- */
    .infographics {
        background-image: url(images/infographics_bg_pc.jpg);
    }

    .interview_flex {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .interview_box {
        width: 48%;
    }

    .interview_box:nth-child(4) {
        margin-bottom: 5rem;
    }

    .interview_flex {
        width: 90%;
        max-width: none;
        margin: 0 auto;
    }

    .interview_text3 {}

    .interview_adjustment {
        display: initial;
    }

    /* .interview_text3 br {
        display: none;
    } */

    /* ====================   モーダル  ==================== */
    .modal_wrap1,
    .modal_wrap2,
    .modal_wrap3,
    .modal_wrap4,
    .modal_wrap5,
    .modal_wrap6,
    .modal_wrap7,
    .modal_wrap8,
    .modal_wrap9,
    .modal_wrap10,
    .modal_wrap11,
    .modal_wrap12 {
        padding-top: 110px;
        /*  仮  */
        padding-top: 9.1rem;
    }

    .interview_box.another {
        width: 100%;
        margin: 0 auto;
    }

    /* 一つ目flex */
    .interview_modalFlex1 {
        display: flex;
        justify-content: space-between;
    }

    .interview_modalFlexBox1 {
        width: 47%;

    }

    .interview_modalFlexBox2 {
        width: 47%;
    }

    .interview_textBox_flex {
        display: flex;
    }

    .interview_textBox.another {
        text-align: center;
        padding: 2.2rem 0 2.4rem;
    }

    .interview_text1_modal {
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: 0.1rem;
        /* margin-bottom: 1rem; */
        margin-right: 20px;
        display: inline-block;
    }

    .interview_text2_modal {
        font-size: 1.5rem;
        font-weight: 400;
        letter-spacing: 0.1rem;
        line-height: 1.5;
        display: inline-block;
    }

    /* 二つ目flex */
    .interview_modalFlex2 {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        margin-bottom: 6rem;
    }

    .interview_questionBox {
        width: 47%;
    }

    .interview_routineBox {
        width: 47%;
        margin: 0;
    }

    .interview_youtube {
        position: relative;
        padding-top: 40.25%;
        height: 0;
        overflow: hidden;
        width: 60%;
        margin: 0 auto;
    }

    .interview_youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /*  -----------------  president  ------------------------*/

    .president_text1 br {
        display: none;
    }

    .president_history_bgPc {
        display: block;
        background-image: url(images/president_pc_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 241px;
        height: 194px;
        position: absolute;
        right: 31px;
        bottom: 20px;
    }

    /* --------------------  COMPANY  ----------------------- */

    .company_flex {
        flex-direction: row;
    }

    .company_box1 {
        width: 38%;

        background-color: rgba(29, 38, 84, 0.8);
        padding: 0.9rem 3rem;
        display: flex;
        align-items: center;

    }

    .company_box2 {
        width: 62%;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 2.3rem 2rem;

    }

    .rectuit_textBox {}

    .rectuit_text {
        text-align: center;
    }

    .rectuit_text_br {
        display: initial;
    }




















}