@charset "utf-8";
/* =========================================================================
   Components & Contact form
   すべて Design DNA 準拠：角丸0 / 影なし / 線は1px黒 / 文字は#333 / lh1.75
   ========================================================================= */

/* ---------- 反転帯の上のラベル ----------
   #FF9902 の上では白は 2.1:1 しか出ないので #333 にする（5.9:1）。 */
.kb-label--onband { color: var(--ink); }
.kb-label--onband::before { background: var(--ink); }
.swipe-section--brand .kb-h,
.swipe-section--brand .kb-p { color: var(--ink); }

/* ---------- 4つの働き方リスト（C4 番号バッジ＋1行） ---------- */
.kb-ways { display: flex; flex-direction: column; gap: clamp(4px, 1.1dvh, 11px); }
.kb-ways li {
  display: flex; align-items: center; gap: calc(12 * var(--u));
}
.kb-ways .kb-num { flex: none; }
.kb-ways .kb-p { font-weight: 700; letter-spacing: .1em; }

/* ---------- 求める人物像ブロック ---------- */
.kb-wanted .kb-num { flex: none; }

/* ---------- 看板の中のボタン ---------- */
.kb-btn--board { font-size: calc(13 * var(--u)); padding: calc(9 * var(--u)) calc(22 * var(--u)); }

/* =========================================================================
   Contact form
   ========================================================================= */
.kb-form { margin-top: var(--sp-24); }

.kb-field { margin-bottom: calc(18 * var(--u)); }

.kb-field > label {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  font-size: max(var(--fsMin), calc(13 * var(--u)));
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: calc(7 * var(--u));
}

/* 必須／任意 — 番号バッジと同じ造形（角丸0・1px黒） */
.kb-req, .kb-any {
  flex: none;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border: 1px solid var(--line);
  border-radius: 0;
}
.kb-req { background: var(--accent); color: var(--white); }
.kb-any { background: var(--base); color: var(--ink); }

/* ---------- input / select / textarea を完全に統一 ---------- */
.kb-form input,
.kb-form select,
.kb-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(13 * var(--u));
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;                 /* DNA RULE 9 */
  box-shadow: none;                 /* DNA RULE 9 */
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  transition: background-color .2s var(--easeOut);
}
.kb-form input,
.kb-form select {
  height: calc(48 * var(--u));       /* 高さを揃える */
  padding-block: 0;
}

.kb-form ::placeholder { color: rgba(51,51,51,.42); font-weight: 400; letter-spacing: .06em; }

.kb-form input:focus-visible,
.kb-form select:focus-visible,
.kb-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: #FFF9F0;
}

/* ---------- select — 矢印は右端から16〜20px内側 ---------- */
.kb-selectwrap { position: relative; }
.kb-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;                  /* 文字と矢印を重ねない（指定値） */
  cursor: pointer;
}
/* 未選択のときだけプレースホルダ色（任意項目なので :invalid は使えない） */
.kb-form select:has(option[value=""]:checked) { color: rgba(51,51,51,.42); }
.kb-selectarrow {
  position: absolute;
  top: 50%;
  right: 18px;                          /* 右端から18px内側（指定値 16〜20px） */
  transform: translateY(-50%);
  width: 14px;
  height: 9px;
  pointer-events: none;
}

/* ---------- textarea — 十分な初期高さ・縦のみリサイズ ---------- */
.kb-form textarea {
  min-height: clamp(160px, calc(170 * var(--u)), 180px);  /* 指定値 160〜180px */
  max-height: 420px;
  resize: vertical;                     /* 横リサイズは禁止 */
  padding-block: calc(11 * var(--u));
}

/* ---------- 注記・送信 ---------- */
.kb-formnote {
  font-size: max(var(--fsMin), calc(12 * var(--u)));
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--ink);
  opacity: .8;
  margin-top: calc(-4 * var(--u));
}
.kb-submit { margin-top: calc(18 * var(--u)); text-align: center; }
.kb-submit .kb-btn {
  --btnShadow: 3px;
  --btnRadius: 6px;
  width: 100%;
  font-size: calc(14 * var(--u));
  padding-block: calc(14 * var(--u));
  letter-spacing: .14em;
}
.kb-formmsg {
  margin-top: calc(12 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.7;
  border: 1px solid var(--line);
  background: var(--white);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.kb-formmsg[hidden] { display: none; }

/* ---------- footer ---------- */
.kb-footer {
  margin-top: var(--sp-40);
  padding-top: var(--sp-24);
  border-top: 1px solid rgba(0,0,0,.25);
  text-align: center;
}
.kb-footer_logo {
  font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: .1em; line-height: 1;
}
.kb-footer_logo i { font-style: normal; color: var(--accent); }
.kb-footer_addr {
  margin-top: calc(10 * var(--u));
  font-size: max(var(--fsMin), calc(12 * var(--u))); font-weight: 500; letter-spacing: .06em; line-height: 1.9;
}
.kb-copy {
  margin-top: calc(14 * var(--u));
  font-size: calc(10 * var(--u)); letter-spacing: .08em; opacity: .75;
}