@charset "utf-8";

/* -----------------------------------------------------------
    共通
----------------------------------------------------------- */
@media screen and (max-width:768px) {
    .flex-wrapper{
        flex-direction: column;
    }
    .flex-left,
    .flex-right{
        width: 100%;
    }
}

.br-768{
    display: block;
}
.br-sp768{
    display: none;
}
@media screen and (max-width:768px) {
    .br-768{
        display: none;
    }
    .br-sp768{
        display: block;
    }
    .f-size-52 {
        font-size: 4.2rem;
    }
}

@media screen and (max-width:768px) {
    section{
        padding-top: 7rem;
    }
    /* 英語見出しが小さくなるため、日本語見出しの上寄せを弱めて重ならないようにする */
    .ttl-parts h3{
        top: clamp(-2.5rem, -4vw - 1rem, -1.5rem);
    }
    .footer-sns__list{
        align-items: center;
    }
    .footer-sns__list li{
        width: 370px;
    }
    .footer-sns__btn{
        width: 100%;
    }
}


@media screen and (max-width:550px) {

    .footer-sns__list{
        margin-top: 1rem;
    }
    .footer-sns__list li{
        width: 100%;
    }
    .footer-sns__icon{
        width: 50px;
        height: 50px;
    }
    .footer-sns__icon img{
        width: 28px;
        height: 28px;
    }
    .footer-sns__btn .footer-sns__icon img[src*="icon-youtube"] {
        width: 28px;
    }
    .footer-sns__btn .txt{
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.br-sp480{
    display: none;
}
@media screen and (max-width:480px) {
    .br-sp480{
        display: block;
    }
}


/* -----------------------------------------------------------
    header
----------------------------------------------------------- */

@media screen and (max-width:960px) {
    .page-header-area .logo{
        max-width: 200px;
        padding: 2.5rem 2.5rem 2rem;
    }
    .entry-btn__main{
        padding: 1.2rem 4rem 1rem;
    }
    .header-btn.entry-btn,
    .mynabi-btn__main {
        margin-right: 0;
        margin-top: 1rem;
    }
    .mynabi-btn__main{
        min-width: auto;
        min-height: 5rem;
        padding: 1.2rem 1.8rem;
        border-width: 2px;
    }
    .mynabi-btn__main img{
        width: 16.5rem;
    }
    .header-right {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-right: 1rem;
    }
    .g-nav{
        flex-direction: row;
        align-items: flex-end;
        gap: 0.5rem;
    }
    .hamburger-morph {
        display: block;
    }
    .nav-morph__wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        padding: 4rem 0 6rem;
    }
}

@media screen and (max-width:768px) {
    .entry-btn__main {
        padding: 1.5rem 2rem 1rem;
    }
    .entry-btn__label{
        padding: 0.2rem 1rem;
    }
    .mynabi-btn__main{
        padding: 1.2rem 1.5rem;
    }
    .mynabi-btn__main img{
        width: 12rem;
    }
}

@media screen and (max-width:550px) {
    .page-header-area .logo{
        max-width: 150px;
        padding: 3rem 2.5rem;
        border-radius: 0 0 2rem 0;
    }
    .entry-btn__label{
        padding: 0.2rem 1rem;
    }
    .flex.align-center{
        margin-right: 3px;
    }
    .top-mv{
        margin-top: 56px;
    }
    .header-right{
        gap: 0;
    }
    .hamburger-morph{
        width: 30px;
        height: 30px;
        top: 10px;
    }

}

@media screen and (max-width:480px) {
    .nav-morph__list{
        width: 88%;
    }
    .page-header-area .logo {
        padding: 3.2rem 1.2rem 1.8rem;
        max-width: 100px;
    }
    
    .top-mv{
        margin-top: 60px;
    }
    .entry-btn__main-txt{
        font-size: 1.4rem;
    }
    .entry-btn__main {
        padding: 0.8rem 1.8rem;
    }
    .mynabi-btn__main img {
        width: 10rem;
    }
    .mynabi-btn__main{
        min-height: 4rem;
    }
    .nav-morph .common-btn.to-mypage::after{
        right: 2rem;
    }
}


/* -----------------------------------------------------------
    メッセージ
----------------------------------------------------------- */

@media screen and (max-width:1180px) {
    .top-message ul.top-btn-list li{
        width: calc((100% - 40px) / 3);
    }
    .top-message ul.top-btn-list li a{
        padding: 3rem 5rem 3rem 2rem;
    }
    .top-message ul.top-btn-list li::after{
        right: 2rem;
    }

}

@media screen and (max-width:960px) {
    .top-message ul.top-btn-list{
        flex-direction: column;
    }
    .top-message ul.top-btn-list li {
        width: 100%;
    }
    .top-message ul.top-btn-list li::after{
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width:768px) {
    .top-message .message .message-btm .img{
        width: 80%;
    }
    .top-message .message .message-btm .img:nth-of-type(2){
        bottom: 0;
    }
    .scroll-infinity{
        margin-top: 12rem;
    }
}

@media screen and (max-width:550px) {
    .top-message .message .message-btm .img{
        width: 100%;
    }
    .scroll-infinity__list{
        gap: 2rem;
    }
    .scroll-infinity__list--left :last-of-type {
        margin-right: 2rem;
    }
    .scroll-infinity__item {
        width: calc(100vw / 1.5);
    }
}

@media screen and (max-width:480px) {
    .top-message .message .message-btm{
        margin-top: clamp(5rem, 10vw + 2rem, 11rem);
    }
    .scroll-infinity {
        margin-top: 7rem;
    }
    .scroll-infinity__list{
        gap: 1.5rem;
    }
    .scroll-infinity__list--left :last-of-type {
        margin-right: 1.5rem;
    }
}


/* -----------------------------------------------------------
    事業内容
----------------------------------------------------------- */

@media screen and (max-width:1220px) {
    .works .flex-wrapper .flex-left .index-txt.f-size-44{
        font-size: 3.2vw;
    }
}

@media screen and (max-width:1180px) {
    .works .flex-wrapper img{
        width: 45vw;
    }
}
@media screen and (max-width:1050px) {
    .works ul.works-txt-list li::before {
        top: 6px;
    }

}

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

    .works .flex-wrapper .flex-right{
        text-align: center;
        margin-top: 5rem;
    }
    .works .flex-wrapper img {
        width: 80%;
    }
    .works .works-slider {
        margin-top: 9rem;
    }
    .works-popup__inner{
        max-width: 500px;
        padding: 4rem 8rem;
    }
    .works-popup__img{
        width: 100%;
    }
    .works .flex-wrapper .flex-left .index-txt.f-size-44{
        font-size: 4rem;
    }
}

@media screen and (max-width:550px) {
    .works-popup__inner{
        padding: 5rem;
    }
}

@media screen and (max-width:480px) {
    .works .flex-wrapper img {
        width: 100%;
    }
    .works-more-btn{
        width: 80%;
        margin: 5rem auto 0;
    }
    .works-popup__instagram-wrap-btn::before {
        width: 40%;
        max-width: 20rem;
        left: -1rem;
    }
    .works-popup__instagram-name,
    .works-popup__instagram-handle{
        font-size: 13px;
    }
    .works-popup__instagram-wrap{
        padding: 0 1rem 2.5rem;
    }
    .works-popup__instagram-wrap-btn{
        margin-top: 2rem;
    }
}

@media screen and (max-width:400px) {
    .works-popup__inner {
        padding: 3rem;
    }
}



/* -----------------------------------------------------------
    採用イベント情報
----------------------------------------------------------- */

@media screen and (max-width:1346px) {
    ol.information-event-list{
        justify-content: center;
    }
}

@media screen and (max-width:1050px) {
    .information .sec01::before{
        top: 200px;
    }
    .information-btn__lead-txt{
        margin-top: 3px;
    }
    ol.information-event-list li .information-date-wrapper .day{
        top: -3px;
    }
}

@media screen and (max-width:768px) {
    ul.information-voice-list li{
        width: 80%;
    }
    ul.information-voice-list li:nth-child(odd) .flex-wrapper{
        flex-direction: row;
    }
    ul.information-voice-list li .flex-wrapper .img{
        min-width: 80px;
    }

    .recruitment-flow__label{
        font-size: 2.4rem;
    }
    .recruitment-flow__badge{
        top: 0.2rem;
        left: 0.2rem;
        width: 6rem;
        height: 6rem;
        font-size: 2.8rem;
    }
    .information-btn{
        margin-top: 6rem;
    }
    .information{
        margin-top: 6rem;
        padding-bottom: 10rem;
    }
    ol.information-event-list{
        margin-top: 5rem;
    }
    .information .sec02,
    .information .sec03 {
        margin-top: 7rem;
    }
    .information .sec01::before{
        left: clamp(-80px, -10vw, -10px);
    }
    .information .sec03::before{
        top: -20px;
    }
    .information .sec03::after{
        bottom: -60px;
    }
    ol.information-event-list--card {
        gap: 3rem;
    }
}

@media screen and (max-width:550px) {

    ol.information-event-list li{
        width: 100%;
        min-width: auto;
    }

    ul.information-voice-list li{
        width: 95%;
    }
    ul.information-voice-list li .flex-wrapper .img {
        min-width: 60px;
    }
    ul.recruitment-flow{
        margin-top: 4rem;
    }
    .recruitment-flow__label {
        font-size: 1.8rem;
    }
    .recruitment-flow__badge {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
        padding: 0rem;
        padding-top: 4px;
    }
    .recruitment-flow__arrow{
        width: 10%;
    }
    .recruitment-flow__circle{
        width: 90%;
    }
    .information .information-btn__lead{
        flex-direction: column;
    }
    .information .information-btn__link{
        position: relative;
        padding: 3.5rem 5rem;
        padding-left: 5rem;
        margin-top: 3rem;
    }
    .information .information-btn__badge{
        position: absolute;
        top: -17px;
        padding: 0.8rem 1.8rem 1rem;
    }

}

@media screen and (max-width:460px) {

    ol.information-event-list--card > li.information-event-card{
        width: 100%;
        min-width: auto;
    }

}


/* -----------------------------------------------------------
    エントリー
----------------------------------------------------------- */

@media screen and (max-width:768px) {
    .entry-form .mypage-banner::before{
        width: 200px;
        height: 80px;
        top: -10px;
        left: -10px;
    }
    .entry-form .mypage-banner-wrapper {
        padding-top: 6rem;
    }

    .entry-form-cf7 {
        margin-top: 5rem;
    }
}