/* ===================================

基本設定

=================================== */





/* ===================================

共通

=================================== */

/* フォント */

.c-ttl.c-form-ma-ttl {
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 400;
  text-align: center;
}

.c-form-ma-lead {
  text-align: center;
  margin: 15px 0 30px;
}

.c-form-ma-lead .c-form-ma-red {
  color: #ff0000;
}

.c-form-ma-lead .c-form-ma-lead-center {
  text-align: center;
  margin: 15px 0 30px;
}

.c-form-ma-explain {
  text-align: left;
  margin: 0 0 80px;
}

.c-btn-square .black .c-form-ma-btn {
  text-align: center;
}

@media only screen and (max-width:768px) {
  .c-ttl.c-form-ma-ttl {
    font-size: 23px;
    font-size: 2.3rem;
    font-weight: 400;
    text-align: center;
  }

  .c-form-ma-explain {
    margin: 0 0 10vw;
  }
}

/* ===================================

画面全体のレイアウト

=================================== */

/* 画面全体の表示設定 */





/* フォームエリア全体の設定 */

div.container {
  max-width: 1200px;
  background: white;
  /* 背景色 */
  font-size: 14px;
  /* フォントの初期サイズ */
  color: #333;
  /* フォントの初期カラー */
  margin: 0 auto;
  /* 画面の中央に表示 */
  text-align: left;
  /* 左寄せ */
}



/* ===================================

  設問エリアのレイアウト

  =================================== */

/* 設問エリア全体の設定 */

div.wrapper {

  max-width: 1200px;
  /* 画面の横幅 */

  margin: 0 auto;
  /* 中央に表示 */

  background: white;

}



/* 設問の表 */

table.items {

  margin: 0 auto;

  width: 100%;

}



/* 設問の行 */

tr.item {}

/* 必要であれば行のデザインを設定することができます */



/*設問名のセルのデザイン */

td.label {

  line-height: 1.8;

  padding: 25px 20px 25px 0;

  text-align: left;

  border-bottom: #e2e3e3 1px solid;

  width: 26.666666666666668%;

  font-weight: bold;

  font-size: 16px;

}

/* 設問の入力セルおよび表示セルのデザイン */

td.value {

  line-height: 1.8;

  padding: 25px 0;

  border-bottom: #e2e3e3 1px solid;

  width: 73.33333333333333%;

  font-size: 16px;

}

td.value input {

  padding: 10px;

  border: solid 1px #e2e3e3;

  font-size: 16px;

  font-family: 'Noto Sans JP', sans-serif;

}

td.value select {

  border: solid 1px #e2e3e3;

  padding: 10px;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 16px;

}

td.value textarea {

  border: solid 1px #e2e3e3;

  padding: 10px;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 16px;

}

.label_name+input {

  width: 30% !important;

  margin-right: 20px;

}

/* 設問の入力例/説明セルのデザイン */

td.comment {

  font-size: 12px;

  padding-left: 10px;

  color: DarkSlateGray;

  background: White;

}



/* 入力セルの「氏」「名」の文字のデザイン */

span.label_name {

  padding-right: 5px;

  font-size: 14px;

}



/* 入力確認画面、完了画面の入力された文字のデザイン */

p.value {

  font-size: 16px;

  margin-bottom: 0;

}



/* ボタンの表示エリアの設定 */

div.button_area {

  max-width: 1200px;

  margin: 50px auto 10px auto;
  /* 中央に表示、上下に10pxの余白 */

  padding: 10px 0 10px 0;
  /* ボタンとの上下の隙間のサイズ */

  text-align: center;
  /* 中央にボタンを表示 */

}



/* 入力エラーメッセージのデザイン */

div.message {

  padding: 5px 10px 5px 10px;
  /* メッセージテキストと背景色の隙間のサイズ */

  margin: 10px 13px 10px 13px;
  /* 上 右 下 左 の隙間のサイズ */

  font-size: 14px;

  font-weight: bold;

  color: OrangeRed;

  background: LightYellow;

}



/* 公開終了メッセージのデザイン */

div.finished-message {

  padding: 5px 10px 5px 10px;
  /* メッセージテキストと背景色の隙間のサイズ */

  margin: 10px 13px 10px 13px;
  /* 上 右 下 左 の隙間のサイズ */

  font-size: 14px;

  font-weight: bold;

  color: Crimson;

  background: MistyRose;

}



/* ===================================

  入力コントロールのデザイン

  =================================== */

/* 確認／送信／戻る／登録ボタン */

input[type=button] {

  background: #333;

  color: #fff;

  font-size: 18px;

  line-height: 1;

  font-weight: bold;

  letter-spacing: 2px;

  position: relative;

  text-align: center;

  outline: none;

  transition: all 0.2s linear;

  padding: 20px 0;

  display: block;

  margin: 20px 20px 0;

  width: 290px;

  border: none;

  display: inline-block;

}

input[type=button]:hover {

  cursor: pointer;

  opacity: 0.7;

}

input[type=radio] {

  background-color: #fff;

  border: 1px solid #bcbcbc;

  border-radius: 50%;

  width: 20px;

  height: 20px;

  left: 5px;

  margin: 3px 8px 10px 0;

  vertical-align: top;

}





/* 入力中のフィールドの背景色 */

/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */

input[type="text"]:focus {
  background-color: LightYellow;
}

/* テキストボックス */

select:focus {
  background-color: LightYellow;
}

/* プルダウン */

textarea:focus {
  background-color: LightYellow;
}

/* テキストエリア */



/* ===================================

  必須項目のマークおよびメッセージなど

  =================================== */

/* 必須項目のマーク */

span.required {

  float: left;

  margin-right: 4px;

  font-size: 60%;

  font-weight: bold;

  color: OrangeRed;

}

span.required:after {

  /* ここを編集することで表示されるマークを変更できます */

  content: "※";

}

/* 必須項目についての説明文 */

p.required_msg {

  text-align: left;

  margin-right: 4px;

  font-size: 80%;

  font-weight: bold;

  color: OrangeRed;

  margin-bottom: 20px;

  display: none;

}

p.required_msg:after {

  /* ここを編集することで表示されるマークを変更できます */

  content: "「※必須」となっている項目は必ず入力してください。";

}



/* メールアドレスの再入力メッセージ */

p.label_mail {

  margin: 5px 0 1px 0;

  font-size: 14px;

  padding: 10px 0;

}

p.label_mail:after {

  /* ここを編集することで表示されるメッセージを変更できます */

  content: "確認のため、もう一度メールアドレスを入力してください";

}

#button_confirm_back {

  background: #bcbcbc !important;

  color: #fff !important;

}

#policy_url {

  color: #0c0c0c;

  transition: 0.4s;

  font-family: 'Noto Sans JP', sans-serif;

  position: relative;

  text-decoration: underline;

  display: inline-block;

}

#policy_url:hover {

  text-decoration: none;

}

.privacy_policy {

  margin: 50px 30px 30px !important;

  font-size: 16px;

}

/* ===================================

  スマートフォン表示用のレイアウト

  =================================== */

/* スマートフォンとして認識する画面の横幅のサイズ */

@media screen and (max-width:768.98px) {

  td.value select {
    font-size: 4vw;
  }

  /* フォームエリア全体の設定 */

  div.container {
    width: 100%;
    padding: 0 4vw;
  }

  /* 設問エリア全体の設定 */

  div.wrapper {

    width: 100%;

  }

  /* 設問の表 */

  table.items {

    width: 100%;

  }

  /*設問名のセルのデザイン */

  td.label {

    width: 100%;

    display: block;

    padding: 8vw 0 0;

    border-bottom: none;

    font-size: 4vw;

  }

  /* 必須項目のマーク */

  span.required {

    float: initial;



  }

  /* 設問の入力セルおよび表示セルのデザイン */

  td.value {

    padding: 5.333333333333333vw 0 8vw;

    width: 100%;

    display: block;

    font-size: 4vw;



  }

  td.value input {

    font-size: 4vw;

    padding: 2.666666666666667vw;

    margin-right: 2.666666666666667vw;

    margin-bottom: 3vw;

  }

  /* 設問の入力例/説明セルのデザイン */

  td.comment {

    float: left;

    width: 95%;

    padding: 0px 2px 10px 2px;

  }

  /* 設問の入力例/テキストボックス */

  input[type="text"] {

    font-size: 120%;

    width: 95% !important;

  }

  /* 設問の入力例/テキストエリア */

  textarea {

    width: 95%;

    height: 100px;

    border: solid 1px #e2e3e3
  }

  /* ボタンの表示エリアの設定 */

  div.button_area {

    width: 95%;

  }
  div.button_area input {
    margin: 4vw auto 0;
  }

  span.label_name {

    font-size: 3.5vw;

  }

  p.label_mail {

    font-size: 3.5vw;

  }

  .privacy_policy {

    margin: 7vw 0 5vw !important;

    font-size: 1.5rem;

    text-align: left;

  }

  div.button_area {

    margin-bottom: 0;

    padding-bottom: 0;

  }

  input[type=button] {

    font-size: 4.266666666666667vw;

  }

  p.value {

    font-size: 4vw
  }

}







@media screen and (min-width: 768.98px) and (max-width: 1024px) {

  td.label {

    width: 100%;

    display: block;

    border-bottom: none;



  }



  td.value {

    width: 100%;

    display: block;

    padding-top: 0;

  }

  .privacy_policy {

    margin: 30px 0 !important;

    text-align: left;

  }

}