div.reg{
  background-color: #fafafa;
  margin-left: 15%;
  margin-right: 15%;
}

/*.btn{
    color: #fff;
    background-color: #000033;
    font-size: 1.0em;
    padding: 10px 30px;
    margin-left: 80%;
}

.btn:hover{
  color: #fff;
  background: #000099;
}*/

.message{
text-align: right;
margin-right:20%;
}

/* Simple Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body */
body {
background: #e9e9e9;
color: #5e5e5e;
font: 400 87.5%/1.5em;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* Form Layout */
.form-wrapper {
background: #fafafa;
margin: 3em auto;
padding: 2em;
max-width: 700px;
}

h1 {
text-align: center;
padding: 1em 0;
font-size: 1.67em;
font-weight: bold;
}

/* form {
padding: 0 1.5em;
} */

.form-item {
margin-bottom: 1em;
width: 100%;
}

.form-item input {
background: #fafafa;
border: none;
border-bottom: 3px solid #e9e9e9;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 50px;
transition: border-color 0.3s;
width: 100%;
}

.form-item input:focus {
border-bottom: 2px solid #c0c0c0;
outline: none;
}

.button-panel {
margin-top: 3em;
margin-bottom: 3em;
width: 100%;
}

.button-panel .button {
background: rgb(0, 88, 203) radial-gradient(circle, rgb(0, 88, 203) 0%, rgb(25, 156, 203) 100%);
/*background: #1671a3;*/
border: none;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 100%;
}

.button:hover {
/*background: #11405a;*/
background: rgb(0, 88, 203);
}

.form-header {
font-size: 1em;
padding: 1em 0;
}
  
.form-header a {
color: #8c8c8c;
text-decoration: none;
transition: border-color 0.3s;
}

.form-header a:hover {
border-bottom: 1px dotted #8c8c8c;
}

.form-footer {
font-size: 1em;
padding: 2em 0;
}

.form-footer a {
color: #8c8c8c;
text-decoration: none;
transition: border-color 0.3s;
}

.form-footer a:hover {
border-bottom: 1px dotted #8c8c8c;
}

/* 新規登録 */
.register-wrapper {
background: #fafafa;
margin: 3em auto;
padding: 0 3em;
max-width: 550px;
}

.register-item {
margin-bottom: 1.75em;
width: 100%;
}

.register-item input {
background: #fafafa;
border: none;
border-bottom: 2px solid #e9e9e9;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 30px;
transition: border-color 0.3s;
width: 100%;
}

.register-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
  }

.register-label {
font-weight: bold;
}

.h-15{
height: 15px;
}

.note{
color: #949593!important;
font-size: 14px !important;
}

input[type="checkbox"] {
  top: -1px;
  height: 17px;
  margin-right: 5px;
  vertical-align: sub;
}

.register-item select{
  background-color: #fafafa;
  border: none;
  border-bottom: 2px solid #e9e9e9;
}

/* 利用手順画面 */
.note-wrapper {
    background: #fafafa;
    margin: 3em auto;
    padding: 0 1em;
    max-width: 700px;
}

.note-item {
  margin-bottom: 0.75em;
  width: 100%;
  font-weight: bold;
  min-height: 64px;
  }

.step-note{
  display: flex;
}

.step-number{
  padding-right: 10px ;
}

.leftcolor-blue{
  padding-left: 10px ;
  border-left-width: 5px ;
  border-left-style: solid ;
  border-left-color: #6495ED;
}

.back{
  color: #8c8c8c;
}