/* 文字の大きさの段階（2026-10-25 本人指示「文字の大きさは、段階決めて合わせて」）。TOP の HTML の文字はこの4段階から選ぶ
   見出し --fs-h2 ／ リード --fs-lead ／ 本文 --fs-body ／ 小さい注記 --fs-small（最初のタイトルと名前はこれより大きい特別枠） */
:root {
  --fs-h2: clamp(28px, 4vw, 58px);
  --fs-lead: clamp(20px, 2.1vw, 30px);
  --fs-body: clamp(16px, 1.5vw, 21px);
  --fs-small: clamp(13px, 1.1vw, 15px);
}
/* TOP の最初：タイトル「伝えたいのは、運営学だ。」→ スクロールで赤い面の運営学の本文へ（2026-10-25）
   .zk-stage が縦に長い舞台。.zk-pin が画面に貼りついて、中身が入れかわる。動きは js/main.js の「運営学」
   動きを減らす設定や JS がないときは、貼りつけずに上から順に並べる（.zk-static） */
.zk-stage { z-index: 6; --ink: #1f1f1f; --pink: #e40055; --red: #ea545d; --hd: calc(min(100vw, 1440px) / 1440 * 100); position: relative; background: #fff; }
.zk-pin { position: relative; z-index: 1; height: 100svh; overflow: hidden; }   /* 下の弧（::after）より手前 */

/* タイトルの写真2枚（勉強会・改善の掲示）は 2026-10-25 本人指示「いらん」で外した */
/* ---------- タイトル：ふつうに横に並べたゴシック（2026-10-25 本人指示「文字の配置ふつうでOK、ゴシックにして」） ---------- */
.zk-title { position: absolute; z-index: 2; inset: var(--hd) 0 0; display: grid; place-items: center; padding: 0 var(--gutter) 2vh; }
.zk-h { position: relative; z-index: 2; margin: 0; color: var(--ink); font-family: "Zen Kaku Gothic New", var(--display); font-weight: 900; line-height: 1.15; letter-spacing: .02em; text-align: center; }   /* 中央ぞろえ（2026-10-25 本人指示「文字を中央」） */
.zk-l1, .zk-l2 { display: block; white-space: nowrap; }
.zk-l1 { font-size: min(7.4vw, 9svh, 108px); }   /* 1・2行目「伝えたいのは、」「現場を動かす、」（2026-10-25 本人指示で2行目を足した） */
.zk-l2 { font-size: min(13vw, 16svh, 190px); margin-top: .12em; }

/* ---------- ピンクの楔：スクロールで画面いっぱいに広がり、赤い面になる ---------- */
.zk-wedge { position: absolute; inset: 0; z-index: 1; background: var(--pink); clip-path: polygon(36% 58%, 86% 30%, 47% 74%, 47% 74%); }

/* ---------- 運営学の本文：赤い面の上。左に丼、右に文 ---------- */
.zk-msg { position: absolute; inset: var(--hd) 0 0; z-index: 4; display: grid; align-items: center; color: #fff; pointer-events: none; }
.zk-msg-text { position: relative; z-index: 2; max-width: 640px; margin-left: max(40%, calc(50% - 120px)); padding-right: var(--gutter); }
.zk-msg-text p { margin: 0; font-family: "Zen Kaku Gothic New", var(--display); font-weight: 700; letter-spacing: .08em; line-height: 1.85; font-size: min(var(--fs-body), 2.5svh); }
.zk-msg-text p + p { margin-top: .85em; }   /* 項目の間を広げた（2026-10-25 本人指示「詰まってる」） */
.zk-msg-text p:first-child { font-weight: 900; font-size: min(var(--fs-lead), 3.6svh); line-height: 1.55; }
.zk-msg-text .zk-gap { margin-top: 2em; }
/* 本文の後ののれん（締め）は 2026-10-25 本人指示「いらん」で外した */
.zk-bowl { position: absolute; z-index: 1; left: max(-16vw, -240px); top: 50%; width: min(46vw, 78svh, 660px); aspect-ratio: 1200 / 1210; translate: 0 -50%; }
.zk-bowl img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 34px rgba(80, 0, 20, .35)); animation: zk-spin 70s linear infinite; }
@keyframes zk-spin { to { rotate: 360deg; } }

/* 動きの前の状態（js/main.js が .zk-ready を付けたときだけ隠す。JS がないと全部見える） */
.zk-ready .zk-msg-text > *, .zk-ready .zk-bowl { opacity: 0; }

/* ---------- スマホ：丼は右上にのぞかせ、文は下に ---------- */
@media (max-width: 760px) {
  .zk-l1 { font-size: 9.4vw; }
  .zk-l2 { font-size: 17vw; }
  .zk-wedge { clip-path: polygon(18% 56%, 94% 40%, 46% 66%, 46% 66%); }
  .zk-msg { align-items: end; padding-bottom: 6svh; }
  .zk-msg-text { margin-left: 0; padding: 0 var(--gutter); }
  .zk-msg-text p { font-size: min(var(--fs-body), 4.3vw, 2.4svh); }
  .zk-msg-text p:first-child { font-size: min(var(--fs-lead), 5.4vw, 3.2svh); }
  .zk-bowl { left: auto; right: -22vw; top: -6svh; width: 64vw; translate: none; }
}

/* 動きを減らす設定・JS がないとき：貼りつけずに、タイトル → 赤い面の順に並べる */
.zk-static .zk-pin { height: auto; overflow: visible; }
.zk-static .zk-title { position: relative; inset: auto; min-height: 100svh; }
.zk-static .zk-wedge { display: none; }
.zk-static .zk-msg { position: relative; inset: auto; background: var(--red); padding: 12vh 0; min-height: 100svh; }
@media (prefers-reduced-motion: reduce) { .zk-bowl img { animation: none; } }

/* 赤い面と下の水色の面の境目：水色が山なりに盛り上がる弧（2026-10-25 本人指示「このアールを逆向き、山なりで」）
   水色の面の上の白い余白（イラレの y=0〜100）は、.t-top を上に重ねて隠す（css/top.css） */
.zk-stage::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: calc(-1 * clamp(40px, 7vw, 110px)); height: calc(2 * clamp(40px, 7vw, 110px));
  z-index: 2; background: #29abe2; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;   /* 赤い面（.zk-pin）より手前 */
}
.zk-static::after { display: none; }
.zk-l1s { font-size: min(4.6vw, 6svh, 66px); margin-top: .15em; }   /* 「現場を動かす、」は小さく（2026-10-26 本人指示） */
@media (max-width: 760px) { .zk-l1s { font-size: 6.2vw; } }
.zk-wedge { background: #fcef00; }   /* 楔は黄色（2026-10-26 本人指示）。スクロールで広がると赤い面に変わる（js/main.js） */
/* 運営学の面：背景を黄色、文字を黒に（2026-10-26 本人指示「背景黄色 文字は黒」）。楔は黄色のまま広がって面になる */
.zk-stage { --red: #fcef00; }
.zk-msg { color: #1f1f1f; }
.zk-bowl img { filter: drop-shadow(0 20px 34px rgba(60, 50, 0, .28)); }
/* 「私たちが伝えるのは、経営学ではなく、運営学です。」を大きく（2026-10-26 本人指示） */
.zk-msg-text p:first-child { font-size: min(clamp(26px, 3.1vw, 44px), 5.2svh); line-height: 1.45; margin-bottom: .4em; }
@media (max-width: 760px) { .zk-msg-text p:first-child { font-size: min(6.6vw, 4.2svh); } }
/* 広い画面（1440px〜）で、運営学の最後の行が下の青い弧に隠れていた（2026-10-26 確認係の指摘）。PC は文を上に寄せる */
@media (min-width: 761px) { .zk-msg { padding-bottom: clamp(0px, calc(18vw - 150px), 200px); } }
.zk-msg-text p { word-break: auto-phrase; }
@media (max-width: 760px) { .zk-msg { padding-bottom: 14svh; } }   /* スマホでも最後の行を下の弧から離す */

/* 最初のタイトルの下に、下へ動く矢印を出してスクロールを促す（2026-10-26 本人指示「↓を出して 下に動かして スクロールをするよう促し」、同日「パソコン用にも」）。タイトルと一緒に消える */
.zk-scroll { position: absolute; left: 50%; bottom: 6svh; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #1f1f1f; pointer-events: none; }
.zk-scroll b { font-family: "Archivo", var(--num, sans-serif); font-weight: 800; font-size: 14px; letter-spacing: .26em; }
.zk-scroll i { display: block; width: 22px; height: 22px; border-right: 4px solid #1f1f1f; border-bottom: 4px solid #1f1f1f; rotate: 45deg; animation: zk-scroll 1.4s ease-in-out infinite; }
@keyframes zk-scroll { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(9px, 9px); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .zk-scroll i { animation: none; } }
@media (max-width: 760px) {
  .zk-scroll { position: absolute; left: 50%; bottom: 7svh; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #1f1f1f; pointer-events: none; }
  .zk-scroll b { font-family: "Archivo", var(--num, sans-serif); font-weight: 800; font-size: 12px; letter-spacing: .24em; }
  .zk-scroll i { display: block; width: 18px; height: 18px; border-right: 4px solid #1f1f1f; border-bottom: 4px solid #1f1f1f; rotate: 45deg; animation: zk-scroll 1.4s ease-in-out infinite; }
  @keyframes zk-scroll { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(8px, 8px); opacity: .45; } }
  @media (prefers-reduced-motion: reduce) { .zk-scroll i { animation: none; } }
}
/* スマホ：「運営学だ。」を気持ちだけ右へ（上の2行の終わりの「、」の空きのぶん。2026-10-26 本人指示「運営学の文字を気持ちだけ右へ、分」） */
@media (max-width: 760px) { .zk-l2 { translate: 4.5vw 0; } }