@charset "utf-8";
* { margin: 0; padding: 0; }
a { text-decoration: none; }
ul, ol, li { list-style: none; }
img { vertical-align: top; border: 0; }
body { -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section { display: block; }
hr { height: 0; margin: 0; padding: 0; border: 0; }
img { max-width: 100%; height: auto; width: auto \9; }
html {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    color: #233d4d;
    font-size: 100%;
    line-height: 1.5;
}
html, body { height: 100%; min-height: 100%; background: #ffffff; }
header, main,
footer { width: 100%; margin: 0; padding: 0; display: block; clear: both; }
a { width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; line-height: 1; }
h1 { font-size: 46px; }
h2 { font-size: 32px; line-height: 1.5; }
h3 { font-size: 24px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
red { color: #DF6A6B; }
blue { color: blue; }
select { padding: 3px 0px 5px 3px; }
.posright { float: right; }
.posleft { float: left; }
.clear { clear: both; }
.textright { text-align: right; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.block { display: block; }
.inline { display: inline; }
.visible { display: block; }
.hidden { display: none; }
.printonly { display: none; }
iframe { width: 100%; height: 100%; }
form button, button { cursor: pointer; }
input[type="submit"] { cursor: pointer; }
#contentswrap {
    background: #233d4d;
    overflow: auto;
    height: 100%;
    min-height: 100%;
}
#contentswrap hr {
    clear: both;
    margin: 12px;
    border: 0;
    border-top: 1px #FFFFFF solid;
}
.gatewrap {
    margin: 0 auto;
    width: 95%;
    max-width: 1024px;
    height: 100%;
    overflow: auto;
    color: #233d4d;
    font-size: 14px;
    background: #FFFFFF;
}
.gatewrap h1 { padding-top: 24px; text-align: center; }
.gatewrap h1 img { width: 100%; max-width: 400px; height: auto; }
.gatewrap h2 {
    margin: 24px auto 12px;
    padding: 0;
    width: 90%;
    border-bottom: 2px #233d4d solid;
}
.gatewrap p { margin: 12px auto; width: 90%; text-align: left; }
.gatewrap p.caution { color: #DF6A6B; font-weight: bold; text-align: center; }

.gatewrap form { margin: 0 auto; width: 90%; }

.gatewrap form input[type="submit"] {
    margin: 36px auto;
    padding: 0.5em;
    width: 10em;
}

.gatewrap div { clear: both; display: table; margin: 30px auto; width: 90%; }
.gatewrap form.select { display: table-cell; margin: 12px auto; width: auto; }
.gatewrap form.select button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    margin: 0 auto;
    padding: 12px;
    width: 100%;
    max-width: 320px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    background: #FFFFFF;
    border: 0;
    border: 2px #233d4d solid;
}
.gatewrap form.select .patrol { color: #233d4d; background: #fff2aa; }
.gatewrap form.select .daily { background: #5fb6b8; }
.gatewrap form.select .learning { background: #3b331f; }
.gatewrap form.select .idconfig { color: #233d4d; background: #ECEEF0; }
.gatewrap form.select .bbs { background: #DF6A6B; }
.gatewrap .attention { width: 95%; max-width: 768px; margin: 0 auto; }
.gatewrap .attention h3 { margin: 24px 0 12px; font-size: 14px; }
.gatewrap .attention h4 { font-size: 12px; }
.gatewrap .attention p { font-size: 12px; text-align: left; }
.gatewrap .attention a { color: #DF6A6B; }
.gatewrap .attention a:hover,
.gatewrap .attention a:active,
.gatewrap .attention a:focus { color: #DF6A6B; text-decoration: underline; }

@media screen and (max-width: 768px) {
    .gatewrap h1 { font-size:42px; }
}
@media screen and (max-width: 410px) {
    .gatewrap h1 { font-size:30px; }
}

.gatewrap table {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 300px;
    border-spacing: 0;
    border:none;
    font-size:16px;
}
.gatewrap table thead td { color: #DF6A6B;text-align:center;font-weight:bold;font-size:14px; }
.gatewrap table th,
.gatewrap table td { border:none;padding:5px; }

.gatewrap form { margin: 26px auto; width: 90%; }
.gatewrap form.selectmane { margin: 46px auto; width: 90%; }
.gatewrap form input[type="submit"] {
    margin: 36px auto;
    padding: 10px;
    width: 288px;
}
.gatewrap table td input[type="text"],
.gatewrap table td input[type="password"] { width:100%;padding-left:10px; }