/*
  neighbor の会社 HP の見た目（2026-11-06）

  手本: neighbor 名義の企画書（/Users/admin/dreamcore-teams/paid-challenge/neighbor-deck/slides/assets/deck.css）。
  同じ色・同じ器にして、企画書を見た人が HP を開いても同じ会社に見えるようにする。
  - 黄色 #FCC400 は会社概要の地の色を測った値（企画書と同じ）
  - 字そのものを絵にする。1 つの節でいちばん大きい字は 1 つだけ（見出し）→ 本文へ一方向に読ませる
  - 白い角丸の板 = 中身の置き場。黒い地の節 = ページの中で一番重い話（強み・相談）
  - 写真・挿絵・グラデーション・影は使わない（字と色の面だけで組む）
*/

:root {
  --y: #FCC400;   /* neighbor の黄色 */
  --k: #111111;   /* 黒。真っ黒より少し柔らかく */
  --w: #FFFFFF;
  --g: #666666;   /* 控えめな字（11/6 に地を白にしたので灰色に） */
  --paper: #F4F4F1; /* 白い地の上の板の色（白の上に白い板だと境目が見えないため、ごく薄い灰色） */
  --line: #EDEDED;
  --r: 28px;      /* 白い板の角丸（企画書と同じ） */
  --gut: clamp(16px, 5vw, 64px);  /* 左右の余白。スマホ 16px〜PC 64px */
  --maxw: 1200px;
  /* ヒラギノ（Mac/iPhone）を先に、無い端末は Noto Sans JP（Google Fonts）。企画書と同じ字の太さで見せる */
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  /* 2026-11-06 地を黄色から白へ（founder「真っ黄色すぎて目が疲れる。白地がいいよ。」「黄色はうまくアクセントで使って。」）。
     黄色は目印だけ: 札・吹き出し・黒い板の上の大きな字・番号・リンクの下線 */
  background: var(--w);
  color: var(--k);
  font-family: var(--font);
  font-feature-settings: "palt";  /* 字の間を詰め、太い見出しを 1 つの塊に見せる */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--y); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* 見出しは言葉の切れ目で折り返す（「知ってい/る」のように 1 字だけ落ちるのを防ぐ。Chrome 119+。他のブラウザは従来どおり） */
.h2, .h3, .lead, .trend-title, .work-title { word-break: auto-phrase; }

/* ---- 太さの段（見出し 900・言いたいこと 700・補足 500） ---- */
.h2 {
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 0;
  font-size: clamp(32px, 8.4vw, 112px);
}
.h3 { font-weight: 900; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
.lead { font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; margin: 0 0 14px; letter-spacing: -0.01em; }
.body { font-weight: 700; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.85; margin: 0; }
.fine { font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--g); margin: 18px 0 0; }

/* 左上の小さなラベル（何の話かを先に言う）。黒い帯に黄色の字（企画書と同じ） */
.label {
  display: inline-block; margin: 0;
  background: var(--y); color: var(--k);
  font-weight: 900; font-size: 14px; letter-spacing: 0.04em;
  padding: 6px 14px; border-radius: 6px;
}
.label-y { background: var(--y); color: var(--k); }  /* 黒い地の節でも同じ黄色の札 */

.panel { background: var(--paper); border-radius: var(--r); }

/* ---- 上の帯 ---- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* 左右の余白を中身と同じにして、ロゴの左端を中身の左の線にそろえる（前は画面の端から 64px で、広い画面だとずれた） */
  padding: 14px max(var(--gut), calc((100vw - var(--maxw)) / 2));
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #ECECEC;
}
.top-logo img { width: clamp(118px, 13vw, 168px); }
.top-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-weight: 900; font-size: 15px; }
.top-nav a { text-decoration: none; }
.top-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.top-cta { background: var(--k); color: var(--y); padding: 9px 18px; border-radius: 999px; }
.top-cta:hover { text-decoration: none !important; background: var(--y); color: var(--k); }
/* スマホでは「相談する」だけ残す（4 つ並べると字が詰まって読めない） */
@media (max-width: 760px) { .top-nav a:not(.top-cta) { display: none; } }

/* ---- 1. 一番上: 字を積んだ絵 ----
   2026-11-06 組み直し（founder「右下の白いところが何でこの位置なんだろう。バランスがわるい。」）。
   決まり: 左の線は 1 本（ロゴ・札・縁取りの字・黒い帯・言葉・3 つの芯がすべて同じ x から始まる）。
   右の線も 1 本（黒い帯と 3 つの芯の右端＝中身の幅いっぱい）。白い板を右に浮かせる組みはやめた。 */
.hero { padding: clamp(24px, 4vw, 48px) var(--gut) clamp(56px, 8vw, 104px); max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; }
.hero-type {
  margin: 22px 0 0; font-weight: 900; letter-spacing: -0.04em; line-height: 1.02;
  /* 「ゲーム作ってみた。」の黒い帯が中身の幅いっぱい（右の線）に届く大きさ。
     中身の幅 = 画面の幅から左右の余白を引いた幅（最大 --maxw）。9.1 = 9 字（字間を詰めて約 8.65 字分）＋帯の内側の余白。これより小さくすると帯からはみ出す */
  font-size: calc(min(100vw - 2 * var(--gut), var(--maxw)) / 9.1);
  white-space: nowrap;
}
.hero-type span { display: block; }
.outline { color: transparent; -webkit-text-stroke: clamp(1.5px, 0.22vw, 3px) var(--k); }
/* 一番上の「歌ってみた。踊ってみた。」は縁取りをやめて、塗りつぶした灰色にする（2026-11-06 founder「読みづらい」）。
   白地にしてから細い縁取りだけになり、「歌」「踊」のような画数の多い字の線がつぶれて読めなかった。
   灰色 = もう知っている物（控えめ）、黒い帯の白い字 = これから（強い）。強弱はそのまま残す。
   #B5B5B5 = 白地の上でつぶれずに読め、黒い帯より一段弱く見える濃さ（試した中で #CFCFCF は薄すぎ、#999 は帯と張り合った） */
.hero-type .outline { color: #B5B5B5; -webkit-text-stroke: 0; }
/* 黒い帯は左の線から始める（前は margin-left をマイナスにして線より外へはみ出していた） */
.solid {
  display: block !important; margin-top: 0.08em;
  background: var(--k); color: var(--w);
  padding: 0.04em 0.12em 0.1em; border-radius: 0.12em;
}
/* 帯の下: 言葉を白い吹き出しにして、「ゲーム作ってみた。」がしゃべっている形にする（founder 11/6「吹き出しみたいにするとか形も工夫していいかも。」）。
   吹き出しの左端は左の線にそろえ、しっぽは黒い帯の方（上）へ向ける。説明は右の列で、右端は右の線にそろう。 */
.hero-foot {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 64px); align-items: center;
  margin-top: clamp(30px, 3.6vw, 44px);
}
.hero-say {
  position: relative; margin: 0; background: var(--y); border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 30px) clamp(24px, 3vw, 40px);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.18; font-size: clamp(26px, 3.4vw, 46px); word-break: auto-phrase;
}
/* しっぽ: 吹き出しの上の辺から、黒い帯の「ゲ」のあたりへ斜めに伸ばす */
.hero-say::before {
  content: ""; position: absolute; left: clamp(28px, 4vw, 64px); top: calc(-1 * clamp(22px, 2.6vw, 34px));
  width: clamp(30px, 3.4vw, 48px); height: clamp(24px, 2.8vw, 36px);
  background: var(--y); clip-path: polygon(0 100%, 18% 0, 100% 100%);
}
.hero-body { margin: 0; max-width: 34em; justify-self: end; }
@media (max-width: 760px) {
  .hero-foot { grid-template-columns: 1fr; gap: 18px; }
  .hero-say { justify-self: start; }
  .hero-body { justify-self: start; }
}

/* ---- 節の共通 ---- */
.sec { padding: clamp(64px, 9vw, 120px) var(--gut); max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; }
.sec-lead { max-width: 640px; margin-top: 22px; }
.sec-dark { max-width: none; background: var(--k); color: var(--w); }
.sec-dark > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec-dark > .label { display: table; margin-left: max(0px, calc((100% - var(--maxw)) / 2)); }
.sec-dark .h2 { color: var(--y); }

/* ---- 2. X で広がる WEB ゲーム（他の人の作品） ---- */
.trend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.trend-card { padding: 26px 26px 28px; }
.trend-num { font-weight: 900; font-size: clamp(44px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.trend-num small, .work-num small { font-size: 0.32em; letter-spacing: 0; margin-left: 4px; }
.trend-title { font-weight: 900; font-size: 19px; margin: 16px 0 6px; }
.trend-note { font-weight: 700; font-size: 14px; line-height: 1.7; margin: 0; color: #333; }

/* ---- 3. できること ---- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.svc { padding: clamp(24px, 3vw, 36px); }
.svc-no { font-weight: 900; font-size: 15px; margin: 0 0 18px; display: inline-block; border-bottom: 3px solid var(--k); }
/* 1 つ目（ゲーム作ってみた）は MTG の決めの主役なので、横いっぱいの黒い板にする */
.svc:first-child { grid-column: 1 / -1; background: var(--k); color: var(--w); }
.svc:first-child .h3 { color: var(--y); font-size: clamp(24px, 3vw, 36px); }
.svc:first-child .svc-no { border-color: var(--y); color: var(--y); }
.svc:first-child .body { max-width: 760px; }

/* ---- 4. 強み（黒い地） ---- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 48px; }
.why-item { border-top: 3px solid var(--y); padding-top: 20px; }
.why-no { font-weight: 900; font-size: 64px; line-height: 1; margin: 0 0 14px; color: var(--y); }
.why-item .h3 { color: var(--w); }
.why-item .body { color: #E6E6E6; }
.why-link { margin: 16px 0 0; font-weight: 900; }
.why-link a { color: var(--y); text-underline-offset: 4px; }

/* ---- 5. 実績 ---- */
.works { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.work { padding: 26px 26px 24px; display: flex; flex-direction: column; }
.work-num { font-weight: 900; font-size: clamp(44px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
/* 実績の単位（インプレッション など）は長いので、数字の下に別の行で置く（横に並べると割れる） */
.work-num small { display: block; font-size: 16px; letter-spacing: 0; margin: 10px 0 0; }
.work-title { font-weight: 900; font-size: 18px; line-height: 1.45; margin: 16px 0 6px; }
.work-note { font-weight: 700; font-size: 14px; line-height: 1.7; margin: 0 0 18px; color: #333; }
.work-src { margin: auto 0 0; padding-top: 14px; border-top: 2px solid var(--line); font-weight: 700; font-size: 13px; }
.more { margin: 22px 0 0; font-weight: 900; }
.more a { text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---- 6. 会社 ---- */
.company { margin-top: 24px; padding: clamp(8px, 2vw, 20px) clamp(24px, 3vw, 40px); }
.company dl { margin: 0; }
.company dl > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 20px 0; border-bottom: 2px solid var(--line); }
.company dl > div:last-child { border-bottom: 0; }
.company dt { font-weight: 900; }
.company dd { margin: 0; font-weight: 700; line-height: 1.75; }

/* ---- 7. 相談（黒い地に白い板） ---- */
.form { color: var(--k); margin-top: 36px; padding: clamp(24px, 3vw, 40px); max-width: 760px; margin-left: max(0px, calc((100% - var(--maxw)) / 2)); }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-weight: 900; font-size: 15px; margin-bottom: 8px; }
.field em { font-style: normal; font-size: 11px; background: var(--k); color: var(--y); padding: 2px 7px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-weight: 700; font-size: 16px;  /* 16px 未満だと iPhone が拡大する */
  padding: 13px 14px; border: 2px solid var(--k); border-radius: 12px; background: var(--w); color: var(--k);
}
.field input:focus, .field textarea:focus { outline: 3px solid var(--y); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agree { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin: 6px 0 22px; }
.agree input { width: 20px; height: 20px; accent-color: var(--k); }
.btn {
  font: inherit; font-weight: 900; font-size: 17px; cursor: pointer;
  background: var(--k); color: var(--y); border: 0; border-radius: 999px; padding: 15px 38px;
}
.btn:hover { background: var(--y); color: var(--k); }
.btn:disabled { opacity: .5; cursor: default; }
.form-msg { margin: 16px 0 0; font-weight: 700; font-size: 14px; line-height: 1.7; min-height: 1em; }

/* ---- 下の帯 ---- */
.foot { padding: 48px var(--gut) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; }
.foot img { width: 150px; }
.foot nav { display: flex; gap: 24px; font-weight: 900; font-size: 14px; }
.foot .copy { margin: 0 0 0 auto; font-weight: 700; font-size: 13px; }

/* ---- 狭い画面 ---- */
@media (max-width: 900px) {
  .trend, .works, .why { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .company dl > div { grid-template-columns: 1fr; gap: 4px; }
  .foot .copy { margin-left: 0; width: 100%; }
}

/* ---- 下層ページ（プライバシーポリシー・404） ---- */
.doc { padding: clamp(32px, 6vw, 72px) var(--gut) 80px; max-width: 900px; margin: 0 auto; }
.doc .panel { padding: clamp(24px, 4vw, 48px); margin-top: 28px; }
.doc h2 { font-weight: 900; font-size: 20px; margin: 32px 0 10px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-weight: 500; font-size: 15px; line-height: 1.9; }

/* =====================================================================
   11/6 追加: 画像と動くもの（founder「もっと画像は必須。動画GIFもいれたほうがいい」）と事業一覧・DreamCore の紹介
   ===================================================================== */

/* ---- 動くゲームの帯（一番上のすぐ下）。縦長のプレイを黒い角丸の枠に入れ、横へ流し続ける ---- */
.reel { overflow: hidden; padding: 0 0 clamp(48px, 7vw, 88px); }
.reel-track { display: flex; gap: 14px; width: max-content; animation: reel 60s linear infinite; }
.reel:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }  /* 同じ 7 本を 2 回並べ、半分動いたら最初に戻る＝つなぎ目が見えない */
.reel-note { margin: 16px var(--gut) 0; font-weight: 700; font-size: 13px; color: var(--g); }
.clip {
  margin: 0; width: clamp(150px, 16vw, 210px); aspect-ratio: 3 / 4;
  background: var(--k); border-radius: 22px; overflow: hidden; flex: none;
  border: 4px solid var(--k);
}
/* 録画は 9:19.5 の縦長。3:4 の枠で中央だけ見せる（横長のゲームの上下のぼかしの帯を隠すため） */
.clip video, .biz-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .reel-track { animation: none; } }

/* ---- 事業（6 つ・PC は 3 列） ---- */
.biz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.biz-card { overflow: hidden; display: flex; flex-direction: column; }
.biz-media { margin: 0; aspect-ratio: 16 / 10; background: var(--k); overflow: hidden; }
.biz-media img { width: 100%; height: 100%; object-fit: cover; }
.biz-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.biz-no { font-weight: 900; font-size: 14px; margin: 0 0 12px; display: inline-block; align-self: flex-start; border-bottom: 4px solid var(--y); }  /* 番号の下線は黄色（目印） */
.biz-body .body { font-size: 15px; }
.biz-link { margin: auto 0 0; padding-top: 18px; font-weight: 900; font-size: 15px; }
.biz-link a { text-underline-offset: 4px; text-decoration-thickness: 2px; }
.biz-link a::after { content: " →"; }

/* ---- DreamCore の紹介（黄色の地のまま、右に動くゲームを 6 つ並べる） ---- */
.dc { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); margin-top: 40px; align-items: start; }
.dc-name { font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.02em; margin: 0 0 14px; }
.dc-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.dc-points li { background: var(--paper); border-radius: 16px; padding: 14px 18px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.dc-points strong { display: block; font-weight: 900; font-size: 18px; }
.dc-link a { color: var(--k); }
/* 黒い地の節のリンクは黄色の字のまま */
.dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.clip-grid { width: auto; }

/* ---- 実績の写真 ---- */
.work { padding: 0 0 24px; overflow: hidden; }
.work > *:not(.work-media) { margin-left: 26px; margin-right: 26px; }
.work-media { margin: 0 0 22px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--k); }
.work-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .biz { grid-template-columns: 1fr; }
  .dc { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dc-grid { grid-template-columns: repeat(2, 1fr); }
  .dc-grid .clip:nth-child(n+5) { display: none; }  /* スマホは 4 本まで（重さと縦の長さ） */
}

/* ---- WEBゲームとは（11/6 追加）: 遊ぶまでの 3 歩と、アプリのゲームとの違い ---- */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.step { overflow: hidden; padding-bottom: 24px; }
.step > *:not(.step-media) { margin-left: 24px; margin-right: 24px; }
.step-media { margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--k); }
.step-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.step-no { display: inline-block; font-weight: 900; font-size: 15px; background: var(--k); color: var(--y); border-radius: 999px; width: 32px; height: 32px; line-height: 32px; text-align: center; margin-bottom: 10px !important; }
.step-title { font-weight: 900; font-size: 20px; margin-top: 0; margin-bottom: 6px; }
.step-note { font-weight: 700; font-size: 14px; line-height: 1.7; color: #333; margin-top: 0; margin-bottom: 0; }
/* 3 歩の間の矢印（PC だけ。縦に並ぶスマホでは順番が見て分かるので出さない） */
@media (min-width: 901px) {
  .step { position: relative; overflow: visible; }
  .step .step-media { border-radius: var(--r) var(--r) 0 0; }
  .step:not(:last-child)::after {
    content: "→"; position: absolute; right: -15px; top: 38%; z-index: 2;
    width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 999px;
    background: var(--k); color: var(--y); font-weight: 900; font-size: 16px;
  }
}
.compare { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.compare-col { padding: 24px 28px; }
.compare-col-y { background: var(--k); color: var(--w); }
.compare-head { font-weight: 900; font-size: 20px; margin: 0 0 12px; }
.compare-col-y .compare-head { color: var(--y); }
.compare ul { margin: 0; padding-left: 1.2em; }
.compare li { font-weight: 700; font-size: 15px; line-height: 1.9; }
.compare-col:first-child { color: #555; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .compare { grid-template-columns: 1fr; }
}

/* ---- ゲームの場所（11/6 追加・同日に組み直し）: 6 つを同じ形・同じ重さの黒い板で並べる。
   前は黒い板と縁取りを交互に 2 列で並べ、「左が見出し・右が説明」の組に読めた（founder の指摘）。 ---- */
/* 11/6 founder「ここ黄色のセッションの区切りなんですか？ ここだけ連続しているような狭さになっている」→ 上の余白 0 をやめ、ほかの節と同じに（黄色の札＝節の始まり、をそろえる）。名前 .places は .field（入力欄）とぶつけないため */
.places-h { font-size: clamp(30px, 5vw, 72px); }
.places-grid { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.place { background: var(--k); border-radius: var(--r); padding: clamp(18px, 2.2vw, 28px); }
.place-name { margin: 0 0 8px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; color: var(--y); font-size: clamp(26px, 3.4vw, 48px); white-space: nowrap; }
.place-note { word-break: auto-phrase; margin: 0; font-weight: 700; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; color: #E6E6E6; }
@media (max-width: 760px) {
  .places-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .place { padding: 16px 16px 18px; }
  .place-name { font-size: clamp(20px, 6vw, 28px); }
}

/* ---- AI（11/6 追加・黒い地。強みの節とは間にほかの節を挟む） ---- */
.ai-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: 40px; align-items: start; }
.ai-body .body { color: #E6E6E6; }
.ai-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.ai-points li { border-left: 4px solid var(--y); padding: 2px 0 2px 16px; font-weight: 700; font-size: 15px; line-height: 1.7; color: #E6E6E6; }
.ai-points strong { display: block; color: var(--w); font-weight: 900; font-size: 19px; }
.ai-media { margin: 0; border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .ai-body { grid-template-columns: 1fr; } }

/* ---- 3 つの芯（11/6 追加・founder「特には、AI ゲーム UGC ですね」）: 一番上の白い板の下に、黒い板 3 枚で並べる ---- */
.core { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.core-item { background: var(--k); color: var(--w); border-radius: var(--r); padding: clamp(20px, 2.4vw, 30px); }
.core-word { margin: 0 0 10px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--y); font-size: clamp(44px, 6vw, 80px); }
.core-note { word-break: auto-phrase; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.7; color: #E6E6E6; }
/* スマホは縦に 3 枚積むと長いので、1 枚の中で言葉と説明を横に並べる */
@media (max-width: 760px) {
  .core { grid-template-columns: 1fr; gap: 10px; }
  .core-item { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; padding: 18px 20px; }
  .core-word { margin: 0; font-size: 32px; white-space: nowrap; }  /* 「ゲーム」が 2 行に割れないように */
  .core-note { font-size: 14px; }
}

/* ---- 誰がやるのか（11/6・同日に組み直し: founder「名前が大きく書く理由がない。実績をしっかりと読みやすく書くほうがいい」）
   名前は小さな 1 行。主役は実績の表（左に種類の札、右に 1 行の中身）。 ---- */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 28px; align-items: start; }
.who-lead { font-size: clamp(26px, 3.4vw, 44px); margin: 0 0 18px; }
.who-name { margin: 0 0 14px; font-weight: 900; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.who-role { font-size: 12px; background: var(--k); color: var(--y); padding: 3px 8px; border-radius: 5px; }
.who-facts { margin: 0; display: grid; gap: 10px; }
.who-facts > div { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--paper); border-radius: 18px; padding: 18px 20px; }
.who-facts dt { font-weight: 900; font-size: 13px; background: var(--y); color: var(--k); border-radius: 6px; text-align: center; padding: 4px 0; }
.who-facts dd { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.7; word-break: auto-phrase; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } }

/* ---- 11/6 筋の組み直し: 「だから」のつなぎと、強い理由 3 つの目次 ---- */
.bridge .h2 { font-size: clamp(34px, 6.4vw, 92px); }
.reasons-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.reasons-list li { display: flex; align-items: center; gap: 18px; background: var(--paper); border-radius: var(--r); padding: 18px 24px; font-weight: 900; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.35; word-break: auto-phrase; }
.reasons-list span { flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--k); color: var(--y); display: grid; place-items: center; font-size: 22px; }
/* .reasons-intro の下の余白も、ほかの節と同じに戻した（前は 48px に詰めていた・11/6） */

/* ---- 実績を 4 枚に（11/6 宇宙兄弟を足した）: PC は 2×2、狭い画面は 1 列 ---- */
.works { grid-template-columns: repeat(2, 1fr); }
.work-media { position: relative; }
.work-cap { position: absolute; left: 10px; bottom: 10px; margin: 0; font-size: 11px; font-weight: 700; color: #fff; background: rgba(17,17,17,.78); padding: 3px 8px; border-radius: 6px; }
@media (max-width: 900px) { .works { grid-template-columns: 1fr; } }

/* ---- 理由 2 の帯（11/6 founder「黒字でDreamCoreの話…続きは白地で別の話かと思う」「黒字が続くと嫌」）:
   独自AI技術と DreamCore を 1 つの節にし、地を薄い灰色 1 本でつなぐ ---- */
.sec-band { max-width: none; background: var(--paper); }
.sec-band > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec-band > .label { display: table; margin-left: max(0px, calc((100% - var(--maxw)) / 2)); }
.sec-band .ai-body .body, .sec-band .ai-points li { color: var(--k); }
.sec-band .ai-points strong { color: var(--k); }
.sec-band .why-link a { color: var(--k); }
/* 11/6 founder「セッション間がキツキツ」→ 帯の中の 2 つの話の間も、節と節の間と同じだけ空ける */
.dc-wrap { margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(48px, 6vw, 80px); border-top: 4px solid var(--k); }
.dc-h { font-size: clamp(30px, 5vw, 72px); margin-top: 0; }
.sec-band .dc-points li { background: var(--w); }

/* ---- DreamCore へのボタン（11/6 founder「DreamCoreのリンクが控えめすぎる」） ---- */
.dc-cta { margin: 28px 0 0; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--k); color: var(--y); text-decoration: none;
  font-weight: 900; font-size: clamp(18px, 1.8vw, 22px);
  padding: 18px 30px; border-radius: 999px;
}
.cta-btn span { font-size: 1.2em; transition: transform .15s; }
.cta-btn:hover { background: var(--y); color: var(--k); }
.cta-btn:hover span { transform: translateX(4px); }
/* 主な登壇（11/6）: 1 つの札の中に年月つきで並べる */
.who-facts > div { grid-template-columns: 76px 1fr; }
.who-talks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.who-talks li { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.who-talks p { margin: 0; }
.who-talks span { font-weight: 900; color: var(--g); white-space: nowrap; }
@media (max-width: 560px) { .who-facts > div { grid-template-columns: 64px 1fr; } .who-talks li { grid-template-columns: 1fr; gap: 0; } }

/* ---- 資料のダウンロード（11/6） ---- */
.top-dl { font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; background: var(--y); color: var(--k); border: 0; padding: 9px 16px; border-radius: 999px; }
.top-dl:hover { background: var(--k); color: var(--y); }
@media (max-width: 760px) { .top-dl { font-size: 13px; padding: 8px 12px; } }
.dl-card { margin-top: 32px; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #1E1E1E; border: 2px solid var(--y); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.dl-title { margin: 0 0 6px; font-weight: 900; font-size: 20px; color: var(--y); }
.dl-card .dl-note { color: #E6E6E6; max-width: 30em; }
.dl-note { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.7; }
.dl-btn { background: var(--y); color: var(--k); border: 0; cursor: pointer; font-family: inherit; }
.dl-btn:hover { background: var(--w); color: var(--k); }
.dl-dialog { border: 0; border-radius: var(--r); padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.dl-dialog::backdrop { background: rgba(17,17,17,.6); }
.dl-form { position: relative; padding: clamp(22px, 4vw, 36px); }
.dl-h { margin: 14px 0 6px; font-weight: 900; font-size: 24px; line-height: 1.3; }
.dl-form .dl-note { margin-bottom: 18px; color: var(--g); }
.dl-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 28px; cursor: pointer; line-height: 1; }
/* 上の帯のボタンはスマホで折り返さない（「資料」「相談する」に短くする） */
.top-dl, .top-cta { white-space: nowrap; }
@media (max-width: 760px) { .pc-only { display: none; } .top-nav { gap: 8px; } .top-cta { padding: 8px 14px; font-size: 13px; } }
/* 11/6 founder「ずれてる」→ 黒い地の節は中身を真ん中に寄せる設定（.sec-dark > *）なので、資料の箱だけ真ん中に寄っていた。
   フォーム（.form）と同じく左の線にそろえ、幅もフォームと同じ 760px にする */
.sec-dark > .dl-card { margin-left: max(0px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }