@charset "utf-8";

/* Key visual */
/* ============================================ */
.p-kv-home {
    --design-width: var(--canvas-width);
    position: relative;
    width: 100%;
    height: min(938 / var(--design-width) * 100vw, 938px);
    overflow: hidden;

    .p-kv-home__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;

        .swiper-wrapper {
            height: 100%;
        }

        .e-slide-01 {
            overflow: hidden;

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

        .e-slide-01.--v-zoom img {
            animation: kv-zoom 5s ease-in-out forwards;
        }
    }

    .p-kv-home__deco {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        --deco-duration: 0.7s;
        --deco-step: 0.07s;

        > span {
            position: absolute;
            display: block;
            opacity: 0;
            mask-image: linear-gradient(#000, #000);
            mask-repeat: no-repeat;
            mask-size: 0% 100%;
            transition: opacity var(--deco-duration) ease-in-out,
                        mask-size var(--deco-duration) ease-in-out;
        }

        .e-deco-01 {
            top: 0;
            left: 0;
            right: calc(50% - min(300 / var(--design-width) * 100vw, 300px));
            height: min(540 / var(--design-width) * 100vw, 540px);
            background-image: linear-gradient(68.76deg, var(--grad-deco-03));
            clip-path: polygon(0 0, 100% 0, 0 100%);
            mix-blend-mode: multiply;
            z-index: 2;
        }

        .e-deco-02 {
            top: 0;
            left: 0;
            right: calc(50% - min(302 / var(--design-width) * 100vw, 302px));
            height: min(558 / var(--design-width) * 100vw, 558px);
            background-image: linear-gradient(68.76deg, var(--grad-deco-03));
            clip-path: polygon(0 0, 100% 0, 0 100%);
            z-index: 1;
        }

        .e-deco-03 {
            bottom: 0;
            left: calc(50% - min(314 / var(--design-width) * 100vw, 314px));
            right: 0;
            height: min(580 / var(--design-width) * 100vw, 580px);
            background-image: linear-gradient(301.79deg, var(--grad-deco-01));
            clip-path: polygon(0 100%, 100% 100%, 100% 0);
            --deco-opacity: 0.34;
        }

        .e-deco-04 {
            bottom: 0;
            left: 0;
            right: calc(50% - min(314 / var(--design-width) * 100vw, 314px));
            height: min(580 / var(--design-width) * 100vw, 580px);
            background-image: linear-gradient(222.2deg, var(--grad-deco-01));
            clip-path: polygon(0 0, 100% 100%, 0 100%);
            --deco-opacity: 0.34;
        }

        .e-deco-05 {
            bottom: 0;
            left: calc(50% - min(432 / var(--design-width) * 100vw, 432px));
            right: 0;
            height: min(334 / var(--design-width) * 100vw, 334px);
            background-image: linear-gradient(222.2deg, var(--grad-deco-01));
            clip-path: polygon(0 100%, 100% 100%, 100% 0);
        }

        .e-deco-01 {
            transition-delay: var(--deco-step);
        }

        .e-deco-04 {
            transition-delay: calc(var(--deco-step) * 2);
        }

        .e-deco-05 {
            transition-delay: calc(var(--deco-step) * 3);
        }

        .e-deco-03 {
            transition-delay: calc(var(--deco-step) * 4);
        }

        &.--v-anime > span {
            opacity: var(--deco-opacity, 1);
            mask-size: 100% 100%;
        }
    }

    .p-kv-home__img {
        position: absolute;
        bottom: 0;
        left: calc(50% - min(460 / var(--design-width) * 100vw, 460px));
        width: min(514 / var(--design-width) * 100vw, 514px);
        height: min(736 / var(--design-width) * 100vw, 736px);
        z-index: 2;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.0s ease, transform 1.0s ease;

        &.--v-anime {
            opacity: 1;
            transform: translateY(0);
        }

        .e-img-01 {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;

            &.--v-active {
                opacity: 1;
            }

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

    .p-kv-home__content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: min(100%, 1600px);
        margin: 0 auto;
        height: 100%;
        z-index: 4;

        .e-tab-01 {
            position: absolute;
            top: min(202 / var(--design-width) * 100vw, 202px);
            left: min(1216 / var(--design-width) * 100vw, 1216px);
            width: min(42 / var(--design-width) * 100vw, 42px);
            padding: min(12.89 / var(--design-width) * 100vw, 12.89px) 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--c-blue-06);

            .m-text-01 {
                writing-mode: vertical-rl;
                font-size: clamp(13px, 16 / var(--design-width) * 100vw, 16px);
                line-height: 2.098;
                letter-spacing: 0.235em;
                color: var(--c-white);
            }
        }

        .e-catch-01 {

            .m-text-01,
            .m-text-02 {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                width: min(64 / var(--design-width) * 100vw, 64px);
                padding: min(22 / var(--design-width) * 100vw, 22px) 0 min(2 / var(--design-width) * 100vw, 2px);
                background-color: color-mix(in srgb, var(--c-orange-02) 76%, transparent);
                writing-mode: vertical-rl;
                white-space: nowrap;
                font-size: clamp(13px, 28 / var(--design-width) * 100vw, 28px);
                line-height: 1;
                letter-spacing: 0.42em;
                font-weight: 500;
                color: var(--c-white);
            }

            .m-text-01 {
                top: min(286 / var(--design-width) * 100vw, 286px);
                left: min(1136 / var(--design-width) * 100vw, 1136px);
            }

            .m-text-02 {
                top: min(368 / var(--design-width) * 100vw, 368px);
                left: min(1070 / var(--design-width) * 100vw, 1070px);
            }
        }

        .e-logotype-01 {
            position: absolute;
            bottom: -2px;
            left: min(64 / var(--design-width) * 100vw, 64px);
            font-family: var(--font-cormorant);
            color: var(--c-white);

            .m-text-01 {
                display: block;
                width: min(566 / var(--design-width) * 100vw, 566px);
            }

            .m-text-02 {
                display: block;
                width: min(618 / var(--design-width) * 100vw, 618px);
                margin-left: min(200 / var(--design-width) * 100vw, 200px);
                margin-top: -6px;
            }
        }

        .e-tab-01,
        .e-catch-01,
        .e-logotype-01 {
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .e-tab-01.--v-anime,
        .e-catch-01.--v-anime,
        .e-logotype-01.--v-anime {
            opacity: 1;
        }
    }
}
@media screen and (max-width: 899px) {
    .p-kv-home {
        height: min(587 / var(--design-width) * 100vw, 587px);

        .p-kv-home__deco {

            .e-deco-01 {
                right: calc(50% - min(248 / var(--design-width) * 100vw, 248px));
                height: min(206 / var(--design-width) * 100vw, 206px);
            }

            .e-deco-02 {
                right: calc(50% - min(250 / var(--design-width) * 100vw, 250px));
                height: min(230 / var(--design-width) * 100vw, 230px);
            }

            .e-deco-03 {
                left: calc(50% - min(172 / var(--design-width) * 100vw, 172px));
                height: min(256 / var(--design-width) * 100vw, 256px);
            }

            .e-deco-04 {
                right: calc(50% - min(114 / var(--design-width) * 100vw, 114px));
                height: min(280 / var(--design-width) * 100vw, 280px);
                background-image: linear-gradient(301.79deg, var(--grad-deco-01));
            }

            .e-deco-05 {
                left: calc(50% - min(210 / var(--design-width) * 100vw, 210px));
                height: min(180 / var(--design-width) * 100vw, 180px);
            }
        }

        .p-kv-home__img {
            left: calc(50% - min(50%, 187.5px) + max(-37 / var(--design-width) * 100vw, -37px));
            width: min(306 / var(--design-width) * 100vw, 306px);
            height: min(438 / var(--design-width) * 100vw, 438px);
        }

        .p-kv-home__content {
            width: min(100%, 375px);

            .e-tab-01 {
                top: min(92 / var(--design-width) * 100vw, 92px);
                left: min(314 / var(--design-width) * 100vw, 314px);
                width: min(22 / var(--design-width) * 100vw, 22px);
                padding: min(8.95 / var(--design-width) * 100vw, 8.95px) 0;

                .m-text-01 {
                    font-size: clamp(8px, 8 / var(--design-width) * 100vw, 8px);
                }
            }

            .e-catch-01 {

                .m-text-01,
                .m-text-02 {
                    width: min(32 / var(--design-width) * 100vw, 32px);
                    padding: min(12 / var(--design-width) * 100vw, 12px) 0 min(2 / var(--design-width) * 100vw, 2px);
                    font-size: clamp(13px, 14 / var(--design-width) * 100vw, 14px);
                }

                .m-text-01 {
                    top: min(135 / var(--design-width) * 100vw, 135px);
                    left: min(273 / var(--design-width) * 100vw, 273px);
                }

                .m-text-02 {
                    top: min(177 / var(--design-width) * 100vw, 177px);
                    left: min(238 / var(--design-width) * 100vw, 238px);
                }
            }

            .e-logotype-01 {
                bottom: -1px;
                left: min(6 / var(--design-width) * 100vw, 6px);

                .m-text-01 {
                    width: min(242 / var(--design-width) * 100vw, 242px);
                }

                .m-text-02 {
                    width: min(264 / var(--design-width) * 100vw, 264px);
                    margin-left: min(86 / var(--design-width) * 100vw, 86px);
                    margin-top: -6px;
                }
            }
        }
    }
}

@keyframes kv-zoom {
    to {
        transform: scale(1.05);
    }
}


/* Section 01（MESSAGE） */
/* ============================================ */
.p-home-section-01 {
    position: relative;
    overflow: hidden;
    padding: min(140 / var(--design-width) * 100vw, 140px) 0 min(140 / var(--design-width) * 100vw, 140px);
    background-color: var(--c-white);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: calc(50% - min(250 / var(--design-width) * 100vw, 250px));
        height: min(532 / var(--design-width) * 100vw, 532px);
        background-image: linear-gradient(36deg, var(--grad-deco-01));
        clip-path: polygon(0 0, 100% 0, 0 100%);
        opacity: 0.43;
        z-index: 0;
        pointer-events: none;
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - min(300 / var(--design-width) * 100vw, 300px));
        right: 0;
        height: min(284 / var(--design-width) * 100vw, 284px);
        background-image: linear-gradient(238deg, var(--c-blue-16) 34%, var(--c-green-03) 74%);
        clip-path: polygon(0 100%, 100% 100%, 100% 0);
        z-index: 0;
        pointer-events: none;
    }

    > .l-wrap-large {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    .p-home-section-01__content {
        width: min(580 / var(--design-width) * 100vw, 580px);
        margin-top: min(6 / var(--design-width) * 100vw, 6px);

        .e-title-01 {
            margin-top: min(34 / var(--design-width) * 100vw, 34px);
            font-size: clamp(13px, 24 / var(--design-width) * 100vw, 24px);
            line-height: 1.83;
            letter-spacing: 0.105em;
            font-weight: 500;
            color: var(--c-black);
        }

        .e-text-01 {
            margin-top: min(20 / var(--design-width) * 100vw, 20px);
            font-size: clamp(13px, 18 / var(--design-width) * 100vw, 18px);
            line-height: 2.056;
            color: var(--c-black);
        }
    }

    .p-home-section-01__img {
        width: min(540 / var(--design-width) * 100vw, 540px);

        img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-01 {
        padding: min(60 / var(--design-width) * 100vw, 60px) 0 min(48 / var(--design-width) * 100vw, 48px);

        &::before {
            right: calc(50% - min(384 / var(--design-width) * 100vw, 384px));
            height: min(276 / var(--design-width) * 100vw, 276px);
        }

        &::after {
            left: calc(50% - min(468 / var(--design-width) * 100vw, 468px));
            height: min(254 / var(--design-width) * 100vw, 254px);
            background-image: linear-gradient(246.1deg, rgba(164, 202, 229, 0.7) 21.6%, var(--c-green-03) 117.8%);
            mix-blend-mode: multiply;
        }

        > .l-wrap-large {
            flex-direction: column;
        }

        .p-home-section-01__content {
            width: 100%;
            margin-top: min(32 / var(--design-width) * 100vw, 32px);

            .e-title-01 {
                margin-top: min(18 / var(--design-width) * 100vw, 18px);
                font-size: clamp(13px, 16 / var(--design-width) * 100vw, 16px);
                line-height: 1.75;
            }

            .e-text-01 {
                margin-top: min(10 / var(--design-width) * 100vw, 10px);
                font-size: clamp(13px, 13 / var(--design-width) * 100vw, 13px);
                line-height: 2.154;
            }
        }

        .p-home-section-01__img {
            order: -1;
            width: 100%;
        }
    }
}



/* Section wrap 01（社員紹介 ＋ キャリア座談会 が共有する青グラデ帯） */
/* ============================================ */
.p-home-section-wrap-01 {
    position: relative;
}

.p-home-section-wrap-01__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background-image: linear-gradient(256.62deg, var(--c-blue-08) -25%, var(--c-blue-07) 100%);

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: calc(50% + min(278 / var(--design-width) * 100vw, 278px));
        height: min(454 / var(--design-width) * 100vw, 454px);
        background-image: linear-gradient(222.2deg, var(--grad-deco-02));
        clip-path: polygon(0 0, 100% 0, 0 100%);
        opacity: 0.43;
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-wrap-01__bg {
        background-image: linear-gradient(256.62deg, var(--c-blue-08) -14.3%, var(--c-blue-07) 59.2%);

        &::after {
            right: calc(50% - min(96 / var(--design-width) * 100vw, 96px));
            height: min(196 / var(--design-width) * 100vw, 196px);
            background-image: linear-gradient(233.1deg, var(--c-orange-01) 11.2%, var(--c-blue-09) 74.6%);
        }
    }
}



/* Section 02（WORK & CAREER 社員紹介） */
/* ============================================ */
.p-home-section-02 {
    position: relative;
    z-index: 1;
    padding-top: min(164 / var(--design-width) * 100vw, 164px);

    .p-home-section-02__content {

        > .e-text-01 {
            margin-top: min(28 / var(--design-width) * 100vw, 28px);
            color: var(--c-white);
        }
    }

    .p-home-section-02__list {
        margin-top: min(28 / var(--design-width) * 100vw, 28px);

        > ul {
            display: flex;
            gap: 0 min(44 / var(--design-width) * 100vw, 44px);

            > li {
                width: min(370 / var(--design-width) * 100vw, 370px);

                a {

                    .e-img-01 {
                        position: relative;

                        img {
                            width: 100%;
                            height: min(442 / var(--design-width) * 100vw, 442px);
                            object-fit: cover;
                            border-radius: 8px;
                        }

                        .m-arrow-01 {
                            position: absolute;
                            right: min(12 / var(--design-width) * 100vw, 12px);
                            bottom: min(12 / var(--design-width) * 100vw, 12px);
                            display: block;
                            width: min(44 / var(--design-width) * 100vw, 44px);
                            height: min(44 / var(--design-width) * 100vw, 44px);

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 0;
                            }
                        }
                    }

                    .e-name-01 {
                        margin-top: min(24 / var(--design-width) * 100vw, 24px);
                        letter-spacing: 0.18em;
                        color: var(--c-white);

                        .m-text-01 {
                            display: block;
                            font-size: clamp(13px, 16 / var(--design-width) * 100vw, 16px);
                            line-height: 1.75;
                        }

                        .m-text-02 {
                            display: block;
                            margin-top: min(8 / var(--design-width) * 100vw, 8px);
                            font-size: clamp(13px, 22 / var(--design-width) * 100vw, 22px);
                            line-height: 1.273;
                            font-weight: 500;
                        }

                        .m-text-03 {
                            display: block;
                            margin-top: min(6 / var(--design-width) * 100vw, 6px);
                            font-size: clamp(13px, 14 / var(--design-width) * 100vw, 14px);
                            line-height: 2;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-02 {
        padding-top: min(70 / var(--design-width) * 100vw, 70px);

        .p-home-section-02__content {

            > .e-text-01 {
                margin-top: min(20 / var(--design-width) * 100vw, 20px);
            }
        }

        .p-home-section-02__list {
            margin-top: min(35 / var(--design-width) * 100vw, 35px);

            > ul {
                flex-direction: column;
                gap: min(38 / var(--design-width) * 100vw, 38px) 0;

                > li {
                    width: 100%;

                    a {

                        .e-img-01 {

                            img {
                                height: auto;
                                object-fit: contain;
                            }
                        }

                        .e-name-01 {
                            margin-top: min(15 / var(--design-width) * 100vw, 15px);
                            line-height: 1.556;

                            .m-text-01 {
                                font-size: clamp(13px, 13 / var(--design-width) * 100vw, 13px);
                                line-height: 2.1875;
                            }

                            .m-text-02 {
                                display: inline;
                                margin-top: 0;
                                font-size: clamp(13px, 18 / var(--design-width) * 100vw, 18px);
                                line-height: 1.556;
                                font-weight: 400;
                            }

                            .m-text-03 {
                                display: inline;
                                margin-top: 0;
                                margin-left: min(10 / var(--design-width) * 100vw, 10px);
                                font-size: clamp(13px, 13 / var(--design-width) * 100vw, 13px);
                                line-height: 1.556;
                            }
                        }
                    }
                }
            }
        }
    }
}



/* Section 03（CROSS TALK キャリア座談会） */
/* ============================================ */
.p-home-section-03 {
    position: relative;
    z-index: 1;
    padding: min(104 / var(--design-width) * 100vw, 104px) 0 min(202 / var(--design-width) * 100vw, 202px);

    .p-home-section-03__content {

        > a {
            display: flex;
            justify-content: space-between;
        }
    }

    .p-home-section-03__img {
        width: min(680 / var(--design-width) * 100vw, 680px);

        img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
    }

    .p-home-section-03__text {
        width: min(468 / var(--design-width) * 100vw, 468px);
        margin-top: min(140 / var(--design-width) * 100vw, 140px);

        .e-text-01 {
            margin-top: min(32 / var(--design-width) * 100vw, 32px);
            color: var(--c-white);
        }

        .e-link-01 {
            margin-top: min(32 / var(--design-width) * 100vw, 32px);
        }
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-03 {
        padding: min(76 / var(--design-width) * 100vw, 76px) 0 min(60 / var(--design-width) * 100vw, 60px);

        .p-home-section-03__content {

            > a {
                flex-direction: column;
            }
        }

        .p-home-section-03__img {
            width: 100%;
        }

        .p-home-section-03__text {
            width: 100%;
            margin-top: min(34 / var(--design-width) * 100vw, 34px);

            .e-text-01 {
                margin-top: min(20 / var(--design-width) * 100vw, 20px);
            }

            .e-link-01 {
                margin-top: min(24 / var(--design-width) * 100vw, 24px);
            }
        }
    }
}



/* Section 04（DATA 数字でわかるキャリア入社者） */
/* ============================================ */
.p-home-section-04 {
    position: relative;
    overflow: hidden;
    padding: min(146 / var(--design-width) * 100vw, 146px) 0 min(150 / var(--design-width) * 100vw, 150px);
    background-color: var(--c-white);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(50% + min(110 / var(--design-width) * 100vw, 110px));
        right: 0;
        height: min(310 / var(--design-width) * 100vw, 310px);
        background-image: linear-gradient(325deg, var(--grad-deco-01));
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        opacity: 0.43;
        z-index: 0;
        pointer-events: none;
    }

    &::after {
        content: "";
        position: absolute;
        top: min(348 / var(--design-width) * 100vw, 348px);
        left: 0;
        right: calc(50% - min(140 / var(--design-width) * 100vw, 140px));
        height: min(360 / var(--design-width) * 100vw, 360px);
        background-image: linear-gradient(113.1deg, rgba(164, 202, 229, 0.7) 3.67%, var(--c-green-03) 95.68%);
        clip-path: polygon(0 0, 0 100%, 100% 100%);
        opacity: 0.38;
        z-index: 0;
        pointer-events: none;
    }

    .p-home-section-04__content {

        > a {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
        }
    }

    .p-home-section-04__text {
        width: min(480 / var(--design-width) * 100vw, 480px);
        margin-top: min(88 / var(--design-width) * 100vw, 88px);

        .c-heading-01 .e-main-01 {
            margin-top: min(20 / var(--design-width) * 100vw, 20px);
            line-height: 1.273;
        }

        .e-text-01 {
            margin-top: min(28 / var(--design-width) * 100vw, 28px);
            color: var(--c-black);
        }

        .e-link-01 {
            margin-top: min(34 / var(--design-width) * 100vw, 34px);
        }
    }

    .p-home-section-04__img {
        width: min(680 / var(--design-width) * 100vw, 680px);

        img {
            width: 100%;
            height: auto;
        }
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-04 {
        padding: min(60 / var(--design-width) * 100vw, 60px) 0 min(60 / var(--design-width) * 100vw, 60px);

        &::before {
            left: calc(50% - min(120 / var(--design-width) * 100vw, 120px));
            height: min(148 / var(--design-width) * 100vw, 148px);
        }

        &::after {
            top: auto;
            bottom: 0;
            right: calc(50% - min(236 / var(--design-width) * 100vw, 236px));
            height: min(170 / var(--design-width) * 100vw, 170px);
        }

        .p-home-section-04__content {

            > a {
                flex-direction: column;
            }
        }

        .p-home-section-04__text {
            width: 100%;
            margin-top: min(30 / var(--design-width) * 100vw, 30px);

            .c-heading-01 .e-main-01 {
                margin-top: min(6 / var(--design-width) * 100vw, 6px);
                line-height: 1.533;
            }

            .e-text-01 {
                margin-top: min(14 / var(--design-width) * 100vw, 14px);
            }

            .e-link-01 {
                margin-top: min(22 / var(--design-width) * 100vw, 22px);
            }
        }

        .p-home-section-04__img {
            order: -1;
            width: 100%;
        }
    }
}



/* Section 05（ABOUT US 大同生命を知る） */
/* ============================================ */
.p-home-section-05 {
    position: relative;
    padding: min(162 / var(--design-width) * 100vw, 162px) 0 min(152 / var(--design-width) * 100vw, 152px);

    .p-home-section-05__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-image: linear-gradient(270deg, var(--c-blue-08) -25%, var(--c-blue-07) 100%);
    }

    .p-home-section-05__content {
        position: relative;
        z-index: 1;
    }

    .p-home-section-05__nav {
        margin-top: min(40 / var(--design-width) * 100vw, 40px);
        display: grid;
        grid-template-columns: repeat(2, min(420 / var(--design-width) * 100vw, 420px));
        column-gap: min(20 / var(--design-width) * 100vw, 20px);
        row-gap: min(30 / var(--design-width) * 100vw, 30px);

        > div {

            a {
                background-color: var(--c-white);
                font-size: clamp(13px, 20 / var(--design-width) * 100vw, 20px);
                letter-spacing: 0.3em;
                font-weight: 500;
                border-radius: 8px;
                padding-left: min(32 / var(--design-width) * 100vw, 32px);
                width: 100%;
                height: min(90 / var(--design-width) * 100vw, 90px);

                &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: min(18 / var(--design-width) * 100vw, 18px);
                    transform: translateY(-50%);
                    width: min(44 / var(--design-width) * 100vw, 44px);
                    height: min(44 / var(--design-width) * 100vw, 44px);
                    border-radius: 50%;
                    background-color: var(--c-orange-01);
                    background-image: url("../images/common/icon-externallink01.svg");
                    background-size: min(16 / var(--design-width) * 100vw, 16px);
                    background-position: center center;
                    background-repeat: no-repeat;
                    transition: background-color 0.3s ease;
                }

                &:hover {

                    &::after {
                        background-color: rgba(233, 85, 50, 0.75);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 899px) {
    .p-home-section-05 {
        padding: min(64 / var(--design-width) * 100vw, 64px) 0 min(60 / var(--design-width) * 100vw, 60px);

        .p-home-section-05__bg {
            background-image: linear-gradient(97.84deg, var(--c-blue-07) 2.41%, var(--c-blue-08) 100%);
        }

        .p-home-section-05__nav {
            margin-top: min(48 / var(--design-width) * 100vw, 48px);
            grid-template-columns: 1fr;
            column-gap: 0;
            row-gap: min(22 / var(--design-width) * 100vw, 22px);

            > div {

                a {
                    padding-left: min(30 / var(--design-width) * 100vw, 30px);
                    height: min(78 / var(--design-width) * 100vw, 78px);
                    font-size: clamp(13px, 18 / var(--design-width) * 100vw, 18px);
                    line-height: 1.75;
                    letter-spacing: 0.2em;

                    &::after {
                        right: min(20 / var(--design-width) * 100vw, 20px);
                        width: min(40 / var(--design-width) * 100vw, 40px);
                        height: min(40 / var(--design-width) * 100vw, 40px);
                        background-size: min(12 / var(--design-width) * 100vw, 12px);
                    }
                }
            }
        }
    }
}



/* Arrow link（B4: 矢印円 ⌀45） */
/* ============================================ */
.e-link-01 {

    > a {
        display: inline-block;
    }

    .m-arrow-01 {
        display: block;
        width: min(44 / var(--design-width) * 100vw, 44px);
        height: min(44 / var(--design-width) * 100vw, 44px);

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