/* ==================================================
   usAIin — ランディングページ
   style.css のトークンだけを使う（新しい色を足さない。濃淡は color-mix で作る）

   構成: 下に固定した島（ナビ。うさぎが右のポケットの上に座って前足を掛ける）/
   ヒーロー（左に文、右はうさぎの居場所）/ 3 ステップ / どなたが使うか / こんな場面で /
   機能 / 安心のしくみ / はじめかた / よくある質問 / 想い・締めの CTA / 多段フッター

   事業所の方／個人の方の出し分けは <html data-aud> と [data-for]（下の「出し分け」）。

   app.css は読み込まない。あちらは録音画面の都合（画面いっぱいに広げる、
   下をコンソールで埋める）で書いてあり、ここには要らない。
   ================================================== */

.lp-body { overflow-x: hidden; }
/* 白格子を LP だけ少し濃く（style.css の body は 4%。アプリの画面はそのまま） */
.lp-body {
  background-image:
    linear-gradient(rgba(2,141,174,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,141,174,0.08) 1px, transparent 1px);
}
.mono { font-family: var(--font-code); font-size: .92em; }

/* 見出しと本文の日本語の折り返し（未対応のブラウザでは無視されるだけ） */
.lp-body h1, .lp-body h2, .lp-body h3 { word-break: auto-phrase; text-wrap: balance; line-break: strict; }
.lp-body p, .lp-body li { line-break: strict; text-wrap: pretty; }
/* リード文は文節で折り返す（「その／場で」のような切れ方をさせない） */
.lp-hero-lead, .lp-section-lead, .lp-cta-band p { word-break: auto-phrase; }

/* ---------- 出し分け（事業所の方／個人の方） ---------- */
/* 印の無い要素は両方に出す。.btn などの display に負けないよう !important */
html[data-aud="personal"] [data-for="org"],
html:not([data-aud="personal"]) [data-for="personal"] { display: none !important; }

/* 切り替えは下の島の中（広い画面）か、島の左上に付いたタブ（狭い画面。下の「幅ごとの調整」） */
.lp-aud {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
}
.isl-aud { flex: 0 0 auto; }
.isl-aud-tail { display: none; }   /* 島の中は詰める（「事業所・法人」「個人」）。タブでは「の方」まで出す */
.lp-aud-btn {
  appearance: none; border: 0; cursor: pointer;
  height: 38px; padding: 0 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-3);
  background: transparent; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.lp-aud-btn:hover { color: var(--ink); }
.lp-aud-btn[aria-pressed="true"] { background: var(--paper); color: var(--accent-dk); box-shadow: var(--shadow-sm); }
.lp-aud-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-link-btn { appearance: none; background: none; border: 0; border-bottom: 2px solid var(--accent-border); padding: 0; font: inherit; cursor: pointer; }

/* ---------- 島（下に固定したナビ） ---------- */
.isl {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(1380px, calc(100% - 32px));
  height: 68px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 10px 0 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.isl a { text-decoration: none; }
.isl-logo { font-size: 18px; flex: 0 0 auto; }
.lp-logo-en {
  font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-4); margin-left: 8px;
}
.isl-grow { flex: 1 1 auto; }
.isl-login { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.isl-login:hover { color: var(--accent-dk); }
.isl-cta { height: 48px; padding: 0 22px; white-space: nowrap; flex: 0 0 auto; gap: 0; }   /* 「利用を」と「申し込む」の間を空けない（.btn の gap） */
/* うさぎの下の、何も押せない場所。前足がボタンをふさがないよう、ここに座らせる */
.isl-pocket {
  flex: 0 0 auto; align-self: stretch;
  width: var(--pw, 300px);
  display: flex; justify-content: center; align-items: flex-end;
}
.isl-hint { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; padding-bottom: 9px; }
.isl-menu {
  display: none; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.isl-menu i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink-2); }
.isl-menu[aria-expanded="true"] { background: var(--bg-2); }

/* うさぎの座る場所。島の上辺の上に置き、rabbit.css の舞台が前足のぶん（--rb-grip）下にはみ出して島に掛かる。
   左右の位置（--x）は landing.js がポケットの真ん中に合わせる。ヒーローを過ぎたら小さくなる（読む邪魔をしない） */
.seat {
  --w: 460px;
  --rb-grip: 26px;
  position: absolute; bottom: 100%;
  left: var(--x, calc(100% - 170px)); transform: translateX(-50%);
  width: var(--w);
  height: calc(var(--w) * 471 / 440 - var(--rb-grip));
  pointer-events: none;
  transition: width .45s cubic-bezier(.3, 1.2, .5, 1), height .45s cubic-bezier(.3, 1.2, .5, 1);
}
/* 舞台（rabbit.css の .rabbit-stage）を上と左右に広げる。ぴょんと伸びる・横に潰れる動き（縦 1.26 倍・横 1.2 倍まで）で
   頭や耳が舞台の外に出ても切れないように。下は今のまま（島に引っ込むときに隠れる）。うさぎの幅は座る場所の幅のまま */
.seat .rabbit-stage { top: -45%; left: -25%; right: -25%; }
.seat .rabbit { width: calc(100% / 1.5); }
/* ボタンやリンクの上に重なっているあいだは、タップを下へ通す（landing.js の passThrough） */
.seat.is-through .rabbit { pointer-events: none; }
.lp-past-hero .seat { --w: 160px; --rb-grip: 11px; }

/* 狭い画面のメニュー。島の上に開く（うさぎはそのあいだ引っ込む） */
.isl-sheet {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 2;
  width: min(320px, calc(100vw - 20px));
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 12px;
}
.isl-sheet[hidden] { display: none; }
.isl-sheet a {
  display: flex; align-items: center; min-height: 46px; padding: 0 12px;
  font-size: 15px; font-weight: 700; color: var(--ink-2); border-radius: 12px;
}
.isl-sheet a:hover { background: var(--bg-2); color: var(--accent-dk); }
.isl-sheet-login { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 4px; border-radius: 0 0 12px 12px; }

/* ---------- ヒーロー ---------- */
/* グリッドの子は既定で中身より狭くならない（min-width: auto）。狭い画面ではみ出すので外す */
.lp-hero-copy, .lp-hero-room { min-width: 0; }
/* 最初の 1 画面＝ヒーロー＋うさぎ＋島。うさぎは右の空けた列に見える */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 40px;
  min-height: calc(100vh - 100px);
  min-height: calc(100svh - 100px);
  padding-top: 48px;
  padding-bottom: 48px;
}
.lp-hero-h1 {
  font-size: clamp(36px, 4.6vw, 54px);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.28;
}
.lp-hero-h1 .accent { color: var(--accent); }
.lp-hero-h1.is-accent { color: var(--accent); }   /* 見出しをすべて青に（事業所の方） */
.lp-nw { white-space: nowrap; }   /* 「録音・AI記録システム。」を途中で折らない（狭い画面は下で字を小さくして収める） */
.lp-hero-lead {
  font-size: 16px; color: var(--ink-3); line-height: 2; margin-top: 22px; max-width: 34em;
}
.lp-checks { list-style: none; margin-top: 28px; display: grid; gap: 10px; }
.lp-checks li {
  position: relative; padding-left: 30px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); line-height: 1.6;
}
.lp-checks li::before {
  content: ''; position: absolute; left: 0; top: .15em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent);
}
.lp-checks li::after {
  content: ''; position: absolute; left: 7px; top: calc(.15em + 5px);
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-btn-tall { height: 56px; padding: 0 28px; font-size: 15px; background: var(--paper); }
.lp-hero-micro { font-size: 12.5px; color: var(--ink-4); margin-top: 14px; }

/* ---------- 節の共通 ---------- */
.lp-section { padding: 96px 0; }
.lp-section-alt {
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.lp-section-head { margin-bottom: 44px; }
.lp-section-head .eyebrow { display: inline-block; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.lp-section-title {
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 900; letter-spacing: -.01em; line-height: 1.35;
  margin-top: 16px;
}
.lp-section-lead { font-size: 15px; color: var(--ink-3); line-height: 1.95; margin-top: 14px; max-width: 46em; }
.lp-inline-link {
  color: var(--accent-dk); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--accent-border);
}
.lp-inline-link:hover { border-color: var(--accent); }

/* ---------- 使いかた（3 ステップ） ---------- */
.lp-flow {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.lp-flow-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-flow-item + .lp-flow-item { position: relative; }
/* ステップの間の「・・・›」 */
.lp-flow-item + .lp-flow-item::before {
  content: '';
  position: absolute; left: -28px; top: 150px;
  width: 16px; height: 16px;
  border-top: 2.5px solid var(--accent-border);
  border-right: 2.5px solid var(--accent-border);
  transform: rotate(45deg);
}
.lp-flow-step {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 26px;
  font-family: var(--font-code); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--accent);
}
.lp-flow-step::before, .lp-flow-step::after { content: ''; flex: 1; height: 1px; background: var(--accent-border); }
.lp-flow-item h3 { font-size: 18px; font-weight: 900; line-height: 1.5; margin-top: 12px; }
.lp-flow-item p { font-size: 14px; color: var(--ink-3); line-height: 1.95; margin-top: 10px; max-width: 24em; }

/* 画面の見本（小）。どれも同じ大きさの枠に入れる */
.mini {
  width: 100%; max-width: 260px; height: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 14px;
  overflow: hidden;
  text-align: left;
}
.mini-rec { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.mini-rabbit { width: 150px; height: auto; margin: 0 auto -16px; position: relative; z-index: 1; display: block; }
.mini-console {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 10px 12px; text-align: center;
}
.mini-time { font-family: var(--font-code); font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.mini-rec-state { font-size: 10px; font-weight: 700; color: var(--color-red); letter-spacing: .08em; margin-top: 2px; }
.mini-rec-btn {
  width: 46px; height: 46px; border-radius: 50%; margin: 10px auto 0;
  border: 3px solid color-mix(in srgb, var(--color-red) 30%, var(--paper));
  display: flex; align-items: center; justify-content: center;
}
.mini-rec-btn i { width: 15px; height: 17px; border-left: 5px solid var(--color-red); border-right: 5px solid var(--color-red); }

.mini-list { display: grid; gap: 9px; }
.mini-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px;
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.mini-card.is-dim { opacity: .55; }
.mini-card-t { font-size: 12.5px; font-weight: 900; }
.mini-card-m { font-size: 10px; color: var(--ink-4); margin-top: 3px; }
.mini-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pill {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid;
}
.pill-saved {
  background: color-mix(in srgb, var(--color-green) 9%, var(--paper));
  color: color-mix(in srgb, var(--color-green) 70%, var(--ink));
  border-color: color-mix(in srgb, var(--color-green) 28%, var(--paper));
}
.pill-run { background: var(--accent-soft); color: var(--accent-dk); border-color: var(--accent-border); }

.mini-draft { border: 1px solid var(--line); border-radius: 14px; padding: 12px; height: 100%; }
.mini-doc-meta { font-size: 9.5px; color: var(--ink-4); margin-top: 3px; }
/* 個人の文字起こしは話者を分けない（ブラウザの音声認識のまま）。段落だけ並べる */
.mini-doc { margin-top: 10px; display: grid; gap: 7px; }
.mini-doc p { font-size: 10.5px; line-height: 1.75; color: var(--ink-2); }
.mini-doc p.is-dim { color: var(--ink-4); }
.mini-draft-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 900; }
.mini-copy {
  font-size: 9.5px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.mini-field { margin-top: 10px; }
.mini-field-k { font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.mini-field-v {
  font-size: 10.5px; line-height: 1.7; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 6px 8px; margin-top: 3px;
}
.mini-evidence {
  font-size: 9.5px; line-height: 1.6; color: var(--notice-ink);
  background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: 8px; padding: 6px 8px; margin-top: 10px;
}

/* ---------- どなたが使うか ---------- */
.lp-for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.lp-for-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
/* いま選んでいる方（事業所の方／個人の方）のカードを目立たせる */
html:not([data-aud="personal"]) .lp-for-card[data-card="org"],
html[data-aud="personal"] .lp-for-card[data-card="personal"] { border-color: var(--accent-border); box-shadow: var(--shadow); }
html:not([data-aud="personal"]) .lp-for-card[data-card="personal"] .lp-for-tag,
html[data-aud="personal"] .lp-for-card[data-card="org"] .lp-for-tag { background: var(--ink-4); }
.lp-for-tag {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}
.lp-for-card h3 { font-size: 22px; font-weight: 900; }
.lp-for-lead { font-size: 14.5px; color: var(--ink-3); line-height: 1.9; margin-top: 10px; }
.lp-for-list { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.lp-for-list li {
  position: relative; padding-left: 20px;
  font-size: 14px; color: var(--ink-2); line-height: 1.75;
}
.lp-for-list li::before {
  content: ''; position: absolute; left: 3px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.lp-for-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: auto; padding-top: 24px; }

/* ---------- こんな場面で（縦の線でつなぐ） ---------- */
.lp-scenes { list-style: none; position: relative; max-width: 820px; }
.lp-scenes::before {
  content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px;
  width: 2px; background: var(--accent-border);
}
.lp-scene { position: relative; display: flex; gap: 28px; padding: 22px 0; }
.lp-scene-no {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-code); font-size: 15px; font-weight: 700; color: var(--accent-dk);
  position: relative; z-index: 1;
}
.lp-scene-when { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.lp-scene h3 { font-size: 19px; font-weight: 900; line-height: 1.5; margin-top: 6px; }
.lp-scene p { font-size: 14.5px; color: var(--ink-3); line-height: 1.95; margin-top: 8px; }

/* ---------- 機能（hAIyer と同じ 2 列・罫線で区切る） ---------- */
.lp-feat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px;
  border-top: 1px solid var(--line);
}
.lp-feat { display: flex; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.lp-feat-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center;
}
.lp-feat h3 { font-size: 16px; font-weight: 900; }
.lp-feat p { font-size: 14px; color: var(--ink-3); line-height: 1.95; margin-top: 6px; }

/* ---------- 安心のしくみ ---------- */
.lp-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-trust {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 24px;
}
.lp-trust h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 900;
}
.lp-trust h3::before {
  content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent); transform: rotate(45deg);
}
.lp-trust p { font-size: 13.5px; color: var(--ink-3); line-height: 1.9; margin-top: 8px; }
.lp-trust-note {
  margin-top: 22px;
  background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink);
  border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 13.5px; line-height: 1.9;
}
.lp-trust-note a { color: var(--accent-dk); font-weight: 700; }

/* ---------- 導入の流れ（hAIyer と同じカード） ---------- */
.lp-steps { list-style: none; display: grid; gap: 16px; }
.lp-step {
  display: flex; gap: 20px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 26px 28px;
}
.lp-step-num {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900;
}
.lp-step h3 { font-size: 17px; font-weight: 900; line-height: 1.5; margin-top: 7px; }
.lp-step p { font-size: 14px; color: var(--ink-3); line-height: 1.95; margin-top: 8px; }
.lp-step .btn { margin-top: 16px; }

/* ---------- よくある質問（hAIchi と同じ、左に見出し・右に開閉） ---------- */
.lp-faq-wrap { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: 40px; align-items: start; }
.lp-faq-wrap .lp-section-head { margin-bottom: 0; position: sticky; top: 32px; }
.lp-faq { display: grid; gap: 12px; }
.lp-qa {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.lp-qa summary {
  list-style: none; cursor: pointer;
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 48px 18px 18px;
  font-size: 15px; font-weight: 700; line-height: 1.6;
}
.lp-qa summary::-webkit-details-marker { display: none; }
.lp-qa summary::before {
  content: 'Q'; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-code); font-size: 13px; font-weight: 700;
}
.lp-qa summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s;
}
.lp-qa[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.lp-qa p { padding: 0 22px 20px 60px; font-size: 14px; color: var(--ink-3); line-height: 1.95; }

/* ---------- 想い ---------- */
.lp-essay {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 36px 40px;
  font-size: 15px; line-height: 2.1; color: var(--ink-2);
}
.lp-essay p + p, .lp-more-body p { margin-top: 18px; }
.lp-more { margin-top: 18px; }
.lp-more-btn {
  list-style: none; cursor: pointer; text-align: center;
  font-size: 13.5px; color: var(--ink-3);
}
.lp-more-btn::-webkit-details-marker { display: none; }
.lp-more-btn span { border-bottom: 1px solid var(--ink-4); padding-bottom: 1px; }
.lp-more-close { display: none; }
.lp-more[open] .lp-more-open { display: none; }
.lp-more[open] .lp-more-close { display: inline; }
.lp-more[open] .lp-more-btn { order: 2; margin-top: 18px; }
.lp-more[open] { display: flex; flex-direction: column; }
.lp-more-body { order: 1; }

/* 締めの CTA。箱を持たず、うさぎを添えて手紙の結びのように終わる */
.lp-cta-band { text-align: center; margin-top: 72px; }
.lp-cta-rabbit { width: 108px; height: auto; display: block; margin: 0 auto; }
.lp-cta-band h3 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 900; margin-top: 14px; line-height: 1.5; }
.lp-cta-band p { font-size: 14.5px; color: var(--ink-3); line-height: 1.95; margin-top: 12px; }
.lp-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------- フッター ---------- */
/* 下の島に隠れないよう、下に余白を取る */
.lp-footer { border-top: 1px solid var(--line); padding: 56px 0 calc(120px + env(safe-area-inset-bottom)); background: var(--paper); }
.lp-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.lp-footer-logo { font-size: 20px; font-weight: 900; color: var(--accent); }
.lp-footer-logo .logo-dot { color: var(--ink-4); font-weight: 700; }
.lp-footer-en { font-family: var(--font-code); font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: .08em; margin-left: 8px; }
.lp-footer-tagline { font-size: 13px; color: var(--ink-3); line-height: 1.9; margin-top: 10px; max-width: 22em; }
.lp-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-footer-cols h5 { font-size: 12px; font-weight: 700; color: var(--ink-4); letter-spacing: .08em; margin-bottom: 12px; }
.lp-footer-cols a { display: block; font-size: 13.5px; color: var(--ink-2); text-decoration: none; padding: 5px 0; }
.lp-footer-cols a:hover { color: var(--accent-dk); }
.lp-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-4);
}

/* ==================================================
   幅ごとの調整
   ================================================== */
/* 島には節へのリンクを並べない（2026-10-15 のご指示）。狭い画面だけ、ログインと節へのリンクをメニュー（≡）に入れる */
@media (max-width: 960px) {
  .isl-menu { display: inline-flex; }
}
@media (max-width: 1100px) {
  .isl-logo .lp-logo-en { display: none; }
}

@media (max-width: 1080px) {
  .lp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 小さめの PC。ヒーローの文とうさぎが重ならない大きさ */
@media (max-width: 1180px) and (min-width: 961px) {
  .seat { --w: 400px; --rb-grip: 23px; }
}

/* 背の低いノート PC（1280×720 など）。見出しとうさぎを少し小さくし、最初の画面で申し込みのボタンが島に隠れないようにする */
@media (max-height: 820px) and (min-width: 961px) {
  .seat { --w: 380px; --rb-grip: 21px; }
  .lp-hero { padding-top: 28px; padding-bottom: 28px; }
  .lp-hero-h1 { font-size: clamp(34px, 3.6vw, 44px); }
  .lp-hero-lead { margin-top: 16px; line-height: 1.85; }
  .lp-hero-cta { margin-top: 22px; }
}

/* 1 列。文は左に寄せ、右下のうさぎと重ならない幅にする */
@media (max-width: 960px) {
  /* 切り替えは島の左上に付いたタブにする（島の中に入りきらない）。右のうさぎとは重ならない幅 */
  .isl-aud {
    position: absolute; left: 22px; bottom: calc(100% - 1px);
    padding: 4px 4px 3px; gap: 2px;
    background: var(--paper);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  .isl-aud .lp-aud-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .isl-aud .lp-aud-btn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: none; }
  .isl-aud-tail { display: inline; }
  .lp-footer { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .isl-pocket { --pw: 220px; }
  .seat { --w: 210px; --rb-grip: 13px; }
  .lp-past-hero .seat { --w: 120px; --rb-grip: 8px; }
  .lp-hero { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 40px; padding-bottom: 260px; }
  .lp-hero-room { display: none; }
  .lp-hero-copy { max-width: 31em; }
  .lp-flow { grid-template-columns: 1fr; gap: 56px; max-width: 440px; margin: 0 auto; }
  .lp-flow-item + .lp-flow-item::before {
    left: 50%; top: -38px; margin-left: -8px; transform: rotate(135deg);
  }
  .lp-for { grid-template-columns: 1fr; }
  .lp-faq-wrap { grid-template-columns: 1fr; gap: 0; }
  .lp-faq-wrap .lp-section-head { position: static; margin-bottom: 32px; }
  .lp-footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .lp-section { padding: 68px 0; }
  .lp-section-head { margin-bottom: 32px; }
  .lp-feat-grid { grid-template-columns: 1fr; }
  .lp-trust-grid { grid-template-columns: 1fr; }
  .lp-for-card { padding: 24px 22px; }
  .lp-step { padding: 22px 20px; gap: 16px; }
  .lp-essay { padding: 26px 22px; font-size: 14.5px; }
  .lp-qa p { padding-left: 22px; }
  .lp-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* スマホ。島を詰め、うさぎは右下の角に小さく */
@media (max-width: 640px) {
  .isl { height: 62px; padding: 0 8px 0 18px; gap: 10px; width: calc(100% - 20px); bottom: max(10px, env(safe-area-inset-bottom)); }
  .isl-logo { font-size: 16px; }
  .isl-logo .lp-logo-en { display: none; }
  .isl-login { display: none; }
  .isl-cta { height: 44px; padding: 0 16px; font-size: 14px; }
  .isl-hint { display: none; }
  .isl-pocket { --pw: 92px; }
  .isl-cta-pre { display: none; }
  .seat { --w: 128px; --rb-grip: 8px; }
  .lp-past-hero .seat { --w: 92px; --rb-grip: 6px; }
  .lp-hero { padding-top: 28px; padding-bottom: 150px; }
  .lp-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .lp-hero-h1 { font-size: 34px; }
  .lp-hero-h1.is-accent { font-size: min(34px, 7.6vw); }
  .lp-hero-lead { font-size: 15px; }
  .lp-checks li { font-size: 14px; }
  .lp-hero-cta .btn-accent { width: 100%; }
  /* 「使いかたを見る」は幅を取らない（右下のうさぎの下に入らない） */
  .lp-hero-cta .lp-btn-tall { padding: 0 24px; }
  .lp-scenes::before { left: 21px; }
  .lp-scene { gap: 16px; }
  .lp-scene-no { flex-basis: 44px; width: 44px; height: 44px; font-size: 13px; }
  .lp-scene h3 { font-size: 17px; }
  .lp-cta-btns .btn { width: 100%; }
}

@media (max-width: 380px) {
  .isl { padding-left: 14px; gap: 8px; }
  .isl-cta { padding: 0 12px; font-size: 13px; }
  .isl-pocket { --pw: 80px; }
  .seat { --w: 112px; }
  .lp-past-hero .seat { --w: 84px; }
}

@media (max-width: 360px) {
  .isl { padding: 0 6px 0 12px; }
  .isl-logo { font-size: 15px; }
  .isl-cta { padding: 0 10px; }
  .isl-menu { width: 40px; height: 40px; }
  .isl-pocket { --pw: 60px; }
  .seat { --w: 100px; }
  .lp-past-hero .seat { --w: 80px; }
  .lp-hero-h1 { font-size: 28px; }
  .isl-aud-tail { display: none; }
  .lp-hero-cta .btn, .lp-cta-btns .btn { padding: 0 16px; font-size: 15px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .seat { transition: none; }
  html { scroll-behavior: auto; }
}