@charset "UTF-8";
.form input[type="text"], .form select, .form textarea { border: #bcc 1px solid; line-height: 1.5em; padding: 0.25em; /* 以下 safari対策 */ border-radius: 0; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.form input[type="radio"], .form input[type="checkbox"] { position: relative; top: 2px; }
.form input[type="text"]:hover, .form textarea:hover, .form select:hover { border: solid 1px #6CC; }
.form label { margin-right: 1em; display: inline-block; }
.form label + input[type="text"] { margin-left: 0.5em; margin-right: 0.5em; }
.form .error { /* エラー表示用 */ color: #f00; }
.form input[type="text"].error, .form textarea.error, .form select.error { border: solid 1px #f00; background-color: #FEE; }
.form label.error { color: #f00; }
.form ul.error li { color: #f00; }
.form .readonly { /* 確認画面表示用 */ color: #666; }
.form .btn { text-align: center; margin-top: 1.5em; }
.form .btn input { height: 2.5em; margin: 0; padding: 0; width: 8em; }
.form .input-4em { width: 4em; }

@media screen and (min-width: 768px), print { .form label { line-height: 34px; }
  .form .input-ss { width: 25%; }
  .form .input-s { width: 50%; }
  .form .input-m { width: 75%; }
  .form .input-l { width: 100%; }
  .form textarea { width: 100%; height: 8em; }
  .form ul.error { /* エラー表示用 */ margin-top: 6px; }
  .form .btn { margin-top: 2em; } }
@media screen and (max-width: 767px) { .form input[type="text"], .form select, .form textarea { /* safariでの拡大防止（16px以上を指定） */ font-size: 16px; }
  .form label { line-height: 26px; }
  .form .input-ss { width: 40%; }
  .form .input-s, .form .input-m, .form .input-l { width: 100%; }
  .form textarea { width: 100%; height: 8em; }
  .form ul.error { /* エラー表示用 */ margin-top: 4px; } }
/* safari用CSSハック */
@media screen and (-webkit-min-device-pixel-ratio: 0) { ::i-block-chrome, .form input[type="radio"], ::i-block-chrome, .form input[type="checkbox"] { top: 0px; } }
_::-webkit-full-page-media, _:future, :root .form input[type="radio"], _::-webkit-full-page-media, _:future, :root .form input[type="checkbox"] { top: 0px; }

/* safari用CSSハック ここまで */
.formT { width: 100%; }
.formT th { background-color: #e7f7f5; text-align: left; white-space: nowrap; }
.formT .required { position: relative; z-index: -1; }
.formT .required::after { content: "必須"; display: block; background-color: #f00; color: #fff; padding: 0 0.5em; position: absolute; top: 50%; }

@media screen and (min-width: 768px), print { .formT { border-bottom: #bcc 1px solid; margin-top: 18px; }
  .formT th, .formT td { border-top: #bcc 1px solid; vertical-align: middle; padding: 0.75em 1em; }
  .formT .required { padding: 0.75em 64px 0.75em 1em; /* padding-rightは必須マーク分余計に空ける */ }
  .formT .required::after { font-size: 12px; line-height: 20px; border-radius: 4px; margin-top: -10px; right: 16px; } }
@media screen and (max-width: 767px) { .formT { margin-top: 16px; }
  .formT th, .formT td { display: block; }
  .formT th { padding: 0.5em 1em; }
  .formT td { padding: 0.5em 0em 1em; }
  .formT tr:last-child td { padding-bottom: 0; }
  .formT .required { padding: 0.5em 54px 0.5em 1em; /* padding-rightは必須マーク分余計に空ける */ }
  .formT .required::after { font-size: 10px; line-height: 14px; padding-top: 2px; border-radius: 3px; margin-top: -8px; right: 10px; } }
@media screen and (min-width: 768px), print { .txt_c { text-align: center; }
  .txt_c .note_txt { text-align: left; display: inline-block; } }