/* もじばんトーク 紹介ページ
   色はアプリの配色(明るい配色)と同じ値。黄色(--focus)は「いま選ばれているもの」とキーボードのフォーカスだけに使う。 */

@font-face {
  font-family: "MojibanSans";
  src: url("fonts/mojiban-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MojibanSans";
  src: url("fonts/mojiban-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #EEF6FC;
  --surface: #FFFFFF;
  --ink: #142A3D;
  --sub: #435E73;
  --line: #58748A;
  --accent: #145A8D;
  --header: #DDEFFB;
  --soft: #E5F2FC;
  --column: #F4FAFF;
  --selected: #D2EAFB;
  --warm: #FFE2B8;
  --warm-line: #B45309;
  --focus: #FFD95A;
  --d-bg: #111F2D;
  --d-surface: #1C2F40;
  --d-ink: #F3F8FC;
  --d-sub: #C6D9E8;
  --d-line: #8DABC1;
  --d-accent: #9BD3FF;
  --d-header: #213C52;
  --d-soft: #223E55;

  --r-key: 12px;
  --r-box: 18px;
  --pad: clamp(20px, 5vw, 64px);
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --hd-h: 72px;
  --font: "MojibanSans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hd-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: .04em;
  line-break: strict;
  word-break: keep-all;
  text-spacing-trim: space-all; /* 約物の詰めは .yk(halt)で行う */
  overflow-wrap: anywhere;
  text-autospace: normal;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
.nw { white-space: nowrap; }
.yk { font-feature-settings: "halt"; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sp-only { display: none; }
@media (max-width: 599px) { .sp-only { display: inline; } .pc-only { display: none; } }

/* フォーカス: アプリの「走査位置」と同じ黄色+紺の太い輪郭 */
:focus { outline: none; }
:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--focus);
  border-radius: 6px;
}

.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 12px 20px; background: var(--focus); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 10px; font-weight: 700;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* 共通の見出し・本文 */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--accent);
  margin-bottom: 20px;
}
.label::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.h2 {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.h2-sm { font-size: clamp(26px, 2.6vw, 34px); }
.h3 {
  font-size: 21px; line-height: 1.5; font-weight: 700;
  letter-spacing: .03em; font-feature-settings: "palt";
}
.body { max-width: 34em; }
.body + .body { margin-top: 1em; }
.body-sm { font-size: 16px; color: var(--sub); }
@media (max-width: 599px) {
  body { font-size: 16px; }
  .h2 { font-size: clamp(27px, 8.4vw, 36px); line-height: 1.36; }
  .h2-sm { font-size: 24px; }
}

/* 出現(JSが有効なときだけ初期状態を隠す) */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== ヘッダー ===== */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--header);
  border-bottom: 1.5px solid #B9D3E6;
}
.hd-in {
  display: flex; align-items: center; gap: 24px;
  height: var(--hd-h);
  width: min(1360px, 100% - var(--pad) * 2); margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px;
  letter-spacing: .04em; font-feature-settings: "palt"; white-space: nowrap;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.hd-nav { display: flex; gap: 4px; margin-left: auto; }
.hd-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 700;
  border-radius: 10px; font-feature-settings: "palt";
}
.hd-nav a:hover { background: var(--selected); }
/* 公開の状態は押せない札(細い線)。押せるボタンと形を分ける */
.hd-status {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
  background: var(--surface); color: var(--ink); border: 1.5px solid #8AB4D4;
  border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap; font-feature-settings: "palt";
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 1.5px #B8901E inset; flex: none; }
@media (max-width: 1100px) { .hd-nav { display: none; } .hd-status { margin-left: auto; } }
@media (max-width: 599px) {
  :root { --hd-h: 60px; }
  .brand { font-size: 16px; gap: 10px; }
  .brand img { width: 34px; height: 34px; border-radius: 9px; }
  .hd-status { padding: 0 12px; font-size: 13px; min-height: 36px; }
}
@media (max-width: 374px) {
  body { letter-spacing: .02em; }
  .hd-status .dot, .hs-store { display: none; }
  .hd-status { padding: 0 10px; }
  .brand span { font-size: 15px; }
}

/* ===== iPad の枠(影なし・平らな紺の縁) ===== */
.ipad {
  position: relative;
  background: var(--ink);
  border-radius: 7% / 5.25%;
  padding: 3.4%;
  outline: 1.5px solid #3A5266;
  outline-offset: -5px;
}
.ipad img {
  width: 100%;
  border-radius: 3.8% / 2.85%;
  background: var(--bg);
}
.ipad::before { /* 前面カメラ */
  content: ""; position: absolute; top: 1.4%; left: 50%; width: 1.4%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: #2C4559;
}
.ipad-wide { border-radius: 5.25% / 7%; padding: 2.6%; }
.ipad-wide::before { top: 50%; left: 1.1%; transform: translateY(-50%); width: auto; height: 1.4%; }

/* ===== ヒーロー ===== */
/* 左の列の下に特大のキー(あ〜は)、右に iPad。どちらも区画の下端(次の区画の紺の線)を地面として立つ。 */
.hero { position: relative; overflow: hidden; padding-top: clamp(28px, 3vw, 40px); }
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 476px; gap: 56px; align-items: end;
}
.eyebrow { margin-bottom: 20px; }
.eyebrow span {
  display: inline-block; min-height: 40px; padding: 4px 18px; line-height: 1.8;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  font-weight: 700; font-size: 16px; font-feature-settings: "palt";
}
.hero-title {
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  font-feature-settings: "palt";
}
.hero-title .ln { display: block; white-space: nowrap; }
.ln-pick { margin-top: .1em; margin-left: -.08em; }
.pick {
  position: relative; display: inline-block;
  background: var(--focus);
  border: .065em solid var(--ink);
  border-radius: .16em;
  padding: .02em .12em .06em .4em;
  line-height: 1.12;
}
.pick-tri { position: absolute; left: .1em; top: 50%; width: .26em; height: .26em; margin-top: -.13em; color: var(--ink); }
.maru { margin-left: -.02em; }
.hero-lead {
  margin-top: 26px; font-size: 19px; line-height: 1.9; max-width: 27em; font-weight: 400;
}
.marks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.marks li {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-key);
  font-weight: 700; font-size: 16px; line-height: 1.5; font-feature-settings: "palt";
}
/* 主ボタン(ためす)と、押せない状態の札 */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px;
  background: var(--accent); color: #fff; text-decoration: none; border-radius: 14px;
  font-size: 19px; font-weight: 700; letter-spacing: .06em; font-feature-settings: "palt";
}
.cta svg { width: 14px; height: 14px; transform: rotate(90deg); color: #fff; }
.cta:hover { background: #0F4A75; }
.status-tag {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--surface); border: 1.5px solid #8AB4D4; border-radius: 12px;
  color: var(--ink); line-height: 1.45; font-feature-settings: "palt";
}
.status-tag > span:last-child { display: grid; }
.st-lg { font-size: 15px; font-weight: 700; }
.st-sm { font-size: 13px; color: var(--sub); }
.marks { margin-top: 24px; }

.hero-device { position: relative; align-self: start; margin-top: 60px; } /* 見出しの1行目と上端をそろえる */
.hero-device .ipad { width: 100%; border-bottom-left-radius: 7% 4%; border-bottom-right-radius: 7% 4%; }
.hero-device figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--sub); text-align: right; }

/* 足もとの特大のキー */
.strip { position: relative; margin-top: 34px; height: 150px; overflow: hidden; }
.strip-in { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sk {
  display: grid; justify-items: center; align-items: start; height: 260px; padding-top: 36px;
  background: var(--surface); border: 2px solid #9DB6C9; border-radius: 20px;
  font-size: clamp(36px, 4.2vw, 64px); font-weight: 700; color: var(--ink); line-height: 1;
}
.strip-frame {
  position: absolute; z-index: 2; left: 0; top: 0; height: 260px;
  width: calc((100% - 12px * 5) / 6);
  border: 6px solid var(--ink); border-radius: 20px;
  background: var(--focus); mix-blend-mode: multiply;
  transform: translateX(calc(var(--i, 0) * (100% + 12px)));
  transition: transform .5s var(--ease);
}
.strip-frame svg { position: absolute; left: 9px; top: 9px; width: 16px; height: 16px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .strip-frame { transition: none; } }

@media (max-width: 1099px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
  .hero-lead { font-size: 18px; }
}
@media (max-width: 899px) {
  /* 1列: 文 → iPad → キーの列(地面) */
  .hero-grid { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .hero-copy { display: contents; }
  .hero-device { order: 2; width: min(66%, 400px); margin: 64px auto 0; }
  .strip { order: 3; margin-top: 36px; height: 130px; }
  .strip-in { gap: 10px; }
  .sk, .strip-frame { height: 220px; border-radius: 16px; }
  .strip-frame { width: calc((100% - 10px * 5) / 6); transform: translateX(calc(var(--i, 0) * (100% + 10px))); border-width: 5px; }
}
@media (max-width: 599px) {
  /* 見出し → 紹介文 → ためす → しるし。実画面はおためしのあとへ */
  .hero { padding-top: 20px; }
  .eyebrow { margin-bottom: 10px; }
  .eyebrow span { font-size: 13px; min-height: 32px; padding: 2px 12px; }
  .hero-title { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.24; }
  .hero-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .cta { width: 100%; justify-content: center; min-height: 56px; }
  .status-tag { width: 100%; padding: 6px 12px; }
  .st-lg { font-size: 14px; } .st-sm { font-size: 13px; }
  .marks { margin-top: 10px; gap: 2px 14px; }
  .marks li { min-height: 28px; padding: 0; background: none; border: 0; font-size: 14px; }
  .marks li::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--accent); flex: none; }
  .hero-device { display: none; }
  .strip { margin-top: 14px; height: 48px; }
  .strip-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sk:nth-of-type(n+6) { display: none; }
  .sk, .strip-frame { height: 120px; padding-top: 10px; font-size: 32px; border-radius: 14px; }
  .strip-frame { width: calc((100% - 8px * 3) / 4); padding: 0; transform: translateX(calc(var(--i, 0) * (100% + 8px))); border-width: 4px; }
  .strip-frame svg { left: 6px; top: 6px; width: 11px; height: 11px; }
  .try { padding-top: 22px !important; }
  .try-head .label { margin-bottom: 4px; }
  .try-head .h2 { margin-bottom: 12px; font-size: 26px; }
  .try-more .try-shot { display: block; width: 72%; margin: 32px auto 0; }
  .try-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--sub); text-align: center; }
}

/* ===== 目玉: おためしの文字盤 ===== */
.try {
  position: relative; z-index: 3;
  background: var(--surface);
  border-top: 2px solid var(--ink);
  padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 128px);
}
.try-grid {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 4vw, 64px); align-items: start;
}
.try-head { grid-column: 1; grid-row: 1; }
.try-head .h2 { margin-bottom: 28px; }
.try-more { grid-column: 1; grid-row: 2; }
.demo { grid-column: 2; grid-row: 1 / 3; }
.try-shot { display: none; }
.steps { margin: 28px 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 14px; font-weight: 700; line-height: 1.6; font-feature-settings: "palt"; }
.num {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border: 2px solid var(--ink); border-radius: 9px; background: var(--surface);
  font-size: 17px; font-weight: 700; letter-spacing: 0;
}

.demo {
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 26px;
  padding: clamp(14px, 2vw, 24px);
}
.demo-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 4px; background: var(--header); border-radius: 14px; gap: 4px; }
.seg-b {
  min-height: 44px; padding: 0 18px; border: 2px solid transparent; border-radius: 10px; background: transparent;
  font-weight: 700; font-size: 16px; cursor: pointer; font-feature-settings: "palt";
}
.seg-b:hover { background: var(--selected); }
.seg-b[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); }
.seg-b[aria-pressed="true"]::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: .12em;
  border-radius: 50%; background: var(--accent);
}

.bar-r { display: flex; flex-wrap: wrap; gap: 8px; }
.pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  font-weight: 700; font-size: 16px; cursor: pointer; font-feature-settings: "palt";
}
.pause svg { width: 22px; height: 22px; }
.pause:hover { background: var(--selected); }
.pause[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.demo-noscript { margin-bottom: 14px; padding: 12px 16px; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; }

/* 声(吹き出し) */
.voice {
  position: relative; display: flex; align-items: center; gap: 16px;
  min-height: 92px; margin-bottom: 18px; padding: 14px 24px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 20px;
}
.voice::after { /* 吹き出しのしっぽ */
  content: ""; position: absolute; left: 40px; bottom: -12px; width: 20px; height: 20px;
  background: var(--surface); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line);
  transform: rotate(45deg); border-bottom-right-radius: 4px;
}
.voice-ic { flex: none; width: 40px; height: 40px; color: var(--sub); }
.voice-text { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.35; font-feature-settings: "palt"; }
.voice-ph { font-size: 17px; font-weight: 400; color: var(--sub); }
.voice.is-speaking { border-color: var(--accent); border-width: 3px; padding: 13px 23px; }
.voice.is-speaking .voice-ic { color: var(--accent); }
.voice.is-speaking .voice-ic .w1, .voice.is-speaking .voice-ic .w2 { animation: wave 1s steps(1) 3; }
.voice.is-speaking .voice-ic .w2 { animation-delay: .25s; }
.voice-text.pop { animation: pop .42s var(--ease); }
@keyframes wave { 50% { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.demo-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: 14px; }
.field {
  position: relative; min-height: 112px; padding: 14px 18px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px;
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.4; letter-spacing: .02em;
}
.field-text { white-space: pre-wrap; }
.caret {
  display: inline-block; width: 3px; height: 1.05em; margin-left: 2px; vertical-align: -.14em;
  background: var(--accent);
}
.field-ph { position: absolute; left: 22px; top: 18px; font-size: 17px; font-weight: 400; color: var(--sub); pointer-events: none; }
.field.has-text .field-ph { display: none; }
.field.is-spoken .field-text { color: var(--sub); }

.ctrls { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.ck, .ek {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 6px 12px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-key);
  font-weight: 700; font-size: 17px; line-height: 1.3; cursor: pointer; font-feature-settings: "palt";
}
.ck svg, .ek svg { width: 22px; height: 22px; flex: none; }
.ck:hover, .ek:hover { background: var(--selected); }
.ck:active, .ek:active { transform: translateY(1px); }
.ck-speak { grid-row: 1 / 3; background: var(--accent); color: #fff; border-color: var(--accent); flex-direction: column; font-size: 18px; }
.ck-speak svg { width: 30px; height: 30px; }
.ck-speak:hover { background: #0F4A75; }
.ctrls .ck:nth-child(4) { grid-column: 2 / 4; }

.board {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 6px;
}
.col {
  position: relative; display: grid; grid-template-rows: auto repeat(5, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--column); border: 1.5px solid transparent;
}
.col-h {
  font-size: 13px; font-weight: 700; text-align: center; line-height: 1.6; color: var(--ink);
  letter-spacing: .02em; font-feature-settings: "palt"; white-space: nowrap;
}
.key {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 54px; padding: 0;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  font-size: clamp(22px, 2.3vw, 32px); font-weight: 700; line-height: 1; cursor: pointer; letter-spacing: 0;
}
.key:hover { background: var(--selected); }
.key-empty { background: transparent; border: 1.5px dashed #C3D5E3; cursor: default; }
.key-sm { font-size: 13px; letter-spacing: -.04em; white-space: nowrap; padding: 0 6px; overflow: hidden; }
.col-sym .key { font-size: clamp(15px, 1.4vw, 19px); }
.col-sym .key-sm { font-size: 13px; }

/* 走査位置: 黄色の面+紺の太枠+▶(色だけに頼らない) */
.is-scan {
  background: var(--focus) !important;
  border-color: var(--ink) !important;
  outline: 4px solid var(--ink); outline-offset: -1px;
}
.col.is-scan { outline-offset: 0; }
.col.is-scan .key:not(.key-empty) { background: var(--focus); border-color: var(--ink); }
.col.is-scan .col-h::before,
.key.is-scan::before,
.ck.is-scan::before,
.ek.is-scan::before {
  content: ""; position: absolute; width: 11px; height: 11px;
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.col.is-scan .col-h { position: relative; }
.col.is-scan .col-h::before { left: 2px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; }
.key.is-scan::before { left: 6px; top: 6px; }
.ck.is-scan::before, .ek.is-scan::before { left: 10px; top: 50%; transform: translateY(-50%); }
.ck-speak.is-scan { color: var(--ink); }
.col.is-open { background: var(--selected); border-color: var(--line); }
.key.is-hit { animation: hit .5s var(--ease); }
@keyframes hit { 30% { transform: scale(.92); } }

.demo-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "edit sw" "edit hint";
  gap: 10px 12px; margin-top: 14px; align-items: stretch;
}
.edit { grid-area: edit; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: start; }
.demo-bottom .switch { grid-area: sw; }
.demo-bottom .switch-hint { grid-area: hint; margin-top: 0; }
.ek { flex-direction: column; gap: 4px; font-size: 15px; min-height: 72px; }
.ek:disabled { color: var(--sub); background: var(--soft); border-style: dashed; cursor: default; }
.ek:disabled:hover { background: var(--soft); }
.switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 88px; padding: 10px 24px;
  background: var(--accent); color: #fff; border: 0; border-radius: 20px;
  font-size: 26px; font-weight: 700; letter-spacing: .1em; cursor: pointer;
  box-shadow: inset 0 -6px 0 #0D3F64;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  touch-action: manipulation;
}
.switch svg { width: 36px; height: 36px; }
.switch:hover { background: #0F4A75; }
.switch:active, .switch.is-down { transform: translateY(4px); box-shadow: inset 0 -2px 0 #0D3F64; }
.switch-hint { margin-top: 12px; font-size: 14px; color: var(--sub); line-height: 1.7; }
.switch-hint strong { display: block; color: var(--ink); font-size: 16px; }
.demo-note {
  margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed #B9CDDC;
  font-size: 13px; color: var(--sub); line-height: 1.75;
}

@media (max-width: 1099px) {
  .try-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .try-head, .try-more, .demo { grid-column: 1; grid-row: auto; }
  .try-head { max-width: 40em; }
  .try-more { order: 3; margin-top: 32px; max-width: 40em; }
  .demo { order: 2; }
  .steps { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
  .col { padding: 2px; gap: 3px; border-radius: 8px; }
  .col-sym { grid-column: 1 / -1; grid-template-columns: auto repeat(5, minmax(0, 1fr)); grid-template-rows: auto; align-items: center; margin-top: 4px; gap: 4px; }
  .col-sym .col-h { padding: 0 4px; }
  .col-sym .key { min-height: 40px; }
  .col-h { font-size: 11px; letter-spacing: 0; line-height: 1.4; }
  .col:not(.col-sym) .col-h .gy { display: none; }
  .key { min-height: 36px; border-radius: 7px; font-size: clamp(17px, 5vw, 24px); }
  .key.is-scan::before { left: 2px; top: 2px; width: 7px; height: 7px; }
  .col.is-scan .col-h::before { display: none; }
  .demo-bottom { grid-template-columns: 1fr; grid-template-areas: "sw" "hint" "edit"; gap: 8px; margin-top: 12px; }
  .demo-bottom .switch { min-height: 60px; font-size: 24px; width: 100%; }
  .switch-hint { font-size: 13px; line-height: 1.6; }
  .switch-hint strong { display: inline; font-size: 14px; margin-right: .5em; }
  .ek { min-height: 50px; flex-direction: column; gap: 2px; font-size: 13px; padding: 4px; }
  .ek svg { width: 16px; height: 16px; }
  .key-sm { padding: 0 2px; letter-spacing: -.06em; }
  .demo { border-radius: 20px; }
  /* 1画面(844 − ヘッダー)に収める */
  .demo-bar { flex-wrap: nowrap; gap: 6px; margin-bottom: 10px; }
  .bar-r { flex-wrap: nowrap; gap: 6px; }
  .seg { padding: 2px; gap: 2px; border-radius: 12px; }
  .seg-b { padding: 0 7px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
  .seg-b[aria-pressed="true"]::before { display: none; }
  .pause { min-height: 44px; padding: 0 12px; }
  .pause-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .voice { min-height: 46px; margin-bottom: 12px; padding: 4px 14px; gap: 10px; border-radius: 14px; }
  .voice.is-speaking { padding: 5px 13px; }
  .voice::after { left: 28px; bottom: -9px; width: 14px; height: 14px; }
  .voice-ic { width: 26px; height: 26px; }
  .voice-text { font-size: 22px; }
  .voice-ph { font-size: 14px; }
  .demo-top { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
  .field { min-height: 46px; padding: 4px 14px; font-size: 24px; border-radius: 12px; }
  .field-ph { left: 16px; top: 12px; font-size: 14px; }
  .ctrls { grid-template-columns: 1.7fr 1fr 1fr 1fr; grid-template-rows: auto; gap: 6px; }
  .ck:not(.ck-speak) svg { display: none; }
  .ctrls .ck:nth-child(4) { grid-column: auto; }
  .ck-speak { grid-row: auto; flex-direction: row; }
  .ck { min-height: 46px; font-size: 14px; padding: 4px 4px; gap: 4px; letter-spacing: 0; white-space: nowrap; }
  .ck svg { width: 16px; height: 16px; }
  .ck-speak svg { width: 18px; height: 18px; }
  .demo-note { margin-top: 8px; padding-top: 8px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .demo { margin-inline: calc(var(--pad) * -1 + 8px); padding: 10px 8px; }
}
@media (max-width: 374px) {
  .demo-bar { flex-wrap: wrap; }
  .ctrls { grid-template-columns: 1fr 1fr 1fr; }
  .ck-speak { grid-column: 1 / -1; }
}

/* ===== いつでも、ひと押しで(濃い青の全面) ===== */
.reply {
  background: var(--accent); color: #fff;
  padding: clamp(80px, 10vw, 150px) 0;
}
.reply .body { color: #fff; }
.label-on { color: var(--focus); }
.reply-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
}
.reply-copy .h2 { margin-bottom: 32px; }
.reply-fig { position: relative; }
.rf-field {
  position: relative; display: flex; align-items: center; min-height: 100px; padding: 18px 26px;
  background: var(--surface); color: var(--ink); border-radius: 18px;
  font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: .02em;
}
.rf-caret { width: 3px; height: 1.1em; margin-left: 3px; background: var(--accent); }
.rf-tag {
  position: absolute; right: 14px; top: 12px; background: var(--surface); padding: 0 10px; line-height: 1.8;
  border: 1.5px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .06em;
}
.rf-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.rk {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 10px;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 14px;
  font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; letter-spacing: .04em; font-feature-settings: "palt";
}
.rk svg { width: 1.2em; height: 1.2em; flex: none; }
.rk-call { background: var(--warm); border: 2px solid var(--warm-line); }
.rk-again { grid-column: span 2; background: var(--soft); }
.rk-yes { transition: transform .3s var(--ease), background-color .3s; }
.rf-bubble {
  position: relative; margin-top: 26px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; background: var(--focus); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px;
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 700;
  transform-origin: 30% 100%;
}
.rf-bubble::after {
  content: ""; position: absolute; left: 40px; top: -13px; width: 20px; height: 20px; /* 上の「はい」を指す */
  background: var(--focus); border-left: 3px solid var(--ink); border-top: 3px solid var(--ink);
  transform: rotate(45deg); border-top-left-radius: 4px;
}
.rf-bubble svg { width: 30px; height: 30px; }
html.js .reply-fig .rf-bubble { opacity: 0; transform: translateY(-8px) scale(.94); transition: opacity .5s var(--ease) .9s, transform .5s var(--ease) .9s; }
html.js .reply-fig.is-in .rf-bubble { opacity: 1; transform: none; }
html.js .reply-fig.is-in .rk-yes { animation: press .5s var(--ease) .55s; }
@keyframes press { 40% { transform: translateY(4px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  html.js .reply-fig .rf-bubble { opacity: 1; transform: none; transition: none; }
  html.js .reply-fig.is-in .rk-yes { animation: none; }
}

.quick {
  grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px);
  padding-top: clamp(40px, 5vw, 64px); border-top: 1.5px solid rgba(255,255,255,.4);
}
.quick .h3 { font-size: 26px; margin-bottom: 14px; }
.quick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.quick-list li {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px;
  background: #0F4A75; border: 1.5px solid #7FB0D6; border-radius: 14px;
}
.q-lb { font-size: 24px; font-weight: 700; line-height: 1.45; font-feature-settings: "palt"; }
.q-tx { font-size: 15px; line-height: 1.7; color: #E4F1FB; }

@media (max-width: 899px) {
  .reply-grid, .quick { grid-template-columns: 1fr; }
  .reply-fig { margin-top: 40px; }
}
@media (max-width: 599px) {
  .rf-keys { gap: 8px; }
  .rk { min-height: 72px; flex-direction: column; gap: 4px; font-size: 18px; border-radius: 14px; }
  .rk svg { width: 24px; height: 24px; }
  .rk-again { flex-direction: row; gap: 10px; }
  .rf-field { min-height: 80px; padding: 14px 18px; font-size: 26px; }
  .rf-bubble { margin-top: 20px; padding: 8px 18px; font-size: 24px; }
  .quick-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-list li { padding: 12px 14px; }
  .q-lb { font-size: 20px; }
  .q-tx { font-size: 13px; }
}

/* ===== 呼ぶ(暖色の帯) ===== */
.call { background: var(--warm); border-bottom: 3px solid var(--warm-line); padding: clamp(64px, 7vw, 96px) 0; }
.call-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "fig copy" "fig more"; gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
.call-copy { grid-area: copy; }
.call-more { grid-area: more; }
.call-fig { grid-area: fig; position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; align-self: stretch; }
.call-key {
  display: inline-flex; align-items: center; gap: 22px; padding: 30px 56px;
  background: #FFF4E3; border: 3px solid var(--warm-line); border-radius: 26px;
  font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; letter-spacing: .08em; color: var(--ink);
}
.call-bell { width: .9em; height: .9em; color: var(--ink); transform-origin: 50% 12%; }
.call-fig.is-in .call-bell { animation: ring 1.3s var(--ease) .4s 3; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 12% { transform: rotate(14deg); } 28% { transform: rotate(-12deg); } 44% { transform: rotate(6deg); } }
.chime { display: flex; gap: 10px; align-items: flex-end; height: 40px; }
.chime span { width: 34px; height: 18px; border-radius: 6px; background: var(--warm-line); }
.chime span:nth-child(2n) { height: 34px; }
.chime span:nth-child(2n+1) { margin-left: 14px; }
.chime span:first-child { margin-left: 0; }
html.js .chime span { opacity: .22; }
.call-fig.is-in .chime span { animation: chime 4s steps(1) 1 forwards; }
.call-fig.is-in .chime span:nth-child(1) { animation-delay: .4s; }
.call-fig.is-in .chime span:nth-child(2) { animation-delay: .75s; }
.call-fig.is-in .chime span:nth-child(3) { animation-delay: 1.7s; }
.call-fig.is-in .chime span:nth-child(4) { animation-delay: 2.05s; }
.call-fig.is-in .chime span:nth-child(5) { animation-delay: 3s; }
.call-fig.is-in .chime span:nth-child(6) { animation-delay: 3.35s; }
@keyframes chime { 0% { opacity: 1; } 100% { opacity: 1; } }
.chime-cap { font-size: 15px; font-weight: 700; color: var(--ink); }
.call-copy .h2 { margin-bottom: 24px; }
.vol { padding: 22px 24px; background: #FFF4E3; border: 1.5px solid var(--warm-line); border-radius: var(--r-box); }
.vol-row { display: grid; grid-template-columns: 6em minmax(0, 1fr); align-items: center; gap: 16px; min-height: 40px; }
.vol-row + .vol-row { min-height: 60px; padding-bottom: 14px; }
.vol-name { font-weight: 700; font-size: 16px; }
.vol-bar { position: relative; height: 12px; border-radius: 6px; background: #F1D2A6; }
.vol-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 6px; background: var(--line); }
.vol-bar-warm .vol-fill { background: var(--warm-line); }
.vol-min-lb { position: absolute; left: 30%; top: 18px; transform: translateX(-50%); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.vol-min { position: absolute; left: 30%; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); z-index: 1; }
.vol-cap { margin-top: 12px; font-size: 15px; line-height: 1.8; }
.caution {
  margin-top: 22px; padding: 14px 18px 14px 20px; border-left: 5px solid var(--warm-line);
  background: #FFF4E3; border-radius: 0 12px 12px 0; font-size: 17px; line-height: 1.7;
}
@media (max-width: 899px) { .call-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "fig" "more"; } }
@media (max-width: 599px) { .chime span { width: 24px; } .chime span:nth-child(2n+1) { margin-left: 8px; } .chime span:first-child { margin-left: 0; } .call-key { padding: 18px 30px; } }
@media (max-width: 599px) { .call-key { padding: 22px 36px; } .vol { padding: 16px; } .vol-row { grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .call-fig.is-in .call-bell { animation: none; }
  html.js .chime span { opacity: 1; }
  .call-fig.is-in .chime span { animation: none; }
}

/* ===== 入力のしかた ===== */
.input { padding: clamp(80px, 10vw, 150px) 0; }
.input-head { max-width: 44em; margin-bottom: clamp(40px, 5vw, 72px); }
.input-head .h2 { margin-bottom: 24px; }
.input-grid { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.input-device { position: sticky; top: calc(var(--hd-h) + 32px); }
.input-device figcaption { margin-top: 16px; font-size: 14px; color: var(--sub); line-height: 1.75; }
.ladder { position: relative; display: grid; gap: 0; counter-reset: rung; }
.ladder-scale { font-size: 14px; font-weight: 700; color: var(--sub); letter-spacing: .08em; line-height: 1.6; }
.ladder-top { position: relative; margin: 0; padding-bottom: 8px; }
.ladder-end { position: relative; padding-top: 12px; }
.ladder-scale::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 12px 0 10px; border-radius: 50%; background: var(--line); vertical-align: .05em; }
.ladder-top::after, .ladder-end::after, .rung:not(.rung-other)::after {
  content: ""; position: absolute; left: 14px; width: 2px; z-index: -1;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
}
.ladder-top::after { top: 1.2em; bottom: 0; }
.rung:not(.rung-other)::after { top: 0; bottom: 0; }
.ladder-end::after { top: 0; height: calc(12px + .8em); }
.ladder { isolation: isolate; }
.rung {
  position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 26px 0 26px 48px; border-bottom: 1.5px solid #C8DAE8; counter-increment: rung;
}
.rung::before {
  content: counter(rung); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface); border: 2px solid var(--ink); font-weight: 700; font-size: 15px; letter-spacing: 0; line-height: 1;
}
.rung-other { margin-top: 36px; border-top: 1.5px solid #C8DAE8; border-bottom: 0; }
.rung-other::before { content: "+"; }
.rung-tx .h3 { font-size: 22px; margin-bottom: 4px; }
.rung-tx p { max-width: 26em; }
.mini { display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 10px 12px 14px; background: rgba(255,255,255,.55); border: 1.5px dashed #9DB6C9; border-radius: 14px; width: max-content; position: relative; }
.mk {
  position: relative; display: grid; place-items: center; width: 40px; height: 44px;
  border: 1.5px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 20px; background: var(--surface); line-height: 1;
}
.mk-on { background: var(--selected); }
.mk-scan { background: var(--focus); border: 3px solid var(--ink); }
.mk-scan svg { position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; color: var(--ink); }
.mini-hand { position: absolute; right: 4px; bottom: 2px; width: 30px; height: 30px; color: var(--ink); }
.mini-tap { padding-right: 26px; }
.sw {
  display: grid; place-items: center; min-width: 76px; height: 44px; padding: 0 12px; border-radius: 22px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; white-space: nowrap;
}
.sw-b { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); }
.wait-dots { display: flex; gap: 4px; padding: 0 4px; }
.wait-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.wait-dots span:last-child { width: 14px; height: 14px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; margin-left: 4px; }
.mini-sys svg { width: 40px; height: 40px; color: var(--ink); margin: 2px 12px; }

.keys {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center;
  margin-top: clamp(48px, 6vw, 88px); padding: clamp(24px, 3vw, 40px);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 22px;
}
.keys .h3 { margin-bottom: 6px; }
.keymap { display: grid; gap: 12px; }
.keymap > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.keymap dt { min-width: 6em; font-weight: 700; font-size: 16px; }
.keymap dd { display: flex; flex-wrap: wrap; gap: 8px; }
kbd {
  display: inline-grid; place-items: center; min-width: 46px; height: 44px; padding: 0 12px;
  background: var(--column); border: 1.5px solid var(--line); border-bottom-width: 2.5px; border-radius: 10px;
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--ink); flex: none; white-space: nowrap;
}
.keys-note { grid-column: 1 / -1; padding-top: 18px; border-top: 1.5px dashed #B9CDDC; font-size: 16px; color: var(--sub); }
@media (max-width: 1099px) { .input-grid { grid-template-columns: 400px minmax(0, 1fr); } .rung { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 899px) {
  .input-grid { grid-template-columns: 1fr; }
  .input-device { position: static; width: min(80%, 420px); margin-inline: auto; }
  .keys { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .rung { padding-left: 44px; }
  .rung::before { top: 44px; }
  kbd { min-width: 40px; padding: 0 9px; font-size: 15px; }
  .keymap > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .keymap dd { gap: 6px; flex-wrap: nowrap; }
  .rung-tx .h3 { font-size: 20px; }
}

/* ===== 自分の言葉、自分の声 ===== */
.words { background: var(--surface); border-top: 2px solid var(--ink); padding: clamp(80px, 10vw, 150px) 0; overflow: hidden; }
.words-head { margin-bottom: clamp(40px, 5vw, 72px); }
/* 3つとも「本人が話す例」。吹き出しの形・色・しっぽの向きをそろえ、階段状に並べる */
.talk { display: grid; gap: 22px; }
.tb {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic cat" "ic tx";
  column-gap: 18px; row-gap: 4px; width: fit-content; max-width: 100%;
  padding: 20px 32px 24px 24px; background: var(--bg); border: 2px solid var(--ink); border-radius: 26px;
}
.tb::after {
  content: ""; position: absolute; left: 52px; bottom: -12px; width: 22px; height: 22px; background: var(--bg);
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); border-bottom-right-radius: 5px;
}
.tb-2 { margin-left: clamp(0px, 8vw, 120px); }
.tb-3 { margin-left: clamp(0px, 16vw, 240px); }
.tb-ic { grid-area: ic; width: 34px; height: 34px; margin-top: 34px; color: var(--accent); }
.tb-cat {
  grid-area: cat; justify-self: start; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 14px; font-weight: 700; line-height: 1.9; color: var(--sub); letter-spacing: .08em;
}
.tb-tx { grid-area: tx; font-size: clamp(32px, 4.4vw, 64px); font-weight: 700; line-height: 1.3; letter-spacing: .02em; font-feature-settings: "palt"; }
.count { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-top: clamp(56px, 7vw, 104px); padding-bottom: 40px; border-bottom: 1.5px solid #C8DAE8; }
.count-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .55em; font-weight: 700; line-height: 1; font-feature-settings: "palt"; }
.cg { display: inline-flex; align-items: baseline; gap: .1em; white-space: nowrap; }
.count-n .n { font-size: clamp(64px, 8vw, 120px); letter-spacing: -.01em; color: var(--accent); }
.count-n .u { font-size: clamp(26px, 2.8vw, 40px); }
.count-n .plus { font-size: clamp(22px, 2.2vw, 30px); color: var(--sub); }
.count .body { padding-bottom: .4em; }
.wf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.wf-item .h3 { margin: 22px 0 6px; }
.wf-item p { max-width: 30em; color: var(--ink); }
.wf-fig { display: grid; place-items: center; align-content: center; gap: 14px; height: 260px; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.tabs span {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.tabs .on { background: var(--selected); border: 2px solid var(--ink); }
.tabs .on svg { width: 16px; height: 16px; color: var(--ink); }
.tab-rows { display: grid; gap: 6px; width: min(100%, 360px); }
.tab-rows span { padding: 6px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 16px; line-height: 1.5; }
.pred-in { display: flex; align-items: center; width: min(100%, 420px); min-height: 60px; padding: 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 30px; font-weight: 700; }
.pred-in i { width: 3px; height: 1.05em; margin-left: 3px; background: var(--accent); }
.pred { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.pred-lb { font-size: 13px; color: var(--sub); font-weight: 700; padding: 0 4px; }
.pred-c { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 16px; }
.rec { display: flex; align-items: center; gap: 16px; width: min(100%, 440px); }
.rec-btn { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; }
.rec-btn svg { width: 30px; height: 30px; }
.wave { display: flex; align-items: center; gap: 4px; flex: 1; height: 72px; max-width: 220px; }
.wave i { flex: 1; min-width: 3px; border-radius: 3px; background: var(--line); height: 30%; }
.wave i:nth-child(3n) { height: 70%; } .wave i:nth-child(4n+1) { height: 46%; } .wave i:nth-child(5n+2) { height: 90%; } .wave i:nth-child(7n) { height: 58%; }
.wave i:nth-child(n+17) { background: #BFD2E0; height: 18%; }
.rec-max { flex: none; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vsel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 420px); }
.vs {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; font-weight: 700; font-size: 19px;
}
.vs-ic { width: 34px; height: 34px; color: var(--accent); }
.vs.on { background: var(--selected); border: 2px solid var(--ink); }
.vs-ck { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; color: var(--ink); }
@media (max-width: 899px) { .count { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .wf { grid-template-columns: minmax(0, 1fr); } .wf-fig { height: auto; min-height: 200px; } }
@media (max-width: 599px) {
  .talk { gap: 20px; }
  .tb { padding: 14px 18px 18px 14px; column-gap: 12px; border-radius: 20px; }
  .tb-2, .tb-3 { margin-left: 0; }
  .tb-ic { width: 24px; height: 24px; margin-top: 30px; }
  .tb-tx { font-size: clamp(24px, 7.4vw, 32px); }
  .count-n { gap: 4px .5em; }
  .count-n .n { font-size: 48px; }
  .count-n .u { font-size: 20px; }
  .count-n .plus { font-size: 18px; }
  .wf-fig { min-height: 0; padding: 40px 12px 18px; }
  .tabs span { min-height: 38px; padding: 0 9px; font-size: 13px; }
  .rec-btn { width: 52px; height: 52px; } .rec-btn svg { width: 26px; height: 26px; }
  .rec-max { font-size: 16px; padding: 4px 8px; }
  .rec { gap: 10px; }
  .wave { min-width: 0; gap: 3px; }
  .wave i { min-width: 2px; }
  .wave i:nth-child(n+19) { display: none; }
  .vs { min-height: 96px; font-size: 17px; }
  .pred-c { font-size: 14px; padding: 0 12px; }
}

/* ===== 図の台紙: 補足の図は破線の台紙に入れる。押せないことは、破線と、部品に塗りの厚みがないことで示す ===== */
.mount {
  position: relative; padding: 24px;
  background: rgba(229, 242, 252, .6); border: 1.5px dashed #9DB6C9; border-radius: 24px;
}
.mount-on { background: #0F4A75; border-color: rgba(255,255,255,.45); }
.mount-warm { background: #FFEFD8; border-color: #D9A15C; }

/* ===== 補助の章: 見出しを一段小さく、上下の余白も詰める ===== */
.h2-md { font-size: clamp(28px, 3vw, 42px); line-height: 1.35; }
.care, .local, .notes, .faq { padding: clamp(64px, 7vw, 96px) 0; }

/* ===== そばにいる人のために ===== */
.care-head { margin-bottom: clamp(32px, 4vw, 48px); }
.care-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(40px, 5vw, 72px); align-items: start; }
.show { padding: 44px 20px 20px; }
.show-screen {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6% 7% 16%;
  background: var(--surface); border: 12px solid var(--ink); border-radius: 30px;
  text-align: center;
}
.show-tx { font-size: clamp(32px, 4.4vw, 64px); font-weight: 700; line-height: 1.3; letter-spacing: .02em; font-feature-settings: "palt"; }
.show-btn {
  position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; background: var(--accent); color: #fff; border-radius: 12px; font-weight: 700; font-size: 16px;
}
.show-btn svg { width: 20px; height: 20px; }
.care-list { display: grid; gap: 0; }
.care-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1.5px solid #C8DAE8; }
.care-list li:first-child { border-top: 0; padding-top: 0; }
.care-list svg { width: 28px; height: 28px; margin-top: 4px; color: var(--accent); }
.care-list .h3 { margin-bottom: 4px; }
@media (max-width: 899px) { .care-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .show { padding: 40px 12px 12px; } .show-screen { border-width: 8px; border-radius: 20px; padding: 6% 6% 20%; } .show-btn { right: 10px; bottom: 10px; font-size: 14px; padding: 6px 12px; } }

/* ===== 見やすさ: 導入・明暗の見本・3項目を1つのまとまりに ===== */
.view { padding: clamp(64px, 7vw, 96px) 0; background: var(--surface); border-top: 2px solid var(--ink); }
.view-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: 40px; }
.view-head .body { padding-bottom: .3em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 44px 16px 16px; }
.split .half:first-of-type { border-radius: 16px 0 0 16px; }
.split .half:last-child { border-radius: 0 16px 16px 0; }
.half { padding: clamp(28px, 4vw, 48px) 20px; display: grid; justify-items: center; gap: 18px; }
.half-light { background: var(--bg); color: var(--ink); --k-bg: var(--surface); --k-line: var(--line); --k-sel: var(--selected); --k-ink: var(--ink); --k-acc: var(--accent); }
.half-dark { background: var(--d-bg); color: var(--d-ink); --k-bg: var(--d-surface); --k-line: var(--d-line); --k-sel: #2D506C; --k-ink: var(--d-ink); --k-acc: var(--d-accent); }
.half-lb { font-weight: 700; font-size: 16px; letter-spacing: .1em; }
.pal { display: grid; grid-template-columns: repeat(3, 92px); gap: 10px; }
.pf {
  grid-column: 1 / -1; display: flex; align-items: center; min-height: 72px; padding: 0 18px;
  background: var(--k-bg); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 14px;
  font-size: 28px; font-weight: 700;
}
.pk {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 76px;
  background: var(--k-bg); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 12px;
  font-size: 30px; font-weight: 700; line-height: 1;
}
.pk-yes, .pal .pk:nth-child(3) { font-size: 17px; }
.pk-yes svg, .pal .pk:nth-child(3) svg { width: 20px; height: 20px; }
.pal .pk:nth-child(3) { grid-column: span 2; }
.pk-scan { background: var(--focus); color: #142A3D; border: 4px solid #142A3D; }
.half-dark .pk-scan { color: #102333; border-color: #F3F8FC; outline: 3px solid #102333; outline-offset: -7px; }
.pk-scan .tri { position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; color: currentColor; }
.half-dark .pk-scan .tri { color: #102333; }
.pk-sel { background: var(--k-sel); border-width: 2px; border-color: var(--k-ink); }
.pk-sel .chk { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; color: var(--k-acc); }
.half-dark .pk-sel .chk { color: #9BD3FF; }
.view-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: 32px; }
.view-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.vl-k {
  display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--ink); border-radius: 12px;
  font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1; background: var(--bg);
}
.vl-pair { display: flex; overflow: hidden; padding: 0; }
.vl-pair span { flex: 1; height: 100%; background: var(--bg); }
.vl-pair span + span { background: var(--d-bg); }
.vl-tri { background: var(--focus); border-width: 3px; }
.vl-tri svg { width: 16px; height: 16px; color: var(--ink); }
.view-list .h3 { margin-bottom: 4px; }
@media (max-width: 899px) { .view-head { grid-template-columns: 1fr; } .view-list { grid-template-columns: 1fr; gap: 24px; } .view-list li { max-width: 34em; } }
@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; padding: 40px 10px 10px; }
  .split .half:first-of-type { border-radius: 14px 14px 0 0; }
  .split .half:last-child { border-radius: 0 0 14px 14px; }
  .pal { grid-template-columns: repeat(3, minmax(0, 84px)); }
}

/* ===== この iPad の中だけで ===== */
.local-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; }
.local-copy .h2 { margin-bottom: 24px; }
.local-fig { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; padding: 44px 24px 28px; }
.pad {
  position: relative; display: grid; align-content: center; gap: 12px;
  padding: 64px 30px 36px; border: 5px solid var(--ink); border-radius: 40px; background: var(--surface);
}
.pad::after { content: ""; position: absolute; inset: 14px; border: 1px solid #9DB6C9; border-radius: 28px; pointer-events: none; }
.pad-cam { position: absolute; top: 6px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ink); }
.pad-lb { position: absolute; left: 34px; top: 28px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.pad-it {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 22px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; font-weight: 700; font-size: 19px; line-height: 1.4;
}
.pad-it svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
/* 外へ向かう線は「送らない」の印で止まる(矢印の先は描かない) */
.out { position: relative; height: 150px; }
.out-line { position: absolute; left: 0; width: 46px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 13px); }
.out-x { position: absolute; left: 46px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--surface); border: 4px solid var(--ink); }
.out-x::before { content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 4px; margin: -2px 0 0 -26px; background: var(--ink); transform: rotate(-45deg); }
.out-lb { position: absolute; left: 30px; width: 84px; top: calc(50% + 36px); text-align: center; font-size: 15px; font-weight: 700; line-height: 1.5; }
.local .nots { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nots li { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.nots .x { position: relative; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; flex: none; }
.nots .x::before, .nots .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.nots .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.local-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: 24px; }
.local-facts li { padding-top: 16px; border-top: 2px solid var(--ink); font-size: 16px; line-height: 1.85; }
@media (max-width: 899px) { .local-grid { grid-template-columns: 1fr; } .local .nots { grid-column: 1; } .local-facts { grid-template-columns: 1fr; gap: 18px; } .local-fig { max-width: 600px; } }
@media (max-width: 599px) {
  /* スマホは縦に積む: iPad → 下へ向かう線 → 送らない */
  .local-fig { grid-template-columns: 1fr; justify-items: center; padding: 40px 12px 20px; }
  .pad { width: 100%; max-width: 320px; padding: 52px 16px 24px; border-width: 4px; border-radius: 30px; gap: 8px; }
  .pad::after { inset: 10px; border-radius: 22px; }
  .pad-lb { left: 24px; top: 22px; font-size: 13px; }
  .pad-it { min-height: 52px; padding: 0 14px; gap: 10px; font-size: 16px; }
  .pad-it svg { width: 20px; height: 20px; }
  .out { width: 100%; max-width: 320px; height: auto; display: flex; flex-direction: column; align-items: center; }
  .out-line { position: static; width: 3px; height: 32px; margin: 0; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 13px); }
  .out-x { position: relative; left: auto; top: auto; margin: 0; width: 44px; height: 44px; border-width: 3px; }
  .out-x::before { width: 44px; margin-left: -22px; height: 3px; }
  .out-lb { position: static; width: auto; margin-top: 6px; font-size: 14px; }
  .out-lb br { display: none; }
}

/* ===== ご利用にあたって(3項目を平らな面に) ===== */
.notes { background: var(--surface); border-top: 2px solid var(--ink); }
.notes-head { margin-bottom: clamp(28px, 3vw, 40px); }
.notes-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.notes-list li {
  display: flex; flex-direction: column; gap: 18px; min-height: 200px; padding: 24px 26px 26px;
  background: #F8FBFD; border: 1.5px solid var(--ink); border-radius: 20px;
}
.notes-list p { font-size: 19px; font-weight: 700; line-height: 1.75; font-feature-settings: "palt"; letter-spacing: .03em; }
.nk {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
@media (max-width: 1099px) { .notes-list { grid-template-columns: 1fr; } .notes-list li { min-height: 0; flex-direction: row; align-items: flex-start; gap: 18px; } }
@media (max-width: 599px) { .notes-list li { padding: 18px 16px 20px; border-radius: 16px; } .notes-list p { font-size: 17px; } .nk { width: 36px; height: 36px; font-size: 17px; } }

/* ===== よくある質問 ===== */
.faq { background: var(--bg); border-top: 2px solid var(--ink); }
.faq-head .h2 { white-space: nowrap; }
.faq-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq details { position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; }
.faq summary {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center;
  list-style: none; cursor: pointer; border-radius: 16px;
  padding: 16px 64px 16px 18px; font-size: 19px; font-weight: 700; line-height: 1.6; font-feature-settings: "palt";
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; display: grid; place-items: center; width: 44px; height: 48px; align-self: start;
  background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 4px; border-radius: 10px;
  font-size: 20px; line-height: 1; letter-spacing: 0;
}
.q { display: block; }
.faq summary::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 36px; height: 36px; margin-top: -18px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 2.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.5px 14px no-repeat, var(--surface);
}
.faq summary:hover { background: var(--selected); }
.faq details[open] { border: 4px solid var(--ink); }
.faq details[open] summary { background: var(--focus); border-radius: 14px 14px 0 0; padding-left: 40px; }
.faq details[open]::before {
  content: ""; position: absolute; z-index: 1; left: 14px; top: 34px; width: 14px; height: 14px;
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.faq details[open] summary::before { border-color: var(--ink); }
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 14px 2.5px no-repeat, var(--surface); border-color: var(--ink); }
.faq .a { padding: 18px 64px 24px 100px; }
.faq .a p { max-width: 34em; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .faq summary { font-size: 17px; padding: 14px 54px 14px 12px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .faq summary::before { width: 40px; height: 44px; font-size: 18px; }
  .faq summary::after { right: 10px; }
  .faq details[open] summary { padding-left: 32px; }
  .faq details[open]::before { left: 10px; top: 30px; width: 12px; height: 12px; }
  .faq .a { padding: 14px 18px 20px; }
}

/* ===== 公開準備 ===== */
.release { background: var(--header); border-top: 2px solid var(--ink); padding: clamp(64px, 7vw, 104px) 0; }
.release-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 72px); align-items: center; }
.release-icon { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 28px; }
.release-copy .h2 { margin-bottom: 24px; }
.release .status-tag { margin-top: 24px; }
.release-contact { margin-top: 22px; font-size: 16px; }
.trace { padding: 44px 24px 24px; }
.trace-bubble {
  position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px 8px; padding: 10px 24px;
  background: var(--focus); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px;
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: .04em;
}
.trace-bubble::after {
  content: ""; position: absolute; left: 36px; bottom: -13px; width: 20px; height: 20px;
  background: var(--focus); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); border-bottom-right-radius: 4px;
}
.trace-bubble svg { width: 30px; height: 30px; }
html.js .trace:not(.is-static) .trace-bubble { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js .trace.is-done .trace-bubble { opacity: 1; transform: none; }
.trace-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.trace-field {
  position: relative; display: flex; align-items: center; min-height: 88px; padding: 0 24px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; letter-spacing: .04em;
}
.trace-speak {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 18px;
  background: var(--accent); color: #fff; border: 3px solid var(--accent); border-radius: 14px; font-size: 15px; font-weight: 700;
}
.trace-speak svg { width: 26px; height: 26px; }
.trace-speak.is-on { background: var(--focus); color: var(--ink); border-color: var(--ink); }
.trace-speak.is-on::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.trace-full { display: none; }
.trace-text::after { content: ""; display: inline-block; width: 3px; height: 1em; margin-left: 3px; vertical-align: -.1em; background: var(--accent); }
.trace-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.tc { display: grid; grid-template-rows: repeat(5, 1fr); gap: 6px; }
.tk {
  position: relative; display: grid; place-items: center; min-height: 58px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font-size: clamp(18px, 2vw, 28px); font-weight: 700; line-height: 1;
}
.tk-e { background: transparent; border: 1px dashed #C3D5E3; }
.tk.is-on { background: var(--focus); border: 3px solid var(--ink); }
.tk.is-on::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
html:not(.js) .trace-full, .trace.is-static .trace-full { display: inline; }
html:not(.js) .trace-text, .trace.is-static .trace-text { display: none; }
.trace.is-static .trace-speak { background: var(--focus); color: var(--ink); border-color: var(--ink); }
.release .disclaimer { grid-column: 1 / -1; padding: 24px 0 0; border-top: 1.5px solid #B9D3E6; }
@media (max-width: 899px) { .release-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .trace { padding: 40px 10px 12px; }
  .trace-bubble { font-size: 24px; padding: 6px 16px; margin-bottom: 18px; }
  .trace-bubble svg { width: 22px; height: 22px; }
  .trace-top { grid-template-columns: minmax(0, 1fr) auto; }
  .trace-field { min-height: 64px; padding: 0 14px; font-size: 30px; }
  .trace-speak { padding: 0 10px; font-size: 13px; }
  .trace-board { gap: 3px; } .tc { gap: 3px; }
  .tk { min-height: 40px; border-radius: 7px; font-size: 17px; }
  .tk.is-on::before { left: 2px; top: 2px; width: 6px; height: 6px; }
}

/* ===== 注記・フッター ===== */
.disclaimer { font-size: 14px; color: var(--sub); line-height: 1.8; }
.ft { background: var(--ink); color: #fff; padding: 40px 0; }
.ft-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.brand-ft { color: #fff; font-size: 17px; }
.brand-ft img { width: 36px; height: 36px; border-radius: 9px; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: auto; }
.ft-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 8px; }
.ft-nav a:hover { background: rgba(255,255,255,.12); text-decoration: underline; }
.ft small { font-size: 13px; letter-spacing: .08em; color: #D5E3EE; }
.ft :focus-visible { outline-color: #fff; }
@media (max-width: 599px) { .ft-nav { margin-left: -12px; width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .caret { animation: none !important; }
  .voice.is-speaking .voice-ic .w1, .voice.is-speaking .voice-ic .w2, .voice-text.pop, .key.is-hit { animation: none !important; }
  .switch { transition: none; }
}

/* 320px 前後 */
@media (max-width: 374px) {
  .pad-it { font-size: 14px; white-space: nowrap; padding: 0 10px; }
  .notes-list li { gap: 12px; padding: 18px 14px 20px; }
  .notes-list p { font-size: 16px; }
  .nk { width: 32px; height: 32px; font-size: 15px; }
}
@media (max-width: 374px) {
  .keys { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  kbd { min-width: 34px; padding: 0 7px; font-size: 14px; }
  .keymap dd { gap: 4px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ck { font-size: 15px; white-space: nowrap; padding: 6px 8px; }
  .ek { font-size: 13px; white-space: nowrap; padding: 6px 4px; }
}
@media (max-width: 374px) {
  .switch-hint strong { display: block; }
  .col-sym .key-sm { font-size: 12px; letter-spacing: -.08em; padding: 0 1px; }
}

/* ===== 各区画の細部(ヒーロー・おためし・返事・言葉・補足の図・質問) ===== */

/* ヒーロー: しるしは枠なしの文字に。足もとのキーを少し多く見せる */
.marks { gap: 6px 22px; }
.marks li { min-height: 32px; padding: 0; background: none; border: 0; }
.marks li::before { content: ""; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.strip { height: 184px; }
.hd-status { text-autospace: no-autospace; }
.hs-store { margin-right: .35em; }
.hero-device figcaption, .input-device figcaption, .try-shot figcaption { text-align: left; }

/* おためし: いまの段階(1 行を選ぶ/2 文字を選ぶ) */
.try-lead-sp { display: none; }
.phase { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.demo-bottom .phase { grid-area: ph; }
.demo-bottom { grid-template-areas: "edit ph" "edit sw" "edit hint"; }
.ph {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 10px;
  border: 1.5px solid #B9CDDC; border-radius: 10px; color: var(--sub); font-size: 15px; font-weight: 700; font-feature-settings: "palt";
}
.ph-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid currentColor; font-size: 13px; letter-spacing: 0; }
.ph.is-now { background: var(--focus); border: 2.5px solid var(--ink); color: var(--ink); padding-left: 22px; }
.ph.is-now::before { content: ""; position: absolute; left: 8px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* 未入力のときは、仮の文字に縦棒を重ねない */
.field:not(.has-text) .caret { display: none; }
.field-ph { left: 18px; }
.pause svg { width: 20px; height: 20px; }

/* 返事: 主役の図。台紙なしで青い面に置き、「はい」を押したところと吹き出しを結ぶ */
.rf-bubble { margin: 18px 0 18px 8px; }
.rf-bubble::after { top: auto; bottom: -13px; border: 0; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); border-radius: 0 0 4px 0; }
.rk.is-pressed { background: var(--selected); outline: 3px solid var(--focus); outline-offset: -3px; }
html.js .reply-fig .rf-bubble { transform: translateY(8px) scale(.94); }

/* 相手に見せる: 主役の図。台紙なしで大きく */
.show { padding: 0; }

/* 言葉: 録音・声は浅い横長の補助項目 */
.wf-sub .wf-fig { height: 150px; }
.vs { min-height: 92px; flex-direction: row; gap: 10px; }
.vs-ic { width: 26px; height: 26px; }
.count-n .u { color: var(--ink); }

/* 呼ぶ・データ・見やすさ・締め: 補足の図は台紙に入れ、上の空きを詰める */
.local-fig { padding: 28px 24px; }
.split { padding: 16px; }
.trace { padding: 24px; }
.call-fig { padding: 32px 24px; }
/* 締めの吹き出しは最初から器を出し、話した時点で黄色と文字が入る */
html.js .trace:not(.is-static) .trace-bubble { opacity: 1; transform: none; background: var(--surface); border: 1.5px solid var(--line); color: transparent; }
html.js .trace:not(.is-static) .trace-bubble::after { background: var(--surface); border-color: var(--line); border-width: 0 1.5px 1.5px 0; }
html.js .trace:not(.is-static) .trace-bubble svg { color: var(--sub); }
html.js .trace.is-done .trace-bubble { background: var(--focus); border: 3px solid var(--ink); color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease); }
html.js .trace.is-done .trace-bubble::after { background: var(--focus); border-color: var(--ink); border-width: 0 3px 3px 0; }
html.js .trace.is-done .trace-bubble svg { color: var(--ink); }

/* よくある質問: 開閉の記号は囲まない */
.faq summary::after { border: 0; background: linear-gradient(var(--ink), var(--ink)) center / 16px 2.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.5px 16px no-repeat; }
.faq details[open] summary::after { border: 0; background: linear-gradient(var(--ink), var(--ink)) center / 16px 2.5px no-repeat; }

@media (max-width: 1099px) {
  .demo-bottom { grid-template-areas: "edit ph" "edit sw" "edit hint"; }
}
@media (max-width: 767px) {
  .demo-bottom { grid-template-areas: "ph" "sw" "hint" "edit"; }
  .phase { justify-content: flex-start; }
  .ph { min-height: 32px; font-size: 15px; }
  /* 文字盤のキーを広げ、▶と文字を離す。行を選ぶときも見出しに▶ */
  .board { gap: 2px; }
  .col { padding: 1px; gap: 3px; }
  .key.is-scan { padding: 4px 0 0 5px; }
  .key.is-scan::before { left: 2px; top: 2px; width: 6px; height: 6px; }
  .col.is-scan .col-h::before { display: block; left: 1px; width: 6px; height: 6px; }
  .col.is-scan .col-h { padding-left: 6px; }
}
@media (max-width: 599px) {
  /* ヒーロー: 札は内容の幅で主ボタンの下に。足もとのキーはかなの下まで見せる */
  .status-tag { width: auto; }
  .strip { height: 74px; }
  .sk, .strip-frame { height: 140px; }
  .sk { padding-top: 14px; }
  /* 実演の要点を枠のすぐ上に */
  .try-lead-sp { display: block; margin: 0 0 12px; font-size: 15px; line-height: 1.7; font-weight: 700; }
  .try-head .h2 { margin-bottom: 8px; }
  /* 切り替え・速さ・一時停止は2段にして、文字を 15px に */
  .demo-bar { flex-wrap: wrap; gap: 6px; }
  .demo-bar > .seg { flex: 1 1 100%; }
  .demo-bar > .seg .seg-b { flex: 1; }
  .bar-r { flex: 1 1 100%; }
  .bar-r .seg { flex: 1; }
  .bar-r .seg .seg-b { flex: 1; }
  .seg-b { font-size: 15px; min-height: 40px; padding: 0 8px; }
  .pause { min-height: 40px; padding: 0 14px; }
  .ck { font-size: 15px; }
  .ek { font-size: 15px; min-height: 48px; }
  .hint-key { display: none; }
  .switch-hint { font-size: 14px; }
  .voice { min-height: 44px; }
  .field { min-height: 44px; }
  .key { min-height: 34px; }
  .demo-bottom .switch { min-height: 58px; }
  .try-more .try-shot { width: 100%; margin-top: 28px; padding: 20px 16px; background: var(--bg); border-radius: 16px; }
  .try-more .try-shot .ipad { width: 72%; margin-inline: auto; }
  .try-more .try-shot figcaption { text-align: center; }
  /* 入力のしかた: 小さな図+名前を横に並べ、説明は名前の下に小さく */
  .input-head { margin-bottom: 28px; }
  .input-device { width: 60%; }
  .ladder-wrap { margin-top: 8px; }
  .rung { grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0 14px 40px; align-items: center; }
  .rung::before { top: 50%; width: 26px; height: 26px; font-size: 13px; }
  .rung-fig { overflow: hidden; }
  .mini { transform: scale(.72); transform-origin: left center; margin-right: -30%; }
  .rung-tx .h3 { font-size: 17px; margin-bottom: 0; }
  .rung-tx p { font-size: 14px; line-height: 1.7; }
  .rung-other { margin-top: 20px; }
  .keys { margin-top: 32px; }
  /* 言葉: 補助の2図は浅く */
  .wf-sub .wf-fig { height: auto; min-height: 0; padding: 16px 12px; }
  .wf-fig { padding: 18px 12px; }
  .count-n .n { font-size: 44px; }
  .count-n .u { font-size: 20px; }
  /* データ: 下の3項目の罫線を淡く */
  .local-facts li { border-top: 1px solid #C8DAE8; padding-top: 12px; }
  .local-fig { padding: 20px 12px; }
  /* よくある質問: 記号を小さく、質問文に幅を */
  .faq summary { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 14px 44px 14px 14px; }
  .faq summary::before { width: 22px; height: auto; border: 0; background: none; font-size: 18px; color: var(--accent); margin-top: .1em; }
  .faq summary::after { right: 8px; width: 28px; height: 28px; margin-top: -14px; background-size: 14px 2.5px, 2.5px 14px; }
  .faq details[open] summary::after { background-size: 14px 2.5px; }
  .faq details[open] summary { padding-left: 28px; }
  .faq details[open]::before { left: 8px; }
  .release .status-tag { width: auto; }
  .trace-bubble { margin-bottom: 14px; }
}
@media (max-width: 374px) {
  .rung { grid-template-columns: 92px minmax(0, 1fr); padding-left: 36px; }
  .mini { transform: scale(.6); margin-right: -40%; }
}
@media (max-width: 599px) {
  /* 実演の枠を1画面(844 − ヘッダー)に収めるための詰め */
  .demo { padding-top: 8px; padding-bottom: 8px; }
  .switch-hint > :not(strong) { display: none; }
  .key { min-height: 32px; }
  .demo-bottom .switch { min-height: 54px; }
  .ek { min-height: 46px; }
  .voice { margin-bottom: 10px; }
  .hero-title { font-size: clamp(32px, 9.6vw, 42px); }
  .try { padding-top: 16px !important; }
  .try-head .h2 { font-size: 24px; }
}
@media (max-width: 599px) {
  .eyebrow { display: none; } /* 紹介文に同じ内容があるため、スマホでは省く */
  .demo-bottom .switch { padding: 6px 16px; gap: 10px; }
  .demo-bottom .switch svg { width: 28px; height: 28px; }
  .demo-bar .seg { padding: 2px; }
}

/* ===== 実画面の見せ方 ===== */
/* 画像そのものを iPad の枠で囲む(平らな紺の縁)。スマホでは切り出した要所を細い枠で見せる */
.ipad-img { display: block; width: 100%; height: auto; border: clamp(9px, 1.3vw, 16px) solid var(--ink); border-radius: clamp(20px, 2.6vw, 34px); background: var(--ink); }
.shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--sub); text-align: left; }
.reply figcaption { color: #E4F1FB; }
.input-figs { display: grid; gap: 32px; align-content: start; }
.input-device { position: static; }
.quick-shot { width: 100%; }
.show { margin: 0; }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.screens figcaption { font-weight: 700; color: var(--ink); text-align: center; }
.wf-shot { height: auto !important; min-height: 0 !important; padding: 0 !important; display: block; }
@media (max-width: 599px) {
  .ipad-img { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .reply .ipad-img { border-color: rgba(255,255,255,.5); }
  .input-set { display: none; } /* 画面全体の幅の一覧は、スマホでは文字が読めないため方式の一覧で代える */
  .input-device { width: 100%; }
  .screens { grid-template-columns: 1fr; gap: 20px; }
  .screens figcaption { text-align: left; margin-top: 8px; }
  .quick-shot { max-width: none; }
  .try-more .try-shot { background: none; padding: 0; }
}

/* ===== 区画の境目: 明るい区画どうしは細い紺の線で区切る ===== */
.care, .local { border-top: 2px solid var(--ink); }

/* ===== ヘッダーの札(スマホ): ブランド名とのあいだを空ける ===== */
.hs-store { margin-right: 0; }
.hd-status { text-autospace: normal; }
@media (max-width: 599px) {
  .hd-in { gap: 12px; }
  .brand { font-size: 15px; gap: 8px; }
  .hd-status { padding: 0 10px; gap: 6px; font-size: 12.5px; }
}

/* ===== 言葉の4項目: 同じ段の絵の台は同じ高さ。見出しの位置を左右でそろえる ===== */
.wf { align-items: start; }
.wf-stage { display: grid; place-items: center; padding: 16px; border-radius: 18px; background: var(--bg); overflow: hidden; }
.wf-stage-lg { height: 236px; }
.wf-stage-sm { height: 190px; }
.wf-stage.mount { padding: 16px; }
.wf-stage picture { display: contents; }
.wf-stage img { width: auto; max-width: 100%; max-height: 100%; }
.wf-stage-soft img { max-width: 92%; }
.tb-2 .tb-tx, .tb-3 .tb-tx { font-size: clamp(28px, 3.8vw, 56px); }
.count { margin-top: clamp(32px, 4vw, 72px); }
@media (max-width: 599px) {
  .wf-stage, .wf-stage-lg, .wf-stage-sm { height: auto; padding: 0; background: none; }
  .wf-stage.mount { padding: 16px 12px; background: rgba(229, 242, 252, .6); }
  .wf-stage img { width: 100%; max-width: 100%; }
  .tb-2 .tb-tx, .tb-3 .tb-tx { font-size: clamp(22px, 6.6vw, 29px); }
}

/* ===== 見やすさ: 左に配色の2画面と説明、右に文字の拡大の画面と説明、下に「色だけに頼らない」 ===== */
.vgroups { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.vg-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.vg figure figcaption { font-weight: 700; color: var(--ink); text-align: center; }
.vl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 24px; }
.vl .h3 { margin-bottom: 4px; }
.vl-wide { margin-top: 40px; padding-top: 28px; border-top: 1px solid #C8DAE8; max-width: 44em; }
@media (max-width: 767px) {
  .vgroups, .vg-shots { grid-template-columns: 1fr; }
  .vg-size { margin-top: 16px; }
  .vg figure figcaption { text-align: left; margin-top: 8px; }
}

/* ===== 入力方法を選ぶ画面: 区画の幅で大きく見せる(スマホでは文字が読めないため出さない) ===== */
.input-set { margin: clamp(40px, 5vw, 64px) 0 0; }
.input-set .shot { border-radius: 16px; }

/* ===== スマホ: 入力のしかたの一覧は「番号|方式名→図→説明」 ===== */
@media (max-width: 599px) {
  .rung { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "fig" "desc"; gap: 8px; padding: 13px 0 13px 40px; align-items: start; }
  .rung::before { top: 14px; transform: none; width: 24px; height: 24px; font-size: 13px; }
  .rung-tx { display: contents; }
  .rung-tx .h3 { grid-area: name; font-size: 18px; }
  .rung-fig { grid-area: fig; height: 46px; overflow: visible; }
  .mini { transform: scale(.7); transform-origin: left top; margin-right: 0; }
  .rung-tx p { grid-area: desc; font-size: 17px; line-height: 1.7; max-width: 300px; }
  .rung-other { margin-top: 16px; }
}
@media (max-width: 374px) {
  .rung { grid-template-columns: minmax(0, 1fr); padding-left: 36px; }
  .mini { transform: scale(.66); }
}

/* ===== スマホ: おためしの文字盤のキーを高く、▶ を小さく ===== */
@media (max-width: 599px) {
  .key { min-height: 38px; }
  .col { gap: 3px; }
  .key.is-scan::before { left: 2px; top: 2px; width: 5px; height: 5px; }
  .col.is-scan .col-h { padding-left: 4px; letter-spacing: -.04em; }
  .col.is-scan .col-h::before { width: 5px; height: 5px; }
  .demo-bar .seg-b { min-height: 38px; }
  .demo-top { gap: 6px; }
  .phase { margin: 0; }
  .ph { min-height: 30px; }
}

/* ===== 締めの文字盤: 本文欄の「ありがとう」を1行に ===== */
.trace-field { white-space: nowrap; }
@media (max-width: 599px) {
  .trace-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .trace-field { min-height: 64px; padding: 0 14px; font-size: 30px; }
  .trace-speak { justify-self: end; min-width: 132px; min-height: 56px; padding: 0 14px 0 22px; flex-direction: row; gap: 6px; font-size: 14px; white-space: nowrap; }
  .trace-speak svg { width: 20px; height: 20px; }
}

/* ===== 入力のしかた: 横長の実画面は開閉する項目に収める ===== */
.more-shot { margin-top: 28px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); }
.more-shot summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 0 56px 0 22px;
  list-style: none; cursor: pointer; border-radius: 13px; font-size: 17px; font-weight: 700; font-feature-settings: "palt";
}
.more-shot summary::-webkit-details-marker { display: none; }
.more-shot summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg);
}
.more-shot[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.more-shot summary:hover { background: var(--selected); }
.more-shot .input-set { margin: 0; padding: 4px 16px 18px; }
.more-shot .input-set figcaption { margin-top: 12px; }
@media (max-width: 599px) { .more-shot { display: none; } }

/* ===== 言葉: 例文の文字の大きさはそろえる(PC)。数字は少し控えめに ===== */
@media (min-width: 600px) {
  .tb-tx, .tb-2 .tb-tx, .tb-3 .tb-tx { font-size: clamp(30px, 4vw, 58px); }
  .count { align-items: center; }
  .count-n .n { font-size: clamp(54px, 6.6vw, 98px); }
  .count .body { padding-bottom: 0; }
}

/* ===== 見やすさ: 「色だけに頼らない」は区画の締めとして全幅に ===== */
@media (min-width: 768px) {
  .vl-wide { max-width: none; grid-template-columns: 52px minmax(0, 1fr); }
  .vl-wide > div { display: flex; align-items: baseline; gap: 12px 32px; }
  .vl-wide .h3 { flex: none; white-space: nowrap; }
  .vl-wide p { max-width: 38em; }
}

/* ===== おためしの文字盤: 行見出しは背景なし。選ばれた列は外枠が主役、見出しは ▶ と淡い背景 ===== */
.col { background: transparent; }
.col.is-scan { background: transparent !important; outline: 4px solid var(--ink); outline-offset: 0; border-color: transparent !important; }
.col.is-scan .col-h { background: #FFF1C2; border-radius: 6px; }
.col.is-open { background: var(--soft); border-color: var(--line); }

/* ===== スマホの区画の中の間隔: ラベル→見出し 24、見出し→本文 30、本文→図 36、次の小見出しの前 60 ===== */
@media (max-width: 599px) {
  .label { margin-bottom: 16px; }
  .try-head .label { margin-bottom: 12px; }
  .reply-copy .h2, .call-copy .h2, .input-head .h2, .local-copy .h2, .view-head .h2, .release-copy .h2 { margin-bottom: 26px; }
  .words-head, .care-head, .notes-head { margin-bottom: 36px; }
  .view-head { margin-bottom: 36px; gap: 26px; }
  .input-head { margin-bottom: 36px; }
  .reply-grid { row-gap: 0; }
  .reply-fig { margin-top: 36px; }
  .quick { margin-top: 28px; padding-top: 32px; row-gap: 26px; }
  .quick .h3 { margin-bottom: 26px; }
  .call-grid { row-gap: 36px; }
  .local-grid { row-gap: 36px; }
  .care-grid { row-gap: 36px; }
  .faq-grid { row-gap: 36px; }
  .release-grid { row-gap: 36px; }
  .release-copy .h2 { margin-top: 0; }
  .wf { margin-top: 60px; row-gap: 56px; }
  .wf-item .h3 { margin-top: 18px; }
  .talk { margin-top: 0; }
  .count { margin-top: 36px; }
}
@media (max-width: 599px) {
  .label, .try-head .label { margin-bottom: 24px; }
  .try-head .h2 { margin-bottom: 30px; }
  .try-lead-sp { margin-bottom: 32px; }
  .reply-copy .h2, .call-copy .h2, .input-head .h2, .local-copy .h2, .release-copy .h2, .quick .h3 { margin-bottom: 30px; }
  .view-head .h2 { margin-bottom: 0; }
  .view-head { gap: 30px; }
  .quick { row-gap: 36px; }
}

/* ===== 言葉の4項目(PC): 実画面の操作名が読める大きさに ===== */
@media (min-width: 600px) {
  .wf-stage-lg { height: 252px; }
  .wf-stage-sm { height: 240px; }
  .wf-stage-soft img { width: 86%; max-width: 86%; max-height: none; }
}
/* ===== 見やすさ(PC): 3つの画面を同じ大きさに ===== */
@media (min-width: 768px) {
  .vg-size figure { margin-right: calc(clamp(20px, 3vw, 40px) / 2); }
}
/* ===== 言葉の4項目(スマホ): 本文の終わりから次の画像まで 46px ===== */
@media (max-width: 599px) {
  .wf { row-gap: 46px; }
}

/* ===== 録音の画面: 右へ続く画面の左側として、台の右端で見切る(右は枠なし・余白なし) ===== */
.wf-stage-bleed { padding: 10px 0 10px 16px; align-items: center; justify-items: stretch; }
.wf-stage-bleed img {
  width: 100%; height: auto; max-width: none; max-height: none;
  border-right: 0; border-radius: 14px 0 0 14px;
}
@media (max-width: 599px) {
  .wf-stage-bleed { padding: 0; margin-right: calc(var(--pad) * -1); }
}

/* ===== おためしの3つの手順(タブレット幅): 同じ幅の3列。番号と文の頭をそろえる ===== */
@media (min-width: 600px) and (max-width: 1099px) {
  .try-more { max-width: none; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
  .steps li { align-items: flex-start; }
  .steps .num { margin-top: -2px; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); } /* ③が4行を超える幅では縦に並べる */
}