@charset "UTF-8";
/*
  Dojo ウェブマニュアル — フォーム関連スタイル
  ==============================================================
  統合元:
    form.css     (全デバイス共通)
    form_pc.css  → @media (min-width: 768px) に統合
    form_sp.css  → @media (max-width: 767px) に統合
                   （生ソース内の入れ子 @media only screen and
                    (max-width: 767px) は外側と同一条件のため
                    統合時に単一の @media にまとめている）

  依存: vars.css を先に読み込むこと
  ==============================================================

  目次:
    1. elements（input / select / textarea 等の基本要素）
    2. contact input（共通 / 必須・任意アイコン）
    3. error message（エラーメッセージ）
    4. completion message（完了メッセージ）
    5. btn（送信ボタン）
    6. privacy（プライバシーポリシー）
    7. メディアクエリ: PC (min-width: 768px)
    8. メディアクエリ: SP (max-width: 767px)
  ==============================================================
*/

/* ================================================================
   1. elements
   ================================================================ */

label { vertical-align: middle; }

input,
select, optgroup, option,
textarea {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
  border: 1px solid var(--color-form-border);   /* #ccc */
  font-family: 'Meiryo', 'メイリオ', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  color: var(--color-text);   /* #272727 */
}

select {
  padding: 12px 10px;
  background: var(--color-bg-white);   /* #fff */
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-white) inset;   /* #fff */
}

input[type=text] {
  width: 100%;
  padding: 12px 10px;
}

input[type="email"] {
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 15px;
}
input[type="email"]:last-child { margin-bottom: 0; }

input[type="tel"] {
  width: 100%;
  padding: 12px 10px;
}

input[type="radio"] {
  position: relative;
  margin-right: 8px;
  top: -2px;
}

input[type="checkbox"] { margin-right: 0.3em; }

input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="submit"][disabled] {
  background-color: var(--color-form-disabled) !important;   /* #ddd */
  -webkit-transition: none !important;
  transition: none !important;
  cursor: default;
}

textarea {
  width: 100%;
  height: 200px;
  padding: 12px 10px;
  resize: vertical;
}

.form_input form { margin-top: 50px; }

::-webkit-input-placeholder { font-size: 1.4rem; }
:-ms-input-placeholder { font-size: 1.4rem; }
::-ms-input-placeholder { font-size: 1.4rem; }
::placeholder { font-size: 1.4rem; }

/* ================================================================
   2. contact input（共通 / 必須・任意アイコン）
   ================================================================ */

/* ラジオ/チェックボックスのリスト */
.btn_list li { margin-bottom: 15px; }
.btn_list li:last-child { margin-bottom: 0; }

.age input { width: 5em; }

.zip .zip_code input { width: 10em; }
.zip dl dt, .zip dl dd { margin-top: 5px; }

/* icon 必須 / 任意 */
.required, .any {
  line-height: 1;
  position: relative;
}
.required::before, .any::before {
  float: right;
  display: inline-block;
  padding: 4px 10px;
  color: var(--color-text-white);   /* #fff */
  font-size: 1.1rem;
  margin-top: -3px;
}
.required::before {
  content: "必須";
  background-color: var(--color-required-bg);   /* #e02a12 */
}
.any::before {
  content: "任意";
  background-color: var(--color-optional-bg);   /* #0068b7 */
}

/* ================================================================
   3. error message
   ================================================================ */

.error_txt {
  margin: 50px 10px;
  color: var(--color-error);   /* #f33737 */
  text-align: center;
}

/* ================================================================
   4. completion message
   ================================================================ */

.completion_txt { line-height: 1.8; }

/* ================================================================
   5. btn（送信ボタン）
   ================================================================ */

.consent_txt {
  margin-top: 50px;
  text-align: center;
}

.form_btn_wrap {
  margin-top: 50px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.submit_btn {
  width: 300px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50px;
  background: var(--color-accent);      /* #60398a */
  color: var(--color-text-white);       /* #fff */
  padding: 20px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mw_wp_form_input .submit_btn { width: 460px; }

.submit_btn.back {
  width: 300px;
  color: var(--color-btn-back-text);   /* #4e4e4e */
  background: var(--color-bg-gray);    /* #f5f5f5 */
  font-weight: normal;
  margin-right: 2em;
}
.submit_btn.back:hover {
  background: var(--color-bg-offwhite);   /* #fcfcfc */
}

/* ================================================================
   6. privacy（プライバシーポリシー）
   ================================================================ */

.privacy { background: var(--color-bg-gray); }   /* #f5f5f5 */

.privacy .inner {
  border-radius: 10px;
  background: var(--color-bg-white);   /* #fff */
  padding: 40px;
}

.privacy .scroll_wrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 450px;
  overflow-y: scroll;
  padding: 10px 30px 10px 0;
}
.privacy .scroll_wrap > dl { margin-top: 30px; }
.privacy .scroll_wrap > dl dt {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
}
.privacy .scroll_wrap > dl dl:first-of-type dd { margin-bottom: 20px; }
.privacy .scroll_wrap ul { margin-top: 15px; }
.privacy .scroll_wrap ul.disc li { list-style-type: disc; }
.privacy .scroll_wrap ul.en li { list-style-type: lower-alpha; }
.privacy .scroll_wrap ul li { margin-left: 28px; }
.privacy .scroll_wrap ul li + li { margin-top: 5px; }

/* ================================================================
   7. メディアクエリ: PC (min-width: 768px)
   ================================================================
   統合元: form_pc.css
   ================================================================ */

@media (min-width: 768px) {

  /* elements */
  input[type="text"] { width: 60%; }
  input[type="text"].input-w50p { width: 30%; }

  input[type="email"] { width: 60%; }
  input[type="email"].input-w50p { width: 30%; }

  input[type="tel"] { width: 60%; }
  input[type="tel"].input-w50p { width: 30%; }

  /* error message */
  .error_txt { margin: 100px 0; }

  /* btn */
  .form_btn_wrap input + input { margin-left: 30px; }
  .submit_btn:hover { background: var(--color-accent-hover); }   /* #7c52a9 */

} /* end @media (min-width: 768px) */


/* ================================================================
   8. メディアクエリ: SP (max-width: 767px)
   ================================================================
   統合元: form_sp.css
   ================================================================ */

@media (max-width: 767px) {

  /* elements */
  select { width: 100%; }
  .form_input form { margin-top: 7.998vw; }

  /* btn */
  .consent_txt { margin-top: 7.998vw; }
  .form_btn_wrap {
    margin-top: 9.331vw;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .form_btn_wrap input + input { margin-top: 6.665vw; }
  .submit_btn {
    width: 100%;
    font-size: 4.2656vw;
  }
  .submit_btn.back {
    margin-right: 0;
    width: 100%;
    margin-bottom: 1em;
  }

  /* privacy */
  .privacy .inner { padding: 5.332vw; }
  .privacy .scroll_wrap {
    height: 79.98vw;
    padding: 2.666vw 3.999vw 2.666vw 0vw;
  }
  .privacy .scroll_wrap > dl dt { font-size: 4.2656vw; }

} /* end @media (max-width: 767px) */