/* =====================================================================
 * お問い合わせ（/contact/）・掲載依頼（/listing/）  フェーズ6
 *
 * ★寸法は応募フォーム（job.css の .job-apply）と同じにしてある。
 *   ラベル列230 ＋ 入力欄600・入力欄の塗り #F6F6F6・行ピッチ（カンプ実測）。
 *   クラスを `inq-` に分けているのは、この2ページのために job.css を
 *   丸ごと読み込みたくないため（求人カード・追尾バーまで付いてくる）。
 *   ★申し送り: フェーズ6の後半で .c-detail-title / .list-layout などを
 *     components.css へ1本化するとき、この2枚のフォームも一緒に見直すこと。
 * ===================================================================== */

.inq-page { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .inq-page { gap: 28px; } }

.inq-page__lead { margin: 0; font-size: 15px; line-height: 1.9; }
.inq-page__lead a { color: var(--c-primary); text-decoration: underline; }

/* 種別の行き来（お問い合わせ ⇄ 掲載依頼）。★どちらに来ても、もう一方へ行ける */
.inq-page__switch {
  margin: 0; padding: 12px 16px; border-radius: 8px;
  background: var(--c-bg-alt, #F7F4F8); font-size: 14px; line-height: 1.8;
}
.inq-page__switch a { color: var(--c-primary); text-decoration: underline; }

/* ---------------------------------------------------------------- フォーム */
.inq { display: grid; gap: 24px; }
.inq__note { margin: 0; font-size: 15px; }

.inq__rows { display: grid; gap: 16px; }
@media (min-width: 1024px) { .inq__rows { gap: 24px; } }

.inq__row { display: grid; gap: 6px; }
@media (min-width: 1024px) {
  /* 応募フォームと同じ: ラベル列230 ＋ 入力欄600 */
  .inq__row { grid-template-columns: 230px minmax(0, 600px); gap: 0; align-items: start; }
}
.inq__label { font-size: 14px; font-weight: 700; color: var(--c-navy); padding-top: 8px; }
@media (min-width: 1024px) { .inq__label { font-size: 16px; padding-top: 12px; } }
.inq__field { display: grid; gap: 6px; min-width: 0; }

/* 「必須」「任意」バッジ */
.inq__label .req,
.inq__label .opt,
.inq__agree-label .req {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 3px; font-size: 11px; font-weight: 700; vertical-align: 2px;
}
.inq__label .req,
.inq__agree-label .req { background: var(--c-primary); color: var(--c-white); }
.inq__label .opt { background: #DDDDDD; color: #555555; }

.inq input[type="text"],
.inq input[type="email"],
.inq input[type="tel"],
.inq input[type="url"],
.inq select,
.inq textarea {
  width: 100%; min-width: 0;
  padding: 10px 14px;
  /* ★枠は常に紫（2026-08-18 発注者の指示「記入欄の枠紫は常に表示させて」）。
     前は透明で、地色 #F6F6F6 がページの地に溶けて欄の位置が分からなかった。フォーカス時の2pxの輪郭はそのまま。 */
  border: 1px solid var(--c-primary); border-radius: 5px;
  background: #F6F6F6;             /* カンプ実測（応募フォームと同値） */
  font-size: 15px; font-family: inherit; color: var(--c-text);
}
.inq select { padding-right: 8px; }
.inq textarea { line-height: 1.7; resize: vertical; }
.inq :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 1px;
}

.inq__checks { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.inq__check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.inq__help { font-size: 13px; color: #777777; }

/* 同意チェック */
.inq__agree { display: grid; gap: 6px; justify-items: center; text-align: center; }
.inq__agree-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.inq__agree a { color: var(--c-primary); text-decoration: underline; }

.inq__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.inq__actions .btn { min-width: 0; flex: 1 1 220px; max-width: 320px; height: 52px; font-size: 16px; }

/* 確認画面。入力欄と同じ並びで値だけを出す */
.inq__review { display: grid; gap: 0; margin: 0; font-size: 14px; line-height: 1.8; }
.inq__review dt {
  padding: 12px 14px 4px; background: var(--c-bg-pink, #FAF1F2);
  font-weight: 700; color: var(--c-primary);
}
.inq__review dd {
  margin: 0; padding: 4px 14px 14px;
  background: var(--c-bg-pink, #FAF1F2); overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
  .inq__review { grid-template-columns: 230px minmax(0, 1fr); font-size: 15px; }
  .inq__review dt { padding: 18px 24px; border-bottom: 1px solid var(--c-white); }
  .inq__review dd {
    padding: 18px 24px; background: var(--c-white);
    border-bottom: 1px solid var(--c-bg-pink, #FAF1F2);
  }
}

/* 完了 */
.inq__done { display: grid; gap: 14px; font-size: 15px; }
.inq__done-note { font-size: 14px; color: #777777; }
.inq__done-links { display: flex; flex-wrap: wrap; gap: 12px; }