/*
 * form-mailer-contact.css — /contact/ の form-mailer フォームを既存（MW WP Form）の見た目に合わせる
 * 2026-10-22 ローカル試行。form-mailer 提供の HTML はほぼそのまま、このCSSで寄せている。
 * HTML側の変更（ユーザー指示・コード差替え時は再適用）: ①「*は必須項目です」とラベルの「*」を削除
 *   ②規約全文を span.fm-policy で囲む ③お名前の入力欄外の「姓」「名」を削除 ④同意チェックを label.fm-agree で囲む
 *  - ラベルは <p>（入力なし）、入力欄はその次の <p>。既存の dt / dd に相当
 *  - 必須バッジはラベル文字の「*」を判定できないため、次の <p> にある入力欄の name で付ける
 *    （form-mailer 側で必須項目を変えたら REQUIRED の name 一覧も直すこと）
 *  - 値は theme の style.css（body#contact .formarea dt/dd/.btn）の実測値に合わせている
 */

/* 提供コード冒頭の見出し・リード文は、ページ側に同じものがあるので隠す */
body#contact .formarea form[name="form1"] > h2,
body#contact .formarea form[name="form1"] > h2 + div,
body#contact .formarea form[name="form1"] > p:empty {
  display: none;
}

/* ラベル（dt 相当） */
body#contact .formarea form[name="form1"] > p:not(:empty):not(:has(input, select, textarea)) {
  position: relative;
  margin: 0 0 5px;
}

/* 必須バッジ（REQUIRED） */
body#contact .formarea form[name="form1"] > p:has(+ p :is(
  [name="field_6493752_sei"],
  [name="field_6493757"],
  [name="field_6493753"],
  [name="field_6493845"],
  [name="field_6493851"]
))::after {
  content: '必須';
  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[name="form1"] > p:not(:empty):not(:has(input, select, textarea)) + p {
  margin: 0 0 15px;
}

body#contact .formarea form[name="form1"] input[type=text],
body#contact .formarea form[name="form1"] select,
body#contact .formarea form[name="form1"] 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[name="form1"] input[type=text]::placeholder,
body#contact .formarea form[name="form1"] textarea::placeholder {
  color: #999;
}
body#contact .formarea form[name="form1"] select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 40px;
  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[name="form1"] > p:has([name="field_6493752_sei"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}
body#contact .formarea form[name="form1"] [name="field_6493752_sei"],
body#contact .formarea form[name="form1"] [name="field_6493752_mei"] {
  flex: 1 1 0;
  min-width: 0;
}
body#contact .formarea form[name="form1"] [name="field_6493752_sei"] {
  margin-right: 10px;
}

/* メール（確認用）・住所：入力欄どうしの間隔 */
body#contact .formarea form[name="form1"] [name="field_6493753_mcon"] {
  margin-top: 5px;
}
body#contact .formarea form[name="form1"] > p:has([name="field_6493756_zip"]) {
  font-size: 14px;
}
body#contact .formarea form[name="form1"] > p:has([name="field_6493756_zip"]) :is(input, select) {
  margin-bottom: 10px;
}
body#contact .formarea form[name="form1"] > p:has([name="field_6493756_zip"]) input[name="field_6493756_building"] {
  margin-bottom: 0;
}
body#contact .formarea form[name="form1"] input[name="field_6493756_zip"] {
  width: 80%;
  margin-left: 10px;
}

/* チェックボックス（お問い合わせ内容・規約同意） */
body#contact .formarea form[name="form1"] 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;
}
body#contact .formarea form[name="form1"] 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[name="form1"] > p:has([name="field_6493820"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* 規約：全文（span.fm-policy）をお問い合わせ詳細の約1.5倍の高さでスクロール、同意チェックは枠の外 */
body#contact .formarea form[name="form1"] .fm-policy {
  display: block;
  height: 245px;
  overflow-y: auto;
  margin-bottom: 15px;
  padding: 15px 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.8;
}
/* 同意チェック（label.fm-agree）は送信ボタンと同じ中心線に置く */
body#contact .formarea form[name="form1"] .fm-agree {
  display: block;
  text-align: center;
  cursor: pointer;
}

/* ボタン（btnarea / .btn 相当） */
body#contact .formarea form[name="form1"] > p:has([type=submit]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 25px 0 0;
}
body#contact .formarea form[name="form1"] input[type=submit] {
  -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;
  cursor: pointer;
  transition: all .25s ease-in;
}
body#contact .formarea form[name="form1"] input[type=submit]:hover {
  background-color: #18908e;
}

/* リード文の余白（スマホ。theme は 25px） */
body#contact .contents .lead {
  padding: 50px;
}

/* PC：ラベル 252px ＋ 入力 848px の2列（既存 dl の flex と同じ寸法） */
@media (min-width: 768px) {
  /* リード文の余白（theme は 40px） */
  body#contact .contents .lead {
    padding: 100px 80px 50px;
  }
  body#contact .formarea form[name="form1"] {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
  }
  body#contact .formarea form[name="form1"] > p:not(:empty):not(:has(input, select, textarea)) {
    grid-column: 1;
    margin: 0;
    padding: 39px 0 0;
    font-size: 16px;
    font-weight: 700;
  }
  body#contact .formarea form[name="form1"] > p:has(+ p :is(
    [name="field_6493752_sei"],
    [name="field_6493757"],
    [name="field_6493753"],
    [name="field_6493845"],
    [name="field_6493851"]
  ))::after {
    height: 22px;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    top: 46px;
    right: 44px;
  }
  body#contact .formarea form[name="form1"] > p:not(:empty):not(:has(input, select, textarea)) + p {
    grid-column: 2;
    margin: 0;
    padding: 18px 0;
    font-size: 18px;
  }
  body#contact .formarea form[name="form1"] input[type=text],
  body#contact .formarea form[name="form1"] select {
    height: 80px;
  }
  body#contact .formarea form[name="form1"] :is(input, select):is([name="field_6493757"], [name="field_6493753"], [name="field_6493753_mcon"], [name="field_6493756_pref"]) {
    width: 393px;
  }
  body#contact .formarea form[name="form1"] input[name="field_6493756_zip"] {
    width: 243px;
  }
  body#contact .formarea form[name="form1"] > p:has([name="field_6493756_zip"]) {
    font-size: 16px;
  }
  body#contact .formarea form[name="form1"] > p:has([name="field_6493820"]) {
    grid-template-columns: auto 1fr auto 1fr;
  }
  body#contact .formarea form[name="form1"] [name="field_6493820"]:nth-of-type(even) {
    margin-left: 1em;
  }
  body#contact .formarea form[name="form1"] .fm-policy {
    height: 270px;
    padding: 20px 30px;
  }
  /* 入力列(右列)からラベル列ぶん左へ広げ、フォーム全幅＝ボタンと同じ中心にする */
  body#contact .formarea form[name="form1"] .fm-agree {
    margin-left: -252px;
  }
  body#contact .formarea form[name="form1"] > p:has([type=submit]) {
    grid-column: 1 / -1;
    gap: 40px;
    margin-top: 40px;
  }
  body#contact .formarea form[name="form1"] input[type=submit] {
    width: 380px;
    padding: 10px 0;
    font-size: 18px;
    line-height: 58px;
    background-position: right 29px center;
  }
}