@charset "UTF-8";

/*hearderの1とsearch-cardの0.2は統一透明度のため消さないでください
    ベースカラーを決定し、header-colorとsearch-card-colorのrgbは同じ値を入れること
*/
:root {
    --base-color: #6ecaf3;
    --background-color: rgb(248, 241, 229);
    --header-color: rgb(110 162 243);
    --sub-header-color: rgba(194, 221, 238,1);
    --sub-color: rgba(0, 66, 116,1);
    --search-card-color: rgba(243 185 110,0.2);
    --iframe-header-color: #50B3F3;
    --base-btn-color: #daf8b0;
    --base-success-color: #1f6bff;
    --base-success-color-end: #1a9eef;
}

body {
    min-height: 100vh;
    background-size: 100% auto, auto;
    background-repeat: no-repeat;
    background-position: left 0 bottom 5px, 0;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 500;
}

    body.noheader {
        background-image: url(../../images/common/bg-ev.jpg), -webkit-linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
        background-image: url(../../images/common/bg-ev.jpg), -o-linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
        background-image: url(../../images/common/bg-ev.jpg), linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
    }

a {
    color: #333;
}

/*img {
    max-width: 100% !important;
}*/
.logo-img {
    cursor: pointer;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    outline: 0;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: 5px;
    background-color: #f1f4f8;
    line-height: 36px;
}

    input[type="text"].border,
    input[type="number"].border,
    input[type="date"].border,
    input[type="datetime-local"].border,
    input[type="email"].border,
    input[type="tel"].border,
    input[type="password"].border,
    input.select-item.border,
    select.border,
    div.border,
    textarea.border {
        border: 1px solid var(--header-color) !important;
        background-color: #fff;
    }

        input[type="text"].border:disabled,
        input[type="number"].border:disabled,
        input[type="date"].border:disabled,
        input[type="datetime-local"].border:disabled,
        input[type="email"].border:disabled,
        input[type="tel"].border:disabled,
        input[type="password"].border:disabled,
        select.border:disabled,
        div.border:disabled,
        textarea.border:disabled {
            border: 1px solid #c8c8c8 !important;
            background-color: #e9ecef;
        }

    input[type="text"].disable-border,
    input[type="number"].disable-border,
    input[type="date"].disable-border,
    input[type="datetime-local"].disable-border,
    input[type="email"].disable-border,
    input[type="tel"].disable-border,
    input[type="password"].disable-border,
    select.disable-border,
    div.disable-border,
    textarea.disable-border {
        border: 1px solid #d3d6de !important;
        background-color: #fff;
    }

    input[type="text"].error-border,
    input[type="number"].error-border,
    input[type="date"].error-border,
    input[type="datetime-local"].error-border,
    input[type="email"].error-border,
    input[type="tel"].error-border,
    input[type="password"].error-border,
    select.error-border,
    div.error-border,
    textarea.error-border {
        border: 1px solid #EE8484 !important;
        background-color: #fff;
    }

    input[type="text"].warning-border,
    input[type="number"].warning-border,
    input[type="date"].warning-border,
    input[type="datetime-local"].warning-border,
    input[type="email"].warning-border,
    input[type="tel"].warning-border,
    input[type="password"].warning-border,
    select.warning-border,
    div.warning-border,
    textarea.warning-border {
        border: 1px solid #fd7e00 !important;
        background-color: #fff;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
    }

input.select-item {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
}

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

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 35px 0 10px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    background-color: #fff;
    background-image: url(../../images/common/ico_arr_d.png);
    background-size: 9px 6px;
    background-position: right 10px center;
    background-repeat: no-repeat;
    line-height: 36px;
    font-size: 16px;
}

.selectMultiple {
    background-color: #fff;
    font-size: 16px;
}

    .selectMultiple.border {
        border: 1px solid #3c8bdc;
        border-radius: 5px;
    }

    .selectMultiple > div {
        box-shadow: unset;
    }

        .selectMultiple > div:hover {
            box-shadow: unset;
        }

/* ---------------------------------------------------------
 * parts
** --------------------------------------------------------- */

#message-notification {
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 101;
}

    #message-notification.message-iframe {
        top: 0px;
        width: 100%;
    }

/* ---------- .box ---------- */
.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px;
    margin: 15px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px var( --header-color);
    border-radius: 6px;
}

@media (max-width: 767px) {
    .box {
        display: block;
        /*padding: 10px 15px;*/
        /*text-align: center;*/
    }
}
/* .size */
.box.s {
    width: 440px;
}

.box.m {
    width: 780px;
}

@media (max-width: 767px) {
    .box.s {
        width: 100%;
    }

    .box.m {
        width: 100%;
    }
}
/* .accodion */
.box.accodion {
    padding: 10px 20px;
}

    .box.accodion.open {
        padding: 20px;
    }

    .box.accodion .subtitle::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: -15px;
        margin-right: 8px;
        margin-bottom: 3px;
        border-top: 2px solid #1f6bff;
        border-right: 2px solid #1f6bff;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .box.accodion.open .subtitle::before {
        margin-bottom: 0;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .box.accodion .contents {
        display: none;
    }

    .box.accodion.open .contents {
        display: flex;
    }

@media (max-width: 767px) {
    .box.accodion {
        padding: 10px 15px;
    }

        .box.accodion.open {
            padding: 10px 15px 20px;
        }

            .box.accodion.open .contents {
                max-width: 100%;
                overflow: scroll;
            }
}

/* .subtitle */
.subtitle {
    align-self: flex-start;
    padding: 10px 0 10px 10px;
    color: #1f6bff;
    font-size: 15px;
    font-weight: bold;
}

@media (max-width: 767px) {
    .subtitle {
        font-size: 16px;
    }
}

/* ---------- btn ---------- */
.btn {
    display: inline-block;
    height: 36px;
    padding: 0 20px;
    border-radius: 5px;
    color: #888888;
    font-size: 15px;
    text-align: center;
    line-height: 36px;
    text-decoration: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: 500;
}

    .btn:disabled {
        background: #aaa;
        color: #fff;
    }

    .btn.btn-disabled {
        background: #bbb;
        color: #fff;
    }

    .btn.btn-blue {
        color: #fff;
        background-image: -webkit-linear-gradient(to right, #1f6bff 0%, #1a9eef 100%);
        background-image: -o-linear-gradient(to right, #1f6bff 0%, #1a9eef 100%);
        background-image: linear-gradient(to right, #1f6bff 0%, #1a9eef 100%);
    }

        .btn.btn-blue:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-red {
        color: #fff;
        background-image: -webkit-linear-gradient(to right, #ff0000 0%, #ff7777 100%);
        background-image: -o-linear-gradient(to right, #ff0000 0%, #ff7777 100%);
        background-image: linear-gradient(to right, #ff0000 0%, #ff7777 100%);
    }

        .btn.btn-red:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-orange {
        color: #fff;
        background-image: -webkit-linear-gradient(to right, #fa441e 0%, #fd830e 100%);
        background-image: -o-linear-gradient(to right, #fa441e 0%, #fd830e 100%);
        background-image: linear-gradient(to right, #fa441e 0%, #fd830e 100%);
    }

        .btn.btn-orange:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-green {
        color: #fff;
        background-image: -webkit-linear-gradient(to right, #00947f 0%, #62cd01 100%);
        background-image: -o-linear-gradient(to right, #00947f 0%, #62cd01 100%);
        background-image: linear-gradient(to right, #00947f 0%, #62cd01 100%);
    }

        .btn.btn-green:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-yellow {
        color: #fff;
        background-image: -webkit-linear-gradient(to right, #ffa000 0%, #ffd253 100%);
        background-image: -o-linear-gradient(to right, #ffa000 0%, #ffd253 100%);
        background-image: linear-gradient(to right, #ffa000 0%, #ffd253 100%);
    }

        .btn.btn-yellow:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-white {
        height: 32px;
        background-color: #fff;
        border: 1px solid #1f6bff;
        color: #1f6bff;
        line-height: 32px;
        padding: 0 25px;
    }

        .btn.btn-white:disabled {
            background: #aaa;
            color: #fff;
        }

    .btn.btn-grey {
        color: #fff;
        background-color: grey;
    }

        .btn.btn-grey:disabled {
            background: #aaa;
            color: #fff;
        }

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

/* ---------- .tbl ---------- */
.tbl {
    width: 100%;
    border-top: 1px solid #ececec;
    font-size: 14px;
}

    .tbl th,
    .tbl td {
        /*min-height: 54px;*/
        border-bottom: 1px solid #ececec;
        text-align: left;
    }

    .tbl th {
        padding-left: 35px;
        vertical-align: top;
    }

        .tbl th::before {
            content: "";
            display: inline-block;
            height: 54px;
            vertical-align: middle;
        }

    .tbl td {
        padding-left: 20px;
    }

        .tbl td.p {
            padding-top: 10px;
            padding-bottom: 10px;
        }

@media (max-width: 767px) {
    .tbl {
        /*width: 100%;*/
        /*border-top: 1px solid #ececec;*/
        /*font-size: 14px;*/
    }

        .tbl th,
        .tbl td {
            display: block;
            /*border-bottom: 1px solid #ececec;*/
        }

        .tbl th {
            padding-top: 10px;
            padding-left: 5px;
            border-bottom: none;
            /*vertical-align: top;*/
            font-weight: bold;
        }

            .tbl th::before {
                display: none;
            }

        .tbl td {
            padding-left: 5px;
            padding-bottom: 10px;
        }

            .tbl td.p {
                padding-top: 0;
                /*padding-bottom: 10px;*/
            }
}

/* ---------- .list_tbl（ログイン情報で使用） ---------- */
.list_tbl {
    width: 100%;
}

    .list_tbl.header_highlight {
        border-bottom: 1px solid #d3d6de;
    }

    .list_tbl th,
    .list_tbl td {
        padding: 5px 5px 5px 20px;
    }

    .list_tbl th {
        font-weight: bold;
        text-align: left;
    }

    .list_tbl.header_highlight th {
        background-color: #FFF1D9;
    }

    .list_tbl.header_highlight.header_left th {
        border-top: 1px solid #d3d6de;
    }

    .list_tbl td {
        border-top: 1px solid #d3d6de;
    }

@media (max-width: 767px) {
    .list_tbl {
        width: 900px;
        margin-top: 20px;
    }

        .list_tbl th {
        }
}

/* ---------- .list（お知らせ一覧で使用） ---------- */
.list {
    width: 100%;
}

    .list li {
        width: 100%;
    }

        .list li:not(:first-child) {
            margin-top: 10px;
            border-top: 1px solid #d3d6de;
            padding-top: 10px;
        }

    .list a {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    .list .list_title {
        font-weight: bold;
    }

        .list .list_title .maintenance {
            color: #0302ff;
        }

        .list .list_title .notice {
            color: #1a7e14;
        }

        .list .list_title .important {
            color: #ff0605;
        }

    .list .content {
    }

@media (max-width: 767px) {
    .list .content {
        text-decoration: underline;
    }
}

/* ---------- .dl ---------- */
.dl {
}

    .dl dt {
        margin-bottom: 5px;
        font-weight: bold;
    }

    .dl dd:not(:last-child) {
        margin-bottom: 10px;
    }

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

/* ---------- .separate-selecter（グラフのタイプなどに使用） ---------- */
.separate-selecter {
    display: inline-flex;
    border: 1px solid var(--base-success-color);
    border-radius: 5px;
    overflow: hidden;
    height: 40px;
    cursor: pointer;
}

    .separate-selecter div {
        padding: 0 20px;
        background-color: #fff;
        color: var(--base-success-color);
        font-size: 15px;
        line-height: 40px;
        font-weight: bold;
    }

        .separate-selecter div:not(:first-child) {
            border-left: 1px solid var(--base-success-color);
        }

    .separate-selecter .active {
        background-image: -webkit-linear-gradient(to right, var(--base-success-color) 0%, var(--base-success-color-end) 100%);
        background-image: -o-linear-gradient(to right, var(--base-success-color) 0%, var(--base-success-color-end) 100%);
        background-image: linear-gradient(to right, var(--base-success-color) 0%, var(--base-success-color-end) 100%);
        color: #fff;
    }

    .separate-selecter > div {
        min-width: 100px;
        text-align: center;
    }

/* ---------------------------------------------------------
 * header
** --------------------------------------------------------- */
header {
    position: fixed;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 3%;
    background-color: #fff;
    font-size: 13px;
}

    header .logo {
        font-size: 1.2rem;
    }

        header .logo img {
            width: 215px;
        }

    header .main_nav {
        margin: 0 auto;
    }

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

        header .main_nav li {
            font-size: 17px;
            margin-left: 10px;
        }

            header .main_nav li:not(:first-child) {
                padding-left: 10px;
            }

        header .main_nav a {
            color: #000;
            font-weight: bold;
            text-decoration: none;
        }

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

    header .user {
        position: relative;
    }

        header .user img {
            width: 30px;
        }

        header .user .user_content {
            /*display: none;*/
            display: flex;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 45px;
            width: 365px;
            margin: auto;
            padding: 16px 10px 14px;
            background-color: #fff;
            box-shadow: 0px 0px 10px #a2c4fb;
            border-radius: 5px;
            /*font-size: 12px;*/
            line-height: 1.6;
            transform: translateX(-80%);
            transition: all 0.3s ease;
            visibility: hidden;
            opacity: 0;
            cursor: pointer;
        }

            header .user .user_content::before {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 100%;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 5px 10px 5px;
                border-color: transparent transparent #fff transparent;
                transform: translateX(1050%);
            }

            header .user .user_content::after {
                content: "×";
                position: absolute;
                right: 4px;
                top: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20px;
                height: 20px;
                color: #999;
                font-size: 26px;
            }

            header .user .user_content.active {
                /*display: flex;*/
                visibility: visible;
                opacity: 1;
            }

@media (max-width: 767px) {
    header {
    }

        header .user {
            padding-right: 0px;
        }

            header .user .user_content {
                left: auto;
                transform: none;
                right: -50px;
            }

                header .user .user_content::before {
                    transform: none;
                }
}

/* ---------- .gnavi_btn（ハンバーガーメニュー(右)） ---------- */
.gnavi_btn {
    position: relative;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transition-duration: .4s;
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
}

.menu-trigger {
    position: relative;
    width: 25px;
    height: 18px;
}

    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #000;
    }

        .menu-trigger span:nth-of-type(1) {
            top: 0;
        }

        .menu-trigger span:nth-of-type(2) {
            top: 8px;
        }

        .menu-trigger span:nth-of-type(3) {
            bottom: 0;
        }

.gnavi_btn.open .menu-trigger span:nth-of-type(1) {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
}

.gnavi_btn.open .menu-trigger span:nth-of-type(2) {
    opacity: 0;
}

.gnavi_btn.open .menu-trigger span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
}

.gnavi_btn div {
    color: #000;
    font-size: 9px;
    font-weight: bold;
    line-height: 9px;
}
/* .gnavi */
.gnavi_bg {
    position: fixed;
    z-index: 900;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.gnavi.active + .gnavi_bg {
    pointer-events: initial;
    background-color: rgba(0,0,0,0.8);
}

.gnavi {
    position: fixed;
    right: -300px;
    top: 0;
    z-index: 999;
    width: 300px;
    /*height: calc(100vh - 60px);*/
    height: 100vh;
    padding-top: 60px;
    /*background-color: rgba(0,0,0,0.8);*/
    background-color: #fff;
    transition: all 0.3s ease;
}

    .gnavi.active {
        right: 0;
    }

    .gnavi ul {
        height: calc(90vh - 60px);
        padding: 20px 15px;
        overflow: auto;
        color: #fff;
        text-align: left;
    }

    .gnavi li {
        border-top: 1px solid #1f6bff;
        font-size: 15px;
        font-weight: bold;
    }

        .gnavi li:last-child {
            border-bottom: 1px solid #1f6bff;
        }

        .gnavi li.bt {
            color: #57B7C3;
            border-top: 1px solid #1f6bff;
        }

            .gnavi li.bt span {
                font-size: 14px;
            }

            .gnavi li > *,
            .gnavi li.bt div {
                padding: 10px;
            }

    .gnavi a {
        display: block;
        color: #000;
        text-decoration: none;
    }

        .gnavi a.emphasis-red {
            color: #ff2c2c;
            background-color: #ffeded;
            font-size: 20px;
        }

        .gnavi a.emphasis-blue {
            color: #3b5eff;
            background-color: #e6f3ff;
            font-size: 20px;
        }

        .gnavi a .inner {
            position: relative;
            width: 80%;
            margin: 0 auto;
            padding-left: 20px;
            line-height: 1.2;
            text-align: left;
        }

            .gnavi a .inner .no {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 15px;
                height: 15px;
                margin: auto;
                border-radius: 100px;
                background-color: #fff;
                color: #000;
                font-size: 11px;
                font-weight: bold;
                line-height: 1;
            }

        .gnavi a span {
            font-size: 14px;
        }

        .gnavi a div {
            font-size: 12px;
            font-weight: normal;
        }

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




/* ---------------------------------------------------------
 * footer
** --------------------------------------------------------- */
footer {
    padding: 80px 0 30px;
}

    footer .kepco {
        width: 300px;
        margin-bottom: 20px;
    }

@media (max-width: 767px) {
    footer {
    }
}




/* ---------------------------------------------------------
 * main（Save-Airの地点選択）
** --------------------------------------------------------- */
main {
    display: block;
    padding-top: 60px;
}

.noheader main {
}

@media (max-width: 767px) {
    main {
        padding-top: 70px;
    }

    .noheader main {
    }
}

.sp_nav {
    margin-bottom: 30px;
}

.sp_main_nav {
    width: 100% !important;
    padding-bottom: 10px;
    overflow: auto;
}

    .sp_main_nav ul {
        display: flex;
    }

    .sp_main_nav li {
        flex-shrink: 0;
    }

        .sp_main_nav li:not(:last-child) {
            margin-right: 10px;
        }

        .sp_main_nav li a {
            display: block;
            padding: 10px 15px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: bold;
            text-decoration: none;
        }

            .sp_main_nav li a:not(.active) {
                color: #333;
                background-color: #fff;
            }

            .sp_main_nav li a.active {
                color: #fff;
                background-image: -webkit-linear-gradient(to right, #339afa 0%, #339afa 35%, #1be4e6 100%);
                background-image: -o-linear-gradient(to right, #339afa 0%, #339afa 35%, #1be4e6 100%);
                background-image: linear-gradient(to right, #339afa 0%, #339afa 35%, #1be4e6 100%);
            }

.sp_nav .store_select img {
    margin-left: 2px;
}

/* ---------- title（タイトルの右端label&左端buttonなど） ---------- */

.title .left {
    display: flex;
    align-items: center;
}

.left {
    margin: 10px 0px;
}

.right {
    margin: 10px 0px;
}

/* ---------------------------------------------------------
 * Each pages
** --------------------------------------------------------- */
.page-area {
    /*margin-top: 25px;*/
}

    .page-area > div.row {
        margin-top: 25px;
        padding: 6px 0px;
    }

    .page-area > .row > .title {
        padding: 0;
    }

    .page-area .title .left {
        display: flex;
        align-items: center;
    }

    .page-area .title .date_time {
        font-size: 18px;
    }

    .page-area .row {
        display: flex;
        width: 100%;
        gap: 15px 15px;
        margin: 0;
    }

    .page-area .panel {
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        padding: 5px 15px;
        background-color: #f1f6ff;
        border-radius: 10px;
        display: flex;
        /*padding: 10px 10px;*/
        text-align: center;
    }

        .page-area .panel.panel-wide {
            width: 100%;
        }

        .page-area .panel.panel-group {
            display: inline-flex;
            padding: 20px 0;
        }

            .page-area .panel.panel-group > .panel-item:not(:last-child) {
                border-right: 1px solid #d3d6de;
            }

            .page-area .panel.panel-group .panel-item {
                padding: 0 50px;
            }

                .page-area .panel.panel-group .panel-item .panel-item-title {
                    font-size: 22px;
                    font-weight: bold;
                }

                .page-area .panel.panel-group .panel-item .panel-item-content {
                    color: chocolate;
                    font-size: 22px;
                    font-weight: bold;
                    text-align: center;
                    margin-top: 3px;
                }

    .page-area .panel-group {
        flex-grow: 1;
        display: flex;
        width: 100%;
        text-align: center;
        gap: 15px 15px;
        flex-wrap: wrap;
    }

        .page-area .panel-group .contents {
            display: contents;
        }

    .page-area .box {
        justify-content: center;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
        padding: 15px;
    }

        .page-area .box > * {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 15px 30px;
            background-color: #FFF1D9;
            border-radius: 10px;
            text-align: center;
        }

            .page-area .box > *:first-child {
                margin-right: 15px;
            }

    .page-area .demand_title {
        font-size: 22px;
        font-weight: bold;
    }

    .page-area .value {
        color: #1f6bff;
        font-size: 22px;
        font-weight: bold;
    }

    .page-area .value-title {
        color: #1f6bff;
        font-size: 22px;
        font-weight: bold;
    }

    .page-area .value span {
        font-size: 40px;
    }

    .page-area .timed {
        /*margin-right: 20px;*/
        /*border-right: 1px solid #d3d6de;*/
        /*padding-right: 30px;*/
    }

        .page-area .timed .value {
            font-size: 30px;
            line-height: 1;
        }

        .page-area .timed .remaining_time {
            color: #ed172c;
            font-size: 16px;
            font-weight: bold;
        }

            .page-area .timed .remaining_time img {
                width: 17px;
                margin-right: 5px;
            }

    .page-area .currents {
        display: flex;
        margin-right: 20px;
        border-right: 1px solid #d3d6de;
        padding-right: 20px;
    }

    .page-area .current_target_power {
        position: relative;
    }

    .page-area .current_power {
    }

    .page-area .search-area {
        display: flex;
        flex-wrap: wrap;
    }

        .page-area .search-area .w100 + div {
            margin-left: 0;
        }

        .page-area .search-area input {
            width: 140px;
            margin-left: 5px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .page-area .search-area select {
            width: 140px;
            margin-left: 5px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .page-area .search-area .autocomplete-wrap {
            padding-left: 0px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .page-area .search-area button {
            height: 36px;
            line-height: 36px;
        }

            .page-area .search-area button img {
                margin-bottom: 3px;
                margin-right: 5px;
            }

    .page-area .grid-area {
        margin-top: 20px;
        text-align: left;
    }

/* ---------- panel（電力量などの現在値を横並びで表示） ---------- */
.panel {
}

    .panel .panel-item {
    }

        .panel .panel-item .panel-title {
            font-size: 18px;
            font-weight: bold;
        }

        .panel .panel-item .panel-content {
            color: #1f6bff;
            font-size: 22px;
            font-weight: bold;
        }

            .panel .panel-item .panel-content > span {
                font-size: 30px;
            }

/* ---------- center-page-area（パスワード変更画面などの中央表示画面） ---------- */
.center-page-area {
    padding: 60px 0;
}

    .center-page-area .logo {
        text-align: center;
    }

        .center-page-area .logo img {
            width: inherit;
        }

        .center-page-area .logo.login-logo img {
            width: inherit;
        }

    .center-page-area .box {
        display: block;
        padding: 50px;
        margin-top: 30px;
    }

    .center-page-area .login_title {
        margin-bottom: 30px;
        color: #1f6bff;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
    }

        .center-page-area .login_title img {
            width: 15px;
            margin-right: 10px;
        }

    .center-page-area p {
        margin-top: 15px;
        color: #1f6bff;
        font-weight: bold;
    }

        .center-page-area p + div {
            margin-top: 7px;
        }

    .center-page-area input {
        width: 100%;
    }

    .center-page-area .btn_area {
        margin: 30px 0 10px;
    }

        .center-page-area .btn_area a {
            padding: 0 40px;
        }

    .center-page-area .lead {
        line-height: 1.8;
    }

    .center-page-area .input_email {
        width: 370px;
        margin: 20px auto;
    }

        .center-page-area .input_email div {
            color: #1f6bff;
            font-weight: bold;
        }

        .center-page-area .input_email input {
            width: 100%;
            margin-top: 10px;
        }

    .center-page-area .btn_area > * {
        /*width: 178px;*/
        min-width: 125px;
    }

    .center-page-area .btn_area > :first-child {
        margin-right: 10px;
    }

    .center-page-area .terms {
        max-height: 350px;
        padding: 20px 30px;
        border: 1px solid #d3d6de;
        border-radius: 5px;
        overflow: scroll;
    }

        .center-page-area .terms .dl {
            padding-bottom: 20px;
        }

        .center-page-area .terms dt {
            padding-top: 15px;
        }

        .center-page-area .terms dd {
            text-indent: -2em;
            padding-left: 2em;
        }

        .center-page-area .terms li {
            text-indent: -3em;
            padding-left: 3em;
        }

    .center-page-area .agree_terms {
        margin-top: 20px;
        text-align: center;
    }

        .center-page-area .agree_terms label {
        }

        .center-page-area .agree_terms input {
            display: none;
        }

    .center-page-area .btn_area {
        margin-top: 20px;
    }

        .center-page-area .btn_area a {
            padding: 0 40px;
        }

    .center-page-area .item_title {
        margin-bottom: 5px;
        font-weight: bold;
    }

<!-- ここから協和が記載した部分 -->
/* ---------- iframeの背景 ---------- */
.page-wrapper {
    background-color: #ffffff !important;
}

/* ---------- alert（sendAjaxでのエラーメッセージ） ---------- */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-danger {
    background-color: #fae1e4;
    border-color: #f7d5d9;
}

.form-errors {
    color: #ff0000;
}

/* ---------- 入力画面系 ---------- */
.readonly {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d3d6de;
    border-radius: 100px;
    background-color: #f1f4f8;
    line-height: 36px;
}


/* ---------- user_content_table（ログイン情報で使用） ---------- */
.user_content_table .list_tbl th,
.user_content_table .list_tbl td {
    padding: 5px 10px;
}

/* ---------- tab_container（タブ） ---------- */
/*電力量単価/CO2排出係数　タブ表示*/
.tab_container {
    padding-bottom: 1em;
    background-color: #fff;
    /*    border: 1px solid #37beb0;*/
}

.tab_item {
    width: 200px;
    padding: 15px 0;
    border-bottom: 3px solid #3F80FF;
    background-color: #ececec;
    text-align: center;
    color: #3F80FF;
    display: inline-block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item_interpolation {
    width: calc(100% - 400px);
    padding: 15px 0;
    border-bottom: 3px solid #3F80FF;
    text-align: center;
    display: inline-block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

input[name="tab_item"] {
    display: none;
}

.tab_content {
    display: none;
    padding: 20px;
    clear: both;
    overflow: hidden;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {
    display: block;
}

.tab_container input:checked + .tab_item {
    background-color: #3F80FF;
    color: #fff;
}

/* ---------- btn-common（ボタンサイズを規定） ---------- */
.btn.btn-common {
    min-width: 125px;
}

.btn.btn-common-slim {
    height: 30px;
    line-height: 30px;
}

/* ---------- shadow-frame ---------- */
.shadow-frame {
    background-color: #fff;
    box-shadow: 0 0 20px var( --header-color);
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

    .shadow-frame .lead_title {
        color: #1f6bff;
        font-size: 15px;
        font-weight: bold;
    }

    .shadow-frame .lead {
        margin-top: 5px;
        line-height: 1.8;
        font-size: 16px;
        font-weight: 500;
    }

    .shadow-frame .form-area {
        display: flex;
        gap: 15px;
        align-self: start;
        flex-wrap: wrap;
    }

        .shadow-frame .form-area .select-custom-area {
            font-size: 12.5px;
            font-weight: bold;
        }

    .shadow-frame .datalist {
        margin-top: 20px;
        text-align: left;
    }

/* ---------- 一覧画面の検索エリアのデザイン ---------- */
div.row form {
    width: 100%;
}

.search-area {
    background-color: var(--search-card-color);
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
    display: flex;
    flex-flow: wrap row;
    gap: 15px 15px;
}

    .search-area .act-area {
        display: flex;
        align-items: flex-end;
        gap: 5px 5px;
    }

.condition-area {
    display: grid;
    gap: 5px;
    flex: auto;
}

    .condition-area .condition-row,
    .condition-area .condition-search-row { /*condition-search-row は今後不要になる予定*/
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); /*FHDで4列表示可能*/
        align-items: center;
        gap: 10px;
    }

    .condition-area .condition-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .condition-area .condition-item .item-name {
            display: flex;
            align-items: center;
            width: 160px;
            min-width: 160px;
            gap: 5px;
            font-weight: bold;
        }

            .condition-area .condition-item .item-name i {
                margin: 3px 0 0 0;
            }

        /* inputの長さを固定する */
        /*.condition-area .condition-item .item-control {
            width: 300px;
            min-width: 300px;
        }*/

        .condition-area .condition-item .select-hour {
            width: 50px;
        }

        .condition-area .condition-item.span2 {
            grid-column: span 2;
        }

            .condition-area .condition-item.span2 .item-control {
                margin-right: 20px;
                width: 100%;
            }

        .condition-area .condition-item .item-control.form-switch .form-check-input {
            width: 72px;
            height: 36px;
            border-radius: 18px;
        }

    .condition-area .btn-sort-start {
        background-color: #28a745;
        border-color: #28a745;
        color: #ffffff;
    }

    .condition-area .btn-sort-save {
        background-color: #007bff;
        border-color: #007bff;
        color: #ffffff;
    }

    .condition-area .condition-act-row {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

.grid-area {
    display: flex;
    flex-flow: column;
    gap: 5px 5px;
}

    .grid-area .act-area {
        display: flex;
        flex-flow: wrap row;
        gap: 5px 5px;
    }

/* ---------- icon ---------- */
i.fa {
    margin-right: 5px;
}

svg.svg-inline--fa {
    margin-right: 5px;
}

.icon-btn svg.svg-inline--fa {
    margin-right: 0px;
}

i.fa-solid,
i.fa-brands {
    margin-right: 5px;
}

/* ---------- グラフ画面（要修正） ---------- */
.date-selecter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}

    .date-selecter img {
        width: 16px;
        margin-right: 5px;
    }

    .date-selecter input {
        margin-left: 5px;
    }

.datepicker-here {
    width: 110px;
}

.graph-area {
    width: 100%;
}

.data-area {
    width: 100%;
}

/* ---------- モーダルフッター ---------- */
.modal-bottom {
    background-color: #ecebf4;
    min-height: 40px;
    padding: 5px 10px;
}

.modal-bottom-area {
    display: flex;
    gap: 10px;
}

.modal-bottom-left {
    justify-content: flex-start;
    display: flex;
    gap: 10px;
    flex: 1 0 0%;
}

.modal-bottom-right {
    justify-content: flex-end;
    display: flex;
    gap: 10px;
    flex: 1 0 0%;
}

.modal-bottom > .row.button-center {
    justify-content: center;
    gap: 10px;
}

    .modal-bottom > .row.button-center > button {
        width: 200px;
    }

/* ---------- 編集画面 ---------- */
.required,
.form-required {
    font-weight: 400;
    line-height: normal;
    color: #fff;
    background-color: #EE8484;
    display: inline-block;
    padding: 0.1em 1em;
    font-size: 75%;
    border-radius: 0.25rem;
    text-align: center;
    margin-left: 5px;
    vertical-align: top;
}

/* ---------- 編集画面 ---------- */
.input-page-area {
    padding: 10px 10px 50px 10px;
}

    /* タイトル */
    .input-page-area .title-label {
        align-items: center;
        display: flex;
        flex-flow: row;
        font-size: 20px;
        font-weight: bold;
        width: max-content;
    }

        .input-page-area .title-label.blue {
            color: #1414a8;
        }

        .input-page-area .title-label .square {
            background-color: #1414a8;
            width: 25px;
            height: 40px;
            margin-right: 5px;
        }

    .input-page-area .explanation-label {
        font-size: 16px;
        font-weight: unset;
        padding: 0px 0 10px 0;
    }

    /* 入力フォーム */
    .input-page-area .form-group {
        display: flex;
        flex-flow: column;
        gap: 5px;
        padding: 20px;
        min-width: 800px;
        font-size: 16px;
    }

    .input-page-area .input-item {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .input-page-area .input-item .input-title {
            display: flex;
            flex-flow: row;
            align-items: center;
            background-color: #ededed;
            padding: 0 5px;
            margin: 0;
            min-height: 36px;
            width: 300px;
            min-width: 300px;
            max-width: 300px;
            font-weight: bold;
        }

            .input-page-area .input-item .input-title label + span {
                margin-left: auto;
            }

            .input-page-area .input-item .input-title span {
                border-radius: 15px;
                padding: 0 5px;
                margin-left: 3px;
                font-size: 13px;
            }

            .input-page-area .input-item .input-title label + span {
                margin-left: auto;
            }

            .input-page-area .input-item .input-title .required {
                color: white;
                background-color: red;
                /*幅固定*/
                width: 37px;
                min-width: 37px;
                max-width: 37px;
            }

        .input-page-area .input-item .input-area {
            display: flex;
            flex-flow: column;
            min-height: 36px;
            width: 500px;
            min-width: 500px;
            max-width: 500px;
        }

            .input-page-area .input-item .input-area select {
                width: 100%;
            }

            .input-page-area .input-item .input-area .selectMultiple {
                width: 100%;
            }

            .input-page-area .input-item .input-area .form-control {
                width: 100%;
                height: 36px;
            }

            .input-page-area .input-item .input-area label.form-control {
                display: flex;
                align-items: center;
                margin-left: unset;
                padding: 0 10px;
            }

            .input-page-area .input-item .input-area textarea.form-control {
                height: unset;
            }

            .input-page-area .input-item .input-area .input-row-group {
                display: flex;
                gap: 5px;
            }

                .input-page-area .input-item .input-area .input-row-group select {
                    width: 100%;
                }

                .input-page-area .input-item .input-area .input-row-group button {
                    width: 150px;
                }

            .input-page-area .input-item .input-area label {
                margin-left: 10px;
            }

            .input-page-area .input-item .input-area .display-only-item {
                line-height: 36px;
            }

            /*.input-page-area .input-item .input-area:has(.separate-selecter) {
            width: 400px;
        }*/

            .input-page-area .input-item .input-area .separate-selecter {
                user-select: none;
                width: fit-content;
            }

        .input-page-area .input-item .input-remarks {
            display: flex;
            flex-flow: row;
            align-items: center;
            min-width: 100px;
            min-height: 36px;
        }

            .input-page-area .input-item .input-remarks .input-category-area {
                display: flex;
                gap: 5px;
                height: 100%;
            }

                .input-page-area .input-item .input-remarks .input-category-area .input-category {
                    padding: 5px;
                    margin-right: 5px;
                    width: 75px;
                    align-content: center;
                    text-align: center;
                }

                    .input-page-area .input-item .input-remarks .input-category-area .input-category.common {
                        color: white;
                        background-color: lightgray;
                    }

.form-errors {
    color: #ff0000;
}

/* ---------- テキスト付きトグルボタン（toggleSetting関数で生成） ---------- */
.toggle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #9fb4cf;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    border-radius: 50px;
}

.toggle:after {
    content: "いいえ";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 50px;
    height: 28px;
    display: block;
    border-radius: 50px;
    background: #fff;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    text-align: center;
    padding: 8px 0 0;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
    color: #9fb4cf;
    letter-spacing: .5px;
    box-sizing: border-box;
}

.toggle.checked:before {
    background: #106ae0;
}

.toggle.checked:after {
    content: "はい";
    left: 37px;
    color: #106ae0;
    padding: 8px 0 0 1px;
}

/* ---------- iziModal ---------- */
.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-title {
    font-size: 20px;
    font-weight: 500;
}

/* ---------- fancytree ---------- */
.radiobutton {
    display: none;
}

    .radiobutton:checked + label {
        background-color: #026EAA;
    }

/* ---------- Save-Airのヘッダーリンク ---------- */
.link {
    position: relative;
}

    .link::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #1f6bff;
        bottom: -4px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .link:hover::after {
        visibility: visible;
        bottom: -8px;
        opacity: 1;
    }

/* ---------- FontAwesomeを利用するオートコンプリート・selectタグで利用 ---------- */
.select-item {
    width: 330px;
}

    .select-item:required {
        color: red;
    }

    .select-item.full-name {
        width: 600px;
    }

.search-select-item {
    width: 200px;
}

/* ---------- jQGrid pager ---------- */
.cus-grid-page {
}

    .cus-grid-page a {
        text-decoration: none;
        color: #1f6bff;
        font-weight: bold;
        border: 1px solid #1f6bff;
        padding: 5px 10px;
    }

    .cus-grid-page label {
        color: #fff;
        background: #1f6bff;
        font-weight: bold;
        /*border: 1px solid #1f6bff;*/
        padding: 5px 10px;
    }

/* jQuery UI Autocomplete */
.autocomplete-wrap {
    display: inline-block;
}

    .autocomplete-wrap .ui-autocomplete-input {
        padding-right: 30px
    }

    .autocomplete-wrap .autocomplete-arrow-btn {
        width: 30px;
        margin-left: -30px;
        font-size: 15px;
        background-color: #ffffff;
        background-image: url(../../images/common/ico_arr_d.png);
        background-size: 9px 6px;
        background-position: center;
        background-repeat: no-repeat;
    }

        .autocomplete-wrap .autocomplete-arrow-btn:hover {
            background-size: 11px 8px;
        }

        .autocomplete-wrap .autocomplete-arrow-btn:focus {
            background-position-y: 60%;
        }

    .autocomplete-wrap .ui-menu {
        width: auto;
        max-height: 500px;
        overflow-y: auto;
    }

    .autocomplete-wrap .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        cursor: default;
    }

    .autocomplete-wrap .ui-widget-content {
        border: 1px solid #d6d6d6;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #aaaaaa;
        background: #ffffff;
        color: #000000;
    }

    .autocomplete-wrap .ui-widget {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif, 'FontAwesome';
    }

    .autocomplete-wrap .ui-front {
        z-index: 200;
    }

    .autocomplete-wrap .ui-menu-item {
        padding: 5px 10px;
    }

        .autocomplete-wrap .ui-menu-item:hover,
        .autocomplete-wrap .ui-menu-item:has(.ui-state-active) {
            color: #ffff;
            background-color: #1967d2;
        }

.ui-helper-hidden-accessible {
    display: none;
}

/* ---------- アイコン付きセレクトのスタイル ---------- */
.icon-select-wrapper {
    position: relative;
    display: inline-block;
    padding: 0;
    font-size: 16px;
    width: -webkit-fill-available;
}

.icon-select {
    display: none;
}

.icon-select-selected {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 35px 0 10px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    background: #fff;
    background-image: url(../../images/common/ico_arr_d.png);
    background-size: 9px 6px;
    background-position: right 10px center;
    background-repeat: no-repeat;
}

.border + .icon-select-selected {
    border: 1px solid var(--header-color)
}

.icon-select-items div, .icon-select-selected {
    cursor: pointer;
    color: #000;
    padding: 0 35px 0 10px;
    height: 36px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
}

.input-layout .icon-select-selected {
    height: 43px;
}

.error-border + .icon-select-selected {
    border: 1px solid #EE8484 !important;
}

.icon-select-items {
    position: absolute;
    background: #FFF;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    max-height: calc(36px * 5.5);
    overflow-y: auto;
    box-shadow: 0px 0px 3px 1px #bbbbbb;
    border-radius: 10px;
}

.icon-select-item:hover, .icon-select-item.active {
    color: #FFF;
    background: #1f6bff;
}

.icon-select-items:hover .icon-select-item.active:not(:hover) {
    color: unset;
    background: #FFF;
}

.icon-select-wrapper i {
    font: var(--fa-font-solid);
    margin-right: 5px;
}

.icon-select-hide {
    display: none;
}

/* 機能メニューモーダル */
.function-menu-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
}

    .function-menu-modal-container:before {
        content: "";
        display: block;
        vertical-align: middle;
        height: 30%;
    }

    .function-menu-modal-container.active {
        opacity: 1;
        visibility: visible;
    }

.function-menu-modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
    width: 100%;
}

.function-menu-modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 15px;
    background-color: #ff3a3a;
}

.function-menu-modal-content {
    background: #fff;
    text-align: left;
    padding: 5px;
}

    .function-menu-modal-content .title {
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
        display: block;
    }

    .function-menu-modal-content .btn-area {
        display: flex;
        flex-flow: column;
        gap: 5px;
    }