﻿@charset "utf-8";

.test-mode{
  margin-top:3em;
  margin-bottom:-2em;
  font-size:0.9em; line-height:1.8;
}
#hamburger{
  width:54px; height:54px;
  position:fixed;
  top:0px; right:0px; z-index:1002;
  background: #6E8CC0;
}
#hamburger .drawer-hamburger{
  background-color: #6E8CC0;
  box-sizing:border-box;
  width:100%; height:100%;
  top:0; right:0;
  padding:0;
}
/*
#hamburger .drawer-hamburger::before{
  content:"MENU";
  position:absolute;
  top:50%; left:0;
  font-size:0.7em; line-height:1;
  color:var(--base-color);
  width:100%;
  text-align:center;
  transform:translateY(1.5em);
}
*/
#hamburger .drawer-hamburger .drawer-hamburger-icon{
  width:44%;
  position:absolute;
  top:50%; left:28%;
  transform:translateY(-50%);
}
#hamburger .drawer-hamburger .drawer-hamburger-icon,
#hamburger .drawer-hamburger .drawer-hamburger-icon::before,
#hamburger .drawer-hamburger .drawer-hamburger-icon::after{
  background-color:var(--base-color);
  background-color:#fff;
}
#hamburger .drawer-hamburger .drawer-hamburger-icon::before{
  top:-9px;
}
#hamburger .drawer-hamburger .drawer-hamburger-icon::after{
  top:9px;
}
.drawer-open #hamburger .drawer-hamburger .drawer-hamburger-icon{
  background-color:transparent;
}
.drawer-open #hamburger .drawer-hamburger .drawer-hamburger-icon::before,
.drawer-open #hamburger .drawer-hamburger .drawer-hamburger-icon::after{
  top:0;
  width:100%;
}

header{
  box-sizing:border-box;
  width:100%; height:54px;
  display:flex !important;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  padding:0 0 0 10px;
  background:#fff;
  /*border-bottom:2px solid #2B92D1;*/
  border-bottom:2px solid #6E8CC0;
}
header > #logo{
  width:300px;
  height: 100%;
  transition:0.2s ease-in;
}
header > .text-box {
  padding-right: 10px;
  font-size: 0.8em;
}
header > .text-box > .account > .user {
  display: grid;
  text-align: right;
}
header > .text-box > .account > .user > a {
  margin: 0;
}
header ul.account li.user span {
  font-weight: 700;
}
header ul.account li.user span::after {
  content: "さま";
  font-size: 0.75em;
  font-weight: 500;
  margin-left: 0.1em;
}

#wrapper{
  box-sizing:border-box;
  min-height:100vh;
  position:relative;
}
/*
#wrapper #side{
  box-sizing:border-box;
  width:250px;
  padding:20px 30px;
  background-color:#f9f9f9;
  background-color:#ededed;
}
*/
.drawer-nav{
  position:fixed;
  top:0; z-index:1001;
  width:100%;
  /*height:100vh;*/
  background-color:#fff;
}
.drawer-nav #side-nav{
  width:98%;
  position:absolute;
  top:20%; left:2%;
  /*transform:translate(0,-55%) translateZ(0) !important;*/
}
.drawer-nav #side-nav #logo{
  width:70%;
  margin:0 auto 1.5em 0;
}
.drawer-nav #side-nav > ul{
  margin:0 auto;
  font-size:1.0em; line-height:2.5;
  text-align:left;
}
.drawer-nav #side-nav > ul.account{
  line-height:1.6;
}
.drawer-nav #side-nav > ul.account li.user span{
  font-weight:700;
  position:relative;
}
.drawer-nav #side-nav > ul.account li.user span::after{
  content:"さま";
  font-size:0.95em; font-weight:500;
  margin-left:0.1em;
}
.drawer-nav #side-nav > ul:not(:last-of-type){
  margin-bottom:1.0em;
  padding-bottom:1.0em;
  border-bottom:1px solid #ccc;
}
.drawer-nav #side-nav > ul > li a{
  text-decoration:none;
//  font-weight:700;
  color:var(--base-color);
  position:relative;
  /*padding-left:1.5em;*/
}
.drawer-nav #side-nav > ul > li.shinmai a{
  padding-left:0;
}
.drawer-nav #side-nav > ul > li a::before{
  font-family:var(--icon-font);
  content:"";
  font-size:1.25em; line-height:1; font-weight:500;
  position:absolute;
  top:50%; left:0;
  transform:translateY(-50%);
}
.drawer-nav #side-nav > ul > li.search01 a::before{
  content:"\e241";
}
.drawer-nav #side-nav > ul > li.search02 a::before{
  content:"\eb81";
}
.drawer-nav #side-nav > ul > li.search03 a::before{
  content:"\e867";
}
.drawer-nav #side-nav > ul > li.search04 a::before{
  content:"\e3e7";
}
.drawer-nav #side-nav > ul > li.search05 a::before{
  content:"\e8b3";
}
.drawer-nav #side-nav > ul > li.manual a::before{
  content:"\ea19";
}
.drawer-nav #side-nav > ul > li.info a::before{
  content:"\e8fd";
}
.drawer-nav #side-nav > ul > li.nie a::before{
  content:"\ef4e";
}
.drawer-nav #side-nav > ul > li.shinmai_id a::before{
  content:"\f051";
}
.drawer-nav #side-nav > ul > li.logout a::before{
  content:"\e9ba";
}
.drawer-nav #side-nav > ul > li a:hover{
  color:var(--link-color);
}
.drawer-nav #side-nav > ul > li a img{
  width:auto; height:17px;
  margin-bottom:0.5em;
}

.font-size{
  display:flex;
  align-items:flex-end;
  margin-right:2.5em;
}
.font-size .size-label{
  font-size:0.85em; line-height:1.6;
  position:relative;
  margin-right:0.5em;
  transition:0.2s ease-in;
}
.font-size .size-label::after{
  content:"";
  width:1.25em; height:auto;
  aspect-ratio:1/1;
  background-image:url(../../img/font-size.svg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-85%);
}
.font-size .size-button{
  box-sizing:border-box;
  width:2.5em; height:auto;
  aspect-ratio:1/1;
  overflow:hidden;
}
.font-size .size-button.regular{
  border-radius:5px 0 0 5px;
}
.font-size .size-button.large{
  border-radius:0 5px 5px 0;
}
.font-size button{
  display:block;
  box-sizing:border-box;
  width:100%; height:100%;
  background:#eee;
  border:none;
  border-radius:0;
  cursor:pointer;
  position:relative;
}
.font-size button.active{
  background:var(--link-color);
  color:#fff;
  pointer-events:none;
}
.size-button button::after{
  content:"";
  width:50%; height:auto;
  aspect-ratio:1/1;
  background-image:url(../../img/font-size-regular.svg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.size-button.regular button::after{
  background-image:url(../../images/font-size-regular.svg);
}
.size-button.regular button.active::after{
  background-image:url(../../images/font-size-regular_white.svg);
}
.size-button.large button::after{
  background-image:url(../../images/font-size-large.svg);
}
.size-button.large button.active::after{
  background-image:url(../../images/font-size-large_white.svg);
}

#wrapper #container{
  box-sizing:border-box;
  text-align:center;
  padding:30px 0 20px;
  position:relative;
}

@media screen and (max-width: 767px) {
  #container #main{
    width:98%;
    margin:0 auto;
    position:relative;
  }
}
@media screen and (min-width: 768px) {
  #container #main{
    width:90%;
    margin:0 auto;
    position:relative;
  }

  table.search-table tr td {
    display: block;
    width: calc(100% - 0.5em);
    padding: 0 0 1.0em 0.5em;
  }

  ul.input-list.range-select-list {
    align-items: center;
    display: block;
  }

  ul.input-list.range-select-list.era-select li {
    margin: 0.2em 0;
    display: inline-block;
  }

  .dateInput {
    width: 100px !important;
  }


}

footer{
  width:90%;
  font-size:0.8em; line-height:1.8;
  padding:4em 0 0;
  margin:0 auto;
}

#menu-container{
	width:120px;
}

.black-button{
	width:108px;
	height:36px;
}

.sp-block{display:block !important;}
.sp-none{display:none !important;}
.black-button span::before{
  font-family: var(--icon-font);
  content: "\e8b6";
  position: absolute;
  left: 12px;
}
@media screen and (max-width: 767px) {
  .era-radio-li {
    display: block !important;
  }

  /*.era-radio-ul {*/
  /*  display: block !important;*/
  /*}*/

  .era-radio-ul1 {
    display: inline-block !important;
  }
}

