/* 新卒FSオンボーディングポータル
   参考：Goodpatch（コバルトブルーの3D・大きな英字）＋ 神戸女子大（パステルの空気・余白）
   文字：大きさ5段（12/14/16/24/display）・太さ3段（400/500/700） */

:root {
  --ground: #EEF0F3;
  --ink: #1F2B38;
  --ink-2: #445263;
  --ink-3: #5A6676;
  --line: rgb(31 43 56 / 9%);
  --blue: #096FC8;
  --blue-2: #2A85D4;
  --blue-d: #0A4F94;
  --ice: #CEE2F4;
  --navy: #1B2632;
  --lav: #E7E1F6;
  --mint: #D8F2EA;
  --peach: #F9E4EC;
  --amber: #8A5508;
  --amber-bg: #FBF0DC;

  --glass: rgb(255 255 255 / 70%);
  --glass-line: rgb(255 255 255 / 90%);
  --shadow: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 18px 40px -18px rgb(27 38 50 / 18%), 0 2px 6px rgb(27 38 50 / 4%);
  --r: 22px;
  --side: 296px;

  --f-en: "Outfit", "Zen Kaku Gothic New", sans-serif;
  --f-ja: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 24px;
  --fs-xl: clamp(48px, 7vw, 96px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ja);
  font-size: var(--fs-m);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .02em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
h1, h2, h3, h4, p { margin: 0; }
h2, h3, h4, .hero-title, .pmv p, .aspiration p, p, dd, small, li { text-wrap: pretty; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ---------- 背面（4層） ---------- */
.scene {
  position: fixed;
  inset: 0 0 0 var(--side);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora {
  position: absolute;
  inset: -160px -10%;
  background:
    radial-gradient(ellipse 50% 40% at 84% 14%, rgb(206 226 244 / 95%), transparent 70%),
    radial-gradient(ellipse 45% 38% at 18% 30%, rgb(231 225 246 / 85%), transparent 70%),
    radial-gradient(ellipse 40% 34% at 62% 62%, rgb(216 242 234 / 70%), transparent 70%),
    radial-gradient(ellipse 36% 30% at 20% 88%, rgb(249 228 236 / 70%), transparent 70%),
    radial-gradient(ellipse 60% 50% at 46% 40%, rgb(255 255 255 / 85%), transparent 70%);
}
/* 正式ロゴの透かし：オーロラと床の間、文字の邪魔をしない薄さ */
.watermark {
  position: absolute;
  left: 4%;
  top: 24px;
  width: min(96%, 1320px);
  height: auto;
  opacity: .06;
  user-select: none;
}
/* 奥へ伸びる格子の床：近未来の奥行き */
.floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -18%;
  height: 70%;
  background-image:
    linear-gradient(rgb(9 111 200 / 14%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(9 111 200 / 14%) 1px, transparent 1px);
  background-size: 64px 64px;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 70%, transparent 100%);
}
.floor { rotate: x 64deg; }
@supports not (rotate: x 64deg) {
  .floor { transform: perspective(900px) rotateX(64deg); }
}
.scene { perspective: 900px; }

/* 右腕アプリと同じ「光のにじみ」と「ガラスを通った光の筋」 */
.glass-light {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 82% 18%, hsl(204 90% 78% / 55%), transparent 40%),
    radial-gradient(ellipse at 94% 76%, hsl(268 90% 86% / 50%), transparent 42%),
    radial-gradient(ellipse at 8% 96%, hsl(160 90% 85% / 45%), transparent 45%);
}
.glass-refraction {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 35deg at 70% 40%, transparent 0deg, #fff0 56deg, #fff6 64deg, #fff8 66deg, #a5d8ef30 72deg, transparent 86deg, transparent 186deg, #fff5 193deg, #fff7 195deg, #dbbdff2a 201deg, transparent 214deg);
  opacity: .7;
}
/* 虹色ガラスの形（Codexで生成した素材） */
/* 背景のガラス：ぼかし・影は画像に焼き込み済み。動かす層は最初から別の層にしておく */
.g-obj, .g-shadow, .aurora, .floor, .watermark, .glass-light { will-change: transform; }
.g-obj { position: absolute; height: auto; user-select: none; }
/* 中：ピントが合っている層（影つき画像は余白込みなので約1.28倍の幅） */
.g-orb-l { width: clamp(280px, 33vw, 510px); top: 4%; right: -150px; animation: float 14s ease-in-out infinite; }
.g-orb-s { width: clamp(82px, 7.7vw, 124px); top: 64%; right: 33%; animation: float 11s ease-in-out -4s infinite; }
.g-arrow { width: clamp(190px, 19vw, 295px); top: 66%; right: -7%; rotate: -6deg; animation: float 15s ease-in-out -7s infinite; }
/* 床に落ちる淡い影（ぼかしはグラデーションで表現） */
.g-shadow { position: absolute; width: clamp(130px, 13vw, 200px); height: 30px; top: calc(66% + clamp(200px, 20vw, 300px)); right: calc(-5% + 10px); border-radius: 50%; background: radial-gradient(ellipse closest-side, rgb(9 79 148 / 20%), rgb(9 79 148 / 8%) 55%, transparent); animation: shadowPulse 15s ease-in-out -7s infinite; }
@keyframes shadowPulse { 50% { scale: .85 1; opacity: .7; } }
/* 奥：小さく・ぼかした画像・動かさない（視差だけ） */
.g-ring { width: clamp(130px, 12vw, 200px); top: 62%; left: -4%; rotate: 18deg; }
.g-orb-far { width: clamp(56px, 4.6vw, 80px); top: 34%; left: 1%; }
/* 手前：大きくぼかした画像・動かさない（視差だけ） */
.g-near { width: clamp(300px, 34vw, 520px); bottom: -16%; left: -10%; }
/* イラストがある画面では大きな玉を右へ寄せる（レイアウトは動かさず、位置ずらしだけ） */
body:not([data-tab="roadmap"]) .g-orb-l { translate: 120px 26vh; scale: .85; }
@keyframes float { 50% { translate: 0 -14px; } }
body:not([data-tab="roadmap"]) .g-orb-l { animation: none; transition: translate .7s cubic-bezier(.2,.7,.2,1), scale .7s cubic-bezier(.2,.7,.2,1); }

/* ---------- 骨組み ---------- */
.shell { position: relative; z-index: 1; }
.main {
  margin-left: var(--side);
  padding: 56px clamp(24px, 5vw, 80px) 120px;
  max-width: calc(var(--side) + 1180px);
}

/* ---------- 左バー（成長の一元化） ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  padding: 24px 20px 20px;
  overflow-y: auto;
  background: rgb(250 251 252 / 94%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 3;
  scrollbar-width: thin;
}
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 0 4px; }
.brand-mark-wrap { display: flex; flex-direction: column; gap: 6px; }
.brand-logo { display: block; width: 112px; height: auto; }
.brand-sub { white-space: nowrap; font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.me { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.me-text b { font-weight: 700; }
.me-text small { font-size: var(--fs-xs); color: var(--ink-3); }
.me-step { margin-top: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--ink); display: flex; flex-direction: column; line-height: 1.4; }
.me-step em { font-style: normal; font-family: var(--f-en); font-size: var(--fs-xs); color: var(--blue); letter-spacing: .1em; white-space: nowrap; }

.ring { position: relative; width: 58px; height: 58px; flex: none; }
.ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke: var(--ice); stroke-width: 4; }
.ring .ring-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .8s cubic-bezier(.2,.7,.2,1); }
.ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-en); font-weight: 700; font-size: var(--fs-l); letter-spacing: -.02em; }
.ring > span small { font-size: var(--fs-xs); margin-left: 1px; }
.ladder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; margin-bottom: -10px; }
.ladder-head small { font-size: var(--fs-xs); color: var(--ink-3); }

.eyebrow { font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.eyebrow.on-dark { color: rgb(255 255 255 / 80%); }

/* 階段のはしご：上ほど先のSTEP */
.ladder { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.ladder::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(to top, var(--blue) var(--done, 0%), var(--line) 0); }
.ladder-step { position: relative; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 0; border-radius: 12px; transition: background .2s ease-out; padding-left: calc((7 - var(--i)) * 0px); }
.ladder-btn { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: none; border-radius: 12px; }
.ladder-step:hover { background: rgb(9 111 200 / 6%); }
.ladder-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.ladder-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 700;
  background: #fff; border: 2px solid var(--line); color: var(--ink-3);
}
.ladder-dot svg { width: 14px; height: 14px; }
.ladder-text { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; min-width: 0; }
.ladder-name { font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder-meta { font-family: var(--f-en); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.ladder-bar { grid-column: 2; height: 4px; border-radius: 4px; background: var(--ice); overflow: hidden; }
.ladder-bar i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.ladder-step.is-done .ladder-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.ladder-step.is-done .ladder-name { color: var(--ink); }
.ladder-step.is-now { background: linear-gradient(90deg, rgb(9 111 200 / 10%), rgb(9 111 200 / 0%)); }
.ladder-step.is-now .ladder-dot { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgb(9 111 200 / 15%); }
.ladder-step.is-now .ladder-name { color: var(--ink); font-weight: 700; }
.ladder-step.is-lock .ladder-dot { color: var(--ink-3); background: #F4F5F7; }
.ladder-step.is-lock .ladder-meta { color: var(--amber); }

.nav { display: flex; flex-direction: column; gap: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 12px; background: none; text-align: left; transition: background .2s; }
.nav-item:hover { background: rgb(9 111 200 / 6%); }
.nav-en { font-family: var(--f-en); font-weight: 500; font-size: var(--fs-m); min-width: 84px; }
.nav-ja { font-size: var(--fs-xs); color: var(--ink-3); }
.nav-item.is-active { background: var(--navy); color: #fff; }
.nav-item.is-active .nav-ja { color: rgb(255 255 255 / 70%); }
.nav-short { display: none; }

.mode { display: grid; grid-template-columns: auto auto; padding: 3px; border-radius: 999px; background: #E6E9EE; flex: none; }
.mode button { border: 0; background: none; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
.mode button.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(27 38 50 / 12%); }

/* ---------- 見出し ---------- */
.page-head { margin-bottom: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-illust { width: clamp(200px, 22vw, 300px); height: auto; margin: -16px 0 -8px; flex: none; }
.display {
  font-family: var(--f-en);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--ink);
}
.page-ja { margin-top: 12px; font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.page-ja span { color: var(--ink-3); font-weight: 400; }
.h-section { font-family: var(--f-en); font-size: var(--fs-l); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; display: flex; align-items: baseline; gap: 12px; }
.h-ja { font-family: var(--f-ja); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); letter-spacing: .08em; }

/* ---------- カード（すりガラス） ---------- */
.card {
  position: relative;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--r);
  background: #F8FAFC;
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.card { background: linear-gradient(160deg, rgb(255 255 255 / 90%), rgb(255 255 255 / 80%)); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.card-note { font-size: var(--fs-xs); color: var(--ink-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-2 > * { min-width: 0; }
.grid-2.is-growth { grid-template-columns: 1.3fr 1fr; }
.grid-2 > .card { margin-bottom: 24px; }
.grid-2.is-wide-left { grid-template-columns: 1.1fr 1fr; align-items: start; }

/* ---------- ヒーロー（Goodpatchの青） ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: 24px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, #1B83D8, transparent 60%),
    linear-gradient(135deg, #0B6AC0, #0A57A6 70%, #0C4B8E);
  box-shadow: 0 30px 60px -28px rgb(9 111 200 / 60%), inset 0 1px 0 rgb(255 255 255 / 25%);
}
.hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.hero-stairs { position: absolute; right: clamp(-20px, 1vw, 10px); bottom: -40px; width: clamp(215px, 25vw, 365px); height: auto; will-change: transform; animation: float 12s ease-in-out infinite; }
.hero-orb { position: absolute; right: clamp(190px, 22vw, 330px); top: 22px; width: 60px; height: auto; }
.hero-title, .hero-stats { max-width: calc(100% - clamp(150px, 20vw, 300px)); }
.hero-title { position: relative; font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; line-height: 1.5; max-width: 22em; margin-top: 10px; }
.hero-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 16px 40px; margin: 32px 0 0; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-size: var(--fs-xs); color: rgb(255 255 255 / 75%); }
.hero-stats dd { margin: 0; font-family: var(--f-en); font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.hero-stats small { font-size: var(--fs-s); margin-left: 4px; color: rgb(255 255 255 / 75%); }

/* ---------- 階段（ステップアップ） ---------- */
.stairs {
  list-style: none; margin: 0; padding: 36px 0 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px;
  align-items: end; height: 340px;
}
.stair { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.stair-wrap { position: relative; height: var(--h); }
.stair-block {
  position: relative; height: 100%; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #fff, #EEF3F8);
  border: 1px solid #fff;
  box-shadow: inset 0 -10px 18px rgb(9 111 200 / 6%), 0 14px 24px -14px rgb(27 38 50 / 25%);
  overflow: hidden;
  transform-origin: bottom;
}
.main.is-enter .stair-block { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * 1ms + 150ms); }
.stair:nth-child(1) { --d: 0; } .stair:nth-child(2) { --d: 70; } .stair:nth-child(3) { --d: 140; } .stair:nth-child(4) { --d: 210; }
.stair:nth-child(5) { --d: 280; } .stair:nth-child(6) { --d: 350; } .stair:nth-child(7) { --d: 420; } .stair:nth-child(8) { --d: 490; }
@keyframes rise { from { transform: scaleY(.2); opacity: 0; } }
.stair-block i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: linear-gradient(180deg, #3B97DD, var(--blue) 60%, var(--blue-d)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
.stair-pct { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-family: var(--f-en); font-weight: 500; font-size: var(--fs-s); color: var(--ink-2); }
.stair-pct svg { width: 16px; height: 16px; }
.stair.is-done .stair-pct { color: #fff; }
.stair.is-done .stair-block { box-shadow: inset 0 -10px 18px rgb(0 0 0 / 10%), 0 18px 28px -14px rgb(9 111 200 / 55%); }
.stair.is-now .stair-block { outline: 2px solid var(--blue); outline-offset: 3px; }
.stair.is-lock .stair-block { background: repeating-linear-gradient(135deg, #F3F4F6 0 8px, #ECEEF1 8px 16px); }
.stair-step { margin-top: 10px; font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; color: var(--ink-3); }
.stair-name { font-size: var(--fs-xs); font-weight: 500; line-height: 1.45; color: var(--ink-2); word-break: auto-phrase; }
.stair.is-done .stair-step, .stair.is-now .stair-step { color: var(--blue); }
.stair.is-now .stair-name { color: var(--ink); font-weight: 700; }
.here {
  position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 64px); translate: -50% 0;
  white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: var(--fs-xs); font-weight: 700;
}
.here::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--navy); rotate: 45deg; translate: -50% 0; border-radius: 2px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.stair-flag { position: absolute; z-index: 2; left: 50%; bottom: calc(100% - 14px); width: 56px; height: auto; translate: -40% 0; }
.stair-mascot { position: absolute; z-index: 2; left: 50%; bottom: calc(100% - 4px); width: 52px; height: auto; translate: -50% 0; will-change: transform; animation: hop 2.4s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-8px) scale(.97, 1.03); } 55% { transform: translateY(-8px); } 70% { transform: translateY(0) scale(1.04, .96); } }

/* ---------- 成長グラフ ---------- */
/* 成長グラフ：線は枠いっぱいに伸び縮み、文字はHTML（どの幅でも12px以上） */
.growth-card { display: flex; flex-direction: column; }
.growth { flex: 1; display: flex; flex-direction: column; min-height: 220px; padding: 22px 8px 0 4px; }
.g-plot { position: relative; flex: 1; min-height: 170px; }
.g-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-plot svg * { vector-effect: non-scaling-stroke; }
.g-axis { stroke: rgb(31 43 56 / 18%); }
.g-grid { stroke: var(--line); }
.g-goal { stroke: var(--blue); stroke-dasharray: 4 6; opacity: .5; }
.g-plan { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .7; }
.g-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-goal-label { position: absolute; right: 0; top: -20px; font-size: var(--fs-xs); color: var(--blue); }
.g-dot { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 0 0 8px rgb(9 111 200 / 14%); }
.g-now { position: absolute; translate: 14px -130%; font-family: var(--f-en); font-size: var(--fs-s); font-weight: 700; color: var(--ink); white-space: nowrap; }
.g-ticks { position: relative; height: 26px; margin-top: 6px; }
.g-ticks span { position: absolute; top: 0; translate: -50% 0; font-family: var(--f-en); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.g-ticks span:first-child { translate: 0 0; }
.g-ticks span:last-child { translate: -100% 0; }
.growth-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 8px; font-size: var(--fs-s); color: var(--ink-2); }
.growth-line b.is-word { font-family: var(--f-ja); font-size: var(--fs-m); font-weight: 700; }
.growth-line b { font-family: var(--f-en); font-size: var(--fs-l); font-weight: 500; color: var(--ink); margin: 0 2px; }
.growth-line b.is-up { color: var(--blue); }
.growth-line b.is-down { color: var(--amber); }
.g-legend { display: flex; gap: 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
.g-legend span { display: flex; align-items: center; gap: 6px; }
.g-legend i { width: 18px; height: 0; border-top: 3px solid var(--blue); }
.g-legend i.is-plan { border-top: 2px dashed var(--ink-3); }
.g-goal { stroke: var(--blue); stroke-dasharray: 4 6; opacity: .5; }
.g-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- トラック ---------- */
.track { margin-bottom: 18px; }
.track-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-s); margin-bottom: 6px; }
.track-top b { font-weight: 700; }
.track-top span { flex: none; white-space: nowrap; font-family: var(--f-en); font-weight: 500; color: var(--blue); }
.track small { font-size: var(--fs-xs); color: var(--ink-3); }
.bar { height: 8px; border-radius: 8px; background: rgb(9 111 200 / 12%); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-2), var(--blue)); }
.now-box { margin-top: 8px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.now-title { display: block; margin-top: 2px; font-size: var(--fs-m); font-weight: 700; }
.now-box ul { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.now-box li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); font-weight: 500; }
.now-box small { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- バッジ ---------- */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.badge.is-todo { background: #EEF0F3; color: var(--ink-3); }
.badge.is-doing { background: var(--ice); color: var(--blue-d); }
.badge.is-review { background: var(--amber-bg); color: var(--amber); }
.badge.is-done { background: var(--blue); color: #fff; }

/* ---------- OUR VALUES ---------- */
.value { border-radius: 16px; background: #fff; border: 1px solid var(--line); margin-top: 12px; overflow: hidden; transition: box-shadow .25s; }
.value-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 20px; padding: 16px 20px; border: 0; background: none; text-align: left; }
.value-no { font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.value-no em { font-style: normal; font-family: var(--f-ja); letter-spacing: .04em; padding: 1px 8px; border-radius: 6px; background: rgb(255 255 255 / 18%); color: #fff; }
.value-name { font-size: var(--fs-m); font-weight: 700; }
.value-count { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--f-en); }
.value-body { display: none; padding: 0 20px 18px; font-size: var(--fs-s); line-height: 1.9; color: var(--ink-2); }
.value.is-open .value-body { display: block; }
.value.is-spot { background: linear-gradient(120deg, #18222D, #2A3746 70%, #3B4A5C); border-color: transparent; color: #fff; box-shadow: 0 20px 40px -20px rgb(27 38 50 / 60%); }
.value.is-spot .value-no, .value.is-spot .value-count { color: rgb(255 255 255 / 70%); }
.value.is-spot .value-body { color: rgb(255 255 255 / 88%); }

/* ---------- タイムライン ---------- */
.tl { overflow-x: auto; }
.tl-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; min-width: 760px; }
.tl-headrow { margin-bottom: 8px; }
.tl-months { display: grid; grid-template-columns: repeat(6, 1fr); }
.tl-months span { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); padding-left: 8px; border-left: 1px solid var(--line); }
.tl-body { position: relative; }
.tl-body .tl-row { height: 56px; border-top: 1px solid var(--line); }
.tl-name { font-size: var(--fs-s); font-weight: 500; display: flex; flex-direction: column; line-height: 1.35; }
.tl-name span { font-family: var(--f-en); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .08em; }
.tl-lane { position: relative; height: 100%; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.tl-bar { position: absolute; top: 12px; bottom: 12px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; padding: 0 12px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.tl-bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill); background: var(--blue); opacity: .9; }
.tl-bar span { position: relative; }
.tl-bar.is-done { background: var(--blue); color: #fff; }
.tl-bar.is-doing { background: var(--ice); color: var(--blue-d); }
.tl-bar.is-doing i { background: linear-gradient(90deg, rgb(9 111 200 / 35%), rgb(9 111 200 / 55%)); }
.tl-bar.is-plan { background: #fff; border: 1px dashed rgb(9 111 200 / 35%); color: var(--ink-2); }
.tl-bar.is-plan i, .tl-bar.is-lock i { display: none; }
.tl-bar.is-lock { background: repeating-linear-gradient(135deg, #F3F4F6 0 8px, #ECEEF1 8px 16px); color: var(--amber); }
.tl-now { position: absolute; top: -6px; bottom: 0; left: calc(200px + (100% - 200px) * var(--nowf, 0)); width: 2px; background: var(--navy); z-index: 2; }
.tl-now em { position: absolute; top: -26px; left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--navy); color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: var(--fs-xs); color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 10px; border-radius: 3px; }
.legend .is-done { background: var(--blue); } .legend .is-doing { background: var(--ice); }
.legend .is-plan { border: 1px dashed rgb(9 111 200 / 45%); } .legend .is-lock { background: repeating-linear-gradient(135deg, #E9EBEF 0 3px, #F5F6F8 3px 6px); }

/* ---------- 獲得スキル ---------- */
.phase { margin-bottom: 40px; }
.phase-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.phase-step { font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; color: var(--blue); }
.phase-name { font-size: var(--fs-l); font-weight: 700; line-height: 1.3; }
.phase-en { font-family: var(--f-en); font-size: var(--fs-s); color: var(--ink-3); }
.phase-count { margin-left: auto; font-family: var(--f-en); font-weight: 500; color: var(--ink-2); }
.tag { font-size: var(--fs-xs); font-weight: 500; padding: 1px 8px; border-radius: 6px; background: #E8EBEF; color: var(--ink-2); }
.tag.is-warn { background: var(--amber-bg); color: var(--amber); }
.phase { container-type: inline-size; }
.skill-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@container (min-width: 520px) {
  .skill-grid { grid-template-columns: repeat(2, 1fr); }
  .skill.l2-full { grid-column: 1 / -1; }
}
@container (min-width: 760px) {
  .skill-grid { grid-template-columns: repeat(6, 1fr); }
  .skill, .skill.l2-full { grid-column: span 2; }
  .skill.l3-3 { grid-column: span 3; }
  .skill.l3-6 { grid-column: 1 / -1; }
}
/* 横いっぱいのカード：左に名前と条件、右に教材とボタン（余りは最後の行へ回して間延びさせない） */
@container (min-width: 760px) {
  .skill.l3-6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; }
  .skill.l3-6 > :is(.skill-top, h4, p) { grid-column: 1; }
  .skill.l3-6 > .mat { grid-column: 2; grid-row: 1 / span 3; border-top: 0; padding-top: 0; align-self: start; }
  .skill.l3-6 > .skill-actions { grid-column: 2; }
}
@container (min-width: 520px) and (max-width: 759px) {
  .skill.l2-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 28px; }
  .skill.l2-full > :is(.skill-top, h4, p) { grid-column: 1; }
  .skill.l2-full > .mat { grid-column: 2; grid-row: 1 / span 3; border-top: 0; padding-top: 0; align-self: start; }
  .skill.l2-full > .skill-actions { grid-column: 2; }
}

.skill { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: rgb(255 255 255 / 82%); border: 1px solid #fff; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.skill:hover { transform: translateY(-2px); }
.skill h4 { font-size: var(--fs-m); font-weight: 700; line-height: 1.45; }
.skill p { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; flex: 1; }
.skill.is-done { background: linear-gradient(160deg, #fff 30%, #E3EFFA); }
.phase.is-locked .skill { background: rgb(246 247 249 / 85%); border: 1px dashed rgb(31 43 56 / 18%); box-shadow: none; }
.phase-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; margin: -4px 0 16px; justify-content: start; }
.phase-meta div { display: flex; flex-direction: column; min-width: 0; }
.phase-meta dt { font-size: var(--fs-xs); color: var(--ink-3); }
.phase-meta dd { margin: 0; font-size: var(--fs-s); color: var(--ink-2); max-width: 34em; }
.phase-meta div:first-child dd { color: var(--ink); font-weight: 500; }
/* 教材：開閉（details） */
.mat { border-top: 1px solid var(--line); padding-top: 4px; }
.mat summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--fs-s); font-weight: 500; color: var(--blue-d); }
.mat summary::-webkit-details-marker { display: none; }
.mat summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .2s ease-out; }
.mat[open] summary::after { rotate: 225deg; translate: 0 2px; }
.mat-count { font-family: var(--f-en); font-size: var(--fs-xs); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ice); color: var(--blue-d); }
.mat-how { font-size: var(--fs-s); color: var(--ink); margin-bottom: 10px; }
.mat-refs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mat-refs li { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-s); line-height: 1.5; }
.mat-refs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mat-refs a:hover { color: var(--blue); }
.mat-refs .ext { font-size: var(--fs-xs); margin-left: 3px; text-decoration: none; display: inline-block; }
.mat-refs em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); margin-left: 6px; white-space: nowrap; }
.kind { flex: none; font-size: var(--fs-xs); font-weight: 500; padding: 1px 7px; border-radius: 6px; background: #EEF0F3; color: var(--ink-2); }
.kind-動画 { background: #E6EEFB; color: var(--blue-d); }
.kind-ポータル { background: var(--navy); color: #fff; }
.mat-out { font-size: var(--fs-xs); color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mat-out span { color: var(--ink-3); }
.now-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.skill-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 36px; }
.skill-actions:empty { display: none; }
.lock-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--amber); }
.lock-note svg { width: 14px; height: 14px; }
.muted { font-size: var(--fs-xs); color: var(--ink-3); }
.done-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 500; }
.done-mark svg { width: 14px; height: 14px; }

.btn { border: 0; border-radius: 999px; min-height: 44px; padding: 8px 20px; background: var(--navy); color: #fff; font-size: var(--fs-s); font-weight: 500; transition: transform .15s, background .2s; }
.btn:hover { background: #2C3B4C; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(31 43 56 / 16%); }
.btn.ghost:hover { background: #F4F6F8; }

/* ---------- メディアエイドを知る ---------- */
.pmv { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "m m" "p v"; gap: 16px; margin-bottom: 16px; }
.pmv-item:nth-child(1) { grid-area: p; }
.pmv-item:nth-child(2) { grid-area: m; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding: 36px 32px; }
.pmv-item:nth-child(2) .eyebrow { flex-basis: 100%; }
.pmv-item:nth-child(3) { grid-area: v; }
.pmv-item { padding: 28px; border-radius: var(--r); background: linear-gradient(160deg, rgb(255 255 255 / 90%), rgb(255 255 255 / 80%)); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.pmv-item p { font-size: var(--fs-l); font-weight: 700; line-height: 1.45; }
.pmv-item small { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.7; }
.pmv-item.is-main { color: #fff; background: radial-gradient(ellipse at 20% 0%, #1B83D8, transparent 60%), linear-gradient(135deg, #0B6AC0, #0A4F94); border-color: transparent; }
.pmv-item.is-main small { color: rgb(255 255 255 / 82%); }
.aspiration { margin: 0 0 24px; padding: 22px 28px; border-radius: var(--r); background: var(--navy); color: #fff; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.aspiration .eyebrow { color: rgb(255 255 255 / 60%); }
.aspiration p { font-size: var(--fs-l); font-weight: 700; }
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.biz { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.biz-en { font-family: var(--f-en); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.biz h4 { font-size: var(--fs-m); font-weight: 700; }
.biz p { font-size: var(--fs-s); color: var(--ink-2); }
.biz .biz-who { font-size: var(--fs-xs); font-weight: 500; color: var(--blue-d); }
.biz ul { margin: 4px 0 0; padding-left: 1.1em; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.9; }
.biz.is-mine { border: 2px solid var(--blue); box-shadow: 0 18px 36px -20px rgb(9 111 200 / 50%); }
.biz.is-mine p:not(.biz-who) { color: var(--ink); font-weight: 500; }
.lead { font-size: var(--fs-m); color: var(--ink-2); margin-bottom: 18px; max-width: 46em; }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.course { padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #fff, #F1F6FB); border: 1px solid #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.course-no { font-family: var(--f-en); font-size: var(--fs-l); font-weight: 500; color: var(--blue); line-height: 1; }
.course b { font-size: var(--fs-s); font-weight: 700; }
.course small { font-size: var(--fs-xs); color: var(--ink-2); }
.leaders { list-style: none; margin: 0; padding: 0; }
.leaders li { display: grid; grid-template-columns: 7em 1fr; gap: 0 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.leaders b { font-weight: 700; }
.leaders span { color: var(--ink-2); }
.leaders small { grid-column: 2; font-size: var(--fs-xs); color: var(--ink-3); }
.profile { margin: 0; }
.profile div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.profile dt { color: var(--ink-3); }
.profile dd { margin: 0; }
.source { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }

.flash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.flash { border: 0; padding: 0; background: none; height: 132px; perspective: 800px; }
.flash-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flash.is-flipped .flash-in { transform: rotateY(180deg); }
.flash-f, .flash-b { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; border-radius: 16px; backface-visibility: hidden; text-align: center; }
.flash-f { background: #fff; border: 1px solid var(--line); font-family: var(--f-en); font-size: var(--fs-m); font-weight: 500; box-shadow: var(--shadow); }
.flash-b { background: linear-gradient(135deg, var(--blue), var(--blue-d)); color: #fff; transform: rotateY(180deg); font-size: var(--fs-s); font-weight: 500; line-height: 1.6; word-break: auto-phrase; }

.quiz-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quiz-start p { font-size: var(--fs-s); color: var(--ink-2); }
.quiz-start b { margin-left: 12px; color: var(--ink); }
.quiz-progress { display: flex; align-items: center; gap: 14px; font-family: var(--f-en); font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 16px; }
.quiz-progress .bar { flex: 1; height: 6px; }
.quiz-text { font-size: var(--fs-l); font-weight: 700; margin-bottom: 18px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.opt { text-align: left; min-height: 48px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: var(--fs-s); font-weight: 500; transition: border-color .2s, background .2s; }
.opt:hover:not(:disabled) { border-color: var(--blue); }
.opt:disabled { cursor: default; }
.opt.is-right { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt.is-wrong { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.opt.is-dim { opacity: .5; }
.quiz-result { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.display-num { font-family: var(--f-en); font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.display-num small { font-size: var(--fs-l); color: var(--ink-3); margin-left: 6px; }
.quiz-result.is-pass .display-num { color: var(--blue); }
.quiz-result p { flex: 1; min-width: 200px; font-size: var(--fs-s); font-weight: 500; }

/* ---------- 1on1 ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label, .form legend { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { margin-bottom: 8px; }
.form textarea, .form input[type="number"] { width: 100%; min-width: 0; font: inherit; font-size: var(--fs-m); color: var(--ink); padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(31 43 56 / 14%); background: #fff; resize: vertical; }
.form textarea:focus, .form input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; flex-direction: row !important; }
.chip-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid rgb(31 43 56 / 14%); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; transition: all .2s; }
.chip-check input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-check input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.kpi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; }
.kpi-out { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: var(--ice); }
.kpi-out span, .kpi-out small { font-size: var(--fs-xs); color: var(--blue-d); }
.kpi-out b { font-family: var(--f-en); font-size: var(--fs-l); font-weight: 500; color: var(--ink); line-height: 1.2; }
.form .btn { align-self: flex-start; padding: 10px 28px; }
.logs { display: flex; flex-direction: column; gap: 14px; }
.log { padding: 20px; border-radius: 18px; background: rgb(255 255 255 / 80%); border: 1px solid #fff; box-shadow: var(--shadow); }
.log-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.log-head b { font-family: var(--f-en); font-weight: 700; }
.log-values { display: flex; gap: 6px; }
.chip { font-family: var(--f-en); font-size: var(--fs-xs); padding: 1px 8px; border-radius: 6px; background: var(--ice); color: var(--blue-d); }
.log-kpi { font-size: var(--fs-xs); color: var(--ink-2); }
.log-body { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.log-body div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; font-size: var(--fs-s); }
.log-body dt { color: var(--ink-3); font-size: var(--fs-xs); padding-top: 2px; }
.log-body dd { margin: 0; }
.log-body .is-mentor { padding: 10px 12px; border-radius: 12px; background: #F2F5F9; }

/* ---------- ログアウト・表示する新卒 ---------- */
.logout { border: 0; min-height: 44px; padding: 0 12px; border-radius: 999px; background: #E6E9EE; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); flex: none; }
.logout:hover { background: #DCE0E6; }
.viewing select { font: inherit; font-weight: 700; color: var(--ink); max-width: 100%; min-height: 44px; margin: -8px 0 -6px; padding: 0 28px 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 10px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23445263' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; cursor: pointer; }
.viewing select:hover { border-color: var(--line); background-color: #F4F6F8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ログイン・はじめての登録 ---------- */
body.is-auth .sidebar { display: none; }
body.is-auth .main { margin-left: 0; max-width: none; min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; }
body.is-auth .scene { inset: 0; }
.auth { position: relative; width: min(420px, 100%); padding: 40px 36px 32px; border-radius: 28px; background: linear-gradient(160deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 86%)); border: 1px solid var(--glass-line); box-shadow: var(--shadow), 0 40px 80px -40px rgb(9 111 200 / 35%); text-align: center; }
.auth-logo { width: 132px; height: auto; display: block; margin: 0 auto; }
.auth-sub { margin-top: 6px; font-family: var(--f-en); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.auth-mascot { width: 64px; height: auto; display: block; margin: 20px auto 4px; animation: hop 2.4s ease-in-out infinite; }
.auth-title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 16px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #E6E9EE; margin-bottom: 20px; }
.auth-switch button { border: 0; background: none; min-height: 44px; border-radius: 999px; font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); }
.auth-switch button.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(27 38 50 / 12%); }
.auth-form { text-align: left; }
.auth-form input { width: 100%; min-height: 48px; font: inherit; font-size: var(--fs-m); color: var(--ink); padding: 10px 14px; border-radius: 12px; border: 1px solid rgb(31 43 56 / 16%); background: #fff; }
.auth-form input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.auth-form .btn { align-self: stretch; min-height: 48px; font-size: var(--fs-m); }
.auth-form .btn:disabled { opacity: .6; cursor: progress; }
.auth-error { min-height: 1.5em; font-size: var(--fs-s); color: var(--amber); font-weight: 500; }
.auth-error:empty { min-height: 0; }
.auth-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- メンバー・招待 ---------- */
.members { display: flex; flex-direction: column; gap: 10px; }
.member { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; align-items: center; gap: 12px 20px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.member.has-review { border-color: rgb(138 85 8 / 35%); }
.member-main { display: flex; flex-direction: column; min-width: 0; }
.member-main b { font-weight: 700; }
.member-main small { font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.member-bar { display: flex; align-items: center; gap: 10px; font-family: var(--f-en); font-size: var(--fs-xs); color: var(--ink-2); }
.member-bar .bar { flex: 1; }
.member-review { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.member.has-review .member-review { color: var(--amber); }
.empty { font-size: var(--fs-s); color: var(--ink-2); padding: 8px 0; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 12px; }
.invite-form input, .invite-form select { width: 100%; min-height: 44px; font: inherit; font-size: var(--fs-m); color: var(--ink); padding: 8px 12px; border-radius: 12px; border: 1px solid rgb(31 43 56 / 14%); background: #fff; }
.invite-form .btn { align-self: end; }
.invite-help { margin: 12px 0 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.invites { list-style: none; margin: 0; padding: 0; }
.invites li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 52px; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.inv-mail { flex: 1; min-width: 12em; overflow-wrap: anywhere; }
.inv-state { font-size: var(--fs-xs); color: var(--ink-3); }
.inv-state.is-on { color: var(--blue-d); font-weight: 500; }
@media (max-width: 760px) {
  .member { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr; }
}

.preview-bar { position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--amber-bg); border: 1px solid rgb(138 85 8 / 25%); font-size: var(--fs-s); font-weight: 500; color: var(--amber); animation: none !important; }

/* ---------- 通知 ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 20px; opacity: 0; z-index: 10; padding: 10px 20px; border-radius: 999px; background: var(--navy); color: #fff; font-size: var(--fs-s); font-weight: 500; box-shadow: 0 16px 30px -12px rgb(0 0 0 / 40%); transition: opacity .25s, translate .25s; pointer-events: none; }
.toast.is-show { opacity: 1; translate: -50% 0; }

/* ---------- STEPクリアの演出 ---------- */
.levelup { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgb(27 38 50 / 45%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .3s both; }
.levelup.is-out { animation: fadeOut .3s both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.levelup-card { position: relative; overflow: hidden; width: min(440px, 100%); padding: 40px 32px 32px; border-radius: 28px; color: #fff; text-align: center; background: radial-gradient(ellipse 80% 70% at 50% 0%, #2A8FE0, transparent 70%), linear-gradient(160deg, #0B6AC0, #0A4F94); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 50%); animation: popIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popIn { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.levelup-orbs i { position: absolute; background: url(../img/glass/orb-far.webp) center / contain no-repeat; animation: burst 1s cubic-bezier(.2,.8,.2,1) both; }
.levelup-mascot { position: relative; display: block; width: 84px; height: auto; margin: -8px auto 8px; animation: jump 1.1s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes jump { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 50% { transform: translateY(-18px) scale(1.05); opacity: 1; } 75% { transform: translateY(0) scale(.98, 1.02); } }
.levelup-orbs i:nth-child(1) { width: 70px; height: 70px; left: -16px; top: 20px; }
.levelup-orbs i:nth-child(2) { width: 40px; height: 40px; right: 24px; top: 18px; animation-delay: .08s; }
.levelup-orbs i:nth-child(3) { width: 90px; height: 90px; right: -30px; bottom: -24px; animation-delay: .12s; }
.levelup-orbs i:nth-child(4) { width: 24px; height: 24px; left: 60px; bottom: 30px; animation-delay: .18s; }
.levelup-orbs i:nth-child(5) { width: 16px; height: 16px; right: 90px; top: 70px; animation-delay: .24s; }
@keyframes burst { from { transform: scale(0); opacity: 0; } }
.levelup-step { position: relative; margin-top: 10px; font-family: var(--f-en); font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; display: flex; justify-content: center; align-items: center; gap: 14px; }
.levelup-step span { font-size: var(--fs-l); opacity: .7; }
.levelup-title { position: relative; margin-top: 16px; font-size: var(--fs-l); font-weight: 700; line-height: 1.5; word-break: auto-phrase; text-wrap: balance; }
.nobr { white-space: nowrap; }
.levelup-next { position: relative; margin-top: 6px; font-size: var(--fs-s); color: rgb(255 255 255 / 85%); }
.levelup-btn { position: relative; margin-top: 24px; background: #fff; color: var(--navy); padding: 10px 32px; }
.levelup-btn:hover { background: #EAF3FB; }

/* 画面の切り替えをなめらかに */
.main.is-enter > * { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.main.is-enter > *:nth-child(2) { animation-delay: .05s; } .main.is-enter > *:nth-child(3) { animation-delay: .1s; } .main.is-enter > *:nth-child(4) { animation-delay: .15s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 1180px) {
  .pmv { grid-template-columns: 1fr; grid-template-areas: "m" "p" "v"; }
  .pmv-item:nth-child(2) { flex-direction: column; flex-wrap: nowrap; padding: 28px; }
  .pmv-item:nth-child(2) .eyebrow { flex-basis: auto; }
  .course-grid, .flash-grid { grid-template-columns: repeat(2, 1fr); }
  .biz-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-2.is-wide-left, .grid-2.is-growth { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 900px) {
  :root { --side: 0px; }
  .scene { inset: 0; }
  .sidebar { position: relative; width: auto; height: auto; padding: 16px; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ladder { flex-direction: row-reverse; justify-content: flex-end; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .me-step { flex-direction: row; gap: 6px; align-items: baseline; }
  .ladder::before { display: none; }
  .ladder-step { display: flex; flex-direction: column; gap: 4px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; padding: 0; background: none !important; flex: none; }
  .ladder-text, .ladder-bar { display: none; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgb(250 251 252 / 96%); border-bottom: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgb(27 38 50 / 25%); }
  .nav-item { flex-direction: column; justify-content: center; align-items: center; gap: 0; min-height: 52px; padding: 4px 2px; }
  .nav-en, .nav-ja { display: none; }
  .nav-short { display: block; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .main { padding: 24px 16px calc(104px + env(safe-area-inset-bottom)); }
  .g-orb-l { right: -150px; width: 280px; }
  body:not([data-tab="roadmap"]) .g-orb-l { translate: 40px 40vh; scale: .8; }
  .g-near { width: 280px; bottom: -8%; }
  .g-ring { width: 100px; top: 14%; left: auto; right: 12%; }
  .g-orb-far, .g-shadow { display: none; }
  .watermark { width: 120%; left: -4%; top: 12px; opacity: .06; }
  .g-arrow, .g-orb-s { display: none; }
  .page-illust { width: 150px; margin: 0; }
  .card, .pmv-item { background: rgb(255 255 255 / 92%); }
  .stairs { gap: 4px; height: 280px; }
  .stair-name { display: none; }
  .stair-step { font-size: var(--fs-xs); letter-spacing: 0; }
  .stair-step .s-word { display: none; }
  .stair-pct { font-size: var(--fs-xs); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
  .hero-stats dd { font-size: 28px; }
  .hero-stairs { width: 150px; right: -24px; bottom: auto; top: -20px; animation: none; }
  .hero-orb { display: none; }
  .hero-title, .hero-stats { max-width: none; }
  .hero-title { padding-right: 70px; }
  .quiz-opts { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .kpi-out { grid-column: span 2; }
  .log-body div, .leaders li, .profile div { grid-template-columns: 1fr; gap: 2px; }
  .phase-meta { grid-template-columns: 1fr; gap: 8px; }
  .leaders small { grid-column: 1; }
  .value-head { grid-template-columns: 1fr auto; }
  .value-no { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .page-illust { display: none; }
  .course-grid, .flash-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-depth] { transform: none !important; }
}