@charset "UTF-8";

@media screen and (max-width: 1440px) and (min-width: 1200px){
    .header-logo{
        padding: 30px 30px 20px 20px;
    }
    .header-logo img{
        width: 250px;
    }
    .header-menu__nav > li > a{
        padding: 30px 10px;
    }
}
@media screen and (max-width: 1360px) and (min-width: 1200px){
    .header-menu__link-item a{
        width: 160px;
    }
    .header-menu__link-item a::before{
        display: none;
    }
}

@media screen and (max-width: 1199px){
    :root{
        --padding: 80px;
        --wrap: 100%;
        --space: 20px;
    }
    .wrap{
        padding: 0 20px;
    }
    .single-people-sec__header::before, .single-crosstalk-sec__header::before{
        width: calc(60% + 20px);
        right: -20px;
    }
}
@media screen and (max-width: 991px){
    body{
        min-width: 320px;
        padding-top: 45px;
    }

    /* HEADER */
    .header-logo{
        padding: 20px;
    }
    .header-logo img{
        width: 246px;
    }
    .header-menu nav{
        display: none;
    }
    .nav-toggle-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background-color: var(--text-color);
    }
    .nav-toggle{
        width: 20px;
        height: 7px;
        position: relative;
    }
    .nav-toggle span{
        display: block;
        width: 100%;
        height: 1px;
        background-color: #fff;
        position: absolute;
        left: 0;
        transition: var(--transition);
    }
    .nav-toggle span:nth-child(1){
        top: 0;
    }
    .nav-toggle span:nth-child(2){
        bottom: 0;
    }
    .open .nav-toggle span:nth-child(1){
        top: 3px;
        transform: rotate(30deg);
    }
    .open .nav-toggle span:nth-child(2){
        bottom: 3px;
        transform: rotate(-30deg);
    }


    /* DRAWER */
    #drawer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        background-color: var(--bg-gray);
        padding: 170px 20px;
        text-align: center;
    }
    .drawer-menu li{
        margin-bottom: 30px;
    }
    .drawer-menu li,
    .drawer-menu li a{
        font-size: 18px;
        line-height: normal;
        letter-spacing: 0.1em;
        font-weight: 500;
    }
    .drawer-link li,
    .drawer-link li a{
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.1em;
    }
    .drawer-link li:not(:last-child){
        margin-bottom: 20px;
    }
    .drawer-link li a{
        padding: 8px 0;
        display: block;
        max-width: 230px;
        margin: 0 auto;
        border-radius: 50px;
        background-color: #fff;
    }
    .drawer-link li.border-bk a{
        border: 1px solid var(--text-color);
    }
    .drawer-link li.border-theme a{
        color: var(--theme-color);
        border: 1px solid var(--theme-color);
    }


    /* FIXED LINK */
    #fixed-link{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    #fixed-link ul{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    #fixed-link ul li a{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0.1em;
        font-weight: bold;
        gap: 5px;
        text-align: center;
        position: relative;
        height: 80px;
    }
    #fixed-link ul li a::before{
        content: "";
        width: 14px;
        height: 12px;
        background: url(../img/common/arrow.svg) no-repeat center center / contain;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 10px;
        z-index: 1;
        pointer-events: none;
    }
    #fixed-link ul li a span{
        display: block;
        font-weight: bold;
        font-family: var(--font-poppins);
        font-size: 11px;
        letter-spacing: 0.2em;
        line-height: normal;
    }
    #fixed-link ul li.bg-bk a{
        background-color: var(--text-color);
    }
    #fixed-link ul li.bg-theme a{
        background-color: var(--theme-color);
    }
    #fixed-link ul li.bg-bk a,
    #fixed-link ul li.bg-theme a{
        color: #fff;
    }


    /* FOOTER */
    #footer{
        padding: 60px 0 40px;
    }
    .footer-flex{
        display: block;
    }
    .footer-flex__logo img{
        margin: 0 auto;
    }
    .footer-flex__logo{
        margin-bottom: 50px;
    }
    .footer-flex__menu{
        justify-content: center;
        margin-bottom: 80px;
        gap: 20px 40px;
    }
    .footer-link{
        display: block;
        text-align: center;
    }
    .footer-link__instagram{
        display: inline-block;
    }
    .footer-link__instagram::after{
        position: initial;
        margin-left: 5px;
        display: inline-block;
        transform: initial;
        vertical-align: middle;
    }
    .footer-link__menu{
        gap: 20px;
        margin-bottom: 17px;
        justify-content: center;
    }
    .footer-copy{
        text-align: center;
        margin-top: 40px;
    }


    /* TOP */
    .mv-scroll__bar{
        height: 100px;
    }
    @keyframes scrollAnimation {
        0% {
            top: 0;
        }
        100% {
            top: 50px;
        }
    }
    .top-vision{
        padding: calc(var(--padding) + 40px) 0 var(--padding);
    }
    .top-vision__ttl::before{
        font-size: 60px;
    }
    .top-information__en::before{
        font-size: 60px;
    }
    .top-people__label{
        right: 20px;
    }
    .top-people__label img{
        width: 400px;
    }
    .top-people__grid{
        grid-template-columns: repeat(2,1fr);
    }
    .people-card__img-box{
        padding: 0 30px 50px;
    }
    .crosstalk-card__box{
        bottom: 40px;
        left: 20px;
    }
    .crosstalk-card__ttl{
        /* top: 20px; */
        top: 22vw;
        bottom: auto;
        right: 20px;
        font-size: 30px;
    }
    .crosstalk-card__arrow{
        display: none;
    }
    .top-works__flex-box__en::before{
        font-size: 80px;
    }
    .top-works__flex{
        display: block;
    }
    .top-works__flex-box{
        width: 100%;
        padding: var(--padding) 0;
    }
    .top-works__flex-img{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .top-works__flex-img__item{
        height: 30vw;
    }
    .top-company::before, .company-sec02::before{
        width: 100%;
    }
    .top-company__flex, .company-sec02__flex{
        display: block;
    }
    .top-company__flex-content, .company-sec02__flex-content{
        max-width: 100%;
        margin-top: 60px;
    }
    .title-text,
    .top-information__ttl{
        font-size: 36px;
    }
    .top-cross__flex{
        display: block;
    }
    .top-cross__flex-title{
        margin-bottom: 40px;
    }
    .top-information{
        padding-top: calc(var(--padding) + 40px);
    }
    .top-news__flex{
        display: block;
    }
    .top-news__flex-content{
        margin-top: 40px;
    }


    /* PAGE */
    .page-mv__flex{
        display: block;
    }
    .page-mv__flex-img{
        max-width: 100%;
        margin: 0 -20px 50px;
    }
    .page-mv__flex-img img{
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
    }
    .page-mv{
        margin-top: 40px;
    }
    .first-section{
        padding-top: 80px;
    }
    .page-title__text{
        font-size: 36px;
    }
    .short-mv{
        margin: 40px 0;
    }
    .label-mv__text{
        font-size: 70px;
    }
    .label-mv .page-title{
        margin-top: -60px;
    }


    /* BREADCRUMBS */
    .breadcrumbs-wrap{
        margin-top: 50px;
    }


    /* COMPANY */
    .company-mv__label{
        font-size: 90px;
        left: 20px;
        top: 20px;
    }
    .company-sec01__grid-illust{
        right: 0;
    }
    .company-sec02__flex-title .title{
        margin-bottom: 40px;
    }


    /* REQUIREMENTS */
    .requirements-sec01__flex{
        display: block;
    }
    .requirements-sec01__flex-side{
        max-width: 100%;
        padding-top: 50px;
    }
    .requirements-sec01__flex-main{
        max-width: 100%;
        padding-left: 0;
    }
    .requirements-sec01__flex-main__content-entry a{
        margin: 0 auto;
    }


    /* ENTRY */
    .entry-sec01{
        margin-top: 60px;
        padding: var(--padding) 0;
    }
    .entry-sec01__flex-box{
        max-width: 100%;
        background-color: #fff;
        border: 1px solid var(--theme-color);
        padding: 20px 0;
        text-align: center;
        position: relative;
    }
    .entry-sec01__flex-box::before{
        content: "";
        width: 14px;
        height: 7px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        transform: translate(-50%,50%);
        top: auto;
        bottom: -10px;
        left: 50%;
        position: absolute;
        background-color: var(--theme-color);
    }
    .entry-sec01__flex-box:last-child::before{
        display: none;
    }


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


    /* WORKS */
    .works-sec01__content-img{
        max-width: 300px;
        padding-right: 40px;
    }
    .works-sec01__content-box{
        max-width: calc(100% - 300px);
    }
    .works-sec01__content{
        padding: 30px;
    }
    .works-sec01__content-box{
        padding-top: 0;
        display: block;
    }
    .works-sec01__content-box__more{
        padding: 0;
        margin-top: 30px;
    }


    /* PEOPLE SINGLE */
    .single-people-sec__header-box{
        padding: 30px 50px 0 30px;
    }
    .single-people-sec__header-copy span{
        font-size: 24px;
    }
    .single-people-sec__header-copy{
        bottom: 30px;
        right: 40px;
    }


    /* CROSSTALK SINGLE */
    .single-crosstalk-sec__header .crosstalk-card__box__text span{
        font-size: 24px;
    }
    .single-crosstalk-other__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .single-crosstalk-other .crosstalk-card__img img{
        height: 300px;
    }
}

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

    br.s-up{
        display: block;
    }

    /* FIXED LINK */
    #fixed-link{
        display: none;
    }


    /* FOOTER */
    .footer-flex__logo img{
        width: 246px;
    }
    .footer-flex__menu li, .footer-flex__menu li a{
        font-size: 14px;
    }


    /* TOP */
    .mv{
        padding-left: 0;
    }
    .mv-img img{
        height: calc(822px - 45px);
        object-fit: cover;
    }
    .mv-scroll{
        display: none;
    }
    .top-information__en::before{
        display: none;
    }
    .mv-box__text{
        font-size: 40px;
    }
    .mv-box{
        width: 100%;
        top: 120px;
        left: 0;
        padding: 0 20px;
    }
    .mv-box__en{
        font-size: 18px;
        margin-top: 20px;
        margin-left: 20px;
    }
    .mv-box__en small{
        font-size: 12px;
    }
    .mv-box__text span:nth-of-type(1){
        margin-left: 12px;
    }
    .mv-box__text span:nth-of-type(2){
        margin-left: 30px;
    }
    .top-vision{
        padding: var(--padding) 0;
    }
    .top-vision__ttl{
        text-align: left;
        margin-bottom: 30px;
    }
    .top-vision__ttl::before{
        font-size: 100px;
        writing-mode: vertical-rl;
        transform: initial;
        top: -40px;
        right: 0;
        left: auto;
        line-height: 1;
    }
    .top-vision__text{
        line-height: 2.6;
        text-align: left;
        font-size: 16px;
        margin-bottom: 30px;
    }
    .top-vision__text br{
        display: none;
    }
    .top-vision__text br.s-up{
        display: block;
    }
    .entry-btn{
        gap: 0;
        margin: 0 -20px;
        width: 100vw;
    }
    .entry-btn__item a{
        font-size: 14px;
    }
    .entry-btn__item a::before{
        right: 10px;
    }
    .entry-btn__item a span{
        font-size: 11px;
        margin-top: 5px;
    }
    .top-people__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .people-card__img-box{
        padding: 0 10px 30px;
    }
    .top-people__label img{
        width: 74px;
    }
    .top-people__label{
        right: 40px;
        top: -20px;
    }
    .top-people__flex{
        display: block;
    }
    .top-people__text{
        margin-bottom: 40px;
    }
    .top-people::before{
        height: 870px;
        max-height: 100%;
    }
    .top-people::after{
        display: none;
    }
    .crosstalk-card__img img{
        height: 480px;
        object-fit: cover;
    }
    .crosstalk-card__ttl{
        font-size: 40px;
    }
    .crosstalk-card__box{
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 0 20px 40px;
    }
    .top-works__flex-img__item img{
        height: auto;
    }
    .top-works__flex-box__en::before{
        writing-mode: vertical-rl;
        position: absolute;
        top: 0;
        right: 0;
        top: -50px;
        right: 20px;
        font-size: 100px;
    }
    .top-works__flex-img__item{
        height: auto;
    }
    .top-works__flex-box__ttl{
        font-size: 40px;
        text-align: left;
    }
    .top-works__flex-box__en{
        text-align: left;
        margin-bottom: 0;
    }
    .top-works__flex-box .view-more{
        text-align: left;
    }
    .top-company__flex-title__text br{
        display: none;
    }
    .top-company__flex-content__box{
        height: auto;
    }
    .top-company{
        padding-bottom: 0;
    }
    .top-company::before, .company-sec02::before{
        height: 1100px;
        max-height: 100%;
    }
    .top-information{
        padding-top: var(--padding);
    }
    .top-information__ttl{
        font-size: 28px;
        text-align: left;
        margin-bottom: 20px;
    }
    .top-information__en{
        text-align: left;
        margin-bottom: 0;
    }
    .top-information .entry-btn{
        width: 100%;
        margin: 0;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }
    .top-information .entry-btn__item a{
        height: 80px;
    }
    .top-information .entry-btn__item a::before{
        right: 20px;
    }
    .news-card a{
        padding: 20px 40px 20px 10px;
    }
    .news-card a::before{
        right: 10px;
    }
    .top-news__view-more{
        margin-top: 40px;
        text-align: left;
    }
    .top-news__bnr{
        margin: 60px 0 0;
    }



    /* PAGE */
    .page-mv.label-mv{
        margin-top: 20px;
    }
    .label-mv__text{
        display: none;
        font-size: 40px;
    }
    .label-mv .page-title{
        margin-top: 0;
        text-align: left;
    }
    .page-mv__text{
        margin-top: 20px;
        text-align: left;
    }
    .people-sec01__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .page-mv__flex-img img{
        height: 325px;
    }
    .first-section{
        padding-top: 40px;
    }
    .short-mv .page-title{
        text-align: left;
    }


    /* COMPANY */
    .company-mv__label{
        display: none;
        font-size: 40px;
    }
    .company-sec01__grid.col2,
    .company-sec01__grid.col3{
        grid-template-columns: repeat(1,1fr);
    }
    .company-sec01__grid-item{
        border: 1px solid var(--theme-color) !important;
    }
    .company-sec01__grid.col2 .company-sec01__grid-item:not(:first-child),
    .company-sec01__grid.col3 .company-sec01__grid-item{
        border-top: none !important;
    }
    .company-sec01{
        overflow: hidden;
    }
    .company-sec01__grid-illust{
        width: 146px;
        right: -72px;
    }
    .company-info dl dt,
    .company-info dl dd{
        max-width: 100%;
    }
    .company-info dl dt{
        margin-bottom: 10px;
    }
    .company-sec02__flex-content{
        padding: 40px 20px;
    }
    .company-info dl{
        padding: 15px 0;
    }


    /* REQUIREMENTS */
    .requirements-sec01__flex-main__content-info dl dt,
    .requirements-sec01__flex-main__content-info dl dd{
        max-width: 100%;
    }
    .requirements-sec01__flex-main__content-info dl dt{
        margin-bottom: 10px;
    }
    .requirements-sec01__flex-main__content-entry a{
        max-width: 100%;
    }
    .requirements-sec01__flex-main__content-note__box{
        padding: 15px 20px;
    }


    /* ENTRY */
    .entry-sec01__title{
        text-align: left;
    }
    .entry-sec01__text{
        text-align: left;
    }


    /* NEWS */
    .single-sec__inner{
        padding: 40px 0;
    }
    .single-sec__back a{
        max-width: 100%;
    }


    /* WORKS */
    .works-sec01__content{
        padding: 20px;
    }
    .works-sec01__content-img{
        padding-right: 0;
        margin: 0 auto 20px;
    }
    .works-sec01__content-box{
        max-width: 100%;
    }
    .works-sec01__content-box__more-text{
        max-width: 100%;
    }
    .works-sec01__content-body__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .works-sec01__content-body .entry-btn{
        grid-template-columns: repeat(1,1fr);
        width: auto;
        margin: 0;
    }


    /* PEOPLE SINGLE */
    .single-people-sec__header-copy{
        position: initial;
        width: 100%;
        margin-top: 20px;
    }
    .single-people-sec__header-box{
        position: initial;
        background-color: transparent;
        padding: 0;
        margin-top: 20px;
    }
    .single-people-sec__header-copy span{
        font-size: 18px;
        margin-bottom: 6px;
    }
    .single-people-sec__header, .single-crosstalk-sec__header{
        padding-top: 20px;
    }
    .single-people-sec__header::before, .single-crosstalk-sec__header::before{
        height: 30%;
    }
    .single-people-sec__header-box__ttl{
        margin-bottom: 10px;
    }
    .people-sec01__ttl-en{
        font-size: 34px;
    }
    .people-sec01__ttl-text{
        font-size: 14px;
    }


    /* CROSSTALK HEADER */
    .single-crosstalk-sec__header .crosstalk-card__box{
        position: initial;
        padding: 0;
        margin-top: 20px;
    }
    .single-crosstalk-sec__header .crosstalk-card__box__text span{
        background-color: var(--text-color);
        color: #fff;
        font-size: 22px;
    }
    .crosstalk-sec01 .crosstalk-card__ttl{
        top: 20px;
    }
    .crosstalk-sec01 .crosstalk-card__ttl,
    .single-crosstalk-sec__header .crosstalk-card__ttl{
        font-size: 20px;
    }
    .single-crosstalk-sec__member-box{
        padding: 20px;
        display: block;
    }
    .single-crosstalk-sec__member-box__icon{
        margin: 0 auto;
        text-align: center;
    }
    .single-crosstalk-sec__member-box__item{
        width: 100%;
        padding-left: 0;
        margin-top: 15px;
    }
    .single-crosstalk-sec__member-box__item-meta{
        display: block;
    }
    .single-crosstalk-sec__member-box__item-meta__job{
        margin-bottom: 5px;
    }
    .single-crosstalk-sec__member-box__item-meta{
        text-align: center;
        margin-bottom: 15px;
    }
    .single-crosstalk-sec__body-ttl{
        font-size: 22px;
        margin: 40px 0 30px;
    }
    .single-crosstalk-sec__body-question{
        font-size: 18px;
    }
    .single-crosstalk-sec__body-talk{
        display: block;
    }
    .single-crosstalk-sec__body-talk__icon{
        margin-bottom: 15px;
        width: 100%;
    }
    .single-crosstalk-sec__body-talk__icon-img{
        width: 80px;
        margin: 0 auto;
    }
    .single-crosstalk-sec__body-talk__text{
        width: 100%;
        padding: 0;
    }
    .single-crosstalk-sec__body-img{
        margin: 40px 0;
    }
    .single-crosstalk-other .crosstalk-card__box{
        bottom: 0;
        left: 0;
    }
    .single-crosstalk-other .crosstalk-card__img img{
        height: 480px;
    }
    .single-crosstalk-other .crosstalk-card__ttl{
        font-size: 40px;
    }
}