/* 基本 */
    body {
        margin: 0;
        font-family: 'Helvetica Neue', sans-serif;
        color: #333;
        background: #fff;
    }

    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ヘッダー */
    .site-header {
        background-color: #9FB9BA;
        padding: 20px 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }

    .menu-toggle {
        display: none;
        cursor: pointer;
    }

    .menu-toggle img {
        height: 20px;
    }

    /* SPメニュー全体 */
    .sp-menu {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #9FB9BA;
        padding: 30px 20px;
        padding-top: 90px;
        box-sizing: border-box;
    }

    .sp-menu-inner {
        position: relative;
    }

    /* PC/SP切り替え用 */
    .pc-nav {
        display: block;
    }

    .sp-only {
        display: none;
    }

    /* 閉じるボタン */
    .sp-menu-close {
        display: none;
        position: absolute;
        top: -3px;
        right: 18px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #fff;
        color: #000;
        font-size: 32px;
        line-height: 36px;
        text-align: center;
        border: none;
        cursor: pointer;
    }

    /* 検索欄 */
    .sp-search {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 2px solid #444;
        border-radius: 8px;
        margin-bottom: 30px;
        box-sizing: border-box;
    }

    /* メニュー */
    .sp-menu-nav ul {
        list-style: none;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .sp-menu-nav ul li {
        margin-bottom: 46px;
    }

    .sp-menu-nav ul li a {
        color: #000;
        text-decoration: none;
        font-size: 21px;
    }

    .sp-links li {
        margin-bottom: 30px !important;
    }

    .sp-links li a {
        color: #fff !important;
        font-size: 17px !important;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .header-logo img {
        height: 30px;
    }

    .header-nav ul {
        display: flex;
        gap: 40px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header-nav a {
        text-decoration: none;
        color: #333;
        font-size: 20px;
    }

    /* Heroセクション */
    .hero {
        background: url(../img/hero_bg.png) no-repeat center center / cover;
        padding: 100px 0;
        padding-top: 150px;
        text-align: center;
        position: relative;
    }

    .hero-inner {
        padding: 40px;
    }

    .hero-logo {
        max-width: 350px;
        height: auto;
        margin-bottom: 30px;
    }

    .hero-text {
        font-weight: bold;
    }

    .hero-text p {
        font-size: 23px;
        line-height: 1.8;
    }

    /* SERVICEセクション */
    .service {
        padding: 80px 0;
        padding-bottom: 90px;
        background: url(../img/service_icon.png) no-repeat center center;
        background-size: cover;
        text-align: center;
        position: relative;
    }

    #service {
        position: absolute;
        top: -70px;
    }

    .section-title {
        font-size: 50px;
        font-weight: bold;
        margin: 0;
    }

    .section-subtitle {
        font-size: 24px;
        color: #333;
        margin-bottom: 70px;
        margin-top: 5px;
        font-weight: bold;
    }

    .service-list {
        display: flex;
        justify-content: center;
        gap: 90px;
    }

    .service-card {
        background-color: #e6e8e9;
        padding: 15px 10px;
        border-radius: 20px;
        width: 20%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-card h3 {
        font-size: 21px;
        color: #43565d;
        margin-bottom: 19px;
        margin-top: 5px;
        line-height: 1.1;
    }

    .juju-logo {
        width: 110px;
        margin-bottom: 33px;
    }

    .marketing-logo {
        width: 100px;
        margin-bottom: 15px;
    }

    .solution_logo {
        width: 65px;
        margin-bottom: 15px;
    }

    .service-button {
        display: inline-block;
        background-color: #506971;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        border-radius: 30px;
        padding: 7px 50px;
        margin-bottom: 5px;
        font-size: 19px;
        transition: background-color 0.3s;
    }

    .service-button:hover {
        background-color: #2c3a3f;
    }

    /* JUJUアプリ紹介セクション */
    .app-section {
        background: url(../img/app_bg.png) no-repeat center center;
        background-size: cover;
        padding: 70px 0;
        color: #fff;
        position: relative;
    }

    #app {
        position: absolute;
        top: -73px;
    }

    .app-inner {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .app-text h2 {
        font-size: 40px;
        font-weight: bold;
        margin: 0;
    }

    .app-text .catch {
        font-size: 30px;
        font-weight: bold;
        line-height: 1.6;
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .app-box {
        background-color: rgba(102, 77, 111, 0.9);
        border-radius: 10px;
        padding: 30px;
        display: flex;
        gap: 30px;
        align-items: center;
        flex-wrap: wrap;
    }

    .app-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .app-icons {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .icon.juju {
        height: 90px;
    }

    .store-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .icon.app-store {
        height: 42px;
        width: 120px;
    }

    .icon.android-store {
        height: 38px;
        width: 120px;
    }

    .app-button {
        background-color: #200522;
        color: #fff;
        text-decoration: none;
        padding: 8px 40px;
        border-radius: 30px;
        display: inline-block;
        text-align: center;
    }

    .app-button:hover {
        background-color: #371f47;
    }

    .app-description {
        flex: 1;
        font-size: 17px;
        line-height: 1.5;
        margin: 0;
        color: #fff;
        letter-spacing: 2px;
    }

    /* デジタルマーケティングセクション */
    .digital-marketing {
        background: url(../img/digital_bg.png) no-repeat center center;
        background-size: cover;
        padding: 65px 0;
        padding-bottom: 75px;
        color: #000;
        position: relative;
    }

    #digital-marketing {
        position: absolute;
        top: -73px;
    }

    .digital-inner {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .digital-header h2 {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .digital-lead {
        font-size: 30px;
        font-weight: bold;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .digital-content {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .digital-image img {
        width: 230px;
        max-width: 100%;
        border-radius: 12px;
    }

    .digital-text {
        flex: 1;
        font-size: 19.58px;
        line-height: 1.4;
    }

    .digital-text p {
        margin: 0;
        letter-spacing: 1.2px;
    }

    /* クリエイティブセクション */
    .creative-section {
        background: url(../img/design_bg.png) no-repeat center center;
        background-size: cover;
        padding: 65px 0;
        color: #000;
        position: relative;
    }

    #creative {
        position: absolute;
        top: -73px;
    }

    .creative-inner {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .creative-header h2 {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .creative-lead {
        font-size: 30px;
        font-weight: bold;
        margin-top: 20px;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .creative-text {
        font-size: 18.5px;
        line-height: 1.4;
        letter-spacing: 1.8px;
    }

    /* フッター */
    .site-footer {
        background-color: #a9c3c5;
        padding: 20px 0;
        text-align: center;
        font-size: 18.5px;
        color: #222;
    }

    .footer-links {
        margin-bottom: 10px;
        line-height: 1.8;
    }

    .footer-links a {
        text-decoration: none;
        color: #222;
    }

    .footer-links a:hover {
        text-decoration: underline;
    }

    .site-footer hr {
        border: none;
        border-top: 1px solid #444;
        width: 100%;
        margin: 10px auto;
    }

    .footer-copy {
        margin-top: 10px;
    }

    .sp-br,
    .sp {
        display: none;
    }

    @media screen and (max-width: 1100px) {

        .pc-nav,
        .pc {
            display: none;
        }

        .sp-only,
        .sp {
            display: block;
        }

        /* ヘッダー */
        .header-logo img {
            height: 22px;
        }

        /* heroセクション */
        .hero {
            background: url(../img/hero_bg_sp.png) no-repeat center center;
            background-size: cover;
            padding: 80px 0;
            padding-bottom: 40px;
        }

        .hero-inner {
            padding: 30px 16px;
        }

        .hero-logo {
            max-width: 230px;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .hero-text p {
            font-size: 23px;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        /* SERVICEセクション */

        .service {
            padding: 60px 0;
            padding-bottom: 80px;
        }

        .section-title {
            font-size: 40px;
        }

        .section-subtitle {
            font-size: 24px;
            color: #333;
            margin-bottom: 40px;
            margin-top: 15px;
            font-weight: bold;
        }

        .service-list {
            flex-direction: column;
            gap: 30px;
        }

        .service-card {
            width: 100%;
            box-sizing: border-box;
        }

        /* JUJUアプリ紹介セクション */
        .app-section {
            background: url("../img/app_bg_sp.png") no-repeat center center;
            background-size: cover;
            padding: 60px 0;
        }

        .app-text h2 {
            font-size: 25px;
        }

        .app-text .catch {
            font-size: 18px;
            margin-top: 10px;
        }

        .app-box {
            padding: 20px 16px;
        }

        .app-description {
            font-size: 18px;
            line-height: 2;
            text-align: center;
            margin-bottom: 13px;
        }

        .centering {
            display: flex;
            justify-content: center;
        }

        .app-icons {
            gap: 16px;
            display: flex;
            justify-content: center;
        }

        .icon.app-store {
            height: 45px;
            width: 120px;
        }

        .icon.android-store {
            height: 45px;
            width: 145px;
        }

        .app-button {
            display: block;
            width: 100%;
            max-width: 280px;
            margin: 0 auto;
            padding: 10px 0px;
            font-size: 19px;
            margin-top: 19px;
        }

        /* デジタルマーケティングセクション */
        .digital-marketing {
            background: url("../img/digital_bg_sp.png") no-repeat center center;
            background-size: cover;
            padding: 60px 0;
        }

        .digital-inner {
            gap: 13px;
        }

        .digital-header h2 {
            font-size: 25px;
            margin: 0;
        }

        .digital-lead {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 0;
            margin-top: 8px;
        }

        .digital-text {
            font-size: 15px;
            line-height: 1.8;
        }

        .digital-image {
            display: none;
        }

        .digital-text p {
            font-size: 18px;
        }

        /* クリエイティブセクション */
        .creative-section {
            background: url("../img/design_bg_sp.png") no-repeat center center;
            background-size: cover;
            padding: 60px 0;
        }

        .creative-inner {
            gap: 13px;
        }

        .creative-header h2 {
            font-size: 25px;
        }

        .creative-lead {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 0;
            margin-top: 8px;
        }

        .creative-text {
            font-size: 18px;
            line-height: 1.8;
        }

        .creative-text p {
            margin: 0;
        }

        /* フッター */
        .site-footer {
            text-align: center;
            padding: 70px 20px;
            color: #000;
            font-size: 15px;
        }

        .footer-links ul {
            list-style: none;
            padding: 0;
            margin: 0 0 30px 0;
        }

        .footer-links ul li {
            margin-bottom: 11px;
        }

        .footer-links ul li a {
            color: #000;
            text-decoration: none;
            font-size: 16px;
        }

        .footer-copy {
            font-size: 17px;
            letter-spacing: 1.5px;
            color: #000;
            margin: 0;
        }
    }


    @media screen and (min-width: 420px) and (max-width: 768px) {
        .sp-br {
            display: block;
        }
    }