@charset "utf-8";

html {font-size: 62.5%;}
body{font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Meiryo","メイリオ"; color: #717171; background-color: #F3F3F8;}
ul li,ol li {list-style: none;list-style-image: none;}
h1,h2,h3,h4,h5,dl,ol,ul,dd,p {padding: 0; margin: 0; font-size: 1.3rem;}

html,body {padding: 0; margin: 0; min-height: 100%; height: 100%;}
body {padding-top: 58px; min-height: 100%; height: 100%;}



/* layout
============================================== */
/*#sb-site, .sb-site-container { z-index: 5;}*/
#header{background-color: #004066;color: #FFF;width: 100%;font-size: 1.3rem;z-index: 3; position: fixed; width: 100%; left: 0; top: 0; height: 58px;}
#header.mode-public {background-color: #00B199 ;}
#header.mode-admin {background-color: #455a64 ;}

#header-gmenu {float: left; padding: 0 0 0 15px; cursor: pointer; display: none;}
#header-gmenu > i {font-size: 3.2rem; color: #fff; height: 30px;}

#header.mode-public #header-gmenu > i {color: #ffff00;}
#header.mode-admin #header-gmenu > i {color: #c5cae9;}
#header.mode-public #header-gmenu:hover > i {color: #DFDF00;}
#header.mode-admin #header-gmenu:hover > i {color: #9DA6DB;}

#header h1 {font-size: 1.8rem;float: left; padding: 15px 15px 10px 15px;}
#header h1 .site-id-name {float: left; padding-top: 3px; font-weight: normal;}
#header h1 a{ display: block; font-weight: normal; color: #fff; text-transform:capitalize;}

#header.mode-public h1 a:hover {color: #ffff00;}
#header.mode-admin h1 a:hover {color: #b0bec5;}

#change--mode {float: left;  padding-top: 11px;}
#change--mode i {font-size: 3.2rem; cursor: pointer;}

.animsition, .animsition-overlay {min-height: 100%;}

#change-mode {float: left; position: relative; top: 15px;}
#change-mode li {float: left; width: 100px;}
#change-mode li a {color: #fff; background-color: #64ffda; display: block; font-size: 1.2rem; padding: 4px 0; color: #444 ; text-align: center; margin-right: 1px;}
#change-mode li a:hover {opacity: .9;}
#change-mode li:first-child a {border-radius: 12px 0 0 12px;}
#change-mode li:last-child a {border-radius: 0 12px 12px 0; margin-right: 0; background-color: #c5cae9;}

#change-mode li.public-hit a {background-color: #ffff00   ; color: #444;}
#change-mode li.admin-hit a {background-color: #ffff00    ; color: #444;}

#contents {padding-top: 34px;}


/*アラートアイコンなど*/
#header-nav {float: right; padding-top: 10px;}
#header-nav > li {float: right; position: relative;}
#header-nav > li > a {display: block;padding: 7px 8px;text-decoration: none;}
#header-nav > li > a i {font-size: 3rem;  color: #fff;}
#header-nav > li .count {background-color: #f44336 ; width: 20px; height: 20px; border-radius: 50%; display: block; text-align: center; line-height: 20px; position: absolute; right: 0; top: 0; font-size: 1.1rem;}
#header-nav > li a:hover{}



/* ヘッダーの社員情報
================== */
/*.header-user { float: left; padding: 10px 10px 10px 10px;}
.header-user > dl {display: inline-block; color: #333; line-height: 1.5; padding-top: 15px; padding-left: 10px;}
.header-user .circle-pic {width: 62px; height: 62px; float: left;}*/

#header-user {cursor: pointer; float: right; margin-left: 10px; position: relative; padding: 7px 20px;}
#header-user:hover {background-color: rgba(0,0,0,.2);}
#header-user .circle-pic{width: 43px; height: 43px; float: right;}
#header-user .user-info {padding-top: 4px; color: #fff; float: left; font-size: 1.2rem; margin-right: 10px;}
#header-user .user-info dt {font-weight: normal; font-size: 1.1rem;}
#header-user .user-info dd {font-weight: bold;}

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
	border-radius: 50%;
    display: block;
    background-color: #607d8b;
    text-align: center;
    color: #fff;
    width: 34px;
    height: 34px;
    text-decoration: none;
}
.pagetop a:after {content: " \f106";font-family: FontAwesome; line-height: 30px; font-size: 1.8rem;}
.pagetop a:hover {background-color: #426170;color: #fff;}

.mobpagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 30px;
}
.mobpagetop a {
	border-radius: 50%;
    display: block;
    background-color: #607d8b;
    text-align: center;
    color: #fff;
    width: 40px;
    height: 40px;
    text-decoration: none;
}
.mobpagetop a:after {content: " \f106";font-family: FontAwesome; line-height: 30px; font-size: 1.8rem;}
.mobpagetop a:hover {background-color: #426170;color: #fff;}