@charset "UTF-8";

/* ============================================================
   mailformpro-new.css
   mailformpro.css のSP表示崩れを修正したカスタム版
   ============================================================ */

/* mailformpro.css の内容をそのまま継承しつつ、
   問題のある箇所だけ上書きする */

body { overflow-x: hidden; }

div#mfp_hidden { overflow:hidden; width:1px; height:1px; padding:0; margin:0; }
div#mfp_hidden input { margin:10px; }
div.mfp_thanks { padding:30px; }
div.mfp_thanks p { line-height:1.7em; }
div.mfp_thanks ul.mfp_caution { margin:0; padding:0; }
div.mfp_thanks ul.mfp_caution li { display:block; color:#C00; margin:0; padding:5px 0; }
div#mfp_thanks { text-align:center; font-size:18px; padding:20px 0; }
div#mfp_thanks strong { color:#C00; font-size:24px; }

form#mailformpro { padding:10px 0; }
form#mailformpro dl dt { float:left; width:160px; clear:both; font-size:12px; padding:10px 0; text-align:right; border-top:solid 1px #CCC; margin:0; }
form#mailformpro dl dd { border-top:solid 1px #CCC; margin:0; padding:10px 5px 20px 170px; font-size:12px; line-height:1.5em; text-align:left; }
form#mailformpro dl dd ul,form#mailformpro dl dd ol { margin:0; padding:0; }
form#mailformpro dl dd ul li,form#mailformpro dl dd ol li { margin:0; padding:0; list-style:none; }

/* ============================================================
   ▼ ここが重要：ラベルの枠線・背景をリセット
   ============================================================ */
form#mailformpro label {
  border-radius: 3px;
  margin: 3px;
  display: inline-block;
  white-space: nowrap;
  /* 枠線・背景をデフォルトでなし */
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* チェック済み・未チェックのラベル装飾を無効化 */
form#mailformpro label.mfp_checked {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
form#mailformpro label.mfp_not_checked {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* ============================================================
   ▼ SP（800px以下）：フォントサイズを修正
   ============================================================ */
@media screen and (max-width: 800px) {
  form#mailformpro dl dt { float:none; width:auto; font-size:12px; padding:5px; text-align:left; }
  form#mailformpro dl dd { clear:both; border-top:none; padding:5px 15px; font-size:12px; line-height:1.5em; }

  /* 入力欄のfont-size・heightをSP向けに修正 */
  .mfp_element_text,
  .mfp_element_number,
  .mfp_element_select-one,
  .mfp_element_email,
  .mfp_element_tel,
  .mfp_element_date,
  .mfp_element_password {
    font-size: 16px !important;
    height: auto !important;
    padding: 8px !important;
  }
  .mfp_element_textarea {
    font-size: 16px !important;
    padding: 8px !important;
  }

  /* form-input全般（クラスで指定） */
  .form-input,
  .form-select {
    font-size: 16px !important;
    height: 56px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* 郵便番号 */
  .form-input--postal {
    font-size: 16px !important;
    height: 56px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
  }

  .form-textarea {
    font-size: 16px !important;
    padding: 12px !important;
  }

  /* placeholder */
  .form-input::placeholder,
  .form-select::placeholder { font-size: 18px !important; color: #aaa !important; }
  .form-textarea::placeholder { font-size: 14px !important; color: #aaa !important; }

  /* ▼ ラジオ・チェックの行間を広げる */
  .radio-label,
  .check-label {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
  }

  /* MFPのlabel margin(3px)を上書き */
  form#mailformpro label.mfp_checked,
  form#mailformpro label.mfp_not_checked,
  form#mailformpro label {
    margin: 0 !important;
  }

  /* ▼ 住所欄の行間を詰める */
  .form-input--addr {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .form-section__body--address .form-select {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .postal-row {
    margin-bottom: 4px !important;
  }
}

/* ============================================================
   confirm画面・その他MFP固有スタイル（mailformpro.cssと同じ）
   ============================================================ */
table#mfp_confirm_table { border-spacing:0; border-collapse:collapse; width:100%; }
table#mfp_confirm_table tr.mfp_colored { background-color:#F6F7F9; }
table#mfp_confirm_table tr.mfp_achroma { background-color:#FFF; }
table#mfp_confirm_table tr th,table#mfp_confirm_table tr td { text-align:left; font-size:12px; border-top:solid 1px #CCC; padding:5px 10px; }
table#mfp_confirm_table tr th { white-space:nowrap; width:200px; }
table#mfp_confirm_table tr td { line-height:1.5em; word-break:break-all; }

div#mfp_phase_confirm { clear:both; }
div#mfp_phase_confirm h4 { font-size:36px; padding:10px 0 0; text-align:center; }

div#mfp_overlay { position:absolute; display:none; z-index:10001; }
div#mfp_overlay_inner { background-color:#FFF; padding:15px; margin:0 auto; border-radius:5px; box-shadow:0 0 10px #000; width:640px; max-width:90%; }
div#mfp_overlay_background { background-color:#000; position:absolute; display:none; z-index:10000; }
div#mfp_loading_screen { z-index:20000; opacity:0.8; display:none; background-color:#000; position:absolute; }
div#mfp_loading { z-index:20001; position:absolute; display:none; width:40px; height:40px; background-image:url(_images/mfp_loading.gif); }

.mfp_colored { background-color:#F6F7F9; }
.mfp_achroma { background-color:#FFF; }

div.mfp_err { clear:both; display:none; text-align:left; margin:5px 0 0; padding:3px 0 5px 17px; color:#F00; font-size:12px; line-height:normal; background-image:url(_images/mfp_error.gif); background-repeat:no-repeat; background-position:0 1px; }
.mfp_parent_error { border:solid 2px #F00; }
.problem { background-color:#FCC; }
div#mfp_error { background-color:#FEE; border:solid 1px #F00; padding:10px; display:none; }
div#mfp_error p { padding:0; margin:0; font-size:14px; text-align:center; }
div#mfp_error p strong { font-size:18px; color:#F00; }
div#mfp_warning { background-color:#FEE; border:solid 1px #F00; padding:10px; display:none; border-radius:5px; }
div#mfp_warning p { padding:0; margin:0; font-size:14px; text-align:center; }
div#mfp_warning p strong { font-size:18px; color:#F00; }

.mfp_element_all { max-width:90%; }
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
  border:solid 1px #CCC;
  border-radius:3px;
  box-shadow:0 0 5px #CCC inset;
  padding:3px 8px;
  margin:2px;
  vertical-align:middle;
}
.mfp_element_checkbox,
.mfp_element_radio { vertical-align:middle; margin:0 2px; }

.mfp_element_submit,.mfp_element_reset,.mfp_element_button,button.mfp_next,button.mfp_prev {
  border-radius:5px; padding:5px 10px; border:solid 1px #CCC;
  font-size:18px; cursor:pointer; outline:none;
}
.mfp_element_submit:hover,.mfp_element_reset:hover,.mfp_element_button:hover,button.mfp_next:hover,button.mfp_prev:hover { box-shadow:0 2px 15px #CCC; }

div.mfp_buttons { clear:both; padding:10px 0; text-align:center; }
div.mfp_ok { border-radius:5px; background-color:#090; border:solid 1px #090; display:inline-block; line-height:1.5em; padding:0 5px; margin:0 2px; color:#FFF; font-size:10px; display:none; }

div#mfp_error,div#mfp_warning { display:none; }

ul#mfp_phase_stat { padding:10px; text-align:center; }
ul#mfp_phase_stat li { display:inline-block; padding:8px 15px; border-radius:5px; margin:0 5px; list-style:none; font-size:14px; }
ul#mfp_phase_stat li.mfp_phase_arrow { box-shadow:none; color:#999; padding:8px 0; }
ul#mfp_phase_stat li.mfp_active_phase { box-shadow:0 1px 6px #000; background-color:#0068B7; border:solid 2px #0068B7; font-weight:bolder; color:#FFF; }
ul#mfp_phase_stat li.mfp_inactive_phase { background-color:#EEE; border:solid 2px #EEE; color:#999; box-shadow:0 1px 6px #CCC; }

div.mfp_guide { position:relative; width:1px; height:1px; }
div.mfp_guide div { position:absolute; bottom:0; left:0; white-space:nowrap; border-radius:5px; padding:5px 10px; line-height:1em; font-size:12px; color:#FFF; font-weight:bolder; background:#F00; display:none; }

div.prefcodeWrapper {
  position: relative !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
div.prefcodeResult {
  position: absolute !important;
 top: calc(100% + 20px) !important;
  left: -188px !important;   /* 〒マーク分だけ左にずらす */
  right: auto !important;
  width: calc(100vw - 32px) !important;
  max-width: 280px !important;
  min-width: 180px !important;
  z-index: 10000 !important;
  background-color: #fff !important;
  border: solid 1px #CCC !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  display: none;
}
div.prefcodeResult div { cursor: pointer; font-size: 14px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.prefcodeResult div:hover { background-color: #C9EBFB; }
div.prefcodeResult div.prefcodeNext { background-color: #EEE; text-align: center; }
div.prefLoading { padding: 60px 100px; background: url(_images/mfp_zip_loading.gif) no-repeat center center; }

.hidefield { height:0; overflow:hidden; }
.showfield { height:auto; overflow:visible; }