/* =======================================
	ヘッダー
======================================= */
img{
  width:auto;
  max-width:100%;
}
#header-box {
  padding:40px;
  text-align:center;
}

ul.login_user {
  margin: 0px 0px;
  float:right;
  display:table;
}
ul.login_user li {
  margin:0;
  display:table-cell;
  color:#fff;
  padding-right:10px;
  vertical-align:middle;
  line-height:50px;
}
#login ul.login_user {
  display:none;
}
/* =======================================
	共通
======================================= */
input[type="button"], input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="image"], input[type="email"], select, textarea {
  -webkit-appearance: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  outline: 0;
  margin: 0;
  padding:5px;
}
input[type='text'],
input[type='password'] {
    border: solid 1px #ccc;
}
.errField{
 background-color:#ffcccc;
}
input.col10 {
  width:10%;
}
input.col30 {
  width:30%;
}
input.col40 {
  width:50%;
}
input.col40 {
  width:40%;
}
input.col90 {
  width:90%;
}
input.colmax {
  width:100%;
}
.atten,
.err{
  color:#ff3333;
}
/* =======================================
	ログイン画面
======================================= */
#login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
  width:50%;
  background:#f8f8f8;
  padding:4%;
  box-shadow:0px 0px 3px #ccc;
  max-width:500px;
}
#login-box dl dt{
  padding-bottom:40px;
  text-align:center;
}
#login-box dl dd{
  margin:0 0 15px;
}
#login-box dl dd.err-box{
  border:1px solid #ff3333;
  background:#ffeeee;
  padding:10px;
}
#login-box .actions {
  text-align:right;
}
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
  #login-box {
    width:80%;
  }
  #section-box {
    margin:0 2% 2%;
    background:#f8f8f8;
    padding:3%;
  }
}

/* =======================================
	PDF
======================================= */
.pdf-list{
  margin-top: 30px;
  position: relative;
  width: 100%;
}
.pdf-list div.pdf-button{
  padding-bottom: 10px;
  position: relative;
  width: 50%;
}
.pdf-list div.pdf-button:nth-of-type(5),
.pdf-list div.pdf-button:nth-of-type(6),
.pdf-list div.pdf-button:nth-of-type(7){
  width: 100%;
}
.pdf-list a{
  display: inline-block;
  font-size: 16px;
  color: #036;
}
@media only screen and (max-width: 767px) {
  .pdf-list a{
    font-size: 14px;
  }
}
.pdf-list a:hover {
  color: #366;
}
.flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  -ms-justify-content: left;
  justify-content: left;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position:relative;
}
/* =======================================
	button
======================================= */
.icon::after{
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-weight: 900;
}
.icon.right::after{
  margin-left: 20px;
  content: "\f138";
  color: #036;
}
.icon.pdf::after{
  margin-right: 10px;
  content: "\f1c1";
  color: #036;
}