:root{
  --pad:5cqw;        /* 左右（全セクション共通・逸脱するなら意図的に大きく） */
  --gap:8vh;         /* セクション上下 */
  /* 参考サイトに合わせて「大見出しは大きく／本文は細く」で強弱を2〜3倍に */
  --h1:clamp(34px,10cqw,68px);   /* 大見出し (Zen Kaku Black 900) */
  --h2:clamp(24px,7cqw,42px);    /* 中見出し (Zen Kaku Bold 700) */
  --tx:14px;         /* 本文 */
  --tx-lite:13px;    /* 密度が高い箇所の本文用 */
  --font-head:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --base:#E8E4E4;
  --accent:#E8301D;
  --ink:#333333;
}

/* 大見出し = Zen Kaku Gothic New Black。強弱の主役 */
h1,h2,.fv__cut b,.hook__head,.strength__head,.mind__q,.future__head,.support__head,.company__head,.info__head,.entry__head,.future__cut b,.system__big b,.mq__in span,.cut{
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:.005em;
}
/* 中見出し・強調文 = Zen Kaku Bold 700 */
.strength__lead,.system__lead,.hook__turn,.mind__cta,.mind__strong,.future__label,.support__label,.entry__lead,.terms b,.person__body b{
  font-family:var(--font-head);
  font-weight:700;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}


/* スワイプ本体：ここが唯一のスクロール領域
   container-type:inline-size で内側 CSS の vw 相当を cqw で扱えるようにする。
   モバイルは vw と cqw がほぼ同値、PC は #pages 幅（430px）基準になり、
   ビューポート幅ベースで文字が巨大化してカラムをはみ出す事故を防ぐ。 */
#pages{
  height:100svh;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  container-type:inline-size;
}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  background:var(--base);color:var(--ink);
  /* 和文の折り返し */
  line-break:strict;              /* 禁則を厳格に（小書き仮名・句読点を行頭に置かない） */
  word-break:normal;
  overflow-wrap:normal;
}
h1,h2,h3,p,dd,b,.terms b,.person__body b{
  text-wrap:pretty;               /* 最終行の泣き別れを減らす */
}
.hook__head,.strength__head,.future__head,.support__head,.mind__q,.info__head,.company__head{
  text-wrap:balance;              /* 見出しの行長を揃える */
}
p,dd,.strength__body,.future__body,.support__body,.mind__body p{
  word-break:auto-phrase;         /* 文節で折る（対応ブラウザのみ／非対応は上の設定で動作） */
}
section{position:relative;overflow:hidden}

/* スワイプ対象：1画面で切り替わるパネル */
/* すべてのセクションが1ページ。境界で必ず止まる */
section > *{position:relative;z-index:1}


/* 巨大な番号 */



/* 黒背景のページは multiply だと沈むので screen で乗せる */

section{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  height:100svh;              /* 1ページ＝ちょうど1画面 */
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
/* 中身は縮小の対象。はみ出す分だけ自動で縮む */
.fit{
  width:100%;
  padding:var(--gap) 0;
}
.fv .fit{
  padding:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-evenly;
  transform-origin:center center;
}
/* 中身が1画面を超えるページはページ内スクロールを許す（募集要項・エントリー） */
/* スクロール式のまま残すセクション（募集要項・エントリー・長文） */
.free{scroll-snap-align:none}
@media (min-width:900px){
  /* PCはSPビューをそのまま中央に置く。両サイドは煉瓦テクスチャで埋める。
     カラム幅は 500px（tamaki-lp と同等） */
  body{
    background:#efece5 url("images/bg.jpg") center center no-repeat fixed;
    background-size:cover;
  }
  #pages{
    width:500px;margin:0 auto;
    height:100svh;
    box-shadow:0 0 60px rgba(0,0,0,.28);
    overflow-x:visible;         /* リボンをウィングまで流すため x 側は解除 */
  }
  /* 各セクションも横方向の overflow を許可 */
  #pages section{overflow-x:visible}
  /* pc-side の位置指定を新しいカラム幅に合わせて再計算（250 = 500/2） */
  .pc-side-l{left:calc((50vw - 250px) / 2)}
  .pc-side-r{right:calc((50vw - 250px) / 2)}
  /* pgnav は右ウィングの中〜外側寄り。石壁背景でしっかり見えるようサイズと色を強化 */
  .pgnav{
    right:56px;gap:14px;
    color:var(--accent);
    filter:none;
  }
  .pgnav__cur,.pgnav__total{font-size:16px}
  .pgnav__dots{gap:10px}
  .pgnav__dots i{width:10px;height:10px;opacity:.55;background:var(--ink)}
  .pgnav__dots i.is-cur{opacity:1;transform:scale(1.6);background:var(--accent)}
  /* FV 左上の TSUSHIMA バッジは PC では既に左ウィングに社名縦組みがあるので非表示に
     （マーキーの「特待制度」と被る対策も兼ねる） */
  .fv__logo{display:none}
  }

/* --- PC ウィングの装飾（参考 tamaki-lp 型）---
   左帯：社名を縦組み、左ウィングの真ん中に配置。
   右帯：募集要項 / ENTRY を縦積み、右ウィングの真ん中に配置。
   left/right は各ウィング（(100vw-430px)/2 幅）のセンター位置＝(50vw±215px)/2。 */
.pc-side-l,.pc-side-r{display:none;position:fixed;z-index:40}
/* 左：社名を縦組み。左ウィングのど真ん中に配置。 */
.pc-side-l{
  top:50%;left:calc((50vw - 215px) / 2);
  transform:translate(-50%,-50%);
  writing-mode:vertical-rl;
  white-space:nowrap;
  font-size:38px;font-weight:900;letter-spacing:.22em;
  line-height:1;
  padding:36px 22px;
  background:var(--ink);color:var(--base);
  user-select:none;
}
/* 右：クイックリンク。右ウィングのど真ん中に配置。 */
.pc-side-r{
  top:50%;right:calc((50vw - 215px) / 2);
  transform:translate(50%,-50%);
  flex-direction:column;gap:12px;align-items:stretch;
}
.pc-side-r a{
  display:block;padding:22px 20px;min-width:220px;text-align:center;
  font-size:24px;font-weight:900;letter-spacing:.06em;text-decoration:none;
  white-space:nowrap;overflow:hidden;
  transition:transform .2s ease,background .2s ease;
}
.pc-side-r a:hover{transform:translateX(-4px)}
.pc-side-r .--accent{background:var(--accent);color:var(--base)}
.pc-side-r .--dark{background:var(--ink);color:var(--base)}
@media (min-width:900px){
  .pc-side-l{display:block}
  .pc-side-r{display:flex}
}
img{display:block;max-width:100%}


/* ---------- 共通 ---------- */
.sec__no{font-size:11px;font-weight:900;letter-spacing:.34em;padding:0 5cqw;margin-bottom:6px}
.sec__ttl{font-size:11px;font-weight:900;letter-spacing:.34em;padding:0 5cqw;margin-bottom:2.5vh;opacity:.55}

.mq{overflow:hidden}
.mq__in{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.mq__in span{font-weight:900;line-height:1.05;padding-right:.4em}

/* リボン：斜めに傾いた帯 */
.ribbon{position:relative;padding:8vh 0 var(--gap);overflow:visible}
.ribbon .mq{
  width:100vw;margin-left:calc(50% - 50vw);
  padding:16px 0;border-top:3px solid;border-bottom:3px solid;
}
.ribbon .mq:nth-child(1){transform:rotate(-2.5deg);position:relative;z-index:2}
.ribbon .mq:nth-child(2){transform:rotate(2deg);margin-top:-26px;position:relative;z-index:1}
.ribbon .mq__in span{font-size:7.2cqw;letter-spacing:.01em}

/* splitChars() は <br> 区切りで .ln > .lnin を作る。.ln を block にして
   1行=1ブロック化しないと、隣接する .ln が inline で連結し <br> の意味が消える。 */
.split .ln{display:block;overflow:hidden}
.split .lnin{
  display:block;white-space:inherit;
  transform:translateY(105%);
  transition:transform .78s cubic-bezier(.16,1,.3,1);
}
.split.in .lnin{transform:none}

/* --- 主見出しの塗り箱 ---
   行ごとに背景色付きの inline-block 風ボックス。幅は文字数ぶん。
   セクション背景に応じて色を切り替える（CSS 変数）。
   .split の .ln > .lnin 構造を壊さない：既存のスライドイン演出が
   そのまま「箱→中の文字が下からせり上がる」演出に化ける。 */
.hook, .mind, .entry{ --box-bg:var(--ink); --box-fg:var(--base) }
.fv, .strength, .system, .future, .support, .cta{ --box-bg:var(--base); --box-fg:var(--accent) }
.info--dark{ --box-bg:var(--base); --box-fg:var(--ink) }

/* 各行は block + width:max-content で必ずコンテンツぶんの幅に。
   親を block 保持（flex にすると子要素の width が縮んで折り返しが起こる） */
.boxed{ line-height:1.05 }
.boxed .ln{
  position:relative;             /* ::before の absolute 起点 */
  display:block;
  width:max-content;max-width:100%;
  padding:.18em .42em .16em;     /* 大文字でも窮屈にならない呼吸幅 */
  background:transparent;        /* 箱は ::before で描く */
  overflow:hidden;
  transform:none!important;      /* 既存 nth-of-type の translateX を無効化（箱は左端起点） */
  text-shadow:none;
}
/* 箱本体：左端から scaleX で伸びる（width アニメじゃなくレイアウトも走らない） */
.boxed .ln::before{
  content:"";
  position:absolute;inset:0;
  background:var(--box-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.76,0,.24,1);
  z-index:0;
}
/* 中の文字：最初は色を透明に。箱が伸びてから色が現れる */
.boxed .lnin{
  position:relative;z-index:1;
  color:transparent;
  transform:none!important;      /* split の translateY を止めて色フェードだけに */
  transition:color .3s ease .15s;
}
.boxed.in .ln::before{transform:scaleX(1)}
.boxed.in .lnin{color:var(--box-fg)}

/* 行ごとに階段状のインデントと 0.12s ずつのずれ */
.boxed .ln + .ln{ margin-top:-.08em;margin-left:1.2em }
.boxed .ln + .ln + .ln{ margin-left:2.4em }
.boxed .ln + .ln::before{ transition-delay:.12s }
.boxed .ln + .ln + .ln::before{ transition-delay:.24s }
.boxed.in .ln + .ln .lnin{ transition-delay:.27s }
.boxed.in .ln + .ln + .ln .lnin{ transition-delay:.39s }

.cut{font-weight:900;line-height:1.08;letter-spacing:-.005em;white-space:nowrap}
.px{overflow:hidden}
.px img{backface-visibility:hidden}
.person .px img{transform:scale(1.12)}

/* ---------- 動画（1枚目、独立ページ） ---------- */
.movie{background:var(--ink);padding:0}
/* 動画右上に焼き込まれた DeeVid ロゴを黒グラデで消す（動画ファイル差替時は消して OK） */
.movie::before{
  content:"";
  position:absolute;top:0;right:0;
  width:200px;height:60px;
  z-index:3;
  pointer-events:none;
}
/* .fit による自動縮小を無効化（動画は中身が全部 position:absolute なので
   基本的に .fit は空になるが、念のため縮小を強制的にオフ） */
.movie > .fit{transform:none!important;padding:0!important}
.movie video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.movie__foot{
  position:absolute;left:0;right:0;bottom:6vh;
  z-index:2;text-align:center;color:var(--base);
}
.movie__name{
  font-size:12px;font-weight:900;letter-spacing:.3em;
  margin-bottom:3vh;
}
.movie__swipe{
  font-size:11px;font-weight:900;letter-spacing:.34em;
}

/* ---------- FV：赤背景に白文字 ---------- */
.fv{background:var(--accent);color:var(--base)}
.fv__logo{position:absolute;top:0;left:0;z-index:3;background:var(--base);color:var(--accent);padding:12px 16px;font-weight:900;font-size:15px;letter-spacing:.05em}
.fv__movie{position:absolute;inset:0;z-index:0}
.fv__movie img{width:100%;height:100%;object-fit:cover;opacity:.16}
.fv>*:not(.fv__movie){position:relative;z-index:1}
.fv .mq--a span{font-size:14cqw}
.fv .mq--b span{font-size:8.5cqw;-webkit-text-stroke:1.5px var(--base);color:transparent}
.fv__cut{margin:0;padding-left:14cqw}
/* FV cut は「Sランク」「特待生、」「募集。」の3行に分割してすべて同じサイズ。
   3行に切ったので 14.5cqw まで全部揃えてもカラムに収まる。 */
.fv__cut b{display:block;font-size:clamp(46px,14.5cqw,110px);line-height:1.14}
.fv__cut.boxed .ln{padding:.02em 0;margin-top:-.06em}
/* 明確な階段：1行目=0 / 2行目=1em / 3行目=3em。塊として詰める */
.fv__cut.boxed .ln:nth-of-type(1){margin-left:0}
.fv__cut.boxed .ln:nth-of-type(2){margin-left:1em}
.fv__cut.boxed .ln:nth-of-type(3){margin-left:3em}
/* FV：白い箱を消して、赤地に直接白文字で見せる */
.fv__cut.boxed .ln::before{display:none}
/* スワイプで入った瞬間、拡大からドンッと定位置に落ちる（1行ずつ） */
.fv__cut.boxed .lnin{
  color:var(--base);
  opacity:0;
  transform:scale(1.45)!important;
  transition:opacity .18s ease-out, transform .42s cubic-bezier(.2,1.7,.35,1);
}
.fv__cut.boxed.in .lnin{
  opacity:1;
  transform:scale(1)!important;
}
/* 既存の nth-of-type によるランダム translateX を無効化（階段だけで組む） */
.fv__cut b:nth-of-type(1),
.fv__cut b:nth-of-type(2),
.fv__cut b:nth-of-type(3){transform:none}
.fv__lead{padding:0 5cqw;font-size:clamp(15px,4.4cqw,22px);font-weight:900;line-height:1.7;text-align:center}
.fv__swipe{position:relative;margin-top:1.5vh;text-align:center;font-size:11px;font-weight:900;letter-spacing:.34em;z-index:2}
.fv__swipe::after{content:"";display:block;width:22px;height:22px;margin:8px auto 0;border-left:2px solid var(--base);border-bottom:2px solid var(--base);transform:rotate(-45deg);animation:swipeDown 1.7s ease-in-out infinite}
@keyframes swipeDown{0%,100%{transform:rotate(-45deg) translate(0,0);opacity:.35}50%{transform:rotate(-45deg) translate(-5px,5px);opacity:1}}

/* ---------- 01 フック：白背景に赤文字 ---------- */
.hook{background:var(--base);color:var(--accent);padding-left:0;padding-right:0}
/* 上下いっぱいに要素を配分：見出し上・帯中央・締め下 */
.hook .fit{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5vh 0 12vh;gap:0;
}
/* 「冬は財布も凍えてない？」11文字が箱の中で2行に折れるのを防ぐため、
   var(--h1) より一段小さく取り、column 内に収まるサイズにする */
.hook__head{padding:0 5cqw 4vh;font-size:clamp(22px,7cqw,40px);font-weight:900;line-height:1.34}
/* 塗り箱を外して素の赤文字で見せる */
.hook__head.boxed .ln{padding:0}
.hook__head.boxed .ln::before{display:none}
.hook__head.boxed.in .lnin{color:var(--accent)}
.band{
  display:block;padding:15px 5cqw;white-space:nowrap;will-change:transform;
  font-size:clamp(13px,3.6cqw,22px);font-weight:900;line-height:1.35;
}
.band:nth-of-type(odd){background:var(--accent);color:var(--base)}
.band:nth-of-type(even){background:var(--ink);color:var(--base)}
/* 各帯を独立させる：間に余白を入れてバランスを取る */
.hook .band + .band{margin-top:2.2vh}
/* 2本目「板金職人なのに、冬だけ全く別の仕事をしている」は文字だけ少し右へ */
.hook .band:nth-of-type(2){text-indent:2em}
/* フックの締め：2行構成。塗り箱なし、サイズと太さの差だけで強弱。
   ブロック全体を中央に置き、内側は左揃え（各行の頭が揃う） */
.hook__turn{padding:7vh 5cqw 0;font-size:clamp(10px,2.7cqw,16px);font-weight:700;line-height:1.4;color:var(--accent);text-align:center}
.hook__turn-inner{display:inline-block;text-align:left}
.hook__turn-ln{display:block;white-space:nowrap;line-height:1.1;margin-bottom:.6em}
.hook__turn .lg{font-weight:900;font-size:2.3em;letter-spacing:-.01em}
.hook__turn .sm{font-weight:700;font-size:1em}
/* 「市場価値を上げる」だけ黒文字＋一段大きく強調 */
.hook__turn .lg.ink{color:var(--ink);font-size:3.1em}

/* ---------- 02 会社の特徴：赤背景に白文字＋白黒写真 ---------- */
.strength{background:var(--accent);color:var(--base);padding-left:0;padding-right:0}
/* 内容配置：上から head→body→lead、terms は最下段に固定、
   その間の余白に写真を絶対配置。段組みで物理的に重ならない。 */
.strength .fit{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:4vh 0 0;
}
.strength .terms{margin-top:auto}   /* terms を .fit の最下段へ押す */
.strength__photo{
  position:absolute;
  right:0;top:48vh;
  width:78%;height:33vh;
  z-index:0;pointer-events:none;
}
.strength__photo img{width:100%;height:100%;object-fit:contain;object-position:right top;filter:grayscale(1) contrast(1.1)}
/* 見出しは塗り箱なし・サイズと太さの差で強弱。ブロックを中央に置き内側は左揃え */
.strength__head{padding:0 5cqw 1.5vh;font-size:clamp(11px,3cqw,17px);font-weight:500;line-height:1.3;color:var(--base);text-align:center}
.strength__head-inner{display:inline-block;text-align:left}
.strength__head-ln{display:block;white-space:nowrap;line-height:1.1;margin-bottom:.5em}
.strength__head .lg{font-weight:900;font-size:2.3em;letter-spacing:-.01em}
.strength__head .sm{font-weight:500;font-size:1em}
.strength__body{padding:0 5cqw 1.5vh;font-size:clamp(15px,4.2cqw,19px);font-weight:500;line-height:1.85;max-width:36em;position:relative;z-index:1}
/* 「社員が成長するための期間」だけ強調：太＋一段大きく */
.strength__body b{font-weight:900;font-size:1.35em;line-height:1.25;display:inline-block}
.strength__lead{padding:5vh 5cqw 1.5vh;font-size:clamp(16px,4.5cqw,20px);font-weight:900;position:relative;z-index:1}
.terms>div{padding:1.6vh 5cqw}
.terms>div:first-child{background:var(--ink);color:var(--base)}
.terms>div:last-child{background:var(--base);color:var(--accent)}
.terms small{font-size:11px;font-weight:900;letter-spacing:.16em;margin-bottom:14px;display:block}
.terms b{font-size:clamp(17px,4.6cqw,26px);font-weight:900;line-height:1.38}

/* ---------- 03 制度の名称：赤背景に白文字＋リボン ---------- */
.system{background:var(--accent);color:var(--base);padding-left:0;padding-right:0}
/* 見出しリード：3行構成・塗り箱なし・サイズと太さの差で強弱・全体センター */
.system__lead{padding:0 5cqw 3vh;font-size:clamp(11px,3cqw,17px);font-weight:500;line-height:1.4;color:var(--base);text-align:center}
.system__lead-inner{display:inline-block;text-align:left}
.system__lead-ln{display:block;white-space:nowrap;line-height:1.15;margin-bottom:.5em}
.system__lead .sm{font-weight:500;font-size:1em}
.system__lead .lg{font-weight:900;font-size:2.3em;letter-spacing:-.01em}
.system__note{padding:0 5cqw 8vh;font-size:var(--tx);font-weight:500;line-height:1.85}
/* システムのビッグコピー：中央寄せブロック内は左揃え */
.system__big{padding:0 5cqw;margin-bottom:2vh;text-align:center}
.system__big-inner{display:inline-block;text-align:left}
.system__big-ln{display:block;white-space:nowrap;line-height:1.1}
.system__big-ln + .system__big-ln{margin-top:.6em}
.system__big .sm{font-size:clamp(11px,3cqw,17px);font-weight:500;letter-spacing:.05em}
.system__big .xl{font-size:clamp(38px,12cqw,88px);font-weight:900;letter-spacing:-.01em;color:var(--base)}
.system .ribbon .mq{background:var(--base);border-color:var(--ink)}
.system .ribbon .mq__in span{color:var(--accent)}
.system .ribbon .mq:nth-child(2){background:var(--ink)}
.system .ribbon .mq:nth-child(2) .mq__in span{color:var(--base)}

/* ---------- 04 会社の思い：白背景に赤文字 ---------- */
.mind{background:var(--base);color:var(--accent);padding-left:0;padding-right:0}
/* 上端は詰めて、中身を縦に広げる */
.mind .fit{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0 0 .6vh;gap:.2vh;
}
.mind__q{padding:0 5cqw;margin:.2vh 0 0;font-size:clamp(20px,5.2cqw,26px);font-weight:900;line-height:1.2;color:var(--accent);text-align:center}
/* 赤い左線の箱（p.inline-block）は左端に揃える。text-align:center だと
   各pが内容幅ごとに個別に中央寄せされて左端がバラつくため。 */
.mind__body{padding:0 5cqw;text-align:left}
/* 本文（小）：14px 固定・ブロックを中央に置き内側は左揃え。
   デフォルトは塗り箱なし、左の縦線のみ */
.mind__body p{
  display:inline-block;text-align:left;
  font-size:12px;font-weight:500;line-height:1.5;max-width:100%;margin:0;
  color:var(--accent);
  padding:3px 0 3px 8px;
  border-left:3px solid var(--accent);
  background:transparent;
}
/* 主役のブロックだけ薄い赤の塗り箱を残す */
.mind__body--boxed p{
  padding:6px 8px;
  background:rgba(232,48,29,.06);
}
/* 一部の本文を #333 にして色に変化 */
.mind__body p .dim{color:#333333}
/* iOS Safari は word-break:auto-phrase を無視して字単位で折るため、
   単語途中で切れると困る動詞句を明示的に nowrap 塊にする */
.mind__body p .nb{white-space:nowrap}
/* 中強調：立派な一人前の職人 → 20px・黒（赤地から浮かせる） */
.mind__body p b.mid{
  font-size:20px;font-weight:900;color:var(--ink);
  line-height:1.1;
  display:inline-block;vertical-align:baseline;
  padding:0 .05em;
}
/* 大＋黒箱：内容幅・階段状（2行目のみ右にずらす）。塊全体の左端は他要素と揃える */
.mind__hero{
  margin:.2vh 0;padding:0 5cqw;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;
}
.mind__hero-ln{
  display:inline-block;
  padding:.15em .38em;
  background:var(--ink);color:var(--base);
  font-family:var(--font-head);
  font-size:25px;font-weight:900;line-height:1.02;letter-spacing:-.03em;
  white-space:nowrap;
  position:relative;
}
.mind__hero-ln--a{z-index:1}
.mind__hero-ln--b{margin-left:2em;margin-top:-.12em;z-index:2}
/* 特大 引用：主役・黒の塗り箱に白抜き・階段状に段違い（Heroより大きく）。
   塊全体の左端は他要素と揃え、階段は2行目以降で表現 */
.mind__quote{
  margin:.3vh 0;padding:0 5cqw;
  text-align:left;
  color:var(--base);
}
.mind__quote-stack{
  display:inline-flex;flex-direction:column;align-items:flex-start;
}
.mind__quote-ln{
  display:inline-block;
  padding:.16em .42em;
  background:var(--ink);color:var(--base);
  font-family:var(--font-head);
  font-size:clamp(24px,7.6cqw,34px);font-weight:900;line-height:1.04;letter-spacing:-.03em;
  white-space:nowrap;position:relative;
}
.mind__quote-ln--a{z-index:1}
.mind__quote-ln--b{margin-left:2em;margin-top:-.14em;z-index:2}   /* 階段を深く（横長印象） */
.mind__quote-ln--c{margin-left:4em;margin-top:-.14em;z-index:3}
/* MIND ページの動きを大きく：距離を伸ばして印象づける（時間は短めに） */
.mind [data-slidein]{
  transform:translateY(50px) scale(.94);opacity:0;
  transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  transition-delay:0s;
}
.mind [data-slidein].in{transform:none;opacity:1}
/* 締めの本文（塗り箱なし＝mind__body--boxed ではない .mind__body 内の p）は
   遅延ゼロで即入りにする */
.mind__body:not(.mind__body--boxed) > p[data-slidein]{transition-delay:0s!important}

/* ---------- 05 将来の展望：塗り箱と文字サイズで見せる ---------- */
.future{background:var(--accent);color:var(--base);padding-left:0;padding-right:0}
/* 上下いっぱいに要素を均等配分。空きは全て要素間ギャップに振る */
.future .fit{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.3vh 0 1.5vh;gap:0;
}
.future__label{padding:0 5cqw 0 10cqw;margin:.4vh 0 1.2vh;font-size:14px;font-weight:900;letter-spacing:.02em}

/* 小：14px。導入行と本文3行 */
.future__sm{padding:0 5cqw 0 10cqw;font-size:14px;font-weight:400;line-height:1.7;letter-spacing:.02em;color:var(--base)}
.future__sm + .future__sm{margin-top:.15em}

/* 中：20px。「塗装・左官・鳶・その他建築技能」だけ強調（塗り箱なし・太字＋色で見せる） */
.future__mid{
  font-family:var(--font-head);
  font-size:20px;font-weight:900;line-height:1.35;letter-spacing:.02em;
  color:var(--ink);
  padding:0;
  background:transparent;
  vertical-align:baseline;
}

/* 主役の特大：板金だけで終わらない。 = ページの主役。
   赤地に沈まないよう、黒箱＋白文字でアクセントにする */
.future__big{
  display:block;
  width:max-content;max-width:calc(100% - 10cqw);
  margin-left:10cqw;
  padding:.08em .3em .06em;
  background:var(--ink);color:var(--base);
  font-family:var(--font-head);
  font-size:clamp(28px,8.4cqw,36px);
  font-weight:900;
  line-height:1.1;letter-spacing:-.005em;
  white-space:nowrap;
}
/* 締めの3行はさらに一段小さく（20%減） */
.future__tail .future__big{font-size:clamp(20px,6cqw,26px)}
/* 特大が連続する2/3行目は左からのマージンで階段状にずらす */
.future__big + .future__big{margin-top:-.04em;margin-left:calc(10cqw + 2em)}
.future__big + .future__big + .future__big{margin-top:-.04em;margin-left:calc(10cqw + 4em)}

/* 見出しブロック（intro小 + 板金だけで終わらない。） */
.future__head{margin-bottom:1vh}
.future__head .future__sm{margin-bottom:.4vh}

/* 本文カード：もっとコンパクト＋薄く。行間も詰め */
.future__body{
  margin:0 5cqw .8vh 10cqw;
  padding:.35em .8em .35em;
  background:rgba(0,0,0,.035);
  border-left:5px solid var(--base);
  max-width:36em;
}
.future__body .future__sm{padding:0;line-height:1.55}

/* 箇条書き枠：小見出し＋◆項目＋区切り線 */
.future__list{
  padding:.6em .9em .5em;
  background:rgba(0,0,0,.16);
  border-left:5px solid var(--base);
}
.future__list-head{
  font-family:var(--font-head);
  font-size:12px;font-weight:900;letter-spacing:.15em;
  color:var(--base);opacity:.72;
  margin:0 0 .4em;
  padding:0;
}
.future__list-items{
  list-style:none;padding:0;margin:0;
}
.future__list-items li{
  position:relative;
  padding:.35em 0 .35em 1.4em;
  font-size:14px;font-weight:500;line-height:1.55;
  color:var(--base);
  border-top:1px solid rgba(255,255,255,.14);
}
.future__list-items li:first-child{border-top:none;padding-top:.15em}
.future__list-items li:last-child{padding-bottom:.15em}
.future__list-items li::before{
  content:"◆";
  position:absolute;left:0;top:.35em;
  color:var(--base);opacity:.9;
  font-size:.9em;
}

/* 締めブロック（一芸の職人から〜） */
.future__tail{margin-top:.3vh}

/* ---------- 06 会社からのサポート：赤背景に黒文字 ----------
   原稿の改行を厳守するため、行単位の <span class="s-line"> で並べる。
   タグチップ（keywords）は既存の階段配置＋rotate を維持したまま延命。 */
.support{background:var(--accent);color:var(--ink);padding-left:0;padding-right:0}
/* 上端から下端まで均等に配分。5グループ間の余白は space-between に任せる。 */
.support .fit{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3vh 0 3vh;gap:0;
}
/* セクション番号とラベルはひとかたまり、他4グループと同格で並ぶ。
   .support__top は sec__no / sec__ttl が自前で 5cqw padding を持つので何もしない。 */
.support__top{padding:0}
.support__hero{padding:0 5cqw 0 10cqw}
.support__keys{display:flex;flex-direction:column;align-items:flex-start;padding:0 5cqw 0 10cqw}
.support__label{margin:0 0 1.2vh;font-size:16px;font-weight:900;letter-spacing:.05em}
.support__head,.support__body{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 5cqw 0 10cqw;margin:0;
}
.support__hero .support__head{padding:0}
.support__body{color:var(--base)}
.support__body .s-line + .s-line{margin-top:.35em}

/* 行の基本：inline-block で幅は文字ぶんだけ、原稿の改行がそのまま出る */
.s-line{
  display:inline-block;
  font-family:var(--font-head);font-weight:900;line-height:1.15;
  letter-spacing:.005em;
}
.s-sm{font-size:17px;line-height:1.45}
.s-md{font-size:22px;line-height:1.2;white-space:nowrap}
/* 主役。文字数ぶんで1行に収まるサイズに */
.s-xl{font-size:36px;line-height:1.02;letter-spacing:-.03em;white-space:nowrap}
.support__body .s-line{font-weight:500;font-size:16px;line-height:1.7}

/* 塗り箱：padding は em で文字サイズに追従、行同士をわずかに縦に重ねる */
.s-box{padding:.2em .5em;background:var(--ink);color:var(--base)}
/* 白の塗り箱：主役用（赤地の上に置く） */
.s-box-white{padding:.2em .5em;background:var(--base);color:var(--accent)}
.s-box + .s-box{margin-top:-.14em}
.s-shift{margin-left:1.1em}
.s-md.s-shift{margin-left:.4em}
/* 主役はカラム幅ギリギリ。s-shift の余白を消して右端にゆとりを作る。 */
.s-xl.s-shift{margin-left:0}

/* 「建設業で、」と「資格の多さは武器の多さ。」を1文として詰める */
.support__key--inline{gap:.15em 0}
.support__key--inline .s-sm{margin-bottom:.1em}
.support__key--inline .s-md.s-shift{margin-left:.4em}

/* 行ごとフェード（0.08s ずつ）＋「武器の多い職人へ。」だけ 0.25s 溜め */
.support .support__head [data-slidein]{transition-delay:0s}
.support .support__head [data-slidein]:nth-of-type(2){transition-delay:.33s}
.support .support__key [data-slidein]{transition-delay:0s}
.support .support__key [data-slidein]:nth-of-type(2){transition-delay:.08s}
.support .support__body [data-slidein]{transition-delay:0s}
.support .support__body [data-slidein]:nth-of-type(2){transition-delay:.08s}
/* 文字だけのページ（03/04/06）のキー段落は現場サイン板っぽい枠カードに。
   左に太いアクセント帯＋薄い塗り。スクロールで下から立ち上がる。
   共通の見た目とアニメを [data-slidein] にまとめる。 */
[data-slidein]{
  transform:translateY(22px);opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease;
}
[data-slidein].in{transform:none;opacity:1}
[data-slidein]:nth-of-type(2){transition-delay:.12s}
[data-slidein]:nth-of-type(3){transition-delay:.24s}
/* STRENGTHページの文字は動きを大きめに（距離アップ＋ゆっくり） */
.strength [data-slidein]{transform:translateY(60px);opacity:0;transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.strength [data-slidein].in{transform:none;opacity:1}
.strength .strength__body[data-slidein]{transition-delay:.18s}
.strength .strength__lead[data-slidein]{transition-delay:.36s}
/* 方向指定：左からスライドイン（少しゆっくり） */
[data-slidein="left"]{transform:translateX(-100%)!important;opacity:0;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity 1s ease;transition-delay:0s!important}
[data-slidein="left"].in{transform:none!important;opacity:1}
/* 方向指定：右からスライドイン（少しゆっくり・左と同時に始まる） */
[data-slidein="right"]{transform:translateX(100%)!important;opacity:0;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity 1s ease;transition-delay:0s!important}
[data-slidein="right"].in{transform:none!important;opacity:1}
/* terms は水平スライドの飛び出しを抑える */
.terms{overflow:hidden}

/* 06 support のキー段落：行単位で塗り箱を積む。.support__keys で括るので
   自前の縦マージンは持たない（外側の space-between に任せる）。 */
.support__key{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0;margin:0;
}
.support__key + .support__key{margin-top:1.6vh}
/* サポートのキーワード枠は赤地に馴染むよう白ベース・少し右寄せ */
.support .keywords{margin:0;padding-left:10cqw;padding-right:5cqw;align-items:flex-start}
.support .keywords span{color:var(--base);border-color:var(--base)}

/* future のキーワードも少し右寄せ */
.future .keywords{padding-left:10cqw;padding-right:5cqw;align-items:flex-start;margin:0 0 1vh}

/* 04 mind の本文パラグラフ：赤帯 + 薄赤塗り（白背景ページに合わせる） */
.mind__body p{
  padding:14px 16px;
  border-left:5px solid var(--accent);
  background:rgba(232,48,29,.045);
}

/* 03 system の補足コピー：白帯 + 薄インク（赤背景ページに合わせる） */
.system__note{
  margin:0 5cqw 5vh;padding:14px 16px;
  background:rgba(0,0,0,.14);
  border-left:5px solid var(--base);
}

/* --- キーワードの白抜き箱：短い単語を枠線だけの箱に、
   縦に3つ並べて左端を階段状にずらす。下から浮き上がる。
   currentColor 継承なので各ページの文字色に馴染む。 */
.keywords{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 5cqw;margin:0 0 3vh;
}
.keywords span{
  display:inline-block;
  padding:8px 20px;
  border:2px solid currentColor;
  font-size:clamp(17px,4.8cqw,24px);
  font-weight:900;letter-spacing:.05em;
  background:transparent;
  transform:translateY(16px);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease;
}
.keywords span + span{margin-top:4px}
.keywords span:nth-child(2){margin-left:1.6em}
.keywords span:nth-child(3){margin-left:3.2em}
.keywords.in span{transform:none;opacity:1}
.keywords.in span:nth-child(2){transition-delay:.08s}
.keywords.in span:nth-child(3){transition-delay:.16s}

/* ---------- 求める人物像：人物写真＋漢字の縦組み ---------- */
.person{background:var(--ink);justify-content:flex-end}
/* 重なり順: 写真(0) → シャドウ(1) → テキスト全部(2)
   ※ autoFit() が .fit に transform:scale を掛けると .fit が
   スタッキングコンテキストになり、painting order で ::after (z:1) が
   .fit 内テキストの前面に来てしまうため、.fit を明示的に z:2 に上げる。 */
.person > .fit{position:relative;z-index:2}
.person .px{position:absolute;inset:0;z-index:0}
.person img{width:100%;height:100%;object-fit:cover;opacity:.72}
.person::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(transparent,rgba(0,0,0,.78) 55%,rgba(0,0,0,.92));z-index:1;pointer-events:none}
/* 「Sランク特待生になれる人」は左上に縦組みで白文字（塗りなし） */
.person__sub{
  position:absolute;top:5vh;left:var(--pad);z-index:2;
  writing-mode:vertical-rl;
  font-size:18px;font-weight:900;letter-spacing:.22em;
  color:var(--base);opacity:.9;
}
.person__kanji{
  position:absolute;top:16vh;right:6cqw;z-index:2;
  writing-mode:vertical-rl;
  font-size:clamp(46px,13cqw,86px);font-weight:900;line-height:1.02;letter-spacing:.03em;
  color:var(--base);
}
.person__eng{
  position:absolute;bottom:8vh;left:var(--pad);z-index:2;
  font-size:11px;font-weight:900;letter-spacing:.34em;
  color:var(--base);opacity:.65;
}
/* 2枚目の persona は縦組みを左に反転（バリエーション） */
.person + .person .person__kanji{
  left:6cqw;right:auto;
  writing-mode:vertical-lr;
}
.person + .person .person__eng{
  left:auto;right:5cqw;
}
.person__body{position:relative;z-index:2;padding:0 var(--pad) 8vh;color:var(--base)}
.person__body small{display:inline-block;margin-bottom:14px;padding:5px 12px;background:var(--accent);color:var(--base);font-size:11px;font-weight:900;letter-spacing:.18em}
/* 大見出し（2行）: 参考サイトの文字インパクト重視。本文の3倍近い存在感 */
.person__big{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(44px,15cqw,110px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.005em;
  margin-bottom:.2em;
  color:var(--base);opacity:.85;
}
/* 前後の補足（同じ段落の一部として認識できる距離感で） */
.person__intro,.person__tail{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(18px,5cqw,28px);
  font-weight:700;
  line-height:1.3;
  margin-top:.35em;
  color:var(--base);opacity:.7;
}
.person__intro{margin-top:0;margin-bottom:.35em}
/* 8cqw だと「ここから強くなりたい人。」が 12 文字で 430px カラムを超えて
   "い人。" が最終行に孤立する。7.4cqw まで詰めて 2 行に収める。 */
.person__body b{display:block;line-height:1.3}

/* ---------- 会社概要：BBQ写真 ---------- */
.company{background:var(--base);padding-left:0;padding-right:0}
.company__head{padding:0 5cqw 4vh;font-size:var(--h1);font-weight:900}
.company__visual{position:relative;margin:0 5cqw 3vh;line-height:0;overflow:hidden;max-height:44vh}
/* iOS Safari 対策：親が transform:scale される中で aspect-ratio + object-fit の
   高さ計算が崩れて img が 0 高さになる事故があるため、padding-bottom ハックで
   幅から確実に高さを取り、img は絶対配置で親を必ず埋める。 */
.company__visual .px{
  position:relative;
  width:100%;
  padding-bottom:75%;    /* 4:3 = 高さは幅の 75% */
  min-height:180px;      /* iOS で padding-bottom が効かない事故のフォールバック */
  overflow:hidden;
  background:#222;       /* 画像が届かない時のフォールバック（薄めの黒枠） */
}
.company__visual .px img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.company__cap{
  position:absolute;left:0;bottom:0;right:0;z-index:2;
  padding:16px 18px;line-height:1.3;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  text-align:right;
}
.company__cap small{
  display:inline-block;margin-bottom:8px;padding:4px 10px;
  background:var(--accent);color:var(--base);
  font-size:10px;font-weight:900;letter-spacing:.2em;
}
.company__cap b{display:block;color:var(--base);font-size:clamp(20px,5.6cqw,32px);font-weight:900;line-height:1.3}

/* ---------- 情報表 ---------- */
.info{background:var(--base);padding-left:0;padding-right:0}
.info--dark{background:var(--ink);color:var(--base)}
.guideline .info__head{padding-bottom:2vh}
.guideline .fit{padding:calc(var(--gap) * .5) 0}
.info__head{padding:0 5cqw 4vh;font-size:var(--h1);font-weight:900;line-height:1.25}
dl{padding:0 5cqw}
dl div{
  display:grid;grid-template-columns:23cqw 1fr;gap:10px;padding:9px 0;
  border-top:2px solid currentColor;opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
dl.in div{opacity:1;transform:none}
dl div:last-child{border-bottom:2px solid currentColor}
dt{font-size:12px;font-weight:900;letter-spacing:.06em;padding-top:2px}
dd{font-size:14px;font-weight:700;line-height:1.7}
dd ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:10px;row-gap:1px;
}
dd ul.wide{grid-template-columns:1fr;row-gap:0}
dd li{position:relative;padding-left:.9em;line-height:1.6}
dd li::before{content:"・";position:absolute;left:0}

/* ---------- クロージング：人物図＋CSSテキスト＋ボタン ----------
   以前は cta-full.png で全て焼き込んでいたが、見出しの書体変更に
   対応するため図と文字を分離。人物は cta-figure.png（透過PNG）を
   右寄せ、文字は Zen Kaku Gothic New で組む。 */
.cta{
  background:var(--accent);
  padding:0;position:relative;overflow:hidden;
}
.cta .fit{min-height:100svh;padding:0;display:block}
/* 人物：フル高で下揃え、右側に配置。腕を切らないため object-fit:contain。
   right:-15% で右にはみ出させ、人物の顔位置を右寄りに。 */
.cta__figure{
  position:absolute;
  right:-15%;bottom:0;
  height:100svh;width:auto;
  z-index:1;
  user-select:none;pointer-events:none;
  object-fit:contain;object-position:right bottom;
}
/* テキストは左列。人物の暗い服の上でも白アウトラインで読める設計。
   人物が下78svhに収まるので、テキストを上に寄せて確実に被らないよう配置。 */
.cta__lead{
  position:absolute;
  left:5cqw;top:18%;
  z-index:2;
  max-width:92%;
  font-family:var(--font-head);
  font-weight:900;
  color:var(--base);
  font-size:clamp(12px,3.6cqw,17px);
  line-height:1.4;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.cta__hero{
  position:absolute;
  left:5cqw;top:40%;
  z-index:2;
  max-width:70%;
  font-family:var(--font-head);
  font-weight:900;
  color:var(--ink);
  -webkit-text-stroke:1.4px var(--base);
  paint-order:stroke fill;
  font-size:clamp(20px,6cqw,31px);
  line-height:1.05;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.cta__btn{
  position:absolute;
  left:5cqw;top:70%;
  z-index:2;
  padding:16px 16px 16px 28px;
  background:var(--base);color:var(--ink);
  font-family:var(--font-head);font-weight:900;
  font-size:16px;letter-spacing:.12em;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.7em;
  transform:skewX(-14deg);                        /* 強めの傾斜で硬派に */
  box-shadow:                                     /* 2段重ねの影で立体感 */
    7px 7px 0 var(--ink),
    14px 14px 0 rgba(51,51,51,.25);
  transition:transform .22s cubic-bezier(.2,1,.3,1), box-shadow .22s ease;
  -webkit-tap-highlight-color:rgba(0,0,0,.08);
}
.cta__btn > *{display:inline-block;transform:skewX(14deg)}   /* 中身は正立に戻す */
/* 矢印は黒の小箱に反転させて視線誘導 */
.cta__btn span{
  font-size:1.15em;line-height:1;font-weight:900;
  padding:.28em .5em .22em;
  background:var(--ink);color:var(--base);
  margin-left:.2em;
}
.cta__btn:hover{
  transform:skewX(-14deg) translate(-4px,-4px);
  box-shadow:
    11px 11px 0 var(--ink),
    20px 20px 0 rgba(51,51,51,.22);
}
.cta__btn:active{
  transform:skewX(-14deg) translate(2px,2px);
  box-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 rgba(51,51,51,.2);
}
.cta__btn:focus-visible{outline:3px solid var(--ink);outline-offset:5px}

/* CTA モバイル：人物を大きく／白文字を確実に2行に。 */
@media (max-width:768px){
  .cta__figure{
    transform:scale(1.12);
    transform-origin:right bottom;
  }
  .cta__lead{
    font-size:clamp(11px,3.3cqw,15px);
    letter-spacing:-.02em;
  }
}


/* ---------- エントリー ---------- */
/* エントリーもスナップ点にする（無いと mandatory スナップで CTA に戻され進めない） */
.entry{scroll-snap-align:start;background:var(--base);padding-left:0;padding-right:0}
.entry__head{padding:0 5cqw 4vh;font-size:var(--h1);font-weight:900}
.copy{margin-top:5vh;font-size:11px;font-weight:700;opacity:.45;text-align:center}
.entry__note{padding:0 5cqw 4vh;font-size:12px;font-weight:700;opacity:.6}
.form{padding:0 5cqw}
.form label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:7px}
.req{background:var(--accent);color:var(--base);font-size:9px;padding:2px 6px;letter-spacing:.1em}
.form input::placeholder,.form textarea::placeholder{color:rgba(51,51,51,.35);font-weight:700}
.form input,.form textarea{
  width:100%;padding:13px 13px;margin-bottom:16px;border:2px solid var(--ink);
  background:transparent;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);
  transition:border-color .3s ease,background .3s ease;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:rgba(232,48,29,.05)}
.form textarea{min-height:92px;resize:vertical}
.form button{
  width:100%;padding:20px;border:none;position:relative;overflow:hidden;
  background:var(--accent);color:var(--base);font-family:inherit;
  font-size:19px;font-weight:900;letter-spacing:.08em;cursor:pointer;
}
.form button::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .4s cubic-bezier(.76,0,.24,1)}
.form button:active::before{transform:translateY(0)}
.form button span{position:relative;z-index:2}



/* --- 赤ベールが引いて写真が現れる --- */
.veil::before{
  content:"";position:absolute;inset:0;z-index:2;background:var(--accent);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}
.veil.in::before{transform:scaleY(0)}

/* --- 溶接：光が走って火花が散る --- */
.weld{position:relative}
.weld::after{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  pointer-events:none;
}
.weld.in::after{animation:weldSweep 1.1s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes weldSweep{to{left:115%}}
.spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#FFD9A0;box-shadow:0 0 6px 2px rgba(255,170,60,.9);
  opacity:0;pointer-events:none;
}
.weld.in .spark{animation:sparkFly .9s ease-out both}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}

/* --- カウントアップ --- */
.count{font-variant-numeric:tabular-nums}

/* --- 無骨なあしらい：セクション番号の巨大ウォーターマーク（吉田氏指摘#12）---
   sec__no の数字（01/02/…）を section 全体の右下に巨大表示。
   currentColor を使い各セクションのテキスト色に馴染ませ、opacity で
   デコレーション化。z-index:0 で本文の下に沈める。data-num は boot() で
   sec__no から自動転写。 */
section[data-num]::before{
  content:attr(data-num);
  position:absolute;
  right:-.02em;bottom:-.04em;
  font-size:46cqw;font-weight:900;line-height:.82;
  letter-spacing:-.055em;
  color:currentColor;opacity:.055;
  pointer-events:none;z-index:0;
  font-variant-numeric:tabular-nums;
}

/* --- ページ位置インジケータ（吉田氏指摘#11）---
   全ページを right:12px に固定表示。ドット＋現在番号／総数。
   セクションの背景色（赤・白・黒）が入れ替わる LP なので、
   drop-shadow で縁取りして単色でも読めるようにしている。 */
.pgnav{
  position:fixed;top:50%;right:12px;transform:translateY(-50%);
  z-index:50;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#fff;font-weight:900;letter-spacing:.1em;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.4));
}
.pgnav__cur,.pgnav__total{font-size:9px;font-variant-numeric:tabular-nums}
.pgnav__total{opacity:.55}
.pgnav__dots{display:flex;flex-direction:column;gap:5px}
.pgnav__dots i{
  display:block;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.45;
  transition:opacity .35s ease,transform .35s ease;
}
.pgnav__dots i.is-cur{opacity:1;transform:scale(1.4)}
/* CTA など 1 枚絵セクションで完全に隠す（!important で他の CSS を確実に上書き） */
.pgnav.is-hidden{display:none!important}
@media (min-width:900px){
  /* 旧 430 カラムの計算は削除（新しいカラム幅用の指定はメインの PC 用メディアクエリで実施） */
}

/* PC 用の pgnav 上書き（基本ルールが後に来ているとカスケードで上書きされるため
   ここで再度書き直して確実に効かせる） */
@media (min-width:900px){
  .pgnav{
    right:56px;gap:14px;
    color:var(--accent);
    filter:none;
  }
  .pgnav__cur,.pgnav__total{font-size:16px;opacity:1}
  .pgnav__total{opacity:.7}
  .pgnav__dots{gap:10px}
  .pgnav__dots i{width:10px;height:10px;opacity:.55;background:var(--ink)}
  .pgnav__dots i.is-cur{opacity:1;transform:scale(1.6);background:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  .veil::before{display:none}
  .weld::after,.spark{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .split .lnin{transform:none}
  dl div{opacity:1;transform:none}
  .px img{transform:none}
}


/* ========================================
   SP上部 募集要項・ENTRYボタン
======================================== */

.sp-top-buttons {
  display: none;
}

@media (max-width: 899px) {

  .sp-top-buttons {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;
	  
	opacity: 0;
	visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
  }
	
	.sp-top-buttons.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
	

  .sp-top-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 38px;

    border-radius: 7px;

    color: #fff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 900;
    line-height: 1;

    -webkit-tap-highlight-color: transparent;
  }

  /* 募集要項 */
  .sp-top-buttons__guideline {
    background: #E9311D;
    box-shadow: 0 5px 0 #A82215;
  }

  /* ENTRY */
  .sp-top-buttons__entry {
    background: #333333;
    box-shadow: 0 5px 0 #111111;
  }

  /* 押した時 */
  .sp-top-buttons a:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  }
}