/* ==========================================================
   採用サイト（special-recruit.mediaaid.co.jp）の見た目に合わせる
   ・白地／墨色 #282828／アクセントの青紫 #4F39FF／青灰 #9AABC7
   ・角丸と影をやめ、細い線で区切る平らな面
   ・英字 Inter／日本語 Noto Sans JP
   ・モチーフ：「Hello, New Media.」の帯が斜めに交差する
   ========================================================== */
:root {
  --ground: #FFFFFF;
  --ink: #282828;
  --ink-2: #505B69;
  --ink-3: #66727F;
  --line: #DDE3EC;
  --blue: #4F39FF;
  --blue-2: #6E5CFF;
  --blue-d: #3B26DB;
  --ice: #E9E6FF;
  --navy: #282828;
  --slate: #9AABC7;
  --slate-pale: #EEF1F6;
  --shadow: none;
  --r: 0px;
  --f-en: "Inter", "Noto Sans JP", sans-serif;
  --f-ja: "Noto Sans JP", "Hiragino Sans", sans-serif;
}
body { background: #fff; letter-spacing: .01em; }
:focus-visible { outline-color: var(--blue); border-radius: 0; }

/* 背面：白地にロゴの透かしだけ */
.scene { perspective: none; }
.watermark { opacity: .045; }

/* ---------- 面：角丸と影をやめ、細い線で ---------- */
.card, .pmv-item, .skill, .me, .log, .value, .member, .biz, .course, .now-box, .opt, .flash-f, .flash-b, .auth,
.levelup-card, .hero, .aspiration, .preview-bar, .tag, .badge, .kind, .chip, .mat-count, .inv-state, .here,
.btn, .logout, .mode, .mode button, .nav-item, .auth-switch, .auth-switch button, .auth-form input, .invite-form input,
.invite-form select, .form textarea, .form input[type="number"], .kpi-out, .chip-check span, .tl-bar, .stair-block,
.log-body .is-mentor, .growth-line, .bar, .bar i, .ladder-step, .ladder-bar, .ladder-bar i, .viewing select {
  border-radius: 0 !important;
}
.card, .pmv-item, .me, .log, .member, .course, .now-box, .biz, .skill {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}
.card { padding: clamp(22px, 2.6vw, 36px); }
.skill:hover { transform: none; border-color: var(--ink); }
.skill.is-done { background: #fff; border-color: var(--line); }
.phase.is-locked .skill { background: var(--slate-pale); border-style: dashed; }

/* ---------- 見出し：英字は太く詰めて、上に青紫の日本語ラベル ---------- */
.display { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.page-head-text { display: flex; flex-direction: column-reverse; gap: 10px; }
.page-ja { margin-top: 0; font-size: var(--fs-s); font-weight: 700; color: var(--blue); letter-spacing: .08em; }
.page-ja span { font-weight: 400; color: var(--ink-3); letter-spacing: .02em; }
.h-section { font-family: "Inter", sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
.h-ja { color: var(--blue); font-weight: 700; letter-spacing: .08em; }
.eyebrow { color: var(--blue); font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: .12em; }
.eyebrow.on-dark { color: var(--slate); }
mark { background: var(--blue); color: #fff; padding: 0 .18em; margin: 0 .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- ボタン：四角・青紫 ---------- */
.btn { background: var(--blue); color: #fff; font-weight: 700; letter-spacing: .04em; }
.btn:hover { background: var(--blue-d); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.logout { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.logout:hover { box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }

/* ---------- 左バー ---------- */
.sidebar { background: #fff; border-right: 1px solid var(--line); }
.brand-sub { color: var(--ink-3); }
.mode { background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 0; }
.mode button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.nav { border-color: var(--line); }
.nav-item { position: relative; }
.nav-en { font-family: "Inter", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.nav-item:hover { background: var(--slate-pale); }
.nav-item.is-active { background: var(--ink); color: #fff; }
.nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
.ring circle { stroke: var(--slate-pale); }
.ring .ring-fg { stroke: var(--blue); stroke-linecap: butt; }
.ring > span { font-family: "Inter", sans-serif; }
.me-step em { color: var(--blue); }
.ladder::before { background: var(--line); }
.ladder-step:hover { background: var(--slate-pale); }
.ladder-step.is-now { background: var(--slate-pale); }
.ladder-dot { border-radius: 0; border-color: var(--line); }
.ladder-step.is-done .ladder-dot { background: var(--blue); border-color: var(--blue); }
.ladder-step.is-now .ladder-dot { border-color: var(--blue); color: var(--blue); box-shadow: none; outline: 3px solid var(--ice); }
.ladder-step.is-lock .ladder-dot { background: var(--slate-pale); }
.ladder-bar { background: var(--line); }
.ladder-bar i { background: var(--blue); }

/* ---------- 「Hello, New Media.」の帯 ---------- */
.ribbons { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ribbon {
  position: absolute; left: -30%; width: 160%;
  white-space: nowrap; overflow: hidden;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: var(--fs, 20px); letter-spacing: -.01em; line-height: 1;
  padding: .45em 0;
  top: var(--t, 0%);
  rotate: var(--a, -24deg);
  translate: calc(var(--mx, 0) * var(--px, 8) * -2px) calc(var(--my, 0) * var(--px, 8) * -2px);
  transition: translate .6s cubic-bezier(.2,.7,.2,1);
  animation: ribbonIn 1.1s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--d, 0ms);
}
.ribbon.is-big { padding: .32em 0; letter-spacing: -.02em; }
.ribbon > span { display: inline-block; animation: ribbon var(--sp, 60s) linear infinite; animation-direction: var(--dir, normal); will-change: transform; }
.ribbon.is-ink { background: var(--ink); color: #DDE3EC; }
.ribbon.is-slate { background: var(--slate); color: var(--ink); }
@keyframes ribbon { to { transform: translateX(-50%); } }
/* 開いたとき：帯が1本ずつ引かれるように現れる */
@keyframes ribbonIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ribbons { --mx: 0; --my: 0; }
.ribbons.is-many .ribbon { box-shadow: 0 0 0 1px #fff; }

/* ---------- ゴール（墨色の面） ---------- */
.hero { background: var(--ink); box-shadow: none; padding: clamp(32px, 4vw, 56px); }
.hero .ribbons { left: 58%; }
.hero .ribbon.is-ink { background: #3C4249; color: var(--slate); }
.hero-title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.6; max-width: 58%; }
.hero-title mark { padding: .02em .22em; }
.hero-stats { max-width: 58%; }
.hero-stats dd { font-family: "Inter", sans-serif; font-weight: 700; }
.hero-stats dt, .hero-stats small { color: var(--slate); }

/* ---------- 階段 ---------- */
.stair-block { background: var(--slate-pale); border: 1px solid var(--line); box-shadow: none; }
.stair-block i { background: var(--blue); box-shadow: none; }
.stair.is-done .stair-block { box-shadow: none; border-color: var(--blue); }
.stair.is-now .stair-block { outline: 2px solid var(--ink); outline-offset: 3px; }
.stair.is-lock .stair-block { background: repeating-linear-gradient(135deg, #F3F5F8 0 8px, #E8ECF2 8px 16px); }
.stair-step { font-family: "Inter", sans-serif; font-weight: 700; color: var(--ink-3); }
.stair.is-done .stair-step, .stair.is-now .stair-step { color: var(--blue); }
.here { background: var(--ink); bottom: calc(100% + 14px); padding: 5px 10px; font-family: var(--f-ja); }
.here::after { background: var(--ink); border-radius: 0; }
.goal-mark { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; padding: 3px 8px; background: var(--blue); color: #fff; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }

/* ---------- グラフ・バー ---------- */
.bar { background: var(--slate-pale); }
.bar i { background: var(--blue); }
.g-line { stroke: var(--blue); stroke-linecap: butt; stroke-linejoin: miter; }
.g-goal { stroke: var(--ink); opacity: .35; }
.g-goal-label { color: var(--ink-2); font-weight: 700; }
.g-dot { border-color: var(--blue); box-shadow: 0 0 0 6px var(--ice); }
.g-legend i { border-top-color: var(--blue); }
.growth-line b, .track-top span { font-family: "Inter", sans-serif; font-weight: 700; }
.growth-line b.is-up { color: var(--blue); }
#g-area stop { stop-color: var(--blue); }

/* ---------- しるし ---------- */
.badge.is-done { background: var(--blue); color: #fff; }
.badge.is-doing { background: var(--ink); color: #fff; }
.badge.is-todo { background: var(--slate-pale); color: var(--ink-2); }
.tag { background: var(--slate-pale); }
.kind { background: var(--slate-pale); }
.kind-動画 { background: var(--ice); color: var(--blue-d); }
.kind-ポータル { background: var(--ink); color: #fff; }
.mat summary { color: var(--blue); font-weight: 700; }
.mat-count { background: var(--blue); color: #fff; }
.mat-refs a { color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.mat-refs a:hover { color: var(--blue); }
.chip { background: var(--ice); color: var(--blue-d); }

/* ---------- タイムライン ---------- */
.tl-bar.is-done { background: var(--blue); }
.tl-bar.is-doing { background: var(--ice); color: var(--blue-d); }
.tl-bar.is-doing i { background: rgb(79 57 255 / 35%); }
.tl-bar.is-plan { border-color: var(--slate); }
.tl-now { background: var(--ink); }
.tl-now em { border-radius: 0; background: var(--ink); }
.legend .is-done { background: var(--blue); } .legend .is-doing { background: var(--ice); }

/* ---------- Values・会社 ---------- */
.value { background: #fff; border-color: var(--line); }
.value-no { font-family: "Inter", sans-serif; }
.value.is-spot { background: var(--ink); box-shadow: none; }
.value-no em { background: var(--blue); border-radius: 0; }
.pmv-item.is-main { background: var(--ink); }
.pmv-item.is-main p { font-size: 32px; }
.aspiration { background: var(--ink); }
.biz.is-mine { border: 2px solid var(--blue); box-shadow: none; }
.biz .biz-who { color: var(--blue); }
.course { background: #fff; }
.course-no { font-family: "Inter", sans-serif; font-weight: 700; color: var(--blue); }
.flash-f { box-shadow: none; border: 1px solid var(--line); font-family: "Inter", sans-serif; font-weight: 700; }
.flash-b { background: var(--ink); }
.opt.is-right { background: var(--blue); border-color: var(--blue); }
.display-num { font-family: "Inter", sans-serif; font-weight: 700; }
.quiz-result.is-pass .display-num { color: var(--blue); }

/* ---------- 1on1・フォーム ---------- */
.form textarea, .form input[type="number"], .invite-form input, .invite-form select { border-color: var(--line); }
.form textarea:focus, .form input:focus, .invite-form input:focus { outline-color: var(--blue); }
.chip-check span { background: #fff; border-color: var(--line); }
.chip-check input:checked + span { background: var(--blue); border-color: var(--blue); }
.kpi-out { background: var(--slate-pale); }
.kpi-out span, .kpi-out small { color: var(--ink-2); }
.log-body .is-mentor { background: var(--slate-pale); }
.member.has-review { border-color: var(--blue); }

/* ---------- 見出しのイラスト：青紫に寄せる ---------- */
.page-illust { filter: hue-rotate(36deg) saturate(1.05); }

/* ---------- 見本の帯・通知 ---------- */
.preview-bar { background: var(--ink); color: #fff; border: 0; }
.preview-bar .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.toast { border-radius: 0; background: var(--ink); }

/* ---------- STEPクリア ---------- */
.levelup { background: rgb(40 40 40 / 55%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.levelup-card { background: var(--ink); overflow: hidden; padding: 56px 32px 36px; }
.levelup-card .ribbons { opacity: .5; }
.levelup-card .ribbon.is-ink { background: #3C4249; color: var(--slate); }
.levelup-step { font-family: "Inter", sans-serif; font-weight: 700; }
.levelup-btn { background: var(--blue); color: #fff; }
.levelup-btn:hover { background: var(--blue-d); }

/* ---------- ログイン・はじめての登録 ---------- */
body.is-auth .main { padding: 0; place-items: stretch; }
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); min-height: 100vh; width: 100%; }
.auth-side { position: relative; overflow: hidden; background: #fff; border-right: 1px solid var(--line); }
.auth-catch { position: absolute; left: 48px; bottom: 56px; z-index: 2; padding: 20px 24px; background: var(--ink); color: #fff; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.45; }
.auth { align-self: center; justify-self: center; width: min(420px, calc(100% - 32px)); border: 0; background: #fff; box-shadow: none; text-align: left; padding: 48px 0; }
.auth-logo { margin: 0; }
.auth-sub { text-align: left; }
.auth-title { margin-top: 32px; font-size: 28px; }
.auth-switch { background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 0; }
.auth-switch button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.auth-form input { border-color: var(--line); }
.auth-form .btn { min-height: 52px; }

/* ---------- スマホ ---------- */
@media (max-width: 900px) {
  .nav { background: #fff; box-shadow: none; }
  .nav-item.is-active::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
  .hero { padding-top: 132px; }
  .hero .ribbons { left: 0; bottom: auto; height: 104px; }
  .hero .ribbon { top: calc(var(--i) * 16px - 30px); rotate: -10deg; font-size: 13px; padding: 4px 0; }
  .hero-title, .hero-stats { max-width: none; padding-right: 0; }
  .pmv-item.is-main p { font-size: 26px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-catch { left: 16px; bottom: 16px; font-size: 22px; padding: 14px 16px; }
  .auth { padding: 32px 0 48px; }
}
@media (prefers-reduced-motion: reduce) { .ribbon > span, .ribbon { animation: none; } .ribbon { translate: none; } }

body.is-auth .watermark { display: none; }

/* 名前カード：表示する人の切り替えは下に横幅いっぱいで */
.me { flex-wrap: wrap; }
.me-text b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.me-self { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; background: var(--ink); color: #fff; }
.me-switch { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.me-switch span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.me-switch select { width: 100%; min-height: 44px; padding: 0 36px 0 12px; font: inherit; font-size: var(--fs-s); font-weight: 700; color: var(--ink); background: #fff 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='%23282828' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--line); border-radius: 0; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.me-switch select:hover { border-color: var(--ink); }
.me-switch select:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }

.course-opt { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; background: var(--ink); color: #fff; white-space: nowrap; }

/* STEPの開け閉め */
.phase { margin-bottom: 0; border-top: 1px solid var(--line); }
.phase:last-of-type { border-bottom: 1px solid var(--line); }
.phase-head { position: relative; margin: 0; padding: 22px 48px 22px 0; border-bottom: 0; }
.phase-toggle { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; cursor: pointer; }
.phase-toggle:hover ~ .phase-chev, .phase-head:hover .phase-chev { border-color: var(--blue); }
.phase-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.phase-chev { position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); translate: 0 -70%; rotate: 45deg; transition: rotate .2s ease-out, translate .2s ease-out; }
.phase.is-open .phase-chev { rotate: 225deg; translate: 0 -20%; }
.phase-count { display: inline-flex; align-items: baseline; gap: 10px; }
.phase-count em { font-style: normal; font-family: var(--f-ja); font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--blue); padding: 2px 8px; }
.phase-body { padding-bottom: 32px; }
.phase-body[hidden] { display: none; }
.page-head + .phase { margin-top: 8px; }

/* ---------- ログイン画面の左側：3つの絵（開くたびにどれか） ---------- */
.auth-art { position: absolute; inset: 0; overflow: hidden; }
/* A 折り返し：帯が1本ずつ描かれ、文字が折り返しに沿って流れる */
.is-fold svg { width: 100%; height: 100%; display: block; }
.fold-band { fill: none; stroke-width: 38; stroke-linejoin: miter; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: foldDraw 1.2s cubic-bezier(.6,0,.2,1) forwards; animation-delay: var(--d); }
.fold-text { font: 700 26px "Inter", sans-serif; letter-spacing: -.01em; opacity: 0; animation: foldFade .8s ease-out forwards; animation-delay: var(--d); }
@keyframes foldFade { to { opacity: 1; } }
@keyframes foldDraw { to { stroke-dashoffset: 0; } }
/* B 積み重ね：札が1段ずつ滑り込み、ゆっくり左右に揺れる */
.is-stack .stack { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: flex; flex-direction: column; gap: 6px; }
/* 写真の形（段々にずれた塊）のまま、塊ごとゆっくり左右に動く。全部の段が同じ向きなのでちらつかない */
.is-stack .stack > .stack-sway { display: flex; flex-direction: column; gap: 6px; animation: stackSway 7s ease-in-out 1.2s infinite alternate; will-change: transform; }
.stack-row { display: flex; gap: 6px; white-space: nowrap; margin-left: var(--x); animation: stackIn .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
@keyframes stackSway { from { transform: translateX(-64px); } to { transform: translateX(64px); } }
.stack-row span { padding: 4px 12px; font: 700 clamp(22px, 2.8vw, 40px)/1.05 "Inter", sans-serif; letter-spacing: -.02em; }
.stack-row .n { font-size: clamp(14px, 1.8vw, 26px); letter-spacing: -.05em; display: flex; align-items: center; }
.stack-row .ink, .calm-band.ink { background: var(--ink); color: #DDE3EC; }
.stack-row .sl, .calm-band.sl { background: var(--slate); color: var(--ink); }
@keyframes stackIn { from { opacity: 0; transform: translateX(-60px); } }
@keyframes stackSway { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
/* C ゆったり：太い帯3本が現れ、ゆっくり流れる */
.calm-band { position: absolute; left: -20%; width: 140%; white-space: nowrap; overflow: hidden; font: 700 var(--fs)/1 "Inter", sans-serif; letter-spacing: -.02em; padding: 12px 0; animation: ribbonIn 1.3s cubic-bezier(.6,0,.2,1) both; animation-delay: var(--d); }
.calm-band > span { display: inline-block; animation: ribbon var(--sp) linear infinite; animation-direction: var(--dir); will-change: transform; }
@media (max-width: 900px) {
  .is-stack .stack { top: 30%; scale: .44; }
  .calm-band { font-size: calc(var(--fs) * .55); padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-band { animation: none; stroke-dashoffset: 0; } .fold-text { animation: none; opacity: 1; }
  .stack-row, .stack-sway, .calm-band, .calm-band > span { animation: none; }
}