@charset "utf-8";
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansCJKjp-Regular.eot");
  src: url("../font/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"), url("../font/NotoSansCJKjp-Regular.woff") format("woff"), url("../font/NotoSansCJKjp-Regular.ttf") format("truetype");
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: bold;
  font-weight: 700;
  src: url("../font/NotoSansCJKjp-Bold.eot");
  src: url("../font/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"), url("../font/NotoSansCJKjp-Bold.woff") format("woff"), url("../font/NotoSansCJKjp-Bold.ttf") format("truetype");
}

body{
	background:#fff;
	color:#444;
}

#wrapper{
	width:400px;
	margin:100px auto 20px;
	background:#fff;
	padding:20px;
}
h1{
	font-size:20px;
	text-align:center;
	font-family:Noto Sans Japanese, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#main{
	margin:0 auto;
	padding:20px 0 0;
}
#main p,#main ul{
	margin-bottom:1em;
}

ul.error{
	border:1px solid #f00;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	behavior:url(PIE.htc);
	position:relative;
	padding:6px;
}
.mes{
	font-size:1.4em;
	color:#F60;
}
ul.error li{
	list-style:none;
	color:#f00;
}

dt{
	margin-bottom:5px;
}

dd{
	margin-bottom:10px;
}

dd input{
	border:1px solid #cdcdcd;
	/*border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	behavior:url(PIE.htc);*/
	position:relative;
	padding:5px;	
}
select{
	padding:5px;
	border:1px solid #d2d2d2;
	vertical-align:middle;
	font-size:15px;
	outline:none;

}
footer p{
	text-align:right;
	font-size:0.9em;
}
.cr{
	font-size:0.9em;
	text-align:center;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn {
    border-radius: 3px;
    box-shadow: none;
    border: 1px solid transparent;
}
.btn-primary {
    background-color: #3C8DBC;
    border-color: #367FA9;
	color: #FFF;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: #367FA9;
}
.btn-primary:hover {
    
    background-color: #286090;
    border-color: #204D74;
}
.checkbox{
	margin-bottom:15px;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}
.box-body {
    border-radius: 0px 0px 3px 3px;
    padding: 10px;
}

.m-modal {
	width: 100%;
	min-width: auto;
}
.m-modal .m-modal_inner {
	width: min(492px, calc(100% - 40px));
}


/* header */
header#login {
  width: 100%;
  /* min-height: 7.2rem; */
  padding: 0.5rem 0;
  font-family: var(--font-segoe-ui);
  line-height: 2.1rem;
  background: #81C7C7;
  height: 120px;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* z-index: 2; */
}

.title {
  color: #fff;
}

.login-hr {
	background-color: #81C7C7;
	height: 3px;
}

header#login .image {
  left: 4rem;
}

header#login .logo {
  width: auto;
  height: 60px;
}

header#login .text {
  right: 5rem;
  transition: all 0.25s ease-in-out;
}

header#login .text:hover {
  opacity: 0.7;
}

header#login .image,
header#login .text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

header#login .header-icon {
  width: 3rem;
  height: 3rem;
}

@media screen and (max-width: 1023px) {
  header#login .image {
      left: 2rem;
  }

  header#login .text {
      right: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  header#login .image {
      left: 2rem;
  }

  header#login .text {
      right: 2rem;
  }
}

.login-Wrapper {
	background: #fff !important;
}

/*footer*/
footer {
  /* padding: 2.7rem 0; */
  background: #81C7C7;
	position: absolute;
	bottom: 0; 
	width: 100%;
	text-align: center;
	padding: 10px 0;	
}