/* ==========================================================================
   お問い合わせ（/contact/）Tayoriフォームの見た目
   現行サイト lower-style.css の .sec-contact（.contact-tbl / .req / .wpcf7-submit /
   .btn-submit / .wpcf7-not-valid-tip）の値を踏襲。
   Tayoriが出力するHTMLは加工しないため、すべて #tayori-form 配下のセレクタで上書きする。
   /contact/ のページでのみ base.njk から読み込まれる。
   ========================================================================== */

/* ---- 項目の並び（現行 .contact-tbl 相当） ---- */
#tayori-form {
  margin-top: 70px;
  font-size: 16px;
}

#tayori-form .form-parts + .form-parts {
  margin-top: 60px;
}

#tayori-form .form-parts > div:first-child {
  position: relative;
  width: 26%;
  padding-left: 60px;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
}

#tayori-form .form-parts > div:last-child {
  flex: 1;
  min-width: 0;
  width: 100%;
}

@media (min-width: 768px) {
  #tayori-form .form-parts {
    display: flex;
  }

  #tayori-form .form-parts > div:first-child {
    flex-shrink: 0;
  }
}

/* ---- 必須バッジ（現行 .req 相当）----
   【重要】Tayoriのコードに必須/任意の情報が無いため、項目の並び順（nth-of-type）で指定する。
   以前はTayori発行のform-parts id（フォームを編集するたびに値が変わる固定ハッシュ）を
   直接指定していたが、2026-11-05のTayoriホスト名変更（埋め込みコード差し替え）でID値が
   変わり、このスタイルが丸ごと効かなくなる事故が発生した。並び順ベースに変更することで、
   「IDは変わるが項目の並び順は変わらない」編集には耐えられるようにしている。
   ただし、Tayori管理画面で項目の並び替え・追加・削除を行った場合はこのnth-of-typeの
   対応関係も崩れるため、その場合は下記の番号と必須/任意の対応を項目順に合わせて見直すこと。
   現在の並び順（.form-parts単位・1始まり）：1お名前(必須) 2フリガナ(必須) 3会社名(必須)
   4所属部署名(任意) 5役職(任意) 6電話番号(必須) 7メールアドレス(必須) 8問い合わせ項目(必須)
   9問い合わせ内容(必須)
   【注意】nth-of-typeはタグ名のみで数えるため、.form-partsより前にある
   <div class="parts-error-message">（Tayori側の固定の1個）も1番目として数えられ、
   実際の指定番号は上記の項目番号+1になる（例：お名前=1番目だがnth-of-type(2)を指定）。
   【注意】このファイルは/recruit/entry/でも読み込まれる（共通スタイルの流用）。
   entryページは項目数・並び順が異なるため、body.page-contactでこのページ専用に限定している。 */
body.page-contact #tayori-form .form-parts:nth-of-type(2) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(3) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(4) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(7) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(8) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(9) > div:first-child::before,
body.page-contact #tayori-form .form-parts:nth-of-type(10) > div:first-child::before {
  content: "必須";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  margin-right: 10px;
  padding: 2px 4px;
  background: #d71a1c;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
}

/* ---- 入力欄（現行 .contact-tbl dd input / textarea 相当） ---- */
#tayori-form input[type="text"],
#tayori-form input[type="tel"],
#tayori-form input[type="email"],
#tayori-form select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 0;
  background: #f4f4f4;
  font-family: inherit;
  font-size: 18px;
}

#tayori-form textarea {
  display: block;
  width: 100%;
  height: 300px;
  padding: 10px;
  border: none;
  border-radius: 0;
  background: #f4f4f4;
  font-family: inherit;
  font-size: 18px;
}

/* ---- 姓・名／セイ・メイを同じ行に同じ幅で並べる ----
   【重要】上記と同じ理由でnth-of-typeを使用（お名前=1番目、フリガナ=2番目）。
   こちらはentryページも同じ並び順（1お名前・2フリガナ）のため、body.page-contactで
   限定する必要はないが、他の規則との一貫性のため同様にスコープしている。 */
body.page-contact #tayori-form .form-parts:nth-of-type(2) > div:last-child,
body.page-contact #tayori-form .form-parts:nth-of-type(3) > div:last-child {
  display: flex;
  gap: 10px;
}

body.page-contact #tayori-form .form-parts:nth-of-type(2) > div:last-child > div,
body.page-contact #tayori-form .form-parts:nth-of-type(3) > div:last-child > div {
  flex: 1;
  min-width: 0;
}

/* ---- エラー表示（現行 .wpcf7-not-valid-tip / .wpcf7-response-output 相当）----
   文面はTayori側で固定。色と余白のみ現行に寄せる。 */
#tayori-form .error-message {
  margin-top: 0.5em;
  color: #dc3232;
}

#tayori-form .parts-error-message {
  color: #dc3232;
  text-align: center;
}

/* ---- 送信ボタン（現行 .wpcf7-submit + .btn-submit 相当） ---- */
#tayori-form form > div:last-child {
  margin-top: 100px;
}

#tayori-form .submit {
  position: relative;
  display: block;
  width: 400px;
  margin: 0 auto;
  padding: 30px 0;
  border: none;
  border-radius: 0;
  background: #d71a1c;
  font-family: inherit;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

#tayori-form .submit::before,
#tayori-form .submit::after {
  content: "";
  position: absolute;
  background: #fff;
}

#tayori-form .submit::before {
  right: 33px;
  top: 50%;
  width: 30px;
  height: 1px;
}

#tayori-form .submit::after {
  right: 30px;
  top: calc(50% - 3px);
  width: 7px;
  height: 7px;
  border-radius: 25px;
}

/* ---- スマホ（現行 @media (max-width: 767px) の vw 値） ---- */
@media (max-width: 767px) {
  #tayori-form {
    margin-top: 10vw;
  }

  #tayori-form .form-parts + .form-parts {
    margin-top: 5.3333vw;
  }

  #tayori-form .form-parts > div:first-child {
    width: 100%;
    padding-left: 0;
    font-size: 3.7333vw;
  }

  #tayori-form .form-parts > div:last-child {
    margin-top: 2.6666vw;
  }

  body.page-contact #tayori-form .form-parts:nth-of-type(2) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(3) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(4) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(7) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(8) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(9) > div:first-child::before,
  body.page-contact #tayori-form .form-parts:nth-of-type(10) > div:first-child::before {
    position: static;
    margin-right: 1.3333vw;
    font-size: 2.6666vw;
  }

  #tayori-form input[type="text"],
  #tayori-form input[type="tel"],
  #tayori-form input[type="email"],
  #tayori-form select {
    height: 10.6666vw;
    font-size: 3.7333vw;
  }

  #tayori-form textarea {
    height: 53.3333vw;
    font-size: 3.7333vw;
  }

  body.page-contact #tayori-form .form-parts:nth-of-type(2) > div:last-child,
  body.page-contact #tayori-form .form-parts:nth-of-type(3) > div:last-child {
    gap: 2vw;
  }

  #tayori-form form > div:last-child {
    margin-top: 8vw;
  }

  #tayori-form .submit {
    width: 100%;
    padding: 5.333vw 0;
    font-size: 5.0666vw;
  }

  #tayori-form .submit::before {
    right: 6.5vw;
  }

  #tayori-form .submit::after {
    right: 6vw;
  }
}