/* 問い合わせページ（採用企業・転職者・送信完了）の共通CSS。2026-10-02 奥村指示。
   ASSIGN の問い合わせフォーム（feedback.assign-inc.com/contact/new）を手本に、1列・ラベル上・必須は＊。
   色と書体は LP（Main.dc.html / Mobile.dc.html）と同じ値。送信先は FormSubmit（コーポレートサイトと同じ） */
:root{
  --bg:#ffffff; --ink:#1f1e1d; --ink2:#34322f; --mid:#5c5850; --mute:#6b665d; --soft:#8a857b;
  --line:#ebe7e0; --line2:#d6d0c5; --accent:#d97757; --accent-dark:#b8603f; --accent-ink:#a9532f; --tint:#fbeee8;
  --gut:20px; --ease:cubic-bezier(.2,.7,.1,1);
  --jp:'游ゴシック体',YuGothic,'游ゴシック Medium','Yu Gothic Medium','游ゴシック','Yu Gothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --head:'游ゴシック体 Pr6N D','Yu Gothic Pr6N D','游ゴシック体',YuGothic,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --en:'Shippori Mincho B1',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--jp);background:var(--bg);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;-webkit-tap-highlight-color:transparent}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.jp{word-break:auto-phrase;line-break:strict}

/* ヘッダー・フッター。LP と同じ形 */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{height:56px;display:flex;align-items:center;gap:14px}
.hdr .brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.hdr img{height:26px;width:auto}
.hdr span{font-size:11px;line-height:1.4;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftr{background:var(--ink);padding:40px 0 48px;margin-top:80px}
.ftr .info img{height:28px;width:auto;margin-bottom:8px}
.ftr .ftag{font-size:12px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 10px}
.ftr .t4{font-size:12px;line-height:1.6;color:rgba(255,255,255,.72)}
.ftr .links{display:flex;gap:40px;margin-top:16px}.ftr .lcol{display:flex;flex-direction:column}
.ftr .links a{color:#fff;text-decoration:none;padding:12px 0;display:inline-block}
.ftr .links a:hover{text-decoration:underline}

/* 本文 */
.page{max-width:640px;margin:0 auto;padding:48px var(--gut) 0}
.label{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.label::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:0 50% 50% 50%}
.h1{font-family:var(--head);font-weight:700;font-size:26px;line-height:1.4;letter-spacing:.02em;font-feature-settings:"palt";margin:16px 0 0}
.lead{margin-top:16px;font-size:14px;line-height:1.95;color:var(--mid)}
.lead a{color:var(--accent-ink)}

/* フォーム。1列・ラベルは上・必須は＊ */
.form{margin-top:40px;display:flex;flex-direction:column;gap:24px;padding-top:32px;border-top:1px solid var(--line2)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld>span{font-size:14px;font-weight:700;line-height:1.5}
.fld>span i{font-style:normal;color:var(--accent);margin-left:4px}
.fld>span em{font-style:normal;font-weight:400;font-size:12px;color:var(--soft);margin-left:8px}
.fld .note{font-size:12px;line-height:1.7;color:var(--soft)}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);background:#fff;
  border:1px solid var(--line2);border-radius:4px;padding:12px 14px;-webkit-appearance:none;appearance:none}
textarea{min-height:140px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--soft)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,119,87,.18)}
.opts{display:flex;flex-direction:column;gap:8px}
.opts label{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:14px;line-height:1.6;cursor:pointer}
.opts label:has(:checked){border-color:var(--accent);background:var(--tint)}
.opts input{margin:5px 0 0;flex-shrink:0;accent-color:var(--accent)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.7;color:var(--ink2)}
.consent input{margin:5px 0 0;flex-shrink:0;accent-color:var(--accent)}
.consent a{color:var(--accent-ink)}
.consent-note{font-size:12px;line-height:1.75;color:var(--mute)}
.consent-note a{color:var(--accent-ink)}
.btn{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:60px;padding:0 24px;border:0;border-radius:8px;
  background:radial-gradient(120% 140% at 50% -20%,#f0a98e 0%,#d97757 55%,#cf6a49 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.2),0 16px 32px -14px rgba(217,119,87,.75);color:#fff;font:inherit;font-weight:700;font-size:17px;letter-spacing:.04em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .25s var(--ease),transform .2s var(--ease)}
.btn:hover{filter:brightness(.92)}
.btn:active{transform:scale(.985)}
.btn .arw{width:20px;height:20px;flex-shrink:0}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* 送信完了 */
.done{text-align:center;padding-top:64px}
.done .dt{margin-top:20px;font-family:var(--head);font-weight:700;font-size:18px;color:var(--accent-ink)}
.done .h1{margin-top:24px}
.done .lead{margin-top:20px}
.done .btn{max-width:360px;margin:40px auto 0}

@media (min-width:821px){
  .hdr .wrap{height:80px;gap:20px}
  .hdr img{height:32px}
  .hdr span{font-size:13px}
  .ftr{padding:56px 0 64px;margin-top:120px}
  .ftr .row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
  .ftr .info img{height:32px}
  .ftr .links{gap:56px;margin-top:0}.ftr .lcol{gap:10px}.ftr .links a{padding:0}
  .page{padding-top:80px}
  .h1{font-size:34px}
  .lead{font-size:15px}
  .btn{max-width:360px;margin:8px auto 0}
}

/* 予約ページ（book.html）。2026-10-03 奥村指示。アプリの13問と同じ1問ずつの形。ASSIGN の LP フォームを手本に、選択式はタイル（押すと主色の枠と薄い地）、連絡先は後ろ */
.book .form{gap:28px}
.step{border:0;padding:0;margin:0;min-width:0}
.step[hidden]{display:none}
.q-h{font-family:var(--head);font-weight:700;font-size:20px;line-height:1.5;letter-spacing:.02em;font-feature-settings:"palt";padding:0;margin:0 0 18px}
.q-h em{display:block;font-family:var(--jp);font-style:normal;font-weight:400;font-size:12px;color:var(--soft);margin-top:4px}
.wiz{margin-top:28px;padding-top:28px}
.wiz .prog{height:3px;background:var(--line);border-radius:999px;overflow:hidden}
.wiz .prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s var(--ease)}
.wiz .count{font-family:var(--en);font-size:13px;letter-spacing:.08em;color:var(--mute);margin:-14px 0 -4px}
.wiz .count b{color:var(--accent-ink);font-weight:600}
.wnav{display:flex;align-items:center;gap:16px;margin-top:4px}
.wnav .back{font:inherit;font-size:14px;color:var(--mid);background:none;border:0;padding:12px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;flex-shrink:0}
.wnav .next{margin:0;flex:1}
.wiz .err{font-size:13px;color:var(--accent-ink);margin:-12px 0 0}
.sum{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:#faf8f5;font-size:14px;line-height:1.7}
.sum dt{color:var(--soft);white-space:nowrap}
.sum dd{margin:0;color:var(--ink)}
.tiles{display:grid;gap:8px}.tiles.c1{grid-template-columns:1fr}.tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:10px 12px;border:1px solid var(--line2);border-radius:4px;background:#fff;font-size:14px;line-height:1.5;color:var(--ink2);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.tiles label:hover{background:#faf8f5}
.tiles label:has(:checked){border-color:var(--accent);background:var(--tint);color:var(--accent-ink);font-weight:700}
.tiles label:has(:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.tiles input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.step>.note{display:block;margin-top:12px;font-size:12px;line-height:1.7;color:var(--soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (min-width:821px){.tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles label{font-size:15px;min-height:54px}.q-h{font-size:24px}.wnav .next{max-width:none}}
/* 予約ページのカレンダー（④ 日時を選ぶ）。試作 design/Coach.dc.html の「日を選ぶ」と同じ作り */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calhead strong{font-family:var(--head);font-size:16px;letter-spacing:.02em}
.cnav{width:36px;height:36px;border:1px solid var(--line2);border-radius:4px;background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cnav svg{width:16px;height:16px}.cnav:disabled{opacity:.3;cursor:default}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calgrid .wd{text-align:center;font-size:11px;color:var(--soft);padding:4px 0}
.calgrid .wd:first-child,.calgrid .wd:last-child{color:var(--line2)}
.calgrid .day{height:44px;border:1px solid var(--line);border-radius:4px;background:#fff;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.calgrid .day:hover:not(:disabled){background:#faf8f5;border-color:var(--line2)}
.calgrid .day:disabled{color:var(--line2);border-color:transparent;background:transparent;cursor:default}
.calgrid .day.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.slots{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.slots-h{font-size:14px;font-weight:700;margin:0 0 10px}
.slots .tiles label{min-height:44px;padding:8px}
@media (min-width:821px){.calgrid .day{height:48px;font-size:15px}.slots .tiles.c2{grid-template-columns:repeat(5,minmax(0,1fr))}}

.book .h1{margin-top:0}   /* 10-03 奥村指示。ラベル（Free Career Interview）を外したので見出しが先頭 */

/* 予約完了の公式LINE案内（book-thanks.html）。試作 Coach.dc.html の完了画面と同じ文言・URL（lin.ee/SRk3rA3）。LINE の緑はブランド色 #06C755 */
.linebox{margin:40px auto 0;max-width:420px;padding:24px 20px;border:1px solid var(--line);border-radius:4px;background:#faf8f5;text-align:center}
.line-k{font-size:12px;font-weight:700;letter-spacing:.08em;color:#06C755}
.line-h{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.5;letter-spacing:.02em;margin:6px 0 0}
.line-p{margin-top:10px;font-size:13px;line-height:1.8;color:var(--mid)}
.done .btn.line{margin:18px auto 0;max-width:none;height:56px;background:#06C755;box-shadow:0 1px 2px rgba(0,0,0,.15),0 12px 24px -14px rgba(6,199,85,.7);font-size:16px}
.btn.line svg{width:22px;height:22px;flex-shrink:0}
.line-s{margin-top:12px;font-size:12px;line-height:1.7;color:var(--soft)}
.back-top{display:inline-block;margin-top:32px;font-size:14px;color:var(--mid);text-underline-offset:3px}

/* 10-03 奥村指示。PC では予約画面がスクロールなしで収まるように詰める（1280×800 で各ステップが1画面）。カレンダーと時刻は横並び */
@media (min-width:821px){
  .book.page{padding-top:40px}
  .book .h1{font-size:28px}
  .book .wiz{margin-top:16px;padding-top:16px;gap:20px}
  .book .q-h{font-size:21px;margin-bottom:14px}
  .book .tiles label{min-height:48px}
  .book .tiles.c1{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book .wnav{margin-top:0}
  .book .wnav .next{height:54px}
  .calcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .calgrid .day{height:40px;font-size:14px}
  .slots{margin:0;padding:0;border:0}
  .slots .tiles.c2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slots .tiles label{min-height:40px}
  .sum{margin-bottom:14px;padding:12px 16px;gap:6px 16px}
}