/* ============================================================
   AsetZ marketing-site preview-B — components.css
   Layer 3 of 3: Reusable components (BEM-ish naming)
   Depends on tokens.css + base.css
   ------------------------------------------------------------
   DESIGN: Seline Analytics. One blue (#262EA1) is the only color.
   Cream canvas, white cards w/ 1px Pearl border + 10px radius,
   pill buttons, shadows only on dashboard preview + stat cards.

   COMPONENT INDEX (申し送り用):
     .container          max-1200 中央寄せ + 左右ガター
     .section            縦リズム(112/72px) ラッパ（背景・境界線は変えない）
     .eyebrow            小見出しラベル(英字キャップ・Signal Blue)
     .btn                .btn--primary(Signal Blue塗り)
                         .btn--ghost(白+Pearl border)
                         .btn--dark(charcoal) / .btn--sm
     .pill               チップ/タグ（9999px）
     .highlight          ★署名要素 Blue Highlight Run (#D3D5EC 背景インライン)
     .card               白 + 10px + 1px Pearl border（フラット）
                         .card--pad-sm/lg / .card--flat(角丸4px・stat用)
     .grid .grid-2 .grid-3 .grid-4
     .hero .hero__title .hero__lead .hero__actions .hero__media
     .stat / .stat__label / .stat__value / .stat__sub  （canvas直置きメトリクス）
     .icon-tile          モノクロストロークアイコン枠（Signal Blue or Stone Ink）
     .dashboard-card     ★Hero資産：白+10px+1px+二層シャドウ（唯一のelevation）
     .section-head       セクション見出しブロック
     .nav (header) / .footer
   ============================================================ */

/* ---- Layout container ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Section (vertical rhythm — spacing alone separates) --- */
/* No dividers, no background-color changes between sections.
   The cream canvas + 96-128px breathing room does the work. */
.section {
  padding-block: var(--section-pad-y);
}
.section--tight { padding-block: var(--space-64); }

@media (max-width: 768px) {
  .section { padding-block: var(--section-pad-y-sm); }
}

/* ---- Eyebrow (small uppercase label, Signal Blue) --------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-16);
  /* allow the uppercase label to wrap instead of forcing page overflow on narrow screens */
  flex-wrap: wrap;
  max-width: 100%;
}
.eyebrow i,
.eyebrow svg { width: 14px; height: 14px; }

/* ---- Buttons ---------------------------------------------- */
/* Pill at 9999px. Weight 500 labels. NO shadow on buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .12s ease;
  cursor: pointer;
}
.btn i,
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

/* Primary — Signal Blue fill, white text. The focused conversion moment. */
.btn--primary {
  background-color: var(--accent);
  color: var(--color-pure-white);
  border-color: var(--accent);
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--color-pure-white);
}

/* Ghost — white fill, 1px Pearl border, Stone Ink text. Companion action. */
.btn--ghost {
  background-color: var(--color-pure-white);
  color: var(--text-strong);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  border-color: var(--text-strong);
  color: var(--text-strong);
}
/* ghost icon may carry the blue (icon-stroke role) */
.btn--ghost i,
.btn--ghost svg { color: var(--accent); }

/* Dark — rare charcoal accent for emphasis variation (≤5% of a page) */
.btn--dark {
  background-color: var(--bg-dark);
  color: var(--color-pure-white);
  border-color: var(--bg-dark);
}
.btn--dark:hover {
  background-color: var(--color-stone-ink);
  border-color: var(--color-stone-ink);
  color: var(--color-pure-white);
}

/* Compact nav variant */
.btn--sm {
  font-size: var(--text-body-sm);
  padding: 8px 16px;
}
.btn--sm i,
.btn--sm svg { width: 16px; height: 16px; }

/* ---- Pill / chip / tag ------------------------------------ */
/* Full pill, 1px Pearl border by default — no fill (tags are quiet). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  color: var(--text-body-c);
  background-color: var(--color-pure-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  line-height: 1.4;
}
.pill i,
.pill svg { width: 14px; height: 14px; color: var(--accent); }
/* faint highlight-wash pill — emphasis only, never a CTA */
.pill--wash {
  background-color: var(--color-highlight-wash);
  border-color: transparent;
  color: var(--text-strong);
}

/* ---- Blue Highlight Run (★ SIGNATURE ELEMENT) -------------- */
/* Inline phrase with #D3D5EC wash. NOT a button/link/chip — pure
   emphasis. Use sparingly: max one per headline, two per section.
   Sits inline; one step up in weight, same text color. */
.highlight {
  background-color: var(--color-highlight-wash);
  color: var(--text-strong);
  padding: 0 5px;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Card -------------------------------------------------- */
/* White surface + 10px radius + 1px Pearl border. Flat (no shadow). */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-32);
}
.card--pad-sm { padding: var(--space-24); }
.card--pad-lg { padding: var(--space-40); }

/* Flat data card — 4px radius, no border (in-dashboard stat tiles) */
.card--flat {
  border: none;
  border-radius: var(--radius-input);
  padding: var(--space-16);
}
/* Rare elevated card — uses the dashboard-preview shadow recipe only */
.card--lift {
  box-shadow: var(--shadow-md);
}

.card__title { margin-bottom: var(--space-8); }
.card__text  { color: var(--text-body-c); font-size: var(--text-body); }

/* ---- Grid -------------------------------------------------- */
.grid { display: grid; gap: var(--space-24); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* dense variant: short parallel cards keep 2 columns on mobile so the
     page isn't needlessly tall. Add .grid-3--dense to a short-card grid. */
  .grid-3--dense { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
}
@media (max-width: 400px) {
  .grid-3--dense { grid-template-columns: 1fr; }
}

/* ---- Stat block (feature section, sits on canvas) --------- */
/* No card chrome. Label (slate) + big value (Stone Ink) + sublabel. */
.stat { }
.stat__label {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  color: var(--text-body-c);
  margin-bottom: var(--space-16);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading-lg);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
/* metric trend / accent number can wear the one blue */
.stat__value--accent { color: var(--accent); }
.stat__sub {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--text-body-c);
}
/* small trend indicator (+21%) — Signal Blue, Inter 500 */
.stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  color: var(--accent);
}
.stat__trend i,
.stat__trend svg { width: 12px; height: 12px; }

/* ---- Icon tile (monochrome stroke, Signal Blue or Stone Ink) */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-icon);
  background-color: var(--color-pure-white);
  border: 1px solid var(--hairline);
  color: var(--accent);     /* default: Signal Blue stroke */
  flex-shrink: 0;
}
.icon-tile i,
.icon-tile svg {
  width: 22px; height: 22px;
  stroke-width: 1.75;
  fill: none;               /* monochrome STROKE icons, never filled */
}
/* ink variant — Stone Ink stroke (when blue is spoken elsewhere) */
.icon-tile--ink   { color: var(--text-strong); }
/* washed variant — faint blue tint behind a blue stroke */
.icon-tile--wash  { background-color: var(--color-highlight-wash); border-color: transparent; color: var(--accent); }
/* solid variant — rare, filled Signal Blue tile w/ white icon */
.icon-tile--solid { background-color: var(--accent); border-color: var(--accent); color: var(--color-pure-white); }
.icon-tile--lg { width: 52px; height: 52px; }
.icon-tile--lg i,
.icon-tile--lg svg { width: 26px; height: 26px; }

/* ---- Hero -------------------------------------------------- */
/* Two-row composition. Headline stack + dashboard preview below. */
.hero {
  padding-top: calc(var(--header-h) + var(--space-80));
  padding-bottom: var(--space-96);
  text-align: center;
}
.hero__inner {
  max-width: 760px;
  margin-inline: auto;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(28px, 7vw, var(--text-hero));
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);  /* signature −0.025em @52px */
  color: var(--text-strong);
  overflow-wrap: break-word;
  word-break: normal;
}
.hero__lead {
  margin-top: var(--space-24);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-subhead);
  color: var(--text-body-c);
  max-width: 600px;
  margin-inline: auto;
}
.hero__actions {
  margin-top: var(--space-40);
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
}
.hero__media {
  margin-top: var(--space-64);
  max-width: 1040px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-48)); padding-bottom: var(--space-64); }
  .hero__media { margin-top: var(--space-40); }
}

/* ---- Dashboard preview card (★ Hero asset — the ONE elevation) */
/* White surface, 10px radius, 1px Pearl border, dual-layer floating
   shadow. This + rare stat cards are the entire elevation vocabulary. */
.dashboard-card {
  background-color: var(--color-pure-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md), var(--shadow-accent);
  overflow: hidden;
}
.dashboard-card__bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--hairline);
}
.dashboard-card__dot {
  width: 10px; height: 10px; border-radius: 9999px;
  background-color: var(--color-fog-border);
}
.dashboard-card__body { padding: var(--space-24); }

/* ---- Section heading block (shared) ----------------------- */
.section-head {
  max-width: 680px;
  margin-bottom: var(--space-48);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__lead {
  margin-top: var(--space-16);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--text-body-c);
}

/* ============================================================
   NAV / HEADER (partials/header.html)
   Sits on the cream canvas. Transparent until scroll, then a
   subtle frosted cream surface with the sticky-nav shadow.
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background-color: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav--scrolled {
  background-color: rgba(250, 250, 249, .85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-subtle);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subhead);
}
.nav__brand:hover { color: var(--text-strong); }
.nav__logo {
  width: 22px; height: 22px;
  display: inline-block;
  color: var(--accent);     /* brand mark wears the one blue */
}
/* AsetZ logo image (1040x271 ≒ 3.84:1) — height-based sizing */
.nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
}
@media (max-width: 600px) { .nav__logo-img { height: 24px; } }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-body);
  color: var(--text-body-c);
}
.nav__link:hover { color: var(--text-strong); }
.nav__link--active { color: var(--text-strong); }
.nav__actions { display: flex; align-items: center; gap: var(--space-12); }

/* mobile toggle */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--text-strong);
  border-radius: var(--radius-icon);
}
.nav__toggle i,
.nav__toggle svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-pure-white);
    padding: var(--space-16) var(--gutter) var(--space-24);
    box-shadow: var(--shadow-md);
    border-top: 1px solid var(--hairline-fog);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav[data-open="true"] .nav__links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__link { padding: 14px 4px; border-bottom: 1px solid var(--hairline-fog); }
  .nav__actions .btn { display: none; }       /* CTA lives inside the menu on mobile */
  .nav__links .btn { display: inline-flex; margin-top: var(--space-16); width: 100%; }
  .nav__toggle { display: inline-flex; }
}

/* ============================================================
   FOOTER (partials/footer.html)
   Cream-adjacent surface. One thin Pearl hairline at the top —
   the only structural line on the page (spacing does the rest).
   ============================================================ */
.footer {
  background-color: var(--color-pure-white);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-80) var(--space-40);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-48);
}
.footer__brand-block { max-width: 320px; }
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subhead);
  margin-bottom: var(--space-16);
}
.footer__logo { width: 20px; height: 20px; color: var(--accent); }
.footer__logo-img { height: 30px; width: auto; display: block; }
.footer__desc {
  font-size: var(--text-body-sm);
  color: var(--text-body-c);
  line-height: 1.7;
}
.footer__meta {
  margin-top: var(--space-24);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  line-height: 1.9;
}
.footer__meta dt {
  display: inline-block;
  width: 4.5em;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.footer__meta dd { display: inline; }
.footer__meta-row { display: block; }

.footer__col-title {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-16);
}
.footer__nav { display: flex; flex-direction: column; gap: var(--space-12); }
.footer__nav a {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body-c);
}
.footer__nav a:hover { color: var(--text-strong); }

.footer__bottom {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.footer__copy {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}
.footer__cta { display: inline-flex; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-32); }
  .footer__brand-block { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ---- Reveal-on-scroll helper (used by include.js) --------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   EYECATCH (article / page hero visual)
   A wide hero image that gives each page warmth (people / scene).
   16:9, rounded, sits between the title block and the body.
   Falls back to a soft placeholder until the real image exists.
   ============================================================ */
.eyecatch {
  max-width: 880px;
  margin: var(--space-40) auto 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--hairline);
  /* placeholder look until the real image loads (or if it's missing):
     a soft cream panel with a faint diagonal hatch — never a broken icon */
  aspect-ratio: 16 / 9;
  background-color: var(--color-canvas-cream);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(120,113,108,.04) 0, rgba(120,113,108,.04) 10px,
    transparent 10px, transparent 20px
  );
}
.eyecatch__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* broken/missing image shows no alt-icon box: the figure's own bg shows through */
}
.eyecatch__img:not([src]), .eyecatch__img[src=""] { display: none; }
@media (max-width: 768px) {
  .eyecatch { margin-top: var(--space-32); }
}

/* ============================================================
   DIAGRAM size guards (see DIAGRAM-RULES.md)
   .diagram fills its parent; without a max-width it becomes huge
   inside wide cards/hero. These modifiers cap the width and center
   the figure so it stays balanced against body text.
   ============================================================ */
.diagram { width: 100%; height: auto; display: block; }
.diagram--narrow { max-width: 440px; margin-inline: auto; }  /* 縦フロー・構造図・二重枠 */
.diagram--mid    { max-width: 560px; margin-inline: auto; }  /* 循環図・横フロー */

/* ============================================================
   STEP CAROUSEL (.stepflow)
   PC: even columns side by side with connectors.
   Mobile: horizontal scroll-snap carousel, one card at a time,
   with dot indicators. Pure CSS scroll-snap (JS only updates dots).
   Reusable across pages (進め方/プロセス/フロー).
   ============================================================ */
.stepflow { /* wrapper */ }
.stepflow__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-16);
  align-items: stretch;
}
.stepflow__card {
  background-color: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
.stepflow__card--goal { border-color: var(--accent); }
.stepflow__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background-color: var(--accent); color: var(--color-pure-white);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-body); flex-shrink: 0;
}
/* header row when a card carries an icon tile + number (e.g. 体制の4要素) */
.stepflow__head { display: flex; align-items: center; gap: var(--space-12); }
.stepflow__head .stepflow__no { width: 26px; height: 26px; font-size: var(--text-body-sm); }
/* monochrome stroke icon tile reused from .icon-tile; size guard */
.stepflow__card .icon-tile { width: 40px; height: 40px; }
.stepflow__card--goal .stepflow__no { background-color: var(--accent); }
.stepflow__title { font-size: var(--text-heading-sm); color: var(--text-strong); font-weight: var(--fw-semibold); }
.stepflow__text { font-size: var(--text-body-sm); color: var(--text-body-c); line-height: 1.7; }
.stepflow__keep {
  margin-top: auto;
  font-size: var(--text-body-sm);
  color: var(--text-strong);
}
.stepflow__keep-label {
  display: block; font-size: var(--text-caption); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
/* dots — hidden on desktop (no carousel) */
.stepflow__dots { display: none; }

@media (max-width: 768px) {
  .stepflow__track {
    grid-auto-columns: 84%;          /* one card + peek of next */
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* hide native scrollbar */
    padding-bottom: var(--space-8);
  }
  .stepflow__track::-webkit-scrollbar { display: none; }
  .stepflow__card { scroll-snap-align: center; }
  .stepflow__dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: var(--space-16);
  }
  .stepflow__dot {
    width: 8px; height: 8px; border-radius: 9999px;
    background-color: var(--hairline);
    border: none; padding: 0; cursor: pointer;
    transition: background-color .2s ease, width .2s ease;
  }
  .stepflow__dot--active { background-color: var(--accent); width: 22px; }
  .stepflow__hint {
    display: block; text-align: center; margin-top: var(--space-8);
    font-size: var(--text-caption); color: var(--text-muted);
  }
}
.stepflow__hint { display: none; }   /* hint shown only on mobile */

/* ============================================================
   RESPONSIVE FIGURE (.figimg)
   Wide diagram images that become unreadable when scaled down on
   mobile. On mobile we DON'T shrink: the image keeps a legible size
   and the frame scrolls horizontally (pinch-zoom also works).
   When a mobile-portrait variant exists, use <picture> with the
   media query so the SP source is swapped in automatically.
   ============================================================ */
.figimg { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
  /* scroll frame: wide image stays readable, user scrolls/pinches */
  .figscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card);
  }
  .figscroll .figimg {
    width: auto;
    min-width: 680px;       /* keep labels legible; frame scrolls */
    max-width: none;
  }
  /* if a page provides a portrait SP image via <picture>, it fills width */
  .figimg--has-sp { min-width: 0; width: 100%; }
  .figscroll-hint {
    display: block; text-align: center; margin-top: var(--space-8);
    font-size: var(--text-caption); color: var(--text-muted);
  }
}
.figscroll-hint { display: none; }

/* ============================================================
   SHARED PAGE COMPONENTS (services/index で確立・全ページ共通)
   設計: design-spec/11。枠線で囲わず余白・色差・罫線で構造を出す。
   AIっぽい典型カード（左色バー+塗り箱+影+丸ピル番号）を使わない。
   ============================================================ */

/* ---- ページヘッダー（キャッチコピーなし・Revision型） ----- */
.svc-pagehead {
  padding-top: var(--space-80);
  padding-bottom: var(--space-48);
  border-bottom: 1px solid var(--hairline);
}
.svc-pagehead .eyebrow { justify-content: flex-start; }
.svc-pagehead__sub { /* サービス名の副題（例: 検索エンジン最適化） */
  display: block; margin-top: var(--space-8);
  font-size: var(--text-body); color: var(--text-body-c); font-weight: var(--fw-medium);
}
.svc-pagehead__title {
  margin-top: var(--space-12);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.svc-pagehead__lead {
  margin-top: var(--space-16);
  max-width: 720px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--text-body-c);
}
@media (max-width: 768px) {
  .svc-pagehead { padding-top: var(--space-48); padding-bottom: var(--space-32); }
  .svc-pagehead__title { font-size: var(--text-heading-md); }
}
/* 定義ヘッダー2カラム（左テキスト小さめ＋右ビジュアル大きめ・Revision型の画像メイン） */
.pagehead2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-64); align-items: center; }
.pagehead2__text { min-width: 0; }
.pagehead2__img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-card); display: block; }
@media (max-width: 860px) {
  .pagehead2 { grid-template-columns: 1fr; gap: var(--space-32); }
  .pagehead2__img { aspect-ratio: 16 / 10; }
}

/* ---- CTA: 薄グレー面(.section--alt)上に白カード（色差で分からせる） ---- */
.svc-cta-card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-card);
  padding: var(--space-64) var(--space-48);
  text-align: center;
}
.svc-cta-card .eyebrow { color: var(--accent); justify-content: center; }
.svc-cta-card h2 { color: var(--text-strong); line-break: strict; word-break: keep-all; overflow-wrap: break-word; }
/* 文節区切りで改行（句読点の直後で折り返しやすく・1文字落ち防止） */
.svc-cta-card h2 .wbr { display: inline-block; } @media (max-width:520px){ .svc-cta-card h2 .wbr { display: inline; } }
.svc-cta-card p { color: var(--text-body-c); }
.svc-cta__note { margin-top: var(--space-24); font-size: var(--text-body-sm); color: var(--text-muted); }
.svc-cta-card .btn--ghost {
  background-color: var(--color-offwhite-2);
  color: var(--text-strong);
  border-color: var(--hairline);
}
.svc-cta-card .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.svc-cta-card .btn--ghost i, .svc-cta-card .btn--ghost svg { color: var(--accent); }
@media (max-width: 768px) { .svc-cta-card { padding: var(--space-48) var(--space-24); } }

/* ---- 進め方: 実写 + 開閉ステップ（flow2 / flow-acc） ------ */
.flow2 {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-40);
  align-items: start; max-width: 1000px; margin: 0 auto;
}
.flow2__photo { margin: 0; }
.flow2__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.flow2__cap { margin-top: var(--space-12); font-size: var(--text-body-sm); color: var(--text-muted); text-align: center; }
@media (min-width: 901px) {
  .flow2__photo { position: sticky; top: calc(var(--header-h) + 24px); }
  .flow2__photo .ph-img { min-height: 320px; }
}
.flow-acc { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.flow-acc__item { border-bottom: 1px solid var(--hairline); }
.flow-acc__head {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "no title chev" "no sum chev";
  column-gap: var(--space-16); row-gap: 3px; align-items: center;
  padding: var(--space-24) var(--space-8);
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.flow-acc__no {
  grid-area: no; width: 28px;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: var(--text-subheading);
  color: var(--text-faint); line-height: 1; text-align: center; transition: color .18s;
}
.flow-acc__item[data-open="true"] .flow-acc__no { color: var(--accent); }
.flow-acc__title { grid-area: title; font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.flow-acc__sum { grid-area: sum; font-size: var(--text-body-sm); color: var(--text-body-c); line-height: 1.5; }
.flow-acc__chev { grid-area: chev; width: 20px; height: 20px; color: var(--text-muted); transition: transform .25s; }
.flow-acc__item[data-open="true"] .flow-acc__chev { transform: rotate(180deg); color: var(--accent); }
.flow-acc__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.flow-acc__inner { padding: 0 var(--space-8) var(--space-24) calc(var(--space-8) + 28px + var(--space-16)); }
.flow-acc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.flow-acc__list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-body); color: var(--text-body-c); line-height: 1.6; }
.flow-acc__list li i, .flow-acc__list li svg { width: 16px; height: 16px; color: var(--accent); margin-top: 4px; flex-shrink: 0; }
@media (max-width: 900px) {
  .flow2 { grid-template-columns: 1fr; gap: var(--space-24); }
  .flow2__photo { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 768px) {
  .flow-acc__head { padding: var(--space-16); column-gap: var(--space-12); }
  .flow-acc__sum { display: none; }
  .flow-acc__inner { padding-left: var(--space-16); padding-right: var(--space-16); }
}

/* ---- 一覧（枠なし・下罫線＋余白でグルーピング・Site type型） ---- */
.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-64); row-gap: var(--space-48); max-width: 1040px; margin-inline: auto; }
.svc-item { display: flex; flex-direction: column; gap: var(--space-12); padding-bottom: var(--space-24); border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: border-color .18s; }
.svc-item:hover { border-bottom-color: var(--accent); }
.svc-item__head { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.svc-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; }
.svc-item__icon i, .svc-item__icon svg { width: 24px; height: 24px; }
.svc-item__title { font-size: var(--text-subheading); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0; line-height: 1.3; }
.svc-item__tag { font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em; color: var(--text-body-c); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.svc-item__tag--main { background-color: var(--accent); color: #fff; border-color: var(--accent); }
.svc-item__tag--data { background-color: var(--color-highlight-wash); color: var(--text-strong); border-color: transparent; }
.svc-item__text { font-size: var(--text-body); color: var(--text-body-c); line-height: var(--leading-body); margin: 0; }
.svc-item__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--accent); }
.svc-item__more i, .svc-item__more svg { width: 16px; height: 16px; transition: transform .18s; }
.svc-item:hover .svc-item__more i, .svc-item:hover .svc-item__more svg { transform: translateX(3px); }
@media (max-width: 768px) { .svc-list { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-32); } }

/* ---- 分岐カード（薄グレー面上の白カード・画像付き） ---- */
.svc-start { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-16); text-decoration: none; color: inherit; padding: var(--space-24); background: var(--bg-surface); border-radius: var(--radius-card); transition: transform .18s; }
.svc-start:hover { transform: translateY(-3px); }
.svc-start__cap { font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--text-body-c); line-height: 1.5; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
/* 画像なしのテキストカード（SEOの分岐導線等）はギャップを詰めて間延びさせない */
.svc-start--text { gap: var(--space-12); justify-content: center; min-height: 160px; }
.svc-start--text .svc-start__cap { min-height: 0; }
.svc-start__img { min-height: 0; }
img.svc-start__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }
.svc-start__img .ph-img__icon { width: 24px; height: 24px; }
.svc-start__img .ph-img__label { font-size: var(--text-caption); }
.svc-start__name { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.svc-start__more { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--accent); }
.svc-start__more i, .svc-start__more svg { width: 16px; height: 16px; transition: transform .18s; }
.svc-start:hover .svc-start__more i, .svc-start:hover .svc-start__more svg { transform: translateX(3px); }
.svc-inline-link { color: var(--accent); text-decoration: underline; }
.svc-note { max-width: 760px; margin: var(--space-24) auto 0; text-align: center; font-size: 13px; color: var(--text-body-c); line-height: 1.7; }

/* ============================================================
   TABS（種別切替・Revision参考。非選択=白+枠線/選択=#262EA1濃塗り+白文字、
   選択タブとパネルが地続き）— design-spec/11
   ============================================================ */
/* タブは均一幅（文字数で長さが変わらない）。タブ数に応じて等分。 */
.tabs__nav { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: var(--space-8); position: relative; z-index: 1; }
.tab-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: var(--space-16) var(--space-24);
  background: var(--bg-surface); color: var(--text-body-c);
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  font-size: var(--text-body); font-weight: var(--fw-semibold);
  text-align: center; white-space: nowrap;
  transition: background .15s, color .15s;
}
.tab-btn:hover { color: var(--text-strong); }
.tab-btn[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs__panels {
  border: 1px solid var(--hairline); border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  padding: var(--space-40); margin-top: -1px; background: var(--bg-surface);
}
.tab-panel { display: none; }
.tab-panel[data-active="true"] { display: block; }
@media (max-width: 768px) {
  /* モバイルも均一幅を維持（min幅を確保しつつ等分） */
  .tabs__nav { grid-auto-columns: minmax(0, 1fr); }
  .tab-btn { padding: var(--space-12) var(--space-8); font-size: var(--text-body-sm); }
  .tabs__panels { padding: var(--space-24); border-radius: var(--radius-card); }
}

/* ============================================================
   PCEYE（背景イメージ + PCブラウザフレームにスクショ合成）
   2スロット: __bg（背景イメージ） / __screen（PC画面）。一覧と遷移先で共有。
   ※ 既存 .eyecatch（cases用・単一画像）とは別物。名前衝突を避けるため pceye。
   ============================================================ */
.pceye {
  position: relative; display: block;
  aspect-ratio: 16 / 10; border-radius: var(--radius-card); overflow: hidden;
  background-color: var(--color-canvas-cream);
  /* 画像が無くても面が成立するよう薄いハッチ */
  background-image: repeating-linear-gradient(45deg, rgba(120,113,108,.04) 0, rgba(120,113,108,.04) 10px, transparent 10px, transparent 20px);
}
.pceye__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pceye__bg:not([src]), .pceye__bg[src=""] { display: none; }
.pceye__frame {
  position: absolute; left: 8%; right: 8%; top: 16%; bottom: -2%;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pceye__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #f1f0ef; border-bottom: 1px solid var(--hairline); }
.pceye__bar span { width: 8px; height: 8px; border-radius: 50%; background: #d6d3d1; display: inline-block; }
.pceye__screen { display: block; width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top center; background: var(--color-offwhite-2); }
.pceye__screen:not([src]), .pceye__screen[src=""] { display: none; }

/* ============================================================
   STRENGTHS（AsetZの圧倒的特徴・全サービスページ共通の使い回し）
   ROIで見る / 合わなければDXにテコ入れ / PDCA / 単一施策で捉えない。
   各要素クリックでサービストップ(services/index)へ。
   ============================================================ */
.strengths { max-width: 1040px; margin-inline: auto; }
.strengths__kv { display: block; width: 100%; max-width: 1040px; margin: 0 auto var(--space-48); aspect-ratio: 12 / 5; object-fit: cover; border-radius: var(--radius-card); }
.strengths__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-32) var(--space-48); }
.strength { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--space-24); border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: border-color .18s; }
.strength:hover { border-bottom-color: var(--accent); }
.strength__head { display: flex; align-items: center; gap: var(--space-12); }
.strength__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; flex-shrink: 0; }
.strength__icon i, .strength__icon svg { width: 20px; height: 20px; }
.strength__t { font-size: var(--text-subheading); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0; line-height: 1.3; }
.strength__d { font-size: var(--text-body); color: var(--text-body-c); line-height: var(--leading-body); margin: 0; }
.strength__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color: var(--accent); padding-top: var(--space-8); }
.strength__more i, .strength__more svg { width: 16px; height: 16px; transition: transform .18s; }
.strength:hover .strength__more i { transform: translateX(3px); }
@media (max-width: 768px) { .strengths__grid { grid-template-columns: 1fr; gap: var(--space-24); } }

/* ============================================================
   AZI — AIアシスタントキャラクター（ふわふわ浮遊・要所に控えめ）
   ポーズ: azi-neutral / azi-smiling / azi-explaining / azi-waving
   ============================================================ */
.azi {
  position: absolute;
  width: 96px; height: auto;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(38,46,161,.16));
  animation: azi-float 5.5s ease-in-out infinite;
}
.azi img { display:block; width:100%; height:auto; }
.azi--sm { width: 72px; }
.azi--lg { width: 124px; }
/* 浮遊の位相をずらす（複数体が同じ動きにならないよう） */
.azi--delay1 { animation-delay: -1.4s; }
.azi--delay2 { animation-delay: -2.8s; }
.azi--flip img { transform: scaleX(-1); }
@keyframes azi-float {
  0%   { transform: translateY(0) rotate(-1.5deg); }
  50%  { transform: translateY(-14px) rotate(1.5deg); }
  100% { transform: translateY(0) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .azi { animation: none; }
}
@media (max-width: 768px) {
  /* モバイルは小さく・一部は隠す */
  .azi { width: 64px; }
  .azi--hide-sp { display: none; }
}

/* ---- AZI 安全配置ヘルパー（頭が切れない・重ならない） ----
   親に .azi-stage を付ける（position:relative・上下に余白確保・横はみ出しだけ隠す）。
   AZIは .azi-stage の左右の余白に置く。狭い画面では自動で隠れる。 */
.azi-stage { position: relative; }
/* セクション見出しブロックの右上余白に置く定番位置（中央寄せ見出しの右脇） */
.azi--corner-tr { top: -8px; right: 8px; }
.azi--corner-tl { top: -8px; left: 8px; }
.azi--side-r    { top: 50%; right: 0; transform: translateY(-50%); }
.azi--side-l    { top: 50%; left: 0;  transform: translateY(-50%); }
/* side配置はfloatアニメと併用するとtransformが競合するので、ラッパで分離 */
.azi--side-r, .azi--side-l { animation: none; }
.azi--side-r > img, .azi--side-l > img { animation: azi-float 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .azi--side-r > img, .azi--side-l > img { animation: none; } }
/* 余白が足りない幅では隠す（重なり防止） */
@media (max-width: 1120px) { .azi--need-wide { display: none; } }

/* ============================================================
   LINE DEMO — LINEトーク画面シミュレーション（line.html）
   スマホ枠 + トークUI + メッセージ順次表示 + 選択ボタン/カルーセル/リッチメニュー。
   シナリオは JS の window.LINE_SCENARIOS に定義。挙動は include.js の startLineDemo。
   ============================================================ */
.linedemo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); align-items: start; }
@media (max-width: 1024px) { .linedemo-row { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

.linedemo { display: flex; flex-direction: column; }
.linedemo__cap { text-align: center; margin-bottom: var(--space-16); }
.linedemo__cap-badge { display:inline-flex; align-items:center; gap:6px; font-size: var(--text-caption); font-weight: var(--fw-semibold); color: var(--accent); background: var(--color-highlight-wash); border-radius: var(--radius-pill); padding: 4px 12px; }
.linedemo__cap-t { margin-top: 8px; font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.linedemo__cap-d { margin-top: 4px; font-size: var(--text-body-sm); color: var(--text-body-c); }

.phone { width: 100%; max-width: 340px; margin-inline: auto; background:#000; border-radius: 32px; padding: 10px; box-shadow: var(--shadow-accent); }
.phone__screen { background:#8aabd4; border-radius: 24px; overflow: hidden; display:flex; flex-direction:column; height: 600px; position:relative; }
.lchat__head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#ffffff; border-bottom:1px solid #e5e7eb; }
.lchat__back { color:#444; } .lchat__back i, .lchat__back svg { width:20px; height:20px; }
.lchat__avatar { width:34px; height:34px; border-radius:8px; background:#06c755; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; overflow:hidden; flex-shrink:0; }
.lchat__avatar img { width:100%; height:100%; object-fit:cover; }
.lchat__name { font-size: var(--text-body-sm); font-weight: var(--fw-semibold); color:#1f1f1f; line-height:1.2; }
.lchat__sub { font-size:11px; color:#9aa0a6; }
.lchat__body { flex:1 1 0; min-height:0; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
/* チャット内要素が縮まないように（スクロールで送る・潰さない） */
.lchat__body > * { flex-shrink: 0; }
.lmsg, .lbanner, .lform, .lcoupon, .lcarousel, .lchoice, .lchat__time { flex-shrink: 0; }
.lchat__time { align-self:center; font-size:11px; color:#42526b; background:rgba(255,255,255,.55); padding:2px 10px; border-radius:9999px; margin:2px 0; }
.lmsg { display:flex; gap:8px; align-items:flex-end; max-width:84%; }
.lmsg__ava { width:28px; height:28px; border-radius:7px; background:#06c755; flex-shrink:0; overflow:hidden; }
.lmsg__ava img { width:100%; height:100%; object-fit:cover; }
.lmsg__bubble { background:#fff; border-radius:4px 16px 16px 16px; padding:9px 13px; font-size:13px; line-height:1.6; color:#222; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.lmsg--me { margin-left:auto; flex-direction:row-reverse; }
.lmsg--me .lmsg__bubble { background:#a0e6a0; border-radius:16px 4px 16px 16px; }
.lmsg--me .lmsg__ava { display:none; }
.lchoice { display:flex; flex-direction:column; gap:8px; align-self:stretch; margin:2px 0 2px 36px; }
.lchoice__btn { width:100%; background:#fff; border:none; border-radius:14px; padding:11px 14px; font-size:13px; font-weight:600; color:#06539e; box-shadow:0 1px 3px rgba(0,0,0,.1); cursor:pointer; transition: background .15s, transform .1s; font-family:inherit; }
.lchoice__btn:hover { background:#f0f7ff; } .lchoice__btn:active { transform: scale(.98); }
.lcarousel { display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px 36px; -webkit-overflow-scrolling:touch; align-self:stretch; }
.lcard { flex:0 0 150px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.lcard__img { width:100%; height:84px; object-fit:cover; background:#dde6f0; display:block; }
.lcard__body { padding:8px 10px; } .lcard__t { font-size:12px; font-weight:700; color:#222; } .lcard__d { font-size:11px; color:#666; margin-top:2px; line-height:1.4; }
.lcard__btn { display:block; margin:8px 10px 10px; text-align:center; background:#06c755; color:#fff; border-radius:8px; padding:6px 0; font-size:11px; font-weight:700; }
.lrich { display:grid; grid-template-columns: repeat(3,1fr); background:#06539e; }
.lrich__cell { padding:10px 4px; text-align:center; color:#fff; font-size:10px; font-weight:600; border-right:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.lrich__cell i, .lrich__cell svg { width:18px; height:18px; display:block; margin:0 auto 3px; }
.lchat__foot { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-top:1px solid #eee; }
.lchat__input { flex:1; background:#f1f1f1; border-radius:9999px; padding:7px 14px; font-size:12px; color:#999; }
.lchat__send { width:30px; height:30px; border-radius:50%; background:#06c755; color:#fff; display:flex; align-items:center; justify-content:center; }
.lchat__send i, .lchat__send svg { width:15px; height:15px; }
.ltyping { display:flex; gap:4px; padding:11px 14px; background:#fff; border-radius:16px; width:fit-content; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.ltyping span { width:6px; height:6px; border-radius:50%; background:#bbb; animation: ltyping 1.2s infinite; }
.ltyping span:nth-child(2){ animation-delay:.2s } .ltyping span:nth-child(3){ animation-delay:.4s }
@keyframes ltyping { 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
.linedemo__replay { display:inline-flex; align-items:center; gap:6px; margin:var(--space-12) auto 0; font-size: var(--text-body-sm); font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; }
.linedemo__replay i, .linedemo__replay svg { width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .ltyping span { animation:none; } }

/* ---- LINE DEMO 追加要素: バナー / アンケートフォーム / クーポン ---- */
/* バナー画像（吹き出し内・全幅） */
.lbanner { align-self:flex-start; max-width:72%; margin-left:36px; border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lbanner img { display:block; width:100%; height:auto; }
/* アンケート回答フォーム画面（LINE内ブラウザ風） */
.lform { align-self:stretch; margin-left:36px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lform__bar { display:flex; align-items:center; gap:6px; padding:7px 10px; background:#f1f0ef; border-bottom:1px solid #e5e7eb; font-size:10px; color:#888; }
.lform__bar b { width:7px; height:7px; border-radius:50%; background:#06c755; display:inline-block; }
.lform__body { padding:12px 13px; }
.lform__q { font-size:12px; font-weight:700; color:#222; margin-bottom:8px; }
.lform__opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:6px; font-size:12px; color:#333; cursor:pointer; transition:border-color .12s, background .12s; }
.lform__opt:hover { border-color:#06c755; }
.lform__radio { width:14px; height:14px; border-radius:50%; border:2px solid #c9ccd1; flex-shrink:0; }
.lform__opt--on { border-color:#06c755; background:#f0fff4; }
.lform__opt--on .lform__radio { border-color:#06c755; background:#06c755; box-shadow:inset 0 0 0 2px #fff; }
.lform__submit { width:100%; margin-top:6px; background:#06c755; color:#fff; border:none; border-radius:8px; padding:9px 0; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
/* クーポン画面 */
.lcoupon { align-self:stretch; margin-left:36px; background:#fff; border:2px dashed #06c755; border-radius:12px; padding:14px; text-align:center; }
.lcoupon__badge { display:inline-block; font-size:10px; font-weight:700; color:#fff; background:#e8960a; border-radius:9999px; padding:2px 10px; margin-bottom:8px; }
.lcoupon__t { font-size:13px; font-weight:700; color:#222; }
.lcoupon__d { font-size:11px; color:#666; margin-top:4px; line-height:1.5; }
.lcoupon__btn { display:block; margin-top:10px; background:#06c755; color:#fff; border-radius:8px; padding:8px 0; font-size:12px; font-weight:700; }
/* カルーセルカードに画像が入る場合はそのまま .lcard__img を使用 */

/* リッチメニュー: タップ可能セル */
.lrich__cell--tap { cursor:pointer; transition: background .12s; }
.lrich__cell--tap:hover { background:#06539e; filter:brightness(1.15); }
.lrich__cell--tap:active { filter:brightness(.9); }
/* ★本格リッチメニュー: デザイン画像＋透明タップ領域オーバーレイ（実Lステップ仕様） */
.lrich-img { position:relative; line-height:0; }
.lrich-img__bg { display:block; width:100%; height:auto; }
.lrich-img__hit { position:absolute; cursor:pointer; background:transparent; }
.lrich-img__hit:active { background:rgba(255,255,255,.18); }

/* LINE DEMO: カレンダー予約UI（リッチメニュー予約タップで表示） */
.lcal { align-self:stretch; margin-left:36px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.lcal__bar { display:flex; align-items:center; gap:6px; padding:8px 11px; background:#06539e; color:#fff; font-size:11px; font-weight:700; }
.lcal__bar i, .lcal__bar svg { width:14px; height:14px; }
.lcal__body { padding:11px 12px; }
.lcal__month { font-size:12px; font-weight:700; color:#222; text-align:center; margin-bottom:8px; }
.lcal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.lcal__dow { font-size:9px; color:#999; text-align:center; padding:2px 0; }
.lcal__day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11px; border-radius:6px; color:#333; }
.lcal__day--off { color:#ccc; }
.lcal__day--ok { background:#eaf7ee; color:#06a050; font-weight:700; cursor:pointer; transition:background .12s; }
.lcal__day--ok:hover { background:#06c755; color:#fff; }
.lcal__day--sel { background:#06c755 !important; color:#fff !important; }
.lcal__slots { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.lcal__slot { font-size:11px; padding:6px 12px; border:1px solid #06c755; border-radius:8px; color:#06a050; font-weight:600; cursor:pointer; }
.lcal__slot:hover { background:#06c755; color:#fff; }
.lcal__done { margin-top:10px; text-align:center; font-size:12px; font-weight:700; color:#06a050; }

/* リッチメニューのタップ誘導ガイド */
.lrich-img__hint {
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  margin-bottom:8px; background:#262EA1; color:#fff; font-size:11px; font-weight:700;
  padding:6px 14px; border-radius:9999px; white-space:nowrap; z-index:4;
  box-shadow:0 3px 10px rgba(38,46,161,.35); display:inline-flex; align-items:center; gap:6px;
  animation: hintBob 1.4s ease-in-out infinite;
}
.lrich-img__hint::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#262EA1; }
.lrich-img__hint i, .lrich-img__hint svg { width:14px; height:14px; }
@keyframes hintBob { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }
/* タップ領域を一時的に光らせる（気づかせる） */
.lrich-img__hit--pulse { animation: hitPulse 1.6s ease-in-out 3; }
@keyframes hitPulse { 0%,100%{ box-shadow:inset 0 0 0 0 rgba(38,46,161,0); } 50%{ box-shadow:inset 0 0 0 2px rgba(38,46,161,.55); background:rgba(38,46,161,.08); } }
@media (prefers-reduced-motion: reduce){ .lrich-img__hint, .lrich-img__hit--pulse { animation:none; } }