@charset "UTF-8";

/******************************************
[global]
******************************************/
html,
body {
    height: 100%;
}

body {
    background: #eff1f4;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif,
    "Alegreya SC", serif;
    font-size: 14px;
    line-height: 1.5;
    color: #3f4446;
    -webkit-text-size-adjust: none;
    overflow-x: hidden;
}

/*
[img]
******************************************/
.img-fluid {
    width: 100%;
    height: auto;
}

/*
[link]
******************************************/
a {
    text-decoration: none;
    transition: 0.3s;
}

.link {
    text-decoration: underline;
    color: #00a7ff;
}

.linkBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid #005dad;
    font-weight: bold;
    color: #005dad;
}

@media (min-width: 769px) {
    a:hover {
        opacity: 0.6;
    }

    .link:hover {
        text-decoration: none;
        opacity: 1;
    }
}

/******************************************
[header]
******************************************/
.globalHeader {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    z-index: 900;
    transition: 0.3s;
    border-bottom: 2px solid #3f4446;
}

.globalHeader-unit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    background: #ffff;
    z-index: 1;
}

.globalHeader-logo {
    line-height: 1;
    margin: 0 20px 0 0;
    width: 190px;
}

.globalHeader-logo img {
    width: auto;
    height: 55px;
    padding: 5px 0;
}

.globalHeader-logo-link {
    display: flex;
    align-items: center;
    width: 100%;
}

.globalHeader-select {
    width: 200px;
    margin-right: auto;
}

.globalHeader-logout {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid #3f4446;
    color: #fff;
    background: #3f4446;
    transition: 0.3s;
}

@media (min-width: 769px) {
    .globalHeader-logout:hover {
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .globalHeader-unit {
        padding: 0 15px;
    }
}

@media (max-width: 446px) {
    .globalHeader-select {
        width: 100px;
        margin-right: auto;
    }

    .globalHeader-logout {
        font-size: 11px;
    }
}

/*
[scrollHeader]
******************************************/
.scrollHeader {
    display: none;
}

@media (max-width: 768px) {
    .scrollHeader {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        background: rgba(255, 255, 255, 0.85);
        transform: translateY(-15px);
        transition: 0.3s;
    }

    .scrollHeader.is-scroll {
        transform: translateY(60px);
    }

    .scrollHeader.is-toggled {
        left: 230px;
    }

    .scrollHeader .pageHeader-top {
        width: 100%;
        padding: 10px 15px;
    }
}

/******************************************
[wrap]
******************************************/
.globalWrap {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
}

/******************************************
[nav]
******************************************/
.globalNav {
    position: fixed;
    top: 60px;
    left: 0;
    width: 230px;
    height: calc(100% - 60px);
    background: #3f4446;
}

.globalNav-scroll {
    height: 100%;
    padding: 0 0 40px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.globalNav-unit {
    margin: 0 0 40px;
    border-top: 1px solid #626769;
}

.globalNav-unit:last-child {
    margin-bottom: 0;
}

.globalNav-item {
    border-bottom: 1px solid #626769;
    color: #fff;
}

.globalNav-trigger {
    transition: 0.3s;
    cursor: pointer;
}

.globalNav-trigger:before {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-size: 1.3125rem;
    font-weight: 900;
    transition: 0.3s;
}

.globalNav-trigger.is-open:before {
    transform: translateY(-50%) rotate(180deg);
}

.globalNav-icon {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.3125rem;
}

.globalNav-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    color: #fff;
    white-space: nowrap;
}

.globalNav-link.is-active {
    background: #ff0464;
}

.globalNav-sub {
    display: none;
}

.globalNav-sub-item {
    display: flex;
    align-items: center;
    border-top: 1px solid #626769;
}

.globalNav-sub-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 0 0 40px;
    color: #fff;
}

.globalNav-sub-link.is-active {
    background: #626769;
    pointer-events: none;
}

.globalNav-sub-link:before {
    content: "\f0da";
    margin: 0 10px 0 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

@media (min-width: 769px) {
    .globalNav {
        transition: 0.3s;
    }

    .globalNav.is-toggled {
        width: 40px;
        z-index: 1;
    }

    .globalNav.is-toggled .globalNav-scroll {
        overflow: visible;
    }

    .globalNav.is-toggled .globalNav-link {
        color: transparent;
        overflow: hidden;
    }

    .globalNav.is-toggled .globalNav-link:before {
        display: none;
    }

    .globalNav.is-toggled .globalNav-icon {
        color: #fff;
    }

    .globalNav.is-toggled .globalNav-sub {
        position: absolute;
        top: 0;
        left: 45px;
        width: 200px;
        background: #626769;
        font-size: 0.75rem;
        z-index: 1;
    }

    .globalNav.is-toggled .globalNav-sub:before {
        content: "";
        position: absolute;
        top: 15px;
        left: -5px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        border-color: transparent #626769 transparent transparent;
    }

    .globalNav.is-toggled .globalNav-sub-item {
        border-top: 1px solid #8b8f93;
    }

    .globalNav.is-toggled .globalNav-sub-link {
        height: 35px;
        padding: 0 15px;
    }

    .globalNav.is-toggled .globalNav-sub-link.is-active {
        color: #8b8f93;
    }

    .globalNav-trigger:hover {
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .globalNav {
        pointer-events: none;
        /*&:before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100vh;
      height: 100%;
      background: $white;
      transition: $ts;
      z-index: 1;
    }*/
    }

    .globalNav-scroll {
        overflow: hidden;
    }

    .globalNav.is-toggled {
        pointer-events: auto;
        /*&:before{
      left: $gnW;
    }*/
    }

    .globalNav.is-toggled .globalNav-scroll {
        overflow-y: scroll;
    }
}

/******************************************
[body]
******************************************/
.globalBody {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 0 0 230px;
    padding: 60px 0 0;
    background: #fff;
    transition: 0.3s;
}

.globalBody.is-toggled {
    margin: 0 0 0 40px;
}

@media (max-width: 768px) {
    .globalBody {
        width: 100%;
        min-width: 100%;
        margin: 0;
    }

    .globalBody:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        width: 100vh;
        height: 100%;
        background: #fff;
        transition: 0.3s;
    }

    .globalBody.is-toggled {
        height: 100%;
        margin: 0 0 0 230px;
    }

    .globalBody.is-toggled:before {
        left: 230px;
    }
}

/******************************************
[main]
******************************************/
.globalMain {
    flex: 1 0 auto;
    height: calc(100% - 45px);
    background: #eff1f4;
}

/*
[pageheder]
******************************************/
.pageHeader {
    width: 100%;
    background: #fff;
}

.pageHeader-top {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #dee1e5;
}

.pageHeader-ttl {
    font-size: 1.3125rem;
    font-weight: bold;
    line-height: 1;
}

@media (max-width: 768px) {
    .pageHeader-top {
        padding: 15px;
    }
}

/*
[drawerBtn]
******************************************/
.drawerBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    margin: 0 10px 0 0;
    background: #eff1f4;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    line-height: 1;
    transition: 0.3s;
}

.drawerBtn-icon {
    margin: 0 0 2px;
    font-size: 1.3125rem;
}

.drawerBtn-text {
    font-size: 0.625rem;
}

@media (min-width: 769px) {
    .drawerBtn:hover {
        opacity: 0.6;
    }
}

/*
[breadcrumb]
******************************************/
.breadcrumb {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.breadcrumb-item {
    display: flex;
    font-size: 0.75rem;
    line-height: 1;
}

.breadcrumb-item:not(:first-child):before {
    content: ">";
    display: block;
    margin: 0 5px;
}

.breadcrumb-link {
    color: #3f4446;
}

/*
[pageBody]
******************************************/
.pageBody {
    padding: 20px;
}

@media (max-width: 768px) {
    .pageBody {
        padding: 15px;
    }
}

/*
[pageNav]
******************************************/
.pageNav {
    margin: -10px 0 20px;
}

.pageNav:last-child {
    margin-bottom: 0;
}

.pageNav-unit {
    display: flex;
    flex-wrap: wrap;
}

.pageNav-item {
    margin: 10px 10px 0 0;
}

.pageNav-item:last-child {
    margin-right: 0;
}

.pageNav-link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    /*font-weight: bold;*/
    color: #3f4446;
}

.pageNav-link.is-active {
    background: #eff1f4;
    pointer-events: none;
}

@media (max-width: 768px) {
    .pageNav {
        margin: -5px 0 15px;
    }

    .pageNav-item {
        margin: 5px 5px 0 0;
    }
}

/******************************************
[panel]
******************************************/
.panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #bec4c7;
}

/*
[row]
******************************************/
.panelRow {
    margin: 0 0 20px;
}

.panelRow:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .panelRow {
        margin: 0 0 15px;
    }
}

/*
[unit]
******************************************/
@media (max-width: 768px) {
    .panelUnit {
        margin: 0 0 15px;
    }

    .panelUnit:last-child {
        margin-bottom: 0;
    }
}

/*
[header]
******************************************/
.panelHeader {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #dee1e5;
}

.panelHeader-headline {
    font-size: 1.125rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .panelHeader {
        min-height: 50px;
        padding: 0 15px;
    }

    .panelHeader-headline {
        font-size: 1rem;
    }
}

/*
[body]
******************************************/
.panelBody {
    flex: 1 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .panelBody {
        padding: 15px;
    }
}

/*
[footer]
******************************************/
.panelFooter {
    padding: 20px;
    border-top: 1px solid #dee1e5;
}

@media (max-width: 768px) {
    .panelFooter {
        padding: 15px;
    }
}

/******************************************
[footer]
******************************************/
.globalFooter {
    display: flex;
    align-items: center;
    height: 45px;
    padding: 0 20px;
    background: #fff;
}

.globalFooter-copy {
    font-size: 0.625rem;
}

.pagetop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.pagetop-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: #3f4446;
    font-size: 1.5rem;
    color: #fff;
    transition: 0.3s;
    z-index: 1;
}

@media (min-width: 769px) {
    .pagetop-btn:hover {
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .globalFooter {
        padding: 0 15px;
    }

    .globalFooter-copy {
        font-size: 0.5625rem;
    }
}

/******************************************
[form]
******************************************/
.formRow {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: 0 0 2px;
}

.formRow:last-child {
    margin-bottom: 0;
}

.formRow-unit {
    margin: 0 0 2px;
}

.formRow-unit:last-child {
    margin-bottom: 0;
}

.formRow-unit .row {
    margin-right: -1px;
    margin-left: -1px;
}

.formRow-unit [class*="col"] {
    padding-right: 1px;
    padding-left: 1px;
}

.formLabel {
    flex: 0 0 auto;
    width: 200px;
    min-height: 60px;
    padding: 0 10px;
    background: #dee1e5;
}

.formLabel-text {
    display: flex;
    align-items: center;
    height: 60px;
    font-weight: bold;
}

.formField {
    flex: 1 0 auto;
    width: 1%;
    padding: 10px;
    background: #eff1f4;
}

.formField-list {
    display: flex;
    flex-wrap: wrap;
    margin: -10px 0 10px;
}

.formField-list:last-child {
    margin-bottom: 0;
}

.formField-list-item {
    margin: 10px 10px 0 0;
}

.formField-list-item:last-child {
    margin-right: 0;
}

.formField-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.formField-group-input {
    flex: 1 0 auto;
    width: 1%;
}

.formField-group-text {
    margin: 0 10px;
}

.formField-group-text:last-child {
    margin-right: 10px;
}

.formField-btn {
    display: flex;
}

.formField-btn-input {
    flex: 1 0 auto;
    width: 1%;
}

.formField-btn-input [class*="form"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.formField-btn .btn {
    padding: 0 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 0.75rem;
}

.formField-note {
    margin: 10px 0 10px;
}

.formField-note:last-child {
    margin-bottom: 0;
}

.formField-note-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #bec4c7;
}

.formField-note-item:last-child {
    margin-bottom: 0;
}

.formField-note-input {
    flex: 1 0 auto;
    width: 1%;
}

.formField-note-label {
    margin: 0 10px 0 0;
    font-weight: bold;
    white-space: nowrap;
}

.formField-add {
    display: flex;
    margin: 10px 0 0;
    overflow-x: scroll;
}

.formField-add-item {
    flex: 0 0 auto;
    width: 220px;
    margin: 0 10px 0 0;
    border: 1px solid #bec4c7;
}

.formField-add-item:last-child {
    margin-right: 0;
}

.formField-add-label {
    padding: 10px;
    background: #dee1e5;
    border-bottom: 1px solid #bec4c7;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.formField-add-input {
    padding: 10px;
}

.formField-add-btn {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px;
}

.formField-add-copy {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.formField-table {
    display: table;
    width: 100%;
    margin: 0 0 10px;
    border-top: 1px solid #bec4c7;
    border-right: 1px solid #bec4c7;
    border-left: 1px solid #bec4c7;
}

.formField-table:last-child {
    margin-bottom: 0;
}

.formField-table-item {
    display: table-row;
    border-bottom: none;
}

.formField-table-label,
.formField-table-input {
    display: table-cell;
    padding: 10px;
    border-bottom: 1px solid #bec4c7;
}

.formField-table-label {
    width: 1%;
    background: #dee1e5;
    border-right: 1px solid #bec4c7;
    font-weight: bold;
    white-space: nowrap;
}

.formField-text {
    display: flex;
    align-items: center;
    min-height: 60px;
    margin: -10px;
    padding: 10px;
}

.formField-help {
    margin: 5px 0 0;
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .formRow-unit [class*="col"] {
        margin: 0 0 2px;
    }

    .formRow-unit [class*="col"]:last-child {
        margin-bottom: 0;
    }

    .formLabel {
        width: 100%;
        min-height: 0;
        padding: 10px;
    }

    .formLabel-text {
        height: auto;
    }

    .formField-add {
        -webkit-overflow-scrolling: touch;
    }

    .formField-table {
        display: block;
    }

    .formField-table-item,
    .formField-table-label,
    .formField-table-input {
        display: block;
    }

    .formField-table-label {
        display: block;
        width: 100%;
        border-bottom: none;
        border-right: none;
        white-space: normal;
    }

    .formField-text {
        min-height: 0;
    }
}

/*
[placeholder]
******************************************/
:placeholder-shown {
    font-size: 0.875rem;
    color: #bec4c7;
}

::-webkit-input-placeholder {
    font-size: 0.875rem;
    color: #bec4c7;
}

:-moz-placeholder {
    font-size: 0.875rem;
    color: #bec4c7;
    opacity: 1;
}

::-moz-placeholder {
    font-size: 0.875rem;
    color: #bec4c7;
    opacity: 1;
}

:-ms-input-placeholder {
    font-size: 0.875rem;
    color: #bec4c7;
}

/*
[reqiored]
******************************************/
.required {
    margin: 0 0 0 5px;
    color: #ef4646;
}

/*
[type=text]
******************************************/
.formInput {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    caret-color: #3f4446;
}

.formInput:focus {
    border-color: #3f4446;
}

@media (min-width: 769px) {
    .formInput:hover {
        border-color: #3f4446;
    }
}

@media (max-width: 768px) {
    .formInput {
        font-size: 1rem;
    }
}

/*
[type=checkbox,type=radio]
******************************************/
input[type="checkbox"],
input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.formCheck,
.formRadio {
    display: inline-block;
}

.formCheck:hover,
.formRadio:hover {
    cursor: pointer;
}

.formCheck-label,
.formRadio-label {
    display: flex;
    align-items: center;
}

.formCheck-label:before,
.formRadio-label:before {
    content: "\f00c";
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
    padding: 2px 0 0;
    background: #fff;
    border: 1px solid #bec4c7;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
    color: #eff1f4;
}

.formCheck-label:empty:before,
.formRadio-label:empty:before {
    margin-right: 0;
}

.formCheck-input:checked+.formCheck-label:before,
.formCheck-input:checked+.formRadio-label:before,
.formRadio-input:checked+.formCheck-label:before,
.formRadio-input:checked+.formRadio-label:before {
    background: #005dad;
    border-color: #005dad;
    color: #fff;
}

.formRadio-label:before {
    border-radius: 50%;
}

@media (min-width: 769px) {

    .formCheck:hover .formCheck-label:before,
    .formCheck:hover .formRadio-label:before,
    .formRadio:hover .formCheck-label:before,
    .formRadio:hover .formRadio-label:before {
        border-color: #3f4446;
    }
}

/*
[toggle]
******************************************/
.formToggle {
    display: block;
}

.formToggle-unit {
    display: block;
    width: 90px;
    height: 30px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #3f4446;
    transition: border-color 0.6s ease-out;
}

.formToggle-btn {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 64px;
    width: 20px;
    background-color: #3f4446;
    border-radius: 10px;
    transition: all 0.3s 0.1s, width 0.1s, top 0.1s, bottom 0.1s;
    cursor: pointer;
}

.formToggle-on,
.formToggle-off {
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.formToggle-on {
    left: 10px;
    color: transparent;
}

.formToggle-off {
    right: 10px;
    color: #3f4446;
}

.formToggle-check:checked+.formToggle-unit {
    border-color: #3f4446;
    transition: all 0.5s 0.15s ease-out;
    background: #3f4446;
}

.formToggle-check:checked+.formToggle-unit .formToggle-btn {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    width: 20px;
    background-color: #fff;
    border-radius: 10px;
    transition: all 0.3s 0.1s, width 0.1s, top 0.1s, bottom 0.1s;
    cursor: pointer;
}

.formToggle-check:checked+.formToggle-unit .formToggle-on {
    color: #fff;
    transition: color 0.3s 0.15s;
}

.formToggle-check:checked+.formToggle-unit .formToggle-off {
    color: transparent;
}

/*
[select]
******************************************/
.formSelect {
    width: 100%;
}

.formSelect:before {
    content: "\f0d7";
    position: absolute;
    top: 13px;
    right: 10px;
    /* transform: translateY(-50%); */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.formSelect-input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    cursor: pointer;
}

@media (min-width: 769px) {
    .formSelect:hover .formSelect-input {
        border-color: #3f4446;
    }
}

@media (max-width: 768px) {
    .formSelect {
        font-size: 1rem;
    }
}

/*
[file]
******************************************/
.formFile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #bec4c7;
}

.formFile:before {
    content: "\f067";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free";
    font-size: 2.25rem;
    font-weight: 900;
    color: #bec4c7;
    line-height: 1;
}

.formFile-trigger {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.formFile-input {
    display: none;
}

.formFile-thumb {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url("../img/common/loader.svg") no-repeat center #eff1f4;
    background-size: 50%;
}

.formFile-thumb.is-finish {
    background-color: #eff1f4;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.formFile-action {
    display: none;
}

.formFile-action-item {
    width: 50%;
}

.formFile-action-item:first-child .btn {
    border-radius: 3px 0 0 3px;
}

.formFile-action-item:last-child .btn {
    border-radius: 0 3px 3px 0;
}

.formFile-action-btn.btn {
    width: 100%;
    min-width: 0;
    height: 25px;
    padding: 0;
    font-size: 0.75rem;
}

.formFile.is-upload {
    padding: 10px;
}

.formFile.is-upload:before {
    display: none;
}

.formFile.is-upload .formFile-trigger {
    height: 90%;
}

.formFile.is-upload .formFile-thumb {
    display: flex;
}

.formFile.is-upload .formFile-action {
    display: flex;
}

@media (min-width: 769px) {
    .formFile:hover {
        border-color: #3f4446;
    }
}

@media (max-width: 768px) {
    .formFlieList {
        justify-content: center;
        margin: -10px -5px 0;
    }

    .formFlieList .formField-list-item {
        margin: 10px 0 0;
        padding: 0 5px;
    }
}

@media (max-width: 320px) {
    .formFile {
        width: 105px;
        height: 105px;
    }

    .formFile-thumb {
        height: 55px;
    }
}

/*
[color]
******************************************/
.formColor {
    display: block;
}

.formColor-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 40px;
    border: 1px solid #bec4c7;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.formColor-input:checked+.formColor-label {
    border: 2px solid #005dad;
    cursor: auto;
}

.formColor-input:checked+.formColor-label:before {
    content: "\f00c";
    position: absolute;
    bottom: -7px;
    right: -7px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background: #005dad;
    border-radius: 50%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.formColor-white .formColor-label {
    background: #fff;
}

.formColor-black .formColor-label {
    background: #000;
    color: #fff;
}

.formColor-brown .formColor-label {
    background: #9e8365;
    color: #fff;
}

.formColor-red .formColor-label {
    background: #e00;
    color: #fff;
}

.formColor-orange .formColor-label {
    background: #f7a015;
    color: #fff;
}

.formColor-yellow .formColor-label {
    background: #f8ea17;
}

.formColor-green .formColor-label {
    background: #4fbc63;
    color: #fff;
}

.formColor-blue .formColor-label {
    background: #0872c6;
    color: #fff;
}

.formColor-sky .formColor-label {
    background: #37d0de;
    color: #fff;
}

.formColor-pink .formColor-label {
    background: #f97398;
    color: #fff;
}

@media (min-width: 769px) {
    .formColor-input:not(:checked):hover+.formColor-label {
        transition: 0.3s;
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .formColor-label {
        width: 100%;
    }

    .formColorList .formField-list-item {
        width: calc((100% - 20px) / 3);
    }

    .formColorList .formField-list-item:nth-child(3n) {
        margin-right: 0;
    }
}

/*
[rating]
******************************************/
.formRating {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.formRating-icon {
    cursor: pointer;
}

.formRating-icon:before {
    content: "\f005";
    align-items: center;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: #8b8f93;
}

.formRating-input:checked~.formRating-icon:before {
    font-weight: 900;
    color: #ffd800;
}

@media (min-width: 769px) {

    .formRating:not(:checked)>.formRating-icon:hover:before,
    .formRating:not(:checked)>.formRating-icon:hover~.formRating-icon:before {
        color: #ffd800;
    }
}

/*
[textarea]
******************************************/
.formTextarea {
    display: block;
    width: 100%;
    height: 120px;
    min-height: 40px;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    caret-color: #3f4446;
    resize: vertical;
}

.formTextarea:focus {
    border-color: #3f4446;
}

@media (min-width: 769px) {
    .formTextarea:hover {
        border-color: #3f4446;
    }
}

@media (max-width: 768px) {
    .formTextarea {
        font-size: 1rem;
    }
}

/*
[datepicker]
******************************************/
.formDate {
    width: 200px;
}

.formDate:before {
    content: "\f073";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: block;
    font-family: "Font Awesome 5 Free";
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1;
    color: #8b8f93;
    z-index: 1;
}

.formDate .formInput {
    padding-left: 35px;
}

.formDateRange {
    display: flex;
    align-items: center;
    margin: 0 10px 0 0;
}

.formDateRange:last-child {
    margin-right: 0;
}

.formDateBtn-calendar {
    position: absolute;
    top: 100%;
    right: 0;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
    z-index: 1;
}

.formDateBtn-calendar.is-show {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .formDate {
        font-size: 1rem;
    }

    .formDateRange {
        width: 100%;
        margin: 0 0 10px;
    }

    .formDateRange:last-child {
        margin-bottom: 0;
    }

    .formDateRange .formDate {
        flex: 1 0 auto;
        width: 1%;
    }
}

/*
[ui-datepicker]
******************************************/
.ui-datepicker {
    width: 226px;
    box-sizing: content-box;
    padding: 5px 5px 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #3f4446;
}

.ui-datepicker .ui-datepicker-header {
    height: 35px;
    margin: 0 0 10px;
    padding: 0;
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    margin: 0 30px;
    font-weight: bold;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0;
    display: flex;
    align-items: center;
    width: 20px;
    height: 100%;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-prev {
    left: 5px;
}

.ui-datepicker .ui-datepicker-prev:before {
    content: "\f0d9";
}

.ui-datepicker .ui-datepicker-next {
    right: 5px;
    justify-content: flex-end;
}

.ui-datepicker .ui-datepicker-next:before {
    content: "\f0da";
}

.ui-datepicker table {
    margin: 0 0 10px;
    border-collapse: separate;
    border-spacing: 2px;
}

.ui-datepicker th {
    padding: 0 0 4px;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    color: #8b8f93;
}

.ui-datepicker td {
    padding: 0;
    background: #eff1f4;
    font-size: 0.75rem;
    text-align: center;
}

.ui-datepicker td.ui-datepicker-other-month {
    background: rgba(239, 241, 244, 0.5);
}

.ui-datepicker td.ui-datepicker-other-month a {
    color: rgba(98, 103, 105, 0.5);
}

.ui-datepicker td.ui-datepicker-today a {
    border: 1px solid #8b8f93;
}

.ui-datepicker td a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #626769;
}

.ui-datepicker td a.ui-state-active {
    pointer-events: none;
    background: #005dad;
    border: none;
    color: #fff;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 0 -3px;
    padding: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    margin: 0 3px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    font-size: 0.75rem;
    transition: 0.3s;
}

@media (min-width: 769px) {
    .ui-datepicker .ui-datepicker-buttonpane button:hover {
        opacity: 0.6;
    }
}

/******************************************
[btn]
******************************************/
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    height: 40px;
    padding: 0 20px;
    border-radius: 3px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    transition: 0.3s;
    cursor: pointer;
}

.btn.is-active {
    pointer-events: none;
}

.btn-main {
    background: #005dad;
    border: 1px solid #005dad;
}

.btn-main:disabled {
    background: #bec4c7;
    border: 1px solid #bec4c7;
}

.btn-main.is-active {
    background: rgba(0, 93, 173, 0.1);
    color: #005dad;
}

.btn-black {
    background: #3f4446;
    border: 1px solid #3f4446;
}

.btn-black:disabled, .btn-red:disabled {
    background: #bec4c7;
    border: 1px solid #bec4c7;
}

.btn-black.is-active {
    background: rgba(63, 68, 70, 0.1);
    color: #3f4446;
}

.btn-red {
    background: #ef4646;
    border: 1px solid #ef4646;
}

.btn-red.is-active {
    background: rgba(239, 70, 70, 0.1);
    color: #ef4646;
}

.btn-bd {
    background: #eff1f4;
    border: 1px solid #bec4c7;
    color: #3f4446;
}

.btn-bd:disabled {
    color: #bec4c7;
}

.btn-bd.is-active {
    background: #fff;
}

.btn-block {
    width: 100%;
}

.btn-auto {
    min-width: 0;
}

.btn-lg {
    height: 60px;
    font-size: 1.125rem;
}

.btn-sm {
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
}

@media (min-width: 769px) {
    .btn:disabled {
        cursor: auto;
    }

    .btn:not(:disabled):hover {
        opacity: 0.6;
    }
}

/*
[group]
******************************************/
.btnGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.btnGroup-item:first-child.btn {
    border-radius: 3px 0 0 3px;
}

.btnGroup-item:last-child.btn {
    border-radius: 0 3px 3px 0;
}

.btnGroup-item.btn {
    min-width: 0;
    border-radius: 0;
}

@media (max-width: 768px) {
    .btnGroup-item.btn {
        padding: 0 15px;
    }
}

/*
[unit]
******************************************/
.btnUnit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -10px 0 0;
}

.btnUnit-item {
    margin: 10px 10px 0 0;
}

.btnUnit-item:last-child {
    margin-right: 0;
}

/*
[action]
******************************************/
.btnAction {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: -20px 0 0;
}

.btnAction-item {
    width: 100px;
    margin: 20px 20px 0 0;
}

.btnAction-item:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.btnAction-item:last-child {
    margin-right: 0;
}

.btnAction-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #005dad;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
}

.btnAction-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
}

@media (max-width: 768px) {
    .btnAction {
        margin: -10px 0 0;
    }

    .btnAction-item {
        width: calc((100% - 20px) / 3);
        margin: 10px 10px 0 0;
    }

    .btnAction-item:nth-child(3n) {
        margin-right: 0;
    }

    .btnAction-icon {
        font-size: 1.5rem;
    }
}

/******************************************
[alert]
******************************************/
.alert {
    border-radius: 3px !important;
}

.alert .iziModal-header {
    box-shadow: none;
}

.alert .iziModal-button-close {
    background: none;
}

.alert .iziModal-button-close:before {
    content: "\f057";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free";
    font-size: 1.3125rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

/*
[success]
******************************************/
.alertSuccess .iziModal-header {
    background: #005dad !important;
}

/*
[error]
******************************************/
.alertError .iziModal-header {
    background: #ef4646 !important;
}

/******************************************
[table]
******************************************/
.tableHeader {
    margin: 0 0 10px;
}

.tableBody {
    margin: 0 0 10px;
}

.tableBody:last-child {
    margin-bottom: 0;
}

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

.tableInfo-item {
    margin: 0 10px 0 0;
    line-height: 1;
}

.tableInfo-item:last-child {
    margin-right: 0;
}

.table {
    width: 100%;
    border-top: 1px solid #bec4c7;
    border-left: 1px solid #bec4c7;
    border-collapse: separate;
}

.table thead tr {
    background: #dee1e5;
}

.table tr:nth-child(even) {
    background: #eff1f4;
}

.table th,
.table td {
    padding: 10px;
    border-bottom: 1px solid #bec4c7;
    border-right: 1px solid #bec4c7;
}

.table th {
    text-align: left;
}

.table td {
    word-break: break-all;
}

.tabel-cellFit {
    width: 1%;
    white-space: nowrap;
}

.tabel-thDark {
    text-align: center;
    background: #dee1e5;
}

@media (max-width: 1271px) {
    .tableScroll {
        white-space: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .tableInfo-item {
        margin: 0 0 10px;
    }

    .tableInfo-item:last-child {
        margin-bottom: 0;
    }
}

/*
[sort]
******************************************/
.sortBtn {
    transition: 0.3s;
    cursor: pointer;
}

.sortBtn-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    font-style: normal;
}

.sortBtn-icon:before{
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1;
}

/*.sortBtn-icon:before {*/
/*    content: "\f30c";*/
/*}*/

/*.sortBtn-icon:after {*/
/*    content: "\f309";*/
/*}*/

.sortBtn.is-active {
    background: #626769;
    color: #fff;
}

.sortBtn.is-asc .sortBtn-icon:before {
    content: "\f0d8";
}

.sortBtn.is-desc .sortBtn-icon:before {
    content: "\f0d7";
}

@media (min-width: 769px) {
    .sortBtn:hover {
        opacity: 0.6;
    }
}

/*
[pager]
******************************************/
.pager {
    display: flex;
}

.pager-item {
    margin: 0 10px 0 0;
}

.pager-item:last-child {
    margin-right: 0;
}

.pager-prev,
.pager-next {
    min-width: 0;
    height: 30px;
    padding: 0 10px;
}

.pager-prev:before,
.pager-prev:after,
.pager-next:before,
.pager-next:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
}

.pager-prev {
    border-radius: 3px 0 0 3px;
}

.pager-prev:before {
    content: "\f104";
    margin: 0 5px 0 0;
}

.pager-next {
    border-radius: 0 3px 3px 0;
}

.pager-next:after {
    content: "\f105";
    margin: 0 0 0 5px;
}

.pager-num {
    display: flex;
    align-items: center;
}

.pager-num-item {
    margin: 0 5px 0 0;
}

.pager-num-item:last-child {
    margin-right: 0;
}

.pager-num-input {
    width: 50px;
    height: 30px;
    text-align: center;
}

/******************************************
[section]
******************************************/
.sec {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #dee1e5;
}

.sec:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/******************************************
[headline]
******************************************/
.headline {
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
}

.headline:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .headline {
        font-size: 1rem;
    }
}

/******************************************
[text]
******************************************/
.text {
    margin: 0 0 10px;
}

.text:last-child {
    margin-bottom: 0;
}

.text-red {
    color: #ef4646;
}

/******************************************
[totalText]
******************************************/
.totalText {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
}

.totalText-num {
    margin: 0 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3.75rem;
}

@media (max-width: 768px) {
    .totalText-num {
        font-size: 3rem;
    }
}

/******************************************
[badge]
******************************************/
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    background: #ef4646;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    z-index: 1;
}

/******************************************
[number]
******************************************/
.number {
    display: flex;
    justify-content: center;
}

.number-unit {
    text-align: center;
}

.number-title {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
}

.number-text {
    margin: 10px 0 0;
    padding: 10px 30px 0;
    border-top: 1px solid #dee1e5;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
    color: #005dad;
}

.number-num {
    margin: 0 5px 0 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3rem;
}

/******************************************
[fullheight]
******************************************/
.fullheight.globalMain {
    display: flex;
    flex-direction: column;
}

.fullheight .pageBody {
    flex: 1 1 auto;
    display: flex;
}

.fullheight .panelRow {
    flex: 1 1 auto;
}

.fullheight .panelUnit {
    height: 100%;
}

/******************************************
[accordion]
******************************************/
.ac-trigger {
    transition: 0.3s;
    cursor: pointer;
}

.ac-body {
    display: none;
}

@media (min-width: 769px) {
    .ac-trigger:hover {
        opacity: 0.6;
    }
}

/******************************************
[tab]
******************************************/
.tabHeader {
    display: flex;
    width: 100%;
}

.tabHeader-item {
    flex: 1 0 auto;
    margin: 0 10px 0 0;
}

.tabHeader-item:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 1px;
    display: none;
    width: calc(100% - 2px);
    height: 1px;
    background: #fff;
    z-index: 1;
}

.tabHeader-item:last-child {
    margin-right: 0;
}

.tabHeader-item.is-active:before {
    display: block;
}

.tabHeader-item.is-active .tabHeader-btn {
    background: #fff;
    border-bottom: none;
    color: #3f4446;
    pointer-events: none;
}

.tabHeader-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #bec4c7;
    border-radius: 6px 6px 0 0;
    border: 1px solid #bec4c7;
    font-weight: bold;
    color: #fff;
    transition: 0.3s;
}

.tabUnit {
    border-radius: 0 0 6px 6px;
}

.tabBody {
    display: none;
}

.tabBody.is-active {
    display: block;
    animation: show 0.3s linear 0s;
}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (min-width: 769px) {
    .tabHeader-item:not(.is-active) .tabHeader-btn:hover {
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .tabHeader {
        padding: 0 0 0 10px;
        background: #fff;
        border-radius: 6px 6px 0 0;
        border: 1px solid #bec4c7;
        border-bottom: none;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tabHeader-item {
        margin: 0;
        padding: 0 10px 0 0;
    }

    .tabHeader-item:before {
        bottom: 0;
        height: 4px;
        background: #005dad;
    }

    .tabHeader-item.is-active .tabHeader-btn {
        background: none;
    }

    .tabHeader-btn {
        background: none;
        border-radius: 0;
        border: none;
        color: #bec4c7;
    }
}

/******************************************
[icon]
******************************************/
.icon-wrap {
    display: flex;
    align-items: center;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.icon:before {
    content: "";
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/******************************************
[error]
******************************************/
/* .error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
} */

.error {
    border-color: #dc3545 !important;
}

label.error {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.formInput.error~label.error,
.formTextarea_rakusai.error~label.error,
.formSelect-input~label.error {
    display: block;
}

.formInput.error:focus,
.formInput.error:hover,
.formTextarea_rakusai.error:focus,
.formTextarea_rakusai.error:hover {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
}

.error-headline {
    margin: 0 0 20px;
    font-size: 1.5rem;
    line-height: 1;
}

.error-text {
    margin: 0 0 20px;
}

@media (max-width: 768px) {
    .error-headline {
        font-size: 0.875rem;
    }
}

/******************************************
[help]
******************************************/
.faq-title {
    margin: -20px;
    padding: 20px;
}

.faq-icon {
    margin: 0 5px 0 0;
    font-size: 1.125rem;
}

.faq-body {
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #bec4c7;
}

.faq-text {
    margin: 0 0 20px;
}

.faq-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .faq {
        margin: -15px;
        padding: 15px;
    }

    .faq-body {
        margin: 15px 0 0;
        padding: 15px 0 0;
    }

    .faq-text {
        margin: 0 0 15px;
    }
}

/******************************************
[login]
******************************************/
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-logo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 30px;
}

.login-body {
    flex: 0 0 auto;
    width: 300px;
    box-sizing: content-box;
    margin: 0 0 40px;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #bec4c7;
}

.login-item {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 20px;
}

.login-item:last-child {
    margin-bottom: 0;
}

.login-headline {
    margin: 0 0 20px;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.login-form {
    width: 100%;
}

.login-form-item {
    margin: 0 0 10px;
}

.login-form-item:last-child {
    margin-bottom: 0;
}

.login-note {
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .login {
        padding: 15px;
    }

    .login-logo {
        margin: 0 auto 15px;
    }

    .login-body {
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 15px;
        padding: 20px;
    }

    .login-item {
        margin: 0 0 15px;
    }

    .login-headline {
        margin: 0 0 15px;
    }
}

/******************************************
[madal]
******************************************/
.iziModal {
    box-shadow: 0 5px 10px rgba(63, 68, 70, 0.7);
    background: transparent !important;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif,
    "Alegreya SC", serif;
}

.iziModal:after {
    display: none;
}

.iziModal-overlay {
    background: rgba(63, 68, 70, 0.9) !important;
}

.iziModal .iziModal-button {
    opacity: 1;
}

.iziModal .iziModal-button-close:hover {
    opacity: 0.6;
    transform: none;
}

.modalInit {
    display: none;
    width: 600px;
    max-height: 85%;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .iziModal {
        width: calc(100% - 20px);
    }
}

/*
[delete]
******************************************/
.deleteCheck {
    text-align: center;
}

.deleteCheck-icon {
    margin: 0 0 10px;
    font-size: 3rem;
    color: #ef4646;
}

.deleteCheck-text {
    font-size: 1.125rem;
    font-weight: bold;
}

/******************************************
[chart]
******************************************/
.chartBody {
    height: 400px;
    margin: 0 0 20px;
}

.chartBody:last-child {
    margin-bottom: 0;
}

.chartFooter-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    font-weight: bold;
}

.chartFooter-total-ttl {
    align-self: center;
    display: flex;
    align-items: center;
    margin: 0 10px 0 0;
    padding: 5px 10px;
    background: #3f4446;
    border-radius: 15px;
    color: #fff;
    white-space: nowrap;
}

.chartFooter-total-num {
    margin: 0 5px 0 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
}

/******************************************
[lity]
******************************************/
.lity {
    background: rgba(39, 42, 43, 0.9);
}

.lity-container {
    max-width: 70%;
    height: 70%;
    max-height: 70%;
}

.lity-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.lity-content:after {
    box-shadow: none;
}

.lity-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100% !important;
}

@media (max-width: 768px) {
    .lity-container {
        height: auto;
    }
}

/******************************************
[template]
******************************************/
.temp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: -10px 20px 20px 0;
}

.temp:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

.temp-item {
    margin: 10px 10px 0 0;
}

.temp-item:last-child {
    margin-right: 0;
}

.temp-ttl {
    margin: 0 0 5px;
    font-size: 0.75rem;
    line-height: 1;
    color: #626769;
}

.temp-damy {
    height: 300px;
    padding: 10px;
    background: #eff1f4;
}

/******************************************
[calender]
******************************************/
/*カレンダー部分*/
.monthtittle {
    position: relative;
    margin-bottom: 34px;
}

.tittle4 {
    font-size: 12pt;
    line-height: 23px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: 35%;
    font-weight: 600;
    margin-top: 5px;
}

.callyazi-left {
    font-size: 40pt;
    line-height: 28px;
    float: left;
    color: #000;
    position: relative;
    z-index: 10;
    top: 130px;
}

.callyazi-right {
    position: relative;
    font-size: 40pt;
    line-height: 28px;
    float: right;
    color: #000;
    z-index: 10;
    top: 130px;
}

.callenders {
    width: 100%;

    padding-bottom: 15px;

    margin-right: auto;
    margin-left: auto;
}

.first th,
td {
    border-collapse: collapse;
    border: none;
    font-weight: normal;
}

.first {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    margin-bottom: 20px;
}

.first tr .akawaku {}

.righttext {
    text-align: right;
    font-weight: normal;
}

.righttext-big {
    font-size: 13pt;
    text-align: right;
}

.lefttext {
    text-align: left;
    font-weight: normal;
}

.akabk {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #fff;
    background-color: #ff6568;
    text-align: center;
    border: 2px solid #ff6568;
}

.wakumoji {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #333;
    background-color: #fff;
    text-align: center;
    border: 2px solid #ff6568;
}

.shirobk {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #666;
    background-color: #fff;
    text-align: center;
    border: 2px solid #fff;
}

.shirobk2 {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #ccc;
    background-color: #fff;
    text-align: center;
    border: 2px solid #fff;
}

.shirobkb {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #ccc;
    background-color: #fff;
    text-align: center;
    border: 2px solid #aaa;
}

.holibk {
    font-size: 10pt;
    text-align: center;
    height: 30px;
    padding-top: 5px;
    color: #333;
    background-color: #ccc;
    text-align: center;
    border: 2px solid #ccc;
}

.week-text {
    font-size: 11pt;
    line-height: 30px;
    text-align: center;
    height: 30px;
    padding-top: 2px;
}

.cal-text {
    font-size: 11pt;
    text-align: center;
    margin-bottom: 25px;
}

.firstTable-detail>p {
    width: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    margin-right: 5px;
}

/*カレンダー部分*/

/******************************************
[rakusai edition]
******************************************/
/*テキストエリア*/

.formTextarea_rakusai {
    display: block;
    width: 100%;
    height: 330px;
    min-height: 40px;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #bec4c7;
    caret-color: #3f4446;
    resize: vertical;
}

.message-box {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.show-message {
    display: none;
}

.show-class {
    display: block;
}
.mt-20{
    margin-top: 20px;
}
button.close{
    padding: 0;
    background-color: transparent;
    border: 0;
}
button.close:hover{
    opacity: 1;
}
.close{
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    cursor: pointer;
    line-height: 1;
}
.mg-0{
    margin: 0 !important;
}
.text_note{
    color: rgb(255, 0, 0);
    margin-bottom: 5px;
}
.w-40{
    width: 40% !important;
}
.mgl-20{
    margin-left: 20px !important;
}
.text-note-image{
    margin-top: 5px;
}
.w-50{
    width: 50% !important;
}
.mt-10{
    margin-top: 10px;
}
.ml-10{
    margin-left: 10px;
}
.ml-20{
    margin-left: 20px;
}
.mgt-5{
    margin-top: 5px;
}
.w-20{
    width: 20% !important;
}
.required{
    color: rgb(255, 0, 0);
    line-height: 5;
}
.btn-file-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 90px;
    height: 30px;
    padding: 0 20px;
    border-radius: 3px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    transition: 0.3s;
    cursor: pointer;
}
span.error{
    color: #dc3545;
    font-weight: inherit !important;
}
label.error{
    color: #721c24;
    font-weight: inherit !important;
    font-size: 14px;
    line-height: 1.5;
    display: block !important;
}
.err-border{
    border: 1px solid #ff0000 !important;
}
.link-detail:visited{
    color: #006BFF;
}
.link-detail{
    color: #006BFF;
}
.text-left{
    text-align: left;
}
.hidden{
    display: none !important;
}
.text-center{
    text-align: center;
}
select:disabled{
    cursor: context-menu;
}
select:disabled:hover{
    border: 1px solid #bec4c7 !important;
}
.money-txt{
    margin: 10px 0px 0px 10px !important;
}
.checkbox_disable{
    cursor: context-menu !important;
}
.checkbox_disable::before{
    background: #737c80 !important;
    border-color: #737c80 !important;
}
.disabled{
    cursor: context-menu !important;
}
.disabled::before:hover{
    border-color: none !important;
}
.custom-select:after {
    content: "\f0d7";
    position: absolute;
    top: 15%;
    right: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    transform: rotate(180deg);
}

.object-fit-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

.overflow-popup {
    overflow: hidden !important;
}