@charset "UTF-8";
/* CSS Document */

@media print, screen and (min-width:980px) {

.global-nav,
.hamburger {
display: none;
}

#header {
position: fixed;
background: #fff;
width: 100%;
height: 66px;
margin: 0 auto;
box-shadow: 2px 2px 8px #ddd;
z-index: 5;
}

#loginHeader {
background: #fff;
width: 100%;
height: 96px;
margin: 0 auto;
box-shadow: 2px 2px 8px #ddd;
z-index: 5;
}

#logo {
position: absolute;
width: 120px;
top: 12px;
left: 20px;
}

#logoCe {
position: absolute;
width: 120px;
top: 10px;
left: 0;
right: 0;
margin: auto;
}

#home a {
position: absolute;
display: block;
width: 100px;
height: 66px;
color: #2f2f2f;
font-weight: 600;
padding: 12px 0;
border-left: 1px solid #ddd;
line-height: 1.6;
top: 0;
right: 290px;
}

#manual a {
position: absolute;
display: block;
width: 100px;
height: 66px;
color: #2f2f2f;
font-weight: bold;
padding: 12px 0;
border-left: 1px solid #ddd;
line-height: 1.6;
top: 0;
right: 190px;
}

#home a span,
#manual a span {
display: block;
}

#userMenu a span {
display: block;
font-size: 11px;
}

#home a .fas,
#manual a .fas,
#userMenu a .fas {
font-size: 22px;
color: #4caf93;
}

#userMenu a .fas {
position: relative;
float: left;
font-size: 26px;
color: #4caf93;
margin-right: 7px;
top: 3px;
}

#userMenu a .userFl {
float: left;
font-size: 10px;
padding-right: 10px;
}

#userMenu a .fa-sort-down {
position: relative;
top: -3px;
}

#home a:hover,
#manual a:hover,
#userMenu a:hover {
color: #fff !important;
text-decoration: none;
background: #4caf93;
}

#home a:hover .fas,
#manual a:hover .fas,
#userMenu a:hover .fas {
color: #fff !important;
}

/**/

#userMenu {
position: absolute;
width: 200px;
margin: 0;
padding: 0;
top: 0;
right: 0;
}

.over_text{
  white-space: nowrap;
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#userMenu li {
position: relative;
margin: 0;
padding: 0;
}

#userMenu li a {
display: block;
width: 190px;
height: 66px;
font-size: 11px;
text-align: left;
color: #2f2f2f;
font-weight: bold;
padding: 15px 0 13px 30px;
border-left: 1px solid #ddd;
line-height: 1.5;
}

#userMenu li ul {
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 10;
}

#userMenu li:last-child ul {
right: 0%;
width: 100%;
}

#userMenu li ul li {
overflow: hidden;
width: 200%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
box-shadow: 2px 2px 8px #ddd;
}

#userMenu li ul li a {
padding: 10px 15px;
background: #fff;
height: 40px;
text-align: left !important;
font-size: 11px;
color: #2f2f2f;
}

#userMenu li ul li a .fas {
position: relative;
font-size: 14px;
top: 1px;
}

#userMenu li:hover > a {
background: #4caf93;
color: #fff;
}

#userMenu li:hover ul li {
overflow: visible;
height: 40px;
border-bottom: 1px solid #ddd;
}

#userMenu li:hover ul li:first-child {
border-top: 0;
}

#userMenu li:hover ul li:last-child {
border-bottom: 0;
}

#userMenu li:hover > a .fas {
color: #fff !important;
}

#leftNavi li a.activeNav {
background: #4caf93;
color: #fff;
font-weight: 600;
}

#leftNavi li a.activeNav .fas {
color: #fff;
}

#home a.activeNav,
#home a.activeNav .fas {
background: #4caf93;
color: #fff;
font-weight: 600;
}

#home a.activeNav .fas {
color: #fff;
}

/**/

#infoSystem {
position: absolute;
background: #4caf93;
width: 190px;
font-size: 11px;
color: #fff;
font-weight: 600;
text-align: center;
padding: 1px 0 2px 0;
border-radius: 5px;
top: 22px;
left: 160px;
letter-spacing: 0;
}

#infoSystemCe {
position: absolute;
background: #4caf93;
width: 190px;
font-size: 11px;
color: #fff;
font-weight: 600;
text-align: center;
padding: 1px 0 2px 0;
border-radius: 5px;
top: 60px;
left: 0;
right: 0;
margin: auto;
letter-spacing: 0;
}

#leftNavi {
position: fixed;
float: left;
background: #fff;
min-width: 14%;
height: 100%;
text-align: left;
border-right: 1px solid #ddd;
top: 66px;
z-index: 0;
}

#leftNavi ul li a {
display: block;
color: #2f2f2f;
font-weight: bold;
padding: 10px 20px;
border-bottom: 1px solid #ddd;
line-height: 1;
}

#leftNavi ul li a span {
position: relative;
top: -2px;
margin-left: 5px;
}

#leftNavi ul li a i {
color: #4caf93;
font-size: 18px;
}

#leftNavi ul li a:hover {
text-decoration: none;
background: #4caf93;
color: #fff;
}

#leftNavi ul li a:hover .fas {
color: #fff !important;
}

/**/

#leftNavi ul li ul li {
text-indent: 27px;
}

.accordion-trigger {
position: relative;
cursor: pointer;
}

.accordion {
display: none;
}

.accordion-trigger:after {
position: absolute;
font-family:'Font Awesome 5 Free';
top: 10px;
right: 12px;
content: '\f0dd';
font-size: 12px;
color: #4caf93;
}

.accordion-trigger:hover:after {
color: #fff !important;
}

.accordion-trigger.active:after {
position: absolute;
font-family:'Font Awesome 5 Free';
top: 14px;
right: 12px;
content: '\f0de';
font-size: 12px;
color: #4caf93;
}

/**/

#naviBottom {
position: absolute;
background: #f3f3f3;
width: 100%;
border-top: 1px solid #ddd;
bottom: 102px;
left: 0;
}

#naviBottom ul li a {
background: #f3f3f3;
display: block;
color: #2f2f2f;
font-weight: bold;
padding: 10px 20px;
border-bottom: 1px solid #ddd;
line-height: 1;
}

#naviBottom .fas {
color: #999;
}

}

/**/

@media only screen and (min-width:0px) and (max-width:979px) {

#header {
position: relative;
background: #fff;
width: 100%;
height: 80px;
margin: 0 auto;
box-shadow: 2px 2px 8px #ddd;
z-index: 5;
}

#loginHeader {
background: #fff;
width: 100%;
height: 80px;
margin: 0 auto;
box-shadow: 2px 2px 8px #ddd;
z-index: 5;
}

#logo {
position: absolute;
width: 110px;
top: 10px;
left: 20px;
}

#logoCe {
position: absolute;
width: 110px;
top: 10px;
left: 0;
right: 0;
margin: auto;
}

#home,
#manual,
#userMenu {
display: none;
}

/**/

#infoSystem {
position: absolute;
background: #4caf93;
width: 170px;
font-size: 10px;
color: #fff;
font-weight: 600;
text-align: center;
padding: 1px 0 2px 0;
border-radius: 5px;
top: 50px;
left: 20px;
letter-spacing: 0;
}

#infoSystemCe {
position: absolute;
background: #4caf93;
width: 170px;
font-size: 10px;
color: #fff;
font-weight: 600;
text-align: center;
padding: 1px 0 2px 0;
border-radius: 5px;
top: 50px;
left: 0;
right: 0;
margin: auto;
letter-spacing: 0;
}

#leftNavi {
position: fixed;
right: -320px; /* これで隠れる */
top: 0;
width: 300px; /* スマホに収まるくらい */
height: 100vh;
text-align: left;
padding-top: 44px;
padding-bottom: 44px;
background-color: #fff;
transition: all .6s;
z-index: 200;
overflow-y: scroll; /* メニューが多くなったらスクロールできるように */
}

#leftNavi ul li a {
display: block;
color: #2f2f2f;
font-weight: bold;
padding: 10px 20px;
border-bottom: 1px solid #ddd;
line-height: 1;
}

#leftNavi ul li a span {
position: relative;
top: -2px;
margin-left: 5px;
}

#leftNavi ul li a i {
color: #4caf93;
font-size: 18px;
}

#leftNavi ul li a:hover {
text-decoration: none;
}

/**/

#leftNavi ul li ul li {
text-indent: 27px;
}

.accordion-trigger {
position: relative;
cursor: pointer;
}

.accordion {
display: none;
}

.accordion-trigger:after {
position: absolute;
font-family:'Font Awesome 5 Free';
top: 10px;
right: 12px;
content: '\f0dd';
font-size: 12px;
color: #4caf93;
}

.accordion-trigger.active:after {
position: absolute;
font-family:'Font Awesome 5 Free';
top: 14px;
right: 12px;
content: '\f0de';
font-size: 12px;
color: #4caf93;
}

/**/

.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
.hamburger__line {
  position: absolute;
  left: 11px;
  width: 28px;
  height: 2px;
  background-color: #4caf93;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 26px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open #leftNavi {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}

}