@charset "utf-8";
/* ----------------reset---------------- */
*{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;}
/* ----------------less---------------- */
@colorMain: #233d4d;
@patrol: #fff2aa;
@daily: #5fb6b8;
@learning: #3b331f;
@idconfig: #233d4d;
@bbs: #DF6A6B;
@colorVeryLight: #FFFFFF;
@colorLight: #ECEEF0;
@colorMedium: #CCCCCC;
@colorCaution: #DF6A6B;/*#D30052*/
/* ----------------set---------------- */
img{max-width:100%;height:auto;width:auto\9; /* ie8 */}
html{
    font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    color:@colorMain;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:@colorCaution}blue{color:blue}

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

/* ----------------login_gate---------------- */
body{}
#contentswrap{
    background:@colorMain;overflow:auto;
    height:100%;min-height:100%;
    hr{clear:both;margin:12px;border:0;border-top:1px @colorVeryLight solid;}
}
.gatewrap{
    margin:0 auto;
    width:95%;max-width:1024px;height:100%;overflow:auto;
    color:@colorMain;font-size:14px;
    background:@colorVeryLight;
    h1{
        padding-top:24px;text-align:center;
        img{width:100%;max-width:400px;height:auto;}
    }
    h2{
        margin:24px auto 12px;padding:0;
        width:90%;
        border-bottom:2px @colorMain solid;
    }
    p{margin:12px auto;width:90%;text-align:center;}
    p.caution{color:@colorCaution;font-weight:bold;text-align:center;}
    form{
        margin:26px auto;
        width:90%;
        label{
            clear:both;
            display:table;margin:6px auto 0;padding:0;
            width:100%;max-width:500px;
        }
        span,input:not([type="submit"]){
            display:table-cell;vertical-align:middle;
        }
        span{
            width:18%;font-size:16px;
        }
        input:not([type="submit"]){
            -webkit-appearance:none;-moz-appearance:none;appearance:none;
            -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
            margin:0;padding:0.5em 0.2em;float:right;
            width:10em;
            font-size:18px;
            border:1px @colorMain solid;
        }
        input[type="submit"]{
            -moz-appearance:none;-webkit-appearance:none;appearance:none;
            display:block;clear:both;
            color:@colorMain;font-size:22px;font-weight:bold;
            background:@colorVeryLight;
            border:1px @colorMain solid;
            -moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;
        }
    }
    form#gate{
        input[type="submit"]{
            margin:36px auto;padding:0.5em;
            width:10em;
        }
    }
    div{
        clear:both;
        display:table;margin:12px auto;
        width:90%;
    }
    form.select{
        display:table-cell;margin:12px auto;
        width:auto;
        button{
            -moz-appearance:none;-webkit-appearance:none;appearance:none;
            display:block;
            margin:0 auto;padding:12px;
            width:100%;max-width:320px;
            color:@colorVeryLight;font-size:18px;font-weight:bold;
            background:@colorVeryLight;
            border:0;border:2px @idconfig solid;
        }
        .patrol{color:@colorMain;background:@patrol;}
        .daily{background:@daily;}
        .learning{background:@learning;}
        .idconfig{color:@idconfig;background:@colorLight;}
        .bbs{background:@bbs;}
    }
    .attention{
        width:95%;max-width:768px;margin:0 auto;
        h3{margin:24px 0 12px;font-size:14px;}
        h4{font-size:12px}
        p{font-size:12px;text-align:left;}
        a{color:@colorCaution;}
        a:hover,a:active,a:focus{color:@colorCaution;text-decoration:underline}
    }
}


/* ----------------768px---------------- */
@media screen and (min-width : 768px) {
    .gatewrap{
        h1{padding:16px 0;}
        h2{margin:12px auto 0;padding:0;}
        p{text-align:center;}
        form{
            margin:36px auto;
            span{font-size:18px;}
            input:not([type="submit"]){width:80%;}
            input[type=submit]:hover,input[type=submit]:active,input[type=submit]:focus{
                color:@colorVeryLight;background:@colorMain;
            }
        }
        form#gate{
            input[type="submit"]{margin:36px auto;}
        }
        section{padding-bottom:24px;}
        form.select{
            button{margin:6px auto;}
            button:hover,button:active,button:focus{color:@colorVeryLight;background:@colorMain;}
        }
    }


}