@charset "utf-8";

/* Form */
.formBox {  }
.formBox h3 { margin:0 0 15px; font-size:1.1em; text-align:center; }
.formBox fieldset { margin:0; padding:0; }
.formBox p.txt { margin-top:0; }
.formBox .inputArea p { margin:0; }
.formBox .inputArea p + p { margin-top:6px; }
.formBox .inputArea label { color:#555; }

.formBox dl.inputArea {
  display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  }
.formBox dl.inputArea dt {  }
.formBox dl.inputArea dt::after { display:inline-block; margin-left:1em; font-size:.9em; }
.formBox dl.inputArea dt.required::after { content:"必須"; }

.formBox .inputArea .help { font-size:.8em; color:#555; }

.formBox select { padding:5px 8px; border:1px solid #ccc; border-radius:2px; }
.formBox .input { padding:8px 13px; border:1px solid #ccc; border-radius:2px; }
.formBox .err { margin-top:0; }

:placeholder-shown, :-ms-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; opacity:1;}
div.submit  { margin:1em 0 0; text-align:center; }
.submit input, .submit button {
  padding:8px 40px; color:#FFF; font-size:1.1em; background:#212121; border:none; }
.submit.confirm *[name="back"] { background:#666; }

/* login */
.login .input, .pass .input { width:100%; }
.submit + ul { margin-top:30px; }

/* regist */
.regist .idFile label { width:100%; padding:7px 0 0; }
.regist ol.dvd { margin:0 0 30px; padding:0; list-style:none; counter-reset:dvd; }
.regist ol.dvd li { padding-left:30px; position:relative; }
.regist ol.dvd li:before {
  counter-increment:dvd;
  content: counter(dvd);
  display:inline-block; position:absolute; left:0;
  width:24px; line-height:24px; text-align:center;
  color:#FFF; background:#35a788; border-radius:50%;
  }

/* 600px 以下 (sp) ------------------------ */
@media screen and (max-width: 600px) {
  .contents .formBox dl.inputArea { margin:0 -15px; }
  .formBox .subTitle { margin:20px 0 0; color:#35a788; border:none; }
  .formBox .input.m { width:100%; }

  .formBox { margin:0 15px; }
  .formBox dl.inputArea { border-bottom:1px solid #e0e4d3; }
  .formBox dl.inputArea > * { width:100%; }
  .formBox dl.inputArea dt { padding:8px 10px; background:#f7f8f8; border-top:1px solid #ccd1d5;  border-bottom:1px solid #e0e4d3; }
  .formBox dl.inputArea dt.required::after { color:#e73656; }
  .formBox dl.inputArea dd { padding:15px 10px; }

  .submit input { width:100%; }
  .submit.confirm *[name="back"] { margin-top:1em; }

  #add button span { font-size:.85em; }
  #add_addr dl.inputArea { margin-top:1em; }

  }
/* 601px 以上 (tablet / pc) ------------------------ */
@media screen and (min-width: 601px) {
  /* Form */
  .formBox { max-width:560px; margin:auto; padding:36px 40px; border-radius:3px; }
  .formBox { background:#f7f8f8; border:1px solid #ccd1d5; }
  .formBox dl.inputArea > * { border-bottom:1px solid #ccd1d5; }
  .formBox dl.inputArea dt { width:180px; padding:15px 0; position:relative; }
  .formBox dl.inputArea dt.required::after { position:absolute; right:20px; padding:0 5px; font-size:.85em; color:#FFF; background:#e73656; }
  .formBox dl.inputArea dd { width:calc(100% - 180px); padding:10px 0; }
  .formBox dl.inputArea.confirm dd { padding:15px 0; }
  .formBox .input { padding:10px 13px; }

  .submit.confirm {
    display:-webkit-flex; display:flex;
    -webkit-flex-wrap:wrap; flex-wrap:wrap;
    justify-content:space-between; -webkit-justify-content:space-between;
    padding-top:10px;
    }
    .submit.confirm *[name="submit"] { order:2; }
    .submit.confirm *[name="back"]   { order:1; }

  /* regist */
  .regist.formBox { max-width:640px; }
  .regist .agree  { margin:30px 0 15px; text-align:center; }
  .regist .submit { margin-top:30px; text-align:center; }

  /* update */
  .update.formBox { max-width:640px; }

  /* support */
  .support.formBox { max-width:640px; }

  }

/* 1000px 以上 (innerより大きい時) ------------------------ */
@media screen and (min-width: 1000px) {

  }