/* ============================================================
   SPADE ティザー（`lp/index.html` の見た目）
   ⚠️★★**2026-09-07 に HTML の中から外へ出した**＝CSP の `style-src` は
      ページの中に直接書いたスタイルを止めるので、残っていると `'unsafe-inline'` を
      開けるしかなくなる。LP は JavaScript を1行も使っていないので、
      **`script-src 'none'` ＋ インライン無し**まで締められる。
   ⚠️ ここは LP。アプリ（public/assets/app.css）とはトークンを共有していない。
      色の値は rdi.jp と SPADE マークに合わせて手で揃えてある。
   ============================================================ */

/* ★ロゴの図形定義（`<defs>` だけの SVG）＝場所を取らせない。
   ⚠️ HTML の style= 属性にしない（上と同じ理由）。 */
.spritedefs{position:absolute}

/* ★領域の色。⚠️ 旧＝各 li に style="--areac:var(--teal)" と直接書いていた。 */
.areaitem.a-teal{--areac:var(--teal)}
.areaitem.a-blue{--areac:var(--blue)}
.areaitem.a-pink{--areac:var(--pink)}
.areaitem.a-yellow{--areac:var(--yellow)}
:root{
  --teal:#009ca2; --teal-dark:#007a7f; --teal-tint:#e0f5f6;
  --blue:#007bcf; --pink:#d64483; --yellow:#eab038; --red:#cf1226;
  /* ★2026-08-15 に濃くした（ユーザー指摘＝「SPADEでつくるもの」の文字が薄い）。
     アプリ（app.css）が 2026-08-11 に同じ理由で --ink60 を .88 / --ink45 を .70 へ濃くしており、
     その値に揃えた＝**LPとアプリで補足文の濃さが同じ**になる。
     実測（--panel 地）＝説明文 8.31:1 → 11.86:1 ／ 導入文 4.79:1 → 6.27:1。 */
  --ink:#1a1a18; --ink70:rgba(26,26,24,.88); --ink50:rgba(26,26,24,.70);
  --line:rgba(26,26,24,.12); --line2:rgba(26,26,24,.20);
  --bg:#fafaf8; --panel:#fbfbf9; --ivory:#f7f5ef;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  font-size:15px; line-height:1.9; letter-spacing:.02em;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
:where(h1,h2,h3){line-height:1.45; letter-spacing:.01em; margin:0}
a{color:inherit}
.wrap{width:min(1040px, calc(100vw - 40px)); margin:0 auto}

/* ---- ロックアップ（マーク＋ワードマーク）--------------------------------
   ★名刺（rdi-site/design/meishi/make-meishi.py の spade_lockup）と**同じ比率**。
     マーク高 M に対して： ワードマーク高 0.75448M ／ 間隔 0.32353M ／ 下へ 0.02M ずらす
     （flex の中央ぞろえで下げるには margin-top を倍の 0.04M にする）。
   ⚠️★マークの viewBox は **200単位**（-100 -100 200 200）。アプリ側の 270単位と混ぜないこと＝
      同じ表示サイズでもマークの詰まり方が変わり、名刺とのバランスが崩れる。
   ⚠️ ワードマークは Avenir Next Demi Bold を**アウトライン化した SVG パス**（scripts/make-wordmark.py）。
      Avenir Next は macOS 専用なので、フォント指定では Windows/Android で別の字形になる。 */
.lockup{display:inline-flex; align-items:center; gap:calc(var(--m) * .32353)}
.lockup .mk{width:var(--m); height:var(--m); flex:none; display:block}
.lockup .wm{height:calc(var(--m) * .75448); width:auto; display:block; margin-top:calc(var(--m) * .04); fill:var(--ink)}

/* ---- ヒーローの大カード ---- */
.hero{padding:clamp(28px,6vw,64px) 0 clamp(20px,4vw,36px)}
.herocard{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:clamp(28px,5vw,56px) clamp(22px,5vw,56px) clamp(30px,5vw,52px);
  box-shadow:0 18px 44px rgba(20,60,62,.07);
}
/* 設計＝方眼を仄かに（rdi.jp の .btn-concept::before と同じ考え方・同じピッチ） */
.herocard::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(0,156,162,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,156,162,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.herocard > *{position:relative; z-index:1}
/* ⚠️ inline-flex にすると、直後のロックアップ（同じく inline レベル）と**同じ行に並ぶ**。
   幅は中身ぴったりのまま、行だけ独立させる＝flex＋width:fit-content。 */
.badge{
  display:flex; width:fit-content; align-items:center; gap:8px; margin-bottom:clamp(20px,3vw,28px);
  font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--teal-dark);
  background:var(--teal-tint); border-radius:999px; padding:7px 16px;
}
.badge .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none}
/* ---- ロゴ＋縦罫＋サブ標語「選考設計クラウド」＝A4案（2026-08-16 ユーザー決定）----
   ★**ヒーローと NEXT04 の両方で使う共有部品**（2026-08-16 に一般化）。
     違うのは3つの変数だけ＝`--m`（ロゴの大きさ）／`--gap`（罫まわり）／`--subsize`（文字）。
   ⚠️ 使う側で必ず3つとも指定する（既定値は置いていない＝指定漏れに気づけるように）。
   字間 .30em はロゴタイプ（.22em）に寄せた「銘板」風。
   ★`--m` を行に置くのは、**罫の高さもロゴと同じ変数から取る**ため。
   ⚠️ 罫まわりの間隔を詰めると罫が「文字の一部」に見える（初稿18pxで実際に指摘された）。 */
.locksub{display:flex; align-items:center; gap:var(--gap)}
.locksub .hbar{width:1px; height:calc(var(--m) * .62); background:var(--line); flex:none}
.locksub .hsub{font-size:var(--subsize); font-weight:500; color:var(--ink70);
  letter-spacing:.30em; white-space:nowrap}
.locksub .hsub i{font-style:normal}
/* 狭い画面＝横に収まらないので**ロゴの下へ**。⚠️ 縦罫は縦積みでは意味を失うので消す */
@media (max-width:640px){
  .locksub{flex-direction:column; align-items:flex-start; gap:10px}
  .locksub .hbar{display:none}
  /* ★ワードマークの真下に、同じ幅で均等割り（名刺のローマ字と同じ手法）＝左右ともSPADEに揃う */
  .locksub .hsub{font-size:calc(var(--subsize) * .89); letter-spacing:0; white-space:normal;
    display:flex; justify-content:space-between;
    margin-left:calc(var(--m) * 1.32353);   /* マーク幅＋間隔ぶん字下げ＝SPADEの左端に揃う */
    width:calc(var(--m) * 4.1314)}          /* ワードマークの実測幅 */
}
.herocard .locksub{--m:clamp(46px,7.4vw,74px); --gap:30px; --subsize:18.5px}
.fullname{
  margin:clamp(20px,3vw,28px) 0 0; font-size:clamp(13px,1.6vw,15px); font-weight:600;
  letter-spacing:.04em; line-height:1.75; color:var(--teal-dark);
}
.fullname b{font-weight:700; color:var(--teal-dark)}
.tagline{
  margin:clamp(22px,3.4vw,32px) 0 0; font-weight:900;
  font-size:clamp(26px,4.6vw,44px); line-height:1.42; letter-spacing:.01em;
}
.tagline .teal{color:var(--teal)}
/* ⚠️ 和文は文字単位で折れる＝狭い画面で「で。」だけが行に落ちた（実測）。
   語のかたまりを nowrap にして、折る位置を読点のあとに固定する。
   ⚠️ かたまりが画面より広いと今度ははみ出す。最長「選考の設計を、」は最小文字サイズ26pxで
      約182px＝320px幅のカード内側（約236px）に収まることを確認済み。 */
.nb{display:inline-block; white-space:nowrap}   /* ★ヒーローの見出しと NEXT04 の標語の両方で使う */
.herolead{margin:clamp(16px,2.4vw,22px) 0 0; font-size:clamp(15px,1.8vw,17px); line-height:2.05; color:var(--ink70)}
.herolead b{color:var(--ink); font-weight:700}

/* ---- SPADE でつくるもの（4つの領域＝初回リリースの範囲）------------------------------------
   ★アプリのホーム（`public/assets/ui/design.js` の `AREAS`）と**同じ語・同じ文・同じ色**。
   ⚠️ 並びと色は変えない（ロゴの時計回りと揃えた決定＝paid-services-plan.md §14-8）。
   ⚠️ アプリ側の文言を直したら、ここも直す（LPは別リポではないが別ファイル＝自動では追随しない）。 */
.areabox{margin:clamp(26px,4vw,38px) 0 0; padding:clamp(20px,3vw,26px) clamp(18px,3vw,28px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px}
.areabox h2{font-size:clamp(17px,2.1vw,19px); font-weight:800}
/* ⚠️★ここは「読ませる導入文」なので --ink50（注記用）を使わない（2026-08-15 ユーザー指摘）。
   各領域の説明文と同じ濃さ（--ink70）にそろえる。実測 6.27:1 → 11.86:1。 */
.areabox .note{margin:8px 0 0; font-size:14.5px; line-height:1.9; color:var(--ink70)}
.arealist{list-style:none; margin:clamp(14px,2vw,18px) 0 0; padding:0; display:grid; gap:18px}
.areaitem{min-width:0}
.arealabel{display:flex; align-items:center; gap:9px; font-size:clamp(16px,1.9vw,17.5px); font-weight:700}
/* ♠はタイトルの左に置くだけ（説明文は左端から始める＝アプリのホームと同じ作法） */
.spmk{width:17px; height:19px; flex:none; fill:var(--areac); display:block}
.areanote{display:block; margin-top:3px; font-size:15px; line-height:1.9; color:var(--ink70)}
/* ★「実際に作るもの」＝アプリの左メニューの項目名をそのまま並べる（2026-08-15 ユーザー指摘）。
   説明文だけだと抽象的で、何を作る道具なのかが伝わらなかった。
   ⚠️ 語は `public/index.html` の左ナビが正。準備中のものも含めて**全部**出す
      （LP全体が「公開準備中」なので、完成形の姿を見せるのが正しい）。 */
.areawhat{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.areawhat span{font-size:13.5px; font-weight:500; line-height:1.6; color:var(--ink);
  background:#fff; border:1px solid var(--line2); border-radius:999px; padding:5px 13px}
/* 枠の外の注記。★本文より一段下げるが、**薄くしすぎない**（読ませる前提の断り書き） */
.areacaution{margin:12px 2px 0; font-size:13px; line-height:1.85; color:var(--ink50)}

/* ---- 共通の見出し ---- */
.sec{padding:clamp(40px,6vw,72px) 0 0}
.sechead{margin-bottom:clamp(22px,3vw,32px)}
.sechead .en{display:block; font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.16em; color:var(--teal-dark); margin-bottom:10px}
.sechead h2{font-weight:800; font-size:clamp(21px,3vw,30px)}
.sechead h2 .teal{color:var(--teal)}
.sechead p{margin:12px 0 0; font-size:15px; line-height:2; color:var(--ink70)}

/* ---- 3ステップのジャーニー（rdi.jp/tools/self-design/ と同じ型）--------
   ★左に大きな番号、右に本文カード。番号の列を縦線でつないで「順路」を見せる。
   ⚠️ 参考ページの構造・文言をそのまま踏襲している＝来訪者が行き来しても迷わないため。 */
.journey{display:grid; gap:0}
.jstep{position:relative; display:grid; grid-template-columns:88px 1fr; gap:26px; align-items:start; padding-bottom:44px}
/* ステップ間をつなぐ縦線（番号の中心を通す） */
.jstep:not(:last-child)::before{content:""; position:absolute; left:43px; top:78px; bottom:-6px;
  width:2px; background:linear-gradient(var(--teal),rgba(0,156,162,.18))}
.jnum{width:86px; height:86px; flex:none; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--teal-tint); border:2px solid var(--teal); position:relative; z-index:1}
.jnum .en{font:700 10px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--teal-dark)}
.jnum .no{font:900 34px ui-monospace,Menlo,monospace; line-height:1; color:var(--teal)}

.jcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 28px;
  box-shadow:0 10px 26px rgba(20,60,62,.06); text-decoration:none; display:block;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease}
@media (hover:hover){ .jcard:hover{border-color:var(--teal); box-shadow:0 14px 32px rgba(20,60,62,.12)} }
.jcard .cat{display:inline-block; font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--teal); margin-bottom:8px}
.jcard h3{font-weight:700; font-size:clamp(19px,2.3vw,23px); line-height:1.4; margin-bottom:6px}
.jcard .role{font-weight:700; font-size:15px; color:var(--teal-dark); margin-bottom:14px}
.jcard .desc{font-size:16px; line-height:1.95; color:var(--ink70)}
.jcols{display:grid; grid-template-columns:1fr minmax(250px,330px); gap:28px; align-items:start; margin-top:20px}
.jleft{min-width:0}
.gain-lb{display:inline-block; margin-bottom:9px; font-size:11.5px; font-weight:800; letter-spacing:.04em;
  color:var(--teal-dark); background:var(--teal-tint); border-radius:6px; padding:4px 10px; line-height:1.5}
.gain-box{background:var(--ivory); border-radius:10px; padding:14px 16px; font-size:14.5px; line-height:1.85; color:var(--ink70)}
.jshot{min-width:0}
.jshot img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(20,60,62,.10)}
.go{margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:700;
  color:var(--teal-dark); border:1px solid var(--teal); border-radius:10px; padding:12px 24px; background:#fff}
.go span{transition:transform .15s}
@media (hover:hover){ .jcard:hover .go span{transform:translateX(3px)} }

/* この先＝SPADE（準備中） */
.jstep.next .jnum{background:#fff; border-style:dashed; border-color:var(--line2)}
.jstep.next .jnum .no, .jstep.next .jnum .en{color:var(--ink50)}
/* ⚠️ 余白は広めに取る（2026-08-16 ユーザー指定＝縦に伸びてよい）。 */
.jnext{background:linear-gradient(180deg,#f3f8f8,#fff); border:1px dashed rgba(0,156,162,.42);
  border-radius:16px; padding:clamp(30px,3.6vw,42px)}
/* ⚠️★2度目。**inline レベルの要素を続けて置くと同じ行に並ぶ**（バッジのときと同じ形）。
   直後がロックアップ（inline-flex）なので、ここは行を分ける。 */
.jnext .cat{display:block; width:fit-content; font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--ink50); margin-bottom:16px}
/* ★「公開準備中」は**ロゴの上**（2026-08-16 ユーザー指定）。ヒーローと同じ並び順にそろう。 */
.badge.sm{font-size:11.5px; padding:5px 12px; margin-bottom:18px}
.jnext .locksub{--m:38px; --gap:20px; --subsize:15px; margin-bottom:28px}
.jnext h3{font-weight:700; font-size:clamp(19px,2.3vw,23px); line-height:1.4; margin-bottom:20px}
.jnext h3 .teal{color:var(--teal)}
.steps-more{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
.steps-more span{font-size:13.5px; color:var(--ink70); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px}
.jnext .note{font-size:14.5px; line-height:1.95; color:var(--ink70); margin:0 0 28px}
.jnext .note b{color:var(--teal-dark)}

/* ---- RDI への導線 ---- */
.rdi{
  margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,3.4vw,30px); display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center;
}
.rdi .body{flex:1 1 320px; min-width:0}
.rdi h3{font-size:17px; font-weight:800}
.rdi p{margin:8px 0 0; font-size:14px; line-height:1.95; color:var(--ink70)}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.02em;
  border-radius:10px; padding:13px 24px; text-decoration:none; border:1px solid var(--teal);
  white-space:nowrap;
}
.btn.solid{background:var(--teal); color:#fff}
.btn.line{background:#fff; color:var(--teal-dark)}
@media (hover:hover){
  .btn.solid:hover{background:var(--teal-dark)}
  .btn.line:hover{background:var(--teal-tint)}
}

/* ---- フッター ---- */
footer{margin-top:clamp(44px,6vw,72px); padding:30px 0 44px; border-top:1px solid var(--line)}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; justify-content:space-between}
footer .cp{font-size:12.5px; color:var(--ink50)}
.operator{font-size:13px; font-weight:600; color:var(--teal-dark); text-decoration:none}
@media (hover:hover){ .operator:hover{text-decoration:underline} }

/* ---- 狭い画面（詰めるのではなく、積み方を変える）---- */
@media (max-width:900px){
  .arealist{gap:16px}
}
@media (max-width:760px){
  .jcols{grid-template-columns:1fr; gap:20px}
}
/* 640px＝番号の列と縦線が横幅を食うので、番号を横長バッジにしてカードの上へ置く。
   ステップの連なりは、カードとカードの間の矢羽根で示す（参考ページと同じ手当て）。 */
@media (max-width:640px){
  .jstep{grid-template-columns:minmax(0,1fr); gap:11px; padding-bottom:40px}
  .jnum{width:auto; height:auto; justify-self:start; flex-direction:row; align-items:baseline;
    gap:9px; border-radius:999px; padding:7px 17px 7px 14px}
  .jnum .en{font-size:10px}
  .jnum .no{font-size:17px}
  .jstep:not(:last-child)::before{left:50%; right:auto; top:auto; bottom:13px;
    width:11px; height:11px; background:none;
    border-right:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal);
    border-radius:2px; opacity:.5; transform:translateX(-50%) rotate(45deg)}
  .jcard{padding:22px 18px}
  .jnext{padding:clamp(24px,5vw,30px) 20px}
}
@media (max-width:560px){
  .rdi .btns{width:100%}
  .rdi .btn{flex:1 1 100%}
  .go{width:100%; justify-content:center}
}