/* ===================================
   FOUNDATION - 基盤レイヤー
   =================================== */

/* CSS Custom Properties - 変数定義 */
:root {
    /* Color Palette */
    --color-main-orange-light: #FC6203;
    --color-main-orange-dark: #CA4F02;
    --color-main-blue-light: #02A1A7;
    --color-main-green-light: #2DA653;

    --color-black: #333333;
    --color-white: #ffffff;
    --color-gray-light: #F2F2F2;
    --color-whitegray: #F9F9F9;
    --color-gray-dark: #140B00;

    /* Typography */
    --font-family-base: 'Noto Sans JP', 'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-family-heading: 'Noto Sans JP', 'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-family-english: "Bebas Neue", sans-serif;
    --font-family-zenkaku-new: 'Zen Kaku Gothic New', sans-serif;

    /* Shadow */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-base: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {}

.pc {
    display: block;
}

.sp {
    display: none;
}

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

    .sp {
        display: block;
    }
}


.aboutfg {
    a {
        color: var(--color-black);
        text-decoration: none;
        cursor: pointer;
        font-weight: normal;

        &:hover {
            img {
                opacity: 0.7;
                transition: all 0.3s;
            }
        }
    }

    .button01 {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        width: 330px;
        margin: 0;
        border-radius: 50px;
        padding: 0.75em 2em 0.75em 0;
        justify-content: center;
        padding: 0.75em 2em 0.75em 0;
        justify-content: center;
        color: #fff;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        text-decoration: none;
        border: 2px solid #fff;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);

        span {
            font-size: 2.4rem;
            margin-left: 0.25em;

            @media screen and (max-width: 768px) {
                font-size: 2.2rem;

            }
        }

        @media screen and (max-width: 768px) {
            padding: 0.5em 2em 0.5em 0;

        }
    }

    .button01:after {
        position: absolute;
        height: -moz-fit-content;
        height: fit-content;
        right: 11px;
        top: 0;
        bottom: 0;
        margin: auto;
        content: "";
        width: 31px;
        height: 31px;
        background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15ZM12.6834 22.5L21.3174 15.365L12.6834 7.5V22.5Z" fill="white"/></svg>');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .button-orange {
        background: var(--color-main-orange-light);
    }

    .button-green {
        background: #02A1A7;
    }
}

/* ===================================
    PROJECT - プロジェクトレイヤー
=================================== */


.aboutfg-section {
    position: relative;
    z-index: 1;
    padding: 10rem 0;
    background: var(--color-white);

    .aboutfg-section__title {
        text-align: center;
        margin-bottom: 4rem;
        overflow: hidden;

        @media screen and (max-width: 768px) {
            margin-bottom: 3rem;
        }
    }

    .aboutfg-section__title-main {
        font-size: 18rem;
        font-family: var(--font-family-english);
        background: linear-gradient(90deg, #ff3300, #ff9900);
        /* 左→右オレンジグラデ */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        /* Firefox用 */
        color: transparent;
        line-height: 1;
        letter-spacing: 0.05em;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-section__title-main {
            font-size: 27vw;
            letter-spacing: 0.03em;

        }
    }

    .aboutfg-section__title-sub {
        font-size: 3rem;
        font-family: var(--font-family-zenkaku-new);
        font-weight: 900;
        color: #ff6600;
        margin-top: -0.75em;
        padding-bottom: 0.75em;
        line-height: 1;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-section__title-sub {
            font-size: 4.8vw;
        }
    }

}

@media screen and (max-width: 768px) {
    .aboutfg-section {
        padding: 10.6vw 0;
    }
}

.aboutfg-fv {
    background: linear-gradient(to right,
            #FC2403 0%,
            #FC5904 30%,
            #FC8203 100%);
    position: sticky;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 950px;
    z-index: 0;

    @media screen and (max-width: 768px) {
        height: 134vw;
    }

    .aboutfg-fv__copy {
        position: absolute;
        top: -20vw;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        width: 95vw;
        height: fit-content;
        display: block;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-fv__copy {
            position: absolute;
            top: 66vw;
            bottom: unset;
            right: 0;
            left: 0;
            margin: auto;
            width: 95vw;
            height: fit-content;
            display: block;
        }
    }

    .aboutfg-fv__copy-main {
        display: block;
        margin-bottom: 2rem;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-fv__copy-main {
            width: 95vw;
            display: block;
            margin: 0 auto;
        }
    }

    .aboutfg-fv__copy-main img {
        width: min(759px, 52.7vw);
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0px 0px 20px rgba(61, 23, 0, 0.3));
    }

    @media screen and (max-width: 768px) {
        .aboutfg-fv__copy-main img {
            width: 95vw;
        }
    }

    .aboutfg-fv__copy p {
        font-family: var(--font-family-base);
        font-size: 2rem;
        font-weight: bold;
        color: var(--color-white);
        opacity: 0.9;
        margin: 0 1em;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-fv__copy p {
            width: 100vw;
            margin: 0.5em auto 0;
            font-size: 3.75vw;
        }
    }

    .aboutfg-fv__slider {
        position: sticky;
        top: 0;
        width: 100%;
        height: 900px;

        @media screen and (max-width: 768px) {
            height: 134vw;
        }

        .aboutfg-fv__slider-image {
            display: block;
        }

        .aboutfg-fv__slider-text {
            position: absolute;
            right: 80px;
            top: 70px;
            color: var(--color-white);
            font-weight: bold;

            .slider-text01 {
                font-size: 2.4rem;
                font-weight: bold;

                span {
                    display: inline-block;
                    padding: 0 0.5em;
                    border: 1px solid #FFF;
                    border-radius: 1px;
                    margin-right: 0.25em;
                }
            }

            .slider-text02 {
                font-weight: 400;

                @media screen and (max-width: 768px) {
                    font-size: 3.5vw;
                }
            }


        }

        @media screen and (max-width: 768px) {
            .aboutfg-fv__slider-text {
                right: unset;
                left: 5vw;
                top: 5vw;

                .slider-text01 {
                    font-size: 4.8vw;

                    span {
                        display: inline-block;
                        padding: 0 0.5em;
                        border: 0.5px solid #FFF;
                    }
                }
            }
        }
    }

}

.aboutfg-fvtext {
    background: linear-gradient(to right,
            #FC2403 0%,
            #FC5904 30%,
            #FC8203 100%);
    position: relative;
    width: 100%;
    z-index: 2;

    .aboutfg-fvtext__inner {
        width: min(1100px, 89vw);
        margin: 0 auto;
        color: var(--color-white);
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;

        .aboutfg-fvtext__copy {
            width: 47%;
            margin: 0 auto;
            padding: 2rem 0;

            p {
                font-family: var(--font-family-zenkaku-new);
                font-size: 4.8rem;
                font-weight: 900;
                line-height: 1.8;
            }
        }

        @media screen and (max-width: 768px) {
            .aboutfg-fvtext__copy {
                width: 100%;
                padding: 1rem 0;

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


        .aboutfg-fvtext__text {
            width: 53%;
            font-size: 2.4rem;

            p {
                font-weight: 900;
                margin-bottom: 2em;
                line-height: 2.25;
            }
        }

        @media screen and (max-width: 768px) {
            .aboutfg-fvtext__text {
                width: 100%;
                font-size: 4.27vw;

                p {
                    font-weight: bold;
                    margin-bottom: 1.5em;
                    line-height: 2;
                }
            }
        }

    }

    .aboutfg-fvtext__topper,
    .aboutfg-fvtext__footer {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 30vw;
        background: linear-gradient(to right, #FC2403 0%, #FC5904 30%, #FC8203 100%);
        mask-image: url("../../images/about/aboutfg_bgframe01.svg");
        -webkit-mask-image: url("../../images/about/aboutfg_bgframe01.svg");
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
    }

    .aboutfg-fvtext__topper {
        top: -25vw;
    }

    .aboutfg-fvtext__toppershadow {
        position: absolute;
        top: -25vw;
        width: 100%;
        height: 30vw;
        filter: blur(50px);
        opacity: 0.1;
        z-index: 0;
    }


    .aboutfg-fvtext__footer {
        bottom: -25vw;
        transform: rotate(180deg);
        background: linear-gradient(to right, #FC8203 0%, #FC5904 70%, #FC2403 100%);

    }

    .aboutfg-fvtext__main {
        position: relative;
        z-index: 1;
        background: linear-gradient(to right, #FC2403 0%, #FC5904 30%, #FC8203 100%);
    }

    .aboutfg-fvtext__partners {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;

        &>p {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-family-english);
            width: 100%;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 0.1em;
        }

        &>p::before,
        &>p::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.4);
            /* 半透明の白色線 */
            margin: 0 16px;
        }

        .aboutfg-fvtext__partners-list {
            background: var(--color-white);
            width: 100%;
            border-radius: 10px;
            padding: 10px 20px;
            overflow: hidden;
            position: relative;

            .partners-list {
                width: fit-content;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                gap: 3vw;
                list-style: none;
                margin: 0;
                padding: 0;
                animation: partnersScrollLoop 20s linear infinite;
                width: calc(200% + 6vw);

                li {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        max-height: 60px;
                        object-fit: contain;
                    }
                }
            }

            &:hover .partners-list {
                animation-play-state: paused;
            }

            @media screen and (max-width: 768px) {
                .partners-list {
                    width: fit-content;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: center;
                    gap: 5vw;
                    animation-duration: 15s;
                    width: calc(200% + 10vw);
                }
            }
        }

        @media screen and (max-width: 768px) {
            .aboutfg-fvtext__partners-list {
                li {
                    img {
                        width: auto;
                        height: 8vw;
                        max-height: none;
                    }
                }
            }
        }
    }
}

@keyframes partnersScrollLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.aboutfg-structure {
    min-height: 300px;
    padding: 30vw 0 16rem;

    @media screen and (max-width: 768px) {
        padding: 30vw 0;
    }

    .aboutfg-structure__title {
        width: fit-content;
        max-width: 530px;
        margin: 0 auto 4rem;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-structure__title {
            width: 95vw;
            margin: 0 auto 2rem;

            img {
                width: 100%;
            }
        }
    }

    .arrow {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: fit-content;
        max-width: 102px;
        display: block;
    }

    .aboutfg-structure__plan {
        width: 852px;
        min-height: 380px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-structure__plan {
            width: 95vw;
            margin: 20vw auto 0;
            display: grid;
            flex-wrap: unset;
            align-items: center;
            justify-content: center;
            gap: 0;
        }
    }

    .plan01,
    .plan02 {
        position: relative;
        width: 450px;

        @media screen and (max-width: 768px) {
            width: 85vw;
        }

        img {
            width: 100%;
        }
    }

    .plan01 {
        display: block;
        aspect-ratio: 1/1;

        @media screen and (max-width: 768px) {
            margin-bottom: 7vw;
            aspect-ratio: 3/2;

        }

        .plan01-bg {
            position: absolute;

            @media screen and (max-width: 768px) {
                width: 80vw;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }

        .plan01-img {
            width: 143px;
            margin: 25% auto 1rem;
        }

        .plan01-title {
            font-family: var(--font-family-zenkaku-new);
            font-size: 2.6rem;
            font-weight: 900;
            text-align: center;
            word-break: keep-all;
            color: var(--color-main-orange-light);

            @media screen and (max-width: 768px) {
                font-size: 5.86vw;
            }

            span {
                position: relative;
                padding: 0.25em;
                margin: 0 0.25em;
                background: var(--color-white);
                font-size: 3.2rem;
                border-radius: 2px;
                border: 2px solid var(--color-main-orange-light);

                @media screen and (max-width: 768px) {
                    font-size: 6.4vw;
                }
            }
        }
    }

    .plan02 {
        display: block;
        aspect-ratio: 1/1;

        @media screen and (max-width: 768px) {
            aspect-ratio: 3/2;

        }

        .plan02-bg {
            position: absolute;

            @media screen and (max-width: 768px) {
                width: 80vw;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }

        .plan02-img {
            width: 143px;
            margin: 25% auto 1rem;
        }

        .plan02-title {
            font-family: var(--font-family-zenkaku-new);
            font-size: 2.6rem;
            font-weight: 900;
            text-align: center;
            word-break: keep-all;
            color: var(--color-main-blue-light);

            @media screen and (max-width: 768px) {
                font-size: 5.86vw;
            }

            span {
                position: relative;
                padding: 0.25em;
                margin: 0 0.25em;
                background: var(--color-white);
                font-size: 3.2rem;
                border-radius: 2px;
                border: 2px solid var(--color-main-blue-light);

                @media screen and (max-width: 768px) {
                    font-size: 6.4vw;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .cross {
            width: 4.5vw;
            margin: 0 auto;

            img {
                width: 100%;
            }
        }
    }
}

.aboutfg-plan {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 6rem 0 10rem;
    border-radius: 60px 60px 0 0;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
    background: var(--color-white);
    margin-top: -6rem;

    .aboutfg-plan__inner {
        max-width: min(1100px, 95vw);
        margin: 0 auto;
    }

    .aboutfg-plan__title {
        font-size: 3.8rem;
        font-weight: bold;
        padding: 0.5em 1em;
        text-align: center;
        background: var(--color-main-orange-light);
        color: var(--color-white);
        border-radius: 2rem;
    }

    .aboutfg-plan__creator {
        margin-bottom: 4rem;

        .aboutfg-plan__title {
            font-size: 3.8rem;
            font-weight: bold;
            padding: 0.5em 1em;
            text-align: center;
            background: var(--color-main-orange-light);
            color: var(--color-white);
            border-radius: 2rem;
        }

        @media screen and (max-width: 768px) {
            .aboutfg-plan__title {
                font-size: 5.5vw;
                border-radius: 0.5rem;
            }
        }
    }

    .aboutfg-plan__supporter {
        margin-bottom: 4rem;

        .aboutfg-plan__title {
            font-size: 3.8rem;
            font-weight: bold;
            padding: 0.5em 1em;
            text-align: center;
            background: var(--color-main-blue-light);
            color: var(--color-white);
            border-radius: 2rem;
        }

        @media screen and (max-width: 768px) {
            .aboutfg-plan__title {
                font-size: 5.5vw;
                border-radius: 0.5rem;
            }
        }

        .selection-reasons__navigation li.is-active {
            border-color: var(--color-main-blue-light);
        }

        .selection-reasons__navigation li.is-active p,
        .selection-reasons__navigation li.is-active .icon-arrow-right {
            color: var(--color-main-blue-light);
        }

        .selection-reasons__navigation ul li:hover {
            border-color: var(--color-main-blue-light);
        }

        .selection-reasons__navigation ul li:hover p,
        .selection-reasons__navigation ul li:hover .icon-arrow-right {
            color: var(--color-main-blue-light);
        }

        .selection-reasons__card {
            border: 2px solid var(--color-main-blue-light);

        }

    }

    .aboutfg-plan__view {
        background: var(--color-gray-light);
        padding: 3rem;
        border-radius: 3rem;

        @media screen and (max-width: 768px) {
            border-radius: 1.5rem;

        }

        h3 {
            font-size: 2.4rem;
            font-weight: bold;
            margin-bottom: 3rem;
            text-align: center;

            @media screen and (max-width: 768px) {
                font-size: 1.6rem;
                font-weight: 600;
                margin-bottom: 2rem;

            }
        }

        .aboutfg-plan__view-inner {
            display: flex;
            gap: 30px 6%;
            max-width: 870px;
            margin: 0 auto;

            .aboutfg-plan__view-item {
                width: 47%;

                img {
                    width: 100%;
                    border-radius: 1rem;
                    box-shadow: 2px 2px 15px rgb(0 0 0 / 10%);
                }

                p {
                    padding: 1rem 0;
                    font-size: 1.8rem;
                    font-weight: 400;

                    @media screen and (max-width: 768px) {
                        padding-bottom: 0;
                        margin-bottom: 0;
                        font-size: 1.6rem;
                    }

                    @media screen and (max-width: 768px) {
                        .aboutfg-plan__view-item {
                            font-size: 4.26vw;
                        }
                    }
                }

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

            @media screen and (max-width: 768px) {
                .aboutfg-plan__view-item {
                    width: 100%;
                }
            }

        }

        @media screen and (max-width: 768px) {
            .aboutfg-plan__view-inner {
                flex-wrap: wrap;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .aboutfg-plan {
        padding: 10vw 5.5vw 6rem;
        border-radius: 5vw 5vw 0 0;
    }
}

.aboutfg-projects {
    padding: 10rem 0 0;
    background: var(--color-whitegray);

    .project-showcase_slide {
        position: relative;
        overflow: hidden;
        padding: 0 0 4rem;
    }

    .project-showcase_name {
        font-size: 2.8rem;
        line-height: 1.8;
        padding: 40px 0;

        @media screen and (max-width: 768px) {
            font-size: 2rem;
            line-height: 1.8;
            padding: 10px 0 0;
        }
    }
}

@media screen and (max-width: 768px) {
    .aboutfg-projects {
        padding: 4rem 0 0;

    }
}

.aboutfg-story {
    position: relative;
    z-index: 1;
    background: var(--color-white);

    .section-top-mystory {
        padding-top: 80px;

        @media (max-width: 768px) {
            padding-top: 40px;
            padding-bottom: 60px;
        }
    }
}

.aboutfg-impact {
    position: relative;
    padding: 14rem 0 8rem;
    background: var(--color-gray-dark);
    z-index: 0;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        background: url("../../images/about/impact_bg.png") no-repeat top center;
        background-size: 100%;
        z-index: -1;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        background: url("../../images/about/bg_earth.png") no-repeat bottom center;
        background-size: 100%;
        z-index: -1;
    }

    @media screen and (max-width: 768px) {
        &::after {
            background: url("../../images/about/impact_bg_sp.png") no-repeat top center;
            background-size: 100%;
        }

        &::before {
            background: url("../../images/about/bg_earth_sp.png") no-repeat bottom center;
            background-size: 100%;
        }
    }

    .aboutfg-section__title {
        .aboutfg-section__title-scroll {
            display: flex;
            width: max-content;
            animation: marquee 30s linear infinite;
            gap: 1em;
        }

        .aboutfg-section__title-main {
            -webkit-background-clip: text;
            -webkit-text-fill-color: var(--color-white);
            background-clip: text;
            color: var(--color-white);
        }

        @media screen and (max-width: 768px) {
            .aboutfg-section__title-main {
                font-size: 26.6vw;
                text-align: left;
                letter-spacing: 0.03em;
                word-break: keep-all;
                flex-shrink: 0;
            }
        }

        .aboutfg-section__title-sub {
            color: var(--color-white);
        }
    }

    .aboutfg-impact__info {
        width: min(1100px, 89vw);
        margin: 0 auto;

        .impact-info01 {
            display: flex;
            gap: 2.7%;
            justify-content: space-between;
            margin: 0 auto 4rem;

            &>div {
                width: 32.5%;
                background: rgb(255, 255, 255, 0.95);
                background: rgb(255, 255, 255, 0.95);
                padding: 2rem;
                border-radius: 1rem;
                text-align: center;

                h4 {
                    font-size: 1.8rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.25em;
                    margin-bottom: 1rem;

                    @media screen and (max-width: 768px) {
                        font-size: 1.4rem;
                    }
                }

                p {
                    font-size: 4.6rem;
                    font-family: var(--font-family-english);
                    line-height: 1;
                    color: var(--color-main-orange-light);
                    margin-bottom: 0;

                    span {
                        font-size: 1.6rem;
                        font-weight: bold;
                        color: var(--color-black);
                    }
                }
            }

            @media screen and (max-width: 768px) {
                &>div {
                    width: 100%;
                    padding: 1rem;

                    p {
                        margin-bottom: 0;
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            .impact-info01 {
                flex-wrap: wrap;
                gap: 3vw;
            }
        }

        .impact-info02 {
            max-width: min(808px, 95vw);
            margin: 0 auto 4rem;
            display: flex;
            gap: 10%;

            &>div {
                width: 45%;

                h4 {
                    font-size: 1.8rem;
                    color: var(--color-white);
                    text-align: center;
                    margin-bottom: 1em;
                }

                .impact-info02__image {
                    position: relative;

                    img {
                        width: 100%;
                    }

                    a {
                        position: absolute;
                        color: #FFF;
                        right: 12%;
                        bottom: 20%;

                        @media screen and (max-width: 768px) {
                            right: 10%;
                        }
                    }

                    .icon-arrow-right {
                        display: inline-block;
                        vertical-align: middle;
                        color: var(--color-white);
                        line-height: 1;
                        position: relative;
                        width: 0.5em;
                        height: 0.5em;
                        transform: translateX(-25%) rotate(45deg);
                        margin-left: 3px;

                        &::before,
                        &::after {
                            content: '';
                            position: absolute;
                            background: currentColor;
                            border-radius: 0.1em;
                        }

                        &::before {
                            top: 0;
                            left: 0;
                            right: 0;
                            height: 0.05em;
                        }

                        &::after {
                            top: 0;
                            right: 0;
                            bottom: 0;
                            width: 0.05em;
                        }
                    }
                }
            }

            @media screen and (max-width: 768px) {
                &>div {
                    width: 100%;
                }
            }
        }

        @media screen and (max-width: 768px) {
            .impact-info02 {
                flex-wrap: wrap;
                gap: 3vw;
            }
        }
    }

    .aboutfg-impact__info-caution {
        font-size: 1.3rem;
        text-align: center;
        color: var(--color-white);
    }


    .aboutfg-impact__bottom {
        margin: 0 auto;

        .centerline {
            width: fit-content;
            margin: 0 auto;
        }

        h3 {
            color: #FFF;
            text-align: center;
            margin-top: 0.5em;
        }

        .aboutfg-impact__bottom-banner {
            max-width: 600px;
            display: block;
            margin: 0 auto;

            img {
                width: 100%;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .aboutfg-impact__bottom {
            h3 {
                color: var(--color-white);
                text-align: center;
            }

        }
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.aboutfg-members {
    position: relative;
    padding: 10rem 0 30vw;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background: url(../../images/about/aboutfg-member-bg01.png)no-repeat center center;
        background-size: 100%;
        width: 464px;
        height: 900px;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        background: url(../../images/about/aboutfg-member-bg02.png)no-repeat center center;
        background-size: 100%;
        width: 549px;
        height: 758px;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    .aboutfg-section__title-sub {
        @media screen and (max-width: 768px) {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }

    .aboutfg-members__sliderbg {
        background: url("../../images/about/aboutfg-member_sliderbg.png") no-repeat center center;
        background-size: 480px;
        padding: 1rem 0;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-members__sliderbg {
            background: url("../../images/about/aboutfg-member_sliderbg.png") no-repeat center center;
            background-size: 95vw;
        }
    }

    .aboutfg-members__slider {
        width: 390px;
        margin: 0 auto;

        .splide__arrow {
            background: #fff;
            border: 2px solid rgba(33, 23, 21, 0.5);
            opacity: 1;
            height: 42px;
            width: 42px;
            transition: .2s;
            border-radius: 50%;
            top: 48%;
            z-index: 1;
        }

        .splide__arrow svg {
            fill: rgba(33, 23, 21, 0.5);
            height: 20px;
            width: 20px;
            border-radius: 10px;
        }

        .splide__arrow--prev {
            left: -10rem;
        }

        .splide__arrow--next {
            right: -10rem;
        }

        .members-item {
            width: 100%;
            max-width: min(350px, 89vw);
            box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
            margin: 2rem;
            border-radius: 2rem;
            background: var(--color-white);
            min-height: 500px;

            @media screen and (max-width: 768px) {
                width: 74%;
                min-height: unset;
                margin: 1rem auto;
            }

            .members-item__img {
                position: relative;
                width: 100%;
                height: auto;

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

                .member-item__role {
                    position: absolute;
                    bottom: 15px;
                    left: 10px;
                    background: var(--color-white);
                    font-size: 1.8rem;
                    font-weight: bold;
                    padding: 0 0.5em;
                    border-radius: 1em;

                    @media screen and (max-width: 768px) {
                        font-size: 4.26vw;
                    }
                }
            }

            .members-item__text {
                position: relative;
                padding: 3rem;

                @media screen and (max-width: 768px) {
                    padding: 20px 20px 25px;
                }

                .members-item__message {
                    position: relative;
                    font-family: var(--font-family-zenkaku-new);
                    font-weight: 900;
                    font-size: 2.4rem;

                    @media screen and (max-width: 768px) {
                        font-size: 5.3vw;
                    }

                    .quote-top {
                        position: absolute;
                        top: -0.25em;
                        left: -0.5em;
                        width: 14px;
                        height: 10px;
                        vertical-align: middle;

                        svg {
                            position: absolute;

                            width: 100%;
                        }
                    }

                    .quote-bottom {
                        position: absolute;
                        bottom: 0;
                        right: -0.5em;
                        display: inline-block;
                        width: 14px;
                        height: 10px;
                        vertical-align: middle;

                        svg {
                            position: absolute;
                            width: 100%;
                        }
                    }
                }

                .members-item__name {
                    font-size: 1.5rem;
                    font-weight: 400;
                    margin: 0;
                }
            }

            &.endmessage {
                img {
                    width: 100%;
                }
            }

            &.member01 {
                .icon-quote {
                    svg {
                        path {
                            fill: #F48503;
                        }
                    }
                }
            }

            &.member02 {
                .icon-quote {
                    svg {
                        path {
                            fill: #F48503;
                        }
                    }
                }
            }

            &.member03 {
                .icon-quote {
                    svg {
                        path {
                            fill: #F09703;
                        }
                    }
                }
            }

            &.member04 {
                .icon-quote {
                    svg {
                        path {
                            fill: #F09703;
                        }
                    }
                }
            }

            &.member05 {
                .icon-quote {
                    svg {
                        path {
                            fill: #CB9F1F;
                        }
                    }
                }
            }

            &.member06 {
                .icon-quote {
                    svg {
                        path {
                            fill: #8CA950;
                        }
                    }
                }
            }

            &.member07 {
                .icon-quote {
                    svg {
                        path {
                            fill: #18BBA8;
                        }
                    }
                }
            }

            &.member08 {
                .icon-quote {
                    svg {
                        path {
                            fill: #029EAC;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .aboutfg-members__slider {
            width: 100%;
        }
    }

    .aboutfg-members__link {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        .aboutfg-members__link {

            padding-bottom: 0;
        }
    }

    .aboutfg-members__fog {
        position: absolute;
        right: -60%;
        left: 0;
        margin: auto;
        bottom: 30vw;
        width: 284px;

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

    @media screen and (max-width: 950px) {
        .aboutfg-members__fog {
            display: none;
        }
    }
}

@media screen and (max-width: 768px) {
    .aboutfg-members {
        padding: 4rem 0 30vw;

    }
}

.aboutfg-message {
    background: linear-gradient(to right, #FC2403 0%, #FC5904 30%, #FC8203 100%);
    position: relative;
    width: 100%;
    padding: 0 0 10rem;
    z-index: 2;

    @media screen and (max-width: 768px) {
        padding-bottom: 6rem;
    }



    .aboutfg-message__topper,
    .aboutfg-message__footer {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 30vw;
        background: linear-gradient(to right, #FC2403 0%, #FC5904 30%, #FC8203 100%);
        mask-image: url("../../images/about/aboutfg_bgframe01.svg");
        -webkit-mask-image: url("../../images/about/aboutfg_bgframe01.svg");
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
    }

    .aboutfg-message__topper {
        top: -25vw;
        z-index: 2;
    }

    .aboutfg-message__toppershadow {
        position: absolute;
        top: -25vw;
        width: 100%;
        height: 30vw;
        filter: blur(50px);
        opacity: 0.1;
        z-index: 0;
    }

    .aboutfg-message__inner {
        position: relative;
        background: linear-gradient(to right, #FC2403 0%, #FC5904 30%, #FC8203 100%);
        z-index: 1;
        padding-top: 2rem;
    }

    .aboutfg-message__title {
        text-align: center;

        h3 {
            font-family: var(--font-family-zenkaku-new);
            font-size: 4.8rem;
            font-weight: 900;
            color: var(--color-white);
            margin-bottom: 0.75em;
        }

        @media screen and (max-width: 768px) {
            h3 {
                font-size: 9.5vw;
                text-align: center;
                letter-spacing: -0.05em;
                line-height: 1.6;
            }
        }
    }

    .aboutfg-message__text {
        margin-bottom: 6rem;

        @media screen and (max-width: 768px) {
            margin-bottom: 3rem;

        }

        p {
            font-size: 2rem;
            font-weight: bold;
            color: var(--color-white);
            text-align: center;
            margin-bottom: 1em;
            line-height: 2;
        }

        @media screen and (max-width: 768px) {
            p {
                font-size: 4.27vw;
            }
        }
    }

    .aboutfg-message__action {
        width: min(1100px, 89vw);
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .aboutfg-message__action-item {
            width: 48%;
            border-radius: 2rem;
            background: rgb(255, 255, 255, 0.95);
            padding: 2rem;
            display: grid;
            justify-content: center;
        }

        @media screen and (max-width: 768px) {
            .aboutfg-message__action-item {
                width: 100%;
                padding: 5.3vw;

            }
        }

        .action-item__image {
            width: fit-content;
            margin: 0 auto;

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

        @media screen and (max-width: 768px) {
            .action-item__image {
                width: 27.3vw;
                margin: 0 auto;
            }
        }

        h3 {
            margin: 0.5em auto 1em;
        }

        @media screen and (max-width: 768px) {
            h3 {
                font-size: 4vw;
                text-align: center;
                letter-spacing: unset;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .aboutfg-message__action {
            display: flex;
            flex-wrap: wrap;
            gap: 5vw;
        }
    }

    @media screen and (max-width: 768px) {
        .button01 {
            width: 74.6vw;
            font-size: 4.5vw;
        }

    }

}

.aboutfg-footer {
    position: relative;
    background: #FFF;
    z-index: 1;

    .splide-intro {
        .splide__track {
            width: 100%;
        }

        .splide__slide {
            height: 700px;

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


        }

        @media (max-width: 768px) {
            .splide__slide {
                height: 354px;
            }
        }

    }
}