:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #1d1b18;
  --muted: #66615a;
  --line: #dedad2;
  --accent: #1d1b18;
  --accent-ink: #ffffff;
  --on-dark: #f6f4ef;
  --on-dark-muted: #cfc9bf;
  --panel: #e9e5dc;
  --workshop: var(--hue-2);
  --workshop-yellow: #f2d27a;
  --marker-yellow: #f2d27a;
  --about-card: #f8f3ea;
  --about-tag: #a39275;
  --story-bg: var(--about-card);
  --contact-bg: var(--about-card);
  --workshop-muted: #eef8f2;
  --line-green: #06c755;
  --shop-1: #2f4b7c;
  --shop-2: #1f9a94;
  --shop-3: #e2672c;
  --shop-4: #6a50a0;
  --shop-5: #4b8b48;
  --shop-6: #c4433a;
  --shop-7: #b8862a;
  --screen-chat: #a9bccd;
  --screen-frame: #111111;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-display: 'Zen Kaku Gothic New', sans-serif;
  --font-en: Inter, sans-serif;
  --max-width: 1200px;
  --gutter: clamp(20px, 3vw, 40px);
  --section-space: clamp(48px, 6vw, 80px);
  --radius: 28px;

  --radius-pill: 999px;
  --radius-phone: 30px;
  --radius-screen: 23px;
  --radius-input: 8px;
  --radius-card: 10px;
  --radius-small: 12px;
  --radius-blob-1: 44% 52% 40% 48% / 40% 44% 52% 46%;
  --radius-blob-2: 50% 42% 48% 40% / 46% 50% 40% 48%;
  --radius-dashboard: 14px;
  --radius-circle: 50%;

  --border-thin: 1px;
  --border-strong: 2px;

  --focus-offset: 5px;

  --opacity-disabled: 0.6;

  --size-18: 18px;
  --size-40: 40px;
  --size-44: 44px;
  --size-46: 46px;
  --size-48: 48px;
  --size-60: 60px;
  --size-64: 64px;
  --size-90: 90px;
  --size-96: 96px;
  --size-104: 104px;
  --size-132: 132px;
  --size-160: 160px;
  --size-200: 200px;
  --size-220: 220px;
  --size-300: 300px;
  --size-320: 320px;
  --size-340: 340px;
  --size-360: 360px;
  --size-400: 400px;
  --size-420: 420px;
  --size-440: 440px;
  --size-560: 560px;
  --size-640: 640px;
  --size-720: 720px;
  --size-800: 800px;
  --size-900: 900px;

  --width-bubble: 85%;
  --width-dashboard-max: calc(100% - 32px);
  --width-dialog: min(560px, calc(100% - 40px));

  --height-dialog-max: calc(100% - 40px);

  --ratio-slide: 16 / 10;

  --shadow-none: none;

  --shop-1-card: color-mix(in srgb, var(--shop-1) 55%, var(--paper));
  --shop-1-menu-even: color-mix(in srgb, var(--shop-1) 80%, var(--paper));
  --shop-2-card: color-mix(in srgb, var(--shop-2) 55%, var(--paper));
  --shop-2-menu-even: color-mix(in srgb, var(--shop-2) 80%, var(--paper));
  --shop-3-card: color-mix(in srgb, var(--shop-3) 55%, var(--paper));
  --shop-3-menu-even: color-mix(in srgb, var(--shop-3) 80%, var(--paper));
  --shop-4-card: color-mix(in srgb, var(--shop-4) 55%, var(--paper));
  --shop-4-menu-even: color-mix(in srgb, var(--shop-4) 80%, var(--paper));
  --shop-5-card: color-mix(in srgb, var(--shop-5) 55%, var(--paper));
  --shop-5-menu-even: color-mix(in srgb, var(--shop-5) 80%, var(--paper));
  --shop-6-card: color-mix(in srgb, var(--shop-6) 55%, var(--paper));
  --shop-6-menu-even: color-mix(in srgb, var(--shop-6) 80%, var(--paper));
  --shop-7-card: color-mix(in srgb, var(--shop-7) 55%, var(--paper));
  --shop-7-menu-even: color-mix(in srgb, var(--shop-7) 80%, var(--paper));

  --ig-light: color-mix(in srgb, var(--shop-3) 40%, var(--paper));
  --ig-dark: color-mix(in srgb, var(--shop-3) 8%, var(--screen-frame));
  --ig-pale: color-mix(in srgb, var(--shop-3) 10%, var(--paper));
  --ig-neutral: color-mix(in srgb, var(--shop-3) 20%, var(--line));

  --line-hover: color-mix(in srgb, var(--line-green) 80%, var(--paper));

  --workshop-rule: color-mix(in srgb, var(--paper) 35%, transparent);

  --footer-rule: color-mix(in srgb, var(--on-dark) 15%, transparent);

  --dialog-backdrop: color-mix(in srgb, var(--ink) 65%, transparent);

  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-22: 22px;
  --text-24: 24px;
  --text-25: 25px;
  --text-26: 26px;
  --text-28: 28px;
  --text-32: 32px;
  --text-40: 40px;
  --text-48: 48px;
  --text-64: 64px;
  --text-72: 72px;
  --text-screen-card: 8.5px;
  --text-h1: clamp(48px, 8.4vw, 128px);
  --text-h2: clamp(28px, 4vw, 52px);
  --text-h2-dark: clamp(36px, 5.6vw, 88px);
  --text-proof: clamp(120px, 20vw, 280px);
  --text-proof-unit: 0.22em;
  --text-story: clamp(40px, 4.4vw, 60px);
  --text-slide: clamp(17px, 2.5vw, 26px);
  --text-logo-giant: min(15vw, 200px);

  --leading-proof: 0.8;
  --leading-solid: 1;
  --leading-h1: 1.12;
  --leading-dark: 1.3;
  --leading-h2: 1.35;
  --leading-card: 1.4;
  --leading-heading: 1.5;
  --leading-body: 1.9;
  --leading-story: 2.3;
  --leading-about: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-bold: 700;
  --weight-number: 800;
  --weight-display: 900;

  --tracking-proof: -0.05em;
  --tracking-step: -0.04em;
  --tracking-brand: -0.02em;
  --tracking-h1: -0.01em;
  --tracking-unit: 0;
  --tracking-label: 0.02em;
  --tracking-nav: 0.05em;

  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-34: 34px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-100: 100px;
  --space-120: 120px;
  --space-140: 140px;
  --filament-1: #b06f7c;
  --filament-2: #b58a62;
  --filament-3: #a18d53;
  --filament-4: #648f7c;
  --filament-5: #648e9c;
  --filament-6: #647fa3;
  --filament-7: #8d7e9f;
  --filament-core: #f7f2e8;
  --lamp-spectrum-1: #eace8e;
  --lamp-spectrum-2: #e3b7a2;
  --lamp-spectrum-3: #dcaebd;
  --lamp-spectrum-4: #c2b6da;
  --lamp-spectrum-5: #acc8dc;
  --lamp-spectrum-6: #aacfc7;
  --lamp-spectrum-7: #c6d0aa;
  --lamp-highlight-1: #f2dba7;
  --lamp-highlight-2: #ecd2c1;
  --lamp-highlight-3: #e9cad5;
  --lamp-highlight-4: #ddd3ea;
  --lamp-highlight-5: #ccdfeb;
  --lamp-highlight-6: #cfe5df;
  --lamp-highlight-7: #dfe5ca;
  --hue-1: #c2456a;
  --hue-2: #2c8454;
  --hue-3: #2f6db5;
  --hue-4: #b25e1b;
  --hue-5: #1d808b;
  --hue-6: #7a5bb0;
  --hue-7: #907018;
  --hue-bg-1: #f4dee4;
  --hue-bg-2: #d9eae1;
  --hue-bg-3: #dae5f2;
  --hue-bg-4: #f5e4d7;
  --hue-bg-5: #d7eaec;
  --hue-bg-6: #e7e1f1;
  --hue-bg-7: #f2ebd7;
  --step-1: var(--hue-3);
  --step-2: var(--hue-4);
  --step-3: var(--hue-5);
  --step-4: var(--hue-7);
  --step-bg-1: var(--hue-bg-3);
  --step-bg-2: var(--hue-bg-4);
  --step-bg-3: var(--hue-bg-5);
  --step-bg-4: var(--hue-bg-7);
  --story-lamp: #b97d10;
  --story-lamp-text: #8a6410;
  --how-accent: var(--step-1);
  --lamp-edge-1: #d1b67c;
  --lamp-edge-2: #c49f8d;
  --lamp-edge-3: #bc95a3;
  --lamp-edge-4: #a69dbf;
  --lamp-edge-5: #91aabb;
  --lamp-edge-6: #8fb3aa;
  --lamp-edge-7: #aab48d;
  --lamp-shell-1: #c9c6bf;
  --lamp-shell-2: #eeeae1;
  --lamp-shell-3: #f4efe4;
  --lamp-shell-4: #e5ded1;
  --lamp-shell-5: #c6c2b9;
  --lamp-shell-line: #8e938e;
  --lamp-shine: #f8f4eb;
  --lamp-inner-top: #b4a58e;
  --lamp-inner-bottom: #e4d3af;
  --lamp-cap: #939895;
  --lamp-cap-shine: #d9dbd2;
  --lamp-cord: #8e938f;
  --lamp-rim: #9e9989;
  --lamp-rim-shadow: #aaa18d;
  --lamp-bulb-line: #dac394;
  --text-intro-copy: clamp(48px, 7vw, 104px);
  --text-intro-copy-sp: clamp(28px, 8vw, 46px);
  --height-header: calc(var(--size-44) + var(--space-22) * 2);
}

/* The approved tokens above are the only color and font definitions. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-15);
  line-height: var(--leading-body);
  overflow-x: clip;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
summary {
  cursor: pointer;
}
[hidden],
.honeypot {
  display: none !important;
}
:focus-visible {
  outline: var(--border-strong) solid currentColor;
  outline-offset: var(--focus-offset);
}
.nb {
  display: inline-block;
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}
h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}
.label,
.eyebrow {
  font-family: var(--font-en);
  font-size: var(--text-13);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
}
.label + h2 {
  margin-top: var(--space-10);
}
/* Header (2026-11-01, 案A): sticks to the top; slides away while you read down and comes
   back as soon as you scroll up. Once off the top it gets a white ground and a thin line
   so it stays readable over photos and text (nav.js sets .is-stuck / .is-hidden). */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-24) var(--gutter);
}
.brand {
  font-family: var(--font-en);
  font-weight: var(--weight-number);
  font-size: var(--text-32);
  letter-spacing: var(--tracking-brand);
  text-decoration: none;
  white-space: nowrap;
}
.header nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  font-size: var(--text-16);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: inherit;
}
.header.is-stuck {
  background: var(--paper);
  box-shadow: 0 var(--border-thin) 0 var(--line);
}
.header.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}
/* The ☰ button and the 「お問い合わせ」 inside the menu are for phones only. */
.nav-toggle,
.header .nav-menu-cta {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition: none !important;
  }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-44);
  text-decoration: none;
  white-space: nowrap;
}
/* Six links + the button (2026-11-01): narrow PCs pull the links closer together. */
@media (min-width: 761px) and (max-width: 1100px) {
  .header {
    gap: var(--space-12);
  }
  .header nav {
    gap: var(--space-10);
    font-size: var(--text-13);
    letter-spacing: 0;
  }
  .header .brand {
    font-size: var(--text-22);
  }
  .header .nav-cta {
    gap: var(--space-8);
    padding-inline: var(--space-14);
    font-size: var(--text-13);
    white-space: nowrap;
  }
}
.nav-link:hover,
.text-link:hover {
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-14);
  min-height: var(--size-44);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-16) var(--space-26);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-14);
  line-height: var(--leading-body);
  text-decoration: none;
  text-align: center;
}
.button::after {
  content: "→" / "";
  font-family: var(--font-en);
}
.button:hover {
  background: var(--muted);
}
.button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.nav-cta {
  padding: var(--space-12) var(--space-24);
  font-size: var(--text-15);
}
.text-link {
  font-size: var(--text-14);
  text-underline-offset: var(--space-6);
}

/* Pull the lead up under the opening line; the lamp glow may spill behind it. */
.hero {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--space-140));
  padding-top: 0;
  background: transparent;
}
.hero-lead {
  font-size: var(--text-22);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  text-align: center;
  color: var(--ink);
}
/* Who it is for and what is offered, in one quieter line (2026-11-01 review). */
.hero-target {
  margin-top: var(--space-16);
  color: var(--muted);
  font-size: var(--text-22);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  text-align: center;
}
/* The first sentence leads, slightly larger, before the two explanatory lines. */
.hero-lead-first {
  display: block;
  margin-bottom: var(--space-12);
  font-size: var(--text-28);
}
/* Photo collage that drifts sideways without stopping; laid out like the reference collage
   (1800 x 610 units). The set is duplicated so translateX(-50%) loops seamlessly. */
.collage {
  --u: 0.85px;
  margin-top: var(--space-80);
  overflow: hidden;
}
.collage-track {
  display: flex;
  width: max-content;
  animation: collage-scroll 34s linear infinite;
}
.collage-set {
  position: relative;
  flex: 0 0 auto;
  width: calc(1800 * var(--u));
  height: calc(610 * var(--u));
}
.collage-panel,
.collage-photo {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  z-index: var(--z);
  border-radius: var(--radius-dashboard);
}
.collage-panel {
  background: var(--tint);
  opacity: 0.5;
}
.collage-photo {
  display: block;
  object-fit: cover;
  box-shadow: 0 calc(16 * var(--u)) calc(32 * var(--u)) color-mix(in srgb, var(--ink) 9%, transparent);
}
/* One thin wave drawn with smooth curves only (each joint continues the same direction),
   and the wave ends exactly where it starts (height and slope) so the loop has no seam. */
.collage-lines {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.collage-lines path {
  fill: none;
  stroke: var(--lamp-spectrum-2);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
@keyframes collage-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .collage-track {
    animation: none;
  }
}
.cap {
  padding: var(--space-12) var(--gutter) 0;
  color: var(--muted);
  font-size: var(--text-11);
  text-align: right;
}

/* Static HTML previews: seven fictional brands share the same phone component. */
.ph {
  flex: 0 0 var(--size-200);
  width: var(--size-200);
  border-radius: var(--radius-phone);
  background: var(--screen-frame);
  padding: var(--space-8);
}
.ph .sc {
  display: flex;
  flex-direction: column;
  height: var(--size-400);
  overflow: hidden;
  border-radius: var(--radius-screen);
  background: var(--screen-chat);
}
.ph .top {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-22) var(--space-10) var(--space-8);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-10);
  font-weight: var(--weight-bold);
}
.ph .top i {
  flex: none;
  width: var(--size-18);
  height: var(--size-18);
  border-radius: var(--radius-circle);
}
.ph .chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  background: var(--screen-chat);
}
.ph .bub {
  max-width: var(--width-bubble);
  padding: var(--space-7) var(--space-9);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-9);
  line-height: var(--leading-heading);
}
.ph .card {
  max-width: var(--width-bubble);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
}
.ph .card b {
  display: block;
  height: var(--size-46);
}
.ph .card span {
  display: block;
  padding: var(--space-5) var(--space-8);
  color: var(--ink);
  font-size: var(--text-screen-card);
  line-height: var(--leading-card);
}
.ph .menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  height: var(--size-132);
}
.ph .menu div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--paper);
  font-size: var(--text-9);
  font-weight: var(--weight-bold);
  line-height: var(--leading-dark);
  text-align: center;
}
.ph .menu div:first-child {
  grid-column: span 2;
  font-size: var(--text-11);
}
.shop-1 .top i,
.shop-1 .menu div {
  background: var(--shop-1);
}
.shop-2 .top i,
.shop-2 .menu div {
  background: var(--shop-2);
}
.shop-3 .top i,
.shop-3 .menu div {
  background: var(--shop-3);
}
.shop-4 .top i,
.shop-4 .menu div {
  background: var(--shop-4);
}
.shop-5 .top i,
.shop-5 .menu div {
  background: var(--shop-5);
}
.shop-6 .top i,
.shop-6 .menu div {
  background: var(--shop-6);
}
.shop-7 .top i,
.shop-7 .menu div {
  background: var(--shop-7);
}
.shop-1 .card b {
  background: var(--shop-1-card);
}
.shop-2 .card b {
  background: var(--shop-2-card);
}
.shop-3 .card b {
  background: var(--shop-3-card);
}
.shop-4 .card b {
  background: var(--shop-4-card);
}
.shop-5 .card b {
  background: var(--shop-5-card);
}
.shop-6 .card b {
  background: var(--shop-6-card);
}
.shop-7 .card b {
  background: var(--shop-7-card);
}
.shop-1 .menu div:nth-child(even) {
  background: var(--shop-1-menu-even);
}
.shop-2 .menu div:nth-child(even) {
  background: var(--shop-2-menu-even);
}
.shop-3 .menu div:nth-child(even) {
  background: var(--shop-3-menu-even);
}
.shop-4 .menu div:nth-child(even) {
  background: var(--shop-4-menu-even);
}
.shop-5 .menu div:nth-child(even) {
  background: var(--shop-5-menu-even);
}
.shop-6 .menu div:nth-child(even) {
  background: var(--shop-6-menu-even);
}
.shop-7 .menu div:nth-child(even) {
  background: var(--shop-7-menu-even);
}

/* Business overview: four cards stacked vertically, each a wide row
   (photo left, name + text, arrow right). Same shape on every width; only sizes change. */
.biz {
  padding-block: var(--section-space);
}
.biz h2 {
  font-size: var(--text-h2);
}
.biz-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);
  list-style: none;
}
.biz-list li {
  --step: var(--hue-2);
  --step-bg: var(--hue-bg-2);
  display: flex;
}
.biz-list li:nth-child(2) {
  --step: var(--hue-1);
  --step-bg: var(--hue-bg-1);
}
.biz-list li:nth-child(3) {
  --step: var(--hue-3);
  --step-bg: var(--hue-bg-3);
}
.biz-list li:nth-child(4) {
  --step: var(--hue-4);
  --step-bg: var(--hue-bg-4);
}
.biz-card {
  display: grid;
  flex: 1;
  grid-template-columns: var(--size-300) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-20) var(--space-40) var(--space-20) var(--space-20);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  text-decoration: none;
}
.biz-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-small);
}
/* LINE / Instagram: the official icon is shown whole (never cropped or altered) on a quiet panel. */
.biz-card img.biz-logo {
  object-fit: contain;
  padding: var(--space-16);
  border: var(--border-thin) solid var(--line);
  background: var(--paper);
}
/* Robot on white (2026-11-01): shown whole on the same quiet panel as the icons. */
.biz-card img.biz-fit {
  object-fit: contain;
  padding: var(--space-8);
  border: var(--border-thin) solid var(--line);
  background: var(--paper);
}
.biz-text {
  min-width: 0;
}
.biz-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-25);
  line-height: var(--leading-heading);
}
.biz-desc {
  display: block;
  margin-top: var(--space-12);
  color: var(--muted);
  font-size: var(--text-16);
  line-height: var(--leading-body);
}
.biz-arrow {
  display: grid;
  place-items: center;
  width: var(--size-60);
  height: var(--size-60);
  border-radius: var(--radius-circle);
  background: var(--step-bg);
  color: var(--step);
  font-size: var(--text-18);
  transition: background 0.2s;
}
.biz-card:hover .biz-arrow {
  background: color-mix(in srgb, var(--step-bg) 60%, var(--step));
  color: var(--paper);
}
.biz-card:focus-visible {
  outline: var(--border-strong) solid var(--ink);
  outline-offset: var(--focus-offset);
}
@media (max-width: 1100px) {
  .biz-card {
    grid-template-columns: var(--size-200) minmax(0, 1fr) auto;
    gap: var(--space-24);
    padding-right: var(--space-24);
  }
  .biz-title {
    font-size: var(--text-22);
  }
  .biz-desc {
    font-size: var(--text-14);
  }
}
.num {
  padding-block: var(--section-space);
}
.num .wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-64);
}
.big {
  font-family: var(--font-en);
  font-size: var(--text-proof);
  font-weight: var(--weight-number);
  line-height: var(--leading-proof);
  letter-spacing: var(--tracking-proof);
  white-space: nowrap;
}
.big small {
  margin-left: var(--space-8);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-proof-unit);
  letter-spacing: var(--tracking-unit);
}
.big .approx {
  margin: 0 var(--space-6) 0 0;
}
.num h2 {
  font-size: var(--text-28);
  line-height: var(--leading-heading);
}
.num p {
  margin-top: var(--space-16);
  color: var(--muted);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-20);
}
.tags span {
  padding: var(--space-4) var(--space-14);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--text-12);
}
.dark {
  padding-block: var(--section-space);
  background: var(--ink);
  color: var(--on-dark);
}
.dark h2 {
  font-size: var(--text-h2-dark);
  line-height: var(--leading-dark);
}
/* Centered statement: big heading, a short vertical rule, then three centered lines. */
.dark .wrap {
  text-align: center;
}
/* Sub-catch above the heading: says who is speaking (people who build these). */
.dark-sub {
  margin: 0 0 var(--space-32);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--text-25);
  font-weight: var(--weight-display);
  line-height: var(--leading-h2);
}
.dark-rule {
  display: block;
  width: var(--border-thin);
  height: var(--size-48);
  margin: var(--space-40) auto;
  background: var(--on-dark-muted);
}
.dark-lead {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: var(--text-16);
  line-height: var(--leading-story);
}

.svc {
  padding-block: var(--section-space);
}
.item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-80);
  margin-top: var(--space-100);
}
.item:nth-of-type(even) .vis {
  order: 2;
}
/* Last stage (仕組みにする): the laptop is taller than the text, so the text sits at
   the bottom of the row instead of the middle. Then the gap below the text to the
   next heading is one --section-space, like everywhere else. (PC only; SP is 1 column.) */
#svc-system {
  align-items: end;
}
.vis {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-420);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
}
.item .n {
  color: var(--line);
  font-family: var(--font-en);
  font-weight: var(--weight-number);
  font-size: var(--text-64);
  line-height: var(--leading-solid);
}
.item h3 {
  margin-top: var(--space-8);
  font-size: var(--text-40);
  line-height: var(--leading-heading);
}
.item h3 small {
  display: block;
  margin-top: var(--space-4);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
}
.item h3 a {
  text-underline-offset: var(--space-4);
}
.item p {
  max-width: var(--size-420);
  margin-top: var(--space-20);
  color: var(--muted);
}
.svc-lead {
  margin-top: var(--space-20);
  color: var(--muted);
  font-size: var(--text-16);
  line-height: var(--leading-body);
}
/* One line that says what happens at this stage, between the name and the text. */
.item .item-catch {
  max-width: none;
  margin-top: var(--space-20);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-22);
  line-height: var(--leading-heading);
}
.item .item-catch + p {
  margin-top: var(--space-12);
}
.item .text-link {
  display: inline-block;
  margin-top: var(--space-16);
}
.dash {
  width: var(--size-360);
  max-width: var(--width-dashboard-max);
  padding: var(--space-16);
  border-radius: var(--radius-dashboard);
  background: var(--paper);
  font-size: var(--text-11);
}
.dash h4 {
  margin-bottom: var(--space-10);
  font-size: var(--text-12);
}
.dash .r {
  display: grid;
  grid-template-columns: var(--size-60) minmax(0, 1fr) var(--size-60);
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-top: var(--border-thin) solid var(--line);
}
.dash .r span:last-child {
  text-align: right;
  font-weight: var(--weight-bold);
}
/* Flow redesign (2026-11-01, sample image): each screen sits on a soft sage blob,
   a line is drawn from screen to screen as you scroll (home.js), numbers and
   service names in sage pills. Visual always on the left. */
.svc-mark {
  background: linear-gradient(transparent 62%, var(--marker-yellow) 62%, var(--marker-yellow) 92%, transparent 92%);
}
/* Each stage has its own lamp colour (2026-11-01): Instagram rose, LINE green, systems blue. */
#svc-instagram {
  --c: var(--hue-1);
  --c-bg: var(--hue-bg-1);
}
#svc-line {
  --c: var(--hue-2);
  --c-bg: var(--hue-bg-2);
}
#svc-system {
  --c: var(--hue-3);
  --c-bg: var(--hue-bg-3);
}
.svc .svc-lead {
  color: var(--ink);
  font-size: var(--text-18);
}
.svc-flow {
  position: relative;
  isolation: isolate;
}
.svc-line {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.svc-line path {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
}
.svc-line circle {
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.svc-line circle.is-on {
  opacity: 1;
}
.svc .item:nth-of-type(even) .vis {
  order: 0;
}
@media (min-width: 761px) {
  #svc-line .vis {
    order: 2;
  }
}
/* Slide-in (2026-11-01): the screen comes in from its own side, the text from the other side
   a little later. Only the screen's children move (the sage blob stays), so each keeps its
   z-index above the connecting line. Only when home.js adds .is-slide. */
.svc-flow.is-slide .item .vis > *,
.svc-flow.is-slide .item > :not(.vis) {
  opacity: 0;
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc-flow.is-slide .item .vis > * {
  translate: -64px 0;
}
.svc-flow.is-slide .item > :not(.vis) {
  translate: 64px 0;
  transition-delay: 0.15s;
}
@media (min-width: 761px) {
  .svc-flow.is-slide #svc-line .vis > * {
    translate: 64px 0;
  }
  .svc-flow.is-slide #svc-line > :not(.vis) {
    translate: -64px 0;
  }
}
@media (max-width: 760px) {
  .svc-flow.is-slide .item > :not(.vis) {
    translate: 0 24px;
  }
}
.svc-flow.is-slide .item.is-in .vis > *,
.svc-flow.is-slide .item.is-in > :not(.vis),
.svc-flow.is-slide #svc-line.is-in .vis > *,
.svc-flow.is-slide #svc-line.is-in > :not(.vis) {
  opacity: 1;
  translate: 0 0;
}
.svc .vis {
  position: relative;
  overflow: visible;
  background: none;
}
.svc .vis::before {
  content: "";
  position: absolute;
  inset: 4% 8%;
  z-index: 0;
  border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%;
  background: var(--c-bg);
}
.svc .vis > * {
  position: relative;
  z-index: 2;
}
.svc-badge {
  position: absolute;
  top: var(--space-24);
  left: 8%;
  z-index: 3;
  width: var(--size-64);
  height: var(--size-64);
  border-radius: var(--radius-small);
  background: var(--paper);
  padding: var(--space-6);
  box-shadow: 0 var(--space-8) var(--space-20) color-mix(in srgb, var(--ink) 15%, transparent);
}
.svc .vis > .svc-badge {
  position: absolute;
  z-index: 3;
}
.svc-pop {
  position: absolute;
  width: var(--size-44);
  height: auto;
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
}
.svc .vis > .svc-pop {
  position: absolute;
  z-index: 3;
}
#svc-instagram .svc-pop {
  top: var(--space-24);
  right: 10%;
}
#svc-line .svc-pop {
  top: var(--space-48);
  left: 4%;
  transform: scaleX(-1);
}
/* 03 has the code icon on the left, so its lines move to the right. */
#svc-system .svc-pop {
  top: var(--space-48);
  right: 4%;
}
/* Code icon "</>": white tile like the app icons, blue square inside. */
.svc-badge-code svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--space-8);
  border-radius: var(--radius-small);
  background: var(--c);
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#svc-line .svc-badge {
  top: var(--space-48);
  left: 14%;
}
.post {
  width: var(--size-300);
  transform: rotate(-4deg);
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--paper);
  box-shadow: 0 var(--space-20) var(--space-40) color-mix(in srgb, var(--ink) 18%, transparent);
}
.post-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-14);
  font-size: var(--text-12);
  font-weight: var(--weight-bold);
}
.post-head i {
  width: var(--size-18);
  height: var(--size-18);
  border-radius: var(--radius-circle);
  background: var(--c-bg);
  border: var(--border-thin) solid var(--line);
}
.post-head span {
  margin-left: auto;
  color: var(--muted);
}
.post img {
  display: block;
  width: 100%;
  height: var(--size-220);
  object-fit: cover;
  object-position: center 72%;
}
.post-foot {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
}
.post-foot svg {
  width: var(--space-22);
  height: var(--space-22);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.post-foot .heart {
  fill: var(--hue-1);
  stroke: var(--hue-1);
}
.post-foot .save {
  margin-left: auto;
}
.svc .ph {
  transform: rotate(4deg);
  box-shadow: 0 var(--space-20) var(--space-40) color-mix(in srgb, var(--ink) 18%, transparent);
}
.laptop {
  padding: var(--space-10) var(--space-10) 0;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  background: var(--screen-frame);
  box-shadow: 0 var(--space-20) var(--space-40) color-mix(in srgb, var(--ink) 18%, transparent);
}
.laptop::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: calc(-1 * var(--space-12));
  height: var(--space-12);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  background: var(--line);
}
.laptop {
  max-width: 90%;
}
.laptop .dash {
  max-width: 100%;
  border-radius: var(--space-4) var(--space-4) 0 0;
}
.item .n {
  display: inline-block;
  padding: var(--space-4) var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--c);
  color: var(--paper);
  font-size: var(--text-40);
}
.item h3 small {
  display: table;
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--ink);
  font-size: var(--text-15);
}
@media (max-width: 1100px) {
  .svc-badge-code svg {
    padding: var(--space-6);
  }
  .svc-badge {
    width: var(--size-48);
    height: var(--size-48);
    left: 2%;
  }
}
@media (max-width: 760px) {
  .post {
    width: var(--size-220);
  }
  .post img {
    height: var(--size-160);
  }
  .svc-badge {
    width: var(--size-48);
    height: var(--size-48);
  }
  .item .n {
    font-size: var(--text-28);
  }
  .svc .svc-lead {
    font-size: var(--text-15);
  }
  #svc-system .svc-pop {
    top: var(--space-4);
    right: 0;
  }
  .laptop .dash {
    width: var(--size-300);
  }
}

.how {
  padding-block: var(--section-space);
  background: var(--paper);
  text-align: center;
}
.how-accent {
  color: var(--how-accent);
  text-decoration: underline;
  text-decoration-color: var(--how-accent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}
/* Four stages, each with its own color: circle + line drawing, number, title, short rule, text. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-32);
  margin-top: var(--space-48);
  list-style: none;
}
.steps li {
  --step: var(--step-1);
  --step-bg: var(--step-bg-1);
  position: relative;
}
.steps li:nth-child(2) {
  --step: var(--step-2);
  --step-bg: var(--step-bg-2);
}
.steps li:nth-child(3) {
  --step: var(--step-3);
  --step-bg: var(--step-bg-3);
}
.steps li:nth-child(4) {
  --step: var(--step-4);
  --step-bg: var(--step-bg-4);
}
.steps li:not(:last-child)::after {
  content: "→" / "";
  position: absolute;
  top: calc(var(--size-220) / 2);
  right: calc(var(--space-32) / -2);
  transform: translate(50%, -50%);
  color: var(--muted);
  font-size: var(--text-22);
  opacity: 0.6;
}
.step-pic {
  display: grid;
  place-items: center;
  width: min(var(--size-220), 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--step-bg);
  color: var(--step);
}
.step-pic svg {
  width: 72%;
  height: auto;
}
.steps b {
  display: block;
  margin-top: var(--space-28);
  font-family: var(--font-en);
  font-weight: var(--weight-number);
  font-size: var(--text-40);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-step);
  color: var(--step);
}
.steps h3 {
  margin-top: var(--space-12);
  font-size: var(--text-22);
  line-height: var(--leading-heading);
}
.steps h3::after {
  content: "";
  display: block;
  width: var(--size-64);
  height: var(--border-thin);
  margin: var(--space-20) auto 0;
  background: var(--step);
  opacity: 0.6;
}
.steps p {
  max-width: 17em;
  margin: var(--space-20) auto 0;
  color: var(--muted);
  font-size: var(--text-14);
  word-break: auto-phrase;
  text-wrap: balance;
}
/* Pin + scrub: home.js adds .is-scrub; the section stays on screen for about three
   screens of scrolling while 01 -> 04 light up in turn (reversible). */
.step-dots {
  display: none;
}
.how.is-scrub {
  height: 400svh;
  padding-block: 0;
}
.how.is-scrub .how-pin {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  height: 100svh;
}
.how.is-scrub .steps li > * {
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}
.how.is-scrub .steps li.is-active > * {
  opacity: 1;
  filter: none;
}
.how.is-scrub .steps li.is-active .step-pic {
  transform: scale(1.05);
}
.how.is-scrub .steps li.is-done::after {
  color: var(--step);
  opacity: 1;
}
@media (min-width: 761px) and (max-height: 820px) {
  .how.is-scrub .steps {
    margin-top: var(--space-40);
  }
  .how.is-scrub .step-pic {
    width: var(--size-160);
  }
  .how.is-scrub .steps li:not(:last-child)::after {
    top: calc(var(--size-160) / 2);
  }
}

/* Story: the photo fills the left of the section edge to edge; the page color cuts into it
   with a soft wave, and the story sits on the right. */
.story-main {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: var(--space-64);
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--section-space) var(--gutter);
}
/* Section title, same as the other sections (e.g. お手伝いできること). */
.story-head {
  grid-column: 1 / -1;
  font-size: var(--text-h2);
}
.story-main:has(.story-head) {
  row-gap: var(--space-48);
}
.story-photo {
  position: relative;
  align-self: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.story-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% center;
}
.story-wave {
  position: absolute;
  top: 0;
  right: -1px;
  width: 26%;
  height: 100%;
  fill: var(--bg);
}
.story-body {
  padding-block: var(--space-80);
}
/* Top page (2026-11-01): the story sits on a soft cream band so the bright photo
   has a visible edge and the section is set apart from its white neighbours. */
#story {
  background: var(--story-bg);
}
#story .story-wave {
  fill: var(--story-bg);
}
/* Wide screens (2026-11-01): the body's 80px top/bottom padding pushed the photo and
   title far below the section heading; keep them close to 「代表の想い」. */
@media (min-width: 761px) {
  #story .story-main {
    row-gap: var(--space-32);
  }
  #story .story-body {
    padding-block: var(--space-16);
  }
}
/* Slow zoom (2026-11-01, author's request, 案A): once the photo comes into view it
   grows to 1.08 over 12s, one time only, then rests. Not for reduced motion. */
#story .story-photo img {
  transition: transform 12s ease-out;
}
#story .story-photo.is-zoom img {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .ws .button:hover,
  .ws .button:focus-visible {
    transform: none;
  }
  #story .story-photo img,
  #story .story-photo.is-zoom img {
    transition: none;
    transform: none;
  }
}
.txt > p:last-child {
  margin-bottom: 0;
}
.story-title {
  font-size: var(--text-story);
  line-height: var(--leading-dark);
}
.story-accent {
  color: var(--story-lamp);
}
.txt {
  margin-top: var(--space-40);
}
.txt > p {
  max-width: var(--size-560);
  margin-bottom: var(--space-28);
  font-size: var(--text-16);
  line-height: var(--leading-story);
  word-break: auto-phrase;
}
/* Name and proof under the short story (2026-11-01 review): who is speaking. */
.story-profile {
  margin-top: var(--space-20);
  font-size: var(--text-14);
}
.story-profile-proof {
  display: block;
  margin-top: var(--space-4);
  font-weight: var(--weight-bold);
}
/* The number stands out in black: 「250」 large in the display face, and a yellow
   marker under 「250件以上」 like 「売上まで。」 (2026-11-01, 案C). */
.story-profile-num {
  padding-inline: var(--space-4);
  background: linear-gradient(transparent 62%, var(--marker-yellow) 62%, var(--marker-yellow) 92%, transparent 92%);
}
.story-profile-big {
  font-family: var(--font-display);
  font-size: var(--text-22);
  line-height: 1;
}
/* Top page keeps two lines and links to /about/ for the full story (2026-11-01). */
.txt > .story-more {
  display: inline-block;
  margin-top: var(--space-8);
}
/* The full story is long: keep the square photo square instead of stretching it. */
.about-page .story-photo {
  align-self: start;
  aspect-ratio: 1 / 1;
}
/* Small label above the story heading so the section does not start abruptly. */
.story-eyebrow {
  margin-bottom: var(--space-16);
  color: var(--story-lamp-text);
  font-size: var(--text-15);
  font-weight: var(--weight-bold);
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-48);
}
.txt > .name-story {
  margin-top: var(--space-48);
  padding-top: var(--space-40);
  border-top: var(--border-thin) solid var(--line);
  color: var(--muted);
  font-size: var(--text-15);
}

/* Voice: one customer quote (placeholder until permission) + agency / industries. */
.voice-sec {
  padding-block: var(--section-space);
}
.voice-sec h2,
.faq h2 {
  font-size: var(--text-h2);
}
/* Five real voices (2026-11-01, redrawn from the author's sample): a heading with
   amber strokes and a one-line lead; each voice is a soft speech bubble with an
   industry icon in a circle on the left, swiped sideways, with dots underneath. */
.voice-head {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.voice-head h2 {
  flex: none;
}
.voice-lead {
  flex: 1;
  padding-left: var(--space-32);
  border-left: var(--border-thin) solid var(--line);
  color: var(--muted);
  font-size: var(--text-15);
  line-height: var(--leading-body);
}
.voice-nav {
  display: flex;
  flex: none;
  gap: var(--space-12);
}
.voice-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-48);
  height: var(--size-48);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-circle);
  background: var(--paper);
  box-shadow: 0 var(--space-4) var(--space-12) color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: var(--text-18);
  cursor: pointer;
}
.voice-nav button:hover:not(:disabled) {
  background: var(--story-bg);
}
.voice-nav button:disabled {
  opacity: var(--opacity-disabled);
  cursor: default;
}
.voice-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-4) var(--space-48);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
}
.voice-grid::-webkit-scrollbar {
  display: none;
}
/* Card (2026-11-01, from the author's second sample): a white speech bubble with the
   line of business as a small heading over a rule, the words below, and a photo on the
   right with a slanted left edge. Photos come from Canva; until then a pale grey box. */
.voice-card {
  flex: 0 0 calc((100% - var(--space-24)) / 2);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  grid-template-rows: auto 1fr;
  column-gap: var(--space-24);
  scroll-snap-align: start;
  margin: 0 0 var(--space-12);
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-32);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 var(--space-16) var(--space-20) calc(-1 * var(--space-10)) color-mix(in srgb, var(--ink) 22%, transparent);
}
.voice-card::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--space-10));
  left: var(--space-48);
  width: var(--space-20);
  height: var(--space-20);
  border-right: var(--border-thin) solid var(--line);
  border-bottom: var(--border-thin) solid var(--line);
  background: var(--paper);
  transform: rotate(45deg);
}
.voice-who {
  grid-column: 1;
  grid-row: 1;
  margin-top: var(--space-16);
  padding-bottom: var(--space-14);
  border-bottom: var(--border-thin) solid var(--line);
  color: var(--ink);
  font-size: var(--text-22);
  font-weight: var(--weight-bold);
}
.voice-bubble {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--space-20);
  padding-bottom: var(--space-16);
}
.voice-photo {
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.voice-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Counselor photo: keep the clasped hands in view, not the knees in the middle. */
.voice-photo--hands img {
  object-position: 35% center;
}
.voice-card blockquote {
  margin: 0;
}
.voice-card blockquote p {
  font-size: var(--text-15);
  line-height: var(--leading-body);
}
.voice-card blockquote p + p {
  margin-top: var(--space-12);
}
/* Same height for every card (案A): once home.js marks the row ready, the text stops at
   a fixed height and fades out; long voices get 「続きを読む」, which opens that card only.
   Without JS every voice is shown in full. */
.voice-grid.is-ready .voice-card blockquote {
  height: var(--size-200);
  overflow: hidden;
}
.voice-grid.is-ready .voice-card.is-clamped blockquote {
  mask-image: linear-gradient(to bottom, var(--ink) 60%, transparent);
}
.voice-grid.is-ready .voice-card.is-open blockquote {
  height: auto;
  mask-image: none;
}
.voice-more {
  margin-top: var(--space-12);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--text-13);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
  cursor: pointer;
}
.voice-card:not(.is-clamped) .voice-more {
  visibility: hidden;
}
/* Dots under the row: where you are among the five; click to jump. */
.voice-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
}
.voice-dots button {
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--line);
  cursor: pointer;
}
.voice-dots button[aria-current="true"] {
  background: var(--muted);
}
/* /about/ (2026-11-01, from the author's sample): a soft card with the name, a short
   career line, the number and the agency; then photos in rounded shapes beside the story. */
/* Owner card (2026-11-02, author's sample): one long row — a taupe label block on
   the left edge, name, short bio between two thin rules, and the two facts stacked. */
.about-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "label name intro facts";
  align-items: center;
  position: relative;
  overflow: hidden;
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--max-width) - var(--gutter) * 2);
  margin: var(--space-32) auto 0;
  padding-right: var(--space-40);
  border-radius: var(--radius-small);
  background: var(--about-card);
}
.about-card-label {
  grid-area: label;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-40) var(--space-32);
  background: var(--about-tag);
  color: var(--paper);
  font-size: var(--text-15);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body);
}
.about-card-label::after {
  content: "";
  width: var(--size-40);
  margin-top: var(--space-20);
  border-top: var(--border-thin) solid var(--paper);
}
.about-card-name {
  grid-area: name;
  padding: var(--space-40);
}
.about-card-person {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-32);
  line-height: var(--leading-heading);
  white-space: nowrap;
}
.about-card-role {
  margin-top: var(--space-8);
  font-size: var(--text-15);
  white-space: nowrap;
}
.about-card-intro {
  grid-area: intro;
  padding-inline: var(--space-40);
  border-inline: var(--border-thin) solid var(--line);
  font-size: var(--text-15);
  line-height: var(--leading-body);
}
.about-card-facts {
  grid-area: facts;
  padding: var(--space-32) 0 var(--space-32) var(--space-40);
}
/* Keep the facts column as narrow as its widest line (label / 250 件以上). */
.about-card-facts .story-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding-bottom: var(--space-12);
  border-bottom: var(--border-thin) solid var(--line);
}
.about-card-facts .story-stat-label {
  grid-column: 1 / -1;
}
.about-card-partner {
  margin-top: var(--space-12);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-22);
  white-space: nowrap;
}
/* Narrow PC: the bio moves under the name and facts (below 1180px the bio no
   longer fits its three lines in one row). */
@media (min-width: 761px) and (max-width: 1179px) {
  .about-card {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "label name facts"
      "label intro intro";
  }
  .about-card-name {
    padding-bottom: var(--space-24);
  }
  .about-card-facts {
    padding-bottom: var(--space-24);
  }
  .about-card-intro {
    margin-left: var(--space-48);
    padding: var(--space-24) 0 var(--space-32);
    border-inline: 0;
    border-top: var(--border-thin) solid var(--line);
  }
  .about-card-intro br {
    display: none;
  }
}
.story-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-8);
  color: var(--ink);
}
.story-stat-label {
  width: 100%;
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
}
.story-stat strong {
  font-family: var(--font-en);
  font-size: var(--text-48);
  font-weight: var(--weight-number);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-proof);
  color: var(--story-lamp);
}
.story-stat-unit {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-18);
}
.about-photos {
  position: relative;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.about-photo {
  display: block;
  width: 92%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 20% center;
  border-radius: var(--radius-blob-1);
}
/* The lamp photo (2026-11-01, replaced the video): a tall photo shown in a
   wide box, cut around the lamp. */
.about-lamp {
  position: relative;
  width: 72%;
  margin-left: auto;
}
.about-photo-2 {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-position: center 62%;
  border-radius: var(--radius-blob-2);
}
/* Meal and shop seat (2026-11-01): the sample's 3rd and 4th photos,
   alternating left and right like the first two. */
.about-photo-3 {
  width: 70%;
  aspect-ratio: 4 / 3;
  object-position: center;
  border-radius: var(--radius-blob-2);
}
.about-photo-4 {
  width: 84%;
  margin-left: auto;
  aspect-ratio: 4 / 3;
  object-position: 60% center;
}
/* /about/ follows the author's sample closely (2026-11-01): two even columns,
   tighter story text, photos close together over a soft cream shape. */
.about-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 761px) {
  .about-page .story-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-48);
    padding-top: var(--space-48);
  }
  .about-page .story-body {
    padding-block: var(--space-32) 0;
  }
}
.about-page .txt {
  margin-top: var(--space-24);
}
.about-page .txt > p {
  margin-bottom: var(--space-14);
  font-size: var(--text-17);
  line-height: var(--leading-about);
}
.about-page .txt > .name-story {
  margin-top: var(--space-28);
  padding-top: var(--space-24);
  border-top: var(--border-thin) solid var(--line);
  color: var(--ink);
  font-size: var(--text-17);
}
/* Phone only (2026-11-01, 案A): the meal and shop photos sit inside the story,
   where the story reaches them. On wide screens they are in the photo column. */
.about-inline {
  display: none;
}
.about-page .about-actions {
  margin-top: var(--space-32);
}
.about-photos {
  isolation: isolate;
  gap: var(--space-12);
}
/* A soft wavy band (2026-11-02, author's choice A) that sways left and right down the
   photo column, tying home → lamp → meal → shop together. The shape is an SVG mask
   stretched to the box; the color stays a token. */
.about-photos::before {
  content: "";
  position: absolute;
  top: 22%;
  right: -4%;
  bottom: -3%;
  left: -6%;
  z-index: -1;
  background: var(--about-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 2C45 0 85 0 92 6C100 18 76 28 86 42C96 56 100 66 88 78C78 90 94 98 70 100C50 100 20 99 10 92C0 84 18 70 8 56C0 42 16 32 6 18C0 8 6 4 20 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 2C45 0 85 0 92 6C100 18 76 28 86 42C96 56 100 66 88 78C78 90 94 98 70 100C50 100 20 99 10 92C0 84 18 70 8 56C0 42 16 32 6 18C0 8 6 4 20 2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.about-page .about-photo-1 {
  width: 100%;
}
.about-page .about-lamp {
  width: 58%;
  margin-top: calc(-1 * var(--space-24));
  margin-right: 4%;
}
.about-page .about-photo-3 {
  width: 70%;
  aspect-ratio: 6 / 5;
}
.about-page .about-photo-4 {
  width: 80%;
  margin-right: 6%;
  aspect-ratio: 13 / 10;
}

/* FAQ: plain open/close list (details/summary). No animation. */
.faq {
  padding-block: var(--section-space);
}
.faq-list {
  margin-top: var(--space-48);
  border-top: var(--border-thin) solid var(--line);
}
.faq-item {
  border-bottom: var(--border-thin) solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--size-44);
  padding-block: var(--space-24);
  font-weight: var(--weight-bold);
  font-size: var(--text-16);
  line-height: var(--leading-heading);
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: "Q";
  flex: none;
  font-family: var(--font-en);
  font-weight: var(--weight-number);
  color: var(--muted);
}
.faq-item summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-22);
  font-weight: var(--weight-bold);
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item summary:focus-visible {
  outline: var(--border-strong) solid var(--ink);
  outline-offset: var(--focus-offset);
}
.faq-item p {
  padding: 0 var(--space-40) var(--space-24);
  color: var(--muted);
  font-size: var(--text-14);
  line-height: var(--leading-body);
}
@media (max-width: 760px) {
  .voice-sec h2,
  .faq h2 {
    font-size: var(--text-25);
  }
  /* Phone: the row runs to the screen edges so cards slide in from the side. */
  /* Phone: lead under the heading, arrows beside it; the row runs to the screen edges. */
  .voice-head {
    flex-wrap: wrap;
    gap: var(--space-16);
  }
  .voice-head h2 {
    flex: 1;
  }
  .voice-lead {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
    font-size: var(--text-14);
  }
  .voice-grid {
    margin: var(--space-24) calc(-1 * var(--gutter)) 0;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  /* Phone: the photo goes on top, full width, then the heading and the words. */
  .voice-card {
    flex-basis: 84%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    padding: var(--space-12) var(--space-12) var(--space-12);
  }
  .voice-photo {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    clip-path: none;
  }
  .voice-who {
    grid-row: 2;
    margin: var(--space-16) var(--space-12) 0;
    font-size: var(--text-18);
  }
  .voice-bubble {
    grid-row: 3;
    margin: var(--space-16) var(--space-12) 0;
  }
  .voice-nav button {
    width: var(--size-44);
    height: var(--size-44);
  }
  .faq-list {
    margin-top: var(--space-32);
  }
  .faq-item summary {
    padding-block: var(--space-20);
    font-size: var(--text-14);
  }
  .faq-item p {
    padding-inline: var(--space-24) 0;
  }
}

/* Same space above and below as every other section (2026-11-01). */
.ws {
  padding-block: var(--section-space);
}
/* White section right after another white section: no top padding, so the
   gap between the two is one --section-space (same as at a color band edge). */
.svc,
.how,
.ws,
.faq {
  padding-top: 0;
}
.ws .box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-80);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--workshop);
  color: var(--paper);
}
.ws .label {
  color: var(--workshop-muted);
}
.ws h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}
.ws .box > div > p:not(.label) {
  margin-top: var(--space-20);
  color: var(--workshop-muted);
}
/* Reference banner (2026-11-01): dark green, yellow marker under 勉強会, yellow sparks,
   white rows for time / seats / gift, big yellow button. */
.ws h2 {
  position: relative;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}
.ws-mark {
  background: linear-gradient(transparent 82%, var(--workshop-yellow) 82%, var(--workshop-yellow) 94%, transparent 94%);
}
.ws-pop {
  width: var(--size-48);
  height: auto;
  fill: none;
  stroke: var(--workshop-yellow);
  stroke-width: 3;
  stroke-linecap: round;
}
.ws h2 .ws-pop {
  margin-left: var(--space-8);
  vertical-align: top;
  width: 0.7em;
}
/* Sub-catch above the heading: the reader's own worry. */
.ws .box > div > p.ws-sub {
  margin: 0 0 var(--space-16);
  color: var(--paper);
  font-weight: var(--weight-bold);
  font-size: var(--text-22);
  line-height: var(--leading-heading);
}
.ws .box > div > p.ws-lead {
  margin-top: var(--space-24);
  color: var(--paper);
  font-size: var(--text-17);
  line-height: var(--leading-body);
}
.ws-facts {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-28);
}
.ws-facts > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-14) var(--space-24);
  border-radius: var(--radius-small);
  background: var(--paper);
}
.ws-facts svg {
  width: var(--space-28);
  height: var(--space-28);
  fill: none;
  stroke: var(--workshop);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ws-facts dt {
  color: var(--workshop);
  font-weight: var(--weight-bold);
  font-size: var(--text-15);
}
.ws-facts dd {
  margin: 0;
  padding-left: var(--space-20);
  border-left: var(--border-thin) solid var(--line);
  color: var(--ink);
  font-weight: var(--weight-bold);
  font-size: var(--text-16);
  line-height: var(--leading-heading);
}
.ws-cta {
  position: relative;
  margin-top: var(--space-40);
}
.ws-cta .ws-pop {
  position: absolute;
  top: calc(-1 * var(--space-28));
  left: calc(-1 * var(--space-24));
  width: var(--size-40);
  transform: scaleX(-1);
}
.ws .button {
  width: 100%;
  min-height: var(--size-64);
  padding: var(--space-20) var(--space-32);
  background: var(--paper);
  color: var(--workshop);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-22);
  box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--ink) 35%, transparent);
}
.ws .button:hover {
  background: var(--workshop-muted);
}
/* Button grows a little under the cursor or keyboard focus (2026-11-01, author's request). */
.ws .button {
  transition: transform 0.25s ease, background-color 0.25s ease;
}
@media (hover: hover) {
  .ws .button:hover {
    transform: scale(1.04);
  }
}
.ws .button:focus-visible {
  transform: scale(1.04);
}
/* Yellow accent: the arrow sits in a yellow circle. */
.ws .button::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-40);
  height: var(--size-40);
  border-radius: var(--radius-circle);
  background: var(--workshop-yellow);
  color: var(--workshop);
  font-size: var(--text-22);
}
/* Slides with three short "spark" strokes (the soft circle behind was removed 2026-11-01). */
.ws .workshop-preview {
  position: relative;
}
/* Real slides (2026-11-01): cover top-left, worries page bottom-right.
   Tilted apart so they barely touch and both can be read. */
.ws-slides {
  position: relative;
}
.ws-slide {
  display: block;
  height: auto;
  border-radius: var(--radius-small);
  box-shadow: 0 var(--space-20) var(--space-40) color-mix(in srgb, var(--ink) 30%, transparent);
}
/* Scroll tilt (2026-11-01, author's request; made stronger the same day so it shows on
   phones): home.js sets --ws-tilt from 0 to 1 while the slides cross the screen. They
   open from straight (0deg) to -8/8deg, and the back slide rises from 48px below to its
   place (never higher, so the cover's name line stays visible). At rest (no JS /
   reduced motion) 0.5 gives -4/4deg and 24px. */
.ws-slides {
  --ws-tilt: 0.5;
}
.ws-slide-front {
  width: 92%;
  transform: rotate(calc(-8deg * var(--ws-tilt)));
}
.ws-slide-back {
  position: relative;
  z-index: 1;
  width: 92%;
  margin: 3% 0 0 auto;
  transform: translateY(calc(var(--space-48) * (1 - var(--ws-tilt)))) rotate(calc(8deg * var(--ws-tilt)));
}
.ws-spark {
  position: absolute;
  top: calc(-1 * var(--space-56));
  right: var(--space-24);
  width: var(--size-48);
  height: auto;
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linecap: round;
}
@media (max-width: 1100px) {
  .ws .box {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws .workshop-preview {
    width: min(100%, var(--size-560));
    margin-inline: auto;
  }
}
.ws .workshop-preview > .workshop-caption {
  margin-top: var(--space-28);
  color: var(--workshop-muted);
  font-size: var(--text-11);
}

/* Contact (2026-11-01, from the author's sample): a cream band, everything centred —
   heading, a two-line lead, the LINE button with its icon and a small note, 「または」
   between two rules, then the form in a white card with a mail icon on top. */
.ct {
  padding-block: var(--section-space);
  background: var(--contact-bg);
  text-align: center;
}
.ct h2 {
  font-size: var(--text-h2);
}
.ct .lead {
  margin-top: var(--space-24);
  color: var(--ink);
  line-height: var(--leading-body);
}
.line-contact {
  margin-top: var(--space-40);
}
.line-contact .acts {
  justify-content: center;
  margin-top: 0;
}
.line-contact p {
  margin-top: var(--space-12);
  color: var(--muted);
}
.line-guidance {
  font-size: var(--text-13);
}
.line-contact .line-guidance {
  margin-top: var(--space-4);
}
.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-28);
  margin-top: var(--space-28);
}
.line-button {
  gap: var(--space-14);
  min-width: var(--size-340);
  padding: var(--space-16) var(--space-34);
  background: var(--hue-2);
  box-shadow: 0 var(--space-8) var(--space-20) color-mix(in srgb, var(--hue-2) 30%, transparent);
  color: var(--paper);
  font-size: var(--text-17);
}
.line-button:hover {
  background: color-mix(in srgb, var(--hue-2) 85%, var(--ink));
}
.line-icon {
  width: var(--size-40);
  height: var(--size-40);
  border-radius: var(--radius-small);
}
/* 「または」 with a thin rule on each side. */
.ct-or {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  max-width: var(--size-560);
  margin: var(--space-40) auto 0;
  color: var(--muted);
  font-size: var(--text-14);
}
.ct-or::before,
.ct-or::after {
  content: "";
  flex: 1;
  border-top: var(--border-thin) solid var(--line);
}
.form-details {
  max-width: var(--size-800);
  margin: var(--space-32) auto 0;
  padding: var(--space-48) var(--space-48) var(--space-40);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 var(--space-16) var(--space-40) color-mix(in srgb, var(--ink) 8%, transparent);
}
.form-details h3 {
  font-size: var(--text-25);
  line-height: var(--leading-heading);
}
/* After a successful send the form is replaced by this message (2026-11-02). */
.form-done {
  display: grid;
  justify-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
  text-align: center;
  outline: none;
}
.form-done[hidden],
#contact-form[hidden] {
  display: none;
}
.form-done-icon {
  display: grid;
  place-items: center;
  width: var(--size-64);
  height: var(--size-64);
  border-radius: 50%;
  background: var(--hue-2);
  color: var(--paper);
}
.form-done p {
  color: var(--ink);
  font-size: var(--text-16);
  line-height: var(--leading-body);
}
.form-done .text-link {
  margin-top: var(--space-8);
}
#contact-form {
  display: grid;
  gap: var(--space-24);
  margin-top: var(--space-32);
  color: var(--ink);
  text-align: left;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}
#contact-form label {
  display: block;
  font-weight: var(--weight-bold);
}
/* 必須 = a solid pill with white letters (2026-11-01, after sunvillage-co-ltd.com/contact),
   in the lamp's rose; 任意 = the same shape in quiet grey. */
.required,
.optional {
  display: inline-block;
  margin-left: var(--space-10);
  padding: var(--space-1) var(--space-12);
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  vertical-align: middle;
}
.required {
  background: var(--ink);
  color: var(--paper);
}
.optional {
  background: var(--panel);
  color: var(--muted);
}
input:not([type="hidden"]):not([type="checkbox"]),
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-10);
  padding: var(--space-14) var(--space-18);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-16);
  font-weight: var(--weight-regular);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
textarea {
  resize: vertical;
}
.privacy-note {
  color: var(--muted);
  font-size: var(--text-13);
}
.privacy-note {
  text-align: center;
}
#contact-form .button {
  justify-self: center;
  min-width: var(--size-220);
  padding-block: var(--space-18);
}
#form-status:empty {
  display: none;
}

#line-notice {
  position: fixed;
  inset: 0;
  width: var(--width-dialog);
  max-height: var(--height-dialog-max);
  margin: auto;
  padding: var(--space-48) var(--space-28) var(--space-32);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
#line-notice::backdrop {
  background: var(--dialog-backdrop);
}
.dialog-close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: var(--size-44);
  height: var(--size-44);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-28);
}
#line-notice h2 {
  margin-top: var(--space-16);
  font-size: var(--text-28);
}
#line-notice p + p,
#line-notice h2 + p {
  margin-top: var(--space-20);
}
.dialog-dismiss {
  margin-top: var(--space-28);
}
.dialog-dismiss::after {
  content: none;
}
.section-number {
  font-family: var(--font-en);
  font-size: var(--text-13);
  font-weight: var(--weight-label);
}

/* Shared styles for the existing privacy document. */
.privacy-page {
  padding-block: var(--section-space);
  overflow-wrap: anywhere;
}
.privacy-page h1 {
  margin: var(--space-16) 0 var(--space-32);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}
.privacy-page h2 {
  margin: var(--space-48) 0 var(--space-16);
  font-size: var(--text-28);
}
.privacy-page p,
.privacy-page ul {
  max-width: var(--size-800);
  margin-bottom: var(--space-20);
}
.privacy-page ul {
  padding-left: var(--space-24);
}
.privacy-page li + li {
  margin-top: var(--space-8);
}
.privacy-page a {
  text-underline-offset: var(--space-4);
}
.privacy-page .text-link {
  display: inline-block;
  margin-top: var(--space-28);
}
/* Footer (2026-11-01, 案A, after sunvillage-co-ltd.com): its own band — logo and one
   line on the left, every page in two columns on the right, a rule, the catch copy large,
   and a small © centred at the very bottom. */
.footer {
  padding-block: var(--space-80) var(--space-32);
  background: var(--ink);
  color: var(--on-dark);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-48);
}
.footer-top > div > .brand {
  font-size: var(--text-40);
}
.footer-note {
  margin-top: var(--space-20);
  color: var(--on-dark-muted);
  font-size: var(--text-14);
  line-height: var(--leading-body);
}
.footer-nav {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: var(--space-16) var(--space-56);
  align-content: start;
  font-size: var(--text-15);
  letter-spacing: var(--tracking-nav);
}
.footer-nav a {
  color: var(--on-dark);
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--on-dark-muted);
}
.footer-catch {
  margin-top: var(--space-56);
  padding-top: var(--space-48);
  border-top: var(--border-thin) solid var(--footer-rule);
  font-family: var(--font-display);
  font-size: var(--text-h2-dark);
  font-weight: var(--weight-display);
  line-height: var(--leading-dark);
}
.footer-copy {
  display: block;
  margin-top: var(--space-48);
  color: var(--on-dark-muted);
  font-size: var(--text-12);
  text-align: center;
}

@media (max-width: 760px) {
  .biz h2 {
    font-size: var(--text-25);
  }
  .biz-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-32);
  }
  .biz-card {
    display: grid;
    grid-template-columns: var(--size-104) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-14);
    padding: var(--space-12);
    border-radius: var(--radius-screen);
  }
  .biz-card img {
    height: 100%;
    aspect-ratio: auto;
    min-height: var(--size-96);
  }
  .biz-card img.biz-logo {
    padding: var(--space-12);
  }
  .biz-card img.biz-fit {
    padding: var(--space-4);
  }
  .biz-text {
    padding-inline: 0;
  }
  .biz-title {
    font-size: var(--text-16);
  }
  .biz-desc {
    margin-top: var(--space-6);
    font-size: var(--text-12);
    line-height: var(--leading-card);
  }
  .biz-arrow {
    align-self: center;
    width: var(--size-40);
    height: var(--size-40);
    margin-right: var(--space-4);
    font-size: var(--text-16);
  }
  /* Phone (2026-11-01): the links fold into a ☰ menu next to 「お問い合わせ」; it opens
     as a white panel under the header with one link per row. */
  .header nav {
    gap: var(--space-8);
  }
  .header .brand {
    font-size: var(--text-26);
  }
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: var(--size-48);
    height: var(--size-48);
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: var(--space-18);
    height: var(--border-strong);
    border-radius: var(--radius-pill);
    background: currentColor;
    transition: transform 0.25s ease, background-color 0.25s ease;
  }
  .nav-toggle span {
    position: relative;
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle span::before {
    transform: translateY(calc(-1 * var(--space-6)));
  }
  .nav-toggle span::after {
    transform: translateY(var(--space-6));
  }
  .is-menu-open .nav-toggle span {
    background-color: transparent;
  }
  .is-menu-open .nav-toggle span::before {
    transform: rotate(45deg);
  }
  .is-menu-open .nav-toggle span::after {
    transform: rotate(-45deg);
  }
  .header .nav-links {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-8) var(--space-20);
    border: var(--border-thin) solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
    box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .is-menu-open .nav-links {
    display: flex;
  }
  .header .nav-link {
    min-height: var(--size-48);
    font-size: var(--text-15);
  }
  .header .nav-link + .nav-link {
    border-top: var(--border-thin) solid var(--line);
  }
  /* Phone: 「お問い合わせ」 moves into the menu as its last row, a full-width button. */
  .header .nav-cta {
    display: none;
  }
  .header .nav-menu-cta {
    display: flex;
    margin-block: var(--space-12) var(--space-8);
  }
  .hero {
    margin-top: calc(-1 * var(--space-120));
  }
  .hero-lead,
  .hero-target {
    font-size: var(--text-16);
  }
  .hero-lead-first {
    margin-bottom: var(--space-8);
    font-size: var(--text-18);
  }
  .collage {
    margin-top: var(--space-56);
    --u: 0.5px;
  }
  .ph {
    flex-basis: var(--size-160);
    width: var(--size-160);
  }
  .ph .sc {
    height: var(--size-320);
  }
  .ph .menu {
    height: var(--size-104);
  }
  .num .wrap,
  .item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-28);
  }
  .num h2 {
    font-size: var(--text-25);
  }
  .dark-sub {
    margin-bottom: var(--space-20);
    font-size: var(--text-18);
  }
  .dark-rule {
    height: var(--size-40);
    margin-block: var(--space-28);
  }
  .dark-lead {
    font-size: var(--text-14);
    line-height: var(--leading-body);
  }
  .item {
    margin-top: var(--space-72);
  }
  .item:nth-of-type(even) .vis {
    order: 0;
  }
  .vis {
    height: var(--size-340);
  }
  .dash {
    width: var(--size-300);
  }
  .dash .r {
    grid-template-columns: var(--size-48) minmax(0, 1fr) var(--size-40);
  }
  .svc h2,
  .how h2 {
    font-size: var(--text-25);
  }
  .svc-lead {
    font-size: var(--text-14);
  }
  .item .item-catch {
    font-size: var(--text-18);
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-16);
    margin-top: var(--space-48);
  }
  .steps li:not(:last-child)::after {
    content: none;
  }
  .step-pic {
    width: var(--size-132);
  }
  .steps b {
    margin-top: var(--space-20);
    font-size: var(--text-32);
  }
  .story-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: none;
    padding: 0;
  }
  .story-head {
    padding: var(--section-space) var(--gutter) var(--space-28);
  }
  .story-main:has(.story-head) {
    row-gap: 0;
  }
  .story-photo {
    height: var(--size-320);
    border-radius: 0;
  }
  .story-photo,
  .about-page .story-photo {
    aspect-ratio: auto;
  }
  .about-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "name" "intro" "facts";
    margin: var(--space-20) var(--gutter) var(--space-40);
    padding: 0;
  }
  .about-card-label {
    flex-direction: row;
    padding: var(--space-12) var(--space-24);
  }
  .about-card-label br,
  .about-card-label::after {
    display: none;
  }
  .about-card-name {
    padding: var(--space-24) var(--space-24) var(--space-20);
  }
  .about-card-person {
    font-size: var(--text-28);
  }
  .about-card-intro {
    margin-inline: var(--space-24);
    padding: var(--space-20) 0;
    border-inline: 0;
    border-block: var(--border-thin) solid var(--line);
    font-size: var(--text-14);
  }
  .about-card-intro br {
    display: none;
  }
  .about-card-facts {
    padding: var(--space-20) var(--space-24) var(--space-28);
  }
  /* Phone: one photo across the width, like the top page. */
  .about-photo {
    width: 100%;
    height: var(--size-320);
    aspect-ratio: auto;
    border-radius: 0;
  }
  .about-inline {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-block: var(--space-14) var(--space-28);
    object-fit: cover;
    border-radius: var(--radius);
  }
  .about-inline-shop {
    object-position: 60% center;
  }
  .about-inline-lamp {
    margin-top: var(--space-28);
    object-position: center 60%;
  }
  .about-photos::before,
  .about-lamp,
  .about-photo-3,
  .about-photo-4 {
    display: none;
  }
  /* Phone: the author's line breaks are for wide screens; let the text flow so
     lines do not end with one or two stray words. */
  .about-page .txt br {
    display: none;
  }
  .story-photo img {
    object-position: center;
  }
  .story-wave {
    display: none;
  }
  .story-body {
    position: relative;
    max-width: none;
    margin-top: calc(-1 * var(--space-32));
    padding: var(--space-40) var(--gutter) var(--section-space);
    border-radius: var(--space-32) var(--space-32) 0 0;
    background: var(--bg);
  }
  #story .story-body {
    background: var(--story-bg);
  }
  .story-title {
    font-size: var(--text-32);
  }
  .ws .box {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-40) var(--space-24);
  }
  .ws h2 {
    font-size: var(--text-25);
  }
  .ws .box > div > p.ws-sub {
    margin-bottom: var(--space-12);
    font-size: var(--text-16);
  }
  .ws .box > div > p.ws-lead {
    font-size: var(--text-14);
  }
  .ws-facts {
    gap: var(--space-8);
  }
  .ws-facts > div {
    gap: var(--space-10);
    padding: var(--space-12) var(--space-14);
  }
  .ws-facts svg {
    width: var(--space-22);
    height: var(--space-22);
  }
  .ws-facts dt {
    font-size: var(--text-13);
  }
  .ws-facts dd {
    padding-left: var(--space-10);
    font-size: var(--text-13);
  }
  .ws .button {
    min-height: var(--size-60);
    font-size: var(--text-18);
  }
  .ws-cta .ws-pop {
    left: calc(-1 * var(--space-12));
    width: var(--size-40);
  }
  .ws-spark {
    top: calc(-1 * var(--space-40));
    width: var(--size-40);
  }
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-details {
    padding: var(--space-32) var(--space-20) var(--space-28);
  }
  .form-details h3 {
    font-size: var(--text-22);
  }
  .line-button {
    min-width: 0;
    width: 100%;
    padding-inline: var(--space-20);
    font-size: var(--text-16);
  }
  .footer {
    padding-top: var(--space-56);
  }
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }
  .footer-top > div > .brand {
    font-size: var(--text-32);
  }
  .footer-nav {
    gap: var(--space-14) var(--space-32);
    font-size: var(--text-14);
  }
  .footer-catch {
    margin-top: var(--space-40);
    padding-top: var(--space-32);
  }
}

/* Opening: seven colors gather into a lamp (restored from 1066da0). */
.brand-intro {
  position: relative;
  min-height: 680px;
  height: calc(100svh - var(--height-header));
  display: grid;
  place-items: center;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  z-index: 2;
}
.intro-lights {
  position: absolute;
  left: 50%;
  top: calc(50% - 167px);
  width: min(1200px, 100%);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.intro-light {
  --x: 0px;
  --color: var(--filament-1);
  color: var(--color);
  opacity: 0;
  transform: translate(var(--x), 18px);
  animation:
    module-arrive 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards,
    module-assemble 1.75s 2.3s cubic-bezier(0.65, 0, 0.2, 1) forwards;
}
.intro-light:nth-of-type(1) {
  --x: -300px;
  --color: var(--filament-1);
  animation-delay: 0.08s, 2.3s;
}
.intro-light:nth-of-type(2) {
  --x: -200px;
  --color: var(--filament-2);
  animation-delay: 0.24s, 2.3s;
}
.intro-light:nth-of-type(3) {
  --x: -100px;
  --color: var(--filament-3);
  animation-delay: 0.4s, 2.3s;
}
.intro-light:nth-of-type(4) {
  --x: 0px;
  --color: var(--filament-4);
  animation-delay: 0.56s, 2.3s;
}
.intro-light:nth-of-type(5) {
  --x: 100px;
  --color: var(--filament-5);
  animation-delay: 0.72s, 2.3s;
}
.intro-light:nth-of-type(6) {
  --x: 200px;
  --color: var(--filament-6);
  animation-delay: 0.88s, 2.3s;
}
.intro-light:nth-of-type(7) {
  --x: 300px;
  --color: var(--filament-7);
  animation-delay: 1.04s, 2.3s;
}
.module-solid {
  animation: module-fold 1.75s 2.3s cubic-bezier(0.65, 0, 0.2, 1) forwards;
}
.pendant-lamp {
  opacity: 0;
  transform: translateY(8px);
  animation: lamp-arrive 1.2s 3.2s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
.lamp-emitter,
.lamp-illumination {
  opacity: 0;
  animation: lamp-light 1.8s 3.6s ease-in-out forwards;
}
.lamp-illumination {
  pointer-events: none;
}
.brand-reveal {
  position: relative;
  text-align: center;
  z-index: 3;
  padding: 102px 22px 0;
  opacity: 0;
  transform: translateY(16px);
  animation: identity-arrive 1s 4s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
.brand-reveal .tagline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-intro-copy);
  font-weight: var(--weight-display);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-brand);
  color: var(--ink);
}
/* The display font has no proportional punctuation, so trim the blank half after "、" by hand. */
.brand-reveal .intro-comma {
  margin-right: -0.4em;
}
/* "色" cycles in step with the lamp light, using the edge tones for legibility. */
/* Keep "色" centered under the lamp: before | 色 | after. */
.brand-reveal .intro-before {
  text-align: right;
}
.brand-reveal .intro-after {
  text-align: left;
}
.brand-reveal .intro-color {
  color: var(--lamp-edge-1);
  animation: intro-color-cycle 28s 5.6s ease-in-out infinite;
}
/* Typewriter: home.js wraps each character; hidden characters keep their space,
   so the line never reflows and "色" stays under the lamp. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tw-char {
  position: relative;
  visibility: hidden;
}
.tw-char.is-typed {
  visibility: visible;
}
.tw-char.is-caret::after {
  content: "";
  position: absolute;
  top: 0.18em;
  right: -0.05em;
  bottom: 0.18em;
  width: 0.06em;
  min-width: 2px;
  background: var(--ink);
  animation: tw-caret 0.9s steps(1) infinite;
}
.hero-lead.tw-waiting > .nb,
.hero-lead > .nb {
  transition: opacity 0.9s ease;
}
.hero-lead.tw-waiting > .nb {
  opacity: 0;
}
/* The target line fades in with the lead, a moment after it (2026-11-01). */
.hero-target {
  transition: opacity 0.9s ease 0.4s;
}
.hero-lead.tw-waiting + .hero-target {
  opacity: 0;
}
@keyframes tw-caret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tw-char {
    visibility: visible;
  }
  .tw-char.is-caret::after {
    content: none;
  }
}
/* Floating consult button (2026-11-01, replaced "back to opening"): shown once the
   opening is out of view, hidden while the contact section is on screen. */
.float-cta {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 25;
  display: none;
  padding: var(--space-14) var(--space-24);
  font-size: var(--text-14);
  box-shadow: 0 var(--space-8) var(--space-24) color-mix(in srgb, var(--ink) 20%, transparent);
}
.float-cta.is-ready {
  display: inline-flex;
}
.brand-intro {
  scroll-margin-top: 0;
}
@keyframes module-arrive {
  to {
    opacity: 1;
    transform: translate(var(--x), 0);
  }
}
@keyframes module-assemble {
  from {
    opacity: 1;
    transform: translate(var(--x), 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes module-fold {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  65% {
    opacity: 0.75;
  }
  100% {
    transform: scale(0.12);
    opacity: 0;
  }
}
@keyframes lamp-arrive {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lamp-light {
  to {
    opacity: 1;
  }
}
@keyframes identity-arrive {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 760px) {
  .brand-intro {
    height: auto;
    min-height: var(--size-560);
  }
  .intro-lights {
    top: calc(50% - 117px);
    width: 150%;
    max-width: none;
  }
  .brand-reveal {
    padding-top: 52px;
  }
  .brand-reveal .tagline {
    font-size: var(--text-intro-copy-sp);
  }
  .float-cta {
    right: var(--space-16);
    bottom: var(--space-16);
  }
  .intro-light {
    --mobile-scale: 1.4;
  }
  .module-solid {
    scale: var(--mobile-scale, 1);
  }
  .intro-light:nth-of-type(1) {
    --x: -240px;
  }
  .intro-light:nth-of-type(2) {
    --x: -160px;
  }
  .intro-light:nth-of-type(3) {
    --x: -80px;
  }
  .intro-light:nth-of-type(5) {
    --x: 80px;
  }
  .intro-light:nth-of-type(6) {
    --x: 160px;
  }
  .intro-light:nth-of-type(7) {
    --x: 240px;
  }
}
@media (max-height: 600px) and (min-width: 761px) {
  .brand-intro {
    min-height: 540px;
  }
  .intro-lights {
    top: calc(50% - 100px);
    width: 850px;
  }
  .brand-reveal {
    padding-top: 90px;
  }
  .brand-reveal .tagline {
    font-size: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-light {
    animation: none !important;
    opacity: 0;
  }
  .module-solid {
    animation: none !important;
    opacity: 0;
  }
  .pendant-lamp {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .lamp-emitter,
  .lamp-illumination {
    animation: none !important;
    opacity: 1;
  }
  .brand-reveal,
  .brand-reveal .intro-color {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* A 28-second color journey, with constant opacity and no flashing. */
.lamp-color {
  animation: lamp-spectrum 28s 5.6s ease-in-out infinite;
}
.lamp-color-highlight {
  animation: lamp-spectrum-highlight 28s 5.6s ease-in-out infinite;
}
.lamp-color-edge {
  animation: lamp-spectrum-edge 28s 5.6s ease-in-out infinite;
}
@keyframes intro-color-cycle {
  0.00000% {
    color: var(--lamp-edge-1);
  }
  14.28571% {
    color: var(--lamp-edge-2);
  }
  28.57143% {
    color: var(--lamp-edge-3);
  }
  42.85714% {
    color: var(--lamp-edge-4);
  }
  57.14286% {
    color: var(--lamp-edge-5);
  }
  71.42857% {
    color: var(--lamp-edge-6);
  }
  85.71429% {
    color: var(--lamp-edge-7);
  }
  100.00000% {
    color: var(--lamp-edge-1);
  }
}
@keyframes lamp-spectrum {
  0.00000% {
    stop-color: var(--lamp-spectrum-1);
    color: var(--lamp-spectrum-1);
  }
  14.28571% {
    stop-color: var(--lamp-spectrum-2);
    color: var(--lamp-spectrum-2);
  }
  28.57143% {
    stop-color: var(--lamp-spectrum-3);
    color: var(--lamp-spectrum-3);
  }
  42.85714% {
    stop-color: var(--lamp-spectrum-4);
    color: var(--lamp-spectrum-4);
  }
  57.14286% {
    stop-color: var(--lamp-spectrum-5);
    color: var(--lamp-spectrum-5);
  }
  71.42857% {
    stop-color: var(--lamp-spectrum-6);
    color: var(--lamp-spectrum-6);
  }
  85.71429% {
    stop-color: var(--lamp-spectrum-7);
    color: var(--lamp-spectrum-7);
  }
  100.00000% {
    stop-color: var(--lamp-spectrum-1);
    color: var(--lamp-spectrum-1);
  }
}
@keyframes lamp-spectrum-highlight {
  0.00000% {
    stop-color: var(--lamp-highlight-1);
    color: var(--lamp-highlight-1);
  }
  14.28571% {
    stop-color: var(--lamp-highlight-2);
    color: var(--lamp-highlight-2);
  }
  28.57143% {
    stop-color: var(--lamp-highlight-3);
    color: var(--lamp-highlight-3);
  }
  42.85714% {
    stop-color: var(--lamp-highlight-4);
    color: var(--lamp-highlight-4);
  }
  57.14286% {
    stop-color: var(--lamp-highlight-5);
    color: var(--lamp-highlight-5);
  }
  71.42857% {
    stop-color: var(--lamp-highlight-6);
    color: var(--lamp-highlight-6);
  }
  85.71429% {
    stop-color: var(--lamp-highlight-7);
    color: var(--lamp-highlight-7);
  }
  100.00000% {
    stop-color: var(--lamp-highlight-1);
    color: var(--lamp-highlight-1);
  }
}
@keyframes lamp-spectrum-edge {
  0.00000% {
    stop-color: var(--lamp-edge-1);
    color: var(--lamp-edge-1);
  }
  14.28571% {
    stop-color: var(--lamp-edge-2);
    color: var(--lamp-edge-2);
  }
  28.57143% {
    stop-color: var(--lamp-edge-3);
    color: var(--lamp-edge-3);
  }
  42.85714% {
    stop-color: var(--lamp-edge-4);
    color: var(--lamp-edge-4);
  }
  57.14286% {
    stop-color: var(--lamp-edge-5);
    color: var(--lamp-edge-5);
  }
  71.42857% {
    stop-color: var(--lamp-edge-6);
    color: var(--lamp-edge-6);
  }
  85.71429% {
    stop-color: var(--lamp-edge-7);
    color: var(--lamp-edge-7);
  }
  100.00000% {
    stop-color: var(--lamp-edge-1);
    color: var(--lamp-edge-1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lamp-color,
  .lamp-color-highlight,
  .lamp-color-edge {
    animation: none !important;
  }
}

.filament-halo,
.filament-color,
.filament-core {
  stroke: none;
}
.filament-halo {
  fill: currentColor;
  opacity: 0.12;
  filter: url(#filament-soft);
}
.filament-color {
  fill: currentColor;
}
.filament-core {
  fill: var(--filament-core);
  opacity: 0.7;
}

/* Pin + scrub on phones: one stage at a time, with 01-04 markers above. */
@media (max-width: 760px) {
  .how.is-scrub .step-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-24);
    font-family: var(--font-en);
    font-size: var(--text-13);
    font-weight: var(--weight-number);
    color: var(--line);
  }
  .how.is-scrub .step-dots span {
    transition: color 0.45s ease;
  }
  .how.is-scrub .step-dots span.is-active:nth-child(1) {
    color: var(--step-1);
  }
  .how.is-scrub .step-dots span.is-active:nth-child(2) {
    color: var(--step-2);
  }
  .how.is-scrub .step-dots span.is-active:nth-child(3) {
    color: var(--step-3);
  }
  .how.is-scrub .step-dots span.is-active:nth-child(4) {
    color: var(--step-4);
  }
  .how.is-scrub .steps {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-32);
  }
  .how.is-scrub .steps li {
    grid-area: 1 / 1;
    opacity: 0;
  }
  .how.is-scrub .steps li.is-active {
    opacity: 1;
  }
  .how.is-scrub .step-pic {
    width: var(--size-200);
  }
}
@media (max-width: 760px) and (max-height: 700px) {
  .how.is-scrub .step-pic {
    width: var(--size-160);
  }
}