@charset "utf-8";

/* ==========================================================================
   YONPAR LP 第1段
   設計: docs/superpowers/specs/2026-09-07-LP第1段-design.md
   方向B「現場のドキュメント」= ゴシック＋罫線・情報密度高め
   ========================================================================== */

:root{
  /* --- 面と罫 ------------------------------------------------------------ */
  --bg:#FFFFFF;
  --fill:#F5F5F7;          /* 面（パネル・凡例・サンプル） */
  --line:#DCDCE0;          /* 罫 */
  --line-strong:#B4B4BC;   /* 枠線が主役のとき */

  /* --- 文字 -------------------------------------------------------------- */
  --ink:#111114;           /* 本文（白地 18.85） */
  --sub:#54545C;           /* 補助テキスト（白地 7.50 / 面 6.89） */

  /* --- ダーク帯（募集セクション） ---------------------------------------- */
  --dark:#111114;
  --dark-line:#37373E;
  --on-dark:#D8D6DB;       /* ダーク地 12.15 */
  --on-dark-accent:#F5A8CE;/* ダーク地 9.75 */

  /* --- マゼンタ ----------------------------------------------------------
     §6.1 面と文字でトークンを分ける。
     --magenta を文字に使わないこと（白地4.56だが、わずかに暗い地で4.5を割る）。 */
  --magenta:#E4007F;       /* 面のみ。白文字を乗せて 4.56 */
  --magenta-ink:#B0006B;   /* 文字。白地 6.87 / soft 5.96 */
  --magenta-soft:#FDEAF3;  /* 淡い地 */

  /* --- 書体 -------------------------------------------------------------- */
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',
         'Noto Sans JP',sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* --- フォント段（10段。半端値・単発値を足さない） ---------------------- */
  --fs-11:11px;  /* ラベル・バッジ・チップ */
  --fs-12:12px;  /* 最小の注記 */
  --fs-13:13px;  /* 補助本文・カード本文 */
  --fs-14:14px;  /* 本文（body 基準） */
  --fs-15:15px;  /* リード文 */
  --fs-17:17px;  /* h3 */
  --fs-19:19px;  /* ロゴ・大きめ h3 */
  --fs-24:24px;  /* スマホの h1 / h2 */
  --fs-30:30px;  /* セクション見出し h2 */
  --fs-46:46px;  /* ヒーロー h1 */

  /* --- 余白 -------------------------------------------------------------- */
  --pad-x:56px;
  --pad-y:60px;
  --label-w:180px;
}

/* 角丸は使わない（罫線で構造を示す方向Bのため） */

/* ==========================================================================
   基本
   ========================================================================== */

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-14);   /* 基準を明示する（暗黙の16pxを作らない） */
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:900; line-height:1.45; letter-spacing:-.01em; }
h2{ font-size:var(--fs-30); }
h3{ font-size:var(--fs-17); }
.h3--lg{ font-size:var(--fs-19); }
p{ margin:0; text-wrap:pretty; }

a{ color:var(--magenta-ink); text-underline-offset:3px; }
a:hover{ color:var(--magenta); }

strong{ font-weight:700; }

/* 共通のテキスト段 */
.lead{ font-size:var(--fs-15); line-height:2; color:var(--sub); max-width:42em; }
.s{ font-size:var(--fs-13); line-height:1.95; color:var(--sub); }
.xs{ font-size:var(--fs-12); line-height:1.95; color:var(--sub); }
.wide{ max-width:42em; }

.lbl{
  font-family:var(--mono); font-size:var(--fs-11);
  letter-spacing:.1em; color:var(--sub);
}
.lbl--accent{ color:var(--magenta-ink); }
.lbl--on-dark{ color:var(--on-dark-accent); }

.logo{ font-weight:900; font-size:var(--fs-19); letter-spacing:.16em; }

.num{ font-family:var(--mono); font-weight:500; }

/* アイコン（線画・currentColor を継ぐ） */
.ic{
  width:15px; height:15px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic--lg{ width:22px; height:22px; stroke-width:1.7; }
.ic--accent{ color:var(--magenta-ink); }
.ic--ink{ color:var(--ink); }

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad-x);
  border-bottom:1px solid var(--ink);
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */

.hero{ display:flex; border-bottom:1px solid var(--ink); }

.hero__body{
  flex:1.3; padding:64px var(--pad-x);
  border-right:1px solid var(--line);
  min-width:0;
}
.hero__title{ font-size:var(--fs-46); margin-bottom:28px; }
.hero__body .lead{ max-width:32em; margin-bottom:36px; }

.hero__panel{ flex:1; background:var(--fill); min-width:0; }
.panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--line);
}
.panel__body{ padding:22px 28px; }
.panel__foot{
  display:flex; gap:8px; padding:16px 28px;
  border-top:1px solid var(--line);
}

/* キーと値の行 */
.kv{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.kv--last,.kv:last-child{ border-bottom:0; }
.kv__k{ font-size:var(--fs-13); color:var(--sub); flex-shrink:0; }
.kv__v{ font-size:var(--fs-13); font-weight:700; text-align:right; }
.kv__v--accent{ color:var(--magenta-ink); }
.kv--sm{ padding:4px 0; border-bottom:0; }
.kv--sm .kv__k,.kv--sm .kv__v{ font-size:var(--fs-12); }

.code{
  font-family:var(--mono); font-weight:500; font-size:var(--fs-13);
  background:var(--magenta-soft); color:var(--magenta-ink); padding:2px 9px;
}
.kv--sm .code{ font-size:var(--fs-12); padding:1px 8px; }

.chip{
  font-family:var(--mono); font-size:var(--fs-11); letter-spacing:.1em;
  color:var(--sub); border:1px solid var(--line-strong); padding:3px 11px;
}

/* ==========================================================================
   セクションの骨格（左に番号ラベル列 ── 方向Bの個性）
   ========================================================================== */

.sec{
  display:flex; gap:0;
  padding:var(--pad-y) var(--pad-x);
  border-bottom:1px solid var(--line);
}
.sec--fill{ background:var(--fill); }
.sec--dark{ background:var(--dark); color:#fff; border-bottom:0; }
.sec--foot{ border-bottom:0; border-top:1px solid var(--ink); padding:52px var(--pad-x) 60px; }

.sec__label{ width:var(--label-w); flex-shrink:0; }
.sec__name{
  display:block; margin-top:6px;
  font-size:var(--fs-13); font-weight:700; line-height:1.6;
}
.sec--dark .sec__name{ color:#fff; }

.sec__body{ flex:1; min-width:0; }
.sec__body h2{ margin-bottom:16px; }
.sec__body h2 + .lead,
.sec__body h2 + .s{ margin-bottom:32px; }
.sec--dark h2{ color:#fff; }
.sec--dark .lead{ color:var(--on-dark); margin-bottom:40px; }

/* ==========================================================================
   罫で区切ったグリッド
   ========================================================================== */

.grid{ display:grid; }
.grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.ruled{ gap:1px; background:var(--line); border:1px solid var(--line); }
.ruled .cell{ background:var(--bg); padding:28px 26px; }

.cell .lbl{ display:block; margin-bottom:12px; }
.cell h3{ margin-bottom:12px; }
.cell__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }

.cell--link{ text-decoration:none; color:var(--ink); display:block; }
.cell--link:hover{ background:var(--fill); color:var(--ink); }
.cell--link h3{ color:var(--ink); }
.cell--link .s{ margin-bottom:18px; }

.more{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-13); font-weight:700; color:var(--magenta-ink);
}

/* ==========================================================================
   3ステップ（楔）
   ========================================================================== */

.steps{ border:1px solid var(--line); background:var(--bg); }
.step{
  display:flex; gap:28px; align-items:flex-start;
  padding:26px 28px; border-bottom:1px solid var(--line);
}
.step:last-child{ border-bottom:0; }
.step__head{
  display:flex; align-items:center; gap:12px;
  width:120px; flex-shrink:0; color:var(--magenta-ink);
}
.step__head h3{ color:var(--ink); }
.step__text{ flex:1; font-size:var(--fs-14); line-height:1.95; color:var(--sub); min-width:0; }
.step__sample{
  width:230px; flex-shrink:0;
  background:var(--fill); padding:12px 14px;
  font-size:var(--fs-12); line-height:1.8;
}
.step__sample--plain{ background:none; padding:0; display:flex; gap:8px; }

/* ==========================================================================
   凡例と機能表
   ========================================================================== */

.legend{
  display:flex; gap:28px; flex-wrap:wrap;
  padding:18px 22px; background:var(--fill); margin-bottom:28px;
}
.legend__item{ display:flex; gap:10px; align-items:baseline; }
.legend__text{ font-size:var(--fs-12); color:var(--sub); }

.badge{
  display:inline-block; white-space:nowrap;
  font-size:var(--fs-11); font-weight:700; letter-spacing:.06em;
  padding:3px 10px;
}
.badge--dev{ color:#fff; background:var(--magenta); }
.badge--demo{ color:var(--ink); border:1px solid var(--line-strong); }

.features{ width:100%; border-collapse:collapse; }
.features tr{ border-top:1px solid var(--line); }
.features__top{ border-top:1px solid var(--ink); }
.features__last{ border-bottom:1px solid var(--ink); }
.features th{
  text-align:left; font-weight:400; font-size:var(--fs-14);
  padding:15px 12px 15px 0; line-height:1.7;
}
.features__top th{ font-weight:700; }
.features td{ text-align:right; width:100px; padding:15px 0; vertical-align:middle; }

/* ==========================================================================
   注記（マゼンタの淡地）
   ========================================================================== */

.notice{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--magenta-soft); padding:18px 22px;
  max-width:56em; margin-top:28px;
}
.notice p{ font-size:var(--fs-13); line-height:1.95; color:var(--magenta-ink); }

/* ==========================================================================
   募集の条件（ダーク帯）
   ========================================================================== */

.terms{ margin:0; }
.terms__row{
  display:flex; gap:40px;
  padding:22px 0; border-top:1px solid var(--dark-line);
}
.terms__row:last-child{ border-bottom:1px solid var(--dark-line); }
.terms dt{
  width:13em; flex-shrink:0;
  font-size:var(--fs-14); font-weight:700; color:#fff;
}
.terms dd{
  margin:0; font-size:var(--fs-14); line-height:1.95; color:var(--on-dark);
}

/* ==========================================================================
   ボタン（タップ領域 48px 以上）
   ========================================================================== */

.btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }
.hero .btn-row{ margin-top:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:15px 26px;
  font-size:var(--fs-14); font-weight:700; text-decoration:none;
  border:1px solid transparent;
}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:#2C2C33; color:#fff; }
.btn--magenta{ background:var(--magenta); color:#fff; }
.btn--magenta:hover{ background:var(--magenta-ink); color:#fff; }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); font-weight:500; }
.btn--ghost:hover{ background:var(--fill); color:var(--ink); }

/* ==========================================================================
   フッター
   ========================================================================== */

.foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; flex-wrap:wrap;
}
.foot .logo{ margin-bottom:16px; }
.foot__right{ text-align:right; }
/* 唯一の連絡手段なので当たり判定を44px以上にする。
   見た目（行の高さ）は変えたくないので、擬似要素で広げる。 */
.mail{ font-size:var(--fs-15); font-weight:700; position:relative; display:inline-block; }
.mail::before{ content:''; position:absolute; inset:-12px -6px; }

/* ==========================================================================
   タブレット以下 ── ラベル列を上に畳む
   ========================================================================== */

@media (max-width:900px){
  :root{ --pad-x:24px; --pad-y:44px; }

  .sec{ flex-direction:column; gap:20px; }
  .sec__label{ width:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .sec__name{ margin-top:0; }
  .sec__name br{ display:none; }
  
  .hero{ flex-direction:column; }
  .hero__body{ padding:40px var(--pad-x); border-right:0; border-bottom:1px solid var(--line); }
  .hero__body .lead{ max-width:none; }
  .panel__head,.panel__foot{ padding:16px var(--pad-x); }
  .panel__body{ padding:20px var(--pad-x); }

  .grid--2,.grid--3{ grid-template-columns:1fr; }

  .step{ flex-direction:column; gap:12px; padding:22px 20px; }
  .step__head,.step__sample{ width:auto; }
  .step__sample{ align-self:stretch; }

  .terms__row{ flex-direction:column; gap:4px; }
  .terms dt{ width:auto; }

  .legend{ gap:12px; flex-direction:column; }

  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }

  .foot{ flex-direction:column; align-items:flex-start; gap:24px; }
  .foot__right{ text-align:left; }
}

/* ==========================================================================
   スマートフォン
   ========================================================================== */

@media (max-width:600px){
  .site-header{ padding:16px var(--pad-x); }
  .hero__title{ font-size:var(--fs-24); }
  h2{ font-size:var(--fs-24); }
  .features th{ font-size:var(--fs-13); padding-right:10px; }
  .features td{ width:82px; }
  .notice{ padding:16px 18px; }
  .ruled .cell{ padding:22px 20px; }
}