/* pmatch.jp の LP（Q1。2026-10-25 オーナーが選んだ案を仕上げた物。作りの記録 = apps/pmatch-landing/AGENTS.md）。
   書体は Noto Sans JP（SIL OFL 1.1、/assets/fonts/OFL.txt?v=1c05c68c34）を、このページで使う文字だけに絞って自前で配信する（外部から読まない） */
@font-face {
  font-family: "Noto Sans JP LP";
  src: url("/assets/fonts/noto-sans-jp-subset.woff?v=8b7d40f320") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --app-header: #18181b;
  --app-header-text: rgba(255, 255, 255, 0.85);
  --app-header-strong: #ffffff;
  --app-header-line: rgba(255, 255, 255, 0.35);
  --footer-text: rgba(255, 255, 255, 0.6);
  --wrap: 1180px;
  --beta-banner-bg: #f4f4f5;
  --beta-banner-line: #e4e4e7;

  --bg: #ffffff; --paper: #ffffff; --ink: #18181b; --text: #18181b; --text-2: #52525b; --line: #e4e4e7; --link: #2563eb;
  --display: "Noto Sans JP LP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif; --display-weight: 900; --display-feature: "palt"; --font: "Noto Sans JP LP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --button-radius: 8px; --primary: #12873d; --primary-hover: #0f7434; --on-primary: #ffffff; --focus: #2563eb;
  --hero-bg: #ffffff; --hero-text: #18181b; --hero-text-2: #52525b; --hero-line: #d4d4d8; --hero-panel: #eef0f2; --panel-radius: 24px;
  --shot-line: #d4d4d8; --phone-frame: #18181b; --shadow: rgba(24, 24, 27, 0.18); --h1-size: clamp(34px, 4.6vw, 60px); --h2-size: clamp(26px, 3vw, 38px);
  --small-bg: #ffffff; --small-text: #18181b;
  --flow-bg: #f4f4f5; --flow-text: #18181b; --flow-text-2: #52525b; --flow-rule: #18181b; --flow-line: #e4e4e7; --track: #c9e9d4; --dot: #12873d; --on-dot: #ffffff; --stage-size: 24px;
  --sync-bg: #ffffff; --sync-panel: #eef0f2; --sync-panel-text: #52525b; --grey-text: #52525b; --win-soft: #dcf2e3; --grey-soft: #f4f4f5; --card-bg: #f4f4f5;
}


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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 136px; }

body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.85; }

img { display: block; max-width: 100%; height: auto; overflow-wrap: anywhere; }

h1, h2, h3, h4 { margin: 0; word-break: auto-phrase; text-wrap: balance; }

h1, h2, .stage-name { font-family: var(--display); font-weight: var(--display-weight); font-feature-settings: var(--display-feature); }

h3, h4 { font-weight: 700; }

p { margin: 0; }

a { color: var(--link); text-underline-offset: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--app-header); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: auto; height: 24px; }
.beta { color: var(--app-header-text); font-size: 12px; line-height: 20px; padding: 0 8px; border: 1px solid var(--app-header-line); border-radius: 4px; }
.header-nav { display: flex; gap: 24px; margin-left: auto; }
.header-nav a { color: var(--app-header-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.header-nav a:hover { color: var(--app-header-strong); }

/* ボタン */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: var(--button-radius); font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color 150ms, border-color 150ms; }
.button-small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.button-primary { background: var(--primary); color: var(--on-primary); }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { background: transparent; color: var(--hero-text); border: 2px solid var(--hero-line); }
.button-secondary:hover { border-color: var(--hero-text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ヒーロー: 文の下に PC とスマホの画面 */
.hero { background: var(--hero-bg); color: var(--hero-text); padding: 72px 0 0; }
.hero-inner { display: grid; gap: 56px; }
.hero-copy { max-width: 48rem; }
.hero h1 { font-size: var(--h1-size); line-height: 1.3; }
.lead { margin-top: 24px; color: var(--hero-text-2); font-size: 17px; }

.hero-shot {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 3.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  padding: 40px 40px 0;
  background: var(--hero-panel);
  color: var(--hero-panel-text, var(--hero-text));
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

.hero-pc { border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 1px var(--shot-line); }
.hero-phone { margin-bottom: 40px; border: 6px solid var(--phone-frame); border-radius: 28px; box-shadow: 0 20px 40px var(--shadow); }

/* 少人数の大会とその場で開く大会 */
.small { background: var(--small-bg); color: var(--small-text); padding: 80px 0; }
.small-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; align-items: start; }
.small-body { display: grid; gap: 16px; font-size: 17px; }
h2 { font-size: var(--h2-size); line-height: 1.35; }

/* 大会の流れ（B-2 の表） */
.flow { background: var(--flow-bg); color: var(--flow-text); padding: 96px 0; }

.flow-head,
.stage { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr) 160px; gap: 0 48px; }

.flow-head { margin-top: 40px; padding-bottom: 12px; border-bottom: 2px solid var(--flow-rule); color: var(--flow-text-2); font-size: 14px; font-weight: 700; }

.stage { position: relative; padding: 40px 0; border-bottom: 1px solid var(--flow-line); }
.stage::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--track); }
.stage:first-child::before { top: 52px; }
.stage:last-child::before { bottom: auto; height: 52px; }

.stage-name { position: relative; padding-left: 40px; font-size: var(--stage-size); line-height: 1.4; }
.stage-name::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 20px; height: 20px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px var(--flow-bg); }

.cell h4 { font-size: 17px; line-height: 1.6; }
.cell p:not(.who) { margin-top: 8px; color: var(--flow-text-2); }
.who { display: none; }
.stage-shot { margin: 0; }
.stage-shot img { border: 4px solid var(--phone-frame); border-radius: 20px; }

.extras { margin-top: 48px; }
.extras h3 { font-size: 18px; }
.extras ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--flow-line); }
.extras li { padding: 12px 0; border-bottom: 1px solid var(--flow-line); }

/* pnote の戦績への連携 */
.sync { padding: 96px 0; background: var(--sync-bg); }
.sync-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sync-lead { margin-top: 20px; font-size: 17px; }
.sync-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; }
.sync-steps li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
.sync-steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dot); color: var(--on-dot); font-weight: 700; }
.sync-facts { margin: 28px 0 0; border-top: 1px solid var(--line); }
.sync-facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sync-facts dt { color: var(--text-2); font-size: 14px; font-weight: 700; line-height: 1.9; }
.sync-facts dd { margin: 0; }
.sync-note { margin-top: 24px; color: var(--text-2); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.badge { display: inline-flex; padding: 4px 0; }
.badge-apple img { height: 40px; width: auto; }
.badge-google img { height: 52px; width: auto; margin: -6px 0; }
.sync-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; padding: 28px; border-radius: var(--panel-radius); background: var(--sync-panel); }
.sync-shots figure { margin: 0; width: 100%; min-width: 0; }
.sync-bar img { border-radius: 12px; border: 1px solid var(--line); }
.sync-bar figcaption { margin-top: 8px; color: var(--sync-panel-text); font-size: 13px; text-align: center; }
.sync-arrow { width: 20px; height: 12px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--dot); }
.sync-example { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--ink); }
.sync-shots .sync-example-title { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--grey-text); font-size: 13px; font-weight: 700; text-align: left; }
.ex-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 16px; border-bottom: 1px solid var(--line); }
.ex-head dt { color: var(--grey-text); font-size: 12px; line-height: 1.6; }
.ex-head dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-rounds { margin: 0; padding: 0; list-style: none; }
.ex-rounds li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.ex-rounds li + li { border-top: 1px solid var(--line); }
.ex-round { font-weight: 700; }
.ex-detail { color: var(--grey-text); font-size: 13px; }
.ex-result { padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 24px; }
.ex-win { background: var(--win-soft); color: var(--ink); }
.ex-loss { background: var(--grey-soft); color: var(--grey-text); }

/* 料金 */
.price { padding: 88px 0; border-bottom: 1px solid var(--line); }
.price-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; align-items: baseline; }
.price p { font-size: 17px; }

/* 始め方 */
.start { padding: 88px 0 96px; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 32px; }
.start-card { display: flex; flex-direction: column; gap: 12px; padding: 36px; border-radius: var(--panel-radius); background: var(--card-bg); }
.start-card h3 { font-size: 24px; }
.start-card p { flex: 1; color: var(--text-2); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.text-link { color: var(--text); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; align-items: baseline; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.contact h2 { font-size: 24px; }

/* フッター */
.site-footer { background: var(--app-header); color: var(--footer-text); padding: 48px 0; font-size: 12px; line-height: 1.8; }
.footer-mark { width: auto; height: 24px; }
.footer-big { width: 100%; height: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 16px; }
.footer-nav a { color: var(--app-header-text); font-size: 14px; line-height: 40px; }
.notice { display: grid; gap: 4px; margin-top: 8px; }

@media (max-width: 1080px) {
  .flow-head { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; gap: 16px 48px; }
  .stage-name { grid-column: 1 / -1; }
  .cell { padding-left: 40px; }
  .cell-ply { padding-left: 0; }
  .who { display: block; color: var(--flow-text-2); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
}

@media (max-width: 860px) {
  .small-inner,
  .sync-inner,
  .price-inner,
  .contact { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .start-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .header-nav { display: none; }
  .header-inner { justify-content: space-between; height: 56px; }
  .brand img { height: 20px; }
  .hero { padding-top: 40px; }
  .hero-inner { gap: 40px; }
  .lead { font-size: 16px; }
  .actions .button { flex: 1 1 140px; }
  .hero-shot { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 12px; padding: 16px 16px 0; margin: 0 -16px; border-radius: 0; }
  .hero-pc { border-radius: 6px 6px 0 0; }
  .hero-phone { margin-bottom: 16px; border-width: 3px; border-radius: 14px; }
  .small,
  .flow,
  .sync { padding: 64px 0; }
  .small-body { font-size: 16px; }
  .stage { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; padding: 32px 0; }
  .stage-name { grid-column: 1 / -1; }
  .cell,
  .cell-ply { grid-column: 1; padding-left: 40px; }
  .stage-shot { grid-column: 2; grid-row: 2 / span 2; }
  .stage-shot img { border-width: 3px; border-radius: 12px; }
  .extras ul { grid-template-columns: minmax(0, 1fr); }
  .sync-shots { padding: 20px; }
  .sync-facts > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .price { padding: 64px 0; }
  .start { padding: 64px 0; }
  .start-card { padding: 28px 24px; }
  .start-card .button { flex: 1 1 160px; }
}

a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Q1 の色の上書き */
.small { border-bottom: 1px solid var(--line); }
.start-player .button-primary { background: var(--primary); }

/* 仕上げ（1 周目） */
:root { --hero-panel: #edf2ee; --sync-panel: #edf2ee; --track: #bfe3cb; }
h1 { font-weight: 900; letter-spacing: 0.01em; }
h2, .stage-name { font-weight: 700; }
h3, h4, .button, .header-nav a, .sync-facts dt, .flow-head, .who, .ex-round, .ex-head dd, .ex-result, .text-link { font-weight: 600; }
.hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.24; }
.lead { max-width: 40em; }

.hero { padding-bottom: 96px; }
.hero-shot { position: relative; display: block; padding: 48px 48px 48px; border-radius: var(--panel-radius); }
.hero-pc { width: 84%; border-radius: 12px; box-shadow: 0 0 0 1px var(--shot-line), 0 24px 48px var(--shadow); }
.hero-phone { position: absolute; right: 48px; bottom: 32px; width: 23%; margin: 0; }

.small { padding: 0 0 96px; }
.small-inner { padding-top: 0; }
.small-body { max-width: 40em; }

.flow h2,
.sync h2,
.start h2 { max-width: 20em; }

.sync-inner { align-items: start; }
.sync-shots { position: sticky; top: 96px; }

.price { padding: 80px 0; border-top: 1px solid var(--line); }
.price p { max-width: 40em; }
.contact p { max-width: 40em; }

@media (max-width: 860px) {
  .hero-pc { width: 88%; }
  .hero-phone { right: 24px; width: 26%; }
  .sync-shots { position: static; }
}

@media (max-width: 640px) {
  .hero { padding-bottom: 56px; }
  .hero-shot { margin: 0; padding: 20px 20px 40px; border-radius: 20px; }
  .hero-pc { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px var(--shot-line), 0 12px 24px var(--shadow); }
  .hero-phone { right: 12px; bottom: 12px; width: 34%; border-width: 4px; border-radius: 16px; }
  .small { padding-bottom: 64px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage-shot { grid-column: 1; grid-row: auto; width: 180px; margin-left: 40px; }
  .stage-shot img { border-width: 4px; border-radius: 18px; }
}

/* 仕上げ（2 周目）: スマホの画面が PC の画面の中身（あなたの対戦のカード）に重ならないように */
.hero-pc { width: 78%; }
.hero-phone { width: 22%; }
@media (max-width: 860px) { .hero-pc { width: 84%; } .hero-phone { width: 26%; } }
@media (max-width: 640px) { .hero-pc { width: 100%; } .hero-phone { width: 34%; } }

/* 見つからないページ */
.notfound { padding: 96px 0 120px; }
.notfound h1 { font-size: var(--h2-size); }
.notfound p { margin-top: 16px; color: var(--text-2); }

/* ヘッダーに案内の無いページ（404）は「大会を探す」を右端へ */
.brand + .button-small { margin-left: auto; }

/* ヘッダーの下のベータ版の帯（2026-10-26 オーナー「ベータ版ですってナビバーの下辺りにバナーで表示しとこ」「fixedにしといていいバナー」）。
   ヘッダーの中に置き、ヘッダーと一緒に画面の上に付ける。文はアプリのベータ版の案内と同じ */
.beta-banner { background: var(--beta-banner-bg); border-bottom: 1px solid var(--beta-banner-line); color: var(--text); font-size: 14px; line-height: 1.7; }
.beta-banner p { padding: 12px 0; word-break: auto-phrase; }
.beta-banner-label { display: inline-block; margin-right: 12px; padding: 0 8px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 22px; vertical-align: 1px; }
.beta-banner a { color: var(--link); }

@media (max-width: 640px) {
  html { scroll-padding-top: 152px; }
  .beta-banner { font-size: 13px; }
  .beta-banner p { padding: 8px 0; }
  .beta-banner-label { margin-right: 8px; }
}