body {
        margin: 0;
        font-family: sans-serif;
        background-color: #F2F1EE;
        font-weight: bold;
    }

    .sticky-wrapper {
        position: relative;
        height: auto;
    }

    .sticky-section {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* メインビジュアルセクション */
    .service-mv {
        height: 100vh;
        background: linear-gradient(90deg,
                #0a1f44 0%,
                #1e4f91 50%,
                #6a9eff 100%);
        color: #eeeff2;
        display: flex;
        align-items: center;
        padding-left: 80px;
        overflow: hidden;
    }

    .service-mv-content {
        z-index: 2;
        position: relative;
    }

    .service-mv h1 {
        font-size: 64px;
        margin-bottom: 20px;
    }

    .service-mv p {
        font-size: 20px;
        max-width: 400px;
    }

    /* スクロールインジケーター */
    .service-scroll-indicator {
        position: absolute;
        top: 65%;
        right: 60px;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-scroll-indicator .circle {
        width: 48px;
        height: 48px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
    }

    .service-scroll-indicator .dot {
        width: 6px;
        height: 6px;
        background-color: #ffffff;
        border-radius: 50%;
        animation: dotScroll 2s infinite ease-in-out;
        margin-top: 8px;
    }

    @keyframes dotScroll {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

        70% {
            transform: translateY(28px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 0;
        }
    }

    .service-scroll-indicator .text {
        margin-top: 8px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        color: #ffffff;
        font-size: 12px;
        letter-spacing: 0.2em;
        opacity: 0.7;
    }

    .service-mv svg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        transform: rotate(180deg) translateY(-100%);
        animation: waveDown 1.2s ease-out forwards;
        z-index: 1;
    }

    @keyframes waveDown {
        to {
            transform: rotate(180deg) translateY(0);
        }
    }

    /* サービス詳細 */
    .service-content {
        background-color: #F2F1EE;
        padding: 200px 80px;
        position: relative;
        min-height: 100vh;
        margin-top: -75px;
        z-index: 2;
    }

    .service-intro {
        max-width: 900px;
        margin: 0 auto 100px;
    }

    .service-intro p {
        font-size: 17px;
        line-height: 2.5;
    }

    .accent-text {
        color: #3760a9;
        font-size: 20px;
        display: inline;
    }

    /* 色アニメーション */
    .accent-animate {
        background: linear-gradient(90deg, #000 0%, #000 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .service-intro-img {
        margin: 0 -80px;
    }

    .service-intro-img img {
        width: 100%;
        height: 800px;
        margin-top: 40px;
        margin-bottom: 100px;
    }

    .service-item {
        padding: 100px 0;
        max-width: 900px;
        margin: 0 auto;
    }

    .service-item-heading {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        gap: 5px;
        z-index: 0;
    }

    .service-item-heading .icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }

    .service-item-heading h3 {
        font-size: 26px;
        color: #333;
        padding-bottom: 6px;
        --line-width: 110px;
    }

    .service-item-heading h3::before,
    .service-item-heading h3::after {
        content: "";
        position: absolute;
        left: 45px;
        bottom: 5px;
    }

    /* 青い短い線（手前） */
    .service-item-heading h3::before {
        content: "";
        width: var(--line-width, 0px);
        height: 4px;
        background-color: #5178b8;
        z-index: 1;
    }

    /* グレーの長い線（背景） */
    .service-item-heading h3::after {
        width: calc(100% - 45px);
        height: 4px;
        background-color: #dfdfdf;
        z-index: 0;
    }

    /* 青い丸（背景） */
    .service-item-heading .circle {
        position: absolute;
        width: 65px;
        height: 65px;
        background-color: #b7d6f5;
        border-radius: 50%;
        bottom: -5px;
        z-index: -1;
    }

    .circle-web {
        left: 125px;
    }

    .circle-movie {
        left: 120px;
    }

    .circle-support {
        left: 235px;
    }

    .circle-system {
        left: 210px;
    }

    .circle-ai {
        left: 185px;
    }

    .service-item-desc {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .service-item-sub-desc {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 30px;
        font-weight: 500;
    }

    .service-item-tags {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 45px;
        row-gap: 20px;
        margin-bottom: 20px;
    }

    .service-item-tags span {
        text-align: center;
        padding: 10px;
        border: 1px solid #929290;
        border-radius: 8px;
        font-size: 14px;
        font-weight: bold;
        background-color: #f2f2f2;
    }

    .service-item.last-item {
        border-bottom: none;
    }

    .price-link {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        margin-top: 160px;
    }

    .price-link .price-text {
        font-size: 18px;
        font-weight: bold;
        margin-right: 70px;
        margin-bottom: 15px;
    }

    /* 長い横線部分 */
    .price-link .service-arrow {
        display: block;
        width: 200px;
        height: 1px;
        background-color: #888888;
        position: relative;
        margin-left: 20px;
        transform-origin: right;
        transition: background-color 0.3s ease, transform 0.3s ease-out;
    }

    /* 矢印の先端部分 */
    .price-link .service-arrow::after {
        content: '';
        position: absolute;
        top: -13px;
        right: -5px;
        width: 44px;
        height: 0px;
        border-top: 1px solid #888888;
        border-right: 1px solid #888888;
        transform: rotate(35deg);
    }

    .price-link:hover .service-arrow {
        transform: translateX(10px);
    }



    @media (max-width: 1024px) {
        .service-mv {
            padding-left: 60px;
            height: 800px;
        }

        .service-mv h1 {
            font-size: 48px;
        }

        .service-mv p {
            font-size: 18px;
            max-width: 320px;
        }

        .service-content {
            padding: 120px 100px;
            margin-top: -50px;
        }

        .service-intro {
            margin: 0 auto 80px;
        }

        .service-intro-img {
            margin: 0 -100px;
        }

        .service-intro-img img {
            height: 600px;
        }

        .service-item {
            padding: 60px 0;
        }

        .service-item-heading h3 {
            font-size: 22px;
        }

        .circle-web {
            left: 115px;
        }

        .circle-movie {
            left: 110px;
        }

        .circle-support {
            left: 210px;
        }

        .circle-system {
            left: 195px;
        }

        .circle-ai {
            left: 165px;
        }
    }

    @media (max-width: 768px) {
        .service-mv {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            text-align: left;
            height: 600px;
        }

        .service-mv h1 {
            font-size: 36px;
        }

        .service-mv p {
            font-size: 16px;
            max-width: 100%;
        }

        .service-intro-img img {
            height: 400px;
            object-fit: cover;
        }

        .service-intro {
            margin: 0 auto 60px auto;
        }

        .service-item {
            padding: 60px 0;
        }

        .service-item-desc {
            font-size: 18px;
        }

        .service-item-tags {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 20px;
        }
    }

    @media (max-width: 480px) {

        .service-mv {
            padding: 0 30px;
            height: 500px;
        }

        .service-mv h1 {
            font-size: 28px;
            margin-top: -60px;
        }

        .service-mv p {
            font-size: 14px;
        }

        .service-scroll-indicator {
            top: 75%;
            right: 20px;
        }

        .service-scroll-indicator .circle {
            width: 30px;
            height: 30px;
        }

        .service-content {
            padding: 80px 40px;
            margin-top: -25px;
        }

        .service-intro {
            margin: 0 auto 40px auto;
        }

        .service-intro p {
            font-size: 14px;
            line-height: 2.5;
        }

        .accent-text {
            font-size: 16px;
        }

        .service-intro-img {
            margin: 0 -40px;
        }

        .service-intro-img img {
            margin-top: 80px;
            margin-bottom: 70px;
            height: 300px;

        }

        .service-item {
            padding: 50px 0;
        }

        .service-item-heading h3 {
            font-size: 20px;
        }

        .service-item-heading .circle {
            width: 55px;
            height: 55px;
        }

        .circle-web {
            left: 110px;
        }

        .circle-movie {
            left: 105px;
        }

        .circle-support {
            left: 195px;
        }

        .circle-system {
            left: 180px;
        }

        .circle-ai {
            left: 160px;
        }

        .service-item-desc {
            font-size: 16px;
        }

        .service-item-sub-desc {
            font-size: 14px;
        }

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

        .service-item-tags span {
            font-size: 13px;
            padding: 8px 16px;
        }

        .price-link {
            margin-top: 100px;
        }

        .price-link .service-arrow {
            width: 180px;
        }
    }