@charset "utf-8";

/* 項目のクラス名は毎回変わる →「毎回変わる」で検索 */

/* 背景 */
body.form {
    background-color: #bce2e8;
}

/* ------------------------------------------------------
    レイアウト
   ------------------------------------------------------ */

/* ページ最小横幅指定 */
body.form { min-width: 680px; }

/* --コンテンツの幅指定-- */
body.form #wrapper {
  width: 680px;
  min-height: 100vh;
}
/* --フォームの左右余白-- */
body.form #wrapper .contents {
  box-sizing: border-box;
  padding: 30px;
  border-radius: 10px;
  background: #ffffff;
}
/* --閉じるボタン非表示化-- */
body.form .footer .link-close {
  display:none;
}


/* --完了画面-- */
body.form #wrapper .contents.complete {
  min-height: 180px;
}
body.form #wrapper .contents.complete .text2{
    margin-bottom: 10px;
}
body.form #wrapper .contents.complete .complete-text{
  text-align: center;
    font-size: 14px;
    font-weight: medium;
}
body.form #wrapper .contents.complete .link-hp{
    text-align: center;
    font-size: 14px;
    font-weight: medium;
    margin: 4px auto 25px;
    padding: 10px;
    background-color: #bce2e8;
    width: 60%;
    display: block;
    border-radius: 100vh;
  }
  body.form #wrapper .contents.complete .link-hp:hover{
    background-color: #fa5d58;
  }
  body.form #wrapper .contents.complete .link-hp a{
color: #ffffff;
text-decoration: none;
  }
/* --フッター-- */
body.form #wrapper .footer {
  padding-bottom: 60px;
}
/* ヘッダー画像 */
body.form #wrapper .title img { width: 100%; }

/* ------------------------------------------------------
    フォーム
   ------------------------------------------------------ */

/* --フォームの横幅指定を解除-- */
body.form .input-form,
body.form .contents table,
body.form .contents .entry,
body.form .footer .link-group,
body.bbs-form .contents form,
body.bbs-form .contents table,
body.bbs-form .footer .link-group,
body.bbs-list .footer .link-group {
  width: auto;
}

body.form .contents table { width: 100%; }

/* --項目名-- */
body.form .contents table .form-img th,
body.form .contents table .form-text th,
body.form .contents table .form-hr th,
body.form .contents table .form-textbox th,
body.form .contents table .form-textarea th,
body.form .contents table .form-select th,
body.form .contents table .form-radio th,
body.form .contents table .form-checkbox th,
body.form .contents table .form-photo th,
body.form .contents table .form-movie th,
body.form .contents table .form-tel th  {
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: medium;
  width: auto;
  letter-spacing: .1em;
}

body.form .form-checkbox .item label{
    display: block !important;
}

body.form .contents table td { width: 100%; }

/* 【追加】--aタグhover-- */
body.form .contents a:hover{
  opacity: .5;
}

/* 【追加】--入力内容-- */
body.form .contents table .form-textbox td,
body.form .contents table .form-textarea td,
body.form .contents table .form-select td,
body.form .contents table .form-radio td, 
body.form .contents table .form-checkbox td, 
body.form .contents table .form-photo td,
body.form .contents table .form-movie td,
body.form .contents table .form-tel td {
  display: block;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  letter-spacing: .1em;
}

body.form .contents table .item03 td,
body.form .contents table .item04 td,
body.form .contents table .item05 td,
body.form .contents table .item08 td,
body.form .contents table .item09 td,
body.form .contents table .item10 td,
body.form .contents table .item11 td,
body.form .contents table .item12 td,
body.form .contents table .item13 td,
body.form .contents table .item14 td,
body.form .contents table .item15 td,
body.form .contents table .item25 td,
body.form .contents table .item26 td,
body.form .contents table .item32 td,
body.form .contents table .item33 td,
body.form .contents table .item34 td,
body.form .contents table .item35 td,
body.form .contents table .item36 td{
  padding-bottom: 25px !important;
}

body.form .contents table .item16 td,
body.form .contents table .item17 td,
body.form .contents table .item19 td,
body.form .contents table .item20 td,
body.form .contents table .item23 td,
body.form .contents table .item38 td{
  border-bottom: none;
  margin-bottom: 0;
}

body.form .contents table .item26 td textarea{
    height: 100px;
  }
body.form .contents table .item31 th {
  margin-bottom: 0;
}
body.form .contents table #item31 {
  padding-bottom: 0;
}
body.form .contents table .form-radio td,
body.form .contents table .form-checkbox td{
  padding-bottom: 25px;
}
/* 【追加】--画像付きラジオボタン・チェックボタン-- */
body.form .contents table .form-radio td,
body.form .contents table .form-checkbox td{
  overflow:
  hidden;
  *zoom: 1;
}
/* 【追加】--確認画面　項目名-- */
body.form .contents.confirm table .form-img th,
body.form .contents.confirm table .form-text th,
body.form .contents.confirm table .form-hr th,
body.form .contents.confirm table .form-textbox th,
body.form .contents.confirm table .form-textarea th,
body.form .contents.confirm table .form-select th,
body.form .contents.confirm table .form-radio th,
body.form .contents.confirm table .form-checkbox th,
body.form .contents.confirm table .form-photo th,
body.form .contents.confirm table .form-movie th {
  font-size: 12px;
}
/* 【追加】--確認画面　入力内容-- */
body.form .contents.confirm table .form-textbox td,
body.form .contents.confirm table .form-textarea td,
body.form .contents.confirm table .form-select td,
body.form .contents.confirm table .form-radio td, 
body.form .contents.confirm table .form-checkbox td, 
body.form .contents.confirm table .form-photo td,
body.form .contents.confirm table .form-movie td {
  font-size: 14px;
}
body.form .contents.confirm table .item39,
body.form .contents.confirm table .item38,
body.form .contents.confirm table .item17,
body.form .contents.confirm table .item18,
body.form .contents.confirm table .item19,
body.form .contents.confirm table .item20,
body.form .contents.confirm table .item21,
body.form .contents.confirm table .item22,
body.form .contents.confirm table .item23,
body.form .contents.confirm table .item27,
body.form .contents.confirm table .item24,
body.form .contents.confirm table .item29,
body.form .contents.confirm table .item30{
    padding-bottom: 25px
}
body.form .confirm .btn-set{
    margin: 20px 0;
}
body.form .contents table .required {
  font-weight: medium;
  color: #ff5656;
  margin-left: .5em;
  font-size: 10px;
}
body.form .contents table .required::after{
  content: "必須";
  width: 2em;
  font-size: 10px;
}

/* --PC/SP版完了画面メッセージ-- */

/* --画像-- */
body.form .contents table .form-img .img {
  margin-bottom: 20px;
}
body.form .contents table .form-img .img img {
  width: 100%;
  vertical-align: bottom;
}

/* -- テキスト-- */
body.form .contents table .form-text .text {
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
  font-size: 14px;
  text-align: left;
  line-height: 1.8;
  font-weight: medium;

}

body.form .contents table .form-text .text#item30 {
  background: #fff;
  color: #ff5656;
  margin-bottom: 20px;
  font-size: 14px;
}

/* 【追加】--テキスト-- */
body.form h1{
  margin-bottom: 0;
}
body.form h2{
  display: none;
}
body.form .contents .text1{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 1.5;
  border-radius: 10px;
}
body.form .contents .box2{
  background: #fcf4e0;
  font-size: 12px;
  padding: 20px 20px 0px 20px;
  text-align: left;
    line-height: 1.6;
}
body.form .contents .box3{
  background: #fcf4e0;
  font-size: 12px;
  margin-bottom: 40px;
  padding: 20px;
  text-align: left;
    line-height: 1.6;
}
body.form .contents .note{
  margin-bottom: 40px;
  letter-spacing: .2em;
  line-height: 1.4;
}
body.form .contents .text2,
body.form .contents .text3{
font-size: 14px;
font-weight: medium;
font-color: #696969;
margin-bottom: 30px;
}
body.form .form-error{
  margin-bottom: 60px;
  color: #F56562;
  font-size: 14px;
  font-weight: medium;
}
body.form .contents .form-error li{
  margin-bottom: 10px;
}
.file-name-view{
  color: #ff5656;
  font-size: 14px;
}

/* --区切り線-- */
body.form .contents table .form-hr .form-hr hr {
  margin-bottom: 20px;
}

/* --入力枠-- */
body.form .contents input,
body.form .contents textarea {
  padding: 15px 1.5em;
  margin-bottom: 0;
}
body.form .contents textarea {
  resize: vertical;
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
}
body.form .contents table .form-textbox input[type=text] {
  box-sizing: border-box;
  padding: 15px 1.5em;
  width: 100%;
  background: #ffffff;
  border: 1px solid #a8a8a8;
  border-radius: 5px;
  font-size: 14px;
}

/* ▼ #item01の番号は毎回変わる ▼ */
/* ▼ 指定しなければ100% ▼ */

/* 【追加】--名前-- */
body.form .contents table .form-textbox #item01,
body.form .contents table .form-textbox #item02{
  width: 60%;
}
/* 【追加】--郵便番号-- */
body.form .contents table .form-textbox #item03,
body.form .contents table .form-textbox #item04{
  width: 60%;
}
/* 【追加】--住所２（番地）-- */
body.form .contents table .form-textbox #item06{
  width: 100%;
}
/* 【追加】--電話番号-- */
body.form .contents table .form-textbox #item10{
    width: 100%;
  }
/* 【追加】--年齢-- */
body.form .contents table .form-textbox #item08{
  width: 50%;
}
/* 【追加】--アカウント-- */
body.form .contents table .form-textbox #item13,
body.form .contents table .form-textbox #item14,
body.form .contents table .form-textbox #item16{
  width: 60%;
}

/* --プルダウンメニュー-- */
body.form .form-select select {
  width: 35%;
  padding: 15px 0;
  font-size: 17px;
  border-radius: 5px;
  border: 1px solid #a8a8a8;
}
/* --ラジオボタン・チェックボックス-- */
body.form .form-radio .item,
body.form .form-checkbox .item {
  background: #f5f5f5;
  text-align: left;
  margin-bottom: 20px;
  margin-right: 5%;
  width: 100%;
  border-radius: 5px;
}
/* 【追加】性別--ラジオボタン・チェックボックス-- */
/* ▼ #item10の番号は毎回変わる ▼ */
body.form .form-radio.item09 .item{
  float: left;
  width: 120px;
}
body.form .form-radio .item label,
body.form .form-checkbox .item label{
  display: inline-block;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  height: 100%;
}

body.form .form-radio .item img,
body.form .form-checkbox .item img {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
body.form .form-radio .item input,
body.form .form-checkbox .item input {
  display: inline-block;
  padding: 0;
}
/* 画像付きラジオボタン・チェックボタン 確認画面 */
body.form .form-radio .input-value img,
body.form .form-radio .input-value span {
  display: block;
}

/* --郵便番号検索ボタン-- */
body.form .contents table .form-zipcode-btn {
  display: inline-block;
  padding: 14px 1em;
  margin-left: 15px;
  background-color: #f1ae36;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
}

/* --画像投稿・動画投稿-- */
body.form .contents table .form-image,
body.form .contents table .form-video,
body.form .contents table .form-photo,
body.form .contents table .form-movie {
  word-break: break-all;
}
/* 【追加】--画像選択ボタン・動画選択ボタン-- */
/* ▼ 郵便番号検索ボタンと同じスタイル ▼ */
body.form .contents table .form-image button,
body.form .contents table .form-video button{
  color: #fff;
  background: #f1ae36;
  font-size: 14px;
  padding: 10px 1em;
  border: none;
  border-radius: 5px;
}
body.form .contents table .form-image button:hover,
body.form .contents table .form-video button:hover{
  opacity: .5;
}

/* 【追加】--確認ボタン・登録するボタン-- */
body.form .contents .btn-set input[type=button]{
  color: #fff;
  background: #108faf;
  font-size: 18px;
  width: 160px;
  padding: 14px 1.5em;
  border: 2px solid #108faf;
  border-radius: 5px;
  font-weight: 600;
  margin-right: 15px;
}
/* 【追加】--リセットボタン-- */
body.form .contents .btn-set input[type=reset],
body.form .contents .btn-set input#btn-back[type=button]{
  color:#108faf;
  background: #fff;
  font-size: 18px;
  width: 160px;
  padding: 14px 1.5em;
  border: 2px solid #108faf;
  border-radius: 5px;
  font-weight: 600;
  margin-right: 0;
}
body.form .contents input.btn-send:hover,
body.form .contents input.btn-reset:hover{
  opacity: .5;
}

/* --閉じるボタン-- */
body.form .footer .link-close {
  margin-bottom: 0;
}
body.form .footer .link-close a {
  border-radius: 50px;
  text-align: center;
  color: #fff;
  margin: 0px auto;
  padding: 10px 20px;
  background: #a1a1a1;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}


/* ------------------------------------------------------
    スマートフォン対応
   ------------------------------------------------------ */
@media screen and (max-width: 680px){

  /* ページ横幅指定解除 */
  body.form { min-width: 100%; }

  /* --コンテンツの幅指定を解除-- */
  body.form #wrapper { width: 100%; }

  /* フォームの左右余白 */
  body.form #wrapper .contents {
    width: 100%;
    padding: 20px 5%;
  }

  /* --入力枠横幅-- */
  body.form .contents table .form-textbox input[type=text] {
    padding: 12px 1em;
  }

  body.form #wrapper .contents.complete .complete-text{
    font-size: 16px;
  }
  /* ------------------------------------------------------
    フォームのラベルと入力項目を横並びにする場合は下記を削除
   ------------------------------------------------------ */
  /* --項目名-- */
  body.form .contents table .form-img th,
  body.form .contents table .form-text th,
  body.form .contents table .form-hr th,
  body.form .contents table .form-textbox th,
  body.form .contents table .form-textarea th,
  body.form .contents table .form-select th,
  body.form .contents table .form-radio th,
  body.form .contents table .form-checkbox th,
  body.form .contents table .form-photo th,
  body.form .contents table .form-movie th {
    margin-bottom: 15px;
    font-size: 16px;
  }
  /* --入力内容-- */
  body.form .contents table .form-textbox td,
  body.form .contents table .form-textarea td,
  body.form .contents table .form-select td,
  body.form .contents table .form-radio td,
  body.form .contents table .form-checkbox td,
  body.form .contents table .form-photo td,
  body.form .contents table .form-movie td {
    width: 100%; 
    /* margin-bottom: 20px;
    padding-bottom: 20px; */
    font-size: 16px;
  }
  body.form .contents table .form-radio td,
  body.form .contents table .form-checkbox td{
    padding-bottom: 0;
  }

  body.form .contents table td { width: 100%; }
  /* 【追加】--入力内容-- */
  body.form .contents table .form-textbox td,
  body.form .contents table .form-textarea td,
  body.form .contents table .form-select td,
  body.form .contents table .form-radio td, 
  body.form .contents table .form-checkbox td, 
  body.form .contents table .form-photo td,
  body.form .contents table .form-movie td {
    font-size: 14px;
    line-height: 1.6;
  }
  /* 【追加】--確認画面　項目名-- */
  body.form .contents.confirm table .form-img th,
  body.form .contents.confirm table .form-text th,
  body.form .contents.confirm table .form-hr th,
  body.form .contents.confirm table .form-textbox th,
  body.form .contents.confirm table .form-textarea th,
  body.form .contents.confirm table .form-select th,
  body.form .contents.confirm table .form-radio th,
  body.form .contents.confirm table .form-checkbox th,
  body.form .contents.confirm table .form-photo th,
  body.form .contents.confirm table .form-movie th {
    font-size: 16px;
  }

  /* 【追加】--テキスト-- */
  body.form h2{
    font-size: 5vw;
    background: #f1ae36;
    color: #fff;
  }
  body.form .contents .text2,
  body.form .contents .text3{
  font-size: 16px;
  }
  /* --入力枠-- */
  body.form .contents input,
  body.form .contents textarea {
    padding: 12px 1.5em;
  }
  /* --プルダウンメニュー-- */
  body.form .form-select select {
 
  }
  body.form .contents table .form-textbox input[type=text] {
    padding: 12px 1.5em;
  }
  /* 【追加】--画像選択ボタン・動画選択ボタン-- */
  body.form .contents table .form-image button:hover,
  body.form .contents table .form-video button:hover{
    opacity: 1;
  }
  /* 【追加】--確認ボタン・登録するボタン-- */
  body.form .contents .btn-set input[type=button]{
    font-size: 16px;
    width: 120px;
    padding: 10px 1.5em;
    margin-right: 10px;
    line-height: 20px;
  }
  /* 【追加】--リセットボタン-- */
  body.form .contents .btn-set input[type=reset],
  body.form .contents .btn-set input#btn-back[type=button]{
    font-size: 16px;
    width: 120px;
    padding: 10px 1.5em;
    margin-right: 0;
    line-height: 20px;
  }
  body.form .contents input.btn-send:hover,
  body.form .contents input.btn-reset:hover{
    opacity: 1;
  }

  /* --閉じるボタン-- */
  body.form .footer .link-close a {
    font-size: 16px;
  }
  /* 【追加】--閉じるボタンのバツ-- */
  body.form .footer .link-close a::before,
  body.form .footer .link-close a::after{
    width: 18px;
  }
  body.form .footer .link-close a:hover {
    opacity: 1;
  }

}

/* ------------------------------------------------------
    スマートフォン対応
   ------------------------------------------------------ */
   @media screen and (max-width: 480px){
       /* --項目名-- */
    body.form .contents table .form-img th,
    body.form .contents table .form-text th,
    body.form .contents table .form-hr th,
    body.form .contents table .form-textbox th,
    body.form .contents table .form-textarea th,
    body.form .contents table .form-select th,
    body.form .contents table .form-radio th,
    body.form .contents table .form-checkbox th,
    body.form .contents table .form-photo th,
    body.form .contents table .form-movie th {
      margin-bottom: 10px;
      padding-top: 0;
      padding-bottom: 0;
    }
    /* 【追加】--年齢-- */
    body.form .contents table .form-textbox #item08{
      width: 50%;
    }
/* 【追加】--郵便番号-- */

    /* --プルダウンメニュー-- */
    body.form .form-select select {
      width: 60%;
      padding: 15px 0;
    }
body.form .contents .text1{
  font-size: 16px;
}
   }