/*
 * スポンサーお題の紹介ページ（/business/sponsored-challenges と言語版）の見た目。
 *
 * ── 版 A「企画書の型」（2026-10-24・BRIEF-var-a）──
 * founder「むしろ全体的に最悪なんだが」→「最初の版は残してフォークしていろんなバージョン作ってみて」。
 * 企業向けの企画書「ブランドを、ファンと共創する」（dreamcore-teams/paid-challenge/notes/deck-ref/artifact/project/slides/*.html）
 * の作りをページにした:
 *   - 1 画面に 1 つのこと（.pc-screen。PC では高さ 1 画面ぶん＝ 1 スクロールで 1 枚）
 *   - 「大きな見出し＋大きな絵 1 つ」か「白いカードの横並び（絵 → 下にラベル）」だけで組む
 *   - 絵と文の組は 1 枚の白いカード（.pc-card）に入れる（founder 2026-10-24「テキストと画像のセットがわからない。全部バラバラ」）
 *   - 色は企画書と同じ: 地 #FDFCFA・字 #1A1A1F・赤 #FF3B30・灰 #4B5563 / #9CA3AF。カードは角丸 24px と企画書と同じ薄い影
 *     （前の版の「影を付けない」は LP の型の決め。この版は founder の BRIEF で企画書どおりの影を許された）
 *   - 強調は企画書と同じ「赤い枠・影なし」（.is-key）と、見出しの中の語を赤い字にする（.mark）
 * 土台は企業向け LP の /business-lp/lp.css（頭・ボタン・FAQ の部品・赤い節・黒い足）。色の変数だけをこのページの中で企画書の色に替える。
 */

/* 企画書の色（lp.css の変数をこのページの中だけ上書きする＝頭のボタン・FAQ の Q・最後の赤い節も同じ赤になる） */
.pc-deck-page{--red:#FF3B30;--red-deep:#E0281E;--ink:#1A1A1F;--sub:#4B5563;--mute:#9CA3AF;--paper:#FDFCFA;--mist:#F7F3F1;--line:#ECE7E3;
  --card-r:24px;--card-shadow:0 8px 24px rgba(26,26,31,.08);background:var(--paper);color:var(--ink)}
body{background:#FDFCFA}
.pc-deck-page .nav{background:rgba(253,252,250,.92)}

/* 頭: スマホではメニューの節を隠し、言語のリンクだけ残す（英語の LP と同じ決め）。
   日本語の LP は English も隠すが、このページは 6 言語なので端末の言語へ行ける道を頭に残す */
.lang-switch{font-size:.82rem}
/* 区切りは 900px（前は 760px）。2026-10-24 PR #1030 レビュー: 761〜815px で es/pt のメニューのリンク 4 つ＋言語の分だけ幅が足りず、
   右の申し込みボタン（lp.css の .btn は nowrap）が画面の外へ 45px まではみ出して横スクロールが出ていた。表紙が縦に積む幅（899px）と
   同じ区切りにした。901〜1100px はリンクの間を詰める（lp.css の 28px → 18px）＝訳が少し伸びても 1 段に収まる余裕。
   ⚠️ lp.css は他の LP も読むので触らない（ここで上書きする） */
/* 管理画面へのリンク（2026-10-26）: 申し込んだ企業の戻る入口。狭い画面でも隠さない・主ボタンより控えめな文字のリンク */
.nav__links a.nav__dash{font-size:.82rem;white-space:nowrap}
@media(max-width:900px){.nav__links a:not(.lang-switch):not(.nav__dash){display:none}.nav__links{gap:14px}}
@media(min-width:901px) and (max-width:1100px){.nav__links{gap:18px}}
/* ≤420px は前は .nav__links の間を 0 にしていた（言語のリンク 1 つだけだった）。管理画面のリンクと並ぶので 10px あける */
@media(max-width:420px){.nav__in{gap:10px}.nav__links{gap:10px}}
/* ≤400px（2026-10-26 PR #1082 レビュー 2-1）: 管理画面のリンクを足したら、360px 以下で「申し込む」が画面の外へ出て横スクロールが出た
   （ja 360px で 18px・320px で 6 言語とも 10〜58px はみ出した。main は言語のリンクだけで収まっていた）。
   - 頭の言語のリンクを隠す: 足（.pc-foot-langs）に 6 言語の切り替えがあるので困らない。管理画面のリンク（戻る入口）と「申し込む」は残す
   - それでも 320px の ja は 11px 足りないので、ロゴの字・間・ボタンの横の余白を少し詰める（主ボタンの形と色は変えない）
   確かめ: test/paid-challenge-intro-dashlink.test.js が 320・360・390・1280 で 6 言語とも scrollWidth＝画面の幅を見る */
@media(max-width:400px){
  .nav__links a.lang-switch{display:none}
  .nav__in{gap:8px}.nav__links{gap:0}
  .brand{font-size:1rem;gap:8px}
  .nav .btn{padding:10px 12px}
}

/* アプリ（iOS）の中では中身を出さず、1 文だけ出す（Apple 3.1.1・PAID_CHALLENGE_NATIVE_GUARD。html.native-app は HTML の頭の script が付ける）。
   WHY ここに書くか: このページはアプリの部品の CSS（paid-challenge.css・paid-challenge-biz.css）を読まない（2026-10-23 redesign 2 回目。
   読むと body の地や字が混ざる）。.pc-host-only を消す決めは paid-challenge.css と同じ 1 行（申し込み・ダッシュボードはあちらで消す） */
.pc-intro-native{display:none;margin:32px 20px;color:var(--sub);font-weight:700;text-align:center}
html.native-app .pc-intro-native{display:block}
html.native-app .pc-host-only{display:none !important}

/* ---------- 1 画面（企画書の 1 枚） ----------
   PC（900px 以上）は高さを 1 画面ぶんにして中身を縦の真ん中に置く。上限 760px（大きな画面で 1 枚が間延びしないように。
   860px で撮ったら、中身の少ない画面（広告との違い・1 枚の画像から）の上下が空きすぎた）。
   ⚠️ 100svh だけにしない: ページ全体のスクショは画面の高さをページの高さに広げて撮るので、vh だけだと 1 枚が何千 px にもなる */
/* 2026-10-24 founder「でかすぎ。無駄スペースとりすぎ」: 1 画面ぶんの高さ（min-height: min(100svh-64px, 760px)）をやめ、
   中身の高さ＋上下の余白だけにした。中身の少ない画面（だれでも・広告との違い）の上下に数百 px の空きが出ていた */
/* 同じ日の続き（founder「PCで高解像で確認したら…１つずつのセクションがでかすぎるし、次のセクションが遠すぎる」）: 上下の余白を詰めた（前 48〜80px） */
.pc-screen{padding-block:clamp(36px,4vw,56px)}
.pc-screen__in{width:100%}
/* 文ごとの塊（titleHtml）。折り返しは文の切れ目だけ（2026-10-24 founder「改行位置を見直し」） */
.pc-sent{display:inline-block}  /* 「、」でも切る＝「ゲームを作った｜ことがない人も、」と折れない */
.pc-title{max-width:22em;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:900;line-height:1.3;letter-spacing:-.01em;word-break:auto-phrase}
.pc-title .mark,.pc-hero h1 .mark{background:none;padding:0;white-space:normal;color:var(--red)}
/* 見出しと中身の間（.pc-cards の margin:0 より強くする＝ .pc-screen__in を前に付ける） */
.pc-screen__in>.pc-title+*{margin-top:clamp(20px,2.4vw,32px)}
.pc-screen h2,.pc-screen h3,.cta h2{word-break:auto-phrase}

/* ---------- 白いカード（絵と文の 1 組） ---------- */
.pc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
/* 2026-10-24 founder「カードと背景が溶けてる」: 絵の地（--mist）とページの地（--paper）が近く、影（.08）だけでは縁が見えなかった。
   影は企画書の 1 つだけの決め（テストが見る）なので、縁に細い線を足し、薄い地の絵はカードの中に白い縁を残して入れる（下の .pc-card>.pc-mock-fig） */
.pc-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--card-r);box-shadow:var(--card-shadow)}
.pc-card>.pc-mock-fig,.pc-card>.pc-card__art--slots,.pc-options .pc-card>.pc-card__art{margin:10px 10px 0;width:auto;border-radius:calc(var(--card-r) - 8px)}
/* 強調の 1 枚（企画書の「赤い枠・影なし」）。outline は中の絵の上に描かれるので、絵の端まで赤い枠になる */
.pc-card.is-key{box-shadow:none;outline:3px solid var(--red);outline-offset:-3px}
.pc-card.is-key .pc-card__label{color:var(--red)}
/* 絵の枠: カードの上の角だけ丸める（カード自体に overflow:hidden を付けると、カードの外の矢印が切れる） */
.pc-card__art{margin:0;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--card-r) var(--card-r) 0 0;background:#fff}
.pc-card__art>img{display:block;width:100%;height:100%;object-fit:cover}
.pc-card__txt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:18px 18px 22px;text-align:center}
.pc-card__label{font-size:clamp(1rem,1.45vw,1.2rem);font-weight:900;line-height:1.4;word-break:auto-phrase}
.pc-card__sub{color:var(--sub);font-size:.86rem;font-weight:600;line-height:1.6;word-break:auto-phrase}
.pc-card__price{font-size:1.15rem;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums;line-height:1.3}
.pc-card__price small{display:block;color:var(--sub);font-size:.74rem;font-weight:700}
/* 段の番号（しくみ・流れ）: カードの左上の角に半分はみ出す赤い丸。
   前は絵の左上の内側（top/left:14px）に置いていたが、2026-10-24 mock で絵を描いた UI にしたら、絵の中の見出しや欄に重なった */
.pc-card__no{position:absolute;z-index:2;top:-12px;left:-12px;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:.95rem;display:grid;place-items:center}

/* カードとカードの間の矢印（企画書の赤い ▶）。間を広めに取って、その真ん中に置く */
.pc-cards--arrows{column-gap:clamp(28px,3.4vw,44px)}
.pc-cards--arrows>li+li::before{content:"";position:absolute;z-index:1;left:calc(clamp(28px,3.4vw,44px) / -2 - 6px);top:40%;
  border:8px solid transparent;border-left:12px solid var(--red);border-right:0}

/* スマホ: 1 列に積む（矢印は下向き）。並べる数が多い画面（4 枚・8 枚）は 2 列のまま小さく（下の各画面で上書き） */
@media(max-width:720px){
  .pc-cards{grid-template-columns:1fr;gap:20px}
  .pc-cards--arrows{row-gap:34px}
  .pc-cards--arrows>li+li::before{left:50%;top:-27px;margin-left:-8px;border:8px solid transparent;border-top:12px solid var(--red);border-bottom:0}
}

/* ---------- 1. 表紙（企画書の cover: 左に大きな見出し・右に大きな絵） ---------- */
.pc-hero{padding-block:clamp(40px,6vw,72px)}
/* 表紙も 1 画面の高さをやめた（2026-10-24 大画面で下に大きな空き・次の節が遠い）。余白は上の padding だけ */
.pc-hero__grid{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.pc-hero h1{margin:0;font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.18;letter-spacing:-.02em;word-break:auto-phrase}
.pc-hero__price{margin:28px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.pc-hero__price span{font-weight:800;color:var(--sub)}
.pc-hero__price b{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:900;color:var(--red);font-variant-numeric:tabular-nums}
.pc-hero__price small{color:var(--sub);font-weight:700;font-size:.82rem}
.pc-hero .hero__cta{margin-top:26px}
/* 表紙と最後の赤い画面のボタンは折り返してよい（2026-10-24 PR #1030 レビュー）。lp.css の .btn は white-space:nowrap で、
   es「Solicitar una campaña de juegos de fans」・pt の長いボタンが 320〜360px で 1 行のまま 366〜371px になり、
   表紙の 1 列の grid（1fr＝中身の最小の幅まで広がる）ごと押し広げて横スクロールが出ていた。訳を短くするのに頼らず CSS で守る。
   頭のメニューのボタン（.nav .btn）は短い語なので nowrap のまま */
.pc-hero .hero__cta .btn,.pc-cta .btn{white-space:normal;text-align:center;line-height:1.3;max-width:100%}
.pc-hero__art img{display:block;width:100%;height:auto;border-radius:var(--card-r);background:#fff;box-shadow:var(--card-shadow)}
/* 1 列も minmax(0,1fr)（1fr だと列が中身の最小の幅まで広がり、折れない語が 1 つあるだけで画面の外へ出る。上のボタンと同じ日の守り）。
   狭い幅の見出しの強調（.mark）は上の .pc-hero h1 .mark で white-space:normal（lp.css の nowrap を外して折り返す） */
@media(max-width:899px){.pc-hero__grid{grid-template-columns:minmax(0,1fr)}.pc-hero__art{max-width:520px}}

/* ---------- 2. だれでも（絵と見出しを 1 枚の帯に） ----------
   2026-10-24 founder「なおってねぇ。無駄スペースすぎる」: 前は見出しを左端・絵（300px）を右端に置いた 2 列で、
   間と上下（絵の高さに対して見出しが 2 行）が空いていた。1 画面の高さをやめても空きは残った。
   いまは薄い地の帯 1 枚に「絵（小）＋すぐ右に見出し」を並べ、帯の幅は中身の幅だけ（左右の空きを作らない）。
   絵の元は 514×642 なので横長に切らない（引き伸ばすとぼやける） */
.pc-band{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);width:fit-content;max-width:100%;
  background:var(--mist);border-radius:var(--card-r);padding:clamp(14px,2vw,22px) clamp(16px,3vw,40px) clamp(14px,2vw,22px) clamp(14px,2vw,22px)}
/* 1 行の帯（「絵（小）＋1 文」）。見出しは帯の中だけ少し小さくし、PC では 1 行に収める（2026-10-24 2 回目「なおってねぇ」: 
   2 列の大きな箱だと右半分が空いた）。絵は先・見出しは後（HTML の順は見出しが先なので order で入れ替える） */
.pc-screen--art .pc-art{flex:0 0 clamp(88px,10vw,150px);order:-1}
.pc-screen--art .pc-title{margin:0;max-width:none;font-size:clamp(1.25rem,2.1vw,2rem)}
.pc-band>.pc-title+*{margin-top:0}
/* スマホ: 「ゲームを作ったことがない人も、」を 1 行に収める（絵を小さく・字を少し小さく） */
@media(max-width:480px){.pc-band{gap:12px}.pc-screen--art .pc-art{flex-basis:64px}.pc-screen--art .pc-title{font-size:.96rem}}
.pc-art{margin:0}
.pc-art img{display:block;width:100%;height:auto;border-radius:calc(var(--card-r) - 8px)}

/* ---------- 3. しくみ・オプションの絵の枠 ----------
   しくみ 3 枚・流れ 6 枚・基本料金の中身 8 枚・特別バナーとメールの絵は、説明のために描いた UI（paid-challenge-mock.css・2026-10-24 mock）。
   前は実物の画面のスクショを 4:5（しくみ）・800:520（流れ）・20:11（中身）の枠に入れていた。描いた UI は 4:3 と 3:2 の画用紙に入る */
.pc-fig{margin:0;display:block;width:100%;aspect-ratio:3/2}
.pc-fig>img{display:block;width:100%;height:100%;object-fit:contain}

/* ---------- 4. 1 つのキャンペーンから（左＝キャンペーンの画像のカード・赤い枠 → 右＝種類の違うゲーム 3 枚・札はゲームの種類）→ 下にメリットの 1〜2 行 ----------
   2026-10-24 words2: 作り手の見本の名前と丸いマーク（.pc-one__who）は外した（founder「mika ってなに？」） */
.pc-one{margin:0;display:grid;grid-template-columns:minmax(0,260px) auto minmax(0,1fr);align-items:center;gap:20px clamp(20px,3vw,40px)}
.pc-card__art--sq{aspect-ratio:1}
.pc-one__src .pc-card__art img{object-fit:contain;padding:4%;box-sizing:border-box}
.pc-one__games{max-width:none}
.pc-one__benefit{margin:28px auto 0;max-width:46em;text-align:center;font-size:1.02rem;font-weight:600;line-height:1.8}
.pc-arrow{width:0;height:0;border:10px solid transparent;border-left:15px solid var(--red);border-right:0}
@media(max-width:720px){
  .pc-one{grid-template-columns:1fr;justify-items:center}
  .pc-one__src{width:62%}
  .pc-arrow{border:10px solid transparent;border-top:15px solid var(--red);border-bottom:0}
  .pc-one__games{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
  .pc-one__games .pc-card__txt{padding:10px 6px 12px}
  .pc-one__benefit{margin-top:20px;text-align:left;font-size:.94rem}
}

/* ---------- 5・6. 企画書の挿絵の列（調べる → … → もっと好きに／作った人 → 友だち → 動画を見る人） ---------- */
.pc-deck .pc-card__art{aspect-ratio:2/3}
/* 広がり: 3 枚を同じ大きさでページの幅いっぱいに並べる。
   2026-10-24 founder「画面の横幅に対して、画像配置のバランスがきれいじゃない」: 前は右ほど大きいカード（.82/.91/1fr・企画書 p.13 の
   「右にいくほど人数が増える」）を 880px の箱に左寄せしていて、右に大きな空きと段違いの上端ができていた。人数の増え方は絵の中身で見せる。
   幅いっぱいだと 2:3 の絵は縦に長すぎる（1 枚 500px 超）ので 1:1 に切る（顔と吹き出しが残るよう上寄り） */
.pc-deck--spread .pc-card__art{aspect-ratio:1}
.pc-deck--spread .pc-card__art>img{object-position:50% 30%}
@media(max-width:720px){
  /* 4 枚・3 枚とも横に並べたまま小さく（1 列に積むと 1 枚が画面いっぱいになり、4 枚で画面 4 つ分になる） */
  .pc-deck--journey{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .pc-deck--spread{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}
  .pc-deck .pc-card__txt{padding:10px 6px 12px}
  .pc-deck .pc-card__label{font-size:.88rem}
  .pc-deck>li+li::before{left:-17px;top:40%;margin-left:0;border:6px solid transparent;border-left:9px solid var(--red);border-right:0}
  .pc-deck--spread>li+li::before{left:-15px}
  .pc-deck--journey>li:nth-child(3)::before{display:none}
}

/* ---------- 7. 広告との違い（2 枚のカード: 広告＝灰・スポンサーお題＝赤い枠） ---------- */
.pc-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:20px clamp(20px,3vw,40px)}
.pc-vs .pc-arrow{align-self:center}
/* 中身が名前と 2 つの点だけなので、カードを大きく・字を大きくして 1 画面の主役にする（小さいと上下が空いた） */
.pc-vs__col{display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(24px,3.4vw,48px);border-radius:var(--card-r);background:#fff;box-shadow:var(--card-shadow)}
.pc-vs__col h3{margin:0;font-size:clamp(1.4rem,2.8vw,2.3rem);font-weight:900;line-height:1.3;word-break:auto-phrase;overflow-wrap:anywhere}  /* 2026-10-24 name: 「ファン参加型ゲームキャンペーン」が「キャン／ペーン」で折れたので文節で折る。BudouX はこの名前を 1 文節にするので content の vs.make.label に \u200b（ファン参加型｜ゲームキャンペーン）を入れてある。入らない時だけ字で折る */
/* 列の上の絵（4:3・列の幅いっぱい）。広告の側は色を落として「流れて消える」側に見せる */
.pc-vs__art{margin:0 0 clamp(14px,2vw,22px)}
.pc-vs__art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--card-r) - 8px)}
.pc-vs__col.is-ad .pc-vs__art img{filter:saturate(.45);opacity:.85}
.pc-vs__col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
/* なぜ良いのか（一人あたりの関わる時間と深さ → 深いファン）の 1 文。2 枚のカードの下に、本文より少し大きく（founder 2026-10-24） */
.pc-vs__why{max-width:46em;margin:clamp(24px,3vw,40px) auto 0;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.9;font-weight:600;text-align:center}
.pc-vs__col li{position:relative;padding-left:26px;font-size:clamp(1.02rem,1.9vw,1.45rem);font-weight:800;line-height:1.5;word-break:auto-phrase}
.pc-vs__col li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:11px;border-radius:50%;background:currentColor}
.pc-vs__col.is-ad{color:var(--mute);background:#F4F3F1;box-shadow:none}
.pc-vs__col.is-make{box-shadow:none;outline:3px solid var(--red);outline-offset:-3px}
.pc-vs__col.is-make h3{color:var(--red)}
.pc-vs__col.is-make li::before{background:var(--red)}
@media(max-width:720px){.pc-vs{grid-template-columns:1fr;justify-items:stretch}.pc-vs .pc-arrow{justify-self:center}}

/* ---------- 8. 使い方の例（4 枚・絵は LP の見本の横長） ---------- */
.pc-uses .pc-card__art{aspect-ratio:1408/768}
@media(max-width:900px){.pc-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pc-uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pc-uses .pc-card__txt{padding:12px 8px 14px}.pc-uses .pc-card__label{font-size:.9rem}}

/* ---------- 9. 料金: 基本料金 ＋ オプション ＝ 合計の例 ---------- */
.pc-unavailable{color:var(--sub);font-weight:700}
.pc-sum{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);align-items:stretch;gap:16px clamp(12px,2vw,24px)}
.pc-sum__card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:clamp(24px,3vw,40px) 20px;
  border-radius:var(--card-r);background:#fff;box-shadow:var(--card-shadow);text-align:center}
.pc-sum__card.is-key{box-shadow:none;outline:3px solid var(--red);outline-offset:-3px}
.pc-sum__label{font-size:1.05rem;font-weight:900}
.pc-sum__value{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums;word-break:auto-phrase}
.pc-sum__card.is-base .pc-sum__value,.pc-sum__card.is-key .pc-sum__value{color:var(--red)}
.pc-sum__card:not(.is-base):not(.is-key) .pc-sum__value{font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--sub)}
.pc-sum__tax{margin-top:-4px;font-size:.84rem;font-weight:800;color:var(--sub)}
.pc-sum__card small{color:var(--sub);font-size:.84rem;font-weight:700;line-height:1.5;word-break:auto-phrase}
.pc-sum__op{align-self:center;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;color:var(--red);line-height:1}
.pc-notes{margin-top:28px}
.pc-note{margin:0;color:var(--sub);font-size:.86rem;font-weight:600;line-height:1.7}
@media(max-width:820px){.pc-sum{grid-template-columns:1fr;justify-items:stretch}.pc-sum__op{justify-self:center}}

/* ---------- 10. 基本料金に入っているもの（8 枚・絵は説明のために描いた UI の 4:3 の画用紙＝ paid-challenge-mock.css） ----------
   スマホは 1 列（2026-10-24 mock）: 絵の中の字は絵の幅に合わせて縮むので、2 列（1 枚 170px ほど）だと絵の字が 8px ほどになり読めない */
@media(max-width:900px){.pc-gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pc-gets{grid-template-columns:1fr}}

/* ---------- 11. ◯本保証（3 枚。絵は◯個のマス＝ゲーム 1 本が 1 マス） ---------- */
.pc-gflow .pc-cards{max-width:960px}
.pc-card__art--slots{aspect-ratio:16/10;background:var(--mist);display:flex;align-items:center;justify-content:center}
.pc-slots{display:grid;grid-template-columns:repeat(var(--n),minmax(0,34px));gap:8px;width:78%;justify-content:center}
.pc-slots i{display:block;aspect-ratio:3/4;border-radius:7px}
.pc-slots .is-maker{background:var(--ink)}
.pc-slots .is-empty{border:2px dashed var(--mute)}
.pc-slots .is-team{background:var(--red)}
@media(max-width:720px){.pc-card__art--slots{aspect-ratio:3/1}.pc-slots{grid-template-columns:repeat(var(--n),28px)}}

/* ---------- 12. オプション（5 枚: 実物の画面か図 → 名前 → 値段 → 1 行）。PC は 3 列（3＋2） ---------- */
.pc-options .pc-card__art{aspect-ratio:3/2;background:var(--mist)}
/* 5 枚を 1 行にするのは試してやめた（2026-10-24 founder「表示崩れ」: 1 枚 200px では描いた画面と「DreamCoreユーザーへのメール」が収まらない）。3＋2 のまま */
@media(max-width:1000px){.pc-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pc-options{grid-template-columns:1fr}}

/* ---- 図（HTML）: 日のマス・札・矢印（期間延長・特別バナーの追加の日・応募と選考・インフルエンサー） ---- */
.pc-dg{display:flex;flex-direction:column;justify-content:center;padding:0 6%;box-sizing:border-box}
.pc-dg-track{display:grid;gap:7px}
.pc-dg-days{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px}
.pc-dg-day{height:26px;border-radius:5px;background:#fff}
.pc-dg-day.is-base{background:var(--red)}
.pc-dg-day.is-base-ext{background:#FFB8B3}
.pc-dg-day.is-ink{background:var(--ink)}
.pc-dg-day.is-extra{background:#FFF6CC;border:2px dashed #E5AE00}
.pc-dg-day.is-extra-on{background:#FFD500}
.pc-dg-day.is-empty{background:transparent;border:2px solid var(--line)}
.pc-dg-spans{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;margin-top:2px}
.pc-dg-span{border-top:2px solid currentColor;padding-top:6px;font-size:.74rem;font-weight:800;line-height:1.4;text-align:left;word-break:auto-phrase}
.pc-dg-span.is-base{color:var(--red)}
.pc-dg-span.is-ink{color:var(--ink)}
.pc-dg-span.is-extra{color:#A87A00}
.pc-dg-label{font-size:.74rem;font-weight:800;color:var(--sub);margin-top:4px;text-align:left}
.pc-dg-note{margin:4px 0 0;text-align:right;font-size:.74rem;font-weight:800;color:#A87A00}
.pc-dg--period .pc-dg-day{height:24px}
.pc-dg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:6px;font-size:.76rem;font-weight:800;line-height:1.4}
.pc-dg-legend span{display:inline-flex;align-items:center;gap:6px}
.pc-dg-legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:currentColor}
.pc-dg-legend .is-base{color:var(--red)}
.pc-dg-legend .is-ink{color:var(--ink)}
/* インフルエンサー: 作られたゲーム → インフルエンサーが遊んで紹介 → その人を見ている人たち。いちばん下に「ご相談」（値札なし） */
.pc-dg--inf{align-items:center}
.pc-dg-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:4px;width:100%}
.pc-dg-node{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.pc-dg-cap{font-size:.7rem;font-weight:800;line-height:1.35;word-break:auto-phrase}
.pc-dg-game{width:50px;height:auto;aspect-ratio:848/1264;object-fit:cover;border-radius:7px;border:3px solid var(--ink)}
.pc-dg-inf{display:block;width:88px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:9px}
.pc-dg-fans{display:grid;grid-template-columns:repeat(3,16px);gap:5px}
.pc-dg-fan{width:16px;height:16px;border-radius:50%;background:var(--ink);opacity:calc(1 - var(--i) * .07)}
.pc-dg-arrow{width:0;height:0;border:5px solid transparent;border-left:8px solid var(--red);border-right:0}
.pc-dg-consult{margin:12px 0 0;padding:4px 14px;border-radius:999px;background:#FFD500;font-size:.76rem;font-weight:800}

/* ---------- 13. 申し込みの流れ（6 枚・3 列×2 段。絵は説明のために描いた UI の 4:3 の画用紙） ---------- */
@media(max-width:900px){.pc-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pc-flow{grid-template-columns:1fr}}

/* ---------- 14. よくある質問（LP の .faq__item を白いカードに・枠線の代わりに企画書の薄い影） ---------- */
/* PC は 2 列（10 問を 1 列に並べると 1 画面以上の長さになった・2026-10-24「次のセクションが遠すぎる」） */
.pc-screen--faq .faq{max-width:none}
@media(min-width:900px){.pc-screen--faq .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start}.pc-screen--faq .faq__item{margin-top:0}}
.pc-screen--faq .faq__item{border:0;box-shadow:var(--card-shadow)}
/* 問いは h3 なので、字の大きさ・太さを summary に合わせる（lp.css の h3 は text-wrap:balance。問いでは 1 行目が短く折れて読みにくい） */
.faq__q h3{font:inherit;letter-spacing:0;margin:0;text-wrap:wrap;word-break:auto-phrase}
.faq__q{list-style:none}
.faq__q::-webkit-details-marker{display:none}

/* ---------- 15. 最後の申し込み（赤い 1 画面）。前の 15「運営」の段は founder 2026-10-24「いらない」で消した ---------- */
/* 最後の赤い節も 1 画面の高さをやめた（2026-10-24「無駄スペースとりすぎ」）。余白は .pc-cta の padding だけ */
.pc-cta{padding-block:clamp(44px,5vw,72px)}
.cta .pc-cta-note{margin-top:14px;font-size:.82rem;color:#FFE1DE}
.cta__mail a{text-decoration:underline;text-underline-offset:3px}

/* 社内に回す 1 枚の PDF へのリンク（2026-10-23 founder「PDF ① 今作る」）。ボタンを増やさず、小さな文字のリンク 1 行 */
.pc-pdf-link{margin-top:14px;font-size:.88rem;font-weight:700}
.pc-pdf-link a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pc-pdf-link--cta a{color:#fff}

/* 足: LP の黒い足に、ルール・ダッシュボード・言語・パンくずを小さく足す */
.pc-foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.pc-foot-langs{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.pc-foot-langs ul{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none}
.foot .pc-foot-langs a{font-weight:600;color:#b8b0ad}
.foot .pc-foot-langs a[aria-current="page"]{color:#fff;font-weight:800}
.pc-crumbs ol{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.pc-crumbs li+li::before{content:"/";margin-right:4px}
.foot .pc-crumbs a{color:#7c7471;font-weight:600}