/*
Theme Name: ホクエイ電設 採用サイト
Theme URI: https://hokuei-densetsu-recruit.com/
Author: SPINOVA
Description: ホクエイ電設株式会社の採用サイト専用テーマ。1画面＝1セクションのスワイプ型LP（全13ページ）。応募フォームは Contact Form 7 を使用します。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: proprietary
Text Domain: hokuei-recruit
Tags: one-page, landing-page, recruit
*/

/* =========================================================================
   ホクエイ電設株式会社 採用サイト
   1画面＝1セクションのスワイプ型LP（モバイルファースト）
   PCでも同じスマホビューを中央に表示し、左右の余白をレールとして使う
   ------------------------------------------------------------------------
   ビジュアル方針
   ・HERO動画と同じPOPパーツ（ハーフトーン／集中線／同心円／フラットな円）を
     全ページで共通のキットとして使い、動画から地続きの世界観にする
   ・セクションの切り替えは「斜めの色帯」で行い、次の画面の色を先出しする
   ・画面が切り替わる瞬間に白フラッシュを入れ、動画のカット割りと揃える
   ------------------------------------------------------------------------
   00 TOKENS / RESET
   01 HEADER / MENU
   02 SLIDER / PAGE 共通レイアウト
   03 テキストパーツ
   04 POP装飾キット（動画と共通）
   05 アニメーション
   06 各ページ個別
   07 固定UI
   08 狭幅・低い画面の調整
   09 タブレット〜PC：中央スマホキャンバス＋左右レール
   10 prefers-reduced-motion
   ------------------------------------------------------------------------
   サイズはすべて --cw（キャンバス幅）基準。
   SPでは --cw = 100vw、700px以上では --cw = 480px になるため、
   ビューポート幅ではなく「実際に見えている画面幅」に比率が追従する。
   ========================================================================= */

/* ========== 00 TOKENS / RESET ========== */
:root{
  --cw:100vw;
  --cmin:min(var(--cw),100dvh);

  /* カラー：ベース #f4f0ea ／ アクセント #4b2c91 ＋ 動画と同じPOP補色 */
  --cream:#f4f0ea;
  --cream-2:#fffdf8;
  --ink:#1b1b1a;
  --purple:#4b2c91;
  --purple-dark:#2f1a63;
  --magenta:#c40c81;
  --cyan:#00a7da;
  --yellow:#fcdb01;
  --white:#fff;

  /* レイアウト */
  --gut:clamp(20px,calc(var(--cw) * .06),42px);
  --h-header:clamp(56px,8.5dvh,78px);
  --pad-t:calc(var(--h-header) + clamp(8px,2.6dvh,26px));
  --pad-b:clamp(80px,14dvh,124px);
  --band-h:clamp(46px,8dvh,104px);

  /* タイポ */
  --fs-cap:clamp(9.5px,min(calc(var(--cw) * .026),1.35dvh),12px);
  --fs-eyebrow:clamp(10px,min(calc(var(--cw) * .029),1.5dvh),13px);
  --fs-body:clamp(12px,min(calc(var(--cw) * .034),1.85dvh),15px);
  --fs-lead:clamp(17px,min(calc(var(--cw) * .053),3.2dvh),30px);
  --fs-punch:clamp(26px,min(calc(var(--cw) * .096),6.2dvh),52px);
  --fs-no:clamp(34px,min(calc(var(--cw) * .125),6.6dvh),66px);
  --row-gap:clamp(10px,2.4dvh,26px);

  --ease:cubic-bezier(.65,0,.2,1);
  --spring:cubic-bezier(.22,1.25,.4,1);
  --font-jp:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --font-en:"Archivo Black","M PLUS Rounded 1c",sans-serif;
}

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

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--purple);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:700;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}

img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ol,ul,dl{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
em{font-style:normal}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ========== 01 HEADER / MENU ========== */
.site-header{
  position:fixed;
  z-index:60;
  left:0;
  right:0;
  top:0;
  height:var(--h-header);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 clamp(14px,calc(var(--cw) * .04),24px);
  pointer-events:none;
}
.brand{
  position:relative;
  display:block;
  width:clamp(118px,calc(var(--cw) * .3),150px);
  pointer-events:auto;
  line-height:0;
}
.brand img{width:100%;transition:opacity .35s var(--ease)}
.brand .brand-light{position:absolute;inset:0}
body[data-tone="light"] .brand-light{opacity:0}
body[data-tone="light"] .brand-ink{opacity:1}
body[data-tone="dark"] .brand-light{opacity:1}
body[data-tone="dark"] .brand-ink{opacity:0}

.menu-button{
  position:relative;
  width:clamp(42px,calc(var(--cw) * .11),50px);
  height:clamp(42px,calc(var(--cw) * .11),50px);
  border-radius:50%;
  background:var(--ink);
  display:grid;
  place-content:center;
  gap:5px;
  pointer-events:auto;
  box-shadow:0 6px 20px #0000003d;
  transition:background .3s var(--ease),transform .3s var(--spring);
}
@media (hover:hover){
  .menu-button:hover{transform:scale(1.06)}
}
.menu-button span{display:block;width:19px;height:2.5px;border-radius:2px;background:var(--white);transition:.35s var(--ease)}
.menu-button[aria-expanded="true"]{background:var(--magenta)}
.menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu{
  position:fixed;
  z-index:55;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:var(--purple);
  visibility:hidden;
  opacity:0;
  transition:opacity .4s var(--ease),visibility .4s;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.menu>.halftone{position:absolute}
.menu.is-open{visibility:visible;opacity:1}
.menu-inner{
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  /* 項目が画面より高くなっても先頭が隠れないよう safe center */
  justify-content:safe center;
  gap:clamp(9px,1.8dvh,18px);
  padding:calc(var(--h-header) + 14px) clamp(24px,calc(var(--cw) * .08),44px) 26px;
  color:var(--white);
}
.menu-kicker{font-family:var(--font-en);font-size:11px;letter-spacing:.22em;color:var(--yellow)}
.menu ol{display:grid;gap:0}
.menu li{border-top:1px solid #ffffff33}
.menu li:last-child{border-bottom:1px solid #ffffff33}
.menu a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:clamp(6px,1.25dvh,13px) 4px;
  color:inherit;
  text-decoration:none;
  font-size:clamp(13px,min(calc(var(--cw) * .042),2.35dvh),19px);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
@media (hover:hover){
  .menu a:hover{color:var(--yellow);transform:translateX(8px)}
}
.menu a i{font-family:var(--font-en);font-style:normal;font-size:.5em;color:var(--yellow);letter-spacing:.08em}
.menu a small{margin-left:auto;font-family:var(--font-en);font-size:.55em;opacity:.75}
.menu-entry{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:clamp(10px,1.8dvh,17px) clamp(20px,calc(var(--cw) * .055),28px);
}
.menu-entry span{display:grid;font-family:var(--font-en);font-size:clamp(18px,calc(var(--cw) * .05),24px);letter-spacing:.06em;line-height:1.05}
.menu-entry small{font-family:var(--font-jp);font-size:11px;letter-spacing:.06em;color:var(--magenta)}
.menu-entry b{font-size:1.4em;line-height:1}

/* ========== 02 SLIDER / PAGE 共通レイアウト ========== */
.slider{
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}

.page{
  position:relative;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  padding:var(--pad-t) var(--gut) var(--pad-b);
  background:var(--cream);
  color:var(--ink);
}
.page.tone-dark{background:var(--purple);color:var(--white)}

/* 動画のカット割りと同じ白フラッシュ */
.page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:9;
  background:var(--white);
  opacity:0;
  pointer-events:none;
}
.page.is-active::after{animation:cutFlash .36s ease-out}

/* コンテンツグリッド：装飾より前面（z-index:3） */
.page-grid{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:var(--row-gap);
  grid-template-rows:auto;
}
.page-text{display:grid;justify-items:start;gap:clamp(8px,1.8dvh,18px);width:100%}

/* 主要イラスト：セル内に必ず収める（見出し・本文と重ならない） */
.page-art{
  position:relative;
  z-index:3;
  width:100%;
  min-height:0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-art img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
}

/* ページ下部に置くイラストは画面の横幅いっぱいまで見せる */
.page-art--bleed{
  width:calc(100% + var(--gut) * 2);
  margin-inline:calc(var(--gut) * -1);
  align-items:flex-end;
  overflow:hidden;
}
.page-art--bleed img{width:100%;max-width:none}

/* ========== 03 テキストパーツ ========== */
/* セクション番号：大きい数字と小さい英字ラベルでジャンプ率をつくる */
.index{display:flex;align-items:center;gap:.55em;font-family:var(--font-en)}
.index b{
  font-size:var(--fs-no);
  line-height:.78;
  letter-spacing:-.055em;
  color:var(--magenta);
}
.index i{
  display:block;
  width:clamp(16px,calc(var(--cw) * .055),34px);
  height:3px;
  border-radius:3px;
  background:currentColor;
  opacity:.45;
}
.index span{font-size:var(--fs-cap);letter-spacing:.26em;opacity:.85}
.tone-dark .index b{color:var(--yellow)}

/* text-wrap:pretty は未対応ブラウザでは無視されるだけ（1行だけ残る行末を減らす） */
.page p{font-size:var(--fs-body);line-height:1.9;font-weight:700;max-width:44em;text-wrap:pretty}
/* 本文内の数値・キーワードを大きく抜いて抑揚をつける */
.page p strong{
  font-size:1.7em;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--magenta);
  vertical-align:-.05em;
  margin:0 .04em;
}
.tone-dark p strong{color:var(--yellow)}
.page p em{
  background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 94%,transparent 94%);
  padding:0 .1em;
  font-weight:900;
}
.tone-dark p em{background:linear-gradient(transparent 62%,#c40c81 62%,#c40c81 94%,transparent 94%);color:var(--white)}

.page .lead{font-size:var(--fs-lead);line-height:1.5;font-weight:900;letter-spacing:-.02em}
.page .lead b{display:inline-block;font-size:1.4em;line-height:1.25;letter-spacing:-.035em;color:inherit}
.page .lead small{display:block;margin-top:.7em;font-size:.56em;line-height:1.8;font-weight:700;letter-spacing:.02em;opacity:.75}

/* 見出しアートワーク（支給素材：文字は alt に保持） */
.head-art{line-height:0;width:100%}
.head-art img{width:100%;height:auto}
.head-art--message img{max-width:min(100%,620px)}
.head-art--company img{max-width:min(100%,520px)}
.head-art--work img{max-width:min(100%,440px)}

/* ---- 光沢ボタン（共通スキン） ----
   外側：白フチ＋濃い縁取り／内側：斜めハッチ＋上下グラデ＋ハイライト
   文字：袋文字（text-shadow のリングでフチ取り） */
.btn-skin{
  position:relative;
  border-radius:999px;
  border:3px solid #fffdf3;
  overflow:hidden;
  box-shadow:
    0 0 0 3px var(--btn-edge),
    0 7px 0 #00000030,
    0 12px 20px #0000002b;
  text-shadow:
    2px 0 0 var(--btn-ink),-2px 0 0 var(--btn-ink),
    0 2px 0 var(--btn-ink),0 -2px 0 var(--btn-ink),
    1.4px 1.4px 0 var(--btn-ink),-1.4px 1.4px 0 var(--btn-ink),
    1.4px -1.4px 0 var(--btn-ink),-1.4px -1.4px 0 var(--btn-ink),
    0 3px 0 #00000024;
  transition:transform .18s var(--spring),box-shadow .18s var(--ease);
}
.btn-skin>*{position:relative;z-index:2}
/* 上半分の照り */
.btn-skin::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:2px 5px auto 5px;
  height:44%;
  border-radius:999px 999px 46% 46% / 999px 999px 26% 26%;
  background:linear-gradient(180deg,#ffffff96 0%,#ffffff3d 58%,#ffffff00 100%);
  pointer-events:none;
}
/* 左上のハイライト */
.btn-skin::after{
  content:"";
  position:absolute;
  z-index:1;
  left:7%;
  top:12%;
  width:26%;
  height:36%;
  border-radius:50%;
  background:radial-gradient(closest-side,#ffffffe6,#ffffff00 74%);
  pointer-events:none;
}
/* タッチ端末では :hover が1回目のタップで固定されてしまい、
   ボタンが動いてタップを取りこぼす。ポインタのある環境だけに限定する */
@media (hover:hover){
  .btn-skin:hover{
    transform:translateY(-3px);
    box-shadow:0 0 0 3px var(--btn-edge),0 10px 0 #00000030,0 16px 24px #00000033;
  }
}
.btn-skin:active{
  transform:translateY(3px);
  box-shadow:0 0 0 3px var(--btn-edge),0 3px 0 #00000030,0 6px 12px #0000002b;
}
.btn-skin small{text-shadow:none}

.skin-gold{
  --btn-edge:#a86c00;
  --btn-ink:#fffdf3;
  color:var(--purple);
  background:
    repeating-linear-gradient(115deg,#ffffff2b 0 3px,transparent 3px 8px),
    linear-gradient(180deg,#ffea90 0%,#fdc81f 46%,#eda207 70%,#ffd95f 100%);
}
.skin-purple{
  --btn-edge:#26134f;
  --btn-ink:#26134f;
  color:var(--white);
  background:
    repeating-linear-gradient(115deg,#ffffff1c 0 3px,transparent 3px 8px),
    linear-gradient(180deg,#8461d6 0%,#4b2c91 46%,#371e6d 72%,#6a45b8 100%);
}
.skin-magenta{
  --btn-edge:#6b0546;
  --btn-ink:#6b0546;
  color:var(--white);
  background:
    repeating-linear-gradient(115deg,#ffffff20 0 3px,transparent 3px 8px),
    linear-gradient(180deg,#ec4aae 0%,#c40c81 46%,#960562 72%,#dd2b96 100%);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  padding:clamp(11px,2.2dvh,16px) clamp(20px,calc(var(--cw) * .055),28px);
  font-size:clamp(12px,min(calc(var(--cw) * .036),1.9dvh),15px);
  font-weight:900;
}
.btn b{font-size:1.15em;line-height:1}

/* 実績リストの右に大根キャラを並べる */
.facts{
  display:flex;
  align-items:flex-end;
  gap:clamp(8px,calc(var(--cw) * .03),20px);
  width:100%;
}
.facts .chip-list{flex:1 1 auto;min-width:0}
.facts-char{
  display:block;
  flex:none;
  width:clamp(52px,calc(var(--cw) * .185),96px);
  margin-bottom:-2px;
}
.facts-char img{width:100%;height:auto}

.chip-list{display:flex;flex-wrap:wrap;gap:clamp(8px,calc(var(--cw) * .024),14px)}
/* 角丸をやめ、ロゴまわりと同じ「切り落とした多角形」に合わせる。
   clip-path は box-shadow を切ってしまうため、影は drop-shadow で付ける */
.chip-list li{
  --chip:polygon(7px 0,100% 9%,calc(100% - 4px) 100%,0 86%);
  clip-path:var(--chip);
  padding:3px;
  background:var(--ink);
  filter:drop-shadow(4px 5px 0 var(--ink));
  rotate:-1.8deg;
}
.chip-list li>span{
  display:block;
  clip-path:var(--chip);
  padding:.5em 1.05em .56em;
  font-size:clamp(12px,min(calc(var(--cw) * .039),2.1dvh),18px);
  letter-spacing:.01em;
  font-weight:900;
  background:var(--white);
  color:var(--purple);
}
.chip-list li:nth-child(2){--chip:polygon(0 8%,calc(100% - 6px) 0,100% 92%,5px 100%);rotate:1.8deg}
.chip-list li:nth-child(3){--chip:polygon(5px 0,100% 6%,calc(100% - 7px) 100%,0 94%)}
.tone-dark .chip-list li{background:#0b0616;filter:drop-shadow(4px 5px 0 #00000073)}
.tone-dark .chip-list li>span{background:var(--yellow)}

/* ========== 04 POP装飾キット（HERO動画と共通）：本文より背面 ========== */
.deco{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.deco>*{position:absolute}

/* ハーフトーン（動画の網点） */
.halftone{
  position:absolute;
  inset:0;
  background-image:radial-gradient(#ffffff2e 1.7px,transparent 1.8px);
  background-size:18px 18px;
}
.halftone--ink{background-image:radial-gradient(#4b2c9124 1.7px,transparent 1.8px)}

/* 集中線（動画カットB） */
.burst{
  width:calc(var(--cmin) * 2.1);
  height:calc(var(--cmin) * 2.1);
  left:50%;
  top:46%;
  translate:-50% -50%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#4b2c9112 0deg 4.5deg,transparent 4.5deg 9deg);
}

/* 同心円（動画カットC） */
.rings{
  width:calc(var(--cmin) * 1.9);
  height:calc(var(--cmin) * 1.9);
  left:50%;
  top:52%;
  translate:-50% -50%;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 calc(var(--cmin) * .17),#ffffff26 calc(var(--cmin) * .17),#ffffff26 calc(var(--cmin) * .2),transparent calc(var(--cmin) * .2));
}

/* 電線のように大きく弧を描く線。円の中心を画面外に置き、緩いカーブだけを見せる */
.wires{
  width:calc(var(--cmin) * 3.2);
  height:calc(var(--cmin) * 3.2);
  left:50%;
  top:118%;
  translate:-50% -50%;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 calc(var(--cmin) * .16),
    var(--wire,#ffffff26) calc(var(--cmin) * .16),
    var(--wire,#ffffff26) calc(var(--cmin) * .187),
    transparent calc(var(--cmin) * .187));
}
.wires--ink{--wire:#4b2c9124}

/* フラットな色の円（動画の背景シェイプ） */
.circle{border-radius:50%}
.circle--purple-tl{width:calc(var(--cmin) * .72);height:calc(var(--cmin) * .72);left:calc(var(--cmin) * -.3);top:calc(var(--cmin) * -.26);background:#4b2c910f}
.circle--cyan-r{width:calc(var(--cmin) * .38);height:calc(var(--cmin) * .38);right:calc(var(--cmin) * -.16);top:38%;background:#00a7da1f}
.circle--magenta-br{width:calc(var(--cmin) * .82);height:calc(var(--cmin) * .82);right:calc(var(--cmin) * -.28);bottom:calc(var(--cmin) * -.2);background:#c40c8140}
.circle--yellow-l{width:calc(var(--cmin) * .55);height:calc(var(--cmin) * .55);left:calc(var(--cmin) * -.22);bottom:calc(var(--cmin) * -.12);background:#fcdb0130}

/* 面で効かせる小さなベタ円（本文帯を避け、ヘッダー帯／下部余白に置く） */
.dot{border-radius:50%}
.dot--yellow{width:clamp(24px,calc(var(--cw) * .08),44px);height:clamp(24px,calc(var(--cw) * .08),44px);right:33%;top:calc(var(--h-header) * .22);background:var(--yellow)}
.dot--cyan{width:clamp(20px,calc(var(--cw) * .065),36px);height:clamp(20px,calc(var(--cw) * .065),36px);right:29%;top:calc(var(--h-header) * .28);background:var(--cyan)}

/* 道具イラスト：本文帯を避けて、ヘッダー帯と下部余白でぷかぷか浮かせる */
.tool{z-index:2;line-height:0}
.tool img{width:100%;height:auto;rotate:var(--rot,0deg)}
.tool--top{left:46%;top:calc(var(--h-header) * .16);width:clamp(30px,calc(var(--cw) * .1),50px)}
/* 下部の道具は「下部余白の高さ」を上限に置き、イラスト・本文に触れさせない */
.tool--bl{left:4%;bottom:9px;width:auto;height:min(clamp(42px,calc(var(--cw) * .14),76px),calc(var(--pad-b) - 18px))}
.tool--bc{left:33%;bottom:9px;width:auto;height:min(clamp(34px,calc(var(--cw) * .105),58px),calc(var(--pad-b) - 18px))}
.tool--bl img,.tool--bc img{width:auto;height:100%;max-width:none}

/* 動く素材（支給GIFを最適化したアニメーションWebP）
   prefers-reduced-motion 時は <source media> で静止画に自動フォールバック */
.char{z-index:2;line-height:0}
.char picture{display:block;height:100%}
.char img{height:100%;width:auto;max-width:none}
.char--bl{left:3%;bottom:8px;height:calc(var(--pad-b) - 14px)}

/* 上下左右の縁に置くPOPオブジェクト。
   本文の背面を通るため、地紋と同じ低コントラストで塗る（可読性優先） */
.pop{position:absolute;z-index:0;aspect-ratio:1;width:var(--pw)}
.pop--blob{border-radius:58% 42% 46% 54%/52% 58% 42% 48%}
.pop--blob2{border-radius:44% 56% 62% 38%/48% 40% 60% 52%}
.pop--circle{border-radius:50%}
.pop--poly{clip-path:polygon(14% 0,100% 16%,86% 100%,0 76%)}
.pop--poly2{clip-path:polygon(0 12%,88% 0,100% 82%,20% 100%)}

/* 上：ヘッダー帯からのぞかせる／下：下部余白からのぞかせる */
.pop--t{top:calc(var(--pw) * -.52);left:var(--px,50%)}
.pop--b{bottom:calc(var(--pw) * -.5);left:var(--px,44%)}
/* 左右：画面外に大きく逃がし、縁からのぞく分だけを見せる */
.pop--l{left:calc(var(--pw) * -.58);top:var(--py,58%)}
.pop--r{right:calc(var(--pw) * -.58);top:var(--py,58%)}

@media (prefers-reduced-motion:no-preference){
  .pop{animation:popDrift 13s ease-in-out infinite}
  .pop--r{animation-duration:16s;animation-delay:-4s}
  .pop--b{animation-duration:11s;animation-delay:-6s}
  .pop--l{animation-duration:15s;animation-delay:-2s}
}
@keyframes popDrift{50%{translate:0 -16px}}

/* セクション境界の帯（支給素材）。わずかに傾けて斜めの流れをつくる */
.band{
  left:-7%;
  right:-7%;
  bottom:-14px;
  width:114%;
  max-width:none;
  height:var(--band-h);
  object-fit:fill;
  z-index:1;
  rotate:-2.2deg;
  transform-origin:50% 100%;
}
.band--flat{rotate:1.8deg}

/* ========== 05 アニメーション ========== */
.reveal,.pop-in,.fly{will-change:transform,opacity}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 160ms);
}
.page.is-active .reveal{opacity:1;transform:none}

.pop-in{
  opacity:0;
  transform:scale(.8) rotate(-3deg);
  transform-origin:left center;
  transition:opacity .5s var(--ease),transform .75s var(--spring);
  transition-delay:calc(var(--i,0) * 90ms + 190ms);
}
.page.is-active .pop-in{opacity:1;transform:none}

/* 左右からカクカク飛び出してくる動き（steps でコマ送りにする） */
.fly,.step-l,.step-r{opacity:0}
.page.is-active .fly{
  opacity:1;
  animation:stepInL .5s steps(5,end) both;
  animation-delay:calc(var(--i,0) * 90ms + 220ms);
}
.page.is-active .fly[data-from="right"]{animation-name:stepInR}
.page.is-active .fly[data-from="bottom"]{animation-name:stepUp}
.page.is-active .step-l{
  opacity:1;
  animation:stepInL .46s steps(5,end) both;
  animation-delay:calc(var(--i,0) * 80ms + 180ms);
}
.page.is-active .step-r{
  opacity:1;
  animation:stepInR .46s steps(5,end) both;
  animation-delay:calc(var(--i,0) * 80ms + 180ms);
}

/* 帯は下からコマ送りでせり上がる */
.band{transform:translateY(105%)}
.page.is-active .band{animation:stepUp .5s steps(4,end) both .1s}

/* 常時のぷかぷか。
   登場アニメ（step-l / step-r / fly）は外側の要素の transform、
   ぷかぷかは内側の img の translate・rotate と、別プロパティに分けて衝突を避ける */
@media (prefers-reduced-motion:no-preference){
  .tool img{animation:toolIdle 6.2s ease-in-out infinite}
  .tool--bl img{animation-duration:7.4s;animation-delay:-2.1s}
  .tool--bc img{animation-duration:8.2s;animation-delay:-3.6s}
  .tool--top img{animation-duration:5.6s;animation-delay:-1.2s}
  .char picture{display:block;height:100%;animation:charIdle 5.2s ease-in-out infinite}
  .burst{animation:spin 140s linear infinite}
  .rings{animation:ringPulse 9s ease-in-out infinite}
  .wires{animation:wireDrift 16s ease-in-out infinite}
  .dot{animation:dotBob 6s ease-in-out infinite}
  .dot--yellow{animation-duration:7.4s;animation-delay:-2.2s}
  .page.is-active .page-art--mascot{animation:mascotBob 4.6s ease-in-out 1.4s infinite}
  .rail-tool{animation:toolIdle 6.5s ease-in-out infinite}
  .rail-tool--cable{animation-duration:9s;animation-delay:-4s}
  .rail-daikon{animation:charIdle 5.8s ease-in-out infinite}
}
@keyframes cutFlash{0%{opacity:.45}100%{opacity:0}}
@keyframes stepInL{from{transform:translateX(-125%) rotate(var(--rot,0deg))}to{transform:translateX(0) rotate(var(--rot,0deg))}}
@keyframes stepInR{from{transform:translateX(125%) rotate(var(--rot,0deg))}to{transform:translateX(0) rotate(var(--rot,0deg))}}
@keyframes stepUp{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes toolIdle{
  0%,100%{translate:0 0;rotate:var(--rot,0deg)}
  50%{translate:0 -13px;rotate:calc(var(--rot,0deg) + 7deg)}
}
@keyframes charIdle{50%{translate:0 -9px}}
@keyframes dotBob{50%{translate:0 -14px}}
@keyframes spin{to{rotate:360deg}}
@keyframes ringPulse{50%{scale:1.05;opacity:.75}}
@keyframes wireDrift{50%{translate:-50% calc(-50% - 14px)}}
@keyframes mascotBob{50%{translate:0 -9px}}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ========== 06 各ページ個別 ========== */

/* ---- HERO（動画のみ） ---- */
.page--hero{padding:0;background:var(--purple)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
  background:var(--purple);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#2f1a6373 0%,#2f1a6300 26% 62%,#2f1a63b8 100%);
}

/* ---- ちぎれた紙の額縁・角の色面・筆（2ページ目以降） ---- */
/* 額縁：1枚のSVGを preserveAspectRatio=none で画面いっぱいに伸ばす。
   実際に塗られるのは外周 10〜16px 程度なので、本文は --gut の内側に収まる */
.frame{
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
}
.frame-t{fill:var(--f1,var(--yellow))}
.frame-r{fill:var(--f2,var(--cyan))}
.frame-b{fill:var(--f3,var(--magenta))}
.frame-l{fill:var(--f4,var(--purple))}
.page--message .frame{--f1:var(--purple);--f2:var(--cyan);--f3:var(--yellow);--f4:var(--magenta)}
.page--company .frame{--f1:var(--yellow);--f2:var(--cream);--f3:var(--cyan);--f4:var(--magenta)}
.page--work    .frame{--f1:var(--magenta);--f2:var(--purple);--f3:var(--cyan);--f4:var(--yellow)}

/* 角の色面：ロゴの土台。角ばった多角形を2枚ずらして重ねる */
.corner{top:0;background:var(--c)}
.corner--main{
  left:0;
  z-index:2;
  width:clamp(152px,calc(var(--cw) * .485),232px);
  height:min(clamp(78px,calc(var(--h-header) * 1.24),108px),calc(var(--pad-t) - 6px));
  clip-path:polygon(0 0,100% 0,93% 44%,71% 100%,0 87%);
}
.corner--sub{
  left:clamp(104px,calc(var(--cw) * .33),160px);
  z-index:1;
  width:clamp(86px,calc(var(--cw) * .27),128px);
  height:min(clamp(56px,calc(var(--h-header) * .95),82px),calc(var(--pad-t) - 14px));
  clip-path:polygon(6% 0,100% 0,74% 100%,0 72%);
}

/* 筆でひと塗り：本文帯を避け、上下の余白側に置く */
.brush{
  z-index:2;
  width:clamp(84px,calc(var(--cw) * .3),160px);
  height:auto;
  opacity:.85;
}
.brush--ml{left:-5%;bottom:calc(var(--pad-b) * .16);rotate:-13deg}
.brush--cr{right:-9%;bottom:calc(var(--pad-b) * .04);rotate:8deg}
.brush--wr{right:-6%;top:calc(var(--h-header) * .92);rotate:-9deg}

@media (prefers-reduced-motion:no-preference){
  .brush{animation:fvSway 8s ease-in-out infinite}
  .brush--cr{animation-duration:9.4s;animation-delay:-3s}
  .brush--wr{animation-duration:7.2s;animation-delay:-1.6s}
}
@keyframes fvSway{50%{translate:0 -11px}}

.scroll-cue{
  position:absolute;
  z-index:4;
  left:var(--gut);
  bottom:clamp(16px,3.4dvh,34px);
  display:grid;
  justify-items:start;
  gap:8px;
  color:var(--white);
  font-family:var(--font-en);
  font-size:10px;
  letter-spacing:.2em;
  text-shadow:0 2px 8px #2f1a63cc;
}
.scroll-cue i{display:block;width:2px;height:clamp(26px,5dvh,46px);border-radius:2px;background:var(--yellow);animation:cue 1.9s infinite}

/* ---- MESSAGE ---- */
.page--message{background:var(--cream)}
.page-grid--message{grid-template-rows:auto minmax(0,1fr)}
.page--message .lead em{background:linear-gradient(transparent 60%,var(--cyan) 60%,var(--cyan) 96%,transparent 96%);color:var(--ink)}

/* ---- COMPANY ---- */
.page--company{background:var(--purple)}
.page-grid--company{grid-template-rows:auto minmax(0,1fr)}
.page-art--city img{width:100%;height:auto;max-height:none}

/* ---- WORK ---- */
.page--work{background:var(--cream-2)}
.page-grid--work{grid-template-rows:auto auto auto;gap:clamp(7px,.9dvh,13px)}
.page .punch{
  font-size:var(--fs-punch);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.045em;
  color:var(--purple);
}
.punch small{display:inline-block;margin-top:.1em;font-size:.34em;letter-spacing:.1em;color:var(--ink);opacity:.55}
/* 説明文の右側に建柱作業イラスト。通常フローで領域を分離する。 */
.work-intro{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:clamp(10px,calc(var(--cw) * .035),18px);
  align-items:center;
  width:100%;
}
.work-intro-copy{display:grid;gap:clamp(6px,1dvh,11px);min-width:0}
.work-installation{min-width:0;justify-self:end;width:calc(100% + var(--gut) * 1.5);margin-right:calc(var(--gut) * 0.5)}
.work-installation img{width:100%;height:auto;max-height:clamp(118px,29dvh,244px);object-fit:contain;object-position:right bottom}
.work-intro .punch{font-size:clamp(28px,min(calc(var(--cw) * .12),5.6dvh),58px);letter-spacing:-.075em;white-space:nowrap}
.page--work .flow{--ico:clamp(32px,min(calc(var(--cw) * .112),6.2dvh),52px)}
.punch-note{opacity:.82;font-size:clamp(11px,min(calc(var(--cw) * .031),1.7dvh),14px);line-height:1.6}
/* 小さめの英字キャプション */
.cap{
  font-family:var(--font-en);
  font-size:var(--fs-cap)!important;
  letter-spacing:.2em;
  line-height:1.8!important;
  opacity:.6;
}

.flow{
  margin-bottom:clamp(8px,2.6dvh,28px);
  --ico:clamp(34px,min(calc(var(--cw) * .126),7dvh),58px);
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(2px,calc(var(--cw) * .008),8px);
  width:100%;
}
/* 工程をつなぐ点線 */
.flow::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:calc(var(--ico) / 2 - 1.5px);
  height:3px;
  background:repeating-linear-gradient(90deg,var(--purple) 0 7px,transparent 7px 14px);
  opacity:.38;
}
.flow li{position:relative;display:grid;justify-items:center;gap:1px}
.flow-icon{
  width:var(--ico);
  height:var(--ico);
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--ink);
  box-shadow:3px 4px 0 var(--ink);
  color:var(--purple);
  display:grid;
  place-items:center;
}
.flow-icon svg{width:58%;height:58%}
.flow li b{
  margin-top:4px;
  font-family:var(--font-en);
  font-size:clamp(9px,calc(var(--cw) * .026),12px);
  letter-spacing:.06em;
  line-height:1.1;
  color:var(--magenta);
}
.flow-label{
  font-size:clamp(10px,min(calc(var(--cw) * .032),1.75dvh),15px);
  font-weight:900;
  letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--ink);
}
.flow .flow-last .flow-icon{background:var(--magenta);color:var(--white);border-color:var(--ink)}
.flow .flow-last .flow-label{color:var(--magenta)}
.work-close{display:grid;gap:clamp(3px,.5dvh,7px);max-width:46em}
.work-close p{font-size:clamp(11px,min(calc(var(--cw) * .031),1.7dvh),14px);line-height:1.55}

/* ---- 04〜12ページ共通の下地 ---- */
/* 内容が1画面に収まらないページだけ内部スクロールにする（スナップは維持） */
.page--scroll{
  overflow-y:auto;
  align-items:flex-start;
  overscroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* 内部スクロール中も網点が動かないよう、装飾ではなく背景で敷く */
  background-image:radial-gradient(#ffffff2e 1.7px,transparent 1.8px);
  background-size:18px 18px;
}
.page--scroll.tone-light{background-image:radial-gradient(#4b2c9124 1.7px,transparent 1.8px)}
.page--scroll::-webkit-scrollbar{display:none}
.page--scroll .page-grid{height:auto;min-height:100%;align-content:start}
.page--scroll .deco{height:100dvh;min-height:100%}

/* 額縁の配色：ページごとに4辺の色を入れ替えて単調さを避ける */
.page--fit    .frame{--f1:var(--yellow);--f2:var(--magenta);--f3:var(--cyan);--f4:var(--cream)}
.page--point1 .frame{--f1:var(--cyan);--f2:var(--purple);--f3:var(--magenta);--f4:var(--yellow)}
.page--point2 .frame{--f1:var(--yellow);--f2:var(--cream);--f3:var(--cyan);--f4:var(--magenta)}
.page--point3 .frame{--f1:var(--magenta);--f2:var(--yellow);--f3:var(--purple);--f4:var(--cyan)}
.page--members .frame{--f1:var(--magenta);--f2:var(--yellow);--f3:var(--cream);--f4:var(--cyan)}
.page--day    .frame{--f1:var(--yellow);--f2:var(--cyan);--f3:var(--purple);--f4:var(--magenta)}
.page--req    .frame{--f1:var(--cyan);--f2:var(--magenta);--f3:var(--purple);--f4:var(--yellow)}
.page--about  .frame{--f1:var(--yellow);--f2:var(--cream);--f3:var(--magenta);--f4:var(--cyan)}
.page--entry  .frame{--f1:var(--magenta);--f2:var(--yellow);--f3:var(--cream);--f4:var(--cyan)}

.head-art--fit img{max-width:min(100%,420px)}
.head-art--p1 img{max-width:min(100%,460px)}
.head-art--p2 img{max-width:min(100%,440px)}
.head-art--p3 img{max-width:min(100%,440px)}
.head-art--members img{max-width:min(100%,470px)}
.head-art--day img{max-width:min(100%,450px)}
.head-art--req img{max-width:min(100%,190px)}
.head-art--about img{max-width:min(100%,190px)}

/* 淡色ページ用の同心円 */
.rings--ink{
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 calc(var(--cmin) * .17),
    #4b2c9114 calc(var(--cmin) * .17),
    #4b2c9114 calc(var(--cmin) * .2),
    transparent calc(var(--cmin) * .2));
}


/* ---- 04 FIT：向いている／向いていないの2カラム ---- */
.page--fit{background:var(--purple)}
.page-grid--fit{grid-template-rows:auto auto;gap:clamp(8px,1.6dvh,18px)}
.fit-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}
.fit-worker{flex:none;width:clamp(84px,calc(var(--cw) * .28),134px);height:clamp(84px,17dvh,160px);position:relative;z-index:3}
.fit-worker img{width:100%;height:100%;object-fit:contain}
@media (max-height:600px){
  .fit-worker{height:64px}
  .fit-worker img{position:absolute;inset:0;width:100%;height:84px}
}
/* 登場は画像、登場後の浮遊は外側で動かし、transform の競合を防ぐ。 */
@media (prefers-reduced-motion:no-preference){
  .page.is-active .fit-worker{animation:fitWorkerFloat 3.2s ease-in-out .81s infinite both}
}
@keyframes fitWorkerFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.judge{
  --jov:clamp(5px,.9dvh,10px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,calc(var(--cw) * .03),18px);
  width:100%;
}
/* 見出しは支給チップと同じ「切り落とした多角形＋黄色＋ハードシャドウ」。
   clip-path は box-shadow を切るため、影は drop-shadow で付ける */
/* 見出しの行数が違っても、白パネルの下端はそろえる */
.judge-col{display:grid;grid-template-rows:auto minmax(0,1fr);justify-items:start;min-width:0}
.page .judge-head{
  --jchip:polygon(7px 0,100% 8%,calc(100% - 4px) 100%,0 90%);
  position:relative;
  z-index:2;
  max-width:100%;
  margin:0 0 calc(var(--jov) * -1) -2px;
  padding:3px;
  clip-path:var(--jchip);
  background:var(--ink);
  filter:drop-shadow(3px 4px 0 var(--ink));
  rotate:-1.8deg;
  font-size:clamp(10.5px,min(calc(var(--cw) * .032),1.85dvh),15.5px);
  line-height:1.34;
  font-weight:900;
  letter-spacing:-.03em;
  text-wrap:nowrap;
  width:100%;
}
.judge-head>span{
  display:block;
  clip-path:var(--jchip);
  padding:.55em .3em .65em;
  text-align:center;
  background:var(--yellow);
  color:var(--purple);
}
/* 見出し内は下線ハイライトではなく色で差をつける */
.page .judge-head em{background:none;padding:0;color:var(--jc);font-weight:900}
.judge-ico{display:block;width:1.7em;height:1.7em;margin:0 auto .25em;color:var(--jc)}
.judge-label{display:block;white-space:nowrap;letter-spacing:-.055em}
.page .judge-note{font-size:clamp(10px,calc(var(--cw) * .025),12px);line-height:1.55;margin-top:12px;padding-top:10px;border-top:1px dotted #1b1b1a55;color:var(--ink);font-weight:700}
.judge-ico svg{display:block;width:100%;height:100%}

.judge-body{
  --jchip:polygon(8px 0,100% 3%,calc(100% - 5px) 100%,0 97%);
  width:100%;
  min-width:0;
  clip-path:var(--jchip);
  filter:drop-shadow(5px 6px 0 #0b0616);
  padding:calc(var(--jov) + clamp(8px,1.4dvh,15px)) clamp(9px,calc(var(--cw) * .034),19px) clamp(10px,1.8dvh,19px);
  background:var(--white);
  color:var(--ink);
}
.judge-col--yes{--jc:var(--cyan)}
.judge-col--no{--jc:var(--magenta)}
.judge-col--no .judge-head{rotate:1.8deg;margin-left:0;margin-right:-2px}
.judge-col--no .judge-body{--jchip:polygon(0 3%,calc(100% - 8px) 0,100% 97%,5px 100%)}

.judge-col ul{display:grid}
.judge-col li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.44em;
  align-items:start;
  padding:clamp(3px,.55dvh,7px) 0;
  font-size:clamp(10.5px,min(calc(var(--cw) * .032),1.8dvh),15.5px);
  line-height:1.42;
  font-weight:700;
  letter-spacing:-.02em;
}
.judge-col li + li{border-top:1.5px dotted #1b1b1a2b}
/* 各項目の頭は、工程アイコンと同じ「フチ＋ずれた影」の丸バッジ */
.judge-mark{
  display:grid;
  place-items:center;
  width:1.44em;
  height:1.44em;
  margin-top:.06em;
  border-radius:50%;
  border:2px solid var(--ink);
  box-shadow:1.5px 2px 0 var(--ink);
  background:var(--jc);
  color:var(--white);
}
.judge-mark svg{display:block;width:62%;height:62%}

/* ---- 05〜07 ホクエイPOINT 共通 ---- */
.page-grid--point{grid-template-rows:auto auto auto;gap:clamp(9px,1.8dvh,20px)}
.page--point1{background:var(--cream-2)}
.page--point2{background:var(--purple)}
.page--point3{background:var(--cream)}
.point-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.badge{
  flex:none;
  line-height:0;
  width:clamp(52px,calc(var(--cw) * .175),90px);
}
.badge img{width:100%;height:auto}
.page .punch--sm{
  font-size:clamp(21px,min(calc(var(--cw) * .082),4.5dvh),42px);
  line-height:1.24;
  letter-spacing:-.05em;
}
.tone-dark .punch,.tone-dark .punch--sm{color:var(--yellow)}

/* 給与パネル：角ばった台形に切り抜き、影は drop-shadow で付ける */
.pay{
  width:100%;
  max-width:min(100%,400px);
  padding:clamp(8px,1.4dvh,14px) clamp(14px,calc(var(--cw) * .046),26px) clamp(9px,1.5dvh,15px);
  background:var(--purple);
  color:var(--white);
  clip-path:polygon(10px 0,100% 4%,calc(100% - 6px) 100%,0 96%);
  filter:drop-shadow(5px 6px 0 var(--ink));
  rotate:-1.1deg;
}
.page .pay p{max-width:none;text-align:center}
.page .pay-label{
  font-size:clamp(9.5px,min(calc(var(--cw) * .027),1.5dvh),12px);
  line-height:1.4;
  letter-spacing:.14em;
  opacity:.82;
}
.page .pay-fig{
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 .08em;
  margin-top:.12em;
  font-size:clamp(28px,min(calc(var(--cw) * .108),5.6dvh),52px);
  line-height:1.06;
}
.pay-fig b{font-family:var(--font-en);font-size:1em;letter-spacing:-.05em;color:var(--yellow)}
.pay-fig span{font-size:.4em;font-weight:900;letter-spacing:-.02em}
.pay-fig i{font-size:.42em;padding:0 .18em;opacity:.72}
.page .pay-sub{
  margin-top:.3em;
  font-size:clamp(9.5px,min(calc(var(--cw) * .027),1.5dvh),12px);
  line-height:1.5;
  opacity:.82;
}

/* 縦積みのチップ（POINT2） */
.chip-list--stack{flex-direction:column;align-items:flex-start;gap:clamp(6px,1dvh,12px)}
.chip-list--stack li:nth-child(2){rotate:1.4deg}
.chip-list--stack li:nth-child(3){rotate:-1deg}

/* セリフ（POINT3） */
.page .quote{
  font-size:clamp(19px,min(calc(var(--cw) * .072),4dvh),38px);
  line-height:1.3;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--magenta);
}

/* テキストの右に人物を配置するPOINT共通レイアウト */
.point-scene{display:grid;grid-template-columns:minmax(0,1fr) 28%;align-items:center;gap:10px;width:100%}
.point-scene-copy{display:grid;gap:clamp(8px,1.4dvh,14px)}
.point-person{width:100%;height:clamp(95px,18dvh,165px)}
.point-person img{width:100%;height:100%;object-fit:contain}
.page .point-scene .punch{font-size:clamp(20px,min(calc(var(--cw) * .058),3.6dvh),28px)}
.page .point-scene .quote{font-size:clamp(21px,min(calc(var(--cw) * .082),4.6dvh),40px);white-space:nowrap}
/* 内容を表すアイコン付きリスト（POINT3） */
.ok-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(7px,calc(var(--cw) * .026),14px);width:100%}
.ok-list li{
  display:flex;
  align-items:center;
  gap:.42em;
  font-size:clamp(11px,min(calc(var(--cw) * .033),1.8dvh),15px);
  font-weight:900;
  letter-spacing:-.02em;
}
.ok-list svg{width:1.5em;height:1.5em}
.ok-list b{
  flex:none;
  display:grid;
  place-items:center;
  width:3em;
  height:3em;
  border-radius:50%;
  border:2.5px solid var(--ink);
  box-shadow:2px 3px 0 var(--ink);
  background:var(--magenta);
  color:var(--white);
  font-family:var(--font-en);
  font-size:1em;
  letter-spacing:.02em;
}
.ok-list li:nth-child(2) b{background:var(--cyan)}
.ok-list li:nth-child(3) b{background:var(--purple)}
.ok-list li:nth-child(4) b{background:var(--yellow);color:var(--ink)}
.point-close{display:grid;gap:clamp(3px,.5dvh,7px)}

/* ---- 08 MEMBERS：写真を2列の流れる帯で全点見せる ---- */
.page--members{background:var(--purple)}
.page-grid--members{grid-template-rows:auto minmax(0,1fr);gap:clamp(9px,1.8dvh,20px)}
.gallery{
  --tile:clamp(84px,min(calc(var(--cw) * .38),21dvh),172px);
  --tgap:clamp(6px,1dvh,12px);
  display:grid;
  align-content:center;
  gap:var(--tgap);
  width:100%;
  min-width:0;
}
.strip{
  overflow:hidden;
  width:calc(100% + var(--gut) * 2);
  margin-inline:calc(var(--gut) * -1);
}
.strip-track{display:flex;width:max-content}
/* gap ではなく margin で送るとコピー幅＝トラック幅の半分になり、継ぎ目が出ない */
.strip li{flex:none;margin-right:var(--tgap);line-height:0}
.strip img{
  width:calc(var(--tile) * 4 / 3);
  height:var(--tile);
  object-fit:cover;
  clip-path:polygon(6px 0,100% 2.5%,calc(100% - 5px) 100%,0 97.5%);
}
.strip--b img{clip-path:polygon(0 2.5%,calc(100% - 6px) 0,100% 97.5%,5px 100%)}

/* ---- 09 DAY：一日の流れ ----
   時刻｜ノードのレール｜アイコン付きの帯、の3カラム。
   始業・休憩・終業は大きなラベル付きノードにして区切りをつくる */
.page--day{background:var(--cream-2)}
.page-grid--day{grid-template-rows:auto auto;gap:clamp(9px,1.8dvh,20px)}
.page-grid--day .page-text{padding-bottom:clamp(6px,2.2dvh,26px)}
/* 見出し行の右にキャラクター（FITと同じ作り） */
.day-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}
.day-person{flex:none;position:relative;z-index:3;width:clamp(80px,calc(var(--cw) * .26),126px);height:clamp(80px,16dvh,150px)}
.day-person img{width:100%;height:100%;object-fit:contain}
/* 登場は画像、登場後の浮遊は外側で動かし、transform の競合を防ぐ。 */
@media (prefers-reduced-motion:no-preference){
  .page.is-active .day-person{animation:fitWorkerFloat 3.4s ease-in-out .9s infinite both}
}
.timeline{
  --tlw:clamp(33px,calc(var(--cw) * .112),50px);   /* 時刻 */
  --tln:clamp(26px,calc(var(--cw) * .088),40px);   /* ノード（大） */
  --tlg:clamp(5px,calc(var(--cw) * .02),11px);     /* 列間 */
  --tlgap:clamp(3px,1dvh,13px);                    /* 行間 */
  --tlrail:calc(var(--tlw) + var(--tlg) + var(--tln) / 2 - 1.5px);
  display:grid;
  gap:var(--tlgap);
  width:100%;
}
.timeline li{
  position:relative;
  display:grid;
  grid-template-columns:var(--tlw) var(--tln) minmax(0,1fr);
  gap:var(--tlg);
  align-items:center;
}
/* 縦のレール：行の中心どうしをつなぐ（先頭と末尾はノードで止める） */
.timeline li::before{
  content:"";
  position:absolute;
  left:var(--tlrail);
  top:0;
  bottom:calc(var(--tlgap) * -1);
  width:3px;
  background:repeating-linear-gradient(180deg,var(--purple) 0 6px,transparent 6px 12px);
  opacity:.34;
}
.timeline li:first-child::before{top:50%}
.timeline li:last-child::before{bottom:50%}
/* 区切りのノードの手前に進行方向の矢印 */
.timeline .tl-key:not(:first-child)::after{
  content:"";
  position:absolute;
  z-index:1;
  left:calc(var(--tlrail) - 3px);
  top:calc(var(--tlgap) * -1 - 1px);
  border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;
  border-top:6px solid var(--purple);
  opacity:.5;
}
.tl-time{
  font-family:var(--font-en);
  font-size:clamp(10px,min(calc(var(--cw) * .032),1.8dvh),14px);
  line-height:1.2;
  letter-spacing:-.04em;
  color:var(--purple);
  text-align:right;
}
.tl-node{
  position:relative;
  z-index:1;
  justify-self:center;
  display:grid;
  place-items:center;
  width:clamp(11px,calc(var(--cw) * .036),16px);
  height:clamp(11px,calc(var(--cw) * .036),16px);
  border-radius:50%;
  border:2.5px solid var(--ink);
  background:var(--yellow);
}
.tl-key .tl-node{
  width:var(--tln);
  height:var(--tln);
  background:var(--magenta);
  box-shadow:2px 3px 0 var(--ink);
}
.tl-key .tl-node b{
  font-size:clamp(8.5px,min(calc(var(--cw) * .028),1.55dvh),12px);
  line-height:1;
  letter-spacing:-.06em;
  color:var(--white);
}
/* 帯：角丸ではなく、他のパネルと同じ切り落とした多角形 */
.tl-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(5px,calc(var(--cw) * .022),12px);
  min-width:0;
  padding:clamp(4px,.7dvh,9px) clamp(7px,calc(var(--cw) * .028),15px);
  clip-path:polygon(5px 0,100% 4%,calc(100% - 4px) 100%,0 96%);
  background:var(--tlc,var(--white));
}
.timeline li:nth-child(even){--tlc:#efe8fb}
.timeline .tl-key{--tlc:#fdf2bd}
.tl-ico{
  display:grid;
  place-items:center;
  width:clamp(18px,min(calc(var(--cw) * .062),3.3dvh),29px);
  height:clamp(18px,min(calc(var(--cw) * .062),3.3dvh),29px);
  color:var(--purple);
}
.tl-key .tl-ico{color:var(--magenta)}
.tl-ico svg{display:block;width:100%;height:100%}
.tl-body{display:grid;min-width:0}
.tl-body b{
  font-size:clamp(11px,min(calc(var(--cw) * .035),1.95dvh),15.5px);
  line-height:1.28;
  font-weight:900;
  letter-spacing:-.035em;
}
.tl-body small{
  font-size:clamp(9px,min(calc(var(--cw) * .027),1.5dvh),12px);
  line-height:1.34;
  font-weight:700;
  opacity:.66;
}

/* ---- 10 / 11 仕様表（募集要項・会社概要） ---- */
.page--req{background:var(--cream)}
.page--about{background:var(--purple)}
.page-grid--req{grid-template-rows:auto auto auto;gap:clamp(12px,2.2dvh,26px);justify-items:start}
.page-grid--req .page-text{
  gap:clamp(12px,2.6dvh,30px);
  padding-top:clamp(8px,2.2dvh,26px);
  padding-bottom:clamp(12px,2.8dvh,34px);
}
.page-grid--about{grid-template-rows:auto auto auto;gap:clamp(9px,1.7dvh,20px)}
.page-grid--about .page-text{padding-bottom:clamp(6px,2.2dvh,26px)}
.spec{display:grid;gap:clamp(7px,1.2dvh,14px);width:100%}
.spec-row{
  display:grid;
  grid-template-columns:clamp(62px,calc(var(--cw) * .205),92px) minmax(0,1fr);
  gap:clamp(8px,calc(var(--cw) * .03),16px);
  align-items:baseline;
  padding-bottom:clamp(7px,1.2dvh,14px);
  border-bottom:1.5px solid currentColor;
}
.spec-row:last-child{border-bottom:0;padding-bottom:0}
.tone-dark .spec-row{border-color:#ffffff2e}
.tone-light .spec-row{border-color:#1b1b1a24}
.spec dt{
  font-size:clamp(10px,min(calc(var(--cw) * .029),1.6dvh),13px);
  line-height:1.4;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--purple);
}
.tone-dark .spec dt{color:var(--yellow)}
.spec dd{
  margin:0;
  min-width:0;
  font-size:clamp(11px,min(calc(var(--cw) * .032),1.78dvh),14.5px);
  line-height:1.6;
  font-weight:700;
}
.spec dd b{
  font-family:var(--font-en);
  font-size:1.65em;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--magenta);
  vertical-align:-.03em;
  margin:0 .04em;
}
.tone-dark .spec dd b{color:var(--yellow)}
.spec dd small{
  display:block;
  margin-top:.24em;
  font-size:.82em;
  line-height:1.55;
  font-weight:700;
  opacity:.68;
}
.spec dd a{color:inherit;text-underline-offset:3px}
.page-art--city2{align-self:end;margin-top:clamp(20px,9dvh,90px)}
.page-art--city2 img{width:100%;height:auto;max-height:none}

/* ---- 12 ENTRY：応募フォーム ---- */
.page--entry{background:var(--purple)}
.page-grid--entry{isolation:isolate;grid-template-rows:auto auto;gap:clamp(20px,4dvh,46px)}
.page--entry .page-grid>.deco{z-index:-1;height:auto;inset:calc(-1 * var(--pad-t)) calc(-1 * var(--gut)) calc(-1 * var(--pad-b))}
.entry-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(8px,calc(var(--cw) * .03),18px);
  align-items:end;
  width:100%;
}
.entry-copy{display:grid;justify-items:start;gap:clamp(9px,1.8dvh,20px);min-width:0;padding-top:clamp(6px,1.8dvh,22px)}
.entry-char{display:block;flex:none;width:clamp(96px,calc(var(--cw) * .33),168px);line-height:0}
/* 見出しは大根の左のカラム幅に必ず収まるサイズにする（折り返し禁止） */
.page--entry .punch--sm{font-size:min(calc(var(--cw) * .076),4dvh,34px);white-space:nowrap}
.entry-char img{width:100%;height:auto}

.entry-form{display:grid;gap:clamp(8px,1.5dvh,15px);width:100%;max-width:min(100%,520px)}
.field{display:grid;gap:5px;margin:0}
.field label{
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:clamp(11px,min(calc(var(--cw) * .031),1.7dvh),13.5px);
  font-weight:900;
  letter-spacing:.01em;
}
.field label i{
  padding:.2em .6em .26em;
  font-size:9.5px;
  font-style:normal;
  letter-spacing:.06em;
  background:var(--magenta);
  color:var(--white);
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
}
.field label i.opt{background:#ffffff30;color:#ffffffd6}
.field input,.field select,.field textarea{
  width:100%;
  padding:.62em .78em;
  border:2.5px solid var(--ink);
  border-radius:8px;
  box-shadow:3px 4px 0 var(--ink);
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:700;
  /* iOSでフォーカス時に拡大されないよう16px以上を保つ */
  font-size:16px;
  line-height:1.4;
  appearance:none;
}
.field textarea{resize:vertical;min-height:4.4em}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.06em,calc(100% - 12px) 1.06em;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.2em;
}
.field ::placeholder{color:#1b1b1a5c;font-weight:700}
.entry-form.is-checked :invalid{border-color:var(--magenta);box-shadow:3px 4px 0 var(--magenta)}
.entry-submit{justify-self:start;margin-top:clamp(12px,3dvh,32px);margin-bottom:clamp(6px,1.6dvh,18px)}
.page .form-note{
  font-size:clamp(10px,min(calc(var(--cw) * .028),1.55dvh),12.5px);
  line-height:1.6;
  font-weight:700;
  opacity:.78;
}
.page .form-note a{color:var(--yellow);white-space:nowrap}
.page .form-note.is-alert{opacity:1;color:var(--yellow)}

/* 追加ページの常時アニメーション（登場アニメと別プロパティで衝突を避ける） */
@media (prefers-reduced-motion:no-preference){
  .badge img{animation:badgeIdle 6.8s ease-in-out infinite}
  .entry-char img{animation:charIdle 5.4s ease-in-out infinite}
  .strip--a .strip-track{animation:marqueeL 46s linear infinite}
  .strip--b .strip-track{animation:marqueeR 52s linear infinite}
}
@keyframes badgeIdle{50%{translate:0 -8px;rotate:9deg}}
@keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ========== 07 固定UI ========== */
.floating-entry{
  position:fixed;
  z-index:50;
  right:clamp(12px,calc(var(--cw) * .04),22px);
  bottom:clamp(12px,3dvh,26px);
  display:flex;
  align-items:center;
  gap:.7em;
  padding:clamp(11px,1.7dvh,15px) clamp(19px,calc(var(--cw) * .05),26px);
  font-family:var(--font-en);
  font-size:clamp(11px,calc(var(--cw) * .03),13px);
  letter-spacing:.12em;
}
.floating-entry b{font-family:var(--font-jp);font-size:1.25em;line-height:1}
.floating-entry.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px)}

/* PC専用レール（既定は非表示） */
.frame-rail{display:none}

/* ========== 08 狭幅・低い画面の調整 ========== */
@media (max-width:360px){
  :root{--gut:20px}
  .chip-list li>span{padding:.46em .85em .5em}
  .flow{gap:2px}
}

@media (max-height:700px){
  .timeline .tl-key::after{display:none}
  /* 項目が13件あるため、低い画面ではメニューを1画面に収まるまで詰める */
  .menu-inner{gap:7px;padding-bottom:16px}
  .menu a{padding:4px}
  :root{
    --pad-t:calc(var(--h-header) + 8px);
    --pad-b:74px;
    --row-gap:10px;
    --band-h:46px;
  }
  .scroll-cue i{height:22px}
}

@media (max-height:620px) and (max-width:820px){
  .dot,.tool--top{display:none}
  .page p{line-height:1.7}
}

/* 画面が高いときはWORKの下部余白を広げ、動く素材を大きく見せる */
@media (min-height:760px){
  .page--work{--pad-b:clamp(76px,8.4dvh,128px)}
  .page-art--city{margin-bottom:calc(var(--pad-b) * -.22)}
}

/* 画面高が低い端末：WORKは見出し・イラストを残したまま行間と余白を詰める */
@media (max-height:700px){
  .page--work{--pad-b:68px}
  .page--work .work-installation img{max-height:clamp(118px, 26dvh, 234px)}
  .page--work .work-intro .punch{font-size:min(43px,calc(var(--cw) * .115),6.8dvh)}
  .page--work .flow{margin-bottom:4px;--ico:45px}
  .page--work .page-grid--work{gap:2px}
  .page--work .work-intro-copy{gap:3px}
  .page--work .work-close{gap:3px}
  .page--work .page p,.page--work .work-close p{line-height:1.36}
  .page--work .work-close p{font-size:11px}
  .page--work .index b{font-size:clamp(24px,4.9dvh,38px)}
}

/* 600px以下：建柱イラストは小さく残し、見出し・本文をさらに圧縮 */
@media (max-height:600px){
  .page--work .work-intro{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .page--work .work-installation img{max-height:clamp(96px,21dvh,150px)}
  .page--work .work-intro .punch{font-size:min(38px,calc(var(--cw) * .115),5.6dvh)}
  .page--work .head-art--work img{max-width:min(100%,215px)}
  .page--work .work-close p{font-size:10.5px;line-height:1.32}
  .page--work .flow{margin-bottom:4px}
}

/* ========== 09 タブレット〜PC：中央スマホキャンバス ========== */

/* --- 09-a フレーム表示：スマホビューをそのまま中央に固定幅で --- */
@media (min-width:700px){
  :root{--cw:480px}

  /* 動画と同じ世界がキャンバスの外側にも続く背景 */
  html,body{
    background-color:var(--purple-dark);
    background-image:
      radial-gradient(#ffffff1c 1.8px,transparent 1.9px),
      linear-gradient(106deg,transparent 0 30%,#c40c8124 30% 41%,transparent 41%),
      radial-gradient(circle at 11% 20%,#4b2c91 0 24vmin,transparent 24vmin),
      radial-gradient(circle at 89% 80%,#00a7da26 0 20vmin,transparent 20vmin);
    background-size:20px 20px,auto,auto,auto;
    background-attachment:fixed;
  }

  .slider,.site-header,.menu{
    width:var(--cw);
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .slider{
    position:relative;
    background:var(--cream);
    box-shadow:0 0 0 1px #00000026,0 26px 70px #00000047;
  }

  /* 枠内表示では筆の装飾を少し小さくして下部イラストと離す */
  .brush{width:clamp(80px,calc(var(--cw) * .24),128px)}

  /* 固定応募ボタンはキャンバスの内側右下へ */
  .floating-entry{right:calc(50% - (var(--cw) / 2) + 14px)}

  /* キャンバス固定幅ではWORKの縦を詰めて1画面に収める */
  .work-installation img{max-height:clamp(118px,24dvh,214px)}
  .page--work{--pad-b:clamp(90px,12.4dvh,144px)}
  .page-grid--work{gap:clamp(9px,1.3dvh,16px)}
}

/* --- 09-b PC：左右の余白をレールとして使う --- */
@media (min-width:1000px){
  :root{--rail-w:calc((100vw - var(--cw)) / 2)}

  .floating-entry{display:none}

  .frame-rail{
    position:fixed;
    z-index:20;
    top:0;
    bottom:0;
    width:var(--rail-w);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:26px;
    padding:40px 24px;
    pointer-events:none;
    color:var(--white);
  }
  .frame-rail--left{left:0}
  .frame-rail--right{right:0}

  .rail-logo{pointer-events:auto;width:min(210px,74%)}
  .rail-logo img{width:100%}
  .rail-logo span{
    display:block;
    margin-top:14px;
    text-align:center;
    font-family:var(--font-en);
    font-size:10px;
    letter-spacing:.22em;
    color:var(--yellow);
  }
  .rail-daikon{display:block;width:min(190px,64%)}
  .rail-daikon img{width:100%;height:auto}

  .rail-copy{position:relative;width:min(250px,80%);padding-top:20px}
  .rail-copy::before{content:"";position:absolute;top:0;left:0;width:40px;height:5px;border-radius:5px;background:var(--yellow)}
  .rail-copy-en{display:block;margin-bottom:14px;font-family:var(--font-en);font-size:10px;letter-spacing:.22em;color:var(--yellow)}
  .rail-copy p{margin:0;font-size:21px;line-height:1.7;font-weight:900;letter-spacing:-.01em}
  .rail-copy p em{background:linear-gradient(transparent 62%,#c40c81 62%,#c40c81 94%,transparent 94%);font-weight:900}
  .rail-copy-sub{display:block;margin-top:14px;font-size:12px;line-height:1.9;font-weight:700;color:#ffffffb8}

  .rail-progress{
    width:min(250px,80%);
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-en);
    font-size:10px;
    letter-spacing:.1em;
    color:#ffffff9c;
  }
  .rail-progress>div{flex:1;height:3px;border-radius:3px;background:#ffffff2b;overflow:hidden}
  .rail-progress i{display:block;height:3px;border-radius:3px;background:var(--yellow);width:25%;transition:width .45s var(--ease)}

  .rail-cta{
    pointer-events:auto;
    width:min(250px,80%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 26px;
  }
  .rail-cta span{display:grid;font-family:var(--font-en);font-size:22px;letter-spacing:.06em;line-height:1.05}
  .rail-cta small{font-family:var(--font-jp);font-size:11px;letter-spacing:.06em;color:var(--magenta)}
  .rail-cta b{font-size:22px;line-height:1}

  .rail-tool{position:absolute;width:92px}
  .rail-tool--box{top:14%;right:15%;--rot:7deg;rotate:7deg}
  .rail-tool--cable{bottom:13%;right:19%;--rot:-10deg;rotate:-10deg;width:84px}
}

/* レールの幅・高さが足りない画面では装飾から間引く */
@media (min-width:1000px) and (max-width:1300px){
  .rail-tool{display:none}
  .rail-daikon{width:min(140px,72%)}
  .rail-logo{width:min(190px,90%)}
  .rail-copy,.rail-progress,.rail-cta{width:min(210px,94%)}
  .rail-copy p{font-size:18px}
}
@media (min-width:1000px) and (max-height:780px){
  .frame-rail{gap:16px}
  .rail-daikon{display:none}
  .rail-copy{padding-top:14px}
  .rail-copy p{font-size:18px}
  .rail-copy-sub{margin-top:10px}
  .rail-cta{padding:13px 20px}
  .rail-tool{display:none}
}

/* ========== 10 prefers-reduced-motion ========== */
@media (prefers-reduced-motion:reduce){
  html:focus-within,.slider{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }
  .reveal,.pop-in,.fly,.step-l,.step-r,.band{opacity:1;transform:none}
  .fly,.step-l,.step-r{transform:rotate(var(--rot,0deg))}
  .page::after{display:none}
  .scroll-cue i{animation:none;opacity:.85}
  /* 流れる写真の帯は止め、代わりに手でスクロールできるようにする */
  .strip{overflow-x:auto;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip-track{animation:none!important;transform:none!important}
  .strip li[aria-hidden="true"]{display:none}
}

/* ========== 11 管理バー ========== */
/* 管理バー表示時：100dvh 基準のレイアウトがバーのぶんだけはみ出すのを防ぐ */
body.admin-bar{--wpab:32px}
@media screen and (max-width:782px){body.admin-bar{--wpab:46px}}
body.admin-bar .slider{height:calc(100dvh - var(--wpab))}
body.admin-bar .page{height:calc(100dvh - var(--wpab));min-height:calc(100dvh - var(--wpab))}
body.admin-bar .site-header,
body.admin-bar .menu{top:var(--wpab)}
body.admin-bar .page--scroll .deco{height:calc(100dvh - var(--wpab))}