/* Foundation */
@import url("foundation/base.css");

/* Layout */
@import url("layout/header.css");
@import url("layout/footer.css");

/* Shared components */
@import url("components/common.css");

/* Pages */
@import url("pages/home.css");
@import url("pages/news.css");
@import url("pages/contact.css");
@import url("pages/page.css");
@import url("pages/recruit.css");
/* ============================================================
GLOBAL IMAGE DECORATION：石なし共通装飾
============================================================ */

body.page-company main,
body.page-service main,
body.page-works main,
body.page-work-detail main,
body.page-news main,
body.page-news-detail main,
body.page-contact main,
body.page-contact-thanks main,
body.page-recruit main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #f7f1e5;
    background-image: url("../images/home/decor/washi-bg.webp");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
}

body.page-company main::before,
body.page-service main::before,
body.page-works main::before,
body.page-work-detail main::before,
body.page-news main::before,
body.page-news-detail main::before,
body.page-contact main::before,
body.page-contact-thanks main::before,
body.page-recruit main::before,
body.page-company main::after,
body.page-service main::after,
body.page-works main::after,
body.page-work-detail main::after,
body.page-news main::after,
body.page-news-detail main::after,
body.page-contact main::after,
body.page-contact-thanks main::after,
body.page-recruit main::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.page-company main::before,
body.page-service main::before,
body.page-works main::before,
body.page-work-detail main::before,
body.page-news main::before,
body.page-news-detail main::before,
body.page-contact main::before,
body.page-contact-thanks main::before,
body.page-recruit main::before {
    left: max(-90px, -5vw);
    top: clamp(160px, 20vw, 320px);
    width: clamp(190px, 18vw, 310px);
    aspect-ratio: 760 / 1602;
    opacity: .30;
    background-image: url("../images/home/decor/bamboo-leaves.webp");
    transform: rotate(-11deg);
}

body.page-company main::after,
body.page-service main::after,
body.page-works main::after,
body.page-work-detail main::after,
body.page-news main::after,
body.page-news-detail main::after,
body.page-contact main::after,
body.page-contact-thanks main::after,
body.page-recruit main::after {
    right: max(-210px, -14vw);
    top: clamp(220px, 28vw, 460px);
    width: min(760px, 60vw);
    aspect-ratio: 2 / 3;
    opacity: .35;
    background-image: url("../images/home/decor/sand-ripples.webp");
}

body.page-company .page-header,
body.page-service .page-header,
body.page-works .page-header,
body.page-work-detail .page-header,
body.page-news .page-header,
body.page-contact .page-header,
body.page-recruit .page-header,
body.page-contact-thanks .sub-mv {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-company .page-header::after,
body.page-service .page-header::after,
body.page-works .page-header::after,
body.page-work-detail .page-header::after,
body.page-news .page-header::after,
body.page-contact .page-header::after,
body.page-recruit .page-header::after,
body.page-contact-thanks .sub-mv::after {
    content: "";
    position: absolute;
    right: clamp(18px, 8vw, 120px);
    top: 22px;
    z-index: -1;
    width: clamp(110px, 13vw, 210px);
    aspect-ratio: 1;
    opacity: .38;
    pointer-events: none;
    background: url("../images/home/decor/maple-leaves.webp") center / contain no-repeat;
}

body.page-company section,
body.page-service section,
body.page-works section,
body.page-work-detail section,
body.page-news section,
body.page-news-detail section,
body.page-contact section,
body.page-contact-thanks section,
body.page-recruit section {
    position: relative;
    z-index: 0;
}

body.page-company .section-inner,
body.page-service .section-inner,
body.page-recruit .section-inner,
body.page-contact .contact-inner,
body.page-news .news-page,
body.page-works .works-page,
body.page-work-detail .work-detail-page,
body.page-news-detail .news-detail-page {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 900px) {
    body.page-company main::before,
    body.page-service main::before,
    body.page-works main::before,
    body.page-work-detail main::before,
    body.page-news main::before,
    body.page-news-detail main::before,
    body.page-contact main::before,
    body.page-contact-thanks main::before,
    body.page-recruit main::before {
        width: 190px;
        opacity: .20;
    }

    body.page-company main::after,
    body.page-service main::after,
    body.page-works main::after,
    body.page-work-detail main::after,
    body.page-news main::after,
    body.page-news-detail main::after,
    body.page-contact main::after,
    body.page-contact-thanks main::after,
    body.page-recruit main::after {
        right: -260px;
        opacity: .22;
    }
}

@media screen and (max-width: 768px) {
    body.page-company main,
    body.page-service main,
    body.page-works main,
    body.page-work-detail main,
    body.page-news main,
    body.page-news-detail main,
    body.page-contact main,
    body.page-contact-thanks main,
    body.page-recruit main {
        background-size: 1000px auto;
    }

    body.page-company .page-header::after,
    body.page-service .page-header::after,
    body.page-works .page-header::after,
    body.page-work-detail .page-header::after,
    body.page-news .page-header::after,
    body.page-contact .page-header::after,
    body.page-recruit .page-header::after,
    body.page-contact-thanks .sub-mv::after {
        opacity: .24;
        right: -24px;
    }
}