/* reset css -------------*/
html, body, header, nav, section, article, aside, footer, address,
h1, h2, h3, h4, h5, h6,
div, p, blockquote, dl, dt, dd, ol, ul, li,
table, caption, tbody, thead, tfoot, tr, th, td,
form, iframe, embed, object {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  -webkit-font-smoothing: antialiased;
  word-break: break-all;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
/* 枠線と縦並べ時の隙間を消去 */
img {
  border: 0;
  vertical-align: top;
}

/* ブラウザデフォルトを10pxに設定 */
html {
  font-size: 62.5%;
  --body-bgcolor: #f5fafd;
  --text-color: #333;
  --link-color: #1b2c63;
  --primary-color: #1b2c63;
  --accent-color: #2d65a8;
  --footer-color: #9baab3; 
  --h1-color: #fff;
}

/* adjust ver.20230801
----------------------------*/
.mb00 { margin-bottom: 0px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mt00 { margin-top: 0px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.pt00 { padding-top: 0px !important; }
.pd00 { padding-bottom: 0px !important; }
.fontb { font-weight: bold !important; }
.font14 { font-size: 1.4rem !important; }
.font16 { font-size: 1.6rem !important; }
.font18 { font-size: 1.8rem !important; }
.ta_r { text-align: right !important; }
.ta_l { text-align: left !important; }
.ta_c { text-align: center !important; }
.red { color: #dd0000 !important; }

/* 回り込み解除 */
.cl { clear: both; }
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix { display: inline-block; }
/* clearfixのIE-mac対策 */
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* design_css -------------*/
/* google icon */
.material-symbols-outlined {
  vertical-align: middle;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

body {
  width: 100%;
  background: var(--body-bgcolor, #edf7ff);
  color: var(--text-color, #333);
  font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  word-break: break-word;
}
a {
  color: var(--link-color, #2e6ea8);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

/* header */
header {
  background: #fff;
  border-bottom: 2px solid #12428d;
  padding: 15px;
}
header h1 {
  font-size: 1rem;
  text-align: center;
}
header h1 img {
  width: 90%;
  max-width: 150px;
}
/* タイトル */
#main_area {
  width: 95%;
  max-width: 450px;
  background: #fff;
  border: 1px solid #12428d;
  margin: 60px auto 30px auto;
  padding: 0;
}
#main_area h1 {
  display: block;
  max-width: 100%;
  background: #12428d;
  color: var(--h1-color, #fff);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0px auto 0px auto;
  padding: 15px;
}
#main_area h1 span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
}
/* フォーム全体 */
.login_wrapper {
  color: #12428d;
  margin: 30px 30px;
}
.login_wrapper h2 {
  font-size: 2.4rem;
  margin: 30px auto 15px auto;
}  
.login_wrapper span {
  color: var(--accent-color, #2e6ea8);
  margin-bottom: 5px;
  margin-right: 5px;
}
.login_wrapper a span {
  color: var(--accent-color, #2e6ea8);
  margin-right: 5px;
}
/* パスワード再発行 */
.pw_reissue {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 30px;
}
/* コピーライト */
.copy {
  color: var(--footer-color, #999);
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 30px auto;
  padding: 0 15px;
  word-break: break-word;
}
/* エラーテキスト */
.errTxt { 
  color: #dd0000;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  padding-top: 10px;
}
/* フォームパーツ */
input[type="text"],
input[type="password"],
input[type="email"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  border-radius: 0px;
  outline: 0px;
  padding: 0px;
  /* reset end */
  display: inline-block;
  width: calc(100% - 30px);
  background-color: rgba(204,204,204,0.2); 
  border: solid 1px #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.6rem;
  color: var(--text-color, #333);
  margin: 0px 0 10px 0;
  padding: 10px;
}
input::placeholder {
  color: #999;
  letter-spacing: 1px;
}
input::-webkit-input-placeholder {
  color: #999;
  letter-spacing: 1px;
}
input:-ms-input-placeholder {
  color: #999;
  letter-spacing: 1px;
}

.submit_btn {
  appearance: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-box-sizing: border-box;
  -webkit-appearance: button;
  /* reset end */
  display: block;
  width: 90%;
  min-width: 120px;
  max-width: 230px;
  height: 60px;
  background: var(--primary-color, #2d65a8);
  border-radius: 30px;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 20px auto 0px auto;
  padding: 15px 10px;
}

.submit_btn:hover {
  filter: alpha(opacity=90);
  -ms-filter: alpha(opacity=90);
  opacity: 0.9;
}

.sp_none {
  display: inline-block;
}

@media screen and (max-width:459px) {
  #main_area {
    margin: 40px auto 30px auto;
  }
  #main_area h1 {
    font-size: 2rem;
  }

  .login_wrapper {
    margin: 20px 20px;
  }
  .sp_none {
    display: none;
  }
}

/* フォーム行
----------------------------*/
#SMP_STYLE dl {
    width: 100%;
    margin: 1em auto 0 auto;
    padding: 0;
}
/* 項目名
----------------------------*/
#SMP_STYLE dt.title {
    display: block;
    width: 100%;
    color: var(--text-color, #333);
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0.2em 0 0.5em 0;
    vertical-align: top;
}
/* 注意事項
----------------------------*/
#SMP_STYLE dt.title .caution {
    display: block;
    width: 95%;
    color: #666;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.4;
    text-align:left;
    padding: 1em 0 0 0;
}
/* 項目入力部
----------------------------*/
#SMP_STYLE dd.data {
    display: block;
    width: 100%;
    color: var(--text-color, #333);
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0;
}
/* 強度メーター
----------------------------*/
.pwChkTdDef,
.pwChkTdUnderLevel,
.pwChkTdOverLevel {
    padding: 5px 0;
}
.pwChkTdDef span,
.pwChkTdUnderLevel span,
.pwChkTdOverLevel span {
    margin-bottom: 0;
    margin-right: 0;
    padding: 0;
}