/* ==========================================================
   自動生成（06_wordpress/_tools/build_wp.py）— 手で直さない
   元：05_coding/assets/css/pages/contact.css
   変更点：各セレクタの頭に :is(.kk-wp, .editor-styles-wrapper) を足しただけ（値は同じ）。.kk-wp は SWELL の #body_wrap に付く
   SWELL の .post_content h2 などより詳細度を上げ、管理画面のエディタにも同じ見た目を出すため
   ========================================================== */
/* ==========================================================
   pages/contact.css — /contact/（Figma: Design/contact/PC 31:3923 ／ SP 31:4116）
   使う部品：.kk-c-page-header・.kk-c-form／.kk-c-field／.kk-c-checkbox・.kk-c-photo・.kk-c-steps・.kk-c-faq
   追従CTA は LINE だけ（.kk-c-fixed-bar--line-only）
   ========================================================== */
/* ---------- section/method（31:3962）：2枚（gap 32）。フォーム側は橙の線 ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method--form { border-color: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method__icon { width: var(--kk-icon-size); height: var(--kk-icon-size); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method__title {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3-card);              /* 28 / 42（SP 26 / 39） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-card);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method__text {
  font-size: var(--kk-fs-body-small);           /* 15 / 30（SP 14 / 28） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-muted);
}

/* ---------- section/form（31:3981）：左 480＋間 80＋右 720 ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 720fr);
  column-gap: 80px;
  align-items: start;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__intro { display: flex; flex-direction: column; gap: 20px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__lead {
  font-size: var(--kk-fs-body);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__note {
  max-width: 459px;                            /* Figma 線1＋18＋本文440 */
  padding: 4px 0 4px 18px;
  border-left: 1px solid var(--kk-color-border-accent);
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-muted);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__note a,
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__form .kk-c-checkbox a {
  color: var(--kk-color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--kk-color-text-link-line);
  text-underline-offset: 4px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__note a:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__form .kk-c-checkbox a:hover { color: var(--kk-color-accent-light); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__photo { height: 300px; }    /* Figma photo 480×300（SP 327×200） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__photo .kk-c-photo__note { bottom: 16.8px; }

:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__submit { width: 100%; min-height: var(--kk-btn-fill-h); } /* 2026-10-16 ほかのボタンと同じ高さ */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__form .kk-c-field.is-error .kk-c-checkbox input { border-color: var(--kk-color-error); }


@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__intro { max-width: var(--kk-container-text); }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-methods { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-method { padding: 28px 24px; }  /* Figma SP icon y29・x25（線1＋28／24）・高さ 303 */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form { row-gap: 32px; }         /* Figma SP 505 → 537 */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-contact-form__photo { height: 200px; }
}