/* ななせゲームズ（決まりは DESIGN.md）
   ⚠️ 2026-10-02 **生成り地に黒文字が標準**になった（前は黒地）。--ink＝文字・--paper＝地
   ⚠️ 色は2つだけ。黒(#141416)と生成り(#F8F6F0)。ロゴの決めごとに合わせる
   ⚠️ 親会社(List Buddy)のミント＋明朝とは**あえて別物**にする。混ぜると両方ぼやける */
:root{
  --ink:#141416;
  --paper:#F8F6F0;
  --line:#D9D6CE;
  --deep:#EFECE4;
  --soft:#4a4a50;
  --dim:#8b8b93;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.7}
img{max-width:100%;height:auto;display:block}
.in{max-width:960px;margin:0 auto;padding:0 24px}

/* ── ヘッダー ───────────────────────────── */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(248,246,240,.92);backdrop-filter:blur(6px);z-index:10}
.hd{max-width:960px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hd .brand img{height:34px;width:auto}
nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;font-size:14px;letter-spacing:.04em}
nav a.on{border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ── 見出し ────────────────────────────── */
/* ── トップの1枚目 ─────────────────────────────────
   ⚠️ **前はロゴと1行だけで、絵が無かった。**「画像が足りない。特にFVが効く」
      （2026-09-03 中島さん）。**持っている中で一番強い絵を、画面いっぱいに敷く。**
   文字は絵の上に置く。下から黒を被せて、どんな絵でも文字が読めるようにする */
.hero{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;
      border-bottom:1px solid var(--line);overflow:hidden;background:#0b0c10}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          object-position:50% 58%;opacity:.92}
.hero .bg::after{content:""}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.10) 38%,rgba(8,9,12,.82) 100%)}
.hero .in{position:relative;width:100%;max-width:1080px;margin:0 auto;
          padding:0 24px 56px;text-align:left}
.hero .logo{height:52px;width:auto;margin:0 0 20px;display:block}
.hero p{color:#e7e5df;font-size:17px;letter-spacing:.10em;margin:0;
        text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero .sub{color:var(--dim);font-size:13px;letter-spacing:.10em;margin-top:10px}
@media(max-width:640px){
  .hero{min-height:62vh}
  .hero .logo{height:40px}
  .hero p{font-size:15px}
}
h1{font-size:30px;letter-spacing:.06em;margin:0 0 8px;font-weight:600}
h2{font-size:20px;letter-spacing:.06em;margin:64px 0 20px;font-weight:600}
h2:first-child{margin-top:0}
h3{font-size:16px;margin:32px 0 8px;font-weight:600}
.lead{color:var(--dim);font-size:14px;letter-spacing:.06em;margin:0 0 40px}
section{padding:72px 0}
section+section{border-top:1px solid var(--line)}

/* ── 作品カード ──────────────────────────── */
.works{display:grid;gap:24px;grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:720px){.works{grid-template-columns:1fr}}
.card{border:1px solid var(--line);padding:28px;display:block;transition:border-color .2s}
.card:hover{border-color:var(--ink);opacity:1}
.card .ttl{font-size:20px;font-weight:600;letter-spacing:.04em}
.card .sub{color:var(--dim);font-size:13px;margin-top:2px;letter-spacing:.06em}
.card p{font-size:14px;color:var(--soft);margin:14px 0 0}
.tag{display:inline-block;border:1px solid var(--line);color:var(--dim);font-size:11px;
     padding:2px 10px;letter-spacing:.08em;margin-top:16px}

/* ── 表 ───────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{width:150px;color:var(--dim);font-weight:400}
@media(max-width:600px){th{width:110px}}

.btn{display:inline-block;border:1px solid var(--ink);padding:12px 28px;font-size:14px;
     letter-spacing:.06em;margin-top:8px}
.btn:hover{background:var(--ink);color:var(--paper);opacity:1}
.note{color:var(--dim);font-size:13px}
ul.plain{padding-left:1.2em;font-size:14px;color:var(--soft)}
ul.plain li{margin:6px 0}

footer{border-top:1px solid var(--line);padding:40px 0 64px;color:var(--dim);font-size:13px}
footer a{color:var(--dim);text-decoration:underline}

/* ゲーム画面 */
.card .shot{width:100%;aspect-ratio:620/456;object-fit:cover;display:block;margin:0 0 18px;border:1px solid var(--line)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.shots img{width:100%;height:auto;display:block;border:1px solid var(--line)}
@media(max-width:720px){.shots{grid-template-columns:repeat(2,1fr)}}

/* ── ブログ（2026-09-16） ───────────────────── */
.postlist{list-style:none;padding:0;margin:24px 0}
.postlist li{padding:16px 0;border-bottom:1px solid var(--line)}
.postlist .date,.post .date{color:var(--dim);font-size:13px;letter-spacing:.04em;margin-right:8px}
.post h1{font-size:28px;line-height:1.5;margin:8px 0 28px}
.post h2{font-size:21px;margin:40px 0 12px;border-left:3px solid var(--ink);padding-left:12px}
.post h3{font-size:17px;margin:28px 0 8px}
.post p{margin:0 0 18px}
.post ul{padding-left:1.3em}
.post img{margin:20px 0;border:1px solid var(--line)}
.post blockquote{border-left:3px solid var(--dim);margin:20px 0;padding:4px 16px;color:var(--dim)}
.post code{background:var(--deep);padding:2px 6px;border-radius:4px;font-size:.92em}
.post pre{background:var(--deep);padding:14px;overflow:auto;border-radius:6px}
.tag{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 10px;margin-right:6px;color:var(--dim)}

/* ── トップ v2（自己紹介型・2026-09-24）────────────── */
.hero2 .bg{object-position:50% 40%}
.now-main .ttl{font-size:26px;font-weight:600;letter-spacing:.04em}
.now-main .en{color:var(--dim);font-size:13px;letter-spacing:.12em;margin-left:12px}
.now-main .big{font-size:20px;margin:10px 0 14px}
.timeline{list-style:none;padding:0;margin:22px 0 26px;border-left:1px solid var(--line)}
.timeline li{padding:4px 0 4px 18px;color:var(--soft);font-size:15px}
.timeline b{color:var(--ink);font-weight:600;margin-right:10px}
.works3{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.works3{grid-template-columns:1fr}}
.shot-text{display:flex;align-items:center;justify-content:center;aspect-ratio:620/456;background:var(--deep);color:var(--dim);font-size:22px;letter-spacing:.2em}
.me{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start}
.me-photo{width:120px;height:120px;border-radius:50%;background:#1d1d21;display:flex;align-items:center;justify-content:center;overflow:hidden}
.me-photo img{width:64px;height:64px;object-fit:contain}
.me .name{font-size:20px;font-weight:600;margin:0 0 10px}
.me .en{color:var(--dim);font-size:13px;letter-spacing:.1em;margin-left:10px}
.me .links a{margin-right:22px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.me{grid-template-columns:1fr}}

/* 2026-10-02 スマホ幅でメニューの文字が1字ずつ折れていたのを直す（項目の中では折らず、項目ごとに折り返す） */
nav ul{flex-wrap:wrap;row-gap:6px}
nav a{white-space:nowrap}
@media (max-width:600px){ .hd{gap:12px;padding:14px 18px} nav ul{gap:14px;font-size:13px} }

/* 2026-10-02 英字・番号は Jost（ロゴと同じ系統） */
nav ul{font-weight:500}
.hero a,.hero p{color:#e7e5df}
@media (max-width:600px){ nav li:first-child{display:none} }  /* スマホではロゴがホームへ戻る役 */
[id]{scroll-margin-top:96px}  /* 固定ヘッダーに見出しが隠れないように */

/* ── 下層ページ（2026-10-03・DESIGN.md §5 に合わせた）─────────────────
   英字の大見出し＋小さい和文／番号と罫線／表は上を黒い線・行は薄い線／札は線だけ */
.p-head{padding:8px 0 40px}
.p-title{font-family:"Jost",sans-serif;font-weight:700;font-size:clamp(44px,8vw,88px);letter-spacing:-.02em;line-height:1;margin:0}
.p-title small{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--dim);margin-left:20px}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.p-tags span{border:1px solid var(--ink);border-radius:999px;padding:1px 14px;font-size:13px;line-height:1.8}
.p-hero{width:100%;height:auto;display:block;margin:0 0 40px}
.p-copy{margin:0 0 24px;font-feature-settings:"palt"}
.p-copy span{display:table;font-weight:900;font-size:clamp(28px,4.4vw,44px);line-height:1.35;border-bottom:1px solid var(--ink);margin-bottom:12px;padding-right:.3em}
.p-body{font-size:16px;margin:0 0 8px;max-width:40em}
.p-h{display:block;font-size:22px;font-weight:700;letter-spacing:.04em;margin:96px 0 24px}
.p-no{display:flex;align-items:center;gap:14px;font-family:"Jost",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.p-no b{color:var(--dim);font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.p-no i{flex:0 0 48px;height:1px;background:var(--ink)}
.p-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.p-list li{border-bottom:1px solid var(--line)}
.p-list>li:not(:has(a)),.p-list a{display:grid;grid-template-columns:160px 1fr auto;gap:16px;align-items:baseline;padding:18px 0}
.p-list p{margin:0}
.p-list span{font-family:"Jost","Zen Kaku Gothic New",sans-serif;color:var(--dim);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.p-list a b{font-weight:400}
.p-list a:hover{opacity:1}.p-list a:hover p{text-decoration:underline;text-underline-offset:4px}
.p-mail{font-family:"Jost",sans-serif;font-size:clamp(24px,5vw,40px);font-weight:500;margin:32px 0 0;letter-spacing:.01em}
.p-mail a{border-bottom:1px solid var(--ink);padding-bottom:4px}
.in table{border-top:1px solid var(--ink);font-size:15px}
.in th,.in td{padding:16px 0}
.in h3{font-size:17px;margin:40px 0 12px}
.btn{border-radius:999px}
.postlist{border-top:1px solid var(--ink);margin-top:40px}
@media (max-width:600px){
  .p-title small{display:block;margin:12px 0 0}
  .p-h{margin-top:64px}
  .p-list>li:not(:has(a)),.p-list a{grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0}
  .p-list span{grid-column:1/-1;font-size:13px}
}
.hd{justify-content:space-between}  /* ロゴは左・メニューは右（トップと同じ） */

/* 体験版一覧（/play/・2026-10-04） */
.play-item{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start;border-top:1px solid var(--ink);padding-top:32px}
.play-img{width:100%;height:auto;display:block}
.play-no{font-family:"Jost",sans-serif;font-weight:700;color:var(--org);letter-spacing:.06em;margin:0 0 8px;font-variant-numeric:tabular-nums}
.play-title{font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0}
.play-title small{display:block;font-size:13px;font-weight:500;color:var(--dim);letter-spacing:.08em;margin-top:6px}
.play-copy{font-size:17px;line-height:1.9;margin:20px 0 0}
.play-note{font-size:14px;color:#3a3a40;line-height:1.9;margin:16px 0 0}
@media (max-width:700px){ .play-item{grid-template-columns:1fr;gap:24px} .play-title{font-size:24px} }

/* CLIPS（縦動画の置き場・2026-10-05） */
.clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px 24px}
.clip{border-top:1px solid var(--line);padding-top:16px}
.clip-v{width:100%;aspect-ratio:9/16;background:#141416;display:block}
.clip-body{margin-top:12px}

/* お仕事のご依頼（work.html・2026-10-06）：実績3つ＝枠なしのカード・数字は大きく単位は小さく（DESIGN §7） */
.p-works{list-style:none;padding:0;margin:0;display:grid;gap:40px}
.p-works li img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:14px}
.p-works h3{font-size:18px;margin:0 0 6px}
.p-works h3 small{display:block;font-size:12px;color:var(--dim);font-weight:500;margin-top:4px;letter-spacing:.04em}
.p-nums{display:flex;gap:20px;flex-wrap:wrap;margin:8px 0 10px;font-size:13px;color:var(--dim)}
.p-nums b{font-family:"Jost",sans-serif;font-size:26px;color:var(--ink);font-weight:700;margin-right:2px;letter-spacing:-.01em}
.p-services{list-style:none;padding:0;margin:0;display:grid;gap:0}
.p-services li{padding:18px 0;border-bottom:1px solid var(--line)}
.p-services h3{font-size:16px;margin:0 0 6px}
.p-services p{margin:0;font-size:14px;line-height:1.9;color:#3a3a40}
.p-steps{list-style:none;padding:0;margin:0;counter-reset:st}
.p-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);counter-increment:st}
.p-steps li::before{content:counter(st,decimal-leading-zero);font-family:"Jost",sans-serif;font-weight:700;color:var(--org);font-size:14px;padding-top:3px}
.p-steps b{display:block;font-size:15px}
.p-steps span{display:block;font-size:13px;color:#3a3a40;line-height:1.8}
@media (min-width:720px){.p-works{grid-template-columns:repeat(3,1fr);gap:28px}}