/*
 * formrun-contact.css — nabel.co.jp /contact/ の formrun（コード型）フォームを、
 * form-mailer 版（form-mailer-contact.css）と同じ見た目にする。2026-10-27 ローカル試行。nabel.com の同名ファイルが元で、末尾に co.jp 用（住所・都道府県・確認用メール）を足している。
 *  - 行: div.fr-row ＝ ラベル div.fr-label（必須は .fr-required[data-lbl]）＋ 入力 div.fr-field
 *  - 確認画面は formrun.js の確認モード（data-formrun-show-if-confirm / hide-if-confirm）でページ内に表示
 *  - 値は form-mailer 版と同じ（theme の body#contact .formarea dt/dd/.btn の実測値）
 */
body#contact .formarea form.formrun {
  position: relative;
}
/* formrun.js の表示切り替え（入力画面⇔確認画面・Back ボタン）を、下の display 指定より常に優先させる */
body#contact .formarea form.formrun [data-formrun-back-button]:not(.formrun-system-show),
body#contact.formrun-system-confirm .formarea form.formrun [data-formrun-hide-if-confirm],
body#contact:not(.formrun-system-confirm) .formarea form.formrun [data-formrun-show-if-confirm] {
  display: none !important;
}

/* ラベル（dt 相当） */
body#contact .formarea form.formrun .fr-label {
  position: relative;
  margin: 0 0 5px;
}
body#contact .formarea form.formrun .fr-required::after {
  content: attr(data-lbl);
  background: #de0028;
  color: #fff;
  text-align: center;
  font-size: 10.4px;
  display: inline-block;
  position: absolute;
  padding-left: .7em;
  padding-right: .7em;
  right: 0;
  top: 3px;
}

/* 入力（dd 相当） */
body#contact .formarea form.formrun .fr-field {
  margin: 0 0 15px;
}
body#contact .formarea form.formrun input[type=text],
body#contact .formarea form.formrun textarea {
  font-size: 16px;
  width: 100%;
  border: none;
  border-radius: 0;
  background-color: #f5f5f5;
  outline: none;
  padding: 10px;
  color: #000;
  vertical-align: middle;
}
body#contact .formarea form.formrun textarea {
  height: 163px;
}
body#contact .formarea form.formrun input[type=text]::placeholder,
body#contact .formarea form.formrun textarea::placeholder {
  color: #999;
}
body#contact .formarea form.formrun .fr-name {
  display: flex;
  gap: 20px;
}
body#contact .formarea form.formrun .fr-name input {
  flex: 1 1 0;
  min-width: 0;
}

/* チェックボックス（Inquiry・規約同意） */
body#contact .formarea form.formrun input[type=checkbox] {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  margin: 0 12px 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff no-repeat center / 14px 14px;
  vertical-align: middle;
  cursor: pointer;
  flex: none;
}
body#contact .formarea form.formrun input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.5 3.5L12.5 3' fill='none' stroke='%2323a09e' stroke-width='3'/%3E%3C/svg%3E");
}
body#contact .formarea form.formrun .fr-checks {
  display: grid;
  grid-template-columns: 1fr;
}
body#contact .formarea form.formrun .fr-checks label,
body#contact .formarea form.formrun .fr-agree {
  display: flex;
  align-items: center;
  font-weight: 400;
  cursor: pointer;
}

/* 規約：全文をお問い合わせ詳細の約1.5倍の高さでスクロール、同意チェックは枠の外・ボタンと同じ中心 */
body#contact .formarea form.formrun .fr-policy {
  height: 245px;
  overflow-y: auto;
  margin-bottom: 15px;
  padding: 15px 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.8;
}
body#contact .formarea form.formrun .fr-agree {
  justify-content: center;
}

/* エラー表示 */
body#contact .formarea form.formrun .fr-error {
  color: #de0028;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}
body#contact .formarea form.formrun .fr-agree-error {
  text-align: center;
}

/* 確認画面（ページ内） */
body#contact .formarea form.formrun .fr-confirm-note {
  margin: 0 0 20px;
  padding: 15px 20px;
  background: #eef7f7;
  border-left: 4px solid #23a09e;
  font-size: 15px;
}
body#contact .formarea form.formrun .fr-value {
  font-size: 16px;
  line-height: 1.8;
  min-height: 1.8em;
  word-break: break-word;
}
body#contact .formarea form.formrun .fr-pre span {
  white-space: pre-wrap;
}

/* ボタン（btnarea / .btn 相当）。確認画面では Back（白地・緑枠）と Submit を並べる */
body#contact .formarea form.formrun .fr-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 25px 0 0;
}
body#contact .formarea form.formrun .fr-submit,
body#contact .formarea form.formrun .fr-back {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 90.91%;
  margin: 0;
  border: 1px solid #23a09e;
  border-radius: 50px;
  padding: 0 35px;
  background: #23a09e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 20px center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s ease-in;
}
body#contact .formarea form.formrun .fr-submit:hover {
  background-color: #18908e;
}
/* reCAPTCHA（チェックするまで送信ボタンは押せない＝灰色） */
body#contact .formarea form.formrun .fr-recaptcha {
  display: flex;
  justify-content: center;
  margin: 25px 0 0;
}
body#contact .formarea form.formrun .fr-submit:disabled {
  background-color: #bdbdbd;
  border-color: #bdbdbd;
  cursor: not-allowed;
}
body#contact .formarea form.formrun .fr-back {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%2323a09e' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 20px center;
  color: #23a09e;
}
body#contact .formarea form.formrun .fr-back:hover {
  background-color: #eef7f7;
}

/* PC：ラベル 252px ＋ 入力 848px の2列 */
@media (min-width: 768px) {
  body#contact .formarea form.formrun .fr-row {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
  }
  body#contact .formarea form.formrun .fr-label {
    margin: 0;
    padding: 39px 0 0;
    font-size: 16px;
    font-weight: 700;
  }
  body#contact .formarea form.formrun .fr-required {
    padding-right: 125px;
  }
  body#contact .formarea form.formrun .fr-required::after {
    height: 22px;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    top: 46px;
    right: 44px;
  }
  body#contact .formarea form.formrun .fr-field {
    margin: 0;
    padding: 18px 0;
    font-size: 18px;
  }
  body#contact .formarea form.formrun input[type=text] {
    height: 80px;
  }
  body#contact .formarea form.formrun input.fr-short[type=text] {
    width: 393px;
  }
  body#contact .formarea form.formrun textarea {
    height: 180px;
  }
  body#contact .formarea form.formrun .fr-checks {
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
  }
  body#contact .formarea form.formrun .fr-value {
    padding-top: 6px;
    font-size: 18px;
  }
  body#contact .formarea form.formrun .fr-policy {
    height: 270px;
    padding: 20px 30px;
  }
  /* 確認画面：入力欄が無いぶん行を詰め、項目名・必須バッジ・値の高さをそろえる */
  body#contact.formrun-system-confirm .formarea form.formrun .fr-label {
    padding-top: 18px;
  }
  body#contact.formrun-system-confirm .formarea form.formrun .fr-required::after {
    top: 23px;
  }
  body#contact.formrun-system-confirm .formarea form.formrun .fr-value {
    padding-top: 0;
    font-size: 16px;
    line-height: 32px;
  }
  /* 入力列からラベル列ぶん左へ広げ、フォーム全幅＝ボタンと同じ中心にする */
  body#contact .formarea form.formrun .fr-agree,
  body#contact .formarea form.formrun .fr-agree-error {
    margin-left: -252px;
  }
  body#contact .formarea form.formrun .fr-buttons {
    gap: 40px;
    margin-top: 40px;
  }
  body#contact .formarea form.formrun .fr-submit,
  body#contact .formarea form.formrun .fr-back {
    width: 380px;
    padding: 10px 0;
    font-size: 18px;
    line-height: 58px;
    background-position: right 29px center;
  }
  body#contact .formarea form.formrun .fr-back {
    background-position: left 29px center;
  }
}

/* ---- co.jp 用：都道府県（select）・住所の小見出し・確認用メール ---- */
body#contact .formarea form.formrun select {
  -webkit-appearance: none;
          appearance: none;
  font-size: 16px;
  width: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 10px 40px 10px 10px;
  color: #000;
  background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 15px center;
  cursor: pointer;
}
body#contact .formarea form.formrun .fr-mcon {
  display: block;
  margin-top: 5px;
}
body#contact .formarea form.formrun .fr-addr {
  font-size: 14px;
}
body#contact .formarea form.formrun .fr-addr :is(input, select) {
  margin-bottom: 10px;
}
body#contact .formarea form.formrun .fr-addr input[data-zip-last] {
  margin-bottom: 0;
}
body#contact .formarea form.formrun .fr-zip {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
body#contact .formarea form.formrun .fr-zip input {
  width: 80%;
  margin: 0 0 0 10px;
}
@media (min-width: 768px) {
  body#contact .formarea form.formrun select {
    height: 80px;
  }
  body#contact .formarea form.formrun select.fr-short {
    width: 393px;
  }
  body#contact .formarea form.formrun .fr-addr {
    font-size: 16px;
  }
  body#contact .formarea form.formrun .fr-zip input {
    width: 243px;
  }
}

/* ---- 不備の一覧と赤枠（formrun-errors.js） 2026-10-28 ---- */
body#contact .formarea form.formrun .fr-row-error .fr-label {
  color: #de0028;
}
body#contact .formarea form.formrun .fr-row-error :is(input[type=text], select, textarea) {
  outline: 2px solid #de0028;
  outline-offset: -2px;
  background-color: #fff5f6;
}
body#contact .formarea form.formrun .fr-row-error :is(.fr-checks, .fr-agree) input[type=checkbox] {
  border-color: #de0028;
}
body#contact .formarea form.formrun .fr-error {
  font-weight: 700;
}
body#contact .formarea form.formrun .fr-error::before {
  content: '! ';
}
body#contact .formarea form.formrun .fr-summary {
  margin: 30px 0 0;
  padding: 18px 22px;
  border: 2px solid #de0028;
  background: #fff5f6;
  color: #de0028;
  font-size: 15px;
  line-height: 1.8;
}
body#contact .formarea form.formrun .fr-summary[hidden] {
  display: none;
}
body#contact .formarea form.formrun .fr-summary__title {
  margin: 0 0 8px;
  font-weight: 700;
}
body#contact .formarea form.formrun .fr-summary ul {
  margin: 0;
  padding: 0 0 0 1.3em;
  list-style: disc;
}
body#contact .formarea form.formrun .fr-summary a {
  color: #de0028;
  text-decoration: underline;
}

/* ---- 進捗（入力→確認→完了） 2026-10-28。確認画面（formrun の確認モード）では「確認」を現在地にする ---- */
body#contact.formrun-system-confirm .contents .step .step01.is-current {
  background: #dddddd;
}
body#contact.formrun-system-confirm .contents .step .step02 {
  background: #23a09e;
}

/* ---- PC：必須ラベルの右あき（バッジの場所）を 125px → 96px に。「お問い合わせ詳細」を1行に収める 2026-10-28 ----
   バッジは右から 44px・幅 約44px なので、文字の右端はラベル幅 252px - 96px = 156px まで（バッジ左端 164px と重ならない） */
@media (min-width: 768px) {
  body#contact .formarea form.formrun .fr-required {
    padding-right: 96px;
  }
}