/* =========================
   HERO専用 幾何学模様
========================= */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* 背景動画・スライド */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 幾何学模様レイヤー
   背景メディアの上 / ロゴなどの下 */
.hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* ロゴなど前面 */
.hero__container,
.hero__overlay,
.hero__overlayInner {
    position: relative;
    z-index: 2;
}

/* 共通 */
.hero-shape {
    position: absolute;
    opacity: 1;
    will-change: transform;
    animation-name: heroShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* ふわっと微妙に動く */
@keyframes heroShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

/* 六角形 */
.hero-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 丸 */
.hero-shape--circle {
    border-radius: 50%;
}

.hero-shape--circle.is-blue {
    background: #1398f3;
}

.hero-shape--circle.is-white {
    background: #ffffff;
}

/* 四角 */
.hero-shape--square {
    background: #ff0a78;
}

/* 少しなじませる */
.hero-shape.is-soft {
    opacity: 0.95;
}

/* 六角形を少し強調 */
.hero-shape--hex.is-main {
    opacity: 1;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.1));
}

/* SPでは少し控えめ */
@media (max-width: 767px) {
    .hero-shape {
        opacity: 0.92;
    }

    .hero-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}


/* =========================
   CTA + INTRO 共通 幾何学模様エリア
========================= */
.top-intro-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.top-intro-area-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.top-intro-area .top-cta,
.top-intro-area .top-intro {
    position: relative;
    z-index: 1;
}

/* 図形共通 */
.intro-shape {
    position: absolute;
    opacity: 1;
    will-change: transform;
    animation-name: introShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 六角形 */
.intro-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 丸 */
.intro-shape--circle {
    border-radius: 50%;
}

.intro-shape--circle.is-blue {
    background: #1398f3;
}

.intro-shape--circle.is-white {
    background: #ffffff;
}

/* 四角 */
.intro-shape--square {
    background: #ff0a78;
}

/* 少しなじませる */
.intro-shape.is-soft {
    opacity: 0.95;
}

.intro-shape--hex.is-main {
    opacity: 1;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.1));
}

/* ふわっと揺れる */
@keyframes introShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

/* CTAの帯は図形より前へ */
.top-cta__banner,
.top-cta-footer-sp {
    position: relative;
    z-index: 2;
}

/* intro本文も前へ */
.top-intro .left-box,
.top-intro .right-box {
    position: relative;
    z-index: 2;
}

/* SP */
@media (max-width: 767px) {
    .intro-shape {
        opacity: 0.9;
    }

    .intro-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}



/* =========================
   TOP SERVICE 幾何学模様
========================= */
.top-service {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.top-service-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.top-service .container,
.top-service .row,
.top-service__body,
.top-service__head {
    position: relative;
    z-index: 1;
}

.service-bg-shape {
    position: absolute;
    will-change: transform;
    animation-name: serviceShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 六角形 */
.service-bg-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 四角 */
.service-bg-shape--square {
    background: #ff0a78;
}

/* 丸 */
.service-bg-shape--circle {
    border-radius: 50%;
}

.service-bg-shape--circle.is-white {
    background: #fff;
}

/* .service-bg-shape--circle.is-blue {
    background: #1398f3;
} */

/* 青丸は重ね用なので少し影を弱く */
.service-bg-shape.is-accent {
    z-index: 2;
}

/* メイン図形 */
.service-bg-shape.is-main {
    opacity: 1;
}

/* サブ図形 */
.service-bg-shape.is-soft {
    opacity: 0.92;
}

@keyframes serviceShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

@media (max-width: 767px) {
    .service-bg-shape {
        opacity: 0.9;
    }

    .service-bg-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}



/* =========================
   WORKS + FAQ + NEWS + RECRUIT 共通 幾何学模様
========================= */
.top-info-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.top-info-area-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.top-info-area .top-works,
.top-info-area .top-faq,
.top-info-area .top-news,
.top-info-area .top-recruit {
    position: relative;
    z-index: 1;
}

.info-bg-shape {
    position: absolute;
    will-change: transform;
    animation-name: infoShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 六角形 */
.info-bg-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 四角 */
.info-bg-shape--square {
    background: #ff0a78;
}

/* 丸 */
.info-bg-shape--circle {
    border-radius: 50%;
}

.info-bg-shape--circle.is-blue {
    background: #1398f3;
}

.info-bg-shape--circle.is-white {
    background: #ffffff;
}

.info-bg-shape.is-main {
    opacity: 1;
}

.info-bg-shape.is-soft {
    opacity: 0.92;
}

.info-bg-shape.is-accent {
    z-index: 2;
}

@keyframes infoShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

/* セクション内容は前へ */
.top-works .container,
.top-works .container-fluid,
.top-faq .container,
.top-news .container,
.top-recruit .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .info-bg-shape {
        opacity: 0.9;
    }

    .info-bg-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}



/* =========================
   SERVICE HERO + INTRO 共通 幾何学模様
========================= */

.service-intro-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.service-intro-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.3px) 0 0 / 14px 14px,
        linear-gradient(#0392f7, #0392f7);
}

/* ←これが今回の主役 */
.service-intro-area-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 背景より上、コンテンツより下 */
    pointer-events: none;
    overflow: hidden;
}

/* コンテンツは前に */
.service-intro-area .service-hero,
.service-intro-area .top-intro, .service-intro-area .top-service__body {
    position: relative;
    z-index: 2;
}

/* 図形 */
.service-intro-shape {
    position: absolute;
    will-change: transform;
    animation: introShapeFloat 6s ease-in-out infinite alternate;
}

/* 六角 */
.service-intro-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
}

/* 丸 */
.service-intro-shape--circle {
    border-radius: 50%;
}

.service-intro-shape--circle.is-white {
    background: #fff;
}

.service-intro-shape--circle.is-blue {
    background: #1398f3;
}

/* 四角 */
.service-intro-shape--square {
    background: #ff0a78;
}

/* 少し馴染ませる */
.service-intro-shape.is-soft {
    opacity: 0.92;
}



/* =========================
   SERVICE CTA + WORKS + FAQ 共通 幾何学模様
========================= */
.service-info-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.service-info-area-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.service-info-area .top-cta.first-cta,
.service-info-area .top-works,
.service-info-area .top-faq {
    position: relative;
    z-index: 1;
}

.service-info-shape {
    position: absolute;
    will-change: transform;
    animation-name: serviceInfoShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 六角形 */
.service-info-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 四角 */
.service-info-shape--square {
    background: #ff0a78;
}

/* 丸 */
.service-info-shape--circle {
    border-radius: 50%;
}

.service-info-shape--circle.is-white {
    background: #ffffff;
}

.service-info-shape--circle.is-blue {
    background: #1398f3;
}

.service-info-shape.is-main {
    opacity: 1;
}

.service-info-shape.is-soft {
    opacity: 0.92;
}

.service-info-shape.is-accent {
    z-index: 2;
}

@keyframes serviceInfoShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

/* 中身は前に */
.service-info-area .top-cta__banner,
.service-info-area .top-cta-footer-sp,
.service-info-area .top-works .container,
.service-info-area .top-works .container-fluid,
.service-info-area .top-faq .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .service-info-shape {
        opacity: 0.9;
    }

    .service-info-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}



/* =========================
   NANDEMOYA HERO + RANGE + PRICE + FAQ 共通 幾何学模様
========================= */
.nandemoya-info-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nandemoya-info-area-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.nandemoya-info-area .nandemoya-hero,
.nandemoya-info-area .page-section.range,
.nandemoya-info-area .page-section.price,
.nandemoya-info-area .page-section.faq {
    position: relative;
    z-index: 1;
}

.nandemoya-info-shape {
    position: absolute;
    will-change: transform;
    animation-name: nandemoyaInfoShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 六角形 */
.nandemoya-info-shape--hex {
    background: #f7c600;
    clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%);
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.08));
}

/* 四角 */
.nandemoya-info-shape--square {
    background: #ff0a78;
}

/* 丸 */
.nandemoya-info-shape--circle {
    border-radius: 50%;
}

.nandemoya-info-shape--circle.is-white {
    background: #ffffff;
}

.nandemoya-info-shape--circle.is-blue {
    background: #1398f3;
}

.nandemoya-info-shape.is-main {
    opacity: 1;
}

.nandemoya-info-shape.is-soft {
    opacity: 0.92;
}

@keyframes nandemoyaInfoShapeFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate3d(var(--float-x, 0px), var(--float-y, -10px), 0) rotate(var(--shape-rotate, 0deg));
    }
}

.nandemoya-info-area .nandemoya-hero .container,
.nandemoya-info-area .page-section .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .nandemoya-info-shape {
        opacity: 0.9;
    }

    .nandemoya-info-shape--hex {
        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08));
    }
}



/* =========================
   解体業務 HERO + RANGE + PRICE + FAQ 共通 幾何学模様
========================= */
.kaitai-area {
    position: relative;
    overflow: hidden;
}

.kaitai-area-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.kaitai-area>*:not(.kaitai-area-shapes) {
    position: relative;
    z-index: 2;
}

.kaitai-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    animation-name: kaitaiShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: rotate(var(--shape-rotate, 0deg));
}

.kaitai-shape--circle {
    border-radius: 50%;
}

.kaitai-shape--square {
    border-radius: 0;
}

.kaitai-shape--hex {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

/* 青丸 */
.kaitai-shape.is-blue {
    background: #1398f3;
}

/* 四角（ピンク） */
.kaitai-shape--square.is-soft,
.kaitai-shape--square.is-main {
    background: #ff0a78;
}

/* 六角形（黄色） */
.kaitai-shape--hex.is-soft,
.kaitai-shape--hex.is-main {
    background: #f7c600;
}

.kaitai-shape.is-soft {
    opacity: 0.95;
}

.kaitai-shape.is-main {
    opacity: 1;
}

@keyframes kaitaiShapeFloat {
    0% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }

    50% {
        transform: translate(var(--float-x, 0px), var(--float-y, -8px)) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }
}


/* =========================
   会社案内 幾何学模様
========================= */
.company-area {
    position: relative;
    overflow: hidden;
}

.company-area-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.company-area>*:not(.company-area-shapes) {
    position: relative;
    z-index: 2;
}

.company-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    animation-name: companyShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: rotate(var(--shape-rotate, 0deg));
}

.company-shape--circle {
    border-radius: 50%;
}

.company-shape--square {
    border-radius: 0;
}

.company-shape--hex {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

/* 丸 */
.company-shape.is-blue {
    background: #1398f3;
}

/* 四角 */
.company-shape--square.is-soft,
.company-shape--square.is-main {
    background: #ff0a78;
}

/* 六角形 */
.company-shape--hex.is-soft,
.company-shape--hex.is-main {
    background: #f7c600;
}

.company-shape.is-soft {
    opacity: 0.95;
}

.company-shape.is-main {
    opacity: 1;
}

@keyframes companyShapeFloat {
    0% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }

    50% {
        transform: translate(var(--float-x, 0px), var(--float-y, -8px)) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }
}


/* =========================
採用情報_幾何学模様
========================= */
.recruit-area {
    position: relative;
    overflow: hidden;
}

.recruit-area-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.recruit-area>*:not(.recruit-area-shapes) {
    position: relative;
    z-index: 2;
}

.recruit-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    animation-name: recruitShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: rotate(var(--shape-rotate, 0deg));
}

.recruit-shape--circle {
    border-radius: 50%;
}

.recruit-shape--square {
    border-radius: 0;
}

.recruit-shape--hex {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

/* 丸 */
.recruit-shape.is-blue {
    background: #1398f3;
}

/* 四角 */
.recruit-shape--square.is-soft,
.recruit-shape--square.is-main {
    background: #ff0a78;
}

/* 六角形 */
.recruit-shape--hex.is-soft,
.recruit-shape--hex.is-main {
    background: #f7c600;
}

.recruit-shape.is-soft {
    opacity: 0.95;
}

.recruit-shape.is-main {
    opacity: 1;
}

@keyframes recruitShapeFloat {
    0% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }

    50% {
        transform: translate(var(--float-x, 0px), var(--float-y, -8px)) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }
}



/* =========================
お問い合わせ_幾何学模様
========================= */
.contact-area {
    position: relative;
    overflow: hidden;
}

.contact-area-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.contact-area>*:not(.contact-area-shapes) {
    position: relative;
    z-index: 2;
}

.contact-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    animation-name: contactShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: rotate(var(--shape-rotate, 0deg));
}

.contact-shape--circle {
    border-radius: 50%;
}

.contact-shape--square {
    border-radius: 0;
}

.contact-shape--hex {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.contact-shape.is-blue {
    background: #1398f3;
}

.contact-shape--square.is-soft,
.contact-shape--square.is-main {
    background: #ff0a78;
}

.contact-shape--hex.is-soft,
.contact-shape--hex.is-main {
    background: #f7c600;
}

.contact-shape.is-soft {
    opacity: 0.95;
}

.contact-shape.is-main {
    opacity: 1;
}

@keyframes contactShapeFloat {
    0% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }

    50% {
        transform: translate(var(--float-x, 0px), var(--float-y, -8px)) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }
}


/* =========================
個人情報保護方針_幾何学模様
========================= */
.privacy-area {
    position: relative;
    overflow: hidden;
}

.privacy-area-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.privacy-area>*:not(.privacy-area-shapes) {
    position: relative;
    z-index: 2;
}

.privacy-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    animation-name: privacyShapeFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: rotate(var(--shape-rotate, 0deg));
}

.privacy-shape--circle {
    border-radius: 50%;
}

.privacy-shape--square {
    border-radius: 0;
}

.privacy-shape--hex {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.privacy-shape.is-blue {
    background: #1398f3;
}

.privacy-shape--square.is-soft,
.privacy-shape--square.is-main {
    background: #ff0a78;
}

.privacy-shape--hex.is-soft,
.privacy-shape--hex.is-main {
    background: #f7c600;
}

.privacy-shape.is-soft {
    opacity: 0.95;
}

.privacy-shape.is-main {
    opacity: 1;
}

@keyframes privacyShapeFloat {
    0% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }

    50% {
        transform: translate(var(--float-x, 0px), var(--float-y, -8px)) rotate(var(--shape-rotate, 0deg));
    }

    100% {
        transform: translate(0, 0) rotate(var(--shape-rotate, 0deg));
    }
}