/*
 * formrun-contact.css — DET /ja/contact/・英語フォーム（/en/ ほか英語フォームを使う各言語ページ）の formrun（コード型）フォームを、
 * form-mailer 版（form-mailer-contact.css）と同じ見た目にする。2026-10-27 ローカル試行。
 *  - 行: div.fr-row ＝ ラベル div.fr-label（必須は .fr-required[data-lbl]）＋ 入力 div.fr-field
 *  - 入力欄・セレクト・ラジオ・チェックボックスの見た目は theme（body.page-contact input… ）がそのまま効く
 *  - 確認画面は formrun.js の確認モード（data-formrun-show-if-confirm / hide-if-confirm）でページ内に表示
 */
body.page-contact form.formrun {
  position: relative;
}
/* formrun.js の表示切り替え（入力画面⇔確認画面・戻るボタン）を、下の display 指定より常に優先させる */
body.page-contact form.formrun [data-formrun-back-button]:not(.formrun-system-show),
body.page-contact.formrun-system-confirm form.formrun [data-formrun-hide-if-confirm],
body.page-contact:not(.formrun-system-confirm) form.formrun [data-formrun-show-if-confirm] {
  display: none !important;
}

/* ラベル（dt 相当） */
body.page-contact form.formrun .fr-label {
  position: relative;
  margin: 20px 0 0;
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
}
body.page-contact form.formrun .fr-row:first-of-type .fr-label {
  margin-top: 0;
}
body.page-contact form.formrun .fr-required::after {
  content: attr(data-lbl);
  background-color: #a00064;
  font-size: 12px;
  display: block;
  padding: 0 7px;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 0;
  top: 10px;
}

/* 入力（dd 相当） */
body.page-contact form.formrun .fr-field {
  margin: 0;
}
body.page-contact form.formrun select {
  max-width: 100%;
  color: #fff;
}

/* お名前：姓・名を横並び */
body.page-contact form.formrun .fr-name {
  display: flex;
  gap: 10px;
}
body.page-contact form.formrun .fr-name input {
  flex: 1 1 0;
  min-width: 0;
}

/* メール（確認用）・住所：入力欄どうしの間隔 */
body.page-contact form.formrun .fr-mcon {
  margin-top: 10px;
}
body.page-contact form.formrun .fr-addr :is(input, select) {
  margin-bottom: 10px;
}
body.page-contact form.formrun .fr-addr input[data-zip-last] {
  margin-bottom: 0;
}
body.page-contact form.formrun .fr-zip {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
body.page-contact form.formrun .fr-zip input {
  width: 60%;
  margin: 0 0 0 10px;
}

/* ラジオ（性別） */
body.page-contact form.formrun .fr-radios label {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
}
body.page-contact form.formrun .fr-radios label + label {
  margin-left: 2em;
}
/* お問い合わせ項目は性別（ラジオ）と同じ丸いデザインで 2列×2段 に並べる（複数選択のチェックボックスのまま） */
body.page-contact form.formrun .fr-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  row-gap: 10px;
  column-gap: 2em;
}
body.page-contact form.formrun .fr-checks label {
  display: flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
}
body.page-contact form.formrun .fr-checks input[type=checkbox] {
  flex: none;
}
body.page-contact form.formrun .fr-checks input[type=checkbox]::before {
  width: 24px;
  height: 24px;
  border-radius: 100px;
}
body.page-contact form.formrun .fr-checks input[type=checkbox]::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 100px;
  background-color: #a00064;
}

/* アラビア語ページはページ全体が右→左（RTL）だが、フォームは英語なので左→右で表示する */
body.page-contact.lang-ar form.formrun {
  direction: ltr;
  text-align: left;
}
body.page-contact.lang-ar form.formrun input[type=radio] {
  margin-left: 0;
  margin-right: 1.3em;
}

/* 規約：全文を .l-privacypolicy .e-inner と同じ枠で、お問い合わせ内容の約1.5倍の高さでスクロール */
body.page-contact form.formrun .fr-policy {
  height: 42vw;
  overflow-y: scroll;
  margin-bottom: 15px;
  padding: 20px 10px;
  border: 1px solid #666;
  color: #ccc;
  font-size: 12px;
  font-weight: normal;
  line-height: 2.08;
}
/* 同意チェックは送信ボタンと同じ中心線に置く */
body.page-contact form.formrun .fr-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  cursor: pointer;
}

/* エラー表示（黒地なので明るい赤） */
body.page-contact form.formrun .fr-error {
  color: #ff6b8e;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}
body.page-contact form.formrun .fr-agree-error {
  text-align: center;
}

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

/* reCAPTCHA（確認画面だけ。チェックするまで送信ボタンは押せない＝灰色） */
body.page-contact form.formrun .fr-recaptcha {
  display: flex;
  justify-content: center;
  margin: 25px 0 0;
}

/* ボタン（.e-btn button.tosend 相当）。確認画面では「戻る」（枠線のみ）と「送信する」を並べる */
body.page-contact form.formrun .fr-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 10.6666666667vw 0 0;
}
body.page-contact form.formrun .fr-submit,
body.page-contact form.formrun .fr-back {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  padding: 24px;
  border: 1px solid #a00064;
  border-radius: 0;
  background: #a00064;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
body.page-contact form.formrun .fr-back {
  background: transparent;
}
body.page-contact form.formrun .fr-submit:disabled {
  background-color: #555;
  border-color: #555;
  color: #aaa;
  cursor: not-allowed;
}

/* PC：ラベル 190px ＋ 入力（.form-table dl の flex と同じ寸法） */
@media (min-width: 768px) {
  body.page-contact form.formrun .fr-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }
  body.page-contact form.formrun .fr-label,
  body.page-contact form.formrun .fr-row:first-of-type .fr-label {
    margin: 0;
    padding: 25px 0 15px;
  }
  /* 必須バッジと入力欄の間隔：theme の 10px（列の間）→ 2.5倍の 25px（バッジを 15px 左へ） */
  body.page-contact form.formrun .fr-required::after {
    top: 29px;
    right: 15px;
  }
  /* 英語フォームは「Mandatory」バッジが長いので、長いラベルはバッジの手前で折り返す */
  body.page-contact form.formrun .fr-required[data-lbl="Mandatory"] {
    padding-right: 100px;
  }
  body.page-contact form.formrun .fr-field {
    margin: 0 0 10px;
    padding: 15px 0;
  }
  /* お問い合わせ項目・性別の1行目を必須バッジ（top 29px・高さ 24px）の中心にそろえる */
  body.page-contact form.formrun .fr-field:has(> .fr-checks, > .fr-radios) {
    padding-top: 27px;
  }
  body.page-contact form.formrun .fr-policy {
    height: 255px;
    padding: 30px;
    font-size: 15px;
  }
  /* 入力列(右列)からラベル列ぶん左へ広げ、フォーム全幅＝ボタンと同じ中心にする */
  body.page-contact form.formrun .fr-agree,
  body.page-contact form.formrun .fr-agree-error {
    margin-left: -200px;
  }
  /* 確認画面：入力欄が無いぶん、項目名と値の高さをそろえる */
  body.page-contact.formrun-system-confirm form.formrun .fr-field {
    padding-top: 25px;
  }
  body.page-contact.formrun-system-confirm form.formrun .fr-value {
    font-size: 14px;
    line-height: 24px;
  }
  body.page-contact form.formrun .fr-buttons {
    gap: 30px;
    margin-top: 35px;
  }
  body.page-contact form.formrun .fr-submit,
  body.page-contact form.formrun .fr-back {
    width: 300px;
    transition: all .25s ease-in;
  }
  body.page-contact form.formrun .fr-submit:not(:disabled):hover,
  body.page-contact form.formrun .fr-back:hover {
    opacity: .7;
  }
}

/* ---- 不備の一覧と赤枠（formrun-errors.js） 2026-10-28。黒地なので明るい赤 ---- */
body.page-contact form.formrun .fr-row-error .fr-label {
  color: #ff6b8e;
}
body.page-contact form.formrun .fr-row-error :is(input[type=text], select, textarea) {
  outline: 2px solid #ff6b8e;
  outline-offset: -2px;
}
body.page-contact form.formrun .fr-error {
  font-weight: bold;
}
body.page-contact form.formrun .fr-error::before {
  content: '! ';
}
body.page-contact form.formrun .fr-summary {
  margin: 30px 0 0;
  padding: 18px 22px;
  border: 2px solid #ff6b8e;
  background: rgba(255, 107, 142, .1);
  color: #ff6b8e;
  font-size: 15px;
  line-height: 1.8;
}
body.page-contact form.formrun .fr-summary[hidden] {
  display: none;
}
body.page-contact form.formrun .fr-summary__title {
  margin: 0 0 8px;
  font-weight: bold;
}
body.page-contact form.formrun .fr-summary ul {
  margin: 0;
  padding: 0 0 0 1.3em;
  list-style: disc;
}
body.page-contact form.formrun .fr-summary a {
  color: #ff6b8e;
  text-decoration: underline;
}
body.page-contact.lang-ar form.formrun .fr-summary {
  direction: ltr;
  text-align: left;
}

/* ---- 進捗（入力→確認→完了） 2026-10-28。nabel.co.jp と同じ形を黒地・マゼンタで（DET の theme には無い）。確認画面では「確認」を現在地にする ---- */
body.page-contact .step {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 86.67%;
  margin: 30px auto 40px;
}
body.page-contact .step::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #666;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}
body.page-contact .step > * {
  background: #333;
  color: #fff;
  font-weight: bold;
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}
body.page-contact .step .is-current {
  background: #a00064;
}
body.page-contact.formrun-system-confirm .step .step01.is-current {
  background: #333;
}
body.page-contact.formrun-system-confirm .step .step02 {
  background: #a00064;
}
body.page-contact.lang-ar .step {
  direction: ltr;
}
@media (min-width: 768px) {
  body.page-contact .step {
    width: 544px;
    margin: 40px auto 60px;
  }
  body.page-contact .step > * {
    width: 124px;
    height: 124px;
    font-size: 18px;
  }
}

/* ---- お問い合わせ・完了ページでは、ページ見出し（「お問い合わせ」など）をスクロールに追従させない 2026-10-28 ----
   theme のスクリプトが .stay の margin-top をスクロール量に合わせて書き換えているので、ここで打ち消す */
body.page-contact .contents-area--header.stay {
  margin-top: 0 !important;
}