@charset "UTF-8";
/*
  shokei.nodavis.com (事業承継の相談) landing page: copied from ai-site/assets/css/lp.css on 2026-11-13 and kept identical in layout,
  colours and typefaces, because the user asked for the same design as the AI secretary page (only the mascot differs).
  Styles only this page needs are at the end ("Succession sections").
*/

:root {
  color-scheme: light dark;
  --navy: #1a2b5e;
  --teal: #1a8c8c;
  --page: #e6eae7;
  --grid-line: rgb(26 43 94 / 8%);
  --bg: #f7f8f6;
  --card: #ffffff;
  --text: #252d35;
  --muted: #57616b;
  --line: #cdd3d4;
  --ink: #1c2430;
  --accent: var(--teal);
  --accent-ink: #126c6c;
  --accent-soft: #dcefed;
  --dark: var(--navy);
  --on-dark: #f7f8f6;
  --on-dark-muted: #c6cee3;
  --gold: #e0a526;
  --error: #b3261e;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-latin: Inter, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --column: 460px;
  --pad: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d1217;
    --grid-line: rgb(255 255 255 / 5%);
    --bg: #141a21;
    --card: #1c242d;
    --text: #edf0f3;
    --muted: #b6bfc8;
    --line: #46515d;
    --ink: #edf0f3;
    --accent: #75ceca;
    --accent-ink: #75ceca;
    --accent-soft: #1f3a3b;
    --dark: #0b1630;
    --error: #ffb4ab;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body {
  margin: 0; color: var(--text); font: 500 16px/1.9 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
  /* The graph-paper backdrop only shows beside the column on wider screens. */
  background-color: var(--page);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Break Japanese at phrase boundaries where the browser supports it (Chrome/Edge), so short lines don't split a word like 見に／くい. */
h1, h2, h3, p, li, summary { word-break: auto-phrase; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 900; line-height: 1.55; letter-spacing: .03em; overflow-wrap: normal; }
/* Section headings use the serif, as on the reference, so they stand apart from the heavy sans text around them. */
h2 { font-family: var(--font-heading); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
svg.ph { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 30; padding: 10px 20px; border-radius: 999px; background: var(--card); color: var(--accent-ink); font-weight: 700; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---------- the column ---------- */
.column { position: relative; width: 100%; max-width: var(--column); margin-inline: auto; min-height: 100vh; background: var(--bg); }
@media (min-width: 500px) {
  .column { border-inline: 2px solid var(--ink); box-shadow: 0 0 60px rgb(26 43 94 / 12%); }
}

/* ---------- pill buttons ---------- */
.pill {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 62px; padding: 10px 30px; border-radius: 999px;
  border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--teal), 0 10px 22px rgb(26 140 140 / 32%);
  background: linear-gradient(135deg, #1f9c99, #1a8c8c 55%, #146f6f);
  /* 19px bold counts as large text, so white on this teal meets contrast. */
  color: #fff; font-size: 19px; font-weight: 900; line-height: 1.4; text-align: center;
}
.pill > span { display: grid; }
.pill small { font-size: 13px; font-weight: 700; opacity: .92; }
.pill .ph { font-size: 22px; }
.pill-sm { min-height: 44px; padding: 6px 18px; gap: 8px; font-size: 15px; border-width: 2px; box-shadow: 0 0 0 2px var(--teal); }
.pill-sm .ph { font-size: 16px; }
.pill-ghost { background: var(--card); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-ink); }
@media (hover: hover) {
  .pill:hover { filter: brightness(1.08); }
  .pill-ghost:hover { background: var(--accent-soft); filter: none; }
}

/* ---------- header and tags ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 12px 0; padding: 10px 10px 10px 18px; border-radius: 18px;
  background: var(--dark); border: 2px solid var(--teal);
}
.brand { display: grid; gap: 2px; width: 120px; color: var(--on-dark); }
.brand span { font-size: 11px; letter-spacing: .14em; color: var(--on-dark-muted); line-height: 1.4; }
/* Header shows the service name alone, like the side panel (user request); the company name stays in the footer. */
.brand-name { width: auto; }
.brand-name span { color: var(--on-dark); font: 900 22px/1.3 var(--font-body); letter-spacing: .06em; }

.tags { display: flex; overflow: hidden; padding: 12px 0; border-bottom: 2px solid var(--ink); }
.tags-track { display: flex; flex-shrink: 0; gap: 8px; padding-right: 8px; }
.tags-track li { padding: 3px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ---------- hero ---------- */
.hero { padding: 16px 14px 8px; }
.hero-card {
  position: relative; overflow: hidden; padding: 26px var(--pad) 0;
  border: 2px solid var(--ink); border-radius: 26px;
  background-color: var(--card);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.offer-tag { display: inline-block; margin-top: 14px; padding: 2px 16px; border-radius: 999px; background: var(--gold); color: #2a2104; font-weight: 700; letter-spacing: .06em; }
/* Sized so each line of the headline stays on one line down to 360px wide; the em accent is 1.5x. */
.hero h1 { margin-top: 12px; font-size: clamp(26px, 7.6vw, 36px); font-weight: 900; line-height: 1.5; letter-spacing: .02em; }
.hero h1 em, .side-catch em { font-style: normal; color: var(--accent-ink); font-size: 1.5em; line-height: 1; letter-spacing: 0; }
.tax-note { font-size: .45em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hero-sub { margin-top: 14px; color: var(--muted); }
.hero-visual { position: relative; margin-top: 22px; padding-right: 72px; }
.hero-device { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
.hero-mascot { position: absolute; right: -10px; bottom: 6px; width: 118px; }
.hero-visual figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.hero-actions { display: grid; gap: 14px; margin-top: 20px; }
.hero-band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px calc(var(--pad) * -1) 0; padding: 16px var(--pad); background: var(--dark);
}
.hero-band img { width: 140px; }
.hero-band p { color: var(--on-dark-muted); font: 800 11px/1.5 var(--font-latin); letter-spacing: .16em; text-align: right; }

/* ---------- sections ---------- */
.sec { padding: 64px var(--pad); }
.sec-dark { background: var(--dark); color: var(--on-dark); --muted: var(--on-dark-muted); }
.sec-tint { background: var(--accent-soft); }
.sec-head { margin-bottom: 30px; }
.sec-label { display: flex; align-items: baseline; gap: 10px; color: var(--accent-ink); font: italic 900 22px/1.2 var(--font-latin); letter-spacing: .02em; }
.sec-label span { font-style: normal; font-size: 14px; color: var(--muted); }
.sec-dark .sec-label { color: #75ceca; }
.sec-head h2 { margin-top: 10px; font-size: clamp(26px, 7vw, 30px); }
.sec-head > p:last-child:not(.sec-label) { margin-top: 14px; color: var(--muted); }

.pain-list { display: grid; gap: 14px; }
.pain-list li { display: flex; align-items: center; gap: 16px; padding: 18px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; }
.pain-list .ph { font-size: 34px; color: var(--accent-ink); }
.industry-line { margin-top: 22px; color: var(--muted); }

.steps { display: grid; gap: 34px; counter-reset: step; }
.steps li { position: relative; padding: 22px; border-radius: 18px; background: var(--card); color: var(--text); --muted: #57616b; }
/* A dashed connector between cards reads as "and then", like the reference flow. */
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -30px; height: 26px; border-left: 3px dashed #75ceca; }
.step-number { display: block; color: var(--teal); font: italic 900 40px/1 var(--font-latin); }
.steps h3 { margin-top: 6px; font-size: 22px; }
.steps p { margin-top: 6px; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .steps li { --muted: #b6bfc8; }
  .step-number { color: #75ceca; }
}




.faq-list details { border-bottom: 2px solid var(--line); }
.faq-list details:first-child { border-top: 2px solid var(--line); }
.faq-list summary { position: relative; display: flex; gap: 12px; padding: 18px 34px 18px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list details p::before { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 900 16px/1 var(--font-latin); }
.faq-list summary::before { content: "Q"; background: var(--accent-ink); color: var(--card); }
.faq-list summary::after { content: "+" / ""; position: absolute; right: 4px; top: 16px; color: var(--accent-ink); font-size: 24px; line-height: 1.2; }
.faq-list details[open] summary::after { content: "−" / ""; }
.faq-list details p { display: flex; gap: 12px; padding-bottom: 20px; color: var(--muted); }
.faq-list details p::before { content: "A"; border: 2px solid var(--accent-ink); color: var(--accent-ink); }

.closing { padding: 24px 14px 72px; }
.closing-card { position: relative; padding: 34px var(--pad) 30px; border: 2px solid var(--ink); border-radius: 26px; background: var(--card); text-align: center; }
.closing-mascot { width: 140px; margin: -4px auto 10px; }
.closing .sec-label { justify-content: center; }
.closing h2, .closing h1 { margin-top: 10px; font-size: clamp(26px, 7vw, 30px); }
.closing-card > p:not(.sec-label):not(.contact-note) { margin-top: 12px; }
.closing .pill { width: 100%; margin-top: 24px; }
.contact-note { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: left; }

.line-steps { display: grid; gap: 10px; margin-top: 24px; text-align: left; counter-reset: line-step; }
.line-steps li { position: relative; padding-left: 42px; counter-increment: line-step; }
.line-steps li::before {
  content: counter(line-step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-ink); color: var(--card); font: italic 900 15px/1 var(--font-latin);
}
.inline-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* The form sits behind a toggle under the LINE steps: a real second option, but LINE stays the first thing people see. */
.form-alt { margin-top: 24px; padding-top: 22px; border-top: 2px dashed var(--line); text-align: left; }
.form-alt summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 20px;
  border: 2px solid var(--line); border-radius: 999px; font-weight: 700; cursor: pointer; list-style: none; }
.form-alt summary::-webkit-details-marker { display: none; }
.form-alt summary::after { content: "+" / ""; color: var(--accent-ink); font: 900 24px/1 var(--font-latin); }
.form-alt[open] summary::after { content: "−" / ""; }
.form-alt summary:hover { border-color: var(--accent-ink); }
/* ---------- contact form ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-form { display: grid; gap: 22px; margin-top: 28px; text-align: left; }
.form-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field > label, .form-field > legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; font-weight: 700; line-height: 1.6; }
.field-status { padding: 1px 9px; border-radius: 999px; background: var(--accent-ink); color: var(--card); font-size: 12px; font-weight: 700; line-height: 1.7; }
.field-status.is-optional { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.contact-form input:not([type="radio"], [type="checkbox"]), .contact-form textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px;
  /* 16px keeps iOS Safari from zooming the page when a field gets focus. */
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}
.contact-form textarea { resize: vertical; line-height: 1.7; }
.contact-form ::placeholder { color: var(--muted); opacity: 1; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--accent-ink); outline-offset: 2px; }
.contact-form [aria-invalid="true"]:not([type="radio"], [type="checkbox"]) { border-color: var(--error); }
.field-hint { font-size: 14px; color: var(--muted); }
.field-error, .form-status { color: var(--error); font-size: 14px; font-weight: 700; }
.radio-options { display: grid; gap: 8px; }
.choice-label { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.choice-label:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); }
.choice-label input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--accent-ink); }
.privacy-choice { align-items: flex-start; cursor: default; }
.privacy-choice input { margin-top: 5px; }
.privacy-choice label { cursor: pointer; }
.privacy-choice .field-status { display: inline-block; margin-left: 8px; white-space: nowrap; }
.form-submit { display: grid; }
.form-status:not(:empty) { margin-bottom: 14px; }
.form-submit .pill { width: 100%; margin-top: 0; font-family: inherit; cursor: pointer; }
.form-submit .contact-note { margin-top: 14px; }

/* ---------- AI secretary sections ---------- */
/* A neutral chat mock: it shows the conversation without copying any messaging app's interface. */
/* The chat needs the full width to stay readable, so the mascot sits under its bottom-right corner instead of beside it. */
.hero-visual-chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-right: 0; }
.hero-visual-chat .chat-window { grid-column: 1 / -1; padding-bottom: 54px; }
.chat-window { display: grid; gap: 10px; padding: 14px 14px 18px; border: 2px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
.chat-head { padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 14px; font-weight: 900; text-align: center; }
.msg { max-width: 92%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.7; }
/* Fixed colours: the dark-mode accent is a light teal, which white text would not read on. */
.msg-me { justify-self: end; background: #126c6c; color: #fff; border-bottom-right-radius: 4px; }
.msg-ai { justify-self: start; background: var(--bg); border: 2px solid var(--line); border-bottom-left-radius: 4px; }
.hero-visual-chat .hero-mascot { position: relative; z-index: 1; right: auto; bottom: auto; grid-column: 2; grid-row: 2; width: 96px; margin: -70px -10px 0 0; }
.hero-visual-chat figcaption { grid-column: 1 / -1; margin-top: 4px; }
.msg-ai { max-width: 86%; }

.feature-list { display: grid; gap: 14px; }
.feature-list li { padding: 20px; border-radius: 18px; background: var(--card); color: var(--text); --muted: #57616b; }
.feature-top { display: flex; align-items: center; justify-content: space-between; }
.feature-top .ph { font-size: 30px; color: var(--accent-ink); }
.feature-list h3 { margin-top: 8px; font-size: 19px; }
.feature-list p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.feature-list .feature-callout { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
@media (prefers-color-scheme: dark) { .feature-list li { --muted: #b6bfc8; } }

.self-flow { display: grid; gap: 22px; margin-top: 20px; }
.self-flow li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); font-weight: 700; }
.self-flow li + li::before { content: "↓" / ""; position: absolute; top: -23px; left: 24px; color: var(--accent-ink); font-weight: 900; }
.self-flow-num { color: var(--accent-ink); font: italic 900 22px/1 var(--font-latin); }
.self-body { display: grid; gap: 14px; }
.muted-text { color: var(--muted); }

/* Confidentiality is the first question for licensed professionals, so this card carries the page's strongest frame. */
.data-panel { padding: 24px var(--pad); border: 2px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 6px 6px 0 var(--teal); }
.data-points { display: grid; gap: 18px; }
.data-points li + li { padding-top: 16px; border-top: 2px solid var(--line); }
.data-num { color: var(--accent-ink); font: italic 900 30px/1 var(--font-latin); }
.data-points h3 { margin-top: 8px; font-size: 19px; }
.data-points p { margin-top: 4px; color: var(--muted); font-size: 15px; }

.cannot-list li { display: flex; align-items: flex-start; gap: 14px; padding-block: 16px; border-top: 1px solid rgb(255 255 255 / 22%); font-weight: 700; }
.cannot-list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 22%); }
.cannot-list .ph { margin-top: 6px; font-size: 20px; color: #75ceca; }
.cannot-note { margin-top: 18px; color: var(--on-dark-muted); font-size: 15px; }

/* On a light section the flow cards need their own outline (on hp.nodavis.com they sit on navy). */
.sec:not(.sec-dark) .steps li { border: 2px solid var(--ink); }
.sec:not(.sec-dark) .steps li:not(:last-child)::after { border-left-color: var(--accent); }

.founder-role { color: var(--muted); }
.credential { margin-top: 4px; color: var(--accent-ink); font-size: 20px; font-weight: 900; }
.career-list { margin-top: 10px; }
.career-list li { padding-left: 1.2em; text-indent: -1.2em; }
.career-list li::before { content: "・"; }
.founder-statement { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--ink); font: 900 20px/1.8 var(--font-heading); }
.text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 4px; border-bottom: 2px solid var(--accent-ink); color: var(--accent-ink); font-weight: 700; }

.site-footer { display: grid; gap: 22px; padding: 40px var(--pad) 120px; background: var(--dark); color: var(--on-dark); }
.footer-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.footer-brand img { width: 40px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.site-footer small { color: var(--on-dark-muted); }
@media (hover: hover) { .footer-nav a:hover { text-decoration: underline; } }

/* ---------- floating contact (phones and tablets; site.js decides when it shows) ---------- */
.floating-contact {
  position: fixed; z-index: 20; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(var(--column) - 40px), calc(100% - 32px));
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 8px 20px;
  overflow: hidden; isolation: isolate; border-radius: 999px; border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--teal), 0 10px 22px rgb(0 0 0 / 22%);
  background: linear-gradient(135deg, #1f9c99, #1a8c8c 55%, #146f6f); color: #fff; font-size: 19px; font-weight: 900;
}
.floating-contact .ph { font-size: 20px; }
.floating-contact.is-hidden:not(:focus-within) { visibility: hidden; }
@media (max-width: 760px) {
  /* Hide only once JS manages the button, so it stays reachable if site.js fails. */
  .floating-contact.is-managed:not(.is-mobile-visible):not(:focus-within) { visibility: hidden; }
}

/* ---------- side panels (wide screens) ---------- */
.side { display: none; }
@media (min-width: 1100px) {
  .side { position: fixed; top: 0; bottom: 0; z-index: 5; display: grid; place-items: center; width: calc((100% - var(--column)) / 2); padding: 32px; }
  .side-left { left: 0; }
  .side-right { right: 0; }
  .side-inner { width: min(100%, 320px); }
  .side-left .side-inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
  .side-brand { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 18px 26px; border: 2px solid var(--teal); border-radius: 18px; background: var(--dark); color: var(--on-dark-muted); font-size: 13px; letter-spacing: .14em; }
  .side-brand img { width: 170px; }
  /* The column header already shows the Nodavis logo, so the side panel names only the service (user request). */
  .side-brand-name span { color: var(--on-dark); font: 900 30px/1.3 var(--font-body); letter-spacing: .08em; }
  .side-catch { font: 900 21px/1.6 var(--font-heading); letter-spacing: .02em; }
  .side-catch em { font-size: 1.35em; }
  .side-catch small { font-size: 13px; font-weight: 500; color: var(--muted); font-family: var(--font-body); }
  .side-mascot { width: 130px; }
  .side-left .pill { width: 100%; }

  .index-title { font: italic 900 38px/1 var(--font-latin); letter-spacing: 0; }
  .index-list { margin-top: 22px; display: grid; gap: 4px; }
  .index-list a { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; color: var(--muted); font-weight: 700; }
  .index-list span { width: 1.6em; color: var(--muted); font: 800 14px/1 var(--font-latin); }
  .index-list a[aria-current="true"] { color: var(--text); }
  .index-list a[aria-current="true"] span { color: var(--accent-ink); }
  .index-list a[aria-current="true"]::after { content: ""; flex: 1; align-self: center; max-width: 40px; border-top: 2px solid var(--accent); }
  @media (hover: hover) { .index-list a:hover { color: var(--text); } }

  .floating-contact { display: none; }
  .site-footer { padding-bottom: 48px; }
}

/* ---------- motion (all of it switches off with the OS "reduce motion" setting) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .tags-track { animation: tags-scroll 32s linear infinite; }
  @keyframes tags-scroll { to { transform: translateX(-100%); } }

  /* The hero runs on CSS alone so it never waits for JS; short delays keep the main copy and image (the LCP) from being held back. */
  .hero-card > * { animation: lp-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-card > :nth-child(2) { animation-delay: .06s; }
  .hero-card > :nth-child(3) { animation-delay: .12s; }
  .hero-card > :nth-child(4) { animation-delay: .18s; }
  .hero-card > :nth-child(n+5) { animation-delay: .24s; }
  @keyframes lp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .hero-mascot, .side-mascot, .closing-mascot { animation: lp-float 3.6s ease-in-out infinite; }
  @keyframes lp-float { 50% { transform: translateY(-8px); } }

  /* hp.js adds these only to blocks below the first screen, so no JS means no hidden content. */
  .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
  .reveal-pending { opacity: 0; transform: translateY(28px); }

  /* A light sweeps across the contact buttons now and then, to show where to press without moving the button. */
  .pill:not(.pill-ghost)::after, .floating-contact::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgb(255 255 255 / 38%), transparent);
    transform: translateX(-150%) skewX(-20deg);
    animation: lp-shine 5s ease-in-out 1.5s infinite;
  }
  @keyframes lp-shine { 0%, 72% { transform: translateX(-150%) skewX(-20deg); } 92%, 100% { transform: translateX(330%) skewX(-20deg); } }
  .pill, .floating-contact { transition: filter .2s, background-color .2s; }
}
@media (prefers-reduced-motion: reduce) {
  /* Without the loop, show every tag once instead of cutting them off. */
  .tags { flex-wrap: wrap; padding-inline: 12px; }
  .tags-track { flex-wrap: wrap; flex-shrink: 1; gap: 8px; }
  .tags-track[aria-hidden="true"] { display: none; }
}
@media print {
  .reveal-pending { opacity: 1; transform: none; }
  .side, .floating-contact, .tags { display: none; }
}

/* ---------- Succession sections ---------- */
/* "Keep going" vs "hand it on": two cards, stacked in the narrow column. */
.branch-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.branch-card { padding: 22px var(--pad); border: 2px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 6px 6px 0 var(--teal); }
.branch-tag { display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--accent-ink); color: var(--card); font-size: 14px; font-weight: 700; }
.branch-card h3 { margin-top: 10px; font-size: 20px; }
.branch-card ul { margin: 10px 0 0; padding-left: 1.2em; list-style: disc; }
.branch-card li + li { margin-top: 4px; }
.branch-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* The service name here is 7 characters (AI秘書 is 4), so the side panel's 30px would wrap one character onto a second line. */
.side-brand-name span { font-size: 24px; letter-spacing: .04em; white-space: nowrap; }
/* Same reason in the header: keep the name and the LINE button on one line each down to 320px wide. */
.brand-name span { font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
.site-header .pill-sm { white-space: nowrap; }
@media (max-width: 359px) {
  .brand-name span { font-size: 15px; }
  .site-header .pill-sm { padding-inline: 12px; font-size: 14px; }
}