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

:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdf;
  --ink: #1b1713;
  --ink-soft: #575046;
  --gray: #8d857a;
  --hairline: #ddd4c3;
  --red: #d8402f;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans: "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; }
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;
}
@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 infinite;
}
@keyframes speak {
  0% { width: 0; animation-timing-function: steps(1, end); }
  6% { width: 0; animation-timing-function: steps(22, end); }
  44%, 100% { width: 22em; }
}

/* チャットの窓 */
.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;
}
.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;
  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;
}
@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 infinite;
}
@keyframes speak3 {
  0% { width: 0; animation-timing-function: steps(1, end); }
  8% { width: 0; animation-timing-function: steps(15, end); }
  33%, 100% { width: 15em; }
}

.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); }

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

.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; }
  .doc th { width: auto; display: block; border-bottom: none; }
  .doc td { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .result, .caret, .say, .demo-key, .send,
  .how-steps li, .keycap.big, .say3, .howpop, .w, .recdot { animation: none; }
  .bubble, .result, .pop3 { opacity: 1; transform: none; }
  .say, .say2 { width: auto; }
  .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 infinite;
}
@keyframes speakB {
  0% { width: 0; animation-timing-function: steps(1, end); }
  8% { width: 0; animation-timing-function: steps(18, end); }
  33%, 100% { width: 18em; }
}
.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: 16px 0 16px 40px;
  border-bottom: 1px dashed var(--hairline);
  font-size: 15px;
  color: var(--ink-soft);
}
.fitlist li::before {
  content: "✓";
  position: absolute;
  left: 6px;
  color: var(--red);
  font-weight: 700;
}
.fitlist strong { color: var(--ink); }
.fit-close {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
}

.devvoice {
  max-width: 640px;
  margin-top: 44px;
  padding: 26px 30px 22px;
  background: #fffdf8;
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
}
.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: 64px auto 0;
  padding: 34px 36px 28px;
  background: #fffdf8;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 20px 50px -30px rgba(27, 23, 19, 0.3);
}
.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-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(3, 1fr); gap: 20px; align-items: stretch; }
.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 { font-family: var(--serif); font-weight: 800; font-size: 19px; letter-spacing: 0.06em; }
.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; } }