@charset "UTF-8";

/* 印刷用レイアウト */
@page {
    margin: 10mm;
    size: 210mm 297mm;
    /* A4縦サイズの場合 */
}

@media print {
/*====================================
 全体設定
====================================*/
    html {
        height: 100%;
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        -webkit-print-color-adjust: exact;
        /* 印刷時でも背景色や背景画像を表示 */
        width: 100%;
        /* 印刷時の全ページ幅を統一（px数値はお好みで） */
        zoom: 0.8;
        /* なるべく多くのブラウザで切れないようにするため */
    }

    img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }

    header,
    footer,
    .top_bt.smooth_scroll .top_bt__arrow,
    .sidebar,
    .pager {
        display: none;
    }

    section{
        padding: 0em 1.5em;
    }

    .inner,
    .inner_large{
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page_content {
        margin-top: 1.5rem;
        width: 100%;
    }

    .page_main__area {
        margin-bottom: 3em;
        padding: 0rem;
        background-color: unset;
    }

    h1.page_tit{
        font-size: 1.75em;
    }

    .editor h1,
    .editor h2,
    .editor h3,
    .editor h4,
    .editor h5,
    .editor h6 {
        font-size: 1.5em;
    }

    .page_layout,
    .archive_layout {
        display: block;
    }

    .wp-block-columns {
        display: flex;
        flex-wrap: nowrap;
    }

    .page_child__item a {
        padding: 1.5em;
    }

/*====================================
  アニメーション
=====================================*/
    /* フェードしたい要素に付与するクラス 開始前*/
    .jsfade {
        opacity: 1;
        transform: translateY(0px);
        transition: unset;
    }

    .fade1 {
        transition-delay: unset;
    }
    .fade2 {
        transition-delay: unset;
    }

    /* フェードしたい要素に付与するクラス 開始後*/
    .scrolled {
        opacity: 1;
        transform: translateY(0px);
    }

/*====================================
 トップページ 
====================================*/
    /* メインビジュアル */
    .mainv_area {
        display: none;
    }

    .front_page h2.top_tit,
    .recruit_page h2.top_tit {
        font-weight: 500;
        position: relative;
        font-size: 1em;
        color: var(--black);
        letter-spacing: 2px;
        line-height: 1.25;
    }
    
    .front_page h2.top_tit span,
    .recruit_page h2.top_tit span {
        font-size: 3em;
    }

    .front_page h2, .front_page h3, .front_page h4 {
        display: block;
        font-family: var(--notosansjp);
        font-weight: 400;
        font-style: normal;
    }

    .news{
        margin: 0 auto;
        gap: 2rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0rem;
        justify-content: space-between;
        align-content: center;
        overflow: visible;
    }

    .news .tit_area{
        padding: 1.5rem;
        width: 100%;
        gap: 1rem;
    }    

    .news .news_list{
        margin-bottom: 2.5rem;
        padding: 0 1.5rem;
        width: 100%;
    }

    .constr_img__area,
    .civilen_img__area{
        width: 100%;
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .constr_tx__area,
    .civilen_tx__area {
        min-height: 100%;
        padding: 3rem 1.5rem 5rem 1.5rem;
    }

    .constr_tx__area h2.top_tit,
    .civilen_tx__area h2.top_tit {
        margin-bottom: 1.5rem;
        color: var(--white);
    }

    .content_bt__con {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 1.5rem;
    }
    
    .content_bt {
        width: calc(50% - 1.5rem);
        height: 150px;
    }

    .recruit .content_left {
        padding: 3rem 1.5rem;
        gap: 2rem 0rem;
    }

    .recruit .content_left,
    .recruit .content_right {
        width: 100%;
    }

    .recruit .content_right {
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: center 70%;
        aspect-ratio: 16 / 9;
    }

    .recruit_img {
        width: 100%;
        height: 100%;
        background-image: url(../img/back/rec.jpg);
        background-position: 65% 70%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .works{
        padding: 5rem 0rem;
        height: 100%;
        background-color: rgb(41 46 52 / 80%);
        position: relative;
        overflow: hidden;
    }

    .works .top_tit__area{
        justify-content: space-between;
    }

    .works h2.top_tit {
        color: var(--white);
    }

    .works .more_bt{
        border-color: var(--white);
        color: var(--white);
    }

    .works .more_bt .arrow::after{
        background-color: var(--white);
    }

    .works .more_bt:hover{
        border-color: var(--green);
        background-color: var(--green);
        color: var(--black);
    }

    .works .more_bt:hover .arrow::after{
        background-color: var(--black);
    }

    .works .splide__slide{
        transition: var(--transition);
    }
    
    .works .works_slider__area .splide__track{
        height: 100%;
        overflow: visible;
    }

    .works .works_item{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        filter: brightness(0.5);
        transition: var(--transition);
    }

    .works .splide__slide a{
        pointer-events: none;
    }

    .works .splide__slide.is-active a{
        pointer-events: painted;
    }

    .works .splide__slide.is-active .works_item{
        filter: unset;
    }

    .works .splide__slide .works_img{
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden; 
    }

    .works .splide__arrows {
        width: 100%;
        justify-content: space-between;
    }

    .works_link img{
        object-fit: cover;
    }

    .works .works_tx{
        color: var(--white);
    }

    .works .works_category a{
        border-color: var(--white);
    }

    .works_tx{
        margin-top: 1.5rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
    }

    .works_category{
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .works_category a{
        padding-top: 3px;
        width: 100%;
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: solid 1px;
        font-size: 0.85em;
        letter-spacing: 1px;
    }

    .works_tit{
        width: 100%;
        display: flex;
        letter-spacing: 1px;
    }

    .works_back__slider{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .works_back__slider .splide__track,
    .works_back__slider .splide__list,
    .works_back__slider .splide__slide {
        height: 100%;
    }

    .works_back__slider .splide__slide .works_img {
        width: 100%;
        height: 100%;
        
    }

    .works_back__slider .splide__slide img {
        aspect-ratio: unset;
        object-fit: cover;
        object-position: center;
        filter: blur(3px);
        transition: 60s ease-out;
    }

    .works_back__slider .splide__slide.is-active img {
        transform: scale(1.15);
        transition-delay: 0s;
    }

    .works .splide__slide.is-active .works_item {
        filter: unset;
    }

    .works .works_item {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        transition: var(--transition);
    }

    .works .splide__slide .works_img {
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    .contact{
        margin: 0;
        padding: 100px 1.5rem;
    }

    .contact_bt__area{
        display: flex;
        justify-content: space-around;
        align-items: end;
        gap: 2.5rem;
    }

    .contact_bt__area .contact_bt a{
        padding: 4rem 1rem 5rem 1rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow);
        font-family: var(--mincho);
        transition: var(--transition);
        transform: translateY(0);
        position: relative;
    }

    .contact_bt__area .contact_bt__tit{
        margin: 0 auto;
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 1.75em;
        color: var(--blue);
    }

    .contact_bt__area .contact_bt a .arrow{
        bottom: 3rem;
        left: auto;
        right: auto;
    }

    .access {
        padding: 7rem 1.5rem;
    }

    .access_con__area{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .access_item iframe{
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .access_item{
        width: calc(50% - 0.75rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        color: var(--white);
    }

/*====================================
 ページ 
====================================*/
    .page_header{
        display: none;
    }

    /*====================================
    　採用ページ 
    ====================================*/
    .about_area,
    .benefit_area {
        width: 100%;
        overflow: hidden;
    }

    .about_content,
    .benefit_content{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        box-sizing: border-box;
    }

    .about_content.inner,
    .benefit_content.inner{
        padding: 0rem;
    }

    .about_tx__area,
    .benefit_tx__area{
        width: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        flex-grow: 1;
    }

    .about_back__slider {
        margin-right: calc(50% - 50vw);
        width: 50%;
        position: relative;
        flex-shrink: 0;
    }

    .benefit_back__slider{
        margin-left: calc(50% - 50vw);
        width: 50%;
        position: relative;
        flex-shrink: 0;
    }

    .about_back__slider___item .splide__slide,
    .benefit_back__slider___item .splide__slide{
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about_back__slider___item .splide__slide img,
    .benefit_back__slider___item .splide__slide img{
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    .interview_slider .splide__track{
        padding: 5rem 0;
    }
    
    .interview_item{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: nowrap;
        position: relative;
    }

    .interview_img{
        width: calc(60% - 0.5rem);
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }

    .interview_img img {
        object-fit: cover;
    }
            
    .interview_tx{
        margin-bottom: 1.5rem;
        width: calc(40% - 0.5rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .interview_tit{
        font-size: 1.5em;
    }

    .entry_item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem 0;
    }
    
    .entry_bt{
        padding: 3rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem 0;
        background-color: rgb(24 208 162 / 70%);
        font-size: 1.85em;
        color: var(--white);
        letter-spacing: 2px;
        transition: var(--transition);
    }

    .entry_icon{
        width: 100%;
        height: 100px;
        mask-image: url(../img/icon/entry.svg);
        background-color: var(--white);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
    }
    
    /*====================================
    　アーカイブ 
    ====================================*/
    .archive_layout .archive_list,
    .page_layout .archive_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 4rem 2rem;
    }
    .archive_layout .archive_list article,
    .page_layout .archive_list article {
        width: calc(50% - 1rem);
    }

    .archive_layout .archive_list article .works_item .works_img{
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }
}