/*
 * DreamCore for Business の共通の見た目（2026-10-23 redesign で LP の <style> から切り出した）。
 *
 * 読む所:
 *   - public/business-lp/ja.html・index.html（企業向け LP 本体）
 *   - スポンサーお題の紹介ページ（/business/sponsored-challenges と言語版・public/paid-challenge-intro.html）
 * WHY 共有か: founder「他のlpともDreamCoreともトンマナが違いすぎる」「影とかも違う」（2026-10-23）。紹介ページが LP の
 *   CSS を写して持つと、片方だけ直されて見た目がまた離れる。色・字・ボタン・頭・赤い帯・FAQ・足はここが唯一の正。
 *   LP にしか無い部品（ゲームの帯・活用プランの箱・比較の表など）は今までどおり LP の <style> に残す。
 *
 * 言語の差（前は ja.html と index.html の <style> が別々に持っていた値。切り出しの時に 1 px も変えていない）:
 *   既定＝英語の値（字は system-ui・行間はやや詰める）。日本語は html:lang(ja) で上書き（ヒラギノ系・行間を広く）。
 *   紹介ページの es / pt / ko / zh は既定の値で読む（ヒラギノを中国語に当てると字形が日本の物になるので ja だけ）。
 *
 * ⚠️ LP 本体の <style> はこの後に読まれる（同じ強さのセレクタは LP の方が勝つ）。ここに足す時は LP で上書きされていないか見る。
 * ⚠️ 変えたら LP 2 枚と紹介ページの ?v= を中身の sha256 の先頭 10 文字に直す（test/paid-challenge-seo.test.js が見る）。
 */
:root{
  --red:#E60012;
  --red-deep:#B00110;
  --yellow:#FFD500;
  --ink:#1B1817;
  --sub:#6E6663;
  --paper:#FFFFFF;
  --mist:#F7F3F1;
  --line:#E9E2DE;
  --maxw:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html:lang(ja){--font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html:lang(ja) body{line-height:1.85}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.02em;font-weight:900}
p{margin:0}
/* 赤い線＋英字の小見出し（DREAMCORE FOR BUSINESS） */
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);border-radius:2px}

/* 頭（● DreamCore ＋ BUSINESS の枠・メニュー・赤い丸のボタン）。スマホでメニューを隠す決めは各ページ（LP の ja と en で違う） */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-color:var(--line);box-shadow:0 2px 20px rgba(27,24,23,.05)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.brand__dot{width:15px;height:15px;border-radius:50%;background:var(--red);flex:none}
.brand__tag{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);border:1.5px solid var(--red);border-radius:999px;padding:2px 8px;margin-left:2px}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{font-size:.92rem;font-weight:700;text-decoration:none;color:var(--ink);opacity:.82;transition:opacity .2s}
.nav__links a:hover{opacity:1;color:var(--red)}

/* ボタン（丸・赤は柔らかい赤い影。アプリの太い枠・硬い影は使わない） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:800;
  text-decoration:none;border-radius:999px;padding:13px 24px;font-size:.95rem;line-height:1;
  transition:transform .15s ease,background .2s,box-shadow .2s;white-space:nowrap;cursor:pointer;border:0}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(230,0,18,.28)}
.btn--primary:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(230,0,18,.34)}
.btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--red)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.nav .btn{padding:10px 20px}
@media(max-width:560px){.brand__tag{display:none}.nav .btn{padding:10px 14px;font-size:.86rem}}

/* ヒーロー（左に文・右に絵 1 枚。900px 以下は縦に積む） */
.hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,80px)}
.hero__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,56px);align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.15;margin-top:20px}
html:lang(ja) .hero h1{line-height:1.2}
/* 黄色の下線の強調 */
.mark{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .04em;white-space:nowrap}
.hero__lead{margin-top:26px;font-size:clamp(1.02rem,1.7vw,1.24rem);color:var(--ink);max-width:38ch;line-height:1.8}
html:lang(ja) .hero__lead{max-width:36ch;line-height:1.9}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.hero__note{margin-top:18px;font-size:.86rem;color:var(--sub)}
.hero__shot{position:relative}
.hero__shot img{display:block;width:100%;height:auto}
.hero__shot .badge{position:absolute;left:6px;bottom:6px;background:var(--red);color:#fff;font-weight:800;
  font-size:.78rem;padding:7px 14px;border-radius:999px;box-shadow:0 10px 24px rgba(230,0,18,.35)}

/* 節（白地と、交互の薄い地 .alt） */
section{padding-block:clamp(56px,9vw,104px)}
.alt{background:var(--mist)}
.lead{font-size:clamp(1.05rem,1.9vw,1.32rem);line-height:1.8;max-width:62ch;margin-top:22px;color:var(--ink)}
html:lang(ja) .lead{line-height:1.95}
.head{max-width:66ch}
.head h2{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.18;margin-top:16px}

/* 赤い帯に大きな数字（--accent は黄色） */
.stats{background:var(--red);color:#fff}
.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-block:38px}
@media(max-width:720px){.stats__in{grid-template-columns:repeat(2,1fr);gap:28px 8px}}
.stat{text-align:center;padding-inline:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat__val{font-size:clamp(2rem,4vw,2.8rem);font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.stat__val--accent{color:var(--yellow);text-shadow:0 1px 0 rgba(0,0,0,.12)}
.stat__label{margin-top:10px;font-size:.84rem;font-weight:700;color:rgba(255,255,255,.85);line-height:1.5}

/* よくある質問（たたむ。赤い丸の Q） */
.faq{margin-top:48px}
.faq__item{border:1px solid var(--line);border-radius:16px;margin-top:12px;background:#fff;overflow:hidden}
.faq__item:first-child{margin-top:0}
.faq__q{display:flex;align-items:center;gap:14px;width:100%;padding:20px 24px;font:inherit;font-size:1.05rem;
  font-weight:800;color:var(--ink);background:none;border:0;cursor:pointer;text-align:left;line-height:1.5}
.faq__q::before{content:"Q";flex:none;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;
  font-weight:900;font-size:.9rem;display:grid;place-items:center}
.faq__q::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--sub);transition:transform .2s}
html:lang(ja) .faq__q::after{content:"＋"}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 24px 22px 70px;color:var(--sub);font-size:.95rem;line-height:1.75}
html:lang(ja) .faq__a{line-height:1.85}

/* 最後の赤い節 */
.cta{background:var(--red);color:#fff;text-align:center}
.cta h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.2}
.cta p{max-width:54ch;margin:20px auto 0;font-size:clamp(1rem,1.7vw,1.15rem);line-height:1.8;color:#ffe3e5}
html:lang(ja) .cta p{line-height:1.9}
.cta__row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cta__mail{margin-top:26px;font-weight:800;font-size:1.05rem}
.cta__mail a{color:#fff}

/* 足（黒地） */
.foot{background:var(--ink);color:#b8b0ad;font-size:.86rem;padding-block:44px}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.foot a{color:#fff;text-decoration:none;font-weight:700}
.foot__brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:900;font-size:1.05rem}
.fineprint{margin-top:24px;font-size:.74rem;color:#7c7471;line-height:1.7;max-width:72ch}

/* 出てくる動き（html.js の時だけ隠して始める＝ JS が無くても読める） */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}