@charset "UTF-8";

@media screen and (max-width: 1240px) {
    :root{
        --wrap: 100%;
        --space: 20px;
    }

    .wrap{
        padding: 0 20px;
    }
}
@media screen and (max-width: 991px) {
    :root{
        --header-height: 50px;
    }

    body{
        min-width: 320px;
    }
    .pc-none{
        display: block;
    }
    .tb-none{
        display: none;
    }

    /* HEADER */
    .header-logo{
        position: relative;
        z-index: 1;
        width: 230px;
        height: 100px;
    }
    .header-logo img{
        width: 180px;
    }
    #header{
        align-items: flex-start;
        justify-content: space-between;
        background-color: transparent;
    }
    #header::before{
        content: "";
        width: 100%;
        height: 50px;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
    }
    .nav-toggle-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        position: relative;
        z-index: 1;
        background-color: #da005d;
    }
    .nav-toggle{
        position: relative;
        width: 20px;
        height: 16px;
    }
    .nav-toggle span{
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: var(--transition);
    }
    .nav-toggle span:nth-child(1){
        top: 0;
    }
    .nav-toggle span:nth-child(2){
        top: 7px;
    }
    .nav-toggle span:nth-child(3){
        top: 14px;
    }
    .open .nav-toggle span:nth-child(1){
        top: 7px;
        transform: rotate(45deg);
    }
    .open .nav-toggle span:nth-child(2){
        opacity: 0;
    }
    .open .nav-toggle span:nth-child(3){
        top: 7px;
        transform: rotate(-45deg);
    }
    .header-menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 200px 40px 40px;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        pointer-events: none;
        overflow-y: scroll;
    }
    .open .header-menu{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .header-menu nav{
        display: block;
    }
    .header-menu ul{
        display: block;
    }
    .header-menu__btn a{
        margin: 0 auto;
    }
    .header-menu__btn{
        margin-bottom: 20px;
    }
    .header-menu__btn:last-child{
        margin-bottom: 0;
    }
    .header-menu ul li a{
        font-size: 18px;
    }
    .header-menu ul li{
        margin-bottom: 30px;
    }
    .header-menu ul{
        margin-bottom: 100px;
    }
    .header-menu__btn a{
        width: 300px;
        height: 100px;
    }


    /* FOOTER */
    .footer-flex{
        display: block;
        text-align: center;
    }
    .footer-flex__logo{
        display: block;
        margin-bottom: 60px;
    }
    .footer-flex__logo-text{
        margin-top: 30px;
    }
    .footer-flex__logo-img img{
        display: block;
        width: 180px;
        margin: 0 auto;
    }
    



    /* TOP-WORKS */
    .top-works__grid{
        grid-template-columns: repeat(1,1fr);
    }


    /* TOP-PEOPLE */
    .top-people__grid-item__lead span{
        font-size: 14px;
    }


    /* TOP-COMPANY */
    .top-company__flex{
        display: block;
    }
    .top-company__flex-img{
        margin: 0 auto 30px;
    }
    .top-company__flex-cont{
        max-width: 100%;
    }


    /* TOP-RECRUITMENT */
    .top-recruitment__grid-item{
        width: 100%;
    }


    /* MODAL */
    #modal{
        max-width: calc(100% - 40px);
    }
    .modal-inner{
        padding: 60px 50px;
    }
    .modal-content__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .modal-content__grid-img{
        padding-left: 0;
        margin-top: 30px;
        text-align: center;
    }
    .modal-content__schedule{
        padding: 40px;
    }
}


@media screen and (max-width: 767px) {
    
    /* COMMON */
    .section-padding{
        padding: 100px 0;
    }
    .title{
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 20px;
    }
    .title-en{
        margin-left: -20px;
        margin-right: -20px;
        width: 100vw;
        overflow: hidden;
    }
    .title-en span::before{
        font-size: 80px;
        line-height: 112px;
    }
    .title-en span{
        line-height: 112px;
    }
    .title-text{
        font-size: 40px;
    }
    .title-desc{
        text-align: left;
    }


    /* HEADER */
    .header-menu{
        padding-left: 20px;
        padding-right: 20px;
    }
    .header-menu__btn a{
        width: 100%;
    }


    /* FOOTER */
    #footer{
        padding: 50px 0;
    }


    /* TOP-MV */
    .mv{
        padding-left: 0;
    }
    .mv-scroll{
        display: none;
    }
    .mv-img video, .mv-img img{
        height: calc(100svh - var(--header-height));
        /*height: calc(41svh - var(--header-height));*/
        object-fit: cover;
    }
    .mv-text{
        font-size: 33px;
        right: auto;
        bottom: 50px;
        left: 20px;
    }
    .mv-text span{
        /*font-size: 33px;*/
        font-size: 27px;
        padding: 0 14px;
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;
    }
    .mv-text span:last-child{
        margin-bottom: 0;
    }
    .mv-text.sp{
        display: block;
    }
    .mv-text:not(.sp){
        display: none;
    }



    /* TOP-MESSAGE */
    .top-message__lead{
        font-size: 30px;
        line-height: 1.33;
        text-align: left;
    }
    .top-message__lead span{
        font-size: 40px;
    }
    .top-message__text{
        text-align: left;
    }
    .top-message__grid{
        grid-template-columns: repeat(1,1fr);
    }


    /* TOP-WORKS */
    .top-works__grid-item a{
        padding: 40px 20px;
    }
    .top-works__grid-item__flex-img{
        max-width: 130px;
    }
    .top-works__grid-item__ttl{
        font-size: 20px;
    }
    .top-works__grid-item__text{
        font-size: 14px;
    }


    /* TOP-PEOPLE */
    .top-people__grid{
        grid-template-columns: repeat(1,1fr);
        gap: 60px 0;
    }
    .top-people__grid-item__img{
        text-align: center;
    }
    .top-people__grid-item__lead span{
        font-size: 18px;
    }
    .top-people__grid-item__name{
        text-align: left;
    }


    /* TOP-PICTURES */
    .top-pictures__slider-item{
        width: 260px;
    }
    .top-pictures__nav-bar{
        max-width: calc(100% - 112px);
    }
    .top-numbers__cont-flex:nth-of-type(even) .top-numbers__cont-flex__box:nth-of-type(1), .top-numbers__cont-flex:nth-of-type(odd) .top-numbers__cont-flex__box:nth-of-type(2){
        width: 100%;
    }
    .top-numbers__cont-flex:nth-of-type(even) .top-numbers__cont-flex__box:nth-of-type(2), .top-numbers__cont-flex:nth-of-type(odd) .top-numbers__cont-flex__box:nth-of-type(1){
        width: 100%;
    }
    .top-numbers__cont-flex__box{
        border-right: none;
        border-bottom: 1px solid rgb(250, 238, 243, 0.2);
        height: 245px;
        padding: 0 50px;
    }
    .top-numbers__cont-flex__box:last-child{
        border-bottom: none;
    }


    /* MODAL */
    .modal-close{
        top: 10px;
        right: 10px;
    }
    .modal-inner{
        padding: 40px 20px;
    }
    .modal-content__num{
        font-size: 14px;
    }
    .modal-content__title{
        font-size: 26px;
    }
    .modal-content__btns{
        max-width: 100%;
        grid-template-columns: repeat(1,1fr);
        gap: 10px 0;
    }
    .modal-content__body-text{
        font-size: 14px;
    }
    .modal-content__schedule-ttl__text{
        font-size: 24px;
    }
    .modal-content__schedule-ttl__en{
        font-size: 12px;
        margin-bottom: 10px;
    }
    .modal-content__schedule{
        padding: 40px 10px;
    }
    .modal-content__schedule-flow__box{
        padding: 30px;
    }
    .modal-content__schedule-flow__box-time{
        position: initial;
        margin-bottom: 10px;
    }
    .modal-content__schedule-flow__box-time br{
        display: none;
    }
    .modal-content__schedule-flow__box-flex__item{
        width: 100%;
        margin-bottom: 20px;
    }
    .modal-content__schedule-flow__box-flex__img{
        max-width: 60%;
        margin: 0 auto;
        padding-left: 0;
    }
}