@charset "UTF-8";

#energy {
    width: 100%;
    background-color: #fffad4;
    .energy-banner {
        padding-top: 15.2rem;
        width: 100%;
        @media screen and (max-width: 767px) {
            padding-top: 8.3rem;
        }
        & img {
            width: 100%;
            vertical-align: top;
        }
    }
    .banner-button-flex {
        display: flex;
        justify-content: center;
        background-color: #ffcc00;
        /* padding-top: 5.2rem; */
        padding-bottom: 5.7rem;
        width: 100%;
        gap: 3.3rem;
        @media screen and (max-width: 767px) {
            padding-bottom: 5rem;
            gap: 1rem;
            flex-direction: column;
            align-items: center;
        }
        & a {
            position: relative;
            width: 43.1rem;
            height: 9.3rem;
            background: #ffffff;
            border-radius: 5.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.2rem;
            @media screen and (max-width: 767px) {
                width: 90%;
                height: 6.4rem;
                gap: 0.8rem;
            }
            & span {
                font-style: normal;
                font-weight: 700;
                font-size: 2.4rem;
                line-height: 1;
                text-align: right;
                letter-spacing: 0.1em;
                color: #000000;
                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                }
            }
            & img {
                width: 2.1rem;
                vertical-align: top;
                @media screen and (max-width: 767px) {
                    width: 1.6rem;
                }
            }
        }
    }
    .intro-text {
        padding-top: 7rem;
        padding-bottom: 9rem;
        @media screen and (max-width: 767px) {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        .orange-title {
            font-style: normal;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1;
            text-align: center;
            letter-spacing: 0.08em;
            color: #ed6c00;
            margin-bottom: 4rem;
            @media screen and (max-width: 767px) {
                font-size: 1.8rem;
                margin-bottom: 3rem;
            }
        }
        .centered-text {
            font-style: normal;
            font-weight: 400;
            font-size: 1.8rem;
            line-height: 144%;
            text-align: center;
            letter-spacing: 0.08em;
            color: #000000;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
            }
        }
    }
    .group {
        margin-bottom: 9rem;
        @media screen and (max-width: 767px) {
            margin-bottom: 5rem;
        }
        .chart {
            width: 100%;
            & img {
                width: 100%;
                vertical-align: top;
            }
        }
        .chart4 {
            width: 91.3rem;
            margin: 0 auto;
            @media screen and (max-width: 767px) {
                width: 80%;
            }
        }
        .chart2,
        .chart4 {
            @media screen and (max-width: 767px) {
                width: 25.8rem;
                margin: 0 auto 1rem;
            }
        }

        .note {
            padding-top: 3.7rem;
            font-style: normal;
            font-weight: 400;
            font-size: 1.6rem;
            line-height: 150%;
            letter-spacing: 0.08em;
            color: #000000;
            @media screen and (max-width: 767px) {
                padding-top: 1rem;
                font-size: 1.2rem;
                line-height: 1.4;
            }
        }
        .btn-container {
            padding-top: 6rem;
            width: 100%;
            display: flex;
            justify-content: center;
            @media screen and (max-width: 767px) {
                padding-top: 3rem;
            }
            .orange-btn {
                width: 30.7rem;
                background: #ed6c00;
                border-radius: 4.45rem;
                height: 6.9rem;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.2rem;
                @media screen and (max-width: 767px) {
                    max-width: 28rem;
                    width: 100%;
                    height: 4.8rem;
                }
                & span {
                    font-style: normal;
                    font-weight: 700;
                    font-size: 1.6rem;
                    line-height: 1;
                    text-align: center;
                    letter-spacing: 0.05em;
                    color: #ffffff;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                    }
                }
                & img {
                    width: 2.4rem;
                    vertical-align: top;
                    @media screen and (max-width: 767px) {
                        width: 1.8rem;
                    }
                }
            }
        }
        .ellipse-flex {
            display: flex;
            justify-content: center;
            gap: 4.3rem;
            @media screen and (max-width: 767px) {
                gap: 1rem;
                flex-direction: column;
            }
            .ellipse {
                width: 37.2rem;
                @media screen and (max-width: 767px) {
                    width: 24rem;
                    margin: 0 auto;
                }
                & img {
                    width: 100%;
                    vertical-align: top;
                }
            }
        }
        .ellipse-sp {
            width: 100%;
            & img {
                width: 100%;
                vertical-align: top;
            }
        }
        .content-flex {
            display: flex;
            gap: 8.1rem;
            width: 100%;
            margin-bottom: 6rem;
            @media screen and (max-width: 767px) {
                gap: 1rem;
                margin-bottom: 3rem;
                flex-direction: column-reverse;
            }
            .text-contents {
                width: 100%;
                flex: 1;
                .title {
                    margin-bottom: 2rem;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2rem;
                    line-height: 1;
                    letter-spacing: 0.08em;
                    color: #000000;
                    @media screen and (max-width: 767px) {
                        font-size: 1.6rem;
                        margin-bottom: 1rem;
                    }
                }
                .description {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.6rem;
                    line-height: 1.5;
                    letter-spacing: 0.08em;
                    color: #000000;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        line-height: 1.4;
                    }
                }
            }
            .img-contents {
                width: 41.6rem;
                @media screen and (max-width: 767px) {
                    width: 100%;
                }
                & img {
                    width: 100%;
                    vertical-align: top;
                }
            }
        }
        .content-flex:last-child {
            margin-bottom: 0;
        }
        .label-flex {
            display: flex;
            width: 100%;
            gap: 4.5rem;
            margin-bottom: 4rem;
            @media screen and (max-width: 767px) {
                gap: 1.5rem;
                margin-bottom: 3rem;
                flex-direction: column;
            }
            .label {
                padding: 1rem 1.7rem 1.3rem;
                box-sizing: border-box;
                font-style: normal;
                font-weight: 700;
                font-size: 2rem;
                line-height: 1;
                text-align: center;
                letter-spacing: 0.08em;
                color: #ffffff;
                width: 19.7rem;
                height: 3.9rem;
                background: #ed6c00;
                border-radius: 1.95rem;
                white-space: nowrap;
                display: flex;
                justify-content: center;
                align-items: center;
                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                    padding: 0.6rem 1.2rem 0.9rem;
                    width: 18rem;
                    height: auto;
                    margin: 0 auto;
                }
            }
            .label-description {
                width: 100%;
                flex: 1;
                font-style: normal;
                font-weight: 400;
                font-size: 1.6rem;
                line-height: 1.5;
                letter-spacing: 0.08em;
                color: #000000;
                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 1.4;
                }
            }
        }
    }
    .faq {
        padding-bottom: 9rem;
        @media screen and (max-width: 767px) {
            padding-bottom: 5rem;
        }
        .faq-container {
            background-color: #ffffff;
            margin-bottom: 3rem;
            position: relative;
            padding: 3rem 8.7rem 3rem 6.5rem;
            box-sizing: border-box;
            transition: all 0.3s ease-in;
            cursor: pointer;
            @media screen and (max-width: 767px) {
                margin-bottom: 2rem;
                padding: 2rem 4rem 2rem 2rem;
            }
            .question {
                display: flex;
                gap: 1.6rem;
                align-items: center;
                @media screen and (max-width: 767px) {
                    gap: 1rem;
                }
                .q {
                    width: 3.4rem;
                    height: 3.4rem;
                    border-radius: 3.4rem;
                    background-color: #ed6c00;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: var(--monst);
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2rem;
                    line-height: 2.4rem;
                    letter-spacing: 0.08em;
                    color: #ffffff;
                    @media screen and (max-width: 767px) {
                        width: 2.8rem;
                        height: 2.8rem;
                        border-radius: 2.8rem;
                        font-size: 1.6rem;
                        line-height: 1;
                    }
                }
                .question-text {
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2.2rem;
                    line-height: 2.6rem;
                    letter-spacing: 0.08em;
                    color: #ed6c00;
                    flex: 1;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        line-height: 1.4;
                    }
                }
                .open {
                    right: 3.2rem;
                    top: 4.5rem;
                    position: absolute;
                    width: 2.74rem;
                    height: 0.394rem;
                    background: #ed6c00;
                    @media screen and (max-width: 767px) {
                        right: 1.5rem;
                        top: 3rem;
                        width: 2rem;
                        height: 0.2rem;
                    }
                    &:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 2.74rem;
                        height: 0.394rem;
                        background: #ed6c00;
                        transform: rotate(90deg);
                        transition: all 0.3s ease-in;
                        @media screen and (max-width: 767px) {
                            width: 2rem;
                            height: 0.2rem;
                        }
                    }
                }
                .open.opened {
                    &:after {
                        transform: rotate(0deg);
                    }
                }
            }
            .answer {
                display: none;
                padding-top: 2rem;
                transition: all 0.3s ease-in;
                @media screen and (max-width: 767px) {
                    padding-top: 1rem;
                }
                .answer-text {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.6rem;
                    line-height: 1.5;
                    text-align: justify;
                    letter-spacing: 0.1em;
                    color: #000000;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        line-height: 1.4;
                    }
                    & a {
                        text-decoration: underline;
                    }
                }
            }
            .answer.opened {
                display: block;
                transition: all 0.3s ease-in;
            }
        }
    }
    .contact {
        background-color: #ffcc00;
        width: 100%;
        padding: 7rem 3rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        @media screen and (max-width: 767px) {
            padding: 5rem 2rem;
        }
        .contact-header {
            margin-bottom: 4rem;
            font-style: normal;
            font-weight: 700;
            font-size: 2.6rem;
            line-height: 1;
            text-align: center;
            letter-spacing: 0.1em;
            color: #000000;
            @media screen and (max-width: 767px) {
                margin-bottom: 3rem;
                font-size: 2rem;
            }
        }
        .contact-btn {
            .button {
                border: 0.3rem solid #ed6c00;
                background-color: #fff;
                padding: 2.6rem 3rem 2.7rem;
                box-sizing: border-box;
                border-radius: 1rem;
                width: 46.3rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                @media screen and (max-width: 767px) {
                    padding: 2rem;
                    width: 30rem;
                }
                .line1 {
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2.2rem;
                    line-height: 1.36;
                    text-align: center;
                    letter-spacing: 0.1em;
                    color: #ed6c00;
                    @media screen and (max-width: 767px) {
                        font-size: 1.6rem;
                    }
                }
                .flex-text-icon {
                    display: flex;
                    align-items: center;
                    gap: 1.1rem;
                    @media screen and (max-width: 767px) {
                        gap: 0.8rem;
                    }
                    .line2 {
                        font-style: normal;
                        font-weight: 700;
                        font-size: 2.6rem;
                        line-height: 1;
                        text-align: right;
                        letter-spacing: 0.1em;
                        color: #000000;
                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                        }
                    }
                    & img {
                        width: 2.4rem;
                        @media screen and (max-width: 767px) {
                            width: 1.8rem;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .scrollable {
        position: relative;
        display: block;
        overflow-x: scroll; /* Change from auto to scroll */
        -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
        white-space: nowrap; /* Prevent wrapping */
        width: 100%;
        & img {
            width: 70rem !important;
            max-width: none !important;

        }
    }
    .scrollable::before {
        content: "←";
        position: absolute;
        right: 0;
        top: 0;
        animation: moveArrow 3s linear infinite;
        font-size: 20px;
        color: #000000bb;
        border: 4px solid #000000bb;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease-in-out;
        opacity: 1;
    }

    .scrollable.scrolling::before {
        display: none;
    }
}

@keyframes moveArrow {
    0% {
        right: 0;
    }
    100% {
        right: 100%;
    }
}


.pageup {
    & img {
        filter: brightness(0) saturate(100%) invert(49%) sepia(36%) saturate(3694%) hue-rotate(3deg) brightness(94%) contrast(104%) !important;
    }
}