:root{
  --black:#000;
  --white:#fff;
  --danger:#d60000;
  --btn:#000066;
}

/* =========基本設定========= */
*{ box-sizing:border-box; }
html { font-size: 16px; }
body{
  margin:0;
  font-family: "メイリオ", sans-serif;
  /* font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, Arial, sans-serif; */
  background:#e6e6e6;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  opacity: 0.7;
  cursor: pointer;
}

.page{
  max-width:1276px;
  margin:0 auto;
  /* height: 100vh; */
  height: 100dvh;
  /* min-height:100vh; */
  display:flex;
  flex-direction:column;
  background:var(--white);
  box-shadow:0 0 8px rgba(0,0,0,0.08);
}

/* =========コンテンツ領域========= */
.page-title{
  background:var(--black);
  color:var(--white);
  padding:8px 12px;
  font-size:1rem;
  font-weight:bold;
  height: 42px;
  text-align: left;
}

.content-area{
  flex:1;
  padding:30px 20px;
  text-align:center;
}
/* PC（1080px以上） */
@media (min-width:1080px){
  .content-area{
    padding:20px;
  }
}

.lead{
  font-size:1rem;
  line-height:1.6;
  margin-bottom:30px;
}

.error{
  color:var(--danger);
  font-size:1rem;
  font-weight:bold;
  margin-bottom:20px;
}
.loginlogo{
  width:250px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size: 250px;
  background-image: url(../img/athran_logo.png);
  background-repeat: no-repeat;
  background-position: top center;
}
.form{
  width:100%;
  max-width:500px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.loginform{
  width:100%;
  max-width:250px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.field_label{
  margin-top:1rem;
  width:100%;
  text-align:left;
}
.field{
  width:100%;
  text-align:left;
}

.label{
  font-size:1rem;
  margin-bottom:5px;
  display:block;
}

.input{
    width: 100%;
    height: 2.5rem;
    border: 1px solid #333;
    padding: 0.2rem 0.4rem;
    font-size: 1.2rem;
}
.logininput{
    width: 100%;
    height: 3rem;
    border: 1px solid #333;
    padding: 0.2rem 0.4rem;
    font-size: 1.5rem;
}

.btn{
  width:auto;
  align-self:flex-start;
  background:var(--btn);
  color:#fff;
  border:1px solid var(--btn);
  padding:0 1.5rem;
  font-size:1rem;
}
.loginbtn{
  width: 100%;
  align-self:flex-start;
  height: 3rem;
  background:var(--btn);
  color:#fff;
  border:1px solid var(--btn);
  padding:0 1.5rem;
  font-size:1.25rem;
}

.footer-bar{
    background: var(--black);
    font-size: 0.6rem;
    color: #fff;
    padding: 1px 0;
    text-align: center;
}




/* スマホ（1080px未満） */
@media (max-width:1079px){

  .input{
    height:36px;
    font-size:14px;
  }

  .btn{
    height:36px;
    font-size:14px;
  }

  .lead{
    font-size:13px;
  }

  .error{
    font-size:13px;
  }
}
.messageBox {
	text-align: center;
	font-size: 1rem;
}
.message{	color: #339933; }
.messageSafe{ color: #3333FF; }
.messageError{ color: #FF3333; }

.font_s{font-size:0.7rem;}

.w10  { width: 10px;  }
.w20  { width: 20px;  }
.w30  { width: 30px;  }
.w35  { width: 35px;  }
.w40  { width: 40px;  }
.w120  { width: 120px;  }

.h40  { height: 40px;  }