@charset "utf-8";

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

header{
  box-sizing:border-box;
  width:100%; height:86px;
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  padding:15px 25px;
  background:#fff;
  border-bottom:2px solid #6E8CC0;
}
header > #logo{
  width:320px;
  transition:0.2s ease-in;
}
header > .text-box{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  font-size:1.0em; line-height:1.6;
}
header .font-size{
  display:flex;
  align-items:flex-end;
  margin-right:2.5em;
}
header .font-size .size-label{
  font-size:0.85em;
  position:relative;
  margin-right:0.5em;
  transition:0.2s ease-in;
}
header .font-size .size-label::after{
  content:"";
  width:1.25em; height:auto;
  aspect-ratio:1/1;
  background-image:url(../../images/font-size.svg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-85%);
}
header .font-size .size-button{
  box-sizing:border-box;
  width:2.5em; height:auto;
  aspect-ratio:1/1;
  overflow:hidden;
}
header .font-size .size-button.regular{
  border-radius:5px 0 0 5px;
}
header .font-size .size-button.large{
  border-radius:0 5px 5px 0;
}
header .font-size button{
  display:block;
  box-sizing:border-box;
  width:100%; height:100%;
  background:#eee;
  border:none;
  border-radius:0;
  cursor:pointer;
  position:relative;
}
header .font-size button.active{
  background:var(--link-color);
  color:#fff;
  pointer-events:none;
}
header .size-button button::after{
  content:"";
  width:50%; height:auto;
  aspect-ratio:1/1;
  background-image:url(../../images/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%);
}
header .size-button.regular button::after{
  background-image:url(../../images/font-size-regular.svg);
}
header .size-button.regular button.active::after{
  background-image:url(../../images/font-size-regular_white.svg);
}
header .size-button.large button::after{
  background-image:url(../../images/font-size-large.svg);
}
header .size-button.large button.active::after{
  background-image:url(../../images/font-size-large_white.svg);
}

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:"\3055\307E";
  font-size:0.95em; font-weight:500;
  margin-left:0.1em;
}
header .status{
  text-align:right;
  transition:0.2s ease-in;
}

#wrapper{
  box-sizing:border-box;
  min-height:100vh;
  display:flex;
  justify-content:space-between;
  flex-direction:row-reverse;
  position:relative;
}
#wrapper #side{
  box-sizing:border-box;
  width:250px;
  padding:20px 30px 0;
  background-color:#f9f9f9;
  background-color:#ededed;
}
#side nav#side-nav{
  position:sticky;
  top:20px;
}
#side nav#side-nav > #logo,
#side nav#side-nav > ul.account{
  display:none;
}
#side ul{
  font-size:1.0em; line-height:2.4;
  text-align:left;
}
#side ul:not(:last-of-type){
  margin-bottom:1.5em;
  padding-bottom:1.5em;
  border-bottom:1px solid #ccc;
}
#side ul li{
}
#side ul li a{
  text-decoration:none;
//  font-weight:700;
  color:var(--base-color);
  position:relative;
  padding-left:1.5em;
}
#side ul li.shinmai a{
  padding-left:0;
}
#side 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%);
}
#side ul li.search01 a::before{
  content:"\e241";
}
#side ul li.search02 a::before{
  content:"\eb81";
}
#side ul li.search03 a::before{
  content:"\e867";
}
#side ul li.search04 a::before{
  content:"\e3e7";
}
#side ul li.search05 a::before{
  content:"\e8b3";
}
#side ul li.manual a::before{
  content:"\ea19";
}
#side ul li.info a::before{
  content:"\e8fd";
}
#side ul li.nie a::before{
  content:"\ef4e";
}
#side ul li.shinmai_id a::before{
  content:"\f051";
}
#side ul li.logout a::before{
  content:"\e9ba";
}
#side ul.other li a{
  font-weight:500;
}
#side ul li a:hover{
  color:var(--link-color);
}
#side ul li a img{
  width:auto; height:17px;
  margin-bottom:0.5em;
}

#side ul:has(.font-size){
  display:none;
}

#wrapper #container{
  box-sizing:border-box;
  flex:1;
  text-align:center;
  padding:30px 0 10px;
  position:relative;
}
#container #main{
/*//  width:90%;*/
  width:1100px;
  margin:0 auto;
  position:relative;
}

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

#menu-container{
	width:120px;
}

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

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