* {
    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: #212121;
}

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

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

em { font-style: normal; }

a { color: #2296b9; }
a.btn: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; }
.mt10 { margin-top: 10px; }
.mt40 { margin-top: 40px; }
.mr10 { margin-right: 10px; }
.mr5 { margin-right: 5px; }
.ml10 { margin-left: 10px; }
.ml5 { margin-left: 5px; }
.mb10 { margin-bottom: 10px; }
.mb40 { margin-bottom: 40px; }

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

.ajaxfile { display:inline-block; }

.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: 4px;
}
a.btn.min,
a.btn.normal,
a.btn.wide { display: inline-block; }

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

.btn.normal {
    font-size:1.4rem;
    padding: 4px 12px;
    box-shadow: 2px 2px 5px 0px #999999;
}

.btn.wide {
    font-size:1.4rem;
    height: 2.5em;
    width: 180px;
    box-shadow: 2px 2px 5px 0px #999999;
}
a.btn.wide {
    text-align: center;
    line-height: 2.5em;
}

.btn.green  { background-color: #2c68db; color: #ffffff; border: solid 1px #2c68db; }
.btn.white  { background-color: #ffffff; color: #7e7e7e; border: solid 1px #cccccc; }
.btn.yellow { background-color: #f7b829; color: #ffffff; border: solid 1px #f7b829; }
.btn.red    { background-color: #ff4040; color: #ffffff; border: solid 1px #ff4040; }

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

    .ajaxfile .ajaxfile-downloadpnl img { width: 100%; }

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

#common-wrapper {
    height: 100%;
    background: #414C4E;
    display: flex;
    justify-content: center;
    align-items: center;
}

#common-pnl {
    background-color: #000000;
    color:#ffffff;
    width: 400px;
    padding: 30px;
    margin: 20px;
    border-radius: 6px;
    text-align: center;
}

#common-logo {
    margin-top: 40px;
    margin-bottom: 30px;
}

.common-error {
    font-size: 1.8rem;
    line-height: 1.5em;
    margin-bottom: 40px;
}

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

    #common-pnl {
        width: auto;
    }

    #common-logo {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .common-error {
        margin-bottom: 20px;
    }
}