@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

/* MV */
.p-mv__bg {
    width: calc((100vw / var(--vw-large))*1278);
    margin-left: auto;

    @media(max-width:768px) {
        width: 100%;
        margin-left: initial;
    }
}

/* News Section Styles */
.p-news {
    background-color: var(--color-white);
    /* 上下の余白は .u-section-padding で管理 */
    width: calc((100vw / var(--vw-large))*696);
    margin: calc((100vw / var(--vw-large))*96) auto;

    @media(max-width:768px) {
        width: calc((100vw / var(--vw-small))*342);
        margin: calc((100vw / var(--vw-small))*60) auto;
    }

    .p-news__inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        /* 上揃え */

        @media(max-width:768px) {
            flex-direction: column;
        }
    }

    /* タイトルエリア */
    .p-news__header {
        width: calc((100vw / var(--vw-large)) * 150);
        /* 左側の幅確保 */
        flex-shrink: 0;

        @media(max-width:768px) {
            width: 100%;
            margin-bottom: calc((100vw / var(--vw-small))*40);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*30);
            font-weight: 900;
            text-align: left;

            @media(max-width:768px) {
                font-size: calc((100vw / var(--vw-small))*24);
                line-height: normal;
            }
        }
    }

    .c-section-title-underline {
        display: block;
        width: calc((100vw / var(--vw-large)) * 82);
        /* 線の長さ */
        height: 3px;
        /* 線の太さ */
        /* 修正箇所: グラデーションで2色を半分ずつ表現 */
        background: linear-gradient(to right, #00A310 50%, #93D500 50%);
        margin-top: calc((100vw / var(--vw-large)) * 10);

        @media(max-width:768px) {
            width: calc((100vw / var(--vw-small))*96);
            margin-top: calc((100vw / var(--vw-small))*10);
        }
    }

    /* リストエリア */
    .p-news__body {
        width: calc((100vw / var(--vw-large)) * 509);
        /* 残りの幅 */
        flex-grow: 1;

        @media(max-width:768px) {
            width: 100%;
        }
    }

    .p-news__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .p-news__item {
        border-bottom: 1px solid #e0e0e0;
        /* 下の線 */
    }

    .p-news__link {
        display: flex;
        align-items: center;
        padding: calc((100vw / var(--vw-large)) * 10) 0;
        text-decoration: none;
        color: var(--color-text-body);
        transition: background-color 0.3s;
        position: relative;

        @media(max-width:768px) {
            padding: calc((100vw / var(--vw-small))*10) 0;
        }
    }

    /* メタ情報（日付とカテゴリ） */
    .p-news__meta {
        display: flex;
        align-items: center;
        /* 日付+カテゴリの幅確保 */
        flex-shrink: 0;
        gap: calc((100vw / var(--vw-large)) * 20);
        width: calc((100vw / var(--vw-large))*180);

        @media(max-width:768px) {
            gap: calc((100vw / var(--vw-small))*20);
            width: calc((100vw / var(--vw-small))*180);
        }
    }

    .p-news__date {
        font-family: var(--font-zenkaku);
        /* 数字は欧文フォントが良い場合 */
        font-size: calc((100vw / var(--vw-large)) * 14);
        color: var(--color-text-light);

        @media(max-width:768px) {
            font-size: calc((100vw / var(--vw-small))*14);
        }
    }

    .p-news__cat {
        display: inline-block;
        font-size: calc((100vw / var(--vw-large)) * 12);
        font-family: var(--font-zenkaku);
        font-weight: 400;
        padding: calc((100vw / var(--vw-large)) * 4) calc((100vw / var(--vw-large)) * 12);
        background-color: #eee;
        /* デフォルト背景 */
        color: #555;
        border-radius: 2px;
        line-height: 1.2;

        @media(max-width:768px) {
            font-size: calc((100vw / var(--vw-small))*12);
            padding: calc((100vw / var(--vw-small)) * 4) calc((100vw / var(--vw-small)) * 12);

        }
    }

    /* カテゴリスラッグに応じた色分け（拡張性） */
    /* .p-news__cat[data-slug="news"] {
    background-color: rgba(92, 181, 49, 0.1);
    color: var(--color-primary);
}

.p-news__cat[data-slug="info"] {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
} */

    /* 記事タイトル */
    .p-news__title {
        font-size: calc((100vw / var(--vw-large)) * 16);
        font-family: var(--font-zenkaku);
        font-weight: 400;
        margin: 0;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 長すぎる場合は...にする */
        padding-right: calc((100vw / var(--vw-large)) * 40);
        /* 矢印分の余白 */
        text-align: left;

        @media(max-width:768px) {
            font-size: calc((100vw / var(--vw-small))*16);
            padding-right: calc((100vw / var(--vw-small))*40);
            line-height: normal;
        }
    }

    /* リンクの矢印 */
    .p-news__link::after {
        content: "";
        position: absolute;
        right: calc((100vw / var(--vw-large)) * 10);
        width: calc((100vw / var(--vw-large)) * 8);
        height: calc((100vw / var(--vw-large)) * 8);
        border-top: 2px solid var(--color-text-body);
        border-right: 2px solid var(--color-text-body);
        transform: rotate(45deg);
        transition: right 0.3s;

        @media(max-width:768px) {
            right: calc((100vw / var(--vw-small)) * 10);
            width: calc((100vw / var(--vw-small)) * 8);
            height: calc((100vw / var(--vw-small)) * 8);
        }
    }

    .p-news__link:hover::after {
        right: 0;
        /* ホバーで少し右へ動く */
    }
}

/* Reasons Section Styles (Native CSS Nesting) */
.p-reasons {
    position: relative;
    background-color: var(--color-bg-light);
    padding-top: calc((100vw / var(--vw-large)) * 100);
    padding-bottom: calc((100vw / var(--vw-large)) * 100);
    width: calc((100vw / var(--vw-large))*1180);
    border-radius: calc((100vw / var(--vw-large))*60) 0 0 calc((100vw / var(--vw-large))*60);
    -webkit-border-radius: calc((100vw / var(--vw-large))*60) 0 0 calc((100vw / var(--vw-large))*60);
    -moz-border-radius: calc((100vw / var(--vw-large))*60) 0 0 calc((100vw / var(--vw-large))*60);
    -ms-border-radius: calc((100vw / var(--vw-large))*60) 0 0 calc((100vw / var(--vw-large))*60);
    -o-border-radius: calc((100vw / var(--vw-large))*60) 0 0 calc((100vw / var(--vw-large))*60);
    margin-left: auto;

    @media(max-width:768px) {
        padding-top: calc((100vw / var(--vw-small)) * 48);
        padding-bottom: calc((100vw / var(--vw-small)) * 48);
        width: calc((100vw / var(--vw-small))*370);
        border-radius: calc((100vw / var(--vw-small))*60) 0 0 calc((100vw / var(--vw-small))*60);
        -webkit-border-radius: calc((100vw / var(--vw-small))*60) 0 0 calc((100vw / var(--vw-small))*60);
        -moz-border-radius: calc((100vw / var(--vw-small))*60) 0 0 calc((100vw / var(--vw-small))*60);
        -ms-border-radius: calc((100vw / var(--vw-small))*60) 0 0 calc((100vw / var(--vw-small))*60);
        -o-border-radius: calc((100vw / var(--vw-small))*60) 0 0 calc((100vw / var(--vw-small))*60);
    }

    /*背景の巨大文字装飾*/
    .p-reasons__bg-text {
        position: absolute;
        font-family: var(--font-en);
        font-weight: bold;
        font-size: calc((100vw / var(--vw-large)) * 75);
        color: #EBEBEB;
        white-space: nowrap;
        z-index: 0;
        pointer-events: none;
        top: calc((100vw / var(--vw-large))*-20);
        right: calc((100vw / var(--vw-large))*180);
        font-style: italic;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*35);
            top: calc((100vw / var(--vw-small))*-10);
            right: calc((100vw / var(--vw-small))*10);
        }
    }

    /* セクションヘッダー */
    .p-reasons__header {
        position: relative;
        z-index: 1;
        margin-bottom: calc((100vw / var(--vw-large)) * 30);

        @media (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*50);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*30);
            font-weight: 900;
            text-align: left;
            margin-left: calc((100vw / var(--vw-large))*72);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*24);
                line-height: normal;
                margin-left: calc((100vw / var(--vw-small))*24);
            }
        }

        .c-section-title-underline {
            display: block;
            width: calc((100vw / var(--vw-large)) * 82);
            /* 線の長さ */
            height: 3px;
            /* 線の太さ */
            /* 修正箇所: グラデーションで2色を半分ずつ表現 */
            background: linear-gradient(to right, #00A310 50%, #93D500 50%);
            margin-top: calc((100vw / var(--vw-large)) * 10);
            margin-left: calc((100vw / var(--vw-large))*72);

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*62);
                margin-top: calc((100vw / var(--vw-small))*10);
                margin-left: calc((100vw / var(--vw-small))*24);
            }

        }
    }

    /* リストコンテナ */
    .p-reasons__list {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: calc((100vw / var(--vw-large)) * 60);

        @media (max-width: 768px) {
            gap: calc((100vw / var(--vw-small))*60);
        }
    }

    /* ----------------------------------------------------
     Reason Item Block
     ---------------------------------------------------- */
    .p-reason-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (max-width: 768px) {
            flex-direction: column;
        }

        /* コンテンツ側（左） */
        .p-reason-item__content {
            width: 45%;
            text-align: left;

            @media (max-width: 768px) {
                width: 100%;
                margin-bottom: calc((100vw / var(--vw-small))*20);
            }
        }

        /* 見出し：選ばれる理由 XX */
        .p-reason-item__head {
            display: flex;
            align-items: center;
            font-family: var(--font-ja);
            font-weight: bold;
            color: var(--color-text-body);
            margin-bottom: calc((100vw / var(--vw-large)) * 20);

            @media (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*24);
                margin-left: calc((100vw / var(--vw-small))*24);
            }
        }

        .border {
            background: #A3A3A3;
            display: block;
            height: 1px;
            width: calc((100vw / var(--vw-large))*46);
            margin-right: calc((100vw / var(--vw-large))*24);

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*46);
                margin-left: calc((100vw / var(--vw-small))*10);
            }
        }

        @media (max-width: 768px) {
            .border.pc {
                display: none;
            }

            .border.sp {
                display: block !important;
            }
        }

        .border.sp {
            display: none;
        }


        .p-reason-item__label {
            font-size: calc((100vw / var(--vw-large)) * 27);
            margin-right: calc((100vw / var(--vw-large))*7);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*27);
                margin-right: calc((100vw / var(--vw-small))8);
            }
        }

        .p-reason-item__num {
            font-family: var(--font-en);
            font-size: calc((100vw / var(--vw-large)) * 43);
            color: var(--color-primary-light);
            line-height: 1;
            font-style: italic;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*43);
            }
        }

        /* サブタイトル */
        .p-reason-item__sub {
            font-size: calc((100vw / var(--vw-large)) * 18);
            color: var(--color-primary-light);
            margin-bottom: calc((100vw / var(--vw-large)) * 8);
            margin-left: calc((100vw / var(--vw-large))*72);
            font-weight: bold;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*18);
                margin-bottom: calc((100vw / var(--vw-small)) * 8);
                margin-left: calc((100vw / var(--vw-small))*24);
                letter-spacing: 0;
                line-height: normal;
            }
        }

        /* 説明文 */
        .p-reason-item__desc {
            font-family: var(--font-zenkaku);
            font-size: calc((100vw / var(--vw-large)) * 16);
            line-height: 1.8;
            margin-bottom: calc((100vw / var(--vw-large)) * 30);
            margin-left: calc((100vw / var(--vw-large))*72);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small)) * 16);
                margin-bottom: calc((100vw / var(--vw-small)) * 24);
                margin-left: calc((100vw / var(--vw-small))*24);
            }
        }

        /* リスト形式の説明文 */
        .p-reason-item__list-desc {
            list-style: none;
            padding: 0;
            margin: 0 0 calc((100vw / var(--vw-large)) * 30) 0;
            margin-left: calc((100vw / var(--vw-large))*72);
            font-size: calc((100vw / var(--vw-large)) * 16);
            line-height: 1.8;

            @media (max-width: 768px) {
                margin: 0 0 calc((100vw / var(--vw-small)) * 24) 0;
                margin-left: calc((100vw / var(--vw-small))*24);
                font-size: calc((100vw / var(--vw-small)) * 16);
            }

            li {
                position: relative;
                padding-left: 1em;
                font-size: calc((100vw / var(--vw-large)) * 15);
                line-height: 1.8;
                margin-bottom: calc((100vw / var(--vw-large))*5);

                @media (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small)) * 14);
                    margin-bottom: calc((100vw / var(--vw-small))*5);
                }

                &::before {
                    content: "・";
                    position: absolute;
                    left: 0;
                }
            }
        }

        /* 「詳しく見る」ボタン */
        .c-btn-circle {
            display: inline-flex;
            align-items: center;
            font-size: calc((100vw / var(--vw-large)) * 14);
            font-weight: bold;
            color: var(--color-text-body);
            text-decoration: none;
            transition: opacity 0.3s;
            margin-top: calc((100vw / var(--vw-large)) * 10);
            margin-left: calc((100vw / var(--vw-large))*72);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small)) * 14);
                margin-top: calc((100vw / var(--vw-small)) * 10);
                margin-left: calc((100vw / var(--vw-small))*24);
            }

            /* 黒い円と白い矢印 */
            &::after {
                content: "";
                display: inline-block;
                width: calc((100vw / var(--vw-large)) * 32);
                height: calc((100vw / var(--vw-large)) * 32);
                background-color: #222;
                /* 黒背景 */
                border-radius: 50%;
                margin-left: calc((100vw / var(--vw-large)) * 15);
                /* 白い矢印 (SVGデータ) */
                background-image: url(../img/common/white_arrow.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: calc((100vw / var(--vw-large))*10);
                /* 矢印のサイズ調整 */

                @media (max-width: 768px) {
                    width: calc((100vw / var(--vw-small)) * 44);
                    height: calc((100vw / var(--vw-small)) * 44);
                    margin-left: calc((100vw / var(--vw-small)) * 10);
                    background-size: calc((100vw / var(--vw-small))*10);
                }
            }

            &:hover {
                opacity: 0.7;
            }
        }

        .border_g {
            background-color: #21BC30;
            height: 2px;
            width: calc((100vw / var(--vw-large))*82);
            margin-left: calc((100vw / var(--vw-large))*72);

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*72);
                margin-left: calc((100vw / var(--vw-small))*24);
            }
        }

        /* 画像側（右） */
        .p-reason-item__img {
            width: calc((100vw / var(--vw-large))*598);

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*360);
                margin-left: auto;
            }
        }
    }
}

/* Service Section Styles */
.p-service {
    position: relative;
    background-color: var(--color-white);
    padding-top: calc((100vw / var(--vw-large)) * 140);
    padding-bottom: calc((100vw / var(--vw-large)) * 75);

    @media (max-width: 768px) {
        padding-top: calc((100vw / var(--vw-small)) * 100);
        padding-bottom: calc((100vw / var(--vw-small)) * 75);
    }

    /* 背景の装飾テキスト */
    .p-service__bg-text {
        position: absolute;
        top: calc((100vw / var(--vw-large)) * 60);
        right: calc((100vw / var(--vw-large))*180);
        text-align: right;
        font-family: var(--font-en);
        font-weight: bold;
        font-size: calc((100vw / var(--vw-large)) * 50);
        line-height: 1.1;
        color: #EBEBEB;
        /* 非常に薄いグレー */
        z-index: 0;
        pointer-events: none;
        font-style: italic;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*35);
            top: calc((100vw / var(--vw-small))*20);
            right: calc((100vw / var(--vw-small))*10);
        }
    }

    /* インナーレイアウト */
    .p-service__inner {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: calc((100vw / var(--vw-large))*1000);
        margin: 0 auto;
        text-align: left;

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*350);
            flex-direction: column;
        }
    }

    /* 左カラム：メイン */
    .p-service__main {
        width: calc((100vw / var(--vw-large))*583);
        /* 左側広め */

        @media (max-width: 768px) {
            width: 100%;
            margin-bottom: calc((100vw / var(--vw-small))*30);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*30);
            font-weight: 900;
            text-align: left;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*30);
                line-height: normal;
            }
        }

        .c-section-title-underline {
            display: block;
            width: calc((100vw / var(--vw-large)) * 82);
            /* 線の長さ */
            height: 3px;
            /* 線の太さ */
            /* 修正箇所: グラデーションで2色を半分ずつ表現 */
            background: linear-gradient(to right, #00A310 50%, #93D500 50%);
            margin-top: calc((100vw / var(--vw-large)) * 20);
            margin-bottom: calc((100vw / var(--vw-large))*46);

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*62);
                margin-top: calc((100vw / var(--vw-small))*10);
                margin-bottom: calc((100vw / var(--vw-small))*24);
            }
        }

        /* 本文 */
        .p-service__desc {
            line-height: 2;
            color: var(--color-text-body);
            margin-bottom: calc((100vw / var(--vw-large)) * 71);

            @media (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*24);
                font-size: calc((100vw / var(--vw-small))*14);
            }
        }
    }

    /* 右カラム：サイドナビ */
    .p-service__side {
        width: calc((100vw / var(--vw-large))*335);
        margin-top: calc((100vw / var(--vw-large))*100);

        @media (max-width: 768px) {
            margin-top: 0;
            width: calc((100vw / var(--vw-small))*350);
        }
    }

    /* 「詳しく見る」ボタン */
    .c-btn-circle {
        display: inline-flex;
        align-items: center;
        font-size: calc((100vw / var(--vw-large)) * 14);
        font-weight: bold;
        color: var(--color-text-body);
        text-decoration: none;
        transition: opacity 0.3s;
        margin-top: calc((100vw / var(--vw-large)) * 10);
        margin-left: calc((100vw / var(--vw-large))*72);

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small)) * 14);
            margin-top: calc((100vw / var(--vw-small)) * 10);
            margin-left: 0;
        }

        /* 黒い円と白い矢印 */
        &::after {
            content: "";
            display: inline-block;
            width: calc((100vw / var(--vw-large)) * 32);
            height: calc((100vw / var(--vw-large)) * 32);
            background-color: #222;
            /* 黒背景 */
            border-radius: 50%;
            margin-left: calc((100vw / var(--vw-large)) * 15);
            /* 白い矢印 (SVGデータ) */
            background-image: url(../img/common/white_arrow.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: calc((100vw / var(--vw-large))*10);
            /* 矢印のサイズ調整 */

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small)) * 44);
                height: calc((100vw / var(--vw-small)) * 44);
                margin-left: calc((100vw / var(--vw-small)) * 10);
                background-size: calc((100vw / var(--vw-small))*10);
            }
        }

        &:hover {
            opacity: 0.7;
        }
    }
}

/* ============================================
   Section: Voice
============================================ */
.p-voice {
    background-image: url(../img/top/voice_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(60 / var(--vw-small) * 100vw);
    padding-bottom: calc(60 / var(--vw-small) * 100vw);

    @media (max-width: 768px) {
        padding-top: calc(60 / var(--vw-small) * 100vw);
        padding-bottom: calc(60 / var(--vw-small) * 100vw);
    }

    .p-voice__header {
        margin-bottom: calc((100vw / var(--vw-large))*45);

        @media (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*45);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*30);
            font-weight: 900;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*30);
            }
        }

        .c-section-title-underline {
            display: block;
            width: calc((100vw / var(--vw-large)) * 82);
            height: 3px;
            background: linear-gradient(to right, #00A310 50%, #93D500 50%);
            margin: calc((100vw / var(--vw-large)) * 10) auto 0;

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small)) * 62);
                margin-top: calc((100vw / var(--vw-small)) * 10);
                margin-bottom: calc((100vw / var(--vw-small)) * 24);
            }
        }
    }

    .p-voice-btn {
        width: calc((100vw / var(--vw-large))*150);
        margin: 0 auto;
        position: relative;

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*150);
        }

        /* 「詳しく見る」ボタン */
        .c-btn-circle {
            display: inline-flex;
            align-items: center;
            font-size: calc((100vw / var(--vw-large)) * 14);
            font-weight: bold;
            color: var(--color-text-body);
            text-decoration: none;
            transition: opacity 0.3s;
            margin-top: calc((100vw / var(--vw-large)) * 10);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small)) * 14);
                margin-top: calc((100vw / var(--vw-small)) * 10);
                margin-left: 0;
            }

            /* 黒い円と白い矢印 */
            &::after {
                content: "";
                display: inline-block;
                width: calc((100vw / var(--vw-large)) * 32);
                height: calc((100vw / var(--vw-large)) * 32);
                background-color: #222;
                /* 黒背景 */
                border-radius: 50%;
                margin-left: calc((100vw / var(--vw-large)) * 15);
                /* 白い矢印 (SVGデータ) */
                background-image: url(../img/common/white_arrow.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: calc((100vw / var(--vw-large))*10);
                /* 矢印のサイズ調整 */

                @media (max-width: 768px) {
                    width: calc((100vw / var(--vw-small)) * 44);
                    height: calc((100vw / var(--vw-small)) * 44);
                    margin-left: calc((100vw / var(--vw-small)) * 10);
                    background-size: calc((100vw / var(--vw-small))*10);
                }
            }

            &:hover {
                opacity: 0.7;
            }
        }

    }


    .border_g {
        background-color: #21BC30;
        height: 2px;
        width: calc((100vw / var(--vw-large))*82);
        position: absolute;
        left: calc((100vw / var(--vw-large))*10);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*82);
            left: calc((100vw / var(--vw-small))*8);
        }
    }

    .p-voice-slider {
        position: relative;
        overflow: visible;
        padding-bottom: calc((100vw / var(--vw-large))*40);
        /* ナビボタンがスライドに重ならないよう少し余白を調整する場合 */
        /* padding-inline: 40px; */

        @media (max-width: 768px) {
            padding-bottom: calc((100vw / var(--vw-small))*40);

        }

        /* --- ナビゲーションボタンのカスタムデザイン --- */
        .swiper-button-prev,
        .swiper-button-next {
            /* Flexboxで中の画像を中央寄せ */
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc((100vw / var(--vw-large))*50);
            height: calc((100vw / var(--vw-large))*50);
            background-color: #21BC30;
            border-radius: 50%;
            transition: opacity 0.3s, background-color 0.3s;

            /* デフォルトのSwiper矢印を完全に消す */
            &::after {
                content: none;
            }

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*50);
                height: calc((100vw / var(--vw-small))*50);
            }


            /* 中の画像のサイズ調整 */
            img {
                width: calc((100vw / var(--vw-large))*10);
                /* 任意のサイズに調整してください */
                height: auto;
                /* 画像がクリックイベントを邪魔しないようにする場合 */
                pointer-events: none;

                @media (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*10);

                }
            }

            &:hover {
                opacity: 0.8;
                background-color: var(--color-primary-dark);
            }
        }

        /* ボタンの位置微調整（カードの外側に配置） */
        .swiper-button-prev {
            left: calc((100vw / var(--vw-large))*240);

            @media (max-width: 768px) {
                left: calc((100vw / var(--vw-small))*20);
            }
        }

        .swiper-button-next {
            right: calc((100vw / var(--vw-large))*249);

            @media (max-width: 767px) {
                right: calc((100vw / var(--vw-small))*20);
            }
        }
    }

}

/* ============================================
   Component: Voice Card
============================================ */
.p-voice-card {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -ms-transition: transform 0.3s;
    -o-transition: transform 0.3s;

    &:hover {
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }

    .thumb {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: 10px;
        overflow: hidden;

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

    .body {
        position: relative;
        width: calc((100vw / var(--vw-large))*252);
        height: calc((100vw / var(--vw-large))*210);
        background-color: var(--color-white);
        border-radius: calc((100vw / var(--vw-large))*10);
        padding: calc((100vw / var(--vw-large))*20) 0;
        margin: calc((100vw / var(--vw-large))*-30) auto 0;
        box-shadow: 0 calc((100vw / var(--vw-large))*10) calc((100vw / var(--vw-large))*25) rgba(0, 0, 0, 0.05);
        z-index: 1;
        display: flex;
        align-items: center;

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*252);
            height: calc((100vw / var(--vw-small))*210);
            border-radius: calc((100vw / var(--vw-small))*10);
            padding: calc((100vw / var(--vw-small))*20) 0;
            margin: calc((100vw / var(--vw-small))*-30) auto 0;
            box-shadow: 0 calc((100vw / var(--vw-small))*10) calc((100vw / var(--vw-small))*25) rgba(0, 0, 0, 0.05);
            -webkit-border-radius: calc((100vw / var(--vw-small))*10);
            -moz-border-radius: calc((100vw / var(--vw-small))*10);
            -ms-border-radius: calc((100vw / var(--vw-small))*10);
            -o-border-radius: calc((100vw / var(--vw-small))*10);
        }

        .content {
            width: calc((100vw / var(--vw-large))*200);
            margin: 0 auto;

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*200);
            }
        }

        .title {
            font-size: calc((100vw / var(--vw-large))*16);
            font-weight: 700;
            font-family: var(--font-zenkaku);
            line-height: 1.5;
            letter-spacing: 0;
            text-align: left;
            color: var(--color-text-body);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            padding-bottom: calc((100vw / var(--vw-large))*62);
            border-bottom: 1px solid #21BC30;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*16);
                padding-bottom: calc((100vw / var(--vw-small))*30);
            }
        }

        .meta {
            font-size: calc((100vw / var(--vw-large))*14);
            margin-top: calc((100vw / var(--vw-large))*20);
            color: var(--color-text-light);
            text-align: left;

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*14);
                margin-top: calc((100vw / var(--vw-small))*20);
            }
        }
    }
}

/* ============================================
   Section: Service List (PC Style)
============================================ */

.p-service-list {
    /* 上下余白: 120px */
    padding-top: calc((100vw / var(--vw-large)) * 120);
    padding-bottom: calc((100vw / var(--vw-large)) * 100);

    @media (max-width: 768px) {
        padding-top: calc((100vw / var(--vw-small))*60);
        padding-bottom: calc((100vw / var(--vw-small))*100);
    }

    .l-container {
        width: calc((100vw / var(--vw-large))*1050);
        margin: 0 auto calc((100vw / var(--vw-large))*83);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*342);
            margin: 0 auto calc((100vw / var(--vw-small))*30);
        }
    }

    .p-service-list__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* 左右カラム間の余白: 60px */
        gap: calc((100vw / var(--vw-large)) * 80);

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: initial;
        }
    }

    /* --- 左側コンテンツエリア --- */
    .p-service-list__content {
        width: calc((100vw / var(--vw-large))*471);

        @media (max-width: 768px) {
            width: 100%;
        }
    }

    .p-service-list__header {
        margin-bottom: calc((100vw / var(--vw-large))*46);

        @media (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*24);
        }
    }

    /* リスト全体 */
    .p-service-list__items {
        list-style: none;
        padding: 0;
        margin: 0;
        /* 下余白: 40px */
        margin-bottom: calc((100vw / var(--vw-large)) * 12);

        @media (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*12);
        }

        .p-service-list__item {
            position: relative;
            font-weight: 700;
            line-height: 1.4;
            /* フォントサイズ: 28px */
            font-size: calc((100vw / var(--vw-large)) * 28);
            /* 左パディング（アイコン分）: 25px */
            padding-left: calc((100vw / var(--vw-large)) * 25);
            /* リスト間余白: 15px */
            margin-bottom: calc((100vw / var(--vw-large)) * 15);

            @media (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small)) * 28);
                /* 左パディング（アイコン分）: 25px */
                padding-left: calc((100vw / var(--vw-small)) * 20);
                /* リスト間余白: 15px */
                margin-bottom: calc((100vw / var(--vw-small)) * 15);
            }

            &:last-child {
                margin-bottom: 0;
            }

            /* 緑の正方形アイコン */
            &::before {
                content: "";
                position: absolute;
                /*位置調整*/
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                background-color: var(--color-primary-light);
                /*サイズ:;
                10px*/
                width: calc((100vw / var(--vw-large)) * 10);
                height: calc((100vw / var(--vw-large)) * 10);
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);

                @media (max-width: 768px) {
                    width: calc((100vw / var(--vw-small)) * 10);
                    height: calc((100vw / var(--vw-small)) * 10);
                }
            }

            h2 {
                font-size: calc((100vw / var(--vw-large))*30);
                font-weight: 900;
                text-align: left;

                @media (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*28);
                    letter-spacing: 0;
                }
            }
        }
    }

    .c-section-title-underline {
        display: block;
        width: calc((100vw / var(--vw-large)) * 82);
        /* 線の長さ */
        height: 3px;
        /* 線の太さ */
        /* 修正箇所: グラデーションで2色を半分ずつ表現 */
        background: linear-gradient(to right, #00A310 50%, #93D500 50%);
        margin-top: calc((100vw / var(--vw-large)) * 10);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*82);
            margin-top: calc((100vw / var(--vw-small))*10);
        }
    }

    /* 説明テキスト */
    .p-service-list__desc {
        /* フォントサイズ: 16px */
        font-size: calc((100vw / var(--vw-large)) * 16);
        line-height: 1.8;
        /* 下余白: 40px */
        margin-bottom: calc((100vw / var(--vw-large)) * 40);
        font-family: var(--font-zenkaku);
        font-weight: bold;
        text-align: left;
        letter-spacing: 0;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*16);
            margin-bottom: calc((100vw / var(--vw-small))*24);
        }
    }


    /* 「詳しく見る」ボタン */
    .c-btn-circle {
        display: inline-flex;
        align-items: center;
        font-size: calc((100vw / var(--vw-large)) * 14);
        font-weight: bold;
        color: var(--color-text-body);
        text-decoration: none;
        transition: opacity 0.3s;
        margin-top: calc((100vw / var(--vw-large)) * 10);
        margin-left: 0;
        width: 100%;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small)) * 14);
            margin-top: calc((100vw / var(--vw-small)) * 10);
            margin-left: 0;
        }

        /* 黒い円と白い矢印 */
        &::after {
            content: "";
            display: inline-block;
            width: calc((100vw / var(--vw-large)) * 32);
            height: calc((100vw / var(--vw-large)) * 32);
            background-color: #222;
            /* 黒背景 */
            border-radius: 50%;
            margin-left: calc((100vw / var(--vw-large)) * 15);

            /* 白い矢印 (SVGデータ) */
            background-image: url(../img/common/white_arrow.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: calc((100vw / var(--vw-large))*10);
            /* 矢印のサイズ調整 */

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small)) * 44);
                height: calc((100vw / var(--vw-small)) * 44);
                margin-left: calc((100vw / var(--vw-small)) * 10);
                background-size: calc((100vw / var(--vw-small)) * 10);
            }
        }

        &:hover {
            opacity: 0.7;
        }
    }

    .border_g {
        background-color: #21BC30;
        height: 2px;
        width: calc((100vw / var(--vw-large))*82);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small)) * 82);
            left: calc((100vw / var(--vw-small)) * 8);
        }
    }

    /* --- 右側イラストエリア --- */
    .p-service-list__img {
        margin: 0;
        width: calc((100vw / var(--vw-large))*498);

        @media (max-width: 768px) {
            width: 100%;
        }

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

    .p-service-list-slider {
        position: relative;
        overflow: visible;

        /* --- ナビゲーションボタンのカスタムデザイン --- */
        .swiper-button-prev,
        .swiper-button-next {
            /* Flexboxで中の画像を中央寄せ */
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc((100vw / var(--vw-large))*50);
            height: calc((100vw / var(--vw-large))*50);
            background-color: #21BC30;
            border-radius: 50%;
            transition: opacity 0.3s, background-color 0.3s;

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*50);
                height: calc((100vw / var(--vw-small))*50);
            }

            /* デフォルトのSwiper矢印を完全に消す */
            &::after {
                content: none;

            }

            /* 中の画像のサイズ調整 */
            img {
                width: calc((100vw / var(--vw-large))*10);
                /* 任意のサイズに調整してください */
                height: auto;
                /* 画像がクリックイベントを邪魔しないようにする場合 */
                pointer-events: none;

                @media (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*10);
                }
            }

            &:hover {
                opacity: 0.8;
                background-color: var(--color-primary-dark);
            }
        }

        /* ボタンの位置微調整（カードの外側に配置） */
        .swiper-button-prev {
            left: calc((100vw / var(--vw-large))*240);

            /* コンテナからはみ出させる */
            @media (max-width: 767px) {
                left: calc((100vw / var(--vw-small))*20);
                /* SPは内側へ */
            }
        }

        .swiper-button-next {
            right: calc((100vw / var(--vw-large))*249);

            @media (max-width: 767px) {
                right: calc((100vw / var(--vw-small))*20);
            }
        }
    }

}

/* ============================================
   Section: Company Profile (PC Style)
============================================ */
.p-company {
    position: relative;
    /* 上余白: 100px */
    padding-top: calc((100vw / var(--vw-large)) * 100);
    /* 下余白: 200px (ビル画像の高さ分を確保) */
    padding-bottom: calc((100vw / var(--vw-large)) * 200);
    /* オーバーフロー対策（必要に応じて） */
    overflow: hidden;

    @media (max-width: 768px) {
        padding-top: 0;
        padding-bottom: calc((100vw / var(--vw-small))*30);
    }

    .l-container {
        width: calc((100vw / var(--vw-large))*1000);
        margin: 0 auto;

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*350);
        }
    }

    /* タイトルと説明文のレイアウト */
    .p-company__header {
        display: flex;
        align-items: flex-start;
        /* タイトルと本文の間の余白: 80px */
        gap: calc((100vw / var(--vw-large)) * 80);
        /* 下余白: 60px */
        margin-bottom: calc((100vw / var(--vw-large)) * 60);
        text-align: left;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: calc((100vw / var(--vw-small))*24);
            margin-bottom: calc((100vw / var(--vw-small))*52);
        }
    }

    /* タイトル「会社概要」 */
    .p-company__title {
        font-size: calc((100vw / var(--vw-large))*30);
        font-weight: 900;
        line-height: 1.2;
        /* 幅固定しないと崩れる場合は指定 */
        flex-shrink: 0;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*30);
        }
    }

    .c-section-title-underline {
        display: block;
        width: calc((100vw / var(--vw-large)) * 82);
        /* 線の長さ */
        height: 3px;
        /* 線の太さ */
        /* 修正箇所: グラデーションで2色を半分ずつ表現 */
        background: linear-gradient(to right, #00A310 50%, #93D500 50%);
        margin-top: calc((100vw / var(--vw-large)) * 10);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*82);
            margin-top: calc((100vw / var(--vw-small))*10);
        }
    }

    /* 説明文 */
    .p-company__desc {
        /* フォントサイズ: 16px */
        font-size: calc((100vw / var(--vw-large)) * 16);
        margin: 0;
        font-family: var(--font-zenkaku);
        font-weight: 400;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*16);
        }
    }

    /* --- ビル群イラスト --- */
    .p-company__bg {
        width: calc((100vw / var(--vw-large))*1180);
        margin: 0 0 calc((100vw / var(--vw-large))*36) auto;

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*354);
            margin: 0 0 calc((100vw / var(--vw-small))*30) auto;
        }
    }

    .btn {
        width: calc((100vw / var(--vw-large))*150);
        margin-left: calc((100vw / var(--vw-large))*180);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*135);
            margin-left: calc((100vw / var(--vw-small))*36);
        }
    }

    /* 「詳しく見る」ボタン */
    .c-btn-circle {
        display: inline-flex;
        align-items: center;
        font-size: calc((100vw / var(--vw-large)) * 14);
        font-weight: bold;
        color: var(--color-text-body);
        text-decoration: none;
        transition: opacity 0.3s;
        margin-top: calc((100vw / var(--vw-large)) * 10);
        width: 100%;
        font-style: italic;

        @media (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small)) * 14);
            margin-top: calc((100vw / var(--vw-small)) * 10);
            margin-left: 0;
        }

        /* 黒い円と白い矢印 */
        &::after {
            content: "";
            display: inline-block;
            width: calc((100vw / var(--vw-large)) * 32);
            height: calc((100vw / var(--vw-large)) * 32);
            background-color: #222;
            /* 黒背景 */
            border-radius: 50%;
            margin-left: calc((100vw / var(--vw-large))*15);

            /* 白い矢印 (SVGデータ) */
            background-image: url(../img/common/white_arrow.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: calc((100vw / var(--vw-large))*10);
            /* 矢印のサイズ調整 */

            @media (max-width: 768px) {
                width: calc((100vw / var(--vw-small)) * 44);
                height: calc((100vw / var(--vw-small)) * 44);
                margin-left: calc((100vw / var(--vw-small)) * 10);
                background-size: calc((100vw / var(--vw-small)) * 10);
            }
        }

        &:hover {
            opacity: 0.7;
        }
    }

    .border_g {
        background-color: #21BC30;
        height: 2px;
        width: calc((100vw / var(--vw-large))*82);

        @media (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*82);
        }
    }

}