/*
Theme Name: Ayana
Theme URI: https://mad-more.com/
Author: 株式会社絢捺
Description: 株式会社絢捺のコーポレートサイト用テーマ。トップを「泉翔悟と3つのプロダクト」のハブにし、名刺（濃紺＋明朝）と同じ人格に揃える。親テーマなしの単独テーマ。WPForms・VK Blocks はプラグインなのでテーマ切替の影響を受けない。
Version: 1.4.13
Requires at least: 6.0
Requires PHP: 7.4
License: 所有者専用（再配布不可）
Text Domain: ayana
*/


/* Hallmark · genre: editorial · macrostructure: Marquee Hero · H1 marquee knobs: subject=person, romaji=tracked, tagline=one-line
 * theme: custom (tuned) · vibe: "落ち着いた誠実、余白と明朝、実装者の手"
 * paper: oklch(97% 0.006 75) · accent: oklch(52% 0.135 45) · ink: oklch(24.5% 0.054 260) = 名刺の濃紺 #10203A
 * display: Zen Old Mincho · body: Zen Kaku Gothic New · axes: light / roman-serif / warm
 * nav: N1a · footer: Ft4 · enrichment: none · studied: no · context: user-provided
 *
 * nav: N1a is justified — このサイトの行き先は「会社概要」「お問い合わせ」の2つだけで、
 * editorial の routing table が destinations-minimal のとき N1a を許可している。CTAボタンは置かない。
 *
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * 実測: 本文 14.91:1 / 副文 7.12:1 / muted 5.27:1 / リンク 5.34:1 / 奥付 6.61:1
 *       ダーク面 本文 14.69:1 / 副文 7.58:1 / アクセント 7.38:1 / フォーム枠 3.34:1
 * 検証幅: 320 / 375 / 1280×800 / 1920 — 横スクロールなし・折返し内にヒーロー収まる
 */

:root {
  /* ── 面と文字 ────────────────────────────────────────────────
     ink は名刺の濃紺そのもの。paper は名刺の裏面のオフホワイト。
     どちらも彩度ゼロにはしない（純白・純黒は使わない）。 */
  --color-paper:        oklch(97.0% 0.006 75);    /* #F7F5F1 */
  --color-paper-2:      oklch(94.5% 0.009 75);    /* #F0ECE6 */
  --color-ink:          oklch(24.5% 0.054 260);   /* #10203A  本文 14.91:1 */
  --color-ink-2:        oklch(44.0% 0.035 260);   /* #475366  副文 7.12:1 */
  --color-muted:        oklch(51.0% 0.026 260);   /* #5D6775  paper 5.27:1 / paper-2 4.89:1 */

  /* ── 罫 ──────────────────────────────────────────────────── */
  --color-rule:         oklch(87.0% 0.010 260);   /* 装飾ヘアライン */
  --color-rule-2:       oklch(92.0% 0.007 260);   /* さらに淡い区切り */
  --color-rule-strong:  oklch(62.0% 0.020 260);   /* フォーム枠 3.34:1（非文字AA） */

  /* ── アクセント（面積は全体の1%以下に保つ） ───────────────── */
  --color-accent:       oklch(52.0% 0.135 45);    /* #A64A18  リンク 5.34:1 */
  --color-accent-ink:   var(--color-paper);       /* アクセント塗り上の文字 5.34:1 */
  --color-focus:        oklch(52.0% 0.150 45);    /* フォーカス環 5.38:1 */

  /* ── 濃紺面（ヒーロー＝名刺の表）─────────────────────────── */
  --color-paper-dark:   oklch(24.5% 0.054 260);
  --color-paper-dark-2: oklch(30.0% 0.050 260);
  --color-ink-inv:      oklch(96.5% 0.007 75);    /* 14.69:1 */
  --color-ink-inv-2:    oklch(76.0% 0.018 260);   /* 7.58:1 */
  --color-rule-inv:     oklch(38.0% 0.038 260);
  --color-accent-inv:   oklch(76.0% 0.115 60);    /* 濃紺上 7.38:1 */
  --color-focus-inv:    oklch(80.0% 0.120 60);

  /* ── 書体（2ファミリー） ─────────────────────────────────── */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* ── 文字サイズ（1.25 比・1ページ5段まで） ──────────────────
     xs=ラベル/奥付 · base=本文 · lg=プロダクト名 · xl=セクション見出し · display=氏名 */
  --text-xs:      0.8rem;      /* 12.8px */
  --text-base:    1rem;        /* 16px   */
  --text-lg:      1.5625rem;   /* 25px   */
  --text-xl:      1.953rem;    /* 31.25px */
  /* display は2段。人名（/izumi）は大、会社トップの一文は小。
     同じ役割の大小なので階層の数は増えない。 */
  --text-display:   clamp(3.25rem, 11vw, 7rem);
  --text-display-s: clamp(1.75rem, 4.4vw, 3rem);

  /* 行送り。和文は欧文より広く取る（1.5〜1.65 は和文には詰まりすぎる） */
  --leading-display: 1.08;
  --leading-head:    1.35;
  --leading-body:    1.85;

  /* ── 余白（4pt スケール） ───────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ── 計測幅（和文 約34字） ─────────────────────────────── */
  --measure: 34rem;
  --page-max: 68rem;
  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* ── 罫の太さ ──────────────────────────────────────────── */
  --rule-hair: 1px;
  --rule-thick: 2px;

  /* ── 操作要素の高さ（入力欄とボタンで必ず共有する） ───────── */
  --control-h: 3rem;   /* 48px ≥ 44px */

  /* ── 紙の粒子 ──────────────────────────────────────────────
     完全なフラット塗りは「既定値のまま」に見える。ごく薄い粒子を
     敷いて、色ではなく「紙」として見せる。
     mix-blend-mode は使わない（スクロール中に毎フレーム合成が走るため）。
     不透明度は SVG 側に焼き込み、背景画像として一度だけ描かせる。 */
  --grain-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  --grain-on-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12' style='mix-blend-mode:screen'/%3E%3C/svg%3E");

  /* ── 罫が引かれる動き（このサイトの署名） ─────────────────── */
  --dur-rule: 900ms;

  /* ── 影 ────────────────────────────────────────────────────
     カードを浮かせるための影ではない。紙の上に印画を「置いた」ときの
     ごく浅い影。色は黒ではなくインクの濃紺を薄めて使う。 */
  --shadow-print:
    0 1px 2px oklch(24.5% 0.054 260 / 0.07),
    0 10px 28px -14px oklch(24.5% 0.054 260 / 0.20);
  --shadow-print-lift:
    0 2px 4px oklch(24.5% 0.054 260 / 0.08),
    0 16px 34px -14px oklch(24.5% 0.054 260 / 0.26);

  /* ── モーション ────────────────────────────────────────── */
  --dur-short: 120ms;
  --dur-mid:   260ms;
  --dur-long:  620ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── 重なり順（名前つき6段） ───────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}


/* 株式会社絢捺 — サイト本体スタイル
   トークンは tokens.css。ここでは生の色・書体名を書かない（すべて var() 経由）。 */

/* ─────────────────────────────────────────────────────────────
   1. 基盤
   ───────────────────────────────────────────────────────────── */

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

html {
  overflow-x: clip;          /* hidden ではなく clip（position:sticky を殺さない） */
  -webkit-text-size-adjust: 100%;
}

/* 同一サイト内の移動だけ、短くクロスフェードする。未対応ブラウザは通常遷移。 */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-mid);
  animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-paper);
  background-image: var(--grain-on-light);   /* 紙の粒子。色ではなく素材として見せる */
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  font-feature-settings: "palt" 1;    /* 和文の詰め */
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;                    /* body 400 との差 300 */
  font-style: normal;                  /* 見出しはローマン体のみ */
  line-height: var(--leading-head);
  letter-spacing: 0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  word-break: auto-phrase;   /* 和文の見出しを文節で折る（未対応なら既定動作） */
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-accent);
  text-decoration: none;
}

/* 選択したときの色。既定の青のままだと、そこだけ他所の色になる */
::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}
.band-dark ::selection {
  background: var(--color-accent-inv);
  color: var(--color-paper-dark);
}

/* 和文の段落は最終行が1文字だけ残ると間が抜ける。対応ブラウザでは避ける */
p, .head__lede, .spec__desc, .prose { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  /* フォーカス環はアニメーションさせない（transition を一切かけない） */
}

.u-vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100%;
  z-index: var(--z-toast);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
}
.skip-link:focus-visible { top: var(--space-md); }

/* 共通の版面 */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ─────────────────────────────────────────────────────────────
   2. ナビ — N1a ワードマーク＋2リンク
   このサイトの行き先は本当に「会社概要」「お問い合わせ」の2つだけ。
   ───────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.nav__wordmark {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.14em;
  color: inherit;
  white-space: nowrap;
}
/* 行箱は 44px に届かない。下線の位置は動かさず、打点域だけ広げる。 */
.nav__wordmark::after {
  content: "";
  position: absolute;
  inset: -0.5rem 0;
}

.nav__links {
  display: flex;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
}

.nav__link {
  position: relative;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: inherit;
  white-space: nowrap;              /* クリック可能テキストは絶対に2行に折らない */
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset: -0.5rem 0;
}
.nav__link:hover  { border-bottom-color: currentColor; }
.nav__link:active { opacity: 0.72; }
/* 現在地は色だけにしない。下線を常時出す。 */
.nav__link[aria-current="page"] {
  color: var(--color-muted);
  border-bottom-color: currentColor;
}

/* 明るい面に乗るナビ（下層ページ） */
.nav--light { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* 濃紺面に乗るナビ（ヒーローの帯の中に残っている場合） */
.band-dark .nav__wordmark,
.band-dark .nav__link { color: var(--color-ink-inv); }
.band-dark :focus-visible { outline-color: var(--color-focus-inv); }

/* 追従ヘッダー。ページ上部では文書の流れのまま。
   一定以上スクロールして上に戻したときだけ、紙の地に乗せる。 */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition:
    transform var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.masthead--on-dark {
  background-color: var(--color-paper-dark);
  background-image: var(--grain-on-dark);
  color: var(--color-ink-inv);
  box-shadow: inset 0 1px 0 oklch(from var(--color-ink) l c h / 0.22);
}
.masthead--on-dark .nav__wordmark,
.masthead--on-dark .nav__link { color: var(--color-ink-inv); }
.masthead--on-dark :focus-visible { outline-color: var(--color-focus-inv); }
.masthead.is-away { transform: translateY(-100%); }
.masthead.is-compact {
  background-color: var(--color-paper);
  background-image: var(--grain-on-light);
  color: var(--color-ink);
  box-shadow: inset 0 calc(var(--rule-hair) * -1) 0 var(--color-rule);
}
.masthead.is-compact .nav { padding-block: var(--space-sm); }
.masthead.is-compact .nav--light { border-bottom-color: transparent; }
.masthead.is-compact .nav__wordmark,
.masthead.is-compact .nav__link { color: var(--color-ink); }
.masthead.is-compact .nav__link[aria-current="page"] { color: var(--color-muted); }
.masthead.is-compact :focus-visible { outline-color: var(--color-focus); }

/* ─────────────────────────────────────────────────────────────
   3. ヒーロー — Marquee Hero を2種類つかう
      .hero            = /izumi。人名が版面を占める。帯は深い。
      .hero--company   = 会社トップ。主役は一文で、社名はワードマーク扱い。帯は浅い。
      帯の深さと主役の大きさで、会社と個人の階層差をつける。
   どちらも折り返しの中に CTA は置かない。
   ───────────────────────────────────────────────────────────── */

.band-dark {
  background-color: var(--color-paper-dark);
  background-image: var(--grain-on-dark);
  color: var(--color-ink-inv);
  /* 版の縁でインクが溜まるように、上下の際だけわずかに濃くする。
     色相は変えない。数値を上げると「グラデーション」に見えるので触らない。 */
  box-shadow:
    inset 0 1px 0 oklch(from var(--color-ink) l c h / 0.22),
    inset 0 -1px 0 oklch(from var(--color-ink) l c h / 0.22);
}
/* ナビを帯の外に出した場合、上の縁はナビ側が持つ。帯の天面に線を足さない。 */
.masthead--on-dark + .band-dark {
  box-shadow: inset 0 -1px 0 oklch(from var(--color-ink) l c h / 0.22);
}

.hero {
  display: grid;
  align-content: space-between;
  /* 上限を切らないと大画面で中央が空洞になる（名刺の失敗と同じ形） */
  min-height: clamp(28rem, 68svh, 42rem);
  padding-bottom: var(--space-2xl);
}

.hero__name-block { padding-block: var(--space-2xl) var(--space-lg); }

.hero__company {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-ink-inv-2);
  margin-bottom: var(--space-xl);
}
.hero__company span { display: block; }
.hero__company .en {
  letter-spacing: 0.3em;
  margin-top: var(--space-2xs);
}

.hero__role {
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  color: var(--color-ink-inv-2);
  margin-bottom: var(--space-sm);
}

.hero__name {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: 0.02em;   /* 名前は字間を締めて一つの塊にする */
  color: var(--color-ink-inv);
}
.hero__name .sep { display: inline-block; width: 0.32em; }

.hero__romaji {
  font-size: var(--text-xs);
  letter-spacing: 0.42em;
  color: var(--color-ink-inv-2);
  margin-top: var(--space-lg);
}

.hero__tagline {
  position: relative;
  max-width: var(--measure);
  padding-top: var(--space-lg);
  color: var(--color-ink-inv);
}
/* 罫は擬似要素にする。読み込み時に左から引くため。 */
.hero__tagline::before {
  content: "";
  position: absolute; top: 0; inset-inline: 0;
  height: var(--rule-hair);
  background: var(--color-rule-inv);
  transform-origin: left center;
}

/* /izumi のタグラインだけは、個人の宣言なので明朝で一段大きく組む。
   2文を1行ずつ確実に分けたいので、折り返しには任せず span を行にする。
   会社トップの一行（事業説明）は本文サイズのまま。 */
.hero__tagline--statement {
  font-family: var(--font-display);
  /* 1行14字。320px でも1行に収まるところまで縮める（折れると2文構成が壊れる） */
  font-size: clamp(1.0625rem, 4.8vw, 1.5625rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  max-width: none;
}
.hero__tagline--statement span {
  display: block;
  white-space: nowrap;   /* 1文を途中で折らない */
}

/* ── 会社トップのヒーロー ───────────────────────────────────
   人名ではなく「何をする会社か」の一文が主役。帯は /izumi の半分ほど。 */
.hero--company {
  min-height: clamp(17rem, 40svh, 24rem);
  padding-bottom: var(--space-xl);
}
.hero--company .hero__name-block { padding-block: var(--space-xl) var(--space-md); }

/* 会社トップの主役は社名。/izumi の人名（最大 7rem）より一段小さくして階層差を出す。
   ここにタグラインは置かない — 「むすぶ仕組みを、〜」は個人の言葉なので /izumi 側だけ。 */
.hero__wordmark {
  font-size: var(--text-display-s);
  line-height: var(--leading-head);
  letter-spacing: 0.06em;
  color: var(--color-ink-inv);
  overflow-wrap: anywhere;
  min-width: 0;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 読み込み時の入場は1回だけ。
   順序に意味を持たせる — 名前を組み、罫を引き、そのあとに一文を置く。
   ページ全体で繰り返す「罫が引かれる」動きを、最初にここで提示する。 */
@media (prefers-reduced-motion: no-preference) {
  .hero__name-block > * { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero__name-block > :nth-child(2) { animation-delay: 60ms; }
  .hero__name-block > :nth-child(3) { animation-delay: 100ms; }
  .hero__name-block > :nth-child(4) { animation-delay: 160ms; }
  /* 社名と人名だけ、下の見えない線からせり上がる。 */
  .hero__wordmark,
  .hero__name { animation-name: rise-mask; }
  .hero__tagline::before { animation: rule-draw var(--dur-rule) var(--ease-out) 260ms both; }
  .hero__tagline { animation: rise var(--dur-long) var(--ease-out) 460ms both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-mask {
  from { clip-path: inset(100% 0 0 0); transform: translateY(0.6rem); }
  to   { clip-path: inset(0); transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   4. セクション見出し — S2 Hanging（罫も番号ラベルも使わない）
   ───────────────────────────────────────────────────────────── */

.section { padding-block: var(--space-4xl); }
.section--tight { padding-block: var(--space-3xl); }
.section + .section { padding-top: 0; }
/* 最初のセクション以外と奥付は、画面に近づくまで描画を後回しにする。 */
.section + .section,
.colophon {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
}

.head {
  display: block;                 /* タグ左・見出し右の2段組みは使わない */
  margin-bottom: var(--space-2xl);
  padding-top: var(--space-md);
}
/* 版面の左端を示す短い罫。文字のラベルは置かない（章立てに見えるため）。
   アクセント色を使うのはリンクとこの罫だけで、面積は全体の 0.01% に満たない。 */
.head__title {
  position: relative;
  font-size: var(--text-xl);
}
.head__title::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--space-md) * -1);
  width: 2rem; height: var(--rule-thick);
  background: var(--color-accent);
  transform-origin: left center;
}
.head__lede {
  max-width: var(--measure);
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

/* ─────────────────────────────────────────────────────────────
   5. つくっているもの — F3 表組み（各行が1プロダクト）
   ───────────────────────────────────────────────────────────── */

.specs { position: relative; }
.specs::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
  transform-origin: left center;
}

.spec {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-md) var(--space-2xl);
  align-items: start;
  padding-block: var(--space-xl);
}
.spec::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
  transform-origin: left center;
}

.spec__name {
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.spec__desc {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.spec__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
/* 項目名は目には見せないが、支援技術には読ませる（display:none にしない） */
.spec__meta dt {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.spec__meta dd { margin: 0 0 var(--space-2xs); }
.spec__meta { margin-top: var(--space-lg); }
.spec__action { margin-top: var(--space-md); }

/* ── 行の組み（PC） ─────────────────────────────────────────
   左＝名前・説明・技術・状態・リンクの「文章のかたまり」。
   右＝画像だけ。以前は右列に画像とメタとリンクを縦積みしていたので、
   画像の高さぶん行が伸びて左列の下半分が空き、間が持たなかった。
   さらにリンクを左列の底に落として、画像の下端と1本の底辺に揃える。 */
@media (min-width: 60.0625rem) {
  .spec { align-items: stretch; }
  .spec__body { display: flex; flex-direction: column; }
  .spec__aside { align-self: start; }
  .spec__body .spec__action { margin-top: auto; padding-top: var(--space-lg); }
  /* 右列に入った4体は、その行の図版そのもの。上端は見出しに揃える */
  .spec__aside .bots { margin-top: 0; }
}

/* ── 行の中の画像 ───────────────────────────────────────────
   画像は列を埋めない。自分の列の中で左寄せにして周囲に余白を残す。
   枠線・影・角丸は付けない（端末モックは自前の形を持っているため）。
   高さだけを決めて幅は成り行きにする（素材ごとに縦横比が違うので）。 */

.spec__media { margin-bottom: var(--space-md); }
.spec__media img {
  height: var(--media-h, 15rem);
  width: auto;
  max-width: 100%;
  /* 貼り付けた画像ではなく、紙の上に置いた印画に見せる。
     枠は罫と同じヘアライン、影は浮かせるためではなく接地を示すため。 */
  border: var(--rule-hair) solid var(--color-rule-2);
  box-shadow: var(--shadow-print);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
/* 指で触る画面では浮かせない（ホバーが無いので意味が無く、誤作動に見える） */
@media (hover: hover) and (pointer: fine) {
  .spec__media img:hover,
  html.js .spec.is-shown .spec__media img:hover {
    box-shadow: var(--shadow-print-lift);
    transform: translateY(-2px);
  }
}
/* 印画は、下から覆いが外れて等倍に戻る。ホバーの浮きはアニメ終了後も残す。 */
@media (prefers-reduced-motion: no-preference) {
  html.js .spec:not(.is-shown) .spec__media img {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.03);
  }
  html.js .spec.is-shown .spec__media img {
    animation: print-in var(--dur-long) var(--ease-out) backwards;
  }
  html.js .spec__media img { opacity: 0; }
  html.js .spec__media img.is-decoded {
    opacity: 1;
    transition: opacity var(--dur-mid) var(--ease-out);
  }
}
@keyframes print-in {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.03); }
  to   { clip-path: inset(0); transform: none; }
}

/* /izumi のプロダクトは大きめ、会社トップの事業は控えめ */
.specs--product .spec__media { --media-h: 16.5rem; }
.specs--business .spec__media { --media-h: 9.5rem; }

/* 書影だけはヘアラインで縁を締める（紙の側面が見えるように） */
.spec__media--book img {
  border: var(--rule-hair) solid var(--color-rule);
}

/* ── チャットボット4体 — 枠なしの横一列 ───────────────────── */

.bots {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
/* 行の中に置くときは罫を引かない。行自体が下に罫を持っているので、
   近い位置に2本並ぶと表組みが濁る。余白だけで離す。 */
.spec .bots {
  margin-top: var(--space-lg);
  padding-top: 0;
  border-top: 0;
}
.bots__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}
/* 4体は必ず横一列。狭い画面でも折り返さず、収まるところまで縮める。 */
.bots__list {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(var(--space-sm), 2.5vw, var(--space-lg));
  align-items: flex-end;
}
.bots__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}
.bots__item img {
  height: var(--bot-h, 3.75rem);
  width: auto;
  max-width: 100%;
}
.bots__name {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-2);
  white-space: nowrap;
}
/* 会社トップでは一段小さく（事業の一要素にすぎないため） */
.specs--business .bots__item,
.bots--small .bots__item { --bot-h: 3rem; }

/* C3 タイポグラフィックリンク — 枠も塗りもない。語と矢印と1pxの下線だけ。
   ホバーの合図は「下線が太くなる」の1つだけ。太さは border ではなく box-shadow で
   足す（border-width を動かすと1pxぶん行が揺れるため）。 */
.link {
  display: inline-block;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-accent);
  padding-bottom: 1px;
  /* ホバーで2本目の罫が左から引かれる。太さを変えるのではなく
     「引く」動きにすることで、行が揺れず、活字を組む所作に揃う。 */
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--rule-hair);
  transition: background-size var(--dur-mid) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}
.link:hover  { background-size: 100% var(--rule-hair); }
.link:active { background-size: 100% var(--rule-hair); opacity: 0.72; }
.band-dark .link {
  color: var(--color-accent-inv);
  border-bottom-color: var(--color-accent-inv);
}
.band-dark .link {
  background-image: linear-gradient(var(--color-accent-inv), var(--color-accent-inv));
}

/* ─────────────────────────────────────────────────────────────
   6. これまで — T2 ヘアライン列（枠なし・影なし）
   ───────────────────────────────────────────────────────────── */

.credits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.credits::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
  transform-origin: left center;
}

.credit {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
}
.credit::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
  transform-origin: left center;
}
.credit__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.credit__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* 4件並ぶのでアクセントは下線だけに留める（色面積を増やさない）。
   ホバーの合図は他のリンクと同じ「下線が太くなる」1つだけ。 */
.credit__name .link { color: var(--color-ink); }

.bots {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-2);
  max-width: var(--measure);
}
.bots__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.bots__list { color: var(--color-ink-2); }

/* ─────────────────────────────────────────────────────────────
   7. 会社と問い合わせ — C1 アウトラインチップ（ページ内で1つだけ）
   ───────────────────────────────────────────────────────────── */

.closing { display: grid; gap: var(--space-2xl); }
/* 縦に積まれたとき、2つのまとまりの境目が消えるので細い罫で分ける */
.closing > div + div { position: relative; }

@media (min-width: 60rem) {
  .closing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.facts { font-variant-numeric: tabular-nums; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.facts__row dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-muted);
  line-height: var(--leading-body);
}
.facts__row dd { margin: 0; }
.facts + p { margin-top: var(--space-lg); }

/* 会社概要ページ — 項目名の列を広く取る */
.facts--wide .facts__row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
.facts--wide { max-width: 48rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-lg);
  white-space: nowrap;
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  transition: background-size var(--dur-mid) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
/* 背景色を切り替えるのではなく、インクが左から差してくるようにする */
.chip {
  background-image: linear-gradient(var(--color-ink), var(--color-ink));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
}
.chip:hover,
.chip:active {
  background-size: 100% 100%;
  color: var(--color-paper);
}
.chip:active { opacity: 0.86; }
.chip[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   8. 奥付 — Ft4 Colophon
   ───────────────────────────────────────────────────────────── */

.colophon {
  position: relative;
  background-color: var(--color-paper-2);
  background-image: var(--grain-on-light);
  padding-block: var(--space-2xl);
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

/* 奥付は「社名 → 項目 → 値」の3つの塊にする。細目を句読点でつないで流すと
   ただの羅列になり、読む順序も探す手がかりも無くなる。
   段数は幅任せ（auto-fit）。ブレークポイントを増やさずに 1→2→3列へ移る。 */
.colophon__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
}

/* 社名。奥付の「柱」なので、ここだけ明朝で一段大きい */
.colophon__id {
  position: relative;
  padding-bottom: var(--space-sm);
}
.colophon__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.14em;
  color: var(--color-ink);
}
.colophon__romaji {
  display: block;
  margin-top: var(--space-2xs);
  letter-spacing: 0.18em;
  color: var(--color-muted);
}
.colophon__id::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2rem; height: var(--rule-hair);
  background: var(--color-rule-strong);
  transform-origin: left center;
}

/* 項目名と値。字の大きさは変えず、字間と色だけで段差をつける
   （奥付は小さい字が本体なので、ここで号数を増やすと版面が崩れる） */
.colophon__facts { margin: 0; }
.colophon__facts dt {
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.colophon__facts dd { margin: 0; }

/* 最下段 — 著作権表示と、次に行ける場所 */
.colophon__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}
.colophon__foot::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
  transform-origin: left center;
}
.colophon__rights { margin: 0; color: var(--color-muted); }
.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.colophon a { color: var(--color-ink-2); border-bottom: var(--rule-hair) solid var(--color-rule-strong); }
.colophon a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────
   9. 下層ページ（会社概要・お問い合わせ）
   ───────────────────────────────────────────────────────────── */

/* 下の太い罫は擬似要素にする。要素ごと拡縮すると見出しの文字まで伸びるため。 */
.pagehead {
  position: relative;
  padding-block: var(--space-2xl) var(--space-lg);
}
.pagehead::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  height: var(--rule-thick);
  background: var(--color-ink);
  transform-origin: left center;
}
.pagehead__title { font-size: var(--text-xl); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-lg); }

/* 問い合わせフォーム（WPForms が出力する DOM に効かせる） */
.form-area,
.wpforms-container { max-width: 40rem; margin-inline: 0; }

/* ─────────────────────────────────────────────────────────────
   本文領域 — WordPress の the_content() 出力をここで受ける。

   ここは「自分で書いた3ページ」ではなく、管理画面から入る長い文章
   （規約・プライバシーポリシー・特定商取引法の表記など）が流れ込む場所。
   WordPress が吐きうる要素は一通り面倒を見る。
   冒頭のリセットで list-style を消しているので、本文の中だけ戻す。
   ───────────────────────────────────────────────────────────── */

.entry > * + * { margin-top: var(--space-lg); }
.entry p { max-width: var(--measure); }

/* 見出し階層 */
.entry :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-head);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
.entry h2 { font-size: var(--text-xl); }
.entry h3 { font-size: var(--text-lg); }
.entry :is(h4, h5, h6) { font-size: var(--text-base); }
.entry :is(h2, h3, h4, h5, h6) + * { margin-top: 0; }

/* リンク */
.entry a:not(.chip) {
  border-bottom: var(--rule-hair) solid var(--color-accent);
  padding-bottom: 1px;
}

/* リスト — 全体リセットで消した行頭記号を、本文の中だけ戻す */
.entry :is(ul, ol) {
  max-width: var(--measure);
  padding-left: 1.4em;
}
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry :is(ul, ul) ul { list-style: circle; }
.entry li { margin-bottom: var(--space-xs); }
.entry li > :is(ul, ol) { margin-top: var(--space-xs); }
.entry li::marker { color: var(--color-muted); }

/* 表 */
.entry .table-scroll,
.entry figure.wp-block-table { overflow-x: auto; }
.entry table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.entry :is(th, td) {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.entry th {
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

/* 引用・区切り・図版 */
.entry blockquote {
  max-width: var(--measure);
  margin-left: 0;
  padding-left: var(--space-lg);
  border-left: var(--rule-thick) solid var(--color-rule);
  color: var(--color-ink-2);
}
.entry blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-muted);
}
.entry hr {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-block: var(--space-2xl);
}
.entry figure { margin: 0; }
.entry figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* コード */
.entry :is(code, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-paper-2);
  padding: 0.1em 0.35em;
}
.entry pre {
  overflow-x: auto;
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
}
.entry pre code { background: none; padding: 0; }

/* 埋め込み・回り込み（WordPress のブロックが付けるクラス） */
.entry :is(iframe, video, embed, object) { max-width: 100%; }
.entry .aligncenter { margin-inline: auto; }
.entry .alignleft { float: left; margin: 0 var(--space-lg) var(--space-md) 0; }
.entry .alignright { float: right; margin: 0 0 var(--space-md) var(--space-lg); }
.entry .alignwide,
.entry .alignfull { max-width: none; }
.entry .wp-caption { max-width: 100%; }

@media (max-width: 40rem) {
  .entry :is(.alignleft, .alignright) { float: none; margin-inline: 0; }
}

/* WPForms Lite が出力する DOM をテーマ側に寄せる */
.wpforms-field { margin-bottom: var(--space-lg); padding: 0; }
.wpforms-field-label { display: block; }
.wpforms-required-label { color: var(--color-accent); }
/* 印（*）は色付きなので、語を足して色だけにしない。 */
.wpforms-required-label::after {
  content: "必須";
  margin-inline-start: 0.35em;
}
.wpforms-field-description,
.wpforms-field-sublabel {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-2xs);
}
/* エラー行の場所を先に確保しておく。あとから現れて下の項目を押し下げないように、
   フィールドに1行ぶんの下余白を取り、エラーはそこへ絶対配置で入る。 */
.wpforms-field { position: relative; padding-bottom: 1lh; }
.wpforms-error {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  font-size: var(--text-xs);
  line-height: 1lh;
  color: var(--color-accent);
  margin: 0;
}
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: 0;
  padding: var(--space-lg);
  color: var(--color-ink);
}

:is(.form-area, .wpforms-container) input[type="text"],
:is(.form-area, .wpforms-container) input[type="email"],
:is(.form-area, .wpforms-container) input[type="tel"],
:is(.form-area, .wpforms-container) input[type="url"],
:is(.form-area, .wpforms-container) select,
:is(.form-area, .wpforms-container) textarea {
  width: 100%;
  min-height: var(--control-h);      /* 送信ボタンと必ず同じ高さにする */
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);   /* 太さは全状態で1px固定 */
  border-radius: 0;
  outline: 2px solid transparent;    /* フォーカス時に幾何が動かないよう先に確保 */
  outline-offset: 1px;
  transition: border-color var(--dur-short) var(--ease-out);
}
:is(.form-area, .wpforms-container) textarea { min-height: 10rem; line-height: var(--leading-body); }
:is(.form-area, .wpforms-container) :is(input, select, textarea):hover { border-color: var(--color-ink-2); }
:is(.form-area, .wpforms-container) :is(input, select, textarea):focus-visible { outline-color: var(--color-focus); }
:is(.form-area, .wpforms-container) :is(input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-paper-2);
}
:is(.form-area, .wpforms-container) label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-2);
  margin-bottom: var(--space-xs);
}
:is(.form-area, .wpforms-container) button,
:is(.form-area, .wpforms-container) input[type="submit"] {
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-xl);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;                  /* 入力欄と同じ行送り＝同じ高さに揃う */
  color: var(--color-accent-ink);
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
:is(.form-area, .wpforms-container) :is(button, input[type="submit"]):hover { background: var(--color-accent); border-color: var(--color-accent); }
:is(.form-area, .wpforms-container) :is(button, input[type="submit"]):active { opacity: 0.86; }
/* 無効は3つの手がかりで示す — 濃度・カーソル・disabled 属性 */
:is(.form-area, .wpforms-container) :is(button, input[type="submit"]):disabled {
  background: var(--color-muted);
  border-color: var(--color-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   9.4 画面に入ったら一度だけ現れる

   site.js が html.js を付け、対象に data-reveal と is-shown を付ける。
   スクロールを戻しても消さない。JS が無いとき、動きを減らす設定のときは
   最初から見えている。
   動きは2種類。罫が左から引かれる。文字が浅く浮き上がる。
   ───────────────────────────────────────────────────────────── */

@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lay-in    { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not(.head):not(.spec):not(.pagehead):not(.is-shown) {
    opacity: 0;
  }
  html.js [data-reveal]:not(.head):not(.spec):not(.pagehead).is-shown {
    animation: lay-in var(--dur-long) var(--ease-out) both;
  }
  html.js .closing > div.is-shown:nth-child(2) {
    animation-delay: var(--dur-short);
  }

  /* 見出し — アクセント罫を引いてから文字を上げる */
  html.js .head:not(.is-shown) .head__title,
  html.js .head:not(.is-shown) .head__lede { opacity: 0; }
  html.js .head:not(.is-shown) .head__title::before { transform: scaleX(0); }
  html.js .head.is-shown .head__title::before {
    animation: rule-draw var(--dur-rule) var(--ease-out) both;
  }
  html.js .head.is-shown .head__title,
  html.js .head.is-shown .head__lede {
    animation: lay-in var(--dur-long) var(--ease-out) calc(var(--dur-short) * 3) both;
  }

  html.js .pagehead:not(.is-shown) .pagehead__title { opacity: 0; }
  html.js .pagehead:not(.is-shown)::after { transform: scaleX(0); }
  html.js .pagehead.is-shown::after {
    animation: rule-draw var(--dur-rule) var(--ease-out) both;
  }
  html.js .pagehead.is-shown .pagehead__title {
    animation: lay-in var(--dur-long) var(--ease-out) var(--dur-short) both;
  }

  /* 行の下罫と、表の天面の罫 */
  html.js .spec:not(.is-shown)::after,
  html.js .specs:not(:has(.spec.is-shown))::before { transform: scaleX(0); }
  html.js .spec.is-shown::after,
  html.js .specs:has(.spec.is-shown)::before {
    animation: rule-draw var(--dur-rule) var(--ease-out) both;
  }

  /* PC は左の文章、そのあと右の図版。狭い幅は行ごと（子が display:contents）。 */
  @media (min-width: 60.0625rem) {
    html.js .spec:not(.is-shown) .spec__body,
    html.js .spec:not(.is-shown) .spec__aside { opacity: 0; }
    html.js .spec.is-shown .spec__body {
      animation: lay-in var(--dur-long) var(--ease-out) both;
    }
    html.js .spec.is-shown .spec__aside {
      animation: lay-in var(--dur-long) var(--ease-out) var(--dur-short) both;
    }
  }
  @media (max-width: 60rem) {
    html.js .spec:not(.is-shown) { opacity: 0; }
    html.js .spec.is-shown {
      animation: lay-in var(--dur-long) var(--ease-out) both;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   9.5 プラグインが出す要素をテーマに合わせる

   VK All in One Expansion Unit の「ページトップへ」ボタンは、
   既定が rgba(0,0,0,0.8) の黒い角丸四角で、濃紺と生成りの面から浮く。
   ページが縦に長いので機能自体は残し、見た目だけ引き取る。
   ───────────────────────────────────────────────────────────── */

body .page_top_btn,
body .veu_pageTop {
  /* VK は矢印を背景画像で描く。background の一括指定だとその画像まで消えて
     濃紺の丸だけが残るので、色だけ変え、矢印は ::before で描き直す */
  background-color: var(--color-ink);
  background-image: none;
  border-radius: 9999px;
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0.92;
  box-shadow: none;
  border: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
body .page_top_btn:hover,
body .veu_pageTop:hover { opacity: 1; }
/* 上向きの山形。枠線2辺を45度回して描く（画像もアイコンフォントも使わない） */
body .page_top_btn::before,
body .veu_pageTop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 2px solid var(--color-ink-inv);
  border-left: 2px solid var(--color-ink-inv);
  transform: translate(-50%, -25%) rotate(45deg);
}
body .page_top_btn svg,
body .veu_pageTop svg { fill: var(--color-ink-inv); }

/* ─────────────────────────────────────────────────────────────
   10. 狭い画面

   このサイトは名刺の QR から来る人が主で、その大半はスマートフォン。
   「壊れていないか」ではなく「読みやすいか」で調整する。
   ───────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  /* 1列に落ちる。入れ子の div をグリッドから外すため display: contents を使い、
     「名前 → 画像 → 説明 → 技術 → 4体 → リンク」の順に組み直す。 */
  .spec {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .spec > div { display: contents; }
  .spec__name   { order: 1; }
  .spec__media  { order: 2; margin-block: var(--space-md); }
  .spec__desc   { order: 3; margin-top: 0; }
  .spec__meta   { order: 4; margin-top: var(--space-md); }
  .bots         { order: 5; }
  .spec__action { order: 6; margin-top: var(--space-md); }

  .facts__row,
  .facts--wide .facts__row { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
}

@media (max-width: 40rem) {

  /* ── ヒーロー ────────────────────────────────────────────
     画面いっぱいの帯にすると、最初の1画面が「名前だけ」になって
     次に何があるか分からない。帯を浅くして、下のセクションの
     見出しが画面の端に覗くようにし、スクロールの手がかりを作る。
     名前とタグラインは離さず、ひとかたまりとして読ませる。 */
  .hero:not(.hero--company) {
    min-height: 60svh;
    align-content: start;
    padding-bottom: var(--space-xl);
  }
  .hero--company { min-height: clamp(11rem, 28svh, 15rem); }
  .hero__name-block { padding-block: var(--space-xl) 0; }
  .hero__company { margin-bottom: var(--space-lg); }
  .hero__romaji { letter-spacing: 0.3em; margin-top: var(--space-md); }
  .hero__tagline { margin-top: var(--space-xl); }

  /* ── セクション ──────────────────────────────────────────
     縦に長いページなので、見出しの前後は詰め、
     区切りは余白の「差」で作る（罫を増やさない）。 */
  .section { padding-block: var(--space-2xl); }
  .head { margin-bottom: var(--space-xl); }

  /* ── プロダクトの行 ──────────────────────────────────────
     スクロール中に「次の項目が始まった」と分かるよう、
     名前を一段大きくして区切りの役割を持たせる。

     並び順も変える。横並びの画面では説明の隣に絵があるが、
     縦に積むと「説明文を読み終えてから絵」になって、
     何のアプリか分かる前に文字の壁を越えることになる。
     スマートフォンでは 名前 → 絵 → 説明 の順にして、先に絵を見せる。
     入れ子の div をグリッドから外すため display: contents を使う。 */
  /* 並びは 60rem 以下で組み直し済み。ここは狭い画面だけの寸法調整。 */
  .spec { padding-block: var(--space-xl); }
  .spec__name { font-size: var(--text-xl); }

  .specs--product .spec__media { --media-h: 12rem; }
  .specs--business .spec__media { --media-h: 7.5rem; }

  .bots__item { --bot-h: 2.75rem; }
  .specs--business .bots__item,
  .bots--small .bots__item { --bot-h: 2.5rem; }
  /* 11px を切ると読めなくなるので下げすぎない */
  .bots__name { letter-spacing: 0; font-size: 0.75rem; }

  /* ── 会社情報・操作 ─────────────────────────────────────── */
  .facts__row,
  .facts--wide .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .facts__row dt { line-height: 1.4; }
  .closing { gap: var(--space-xl); }

  /* ── 指で押せる大きさを確保する ─────────────────────────
     行内の語（本文中のリンク）は別として、独立して置かれた
     リンクはすべて 44px 以上の高さにする。
     奥付の電話とメールは、スマートフォンでは発信・作成に直結する
     導線なので、文中でも押しやすい高さを与える。 */
  .nav__link { padding-block: var(--space-sm); }
  .nav__wordmark { display: inline-block; padding-block: var(--space-xs); }
  /* padding で背を高くすると、下線（border と、ホバーで伸びる罫）が
     文字から1cm近く離れて「宙に浮いた罫」になる。箱は動かさず、
     透明な擬似要素だけを上下に広げて打点域を稼ぐ。 */
  .spec__action .link,
  .credit__name .link,
  .facts__row dd > .link,
  p > .link { position: relative; }
  .spec__action .link::after,
  .credit__name .link::after,
  .facts__row dd > .link::after,
  p > .link::after {
    content: "";
    position: absolute;
    inset: -0.55rem 0;   /* 行高 29.6px ＋ 上下 8.8px ＝ 47px */
  }
  .chip { width: 100%; justify-content: center; }

  /* 打点域を確保するために padding を足すと、border-bottom の罫が
     文字から 10px ほど離れて「宙に浮いた罫」に見える。罫は border ではなく
     text-decoration に持たせて、文字のメトリクスに追従させる。 */
  .colophon a[href^="tel:"],
  .colophon a[href^="mailto:"] {
    display: inline-block;
    padding-block: 0.8em;              /* 20.5px + 行高 24.3px = 44.8px */
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--color-rule-strong);
    text-decoration-thickness: var(--rule-hair);
    text-underline-offset: 0.22em;
  }
  .colophon a[href^="tel:"]:hover,
  .colophon a[href^="mailto:"]:hover { text-decoration-color: var(--color-accent); }

  /* 奥付の最下段のリンクは横に並ぶので、打点域を上下に広げても互いに重ならない。
     電話・メールのように縦に積まれているものは padding で離す必要がある
     （擬似要素で広げると隣の打点域と重なり、押し間違いが起きる）。 */
  .colophon__nav a { position: relative; }
  .colophon__nav a::after {
    content: "";
    position: absolute;
    inset: -0.65rem -0.35rem;   /* 行高 24.3px ＋ 上下 20.8px ＝ 45px */
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}