* {
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

html, body { height: 100%; }
html { font-size: 62.5%; }
body {
    font-size: 1.2rem;
    color: #4d4d4d;
}

form {
    width: 100%;
}

a,
input[type="submit"],
button { cursor: pointer; }

input[type="submit"]:hover,
button:hover { filter: brightness(80%); }

em { font-style: normal; }

a { color: #2296b9; }
a:hover { filter: brightness(80%); }

.flt-r { float: right; }
.flt-l { float: left; }

.cf::after {
    content: "";
    display: block;
    clear: both;
}

.error-msg {
    padding: 5px;
    font-size: 1.4rem;
}

.normal-msg {
    padding: 5px;
    font-size: 1.4rem;
}

.m10 { margin: 10px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.mr10 { margin-right: 10px; }
.mr5 { margin-right: 5px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml30 { margin-left: 30px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb80 { margin-bottom: 80px; }

.txt-c { text-align: center; }
.txt-r { text-align: right; }
.txt-l { text-align: left; }
.f-bold { font-weight: bold; }
.f-big { font-size: 1.2em; }
.f-small { font-size: 0.8em; }
.f-red { color: #ff0000 !important; }
.f-blue { color: #0000ff !important; }
.f-italic { font-style: italic; }

input.input-long,
textarea.input-long { width: 70%; }
input.input-medium { width: 14em; }
input.input-short { width: 7em; }
input.input-min { width: 3em; }
input.input-yyyymmdd { width: 6.5em; }
input.input-hhmm { width: 4.5em; }
textarea.textarea-short { height: 5em; }
textarea.textarea-tall { height: 16em; }
textarea.textarea-tallest { height: 30em; }

input[type=checkbox] { transform: scale(1.5); }

optgroup:nth-child(even) { background-color:#FFE4B5; }

input:focus,
select:focus,
textarea:focus { border: solid 1px #6666ff; }

.length-status { margin-left: 5px; }
.length-status-red { color: #cd0a0a; }

.has-error { border: solid 1px #cd0a0a !important; }
.success { border: solid 1px #03a9f4 !important; }

.ui-autocomplete {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 1em;
}

.ui-tooltip.errortip {
    box-shadow: none;
    color: #cd0a0a;
    border: solid 1px #cd0a0a;
    background: #fef1ec;
}

.ui-dialog { z-index: 10000; }
.ui-dialog .ui-tooltip { z-index: 10001; }

.ui-dialog-titlebar { font-size: 1.6rem; }

.btn.min,
.btn.normal,
.btn.wide {
    line-height: normal;
    text-decoration: none;
    border-radius: 11px;
    font-weight: bold;
}
a.btn.min,
a.btn.normal,
a.btn.wide { display: inline-block; }

.btn.min {
    font-size: 1.2rem;
    padding: 4px 11px;
}

.btn.normal {
    font-size:1.4rem;
    padding: 5px 14px;
}

.btn.wide {
    font-size:1.4rem;
    height: 2.5em;
    width: 180px;
}

.btn.green { background-color: #36b7cf; color: #ffffff; border: solid 1px #ffffff; }
.btn.gray  { background-color: #999999; color: #ffffff; border: solid 1px #ffffff; }

.btn img { vertical-align: middle; padding-right: 6px; }

.btn.wrap { display: inline-flex !important; align-items: center; }

.wbtn {
    line-height: normal;
    text-decoration: none;
    min-width: 240px;
    font-size:1.4rem;
    font-weight: bold;
    padding: 8px;
}
a.wbtn { display: inline-block; }

.wbtn.sht { min-width: 180px; }

.wbtn.yellow { background-color: #fcbd21; color: #344154; border: solid 1px #999999; }
.wbtn.white { background-color: #ffffff; color: #344154; border: solid 1px #999999; }

#wrapper {
    min-height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wrapper > div {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

#header-simple {
    padding-top: 30px;
    padding-bottom: 30px;
}

#header-simple img {
    vertical-align: top;
}

#header {
    position: relative;
    height: 120px;
}

#header-info {
    flex-grow: 1;
    padding-left: 20px;
    padding-top: 20px;
}

#header-info > ul {
    width: 300px;
    display: inline-flex;
    flex-wrap: wrap;
    border: solid 1px #2fa7d1;
    border-radius: 14px;
    font-size: 1.3rem;
    overflow: hidden;
}

#header-info > ul li {
    list-style: none;
    padding: 6px 10px;
    text-align: center;
    box-sizing: border-box;
}

#header-info > ul li:nth-child(odd) {
    color: #2fa7d1;
    font-weight: bold;
    border-right: solid 1px #2fa7d1;
    width: 105px;
    background: #f2f2f2;
}

#header-info > ul li:nth-child(even) {
    flex-grow: 1;
    text-align: left;
}

#header-info > ul li:nth-child(-n+4) {
    border-bottom: solid 1px #2fa7d1;
}

#header-menu {
    padding-right: 20px;
    padding-top: 20px;
}

#header-menu-btn {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fcbD21;
    border-radius: 12px;
    cursor: pointer;
}

#header-menu-btn > span {
    display: block;
    width: 52px;
    height: 6px;
    background: #ffffff;
    border-radius: 3px;
}

#header-menu-btn > em {
    color: #ffffff;
    font-weight: bold;
}

#header-menu-pnl {
    position: absolute;
    z-index: 10;
    top: 95%;
    right: 0;
    padding: 54px 20px 20px 40px;
    border: solid 1px #999999;
    border-radius: 14px;
    background: #fcbD21;
    background-image: url("../img/background-top-menu.png"), url("../img/background-top-menu-head.png");
    background-repeat: repeat-y, no-repeat;
    background-position: left 15px top 30px, center top 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#header-menu-pnl > a {
    width: 220px;
    height: 48px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: solid 1px #36b7cf;
    border-radius: 10px;
    font-size: 1.4rem;
    text-decoration: none;
    color: #344154;
    font-weight: bold;
}

#header-menu-pnl > a > div {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center center;
}

#header-menu-pnl > a > span {
    display: block;
    height: 30px;
    width: 5px;
    border-radius: 2.5px;
}

#header-menu-pnl > a > em {
    padding-left: 14px;
}

.header-menu-home      > div { background-image: url("../img/menu-home.png"     ); }
.header-menu-staff     > div { background-image: url("../img/menu-staff.png"    ); }
.header-menu-agency    > div { background-image: url("../img/menu-agency.png"   ); }
.header-menu-template  > div { background-image: url("../img/menu-template.png" ); }
.header-menu-introduce > div { background-image: url("../img/menu-introduce.png"); }
.header-menu-user      > div { background-image: url("../img/menu-user.png"     ); }
.header-menu-master    > div { background-image: url("../img/menu-master.png"   ); }
.header-menu-password  > div { background-image: url("../img/menu-password.png" ); }
.header-menu-logout    > div { background-image: url("../img/menu-logout.png"   ); }
.header-menu-home      > span { background: #c69c6d; }
.header-menu-staff     > span { background: #ff97ac; }
.header-menu-agency    > span { background: #e3ba90; }
.header-menu-template  > span { background: #8cc63f; }
.header-menu-introduce > span { background: #bed036; }
.header-menu-user      > span { background: #ffc524; }
.header-menu-master    > span { background: #89b5e1; }
.header-menu-password  > span { background: #53ccda; }
.header-menu-logout    > span { background: #999999; }

#header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#header-breadcrumbs {
    background: #f2f2f2;
    display: block !important;
    font-size: 1.3rem;
    padding: 8px 0 8px 80px;
    text-align: left;
}
#header-breadcrumbs a {
    color: #666659;
    text-decoration: none;
}

#content {
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
}

#content > div:last-child {
    padding-bottom: 100px;
}

#content > form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#content > form > div:last-child {
    padding-bottom: 100px;
}

.content-green {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    box-sizing: border-box;
    background: #36b7cf;
}

.content-valign-t {
    align-items: flex-start;
}

.content-valign-b {
    align-items: flex-end;
}

.content-pad-sng {
    padding: 30px 50px;
}

.content-pad-sng {
    padding: 30px 50px;
}

.content-pad-t {
    padding: 30px 50px 0 50px;
}

.content-pad-b {
    padding: 20px 50px 30px 50px;
}

.content-halign-r {
    margin-left: auto;
}

h1 {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 2rem;
    font-weigth: bold;
    padding-right: 40px;
}

h1 > div {
    width: 90px;
    height: 90px;
    border-radius: 45px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    margin-right: 30px;
}

h2 {
    font-size: 2rem;
    font-weigth: bold;
}

.title-staff     > div { background-image: url("../img/home-staff.png"    ); }
.title-agency    > div { background-image: url("../img/home-agency.png"   ); }
.title-template  > div { background-image: url("../img/home-template.png" ); }
.title-introduce > div { background-image: url("../img/home-introduce.png"); }
.title-user      > div { background-image: url("../img/home-user.png"     ); background-size: 50% !important; }
.title-master    > div { background-image: url("../img/home-master.png"   ); }
.title-password  > div { background-image: url("../img/home-password.png" ); }

.content-white {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

.content-gray {
    width: 100%;
    flex-grow: 1;
    background-color: #e6e6e6;
    background-image: url("../img/background-bottom.png");
    background-repeat: repeat-x;
    background-position: bottom 40px left 70px;
    box-sizing: border-box;
}

.content-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.content-search-pnl {
    flex-grow: 1;
    background: #ffffff;
    border: solid 1px #999999;
    border-radius: 14px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.content-search-pnl label {
    display: block;
    margin-bottom: 4px;
    font-size: 1.4rem;
    font-weight: bold;
}

#content-overlay {
    flex-grow: 1;
    position: relative;
}

#content-overlay #content-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: #e6e6e6;
    display: flex;
    flex-direction: column;
}

#content-overlay #content-background > div {
    width: 100%;
}

#content-overlay #content-background-top,
#content-overlay #content-background-top-login,
#content-overlay #content-background-top-home {
    background: #36b7cf;
    height: 350px;
}

#content-overlay #content-background-top-login {
    background-image: url("../img/login-background-top.png");
    background-repeat: no-repeat;
    background-position: top 125px left 100px;
}

#content-overlay #content-background-top-home {
    background-image: url("../img/home-background-top.png"), url("../img/home-background-top-text.png");
    background-size: 100% auto, auto auto;
    background-repeat: no-repeat;
    background-position: bottom 0 left 0, top 70px center;
}

#content-overlay #content-background-bottom {
    flex-grow: 1;
    background-image: url("../img/background-bottom.png");
    background-repeat: repeat-x;
    background-position: bottom 40px left 70px;
}

#content-overlay #content-front {
    z-index: 1;
}

#content-overlay #content-pnl {
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    min-width: 350px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.4rem;
}

#content-overlay #content-pnl > button {
    margin-top: 26px;
    width: 70%;
    border: solid 0.5px #999999;
    background: #fcbd21;
    color: #344154;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px;
}

#footer {
    height: 80px;
    position: relative;
}

#footer-car {
    position: absolute;
    top: -38px;
    right: 130px;
}

#footer-copyright {
    margin-top: 30px;
    color: #344154;
}

.login-input {
    width: 70%;
}

.login-input label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.login-input input {
    width: 100%;
    box-sizing: border-box;
}

.login-forgot {
    margin-top: 20px;
}

.login-forgot > a {
    font-size: 1.2rem;
    color: #4d4d4d;
    text-decoration: none;
}

.login-forgot > a:hover {
    text-decoration: underline;
}

.login-msg {
    width: 70%;
    font-weight: bold;
}

.home-menu {
    padding-top: 210px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.home-menu > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    color: #344154;
    font-weight: bold;
}

.home-menu > a > div {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    filter: drop-shadow(0 0 4px #b3b3b3);
}

.home-menu > a > em {
    display: block;
    width: 120px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.home-menu-staff     > div { background-image: url("../img/home-staff.png"    ); }
.home-menu-agency    > div { background-image: url("../img/home-agency.png"   ); }
.home-menu-template  > div { background-image: url("../img/home-template.png" ); }
.home-menu-introduce > div { background-image: url("../img/home-introduce.png"); }
.home-menu-user      > div { background-image: url("../img/home-user.png"     ); }
.home-menu-master    > div { background-image: url("../img/home-master.png"   ); }
.home-menu-password  > div { background-image: url("../img/home-password.png" ); }
.home-menu-staff     > em { background: #ff97ac; }
.home-menu-agency    > em { background: #e3ba90; }
.home-menu-template  > em { background: #8cc63f; }
.home-menu-introduce > em { background: #bed036; }
.home-menu-user      > em { background: #ffc524; }
.home-menu-master    > em { background: #89b5e1; }
.home-menu-password  > em { background: #53ccda; }

.form-pnl {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: solid 1px #36b7cf;
    border-radius: 14px;
    background: #ffffff;
    padding: 40px;
}

.form-pnl > .error-msg {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.form-pnl > .normal-msg {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.form-pnl.mb20 { margin-bottom: 20px; }

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

.edit-row:nth-of-type(n+2) {
    margin-top: 10px;
}

.edit-row .row-header,
.edit-row .row-content {
    padding: 10px;
}

.edit-row .row-content {
    flex-grow: 1;
    flex-wrap: wrap;
}

.row-header {
    box-sizing: border-box;
    flex-basis: 19%;
    min-width: 100px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border: solid 1px #b5b5b5;
    border-right: none;
    padding: 5px;
    color: #212121;
}

.row-content {
    box-sizing: border-box;
    flex-basis: 79%;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    border: solid 1px #b5b5b5;
    padding: 5px;
}

.flex-gap10 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bottom-btn-pnl {
    margin-top: 40px;
}

.edit-warning {
    margin-left: 5px;
    color: #ff0000;
}

.edit-info {
    font-size: 1.2rem;
    color: #ff0000;
}

.separator {
    margin: 20px auto !important;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    max-width: 800px;
}

.separator:before, .separator:after {
    content: "";
    flex-grow: 1;
    height: 3px;
    background: #36b7cf;
    display: block;
}

.separator:before { margin-right: 20px; }
.separator:after  { margin-left:  20px; }

.pager-pnl,
.record-pnl {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.pager-pnl a,
.record-pnl a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 3em;
    height: 3em;
    padding: 0 6px;
    box-sizing: border-box;
    line-height: normal;
    text-decoration: none;
    border-radius: 11px;
    font-weight: bold;
    border: solid 1px #ffffff;
    background-color: #36b7cf;
    color: #ffffff;
}

.pager-pnl a.active,
.record-pnl a.active {
    background-color: #999999;
}

.list-count {
    border-radius: 14px;
    padding: 16px 0;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    background-color: #e6e6e6;
}
.list-count em {
    color: #f7931e;
}

.list-table {
    width: 100%;
    line-height: 1.5em;
}

.list-table th {
    border: solid 1px #36b7cf;
    color: #ffffff;
    background: #36b7cf;
    padding: 5px;
    vertical-align: middle;
}

.list-table th a {
    color: #ffffff;
}

.list-table td {
    border: solid 1px #36b7cf;
    background: #ffffff;
    padding: 5px;
    vertical-align: middle;
}

.list-table .narrow-col {
    display: none;
}

.edit-table {
    width: auto;
    min-width: 300px;
    line-height: 1.5em;
}

.edit-table th {
    border: solid 1px #b5b5b5;
    color: #212121;
    background: #f0f0f0;
    padding: 5px;
    vertical-align: middle;
    font-weight: normal;
}

.edit-table td {
    border: solid 1px #b5b5b5;
    background: #ffffff;
    padding: 5px;
    vertical-align: middle;
}

@media screen and (max-width: 800px) {

    input.input-long,
    textarea.input-long { width: 95%; }

    #header-info > ul {
        display: none;
    }

    #header-breadcrumbs {
        display: none !important;
    }

    .content-pad-sng {
        padding: 10px;
    }

    .content-pad-sng {
        padding: 10px;
    }

    .content-pad-t {
        padding: 10px 10px 0 10px;
    }

    .content-pad-b {
        padding: 10px;
    }

    h1 {
        padding-right: 0;
    }

    #content-overlay #content-background-top-home {
        background-image: url("../img/home-background-top.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: bottom 0 left 0;
    }

    #content > div:last-child {
        padding-bottom: 40px;
    }

    #content > form > div:last-child {
        padding-bottom: 40px;
    }

    #footer-car {
        right: 20px;
    }

    .home-menu {
        padding-top: 30px;
    }

    .form-pnl {
        padding: 20px 10px;
    }

    .bottom-btn-pnl {
        margin-top: 20px;
    }

    .edit-row {
        flex-direction: column;
    }

    .row-header {
        flex-basis: auto;
        border-right: solid 1px #b5b5b5;
        border-bottom: none;
    }

    .row-content {
        flex-basis: auto;
    }

    .list-table {
        margin-top: 10px;
    }

    .list-table .list-head {
        display: none;
    }

    .list-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .list-table tr {
        display: block;
        border: solid 1px #cccccc;
        border-radius: 4px;
    }

    .list-table tr:nth-of-type(n+2) {
        margin-top: 10px;
    }

    .list-table tr:not(.list-head):nth-of-type(2n) {
        background-color: #ffffff;
    }

    .list-table td {
        display: block;
        border: none;
    }

    .list-table td.txt-c {
        text-align: inherit;
    }

    .list-table td.txt-r {
        text-align: inherit;
    }

    .list-table td.narrow-txt-c {
        text-align: center;
    }

    .list-table label {
        display: inline-block;
        width: 90px;
        margin-right: 10px;
        padding: 2px;
        border: solid 1px #c7c7c7;
        border-radius: 4px;
        color: #797979;
        text-align: center;
        font-size: 1.1rem;
    }

    .list-table td.blue label {
        border: solid 1px #c8e5fa;
        background-color: #c8e5fa;
        color: #4c779b;
    }

    .list-table td.darkblue label {
        border: solid 1px #36b7cf;
        background-color: #36b7cf;
        color: #ffffff;
    }

    .list-table .normal-col {
        display: none;
    }

    .list-table .narrow-col {
        display: block;
    }

    .edit-table {
        box-sizing: border-box;
        width: 100%;
        min-width: auto;
    }

    .edit-table td input,
    .edit-table td textarea {
        box-sizing: border-box;
        width: 100%;
    }
}