/* ===== Themes ===== */
:root, [data-theme="splash"] {
  --bg: #f6fafb; --bg2: #e7f3f7; --card: #ffffff; --ink: #1d3a66; --muted: #5b6f8c;
  --primary: #24508f; --sky: #6fbad3; --accent: oklch(0.86 0.14 88); --on-primary: #fff;
  --line: rgba(29,58,102,.14); --radius: 18px;
  --font-body: "Zen Kaku Gothic New", sans-serif; --font-head: "Zen Kaku Gothic New", sans-serif;
  --font-latin: "Outfit", sans-serif; --latin-style: normal; --head-weight: 900;
  --logo-filter: none; --hero-bg: radial-gradient(ellipse 80% 60% at 60% 45%, #c4ebf2 0%, #e6f6fa 55%, #f6fafb 100%);
}
[data-theme="classic"] {
  --bg: #0f1f3a; --bg2: #142a4d; --card: #183259; --ink: #f2efe6; --muted: #aab6c9;
  --primary: #c9a96a; --sky: #8cc6d9; --accent: #c9a96a; --on-primary: #0f1f3a;
  --line: rgba(242,239,230,.16); --radius: 4px;
  --font-body: "Zen Kaku Gothic New", sans-serif; --font-head: "Shippori Mincho B1", serif;
  --font-latin: "Cormorant Garamond", serif; --latin-style: italic; --head-weight: 700;
  --logo-filter: brightness(0) invert(1); --hero-bg: #0f1f3a;
}
[data-theme="pop"] {
  --bg: #fffaf1; --bg2: #e6f5fa; --card: #ffffff; --ink: #1b2a4a; --muted: #5d6680;
  --primary: #2f6fd6; --sky: #6fc6e2; --accent: #ff7a59; --on-primary: #fff;
  --line: rgba(27,42,74,.15); --radius: 28px;
  --font-body: "Zen Maru Gothic", sans-serif; --font-head: "Dela Gothic One", sans-serif;
  --font-latin: "Dela Gothic One", sans-serif; --latin-style: normal; --head-weight: 400;
  --logo-filter: none; --hero-bg: #fffaf1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.85; letter-spacing: .02em; overflow-x: hidden; transition: background .5s, color .5s; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ===== Header ===== */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; transition: background .3s, box-shadow .3s, padding .3s; }
.hdr.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); padding: 8px 18px; }
.hdr .logo { height: 38px; width: auto; filter: var(--logo-filter); transition: height .3s; }
.hdr.scrolled .logo { height: 32px; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; }
.menu-btn span { display: block; width: 16px; height: 2px; background: var(--ink); position: relative; transition: .3s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); transition: .3s; }
.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
body.menu-open .menu-btn span { background: transparent; }
body.menu-open .menu-btn span::before { top: 0; transform: rotate(45deg); }
body.menu-open .menu-btn span::after { top: 0; transform: rotate(-45deg); }
.nav { position: fixed; inset: 0; z-index: 40; background: var(--primary); color: var(--on-primary); padding: 96px 28px 40px; display: flex; flex-direction: column; gap: 6px; clip-path: circle(0% at calc(100% - 40px) 34px); transition: clip-path .6s cubic-bezier(.7,0,.2,1); }
body.menu-open .nav { clip-path: circle(150% at calc(100% - 40px) 34px); }
.nav a { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 22px; padding: 6px 0; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--on-primary) 20%, transparent); }
.nav a small { font-family: var(--font-latin); font-style: var(--latin-style); font-size: 12px; opacity: .7; letter-spacing: .1em; width: 90px; }

/* ===== Buttons ===== */
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #06C755; color: #fff; font-weight: 700; border-radius: 999px; padding: 0 20px; height: 44px; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(6,199,85,.3); transition: transform .2s; }
.btn-line:active { transform: scale(.97); }
.btn-line .ico { width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #06C755; font-size: 9px; font-weight: 900; display: grid; place-items: center; letter-spacing: 0; font-family: var(--font-body); }
.btn-line.lg { height: 64px; font-size: 17px; padding: 0 32px; width: 100%; max-width: 420px; }
.btn-line.lg .ico { width: 30px; height: 30px; font-size: 11px; }
.hdr .btn-line { height: 40px; padding: 0 14px; font-size: 13px; }

.float-cta { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 45; display: flex; justify-content: center; transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.float-cta.show { transform: none; }
.float-cta .btn-line { width: 100%; max-width: 440px; height: 58px; font-size: 16px; }
body.no-float .float-cta { display: none; }

/* ===== Placeholder ===== */
.ph { position: relative; overflow: hidden; border-radius: var(--radius); background-color: color-mix(in srgb, var(--sky) 22%, var(--bg)); background-image: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--sky) 30%, transparent) 10px 11px); display: grid; place-items: center; }
.ph::after { content: attr(data-label); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; color: var(--muted); background: var(--bg); padding: 4px 10px; border-radius: 4px; letter-spacing: .04em; text-align: center; max-width: 80%; }

/* ===== Hero ===== */
.hero { position: relative; min-height: 100svh; padding: 92px 0 0; background: var(--hero-bg); overflow: hidden; display: flex; flex-direction: column; }
.hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--primary); border: 1px solid currentColor; border-radius: 999px; padding: 4px 14px; align-self: flex-start; margin-bottom: 18px; }
.hero-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); font-style: normal; }
.hero h1 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(34px, 10vw, 76px); line-height: 1.28; letter-spacing: .01em; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.hero.ready h1 .ln > span { transform: none; }
.hero h1 .ln:nth-child(2) > span { transition-delay: .12s; }
.hero h1 .ln:nth-child(3) > span { transition-delay: .24s; }
.hero h1 em { font-style: normal; color: var(--primary); position: relative; }
[data-theme="splash"] .hero h1 em { background: linear-gradient(transparent 68%, var(--accent) 68%); }
[data-theme="pop"] .hero h1 em { color: var(--accent); }
.hero-sub { display: block; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
.work-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.hero-lead { margin-top: 18px; color: var(--muted); font-size: 14px; opacity: 0; transform: translateY(12px); transition: 1s .5s; }
.hero.ready .hero-lead { opacity: 1; transform: none; }
.hero-visual { position: relative; margin-top: 26px; flex: 1; min-height: 300px; }
.hero-visual .ph.main { position: absolute; inset: 0 0 60px 18%; border-radius: var(--radius) 0 0 var(--radius); margin-right: -22px; }
.hero-visual .ph.sub { position: absolute; left: 0; bottom: 20px; width: 40%; aspect-ratio: 1; border: 5px solid var(--bg); }
[data-theme="pop"] .hero-visual .ph.sub { border-radius: 50%; }
.hero-badge { position: absolute; right: 8px; top: -26px; width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 12px; line-height: 1.3; z-index: 3; animation: spinIn 1.2s .8s both cubic-bezier(.2,.9,.3,1.3); }
[data-theme="classic"] .hero-badge { color: var(--bg); border-radius: 0; transform: rotate(45deg); }
[data-theme="classic"] .hero-badge span { transform: rotate(-45deg); }
.hero-badge b { display: block; font-size: 22px; font-family: var(--font-latin); }
.hero-badge b.b2 { font-family: var(--font-head); font-size: 15px; margin-top: 2px; }
.req-head { background: var(--primary); color: var(--on-primary); font-family: var(--font-head); font-weight: var(--head-weight); font-size: 17px; padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.req-head small { font-family: var(--font-body); font-size: 11px; font-weight: 700; background: var(--accent); color: var(--ink); padding: 2px 10px; border-radius: 99px; }
[data-theme="classic"] .req-head small { color: var(--bg); }
.num-sub { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.req-note { font-size: 11.5px; color: var(--muted); }
@keyframes spinIn { from { transform: scale(0) rotate(-90deg); } }
.scroll-hint { position: absolute; left: 22px; bottom: 90px; z-index: 3; writing-mode: vertical-rl; font-family: var(--font-latin); font-size: 11px; letter-spacing: .3em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.scroll-hint::after { content: ""; width: 1px; height: 60px; background: linear-gradient(var(--ink) 50%, transparent 50%); background-size: 1px 120px; animation: drip 1.8s infinite; }
@keyframes drip { from { background-position: 0 -60px; } to { background-position: 0 60px; } }

/* Waves */
.waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; z-index: 2; pointer-events: none; overflow: hidden; }
.waves svg { position: absolute; bottom: 0; width: 200%; height: 100%; animation: waveMove 12s linear infinite; }
.waves svg:nth-child(2) { animation-duration: 18s; animation-direction: reverse; opacity: .5; }
@keyframes waveMove { to { transform: translateX(-50%); } }

/* ===== Marquee ===== */
.marquee { background: var(--primary); color: var(--on-primary); overflow: hidden; padding: 14px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 40px; animation: mq 30s linear infinite; font-family: var(--font-latin); font-style: var(--latin-style); font-size: 26px; font-weight: 600; }
.marquee-track span::after { content: "✦"; margin-left: 40px; color: var(--accent); font-style: normal; font-size: 16px; vertical-align: middle; }
[data-theme="classic"] .marquee-track span::after { color: var(--bg); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ===== Sections ===== */
.sec { padding: 96px 0; position: relative; }
.sec.alt { background: var(--bg2); }
.sec-head { margin-bottom: 40px; }
.eyebrow { font-family: var(--font-latin); font-style: var(--latin-style); color: var(--sky); font-size: 54px; line-height: 1; font-weight: 600; letter-spacing: -.01em; display: block; }
[data-theme="pop"] .eyebrow { font-size: 40px; color: var(--primary); -webkit-text-stroke: 0; }
[data-theme="splash"] .eyebrow { font-weight: 700; }
.sec-head h2 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 22px; margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.sec-head h2::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.sec-head .lead { margin-top: 16px; color: var(--muted); }

/* Reveal */
.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-l { transform: translateX(-40px); } .rv-r { transform: translateX(40px); }
.rv-mask { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); }
.rv-mask.in { clip-path: inset(0 0 0 0); }
body.calm .rv, body.calm .rv-mask { opacity: 1; transform: none; clip-path: none; transition: none; }

/* Message */
.msg-grid { display: grid; gap: 32px; }
.msg-copy { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 26px; line-height: 1.6; }
.msg-copy em { font-style: normal; color: var(--primary); }
.msg-body p + p { margin-top: 1em; }
.msg-sign { margin-top: 20px; font-size: 13px; color: var(--muted); }
.msg-sign { line-height: 1.7; }
.msg-sign b { display: block; font-size: 16px; color: var(--ink); font-family: var(--font-head); font-weight: var(--head-weight); }
.msg-photo { aspect-ratio: 4/5; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.msg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.msg-photo figcaption { position: absolute; left: 0; bottom: 0; background: var(--primary); color: var(--on-primary); padding: 10px 18px; font-size: 13px; font-weight: 700; border-top-right-radius: var(--radius); }
.msg-photo figcaption span { display: block; font-family: var(--font-latin); font-style: var(--latin-style); font-size: 11px; letter-spacing: .08em; opacity: .75; font-weight: 500; }
@media (max-width: 899px) {
  .msg-grid { gap: 28px; }
  .msg-photo { width: 72%; max-width: 300px; margin: 0 auto; aspect-ratio: 3/4; }
  .msg-photo img { object-position: center 12%; }
  .msg-sign b { margin-bottom: 4px; }
}

/* Tracks */
.tracks { display: grid; gap: 14px; }
.track { display: block; position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 22px; transition: transform .25s, box-shadow .25s; }
.track:active { transform: scale(.98); }
.track:hover { box-shadow: 0 12px 30px rgba(29,58,102,.12); }
.track-en { position: absolute; right: -6px; top: -8px; font-family: var(--font-latin); font-style: var(--latin-style); font-size: 56px; font-weight: 700; color: var(--sky); opacity: .22; line-height: 1; pointer-events: none; }
.track h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 22px; color: var(--primary); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.track h3 small { font-family: var(--font-body); font-size: 11px; font-weight: 700; background: var(--accent); color: var(--ink); padding: 2px 10px; border-radius: 99px; }
[data-theme="classic"] .track h3 small { color: var(--bg); }
.track p { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.track-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--primary); border-bottom: 2px solid var(--accent); }
.req-tabs button { line-height: 1.3; }
.req-tabs button small { font-size: 10px; font-weight: 500; }

/* Numbers */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.num { background: var(--card); border-radius: var(--radius); padding: 22px 18px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.num.wide { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; }
.num .k { font-size: 12px; color: var(--muted); font-weight: 700; }
.num .v { font-family: var(--font-latin); font-size: 46px; line-height: 1.1; font-weight: 700; color: var(--primary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.num .v small { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-left: 3px; font-weight: 700; }
.num .bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 12px; overflow: hidden; }
.num .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
.num.in .bar i { width: var(--w); }
.num-note { font-size: 11px; color: var(--muted); margin-top: 14px; }

/* Work */
.works { display: grid; gap: 18px; }
.work { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.work .ph { aspect-ratio: 16/10; border-radius: 0; }
.work-body { padding: 22px 22px 26px; position: relative; }
.work-no { position: absolute; right: 18px; top: -30px; font-family: var(--font-latin); font-style: var(--latin-style); font-size: 52px; line-height: 1; color: var(--accent); font-weight: 700; }
.work h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 19px; margin-bottom: 8px; }
.work p { font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chips span { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg2); color: var(--primary); }

/* Day */
.day { position: relative; padding-left: 34px; }
.day-line { position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.day-line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--primary); }
.day-item { position: relative; padding-bottom: 30px; }
.day-item::before { content: ""; position: absolute; left: -31px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: .4s; }
.day-item.on::before { background: var(--accent); border-color: var(--primary); transform: scale(1.2); }
.day-time { font-family: var(--font-latin); font-weight: 700; font-size: 20px; color: var(--primary); line-height: 1.2; }
.day-item h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16px; margin: 2px 0 4px; }
.day-item p { font-size: 13px; color: var(--muted); }
.day-tabs { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 30px; }
.day-tabs button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 18px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.day-tabs button.on { background: var(--primary); color: var(--on-primary); }
.day-pane { display: none; } .day-pane.on { display: block; }

/* Interview */
.iv-scroller { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 22px 20px; margin: 0 -22px; scrollbar-width: none; }
.iv-scroller::-webkit-scrollbar { display: none; }
.iv { flex: 0 0 82%; max-width: 360px; scroll-snap-align: center; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.iv .ph { aspect-ratio: 1; border-radius: 0; }
.iv-body { padding: 20px 20px 24px; }
.iv-q { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 18px; line-height: 1.55; margin-bottom: 14px; }
.iv-q::before { content: "“"; font-family: var(--font-latin); color: var(--accent); font-size: 40px; line-height: 0; vertical-align: -14px; margin-right: 4px; }
.iv-meta { font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }
.iv-meta b { font-size: 15px; color: var(--ink); margin-right: 8px; }
.iv-meta .from { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; background: var(--bg2); color: var(--primary); padding: 1px 8px; border-radius: 4px; }
.iv-dots { display: flex; justify-content: center; gap: 8px; }
.iv-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: .3s; }
.iv-dots i.on { width: 26px; background: var(--primary); }

/* Career */
.career { display: grid; gap: 0; counter-reset: c; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; position: relative; padding-bottom: 26px; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; border-left: 2px dashed var(--line); }
.step-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--primary); font-family: var(--font-latin); font-weight: 700; font-size: 12px; color: var(--primary); text-align: center; line-height: 1.1; }
.step:last-child .step-ic { background: var(--primary); color: var(--on-primary); }
[data-theme="classic"] .step-ic { border-radius: 0; transform: rotate(45deg) scale(.8); } [data-theme="classic"] .step-ic span { transform: rotate(-45deg); }
.step h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 17px; }
.step .yr { font-size: 11px; font-weight: 700; color: var(--primary); }
.step p { font-size: 13px; color: var(--muted); }
.salary { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; background: var(--bg2); padding: 2px 10px; border-radius: 4px; }
.sec.alt .salary { background: var(--card); }

/* Training */
.train { display: grid; gap: 12px; }
.train > .tr { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.tr-n { flex: 0 0 auto; font-family: var(--font-latin); font-style: var(--latin-style); font-size: 36px; color: var(--sky); font-weight: 700; line-height: 1; width: 44px; }
.train > .tr h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 15px; }
.train > .tr p { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* Benefits */
.bens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ben { background: var(--card); border-radius: var(--radius); padding: 18px 14px; text-align: center; border: 1px solid var(--line); }
.ben-dot { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font-family: var(--font-latin); font-weight: 700; color: var(--primary); font-size: 15px; }
.ben h3 { font-size: 14px; font-weight: 700; line-height: 1.5; }
.ben p { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 4px; }

/* Requirements */
.req { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.req-tabs { display: flex; border-bottom: 1px solid var(--line); }
.req-tabs button { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; padding: 14px 6px; color: var(--muted); cursor: pointer; position: relative; min-height: 48px; }
.req-tabs button.on { color: var(--primary); }
.req-tabs button.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; background: var(--primary); border-radius: 3px; }
.req dl { display: none; padding: 6px 20px 14px; }
.req dl.on { display: block; animation: fadeUp .5s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.req dt { font-size: 12px; font-weight: 700; color: var(--primary); padding-top: 14px; }
.req dd { font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.req dd:last-of-type { border-bottom: 0; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.req-list li { line-height: 1.7; }
.req-list small { font-size: 12px; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.qa { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 54px; position: relative; font-weight: 700; font-size: 14.5px; line-height: 1.6; min-height: 56px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q"; position: absolute; left: 18px; top: 15px; font-family: var(--font-latin); font-size: 22px; color: var(--primary); line-height: 1.2; }
.qa summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--primary); transition: transform .3s; font-weight: 400; }
.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa .a { padding: 0 20px 20px 54px; position: relative; font-size: 13.5px; color: var(--muted); }
.qa .a::before { content: "A"; position: absolute; left: 18px; top: -4px; font-family: var(--font-latin); font-size: 22px; color: var(--accent); }

/* Final CTA */
.final { padding: 110px 0 130px; background: var(--primary); color: var(--on-primary); text-align: center; position: relative; overflow: hidden; }
.final .waves { top: -1px; bottom: auto; transform: scaleY(-1); }
.final h2 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(28px, 7.4vw, 52px); line-height: 1.4; }
.final p { margin: 18px auto 32px; max-width: 520px; opacity: .85; font-size: 14px; }
.final .eyebrow { color: var(--accent); margin-bottom: 14px; }
[data-theme="classic"] .final .eyebrow { color: var(--bg); }
[data-theme="pop"] .final .eyebrow { color: #fff; }
.final-sub { margin-top: 18px; font-size: 12px; opacity: .75; }
.final .big-bg { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-family: var(--font-latin); font-style: var(--latin-style); font-size: 30vw; line-height: 1; white-space: nowrap; opacity: .07; pointer-events: none; font-weight: 700; }

.ftr { padding: 40px 0 110px; text-align: center; font-size: 12px; color: var(--muted); }
.ftr img { height: 48px; margin: 0 auto 14px; filter: var(--logo-filter); }

/* ===== Desktop ===== */
@media (min-width: 900px) {
  body { font-size: 16px; }
  .wrap { padding: 0 40px; }
  .hdr { padding: 18px 40px; } .hdr.scrolled { padding: 10px 40px; }
  .hdr .logo { height: 48px; }
  .hero { padding-top: 120px; }
  .hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .hero-visual { margin-top: 0; min-height: 600px; }
  .hero-visual .ph.main { inset: 0 0 60px 10%; margin-right: -40px; }
  .scroll-hint { left: 40px; }
  .sec { padding: 140px 0; }
  .eyebrow { font-size: 88px; }
  [data-theme="pop"] .eyebrow { font-size: 64px; }
  .sec-head h2 { font-size: 28px; }
  .msg-grid { grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
  .msg-copy { font-size: 36px; }
  .nums { grid-template-columns: repeat(4, 1fr); }
  .num.wide { grid-column: span 2; }
  .works { grid-template-columns: repeat(3, 1fr); }
  .tracks { grid-template-columns: 1fr 1fr; gap: 24px; }
  .track { padding: 40px 36px 32px; }
  .iv { flex: 1 1 0; max-width: none; }
  .iv-scroller { overflow: visible; }
  .iv-dots { display: none; }
  .bens { grid-template-columns: repeat(4, 1fr); }
  .train { grid-template-columns: 1fr 1fr; }
  .split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; }
  .split .sec-head { position: sticky; top: 120px; align-self: start; }
  .float-cta { left: auto; right: 30px; bottom: 30px; }
  .float-cta .btn-line { width: 300px; }
}

.fine-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 20px; text-wrap: pretty; }
.fine-note + .fine-note { margin-top: 6px; }
.iv-para { display: block; }
.iv-para + .iv-para { margin-top: .6em; }
.hero-tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 520px; }
.hero-tags .hero-tag { margin-bottom: 0; }
.hero-tags .hero-tag i { width: 8px; height: 8px; background: var(--primary); }
.hero-tags .hero-tag.cheer i { background: var(--accent); }
.ph.has-img { background: none; }
.ph.has-img::after { content: none; }
.ph.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.iv-body { display: flex; flex-direction: column; flex: 1; }
.iv-text { font-size: 13px; line-height: 1.8; color: var(--ink); margin-top: 14px; text-wrap: pretty; }

/* STRENGTHS */
.strs { display: grid; gap: 14px; }
.str { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 26px; overflow: hidden; }
.str-n { display: block; font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 44px; line-height: 1; color: var(--sky); margin-bottom: 14px; }
.str h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 19px; line-height: 1.5; color: var(--primary); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--accent); display: inline-block; }
.str p { font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.str .str-sub { display: block; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--primary); line-height: 1.6; margin-bottom: 10px; }
/* VALUES */
.vals { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.val { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.val-en { font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 34px; line-height: 1; color: var(--sky); }
.val h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 18px; color: var(--ink); }
.val p { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.8; }
/* PERSONA */
.personas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.persona { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.persona-chk { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); position: relative; margin-top: 2px; }
.persona-chk::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border: solid var(--on-primary, #fff); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.persona-n { flex: 0 0 auto; font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 34px; line-height: 1; color: var(--sky); }
.sec-head .lead + .lead { margin-top: 10px; }
.persona h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.persona p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
/* LOCATIONS */
.locs { display: grid; gap: 14px; }
@media (min-width: 600px) { .locs { grid-template-columns: 1fr 1fr; } }
.loc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 14px; }
.loc-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding-bottom: 14px; border-bottom: 2px solid var(--accent); }
.loc-en { grid-column: 1 / -1; font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 30px; line-height: 1; color: var(--sky); }
.loc-head h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 19px; color: var(--primary); }
.loc-count { font-size: 13px; font-weight: 700; color: var(--ink); }
.loc-count b { font-family: var(--font-latin); font-size: 30px; line-height: 1; color: var(--primary); margin-right: 2px; }
.loc-list { list-style: none; padding: 0; margin: 0; }
.loc-list li { padding: 12px 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; }
.loc-list li:last-child { border-bottom: 0; }
.loc-list b { font-size: 14px; font-weight: 700; color: var(--ink); }
.loc-list span { font-size: 12px; color: var(--muted); }
@media (min-width: 900px) {
  .personas { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .persona { flex-direction: column; gap: 14px; }
  .persona { padding: 28px 26px; }
  .locs { grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
  .loc { padding: 22px 18px 12px; }
  .strs { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .str { padding: 36px 30px 32px; }
  .val { grid-template-columns: 200px 1fr; gap: 28px; align-items: baseline; padding: 30px 0; }
  .val-en { font-size: 40px; }
}

/* MISSION (inside Message) */
.mission { margin-top: 28px; padding: 22px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mission-label { font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--sky); }
.mission-title { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 24px; line-height: 1.4; color: var(--primary); margin-top: 6px; }
.mission-en { font-family: var(--font-latin); font-style: var(--latin-style); font-size: 14px; letter-spacing: .06em; color: var(--muted); }
.mission-lead { margin-top: 12px; font-weight: 700; font-size: 15px; line-height: 1.8; color: var(--ink); text-wrap: pretty; }
.mission-lead .sp-br { display: none; }
#message .msg-body { margin-top: 22px; }
@media (max-width: 480px) { .mission-lead .sp-br { display: inline; } }
@media (min-width: 900px) { .mission-title { font-size: 30px; } }

/* PHILOSOPHY */
.philo { position: relative; padding: 110px 0; color: #fff; overflow: hidden; background: #14305a; }
.philo-bg { position: absolute; inset: 0; }
.philo-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: grayscale(.3); }
.philo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,48,90,.96) 30%, rgba(20,48,90,.7)); }
.philo-inner { position: relative; display: grid; gap: 36px; }
.philo .eyebrow { color: var(--sky); }
.philo-h2-small { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16px; margin-top: 10px; display: flex; align-items: center; gap: 10px; opacity: .85; }
.philo-h2-small::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.philo-copy { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 40px; line-height: 1.35; margin-top: 22px; letter-spacing: .02em; }
.philo-body p { font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.86); text-wrap: pretty; }
.philo-body p + p { margin-top: 1em; }
.philo-body .philo-lead { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 20px; line-height: 1.6; color: #fff; margin-bottom: 1.2em; }
.philo-body .philo-close { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; }
[data-theme="classic"] .philo { background: #0b1830; }
[data-theme="classic"] .philo-bg::after { background: linear-gradient(100deg, rgba(11,24,48,.96) 30%, rgba(11,24,48,.72)); }
@media (min-width: 900px) {
  .philo { padding: 140px 0; }
  .philo-inner { grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
  .philo-copy { font-size: 64px; }
  .philo-body .philo-lead { font-size: 24px; }
}

/* PHILOSOPHY — 3 promises (compact) */
.promise { grid-column: 1 / -1; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
.promise-ttl { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.75); }
.promise-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.promise-list li { display: flex; gap: 12px; align-items: baseline; }
.promise-n { flex: 0 0 auto; font-family: var(--font-latin); font-weight: 700; font-size: 12px; color: var(--sky); letter-spacing: .08em; }
.promise-list h4 { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: #fff; }
.promise-list h4 small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.7); margin-left: .8em; }
.promise-list p { font-size: 12.5px; line-height: 1.8; color: rgba(255,255,255,.72); margin-top: 4px; text-wrap: pretty; }
@media (min-width: 900px) {
  .promise { margin-top: 16px; padding-top: 32px; }
  .promise-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.mission.first { margin-top: 0; padding-top: 0; border-top: 0; }
.mission.first .mission-title { font-size: 28px; }
@media (min-width: 900px) { .mission.first .mission-title { font-size: 38px; } }

/* DECO — line-art accents */
.deco .l-sky, .ben-deco .l-sky { fill: none; stroke: var(--sky); stroke-width: 2; }
.deco .l-pri, .ben-deco .l-pri { fill: none; stroke: var(--primary); stroke-width: 1.5; opacity: .35; }
.deco .d, .ben-deco .d { stroke-dasharray: 3 6; stroke-linecap: round; }
.deco .d2, .ben-deco .d2 { stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 2.5; }
.deco .f-sky { fill: var(--sky); opacity: .55; }
.deco .f-sky.o { opacity: .25; } .deco .f-sky.o2 { opacity: .4; }
.deco .f-acc, .ben-deco .f-acc { fill: var(--accent); }
.str .deco { position: absolute; top: 12px; right: 12px; width: 76px; height: 76px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.str:hover .deco { transform: translateY(-4px) rotate(-4deg); }
.persona { position: relative; }
.persona .deco.sm { position: absolute; top: 18px; right: 18px; width: 60px; height: 60px; }
.persona h3 { padding-right: 56px; }
@media (min-width: 900px) { .persona h3 { padding-right: 0; } .persona { padding-top: 34px; } .persona .deco.sm { width: 68px; height: 68px; } }
#benefits { position: relative; overflow: hidden; }
#benefits > .wrap { position: relative; }
.ben-deco { position: absolute; width: 380px; height: 380px; right: -120px; top: -90px; pointer-events: none; opacity: .7; }
.ben-dot { background: transparent; border: 2px solid var(--sky); position: relative; }
.ben-dot::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.str h3 { padding-right: 64px; }
@media (max-width: 600px) { .ben-deco { width: 220px; height: 220px; right: -110px; top: -60px; opacity: .4; } }

/* Section-level line-art */
.sec-deco { position: absolute; width: 360px; height: 360px; pointer-events: none; opacity: .6; z-index: 0; }
.sec-deco .l-sky { fill: none; stroke: var(--sky); stroke-width: 2; }
.sec-deco .l-pri { fill: none; stroke: var(--primary); stroke-width: 1.5; opacity: .35; }
.sec-deco .d { stroke-dasharray: 3 6; stroke-linecap: round; }
.sec-deco .d2 { stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 2.5; }
.sec-deco .f-sky { fill: var(--sky); opacity: .55; }
.sec-deco .f-acc { fill: var(--accent); }
.sec-deco .f-acc.soft { opacity: .35; }
.sec-deco .dots { opacity: .35; }
.sec-deco.tr { right: -120px; top: -80px; }
.sec-deco.bl { left: -130px; bottom: -110px; }
.sec-deco.br { right: -110px; bottom: -120px; }
#values, #tracks, #numbers, #locations, #day, #interview { overflow: hidden; }
#values > .wrap, #tracks > .wrap, #numbers > .wrap, #locations > .wrap, #day > .wrap, #interview > .wrap { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .sec-deco { width: 200px; height: 200px; opacity: .4; }
  .sec-deco.tr { right: -100px; top: -50px; }
  .sec-deco.bl { left: -90px; bottom: -80px; }
  .sec-deco.br { right: -80px; bottom: -80px; }
}
/* Career / Philosophy / Training deco */
#career, #training, .philo { overflow: hidden; }
#career > .wrap, #training > .wrap { position: relative; z-index: 1; }
#career .sec-deco.bl { left: -110px; bottom: -60px; }
#training .sec-deco.bl { left: -150px; bottom: -150px; opacity: .45; }
.philo-deco { z-index: 0; opacity: .5; }
.philo-deco.tr { right: -110px; top: -100px; }
.philo-deco.bl { left: -140px; bottom: -130px; opacity: .35; }
.philo-deco .l-wh, .deco .l-wh { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .5; }
.philo-deco .d2, .deco .l-wh.d2 { stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 2.5; }
.philo-inner { z-index: 1; }
.promise-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.promise-list .deco.pr { grid-column: 1 / -1; width: 46px; height: 46px; margin-bottom: 10px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.promise-list li:hover .deco.pr { transform: translateY(-4px) rotate(-4deg); }
@media (min-width: 900px) { .promise-list .deco.pr { width: 56px; height: 56px; } }

.step-ic { position: relative; }
.step-ic::after { content: ""; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
[data-theme="classic"] .step-ic::after { display: none; }
.step > div:last-child { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.step:not(:last-child)::after { border-left-color: var(--sky); }
.step .salary { background: var(--bg2); border-left: 0; }
.step:last-child .salary { background: var(--accent); color: var(--ink); }
.step-lv { display: flex; gap: 3px; position: absolute; right: 16px; top: 18px; align-items: flex-end; }
.step-lv i { width: 6px; border-radius: 2px; background: var(--line); }
.step-lv i:nth-child(1){height:8px} .step-lv i:nth-child(2){height:12px} .step-lv i:nth-child(3){height:16px} .step-lv i:nth-child(4){height:20px}
.step-lv i.on { background: var(--sky); }
.step-lv i.on:last-of-type.top, .step-lv i.top { background: var(--accent); }
.step h3 { padding-right: 44px; }

.train > .tr { position: relative; overflow: hidden; padding-right: 80px; }
.train > .tr .deco.trd { position: absolute; right: 14px; top: 14px; width: 52px; height: 52px; opacity: .9; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.train > .tr:hover .deco.trd { transform: translateY(-4px) rotate(-4deg); }
@media (max-width: 600px) { .train > .tr { padding-right: 18px; padding-top: 22px; } .train > .tr .deco.trd { width: 40px; height: 40px; opacity: .55; } .philo-deco { width: 220px; height: 220px; } }

.track .deco.tk { position: absolute; right: 16px; bottom: 16px; width: 70px; height: 70px; opacity: .9; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.track:hover .deco.tk { transform: translateY(-4px) rotate(-4deg); }
.track .track-more { position: relative; }
.track p { padding-right: 0; }
@media (min-width: 900px) { .track { padding-right: 110px; } .track .deco.tk { width: 84px; height: 84px; right: 22px; bottom: 22px; } }
@media (max-width: 899px) { .track .deco.tk { top: 16px; bottom: auto; width: 56px; height: 56px; } }
.loc-head { position: relative; padding-left: 0; }
.loc-pin { position: absolute; right: 0; top: 0; width: 22px; height: 22px; }
.loc-pin .l-sky { fill: none; stroke: var(--sky); stroke-width: 2; }
.loc-pin .f-acc { fill: var(--accent); }
@media (max-width: 600px) {
  #values .sec-deco.bl { left: -120px; bottom: -130px; }
  #locations .sec-deco.br { right: -110px; bottom: -130px; }
  .track .deco.tk { opacity: .6; }
}

/* ===== EVENTS (Beyond Lessons) ===== */
.evt { position: relative; overflow: hidden; padding: 100px 0; background: #14305a; color: #fff; }
[data-theme="classic"] .evt { background: #0b1830; }
.evt-spot { position: absolute; left: 50%; top: -30%; width: 140%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(111,186,211,.28), transparent 62%); pointer-events: none; }
.evt-deco { z-index: 0; opacity: .45; }
.evt-deco.tr { right: -120px; top: -110px; }
.evt-deco .l-wh { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .5; }
.evt-inner { position: relative; z-index: 1; }
.evt .eyebrow { color: var(--sky); }
.evt-h2 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16px; margin-top: 10px; display: flex; align-items: center; gap: 10px; opacity: .85; }
.evt-h2::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
.evt-copy { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 30px; line-height: 1.45; margin-top: 26px; letter-spacing: .02em; }
.evt-copy em { font-style: normal; background: linear-gradient(transparent 66%, color-mix(in srgb, var(--accent) 70%, transparent) 66%); }
.evt-lead { font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.84); margin-top: 18px; text-wrap: pretty; }
.evts { display: grid; gap: 18px; margin-top: 44px; }
.ev { background: #fff; color: var(--ink); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0,0,0,.18); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
[data-theme="classic"] .ev { background: var(--card); color: var(--ink); }
.ev:hover { transform: translateY(-4px); }
.ev-img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; background: var(--bg2); }
.ev-img { overflow: hidden; }
.ev-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ev:hover .ev-img img { transform: scale(1.04); }
.ev-body { position: relative; padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.ev-n { position: absolute; right: 18px; top: -30px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--font-latin); font-weight: 700; font-size: 18px; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
[data-theme="classic"] .ev-n { border-radius: 0; transform: rotate(45deg) scale(.8); color: var(--bg); }
.ev-tag { font-family: var(--font-latin); font-style: var(--latin-style); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.ev h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 21px; color: var(--primary); margin-top: 2px; }
.ev p { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.85; }
.ev-role { margin-top: 14px; padding: 12px 14px; background: var(--bg2); border-radius: calc(var(--radius) * .5); }
.ev-role dt { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: .06em; }
.ev-role dd { font-size: 13px; font-weight: 500; margin-top: 2px; line-height: 1.7; }
.ev-gain { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.ev-gain li { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 99px; border: 1.5px solid var(--sky); color: var(--primary); }
.ev-gain li::before { content: "＋"; color: var(--sky); margin-right: 2px; }
.evt-link { display: grid; gap: 6px; margin-top: 32px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); transition: background .3s, border-color .3s; }
.evt-link:hover { background: rgba(255,255,255,.06); border-color: var(--sky); }
.evt-link-k { font-family: var(--font-latin); font-style: var(--latin-style); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--sky); text-transform: uppercase; }
.evt-link-t { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.9); }
.evt-link-t b { color: var(--accent); }
.evt-link-a { font-size: 13px; font-weight: 700; color: #fff; justify-self: start; border-bottom: 2px solid var(--accent); }
.evt-note { color: rgba(255,255,255,.6); }
.pc-br { display: none; }
@media (min-width: 900px) {
  .evt { padding: 140px 0; }
  .evt-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: end; }
  .evt-copy { font-size: 46px; margin-top: 0; }
  .evts { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; }
  .evt-link { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 26px 32px; }
  .pc-br { display: inline; }
}
@media (min-width: 1280px) { .evts { grid-template-columns: repeat(4, 1fr); gap: 20px; } .evts .ev-body { padding: 22px 20px 24px; } }
@media (max-width: 600px) { .evt-deco { width: 220px; height: 220px; right: -100px; top: -60px; } }

/* ===== Fix: rv-mask が自身に clip-path を持つと IntersectionObserver が
   交差率0と判定し reveal が発火しないため、内側ラッパーへクリップを移す ===== */
.msg-photo.rv-mask { clip-path: none; overflow: visible; }
.msg-photo .mask-inner {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--bg2);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.7,0,.2,1);
}
.msg-photo.rv-mask.in .mask-inner { clip-path: inset(0 0 0 0); }
body.calm .msg-photo .mask-inner { clip-path: none; transition: none; }
@media (max-width: 899px) { .msg-photo .mask-inner { border-radius: var(--radius); } }

/* 画像の最終表示位置は元デザインと同一 */
.msg-photo .mask-inner > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (max-width: 899px) { .msg-photo .mask-inner > img { object-position: center 12%; } }

/* ===== Fix: メニューが画面より長いと下の項目に到達できない =====
   .nav は position:fixed; inset:0 の全画面パネルだが overflow-y が visible のため
   16項目（約1064px）が画面高（SP 844px / PC 900px）を超えるとスクロールできず、
   後半のリンク（研修・待遇・募集要項・FAQ など）を押せなかった。
   パネル自身をスクロール領域にし、開いている間は背面のページを固定する。 */
.nav {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--on-primary) 40%, transparent) transparent;
}
.nav a { flex: 0 0 auto; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--on-primary) 35%, transparent);
  border-radius: 3px;
}
/* 開いている間は背後のページをスクロールさせない */
html.menu-open, body.menu-open { overflow: hidden; }
body.menu-open .nav { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

@media (max-height: 700px) {
  .nav { padding-top: 78px; }
  .nav a { font-size: 19px; padding: 4px 0; }
}

/* ===== Fix: メニューをスクロールすると項目が固定ヘッダーのロゴに重なる =====
   ヘッダー(z-index 50)はメニュー(40)の上にあるが背景が透明なため、
   スクロールした項目がロゴの上に透けて重なって見えていた。
   開いている間だけヘッダーを不透明にし、ロゴを隠す（× と LINE は残す）。 */
body.menu-open .hdr,
body.menu-open .hdr.scrolled {
  background: var(--primary);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open .hdr .logo { opacity: 0; pointer-events: none; }
body.menu-open .hdr .logo,
body.menu-open .hdr.scrolled .logo { transition: opacity .2s; }