/* 自動生成 — packages/ui/scripts/build-wp-theme.mjs が作る。手で編集しない。
   見た目を直すときは packages/ui の該当 CSS を直して、このスクリプトを流し直す。 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Sora:wght@500;600;700&display=swap');
/* ---- src/styles/tokens.css ---- */
/*
 * Design tokens for @matsushima/ui.
 *
 * Colour rule (the core of this brand): neon never sits bare on paper.
 * --andon-accent is only 1.0:1 against --andon-bg (the paper), but 16.8:1 against
 * --andon-text (the ink) — so it is only ever used as a *filled area that is
 * lit*: a button's ink pill with lime text, the AI slab, a lit chip, the
 * headline highlighter. Never as text sitting directly on --andon-bg.
 * Small text on paper uses the darker --andon-accent-text / --andon-accent-2-text
 * instead of the raw --andon-accent / --andon-accent-2 neons.
 *
 * Tokens are defined on BOTH :root and .andon-theme so every component renders
 * correctly with no wrapper/provider required.
 */

:root,
.andon-theme {
  --andon-bg: var(--wp--preset--color--paper); /* 地 = 少し青みのある白 */
  --andon-card: var(--wp--preset--color--card); /* 紙の上に置いた白いカード */
  --andon-text: var(--wp--preset--color--ink); /* インク(ブランドの黒) */
  --andon-muted: var(--wp--preset--color--muted); /* 補足の文字。紙の上で 7:1 */
  --andon-accent: var(--wp--preset--color--accent); /* 主役のネオン(アシッドグリーン)。墨の上で 16.8:1 */
  --andon-accent-2: var(--wp--preset--color--accent-2); /* 差し色のネオン(オレンジ)。墨の上で 6.8:1 */
  --andon-accent-text: var(--wp--custom--accent-text); /* 紙の上で文字に使える緑の濃い版。6.3:1 */
  --andon-accent-2-text: var(--wp--custom--accent-2-text); /* 紙の上で文字に使えるオレンジの濃い版。5.9:1 */
  --andon-accent-2-line: #e4500e; /* 紙の上の線・点に使うオレンジ。図形の基準 3:1 を超える 3.5:1 */
  --andon-ink: var(--wp--preset--color--ink); /* ネオンの面にのせる文字色 */
  --andon-ink-2: #1a2033; /* 墨の上に置く面(バッジ・副ボタン)。紙色の文字で 14.6:1 */
  --andon-k: 1; /* 演出の時間の倍率。再訪時は 0.3 にして短い版にする */
  --andon-glass: var(--wp--preset--color--card);
  --andon-glass-border: var(--wp--custom--glass-border);
  --andon-line: var(--wp--custom--line);
  --andon-pad: var(--wp--custom--pad); /* ≤640px で 20px */
  --andon-ease: var(--wp--custom--ease);
}

@media (max-width: 640px) {
  :root,
  .andon-theme {
    --andon-pad: 20px;
  }
}

/* ---- src/styles/base.css ---- */

/*
 * .andon-theme: the component-level surface. This is the ".theme" rule from
 * the source design, minus the page-level concerns (overflow: hidden,
 * min-height: 100%, position: relative) that only made sense on a full page.
 */
.andon-theme {
  box-sizing: border-box;
  background: var(--andon-bg);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  font-size: 15px;
  color: var(--andon-text);
  -webkit-text-size-adjust: 100%;
}

.andon-theme *,
.andon-theme *::before,
.andon-theme *::after {
  box-sizing: border-box;
}

/*
 * What makes a component correct on its own.
 *
 * Every component root carries a `andon-…` class. The rules above put the face
 * and the box model on `.andon-theme`, which is fine for a whole page but wrong
 * for a component used without one — and both of the ways this library gets
 * used do exactly that: the design tool renders each component alone in its
 * own card, and a page built from the library need not wrap anything. Left as
 * an ancestor requirement, Japanese text falls back to the browser's serif and
 * padding is measured content-box, so anything with a border overflows.
 *
 * Only the face and the box model are repeated here. Colour is deliberately
 * left out: the hero band flips its text to the paper colour and its children
 * must inherit that, so re-asserting ink on every `andon-` element would undo it.
 * Font size is left out for the same reason — it would reset inside a heading.
 *
 * This block sits before the utility classes on purpose: `.andon-head` and
 * `.andon-sora` have the same specificity and must win, as must every component
 * stylesheet, which the CSS build concatenates after this file.
 */
[class^="andon-"],
[class*=" andon-"] {
  box-sizing: border-box;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
}

[class^="andon-"] *,
[class^="andon-"] *::before,
[class^="andon-"] *::after,
[class*=" andon-"] *,
[class*=" andon-"] *::before,
[class*=" andon-"] *::after {
  box-sizing: border-box;
}

/* Utility classes -------------------------------------------------------- */

/* All headings use this. */
.andon-head {
  font-family: 'M PLUS 1p', 'Hiragino Sans', sans-serif;
  font-weight: 900;
}

/* Latin/numeric accents (prices, labels, monospace-ish figures). */
.andon-sora {
  font-family: 'Sora', 'Zen Kaku Gothic New', sans-serif;
}

/* Shared focus ring -------------------------------------------------------
 * Scoped under .andon-theme for anything rendered inside a themed subtree, and
 * also applied directly to the library's own interactive classes so a
 * component still gets a visible ring even with no .andon-theme ancestor
 * (tokens live on :root too — no provider is ever required).
 */
.andon-theme :focus-visible,
.andon-btn:focus-visible {
  outline: 2px solid var(--andon-accent);
  outline-offset: 2px;
}

/* @property registrations --------------------------------------------------
 * The source design animates --lx/--ly in @keyframes sweep without
 * registering them, so the browser can't interpolate between values and they
 * jump discretely instead of sweeping smoothly. Registering them here fixes
 * that ahead of time for whichever component ports the Hero's lattice effect.
 */
@property --andon-lx {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 22%;
}

@property --andon-ly {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 18%;
}

/* Card pointer-spotlight position. Set on the card itself, read on its
 * ::after pseudo-element — pseudo-elements inherit from their originating
 * element, so these must be inheritable or the spotlight would be frozen at
 * its initial value on ::after regardless of where the pointer is.
 */
@property --andon-sp-x {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --andon-sp-y {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

/* NOTE: no @media (prefers-reduced-motion: reduce) block here on purpose —
 * see CONVENTIONS.md. Each component ships its own reduce block. */

/* ---- src/primitives/Button.css ---- */
.andon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.2s ease,
    color 0.35s var(--andon-ease),
    background-size 0.35s var(--andon-ease);
}

.andon-btn:active {
  transform: scale(0.96);
}

.andon-btn:disabled,
.andon-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ink — escape hatch for a button on a dark/ink surface outside Hero, plus
 * the same declarations under .andon-hero so a <Button> inside a Hero is
 * correct with no prop (source: `.theme .hero .cta`, `.theme .hero .ghost`).
 * Placed before the hover blocks below so hover still wins on tied
 * specificity, matching the source's own rule order (`.hero .cta` precedes
 * `.cta:hover` there too). */
.andon-btn--ink.andon-btn--primary {
  border: 1px solid rgba(212, 255, 0, 0.55);
  box-shadow:
    0 0 22px rgba(212, 255, 0, 0.35),
    inset 0 0 14px rgba(212, 255, 0, 0.12);
}

.andon-btn--ink.andon-btn--ghost,
.andon-hero .andon-btn--ghost {
  background: var(--andon-ink-2);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--andon-bg);
}

/* Hero: the primary is the lit area itself — a neon pill with ink text —
 * and both actions are pills. (In WordPress the block's own colour classes
 * must say the same: text ink, background accent.) */
.andon-hero .andon-btn {
  min-height: 56px;
  border-radius: 999px;
  padding: 0 28px;
  font-size: 16px;
}

.andon-hero .andon-btn--primary {
  color: var(--andon-ink);
  background-color: var(--andon-accent);
  background-image: none;
  border: 0;
  font-weight: 900;
  box-shadow: none;
}

@media (hover: hover) {
  .andon-hero .andon-btn--primary:hover {
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.6);
  }
}

/* variant: primary — the filled ink pill with a neon glow (source: .cta).
 * On hover the neon fills the pill from the left and the label turns ink,
 * so the whole button becomes the lit area. The fill is a background-image
 * (not a pseudo-element) so it survives WordPress's core/button split, where
 * the class sits on a wrapper and the real link is a child. */
.andon-btn--primary {
  color: var(--andon-accent);
  background-color: var(--andon-text);
  background-image: linear-gradient(var(--andon-accent), var(--andon-accent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 0 18px rgba(212, 255, 0, 0.26);
}

@media (hover: hover) {
  .andon-btn--primary:hover {
    box-shadow: 0 0 28px 4px rgba(212, 255, 0, 0.5);
    transform: translateY(-2px);
    color: var(--andon-ink);
    background-size: 100% 100%;
  }
}

.andon-btn--primary:focus-visible {
  color: var(--andon-ink);
  background-size: 100% 100%;
}

/* variant: ghost — outlined (source: .ghost) */
.andon-btn--ghost {
  padding: 14px 22px;
  color: var(--andon-text);
  background: var(--andon-card);
  border: 1px solid var(--andon-glass-border);
}

@media (hover: hover) {
  .andon-btn--ghost:hover {
    color: var(--andon-accent-2-text);
    border-color: var(--andon-accent-2-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-btn {
    transition: none;
  }

  .andon-btn:active,
  .andon-btn--primary:hover,
  .andon-btn--ghost:hover {
    transform: none;
  }
}


/* ---- WordPress: core/button の中のリンクにも同じ見た目を当てる ---- */
.wp-block-button.andon-btn { padding: 0; background: none; border: 0; }
.andon-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.2s ease,
    color 0.35s var(--andon-ease),
    background-size 0.35s var(--andon-ease);
}
.andon-btn > .wp-block-button__link:active {
  transform: scale(0.96);
}
.andon-btn > .wp-block-button__link:disabled,
.andon-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.andon-btn--ink.andon-btn--primary > .wp-block-button__link {
  border: 1px solid rgba(212, 255, 0, 0.55);
  box-shadow:
    0 0 22px rgba(212, 255, 0, 0.35),
    inset 0 0 14px rgba(212, 255, 0, 0.12);
}
.andon-btn--ink.andon-btn--ghost > .wp-block-button__link,
.andon-hero .andon-btn--ghost > .wp-block-button__link {
  background: var(--andon-ink-2);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--andon-bg);
}
.andon-hero .andon-btn > .wp-block-button__link {
  min-height: 56px;
  border-radius: 999px;
  padding: 0 28px;
  font-size: 16px;
}
.andon-hero .andon-btn--primary > .wp-block-button__link {
  color: var(--andon-ink);
  background-color: var(--andon-accent);
  background-image: none;
  border: 0;
  font-weight: 900;
  box-shadow: none;
}
@media (hover: hover) {
.andon-hero .andon-btn--primary > .wp-block-button__link:hover {
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.6);
  }
}
.andon-btn--primary > .wp-block-button__link {
  color: var(--andon-accent);
  background-color: var(--andon-text);
  background-image: linear-gradient(var(--andon-accent), var(--andon-accent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: 0 0 18px rgba(212, 255, 0, 0.26);
}
@media (hover: hover) {
.andon-btn--primary > .wp-block-button__link:hover {
    box-shadow: 0 0 28px 4px rgba(212, 255, 0, 0.5);
    transform: translateY(-2px);
    color: var(--andon-ink);
    background-size: 100% 100%;
  }
}
.andon-btn--primary > .wp-block-button__link:focus-visible {
  color: var(--andon-ink);
  background-size: 100% 100%;
}
.andon-btn--ghost > .wp-block-button__link {
  padding: 14px 22px;
  color: var(--andon-text);
  background: var(--andon-card);
  border: 1px solid var(--andon-glass-border);
}
@media (hover: hover) {
.andon-btn--ghost > .wp-block-button__link:hover {
    color: var(--andon-accent-2-text);
    border-color: var(--andon-accent-2-line);
  }
}
@media (prefers-reduced-motion: reduce) {
.andon-btn > .wp-block-button__link {
    transition: none;
  }
.andon-btn > .wp-block-button__link:active,
.andon-btn--primary > .wp-block-button__link:hover,
.andon-btn--ghost > .wp-block-button__link:hover {
    transform: none;
  }
}
@media (hover: hover) {
  .andon-btn--primary > .wp-block-button__link:hover { color: var(--andon-ink) !important; }
}
.andon-btn--primary > .wp-block-button__link:focus-visible { color: var(--andon-ink) !important; }
.andon-hero .andon-btn--ghost > .wp-block-button__link { background-color: var(--andon-ink-2) !important; }
/* ---- src/primitives/Card.css ---- */
/* Shared glass surface (source: .glass). Used alone by other groups'
 * components (e.g. a form panel, a profile row) — not exclusive to Card. */
.andon-glass {
  background: var(--andon-card);
  border: 1px solid var(--andon-glass-border);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(8, 12, 26, 0.05),
    0 10px 24px rgba(8, 12, 26, 0.05);
}

/* Card layout + pointer spotlight (source: .card, .card::after) */
.andon-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.andon-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    260px circle at var(--andon-sp-x, 50%) var(--andon-sp-y, 50%),
    rgba(8, 12, 26, 0.07),
    transparent 62%
  );
}

.andon-card--glow::after {
  opacity: 1;
}

.andon-card--interactive {
  cursor: pointer;
}

/* Lock-on: four orange corner brackets that close in on the card when it is
 * pointed at, like a sensor finding its target. Drawn as eight gradient
 * strokes on one pseudo-element; the paper-safe orange, since they sit on
 * paper just outside the card. */
.andon-card--interactive::before {
  --andon-lock: var(--andon-accent-2-line);
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--andon-lock), var(--andon-lock)) left top / 16px 2px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) left top / 2px 16px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) right top / 16px 2px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) right top / 2px 16px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) left bottom / 16px 2px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) right bottom / 16px 2px no-repeat,
    linear-gradient(var(--andon-lock), var(--andon-lock)) right bottom / 2px 16px no-repeat;
  transition:
    inset 0.3s var(--andon-ease),
    opacity 0.3s var(--andon-ease);
}

.andon-card--interactive:active {
  transform: scale(0.985);
}

@media (hover: hover) {
  .andon-card--interactive:hover {
    transform: translateY(-6px);
    border-color: var(--andon-text);
    box-shadow: 0 12px 32px rgba(8, 12, 26, 0.12);
  }

  .andon-card--interactive:hover::after {
    opacity: 1;
  }

  .andon-card--interactive:hover::before {
    inset: -7px;
    opacity: 1;
  }
}

/* Card content elements (source: .card-num, .card-title, .card-body) —
 * plain classNames for consumers composing a card's children. */
.andon-card__num {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--andon-muted);
}

.andon-card__title {
  font-size: 17px;
  font-weight: 700;
}

.andon-card__body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--andon-muted);
}

@media (prefers-reduced-motion: reduce) {
  .andon-card,
  .andon-card::after,
  .andon-card--interactive::before {
    transition: none;
  }

  .andon-card--interactive:hover,
  .andon-card--interactive:active {
    transform: none;
  }
}

/* ---- src/primitives/Chip.css ---- */
/* Rounded pill (source: .chip). Also stands in for the old .badge — the two
 * differed only by a hair of padding and a text colour, and the badge's
 * distinct hero look came entirely from the descendant selector below, not
 * from a class of its own. */
.andon-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--andon-text);
  background: var(--andon-card);
  border: 1px solid var(--andon-glass-border);
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* lit — process steps light up in sequence as they complete (source: .chip.lit) */
.andon-chip--lit {
  color: var(--andon-accent);
  background: var(--andon-text);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(212, 255, 0, 0.28);
}

/* Hero context: on the ink band the chip goes translucent instead of the
 * paper glass look (source: .hero .badge). The Hero component supplies
 * .andon-hero; this is what makes a Chip correct with no prop when it happens
 * to render inside one. The old .badge (the only place this ever showed up)
 * also differed from .chip by this padding/spacing — restored here so the
 * hero rendering stays pixel-identical to the source. */
.andon-hero .andon-chip {
  gap: 8px;
  padding: 7px 16px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  /* A set step of ink rather than a translucent white, so the badge reads as
   * a surface sitting on the band (ink levels: band → --andon-ink-2). */
  background: var(--andon-ink-2);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: rgba(242, 243, 245, 0.85);
}

/* the hero badge's lit point */
.andon-hero .andon-chip::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--andon-accent);
}

@media (prefers-reduced-motion: reduce) {
  .andon-chip {
    transition: none;
  }
}

/* ---- src/primitives/Eyebrow.css ---- */
/* Small uppercase section kicker (source: .label, .label::before). The
 * marker is a lit neon point inside an ink disc — neon can't sit on paper,
 * but it can be a light *inside* ink, which ties every section kicker back
 * to the brand colour without the muddy dark-lime text. */
.andon-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--andon-muted);
}

.andon-eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--andon-accent) 0 3px, var(--andon-text) 3.6px);
}

/* ---- src/primitives/Heading.css ---- */
/* Headings. Levels 1 and 2 carry the brand face (source: .head, worn by the
 * hero's h1 and by `.h2 head`). Level 3 deliberately does NOT: in the source a
 * card title is `.card-title` with no `.head`, so it stays in the body face at
 * 700. Giving it 900 here would make <Heading level={3}> disagree with the
 * `.andon-card__title` class for the same job. */
.andon-heading {
  margin: 0;
  font-family: 'M PLUS 1p', 'Hiragino Sans', sans-serif;
  font-weight: 900;
  color: var(--andon-text);
}

/* level 1 — the hero's headline (source: .hero h1) */
.andon-heading--1 {
  font-size: 50px;
  line-height: 1.26;
  max-width: 600px;
  text-wrap: balance;
}

/* level 2 — the section heading, the default (source: .h2) */
.andon-heading--2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.3;
  text-wrap: balance;
}

/* level 3 — a card title (source: .card-title). Body face, not the brand face. */
.andon-heading--3 {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

/* Scroll-in: a section heading is drawn in by an orange scan line crossing
 * it left to right, once. A page script adds --armed to headings still below
 * the fold and --in when they scroll into view; with no script, neither
 * class ever appears and the heading is simply there. The clip edge and the
 * line share one duration and easing, so the line always sits on the edge
 * of what has been revealed. */
.andon-heading--armed {
  position: relative;
  width: fit-content;
  clip-path: inset(-12% 100% -12% 0);
}

.andon-heading--armed.andon-heading--in {
  animation: andon-heading-wipe 1000ms var(--andon-ease) forwards;
}

.andon-heading--armed::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--andon-accent-2-line);
  opacity: 0;
}

.andon-heading--armed.andon-heading--in::after {
  animation: andon-heading-line 1000ms var(--andon-ease) forwards;
}

@keyframes andon-heading-wipe {
  to {
    clip-path: inset(-12% -4px -12% 0);
  }
}

@keyframes andon-heading-line {
  0% {
    left: 0;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 2px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-heading--armed {
    clip-path: none;
  }

  .andon-heading--armed::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .andon-heading--1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.28;
  }

  .andon-heading--2 {
    font-size: 26px;
  }
}

/* ---- src/primitives/Highlight.css ---- */
/* Highlighter band behind headline text (source: .grad). box-decoration-break
 * keeps the band intact per line when the text wraps. */
.andon-highlight {
  color: var(--andon-text);
  background-image: linear-gradient(var(--andon-accent), var(--andon-accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.32em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.05em;
}

/* Hero context: inside the ink band the highlighter becomes a full lit block
 * with ink text — the neon as a filled area, which is the one way this brand
 * lets it carry words. No glow: on a hero screen only the logo and the
 * primary button are allowed to shine. The band is anchored right so an
 * entrance that grows background-size fills it in from the right edge. The
 * Hero component supplies .andon-hero; this is what makes a Highlight correct
 * with no prop when it happens to render inside one. */
.andon-hero .andon-highlight {
  color: var(--andon-ink);
  background-position: right center;
  background-size: 100% 100%;
  border-radius: 6px;
  padding: 0 0.12em;
  text-shadow: none;
}

/* ---- src/primitives/Note.css ---- */
/* Small muted print (source: .note). */
.andon-note {
  font-size: 12px;
  color: var(--andon-muted);
}

/* sent — the form's confirmation line, swapped in after a send (source:
 * .sent). ContactForm adds this class itself. */
.andon-note--sent {
  font-size: 13px;
  color: var(--andon-accent-text);
}

/* error — the form's failure line. The orange is only 3.5:1 on paper, too
 * faint for small text, so the words stay ink and the orange is a side bar. */
.andon-note--error {
  font-size: 13px;
  color: var(--andon-text);
  border-left: 3px solid var(--andon-accent-2-line);
  padding-left: 10px;
}

/* ---- src/primitives/Tag.css ---- */
/* Ink-filled stamp for a short identifier (source: .tag). Text is uppercased
 * in CSS as a safety net — the source always wrote the content in caps
 * already ("CASE 01"), this just guarantees the stamp reads the same way
 * regardless of the case a caller passes in. */
.andon-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--andon-bg);
  background: var(--andon-text);
}

/* ---- src/primitives/TextArea.css ---- */
/* Textarea sizing on top of TextField.css's shared .andon-field / .andon-input
 * (source: textarea.input). */
textarea.andon-input {
  min-height: 120px;
  resize: vertical;
}

/* ---- src/primitives/TextField.css ---- */
/* Labelled field wrapper (source: .field, .field label, .field label span).
 * Shared by TextArea too — same pattern as .andon-glass being usable beyond
 * Card, this is usable by any labelled control the library adds later. */
.andon-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.andon-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--andon-text);
}

.andon-field label span {
  margin-left: 4px;
  font-weight: 500;
  font-size: 11px;
  color: var(--andon-accent-2-text);
}

/* Shared input surface (source: .input). Also targeted by TextArea's
 * textarea.andon-input override. */
.andon-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  /* white on the white form panel, so the edge has to carry the shape:
   * a firmer border than the glass one, plus a faint inner shade */
  border: 1px solid rgba(8, 12, 26, 0.22);
  background: var(--andon-card);
  box-shadow: inset 0 1px 2px rgba(8, 12, 26, 0.05);
  color: var(--andon-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.andon-input::placeholder {
  color: #8b93a0;
}

.andon-input:focus {
  border-color: var(--andon-accent-text);
  box-shadow: 0 0 0 3px rgba(78, 97, 0, 0.22);
}

/* Standalone keyboard-focus ring — mirrors base.css's .andon-theme
 * :focus-visible rule so the ring still shows with no .andon-theme ancestor. */
.andon-input:focus-visible {
  outline: 2px solid var(--andon-accent);
  outline-offset: 2px;
}

/* iOS zooms the whole page when a focused input's font-size is under 16px.
 * Bumping to 16px on narrow viewports is purely to stop that zoom, even
 * though the rest of the type scale sits at 14px here. */
@media (max-width: 640px) {
  .andon-input {
    font-size: 16px;
  }
}

/* ---- src/layout/Footer.css ---- */
/* source: .footer, .footer-links. Carries its own max-width/centring per
 * CONVENTIONS §9.4. */
.andon-footer {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: 1040px;
  margin-inline: auto;
  padding: 36px var(--andon-pad) 40px;
  border-top: 1px solid var(--andon-line);
}

/* The wordmark and the copyright travel together on the left, with the links
 * pushed to the other end (source: the footer's `.brand` group). */
.andon-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.andon-footer__wordmark {
  color: var(--andon-text);
  opacity: 0.55;
}

.andon-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 12px;
}

.andon-footer__links a {
  color: var(--andon-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .andon-footer__links a:hover {
    color: var(--andon-accent-2-text);
  }
}

.andon-footer__copyright {
  margin: 0;
  font-family: 'Sora', 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--andon-muted);
}

@media (max-width: 640px) {
  .andon-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- 大きなフッター(--big) ---------------------------------------------
 * お手本は footer.design: 墨の帯に「ひとこと＋相談ボタン」「サイトの案内の列」
 * 「端から端までの大きなロゴ」を重ねる。ふつうの .andon-footer はそのまま残し、
 * 大きくしたいサイトだけ --big を付ける。帯は墨なので、ネオンを置いてよい。 */
.andon-footer--big {
  display: block;
  max-width: none;
  margin: 0;
  padding: 72px 0 0;
  border-top: 0;
  background: var(--andon-ink);
  color: var(--andon-bg);
  overflow: hidden;
}

.andon-footer--big .andon-footer__inner {
  box-sizing: border-box;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--andon-pad);
}

.andon-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 56px;
}

.andon-footer__catch {
  margin: 0 0 22px;
  font-family: 'M PLUS 1p', 'Hiragino Sans', sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.35;
  text-wrap: balance;
}

.andon-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--andon-accent);
  color: var(--andon-ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(212, 255, 0, 0.28);
  transition: box-shadow 0.3s ease;
}

.andon-footer__btn span {
  display: inline-block;
  transition: transform 0.382s var(--andon-ease);
}

.andon-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.andon-footer__navtitle {
  margin: 0 0 12px;
  font-family: 'Sora', 'Zen Kaku Gothic New', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--andon-accent);
}

.andon-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.andon-footer__nav a {
  color: rgba(242, 243, 245, 0.78);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* 端から端までの大きなロゴ。墨の上に少しだけ浮かせる(読ませる文字ではない) */
.andon-footer__giant {
  display: block;
  padding-inline: var(--andon-pad);
  color: var(--andon-ink-2);
  line-height: 0;
}

.andon-footer__giant svg {
  display: block;
  width: 100%;
  height: auto;
}

.andon-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid rgba(242, 243, 245, 0.12);
}

.andon-footer--big .andon-footer__copyright,
.andon-footer--big .andon-footer__links a {
  color: rgba(242, 243, 245, 0.62);
}

@media (hover: hover) {
  .andon-footer__btn:hover {
    box-shadow: 0 0 36px rgba(212, 255, 0, 0.5);
  }

  .andon-footer__btn:hover span {
    transform: translateX(4px);
  }

  .andon-footer__nav a:hover,
  .andon-footer--big .andon-footer__links a:hover {
    color: var(--andon-accent);
  }
}

.andon-footer--big a:focus-visible {
  outline: 2px solid var(--andon-accent);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .andon-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .andon-footer--big {
    padding-top: 56px;
  }

  .andon-footer__catch {
    font-size: 24px;
  }

  .andon-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .andon-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-footer__btn,
  .andon-footer__btn span,
  .andon-footer__nav a {
    transition: none;
  }
}

/* ---- src/layout/Grid.css ---- */
/* Responsive card grid (source: .service-grid, .price-grid). */
.andon-grid {
  display: grid;
  gap: 16px;
}

.andon-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}

.andon-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}

.andon-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

/* Rows: one full-width ruled line per card — number, title and text side by
 * side (the services / steps list on seesaw's agency sites). The card drops
 * its glass and corner lock-on and reads as a line of a list; an interactive
 * card turns to ink when pointed at instead of lifting, which is where the
 * neon number is allowed to light. */
.andon-grid--rows {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--andon-text);
}

.andon-grid--rows > .andon-grid__item {
  border-bottom: 1px solid var(--andon-line);
}

.andon-grid--rows .andon-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 32px;
  padding: 28px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    background-color 0.4s var(--andon-ease),
    color 0.4s ease;
}

.andon-grid--rows .andon-card::before,
.andon-grid--rows .andon-card::after {
  display: none;
}

.andon-grid--rows .andon-card > * {
  margin: 0;
}

.andon-grid--rows .andon-card__num {
  justify-self: start;
  font-size: 13px;
  color: var(--andon-text);
}

.andon-grid--rows .andon-card__title {
  font-size: 21px;
  line-height: 1.4;
}

.andon-grid--rows .andon-card__title,
.andon-grid--rows .andon-card__body,
.andon-grid--rows .andon-card__num {
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .andon-grid--rows .andon-card--interactive:hover {
    transform: none;
    box-shadow: none;
    background: var(--andon-text);
  }

  .andon-grid--rows .andon-card--interactive:hover .andon-card__title {
    color: var(--andon-bg);
  }

  .andon-grid--rows .andon-card--interactive:hover .andon-card__body {
    color: rgba(242, 243, 245, 0.75);
  }

  .andon-grid--rows .andon-card--interactive:hover .andon-card__num {
    color: var(--andon-accent);
  }
}

.andon-grid--rows .andon-card--interactive:active {
  transform: none;
}

@media (max-width: 960px) {
  .andon-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .andon-grid--4,
  .andon-grid--2 {
    grid-template-columns: 1fr;
  }

  .andon-grid--3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .andon-grid--rows .andon-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    padding: 22px 4px;
  }

  .andon-grid--rows .andon-card__body {
    grid-column: 1 / -1;
  }

  .andon-grid--rows .andon-card__title {
    font-size: 18px;
  }
}

/* `display: grid` (a single implicit cell) so the one child inside stretches
 * to fill the row's full height by default — plain block children don't
 * inherit a stretched parent's height on their own, so without this every
 * card in a row was only as tall as its own text, and rows with uneven
 * copy length (a 2-bullet plan next to a 3-bullet plan) produced visibly
 * mismatched card heights. */
.andon-grid__item {
  display: grid;
  min-width: 0;
}

/* scroll reveal (source: .reveal / .reveal.in), armed only once Grid.tsx has
 * decided (at construction) that motion is allowed and IntersectionObserver
 * exists — never left as a permanent opacity: 0. */
.andon-grid__item--armed {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.7s ease,
    translate 0.7s var(--andon-ease);
  transition-delay: var(--d, 0s);
}

.andon-grid__item--armed.andon-grid__item--in {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .andon-grid--rows .andon-card,
  .andon-grid--rows .andon-card__title,
  .andon-grid--rows .andon-card__body,
  .andon-grid--rows .andon-card__num {
    transition: none;
  }

  .andon-grid__item--armed {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ---- src/layout/Hero.css ---- */
/*
 * Hero (source: .hero, .hero-text, .hero h1, .hero p, .hero-actions,
 * .herologo, .lattice, @keyframes rise, @keyframes sweep).
 *
 * .andon-hero is a transparent positioning wrapper that only carries the
 * 1040px centring (CONVENTIONS §9.4) and the source's own horizontal inset;
 * .andon-hero__band is the actual ink card (background, radius, overflow,
 * flex layout) and owns the pointer ref for the lattice. Both classes sit on
 * the same subtree, so `.andon-hero .andon-btn`/`.andon-chip`/`.andon-highlight`/
 * `.andon-heading` descendant rules still apply regardless of the extra
 * nesting.
 */
.andon-hero {
  box-sizing: border-box;
  margin: 0;
}

/* A full-bleed ink band on a faint 32px lab grid. Its content is held to a
 * 1312px measure by the side padding, so the band itself runs edge to edge. */
.andon-hero__band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(820px, calc(100svh - 96px));
  box-sizing: border-box;
  padding: 72px max(var(--andon-pad), calc((100% - 1312px) / 2)) 104px;
  background-color: var(--andon-text);
  background-image:
    linear-gradient(rgba(242, 243, 245, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 243, 245, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--andon-bg);
}

/* ---- sensor lattice: lights up near the pointer, self-sweeps otherwise ---- */
.andon-hero__lattice {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(212, 255, 0, 0.75) 0.9px, transparent 1.6px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(
    190px circle at var(--andon-lx, 22%) var(--andon-ly, 18%),
    #000 0%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 72%
  );
  mask-image: radial-gradient(
    190px circle at var(--andon-lx, 22%) var(--andon-ly, 18%),
    #000 0%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 72%
  );
  animation: andon-hero-sweep 12s ease-in-out infinite;
  transition: opacity 0.5s ease;
}

.andon-hero__lattice--on {
  opacity: 0.85;
  animation: none;
}

@keyframes andon-hero-sweep {
  0%,
  100% {
    --andon-lx: 18%;
    --andon-ly: 22%;
  }
  50% {
    --andon-lx: 78%;
    --andon-ly: 62%;
  }
}

/* Masthead across the top (the logo, big, with its lab labels and the log
 * line), then the message split in two: the headline on the left, the lead
 * and the actions in a 440px column on the right. The children stay direct
 * children of __text (the entrance CSS and the page script rely on that);
 * the grid areas do the arranging. */
.andon-hero__text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  grid-template-areas:
    'stage stage'
    'log log'
    'badge badge'
    'title lead'
    'title actions';
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 64px;
  align-items: start;
  justify-items: start;
}

.andon-hero__stage,
.andon-hero__text > .andon-dotlogo {
  grid-area: stage;
}
.andon-hero__log {
  grid-area: log;
}
.andon-hero__badge {
  grid-area: badge;
}
.andon-hero__title {
  grid-area: title;
}
.andon-hero__lead {
  grid-area: lead;
}
.andon-hero__actions {
  grid-area: actions;
}

/* Two classes so this reliably beats `.andon-heading`/`.andon-hero__lead`'s own
 * `margin: 0` — same specificity as a bare `.andon-hero__title`, so load order
 * would otherwise decide the winner. */
.andon-hero .andon-hero__badge {
  margin-top: 28px;
}

.andon-hero .andon-hero__title {
  margin-top: 16px;
  max-width: none;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.25;
}

.andon-hero .andon-hero__lead {
  margin-top: 30px;
}

.andon-hero .andon-hero__actions {
  margin-top: 22px;
}

/* ---- the logo's stage: the logo in a bracketed frame, lab labels beside
 * it (what it is, and where the pointer is on it) ---- */
.andon-hero__stage {
  display: flex;
  align-items: stretch;
  gap: 40px;
  width: 100%;
}

.andon-hero__frame {
  position: relative;
  flex: 0 1 1080px;
  min-width: 0;
  padding: 16px 0;
}

.andon-hero__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid rgba(242, 243, 245, 0.4);
}
.andon-hero__corner--tl {
  left: -14px;
  top: 0;
  border-width: 2px 0 0 2px;
}
.andon-hero__corner--tr {
  right: -14px;
  top: 0;
  border-width: 2px 2px 0 0;
}
.andon-hero__corner--bl {
  left: -14px;
  bottom: 0;
  border-width: 0 0 2px 2px;
}
.andon-hero__corner--br {
  right: -14px;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.andon-hero__meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.9;
  color: rgba(242, 243, 245, 0.62);
  white-space: nowrap;
}

.andon-hero__coord {
  color: var(--andon-accent-2);
  font-variant-numeric: tabular-nums;
}

/* ---- the training-log line under the logo: "gathering…" while the dots
 * fly in, "converged" once lit. Without an entrance only the final line
 * shows. ---- */
.andon-hero__log {
  position: relative;
  margin-top: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: rgba(242, 243, 245, 0.62);
  white-space: nowrap;
}
.andon-hero__log-run {
  display: none;
}
.andon-hero__log-done {
  color: var(--andon-accent);
}
.andon-hero__text--armed .andon-hero__log-run {
  display: inline;
  animation: andon-hero-out 0.2s calc(var(--andon-k, 1) * 2618ms) forwards;
}
.andon-hero__text--armed .andon-hero__log-done {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: andon-hero-in 0.2s calc(var(--andon-k, 1) * 2700ms) forwards;
}

@keyframes andon-hero-out {
  to {
    opacity: 0;
  }
}
@keyframes andon-hero-in {
  to {
    opacity: 1;
  }
}

/* ---- scroll cue, bottom left of the band ---- */
.andon-hero__scroll {
  position: absolute;
  left: max(var(--andon-pad), calc((100% - 1312px) / 2));
  bottom: 32px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: rgba(242, 243, 245, 0.62);
}
.andon-hero__scroll-rail {
  position: relative;
  width: 2px;
  height: 50px;
  background: rgba(242, 243, 245, 0.18);
}
.andon-hero__scroll-rail::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--andon-accent-2);
  animation: andon-hero-fall 2618ms cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes andon-hero-fall {
  0% {
    top: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    top: 44px;
    opacity: 1;
  }
  100% {
    top: 44px;
    opacity: 0;
  }
}

/* ---- halftone seam: the ink band dissolving into the paper below it in
 * rows of shrinking dots ---- */
.andon-hero__halftone {
  display: block;
  width: 100%;
  height: 84px;
  color: var(--andon-text);
}

/* Critical handoff: .andon-heading sets `color: var(--andon-text)` (ink)
 * explicitly, which would make the H1 invisible against this band's own
 * ink background. Force it back to paper here. */
.andon-hero .andon-heading {
  color: var(--andon-bg);
}

/* The headline is set as short 、-delimited phrases in <span>s so
 * `text-wrap: balance` only ever breaks between phrases, never mid-word
 * (see the mobile override below for why this matters). */
.andon-hero__title > span {
  display: inline-block;
}

.andon-hero__lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: rgba(242, 243, 245, 0.72);
  max-width: 540px;
}

.andon-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- entrance: rise into place once mounted, logo exempted (it animates
 * itself). The words come in first — the whole message is readable about
 * 1.1s in, while the dots are still gathering behind it — so the entrance
 * never holds back the page's largest text (LCP). Only the highlighter band
 * waits for the logo: it fills in once the AI slab has lit and the beam has
 * reached it. All φ steps, all scaled by --andon-k. ---- */
.andon-hero__text--armed > .andon-hero__badge,
.andon-hero__text--armed .andon-hero__title > span,
.andon-hero__text--armed > .andon-hero__lead,
.andon-hero__text--armed > .andon-hero__actions {
  opacity: 0;
  transform: translateY(16px);
  animation: andon-hero-rise calc(var(--andon-k, 1) * 1000ms) var(--andon-ease) forwards;
}

.andon-hero__text--armed > .andon-hero__badge {
  animation-delay: calc(var(--andon-k, 1) * 236ms);
}
.andon-hero__text--armed .andon-hero__title > span:nth-of-type(1) {
  animation-delay: calc(var(--andon-k, 1) * 382ms);
}
.andon-hero__text--armed .andon-hero__title > span:nth-of-type(2) {
  animation-delay: calc(var(--andon-k, 1) * 482ms);
}
.andon-hero__text--armed .andon-hero__title > span:nth-of-type(3) {
  animation-delay: calc(var(--andon-k, 1) * 582ms);
}
.andon-hero__text--armed > .andon-hero__lead {
  animation-delay: calc(var(--andon-k, 1) * 1000ms);
}
.andon-hero__text--armed > .andon-hero__actions {
  animation-delay: calc(var(--andon-k, 1) * 1118ms);
}

/* The highlighter rises with the rest of the line, then its band fills in
 * from the right — where the beam from the AI slab lands — at 3618ms. */
.andon-hero__text--armed .andon-hero__title > .andon-highlight {
  background-size: 0% 100%;
  color: var(--andon-bg);
  animation:
    andon-hero-rise calc(var(--andon-k, 1) * 1000ms) var(--andon-ease) forwards,
    andon-hero-band calc(var(--andon-k, 1) * 618ms) var(--andon-ease) forwards;
  animation-delay: calc(var(--andon-k, 1) * 618ms), calc(var(--andon-k, 1) * 3618ms);
}

@keyframes andon-hero-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes andon-hero-band {
  to {
    background-size: 100% 100%;
    color: var(--andon-ink);
  }
}

/* Before the script has armed the entrance, hold the band's contents back so
 * the settled layout doesn't flash for a frame first. Only set by a page
 * that also promises to arm it (WordPress adds it from <head> and removes it
 * again after 4s whatever happens). */
.andon-intro .andon-hero__text:not(.andon-hero__text--armed) > * {
  opacity: 0;
}

/* ---- the beam: a lit line from the AI slab down to the highlighter. The
 * page's script measures where both sit, supplies the points and the path
 * length (--andon-beam-len), and inserts it at the moment it should start
 * drawing (3000ms × k) — so no delay here: an animation-delay counts from
 * when the element appears, not from page load. ---- */
.andon-hero__beam {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.andon-hero__beam polyline {
  fill: none;
  stroke: var(--andon-accent);
  stroke-width: 2;
  stroke-dasharray: var(--andon-beam-len);
  stroke-dashoffset: var(--andon-beam-len);
  filter: drop-shadow(0 0 5px var(--andon-accent));
  animation: andon-hero-beam calc(var(--andon-k, 1) * 1000ms) var(--andon-ease) forwards;
}

@keyframes andon-hero-beam {
  0% {
    stroke-dashoffset: var(--andon-beam-len);
    opacity: 1;
  }
  62% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .andon-hero {
    margin-top: 8px;
  }

  .andon-hero__band {
    align-items: flex-start;
    min-height: 0;
    padding: 40px var(--andon-pad) 52px;
  }

  .andon-hero__scroll {
    display: none;
  }

  .andon-hero .andon-hero__badge {
    margin-top: 24px;
  }

  .andon-hero .andon-hero__title {
    margin-top: 12px;
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.28;
  }

  .andon-hero .andon-hero__lead {
    margin-top: 16px;
  }

  .andon-hero .andon-hero__actions {
    margin-top: 28px;
  }

  .andon-hero__lead {
    font-size: 15px;
    line-height: 1.7;
  }

  .andon-hero__lead br {
    display: none;
  }

  /* Two full-width pills, stacked. In WordPress the class sits on the
   * core/button wrapper and the clickable link is its child, so both are
   * stretched. */
  .andon-hero__actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .andon-hero__actions .andon-btn,
  .andon-hero__actions .andon-btn > .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
  }

  /* The lab labels go above the logo as one line. */
  .andon-hero__stage {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .andon-hero__meta {
    flex-direction: row;
    font-size: 10px;
    line-height: 1.4;
  }

  .andon-hero__meta br {
    display: none;
  }

  .andon-hero__corner {
    display: none;
  }

  /* In the stacked (column) stage the desktop flex-basis would be read as a
   * 1080px *height*, leaving a tall empty gap under the logo. */
  .andon-hero__frame {
    flex: none;
    padding: 0;
  }

  .andon-hero__log {
    font-size: 11px;
  }

  .andon-hero__halftone {
    height: 56px;
  }
}

/* Tablet and down: one column — the lead and the actions go under the
 * headline instead of beside it. */
@media (max-width: 1100px) {
  .andon-hero__text {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'stage'
      'log'
      'badge'
      'title'
      'lead'
      'actions';
    grid-template-rows: none;
  }

  .andon-hero .andon-hero__lead {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-hero__text--armed > .andon-hero__badge,
  .andon-hero__text--armed .andon-hero__title > span,
  .andon-hero__text--armed > .andon-hero__lead,
  .andon-hero__text--armed > .andon-hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .andon-hero__text--armed .andon-hero__title > .andon-highlight {
    background-size: 100% 100%;
    color: var(--andon-ink);
  }

  .andon-intro .andon-hero__text:not(.andon-hero__text--armed) > * {
    opacity: 1;
  }

  .andon-hero__beam {
    display: none;
  }

  .andon-hero__text--armed .andon-hero__log-run {
    display: none;
  }

  .andon-hero__text--armed .andon-hero__log-done {
    position: static;
    opacity: 1;
    animation: none;
  }

  .andon-hero__scroll-rail::after {
    animation: none;
    top: 22px;
  }

  .andon-hero__lattice {
    animation: none;
    transition: none;
  }
}

/* ---- src/layout/Nav.css ---- */
/* Static top bar (source: .nav, .nav-links, .brand). Carries its own
 * max-width/centring per CONVENTIONS §9.4. */
.andon-nav {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin-inline: auto;
  padding: 28px var(--andon-pad);
}

.andon-nav__brand {
  display: inline-flex;
  color: var(--andon-text);
  text-decoration: none;
}

.andon-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  font-size: 13.5px;
}

.andon-nav__links a,
.andon-nav__float-links a {
  color: var(--andon-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .andon-nav__links a:hover,
  .andon-nav__float-links a:hover {
    color: var(--andon-accent-2-text);
  }
}

/* The "無料相談" pill can also ride at the end of the wide link row, so the
 * way in to the form is always one tap away on desktop too. Needs the extra
 * class to beat `.andon-nav__links a`. */
.andon-nav__links .andon-nav__cta {
  min-height: 40px;
  margin-left: 4px;
  color: var(--andon-accent);
}

/* ---- ink variant: an ink bar that runs straight into an ink hero with no
 * seam. The component paints only its own box; a page that wants the band
 * edge to edge paints the same colour on whatever wraps the bar (the
 * WordPress theme does this on its header template part). ---- */
.andon-nav--ink {
  background: var(--andon-ink);
  color: var(--andon-bg);
}

.andon-nav--ink .andon-nav__brand {
  color: var(--andon-bg);
}

.andon-nav--ink .andon-nav__links a {
  color: rgba(242, 243, 245, 0.72);
}

.andon-nav--ink .andon-nav__links .andon-nav__cta,
.andon-nav--ink .andon-nav__cta {
  background: var(--andon-accent);
  color: var(--andon-ink);
}

.andon-nav--ink .andon-nav__burger,
.andon-nav--ink .andon-nav__burger::before {
  background: var(--andon-bg);
}

.andon-nav--ink .andon-nav__menu > summary:focus-visible {
  outline-color: var(--andon-bg);
}

@media (hover: hover) {
  .andon-nav--ink .andon-nav__links a:hover {
    color: var(--andon-bg);
  }

  .andon-nav__links .andon-nav__cta:hover,
  .andon-nav--ink .andon-nav__links .andon-nav__cta:hover {
    color: var(--andon-ink);
    background: var(--andon-accent);
    box-shadow: 0 0 0 4px rgba(212, 255, 0, 0.18);
  }
}

/* Zero-height sentinel at the end of the bar — Nav.tsx observes this element
 * directly instead of watching another component's #hero. */
.andon-nav__sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Floating pill nav (source: .float-nav, .float-links). Uses .andon-glass for
 * its surface rather than redeclaring background/border/shadow. */
.andon-nav__float {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  opacity: 0;
  translate: -50% -90px;
  pointer-events: none;
  transition:
    translate 0.5s var(--andon-ease),
    opacity 0.35s ease;
}

.andon-nav__float--show {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.andon-nav__float-brand {
  display: inline-flex;
  color: var(--andon-text);
  text-decoration: none;
}

.andon-nav__float-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  white-space: nowrap;
}

.andon-nav__float .andon-btn {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- compact header for phones: a small neon "無料相談" pill and a menu
 * button that drops a sheet of the same links. Built on <details>, so it
 * opens and closes with no script at all. Hidden above 640px. ---- */
.andon-nav__compact {
  display: none;
  align-items: center;
  gap: 10px;
}

.andon-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--andon-text);
  color: var(--andon-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.andon-nav__menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.andon-nav__menu > summary::-webkit-details-marker {
  display: none;
}

.andon-nav__menu > summary:focus-visible {
  outline: 2px solid var(--andon-text);
  outline-offset: 2px;
}

/* two bars that become a cross when the sheet is open */
.andon-nav__burger,
.andon-nav__burger::before {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--andon-text);
  transition: transform 0.3s var(--andon-ease);
}

.andon-nav__burger {
  position: relative;
  transform: translateY(-4px);
}

.andon-nav__burger::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
}

.andon-nav__menu[open] .andon-nav__burger {
  transform: translateY(0) rotate(45deg);
}

.andon-nav__menu[open] .andon-nav__burger::before {
  top: 0;
  width: 20px;
  transform: rotate(-90deg);
}

.andon-nav__sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 8px var(--andon-pad) 16px;
  background: var(--andon-bg);
  border-bottom: 1px solid var(--andon-line);
  box-shadow: 0 16px 32px rgba(8, 12, 26, 0.12);
}

.andon-nav__sheet a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--andon-line);
  color: var(--andon-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.andon-nav__sheet a:last-child {
  border-bottom: 0;
}

/* ---- phones: a bottom call-to-action that rides along once the hero has
 * scrolled away, and steps aside again at the contact form and footer. A
 * page script toggles --show; without it the bar never appears. ---- */
.andon-stickycta {
  display: none;
}

@media (max-width: 640px) {
  .andon-nav {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px var(--andon-pad);
  }

  .andon-nav__links {
    display: none;
  }

  .andon-nav__compact {
    display: flex;
  }

  .andon-stickycta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 999px;
    background: var(--andon-accent);
    color: var(--andon-ink);
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(8, 12, 26, 0.28);
    opacity: 0;
    translate: 0 90px;
    pointer-events: none;
    transition:
      translate 0.5s var(--andon-ease),
      opacity 0.35s ease;
  }

  .andon-stickycta--show {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }

  .andon-nav__links {
    gap: 8px 18px;
    font-size: 13px;
  }

  .andon-nav__float {
    gap: 12px;
    padding: 7px 8px 7px 14px;
  }

  .andon-nav__float-links {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-nav__float,
  .andon-stickycta,
  .andon-nav__burger,
  .andon-nav__burger::before {
    transition: none;
  }
}

/* ---- src/layout/Page.css ---- */
/*
 * Page container (source: .theme, .wrap, .grid-bg, .progress). Deliberately
 * drops the source's page-level `overflow: hidden` / `min-height: 100%` —
 * those broke embedding a themed subtree inside another layout. `position:
 * relative` is kept so .andon-page__grid-bg (position: absolute) has something
 * to anchor to.
 */
.andon-page {
  position: relative;
}

.andon-page__wrap {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
}

/* graph-paper background, masked to fade out by ~70% down the page (source: .grid-bg) */
.andon-page__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 12, 26, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 12, 26, 0.042) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 70%);
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 70%);
  pointer-events: none;
}

/* scroll-progress bar (source: .progress). Page.tsx drives its transform
 * directly from a passive, rAF-throttled scroll/resize listener. */
.andon-page__progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--andon-accent), var(--andon-accent-2));
}

/* ---- src/layout/Section.css ---- */
/* Titled section band (source: .section, .label→Eyebrow, .h2→Heading level 2,
 * .sub, .divider). Carries its own max-width/centring per CONVENTIONS §9.4 —
 * it no longer relies on a `.wrap` ancestor. */
.andon-section {
  box-sizing: border-box;
  max-width: 1040px;
  margin-inline: auto;
  padding: 64px var(--andon-pad);
}

/* When a rule is present it takes over the section's top spacing, so the
 * rule itself carries the 64px (48px at ≤640) that would otherwise sit
 * between it and the eyebrow — no negative margins. */
.andon-section--ruled {
  padding-top: 0;
}

.andon-section__rule {
  height: 1px;
  margin-bottom: 64px;
  background: linear-gradient(90deg, transparent, var(--andon-line) 20%, var(--andon-line) 80%, transparent);
}

/* source: .sub */
.andon-section__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--andon-muted);
}

@media (max-width: 640px) {
  .andon-section {
    padding: 48px var(--andon-pad);
  }

  .andon-section--ruled {
    padding-top: 0;
  }

  .andon-section__rule {
    margin-bottom: 48px;
  }
}

/* ---- src/content/BeforeAfter.css ---- */
/* BEFORE/AFTER rail with a flowing dashed connector (source: .ba, .ba.after,
 * .ba-label, .ba-text, .flow, .flow::before, .flow i, flowV, flowH).
 *
 * The root only declares the container — a container query can't restyle
 * the element that establishes it, only its descendants, so the actual
 * stacked/side-by-side switch lives on __rail below. Threshold picked by eye
 * between the source's 220px sidebar (stays stacked) and a wide standalone
 * card (goes side by side). */
.andon-beforeafter {
  container-type: inline-size;
}

.andon-beforeafter__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.andon-beforeafter__box {
  flex: 1;
  padding: 16px 18px;
  border-radius: 12px;
}

.andon-beforeafter__box--after {
  border-color: var(--andon-accent-2-line);
}

.andon-beforeafter__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--andon-accent-text);
}

.andon-beforeafter__text {
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 4px;
}

/* connector: vertical dashed line, three dots travelling top to bottom
 * (source: .flow, .flow::before, .flow i, @keyframes flowV). The source
 * paused this until a scroll observer added a class; here it just runs from
 * mount, which is what "shown alone" needs. */
.andon-beforeafter__flow {
  position: relative;
  height: 34px;
  flex-shrink: 0;
}

.andon-beforeafter__flow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  border-left: 1.5px dashed rgba(8, 12, 26, 0.2);
}

.andon-beforeafter__flow i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--andon-accent-2-line);
  opacity: 0;
  animation: andon-beforeafter-flow-v 1.8s linear infinite;
}

.andon-beforeafter__flow i:nth-child(2) {
  animation-delay: 0.6s;
}

.andon-beforeafter__flow i:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes andon-beforeafter-flow-v {
  0% {
    translate: 0 -4px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    translate: 0 30px;
    opacity: 0;
  }
}

@keyframes andon-beforeafter-flow-h {
  0% {
    translate: -4px 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    translate: 30px 0;
    opacity: 0;
  }
}

/* wide container: side-by-side rail, horizontal connector (the source's
 * ≤640px-viewport variant, ported to a container query instead — see
 * BeforeAfter.tsx's doc comment for why).
 *
 * The threshold is measured, not guessed. On the real page the rail is
 * exactly 220px inside a case study on a wide screen (stacked there), and
 * 308px at a 390px viewport, where the source switches it to side by side.
 * So the flip has to land strictly between 220 and 308; 270 sits in the
 * middle of that window and reproduces both of the real cases. */
@container (min-width: 270px) {
  .andon-beforeafter__rail {
    flex-direction: row;
    align-items: stretch;
  }

  .andon-beforeafter__flow {
    height: auto;
    width: 34px;
  }

  .andon-beforeafter__flow::before {
    left: 2px;
    right: 2px;
    top: 50%;
    bottom: auto;
    border-left: 0;
    border-top: 1.5px dashed rgba(8, 12, 26, 0.2);
  }

  .andon-beforeafter__flow i {
    left: 0;
    top: 50%;
    margin-left: 0;
    margin-top: -3.5px;
    animation-name: andon-beforeafter-flow-h;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-beforeafter__flow i {
    animation: none;
    opacity: 0.8;
  }
}

/* ---- src/content/CaseStudy.css ---- */
/* Case-study panel (source: .works-box, .works-main, .works-head,
 * .works-title, .works-side, .step, .arrow). Lit-chip sequencing is JS
 * (CaseStudy.tsx); Chip/Card already own their own transitions. */
.andon-casestudy {
  margin-top: 28px;
  padding: 28px 30px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.andon-casestudy__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.andon-casestudy__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* level-3 Heading is body-face 17px/700 by default (a card title); the
 * source's .works-title is `.head works-title` — the brand face at a
 * larger size — so both are overridden here. */
.andon-casestudy__title {
  font-family: 'M PLUS 1p', 'Hiragino Sans', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.4;
}

/* The React component only ever renders plain text here, but a consumer
 * (the WP works/case-detail patterns) makes the whole title a link to the
 * case's own page — without this it falls back to the browser's default
 * blue/underline, which reads as a dead give-away that nobody styled it. */
.andon-casestudy__title a {
  color: inherit;
  text-decoration: none;
}

.andon-casestudy__body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--andon-muted);
}

.andon-casestudy__body p {
  margin: 0;
}

.andon-casestudy__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.andon-casestudy__arrow {
  color: var(--andon-muted);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
}

.andon-casestudy__side {
  width: 220px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .andon-casestudy {
    flex-direction: column;
    padding: 22px 20px;
    gap: 20px;
  }

  .andon-casestudy__title {
    font-size: 20px;
  }

  .andon-casestudy__side {
    width: 100%;
  }
}

/* Optional 5×5 dot mark before the CASE tag — the case in the logo's own
 * material: paper dots for the shape, a neon point for what changed. */
.andon-casestudy__mark {
  display: inline-grid;
  grid-template-columns: repeat(5, 4px);
  gap: 2px;
  padding: 5px;
  border-radius: 6px;
  background: var(--andon-text);
  flex-shrink: 0;
}

.andon-casestudy__mark > i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
}

.andon-casestudy__mark > i.is-f {
  background: rgba(242, 243, 245, 0.55);
}

.andon-casestudy__mark > i.is-on {
  background: var(--andon-accent);
}

/* ---- src/content/ContactForm.css ---- */
/* Enquiry form (source: .form, .form-grid, .field, .form-foot, .sent). A
 * panel-like component, so it uses .andon-glass directly rather than Card. */
.andon-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  max-width: 640px;
}

.andon-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.andon-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

@media (max-width: 640px) {
  .andon-form {
    padding: 22px 18px;
  }

  .andon-form__grid {
    grid-template-columns: 1fr;
  }

  .andon-form__submit {
    width: 100%;
  }
}

/* Honeypot field for bots: off-screen rather than display:none, since some
 * bots skip fields that are display:none. Hidden from assistive tech too. */
.andon-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.andon-form {
  position: relative;
}

.andon-form .andon-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Result line above (no-JS) or inside (JS) the form after a send. */
.andon-form__status {
  margin: 0 0 12px;
}

.andon-form[aria-busy='true'] .andon-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- src/content/Faq.css ---- */
/* FAQ as a ruled list that opens in place (native <details>). Same family as
 * Grid columns="rows": an ink rule on top, thin rules between. The Q mark is
 * the paper-safe orange; once open it becomes an ink pill and the neon may
 * light, since it then sits on ink. Only transform/opacity animate. */
.andon-faqlist {
  margin-top: 32px;
  border-top: 1px solid var(--andon-text);
}

.andon-faqlist__item {
  border-bottom: 1px solid var(--andon-line);
}

.andon-faqlist__q {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 24px 8px;
  cursor: pointer;
  list-style: none;
}

.andon-faqlist__q::-webkit-details-marker {
  display: none;
}

.andon-faqlist__q:focus-visible {
  outline: 2px solid var(--andon-accent-2-line);
  outline-offset: -2px;
}

.andon-faqlist__mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font: 600 14px/1 'Sora', sans-serif;
  color: var(--andon-accent-2-text);
  box-shadow: inset 0 0 0 1px var(--andon-line);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.andon-faqlist__text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  transition: color 0.3s ease;
}

/* "+" drawn with two bars; the upright one turns flat when open → "−" */
.andon-faqlist__icon {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
}

.andon-faqlist__icon::before,
.andon-faqlist__icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--andon-text);
  transition: transform 0.382s var(--andon-ease);
}

.andon-faqlist__icon::after {
  transform: rotate(90deg);
}

.andon-faqlist__item[open] .andon-faqlist__icon::after {
  transform: rotate(0deg);
}

.andon-faqlist__item[open] .andon-faqlist__mark {
  background: var(--andon-text);
  color: var(--andon-accent);
  box-shadow: none;
}

.andon-faqlist__a {
  padding: 0 48px 26px 64px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--andon-muted);
}

.andon-faqlist__a > * {
  margin: 0;
}

.andon-faqlist__a a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.andon-faqlist__item[open] .andon-faqlist__a {
  animation: andon-faqlist-in 0.5s var(--andon-ease) both;
}

@keyframes andon-faqlist-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) {
  .andon-faqlist__q:hover .andon-faqlist__text {
    color: var(--andon-accent-2-text);
  }
}

@media (max-width: 640px) {
  .andon-faqlist__q {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 20px 2px;
  }

  .andon-faqlist__mark {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .andon-faqlist__text {
    font-size: 15px;
  }

  .andon-faqlist__a {
    padding: 0 4px 22px 46px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-faqlist__mark,
  .andon-faqlist__text,
  .andon-faqlist__icon::before,
  .andon-faqlist__icon::after {
    transition: none;
  }

  .andon-faqlist__item[open] .andon-faqlist__a {
    animation: none;
  }
}

/* ---- src/content/PriceCard.css ---- */
/* Pricing plan card (source: .price-card, .price, .price small, .popular,
 * .popular-tag, .feat, .feat li, .feat li::before). Overrides Card's default
 * gap/padding; loads after Card.css so the equal-specificity override wins. */
.andon-pricecard {
  gap: 14px;
  padding: 26px 24px;
}

/* The card is its own size container so the price can step down a little
 * in a narrow card (four in a row) and keep "¥100,000〜 / 件" on one line. */
.andon-pricecard {
  container-type: inline-size;
}

.andon-pricecard__price {
  font-size: clamp(22px, 9.6cqi, 26px);
  font-weight: 700;
  color: var(--andon-text);
  font-variant-numeric: tabular-nums;
}

.andon-pricecard__price small {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--andon-muted);
  margin-left: 4px;
  /* the unit wraps as one piece, never as 「〜 /」 + 「件」 */
  white-space: nowrap;
}

/* popular — recommended plan (source: .popular). Card already provides
 * position: relative, so the floating tag below just works. */
.andon-pricecard--popular {
  border-color: var(--andon-text);
  box-shadow:
    0 1px 2px rgba(8, 12, 26, 0.05),
    0 10px 24px rgba(8, 12, 26, 0.1);
}

.andon-pricecard__tag {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--andon-text);
  color: var(--andon-accent-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.andon-pricecard__feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--andon-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}

.andon-pricecard__feat li {
  display: flex;
  gap: 8px;
}

.andon-pricecard__feat li::before {
  content: '✓';
  color: var(--andon-accent-text);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

/* The recommended plan carries a small lit lamp in its top-right corner —
 * five neon points in an ink capsule, breathing on the logo's 4236ms beat —
 * so "いちばん人気" is also said in the brand's own light. */
.andon-pricecard--popular::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 50px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 7px 50%, var(--andon-accent) 0 2.4px, transparent 3px),
    radial-gradient(circle at 16px 50%, var(--andon-accent) 0 2.4px, transparent 3px),
    radial-gradient(circle at 25px 50%, var(--andon-accent) 0 2.4px, transparent 3px),
    radial-gradient(circle at 34px 50%, var(--andon-accent) 0 2.4px, transparent 3px),
    radial-gradient(circle at 43px 50%, var(--andon-accent) 0 2.4px, transparent 3px),
    var(--andon-text);
  animation: andon-pricecard-lamp 4236ms ease-in-out infinite;
}

@keyframes andon-pricecard-lamp {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(212, 255, 0, 0);
  }
  50% {
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-pricecard--popular::before {
    animation: none;
  }
}

/* ---- src/content/ProfileCard.css ---- */
/* Profile block (source: .profile-row, .profile-main, .profile-name,
 * .profile-role, .chips). A panel-like component, so it uses .andon-glass
 * directly rather than Card (whose padding/gap/spotlight are tuned for a
 * grid tile, not a wide bio row). */
.andon-profilecard {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  padding: 28px 30px;
}

.andon-profilecard__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.andon-profilecard__name {
  font-size: 26px;
}

.andon-profilecard__role {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--andon-accent-text);
  margin-top: 4px;
}

.andon-profilecard__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--andon-muted);
  max-width: 560px;
}

.andon-profilecard__body p {
  margin: 0;
}

.andon-profilecard__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .andon-profilecard {
    flex-direction: column;
    /* 横並びのときの flex-start は、写真と文章を上端で揃えるためのもの。
       縦積みでそのままだと、子が中身の幅まで縮んで名前が折り返す。 */
    align-items: stretch;
    gap: 22px;
    padding: 22px 20px;
  }
}

/* Optional dot portrait: a 12×12 bust drawn in the logo's dots on an ink
 * tile, standing in for a photo. Paper dots for the figure, two neon points
 * for the eyes. Decorative — the name beside it carries the meaning. */
.andon-profilecard__avatar {
  display: inline-grid;
  grid-template-columns: repeat(12, 6px);
  gap: 2px;
  padding: 12px;
  border-radius: 14px;
  background: var(--andon-text);
  margin-bottom: 4px;
  align-self: flex-start;
}

.andon-profilecard__avatar > i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.andon-profilecard__avatar > i.is-f {
  background: rgba(242, 243, 245, 0.62);
}

.andon-profilecard__avatar > i.is-on {
  background: var(--andon-accent);
}

/* ---- src/content/ServiceCard.css ---- */
/* ServiceCard root (source: .card, .card-num, .card-title, .card-body).
 * Layout and part typography come entirely from Card and its andon-card__*
 * classes; this class exists so a ServiceCard can be targeted on its own. */
.andon-servicecard {
}

/* Optional head row: a 9×9 dot-matrix pictogram on an ink tile, with the
 * card number set to its right. The pictogram is drawn in the logo's own
 * material — dim paper dots for the outline, lit neon dots for the one thing
 * that matters in it — so each service reads as part of the same sign. */
.andon-servicecard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Beside the pictogram the number is set large and quiet — a rhythm mark
 * across the row of cards rather than a label. 45% ink on the white card is
 * about 3.2:1, enough for text this size. */
.andon-servicecard__top .andon-card__num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(8, 12, 26, 0.45);
}

.andon-servicecard__icon {
  display: grid;
  grid-template-columns: repeat(9, 8px);
  gap: 3px;
  padding: 14px;
  border-radius: 12px;
  background: var(--andon-text);
}

.andon-servicecard__icon > i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.andon-servicecard__icon > i.is-f {
  background: rgba(242, 243, 245, 0.55);
}

.andon-servicecard__icon > i.is-on {
  background: var(--andon-accent);
}

/* Pointed at: the lit dots flash white and settle back, in a diagonal
 * ripple from the top-left (--d is the cell's row + column). */
@media (hover: hover) {
  .andon-card--interactive:hover .andon-servicecard__icon > i.is-on {
    animation: andon-servicecard-blink 0.5s ease-out both;
    animation-delay: calc(var(--d, 0) * 35ms);
  }
}

@keyframes andon-servicecard-blink {
  0% {
    background: #ffffff;
  }
  100% {
    background: var(--andon-accent);
  }
}

/* In a rows grid (Grid columns="rows"): number | small pictogram | title |
 * text on one line. The head row dissolves into the card's own grid. */
.andon-grid--rows .andon-servicecard {
  grid-template-columns: 72px auto minmax(0, 200px) minmax(0, 1fr);
}

.andon-grid--rows .andon-servicecard__top {
  display: contents;
}

.andon-grid--rows .andon-servicecard__top .andon-card__num {
  order: -1;
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  color: var(--andon-text);
}

@media (hover: hover) {
  .andon-grid--rows .andon-card--interactive:hover .andon-servicecard__top .andon-card__num {
    color: var(--andon-accent);
  }
}

.andon-grid--rows .andon-servicecard__icon {
  grid-template-columns: repeat(9, 5px);
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(242, 243, 245, 0.12);
}

.andon-grid--rows .andon-servicecard__icon > i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
}

@media (max-width: 640px) {
  .andon-grid--rows .andon-servicecard {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .andon-grid--rows .andon-servicecard__icon {
    display: none;
  }

  .andon-grid--rows .andon-servicecard__top .andon-card__num {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-card--interactive:hover .andon-servicecard__icon > i.is-on {
    animation: none;
  }
}

/* ---- wp/margin-reset.css ---- */

/* WordPress: p / 見出し / リストの UA 既定マージンを消す(余白はコンポーネント側が明示した分だけ出す) */
:where(.wp-site-blocks) :is(p, h1, h2, h3, h4, h5, h6, ul, ol) {
  margin: 0;
}
/* ---- wp/case.css ---- */

.andon-case-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--andon-pad) 80px;
}

.andon-case-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.andon-case-back a {
  color: inherit;
  text-decoration: none;
}

.andon-case-head {
  margin-top: 28px;
}

.andon-case-head .andon-casestudy__head {
  margin-bottom: 10px;
}

.andon-case-head .andon-heading--2 {
  margin-bottom: 0;
}

.andon-case-box {
  margin-top: 24px;
}

.andon-case-box .andon-casestudy__body p {
  margin-bottom: 14px;
}

/* カードの下の「質問の形の小見出し＋答え」。見出しのすぐ下で答えを言い切る読み物 */
.andon-case-detail {
  margin-top: 48px;
}

.andon-case-detail h2 {
  margin: 40px 0 12px;
}

.andon-case-detail h2:first-child {
  margin-top: 0;
}

.andon-case-detail p {
  margin: 0 0 12px;
  line-height: 1.9;
}

.andon-case-note {
  margin-top: 24px;
}

.andon-case-cta {
  margin-top: 14px;
}

/* BEFORE → AFTER を、実績カードと同じ墨のポスターにしてカードの一番上に大きく出す
   (assets/works/works.css の .works-poster と同じ見え方)。ネオンは墨の上だけ。
   本文はブロックで差しこまれているので、組みかえは CSS だけで行う。 */
.andon-case-box.andon-casestudy {
  flex-direction: column-reverse;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.andon-case-box .andon-casestudy__main {
  padding: 26px 30px 28px;
}

.andon-case-box .andon-casestudy__side {
  width: 100%;
  padding: 44px 7%;
  background-color: var(--andon-ink);
  background-image: radial-gradient(rgba(242, 243, 245, 0.12) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
}

.andon-case-box .andon-beforeafter__box {
  border: 0;
  background: var(--andon-ink-2, #1a2033);
  box-shadow: 0 0 0 1px rgba(242, 243, 245, 0.12);
  backdrop-filter: none;
  color: var(--andon-bg);
}

.andon-case-box .andon-beforeafter__box--after {
  background: var(--andon-accent);
  box-shadow: 0 0 22px rgba(212, 255, 0, 0.25);
  color: var(--andon-ink);
}

.andon-case-box .andon-beforeafter__label {
  color: rgba(242, 243, 245, 0.6);
}

.andon-case-box .andon-beforeafter__box--after .andon-beforeafter__label {
  color: var(--andon-ink);
}

.andon-case-box .andon-beforeafter__text {
  font-size: 15px;
  font-weight: 700;
}

.andon-case-box .andon-beforeafter__flow::before {
  border-color: rgba(242, 243, 245, 0.25);
}

/* 小見出しに、実績カードの番号と同じ墨の小さな札(01, 02 …) */
.andon-case-detail {
  counter-reset: case-q;
}

.andon-case-detail h2 {
  counter-increment: case-q;
  display: flex;
  align-items: center;
  gap: 12px;
}

.andon-case-detail h2::before {
  content: counter(case-q, decimal-leading-zero);
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--andon-ink);
  color: var(--andon-bg);
  font: 600 11px/1 var(--wp--preset--font-family--accent);
  letter-spacing: 0.1em;
}

/* テンプレート page-case-*.html の下に付く「ほかの実績」 */
.andon-case-more {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--andon-pad) 96px;
}

.andon-case-more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-top: 40px;
  border-top: 1px solid var(--andon-line);
}

.andon-case-more__head h2 {
  margin: 0;
}

.andon-case-more__head a {
  font-weight: 700;
  font-size: 14px;
  color: var(--andon-accent-2-text);
  text-decoration: none;
}

.andon-case-more .works-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 3 枠だと狭いので、業種は作品名の下の行に */
.andon-case-more .works-card__line {
  flex-direction: column;
  gap: 2px;
}

/* ここでは横 2 枠のカードも 1 枠にそろえる */
.andon-case-more .works-card--wide {
  grid-column: auto;
}

.andon-case-more .works-card--wide .works-card__media {
  aspect-ratio: 16 / 10;
  height: auto;
  padding-bottom: 0;
}

.andon-case-more .works-card--wide .works-poster {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 44px 9% 22px;
}

.andon-case-more .works-card--wide .works-poster__box {
  flex: none;
  padding: 10px 12px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .andon-case-more .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .andon-case-wrap {
    padding: 40px var(--andon-pad) 64px;
  }

  .andon-case-box .andon-casestudy__main {
    padding: 22px 20px 24px;
  }

  .andon-case-box .andon-casestudy__side {
    padding: 36px 20px;
  }

  /* スマホでは BEFORE → AFTER を縦に積む(点も上から下へ流す) */
  .andon-case-box .andon-beforeafter__rail {
    flex-direction: column;
  }

  .andon-case-box .andon-beforeafter__flow {
    width: auto;
    height: 34px;
  }

  .andon-case-box .andon-beforeafter__flow::before {
    left: 50%;
    right: auto;
    top: 2px;
    bottom: 2px;
    border-top: 0;
    border-left: 1.5px dashed rgba(242, 243, 245, 0.25);
  }

  .andon-case-box .andon-beforeafter__flow i {
    left: 50%;
    top: 0;
    margin-left: -3.5px;
    margin-top: 0;
    animation-name: andon-beforeafter-flow-v;
  }

  .andon-case-more {
    padding-bottom: 72px;
  }

  .andon-case-more .works-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---- wp/not-found.css ---- */

.andon-404 {
  background: var(--andon-ink);
  color: var(--andon-bg);
  padding: 72px 0 96px;
}

.andon-404__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--andon-pad);
}

.andon-404__dots {
  display: flex;
  gap: 28px;
}

.andon-404__glyph {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 7px;
}

.andon-404__glyph > i {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(242, 243, 245, 0.06);
}

.andon-404__glyph > i.is-on {
  background: rgba(242, 243, 245, 0.85);
}

/* 迷子の点の元の場所: 点線の輪だけ残る */
.andon-404__glyph > i.is-home {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(242, 243, 245, 0.35);
}

.andon-404__lost {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--andon-accent);
  box-shadow: 0 0 14px rgba(212, 255, 0, 0.6);
  animation: andon-404-wander 9s ease-in-out infinite;
}

@keyframes andon-404-wander {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-38px, 22px); }
  26%  { transform: translate(-70px, -14px); }
  40%  { transform: translate(-30px, 60px); }
  55%  { transform: translate(34px, 86px); }
  70%  { transform: translate(78px, 20px); }
  84%  { transform: translate(40px, -16px); }
  92%  { transform: translate(6px, -2px); }
  100% { transform: translate(0, 0); }
}

.andon-404__code {
  margin: 36px 0 0;
  font: 500 12px/1.4 'Sora', sans-serif;
  letter-spacing: 0.06em;
  color: var(--andon-accent);
}

.andon-404__title {
  margin: 10px 0 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.3;
}

.andon-404__lead {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(242, 243, 245, 0.75);
}

.andon-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.andon-404__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--andon-ink-2);
  box-shadow: 0 0 0 1px rgba(242, 243, 245, 0.12);
  color: var(--andon-bg);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.andon-404__links li:first-child a {
  background: var(--andon-accent);
  box-shadow: none;
  color: var(--andon-ink);
}

.andon-404__links a span {
  display: inline-block;
  transition: transform 0.382s var(--andon-ease);
}

@media (hover: hover) {
  .andon-404__links a:hover span {
    transform: translateX(4px);
  }
}

@media (max-width: 640px) {
  .andon-404 {
    padding: 48px 0 72px;
  }

  .andon-404__dots {
    gap: 12px;
  }

  .andon-404__glyph {
    grid-template-columns: repeat(5, 9px);
    gap: 4px;
  }

  .andon-404__glyph > i {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andon-404__lost {
    animation: none;
    transform: translate(-38px, 22px);
  }

  .andon-404__links a span {
    transition: none;
  }
}
/* ---- wp/post.css ---- */

.andon-post-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: 56px var(--andon-pad) 96px;
}

.andon-post-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.35;
  margin: 0 0 12px;
}

.andon-post-date {
  color: var(--andon-muted);
  font-family: var(--wp--preset--font-family--accent);
  font-size: 13px;
  letter-spacing: .04em;
  margin: 0 0 40px;
}

.andon-post-wrap .wp-block-post-featured-image {
  margin: 0 0 40px;
}

.andon-post-wrap .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 本文の行間・段落間。owl セレクタで積むので、margin-reset には触れない */
.andon-post-wrap .wp-block-post-content > * + * {
  margin-block-start: 1.5em;
}

.andon-post-wrap .wp-block-post-content p {
  font-size: 16px;
  line-height: 1.95;
}

.andon-post-wrap .wp-block-post-content h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  line-height: 1.5;
  margin-block-start: 2.6em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--andon-line);
}

.andon-post-wrap .wp-block-post-content h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  line-height: 1.5;
  margin-block-start: 2em;
}

.andon-post-wrap .wp-block-post-content h4 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  line-height: 1.5;
}

.andon-post-wrap .wp-block-post-content ul,
.andon-post-wrap .wp-block-post-content ol {
  padding-inline-start: 1.5em;
  line-height: 1.9;
}

.andon-post-wrap .wp-block-post-content li + li {
  margin-block-start: .35em;
}

.andon-post-wrap .wp-block-post-content pre {
  background: var(--andon-card);
  border: 1px solid var(--andon-line);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
}

.andon-post-wrap .wp-block-post-content :not(pre) > code {
  background: var(--andon-card);
  border-radius: 4px;
  padding: .1em .4em;
  font-size: .92em;
}

.andon-post-wrap .wp-block-post-content blockquote {
  border-left: 3px solid var(--andon-accent);
  padding: .2em 0 .2em 1.1em;
  color: var(--andon-muted);
}

.andon-post-wrap .wp-block-post-content blockquote p {
  font-size: 15.5px;
}

.andon-post-wrap .wp-block-post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.andon-post-wrap .wp-block-post-content th,
.andon-post-wrap .wp-block-post-content td {
  border: 1px solid var(--andon-line);
  padding: .55em .8em;
  text-align: left;
  vertical-align: top;
}

.andon-post-wrap .wp-block-post-content th {
  background: var(--andon-card);
}

.andon-post-wrap .wp-block-post-content a {
  color: var(--andon-accent-text);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.andon-post-wrap .wp-block-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.andon-post-wrap .wp-block-post-content hr {
  border: 0;
  border-top: 1px solid var(--andon-line);
  margin-block: 3em;
}

/* 規約・ポリシー系の固定ページ。本文そのものを .andon-post-wrap.andon-legal で
   包んで読み物の幅にする(記事の本文とは入れ子の向きが逆なので、上の
   .wp-block-post-content 向けの指定は届かない)。 */
.andon-legal > * + * {
  margin-block-start: 1.2em;
}

.andon-legal > .andon-post-title + .andon-post-date {
  margin-block-start: 0;
}

.andon-legal p,
.andon-legal li {
  font-size: 15.5px;
  line-height: 1.95;
}

.andon-legal h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  line-height: 1.5;
  margin-block-start: 2.4em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--andon-line);
}

.andon-legal ul {
  padding-inline-start: 1.4em;
  list-style: disc;
}

.andon-legal li + li {
  margin-block-start: .3em;
}

.andon-legal a {
  color: var(--andon-accent-text);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* 使い方マニュアルのような長い読み物: 小見出し・番号つきの箇条・表・注意書き */
.andon-legal h3 {
  font-size: 16.5px;
  line-height: 1.6;
  margin-block-start: 2em;
}

.andon-legal ol {
  padding-inline-start: 1.6em;
  list-style: decimal;
}

.andon-legal .wp-block-table:not(.andon-legal-table) {
  overflow-x: auto;
}

.andon-legal .wp-block-table:not(.andon-legal-table) table {
  width: 100%;
  border-collapse: collapse;
}

.andon-legal .wp-block-table:not(.andon-legal-table) th,
.andon-legal .wp-block-table:not(.andon-legal-table) td {
  border: 1px solid var(--andon-line);
  padding: .55em .8em;
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.75;
}

.andon-legal .wp-block-table:not(.andon-legal-table) th {
  background: var(--andon-card);
  white-space: nowrap;
}

.andon-legal blockquote {
  margin-inline: 0;
  border-left: 3px solid var(--andon-accent);
  padding: .2em 0 .2em 1.1em;
  color: var(--andon-muted);
}

.andon-legal hr {
  border: 0;
  border-top: 1px solid var(--andon-line);
  margin-block: 3.5em;
}

/* 特定商取引法に基づく表記のような「項目 → 内容」の表。罫線は横だけ。
   スマホでは項目名を上、内容を下に積む。 */
.andon-legal-table {
  margin-block-start: 2em;
}

.andon-legal-table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--andon-line);
}

.andon-legal-table th,
.andon-legal-table td {
  border: 0;
  border-bottom: 1px solid var(--andon-line);
  padding: 18px 0;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.9;
}

.andon-legal-table th {
  width: 12em;
  padding-right: 24px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .andon-legal-table th,
  .andon-legal-table td {
    display: block;
    width: auto;
  }

  .andon-legal-table th {
    padding: 16px 0 2px;
    border-bottom: 0;
  }

  .andon-legal-table td {
    padding: 0 0 16px;
  }
}

/* 一覧ページ(記事の目次) */
.andon-post-list {
  max-width: 760px;
  margin-inline: auto;
  padding: 56px var(--andon-pad) 96px;
}

.andon-post-list > .andon-heading {
  margin: 0 0 40px;
}

.andon-post-card {
  padding: 28px 0;
  border-top: 1px solid var(--andon-line);
}

.andon-post-card:last-of-type {
  border-bottom: 1px solid var(--andon-line);
}

.andon-post-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 8px;
}

.andon-post-card__title a {
  color: var(--andon-text);
  text-decoration: none;
}

.andon-post-card__title a:hover {
  color: var(--andon-accent-text);
}

.andon-post-card .andon-post-date {
  margin: 0 0 10px;
}

.andon-post-card__excerpt {
  color: var(--andon-muted);
  font-size: 15px;
  line-height: 1.85;
}

.andon-post-card__excerpt .wp-block-post-excerpt__more-text {
  margin-top: 8px;
}

.andon-post-pagination {
  margin-top: 40px;
  gap: 16px;
  font-family: var(--wp--preset--font-family--accent);
}

.andon-post-pagination a,
.andon-post-pagination .page-numbers {
  color: var(--andon-text);
}

.andon-post-pagination .current {
  color: var(--andon-accent-text);
  font-weight: 700;
}
/* ---- wp/section-marks.css ---- */

/* 各セクションの小見出しの右に置く 7×7 のドット絵(ロゴと同じ「点」の素材)。
   墨の点で形、オレンジの点で要所。どのセクションかはトップページの構成
   (アンカー id)で決まるので、部品ではなくページ側の上乗せとしてここに置く。 */
.andon-section .andon-eyebrow::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  background: var(--andon-section-mark) no-repeat center / contain;
}
.andon-section:not([id]) .andon-eyebrow::after {
  display: none;
}
#service { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='0.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3C/svg%3E"); }
#works { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='6.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='2.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='3.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='2.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='4.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='5.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='6.5' r='.42' fill='%23e4500e'/%3E%3C/svg%3E"); }
#price { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='1.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='3.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='4.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='3.5' cy='4.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='4.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='5.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3C/svg%3E"); }
#profile { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='2.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='3.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='2.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='3.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='2.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='3.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='1.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='6.5' r='.42' fill='%23080c1a'/%3E%3C/svg%3E"); }
#contact { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='0.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='1.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='0.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='2.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='3.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3C/svg%3E"); }
/* ---- wp/front-extras.css ---- */

/* トップページの構成に合わせた上乗せ。部品ではなくページ側の話なので、
   セクションの印と同じくここに置く。 */

/* 墨のヘッダー: 部品(.andon-nav--ink)は自分の箱しか塗らないので、
   端から端までの帯はテンプレートパーツの外枠で塗る。墨のヒーローと
   つなぎ目なく続く。 */
.wp-block-template-part:has(> .andon-nav--ink) {
  background: var(--andon-ink);
}
/* 明るいヘッダーのときはヒーローとの間に 8px の地を見せていたが、
   墨のヘッダーだとその 8px が白い筋になるので詰める。 */
@media (max-width: 640px) {
  body:has(.andon-nav--ink) .andon-hero {
    margin-top: 0;
  }
}

/* 大きなフッター: トップはお問い合わせフォームのすぐ下なので、
   「ひとこと＋相談ボタン」は出さず、サイトの案内だけにする。 */
.home .andon-footer__cta {
  display: none;
}
.home .andon-footer__top {
  grid-template-columns: minmax(0, 1fr);
}

/* 進め方・よくある質問の印 */
#flow { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='0.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='4.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='5.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23e4500e'/%3E%3Ccircle cx='2.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='5.5' r='.42' fill='%23080c1a'/%3E%3C/svg%3E"); }
#faq { --andon-section-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Ccircle cx='1.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='2.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='0.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='0.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='1.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='1.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='6.5' cy='2.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='4.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='5.5' cy='3.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='4.5' r='.42' fill='%23080c1a'/%3E%3Ccircle cx='3.5' cy='6.5' r='.42' fill='%23e4500e'/%3E%3C/svg%3E"); }

/* 進め方: STEP の番号を墨のバッジにする */
.andon-flow .andon-card__num {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--andon-ink);
  color: var(--andon-accent);
}

/* お問い合わせ: 左にフォーム、右に「送ったあとの流れ」 */
.andon-contact {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.andon-contact .andon-form {
  max-width: none;
}

.andon-contact__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
}

.andon-contact__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.andon-contact__steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--andon-muted);
}

.andon-contact__steps b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--andon-ink);
  color: var(--andon-accent);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
}

.andon-contact__steps strong {
  display: block;
  font-size: 15px;
  color: var(--andon-text);
}

.andon-contact__who {
  padding-top: 16px;
  border-top: 1px solid var(--andon-line);
  font-size: 13px;
  color: var(--andon-muted);
}

@media (max-width: 860px) {
  .andon-contact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .andon-contact__aside {
    padding: 22px 18px;
  }
}