@charset "utf-8";

body {
  font-size: 14px;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  padding-bottom: 50px;
}
input , select, optgroup, textarea, button {
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size:13px;
}
input[type="text"], input[type="email"], input[type="password"], textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* for focus animation */
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 2px;
  border: 1px solid #aaa;
  padding: 5px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
  box-shadow: 0 0 7px #aaaaff;
}
select {
  padding: 5px;
}
input[type="submit"], input[type="reset"], button {
  border-radius: 2px;
  border: 1px solid gray;
  background: linear-gradient(to bottom, #fcfcfc, #ddd);
  padding: 5px 10px;
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
  background: linear-gradient(to bottom, #fcfcfc, #fcfcfc);
}
input[type="submit"]:active, input[type="reset"]:active, button:active {
  background: linear-gradient(to bottom, #eee, #ccc);
}


.msgarea {
  color:#ff0000;
  margin: 20px 0px;
  padding: 10px 20px 10px 20px;
  background-color: #eeeeee;
  border: 1px solid #000088;
}

p.errmsg {
  color:#ff0000;
  margin:0px;
}

@media screen and (min-width: 768px) {
  .root-container {
    width: 1000px;
    margin: auto;
  }
  .form-element-container {
    display: table;
    width: 80%;
    border-collapse:separate; 
    margin: auto;	/* 中央寄せ */
  }
  .form-field-input-pair {
    display: table-row;
  }
  .form-field {
    display: table-cell;
    width: 260px;
    padding: 10px;
    vertical-align: middle;
		font-size: 15px;
  }
  .form-input {
    display: table-cell;
    padding: 5px;
    border-bottom: 1px solid #ccccff;
  }
}
@media screen and (max-width: 767px) {
  .root-container {
		width: 90%;
		margin: auto;
  }
  .form-element-container {
  }
  .form-field-input-pair {
  }
  .form-field {
    border-right: 1px solid #ccc;
		padding: 10px;
  }
  .form-input {
    border-bottom: 1px solid #ccccff;
  }
}

.w_full {width: 95%;}
.w_half {width: 50%;}
.w_25pc {width: 25%;}

.required {color: red;}

@media screen and (max-width: 767px) {
.w_half {width: 75%;}
}