@charset "UTF-8";

/*=======================================================
CSSリセット
=======================================================*/
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "メイリオ", Meiryo, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "YU Gothic UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    width: 100%;
    height: auto;
}
ul, li {
    list-style: none;
}
a {
    outline: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a:active, a:hover {
    color: inherit;
}
p {
    line-height: 1;
}
input,
select,
button,
textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background-color: inherit;
    background-clip: padding-box;
    color: inherit;
    font-family: inherit;
    font-size: 18px;
    /* font-size: inherit; */
    line-height: 1;
}
input::-ms-clear,
select::-ms-clear,
button::-ms-clear,
textarea::-ms-clear {
    display: none;
}
input::-ms-reveal,
select::-ms-reveal,
button::-ms-reveal,
textarea::-ms-reveal {
    display: none;
}
input::-ms-expand,
select::-ms-expand,
button::-ms-expand,
textarea::-ms-expand {
    display: none;
}
button {
    cursor: pointer;
}
input[readonly]:focus {
    box-shadow: none;
}
/*【Chrome】オートコンプリートの色を変更 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
}
input[disabled]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px gray inset;
}
textarea:focus {
    outline: 0;
    border: 0;
}
button[disabled],
input[disabled],
.disabled {
    cursor: default;
}
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=time]:disabled::-webkit-calendar-picker-indicator {
    display: none;
}
select {
    background-image: url(./images/icon_commbo_blue.png);
    background-repeat: no-repeat;
    background-size: 14px 10px;
    background-position: right 20px center;
    cursor: pointer;
}
select::-ms-value {
    background: none;
    color: inherit;
}
form {
    display: block;
}
.input-default {
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    background-color: #FFFFFF;
}
img {
    border-style: none;
}
table {
    border-collapse: collapse;
}

/*=======================================================
 メイン
=======================================================*/
.container {
    display: flex;
}
main {
    width: calc(9999px - 186px);
    min-height: 100vh;
    margin-left: 186px;
    background-color: #231F20;
    color: #FFFFFF;
}
.sidenav__hidden__main {
    margin-left: 0;
}

/*=======================================================
 サイドメニュー
=======================================================*/
@font-face {
    font-family: 'SackersGothicStd-Square';
    src: url('../fonts/SackersGothicStd-Square.woff2') format('woff');
}
.sidenav {
    position: fixed;
    width: 186px;
    background-color: #3A3C40;
    box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.51);
    color: #FFFFFF;
    z-index: 10;
    height: 100vh;
}
.sidenav__hidden {
    display: none;
}
/* TODO: Aqua_TB.cssへの反映 */
.sidenav__top {
    height: 160px;
    padding: 20px 0 0 15px;
}
.sidenav__logo {
    margin-bottom: 20px;
}
.sidenav__logo > img{
    width: 50%;
}
.sidenav__title {
    font-family: 'SackersGothicStd-Square';
    opacity: 0.8;
}
.sidenav__title h1 {
    font-size: 18px;
    font-weight: normal;
}
.sidenav__title span.r-mark {
    vertical-align: super;
    font-size: 10px;
}
.sidenav__title span.ver {
    font-size: 18px;
    font-weight: normal;
}
.sidenav__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 160px);
    width: 100%;
    overflow-y: auto;
}
.sidenav__item {
    height: 60px;
}
.sidenav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 8px;
    height: 60px;
    font-size: 20px;
}
.sidenav a.select {
    background-color: #5D6066;
}
.sidenav a span:nth-of-type(2) {
    padding-top: 3px;
}
.sidenav__right {
    position: fixed;
    width: 20px;
    height: 100vh;
    left: 186px;
}
.sidenav__right__hidden {
    left: 0;
}
.sidenav__right .accordion-btn {
    display: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    margin-left: 1.5px;
    padding: 8px 2px;
    border: none;
    background-color: #d9d9e35f;
}
.sidenav__right:hover .accordion-btn {
    display: block;
}
.sidenav__right .accordion-btn:hover {
    z-index: 10;
    opacity: 0.8;
    border: 2px solid #e2e2e879;
}
.accordion-btn i {
    text-align: center;
    color: #d9d9e3;
}
.accordion-closed i{
    transform: rotate(180deg);
}

/* サイドメニュー ユーザー */
.sidenav .user-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.sidenav .user-wrap .user__name {
    max-width: 130px;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.link__develop {
    height: auto;
}

/* サイドメニュー 時刻 */
.sidenav .date-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-size: 24px;
}

/*=======================================================
 サイドメニュー（アイコン）
=======================================================*/
.ic-com {
    position: relative;
    display: block;
    background-repeat: no-repeat;
}
.ic-nav {
    display: block;
    width: 36px;
    height: 36px;
    margin-left: 3px;
    margin-right: 10px;
    background-color: #c4c4cc;
    -webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
}
.select .ic-nav {
    background-color: #298de2;
}
/* TODO: Aqua_TB.cssへの反映 */
.ic-nav.ic-home {
    -webkit-mask-image: url(./images/icon_side_home.svg);
    mask-image: url(./images/icon_side_home.svg);
}
.ic-nav.ic-notice {
    -webkit-mask-image: url(./images/icon_side_notice.svg);
    mask-image: url(./images/icon_side_notice.svg);
}
.ic-nav.ic-task {
    -webkit-mask-image: url(./images/icon_side_task.svg);
    mask-image: url(./images/icon_side_task.svg);
}
.ic-nav.ic-office {
    -webkit-mask-image: url(./images/icon_side_office.svg);
    mask-image: url(./images/icon_side_office.svg);
}
.ic-nav.ic-contract {
    -webkit-mask-image: url(./images/icon_side_contract.svg);
    mask-image: url(./images/icon_side_contract.svg);
}
.ic-nav.ic-mypage {
    -webkit-mask-image: url(./images/icon_side_mypage.svg);
    mask-image: url(./images/icon_side_mypage.svg);
}
.ic-nav.ic-water {
    -webkit-mask-image: url(./images/icon_side_water.svg);
    mask-image: url(./images/icon_side_water.svg);
}
.ic-nav.ic-light {
    -webkit-mask-image: url(./images/icon_side_light.svg);
    mask-image: url(./images/icon_side_light.svg);
}
.logout .ic-nav {
    width: 24px;
    height: 24px;
}
.logout span {
    font-size: 18px;
}
.ic-nav.ic-logout {
    -webkit-mask-image: url(./images/icon_side_logout.svg);
    mask-image: url(./images/icon_side_logout.svg);
}
.ic-detail-white {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 10px;
    height: 14px;
    background-size: 100%;
    background-image: url(./images/icon_detail_white.png);
}

/*=======================================================
 単独水槽画面のボタン(未来の癒し水槽）
=======================================================*/
/* phグラフ */
.btn-img1-com {
    display: block;
    mask-image: url(./images/PH.svg);
    background-color: #466b7e;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* 水温グラフ */
.btn-img2-com {
    display: block;
    mask-image: url(./images/水温.svg);
    background-color: #466b7e;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* 電力グラフ */
.btn-img3-com {
    display: block;
    mask-image: url(./images/電源プラグ.svg);
    background-color: #466b7e;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* 照明作業一覧 */
.btn-img4-com {
    display: block;
    /* mask-image: url(./images/icon_side_light.svg); */
    mask-image: url(./images/電球.svg);
    background-color: #466b7e;
    mask-repeat: no-repeat;
    mask-position: center;
}
/* 給排水作業一覧 */
.btn-img5-com {
    display: block;
    /* mask-image: url(./images/icon_side_water.svg); */
    mask-image: url(./images/排水.svg);
    background-color: #466b7e;
    mask-repeat: no-repeat;
    mask-position: center;
}

/*=======================================================
 ボタン
=======================================================*/
.btn-com {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
}
.btn-com,
.blue-line {
    font-size: 16px;
}
.btn-name {
    /* padding-right: 8px; */
}
.btn-lg,
.btn-sm {
    height: 36px;
}
.btn-lg {
    min-width: 170px;
}
.btn-md {
    height: 40px;
    /* border-radius: 20px; */
    min-width: 160px;
}
.btn-sm {
    min-width: 66px;
}
.btn-blue {
    background-color: #169DFF;
    /* box-shadow: 0 1px 2px 0 rgba(22, 157, 255, 0.62); */
    color: #FFFFFF;
}
.btn-blue:hover {
    color: #FFFFFF;
}
.btn-page-open {
    width: 30px;
    height: 30px;
}
.blue-line {
    background-color: rgb(58, 58, 58);
    border: 1px solid #FFFFFF;
    /* box-shadow: 0 1px 2px 0 rgba(58, 58, 58); */
    color: #FFFFFF;
}

/*=======================================================
  サブメニュー
=======================================================*/
.menu-wrap {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
    .menu-wrap__inner {
        width: auto;
        margin: 5px;
        border: thin solid #bebebe;
        /* border-radius: 5px; */
    }
        .menu-title {
            font-size: 20px;
            padding: 10px;
            background-color: #1E4356;
            /* border-radius: 5px 5px 0 0; */
            color: #000000;
        }
            .menu-title a {
                color: #ffffff;
                /* font-weight: bold; */
            }
            .menu-title a:hover {
                color: #AA0000;
                text-decoration: underline;
            }

        .menu-description {
            padding: 10px 10px 10px 20px;
            background-color: #466b7e;
            font-size: 14px;
            line-height: 1.5;
            /* border-radius: 0 0 5px 5px; */
        }

/*=======================================================
 グループ表示
=======================================================*/
.group-wrap {
    width: auto;
    border: thin solid #bebebe;
    /* border-radius: 5px; */
}
    .group-title {
        font-size: 20px;
        padding: 10px;
        color: #FFFFFF;
        background-color: #169DFF;
        /* border-radius: 5px 5px 0 0; */
        box-shadow: 0 1px 2px 0 rgba(22, 157, 255, 0.62);
    }
    .group-info {
        font-size: 14px;
        line-height: 1.5;
        padding: 10px;
        background-color: #FFFFFF;
        /* border-radius: 0 0 5px 5px; */
    }

/*=======================================================
 コンテンツ
=======================================================*/
.content-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 30px;
    background-color: #231F20;
    border-bottom: #00ADEE solid 3px;
}
.content-title h2 {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
}
.content-title label.select-box {
    opacity: 0.79;
    font-size: 19px;
    color: #FFFFFF;
}
.content-title select {
    padding-left: 20px;
    padding-right: 36px;
}
.content-title select:disabled {
    background-image: none;
    border: none;
}
/* タイトルにボタン、セレクトボックスを設定 */
/* .btn-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-wrap .btn-wrap__item {
    margin-left: 10px;
} */
    /* 事業者セレクトボックス */
    /* .select.contractor_selector {
        width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    } */
    /* 店舗セレクトボックス */
    /* select .office_selector {
        width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    } */
    /* セレクトボックス(上記以外で幅は指定してください） */
    /* .btn-wrap select.item_selector {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .btn-wrap select[disabled] {
        background-color: gray;
        border: 1px solid white;
        box-shadow: none;
        opacity: 0.6;
    }
    .btn-wrap select.office_lock {
        padding-right: 8px;
        background: none;
        background: whitesmoke;
        box-shadow: none;
        cursor: unset;
        pointer-events: none;
    } */

/* .content-title input[type=submit],
.content-title button {
    height: 40px;
    padding: 0 20px;
    font-weight: 600;
    font-size: 19px;
    color: #FFFFFF;
    background-color: #169DFF;
    border-radius: 20px;
    box-shadow: 0 1px 2px 0 rgb(22 157 255 / 62%);
} */
/* .content-title input[type=submit]:disabled,
.content-title button:disabled {
    background-color: gray;
    box-shadow: none;
} */
.content-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    width: 100%;
    /* height: calc(100vh - 60px); */
}
.content-wrap.noscroll {
    overflow: hidden;
    padding: 0;
    /* height: calc(100vh - 60px); */
}
.content-wrap .content-scroll-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}
.content-wrap h3 {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 200;
    color: #FFFFFF;
    text-decoration:underline solid #ffffff;
}
/*=======================================================
 選択項目表示
=======================================================*/
.select-wrap {
    display: block;
    height: 40px;
}
.select-wrap__item {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 15px;
}
    .select-wrap__item .title {
        font-size: 22px;
        font-weight: bold;
        padding: 0 15px;
        margin-bottom: 5px;
        border-bottom: double 5px #169DFF;
        color:#169DFF;
    }
    .select-wrap__item .sub-title {
        font-size: 20px;
        font-weight: bold;
        padding: 0 15px;
        margin-bottom: 5px;
        border-bottom: double 5px #169DFF;
        color:#169DFF;
    }
        .select-wrap__item .title.office:before {
            display: inline-block;
            padding-right: 10px;
            content: "\f1ad";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
        .select-wrap__item .title.fish:before {
            display: inline-block;
            padding-right: 10px;
            content: "\f578";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

/*=======================================================
 フォーム部品
=======================================================*/
.form-parts {
    white-space: nowrap;
    font-size: 20px;
    margin-bottom : 10px;
}
.form-parts.required label{
    color :#ffa500;
    font-weight: 400;
}
.form-parts span {
    font-size: 18px;
}
.form-parts label {
    height: 40px;
    vertical-align: middle;
    font-size: 18px;
}
.form-parts input[type=text],
.form-parts input[type=number],
.form-parts input[type=password],
.form-parts input[type=date],
.form-parts input[type=time] {
    height: 36px;
    padding: 0 8px;
    font-size: 18px;
    /* font-size: 20px; */
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    background-color: whitesmoke;
    color: #000000;
}
.form-parts input[type=number] {
    text-align: right;
}
.form-parts input[type=date] {
    width: 180px;
    text-align: center;
}
.form-parts input[type=time] {
    width: 120px;
    text-align: center;
}
.form-parts input[disabled],
.form-parts input[readonly] {
    background-color: gray;
    border: 1px solid white;
    opacity: 0.6;
}
.form-parts #action {
    background-color: #ffffff;
    width: 90px;
    text-align: center;
    border: 1px solid black;
    line-height: 2;
    height: 40px;
    padding: 0 8px;
    font-size: 20px;
    color: #000000;
}
.form-parts textarea {
    height: 150px;
    padding: 8px;
    font-size: 20px;
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    background-color: whitesmoke;
    color: #000000;
}
.form-parts textarea[disabled],
.form-parts textarea[readonly] {
        background-color: gray;
    border: 1px solid white;
    opacity: 0.6;
}
.form-parts select {
    height: 36px;
    padding-left: 8px;
    padding-right: 36px;
    font-size: 18px;
    /* font-size: 20px; */
    line-height: 1.5;
    background-color: whitesmoke;
    color: #000000;
    border: 1px solid #BAC3C9;
    /* border-radius: 5px; */
    background-image: url(./images/angle-down-solid.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right 10px center;
    cursor: pointer;
}
.form-parts select.office_lock {
    padding-right: 8px;
    background: none;
    color:#000000;
    background: whitesmoke;
    cursor: unset;
    pointer-events: none;
}
.form-parts select[disabled],
.form-parts select[readonly] {
    background-color: gray;
    border: 1px solid white;
    box-shadow: none;
    opacity: 0.6;
}
.form-parts input[type=checkbox] {
    display: none;
}
    .form-parts label.control-chk {
        display: inline-block;
        position: relative;
        padding: 5px 10px 5px 30px;
        line-height: 30px;
        cursor: pointer;
        color: white;
    }
    .form-parts label.control-chk::before {
        display: block;
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        top: 50%;
        left: 0px;
        margin-top: -12px;
        background: #FFFFFF;
        border: 2px solid #BAC3C9;
        /* border-radius: 6px; */
    }
    .form-parts label.control-chk.disabled::before {
        background: gray;
        border: 1px solid white;
        opacity: 0.6;
    }
    .form-parts label.control-chk::after {
        display: block;
        content: '';
        position: absolute;
        width: 9px;
        height: 14px;
        top: 50%;
        left: 7px;
        margin-top: -9px;
        border-right: 3px solid #000000;
        border-bottom: 3px solid #000000;
        opacity: 0;
        transform: rotate(45deg);
    }
    .form-parts input[type=checkbox]:checked + label.control-chk::before {
        background: #FFFFFF;
    }
    .form-parts input[type=checkbox]:checked + label.control-chk.disabled::before {
        background: gray;
    }
    .form-parts input[type=checkbox]:checked + label.control-chk::after {
        opacity: 1;
    }

/* お知らせ用チェックボックス */
.form-parts label.control-notice {
    /* display: inline-block; */
    position: relative;
    padding: 5px 10px 5px 25px;
    /* line-height: 30px; */
    cursor: pointer;
    color: white;
}
.form-parts label.control-notice::before {
    display: block;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 63%;
    left: 0px;
    margin-top: -12px;
    background: #FFFFFF;
    border: 2px solid #BAC3C9;
    /* border-radius: 6px; */
}
.form-parts label.control-notice.disabled::before {
    background: gray;
    border: 1px solid white;
    opacity: 0.6;
}
.form-parts label.control-notice::after {
    display: block;
    content: '';
    position: absolute;
    width: 5px;
    height: 14px;
    top: 50%;
    left: 7px;
    margin-top: -9px;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    opacity: 0;
    transform: rotate(45deg);
}
.form-parts input[type=checkbox]:checked + label.control-notice::before {
    background: #FFFFFF;
}
.form-parts input[type=checkbox]:checked + label.control-notice.disabled::before {
    background: gray;
}
.form-parts input[type=checkbox]:checked + label.control-notice::after {
    opacity: 1;
}

.form-parts input[type=radio] {
    display: none;
}
    .form-parts label.control-rad {
        display: inline-block;
        position: relative;
        padding: 5px 10px 5px 35px;
        line-height: 30px;
        cursor: pointer;
        color: #ffffff;
    }
    .form-parts label.control-rad::before {
        display: block;
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        top: 50%;
        left: 5px;
        margin-top: -12px;
        background: #FFFFFF;
        border: 1px solid #BAC3C9;
        border-radius: 50%;
    }
    .form-parts label.control-rad::after {
        display: block;
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        top: 50%;
        left: 10px;
        margin-top: -7px;
        background: #000000;
        border-radius: 50%;
        opacity: 0;
    }
    .form-parts input[type=radio]:checked + label.control-rad::after {
        opacity: 1;
    }
.form-parts div.__inner {
    position: relative;
    margin-bottom: 10px;
}
    .form-parts div.__inner label.title {
        padding: 0 15px;
        font-size: 18px;
        border-bottom: double 3px #BAC3C9;
        color:#000000;
    }
    .form-parts div.__inner div.explain {
        display: block;
        padding: 10px;
        min-height: 100px;
        margin-bottom: 15px;
        font-size: 18px;
        line-height: 1.5;
        border: 1px solid #BAC3C9;
        /* border-radius: 6px; */
        color:#000000;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-all;
    }
.form-parts div.disp-data {
    display: inline-block;
    height: 36px;
    width: 250px;
    padding: 5px 8px;
    font-size: 18px;
    line-height: 1.5;
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    background: lightgray;
    color:#000000;
    vertical-align: middle;
}
.form-parts div.select-data {
    display: table;
    table-layout: fixed;
}
.form-parts div.select-data div.disp-data {
    display: inline-block;
    vertical-align: middle;
    height: 36px;
    padding: 5px 8px;
    margin-right: 10px;
    font-size: 20px;
    line-height: 1.5;
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    color:#000000;
    background: lightgray;
}
/* .form-parts div.select-data button {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    padding: 0 20px;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #169DFF;
    border-radius: 20px;
    box-shadow: 0 1px 2px 0 rgb(22 157 255 / 62%);
} */
.form-parts label.user-name {
    padding: 5px 10px;
    font-size: 18px;
    border: 1px solid #BAC3C9;
    background-color: #BAC3C9;
    /* border-radius: 20px; */
    color: #000000;
}
.form-parts div.explain {
    display: block;
    padding: 8px;
    min-height: 100px;
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.5;
    border: 1px solid #BAC3C9;
    /* border-radius: 6px; */
    color:#000000;
}
/* テーブル内リンク */
.form-parts a {
    text-decoration: underline;
    color: blue;
}

/*=======================================================
 * 検索フォーム
=======================================================*/
.formSearch {
    width: 100%;
    position: relative;
    margin: 0px 0px 5px 0px;
    margin-bottom: 10px;
    border-bottom: 3px dotted #169DFF;
    font-size: 20px;
}
/* .formSearch input[type=submit],
.formSearch button {
    height: 40px;
    padding: 0 20px;
    font-size: 18px;
    color: #000000;
    background-color: #31A3D1;
    border: 8px outset #90B9D3;
} */
/* .formSearch input[type=submit]:disabled,
.formSearch button:disabled {
    background-color: lightgray;
    border: 8px outset white;
    opacity: 0.6;
} */
.formSearch select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.formSearch__group {
    white-space: nowrap;
    margin-bottom:10px;
}
span.formSearch__inner {
    white-space: nowrap;
    margin-right:10px;
}
div.formSearch__submit {
    position: absolute;
    bottom: 0;
    right: 10px;
}
/* 1ページ行数 */
.formSearch select.count_selector {
    width: 80px;
}
@media screen and (min-width:1370px) {
    div.formSearch__submit {
        right: 0;
        left: 950px;
    }
}

/*=======================================================
 一覧フォーム
=======================================================*/
.formList {
    margin: 0;
    padding: 0;
}
.formList .form-parts {
    margin-bottom : 0;
}
.formList .form-parts label.control-chk {
    padding : 5px 12px;
}
.formList .select-wrap__item {
    margin-right: 10px;
}
.formList .select-wrap__item .title {
    font-size: 20px;
    font-weight: bold;
    padding: 0 15px;
    margin-bottom: 10px;
    border-bottom: double 5px #169DFF;
    color:#169DFF;
}
/* .formList input[type=submit],
.formList button {
    height: 35px;
    padding: 0px 20px;
    margin-bottom : 10px;
    font-size: 18px;
    color: #000000;
    background-color: #31A3D1;
    border: 7px outset #90B9D3;
} */
/* .formList input[type=submit]:disabled,
.formList button:disabled {
    background-color: lightgray;
    border: 7px outset white;
    opacity: 0.6;
} */
/* ソート用ボタン */
.formList input[type=submit].sort-btn,
.formList button.sort-btn {
    height: 30px;
    padding: 0px 20px;
    margin : 15px 0;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    background-color: #005bb0;
    /* border-radius: 8px; */
    box-shadow: 0 1px 2px 0 rgba(0 18 176 0.62);
    border: 1px solid #005bb0;
}
.count-wrap {
    margin: 10px 0;
    font-size: 20px;
}

/* テーブル（スクロールなし） */
table.info {
    margin-bottom: 10px;
    border: 1px solid #41a3d4;
    color: #000000;
    word-break: break-all;
    word-wrap: break-word;
    table-layout: fixed;
    border-collapse: collapse;
}
table.info th {
    height: 2.3em;
    padding: 0.1em 0.4em;
    overflow: hidden;
    background-color: #466b7e;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
    line-height: normal;
    white-space:nowrap;
}
table.info td {
    height: 2.3em;
    padding: 0.1em 0.4em;
    overflow: hidden;
    background-color: #1E4356;
    color: #ffffff;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
}
table.info thead th + th {
    border-left: 1px solid #41a3d4;
}
table.info tbody tr + tr {
    border-top: 1px solid #41a3d4;
}
table.info tbody td + td {
    border-left: 1px solid #41a3d4;
}

/* テーブル（スクロールあり） */
table.info-scroll {
    border-left: 1px solid #C6D1F0;
    border-spacing: 0;
    border-collapse: collapse;
    word-break: break-all;
    word-wrap: break-word;
    margin-bottom: 10px;
    color: #000000;
}
table.info-scroll thead,
table.info-scroll tbody,
table.info-scroll tfoot {
    display: block;
}
table.info-scroll tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    border-bottom: 1px solid #C6D1F0;
}
table.info-scroll thead tr,
table.info-scroll tbody tr,
table.info-scroll tfoot tr {
    border-bottom: 1px solid #C6D1F0;
}
table.info-scroll thead th,
table.info-scroll tfoot th {
    height: 2.3em;
    padding: 0.1em 0.4em;
    font-size: 17px;
    line-height: normal;
    font-weight: 400;
    background-color: #ECECEC;
    color: #0D172A;
    white-space:nowrap;
    overflow: hidden;
    border-top: 1px solid #C6D1F0;
    border-right: 1px solid #C6D1F0;
}
table.info-scroll tbody td,
table.info-scroll tfoot td {
    height: 2.3em;
    padding: 0.1em 0.4em;
    font-size: 18px;
    line-height: normal;
    background: white;
    font-weight: normal;
    overflow: hidden;
    border-right: 1px solid #C6D1F0;
}
table.info-scroll tbody tr:last-child,
table.info-scroll tfoot tr:last-child {
    border-bottom: none;
}
table.info-scroll tbody td:last-child,
table.info-scroll tfoot td:last-child {
    border-right: none;
    border-bottom: none;
}

/* 非表示行 */
table.info tr.disabled th, table.info tr.disabled td, table.info td.disabled,
table.info-scroll tr.disabled th, table.info-scroll tr.disabled td, table.info-scroll td.disabled {
    background-color: gray;
    opacity: 0.6;
}
/* 非表示対応したくないセル */
table.info tr.disabled td.none-disabled {
    background-color: white;
    opacity: 1;
}
/* ソート対象行 */
table.info tr.sort-line td,
table.info-scroll tr.sort-line td {
    background-color: #8ec789;
}

/* エラー対象行 */
table.info tr.error-line td, table.info-scroll tr.error-line td,
table.info td.error-line, table.info-scroll td.error-line {
    background-color: #ff7f50;
}

/* ソートマーク */
table.info th .fa-sort-asc::before,
table.info-scroll th .fa-sort-asc::before {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #666;
}
table.info th .fa-sort-desc::before,
table.info-scroll th .fa-sort-desc::before {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #666;
}

/* タイトル必須 */
table.info th.required,
table.info-scroll th.required {
    color : #ffa500;
}

/* テーブル内リンク */
table.info td a,
table.info-scroll td a {
    text-decoration: underline;
    color: #ffffff;
}
table.info tr.disabled td a, table.info td.disabled a,
table.info-scroll tr.disabled td a, table.info-scroll td.disabled a {
    text-decoration: underline;
    color: white;
}

/* テーブル内ボタン */
/* table.info button,
table.info-scroll button {
    padding: 0 10px;
    margin: 5px 0;
    font-size: 15px;
    color: #000000;
    background-color: #31A3D1;
    border: 7px outset #90B9D3;
} */
/* table.info button:disabled,
table.info-scroll button:disabled {
    background-color: lightgray;
    border: 7px outset white;
    opacity: 0.6;
} */

/* テーブル内ボタン風リンク */
/* table.info a.link-button,
table.info-scroll a.link-button {
    display: inline-block;
    padding: 0 10px;
    margin: 5px 0;
    font-size: 15px;
    line-height: 15px;
    text-decoration: none;
    color: #000000;
    background-color: #31A3D1;
    border: 7px outset #90B9D3;
}
table.info tr.disabled a.link-button,
table.info td.disabled a.link-button,
table.info-scroll tr.disabled a.link-button,
table.info-scroll td.disabled a.link-button {
    background-color: lightgray;
    border: 7px outset white;
    opacity: 0.6;
} */

/*=======================================================
 入力フォーム
=======================================================*/
.formBody {
    position: relative;
    margin-left: 10px;
}
/* .formBody input[type=submit],
.formBody button {
    height: 35px;
    padding: 0 20px;
    margin-bottom : 10px;
    font-size: 18px;
    color: #000000;
    background-color: #31A3D1;
    border: 7px outset #90B9D3;
} */
/* .formBody input[type=submit]:disabled,
.formBody button:disabled {
    background-color: lightgray;
    border: 7px outset white;
    opacity: 0.6;
} */

/*=======================================================
 フォームエラー
=======================================================*/
.formErr {
    display: block;
    width: calc((100vw * 0.8) - 20px);
    padding: 20px;
    margin-bottom: 10px;
    border: 5px solid transparent;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 50%);
    /* border-radius: 5px; */
    background-color: #FFFFFF;
    overflow: hidden;
    border-color: #FF0000;
}
    .formErr ul {
        margin:0px;
        padding:0px;
        color: #C20000;
        font-size: 20px;
    }

    .has-error .help-block {
        padding: 5px 5px 5px 15px;
        font-size: 20px;
        color: #C20000;
    }
    .has-error .help-block::before {
        content: "\f101";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #C20000;
        margin-right: 5px;
    }

/*=======================================================
 ページングのソートボタン
=======================================================*/
ul.pagination {
    padding: 10px 10px 0px 10px;
    color: #ffffff;
}
ul.pagination li {
    display: inline;
    margin: 0 2px;
    padding: 0;
}
ul.pagination li a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 13px;
    background-color: #1E4356;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid #41a3d4;
}
ul.pagination li a.current {
    background-color: #466b7e;
}
ul.pagination li.active a.page-link {
    background-color: #466b7e;
}

/*=======================================================
 ダイアログ
=======================================================*/
.dialog-float {
    border: 1px gray solid;
    background: white;
    /* width: 670px;
    height: 750px; */
    display: none;
    background-color: #E8F0F8;
    box-shadow: 0 3px 12px 0 rgb(0 0 0 / 50%);
    /* border-radius: 13px; */
    overflow: hidden;
    padding: 0;
}
.float-iframe {
    /* width: 670px;
    height: 750px; */
    border: none;
    display: block;
    background-color: #E8F0F8;
    box-shadow: 0 3px 12px 0 rgb(0 0 0 / 50%);
    /* border-radius: 13px; */
}
body.dialog {
    min-width: initial;
    min-height: initial;
    /* border-radius: 13px; */
}
@media (max-width: 1279px) {
  body.dialog {
    min-width: initial;
    min-height: initial;
  }
}
.dialog-container {
    display: block;
    background-color: #E8F0F8;
    width: 100%;
    height: 100%;
    /* border-radius: 13px; */
}
.dialog-wrap {
    overflow: hidden;
    padding: 0;
    height: calc(100vh - 60px);
}
.dialog-wrap .content-scroll-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 0 0 20px;
    width: 100%;
    height: 100%;
}

.dialog-wrap .formBody .form-group:last-child {
    margin-bottom : 0;
}
body.dialog .formErr {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
}

/*=======================================================
 各デフォルトデザイン
=======================================================*/
/* 文字列が長いときの...表示 */
.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* テキストボックス */
/* 全角10文字程度 */
.form-parts input.shorter-box {
    width: 245px;
    height: 36px;
}
/* 全角20文字程度 */
.form-parts input.short-box {
    width: 430px;
}
/* 全角30文字程度 */
.form-parts input.middle-box {
    width: 630px;
}
/* 全角40文字程度 */
.form-parts input.long-box {
    width: 830px;
}
/* 郵便番号 */
.form-parts input.postal-code {
    width: 120px;
}
/* 電話番号 */
.form-parts input.telephone-number {
    width: 170px;
}
/* 数値 */
.form-parts input.number-box {
    width: 100px;
    text-align: center;
}
/* キーワード */
.form-parts input.keyword {
    width: 330px;
}

/* テキストエリア */
.form-parts textarea {
    width: 500px;
}

/* セレクトボックス */
/* 半角2文字程度 */
.form-parts select.number-box {
    width: 70px;
}
/* 全角3文字程度 */
.form-parts select.shorter-box {
    width: 120px;
}
/* 全角5文字程度 */
.form-parts select.short-box {
    width: 245px;
    height: 36px;
}
/* 全角10文字程度 */
.form-parts select.middle-box {
    width: 245px;
}
/* 全角10文字程度 */
.form-parts select.long-box {
    width: 640px;
}
/* 表示用チェックボックス */
.aqua-chk {
    width: 25px;
    height: 25px;
    background: #FFFFFF;
    border: 2px solid #169DFF;
    box-shadow: 0 1px 2px 0 rgba(22, 157, 255, 0.62);
    /* border-radius: 6px; */
}
.aqua-chk-on {
    width: 25px;
    height: 25px;
    background: #169DFF;
    border: 2px solid #169DFF;
    box-shadow: 0 1px 2px 0 rgba(22, 157, 255, 0.62);
    /* border-radius: 6px; */
}
.aqua-chk-on::after {
    content: '';
    display: block;
    width: 10px;
    height: 18px;
    margin-top: -1px;
    margin-left: 6px;
    border-right: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    transform: rotate(45deg);
}
/* メッセージ表示用 */
.message-wrap {
    width: 100%;
    height: 40px;
    font-weight: bold;
}

/*  */
.no-data-wrap {
    width: 100%;
    height: 40px;
    font-size: 20px;
}
/* aタグボタンの非表示 */
.link_none {
    background: gray;
    box-shadow: none;
}

/* Vue用 */
[v-cloak] {
    display: none;
}
