/* ============================================================
   相談窓口（page-templates/consult.php 専用）

   このページでしか使わないので style.css には入れず、
   相談ページのときだけ読み込む（functions.php）。
   2026-07-24 デザイン刷新：旧ブルータリズム（太枠 --border＋ハード影＋黄/ミント地）を、
   細ヘアライン＋淡いコールアウト＋紺フォーカスのクリーンな体裁へ置換。
   ============================================================ */

/* 1カラム。以前はフォーム＋右サイドの2カラムだったが、注意書きが右に逃げて
   読まれないまま送信される並びだった。「約束事 → 入力」の順に積む。
   幅は上のヒーロー（.wrap＝--wrap）に揃える。狭い1カラムだと縦長になるため、
   横幅を確保して間延びを抑える（2026-07-25 運営者指示）。 */
.consult-wrap{max-width:var(--wrap);}

.consult-form{
  background:#fff;border:1px solid var(--hair);border-radius:10px;
  padding:28px;
}
.consult-field{margin-bottom:22px;}

/* 案C：2カラム（左＝ご質問内容／右＝分野・メール・用途）。横幅を活かして縦を圧縮（2026-07-25 運営者指示）。 */
.consult-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start;}
.consult-col--side{display:grid;gap:22px;align-content:start;}
.consult-grid .consult-field{margin-bottom:0;}
.consult-col--main textarea{min-height:240px;}
.consult-col--side select{width:100%;}
.consult-col--side .consult-postnote{margin-top:0;}
@media (max-width:900px){
  .consult-grid{grid-template-columns:1fr;gap:22px;}
  .consult-col--main textarea{min-height:200px;}
}
.consult-label{display:block;font-size:15px;font-weight:900;margin-bottom:6px;color:var(--navy);}
.consult-note{font-size:13px;line-height:1.9;color:var(--ink-60);margin:0 0 10px;}
/* 本文中のリンク（プライバシーポリシー等）：下線なし・一般的な青系（2026-07-25 運営者指示）。 */
.consult-note a{color:#2A6FDB;text-decoration:none;}
.consult-note a:hover{color:#1C57B8;}
.consult-note a:focus-visible{outline:2px solid #2A6FDB;outline-offset:2px;border-radius:3px;}

.consult-form textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--font-base);font-size:15px;line-height:1.9;color:var(--ink);
  background:#fff;border:1px solid var(--field-line);border-radius:8px;padding:12px 14px;
  resize:vertical;min-height:180px;
}
.consult-form select{
  font-family:var(--font-base);font-size:15px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--field-line);border-radius:8px;padding:11px 13px;
  min-width:min(280px,100%);
}
/* メール欄（任意・2026-07-21）。textareaと同じ枠の作法で、1行入力に高さを合わせる。 */
.consult-form input[type="email"]{
  width:100%;box-sizing:border-box;
  font-family:var(--font-base);font-size:15px;line-height:1.6;color:var(--ink);
  background:#fff;border:1px solid var(--field-line);border-radius:8px;padding:12px 14px;
}
/* フォーカスは紺のリング（新デザイン共通・waitlistと同じ作法）。 */
.consult-form textarea:focus,
.consult-form select:focus,
.consult-form input[type="email"]:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,35,60,.12);
}

/* 任意のしるし。必須（consult-req＝オレンジ）と役割で色を分け、控えめな中間色にする。 */
.consult-opt{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-size:11px;font-weight:900;letter-spacing:.08em;
  background:#fff;color:var(--ink-60);
  border:1px solid var(--field-line);border-radius:5px;padding:1px 7px;
}
/* 用途3つ。メール欄の直後で「何に使うか」を短く列挙する。 */
.consult-note--use{margin:10px 0 4px;font-weight:700;color:var(--ink);}
.consult-uses{margin:0 0 10px;padding-left:1.2em;font-size:13px;line-height:1.9;color:var(--ink-60);}
.consult-uses li{list-style:disc;}
.consult-note--caveat{margin:0;font-size:12.5px;color:var(--ink-60);}

.consult-count{font-family:var(--font-mono);font-size:12px;color:var(--ink-30);text-align:right;margin:6px 0 0;}

/* ハニーポット。display:none を避けて画面外へ出す。
   display:none だと「隠し欄」と判定して素通りするボットがいるため、
   ブラウザには通常の入力欄に見える形で画面の外に置く。 */
.consult-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.consult-privacy{font-size:12.5px;line-height:1.9;color:var(--ink-60);margin:0 0 18px;}
/* 送信ボタンは2カラムの下・右端に置く（右揃え・2026-07-25 運営者指示）。 */
.consult-actions{margin:0;text-align:right;}
/* 送信ボタンより下に置くメールの使い道の説明。ボタンとの間を少し空ける。 */
.consult-postnote{margin-top:22px;}
.consult-form button[disabled]{opacity:.6;cursor:progress;}

.consult-result{margin:14px 0 0;font-size:13.5px;font-weight:700;color:var(--ink-60);min-height:1.2em;}
/* エラーは orange-deep。--orange は明るい地の上で 2.69:1 と基準未満のため使わない */
.consult-result.is-error{color:var(--orange-deep);}

/* 送信完了（成功）は、淡いミントのコールアウト（旧：ミント地＋太枠＋ハード影）。 */
.consult-done{
  background:#EEF7F1;border:1px solid #D4E7DC;border-radius:10px;
  padding:26px 28px;font-size:14px;line-height:2;
}
.consult-done__title{font-size:18px;font-weight:900;margin:0 0 10px;color:var(--navy);}
.consult-done__links{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0;}

/* 送信前に必ず読ませたい注意書き。旧：黄色地＋太い黒枠。新：オレンジ縦罫の淡いコールアウトで、
   ブルータリズムを外しつつ「先に読む」注意喚起は残す。 */
.consult-terms{
  background:#FBF3E9;border:1px solid #F0DFC8;border-left:3px solid var(--orange);
  border-radius:8px;padding:22px 24px;margin-bottom:26px;
}
.consult-terms__h{font-size:16px;font-weight:900;margin:0 0 12px;letter-spacing:.02em;color:var(--navy);}

/* 2点の箇条書き（白ボックスは廃止・2026-07-21）。 */
.consult-terms__list{margin:0;padding-left:1.3em;}
.consult-terms__list li{
  font-size:14px;line-height:1.9;color:var(--ink);list-style:disc;
}
.consult-terms__list li + li{margin-top:10px;}

/* 必須のしるし。オレンジ面＋ink文字（テーマの配色ルール。枠は外してフラットに）。 */
.consult-req{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-size:11px;font-weight:900;letter-spacing:.08em;
  background:var(--orange);color:var(--ink);
  border-radius:5px;padding:2px 8px;
}


/* スマホ・タブレットでの入力欄の自動ズーム対策。
   iOS Safari は font-size 16px未満の入力欄をタップするとページを勝手に拡大する。
   style.css にも同じ趣旨の指定があるが、consult.css は style.css の後に
   読み込まれる（functions.php の依存指定）ので、こちらに書かないと
   上の 15px 指定に負ける。実測で 390px 時に 15px のままだった。 */
@media (max-width:1023px){
  .consult-form textarea,
  .consult-form select,
  .consult-form input[type="email"]{
    font-size:16px;
  }
}
@media (max-width:479px){
  .consult-form,.consult-done{padding:20px 16px;}
  .consult-terms{padding:20px 16px;}
}

/* === 角丸ボックスの一律四角化（2026-07-25「全て四角く」）。入力欄・ボタンは対象外。 === */
.consult-form,.consult-done,.consult-terms{border-radius:0;}

/* === 入力欄・バッジも四角化（2026-07-25）。 === */
.consult-form textarea,.consult-form select,.consult-form input[type="email"],
.consult-opt,.consult-req{border-radius:0;}