@layer reset, tokens, base, layout, components, pages, motion, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, h2, h3, p, figure, dl, dd, ol, ul, fieldset) { margin: 0; }
  :where(ol, ul) { padding: 0; }
  :where(img, svg) { display: block; max-inline-size: 100%; block-size: auto; }
  :where(fieldset) { border: 0; padding: 0; min-inline-size: 0; }
  :where(button, input) { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    interpolate-size: allow-keywords;

    --navy: oklch(25% 0.075 258);
    --navy-2: oklch(34% 0.095 258);
    --heat: oklch(68% 0.19 45);
    --heat-2: oklch(80% 0.15 75);
    --turq: oklch(68% 0.116 204);
    --turq-light: oklch(80% 0.11 202);
    --silver: oklch(86% 0.015 238);
    --on-heat: oklch(20% 0.05 40);

    --bg: oklch(17% 0.022 258);
    --surface: oklch(21.5% 0.028 258);
    --surface-2: oklch(26% 0.032 258);
    --heat-soft: oklch(27% 0.045 50);
    --line: oklch(33% 0.03 258);
    --ink: oklch(94% 0.01 258);
    --muted: oklch(78% 0.016 238);
    --link: var(--turq-light);
    --accent-ink: var(--turq-light);

    --radius: 16px;
    --radius-s: 10px;
    --shadow: 0 1px 2px oklch(20% 0.05 258 / 0.06), 0 12px 32px -16px oklch(20% 0.06 258 / 0.28);
    --wrap: min(74rem, 100% - 2.5rem);
    --header: 4.5rem;

    --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
    --font-latin: "Segoe UI Variable Display", "SF Pro Display", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  }

}

@layer tokens {
  @property --glow {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
}

@layer base {
  html {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.85;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.02em;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header) + 1rem);
  }

  body {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3 {
    line-height: 1.4;
    text-wrap: balance;
  }

  p, li, dd {
    text-wrap: pretty;
  }

  a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  :focus-visible {
    outline: 3px solid var(--heat);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection {
    background: var(--heat);
    color: var(--on-heat);
  }

  time, .tabular {
    font-variant-numeric: tabular-nums;
  }

  sub {
    line-height: 0;
  }
}

@layer layout {
  .skip {
    position: fixed;
    inset: 0.75rem auto auto 0.75rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-s);
    background: var(--heat);
    color: var(--on-heat);
    translate: 0 -200%;

    &:focus {
      translate: 0;
    }
  }

  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: color-mix(in oklch, var(--navy) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    color: oklch(100% 0 0);
  }

  .masthead-inner {
    inline-size: var(--wrap);
    min-block-size: var(--header);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .brand img {
    inline-size: clamp(190px, 20vw, 270px);
  }

  .menu-button {
    margin-inline-start: auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid oklch(100% 0 0 / 0.35);
    border-radius: var(--radius-s);
    background: transparent;
    cursor: pointer;

    & span,
    & span::before,
    & span::after {
      display: block;
      inline-size: 1.15rem;
      block-size: 2px;
      border-radius: 2px;
      background: currentColor;
    }

    & span {
      position: relative;
    }

    & span::before,
    & span::after {
      content: "";
      position: absolute;
    }

    & span::before { translate: 0 -6px; }
    & span::after { translate: 0 6px; }
  }

  .gnav {
    inset: 0 0 0 auto;
    inline-size: min(20rem, 86vw);
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 5rem 1.5rem 2rem;
    border: 0;
    background: var(--navy);
    color: oklch(100% 0 0);
    transition: translate 0.35s ease, display 0.35s allow-discrete, overlay 0.35s allow-discrete;

    &:popover-open {
      translate: 0;

      @starting-style {
        translate: 100% 0;
      }
    }

    &:not(:popover-open) {
      translate: 100% 0;
    }

    &::backdrop {
      background: oklch(15% 0.04 258 / 0.45);
      backdrop-filter: blur(3px);
    }

    & ul {
      list-style: none;
      display: grid;
      gap: 0.25rem;
    }

    & a {
      display: block;
      padding: 0.6rem 0.25rem;
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }

    & a[aria-current] {
      text-decoration: underline 2px var(--turq);
      text-underline-offset: 0.5em;
    }
  }

  .gnav .gnav-cta {
    margin-block-start: 1.5rem;
    border-radius: 999px;
    background: var(--heat);
    color: var(--on-heat);
    text-align: center;

    &:hover {
      background: var(--heat-2);
    }
  }

  @media (width >= 60rem) {
    .menu-button {
      display: none;
    }

    .gnav {
      position: static;
      inset: auto;
      inline-size: auto;
      block-size: auto;
      margin-inline-start: auto;
      padding: 0;
      overflow: visible;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      background: none;
      translate: none;

      &:not(:popover-open) {
        display: flex;
        translate: none;
      }

      & ul {
        display: flex;
        gap: 1.4rem;
      }

      & a {
        padding: 0.25rem 0;
        font-size: 0.9375rem;
      }
    }

    .gnav .gnav-cta {
      margin: 0;
      padding-inline: 1.15rem;
    }
  }

  main {
    flex: 1;
    inline-size: var(--wrap);
    margin-inline: auto;
    padding-block: 1.75rem 5rem;
    container: main / inline-size;
  }

  .footer {
    background: var(--navy);
    color: oklch(92% 0.015 258);
    font-size: 0.875rem;

    & a {
      color: inherit;
    }
  }

  .footer-inner {
    inline-size: var(--wrap);
    margin-inline: auto;
    padding-block: 3rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem 3rem;
    align-items: start;
  }

  .footer-company {
    display: grid;
    gap: 1rem;

    & address {
      font-style: normal;
    }
  }

  .footer-links {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.4rem 1.5rem;
  }


  .copyright {
    grid-column: 1 / -1;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid oklch(100% 0 0 / 0.15);
    color: oklch(78% 0.02 258);
  }
}

@layer components {
  .crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted);

    & li + li::before {
      content: "/" / "";
      margin-inline-end: 0.25rem;
      opacity: 0.5;
    }

    & a {
      color: inherit;
    }
  }

  .page-head {
    margin-block: 1.75rem 2.25rem;
    display: grid;
    gap: 0.5rem;

    & h1 {
      font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
      letter-spacing: 0.04em;
    }

    & p:last-child {
      color: var(--muted);
    }
  }

  .page-kicker {
    font-family: var(--font-latin);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--accent-ink);
  }

  h2.section-title,
  .section > h2,
  .tile > h2,
  .prose h2,
  .faq-group > h2 {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);

    &::before {
      content: "";
      flex: none;
      inline-size: 0.55em;
      block-size: 0.55em;
      border-radius: 2px;
      background: var(--heat);
      translate: 0 -0.08em;
    }
  }

  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--heat);
    color: var(--on-heat);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s, translate 0.2s;

    &:hover {
      background: var(--heat-2);
      translate: 0 -1px;
    }
  }

  .button .external {
    color: inherit;
    opacity: 0.85;
  }

  .button-ghost {
    border-color: currentColor;
    background: transparent;
    color: inherit;

    &:hover {
      background: color-mix(in oklch, currentColor 10%, transparent);
    }
  }

  .more {
    margin-block-start: auto;
    padding-block-start: 1rem;
    font-size: 0.875rem;
    font-weight: 600;

    & a::after {
      content: " →" / "";
    }
  }

  .tag {
    justify-self: start;
    display: inline-block;
    padding: 0.05rem 0.65rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .filemeta,
  .external {
    font-size: 0.8em;
    color: var(--muted);
  }

  .news-list {
    list-style: none;

    & li {
      display: grid;
      grid-template-columns: 6.5rem auto 1fr;
      align-items: baseline;
      gap: 0.25rem 1rem;
      padding-block: 0.8rem;
      border-block-end: 1px solid var(--line);
    }

    & time {
      font-family: var(--font-latin);
      font-weight: 600;
      color: var(--muted);
    }

    & a {
      color: var(--ink);
      text-decoration-color: color-mix(in oklch, var(--ink) 30%, transparent);

      &:hover {
        color: var(--link);
      }
    }
  }

  @container (width < 34rem) {
    .news-list li {
      grid-template-columns: auto 1fr;

      & a {
        grid-column: 1 / -1;
      }
    }
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & legend,
    & > fieldset > legend {
      inline-size: 100%;
      margin-block-end: 0.6rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--muted);
    }

    & fieldset {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    & label {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.4rem 0.95rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;

      &:hover {
        border-color: var(--navy-2);
      }

      &:has(input:checked) {
        border-color: var(--navy);
        background: var(--navy);
        color: oklch(100% 0 0);

        & small {
          color: oklch(85% 0.03 258);
        }
      }

      &:has(input:focus-visible) {
        outline: 3px solid var(--heat);
        outline-offset: 2px;
      }
    }

    & input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    & small {
      font-family: var(--font-latin);
      color: var(--muted);
    }
  }

  .table-scroll {
    margin-block: 1rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    scrollbar-width: thin;
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  caption {
    padding: 0.85rem 1rem 0.5rem;
    text-align: start;
    font-weight: 700;
  }

  th, td {
    padding: 0.6rem 1rem;
    border-block-start: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
  }

  thead th {
    background: var(--navy);
    color: oklch(100% 0 0);
    white-space: nowrap;
  }

  tbody th {
    background: var(--surface-2);
    font-weight: 600;
  }

  tbody tr:hover td {
    background: color-mix(in oklch, var(--heat) 6%, transparent);
  }

  td.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  table.nums :is(th, td) {
    white-space: nowrap;
  }

  table.spec tbody th {
    inline-size: 11em;
  }

  .code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.75;
  }

  .notice,
  .memo {
    margin-block: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-s);
  }

  .notice {
    background: var(--heat-soft);
    border-inline-start: 4px solid var(--heat);
  }

  .memo {
    background: var(--surface-2);
  }

  .notice-title,
  .memo-title {
    font-weight: 700;
  }
}

@layer pages {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: oklch(100% 0 0);

    &::before {
      content: "";
      position: absolute;
      inset: -40%;
      z-index: -1;
      background:
        conic-gradient(from var(--glow) at 78% 35%, transparent 0deg, oklch(68% 0.19 45 / 0.55) 40deg, transparent 110deg, oklch(80% 0.15 75 / 0.25) 200deg, transparent 260deg),
        radial-gradient(60% 80% at 85% 20%, oklch(45% 0.12 258 / 0.9), transparent 70%);
      filter: blur(40px);
    }
  }

  .hero-inner {
    inline-size: var(--wrap);
    margin-inline: auto;
    padding-block: clamp(3.5rem, 8vw, 7rem);
    display: grid;
    gap: 1.25rem;
    max-inline-size: 74rem;

    & h1 {
      font-size: clamp(1.9rem, 1rem + 3.6vw, 3.5rem);
      letter-spacing: 0.04em;
      line-height: 1.3;
    }
  }

  .hero-accent {
    color: var(--turq-light);
  }

  .hero-welcome {
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.375rem);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .hero-lead {
    max-inline-size: 40em;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    color: oklch(92% 0.015 258);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .hero-phone {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    padding-block: 0.75rem;
    font-family: var(--font-latin);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.03em;

    & small {
      font-family: var(--font);
      font-size: 0.8125rem;
      font-weight: 400;
      color: var(--muted);
    }
  }

  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-block-start: -0.25rem;
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.25rem, 3cqi, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .tile-news {
    grid-column: span 4;
    grid-row: span 2;
  }

  .tile-tel,
  .tile-rcf {
    grid-column: span 2;
  }

  .tile-tel {
    background: linear-gradient(140deg, var(--navy), var(--navy-2));
    border-color: transparent;
    color: oklch(100% 0 0);

    & a {
      color: inherit;
    }
  }

  .tel {
    font-family: var(--font-latin);
    font-size: clamp(1.6rem, 1.2rem + 1.5cqi, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;

  }

  .tile-rcf {
    background: var(--heat-soft);
    border-color: transparent;
  }

  @container main (width < 52rem) {
    .bento {
      grid-template-columns: 1fr 1fr;
    }

    .tile-news {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    .tile-tel,
    .tile-rcf {
      grid-column: span 1;
    }
  }

  @container main (width < 34rem) {
    .bento {
      grid-template-columns: 1fr;
    }

    .tile-tel,
    .tile-rcf {
      grid-column: 1 / -1;
    }
  }

  .section {
    margin-block-start: clamp(3rem, 7vw, 5rem);
    display: grid;
    gap: 1.25rem;
  }

  .category-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    gap: 1rem;

    & a {
      display: grid;
      gap: 0.15rem;
      padding: 0.6rem 0.6rem 0.9rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      text-decoration: none;
      transition: translate 0.25s, box-shadow 0.25s;

      &:hover {
        translate: 0 -4px;
        box-shadow: var(--shadow);
      }
    }

    & img {
      inline-size: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      margin-block-end: 0.6rem;
      border-radius: calc(var(--radius) - 6px);
      background: oklch(100% 0 0);
    }

    & span {
      padding-inline: 0.25rem;
      font-weight: 700;
    }

    & small {
      padding-inline: 0.25rem;
      color: var(--muted);
    }
  }

  .app-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;

    & a {
      display: grid;
      gap: 0.75rem;
      block-size: 100%;
      padding: 1.25rem 1.5rem;
      border-radius: var(--radius);
      background: var(--surface-2);
      color: var(--ink);
      font-weight: 600;
      text-decoration: none;
      transition: background-color 0.25s;

      &:hover {
        background: var(--heat-soft);
      }
    }
  }

  .app-no {
    font-family: var(--font-latin);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-ink);
  }

  .band {
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--radius);
    background: var(--heat-soft);
    gap: 0.75rem;
  }

  .finder {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .finder-search {
    display: grid;
    gap: 0.35rem;

    & label {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--muted);
    }

    & input {
      inline-size: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-s);
      background: var(--bg);
      font-size: 1rem;

      &:focus-visible {
        border-color: var(--heat);
      }
    }
  }

  .finder-count {
    margin-block: 1.5rem 1rem;
    font-weight: 700;
    color: var(--muted);

    &:empty {
      display: none;
    }
  }

  .catalog {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin-block-start: 1.5rem;

    & > li[hidden] {
      display: none;
    }
  }

  .finder-count + .catalog {
    margin-block-start: 0;
  }

  main:has(.finder input[value="mantle-heater"]:checked) .catalog > li:not([data-cat~="mantle-heater"]),
  main:has(.finder input[value="insulation"]:checked) .catalog > li:not([data-cat~="insulation"]),
  main:has(.finder input[value="ribbon-heater"]:checked) .catalog > li:not([data-cat~="ribbon-heater"]),
  main:has(.finder input[value="silicon-heater"]:checked) .catalog > li:not([data-cat~="silicon-heater"]),
  main:has(.finder input[value="film-heater"]:checked) .catalog > li:not([data-cat~="film-heater"]),
  main:has(.finder input[value="controller"]:checked) .catalog > li:not([data-cat~="controller"]),
  main:has(.finder input[value="furnace"]:checked) .catalog > li:not([data-cat~="furnace"]),
  main:has(.finder input[value="safety"]:checked) .catalog > li:not([data-cat~="safety"]) {
    display: none;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    block-size: 100%;
    padding: 0.6rem 0.6rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: translate 0.25s, box-shadow 0.25s, border-color 0.25s;

    &:hover {
      translate: 0 -4px;
      border-color: transparent;
      box-shadow: var(--shadow);

      & .card-name {
        color: var(--link);
      }
    }

    & img {
      inline-size: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      margin-block-end: 0.5rem;
      border-radius: calc(var(--radius) - 6px);
      background: oklch(100% 0 0);
    }

    & > span,
    & > strong {
      padding-inline: 0.4rem;
    }
  }

  .card-cat {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-ink);
  }

  .card-name {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .card-model {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--muted);
  }

  .card-text {
    font-size: 0.875rem;
    color: var(--muted);
  }

  .card-era {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.8;
  }

  .finder-empty {
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: center;
  }

  .product-hero {
    display: grid;
    gap: 2rem;
    align-items: center;
    margin-block: 1.5rem 3rem;

    & h1 {
      font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.75rem);
    }
  }

  @container main (width >= 48rem) {
    .product-hero:not(.product-hero-text) {
      grid-template-columns: minmax(16rem, 2fr) 3fr;
    }
  }

  .product-photo {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: oklch(100% 0 0);
    box-shadow: var(--shadow);

    & img {
      margin-inline: auto;
    }

    & figcaption {
      margin-block-start: 0.75rem;
      font-size: 0.8125rem;
      color: oklch(45% 0.02 258);
      text-align: center;
    }
  }

  .product-intro {
    display: grid;
    gap: 0.9rem;

    & .lead {
      font-size: 1.0625rem;
    }

    & .button-ghost {
      color: var(--ink);
    }
  }

  .product-layout {
    display: grid;
    gap: 2.5rem;
  }

  .toc {
    font-size: 0.875rem;

    & p {
      margin-block-end: 0.5rem;
      font-weight: 700;
      color: var(--muted);
    }

    & ol {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    & a {
      display: block;
      padding: 0.3rem 0.85rem;
      border-radius: 999px;
      background: var(--surface-2);
      color: var(--ink);
      text-decoration: none;

      &:hover {
        background: var(--heat-soft);
      }
    }
  }

  @container main (width >= 60rem) {
    .product-layout:not(.no-toc) {
      grid-template-columns: 13rem minmax(0, 1fr);
      align-items: start;
    }

    .toc {
      position: sticky;
      inset-block-start: calc(var(--header) + 1.5rem);

      & ol {
        display: grid;
        gap: 0.1rem;
        border-inline-start: 2px solid var(--line);
      }

      & a {
        padding: 0.35rem 1rem;
        border-radius: 0;
        background: none;
        margin-inline-start: -2px;
        border-inline-start: 2px solid transparent;

        &:hover {
          background: none;
          border-color: var(--turq);
        }
      }
    }
  }

  .prose {
    min-inline-size: 0;

    & > h2 {
      margin-block: 2.75rem 1rem;

      &:first-child {
        margin-block-start: 0;
      }
    }

    & h3 {
      margin-block: 1.75rem 0.5rem;
      font-size: 1.0625rem;
    }

    & > p,
    & > ul,
    & > ol {
      margin-block: 0.75rem;
    }

    & ul {
      padding-inline-start: 1.25rem;

      & li::marker {
        color: var(--heat);
      }
    }

    & figure {
      margin-block: 1.25rem;
      padding: 1rem;
      border-radius: var(--radius-s);
      background: oklch(100% 0 0);

      & figcaption {
        font-size: 0.8125rem;
        color: oklch(45% 0.02 258);
      }
    }

    & figure:has(> .flow) {
      padding: 0;
      background: none;

      & figcaption {
        margin-block-start: 0.75rem;
        color: var(--muted);
      }
    }

    & .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
      gap: 1rem;
    }
  }

  .profile {
    border-block-start: 1px solid var(--line);

    & > div {
      display: grid;
      grid-template-columns: 9rem 1fr;
      gap: 0.5rem 2rem;
      padding-block: 1.1rem;
      border-block-end: 1px solid var(--line);
    }

    & dt {
      font-weight: 700;
      color: var(--muted);
    }
  }

  @container main (width < 34rem) {
    .profile > div {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }
  }

  .link-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin-block-start: 3rem;

    & a {
      display: grid;
      gap: 0.25rem;
      block-size: 100%;
      padding: 1.25rem 1.5rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      text-decoration: none;
      transition: border-color 0.2s, box-shadow 0.2s;

      &:hover {
        border-color: var(--heat);
        box-shadow: var(--shadow);
      }
    }

    & span {
      font-size: 0.875rem;
      color: var(--muted);
    }
  }

  .chips-news {
    margin-block-end: 1.5rem;
  }

  main:has(.chips-news input[value="展示会"]:checked) .news-timeline > li:not([data-kind="展示会"]),
  main:has(.chips-news input[value="お知らせ"]:checked) .news-timeline > li:not([data-kind="お知らせ"]),
  main:has(.chips-news input[value="受賞"]:checked) .news-timeline > li:not([data-kind="受賞"]),
  main:has(.chips-news input[value="新商品"]:checked) .news-timeline > li:not([data-kind="新商品"]) {
    display: none;
  }

  .news-timeline {
    border-inline-start: 2px solid var(--line);
    padding-inline-start: 1.5rem;

    & li {
      position: relative;
      border: 0;
      padding-block: 1rem;

      &::before {
        content: "";
        position: absolute;
        inset-inline-start: calc(-1.5rem - 6px);
        inset-block-start: 1.55rem;
        inline-size: 10px;
        block-size: 10px;
        border-radius: 50%;
        background: var(--heat);
        box-shadow: 0 0 0 4px var(--bg);
      }
    }
  }

  .faq-group {
    margin-block-start: 2.5rem;
    display: grid;
    gap: 0.75rem;

    & > h2 {
      margin-block-end: 0.25rem;
    }
  }

  details {
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }

    &[open] {
      border-color: color-mix(in oklch, var(--heat) 50%, var(--line));
    }
  }

  summary {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "Q" / "";
      font-family: var(--font-latin);
      color: var(--accent-ink);
    }

    &::after {
      content: "+" / "";
      margin-inline-start: auto;
      font-family: var(--font-latin);
      font-size: 1.25rem;
      line-height: 1;
      color: var(--muted);
      transition: rotate 0.3s;
    }

    details[open] > &::after {
      rotate: 45deg;
    }
  }

  .answer {
    display: grid;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem 2.6rem;
  }
}

@layer components {
  .prose {
    & .lead {
      font-size: 1.0625rem;
    }

    & .index-list,
    & .sitemap {
      padding-inline-start: 1.25rem;
    }

    & .sitemap ul {
      margin-block: 0.25rem 0.5rem;
    }

    & ol {
      padding-inline-start: 1.5rem;
    }

    & ol.paren {
      list-style: none;
      counter-reset: paren;
      padding-inline-start: 0.5rem;

      & > li {
        counter-increment: paren;
      }

      & > li::before {
        content: "(" counter(paren) ") ";
        color: var(--muted);
      }
    }

    & dl.app-list {
      display: grid;
      gap: 0.75rem;
      margin-block: 1rem;

      & dt {
        font-weight: 700;
      }

      & dd {
        margin-block-start: -0.5rem;
        padding-inline-start: 1rem;
        border-inline-start: 2px solid var(--line);
        color: var(--muted);
      }
    }

    & .notes {
      list-style: none;
      padding: 0;
      font-size: 0.875rem;
      color: var(--muted);

      & li::before {
        content: "※" / "";
      }
    }

    & .flow {
      list-style: none;
      display: grid;
      gap: 1.75rem;
      max-inline-size: 36rem;
      padding: 0;

      & li {
        position: relative;
        padding: 0.75rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        background: var(--surface);
      }

      & li + li::before {
        content: "↓" / "";
        position: absolute;
        inset-block-end: 100%;
        inset-inline-start: 1.25rem;
        padding-block-end: 0.2rem;
        color: var(--turq-light);
        font-weight: 700;
        line-height: 1.4;
      }

      & strong {
        display: block;
      }

      & span {
        font-size: 0.875rem;
        color: var(--muted);
      }

      & .flow-end {
        background: var(--surface-2);
        text-align: center;
      }
    }

    & .photo-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 0;

      & img {
        border-radius: var(--radius-s);
        transition: translate 0.2s;
      }

      & a:hover img {
        translate: 0 -3px;
      }
    }

    & .registration {
      display: inline-block;
      padding: 0.2rem 0.9rem;
      border: 1px solid var(--turq);
      border-radius: 999px;
      color: var(--turq-light);
      font-family: var(--font-latin);
      font-weight: 600;
    }

    & .signature {
      text-align: end;
      color: var(--muted);
    }

    & .small {
      font-size: 0.875rem;
      color: var(--muted);
    }

    & .tbd {
      padding: 0 0.4em;
      border: 1px dashed var(--heat);
      border-radius: 4px;
      font-size: 0.8125em;
    }
  }

  .dateline {
    margin-block: -1.25rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-family: var(--font-latin);

    & .kind {
      padding: 0.05rem 0.7rem;
      border-radius: 999px;
      background: var(--surface-2);
      font-family: var(--font);
      font-size: 0.75rem;
      font-weight: 600;
    }
  }

  .back {
    margin-block-start: 2.5rem;
    font-weight: 600;

    & a::before {
      content: "← " / "";
    }
  }

  .product-model {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 1rem;

    & span {
      padding: 0.05rem 0.6rem;
      border-radius: 4px;
      background: var(--surface-2);
      color: var(--muted);
      font-family: var(--font);
      font-size: 0.75rem;
      font-weight: 700;
    }
  }

  .inquiry {
    margin-block-start: 3.5rem;
    padding: clamp(1.25rem, 3cqi, 2rem);
    border: 1px solid color-mix(in oklch, var(--turq) 45%, var(--line));
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--surface), color-mix(in oklch, var(--turq) 8%, var(--surface)));

    & h2 {
      font-size: 1.25rem;
    }

    & > p {
      margin-block: 0.5rem 1rem;
      color: var(--muted);
    }

    & dl {
      display: grid;
      gap: 0.5rem;
    }

    & dl > div {
      display: grid;
      grid-template-columns: 4em 1fr;
      gap: 1rem;
    }

    & dt {
      font-weight: 700;
      color: var(--muted);
    }
  }

  .pager ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem 1.5rem;
    margin-block-start: 1.5rem;
    padding-block: 1rem;
    border-block-start: 1px solid var(--line);
    font-size: 0.9375rem;

    & .pager-prev {
      grid-column: 1;
    }

    & .pager-up {
      grid-column: 2;
      text-align: center;
    }

    & .pager-next {
      grid-column: 3;
      text-align: end;
    }

    & .pager-prev a::before {
      content: "← " / "";
    }

    & .pager-next a::after {
      content: " →" / "";
    }
  }

  @container main (width < 40rem) {
    .pager ul {
      grid-template-columns: 1fr;

      & .pager-prev,
      & .pager-up,
      & .pager-next {
        grid-column: 1;
        text-align: start;
      }

      & .pager-up {
        order: -1;
      }
    }
  }

  .pickup-links {
    list-style: none;
    display: grid;
    gap: 0.6rem;

    & li {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.25rem 0.75rem;
    }
  }

  .catalog-compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .hero::before {
      animation: glow-spin 24s linear infinite;
    }
  }

}

@layer motion {
  @keyframes glow-spin {
    to { --glow: 360deg; }
  }
}

@layer print {
  @media print {
    .masthead,
    .hero::before,
    .finder,
    .toc {
      display: none;
    }
  }
}