#form-hero {
  /* 画像パス：子テーマの /asset/facformbg.jpg */
  --hero-img: url("facformbg.jpg");
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    /* ほんのり暗幕 */
    var(--hero-img) center/cover no-repeat;
  min-height: clamp(220px, 32vw, 420px);
  display: flex;
  align-items: flex-end;
  margin-bottom: 5rem;
}

#form-hero .hero-inner {
  width: 100%;
  max-width: var(--wrap, 1280px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px);
  padding-top: clamp(40px, 10vw, 96px);
  /* 上を少し広めに */
  box-sizing: border-box;
}

#form-hero .hero-title {
  color: #fff;
  font-size: clamp(22px, 4.2vw, 40px);
  line-height: 1.25;
  letter-spacing: .04em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  /* 可読性アップ */
  position: relative;
}

/* 下線アクセント（控えめ） */
#form-hero .hero-title::after {
  content: "";
  display: block;
  width: clamp(80px, 12vw, 160px);
  height: 3px;
  margin-top: .5em;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .0));
  border-radius: 2px;
}

#form-hero .hero-sub {
  color: rgba(255, 255, 255, .9);
  margin: .6em 0 0;
  font-size: clamp(12px, 1.8vw, 16px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* ---------- 基本レイアウト ---------- */
:root {
  --wrap: 1280px;
  --fgap: 12px;
  --label-w: 38%;
  /* ラベル欄の幅 */
  --bd: 1px solid #e5e7eb;
  --fs-base: 16px;
  /* ベース 16px */
}

#factoring-form,
.wpcf7-response-output {
  font-size: var(--fs-base);
  max-width: var(--wrap);
  margin: 0 auto !important;
  line-height: 1.6;
}

#factoring-form [hidden],
.wpcf7-response-output [hidden] {
  display: none !important;
}

.wpcf7-response-output {
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}

#factoring-form h3 {
  font-size: 1.125em;
  /* 18px */
  margin: 1.2em 0 .6em;
  font-weight: 600;
}

/* 会社情報の並び：1列→幅広で2列 */
#factoring-form .c-grid {
  display: grid;
  gap: 1em;
}

@media (min-width: 900px) {
  #factoring-form .c-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ラベル左・値右（ラベル内2カラム） */
#factoring-form label {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items: center;
  gap: .6em;
  font-size: .95em;
}

@media (max-width: 899px) {
  #factoring-form label.files {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* 入力UIの共通 */
#factoring-form input[type="text"],
#factoring-form input[type="tel"],
#factoring-form input[type="email"],
#factoring-form input[type="number"],
#factoring-form input[type="date"],
#factoring-form textarea,
#factoring-form select {
  width: 100%;
  font-size: 1em;
  padding: .55em .7em;
  border: var(--bd);
  border-radius: .5em;
  box-sizing: border-box;
}

#factoring-form input:focus,
#factoring-form textarea:focus,
#factoring-form select:focus {
  outline: 2px solid #c7d2fe;
  /* 薄いアクセント */
  border-color: #a5b4fc;
}

/* 送信ボタン */
#factoring-form .submit-wrap {
  margin-top: 1.2em;
}

#factoring-form input[type="submit"] {
  font-size: 1em;
  padding: .8em 1.2em;
  border-radius: .4em;
  background-color: #00B3FF;
  color: white;
  border: 0;

  &:hover {
    background-color: #4bc9ff;
  }
}

/* ホバー効果を無効化するクラス（タッチ端末対策） */
@media (hover: none),
(pointer: coarse) {

  #factoring-form .row-add:hover,
  #factoring-form .row-remove:hover {
    color: #c36 !important;
  }
}

#factoring-form .nohover:hover {
  color: #c36 !important;
}

/* ---------- 必須・任意バッジ（自動） ---------- */
/* ラベル左・値右はそのまま。バッジを上に浮かせる */
#factoring-form .c-grid>label {
  position: relative;
  padding-top: 1.4em;
  /* ← バッジぶんの余白を確保（emで） */
}

/* 会社情報：任意/必須バッジをラベル上に表示 */
#factoring-form .c-grid>label::after {
  content: "任意";
  position: absolute;
  left: -3.6px;
  top: 0.65em;
  font-size: .75em;
  line-height: 1;
  padding: .2em .6em;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  pointer-events: none;
}

#factoring-form .c-grid>label.files::after {
  top: 2.15em;
}

@media (max-width: 899px) {
  #factoring-form .c-grid>label.files::after {
    top: 0.15em;
  }
}

/* required を検知して色と文言を変更（:has サポート前提） */
#factoring-form .c-grid>label:has(input[required])::after,
#factoring-form .c-grid>label:has(select[required])::after,
#factoring-form .c-grid>label:has(textarea[required])::after,
#factoring-form .c-grid>label:has([aria-required="true"])::after,
#factoring-form .c-grid>label:has(.wpcf7-validates-as-required)::after {
  content: "必須";
  background: #fde8e8;
  color: #b91c1c;
}

/* 繰り返し行はバッジ非表示（UIが詰まるので） */
#factoring-form .repeatable-row label::after {
  display: none;
}

/* ---------- 繰り返し行（売掛・買掛） ---------- */
#factoring-form .repeatable-group {
  margin: .75em 0 1em;
}

#factoring-form .repeatable-row {
  border: var(--bd);
  border-radius: .75em;
  padding: 1em;
  margin-bottom: .75em;
  background: #fff;
}

#factoring-form .repeatable-row .row-grid {
  display: grid;
  gap: var(--fgap);
  grid-template-columns: 1fr;
  /* モバイル：縦並び */
}

/* デスクトップでは2×2（ラベル左・値右は各label内で担保） */
@media (min-width: 900px) {
  :root {
    /* ← セレクタの中で再定義する */
    --label-w: 12em;
    /* デスクトップ＝固定幅で */
  }

  #factoring-form .repeatable-row .row-grid {
    grid-template-columns: 1fr 1fr;
    /* 2列×2段 = 4項目 */
  }
}

/* 行内の各フィールドもラベル左・値右 */
#factoring-form .repeatable-row label {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items: center;
  gap: .6em;
}

/* 追加・削除ボタン */
#factoring-form .group-actions {
  margin-top: .25em;
}

#factoring-form .row-add,
#factoring-form .row-remove {
  appearance: none;
  border: var(--bd);
  background: #f8fafc;
  padding: .5em .9em;
  border-radius: .5em;
  font-size: .95em;
  cursor: pointer;
}

#factoring-form .row-remove {
  background: #fff1f2;
  border-color: #fecdd3;
}

/* 細かい余白調整 */
#factoring-form hr {
  border: 0;
  border-top: var(--bd);
  margin: 1.2em 0;
}

#factoring-form p {
  margin: .4em 0 .8em;
  font-size: .95em;
  color: #374151;
}

/* 追加行の背景を一瞬だけハイライト */
@keyframes flashIn {
  0% {
    background: #fffbe6;
  }

  /* やさしい黄色 */
  100% {
    background: #fff;
  }
}

.flash-in {
  animation: flashIn 900ms ease-out 1;
}

/* パフォーマンス */
@media (prefers-reduced-motion: no-preference) {
  #factoring-form .repeatable-row {
    will-change: transform, opacity;
  }
}

#factoring-form .field-error {
  grid-column: 2;
  /* ラベル左・値右の2列目に出す */
  margin-top: .3em;
  font-size: .85em;
  color: #b91c1c;
}

#factoring-form label:has(>.kakunin){
  grid-template-columns: 1rem 1fr;
  margin-bottom: 3rem;
}