/* public/contact.css
 *
 * 公開の問い合わせフォーム（public/contact.html）専用スタイル（SPEC §3-30 F30-1〜F30-7）。
 *
 * 🔴 これは signup.css の「差分だけ」を持つファイルで、単体では成立しない。
 * contact.html は tokens.css → signup.css → contact.css の順にlinkし、フォームの見た目
 * （.su-inp / .su-fld / .su-group / .su-panel / .su-submitBtn 等）は signup.css をそのまま使う。
 *
 * なぜ signup.css をコピーせず再利用するのか: 申し込みフォームと問い合わせフォームは
 * 「未ログインの人が公開ページで情報を入力して送る」という同じ形の画面で、片方だけ見た目が
 * ずれると同じサービスに見えなくなる。逆に style.css は今も複数タスクが触る共有ファイルなので
 * linkしない（signup.css 冒頭のコメントと同じ判断を踏襲する）。
 *
 * ここに書くのは、申し込みフォームに存在しない3つだけ:
 *   ① 複数行のテキストエリア（申し込みは全部1行入力）
 *   ② 送信内容の取り扱いに関する一文
 *   ③ 法務ページへのフッター（申し込みページにも後から同じものを足す）
 */

/* ① 複数行のテキストエリア。.su-inp の見た目を継いだうえで、複数行として成立させる分だけ足す。 */
.ct-textarea {
  line-height: 1.8;
  resize: vertical;
  min-height: 160px;
  /* textarea は既定で inline 扱いのため、親の高さ計算に隙間が出る。block にして消す。 */
  display: block;
}

/* ② 送信内容の取り扱い（F30-6）。目立たせすぎず、しかし送信ボタンの直前に必ず読ませる位置に置く。 */
.ct-consent {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 14px;
}
.ct-consent a {
  color: var(--nvl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ct-consent a:hover { color: var(--nvl-navy); }

/* 申し込みフォーム（signup.html）でも同じ文言ブロックを使う。クラス名を .ct-consent と
   分けているのは、申し込みは「利用目的の明示＋規約への同意」、問い合わせは「取り扱いの案内」で
   書く内容が違うため（見た目だけ揃える）。 */
.su-consent {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 14px;
}
.su-consent a {
  color: var(--nvl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.su-consent a:hover { color: var(--nvl-navy); }

/* 右パネルの案内ブロック。ログイン状態で出し分ける（contact.js が hidden を切り替える）。 */
.ct-asideBlock p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
}

/* ③ 法務ページへのフッター。
   🔴 これが無いと、個人情報を入力させる画面から利用規約・プライバシーポリシーへ辿れない。 */
.ct-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--nvl-border);
  font-size: 11px;
  color: var(--muted);
}
.ct-foot a {
  color: var(--muted);
  text-decoration: none;
}
.ct-foot a:hover { color: var(--nvl-navy); text-decoration: underline; }
/* 現在地（このページ自身）を示す非リンクの<span>。legal.css の同名ルールと揃える
   （2026-08-20 F-5: contact.html にお問い合わせの現在地spanを足した際に発見した非対称の解消）。 */
.ct-foot span:not(.ct-foot__copy) { color: var(--nvl-text); }
.ct-foot__copy { margin-left: auto; }

/* 375px（メールのリンクをスマホで開いた人）。signup.css の同幅の扱いに合わせる。 */
@media (max-width: 640px) {
  .ct-foot { gap: 12px; }
  .ct-foot__copy { margin-left: 0; width: 100%; }
}