@charset "utf-8";

.test-mode{
  margin-top:3em;
  margin-bottom:-2em;
  font-size:0.9em; line-height:1.8;
}
nav#fixed-nav{
  display:none;
}

#hamburger{
  width:72px; height:72px;
  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:72px;
  display:flex !important;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  padding:0 25px;
  background:#fff;
  border-bottom:2px solid #6E8CC0;
}
header > #logo{
  width:280px;
  transition:0.2s ease-in;
}
header > .text-box{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  font-size:0.95em; line-height:1.6;
}
header .font-size{
  display:none;
}
header ul.account{
  text-align:right;
}
header ul.account li.user{
  transition:0.2s ease-in;
}
header ul.account li.user span{
  font-weight:700;
//  padding-left:1.9em;
  position:relative;
}
/*
header ul.account li.user span::before{
  font-family:var(--icon-font);
  content:"\e7fd";
  font-size:1.6em; line-height:1;
  position:absolute;
  top:50%; left:0;
  transform:translateY(-52%);
}
*/
header ul.account li.user span::after{
  content:"さま";
  font-size:0.95em; font-weight:500;
  margin-left:0.1em;
}

header ul.account li.user .logout::before{
  content: "\e9ba";
  font-family: 'Material Icons';
  font-size: 1.25em;
  line-height: 1;
  font-weight: 500;
  position: relative;
  top: 4px;
  left: 0;
}

header .status{
  text-align:right;
  transition:0.2s ease-in;
}

#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:60%; */
  /*left:50%;*/
  /*transform:translate(-50%,-55%) translateZ(0) !important;*/
  top:20%;
  left:2% !important;
}
.drawer-nav #side-nav > ul.account{
  display:none;
}
.drawer-nav #side-nav #logo{
  width:300px;
  margin:0 auto 1.5em;
}
.drawer-nav #side-nav > ul{
  /*width:300px;*/
  margin:0 auto;
  font-size:1.1em; line-height:2.4;
  text-align:left;
}
.drawer-nav #side-nav > ul:not(:last-of-type){
  margin-bottom:1.5em;
  padding-bottom:1.5em;
  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;
}
#container #main{
  width:90%;
  margin:0 auto;
  position:relative;
}

footer{
  font-size:0.8em; line-height:1.8;
  padding:4em 0 0;
}

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

.black-button span::before{
  font-family: var(--icon-font);
  content: "\e8b6";
  position: absolute;
  left: 12px;
}