/* Lead Section 試作v2：白ベース × 角丸 × 線が描かれる動き */
:root {
  --bg: #ffffff;
  --bg-tint: #fdf6ec;
  --ink: #1d1b17;
  --ink-2: #4b473f;
  --mute: #8f897d;
  --line: #ece7dd;
  --orange: #e8940c;
  --orange-2: #f0a531;
  --yellow: #f6c453;
  --green: #a8c96a; /* 緑・ピンクは細かい差し色だけに使う（メインは黄色） */
  --pink: #f29bb2;
  --gray: #d9d4ca;
  --soft: #fdebd0;
  --grid: #fbe3c4;
  --grad: linear-gradient(90deg, var(--orange), var(--yellow));
  --f-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "Archivo", "Helvetica Neue", sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --radius: 24px;
  --shadow: 0 16px 48px rgba(120, 80, 20, .08);
}
body[data-bg="cream"] { --bg: #fbf6ec; --bg-tint: #f6ecdb; --line: #ebe1cf; }
body[data-bg="recycled"] { --bg: #f2f0eb; --bg-tint: #e9e6df; --line: #e0dcd3; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--f-ja);
  font-size: 16px; line-height: 1.9; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .3s;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img { display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ボタン類 */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 32px;
  border-radius: 999px; background: var(--orange); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 20px rgba(232, 148, 12, .28); transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { background: #d9850a; box-shadow: 0 10px 24px rgba(232, 148, 12, .36); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-sm { height: 40px; padding: 0 20px; font-size: 13px; box-shadow: none; }
.btn-lg { height: 64px; padding: 0 40px; font-size: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; padding-bottom: 2px; border-bottom: 2px solid var(--soft); transition: border-color .2s; }
.text-link:hover { border-color: var(--orange); }
.tri { width: 0; height: 0; border-left: 8px solid var(--orange); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* 見出しの型（英字＋オレンジの点／日本語ラベル） */
.sec-head { margin-bottom: 56px; }
.en-title { font-family: var(--f-en); font-weight: 800; font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: -.02em; color: var(--orange); }
.en-title b { color: var(--yellow); }
.en-title.big { font-size: clamp(56px, 10vw, 140px); }
.ja-label { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-weight: 700; font-size: 15px; }
.ja-label i { width: 28px; height: 4px; border-radius: 4px; background: var(--grad); }
.ja-label.center { justify-content: center; }
.sec-catch { font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: 1.5; margin-bottom: 24px; }
.body { color: var(--ink-2); margin-bottom: 16px; }
.small-label { font-size: 13px; font-weight: 700; color: var(--mute); margin: 24px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 999px; background: var(--soft); }
.note-image { margin-top: 16px; font-size: 12px; color: var(--mute); text-align: right; }

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 80px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; transition: background-color .3s, box-shadow .3s, height .3s;
}
.site-header.is-solid { height: 64px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-en); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo img { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 700; }
.nav a:not(.nav-cta) { position: relative; }
.nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--orange); color: #fff; }
@media (max-width: 920px) { .nav a:not(.nav-cta) { display: none; } }

/* ファーストビュー */
.hero { position: relative; padding: 140px 0 0; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-grid path { fill: none; stroke: var(--grid); stroke-width: 14; stroke-linecap: round; opacity: .55; }
.hero-copy { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.kicker i { width: 28px; height: 4px; border-radius: 4px; background: var(--grad); }
.hero h1 { font-weight: 900; font-size: clamp(34px, 5vw, 72px); line-height: 1.32; letter-spacing: .01em; margin: 24px 0 24px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 em { font-style: normal; color: var(--orange); }
.sp-br { display: none; }
.lead { max-width: 40em; color: var(--ink-2); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; margin-top: 36px; }
.hero-stage { position: relative; z-index: 1; height: clamp(320px, 56vh, 640px); margin-top: -8px; }
.hero-stage canvas { width: 100%; height: 100%; display: block; }
.stage-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-en); font-size: 12px; color: var(--mute); letter-spacing: .1em; }

/* コンセプト（線が描かれる） */
.concept { position: relative; padding: 112px var(--gutter) 40px; text-align: center; overflow: hidden; }
.concept-line { width: min(1100px, 100%); height: auto; margin: 0 auto; display: block; overflow: visible; }
.concept-line path { fill: none; stroke: url(#lineGrad); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.concept-text { margin-top: 32px; }
.concept-catch { font-weight: 900; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.6; }
.concept-catch em { font-style: normal; background: linear-gradient(transparent 64%, var(--soft) 64%); }
.concept-sub { margin: 24px auto 0; max-width: 34em; color: var(--ink-2); }

/* セクション共通 */
.section { padding: 120px 0; overflow-x: clip; }
.section.tint { background: var(--bg-tint); }

/* 事業内容カード */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  position: relative; padding: 40px 32px 32px; border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(120, 80, 20, .12); }
.sc-icon { width: 120px; height: 90px; margin-bottom: 24px; overflow: visible; }
.sc-icon .draw { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sc-icon .draw.accent { stroke: var(--orange); }
.sc-icon .dot { fill: var(--orange); }
.sc-icon .dot.y { fill: var(--yellow); }
.sc-icon .dot.g { fill: var(--green); }
.sc-icon .dot.p { fill: var(--pink); }
.sc-en { font-family: var(--f-en); font-weight: 700; font-size: 13px; color: var(--orange); }
.service-card h3 { font-size: 24px; font-weight: 900; margin: 4px 0 12px; }
.service-card p:not(.sc-en) { color: var(--ink-2); font-size: 15px; }
.sc-more { display: inline-block; margin-top: 20px; font-weight: 700; font-size: 14px; color: var(--orange); }

/* 会社について */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.info { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.info th, .info td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--line); vertical-align: top; }
.info tr:last-child th, .info tr:last-child td { border-bottom: 0; }
.info th { width: 7.5em; color: var(--mute); font-weight: 700; }
.map-thumb { display: block; margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.map-thumb iframe { display: block; width: 100%; height: 160px; border: 0; pointer-events: none; }
.map-thumb span { display: block; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--orange); background: var(--bg); }
.map-a { position: relative; margin-top: 56px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: 440px; }
.map-a iframe, .map-c iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.55) contrast(.95); }
.map-a-card { position: absolute; left: 24px; bottom: 24px; background: var(--bg); border-radius: 18px; padding: 20px 24px; box-shadow: var(--shadow); }
.map-name { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.map-name img { width: 20px; }
.map-a-card .btn, .map-c-card .btn { margin-top: 12px; }
.map-c { position: relative; margin-top: 80px; height: 420px; }
.map-c-card { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); background: var(--bg); border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--shadow); min-width: 300px; }
.map-c-card .ja-label { margin: 0 0 12px; }
.muted { color: var(--mute); font-size: 14px; }

/* 詳細セクション */
.detail-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }

/* 広告：1本が育つ */
.grow { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 32px; border-radius: 32px; background: var(--bg-tint); }
.grow-phone { width: 200px; aspect-ratio: 9 / 18; border-radius: 32px; padding: 8px; background: #26231f; box-shadow: 0 24px 48px rgba(40, 30, 10, .25); }
.grow-screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #333; }
.gs-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.gs-layer.on { opacity: 1; }
.gs-bg { position: absolute; inset: 0; }
.gs-blob { position: absolute; border-radius: 50%; filter: blur(24px); }
.gs-person { position: absolute; left: 50%; bottom: 0; width: 70%; height: 46%; transform: translateX(-50%); }
.gs-person::before { content: ""; position: absolute; left: 50%; top: 0; width: 40%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: inherit; background: rgba(255,255,255,.85); }
.gs-person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 999px 999px 0 0; background: rgba(255,255,255,.85); }
.gs-telop { position: absolute; left: 8%; right: 8%; top: 22%; text-align: center; font-weight: 900; font-size: 19px; line-height: 1.4; }
.gs-telop span { background: #fffaf0; color: var(--ink); padding: 2px 8px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gs-telop span.o { background: var(--orange); }
.gs-ui { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); }
.gs-ui i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.grow-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; color: var(--mute); transition: background-color .3s, color .3s; }
.grow-list li b { font-family: var(--f-en); font-size: 13px; }
.grow-list li span { font-size: 13px; font-weight: 700; line-height: 1.5; }
.grow-list li em { white-space: nowrap; font-size: 14px; font-style: normal; font-family: var(--f-en); font-weight: 800; }
.grow-list li.on { background: var(--bg); color: var(--ink); box-shadow: 0 6px 16px rgba(120, 80, 20, .08); }
.grow-list li.on em { color: var(--orange); }
.grow-chart { width: 100%; margin-top: 16px; overflow: visible; }
.grow-chart .base { stroke: var(--line); stroke-width: 2; }
.grow-chart .line { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.grow-chart circle { fill: var(--bg); stroke: var(--orange); stroke-width: 4; }

/* ステップ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; position: relative; }
.steps::before { content: ""; position: absolute; left: 40px; right: 40px; top: 12px; height: 4px; border-radius: 4px; background: var(--line); }
.step { position: relative; padding-top: 44px; }
.step-dot { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px var(--bg); }
.tint .step-dot { box-shadow: 0 0 0 6px var(--bg-tint); }
.step-dot.y { background: var(--yellow); }
.step-dot.g { background: var(--green); }
.step-num { font-family: var(--f-en); font-weight: 700; font-size: 13px; color: var(--orange); }
.step h4 { font-size: 20px; font-weight: 900; margin: 4px 0 8px; }
.step p:last-child { color: var(--ink-2); font-size: 15px; }

/* 特徴リスト */
.feature { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; margin-top: 80px; padding: 48px; border-radius: 32px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.feature-head .ja-label { margin: 0 0 12px; font-family: var(--f-en); color: var(--orange); }
.feature-head h4 { font-size: 24px; font-weight: 900; margin-bottom: 12px; }
.feature-head p { color: var(--ink-2); font-size: 15px; }
.feature-list li { position: relative; padding: 16px 0 16px 32px; border-bottom: 1px solid var(--line); font-weight: 700; }
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before { content: ""; position: absolute; left: 4px; top: 27px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--orange); }

/* SNS：投稿のリング */
.ring-stage { position: relative; height: 520px; perspective: 1400px; display: grid; place-items: center; overflow: hidden; margin: 0 -40px; }
.ring { position: relative; width: 168px; height: 240px; transform-style: preserve-3d; }
.post {
  position: absolute; inset: 0; background: #fff; border-radius: 18px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; backface-visibility: hidden; box-shadow: 0 12px 28px rgba(120, 80, 20, .14);
}
.post-head { display: flex; align-items: center; gap: 8px; font-family: var(--f-en); font-size: 11px; font-weight: 700; }
.post-head i { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); }
.post-img { position: relative; flex: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 17px; line-height: 1.35; padding: 10px; color: var(--ink); }
.post-img b { position: relative; z-index: 1; background: #fffaf0; padding: 2px 8px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post-img::before, .post-img::after { content: ""; position: absolute; border-radius: 50%; filter: blur(18px); }
.post-img.o { background: linear-gradient(160deg, #f3a43a, #f8d9a6); }
.post-img.o::before { width: 90px; height: 90px; left: -10px; top: 10px; background: rgba(255,255,255,.5); }
.post-img.d { background: linear-gradient(160deg, #3a332a, #6d5638); }
.post-img.d::before { width: 100px; height: 100px; right: -20px; bottom: 0; background: rgba(232,148,12,.6); }
.post-img.y { background: linear-gradient(160deg, #f8d46e, #fbefc7); }
.post-img.y::before { width: 80px; height: 80px; left: 20px; bottom: -10px; background: rgba(232,148,12,.35); }
.post-img.g { background: linear-gradient(160deg, #c9dd9c, #f1f4dd); }
.post-img.p { background: linear-gradient(160deg, #f5b3c4, #fbe6ec); }
.post-img.p::before { width: 90px; height: 90px; left: -10px; bottom: -10px; background: rgba(255,255,255,.55); }
.post-img.g::before { width: 90px; height: 90px; right: -10px; top: -10px; background: rgba(255,255,255,.6); }
.post-foot { display: flex; justify-content: space-between; font-family: var(--f-en); font-size: 11px; font-weight: 700; color: var(--mute); }
.post-foot b { color: var(--orange); }

/* AI：ループ */
.ai-intro { max-width: 760px; }
.loop { position: relative; width: 100%; aspect-ratio: 1000 / 400; margin-top: 64px; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-svg path { fill: none; stroke: var(--soft); stroke-width: 14; stroke-linecap: round; }
.loop-dot { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(232, 148, 12, .2); z-index: 3; }
.node {
  position: absolute; width: 220px; transform: translate(-50%, -50%); z-index: 2;
  background: var(--bg); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
  transition: transform .3s;
}
.node.is-hit { animation: hit .7s ease-out; }
@keyframes hit { 30% { transform: translate(-50%, -50%) scale(1.06); } }
.node-dot { position: absolute; top: -10px; right: 18px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--bg); }
.node-dot.y { background: var(--yellow); }
.node-dot.g { background: var(--green); }
.node-dot.h { background: var(--ink); }
.node-human { background: var(--ink); color: #fff; border-color: var(--ink); }
.node-human .node-desc { color: #c9c3b6; }
.node-num { font-family: var(--f-en); font-weight: 700; font-size: 12px; color: var(--orange); }
.node-title { font-weight: 900; font-size: 18px; }
.node-desc { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.loop-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(20px, 2.4vw, 32px); text-align: center; line-height: 1.5; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }
.card { padding: 32px; border-radius: var(--radius); background: var(--bg-tint); }
.card-tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 999px; background: var(--orange); color: #fff; }
.card-tag.y { background: var(--yellow); color: var(--ink); }
.card-tag.g { background: var(--green); color: var(--ink); }
.card h4 { font-size: 20px; font-weight: 900; margin: 16px 0 8px; }
.card p:last-child { color: var(--ink-2); font-size: 15px; }

/* 紹介映像への導線 */
.reel-band { padding: 0 var(--gutter) 40px; }
.reel-card {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 28px 40px; border-radius: 999px;
  background: var(--grad); color: var(--ink); box-shadow: 0 16px 40px rgba(232, 148, 12, .25); transition: transform .3s;
}
.reel-card:hover { transform: translateY(-4px); }
.reel-play { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.reel-play .tri { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 4px; }
.reel-text { flex: 1; font-weight: 700; }
.reel-text b { display: block; font-size: 24px; font-weight: 900; }
.reel-arrow { font-size: 28px; font-weight: 700; }

/* お問い合わせ */
/* 成果報酬型 */
.reward { display: flex; align-items: center; gap: 40px; margin-top: 48px; padding: 40px 48px; border-radius: 32px; background: var(--bg-tint); }
.reward-icon { flex: none; width: 120px; height: 120px; overflow: visible; }
.reward-icon .draw { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.reward-icon .draw.accent { stroke: var(--orange); }
.reward .ja-label { margin: 0 0 8px; }
.reward h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; margin-bottom: 8px; }
.reward p:last-child { color: var(--ink-2); }

/* お問い合わせ */
.sec-head.center { text-align: center; }
.sec-head.center .body { max-width: 34em; margin: 20px auto 0; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 24px; padding: 48px; border-radius: 32px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 15px; }
.field > span em { font-style: normal; font-size: 11px; color: #fff; background: var(--orange); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px; }
.field input, .field textarea { font: inherit; font-weight: 500; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--soft); }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label { cursor: pointer; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios i { display: inline-block; font-style: normal; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); transition: all .2s; }
.radios input:checked + i { background: var(--orange); border-color: var(--orange); color: #fff; }
.radios input:focus-visible + i { box-shadow: 0 0 0 4px var(--soft); }
.contact-form .btn { align-self: flex-start; }
.form-note { font-size: 13px; color: var(--mute); }
.form-error { font-size: 14px; font-weight: 700; color: #c2410c; }
.contact-info { padding: 8px 0; }
.contact-info div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info dt { font-size: 13px; font-weight: 700; color: var(--mute); }
.contact-info dd { font-weight: 700; }
.contact-info a { color: var(--orange); }

/* フッター */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 700; }
.site-footer small { color: var(--mute); width: 100%; }

/* 試作用：切り替えパネル */
.sw { position: fixed; right: 16px; bottom: 16px; z-index: 80; background: rgba(255, 255, 255, .96); border-radius: 18px; box-shadow: 0 12px 32px rgba(40, 30, 10, .16); font-size: 12px; overflow: hidden; }
.sw-toggle { display: block; width: 100%; padding: 10px 16px; font-weight: 700; text-align: left; background: var(--ink); color: #fff; }
.sw-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sw.is-closed .sw-body { display: none; }
.sw-row { display: flex; align-items: center; gap: 4px; }
.sw-row > span { width: 3em; color: var(--mute); font-weight: 700; }
.sw-row button { padding: 4px 12px; border-radius: 999px; color: var(--ink-2); }
.sw-row button:hover { background: var(--soft); }
.sw-row button.on { background: var(--orange); color: #fff; }

/* スマホ */
@media (max-width: 960px) {
  .service-cards, .cards3, .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .about-grid, .detail-grid, .feature, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .reward { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; }
  .reward-icon { width: 80px; height: 80px; }
  .contact-form { padding: 28px 20px; }
  .feature { padding: 32px 24px; }
  .grow { grid-template-columns: 1fr; justify-items: center; }
  .grow-panel { width: 100%; }
  .ring-stage { height: 400px; margin: 0; }
  .loop { aspect-ratio: auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
  .loop-svg, .loop-dot, .loop-center { display: none; }
  .node { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; }
  .node.is-hit { animation: none; }
  .section { padding: 88px 0; }
  .reel-card { border-radius: 28px; padding: 20px 24px; }
  .reel-text b { font-size: 18px; }
  .map-c-card { left: 16px; right: 16px; top: auto; bottom: 16px; transform: none; min-width: 0; }
}
@media (max-width: 600px) {
  .hero { padding-top: 112px; }
  .hero-stage { height: 320px; }
  .sp-br { display: inline; }
  .hero-actions { gap: 20px; }
  .info th, .info td { padding: 14px 16px; }
  .sw { left: 8px; right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 試作用：地図の案の出し分け */
body:not([data-map="a"]) [data-variant="map:a"],
body:not([data-map="b"]) [data-variant="map:b"],
body:not([data-map="c"]) [data-variant="map:c"] { display: none; }

/* 立体ロゴの置き場所 */
body[data-logo="behind"] .hero { min-height: 100vh; padding-bottom: 80px; display: flex; flex-direction: column; justify-content: center; }
body[data-logo="behind"] .hero-stage { position: absolute; inset: 64px 0 0; height: auto; margin: 0; z-index: 1; opacity: .22; pointer-events: none; }
body[data-logo="behind"] .hero-copy { z-index: 3; width: 100%; }
body[data-logo="footer"] .hero { min-height: 88vh; padding-bottom: 80px; display: flex; flex-direction: column; justify-content: center; }
.logo-band { display: none; }
body[data-logo="footer"] .logo-band { display: block; padding: 40px 0 0; }
body[data-logo="footer"] .logo-band .hero-stage { height: clamp(280px, 44vh, 520px); margin: 0; }
body[data-logo="footer"] .contact { padding-bottom: 24px; }

/* ===== 広告：本物の縦型動画広告のようなフィード ===== */
.adsim { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.iphone { width: 290px; aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 52px; background: linear-gradient(145deg, #3a3631, #141210); box-shadow: 0 40px 80px rgba(40, 28, 10, .28), inset 0 0 0 2px #4a453e; }
.iphone-screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #000; isolation: isolate; }
.island { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 20; }
.feed { position: absolute; inset: 0; }
.clip { position: absolute; inset: 0; transform: translateY(100%); will-change: transform; overflow: hidden; }
.clip.on { transform: translateY(0); }
.clip-img { position: absolute; inset: -6%; background-size: cover; background-position: center; }
.clip.on .clip-img { animation: kenburns 9s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -3%); } }
.clip-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), transparent 18%, transparent 55%, rgba(0,0,0,.65)); }
.status { position: absolute; top: 14px; left: 26px; right: 22px; display: flex; justify-content: space-between; font-family: var(--f-en); font-size: 13px; font-weight: 700; color: #fff; z-index: 21; }
.status i { font-style: normal; letter-spacing: 2px; }
.tabs { position: absolute; top: 50px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.65); z-index: 5; }
.tabs b { color: #fff; margin-left: 14px; position: relative; }
.tabs b::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -6px; height: 2px; border-radius: 2px; background: #fff; }
.vtelop { position: absolute; left: 8%; right: 18%; top: 17%; z-index: 6; text-align: center; }
.vtelop p { display: inline-block; margin: 3px 0; font-weight: 900; font-size: 22px; line-height: 1.3; color: #fff; opacity: 0;
  text-shadow: 0 0 1px #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000; }
.vtelop p.hl { color: #ffd23f; }
.vtelop p.box { color: #1d1b17; text-shadow: none; background: #ffd23f; padding: 0 8px; border-radius: 4px; }
.side { position: absolute; right: 8px; bottom: 132px; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 6; color: #fff; font-family: var(--f-en); font-size: 11px; font-weight: 700; }
.side .av { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: url("logo/d-section.svg") center / 70% no-repeat, #fff; position: relative; }
.side .av::after { content: "+"; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 14px; line-height: 17px; text-align: center; }
.side span { display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.side svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.side .liked svg { fill: #fe2c55; }
.meta { position: absolute; left: 14px; right: 64px; bottom: 74px; z-index: 6; color: #fff; font-size: 12px; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.meta b { display: block; font-family: var(--f-en); font-size: 14px; }
.meta .sponsor { display: inline-block; margin-top: 4px; font-size: 10px; padding: 0 6px; border-radius: 3px; background: rgba(255,255,255,.25); }
.cta { position: absolute; left: 12px; right: 12px; bottom: 30px; height: 36px; border-radius: 6px; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); transition: background-color .4s; }
.cta.ready { background: var(--orange); }
.vbar { position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: rgba(255,255,255,.3); z-index: 6; }
.vbar i { display: block; height: 100%; width: 0; background: #fff; }
.homebar { position: absolute; left: 50%; bottom: 6px; width: 110px; height: 4px; margin-left: -55px; border-radius: 4px; background: rgba(255,255,255,.85); z-index: 21; }

.report { padding: 28px; border-radius: 28px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.report-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.report-head em { margin-left: auto; font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 13px; padding: 2px 12px; border-radius: 999px; background: var(--soft); color: var(--orange); }
.live { width: 8px; height: 8px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 0 rgba(254,44,85,.5); animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(254,44,85,0); } 100% { box-shadow: 0 0 0 0 rgba(254,44,85,0); } }
.report-label { margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--mute); }
.report-num { font-family: var(--f-en); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.report-num small { font-size: 28px; margin-left: 4px; color: var(--mute); }
.report-chart { width: 100%; height: 110px; margin: 16px 0 12px; overflow: visible; }
.report-chart .grid { stroke: var(--line); stroke-width: 1; fill: none; }
.report-chart .area { fill: url(#areaGrad); }
.report-chart .line { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.report-chart .head { fill: #fff; stroke: var(--orange); stroke-width: 3; }
.report-log li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); transition: color .3s; }
.report-log li b { font-family: var(--f-en); }
.report-log li em { font-style: normal; font-family: var(--f-en); font-weight: 800; }
.report-log li.done { color: var(--ink-2); }
.report-log li.on { color: var(--ink); font-weight: 700; }
.report-log li.on em { color: var(--orange); }

/* ===== SNS：崩れない投稿カルーセル（JSで配置） ===== */
.carousel { position: relative; height: 480px; }
.ccard { position: absolute; left: 50%; top: 50%; width: 210px; margin: -170px 0 0 -105px; border-radius: 20px; background: #fff; box-shadow: 0 16px 36px rgba(120, 80, 20, .16); overflow: hidden; will-change: transform; }
.ccard-img { position: relative; aspect-ratio: 1; background-size: cover; background-position: center; }
.ccard-img b { position: absolute; left: 10px; bottom: 10px; font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 4px; background: #fffaf0; }
.ccard-body { padding: 10px 12px 12px; }
.ccard-user { display: flex; align-items: center; gap: 6px; font-family: var(--f-en); font-size: 11px; font-weight: 700; }
.ccard-user i { width: 18px; height: 18px; border-radius: 50%; background: var(--grad); }
.ccard-foot { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--f-en); font-size: 12px; font-weight: 700; color: var(--mute); }
.ccard-foot .heart { color: #fe2c55; }
.pop-heart { position: absolute; left: 50%; top: 40%; font-size: 64px; color: #fe2c55; transform: translate(-50%, -50%) scale(0); pointer-events: none; text-shadow: 0 4px 12px rgba(254,44,85,.4); }

/* ===== AI：スマホでも動く循環図 ===== */
.cycle { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 64px auto 0; }
.cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cycle-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.cycle-ring .track { stroke: var(--soft); }
.cycle-ring .progress { stroke: var(--orange); }
.cycle-dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(232, 148, 12, .22); z-index: 3; }
.cycle-center { position: absolute; left: 50%; top: 50%; width: 50%; transform: translate(-50%, -50%); text-align: center; }
.cc-label { font-size: 14px; font-weight: 700; color: var(--orange); }
.cc-big { font-family: var(--f-en); font-weight: 800; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.2; margin: 4px 0; white-space: nowrap; }
.cc-big small { font-size: .45em; color: var(--mute); }
.cc-sub { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.cnode { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--line); white-space: nowrap; z-index: 4; transition: background-color .3s, color .3s, transform .3s; }
.cnode[data-i="0"] { left: 50%; top: 12.5%; }
.cnode[data-i="1"] { left: 87.5%; top: 50%; }
.cnode[data-i="2"] { left: 50%; top: 87.5%; }
.cnode[data-i="3"] { left: 12.5%; top: 50%; }
.cn-num { font-family: var(--f-en); font-weight: 700; font-size: 12px; color: var(--orange); }
.cnode b { font-size: 15px; }
.cnode i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft); }
.cnode.human i { background: var(--ink); color: #fff; }
.cnode.on { background: var(--orange); color: #fff; border-color: var(--orange); transform: translate(-50%, -50%) scale(1.08); }
.cnode.on .cn-num { color: #fff; }
.cnode.on i { background: rgba(255,255,255,.3); color: #fff; }

@media (max-width: 960px) {
  .adsim { grid-template-columns: 1fr; justify-items: center; }
  .report { width: 100%; }
  .carousel { height: 420px; }
}
@media (max-width: 600px) {
  .iphone { width: 260px; }
  .cnode { padding: 6px 10px; gap: 4px; }
  .cnode b { font-size: 12px; }
  .cnode i { display: none; }
  .cn-num { font-size: 10px; }
  .cc-sub { font-size: 11px; }
  .ccard { width: 170px; margin: -140px 0 0 -85px; }
}
#ad .detail-grid { grid-template-columns: .8fr 1.5fr; gap: 48px; }
.adsim { grid-template-columns: auto minmax(260px, 1fr); }
.report-head { white-space: nowrap; }
.report-log li span { line-height: 1.5; }
@media (max-width: 960px) { #ad .detail-grid { grid-template-columns: 1fr; } .adsim { grid-template-columns: 1fr; } }

.side .av.brand { background: linear-gradient(135deg, #f6c453, #e8940c); }
.report-log li { cursor: pointer; }
.report-log li:hover { color: var(--ink); }

/* 数字の帯 */
.numbers { padding: 24px 0 96px; }
.numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.num { padding: 36px 32px; border-radius: 28px; background: var(--bg-tint); text-align: center; }
.num-label { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.num-value { white-space: nowrap; font-family: var(--f-en); font-weight: 800; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.num-value .count { font-feature-settings: "tnum"; }
.num-value b { color: var(--orange); margin-left: 2px; }
.numbers-note { margin-top: 14px; font-size: 12px; color: var(--mute); text-align: right; }

/* 広告：クリエイティブ別レポート */
.report-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.report-kpi div { padding: 10px 14px; border-radius: 14px; background: var(--bg-tint); }
.report-kpi dt { font-size: 12px; font-weight: 700; color: var(--mute); }
.report-kpi dd { font-family: var(--f-en); font-weight: 800; font-size: 20px; }
#kpiType { font-family: var(--f-ja); font-size: 16px; }
.report-log li { grid-template-columns: auto 1fr auto; }
.report-log li b { font-family: var(--f-ja); font-size: 12px; }
.shop-tag { display: inline-flex; align-items: center; gap: 3px; margin: 0 0 2px 6px; padding: 0 6px; border-radius: 3px; background: #fe2c55; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.shop-tag svg { width: 10px; height: 10px; fill: #fff; }
.cta.ready { background: #fe2c55; }

@media (max-width: 960px) {
  .numbers-grid { grid-template-columns: 1fr; gap: 12px; }
  .num { padding: 24px; }
  .numbers-note { text-align: left; }
}

/* 誕生演出中：立体をはっきり見せ、見出しは待たせる */
body.intro-playing .hero-stage { opacity: 1 !important; }
body.intro-playing .hero-copy { opacity: 0; }
body[data-logo="behind"] .hero-stage { transition: opacity 1s ease; }
.hero-copy { transition: opacity .4s; }

/* 読み込み中のキャラ */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; opacity: 0; pointer-events: none; transition: opacity .4s; }
.loader.show { opacity: 1; pointer-events: auto; }
.loader-o { position: relative; width: 72px; height: 84px; border-radius: 50%; border: 18px solid var(--orange); animation: loaderBob 1s ease-in-out infinite; }
.loader-o i { position: absolute; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px #fff; animation: loaderBlink 2.4s infinite; }
.loader-o i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.loader-o i:first-child { left: -14px; }
.loader-o i:last-child { right: -14px; }
@keyframes loaderBob { 50% { transform: translateY(-8px); } }
@keyframes loaderBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }

/* ===== ページ全体に重ねる3Dの描画面 ===== */
.view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* 案内役の「O」 */
.mascot { position: fixed; right: 20px; bottom: 20px; width: 132px; height: 132px; z-index: 45; cursor: pointer; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.mascot.on { pointer-events: auto; }
.mascot-say { z-index: 1; }
.mascot-say { position: absolute; right: 88%; bottom: 72%; white-space: nowrap; padding: 8px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 8px 24px rgba(40, 28, 10, .14); font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: right bottom; transition: opacity .25s, transform .25s; pointer-events: none; }
.mascot-say.on { opacity: 1; transform: none; }

/* コンセプトの線（立体） */

/* 立体の数字 */
.num3d { display: inline-block; width: calc(var(--chars) * .66em); height: 1.15em; vertical-align: -.22em; }
.num-unit { font-size: .55em; margin-left: 2px; }

/* 締めの場面 */
.ending { position: relative; height: 78vh; min-height: 480px; overflow: hidden; }
.ending-copy em { font-style: normal; color: var(--orange); }
.ending-stage { position: absolute; inset: 0; }
.ending-copy { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-weight: 900; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.6; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.ending-copy.on { opacity: 1; transform: none; }
body:not(.has-3d) .ending { display: none; }

/* 広告のスマホ：スクロールとマウスで少し傾く */
.iphone { position: relative; transform: perspective(1200px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s ease-out; }
.iphone::after { content: ""; position: absolute; inset: 0; border-radius: 52px; pointer-events: none; z-index: 30; background: linear-gradient(115deg, transparent calc(var(--g, 30%) - 14%), rgba(255, 255, 255, .16) var(--g, 30%), transparent calc(var(--g, 30%) + 14%)); }

@media (max-width: 600px) {
  .mascot { width: 92px; height: 92px; right: 8px; bottom: 8px; }
  .mascot-say { font-size: 12px; }
  .ending { height: 56vh; min-height: 360px; }
}

/* 実績の一例 */
.cases { margin-top: 56px; }
.case-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.case { padding: 32px; border-radius: 24px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.case-genre { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--soft); }
.case-num { font-family: var(--f-en); font-weight: 800; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.1; margin: 14px 0 10px; color: var(--orange); }
.case-num small { font-family: var(--f-ja); font-size: 16px; color: var(--ink); margin-left: 6px; }
.case-desc { font-size: 14px; color: var(--ink-2); }

/* よくある質問 */
.faq-list { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }
.faq-list details { border-radius: 20px; background: var(--bg-tint); padding: 4px 28px; }
.faq-list summary { cursor: pointer; list-style: none; position: relative; padding: 20px 36px 20px 0; font-weight: 900; font-size: 17px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; font-family: var(--f-en); color: var(--orange); margin-right: 12px; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--f-en); font-size: 26px; color: var(--orange); transition: transform .25s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 0 22px 26px; color: var(--ink-2); }

@media (max-width: 960px) {
  .case-cards { grid-template-columns: 1fr; gap: 12px; }
  .case { padding: 24px; }
  .faq-list details { padding: 2px 18px; }
  .faq-list summary { font-size: 15px; }
}