body{
  /* background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%); */
  background: #f5f5f5;
}
.login-box2{/*上*/
  height: 80px;/*ボックスの高さ*/
  width: 518px;/*ボックスの幅*/
  padding: 0px;
  position: absolute;
  left: 200px;
  top: 27%;
  margin-top: -150px;/*ボックスの高さの半分*/
  margin-left: -200px;/*ボックスの幅の半分*/
  background-repeat: no-repeat;
  text-align: center;
  background: #333;
  /* box-shadow: 2px 2px 6px gray; */
  /* background-color: rgba( 255, 255, 255, 0.25 ); */
  background : linear-gradient(to bottom, rgba(0, 0, 0, 0.56), #333, rgba(0, 0, 0, 0.56));
  /* background: linear-gradient(to top, #333 0%,#d4d9df 50%, #333 100%); */
  /* background-image: linear-gradient(-50deg, #2b5876 0%, #333 100%); */
  /* opacity: 0.85; */
  /* border-radius: 2px; */
  box-shadow:
  -2px 0px 4px 0px gray,   /*左边阴影*/

  2px 0px 4px 0px gray,    /*右边阴影*/

  0px 0px 0px 0px #99ffff;    /*下边阴影*/

}

.login-box{/*下*/
  height: 275px;/*ボックスの高さ*/
  width: 518px;/*ボックスの幅*/
  position: relative;
  margin: auto;

  /* position: absolute;
  left: 43%;
  top: 55%;
  padding: 0px;
  margin-top: -150px;
  margin-left: -200px;*/

  background-repeat: no-repeat;
  text-align: center;
  /* background-color: rgba( 255, 255, 255, 0.25 ); */
  background: linear-gradient(to top, #99ffff 0%, #e2fcff 100%, #e2fcff 60%);
  /* background-image: linear-gradient(-50deg, #99ffff 0%, #e2fcff 100%); */
  opacity: 0.85;
  /* box-shadow: 2px 2px 6px gray; */
  /* border-radius: 5px; */
  box-shadow:
  -2px 4px 4px 0px gray,   /*左边阴影*/

  2px 4px 4px 0px gray,    /*右边阴影*/

  0px 0px 0px 0px gray;    /*下边阴影*/
}

/* @media(max-height: 768px) {
  .login-box{
    top: 48%;
    left: 45%
  }
}
@media(min-height: 769px) {
  .login-box{
    top: 60%;
    left: 47%
  }
} */

.flex {/* 新事務局メニュー */
  position: absolute;
  display: flex; /*横並び*/
  padding-left: 30px;
  line-height: 1.0em;
  top:35px;
}
.flex2{/* 下の内容全体 */
  padding:100px 25px;
  position: absolute;
}
.flex,login-title{
  font-size:38px;
  font-weight: bold;
  color: #404040;
  font-family: Meiryo UI;
}
html:lang(en) .flex,login-title{
  font-size:38px;
  font-weight: bold;
  color: #404040;
  font-family: 'Open Sans', sans-serif !important;
}
.title-left{
  position: relative;
  font-size: 38px;
  color: #fff;
  bottom: 15px;
  left: 16px;
}
html:lang(en) .title-left{
  position: relative;
  font-size: 28px;
  color: #fff;
  top: -38px;
  left: 67px !important;
  line-height: 0.1;
}
.title-right{
  color: #fff;
}

.flex.img{
  margin-right: 10px;
  background-repeat: no-repeat;
}
/*---------------------------------------
						ID ボックス
-----------------------------------------*/
.id input{
  position: relative;
  width: 300px;
  height: 40px;
  /* background-color: rgba( 255, 255, 255, 0.25 ); */
  outline: none;
  /* border: 2px solid #99ffff; */
  border: 2px solid #cccccc;
  /* color: #003399; */
  color: #000;
  top: 10px;
  left: 90px;
}
/* .id-boder:hover{
  border: 1px solid #333;
} */
.id input::placeholder {
  color: #333;
}
/*----------------------------------------
						パスワード　ボックス
-----------------------------------------*/
.pass input{
  position: relative;
  width: 300px;
  height: 40px;
  /* background-color: rgba( 255, 255, 255, 0.25 ); */
  outline: none;
  /* border: 2px solid #99ffff; */
  border: 2px solid #cccccc;
  color: #000;
  top: 30px;
  left: 90px;
}
/* .pass-boder:hover{
  border: 1px solid #333;
} */
.pass input::placeholder {
  color: #333;
}
.position{
  position: relative;
  top: 40px;
  left: 43px;
  /* color:#ff4500; */
}
html:lang(en) .position{
  position: relative;
  top: 40px;
  left: 63px;
  font-size: 16px;
}
/*----------------------------------------
						ログインbutton
-----------------------------------------*/
.login-btn{
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 40px;
  /* padding-top: 5px; */
  text-align: center;
  color: #fff;
  background: #00cdac;
  border: 2px solid #8ddad5;
  top: 40px;
  left: 90px;
}

.login-btn:hover{
  /* background-image: linear-gradient(#473B7B 100%, #30D2BE 100%); */
  background: #006666;
  color: #fff;
  cursor: pointer;
  outline:none;/*クリック時の枠線を消す*/
}

.login-btn:disabled{
  color: #fff;
  /* background: #808080; */
  background: #e0e0e0;
  border: 2px solid #e0e0e0;
  pointer-events: none;
}
.login-btn:disabled:hover{
  cursor: default;
  outline:none;/*クリック時の枠線を消す*/
}

/*----------------------------------------
						ログイン注釈
-----------------------------------------*/
.login-note{
  position: relative;
  left: -6px;
  font-size: 12px;
  text-align: left;
}



/* north */

.login-box-qr {
  display: flex;
  justify-content: center;
  height: 395px;
  width: 500px;
  /* position: relative; */
  margin: auto;
  background-repeat: no-repeat;
  text-align: center;
  background: linear-gradient(to top, #99ffff 0%, #e2fcff 100%, #e2fcff 60%);
  opacity: 0.85;
  box-shadow:
  -2px 4px 4px 0px gray,   /*左边阴影*/

  2px 4px 4px 0px gray,    /*右边阴影*/

  0px 0px 0px 0px gray,    /*下边阴影*/

  0px 0px 5px 1px gray;    /*上边阴影*/
}

/* navMessage */
.qr-title {
  /* padding-top: 40px; */
  font-size:14px;
  font-family: 'Open Sans', sans-serif !important;
}

.qr-code {
  margin: auto;
}

/* input + button */
.under-part {
  margin: auto;
}

.password-input {
  width: 300px;
  height: 40px;
  outline: none;
  border: 2px solid #cccccc;
  color: #000;
  margin-top: 20px;
}

/* button */
.verify-btn {
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 40px;
  text-align: center;
  color: #fff;
  background: #00cdac;
  border: 2px solid #8ddad5;
}

.verify-btn:hover{
  background: #006666;
  color: #fff;
  cursor: pointer;
  outline:none;
}

.verify-btn:disabled{
  color: #fff;
  background: #e0e0e0;
  border: 2px solid #e0e0e0;
  pointer-events: none;
}
.verify-btn:disabled:hover{
  cursor: default;
  outline:none;
}

.back-btn {
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 40px;
  text-align: center;
  color: #fff;
  background: #00cdac;
  border: 2px solid #8ddad5;
}

.back-btn:hover{
  background: #006666;
  color: #fff;
  cursor: pointer;
  outline:none;
}

.back-btn:disabled{
  color: #fff;
  background: #e0e0e0;
  border: 2px solid #e0e0e0;
  pointer-events: none;
}
.back-btn:disabled:hover{
  cursor: default;
  outline:none;
}