/* ws.arculm.com 共通部品 site.css v0.9（v0.8＋⑧§11 日本語組版モジュール（改行系 M1・M2・M3）を c.css から移設＝R0。v0.8：v0.7＋⑦フッターの .note の keep-all＝E1b。v0.7：v0.6＋⑥フッター開催情報の keep-all＝D-06。v0.6：v0.5＋①表の行見出し 9em ②フッターリンク 44px ④reduced-motion で delay も 0 ⑤フッター架空明示の keep-all）
   対象：トップ／A〜D／当日開示ページの「資料部分」と共通UI
   前提：外部フォント・外部依存なし。JSなしでも全文が読める。
   ------------------------------------------------------------ */

/* 1. トークン ------------------------------------------------ */
:root {
  --font-sans: "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", "Noto Serif JP", serif;

  --black: #000000;
  --white: #FFFFFF;
  --gray-paper: #F0F0EE;
  --alert-red: #B8321F;

  /* 各社の主色（トップの扉・入口カードで使用） */
  --a-main: #E0A21A; --a-sub: #5E2436; --a-bg: #EDEBE6;
  --b-main: #6C5238; --b-sub: #4A6572; --b-bg: #EEF1F0;
  --c-main: #F2B705; --c-sub: #17325A; --c-bg: #FFFFFF;
  --d-main: #D6452A; --d-text-red: #B8341C; --d-sub: #3F7A3A; --d-yolk: #F4C542; --d-bg: #FFF8EE;

  --fs-body: 17px;
  --fs-note: 16px;
  --fs-h3: 20px;
  --fs-h2: 26px;
  --fs-h1: 34px;
  --fs-big: 40px;

  --lh-body: 1.8;
  --measure: 36em;      /* 全角36字 */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px;
  --radius-btn: 6px;
  --banner-h: 44px;
  --dur-count: 800ms;
}
@media (min-width: 720px) {
  :root { --fs-h3: 22px; --fs-h2: 32px; --fs-h1: 48px; --fs-big: 64px; }
}

/* 2. ベース -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  line-break: strict;          /* 行頭禁則を厳格に */
  word-break: normal;
  word-break: auto-phrase;     /* 対応ブラウザ（Chrome系）では文節で折る。非対応では無視される */
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
p { margin: 0 0 1.2em; max-width: var(--measure); }
h1, h2, h3 { margin: 0 0 var(--space-3); font-weight: 700; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
/* 短い定型文（バナー・帯・ボタン）：<wbr> で指定した位置だけで折る */
/* v0.7（D-06）：.site-footer .event-info を追加。開催情報の <wbr> は keep-all が
   当たっていなかったため機能しておらず、Safari で「改善｜ゲーム」「架空の会｜社の」の
   語中折れが出ていた（Chrome では auto-phrase が抑制するため不可視の欠陥だった）。
   v0.8（E1b）：.site-footer .note を追加。実機（iPhone Safari 393px）で
   「各商工会ま｜で。」の語中折れを確認したため。★対象はフッターの .note のみ。
   本文の .note（財務データ・勘定説明）は 41〜57 字あり <wbr> が無いため、
   keep-all を当てると overflow-wrap: anywhere で任意位置に折れて悪化する。
   本文 .note の処置は別ラウンドで <wbr> 挿入と同時に行う。 */
.fiction-banner p, .band p, .btn, .entrance .name, .entrance .kind, .site-footer .fiction-repeat, .site-footer .event-info, .site-footer .note { word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); line-height: 1.25; }
h2 { font-size: var(--fs-h2); line-height: 1.4; }
h3 { font-size: var(--fs-h3); line-height: 1.5; }
small, .note { font-size: var(--fs-note); line-height: 1.7; }

.wrap { width: min(100% - var(--space-4) * 2, 960px); margin-inline: auto; }
.section { padding-block: var(--space-8); }
@media (min-width: 720px) { .section { padding-block: var(--space-12); } }

/* 3. 架空明示バナー（最上部固定） ------------------------------ */
.fiction-banner {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--banner-h);
  display: flex; align-items: center; justify-content: center;
  padding: 10px var(--space-2);
  background: var(--alert-red); color: var(--white);
  font-size: var(--fs-note); font-weight: 700; line-height: 1.4;
  text-align: center;
}
.fiction-banner p { margin: 0; max-width: none; }

/* 4. 切替帯（自社サイト → 資料） ----------------------------- */
.band {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-2);
  background: var(--black); color: var(--white);
  text-align: center;
}
.band p { margin: 0 auto; font-size: var(--fs-body); }

/* 5. 資料部分の地 -------------------------------------------- */
.materials {
  background: var(--white); color: var(--black);
  font-family: var(--font-sans);
}
.materials .block {
  background: var(--gray-paper);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.materials ol, .materials ul { padding-left: 1.4em; max-width: var(--measure); }
.materials li { margin-bottom: 0.6em; }

/* 6. 数値表 -------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-unit { text-align: right; font-size: var(--fs-note); margin: 0 0 var(--space-1); }
table.numbers {
  border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums;
  background: var(--white);
}
table.numbers th, table.numbers td {
  padding: 12px 10px; border-bottom: 1px solid var(--black);
  font-size: var(--fs-body);
}
table.numbers thead th, table.numbers td { white-space: nowrap; }
table.numbers tbody th { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; min-width: 9em; }
@media (min-width: 720px) { table.numbers th, table.numbers td { padding: 12px 14px; } }
.table-hint { display: none; font-size: var(--fs-note); margin: 0 0 var(--space-1); }
@media (max-width: 419px) { .table-hint { display: block; } }
table.numbers thead th { border-bottom: 3px solid var(--black); text-align: right; }
table.numbers thead th:first-child, table.numbers tbody th { text-align: left; font-weight: 700; }
table.numbers td { text-align: right; }
table.numbers tr.emph td { font-weight: 700; }

/* 大きい数字（見せ場） */
.bignum { font-size: var(--fs-big); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.bignum small { font-size: var(--fs-body); font-weight: 400; margin-left: 0.3em; }

/* 7. コピーボタン --------------------------------------------- */
.copy-box { margin-block: var(--space-4); }
.copy-box pre {
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  background: var(--white); border: 1px solid var(--black);
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-sans); font-size: var(--fs-note); line-height: 1.7;
  max-height: 60vh; overflow: auto;
}
.copy-box textarea {
  width: 100%; min-height: 240px; font-size: var(--fs-note); line-height: 1.7;
  font-family: var(--font-sans); padding: var(--space-2); border: 1px solid var(--black);
}
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 14px var(--space-3);
  border: 3px solid var(--black); border-radius: var(--radius-btn);
  background: var(--white); color: var(--black);
  font: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1.3;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color 200ms, color 200ms;
}
.btn:hover { background: var(--gray-paper); }
.btn.is-done { background: var(--black); color: var(--white); }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: #222; }
.copy-fallback { display: none; }
.copy-box.no-clipboard .copy-fallback { display: block; }
.copy-box.no-clipboard .copy-target { display: none; }

/* 8. フッター ------------------------------------------------ */
.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-6) 0 var(--space-8);
  border-top: 3px solid var(--black);
  font-size: var(--fs-note); line-height: 1.7;
}
.site-footer p { max-width: none; }
/* v0.10（v1.31）：フッターナビを全ページ共通・縦 1 列に。4 社は会社名＋説明文（入口カードと同文） */
.site-footer nav ul { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.site-footer .nav-lead { font-weight: 700; margin: var(--space-3) 0 0; word-break: keep-all; overflow-wrap: anywhere; }
.site-footer .nav-cos { gap: var(--space-2); }
.site-footer .nav-cos .desc { margin: 0; padding: 0 var(--space-1); font-size: var(--fs-note); word-break: keep-all; overflow-wrap: anywhere; }
.site-footer .fiction-repeat { font-weight: 700; }
.site-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-1); }

/* 9. モーション基盤 ------------------------------------------ */
/* 設計箇所②用：data-reveal を持つ要素は初期非表示、.is-in で表示 */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > :nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 150ms; }
[data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 300ms; }
[data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 450ms; }
[data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 600ms; }
[data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 750ms; }
[data-reveal-stagger].is-in > :nth-child(7) { transition-delay: 900ms; }
[data-reveal-stagger].is-in > :nth-child(8) { transition-delay: 1050ms; }

/* JS無効時・reduced-motion時：すべて最終状態 */
html.no-js [data-reveal], html.no-js [data-reveal-stagger] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
}

/* 10. トップ署名モーション（タイプライター→扉） --------------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-2); text-align: center; cursor: pointer;
}
.intro { transition: opacity 700ms ease; }
.intro.is-hiding { opacity: 0; pointer-events: none; }
.intro.is-hidden { display: none; }
.intro .type {
  /* 1行の最長は17文字。画面幅から左右余白（16px×2）を引いて17で割り、必ず1行に収める。下限16px、上限40px */
  font-size: clamp(16px, calc((100vw - 32px) / 17), 40px);
  font-weight: 700; line-height: 1.6; min-height: 3.4em;
  white-space: pre-line; word-break: keep-all; overflow-wrap: normal;
  margin: 0;
}
.intro .type .caret { display: inline-block; width: 0.08em; height: 1em; background: var(--white); vertical-align: -0.15em; margin-left: 2px; animation: caret 700ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.intro .skip { margin-top: var(--space-4); font-size: var(--fs-note); opacity: 0.85; }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(92vw, 720px); margin-top: var(--space-4); }
.door { height: 120px; transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.door.is-open { transform: scaleX(1); }
.door.a { background: var(--a-main); } .door.b { background: var(--b-sub); } .door.c { background: var(--c-sub); } .door.d { background: var(--d-main); }
@media (min-width: 720px) { .door { height: 200px; } }

/* 4社の入口カード（トップ本文） */
.entrances { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
@media (min-width: 720px) { .entrances { grid-template-columns: repeat(2, 1fr); } }
.entrance { display: block; border: 3px solid var(--black); text-decoration: none; }
.entrance .stripe { height: 14px; }
.entrance .stripe.a { background: var(--a-main); } .entrance .stripe.b { background: var(--b-sub); } .entrance .stripe.c { background: var(--c-sub); } .entrance .stripe.d { background: var(--d-main); }
.entrance .body { padding: var(--space-3); }
.entrance .kind { font-size: var(--fs-note); margin: 0 0 var(--space-1); }
.entrance .name { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 var(--space-1); }
.entrance .word { font-size: var(--fs-body); margin: 0; }

/* 11. 日本語組版モジュール（改行系）------------------------------
   ★R0（SC007 / 2026-09-07）：c.css から移設。5 ページ共通の機構。
   いずれも [data-break="phrase"] 属性を持つ要素にのみ効く。属性が無いページには
   一切影響しない。属性の付与と <wbr>／span の挿入は apply 系スクリプトが行う。
   Break Policy: sk4a-break-policy-body / policyVersion 1.1（BP-01〜BP-06）
   M1 改行機会      keep-all ＋ <wbr>（方式 B）。auto-phrase には依存しない
   M2 構造行頭化    cat-label / cat-item / cat-pair
   M3 文行頭化      s-first / s-last
   M4（強調）と参照情報ブロックの意匠は各ページの CSS に置く（意匠であり機構ではない）
   ---------------------------------------------------------------- */
/* ------------------------------------------------------------
   E3-1b SK4A002 materialization hook（実験。SC006 / 2026-09-07）
   本文の改行方式を A（word-break: auto-phrase、Chromium のみ有効）から
   B（BudouX parse() → <wbr> 焼き込み ＋ keep-all）へ切り替える。
   E3-1b では、要素の 1 行に収まらない長文節にだけ、助詞の切れ目へ
   補助的な改行機会を追加している（緊急折返しによる禁則違反の回避）。
   - この属性が付いた要素にだけ効く。付いていない要素には一切影響しない。
   - <wbr> は keep-all と組で意味を持つ（A系列 reference v1.1 §4-1）。
   - overflow-wrap: anywhere は保険。長い文節が 320px で溢れないため。
   ------------------------------------------------------------ */
[data-break="phrase"] {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   E3-2a' 文単位の視覚的行頭化（引用・#now へ拡張）（実験。SC006 / 2026-09-07）
   段落の第1文と最終文を独立した行から始める（arculm 氏の要求）。
   <br> は使わない。<p> の分割もしない。文字・DOM 読み順は不変。
   block の内部は E3-1b の <wbr> 機会でそのまま soft wrap する。
   ------------------------------------------------------------ */
[data-break="phrase"] .s-first,
[data-break="phrase"] .s-last {
  display: block;
}

/* ------------------------------------------------------------
   E3-2e 構造セグメンタによる行頭化（実験。SC006 / 2026-09-07）
   「分類：個別要素」形式を区切り記号の数で分解し、意味単位を行頭に置く。
     cat-label  ラベルを行頭化（組が1つのとき）
     cat-item   値の並列項目を行頭化（組が1つで値が区切られているとき）
     cat-pair   「ラベル：値」組を行頭化（組が2つ以上のとき。ラベルは立てない）
   除外リストを持たず、規則で全ケースを処理する。
   16px 未満を作らない（DS §2-1）ためサイズは変えない。薄灰文字も使わない（DS §2-3）。
   ------------------------------------------------------------ */
[data-break="phrase"] .cat-label,
[data-break="phrase"] .cat-item,
[data-break="phrase"] .cat-pair {
  display: block;
}