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

/* 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;

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

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

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

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

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

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

    /* メタ情報（日付とカテゴリ） */
    .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);
    }

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

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

    /* カテゴリスラッグに応じた色分け（拡張性） */
    /* .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;
    }

    /* リンクの矢印 */
    .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;
    }

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

    /* SP用レスポンシブ (768px以下) */
    @media (max-width: 768px) {
        .p-news__inner {
            flex-direction: column;
        }

        .p-news__header {
            width: 100%;
            margin-bottom: 30px;
        }

        .p-news__body {
            width: 100%;
        }

        .p-news__link {
            flex-direction: column;
            align-items: flex-start;
            padding: 20px 0;
        }

        .p-news__meta {
            width: 100%;
            margin-bottom: 10px;
            min-width: auto;
        }

        .p-news__title {
            white-space: normal;
            /* スマホでは折り返す */
            width: 100%;
        }

        /* SPでは矢印の位置調整 */
        .p-news__link::after {
            top: 50%;
            margin-top: -4px;
            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;

    /*背景の巨大文字装飾*/
    .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: 60px;
            top: 50px;
        }
    }

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

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

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

        }
    }

    /* リストコンテナ */
    .p-reasons__list {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: calc((100vw / var(--vw-large)) * 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: 30px;
            }
        }

        /* 見出し：選ばれる理由 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);
        }

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

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

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

        /* サブタイトル */
        .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;
        }

        /* 説明文 */
        .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);
        }

        /* リスト形式の説明文 */
        .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;

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

                &::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);

            /* 黒い円と白い矢印 */
            &::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);
                /* 矢印のサイズ調整 */
            }

            &: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);
        }

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

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

/* 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);

    /* 背景の装飾テキスト */
    .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: 40px;
            top: 20px;
        }
    }

    /* インナーレイアウト */
    .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) {
            flex-direction: column;
        }
    }

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

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

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

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

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

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

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

    .c-btn-circle {
        display: inline-flex;
        align-items: center;
        font-size: calc((100vw / var(--vw-large)) * 14);
        font-weight: bold;
        color: var(--color-black-btn);
        text-decoration: none;
        transition: opacity 0.3s;

        &::after {
            content: "";
            display: inline-block;
            width: calc((100vw / var(--vw-large)) * 32);
            height: calc((100vw / var(--vw-large)) * 32);
            background-color: var(--color-black-btn);
            border-radius: 50%;
            margin-left: calc((100vw / var(--vw-large)) * 15);
            background-image: url(../img/common/white_arrow.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: calc((100vw / var(--vw-large))*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 (min-width: 768px) {
        padding-top: calc(100 / var(--vw-large) * 100vw);
        padding-bottom: calc(100 / var(--vw-large) * 100vw);
    }

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

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

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

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

    /* 「詳しく見る」ボタン */
    .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);

        /* 黒い円と白い矢印 */
        &::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%;

            /* 白い矢印 (SVGデータ) */
            background-image: url(../img/common/white_arrow.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: calc((100vw / var(--vw-large))*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))*20);
    }

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

        /* --- ナビゲーションボタンのカスタムデザイン --- */
        .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;

            }

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

            &: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: 0;
                /* SPは内側へ */
            }
        }

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

            @media (max-width: 767px) {
                right: 0;
            }
        }
    }

}

/* ============================================
   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;

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

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

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

/* ============================================
   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);

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

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

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

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

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

            &: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%);
            }

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

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

    /* 説明テキスト */
    .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;
    }


    /* 「詳しく見る」ボタン */
    .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%;

        /* 黒い円と白い矢印 */
        &::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);
            /* 矢印のサイズ調整 */
        }

        &:hover {
            opacity: 0.7;
        }
    }

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

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

        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;

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

            }

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

            &: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: 0;
                /* SPは内側へ */
            }
        }

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

            @media (max-width: 767px) {
                right: 0;
            }
        }
    }

}

/* ============================================
   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;

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

    /* タイトルと説明文のレイアウト */
    .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;
    }

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

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

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

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

    /* 「詳しく見る」ボタン */
    .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%;

        /* 黒い円と白い矢印 */
        &::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);
            /* 矢印のサイズ調整 */
        }

        &:hover {
            opacity: 0.7;
        }
    }

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


}