/* 🎨 OverNexus LP の見た目
 *
 * 色はアプリ(ow-clueless-list の src/frontend/tailwind.config.js)の brand・font・showcase と同じ値にする。
 * アプリの /about(紺の大見出し・白いカードの段・紺の締め)の見た目に合わせる。
 */
:root {
  --font-900: #0f172a;
  --font-800: #1e293b;
  --font-700: #334155;
  --font-600: #475569;
  --font-500: #64748b;
  --font-400: #94a3b8;
  --brand-primary: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-light: #eff6ff;
  --brand-border: #bfdbfe;
  --brand-dark: #1e3a8a;
  --showcase-navy: #0b1a4a;
  --showcase-glow: #60a5fa;
  --showcase-haze: #a5b4fc;
  --showcase-kick: #93c5fd;
  --bg: #f8fafc;
  --line: #e2e8f0;
  --radius-card: 16px;
  --radius-band: 24px;
  --max-width: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--font-900);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

/* ── ヘッダー ── */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; color: var(--font-900); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.site-nav { display: flex; gap: 16px; font-size: 13px; font-weight: 800; }
.site-nav a { text-decoration: none; color: var(--font-600); }
.site-nav a:hover { color: var(--brand-primary); }

main { padding: 24px 0 48px; }
main > .container > * + * { margin-top: 32px; }

/* ── 紺の帯(大見出し・締め) ── */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-band);
  background: var(--showcase-navy);
  color: #fff;
}
/* 後ろにうっすら光を置く(アプリは部品が流れるが、LP は静止画の光で代える) */
.band::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgb(96 165 250 / 0.22), transparent 70%),
    radial-gradient(35% 35% at 85% 70%, rgb(165 180 252 / 0.18), transparent 70%);
  pointer-events: none;
}
.band > * { position: relative; }

.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 20px; }
.hero-copy { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--showcase-kick); }
.hero h1 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.accent {
  background: linear-gradient(to right, var(--showcase-glow), var(--showcase-haze));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { margin: 0; font-size: 13px; color: #cbd5e1; }

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.08);
  font-size: 12px;
  font-weight: 800;
}
.badge-soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--showcase-glow); }

/* ── ボタン(アプリの showcaseButtons.ts と同じ形) ── */
.buttons { display: flex; gap: 8px; width: 100%; justify-content: center; padding-top: 4px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.15s;
  flex: 1;
}
.btn-primary { background: #fff; color: var(--brand-dark); box-shadow: 0 8px 20px -6px rgb(96 165 250 / 0.7); }
.btn-primary:hover { background: var(--brand-light); }
/* 公開前の「近日公開」(押せない) */
.btn-primary[aria-disabled='true'] { cursor: default; opacity: 0.85; }
.btn-primary[aria-disabled='true']:hover { background: #fff; }
.btn-secondary { border: 1px solid rgb(255 255 255 / 0.45); background: rgb(255 255 255 / 0.05); color: #fff; }
.btn-secondary:hover { background: rgb(255 255 255 / 0.15); }
.btn-blue { background: var(--brand-primary); color: #fff; border-radius: 999px; padding: 12px 24px; flex: none; }
.btn-blue:hover { background: var(--brand-hover); }

/* ── 白い地の段 ── */
.section-head { text-align: center; margin-bottom: 20px; }
.eyebrow { font-size: 12px; font-weight: 800; color: var(--brand-primary); }
.section-head h2 { margin: 4px 0 0; font-size: 22px; font-weight: 800; line-height: 1.4; }
.section-head p { margin: 8px 0 0; font-size: 13px; color: var(--font-600); }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
}
/* 機能の小見出し: アイコン(アプリの /about と同じ物)を青の光る丸角の台に載せる */
.feature-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--brand-primary); }
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--showcase-glow), #6366f1);
  box-shadow: 0 10px 20px -10px rgb(37 99 235 / 0.9);
}
.feature { transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.feature:hover { transform: translateY(-3px); border-color: var(--brand-border); box-shadow: 0 16px 30px -18px rgb(37 99 235 / 0.5); }
.feature h3 { text-wrap: balance; margin: 14px 0 6px; font-size: 17px; font-weight: 800; line-height: 1.45; }
.feature p { margin: 0; font-size: 13px; color: var(--font-600); }
.tag-paid { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; background: var(--brand-light); color: var(--brand-primary); font-size: 11px; font-weight: 800; }

.center { text-align: center; }
.note { font-size: 12px; color: var(--font-500); }

/* ── 表(料金の詳細) ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 800; color: var(--font-900); white-space: nowrap; }
td { color: var(--font-700); }
thead th { background: #f8fafc; }

/* ── 締め ── */
.closing { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.closing h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.45; }
.closing .buttons { max-width: 440px; }

/* ── 規約ページ(アプリの LegalPageLayout と同じ形) ── */
.legal-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.legal-head p { margin: 4px 0 0; font-size: 11px; font-weight: 700; color: var(--font-400); }
.legal-body { font-size: 14px; color: var(--font-700); }
.legal-body > * + * { margin-top: 20px; }
.legal-body h2 { margin-bottom: -8px; font-size: 16px; font-weight: 800; color: var(--font-900); }
.legal-body ul { padding-left: 20px; }
.legal-body li + li { margin-top: 4px; }
.legal-body p { margin: 0; }
.tokushoho { margin: 0; }
.tokushoho div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.tokushoho div:last-child { border-bottom: 0; }
.tokushoho dt { font-size: 12px; font-weight: 800; color: var(--font-900); }
.tokushoho dd { margin: 0; white-space: pre-line; }

/* ── フッター ── */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.site-footer .container { padding-top: 24px; padding-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.footer-links a { font-size: 12px; font-weight: 700; color: var(--font-500); text-decoration: none; }
.footer-links a:hover { color: var(--brand-primary); }
.footer-note { margin: 0; font-size: 11px; font-weight: 700; color: var(--font-400); }

@media (min-width: 640px) {
  .hero { padding: 32px; }
  .hero h1 { font-size: 36px; }
  .lead { font-size: 14px; }
  .btn { flex: none; padding: 12px 32px; font-size: 14px; }
  .btn-secondary { padding: 12px 24px; }
  .section-head h2, .closing h2 { font-size: 28px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .tokushoho div { grid-template-columns: 10rem 1fr; gap: 16px; }
}

@media (min-width: 768px) {
  .hero { grid-template-columns: 1fr 1.15fr; gap: 32px; }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero .buttons { justify-content: flex-start; }
}

@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px) {
  .site-nav { gap: 12px; font-size: 12px; }
}

/* ── 料金ページの小見出し ── */
.sub-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
section > .note { margin: 8px 0 0; }
.note a { color: var(--brand-primary); }

/* ── 大見出しの、プレイヤー評価の動く見本(アプリの EvalDemo を HTML・CSS で再現) ──
 * 台はアプリの ShowcaseStage(tone="dark")と同じく、左上から淡く光る半透明の白。下は薄く消して帯になじませる。
 * 色は評価の項目・ロールごとの色(アプリの src/data/evaluationMetrics.json・roles.json)。バーの長さは 5 点満点に対する割合。
 * 動きを減らす設定の人には、打ち終わった検索欄と、スクロールしていない状態で止めて見せる。
 */
.eval-demo {
  --ed-window-h: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: radial-gradient(120% 120% at 20% 0%, rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.1) 50%, rgb(255 255 255 / 0.05));
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
  color: var(--font-700);
  font-size: 12px;
  line-height: 1.5;
}
.ed-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; font-weight: 700; }
.ed-search-icon { width: 12px; height: 12px; border: 2px solid var(--font-400); border-radius: 50%; position: relative; flex: none; }
.ed-search-icon::after { content: ''; position: absolute; width: 2px; height: 5px; background: var(--font-400); right: -3px; bottom: -4px; transform: rotate(-45deg); }
/* 打つ文字の幅を ch で決めるので、1 文字の幅がそろう等幅の書体にする */
.ed-type { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; display: inline-block; overflow: hidden; white-space: nowrap; width: 14ch; animation: ed-type 10s steps(14) infinite; animation-delay: -1s; }
.ed-caret { width: 1px; height: 14px; background: var(--brand-primary); animation: ed-blink 1s step-end infinite; }
@keyframes ed-type { 0% { width: 0; } 20%, 100% { width: 14ch; } }
@keyframes ed-blink { 50% { opacity: 0; } }

.ed-window { height: var(--ed-window-h); overflow: hidden; }
.ed-scroll { display: flex; flex-direction: column; gap: 8px; animation: ed-scroll 16s ease-in-out infinite; }
@keyframes ed-scroll {
  0%, 18% { transform: translateY(0); }
  70%, 80% { transform: translateY(calc(-100% + var(--ed-window-h))); }
  100% { transform: translateY(0); }
}
.ed-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.5); }
.ed-title { font-weight: 800; color: var(--font-900); }
.ed-info { flex-direction: row; align-items: center; gap: 10px; }
.ed-rank { flex: none; padding: 4px 8px; border-radius: 8px; background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.ed-name { display: block; font-size: 16px; color: var(--font-900); }
.ed-name span { color: var(--font-400); font-weight: 700; }
.ed-meta { color: var(--font-500); font-size: 11px; }
.ed-summary { display: flex; justify-content: space-between; font-weight: 800; }
.ed-good { color: #059669; }
.ed-count { color: var(--font-500); }
.ed-ratio { height: 8px; border-radius: 99px; background: #fecdd3; overflow: hidden; }
.ed-ratio i { display: block; width: 62%; height: 100%; background: #10b981; }
.ed-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-metrics li { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.ed-metrics span { font-size: 10px; font-weight: 800; color: var(--font-800); }
.ed-metrics b { font-size: 11px; color: var(--font-900); font-variant-numeric: tabular-nums; }
.ed-metrics i { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: linear-gradient(to right, var(--c) var(--w), #e2e8f0 var(--w)); }
.m-teamplay    { --c: #06b6d4; --w: 48%; }
.m-attitude    { --c: #eab308; --w: 58%; }
.m-tactics     { --c: #a855f7; --w: 70%; }
.m-physical    { --c: #84cc16; --w: 64%; }
.m-mental      { --c: #ec4899; --w: 60%; }
.m-flexibility { --c: #71717a; --w: 66%; }
.ed-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-roles li { display: grid; grid-template-columns: 5.5em 1fr 2.5em; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; }
.ed-roles b { text-align: right; font-variant-numeric: tabular-nums; }
.ed-roles i { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--c) var(--w), #e2e8f0 var(--w)); }
.r-tank    { --c: #6366f1; --w: 45%; }
.r-damage  { --c: #8b5cf6; --w: 35%; }
.r-support { --c: #06b6d4; --w: 20%; }
.ed-review { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 11px; }
.ed-review.is-good { background: #ecfdf5; color: #065f46; }
.ed-review.is-bad { background: #fff1f2; color: #9f1239; }

/* スマホでは評価の項目を 1 列にする(2 列だと項目名が折り返すため) */
@media (max-width: 479px) {
  .ed-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-type, .ed-caret, .ed-scroll { animation: none; }
}

/* ── プランのカード(アプリの /plan の PlanCard と同じ作り。色は青で統一) ──
 * FREE は白、STANDARD は淡い青、PRO は紺の地に、青から藍へ回る光の枠で一番目立たせる。
 * 年額の割引の札だけは、アプリと同じ赤(rose-500)にする。
 */
.plan-cards { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-card); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(15 23 42 / 0.06); }
.plan-card-head { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.tier-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: var(--font-500); }
.discount-pill { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #f43f5e; color: #fff; white-space: nowrap; }
.plan-copy { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--font-500); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan-price .amount { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--font-900); font-variant-numeric: tabular-nums; }
.plan-price .period { font-size: 12px; font-weight: 700; color: var(--font-400); white-space: nowrap; }
.plan-price s { font-size: 14px; font-weight: 700; color: var(--font-400); }
.plan-sub { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--font-500); }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--font-700); }
.plan-features li::before { content: '✓'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #f1f5f9; color: var(--font-500); }
.plan-button { margin-top: auto; display: block; text-align: center; padding: 12px; border-radius: 12px; font-size: 13px; font-weight: 800; background: #f1f5f9; color: var(--font-400); text-decoration: none; }
.plan-button[href] { background: var(--font-900); color: #fff; }

.tier-standard { background: linear-gradient(#eff6ff, #fff); border-color: #93c5fd; box-shadow: 0 2px 8px -2px rgb(37 99 235 / 0.15); }
.tier-standard .tier-badge { background: var(--brand-primary); color: #fff; }
.tier-standard .plan-copy { color: var(--brand-primary); }
.tier-standard .plan-features li::before { background: #dbeafe; color: var(--brand-primary); }
.tier-standard .plan-button { background: #dbeafe; color: var(--brand-primary); }

/* PRO: 紺の地。枠は青→藍→水色の光が回る(動きを減らす設定では止める) */
@property --pro-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tier-pro {
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, #13286b, var(--showcase-navy) 60%) padding-box,
    conic-gradient(from var(--pro-angle), var(--showcase-glow), #6366f1, #22d3ee, var(--showcase-haze), var(--showcase-glow)) border-box;
  box-shadow: 0 18px 40px -18px rgb(37 99 235 / 0.8);
  animation: pro-spin 6s linear infinite;
  color: #fff;
}
@keyframes pro-spin { to { --pro-angle: 360deg; } }
.tier-pro .tier-badge { background: linear-gradient(135deg, var(--showcase-glow), var(--showcase-haze)); color: var(--showcase-navy); }
.tier-pro .plan-copy { color: var(--showcase-kick); }
.tier-pro .plan-price .amount { color: #fff; }
.tier-pro .plan-price .period, .tier-pro .plan-price s, .tier-pro .plan-sub { color: #a5b4fc; }
.tier-pro .plan-features li { color: #e2e8f0; }
.tier-pro .plan-features li::before { background: rgb(96 165 250 / 0.2); color: var(--showcase-glow); }
.tier-pro .plan-button { background: rgb(255 255 255 / 0.1); color: #cbd5e1; }
.plan-ribbon { position: absolute; top: -12px; right: 16px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--showcase-navy); background: linear-gradient(90deg, var(--showcase-glow), var(--showcase-haze)); box-shadow: 0 6px 16px -6px rgb(96 165 250 / 0.9); }

/* ── 料金ページの大見出し ── */
.plan-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.plan-hero h1 { margin: 0; font-size: 28px; font-weight: 800; }
.crown { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--showcase-glow), #6366f1); box-shadow: 0 10px 24px -8px rgb(96 165 250 / 0.9); }
.crown svg { fill: #fff; }

/* ── 月額・年額の切り替え(ラジオボタン本体は隠し、ラベルを押して切り替える) ── */
.plan-picker { display: flex; flex-direction: column; gap: 20px; }
.interval-radio { position: absolute; opacity: 0; pointer-events: none; }
.interval-toggle { align-self: center; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #e2e8f0; }
.interval-toggle label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--font-500); cursor: pointer; }
#interval-month:checked ~ .interval-toggle label[for='interval-month'],
#interval-year:checked ~ .interval-toggle label[for='interval-year'] { background: #fff; color: var(--font-900); box-shadow: 0 1px 3px rgb(15 23 42 / 0.15); }
#interval-month:focus-visible ~ .interval-toggle label[for='interval-month'],
#interval-year:focus-visible ~ .interval-toggle label[for='interval-year'] { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
#interval-month:checked ~ .plan-cards .show-year,
#interval-year:checked ~ .plan-cards .show-month { display: none; }

/* ── 単発で購入する機能 ── */
.oneoff-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.oneoff { display: flex; flex-direction: column; gap: 10px; }
.oneoff h3 { margin: 0; font-size: 17px; font-weight: 800; }
.oneoff .amount { font-size: 28px; }
.oneoff p { margin: 0; font-size: 13px; color: var(--font-600); }

@media (min-width: 640px) {
  .oneoff-cards { grid-template-columns: repeat(2, 1fr); }
  .plan-hero h1 { font-size: 34px; }
}
@media (min-width: 768px) {
  .plan-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tier-pro { animation: none; }
  .feature, .feature:hover { transition: none; transform: none; }
}