@charset "UTF-8";

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

@media print {
/*====================================
 全体設定
====================================*/
    html {
        background: unset;
        background-repeat: unset;
    }

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

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

    header,
    footer,
    .top_bt,
    .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: 0px;
        margin-bottom: 0rem;
        border-radius: unset;
        background-color: unset;
        box-sizing: border-box;
    }

    .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 {
        font-weight: 500;
        position: relative;
        font-size: 1em;
        color: var(--black);
        letter-spacing: 2px;
        line-height: 1.5;
    }

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

    .about {
        padding: 10rem 0;
    }

    .about_area {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .about .about_img__area {
        margin: 0;
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 3 / 2;
        background-image: url(../img/back/about_pic.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .about .about_tx__area {
        width: 40%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4rem;
    }

    .business{
        padding: 10rem 1.5rem;
    }

    .business_content__area {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .business h2.top_tit,
    .business h2.top_tit span{
        color: var(--white);
    }

    .recycle_content__area {
        gap: 3rem;
    }

    .recycle_content__area h2 {
        font-size: 2.5em;
        color: var(--white);
    }

    .recruit{
        padding: 5rem 1.5rem;
        position: relative;
        clip-path: inset(0);
        z-index: 0;
    }

    .recruit::before{
        content: '';
        position: absolute;
        z-index: -1;
    }

    .recruit::after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgb(146 150 171 / 5%);
        position: absolute;
        top: 0;
        left: 0;
    }

    .recruit .noise_back{
        display: none;
    }

    .recruit .content_right {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4rem 0rem;
        filter: drop-shadow(0px 0px 10px rgb(13 39 132 / 20%));
        position: relative;
        z-index: 1;
    }

    .contact_bt__area .contact_bt {
        width: calc(50% - 2rem);
    }

/*====================================
 採用ページ 
====================================*/
    .mainv_r__area{
        display: none;
    }

    .works_area{
        margin-bottom: 0;
        padding: 3rem 1.5rem;
        height: auto;
        background-color: unset;
    }

    .js_scroll__overlap:not(.is_disabled) {
        --sticky-offset: unset;
        position: relative;
        top: auto;
    }

    .works_area h2.top_tit, .works_area h2.top_tit span, .works_area p{
        color: var(--black);
    }

    .news .tit_area {
        margin-bottom: 2rem;
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    .news .news_list {
        width: 100%;
    }

    .benefit_area{
        padding: 3rem 1.5rem;
        min-height: unset;
        height: auto;
    }

    .benefit_area .tit_area {
        gap: 2rem;
    }

    .benefit_content {
        margin: 3rem 0;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2.5rem;
    }

    .benefit_content li{
        padding: 1.5rem;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-end;
        gap: 1rem;
        aspect-ratio: 1 / 1;
        border-radius: 5px;
        overflow: hidden;
        background-color: var(--white);
        box-shadow: var(--shadow);
    }

    .benefit_icon {
        width: 90px;
        height: 90px;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        background: var(--bluegradation2);
    }

    .benefit_content li:first-child .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_kazoku.svg);
    }

    .benefit_content li:nth-child(2) .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_jutaku.svg);
    }

    .benefit_content li:nth-child(3) .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_kaikin.svg);
    }

    .benefit_content li:nth-child(4) .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_kenkoshindan.svg);
    }

    .benefit_content li:nth-child(5) .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_kyuka.svg);
    }

    .benefit_content li:nth-child(6) .benefit_icon{
        mask-image: url(../recruit/img/icon/benefit_ikuzikaigo.svg);
    }

    .contact_area::before{
        position: absolute;
    }

    .contact_content {
        gap: 2rem;
    }

    .contact_item {
        padding: 4rem 2.5rem;
        width: 50%;
        aspect-ratio: 4 / 3;
        backdrop-filter: blur(6px);
    }

/*====================================
 ページ 
====================================*/
    .page_header{
        padding: 0;
        height: auto;
        justify-content: flex-start;
        background-color: unset;
        background-image: unset;
    }

    .page_header::after{
        content: unset;
    }

    .page_tit{
        padding:0rem 0rem 1rem 0rem;
        text-align: left;
        border-bottom: solid 3px var(--blue);
        font-family: "Noto Sans JP", sans-serif;
        color: var(--black);
    }

    .page_tit span{
        padding: 0rem;
        font-family: "Noto Sans JP", sans-serif;
        color: var(--black);
    }

}