/* ナレマネ Ai の LP だけの追加（土台は CYCORO の LP と同じ style.css） */

/* 最初の画面：絵の上に、答えの画面を重ねる */
.hero-browser { position: absolute; left: -6px; bottom: 0; width: 46%; max-width: 330px; }
.hero-browser img { width: 100%; aspect-ratio: 1800 / 1290; object-fit: cover; object-position: top; }
.hero-browser .browser-bar { height: 16px; padding: 0 8px; } .hero-browser .browser-bar i { width: 6px; height: 6px; }
@media (min-width: 1000px) { .hero-browser { left: -24px; width: 44%; } }

/* 構造の4行 */
.structure { background: #fff; padding-bottom: 40px; }
.structure-lines { counter-reset: st; display: grid; gap: 12px; max-width: 860px; }
.structure-lines li { counter-increment: st; position: relative; background: var(--sky-2); border: 1px solid #d6e2ff; border-radius: 14px; padding: 16px 18px 16px 58px; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.structure-lines li::before { content: counter(st); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-2); color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.org-title { margin: 28px 0 10px; font-weight: 900; color: var(--ink); }
.org-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.org-chips li { background: #fff; border: 1.5px solid #c7d7fe; color: var(--navy-2); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.org-chips li:first-child { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }

/* 考え方の3つ */
@media (min-width: 900px) { .pillar-grid.three { grid-template-columns: repeat(3, 1fr); } }
.pillar-grid.three .pillar h3 { padding-right: 40px; }

/* 解決：2つ目の画面を右下に重ねる */
.browser-float { position: absolute; right: 0; bottom: 0; width: 46%; max-width: 330px; }
.browser-float img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.browser-float .browser-bar { height: 16px; padding: 0 8px; } .browser-float .browser-bar i { width: 6px; height: 6px; }
.answer-visual > .browser:first-child img { max-height: 620px; width: 100%; object-fit: cover; object-position: top; }

/* 機能：画面の高さをそろえる */
.feature .browser { margin: 0 0 14px; border-radius: 10px; }
.feature .browser img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top left; }

/* チェーン店 */
.chain { background: linear-gradient(180deg, #fff, var(--sky-2)); }
.chain .h2 small { font-size: .55em; font-weight: 700; color: var(--muted); }
.chain-in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .chain-in { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.chain-lead { font-size: 18px; font-weight: 900; color: var(--ink); }
.chain-list { display: grid; gap: 8px; margin: 0 0 22px; }
.chain-list li { position: relative; padding: 10px 14px 10px 42px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; color: var(--ink); }
.chain-list li::before { content: "!"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--warm); color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; }
.chain-note { font-weight: 700; color: var(--blue); background: linear-gradient(transparent 60%, rgba(37, 99, 235, .15) 60%); display: inline; }
.chain-illust { width: 100%; box-shadow: 0 24px 48px -28px rgba(15, 23, 42, .45); }

/* 1業種1社 */
.exclusive { background: var(--soft); padding: 56px 0 0; }
.exclusive-box { border: 2px solid var(--warm); background: #fff; border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: 0 24px 48px -32px rgba(194, 65, 12, .5); }
.exclusive-kicker { display: inline-block; font-weight: 900; color: #fff; background: var(--warm); padding: 3px 14px; border-radius: 999px; font-size: 14px; margin-bottom: 12px; }
.exclusive-box h2 { font-size: clamp(22px, 4.6vw, 32px); font-weight: 900; margin-bottom: 12px; }
.exclusive-box p { margin: 0 auto; max-width: 640px; }
.price-foot { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--warm-2); }

/* 見出しを「問い合わせで、／仕事が止まっていませんか。」の2行に収める */
.hero h1 { font-size: clamp(26px, 6.9vw, 44px); }
@media (min-width: 1000px) { .hero h1 { font-size: clamp(32px, 3.3vw, 44px); } }

/* 一番のコピー（2026-11-01 KAI）：見出しの下の一言と、悩みの前の問いかけ */
.hero h1 { font-size: clamp(25px, 6.6vw, 42px); }
@media (min-width: 1000px) { .hero h1 { font-size: clamp(30px, 3vw, 40px); } }
.hero-sub { margin: 14px 0 0; font-size: clamp(17px, 4.2vw, 21px); line-height: 1.5; font-weight: 900; color: #fdba74; }
.hero-q { margin: 22px 0 0; font-size: 15px; font-weight: 700; color: #bfdbfe; }
.hero-q + .hero-worries { margin-top: 10px; }
/* 使うほど成長する */
.grow { margin-top: 18px; border-radius: var(--radius); padding: 24px; background: linear-gradient(160deg, #0b1f4d, #163b8f); color: #dbeafe; }
.grow h3 { color: #fff; font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.grow p { margin: 0; font-size: 16px; }
.grow b { color: #fff; background: linear-gradient(transparent 62%, rgba(234, 88, 12, .6) 62%); }

/* 見出し（2026-11-02 KAI）：「社内の知恵と、社外の知見をひとつに。」「知りたい答えを、AIでピンポイントに。」の2文を、それぞれ新しい行から始める */
.hero h1 .ln { display: block; }