@charset "utf-8";

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

    .wrap,
    #footer .wrap{
        padding: 0 20px;
    }
}

@media screen and (max-width: 991px) {
    body{
        min-width: 320px;
    }

    /* HEADER */
    #header,
    #header.over{
        padding: 20px;
    }
    #header .header-logo{
        position: relative;
        z-index: 1;
    }
    #header .header-logo img{
        display: block;
    }
    #header .header-menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .2s;
        background-color: var(--blue);
        overflow-y: scroll;
        padding: 100px 20px 40px;
    }
    #header.open .header-menu{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .nav-toggle-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        z-index: 1;
        transition: .2s;
    }
    .nav-toggle{
        width: 14px;
        height: 11px;
        position: relative;
    }
    .nav-toggle span{
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--base-color);
        transition: .2s;
    }
    .nav-toggle span:nth-of-type(1){
        top: 0;
    }
    .nav-toggle span:nth-of-type(2){
        top: 5px;
    }
    .nav-toggle span:nth-of-type(3){
        top: 10px;
    }
    .open .nav-toggle span:nth-of-type(1){
        top: 5px;
        transform: rotate(45deg);
    }
    .open .nav-toggle span:nth-of-type(2){
        opacity: 0;
    }
    .open .nav-toggle span:nth-of-type(3){
        top: 5px;
        transform: rotate(-45deg);
    }
    #header .header-menu, #header .header-menu ul, #header .header-menu__btn{
        display: block;
    }
    #header .header-menu ul li{
        text-align: center;
        margin-bottom: 15px;
    }
    #header .header-menu ul li:last-child{
        margin-bottom: 0;
    }
    #header .header-menu ul li a{
        font-size: 20px;
    }
    .header-menu__btn{
        text-align: center;
        margin-top: 30px;
    }
    .header-menu__btn-item:not(:last-child){
        margin-bottom: 15px;
    }


    /* FOOTER */
    #footer{
        padding: 30px 0 20px;
    }
    #footer .footer-content__flex{
        display: block;
    }
    .footer-content__flex-link{
        max-width: 100%;
    }
    #footer .footer-content__flex-menu__pagetop{
        text-align: center;
        margin: 30px 0;
    }
    #footer .footer-content__bottom{
        display: block;
    }
    #footer .footer-content__bottom-left{
        justify-content: center;
        margin-bottom: 40px;
    }
    #footer .footer-content__bottom-right{
        display: block;
        text-align: center;
    }
    #footer .footer-content__bottom-right__copy{
        margin-top: 10px;
    }
    #footer .footer-content__flex-menu__list,
    #footer .footer-content__flex-menu__list ul,
    #footer .footer-content__flex-menu__list-btn{
        justify-content: center;
    }


    /* TOP */
    .mv{
        height: auto;
        background-size: 160%;
        background-position-y: -5vw;
        position: relative;
    }
    .mv-item{
        display: none;
    }
    .mv-glasses{
        height: auto;
    }
    .mv-text{
        top: 15vw;
        font-size: 3vw;
    }
    .mv-mosaic.n1{
        width: 20vw;
        top: 12vw;
    }
    .mv-mosaic.n2{
        width: 15vw;
        bottom: 3vw;
    }
    .mv-en{
        bottom: 4vw;
    }
    .mv-scrolldown{
        display: none;
    }
    .glasses-anime img{
        width: 70px;
    }
    .top-concept__mosaic.n1{
        width: 28vw;
    }
    .top-concept__mosaic.n1{
        font-size: 50px;
    }
    .top-concept__ttl span{
        font-size: 100px;
    }
    .top-concept__ttl{
        font-size: 50px;
    }
    .top-concept__lead, .top-concept__text{
        font-size: 30px;
    }
    .top-concept__mosaic.n3{
        left: 0;
        width: 100px;
        top: 30%;
    }
    .top-concept__mosaic.n2{
        width: 18vw;
    }
    .top-concept__illust{
        max-width: 458px;
        gap: 20px;
        margin-bottom: 50px;
    }
    .top-concept__lead{
        margin: 40px 0;
    }
    .top-concept{
        padding: 100px 0;
        min-height: initial;
    }
    .top-about__cont{
        grid-template-columns: repeat(2,1fr);
    }
    .top-about__cont-box__item-box__num{
        margin-bottom: 10px;
    }
    .top-strategy__flex{
        display: block;
    }
    .top-strategy{
        background: none;
    }
    .top-strategy__flex-box__text{
        font-size: 34px;
        text-align: center;
    }
    .top-strategy__flex-img{
        text-align: center;
    }
    .top-news__flex{
        display: block;
    }
    .title{
        margin-bottom: 30px;
    }
    .top-news__flex-box{
        margin-bottom: 30px;
    }
    .top-news__flex-box__view-more{
        text-align: right;
    }
    .top-news__flex-box__view-more a{
        margin-right: 0;
        text-align: left;
    }
    .top-link{
        background: #fff;
        height: auto;
        padding: 80px 0;
    }
    .top-link__flex-box{
        margin: 0 auto 30px;
    }
    .top-link__flex-box:last-child{
        margin-bottom: 0;
    }


    /* PAGE */
    .first-section{
        margin-top: -25vw;
    }



    /* GALLERY */
    #gallery-cursor{
        display: none;
    }
    .gallery-sec01__grid{
        gap: 20px;
    }
    .gallery-sec01__grid-item::before{
        opacity: 0;
    }


    /* WORKS */
    .works-sec01__lead{
        font-size: 40px;
    }
    .works-sec01__text{
        font-size: 20px;
    }
    .works-sec01__lead span::before{
        top: -10px;
        width: 10px;
        height: 10px;
    }
    .works-sec01__cont-box__img, .works-sec01__cont-box__item{
        max-width: 100%;
    }
    .works-sec01__cont-box__item{
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding: 30px;
        border-radius: 10px;
        background-color: #fff;
        margin-top: 30px;
        z-index: 2;
    }
    .works-sec01__cont-box__item > img{
        display: none;
    }
    .works-sec01__cont-box__item-inner{
        position: initial;
    }
    .works-sec01__cont-box__item-inner{
        padding: 0 !important;
    }
    .works-sec01__cont-box:nth-of-type(odd) .works-sec01__cont-box__item-char,
    .works-sec01__cont-box:nth-of-type(even) .works-sec01__cont-box__item-char{
        left: auto;
        right: 10px;
        top: 40px;
    }
    .works-sec01__cont-box__item-ttl{
        font-size: 26px;
    }
    .works-sec01__cont-box__item-ttl::before{
        width: 20px;
        height: 20px;
    }
    .works-sec01__cont-box{
        margin-bottom: 100px;
    }
    .works-sec01__cont-box__img{
        text-align: center;
    }


    /* STAFF */
    .staff-sec01__grid{
        grid-template-columns: repeat(2,1fr);
    }
    .staff-sec01__column:nth-of-type(odd) .staff-sec01__column-img{
        right: 0;
    }
    .staff-sec01__column-cont{
        max-width: 100%;
    }
    .staff-sec01__column-img{
        position: initial;
        margin: 0 auto 30px;
    }
    .staff-sec02__list{
        grid-template-columns: repeat(2,1fr);
    }
    .staff-sec02__list-wrap{
        max-width: 100%;
        padding: 0 20px;
    }


    /* REQUIREMENTS */
    .requirements-sec01__box-item{
        width: 100%;
    }
    .requirements-sec01__box{
        display: block;
    }
    .requirements-sec01__box-img{
        margin: 40px auto 0;
        transform: initial;
    }
    .requirements-sec02__cont dl{
        padding: 20px 0;
        display: block;
    }
    .requirements-sec02__cont dl dt{
        width: 100%;
        font-size: 18px;
        margin-bottom: 10px;
        padding-left: 60px;
    }
    .requirements-sec02__cont dl dt br{
        display: none;
    }
    .requirements-sec02__cont dl dd{
        width: 100%;
        padding-left: 0;
        font-size: 16px;
    }
    .requirements-sec02__cont dl dt::before{
        width: 50px;
        height: 20px;
        top: 5px;
    }
    .requirements-sec03__flex,
    .requirements-sec03__flex.col4{
        grid-template-columns: repeat(2,1fr);
    }
    .requirements-sec03__flex-item{
        background: #fff !important;
        height: auto;
        padding: 20px;
        border: 1px solid var(--blue);
    }
    .requirements-sec03__flex-item__text{
        position: initial;
        transform: initial;
        font-size: 20px;
        margin-top: 25px;
    }
    .requirements-sec03__flex-item__text br{
        display: none;
    }
    .requirements-sec03__flex-item:last-child{
        background-color: var(--blue) !important;
        border-color: #fff;
    }


    /* ENTRY */
    .entry-form__cont dl{
        padding: 20px 0;
    }
    .entry-form__cont dl dt{
        font-size: 18px;
        margin-bottom: 10px;
        width: 100%;
        padding: 0;
    }
    .entry-form__cont dl dd{
        width: 100%;
        padding: 0;
    }


    .top-about__cont-box a .top-about__cont-box__img-filter{
        opacity: 0;
    }
    .top-about__cont-box a .top-about__cont-box__item-bg__illust-body{
        transform: translate(-50%,-100%);
    }
    .top-about__cont-box a .top-about__cont-box__item-bg svg g{
        fill: var(--blue);
    }
    .top-about__cont-box a .top-about__cont-box__item-bg svg .stroke{
        fill: #fff;
    }
    .top-about__cont-box a .top-about__cont-box__item-box__num,
    .top-about__cont-box a .top-about__cont-box__item-box__text,
    .top-about__cont-box a .top-about__cont-box__item-box__en{
        color: #fff;
    }
    .staff-sec01__column-img__light,
    .requirements-sec01__box-img__light{
        display: none;
    }
}


@media screen and (max-width: 767px) {
    :root{
        --padding: 80px;
    }

    .wrap{
        overflow: initial;
    }
    .table-grad:after{
        display: none;
    }
    .table-wrap{
        white-space: normal;
        margin-bottom: 0;
    }
    p{
        font-size: 14px;
    }


    /* HEADER */
    #header,
    #header.over{
        padding: 15px 20px;
    }
    #header .header-logo img{
        width: 190px;
    }
    #header .header-menu ul li a{
        font-size: 18px;
    }


    /* FOOTER */
    #footer .footer-content__flex-link__item-en{
        font-size: 22px;
        line-height: 1;
    }
    #footer .footer-content__flex-menu__list ul, #footer .footer-content__flex-menu__list-btn{
        gap: 5px 10px;
    }
    #footer .footer-content__flex-menu__list{
        gap: 10px;
    }
    #footer .footer-content__bottom-left__logo{
        margin-bottom: 20px;
    }
    #footer .footer-content__bottom-left__logo img{
        width: 140px;
        margin: 0 auto;
    }
    #footer .footer-content__bottom-left{
        display: block;
    }
    #footer .footer-content__bottom-left__sns{
        justify-content: center;
    }
    .footer-content__flex-link__item-en{
        font-size: 20px;
        line-height: 1;
    }
    .footer-content__flex-link__item-text{
        font-size: 12px;
    }
    .footer-slider{
        margin-top: 30px;
        padding-bottom: 30px;
    }



    /* TOP */
    .mv{
        background-size: 210%;
        background-position-y: -6vw;
    }
    .mv-glasses{
        transform: translateX(-50%);
        left: 50%;
        position: relative;
        width: 130%;
        max-width: 130%;
    }
    .mv-text {
        top: 20vw;
        font-size: 4vw;
    }
    .top-concept{
        padding: 30px 0 50px;
    }
    .top-concept__ttl{
        font-size: 30px;
        transform: translateX(10px);
    }
    .top-concept__ttl span{
        font-size: 60px;
        transform: translateX(-8px);
        margin-top: 15px;
    }
    .top-concept__ttl span::before{
        width: 10px;
        height: 10px;
        top: -5px;
    }
    .top-concept__lead, .top-concept__text{
        font-size: 20px;
    }
    .top-concept__mosaic.n3{
        width: 70px;
        top: 20%;
    }
    br.s-up{
        display: block;
    }
    .text-slider__item{
        font-size: 32px;
    }
    .top-about__item{
        top: -170px;
        width: 130px;
    }
    .title-en{
        font-size: 30px;
        margin-top: 0;
    }
    .glasses-anime img {
        width: 50px;
    }
    .top-about{
        padding-bottom: 50px;
    }
    .top-staff{
        padding-bottom: 0;
    }
    .top-about__cont{
        grid-template-columns: repeat(1,1fr);
    }
    .top-staff{
        background-size: 130px;
    }
    .top-staff__slider-item{
        width: 320px;
        margin: 0 auto;
        padding: 0 20px 30px;
    }
    .top-staff__slider-item__box-text{
        font-size: 12px;
    }
    .top-staff__slider-item__box-inner{
        padding: 5px 20px 20px;
    }
    .top-staff__slider-item__box-char{
        width: 60px;
        right: 10px;
    }
    .top-staff__slider-nav__arrow img{
        width: 40px;
    }
    .top-staff__slider-nav{
        margin-top: 0;
    }
    .top-staff__view-more{
        margin-top: 30px;
    }
    .top-strategy__text-slider-wrap.top{
        margin-bottom: 40px;
    }
    .top-strategy__flex-box__text{
        font-size: 24px;
    }
    .top-strategy__flex-img video{
        width: 100%;
    }
    .top-news__flex-box__view-more a{
        font-size: 14px;
        width: 160px;
        height: 36px;
        line-height: 34px;
    }
    .news-box__thumb{
        width: 100%;
        height: 55vw;
    }
    .news-box__item{
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }
    .top-news__mosaic{
        display: none;
    }
    .top-news__illust{
        width: 100px;
    }
    .news-box{
        padding: 20px 0;
    }
    .news-box__item__view-more a{
        width: 180px;
        font-size: 12px;
        height: 32px;
        line-height: 30px;
    }
    .top-link__flex-box{
        height: auto;
    }
    .top-link__flex-box__item .view-more a{
        width: 180px;
        font-size: 13px;
        height: 32px;
        line-height: 30px;
    }
    .top-link__flex-box__item.blue {
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        padding-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .top-link__flex-box__item .title{
        margin-bottom: 15px;
    }
    .top-link__flex-box__item .title-en {
        font-size: 24px;
    }
    .top-link__flex-box__item .title-text{
        font-size: 11px;
    }
    .top-news__flex-cont{
        min-height: initial;
        padding-bottom: 70px;
    }
    .mv-mosaic.n1{
        display: none;
    }


    /* PAGE */
    .page-mv__title{
        top: 80px;
        padding-left: 60px;
        opacity: 1;
        filter: blur(0);
    }
    .entry-sec01__title{
        padding-top: 30px;
    }
    .page-mv__title .title-en{
        font-size: 22px;
        line-height: 1;
    }
    .page-mv__title .title-icon{
        top: 10px;
    }
    .page-mv__title .title-text{
        font-size: 12px;
    }
    .first-section {
        margin-top: -15vw;
    }
    .page-mv__hv{
        top: 35vw;
    }


    /* INFOGRAPHICS */
    .infographics-sec01__cont{
        overflow-x: scroll;
    }
    .infographics-sec01__cont img{
        width: 750px;
        max-width: 750px;
    }


    /* GALLERY */
    .gallery-sec01__grid{
        grid-template-columns: repeat(2,1fr);
    }


    /* WORKS */
    .works-sec01__lead{
        font-size: 26px;
    }
    .works-sec01__lead span::before{
        top: -6px;
        width: 6px;
        height: 6px;
    }
    .works-sec01__text{
        font-size: 14px;
    }
    .works-sec01__cont{
        margin-top: 30px;
    }
    .works-sec01__cont-box:nth-of-type(odd) .works-sec01__cont-box__item-char, .works-sec01__cont-box:nth-of-type(even) .works-sec01__cont-box__item-char{
        width: 50px;
        right: -10px;
    }
    .works-sec01__cont-box__item-ttl{
        font-size: 18px;
    }
    .works-sec01__cont-box__item-ttl::before{
        width: 14px;
        height: 14px;
    }
    .works-sec01__cont-box__item{
        padding: 20px;
    }
    .works-sec01__cont-box__item-list__ttl{
        font-size: 15px;
    }
    .works-sec01__cont-box__item-list__text{
        font-size: 13px;
    }
    .works-sec01__cont-box__item-list{
        margin-bottom: 20px;
    }
    .works-sec01__cont-box{
        margin-bottom: 50px;
    }


    /* STAFF */
    .staff-sec01__grid{
        grid-template-columns: repeat(1,1fr);
        gap: 0;
    }
    .staff-mv__box{
        margin-top: -55vw;
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 20px;
        z-index: 1;
    }
    .staff-mv__bg{
        position: relative;
        left: -40%;
    }
    .staff-mv__bg img{
        width: 170%;
        max-width: 170%;
    }
    .staff-mv__img{
        padding-top: 12%;
        width: 115%;
        right: -25%;
    }
    .staff-mv__box-label span{
        font-size: 16px;
        margin-bottom: 5px;
    }
    .staff-mv__copy{
        position: initial;
        margin-top: 30px;
        transform: initial;
        width: 100%;
        padding: 0 20px;
    }
    .staff-mv__copy-char{
        right: 2vw;
        width: 10vw;
    }
    .staff-mv__copy-bg{
        z-index: -1;
        display: none;
    }
    .staff-sec01__column-cont__box-lead, .requirements-sec01__box-item__lead{
        font-size: 22px;
        margin-bottom: 15px;
    }
    .staff-sec01__column-cont__box-text, .requirements-sec01__box-item__text{
        font-size: 14px;
    }
    .staff-sec01__column-cont__box-text span{
        font-size: 15px;
    }
    .staff-sec01__column-img{
        width: 70%;
    }
    .staff-sec02__list{
        grid-template-columns: repeat(1,1fr);
        gap: 0;
    }
    .staff-mv__box-name{
        font-size: 18px;
    }
    .staff-mv__box-name span{
        font-size: 30px;
    }
    .staff-mv__box-name small{
        font-size: 12px;
    }


    /* NEWS */
    .single-sec__view-more a{
        font-size: 14px;
    }


    /* REQUIREMENTS */
    .requirements-sec01__box-img{
        width: 70%;
    }
    .requirements-sec02__label{
        font-size: 16px;
        margin-bottom: 30px;
    }
    .requirements-sec02__tab li{
        font-size: 14px;
        height: 42px;
        line-height: 40px;
    }
    .requirements-sec02__tab{
        height: 42px;
    }
    .requirements-sec02__cont dl dt{
        font-size: 16px;
        padding-left: 50px;
    }
    .requirements-sec02__cont dl dd{
        font-size: 14px;
    }
    .requirements-sec02__cont dl dt::before{
        width: 40px;
        height: 16px;
        top: 6px;
    }
    .requirements-sec03__flex, .requirements-sec03__flex.col4{
        grid-template-columns: repeat(1,1fr);
        gap: 10px;
    }
    .requirements-sec03__flex-item__text{
        font-size: 16px;
        margin-top: 0;
    }
    .requirements-sec03__flex-item__num{
        position: initial;
    }


    /* ENTRY */
    .entry-form input[type="text"], .entry-form input[type="email"], .entry-form input[type="tel"]{
        height: 45px;
    }
    .entry-form textarea{
        height: 150px;
    }
    .entry-form__submit{
        margin-top: 40px;
        max-width: 300px;
        height: 300px;
        padding: 25px;
    }
    .entry-form__submit-ttl__illust{
        width: 60px;
        height: 24px;
    }
    .entry-form__submit-ttl__en{
        font-size: 26px;
        margin-top: 10px;
        line-height: 1;
    }
    .entry-form__submit-ttl__text{
        font-size: 12px;
    }
    .entry-form__submit input[type="submit"]{
        font-size: 14px;
        width: 200px;
        padding: 10px 0;
    }
    .entry-form__submit-ttl{
        margin-bottom: 20px;
    }
    .entry-form__submit-inner{
        padding-top: 45px;
    }
}