:root {
    /* 色 */
    --black: #004688;
    --white: #FEFEFE;
    --lightgray: #EEF3F9;
    --blue: #007FC5;
    --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, rgba(0, 127, 197, 0.8) 0%, rgba(254, 254, 254, 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(--blue);
                color: var(--white);
            }

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

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

                &:hover {
                    background: var(--blue);
                    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);

        /* システム管理技術者を派遣します */
        h1 {
            font-size: clamp(76.8px, 6.66vw, 128px);
            font-weight: 900;
            color: var(--blue);
            /* 文字縁取り */
            -webkit-text-stroke: 8px var(--white);
            paint-order: stroke fill;
            line-height: 1.1em;
        }

        /* 詳細文章 */
        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: 64vw;
        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(--blue);
                }
            }
        }
    }

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

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

            span {
                font-size: 3.5vw;
            }

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

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

            /* IT支援カード */
            .support-card {
                width: 58vw;
                max-width: 1040px;
                margin: 40px auto;
                padding-block: 2vw;
                background: var(--white);
                border-radius: 12px;
                box-shadow: 0px 0px 16px rgba(0, 127, 197, 0.3);
                display: flex;

                .support-item {
                    flex: 1;
                    text-align: center;
                    padding: 0 1.5vw;

                    &:not(:last-child) {
                        border-right: 1px solid var(--blue);
                    }

                    h3 {
                        color: var(--black);
                        font-size: clamp(14px, .95vw, 18px);
                        font-weight: 900;
                        margin-bottom: 14px;
                    }

                    /* アイコン */
                    .support-icon {
                        width: clamp(48px, 3.5vw, 68px);
                        height: clamp(48px, 3.5vw, 68px);
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 0 auto 18px;
                    }

                    /* リスト */
                    ul {
                        list-style: none;
                        text-align: left;
                        display: inline-block;

                        li {
                            font-size: clamp(12px, .8vw, 16px);
                            line-height: 1.9;
                            color: var(--black);
                            position: relative;
                            padding-left: 12px;
                            font-weight: 500;

                            /* 箇条書きの点 */
                            &::before {
                                content: "・";
                                position: absolute;
                                left: 0;
                                color: var(--black);
                                font-weight: bold;
                                margin-left: -.2vw;
                            }
                        }
                    }
                }
            }

            /* 解決人々 */
            img {
                width: 13vw;
            }
        }
    }
}

/* =====================
実践的なIT支援セクション
===================== */

.practical-IT-support {
    padding: 8vw 0;
    background: var(--white);

    /* システム会社だからできる、実践的なIT支援 */
    .section-title {
        position: relative;
        bottom: 1.7vw;
        text-align: center;
        background: linear-gradient(270deg, #004688 0%, #007FC5 100%);
        width: 75vw;
        margin: 5vw auto;
        padding-block: 2vw;

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

        p {
            font-size: .93vw;
            color: var(--white);
            margin-top: 8px;
        }
    }

    .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(--blue);
                    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;
            }
        }
    }
}

/* =====================
ご支援事例セクション
===================== */

.example {
    padding: 8vw 0;
    background: var(--black);

    /* システム会社だからできる、実践的なIT支援 */
    .section-title {
        position: relative;
        bottom: 1.7vw;
        text-align: center;
        background: linear-gradient(270deg, #004688 0%, #007FC5 100%);
        width: 75vw;
        margin: 2vw auto 5vw;
        padding-block: 2vw;

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

        p {
            font-size: .93vw;
            color: var(--white);
            margin-top: 8px;
        }
    }

    .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(--blue);
            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;

                /* 英字 */
                .alphabet {
                    width: clamp(48px, 6vw, 90px);
                }

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

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

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

                /* 小見出し */
                h2 {
                    color: var(--white);
                    margin-top: 16px;
                    font-size: clamp(14px, 1.25vw, 20px);
                }

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

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

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

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

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

        h2 {
            background: var(--black);
            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(--white);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 2vw;
                box-shadow: 0px 0px 16px rgba(0, 127, 197, 0.3);

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

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

                .flow-text {

                    /* 小見出し */
                    h3 {
                        color: var(--blue);
                        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(--blue);
                    font-size: 3vw;
                    font-weight: 900;
                    line-height: 1;
                }
            }
        }
    }
}

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

.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);
    }

    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(--black);
                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(--blue);
        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(--black);
    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;
}

.tablet-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;
            }
        }
    }

    .tablet-only {
        display: block;
    }
}

/* =====================
レスポンシブ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;

            /* システム管理技術者を派遣します */
            h1 {
                font-size: 13vw;
                -webkit-text-stroke: 3px var(--white);
                margin-bottom: 16px;
            }

            /* 文章 */
            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: 89.56vw;
            padding-top: 5vw;

            h2 {
                font-size: 6vw;
            }

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

                li {
                    font-size: 4vw;

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

        /* キャッチ */
        .problem-catch {
            margin-top: 14vw;

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

                span {
                    font-size: 10vw;
                }
            }

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

                /* IT支援カード */
                .support-card {
                    width: 91vw;
                    padding: 6vw 0;
                    background: var(--white);
                    border-radius: 18px;
                    box-shadow: 0 0 18px rgba(0, 127, 197, .18);
                    display: flex;
                    flex-direction: column;

                    .support-item {
                        width: 63.6vw;
                        margin: 0 auto;
                        padding: 6vw 0;
                        border-right: none !important;

                        &:not(:last-child) {
                            border-bottom: 1px solid var(--blue);
                        }

                        h3 {
                            font-size: 5vw;
                            margin: initial;
                        }

                        .support-icon {
                            width: 80px;
                            height: 80px;
                            margin: 0 auto 8vw;

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

                        ul {
                            display: inline-block;
                            text-align: left;

                            li {
                                font-size: 4vw;
                                line-height: 1.9;

                                &::before {
                                    margin-left: -2.5vw;
                                }
                            }
                        }
                    }
                }

                /* 人物 */
                img {
                    width: 42vw;
                    margin-top: 8vw;
                }
            }
        }
    }

    /* =====================
    実践的なIT支援セクション
    ===================== */

    .practical-IT-support {
        padding: 30vw 0 20vw;

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

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

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

        .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-block: 4px;

                        /* アイコン */
                        .merit-icon {
                            height: 48px;
                        }

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

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

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

    /* =====================
    ご支援事例セクション
    ===================== */

    .example {
        padding: 20vw 0;

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

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

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

        .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-block: 4px;

                        .merit-icon {
                            height: 56px;
                        }

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

                    /* 小見出し */
                    h2 {
                        margin-block: 16px;
                        font-size: 4.3vw;
                    }

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

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

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

    .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;
                    justify-content: space-evenly;

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

                    .flow-text {
                        width: 50vw;
                    }
                }

                .flow-text {

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

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

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

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

    .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;
    }

    .tablet-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}