/* VoiceOS — 和文エディトリアル。紙とインクと、録音の赤。 */

:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdf;
  --ink: #1b1713;
  --ink-soft: #575046;
  --gray: #8d857a;
  --hairline: #ddd4c3;
  --red: #d8402f;
  /* 明朝は全廃(スピード感を出すアプリなのに正書っぽく見えるため)。全てゴシック */
  --serif: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --disp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.9;
  font-size: 15px;
  letter-spacing: 0.02em;
  position: relative;
}

/* 紙の質感。ごく薄い粒子を全面に */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* ---------- ヘッダー ---------- */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
}
.wordmark svg { display: block; }

nav.site a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  margin-left: 26px;
  letter-spacing: 0.08em;
}
nav.site a:hover { color: var(--red); }

/* ---------- ヒーロー ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 44px;
  gap: 40px;
  align-items: center;
  padding: 84px 0 96px;
  position: relative;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--red);
  margin-bottom: 22px;
}

h1.display {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.5;
  letter-spacing: 0.03em;
}
/* 行の切れ目は意図した位置に固定する（中途半端な折り返しをさせない） */
h1.display .line { display: inline-block; white-space: nowrap; }
h1.display .beat { color: var(--red); text-decoration: none; font-size: 1.32em; line-height: 1; letter-spacing: 0; }
h1.display a.beat:hover { text-decoration: underline dotted; text-underline-offset: 6px; }

.hero .lede {
  margin-top: 26px;
  color: var(--ink-soft);
  max-width: 30em;
}

.cta-row {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 15px 34px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn:hover { background: var(--red); transform: translateY(-1px); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.btn.ghost:hover { color: var(--red); outline-color: var(--red); background: transparent; }

.cta-note { font-size: 12px; color: var(--gray); line-height: 1.7; }

/* 縦書きの帯 */
.tategaki {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.42em;
  color: var(--gray);
  border-left: 1px solid var(--hairline);
  padding-left: 18px;
  height: 240px;
  align-self: start;
  margin-top: 12px;
}

/* ---------- デモカード（波形 → 文字） ---------- */

/* ---------- デモ: 人が PC に話しかけ、チャット入力欄にゼロ秒で入る ----------
   4.5秒で一周。キーを離した瞬間（50%）に吹き出しが消え、同時に全文がボンッと出る */

.scene { display: grid; gap: 16px; }

.speaker { display: flex; align-items: flex-end; gap: 14px; padding-left: 4px; }
.person { color: var(--ink); flex: none; opacity: 0.9; }

.speech {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.speech .keyline { display: flex; align-items: center; gap: 10px; margin-left: 6px; }

/* 押しているあいだだけ点滅する録音の赤丸 */
.recdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  opacity: 0;
  animation: recgate 4.5s linear infinite;
}
.recdot.how { animation-duration: 6s; margin-left: -6px; animation-name: recgatehow; }
@keyframes recgatehow {
  0%, 4.9% { opacity: 0; }
  5% { opacity: 1; }
  12% { opacity: 0.3; }
  19% { opacity: 1; }
  26% { opacity: 0.3; }
  33% { opacity: 1; }
  35.9% { opacity: 0.5; }
  36%, 100% { opacity: 0; }
}
@keyframes recgate {
  0%, 4.9% { opacity: 0; }
  5% { opacity: 1; }
  10% { opacity: 0.3; }
  15% { opacity: 1; }
  20% { opacity: 0.3; }
  25% { opacity: 1; }
  30% { opacity: 0.3; }
  35% { opacity: 1; }
  40% { opacity: 0.3; }
  45% { opacity: 1; }
  49.9% { opacity: 0.5; }
  50%, 100% { opacity: 0; }
}

/* ⌥ キー。喋っているあいだ押し込まれている */
.demo-key {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px 6px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--hairline);
  white-space: nowrap;
  animation: keypress 4.5s linear infinite;
}
/* キーを押す指: 上を向いた指が手首を支点に倒れてタップする */
.finger {
  position: absolute;
  left: 72%;
  bottom: calc(100% + 3px);
  font-size: 22px;
  line-height: 1;
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: fingerpress 4.5s linear infinite;
}
@keyframes fingerpress {
  0% { transform: rotate(8deg); }
  4%, 49.9% { transform: rotate(-138deg); }
  53%, 100% { transform: rotate(8deg); }
}
@keyframes keypress {
  0%, 3% { transform: none; box-shadow: 0 3px 0 var(--hairline); background: #fffdf8; border-color: var(--hairline); }
  5%, 49.9% { transform: translateY(3px); box-shadow: 0 0 0 var(--hairline); background: var(--paper-deep); border-color: #c7ab9e; }
  50%, 100% { transform: none; box-shadow: 0 3px 0 var(--hairline); background: #fffdf8; border-color: var(--hairline); }
}

/* 押しているあいだ、キーから波紋が繰り返し放たれる */
.demo-key, .keycap.big { position: relative; }
.w {
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--red);
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
  animation: wavepulse 4.5s linear infinite;
}
.keycap.big .w { animation-duration: 6s; animation-name: howwave; }
.keycap.big .w2 { animation-name: howwave2; }
@keyframes howwave {
  0%, 5.9% { opacity: 0; transform: scale(1); }
  6% { opacity: 0.18; transform: scale(1); }
  20% { opacity: 0; transform: scale(1.4); }
  20.9% { opacity: 0; transform: scale(1); }
  21% { opacity: 0.18; }
  35.5% { opacity: 0; transform: scale(1.4); }
  35.6%, 100% { opacity: 0; }
}
@keyframes howwave2 {
  0%, 12.9% { opacity: 0; transform: scale(1); }
  13% { opacity: 0.12; transform: scale(1); }
  27% { opacity: 0; transform: scale(1.55); }
  27.9% { opacity: 0; transform: scale(1); }
  28% { opacity: 0.12; }
  35.5% { opacity: 0; transform: scale(1.3); }
  35.6%, 100% { opacity: 0; }
}
.w2 { animation-name: wavepulse2; }
@keyframes wavepulse {
  0%, 5.9% { opacity: 0; transform: scale(1); }
  6% { opacity: 0.18; transform: scale(1); }
  20% { opacity: 0; transform: scale(1.4); }
  20.9% { opacity: 0; transform: scale(1); }
  21% { opacity: 0.18; }
  35% { opacity: 0; transform: scale(1.4); }
  35.9% { opacity: 0; transform: scale(1); }
  36% { opacity: 0.18; }
  49.5% { opacity: 0; transform: scale(1.4); }
  49.6%, 100% { opacity: 0; }
}
@keyframes wavepulse2 {
  0%, 13.4% { opacity: 0; transform: scale(1); }
  13.5% { opacity: 0.12; transform: scale(1); }
  27.5% { opacity: 0; transform: scale(1.55); }
  28.4% { opacity: 0; transform: scale(1); }
  28.5% { opacity: 0.12; }
  42.5% { opacity: 0; transform: scale(1.55); }
  43%, 100% { opacity: 0; }
}

/* 人の口から出る吹き出し */
.bubble {
  display: inline-block;
  position: relative;
  padding: 9px 16px;
  font-size: 12.5px;
  min-height: 1.5em;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  border-bottom-left-radius: 3px;
  transform-origin: bottom left;
  animation: bubblepop 4.5s linear infinite;
}
@keyframes bubblepop {
  0%, 3% { opacity: 0; transform: scale(0.85) translateY(4px); }
  5%, 49.9% { opacity: 1; transform: none; }  /* 喋っているあいだ */
  50%, 100% { opacity: 0; transform: none; }  /* 離した瞬間、消える */
}
/* 一文字ずつ、速い発話で湧く（15文字 ≈ 1.8秒） */
.bubble .say {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: speak 4.5s linear infinite;
}
@keyframes speak {
  0%, 6% { max-width: 0; }
  44%, 100% { max-width: 24em; }
}

/* チャットの窓 */
.chatwin {
  margin-left: 56px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(27, 23, 19, 0.35);
  overflow: hidden;
}
/* PC: 結果文が入った最大幅で固定。入力アニメ中に横が伸び縮みしない */
@media (min-width: 521px) {
  .hero .scene .chatwin {
    /* 「予算は確定、リリースは来月頭で決まりました。」+ 送信ボタンが収まる幅 */
    width: 420px;
    max-width: 100%;
    box-sizing: border-box;
  }
}
.chatbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--gray);
}
.chatbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.chatbar span { margin-left: 8px; letter-spacing: 0.08em; }

.chatbody { padding: 18px 16px 16px; }
.msg {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-radius: 12px;
  border-top-left-radius: 3px;
  padding: 7px 13px;
  margin-bottom: 18px;
}

.inputrow { display: flex; align-items: center; gap: 8px; }
.chatinput {
  flex: 1;
  min-width: 0;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
}
.result {
  display: inline-block;
  transform-origin: left center;
  overflow: hidden;
  white-space: nowrap;
  animation: resultpop 4.5s linear infinite;
}
/* オフモードの速さの表現: キーを離した瞬間（50%）、遅延ゼロで全文がボンッ */
@keyframes resultpop {
  0%, 49.9% { opacity: 0; transform: scale(0.92); max-width: 0; }
  51.5% { opacity: 1; transform: scale(1.06); max-width: 30em; }
  54%, 92% { opacity: 1; transform: scale(1); max-width: 30em; }
  97%, 100% { opacity: 0; max-width: 30em; }
}
.caret {
  display: inline-block;
  flex: none;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  background: var(--red);
  animation: recblink 1.1s ease-in-out infinite;
}
@keyframes recblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* 送信ボタン。文が入った瞬間に赤く点く（押せる状態になった合図） */
.send {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  background: #c8bfae;
  animation: sendarm 4.5s linear infinite;
}
@keyframes sendarm {
  0%, 49.9% { background: #c8bfae; }
  51%, 92% { background: var(--red); }
  97%, 100% { background: #c8bfae; }
}

/* ---------- 帯見出し ---------- */

section { padding: 78px 0; border-top: 1px solid var(--hairline); }

.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 48px; }
.sec-head .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.1em;
}
.sec-head h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 0.06em;
}

/* ---------- 使い方 3 ステップ ---------- */

/* 使い方: 1つの舞台で「押す→喋る→離す」を再生する（6秒で一周）。
   吹き出しはキーが押されているあいだだけ生きていて、離した瞬間に入力欄へボンッ */

.howgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.howstage {
  margin: 0;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 26px 28px 24px;
  box-shadow: 0 20px 50px -30px rgba(27, 23, 19, 0.3);
}
.stage-tag {
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.stage-tag b { color: var(--ink); font-weight: 700; }
.howrow { display: flex; align-items: center; gap: 18px; min-height: 54px; flex-wrap: wrap; }

.keycap {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 14px 10px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  color: var(--ink);
}
.keycap.big {
  font-size: 14px;
  padding: 10px 18px 11px;
  box-shadow: 0 4px 0 var(--hairline);
  animation: keydown2 6s linear infinite;
}
.keycap.big .finger { font-size: 24px; animation: fingerpress6 6s linear infinite; }
@keyframes fingerpress6 {
  0% { transform: rotate(8deg); }
  4.5%, 35.9% { transform: rotate(-138deg); }
  39%, 100% { transform: rotate(8deg); }
}
@keyframes keydown2 {
  0%, 3% { transform: none; box-shadow: 0 4px 0 var(--hairline); background: #fffdf8; border-color: var(--hairline); }
  5%, 35.9% { transform: translateY(4px); box-shadow: 0 0 0 var(--hairline); background: var(--paper-deep); border-color: #c7ab9e; }  /* 押している */
  36%, 100% { transform: none; box-shadow: 0 4px 0 var(--hairline); background: #fffdf8; border-color: var(--hairline); }             /* 離した */
}

/* 吹き出しは押されているあいだだけ */
.how-bubble { margin: 0; animation-name: howbubble; animation-duration: 6s; }
@keyframes howbubble {
  0%, 6% { opacity: 0; transform: scale(0.85) translateY(4px); }
  8%, 35.9% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: none; }
}
.say3 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: speak3 6s linear infinite;
}
@keyframes speak3 {
  0%, 8% { max-width: 0; }
  33%, 100% { max-width: 17em; }
}

.how-input {
  margin-top: 22px;
  display: flex;
  align-items: center;
  min-height: 2.5em;
  padding: 8px 16px;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
}
.howpop {
  display: inline-block;
  transform-origin: left center;
  overflow: hidden;
  white-space: nowrap;
  animation: howpop 6s linear infinite;
}
/* オフ版: 離した瞬間（36%）に、喋ったままの文が即出る */
.howpop-raw {
  display: inline-block;
  transform-origin: left center;
  overflow: hidden;
  white-space: nowrap;
  animation: howpopraw 6s linear infinite;
}
@keyframes howpopraw {
  0%, 35.9% { opacity: 0; transform: scale(0.92); max-width: 0; }
  37.4% { opacity: 1; transform: scale(1.05); max-width: 30em; }
  40%, 90% { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}

/* 整え版: 吹き出しが消えて（36%）から0.5秒（6秒の8.3%）おいて出る */
@keyframes howpop {
  0%, 44.2% { opacity: 0; transform: scale(0.92); max-width: 0; }
  45.7% { opacity: 1; transform: scale(1.05); max-width: 30em; }
  48%, 90% { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}

/* 動きに同期して灯る 3 つの言葉 */
.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
  padding: 0;
  max-width: 820px;
}
.how-steps li {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  animation: 6s linear infinite;
}
.how-steps li:nth-child(1) { animation-name: lab1; }
.how-steps li:nth-child(2) { animation-name: lab2; }
.how-steps li:nth-child(3) { animation-name: lab3; }
@keyframes lab1 { 0%, 2% { opacity: 0.4; } 4%, 16% { opacity: 1; } 20%, 96% { opacity: 0.4; } 100% { opacity: 0.4; } }
@keyframes lab2 { 0%, 16% { opacity: 0.4; } 20%, 34% { opacity: 1; } 38%, 100% { opacity: 0.4; } }
@keyframes lab3 { 0%, 34% { opacity: 0.4; } 38%, 90% { opacity: 1; } 95%, 100% { opacity: 0.4; } }
.how-steps b {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 6px;
}
.how-steps span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }

/* ---------- 研究データの帯 ---------- */

.evidence { text-align: center; max-width: 640px; margin: 0 auto; }
.ev-big {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 0.04em;
}
.ev-big .accent { color: var(--red); font-size: 1.35em; }
.ev-sub {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.ev-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin: 34px 0 30px;
  flex-wrap: wrap;
}
.ev-stat { display: grid; gap: 2px; }
.ev-stat .n {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.2;
  color: var(--ink);
}
.ev-stat .n small { font-size: 19px; margin-left: 2px; }
.ev-stat .l { font-size: 12.5px; color: var(--gray); }
.ev-note strong { color: var(--ink); }
.lede strong { color: var(--ink); }
.ev-note { margin-top: 22px; font-size: 12.5px; color: var(--gray); line-height: 2; }
.ev-note a { color: var(--gray); text-decoration: underline; text-underline-offset: 3px; }
.ev-note a:hover { color: var(--red); }

/* 出典リンク: 小さい下線テキストではなく、押しやすいカード/ボタンとして堂々と見せる */
.ev-src {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ev-src-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-right: 2px;
}
.ev-src-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1.3px solid var(--hairline);
  border-radius: 9px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.4;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.ev-src-link:hover,
.ev-src-link:focus-visible {
  border-color: var(--red);
  color: var(--red);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(216, 64, 47, 0.14);
}
.ev-src-ext {
  font-size: 12px;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ev-src-link:hover .ev-src-ext,
.ev-src-link:focus-visible .ev-src-ext {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* 潮流: 海外報道（シリコンバレーの「打たない」働き方） */
.ev-trend {
  margin-top: 46px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline);
}
.ev-trend-head {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
}
.ev-trend-photo { margin: 20px 0 0; }
.ev-trend-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}
.ev-trend-photo figcaption {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--gray);
}
.ev-carousel { margin-top: 16px; position: relative; }
.ev-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ev-track::-webkit-scrollbar { display: none; }
.ev-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px;
  border: 1.3px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ev-slide:hover,
.ev-slide:focus-visible { border-color: var(--red); background: var(--paper); }
.ev-eye {
  width: 300px;
  height: auto;
  aspect-ratio: 1.91 / 1;   /* OGP標準比。出典ごとの比率差をそろえる */
  object-fit: cover;
  flex: none;
  border-radius: 10px;
  display: block;
}
.ev-slide-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tc-src {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray);
}
.tc-body { font-size: 15.5px; line-height: 1.95; }
.tc-ext { font-size: 13.5px; font-weight: 700; color: var(--red); opacity: 0.8; }
.ev-slide:hover .tc-ext { opacity: 1; }
.ev-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.3px solid var(--hairline); background: var(--paper-deep);
  color: var(--ink-soft); font-size: 24px; line-height: 1; padding: 0 0 3px;
  cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ev-arrow:hover { border-color: var(--red); color: var(--red); background: var(--paper); }
.ev-arrow.prev { left: -21px; }
.ev-arrow.next { right: -21px; }
@media (max-width: 900px) { .ev-arrow { display: none; } }
.ev-dots { position: relative; display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ev-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: var(--hairline);
}
/* スクロール量に比例してすべる赤い点（JSが transform で動かす） */
.ev-dot-cursor {
  position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--red); pointer-events: none; will-change: transform;
}
.ev-trend-note {
  margin-top: 22px;
  font-size: 14px;
  line-height: 2;
  color: var(--ink-soft);
}
.ev-trend-note strong { color: var(--ink); }
@media (max-width: 520px) {
  .ev-sub { font-size: 12.5px; letter-spacing: 0.03em; white-space: nowrap; }
  .ev-trend { margin-top: 36px; padding-top: 28px; }
  .ev-trend-head { font-size: 17px; }
  .ev-slide { flex-direction: column; align-items: stretch; gap: 12px; }
  .ev-eye { width: 100%; }
}

/* ---------- PR動画 ---------- */
.video-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #000;
}
.pr-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.pr-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pr-video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-wrap.playing .pr-video-play { opacity: 0; }
@media (max-width: 520px) {
  .video-wrap { border-radius: 10px; }
  .pr-video-play { width: 58px; height: 58px; }
  .pr-video-play svg { width: 22px; height: 22px; }
}

/* ---------- 特徴 ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.feature {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 40px 36px 44px;
}
.feature .kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--red);
  margin-bottom: 10px;
}
.feature h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0 0 12px; line-height: 1.6; }
.feature p { font-size: 14px; color: var(--ink-soft); }
.feature strong { color: var(--ink); }

/* ---------- 価格 ---------- */

.price-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 54px 40px 46px;
  background: #fffdf8;
  position: relative;
}
.price-card::before {
  content: "月額";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.28em;
  padding: 3px 16px 4px 20px;
  border-radius: 2px;
}
.price-card .trial {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--red);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.price-card .amount { font-family: var(--serif); font-weight: 800; font-size: 62px; line-height: 1.2; }
.price-card .amount small { font-size: 22px; font-weight: 700; }
.price-card .usd { color: var(--gray); font-size: 13px; margin-top: 2px; }
.price-card ul {
  list-style: none;
  margin: 30px auto 34px;
  max-width: 21em;
  text-align: left;
  font-size: 14px;
}
.price-card li { padding: 9px 0 9px 26px; border-bottom: 1px dashed var(--hairline); position: relative; }
.price-card li::before { content: "─"; color: var(--red); position: absolute; left: 0; }

/* ---------- FAQ ---------- */

.faq { max-width: 720px; }
.faq dt {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16.5px;
  padding-top: 26px;
}
.faq dt::before { content: "問 "; color: var(--red); font-size: 13px; margin-right: 6px; }
.faq dd { color: var(--ink-soft); font-size: 14px; padding: 6px 0 22px 1.8em; border-bottom: 1px solid var(--hairline); }

/* ---------- フッター ---------- */

footer.site {
  border-top: 1px solid var(--ink);
  margin-top: 40px;
  padding: 40px 0 60px;
  font-size: 12.5px;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}
footer.site a { color: var(--ink-soft); text-decoration: none; margin-right: 22px; }
footer.site a:hover { color: var(--red); }

/* ---------- 下層（特商法・プライバシー） ---------- */

.doc { max-width: 760px; margin: 0 auto; padding: 70px 0 40px; }
.doc h1 { font-family: var(--serif); font-weight: 800; font-size: 30px; margin-bottom: 14px; }
.doc .updated { font-size: 12px; color: var(--gray); margin-bottom: 46px; }
.doc h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  margin: 40px 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--red);
}
.doc p, .doc li { font-size: 14px; color: var(--ink-soft); }
.doc ul { padding-left: 1.4em; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 400;
}
.doc th { width: 11em; background: var(--paper-deep); font-family: var(--serif); font-weight: 700; white-space: nowrap; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 56px 0 64px; }
  .tategaki { display: none; }
  .how-steps { grid-template-columns: 1fr; }
  .howgrid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .doc table { display: block; width: 100%; border-collapse: separate; margin: 8px 0 20px; }
  .doc tbody { display: block; }
  .doc tr {
    display: block;
    background: var(--paper-deep);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .doc tr:last-child { margin-bottom: 0; }
  .doc th, .doc td {
    display: block;
    width: auto;
    border: none;
    padding: 0;
    background: none;
    font-size: 13.5px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .doc th {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11.5px;
    color: var(--gray);
    white-space: normal;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  .doc td { color: var(--ink-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .result, .caret, .say, .demo-key, .send,
  .how-steps li, .keycap.big, .say3, .howpop, .w, .recdot, .finger { animation: none; }
  .bubble, .result, .pop3 { opacity: 1; transform: none; }
  .say, .say2 { width: auto; max-width: none; }
  .send { background: var(--red); }
  .how-steps li { opacity: 1; }
  .w { opacity: 0; }
}


/* ---------- 用途ビネット（生成AI / 上司メール / おまけチャット） ---------- */

.scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.usecase {
  margin: 0;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 26px 28px 24px;
  box-shadow: 0 20px 50px -30px rgba(27, 23, 19, 0.3);
}
.usecase.uc-wide { grid-column: 1 / -1; }
.uc-wide .ucbody {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}
.ucwin { margin-left: 0; box-shadow: none; }
.usecase .speech { margin-bottom: 20px; }
.uc-wide .speech { margin-bottom: 0; padding-top: 8px; }

/* 自分が送った側の吹き出し（おまけチャット） */
.msg.out {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  border-top-right-radius: 3px;
}

/* 上司メール版: 発話（18文字）と、0.5秒おいて敬語で出る文 */
.sayB {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: speakB 6s linear infinite;
}
@keyframes speakB {
  0%, 8% { max-width: 0; }
  33%, 100% { max-width: 20em; }
}
.howpopB {
  display: inline-block;
  transform-origin: left center;
  overflow: hidden;
  white-space: nowrap;
  animation: howpopB 6s linear infinite;
}
@keyframes howpopB {
  0%, 44.2% { opacity: 0; transform: scale(0.92); max-width: 0; }
  45.7% { opacity: 1; transform: scale(1.05); max-width: 30em; }
  48%, 90% { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}
.send.sendB { animation-name: sendarmB; animation-duration: 6s; }
@keyframes sendarmB {
  0%, 44.2% { background: #c8bfae; }
  45.7%, 90% { background: var(--red); }
  95%, 100% { background: #c8bfae; }
}

.day-close {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .scenes { grid-template-columns: 1fr; }
  .uc-wide .ucbody { grid-template-columns: 1fr; }
}


/* ---------- 心当たりリストと開発者の声 ---------- */

.fitlist {
  list-style: none;
  max-width: 640px;
  padding: 0;
}
.fitlist li {
  position: relative;
  padding: 20px 0 20px 42px;
  border-bottom: 1px dashed var(--hairline);
  font-size: 15px;
  color: var(--ink-soft);
}
.fitlist li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 20px;
  font-size: 19px;
  color: var(--red);
  font-weight: 700;
}
/* 痛みのフレーズを主役に: 太ゴシックの見出し+小さな補足 */
.pain {
  display: block;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.pain .hit { font-style: normal; color: var(--red); }
.nb { display: inline-block; }  /* 改行は必ず文節の切れ目で */
.painsub { display: block; margin-top: 5px; font-size: 13px; }
.fit-close .marker {
  background: linear-gradient(transparent 62%, rgba(214, 69, 45, 0.22) 62%);
  padding: 0 2px;
}
.fit-close {
  margin-top: 26px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.9;
}

.devvoice {
  max-width: 640px;
  margin: 0;
  padding: 22px 24px 20px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.voices { margin-top: 0; }
.voices .sec-head { margin-bottom: 14px; }
.voices-lead {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 14px;
}
@media (max-width: 520px) {
  .voices { margin-top: 0; }
  .voices-lead { font-size: 16px; }
}
.devvoice p { font-size: 14.5px; color: var(--ink-soft); }
.devvoice cite { display: block; margin-top: 12px; font-style: normal; font-size: 12.5px; color: var(--gray); }


/* ---------- その場で測れる実験コーナー ---------- */

.tryit {
  max-width: 720px;
  margin: 20px 0 0;
}
.try-head { font-family: var(--serif); font-weight: 800; font-size: 21px; }
.try-lead { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.try-target {
  margin: 18px 0 20px;
  padding: 12px 16px;
  background: var(--paper-deep);
  border-radius: 8px;
  font-size: 14px;
}
.try-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.try-card { display: grid; gap: 10px; align-content: start; }
.try-label { font-size: 13px; font-weight: 700; }
.try-card textarea {
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  resize: none;
}
.try-card textarea:focus { outline: 2px solid var(--red); border-color: transparent; }
.try-mic {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.try-mic:hover { background: var(--red); }
.try-mic { user-select: none; -webkit-user-select: none; touch-action: none; }
.try-mic.holding { background: var(--red); }
.try-transcript { font-size: 13px; color: var(--ink-soft); min-height: 1.6em; }
.try-result { font-size: 13.5px; color: var(--gray); }
.try-verdict {
  margin-top: 24px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 24px;
  color: var(--red);
  min-height: 1.4em;
}
.try-note { margin-top: 14px; font-size: 11.5px; color: var(--gray); line-height: 1.8; }

@media (max-width: 860px) {
  .try-grid { grid-template-columns: 1fr; }
}


/* ---------- 3プランの価格表 ---------- */

.price-lead { margin-bottom: 28px; font-size: 14.5px; color: var(--ink-soft); }
.price-lead strong { color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

/* 4枚が同じ高さで並ぶよう、仕様の表を下端に寄せる */
.plan-spec { margin-top: auto; }
.plan-common.sub { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

/* 無料の段。有料と並べても浮かないよう、色は変えず「0円」だけ目立たせる */
.plan-free .plan-price { color: var(--red); }
.plan-tag.free { background: var(--ink); color: var(--paper); }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px 26px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.plan.featured { border-color: var(--ink); box-shadow: 0 20px 50px -30px rgba(27, 23, 19, 0.4); }
.plan-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  padding: 3px 14px 4px; border-radius: 999px; white-space: nowrap;
}
.plan-name { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 800; font-size: 19px; letter-spacing: 0.06em; }
.plan-grade { color: var(--red); line-height: 0; flex: none; }
.plan-grade svg { display: block; }
.plan-price { font-family: var(--serif); font-weight: 800; font-size: 38px; line-height: 1.2; }
.plan-price span { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--gray); margin-left: 4px; }
.plan-quota { font-size: 13.5px; color: var(--ink-soft); }
.plan-quota b { color: var(--ink); }
.plan-for { font-size: 12.5px; color: var(--gray); flex: 1; }
.plan .btn { text-align: center; margin-top: 6px; }

.price-notes { list-style: none; margin-top: 28px; padding: 0; }
.price-notes li {
  position: relative; padding: 6px 0 6px 20px;
  font-size: 12.5px; color: var(--gray); line-height: 1.9;
}
.price-notes li::before { content: "—"; position: absolute; left: 0; color: var(--hairline); }
.price-notes strong { color: var(--ink-soft); }
.price-notes a { color: var(--ink-soft); }

@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }


/* ---------- スマホ最適化（見やすさ優先で全体を整える） ---------- */

/* デスクトップでは体験パネルは普通のブロック。開閉UIは出さない */
.try-open-btn { display: none; }
.try-panel-head { display: none; }

@media (max-width: 520px) {
  html, body { overflow-x: clip; }
  .wrap { padding: 0 20px; }

  /* ヘッダー: ロゴ行の下にナビを1行で並べる */
  header.site { flex-wrap: wrap; gap: 10px 0; padding: 16px 0 14px; }
  .wordmark { font-size: 19px; }
  nav.site { width: 100%; display: flex; gap: 0 18px; }
  nav.site a { margin-left: 0; font-size: 12.5px; white-space: nowrap; letter-spacing: 0.04em; }

  /* ヒーロー: 主張 → デモ → CTA の一本道 */
  .hero { padding: 40px 0 44px; gap: 16px; }
  .eyebrow { margin-bottom: 16px; }
  h1.display { font-size: clamp(29px, 8.6vw, 38px); line-height: 1.45; }
  .hero .lede { margin-top: 18px; font-size: 14px; }
  .cta-row { flex-direction: column; align-items: stretch; margin-top: 26px; gap: 12px; }
  .cta-row .btn { text-align: center; padding: 16px 20px; font-size: 15px; }
  .cta-note { text-align: center; }

  /* ヒーローのデモ（人→チャット）を縮めて収める */
  /* キャラは小さな丸アイコンで吹き出しの語り手に。実演のチャットが主役 */
  .scene { display: grid; grid-template-columns: 64px 1fr; gap: 0 8px; align-items: start; }
  .hero-char { display: block; width: 64px; height: 64px; border-radius: 14px;
               margin: 0; object-fit: cover; }
  /* LINE風: アイコンに向く左上角だけ尖らせる */
  .bubble { border-radius: 14px; border-top-left-radius: 4px; border-bottom-left-radius: 14px; }
  .chatwin { grid-column: 1 / -1; margin-top: 2px; }
  .speaker { gap: 4px; padding-left: 0; }
  .speech { margin-bottom: 0; gap: 6px; }
  /* 一文字ずつ湧く演出はそのまま。幅に収まる文字サイズに調整するだけ */
  .bubble { font-size: 10.5px; padding: 7px 10px; }
  svg.person { width: 54px; height: 58px; }
  .bubble { font-size: 11px; padding: 8px 12px; }
  .speech { margin-bottom: 12px; }
  .chatwin { margin-left: 0; }
  .chatbody { padding: 14px 12px 12px; }

  /* スタンフォードの数字は縦に大きく見せる */
  .ev-stats { flex-direction: column; gap: 22px; margin: 28px 0 24px; }
  .ev-stat { justify-items: center; }
  .ev-stat .n { font-size: 44px; }
  .ev-stat .l { font-size: 13px; }

  /* 体験コーナー: ボタン → 全画面パネルで上下比較 */
  .try-open-btn { display: block; width: 100%; text-align: center; padding: 16px 20px; font-size: 15px; }
  .try-panel { display: none; }
  .try-panel.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--paper);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 20px calc(40px + env(safe-area-inset-bottom));
  }
  .try-panel.open .try-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 15px;
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 16px;
  }
  .try-close {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 8px 12px;
  }
  .try-target { font-size: 14px; line-height: 1.9; }
  .try-mic { width: 100%; padding: 16px; font-size: 15px; }
  #type-box, #voice-box { font-size: 16px; }   /* iOSの自動ズームを防ぐ */
  .try-verdict { font-size: 16px; text-align: center; }

  /* 価格・締めのセクション */
  .price-card .amount { font-size: 48px; }
  .plan { padding: 24px 20px 22px; }
  .pain { font-size: 17px; }
  .painsub { font-size: 12.5px; }
  .faq dt { font-size: 15.5px; }

  /* フッター */
  footer.site a { display: inline-block; margin: 0 16px 8px 0; }
}

/* スマホの価格表: 横スワイプのカルーセル（人気プランを初期表示） */
@media (max-width: 520px) {
  .plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -20px;
    padding: 16px 20px 18px;   /* 上16px = 「いちばん人気」バッジ(-12px)が切れない余白 */
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 20px 18px 18px;      /* PC の 30/26 から縮小 */
    gap: 7px;
  }
  /* カードが縦に長くなりすぎないよう、中の余白・文字を詰める */
  .plan .plan-name  { font-size: 13px; letter-spacing: .12em; }
  .plan .plan-for   { font-size: 13.5px; }
  .plan .plan-price { font-size: 34px; margin: 2px 0; }
  .plan .plan-price span { font-size: 13px; }
  .plan .plan-meter { margin: 8px 0; }
  .plan .plan-spec  { gap: 8px; padding-top: 8px; }
  .plan .plan-spec dt { font-size: 12.5px; }
  .plan .plan-spec dd { font-size: 13.5px; }
  .plan .plan-tag   { top: -11px; font-size: 11.5px; padding: 4px 12px; }
}

/* ---------- 放置コスト（02）とクロージング ---------- */

.cost-lead { font-size: 15px; color: var(--ink-soft); }
#cost .ev-stats { justify-content: flex-start; }
.cost-note { margin-top: 20px; font-size: 13px; color: var(--gray); line-height: 2.1; max-width: 640px; }
.cost-note strong { color: var(--ink-soft); }

.closing { text-align: center; padding: 26px 0 60px; }
.closing-line {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.closing .cta-note { margin-top: 16px; }
@media (max-width: 520px) {
  .closing .btn { display: block; text-align: center; padding: 16px 20px; }
  #cost .ev-stats { align-items: flex-start; }
  #cost .ev-stat { justify-items: start; }
}

/* スマホの書き起こし結果: 折り返して全文見せる。
   幅0→30emのタイプ演出は折り返しと相性が悪い（1文字ずつ縦積みで巨大化）ので、
   スマホでは「フォントサイズ0→実寸」で出す。空のときはカーソルが左端、
   文が出たら最後の文字の右にカーソルが来る（実物の入力欄と同じ振る舞い） */
@keyframes resultpopM {
  0%, 49.9% { opacity: 0; font-size: 0px; }
  51.5%, 92% { opacity: 1; font-size: 12.5px; }
  97%, 100% { opacity: 0; font-size: 12.5px; }
}
@keyframes howpoprawM {
  0%, 35.9% { opacity: 0; font-size: 0px; }
  37.4%, 90% { opacity: 1; font-size: 12.5px; }
  95%, 100% { opacity: 0; font-size: 12.5px; }
}
@keyframes howpopM {
  0%, 44.2% { opacity: 0; font-size: 0px; }
  45.7%, 90% { opacity: 1; font-size: 12.5px; }
  95%, 100% { opacity: 0; font-size: 12.5px; }
}
@media (max-width: 520px) {
  .chatinput { display: block; min-height: 2.5em; height: auto; padding: 8px 14px; }
  .result, .howpop, .howpop-raw, .howpopB {
    display: inline;
    white-space: normal;
    max-width: none !important;
    overflow: visible;
  }
  .result { animation-name: resultpopM; }
  .howpop, .howpopB { animation-name: howpopM; }
  .howpop-raw { animation-name: howpoprawM; }
}

/* スマホの使い方: 「1 押す → 2 喋る → 3 離す」を舞台の上で1つずつ、動きに同期して見せる */
@keyframes stepM1 { 0%, 16% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes stepM2 { 0%, 16% { opacity: 0; } 20%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes stepM3 { 0%, 34% { opacity: 0; } 38%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (max-width: 520px) {
  #how { display: flex; flex-direction: column; }
  #how .sec-head { order: 0; }
  #how .how-steps { order: 1; margin: 0 0 20px; }
  #how .howgrid { order: 2; }
  .how-steps { display: block; position: relative; min-height: 104px; max-width: none; }
  .how-steps li {
    position: absolute;
    inset: 0;
    border-top: none;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--paper-deep);
    padding: 12px 14px;
    opacity: 0;
  }
  .how-steps li:nth-child(1) { animation-name: stepM1; }
  .how-steps li:nth-child(2) { animation-name: stepM2; }
  .how-steps li:nth-child(3) { animation-name: stepM3; }
  .how-steps b { font-size: 17px; margin-bottom: 4px; }
  .how-steps b::before {
    content: "";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--red);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    vertical-align: 1px;
  }
  .how-steps li:nth-child(1) b::before { content: "1"; }
  .how-steps li:nth-child(2) b::before { content: "2"; }
  .how-steps li:nth-child(3) b::before { content: "3"; }
}

/* スマホの使い方の舞台: 吹き出しは折り返しに任せず、最初から option キーの真下に置く */
@media (max-width: 520px) {
  .howrow {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 10px;
    min-height: 108px;
  }
  .howrow .bubble { grid-column: 1 / -1; justify-self: start; }
  .recdot.how { margin-left: 0; justify-self: start; }
  .how-input { display: block; min-height: 2.5em; height: auto; }
}

/* スマホ: 入力欄は常に2行ぶんの高さを確保。文が出たり消えたりしても下の要素が動かない。
   68px = 2行(カーソルぶんの行高増を含む)+余白 の最大値。これ未満だと2pxの揺れが残る */
@media (max-width: 520px) {
  .chatinput { min-height: 68px; align-content: center; }
}

/* スマホ: 吹き出しも固定枠。文字の有無で行ボックス高が数px変わり、下が揺れるのを止める */
@media (max-width: 520px) {
  .bubble { min-height: 40px; }
}

/* ---------- はじめ方（06・番号ステッパー） ---------- */

.start-lead { font-size: 15px; color: var(--ink-soft); margin-bottom: 28px; }
.start-lead strong { color: var(--ink); }
.start-steps { list-style: none; counter-reset: sstep; max-width: 720px; padding: 0; }
.start-steps li {
  counter-increment: sstep;
  position: relative;
  padding: 0 0 24px 54px;
}
.start-steps li::before {
  content: counter(sstep);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-weight: 800; font-size: 16px;
}
.start-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 16.5px; top: 36px; bottom: 4px;
  width: 1px; background: var(--hairline);
}
.start-steps b { display: block; font-family: var(--serif); font-weight: 700; font-size: 16.5px; margin-bottom: 4px; }
.start-steps span { font-size: 13.5px; color: var(--ink-soft); line-height: 2; }
.start-cta { margin-top: 14px; }
.start-cta .cta-note { margin-top: 10px; }
@media (max-width: 520px) {
  .start-cta .btn { display: block; text-align: center; padding: 16px 20px; }
}


/* 準備中のボタン(押せない見た目)。
   Windows 版の配布開始まで display:none で非表示にしてある — 出すときはこの1行を消すだけ */
.btn.soon { opacity: 0.55; cursor: default; pointer-events: none; display: none; }


/* macOS/Windows の2ボタンは同じ幅に揃える(広い方に合わせる) */
/* 既定（PC・広いタブレット）は横並び。Mac が左・Windows が右 */
.dl-btns { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%; }
/* 640px 以下（スマホ・狭いタブレット）は縦積みに戻す */
@media (max-width: 640px) {
  .dl-btns { flex-direction: column; gap: 10px; width: 100%; }
}
.dl-btns .btn { display: block; text-align: center; }
@media (max-width: 520px) {
  .dl-btns { width: 100%; }
}


/* ヒーロー締めの強調(最速かつ正確) */
.lede .fastest { color: var(--red); font-weight: 700; }

/* デスクトップ: 一文だけの締め(tagline)は説明文の下に少し space を空けて */
.hero .tagline { margin-top: 12px; }

/* 完全日本語対応バッジ（開発者が海外風でも日本語で使えると一目で分かるように） */
.jp-badge { margin-top: 14px; }
.jp-badge span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink);
  border: 1px solid var(--hairline);
  background: var(--paper-deep);
  border-radius: 999px;
  padding: 7px 16px;
}
.jp-badge i { font-style: normal; color: var(--red); font-weight: 900; }

/* デモ体験へ飛ぶフローティングボタン */
.demo-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: #3fd47a; color: #0a0a0d;
  font-weight: 800; font-size: 14px; letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(63, 212, 122, 0.45);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.demo-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.demo-fab.show { opacity: 1; pointer-events: auto; transform: none; }

/* フッターのロゴ */
footer.site .footer-brand {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
  font-family: var(--disp); font-weight: 900; font-size: 17px;
  color: var(--ink); text-decoration: none;
}

/* スマホのヒーローは「見出し → 最速かつ正確の一文 → ボタン+価格 → デモ → 説明」の順。
   動画広告からの流入はスクロールせずにボタンと価格へ着くことを優先する */
@media (max-width: 520px) {
  .hero { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
  .hero > div:first-child { display: contents; }
  .hero .eyebrow { display: none; }
  .hero h1.display { order: 1; }
  .hero .tagline { order: 2; margin-top: 0; }
  .hero .jp-badge { order: 2; margin-top: -12px; text-align: center; }
  .hero .cta-row { order: 3; margin-top: 0; }
  .hero .scene { order: 4; }
  .hero .lede:not(.tagline) { order: 5; margin-top: 0; }
}


/* ヒーロー見出しは明朝でなく極太ゴシックでインパクトを出す */
h1.display {
  font-family: var(--disp);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.4;
}


/* スマホのナビはハンバーガーに畳む(PCは従来どおり横並び) */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px 2px; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
@media (max-width: 520px) {
  header.site { flex-wrap: nowrap; position: relative; gap: 0; }
  .nav-burger { display: block; margin-left: auto; }
  nav.site { display: none; }
  header.site.nav-open nav.site {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 16px 20px 18px;
    z-index: 40;
  }
  header.site.nav-open nav.site a { font-size: 14px; margin: 0; }
}


/* スマホは各セクションが1画面に収まる密度にする */
@media (max-width: 520px) {
  section { padding: 72px 0; }
  .sec-head { margin-bottom: 24px; }
  .sec-head h2 { font-size: 23px; }
  .fitlist li { padding: 13px 0 13px 38px; }
  .fitlist li::before { top: 13px; }
  .fit-close { margin-top: 18px; font-size: 17px; line-height: 1.8; }
  /* 02: 数字は罫線入りの行で詰める。オチの21営業日だけ赤 */
  #cost .cost-lead { margin-bottom: 4px; }
  #cost .ev-stats { display: block; margin: 10px 0 14px; }
  #cost .ev-stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--hairline);
  }
  #cost .ev-stat .n { font-size: 34px; min-width: 128px; }
  #cost .ev-stat .n small { font-size: 15px; }
  #cost .ev-stat .l { font-size: 13px; }
  #cost .ev-stat:last-child .n { color: var(--red); }
  #cost .cost-note { margin-top: 14px; }
}


/* スマホの03: 1画面に収める(吹き出しをキーの横に収め、余白を圧縮) */
@media (max-width: 520px) {
  #how .howgrid { gap: 14px; }
  #how .howstage { padding: 14px 16px 16px; }
  #how .stage-tag { margin-bottom: 8px; }
  #how .howrow {
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    min-height: 0;
  }
  #how .howrow .bubble { grid-column: auto; justify-self: start; }
  #how .how-bubble { font-size: 11px; }
  #how .how-input { margin-top: 10px; }
  #how .how-steps { min-height: 92px; margin-bottom: 14px; }
  #how .how-steps li { padding: 10px 14px; }
}


/* 03: ①押す─②喋る─③離す のステッパー(進行に同期してグレー→カラー) */
.how-flow {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
}
.how-flow li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--gray);
}
.how-flow li i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 12px;
  font-family: var(--mono);
  line-height: 1;
  padding-bottom: 2px;  /* モノ書体のディセント分、数字が下に見えるのを補正 */
}
.how-flow li + li::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--hairline);
  margin: 0 12px;
}
.how-flow li:nth-child(1) { animation: flow1 6s linear infinite; }
.how-flow li:nth-child(2) { animation: flow2 6s linear infinite; }
.how-flow li:nth-child(3) { animation: flow3 6s linear infinite; }
@keyframes flow1 { 0%, 1.9% { color: var(--gray); } 2%, 91.9% { color: var(--red); } 92%, 100% { color: var(--gray); } }  /* 累積式 */
@keyframes flow2 { 0%, 8.9% { color: var(--gray); } 9%, 91.9% { color: var(--red); } 92%, 100% { color: var(--gray); } }
@keyframes flow3 { 0%, 35.9% { color: var(--gray); } 36%, 91.9% { color: var(--red); } 92%, 100% { color: var(--gray); } }

/* 03: 舞台1枚に統合。キー+吹き出しは共通、出力は 整形オフ/オン の2行 */
.howstage.solo { max-width: 620px; }
.how-out { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.out-tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.how-out .how-input { flex: 1; margin-top: 0; }
@media (max-width: 520px) {
  .how-flow { justify-content: center; margin-bottom: 14px; }
}


/* 03の舞台: 1行目=吹き出し、2行目=optionキー の固定2段(改行事故をなくす) */
.howstack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.howstack .how-bubble { min-height: 40px; }
.keyline2 { display: flex; align-items: center; gap: 12px; }
.keyline2 .recdot.how { margin-left: 0; }


/* 03の枠下の補足（1文＝1項目の箇条書き） */
.how-note {
  margin-top: 16px;
  max-width: 620px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
  list-style: none;
  padding: 0;
  text-align: left;
}
.how-note li {
  position: relative;
  padding-left: 1.1em;
}
.how-note li + li { margin-top: 8px; }
.how-note li::before {
  content: "・";
  position: absolute;
  left: 0;
}


/* スマホの04(研究の数字): 中央寄せをやめ、02と同じ数字の行組みで見せる */
@media (max-width: 520px) {
  .evidence { text-align: left; max-width: none; margin: 0; }
  .ev-big { font-size: 24px; line-height: 1.6; }
  .ev-sub { margin-top: 6px; font-size: 13px; }
  #evidence .ev-stats { display: block; margin: 12px 0 0; }
  #evidence .ev-stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--hairline);
  }
  #evidence .ev-stat .n { font-size: 34px; min-width: 128px; }
  #evidence .ev-stat .n small { font-size: 15px; }
  #evidence .ev-stat .l { font-size: 13px; }
  #evidence .ev-note { margin-top: 14px; text-align: left; }
  #evidence .ev-src { margin-top: 18px; justify-content: flex-start; }
}


/* 体験コーナーの声カード: 課題文をボタンの真上に置き、押している間は大きく読みやすく */
.try-say {
  margin: 2px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.try-card:has(.try-mic.holding) .try-say {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}


/* 開発者の声: 「作った本人が使い倒している」ことを見出しで立てる */
.devvoice-head {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--ink);
  margin-bottom: 10px;
}


/* 体験ボタン: 黄色の跳ねるCTA */
.try-open-btn {
  text-align: center;
  background: #ffd23d;
  color: #1b1713;
  border: none;
  animation: ctahop 2.8s ease-in-out infinite;
}
.try-open-btn:hover { background: #ffc90f; }
@keyframes ctahop {
  0%, 60%, 100% { transform: translateY(0); }
  68% { transform: translateY(-9px); }
  76% { transform: translateY(0); }
  83% { transform: translateY(-4px); }
  90% { transform: translateY(0); }
}
.try-open-sub {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.try-under {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.9;
}


/* 計測パネル(スマホ): 課題文を主役にして1画面に収める */
@media (max-width: 520px) {
  .try-panel.open .try-target {
    margin: 12px 0 14px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.8;
  }
  .try-panel.open .try-grid { gap: 16px; }
  .try-panel.open .try-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .try-panel.open .try-label .try-result { font-size: 12px; text-align: right; }
  .try-panel.open .try-card textarea { min-height: 60px; }
  .try-panel.open .try-say { min-height: 54px; }
  .try-panel.open .try-note { display: none; }
}


/* 使う場面カード: 上にタイトル、下に「こういう使い方」の説明 */
.uc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.uc-desc {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.9;
}


/* スマホの価格: カードを詰めて中央スナップ、注記を圧縮して1画面に */
@media (max-width: 520px) {
  #price .plans { padding: 14px 36px 14px; }
  #price .plan { flex: 0 0 80%; padding: 18px 18px 16px; gap: 8px; }
  #price .plan-price { font-size: 32px; }
  #price .plan-name { font-size: 17px; }
  #price .price-notes { margin-top: 14px; }
  #price { padding: 48px 0; }
  #price .price-notes li { padding: 3px 0 3px 18px; font-size: 11.5px; line-height: 1.75; }
}


/* 始め方: ターミナル派向けのワンライナー */
.cli {
  display: block;
  margin-top: 8px;
  max-width: 480px;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 9px 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}

/* ============================================================
   V2: 黒背景・光速スピードテーマ(試作)
   ============================================================ */
:root {
  --paper: #0a0a0d;
  --paper-deep: #16161c;
  --ink: #f4f1ea;
  --ink-soft: #b6b1a8;
  --hairline: #2b2b33;
  --red: #3da5ff;  /* v2はアクセントを青に(黒×白×青) */
  --gray: #8d897f;
}
body { background: radial-gradient(1200px 600px at 50% -100px, #141420, var(--paper) 60%); }

/* 明るい紙色でハードコードされていた面を暗いパネルに */
.chatwin, .howstage, .devvoice, .plan, .try-wrap, .faq details {
  background: #121218;
}
.chatbar { background: #1a1a22; }
.chatinput, .try-card textarea, .how-input {
  background: #0e0e13;
  color: var(--ink);
  border-color: #34343e;
}
.bubble, .msg { background: #1d1d25; border-color: #34343e; }
.demo-key, .keycap.big {
  background: #191920;
  border-color: #3d3d48;
  box-shadow: 0 3px 0 #000;
  color: var(--ink);
}
.send { background: #3a3a44; }

/* 光速の演出 */
h1.display .beat {
  text-shadow: 0 0 22px rgba(61, 165, 255, 0.55), 0 0 60px rgba(61, 165, 255, 0.25);
}
.hero { overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(61, 165, 255, 0.18) 45%, transparent 60%) 0 10% / 200% 2px no-repeat,
    linear-gradient(90deg, transparent 10%, rgba(244, 241, 234, 0.10) 55%, transparent 70%) 0 17% / 200% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(61, 165, 255, 0.10) 50%, transparent 65%) 0 25% / 200% 1px no-repeat;
  animation: speedlines 2.6s linear infinite;
}
@keyframes speedlines {
  0% { background-position: 200% 10%, 260% 17%, 320% 25%; }
  100% { background-position: -200% 10%, -140% 17%, -80% 25%; }
}
.marker { background: linear-gradient(transparent 62%, rgba(61, 165, 255, 0.45) 62%); }

/* v2-keyframes: キー押下の色はキーフレーム内にハードコードされているため暗色で再定義 */
@keyframes keypress {
  0%, 3% { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
  5%, 49.9% { transform: translateY(3px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  50%, 100% { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes keydown2 {
  0%, 3% { transform: none; box-shadow: 0 4px 0 #000; background: #191920; border-color: #3d3d48; }
  5%, 35.9% { transform: translateY(4px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  36%, 100% { transform: none; box-shadow: 0 4px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes sendarm {
  0%, 49.9% { background: #3a3a44; }
  51%, 92% { background: var(--red); }
  97%, 100% { background: #3a3a44; }
}
@keyframes sendarmB {
  0%, 44.2% { background: #3a3a44; }
  45.7%, 90% { background: var(--red); }
  95%, 100% { background: #3a3a44; }
}

/* 体験コーナー(枠なし)の文字色と計測パネルをダークに */
.tryit .try-head, .tryit .try-lead { color: var(--ink); }
.try-panel { background: #0a0a0d; }
.try-open-btn { background: #ffd23d; color: #14140f; }

/* 使う場面カードもダークパネルに */
.usecase { background: #121218; border-color: #2b2b33; }

/* メッセージの送信吹き出しもダークに(白地×薄文字の読みにくさ修正) */
.msg.out { background: #262630; color: var(--ink); }

/* ============================================================
   ストーリー帯: キャラ挿絵 + 本文（淡白な縦スクロールをやめて読ませる）
   ============================================================ */
.story {
  padding: 72px 0;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.story-art {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #121218;
  box-shadow:
    0 0 0 1px rgba(61, 165, 255, 0.08),
    0 28px 60px -36px rgba(61, 165, 255, 0.35);
}
.story-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* スマホは横長バナー。縦積みでも圧迫しない */
  object-fit: cover;
}
.story-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f4f1ea;
  background: linear-gradient(transparent, rgba(8, 8, 12, 0.88) 55%);
}
.story-body .sec-head { margin-bottom: 22px; }
.story-body .fitlist,
.story-body .devvoice,
.story-body .howstage.solo,
.story-body .how-note,
.story-body .cost-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.hero-char {
  display: block;
  width: min(170px, 46%);
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  margin: 0 auto 14px;
  box-shadow: 0 20px 50px -28px rgba(61, 165, 255, 0.45);
}

@media (min-width: 861px) {
  .story-grid {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 44px;
  }
  .story-flip .story-grid {
    grid-template-columns: 1.08fr 0.92fr;
  }
  .story-flip .story-art { order: 2; }
  .story-flip .story-body { order: 1; }
  .story-art img { aspect-ratio: 2 / 3; }   /* PCは縦長画像を本文の横に立てる */
  .story-body .sec-head {
    justify-content: flex-start;
    text-align: left;
  }
  .story-body .cost-lead,
  .story-body .cost-note,
  .story-body .how-note,
  .story-body .voices-lead,
  .story-body .fit-close {
    text-align: left;
  }
  .story-body .how-flow { justify-content: flex-start; }
  .story-body #cost .ev-stats,
  #cost .story-body .ev-stats { justify-content: flex-start; }
  .hero-char { width: 96px; margin: 0; align-self: flex-start; }
}

/* ============================================================
   PC: wrap 内で max-width 付きブロックが左に寄るのをやめて中央寄せ
   （ページ全体は既に中央だが、中の短い列が左端に張り付いていた）
   ============================================================ */
@media (min-width: 861px) {
  .wrap {
    max-width: 1080px;
    padding: 0 36px;
  }

  /* 見出しをセクション幅の中心に */
  .sec-head {
    justify-content: center;
    text-align: center;
  }

  /* 狭い本文・カードを wrap の中央へ */
  .fitlist,
  .fit-close,
  .cost-lead,
  .cost-note,
  .how-flow,
  .howstage.solo,
  .how-note,
  .voices,
  .voices-lead,
  .devvoice,
  .tryit,
  .faq,
  .start-steps,
  .start-cta,
  .price-lead,
  .price-notes,
  .day-close {
    margin-left: auto;
    margin-right: auto;
  }

  .how-flow { justify-content: center; }
  #cost .ev-stats { justify-content: center; }

  .cost-lead,
  .cost-note,
  .voices-lead,
  .fit-close,
  .price-lead,
  .day-close {
    text-align: center;
  }

  /* 箇条書きの .how-note は中央寄せだと点がバラつくので左寄せのまま
     （箱自体は margin:auto で中央に来る） */
  .how-note { text-align: left; }

  .fitlist { max-width: 680px; }
  .fit-close { max-width: 36em; }
  .cost-note { max-width: 680px; }
  .howstage.solo,
  .how-note { max-width: 680px; width: 100%; }
  .devvoice { max-width: 680px; }
  .tryit { max-width: 760px; }
  .faq { max-width: 760px; }
  .start-steps { max-width: 760px; }
  .price-lead { max-width: 36em; }
  .price-notes { max-width: 560px; }
  .start-cta { text-align: center; }
  .start-cta .dl-btns { margin-left: auto; margin-right: auto; }

  /* ヒーロー: 左右を等分して、デモ側も中央寄りに */
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  .tategaki { display: none; }
  .hero .lede { max-width: none; }

  /* フッターも中央にまとめる */
  footer.site {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  footer.site a { margin: 0 14px; }
}

/* 横はみ出しの安全弁: どの幅でもページが横スクロールしない */
html, body { overflow-x: hidden; }

/* ===== 最終定義: タブレット〜PCのヒーロー構図（521px以上は全部これ） =====
   上段 = 人物アイコン(左) + 吹き出し(右) / 下段 = チャット窓
   ※861px未満（タブレット）でも同じ構図にする。ここを分けると縦積みに崩れる */
@media (min-width: 521px) {
  .hero .scene {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start;
    width: min(420px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .hero .hero-char {
    grid-column: 1;
    grid-row: 1;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0;
    align-self: center;
  }
  .hero .speaker {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    max-width: none;
    padding-left: 0;
  }
  .hero .speech { margin-bottom: 0; }
  .hero .bubble { border-top-left-radius: 4px; border-bottom-left-radius: 14px; }
  .hero .chatwin {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== 最終定義: スマホのヒーロー構図（ファイル末尾＝カスケードで必ず勝つ） ===== */
@media (max-width: 520px) {
  /* 縦積み: 上=人物(小)+吹き出し → 下=チャット窓 */
  .scene { display: grid; grid-template-columns: 60px 1fr; gap: 4px 8px; align-items: start; }
  .hero-char { grid-column: 1; grid-row: 1; display: block; width: 60px; height: 60px;
               border-radius: 14px; margin: 0; object-fit: cover; }
  .speaker { grid-column: 2; grid-row: 1; padding-left: 0; gap: 4px; align-self: center; }
  .speech { margin-bottom: 0; gap: 6px; }
  .bubble { border-radius: 12px; border-top-left-radius: 3px; font-size: 10.5px; padding: 7px 10px; }
  .chatwin { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; }
  .chatbody { padding: 12px 10px 12px; }
}

/* ヒーローの実演チャットだけ、実際のアプリ画面らしい明るさにする
   （黒LPの中で「本物の画面に入力される」感が際立つ） */
.hero .chatwin { background: #f6f7f9; border-color: #d9dce3; margin-top: 12px; }
.hero .chatbar { background: #e9ebf0; color: #5a5e68; border-bottom: 1px solid #d9dce3; }
.hero .chatbar i { background: #c3c7d0; }
.hero .msg { background: #e7e9ee; border-color: #d9dce3; color: #26282e; }
.hero .chatinput { background: #ffffff; border-color: #cfd3db; color: #1b1d22; }
.hero .result { color: #1b1d22; }
.hero .send { background: #3da5ff; color: #fff; }

/* ===== 最終定義: ヒーローのCTAは2カラムの下で中央（521px以上） =====
   HTMLで .cta-row を .hero 直下（.scene の後）に出してあるので、
   グリッドの全幅を張って中央に置ける。スマホ(≤520px)は従来どおり order:5 で最後 */
@media (min-width: 521px) {
  .hero > .cta-row {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 56px;
    text-align: center;
  }
  .hero > .cta-row .dl-btns { width: max-content; max-width: 100%; margin: 0 auto; }
  .hero > .cta-row .cta-note { text-align: center; }
}

/* ===== 最終定義: ストーリー各セクションの「人」の出し方 =====
   人の顔があるだけで本文は読まれる。大きな挿絵はPCだけに残し、
   タブレット〜スマホは見出しの左に小さな顔だけを置く */
.sec-ic {
  display: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 1px solid var(--hairline);
  flex: none;
}

@media (max-width: 860px) {
  .story .story-art { display: none; }
  .story .sec-ic { display: block; }
  .story .sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
  }
  .story .sec-head h2 { flex: 1; }
}

/* ===== 最終定義: スマホは「ブロックは中央寄せ・文字は左揃え・左端は全部同じ」 =====
   左右の余白を広げて内容を画面の真ん中にまとめ、見出しだけ中央揃えにする。
   リストのチェックは余白側にぶら下げて、本文とリストの文字の左端を揃える */
@media (max-width: 520px) {
  .wrap { padding: 0 34px; }

  /* タイトルは中央（キャラの顔ごと中央に置く） */
  .sec-head { justify-content: center; text-align: center; }
  .sec-head h2 { flex: none; }
  .story .sec-head { justify-content: center; }
  .story .sec-head h2 { flex: none; text-align: center; }

  /* 「✓」は左の余白にぶら下げ、文字の左端は他の段落と揃える */
  .fitlist li { padding-left: 0; }
  .fitlist li::before { left: -24px; top: 14px; }
}

/* ===== 最終定義: よくある質問 = Q/A のアコーディオン ===== */
.faq { display: grid; gap: 10px; }
.faq .qa {
  background: #121218;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq .qa[open] { border-color: rgba(61, 165, 255, 0.45); background: #14141c; }
.faq .qa summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 46px 16px 16px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.faq .qa summary::-webkit-details-marker { display: none; }
.faq .qa summary:hover { background: rgba(61, 165, 255, 0.06); }

/* Q / A のバッジ */
.qa-badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--mono, var(--disp));
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  background: rgba(61, 165, 255, 0.16);
  color: #3da5ff;
  border: 1px solid rgba(61, 165, 255, 0.35);
}
.qa-badge.a {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-soft);
  border-color: var(--hairline);
}
.qa-t { flex: 1; }

/* 開閉のしるし（＋が×に回る） */
.faq .qa summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--gray);
  border-bottom: 2px solid var(--gray);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.faq .qa[open] summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
  border-color: #3da5ff;
}

.qa-a {
  display: flex;
  gap: 12px;
  padding: 0 16px 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.9;
}
.qa-a p { margin: 0; padding-top: 2px; }
.qa-a a { color: #3da5ff; }

@media (max-width: 520px) {
  .faq .qa summary { font-size: 14.5px; padding: 14px 40px 14px 13px; gap: 10px; }
  .qa-a { padding: 0 13px 16px; font-size: 13.5px; }
  .qa-badge { width: 24px; height: 24px; font-size: 12px; }
}

/* ===== 最終定義: Q/A バッジを大きく・Qは濃い水色地に白抜き ===== */
.qa-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  background: #1c7fd6;
  color: #ffffff;
  border: 1px solid #2b8fe6;
  box-shadow: 0 6px 16px -10px rgba(28, 127, 214, 0.9);
}
.qa-badge.a {
  background: #2a2a34;
  color: #cfd2da;
  border-color: #3a3a46;
  box-shadow: none;
}
.faq .qa summary { padding-top: 14px; padding-bottom: 14px; }
.qa-a { padding-left: 16px; }

@media (max-width: 520px) {
  .qa-badge { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
}

/* ===== 最終定義: 使い方の入力欄も2行ぶんで固定 =====
   ここも min-height だと 68→71px まで伸びて3pxだけ揺れていた。
   71px = 実測の最大値（整形オン/オフで文の長さが変わる）。height で固定して揺れを止める */
@media (max-width: 520px) {
  #how .how-out .how-input {
    height: 71px;
    align-content: center;
    box-sizing: border-box;
  }
}

/* ===== 修正: スマホの見出しがはみ出す（flex:none で折り返さなくなっていた） =====
   キャラの顔はタイトルの上に中央で置き、タイトルは幅いっぱいまでで折り返す */
@media (max-width: 520px) {
  .sec-head h2 { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: center; }
  .story .sec-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
  }
  .story .sec-head .sec-ic { width: 72px; height: 72px; }
}

/* ===== 最終定義: スマホの見出しは「タイトル(左) + キャラの顔(右)」の横並び ===== */
@media (max-width: 520px) {
  .story .sec-head {
    flex-direction: row-reverse;   /* DOM順は img → h2 なので反転で顔が右 */
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .story .sec-head .sec-ic { width: 64px; height: 64px; }
  .story .sec-head h2 { flex: 0 1 auto; min-width: 0; text-align: center; }
}

/* ===== 最終定義: コストの見出しだけ「顔(左) + タイトル(右)」で詰めて置く ===== */
@media (max-width: 520px) {
  #cost .sec-head { flex-direction: row; gap: 8px; }
  #cost .sec-head h2 { text-align: left; }
}

/* ===== 最終定義: 「開発者も、毎日使っています。」はスマホでは中央 ===== */
@media (max-width: 520px) {
  .voices-lead { text-align: center; }
}

/* ===== 最終定義: FAQ アコーディオンの余白と開閉アニメーション ===== */
/* 回答が質問の下線にくっついていたので、A側の上に余白を入れる */
.faq .qa .qa-a { padding-top: 14px; }
.faq .qa[open] summary { border-bottom: 1px solid rgba(61, 165, 255, 0.22); }

/* 開いたときに中身がふわっと降りてくる（全ブラウザ共通の保険） */
@keyframes qaOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq .qa[open] .qa-a { animation: qaOpen 0.24s ease-out both; }

/* 対応ブラウザでは箱の高さ自体もなめらかに伸縮させる */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq .qa::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
  }
  .faq .qa[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq .qa[open] .qa-a { animation: none; }
  .faq .qa::details-content { transition: none; }
}

@media (max-width: 520px) {
  .faq .qa .qa-a { padding-top: 13px; }
}

/* ===== 最終定義: スマホの左右パディングを少し詰める（チャット窓が切れないように） ===== */
@media (max-width: 520px) {
  .wrap { padding: 0 24px; }
  .hero .chatwin { max-width: 100%; box-sizing: border-box; }
  .hero .chatbody, .hero .inputrow { min-width: 0; }
}

/* ===== 最終定義: ストーリー本文はもう少し内側へ（左に張り付いて見えるのを直す） ===== */
@media (max-width: 520px) {
  .story .story-body { padding-left: 12px; padding-right: 12px; }
  .fitlist li::before { left: -22px; }
}

/* ===== 最終定義: スマホの見出しは強制改行して、顔とタイトルの間を詰める =====
   改行しないと h2 の箱が「1行に並べた幅」のまま残り、中央寄せの余りが
   顔との間の余白に見えてしまう */
.sp-br { display: none; }
@media (max-width: 520px) {
  .sp-br { display: inline; }
  .story .sec-head { gap: 10px; }
}

/* ===== 最終定義: コストの数字と説明の間を詰める（列は揃えたまま） ===== */
@media (max-width: 520px) {
  #cost .ev-stat { gap: 10px; justify-content: center; }
  #cost .ev-stat .n { min-width: 104px; text-align: right; }
  #cost .ev-stat .l { flex: none; min-width: 168px; }
}

/* ===== 最終定義: 使い方のデモは「キャラが喋っている」形 ===== */
.howsay { display: flex; align-items: center; gap: 10px; }
.how-ic {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.howsay .how-bubble { border-bottom-left-radius: 3px; }

@media (max-width: 520px) {
  .how-ic { width: 48px; height: 48px; }
  .howsay { gap: 8px; }
}

/* ===== 最終定義: 研究の数字（04）もスマホでは中央・数字と説明を詰める ===== */
@media (max-width: 520px) {
  .evidence { text-align: center; }
  .ev-big, .ev-sub { text-align: center; }
  #evidence .ev-stat { gap: 10px; justify-content: center; }
  #evidence .ev-stat .n { min-width: 104px; text-align: right; }
  #evidence .ev-stat .l { flex: none; min-width: 168px; text-align: left; }
  #evidence .ev-note { text-align: center; }
  #evidence .ev-src { justify-content: center; }
  .ev-src-link { flex: 1 1 auto; justify-content: center; }
}

/* ===== 最終定義: 本文中リンクの色（黒背景でブラウザ既定の青/紫は読めない） ===== */
.doc a:not(.btn),
main p a:not(.btn),
main li a:not(.btn),
main dd a:not(.btn),
.doc a:not(.btn):visited,
main p a:not(.btn):visited,
main li a:not(.btn):visited,
main dd a:not(.btn):visited {
  color: var(--ink);             /* 本文と同じ色（ダーク表示では白く見える） */
  font-weight: 700;              /* 太字でリンクと分かるように */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(27, 23, 19, 0.32);
}
.doc a:hover,
main p a:hover,
main li a:hover,
main dd a:hover {
  color: #8ad6ff;                 /* 水色 */
  text-decoration-color: rgba(138, 214, 255, 0.7);
}

/* ===== 最終定義: option キーを実物どおりの正方形に（⌥ が左上・option が下） ===== */
.demo-key, .keycap.big {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  padding: 6px 7px 6px;
  white-space: nowrap;
  border-radius: 8px;
}
.keycap.big { width: 60px; height: 60px; padding: 7px 8px 7px; }

.k-sym { font-family: var(--mono); font-size: 15px; line-height: 1; font-weight: 600; }
.k-lbl { font-family: var(--mono); font-size: 9.5px; line-height: 1; letter-spacing: 0.01em; opacity: 0.9; }
.keycap.big .k-sym { font-size: 17px; }
.keycap.big .k-lbl { font-size: 10.5px; }

/* 押す指はキーの中央あたりに落とす */
.demo-key .finger, .keycap.big .finger { left: 50%; margin-left: -8px; }

@media (max-width: 520px) {
  .demo-key { width: 46px; height: 46px; padding: 5px 6px; }
  .keycap.big { width: 50px; height: 50px; padding: 6px 7px; }
  .k-sym { font-size: 13px; }
  .k-lbl { font-size: 8.5px; }
  .keycap.big .k-sym { font-size: 14px; }
  .keycap.big .k-lbl { font-size: 9px; }
}

/* ===== 修正: 使い方デモの指がキャラの顔にかぶる =====
   キーが正方形になって上に伸びたぶん、指(👆)がひとつ上の行に食い込んでいた */
.howstack { gap: 26px; }
@media (max-width: 520px) {
  .howstack { gap: 24px; }
}

/* ===== 最終定義: option キーを吹き出しの真下（顔の右）に寄せる =====
   キーを顔の下から外すことで、指(👆)が顔にかぶらなくなる */
.howstack { gap: 14px; }
.keyline2 { margin-left: 66px; }   /* 顔56px + gap10px ぶん右へ */
@media (max-width: 520px) {
  .howstack { gap: 12px; }
  .keyline2 { margin-left: 56px; } /* 顔48px + gap8px */
}

/* ===== 最終定義: 「使う場面は、たとえば」のキーは吹き出しの右に並べる ===== */
#features .speech {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
#features .speech .bubble { flex: 0 1 auto; min-width: 0; }
#features .speech .keyline { flex: none; }
@media (max-width: 520px) {
  #features .speech { gap: 10px; }
}

/* ===== 最終定義: ヒーローは「チャット窓が上・人とキーが下」 =====
   実際の Mac と同じ並び（画面が上、手元が下）にする */
@media (min-width: 521px) {
  .hero .chatwin { grid-row: 1; margin: 0 0 16px; }
  .hero .hero-char { grid-row: 2; }
  .hero .speaker { grid-row: 2; }
}
@media (max-width: 520px) {
  .hero .chatwin { grid-row: 1; margin: 0 0 14px; }
  .hero .hero-char { grid-row: 2; }
  .hero .speaker { grid-row: 2; }
}

/* ===== 最終定義: ヒーローのデモに一行の説明を添える ===== */
.hero .scene-note {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--gray);
  text-align: center;
}
.hero .scene-note b { color: var(--ink-soft); font-weight: 700; }
@media (max-width: 520px) {
  .hero .scene-note { margin-top: 12px; font-size: 11.5px; }
}

/* ===== 最終定義: ヒーローのデモの説明を「太く・短く」 ===== */
.hero .scene-note {
  margin-top: 16px;
  text-align: center;
  color: var(--ink);
}
.hero .scene-note .sn-main {
  display: block;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.hero .scene-note .sn-sub {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--gray);
  font-weight: 400;
}
@media (max-width: 520px) {
  .hero .scene-note { margin-top: 14px; }
  .hero .scene-note .sn-main { font-size: 16px; }
  .hero .scene-note .sn-sub { font-size: 11px; }
}

/* ===== 最終定義: お試しスピード測定を「デモだと一目でわかる」カードにする ===== */
#tryit-sec { padding: 0; }
#tryit-sec .tryit {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 30px 28px;
  border-radius: 18px;
  border: 1px solid rgba(61, 165, 255, 0.42);
  background:
    radial-gradient(520px 220px at 50% -40px, rgba(61, 165, 255, 0.16), transparent 70%),
    #101018;
  box-shadow: 0 0 0 1px rgba(61, 165, 255, 0.10), 0 30px 70px -40px rgba(61, 165, 255, 0.55);
  text-align: center;
}
.try-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(61, 165, 255, 0.16);
  border: 1px solid rgba(61, 165, 255, 0.45);
  color: #7fc6ff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
#tryit-sec .try-head {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink);
}
#tryit-sec .try-lead {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
#tryit-sec .try-lead b { color: #7fc6ff; font-weight: 700; }
#tryit-sec .try-under { margin-top: 12px; font-size: 11.5px; color: var(--gray); }

/* 中身（計測パネル）は左揃えに戻す */
#tryit-sec .try-panel { text-align: left; background: transparent; margin-top: 20px; }
#tryit-sec .try-target { background: #0a0a0d; border: 1px solid var(--hairline); }

@media (max-width: 520px) {
  #tryit-sec .tryit { padding: 22px 18px 20px; border-radius: 16px; }
  #tryit-sec .try-head { font-size: 22px; }
  #tryit-sec .try-lead { font-size: 13px; }
  #tryit-sec .try-open-btn { display: block; width: 100%; }
}

/* ===== 最終定義: PCのストーリー本文が画像に対して小さすぎたので底上げ ===== */
@media (min-width: 861px) {
  .story .sec-head h2 { font-size: 33px; line-height: 1.5; }
  .story .sec-head { margin-bottom: 30px; }

  .cost-lead { font-size: 16.5px; }
  .cost-note { font-size: 14px; line-height: 2.05; }
  .story .ev-stat .l { font-size: 13.5px; }

  .pain { font-size: 20px; }
  .painsub { font-size: 14px; }
  .fit-close { font-size: 21px; }

  .how-note { font-size: 14.5px; line-height: 2.05; }
  .voices-lead { font-size: 17px; }
  .devvoice p { font-size: 14.5px; }
}

/* ===== 最終定義: 使い方は「大きい 1 2 3」で見せる ===== */
.how3 {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  text-align: left;
}
.how3 li { display: grid; gap: 2px; align-content: start; }
.how3 .n {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: #3da5ff;
  letter-spacing: 0;
}
.how3 b {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin-top: 6px;
}
.how3 .d { font-size: 13.5px; line-height: 1.8; color: var(--gray); }

/* 3つの数字を仕切る細い線 */
.how3 li + li { padding-left: 22px; border-left: 1px solid var(--hairline); }
.how3 { gap: 0; }
.how3 li { padding-right: 22px; }

@media (max-width: 520px) {
  .how3 {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  .how3 li {
    grid-template-columns: 46px 1fr;
    grid-template-areas: "n t" "n d";
    column-gap: 12px;
    padding: 12px 0;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
  .how3 li:first-child { border-top: none; padding-top: 0; }
  .how3 li + li { padding-left: 0; }
  .how3 .n { grid-area: n; align-self: center; font-size: 40px; }
  .how3 b { grid-area: t; margin-top: 0; align-self: end; font-size: 17px; }
  .how3 .d { grid-area: d; font-size: 12.5px; }
}

/* ===== 最終定義: 使い方のデモをゆっくりにして、1→2→3 を順に読ませる =====
   6秒で一周していたものを 9秒に。キーフレームの割合はそのままなので動きは変わらない */
#how .how-bubble,
#how .say3,
#how .keycap.big,
#how .keycap.big .finger,
#how .keycap.big .w,
#how .recdot.how,
#how .howpop,
#how .howpop-raw {
  animation-duration: 9s;
}

/* 1 2 3 は、実演の進行に合わせて順に浮かび上がる */
#how .how3 li {
  opacity: 0.3;
  animation: 9s linear infinite;
  transition: opacity 0.3s ease;
}
#how .how3 li:nth-child(1) { animation-name: how3s1; }
#how .how3 li:nth-child(2) { animation-name: how3s2; }
#how .how3 li:nth-child(3) { animation-name: how3s3; }
#how .how3 .n { transition: text-shadow 0.3s ease; }

@keyframes how3s1 {   /* 押す: キーを押し込む瞬間 */
  0%, 2% { opacity: 0.3; }
  5%, 13% { opacity: 1; }
  18%, 100% { opacity: 0.3; }
}
@keyframes how3s2 {   /* 話す: 吹き出しが出ているあいだ */
  0%, 13% { opacity: 0.3; }
  18%, 33% { opacity: 1; }
  38%, 100% { opacity: 0.3; }
}
@keyframes how3s3 {   /* 離す: 指を離して文字が入ってから */
  0%, 33% { opacity: 0.3; }
  38%, 88% { opacity: 1; }
  93%, 100% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  #how .how3 li { opacity: 1; animation: none; }
}

/* ===== 最終定義: LP全体の実演をゆっくりにする（説明動画のテンポに寄せる） =====
   キーフレームの割合は変えず、一周の長さだけ伸ばす */

/* ヒーローと「使う場面」の実演: 4.5秒 → 7.5秒 */
.recdot,
.demo-key,
.demo-key .finger,
.w,
.bubble,
.say,
.result,
.send {
  animation-duration: 7.5s;
}
/* 上のまとめ指定で #how まで巻き込まないよう、#how は 9 秒に戻す */
#how .bubble,
#how .say3,
#how .recdot.how,
#how .keycap.big,
#how .keycap.big .finger,
#how .keycap.big .w,
#how .howpop,
#how .howpop-raw {
  animation-duration: 9s;
}

/* 「使う場面」のカード（上司モード等）: 6秒 → 9秒 */
#features .bubble,
#features .say,
#features .sayB,
#features .result,
#features .howpopB,
#features .send,
#features .send.sendB,
#features .recdot,
#features .recdot.how,
#features .demo-key,
#features .demo-key .finger,
#features .keycap.big,
#features .keycap.big .finger,
#features .w {
  animation-duration: 9s;
}

/* ===== 最終定義: ヒーローにも「大きい 1 2 3」を置く ===== */
.hero .hero3 {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 14px;
}
.hero .hero3 .n { font-size: 34px; }
.hero .hero3 b { font-size: 15.5px; margin-top: 4px; }
.hero .hero3 .d { font-size: 11.5px; line-height: 1.7; }
.hero .hero3 li { padding-right: 14px; }
.hero .hero3 li + li { padding-left: 14px; }

/* ヒーローの実演（7.5秒）に合わせて順に浮かび上がる */
.hero .hero3 li {
  opacity: 0.3;
  animation: 7.5s linear infinite;
}
.hero .hero3 li:nth-child(1) { animation-name: hero3s1; }
.hero .hero3 li:nth-child(2) { animation-name: hero3s2; }
.hero .hero3 li:nth-child(3) { animation-name: hero3s3; }

@keyframes hero3s1 {   /* 押す: キーを押し込む */
  0%, 2% { opacity: 0.3; }
  6%, 14% { opacity: 1; }
  19%, 100% { opacity: 0.3; }
}
@keyframes hero3s2 {   /* 話す: 吹き出しが出ているあいだ */
  0%, 14% { opacity: 0.3; }
  19%, 46% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}
@keyframes hero3s3 {   /* 離す: 文字が入ってから */
  0%, 48% { opacity: 0.3; }
  53%, 92% { opacity: 1; }
  96%, 100% { opacity: 0.3; }
}

@media (max-width: 520px) {
  .hero .hero3 { margin-top: 12px; }
  .hero .hero3 li { grid-template-columns: 24px 1fr; column-gap: 8px; padding: 10px 0; }
  .hero .hero3 li + li { padding-left: 0; }
  .hero .hero3 .n { font-size: 30px; }
  .hero .hero3 b { font-size: 15px; }
  .hero .hero3 .d { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero3 li { opacity: 1; animation: none; }
}

/* ===== 最終定義: 使い方の実演を「番号が先、動作が後」の段取りにする =====
   1が光る → 押す / 2が光る → 喋る / 3が光る → 離す → ポンと入る
   一周 12 秒。番号と動作を重ねず、必ず番号が先に立つように間を空けてある */
#how .keycap.big,
#how .keycap.big .finger,
#how .keycap.big .w,
#how .keycap.big .w2,
#how .recdot.how,
#how .how-bubble,
#how .say3,
#how .howpop,
#how .howpop-raw,
#how .how3 li {
  animation-duration: 12s;
}

#how .keycap.big        { animation-name: how2key; }
#how .keycap.big .finger{ animation-name: how2finger; }
#how .keycap.big .w     { animation-name: how2wave; }
#how .keycap.big .w2    { animation-name: how2wave2; }
#how .recdot.how        { animation-name: how2rec; }
#how .how-bubble        { animation-name: how2bubble; }
#how .say3              { animation-name: how2speak; }
#how .howpop-raw        { animation-name: how2raw; }
#how .howpop            { animation-name: how2clean; }
#how .how3 li:nth-child(1) { animation-name: how3s1b; }
#how .how3 li:nth-child(2) { animation-name: how3s2b; }
#how .how3 li:nth-child(3) { animation-name: how3s3b; }

/* --- 番号（動作より先に立つ） --- */
@keyframes how3s1b { 0%, 1% { opacity: 0.25; } 4%, 19% { opacity: 1; } 23%, 100% { opacity: 0.25; } }
@keyframes how3s2b { 0%, 17% { opacity: 0.25; } 21%, 50% { opacity: 1; } 54%, 100% { opacity: 0.25; } }
@keyframes how3s3b { 0%, 47% { opacity: 0.25; } 51%, 88% { opacity: 1; } 92%, 100% { opacity: 0.25; } }

/* --- ① 押す: 8% で沈み、56% で戻る --- */
@keyframes how2key {
  0%, 7.9%   { transform: none; box-shadow: 0 4px 0 #000; background: #191920; border-color: #3d3d48; }
  9%, 55.9%  { transform: translateY(4px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  57%, 100%  { transform: none; box-shadow: 0 4px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes how2finger {
  0%, 5%     { transform: rotate(8deg); }
  8.5%, 55.9%{ transform: rotate(-138deg); }
  59%, 100%  { transform: rotate(8deg); }
}
@keyframes how2wave {
  0%, 9.9% { opacity: 0; transform: scale(1); }
  10% { opacity: 0.18; transform: scale(1); }
  22% { opacity: 0; transform: scale(1.4); }
  22.9% { opacity: 0; transform: scale(1); }
  23% { opacity: 0.18; }
  35% { opacity: 0; transform: scale(1.4); }
  35.9% { opacity: 0; transform: scale(1); }
  36% { opacity: 0.18; }
  48% { opacity: 0; transform: scale(1.4); }
  48.1%, 100% { opacity: 0; }
}
@keyframes how2wave2 {
  0%, 15.9% { opacity: 0; transform: scale(1); }
  16% { opacity: 0.12; transform: scale(1); }
  29% { opacity: 0; transform: scale(1.55); }
  29.9% { opacity: 0; transform: scale(1); }
  30% { opacity: 0.12; }
  43% { opacity: 0; transform: scale(1.55); }
  43.1%, 100% { opacity: 0; }
}

/* --- ② 話す: 24% に吹き出しが出て、46% まで文字が流れる --- */
@keyframes how2bubble {
  0%, 23%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  25%, 55.9% { opacity: 1; transform: none; }
  56%, 100%  { opacity: 0; transform: none; }
}
@keyframes how2speak {
  0%, 25%   { max-width: 0; }
  46%, 100% { max-width: 17em; }
}
@keyframes how2rec {
  0%, 8.9% { opacity: 0; }
  9% { opacity: 1; }
  16% { opacity: 0.3; }
  24% { opacity: 1; }
  32% { opacity: 0.3; }
  40% { opacity: 1; }
  48% { opacity: 0.3; }
  55.9% { opacity: 0.5; }
  56%, 100% { opacity: 0; }
}

/* --- ③ 離す: 56% に指を離し、58% と 66% に文字がポンと入る --- */
@keyframes how2raw {
  0%, 57.9% { opacity: 0; transform: scale(0.92); max-width: 0; }
  59.5%     { opacity: 1; transform: scale(1.05); max-width: 30em; }
  62%, 90%  { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}
@keyframes how2clean {
  0%, 65.9% { opacity: 0; transform: scale(0.92); max-width: 0; }
  67.5%     { opacity: 1; transform: scale(1.05); max-width: 30em; }
  70%, 90%  { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}

/* スマホは文字サイズで出す方式なので、同じ間合いの別キーフレームを当てる */
@media (max-width: 520px) {
  #how .howpop-raw { animation-name: how2rawM; }
  #how .howpop     { animation-name: how2cleanM; }
}
@keyframes how2rawM {
  0%, 57.9%   { opacity: 0; font-size: 0px; }
  59.5%, 90%  { opacity: 1; font-size: 12.5px; }
  95%, 100%   { opacity: 0; font-size: 12.5px; }
}
@keyframes how2cleanM {
  0%, 65.9%   { opacity: 0; font-size: 0px; }
  67.5%, 90%  { opacity: 1; font-size: 12.5px; }
  95%, 100%   { opacity: 0; font-size: 12.5px; }
}

/* ===== 最終定義: 1/2/3 は実演の上に置き、パッと切り替える（滑らかにしない） ===== */
#how .how3 { margin: 0 0 24px; }
#how .howstage.solo { margin-top: 0; }

#how .how3 li {
  transition: none;
  opacity: 0.25;
  animation-timing-function: step-end;   /* 中間を作らず、その瞬間に切り替わる */
}
/* 光っている段は、番号を光らせて枠でも示す */
#how .how3 li.on { opacity: 1; }

@keyframes how3s1b {
  0%       { opacity: 1; }
  20%      { opacity: 0.25; }
  100%     { opacity: 0.25; }
}
@keyframes how3s2b {
  0%       { opacity: 0.25; }
  20%      { opacity: 1; }
  51%      { opacity: 0.25; }
  100%     { opacity: 0.25; }
}
@keyframes how3s3b {
  0%       { opacity: 0.25; }
  51%      { opacity: 1; }
  90%      { opacity: 0.25; }
  100%     { opacity: 0.25; }
}

/* 光っている番号は下線でも示す（色だけだと弱いので） */
#how .how3 .n {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 3px solid transparent;
  animation: inherit;
}
#how .how3 li:nth-child(1) .n { animation: how3u1 12s step-end infinite; }
#how .how3 li:nth-child(2) .n { animation: how3u2 12s step-end infinite; }
#how .how3 li:nth-child(3) .n { animation: how3u3 12s step-end infinite; }
@keyframes how3u1 { 0% { border-bottom-color: #3da5ff; } 20%, 100% { border-bottom-color: transparent; } }
@keyframes how3u2 { 0% { border-bottom-color: transparent; } 20% { border-bottom-color: #3da5ff; } 51%, 100% { border-bottom-color: transparent; } }
@keyframes how3u3 { 0% { border-bottom-color: transparent; } 51% { border-bottom-color: #3da5ff; } 90%, 100% { border-bottom-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  #how .how3 li { opacity: 1; animation: none; }
  #how .how3 .n { animation: none; border-bottom-color: transparent; }
}

/* ===== 最終定義: 進行中の場所を「赤」で示す（青 → 赤に変わる） =====
   ① 番号1とキーが赤 → 押す ／ ② 番号2と吹き出しが赤くピンピン → 話す
   ③ 番号3とキーが赤 → 離す。終わったら青（＝待機色）に戻る */

/* --- 番号: 待機は青、進行中は赤 --- */
#how .how3 .n { color: #3da5ff; }
#how .how3 li:nth-child(1) .n { animation: how3u1 12s step-end infinite; }
#how .how3 li:nth-child(2) .n { animation: how3u2 12s step-end infinite; }
#how .how3 li:nth-child(3) .n { animation: how3u3 12s step-end infinite; }
@keyframes how3u1 {
  0%        { color: #ff4b4b; border-bottom-color: #ff4b4b; }
  20%, 100% { color: #3da5ff; border-bottom-color: transparent; }
}
@keyframes how3u2 {
  0%        { color: #3da5ff; border-bottom-color: transparent; }
  20%       { color: #ff4b4b; border-bottom-color: #ff4b4b; }
  51%, 100% { color: #3da5ff; border-bottom-color: transparent; }
}
@keyframes how3u3 {
  0%        { color: #3da5ff; border-bottom-color: transparent; }
  51%       { color: #ff4b4b; border-bottom-color: #ff4b4b; }
  90%, 100% { color: #3da5ff; border-bottom-color: transparent; }
}

/* --- option キー: ①押す前後と③離す前後だけ赤く縁取る --- */
#how .keycap.big {
  outline: 2px solid transparent;
  outline-offset: 3px;
  animation-name: how2key, how2keyred;
  animation-duration: 12s, 12s;
  animation-timing-function: linear, step-end;
  animation-iteration-count: infinite, infinite;
}
@keyframes how2keyred {
  0%, 5.9%     { outline-color: transparent; }
  6%           { outline-color: #ff4b4b; }
  20%          { outline-color: transparent; }
  51%          { outline-color: #ff4b4b; }
  61%, 100%    { outline-color: transparent; }
}

/* --- 吹き出し: ②のあいだ赤くピンピン光る（＝いま声を拾っている） --- */
#how .how-bubble {
  animation-name: how2bubble, how2bubblered;
  animation-duration: 12s, 12s;
  animation-timing-function: linear, step-end;
  animation-iteration-count: infinite, infinite;
}
@keyframes how2bubblered {
  0%, 23.9% { border-color: #34343e; box-shadow: none; }
  24%       { border-color: #ff4b4b; box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.20); }
  28%       { border-color: #34343e; box-shadow: none; }
  32%       { border-color: #ff4b4b; box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.20); }
  36%       { border-color: #34343e; box-shadow: none; }
  40%       { border-color: #ff4b4b; box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.20); }
  44%       { border-color: #34343e; box-shadow: none; }
  48%       { border-color: #ff4b4b; box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.20); }
  51%, 100% { border-color: #34343e; box-shadow: none; }
}

/* --- 録音の丸は本物どおり赤に --- */
#how .recdot.how { background: #ff4b4b; }

@media (prefers-reduced-motion: reduce) {
  #how .how3 .n { animation: none; color: #3da5ff; border-bottom-color: transparent; }
  #how .keycap.big { animation: none; outline-color: transparent; }
  #how .how-bubble { animation: none; }
}

/* ===== 最終定義: 指を絵文字から線画アイコンに差し替え =====
   キーの手前（下）から指先を当てにいく形。押している間はピヨンピヨン跳ねる */
.finger {
  position: absolute;
  left: 52%;
  top: calc(100% - 14px);
  bottom: auto;
  width: 35px;
  height: 40px;
  transform-origin: 50% 0;
  pointer-events: none;
  font-size: 0;                 /* 絵文字の名残を消す */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
.finger img { display: block; width: 100%; height: auto; }
.keycap.big .finger { left: 54%; width: 38px; height: 43px; }

/* ヒーロー（7.5秒・5%で押して50%で離す） */
.demo-key .finger { animation: fingerTapA 7.5s linear infinite; }
@keyframes fingerTapA {
  0%, 3%    { transform: translateY(9px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(3px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(3px); }
  29%       { transform: translateY(0); }
  35%       { transform: translateY(3px); }
  41%       { transform: translateY(0); }
  49.9%     { transform: translateY(0); }
  52%, 100% { transform: translateY(9px); }
}

/* 使い方（12秒・9%で押して56%で離す。番号に合わせた段取り） */
#how .keycap.big .finger { animation: fingerTapHow 12s linear infinite; }
@keyframes fingerTapHow {
  0%, 7.9%  { transform: translateY(9px); }
  9%        { transform: translateY(0); }
  14%       { transform: translateY(3px); }
  19%       { transform: translateY(0); }
  25%       { transform: translateY(3px); }
  31%       { transform: translateY(0); }
  37%       { transform: translateY(3px); }
  43%       { transform: translateY(0); }
  49%       { transform: translateY(3px); }
  55.9%     { transform: translateY(0); }
  57%, 100% { transform: translateY(9px); }
}

/* 使う場面（9秒） */
#features .demo-key .finger { animation: fingerTapA 9s linear infinite; }
#features .keycap.big .finger { animation: fingerTapUC 9s linear infinite; }
@keyframes fingerTapUC {
  0%, 3%    { transform: translateY(9px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(3px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(3px); }
  29%       { transform: translateY(0); }
  35.9%     { transform: translateY(0); }
  39%, 100% { transform: translateY(9px); }
}

@media (max-width: 520px) {
  .finger { width: 30px; height: 34px; top: calc(100% - 12px); }
  .keycap.big .finger { width: 32px; height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .finger { animation: none !important; transform: translateY(0); }
}

/* ===== 修正: 指が下の入力欄にかぶるので、キーの右側に逃がす =====
   指先（画像の左上）をキーの上に置き、手のひらは右の空きスペースへ伸ばす */
.finger {
  left: 50%;
  top: 14%;
  bottom: auto;
}
.keycap.big .finger { left: 52%; top: 12%; }

/* 待機は少し浮かせ、押すとキーに当たる（下にはみ出さない振れ幅にする） */
@keyframes fingerTapA {
  0%, 3%    { transform: translateY(-10px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(3px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(3px); }
  29%       { transform: translateY(0); }
  35%       { transform: translateY(3px); }
  41%       { transform: translateY(0); }
  49.9%     { transform: translateY(0); }
  52%, 100% { transform: translateY(-10px); }
}
@keyframes fingerTapHow {
  0%, 7.9%  { transform: translateY(-10px); }
  9%        { transform: translateY(0); }
  14%       { transform: translateY(3px); }
  19%       { transform: translateY(0); }
  25%       { transform: translateY(3px); }
  31%       { transform: translateY(0); }
  37%       { transform: translateY(3px); }
  43%       { transform: translateY(0); }
  49%       { transform: translateY(3px); }
  55.9%     { transform: translateY(0); }
  57%, 100% { transform: translateY(-10px); }
}
@keyframes fingerTapUC {
  0%, 3%    { transform: translateY(-10px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(3px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(3px); }
  29%       { transform: translateY(0); }
  35.9%     { transform: translateY(0); }
  39%, 100% { transform: translateY(-10px); }
}

/* 録音の赤丸は指と重なるので、キーの下に移す */
.keyline2 { align-items: flex-start; }
#how .recdot.how { margin-left: 62px; margin-top: 6px; }
@media (max-width: 520px) {
  .finger { left: 48%; top: 12%; }
  #how .recdot.how { margin-left: 54px; }
}

/* ===== 最終定義: 使い方の実演は「顔 → 吹き出し → option キー」を横一列に =====
   吹き出しは文字が伸びるので、grid でキーの位置を固定する（キーがずれない） */
#how .howsay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
#how .howsay .how-bubble { justify-self: start; }
#how .keyline2 { margin-left: 0; align-items: center; }
#how .recdot.how { margin-left: 0; margin-top: 0; }
#how .howstack { gap: 0; }

/* 指はキーの真下から、上に向かって押す */
.finger {
  left: 22%;
  top: calc(100% - 4px);
  bottom: auto;
}
.keycap.big .finger { left: 24%; }

@keyframes fingerTapA {
  0%, 3%    { transform: translateY(10px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(4px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(4px); }
  29%       { transform: translateY(0); }
  35%       { transform: translateY(4px); }
  41%       { transform: translateY(0); }
  49.9%     { transform: translateY(0); }
  52%, 100% { transform: translateY(10px); }
}
@keyframes fingerTapHow {
  0%, 7.9%  { transform: translateY(10px); }
  9%        { transform: translateY(0); }
  14%       { transform: translateY(4px); }
  19%       { transform: translateY(0); }
  25%       { transform: translateY(4px); }
  31%       { transform: translateY(0); }
  37%       { transform: translateY(4px); }
  43%       { transform: translateY(0); }
  49%       { transform: translateY(4px); }
  55.9%     { transform: translateY(0); }
  57%, 100% { transform: translateY(10px); }
}
@keyframes fingerTapUC {
  0%, 3%    { transform: translateY(10px); }
  5%        { transform: translateY(0); }
  11%       { transform: translateY(4px); }
  17%       { transform: translateY(0); }
  23%       { transform: translateY(4px); }
  29%       { transform: translateY(0); }
  35.9%     { transform: translateY(0); }
  39%, 100% { transform: translateY(10px); }
}

/* 指がぶら下がるぶん、実演の枠の下に余白を足す */
#how .howstage.solo { padding-bottom: 24px; }

@media (max-width: 520px) {
  #how .howsay { gap: 8px; }
  .finger { left: 20%; }
}

/* ===== 修正2点 =====
   (1) 吹き出しの幅を固定して、文字が伸びても option キーが動かないようにする
   (2) .keycap.big .finger に古い top:12% が残っていて指がキーの上に乗っていた */
#how .howsay {
  display: flex;
  align-items: center;
  gap: 12px;
}
#how .how-bubble {
  width: 17em;
  max-width: none;
  box-sizing: border-box;
  flex: none;
}
.keycap.big .finger { top: calc(100% - 4px); }

@media (max-width: 520px) {
  #how .how-bubble { width: 16em; }
}

/* ===== 修正: option キーの下に指のぶんの余白を確保する =====
   キーを吹き出しの右（上の段）へ動かしたぶん、指が下の入力欄まで降りてきていた。
   行の下に 46px 空けて、指が跳ねてもテキストにかからないようにする */
#how .howsay { padding-bottom: 46px; }
#how .howstack { gap: 0; }
#how .howstage.solo { padding-bottom: 16px; }

@media (max-width: 520px) {
  #how .howsay { padding-bottom: 40px; }
}

/* ===== 最終定義: option キーごと上に持ち上げ、その上下に隙間を作る =====
   キーを吹き出しより上に置くと「押す」が先に目に入る。
   指はキーの下にぶら下がるので、下にもそのぶんの余白を残す */
#how .howsay {
  align-items: center;
  padding-top: 30px;
  padding-bottom: 24px;
}
#how .keyline2 {
  align-self: flex-start;
  margin-top: -30px;
}
#how .howstage.solo { padding-top: 14px; padding-bottom: 16px; }

@media (max-width: 520px) {
  #how .howsay { padding-top: 26px; padding-bottom: 20px; }
  #how .keyline2 { margin-top: -26px; }
}

/* ===== 最終定義: option キーを右寄せにする（吹き出しから離して見やすく） ===== */
#how .howstack { align-items: stretch; }
#how .howsay { width: 100%; }
#how .keyline2 { margin-left: auto; margin-right: 28px; }

@media (max-width: 520px) {
  #how .keyline2 { margin-right: 14px; }
}

/* ===== 最終定義: 実演の並びを「入力欄が上・人とキーが下」に =====
   ヒーローと同じ（画面が上、手元が下）。DOM は触らず order だけで入れ替える */
#how .howstage.solo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#how .how-out { order: 1; margin-top: 0; }
#how .howstack { order: 2; }
#how .howsay { padding-top: 26px; padding-bottom: 22px; }

/* ===== 最終定義: ヒーローは option キーを右へ、説明文を左へ =====
   キーと指を右に寄せると、下の「押して、話して、離すだけ。」に指がかからない */
.hero .speaker { width: 100%; }
.hero .speech { flex: 1; width: 100%; align-items: flex-start; }
.hero .speech .keyline { align-self: flex-end; margin-right: 26px; }
.hero .scene-note { text-align: left; }
.hero .scene-note .sn-main { display: block; }

@media (max-width: 520px) {
  .hero .speech .keyline { margin-right: 10px; }
}

/* ===== 最終定義: 指は「上に動いて、少し縮む」＝押し込んでいる感じを出す =====
   指先を支点に縮ませると、キーに向かって押し込んでいるように見える */
.finger { transform-origin: 22% 0; top: calc(100% - 12px); }
.keycap.big .finger { top: calc(100% - 12px); }

@keyframes fingerTapA {
  0%, 3%    { transform: translateY(14px) scale(1); }
  5%        { transform: translateY(0) scale(0.86); }
  11%       { transform: translateY(3px) scale(0.92); }
  17%       { transform: translateY(0) scale(0.86); }
  23%       { transform: translateY(3px) scale(0.92); }
  29%       { transform: translateY(0) scale(0.86); }
  35%       { transform: translateY(3px) scale(0.92); }
  41%       { transform: translateY(0) scale(0.86); }
  49.9%     { transform: translateY(0) scale(0.86); }
  52%, 100% { transform: translateY(14px) scale(1); }
}
@keyframes fingerTapHow {
  0%, 7.9%  { transform: translateY(14px) scale(1); }
  9%        { transform: translateY(0) scale(0.86); }
  14%       { transform: translateY(3px) scale(0.92); }
  19%       { transform: translateY(0) scale(0.86); }
  25%       { transform: translateY(3px) scale(0.92); }
  31%       { transform: translateY(0) scale(0.86); }
  37%       { transform: translateY(3px) scale(0.92); }
  43%       { transform: translateY(0) scale(0.86); }
  49%       { transform: translateY(3px) scale(0.92); }
  55.9%     { transform: translateY(0) scale(0.86); }
  57%, 100% { transform: translateY(14px) scale(1); }
}
@keyframes fingerTapUC {
  0%, 3%    { transform: translateY(14px) scale(1); }
  5%        { transform: translateY(0) scale(0.86); }
  11%       { transform: translateY(3px) scale(0.92); }
  17%       { transform: translateY(0) scale(0.86); }
  23%       { transform: translateY(3px) scale(0.92); }
  29%       { transform: translateY(0) scale(0.86); }
  35.9%     { transform: translateY(0) scale(0.86); }
  39%, 100% { transform: translateY(14px) scale(1); }
}

/* ===== 最終定義: 押している間、指は揺らさずピタッと止める ===== */
@keyframes fingerTapA {
  0%, 3%    { transform: translateY(14px) scale(1); }
  5%, 49.9% { transform: translateY(0) scale(0.86); }
  52%, 100% { transform: translateY(14px) scale(1); }
}
@keyframes fingerTapHow {
  0%, 7.9%  { transform: translateY(14px) scale(1); }
  9%, 55.9% { transform: translateY(0) scale(0.86); }
  57%, 100% { transform: translateY(14px) scale(1); }
}
@keyframes fingerTapUC {
  0%, 3%     { transform: translateY(14px) scale(1); }
  5%, 35.9%  { transform: translateY(0) scale(0.86); }
  39%, 100%  { transform: translateY(14px) scale(1); }
}

/* ===== 最終定義: 押していない間だけ、指をゆらゆらさせる =====
   押しているあいだはピタッと静止（縮んだまま）。待機中だけ上下に小さく漂う */
@keyframes fingerTapA {
  0%        { transform: translateY(14px) scale(1); }
  2%        { transform: translateY(18px) scale(1); }
  3.5%      { transform: translateY(14px) scale(1); }
  5%, 49.9% { transform: translateY(0) scale(0.86); }   /* 押している間は静止 */
  52%       { transform: translateY(14px) scale(1); }
  62%       { transform: translateY(18px) scale(1); }
  72%       { transform: translateY(14px) scale(1); }
  82%       { transform: translateY(18px) scale(1); }
  92%       { transform: translateY(14px) scale(1); }
  100%      { transform: translateY(16px) scale(1); }
}
@keyframes fingerTapHow {
  0%        { transform: translateY(14px) scale(1); }
  3%        { transform: translateY(18px) scale(1); }
  6%        { transform: translateY(14px) scale(1); }
  7.9%      { transform: translateY(14px) scale(1); }
  9%, 55.9% { transform: translateY(0) scale(0.86); }   /* 押している間は静止 */
  57%       { transform: translateY(14px) scale(1); }
  64%       { transform: translateY(18px) scale(1); }
  71%       { transform: translateY(14px) scale(1); }
  78%       { transform: translateY(18px) scale(1); }
  85%       { transform: translateY(14px) scale(1); }
  92%       { transform: translateY(18px) scale(1); }
  100%      { transform: translateY(14px) scale(1); }
}
@keyframes fingerTapUC {
  0%         { transform: translateY(14px) scale(1); }
  2%         { transform: translateY(18px) scale(1); }
  3.5%       { transform: translateY(14px) scale(1); }
  5%, 35.9%  { transform: translateY(0) scale(0.86); }  /* 押している間は静止 */
  39%        { transform: translateY(14px) scale(1); }
  50%        { transform: translateY(18px) scale(1); }
  61%        { transform: translateY(14px) scale(1); }
  72%        { transform: translateY(18px) scale(1); }
  83%        { transform: translateY(14px) scale(1); }
  94%        { transform: translateY(18px) scale(1); }
  100%       { transform: translateY(15px) scale(1); }
}

/* ===== 最終定義: ヒーローも「①押す → ②話す」の順にする =====
   ①（押す）の段階では吹き出しを出さない。②に入ってから喋りはじめる */
.hero .bubble { animation-name: heroBubble; }
.hero .bubble .say { animation-name: heroSay; }

@keyframes heroBubble {
  0%, 19%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  21%, 49.9% { opacity: 1; transform: none; }
  50%, 100%  { opacity: 0; transform: none; }
}
@keyframes heroSay {
  0%, 21%   { max-width: 0; }
  45%, 100% { max-width: 24em; }
}

/* 録音の赤丸も「押した瞬間」から点きはじめる（吹き出しより先） */
.hero .recdot { background: #ff4b4b; }

/* ===== 最終定義: お試しは「アトラクション」= 黄色いパネルで浮かせる =====
   周りが黒一色なので、ここだけ色を反転させて“遊べる場所”に見せる */
#tryit-sec { border-top: none; }          /* 上下の区切り線を消す */
#tryit-sec + section { border-top: none; }

#tryit-sec .tryit {
  background: #ffd23d;
  border: none;
  border-radius: 22px;
  box-shadow:
    0 0 0 6px rgba(255, 210, 61, 0.14),
    0 34px 70px -34px rgba(255, 210, 61, 0.55);
  color: #1b1713;
  padding: 34px 32px 30px;
}
#tryit-sec .try-head { color: #14140f; }
#tryit-sec .try-lead { color: #4a3f22; }
#tryit-sec .try-lead b { color: #14140f; }
#tryit-sec .try-under { color: #6b5c33; }
#tryit-sec .try-note { color: #5d5029; }
#tryit-sec .try-note strong { color: #14140f; }
#tryit-sec .try-verdict { color: #14140f; }

/* 中身の面は白にして、黄色の上でも読みやすく */
#tryit-sec .try-target {
  background: #fffaea;
  border: 1px solid rgba(27, 23, 19, 0.18);
  color: #1b1713;
}
#tryit-sec .try-label { color: #14140f; }
#tryit-sec .try-result { color: #7a6a33; }
#tryit-sec .try-card textarea {
  background: #fffdf6;
  border: 1px solid rgba(27, 23, 19, 0.22);
  color: #1b1713;
}
#tryit-sec .try-card textarea::placeholder { color: #8a7c55; }
#tryit-sec .try-card textarea:focus { outline: 2px solid #1b1713; border-color: transparent; }
#tryit-sec .try-say { color: #4a3f22; }

/* 押しながら話すボタンは黒 — 黄色の上でいちばん目立つ */
#tryit-sec .try-mic {
  background: #14140f;
  color: #ffd23d;
  border: none;
}
#tryit-sec .try-mic:hover { background: #26261c; }

/* スマホの「お試しスピード測定」ボタンは黒に反転 */
#tryit-sec .try-open-btn { background: #14140f; color: #ffd23d; }
#tryit-sec .try-open-btn:hover { background: #26261c; }
#tryit-sec .try-panel-head { color: #4a3f22; }
#tryit-sec .try-close { color: #4a3f22; }

@media (max-width: 520px) {
  #tryit-sec .tryit { padding: 24px 18px 22px; border-radius: 18px; }
}

/* ===== 最終定義: 絵文字をやめて Material Icons（インラインSVG）に ===== */
.mi {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 6px;
  flex: none;
}
#tryit-sec .try-label .mi { color: #14140f; }

/* ===== 最終定義: 課題文のラベルは箱の外に出す ===== */
.try-target-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
#tryit-sec .try-target-label { color: #5d5029; }
#tryit-sec .try-target { margin-top: 0; }

/* ===== 最終定義: 結果は大きく赤で（ここがこのアトラクションのオチ） ===== */
#tryit-sec .try-verdict {
  margin-top: 26px;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #14140f;
  text-align: center;
}
#tryit-sec .try-verdict .vnum {
  color: #e3220f;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0;
  padding: 0 4px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
#tryit-sec .try-verdict .vnum small { font-size: 26px; margin-left: 2px; }

@media (max-width: 520px) {
  #tryit-sec .try-verdict { font-size: 20px; margin-top: 20px; }
  #tryit-sec .try-verdict .vnum { font-size: 42px; }
  #tryit-sec .try-verdict .vnum small { font-size: 20px; }
}

/* ===== 修正: 「使う場面」も吹き出しの幅を固定して option キーを動かさない =====
   吹き出し＝左・キー＝右で固定。文字が伸びてもキーの位置は最初から最後まで同じ */
#features .speech {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
}
#features .speech .bubble {
  flex: none;
  width: min(19em, calc(100% - 80px));
  max-width: none;
  box-sizing: border-box;
}
#features .speech .keyline { flex: none; margin-left: auto; }

@media (max-width: 520px) {
  #features .speech { gap: 8px; }
  #features .speech .bubble { width: min(17em, calc(100% - 66px)); }
}

/* ===== 最終定義: 使い方の入力欄は本物のアプリ画面らしく白に ===== */
#how .how-out .how-input {
  background: #ffffff;
  border-color: #cfd3db;
  color: #1b1d22;
}
#how .how-out .howpop,
#how .how-out .howpop-raw { color: #1b1d22; }
#how .how-out .caret { background: #3da5ff; }

/* ===== 最終定義: 実演のウィンドウは「本物のPCアプリ」らしく =====
   上のバー＝青 / 中身＝白。ヒーロー・使う場面・使い方の3箇所を同じ見た目に揃える */

/* --- ウィンドウ本体（ヒーロー & 使う場面） --- */
.hero .chatwin,
#features .chatwin {
  background: #ffffff;
  border-color: #d3d7de;
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.75);
}
.hero .chatbar,
#features .chatbar {
  background: #1c7fd6;
  color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.hero .chatbar i,
#features .chatbar i { background: rgba(255, 255, 255, 0.8); }

.hero .chatbody,
#features .chatbody { background: #ffffff; }

.hero .msg,
#features .msg {
  background: #eef0f4;
  border-color: #dfe3ea;
  color: #23262c;
}
.hero .chatinput,
#features .chatinput {
  background: #ffffff;
  border-color: #c9cdd6;
  color: #1b1d22;
}
.hero .result,
#features .result,
#features .howpopB { color: #1b1d22; }
.hero .send,
#features .send { background: #1c7fd6; color: #ffffff; }
.hero .caret,
#features .caret { background: #1c7fd6; }

/* --- 使い方の入力欄も同じく白に --- */
#how .how-out .how-input {
  background: #ffffff;
  border-color: #c9cdd6;
  color: #1b1d22;
}
#how .how-out .howpop,
#how .how-out .howpop-raw { color: #1b1d22; }
#how .how-out .caret { background: #1c7fd6; }

/* ===== 修正: 吹き出しが文字より狭くて、文がはみ出していた =====
   18文字 + 左右の余白ぶんを確保する（box-sizing: border-box なので余白を足した幅にする） */
#features .speech .bubble { width: min(21.5em, calc(100% - 78px)); }
@media (max-width: 520px) {
  #features .speech .bubble { width: min(20.5em, calc(100% - 62px)); }
}

/* ===== 修正: 吹き出しは固定幅をやめて中身に合わせる =====
   キーは margin-left:auto で右端に固定してあるので、吹き出しが伸びてもキーは動かない。
   幅を決め打ちすると文字がはみ出すので、上限だけ決めて中身なりに伸ばす */
#features .speech .bubble,
#how .how-bubble {
  width: auto;
  max-width: calc(100% - 78px);
}
@media (max-width: 520px) {
  #features .speech .bubble,
  #how .how-bubble { max-width: calc(100% - 62px); }
}

/* ============================================================
   使う場面: 5枚を縦に並べ、全部おなじ型で見せる
   （吹き出し＋optionキー → ウィンドウに結果が入る。一周12秒）
   ============================================================ */
.ucs { display: grid; gap: 44px; max-width: 900px; margin: 0 auto; }
.uc2 { margin: 0; }
.uc2-title {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.uc2-box {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #101016;
  padding: 26px 26px 28px;
}
.uc2-say {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 22px;
}
.uc2-bubble {
  width: auto;
  max-width: calc(100% - 78px);
  animation: uc2bubble 12s linear infinite;
}
.uc2-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: uc2speak 12s linear infinite;
}
.uc2-say .keyline { flex: none; margin-left: auto; align-self: flex-start; }
.uc2-note { margin-top: 14px; font-size: 13px; line-height: 1.9; color: var(--gray); }
.uc-foot { margin-top: 40px; text-align: center; font-size: 13px; color: var(--gray); }

/* 出力 */
.uc2-out {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: uc2out 12s linear infinite;
}

/* このセクションのキー・指・録音ドット・送信も同じ12秒に載せる */
#features .demo-key        { animation: uc2key 12s linear infinite; }
#features .demo-key .finger{ animation: uc2finger 12s linear infinite; }
#features .demo-key .w     { animation: uc2wave 12s linear infinite; }
#features .demo-key .w2    { animation: uc2wave2 12s linear infinite; }
#features .recdot          { animation: uc2rec 12s linear infinite; background: #ff4b4b; }
#features .send            { animation: uc2send 12s linear infinite; }
#features .caret           { background: #1c7fd6; }

@keyframes uc2key {
  0%, 7.9%   { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
  9%, 55.9%  { transform: translateY(3px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  57%, 100%  { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes uc2finger {
  0%        { transform: translateY(14px) scale(1); }
  3%        { transform: translateY(18px) scale(1); }
  6%, 7.9%  { transform: translateY(14px) scale(1); }
  9%, 55.9% { transform: translateY(0) scale(0.86); }
  57%       { transform: translateY(14px) scale(1); }
  70%       { transform: translateY(18px) scale(1); }
  84%       { transform: translateY(14px) scale(1); }
  100%      { transform: translateY(16px) scale(1); }
}
@keyframes uc2wave {
  0%, 9.9% { opacity: 0; transform: scale(1); }
  10% { opacity: 0.18; transform: scale(1); }
  24% { opacity: 0; transform: scale(1.4); }
  24.9% { opacity: 0; transform: scale(1); }
  25% { opacity: 0.18; }
  39% { opacity: 0; transform: scale(1.4); }
  39.1%, 100% { opacity: 0; }
}
@keyframes uc2wave2 {
  0%, 16.9% { opacity: 0; transform: scale(1); }
  17% { opacity: 0.12; transform: scale(1); }
  31% { opacity: 0; transform: scale(1.55); }
  31.1%, 100% { opacity: 0; }
}
@keyframes uc2rec {
  0%, 8.9% { opacity: 0; }
  9% { opacity: 1; }
  17% { opacity: 0.3; }
  26% { opacity: 1; }
  35% { opacity: 0.3; }
  44% { opacity: 1; }
  53% { opacity: 0.3; }
  55.9% { opacity: 0.5; }
  56%, 100% { opacity: 0; }
}
@keyframes uc2bubble {
  0%, 20%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  22%, 55.9% { opacity: 1; transform: none; }
  56%, 100%  { opacity: 0; transform: none; }
}
@keyframes uc2speak {
  0%, 22%   { max-width: 0; }
  46%, 100% { max-width: 30em; }
}
@keyframes uc2out {
  0%, 57.9% { opacity: 0; transform: scale(0.94); max-width: 0; }
  59.5%     { opacity: 1; transform: scale(1.05); max-width: 40em; }
  62%, 90%  { opacity: 1; transform: scale(1); max-width: 40em; }
  95%, 100% { opacity: 0; max-width: 40em; }
}
@keyframes uc2send {
  0%, 57.9% { background: #cfd3db; }
  59.5%, 90% { background: #1c7fd6; }
  95%, 100% { background: #cfd3db; }
}

@media (max-width: 520px) {
  .ucs { gap: 34px; }
  .uc2-title { font-size: 19px; margin-bottom: 10px; }
  .uc2-box { padding: 18px 16px 20px; border-radius: 16px; }
  .uc2-say { gap: 8px; margin-bottom: 16px; padding-bottom: 18px; }
  .uc2-bubble { max-width: calc(100% - 62px); }
  .uc2-note { font-size: 12px; }
  .uc-foot { font-size: 12px; }
  .uc2-out { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .uc2-bubble, .uc2-text, .uc2-out,
  #features .demo-key, #features .demo-key .finger,
  #features .recdot, #features .send { animation: none; }
  .uc2-bubble, .uc2-out { opacity: 1; transform: none; max-width: none; }
}

/* ============================================================
   メリハリ: 伝えるべきものは大きく、説明は小さく（PC）
   ============================================================ */
@media (min-width: 861px) {
  .sec-head h2 { font-size: 40px; line-height: 1.45; }
  .story .sec-head h2 { font-size: 36px; }
  .sec-head { margin-bottom: 34px; }

  .uc2-title { font-size: 26px; }
  .price-lead { font-size: 16px; }
  .try-head { font-size: 34px; }

  /* 読みたい人だけ読む細かい話は小さく */
  .price-notes { font-size: 12.5px; }
  .price-notes li { line-height: 1.9; }
  .uc2-note, .uc-foot { font-size: 13px; }
  .cost-note { font-size: 13.5px; }
  .how-note { font-size: 13.5px; }
  .try-note { font-size: 11.5px; }
  .ev-note { font-size: 12px; }
  .start-note, .day-close { font-size: 13.5px; }
}

/* ===== 最終定義: 使う場面は2カラム。各カードは「ウィンドウが上・手元が下」 ===== */
@media (min-width: 861px) {
  .ucs {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
    max-width: 1080px;
  }
  .ucs > .uc2:first-child { grid-column: 1 / -1; }   /* 先頭の1枚だけ横いっぱい */
}

/* 中身の順番を入れ替え: チャット窓が上、吹き出しとキーが下 */
.uc2-box { display: flex; flex-direction: column; padding-bottom: 22px; }
.uc2-box .chatwin { order: 1; }
.uc2-say {
  order: 2;
  margin: 22px 0 0;
  padding-bottom: 42px;   /* 指がぶら下がるぶん */
  padding-top: 0;
}

@media (max-width: 520px) {
  .uc2-say { margin-top: 16px; padding-bottom: 36px; }
  .uc2-box { padding-bottom: 16px; }
}

/* ===== 最終定義: 測った結果を X に投稿するボタン ===== */
.try-share {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 0;
  width: max-content;
  max-width: 100%;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  background: #14140f;
  color: #ffd23d;
  transition: transform 0.15s ease, background 0.2s ease;
}
.try-share:not([hidden]) { display: flex; }
.try-share:hover { background: #26261c; transform: translateY(-1px); }
.try-share .xi { width: 16px; height: 16px; flex: none; }

@media (max-width: 520px) {
  .try-share { width: 100%; padding: 14px 18px; font-size: 14px; }
}

/* ===== 「完全無料」の見せ方 ===== */
.free-word {
  color: var(--red);
  font-weight: 900;
}
.free-note-mark {
  font-size: 0.7em;
  color: var(--gray);
  text-decoration: none;
  vertical-align: super;
}
.free-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--gray);
}

/* ===== 「完全無料」の一行（インストールボタンのすぐ下） ===== */
.cta-free {
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.cta-free li { position: relative; padding-left: 15px; margin: 3px 0; }
.cta-free li::before { content: "•"; position: absolute; left: 2px; opacity: .7; }
.cta-free b { color: var(--ink); }

/* ===== クーポンコード（?ref= があるときだけ、インストールボタンの下に出す） ===== */
/* hidden を確実に効かせる（親が flex でも打ち消されないように） */
.ref-box[hidden] { display: none !important; }
.ref-box {
  margin: 18px auto 0;
  align-self: center;   /* 親が flex 縦並びのとき、左詰めではなく中央に置く */
  width: 100%;
  max-width: 760px;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper-deep);
  padding: 22px 28px;
  text-align: center;
}
.ref-box-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); text-align: center; white-space: nowrap; }
.ref-box-lead b { color: var(--ink); }
.ref-box-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ref-box code {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 16px;
  background: var(--paper);
}
.ref-box button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: var(--paper);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 11px 18px;
}
.ref-box-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--gray); }
.ref-box-note b { color: var(--ink-soft); }

@media (max-width: 520px) {
  .ref-box { padding: 16px 16px; }
  .ref-box-lead { font-size: 13px; white-space: normal; }
  .ref-box code { font-size: 18px; padding: 8px 12px; }
}

/* ============================================================
   最終定義: ヒーローの実演を「数字 → 動き」の順に組み直す（一周12秒）
   1が立つ → 押す ／ 2が立つ → 喋る（1文字ずつ）／ 3が立つ → 離す → 文字が入る
   使い方セクションと同じ間合い・同じ赤の演出に揃える
   ============================================================ */
.hero .demo-key,
.hero .demo-key .finger,
.hero .demo-key .w,
.hero .demo-key .w2,
.hero .recdot,
.hero .bubble,
.hero .bubble .say,
.hero .result,
.hero .send,
.hero .hero3 li,
.hero .hero3 .n {
  animation-duration: 12s;
}

.hero .demo-key         { animation-name: heroKey2; }
.hero .demo-key .finger { animation-name: heroFinger2; }
.hero .demo-key .w      { animation-name: heroWave2a; }
.hero .demo-key .w2     { animation-name: heroWave2b; }
.hero .recdot           { animation-name: heroRec2; }
.hero .bubble           { animation-name: heroBubble2; }
.hero .bubble .say      { animation-name: heroSay2; }
.hero .result           { animation-name: heroResult2; }
.hero .send             { animation-name: heroSend2; }

/* --- 番号: パッと切り替わる（フェードなし）・進行中は赤 --- */
.hero .hero3 li { opacity: 0.25; animation-timing-function: step-end; }
.hero .hero3 .n { color: #3da5ff; display: inline-block; padding-bottom: 4px;
                  border-bottom: 3px solid transparent; animation-timing-function: step-end; }
.hero .hero3 li:nth-child(1) { animation-name: heroS1; }
.hero .hero3 li:nth-child(2) { animation-name: heroS2; }
.hero .hero3 li:nth-child(3) { animation-name: heroS3; }
.hero .hero3 li:nth-child(1) .n { animation-name: heroU1; }
.hero .hero3 li:nth-child(2) .n { animation-name: heroU2; }
.hero .hero3 li:nth-child(3) .n { animation-name: heroU3; }

@keyframes heroS1 { 0% { opacity: 1; } 20%, 100% { opacity: 0.25; } }
@keyframes heroS2 { 0% { opacity: 0.25; } 20% { opacity: 1; } 51%, 100% { opacity: 0.25; } }
@keyframes heroS3 { 0% { opacity: 0.25; } 51% { opacity: 1; } 90%, 100% { opacity: 0.25; } }
@keyframes heroU1 { 0% { color: #ff4b4b; border-bottom-color: #ff4b4b; } 20%, 100% { color: #3da5ff; border-bottom-color: transparent; } }
@keyframes heroU2 { 0% { color: #3da5ff; border-bottom-color: transparent; } 20% { color: #ff4b4b; border-bottom-color: #ff4b4b; } 51%, 100% { color: #3da5ff; border-bottom-color: transparent; } }
@keyframes heroU3 { 0% { color: #3da5ff; border-bottom-color: transparent; } 51% { color: #ff4b4b; border-bottom-color: #ff4b4b; } 90%, 100% { color: #3da5ff; border-bottom-color: transparent; } }

/* --- ① 9% で押す（「1」が立ってから1.1秒後） --- */
@keyframes heroKey2 {
  0%, 7.9%   { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
  9%, 55.9%  { transform: translateY(3px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  57%, 100%  { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes heroFinger2 {
  0%        { transform: translateY(14px) scale(1); }
  3%        { transform: translateY(18px) scale(1); }
  6%, 7.9%  { transform: translateY(14px) scale(1); }
  9%, 55.9% { transform: translateY(0) scale(0.86); }
  57%       { transform: translateY(14px) scale(1); }
  70%       { transform: translateY(18px) scale(1); }
  84%       { transform: translateY(14px) scale(1); }
  100%      { transform: translateY(16px) scale(1); }
}
@keyframes heroWave2a {
  0%, 9.9% { opacity: 0; transform: scale(1); }
  10% { opacity: 0.18; transform: scale(1); }
  24% { opacity: 0; transform: scale(1.4); }
  24.9% { opacity: 0; transform: scale(1); }
  25% { opacity: 0.18; }
  39% { opacity: 0; transform: scale(1.4); }
  39.1%, 100% { opacity: 0; }
}
@keyframes heroWave2b {
  0%, 16.9% { opacity: 0; transform: scale(1); }
  17% { opacity: 0.12; transform: scale(1); }
  31% { opacity: 0; transform: scale(1.55); }
  31.1%, 100% { opacity: 0; }
}
@keyframes heroRec2 {
  0%, 8.9% { opacity: 0; }
  9% { opacity: 1; }
  17% { opacity: 0.3; }
  26% { opacity: 1; }
  35% { opacity: 0.3; }
  44% { opacity: 1; }
  53% { opacity: 0.3; }
  55.9% { opacity: 0.5; }
  56%, 100% { opacity: 0; }
}

/* --- ② 23% に吹き出し（「2」が立ってから0.36秒後）→ 46% まで1文字ずつ --- */
@keyframes heroBubble2 {
  0%, 21%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  23%, 55.9% { opacity: 1; transform: none; }
  56%, 100%  { opacity: 0; transform: none; }
}
@keyframes heroSay2 {
  0%, 23%   { max-width: 0; }
  46%, 100% { max-width: 24em; }
}

/* --- ③ 56% に離す（「3」が立ってから0.6秒後）→ 58% にチャットへ入る --- */
@keyframes heroResult2 {
  0%, 57.9% { opacity: 0; transform: scale(0.92); max-width: 0; }
  59.5%     { opacity: 1; transform: scale(1.06); max-width: 30em; }
  62%, 90%  { opacity: 1; transform: scale(1); max-width: 30em; }
  95%, 100% { opacity: 0; max-width: 30em; }
}
@keyframes heroSend2 {
  0%, 59.4%  { background: #cfd3db; }
  60%, 90%   { background: #1c7fd6; }
  95%, 100%  { background: #cfd3db; }
}

/* スマホは文字サイズで出す方式 */
@media (max-width: 520px) {
  .hero .result { animation-name: heroResult2M; }
}
@keyframes heroResult2M {
  0%, 57.9%  { opacity: 0; font-size: 0px; }
  59.5%, 90% { opacity: 1; font-size: 12.5px; }
  95%, 100%  { opacity: 0; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero3 li, .hero .hero3 .n { animation: none; opacity: 1; }
  .hero .hero3 .n { color: #3da5ff; border-bottom-color: transparent; }
}

/* ===== 修正: ヒーローの番号の色が1周目しか動かない =====
   .hero3 .n には animation-iteration-count が設定されておらず既定の 1 回で止まり、
   2周目以降は最終キーフレーム（青）のまま固まっていた */
.hero .hero3 .n,
.hero .hero3 li {
  animation-iteration-count: infinite;
  animation-fill-mode: none;
}

/* ===== 最終定義: ヒーローの一文の核だけを青く・大きく ===== */
.hero .tagline .fastest {
  color: #3da5ff;
  font-weight: 700;
  font-size: 1.22em;
  line-height: 1.7;
}
@media (max-width: 520px) {
  .hero .tagline .fastest { font-size: 1.15em; }
}

/* ===== 最終定義: 「始め方」も大きい 1・2・3 で（使い方セクションと同じ言語） ===== */
.start3 { max-width: 760px; margin: 0 auto 34px; }
.start-more { margin-top: 16px; font-size: 13.5px; }
.start-more a { color: #4db2ff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 520px) {
  .start3 { margin-bottom: 24px; }
  .start-more { font-size: 12.5px; }
}

/* ============================================================
   ダウンロードのダイアログ（画面遷移させない）
   ============================================================ */
.dlg-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.dlg-back[hidden] { display: none; }
.dlg {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 34px 34px 30px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: #101018;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
  animation: dlgIn 0.18s ease-out;
}
@keyframes dlgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.dlg-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--gray);
  font-size: 16px;
  cursor: pointer;
}
.dlg-x:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.dlg-title {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--ink);
}
.dlg-dl { display: inline-block; padding: 16px 32px; font-size: 15.5px; }
.dlg-note { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--gray); }

.dlg-next {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.dlg-next-h {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-bottom: 14px;
  text-align: center;
}
.dlg-steps { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.dlg-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.dlg-steps .n {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: #3da5ff;
}
.dlg-steps .t { font-size: 13px; line-height: 1.8; color: var(--gray); }
.dlg-steps .t b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
.dlg-guide {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #4db2ff;
  text-decoration: none;
}
.dlg-guide:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .dlg-back { padding: 14px; align-items: start; }
  .dlg { padding: 26px 18px 22px; border-radius: 18px; }
  .dlg-title { font-size: 19px; }
  .dlg-dl { width: 100%; padding: 15px 18px; font-size: 14.5px; }
}

/* ===== 始め方: ステップ1の中のボタン・ガイドへのカード ===== */
.btn-sm {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 20px;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.start3 li { align-content: start; }

/* ステップ1: Mac/Windows の2つのインストールボタンを並べる箱 */
.start-dl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; width: max-content; max-width: 100%; }
.start-dl .btn-sm { margin-top: 0; }

.guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 34px auto 0;
  padding: 18px 22px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #101018;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.guide-card:hover { border-color: rgba(61, 165, 255, 0.5); background: #14141c; }
/* タイトルが主役。説明は直下に小さく薄く添えるだけ */
.guide-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide-card-t {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
}
.guide-card-d { font-size: 11.5px; color: var(--gray); opacity: 0.75; }
.guide-card-arrow { margin-left: auto; color: #3da5ff; font-size: 18px; }

@media (max-width: 520px) {
  .guide-card { gap: 12px; padding: 16px 18px; margin-top: 26px; }
  .guide-card-t { font-size: 16px; }
  .guide-card-d { font-size: 11px; }
  .btn-sm { width: 100%; text-align: center; }
}

/* ダイアログのタイトルにロゴを添える */
.dlg-title { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dlg-logo { flex: none; color: var(--ink); }
@media (max-width: 520px) {
  .dlg-logo { width: 24px; height: 24px; }
  .dlg-title { gap: 8px; }
}

/* ============================================================
   最終定義: 主ボタン（インストール）を「押したくなる」見た目に
   平たい白い箱をやめ、青のグラデ + 上辺のテカリ + 影で立体にする
   ============================================================ */
.btn:not(.ghost) {
  position: relative;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #58b6ff 0%, #2f93ee 52%, #1a7ad0 100%);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 26px -12px rgba(28, 127, 214, 0.85),
    0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
/* 上半分のテカリ */
.btn:not(.ghost)::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 11px 11px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn:not(.ghost):hover {
  background: linear-gradient(180deg, #6ec0ff 0%, #3a9df5 52%, #1f85dd 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 18px 34px -14px rgba(28, 127, 214, 0.95),
    0 3px 7px rgba(0, 0, 0, 0.4);
}
.btn:not(.ghost):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(28, 127, 214, 0.7);
}
.btn:not(.ghost):focus-visible {
  outline: 3px solid rgba(120, 200, 255, 0.75);
  outline-offset: 3px;
}
/* ダイアログの主ボタンは一段大きく */
.dlg-dl { border-radius: 14px; }
.dlg-dl::after { border-radius: 13px 13px 16px 16px; }

/* ===== 差し戻し: 主ボタンは白基調に。青グラデはやめる =====
   白のまま「押せる感」だけ足す: ごく浅いグラデ + 上辺のハイライト + 落ち影 */
.btn:not(.ghost) {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  color: #14140f;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 14px 30px -16px rgba(0, 0, 0, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.4);
}
.btn:not(.ghost)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  opacity: 0.5;
}
.btn:not(.ghost):hover {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 20px 38px -18px rgba(0, 0, 0, 0.95),
    0 3px 7px rgba(0, 0, 0, 0.45);
}
.btn:not(.ghost):active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #f2f0ea 0%, #e9e6df 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.16),
    0 4px 12px -8px rgba(0, 0, 0, 0.8);
}
.btn:not(.ghost):focus-visible {
  outline: 3px solid rgba(120, 200, 255, 0.8);
  outline-offset: 3px;
}

/* ===== 最終定義: 進行中の色を「赤」から「青」に。待機は白〜グレー =====
   赤は録音ドット（本物の録音インジケータ）だけに残す */
.hero .hero3 .n,
#how .how3 .n { color: #cfcbc2; }          /* 待機: 白に近いグレー */

@keyframes heroU1 { 0% { color: #3da5ff; border-bottom-color: #3da5ff; } 20%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }
@keyframes heroU2 { 0% { color: #cfcbc2; border-bottom-color: transparent; } 20% { color: #3da5ff; border-bottom-color: #3da5ff; } 51%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }
@keyframes heroU3 { 0% { color: #cfcbc2; border-bottom-color: transparent; } 51% { color: #3da5ff; border-bottom-color: #3da5ff; } 90%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }

@keyframes how3u1 { 0% { color: #3da5ff; border-bottom-color: #3da5ff; } 20%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }
@keyframes how3u2 { 0% { color: #cfcbc2; border-bottom-color: transparent; } 20% { color: #3da5ff; border-bottom-color: #3da5ff; } 51%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }
@keyframes how3u3 { 0% { color: #cfcbc2; border-bottom-color: transparent; } 51% { color: #3da5ff; border-bottom-color: #3da5ff; } 90%, 100% { color: #cfcbc2; border-bottom-color: transparent; } }

/* キーの縁と吹き出しの点滅も青に揃える */
@keyframes how2keyred {
  0%, 5.9%  { outline-color: transparent; }
  6%        { outline-color: #3da5ff; }
  20%       { outline-color: transparent; }
  51%       { outline-color: #3da5ff; }
  61%, 100% { outline-color: transparent; }
}
@keyframes how2bubblered {
  0%, 23.9% { border-color: #34343e; box-shadow: none; }
  24%       { border-color: #3da5ff; box-shadow: 0 0 0 3px rgba(61, 165, 255, 0.20); }
  28%       { border-color: #34343e; box-shadow: none; }
  32%       { border-color: #3da5ff; box-shadow: 0 0 0 3px rgba(61, 165, 255, 0.20); }
  36%       { border-color: #34343e; box-shadow: none; }
  40%       { border-color: #3da5ff; box-shadow: 0 0 0 3px rgba(61, 165, 255, 0.20); }
  44%       { border-color: #34343e; box-shadow: none; }
  48%       { border-color: #3da5ff; box-shadow: 0 0 0 3px rgba(61, 165, 255, 0.20); }
  51%, 100% { border-color: #34343e; box-shadow: none; }
}

/* 指は白い線画に（画像も白版に差し替え済み）。影は暗く落として黒背景でも輪郭が出るように */
.finger { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85)); }

/* ===== 最終定義: チャット窓のバーはグレー、送信ボタンは黒 ===== */
.hero .chatbar,
#features .chatbar {
  background: #e8eaee;
  color: #5a5e68;
  border-bottom: 1px solid #d5d9e0;
}
.hero .chatbar i,
#features .chatbar i { background: #c2c6cf; }

.hero .send,
#features .send { background: #1b1d22; color: #ffffff; }
@keyframes uc2send {
  0%, 57.9%  { background: #c9cdd6; }
  59.5%, 90% { background: #1b1d22; }
  95%, 100%  { background: #c9cdd6; }
}
@keyframes heroSend2 {
  0%, 59.4% { background: #c9cdd6; }
  60%, 90%  { background: #1b1d22; }
  95%, 100% { background: #c9cdd6; }
}

/* 使う場面のタイトルは絵文字をやめて線のアイコンに */
.uc2-title { display: flex; align-items: center; gap: 10px; }
.uc2-ic {
  flex: none;
  width: 26px;
  height: 26px;
  color: #3da5ff;
}
@media (max-width: 520px) {
  .uc2-ic { width: 21px; height: 21px; }
  .uc2-title { gap: 8px; }
}

/* アイコンは廃止。タイトルは文字だけ */
.uc2-title { display: block; }

/* ============================================================
   最終定義: 使う場面は横スクロールのカルーセル（全部おなじ幅）
   ============================================================ */
.ucs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 4px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #3a3a46 transparent;
}
.ucs::-webkit-scrollbar { height: 8px; }
.ucs::-webkit-scrollbar-track { background: transparent; }
.ucs::-webkit-scrollbar-thumb { background: #33333d; border-radius: 999px; }
.ucs::-webkit-scrollbar-thumb:hover { background: #454552; }

.ucs > .uc2 {
  flex: 0 0 auto;
  width: 520px;
  max-width: 84vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.ucs > .uc2:first-child { grid-column: auto; }   /* 横いっぱい指定を解除 */
.uc2-box { flex: 1; }

/* 右端に「まだ続きがある」ことを示す薄いフェード */
#features .ucs-wrap { position: relative; }
#features .ucs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 13, 0), rgba(10, 10, 13, 0.9));
}

.ucs-hint {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--gray);
}

@media (max-width: 520px) {
  .ucs { gap: 14px; padding-bottom: 14px; }
  .ucs > .uc2 { width: 300px; max-width: 88vw; }
  #features .ucs-wrap::after { width: 32px; }
}

/* ===== 最終定義: 使う場面は1枚ずつのカルーセル＋ドット ===== */
.ucs { gap: 0; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0; }
.ucs::-webkit-scrollbar { display: none; }
.ucs > .uc2 { width: 100%; max-width: 100%; scroll-snap-align: center; padding: 0 2px; }
#features .ucs-wrap::after { content: none; }   /* 端のフェードは不要に */

.ucs-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.ucs-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #3a3a46;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.ucs-dot:hover { background: #55556a; }
.ucs-dot.on { width: 26px; background: #3da5ff; }
.ucs-dot:focus-visible { outline: 2px solid rgba(120, 200, 255, 0.8); outline-offset: 3px; }

@media (max-width: 520px) {
  .ucs-dots { gap: 8px; margin-top: 16px; }
  .ucs-dot { width: 8px; height: 8px; }
  .ucs-dot.on { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ucs { scroll-behavior: auto; }
}

/* ===== 最終定義: PCは2枚ずつ表示 / スマホは1枚ずつ。掴んで振れる ===== */
.ucs { gap: 22px; cursor: grab; }
.ucs.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.ucs > .uc2 { scroll-snap-align: start; padding: 0; }

@media (min-width: 861px) {
  .ucs > .uc2 { width: calc(50% - 11px); max-width: calc(50% - 11px); }
}
@media (max-width: 860px) {
  .ucs { gap: 14px; }
  .ucs > .uc2 { width: 100%; max-width: 100%; }
}

/* スナップは JS 側で行うので、ブラウザ標準のスナップは切る（動きが二重になるため） */
.ucs { scroll-snap-type: none; }
.ucs > .uc2 { scroll-snap-align: none; }

/* ===== 最終定義: カルーセルは transform 方式（スクロールに頼らない） ===== */
#features .ucs-wrap { position: relative; overflow: hidden; }
.ucs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 22px;
  margin: 0;
  padding: 4px 0 2px;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ucs.dragging { cursor: grabbing; transition: none; user-select: none; }
.ucs > .uc2 { flex: 0 0 auto; }

@media (min-width: 861px) {
  .ucs > .uc2 { width: calc(50% - 11px); max-width: none; }
}
@media (max-width: 860px) {
  .ucs { gap: 14px; }
  .ucs > .uc2 { width: 100%; max-width: none; }
}

/* ===== 最終定義: FAQ の Q/A は文字だけ（箱をやめる） ===== */
.qa-badge {
  width: auto;
  height: auto;
  min-width: 1.2em;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: inline-block;
  text-align: left;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #3da5ff;               /* Q は水色の文字だけ */
}
.qa-badge.a {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ink);            /* A は白 */
}
.faq .qa summary { gap: 14px; align-items: baseline; }
.qa-a { gap: 14px; align-items: baseline; }

@media (max-width: 520px) {
  .qa-badge { font-size: 17px; }
  .faq .qa summary { gap: 11px; }
  .qa-a { gap: 11px; }
}

/* 見えていないカードの実演は止めておく（同期がずれないように） */
.ucs > .uc2 .uc2-bubble,
.ucs > .uc2 .uc2-text,
.ucs > .uc2 .uc2-out,
.ucs > .uc2 .demo-key,
.ucs > .uc2 .demo-key .finger,
.ucs > .uc2 .w,
.ucs > .uc2 .recdot,
.ucs > .uc2 .send {
  animation-play-state: paused;
}
.ucs > .uc2.live .uc2-bubble,
.ucs > .uc2.live .uc2-text,
.ucs > .uc2.live .uc2-out,
.ucs > .uc2.live .demo-key,
.ucs > .uc2.live .demo-key .finger,
.ucs > .uc2.live .w,
.ucs > .uc2.live .recdot,
.ucs > .uc2.live .send {
  animation-play-state: running;
}

/* ボタンの文言は折り返さない */
.btn { white-space: nowrap; }

/* 始め方のステップ1に置くボタンは、列の幅に収まるよう文字を少し詰める */
.start3 .btn-sm { font-size: 12.5px; padding: 12px 16px; letter-spacing: 0.01em; }
@media (max-width: 520px) {
  .start3 .btn-sm { font-size: 13px; padding: 13px 14px; }
}

/* 仕様行にアイコンを添える（何のPC向けか一目で分かるように） */
.mi-sm { width: 15px; height: 15px; flex: none; opacity: 0.85; }
.dlg-spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dlg-note .dlg-spec { display: flex; justify-content: center; }
.dlg-note .dlg-spec + .dlg-spec { margin-top: 4px; }
.cta-note .dlg-spec { margin-top: 4px; }

/* ダイアログ内でスクロールしても背景に伝播させない */
.dlg-back { overscroll-behavior: contain; }

/* ===== 最終定義: プランの差を数字だけでなく量で見せる ===== */
.plan-meter {
  height: 6px;
  margin: 14px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.plan-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f93ee, #6ec0ff);
}
.plan .plan-day {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.plan .plan-day b { color: var(--ink); font-weight: 700; }
.plan .plan-day em {
  font-style: normal;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7fc6ff;
  background: rgba(61, 165, 255, 0.14);
  border: 1px solid rgba(61, 165, 255, 0.32);
}
.plan .plan-for { margin-top: 8px; }

.plan-common {
  margin: 22px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: 13.5px;
  color: var(--gray);
}
.plan-common b { color: var(--ink); }

/* ===== 最終定義: プランの注記は枠に入れて、別のレイヤーだと分かるようにする ===== */
.price-notes {
  list-style: none;
  max-width: 680px;
  margin: 30px auto 0;
  padding: 20px 22px;
  border-left: 3px solid #2b6fae;
  border-radius: 4px 12px 12px 4px;
  background: rgba(255, 255, 255, 0.028);
}
.price-notes li {
  position: relative;
  padding-left: 16px;
  line-height: 1.9;
  color: var(--gray);
}
.price-notes li + li { margin-top: 8px; }
.price-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #55555f;
}
.price-notes strong { color: var(--ink-soft); }

@media (max-width: 520px) {
  .plan-meter { margin: 12px 0 10px; }
  .plan .plan-day { font-size: 12.5px; }
  .plan .plan-day em { display: inline-block; margin: 4px 0 0 0; }
  .plan-common { font-size: 12.5px; margin-top: 18px; }
  .price-notes { padding: 16px 16px; margin-top: 22px; }
}

/* ===== 修正: 注記の左の青い線をやめて、全体を細い枠のカードにする ===== */
.price-notes {
  border-left: none;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
  padding: 22px 26px;
}
.price-notes li::before { background: #4a4a55; }

@media (max-width: 520px) {
  .price-notes { padding: 16px 16px; border-radius: 12px; }
}

/* ===== 修正: 「使う場面」は 離す＝吹き出しが消える＝テキストが入る を同時にする =====
   ヒーローは「3 離す」の番号が出るので 0.4秒の間があっても意味が伝わるが、
   このセクションは番号が無いため、間が空くと「消えただけ」に見えてしまう */
@keyframes uc2bubble {
  0%, 20%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  22%, 55.9% { opacity: 1; transform: none; }
  56%, 100%  { opacity: 0; transform: none; }
}
@keyframes uc2out {
  0%, 55.9% { opacity: 0; transform: scale(0.94); max-width: 0; }
  57%       { opacity: 1; transform: scale(1.06); max-width: 40em; }
  59%, 90%  { opacity: 1; transform: scale(1); max-width: 40em; }
  95%, 100% { opacity: 0; max-width: 40em; }
}
@keyframes uc2send {
  0%, 55.9% { background: #c9cdd6; }
  57%, 90%  { background: #1b1d22; }
  95%, 100% { background: #c9cdd6; }
}

/* ===== 修正: 指を離してから 吹き出しが消える 順にする =====
   ① 55%〜56% で指が離れる → ② 57.5% で吹き出しが消え、同時にテキストが入る */
@keyframes uc2key {
  0%, 7.9%   { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
  9%, 54.9%  { transform: translateY(3px); box-shadow: 0 0 0 #000; background: #262630; border-color: #5b5b6a; }
  56%, 100%  { transform: none; box-shadow: 0 3px 0 #000; background: #191920; border-color: #3d3d48; }
}
@keyframes uc2finger {
  0%        { transform: translateY(14px) scale(1); }
  3%        { transform: translateY(18px) scale(1); }
  6%, 7.9%  { transform: translateY(14px) scale(1); }
  9%, 54.9% { transform: translateY(0) scale(0.86); }
  56%       { transform: translateY(14px) scale(1); }
  70%       { transform: translateY(18px) scale(1); }
  84%       { transform: translateY(14px) scale(1); }
  100%      { transform: translateY(16px) scale(1); }
}
@keyframes uc2rec {
  0%, 8.9% { opacity: 0; }
  9% { opacity: 1; }
  17% { opacity: 0.3; }
  26% { opacity: 1; }
  35% { opacity: 0.3; }
  44% { opacity: 1; }
  52% { opacity: 0.3; }
  54.9% { opacity: 0.5; }
  55% , 100% { opacity: 0; }
}
@keyframes uc2bubble {
  0%, 20%    { opacity: 0; transform: scale(0.85) translateY(4px); }
  22%, 57.4% { opacity: 1; transform: none; }
  58%, 100%  { opacity: 0; transform: none; }
}
@keyframes uc2out {
  0%, 57.4% { opacity: 0; transform: scale(0.94); max-width: 0; }
  58.5%     { opacity: 1; transform: scale(1.06); max-width: 40em; }
  60%, 90%  { opacity: 1; transform: scale(1); max-width: 40em; }
  95%, 100% { opacity: 0; max-width: 40em; }
}
@keyframes uc2send {
  0%, 57.4% { background: #c9cdd6; }
  58.5%, 90% { background: #1b1d22; }
  95%, 100% { background: #c9cdd6; }
}

/* ===== 修正: 吹き出しだけ 9秒周期で回っていた（他は12秒）=====
   古い `#features .bubble { animation-duration: 9s }` がセレクタの優先度で勝っていたため、
   吹き出しだけ周期がズレて、指を離すより先に消えていた。ID付きで確実に上書きする */
#features .uc2-bubble,
#features .bubble {
  animation-name: uc2bubble;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#features .uc2-text,
#features .say {
  animation-name: uc2speak;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#features .uc2-out {
  animation-name: uc2out;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ===== 最終定義: 吹き出しの左に「あなた」を置く（喋っているのは自分だと分かるように） ===== */
.uc2-me {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 46px;
}
.uc2-me-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: #1a1a22;
  color: #8f8b81;
}
.uc2-me-ic svg { width: 24px; height: 24px; }
.uc2-me-t {
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gray);
  white-space: nowrap;
}
.uc2-say .uc2-bubble { max-width: calc(100% - 78px - 58px); }

@media (max-width: 520px) {
  .uc2-me { width: 40px; }
  .uc2-me-ic { width: 34px; height: 34px; }
  .uc2-me-ic svg { width: 20px; height: 20px; }
  .uc2-me-t { font-size: 9.5px; }
  .uc2-say .uc2-bubble { max-width: calc(100% - 62px - 48px); }
}

/* 吹き出しのしっぽは左上（アイコン側）に。左下は丸める */
#features .uc2-bubble {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 14px;
}

/* ===== 最終定義: カルーセルのカードの高さを揃える =====
   説明文の行数（1行 or 2行）でカードの中身の高さがズレていたので、
   タイトルと説明文に行数ぶんの高さを確保して、枠の高さを常に同じにする */
.ucs { align-items: stretch; }
.ucs > .uc2 { display: flex; flex-direction: column; }
.uc2-title { min-height: calc(1.5em * 1); }
.uc2-box { flex: 1 1 auto; display: flex; flex-direction: column; }
.uc2-box .chatwin { flex: none; }
.uc2-say { margin-top: auto; }          /* 窓が上、手元は下端に寄せる */
.uc2-note {
  min-height: calc(1.9em * 2);          /* 1行でも2行ぶんの高さを確保 */
  display: flex;
  align-items: flex-start;
}

@media (max-width: 520px) {
  .uc2-note { min-height: calc(1.85em * 2); }
}

/* ===== 最終定義: カードの横幅を固定する（中身で伸び縮みさせない） ===== */
.ucs > .uc2 {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}
@media (min-width: 861px) { .ucs > .uc2 { width: calc(50% - 11px); } }
@media (max-width: 860px) { .ucs > .uc2 { width: 100%; } }
.uc2-box { min-width: 0; box-sizing: border-box; }
.uc2-say { min-width: 0; }
.uc2-box .chatwin { max-width: 100%; box-sizing: border-box; }

/* ===== 修正: チャット窓と「あなた／option キー」の行が重なる =====
   枠を縦フレックスにした際に間隔が消えていたので、必ず間が空くようにする */
.uc2-box {
  gap: 26px;
  padding-bottom: 26px;
}
.uc2-box .chatwin { margin-bottom: 0; }
.uc2-say {
  margin: 0;                 /* gap で間隔を取るので margin は使わない */
  margin-top: auto;
  padding-top: 0;
  padding-bottom: 46px;      /* 指がぶら下がるぶん */
  align-items: center;
}
.uc2-say .keyline { align-self: flex-start; }

@media (max-width: 520px) {
  .uc2-box { gap: 18px; padding-bottom: 18px; }
  .uc2-say { padding-bottom: 40px; }
}

/* ===== 修正: スマホの 1・2・3 で、1行目だけ番号の位置がずれる =====
   1つ目だけ padding-top を 0 にしていたため行の高さが他と違い、
   上下中央に置いた番号の位置がずれていた。余白を全行そろえる */
@media (max-width: 520px) {
  .how3 li { padding: 12px 0; }
  .how3 li:first-child { padding-top: 12px; border-top: none; }
  .how3 .n { justify-self: start; align-self: center; line-height: 1; }
  .how3 b { align-self: end; }
  .hero .hero3 li { padding: 10px 0; }
  .hero .hero3 li:first-child { padding-top: 10px; }
}

/* ===== 最終定義: スマホは見出しの上の余白を詰める（すぐ本題に入る） ===== */
@media (max-width: 520px) {
  .hero { padding-top: 18px; padding-bottom: 40px; }
  .hero h1.display { margin-top: 0; }
}

/* ===== 最終定義: コストの数字は「数字の列 / 説明の列」を縦に揃え、間に細い縦線 =====
   行ごとの flex だと列の位置が揃わないので、表全体を1つのグリッドにする */
@media (max-width: 520px) {
  #cost .ev-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    margin: 12px 0 16px;
  }
  #cost .ev-stat { display: contents; }
  #cost .ev-stat .n {
    min-width: 0;
    text-align: right;
    padding: 13px 16px 13px 0;
    border-bottom: 1px dashed var(--hairline);
  }
  #cost .ev-stat .l {
    min-width: 0;
    flex: none;
    text-align: left;
    padding: 13px 0 13px 16px;
    border-bottom: 1px dashed var(--hairline);
    border-left: 1px solid var(--hairline);
  }
  #cost .ev-stat:first-child .n,
  #cost .ev-stat:first-child .l { padding-top: 0; }
  #cost .ev-stat:last-child .n,
  #cost .ev-stat:last-child .l { border-bottom: none; padding-bottom: 0; }
}

/* ===== 修正: スマホの 1・2・3 に出ていた上の線と左の線を消す =====
   PC用の区切り線（.how3 li + li の border-left）がセレクタの優先度で残っていた */
@media (max-width: 520px) {
  .how3 li,
  .how3 li + li {
    border: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* 実演の枠が画面からはみ出さないようにする安全弁 */
  #how .howstage.solo { max-width: 100%; box-sizing: border-box; }
  #how .how-out { min-width: 0; }
  #how .how-out .how-input { min-width: 0; }
  #how .howsay { max-width: 100%; }
}

/* ===== 最終定義: コストの数字は点線をやめ、3行とも同じ高さにする ===== */
@media (max-width: 520px) {
  #cost .ev-stats {
    grid-auto-rows: 76px;          /* 3行とも同じ高さ */
    align-items: center;
    margin: 14px 0 18px;
  }
  #cost .ev-stat .n,
  #cost .ev-stat .l {
    border-bottom: none;           /* 点線をやめる */
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }
  #cost .ev-stat .n { justify-content: flex-end; padding-right: 18px; }
  #cost .ev-stat .l { padding-left: 18px; line-height: 1.7; }
  #cost .ev-stat:first-child .n,
  #cost .ev-stat:first-child .l,
  #cost .ev-stat:last-child .n,
  #cost .ev-stat:last-child .l { padding-top: 0; padding-bottom: 0; }
}

/* ===== 修正: スマホで整形オフ/オンの入力欄が画面からはみ出す =====
   .how-input に white-space: nowrap が残っていて折り返せず、
   flex:1 の既定 min-width:auto と相まって枠を押し広げていた。
   スマホだけ折り返し可＋縮小可にする（PCは触らない） */
@media (max-width: 520px) {
  #how .how-out { min-width: 0; }
  #how .how-out .how-input {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1 1 0;
  }
  #how .how-out .howpop,
  #how .how-out .howpop-raw { white-space: normal; }
  #how .howstage.solo { overflow: hidden; }
}

/* ===== 修正: スマホのお試し全画面パネルが透けて壊れていた =====
   黄色パネル化のときに書いた `#tryit-sec .try-panel { background: transparent }` が
   優先度で勝ってしまい、全画面パネルの背景が消えていた。黄色で塗り直す */
@media (max-width: 520px) {
  #tryit-sec .try-panel.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #ffd23d;
    color: #1b1713;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px calc(40px + env(safe-area-inset-bottom));
    margin: 0;
    text-align: left;
  }
  #tryit-sec .try-panel.open .try-panel-head {
    color: #4a3f22;
    border-bottom: 1px solid rgba(27, 23, 19, 0.18);
  }
  #tryit-sec .try-panel.open .try-close {
    color: #14140f;
    background: rgba(27, 23, 19, 0.06);
    border: 1px solid rgba(27, 23, 19, 0.28);
  }
  #tryit-sec .try-panel.open .try-target-label { color: #5d5029; }
  #tryit-sec .try-panel.open .try-label { color: #14140f; }
  #tryit-sec .try-panel.open .try-result { color: #7a6a33; }
  #tryit-sec .try-panel.open .try-say { color: #4a3f22; }
  #tryit-sec .try-panel.open .try-note { color: #5d5029; }
}

/* ===== 修正: スマホでチャット入力欄が縦に伸びきる =====
   `max-width: 0` から広げる演出のまま折り返しを許したため、
   1文字ずつ改行されて高さが暴走していた。スマホは文字サイズで出す方式に切り替える */
@media (max-width: 520px) {
  #features .uc2-out {
    animation-name: uc2outM;
    white-space: normal;
    max-width: none;
    display: inline;
  }
  /* 入力欄は2行ぶんの高さで固定。文字が出たり消えたりしても高さを変えない。
     ★ min-height ではなく height にすること。min-height だと中身が2行になった瞬間に
       そこから先へ伸びてしまい、カード全体（と下の文章・ドット）が動く。
       66px = 390px 幅で2行になったときの実測値（全スライドで共通。カーソルぶんを含む）。
       スマホは body に zoom を掛けて常に390px幅で組んでいるので、機種が変わってもこの値でよい */
  #features .chatinput {
    height: 66px;
    align-content: center;
    box-sizing: border-box;
  }
  #features .inputrow { min-width: 0; }
}
@keyframes uc2outM {
  0%, 57.4%  { opacity: 0; font-size: 0px; }
  58.5%, 90% { opacity: 1; font-size: 12.5px; }
  95%, 100%  { opacity: 0; font-size: 12.5px; }
}

/* ===== 最終定義: プランはスマホだけカルーセル（端に壁・ループなし） ===== */
.plans-dots { display: none; }

@media (max-width: 860px) {
  .plans-wrap.carousel { overflow: hidden; padding-top: 14px; margin-top: -14px; }
  .plans-wrap.carousel .plans {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
    will-change: transform;
    cursor: grab;
  }
  .plans-wrap.carousel .plans.dragging { transition: none; cursor: grabbing; user-select: none; }
  .plans-wrap.carousel .plan {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .plans-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
  }
  .plans-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #3a3a46;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .plans-dot.on { width: 24px; background: #3da5ff; }
  .plans-dot:focus-visible { outline: 2px solid rgba(120, 200, 255, 0.8); outline-offset: 3px; }
}

/* ===== 修正: 「はじめかた」ステップ1のインストールボタンが潰れる（スマホ） =====
   スマホの 1・2・3 は "n t" / "n d" のグリッドで、ボタンが番号の列(46px)に
   自動配置されていた。ボタン用の行を用意して横いっぱいに置く */
@media (max-width: 520px) {
  .start3 li {
    grid-template-areas: "n t" "n d" "b b";
  }
  .start3 .start-dl {
    grid-area: b;
    width: 100%;
    margin-top: 14px;
  }
  .start3 .start-dl .btn-sm {
    width: 100%;
    margin-top: 0;
    white-space: normal;
    text-align: center;
  }
}

/* ===== 最終定義: Mac 以外から見たときは「Mac に送る」を出す ===== */
.dlg-mobile[hidden] { display: none; }
.dlg-mobile-h {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.dlg-mobile-h b { color: var(--ink); }
.dlg-mobile-n { margin-top: 12px; font-size: 12px; color: var(--gray); }
#dlg-share { width: 100%; }
#dlg-windows .dlg-dl { width: 100%; }

/* ===== 修正: 使い方の実演が画面からはみ出す（スマホのみ） =====
   #how を flex にしている影響で、子が min-width:auto のまま中身の幅で膨らんでいた。
   縮めるように min-width:0 を通し、枠にも安全弁を置く */
@media (max-width: 520px) {
  #how,
  #how .story-grid,
  #how .story-body,
  #how .howstage.solo,
  #how .how-out,
  #how .how-out .how-input,
  #how .howstack,
  #how .howsay { min-width: 0; }

  #how .story-body { max-width: 100%; box-sizing: border-box; overflow: hidden; }
  #how .howstage.solo { max-width: 100%; width: 100%; box-sizing: border-box; }
  #how .how-out { flex-wrap: nowrap; }
  #how .how-out .out-tag { flex: 0 0 auto; }
  #how .how-out .how-input { flex: 1 1 0; width: auto; max-width: 100%; box-sizing: border-box; }
}

/* マイナス記号が数字と同じ大きさだと線が太く長く見えるので、少し小さく上げる */
.ev-stat .n .mnu {
  font-size: 0.58em;
  vertical-align: 0.16em;
  margin-right: 0.04em;
  letter-spacing: 0;
}

/* ===== 修正: 吹き出しが option キーにかぶる（スマホ） =====
   吹き出しを縮められるようにして、残り幅に必ず収める（中の文字は既に clip される） */
#features .uc2-say { min-width: 0; }
#features .uc2-say .uc2-bubble {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
#features .uc2-say .keyline { flex: 0 0 auto; }
#features .uc2-me { flex: 0 0 auto; }

@media (max-width: 520px) {
  #features .uc2-say { gap: 8px; }
  #features .uc2-say .uc2-bubble { padding-left: 12px; padding-right: 12px; }
}

/* ===== 修正: 吹き出しの文字がはみ出す＋キーが右に寄りすぎ（スマホ） =====
   吹き出しを縮めると中の文字（clip方式）が切れて読めなくなるので、
   「あなた」アイコンと option キーを少し小さくして、
   いちばん長い文（18文字）が丸ごと収まる幅を確保する。
   あわせて option キーの右に余白を持たせる */
@media (max-width: 520px) {
  #features .uc2-me { width: 34px; }
  #features .uc2-me-ic { width: 30px; height: 30px; }
  #features .uc2-me-ic svg { width: 18px; height: 18px; }
  #features .uc2-me-t { font-size: 9px; }
  #features .uc2-say { gap: 6px; }
  #features .demo-key { width: 42px; height: 42px; padding: 4px 5px; }
  #features .k-sym { font-size: 11px; }
  #features .k-lbl { font-size: 7.5px; }
  #features .demo-key .finger { width: 26px; height: 30px; }
  #features .uc2-say .uc2-bubble {
    flex: 0 0 auto;
    font-size: 10.5px;
    padding: 7px 11px;
    overflow: hidden;
  }
}

/* option キーはカードの右端から少し内側に置く（PC・スマホ共通） */
#features .uc2-say .keyline { margin-right: 10px; }
@media (max-width: 520px) {
  #features .uc2-say .keyline { margin-right: 6px; }
}

/* ===== 修正: 使い方の吹き出しと option キーが重なる（スマホ） =====
   「使う場面」と同じ手当て。顔とキーを少し小さくして、
   いちばん長い文（15文字）が丸ごと収まる幅を作り、キーは右端寄りに置く */
@media (max-width: 520px) {
  #how .how-ic { width: 34px; height: 34px; }
  #how .howsay { gap: 6px; }
  #how .keycap.big { width: 42px; height: 42px; padding: 4px 5px; }
  #how .keycap.big .k-sym { font-size: 11px; }
  #how .keycap.big .k-lbl { font-size: 7.5px; }
  #how .keycap.big .finger { width: 26px; height: 30px; }
  #how .keyline2 { margin-left: auto; margin-right: 6px; gap: 6px; }
  #how .how-bubble {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    font-size: 10.5px;
    padding: 7px 11px;
    overflow: hidden;
  }
  #how .recdot.how { width: 7px; height: 7px; }
}

/* ===== 最終定義: プランは transform のカルーセルだけにする（横スクロールを廃止） =====
   旧実装（overflow-x:auto + scroll-snap + flex 80%）が残っていて、
   自由スクロールできてしまい、ドットの現在地とズレていた */
@media (max-width: 860px) {
  #price .plans-wrap { overflow: hidden; padding-top: 16px; margin-top: -16px; }
  #price .plans {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
    will-change: transform;
  }
  #price .plans.dragging { transition: none; }
  #price .plan {
    flex: 0 0 auto !important;
    width: 100% !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }
}

/* ===== 最終定義: デモにも見出しを付け、アンカーで詰まらないようにする ===== */
#tryit-sec { padding: 78px 0; scroll-margin-top: 24px; }
#tryit-sec .sec-head { margin-bottom: 26px; }
#tryit-sec .try-lead { margin-bottom: 4px; }
/* ボタンが上の文にかぶらないよう余白を確保（跳ねるアニメーションぶんも見込む） */
#tryit-sec .try-open-btn { margin-top: 22px; }

@media (max-width: 520px) {
  #tryit-sec { padding: 48px 0; scroll-margin-top: 16px; }
  #tryit-sec .sec-head { margin-bottom: 18px; }
  #tryit-sec .try-open-btn { margin-top: 18px; }
}

/* ============================================================
   最終定義: プランカードを読みやすいスペック表に
   ============================================================ */
.plan { display: flex; flex-direction: column; }
.plan-name {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.plan-for {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}
.plan-price {
  font-family: var(--disp);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
}
.plan-price span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--gray);
  margin-left: 6px;
}
.plan-meter { margin: 16px 0 14px; height: 5px; }

.plan-spec { margin: 0; display: grid; gap: 0; }
.plan-spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.plan-spec dt { font-size: 12.5px; color: var(--gray); white-space: nowrap; }
.plan-spec dd {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}
.plan-spec dd em {
  font-style: normal;
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: #7fc6ff;
  background: rgba(61, 165, 255, 0.14);
  border: 1px solid rgba(61, 165, 255, 0.32);
}

@media (max-width: 860px) {
  #price .plan { padding: 26px 22px 22px; }
  .plan-price { font-size: 44px; }
  .plan-for { font-size: 16px; }
  .plan-spec > div { padding: 12px 0; }
  .plan-spec dd { font-size: 16px; }
  .plan-spec dd em { display: block; margin: 6px 0 0; }
}
@media (min-width: 861px) {
  .plan-price { font-size: 40px; }
}

/* プラン下の一行は短く強く（重複していた説明を整理） */
.plan-common { font-size: 15px; color: var(--ink-soft); margin-top: 20px; }
.plan-common b { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) { .plan-common { font-size: 14px; } }

/* ============================================================
   最終定義: スマホの流れを「掴み→痛み→コスト→使い方→証拠→声→
   デモ体験→機能→価格→はじめ方→FAQ→締め」に組み替える（PCは無変更）
   ============================================================ */
@media (max-width: 520px) {
  /* ① ヒーローを「3倍速くなる」の一撃に絞る。
     チャットのデモカード・使い方ステップ・学術引用の一文は削る
     （学術的な裏付けは #evidence が同じ数字ですでに持っている＝重複解消） */
  .hero .chatwin { display: none; }
  .hero .hero3 { display: none; }
  .hero .lede:not(.tagline) { display: none; }
  .hero .scene { display: none; }
  .hero .scene-note { display: none; }

  /* ③ main をフレックス化し、セクションの視覚順だけ入れ替える（DOM順・PCは触らない）
     PR動画セクションを追加したので、ヒーロー直後(2)に差し込んで全体を1つずつ繰り下げる */
  main { display: flex; flex-direction: column; }
  .hero { order: 1; }
  #video-sec { order: 2; }
  #fit { order: 3; }
  #cost { order: 4; }
  #how { order: 5; }
  #evidence { order: 6; }
  #voices { order: 7; }
  #tryit-sec { order: 8; }
  #features { order: 9; }
  #price { order: 10; }
  #start { order: 11; }
  #faq { order: 12; }
  #closing { order: 13; }

  /* ④ 並べ替えで #fit の視覚上の前後関係が変わった（旧: #tryit-secの直後→新: PR動画の直後）。
     #fit だけ区切り線が消えたままだと浮くので、他セクション同様に区切り線を戻す。
     #tryit-sec 自体は黄色いパネルの色差だけで区切りが付くので、border-top:none のままでよい */
  #fit.story { border-top: 1px solid var(--hairline); }
}

/* 法務ページ: PDF をそのまま読ませる。高さは画面いっぱいに近づけ、スクロールは
   PDF ビューア側に任せる（ページ自体を長くしない） */
.doc-pdf .pdfview{width:100%;height:78vh;min-height:420px;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:#fff}
.doc-pdf .pdfnote{margin-top:12px;font-size:13px;opacity:.75}