/* ============================================================
   トップページ（index.php）専用
   ヒーローは夜の藍 × 山吹。見本キャラクターの肖像壁が順に語りかけるのが主役。
   それ以降は淡い紙色で静かに。
   ============================================================ */
:root {
  --night: #0d1530;
  --night-2: #16224a;
  --cream: #f4efe3;
  --cream-dim: #b8bfd6;
}
body.lp .site-nav { background: var(--night); border-bottom-color: rgba(255,255,255,.08); position: sticky; top: 0; z-index: 20; }
body.lp .site-nav .brand, body.lp .nav-links a { color: var(--cream); }
body.lp .nav-links a:hover { color: var(--sun); }
body.lp .nav-links .nav-btn { background: var(--sun); color: var(--ink); }
body.lp .nav-links .nav-btn:hover { background: #ffc94a; color: var(--ink); }
body.lp .nav-user { color: var(--cream-dim); }
body.lp h1, body.lp h2, body.lp h3 { font-family: var(--font-display); }
body.lp { overflow-x: hidden; }

/* ---------- ヒーロー: ヘッダ画像 ---------- */
.lp-hero { background: var(--night); color: var(--cream); }
.lp-banner { position: relative; overflow: hidden; background: #0b1024; }
.lp-banner-pic img { display: block; width: 100%; height: auto; transform-origin: 15% 50%; animation: lp-kenburns 26s ease-in-out infinite alternate; }
@keyframes lp-kenburns { from { transform: scale(1); } to { transform: scale(1.045); } }
.lp-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.lp-sheen { position: absolute; top: -20%; bottom: -20%; left: -35%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); transform: skewX(-12deg); mix-blend-mode: soft-light;
  animation: lp-sheen 9s ease-in-out 1.2s infinite; }
@keyframes lp-sheen { 0% { left: -35%; opacity: 0; } 8% { opacity: 1; } 30% { left: 110%; opacity: 0; } 100% { left: 110%; opacity: 0; } }

/* キャラクターの近くにポンと出る吹き出し */
.lp-pop { position: absolute; left: var(--x); top: var(--y); max-width: min(30%, 340px); min-width: 190px; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 16px; padding: .55rem .9rem .65rem;
  font-size: clamp(.68rem, 1.05vw, .95rem); line-height: 1.55; box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 2px var(--sun); opacity: 0; transform: translateY(8px) scale(.94); pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.3); }
.lp-pop[style*="--tail:right"] { transform-origin: 100% 100%; translate: -100% 0; }
.lp-pop[style*="--tail:left"]  { transform-origin: 0 100%; }
.lp-pop::after { content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); border-right: 2px solid var(--sun); border-bottom: 2px solid var(--sun); }
.lp-pop[style*="--tail:right"]::after { right: 22px; }
.lp-pop[style*="--tail:left"]::after { left: 22px; }
.lp-pop.on { opacity: 1; transform: translateY(0) scale(1); }
.lp-pop-name { display: flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700; font-size: .82em; color: var(--indigo-deep); margin-bottom: .15em; }
.lp-pop-name i { display: inline-flex; gap: 2px; align-items: flex-end; height: .9em; }
.lp-pop-name i::before, .lp-pop-name i::after { content: ""; width: 3px; background: var(--indigo); border-radius: 2px; height: 40%; }
.lp-pop.on .lp-pop-name i::before { animation: lp-wave .7s ease-in-out infinite; }
.lp-pop.on .lp-pop-name i::after { animation: lp-wave .7s ease-in-out .2s infinite; }
.lp-pop-text { font-weight: 500; }

.lp-hero-bar { position: relative; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(245,181,43,.06), transparent); }
.lp-hero-bar-inner { max-width: 1180px; margin: 0 auto; padding: 1.6rem 24px 1.4rem; display: grid; grid-template-columns: 1fr auto; gap: 1.4rem 3rem; align-items: center; }
.lp-lead { font-size: 1rem; line-height: 1.85; color: var(--cream-dim); max-width: 40em; margin: 0; }
.lp-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.lp-btn { display: inline-flex; align-items: center; padding: .85em 1.7em; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s; white-space: nowrap; }
.lp-btn.gold { background: var(--sun); color: var(--ink); box-shadow: 0 10px 30px rgba(245,181,43,.25); }
.lp-btn.gold:hover { background: #ffc94a; transform: translateY(-1px); }
.lp-btn.line { border-color: rgba(255,255,255,.35); color: var(--cream); }
.lp-btn.line:hover { border-color: var(--cream); }
.lp-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.lp-hero h1.lp-h1-mobile { display: none; }

.lp-cast-strip { position: relative; border-top: 1px solid rgba(255,255,255,.1); padding: .9rem 24px; display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: center; font-size: .8rem; color: var(--cream-dim); }
.lp-cast-strip b { color: var(--cream); font-family: var(--font-display); margin-right: .45em; }
@keyframes lp-wave { 0%, 100% { height: 40% } 50% { height: 100% } }

/* ---------- デモ ---------- */
.lp-demo { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 4.5rem 24px; }
.lp-demo-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.lp-demo-inner > * { min-width: 0; }
.lp-demo-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.3; margin-bottom: .7em; }
.lp-demo-copy p { color: var(--ink-2); line-height: 1.85; margin-bottom: 1.4rem; }
.lp-demo-app { background: var(--night); color: var(--cream); border-radius: 22px; padding: 1rem 1rem 1rem; box-shadow: 0 30px 70px rgba(13,21,48,.35); }
.lp-demo-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .2rem .3rem .8rem; }
.lp-demo-guide { display: flex; align-items: center; gap: .7rem; }
.lp-demo-guide b { display: block; font-family: var(--font-display); }
.lp-demo-guide small { color: var(--cream-dim); font-size: .78rem; }
.lp-demo-face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sun); flex: none; transition: transform .15s; }
.lp-demo-face img { width: 100%; height: 100%; object-fit: cover; }
.lp-demo-app.speaking .lp-demo-face { animation: lp-bob .5s ease-in-out infinite alternate; }
@keyframes lp-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-3px) rotate(1.5deg); } }
.lp-demo-langs { display: flex; gap: 4px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 999px; }
.lp-demo-langs button { font: inherit; font-size: .8rem; font-family: var(--font-display); font-weight: 700; color: var(--cream-dim); background: transparent; border: 0; border-radius: 999px; padding: .35em .9em; cursor: pointer; }
.lp-demo-langs button.on { background: var(--sun); color: var(--ink); }
.lp-demo-screen { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.1rem 1.2rem 1.6rem; min-height: 7.5em; }
.lp-demo-emotion { position: absolute; top: -.7em; right: 1rem; width: 2em; height: 2em; border-radius: 50%; background: var(--sun); color: var(--ink); font-family: var(--font-display); font-weight: 900; display: grid; place-items: center; font-size: .95rem; transition: transform .25s; }
.lp-demo-emotion.pop { transform: scale(1.25) rotate(-8deg); }
.lp-demo-speech { font-size: 1.02rem; line-height: 1.75; font-weight: 500; min-height: 3.5em; }
.lp-demo-speech.thinking { color: var(--cream-dim); }
.lp-demo-speech.typing::after { content: "▍"; color: var(--sun); animation: lp-caret 1s steps(2) infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }
.lp-demo-wave { position: absolute; left: 1.2rem; bottom: .6rem; display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.lp-demo-wave i { width: 3px; height: 3px; background: var(--sun); border-radius: 2px; }
.lp-demo-app.speaking .lp-demo-wave i { animation: lp-wave2 .8s ease-in-out infinite; }
.lp-demo-app.speaking .lp-demo-wave i:nth-child(2n) { animation-delay: .15s } .lp-demo-app.speaking .lp-demo-wave i:nth-child(3n) { animation-delay: .3s } .lp-demo-app.speaking .lp-demo-wave i:nth-child(4n) { animation-delay: .08s }
@keyframes lp-wave2 { 0%, 100% { height: 3px } 50% { height: 14px } }
.lp-demo-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem .2rem .6rem; }
.lp-demo-chips button { max-width: 100%; white-space: normal; text-align: left; font: inherit; font-size: .84rem; color: var(--cream); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .4em 1em; cursor: pointer; transition: background .15s; }
.lp-demo-chips button:hover { background: rgba(245,181,43,.25); border-color: var(--sun); }
.lp-demo-input { display: flex; gap: .5rem; align-items: center; }
.lp-demo-input input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .7em 1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; }
.lp-demo-input input::placeholder { color: var(--cream-dim); }
.lp-demo-input input:focus { outline: 2px solid var(--sun); }
.lp-demo-input button { font: inherit; font-family: var(--font-display); font-weight: 700; border: 0; border-radius: 999px; cursor: pointer; }
.lp-demo-input #demoSend { background: var(--sun); color: var(--ink); padding: .7em 1.3em; }
.lp-demo-mic { width: 46px; height: 46px; background: var(--indigo); color: #fff; font-size: 1.2rem; flex: none; }
.lp-demo-mic.rec { background: var(--coral); animation: lp-pulse 1s infinite; }
@keyframes lp-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,255,255,.12); } }

/* ---------- しゃべる ---------- */
.lp-talk { max-width: 1180px; margin: 0 auto; padding: 5rem 24px 3rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.lp-talk-media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(23,35,58,.25); }
.lp-talk-media img { display: block; width: 100%; height: auto; }
.lp-talk-chip { position: absolute; max-width: 62%; padding: .7rem 1rem; border-radius: 16px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.lp-talk-chip.visitor { left: 5%; top: 7%; background: var(--night); color: var(--cream); border-bottom-left-radius: 4px; }
.lp-talk-chip.guide { right: 5%; bottom: 8%; background: #fff; color: var(--ink); border-bottom-right-radius: 4px; }
.lp-talk-copy h2, .lp-learn-copy h2, .lp-place-head h2, .lp-scenes h2, .lp-steps h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.3; margin-bottom: .7em; }
.lp-talk-copy > p, .lp-learn-copy > p { color: var(--ink-2); line-height: 1.85; }
.lp-spec { margin: 1.5rem 0 0; }
.lp-spec > div { display: grid; grid-template-columns: 4em 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.lp-spec dt { font-family: var(--font-display); font-weight: 700; color: var(--indigo); }
.lp-spec dd { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- 学ぶ ---------- */
.lp-learn { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4rem 24px; }
.lp-learn-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lp-list { padding: 0; margin: 1.3rem 0 0; list-style: none; }
.lp-list li { padding: .55em 0 .55em 1.6em; position: relative; border-top: 1px solid var(--line); font-size: .95rem; }
.lp-list li::before { content: ""; position: absolute; left: .2em; top: 1.05em; width: .55em; height: .55em; background: var(--sun); transform: rotate(45deg); }
.lp-learn-demo { display: grid; gap: .8rem; }
.lp-demo-q { justify-self: end; background: var(--night); color: var(--cream); padding: .6rem 1.1rem; border-radius: 16px 16px 4px 16px; font-family: var(--font-display); font-weight: 700; }
.lp-demo-doc { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; font-size: .88rem; line-height: 1.75; color: var(--ink-soft); }
.lp-demo-file { display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--indigo); margin-bottom: .3rem; }
.lp-demo-doc p { margin: 0; }
.lp-demo-doc mark { background: rgba(245,181,43,.45); color: var(--ink); padding: 0 .15em; }
.lp-demo-a { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: .8rem 1rem; font-family: var(--font-display); font-weight: 700; box-shadow: 6px 6px 0 var(--indigo-soft); }
.lp-demo-a img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ---------- 設置 ---------- */
.lp-place { max-width: 1180px; margin: 0 auto; padding: 4.5rem 24px 2rem; }
.lp-place-head p { color: var(--ink-soft); }
.lp-place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.lp-place-item h3 { font-size: 1.12rem; margin: 1rem 0 .4rem; }
.lp-place-item p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.75; }
.lp-place-visual { height: 190px; border-radius: 18px; background: var(--night); position: relative; overflow: hidden; display: grid; place-items: center; }
.lp-place-visual.qr { grid-template-columns: auto 1fr; gap: 1.2rem; padding: 0 1.4rem; justify-items: start; }
.lp-place-visual.qr img { width: 128px; height: 128px; border-radius: 10px; image-rendering: pixelated; }
.lp-place-visual.qr em { font-style: normal; color: var(--cream-dim); font-size: .85rem; line-height: 1.6; font-family: var(--font-display); }
.lp-place-visual.kiosk { align-items: end; }
.lp-place-visual.kiosk img { position: absolute; left: 50%; bottom: -20px; width: 140px; transform: translateX(-50%); border-radius: 12px 12px 0 0; box-shadow: 0 0 0 3px var(--sun); }
.lp-place-visual.kiosk i { position: absolute; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--sun); }
.lp-place-visual.kiosk i::after { content: "🎤"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2rem; }
.lp-place-visual.embed { background: var(--paper); border: 1px solid var(--line); }
.lp-place-visual.embed code { position: absolute; left: 16px; top: 16px; font-size: .78rem; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: .3em .6em; border-radius: 6px; }
.lp-place-visual.embed b { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: .5em; background: var(--indigo); color: #fff; padding: .5em 1em .5em .5em; border-radius: 999px; font-family: var(--font-display); font-size: .9rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.lp-place-visual.embed img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ---------- 場所 ---------- */
.lp-scenes { max-width: 1180px; margin: 0 auto; padding: 3rem 24px; }
.lp-scene-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
.lp-scene-list div { padding: 1rem 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); line-height: 1.7; }
.lp-scene-list b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; margin-bottom: .2em; }

/* ---------- 流れ ---------- */
.lp-steps { background: var(--night); color: var(--cream); padding: 4rem 24px; }
.lp-steps h2, .lp-step-list, .lp-steps-note { max-width: 1132px; margin-left: auto; margin-right: auto; }
.lp-steps h2 { color: #fff; }
.lp-step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 0; margin-top: 1rem; list-style: none; counter-reset: lp; }
.lp-step-list li { counter-increment: lp; position: relative; padding-top: 3.2rem; font-size: .92rem; line-height: 1.75; color: var(--cream-dim); border-top: 1px solid rgba(255,255,255,.15); }
.lp-step-list li::before { content: counter(lp); position: absolute; left: 0; top: .7rem; font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--sun); line-height: 1; }
.lp-step-list b { display: block; font-family: var(--font-display); color: #fff; font-size: 1.05rem; margin-bottom: .3em; }
.lp-steps-note { margin-top: 2rem; color: var(--cream-dim); font-size: .9rem; }

/* ---------- 締め ---------- */
.lp-close { text-align: center; padding: 4.5rem 24px 3rem; }
.lp-close-faces { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.lp-close-faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 6px 16px rgba(0,0,0,.15); margin: 0 -8px; }
.lp-close h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .4em; }
.lp-close p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.lp-close .lp-btn.gold { box-shadow: 0 10px 30px rgba(245,181,43,.35); }
body.lp .site-footer { margin-top: 2rem; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  .lp-hero-bar-inner { grid-template-columns: 1fr; gap: 1rem; }
  .lp-pop { min-width: 150px; padding: .4rem .7rem .5rem; }
  .lp-talk, .lp-learn-inner, .lp-demo-inner { grid-template-columns: 1fr; }
  .lp-place-grid, .lp-step-list { grid-template-columns: 1fr 1fr; }
  .lp-scene-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lp-pop, .lp-sheen { display: none; }
  .lp-banner-pic img { animation: none; }
  .lp-hero h1.lp-h1-mobile { display: block; font-size: 1.75rem; line-height: 1.3; color: #fff; margin: 0 0 .6rem; }
  .lp-hero-bar-inner { padding: 1.4rem 18px 1.2rem; }
  .lp-demo { padding: 3rem 18px; }
  .lp-demo-app { padding: .8rem; border-radius: 16px; }
  .lp-demo-speech { font-size: .95rem; }
  .lp-talk { padding-top: 3.5rem; }
  .lp-talk-chip { font-size: .8rem; max-width: 70%; }
  .lp-place-grid, .lp-step-list, .lp-scene-list { grid-template-columns: 1fr; }
  .lp-cast-strip { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-banner-pic img, .lp-sheen, .lp-pop-name i::before, .lp-pop-name i::after, .lp-demo-face, .lp-demo-wave i, .lp-demo-speech.typing::after, .lp-demo-mic.rec { animation: none !important; }
  .lp-pop, .lp-btn, .lp-demo-emotion { transition: none; }
  .lp-sparks { display: none; }
}
@media (max-width: 600px) { body.lp .brand { font-size: .92rem; } }
@media (max-width: 640px) { body.lp .site-nav { position: static; } }