:root {
    /* 色 */
    --black: #414B4B;
    --white: #FEFEFE;
    --lightgray: #EEF3F9;
    --green: #00A59B;
    --yellow: #F5E35C;
    --brown: #A68837;
    --beige: #FDFCED;
}

/* フォント */
body {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--black);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================
header
===================== */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 90px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    backdrop-filter: blur(4px);
    background: linear-gradient(90deg, #00A59B 0%, rgba(238, 243, 249, 0.8) 100%);

    /* ヘッダーテキスト */
    .header-text {
        color: var(--white);
        font-size: 1.8vw;
        font-weight: 900;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    /* メニュー */
    .menu {
        display: flex;
        align-items: center;
        gap: 16px;

        a {
            color: var(--black);
            text-decoration: none;
            font-weight: 900;
            transition: .3s;
            padding: 10px 16px;
            border-radius: 50px;

            &:hover {
                background: var(--green);
                color: var(--white);
            }

            /* お問い合わせ */
            &.header-contact {
                background: var(--yellow);
                display: flex;
                gap: 4px;

                .material-symbols-outlined {
                    font-size: 24px;
                }

                &:hover {
                    background: var(--green);
                    color: var(--yellow);
                }
            }
        }
    }
}

/* =====================
メインビジュアル
===================== */

.mainvisual {
    display: flex;
    position: relative;
    background-image: url("../img/main.png");
    background-size: cover;
    background-position: center;

    /* 左側 */
    .main-text {
        padding: calc(2.08vw + 90px) 0 8% 8%;
        position: relative;
        z-index: 10;
        line-height: 1.15;
        display: flex;
        flex-direction: column;
        gap: clamp(9.6px, .83vw, 16px);

        /* AI生産計画 */
        h1 {
            font-size: clamp(76.8px, 6.66vw, 128px);
            font-weight: 900;
            color: var(--green);
            /* 文字縁取り */
            -webkit-text-stroke: 8px var(--white);
            paint-order: stroke fill;
            line-height: 1em;
        }

        /* 作成アプリ */
        h2 {
            font-size: clamp(48px, 4.16vw, 80px);
            color: var(--black);
            font-weight: 500;
        }

        /* 生産計画作成を自動化 */
        .catch {
            background: linear-gradient(to right, var(--green), var(--black));
            color: var(--white);
            font-size: clamp(24px, 2.08vw, 40px);
            font-weight: 500;
            padding: .52vw 2.08vw;
            text-align: center;
        }

        /* 夢のような業務自動化を実現 */
        h3 {
            font-size: clamp(24px, 2.08vw, 40px);
            color: var(--green);
            font-weight: 500;
        }

        /* 文章 */
        p {
            font-size: clamp(14px, 1.04vw, 20px);
            line-height: 1.7;
            font-weight: 500;
        }

        /* お問い合わせ */
        .contact-btn {
            background: var(--yellow);
            color: var(--black);
            padding: clamp(12px, 1.04vw, 20px) clamp(66px, 5.72vw, 110px);
            width: fit-content;
            border-radius: 50px;
            font-size: clamp(19.2px, 1.25vw, 32px);
            font-weight: 900;
            text-align: center;
            box-shadow: 0px 0px 8px rgba(0, 127, 197, 0.3);
            white-space: nowrap;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;

            .material-symbols-outlined {
                font-size: clamp(24px, 1.66vw, 40px);
                transform: translateY(.05em);
                display: block;
            }
        }
    }
}

/* =====================
課題提起セクション
===================== */

.problem {
    background: var(--lightgray);
    padding: 5vw 0 8vw;
    position: relative;

    /* 下向き三角 */
    &::after {
        content: "";
        position: absolute;
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        border-top: 45px solid var(--lightgray);
    }

    /* 悩みボックス */
    .problem-box {
        width: 55vw;
        margin: 0 auto;
        background: var(--white);
        border: 2px solid var(--black);
        border-radius: 16px;
        padding: 2vw 4vw;

        h2 {
            text-align: center;
            font-size: 2vw;
            font-weight: 900;
            margin-bottom: 2vw;
        }

        ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5vw 4vw;
            list-style: none;

            li {
                display: flex;
                align-items: center;
                gap: .8vw;
                font-size: clamp(16px, 1.3vw, 26px);
                font-weight: 500;
                color: var(--black);

                .material-symbols-outlined {
                    font-variation-settings: 'FILL' 1;
                    font-size: clamp(24px, 1.66vw, 32px);
                    color: var(--green);
                }
            }
        }
    }

    /* キャッチ */
    .problem-catch {
        margin-top: 5vw;
        text-align: center;

        h2 {
            font-size: 2.8vw;
            line-height: 1.4;
            font-weight: 900;
            color: var(--green);

            span {
                font-size: 3.5vw;
            }

            /* 黄色下線 */
            background: linear-gradient(transparent 70%,
                var(--yellow) 70%);
            display: inline;
        }

        h3 {
            font-size: 2vw;
            font-weight: 900;
            margin-top: 4vw;
            color: var(--green);
        }

        .mock-image {
            margin-top: 4vw;

            img {

                &:first-child {
                    width: 31vw;
                }

                &:last-child {
                    width: 13vw;
                }
            }
        }
    }
}

/* =====================
メリット
===================== */

.merit {
    padding: 8vw 0;
    background: var(--white);

    /* 導入で得られる 4つのメリット */
    .section-title {
        text-align: center;
        margin-bottom: 5vw;

        h2 {
            position: relative;
            display: inline-block;
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 900;
            color: var(--black);
            bottom: 1.7vw;
            width: 53.95vw;
            text-align: right;
        }

        /* 英語のMerit文字 */
        .back-merit {
            font-size: 6.6vw;
            color: var(--lightgray);
            font-weight: 900;
        }
    }

    .merit-list {
        display: flex;
        flex-direction: column;
        gap: 8.3vw;
        width: 75vw;
        margin: 0 auto;

        .merit-item {
            display: flex;
            align-items: center;
            height: auto;
            min-height: 22vw;
            background: var(--lightgray);
            border-radius: 40px;

            /* 写真 */
            .merit-image {
                width: 33vw;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 40px;
                }
            }

            .merit-content {
                width: 62%;
                height: auto;
                min-height: 100%;

                padding: 1.5vw 3vw;

                /* 数字 */
                .number {
                    width: clamp(78px, 8.1vw, 156px);
                }

                /* 見出し */
                .merit-head {
                    display: flex;
                    align-items: center;
                    gap: .5vw;
                    background: var(--white);
                    width: fit-content;
                    padding: .3vw 1vw;
                    font-size: clamp(14px, 1vw, 20px);
                    color: var(--green);
                    font-weight: 900;

                    .merit-icon {
                        height: 3.3vw;
                        width: auto;
                    }

                    .merit-head-text {
                        font-size: clamp(16px, 1.25vw, 24px);
                    }
                }

                /* 文章 */
                p {
                    margin-top: 1vw;
                    font-size: clamp(14px, .9vw, 18px);
                    line-height: 1.7;
                    font-weight: 500;
                }
            }

            /* 交互 */
            &:nth-child(even) {
                flex-direction: row-reverse;
            }
        }
    }

    /* 熟練工の負担を減らす様々な機能を搭載 */
    .merit-catch {
        position: relative;
        bottom: 1.7vw;
        text-align: center;
        background: linear-gradient(270deg, #414B4B 0%, #00A59B 100%);
        width: 75vw;
        margin: 8.3vw auto 0;
        padding-block: 2vw;

        h2 {
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 900;
            color: var(--yellow);
        }

        p {
            font-size: clamp(14px, .93vw, 18px);
            color: var(--white);
            margin-top: 8px;
            line-height: 1.7em;
            margin-inline: 40px;
        }
    }
}

/* =====================
主な特徴セクション
===================== */

.feature {
    background: var(--green);
    padding: 8vw 0;

    .feature-box {
        width: 70vw;
        margin: 0 auto;
        background: var(--white);
        border-radius: .8vw;
        padding: 4vw 3vw;

        h2 {
            text-align: center;
            font-size: clamp(24px, 2.1vw, 40px);
            font-weight: 900;
            color: var(--green);
            margin-bottom: 3.5vw;
        }

        .feature-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 3vw;

            .feature-item {
                position: relative;
                text-align: center;
                padding: 0 1.5vw;

                /* 2列目・3列目の左側に縦線 */
                &:not(:nth-child(3n + 1))::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 8%;
                    width: .08vw;
                    height: 84%;
                    background: var(--green);
                }

                h3 {
                    font-size: clamp(20px, 1.2vw, 24px);
                    font-weight: 900;
                    color: var(--green);
                    line-height: 1.4;
                    margin-bottom: 1vw;
                    min-height: 3.2vw;
                }

                img {
                    width: 10vw;
                    height: 4.8vw;
                    object-fit: contain;
                    display: block;
                    margin: 0 auto 1vw;
                }

                &.feature-image {

                    img {
                        width: 12.5vw;
                        height: auto;
                    }
                }

                p {
                    font-size: .9vw;
                    font-size: clamp(14px, .9vw, 18px);
                    line-height: 1.8;
                    color: var(--black);
                    font-weight: 500;
                }
            }
        }
    }
}

/* =====================
ご相談の流れ
===================== */

.flow {
    background: var(--white);
    padding: 8.3vw 0;

    .flow-box {
        width: 62.5vw;
        margin: 0 auto;

        h2 {
            background: var(--green);
            color: var(--white);
            text-align: center;
            font-size: clamp(24px, 2.08vw, 40px);
            font-weight: 900;
            padding: .8vw 0;
            margin-bottom: 4vw;
        }

        .flow-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.6vw;

            .flow-item {
                width: 100%;
                min-height: 7vw;
                background: var(--lightgray);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 2vw;
                box-shadow: 0px 0px 16px rgba(0, 165, 155, 0.5);

                /* アイコン */
                .flow-icon {
                    width: 4.16vw;
                    height: 4.16vw;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                .flow-text {

                    /* 小見出し */
                    h3 {
                        color: var(--green);
                        font-size: clamp(16px, 1.25vw, 24px);
                        font-weight: 900;
                        margin-bottom: .5vw;
                    }

                    p {
                        color: var(--black);
                        font-size: clamp(14px, .9vw, 18px);
                        line-height: 1.6;
                        font-weight: 500;
                    }
                }
            }

            .arrow {
                height: 4vw;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    color: var(--green);
                    font-size: 3vw;
                    font-weight: 900;
                    line-height: 1;
                }
            }
        }
    }
}

/* =====================
補助金セクション
===================== */

.subsidy {
    background: var(--beige);
    padding: 8.33vw 0;

    .subsidy-box {
        width: 68.3vw;
        margin: 0 auto;
        background: var(--white);
        border: 2px solid var(--brown);
        border-radius: 20px;
        padding: 2.08vw;
        display: flex;
        align-items: center;
        gap: 1vw;

        /* グリッター */
        .glitter {
            width: 2.5vw;

            img {
                width: 100%;
                height: 100%;
            }
        }

        /* 左バッジ */
        .subsidy-badge {
            width: 9.11vw;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        /* 内容 */
        .subsidy-content {
            flex: 1;

            h2 {
                text-align: center;
                color: var(--brown);
                font-size: 2.08vw;
                font-weight: 900;
            }

            p {
                text-align: center;
                color: var(--black);
                font-size: clamp(14px, .9vw, 18px);
                line-height: 1.8;
                font-weight: 700;
                margin-block: 1vw;

                a {
                    color: var(--green);
                    text-decoration: underline;
                }
            }

            .subsidy-button {
                font-size: clamp(14px, 1.3vw, 26px);
                background: var(--brown);
                color: var(--white);
                border-radius: 16px;
                text-align: center;
                padding: .7vw;
                font-weight: 900;
            }
        }
    }
}

/* =====================
アイキャッチセクション
===================== */

.eye-catch {
    background-image: url("../img/eye-catch.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    color: var(--white);
    padding: 2.08vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    h1 {
        font-size: clamp(24px, 2.08vw, 40px);
        font-weight: 900;
    }

    h2 {
        font-size: clamp(16px, 1.25vw, 24px);
        font-weight: 500;
    }
}

/* =====================
お問い合わせ
===================== */

.contact-section {
    padding: 8.33vw 3vw;

    .contact-box {
        max-width: 1323px;
        width: 100%;
        margin: 0 auto;
        background: var(--beige);
        border-radius: 40px;
        padding-block: 4.16vw;
        box-shadow: 8px 8px 0px rgba(166, 136, 55, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2.08vw;

        /* 見出し */
        h2 {
            text-align: center;
            color: var(--black);
            font-size: 2.08vw;
            font-weight: 900;
        }

        /* 説明 */
        .contact-text {
            display: flex;
            justify-content: center;
            align-items: center;

            /* 文章 */
            p {
                color: var(--black);
                font-size: clamp(14px, .9vw, 18px);
                line-height: 1.7;
                font-weight: 500;
            }

            /* 人物画像 */
            .contact-image {
                width: 8.57vw;

                img {
                    width: 100%;
                }
            }
        }

        /* ボタン */
        .contact-buttons {
            display: flex;
            gap: 2.08vw;

            a {
                text-decoration: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 900;
            }

            /* 問い合わせボタン */
            .mail-btn {
                background: var(--yellow);
                color: var(--black);
                width: clamp(180px, 20vw, 384px);
                height: clamp(48px, 4vw, 80px);
                font-size: clamp(14px, 1.2vw, 24px);
                gap: 5px;
                border-radius: 50px;

                .material-symbols-outlined {
                    font-size: clamp(18px, 1.6vw, 32px);
                    transform: translateY(.15vw);
                }
            }

            /* 電話ボタン */
            .tel-btn {
                background: var(--green);
                color: var(--white);
                width: clamp(180px, 20vw, 384px);
                height: clamp(55px, 4vw, 80px);
                flex-direction: column;
                font-size: clamp(12px, 1vw, 20px);
                border-radius: 16px;

                span {
                    font-weight: 500;
                }

                .tel {
                    font-size: clamp(16px, 1.3vw, 26px);
                    font-weight: 900;
                    text-align: center;
                    line-height: 1.2;

                    .material-symbols-outlined {
                        font-size: clamp(18px, 1.6vw, 32px);
                        vertical-align: -4px;
                        margin-right: 4px;
                        display: inline-block;
                    }
                }
            }
        }
    }
}

/* =====================
製品紹介
===================== */

.product-section {
    text-align: center;
    padding: 0 0 clamp(60px, 8.33vw, 160px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);

    /* 見出し */
    h2 {
        color: var(--black);
        font-size: clamp(22px, 2.08vw, 40px);
        font-weight: 900;
    }

    /* 製品一覧 */
    .product-list {
        display: flex;
        justify-content: center;
        gap: clamp(20px, 2.08vw, 40px);

        .product-item {
            width: clamp(160px, 15.6vw, 300px);

            img {
                width: 100%;
                border-radius: 16px;
                box-shadow: 0px 0px 16px rgba(0, 127, 197, 0.3);
            }

            p {
                color: var(--black);
                font-size: clamp(14px, 1vw, 20px);
                font-weight: 500;
            }
        }
    }

    /* 製品こちらボタン */
    .product-btn {
        display: inline-flex;
        align-items: center;
        gap: clamp(6px, .4vw, 8px);
        padding: clamp(8px, .52vw, 16px) clamp(20px, 1.25vw, 24px);
        background: var(--green);
        color: var(--white);
        border-radius: 50px;
        font-size: clamp(14px, 1.25vw, 24px);
        font-weight: 900;

        .material-symbols-outlined {
            font-size: clamp(16px, 1vw, 20px);
        }
    }
}

/* =====================
フッター
===================== */

.footer {
    background: var(--green);
    color: var(--white);
    padding-block: 8.33vw;

    .footer-inner {
        width: 62.5vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        /* 左 */
        .footer-menu {
            display: flex;
            flex-direction: column;
            gap: 1vw;

            a {
                display: block;
                width: fit-content;
                color: var(--white);
                text-decoration: none;
                font-size: clamp(14px, 1vw, 18px);
                font-weight: 500;
                transition: .3s;

                &:hover {
                    color: var(--yellow);
                }
            }
        }

        /* 右 */
        .footer-content {
            text-align: right;

            h2 {
                color: var(--white);
                font-size: 2.08vw;
                font-weight: 900;
                letter-spacing: .05em;
            }

            .footer-catch {
                font-size: clamp(14px, 1.25vw, 24px);
                font-weight: 500;
                margin-bottom: 2.08vw;
            }

            .company {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: 2.08vw;
                font-size: clamp(12px, .9vw, 18px);
                font-weight: 500;

                .company-logo-name {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: .41vw;

                    img {
                        width: 1.25vw;
                        height: auto;
                    }
                }
            }
        }
    }
}

/* =====================
PC版は表示・非表示
===================== */

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

/* =====================
ヘッダーレスポンシブ
===================== */

@media screen and (width < 1120px) {

    .header {
        height: 100px;
        padding: 0 40px;

        .header-text {
            font-size: 20px;
            line-height: 1.7;
        }

        /* ハンバーガー */
        .hamburger {
            width: 30px;
            height: 21px;
            border: none;
            background: transparent;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            z-index: 200;

            span {
                width: 30px;
                height: 3px;
                background: var(--black);
                transition: .3s;
            }

            /* 開いた時 */
            &.active {
                span:nth-child(1) {
                    transform: translateY(9px) rotate(45deg);
                }

                span:nth-child(2) {
                    opacity: 0;
                }

                span:nth-child(3) {
                    transform: translateY(-9px) rotate(-45deg);
                }
            }
        }

        /* メニュー */
        .menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background: var(--lightgray);
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 104px 40px;
            gap: 16px;
            transition: .4s;
            z-index: 150;

            a {
                font-size: 18px;
                font-weight: 900;
                color: var(--black);
                padding: 10px 16px;


                /* お問い合わせ */
                &.header-contact {
                    .material-symbols-outlined {
                        transform: translateY(.2vw);
                    }
                }
            }

            /* 開いた状態 */
            &.open {
                right: 0;
            }
        }
    }
}

/* =====================
レスポンシブ768
===================== */

@media screen and (width < 768px) {

    /* =====================
    ヘッダー
    ===================== */

    .header {
        height: 25.5vw;
        padding: 0 10vw;

        .header-text {
            font-size: 5vw;
        }

        /* メニュー */
        .menu {
            gap: 4vw;

            a {
                font-size: 4.5vw;

                /* お問い合わせ */
                &.header-contact {
                    .material-symbols-outlined {
                        font-size: 6vw;
                        transform: translateY(.75vw);
                    }
                }
            }
        }
    }

    /* =====================
    メインビジュアル
    ===================== */

    .mainvisual {
        min-height: 216.8vw;
        background-image: url("../img/main-sp.png");

        .main-text {
            padding: 29.5vw 9vw 10vw;
            gap: 3vw;

            /* AI生産計画 */
            h1 {
                font-size: 14.2vw;
                -webkit-text-stroke: 3px var(--white);
            }

            /* 作成アプリ */
            h2 {
                font-size: 10vw;
                font-weight: 500;
            }

            /* 生産計画作成を自動化 */
            .catch {
                font-size: 6vw;
                padding: 2vw 10vw;
                width: 100%;
                text-align: center;
            }

            /* 夢のような業務自動化を実現 */
            h3 {
                font-size: 6vw;
            }

            /* 文章 */
            p {
                font-size: 3.5vw;
                line-height: 1.7;
            }

            /* お問い合わせ */
            .contact-btn {
                width: 100%;
                font-size: 5vw;
                margin-top: 2vw;
                padding-inline: initial;

                .material-symbols-outlined {
                    font-size: 6.5vw;
                    vertical-align: -5.5px;
                }
            }
        }
    }

    /* =====================
    課題提起セクション
    ===================== */

    .problem {
        padding: 20vw 4.2vw;

        /* 悩みボックス */
        .problem-box {
            width: 90vw;
            padding-top: 5vw;

            h2 {
                font-size: 6vw;
            }

            ul {
                display: flex;
                flex-direction: column;
                padding: 2.03vw 10vw 5.08vw;
                gap: 5vw;

                li {
                    font-size: 4vw;

                    .material-symbols-outlined {
                        font-size: 5.6vw;
                        transform: translateY(.4vw);
                    }
                }
            }
        }

        /* キャッチ */
        .problem-catch {

            h2 {
                font-size: 6vw;
                line-height: 1.5;

                span {
                    font-size: 10.17vw !important;
                }
            }

            h3 {
                font-size: 6vw;
                margin-top: 10vw;
            }

            .mock-image {
                margin-top: 10.17vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4.07vw;

                img {
                    margin: 0 auto;

                    &:first-child {
                        width: 63.61vw;
                    }

                    &:last-child {
                        width: 34.35vw;
                    }
                }
            }
        }
    }

    /* =====================
    メリット
    ===================== */

    .merit {
        padding: 34vw 0 0;

        /* 導入で得られる 4つのメリット */
        .section-title {
            display: flex;
            flex-direction: column;
            margin-bottom: 20vw;

            h2 {
                font-size: 6.10vw;
                bottom: 0;
                width: 100vw;
                text-align: center;
            }

            /* 英語のMerit文字 */
            .back-merit {
                font-size: 24.42vw;
                line-height: 24.42vw;
            }
        }

        .merit-list {
            width: 100%;
            gap: 20vw;

            .merit-item {
                flex-direction: column !important;
                height: initial;
                gap: 5vw;

                .merit-content {
                    width: 87.7%;

                    /* 見出し */
                    .merit-head {
                        gap: 16px;
                        padding: 2vw 4vw;
                        margin: 4px 0 16px;

                        .merit-icon {
                            height: 56px;
                        }

                        .merit-head-text {
                            font-size: 5vw;
                        }
                    }

                    /* 文章 */
                    p {
                        font-size: 3.56vw;
                        margin-bottom: 6.1vw;
                    }
                }

                /* 写真 */
                .merit-image {
                    width: 100%;
                }
            }
        }

        /* 倉庫業務を、もっとスマートに */
        .merit-catch {
            display: flex;
            flex-direction: column;
            margin-block: 20vw;
            padding-block: 4vw;
            width: 100%;

            h2 {
                font-size: 6.10vw;
                bottom: 0;
                text-align: center;
            }

            p {
                font-size: 4vw;
                line-height: 1.7em;
                margin-inline: initial;
            }
        }
    }

    /* =====================
    主な特徴セクション
    ===================== */

    .feature {
        padding-block: 20vw;

        .feature-box {
            width: 84vw;
            margin-inline: auto;
            padding: 0 0 8vw;
            border-radius: 3vw;

            h2 {
                font-size: 6.1vw;
                padding-block: 10vw 8vw;
                margin-bottom: 0;
            }

            .feature-list {
                display: flex;
                flex-direction: column;
                margin: 0;

                .feature-item {
                    width: 63.5vw;
                    margin-inline: auto;
                    text-align: center;
                    padding-bottom: 8vw;

                    /* PCの縦線を消す */
                    &::before {
                        display: none;
                    }

                    /* 横線 */
                    &:not(:last-child) {
                        border-bottom: 1px solid var(--green);
                        margin-bottom: 8vw;
                    }

                    h3 {
                        font-size: 5vw;
                        line-height: 1.7;
                        margin-bottom: 5vw;
                        min-height: auto;
                    }

                    /* 1～3（スクリーンショット） */
                    &:nth-child(-n + 3) {

                        img {
                            width: 52vw;
                            height: auto;
                            margin: 0 auto 5vw;
                        }
                    }

                    /* 4～6（アイコン） */
                    &:nth-child(n + 4) {

                        img {
                            width: 24vw;
                            height: 24vw;
                            object-fit: contain;
                            margin: 0 auto 5vw;
                        }
                    }

                    p {
                        font-size: 4vw;
                        line-height: 1.7;
                        margin: 0;
                    }
                }
            }
        }
    }

    /* =====================
    ご相談の流れ
    ===================== */

    .flow {
        padding-block: 20vw;

        .flow-box {
            width: 84.4vw;

            h2 {
                font-size: 6.1vw;
                padding-block: 4vw;
                margin-bottom: 10vw;
            }

            .flow-list {
                gap: 40px;

                .flow-item {
                    padding: 16px 8px;
                    gap: 4vw;
                    justify-content: space-evenly;

                    /* アイコン */
                    .flow-icon {
                        width: 26vw;
                        height: 16vw;
                    }
                }

                .flow-text {
                    width: 50vw;

                    /* 小見出し */
                    h3 {
                        font-size: 5vw !important;
                    }

                    p {
                        font-size: 4vw !important;
                        margin-top: 8px;
                    }
                }

                .arrow {
                    span {
                        font-size: 64px;
                    }
                }
            }
        }
    }

    /* =====================
    補助金セクション
    ===================== */

    .subsidy {
        padding: 20vw 4vw;

        .subsidy-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 5vw;

            /* グリッター */
            .glitter {
                width: 12vw;

                &:first-child {
                    margin-bottom: 4vw;
                }

                &:last-child {
                    margin-top: 6vw;
                }
            }

            /* 左バッジ */
            .subsidy-badge {
                width: 44.5vw;
            }

            /* 内容 */
            .subsidy-content {
                h2 {
                    font-size: 5vw;
                    margin-block: 4vw;
                }

                p {
                    font-size: 3.5vw;
                }

                .subsidy-button {
                    font-size: 4vw;
                    padding: 8px;
                    margin-top: 1.5vw;
                    border-radius: 8px;
                }
            }
        }
    }

    /* =====================
    アイキャッチセクション
    ===================== */

    .eye-catch {
        background-image: url("../img/eye-catch-sp.png");
        padding: 6vw;

        h1 {
            font-size: 5vw;
        }

        h2 {
            font-size: 3.5vw;
        }
    }

    /* =====================
    お問い合わせ
    ===================== */

    .contact-section {
        padding-block: 20vw;

        .contact-box {
            width: 91.5vw;
            padding-block: 10vw;
            gap: 10vw;

            /* 見出し */
            h2 {
                font-size: 5vw;
            }

            /* 説明 */
            .contact-text {
                flex-direction: column;
                gap: 10vw;
                width: 81.5vw;

                /* 文章 */
                p {
                    font-size: 3.5vw;
                }

                /* 人物画像 */
                .contact-image {
                    width: 32.5vw;
                }
            }

            /* ボタン */
            .contact-buttons {
                gap: 10vw;
                flex-direction: column;

                /* 問い合わせボタン */
                .mail-btn {
                    width: 81.5vw;
                    height: 12.5vw;
                    font-size: 5vw;

                    .material-symbols-outlined {
                        font-size: 7vw;
                        transform: translateY(.5vw);
                    }
                }

                /* 電話ボタン */
                .tel-btn {
                    width: 81.5vw;
                    height: 21.5vw;
                    font-size: 4.5vw;

                    .tel {
                        margin-top: 1vw;
                        font-size: 6vw;

                        .material-symbols-outlined {
                            font-size: 8vw;
                        }
                    }
                }
            }
        }
    }

    /* =====================
    フッター
    ===================== */

    .footer {
        padding-block: 10vw;

        .footer-inner {
            width: 87.5vw;
            flex-direction: column;
            align-items: stretch;
            gap: 10vw;

            /* 左 */
            .footer-menu {
                gap: 4vw;

                a {
                    display: block;
                    width: fit-content;
                    font-size: 4vw;
                }
            }

            /* 右 */
            .footer-content {

                h2 {
                    font-size: 5vw;
                }

                .footer-catch {
                    font-size: 3.5vw;
                    margin-bottom: 6vw;
                }

                .company {
                    font-size: 3vw;
                    justify-content: space-between;

                    .company-logo-name {
                        gap: 2vw;

                        img {
                            width: 6vw;
                        }
                    }
                }
            }
        }
    }

    /* =====================
    製品紹介
    ===================== */

    .product-section {
        gap: 10vw;
        padding: 10vw 0 18vw;

        /* 見出し */
        h2 {
            font-size: 6vw;
        }

        /* 製品一覧 */
        .product-list {
            gap: 4vw;

            .product-item {
                width: 40.5vw;

                p {
                    font-size: 3.5vw;
                }
            }
        }

        /* 製品こちらボタン */
        .product-btn {
            padding: 2.5vw 6vw;
            font-size: 5vw;

            .material-symbols-outlined {
                font-size: 4vw;
            }
        }
    }

    /* =====================
    レスポンシブ版は表示・非表示
    ===================== */

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}