/*
 * SAINO site styles.
 *
 * Every value comes from tokens.css; no colour literals live here, and
 * tools/lint_tokens.py fails the build if one appears. Vermilion is referenced
 * exactly once, on .btn-primary.
 */

/* ---------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, "Noto Sans JP", "Noto Sans TC", system-ui, sans-serif;
  font-size: var(--base);
  line-height: var(--lh-base);
  font-feature-settings: "palt" 1;
}

/* Japanese copy needs a looser line height than Latin. */
body.saino-cjk-loose { line-height: var(--lh-ja); }

img, svg { max-width: 100%; height: auto; }

a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  color: var(--indigo);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  margin: 0 0 0.6em;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: 1rem; }

p { margin: 0 0 1.2em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }

/* ------------------------------------------------------------- layout */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section { padding-block: 72px; }
.section--paper { background: var(--paper); }
.section--tight { padding-block: 48px; }

.grid {
  display: grid;
  gap: var(--gutter);
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

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

@media (max-width: 600px) {
  .grid--4 { grid-template-columns: 1fr; }
  .section { padding-block: 48px; }
  :root { --h1: 30px; --h2: 23px; --h3: 18px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--white);
  border: 1px solid var(--indigo);
}

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  transition: height 0.2s ease;
}

.site-header.is-scrolled { height: var(--header-h-scrolled); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: min(100% - (var(--gutter) * 2), var(--container));
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  flex: 0 0 auto;
}

/* Provisional wordmark spec from IG R1: Inter 600, +0.16em tracking, indigo.
   The final logo is not signed off (C-07), so this stays swappable. */
.wordmark__mark {
  font-weight: var(--weight-semibold);
  font-size: 22px;
  letter-spacing: var(--tracking-wordmark);
  color: var(--indigo);
  line-height: 1;
}

.wordmark__legal {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  line-height: 1;
}

.site-nav { flex: 1 1 auto; }

.site-nav__list {
  display: flex;
  gap: 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.site-nav__list a { text-decoration: none; }
.site-nav__list a:hover { text-decoration: underline; }

.site-header__aside {
  display: flex;
  align-items: center;
  gap: 1.2em;
  flex: 0 0 auto;
}

.lang-switch {
  display: flex;
  gap: 0.8em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.lang-switch a { color: var(--ink-mute); text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch__item.is-current a { color: var(--indigo); font-weight: var(--weight-medium); }

@media (max-width: 900px) {
  .site-header { height: auto; padding-block: 12px; position: static; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; order: 3; }
  .site-nav__list { flex-wrap: wrap; gap: 1em; }
}

/* Phone: the wordmark plus language switch plus CTA no longer fit on one
   line at 390px (the row overflowed by 6px and gave the page a horizontal
   scroll). Let the aside shrink and the CTA drop under the wordmark. */
@media (max-width: 600px) {
  .site-header__inner { row-gap: 10px; }
  .site-header__aside { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.8em; }
  .site-header__cta { padding-inline: 14px; font-size: 13px; }
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  border: 1px solid var(--indigo);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  background: transparent;
  color: var(--indigo);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: var(--indigo); color: var(--white); }

/*
 * The single vermilion element on the site. IG R1 caps vermilion at 10% of the
 * palette and names the primary CTA as its only carrier; tools/lint_tokens.py
 * rejects any other selector that references the token.
 */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: var(--white);
}

.btn-primary:hover { background: var(--vermilion-deep); border-color: var(--vermilion-deep); }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- hero */

/*
 * The measurement field is an SVG asset, not a CSS gradient: IG allows white and
 * 生成り alternating with no third background and no gradients, so the colour
 * stays a token and the lines live in the file. Its left 42% is empty by
 * construction, which is where the headline sits.
 */
.hero {
  padding-block: 96px 72px;
  background-color: var(--paper);
  background-image: url(../img/hero-field.svg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

/*
 * Brand photograph heroes.
 *
 * These are the only dark surfaces on the site. They sit outside the white and
 * 生成り alternation rather than breaking it: the alternation governs the
 * content sections, and the hero is a full-bleed band above them.
 *
 * The scrim is a flat overlay, not a gradient, and its opacity is the same value
 * tools/make_hero_images.py assumes when it measures white-on-image contrast in
 * the text zone. Change one and the other stops being a guarantee.
 *
 * The frames are brand atmosphere. Nothing in them is an identifiable SAINO
 * part, so they claim nothing a supplier audit could read as evidence.
 */
.hero--image {
  position: relative;
  padding-block: 132px 112px;
  background-color: var(--indigo-deep);
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--on-dark);
  isolation: isolate;
}

.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--indigo);
  opacity: var(--hero-scrim);
  z-index: -1;
}

.hero--image .hero__slogan,
.hero--image .hero__title,
.hero--image .page-title { color: var(--on-dark); }

.hero--image .hero__slogan-en,
.hero--image .hero__lead { color: var(--on-dark-mute); }

.hero--image .btn {
  color: var(--on-dark);
  border-color: var(--rule-on-dark);
}

/* The primary CTA keeps vermilion. It is still the only vermilion element. */

.hero--brand-home {
  background-image: image-set(url(../img/brand-home-1600.webp) type("image/webp"),
                              url(../img/brand-home-1600.jpg) type("image/jpeg"));
}
.hero--brand-quality {
  background-image: image-set(url(../img/brand-quality-1600.webp) type("image/webp"),
                              url(../img/brand-quality-1600.jpg) type("image/jpeg"));
}
.hero--brand-about {
  background-image: image-set(url(../img/brand-about-1600.webp) type("image/webp"),
                              url(../img/brand-about-1600.jpg) type("image/jpeg"));
}
/* 2026-09-11: home hero uses Andy's flange render. The subject sits on the
   right of the frame, so the image is anchored right and the text keeps the
   dark left half; on narrow screens the anchor keeps part of the flange
   visible instead of cropping to empty blue. */
.hero--brand-home-flange {
  background-image: image-set(url(../img/brand-home-flange-1600.webp) type("image/webp"),
                              url(../img/brand-home-flange-1600.jpg) type("image/jpeg"));
  background-position: right center;
}
/* Keep the copy on the empty left half so it never runs under the flange. */
.hero--brand-home-flange .hero__slogan,
.hero--brand-home-flange .hero__lead { max-width: min(30em, 52%); }
@media (max-width: 900px) {
  .hero--brand-home-flange .hero__slogan,
  .hero--brand-home-flange .hero__lead { max-width: none; }
}

@media (min-width: 1400px) {
  .hero--brand-home {
    background-image: image-set(url(../img/brand-home-2400.webp) type("image/webp"),
                                url(../img/brand-home-2400.jpg) type("image/jpeg"));
  }
  .hero--brand-quality {
    background-image: image-set(url(../img/brand-quality-2400.webp) type("image/webp"),
                                url(../img/brand-quality-2400.jpg) type("image/jpeg"));
  }
  .hero--brand-about {
    background-image: image-set(url(../img/brand-about-2400.webp) type("image/webp"),
                                url(../img/brand-about-2400.jpg) type("image/jpeg"));
  }
  .hero--brand-home-flange {
    background-image: image-set(url(../img/brand-home-flange-2400.webp) type("image/webp"),
                                url(../img/brand-home-flange-2400.jpg) type("image/jpeg"));
  }
}

.hero__title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 0.4em; }
.hero__lead { max-width: 46em; color: var(--ink-mute); }
.hero__actions { margin-top: 2em; }

/* Slogan. Four CJK characters need their own scale to hold the hero, and the
   wordmark's tracking to read as brand rather than as a heading. */
.hero__slogan {
  font-size: clamp(42px, 6.4vw, 76px);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1.25;
  color: var(--indigo);
  margin: 0;
}

/* 文としてのスローガン（日本語版「技に宿る、変わらぬ品質。」）。
   四文字用の級数のままだと大きすぎて折り返しが汚くなるので、別スケールを持たせる。 */
.hero__slogan--sentence {
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.hero__slogan-en {
  margin: 0.5em 0 0;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wordmark);
  text-transform: lowercase;
  color: var(--ink-mute);
}

.hero__slogan + .hero__slogan-en + .hero__lead { margin-top: 1.6em; }

/* --------------------------------------------------------------- cards */

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.card__title { margin: 0; font-size: var(--h3); }
.card__body { color: var(--ink-mute); font-size: 15px; margin: 0; flex: 1 1 auto; }
.card__link { font-size: 14px; text-decoration: none; }
.card__link::after { content: " \2192"; }

/* --------------------------------------------------------------- table */

.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  /* Specification figures must line up column to column. */
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--rule);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--paper);
  color: var(--indigo);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.data-table td.is-numeric { text-align: right; }
.data-table tbody tr:hover { background: var(--paper); }

.spec-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.7;
}

/* ------------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding: 20px;
  background: var(--paper);
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.filters__field { display: flex; flex-direction: column; gap: 6px; }
.filters__label { font-size: 13px; color: var(--ink-mute); }

.filters select {
  min-width: 12em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.result-count { font-size: 14px; color: var(--ink-mute); margin-bottom: 12px; }

/* ---------------------------------------------------------- placeholder */

/*
 * Unconfirmed content, carried over from the prototype's amber treatment.
 * Keeping it visible on staging turns the open-items list into something you can
 * see, and makes it obvious if one ever reaches production.
 */
.ph {
  background: var(--placeholder-bg);
  border-bottom: 1px dashed var(--placeholder-rule);
  color: var(--placeholder-ink);
  padding: 0 0.3em;
}

.ph__label {
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-right: 0.5em;
  text-transform: uppercase;
}

/*
 * 資料徵集區塊（2026-09-05 B2B 改版）。
 *
 * .ph 是琥珀色的「這個值待確認」。這裡是紅色的「這一整段內容還不存在，
 * 需要具名的人提供」。刻意做得跟版面格格不入：它本來就不該留在正式站上，
 * 看起來像設計的一部分反而危險。上線前 SAINO_SHOW_DATA_REQUESTS = false。
 */
.saino-req {
  background: var(--req-bg);
  border: 2px solid var(--req-rule);
  border-left-width: 6px;
  border-radius: 2px;
  margin: 20px 0;
  padding: 14px 16px;
}

.saino-req__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.saino-req__owner {
  background: var(--req-rule);
  border-radius: 2px;
  color: var(--req-on-rule);
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  white-space: nowrap;
}

.saino-req__what {
  color: var(--req-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.saino-req__detail {
  color: var(--req-ink-soft);
  font-size: 14px;
  line-height: 1.75;
  margin: 8px 0 0;
}

.saino-req__why {
  color: var(--req-ink-muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 6px 0 0;
}

.saino-req__why::before { content: "ƒBÀ0"; }

@media print {
  .saino-req { border-color: var(--req-print); }
}

/* ---------------------------------------------------------- breadcrumb */

.breadcrumb { padding-block: 20px 0; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-mute);
}

.breadcrumb__item + .breadcrumb__item::before { content: "/"; margin-right: 0.5em; }
.breadcrumb a { color: var(--ink-mute); }

/* ---------------------------------------------------------------- news */

.news-list { list-style: none; margin: 0; padding: 0; }

.news-list__item {
  display: flex;
  gap: 1.5em;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.news-list__date { color: var(--ink-mute); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-list__title { text-decoration: none; }

@media (max-width: 600px) {
  .news-list__item { flex-direction: column; gap: 0.3em; }
}

/* ---------------------------------------------------------------- form */

.form { max-width: 46em; }
.form__group { border: 0; padding: 0; margin: 0 0 32px; }
.form__group[hidden] { display: none; }

.form__legend {
  font-size: var(--h3);
  color: var(--indigo);
  font-weight: var(--weight-medium);
  padding: 0;
  margin-bottom: 16px;
}

.form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form__label { font-size: 14px; color: var(--ink); }
.form__required { color: var(--ink-mute); margin-left: 0.3em; }

.form__input {
  padding: 0.6em 0.7em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  width: 100%;
}

.form__input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.form__hint { font-size: 12px; color: var(--ink-mute); }
.form__error:not(:empty) { font-size: 13px; color: var(--error-ink); }
.form__consent { display: flex; gap: 0.6em; align-items: flex-start; font-size: 14px; }

/* A field the server rejected. JS adds this class and aria-invalid, then scrolls
   the row under the header and focuses the control. */
.form__input--invalid { border-color: var(--error-rule); }
.form__input--invalid:focus-visible { outline-color: var(--error-rule); }

.form__status {
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  color: var(--teal);
  font-size: 15px;
}

.form__status--error { border-color: var(--error-rule); color: var(--error-ink); }

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--indigo);
  color: var(--white);
  padding-block: 56px 24px;
  margin-top: 80px;
}

.site-footer a { color: var(--white); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  padding-bottom: 32px;
}

.wordmark__mark--footer { color: var(--white); font-size: 20px; display: block; margin-bottom: 12px; }
.site-footer__legal { margin: 0 0 8px; font-size: 15px; }
.site-footer__address { font-style: normal; font-size: 14px; line-height: 1.9; opacity: 0.85; }

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--indigo-deep);
  padding-top: 20px;
  font-size: 13px;
}

.site-footer__copyright { margin: 0; opacity: 0.8; }
.site-footer .lang-switch a { color: var(--white); opacity: 0.85; }

/* --------------------------------------------------------------- prose */

.prose { max-width: 46em; }
.prose h2 { margin-top: 2em; }

/*
 * When .prose sits on the same element as .wrap, the 46em measure collides with
 * .wrap's own margin: 0 auto and the whole block gets centred in the container.
 * That was self-consistent while the page title lived inside it; once the title
 * moved up into the hero, the title sat on the container edge and the body text
 * floated in the middle of the page.
 *
 * Keep the element behaving as the container and put the measure on its
 * children, so the text starts where every other section starts.
 */
.wrap.prose { max-width: var(--container); }
.wrap.prose > * { max-width: 46em; }
.page-title { margin-bottom: 0.8em; }

.definition-list { margin: 0; }
.definition-list__row { display: flex; gap: 1.5em; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.definition-list__term { flex: 0 0 12em; color: var(--ink-mute); font-size: 14px; margin: 0; }
.definition-list__value { margin: 0; font-size: 15px; }

@media (max-width: 600px) {
  .definition-list__row { flex-direction: column; gap: 0.3em; }
}

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps__item { counter-increment: step; display: flex; gap: 1em; align-items: flex-start; }

.steps__item::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Business-line label. IG R1 section 04: teal, medium weight, product level. */
.line-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--teal);
  letter-spacing: 0.04em;
  margin-bottom: 0.6em;
}

.status-tag {
  display: inline-block;
  font-size: 12px;
  padding: 0.15em 0.6em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-mute);
  white-space: nowrap;
}

/* ------------------------------------------------------- home (2026-09-11) */
/* Andy's icon-led home layout. Headings and cards are centred here only; the
   inner pages keep the left-aligned editorial layout. */

.hero__slogan-en + .hero__slogan { margin-top: 0.4em; }
.hero__slogan-en::before { content: ""; display: inline-block; width: 2em; height: 1px; background: currentColor; vertical-align: middle; margin-right: 0.8em; }

.section__title { text-align: center; margin-bottom: 0.5em; }
.section__lead { text-align: center; color: var(--ink-mute); max-width: 40em; margin: 0 auto 2em; }
.section__note { text-align: center; color: var(--ink-mute); font-size: 15px; margin: 2em auto 0; max-width: 40em; }

.card--icon { align-items: center; text-align: center; padding: 32px 24px; gap: 0.8em; }
.card--icon .card__body { flex: 0 0 auto; }
.card__icon { width: 96px; height: 80px; color: var(--indigo); display: grid; place-items: center; }
.card__icon svg { width: 100%; height: 100%; }
.card__icon--wide { width: 150px; }

.cta-band { text-align: center; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-band__lead { font-size: 20px; font-weight: var(--weight-medium); color: var(--indigo); margin: 0; }

.panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 32px; }
.panel + .panel { margin-top: var(--gutter); }
.panel__title { margin: 0 0 1.2em; font-size: var(--h3); }
.panel__link { display: inline-block; margin-top: 1.4em; font-size: 14px; text-decoration: none; }
.panel__link::after { content: " \2192"; }

.tile { text-align: center; }
.tile__icon { height: 84px; display: grid; place-items: center; color: var(--indigo); margin-bottom: 14px; }
.tile__icon svg { max-width: 120px; max-height: 84px; width: auto; height: 84px; }
.tile__glyph { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--indigo); }
.tile__title { margin: 0 0 0.4em; font-size: 17px; font-weight: var(--weight-medium); color: var(--indigo); }
.tile__body { color: var(--ink-mute); font-size: 14px; margin: 0; text-align: left; }
.tile--compact .tile__title { margin-bottom: 0; }

/* Five-step flow. Desktop: one row with arrows; below 900px: a vertical list
   with the icon on the left and no arrows. The step icons carry their own
   circle, so the container only sizes them. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.flow__step { position: relative; text-align: center; padding-inline: 8px; }
.flow__step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -14px;
  top: 36px;
  color: var(--indigo);
  font-size: 22px;
  line-height: 1;
}
.flow__icon { height: 96px; display: grid; place-items: center; color: var(--indigo); }
.flow__icon svg { width: 96px; height: 96px; }
.flow__num { display: block; margin-top: 10px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--indigo); font-variant-numeric: tabular-nums; }
.flow__title { margin: 0.2em 0 0.4em; font-size: 16px; }
.flow__body { margin: 0; color: var(--ink-mute); font-size: 14px; }

.news-list__all { margin-top: 1em; text-align: right; }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 12px; }
  .flow__step { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; text-align: left; align-items: start; }
  .flow__step:not(:last-child)::after { content: none; }
  .flow__icon { grid-row: 1 / span 3; height: auto; }
  .flow__icon svg { width: 72px; height: 72px; }
  .flow__num { margin-top: 0; }
  .panel { padding: 24px 20px; }
  .tile__body { text-align: center; }
}

@media (max-width: 600px) {
  .card__icon { height: 64px; }
  .card__icon--wide { width: 120px; }
  .cta-band__lead { font-size: 17px; }
  .tile__icon { height: 64px; }
  .tile__icon svg { height: 64px; max-width: 96px; }
  .tile__glyph { font-size: 52px; }
}


/* ------------------------------------------- product lines (2026-09-16) */

/*
 * 製品・部品 dropdown. Opened by :hover and :focus-within (keyboard reaches
 * the sub-items by tabbing into the parent link), no JavaScript. Under 900px
 * the header already wraps the nav onto its own row, so the sub-list is
 * simply shown inline as an indented second row and the dropdown disappears.
 * .sub-menu is what wp_nav_menu() emits, so a menu built in wp-admin gets the
 * same treatment.
 */
.site-nav__list-item.has-children,
.site-nav__list-item.menu-item-has-children { position: relative; }

.site-nav__sub,
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 18em;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: none;
  z-index: 20;
}

.site-nav__list-item.has-children:hover > .site-nav__sub,
.site-nav__list-item.has-children:focus-within > .site-nav__sub,
.site-nav__list-item.menu-item-has-children:hover > .sub-menu,
.site-nav__list-item.menu-item-has-children:focus-within > .sub-menu { display: block; }

.site-nav__list-item.has-children > a::after,
.site-nav__list-item.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}

.site-nav__sub a,
.site-nav__list .sub-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.site-nav__sub a:hover,
.site-nav__list .sub-menu a:hover { background: var(--paper); text-decoration: none; }

@media (max-width: 900px) {
  .site-nav__sub,
  .site-nav__list .sub-menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    min-width: 0;
    padding: 6px 0 0 1em;
    border: 0;
    background: transparent;
  }
  .site-nav__list-item.has-children,
  .site-nav__list-item.menu-item-has-children { flex-basis: 100%; }
  .site-nav__list-item.has-children > a::after,
  .site-nav__list-item.menu-item-has-children > a::after { content: none; }
  .site-nav__sub a,
  .site-nav__list .sub-menu a { padding: 0; }
  .site-nav__sub a:hover,
  .site-nav__list .sub-menu a:hover { background: transparent; text-decoration: underline; }
}
@media (max-width: 600px) {
  /* Three long line names: one per row reads better than a ragged wrap. */
  .site-nav__sub,
  .site-nav__list .sub-menu { flex-direction: column; gap: 0.3em; }
}

/* Recycled-resin hero: Andy's 2026-09-16 background. Subject on the right,
   copy on the dark left half, same discipline as the flange hero. */
.hero--brand-recycled {
  background-image: image-set(url(../img/brand-recycled-1600.webp) type("image/webp"),
                              url(../img/brand-recycled-1600.jpg) type("image/jpeg"));
  background-position: right center;
}
@media (min-width: 1400px) {
  .hero--brand-recycled {
    background-image: image-set(url(../img/brand-recycled-2400.webp) type("image/webp"),
                                url(../img/brand-recycled-2400.jpg) type("image/jpeg"));
  }
}
.hero--brand-recycled .hero__title,
.hero--brand-recycled .hero__lead { max-width: min(30em, 52%); }
.hero__title--break { line-height: 1.3; }
@media (max-width: 900px) {
  .hero--brand-recycled .hero__title,
  .hero--brand-recycled .hero__lead { max-width: none; }
}

/* Landing-page cards: a smaller title where three sit in a row. */
.card__title--small { font-size: 17px; font-weight: var(--weight-medium); }
.section__title--spaced { margin-top: 2.4em; }
.definition-list--narrow { max-width: 46em; margin-inline: auto; }
.line-card .card__title { font-size: var(--h3); }

/* Section head with a title on the left and a lead on the right, as in the
   取扱材料例 block of the mockup. */
.eyebrow {
  margin: 0 0 1.2em;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before { content: ""; display: inline-block; width: 2em; height: 1px; background: currentColor; vertical-align: middle; margin-right: 0.8em; }
.section__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; margin-bottom: 1.6em; }
.section__head-title { margin: 0; }
.section__head-lead { margin: 0; color: var(--ink-mute); }
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; }
}

/* 取扱材料例 table. Row header carries the material and, underneath it, the
   part number that the PDF and any later order refer to. */
/* Below the container width the table scrolls sideways inside .table-scroll
   instead of squashing 原料由来 into three-character lines. */
.data-table--examples { min-width: 960px; }
.data-table--examples tbody th { font-weight: var(--weight-medium); color: var(--indigo); white-space: nowrap; }
.examples__part-no { display: block; font-size: 12px; font-weight: 400; color: var(--ink-mute); letter-spacing: 0.04em; }
.examples__uses { font-size: 14px; color: var(--ink-mute); min-width: 16em; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--paper);
}
.tag--class { color: var(--teal); border-color: var(--teal); background: var(--white); }

.pdf-link {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--indigo);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--indigo);
}
.pdf-link:hover { background: var(--indigo); color: var(--on-dark); }

/* ------------------------------------- metal & seal landings (2026-09-17) */

/* Five element cubes in one row on the metal page. Below 900px they wrap to
   three then two (3+2 leaves no single orphan), and under 600px they stack. */
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.tile__figure { display: grid; place-items: center; height: 150px; margin-bottom: 10px; }
.tile__figure img { width: auto; height: 150px; }
.tile--element .tile__title { font-size: 16px; }
.tile--element .tile__body { font-size: 13px; }
.panel .section__note { margin-top: 1.6em; margin-bottom: 0; }

/* 部品形状の例: a plain photo grid, captions underneath. The photographs come
   with mixed backgrounds (white studio shots and darker renders), so each one
   sits inside the same hairline frame to read as one set. */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.gallery__figure { margin: 0; }
.gallery__picture { display: block; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.gallery__picture img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__caption { margin-top: 0.6em; font-size: 14px; color: var(--ink-mute); text-align: center; }
.gallery__material { display: block; margin-top: 2px; font-size: 12px; letter-spacing: 0.06em; color: var(--teal); }

/* ------------------------------ metal: ion-implant W/Mo block (2026-09-18) */

/* The lead restates why ion source parts are W and Mo; it runs longer than the
   one-line leads elsewhere, so it gets a wider measure. */
.section__lead--wide { max-width: 52em; }

/* Three process families as a row of pills (the one-pager shows them the
   same way). Paper on white, hairline, no fill colour: they are labels, not
   buttons, and the page's only vermilion stays on the CTA. */
.process { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.process__item { padding: 8px 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-size: 15px; font-weight: var(--weight-medium); color: var(--indigo); }

/* Spec table on the left, items handled on request on the right. */
.grid--spec { align-items: start; }
.data-table--spec tbody th { font-weight: var(--weight-medium); color: var(--indigo); white-space: nowrap; }
.data-table--spec td { white-space: nowrap; }
.spec__dim { display: block; font-size: 13px; font-weight: 400; color: var(--ink-mute); }
.items__lead { margin: 0 0 1em; font-size: 15px; color: var(--ink-mute); }
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.items__item { position: relative; padding: 10px 0 10px 1.2em; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink); }
.items__item::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--indigo); }

/* Six-step flow on the seal page. */
.flow--6 { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.flow--6 .flow__body { font-size: 13px; }

/* 部位別の考え方: a row per seal position. Left column names the position
   (Japanese, with the English underneath), right column carries the operating
   conditions as a chip and the reasoning. */
.position { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 24px 0; border-top: 1px solid var(--rule); }
.position:last-child { border-bottom: 1px solid var(--rule); }
.position__title { margin: 0; font-size: 17px; font-weight: var(--weight-medium); color: var(--indigo); }
.position__title-en { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink-mute); }
.position__env { display: inline-block; margin-bottom: 10px; padding: 1px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); font-size: 13px; color: var(--ink-mute); }
.position__body { margin: 0; font-size: 15px; }

/* 選定で見る指標: cards with a "what we ask" line at the foot. */
.card__ask { margin: 0; padding-top: 0.8em; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-mute); }

/* よくあるご質問: native <details>, one hairline per item, a +/− mark on the
   right that flips when open. */
.faq { max-width: 46em; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--rule); padding: 16px 0; }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q { position: relative; padding-right: 32px; cursor: pointer; list-style: none; font-weight: var(--weight-medium); color: var(--indigo); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 0; font-size: 22px; line-height: 1.3; color: var(--indigo); }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { margin: 12px 0 0; font-size: 15px; color: var(--ink-mute); }

/* CTA band with the short list of what to have ready. */
.cta-band__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 14px; color: var(--ink-mute); }
.cta-band__list li::before { content: "\30FB"; }

@media (max-width: 1100px) {
  .flow--6 { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .flow--6 .flow__step:nth-child(3)::after { content: none; }
}

@media (max-width: 900px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .position { grid-template-columns: 1fr; gap: 10px; }
  .flow--6 { grid-template-columns: 1fr; row-gap: 12px; }
}

@media (max-width: 600px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .tile__figure, .tile__figure img { height: 110px; }
  .gallery { gap: 16px; }
  .process__item { font-size: 14px; padding: 6px 16px; }
  .items { grid-template-columns: 1fr; }
}