/* GENNAI AI — サイト共通スタイル */

/* ---------- トークン（ライトを完全定義） ---------- */
:root{
  --ground:#F4F6F8;
  --surface:#FFFFFF;
  --ink:#1F2A33;
  --muted:#66727E;
  --accent:#B2472A;
  --accent2:#D9A441;
  --line:#E1E6EB;
  --line-soft:#EDF0F3;
  --shadow:0 1px 2px rgba(31,42,51,.06), 0 6px 18px rgba(31,42,51,.07);
  --shadow-lift:0 2px 4px rgba(31,42,51,.07), 0 12px 26px rgba(31,42,51,.10);
  --disabled-bg:#EDF0F3;
  --disabled-ink:#8B95A0;
  --shot-bg:#E7EBEF;
  --on-accent:#FFFFFF;

  --font-display:"Zen Maru Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;

  --wrap:1120px;
  --read:34em;
  --radius:12px;
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12171C;
    --surface:#1B222A;
    --ink:#ECEFF2;
    --muted:#98A3AE;
    --accent:#E0704F;
    --accent2:#E2B45A;
    --line:#2C353F;
    --line-soft:#232B34;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.30);
    --shadow-lift:0 2px 4px rgba(0,0,0,.40), 0 12px 26px rgba(0,0,0,.36);
    --disabled-bg:#232B34;
    --disabled-ink:#7E8994;
    --shot-bg:#232B34;
    --on-accent:#12171C;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --ground:#12171C;
  --surface:#1B222A;
  --ink:#ECEFF2;
  --muted:#98A3AE;
  --accent:#E0704F;
  --accent2:#E2B45A;
  --line:#2C353F;
  --line-soft:#232B34;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.30);
  --shadow-lift:0 2px 4px rgba(0,0,0,.40), 0 12px 26px rgba(0,0,0,.36);
  --disabled-bg:#232B34;
  --disabled-ink:#7E8994;
  --shot-bg:#232B34;
  --on-accent:#12171C;
  color-scheme:dark;
}

/* ---------- 土台 ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.label{
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums; margin:0 0 12px;
}

h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:.01em; line-height:1.45;}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--surface); color:var(--accent);
  padding:10px 16px; border:1px solid var(--accent); border-radius:0 0 8px 0; z-index:50;
}
.skip-link:focus{left:0;}

/* ---------- ヘッダー ---------- */
.site-head{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.site-head .inner{
  max-width:var(--wrap); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:.10em; color:var(--ink); line-height:1.2;
}
.wordmark:hover{text-decoration:none;}
.wordmark em{font-style:normal; color:var(--accent);}
.site-head nav{display:flex; gap:22px; font-size:14px; flex-wrap:wrap; min-width:0;}
.site-head nav a{color:var(--muted);}
.site-head nav a:hover{color:var(--accent);}

/* ---------- ヒーロー ---------- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.hero .inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px; align-items:center;
}
.hero .inner > *{min-width:0;}
.hero-mark{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,6vw,56px); line-height:1.15; letter-spacing:.06em;
  margin:0 0 18px;
}
.hero-mark em{font-style:normal; color:var(--accent);}
.hero-lede{font-size:19px; color:var(--ink); margin:0 0 12px; max-width:22em;}
.hero-sub{font-size:15px; color:var(--muted); margin:0; max-width:26em;}

/* minmax(0,1fr) にしないと、各セルの下限が画像の実寸（128px）になり
   4 枚 + 隙間で 550px を要求して、狭い画面を横に押し広げる。 */
.hero-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; min-width:0;}
.hero-grid img{
  width:100%; height:auto; border-radius:22%;
  border:1px solid var(--line); box-shadow:var(--shadow);
}

/* ---------- 訴求 3 つ ---------- */
.pitch{padding:44px 0; border-bottom:1px solid var(--line);}
.pitch ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
.pitch li{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.6;
}
.pitch li::before{
  content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent2); margin-bottom:14px;
}

/* ---------- セクション共通 ---------- */
section{scroll-margin-top:84px;}
.section{padding:64px 0;}
.section + .section{border-top:1px solid var(--line);}
.section-head{margin:0 0 34px;}
.section-head h2{font-size:26px; margin:0 0 8px;}
.section-head p{color:var(--muted); font-size:15px; margin:0; max-width:var(--read);}

/* ---------- ゲーム一覧 ---------- */
.games{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;}
.game{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.game:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
.game-feature{width:100%; height:auto; border-bottom:1px solid var(--line-soft); background:var(--shot-bg);}
.game-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1;}
.game-id{display:flex; align-items:center; gap:14px;}
.game-id img{
  width:64px; height:64px; border-radius:22%;
  border:1px solid var(--line); flex:0 0 auto;
}
.game-id h3{margin:0; font-size:20px; line-height:1.4;}
.game-desc{margin:0; font-size:15px; color:var(--muted); line-height:1.8;}

.stores{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;}
.store-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 18px; border-radius:8px;
  font-family:var(--font-body); font-size:13.5px; font-weight:500;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
  border:1px solid var(--accent2); color:var(--accent); background:var(--surface);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
a.store-btn:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent); text-decoration:none;}
.store-btn[aria-disabled="true"]{
  background:var(--disabled-bg); color:var(--disabled-ink);
  border-color:var(--line); cursor:default; pointer-events:none;
}

/* ぽんぽんタイルのスクショ帯 */
.shots{
  display:flex; gap:12px; overflow-x:auto; padding:4px 0 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.shots img{
  width:180px; height:320px; flex:0 0 auto; object-fit:cover;
  border-radius:10px; border:1px solid var(--line); background:var(--shot-bg);
}
.shots-note{margin:0; font-size:12.5px; color:var(--muted); letter-spacing:.04em;}

/* ぽんぽんタイルだけスクショ帯を持つので、2 列ぶち抜きにして
   左＝紹介画像とストアボタン／右＝スクショ 4 枚 に分ける。
   これをしないと、隣のカードが同じ高さに引き伸ばされて空洞ができる。 */
.game-wide{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.game-wide > *{min-width:0;}
.game-wide .wide-main{display:flex; flex-direction:column;}
.game-wide .wide-shots{
  display:flex; flex-direction:column; gap:10px; justify-content:center;
  padding:22px 24px 24px; border-left:1px solid var(--line-soft);
}
/* デスクトップでは 4 枚が右カラムにちょうど収まる（等分・横スクロール無し） */
.game-wide .shots{overflow-x:visible;}
.game-wide .shots img{
  width:auto; height:auto; flex:1 1 0; min-width:0;
  aspect-ratio:540 / 960;
}

/* ---------- 会社情報 ---------- */
.company,.contact-box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 30px;
  max-width:720px;
}
.company dl{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:12px 32px;}
.company dt{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  padding-top:4px; white-space:nowrap;
}
.company dd{margin:0; font-size:15.5px; line-height:1.75;}

.contact-box p{margin:0 0 16px; color:var(--muted); font-size:15px;}
.mail-btn{
  display:inline-flex; align-items:center; min-height:46px; padding:0 24px;
  border-radius:8px; background:var(--accent); color:var(--on-accent);
  font-weight:500; letter-spacing:.04em; border:1px solid var(--accent);
}
.mail-btn:hover{text-decoration:none; opacity:.9;}

/* ---------- フッター ---------- */
.site-foot{
  border-top:1px solid var(--line); background:var(--surface);
  padding:34px 0 46px; margin-top:8px;
}
.site-foot .inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.site-foot .foot-links{display:flex; gap:20px; flex-wrap:wrap;}
.site-foot .foot-en{
  font-size:12px; letter-spacing:.04em; margin:14px auto 0; color:var(--muted);
  max-width:var(--wrap); padding:0 24px;
}
.foot-copy{font-variant-numeric:tabular-nums; letter-spacing:.04em;}

/* ---------- プライバシーポリシー本文 ---------- */
.doc{max-width:760px; margin:0 auto; padding:0 24px 80px;}
.doc-head{padding:52px 0 28px; border-bottom:1px solid var(--line); margin-bottom:40px;}
.doc-head h1{font-size:31px; margin:0 0 18px;}
.eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:0 0 14px;
}
.dateline{
  font-size:13px; color:var(--muted); margin:0;
  display:flex; gap:22px; flex-wrap:wrap; font-variant-numeric:tabular-nums;
}
.dateline b{font-weight:600; color:var(--ink);}
.doc .lede{font-size:16.5px; color:var(--ink); margin:0 0 44px;}
.doc h2{
  font-size:19px; margin:50px 0 4px; padding-top:26px;
  border-top:1px solid var(--line-soft); color:var(--accent);
}
.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:0;}
.doc h2 .num{
  display:block; font-size:11px; font-weight:600; letter-spacing:.16em;
  color:var(--muted); margin-bottom:7px; font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
.doc h3{font-size:15px; margin:32px 0 6px; color:var(--ink);}
.doc p{margin:14px 0;}
.doc strong{font-weight:700; color:var(--ink);}
.doc ul,.doc ol{margin:14px 0; padding-left:0; list-style:none;}
.doc ol{counter-reset:li;}
.doc li{position:relative; padding-left:1.5em; margin:7px 0;}
.doc ul>li::before{
  content:""; position:absolute; left:.42em; top:.86em;
  width:5px; height:5px; border-radius:50%; background:var(--accent2);
}
.doc ol>li{counter-increment:li;}
.doc ol>li::before{
  content:counter(li) "."; position:absolute; left:0; top:0;
  color:var(--muted); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}
.doc .note{
  margin:22px 0; padding:16px 20px; background:var(--line-soft);
  border-left:3px solid var(--accent2); border-radius:0 6px 6px 0;
  font-size:15px; color:var(--ink);
}
.doc .table-wrap{overflow-x:auto; margin:20px 0 12px; -webkit-overflow-scrolling:touch;}
.doc table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px; line-height:1.7;}
.doc th,.doc td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
.doc thead th{
  background:var(--line-soft); border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted); white-space:nowrap;
}
.doc tbody tr:last-child td{border-bottom:1px solid var(--line);}
.doc td.svc{font-weight:600; color:var(--ink); white-space:nowrap;}
.doc a{word-break:break-all;}
.doc .contact{
  margin:22px 0 0; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; background:var(--surface); box-shadow:var(--shadow);
}
.doc .contact dl{margin:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px 26px; font-size:15px;}
.doc .contact dt{color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.04em; padding-top:2px;}
.doc .contact dd{margin:0;}
.doc .revised{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.doc .revised div{margin:3px 0;}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .hero .inner{grid-template-columns:minmax(0,1fr); gap:38px;}
  .games{grid-template-columns:minmax(0,1fr);}
  .pitch ul{grid-template-columns:minmax(0,1fr);}
  /* 2 列ぶち抜きカードも 1 列に畳む */
  .game-wide{grid-template-columns:minmax(0,1fr);}
  .game-wide .wide-shots{border-left:0; border-top:1px solid var(--line-soft); justify-content:flex-start;}
  .game-wide .shots{overflow-x:auto;}
  .game-wide .shots img{width:180px; flex:0 0 auto;}
}
@media (max-width:640px){
  body{font-size:15.5px;}
  .wrap,.site-head .inner,.hero .inner,.site-foot .inner,.site-foot .foot-en{padding-left:20px; padding-right:20px;}
  .hero{padding:44px 0 40px;}
  .section{padding:48px 0;}
  .hero-grid{gap:10px;}
  .company,.contact-box{padding:22px 20px;}
  .company dl{grid-template-columns:minmax(0,1fr); gap:2px;}
  .company dd{margin-bottom:14px;}
  .doc{padding:0 20px 60px;}
  .doc-head h1{font-size:25px;}
  .doc h2{font-size:17.5px; margin-top:42px;}
  .doc .contact dl{grid-template-columns:minmax(0,1fr); gap:2px;}
  .doc .contact dd{margin-bottom:12px;}
  .site-head nav{gap:16px; font-size:13px;}
  .game-body{padding:20px 20px 22px;}
  .game-wide .wide-shots{padding:18px 20px 20px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .game:hover{transform:none;}
}

@media print{
  .site-head,.site-foot .foot-links{display:none;}
  body{background:#fff; color:#000; font-size:11pt; line-height:1.75;}
}