/* --------------------------------------------------------------------------
 * /contact/ — お問い合わせ
 *
 * 2026-09 全面刷新。旧版はこの面だけがサイトから外れていた
 * （全幅の濃紺ヒーロー・英語キッカー・緑のグラデーション・インライン style）。
 *
 * 語彙はトップのヒーロー（components/hero-split.css）と求人一覧 /jobs/ に
 * 揃える —— 白地・左寄せ・濃紺の見出し・主ボタンは濃紺塗り・オレンジは
 * 識別だけ。グラデーションと装飾アイコンは置かない。
 *
 * 色は tokens.css の --qp-* だけを参照し、ここで新しい色を作らない。
 * ----------------------------------------------------------------------- */

.ct-page {
  background: var(--qp-bg, #FFFFFF);
}

.ct-inner {
  max-width: var(--qp-maxw, 1160px);
  margin: 0 auto;
  padding-inline: var(--qp-gutter, 24px);
}

/*
 * 和文は語の区切りが無いため、幅任せにすると語の途中で折れる。
 * 意味のまとまりを span で包み、その単位で折る（求人一覧と同じ方式）。
 * span の間に空白を入れない —— 1行に収まったときに隙間が見える。
 */
.ct-nb {
  display: inline-block;
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ---- 見出し ---- */
.ct-hero {
  /* 下を厚くする。上下同値だと次の帯に繋がらず、見出しだけ浮いて見える。 */
  padding-block: clamp(36px, 5vw, 60px) clamp(24px, 3.5vw, 36px);
}

.ct-hero__title {
  margin: 0 0 14px;
  font-size: clamp(1.625rem, 4.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--qp-ink-1, #1E293B);
}

.ct-hero__lead {
  margin: 0;
  max-width: 44em;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.9;
  color: var(--qp-ink-2, #525252);
}

.ct-h2 {
  margin: 0 0 18px;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--qp-ink-1, #1E293B);
}

/* ---- ボタン ---- */
.ct-btn {
  /* 幅 100% のとき左右の padding が幅に上乗せされてはみ出すため明示する。 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px のタップ領域。 */
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* 主アクションは求人一覧と同じ濃紺塗り。アクセント色では塗らない。 */
.ct-btn--primary {
  background: var(--qp-ink-1, #1E293B);
  border: 1px solid var(--qp-ink-1, #1E293B);
  color: var(--qp-on-dark, #FFFFFF);
}

.ct-btn--primary:hover {
  background: #334155;
  border-color: #334155;
  color: var(--qp-on-dark, #FFFFFF);
}

.ct-btn--ghost {
  background: var(--qp-bg, #FFFFFF);
  border: 1px solid var(--qp-border-strong, #D4D4D4);
  color: var(--qp-ink-1, #1E293B);
}

.ct-btn--ghost:hover {
  border-color: var(--qp-ink-1, #1E293B);
  background: var(--qp-hover, #F5F5F5);
  color: var(--qp-ink-1, #1E293B);
}

/* --------------------------------------------------------------------------
 * 振り分けの帯（求職者を /career/ へ）
 * ----------------------------------------------------------------------- */
.ct-route {
  padding-bottom: clamp(28px, 4vw, 44px);
}

.ct-route__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 3vw, 32px);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--qp-border, #E5E5E5);
  border-radius: 14px;
  background: var(--qp-subtle, #FAFAFA);
}

.ct-route__body {
  flex: 1 1 22em;
  min-width: 0;
}

.ct-route__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--qp-ink-1, #1E293B);
  word-break: normal;
  overflow-wrap: anywhere;
}

.ct-route__note {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--qp-ink-3, #737373);
}

/* --------------------------------------------------------------------------
 * 用件とフォーム
 * ----------------------------------------------------------------------- */
.ct-sec {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ---- 左: 用件と会社情報 ---- */
.ct-topics {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--qp-border-strong, #D4D4D4);
}

.ct-topics li {
  padding-block: 13px;
  border-bottom: 1px solid var(--qp-border, #E5E5E5);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--qp-ink-2, #525252);
  word-break: normal;
  overflow-wrap: anywhere;
}

.ct-facts {
  margin: clamp(26px, 3.5vw, 36px) 0 0;
  padding: clamp(20px, 2.5vw, 26px);
  border: 1px solid var(--qp-border, #E5E5E5);
  border-radius: 14px;
  background: var(--qp-subtle, #FAFAFA);
}

.ct-facts > div + div {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--qp-border, #E5E5E5);
}

.ct-facts dt {
  font-size: 0.75rem;
  color: var(--qp-ink-3, #737373);
}

.ct-facts dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--qp-ink-1, #1E293B);
  word-break: normal;
  overflow-wrap: anywhere;
}

.ct-facts dd a {
  /* 44px の触れる面。フォームが使えないときの連絡先になる。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ct-facts dd a:hover {
  color: var(--qp-accent-ink, #C2410E);
}

/* ---- 右: フォーム ---- */
.ct-form {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--qp-border, #E5E5E5);
  border-radius: 14px;
  background: var(--qp-bg, #FFFFFF);
}

.ct-form__note {
  margin: -8px 0 22px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--qp-ink-3, #737373);
}

/* --------------------------------------------------------------------------
 * Contact Form 7
 *
 * CF7 は <p><label>…<br><span class="wpcf7-form-control-wrap">…</span></label></p>
 * を出す。項目名（your-type ほか）には触らず、見た目だけを揃える。
 * ----------------------------------------------------------------------- */
/*
 * CF7 の hidden 群。プラグイン側の CSS が隠しているが、読み込み順や
 * 版が変わると空の枠が見える（ハーネスで実際に出た）。自分で隠す。
 */
.ct-cf7 .hidden-fields-container {
  display: none;
}

.ct-cf7 .wpcf7-form p {
  margin: 0 0 18px;
}

.ct-cf7 .wpcf7-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--qp-ink-1, #1E293B);
}

/*
 * 必須の印。クラス名（cr-form__label--required）は CF7 のフォーム定義
 * 側に書かれており、テンプレートからは変えられないのでそのまま受ける。
 *
 * 旧版は #ef4444（白地で 3.76:1）で、実文字の下限 4.5:1 を割っていた。
 * アクセントの文字色（5.18:1）に寄せる。読み上げ側は控えの
 * aria-required="true" が既に持っている。
 */
.ct-cf7 .wpcf7-form .cr-form__label--required::after {
  content: '*';
  margin-left: 4px;
  font-weight: 700;
  color: var(--qp-accent-ink, #C2410E);
}

.ct-cf7 .wpcf7-form br {
  /* label と入力欄の間は margin で空ける（<br> の行送りは効きが読めない）。 */
  display: none;
}

.ct-cf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 7px;
}

.ct-cf7 .wpcf7-form input[type="text"],
.ct-cf7 .wpcf7-form input[type="email"],
.ct-cf7 .wpcf7-form input[type="tel"],
.ct-cf7 .wpcf7-form input[type="url"],
.ct-cf7 .wpcf7-form select,
.ct-cf7 .wpcf7-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--qp-border-strong, #D4D4D4);
  border-radius: 10px;
  background: var(--qp-bg, #FFFFFF);
  /* iOS は 16px 未満の入力欄でフォーカス時に画面を拡大する。 */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.7;
  color: var(--qp-ink-1, #1E293B);
}

.ct-cf7 .wpcf7-form textarea {
  min-height: 180px;
  resize: vertical;
}

.ct-cf7 .wpcf7-form input:focus,
.ct-cf7 .wpcf7-form select:focus,
.ct-cf7 .wpcf7-form textarea:focus {
  outline: 2px solid var(--qp-ink-1, #1E293B);
  outline-offset: 1px;
  border-color: var(--qp-ink-1, #1E293B);
}

.ct-cf7 .wpcf7-form ::placeholder {
  color: var(--qp-ink-3, #737373);
}

/* 必須の印。記号だけに頼らず、色は実文字の下限（4.7:1）を割らない。 */
.ct-cf7 .wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--qp-accent-ink, #C2410E);
}

.ct-cf7 .wpcf7-form input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding-inline: 22px;
  border: 1px solid var(--qp-ink-1, #1E293B);
  border-radius: 999px;
  background: var(--qp-ink-1, #1E293B);
  color: var(--qp-on-dark, #FFFFFF);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ct-cf7 .wpcf7-form input[type="submit"]:hover {
  background: #334155;
  border-color: #334155;
}

/*
 * CF7 の応答メッセージ。中身が無いときも要素は在るので、
 * 状態クラスが付くまで出さない（空の枠が残る）。
 */
.ct-cf7 .wpcf7-response-output {
  display: none;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--qp-border-strong, #D4D4D4);
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--qp-ink-2, #525252);
}

.ct-cf7 .wpcf7-form.sent .wpcf7-response-output,
.ct-cf7 .wpcf7-form.invalid .wpcf7-response-output,
.ct-cf7 .wpcf7-form.failed .wpcf7-response-output,
.ct-cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.ct-cf7 .wpcf7-form.aborted .wpcf7-response-output {
  display: block;
}

.ct-cf7 .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--qp-ok-ink, #047857);
  color: var(--qp-ok-ink, #047857);
}

.ct-cf7 .wpcf7-form.invalid .wpcf7-response-output,
.ct-cf7 .wpcf7-form.failed .wpcf7-response-output,
.ct-cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.ct-cf7 .wpcf7-form.aborted .wpcf7-response-output {
  border-color: var(--qp-accent-ink, #C2410E);
  color: var(--qp-accent-ink, #C2410E);
}

/* --------------------------------------------------------------------------
 * フォームが使えないときの代替
 * ----------------------------------------------------------------------- */
.ct-fallback {
  padding: 24px 20px;
  border: 1px solid var(--qp-border, #E5E5E5);
  border-radius: 10px;
  background: var(--qp-subtle, #FAFAFA);
  text-align: center;
}

.ct-fallback__lead {
  margin: 0 0 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--qp-ink-1, #1E293B);
}

.ct-fallback__mail {
  margin: 0 0 8px;
}

.ct-fallback__mail a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--qp-accent-ink, #C2410E);
  text-decoration: underline;
  text-underline-offset: 4px;
  word-break: normal;
  overflow-wrap: anywhere;
}

.ct-fallback__note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--qp-ink-3, #737373);
}

/* --------------------------------------------------------------------------
 * 狭い画面
 * ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ct-grid {
    grid-template-columns: 1fr;
  }

  /* 用件の一覧より先にフォームを出す（この面に来た人の目的はフォーム）。 */
  .ct-form {
    order: -1;
  }
}

@media (max-width: 560px) {
  .ct-route__inner .ct-btn {
    width: 100%;
  }
}