@charset "UTF-8";

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

body {
    min-height: 100vh;
    background-image: url(../../images/common/ECS_background_blue.jpg), -webkit-linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
    background-image: url(../../images/common/ECS_background_blue.jpg), -o-linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
    background-image: url(../../images/common/ECS_background_blue.jpg), linear-gradient(to bottom, var(--background-color) 0px, #fff 10px);
    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_top.png), -webkit-linear-gradient(to bottom, #e9f0fd 0px, #fff 150px);
        background-image: url(../images/common/bg_top.png), -o-linear-gradient(to bottom, #e9f0fd 0px, #fff 150px);
        background-image: url(../images/common/bg_top.png), linear-gradient(to bottom, #e9f0fd 0px, #fff 150px);*/
        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);
    }

/*@media (max-width: 767px) {
    body {*/
/*     background-image: url(../images/common/bg_sp.png), -webkit-linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);
        background-image: url(../images/common/bg_sp.png), -o-linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);
        background-image: url(../images/common/bg_sp.png), linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);*/
/*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);
    }

        body.noheader {*/
/*    background-image: url(../images/common/bg_top_sp.png), -webkit-linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);
            background-image: url(../images/common/bg_top_sp.png), -o-linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);
            background-image: url(../images/common/bg_top_sp.png), linear-gradient(to bottom, #e9f0fd 0px, #e9f0fd 50px, #fff 150px);*/
/*background-image: url(../../images/common/bg-ev.jpg), -webkit-linear-gradient(to bottom, var(--background-color) 0px, var(--background-color) 50px, #fff 150px);
            background-image: url(../../images/common/bg-ev.jpg), -o-linear-gradient(to bottom, var(--background-color) 0px, var(--background-color) 50px, #fff 150px);
            background-image: url(../../images/common/bg-ev.jpg), linear-gradient(to bottom, var(--background-color) 0px, var(--background-color) 50px, #fff 150px);
            background-position: left 0 top -5px, 0;
        }
}*/

a {
    color: #333;
}

img {
    max-width: 100%;
}

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;
}

textarea {
    height: 150px;
    border-radius: 6px;
    line-height: 1.5;
}

    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[type="file"].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,
        input[type="file"].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,
    input[type="file"].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,
    input[type="file"].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,
    input[type="file"].warning-border,
    select.warning-border,
    div.warning-border,
    textarea.warning-border {
        border: 1px solid #fd7e00 !important;
        background-color: #fff;
    }

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

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

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

input[type="checkbox"] {
    /*display: none;*/
}

    input[type="checkbox"] ~ span.check-img {
        line-height: 24px;
    }

        input[type="checkbox"] ~ span.check-img::before {
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 15px;
            margin-bottom: 3px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
            vertical-align: middle;
        }

    input[type="checkbox"]:checked ~ span.check-img::before {
        background-image: url(../../images/common/ico_check_s.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
    }

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;
}

select.gray {
    border: none;
    background-color: #f1f4f8;
}

@media (max-width: 767px) {
    input[type="checkbox"] + span::before {
        width: 24px;
        height: 24px;
    }
}

.wrapper {
    width: 94%;
    margin: 0 auto;
}

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

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

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

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

/* ---------- .title ---------- */
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    color: #000;
    font-size: 25px;
    font-weight: bold;
}

    .title .ico {
        height: 25px;
        margin-right: 10px;
    }

/* ---------- .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-color: #aaa;
        color: #fff;
    }

    .btn.btn-disabled {
        background-color: #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-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-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-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-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-white {
        height: 32px;
        background-color: #fff;
        border: 1px solid #1f6bff;
        color: #1f6bff;
        line-height: 32px;
        padding: 0 25px;
    }

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

@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 {
        }
}

/* ---------- .jsgrid ---------- */
.jsgrid {
}

.jsgrid-edit-row > .jsgrid-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-grid-body,
.jsgrid-grid-header,
.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-insert-row > .jsgrid-cell {
    border: none;
}

.jsgrid-header-row > .jsgrid-header-cell {
    background-color: #E1E1E1;
    border-bottom: 1px solid #d3d6de;
    font-weight: bold;
}

.jsgrid-header-row .jsgrid-align-left { /* 謎 */
    text-align: center;
}

.jsgrid-header-row .jsgrid-align-right { /* 謎 */
    text-align: center;
}

.jsgrid-header-sort-asc::before {
    margin-top: 7px;
    margin-right: 5px;
    border-color: transparent transparent #1f6bff;
}

.jsgrid-header-sort-desc::before {
    margin-top: 7px;
    margin-right: 5px;
    border-color: #1f6bff transparent transparent;
}

.jsgrid-cell {
    border: none;
    border-bottom: 1px solid #d3d6de;
}

.jsgrid-filter-row > .jsgrid-cell:first-child,
.jsgrid-header-row > .jsgrid-header-cell:first-child,
.jsgrid-insert-row > .jsgrid-cell:first-child,
.jsgrid-grid-body .jsgrid-cell:first-child {
    padding-left: 20px;
}
/* .jsgrid-pager */
.jsgrid-pager-container {
    margin-top: 20px;
    text-align: center;
}

.jsgrid-pager {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
}

    .jsgrid-pager > *:not(:first-child) {
    }

.jsgrid-pager-nav-button,
.jsgrid-pager-page {
    padding: 0;
}

.jsgrid-pager-current-page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    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%);
    color: #fff;
}

.jsgrid-pager a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #1f6bff;
    font-weight: bold;
}

.jsgrid-pager-nav-button a {
    width: 40px;
    height: 36px;
}

.jsgrid-pager-page a {
    width: 36px;
    height: 36px;
}

.jsgrid-cell .btn {
    height: 30px;
    padding: 0px 10px;
    line-height: unset;
}

.row-deleted td {
    background-color: #bdbebd !important;
}

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

/* ---------- .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: 36px;
    cursor: pointer;
}

    .separate-selecter.is-only-display {
        border: 1px solid #7d7d7d;
    }

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

    .separate-selecter.is-only-display div {
        color: #7d7d7d;
    }

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

    .separate-selecter.is-only-display div:not(:first-child) {
        border-left: 1px solid #7d7d7d;
    }

    .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.is-only-display .active {
        background-image: -webkit-linear-gradient(to right, #7b7b7b 0%, #a2a2a2 100%);
        background-image: -o-linear-gradient(to right, #7b7b7b 0%, #a2a2a2 100%);
        background-image: linear-gradient(to right, #7b7b7b 0%, #a2a2a2 100%);
        color: #fff;
    }

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

/* ---------- .popup ---------- */
.popup {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
}

    .popup .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        height: 50%;
        margin: auto;
        padding: 30px;
        border-radius: 5px;
        background-color: #fff;
    }

    .popup .close_btn {
        position: absolute;
        right: 10px;
        top: 10px;
        display: block;
        width: 16px;
        height: 16px;
        background-image: url(../../images/common/ico_close.png);
        background-size: cover;
    }

    .popup .inner {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

@media (max-width: 767px) {
    .popup .content {
        width: 90%;
        height: 60%;
    }
}

/* ---------- .underline ---------- */
.underline {
    background-repeat: no-repeat;
    background-position: 0 88%;
}

    .underline.color1 {
        background-size: 100% 0.37em;
        background-image: -webkit-linear-gradient(to right, #c8f2d8 0%, #c8f2d8 100%);
        background-image: -o-linear-gradient(to right, #c8f2d8 0%, #c8f2d8 100%);
        background-image: linear-gradient(to right, #c8f2d8 0%, #c8f2d8 100%);
    }

    .underline.color2 {
        background-size: 100% 0.6em;
        background-image: -webkit-linear-gradient(to right, #dbf5ee 0%, #dbf5ee 100%);
        background-image: -o-linear-gradient(to right, #dbf5ee 0%, #dbf5ee 100%);
        background-image: linear-gradient(to right, #dbf5ee 0%, #dbf5ee 100%);
    }

    .underline.color3 {
        background-size: 100% 0.37em;
        background-image: -webkit-linear-gradient(to right, #d8ebee 0%, #d8ebee 100%);
        background-image: -o-linear-gradient(to right, #d8ebee 0%, #d8ebee 100%);
        background-image: linear-gradient(to right, #d8ebee 0%, #d8ebee 100%);
    }

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




/* ---------------------------------------------------------
 * 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 .main_nav .submenu-nav .link::after {
            z-index: 1;
        }

        header .main_nav .submenu-nav > ul {
            display: none; /*非表示にする */
            margin: 0px; /*サブメニュー外側の余白(ゼロ) */
            padding: 10px 0 0 0; /* サブメニュー内側の余白(ゼロ) */
            position: absolute; /* 絶対配置にする */
            background-color: #fff;
        }

        header .main_nav .submenu-nav:hover ul {
            display: block; /*★5:マウスポインタが載っている項目の内部にあるリストを表示する*/
        }

        header .main_nav .submenu-nav > ul > li {
            appearance: none;
            padding: 5px 10px !important;
        }

.store_select {
    margin-left: auto;
    margin-right: 10px;
}

    .store_select img {
        width: 16px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

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 .kenes {
        width: 320px;
        margin-bottom: 10px;
    }

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

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




/* ---------------------------------------------------------
 * main
** --------------------------------------------------------- */
main {
    display: block;
    padding-top: 60px;
}

.noheader main {
}

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

    .noheader main {
    }
}

/* ---------- .setting_btns ---------- */
.setting_btns {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .setting_btns label {
    }

        .setting_btns label:not(:last-child) {
            margin-right: 5px;
        }

    .setting_btns input {
        /*-webkit-appearance: none;*/
        /*appearance: none;*/
        /*width: 55px;*/
        /*height: 55px;*/
        /*border: none;*/
        /*border-radius: 0;*/
        /*background-size: cover;*/
        display: none;
    }

        .setting_btns input + div {
            width: 55px;
            height: 55px;
            background-size: cover;
        }

    .setting_btns.air label:nth-child(1) input + div {
        background-image: url(../images/ks-usr-0013/btn_recommend_off.png);
    }

    .setting_btns.air label:nth-child(1) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_recommend_on.png);
    }

    .setting_btns.air label:nth-child(1) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_recommend_set.png);
    }

    .setting_btns.air label:nth-child(2) input + div {
        background-image: url(../images/ks-usr-0013/btn_mid_off.png);
    }

    .setting_btns.air label:nth-child(2) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_mid_on.png);
    }

    .setting_btns.air label:nth-child(2) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_mid_set.png);
    }

    .setting_btns.air label:nth-child(3) input + div {
        background-image: url(../images/ks-usr-0013/btn_low_off.png);
    }

    .setting_btns.air label:nth-child(3) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_low_on.png);
    }

    .setting_btns.air label:nth-child(3) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_low_set.png);
    }

    .setting_btns.air label:nth-child(4) input + div {
        background-image: url(../images/ks-usr-0013/btn_none_off.png);
    }

    .setting_btns.air label:nth-child(4) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_none_on.png);
    }

    .setting_btns.air label:nth-child(4) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_none_set.png);
    }

    .setting_btns.demand label:nth-child(1) input + div {
        background-image: url(../images/ks-usr-0013/btn_big_off.png);
    }

    .setting_btns.demand label:nth-child(1) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_big_on.png);
    }

    .setting_btns.demand label:nth-child(1) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_big_status.png);
    }

    .setting_btns.demand label:nth-child(2) input + div {
        background-image: url(../images/ks-usr-0013/btn_medium_off.png);
    }

    .setting_btns.demand label:nth-child(2) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_medium_on.png);
    }

    .setting_btns.demand label:nth-child(2) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_medium_status.png);
    }

    .setting_btns.demand label:nth-child(3) input + div {
        background-image: url(../images/ks-usr-0013/btn_small_off.png);
    }

    .setting_btns.demand label:nth-child(3) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_small_on.png);
    }

    .setting_btns.demand label:nth-child(3) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_small_status.png);
    }

    .setting_btns.demand label:nth-child(4) input + div {
        background-image: url(../images/ks-usr-0013/btn_demand_none_off.png);
    }

    .setting_btns.demand label:nth-child(4) input:checked + div {
        background-image: url(../images/ks-usr-0013/btn_demand_none_on.png);
    }

    .setting_btns.demand label:nth-child(4) input.set + div {
        background-image: url(../images/ks-usr-0013/btn_demand_none_status.png);
    }




@media (max-width: 767px) {
    .setting_btns {
        flex-wrap: wrap;
    }
}

/* ---------- sections ---------- */
/* news */
.section-news {
}

    .section-news .box {
        display: block;
    }

@media (max-width: 767px) {
    .section-news .box {
        padding: 15px;
    }
}
/* change_history */
.section-change_history {
}

    .section-change_history .contents {
        position: relative;
    }

        .section-change_history .contents > div:first-child {
            position: absolute;
            right: 0;
            bottom: 100%;
        }

@media (max-width: 767px) {
    .section-change_history {
        text-align: center;
    }

        .section-change_history.open .contents {
            display: block !important;
        }

        .section-change_history .contents > div:first-child {
            position: static;
        }
}
/* all_area_setting */
.section-all_area_setting {
}

    .section-all_area_setting.open .contents {
        width: 80%;
    }

    .section-all_area_setting .contents > div:nth-child(1) {
        width: 100%;
    }

    .section-all_area_setting .contents > div:nth-child(2) {
        width: 100%;
        padding-left: 30px;
        margin-left: 30px;
        border-left: 1px solid #d3d6de;
    }

    .section-all_area_setting .contents > div:nth-child(3) {
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100px;
    }

@media (max-width: 767px) {
    .section-all_area_setting {
        text-align: center;
    }

        .section-all_area_setting.open .contents {
            display: block !important;
            width: 100%;
        }

        .section-all_area_setting .contents > div:nth-child(2) {
            padding-top: 5px;
            padding-left: 0;
            padding-bottom: 20px;
            margin-top: 20px;
            margin-left: 0;
            border-left: none;
            border-top: 1px solid #d3d6de;
        }

        .section-all_area_setting .contents > div:nth-child(3) {
            display: block;
            width: 100%;
        }
}
/* each_area_setting */
.section-each_area_setting {
}

    .section-each_area_setting .area_settings {
        width: 100%;
        text-align: center;
    }

        .section-each_area_setting .area_settings th,
        .section-each_area_setting .area_settings td {
            padding-right: 20px;
            padding-left: 20px;
            border-bottom: 1px solid #d3d6de;
        }

        .section-each_area_setting .area_settings th {
            padding-bottom: 10px;
            font-weight: bold;
        }

        .section-each_area_setting .area_settings td {
            position: relative;
            height: 75px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .section-each_area_setting .area_settings td:not(:first-child)::before {
                content: "";
                position: absolute;
                left: 0;
                top: 10px;
                display: inline-block;
                width: 1px;
                height: 55px;
                background-color: #d3d6de;
            }

@media (max-width: 767px) {
    .section-each_area_setting {
        text-align: center;
    }

        .section-each_area_setting .area_settings {
            margin-top: 10px;
        }

            .section-each_area_setting .area_settings th,
            .section-each_area_setting .area_settings td {
                padding-right: 5px;
                padding-left: 5px;
            }

                .section-each_area_setting .area_settings td:not(:first-child)::before {
                    height: 170px;
                }

            .section-each_area_setting .area_settings label:nth-child(2) {
                margin-right: 0;
            }

            .section-each_area_setting .area_settings label:nth-child(3),
            .section-each_area_setting .area_settings label:nth-child(4) {
                margin-top: 5px;
            }

            .section-each_area_setting .area_settings label div {
                width: 40px;
                height: 40px;
                background-size: cover;
            }
}

.eco-demand-not-control {
    display: inline-flex;
    padding: 10px 5px;
    border-radius: 5px;
    font-weight: bold;
    background-color: #9d9d9d;
    color: #fff;
}

.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;
        }

.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;
            }

.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 .rate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px 25px;
}

    .page-area .rate img {
        width: 60px;
    }

    .page-area .rate > span {
        font-size: 36px;
    }

    .page-area .rate .demand_title {
        position: relative;
    }

    .page-area .rate.blue .demand_title,
    .page-area .rate.blue .value {
        color: #1d74ff;
    }

        .page-area .rate.blue .demand_title::before,
        .page-area .rate.blue .demand_title::after {
            background-color: #1d74ff;
        }

    .page-area .rate.orange .demand_title,
    .page-area .rate.orange .value {
        color: #ff7300;
    }

        .page-area .rate.orange .demand_title::before,
        .page-area .rate.orange .demand_title::after {
            background-color: #ff7300;
        }

    .page-area .rate.red .demand_title,
    .page-area .rate.red .value {
        color: #ed172c;
    }

        .page-area .rate.red .demand_title::before,
        .page-area .rate.red .demand_title::after {
            background-color: #ed172c;
        }

.page-area .progress-bar {
    min-width: 60%;
}

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

    .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;
}

.center-page-area {
    padding: 60px 0;
}

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

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

        .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;
    }

@media (max-width: 1180px) and (min-width: 1081px) {
    .page-area .box > * {
        padding: 15px 26px;
    }

    .page-area .demand_title {
        font-size: 20px;
    }

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

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

    .page-area .timed .value {
        font-size: 28px;
    }
}

@media (max-width: 1080px) and (min-width: 768px) {
    /*横2列にする*/
    /*.page-area .row {
        flex-flow: column;
    }*/
    .page-area .box > * {
        padding: 15px 20px;
    }

        .page-area .box > *:first-child {
            margin-right: 10px;
            /*padding-right: 20px;*/
            /*padding-left: 20px;*/
        }

        .page-area .box > *:last-child {
            /*padding-left: 20px;*/
        }

    .page-area .demand_title {
        font-size: 17px;
    }

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

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

    .page-area .target_power {
        /*margin-right: 20px;*/
        /*padding-right: 15px;*/
    }

    .page-area .timed .value {
        font-size: 20px;
    }

    .page-area .currents {
        margin-right: 15px;
        padding-right: 15px;
    }

    .page-area .current_target_power {
        min-width: 140px;
    }

    .page-area .progress-bar {
        min-width: 80%;
    }

    .page-area .progress-content {
        height: 50px;
    }
}

@media (max-width: 767px) {
    .page-area .title {
        display: block;
        height: auto;
    }

        .page-area .title .right {
            text-align: center;
        }

    .page-area .row {
        flex-flow: column;
    }

    .page-area .box > * {
        display: block;
    }

    .page-area .box > :first-child {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .page-area .demand_title {
        font-size: 20px;
    }

    .page-area .timed {
        /*margin-right: 0;*/
        /*margin-bottom: 10px;*/
        /*padding-right: 0;*/
        /*border-right: none;*/
        /*border-bottom: 1px solid #d3d6de;*/
    }

    .page-area .current_target_power {
        min-width: 150px;
    }

    .page-area .currents {
        margin-right: 0;
        border-right: none;
        padding-right: 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #d3d6de;
        padding-bottom: 15px;
        justify-content: center;
    }

    .page-area .progress-bar {
        min-width: 100%;
    }

    .page-area .progress-content {
        height: 50px;
    }
}

<!-- ここから協和が記載した部分 -->
.form-errors {
    color: #ff0000;
}

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

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.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;
}

.readonly_textarea {
    background-color: #f1f4f8;
}

.current_setting_kw {
    font-size: 22px;
    color: #1f6bff;
    font-weight: bold;
    margin-top: 30px;
}

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

.pop_title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.setting_btns.is_control label:nth-child(1) input + div {
    background-image: url(../images/ks-usr-0013/btn_control_off.png);
}

.setting_btns.is_control label:nth-child(1) input.control_on + div {
    background-image: url(../images/ks-usr-0013/btn_control_on.png);
}

.setting_btns.is_control label:nth-child(1) input.control_off + div {
    background-image: url(../images/ks-usr-0013/btn_control_off.png);
}


@media (max-width: 770px) {
    .iphone_inquiry_done_table {
        overflow-x: scroll;
    }
}

@media(min-width: 768px) {
    .ipad_notice_detail_table th {
        width: 200px;
    }

    .ipad_inquiry_done_table th {
        width: 200px;
    }
}

.password_reset_request_btn_area {
}

    .password_reset_request_btn_area > * {
        width: 178px;
    }

@media (max-width: 767px) {
    .password_reset_request_btn_area > * {
        padding: 0;
    }

    .password_reset_request_btn_area > :first-child {
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    .user_return_btn {
        margin-top: 30px;
    }
}

.user_register_btn_area {
    margin-top: 20px;
    text-align: center;
}

    .user_register_btn_area button {
        width: 134px;
    }

@media (max-width: 767px) {
    .log_btn_area {
        text-align: center;
    }

    .log_btn {
        margin: 5px;
    }
}

@media (max-width: 767px) {
    .user_btn_area {
        text-align: center;
    }

    .user_btn {
        margin: 5px;
    }
}

.user_input_at_width {
    width: 150px;
}

.user_input_r_width {
    width: 200px;
}

.managementtop_input_storestatus_width {
    width: 150px;
}

@media (max-width: 767px) {
    .section-each_area_setting .area_settings label:nth-child(1),
    .section-each_area_setting .area_settings label:nth-child(2),
    .section-each_area_setting .area_settings label:nth-child(3),
    .section-each_area_setting .area_settings label:nth-child(4) {
        margin-top: 5px;
        margin-right: initial;
    }

    .ecodemand_width {
        width: 70px;
    }
}

@media (max-width: 768px) {
    .headquarter_detail_table {
        overflow-x: scroll;
    }

    .store_detail_table {
        overflow-x: scroll;
    }

    .headquarter_detail_table .detail_area_count {
        width: 120px;
    }

    .headquarter_detail_table .detail_store_id {
        width: 120px;
    }

    .headquarter_detail_table .detail_store_name {
        width: auto;
    }

    .headquarter_detail_table .detail_start_date {
        width: 120px;
    }

    .headquarter_detail_table .detail_mailaddress {
        width: 150px;
    }

    .headquarter_detail_table .detail_user_count {
        width: 190px;
    }

    .store_detail_table .detail_store_id {
        width: 120px;
    }

    .store_detail_table .detail_user_name {
        width: 312px;
    }

    .store_detail_table .detail_area_id {
        width: 120px;
    }

    .store_detail_table .detail_area_name {
        width: 250px;
    }

    .store_detail_table .detail_area_start_date {
        width: 120px;
    }
}

@media(max-width:900px) {
    .section-each_area_setting .area_settings label div {
        width: 40px;
        height: 40px;
        background-size: cover;
    }
}

@media (orientation:portrait) {
    .total_detail {
        overflow-x: scroll
    }
}

.popup .expansion_tab_btn {
    position: absolute;
    right: 75px;
    top: 10px;
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../images/common/expansion_tab.png);
    background-size: cover;
}

.popup .expansion_tab_text {
    position: absolute;
    right: 40px;
    top: 10px;
}

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

@media (min-width: 1100px) {
    .eco_results {
        width: 70%;
    }
}

.eco_results {
    margin-top: 15px;
}


    .eco_results input[type="checkbox"] {
        display: block;
        display: initial;
    }


.graph_type_area input[type="checkbox"] {
    display: initial;
}

.graph_types {
    padding-right: 10px;
    font-weight: 800;
}

.excel-popup-btn {
    line-height: 30px;
    margin-left: 20px;
}

@media (max-width: 768px) {
    .excel-popup-btn {
        margin-left: initial;
        font-size: 10px;
    }
}

.excel-popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 30px;
    border-radius: 5px;
    background-color: #fff;
    width: 50%;
    height: 60%;
}
/*Excel出力ポップアップ*/
@media (max-width: 768px) {
    .excel-popup {
        overflow-y: scroll;
    }
}

@media (max-height:580px) {
    .excel-popup {
        overflow-y: scroll;
    }
}

/*電力量単価/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;
    font-size: 18px;
}

.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;
}

@media (max-width: 768px) {
    .tab_item {
        width: calc(100%/2);
    }

    .tab_item_interpolation {
        display: none;
    }
}

.btn.btn-common {
    min-width: 125px;
}

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

.switch-btn-common {
    height: 20px;
    width: 40px;
}

.switch-btn-common-input-fix {
    height: 20px !important;
    width: 40px !important;
}

.switch-btn-common-fix {
    height: 36px !important;
    width: 80px !important;
}

/*.btn.btn-blue {*/
/*    background-image: -webkit-linear-gradient(to right, #EB6400 0%, #F7B31E 100%);
    background-image: -o-linear-gradient(to right, #EB6400 0%, #F7B31E 100%);
    background-image: linear-gradient(to right, #EB6400 0%, #F7B31E 100%);*/
/*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%);
}*/

@keyframes blinkBorderRed {
    0% {
        border: dashed 2px white;
    }

    100% {
        border: dashed 2px red;
    }
}

@keyframes blinkBorderYellow {
    0% {
        border: dashed 2px white;
    }

    100% {
        border: dashed 2px orange;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.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;
    }

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

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

    .shadow-frame .used_available {
        margin-top: 10px;
        background-color: #f1f6ff;
        border-radius: 10px;
        padding: 15px 20px 20px;
    }

        .shadow-frame .used_available div {
            font-size: 22px;
            font-weight: bold;
        }

        .shadow-frame .used_available .colon {
            color: #b3b6bc;
        }

        .shadow-frame .used_available .account_count {
            color: #1f6bff;
            font-size: 40px;
        }

        .shadow-frame .used_available .note {
            font-size: 16px;
        }

        .shadow-frame .used_available p {
            margin-top: 10px;
        }

    .shadow-frame .search_area {
        display: flex;
        flex-wrap: wrap;
        margin-top: 25px;
    }

        .shadow-frame .search_area div {
            margin-bottom: 10px;
            line-height: 36px;
        }

            .shadow-frame .search_area div:not(:first-child) {
                margin-left: 14px;
            }

        .shadow-frame .search_area .w100 + div {
            margin-left: 0;
        }

        .shadow-frame .search_area img {
        }

        .shadow-frame .search_area input {
            width: 140px;
            margin-left: 5px;
            padding-top: 0;
            padding-bottom: 0;
        }

            .shadow-frame .search_area input.l {
                width: 200px;
            }

        .shadow-frame .search_area button,
        .shadow-frame .search_area a {
            height: 36px;
            line-height: 36px;
            padding: 0 40px;
            vertical-align: middle;
        }

            .shadow-frame .search_area button img {
                margin-bottom: 3px;
                margin-right: 5px;
            }

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

.group-area {
    padding: 10px 0;
}

.group-title {
    border-bottom: 1px solid #EB6400;
    color: chocolate;
    font-size: 22px;
    font-weight: bold;
}

/** 一覧画面の検索エリアのデザイン */
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 .condition-area {
        display: grid;
        gap: 5px 5px;
        flex: auto;
    }

.condition-row {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(350px,400px));
    flex-flow: row wrap;
    align-items: center;
    gap: 5px 5px;
}

.condition-search-row {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(350px,400px));
    gap: 5px 5px;
}

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

    .condition-item .form-check.form-switch {
        padding-left: unset;
    }

    .condition-item .item-name {
        width: 160px;
        min-width: 160px;
        font-weight: bold;
    }

    .condition-item .item-control {
        width: 200px;
        min-width: 200px;
    }

    .condition-item label.item-control {
        min-height: 38px;
    }

    .condition-item .selectMultiple {
        border-radius: 5px;
    }

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

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

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

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

.search-area .checkbox-area {
    display: flex;
    height: 100%;
    gap: 5px;
}

    .search-area .checkbox-area input {
        width: unset !important;
    }

    .search-area .checkbox-area label {
        margin: auto;
    }

.checkbox-custom {
    margin: auto;
}

.included-deleted-label {
    width: 120px;
}

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

    .grid-area .act-area {
        display: flex;
        flex-flow: wrap row;
        gap: 5px 5px;
    }
/* メニューボタン */
.menu-btn {
    width: fit-content;
    display: inline-block;
    text-decoration: none;
}

    .menu-btn .menu-content {
        min-width: 300px;
        width: fit-content;
        margin: 0px 125px;
        display: flex;
        flex-flow: column;
    }

        .menu-btn .menu-content:hover {
            opacity: 75%;
        }

            .menu-btn .menu-content:hover > .iconfont-frame i {
                cursor: pointer;
                transform: scale(1.2);
                transition: all .3s ease 0s;
            }

            .menu-btn .menu-content:hover > .context-frame label {
                font-weight: bold;
                cursor: pointer;
                transform: scale(1.1);
                transition: all .3s ease 0s;
            }

    /*アイコンによって横幅が確定する*/
    .menu-btn .iconfont-frame {
        min-height: 90px;
        padding: 15px 50px;
        border-radius: 7px 7px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
    }

        .menu-btn .iconfont-frame i {
            line-height: unset;
        }

    .menu-btn .context-frame {
        min-height: 90px;
        width: 100%;
        padding: 15px 0px;
        border-radius: 0px 0px 7px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

        .menu-btn .context-frame a:nth-child(2) {
            margin-left: auto;
        }

    .menu-btn .iconfont-frame {
        color: #d5d5d5;
        background-color: chocolate;
    }

    .menu-btn .context-frame {
        color: #fff;
        background-color: chocolate;
    }

    .menu-btn .system .iconfont-frame {
        color: #fff;
        background-color: #23bfca;
    }

    .menu-btn .system .context-frame {
        color: #23bfca;
        background: #d4f5f8;
    }

    .menu-btn .user .iconfont-frame {
        color: #fff;
        background-color: #2cb4ad;
    }

    .menu-btn .user .context-frame {
        color: #2cb4ad;
        background: #e4f8f7;
    }

    .menu-btn .notice .iconfont-frame {
        color: #fff;
        background-color: #418cc9;
    }

    .menu-btn .notice .context-frame {
        color: #418cc9;
        background: #dbe9f5;
    }

    .menu-btn .integration .iconfont-frame {
        color: #fff;
        background-color: #7f7f7f;
    }

    .menu-btn .integration .context-frame {
        color: #7f7f7f;
        background: #f5f5f5;
    }

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

.content-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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;
}

.nav-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.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%;
}

.info-content-group {
    border-top: 1px solid #d3d6de;
    border-bottom: 1px solid #d3d6de;
}

    .info-content-group table th {
        background-color: #FFF1D9;
        width: 200px;
        font-size: 18px;
        text-align: center;
    }

    .info-content-group table td {
        padding: 5px 5px 5px 20px;
    }

.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;
}
/*modal*/
.single-column-modal .card {
    background-color: #edf1f5;
}

.modal-bottom {
    background-color: #fff;
    min-height: 40px;
    padding: 5px 10px;
}

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

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

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

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

.input-page-area {
    padding-bottom: 50px;
}

    .input-page-area input,
    .input-page-area select,
    .input-page-area .selectMultiple,
    .input-page-area div.border {
        background-color: #fff;
        border: 1px solid #3c8bdc;
        border-radius: 5px;
        font-size: 16px;
    }

    .input-page-area .form-group > label {
        font-weight: bold;
    }

.input-row {
    margin-bottom: 10px;
}

    .input-row .input-btn-area {
        display: flex;
        gap: 10px;
        align-items: center;
    }

        .input-row .input-btn-area input,
        .input-row .input-btn-area select,
        .input-row .input-btn-area .selectMultiple {
            flex: 1;
        }

        .input-row .input-btn-area button {
            width: auto;
            min-width: 95px;
        }

    .input-row .input-content input.date-picker {
        width: 250px;
        min-width: 250px;
    }

    .input-row .input-content .input-content-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .input-row .input-content .input-content-group > input {
            min-width: 250px;
        }

    .input-row .input-row-title {
        background: var(--sub-header-color);
        color: var(--sub-color);
        font-weight: bold;
        padding: 3px 12px;
        margin: 0 -12px;
        font-size: 19px;
    }

    .input-row .input-row-content {
        padding: 5px;
        gap: 10px;
        display: grid;
    }

        .input-row .input-row-content > label {
            font-weight: bold;
        }

        .input-row .input-row-content .input-content-group {
            display: flex;
            flex-wrap: wrap;
            width: 48%;
            min-width: 250px;
        }

            .input-row .input-row-content .input-content-group .input-value-size {
                width: 110px;
            }

            .input-row .input-row-content .input-content-group .toggle {
                position: relative;
                width: 90px;
                height: 35px;
                margin: 4px 8px;
                border-radius: 50px;
                overflow: hidden;
                cursor: pointer;
            }

                .input-row .input-row-content .input-content-group .toggle input[type=checkbox] {
                    display: none;
                }

.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;
}

.input-row .header-row {
    font-weight: bold;
    display: flex;
    gap: 10px;
}

.lead {
    font-weight: 500;
}

.current-value-item {
    font-weight: bold;
    margin: auto 0px;
}

    .current-value-item .current-value-content {
        color: var(--sub-color);
        font-size: 20px;
        margin-left: 10px;
    }

    .current-value-item .current-value-title {
        color: #A4A6A7;
    }

.input-flex-row {
    display: flex;
    gap: 10px;
}

.input-grid {
    display: grid;
    gap: 5px;
    /*grid-template-columns: 30% 30% 30%;*/
}

.input-item {
    width: 100%;
}

    .input-item .input-title {
        font-weight: bold;
        margin-bottom: 5px;
    }

        .input-item .input-title > label {
            font-weight: bold;
        }

    .input-item .input-content {
        width: 100%;
    }

        .input-item .input-content input[type="file"] {
            width: 100%;
        }

.range-item-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-control.date-picker {
    opacity: 1;
    background-color: #fff;
}

.form-group-separate {
    display: flex;
    gap: 10px;
}

    .form-group-separate .form-group {
        width: 100%;
    }

/*Schedule*/
.fck-background {
    cursor: default;
}

.view-btns {
    position: absolute;
    left: 83%;
}

.label-area {
    min-height: 38px;
}

.input-disable {
    border: solid 1px #aaaaaa;
    border-radius: 0.25rem;
    display: block;
    padding-left: 5px;
    padding-top: 3px;
    min-height: 28px;
}

    .input-disable li {
        padding-left: 10px;
    }

.display-panel-amount {
    font-size: 32px;
}

.form-group .checkbox-area {
    display: block;
}

.active-input {
}

input[type="checkbox"] ~ span.check-img.active-input::before {
    border: 1px solid #3c8bdc;
}

.form-errors {
    color: #ff0000;
}

.resize-border {
    border-left-color: chocolate !important;
    border-right-color: chocolate !important;
    border-width: 4px !important;
}

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

.radiobutton {
    display: none;
}

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

.radio-lavel {
    height: 30px;
    line-height: 30px;
}

.table-title-label {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    transform: translateY(-50%) translateX(1em);
    background-color: #E6EEF2;
    padding: 0 1em;
    font-size: 20px;
}

.user-info-table {
    margin: 20px 0;
}

    .user-info-table tr {
        line-height: 2;
    }

    .user-info-table th {
        font-weight: bold;
        width: 25%;
        min-width: 250px;
    }

    .user-info-table td pre {
        white-space: pre-wrap;
    }

.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;
    }

.select-item {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif, 'Font Awesome 6 Pro';
    width: 330px;
}

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

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

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

.form-switch {
    display: flex;
    gap: 10px;
}

    .form-switch .switch-btn-common,
    .form-switch .switch-btn-common-input-fix,
    .form-switch .switch-btn-common-fix {
    }

    .form-switch label {
        align-items: center;
        display: flex;
    }

.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;
    }

/* grid-item */
.grid-item-horizon {
    display: grid;
    gap: 5px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .space-between .left {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .space-between .right {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.iziModal-content {
    box-sizing: border-box;
}

/* 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, 'Font Awesome 6 Pro';
    }

    .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;
}

/**既存のselectMultipleを上書き**/
.selectMultiple > div {
    padding: 4px 7px 0px 7px;
    min-height: 36px;
}

    .selectMultiple > div a {
        margin: 0 6px -2px 0;
    }

    .selectMultiple > div span {
        top: 5px;
    }

/* ファイル選択ユニット */
.file-area {
    display: flex;
    flex-flow: column;
    gap: 5px;
}

    .file-area .file-select-unit {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .file-area .file-select-unit .form-control {
            flex: 1;
            font-size: 16px;
        }

        .file-area .file-select-unit a.form-control {
            padding-left: 10px;
        }

        .file-area .file-select-unit input.file-data.no-data {
            color: #9a9a9a;
        }

    .file-area .image-count {
        text-align: end;
    }