/* ============================================================
   CONTACT ページ固有のパーツ【2026-08-30】
   ------------------------------------------------------------
   ⚠ 試作。本番未反映。実行される JavaScript 0件。
   ⚠ 共通の Color / Typography / Header / Glass / 曲線 /
      Scroll reveal は ../v9-brand-base/base.css。
   ⚠ base.css を書き換えない。書き換えると他3ページが動く。
   ⚠ CONTACT は4ページの中でいちばん情報を減らす。装飾を足さない。
   ⚠ 赤は使わない（ロゴを除く）。必須マークも Blue。
   ============================================================ */

/* ---- 1. Hero ------------------------------------------------
   ⚠ 動画は使わない。⚠ 写真も置かない。
      白と淡い青と余白だけで、静かに始める。 */
.chero{ position:relative; overflow:hidden;
  min-height:clamp(440px,62vh,660px); display:flex; flex-direction:column;
  background:linear-gradient(170deg, #ffffff 0%, #f4f9ff 38%, #e9f2fc 100%); }
/* 淡い青の光を2つだけ。⚠ 増やさない */
.chero::before,
.chero::after{ content:""; position:absolute; pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(148,190,236,.42) 0%, rgba(148,190,236,0) 72%); }
.chero::before{ right:-10%; top:-22%; width:min(780px,86%); height:700px; }
.chero::after { left:-16%;  bottom:-30%; width:min(720px,84%); height:640px; }

.chero__in{ position:relative; z-index:2; flex:1;
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:calc(var(--h) + clamp(40px,7vh,86px)) var(--pad) clamp(56px,8vh,100px);
  display:flex; flex-direction:column; justify-content:center; }
.chero__h{ margin-top:20px; font-size:clamp(27px,3.8vw,48px); font-weight:700;
  line-height:1.42; letter-spacing:.01em; }
.chero__h span{ display:inline-block; }   /* ⚠ 語の途中で折らない */
.chero__sub{ margin-top:clamp(16px,2vw,22px); max-width:36em;
  font-size:clamp(13.5px,1.15vw,15.5px); line-height:2.05; color:#26303c; }
.chero__sub span{ display:inline-block; }

/* ⚠ ヘッダーは映像の上ではなく明るい面の上に乗る。白文字だと飛ぶので濃紺 */
.hd__logo{ color:#0f2b4a; text-shadow:none; }
.hd__nav a, .hd__nav span{ color:#0f2b4a; text-shadow:none; }

/* ---- 2. 以下の地 -------------------------------------------- */
.flow{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,
    rgba(232,241,251,0) 0%, rgba(232,241,251,.42) 14%,
    rgba(234,242,252,.72) 52%, rgba(240,246,253,.86) 100%); }
.hd-c{ text-align:center; }
.hd-c .lb{ justify-content:center; }
.hd-c .lb::before{ display:none; }
.hd-c .tx{ margin-inline:auto; max-width:640px; }

/* ---- 3. お問い合わせ内容（5つ）------------------------------
   🛑 JavaScript は使わない。ラジオボタンの :checked だけで選択を表す。 */
/* ⚠ 2026-08-30：5つ → 2つ。数が減ったぶん1枚を大きく、余白を広く取る。 */
.tp{ margin-top:clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns:1fr; gap:clamp(14px,1.8vw,24px); }
@media(min-width:800px){ .tp{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tp__r{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tc{ display:flex; flex-direction:column; gap:12px; cursor:pointer;
  padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,30px);
  border-radius:var(--r-2); height:100%;
  background:rgba(255,255,255,.80); border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 20px 46px -38px rgba(31,95,168,.5);
  backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.tc:hover{ transform:translateY(-2px); background:rgba(255,255,255,.94); }
.tc__hd{ display:flex; align-items:center; gap:12px; }
.tc__hd svg{ flex:none; width:24px; height:24px; stroke:var(--blue); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tc__n{ font-family:var(--en); font-size:clamp(19px,2vw,24px); font-weight:800;
  line-height:1; color:var(--blue); }
.tc__t{ font-size:clamp(13px,1.15vw,14.5px); font-weight:700; line-height:1.6; }
/* 選択中 ⚠ 赤にしない。青の縁と淡い青の地だけで表す */
.tp__r:checked + .tc{ border-color:rgba(31,95,168,.55); background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 2px rgba(31,95,168,.16),
             0 22px 46px -34px rgba(31,95,168,.6); }
.tp__r:focus-visible + .tc{ outline:2px solid var(--blue); outline-offset:3px; }

/* ---- 4. フォーム --------------------------------------------
   🛑 送信処理は未接続。⚠ 勝手に送信先を作らない。 */
.fm{ margin-top:clamp(28px,3.4vw,44px); padding:clamp(22px,3vw,48px);
  border-radius:var(--r-3);
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 30px 70px -50px rgba(31,95,168,.55);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
.fm__grid{ display:grid; gap:clamp(16px,2vw,26px); }
@media(min-width:860px){ .fm__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fm__f{ display:flex; flex-direction:column; gap:9px; }
.fm__f--wide{ grid-column:1 / -1; }
.fm__f > span{ display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.02em; }
/* ⚠ 必須は赤にしない（ロゴ以外に赤を使わないため）。青で十分に目立つ */
.rq,.op{ font-size:10.5px; font-weight:700; letter-spacing:.08em; line-height:1;
  padding:5px 8px; border-radius:5px; }
.rq{ background:var(--blue); color:#fff; }
.op{ background:rgba(18,22,28,.07); color:var(--ink-mute); }

.fm input, .fm select, .fm textarea{
  width:100%; font-family:inherit; font-size:15px; line-height:1.7; color:var(--ink);
  padding:15px 16px; border-radius:12px;
  background:rgba(255,255,255,.92); border:1px solid rgba(31,95,168,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset; }
.fm textarea{ min-height:clamp(120px,14vh,150px); resize:vertical; }
.fm input::placeholder, .fm textarea::placeholder{ color:#9aa5b1; }
.fm input:focus, .fm select:focus, .fm textarea:focus{
  outline:2px solid var(--blue-lit); outline-offset:1px; border-color:transparent; }
/* select の矢印。⚠ 画像を読み込まない。CSS だけで作る */
.sel{ position:relative; }
.sel select{ appearance:none; -webkit-appearance:none; padding-right:44px; }
.sel::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px;
  margin-top:-6px; pointer-events:none;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); border-radius:1px; }

.fm__send{ margin-top:clamp(24px,3vw,36px); text-align:center; }
.fm__send .btn{ min-width:min(100%,300px); justify-content:center; border-radius:99px;
  padding:18px 32px; font-size:15px; }
/* 🛑 送信先が未確定。押せない状態にしてある */
.fm__send .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.fm__send .btn[disabled]:hover{ transform:none; background:var(--blue); }
.fm__pend{ margin-top:14px; display:inline-block; padding:11px 16px; border-radius:var(--r-1);
  border:1px dashed var(--line-blue); background:var(--blue-soft);
  font-size:12px; line-height:1.85; color:var(--blue); text-align:left; }

/* ---- 5. 直接のご連絡 ----------------------------------------
   🛑 架空の電話番号・メールアドレスを置かない。
      確認できているのは info@lastqueen.jp だけ。 */
/* ⚠ 2026-09-01：電話番号の枠を削除したのでメール1枚。中央に置く */
.dr{ margin-top:clamp(24px,3vw,38px); display:grid; gap:clamp(12px,1.6vw,20px);
  max-width:min(100%,520px); margin-inline:auto; }
.dr__c{ display:flex; align-items:center; gap:clamp(14px,1.8vw,20px);
  padding:clamp(18px,2.2vw,28px); border-radius:var(--r-2);
  background:rgba(255,255,255,.84); border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 20px 46px -38px rgba(31,95,168,.5);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.dr__ic{ flex:none; width:clamp(44px,4.4vw,54px); height:clamp(44px,4.4vw,54px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,95,168,.07); border:1px solid rgba(31,95,168,.14); }
.dr__ic svg{ width:46%; height:46%; stroke:var(--blue); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dr__t{ font-size:12px; color:var(--ink-mute); line-height:1.6; }
.dr__v{ margin-top:5px; font-size:clamp(16px,1.7vw,20px); font-weight:700; letter-spacing:.02em;
  color:var(--blue); word-break:break-all; }
.dr__c--wait{ background:var(--blue-soft); border:1px dashed var(--line-blue); box-shadow:none; }
.dr__c--wait .dr__v{ font-size:clamp(13px,1.2vw,14.5px); font-weight:700; }

/* ⚠ 実測して調整 ------------------------------------------------
   ・送信ボタンと注意書きが横に並んでしまっていた → 縦に積む
   ・「メールでのお問い合わせ」と本文が1行になっていた → 縦に積む */
.fm__pend{ display:block; margin:16px auto 0; max-width:min(100%,540px); }
.dr__c > span:last-child{ display:block; min-width:0; }
.dr__t{ display:block; }

/* ⚠ SP（〜439px）で「お気軽にご相談くださ／い。」と語の途中で折れた（実測）。
   ⚠ 見出しの字を少しだけ小さくして、1行に収める。 */
@media(max-width:439px){
  .chero__h{ font-size:25px; }
}

/* ⚠ 2枚だけなので、説明文を1行足しても詰まって見えない */
.tc__d{ font-size:clamp(12.5px,1.05vw,13.5px); line-height:2; color:#26303c; }
.tc__t{ font-size:clamp(15px,1.5vw,18px); }

/* 2026-09-21: consent control has its own layout, separate from text fields. */
.fm .fm__consent { display:flex; align-items:flex-start; gap:10px; margin-top:16px; cursor:pointer; line-height:1.8; }
.fm .fm__consent input[type="checkbox"] { width:20px; height:20px; flex:0 0 20px; padding:0; margin:4px 0 0; accent-color:var(--blue); }
.fm .fm__privacy { margin-top:20px; font-size:14px; line-height:1.8; }
.fm__f input, .fm__f textarea { font-size:16px; }

/* The recruitment-only fields are server-validated; switching topics needs no script. */
.fm__recruit{display:grid;gap:20px;border-block:1px solid #dce7f4;padding-block:24px}
body:has(#tp2:checked) .fm__recruit{display:none}
.fm__help{font-size:14px;line-height:1.9;color:#40556d}
.fm__f > span{flex-wrap:wrap}
.fm select{font-size:16px;min-width:0}

/* Use the same box metrics on desktop and mobile native selects. */
.fm select {
  appearance:none; -webkit-appearance:none; height:56px;
  line-height:24px; padding:15px 40px 15px 16px;
  background-image:linear-gradient(45deg,transparent 50%,#40556d 50%),linear-gradient(135deg,#40556d 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
}

/* Job selection: quiet, tactile cards with native keyboard radio behavior. */
.job-choice{border:0;padding:0;margin:0;min-width:0}
.job-choice legend{font-size:13px;font-weight:700;margin-bottom:14px;padding:0;line-height:2}
.job-choice legend .rq{margin-left:8px;font-style:normal}
.job-choice__grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.job-choice__option{position:relative;display:block;cursor:pointer;min-width:0}
.fm .job-choice__option input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;border:0;top:50%;left:24px}
.job-choice__surface{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:92px;padding:20px 24px;border-radius:16px;border:1px solid #d7e2ed;background:linear-gradient(145deg,#fff,#f8fafc);box-shadow:0 1px 0 #fff inset,0 6px 20px -16px #254867;transition:background .2s,border-color .2s,box-shadow .2s}
.job-choice__text{display:grid;gap:7px;min-width:0}
.job-choice__text b{font-size:14px;font-weight:600;line-height:1.6;letter-spacing:.02em;color:#203b55}
.job-choice__text small{font-size:12px;line-height:1.5;letter-spacing:.04em;color:#62788c}
.job-choice__mark{flex:none;width:20px;height:20px;border:1px solid #afc1d2;border-radius:50%;background:#fff;display:grid;place-items:center}
.job-choice__option input:checked + .job-choice__surface{border-color:#5d7f9f;background:linear-gradient(135deg,#f6faff,#eaf2fa);box-shadow:0 1px 0 #fff inset,0 8px 24px -17px #294d70}
.job-choice__option input:checked + .job-choice__surface .job-choice__mark{background:#315a7e;border-color:#315a7e}
.job-choice__option input:checked + .job-choice__surface .job-choice__mark::after{content:"";width:8px;height:5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.job-choice__option input:focus-visible + .job-choice__surface{outline:2px solid #315a7e;outline-offset:4px}
@media(hover:hover){.job-choice__option:hover .job-choice__surface{border-color:#7894af;box-shadow:0 8px 24px -16px #294d70}}
@media(min-width:700px){.job-choice__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.job-choice__surface{transition:none}}

/* Consent copy must wrap inside narrow form cards. */
.fm .fm__consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;width:100%;min-width:0;font-size:14px;line-height:1.8;padding-block:8px}
.fm .fm__consent span{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal}
.fm .fm__consent input[type="checkbox"]{margin:3px 0 0;box-shadow:none;border-radius:3px}