/* ==========================================================
   LOCOSYSTEM CONTACT PAGE

   セレクタは #body_wrap.page-id-36 を使用する。
   SWELLでは page-id-36 のようなページ判定クラスが <body> ではなく
   <div id="body_wrap"> に付与されるため、body.page-id-36 という
   指定は最初から一致せず、CSSが一切効かない原因になっていた。

   ⚠️ 保守性メモ：page-id-36 は投稿IDへの直接依存。
   ページを作り直すとIDが変わりCSSが効かなくなるため、
   将来的には company.css / business.css と同様に
   専用テンプレート（page-contact.php）＋ is_page_template()
   による読み込みへ移行することを推奨する。
========================================================== */

/* ページ全体 */
#body_wrap.page-id-36 .l-content {
  padding-bottom: 0;
}

#body_wrap.page-id-36 .post_content {
  max-width: 920px;
  margin-inline: auto;
}

/* 冒頭文 */
#body_wrap.page-id-36 .post_content > p {
  max-width: 760px;
  margin-inline: auto;
  color: var(--ls-fg);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.03em;
}

#body_wrap.page-id-36 .post_content > p + p {
  margin-top: var(--ls-space-16);
}

/* Contact Form 7全体 */
#body_wrap.page-id-36 .wpcf7 {
  max-width: 760px;
  margin: var(--ls-space-64) auto 0;
}

#body_wrap.page-id-36 .wpcf7 form {
  padding: var(--ls-space-48);
  border: 1px solid var(--ls-line-subtle);
  background: #ffffff;
}

/* 各項目 */
#body_wrap.page-id-36 .wpcf7 label {
  display: block;
  margin: 0 0 var(--ls-space-24);
  color: var(--ls-fg-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

#body_wrap.page-id-36 .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--ls-space-8);
}

/* 必須表示：文字なのでコントラスト4.5:1以上が必要 → Copper Dark */
#body_wrap.page-id-36 .required {
  margin-left: 4px;
  color: var(--ls-copper-dark);
  font-size: 12px;
  font-weight: 700;
}

/* 入力欄 */
#body_wrap.page-id-36 .wpcf7 input[type="text"],
#body_wrap.page-id-36 .wpcf7 input[type="email"],
#body_wrap.page-id-36 .wpcf7 input[type="tel"],
#body_wrap.page-id-36 .wpcf7 select,
#body_wrap.page-id-36 .wpcf7 textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-small);
  color: var(--ls-fg-strong);
  background: var(--ls-bg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#body_wrap.page-id-36 .wpcf7 select {
  min-height: 54px;
}

#body_wrap.page-id-36 .wpcf7 textarea {
  min-height: 220px;
  resize: vertical;
}

/*
 * フォーカス時の枠線は、既存の --ls-focus-color を使う。
 * このトークンは明背景でCopper Dark（約5.95:1）に自動解決され、
 * .ls-section--dark 配下でも自動的にCopper Lightへ切り替わる。
 * 直接 --ls-copper-light を指定すると、明背景で3:1未満になり不合格。
 */
#body_wrap.page-id-36 .wpcf7 input:focus,
#body_wrap.page-id-36 .wpcf7 select:focus,
#body_wrap.page-id-36 .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--ls-focus-color);
  background: #ffffff;
  /* color-mix() 非対応環境向けのフォールバック */
  box-shadow: 0 0 0 3px rgba(148, 78, 58, 0.16);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ls-focus-color) 18%, transparent);
}

/* 同意欄 */
#body_wrap.page-id-36 .wpcf7-acceptance {
  display: block;
  margin-top: var(--ls-space-16);
}

#body_wrap.page-id-36 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

#body_wrap.page-id-36 .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--ls-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}

#body_wrap.page-id-36 .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--ls-copper-dark);
}

/* 送信ボタン */
#body_wrap.page-id-36 .wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: var(--ls-space-32);
  padding: 17px 24px;
  border: 1px solid var(--ls-navy-dark);
  border-radius: var(--ls-radius-none);
  color: #ffffff;
  background: var(--ls-navy-dark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/*
 * hover背景は Copper Dark を使用（白文字とのコントラスト約5.95:1）。
 * Copper Light（約2.26:1）だと白文字がほぼ読めなくなるため使用しない。
 */
#body_wrap.page-id-36 .wpcf7 input[type="submit"]:hover,
#body_wrap.page-id-36 .wpcf7 input[type="submit"]:focus-visible {
  border-color: var(--ls-copper-dark);
  color: #ffffff;
  background: var(--ls-copper-dark);
  transform: translateY(-2px);
}

/* 送信結果メッセージ */
#body_wrap.page-id-36 .wpcf7 form .wpcf7-response-output {
  margin: var(--ls-space-24) 0 0;
  padding: 16px 18px;
  border-width: 1px;
  font-size: 14px;
  line-height: 1.8;
}

#body_wrap.page-id-36 .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #9f3f3f;
  font-size: 13px;
}

/* 二重見出しの整理 */
#body_wrap.page-id-36 .post_content > h2:first-child,
#body_wrap.page-id-36 .post_content > h3:first-child {
  display: none;
}

/* タブレット */
@media (max-width: 959px) {
  #body_wrap.page-id-36 .post_content {
    max-width: 840px;
  }

  #body_wrap.page-id-36 .wpcf7 {
    margin-top: var(--ls-space-48);
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #body_wrap.page-id-36 .post_content > p {
    font-size: 15px;
    line-height: 1.9;
  }

  #body_wrap.page-id-36 .wpcf7 {
    margin-top: var(--ls-space-40);
  }

  #body_wrap.page-id-36 .wpcf7 form {
    padding: var(--ls-space-24);
  }

  #body_wrap.page-id-36 .wpcf7 textarea {
    min-height: 180px;
  }

  #body_wrap.page-id-36 .wpcf7 input[type="submit"] {
    padding-block: 16px;
  }
}