/* ============================================================
   キャリア教育診断 — 設計言語
   design_direction（component_system_v1 契約準拠）
   参照：藤森小児科(やさしい/能動)・東北大(可読/集約/A11y)・桑名眼科(余白)
   却下：桜十字(明朝/格式) ← avoid
   type：Zen Kaku Gothic New（端正なゴシック）。丸みは抑える／明朝・飾り英字なし
   color：css-color-palette-tokens で集中管理
   motion：常時2系統まで（come-to-view / blur-in ＋ 操作フィードバック）
============================================================ */

/* ── color tokens（refcode:css-color-palette-tokens）── */
:root{
  --base:#ffffff;
  --cream:#fbf9f4;        /* 温かい面 */
  --cream-2:#f5f1e9;
  --ink:#33302b;          /* 黒茶（冷たい黒にしない） */
  --ink-2:#6f685f;
  --ink-3:#a49c90;
  --line:#eae4d8;
  --line-2:#f0ebe1;
  --ai:#2f6c8f;           /* 差し色・藍。線と操作時のみ */
  --ai-deep:#255a78;
  --ai-soft:#e9f1f5;
  --ai-wash:#f4f8fa;
  --accent:#e0894f;       /* 前向きの一点・橙。ごく少量 */
  --accent-soft:#fbf0e6;
  --ok:#4a9d78; --warn:#d68a4a; --err:#cf5c52;

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(51,48,43,.04);
  --sh-2:0 10px 30px -12px rgba(51,48,43,.16);
  --sh-3:0 20px 44px -18px rgba(51,48,43,.2);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* clamp fluid type（refcode:css-clamp-fluid-type-scale の考え方） */
  --font:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--ink);background:var(--base);
  line-height:1.9;letter-spacing:.01em;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";min-height:100vh;overflow-x:hidden;
}

/* text-balance（part:modern-text-balance） */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* a11y hidden（part:util-visually-hidden） */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus-visible 全体 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.opt:focus-visible{
  outline:2px solid var(--ai);outline-offset:3px;border-radius:4px}

/* ── header（東北大：可読・固定・シンプル）── */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.site-header__in{max-width:1080px;margin:0 auto;padding:13px clamp(16px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__seal{width:28px;height:28px;border-radius:9px;background:var(--ai);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:.02em}
.brand__name{font-weight:700;font-size:16.5px;letter-spacing:.03em}
.nav{display:flex;align-items:center;gap:8px}
.nav a,.nav button{font-family:var(--font);font-size:14px;color:var(--ink-2);
  text-decoration:none;padding:9px 15px;border-radius:10px;border:none;background:none;
  cursor:pointer;font-weight:500;transition:background .25s,color .25s}
.nav a:hover,.nav button:hover{background:var(--ai-soft);color:var(--ai)}
.nav a.cta{background:var(--ai);color:#fff;font-weight:700}
.nav a.cta:hover{background:var(--ai-deep);color:#fff}
.nav .pill{font-size:12px;color:var(--ink-3);padding:6px 11px;border:1px solid var(--line);
  border-radius:16px;pointer-events:none}
.nav .pill.admin{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ── layout ── */
.container{max-width:1080px;margin:0 auto;padding:clamp(36px,6vh,64px) clamp(16px,4vw,44px) clamp(56px,9vh,96px)}
.container.narrow{max-width:460px}
.container.wide{max-width:1140px}
.page-head{margin-bottom:30px}
.page-head.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--ai);letter-spacing:.02em;margin-bottom:12px;
  background:var(--ai-soft);padding:6px 13px;border-radius:16px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ai)}
h1.title{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:700;line-height:1.4;letter-spacing:.02em}
h2.title{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:700;letter-spacing:.02em}
.lead{color:var(--ink-2);font-size:15.5px;margin-top:12px;line-height:2}

/* ── card ── */
.card{background:var(--base);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);padding:clamp(24px,4vw,38px)}
.card+.card{margin-top:18px}

/* ── form（part:form-validation-field / modern-accent-form）── */
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.field label .note{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:6px}
.input,.select{width:100%;padding:14px 16px;font-family:var(--font);font-size:15.5px;
  color:var(--ink);background:var(--base);border:1.5px solid var(--line);border-radius:var(--r-s);
  transition:border-color .2s,box-shadow .2s;outline:none;-webkit-appearance:none;appearance:none;accent-color:var(--ai)}
.input::placeholder{color:var(--ink-3)}
.input:focus,.select:focus{border-color:var(--ai);box-shadow:0 0 0 4px var(--ai-wash)}
.input.is-error{border-color:var(--err)}
.field__msg{font-size:12px;color:var(--err);margin-top:6px;min-height:1px}
.select-wrap{position:relative}
.select-wrap::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pw-meter{height:4px;border-radius:4px;background:var(--line);margin-top:8px;overflow:hidden}
.pw-meter>i{display:block;height:100%;width:0;border-radius:4px;transition:width .35s,background .35s}
.pw-hint{font-size:11.5px;color:var(--ink-3);margin-top:6px}

/* ── buttons（藍のやさしい質感。丸みは中庸、押し込みは控えめ）── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--r-m);
  border:none;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease),box-shadow .25s,background .25s,color .25s}
.btn-primary{background:var(--ai);color:#fff;box-shadow:0 8px 20px -10px rgba(47,108,143,.6)}
.btn-primary:hover{background:var(--ai-deep);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(47,108,143,.6)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{background:#c4c8cc;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:var(--base);color:var(--ai);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ai);background:var(--ai-wash)}
.btn-soft{background:var(--ai-soft);color:var(--ai)}
.btn-soft:hover{background:var(--ai);color:#fff}
.btn-block{width:100%}
.btn-lg{padding:16px 30px;font-size:16px}
.form-links{margin-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.form-links a{color:var(--ai);font-size:13.5px;font-weight:600;text-decoration:none}
.form-links a:hover{text-decoration:underline}

.divider{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-size:12.5px;margin:22px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.note-box{background:var(--ai-wash);border:1px solid var(--ai-soft);border-radius:var(--r-m);
  padding:15px 17px;font-size:13px;color:var(--ink-2);line-height:1.85}
.note-box.warm{background:var(--accent-soft);border-color:#f3e2d1}

/* ── toast（part:ui-toast）── */
.toast-host{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:13px 22px;
  border-radius:14px;font-size:14px;font-weight:600;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(14px);transition:all .35s var(--ease);max-width:88vw}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:#4a2320}
.toast .tdot{width:7px;height:7px;border-radius:50%;background:var(--ai);flex-shrink:0}
.toast.err .tdot{background:#ff9c8f}

/* ── motion：come-to-view（part:ui-come-to-view）── */
.ctv{transform:translateY(12px);opacity:0;transition:transform .8s var(--ease),opacity .8s ease}
.ctv.inview{transform:none;opacity:1}
.ctv.d1{transition-delay:.06s}.ctv.d2{transition-delay:.13s}
.ctv.d3{transition-delay:.2s}.ctv.d4{transition-delay:.27s}
/* motion：blur-in（part:reveal-blur-in）上品な出現 */
.blur-in{opacity:0;filter:blur(10px);transform:translateY(16px);
  transition:opacity .9s ease,filter .9s ease,transform .9s var(--ease)}
.blur-in.is-inview{opacity:1;filter:blur(0);transform:none}

.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{text-align:center}.hidden{display:none!important}
.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:32px}

/* ── footer ── */
.site-foot{border-top:1px solid var(--line);padding:22px clamp(16px,4vw,44px);
  display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12.5px}
.site-foot .seal{width:18px;height:18px;border-radius:6px;background:var(--ai);opacity:.45}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.05ms!important}
  html{scroll-behavior:auto}
  .ctv,.blur-in{opacity:1;transform:none;filter:none}
}
@media(max-width:560px){
  .card{padding:24px 20px}
  h1.title{font-size:1.6rem}
  .site-header__in{padding:12px 16px}
  .nav a,.nav button{padding:8px 11px;font-size:13.5px}
}