@charset "UTF-8";

:root {
    --red: #d80c18;
    --red-dark: #b60913;
    --black: #111;
    --gray: #666;
    --light-gray: #f6f6f6;
    --white: #fff;
    --container: 1180px;
}


/* ========================================
   RESET / BASE
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--black);
    background: var(--white);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Sans",
        "Yu Gothic",
        Meiryo,
        sans-serif;
    line-height: 1.8;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.l-container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}


/* ========================================
   HEADER
======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    backdrop-filter: blur(10px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    min-height: 82px;
    gap: 32px;
}

.site-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.site-logo__mark {
    color: var(--red);
    font-size: 27px;
}

.site-logo__text {
    font-size: 21px;
}

.custom-logo {
    display: block;
    width: auto;
    max-height: 50px;
}

.custom-logo-link {
    display: block;
}

.global-nav {
    margin-left: auto;
}

.global-nav__list {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
}

.global-nav__list a:hover {
    color: var(--red);
}


/* ========================================
   BUTTON
======================================== */

.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 58px;
    padding: 12px 28px;
    color: var(--white);
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 999px;
    font-weight: 700;
    transition: .25s ease;
}

.c-button:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    transform: translateY(-2px);
}

.c-button--small {
    min-width: 150px;
    min-height: 46px;
    padding: 8px 20px;
    font-size: 13px;
}

.c-text-link {
    font-weight: 700;
}

.c-text-link:hover {
    color: var(--red);
}


/* ========================================
   COMMON SECTION
======================================== */

.section {
    padding: 120px 0;
}

.section-heading__en {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
}

.section-heading__title {
    margin: 0;
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1.35;
    letter-spacing: -.04em;
}


/* ========================================
   HERO
======================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    /*
     * ヘッダー82pxを引いた画面いっぱい
     */
    min-height: calc(100vh - 82px);

    padding: 100px 0;

    /*
     * 動画が読み込まれるまでの背景
     */
    background: #eee;
}


/* ----------------------------------------
   HERO BACKGROUND MOVIE
---------------------------------------- */

.hero__movie {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero__movie-video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    object-fit: cover;
    object-position: center;

    /*
     * 動画そのものを少し落ち着かせる
     */
    filter: saturate(.85);
}


/* ----------------------------------------
   HERO OVERLAY

   動画の上に白を被せて
   テキストとロゴを読みやすくする
---------------------------------------- */

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .94) 0%,
            rgba(255, 255, 255, .90) 25%,
            rgba(255, 255, 255, .78) 50%,
            rgba(255, 255, 255, .58) 75%,
            rgba(255, 255, 255, .45) 100%);
}


/* ----------------------------------------
   HERO CONTENT
---------------------------------------- */

.hero__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr) minmax(300px, .75fr);

    align-items: center;
    gap: 70px;

    width: 100%;

    /* 追加 */
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ----------------------------------------
   HERO TEXT
---------------------------------------- */

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__eyebrow {
    margin: 0 0 18px;

    color: var(--red);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .2em;
}

.hero__title {
    margin: 0;

    font-size: clamp(44px, 6vw, 78px);

    line-height: 1.2;

    letter-spacing: -.055em;
}

.hero__lead {
    margin: 30px 0 0;

    color: #444;

    font-size: 17px;
}

.hero__buttons {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-top: 40px;
}


/* ----------------------------------------
   HERO LOGO
---------------------------------------- */

.hero__visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.hero__logo {
    display: block;

    width: 100%;
    max-width: 520px;

    height: auto;

    margin: 0 auto;
}


/* ========================================
   SERVICE
======================================== */

.service {
    background: var(--light-gray);
}

.service-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 64px;
}

.service-card {
    min-height: 340px;

    padding: 36px 30px;

    background: var(--white);

    border-top: 3px solid var(--red);
}

.service-card__num {
    margin: 0 0 45px;

    color: var(--red);

    font-size: 13px;
    font-weight: 800;
}

.service-card__title {
    margin: 0;

    font-size: 23px;

    line-height: 1.4;
}

.service-card__en {
    margin: 6px 0 20px;

    color: #999;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
}

.service-card__text {
    margin: 0;

    color: #555;

    font-size: 14px;
}


/* ========================================
   ABOUT
======================================== */

.about__inner {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: end;

    gap: 90px;
}

.about__text {
    color: #444;

    font-size: 16px;
}


/* ========================================
   CONTACT
======================================== */

.contact {
    color: var(--white);

    background: var(--red);

    text-align: center;
}

.contact__en {
    margin: 0 0 16px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .2em;
}

.contact__title {
    margin: 0;

    font-size: clamp(32px, 4.5vw, 40px);

    line-height: 1.4;

    letter-spacing: -.04em;
}

.contact__text {
    margin: 28px 0 0;

    font-size: 15px;

    opacity: .88;
}


/* ========================================
   FOOTER
======================================== */

.site-footer {
    padding: 42px 0;

    background: #0d0d0d;

    color: var(--white);
}

.site-footer__inner {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;
}

.site-footer__brand {
    display: flex;

    flex-direction: column;
}

.site-footer__brand span {
    margin-top: 4px;

    font-size: 10px;

    letter-spacing: .14em;

    opacity: .6;
}

.site-footer__copy {
    margin: 0;

    font-size: 11px;

    opacity: .5;
}


/* ========================================
   TABLET
   900px以下
======================================== */

@media (max-width: 900px) {

    .global-nav {
        display: none;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding: 80px 0 90px;
    }

    .hero__inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hero__visual {
        max-width: 420px;

        margin-inline: auto;
    }

    /*
     * タブレットでは背景をさらに白くして
     * テキストを読みやすくする
     */
    .hero__overlay {
        background:
            rgba(255, 255, 255, .82);
    }


    /* SERVICE */

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ABOUT */

    .about__inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }
}


/* ========================================
   SMARTPHONE
   600px以下
======================================== */

@media (max-width: 600px) {

    .l-container {
        width: min(calc(100% - 32px),
                var(--container));
    }


    /* HEADER */

    .site-header__inner {
        min-height: 68px;
    }

    .site-header .c-button--small {
        margin-left: auto;

        min-width: auto;
        min-height: 40px;

        padding: 7px 14px;
    }


    /* COMMON */

    .section {
        padding: 80px 0;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding: 68px 0 74px;
    }

    .hero__inner {
        gap: 40px;
    }

    .hero__title {
        font-size: 42px;
    }

    .hero__lead br {
        display: none;
    }

    .hero__buttons {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .hero__visual {
        max-width: 300px;
    }

    .hero__logo {
        max-width: 300px;
    }

    /*
     * スマホでは動画がかなり動くため
     * 白を強めにする
     */
    .hero__overlay {
        background:
            rgba(255, 255, 255, .86);
    }


    /* SERVICE */

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }


    /* FOOTER */

    .site-footer__inner {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* ========================================
   REDUCED MOTION

   OS側で「視差効果を減らす」等が
   ONの場合は動画を停止
======================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero__movie-video {
        display: none;
    }
}

/* ========================================
   SERVICE IMAGE NAV
======================================== */
.service-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.service-nav__item {
    position: relative;
    display: block;
    min-height: 280px;
    overflow: hidden;
    color: #fff;
}

.service-nav__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.service-nav__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .72) 100%);
    transition: background .3s ease;
}

.service-nav__content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    align-items: end;
    padding: 28px 30px;
}

.service-nav__en {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    opacity: .8;
}

.service-nav__content strong {
    font-size: clamp(19px, 1.6vw, 26px);
    line-height: 1.35;
}

.service-nav__arrow {
    font-size: 24px;
    line-height: 1;
    transition: transform .25s ease;
}

.service-nav__item:hover img {
    transform: scale(1.05);
}

.service-nav__item:hover .service-nav__overlay {
    background: linear-gradient(180deg, rgba(216, 12, 24, .08) 0%, rgba(70, 0, 4, .82) 100%);
}

.service-nav__item:hover .service-nav__arrow {
    transform: translateX(6px);
}

/* ========================================
   SERVICE DETAIL
======================================== */
.service-detail {
    scroll-margin-top: 82px;
}

.service-detail--gray {
    background: var(--light-gray);
}

.service-detail__inner {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 100px;
    align-items: start;
}

.service-detail__head {
    position: sticky;
    top: 120px;
}

.service-detail__num {
    margin: 0 0 34px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15em;
}

.service-detail__body {
    max-width: 720px;
}

.service-detail__lead {
    margin: 0 0 28px;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.02em;
}

.service-detail__body>p:not(.service-detail__lead) {
    margin: 0;
    color: #4b4b4b;
}

.service-detail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 38px 0 0;
    list-style: none;
}

.service-detail__list li {
    position: relative;
    padding: 18px 20px 18px 42px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    font-size: 14px;
    font-weight: 700;
}

.service-detail--gray .service-detail__list li {
    background: #fff;
}

.service-detail__list li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    transform: translateY(-50%);
}

.contact-form {
    max-width: 820px;
    margin: 48px auto 0;
    padding: 40px;
    color: var(--black);
    background: #fff;
    text-align: left;
}

@media (max-width: 900px) {
    .service-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-nav__item {
        min-height: 240px;
    }

    .service-detail__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .service-detail__head {
        position: static;
    }
}

@media (max-width: 600px) {
    .service-nav {
        grid-template-columns: 1fr;
    }

    .service-nav__item {
        min-height: 180px;
    }

    .service-nav__content {
        padding: 22px 20px;
    }

    .service-detail {
        scroll-margin-top: 68px;
    }

    .service-detail__list {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 24px 18px;
    }
}


/* ========================================
   SERVICE DETAIL / FULL WIDTH BG OVERRIDE
   4つの画像ボタン(service-nav)は上の既存CSSをそのまま維持
======================================== */

.service-detail {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: 82px;
    min-height: 620px;
    display: flex;
    align-items: center;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service-detail--ec {
    background-image: url("../img/service-ec.png");
}

.service-detail--web {
    background-image: url("../img/service-web.png");
}

.service-detail--rpa {
    background-image: url("../img/service-rpa.png");
}

.service-detail--drone {
    background-image: url("../img/service-drone.png");
}

/* 旧グレー背景を無効化 */
.service-detail--gray {
    background-color: transparent;
}

/* 背景画像の上に黒グラデーション */
.service-detail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .64) 45%,
            rgba(0, 0, 0, .36) 75%,
            rgba(0, 0, 0, .22) 100%);
}

.service-detail__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 100px;
    align-items: center;
}

.service-detail__head {
    position: static;
}

.service-detail__num,
.service-detail .section-heading__en,
.service-detail .section-heading__title,
.service-detail__lead {
    color: #fff;
}

.service-detail__num,
.service-detail .section-heading__en {
    opacity: .75;
}

.service-detail .section-heading__title {
    font-size: clamp(38px, 5vw, 64px);
}

.service-detail__body>p:not(.service-detail__lead) {
    color: rgba(255, 255, 255, .92);
}

/* 項目は半透明カードにして背景を見せる */
.service-detail__list li,
.service-detail--gray .service-detail__list li {
    color: #fff;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(4px);
}

.service-detail__list li::before {
    background: var(--red);
}

@media (max-width: 900px) {
    .service-detail {
        min-height: auto;
    }

    .service-detail::before {
        background: rgba(0, 0, 0, .64);
    }

    .service-detail__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 560px;
        scroll-margin-top: 68px;
    }

    .service-detail::before {
        background: rgba(0, 0, 0, .69);
    }

    .service-detail .section-heading__title {
        font-size: 36px;
    }

    .service-detail__list {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   SERVICE DETAIL / 100VH SCROLL
======================================== */

.service-detail {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    color: #fff;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    scroll-margin-top: 82px;
}

.service-detail--ec {
    background-image: url("../img/service-ec.png");
}

.service-detail--web {
    background-image: url("../img/service-web.png");
}

.service-detail--rpa {
    background-image: url("../img/service-rpa.png");
}

.service-detail--drone {
    background-image: url("../img/service-drone.png");
}

.service-detail--gray {
    background-color: transparent;
}

/* 背景オーバーレイ */
.service-detail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .62) 45%,
            rgba(0, 0, 0, .30) 100%);
}

/* 中身 */
.service-detail__inner {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 80px), 1180px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 100px;
    align-items: center;

    opacity: 0;

    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);

    will-change: transform, opacity;
}

.service-detail__head {
    position: static;
}

.service-detail.reveal-left .service-detail__inner {
    transform: translateX(-140px);
}

.service-detail.reveal-right .service-detail__inner {
    transform: translateX(140px);
}

.service-detail.is-visible .service-detail__inner {
    opacity: 1;
    transform: translateX(0);
}

.service-detail__num,
.service-detail .section-heading__en,
.service-detail .section-heading__title,
.service-detail__lead {
    color: #fff;
}

.service-detail__num,
.service-detail .section-heading__en {
    opacity: .7;
}

.service-detail .section-heading__title {
    font-size: clamp(42px, 5vw, 68px);
}

.service-detail__body>p:not(.service-detail__lead) {
    color: rgba(255, 255, 255, .92);
}

/* リスト */
.service-detail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 38px;
    padding: 0;

    list-style: none;
}

.service-detail__list li,
.service-detail--gray .service-detail__list li {
    position: relative;

    padding: 18px 20px 18px 42px;

    color: #fff;

    background: rgba(0, 0, 0, .38);

    border: 1px solid rgba(255, 255, 255, .18);

    backdrop-filter: blur(4px);

    font-size: 14px;
    font-weight: 700;
}

.service-detail__list li::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 20px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--red);

    transform: translateY(-50%);
}

/* 背景パララックス */
@media (min-width: 901px) {
    .service-detail {
        background-attachment: fixed;
    }
}

/* TABLET */
@media (max-width: 900px) {
    .service-detail {
        height: auto;
        min-height: 100vh;
        background-attachment: scroll;
    }

    .service-detail__inner {
        width: min(calc(100% - 48px), 1180px);
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-detail.reveal-left .service-detail__inner {
        transform: translateX(-60px);
    }

    .service-detail.reveal-right .service-detail__inner {
        transform: translateX(60px);
    }

    .service-detail.is-visible .service-detail__inner {
        transform: translateX(0);
    }
}

/* SMARTPHONE */
@media (max-width: 600px) {
    .service-detail {
        min-height: 100svh;
        padding: 70px 0;
        scroll-margin-top: 68px;
    }

    .service-detail__inner {
        width: calc(100% - 32px);
    }

    .service-detail .section-heading__title {
        font-size: 38px;
    }

    .service-detail__lead {
        font-size: 21px;
    }

    .service-detail__list {
        grid-template-columns: 1fr;
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .service-detail__inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .service-detail {
        background-attachment: scroll;
    }
}


/* ========================================
   SERVICE NAV / STICKY
   ヘッダー下に4つの画像ボタンを固定
======================================== */

.service-nav {
    position: sticky;
    top: 82px;
    z-index: 80;

    width: 100%;

    /* sticky時に背景が透けないため */
    background: #111;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* 固定中は高さを少し抑えてコンテンツを見やすくする */
.service-nav__item {
    min-height: 190px;
}

/* service-nav より下の100vhブロック */
.service-detail {
    position: relative;
    z-index: 1;
    height: 100vh;
    min-height: 100vh;
}

/* PCでは背景を固定してパララックス */
@media (min-width: 901px) {
    .service-detail {
        background-attachment: fixed;
    }
}

/* タブレット */
@media (max-width: 900px) {
    .service-nav {
        top: 82px;
    }

    .service-nav__item {
        min-height: 145px;
    }

    .service-detail {
        height: auto;
        min-height: 100vh;
        background-attachment: scroll;
    }
}

/* スマホ：
   4枚を縦に固定すると画面を占領するので、
   横スクロール1列の小さなナビにする */
@media (max-width: 600px) {
    .service-nav {
        top: 68px;

        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
    }

    .service-nav::-webkit-scrollbar {
        display: none;
    }

    .service-nav__item {
        flex: 0 0 72vw;
        min-height: 120px;
    }

    .service-nav__content {
        padding: 16px 18px;
    }

    .service-nav__content strong {
        font-size: 18px;
    }

    .service-detail {
        min-height: 100svh;
    }
}


/* 現在表示中のサービス */
.service-nav__item.is-active .service-nav__overlay {
    background:
        linear-gradient(180deg,
            rgba(216, 12, 24, .12) 0%,
            rgba(70, 0, 4, .86) 100%);
}

.service-nav__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--red);
    z-index: 3;
}


/* ========================================
   MOBILE SERVICE NAV FIX
   4ボタンを2×2で全部表示
======================================== */

@media (max-width: 600px) {

    .service-nav {
        position: sticky;
        top: 68px;
        z-index: 80;

        display: grid;
        grid-template-columns: repeat(2, 1fr);

        width: 100%;

        overflow: visible;

        background: #111;
    }

    .service-nav__item {
        min-width: 0;
        min-height: 92px;
        height: 92px;
    }

    .service-nav__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .service-nav__content {
        padding: 10px 12px;
        gap: 2px 8px;
    }

    .service-nav__en {
        font-size: 8px;
        letter-spacing: .12em;
    }

    .service-nav__content strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .service-nav__arrow {
        font-size: 16px;
    }

    /* 固定ナビの下に100vhコンテンツ */
    .service-detail {
        min-height: 100svh;
        height: auto;

        padding: 70px 0;

        background-attachment: scroll;
    }

    .service-detail__inner {
        width: calc(100% - 32px);
    }
}


/* ========================================
   TYPOGRAPHY SIZE OVERRIDE
   本文・ボタン 18px / 英語ラベル 12px
======================================== */

/* 本文 */
body,
.hero__lead,
.service-card__text,
.about__text,
.contact__text,
.service-detail__body>p,
.service-detail__list li {
    font-size: 18px;
}

/* ボタン類 */
.c-button,
.c-button--small,
.c-text-link,
.service-nav__content strong {
    font-size: 18px;
}

/* 英語の小さいラベル */
.hero__eyebrow,
.section-heading__en,
.service-card__en,
.service-nav__en,
.service-detail__num,
.service-detail .section-heading__en,
.contact__en,
.site-footer__brand span {
    font-size: 12px;
}

/* スマホでも同じ指定を維持 */
@media (max-width: 600px) {

    body,
    .hero__lead,
    .service-card__text,
    .about__text,
    .contact__text,
    .service-detail__body>p,
    .service-detail__list li,
    .c-button,
    .c-button--small,
    .c-text-link,
    .service-nav__content strong {
        font-size: 18px;
    }

    .hero__eyebrow,
    .section-heading__en,
    .service-card__en,
    .service-nav__en,
    .service-detail__num,
    .service-detail .section-heading__en,
    .contact__en,
    .site-footer__brand span {
        font-size: 12px;
    }
}

/* ========================================
   HERO CATCH COPY
======================================== */
.hero__title {
    font-size: 50px;
    line-height: 1.5;
}

/* スマホでも指定を維持 */
@media (max-width: 600px) {
    .hero__title {
        font-size: 50px;
        line-height: 1.5;
    }
}


/* ========================================
   FINAL / HEADING
======================================== */
.section-heading__title,
.service-detail .section-heading__title {
    font-size: 50px;
    line-height: 1.5;
}

/* ========================================
   FINAL / SERVICE WORKS IN SAME PARALLAX BG
   説明の下の空間に、スクロールで実績カードが横から入る
======================================== */

/* 1サービス = 説明 + 実績まで同じ背景 */
.service-detail {
    display: block;
    height: auto;
    min-height: 155vh;
    padding: 0;
    overflow: hidden;
}

/* 上側：今までのサービス説明 */
.service-detail__inner {
    min-height: 90vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
    align-items: center;
}

/* 下側：スクロールで現れる実績 */
.service-work {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 80px), 1180px);
    min-height: 65vh;
    margin: 0 auto;

    display: flex;
    align-items: center;

    pointer-events: none;
}

.service-work--right {
    justify-content: flex-end;
}

.service-work--left {
    justify-content: flex-start;
}

.service-work__card {
    width: min(680px, 68vw);
    padding: 42px 46px;

    color: #fff;
    background: rgba(10, 10, 10, .72);

    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);

    opacity: 0;

    transition:
        opacity .8s ease,
        transform 1.05s cubic-bezier(.22, 1, .36, 1);

    will-change: opacity, transform;
}

.service-work--right .service-work__card {
    transform: translateX(180px);
}

.service-work--left .service-work__card {
    transform: translateX(-180px);
}

.service-work.is-visible .service-work__card {
    opacity: 1;
    transform: translateX(0);
}

.service-work__en {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    opacity: .72;
}

.service-work__title {
    margin: 0 0 18px;
    font-size: 32px;
    line-height: 1.5;
}

.service-work__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

.service-work__more {
    display: inline-block;
    margin-top: 24px;
    font-size: 18px;
    font-weight: 700;
}

/* PCは同じ背景を固定してパララックス */
@media (min-width: 901px) {
    .service-detail {
        background-attachment: fixed;
    }
}

/* タブレット */
@media (max-width: 900px) {
    .service-detail {
        min-height: auto;
        background-attachment: scroll;
    }

    .service-detail__inner {
        min-height: 90vh;
        padding-top: 70px;
        padding-bottom: 50px;
    }

    .service-work {
        width: min(calc(100% - 48px), 1180px);
        min-height: 55vh;
    }

    .service-work__card {
        width: min(720px, 100%);
    }
}

/* スマホ */
@media (max-width: 600px) {

    .section-heading__title,
    .service-detail .section-heading__title {
        font-size: 50px;
        line-height: 1.5;
    }

    .service-detail {
        min-height: auto;
        padding: 0;
    }

    .service-detail__inner {
        min-height: 100svh;
        padding: 70px 0 40px;
    }

    .service-work {
        width: calc(100% - 32px);
        min-height: 65svh;
    }

    .service-work__card {
        width: 100%;
        padding: 28px 22px;
    }

    .service-work--right .service-work__card {
        transform: translateX(70px);
    }

    .service-work--left .service-work__card {
        transform: translateX(-70px);
    }

    .service-work.is-visible .service-work__card {
        transform: translateX(0);
    }

    .service-work__title {
        font-size: 28px;
    }

    .service-work__text,
    .service-work__more {
        font-size: 18px;
    }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    .service-work__card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ========================================
   FINAL FIX / STICKY SERVICE INTRO + SCROLLING WORKS
   上のサービス説明は固定し、下の実績だけスクロール
======================================== */

/* 1サービス全体に十分なスクロール量を持たせる */
.service-detail {
    position: relative;
    display: block;
    height: auto;
    min-height: 220vh;
    padding: 0;
    overflow: clip;
}

/* PC：サービス説明を上側で固定 */
@media (min-width: 901px) {
    .service-detail__inner {
        position: sticky;
        top: 272px;
        /* ヘッダー82px + サービスナビ190px */

        z-index: 4;

        min-height: 44vh;
        padding-top: 36px;
        padding-bottom: 30px;

        align-items: center;

        opacity: 1;
        transform: none !important;
    }

    /* 実績エリアは説明の下をスクロールして通過 */
    .service-work {
        position: relative;
        z-index: 3;

        width: min(calc(100% - 80px), 1180px);
        min-height: 125vh;

        margin: 0 auto;
        padding-top: 22vh;
        padding-bottom: 18vh;

        display: flex;
        align-items: center;
    }

    .service-work__card {
        width: min(680px, 62vw);
    }
}

/* タブレット：固定ナビ高さに合わせる */
@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 190vh;
    }

    .service-detail__inner {
        position: sticky;
        top: 227px;
        /* ヘッダー82px + サービスナビ145px */

        z-index: 4;

        min-height: 46vh;
        padding-top: 34px;
        padding-bottom: 28px;

        opacity: 1;
        transform: none !important;
    }

    .service-work {
        min-height: 105vh;
        padding-top: 18vh;
        padding-bottom: 14vh;
    }
}

/* スマホ：上の2×2ナビの下で説明を固定 */
@media (max-width: 600px) {
    .service-detail {
        min-height: 190svh;
        overflow: clip;
    }

    .service-detail__inner {
        position: sticky;
        top: 252px;
        /* ヘッダー68px + 2段ナビ184px */

        z-index: 4;

        min-height: auto;
        padding-top: 22px;
        padding-bottom: 20px;

        opacity: 1;
        transform: none !important;
    }

    .service-work {
        min-height: 105svh;
        padding-top: 16svh;
        padding-bottom: 14svh;
        align-items: center;
    }
}

/*
 * sticky中は説明側の横スライドアニメを無効化。
 * 実績カードだけ横から出る。
 */
.service-detail.reveal-left .service-detail__inner,
.service-detail.reveal-right .service-detail__inner,
.service-detail.is-visible .service-detail__inner {
    transform: none !important;
    opacity: 1;
}


/* ========================================
   WORKS CARD / ALWAYS REVEAL FROM RIGHT
======================================== */

/* 左指定のカードも含めて、すべて右側から入る */
.service-work--right .service-work__card,
.service-work--left .service-work__card {
    transform: translateX(180px);
}

.service-work.is-visible .service-work__card {
    transform: translateX(0);
}

/* スマホも右から */
@media (max-width: 600px) {

    .service-work--right .service-work__card,
    .service-work--left .service-work__card {
        transform: translateX(70px);
    }

    .service-work.is-visible .service-work__card {
        transform: translateX(0);
    }
}


/* ========================================
   WORKS CARD / SCROLL THROUGH
   右から入り、中央を通って、左へ抜ける
======================================== */

.service-work {
    justify-content: center !important;
    overflow: visible;
}

/* IntersectionObserver用の固定アニメを無効化し、
   JSのスクロール進捗で横位置を制御 */
.service-work__card,
.service-work--right .service-work__card,
.service-work--left .service-work__card,
.service-work.is-visible .service-work__card {
    opacity: var(--work-opacity, 0);
    transform: translate3d(var(--work-x, 110vw), 0, 0);
    transition: none;
    will-change: transform, opacity;
}

/* PCでは実績が十分に横切れるだけのスクロール距離を確保 */
@media (min-width: 901px) {
    .service-detail {
        min-height: 235vh;
    }

    .service-work {
        min-height: 140vh;
    }
}

/* タブレット */
@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 210vh;
    }

    .service-work {
        min-height: 120vh;
    }
}

/* スマホ */
@media (max-width: 600px) {
    .service-detail {
        min-height: 210svh;
    }

    .service-work {
        min-height: 120svh;
        overflow: visible;
    }

    .service-work__card,
    .service-work--right .service-work__card,
    .service-work--left .service-work__card,
    .service-work.is-visible .service-work__card {
        transform: translate3d(var(--work-x, 110vw), 0, 0);
    }
}

/* 動きを減らす設定では中央に固定表示 */
@media (prefers-reduced-motion: reduce) {

    .service-work__card,
    .service-work--right .service-work__card,
    .service-work--left .service-work__card,
    .service-work.is-visible .service-work__card {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ========================================
   WORKS CARD / HORIZONTAL LINE FIX
   縦位置を固定して、右→左へ水平移動
======================================== */

/*
 * カード自体を service-work 内で sticky にすることで、
 * スクロール中も上下には流れず、同じ高さを保つ。
 * JS は X座標だけを変更するため、完全に水平移動になる。
 */
.service-work {
    position: relative;
    display: block !important;
}

.service-work__card {
    position: sticky;
    top: 68vh;

    margin-left: auto;
    margin-right: auto;

    opacity: var(--work-opacity, 0);
    transform: translate3d(var(--work-x, 110vw), 0, 0) !important;

    transition: none !important;
    will-change: transform, opacity;
}

/* PC */
@media (min-width: 901px) {
    .service-work__card {
        top: 68vh;
    }
}

/* タブレット */
@media (min-width: 601px) and (max-width: 900px) {
    .service-work__card {
        top: 66vh;
    }
}

/* スマホ */
@media (max-width: 600px) {
    .service-work__card {
        top: 68svh;
    }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    .service-work__card {
        position: static;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* ========================================
   WORKS / MULTIPLE CARDS
   3枚のカードを同じ水平ラインで順番に通過
======================================== */

.service-work {
    position: relative;
}

.service-work__card {
    position: sticky;
    top: 68vh;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 901px) {
    .service-detail {
        min-height: 360vh;
    }

    .service-work {
        min-height: 265vh;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 320vh;
    }

    .service-work {
        min-height: 235vh;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 320svh;
    }

    .service-work {
        min-height: 235svh;
    }

    .service-work__card {
        top: 68svh;
    }
}


/* ==========================================================
   WORKS FINAL MOTION
   ・カード間隔を狭く
   ・右から連続して横移動
   ・最後のカードは画面内で停止
   ・横演出終了後はセクションと一緒に縦へ抜ける
========================================================== */

.service-work {
    position: relative;
    display: block !important;
    overflow: visible !important;
}

/*
 * JSで全カードを同じ水平ラインに配置。
 * stickyは使わない。
 * sticky解除時にカードだけ斜め上へ逃げる現象を防ぐ。
 */
.service-work__card {
    position: fixed !important;
    top: auto !important;
    left: 0;
    bottom: 8vh;
    z-index: 6;

    width: min(420px, 34vw);
    min-height: 210px;

    margin: 0 !important;

    opacity: var(--work-opacity, 0);
    transform: translate3d(var(--work-x, 120vw), 0, 0) !important;
    transition: none !important;
    pointer-events: none;
    will-change: transform, opacity;
}

/*
 * 横演出が終わった瞬間、
 * JSがカード列を absolute に切り替える。
 * その後は背景・説明と一緒に普通に上へ流れる。
 */
.service-work.is-finished .service-work__card {
    position: absolute !important;
    bottom: auto;
    top: var(--work-final-top, 0px) !important;
}

/* カード間は狭め。JS側も同じ考え方で計算 */
.service-work__card {
    --work-card-gap: 18px;
}

@media (min-width: 901px) {
    .service-detail {
        min-height: 300vh;
    }

    .service-work {
        min-height: 205vh;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 285vh;
    }

    .service-work {
        min-height: 195vh;
    }

    .service-work__card {
        width: min(380px, 48vw);
        bottom: 7vh;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 285svh;
    }

    .service-work {
        min-height: 195svh;
    }

    .service-work__card {
        width: min(300px, 78vw);
        min-height: 180px;
        bottom: 5svh;
        --work-card-gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-work__card {
        position: relative !important;
        left: auto;
        bottom: auto;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto;
        margin: 12px auto !important;
    }
}


/* ==========================================================
   WORKS RELEASE FIX
   横移動完了後:
   1. カード列の横位置を完全固定
   2. service-detail__inner の sticky も解除
   3. 説明 + カード + 背景を一緒に縦スクロール
========================================================== */

/* JSが横演出完了時に service-detail へ is-horizontal-finished を付与 */
.service-detail.is-horizontal-finished .service-detail__inner {
    position: absolute !important;
    top: var(--intro-release-top, 0px) !important;
    left: 50%;
    width: min(calc(100% - 80px), 1180px);
    transform: translateX(-50%) !important;
    opacity: 1 !important;
}

/*
 * 完了後のカードは service-detail 基準の absolute。
 * left/top をJSでピクセル固定するため、
 * fixed→absolute切替時にも横へガクッと動かない。
 */
.service-detail.is-horizontal-finished .service-work__card {
    position: absolute !important;
    left: var(--work-release-left, 0px) !important;
    top: var(--work-release-top, 0px) !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* 以前の is-finished の座標指定よりこちらを優先 */
.service-detail.is-horizontal-finished .service-work.is-finished .service-work__card {
    position: absolute !important;
    left: var(--work-release-left, 0px) !important;
    top: var(--work-release-top, 0px) !important;
    transform: none !important;
}

/* release後も横にはみ出したカードを切らない */
.service-detail {
    overflow-x: clip;
    overflow-y: visible;
}

@media (max-width: 900px) {
    .service-detail.is-horizontal-finished .service-detail__inner {
        width: min(calc(100% - 40px), 1180px);
    }
}

@media (max-width: 600px) {
    .service-detail.is-horizontal-finished .service-detail__inner {
        width: calc(100% - 32px);
    }
}


/* ==========================================================
   WORKS STATE MACHINE V2
   1) 横移動中
   2) 3枚目まで完全表示した完成状態
   3) 完成状態のままセクション全体を縦スクロール
   逆スクロール時も完成状態へ戻ってから横移動を逆再生
========================================================== */

/* 初期の左右スライド演出は service-detail 内では再発火させない */
.service-detail.reveal-left .service-detail__inner,
.service-detail.reveal-right .service-detail__inner,
.service-detail.is-visible .service-detail__inner {
    opacity: 1 !important;
    transform: none !important;
}

/* 横演出中・完成状態では説明を固定 */
.service-detail:not(.is-vertical-phase) .service-detail__inner {
    position: sticky !important;
    top: var(--service-sticky-top, 272px) !important;
    left: auto !important;
    width: min(calc(100% - 80px), 1180px);
    transform: none !important;
}

/* 縦スクロールフェーズに入ったら説明も通常の縦流れに乗せる */
.service-detail.is-vertical-phase .service-detail__inner {
    position: absolute !important;
    top: var(--intro-release-top, 0px) !important;
    left: 50% !important;
    width: min(calc(100% - 80px), 1180px);
    transform: translateX(-50%) !important;
}

/* カードは横演出中はviewport基準で固定 */
.service-detail:not(.is-vertical-phase) .service-work__card {
    position: fixed !important;
    top: auto !important;
    bottom: 8vh !important;
    left: 0 !important;
    margin: 0 !important;
    transform: translate3d(var(--work-x, 120vw), 0, 0) !important;
    opacity: var(--work-opacity, 0) !important;
    transition: none !important;
}

/* 縦スクロールフェーズでは section 基準の absolute に変換 */
.service-detail.is-vertical-phase .service-work__card {
    position: absolute !important;
    left: var(--work-release-left, 0px) !important;
    top: var(--work-release-top, 0px) !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
}

/* 今回は縦の空走距離を短縮 */
@media (min-width: 901px) {
    .service-detail {
        min-height: 225vh !important;
    }

    .service-work {
        min-height: 150vh !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 215vh !important;
    }

    .service-work {
        min-height: 145vh !important;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 220svh !important;
    }

    .service-work {
        min-height: 150svh !important;
    }

    .service-detail:not(.is-vertical-phase) .service-work__card {
        bottom: 5svh !important;
    }

    .service-detail:not(.is-vertical-phase) .service-detail__inner {
        width: calc(100% - 32px);
    }

    .service-detail.is-vertical-phase .service-detail__inner {
        width: calc(100% - 32px);
    }
}


/* ==========================================================
   WORKS STATE MACHINE V3
   修正:
   - service-detail の初期スライド演出を完全停止
   - 3枚目完全表示位置から横ズレなしで縦スクロール開始
   - 縦フェーズではカードと説明が section と一緒に流れる
   - 最終DRONEカードがCONTACT上に残らない
========================================================== */

/* サービス説明の旧 reveal アニメーションを完全無効化 */
.service-detail,
.service-detail__inner,
.service-detail__head,
.service-detail__body {
    animation: none !important;
}

.service-detail .service-detail__inner,
.service-detail.reveal-left .service-detail__inner,
.service-detail.reveal-right .service-detail__inner,
.service-detail.is-visible .service-detail__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 横演出・完成保持中 */
.service-detail:not(.is-vertical-phase) {
    overflow: visible !important;
}

.service-detail:not(.is-vertical-phase) .service-detail__inner {
    position: sticky !important;
    top: var(--service-sticky-top, 272px) !important;
    left: auto !important;
    width: min(calc(100% - 80px), 1180px);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 完成状態から縦スクロールへ移行 */
.service-detail.is-vertical-phase {
    /*
     * 縦フェーズでは section の外へカードを残さない。
     * DRONE完了後にCONTACTへカードが重なるのを防止。
     */
    overflow: hidden !important;
}

.service-detail.is-vertical-phase .service-detail__inner {
    position: absolute !important;
    top: var(--intro-release-top, 0px) !important;
    left: 50% !important;
    width: min(calc(100% - 80px), 1180px);
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    transition: none !important;
}

/* 横演出中のカードは viewport に固定 */
.service-detail:not(.is-vertical-phase) .service-work__card {
    position: fixed !important;
    left: 0 !important;
    top: auto !important;
    bottom: var(--work-fixed-bottom, 8vh) !important;
    margin: 0 !important;
    opacity: var(--work-opacity, 0) !important;
    transform: translate3d(var(--work-x, 120vw), 0, 0) !important;
    transition: none !important;
    will-change: transform, opacity;
}

/*
 * 縦フェーズでは座標を「固定値のabsolute」にする。
 * JSはスクロール中にこの値を再計算しない。
 * そのためカードは section と一緒に上へ流れる。
 */
.service-detail.is-vertical-phase .service-work__card {
    position: absolute !important;
    left: var(--work-release-left, 0px) !important;
    top: var(--work-release-top, 0px) !important;
    bottom: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 旧クラス指定を確実に打ち消す */
.service-detail.is-vertical-phase .service-work.is-finished .service-work__card,
.service-detail.is-horizontal-finished .service-work__card {
    position: absolute !important;
    left: var(--work-release-left, 0px) !important;
    top: var(--work-release-top, 0px) !important;
    bottom: auto !important;
    transform: none !important;
}

/* 次コンテンツまでの距離は短いまま維持 */
@media (min-width: 901px) {
    .service-detail {
        min-height: 220vh !important;
    }

    .service-work {
        min-height: 145vh !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 210vh !important;
    }

    .service-work {
        min-height: 140vh !important;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 215svh !important;
    }

    .service-work {
        min-height: 145svh !important;
    }

    .service-detail:not(.is-vertical-phase) .service-detail__inner,
    .service-detail.is-vertical-phase .service-detail__inner {
        width: calc(100% - 32px);
    }

    .service-detail:not(.is-vertical-phase) .service-work__card {
        bottom: var(--work-fixed-bottom, 5svh) !important;
    }
}


/* ==========================================================
   FINAL ROW RELEASE FIX
   ・3枚を1つのrowとして扱う
   ・横移動終了→縦スクロール開始時のYジャンプを防止
   ・カード列の右ズレを防止
   ・セクション間の空走距離を短く戻す
========================================================== */

/* 旧カード単体fixed/absolute制御を無効化 */
.service-work__card,
.service-detail:not(.is-vertical-phase) .service-work__card,
.service-detail.is-vertical-phase .service-work__card,
.service-detail.is-vertical-phase .service-work.is-finished .service-work__card,
.service-detail.is-horizontal-finished .service-work__card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* 3枚を1本の横列にする */
.service-work__row {
    display: flex;
    align-items: stretch;
    gap: 18px;

    width: max-content;

    position: fixed;
    left: 0;
    bottom: 8vh;
    z-index: 6;

    transform: translate3d(var(--work-row-x, 120vw), 0, 0);
    opacity: var(--work-row-opacity, 0);

    transition: none !important;
    will-change: transform, opacity;
}

/* 各カード幅 */
.service-work__row .service-work__card {
    flex: 0 0 min(420px, 34vw);
    width: min(420px, 34vw);
}

/*
 * 縦スクロールフェーズ。
 * rowそのものをabsoluteへ切り替える。
 * JSでfixed時と完全に同じ画面座標をsection座標へ変換するので
 * 上にも右にも飛ばない。
 */
.service-detail.is-vertical-phase .service-work__row {
    position: absolute;
    left: var(--work-row-release-left, 0px);
    top: var(--work-row-release-top, 0px);
    bottom: auto;

    transform: none;
    opacity: 1;
}

/* service-detail説明の再アニメーション停止 */
.service-detail .service-detail__inner,
.service-detail.reveal-left .service-detail__inner,
.service-detail.reveal-right .service-detail__inner,
.service-detail.is-visible .service-detail__inner {
    transition: none !important;
    animation: none !important;
}

/* 距離を短い状態へ戻す */
@media (min-width: 901px) {
    .service-detail {
        min-height: 200vh !important;
    }

    .service-work {
        min-height: 125vh !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 195vh !important;
    }

    .service-work {
        min-height: 120vh !important;
    }

    .service-work__row {
        bottom: 7vh;
        gap: 16px;
    }

    .service-work__row .service-work__card {
        flex-basis: min(380px, 48vw);
        width: min(380px, 48vw);
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 200svh !important;
    }

    .service-work {
        min-height: 125svh !important;
    }

    .service-work__row {
        bottom: 5svh;
        gap: 12px;
    }

    .service-work__row .service-work__card {
        flex-basis: min(300px, 78vw);
        width: min(300px, 78vw);
    }
}


/* ==========================================================
   WARP FIX
   fixed → absolute 切替後の基準を service-detail に統一する。
   service-detail__inner が sticky → absolute へ変わっても
   service-work の位置変化に引っ張られないようにする。
========================================================== */

/*
 * 縦スクロールフェーズでは service-work を containing block にしない。
 * row の absolute 基準を .service-detail に固定する。
 */
.service-detail.is-vertical-phase .service-work {
    position: static !important;
}

/*
 * row は service-detail 基準の座標で配置。
 * 切替直前と同じ画面位置から、スクロール量ぶんだけ自然に上がる。
 */
.service-detail.is-vertical-phase .service-work__row {
    position: absolute !important;
    left: var(--work-row-release-left, 0px) !important;
    top: var(--work-row-release-top, 0px) !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
}


/* ==========================================================
   SIMPLE FLOW VERSION
   3枚目が画面内に入ったら縦スクロール開始。
   カード列は止めず、そのまま左へ流れ続ける。
   fixed→absoluteの位置保持はやめる。
========================================================== */

/* 旧vertical-phase制御を無効化 */
.service-detail.is-vertical-phase .service-detail__inner,
.service-detail.is-horizontal-finished .service-detail__inner {
    position: sticky !important;
    top: var(--service-sticky-top, 272px) !important;
    left: auto !important;
    width: min(calc(100% - 80px), 1180px);
    transform: none !important;
}

/* カード列はずっとfixedのまま横移動 */
.service-work__row,
.service-detail.is-vertical-phase .service-work__row,
.service-detail.is-horizontal-finished .service-work__row {
    position: fixed !important;
    left: 0 !important;
    top: auto !important;
    bottom: 8vh !important;

    transform: translate3d(var(--work-row-x, 120vw), 0, 0) !important;
    opacity: var(--work-row-opacity, 0) !important;

    transition: none !important;
}

/* セクションが終盤に入ったらカード列を自然にフェードアウト */
.service-detail.is-ending .service-work__row {
    opacity: var(--work-row-opacity, 1) !important;
}

/* 旧absolute release用変数は使わない */
.service-detail.is-vertical-phase .service-work {
    position: relative !important;
}

/* 距離は短め */
@media (min-width: 901px) {
    .service-detail {
        min-height: 185vh !important;
    }

    .service-work {
        min-height: 110vh !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .service-detail {
        min-height: 180vh !important;
    }

    .service-work {
        min-height: 108vh !important;
    }

    .service-work__row {
        bottom: 7vh !important;
    }
}

@media (max-width: 600px) {
    .service-detail {
        min-height: 185svh !important;
    }

    .service-work {
        min-height: 110svh !important;
    }

    .service-work__row {
        bottom: 5svh !important;
    }

    .service-detail .service-detail__inner {
        width: calc(100% - 32px);
    }
}


/* ==========================================================
   LARGE DESKTOP TUNE / around 1980 x 1020
   1600px以上・高さ1100px以下の横長PC向け
========================================================== */
@media (min-width: 1600px) and (max-height: 1100px) {

    /* 全体コンテナを少し広げる */
    :root {
        --container: 1360px;
    }

    .l-container {
        width: min(calc(100% - 80px), 1360px);
    }

    /* 上部サービスナビ */
    .service-nav__item {
        min-height: 172px;
    }

    .service-nav__content {
        padding: 22px 26px;
    }

    .service-nav__content strong {
        font-size: 18px;
    }

    .service-nav__en {
        font-size: 12px;
    }

    /* サービス説明 */
    .service-detail__inner {
        width: min(calc(100% - 120px), 1360px) !important;
        grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr);
        gap: 72px;
        padding-top: 22px !important;
        padding-bottom: 18px !important;
    }

    .service-detail .section-heading__title {
        font-size: 50px;
        line-height: 1.35;
    }

    .service-detail__lead {
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .service-detail__body>p,
    .service-detail__list li {
        font-size: 16px;
    }

    .service-detail__list {
        gap: 10px;
        margin-top: 24px;
    }

    .service-detail__list li {
        padding: 14px 16px 14px 38px;
    }

    .service-detail__list li::before {
        left: 17px;
        width: 7px;
        height: 7px;
    }

    /* 実績エリア */
    .service-work {
        width: min(calc(100% - 100px), 1440px) !important;
    }

    /* 3枚横並びのカード列 */
    .service-work__row {
        gap: 14px !important;
        bottom: 5vh !important;
    }

    .service-work__row .service-work__card {
        flex: 0 0 370px !important;
        width: 370px !important;
        min-height: 190px !important;
        padding: 28px 30px !important;
    }

    .service-work__en {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .service-work__title {
        margin-bottom: 12px;
        font-size: 24px;
        line-height: 1.4;
    }

    .service-work__text {
        font-size: 16px;
        line-height: 1.65;
    }

    .service-work__more {
        margin-top: 16px;
        font-size: 16px;
    }
}

/* 1980px前後で、カードを少し中央寄りに見せる微調整 */
@media (min-width: 1850px) and (max-width: 2050px) and (max-height: 1100px) {
    .service-work__row .service-work__card {
        flex-basis: 360px !important;
        width: 360px !important;
    }

    .service-work__row {
        gap: 12px !important;
        bottom: 4.5vh !important;
    }

    .service-detail__inner {
        width: min(calc(100% - 140px), 1380px) !important;
    }
}


/* ==========================================================
   HEADER <-> SERVICE NAV SWITCH
   Hero: グローバルヘッダー表示
   EC～DRONE: ヘッダーを隠して4サービスナビを画面上端へ
   DRONE終了後: 4サービスナビを隠してヘッダーを再表示
========================================================== */

.site-header {
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        opacity .28s ease;
    will-change: transform;
}

/* 4サービスナビも切替アニメーション */
.service-nav {
    transition:
        top .38s cubic-bezier(.22, 1, .36, 1),
        transform .38s cubic-bezier(.22, 1, .36, 1),
        opacity .28s ease;
    will-change: top, transform, opacity;
}

/* サービス閲覧中：グローバルヘッダーを上へ隠す */
body.service-mode .site-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* サービス閲覧中：4ボタンを画面最上部へ */
body.service-mode .service-nav {
    top: 0 !important;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* DRONEを抜けた後：グローバルヘッダーを復帰 */
body.after-service-mode .site-header {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* DRONEを抜けた後：4サービスナビを上へ退場 */
body.after-service-mode .service-nav {
    top: 0 !important;
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none;
}

/* Hero側では通常状態 */
body:not(.service-mode):not(.after-service-mode) .site-header {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* スマホでも同じ切替 */
@media (max-width: 600px) {

    body.service-mode .service-nav,
    body.after-service-mode .service-nav {
        top: 0 !important;
    }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

    .site-header,
    .service-nav {
        transition: none !important;
    }
}


/* ==========================================================
   SMARTPHONE TYPOGRAPHY TUNE
   画面幅600px以下：文字サイズと余白をスマホ向けに調整
========================================================== */
@media (max-width: 600px) {

    /* HERO */
    .hero {
        padding: 52px 0 58px;
    }

    .hero__inner {
        gap: 28px;
        padding: 0 18px;
    }

    .hero__eyebrow {
        margin-bottom: 14px;
        font-size: 11px !important;
        letter-spacing: .16em;
    }

    .hero__title {
        font-size: 34px !important;
        line-height: 1.45 !important;
        letter-spacing: -.04em;
    }

    .hero__lead {
        margin-top: 22px;
        font-size: 15px !important;
        line-height: 1.9;
    }

    .hero__buttons {
        gap: 14px;
        margin-top: 28px;
    }

    .c-button,
    .c-button--small,
    .c-text-link {
        font-size: 15px !important;
    }

    .c-button {
        min-width: 0;
        min-height: 50px;
        padding: 10px 22px;
    }

    .hero__visual {
        max-width: 230px;
    }

    .hero__logo {
        max-width: 230px;
    }

    /* サービスナビ */
    .service-nav__en {
        font-size: 9px !important;
    }

    .service-nav__content strong {
        font-size: 14px !important;
    }

    .service-nav__arrow {
        font-size: 14px;
    }

    /* サービス本文 */
    .service-detail .section-heading__title {
        font-size: 34px !important;
        line-height: 1.4 !important;
    }

    .service-detail__lead {
        font-size: 18px !important;
        line-height: 1.6;
    }

    .service-detail__body>p,
    .service-detail__list li {
        font-size: 15px !important;
    }

    .service-detail__list li {
        padding: 14px 14px 14px 36px;
    }

    /* 実績カード */
    .service-work__en {
        font-size: 10px !important;
    }

    .service-work__title {
        font-size: 22px !important;
        line-height: 1.45;
    }

    .service-work__text,
    .service-work__more {
        font-size: 14px !important;
    }

    /* ABOUT / CONTACT */
    .section-heading__title,
    .contact__title {
        font-size: 32px !important;
        line-height: 1.45 !important;
    }

    .about__text,
    .contact__text {
        font-size: 15px !important;
    }
}


/* ==========================================================
   SERVICE DETAIL LAYOUT
   左：見出し + 説明文
   右：4つのボタンのみ
========================================================== */

@media (min-width: 901px) {

    .service-detail__inner {
        display: grid !important;
        grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr) !important;
        grid-template-rows: auto auto auto;
        column-gap: 72px !important;
        row-gap: 16px !important;
        align-items: start !important;
    }

    /* bodyの箱を消して、中の要素をgrid直下として扱う */
    .service-detail__body {
        display: contents;
    }

    /* 左上：番号・英字・見出し */
    .service-detail__head {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
    }

    /* 左：リード文 */
    .service-detail__lead {
        grid-column: 1;
        grid-row: 2;
        margin: 8px 0 0 !important;
        max-width: 560px;
    }

    /* 左：説明本文 */
    .service-detail__body>p:not(.service-detail__lead) {
        grid-column: 1;
        grid-row: 3;
        margin: 0 !important;
        max-width: 600px;
    }

    /* 右：4つのボタンだけ */
    .service-detail__list {
        grid-column: 2;
        grid-row: 1 / span 3;

        align-self: center;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;

        margin: 0 !important;
        padding: 0;
    }
}

/* 1980px前後では左右のバランスを少し広めに */
@media (min-width: 1600px) and (max-height: 1100px) {
    .service-detail__inner {
        grid-template-columns: minmax(500px, .95fr) minmax(620px, 1.05fr) !important;
        column-gap: 84px !important;
    }

    .service-detail__lead {
        max-width: 620px;
    }

    .service-detail__body>p:not(.service-detail__lead) {
        max-width: 650px;
    }
}

/* タブレット・スマホは従来どおり縦並び */
@media (max-width: 900px) {
    .service-detail__body {
        display: block;
    }

    .service-detail__inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .service-detail__head,
    .service-detail__lead,
    .service-detail__body>p:not(.service-detail__lead),
    .service-detail__list {
        grid-column: auto;
        grid-row: auto;
    }

    .service-detail__list {
        margin-top: 24px !important;
    }
}


/* ==========================================================
   PC SERVICE CONTENT / WORKS OVERLAP FIX
   説明エリアを上へ詰め、カード開始位置を下げる
========================================================== */
@media (min-width: 901px) {

    /* サービス説明を上側の空きスペースへ移動 */
    .service-detail__inner {
        transform: translateY(-62px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 左側文章を少しコンパクトに */
    .service-detail__lead {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }

    .service-detail__body>p:not(.service-detail__lead) {
        line-height: 1.75 !important;
    }

    /* 右4ボタンも説明ブロックと同じ高さに収める */
    .service-detail__list {
        align-self: center !important;
        gap: 10px !important;
    }

    .service-detail__list li {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /*
     * カードを下へ。
     * 横移動ロジックには触れず、縦位置だけ変更。
     */
    .service-work__row {
        bottom: 1.5vh !important;
    }

    .service-work {
        padding-top: 34vh !important;
    }
}

/* 1980×1020前後：スクショ環境向け微調整 */
@media (min-width: 1600px) and (max-height: 1100px) {

    .service-detail__inner {
        transform: translateY(-78px) !important;
    }

    .service-detail__lead {
        font-size: 19px !important;
        line-height: 1.5 !important;
    }

    .service-detail__body>p:not(.service-detail__lead) {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    .service-detail__list li {
        min-height: 58px;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    .service-work__row {
        bottom: 0 !important;
    }

    .service-work {
        padding-top: 38vh !important;
    }
}

/* スマホ・タブレットにはPC用の位置調整を持ち込まない */
@media (max-width: 900px) {
    .service-detail__inner {
        transform: none !important;
    }

    .service-work {
        padding-top: initial;
    }
}


/* ==========================================================
   SERVICE CONTENT / MOVE UP FIX
   service-mode中はヘッダーが消えているので、
   sticky位置を「4サービスナビの高さだけ」にする。
========================================================== */

@media (min-width: 901px) {

    /*
     * 旧ルールの transform:none !important に勝つ指定。
     * 見出し＋説明＋4ボタンをさらに上へ寄せる。
     */
    body.service-mode .service-detail.is-visible .service-detail__inner,
    body.service-mode .service-detail.reveal-left .service-detail__inner,
    body.service-mode .service-detail.reveal-right .service-detail__inner {
        top: var(--service-sticky-top, 172px) !important;
        transform: translateY(-36px) !important;
    }
}

/* 1980×1020前後ではもう少し上へ */
@media (min-width: 1600px) and (max-height: 1100px) {

    body.service-mode .service-detail.is-visible .service-detail__inner,
    body.service-mode .service-detail.reveal-left .service-detail__inner,
    body.service-mode .service-detail.reveal-right .service-detail__inner {
        transform: translateY(-54px) !important;
    }
}


/* ==========================================================
   SERVICE DETAIL CLEANUP
   PC / SP 共通:
   - 01 / 02 / 03 / 04 を非表示
   - EC DEVELOPMENT 等の英語見出しを非表示

   SPのみ:
   - service-detail__lead は残す
   - その下の説明文だけ非表示
   - service-detail__list は2カラム
========================================================== */

/* PC / SP 共通 */
.service-detail__num,
.service-detail .section-heading__en {
    display: none !important;
}

/* 補助ラベルを消した分の余白を除去 */
.service-detail__head {
    gap: 0 !important;
    row-gap: 0 !important;
}

.service-detail__head .section-heading__title {
    margin-top: 0 !important;
}

@media (max-width: 600px) {

    /* leadは表示 */
    .service-detail__lead {
        display: block !important;
    }

    /* leadの次にある説明文だけ消す */
    .service-detail__body>p:not(.service-detail__lead) {
        display: none !important;
    }

    /* 4項目を2×2にする */
    .service-detail__list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 20px !important;
    }

    .service-detail__list li {
        min-width: 0;
        padding: 12px 10px 12px 30px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .service-detail__list li::before {
        left: 12px !important;
        width: 7px !important;
        height: 7px !important;
    }
}


/* ==========================================================
   MOBILE ONLY / SERVICE NAV COMPACT
   2×2ナビを 92px → 60px に縮小
========================================================== */
@media (max-width: 600px) {

    .service-nav {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .service-nav__item {
        min-height: 60px !important;
        height: 60px !important;
    }

    .service-nav__content {
        padding: 6px 9px !important;
        gap: 1px 6px !important;
    }

    .service-nav__en {
        display: none !important;
    }

    .service-nav__content strong {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .service-nav__arrow {
        font-size: 13px !important;
    }
}


/* ==========================================================
   PC ONLY / WORKS CARD VERTICAL POSITION FIX
   スマホは現状維持。
   PCの実績カード列が画面下端に寄りすぎていたため上へ戻す。
========================================================== */
@media (min-width: 901px) {

    .service-work__row,
    .service-detail.is-vertical-phase .service-work__row,
    .service-detail.is-horizontal-finished .service-work__row {
        bottom: 17vh !important;
    }
}

/* 横長PCでは少しだけ下げてバランス調整 */
@media (min-width: 1600px) and (max-height: 1100px) {

    .service-work__row,
    .service-detail.is-vertical-phase .service-work__row,
    .service-detail.is-horizontal-finished .service-work__row {
        bottom: 16vh !important;
    }
}


/* ==========================================================
   HERO EYEBROW / OUTLINED TEXT ONLY
========================================================== */

.hero__eyebrow {
    position: relative !important;
    z-index: 6 !important;

    color: var(--red) !important;

    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;

    text-shadow:
        0 0 1px #fff,
        0 0 2px #fff,
        0 0 3px #fff;
}

@media (max-width: 600px) {
    .hero__eyebrow {
        -webkit-text-stroke: 2.5px #fff;
    }
}

/* Google reCAPTCHA バッジを最前面へ */
.grecaptcha-badge {
    z-index: 2147483647 !important;
}


/* ========================================
   EC WORKS / LOGO LIST
======================================== */
.service-work__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    min-height: 46px;
    margin: 0 0 20px;
}

.service-work__logos img {
    display: block;
    width: auto;
    max-width: 110px;
    height: 38px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .service-work__logos {
        gap: 10px 14px;
        min-height: 38px;
        margin-bottom: 16px;
    }

    .service-work__logos img {
        max-width: 88px;
        height: 30px;
    }
}


/* ========================================
   EC ICON
======================================== */
/* ========================================
   SERVICE WORK / LOGO BOX
======================================== */

.service-work__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
}

.service-work__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 60px;
    padding: 10px;

    border: 1px solid #fff !important;
    border-radius: 4px;

    background: transparent;
    box-sizing: border-box;
}

.service-work__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* スマホ */
@media (max-width: 600px) {

    .service-work__logos {
        gap: 10px;
        margin: 18px 0 14px;
    }

    .service-work__logo {
        width: 78px;
        height: 50px;
        padding: 7px;
    }
}


/* ========================================
   SERVICE WORK LOGO / WHITE BACKGROUND
======================================== */

.service-work__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.service-work__logos img {
    display: block;

    width: 72px;
    height: 52px;
    padding: 8px;

    object-fit: contain;

    background: #fff;
    border: none;
    border-radius: 3px;

    box-sizing: border-box;
}