@charset "UTF-8";

/* -------------------------------- */
/* ホロンクリエイト style css */
/* -------------------------------- */

* {
    position: relative;
}

body {
    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f0efee;
    line-height: inherit;
}

    body:has(.modal-container) {
        overflow :hidden;
    }

div {
    box-sizing: border-box;
}

h2 h3 p {
    margin: 0;
    padding: 0;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

dl,
dd {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.button:active {
    background-color: #c6e2e5 !important;
    border-color: #c6e2e5 !important;
}

.button.disable {
    opacity: 0.5;
    cursor: default !important;
}

    .button.disable:active {
        background-color: #fff !important;
        opacity: 0.5;
    }

.no-visible {
    visibility: hidden;
}

.container {
    height: 100vh;
    background-color: #003686;
}

header {
    background-color: #f0efee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1vw;
    padding-bottom: 0vw;
    padding-left: 1.8vw;
    padding-right: 1.8vw;
    flex-wrap: wrap;
    position: unset;
}

    header .d-flex.logo {
        align-self: flex-start;
    }

    header .d-flex {
        display: flex;
        align-items: center;
    }

        header .d-flex .logo-img {
            width: 13.96vw;
        }

            header .d-flex .logo-img img {
                width: 13.96vw;
            }

        header .d-flex .spot-box .company-name {
            font-size: 1.15vw;
        }

        header .d-flex .spot-box .office-name {
            font-size: 1.56vw;
            font-weight: bold;
            margin-left: 0vw;
            color: #2e2725;
        }

        header .d-flex .event-banner {
            width: 25.47vw;
            height: 4.43vw;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            /*border: solid 0.3vw #dec9a6;
            border-radius: 2.4vw;
            overflow: hidden;*/
        }

            header .d-flex .event-banner.new .event-counter {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.6vw;
                height: 1.8vw;
                border-radius: 0.9vw;
                background-color: #f34d4d;
                font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                font-size: 1.6vw;
                line-height: 1.8vw;
                color: #fff;
                font-weight: bold;
                right: 0.1vw;
                top: -0.3vw;
            }

            header .d-flex .event-banner .banner-img {
                width: 26vw;
                height: 4.7vw;
                border-radius: 2.35vw;
                background-size: cover;
                background-repeat: no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                header .d-flex .event-banner .banner-img.hidden {
                    display: none;
                }

            header .d-flex .event-banner img {
                width: 26vw;
                height: 4.7vw;
            }

                header .d-flex .event-banner img.hidden {
                    display: none;
                }

            header .d-flex .event-banner .event-counter {
                position: absolute;
                display: none;
            }

            header .d-flex .event-banner:not(.new)::after {
                content: "イベントなし";
                font-size: 1.5vw;
            }

        header .d-flex .weather-info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            -moz-column-gap: 1vw;
            column-gap: 1vw;
            margin-left: 1.6vw;
            padding-right: 2.1vw;
            padding-left: 5vw;
            height: 4.2vw;
            line-height: 3.5vw;
            width: 15.63vw;
            border-radius: 2.1vw;
            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
            font-size: 2vw;
            font-weight: bold;
            text-align: right;
            cursor: pointer;
        }

            header .d-flex .weather-info .max-temp {
                width: -moz-fit-content;
                width: fit-content;
                font-size: 1.77vw;
                line-height: 1.77vw;
                color: #f0582c;
            }

                header .d-flex .weather-info .max-temp::before {
                    content: "最高";
                    display: block;
                    font-size: 0.94vw;
                    color: #2e2725;
                    line-height: 0.94vw;
                    text-align: left;
                    padding-bottom: 0.2vw;
                }

            header .d-flex .weather-info .mini-temp {
                width: -moz-fit-content;
                width: fit-content;
                font-size: 1.77vw;
                line-height: 1.77vw;
                color: #3d8dc6;
            }

                header .d-flex .weather-info .mini-temp::before {
                    content: "最低";
                    display: block;
                    font-size: 0.94vw;
                    color: #2e2725;
                    line-height: 0.94vw;
                    text-align: left;
                    padding-bottom: 0.2vw;
                }

            header .d-flex .weather-info.clear {
                background: #fff url(../../img/Primary.svg) 1.5vw/2.5vw no-repeat;
            }

            header .d-flex .weather-info.icon1 {
                background: #fff url(../../img/icon_weather_fine.svg) 1vw/3.5vw no-repeat;
            }

            header .d-flex .weather-info.icon2 {
                background: #fff url(../../img/icon_weather_cloudiness.svg) 1vw/3.5vw no-repeat;
            }

            header .d-flex .weather-info.icon3 {
                background: #fff url(../../img/icon_weather_rain.svg) 1vw/3.5vw no-repeat;
            }

            header .d-flex .weather-info.icon4 {
                background: #fff url(../../img/icon_weather_rain_or_snow.svg) 1vw/3.5vw no-repeat;
            }

            header .d-flex .weather-info.icon5 {
                background: #fff url(../../img/icon_weather_snow.svg) 1vw/3.5vw no-repeat;
            }

        header .d-flex .notice {
            margin-left: 1.6vw;
            position: relative;
            height: 4.2vw;
            width: 6.8vw;
            border-radius: 2.1vw;
            background: #fff url(../../img/icon_bullhorn.svg) 50%/2.5vw no-repeat;
            cursor: pointer;
        }

            header .d-flex .notice.new::after {
                content: " ";
                width: 3.33vw;
                height: 1.88vw;
                position: absolute;
                right: -0.3vw;
                top: -0.3vw;
                background: url(../../img/icon_new.svg) no-repeat 0 / 3.33vw 1.88vw;
            }

    header .update-date {
        height: 1.3vw;
        width: 3100vw;
        text-align: right;
        font-size: 0.9vw;
    }

        header .update-date .t-bold {
            font-weight: bold;
        }

.store-full-screen > .contents {
    height: 48.96vw;
}

.contents {
    background-color: #f0efee;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1vw;
}

    .contents.menu-box {
        display: grid;
        justify-content: center;
        align-content: center;
        grid-template-columns: repeat(auto-fit, 20.8vw);
        grid-template-rows: repeat(auto-fit, 11.8vw);
        grid-auto-flow: column;
        row-gap: 2.6vw;
        -moz-column-gap: 2.6vw;
        column-gap: 2.6vw;
        column-gap: 1.56vw;
        padding: 1.5vw 11.2vw;
    }

        .contents.menu-box .card {
            width: 20.8vw;
            height: 11.46vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.7vw;
            font-weight: bold;
            text-align: center;
            line-height: 1.9vw;
            padding-top: 5vw;
            color: #003686;
            background-color: #fff;
            border: 0.31vw solid #d6d7db;
            border-radius: 1vw;
            -webkit-text-stroke: 0.1vw #fff;
            paint-order: stroke;
            cursor: pointer;
        }

            .contents.menu-box .card.information-setting {
                background: url(../../img/menu_setting.svg) #fff no-repeat 50% 30%/4.17vw;
            }

            .contents.menu-box .card.target-value-setting {
                background: url(../../img/menu_goal_setting.svg) #fff no-repeat 50% 30%/4.17vw;
            }

            .contents.menu-box .card.energy-saving-setting {
                background: url(../../img/menu_action_setting.svg) #fff no-repeat 50% 20%/4.17vw;
            }

            .contents.menu-box .card.video-library {
                background: url(../../img/menu_video.svg) #fff no-repeat 50% 20%/4.17vw;
            }

            .contents.menu-box .card.quiz {
                background: url(../../img/menu_q.svg) #fff no-repeat 50% 30%/4.17vw;
            }

            .contents.menu-box .card.contact-us {
                background: url(../../img/menu_question.svg) #fff no-repeat 50% 30%/4.17vw;
            }

            .contents.menu-box .card.web-manual {
                background: url(../../img/menuj_manual.svg) #fff no-repeat 50% 30%/4.17vw;
            }

            .contents.menu-box .card.logout {
                background: url(../../img/menu_logout.svg) #fff no-repeat 50% 30%/4.17vw;
            }

    .contents .top-wrapper {
        display: flex;
        justify-content: center;
        height: -moz-fit-content;
        height: fit-content;
    }

    .contents .graph-area .information {
        display: flex;
        width: 71.1vw;
        height: 5.7vw;
        background: #f5f5f5;
        margin-right: 1.8vw;
        position: relative;
    }

        .contents .graph-area .information .day-result {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 45vw;
            padding-bottom: 0.5vw;
            padding-left: 4.2vw;
            font-size: 1.6vw;
            font-weight: bold;
            line-height: 1.1em;
            background: url(../../img/icon_date.svg) 0.8vw/3.6vw no-repeat;
            color: #003686;
        }

            .contents .graph-area .information .day-result .no-wrap {
                white-space: nowrap;
            }

        .contents .graph-area .information .comparison {
            width: 9.38vw;
            height: 2.08vw;
            line-height: 2.1vw;
            padding-left: 0.8vw;
            border-radius: 0.5vw;
            background-color: #fff;
            font-size: 1.25vw;
            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
            font-weight: normal;
        }

            .contents .graph-area .information .comparison.increase {
                background-image: url("../../img/icon_arrow_up_red.svg");
                background-size: 2vw;
                background-position: 95%;
                background-repeat: no-repeat;
                color: #f34d4d;
            }

            .contents .graph-area .information .comparison.decrease {
                background-image: url("../../img/icon_arrow_down2.svg");
                background-size: 2vw;
                background-position: 95%;
                background-repeat: no-repeat;
                color: #0c9398;
            }

        .contents .graph-area .information .segment-line {
            width: 0.3vw;
            min-width: 1px;
            background-color: #d6d7db;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw;
            border-radius: clamp(0.5px, 0.15vw, 0.15vw);
        }

        .contents .graph-area .information .electricity-consumption {
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 5.2vw;
            background: url(../../img/icon_plug-circle-bolt.svg) 0.8vw/3.6vw no-repeat;
            width: 46.6vw;
            font-size: 1.6vw;
            font-weight: bold;
            color: #003686;
        }

            .contents .graph-area .information .electricity-consumption.increase::before {
                content: "　";
                position: absolute;
                width: 3.8vw;
                height: 3.8vw;
                right: 0.5vw;
                background-image: url("../../img/icon_arrow_up_red.svg");
                background-size: 3.8vw;
                background-repeat: no-repeat;
            }

            .contents .graph-area .information .electricity-consumption.decrease .amount {
                border-color: #09aaaf;
                color: #0c9398;
            }

            .contents .graph-area .information .electricity-consumption.decrease::before {
                content: "　";
                position: absolute;
                width: 3.8vw;
                height: 3.8vw;
                right: 0.5vw;
                background-image: url("../../img/icon_arrow_down2.svg");
                background-size: 3.8vw;
                background-repeat: no-repeat;
            }

            .contents .graph-area .information .electricity-consumption #up-down-amount-unit {
                color: #333;
            }

            .contents .graph-area .information .electricity-consumption .amount {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                background-color: #fff;
                border: solid 0.2vw #f34d4d;
                border-radius: 0.5vw;
                width: 10.7vw;
                height: 3.4vw;
                text-align: right;
                padding-right: 0.5vw;
                padding-bottom: 0.2vw;
                margin-left: 1.5vw;
                margin-right: 0.3vw;
                color: #f34d4d;
                font-size: 2.3vw;
                font-weight: bold;
                font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
            }

    .contents .graph-area .drawing-area {
        margin-right: 1.8vw;
    }

        .contents .graph-area .drawing-area ul {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            -moz-column-gap: 1.82vw;
            column-gap: 1.82vw;
            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw;
        }

            .contents .graph-area .drawing-area ul li {
                display: block;
                font-size: 1.3vw;
                height: 2.6vw;
                line-height: 2.6vw;
            }

                .contents .graph-area .drawing-area ul li .icon-info {
                    width: 2.4vw;
                    cursor: pointer;
                }

                .contents .graph-area .drawing-area ul li:nth-of-type(1) {
                    background: url(../../img/icon_legend1.svg) 0% 50%/2.6vw no-repeat;
                    padding-left: 2.3dvw;
                }

                .contents .graph-area .drawing-area ul li:nth-of-type(2) {
                    background: url(../../img/icon_legend2.svg) 0% 50%/2.6vw no-repeat;
                    padding-left: 2.9dvw;
                }

        .contents .graph-area .drawing-area .drawing-graph {
            height: 27.1vw;
        }

        .contents .graph-area .drawing-area .highcharts-tooltip-box + text {
            font-weight: bold;
        }

    .contents .goal-rank {
        width: 24vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #003686;
    }

        .contents .goal-rank .goal {
            width: 24vw;
            background-color: #f5f5f5;
            border-radius: 0.5vw;
            padding: 0vw 0.8vw 0.5vw 0.5vw;
            font-size: 1.67vw;
            font-weight: bold;
        }

            .contents .goal-rank .goal .d-flex {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-left: 1vw;
                margin-top: 1vw;
                margin-bottom: 1vw;
                white-space: nowrap;
            }

            .contents .goal-rank .goal .selectbox {
                width: 16.9vw;
                margin-left: 0.51vw;
                z-index: 99;
            }

                .contents .goal-rank .goal .selectbox select {
                    color: #003686;
                }

            .contents .goal-rank .goal .target {
                display: flex;
                margin-top: 0vw;
            }

                .contents .goal-rank .goal .target .title {
                    width: 6.3vw;
                    height: 7.7vw;
                    text-align: center;
                    padding-top: 3.3vw;
                    background: url(../../img/flag.svg) no-repeat 65% 15%/55%;
                }

                    .contents .goal-rank .goal .target .title .icon-info {
                        position: absolute;
                        top: 0;
                        width: 1.77vw;
                        cursor: pointer;
                    }

                .contents .goal-rank .goal .target .segment-line {
                    width: 5px;
                    background-color: #d6d7db;
                    margin-top: 0.5vw;
                    margin-bottom: 0.5vw;
                    margin-left: 1vw;
                    border-radius: clamp(0.5px, 0.15vw, 0.15vw);
                }

                .contents .goal-rank .goal .target .money {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.19vw;
                    font-weight: bold;
                    color: #333;
                }

                    .contents .goal-rank .goal .target .money span {
                        width: 3vw;
                        font-size: 1.3vw;
                        line-height: 1.2;
                        color: #333;
                        margin-left: 0.1vw;
                        margin-right: 1vw;
                        display: flex;
                        align-items: center;
                    }

                .contents .goal-rank .goal .target .ratio {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.4vw;
                    font-weight: bold;
                    color: #333;
                    padding-right: 1vw;
                }

                    .contents .goal-rank .goal .target .ratio.decrease {
                        background: url(../../img/icon_arrow_down.svg) no-repeat 100% 72%/3.1vw;
                    }

                    .contents .goal-rank .goal .target .ratio.increase {
                        background: url(../../img/icon_arrow_up.svg) no-repeat 100% 72%/3.1vw;
                    }

                    .contents .goal-rank .goal .target .ratio span {
                        width: 3vw;
                        font-size: 1.3vw;
                        margin-left: 1vw;
                        padding-top: 1vw;
                        color: #333;
                    }

            .contents .goal-rank .goal .prediction {
                display: flex;
            }

                .contents .goal-rank .goal .prediction .title {
                    width: 6.3vw;
                    height: 7.7vw;
                    text-align: center;
                    padding-top: 4.6vw;
                    background: url(../../img/icon_yosoku.svg) no-repeat 51% 28%/3.44vw;
                    font-size: 1.46vw;
                }

                    .contents .goal-rank .goal .prediction .title .icon-info {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 1.77vw;
                        cursor: pointer;
                    }

                .contents .goal-rank .goal .prediction .segment-line {
                    width: 5px;
                    background-color: #d6d7db;
                    margin-top: 0.5vw;
                    margin-bottom: 0.5vw;
                    margin-left: 0.4vw;
                    border-radius: clamp(0.5px, 0.15vw, 0.15vw);
                }

                .contents .goal-rank .goal .prediction .money {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    color: #333;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.4vw;
                    font-weight: bold;
                }

                    .contents .goal-rank .goal .prediction .money.decrease {
                        color: #0c9398;
                    }

                    .contents .goal-rank .goal .prediction .money.increase {
                        color: #f34d4d;
                    }

                    .contents .goal-rank .goal .prediction .money span {
                        width: 3vw;
                        font-size: 1.3vw;
                        margin-left: 0.1vw;
                        margin-right: 1vw;
                        padding-top: 1vw;
                        color: #333;
                    }

                .contents .goal-rank .goal .prediction .ratio {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    color: #333;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.4vw;
                    font-weight: bold;
                    padding-right: 1vw;
                }

                    .contents .goal-rank .goal .prediction .ratio.decrease {
                        background: url(../../img/icon_arrow_down2.svg) no-repeat 100% 72%/3.1vw;
                        color: #0c9398;
                    }

                    .contents .goal-rank .goal .prediction .ratio.increase {
                        background: url(../../img/icon_arrow_up_red.svg) no-repeat 100% 72%/3.1vw;
                        color: #f34d4d;
                    }

                    .contents .goal-rank .goal .prediction .ratio span {
                        width: 3vw;
                        font-size: 1.3vw;
                        margin-left: 0.8vw;
                        padding-top: 1vw;
                        color: #333;
                    }

        .contents .goal-rank .rank {
            width: 24vw;
            margin-top: 1vw;
            padding: 0.7vw 0.5vw 0.7vw 0.5vw;
            background-color: #f5f5f5;
            border-radius: 0.5vw;
            font-size: 1.67vw;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

            .contents .goal-rank .rank .title {
                width: 6.3vw;
                text-align: center;
                padding-top: 2.8vw;
                right: 0.25vw;
                background: url(../../img/icon_medal_l-on.svg) no-repeat 50% 15%/2.5vw;
            }

                .contents .goal-rank .rank .title .icon-info {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1.77vw;
                    cursor: pointer;
                }

            .contents .goal-rank .rank .internal {
                display: flex;
                padding-bottom: 0.3vw;
                width: 16vw;
            }

                .contents .goal-rank .rank .internal .segment-line {
                    width: 5px;
                    background-color: #d6d7db;
                    margin-right: 1vw;
                    border-radius: clamp(0.5px, 0.15vw, 0.15vw);
                }

                    .contents .goal-rank .rank .internal .segment-line.upper {
                        margin-bottom: 0.25vw;
                    }

                    .contents .goal-rank .rank .internal .segment-line.under {
                        margin-top: 0.25vw;
                    }

                .contents .goal-rank .rank .internal .details {
                    width: 100%;
                }

                    .contents .goal-rank .rank .internal .details .icon-company {
                        width: 1.9vw;
                        margin-right: 0.5vw;
                    }

                    .contents .goal-rank .rank .internal .details .icon-JP {
                        width: 1.9vw;
                        margin-right: 0.5vw;
                    }

                .contents .goal-rank .rank .internal .title2 {
                    font-size: 1.5vw;
                    display: flex;
                    justify-items: center;
                    margin-bottom: 0.3vw;
                }

                .contents .goal-rank .rank .internal .d-flex {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }

                    .contents .goal-rank .rank .internal .d-flex > div {
                        padding-left: 0vw;
                    }

                        .contents .goal-rank .rank .internal .d-flex > div img {
                            width: 2.9vw;
                        }

                    .contents .goal-rank .rank .internal .d-flex .rank-up {
                        width: 2.08vw;
                        height: 2.14vw;
                        background: url(../../img/icon_arrow_up.svg) no-repeat 50%;
                    }

                    .contents .goal-rank .rank .internal .d-flex .rank-down {
                        width: 2.08vw;
                        height: 2.14vw;
                        background: url(../../img/icon_arrow_up.svg) no-repeat 50%;
                        transform: rotate(180deg);
                    }

                .contents .goal-rank .rank .internal .order {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    font-size: 2.19vw;
                    color: #333;
                    line-height: 1vw;
                    width: 10.5vw;
                    text-align: right;
                    padding-left: 0vw !important;
                    padding-right: 0vw;
                    white-space: nowrap;
                }

                    .contents .goal-rank .rank .internal .order span {
                        font-size: 1.2vw;
                        right: 0.5vw;
                    }

                        .contents .goal-rank .rank .internal .order span.unit {
                            padding-left: 0vw;
                            padding-right: 0vw;
                            display: inline-table;
                            width: 2vw;
                        }

                        .contents .goal-rank .rank .internal .order span.rank-unit {
                            width: 100%;
                            display: inline-block;
                            right: 0.5vw;
                        }

            .contents .goal-rank .rank .target {
                display: flex;
                margin-top: 1vw;
            }

                .contents .goal-rank .rank .target .money {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.5vw;
                    font-weight: bold;
                }

                    .contents .goal-rank .rank .target .money span {
                        font-size: 1.3vw;
                        margin-left: 1vw;
                        padding-top: 1vw;
                    }

                .contents .goal-rank .rank .target .ratio {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    width: 16vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.5vw;
                    font-weight: bold;
                }

                    .contents .goal-rank .rank .target .ratio.down {
                        background: url(../../img/icon_arrow_down.svg) no-repeat 33% 75%/2.5vw;
                    }

                    .contents .goal-rank .rank .target .ratio span {
                        font-size: 1.3vw;
                        margin-left: 1vw;
                        padding-top: 1vw;
                    }

            .contents .goal-rank .rank .prediction {
                display: flex;
                margin-top: 1vw;
            }

                .contents .goal-rank .rank .prediction .title {
                    width: 6.3vw;
                    height: 7.7vw;
                    text-align: center;
                    padding-top: 4.3vw;
                    background: url(../../img/icon_yosoku.svg) no-repeat 51% 28%/65%;
                    font-size: 1.1vw;
                }

                .contents .goal-rank .rank .prediction .segment-line {
                    width: 0.3vw;
                    min-width: 1px;
                    background-color: #fff;
                    margin-top: 0.5vw;
                    margin-bottom: 0.5vw;
                    border-radius: clamp(0.5px, 0.15vw, 0.15vw);
                }

                .contents .goal-rank .rank .prediction .money {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    color: #0c9398;
                    width: 17vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.5vw;
                    font-weight: bold;
                }

                    .contents .goal-rank .rank .prediction .money span {
                        font-size: 1.3vw;
                        margin-left: 1vw;
                        padding-top: 1vw;
                    }

                .contents .goal-rank .rank .prediction .ratio {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    color: #0c9398;
                    width: 17vw;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    height: 3.7vw;
                    font-size: 2.5vw;
                    font-weight: bold;
                }

                    .contents .goal-rank .rank .prediction .ratio.down {
                        background: url(../../img/icon_arrow_down2.svg) no-repeat 33% 75%/2.5vw;
                    }

                    .contents .goal-rank .rank .prediction .ratio span {
                        font-size: 1.3vw;
                        margin-left: 1vw;
                        padding-top: 1vw;
                    }

    .contents .myscore-area {
        background: #fff;
        width: 96.4vw;
        height: 47.3vw;
        display: flex;
        margin-left: 1.8vw;
        margin-right: 1.8vw;
        margin-bottom: 1vw;
        padding: 1vw;
        border-radius: 0.8vw;
    }

        .contents .myscore-area .energy-graph-area {
            width: 49vw;
            height: 44.8vw;
            background: #f0efee;
        }

            .contents .myscore-area .energy-graph-area .header {
                height: 3.75vw;
                width: 100%;
                text-align: center;
                font-weight: bold;
                font-size: 1.77vw;
                color: #003686;
                line-height: 2.95vw;
            }

                .contents .myscore-area .energy-graph-area .header .date {
                    font-size: 1.46vw;
                    line-height: 1.46vw;
                    height: 1.46vw;
                    padding-top: 0.5vw;
                }

                .contents .myscore-area .energy-graph-area .header .btn-info {
                    width: 2.4vw;
                    position: absolute;
                    right: 1vw;
                    top: 80%;
                    transform: translateY(-50%);
                    cursor: pointer;
                }

            .contents .myscore-area .energy-graph-area .report-area {
                display: flex;
                margin-left: 1vw;
                margin-right: 1vw;
                margin-top: 0.5vw;
                justify-content: space-around;
            }

                .contents .myscore-area .energy-graph-area .report-area .results {
                    width: 30.9vw;
                    color: #003686;
                }

                    .contents .myscore-area .energy-graph-area .report-area .results .title {
                        font-size: 1.6vw;
                        font-weight: bold;
                    }

                    .contents .myscore-area .energy-graph-area .report-area .results .results-txt {
                        margin-top: 0.5vw;
                        text-indent: 3.1vw;
                        font-size: 1.6vw;
                        background-image: linear-gradient(180deg, transparent 2.8vw, #cacaca 2px);
                        background-size: 100% 2.9vw; /* 行の高さ */
                        line-height: 2.9vw; /* 文字の高さ */
                        padding-bottom: 2px; /* 最終行の下にも罫線を引く */
                        position: relative;
                    }

                        .contents .myscore-area .energy-graph-area .report-area .results .results-txt::before {
                            content: "";
                            background: url(../../img/icon_pen.svg) no-repeat 0/1.9vw;
                            position: absolute;
                            top: 0.5vw;
                            left: 0.3vw;
                            width: 1.9vw;
                            height: 1.9vw;
                            display: block;
                        }

                .contents .myscore-area .energy-graph-area .report-area .score-area {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }

                    .contents .myscore-area .energy-graph-area .report-area .score-area .score {
                        width: 14.1vw;
                        height: 2.6vw;
                        background-color: #fff;
                        border-radius: 0.4vw;
                        font-size: 1.6vw;
                        font-weight: bold;
                        color: #003686;
                        padding-left: 1vw;
                        padding-right: 1vw;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        white-space: nowrap;
                    }

                        .contents .myscore-area .energy-graph-area .report-area .score-area .score.total {
                            height: 4.69vw;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }

                            .contents .myscore-area .energy-graph-area .report-area .score-area .score.total .score-value {
                                font-size: 1.77vw;
                                line-height: 1.77vw;
                                text-align: right;
                            }

                                .contents .myscore-area .energy-graph-area .report-area .score-area .score.total .score-value .denominator-value {
                                    font-size: 1.35vw;
                                    line-height: 1.35vw;
                                }

                        .contents .myscore-area .energy-graph-area .report-area .score-area .score span {
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            font-size: 1.8vw;
                            color: #333;
                        }

            .contents .myscore-area .energy-graph-area .radar-chart-area .d-flex {
                display: flex;
                align-items: center;
            }

            .contents .myscore-area .energy-graph-area .radar-chart-area .icon img {
                width: 4.2vw;
                height: 4.2vw;
            }

            .contents .myscore-area .energy-graph-area .radar-chart-area .card {
                background-color: #fff;
                width: 8.3vw;
                height: 6.8vw;
                border-radius: 0.4vw;
                padding: 0.5vw 0.4vw;
                margin-left: 0.8vw;
                margin-right: 0.8vw;
                border: 1px solid #d6d7db;
            }

                .contents .myscore-area .energy-graph-area .radar-chart-area .card .title {
                    border-bottom: 0.1vw solid #929292;
                    font-size: 1.04vw;
                    font-weight: bold;
                    text-align: center;
                    line-height: 1.25vw;
                    padding-bottom: 0.5vw;
                    height: 3vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .title.electricity-usage {
                        color: #e86161;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .title.electricity-demand {
                        color: #6e7bbe;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .title.savings-check {
                        color: #e79460;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .title.artificial-intelligence {
                        color: #509b81;
                        line-height: 2em;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .title.temperature {
                        color: #b770c9;
                    }

                .contents .myscore-area .energy-graph-area .radar-chart-area .card .score {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    font-size: 1.8vw;
                    font-weight: bold;
                    padding-top: 0.2vw;
                }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .score.frequency {
                        justify-content: end;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .score.evaluation {
                        justify-content: center;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .score img {
                        width: 1.5vw;
                    }

                    .contents .myscore-area .energy-graph-area .radar-chart-area .card .score span {
                        font-size: 1.3vw;
                        padding-left: 0.3vw;
                    }

        .contents .myscore-area .ranking-area {
            height: 100%;
        }

            .contents .myscore-area .ranking-area .tab-container {
                padding-left: 1.5vw;
                height: 100%;
                display: grid;
                grid-template-rows: max-content 1fr;
            }

                .contents .myscore-area .ranking-area .tab-container .tabs {
                    display: flex;
                    justify-content: center;
                    width: 43.2vw;
                    height: 5.2vw;
                    border-bottom: solid 0.3vw #d6d7db;
                    position: relative;
                    color: #003686;
                }

                    .contents .myscore-area .ranking-area .tab-container .tabs .tab {
                        width: 9.9vw;
                        height: 4.9vw;
                        text-align: center;
                        font-size: 1.5vw;
                        bottom: -0.26vw;
                        line-height: 1.8vw;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        box-sizing: border-box;
                        border: solid 0.3vw transparent;
                        cursor: pointer;
                    }

                        .contents .myscore-area .ranking-area .tab-container .tabs .tab.active {
                            font-weight: bold;
                            border: solid 0.3vw #d6d7db;
                            border-bottom: solid 0.3vw #fff;
                            border-top-left-radius: 1vw;
                            border-top-right-radius: 1vw;
                            background-color: #fff;
                        }

                        .contents .myscore-area .ranking-area .tab-container .tabs .tab .rank {
                            position: absolute;
                            top: -1.1vw;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 4vw;
                            height: 1.8vw;
                            background-color: #ffd35a;
                            color: #333;
                            border-radius: 2.6vw;
                            font-weight: bold;
                            text-align: center;
                            line-height: 1.8vw;
                        }

                            .contents .myscore-area .ranking-area .tab-container .tabs .tab .rank .unit {
                                font-size: 0.83vw;
                            }

                .contents .myscore-area .ranking-area .tab-container .tab-content {
                    justify-self: center;
                }

                    .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane {
                        display: none;
                    }

                        .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane.active {
                            height: 100%;
                            display: grid;
                            grid-template-rows: max-content 1fr;
                        }

                        .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header {
                            height: 4.7vw;
                            display: grid;
                            grid-template-columns: 11vw 1fr;
                            gap: 10px;
                            padding-top: 1vw;
                        }

                            .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .title {
                                display: flex;
                                align-items: center;
                                font-size: 1.5vw;
                                font-weight: bold;
                                font-size: 1.5vw;
                                line-height: 2vw;
                                color: #003686;
                            }

                                .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .title img {
                                    width: 2.6vw;
                                    height: 2.6vw;
                                    margin-right: 0.5vw;
                                    cursor: pointer;
                                }

                            .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .country {
                                width: 10.4vw;
                                height: 3.6vw;
                                line-height: 4.4vw;
                                border: solid 0.3vw #d6d7db;
                                border-radius: 2.2vw;
                                font-size: 1.8vw;
                                font-weight: bold;
                                color: #003686;
                                padding-left: 1.5vw;
                                background: #fff url(../../img/icon_filter.svg) 1.5vw/2.1vw no-repeat;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                            }

                            .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .d-flex {
                                width: 100%;
                                display: grid;
                                grid-template-columns: 1fr 15vw;
                                align-items: center;
                                justify-self: end;
                                gap: 5px;
                            }

                            .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .selectbox {
                                height: 3.6vw !important;
                                width: auto !important;
                                padding-right: 10px;
                            }

                                .contents .myscore-area .ranking-area .tab-container .tab-content .tab-pane .header .selectbox select {
                                    height: 3.6vw !important;
                                }

            .contents .myscore-area .ranking-area .ranking-object-area {
                padding-left: 1.5vw;
                box-sizing: content-box;
                display: grid;
                grid-auto-rows: max-content 1fr max-content;
            }
                .contents .myscore-area .ranking-area .ranking-object-area .label-area {
                    display: flex;
                    justify-content: space-between;
                }

                    .contents .myscore-area .ranking-area .ranking-object-area .label-area .label {
                        font-size: 0.9em;
                        color: #003686;
                    }

                        .contents .myscore-area .ranking-area .ranking-object-area .label-area .label.label-bold {
                            font-size: 1em;
                            font-weight: bold;
                        }

                .contents .myscore-area .ranking-area .ranking-object-area .ranking-object {
                    color: #2e2725;
                    display: grid;
                    grid-template-rows: min-content 1fr max-content;
                }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .top3 {
                        overflow: hidden;
                    }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank {
                        width: 100%;
                        height: 3.6vw;
                        box-sizing: border-box;
                        background-color: #f5f5f5;
                        border-bottom: solid 2px #cacaca;
                        display: grid;
                        grid-template-columns: auto 1fr max-content;
                        align-items: center;
                        justify-content: start;
                        z-index: 0;
                    }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.my-company {
                            background-color: #ffcccc;
                            background-image: url(../../img/icon_star.svg);
                            background-size: 2.8vw;
                            background-repeat: no-repeat;
                            background-position-y: center;
                        }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.my-company .rank-num {
                                color: #9e3352;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.my-company .company {
                                color: #9e3352;
                            }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.group-company {
                            background-color: #d0ecff;
                        }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.group-company .rank-num,
                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.same-industry-company .rank-num {
                                color: #45429b;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.group-company .company,
                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.same-industry-company .company {
                                color: #45429b;
                            }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .rank-num {
                            box-sizing: border-box;
                            font-weight: bold;
                            font-size: 1.5vw;
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            text-align: right;
                            margin-left: 3vw;
                            padding-right: 0.5vw;
                            white-space: nowrap;
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .company {
                            font-size: 1.3vw;
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .ratio {
                            text-align: right;
                            padding-right: 2vw;
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            font-size: 1.5vw;
                            font-weight: bold;
                        }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .ratio.decrease {
                                background: url(../../img/icon_arrow_down2.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .ratio.increase {
                                background: url(../../img/icon_arrow_up_red.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank .ratio span {
                                padding-left: 0.3vw;
                            }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.top {
                        background-image: url(../../img/icon_trophy1.svg);
                        background-repeat: no-repeat;
                        background-size: 2.8vw;
                        background-repeat: no-repeat;
                        background-position-y: center;
                    }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.second {
                        background-image: url(../../img/icon_trophy2.svg);
                        background-repeat: no-repeat;
                        background-size: 2.8vw;
                        background-repeat: no-repeat;
                        background-position-y: center;
                    }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .rank.third {
                        background-image: url(../../img/icon_trophy3.svg);
                        background-repeat: no-repeat;
                        background-size: 2.8vw;
                        background-repeat: no-repeat;
                        background-position-y: center;
                    }

                    .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .out-rank-container {
                        position: relative;
                    }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .out-rank-container .top-shadow {
                            top: 0vw;
                            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
                            content: "";
                            position: absolute;
                            left: 0;
                            right: 0;
                            height: 0.7vw;
                            z-index: 1; /* 最前面に表示 */
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .out-rank-container .bottom-shadow {
                            bottom: 0;
                            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
                            content: "";
                            position: absolute;
                            left: 0;
                            right: 0;
                            height: 0.7vw;
                            z-index: 1; /* 最前面に表示 */
                            border-bottom-left-radius: 0.5vw;
                            border-bottom-right-radius: 0.5vw;
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ranking-object .out-rank-container .out-rank {
                            margin-top: 0.3vw;
                            margin-bottom: 0.5vw;
                            border-bottom-left-radius: 0.5vw;
                            border-bottom-right-radius: 0.5vw;
                            height: 16.9vw;
                            overflow-y: auto;
                        }

                .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area {
                    display: flex;
                    justify-content: space-between;
                    width: 40.1vw;
                }

                    .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave {
                        width: 19.8vw;
                        height: 3.6vw;
                        border-radius: 0.5vw;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: #f0efee url(../../img/icon_JP.svg) no-repeat 0.5vw 50%/2.1vw;
                    }

                        .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave .title {
                            font-size: 1.5vw;
                            font-weight: bold;
                            margin-left: 3vw;
                            color: #003686;
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave .ratio {
                            font-size: 1.5vw;
                            font-weight: bold;
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            padding-right: 1.2vw;
                            margin-right: 1.2vw;
                        }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave .ratio.decrease {
                                background: url(../../img/icon_arrow_down2.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave .ratio.increase {
                                background: url(../../img/icon_arrow_up_red.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .national-ave .ratio span {
                                padding-left: 0.3vw;
                                padding-right: 1vw;
                            }

                    .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave {
                        width: 19.8vw;
                        height: 3.6vw;
                        border-radius: 0.5vw;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: #efefef url(../../img/icon_list.svg) no-repeat 0.5vw 50%/2.1vw;
                    }

                        .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave .title {
                            font-size: 1.5vw;
                            font-weight: bold;
                            margin-left: 3vw;
                            color: #003686;
                        }

                        .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave .ratio {
                            font-size: 1.5vw;
                            font-weight: bold;
                            font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                            padding-right: 1.2vw;
                            margin-right: 1.2vw;
                        }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave .ratio.decrease {
                                background: url(../../img/icon_arrow_down2.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave .ratio.increase {
                                background: url(../../img/icon_arrow_up_red.svg) no-repeat 100% 50%/1.8vw;
                            }

                            .contents .myscore-area .ranking-area .ranking-object-area .ave-ratio-area .table-ave .ratio span {
                                padding-left: 0.3vw;
                                padding-right: 1vw;
                            }

    .contents .trend-area .header {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 96.4vw;
        height: 9.4vw;
        background-color: #f5f5f5;
        border-radius: 0.4vw;
    }

        .contents .trend-area .header .swich-area {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 100%;
        }

            .contents .trend-area .header .swich-area .date {
                padding-left: 2vw;
                background: #fff url(../../img/icon_calendar-day.svg) no-repeat 1vw 50%/1.9vw;
            }

            .contents .trend-area .header .swich-area .segment-line {
                height: 4.2vw;
                width: 0.3vw;
                min-width: 1px;
                background-color: #d6d7db;
                margin-top: 0.5vw;
                margin-bottom: 0.5vw;
                border-radius: clamp(0.5px, 0.15vw, 0.15vw);
            }

        .contents .trend-area .header .comparison-area {
            width: 22.83vw;
        }

        .contents .trend-area .header .comparison {
            width: 100%;
            display: grid;
            grid-template-columns: max-content 1fr;
            grid-template-rows: repeat(2, 1fr);
            font-size: 1.9vw;
            font-weight: bold;
            background-color: #ffffff;
            border-radius: 0.5vw;
            border: solid #cbcbcc 0.16vw;
            padding: 5px;
            place-items: center;
            gap: 5px;
        }

            .contents .trend-area .header .comparison .title {
                width: 100%;
                display: grid;
                grid-template-rows: repeat(2, 1fr);
                font-size: 1.25vw;
                color: #003686;
            }

                .contents .trend-area .header .comparison .title .comparison-date {
                    font-size: 1.6vw;
                }

            .contents .trend-area .header .comparison .comparison-value {
                width: 100%;
                display: grid;
                grid-template-columns: 10vw 1fr max-content;
                place-items: center;
                gap: 1px;
            }

                .contents .trend-area .header .comparison .comparison-value.decrease::after {
                    display: block;
                    content: "";
                    width: 1.8vw;
                    height: 1.8vw;
                    background: url(../../img/icon_arrow_down2.svg) no-repeat 0% 60%/1.8vw;
                }

                .contents .trend-area .header .comparison .comparison-value.decrease.reverse::after {
                    background: url(../../img/icon_arrow_up_red.svg) no-repeat 0% 60%/1.8vw;
                    transform: scaleY(-1);
                }

                .contents .trend-area .header .comparison .comparison-value.increase::after {
                    display: block;
                    content: "";
                    width: 1.8vw;
                    height: 1.8vw;
                    background: url(../../img/icon_arrow_up_red.svg) no-repeat 0% 60%/1.8vw;
                }

                .contents .trend-area .header .comparison .comparison-value.increase.reverse::after {
                    background: url(../../img/icon_arrow_down2.svg) no-repeat 0% 60%/1.8vw;
                    transform: scaleY(-1);
                }

            .contents .trend-area .header .comparison .value {
                width: 100%;
                font-size: 2.08vw;
                background-color: #f0efee;
                border-radius: 0.3vw;
                text-align: end;
            }

            .contents .trend-area .header .comparison .unit {
                width: 100%;
                font-size: 1vw;
                place-self: end;
            }

    .contents .trend-area .graph-headr {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 4.5vw;
        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
        font-size: 1.3vw;
        line-height: 1.6vw;
        color: #2e2725;
        gap: 20px;
    }

    .contents .trend-area .bar-graph, .contents .trend-area .line-graph {
        display: flex;
        gap: 5px;
    }

        .contents .trend-area .line-graph .recordpoly {
            background: url(../../img/icon_line.svg) 0% 50%/2.6vw no-repeat;
            padding-left: 2.8vw;
            display: flex;
            align-items: center;
            height: 2.6vw;
        }

        .contents .trend-area .line-graph .landing-prediction {
            background: url(../../img/icon_dott_line.svg) 0% 50%/2.6vw no-repeat;
            padding-left: 2.8vw;
            display: flex;
            align-items: center;
            height: 2.6vw;
        }

        .contents .trend-area .graph-headr .record {
            background: url(../../img/icon_legend1.svg) 0% 50%/2.6vw no-repeat;
            padding-left: 2.8vw;
            display: flex;
            align-items: center;
            height: 2.6vw;
        }

        .contents .trend-area .graph-headr .record-over {
            background: url(../../img/icon_legend4.svg) 0% 50%/2.6vw no-repeat;
            padding-left: 2.8vw;
            display: flex;
            align-items: center;
        }

        .contents .trend-area .graph-headr .ave {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .contents .trend-area .graph-headr .ave .introductory-remarks {
                background: url(../../img/icon_legend5.svg) 50% no-repeat;
                width: 2.6vw;
                height: 2.6vw;
                margin-left: 0.8vw;
                margin-right: 0.8vw;
            }

        .contents .trend-area .graph-headr .last-year-ave {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .contents .trend-area .graph-headr .last-year-ave .introductory-remarks {
                background: url(../../img/graph_plot2.svg) 50%/1.56vw no-repeat;
                width: 1.56vw;
                height: 1.56vw;
            }

        .contents .trend-area .graph-headr .approximate-usage {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .contents .trend-area .graph-headr .approximate-usage .introductory-remarks {
                background: url(../../img/graph_plot1.svg) 50%/1.56vw no-repeat;
                width: 1.56vw;
                height: 1.56vw;
            }

        .contents .trend-area .graph-headr .icon-info {
            width: 2.6vw;
            height: 2.6vw;
            cursor: pointer;
        }

    .contents .trend-area .graph-draw-area {
        height: 30vw;
        width: 100%;
    }

        .contents .trend-area .graph-draw-area .drawing-area {
            background-color: #fff;
            width: 100%;
            height: 30vw;
            border-radius: 1.3vw;
        }

    .contents .trend-area .standard-value-setting {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .contents .trend-area .standard-value-setting .title {
            font-size: 1.25vw;
        }

        .contents .trend-area .standard-value-setting .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            -moz-column-gap: 2.5vw;
            column-gap: 2.5vw;
            border: solid #cbcbcc 0.16vw;
            border-radius: 0.26vw;
            padding: 0.25vw 1vw;
            margin-right: 2vw;
            margin-left: 1vw;
        }

    .contents .pawer-curve-area {
        /*display: grid;
        grid-template-rows: repeat(3, auto);
        justify-content: center;
        align-items: center;
        flex-direction: column;*/
    }

        .contents .pawer-curve-area .information {
            display: flex;
            align-items: center;
            width: 96.4vw;
            height: 5.7vw;
            background: #f5f5f5;
            position: relative;
            color: #003686;
        }

            .contents .pawer-curve-area .information .day-result {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                font-size: 1.6vw;
                font-weight: bold;
            }

                .contents .pawer-curve-area .information .day-result .btn-calendar {
                    margin-left: 1.6vw;
                    padding-left: 4.5vw;
                    width: 23.4vw;
                    height: 4.2vw;
                    line-height: 3.5vw;
                    border: solid 0.3vw #d6d7db;
                    border-radius: 2.1vw;
                    font-size: 2.6vw;
                    font-weight: bold;
                    font-size: 1.88vw;
                    background: #fff url(../../img/icon_calendar-day.svg) 1.3vw/2.5vw no-repeat;
                    cursor: pointer;
                }

                    .contents .pawer-curve-area .information .day-result .btn-calendar span {
                        font-size: 1.35vw;
                        padding-right: 0.5vw;
                    }

                .contents .pawer-curve-area .information .day-result .icon {
                    background: url(../../img/icon_date.svg) 0.8vw/3.6vw no-repeat;
                    padding-left: 4.6vw;
                    margin-right: 0.5vw;
                    height: 3.6vw;
                    display: flex;
                    align-items: center;
                }

                .contents .pawer-curve-area .information .day-result .comparison {
                    width: 10vw;
                    height: 2.1vw;
                    padding-left: 0.8vw;
                    border-radius: 0.5vw;
                    background-color: #fff;
                    font-size: 1.3vw;
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    font-weight: normal;
                }

                    .contents .pawer-curve-area .information .day-result .comparison.increase {
                        background-image: url(../../img/icon_arrow_up_red.svg);
                        background-size: 2vw;
                        background-position: 95%;
                        background-repeat: no-repeat;
                        color: #f34d4d;
                    }

                    .contents .pawer-curve-area .information .day-result .comparison.decrease {
                        background-image: url(../../img/icon_arrow_down2.svg);
                        background-size: 2vw;
                        background-position: 95%;
                        background-repeat: no-repeat;
                        color: #0c9398;
                    }

            .contents .pawer-curve-area .information .segment-line {
                width: 0.3vw;
                min-width: 1px;
                height: 4.2vw;
                background-color: #d6d7db;
                margin-left: 2.3vw;
                margin-right: 2.3vw;
                border-radius: clamp(0.5px, 0.15vw, 0.15vw);
            }

            .contents .pawer-curve-area .information .electricity-consumption {
                display: flex;
                align-items: center;
                position: relative;
                padding-left: 5.2vw;
                background: url(../../img/icon_plug-circle-bolt.svg) 0.8vw/3.6vw no-repeat;
                width: 40vw;
                height: 4.2vw;
                font-size: 1.6vw;
                font-weight: bold;
            }

                .contents .pawer-curve-area .information .electricity-consumption.increase .amount {
                    background-color: #fff;
                    border: solid 0.2vw #f34d4d;
                    border-radius: 0.5vw;
                    width: 10.7vw;
                    text-align: right;
                    padding-right: 0.5vw;
                    margin-left: 1.5vw;
                    margin-right: 0.3vw;
                    padding-bottom: 0.2vw;
                    color: #f34d4d;
                    font-size: 2.3vw;
                    font-weight: bold;
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                }

                    .contents .pawer-curve-area .information .electricity-consumption.increase .amount::before {
                        content: "　";
                        position: absolute;
                        width: 3.8vw;
                        height: 3.8vw;
                        right: -10vw;
                        background-image: url(../../img/icon_arrow_up_red.svg);
                        background-size: 3.8vw;
                        background-repeat: no-repeat;
                    }

                .contents .pawer-curve-area .information .electricity-consumption.increase .unit {
                    color: #333;
                }

                .contents .pawer-curve-area .information .electricity-consumption.decrease .amount {
                    background-color: #fff;
                    border: solid 0.2vw #09aaaf;
                    border-radius: 0.5vw;
                    width: 10.7vw;
                    text-align: right;
                    padding-right: 0.5vw;
                    margin-left: 1.5vw;
                    margin-right: 0.3vw;
                    padding-bottom: 0.2vw;
                    color: #0c9398;
                    font-size: 2.3vw;
                    font-weight: bold;
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                }

                    .contents .pawer-curve-area .information .electricity-consumption.decrease .amount::before {
                        content: "　";
                        position: absolute;
                        width: 3.8vw;
                        height: 3.8vw;
                        right: -10vw;
                        background-image: url(../../img/icon_arrow_down2.svg);
                        background-size: 3.8vw;
                        background-repeat: no-repeat;
                    }

                .contents .pawer-curve-area .information .opening-status {
                    margin: 0 1.5vw 0 auto;
                }

                .contents .pawer-curve-area .graph-headr {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    -moz-column-gap: 1.5vw;
                    column-gap: 1.5vw;
                    height: 4.5vw;
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    font-size: 1.25vw;
                    line-height: 1.6vw;
                }

            .contents .pawer-curve-area .graph-headr .record {
                background: url(../../img/icon_legend1.svg) 0% 50%/2.6vw no-repeat;
                padding-left: 2.8vw;
                display: flex;
                align-items: center;
                height: 2.6vw;
            }

            .contents .pawer-curve-area .graph-headr .ai-prediction {
                display: flex;
                align-items: center;
            }

                .contents .pawer-curve-area .graph-headr .ai-prediction .label {
                    background: url(../../img/icon_legend6.svg) 0% 50%/2.6vw no-repeat;
                    padding-left: 2.8vw;
                    margin-right: 2.08 vw;
                }

            .contents .pawer-curve-area .graph-headr .last-year-use {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .contents .pawer-curve-area .graph-headr .last-year-use .introductory-remarks {
                    background: url(../../img/icon_legend2.svg) 50% no-repeat;
                    width: 2.6vw;
                    height: 2.6vw;
                    margin-left: 0.8vw;
                    margin-right: 0.8vw;
                }

            .contents .pawer-curve-area .graph-headr .demand-warning {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .contents .pawer-curve-area .graph-headr .demand-warning .introductory-remarks {
                    background: url(../../img/graph_plot3.svg) 50% no-repeat;
                    width: 2.6vw;
                    height: 2.6vw;
                    margin-left: 0.8vw;
                    margin-right: 0.8vw;
                }

            .contents .pawer-curve-area .graph-headr .saving-time {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .contents .pawer-curve-area .graph-headr .saving-time .introductory-remarks {
                    background: url(../../img/icon_legend3.svg) 50% no-repeat;
                    width: 2.6vw;
                    height: 2.6vw;
                    margin-left: 0.8vw;
                    margin-right: 0.8vw;
                }

            .contents .pawer-curve-area .graph-headr .addendum {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .contents .pawer-curve-area .graph-headr .addendum .introductory-remarks {
                    background: url(../../img/graph_plot5.svg) 50% no-repeat;
                    width: 2.6vw;
                    height: 2.6vw;
                    margin-left: 0.8vw;
                    margin-right: 0.8vw;
                }

            .contents .pawer-curve-area .graph-headr .icon-info {
                width: 2.4vw;
                cursor: pointer;
            }

        .contents .pawer-curve-area .graph-draw-area {
            height: 28.6vw;
            width: 100%;
        }

            .contents .pawer-curve-area .graph-draw-area .drawing-area {
                background-color: #fff;
                width: 100%;
                height: 28.6vw;
                border-radius: 1.3vw;
            }

        .contents .pawer-curve-area .guidance {
            margin-bottom: 0.5vw;
        }

            .contents .pawer-curve-area .guidance .carousel-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 96.4vw;
            }

                .contents .pawer-curve-area .guidance .carousel-inner .carousel-item {
                    width: 31.6vw;
                    height: 4.9vw;
                }

                    .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice {
                        width: 31.6vw;
                        height: 4.9vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        border-radius: 0.5vw;
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                    }

                        .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .time {
                            height: 4.9vw;
                            position: relative;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                            justify-content: space-evenly;
                            color: #003686;
                        }

                            .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .time img {
                                width: 2.7vw;
                                top: 0.2vw;
                            }

                            .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .time span {
                                font-size: 1vw;
                                font-weight: bold;
                                top: -0.2vw;
                            }

                        .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .sentence {
                            font-size: 1.5vw;
                            font-weight: bold;
                            color: #2e2725;
                            width: 19.5vw;
                            line-height: 1.9vw;
                        }

                        .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .icon {
                            width: 4vw;
                        }

                            .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .icon .people {
                                position: absolute;
                                bottom: -0.8vw;
                                left: 50%;
                                transform: translateX(-50%);
                                display: flex;
                                align-items: center;
                                background: #ffd35a;
                                border-radius: 1vw;
                                width: 4vw;
                                height: 2vw;
                                justify-content: center;
                                font-size: 1.8vw;
                                font-weight: bold;
                            }

                                .contents .pawer-curve-area .guidance .carousel-inner .carousel-item .advice .icon .people span {
                                    font-size: 0.8vw;
                                    position: relative;
                                    bottom: -0.4vw;
                                }

    .contents .topB.l-box {
        width: 81.1vw;
        margin-right: 1.8vw;
    }

        .contents .topB.l-box .goal-rank {
            width: 81.1vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

            .contents .topB.l-box .goal-rank .goal {
                width: 81.3vw;
                height: 9.4vw;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }

                .contents .topB.l-box .goal-rank .goal .segment-line.type-2 {
                    width: 0.3vw;
                    height: 7.7vw;
                    min-width: 1px;
                    background-color: #d6d7db;
                    margin-top: 0.5vw;
                    margin-bottom: 0.5vw;
                    border-radius: clamp(0.5px, 0.15vw, 0.15vw);
                }

                .contents .topB.l-box .goal-rank .goal .target .title {
                    top: 0.6vw;
                }

                .contents .topB.l-box .goal-rank .goal .prediction .title {
                    right: 0.5vw;
                    bottom: 0.5vw;
                }

        .contents .topB.l-box .carousel {
            height: auto;
        }

            .contents .topB.l-box .carousel .carousel-inner {
                width: 100%;
                height: 35.3vw;
                flex-direction: column;
                justify-content: space-evenly;
            }

                .contents .topB.l-box .carousel .carousel-inner .carousel-item {
                    height: 10.4svw;
                }

                    .contents .topB.l-box .carousel .carousel-inner .carousel-item .advice {
                        margin-left: 0;
                        width: 81.1vw;
                        height: 10vw;
                    }

                        .contents .topB.l-box .carousel .carousel-inner .carousel-item .advice .sentence {
                            width: 32.5vw;
                        }

    .contents .topB.r-box .goal-rank {
        height: 46.4vw;
        width: 12.5vw;
        padding-bottom: 1.8vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .contents .topB.r-box .goal-rank .rank {
            width: 14vw;
            margin-top: 0vw;
            padding-top: 0vw;
            padding-bottom: 0vw;
            background-color: #f5f5f5;
            border-radius: 0.5vw;
            font-size: 1.7vw;
            font-weight: bold;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

            .contents .topB.r-box .goal-rank .rank .segment-line {
                height: 0.3vw;
                width: 12vw;
                min-width: 1px;
                background-color: #d6d7db;
                border-radius: clamp(0.5px, 0.15vw, 0.15vw);
            }

            .contents .topB.r-box .goal-rank .rank .internal {
                width: 12.5vw;
            }

                .contents .topB.r-box .goal-rank .rank .internal .details .title2 {
                    margin-top: 1vw;
                    height: 2.1vw;
                    padding-left: 0.5vw;
                }

                .contents .topB.r-box .goal-rank .rank .internal .details .d-flex {
                    height: 5.7vw;
                }

                .contents .topB.r-box .goal-rank .rank .internal .order {
                    width: 9.5vw;
                }

        .contents .topB.r-box .goal-rank .btn-video {
            width: 12.5vw;
            height: 9.7vw;
            background-color: #fff;
            border-radius: 4.95vw;
            border: solid #d6d7db 0.3vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 1.7vw;
            font-weight: bold;
            text-align: center;
            line-height: 2.1vw;
            cursor: pointer;
        }

            .contents .topB.r-box .goal-rank .btn-video img {
                height: 3.4vw;
            }

        .contents .topB.r-box .goal-rank .btn-quiz {
            width: 12.5vw;
            height: 9.7vw;
            background-color: #fff;
            border-radius: 4.95vw;
            border: solid #d6d7db 0.3vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 1.7vw;
            font-weight: bold;
            text-align: center;
            line-height: 2.1vw;
            cursor: pointer;
        }

            .contents .topB.r-box .goal-rank .btn-quiz img {
                height: 3.4vw;
            }

footer.menu {
    height: 5.7vw;
    background-color: #003686;
    position: relative;
    bottom: 0;
    border-top: solid 0.4vw #003686;
    padding: 0;
}

    footer.menu ul {
        display: flex;
        position: relative;
        justify-content: center;
        top: -0.4vw;
    }

        footer.menu ul li a {
            display: flex;
            align-items: start;
            justify-content: center;
            box-sizing: border-box;
            color: #f8f1e5;
            font-size: 1.9vw;
            width: 17.7vw;
            height: 5.2vw;
            line-height: 5.2vw;
            padding-left: 3.4vw;
            cursor: pointer;
            text-decoration: none;
        }

        footer.menu ul li.current a {
            color: #003686;
            font-weight: bold;
        }

        footer.menu ul li.top {
            background: url(../../img/icon_house.svg) no-repeat 25% 50%/3.4vw;
        }

            footer.menu ul li.top.current {
                background: url(../../img/icon_house-on.svg) no-repeat 25% 50%/3.4vw, url(../../img/bg-tab.svg) no-repeat;
            }

        footer.menu ul li.myscore {
            background: url(../../img/icon_medal_l.svg) no-repeat 15% 50%/3.4vw;
        }

            footer.menu ul li.myscore.current {
                background: url(../../img/icon_medal_l-on.svg) no-repeat 15% 50%/3.4vw, url(../../img/bg-tab.svg) no-repeat;
            }

        footer.menu ul li.trend {
            background: url(../../img/icon_suii.svg) no-repeat 30% 50%/3.4vw;
        }

            footer.menu ul li.trend.current {
                background: url(../../img/icon_suii-on.svg) no-repeat 30% 50%/3.4vw, url(../../img/bg-tab.svg) no-repeat;
            }

        footer.menu ul li.power-curve {
            background: url(../../img/icon_graph.svg) no-repeat 10% 50%/3.4vw;
        }

            footer.menu ul li.power-curve.current {
                background: url(../../img/icon_graph-on.svg) no-repeat 10% 50%/3.4vw, url(../../img/bg-tab.svg) no-repeat;
            }

        footer.menu ul li.menu {
            background: url(../../img/icon_menu.svg) no-repeat 20% 50%/3.4vw;
        }

            footer.menu ul li.menu.current {
                background: url(../../img/icon_menu-on.svg) no-repeat 20% 50%/3.4vw, url(../../img/bg-tab.svg) no-repeat;
            }

.select {
    width: 16.9vw;
    height: 4.2vw;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 2px 0 white;
    border-radius: 2.1vw;
    box-sizing: border-box;
}

.select_expand {
    width: 0;
    height: 4.2vw;
    position: absolute;
    top: 0;
    right: 0;
}

    .select_expand::after {
        content: ">";
        position: absolute;
        top: 48%;
        right: 0.6vw;
        transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
        color: #3e3e3e;
        font-size: 28px;
        pointer-events: none;
        z-index: 2;
        opacity: 0.6;
    }

    .select_expand:hover::after {
        opacity: 1;
    }

    .select_expand:checked::after {
        transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
    }

.select_expandLabel {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 4.2vw;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.select_close {
    display: none;
}

.select_closeLabel {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.select_items {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0.3vw solid #ffffff;
    border-radius: 2.3vw;
    padding-top: 4.2vw;
    top: -0.15vw;
}

.select_input {
    display: none;
}

.select_label {
    display: block;
    height: 0;
    font-size: 1.7vw;
    line-height: 4.2vw;
    overflow: hidden;
    color: #3e3e3e;
    background-color: #fff;
    cursor: pointer;
    padding-left: 20px;
    border-radius: 2.2vw;
}

.select_label-placeholder {
    box-sizing: border-box;
    height: 4.2vw;
    vertical-align: middle;
    position: absolute;
    top: 0.15vw;
    left: 0.3vw;
    opacity: 1;
    background-color: transparent;
}

.select_expand:checked + .select_closeLabel {
    display: block;
}

    .select_expand:checked + .select_closeLabel + .select_options {
        background-color: #fff;
        border-radius: 2.1vw;
    }

        .select_expand:checked + .select_closeLabel + .select_options .select_label {
            height: 4.2vw;
        }

            .select_expand:checked + .select_closeLabel + .select_options .select_label:hover {
                background-color: #f7f7f7;
            }

        .select_expand:checked + .select_closeLabel + .select_options + .select_expandLabel {
            display: none;
        }

.select_input:checked + .select_label {
    height: 4.2vw;
    margin-top: -4.2vw;
}

.selectbox {
    width: 16.9vw;
    height: 4.2vw;
    overflow: hidden;
    text-align: center;
    border: 0.3vw solid #d6d7db;
    border-radius: 2.3vw;
    background-color: #fff;
}

    .selectbox::after {
        content: "";
        width: 2.6vw;
        height: 2.6vw;
        background: url(../../img/icon_arrow.svg) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.6vw;
        pointer-events: none;
        z-index: 2;
    }

    .selectbox select {
        width: 100%;
        height: 4.2vw;
        cursor: pointer;
        top: -0.3vw;
        padding-left: 1.6vw;
        border: none;
        outline: none;
        background: transparent;
        background-image: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: #003686;
        font-size: 1.7vw;
        font-weight: bold;
        line-height: unset;
    }

        .selectbox select::-ms-expand {
            display: none;
        }

        .selectbox select s option {
            font-weight: bold;
        }

.modal {
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    position: absolute;
}

    .modal:has(.modal-content.my-score) {
        background-color: transparent;
    }

    .modal .modal-container:has(.modal-content.my-score) {
        justify-content: flex-end;
        align-items: flex-start;
        margin: 0;
    }

    .modal .modal-container .modal-content.my-score {
        width: 44.3vw;
        height: 54.8vw;
        margin-top: 1vw;
        margin-right: 1vw;
    }

        .modal .modal-container .modal-content.my-score .modal-body {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 48.5vw;
            overflow: auto;
            padding-top: 1vw;
        }

            .modal .modal-container .modal-content.my-score .modal-body .card {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                background-color: #f9f9f9;
                width: 39.6vw;
                min-height: 8.3vw;
                border: solid 0.1vw #c3c3c3;
                border-radius: 0.5vw;
                font-size: 1.2vw;
                font-weight: bold;
                padding: 0vw 1.5vw;
                margin-bottom: 1.2vw;
            }

                .modal .modal-container .modal-content.my-score .modal-body .card .power-usage {
                    height: 2.6vw;
                    color: #e86161;
                    font-size: 1.56vw;
                    font-weight: bold;
                    background: url(../../img/icon_graph_a.svg) no-repeat 0 50%/2.6vw;
                    padding-left: 3.6vw;
                }

                .modal .modal-container .modal-content.my-score .modal-body .card .demand-comparison {
                    height: 2.6vw;
                    color: #6e7bbe;
                    font-size: 1.56vw;
                    font-weight: bold;
                    background: url(../../img/icon_graph_b.svg) no-repeat 0 50%/2.6vw;
                    padding-left: 3.6vw;
                }

                .modal .modal-container .modal-content.my-score .modal-body .card .savings-checks {
                    height: 2.6vw;
                    color: #e79460;
                    font-size: 1.56vw;
                    font-weight: bold;
                    background: url(../../img/icon_graph_c.svg) no-repeat 0 50%/2.6vw;
                    padding-left: 3.6vw;
                }

                .modal .modal-container .modal-content.my-score .modal-body .card .ai-analysis {
                    height: 2.6vw;
                    color: #509b81;
                    font-size: 1.56vw;
                    font-weight: bold;
                    background: url(../../img/icon_graph_d.svg) no-repeat 0 50%/2.6vw;
                    padding-left: 3.6vw;
                }

                .modal .modal-container .modal-content.my-score .modal-body .card .temperature-resistance {
                    height: 2.6vw;
                    color: #b770c9;
                    font-size: 1.56vw;
                    font-weight: bold;
                    background: url(../../img/icon_graph_e.svg) no-repeat 0 50%/2.6vw;
                    padding-left: 3.6vw;
                }

    .modal .prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4.7vw;
        height: 4.7vw;
        border: solid #d6d7db 0.3vw;
        border-radius: 2.35vw;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0.5vw;
    }

        .modal .prev:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .modal .prev img {
            width: 0.8vw;
            cursor: pointer;
        }

    .modal .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4.7vw;
        height: 4.7vw;
        border: solid #d6d7db 0.3vw;
        border-radius: 2.35vw;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 0.5vw;
    }

        .modal .next:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .modal .next img {
            transform: rotate(180deg);
            width: 0.8vw;
            cursor: pointer;
        }

    .modal .carousel-indicators {
        text-align: center;
        width: 100%;
        height: 1.8vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0.1vw;
    }

        .modal .carousel-indicators .dot {
            display: inline-block;
            width: 0.7vw;
            height: 0.7vw;
            margin: 0 5px;
            background-color: #c6c6c6;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.6s ease;
        }

            .modal .carousel-indicators .dot.active {
                background-color: #003686;
            }

    .modal .modal-carousel .carousel-inner {
        display: flex;
        align-items: center;
        transition: transform 0.5s ease-in-out;
        width: 300%;
    }

    .modal .carousel-item {
        min-width: 100%;
        box-sizing: border-box;
    }

    .modal .modal-carousel {
        position: relative;
        max-width: 100%;
        overflow: hidden;
    }

    .modal .modal-container {
        width: 100dvw;
        height: 100dvh;
        display: grid;
        place-items: center;
    }

        .modal .modal-container.right {
            justify-content: flex-end !important;
        }

        .modal .modal-container.left {
            justify-content: flex-start !important;
        }

        .modal .modal-container.center {
            justify-content: center !important;
        }

        .modal .modal-container .modal-content {
            width: 92.2vw;
            background-color: #fff;
            border-radius: 1.6vw;
            border: solid #707070 0.1vw;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            margin-left: 1vw;
            margin-right: 1vw;
        }

            .modal .modal-container .modal-content .header {
                height: 10.3dvh;
                background-color: #f5f5f5;
                border-top-left-radius: 1.6vw;
                border-top-right-radius: 1.6vw;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 3.6dvh;
                font-weight: bold;
                color: #003686;
                position: relative;
            }

                .modal .modal-container .modal-content .header .btn-close {
                    position: absolute;
                    right: 1vw;
                    cursor: pointer;
                    width: 4.5vw;
                    height: 4.5vw;
                }

            .modal .modal-container .modal-content .modal-body {
                height: 41vw;
                width: 100%;
            }

            .modal .modal-container .modal-content .footer {
                height: 6.5vw;
                background-color: #f0efee;
                border-bottom-left-radius: 1.6vw;
                border-bottom-right-radius: 1.6vw;
            }

            .modal .modal-container .modal-content.commitment .modal-body {
                background: url(../../img/BG_quiz2.svg) no-repeat;
                background-size: contain;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                font-size: 3.1vw;
                font-weight: bold;
                padding-bottom: 6.8vw;
            }

                .modal .modal-container .modal-content.commitment .modal-body .icon {
                    height: 13.5vw;
                }

                .modal .modal-container .modal-content.commitment .modal-body .d-flex {
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                }

                    .modal .modal-container .modal-content.commitment .modal-body .d-flex .target {
                        width: 20.8vw;
                        height: 9.1vw;
                        background-color: #ffdc7b;
                        border-radius: 1vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 6.3vw;
                        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                        margin-right: 1vw;
                        padding-left: 3vw;
                    }

                        .modal .modal-container .modal-content.commitment .modal-body .d-flex .target.down {
                            background: #ffdc7b url(../../img/icon_arrow_down2.svg) no-repeat 1vw 50%/5.7vw;
                        }

                    .modal .modal-container .modal-content.commitment .modal-body .d-flex .unit {
                        font-size: 3.6vw;
                        padding-left: 1vw;
                        top: 1vw;
                    }

            .modal .modal-container .modal-content.commitment .footer .btn_check {
                width: 100%;
                height: 6.5vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
            }

                .modal .modal-container .modal-content.commitment .footer .btn_check img {
                    width: 8.1vw;
                    cursor: pointer;
                    bottom: 1vw;
                }

                .modal .modal-container .modal-content.commitment .footer .btn_check .people {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #ffd35a;
                    border-radius: 1vw;
                    width: 4vw;
                    height: 2vw;
                    font-size: 1.8vw;
                    font-weight: bold;
                    bottom: 0.7vw;
                    position: absolute;
                    left: 50%;
                    bottom: 0.3vw;
                    transform: translateX(-50%);
                }

                    .modal .modal-container .modal-content.commitment .footer .btn_check .people span {
                        font-size: 0.8vw;
                        position: relative;
                        bottom: -0.4vw;
                        padding-left: 0.2vw;
                    }

            .modal .modal-container .modal-content.quiz {
                height: 55.2vw;
                width: 88.5vw;
            }

                .modal .modal-container .modal-content.quiz .header::before {
                    content: "";
                    background: url(../../img/icon_quiz.svg) no-repeat 0/contain;
                    position: absolute;
                    width: 5.68vw;
                    height: 8.49vw;
                    left: 3.6vw;
                    top: 0;
                    z-index: 1;
                }

                .modal .modal-container .modal-content.quiz .sub-header {
                    height: 4.2vw;
                    background-color: #f0efee;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 2.1vw;
                    font-weight: bold;
                    color: #003686;
                }

                    .modal .modal-container .modal-content.quiz .sub-header span {
                        padding-left: 1.5vw;
                    }

                .modal .modal-container .modal-content.quiz .modal-body {
                    height: 48.5vw;
                    background: url(../../img/BG_quiz2.svg) repeat;
                    background-size: contain;
                    display: grid;
                    justify-content: center;
                    align-content: center;
                    grid-template-columns: repeat(auto-fit, 20.8vw);
                    grid-template-rows: repeat(auto-fit, 14.1vw);
                    row-gap: 1.56vw;
                    -moz-column-gap: 1.56vw;
                    column-gap: 1.56vw;
                    font-size: 3.1vw;
                    font-weight: bold;
                    border-radius: 1.6vw;
                    padding: 1.5vw 11.2vw;
                }

                    .modal .modal-container .modal-content.quiz .modal-body.bg-img {
                        background: url(../../img/BG_quiz3.svg) no-repeat 0/cover;
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                    }

                    .modal .modal-container .modal-content.quiz .modal-body.quiz-contents {
                        display: flex;
                        flex-direction: column;
                        height: 44.3vw;
                    }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box {
                            display: flex;
                            margin-bottom: 3.1vw;
                        }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box .left-box {
                                margin-right: 1.5vw;
                                height: 20.31vw;
                            }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box .left-box .quiz-picture {
                                    width: 27.08vw;
                                }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box .right-box {
                                margin-left: 1.5vw;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                            }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box .guidance-text {
                                font-weight: bold;
                                font-size: 2.1vw;
                            }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.picture .question-box .question-text-box {
                                font-size: 1.35vw;
                                margin-bottom: 0;
                            }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents.result {
                            padding-bottom: 6.5vw;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents#quiz-start {
                            height: 48.5vw;
                            justify-content: center;
                            align-items: center;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .info-text {
                            text-align: center;
                            margin-bottom: 5.7vw;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .guidance-text {
                            font-size: 2.1vw;
                            text-align: center;
                            margin-bottom: 3.1vw;
                            -webkit-text-stroke: 0.1vw #fff;
                            paint-order: stroke;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .answer-box {
                            display: flex;
                            font-size: 2.1vw;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .answer-box #correct-answer-text {
                                font-size: 3.1vw;
                            }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .answer-box #correct-answer-text::first-letter {
                                    font-weight: normal;
                                }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .answer-box #ratio-correct-answers {
                                font-size: 3.1vw;
                            }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .question-text-box {
                            background-color: #f9f9f9;
                            border: solid 0.1vw #c3c3c3;
                            font-size: 2.1vw;
                            padding: 1.6vw;
                            margin-bottom: 3.1vw;
                            text-align: center;
                            color: #003686;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .correct-explanation-box {
                            background-color: #f9f9f9;
                            border: solid 0.1vw #c3c3c3;
                            font-size: 2.1vw;
                            color: #003686;
                            padding: 1.6vw;
                            margin-top: 2.6vw;
                            margin-bottom: 3.1vw;
                            text-align: left;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                            .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select {
                                width: 20.05vw;
                                height: 12.5vw;
                                background: #f0efee;
                                border: solid 0.31vw #d6d7db;
                                border-radius: 1.56vw;
                                margin: 0 0.94vw;
                                font-size: 2.1vw;
                                color: #003686;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                            }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select.your-answer {
                                    border-color: #4b63a8;
                                    border-width: 0.8vw;
                                }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select.correct-answer::after {
                                    content: " ";
                                    background: url(../../img/quiz_right.svg) no-repeat 50%/13.02vw;
                                    width: 13vw;
                                    height: 13vw;
                                    position: absolute;
                                }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select.choice-1::before {
                                    content: "❶";
                                    position: absolute;
                                    top: 1.5vw;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    font-weight: normal;
                                }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select.choice-2::before {
                                    content: "❷";
                                    position: absolute;
                                    top: 1.5vw;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    font-weight: normal;
                                }

                                .modal .modal-container .modal-content.quiz .modal-body.quiz-contents .choice-box .btn-select.choice-3::before {
                                    content: "❸";
                                    position: absolute;
                                    top: 1.5vw;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    font-weight: normal;
                                }

                    .modal .modal-container .modal-content.quiz .modal-body .card {
                        width: 20.8vw;
                        height: 14.1vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 1.7vw;
                        border: 0.31vw solid #d6d7db;
                        border-radius: 1vw;
                        background: url(../../img/bg_quiz.svg) no-repeat right bottom/11.98vw;
                        -webkit-text-stroke: 0.1vw #fff;
                        paint-order: stroke;
                        cursor: pointer;
                    }

                        .modal .modal-container .modal-content.quiz .modal-body .card.new::before {
                            content: url(../../img/icon_quiz_new.svg);
                            position: absolute;
                            top: -0.31vw;
                            left: -0.31vw;
                        }

                        .modal .modal-container .modal-content.quiz .modal-body .card.pick-up {
                            background: url(../../img/bg-picup.svg) no-repeat right bottom/cover;
                            border-color: #2ca09f;
                        }

                            .modal .modal-container .modal-content.quiz .modal-body .card.pick-up::before {
                                content: url(../../img/icon_quiz_pickup.svg);
                                position: absolute;
                                top: -0.8vw;
                                left: -0.8vw;
                            }

                    .modal .modal-container .modal-content.quiz .modal-body .btn_start {
                        width: 15.6vw;
                        height: 4.2vw;
                        line-height: 4.4vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        border-radius: 2.2vw;
                        font-size: 1.9vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }

                .modal .modal-container .modal-content.quiz .footer {
                    position: relative;
                    bottom: 6.5vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .modal .modal-container .modal-content.quiz .footer .btn_next {
                        width: 15.6vw;
                        height: 4.2vw;
                        border-radius: 2.1vw;
                        line-height: 4.2vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        font-size: 1.88vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }

                    .modal .modal-container .modal-content.quiz .footer .btn_try_again {
                        width: 15.6vw;
                        height: 4.2vw;
                        border-radius: 2.1vw;
                        line-height: 4.2vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        font-size: 1.88vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        margin: 0 2.76vw;
                    }

                    .modal .modal-container .modal-content.quiz .footer .btn_exit_quiz {
                        width: 15.6vw;
                        height: 4.2vw;
                        border-radius: 2.1vw;
                        line-height: 4.2vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        font-size: 1.88vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        margin: 0 2.76vw;
                    }

            .modal .modal-container .modal-content.event {
                width: 88.5vw;
            }

                .modal .modal-container .modal-content.event .header .title {
                    margin: 0 9.5vw;
                }

                .modal .modal-container .modal-content.event .header::before {
                    content: "";
                    background: url(../../img/icon_event.svg) no-repeat 0/contain;
                    position: absolute;
                    width: 5.68vw;
                    height: 8.49vw;
                    left: 3.6vw;
                    top: 0;
                    z-index: 1;
                }

                .modal .modal-container .modal-content.event .modal-body .content {
                    height: 100%;
                    margin: 0 9.5vw;
                    overflow: auto;
                    font-size: 18px;
                }

                .modal .modal-container .modal-content.event .modal-body .content ul {
                    list-style: disc inside;
                    padding: 10px;
                    margin: unset;
                }

                .modal .modal-container .modal-content.event .modal-body .content ol {
                    list-style: decimal inside;
                    padding: 10px;
                    margin: unset;
                }

                    .modal .modal-container .modal-content.event .modal-body .content ul li,
                    .modal .modal-container .modal-content.event .modal-body .content ol li {
                        padding: 10px;
                        margin: unset;
                    }

                .modal .modal-container .modal-content.event .footer {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .modal .modal-container .modal-content.event .footer .btn_participate,
                    .modal .modal-container .modal-content.event .footer .btn_not_participate,
                    .modal .modal-container .modal-content.event .footer .btn_not_participate_after {
                        width: 15.6vw;
                        height: 4.2vw;
                        border-radius: 2.1vw;
                        line-height: 4.2vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        font-size: 1.88vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        margin: 0 2.76vw;
                    }

                    .modal .modal-container .modal-content.event .footer .btn_action-register,
                    .modal .modal-container .modal-content.event .footer .btn_action-not-register {
                        width: 31.2vw;
                        height: 4.2vw;
                        border-radius: 2.1vw;
                        line-height: 4.2vw;
                        background-color: #fff;
                        border: solid 0.3vw #d6d7db;
                        font-size: 1.88vw;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        margin: 0 2.76vw;
                    }

            .modal .modal-container .modal-content.saveing-action {
                width: 88.5vw;
            }

                .modal .modal-container .modal-content.saveing-action .modal-body .theme {
                    width: 100%;
                    height: 7.3vw;
                    background-color: #f0efee;
                    display: flex;
                    align-items: center;
                    padding-left: 1.6vw;
                    color: #003686;
                }

                    .modal .modal-container .modal-content.saveing-action .modal-body .theme .time {
                        height: 7.3vw;
                        text-align: center;
                        font-weight: bold;
                        font-size: 1.3vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin-left: 1.6vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .theme .time img {
                            height: 3.8vw;
                        }

                    .modal .modal-container .modal-content.saveing-action .modal-body .theme .theme-icon {
                        margin-left: 1.6vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .theme .theme-icon img {
                            height: 5.7vw;
                            width: 5.7vw;
                        }

                    .modal .modal-container .modal-content.saveing-action .modal-body .theme .title {
                        margin-left: 1.6vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .theme .title .sub-title {
                            font-size: 1.6vw;
                        }

                        .modal .modal-container .modal-content.saveing-action .modal-body .theme .title .main-title {
                            font-size: 2.1vw;
                            font-weight: bold;
                            color: #333;
                        }

                .modal .modal-container .modal-content.saveing-action .modal-body .result {
                    background-color: #abe0c7;
                    height: 4.2vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .modal .modal-container .modal-content.saveing-action .modal-body .result .title {
                        background: #abe0c7 url(../../img/icon_hand-holding-dollar2.svg) no-repeat 0 50%/2.8vw 2.5vw;
                        font-size: 1.6vw;
                        font-weight: bold;
                        color: #205e60;
                        padding-left: 3.5vw;
                        margin-left: 1vw;
                        margin-right: 1vw;
                    }

                    .modal .modal-container .modal-content.saveing-action .modal-body .result .money {
                        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                        color: #303030;
                        font-size: 1.3vw;
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                        margin-left: 1vw;
                        margin-right: 1vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .money div {
                            display: flex;
                            align-items: center;
                            justify-content: end;
                            width: 9.4vw;
                            min-width: -moz-fit-content;
                            min-width: fit-content;
                            height: 2.9vw;
                            line-height: 2.9vw;
                            border: solid 0.2vw #09aaaf;
                            border-radius: 0.5vw;
                            font-size: 1.8vw;
                            font-weight: bold;
                            text-align: right;
                            padding-right: 0.5vw;
                            color: #09aaaf;
                            box-sizing: border-box;
                            background-color: #fff;
                        }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .money span {
                            padding-left: 0.5vw;
                            padding-right: 0.5vw;
                        }

                    .modal .modal-container .modal-content.saveing-action .modal-body .result .co2 {
                        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                        color: #303030;
                        font-size: 1.3vw;
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                        margin-left: 1vw;
                        margin-right: 1vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .co2 div {
                            display: flex;
                            align-items: center;
                            justify-content: end;
                            width: 9.4vw;
                            min-width: -moz-fit-content;
                            min-width: fit-content;
                            height: 2.9vw;
                            line-height: 2.9vw;
                            border: solid 0.2vw #09aaaf;
                            border-radius: 0.5vw;
                            font-size: 1.8vw;
                            font-weight: bold;
                            text-align: right;
                            padding-right: 0.5vw;
                            color: #09aaaf;
                            box-sizing: border-box;
                            background-color: #fff;
                        }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .co2 span {
                            padding-left: 0.5vw;
                            padding-right: 0.5vw;
                        }

                    .modal .modal-container .modal-content.saveing-action .modal-body .result .kwh {
                        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                        color: #303030;
                        font-size: 1.3vw;
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                        margin-left: 1vw;
                        margin-right: 1vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .kwh div {
                            display: flex;
                            align-items: center;
                            justify-content: end;
                            width: 9.4vw;
                            min-width: -moz-fit-content;
                            min-width: fit-content;
                            height: 2.9vw;
                            line-height: 2.9vw;
                            border: solid 0.2vw #09aaaf;
                            border-radius: 0.5vw;
                            font-size: 1.8vw;
                            font-weight: bold;
                            text-align: right;
                            padding-right: 0.5vw;
                            color: #09aaaf;
                            box-sizing: border-box;
                            background-color: #fff;
                        }

                        .modal .modal-container .modal-content.saveing-action .modal-body .result .kwh span {
                            padding-left: 0.5vw;
                            padding-right: 0.5vw;
                        }

                .modal .modal-container .modal-content.saveing-action .modal-body .d-flex {
                    display: flex;
                }

                    .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        width: 45vw;
                        height: 29.6vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .advice-card {
                            height: 25vw;
                            padding: 2vw 2vw;
                            box-shadow: 0px 0.2vw 0.5vw #888888;
                            border: solid 0.1vw rgba(0, 0, 0, 0.15);
                            color: #003686;
                        }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .advice-card .scroll-box {
                                height: 100%;
                                overflow-y: auto;
                            }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .advice-card .advice {
                                min-height: unset;
                            }

                        .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .scroll-box {
                            height: 8.96vw;
                            overflow-y: auto;
                        }

                        .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .advice {
                            width: 31.3vw;
                            min-height: 8.96vw;
                            text-indent: 3.1vw;
                            font-size: 1.6vw;
                            color: #003686;
                            background-image: linear-gradient(180deg, transparent 2.8vw, #cacaca 2px);
                            background-size: 100% 2.9vw;
                            line-height: 2.9vw;
                            padding-bottom: 2px;
                            position: relative;
                        }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .advice::before {
                                content: "";
                                background: url(../../img/icon_pen.svg) no-repeat 0/1.9vw;
                                position: absolute;
                                top: 0.5vw;
                                left: 0.3vw;
                                width: 1.9vw;
                                height: 1.9vw;
                                display: block;
                            }

                        .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture {
                            width: 35.5vw;
                            height: 18.33vw;
                            display: flex;
                            -moz-column-gap: 2vw;
                            column-gap: 2vw;
                            background: url(../../img/before-after-arrow.svg) no-repeat 50% 100%/7.6vw 6.72vw;
                        }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture .before-image-box {
                                width: 17.24vw;
                                height: 12.92vw;
                                background-size: contain;
                                border: 0.52vw solid #fff;
                                box-shadow: 0px 0.21vw 0.21vw 0px rgba(0, 0, 0, 0.25);
                                transform: rotate(-10deg);
                                top: 2vw;
                            }

                                .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture .before-image-box::after {
                                    content: "Before";
                                    font-size: 1.09vw;
                                    color: #003686;
                                    font-weight: bold;
                                    position: absolute;
                                    bottom: -2vw;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture .after-image-box {
                                width: 17.24vw;
                                height: 12.92vw;
                                background-size: contain;
                                border: 0.52vw solid #fff;
                                box-shadow: 0px 0.21vw 0.21vw 0px rgba(0, 0, 0, 0.25);
                                top: 0.2vw;
                            }

                                .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .l-box .picture .after-image-box::after {
                                    content: "After";
                                    font-size: 1.09vw;
                                    color: #003686;
                                    font-weight: bold;
                                    position: absolute;
                                    bottom: -2vw;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }

                    .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .r-box {
                        width: 55vw;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding-top: 2vw;
                        padding-bottom: 2vw;
                        gap: 2vw;
                    }

                        .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .r-box .card {
                            width: 44.3vw;
                            height: 6.2vw;
                            background-color: #f9f9f9;
                            border: solid #c3c3c3 0.1vw;
                            border-radius: 0.5vw;
                            font-size: 1.6vw;
                            color: #003686;
                            padding: 0.5vw 1vw;
                        }

                            .modal .modal-container .modal-content.saveing-action .modal-body .d-flex .r-box .card span {
                                font-weight: bold;
                            }

                .modal .modal-container .modal-content.saveing-action .footer .btn_check {
                    width: 100%;
                    height: 6.5vw;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;
                }

                    .modal .modal-container .modal-content.saveing-action .footer .btn_check img {
                        width: 8.1vw;
                        cursor: pointer;
                        bottom: 1vw;
                        z-index: 1;
                    }

                    .modal .modal-container .modal-content.saveing-action .footer .btn_check .people {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #ffd35a;
                        border-radius: 1vw;
                        width: 4vw;
                        height: 2vw;
                        font-size: 1.8vw;
                        font-weight: bold;
                        bottom: 0.7vw;
                        position: absolute;
                        left: 50%;
                        bottom: 0.3vw;
                        transform: translateX(-50%);
                    }

                        .modal .modal-container .modal-content.saveing-action .footer .btn_check .people span {
                            font-size: 0.8vw;
                            position: relative;
                            bottom: -0.4vw;
                            padding-left: 0.2vw;
                        }

                .modal .modal-container .modal-content.saveing-action .footer .button-area {
                    width: 100%;
                    height: 6.5vw;
                    position: absolute;
                    bottom: 0;
                    font-size: 1.9vw;
                    display: flex;
                    font-weight: bold;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    z-index: 0;
                }

                    .modal .modal-container .modal-content.saveing-action .footer .button-area .btn-equipment {
                        width: 15.6vw;
                        height: 4.2vw;
                        background-color: #fff;
                        border: solid #d6d7db;
                        border-radius: 2.1vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #003686;
                        cursor: pointer;
                    }

                    .modal .modal-container .modal-content.saveing-action .footer .button-area .btn-implementation {
                        width: 15.6vw;
                        height: 4.2vw;
                        background-color: #fff;
                        border: solid #d6d7db;
                        border-radius: 2.1vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #003686;
                        cursor: pointer;
                    }

            .modal .modal-container .modal-content.ai-demand .modal-body {
                height: 41vw;
                background: url(../../img/BG_demand_B.svg) no-repeat;
                background-size: cover;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 3.1vw;
                font-weight: bold;
                color: #fff;
            }

                .modal .modal-container .modal-content.ai-demand .modal-body .icon {
                    height: 6.8vw;
                    margin-bottom: 1.6vw;
                }

                .modal .modal-container .modal-content.ai-demand .modal-body .timer-container {
                    margin-top: 1.6vw;
                }

                    .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .timer {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 5.2vw;
                        font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                        color: #303030;
                        margin-bottom: 1.6vw;
                    }

                        .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .timer .digit-wrapper {
                            height: 8.3vw;
                            width: 6.3vw;
                            background-color: #fff;
                            border-radius: 0.5vw;
                            text-align: center;
                            margin: 0 0.45vw;
                            overflow: hidden;
                            position: relative;
                        }

                            .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .timer .digit-wrapper .digit {
                                height: 8.3vw;
                                width: 6.3vw;
                                position: absolute;
                                top: 0;
                                opacity: 1;
                                animation: none;
                            }

                                .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .timer .digit-wrapper .digit.roll-up {
                                    animation: roll-up 0.5s ease-in-out;
                                }

                                .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .timer .digit-wrapper .digit.roll-down {
                                    animation: roll-down 0.5s ease-in-out forwards;
                                }

@keyframes roll-up {
    0% {
        top: -4vw;
        opacity: 0;
    }

    75% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

@keyframes roll-down {
    0% {
        top: 0;
        opacity: 1;
    }

    25% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: 4vw;
        opacity: 0;
    }
}

.modal .modal-container .modal-content.ai-demand .modal-body .timer-container .expected-time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6vw;
}

    .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .expected-time .clock-icon {
        padding-right: 0.6vw;
        height: 2.3vw;
    }

    .modal .modal-container .modal-content.ai-demand .modal-body .timer-container .expected-time .time-label {
        padding-right: 1.4vw;
    }

.modal .modal-container .modal-content.ai-demand .modal-body .advice {
    width: 100%;
    height: 5.2vw;
    background-color: #000;
    font-size: 2.1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.6vw;
}

    .modal .modal-container .modal-content.ai-demand .modal-body .advice .icon_power-off {
        width: 2.8vw;
        margin-right: 1.2vw;
    }

.modal .modal-container .modal-content.ai-demand .footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .modal .modal-container .modal-content.ai-demand .footer .btn_ok {
        width: 15.6vw;
        height: 4.2vw;
        line-height: 4.4vw;
        background-color: #fff;
        border: solid 0.3vw #dec9a6;
        border-radius: 2.2vw;
        font-size: 1.9vw;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

.modal .modal-container .modal-content.announce {
    height: 91dvh;
    width: 88.5dvw;
}

    .modal .modal-container .modal-content.announce .header {
        font-size: 2.08vw;
    }

    .modal .modal-container .modal-content.announce .sub-header {
        height: 4.17vw;
        background-color: #f0efee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.08vw;
        font-weight: bold;
        color: #003686;
    }

    .modal .modal-container .modal-content.announce .modal-body.announce-contents {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

        .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            row-gap: 1.56vw;
            overflow-x: hidden;
            overflow-y: auto;
            height: 44.27vw;
            padding-top: 3.13vw;
            padding-bottom: 3.13vw;
        }

            .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article {
                width: 69.63vw;
                border: solid 0.31vw #d6d7db;
                border-radius: 0.5vw;
                color: #003686;
                font-size: 1.56vw;
                font-weight: bold;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                cursor: pointer;
            }

                .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .date {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 14.9vw;
                    height: 8.8vh;
                    background-color: #c6e2e5;
                    box-sizing: border-box;
                    padding-left: 0.75vw;
                }

                .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title {
                    display: grid;
                    grid-template-columns: auto 1fr auto auto;
                    align-items: center;
                    padding-left: 0.5vw;
                    padding-right: 0.5vw;
                    width: 57vw;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    column-gap: 0.5dvw;
                }

                    .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title .title {
                        grid-column: 2;
                    }

                    .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title .type {
                        grid-column: 3;
                        color: #003686;
                        background: #E5F2F3;
                        padding: 0.5dvh 0.5dvw;
                        border-radius: 10%;
                        font-size: 1.3vw;
                    }

                    .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title::after {
                        grid-column: 4;
                        content: "未読";
                        background-color: #dc5310;
                        color: #fff;
                        display: inline-block;
                        width: 4.17vw;
                        border-radius: 10%;
                        padding: 0.5dvh 0.5dvw;
                        text-align: center;
                        font-size: 1.3vw;
                    }

                    .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title.new::before {
                        grid-column: 1;
                        content: "NEW";
                        background-color: #4d8cca;
                        color: #fff;
                        font-size: 1.1vw;
                        display: inline-block;
                        width: 3.13vw;
                        border-radius: 45%;
                        margin-right: 0.25vw;
                        padding-bottom: 0.15vw;
                        text-align: center;
                    }

                    .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .announce-title.already-read::after {
                        content: "既読";
                        background-color: #f0efee;
                        color: #003686;
                    }

                .modal .modal-container .modal-content.announce .modal-body.announce-contents .list-box .announce-article .btn-next {
                    width: 2.6vw;
                    height: 2.6vw;
                    background: url(../../img/icon_anglebracket.svg) no-repeat 50%/0.89vw 1.56vw;
                    transform: rotate(180deg);
                    cursor: pointer;
                }

.modal .modal-container .modal-content.article {
    height: 55.2vw;
    width: 88.5vw;
}

    .modal .modal-container .modal-content.article .header .btn-announce-list {
        width: 12.66vw;
        height: 4.2vw;
        border-radius: 2.1vw;
        line-height: 4.2vw;
        background-color: #fff;
        border: solid 0.3vw #d6d7db;
        font-size: 1.88vw;
        font-weight: bold;
        color: #003686;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 2.76vw;
        position: absolute;
        left: 1.77vw;
    }

        .modal .modal-container .modal-content.article .header .btn-announce-list::before {
            content: "";
            background: url(../../img/icon_bullhorn2.svg) no-repeat 0/contain;
            display: inline-block;
            width: 2.08vw;
            height: 2.08vw;
            margin-right: 1vw;
        }

    .modal .modal-container .modal-content.article .sub-header {
        height: 4.17vw;
        background-color: #f0efee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.08vw;
        font-weight: bold;
        color: #003686;
    }

    .modal .modal-container .modal-content.article .modal-body {
        overflow: auto;
        padding: 1vw 11.46vw;
        font-size: 1.77vw;
        height: 37.88vw;
    }

        .modal .modal-container .modal-content.article .modal-body .publication-date {
            text-align: right;
        }

    .modal .modal-container .modal-content.article .footer {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .modal .modal-container .modal-content.article .footer .btn_previous {
            width: 15.6vw;
            height: 4.2vw;
            border-radius: 2.1vw;
            line-height: 4.2vw;
            background-color: #fff;
            border: solid 0.3vw #d6d7db;
            font-size: 1.88vw;
            font-weight: bold;
            color: #003686;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin: 0 2.76vw;
        }

            .modal .modal-container .modal-content.article .footer .btn_previous::before {
                content: "";
                background: url(../../img/icon_anglebracket.svg) no-repeat 0/contain;
                display: inline-block;
                width: 1.15vw;
                height: 1.8vw;
                margin-right: 1vw;
            }

        .modal .modal-container .modal-content.article .footer .btn_next {
            width: 15.6vw;
            height: 4.2vw;
            border-radius: 2.1vw;
            line-height: 4.2vw;
            background-color: #fff;
            border: solid 0.3vw #d6d7db;
            font-size: 1.88vw;
            font-weight: bold;
            color: #003686;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin: 0 2.76vw;
        }

            .modal .modal-container .modal-content.article .footer .btn_next::after {
                content: "";
                background: url(../../img/icon_anglebracket.svg) no-repeat 0/contain;
                display: inline-block;
                width: 1.15vw;
                height: 1.8vw;
                margin-left: 1vw;
                transform: rotate(180deg);
            }

.modal .modal-container .modal-content.weather {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

    .modal .modal-container .modal-content.weather .weather-contents {
        height: 100%;
        display: grid;
        grid-template-rows: auto min-content 1fr;
    }

    .modal .modal-container .modal-content.weather .weather-contents .day-weather-box {
        align-self: end;
        display: flex;
        justify-content: center;
        column-gap: 2dvw;
    }

        .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather {
            width: 13dvw;
            display: grid;
            grid-template-rows: auto auto 1fr 1fr;
            border-radius: 0.52vw;
            outline: 0.21vw solid #d6d7db;
            cursor: pointer;
            position: relative;
            place-items: center;
            row-gap: 0.5vh;
        }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather.current {
                outline: solid 0.31vw #003686;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather.current::after {
                    content: "";
                    display: block;
                    border-style: solid;
                    border-width: 1.77vw 1.3vw 0 1.3vw;
                    border-color: #003686 transparent transparent transparent;
                    position: absolute;
                    bottom: -1.77vw;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .date {
                background-color: #cee6e9;
                color: #2e2725;
                width: 100%;
                border-top-right-radius: 0.42vw;
                border-top-left-radius: 0.42vw;
                font-size: 1em;
                font-weight: bold;
                text-align: center;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .date.saturday {
                    color: #167893;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .date.sunday {
                    color: #c02568;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .forecast {
                justify-self: center;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .forecast img {
                    height: 6.17dvh;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .temperature {
                justify-self: center;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                background: url(../../img/icon_temperature-three-quarters.svg) no-repeat 0 85%/1.88vw;
                padding-left: 2vw;
                column-gap: 0.3vw;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .temperature .label {
                    font-size: 2.4vh;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .temperature .max-temperature .temperature-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    color: #f0582c;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .temperature .min-temperature .temperature-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    color: #3d8dc6;
                    text-align: center;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .precipitation-probability {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin-bottom: 0.6vw;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .precipitation-probability .label {
                    font-size: 2.4vh;
                    width: 4.6vw;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .except-today-weather .precipitation-probability .probability-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    background: url(../../img/icon_droplet.svg) no-repeat 0 50%/4.6vh;
                    padding-left: 4.8vh;
                }

        .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather {
            width: 26dvw;
            display: grid;
            grid-template-rows: max-content max-content 1fr 1fr;
            align-items: center;
            outline: 0.21vw solid #d6d7db;
            border-radius: 0.52vw;
            cursor: pointer;
            position: relative;
            place-items: center;
            row-gap: 0.5vh;
        }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather.current {
                outline: solid 0.31vw #003686;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather.current::after {
                    content: "";
                    display: block;
                    border-style: solid;
                    border-width: 1.77vw 1.3vw 0 1.3vw;
                    border-color: #003686 transparent transparent transparent;
                    position: absolute;
                    bottom: -1.77vw;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .date {
                background-color: #cee6e9;
                color: #2e2725;
                width: 100%;
                border-top-right-radius: 0.42vw;
                border-top-left-radius: 0.42vw;
                font-size: 2.8vh;
                font-weight: bold;
                text-align: center;
            }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .forecast {
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
                column-gap: 0.78vw;
                font-size: 4vh;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .forecast img {
                    height: 6.17vh;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .temperature {
                justify-self: center;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                background: url(../../img/icon_temperature-three-quarters.svg) no-repeat 0 85%/4.8vh;
                padding-left: 2.6vw;
                column-gap: 1vw;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .temperature .label {
                    font-size: 2.4vh;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .temperature .max-temperature .temperature-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    color: #f0582c;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .temperature .min-temperature .temperature-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    color: #3d8dc6;
                    text-align: center;
                }

            .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .precipitation-probability {
                justify-self: center;
                flex-direction: column;
                margin-bottom: 0.6vw;
            }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .precipitation-probability .label {
                    font-size: 2.4vh;
                    text-align: center;
                }

                .modal .modal-container .modal-content.weather .weather-contents .day-weather-box .today-weather .precipitation-probability .probability-value {
                    font-size: 3.7vh;
                    font-weight: bold;
                    background: url(../../img/icon_droplet.svg) no-repeat 0 50%/4.8vh;
                    padding-left: 4.8vh;
                }

    .modal .modal-container .modal-content.weather .weather-contents .segment-line {
        height: 0.21vw;
        background-color: #d6d7db;
        margin-top: 1.88vw;
    }

        .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: auto 1fr 1fr;
            padding: 1dvh 1dvw;
            row-gap: 1vh;
        }

        .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .date {
            width: 100%;
            text-align: left;
            font-size: 1.25vw;
            font-weight: bold;
        }

        .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            background: #ebebeb;
            column-gap: 0.21vw;
            row-gap: 1.5vh;
        }

            .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather {
                background-color: #fff;
                display: grid;
                grid-template-rows: auto auto 1fr 1fr;
                row-gap: 0.6vh;
                align-items: center;
                justify-content: stretch;
            }

                .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather.current {
                    outline: 0.21vw solid #003686;
                    border-radius: 0.52vw;
                }

                    .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather.current .time {
                        border-radius: 0.52vw;
                    }

                .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .time {
                    text-align: center;
                    color: #2e2725;
                    font-size: 0.85em;
                    font-weight: bold;
                    background: #f5f5f5;
                }

                .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .forecast {
                    justify-self: center;
                }

                    .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .forecast img {
                        height: 3dvh;
                    }

                .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .temperature {
                    justify-self: center;
                    height: 3.12dvh;
                    background: url(../../img/icon_temperature-three-quarters.svg) no-repeat 0/1.35vw;
                }

                    .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .temperature .temperature-value {
                        font-size: 2.35dvh;
                        font-weight: bold;
                        padding-left: 1.35vw;
                    }

                .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .precipitation-probability {
                    justify-self: center;
                    height: 3.12dvh;
                    background: url(../../img/icon_droplet.svg) no-repeat 0/1.35vw;
                    margin-bottom: 0.4vw;
                }

                    .modal .modal-container .modal-content.weather .weather-contents .hourly-weather-box .d-flex .hour-weather .precipitation-probability .probability-value {
                        font-size: 2.35dvh;
                        font-weight: bold;
                        padding-left: 1.35vw;
                    }

.carousel {
    background-color: #f0efee;
    position: relative;
    height: 11.5vw;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    padding-top: 0.8vw;
    /* カルーセルのスライド部分 */
    /* 次/前のボタン */
    /* 無効状態のボタン */
    /* インジケータボタン */
}

    .carousel .carousel-inner {
        display: flex;
        align-items: center;
        transition: transform 0.5s ease-in-out;
        width: 300%; /* スライド3つ分の幅 */
        /* 各スライド */
    }

        .carousel .carousel-inner .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
        }

            .carousel .carousel-inner .carousel-item .advice {
                width: 86.5vw;
                height: 9.1vw;
                background-color: #fff;
                border: solid 0.3vw #d6d7db;
                border-radius: 0.5vw;
                margin-left: 6.8vw;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
            }

            .carousel .carousel-inner .carousel-item .time {
                width: 7.3vw;
                text-align: center;
                font-weight: bold;
                font-size: 1.3vw;
                color: #003686;
            }

                .carousel .carousel-inner .carousel-item .time img {
                    width: 3.8vw;
                }

            .carousel .carousel-inner .carousel-item .sentence {
                font-weight: bold;
                color: #303030;
                font-size: 2.1vw;
                width: 42.19vw;
            }

            .carousel .carousel-inner .carousel-item .effect {
                color: #0c9398;
            }

                .carousel .carousel-inner .carousel-item .effect .title {
                    background: url(../../img/icon_hand-holding-dollar.svg) no-repeat 0/2.8vw 2.5vw;
                    color: #09aaaf;
                    font-size: 1.6vw;
                    font-weight: bold;
                    padding-left: 3.5vw;
                }

                    .carousel .carousel-inner .carousel-item .effect .title .icon-info {
                        width: 2.4vw;
                        height: 2.4vw;
                        cursor: pointer;
                        top: 0.5vw;
                    }

                .carousel .carousel-inner .carousel-item .effect .money {
                    font-family: Noto Sans CJK JP, Noto Sans JP, sans-serif;
                    color: #303030;
                    font-size: 1.6vw;
                    display: flex;
                    align-items: center;
                    margin-top: 0.5vw;
                    white-space: nowrap;
                }

                    .carousel .carousel-inner .carousel-item .effect .money div {
                        display: flex;
                        align-items: center;
                        justify-content: end;
                        width: 13.3vw;
                        min-width: -moz-fit-content;
                        min-width: fit-content;
                        height: 3.8vw;
                        line-height: 3.8vw;
                        border: solid 0.2vw #09aaaf;
                        border-radius: 0.5vw;
                        font-size: 2.8vw;
                        font-weight: bold;
                        text-align: right;
                        padding-right: 0.5vw;
                        padding-bottom: 0.2vw;
                        color: #09aaaf;
                        box-sizing: border-box;
                    }

                    .carousel .carousel-inner .carousel-item .effect .money span {
                        padding-left: 1vw;
                        padding-right: 1vw;
                    }

                    .carousel .carousel-inner .carousel-item .effect .money img {
                        width: 3.8vw;
                    }

            .carousel .carousel-inner .carousel-item .icon {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 6.15vw;
            }

                .carousel .carousel-inner .carousel-item .icon img {
                    width: 6.1vw;
                    cursor: pointer;
                }

                .carousel .carousel-inner .carousel-item .icon .people {
                    position: absolute;
                    bottom: -0.8vw;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    align-items: center;
                    background: #ffd35a;
                    border-radius: 1vw;
                    width: 4vw;
                    height: 2vw;
                    justify-content: center;
                    font-size: 1.8vw;
                    font-weight: bold;
                }

                    .carousel .carousel-inner .carousel-item .icon .people span {
                        font-size: 0.8vw;
                        position: relative;
                        bottom: -0.4vw;
                    }

    .carousel .prev,
    .carousel .next {
        position: absolute;
        top: 50%;
        width: 6.1vw;
        height: 6vw;
        transform: translateY(-50%);
        background-color: #fff;
        color: white;
        padding: 0px;
        border: solid #d6d7db 0.3vw;
        cursor: pointer;
    }

    .carousel .prev {
        left: 0px;
        border-left: #fff;
        border-radius: 0 3vw 3vw 0;
    }

        .carousel .prev img {
            height: 2.3vw;
            top: 0.1vw;
        }

    .carousel .next {
        right: 0px;
        border-right: #fff;
        border-radius: 3vw 0 0 3vw;
    }

        .carousel .next img {
            transform: rotate(180deg);
            height: 2.3vw;
            top: 0.1vw;
        }

        .carousel .prev:hover,
        .carousel .next:hover {
            background-color: #fff;
        }

        .carousel .prev:disabled,
        .carousel .next:disabled {
            opacity: 0.5;
            cursor: default;
        }

    .carousel .carousel-indicators {
        text-align: center;
        width: 100%;
        height: 1.8vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .carousel .carousel-indicators .dot {
            display: inline-block;
            width: 0.7vw;
            height: 0.7vw;
            margin: 0 5px;
            background-color: #ffffff;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.6s ease;
        }

            .carousel .carousel-indicators .dot.active {
                background-color: #003686;
            }

.swich-area .switch-container {
    position: relative;
    background-color: #fff;
    border-radius: 2.1vw;
    width: 14.6vw;
    height: 4.2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: solid #d6d7db 0.3vw;
    box-sizing: border-box;
}

    .swich-area .switch-container .switch-label {
        z-index: 1;
        width: 6.8vw;
        text-align: center;
        cursor: pointer;
        font-size: 1.9vw;
        color: #003686;
        transition: color 0.3s ease;
    }

        .swich-area .switch-container .switch-label img {
            width: 2.6vw;
        }

    .swich-area .switch-container input[type=radio] {
        display: none !important;
    }

        .swich-area .switch-container input[type=radio]#day:checked ~ .switch-background {
            transform: translateX(0);
        }

        .swich-area .switch-container input[type=radio]#month:checked ~ .switch-background {
            transform: translateX(calc(100% - 0.6vw));
        }

        .swich-area .switch-container input[type=radio]#bar:checked ~ .switch-background {
            transform: translateX(0);
        }

        .swich-area .switch-container input[type=radio]#polyline:checked ~ .switch-background {
            transform: translateX(calc(100% - 0.6vw));
        }

        .swich-area .switch-container input[type=radio]:checked + label {
            font-weight: bold;
        }

    .swich-area .switch-container.electric.select-Max-demand .switch-label {
        cursor: default;
    }

    .swich-area .switch-container.electric.select-Max-demand .switch-background {
        width: 13.4vw;
    }

.swich-area .switch-background {
    position: absolute;
    margin-left: 0.3vw;
    left: 0;
    height: 3.1vw;
    width: 50%;
    background-color: #c6e2e5;
    border-radius: 1.55vw;
    transition: transform 0.3s ease;
}

    .swich-area .switch-background.single {
        width: calc(100% - 0.6vw);
    }

.toggle-area {
    border: solid #d6d7db 0.2vw;
    border-radius: 1.65vw;
    background-color: #ffffff;
    height: 2.1vw;
    width: 3.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* トグル全体のコンテナ */
}

    .toggle-area .toggle-container {
        position: relative;
        width: 2.4vw;
        height: 1.3vw;
        background-color: #fff; /* 背景色 */
        box-sizing: content-box;
        border: solid 0.24vw #fff;
        border-radius: 0.85vw; /* 丸みを帯びた角 */
        transition: background-color 0.3s ease; /* 色の遷移 */
        cursor: pointer; /* クリック可能なカーソルを表示 */
        /* トグルスイッチ（チェックボックス）を非表示に */
        /* スライダーのスタイル */
    }

        .toggle-area .toggle-container .toggle-input {
            display: none;
        }

        .toggle-area .toggle-container .toggle-slider {
            position: absolute;
            width: 1.3vw; /* スライダーの直径 */
            height: 1.3vw;
            background-color: #d9d9d9; /* スライダーの初期色（例：薄いグレー） */
            border-radius: 50%; /* 完全な円にする */
            box-sizing: border-box;
            transition: all 0.3s ease; /* スライダーの動きのスムーズさ */
        }

        .toggle-area .toggle-container.checked {
            background-color: #c6e2e5;
        }

            .toggle-area .toggle-container.checked .toggle-slider {
                background-color: #45429b; /* チェック時のスライダーの色 */
                transform: translateX(1.1vw); /* スライダーを右に動かす */
            }

.button-check-anime {
    transition: transform 0.3s ease, opacity 0.5s ease;
    cursor: pointer;
}

    .button-check-anime.enlarge {
        transform: scale(1.4); /* 拡大 */
    }

    .button-check-anime.normal {
        transform: scale(1); /* 元の倍率に戻す */
    }

    .button-check-anime.fade-out {
        opacity: 0; /* フェードアウト */
        pointer-events: none; /* フェードアウト中はクリック不可に */
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.electricity-usage-box {
    position: absolute;
    top: -0.1vw;
    left: 22.4vw;
}

.electricity-demand-box {
    position: absolute;
    top: 9.6vw;
    left: 35vw;
}

.savings-check-box {
    position: absolute;
    top: 24.2vw;
    left: 29vw;
}

.artificial-intelligence-box {
    position: absolute;
    top: 24.2vw;
    left: 5.7vw;
}

.temperature-box {
    position: absolute;
    top: 9.6vw;
    left: -0.2vw;
}

.radarchart {
    z-index: 0;
}

.login-contents {
    width: 100vw;
    height: 100vh;
    background: #fff url(../../img/bg-login.svg) 50%/contain no-repeat;
}

    .login-contents .login-input-area {
        width: 41.67vw;
        height: 46.72vw;
        position: absolute;
        top: 50%;
        left: 4.2vw;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f6f6f6;
        border-radius: 1vw;
        padding-top: 4.2vw;
        color: #003686;
        font-size: 1.25vw;
        font-weight: bold;
    }

        .login-contents .login-input-area .title {
            width: 100%;
            text-align: center;
        }

            .login-contents .login-input-area .title img {
                width: 16.77vw;
            }

        .login-contents .login-input-area .d-flex {
            width: 31.25vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 3.65vw;
        }

            .login-contents .login-input-area .d-flex input {
                height: 3.13vw;
                border: 0.2vw solid #d6d7db;
                margin-top: 0.1vw;
                margin-bottom: 3vw;
                font-size: 1.56vw;
                padding: 0.15vw;
                box-sizing: border-box;
            }

        .login-contents .login-input-area .btn-login {
            width: 15.63vw;
            height: 4.17vw;
            border-radius: 2.09vw;
            background-color: #fff;
            border: 0.31vw solid #d6d7db;
            cursor: pointer;
            font-size: 1.88vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-contents .login-input-area .guidance-text {
            font-size: 1.04vw;
            padding: 2.3vw 1.3vw;
        }

    .login-contents .copyright {
        position: absolute;
        bottom: 0.5vw;
        width: 100%;
        text-align: center;
        color: #003686;
        font-size: 1.04vw;
        font-weight: bold;
    }
/*# sourceMappingURL=style.css.map */