/* Novus AI LP — 参考イメージ準拠（明るいブルー系 / PC 1200px）
   デザイン提案「3a 参考イメージ準拠 — 明るい安心トーン」を実装したもの。 */

:root {
  --ink: #1B2340;
  --muted: #5A6285;
  --soft: #8A90AD;
  --faint: #A2A8C2;
  --line: #EDEFF7;
  --line2: #E1E5F5;
  --line3: #D5DAF0;
  --panel: #F6F7FD;
  --brand: #5B6CF9;
  --brand-dark: #4E5FE8;
  --shadow: 0 6px 20px rgba(27, 35, 64, .06);
  --shadow-sm: 0 5px 16px rgba(27, 35, 64, .05);
  --pad: 48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* 「無料」のような語の途中で改行させない。未対応ブラウザでは従来どおり */
  word-break: auto-phrase;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 折り返し制御。見出しは行長を揃えて1文字だけ落ちるのを防ぎ、
   本文は最終行が極端に短くならないようにする。
   auto-phrase は日本語を文節で折るが、未対応ブラウザでは無視される。 */
h1, h2, h3 { letter-spacing: -.01em; text-wrap: balance; }
p, .ticks span, .mail-lead, .steps p, .faq summary { text-wrap: pretty; }
/* 短い1行ものは、1文字だけ次行に落ちないよう行長を揃える */
.price-per, .store-note, .btn-note, .point b, .float-card-head b,
.sos-tag, .mail-subject, .mail-title, .ui-row span,
.steps p, .price > div > p, .dash p, .mail-lead, .faq p { text-wrap: balance; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }

/* ══ ナビ ══ */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 36px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: 40px; border-radius: 12px; }
.brand span { font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--brand); }
.nav-cta {
  background: var(--brand); color: #FFFFFF; border-radius: 999px;
  padding: 13px 26px; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background .18s ease;
}
.nav-cta:hover { background: var(--brand-dark); }

/* ══ パンくず ══ */
.crumbs { font-size: 12px; color: var(--soft); }
.crumbs .wrap {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px; padding-bottom: 2px;
}
.crumbs a { color: var(--soft); }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs [aria-current] { color: var(--muted); }

/* ══ ヒーロー ══ */
/* ヒーロー背景: 提供された写真(白基調・被写体右寄り)をそのまま敷く。
   文字が載る左側は写真自体が白いため、薄い白グラデーションを重ねるだけで可読性が保てる。
   下端は次セクションの地色(#F6F7FD)へ溶かして、境界線を出さない。 */
.hero {
  background:
    linear-gradient(180deg, rgba(246,247,253,0) 78%, #F6F7FD 100%),
    linear-gradient(100deg, rgba(255,255,255,.94) 30%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 72%),
    url('/novus/assets/hero-bg.jpg') right center / cover no-repeat #FFFFFF;
}
.hero .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  /* パンくずの高さぶん上を詰めて、ファーストビューの情報量を保つ */
  padding-top: 38px; padding-bottom: 96px; align-items: center;
}
.hero h1 { margin: 0 0 22px; font-size: 40px; line-height: 1.42; font-weight: 700; }
.hero h1 span { display: block; }
.accent { color: var(--brand); display: inline !important; }
.lead { margin: 0 0 34px; font-size: 16px; line-height: 1.95; color: var(--muted); max-width: 26em; }

.hero-points { display: flex; gap: 22px; margin-bottom: 34px; flex-wrap: wrap; }
/* 「サインだけを保護者に通知」が1文字だけ折り返さない幅 */
.hero-points > div { max-width: 162px; }
.hero-points p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }

.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #FFFFFF; border-radius: 999px;
  padding: 16px 34px; font-size: 15px; font-weight: 700;
  transition: background .18s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn-note { font-size: 12.5px; color: var(--soft); line-height: 1.7; }

/* ストアバッジ */
.stores { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* .ios / .android は公開時のリンク差し替え用。配色は白黒で統一する */
.store-badge {
  display: flex; align-items: center; gap: 10px;
  background: #1B2340; color: #FFFFFF; border-radius: 10px;
  padding: 9px 18px 9px 15px;
}
/* バッジ内の文字は折り返さない。入らないときはバッジごと段落ちさせる */
.store-badge small { display: block; font-size: 9.5px; line-height: 1.4; opacity: .82; letter-spacing: .02em; white-space: nowrap; }
.store-badge b { display: block; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.store-note { font-size: 12px; color: var(--soft); margin: 14px 0 0; }

/* ヒーロー右: 写真 + 端末 + 白カード */
.hero-visual { position: relative; height: 470px; }
.phone {
  position: absolute; right: -16px; top: 24px; width: 236px;
  border-radius: 34px; background: #1B2340; padding: 9px;
  box-shadow: 0 10px 28px rgba(27, 35, 64, .12);
}
.phone-screen { border-radius: 26px; background: #FFFFFF; overflow: hidden; padding: 16px 14px 12px; }
.phone-title { font-size: 11.5px; font-weight: 700; margin-bottom: 14px; }
.phone-chat { display: flex; flex-direction: column; gap: 10px; }
.bub-q {
  align-self: flex-end; max-width: 86%; background: #6C7BF5; color: #FFFFFF;
  border-radius: 14px 14px 4px 14px; padding: 9px 12px; font-size: 11px; line-height: 1.65;
}
.bub-a {
  max-width: 90%; background: #F1F2F8; border-radius: 14px 14px 14px 4px;
  padding: 9px 12px; font-size: 11px; line-height: 1.7; color: var(--ink);
}
.phone-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #E6E8F2; border-radius: 999px;
  padding: 6px 6px 6px 13px; margin-top: 16px;
}
.phone-input span { flex: 1; font-size: 9.5px; color: var(--faint); }
.phone-input i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.phone-tabs { display: flex; justify-content: space-between; padding: 12px 6px 2px; color: var(--faint); }
.phone-tabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; }
.phone-tabs .on { color: var(--brand); }

.float-card {
  position: absolute; left: -48px; bottom: -60px; width: 320px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.float-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.float-card-head i {
  width: 36px; height: 36px; border-radius: 11px; background: #EEF0FE;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.float-card-head b { font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.ticks { display: flex; flex-direction: column; gap: 9px; }
.ticks span { display: flex; gap: 9px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.ticks svg { flex-shrink: 0; margin-top: 5px; }

/* ══ 4つのポイント ══ */
.points { padding: 88px 0 72px; text-align: center; }
.points h2 { margin: 0 0 48px; font-size: 30px; font-weight: 700; }
.points-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.point { padding: 0 28px; border-right: 1px solid var(--line); }
.point:last-child { border-right: 0; }
.point i {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.point b { display: block; font-size: 16.5px; font-weight: 700; margin-bottom: 12px; }
.point p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted); }
.ic-purple { background: #EEF0FE; }
.ic-blue { background: #E9F1FE; }
.ic-green { background: #E7F6EE; }
.ic-orange { background: #FDEFE7; }

/* ══ ダッシュボード ══ */
.dash-outer { padding-bottom: 88px; }
.dash {
  background: var(--panel); border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px;
  padding: 44px 48px 0; align-items: center;
}
/* 端末はカード下端で切り落とす。全体を写さず「まだ続く」ことを見せる */
.dash-visual {
  align-self: end; height: 510px; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
}
.kicker { font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 14px; }
.dash h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.5; font-weight: 700; }
.dash p { margin: 0 0 26px; font-size: 14px; line-height: 1.95; color: var(--muted); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line3); background: #FFFFFF; border-radius: 999px;
  padding: 13px 24px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  transition: border-color .18s ease;
}
.btn-ghost:hover { border-color: var(--brand); }

/* 保護者エリアの実画面モック(アプリ本体と同じ 生成り・罫線のみ・影なし) */
.ui-phone {
  width: 300px; margin: 0 auto;
  border-radius: 38px; background: #1B2340; padding: 10px;
  box-shadow: 0 10px 28px rgba(27, 35, 64, .12);
}
.ui-phone-screen {
  border-radius: 29px; background: #FAF7F1; color: #221F1A; overflow: hidden;
  font-size: 13px; line-height: 1.7;
}
.ui-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 20px 16px 12px; border-bottom: 1px solid #EBE6DC;
}
.ui-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .14em; color: #A39C90;
}
.ui-title { font-size: 15px; font-weight: 700; margin-top: 2px; }
.ui-exit {
  border: 1px solid #E0D9CB; border-radius: 999px; padding: 5px 11px;
  font-size: 10.5px; color: #57524A; white-space: nowrap;
}
.ui-scroll { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 20px; }
.ui-group-t {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .14em; color: #A39C90; padding-bottom: 8px;
}

.ui-stats { display: flex; border-top: 1px solid #EBE6DC; border-bottom: 1px solid #EBE6DC; }
.ui-stats > div { flex: 1; padding: 11px 0; }
.ui-stats b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.ui-stats b i { font-style: normal; font-size: 10px; font-weight: 400; color: #A39C90; margin-left: 3px; }
.ui-stats span { display: block; font-size: 9.5px; color: #A39C90; margin-top: 2px; }

.ui-btns { display: flex; gap: 8px; margin-top: 12px; }
.ui-btn {
  flex: 1; text-align: center; padding: 10px; border-radius: 9px;
  background: #221F1A; color: #FAF7F1; font-size: 12px; font-weight: 700;
}

.ui-rows { border-top: 1px solid #EBE6DC; }
.ui-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid #EBE6DC; font-size: 12.5px;
}
.ui-row em {
  display: block; font-style: normal; font-size: 9.5px;
  color: #A39C90; margin-top: 2px; line-height: 1.6;
}
.ui-chev { color: #B5AEA1; flex-shrink: 0; }

/* ══ 写真 + 使い方 ══ */
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 88px; }
.howto-photo {
  position: relative; height: 300px; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.howto-photo img { width: 100%; height: 100%; object-fit: cover; }
.howto-body { background: var(--panel); border-radius: 20px; padding: 36px 40px; }
.howto-body h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.55; font-weight: 700; }
.steps { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.steps > div { display: flex; gap: 14px; }
.steps i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand);
  color: #FFFFFF; font-size: 12px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.steps p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* ══ 料金 ══ */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-bottom: 88px; }
.price h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.5; font-weight: 700; }
.price > div > p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--muted); }
.price-card {
  border: 1px solid var(--line); border-radius: 20px; padding: 32px 34px;
  background: #FFFFFF; box-shadow: var(--shadow-sm);
}
/* 金額と単位は、途中で改行させず塊ごと折り返す */
.price-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.price-amt b { font-size: 36px; font-weight: 700; white-space: nowrap; }
.price-amt span { font-size: 13px; color: var(--soft); white-space: nowrap; }
.price-per { font-size: 12.5px; color: var(--soft); margin-top: 6px; }
.price-card .ticks { margin-top: 22px; }
.price-card .ticks span { font-size: 13.5px; }

/* ══ 保護者向けの説明 ══ */
.parents { padding-bottom: 88px; }
.parents h2 { margin: 0 0 20px; font-size: 26px; font-weight: 700; }
.parents p { margin: 0 0 16px; max-width: 760px; font-size: 14px; line-height: 2.0; color: var(--muted); }
.parents p:last-child { margin-bottom: 0; }
.parents strong { color: var(--ink); font-weight: 700; }
.parents-link a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.parents-link a:hover { color: var(--brand-dark); }

/* ══ FAQ ══ */
.faq { padding-bottom: 88px; }
.faq h2 { margin: 0 0 24px; font-size: 26px; font-weight: 700; }
.faq-list { border-top: 1px solid var(--line); max-width: 840px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 0; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--faint); font-weight: 400; font-size: 19px; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0; padding-bottom: 20px; font-size: 13.5px; line-height: 1.95; color: var(--muted); }

/* ══ 最終CTA ══ */
.final-outer { padding-bottom: 40px; }
.final {
  border-radius: 24px;
  background: #1B2340;
  padding: 48px; display: grid; grid-template-columns: 220px 1fr 200px;
  gap: 36px; align-items: center; color: #FFFFFF;
}
.final-phone { border-radius: 28px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 8px; }
.final-phone > div {
  border-radius: 22px; background: rgba(255,255,255,.12); height: 230px;
  display: flex; align-items: center; justify-content: center;
}
.final-phone img { width: 72px; height: 72px; border-radius: 20px; }
.final h2 { margin: 0 0 14px; font-size: 30px; font-weight: 700; }
.final p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,.86); }
.final .store-badge { background: #FFFFFF; color: #1B2340; }
.final .store-note { color: rgba(255,255,255,.8); }
.final-qr {
  display: block; background: #FFFFFF; border-radius: 16px; padding: 18px;
  text-align: center; color: var(--ink);
  transition: transform .18s ease;
}
.final-qr:hover { transform: translateY(-2px); }
.final-qr b { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 10px; }
.final-qr .code { width: 140px; height: 140px; margin: 0 auto; }
.final-qr small { display: block; font-size: 10px; color: var(--faint); margin-top: 8px; }

/* ══ フッター ══ */
.privacy-line {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--faint); padding-bottom: 40px; font-size: 12px; text-align: center;
}
footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; gap: 24px; align-items: center; padding-top: 24px; padding-bottom: 36px; flex-wrap: wrap; }
footer a { font-size: 12.5px; color: var(--muted); }
footer a:hover { color: var(--brand); }
footer .cr { font-size: 11.5px; color: var(--faint); margin-left: auto; }

/* ══ SOS通知メールの再現(実際に送信されるテンプレートと同一内容) ══ */
/* スクリーンショット画像ではなくHTMLで再現する。拡大しても粗れず、
   モバイルでも読め、実物と内容がずれない(誇張にならない)ため。 */
.mail-outer { padding-bottom: 88px; }
.sos-head { max-width: 800px; margin: 0 0 44px; }
.sos-head h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.5; font-weight: 700; }
.mail-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.95; color: var(--muted); }
.mail-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px;
  align-items: start;
}

/* 届け方の3原則 */
.sos-points { display: flex; flex-direction: column; gap: 18px; }
.sos-point {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px;
}
.sos-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: #FFFFFF; border: 1px solid var(--line2);
  border-radius: 999px; padding: 3px 11px; line-height: 1.7;
}
.sos-point.now .sos-tag { color: #B4551F; border-color: #EBDCCE; }
.sos-point h3 { margin: 11px 0 8px; font-size: 15.5px; font-weight: 700; line-height: 1.75; }
.sos-point p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--muted); }

/* 例外(家庭内の虐待が疑われる場合) */
.sos-note {
  margin-top: 44px; border-top: 1px solid var(--line2);
  padding: 32px 0 0;
}
.sos-note-kicker { font-size: 12px; font-weight: 700; color: var(--brand); margin-bottom: 8px; }
.sos-note h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.75; }
.sos-note p { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.95; color: var(--muted); }
/* 189（児童相談所）だけは電話発信できるようにする */
.sos-note a[href^="tel:"] { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

.mail-mock {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #FFFFFF; box-shadow: var(--shadow-sm);
}
.mail-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.mail-subject { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
/* 送信元は実際のメールアプリと同じく1行で省略する（狭い幅で不自然に折り返さない） */
.mail-from {
  font-size: 11.5px; color: var(--soft); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 本文はアプリと同じ生成り基調(実物のメールの見た目) */
.mail-body { background: #FAF7F1; color: #221F1A; padding: 22px 24px; }
.mail-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .16em; color: #A39C90;
}
.mail-title { font-size: 16px; font-weight: 700; margin: 6px 0 12px; }
.mail-body p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.9; color: #3E3A33; }

.mail-quote {
  border-left: 2px solid #9A5B3B; padding: 2px 0 2px 14px;
  display: flex; flex-direction: column; gap: 12px; margin: 16px 0;
}
.mail-msg { font-size: 12.5px; line-height: 1.8; color: #221F1A; }
.mail-msg.ai { color: #57524A; }
.mail-msg span {
  display: block; font-size: 10px; color: #A39C90; margin-bottom: 2px;
}
.mail-foot {
  border-top: 1px solid #EBE6DC; padding-top: 12px;
  font-size: 10.5px !important; color: #8A8377 !important; margin-bottom: 0 !important;
}

@media (max-width: 1080px) {
  .mail-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* スマホ向けの調整は上部の @media (max-width: 720px) にまとめている */


/* ══ レスポンシブ ══ */
@media (max-width: 1080px) {
  :root { --pad: 32px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; padding-bottom: 96px; }
  /* 縦積みでは文字が写真に重なって濁るため、写真はセクション背景から外す。
     写真は ::before の角丸ブロックとして独立させ、端末モックだけをその上に重ねる。
     白カードは写真の下に流す(重ねると顔を隠してしまうため) */
  .hero { background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FD 100%); }
  .hero-visual { height: auto; margin-top: 48px; position: relative; }
  .hero-visual::before {
    content: ''; display: block; height: 400px; border-radius: 24px;
    background: url('/novus/assets/hero-bg.jpg') center 24% / cover no-repeat;
  }
  /* モックはHTML製のため width を狭めると中身が折り返して縦に伸びる。
     transform で縦横比ごと縮小し、右上を基準に写真内へ収める */
  /* 被写体(顔)は写真の中央右にいるため、モックは余白側=左に置く */
  .phone { left: 16px; right: auto; top: 14px; bottom: auto; transform: scale(.82); transform-origin: top left; }
  .float-card { position: static; left: auto; bottom: auto; width: 100%; margin-top: 16px; }
  /* 1カラムになり横幅が余るので、要点の折り返し制限は外す */
  .hero-points > div { max-width: none; }
  .points { padding-top: 88px; }
  .points-grid { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .point:nth-child(2) { border-right: 0; }
  .dash, .price, .howto { grid-template-columns: 1fr; }
  .dash { padding: 36px 36px 0; gap: 28px; }
  .dash-visual { height: 300px; }
  .final { grid-template-columns: 1fr; text-align: center; }
  .final-phone, .final-qr { max-width: 260px; margin: 0 auto; }
  .final .stores, .final .cta-row { justify-content: center; }
}

/* ══ スマホ ══
   縦積みで間延びしやすいので、余白と字送りを一段締め、
   中央寄せの塊は「アイコン左・文字右」の行に組み替えて画面あたりの情報量を増やす。 */
@media (max-width: 720px) {
  :root { --pad: 20px; }

  /* ナビ */
  .nav-links { display: none; }
  .nav .wrap { gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .nav-cta { padding: 10px 16px; font-size: 12.5px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 17px; }

  /* ヒーロー */
  .crumbs .wrap { padding-top: 10px; }
  .hero .wrap { padding-top: 16px; padding-bottom: 44px; gap: 0; }
  .hero h1 { font-size: 28px; line-height: 1.5; margin-bottom: 16px; }
  .hero h1 span { display: inline; }
  .lead { font-size: 14px; line-height: 1.85; margin-bottom: 22px; }
  .btn-note { font-size: 14px; }
  /* 3つの要点: 2列だと1文字だけ折り返すため、アイコン左の1行に */
  .hero-points { flex-direction: column; gap: 11px; margin-bottom: 22px; }
  .hero-points > div { max-width: none; display: flex; align-items: center; gap: 11px; }
  .hero-points svg { width: 21px; height: 21px; flex-shrink: 0; }
  .hero-points p { margin: 0; font-size: 13.5px; line-height: 1.6; }
  /* 2つ並ぶ幅がなければ、どちらも全幅に揃えて折り返す（幅がばらつかないように） */
  .stores { gap: 10px; }
  .store-badge { flex: 1 1 135px; justify-content: center; padding: 8px 14px; }
  .store-badge b { font-size: 15px; }
  .store-note { margin-top: 12px; }
  .hero-visual { margin-top: 26px; }
  .hero-visual::before { height: 260px; border-radius: 18px; background-position: 15% center; }
  .phone { left: 4px; right: auto; top: 8px; transform: scale(.58); transform-origin: top left; box-shadow: 0 10px 26px rgba(27,35,64,.15); }
  .float-card { margin-top: 12px; padding: 18px 20px; }
  .float-card-head { margin-bottom: 12px; }

  /* 4つのポイント: 中央寄せの縦積みをやめ、アイコン左の行に */
  .points { padding: 52px 0 44px; text-align: left; }
  .points h2, .dash h2, .price h2, .final h2, .sos-head h2 { font-size: 23px; }
  .points h2 { text-align: center; margin-bottom: 26px; }
  .points-grid { grid-template-columns: 1fr; gap: 20px; }
  .point {
    border-right: 0; padding: 0;
    display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 3px;
  }
  .point i { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .point i svg { width: 22px; height: 22px; }
  .point b { grid-column: 2; font-size: 15.5px; margin-bottom: 0; }
  .point p { grid-column: 2; font-size: 13px; line-height: 1.8; }

  /* ダッシュボード */
  .dash-outer { padding-bottom: 52px; }
  .dash { padding: 28px 22px 0; gap: 20px; }
  .dash h2 { margin-bottom: 12px; }
  .dash p { font-size: 13.5px; line-height: 1.85; margin-bottom: 20px; }
  .dash-visual { height: 250px; }
  .ui-phone { width: 272px; }
  .btn-ghost { padding: 11px 20px; font-size: 13px; }

  /* SOS通知メール */
  .mail-outer { padding-bottom: 52px; }
  .sos-head { margin-bottom: 24px; }
  .sos-head h2 { margin-bottom: 14px; }
  .mail-lead { font-size: 13.5px; line-height: 1.85; margin-bottom: 12px; }
  .mail-grid { gap: 22px; }
  /* カードをやめて罫線区切りの一覧に。横幅いっぱい使えるので行数も減る */
  .sos-points { gap: 0; }
  .sos-point {
    background: none; border: 0; border-radius: 0; padding: 16px 0 18px;
    border-top: 1px solid var(--line2);
  }
  .sos-point:first-child { border-top: 0; padding-top: 0; }
  .sos-point h3 { font-size: 15px; margin: 9px 0 6px; }
  .sos-point p { font-size: 12.5px; line-height: 1.85; }
  .sos-note { margin-top: 28px; padding-top: 24px; }
  .sos-note h3 { font-size: 15.5px; }
  .sos-note p { font-size: 13px; line-height: 1.85; }
  .mail-body { padding: 18px 16px; }
  .mail-subject { font-size: 12.5px; }

  /* はじめかた */
  .howto { gap: 16px; padding-bottom: 52px; }
  .howto-photo { height: 200px; }
  .howto-body { padding: 24px 22px; }
  .howto-body h2 { font-size: 21px; margin-bottom: 12px; }
  .howto-body h2 br { display: none; }
  .steps { gap: 12px; margin-top: 18px; }
  .steps p { font-size: 13px; line-height: 1.8; }

  /* 料金 */
  .price { gap: 24px; padding-bottom: 52px; }
  .price h2 { margin-bottom: 12px; }
  .price > div > p { font-size: 13.5px; line-height: 1.85; }
  .price-card { padding: 24px 20px; }
  .price-amt b { font-size: 29px; }
  .price-amt span { font-size: 12.5px; }
  .price-per { font-size: 12px; margin-top: 8px; }
  .price-card .ticks { margin-top: 18px; }
  .price-card .ticks span { font-size: 13px; }

  /* 保護者向けの説明 */
  .parents { padding-bottom: 52px; }
  .parents h2 { font-size: 21px; margin-bottom: 14px; }
  .parents p { font-size: 13px; line-height: 1.9; margin-bottom: 12px; }

  /* FAQ */
  .faq { padding-bottom: 52px; }
  .faq h2 { font-size: 23px; margin-bottom: 16px; }
  .faq summary { padding: 15px 0; font-size: 14.5px; }
  .faq p { font-size: 13px; line-height: 1.85; padding-bottom: 16px; }

  /* 最終CTA: 空の端末枠とQRは、スマホでは意味がないので出さない */
  .final-outer { padding-bottom: 28px; }
  .final { padding: 32px 22px; gap: 0; }
  .final-qr { display: none; }
  .final-phone {
    width: 60px; max-width: none; margin: 0 auto 16px;
    background: none; border: 0; padding: 0;
  }
  .final-phone > div { height: auto; background: none; border-radius: 0; }
  .final-phone img { width: 60px; height: 60px; }
  .final h2 { margin-bottom: 12px; }
  .final p { font-size: 13.5px; line-height: 1.85; margin-bottom: 20px; }
}

/* 小さめの端末。ロゴとCTAが1行に収まらなくなるので、両方を一段小さく */
@media (max-width: 420px) {
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 16px; }
  .nav .wrap { gap: 8px; }
  .nav-cta { padding: 9px 13px; font-size: 11.5px; }
}