/***********************************************/
/* HTML tag styles                             */
/***********************************************/
html { font-size: 100%; }
body {
    font-family: Meiryo, メイリオ, "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'MS Gothic', sans-serif;
    color: #333333;
    line-height: 1.166rem;
    margin: 0 auto;
    padding: 70px 0;
}

* {
    box-sizing: border-box;
}

textarea, input {
    font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'MS Gothic', sans-serif;
}

header, footer {
    position: fixed;
    left: 0;
    width:100%;
    min-width: 640px;
    max-width: 1280px;
    display: -webkit-flex;
    display: flex;
    z-index: 100;
    background-color: white;
}
header {
    top: 0;
    height: 70px;
    padding: 10px 10px 10px 5px;
    justify-content: space-between;
    align-items: center;
    border-bottom:dotted 1px #006600;
}
footer {
    bottom: 0;
    height: 40px;
    padding-top: 10px;
    padding-right: 10px;
    border-top:dotted 1px #006600;
    justify-content: flex-end;
    font-size: 0.8rem;
}

h2 {
    font-size: 1.2em;
    color: #006600;
}

.container {
    position: absolute;
    display: flex;
    min-width: 1000px;
    height: auto !important;
    height: 100vh;
    margin:0 auto;
    padding: 0;
    background-color: white;
    justify-content: flex-start;
    align-content: flex-start;
}

select {
    font-size:1.1em;
    padding: 1px 4px;
}

a:link, a:visited, a:hover { color: #006699; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

.login #wrapper {
    margin: 100px auto 50px auto;
}

.login #wrapper hr {
    width:450px;
    margin:auto;
    height:5px;
    background-color:#66cc66;
    border:0;
}
.login #wrapper table {
    width:450px;
    margin:5px auto;
    border-collapse:separate;
    border-spacing:3px;
}
.login #wrapper th {
    min-width:150px;
    padding:10px;
    background-color: #66cc66;
}
.login #wrapper td {
    min-width: 280px;
    padding-left:10px;
    border-bottom: dotted 2px #669966;
}
.login #wrapper input[type="text"],
.login #wrapper input[type="password"] {
    width: 220px;
}
.buttons {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
input[type="submit"] {
    padding: 6px 12px;
}

.flash_message {
    width: 100%;
    margin-top: 1.0em;
    text-align: center;
    font-size: 1.0em;
    color: #ff3333;
    font-weight: bold;
}

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.small {
    font-size: 0.9em;
}
.red,
.error {
    color: #ff3333;
}
.error {
    font-weight: bold;
    font-size: 0.9em;
}
.hidden {
    display: none;
}


article.main {
    margin-top: 4px;
    margin-bottom: 80px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
}

.navigation {
    margin-left:2px;
    margin-right:12px;
    width:200px;
}
.navigation dt.menu {
    width: 100%;
    color: white;
    font-size: 1.0em;
    font-weight: bold;
    background-color:#339933;
    border-bottom: solid 2px white;
    padding: 8px;
    cursor: pointer;
}
.navigation>dl>dd {
    padding-left: 16px;
    padding-bottom: 12px;
}
.navigation>dl>dd dl dd {
    margin-top: 12px;
    cursor: pointer;
    color: #339933;
    font-weight: bold;
    text-decoration: none;
}

.navigation dt:hover,
.navigation dt.selected {
    background-color:#66cc66;
}
.navigation>dl>dd dl dd:hover {
    color: #996633;
    text-decoration: underline;
}

.main #wrapper {
    width: calc(100% - 220px);
    margin-top: 8px;
}

.main #wrapper hr {
    display: block;
    height: 1px;
    border: dotted 2px #339933;
}

.main #wrapper div.entry,
.main #wrapper div.search {
    max-width: 900px;
}
.main #wrapper div.entry table.item-input {
    border:dotted 1px #339933;
 }

.main #wrapper div.entry table.item-input th,
.main #wrapper div.entry table.item-input td,
.main #wrapper div.search table.item-input th,
.main #wrapper div.search table.item-input td {
    padding: 6px 8px;
}
.main #wrapper div.entry table.item-input th,
.main #wrapper div.entry table.item-input td {
    vertical-align: top;
}
.main #wrapper div.entry table.item-input th {
    font-size: 1.1rem;
}
.main #wrapper div.entry table.item-input td {
    font-size: 1.0rem;
}
.main #wrapper div.entry table.item-input th,
.main #wrapper div.search table th {
    background-color: #33bb33;
    border-bottom:dotted 1px white;
    color: white;
    font-weight: bold;
}
.main #wrapper div.entry table.item-input th {
    min-width: 210px;
    max-width: 250px;
    text-align: right;
 }
.main #wrapper div.entry table.item-input td {
    min-width: 460px;
    max-width: 640px;
    border-bottom:dotted 1px #339933;
 }
.main #wrapper div.entry table.item-input table,
.main #wrapper div.entry table.item-input table td {
    border:0;
}
.main #wrapper div.entry table.item-input table td {
    min-width: auto;
    padding:3px;
    font-size: 1.0rem;
}
input[type="text"],
input[type="password"] {
    font-size: 1.1rem;
}
.main #wrapper div.entry>table.item-input td table td.label {
    font-size: 0.9rem;
    text-align:right;
}
.main #wrapper div.entry>table td.last {
    border-bottom:none;
 }
.main #wrapper div.entry>table input[type="password"] {
    min-width: 300px;
}
.main #wrapper div.entry>table td span.error {
    font-size: 0.8rem;
}

.main #wrapper div.entry ul {
    max-width: 500px;
    margin-left: 12px;
}
.main #wrapper div.entry ul.list {
    max-height: 460px;
    border-top: solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;
    overflow-x: hidden;
    overflow-y: scroll;
}
.main #wrapper div.entry li {
    list-style-type: none;
    font-size: 1.1em;
    margin: 10px auto;
    padding: 8px 0;
    border-bottom: dotted 1px #339933;
    cursor: pointer;
}
.main #wrapper div.entry ul.list li {
    padding-left: 16px;
}
.main #wrapper div.entry li.anchor {
    color: #003eff;
}

.main #wrapper div.entry input[type="text"].narrow {
    min-width: 40px;
    max-width: 80px;
}
.main #wrapper div.entry input[type="text"].wide {
    min-width: 300px;
    max-width: 500px;
}


.main #wrapper div.search div.list {
    max-width:720px;
    max-height: 460px;
    overflow-x: hidden;
    overflow-y: scroll;
    border:solid 1px #339933;
}
.main #wrapper div.search table {
    min-width: 700px;
}
.main #wrapper div.search table thead {
    background-color: #33bb33;
}
.main #wrapper div.search table th {
    border-right: dotted 1px white;
    padding: 6px 0;
    color: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}
.main #wrapper div.search table td {
    border-right: dotted 1px #339933;
    border-bottom: solid 1px #339933;
    padding: 6px 4px 6px 4px;
}

.main #wrapper div.buttons {
    width: 100%;
}
.main #wrapper div.buttons input[type='button'] {
    margin: auto 12px;
    min-width: 80px;
    font-size: 1.0em;
    padding: 4px 10px;
}

.mid_width {
    min-width: 180px;
    max-width: 250px;
}

div.main_menu {
    max-width:900px;
    margin-top: 10px;
    padding:2px;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}
div.main_menu table {
    width:220px;
    height: 288px;
    margin-right:2px;
    border:solid 1px #393;
}
div.main_menu table th {
    color:white;
    height:32px;
    background-color:#393;
    vertical-align: middle;
}
div.main_menu table td {
    padding:6px 0 0 6px;
}
div.main_menu table td a { color:#060; }

.clear { clear: both; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.bold { font-weight: bold; }
.error { color:#FF0000; }
.m-auto { margin: auto; }
.mt-03px { margin-top: 3px; }
.mt-05px { margin-top: 5px; }
.mt-10px { margin-top: 10px; }
.mt-15px { margin-top: 15px; }
.mt-30px { margin-top: 30px; }
.ml-10px { margin-left: 10px; }
.ml-15px { margin-left: 15px; }
.ml-20px { margin-left: 20px; }
.ml-50px { margin-left: 50px; }
.p-03px { padding: 3px; }
.p-05px { padding: 5px; }
.p-0305px { padding: 3px 5px 3px 5px; }
.pt-03px { padding-top: 3px; }
.pt-05px { padding-top: 5px; }
.pt-08px { padding-top: 8px; }
.pt-10px { padding-top: 10px; }
.pt-15px { padding-top: 15px; }
.pl-05px { padding-left: 5px; }
.pl-10px { padding-left: 10px; }
.pl-15px { padding-left: 15px; }
.pl-20px { padding-left: 15px; }
.pl-40px { padding-left: 40px; }
.pb-05px { padding-bottom: 5px; }
.f-08pt { font-size: 8pt; }
.f-09pt { font-size: 9pt; }
.f-10pt { font-size: 10pt; }
.f-11pt { font-size: 11pt; }
.f-12pt { font-size: 12pt; }

#loading-bg, #loading-view {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
#loading-bg {
    z-index: 10000;
    background-color: #000000;
    filter: alpha(opacity=5);
    -moz-opacity: 0.05;
    -khtml-opacity: 0.05;
    opacity: 0.05;
}
#loading-view {
    z-index: 10001;
    background-image: url('../img/progress.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}