@charset "UTF-8";
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===== Design widths ===== */
/* ===== Color tokens ===== */
/* ===== Font families ===== */
/* ===== Font weights ===== */
/* ===== z-index ===== */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===== px → vw 変換関数 =====
 * - PC基準（1920px）: vw-pc(24) → 24/1920*100vw
 * - SP基準（375px）:  vw-sp(20) → 20/375*100vw
 */
/* ===== 流動フォントサイズ =====
 * 文字サイズの最大はPCデザイン値、最小は16px。
 * 画面幅 768px以上はPCデザイン基準で線形、それ以下はSPデザイン基準で線形にスケール。
 *
 * @include font-fluid(24);          // PC=24px,  SP=24px
 * @include font-fluid(24, 18);      // PC=24px,  SP=18px (but min 16px)
 */
/* ===== 流動サイズ（幅・余白など、最小制約なし） ===== */
/* PC専用にスタイルを当てる */
/* SP専用にスタイルを当てる */
/* 中央寄せ */
/* ===== 画像で文字を切り抜く（background-clip: text） =====
 * 文字の塗りを透明にして、背景画像が文字型にくり抜かれて見える効果。
 * 画像は加工せずそのまま表示する（色味を変えない）。
 *
 * 使い方：
 *   @include text-cutout();                                 // デフォルト画像（assets/images/top/txt-bg.png）
 *   @include text-cutout('../images/path/to/sky.jpg');      // 画像パスを指定
 *   @include text-cutout($size: contain, $position: top);   // サイジング・位置を指定
 *
 * NOTE:
 * - 適用要素は `display: inline-block` 推奨（インライン要素では background-clip:text が効きにくい）。
 * - 画像を文字内で大きく見せたい時は $size: auto, $position: center などに差し替える。
 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===== Reset / Normalize ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 縦スクロールバー分のガタつきを防ぐ */
  scrollbar-gutter: stable;
  /* SP/PC 共通：横方向の意図しないスクロールを抑止 */
  overflow-x: hidden;
}

body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  color: #3e3e3e;
  line-height: 1.7;
  background: #ffffff;
  overflow-x: hidden;
  /* iOSセーフエリア（ノッチ対応） */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}

/* PC上限超え時の中央寄せ（1920px超のブラウザに対応） */
.l-main {
  display: block;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden; /* ネガティブマージンによる横はみ出しを切る */
}

/* 全セクションの幅キャップ */
[class^=p-] {
  width: 100%;
  max-width: 100%;
  /* 各セクションでネガティブマージンを使ってもブラウザ全体に
   * 横スクロールが出ないよう、内部のはみ出しを許可しつつ親では切る */
}

/* セクション内側の余白（PC=240px、SP=24px相当） */
/* ===== タップターゲット（モバイルアクセシビリティ） ===== */
button, a {
  /* iOSタップハイライト軽減 */
  -webkit-tap-highlight-color: transparent;
}

/* 画像はデフォルトで親に追従 */
img {
  max-width: 100%;
  height: auto;
}

/* 一定幅以下では行間/語間を少し詰めて窮屈さを軽減 */
@media (max-width: 767.98px) {
  body {
    line-height: 1.6;
  }
}
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===== 共通CTAボタン ===== */
.c-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: 100%;
  padding-block: 5.3333333333vw;
  border-radius: 60px;
  background-image: url("../images/common/botton-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-weight: 500;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .c-btn {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .c-btn {
    width: min(23.0208333333vw, 442px);
    padding-block: min(1.0416666667vw, 20px);
  }
}
.c-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25);
}
.c-btn__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}
.c-btn__icon svg {
  width: 100%;
  height: 100%;
}
.c-btn {
  /* ===== ページ全体共通：画面に入ったら画像１（scale 0→1.2→1）でポップイン ===== */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
}
.c-btn.is-revealed {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .c-btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===== 表示切替ユーティリティ =====
 * `.sp` : SP（<768px）でだけ表示、PC では非表示
 * `.pc` : PC（≥768px）でだけ表示、SP では非表示
 *
 * `display: revert` を使うことで、要素本来の display（block / inline / inline-block / flex 等）を保持します。
 */
@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

.pc {
  display: none !important;
}
@media (min-width: 768px) {
  .pc {
    display: revert !important;
  }
}

/* ===== 共通アニメーション定義（汎用キーフレーム） =====
 * 画像１: scale 0 → 1.2 → 1 のポンと出る
 * 画像２: その場でゆっくりフェードイン
 * 画像３: 真っ暗（グレー黒）の枠から、下→上に画像が現れる
 * テキスト１: 下からフェードイン
 * テキスト２: 左から1文字ずつ scale 0 → 1.2 → 1（既存 section-title-char-pop と同等）
 * テキスト３: ランダム方向からスライド（実装は適用要素ごとに transform を指定）
 */
@keyframes anim-img-1 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anim-img-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim-img-3 {
  /* 親要素を黒背景にし、img/コンテンツに `clip-path: inset(100% 0 0 0)` から開始 */
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-txt-1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* テキスト２は既存 section-title-char-pop を使用 */
/* ===== セクション見出し ===== */
/* 文字ポップイン：0 → 110% → 100%（弾むように拡大して戻る） */
@keyframes section-title-char-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.p-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.15em;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  letter-spacing: -0.023em;
  line-height: 0.95;
}
.p-section-title__main {
  display: inline-block;
  width: fit-content;
  font-size: clamp(16px, 6.4vw, 30px);
}
@media (min-width: 768px) {
  .p-section-title__main {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-section-title__main {
  /* JS未実行時のフォールバック */
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-section-title__sub {
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: bottom left;
  font-size: clamp(16px, 16vw, 80px);
}
@media (min-width: 768px) {
  .p-section-title__sub {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-section-title__sub {
  /* JS未実行時のフォールバック */
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-section-title span {
  display: inline-block;
  width: fit-content;
}
.p-section-title {
  /* JSが文字分割を完了したら、親側の text-cutout を解除し、各 __char に任せる
   * （background-clip:text は transform を持つ子要素では正しく描画されない場合があるため）
   */
}
.p-section-title[data-char-split=done] .p-section-title__main,
.p-section-title[data-char-split=done] .p-section-title__sub {
  background-image: none;
  -webkit-text-fill-color: initial;
  color: inherit;
}
.p-section-title {
  /* JSが挿入する文字span：各々が text-cutout を持ち独立にアニメ
   * `.p-section-title span { display: inline }` の上書き対策で specificity を上げる
   */
}
.p-section-title .p-section-title__char {
  display: inline-block;
  transform-origin: center bottom;
  will-change: opacity, transform;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  /* 画面に入る前は非表示 */
  opacity: 0;
  transform: scale(0);
}
.p-section-title {
  /* ビューポートに入ったら左から順番にポップイン
   * キーフレーム内で 110% にオーバーシュート→100%に戻るので、イージングは ease-out で
   */
}
.p-section-title.is-revealed .p-section-title__char {
  animation: section-title-char-pop 0.7s ease-out forwards;
  animation-delay: calc(var(--char-i, 0) * 0.07s);
}
.p-section-title {
  /* モーション抑制ユーザーには即時表示 */
}
@media (prefers-reduced-motion: reduce) {
  .p-section-title__char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===== __decor 要素の文字ポップイン =====
 * .p-vision__decor / .p-interview__decor / .p-about__decor など
 * `xxxx__decor` クラスを持つ要素を JSで文字分割して、同じアニメーションを適用。
 */
[class*=__decor] {
  /* JSが文字を分割し終わったら、親側の text-cutout を解除（transform対策） */
}
[class*=__decor][data-char-split=done] {
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
}
[class*=__decor] {
  /* JS が挿入する文字span（クラス名はセクション見出しと共用） */
}
[class*=__decor] .p-section-title__char {
  display: inline-block;
  transform-origin: center bottom;
  will-change: opacity, transform;
  /* decor 系は txt-bg.png（青空）を使用。差し替えたい場合は個別に上書き */
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  opacity: 0;
  transform: scale(0);
}
[class*=__decor] {
  /* ビューポートに入ったら左から順番にポップイン */
}
[class*=__decor].is-revealed .p-section-title__char {
  animation: section-title-char-pop 0.7s ease-out forwards;
  animation-delay: calc(var(--char-i, 0) * 0.07s);
}
[class*=__decor] {
  /* モーション抑制ユーザーには即時表示 */
}
@media (prefers-reduced-motion: reduce) {
  [class*=__decor] .p-section-title__char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===== スクロール連動フェードイン =====
 * 任意の要素に `.js-reveal` を付けると、画面に入った瞬間に
 * JS（IntersectionObserver）が `.is-revealed` を追加してフェードイン発火。
 * 個別の遅延は HTML 側で  style="--reveal-delay: .3s"  または CSS で指定可。
 *
 * 例:
 *   <h2 class="js-reveal">タイトル</h2>
 *   <p class="js-reveal" style="--reveal-delay: .2s">本文</p>
 */
.js-reveal {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity;
}
.js-reveal.is-revealed {
  opacity: 1;
}

/* モーション抑制ユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transition: none;
  }
}
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===============================================
 * Header
 * =============================================== */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  width: 100%;
  color: #ffffff;
  background: url("../images/common/header-bg.png") center/cover no-repeat, linear-gradient(180deg, #87cefa 0%, #b6dbff 100%);
  /* MV を含むページではMVを通過するまで上に隠す（JSで .is-shown を付ける）
   * front-page / page-top2 など `.p-mv` を含むページに自動適用される。
   */
}
body:has(.p-mv) .l-header {
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body:has(.p-mv) .l-header.is-shown {
  transform: translateY(0);
}
.l-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 13.3333333333vw;
  padding-inline: 4.2666666667vw;
  gap: 2.1333333333vw;
}
@media (min-width: 768px) {
  .l-header__inner {
    height: min(5.2083333333vw, 100px);
    padding-inline: min(2.0833333333vw, 40px);
    gap: min(0.8333333333vw, 16px);
  }
}
.l-header {
  /* ロゴ（丸バッジ + 株式会社力組） */
}
.l-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  transition: opacity 0.5s ease;
}
.l-header__brand:hover {
  opacity: 0.8;
}
.l-header__brand img {
  height: 30px;
}
@media (min-width: 768px) {
  .l-header__brand img {
    height: 50px;
  }
}
.l-header__brand-mark {
  display: inline-flex;
  height: 7.4666666667vw;
}
@media (min-width: 768px) {
  .l-header__brand-mark {
    height: min(5.2083333333vw, 100px);
  }
}
.l-header__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.l-header__brand-text {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: clamp(16px, 3.7333333333vw, 18px);
}
@media (min-width: 768px) {
  .l-header__brand-text {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.l-header {
  /* 「力組採用特設サイト」バッジ */
}
.l-header__sub-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  background: #ffffff;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
  font-size: 6px;
}
@media (min-width: 768px) {
  .l-header__sub-badge {
    font-size: clamp(16px, 2.4vw, 12px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-header__sub-badge {
    font-size: clamp(16px, 0.625vw, 12px);
  }
}
.l-header {
  /* メニューボタン */
}
.l-header__menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: auto;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
@media (min-width: 768px) {
  .l-header__menu {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    gap: 5px;
  }
}
.l-header__menu:hover {
  opacity: 0.8;
}
.l-header__menu-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 1.3333333333vw;
  width: 6.9333333333vw;
}
@media (min-width: 768px) {
  .l-header__menu-bars {
    gap: 5px;
    width: min(1.875vw, 36px);
  }
}
.l-header__menu-bars span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
}
.l-header__menu-label {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  font-size: clamp(16px, 2.4vw, 10px);
}
@media (min-width: 768px) {
  .l-header__menu-label {
    font-size: clamp(16px, 0.5208333333vw, 10px);
  }
}

/* ===============================================
 * Fullscreen Menu Overlay
 * =============================================== */
.l-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  color: #ffffff;
  background: url("../images/common/menu-bg.png") center/cover no-repeat, linear-gradient(180deg, #6db5ff 0%, #bcdeff 60%, #ffffff 100%);
  /* 上から下にスライドして出現 */
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
}
.l-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.l-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 13.3333333333vw;
  padding-inline: 4.2666666667vw;
}
@media (min-width: 768px) {
  .l-menu__top {
    height: min(4.1666666667vw, 80px);
    padding-inline: min(2.0833333333vw, 40px);
  }
}
.l-menu__brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #ffffff;
}
.l-menu__brand-mini img {
  height: 30px;
}
@media (min-width: 768px) {
  .l-menu__brand-mini img {
    height: 50px;
  }
}
.l-menu__brand-mini-mark {
  display: inline-flex;
  width: 7.4666666667vw;
  height: 7.4666666667vw;
}
@media (min-width: 768px) {
  .l-menu__brand-mini-mark {
    width: min(2.0833333333vw, 40px);
    height: min(2.0833333333vw, 40px);
  }
}
.l-menu__brand-mini-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.l-menu__brand-mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  background: #ffffff;
  color: #000000;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
  font-size: clamp(16px, 2.4vw, 12px);
}
@media (min-width: 768px) {
  .l-menu__brand-mini-badge {
    font-size: clamp(16px, 0.625vw, 12px);
  }
}
.l-menu__close {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
@media (min-width: 768px) {
  .l-menu__close {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    gap: 5px;
  }
}
.l-menu__close:hover {
  opacity: 0.8;
}
.l-menu__close-icon {
  display: inline-flex;
  width: 5.3333333333vw;
  height: 5.3333333333vw;
}
@media (min-width: 768px) {
  .l-menu__close-icon {
    width: min(1.4583333333vw, 28px);
    height: min(1.4583333333vw, 28px);
  }
}
.l-menu__close-icon svg {
  width: 100%;
  height: 100%;
}
.l-menu__close-label {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  font-size: clamp(16px, 2.4vw, 10px);
}
@media (min-width: 768px) {
  .l-menu__close-label {
    font-size: clamp(16px, 0.5208333333vw, 10px);
  }
}
.l-menu {
  /* メインのナビゲーション領域 */
}
.l-menu__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 13.3333333333vw);
  padding: 10.6666666667vw 6.4vw;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .l-menu__main {
    min-height: calc(100vh - min(4.1666666667vw, 80px));
    padding: min(3.125vw, 60px) min(2.0833333333vw, 40px);
    gap: min(3.125vw, 60px);
  }
}
.l-menu__brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.2vw;
}
@media (min-width: 768px) {
  .l-menu__brand {
    gap: min(1.0416666667vw, 20px);
  }
}
.l-menu__brand-mark {
  display: inline-flex;
  height: 13.3333333333vw;
}
@media (min-width: 768px) {
  .l-menu__brand-mark {
    height: min(4.1666666667vw, 80px);
  }
}
.l-menu__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.l-menu__brand-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.04em;
  font-size: clamp(16px, 6.4vw, 32px);
}
@media (min-width: 768px) {
  .l-menu__brand-text {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.l-menu__corp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  background: #ffffff;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
  transition: opacity 0.5s ease;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .l-menu__corp-link {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
.l-menu__corp-link:hover {
  opacity: 0.85;
}
.l-menu__corp-link svg {
  width: 1em;
  height: 1em;
}
.l-menu__nav {
  width: 100%;
}
@media (min-width: 768px) {
  .l-menu__nav {
    width: 70%;
  }
}
.l-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4.2666666667vw 2.1333333333vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
}
@media (min-width: 768px) {
  .l-menu__list {
    gap: min(1.5625vw, 30px) min(1.0416666667vw, 20px);
  }
}
.l-menu__list > li {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
}
.l-menu__list {
  /* セパレータ：各項目の左右に縦バー（空画像で塗る） */
}
.l-menu__list > li::before, .l-menu__list > li:last-child::after {
  content: "";
  display: inline-block;
  align-self: center;
  width: 2px;
  height: 1.6em;
  margin-inline: 2.1333333333vw;
  background: url("../images/common/txt-bg-2.png") center/cover no-repeat;
}
@media (min-width: 768px) {
  .l-menu__list > li::before, .l-menu__list > li:last-child::after {
    margin-inline: min(0.8333333333vw, 16px);
    height: 2em;
  }
}
.l-menu__list a {
  display: inline-flex;
  align-items: flex-end;
  transition: opacity 0.5s ease;
}
.l-menu__list a:hover {
  opacity: 0.8;
}
.l-menu {
  /* 強調語（TOP / 5分 / 想い / 職種 / 新 / 社長 / 語る / エントリー） */
}
.l-menu__txt {
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: bottom left;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 7.4666666667vw, 40px);
}
@media (min-width: 768px) {
  .l-menu__txt {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
@media (min-width: 768px) {
  .l-menu__txt {
    font-size: clamp(16px, 9.6vw, 60px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-menu__txt {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
.l-menu {
  /* 補助語（で分かる力組 / 力組としての / インタビュー / 力組構想 / が） */
}
.l-menu__txt--sm {
  display: inline-block;
  margin-bottom: 0.12em; /* 大きい文字とのベースラインを合わせる微調整 */
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 4.2666666667vw, 22px);
}
@media (min-width: 768px) {
  .l-menu__txt--sm {
    font-size: clamp(16px, 1.1458333333vw, 22px);
  }
}
@media (min-width: 768px) {
  .l-menu__txt--sm {
    font-size: clamp(16px, 5.8666666667vw, 30px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-menu__txt--sm {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}

/* ===============================================
 * Side Menu（右側固定クイックリンク・全ページ共通）
 * =============================================== */
.l-side-menu {
  position: fixed;
  right: 0;
  bottom: 10.6666666667vw;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4.2666666667vw;
}
@media (min-width: 768px) {
  .l-side-menu {
    bottom: min(3.125vw, 60px);
    gap: min(1.0416666667vw, 20px);
  }
}
.l-side-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.1333333333vw;
  width: 80px;
  padding: 3.7333333333vw 2.6666666667vw;
  border-radius: 20px 0 0 20px;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.023em;
  color: #ffffff;
  text-align: center;
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
  will-change: transform;
}
@media (min-width: 768px) {
  .l-side-menu__item {
    max-width: unset;
    width: min(3.6458333333vw, 70px);
    padding: min(1.0416666667vw, 20px) min(0.7291666667vw, 14px);
    gap: min(0.5208333333vw, 10px);
  }
}
.l-side-menu__item:hover {
  transform: translateX(-4px);
}
.l-side-menu__item--translate {
  background: #ffc21b;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {
  .l-side-menu__item--translate.sp {
    background: unset;
    box-shadow: unset;
    padding: 0;
  }
}
.l-side-menu__item--translate .l-side-menu__label {
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.l-side-menu__item--entry {
  background: #6db5ff url("../images/common/menu-bg.png") center/cover no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.l-side-menu {
  /* 縦書きラベル */
}
.l-side-menu__label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-size: clamp(16px, 3.7333333333vw, 16px);
}
@media (min-width: 768px) {
  .l-side-menu__label {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
@media (min-width: 768px) {
  .l-side-menu__label {
    font-size: clamp(16px, 4.2666666667vw, 20px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-side-menu__label {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
.l-side-menu {
  /* 矢印アイコン（縦書きに合わせて下向き表示） */
}
.l-side-menu__icon {
  display: inline-flex;
  width: 4.2666666667vw;
  height: 4.2666666667vw;
}
@media (min-width: 768px) {
  .l-side-menu__icon {
    width: min(1.0416666667vw, 20px);
    height: min(1.0416666667vw, 20px);
  }
}
.l-side-menu__icon svg {
  width: 100%;
  height: 100%;
}

/* メニュー（フルスクリーン）が開いている時はサイドメニューを隠す */
.l-menu.is-open ~ .l-side-menu {
  opacity: 0;
  pointer-events: none;
}

/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===============================================
 * MV
 * =============================================== */
/* --- MVキーフレーム --- */
@keyframes mv-bg-cycle {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.76% {
    opacity: 1;
    transform: scale(1.015);
  }
  28.57% {
    opacity: 1;
    transform: scale(1.09);
  }
  33.33% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes mv-char-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.p-mv {
  position: relative;
  width: 100%;
  height: 133.3333333333vw;
  overflow: hidden;
  max-height: 100vh;
}
@media (min-width: 768px) {
  .p-mv {
    height: min(56.25vw, 1080px);
  }
}
.p-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-mv__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
  animation: mv-bg-cycle 21s ease-in-out infinite;
}
.p-mv__media img:nth-child(1) {
  animation-delay: 0s;
}
.p-mv__media img:nth-child(2) {
  animation-delay: 7s;
}
.p-mv__media img:nth-child(3) {
  animation-delay: 14s;
}
.p-mv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}
.p-mv__copy {
  inset: 0;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  width: fit-content;
  /* 中の文字は必ず横並び（折り返さない） */
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  white-space: nowrap;
}
.p-mv__copy-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.p-mv__copy-wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.p-mv {
  /* 力 | は、| 人 | だ。 SP=横、PC=ベースライン揃え */
}
.p-mv__char {
  display: inline-block;
  letter-spacing: -0.023em;
  opacity: 0;
  transform: scale(0);
  transform-origin: center bottom;
  will-change: transform, opacity;
  animation: mv-char-pop 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
.p-mv__char--01 { /* 力 */
  left: -1.8666666667vw;
  bottom: 23.7333333333vw;
  animation-delay: 0.3s;
  font-size: clamp(16px, 24vw, 90px);
}
@media (min-width: 768px) {
  .p-mv__char--01 {
    font-size: clamp(16px, 4.6875vw, 90px);
  }
}
@media (min-width: 768px) {
  .p-mv__char--01 {
    left: -2.2916666667vw;
    bottom: 2.2395833333vw;
    font-size: clamp(16px, 30.1333333333vw, 280px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__char--01 {
    font-size: clamp(16px, 14.5833333333vw, 280px);
  }
}
.p-mv__char--02 { /* は、*/
  left: 24.2666666667vw;
  bottom: 16.2666666667vw;
  animation-delay: 0.55s;
  font-size: clamp(16px, 16vw, 60px);
}
@media (min-width: 768px) {
  .p-mv__char--02 {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
@media (min-width: 768px) {
  .p-mv__char--02 {
    left: 17.7604166667vw;
    bottom: 0.4166666667vw;
    font-size: clamp(16px, 20vw, 160px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__char--02 {
    font-size: clamp(16px, 8.3333333333vw, 160px);
  }
}
.p-mv__char--03 { /* 人 */
  left: 50.4vw;
  bottom: 23.7333333333vw;
  animation-delay: 0.8s;
  font-size: clamp(16px, 24vw, 90px);
}
@media (min-width: 768px) {
  .p-mv__char--03 {
    font-size: clamp(16px, 4.6875vw, 90px);
  }
}
@media (min-width: 768px) {
  .p-mv__char--03 {
    left: 36.3541666667vw;
    bottom: 0vw;
    font-size: clamp(16px, 30.1333333333vw, 280px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__char--03 {
    font-size: clamp(16px, 14.5833333333vw, 280px);
  }
}
.p-mv__char--04 { /* だ。*/
  left: 79.2vw;
  bottom: 16.2666666667vw;
  animation-delay: 1.05s;
  font-size: clamp(16px, 16vw, 60px);
}
@media (min-width: 768px) {
  .p-mv__char--04 {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
@media (min-width: 768px) {
  .p-mv__char--04 {
    left: 56.875vw;
    bottom: 0.4166666667vw;
    font-size: clamp(16px, 20vw, 160px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__char--04 {
    font-size: clamp(16px, 8.3333333333vw, 160px);
  }
}
.p-mv {
  /* 右上の縦書きラベル「力組採用特設サイト」（MV内・スクロールで普通に上へ流れる） */
}
.p-mv__label {
  position: absolute;
  width: fit-content;
  display: block;
  top: 0;
  right: 15vw;
  z-index: 3;
  background: #ffffff;
  padding: 5.3333333333vw 2.1333333333vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .p-mv__label {
    padding: min(2.6041666667vw, 50px) min(1.0416666667vw, 20px);
  }
}
@media (max-width: 767.98px) {
  .p-mv__label {
    width: fit-content;
    max-width: unset;
  }
}
.p-mv__label-text {
  display: block;
  writing-mode: vertical-rl;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 3.7333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-mv__label-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-mv__label-text {
    font-size: clamp(16px, 5.3333333333vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-mv__label-text {
  /* iOS Safari など実機 SP では writing-mode: vertical-rl と
   * background-clip: text の組合せで文字内部に背景画像が描画されず
   * 透明のまま見えなくなる既知のバグがある。
   * SP では cutout を打ち消し、黒文字でフェイルセーフ表示する。
   *
   * また、vertical-rl + display:block + 親の fit-content で
   * iOS Safari が幅を正しく測れず、白背景が文字の右半分にしか
   * 出ない問題があるため、display を inline-block + 明示 width
   * （= 1 文字幅 = 1em）に変えて親の fit-content が正しく包めるようにする。 */
}
@media (max-width: 767.98px) {
  .p-mv__label-text {
    /* ===== iOS Safari の writing-mode: vertical-rl 不具合を完全回避する戦略 =====
     * 過去：writing-mode: vertical-rl + display: inline-block + width: 1em
     *   → iOS Safari でテキスト位置が想定外にずれる（白背景の左に文字が漏れる）
     * 今回：vertical-rl を完全に外し、横書きのまま word-break: break-all で
     *   1 文字ごとに改行させる。視覚的には同じ縦並びの文字列が完成し、
     *   各種 iOS Safari の縦書きレンダリング不具合をすべて回避できる。 */
    writing-mode: horizontal-tb;
    word-break: break-all;
    overflow-wrap: anywhere;
    display: block;
    width: 1em; /* 1 文字幅 = 1em → 1 行 1 文字に強制改行 */
    box-sizing: content-box;
    line-height: 1.2;
    text-align: center;
    /* text-cutout を打ち消し、ベタ塗りで確実に見える色（青）で表示 */
    background-image: none;
    background-color: transparent;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #0297E3;
    color: #0297E3;
    /* text-cutout mixin から継承される padding-right/bottom（0.18em）を打ち消す。
     * 1em の content-box を維持して 1 行 1 文字の改行を安定させる。 */
    padding: 0;
  }
}
.p-mv__en {
  display: inline-block;
  width: fit-content;
  left: 16.5333333333vw;
  bottom: 13.3333333333vw;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transform-origin: left bottom;
  will-change: transform, opacity;
  animation: mv-char-pop 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  animation-delay: 1.35s;
  font-size: clamp(16px, 9.3333333333vw, 35px);
}
@media (min-width: 768px) {
  .p-mv__en {
    font-size: clamp(16px, 1.8229166667vw, 35px);
  }
}
@media (min-width: 768px) {
  .p-mv__en {
    left: auto;
    right: 3.5416666667vw;
    bottom: 2.2395833333vw;
    font-size: clamp(16px, 9.3333333333vw, 96px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-mv__en {
    font-size: clamp(16px, 5vw, 96px);
  }
}
.p-mv__en br {
  display: none;
}
@media (min-width: 768px) {
  .p-mv__en br {
    display: block;
  }
}
.p-mv {
  /* アクセシビリティ：モーションを抑えたいユーザーへの配慮 */
}
@media (prefers-reduced-motion: reduce) {
  .p-mv__media img {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .p-mv__media img:nth-child(2), .p-mv__media img:nth-child(3) {
    opacity: 0;
  }
  .p-mv__char, .p-mv__en {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===============================================
 * Intro：この会社をつくっているのは、力だ。
 * =============================================== */
.p-intro {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  padding-block: 8vw;
}
@media (min-width: 768px) {
  .p-intro {
    padding-block: min(10.4166666667vw, 150px);
  }
}
.p-intro__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
  min-height: 88vw;
}
@media (min-width: 768px) {
  .p-intro__inner {
    padding-inline: min(10.4166666667vw, 200px);
    min-height: min(35.4166666667vw, 680px);
  }
}
.p-intro__inner {
  /* SP: Figma 1:523 では heading の左端が section から 20px なので
   * inner の左右パディングを 20px に縮める */
}
@media (max-width: 767.98px) {
  .p-intro__inner {
    padding-inline: 5.3333333333vw;
  }
}
.p-intro__heading {
  position: relative;
  z-index: 2;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-intro__heading span {
  display: block;
}
.p-intro__heading {
  /* SP: Figma 30px。h2 の UA デフォルトに上書き */
}
@media (max-width: 767.98px) {
  .p-intro__heading {
    font-size: 8vw;
  }
}
.p-intro__force {
  position: absolute;
  z-index: 1;
  bottom: 10.6666666667vw;
  right: 5.3333333333vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.023em;
  width: fit-content;
}
@media (min-width: 768px) {
  .p-intro__force {
    bottom: min(4.6875vw, 90px);
    right: min(5.2083333333vw, 100px);
  }
}
.p-intro__force {
  /* SP: Figma 1:523 では「だ。」の右端が section から 14px。
   * force ラッパーの右端を 14px に寄せる */
}
@media (max-width: 767.98px) {
  .p-intro__force {
    right: 3.7333333333vw;
  }
}
.p-intro__force-kanji {
  display: inline-block;
  width: fit-content;
  font-size: clamp(16px, 32.5333333333vw, 200px);
}
@media (min-width: 768px) {
  .p-intro__force-kanji {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
@media (min-width: 768px) {
  .p-intro__force-kanji {
    font-size: clamp(16px, 37.8666666667vw, 300px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-intro__force-kanji {
    font-size: clamp(16px, 15.625vw, 300px);
  }
}
.p-intro__force-kanji {
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-intro__force-kana {
  display: block;
  margin-bottom: 0.3em;
  margin-left: 2em;
  font-size: clamp(16px, 5.3333333333vw, 35px);
}
@media (min-width: 768px) {
  .p-intro__force-kana {
    font-size: clamp(16px, 1.8229166667vw, 35px);
  }
}
.p-intro__force-kana {
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-intro__force-end {
  display: inline-block;
  width: fit-content;
  font-size: clamp(16px, 8vw, 60px);
}
@media (min-width: 768px) {
  .p-intro__force-end {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
.p-intro__force-end {
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-intro__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  font-family: "Hina Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  line-height: 1.5;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 13.3333333333vw, 170px);
}
@media (min-width: 768px) {
  .p-intro__floats {
    font-size: clamp(16px, 8.8541666667vw, 170px);
  }
}
.p-intro__floats {
  /* SP: Figma 1:523 では装飾文字 = 34px / opacity 0.2 */
}
@media (max-width: 767.98px) {
  .p-intro__floats {
    font-size: 9.0666666667vw;
    opacity: 0.5;
  }
}
.p-intro__float {
  position: absolute;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-intro__float--01 {
  top: 20vw;
  left: 26.6666666667vw;
}
@media (min-width: 768px) {
  .p-intro__float--01 {
    top: -4.1666666667vw;
    left: 45.4166666667vw;
  }
}
.p-intro__float--02 {
  top: 23.2vw;
  left: 8.2666666667vw;
}
@media (min-width: 768px) {
  .p-intro__float--02 {
    top: -1.3541666667vw;
    left: 27.7604166667vw;
  }
}
.p-intro__float--03 {
  top: 29.8666666667vw;
  left: 37.8666666667vw;
}
@media (min-width: 768px) {
  .p-intro__float--03 {
    top: 3.125vw;
    left: 56.40625vw;
  }
}
.p-intro__float--04 {
  top: 37.6vw;
  left: 11.4666666667vw;
}
@media (min-width: 768px) {
  .p-intro__float--04 {
    top: 9.375vw;
    left: 39.84375vw;
  }
}
.p-intro__float--05 {
  top: 49.0666666667vw;
  left: 3.7333333333vw;
}
@media (min-width: 768px) {
  .p-intro__float--05 {
    top: 16.6666666667vw;
    left: 12.5520833333vw;
  }
}
.p-intro__float--06 {
  top: 50.9333333333vw;
  left: 38.6666666667vw;
}
@media (min-width: 768px) {
  .p-intro__float--06 {
    top: 18.2291666667vw;
    left: 40.5729166667vw;
  }
}
.p-intro__float--07 {
  top: 60vw;
  left: 26.1333333333vw;
}
@media (min-width: 768px) {
  .p-intro__float--07 {
    top: 28.3333333333vw;
    left: 30vw;
  }
}

/* ===============================================
 * About: 5分で分かる力組
 * =============================================== */
.p-about {
  position: relative;
  overflow: hidden;
  padding-block: 8vw;
}
@media (min-width: 768px) {
  .p-about {
    padding-block: min(6.25vw, 120px);
  }
}
.p-about {
  /* ① 背景画像は擬似要素に出して、画像２（ゆっくりフェードイン）で表示 */
}
.p-about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../images/top/play-bg.png) center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
}
.p-about__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-about__inner {
    padding-inline: min(12.5vw, 240px);
  }
}
.p-about__inner {
  /* 「5分で分かる力組」ボタンを中央配置 */
}
.p-about__inner > .c-btn {
  margin-inline: auto;
  /* ② c-btn は画像１（scale ポンッ）の初期状態 */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
}
.p-about {
  /* 動画エリア全体（サイド文字＋プレイヤー） */
}
.p-about__movie {
  position: relative;
  margin-block: 16vw;
}
@media (min-width: 768px) {
  .p-about__movie {
    margin-block: min(3.6458333333vw, 70px);
  }
}
.p-about {
  /* プレイヤー本体 */
}
.p-about__player {
  position: relative;
  aspect-ratio: 352/359;
  overflow: hidden;
  background: #000;
}
@media (min-width: 768px) {
  .p-about__player {
    aspect-ratio: 16/9;
  }
}
.p-about__player {
  /* ② プレイヤーは画像１（scale ポンッ）の初期状態 */
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: opacity, transform;
}
.p-about {
  /* サムネ（PLAYボタン） */
}
.p-about__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.3s ease; /* 再生開始時のフェードは少し早めに */
}
.p-about__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.p-about__thumb:focus-visible {
  outline: 3px solid #ff0001;
  outline-offset: -3px;
}
.p-about {
  /* 再生中：サムネを隠す */
}
.js-player.is-playing .p-about__thumb {
  opacity: 0;
  pointer-events: none;
}
.p-about {
  /* JSが挿入する YouTube iframe */
}
.p-about__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.p-about {
  /* 左右の縦書きテキスト（プレイヤー外側） */
}
.p-about__side {
  position: absolute;
  width: 8%;
  z-index: 2;
  top: 30vw;
  /* ② サイドテキストはその場でフェードイン（画像２） */
  opacity: 0;
  will-change: opacity;
}
.p-about__side--left {
  left: 5px;
  transform-origin: center;
}
.p-about__side--right {
  right: 5px;
  transform-origin: center;
}
@media (min-width: 768px) {
  .p-about__side {
    max-width: 80px;
    top: unset;
  }
  .p-about__side--left {
    left: min(1.0416666667vw, 20px);
  }
  .p-about__side--right {
    right: min(1.0416666667vw, 20px);
  }
}
.p-about {
  /* 「知る力」装飾：縦書き＋斜体、空画像で文字くり抜き、play画像の右側に配置 */
}
.p-about__decor {
  position: absolute;
  right: 5.3333333333vw;
  top: 20%;
  z-index: 3;
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright; /* 全文字を縦に直立で並べる */
  white-space: nowrap; /* 列がふえて横並びに見えるのを防止 */
  font-style: italic;
  transform: translateY(-50%) skewY(-6deg);
  transform-origin: center;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 16vw, 80px);
}
@media (min-width: 768px) {
  .p-about__decor {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
@media (min-width: 768px) {
  .p-about__decor {
    right: min(-1.0416666667vw, -20px);
    top: 50%;
    font-size: clamp(16px, 26.6666666667vw, 200px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-about__decor {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
.p-about {
  /* ===== セクションリビール時のステージドアニメーション =====
   * ① 背景画像（画像２：ゆっくりフェードイン）
   * ② 「知る力」以外のコンテンツ（タイトル＝既存アニメ、player/c-btn＝画像１）
   * ③ 最後に「知る力」（既存の文字ポップイン）
   */
}
.p-about.is-revealed {
  /* ① 背景フェードイン */
}
.p-about.is-revealed::before {
  animation: anim-img-2 1.5s ease forwards;
}
.p-about.is-revealed {
  /* ② プレイヤー：画像１ */
}
.p-about.is-revealed .p-about__player {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) 0.7s forwards;
}
.p-about.is-revealed {
  /* ② サイドテキスト（RIKIGUMI in 5 Minutes）：画像２ */
}
.p-about.is-revealed .p-about__side {
  animation: anim-img-2 1s ease 0.8s forwards;
}
.p-about.is-revealed {
  /* ② c-btn：画像１ */
}
.p-about.is-revealed .p-about__inner > .c-btn {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) 1s forwards;
}
.p-about {
  /* ② タイトル文字：既存のポップを 0.4s 遅らせて開始 */
}
.p-about.is-revealed .p-section-title.is-revealed .p-section-title__char {
  animation-delay: calc(0.4s + var(--char-i, 0) * 0.07s);
}
.p-about {
  /* ③ 「知る力」装飾：既存のポップを 1.5s 遅らせて開始 */
}
.p-about.is-revealed .p-about__decor.is-revealed .p-section-title__char {
  animation-delay: calc(1.5s + var(--char-i, 0) * 0.07s);
}
.p-about {
  /* モーション抑制：すべて即時表示 */
}
@media (prefers-reduced-motion: reduce) {
  .p-about::before {
    opacity: 1;
    animation: none;
  }
  .p-about .p-about__player,
  .p-about .p-about__side,
  .p-about .p-about__inner > .c-btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===============================================
 * Vision: 力組としての想い
 * =============================================== */
.p-vision {
  position: relative;
  background: #fafafa;
  padding-block: 13.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vision {
    padding-block: min(5.2083333333vw, 100px);
  }
}
.p-vision__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-vision__inner {
    padding-inline: min(10.4166666667vw, 200px);
  }
}
.p-vision__head {
  position: relative;
  margin-bottom: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-vision__head {
    margin-bottom: min(3.125vw, 60px);
  }
}
.p-vision {
  /* 「信じる力」装飾：空画像で文字くり抜き／最前面 */
}
.p-vision__decor {
  position: absolute;
  right: 0;
  bottom: -0.2em;
  z-index: 50;
  display: inline-block;
  transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  pointer-events: none;
  text-align: right;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 18.6666666667vw, 100px);
}
@media (min-width: 768px) {
  .p-vision__decor {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
@media (min-width: 768px) {
  .p-vision__decor {
    font-size: clamp(16px, 29.3333333333vw, 200px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vision__decor {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
.p-vision__decor span {
  width: fit-content;
}
.p-vision__body {
  display: grid;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-vision__body {
    grid-template-columns: 666fr 1030fr;
    gap: min(3.125vw, 60px);
    align-items: start;
  }
}
.p-vision__lead {
  display: inline-block;
  margin-bottom: 1em;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 6.4vw, 24px);
}
@media (min-width: 768px) {
  .p-vision__lead {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (min-width: 768px) {
  .p-vision__lead {
    font-size: clamp(16px, 6.4vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vision__lead {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-vision__text {
  margin-bottom: 2em;
  line-height: 1.8;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .p-vision__text {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-vision__text {
  /* テキスト１：下からフェードイン（画面に入ったら） */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.p-vision__text.is-revealed {
  animation: anim-txt-1 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-vision__text {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-vision {
  /* スライダー全体ラッパ：右端を画面の右端まで到達させる
   * 親 .p-vision__inner の右paddingを negative margin で打ち消す
   * SP: padding-right vw-sp(24) → margin-right vw-sp(-24)
   * PC: padding-right min(vw-pc(200), 200px) → margin-right で相殺
   */
}
.p-vision__slider {
  position: relative;
  min-width: 0; /* gridセル内ではみ出すのを防止 */
  margin-right: -6.4vw;
}
@media (min-width: 768px) {
  .p-vision__slider {
    margin-right: min(-10.4166666667vw, -200px);
  }
}
@media (max-width: 767.98px) {
  .p-vision__slider {
    margin-top: 30px;
  }
}
.p-vision {
  /* スライダー（Swiper） */
}
.p-vision__photos {
  width: auto;
  overflow: hidden; /* Swiper本来の動作。コンテナを超える分は隠す */
}
.p-vision__photos .swiper-slide {
  height: auto;
  /* Swiper初期化前にFOUCで全幅にならないよう保険 */
  flex-shrink: 0;
  /* 初期状態：その場でふわっと表示するため透明にしておく */
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-vision__photos .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 540/568;
  object-fit: cover;
}
.p-vision__photos {
  /* 画面に入ったら親に .is-revealed が付与され、各スライドが順次フェードイン */
}
.p-vision__photos.is-revealed .swiper-slide {
  opacity: 1;
}
.p-vision__photos {
  /* nth-child でスタガー */
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(1) {
  transition-delay: 0s;
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(2) {
  transition-delay: 0.12s;
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(3) {
  transition-delay: 0.24s;
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(4) {
  transition-delay: 0.36s;
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(5) {
  transition-delay: 0.48s;
}
.p-vision__photos.is-revealed .swiper-slide:nth-child(n+6) {
  transition-delay: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .p-vision__photos .swiper-slide {
    opacity: 1;
    transition: none;
  }
}
.p-vision {
  /* スライダーのナビゲーション矢印
   * SP：スライダーの左上に絶対配置でオーバーレイ
   * PC：スライダーの下に通常配置
   */
}
.p-vision__nav {
  display: none;
  gap: 2.6666666667vw;
  justify-content: flex-start;
  /* SP: スライダーの左上 */
  position: absolute;
  top: -13.3333333333vw;
  left: 2.6666666667vw;
  z-index: 5;
}
@media (min-width: 768px) {
  .p-vision__nav {
    /* PC: 通常フローに戻して下に配置 */
    position: static;
    top: auto;
    left: auto;
    gap: min(0.8333333333vw, 16px);
    margin-top: min(1.5625vw, 30px);
  }
}
.p-vision__arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  padding: 0;
  border: 1px solid #000000;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #000000;
  transition: background 0.5s ease, color 0.5s ease;
}
@media (min-width: 768px) {
  .p-vision__arrow {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
  }
}
.p-vision__arrow:hover {
  background: #000000;
  color: #ffffff;
}
.p-vision__arrow svg {
  width: 35%;
  height: 35%;
}
.p-vision__arrow--prev svg {
  transform: scaleX(-1);
}
.p-vision__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.p-vision__arrow.swiper-button-disabled:hover {
  background: transparent;
  color: #000000;
}

/* ===============================================
 * Interview
 * =============================================== */
.p-interview {
  position: relative;
  padding-block: 13.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-interview {
    padding-block: min(6.25vw, 120px);
  }
}
.p-interview__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-interview__inner {
    padding-inline: min(12.5vw, 240px);
  }
}
.p-interview {
  /* 「人の力」装飾：青空画像で文字くり抜き */
}
.p-interview__decor {
  position: absolute;
  text-align: center;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%) skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  letter-spacing: -0.023em;
  pointer-events: none;
  z-index: 5;
  top: 53%;
  line-height: 1;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 26.6666666667vw, 140px);
}
@media (min-width: 768px) {
  .p-interview__decor {
    font-size: clamp(16px, 7.2916666667vw, 140px);
  }
}
@media (min-width: 768px) {
  .p-interview__decor {
    font-size: clamp(16px, 37.3333333333vw, 240px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-interview__decor {
    font-size: clamp(16px, 12.5vw, 240px);
  }
}
.p-interview__decor span {
  width: fit-content;
}
.p-interview {
  /* 一枚画像のインタビューカードを縦並びに */
}
.p-interview__list {
  display: flex;
  flex-direction: column;
  gap: 10.6666666667vw;
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-interview__list {
    gap: min(4.1666666667vw, 80px);
    margin-top: min(4.1666666667vw, 80px);
  }
}
.p-interview__item {
  position: relative;
  width: 100%;
  /* 画像３: 画像表示前は暗い背景がのぞく */
  background-color: #1a1a1a;
  overflow: hidden;
  /* .c-btn を「画像をラップする透明クリッカブル」として再定義
   * 共通の暗いボタン背景・最大幅・角丸・余白などは打ち消す
   * （.c-btn の global 初期状態 opacity:0 / scale(0) もここで打ち消す）
   */
}
.p-interview__item > .c-btn {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  opacity: 1; /* グローバル .c-btn の初期状態 opacity:0 を打ち消す */
  transform: none; /* グローバル .c-btn の初期状態 scale(0) を打ち消す */
  animation: none; /* 画像３は item 自身が担当するので .c-btn のポップは無効化 */
}
.p-interview__item > .c-btn:hover {
  transform: none;
  box-shadow: none;
}
.p-interview__item > .c-btn:hover .p-interview__photo img {
  transform: scale(1.03);
}
.p-interview__item {
  /* 画面に入ったら下から画像が現れる（画像３） */
}
.p-interview__item.is-revealed .p-interview__photo img {
  animation: anim-img-3 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-interview__item {
    background-color: transparent;
  }
  .p-interview__item .p-interview__photo img {
    clip-path: none;
    animation: none;
  }
}
.p-interview__photo {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.p-interview__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
  /* 画像３の初期状態：上端から100%クリップ＝完全に隠れる */
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  vertical-align: bottom;
}

/* ===============================================
 * Concept
 * =============================================== */
/* --- 新力組構想（concept）キーフレーム --- */
@keyframes concept-bg-in {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes concept-frame-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes concept-text-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: var(--concept-text-base, none) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: var(--concept-text-base, none) scale(1.05);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: var(--concept-text-base, none) scale(1);
  }
}
.p-concept {
  position: relative;
  padding-block: 26.6666666667vw;
  background: #f8f2eb;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-concept {
    padding-block: min(10.4166666667vw, 200px);
  }
}
.p-concept {
  /* セクション背景は擬似要素に出して個別アニメーション */
}
.p-concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/top/frame-bg.png) center/cover no-repeat;
  opacity: 0;
  transform: scale(0.92);
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.p-concept__inner {
  position: relative;
  z-index: 1; /* 背景擬似要素より前面に */
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .p-concept__inner {
    max-width: min(62.5vw, 1200px);
  }
}
.p-concept__inner {
  /* ホバー時に .default → .hover をクロスフェード（display:none では transition が効かないので
   * opacity 切替に変更）。.default は常に表示したまま、上に重ねた .hover を opacity 0 ↔ 1。 */
}
.p-concept__inner a:hover .p-concept__frame .default {
  opacity: 0;
}
.p-concept__inner a:hover .p-concept__frame .hover {
  opacity: 1;
}
.p-concept {
  /* フレーム（写真）: ②のpopアニメ用の初期状態 */
}
.p-concept__frame {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: opacity, transform;
}
@media (min-width: 768px) {
  .p-concept__frame {
    margin: 0 auto;
  }
}
.p-concept__frame {
  /* .default と .hover は同じ枠に重ねて opacity で切替。
   * .default は通常フローでフレームの高さを決める、.hover は絶対配置で重ねる。 */
}
.p-concept__frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 768px) {
  .p-concept__frame img {
    max-width: min(62.5vw, 1200px);
  }
}
.p-concept__frame .default {
  transition: opacity 0.5s ease;
}
.p-concept__frame .hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
@media (min-width: 768px) {
  .p-concept__frame .hover {
    max-width: min(62.5vw, 1200px);
  }
}
.p-concept {
  /* タイトル「新 力組構想 →」: フレーム下半分にオーバーラップ */
}
.p-concept__title {
  position: absolute;
  left: 50%;
  bottom: 25%; /* フレーム下から25%（=下半分の中ほど）に配置 */
  z-index: 2;
  width: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  /* 元の skewX をベースに、アニメーションでも維持できるよう CSS変数で */
  --concept-text-base: translate(-50%, 0) skewX(-8deg);
  transform: var(--concept-text-base);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #000000;
  line-height: 0.9;
  letter-spacing: -0.023em;
  /* ③のアニメ初期状態（is-revealed まで非表示） */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: opacity, clip-path, transform;
  font-size: clamp(16px, 14.6666666667vw, 55px);
}
@media (min-width: 768px) {
  .p-concept__title {
    font-size: clamp(16px, 2.8645833333vw, 55px);
  }
}
@media (min-width: 768px) {
  .p-concept__title {
    max-width: min(46.875vw, 900px);
    font-size: clamp(16px, 16vw, 120px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-concept__title {
    font-size: clamp(16px, 6.25vw, 120px);
  }
}
.p-concept__title svg {
  margin: auto;
  width: 100%;
  height: auto;
}
.p-concept__arrow {
  width: 0.7em;
  height: 0.7em;
  flex: none;
}
.p-concept {
  /* サブコピー「変わりはじめた、現場のかたち」 */
}
.p-concept__sub {
  position: absolute;
  left: 50%;
  bottom: 8%; /* タイトルの下に */
  z-index: 2;
  width: 90%;
  text-align: center;
  --concept-text-base: translate(-50%, 0);
  transform: var(--concept-text-base);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  /* ③のアニメ初期状態 */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: opacity, clip-path, transform;
  font-size: clamp(16px, 5.3333333333vw, 24px);
}
@media (min-width: 768px) {
  .p-concept__sub {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (min-width: 768px) {
  .p-concept__sub {
    font-size: clamp(16px, 6.4vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-concept__sub {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-concept {
  /* === スクロール連動：is-revealed が付いた時にステージ発火 === */
}
.p-concept.is-revealed {
  /* ① 背景: ゆっくり拡大しながらフェードイン */
}
.p-concept.is-revealed::before {
  animation: concept-bg-in 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
.p-concept.is-revealed {
  /* ② フレーム: ぽんっと出る */
}
.p-concept.is-revealed .p-concept__frame {
  animation: concept-frame-pop 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) 0.9s forwards;
}
.p-concept.is-revealed {
  /* ③ タイトル: 左から右へワイプ + 軽くスケール */
}
.p-concept.is-revealed .p-concept__title {
  animation: concept-text-reveal 1s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
.p-concept.is-revealed {
  /* ③ サブ: タイトルから少し遅れて */
}
.p-concept.is-revealed .p-concept__sub {
  animation: concept-text-reveal 1s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards;
}
.p-concept {
  /* モーション抑制ユーザー：アニメーションを止めて即表示 */
}
@media (prefers-reduced-motion: reduce) {
  .p-concept::before {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-concept__frame, .p-concept__title, .p-concept__sub {
    opacity: 1;
    clip-path: none;
    animation: none;
  }
  .p-concept__frame {
    transform: none;
  }
}

/* ===============================================
 * Message
 * =============================================== */
.p-message {
  position: relative;
  background: #000000;
  padding-block: 32vw;
  overflow: hidden;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-message {
    padding-block: min(11.4583333333vw, 220px);
  }
}
.p-message {
  /* ① 背景画像は擬似要素に分離して、画像２でゆっくりフェードイン */
}
.p-message::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/top/hung-bg.png") center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.p-message__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8vw;
}
@media (min-width: 768px) {
  .p-message__inner {
    padding-inline: min(12.5vw, 240px);
    gap: min(2.0833333333vw, 40px);
  }
}
.p-message__title {
  display: flex;
  gap: 0.25em;
  transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  line-height: 0.9;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 18.6666666667vw, 100px);
}
@media (min-width: 768px) {
  .p-message__title {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
@media (min-width: 768px) {
  .p-message__title {
    font-size: clamp(16px, 26.6666666667vw, 200px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-message__title {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
.p-message__title {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.p-message__title--right {
  margin-left: 1em;
}
.p-message__title-jp {
  position: absolute;
  z-index: 2;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-message__title-jp:nth-child(1) {
  top: 20%;
  left: 3%;
}
.p-message__title-jp:nth-child(2) {
  width: fit-content;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .p-message__title-jp:nth-child(2) {
    font-size: clamp(16px, 37.3333333333vw, 300px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-message__title-jp:nth-child(2) {
    font-size: clamp(16px, 15.625vw, 300px);
  }
}
.p-message__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  position: relative;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .p-message__cta {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
@media (min-width: 768px) {
  .p-message__cta {
    max-width: min(76.0416666667vw, 1460px);
    padding: min(1.5625vw, 30px) min(2.0833333333vw, 40px);
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-message__cta {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-message__cta-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}
.p-message__cta-icon svg {
  width: 100%;
  height: 100%;
}
.p-message__cta img {
  position: relative;
  z-index: 1;
  width: 100%;
}
.p-message__cta {
  /* ② メイン画像（default）に画像１（scale 0→1.2→1）の初期状態 */
}
.p-message__cta img.default {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
  transition: opacity 0.5s ease;
}
.p-message__cta {
  /* ホバー画像は default と同じ位置に重ねて opacity でクロスフェード。
   * display:none ⇄ block 切替だと、display:none を挟む間に
   * .is-revealed → anim-img-1 の forwards 状態が解除され、
   * 解除後 img.default は base の opacity:0/scale:0 に戻って「消えた」ように見えるため、
   * opacity 切替で常時 display を保ったまま見せ／隠す。 */
}
.p-message__cta img.hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.p-message__cta:hover img.default {
  opacity: 0;
}
.p-message__cta:hover img.hover {
  opacity: 1;
}
.p-message {
  /* === セクションリビール時のステージドアニメーション === */
}
.p-message.is-revealed {
  /* ① 背景フェードイン */
}
.p-message.is-revealed::before {
  animation: anim-img-2 1.5s ease forwards;
}
.p-message.is-revealed {
  /* ② 画像ポップイン */
}
.p-message.is-revealed .p-message__cta img.default {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) 0.5s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-message::before {
    opacity: 1;
    animation: none;
  }
  .p-message .p-message__cta img.default {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===============================================
 * FAQ
 * =============================================== */
.p-faq {
  position: relative;
  background: #fafafa;
  padding-block: 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-faq {
    padding-block: min(6.25vw, 120px);
  }
}
.p-faq__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-faq__inner {
    padding-inline: min(10.4166666667vw, 200px);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: min(3.125vw, 60px);
    align-items: start;
  }
}
.p-faq__inner .p-section-title {
  justify-content: flex-start;
}
.p-faq__inner::before {
  content: "";
  position: absolute;
  aspect-ratio: 1611/1331;
  background-size: cover;
  object-position: center;
  width: 70%;
  background-image: url(../images/top/faq-bg.png);
  z-index: 0;
  top: -20vw;
  /* 画像２: 画面に入ったらゆっくりフェードイン */
  opacity: 0;
  right: -10vw;
  will-change: opacity;
}
@media (min-width: 768px) {
  .p-faq__inner::before {
    right: unset;
    top: 0;
  }
}
.p-faq__inner.is-revealed::before {
  animation: anim-img-2 1.5s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-faq__inner::before {
    opacity: 1;
    animation: none;
  }
}
.p-faq__list {
  margin-top: 5.3333333333vw;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-faq__list {
    margin-top: 0;
  }
}
.p-faq__item {
  border-bottom: 1px solid #000000;
}
.p-faq__item.is-open .p-faq__toggle svg {
  transform: rotate(180deg);
}
.p-faq__question {
  display: flex;
  flex-wrap: wrap; /* 質問文が長い場合は折り返し */
  align-items: center;
  gap: 2.1333333333vw;
  width: 100%;
  padding-block: 6.4vw;
  text-align: left;
}
@media (min-width: 768px) {
  .p-faq__question {
    padding-block: min(1.5625vw, 30px);
    gap: min(0.625vw, 12px);
  }
}
.p-faq__mark {
  display: inline-block;
  flex: none;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  width: fit-content;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 5.8666666667vw, 24px);
}
@media (min-width: 768px) {
  .p-faq__mark {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-faq__mark--a {
  align-self: flex-start;
}
.p-faq__question-text {
  display: inline-block;
  flex: 0 1 auto; /* テキスト幅ぴったりに収まる（flex:1 で広がらない） */
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.023em;
  width: fit-content;
  max-width: calc(100% - 100px);
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 4.8vw, 24px);
}
@media (min-width: 768px) {
  .p-faq__question-text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-faq {
  /* アコーディオン下向き矢印：質問文の直後に配置 */
}
.p-faq__toggle {
  flex: none;
  margin-right: auto; /* 右側の余白を吸収し、矢印は質問文の直後に貼り付く */
  width: 1.2em;
  height: 1.2em;
}
.p-faq__toggle svg {
  width: 100%;
  height: 100%;
  transition: transform 0.25s;
}
.p-faq__answer {
  display: flex;
  gap: 2.6666666667vw;
  padding-bottom: 6.4vw;
}
@media (min-width: 768px) {
  .p-faq__answer {
    padding-bottom: min(1.5625vw, 30px);
    gap: min(0.8333333333vw, 16px);
  }
}
.p-faq__answer[hidden] {
  display: none;
}
.p-faq__answer-text {
  flex: 1;
  line-height: 1.7;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .p-faq__answer-text {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}

/* ===============================================
 * Entry CTA
 * =============================================== */
.p-entry {
  position: relative;
  padding-block: 21.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-entry {
    padding-block: min(8.3333333333vw, 160px);
  }
}
.p-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 24%, #fafafa 100%);
  pointer-events: none;
}
.p-entry__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-entry__inner {
    padding-inline: min(12.5vw, 240px);
    gap: min(2.0833333333vw, 40px);
  }
}
.p-entry__inner a {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1/1;
  padding-bottom: 10%;
  overflow: hidden;
  /* 背景画像は擬似要素に分離（画像３：clip-path で下から出現） */
  background-image: none;
}
@media (min-width: 768px) {
  .p-entry__inner a {
    aspect-ratio: 2/1;
  }
}
.p-entry__inner a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1a1a1a url(../images/top/entry-bg.png) center/cover no-repeat;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  transition: 0.5s;
}
.p-entry__inner a:hover::before {
  transition: 0.5s;
  background-image: url(../images/top/entry-bg-hover.png);
}
.p-entry__inner a {
  /* テキストは前面に重ねる */
}
.p-entry__inner a > * {
  position: relative;
  z-index: 1;
}
.p-entry__copy {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 9.6vw, 52px);
}
@media (min-width: 768px) {
  .p-entry__copy {
    font-size: clamp(16px, 2.7083333333vw, 52px);
  }
}
@media (min-width: 768px) {
  .p-entry__copy {
    font-size: clamp(16px, 13.8666666667vw, 100px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-entry__copy {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
.p-entry__copy {
  /* テキスト１：下からフェードイン */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.p-entry__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  transition: opacity 0.5s ease;
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .p-entry__btn {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-entry__btn {
    font-size: clamp(16px, 5.3333333333vw, 28px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-entry__btn {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-entry__btn svg {
  width: 0.6em;
  height: 0.6em;
  color: #002bff;
}
.p-entry__btn:hover {
  opacity: 0.6;
}
.p-entry__btn {
  /* テキスト１：下からフェードイン */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.p-entry {
  /* === 各要素が個別に画面に入ったタイミングで発火 === */
  /* 背景：画像３（<a> 自身が in-view になったら ::before のクリップを解除） */
}
.p-entry__inner a.is-revealed::before {
  animation: anim-img-3 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.p-entry {
  /* テキスト：テキスト１ */
}
.p-entry__copy.is-revealed {
  animation: anim-txt-1 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.p-entry__btn.is-revealed {
  animation: anim-txt-1 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-entry .p-entry__inner a::before {
    clip-path: none;
    animation: none;
  }
  .p-entry .p-entry__copy,
  .p-entry .p-entry__btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /about ページ専用スタイル
 *
 * 共通利用：
 *  - text-cutout mixin（_mixins.scss）
 *  - .p-section-title / .c-btn / .p-entry の各クラス（_components.scss / _main.scss）
 *  - .js-reveal による出現アニメーション
 *
 * 命名は `.p-ap-*`（about page）でTOPの `.p-about` と衝突しない。
 * ===================================================================== */
/* /about・/ceo-message・/woman・/jobs・/contact（エントリー）ページでは
 * 右側固定の「沖縄翻訳に切り替える」ボタンを非表示にする
 * （header.php の .l-side-menu__item--translate） */
body.page-template-page-about .l-side-menu__item--translate,
body.page-template-page-ceo-message .l-side-menu__item--translate,
body.page-template-page-woman .l-side-menu__item--translate,
body.page-template-page-jobs .l-side-menu__item--translate,
body.page-template-page-contact .l-side-menu__item--translate,
body.page-template-page-contact-confirm .l-side-menu__item--translate,
body.page-template-page-contact-complete .l-side-menu__item--translate {
  display: none !important;
}

/* =================================================================
 * MV
 * ================================================================= */
.p-ap-mv {
  position: relative;
  width: 100%;
  height: 133.3333333333vw;
  overflow: hidden;
  max-height: 100vh;
  background: #000000;
}
@media (min-width: 768px) {
  .p-ap-mv {
    height: min(56.25vw, 1080px);
  }
}
.p-ap-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 初期：少し傾いて + 位置ずれ + 透明。読み込み後に元に戻す */
  transform: rotate(-4deg) translate3d(-3%, 3%, 0) scale(1.1);
  opacity: 0;
  will-change: transform, opacity;
  animation: p-ap-mv-media-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s forwards;
}
.p-ap-mv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.p-ap-mv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}
.p-ap-mv {
  /* 右上の縦書きラベル（MV内・スクロールで上に流れる） */
}
.p-ap-mv__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: #ffffff;
  padding: 5.3333333333vw 2.1333333333vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .p-ap-mv__label {
    padding: min(2.6041666667vw, 50px) min(1.0416666667vw, 20px);
  }
}
.p-ap-mv__label-text {
  display: inline-block;
  writing-mode: vertical-rl;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 3.7333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-ap-mv__label-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-ap-mv__label-text {
    font-size: clamp(16px, 5.3333333333vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-mv__label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-mv__copy-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
  padding: 10.6666666667vw 6.4vw;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-ap-mv__copy-wrap {
    padding: min(4.1666666667vw, 80px) min(10.4166666667vw, 200px);
  }
}
.p-ap-mv__copy {
  display: flex;
  width: fit-content;
  align-items: center;
  background-color: #fff;
  gap: 0.15em;
  margin: 0 0 2.6666666667vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.023em;
  box-shadow: 5px 4px 4px rgba(0, 0, 0, 0.262745098);
  /* 初期：背景画像と「逆方向」に動く。
   * 背景画像は「左下から右上へ + CCW→0」に動くので、
   * ラベルは「右上から左下へ + CW→-10deg」に動かす。 */
  transform: rotate(8deg) translate3d(15%, -18%, 0);
  opacity: 0;
  will-change: transform, opacity;
  animation: p-ap-mv-copy-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s forwards;
}
@media (min-width: 768px) {
  .p-ap-mv__copy {
    margin-bottom: min(1.0416666667vw, 20px);
  }
}
.p-ap-mv__char {
  width: fit-content;
  display: inline-block;
  transform-origin: center bottom;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  /* 力組TOPと同様の文字ポップを共通キーフレームで */
}
.p-ap-mv__char--01 {
  font-size: clamp(16px, 17.3333333333vw, 150px);
}
@media (min-width: 768px) {
  .p-ap-mv__char--01 {
    font-size: clamp(16px, 7.8125vw, 150px);
  }
}
.p-ap-mv__char--01 {
  animation-delay: 0.3s;
}
.p-ap-mv__char--02 {
  font-size: clamp(16px, 9.0666666667vw, 80px);
}
@media (min-width: 768px) {
  .p-ap-mv__char--02 {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-ap-mv__char--02 {
  animation-delay: 0.5s;
}
.p-ap-mv__en {
  margin: 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(10px);
  animation: anim-txt-1 0.9s ease 1.1s forwards;
  font-size: clamp(16px, 5.3333333333vw, 28px);
}
@media (min-width: 768px) {
  .p-ap-mv__en {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
@media (min-width: 768px) {
  .p-ap-mv__en {
    font-size: clamp(16px, 7.4666666667vw, 48px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-mv__en {
    font-size: clamp(16px, 2.5vw, 48px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-mv__char, .p-ap-mv__en {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-ap-mv__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-ap-mv__copy {
    opacity: 1;
    transform: rotate(-10deg);
    animation: none;
  }
}

/* .p-ap-mv 出現アニメ：
 *  1) 背景画像 (.p-ap-mv__media) が少し傾いた状態 + 位置ずれ → 元の位置へ
 *  2) その直後にラベル (.p-ap-mv__copy) が更に強い傾きから rotate(-10deg) へ
 */
@keyframes p-ap-mv-media-in {
  0% {
    opacity: 0;
    transform: rotate(-4deg) translate3d(-3%, 3%, 0) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: rotate(0) translate3d(0, 0, 0) scale(1);
  }
}
@keyframes p-ap-mv-copy-in {
  /* 背景画像と逆方向：右上(+x, -y) + CW(+deg) → 中央 + 通常の rotate(-10deg) */
  0% {
    opacity: 0;
    transform: rotate(8deg) translate3d(15%, -18%, 0);
  }
  100% {
    opacity: 1;
    transform: rotate(-10deg) translate3d(0, 0, 0);
  }
}
/* =================================================================
 * 解体とは？
 * ================================================================= */
.p-ap-demolition {
  position: relative;
  background: #ffffff;
  padding-block: 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-ap-demolition {
    padding-block: min(5.2083333333vw, 100px);
  }
}
.p-ap-demolition {
  /* 縦書きの英文サイドテキスト
   * Figma: SP は右側 (35px) / PC は左側 (28px)、PC は縦中央配置 */
}
.p-ap-demolition__side {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: rgba(62, 62, 62, 0.3);
  letter-spacing: 0.05em;
  /* SP：右上寄り（Figma に合わせ top:15% で頭出し） */
  top: 15%;
  right: 1.6vw;
  transform: translateY(-50%);
  font-size: clamp(16px, 9.3333333333vw, 28px);
}
@media (min-width: 768px) {
  .p-ap-demolition__side {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-ap-demolition__side {
  /* PC：左側にセクションの上端〜下端まで縦置き（中央寄せ）
   * top + bottom で高さをセクションに固定し、transform は使わない方が確実に表示される。
   * 文字列が短い場合は flex で縦中央寄せ。 */
}
@media (min-width: 768px) {
  .p-ap-demolition__side {
    top: min(5.2083333333vw, 100px);
    bottom: min(5.2083333333vw, 100px);
    left: min(2.6041666667vw, 50px);
    transform: none;
    writing-mode: unset;
    z-index: 1;
    font-size: clamp(16px, 7.4666666667vw, 50px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__side {
    font-size: clamp(16px, 2.6041666667vw, 50px);
  }
}
.p-ap-demolition__side svg {
  width: 30px;
}
@media (min-width: 768px) {
  .p-ap-demolition__side svg {
    width: 55px;
  }
}
.p-ap-demolition__inner {
  display: grid;
  position: relative;
  z-index: 2;
  gap: 10.6666666667vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw; /* SP は両側24px（Figma） */
}
@media (min-width: 768px) {
  .p-ap-demolition__inner {
    grid-template-columns: 1fr 1fr;
    gap: min(3.125vw, 60px);
    padding-inline: min(7.8125vw, 150px);
    align-items: start;
  }
}
.p-ap-demolition__copy {
  display: flex;
  flex-direction: column;
  gap: 8vw;
}
@media (min-width: 768px) {
  .p-ap-demolition__copy {
    gap: min(2.0833333333vw, 40px);
  }
}
.p-ap-demolition__sub {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  transform: skewX(-8deg);
  font-size: clamp(16px, 8vw, 40px);
}
@media (min-width: 768px) {
  .p-ap-demolition__sub {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-demolition__sub {
  /* SP 30 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-demolition__sub {
    font-size: clamp(16px, 16vw, 100px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__sub {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
.p-ap-demolition__title {
  display: flex;
  align-items: flex-end;
  gap: 0.15em;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
}
.p-ap-demolition__title-main {
  width: fit-content;
  display: inline-block;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 21.3333333333vw, 80px);
}
@media (min-width: 768px) {
  .p-ap-demolition__title-main {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-ap-demolition__title-main {
  /* SP 80 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-demolition__title-main {
    font-size: clamp(16px, 21.3333333333vw, 120px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__title-main {
    font-size: clamp(16px, 6.25vw, 120px);
  }
}
.p-ap-demolition__title-end {
  width: fit-content;
  display: inline-block;
  font-size: clamp(16px, 8vw, 40px);
}
@media (min-width: 768px) {
  .p-ap-demolition__title-end {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-demolition__title-end {
  /* SP 30 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-demolition__title-end {
    font-size: clamp(16px, 10.6666666667vw, 60px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__title-end {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
.p-ap-demolition__catch {
  display: flex;
  flex-direction: column;
  gap: 2.6666666667vw;
  margin: 0;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .p-ap-demolition__catch {
    gap: min(1.0416666667vw, 20px);
  }
}
.p-ap-demolition__catch-row {
  margin: 0;
  display: inline-block;
  width: fit-content;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 21.3333333333vw, 80px);
}
@media (min-width: 768px) {
  .p-ap-demolition__catch-row {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-ap-demolition__catch-row {
  /* SP 80 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-demolition__catch-row {
    font-size: clamp(16px, 21.3333333333vw, 140px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__catch-row {
    font-size: clamp(16px, 7.2916666667vw, 140px);
  }
}
.p-ap-demolition__catch-row {
  /* 1段目「壊して」：青地に白文字。
   * 出現アニメ：左→右に青背景が伸びる → 完了後に白文字を出す。
   * - background-image (linear-gradient) を使い、`background-size` を 0% → 100% にアニメ
   * - color は transparent からスタートし、背景アニメ終了時点で #fff に瞬時切替
   *   （transition の duration を 0s、delay を背景アニメ duration と同じにする）
   */
}
.p-ap-demolition__catch-row:nth-child(1) {
  background-color: transparent;
  background-image: linear-gradient(to right, #002BFF, #002BFF);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: transparent;
  will-change: background-size, color;
  transition: background-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s), color 0.4s ease calc(var(--reveal-delay, 0s) + 0.5s);
}
.p-ap-demolition__catch-row:nth-child(1).is-revealed {
  background-size: 100% 100%;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-demolition__catch-row:nth-child(1) {
    background-size: 100% 100%;
    color: #fff;
    transition: none;
  }
}
.p-ap-demolition__catch-row:nth-child(2) {
  color: #002BFF;
}
.p-ap-demolition__lead {
  margin: 0;
  font-family: "Hina Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  line-height: 1.5;
  color: #002BFF;
  letter-spacing: 0.05em;
  font-size: clamp(16px, 6.4vw, 20px);
}
@media (min-width: 768px) {
  .p-ap-demolition__lead {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
.p-ap-demolition__lead {
  /* SP 24 (Figma Shippori Mincho) */
}
@media (min-width: 768px) {
  .p-ap-demolition__lead {
    font-size: clamp(16px, 5.3333333333vw, 28px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__lead {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-ap-demolition__body {
  margin: 0;
  line-height: 1.5;
  color: #3e3e3e;
  font-size: clamp(16px, 4.8vw, 18px);
}
@media (min-width: 768px) {
  .p-ap-demolition__body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-demolition__body {
  /* SP 18 (Figma Medium) */
}
@media (min-width: 768px) {
  .p-ap-demolition__body {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-demolition__body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-demolition__photos {
  display: flex;
  flex-direction: column;
  gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-ap-demolition__photos {
    gap: min(1.9791666667vw, 38px);
  }
}
.p-ap-demolition__photo {
  overflow: hidden;
  border-radius: 0;
  background: #1a1a1a;
}
.p-ap-demolition__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 641/525;
  object-fit: cover;
  /* 画像３：下からせり上がる */
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.p-ap-demolition__photo.is-revealed img {
  animation: anim-img-3 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-demolition__photo img {
    clip-path: none;
    animation: none;
  }
}
.p-ap-demolition .c-btn-tilted:hover .c-btn-tilted__band {
  background-color: #FFF764;
  background-image: unset;
  transition: 0.5s;
}

/* =================================================================
 * 事業紹介
 * ================================================================= */
.p-ap-business {
  position: relative;
  overflow: hidden;
  padding: 21.3333333333vw 0 0;
  background-image: url(../images/about/bg-1.png);
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .p-ap-business {
    padding: min(10.4166666667vw, 200px) 0 0;
  }
}
.p-ap-business {
  /* ぼかしのテクスチャ背景（任意） */
}
.p-ap-business::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.p-ap-business__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-ap-business__inner {
    gap: min(3.125vw, 60px);
    padding-inline: min(10.4166666667vw, 200px);
  }
}
.p-ap-business__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.6666666667vw;
  margin: 0;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  transform: skewX(-8deg);
  text-align: center;
  /* SP は縦並び（Figma） */
  flex-direction: column;
}
@media (min-width: 768px) {
  .p-ap-business__heading {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.1em;
  }
}
.p-ap-business__heading-sub {
  width: fit-content;
  font-size: clamp(16px, 8vw, 40px);
}
@media (min-width: 768px) {
  .p-ap-business__heading-sub {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-business__heading-sub {
  /* SP 30 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-business__heading-sub {
    font-size: clamp(16px, 10.6666666667vw, 80px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__heading-sub {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-ap-business__heading-main {
  width: fit-content;
  font-size: clamp(16px, 21.3333333333vw, 64px);
}
@media (min-width: 768px) {
  .p-ap-business__heading-main {
    font-size: clamp(16px, 3.3333333333vw, 64px);
  }
}
.p-ap-business__heading-main {
  /* SP 80 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-business__heading-main {
    font-size: clamp(16px, 17.0666666667vw, 130px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__heading-main {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
.p-ap-business__body {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1.6;
  font-size: clamp(16px, 6.4vw, 28px);
}
@media (min-width: 768px) {
  .p-ap-business__body {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-ap-business__body {
  /* SP 24（Figma 30 だと改行多発するので少し抑える） */
}
@media (min-width: 768px) {
  .p-ap-business__body {
    font-size: clamp(16px, 7.4666666667vw, 60px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__body {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
@media (max-width: 767.98px) {
  .p-ap-business__body br {
    display: none;
  }
}
.p-ap-business__body {
  /* 行ごと分割フェード（JS の initLineSplitFade で文字を <span class="js-line-char">
   * でラップ → 各 span に --line=行 index がセットされ、ビューポートに入った
   * 行だけが順番にフェードインする）
   *
   * - JS 初期化中の FOUC を防ぐため、is-line-split-ready が付くまで親要素ごと透明にする
   * - 各 char span は inline-block で offsetTop が取れる状態を保ちつつ、
   *   vertical-align: baseline で行揃えを通常テキストと一致させる
   * - フェードの delay は JS 側で transitionDelay を inline で指定する
   *   （同 batch で複数行が見えたとき、上から 0.15s ずつスタガーするため）
   */
}
.p-ap-business__body.js-split-lines {
  opacity: 0;
  transition: opacity 0s linear;
}
.p-ap-business__body.js-split-lines.is-line-split-ready {
  opacity: 1;
}
.p-ap-business__body .js-line-char {
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.5s ease;
  transition-delay: 0.3s !important;
}
.p-ap-business__body .js-line-char.is-line-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-business__body .js-line-char {
    opacity: 1;
    transition: none;
  }
}
.p-ap-business {
  /* 紫の角丸パネル
   * Figma: SP 角丸 100px / PC は 500px。比例ではなく固定値で揃える。 */
}
.p-ap-business__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 16vw;
  background: #ad90f5;
  border-radius: 100px 100px 0 0;
  padding: 18.6666666667vw 6.4vw 13.3333333333vw;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-ap-business__panel {
    margin-top: min(5.2083333333vw, 100px);
    padding: min(3.6458333333vw, 70px) min(7.8125vw, 150px) min(5.2083333333vw, 100px);
    border-radius: min(26.0416666667vw, 500px) min(26.0416666667vw, 500px) 0 0;
  }
}
.p-ap-business__panel-lead {
  margin: 0 0 10.6666666667vw;
  text-align: center;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  font-size: clamp(16px, 5.3333333333vw, 22px);
}
@media (min-width: 768px) {
  .p-ap-business__panel-lead {
    font-size: clamp(16px, 1.1458333333vw, 22px);
  }
}
@media (min-width: 768px) {
  .p-ap-business__panel-lead {
    margin-bottom: min(3.6458333333vw, 70px);
    font-size: clamp(16px, 5.8666666667vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__panel-lead {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
@media (max-width: 767.98px) {
  .p-ap-business__panel-lead br {
    display: none;
  }
}
.p-ap-business__cards {
  display: grid;
  gap: 8vw;
}
@media (min-width: 768px) {
  .p-ap-business__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.0833333333vw, 40px);
  }
}
.p-ap-business__card {
  position: relative;
  height: 112vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8vw;
}
@media (min-width: 768px) {
  .p-ap-business__card {
    height: min(29.5833333333vw, 568px);
    padding-bottom: min(2.0833333333vw, 40px);
  }
}
.p-ap-business__card {
  /* 出現アニメ（画像1スタイル）：scale 0 → 1.05 → 1 のポップイン。
   * .js-reveal で .is-revealed が付与されたら animation を発火。
   * 各 card の `style="--reveal-delay: ...s"` で順次遅延。 */
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: opacity, transform;
}
.p-ap-business__card.is-revealed {
  animation: p-ap-business-card-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) var(--reveal-delay, 0s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-business__card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-ap-business__card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-ap-business__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-ap-business__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.p-ap-business__card-label {
  position: relative;
  z-index: 1;
  width: 110%;
  transform: rotate(-5.88deg);
  background: #ffffff;
  color: #3e3e3e;
  text-align: center;
  padding: 3.7333333333vw 5.3333333333vw;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-ap-business__card-label {
    padding: min(1.0416666667vw, 20px) min(2.0833333333vw, 40px);
    margin-bottom: min(1.5625vw, 30px);
  }
}
.p-ap-business__card-title {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.043em;
  font-size: clamp(16px, 10.6666666667vw, 32px);
}
@media (min-width: 768px) {
  .p-ap-business__card-title {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.p-ap-business__card-title {
  /* SP 40（Figma 49 から微減 / 折返し防止） */
}
@media (min-width: 768px) {
  .p-ap-business__card-title {
    font-size: clamp(16px, 7.4666666667vw, 60px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__card-title {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
.p-ap-business__card-body {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #ffffff;
  text-align: center;
  transform: rotate(-5.88deg);
}
.p-ap-business__card-lead {
  margin: 0 0 0.4em;
  font-weight: 700;
  font-size: clamp(16px, 3.4666666667vw, 15px);
}
@media (min-width: 768px) {
  .p-ap-business__card-lead {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
@media (min-width: 768px) {
  .p-ap-business__card-lead {
    font-size: clamp(16px, 4vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__card-lead {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-business__card-text {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .p-ap-business__card-text {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .p-ap-business__card-text {
    font-size: clamp(16px, 3.7333333333vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-business__card-text {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-business .c-btn-tilted:hover .c-btn-tilted__band {
  background-color: #D400FF;
  background-image: unset;
  transition: 0.5s;
}

/* =================================================================
 * 数字で見る力組
 * ================================================================= */
.p-ap-numbers {
  position: relative;
  background: #ffffff;
  padding-block: 21.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-ap-numbers {
    padding-block: min(10.4166666667vw, 200px);
  }
}
.p-ap-numbers__inner {
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-ap-numbers__inner {
    padding-inline: min(7.8125vw, 150px);
    gap: min(3.6458333333vw, 70px);
  }
}
.p-ap-numbers__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.3333333333vw;
  text-align: center;
}
@media (min-width: 768px) {
  .p-ap-numbers__heading {
    gap: min(2.0833333333vw, 40px);
  }
}
.p-ap-numbers__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.3333333333vw;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  transform: skewX(-8deg);
  /* SP は「数字で見る」(main) を上、「力組」(end) を下に縦並び（Figma） */
  flex-direction: column;
}
@media (min-width: 768px) {
  .p-ap-numbers__title {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.15em;
  }
}
.p-ap-numbers__title-main {
  width: fit-content;
  font-size: clamp(16px, 21.3333333333vw, 48px);
}
@media (min-width: 768px) {
  .p-ap-numbers__title-main {
    font-size: clamp(16px, 2.5vw, 48px);
  }
}
.p-ap-numbers__title-main {
  /* SP 80 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-numbers__title-main {
    font-size: clamp(16px, 12.8vw, 90px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-numbers__title-main {
    font-size: clamp(16px, 4.6875vw, 90px);
  }
}
.p-ap-numbers__title-end {
  width: fit-content;
  font-size: clamp(16px, 8vw, 32px);
}
@media (min-width: 768px) {
  .p-ap-numbers__title-end {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.p-ap-numbers__title-end {
  /* SP 30 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-numbers__title-end {
    font-size: clamp(16px, 8.5333333333vw, 56px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-numbers__title-end {
    font-size: clamp(16px, 2.9166666667vw, 56px);
  }
}
.p-ap-numbers__lead {
  margin: 0;
  color: #3e3e3e;
  line-height: 1.5;
  text-align: center;
  font-size: clamp(16px, 4.8vw, 16px);
}
@media (min-width: 768px) {
  .p-ap-numbers__lead {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
.p-ap-numbers__lead {
  /* SP 18 (Figma Medium) */
}
@media (min-width: 768px) {
  .p-ap-numbers__lead {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-numbers__lead {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-numbers__list {
  display: grid;
  width: 100%;
  /* SP は 2 列（Figma） */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5.3333333333vw 2.6666666667vw;
}
@media (min-width: 768px) {
  .p-ap-numbers__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: min(2.0833333333vw, 40px) min(4.1666666667vw, 80px);
  }
}
.p-ap-numbers__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5.3333333333vw;
  padding: 4.2666666667vw 1.3333333333vw;
  background: #FFF764;
  box-shadow: 9px -9px 0 #1BBFDC;
  overflow: visible; /* はみ出した value をクリップしない */
  min-width: 0; /* 親 grid トラック幅を item の content に引きずらせない */
}
@media (min-width: 768px) {
  .p-ap-numbers__item {
    padding: min(0.5208333333vw, 10px) min(1.5625vw, 30px);
    gap: min(1.0416666667vw, 20px);
  }
}
.p-ap-numbers__item {
  /* 出現アニメ：手前(scale 2.4)から2回転しながら現在位置(scale 1, rotate 0)に着地。
   * `js-reveal` の .is-revealed 付与で transition が走る。
   * 各 item の `style="--reveal-delay: ...s"` で順次遅延もかかる。 */
  opacity: 0;
  /* transform: scale(2.4) rotate(-720deg); */
  transform: scale(3) rotate(-30deg);
  transform-origin: center center;
  will-change: opacity, transform;
  /* transition:
    opacity .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0s),
    transform .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0s); */
  transition: opacity 0.25s ease var(--reveal-delay, 0s), transform 0.25s ease var(--reveal-delay, 0s);
}
.p-ap-numbers__item.is-revealed {
  opacity: 1;
  transform: scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-numbers__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.p-ap-numbers {
  /* 最終行に1個だけ余ったアイテムを中央に配置 =====
   * SP（2列）：13個なら最終行に1個余る → 列をまたいで中央寄せ（grid-column: 1 / -1 + center）
   * PC（3列）：13個なら最終行に1個余る → 2列目に配置 */
}
@media (max-width: 767.98px) {
  .p-ap-numbers__item:last-child:nth-child(2n+1) {
    grid-column: 1/-1;
    max-width: 50%;
    justify-self: center;
  }
}
@media (min-width: 768px) {
  .p-ap-numbers__item:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}
.p-ap-numbers__label {
  margin: 0;
  color: #1E1E1E;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  font-size: clamp(16px, 3.4666666667vw, 16px);
}
@media (min-width: 768px) {
  .p-ap-numbers__label {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
.p-ap-numbers__label {
  /* SP 13 (Figma 13.3) */
}
@media (min-width: 768px) {
  .p-ap-numbers__label {
    font-size: clamp(16px, 4.2666666667vw, 28px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-numbers__label {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-ap-numbers {
  /* __value：基本は右揃え。item 幅を超えたら必ず左方向にはみ出る。
   *
   * text-align: right だけでは ブラウザの実装により右にあふれる事があるため、
   * direction: rtl を使ってインライン方向を右→左に反転させる。
   * これによりテキストの「先頭」が右側に固定され、はみ出した文字は
   * 物理的に左方向に流れる。
   *
   * unicode-bidi: plaintext で各文字の表示順は Unicode の bidi 規則に従う
   * （日本語・数字・括弧などの並びはそのままで、box の流れだけ反転）。 */
}
.p-ap-numbers__value {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 1;
  letter-spacing: -0.023em;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
  min-width: 0;
  text-align: right;
  font-size: clamp(16px, 8.5333333333vw, 40px);
}
@media (min-width: 768px) {
  .p-ap-numbers__value {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-numbers__value {
  /* SP 40 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-numbers__value {
    font-size: clamp(16px, 12vw, 90px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-numbers__value {
    font-size: clamp(16px, 4.6875vw, 90px);
  }
}

/* =================================================================
 * 力組としてのメッセージ
 * ================================================================= */
.p-ap-message {
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
  padding-block: 26.6666666667vw;
}
@media (min-width: 768px) {
  .p-ap-message {
    padding-block: min(10.4166666667vw, 200px);
  }
}
.p-ap-message {
  /* 背景画像はフェードインで出す。
   * <section> 自身ではなく ::before に背景を持たせて opacity でフェード。
   * .js-reveal の .is-revealed で発火。 */
}
.p-ap-message::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../images/about/man-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1s ease;
  pointer-events: none;
}
.p-ap-message.is-revealed::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-message::before {
    opacity: 1;
    transition: none;
  }
}
.p-ap-message__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10.6666666667vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
  text-align: center;
}
@media (min-width: 768px) {
  .p-ap-message__inner {
    gap: min(3.6458333333vw, 70px);
    padding-inline: min(5.2083333333vw, 100px);
  }
}
.p-ap-message__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.3333333333vw;
  margin: 0;
  color: #ffffff;
  transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* SP は「力組としての」(sub) を上、「メッセージ」(main) を下に縦並び（Figma） */
  flex-direction: column;
}
@media (min-width: 768px) {
  .p-ap-message__heading {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.1em;
  }
}
.p-ap-message__heading-sub {
  width: fit-content;
  font-size: clamp(16px, 8vw, 40px);
}
@media (min-width: 768px) {
  .p-ap-message__heading-sub {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-ap-message__heading-sub {
  /* SP 30 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-message__heading-sub {
    font-size: clamp(16px, 10.6666666667vw, 80px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-message__heading-sub {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-ap-message__heading-main {
  width: fit-content;
  font-size: clamp(16px, 21.3333333333vw, 64px);
}
@media (min-width: 768px) {
  .p-ap-message__heading-main {
    font-size: clamp(16px, 3.3333333333vw, 64px);
  }
}
.p-ap-message__heading-main {
  /* SP 80 (Figma) */
}
@media (min-width: 768px) {
  .p-ap-message__heading-main {
    font-size: clamp(16px, 17.0666666667vw, 130px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-message__heading-main {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
.p-ap-message__lead {
  margin: 0;
  color: #ffffff;
  line-height: 1.5;
  font-size: clamp(16px, 4.8vw, 16px);
}
@media (min-width: 768px) {
  .p-ap-message__lead {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
.p-ap-message__lead {
  /* SP 18 (Figma Medium) */
}
@media (min-width: 768px) {
  .p-ap-message__lead {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-message__lead {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-ap-message__big {
  margin: 0;
  color: #cc1522;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.11em;
  /* SP は Figma 96px だと改行多発するので 56 に抑える */
  font-size: clamp(16px, 21.3333333333vw, 100px);
}
@media (min-width: 768px) {
  .p-ap-message__big {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
@media (min-width: 768px) {
  .p-ap-message__big {
    font-size: clamp(16px, 18.6666666667vw, 170px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-ap-message__big {
    font-size: clamp(16px, 8.8541666667vw, 170px);
  }
}
.p-ap-message__big {
  /* MV ラベル (.p-ap-mv__copy) と同じ振り子のような動き：
   * 初期は右上 + 時計回りに傾いた状態 → 中央 + 通常の rotate に着地。
   * .js-reveal で .is-revealed が付与されたら発火（既存の HTML に js-reveal あり）。 */
  opacity: 0;
  transform: rotate(8deg) translate3d(15%, -18%, 0);
  will-change: transform, opacity;
}
.p-ap-message__big.is-revealed {
  animation: p-ap-message-big-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-ap-message__big {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-ap-message .c-btn-tilted:hover .c-btn-tilted__band {
  background-color: #CC1522 !important;
  background-image: unset;
}

/* .p-ap-message__big：MV ラベルと同じ振り子モーション（右上 → 中央） */
@keyframes p-ap-message-big-in {
  0% {
    opacity: 0;
    transform: rotate(8deg) translate3d(15%, -18%, 0);
  }
  100% {
    opacity: 1;
    transform: rotate(0) translate3d(0, 0, 0);
  }
}
/* =================================================================
 * 共通：傾きボタン（Component 7 / 13 / 16）
 * 全ページで使い回せるよう専用クラスに切り出し
 * ================================================================= */
/* 構造：
 *   ┌────────────────────────────────────┐
 *   │ ↘ ← 背景画像（写真）が見える領域  ↙ │
 *   │ ╱╱╱╱╱╱  ラベル（白い斜めバンド） ╱╱╱│
 *   │  ↗ ← 背景画像が見える領域      ↖   │
 *   └────────────────────────────────────┘
 *  - 外枠 .c-btn-tilted: 長方形・背景画像・スキューなし
 *  - ::before: 白い斜めバンド（skewX(-8deg)）。中央を横切る
 *  - __label / __icon: 水平のまま（スキューなし）。z-index で帯の上に乗せる
 *
 *  背景画像は CSS 変数 `--c-btn-tilted-bg` で各 instance ごとに上書き可能。
 *  未指定時は man-bg.png をデフォルトで使用。
 */
.c-btn-tilted {
  position: relative;
  display: block;
  width: 100%;
  /* どのページ・どの位置でも同じ幅で揃える */
  max-width: 89.3333333333vw;
  margin-inline: auto;
  overflow: hidden;
  background-image: var(--c-btn-tilted-bg, url("../images/about/btn-bg-4-color.png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: grayscale(100%);
  transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.3s;
  /* ボタン全体を黒線で囲む */
  border: 3px solid #000000;
}
@media (min-width: 768px) {
  .c-btn-tilted {
    border-width: 4px;
  }
}
.c-btn-tilted {
  /* 長方形ボタンの高さを定義（中央に白いバンドが乗る） */
  min-height: 29.3333333333vw;
}
@media (min-width: 768px) {
  .c-btn-tilted {
    max-width: min(35.4166666667vw, 680px);
    min-height: min(9.375vw, 180px);
  }
}
.c-btn-tilted:hover .c-btn-tilted__band {
  background-image: url(../images/about/btn-hov-bg.png);
  background-size: cover;
  background-position: center;
  transition: 0.5s;
}
.c-btn-tilted {
  /* 白い斜めバンド = <span class="c-btn-tilted__band">
   * label + icon を内包し、中央配置 + rotate() で全体ごと傾ける。
   * 端から少しはみ出させて、回転後もボタン幅をまたぐようにする。 */
}
.c-btn-tilted__band {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 2.1333333333vw 6.4vw;
  background: #ffffff;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  z-index: 1;
  font-size: clamp(16px, 5.8666666667vw, 28px);
}
@media (min-width: 768px) {
  .c-btn-tilted__band {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
@media (min-width: 768px) {
  .c-btn-tilted__band {
    padding: min(0.625vw, 12px) min(2.0833333333vw, 40px);
    font-size: clamp(16px, 7.4666666667vw, 48px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .c-btn-tilted__band {
    font-size: clamp(16px, 2.5vw, 48px);
  }
}
.c-btn-tilted__label {
  display: inline-block;
}
.c-btn-tilted__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  flex: none;
}
.c-btn-tilted__icon svg {
  width: 100%;
  height: 100%;
}
.c-btn-tilted:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25);
  filter: grayscale(0%);
}
.c-btn-tilted {
  /* 出現アニメ：画面に入ったら下からフェード */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.c-btn-tilted.is-revealed {
  animation: c-btn-tilted-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .c-btn-tilted {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes c-btn-tilted-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .p-ap-business__card 出現アニメ（画像1：ポップイン）
 *  scale 0 → 1.05 → 1 でポンと出る */
@keyframes p-ap-business-card-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* /about ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /contact ページ専用スタイル（エントリー / お問い合わせ）
 *
 * Figma:
 *  - PC: 110:898
 *
 * MW WP Form のショートコードに合わせた markup を style する：
 *   .contact > .contact_forms > .inner > .lead-txt + .formwrap
 *   .formwrap > .contact-step (li.step01.active 等) + .form_items
 *   .form_items > .item.[nogrid] > .ttl + .detail
 *   .item.nogrid > .wrap > .ttl + .detail
 *   .detail > .formarea (.w200, .radiobtn 等) + .attention
 *   .item .privacy / .agree / .btns
 * ===================================================================== */
/* MV タイトル (cyan) */
/* 必須バッジ */
/* 各 row 区切り */
/* =================================================================
 * MV
 * ================================================================= */
.p-cn-mv {
  position: relative;
  width: 100%;
  height: 112vw;
  max-height: 100vh;
  overflow: hidden;
  background: #2a2a2a;
}
@media (min-width: 768px) {
  .p-cn-mv {
    height: min(56.25vw, 1080px);
  }
}
.p-cn-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-cn-mv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-cn-mv {
  /* 「ここから 始まる。」cyan + skew */
}
.p-cn-mv__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #1BBFDC;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  text-align: center;
}
.p-cn-mv__copy-text {
  display: inline-block;
  transform: skewX(-8deg);
  font-size: clamp(16px, 18.6666666667vw, 120px);
}
@media (min-width: 768px) {
  .p-cn-mv__copy-text {
    font-size: clamp(16px, 6.25vw, 120px);
  }
}
@media (min-width: 768px) {
  .p-cn-mv__copy-text {
    font-size: clamp(16px, 32vw, 312px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cn-mv__copy-text {
    font-size: clamp(16px, 16.25vw, 312px);
  }
}
.p-cn-mv__copy-line {
  display: block;
}

/* =================================================================
 * フォーム全体ラッパ
 * ================================================================= */
.contact .lead-txt {
  text-align: center;
}
.contact .contact_forms {
  background: #ffffff;
}
.contact .contact_forms .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16vw 6.4vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner {
    padding: min(6.25vw, 120px) min(2.0833333333vw, 40px) min(7.8125vw, 150px);
  }
}
.contact .contact_forms .inner {
  /* リード文 */
}
.contact .contact_forms .inner .lead-txt .txt {
  margin: 0 0 10.6666666667vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 1.8;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 3.4666666667vw, 15px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .lead-txt .txt {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .lead-txt .txt {
    margin-bottom: min(4.1666666667vw, 80px);
    font-size: clamp(16px, 4vw, 20px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .lead-txt .txt {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
.contact .contact_forms .inner {
  /* ステップインジケーター（3つの矢印タブ）
   * assets/images/contact/ にある step0X-{b|w}.png をそのまま背景画像として使う。
   *   - step01.active → step01-b.png（黒地・白文字）
   *   - step01        → step01-w.png（白地・黒文字）
   *   - step02 も同様
   *   - step03 は単一画像（step03.png / step03_sp.png）
   * SP は _sp.png バリアントに差し替え。 */
}
.contact .contact_forms .inner .contact-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  justify-content: center;
  align-items: center;
  margin: 0 auto 10.6666666667vw;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 1106px;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .contact-step {
    margin-bottom: min(6.25vw, 120px);
  }
}
.contact .contact_forms .inner .contact-step li {
  /* 画像サイズ比に合わせた高さ確保 */
  width: 100%;
  aspect-ratio: 378/100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: clamp(16px, 2.9333333333vw, 13px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .contact-step li {
    font-size: clamp(16px, 0.6770833333vw, 13px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .contact-step li {
    font-size: clamp(16px, 4.2666666667vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .contact-step li {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.contact .contact_forms .inner .contact-step li {
  /* active 状態（黒地）は白文字 */
}
.contact .contact_forms .inner .contact-step li.active {
  color: #ffffff;
}
.contact .contact_forms .inner .contact-step li {
  /* === step01 === */
}
.contact .contact_forms .inner .contact-step li.step01 {
  background-image: url("../images/contact/step01-w.png");
  background-position: right center;
}
@media (max-width: 767.98px) {
  .contact .contact_forms .inner .contact-step li.step01 {
    background-image: url("../images/contact/step01-w_sp.png");
  }
}
.contact .contact_forms .inner .contact-step li.step01.active {
  background-image: url("../images/contact/step01-b.png");
}
@media (max-width: 767.98px) {
  .contact .contact_forms .inner .contact-step li.step01.active {
    background-image: url("../images/contact/step01-b_sp.png");
  }
}
.contact .contact_forms .inner .contact-step li {
  /* === step02 === */
}
.contact .contact_forms .inner .contact-step li.step02 {
  background-image: url("../images/contact/step02-w.png");
  background-position: center center;
}
@media (max-width: 767.98px) {
  .contact .contact_forms .inner .contact-step li.step02 {
    background-image: url("../images/contact/step02-w_sp.png");
  }
}
.contact .contact_forms .inner .contact-step li.step02.active {
  background-image: url("../images/contact/step02-b.png");
}
@media (max-width: 767.98px) {
  .contact .contact_forms .inner .contact-step li.step02.active {
    background-image: url("../images/contact/step02-b_sp.png");
  }
}
.contact .contact_forms .inner .contact-step li {
  /* === step03（active なし。常に同じ画像） === */
}
.contact .contact_forms .inner .contact-step li.step03 {
  background-image: url("../images/contact/step03.png");
  background-position: left center;
}
@media (max-width: 767.98px) {
  .contact .contact_forms .inner .contact-step li.step03 {
    background-image: url("../images/contact/step03_sp.png");
  }
}
.contact .contact_forms .inner .contact-step li {
  /* 画像内にテキストが含まれているので、span のテキストは
   * 視覚的には非表示にしつつスクリーンリーダー用に残す。 */
}
.contact .contact_forms .inner .contact-step li span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.contact .contact_forms .inner {
  /* ============================================================
   * .form_items（MW WP Form の本体）
   * 各 .item は label + input の 2 列レイアウト（PC）
   * ============================================================ */
}
.contact .contact_forms .inner .form_items {
  width: 100%;
  max-width: min(900px, 100%);
  margin: 0 auto;
}
.contact .contact_forms .inner .form_items form {
  display: contents;
}
.contact .contact_forms .inner .form_items .item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6666666667vw;
  padding: 8vw 0;
  border-top: 1px solid #d9d9d9;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item {
    grid-template-columns: min(14.5833333333vw, 280px) 1fr;
    gap: min(2.0833333333vw, 40px);
    padding: min(1.8229166667vw, 35px) 0;
    align-items: start;
  }
}
.contact .contact_forms .inner .form_items .item:first-of-type {
  border-top: 0;
}
.contact .contact_forms .inner .form_items .item {
  /* nogrid：1 列で .wrap を縦に積んで複数項目を配置 */
}
.contact .contact_forms .inner .form_items .item.nogrid {
  display: flex;
  flex-direction: column;
  gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item.nogrid {
    gap: min(1.5625vw, 30px);
  }
}
.contact .contact_forms .inner .form_items .item.nogrid > .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6666666667vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item.nogrid > .wrap {
    grid-template-columns: min(14.5833333333vw, 280px) 1fr;
    gap: min(2.0833333333vw, 40px);
    align-items: start;
  }
}
.contact .contact_forms .inner .form_items .item {
  /* タイトル */
}
.contact .contact_forms .inner .form_items .item .ttl {
  display: inline-flex;
  align-items: center;
  gap: 2.6666666667vw;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 1.4;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4vw, 16px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl {
    gap: min(1.0416666667vw, 20px);
    font-size: clamp(16px, 4.2666666667vw, 21px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl {
    font-size: clamp(16px, 1.09375vw, 21px);
  }
}
.contact .contact_forms .inner .form_items .item .ttl .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0666666667vw 2.1333333333vw;
  background: #1698D9;
  color: #ffffff;
  border-radius: 5px;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 1;
  flex: none;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl .required {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl .required {
    padding: min(0.4166666667vw, 8px) min(0.5208333333vw, 10px);
    font-size: clamp(16px, 3.7333333333vw, 19px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .ttl .required {
    font-size: clamp(16px, 0.9895833333vw, 19px);
  }
}
.contact .contact_forms .inner .form_items .item {
  /* 入力エリア */
}
.contact .contact_forms .inner .form_items .item .detail {
  width: 100%;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail {
    max-width: min(36.4583333333vw, 700px);
  }
}
.contact .contact_forms .inner .form_items .item .detail .formarea {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 3.7333333333vw, 15px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
.contact .contact_forms .inner .form_items .item .detail .formarea {
  color: #000000;
}
.contact .contact_forms .inner .form_items .item .detail {
  /* 入力フィールド共通 */
}
.contact .contact_forms .inner .form_items .item .detail input[type=text],
.contact .contact_forms .inner .form_items .item .detail input[type=email],
.contact .contact_forms .inner .form_items .item .detail input[type=tel],
.contact .contact_forms .inner .form_items .item .detail textarea {
  width: 100%;
  background: #F2F2F2;
  border: 1px solid #C4C3C3;
  border-radius: 10px;
  padding: 3.7333333333vw 4.2666666667vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: clamp(16px, 3.7333333333vw, 15px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail input[type=text],
  .contact .contact_forms .inner .form_items .item .detail input[type=email],
  .contact .contact_forms .inner .form_items .item .detail input[type=tel],
  .contact .contact_forms .inner .form_items .item .detail textarea {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail input[type=text],
  .contact .contact_forms .inner .form_items .item .detail input[type=email],
  .contact .contact_forms .inner .form_items .item .detail input[type=tel],
  .contact .contact_forms .inner .form_items .item .detail textarea {
    padding: min(0.9375vw, 18px) min(1.0416666667vw, 20px);
    font-size: clamp(16px, 4vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail input[type=text],
  .contact .contact_forms .inner .form_items .item .detail input[type=email],
  .contact .contact_forms .inner .form_items .item .detail input[type=tel],
  .contact .contact_forms .inner .form_items .item .detail textarea {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.contact .contact_forms .inner .form_items .item .detail input[type=text]:focus,
.contact .contact_forms .inner .form_items .item .detail input[type=email]:focus,
.contact .contact_forms .inner .form_items .item .detail input[type=tel]:focus,
.contact .contact_forms .inner .form_items .item .detail textarea:focus {
  outline: 2px solid #1698D9;
  outline-offset: 2px;
}
.contact .contact_forms .inner .form_items .item .detail input[type=text],
.contact .contact_forms .inner .form_items .item .detail input[type=email],
.contact .contact_forms .inner .form_items .item .detail input[type=tel] {
  height: 14.9333333333vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail input[type=text],
  .contact .contact_forms .inner .form_items .item .detail input[type=email],
  .contact .contact_forms .inner .form_items .item .detail input[type=tel] {
    height: min(3.6458333333vw, 70px);
  }
}
.contact .contact_forms .inner .form_items .item .detail textarea {
  min-height: 42.6666666667vw;
  resize: vertical;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail textarea {
    min-height: min(10.4166666667vw, 200px);
  }
}
.contact .contact_forms .inner .form_items .item .detail {
  /* 補足テキスト */
}
.contact .contact_forms .inner .form_items .item .detail .attention {
  margin: 2.6666666667vw 0 0;
  color: #707070;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(16px, 3.2vw, 13px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .attention {
    font-size: clamp(16px, 0.6770833333vw, 13px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .attention {
    margin-top: min(1.0416666667vw, 20px);
    font-size: clamp(16px, 3.4666666667vw, 16px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .attention {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
.contact .contact_forms .inner .form_items .item .detail {
  /* 郵便番号 行：〒 + input + 検索ボタン */
}
.contact .contact_forms .inner .form_items .item .detail .formarea.w200 {
  display: flex;
  align-items: center;
  gap: 2.6666666667vw;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea.w200 {
    gap: min(1.0416666667vw, 20px);
    flex-wrap: nowrap;
  }
}
.contact .contact_forms .inner .form_items .item .detail .formarea.w200 input {
  width: 42.6666666667vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea.w200 input {
    width: min(10.4166666667vw, 200px);
  }
}
.contact .contact_forms .inner .form_items .item .detail .formarea.w200 .btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.6666666667vw 4.2666666667vw;
  background: #000000;
  color: #ffffff;
  border-radius: 10px;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea.w200 .btn-search {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea.w200 .btn-search {
    padding: min(0.5208333333vw, 10px) min(1.0416666667vw, 20px);
    font-size: clamp(16px, 3.7333333333vw, 19px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail .formarea.w200 .btn-search {
    font-size: clamp(16px, 0.9895833333vw, 19px);
  }
}
.contact .contact_forms .inner .form_items .item .detail .formarea.w200 .btn-search:hover {
  opacity: 0.85;
}
.contact .contact_forms .inner .form_items .item .detail {
  /* ラジオボタン */
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn .formarea {
  display: flex;
  flex-direction: column;
  gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn .formarea {
    gap: min(1.5625vw, 30px);
  }
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field {
  margin: 0;
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field label {
  display: inline-flex;
  align-items: center;
  gap: 2.6666666667vw;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field label {
    gap: min(0.78125vw, 15px);
  }
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field .mwform-radio-field-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #000000;
  font-size: clamp(16px, 3.7333333333vw, 16px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field .mwform-radio-field-text {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field .mwform-radio-field-text {
    font-size: clamp(16px, 4.2666666667vw, 21px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn .mwform-radio-field .mwform-radio-field-text {
    font-size: clamp(16px, 1.09375vw, 21px);
  }
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio].custom-radio,
.contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 5.8666666667vw;
  height: 5.8666666667vw;
  border: 2px solid #000000;
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  flex: none;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio].custom-radio,
  .contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio] {
    width: min(1.3020833333vw, 25px);
    height: min(1.3020833333vw, 25px);
  }
}
.contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio].custom-radio:checked::after,
.contact .contact_forms .inner .form_items .item .detail.radiobtn input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #000000;
}
.contact .contact_forms .inner .form_items .item {
  /* プライバシーポリシー */
}
.contact .contact_forms .inner .form_items .item .privacy {
  background: #ffffff;
  border: 1px solid #000000;
  padding: 8vw 5.3333333333vw;
  display: flex;
  flex-direction: column;
  gap: 5.3333333333vw;
  max-height: 96vw;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy {
    padding: min(2.6041666667vw, 50px);
    gap: min(1.5625vw, 30px);
    max-height: min(18.75vw, 360px);
  }
}
.contact .contact_forms .inner .form_items .item .privacy {
  /* スクロールバー */
}
.contact .contact_forms .inner .form_items .item .privacy::-webkit-scrollbar {
  width: 7px;
}
.contact .contact_forms .inner .form_items .item .privacy::-webkit-scrollbar-thumb {
  background: #d7d6d6;
  border-radius: 5px;
}
.contact .contact_forms .inner .form_items .item .privacy::-webkit-scrollbar-track {
  background: transparent;
}
.contact .contact_forms .inner .form_items .item .privacy .ttl {
  display: block;
  margin: 0;
  text-align: center;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy .ttl {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy .ttl {
    font-size: clamp(16px, 4.8vw, 21px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy .ttl {
    font-size: clamp(16px, 1.09375vw, 21px);
  }
}
.contact .contact_forms .inner .form_items .item .privacy p {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy p {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy p {
    font-size: clamp(16px, 3.4666666667vw, 16px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .privacy p {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
.contact .contact_forms .inner .form_items .item {
  /* プライバシーポリシー同意 */
}
.contact .contact_forms .inner .form_items .item .agree .formarea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .formarea {
    gap: min(1.5625vw, 30px);
  }
}
.contact .contact_forms .inner .form_items .item .agree .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0666666667vw 2.1333333333vw;
  background: #1698D9;
  color: #ffffff;
  border-radius: 5px;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 1;
  flex: none;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .required {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .required {
    padding: min(0.4166666667vw, 8px) min(0.5208333333vw, 10px);
    font-size: clamp(16px, 3.7333333333vw, 19px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .required {
    font-size: clamp(16px, 0.9895833333vw, 19px);
  }
}
.contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field {
  margin: 0;
}
.contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: 2.6666666667vw;
  cursor: pointer;
  user-select: none;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 1.4;
  font-size: clamp(16px, 3.4666666667vw, 15px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label {
    gap: min(0.78125vw, 15px);
    font-size: clamp(16px, 4vw, 21px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label {
    font-size: clamp(16px, 1.09375vw, 21px);
  }
}
.contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label input[type=checkbox] {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin: 0;
  accent-color: #1698D9;
  cursor: pointer;
  flex: none;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .item .agree .mwform-checkbox-field label input[type=checkbox] {
    width: 20px;
    height: 20px;
  }
}
.contact .contact_forms .inner .form_items {
  /* 送信ボタン群 */
}
.contact .contact_forms .inner .form_items .btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.3333333333vw;
  margin: 13.3333333333vw auto 0;
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .btns {
    flex-direction: row;
    justify-content: center;
    gap: min(1.5625vw, 30px);
    margin-top: min(4.1666666667vw, 80px);
  }
}
.contact .contact_forms .inner .form_items .btns .btn-confirm,
.contact .contact_forms .inner .form_items .btns .btn-submit,
.contact .contact_forms .inner .form_items .btns .btn-back {
  display: inline-block;
}
.contact .contact_forms .inner .form_items .btns .btn-confirm button,
.contact .contact_forms .inner .form_items .btns .btn-submit button,
.contact .contact_forms .inner .form_items .btns .btn-back button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  min-width: 58.6666666667vw;
  padding: 4.8vw 10.6666666667vw;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .btns .btn-confirm button,
  .contact .contact_forms .inner .form_items .btns .btn-submit button,
  .contact .contact_forms .inner .form_items .btns .btn-back button {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
@media (min-width: 768px) {
  .contact .contact_forms .inner .form_items .btns .btn-confirm button,
  .contact .contact_forms .inner .form_items .btns .btn-submit button,
  .contact .contact_forms .inner .form_items .btns .btn-back button {
    min-width: min(14.5833333333vw, 280px);
    padding: min(1.5625vw, 30px) min(3.125vw, 60px);
    gap: min(1.3020833333vw, 25px);
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .contact .contact_forms .inner .form_items .btns .btn-confirm button,
  .contact .contact_forms .inner .form_items .btns .btn-submit button,
  .contact .contact_forms .inner .form_items .btns .btn-back button {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.contact .contact_forms .inner .form_items .btns .btn-confirm button:hover,
.contact .contact_forms .inner .form_items .btns .btn-submit button:hover,
.contact .contact_forms .inner .form_items .btns .btn-back button:hover {
  background: #000000;
  color: #ffffff;
}
.contact .contact_forms .inner .form_items .btns {
  /* 戻るボタンは少し控えめに */
}
.contact .contact_forms .inner .form_items .btns .btn-back button {
  background: transparent;
}
.contact .contact_forms {
  /* 確認画面：注釈などを非表示 */
}
.contact .contact_forms.contact-confirm .form_items .item .detail .attention,
.contact .contact_forms.contact-confirm .form_items .item .privacy,
.contact .contact_forms.contact-confirm .form_items .item .agree,
.contact .contact_forms.contact-confirm .form_items .item .detail .formarea.w200 .btn-search {
  display: none;
}
.contact .contact_forms {
  /* 送信完了 */
}
.contact .contact_forms.complete .formwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .contact .contact_forms.complete .formwrap {
    gap: min(5.2083333333vw, 100px);
  }
}
.contact .contact_forms.complete .formwrap .complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.3333333333vw;
}
.contact .contact_forms.complete .formwrap .complete .text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 1.8;
  color: #000000;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .contact .contact_forms.complete .formwrap .complete .text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
.contact .contact_forms.complete .formwrap .desc p {
  text-align: center;
  font-size: clamp(16px, 3.7333333333vw, 16px);
}
@media (min-width: 768px) {
  .contact .contact_forms.complete .formwrap .desc p {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}

/* /contact ページではヘッダー右側固定の翻訳切替ボタンを非表示 */
body.page-template-page-contact .l-side-menu__item--translate {
  display: none !important;
}

/* /about ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /vision ページ専用スタイル（力組としての想い）
 *
 * 共通利用：
 *  - text-cutout mixin（_mixins.scss）
 *  - .p-entry（エントリーCTA：_main.scss）
 *  - anim-img-1 / anim-img-3 / anim-txt-1 キーフレーム
 *  - .js-reveal による出現アニメ
 *
 * 命名は `.p-vp-*`（vision page）でTOPの `.p-vision` と衝突しない。
 * ===================================================================== */
/* =================================================================
 * MV
 * ================================================================= */
.p-vp-mv {
  position: relative;
  width: 100%;
  height: 133.3333333333vw;
  overflow: hidden;
  max-height: 100vh;
  background: #d7d7d7;
}
@media (min-width: 768px) {
  .p-vp-mv {
    height: min(56.25vw, 1080px);
  }
}
.p-vp-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-vp-mv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* MV 背景画像：その場でゆっくりフェードイン */
  opacity: 0;
  will-change: opacity;
  animation: anim-img-2 1.2s ease 0.1s forwards;
}
.p-vp-mv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-vp-mv__media img {
    opacity: 1;
    animation: none;
  }
}
.p-vp-mv {
  /* 右上の縦書きラベル */
}
.p-vp-mv__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: #ffffff;
  padding: 5.3333333333vw 2.1333333333vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .p-vp-mv__label {
    padding: min(2.6041666667vw, 50px) min(1.0416666667vw, 20px);
  }
}
.p-vp-mv__label-text {
  display: inline-block;
  writing-mode: vertical-rl;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 3.7333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-vp-mv__label-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-vp-mv__label-text {
    font-size: clamp(16px, 5.3333333333vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-mv__label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-vp-mv__copy-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10.6666666667vw 6.4vw;
  color: #ffffff;
}
.p-vp-mv__copy {
  margin: 0;
  transform: skewX(-8deg);
  transform-origin: center;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.023em;
  text-align: center;
}
.p-vp-mv__copy-text {
  display: inline-block;
  width: fit-content;
  text-align: left;
  /* JS が文字分割するまで非表示にして FOUC を防ぐ */
  visibility: hidden;
}
.p-vp-mv__copy-text.is-char-split {
  visibility: visible;
}
.p-vp-mv__copy-text {
  font-size: clamp(16px, 8vw, 30px);
}
@media (min-width: 768px) {
  .p-vp-mv__copy-text {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
@media (min-width: 768px) {
  .p-vp-mv__copy-text {
    font-size: clamp(16px, 9.6vw, 80px);
    text-align: center;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-mv__copy-text {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-vp-mv {
  /* 文字単位ポップアニメ（JS の initVpMvCopySplit で 1 文字ずつ span 化）
   * 左から順に scale 0 → 1.1 → 1 で「はずむ」ように出てくる */
}
.p-vp-mv__char {
  display: inline-block;
  width: fit-content;
  opacity: 0;
  transform: scale(0);
  transform-origin: center bottom;
  will-change: opacity, transform;
  animation: p-vp-mv-char-pop 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--char-i, 0) * 0.06s + 0.3s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-vp-mv__copy-text {
    visibility: visible;
  }
  .p-vp-mv__char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* MV コピーの文字ポップ：1 文字ずつ scale 0 → 1.1 → 1 */
@keyframes p-vp-mv-char-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* =================================================================
 * 力組の想い + MISSION/VISION/VALUE 円バッジ
 * ================================================================= */
.p-vp-intent {
  position: relative;
  background: #ffffff;
  padding-block: 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vp-intent {
    padding-block: min(5.2083333333vw, 100px);
  }
}
.p-vp-intent__inner {
  display: grid;
  gap: 10.6666666667vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-vp-intent__inner {
    grid-template-columns: 624fr 700fr;
    gap: min(6.25vw, 120px);
    padding-inline: min(12.5vw, 240px);
    align-items: center;
  }
}
@media (min-width: 768px) {
  .p-vp-intent__inner {
    flex-direction: column-reverse;
  }
}
.p-vp-intent__copy {
  display: flex;
  flex-direction: column;
  gap: 8vw;
}
@media (min-width: 768px) {
  .p-vp-intent__copy {
    gap: min(4.1666666667vw, 80px);
  }
}
.p-vp-intent__title {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.023em;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}
.p-vp-intent__title-text {
  display: inline-block;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 9.6vw, 48px);
}
@media (min-width: 768px) {
  .p-vp-intent__title-text {
    font-size: clamp(16px, 2.5vw, 48px);
  }
}
@media (min-width: 768px) {
  .p-vp-intent__title-text {
    font-size: clamp(16px, 12.8vw, 80px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-intent__title-text {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
.p-vp-intent__body {
  color: #000000;
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(16px, 3.7333333333vw, 16px);
}
@media (min-width: 768px) {
  .p-vp-intent__body {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
@media (min-width: 768px) {
  .p-vp-intent__body {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-intent__body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-vp-intent__body p {
  margin: 0 0 1em;
}
.p-vp-intent__body p:last-child {
  margin-bottom: 0;
}
.p-vp-intent {
  /* 3つの円バッジ：階段状に配置 */
}
.p-vp-intent__circles {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 101.3333333333vw;
}
@media (min-width: 768px) {
  .p-vp-intent__circles {
    min-height: min(35.4166666667vw, 680px);
  }
}
.p-vp-intent__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.1333333333vw;
  width: 50.6666666667vw;
  height: 50.6666666667vw;
  border: 3px solid #d9d9d9;
  border-radius: 50%;
  text-align: center;
}
@media (min-width: 768px) {
  .p-vp-intent__circle {
    width: min(18.90625vw, 363px);
    height: min(18.90625vw, 363px);
    gap: min(0.5208333333vw, 10px);
  }
}
.p-vp-intent__circle {
  /* 階段状配置：PC と SP で同じジグザグパターン
   *   1: 左上 / 2: 中央右 / 3: 左下 */
  position: absolute;
}
.p-vp-intent__circle--1 {
  top: 0;
  left: 2.1333333333vw;
}
.p-vp-intent__circle--2 {
  top: 21.3333333333vw;
  left: auto;
  right: 0;
  transform: none;
}
.p-vp-intent__circle--3 {
  top: 42.6666666667vw;
  left: 0;
  right: auto;
}
@media (min-width: 768px) {
  .p-vp-intent__circle--1 {
    top: 0;
    left: min(1.3541666667vw, 26px);
    right: auto;
    transform: none;
  }
  .p-vp-intent__circle--2 {
    top: min(8.59375vw, 165px);
    left: min(15.8854166667vw, 305px);
    right: auto;
    transform: none;
  }
  .p-vp-intent__circle--3 {
    top: min(15.1041666667vw, 290px);
    left: 10px;
    right: auto;
    transform: none;
  }
}
.p-vp-intent__circle {
  /* 出現アニメ：画像１（scale 0 → 1.05 → 1 のポップイン）
   * .js-reveal の .is-revealed で発火。
   * 各 circle の `style="--reveal-delay: ...s"` で順次遅延。
   * keyframe は p-vp-mvv-media-pop を再利用。 */
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: opacity, transform;
}
.p-vp-intent__circle.is-revealed {
  animation: p-vp-mvv-media-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) var(--reveal-delay, 0s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-vp-intent__circle {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-vp-intent__circle-en {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  /* 白文字 + 黒2px 縁取り */
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
  paint-order: stroke fill;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4.8vw, 22px);
}
@media (min-width: 768px) {
  .p-vp-intent__circle-en {
    font-size: clamp(16px, 1.1458333333vw, 22px);
  }
}
@media (min-width: 768px) {
  .p-vp-intent__circle-en {
    font-size: clamp(16px, 5.3333333333vw, 30px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-intent__circle-en {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-vp-intent__circle-jp {
  display: inline-block;
  transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.023em;
  /* 文字を空の画像で切り抜き表示 */
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 5.3333333333vw, 22px);
}
@media (min-width: 768px) {
  .p-vp-intent__circle-jp {
    font-size: clamp(16px, 1.1458333333vw, 22px);
  }
}
@media (min-width: 768px) {
  .p-vp-intent__circle-jp {
    font-size: clamp(16px, 6.4vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-intent__circle-jp {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}

/* =================================================================
 * MISSION / VISION / VALUE バナー
 * ================================================================= */
.p-vp-mvv {
  position: relative;
  background: #ffffff;
  padding: 10.6666666667vw 0 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vp-mvv {
    padding: min(2.6041666667vw, 50px) min(4.1666666667vw, 80px) min(5.2083333333vw, 100px);
  }
}
.p-vp-mvv__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 5.3333333333vw 5.3333333333vw;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 1755px;
}
@media (min-width: 768px) {
  .p-vp-mvv__list {
    gap: min(4.2708333333vw, 82px) min(2.3958333333vw, 46px);
  }
}
.p-vp-mvv__item {
  position: relative;
  width: 100%;
  aspect-ratio: 400/533;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vp-mvv__item--mission {
    width: 100%;
    aspect-ratio: 1755/886;
  }
  .p-vp-mvv__item--vision, .p-vp-mvv__item--value {
    width: calc(50% - min(1.1979166667vw, 23px));
    aspect-ratio: 855/812;
  }
}
.p-vp-mvv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 出現アニメ：画像1 (scale 0 → 1.05 → 1 のポップイン) */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
}
.p-vp-mvv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-vp-mvv {
  /* item に .is-revealed が付くと、まず media がポップイン */
}
.p-vp-mvv__item.is-revealed .p-vp-mvv__media {
  animation: p-vp-mvv-media-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) var(--reveal-delay, 0s) forwards;
}
.p-vp-mvv {
  /* 中央の色付きラベル（傾き付き） */
}
.p-vp-mvv__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* 初期：少し傾いて位置がずれた状態
   * .is-revealed で素早く現在位置へスライド戻し */
  opacity: 0;
  transform: rotate(6deg) translate3d(-8%, 10%, 0);
  will-change: opacity, transform;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-vp-mvv__item.is-revealed .p-vp-mvv__label {
  opacity: 1;
  transform: none;
  /* media のポップ完了寄りに開始：reveal-delay + media duration の中盤 */
}
@media (prefers-reduced-motion: reduce) {
  .p-vp-mvv__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-vp-mvv__label {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.p-vp-mvv__label-text {
  display: inline-block;
  margin: 0;
  padding: 4.2666666667vw 2.1333333333vw;
  background: var(--mvv-bg, #ffffff);
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  text-align: center;
  transform: rotate(-5deg);
  width: fit-content;
  font-size: clamp(16px, 10.6666666667vw, 40px);
}
@media (min-width: 768px) {
  .p-vp-mvv__label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
@media (min-width: 768px) {
  .p-vp-mvv__label-text {
    padding: min(1.4583333333vw, 28px) min(0.7291666667vw, 14px);
    font-size: clamp(16px, 7.4666666667vw, 62px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-mvv__label-text {
    font-size: clamp(16px, 3.2291666667vw, 62px);
  }
}
.p-vp-mvv {
  /* ============== ホバー時のコンテンツ表示 ==============
   * Figma:
   *   - MISSION (138:1007 改): 英字は表示せず、白マスクをやや強め + 説明ラベルのみ
   *   - VISION  (138:1018): 大きな白 V + ISION + 薄く残る __label + 説明ラベル
   *   - VALUE   (138:1031): 大きな白 V + ALUE + 薄く残る __label + 説明ラベル
   *
   * 文字サイズは cqw（container query width）でタイルごとに比例スケール。
   */
}
.p-vp-mvv__item {
  container-type: inline-size; /* 子で cqw を使うため */
  background: #ffffff; /* 画像を半透明にしたとき下に白が透ける */
}
.p-vp-mvv {
  /* 画像はホバーで薄く（白マスクの代用） */
}
.p-vp-mvv__media {
  transition: opacity 0.35s ease;
}
.p-vp-mvv__item:hover .p-vp-mvv__media img {
  opacity: 0.6;
  transition: 0.5s;
}
.p-vp-mvv {
  /* 通常ラベル：
   * - MISSION:      ホバー時に完全に消す
   * - VISION/VALUE: ホバー時も薄く（opacity .2）残る（Figma 通り）
   * 既存の .is-revealed &__label と同じ詳細度なので、ソース順で後勝ちにする。 */
}
.p-vp-mvv__item:hover .p-vp-mvv__label {
  opacity: 0;
}
.p-vp-mvv {
  /* ----- 大きな白英字（V + ISION / V + ALUE）-----
   * MISSION ではこの要素自体を PHP 側で出力しない。 */
}
.p-vp-mvv__en-first {
  display: inline-block;
  font-size: clamp(160px, 105cqw, 900px);
  line-height: 0.85;
  /* 続く ISION/ALUE と重ねるため右に強めの負マージン */
  margin-right: -32cqw;
}
.p-vp-mvv__en-rest {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: clamp(28px, 17.5cqw, 150px);
  line-height: 0.85;
}
.p-vp-mvv {
  /* ----- 斜めの色付き説明ラベル ----- */
}
.p-vp-mvv__desc {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 4cqw;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.p-vp-mvv__item:hover .p-vp-mvv__desc {
  opacity: 1;
  transition: 0.5s;
}
.p-vp-mvv__desc-text {
  margin: 0;
  max-width: 95%;
  background: var(--mvv-bg-2);
  mix-blend-mode: multiply;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.023em;
  text-align: center;
  padding: clamp(10px, 1.6cqw, 30px) clamp(10px, 1.1cqw, 30px);
  transform: rotate(-5deg);
  font-size: clamp(16px, 2cqw, 35px);
}
@media (prefers-reduced-motion: reduce) {
  .p-vp-mvv__media, .p-vp-mvv__en, .p-vp-mvv__desc, .p-vp-mvv__label {
    transition: none;
  }
}

/* MVV media ポップイン：画像1 (scale 0 → 1.05 → 1) */
@keyframes p-vp-mvv-media-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* =================================================================
 * 社長メッセージ導線
 * ================================================================= */
.p-vp-ceo {
  position: relative;
  background: #ffffff;
  padding-block: 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vp-ceo {
    padding-block: min(8.8541666667vw, 170px);
  }
}
.p-vp-ceo__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 12.8vw);
  margin: 0 auto;
  aspect-ratio: 1460/480;
  padding: 10.6666666667vw 5.3333333333vw;
  background: linear-gradient(102deg, #ffffff 3.6%, #d8d8d8 93.5%);
  border-radius: 21.3333333333vw;
  box-shadow: 0 4px 17px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-vp-ceo__panel {
    width: min(76.0416666667vw, 1460px);
    padding: min(3.125vw, 60px) min(4.1666666667vw, 80px);
    border-radius: min(11.4583333333vw, 220px);
    aspect-ratio: 1460/313;
  }
}
.p-vp-ceo__panel {
  /* 中央の写真（背景化） */
}
.p-vp-ceo__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/vision/ceo-photo.png") center/cover no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
.p-vp-ceo__big {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.9);
  transform: skewX(-8deg);
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
.p-vp-ceo__big--left {
  position: absolute;
  left: 2.6666666667vw;
  top: -2.6666666667vw;
  font-size: clamp(16px, 18.6666666667vw, 120px);
}
@media (min-width: 768px) {
  .p-vp-ceo__big--left {
    font-size: clamp(16px, 6.25vw, 120px);
  }
}
@media (min-width: 768px) {
  .p-vp-ceo__big--left {
    left: min(2.0833333333vw, 40px);
    top: min(-1.5625vw, -30px);
    font-size: clamp(16px, 32vw, 280px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-ceo__big--left {
    font-size: clamp(16px, 14.5833333333vw, 280px);
  }
}
.p-vp-ceo__big--left span {
  display: inline-block;
}
.p-vp-ceo__big--right {
  position: absolute;
  right: 2.6666666667vw;
  bottom: -2.6666666667vw;
  font-size: clamp(16px, 26.6666666667vw, 180px);
}
@media (min-width: 768px) {
  .p-vp-ceo__big--right {
    font-size: clamp(16px, 9.375vw, 180px);
  }
}
@media (min-width: 768px) {
  .p-vp-ceo__big--right {
    right: min(2.0833333333vw, 40px);
    bottom: min(-2.6041666667vw, -50px);
    font-size: clamp(16px, 48vw, 412px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-ceo__big--right {
    font-size: clamp(16px, 21.4583333333vw, 412px);
  }
}
.p-vp-ceo__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 2.6666666667vw 4.2666666667vw;
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .p-vp-ceo__link {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-vp-ceo__link {
    padding: min(1.0416666667vw, 20px) min(2.0833333333vw, 40px);
    font-size: clamp(16px, 6.4vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-vp-ceo__link {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-vp-ceo__link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.p-vp-ceo__link-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}
.p-vp-ceo__link-icon svg {
  width: 100%;
  height: 100%;
}

/* =====================================================================
 * /vision2 ページ専用の上書き（沖縄方言版）
 *
 * WordPress が body に `page-template-page-vision2` を自動付与するので、
 * その下でだけ局所的に上書きする。 /vision には影響しない。
 * ===================================================================== */
body.page-template-page-vision2 {
  /* ===== ① MV のコピー：黄色 + 黒2px縁取り + Dela Gothic One ===== */
}
body.page-template-page-vision2 .p-vp-mv__copy-text {
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400; /* Dela Gothic One は Regular のみ */
  color: #FDC01B;
  /* text-cutout を上書き（適用されていた場合に備えて） */
  background-image: none;
  -webkit-text-fill-color: #FDC01B;
  /* 2px の黒縁取り：複数ブラウザ対応のため text-stroke + text-shadow */
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
  paint-order: stroke fill;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}
body.page-template-page-vision2 {
  /* ===== ② .p-vp-intent__title-text / __circle-jp の色を黄色に ===== */
}
body.page-template-page-vision2 .p-vp-intent__title-text,
body.page-template-page-vision2 .p-vp-intent__circle-jp {
  /* text-cutout (background-image) を打ち消し、色を #FDC01B に */
  background-image: none;
  background-color: transparent;
  -webkit-text-fill-color: #FDC01B;
  color: #FDC01B;
  width: 75%;
}
body.page-template-page-vision2 {
  /* ===== ③ .p-message のデザインを /top2 と同じに =====
   * 構造（page-vision2.php）：
   *   <a class="p-message__cta">
   *     <h2 class="p-message__title">
   *       <span class="p-message__title-jp">背負ゆん</span>
   *     </h2>
   *     <img class="default"> / <img class="hover">
   *     <span class="p-message__title-jp p-message__title-jp--right">力</span>
   *   </a>
   * （top2 と同じ markup なので、top2 と同じ override をかける）
   */
  /* 背景画像を /top2/ の青空に差し替え */
}
body.page-template-page-vision2 .p-message::before {
  background-image: url("../images/top2/hung-bg.png");
}
body.page-template-page-vision2 {
  /* CTA 画像の重なり順 */
}
body.page-template-page-vision2 .p-message__cta img {
  position: relative;
  z-index: 2;
}
body.page-template-page-vision2 {
  /* hover swap を「display 切替 → opacity 切替」に変更
   * （display:none を挟むと .is-revealed の anim-img-1 が再発火するため） */
}
body.page-template-page-vision2 .p-message__cta {
  position: relative;
}
body.page-template-page-vision2 .p-message__cta img.hover {
  position: absolute;
  opacity: 0;
}
body.page-template-page-vision2 .p-message__cta img.default {
  position: relative;
  opacity: 1;
}
body.page-template-page-vision2 .p-message__cta:hover img.default {
  position: relative;
  opacity: 0 !important;
}
body.page-template-page-vision2 .p-message__cta:hover img.hover {
  opacity: 1;
}
body.page-template-page-vision2 {
  /* title-jp 共通：絶対配置 + 黒の drop-shadow
   * 文字背景は /top2/txt-bg.png を text-cutout（background-clip: text）で切り抜き表示。 */
}
body.page-template-page-vision2 .p-message__title-jp {
  position: absolute;
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.45));
  /* /top2/txt-bg.png を文字内に切り抜き表示 */
  background-image: url("../images/top2/txt-bg.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 1つ目「背負ゆん」は画像の後ろへ */
}
body.page-template-page-vision2 .p-message__title-jp:nth-child(1) {
  z-index: 1;
}
@media (max-width: 767.98px) {
  body.page-template-page-vision2 .p-message__title-jp:nth-child(1) {
    margin-top: -30px;
  }
}
body.page-template-page-vision2 {
  /* h2 自身のスタッキングコンテキストを解除して、子の z-index を有効化 */
}
body.page-template-page-vision2 .p-message__title {
  z-index: auto;
  filter: none;
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
}
body.page-template-page-vision2 {
  /* 2つ目「力」(.--right) は <h2> の外。画像右下に + 前面（z-index:3）に
   * 文字背景は title-jp 共通ルールの text-cutout (top2/txt-bg.png) を継承。 */
}
body.page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  margin-left: 0;
  z-index: 3;
  width: fit-content;
  text-align: right;
  transform: skewX(-8deg);
  line-height: 0.9;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 26.6666666667vw, 140px);
}
@media (min-width: 768px) {
  body.page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 7.2916666667vw, 140px);
  }
}
@media (min-width: 768px) {
  body.page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 37.3333333333vw, 300px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  body.page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 15.625vw, 300px);
  }
}

/* /vision ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /woman ページ専用スタイル（力組_女性構想）
 *
 * Figma:
 *  - PC: 86:1176
 *  - SP: 86:1295
 *
 * 命名は `.p-wo-*`（woman page）
 * カラー：
 *   - 環境セクション: #FFF764 (yellow)
 *   - メッセージセクション: #64FAFF (cyan)
 *   - 声セクション: #FFB3DF (pink)
 *   - 新力組構想アクセント: #FF00B7 (magenta)
 * ===================================================================== */
/* =================================================================
 * MV / イントロ
 * ================================================================= */
.p-wo-mv {
  position: relative;
  background-color: #ffffff;
  background-image: url("../images/woman/mv-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 10.6666666667vw 5.3333333333vw 10.6666666667vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-wo-mv {
    padding: min(2.6041666667vw, 50px) min(7.8125vw, 150px);
  }
}
.p-wo-mv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-wo-mv__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: min(2.0833333333vw, 40px);
    align-items: end;
  }
}
.p-wo-mv {
  /* 左下の英文 RIKI GUMI NEW IDEA
   * 文字は透過（塗りなし）+ 黒3px の縁取り */
}
.p-wo-mv__en {
  margin: 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px #000000;
  text-stroke: 3px #000000;
  paint-order: stroke fill;
  line-height: 0.8;
  letter-spacing: -0.023em;
  text-transform: capitalize;
  order: 3;
  /* JS が分割するまで FOUC 防止で非表示 */
  visibility: hidden;
}
.p-wo-mv__en.is-char-split {
  visibility: visible;
}
.p-wo-mv__en {
  font-size: clamp(16px, 13.3333333333vw, 130px);
}
@media (min-width: 768px) {
  .p-wo-mv__en {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
@media (min-width: 768px) {
  .p-wo-mv__en {
    order: 2;
    align-self: end;
  }
}
@media (max-width: 767.98px) {
  .p-wo-mv__en {
    position: absolute;
    margin-top: 150%;
  }
}
.p-wo-mv {
  /* 1文字ずつ scale 0 → 1.1 → 1 でポップ（左から順） */
}
.p-wo-mv__en-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center bottom;
  will-change: opacity, transform;
  animation: p-wo-mv-en-pop 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--char-i, 0) * 0.06s + 0.2s) forwards;
}
.p-wo-mv {
  /* 写真ボックス（女性たちの写真） */
}
.p-wo-mv__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1352/761;
  order: 1;
}
@media (min-width: 768px) {
  .p-wo-mv__photo {
    border-width: 6px;
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .p-wo-mv__photo {
    aspect-ratio: 343/387;
  }
}
.p-wo-mv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 画像1：scale 0 → 1.05 → 1 のポップイン（ページロード時） */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
  animation: p-wo-mv-photo-pop 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) 0.1s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-mv__photo img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-wo-mv__photo-caption {
  position: absolute;
  left: 4.2666666667vw;
  bottom: 4.2666666667vw;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  /* 下からフェードイン（写真ポップ完了後） */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  animation: p-wo-mv-fadeup 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-mv__photo-caption {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-wo-mv__photo-caption {
  /* 文字の背景として MV 背景画像を text-cutout（background-clip: text）で適用。
   * 画像の「右下の色の濃い部分」だけを映したいので、
   * background-size は cover ではなく拡大表示 (200%) + position: bottom right で固定。 */
  background-image: url("../images/woman/mv-bg-2.png");
  background-repeat: no-repeat;
  background-position: bottom; /* 完全に右下寄せ */
  background-size: cover; /* 拡大して暗部のみが見える */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(16px, 6.4vw, 30px);
}
@media (min-width: 768px) {
  .p-wo-mv__photo-caption {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
@media (min-width: 768px) {
  .p-wo-mv__photo-caption {
    left: min(2.2916666667vw, 44px);
    bottom: min(2.2916666667vw, 44px);
    font-size: clamp(16px, 5.3333333333vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-mv__photo-caption {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-wo-mv {
  /* 右側パネル：「新 力組構想」タイトル + 本文 */
}
.p-wo-mv__panel {
  order: 2;
}
@media (min-width: 768px) {
  .p-wo-mv__panel {
    order: 3;
  }
}
.p-wo-mv {
  /* タイトル「新 力組構想」：白地 6px 黒枠 + マゼンタ大文字 + skew */
}
.p-wo-mv__title {
  background: #ffffff;
  border: 3px solid #000000;
  padding: 2.6666666667vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-wo-mv__title {
    border-width: 6px;
    padding: min(0.5208333333vw, 10px);
  }
}
.p-wo-mv__title-text {
  display: block;
  width: 100%;
  text-align: center;
  color: #FF00B7;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
  font-size: clamp(16px, 9.6vw, 80px);
}
@media (min-width: 768px) {
  .p-wo-mv__title-text {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
@media (min-width: 768px) {
  .p-wo-mv__title-text {
    font-size: clamp(16px, 21.3333333333vw, 200px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-mv__title-text {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
.p-wo-mv__title-text {
  position: relative;
  z-index: 2;
}
.p-wo-mv__title-text svg {
  position: relative;
  width: 110%;
}
@media (max-width: 767.98px) {
  .p-wo-mv__title-text svg {
    margin-left: 0;
  }
}
.p-wo-mv__title-text {
  /* ラベル風モーション：少し傾いてずれた状態 → 通常の skewX(-8deg) に素早く戻る */
  opacity: 0;
  transform: skewX(-18deg) translate3d(-6%, 14%, 0);
  will-change: opacity, transform;
  animation: p-wo-mv-title-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-mv__title-text {
    opacity: 1;
    transform: skewX(-8deg);
    animation: none;
  }
}
.p-wo-mv {
  /* 本文：黒枠 + 上下 padding + MV と同じ背景画像 */
}
.p-wo-mv__body {
  margin-top: -10px;
  margin-right: 2px;
  background-image: url("../images/woman/mv-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 3px solid #000000;
  border-top: 0; /* タイトルと枠を共有させるため上枠を消す */
  padding: 5.3333333333vw 5.3333333333vw;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-mv__body {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-mv__body {
    border-width: 6px;
    border-top: 0;
    padding: min(2.6041666667vw, 50px) min(4.1666666667vw, 80px);
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-mv__body {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (max-width: 767.98px) {
  .p-wo-mv__body {
    margin-left: 20%;
    width: 80%;
  }
}
.p-wo-mv__body p {
  margin: 0 0 1em;
}
.p-wo-mv__body p:last-child {
  margin-bottom: 0;
}
.p-wo-mv__body {
  /* 下からフェードイン（タイトル直後） */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  animation: p-wo-mv-fadeup 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-mv__body {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* /woman MV 用キーフレーム ===== */
@keyframes p-wo-mv-photo-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes p-wo-mv-en-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes p-wo-mv-fadeup {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes p-wo-mv-title-in {
  0% {
    opacity: 0;
    transform: skewX(-18deg) translate3d(-6%, 14%, 0);
  }
  100% {
    opacity: 1;
    transform: skewX(-8deg) translate3d(0, 0, 0);
  }
}
/* =================================================================
 * セクションナビ（3ボタン）
 * ================================================================= */
.p-wo-tabs {
  position: relative;
  background: #ffffff;
}
.p-wo-tabs__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .p-wo-tabs__list {
    flex-direction: row;
  }
}
.p-wo-tabs__item {
  flex: 1;
  border: 3px solid #000000;
  margin-top: -3px; /* 枠線をシェア */
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* 各 item の背景画像（順序ベースで tab-1 / tab-2 / tab-3 を割当） */
}
.p-wo-tabs__item:nth-child(1) {
  background-image: url("../images/woman/tab-1.png");
}
.p-wo-tabs__item:nth-child(2) {
  background-image: url("../images/woman/tab-2.png");
}
.p-wo-tabs__item:nth-child(3) {
  background-image: url("../images/woman/tab-3.png");
}
@media (min-width: 768px) {
  .p-wo-tabs__item {
    border-width: 6px;
    margin-top: 0;
    margin-left: -6px;
  }
  .p-wo-tabs__item:first-child {
    margin-left: 0;
  }
  .p-wo-tabs__item {
    /* PC のみアコーディオン挙動：
     * 初期状態は 1つ目が幅広（40%）+ カラー、他はモノクロ + 幅狭（30% ずつ）。
     * ホバー時はホバーしたアイテムが幅広 + カラーになり、他はモノクロ + 幅狭。
     * 比率 40 : 30 : 30 を flex-grow で表現 → 4 : 3 : 3 */
    flex: 3 1 0;
    filter: grayscale(100%);
    transition: flex-grow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
  }
  .p-wo-tabs__item:first-child {
    flex-grow: 4;
    filter: none;
  }
}
.p-wo-tabs {
  /* PC：ホバー時のアコーディオン挙動 */
}
@media (min-width: 768px) {
  .p-wo-tabs__list:hover .p-wo-tabs__item {
    flex-grow: 3;
    filter: grayscale(100%);
  }
  .p-wo-tabs__list:hover .p-wo-tabs__item:hover {
    flex-grow: 4;
    filter: none;
  }
}
.p-wo-tabs__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.3333333333vw;
  width: 100%;
  height: 100%;
  min-height: 21.3333333333vw;
  padding: 2.6666666667vw 1.3333333333vw;
  color: #000000;
  text-decoration: none;
  justify-content: center;
}
@media (min-width: 768px) {
  .p-wo-tabs__link {
    min-height: min(9.1666666667vw, 176px);
  }
}
.p-wo-tabs__label {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border: 1.5px solid #000000;
  background: #efefef;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  width: fit-content;
  font-size: clamp(16px, 5.8666666667vw, 28px);
}
@media (min-width: 768px) {
  .p-wo-tabs__label {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
@media (min-width: 768px) {
  .p-wo-tabs__label {
    font-size: clamp(16px, 8vw, 45px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-tabs__label {
    font-size: clamp(16px, 2.34375vw, 45px);
  }
}
.p-wo-tabs__icon {
  display: inline-flex;
  width: 1.2em;
  height: 1.2em;
  flex: none;
}
.p-wo-tabs__icon svg {
  width: 100%;
  height: 100%;
}
.p-wo-tabs {
  /* 1つ目の「働きやすい環境」のラベル色は黄色（active 風） */
}
.p-wo-tabs__item--environment .p-wo-tabs__label {
  background: #FFF764;
}
.p-wo-tabs {
  /* PC：ホバー時はホバーしたアイテムのラベルを黄色、他はリセット */
}
@media (min-width: 768px) {
  .p-wo-tabs__list:hover .p-wo-tabs__item .p-wo-tabs__label {
    background: #efefef;
  }
  .p-wo-tabs__list:hover .p-wo-tabs__item:hover .p-wo-tabs__label {
    background: #FFF764;
  }
}

/* =================================================================
 * 各セクション共通（見出し）
 * ================================================================= */
.p-wo-section {
  position: relative;
  padding: 16vw 5.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-wo-section {
    padding: min(5.2083333333vw, 100px) min(13.8541666667vw, 266px);
  }
}
.p-wo-section {
  /* セクションの背景色（modifier で） */
}
.p-wo-section--environment {
  background-image: url(../images/woman/bg-1.png);
  background-repeat: repeat;
  padding-top: 100px;
}
.p-wo-section--message {
  background-image: url(../images/woman/bg-2.png);
  background-repeat: repeat;
}
.p-wo-section--voice {
  background-image: url(../images/woman/bg-3.png);
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-wo-section--voice {
    gap: min(2.6041666667vw, 50px);
  }
}
.p-wo-section {
  /* 見出し（日本語 + 英語のセット） */
}
.p-wo-section__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-bottom: 8vw;
}
@media (min-width: 768px) {
  .p-wo-section__head {
    margin-bottom: min(2.6041666667vw, 50px);
    align-items: flex-start;
  }
}
.p-wo-section__head {
  /* 右寄せ・中央寄せ modifier */
}
.p-wo-section__head--right {
  align-items: flex-end;
}
.p-wo-section__head--center {
  align-items: center;
}
.p-wo-section {
  /* __title-jp：白地の日本語見出しタグ
   * 出現アニメ：背景（白＋黒枠）が左→右へ展開、その後に中の文字 (__title-jp-text) がフェードイン。
   * 背景は ::before に分離し clip-path で展開する。 */
}
.p-wo-section__title-jp {
  display: inline-flex;
  align-items: center;
  padding: 1.6vw 2.6666666667vw;
  background: transparent; /* 実背景は ::before */
  border: 0; /* 枠線も ::before で表現するため消す */
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  z-index: 2;
  position: relative;
  width: fit-content;
  overflow: hidden;
  font-size: clamp(16px, 5.8666666667vw, 32px);
}
@media (min-width: 768px) {
  .p-wo-section__title-jp {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
@media (min-width: 768px) {
  .p-wo-section__title-jp {
    font-size: clamp(16px, 10.6666666667vw, 100px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-section__title-jp {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
.p-wo-section__title-jp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  border: 3px solid #000000;
  box-sizing: border-box;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}
@media (min-width: 768px) {
  .p-wo-section__title-jp::before {
    border-width: 6px;
  }
}
.p-wo-section__title-jp.is-revealed::before {
  clip-path: inset(0 0 0 0);
}
.p-wo-section__title-jp-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s ease;
}
.p-wo-section__title-jp.is-revealed .p-wo-section__title-jp-text {
  opacity: 1;
  transition-delay: 0.5s; /* 帯展開後にフェードイン */
}
.p-wo-section {
  /* __title-en：ラベル風モーション
   * 初期は位置・角度が少しずれた状態 → ホバーするように素早く元位置へ。 */
}
.p-wo-section__title-en {
  z-index: 2;
  position: relative;
  margin: 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.023em;
  text-transform: uppercase;
  /* 文字に 3px の黒縁取り */
  -webkit-text-stroke: 3px #000000;
  text-stroke: 3px #000000;
  paint-order: stroke fill;
  font-size: clamp(16px, 18.6666666667vw, 130px);
}
@media (min-width: 768px) {
  .p-wo-section__title-en {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
@media (min-width: 768px) {
  .p-wo-section__title-en {
    font-size: clamp(16px, 21.3333333333vw, 188px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-section__title-en {
    font-size: clamp(16px, 9.7916666667vw, 188px);
  }
}
.p-wo-section__title-en {
  opacity: 0;
  transform: rotate(-6deg) translate3d(-8%, 12%, 0);
  will-change: opacity, transform;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-wo-section__title-en.is-revealed {
  opacity: 1;
  transform: rotate(0) translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-section__title-jp::before {
    clip-path: none;
    transition: none;
  }
  .p-wo-section__title-jp-text {
    opacity: 1;
    transition: none;
  }
  .p-wo-section__title-en {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.p-wo-section {
  /* セクション色で英タイトルを染める */
}
.p-wo-section--environment .p-wo-section__title-en {
  color: #FFF764;
}
.p-wo-section--message .p-wo-section__title-en {
  color: #64FAFF;
  text-align: right;
}
.p-wo-section--voice .p-wo-section__title-en {
  color: #FFB3DF;
  text-align: center;
}

/* =================================================================
 * 働きやすい環境
 * ================================================================= */
.p-wo-section--environment .p-wo-section__head {
  position: absolute;
  margin-top: 28%;
}
@media (max-width: 767.98px) {
  .p-wo-section--environment .p-wo-section__head {
    margin-top: 50%;
  }
}

.p-wo-environment__inner {
  display: flex;
  flex-direction: column;
  position: relative;
}
.p-wo-environment__lead {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0vw;
}
@media (min-width: 768px) {
  .p-wo-environment__lead {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead {
    margin-bottom: 20px;
    margin-top: 50px;
    flex-direction: column-reverse;
  }
}
.p-wo-environment__lead .p-wo-environment__lead-photo {
  order: 2;
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead .p-wo-environment__lead-photo {
    order: 1;
  }
}
.p-wo-environment__lead .p-wo-environment__lead-text {
  order: 1;
}
.p-wo-environment__lead-text {
  background: #FFF764;
  border: 3px solid #000000;
  padding: 5.3333333333vw;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-environment__lead-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-environment__lead-text {
    flex: 1;
    border-width: 6px;
    padding: min(2.6041666667vw, 50px);
    font-size: clamp(16px, 4.8vw, 24px);
    margin-bottom: -6px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-environment__lead-text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead-text {
    margin-bottom: -6px;
  }
}
.p-wo-environment__lead-text p {
  margin: 0 0 1em;
}
.p-wo-environment__lead-text p:last-child {
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead-text br {
    display: none;
  }
}
.p-wo-environment__lead-photo {
  border: 3px solid #000000;
  overflow: hidden;
  aspect-ratio: 592/405;
}
@media (min-width: 768px) {
  .p-wo-environment__lead-photo {
    border-width: 6px;
    width: min(30.8333333333vw, 592px);
    flex: none;
    aspect-ratio: auto;
    height: auto;
    margin-bottom: -6px;
    margin-left: -6px;
  }
}
.p-wo-environment__lead-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-wo-environment__lead-photo.abso {
  position: absolute;
  right: 0;
  bottom: 0;
}
.p-wo-environment__lead-photo3 {
  display: none;
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead-photo3 {
    border: none;
    position: absolute;
    width: 27%;
    top: auto;
    bottom: -15.5%;
    width: 40%;
    right: -4%;
    aspect-ratio: unset;
    display: block;
  }
}
.p-wo-environment__lead-photo2 {
  border: none;
  position: absolute;
  width: 27%;
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead-photo2 {
    display: none;
  }
}
.p-wo-environment__lead-photo1 {
  width: 70%;
  margin-left: 30%;
}
@media (max-width: 767.98px) {
  .p-wo-environment__lead-photo1 {
    margin-left: 0;
    width: 100%;
    aspect-ratio: 1;
  }
}
.p-wo-environment {
  /* 下段3枚カード */
}
.p-wo-environment__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .p-wo-environment__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}
.p-wo-environment__card {
  display: flex;
  flex-direction: column;
}
.p-wo-environment__card--top {
  flex-direction: column-reverse; /* キャプション上 */
}
@media (max-width: 767.98px) {
  .p-wo-environment__card--top {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .p-wo-environment__card:nth-child(2) .p-wo-environment__card-media, .p-wo-environment__card:nth-child(2) .p-wo-environment__card-text {
    border-left: unset;
    border-right: unset;
  }
}
.p-wo-environment__card-media {
  border: 3px solid #000000;
  overflow: hidden;
  aspect-ratio: 462/405;
}
@media (min-width: 768px) {
  .p-wo-environment__card-media {
    border-width: 6px;
    margin-bottom: -6px;
  }
}
@media (max-width: 767.98px) {
  .p-wo-environment__card-media {
    order: 1;
  }
}
.p-wo-environment__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-wo-environment__card-text {
  background: #FFF764;
  border: 3px solid #000000;
  padding: 5.3333333333vw;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-environment__card-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-environment__card-text {
    border-width: 6px;
    padding: min(2.6041666667vw, 50px) min(1.0416666667vw, 20px);
    min-height: min(7.2395833333vw, 139px);
    font-size: clamp(16px, 4.8vw, 24px);
    display: flex;
    align-items: center;
    margin-bottom: -6px;
    flex: 1;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-environment__card-text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (max-width: 767.98px) {
  .p-wo-environment__card-text {
    order: 2;
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
.p-wo-environment__card-text p {
  margin: 0;
}

/* =================================================================
 * 専務のメッセージ
 * ================================================================= */
.p-wo-message__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0vw;
}
@media (min-width: 768px) {
  .p-wo-message__inner {
    gap: min(2.0833333333vw, 40px);
  }
}
.p-wo-message {
  /* 縦書きラベル「女性を大切にする会社。」 - SP/PC 両方で表示 */
}
.p-wo-message__vertical-label {
  display: block;
  position: absolute;
  left: 5.3333333333vw;
  top: 5.3333333333vw;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-wo-message__vertical-label {
    left: min(2.6041666667vw, 50px);
    top: min(2.0833333333vw, 40px);
  }
}
.p-wo-message__vertical-label p {
  margin: 0;
  writing-mode: vertical-rl;
  background: #64FAFF;
  border: 3px solid #000000;
  padding: 1.6vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #000000;
  line-height: 0.9;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 8vw, 80px);
}
@media (min-width: 768px) {
  .p-wo-message__vertical-label p {
    font-size: clamp(16px, 4.1666666667vw, 80px);
  }
}
@media (min-width: 768px) {
  .p-wo-message__vertical-label p {
    border-width: 6px;
    padding: min(0.5208333333vw, 10px);
  }
}
@media (max-width: 767.98px) {
  .p-wo-message__vertical-label p {
    position: absolute;
  }
}
.p-wo-message__vertical-label p:nth-child(2) {
  left: 13.3333333333vw;
  height: 32vw;
}
.p-wo-message__vertical-label p:nth-child(3) {
  height: 69.3333333333vw;
  margin-top: 20px;
}
.p-wo-message__row {
  display: flex;
  flex-direction: column;
  gap: 0vw;
}
@media (min-width: 768px) {
  .p-wo-message__row {
    gap: 0;
  }
}
@media (min-width: 768px) {
  .p-wo-message__row--mid, .p-wo-message__row--bottom {
    flex-direction: row;
    align-items: stretch;
    position: relative;
  }
}
@media (max-width: 767.98px) {
  .p-wo-message__row--mid, .p-wo-message__row--bottom {
    flex-direction: column-reverse;
  }
}
@media (min-width: 768px) {
  .p-wo-message__row--mid {
    padding-left: min(13.5416666667vw, 260px); /* テキストを右に寄せて、左に画像オーバーレイ */
  }
}
@media (max-width: 767.98px) {
  .p-wo-message__row--mid {
    margin-bottom: 40px;
  }
}
.p-wo-message__row--mid .p-wo-message__text {
  margin-top: -50px;
}
@media (max-width: 767.98px) {
  .p-wo-message__row--mid .p-wo-message__text {
    margin-top: -6px;
  }
}
.p-wo-message__photo {
  border: 3px solid #000000;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-wo-message__photo {
    border-width: 6px;
    margin-left: -6px;
  }
}
@media (max-width: 767.98px) {
  .p-wo-message__photo {
    aspect-ratio: 7/8 !important;
  }
}
.p-wo-message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-wo-message__photo {
  /* 出現アニメ：画像1（scale 0 → 1.05 → 1 のポップイン）
   * js-reveal が .is-revealed を付けて発火 */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
}
.p-wo-message__photo.is-revealed {
  animation: p-wo-message-photo-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-wo-message__photo {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-wo-message__row--top .p-wo-message__photo {
  aspect-ratio: 1124/669;
}
@media (min-width: 768px) {
  .p-wo-message__row--top .p-wo-message__photo {
    width: min(65.3125vw, 1254px);
  }
}
.p-wo-message__photo-overlay {
  /* 左から飛び出す専務写真 */
  display: none;
}
@media (min-width: 768px) {
  .p-wo-message__photo-overlay {
    display: block;
    position: absolute;
    right: -50px;
    top: min(-13.5416666667vw, -260px);
    width: min(20vw, 384px);
    height: min(30vw, 576px);
    overflow: hidden;
    z-index: 1;
  }
  .p-wo-message__photo-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .p-wo-message__photo-overlay {
    /* 出現アニメ：画像1 ポップイン */
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    will-change: opacity, transform;
  }
  .p-wo-message__photo-overlay.is-revealed {
    animation: p-wo-message-photo-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .p-wo-message__photo-overlay {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-wo-message__text {
  margin-right: -10%;
  background: #64FAFF;
  border: 3px solid #000000;
  padding: 5.3333333333vw;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  display: block;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-message__text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-message__text {
    border-width: 6px;
    padding: min(2.6041666667vw, 50px);
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-message__text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (max-width: 767.98px) {
  .p-wo-message__text {
    margin-top: -6px;
  }
}
.p-wo-message__text p {
  margin: 0 0 0.4em;
}
.p-wo-message__text p:last-child {
  margin-bottom: 0;
}
.p-wo-message {
  /* 下段 (row--bottom)：テキストと写真を 50% : 50% で並べる */
}
@media (min-width: 768px) {
  .p-wo-message__row--bottom {
    align-items: stretch;
  }
}
@media (min-width: 768px) {
  .p-wo-message__row--bottom .p-wo-message__text {
    flex: 1 1 50%;
    max-width: 50%;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .p-wo-message__row--bottom .p-wo-message__photo {
    flex: 1 1 50%;
    max-width: 50%;
    aspect-ratio: 700/585;
  }
}
.p-wo-message {
  /* プロフィール縦ラベル（取締役 専務 / 仲宗根 綾香） */
}
.p-wo-message__profile {
  display: none;
}
@media (min-width: 768px) {
  .p-wo-message__profile {
    width: fit-content;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: min(9.375vw, 180px);
    gap: 0;
  }
}
.p-wo-message__profile p {
  margin: 0;
  background: #64FAFF;
  border: 3px solid #000000;
  padding: min(0.5208333333vw, 10px);
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 4.8vw, 30px);
}
@media (min-width: 768px) {
  .p-wo-message__profile p {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-wo-message__profile p.p-wo-message__profile-name {
  margin-top: -3px;
}

/* =================================================================
 * 女性スタッフの声
 * ================================================================= */
.p-wo-voice__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10.6666666667vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .p-wo-voice__list {
    grid-template-columns: repeat(2, 1fr);
    gap: min(1.71875vw, 33px);
  }
}
.p-wo-voice__item {
  display: flex;
  flex-direction: column;
}
.p-wo-voice__photo {
  position: relative;
  border: 3px solid #000000;
  overflow: hidden;
  aspect-ratio: 800/430;
}
@media (min-width: 768px) {
  .p-wo-voice__photo {
    border-width: 6px;
  }
}
@media (max-width: 767.98px) {
  .p-wo-voice__photo {
    aspect-ratio: 7/8 !important;
  }
}
.p-wo-voice__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-wo-voice__role {
  position: absolute;
  left: 15%;
  top: 5.3333333333vw;
  transform: translateX(-50%);
  padding: 0.5333333333vw 0.5333333333vw;
  background: #ffffff;
  border: 3px solid #000000;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.023em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  width: fit-content;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-voice__role {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-voice__role {
    top: min(2.3958333333vw, 46px);
    font-size: clamp(16px, 5.3333333333vw, 30px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-voice__role {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-wo-voice__text {
  background: #FFB3DF;
  border: 3px solid #000000;
  padding: 5.3333333333vw;
  color: #000000;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  margin-top: -6px;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-wo-voice__text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-wo-voice__text {
    border-width: 6px;
    padding: min(2.6041666667vw, 50px) min(1.5625vw, 30px);
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-wo-voice__text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-wo-voice__text p {
  margin: 0;
}

/* .p-wo-message__photo ポップイン用 keyframe（画像1：scale 0 → 1.05 → 1） */
@keyframes p-wo-message-photo-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* /woman ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /ceo-message ページ専用スタイル（社長インタビュー）
 *
 * 共通利用：
 *  - text-cutout mixin
 *  - .p-entry（エントリーCTA）
 *  - anim-img-1/3, anim-txt-1 キーフレーム
 *  - .js-reveal による出現アニメ
 *
 * 命名は `.p-cp-*`（ceo page）。
 * アクセントカラーは赤（#cc1522）。
 * ===================================================================== */
/* =================================================================
 * MV
 * ================================================================= */
.p-cp-mv {
  position: relative;
  width: 100%;
  height: 170.6666666667vw;
  overflow: hidden;
  max-height: 100vh;
  background: #2a2a2a;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-cp-mv {
    height: min(55.7291666667vw, 1070px);
  }
}
.p-cp-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-cp-mv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.p-cp-mv__media {
  /* .before / .after を 2 枚重ねて配置（ページロード時に .after がフェードイン）
   * .before は初めから常に表示。.after だけが opacity 0 → 1 でフェード。 */
}
.p-cp-mv__media img.before,
.p-cp-mv__media img.after {
  position: absolute;
  inset: 0;
}
.p-cp-mv__media img.before {
  opacity: 1; /* 初期表示で常に見える */
  animation: none;
}
.p-cp-mv__media img.after {
  opacity: 0;
  will-change: opacity;
  animation: anim-img-2 1s ease 0.3s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-mv__media img.after {
    opacity: 1;
    animation: none;
  }
}
.p-cp-mv {
  /* 縦に走る赤帯（写真の右側） */
}
.p-cp-mv__stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60%;
  width: 10.6666666667vw;
  background: #cc1522;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  .p-cp-mv__stripe {
    width: min(12.2395833333vw, 235px);
  }
}
.p-cp-mv {
  /* 右上ラベル（共通の白縦書きラベル） */
}
.p-cp-mv__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  background: #ffffff;
  padding: 5.3333333333vw 2.1333333333vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .p-cp-mv__label {
    padding: min(2.6041666667vw, 50px) min(1.0416666667vw, 20px);
  }
}
.p-cp-mv__label-text {
  display: inline-block;
  writing-mode: vertical-rl;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 3.7333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-cp-mv__label-text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-cp-mv__label-text {
    font-size: clamp(16px, 5.3333333333vw, 40px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-mv__label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-cp-mv {
  /* 縦書きの名前バッジ：代表取締役 / 仲宗根 朋希 */
}
.p-cp-mv__name {
  position: absolute;
  right: 4.2666666667vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: fit-content;
  margin: 0;
}
@media (min-width: 768px) {
  .p-cp-mv__name {
    right: min(4.1666666667vw, 80px);
  }
}
@media (max-width: 767.98px) {
  .p-cp-mv__name {
    display: none;
  }
}
.p-cp-mv__name-role, .p-cp-mv__name-person {
  margin: 0;
  padding: 2.1333333333vw 1.6vw;
  background: #cc1522;
  border: 3px solid #000000;
  color: #ffffff;
  text-orientation: upright;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  width: fit-content;
  font-size: clamp(16px, 3.7333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-cp-mv__name-role, .p-cp-mv__name-person {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-cp-mv__name-role, .p-cp-mv__name-person {
    padding: min(0.5208333333vw, 10px) min(0.4166666667vw, 8px);
    font-size: clamp(16px, 4.8vw, 30px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-mv__name-role, .p-cp-mv__name-person {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-cp-mv__name-role, .p-cp-mv__name-person {
  /* 出現アニメ：背景のおびが左→右へ伸びた後に文字がフェードイン。
   * clip-path で背景＋枠線を左から見せていき、終わったら color を白に切替。
   * 文字系は全部同時に発火（big-text と同じ delay 1.4s）。 */
  color: transparent;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path, color;
  animation: ceo-mv-name-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
}
.p-cp-mv__name-person {
  margin-top: -3px;
}
.p-cp-mv__big {
  position: absolute;
  left: 4.2666666667vw;
  bottom: 10.6666666667vw;
  z-index: 3;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.11em;
  text-align: center;
}
@media (min-width: 768px) {
  .p-cp-mv__big {
    left: min(4.1666666667vw, 80px);
    bottom: min(4.1666666667vw, 80px);
  }
}
.p-cp-mv__big-text {
  display: inline-block;
  color: #cc1522;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  /* 表示順：.before → .after フェード (.3s + 1s = ~1.3s) → big-text フェード */
  animation: anim-txt-1 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
  font-size: clamp(16px, 24vw, 180px);
}
@media (min-width: 768px) {
  .p-cp-mv__big-text {
    font-size: clamp(16px, 9.375vw, 180px);
  }
}
@media (min-width: 768px) {
  .p-cp-mv__big-text {
    font-size: clamp(16px, 16vw, 150px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-mv__big-text {
    font-size: clamp(16px, 7.8125vw, 150px);
  }
}
@media (max-width: 767.98px) {
  .p-cp-mv__big-text {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-mv__big-text {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-cp-mv__name-role, .p-cp-mv__name-person {
    color: #ffffff;
    clip-path: none;
    animation: none;
  }
}

/* CEO MV：名前リボンの出現アニメ
 * 1) 背景のおびを左→右へ展開 (clip-path: inset(0 100% 0 0) → inset(0 0 0 0))
 * 2) 展開し終わったら文字を白に切替 (color: transparent → $c-white) */
@keyframes ceo-mv-name-in {
  0% {
    clip-path: inset(0 100% 0 0);
    color: transparent;
  }
  45% {
    clip-path: inset(0 0 0 0);
    color: transparent;
  }
  100% {
    clip-path: inset(0 0 0 0);
    color: #fff;
  }
}
/* .p-cp-culture__title の 1 文字ずつポップ：scale 0 → 1.1 → 1 */
@keyframes p-cp-culture-char-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* =================================================================
 * インタビュー本文（左サイド写真 + 右サイドテキスト3ブロック）
 * ================================================================= */
.p-cp-interview {
  position: relative;
  background: #ffffff; /* SP：白 / PC：下で $c-ceo-mid に上書き */
  overflow: hidden;
  display: grid;
  gap: 0;
}
@media (min-width: 768px) {
  .p-cp-interview {
    background: #cecece;
    grid-template-columns: 997fr 923fr;
  }
}
.p-cp-interview {
  /* 左サイド：写真スタック
   * SP：このコンテナは非表示。代わりに本文 (.p-cp-block__photo) で各ブロック上に表示
   * PC：従来通り absolute 配置の階段状スタック */
}
.p-cp-interview__photos {
  position: relative;
  display: none;
}
@media (min-width: 768px) {
  .p-cp-interview__photos {
    display: flex;
    flex-direction: column;
    /* 3枚分（800 * 3 = 2400px） */
    min-height: min(125vw, 2400px);
    height: 100%;
    position: relative;
  }
}
.p-cp-interview__photo {
  position: relative;
  left: auto;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1/1; /* SP 用の高さ確保 */
}
@media (min-width: 768px) {
  .p-cp-interview__photo {
    position: absolute;
    left: 0;
    aspect-ratio: auto;
  }
}
@media (min-width: 768px) {
  .p-cp-interview__photo--01 {
    top: 0;
    height: min(41.6666666667vw, 800px);
  }
}
@media (min-width: 768px) {
  .p-cp-interview__photo--02 {
    top: min(41.6666666667vw, 800px);
    height: min(41.6666666667vw, 800px);
  }
}
.p-cp-interview__photo--02 {
  /* 立っている人の写真（ceo/photo-2-9.png）を ::after で重ねる。
   * 親 .p-cp-interview__photo は overflow: hidden だが、--02 はオフにして
   * 写真スタックの下にはみ出して表示できるようにする。 */
}
@media (min-width: 768px) {
  .p-cp-interview__photo--02 {
    overflow: visible;
  }
}
.p-cp-interview__photo--02::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: max(-31.25vw, -600px); /* 親 (--02) の下に飛び出す */
  width: min(20.8333333333vw, 400px);
  aspect-ratio: 400/967;
  background-image: url("../images/ceo/photo-2-9.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  z-index: 3;
  pointer-events: none;
  /* 画像1（scale 0 → 1.2 → 1）ポップイン用の初期状態
   * 親 .p-cp-interview__photo--02 の .is-revealed で発火。 */
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom center;
  will-change: opacity, transform;
}
@media (max-width: 767.98px) {
  .p-cp-interview__photo--02::after {
    display: none;
  }
}
.p-cp-interview__photo--02.is-revealed::after {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-interview__photo--02::after {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-cp-interview__photo--03 {
  background-image: url(../images/ceo/photo-3-1.png);
  background-repeat: repeat-y;
  background-size: contain;
}
@media (min-width: 768px) {
  .p-cp-interview__photo--03 {
    top: min(83.3333333333vw, 1600px);
    width: 100%;
    height: 100%;
    flex: 1;
  }
}
.p-cp-interview__photo--03 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.p-cp-interview__photo {
  /* .before / .after の 2 枚は重ねて配置。
   * .before は初めから常に表示。
   * .is-revealed が付くと .after がフェードで上に被さる。 */
}
.p-cp-interview__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-cp-interview__photo img.before,
.p-cp-interview__photo img.after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-cp-interview__photo img.before {
  opacity: 1; /* 初期表示で常に見える */
}
.p-cp-interview__photo img.after {
  opacity: 0;
  will-change: opacity;
  transition: opacity 1s ease;
}
.p-cp-interview__photo.is-revealed img.after {
  opacity: 1;
  transition-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-interview__photo img.after {
    opacity: 1;
    transition: none;
  }
}
.p-cp-interview {
  /* 写真上に走る赤帯 */
}
.p-cp-interview__stripe {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 32vw;
  background: #cc1522;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (min-width: 768px) {
  .p-cp-interview__stripe {
    width: min(12.2395833333vw, 235px);
  }
}
.p-cp-interview {
  /* 右サイド：テキストブロック群 */
}
.p-cp-interview__body {
  padding: 0 8vw 16vw; /* SP：本文に左右 30px の余白を確保 */
  background: #ffffff; /* SP は白 */
  overflow: hidden; /* 子の __photo の overflow を本文内でクリップ */
  background-color: #CECECE;
}
@media (min-width: 768px) {
  .p-cp-interview__body {
    background: #cecece; /* PC は従来通り灰色 */
    padding: min(5.2083333333vw, 100px) min(10.4166666667vw, 200px) min(5.2083333333vw, 100px) min(2.6041666667vw, 50px);
    overflow: visible;
  }
}

/* SP 専用：各 .p-cp-block の上に表示する写真（PC は左サイド __photos が担当）
 * 親 .p-cp-interview__body の padding-left を負マージンで打ち消し、
 * 左端を viewport の左端にぴったり寄せる。 */
.p-cp-block__photo {
  position: relative;
  left: 0;
  transform: none;
  background-color: #fff;
  /* 親 padding-left (vw-sp(30)) を負マージンで打ち消す */
  margin-left: -8vw;
  margin-right: 0;
  width: 100vw;
  max-width: 100vw;
  margin-bottom: 8vw;
  overflow: hidden;
  aspect-ratio: 1;
  display: block;
}
@media (min-width: 768px) {
  .p-cp-block__photo {
    display: none;
    aspect-ratio: 4/3;
  }
}
.p-cp-block__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-cp-block__photo img.before,
.p-cp-block__photo img.after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-cp-block__photo img.before {
  opacity: 1;
}
.p-cp-block__photo img.after {
  opacity: 0;
  will-change: opacity;
  transition: opacity 1s ease;
}
.p-cp-block__photo.is-revealed img.after {
  opacity: 1;
  transition-delay: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-block__photo img.after {
    opacity: 1;
    transition: none;
  }
}

/* インタビュー1ブロック共通 */
.p-cp-block {
  margin: 0 0 10.6666666667vw;
}
@media (min-width: 768px) {
  .p-cp-block {
    margin-bottom: min(2.6041666667vw, 50px);
  }
}
.p-cp-block {
  /* 出現アニメ：
   *  1) __divider が左→右へ線として伸びる (scaleX 0→1)
   *  2) その後 __heading が下からフェードイン
   *  3) その後 __text が下からフェードイン
   *
   *  各 block の `style="--reveal-delay: 0.15s..."` をベースに、
   *  さらに要素ごとに段階的に delay を加算する。 */
}
.p-cp-block__heading {
  margin: 0 0 1.3333333333vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000000;
  line-height: 1.5;
  letter-spacing: -0.023em;
  font-size: clamp(16px, 5.3333333333vw, 24px);
}
@media (min-width: 768px) {
  .p-cp-block__heading {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
@media (min-width: 768px) {
  .p-cp-block__heading {
    font-size: clamp(16px, 5.3333333333vw, 28px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-block__heading {
    font-size: clamp(16px, 1.4583333333vw, 28px);
  }
}
.p-cp-block__heading {
  /* 初期：下にずらして透明。divider 完了後にフェードイン */
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease calc(var(--reveal-delay, 0s) + 0.5s), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--reveal-delay, 0s) + 0.5s);
}
.p-cp-block__divider {
  display: block;
  width: 100%;
  height: 1px;
  background: #CC1522;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-cp-block__divider {
    margin-bottom: min(1.3541666667vw, 26px);
  }
}
.p-cp-block__divider {
  /* 初期：左基点で幅 0。.is-revealed で左→右へ伸びる */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s);
}
.p-cp-block__text {
  color: #000000;
  font-weight: 500;
  line-height: 2;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  .p-cp-block__text {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-cp-block__text {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-block__text {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-cp-block__text {
  /* 直下の段落（__p / __highlight 等）は各々 js-reveal を持ち、
   * viewport に入ったタイミングで個別に下からフェードインする。
   * 親 .p-cp-block.is-revealed には依存させない。 */
}
.p-cp-block__text > .js-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-cp-block__text > .js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.p-cp-block {
  /* block 自身の .is-revealed では divider と heading のみアニメ
   * （text の中身はそれぞれ自身の .js-reveal で制御） */
}
.p-cp-block.is-revealed .p-cp-block__divider {
  transform: scaleX(1);
}
.p-cp-block.is-revealed .p-cp-block__heading {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-block__heading {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .p-cp-block__text > .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .p-cp-block__divider {
    transform: none;
    transition: none;
  }
}
.p-cp-block__p {
  font-size: 18px;
  margin: 0 0 1.5em;
}
.p-cp-block__p:last-child {
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .p-cp-block__p br {
    display: none;
  }
}
.p-cp-block {
  /* 赤い強調文字 */
}
.p-cp-block__highlight, .p-cp-block__p .is-emphasis {
  color: #cc1522;
  font-weight: 700;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .p-cp-block__highlight, .p-cp-block__p .is-emphasis {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-cp-block__highlight, .p-cp-block__p .is-emphasis {
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-block__highlight, .p-cp-block__p .is-emphasis {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-cp-block__highlight, .p-cp-block__p .is-emphasis {
  font-size: 24px;
}
.p-cp-block__highlight {
  display: block;
  margin: 1em 0 1.5em;
  line-height: 2;
}

/* =================================================================
 * 力組の文化（自分の家だと思って、向き合う）
 * ================================================================= */
.p-cp-culture {
  position: relative;
  background: #ffffff;
  padding: 21.3333333333vw 0;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-cp-culture {
    padding: min(5.2083333333vw, 100px) 0;
  }
}
.p-cp-culture__title {
  margin: 0 0 10.6666666667vw;
  padding-inline: 6.4vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #cc1522;
  line-height: 1.1;
  letter-spacing: -0.11em;
  text-align: left;
}
@media (min-width: 768px) {
  .p-cp-culture__title {
    margin-bottom: min(5.2083333333vw, 100px);
    padding-inline: 0;
    text-align: center;
  }
}
.p-cp-culture__title-text {
  display: inline-block;
  /* JS が文字分割するまで非表示にして FOUC を防ぐ */
  visibility: hidden;
}
.p-cp-culture__title-text.is-char-split {
  visibility: visible;
}
.p-cp-culture__title-text {
  font-size: clamp(16px, 10.6666666667vw, 100px);
}
@media (min-width: 768px) {
  .p-cp-culture__title-text {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
@media (min-width: 768px) {
  .p-cp-culture__title-text {
    font-size: clamp(16px, 17.0666666667vw, 135px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-culture__title-text {
    font-size: clamp(16px, 7.03125vw, 135px);
  }
}
@media (max-width: 767.98px) {
  .p-cp-culture__title-text {
    text-align: center;
  }
}
.p-cp-culture {
  /* タイトル「自分の家だと思って、向き合う」を 1 文字ずつ scale 0 → 1.1 → 1 でポップ
   * （JS の initVpMvCopySplit → splitElementChars で <span class="p-cp-culture__char"> 化）
   * .p-cp-culture__title.is-revealed で発火 */
}
.p-cp-culture__char {
  display: inline-block;
  width: fit-content;
  opacity: 0;
  transform: scale(0);
  transform-origin: center bottom;
  will-change: opacity, transform;
}
.p-cp-culture__title.is-revealed .p-cp-culture__char {
  animation: p-cp-culture-char-pop 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--char-i, 0) * 0.06s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-culture__title-text {
    visibility: visible;
  }
  .p-cp-culture__char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-cp-culture__inner {
  display: grid;
  gap: 8vw;
  width: 100%;
  margin: 0 auto;
  padding-inline: 6.4vw;
}
@media (min-width: 768px) {
  .p-cp-culture__inner {
    grid-template-columns: 693fr 673fr;
    gap: min(2.34375vw, 45px);
    padding-inline: min(10.4166666667vw, 200px);
    align-items: start; /* 横並び要素は上揃え */
  }
}
.p-cp-culture__photo {
  overflow: hidden;
  aspect-ratio: 693/802;
  background: #ddd;
}
.p-cp-culture__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-cp-culture__copy {
  display: flex;
  flex-direction: column;
  gap: 8vw;
}
@media (min-width: 768px) {
  .p-cp-culture__copy {
    gap: min(3.6458333333vw, 70px);
  }
}
.p-cp-culture {
  /* 「力組の文化」見出し：
   * 背景の赤帯を左→右に展開した後、文字をフェードイン。
   * 背景は ::before に分離して clip-path で展開、文字は __heading-text の opacity で出す。 */
}
.p-cp-culture__heading {
  display: inline-flex;
  width: fit-content;
  position: relative;
  padding: 2.1333333333vw 4.2666666667vw;
  background: transparent; /* 実際の背景は ::before に */
  color: #ffffff;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-cp-culture__heading {
    padding: min(0.5208333333vw, 10px) min(1.0416666667vw, 20px);
  }
}
.p-cp-culture__heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #cc1522;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
}
.p-cp-culture__heading.is-revealed::before {
  clip-path: inset(0 0 0 0);
}
.p-cp-culture__heading-text {
  position: relative;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s ease;
  font-size: clamp(16px, 13.3333333333vw, 100px);
}
@media (min-width: 768px) {
  .p-cp-culture__heading-text {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
@media (min-width: 768px) {
  .p-cp-culture__heading-text {
    font-size: clamp(16px, 12.8vw, 100px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-culture__heading-text {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
.p-cp-culture__heading.is-revealed .p-cp-culture__heading-text {
  opacity: 1;
  transition-delay: 0.5s; /* 帯展開完了後にフェードイン */
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-culture__heading::before {
    clip-path: none;
    transition: none;
  }
  .p-cp-culture__heading-text {
    opacity: 1;
    transition: none;
  }
}
.p-cp-culture__body {
  color: #000000;
  font-weight: 500;
  line-height: 2;
  font-size: clamp(16px, 3.7333333333vw, 16px);
}
@media (min-width: 768px) {
  .p-cp-culture__body {
    font-size: clamp(16px, 0.8333333333vw, 16px);
  }
}
@media (min-width: 768px) {
  .p-cp-culture__body {
    font-size: clamp(16px, 4.2666666667vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-culture__body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-cp-culture__body p {
  margin: 0 0 1.5em;
}
@media (max-width: 767.98px) {
  .p-cp-culture__body p br {
    display: none;
  }
}
.p-cp-culture__body p:last-child {
  margin-bottom: 0;
}
.p-cp-culture__body {
  position: relative;
}
@media (max-width: 767.98px) {
  .p-cp-culture__body {
    padding-bottom: 100px;
  }
}
.p-cp-culture__body::after {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1/2;
  background: url(../images/ceo/cul-img.png);
  background-size: cover;
  z-index: 686/1013;
  right: -20%;
  margin-top: -70%;
}
@media (max-width: 767.98px) {
  .p-cp-culture__body::after {
    width: 30%;
    margin-top: -20%;
    right: 0;
  }
}

/* =================================================================
 * 力仕事の中で見えてきたもの（背景画像帯 + 壊して生かす + 赤パネル）
 * ================================================================= */
.p-cp-story {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  /* 上部の背景画像 + タイトル */
}
.p-cp-story__photo {
  position: relative;
  width: 100%;
  height: 80vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-cp-story__photo {
    height: min(30vw, 576px);
  }
}
.p-cp-story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-cp-story__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
}
.p-cp-story__title {
  position: absolute;
  width: 100%;
  text-align: left;
  bottom: 40%;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.11em;
  font-size: clamp(16px, 9.3333333333vw, 50px);
}
@media (min-width: 768px) {
  .p-cp-story__title {
    font-size: clamp(16px, 2.6041666667vw, 50px);
  }
}
@media (min-width: 768px) {
  .p-cp-story__title {
    bottom: auto;
    text-align: center;
    top: 45%;
    transform: translateY(-50%);
    font-size: clamp(16px, 12.8vw, 95px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-story__title {
    font-size: clamp(16px, 4.9479166667vw, 95px);
  }
}
@media (max-width: 767.98px) {
  .p-cp-story__title {
    margin-left: 5vw;
  }
}
.p-cp-story {
  /* タイトルテキストは下からフェードイン。
   * 親 .p-cp-story__title は PC で translateY(-50%) を持つので、
   * アニメは中の <span> に当てて競合を避ける。
   * .p-cp-story__title.js-reveal の .is-revealed で発火。 */
}
.p-cp-story__title-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-cp-story__title.is-revealed .p-cp-story__title-text {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-story__title-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.p-cp-story {
  /* 本文部 */
}
.p-cp-story__inner {
  position: relative;
  display: grid;
  gap: 0vw;
}
@media (min-width: 768px) {
  .p-cp-story__inner {
    /* 左 lead 列を狭く、右 body（赤パネル）を広く */
    grid-template-columns: 650fr 1270fr;
    gap: 0;
  }
}
.p-cp-story {
  /* 左：壊して 生かす。＋写真
   * レイアウト：
   *   ┌──────────────────────────┐
   *   │ 壊 し て                  │  ← lead-1（横並び、上段）
   *   │ 生                        │
   *   │ か   [   photo   ]       │  ← lead-2（縦書き、左下）+ photo（右）
   *   │ す                        │
   *   │ 。                        │
   *   └──────────────────────────┘
   */
}
.p-cp-story__lead {
  position: relative;
  padding: 10.6666666667vw 6.4vw 0;
  display: grid;
  /* SP は縦並び（title → text → photo） */
  grid-template-areas: "title" "vtext" "photo";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  grid-auto-rows: auto;
  gap: 1.0666666667vw;
  background: #ffffff; /* SP は単色白 */
}
@media (min-width: 768px) {
  .p-cp-story__lead {
    padding: min(4.1666666667vw, 80px) min(2.0833333333vw, 40px) 0 min(3.125vw, 60px);
    /* PC：左 title 全幅、下段は縦書きテキスト + 写真の 2 列 */
    grid-template-areas: "title  title" "vtext  photo";
    grid-template-columns: auto 1fr;
    gap: min(0.2083333333vw, 4px) min(1.0416666667vw, 20px);
    /* 左 80% 白 / 右 20% 赤の 2 色背景（境界はハードエッジ） */
    background: linear-gradient(to right, #fff 0 80%, #cc1522 80% 100%);
  }
}
.p-cp-story__lead-1, .p-cp-story__lead-2 {
  margin: 0;
  color: #cc1522;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.11em;
  font-size: clamp(16px, 18.6666666667vw, 130px);
}
@media (min-width: 768px) {
  .p-cp-story__lead-1, .p-cp-story__lead-2 {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
@media (min-width: 768px) {
  .p-cp-story__lead-1, .p-cp-story__lead-2 {
    font-size: clamp(16px, 21.3333333333vw, 155px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-story__lead-1, .p-cp-story__lead-2 {
    font-size: clamp(16px, 8.0729166667vw, 155px);
  }
}
.p-cp-story__lead-1 {
  grid-area: title;
  text-align: left;
  /* line-height .85 だが、フォントの ascender / descender 分の余白が
   * line-box に残るため、下方向に negative margin を入れて次要素を
   * グリフの実際の底に詰める。 */
  margin-bottom: -0.25em;
}
@media (min-width: 768px) {
  .p-cp-story__lead-1 {
    /* height: 2em は line-height(.85) + フォント自体の余白で生まれる
     * 「壊して」下のスカスカ空間の主犯。高さは内容に任せる。
     * margin-bottom も後段の overrride で 20px が足されていたが、
     * グリッドの gap で十分なので削除（負マージンで詰め直しは上で対応）。 */
    transform: translateX(min(2.0833333333vw, 40px));
    margin-bottom: -0.2em;
  }
}
.p-cp-story {
  /* 生かす。は SP/PC ともに縦書き。
   * PC：lead-1 の「壊」の真下（左端）に揃え、写真の左隣にぴったり置く */
}
.p-cp-story__lead-2 {
  grid-area: vtext;
  margin-top: 0;
  padding-left: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: start;
}
@media (min-width: 768px) {
  .p-cp-story__lead-2 {
    padding-left: 30px;
  }
}
@media (max-width: 767.98px) {
  .p-cp-story__lead-2 {
    width: fit-content;
    position: absolute;
    height: 400px;
  }
}
.p-cp-story__lead-photo {
  grid-area: photo;
  margin-top: 0;
  overflow: hidden;
  /* 縦書きテキストと同じ高さまで伸ばす */
  align-self: stretch;
  position: relative;
  z-index: 2; /* 赤パネルより前面 */
}
.p-cp-story__lead-photo img {
  width: 100%;
  aspect-ratio: 588/979;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767.98px) {
  .p-cp-story__lead-photo {
    aspect-ratio: 4/5;
  }
}
@media (min-width: 768px) {
  .p-cp-story__lead-photo {
    /* グリッドのトラック幅より広げて右側（赤パネルエリア）にはみ出させる */
    width: min(36.4583333333vw, 700px);
    max-width: none;
  }
}
.p-cp-story {
  /* 出現アニメ：lead-1 / lead-2 は下からフェードイン */
}
.p-cp-story__lead-1, .p-cp-story__lead-2 {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-cp-story__lead-1.is-revealed, .p-cp-story__lead-2.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.p-cp-story__lead-1 {
  padding-bottom: 80px;
}
.p-cp-story {
  /* PC では translateX を保持したまま translateY 戻す
   * （height: 2em / margin-bottom: 20px は上のブロックで削除済み。
   *   ここでは transform の上書きのみ行う） */
}
@media (min-width: 768px) {
  .p-cp-story__lead-1 {
    transform: translate(min(2.0833333333vw, 40px), 20px);
    height: fit-content;
  }
  .p-cp-story__lead-1.is-revealed {
    transform: translate(min(2.0833333333vw, 40px), 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-story__lead-1, .p-cp-story__lead-2 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .p-cp-story__lead-1 {
    transform: translateX(min(2.0833333333vw, 40px));
  }
}
.p-cp-story {
  /* 右：赤パネル本文
   * 親 .p-cp-story__body 自体にはアニメ無し（背景はそのまま表示）。
   * 中の各 <p> に js-reveal を付与し、段落ごとに下からフェードインする。
   * 本文は赤パネルの中央（横方向）に位置するように中央寄せ。 */
}
.p-cp-story__body {
  background: #cc1522;
  color: #ffffff;
  padding: 13.3333333333vw 6.4vw;
  line-height: 2;
  font-weight: 500;
  text-align: left;
  font-size: clamp(16px, 3.4666666667vw, 15px);
}
@media (min-width: 768px) {
  .p-cp-story__body {
    font-size: clamp(16px, 0.78125vw, 15px);
  }
}
@media (min-width: 768px) {
  .p-cp-story__body {
    padding: min(5.2083333333vw, 100px) min(8.3333333333vw, 160px);
    font-size: clamp(16px, 4vw, 18px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-story__body {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-cp-story__body p {
  margin: 0 0 1.5em;
}
@media (max-width: 767.98px) {
  .p-cp-story__body p br {
    display: none;
  }
}
.p-cp-story__body p:last-child {
  margin-bottom: 0;
}
.p-cp-story__body {
  /* 段落単位の下からフェード */
}
.p-cp-story__body > p.js-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-cp-story__body > p.js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .p-cp-story__body > p.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.p-cp-story__body-mixed .is-emphasis {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4.2666666667vw, 20px);
}
@media (min-width: 768px) {
  .p-cp-story__body-mixed .is-emphasis {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 768px) {
  .p-cp-story__body-mixed .is-emphasis {
    font-size: clamp(16px, 4.8vw, 24px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .p-cp-story__body-mixed .is-emphasis {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}

/* /ceo-message ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* ===================================================================
 * /jobs ページ専用スタイル
 *
 * Figma:
 *   - PC: node 87:1591
 *   - SP: node 87:1969
 *
 * 構造:
 *   .p-jb-mv                   メインビジュアル（タイトル + リード + タブ）
 *   .p-jb-job                  各職種セクション（営業職 / 現場職）
 *     ├ .p-jb-job__intro             大タイトル + 本文 + メイン写真
 *     ├ .p-jb-job__interview-head    インタビュアー名 + 引用バー
 *     ├ .p-jb-job__interview         インタビュアー写真 + Q&A
 *     ├ .p-jb-job__flow              「仕事の流れ」Swiper スライダー
 *     ├ .p-jb-job__cards-head        カードコピー + サブ写真
 *     ├ .p-jb-job__recruit           募集要項 dl
 *     └ .p-jb-job__entry             エントリーボタン
 * =================================================================== */
/* ===== カラートークン（jobs専用） ===== */
/* =====================================================================
 * Base
 * ===================================================================== */
.p-jb-mv,
.p-jb-job {
  color: #1E1E1E;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.6;
}

/* =====================================================================
 * MV
 * ===================================================================== */
.p-jb-mv {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* フルブリードのフォト hero。SP は縦長気味、PC は 16:9 程度。 */
  height: 149.3333333333vw;
  max-height: 100vh;
  background: #2a2a2a;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-jb-mv {
    height: min(56.25vw, 1080px);
  }
}
.p-jb-mv {
  /* ----- 背景 2 枚スタック -----
   * .before (mv.png) を初期表示、.after (mv-2.png) を opacity 0 → 1 でフェードイン。
   * .after が完全に被さった後（~1.5s）、本文（copy → lead）を順にフェードイン。 */
}
.p-jb-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.p-jb-mv__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.p-jb-mv__media img.before {
  opacity: 1; /* 初期表示で常に見える */
}
.p-jb-mv__media img.after {
  opacity: 0;
  will-change: opacity;
  animation: anim-img-2 1.2s ease 0.3s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-mv__media img.after {
    opacity: 1;
    animation: none;
  }
}
.p-jb-mv {
  /* テキストを画面中央に重ねるラッパー */
}
.p-jb-mv__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5.3333333333vw;
  pointer-events: none;
}
@media (min-width: 768px) {
  .p-jb-mv__inner {
    padding: 0 4.1666666667vw;
  }
}
.p-jb-mv {
  /* ----- 本文の表示順 -----
   * .after フェード完了（.3s 開始 + 1.2s = 1.5s）後に、
   *   - __copy は 1 文字ずつ scale 0 → 1.1 → 1 でポップ（左から順）
   *   - __lead は遅れて全体フェードアップ
   * （__copy 自体は常時可視。中の __char が個別に opacity 制御する） */
}
.p-jb-mv__lead {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  animation: anim-txt-1 1s cubic-bezier(0.22, 0.61, 0.36, 1) 2.3s forwards;
}
.p-jb-mv {
  /* 1 文字ずつポップ（JS で .p-jb-mv__copy-text を <span class="p-jb-mv__char"> に分割） */
}
.p-jb-mv__char {
  width: fit-content;
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
  /* 背景の after が被さった後（1.5s）から、左から順にポップ。
   * 1 文字 0.06s ずつ stagger。 */
  animation: mv-char-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--char-i, 0) * 0.06s + 1.5s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-mv__lead {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .p-jb-mv__char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.p-jb-mv {
  /* 巨大な斜体タイトル「人が力になる。」
   * Figma: 312.84px, -8deg skew, scaleY 0.99, tracking -7.2px, Zen Kaku Black */
}
.p-jb-mv__copy {
  margin: 0;
  font-size: clamp(16px, 13.8666666667vw, 252px);
}
@media (min-width: 768px) {
  .p-jb-mv__copy {
    font-size: clamp(16px, 13.125vw, 252px);
  }
}
.p-jb-mv__copy {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  color: #ffffff;
  white-space: nowrap;
}
.p-jb-mv__copy-text {
  display: inline-block;
  transform: skewX(-8deg) scaleY(0.99);
  transform-origin: center;
}
.p-jb-mv__lead {
  margin: 5.3333333333vw 0 0;
  font-size: clamp(16px, 3.4666666667vw, 24px);
}
@media (min-width: 768px) {
  .p-jb-mv__lead {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-jb-mv__lead {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.023em;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-jb-mv__lead {
    margin-top: 1.6666666667vw;
  }
}

/* =====================================================================
 * 職種タブ（フォトタイル：MV 下の独立セクション）
 *
 * Figma 87:1662
 *   - PC: 2 つのフォトタイル横並び (px 100px) / タイル高 534px
 *   - 各タイルは背景画像（tab-1.png / tab-2.png）の上に
 *     中央寄せで白文字スキュー「現場職 / 営業職」(172.84px)
 *     と「インタビュー →」(85.84px)
 *   - 文字は全て -skew-x-8 + scale-y-99
 * ===================================================================== */
.p-jb-tabs {
  position: relative;
  padding: 0;
  margin-top: -120px;
  /* ----- 表示アニメーション -----
   * 動きはつけず、その場でじわっと opacity 0 → 1 のフェードイン。
   * MV のコピー/リードが出揃った後（~2.6s）に発火する。 */
  opacity: 0;
  will-change: opacity;
  animation: p-jb-tabs-fade 1s ease 2.6s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-tabs {
    opacity: 1;
    animation: none;
  }
}
.p-jb-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .p-jb-tabs__list {
    grid-template-columns: 1fr 1fr;
    padding: 0 5.2083333333vw;
  }
}
.p-jb-tabs__item {
  margin: 0;
}
.p-jb-tabs__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 74.6666666667vw;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
}
@media (min-width: 768px) {
  .p-jb-tabs__link {
    height: min(27.8125vw, 534px);
  }
}
.p-jb-tabs {
  /* 背景画像 */
}
.p-jb-tabs__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.6s ease, filter 0.3s ease, opacity 0.6s;
  will-change: transform;
}
.p-jb-tabs__bg + .p-jb-tabs__bg {
  opacity: 1;
}
.p-jb-tabs__link:hover .p-jb-tabs__bg {
  transform: scale(1.04);
}
.p-jb-tabs__link:hover .p-jb-tabs__bg + .p-jb-tabs__bg {
  opacity: 0;
}
.p-jb-tabs__link:hover .p-jb-tabs.p-jb-tabs__title-text {
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}
.p-jb-tabs__link:hover .p-jb-tabs.p-jb-tabs__sub-text {
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}
.p-jb-tabs {
  /* タイル内のテキスト群 */
}
.p-jb-tabs__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.1333333333vw;
  width: 100%;
  padding: 0 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-jb-tabs__content {
    gap: 1.1979166667vw;
    width: min(27.5vw, 528px);
    padding: 0;
  }
}
.p-jb-tabs {
  /* 大タイトル「現場職 / 営業職」 */
}
.p-jb-tabs__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 0.9;
}
.p-jb-tabs__title-text {
  display: inline-block;
  font-size: clamp(16px, 12.8vw, 172px);
}
@media (min-width: 768px) {
  .p-jb-tabs__title-text {
    font-size: clamp(16px, 8.9583333333vw, 172px);
  }
}
.p-jb-tabs__title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
  transform: skewX(-8deg) scaleY(0.99);
  transform-origin: center;
}
.p-jb-tabs {
  /* 小ラベル「インタビュー →」 */
}
.p-jb-tabs__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1333333333vw;
  width: 100%;
}
@media (min-width: 768px) {
  .p-jb-tabs__sub {
    gap: 0.5208333333vw;
  }
}
.p-jb-tabs__sub-text {
  display: inline-block;
  font-size: clamp(16px, 5.8666666667vw, 85px);
}
@media (min-width: 768px) {
  .p-jb-tabs__sub-text {
    font-size: clamp(16px, 4.4270833333vw, 85px);
  }
}
.p-jb-tabs__sub-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
  transform: skewX(-8deg) scaleY(0.99);
  transform-origin: center;
}
.p-jb-tabs__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4vw;
  height: 6.4vw;
  color: #ffffff;
}
@media (min-width: 768px) {
  .p-jb-tabs__arrow {
    width: min(2.0833333333vw, 40px);
    height: min(2.0833333333vw, 40px);
  }
}
.p-jb-tabs__arrow svg {
  width: 100%;
  height: 100%;
}

/* タブセクションのその場フェードイン */
@keyframes p-jb-tabs-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =====================================================================
 * Job section（共通：営業職 / 現場職）
 * ===================================================================== */
/* ===== マゼンタアクセント（バッジ・Qラベル等の共通色） ===== */
/* ===== 斜体テキストの共通スタイル：transform: skewX(-8deg) scaleY(.99) ===== */
.p-jb-job__recruit-term-text, .p-jb-job__recruit-title-text, .p-jb-job__cards-title-text, .p-jb-job__cards-sub-text, .p-jb-job__flow-text-inner, .p-jb-job__flow-label-text, .p-jb-job__flow-time-text, .p-jb-job__flow-title-text, .p-jb-job__qa-q-text, .p-jb-job__quote-title-text, .p-jb-job__badge-text, .p-jb-job__title-text, .p-jb-job__sub-text {
  display: inline-block;
  transform: skewX(-8deg) scaleY(0.99);
  transform-origin: center;
}

.p-jb-job {
  position: relative;
  background: #ffffff;
  /* セクション間の余白はブロック側で持つので、ここではゼロ。 */
  padding: 0;
  /* ===========================================================
   * Intro：背景写真 + 大タイトル + マゼンタバッジ
   * Figma: 115:1464
   * =========================================================== */
}
.p-jb-job__intro {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 背景写真の高さを確保 */
  min-height: 112vw;
  padding: 16vw 5.3333333333vw;
  margin-top: 50px;
}
@media (min-width: 768px) {
  .p-jb-job__intro {
    min-height: min(39.7395833333vw, 763px);
    padding: 11.0416666667vw 10.4166666667vw;
  }
}
.p-jb-job__intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.p-jb-job__intro-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.p-jb-job {
  /* 左から白で読みやすくするためのグラデーション覆い */
}
.p-jb-job__intro-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 33%, rgb(255, 255, 255) 82%);
}
@media (max-width: 767.98px) {
  .p-jb-job__intro-veil {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
  }
}
.p-jb-job__intro-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5.3333333333vw;
  flex-direction: column;
}
@media (min-width: 768px) {
  .p-jb-job__intro-inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 3.125vw;
  }
}
.p-jb-job__intro-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.2666666667vw;
}
@media (min-width: 768px) {
  .p-jb-job__intro-head {
    gap: 2.0833333333vw;
  }
}
.p-jb-job {
  /* 「営業職 インタビュー」バッジ（白背景・黒枠） */
}
.p-jb-job__sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.6vw 3.2vw;
  background: #ffffff;
  border: 1px solid #1E1E1E;
  width: fit-content;
}
@media (min-width: 768px) {
  .p-jb-job__sub {
    padding: 0.5208333333vw;
  }
}
.p-jb-job__sub-text {
  font-size: clamp(16px, 4.2666666667vw, 40px);
}
@media (min-width: 768px) {
  .p-jb-job__sub-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-jb-job__sub-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job {
  /* 巨大スキュータイトル「信頼を / つくる仕事。」 */
}
.p-jb-job__title {
  margin: 0;
  line-height: 0.9;
}
.p-jb-job__title-text {
  font-size: clamp(16px, 14.9333333333vw, 152px);
}
@media (min-width: 768px) {
  .p-jb-job__title-text {
    font-size: clamp(16px, 7.9166666667vw, 152px);
  }
}
.p-jb-job__title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
}
.p-jb-job {
  /* 縦に積むマゼンタバッジ（力組歴 / 名前） */
}
.p-jb-job__badges {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  align-self: flex-start;
}
@media (min-width: 768px) {
  .p-jb-job__badges {
    width: 10.7291666667vw;
    align-self: flex-end;
  }
}
.p-jb-job__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D400FF;
  border: 3px solid #1E1E1E;
  padding: 2.1333333333vw 2.6666666667vw;
}
@media (min-width: 768px) {
  .p-jb-job__badge {
    padding: 0.5208333333vw;
  }
}
.p-jb-job__badge + .p-jb-job__badge {
  border-top: 0; /* 縦並び：上下のバッジで枠線を共有 */
}
.p-jb-job__badge-text {
  font-size: clamp(16px, 4.2666666667vw, 30px);
}
@media (min-width: 768px) {
  .p-jb-job__badge-text {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.p-jb-job__badge-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
}
.p-jb-job {
  /* ===========================================================
   * Cutout：切り抜き人物 + 左右の Q&A カード
   * Figma: 115:1497
   * =========================================================== */
}
.p-jb-job__more {
  position: relative;
  background: #ffffff;
  padding: 10.6666666667vw 5.3333333333vw 16vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-jb-job__more {
    padding: 6.25vw 8.8541666667vw 8.3333333333vw;
  }
}
.p-jb-job {
  /* 中央の立ち人切り抜き */
}
.p-jb-job__more-photo {
  position: relative;
  width: 58.6666666667vw;
  margin: 0 auto 6.4vw;
}
@media (min-width: 768px) {
  .p-jb-job__more-photo {
    position: absolute;
    left: 33%;
    top: 2.0833333333vw;
    transform: translateX(-50%);
    width: min(27.9166666667vw, 536px);
    margin: 0;
    z-index: 1;
  }
}
.p-jb-job__more-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: bottom;
}
.p-jb-job__more-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6.4vw;
}
@media (min-width: 768px) {
  .p-jb-job__more-grid {
    grid-template-columns: minmax(0, 753fr) minmax(0, 753fr);
    gap: 15%;
    align-items: start;
  }
}
.p-jb-job__more-grid .p-jb-job__qa-card {
  border: none;
  background-color: unset;
}
.p-jb-job {
  /* PC では 1 枚目は上、2 枚目は下にオフセット（figma の配置に近づける） */
}
@media (min-width: 768px) {
  .p-jb-job__qa-card--left {
    margin-top: 13.125vw;
  }
  .p-jb-job__qa-card--right {
    margin-top: 20.8854166667vw;
    justify-self: end;
  }
}
.p-jb-job {
  /* ===========================================================
   * Quote：ダーク背景 + 巨大な引用 + 3 Q&A カード
   * Figma: 115:1474
   * =========================================================== */
}
.p-jb-job__quote-block {
  position: relative;
  overflow: hidden;
  padding: 16vw 5.3333333333vw 0;
  margin-bottom: -20px;
}
@media (min-width: 768px) {
  .p-jb-job__quote-block {
    padding: 5.2083333333vw 10.4166666667vw 0;
  }
}
.p-jb-job__quote-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.p-jb-job__quote-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.p-jb-job__quote-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* 文字の可読性を上げる薄暗カバー */
}
.p-jb-job {
  /* 巨大な引用：白い塗り + ピンクの縁取り（マゼンタ stroke） */
}
.p-jb-job__quote-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8.5333333333vw;
  text-align: center;
  line-height: 0.9;
}
@media (min-width: 768px) {
  .p-jb-job__quote-title {
    margin-bottom: 3.75vw;
  }
}
.p-jb-job__quote-title-text {
  font-size: clamp(16px, 9.3333333333vw, 130px);
}
@media (min-width: 768px) {
  .p-jb-job__quote-title-text {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
.p-jb-job__quote-title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
  /* ピンクの縁取り（マゼンタ） */
  -webkit-text-stroke: 2px #D400FF;
  text-stroke: 2px #D400FF;
  paint-order: stroke fill; /* 塗りの上に stroke が乗らないように */
}
@media (min-width: 768px) {
  .p-jb-job__quote-title-text {
    -webkit-text-stroke-width: 4px;
    text-stroke-width: 4px;
  }
}
.p-jb-job__quote-cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-jb-job__quote-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.0833333333vw;
    align-items: start;
  }
}
.p-jb-job {
  /* ===========================================================
   * Q&A カード共通（cutout / quote の両方で使用）
   * =========================================================== */
}
.p-jb-job__qa-card {
  background: #ffffff;
  border: 3px solid #1E1E1E;
  padding: 4.2666666667vw 4.2666666667vw 5.3333333333vw;
  display: flex;
  flex-direction: column;
  gap: 4.2666666667vw;
}
@media (min-width: 768px) {
  .p-jb-job__qa-card {
    border-width: 5px;
    padding: 1.5625vw 1.0416666667vw;
    gap: 1.0416666667vw;
  }
}
.p-jb-job__qa-q {
  margin: 0;
  background: #D400FF;
  border: 2px solid #1E1E1E;
  padding: 2.1333333333vw 2.6666666667vw;
  text-align: center;
  position: relative;
  width: fit-content;
}
@media (min-width: 768px) {
  .p-jb-job__qa-q {
    border-width: 3px;
    padding: 0.5208333333vw;
  }
}
.p-jb-job__qa-q {
  /* 下のピンク区切り線 */
}
.p-jb-job__qa-q::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3.2vw;
  height: 2px;
  background: #D400FF;
}
@media (min-width: 768px) {
  .p-jb-job__qa-q::after {
    bottom: -1.0416666667vw;
    height: 3px;
  }
}
.p-jb-job__qa-q-text {
  font-size: clamp(16px, 3.4666666667vw, 24px);
}
@media (min-width: 768px) {
  .p-jb-job__qa-q-text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-jb-job__qa-q-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job__qa-a {
  margin: 3.2vw 0 0;
  font-size: clamp(16px, 3.2vw, 18px);
}
@media (min-width: 768px) {
  .p-jb-job__qa-a {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-jb-job__qa-a {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.023em;
  color: #1E1E1E;
}
@media (min-width: 768px) {
  .p-jb-job__qa-a {
    margin-top: 1.0416666667vw;
  }
}
.p-jb-job {
  /* ===========================================================
   * 仕事の流れ Swiper
   * Figma: 115:1411
   * =========================================================== */
}
.p-jb-job__flow {
  position: relative;
  background: #F2F2F2;
  padding: 16vw 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .p-jb-job__flow {
    padding: 5.2083333333vw 0 2.6041666667vw;
  }
}
.p-jb-job__flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5.3333333333vw;
  padding: 0 5.3333333333vw 8.5333333333vw;
}
@media (min-width: 768px) {
  .p-jb-job__flow-head {
    padding: 0 10.4166666667vw 7.8125vw;
  }
}
.p-jb-job__flow-title {
  margin: 0;
  line-height: 0.9;
}
.p-jb-job__flow-title-text {
  font-size: clamp(16px, 10.6666666667vw, 100px);
}
@media (min-width: 768px) {
  .p-jb-job__flow-title-text {
    font-size: clamp(16px, 5.2083333333vw, 100px);
  }
}
.p-jb-job__flow-title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
}
.p-jb-job__flow-nav {
  display: flex;
  gap: 3.2vw;
  width: fit-content;
}
@media (min-width: 768px) {
  .p-jb-job__flow-nav {
    gap: 1.0416666667vw;
  }
}
.p-jb-job__flow-prev, .p-jb-job__flow-next {
  appearance: none;
  background: transparent;
  border: 1.5px solid #1E1E1E;
  border-radius: 50%;
  width: 9.6vw;
  height: 9.6vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1E1E1E;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 768px) {
  .p-jb-job__flow-prev, .p-jb-job__flow-next {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    border-width: 2px;
  }
}
.p-jb-job__flow-prev:hover, .p-jb-job__flow-next:hover {
  background: #1E1E1E;
  color: #ffffff;
}
.p-jb-job__flow-prev.swiper-button-disabled, .p-jb-job__flow-next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.p-jb-job__flow-prev svg, .p-jb-job__flow-next svg {
  width: 50%;
  height: 50%;
}
.p-jb-job {
  /* Swiper レイアウト */
}
.p-jb-job__flow .swiper {
  overflow: visible;
  padding: 0 5.3333333333vw;
  position: relative;
}
@media (min-width: 768px) {
  .p-jb-job__flow .swiper {
    padding: 0 10.4166666667vw;
  }
}
.p-jb-job__flow .swiper {
  /* 横一直線の細いタイムライン（ドットの中央を通る）
   * ドット中心は flow-card 内のドット位置に対応：
   * 時刻ブロック高さ + gap + 半径分。
   * 50% の縦中央線として近似で十分 */
}
.p-jb-job__flow .swiper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21%;
  transform: translateY(-50%);
  height: 1.5px;
  background: #1E1E1E;
  z-index: 0;
  pointer-events: none;
}
.p-jb-job__flow-slide {
  height: auto;
  overflow: visible;
}
.p-jb-job__flow-card {
  position: relative;
  height: 100%;
  padding: 0 2.1333333333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.6666666667vw;
  z-index: 1;
}
@media (min-width: 768px) {
  .p-jb-job__flow-card {
    padding: 0 1.25vw;
    gap: 0.8333333333vw;
  }
}
.p-jb-job__flow-time {
  line-height: 0.9;
}
.p-jb-job__flow-time-text {
  font-size: clamp(16px, 6.4vw, 50px);
}
@media (min-width: 768px) {
  .p-jb-job__flow-time-text {
    font-size: clamp(16px, 2.6041666667vw, 50px);
  }
}
.p-jb-job__flow-time-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job {
  /* タイムライン上のドット */
}
.p-jb-job__flow-dot {
  display: block;
  width: 3.7333333333vw;
  height: 3.7333333333vw;
  border-radius: 50%;
  background: #1E1E1E;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px #F2F2F2; /* タイムライン線をドット周囲で隠す */
}
@media (min-width: 768px) {
  .p-jb-job__flow-dot {
    width: 1.1458333333vw;
    height: 1.1458333333vw;
    box-shadow: 0 0 0 6px #F2F2F2;
  }
}
.p-jb-job__flow-label {
  margin: 0;
  line-height: 0.9;
}
.p-jb-job__flow-label-text {
  font-size: clamp(16px, 4.8vw, 40px);
}
@media (min-width: 768px) {
  .p-jb-job__flow-label-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-jb-job__flow-label-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
}
.p-jb-job__flow-text {
  margin: 2.1333333333vw 0 0;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .p-jb-job__flow-text {
    margin-top: 0.8333333333vw;
  }
}
.p-jb-job__flow-text-inner {
  font-size: clamp(16px, 2.9333333333vw, 20px);
}
@media (min-width: 768px) {
  .p-jb-job__flow-text-inner {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
.p-jb-job__flow-text-inner {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  color: #1E1E1E;
  line-height: 1.5;
  letter-spacing: -0.023em;
}
.p-jb-job {
  /* スライドに付くデコレーション写真（タイムラインの上下にはみ出す） */
}
.p-jb-job__flow-photo {
  position: absolute;
  top: 50%;
  right: -13.3333333333vw;
  transform: translateY(-50%);
  width: 26.6666666667vw;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}
@media (min-width: 768px) {
  .p-jb-job__flow-photo {
    right: -5.2083333333vw;
    width: 10.4166666667vw;
  }
}
.p-jb-job__flow-slide:nth-child(1) .p-jb-job__flow-photo {
  margin-top: -80px;
}
@media (max-width: 767.98px) {
  .p-jb-job__flow-slide:nth-child(3) .p-jb-job__flow-photo {
    right: -2.6041666667vw;
    margin-top: -40px;
  }
}
@media (min-width: 768px) {
  .p-jb-job__flow-slide:nth-child(3) .p-jb-job__flow-photo {
    right: min(-2vw, -60px);
    margin-top: -45px;
    width: min(10vw, 130px);
  }
}
@media (max-width: 767.98px) {
  .p-jb-job__flow-slide:nth-child(4) .p-jb-job__flow-photo {
    right: -2.6041666667vw;
  }
}
@media (min-width: 768px) {
  .p-jb-job__flow-slide:nth-child(4) .p-jb-job__flow-photo {
    right: -2.6041666667vw;
    width: 12.5vw;
  }
}
@media (max-width: 767.98px) {
  .p-jb-job__flow-slide:nth-child(6) .p-jb-job__flow-photo {
    margin-top: -50px;
  }
}
@media (min-width: 768px) {
  .p-jb-job__flow-slide:nth-child(6) .p-jb-job__flow-photo {
    margin-top: -50px;
  }
}
@media (max-width: 767.98px) {
  .p-jb-job__flow-slide:nth-child(5) .p-jb-job__flow-photo {
    margin-top: -70px;
  }
}
@media (min-width: 768px) {
  .p-jb-job__flow-slide:nth-child(5) .p-jb-job__flow-photo {
    margin-top: -75px;
    width: 12.5vw;
    width: min(12vw, 140px);
  }
}
.p-jb-job {
  /* ===== Cards head（ブロック全体の背景画像 + 左寄せの黒い斜体テキスト）
   * Figma: 87:1658
   * - bg：PHP の inline style で背景画像を指定
   * - veil：左から白 → 透明のグラデーションで文字の可読性を確保
   * - sub：Q.求職者にメッセージ（40px / 黒 / skew -8°）
   * - title：120px の大コピー（黒 / skew -8°）
   * - PC のテキスト列幅は max 865px
   */
}
.p-jb-job__cards-head {
  position: relative;
  overflow: hidden;
  margin-top: 21.3333333333vw;
  padding: 16vw 5.3333333333vw;
  min-height: 112vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .p-jb-job__cards-head {
    margin-top: 8.3333333333vw;
    padding: 10.4166666667vw 10.4166666667vw;
    min-height: 39.5833333333vw;
  }
}
.p-jb-job {
  /* 左から白で読みやすくするためのグラデーション覆い */
}
.p-jb-job__cards-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 33%, rgb(255, 255, 255) 82%);
}
@media (max-width: 767.98px) {
  .p-jb-job__cards-veil {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0) 100%);
  }
}
.p-jb-job__cards-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8.5333333333vw;
  width: 100%;
}
@media (min-width: 768px) {
  .p-jb-job__cards-inner {
    gap: 4.6875vw;
  }
}
.p-jb-job {
  /* sub label：Q.求職者にメッセージ */
}
.p-jb-job__cards-sub {
  display: inline-block;
  line-height: 0.9;
}
.p-jb-job__cards-sub-text {
  font-size: clamp(16px, 4.2666666667vw, 40px);
}
@media (min-width: 768px) {
  .p-jb-job__cards-sub-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-jb-job__cards-sub-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job {
  /* 大コピー：解体業の / 新しい可能性を / 一緒に探そう */
}
.p-jb-job__cards-title {
  margin: 0;
  line-height: 1;
  text-shadow: none;
}
.p-jb-job__cards-title-text {
  font-size: clamp(16px, 10.6666666667vw, 120px);
}
@media (min-width: 768px) {
  .p-jb-job__cards-title-text {
    font-size: clamp(16px, 6.25vw, 120px);
  }
}
.p-jb-job__cards-title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 1;
  letter-spacing: -0.023em;
}
.p-jb-job {
  /* ===== 募集要項 ラッパー =====
   * Figma: 87:1710 — px=200 / pt=50 / pb=100
   */
}
.p-jb-job__recruit {
  position: relative;
  margin-top: 0;
  padding: 13.3333333333vw 5.3333333333vw 21.3333333333vw;
  background: #ffffff;
}
@media (min-width: 768px) {
  .p-jb-job__recruit {
    padding: 2.6041666667vw 10.4166666667vw 5.2083333333vw;
  }
}
.p-jb-job {
  /* ===== 募集要項 =====
   * Figma: 87:1710
   * - セクションタイトル「営業職 募集要項」は 40px 斜体黒
   * - PC: 2 列のカードグリッド（CSS multi-column で masonry 風）
   * - SP: 1 列スタック
   * - 各カード：3px マゼンタ枠 + 上部マゼンタ帯 + 白カード地に黒本文
   */
}
.p-jb-job__recruit-title {
  margin: 0 0 5.3333333333vw;
  line-height: 0.9;
}
@media (min-width: 768px) {
  .p-jb-job__recruit-title {
    margin-bottom: 2.6041666667vw;
  }
}
.p-jb-job__recruit-title-text {
  font-size: clamp(16px, 5.8666666667vw, 40px);
}
@media (min-width: 768px) {
  .p-jb-job__recruit-title-text {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
.p-jb-job__recruit-title-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job {
  /* 2 列の masonry レイアウト：CSS multi-column で各カードを分割不可に */
}
.p-jb-job__recruit-grid {
  columns: 1;
  column-gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-jb-job__recruit-grid {
    columns: 2;
    column-gap: 1.3020833333vw;
  }
}
.p-jb-job__recruit-card {
  /* 列内で途中で分割されないようにする */
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: #ffffff;
  border: 3px solid #D400FF;
  padding: 4.2666666667vw;
  display: flex;
  flex-direction: column;
  gap: 3.2vw;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .p-jb-job__recruit-card {
    padding: 1.0416666667vw;
    gap: 0.78125vw;
    margin-bottom: 1.3020833333vw;
  }
}
.p-jb-job__recruit-card {
  /* 最後のカードの下マージンは削除（grid 下の余白制御を整える） */
}
.p-jb-job__recruit-card:last-child {
  margin-bottom: 0;
}
.p-jb-job {
  /* マゼンタの帯 + 白い斜体タイトル */
}
.p-jb-job__recruit-term {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D400FF;
  padding: 2.1333333333vw 2.6666666667vw;
  text-align: center;
}
@media (min-width: 768px) {
  .p-jb-job__recruit-term {
    padding: 0.5208333333vw;
  }
}
.p-jb-job__recruit-term-text {
  font-size: clamp(16px, 3.4666666667vw, 24px);
}
@media (min-width: 768px) {
  .p-jb-job__recruit-term-text {
    font-size: clamp(16px, 1.25vw, 24px);
  }
}
.p-jb-job__recruit-term-text {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.023em;
  white-space: nowrap;
}
.p-jb-job__recruit-desc {
  margin: 0;
  font-size: clamp(16px, 3.2vw, 18px);
}
@media (min-width: 768px) {
  .p-jb-job__recruit-desc {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
.p-jb-job__recruit-desc {
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.023em;
  color: #1E1E1E;
}
.p-jb-job {
  /* ===== Entry button ===== */
}
.p-jb-job__entry {
  margin-top: 16vw;
  padding: 0 0vw 50px 2.6666666667vw;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1146px;
}
@media (min-width: 768px) {
  .p-jb-job__entry {
    margin-top: 6.25vw;
    padding: 0 6.25vw 100px;
  }
}
.p-jb-job__entry-btn {
  display: block;
  margin: auto;
}
@media (min-width: 768px) {
  .p-jb-job__entry-btn {
    max-width: 23.9583333333vw;
    width: 80%;
  }
}
.p-jb-job__entry-btn:hover {
  background: #1E1E1E;
  color: #FFE100;
}
.p-jb-job__entry-btn .hover {
  display: none;
}
.p-jb-job__entry-btn:hover .hover {
  display: block;
}
.p-jb-job__entry-btn:hover .default {
  display: none;
}
.p-jb-job__entry-btn img {
  width: 100%;
}
.p-jb-job__entry-btn-text {
  flex: 1 1 auto;
  text-align: center;
}
.p-jb-job__entry-btn-icon {
  flex: 0 0 auto;
  width: 8.5333333333vw;
  height: 8.5333333333vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .p-jb-job__entry-btn-icon {
    width: 2.5vw;
    height: 2.5vw;
  }
}
.p-jb-job__entry-btn-icon svg {
  width: 100%;
  height: 100%;
}

/* =====================================================================
 * 現場職 / 営業職のバリエーション
 * - 営業職：マゼンタ（#D400FF）アクセント（デフォルト）
 * - 現場職：ブルー（#0073FF）アクセント
 * マゼンタを使っている全要素をブルーに差し替え。
 * ===================================================================== */
.p-jb-job--field {
  /* 名前バッジ（力組歴 / 工藤） */
}
.p-jb-job--field .p-jb-job__badge {
  background: #0073FF;
}
.p-jb-job--field {
  /* 引用「正直どうなのよ？」のピンク stroke → ブルー stroke */
}
.p-jb-job--field .p-jb-job__quote-title-text {
  -webkit-text-stroke-color: #0073FF;
  text-stroke-color: #0073FF;
}
.p-jb-job--field {
  /* Q&A カード（cutout / quote 両方で使用） */
}
.p-jb-job--field .p-jb-job__qa-q {
  background: #0073FF;
}
.p-jb-job--field .p-jb-job__qa-q::after {
  background: #0073FF;
}
.p-jb-job--field {
  /* 募集要項カード */
}
.p-jb-job--field .p-jb-job__recruit-card {
  border-color: #0073FF;
}
.p-jb-job--field .p-jb-job__recruit-term {
  background: #0073FF;
}
.p-jb-job--field .p-jb-job__more-photo {
  width: 32vw;
}
@media (min-width: 768px) {
  .p-jb-job--field .p-jb-job__more-photo {
    width: min(17.5vw, 336px);
    left: 43%;
  }
}

/* =====================================================================
 * /jobs ジョブセクションの表示アニメーション
 * 各要素は revealOnView() で画面に入ったとき .is-revealed が付く。
 * ===================================================================== */
/* ----- ① 1 文字ずつポップ（タイトル系） -----
 * 対象: __title-text / __quote-title-text / __flow-title-text / __cards-title-text
 * JS で各タイトルを <span class="p-jb-job__char"> に分割。 */
.p-jb-job__title-text .p-jb-job__char,
.p-jb-job__quote-title-text .p-jb-job__char,
.p-jb-job__flow-title-text .p-jb-job__char,
.p-jb-job__cards-title-text .p-jb-job__char {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
  width: fit-content;
}
.p-jb-job__title-text.is-revealed .p-jb-job__char,
.p-jb-job__quote-title-text.is-revealed .p-jb-job__char,
.p-jb-job__flow-title-text.is-revealed .p-jb-job__char,
.p-jb-job__cards-title-text.is-revealed .p-jb-job__char {
  animation: mv-char-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--char-i, 0) * 0.06s) forwards;
  width: fit-content;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-job__title-text .p-jb-job__char,
  .p-jb-job__quote-title-text .p-jb-job__char,
  .p-jb-job__flow-title-text .p-jb-job__char,
  .p-jb-job__cards-title-text .p-jb-job__char {
    opacity: 1;
    transform: none;
    animation: none;
    width: fit-content;
  }
}

/* ----- ② 下からフェードイン -----
 * 対象: __sub / __qa-a / __cards-sub-text / __recruit-title-text / __recruit-card
 * 移動量を大きく（60px）、トリガーは JS 側の rootMargin で深めに発火。
 * keyframe 内で初期値を表現するので、CSS の transform 初期値は anim-txt-1 と
 * 同じ 20px のままだと一瞬ジャンプして見える → keyframe と揃えて 60px に。 */
.p-jb-job__sub,
.p-jb-job__qa-a,
.p-jb-job__cards-sub-text,
.p-jb-job__recruit-title-text,
.p-jb-job__recruit-card {
  opacity: 0;
  transform: translateY(60px);
  will-change: opacity, transform;
}
.p-jb-job__sub.is-revealed,
.p-jb-job__qa-a.is-revealed,
.p-jb-job__cards-sub-text.is-revealed,
.p-jb-job__recruit-title-text.is-revealed,
.p-jb-job__recruit-card.is-revealed {
  animation: jb-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-job__sub,
  .p-jb-job__qa-a,
  .p-jb-job__cards-sub-text,
  .p-jb-job__recruit-title-text,
  .p-jb-job__recruit-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* /jobs 用の下からフェードアップ：移動量 60px */
@keyframes jb-fade-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ----- ③ 帯が左→右に伸びて、文字がフェードイン -----
 * 対象: __badge / __qa-q（マゼンタ帯 + 中の白テキスト）
 * 親で clip-path を expand、子の text span は opacity でフェード。 */
.p-jb-job__badge,
.p-jb-job__qa-q {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.p-jb-job__badge.is-revealed,
.p-jb-job__qa-q.is-revealed {
  animation: jb-ribbon-expand 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-job__badge,
  .p-jb-job__qa-q {
    clip-path: none;
    animation: none;
  }
}

/* 中の白いテキストは、帯が伸び切ったあとにフェード */
.p-jb-job__badge-text,
.p-jb-job__qa-q-text {
  opacity: 0;
  will-change: opacity;
}

.p-jb-job__badge.is-revealed .p-jb-job__badge-text,
.p-jb-job__qa-q.is-revealed .p-jb-job__qa-q-text {
  animation: jb-ribbon-text 0.4s ease 0.55s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .p-jb-job__badge-text,
  .p-jb-job__qa-q-text {
    opacity: 1;
    animation: none;
  }
}
@keyframes jb-ribbon-expand {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes jb-ribbon-text {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ----- ④ scale 0 → 1.05 → 1 のポップ -----
 * 対象: __more-photo / __entry-btn */
.p-jb-job__more-photo,
.p-jb-job__entry-btn {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  will-change: opacity, transform;
}
.p-jb-job__more-photo.is-revealed,
.p-jb-job__entry-btn.is-revealed {
  animation: jb-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-jb-job__more-photo,
  .p-jb-job__entry-btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes jb-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* /jobs ページ専用 */
/* 力組採用特設サイト - スタイルエントリーポイント */
/* =====================================================================
 * /top2 ページ専用の上書きスタイル（沖縄バージョン）
 *
 * `page-top2.php` は TOP と HTML 構造を共有しているため、
 * page-template 単位で body クラスをセレクタにして局所的に上書きする。
 * (WordPress が body に `page-template-page-top2` を自動付与する)
 * ===================================================================== */
body.page-template-page-top2 .p-about::before, .page-template-page-vision2 .p-about::before {
  background-image: url(../images/top2/play-bg.png);
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* MV のメインコピー：Dela Gothic One + 黄色 + 黒縁取り */
}
body.page-template-page-top2 .p-mv__copy, .page-template-page-vision2 .p-mv__copy {
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #FDC01B;
  /* text-cutout を上書き（適用されていた場合に備えて） */
  background-image: none;
  -webkit-text-fill-color: #FDC01B;
  /* 2px の黒縁取り：text-stroke と多重 text-shadow の両方を当てて
   * Safari / Chrome / Firefox どれでも縁取りが描画されるようにする */
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
  paint-order: stroke fill;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 子要素の char も同じ塗り・縁取りに */
}
body.page-template-page-top2 .p-mv__char,
body.page-template-page-top2 .p-mv__en, .page-template-page-vision2 .p-mv__char,
.page-template-page-vision2 .p-mv__en {
  width: auto;
  color: #FDC01B;
  background-image: none;
  -webkit-text-fill-color: #FDC01B;
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
  paint-order: stroke fill;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ① 右上の「力組採用特設サイト」ラベル：黒背景 / 黄色文字 ===== */
}
body.page-template-page-top2 .p-mv__label, .page-template-page-vision2 .p-mv__label {
  background: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.page-template-page-top2 .p-mv__label-text, .page-template-page-vision2 .p-mv__label-text {
  color: #FDC01B;
  /* text-cutout を打ち消す */
  background-image: none;
  -webkit-text-fill-color: #FDC01B;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ② フォント変更：__decor で終わるクラス + .p-section-title + .p-intro__heading / __force + .p-message__title → Dela Gothic One (Regular) ===== */
}
body.page-template-page-top2 [class$=__decor],
body.page-template-page-top2 [class$=__decor] .p-section-title__char,
body.page-template-page-top2 .p-section-title,
body.page-template-page-top2 .p-section-title__sub,
body.page-template-page-top2 .p-section-title__main,
body.page-template-page-top2 .p-section-title__char,
body.page-template-page-top2 .p-intro__heading,
body.page-template-page-top2 .p-intro__force,
body.page-template-page-top2 .p-intro__force-kanji,
body.page-template-page-top2 .p-intro__force-kana,
body.page-template-page-top2 .p-intro__force-end,
body.page-template-page-top2 .p-message__title,
body.page-template-page-top2 .p-message__title-jp, .page-template-page-vision2 [class$=__decor],
.page-template-page-vision2 [class$=__decor] .p-section-title__char,
.page-template-page-vision2 .p-section-title,
.page-template-page-vision2 .p-section-title__sub,
.page-template-page-vision2 .p-section-title__main,
.page-template-page-vision2 .p-section-title__char,
.page-template-page-vision2 .p-intro__heading,
.page-template-page-vision2 .p-intro__force,
.page-template-page-vision2 .p-intro__force-kanji,
.page-template-page-vision2 .p-intro__force-kana,
.page-template-page-vision2 .p-intro__force-end,
.page-template-page-vision2 .p-message__title,
.page-template-page-vision2 .p-message__title-jp {
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400; /* Dela Gothic One は Regular のみのため明示的に 400 */
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ③ 文字の背景画像を /top2/txt-bg.png に差し替え =====
   * 元 `text-cutout('../images/top/txt-bg.png')` を /top2 では
   * `assets/images/top2/txt-bg.png` に差し替えるだけ。色合成は行わない。
   */
}
body.page-template-page-top2 .p-intro__heading,
body.page-template-page-top2 .p-intro__force-kanji,
body.page-template-page-top2 .p-intro__force-kana,
body.page-template-page-top2 .p-intro__force-end,
body.page-template-page-top2 .p-vision__decor,
body.page-template-page-top2 .p-interview__decor,
body.page-template-page-top2 .p-about__decor,
body.page-template-page-top2 .p-entry__copy,
body.page-template-page-top2 .p-entry__btn,
body.page-template-page-top2 .p-message__title-jp,
body.page-template-page-top2 .p-section-title__sub,
body.page-template-page-top2 .p-section-title__main,
body.page-template-page-top2 .p-section-title__char, .page-template-page-vision2 .p-intro__heading,
.page-template-page-vision2 .p-intro__force-kanji,
.page-template-page-vision2 .p-intro__force-kana,
.page-template-page-vision2 .p-intro__force-end,
.page-template-page-vision2 .p-vision__decor,
.page-template-page-vision2 .p-interview__decor,
.page-template-page-vision2 .p-about__decor,
.page-template-page-vision2 .p-entry__copy,
.page-template-page-vision2 .p-entry__btn,
.page-template-page-vision2 .p-message__title-jp,
.page-template-page-vision2 .p-section-title__sub,
.page-template-page-vision2 .p-section-title__main,
.page-template-page-vision2 .p-section-title__char {
  background-image: url("../images/top2/txt-bg.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-about__decor, .page-template-page-vision2 .p-about__decor {
    right: 45%;
    margin-top: 20px;
  }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ④ .p-message::before の背景画像を /top2/ に差し替え ===== */
}
body.page-template-page-top2 .p-message::before, .page-template-page-vision2 .p-message::before {
  background-image: url("../images/top2/hung-bg.png");
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑤ .p-message__cta img の重なり順を 2 に ===== */
}
body.page-template-page-top2 .p-message__cta, .page-template-page-vision2 .p-message__cta {
  z-index: 2;
}
body.page-template-page-top2 .p-message__cta img.hover, .page-template-page-vision2 .p-message__cta img.hover {
  position: absolute;
  opacity: 0;
}
body.page-template-page-top2 .p-message__cta img.default, .page-template-page-vision2 .p-message__cta img.default {
  position: relative;
  opacity: 1;
}
body.page-template-page-top2 .p-message__cta:hover img.default, .page-template-page-vision2 .p-message__cta:hover img.default {
  position: relative;
  opacity: 0 !important;
}
body.page-template-page-top2 .p-message__cta:hover img.hover, .page-template-page-vision2 .p-message__cta:hover img.hover {
  opacity: 1;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑤-2 .p-message__cta img の hover swap =====
   * _main.scss 側で「display 切替 → opacity 切替」に修正済み。
   *   - img.default: 常に表示、opacity でフェード
   *   - img.hover  : position:absolute で重ね、opacity 0 → 1 でフェード
   * /top2 でも同じ挙動を継承するため、ここでは特別な hover ルールを書かない。
   * （display:none を再導入すると .is-revealed の forwards 状態が解除され、
   *   ホバー解除後に画像が消える既知のバグが再発するので注意） */
  /* ===== ⑥ HTML を変更：「力」(.--right) は <h2> の外に出し .p-message__cta 直下に移動した =====
   * これにより画像 (.p-message__cta img / z-index:2) と直接の兄弟になり、
   * z-index で簡単に画像の前後を制御できるようになる。
   *
   * - 背負ゆん : <h2.p-message__title> の中（唯一の子）。h2 ごと画像の後ろに送る。
   * - 力       : .p-message__cta 直下の span。z-index で画像の前に出す。
   */
  /* h2 (背負ゆん) を画像の後ろへ。_main.scss の z-index:2 を 1 で上書き。 */
}
body.page-template-page-top2 .p-message__title, .page-template-page-vision2 .p-message__title {
  z-index: 1; /* 画像(2)より下 = 背面 */
  filter: none; /* drop-shadow は各 title-jp 側で個別に当てる（後述） */
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 共通：title-jp の見た目（影）を維持しつつ、配置・重なりは2つを別ルールで指定 */
}
body.page-template-page-top2 .p-message__title-jp, .page-template-page-vision2 .p-message__title-jp {
  position: absolute;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.45));
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 「背負ゆん」 = h2 の中。位置は _main.scss の top:20% / left:3% のまま。
   *  h2 自身が z-index:1 なので画像の後ろに行く。 */
}
body.page-template-page-top2 .p-message__title > .p-message__title-jp, .page-template-page-vision2 .p-message__title > .p-message__title-jp {
  /* z-index は h2 のコンテキスト内なので画像の前後は h2 側で決まる */
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 「力」 = .p-message__cta 直下。画像の右下へ + 前面に。
   * <h2> の外に出したことで、親 .p-message__title から継承されていた
   *   - font-size (PC 200 / nth-child(2)で 300)
   *   - transform: skewX(-8deg)
   *   - color / line-height / letter-spacing
   * が効かなくなるため、ここで明示的に当て直す。
   */
}
body.page-template-page-top2 .p-message__cta > .p-message__title-jp--right, .page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
  /* 配置 */
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  margin-left: 0;
  z-index: 3; /* 画像(2)より上 = 前面 */
  width: fit-content;
  text-align: right;
  /* 見た目（元 .p-message__title の継承分を直接付与） */
  transform: skewX(-8deg);
  color: rgba(255, 255, 255, 0.9);
  line-height: 0.9;
  letter-spacing: -0.023em;
  /* 文字サイズ（元 nth-child(2) の PC 300 / SP 140 を踏襲） */
  font-size: clamp(16px, 26.6666666667vw, 140px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-message__cta > .p-message__title-jp--right, .page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 7.2916666667vw, 140px);
  }
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-message__cta > .p-message__title-jp--right, .page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 37.3333333333vw, 300px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  body.page-template-page-top2 .p-message__cta > .p-message__title-jp--right, .page-template-page-vision2 .p-message__cta > .p-message__title-jp--right {
    font-size: clamp(16px, 15.625vw, 300px);
  }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑦ .p-vision__decor「信じゆん力」に黒1px縁取り =====
   * 背景画像（text-cutoutで空画像）はそのまま保持し、文字の輪郭にだけ 1px の黒線を追加。
   * paint-order や text-shadow は使わず、純粋に text-stroke のみ。
   * JS分割される前は __decor 自身に、分割後は子 __char に必要なので両方指定。
   */
}
body.page-template-page-top2 .p-vision__decor,
body.page-template-page-top2 .p-vision__decor .p-section-title__char, .page-template-page-vision2 .p-vision__decor,
.page-template-page-vision2 .p-vision__decor .p-section-title__char {
  -webkit-text-stroke: 1px #000000;
  text-stroke: 1px #000000;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑧ .p-intro の文字サイズと配置をFigmaデザインに合わせる =====
   * デザイン (PC 1920px基準)：
   *   - この会社や         : 60px
   *   - 力 (kanji)         : 400px  ← 巨大
   *   - ちから (kana ruby) : 50px
   *   - でちくらっとーん。  : 130px
   */
}
body.page-template-page-top2 .p-intro__heading, .page-template-page-vision2 .p-intro__heading {
  font-size: clamp(16px, 6.4vw, 60px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__heading, .page-template-page-vision2 .p-intro__heading {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
body.page-template-page-top2 .p-intro__force-kanji, .page-template-page-vision2 .p-intro__force-kanji {
  font-size: clamp(16px, 32.8vw, 400px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__force-kanji, .page-template-page-vision2 .p-intro__force-kanji {
    font-size: clamp(16px, 20.8333333333vw, 400px);
  }
}
body.page-template-page-top2 .p-intro__force-kanji, .page-template-page-vision2 .p-intro__force-kanji {
  /* PC 400 / SP 123 (Figma) */
  line-height: 1;
}
body.page-template-page-top2 .p-intro__force-kana, .page-template-page-vision2 .p-intro__force-kana {
  font-size: clamp(16px, 5.3333333333vw, 50px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__force-kana, .page-template-page-vision2 .p-intro__force-kana {
    font-size: clamp(16px, 2.6041666667vw, 50px);
  }
}
body.page-template-page-top2 .p-intro__force-kana, .page-template-page-vision2 .p-intro__force-kana {
  /* PC 50 / SP 20 (Figma) */
}
body.page-template-page-top2 .p-intro__force-end, .page-template-page-vision2 .p-intro__force-end {
  font-size: clamp(16px, 8vw, 130px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__force-end, .page-template-page-vision2 .p-intro__force-end {
    font-size: clamp(16px, 6.7708333333vw, 130px);
  }
}
body.page-template-page-top2 .p-intro__force-end, .page-template-page-vision2 .p-intro__force-end {
  /* PC 130 / SP 30 (Figma) */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__force, .page-template-page-vision2 .p-intro__force {
    bottom: min(0.6875vw, 30px);
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-intro__force, .page-template-page-vision2 .p-intro__force {
    bottom: min(-1.6875vw, -20px);
    margin-left: 20%;
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-intro__inner, .page-template-page-vision2 .p-intro__inner {
    min-height: unset;
    aspect-ratio: 4/3;
  }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑨ 周囲の薄い文字（floats）：背景画像 + 透過 ===== */
}
body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
  opacity: 0.5; /* 0.2 → 0.5 で見えやすく + 透過の効果 */
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(16px, 9.6vw, 60px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
  /* PC 60 / SP 36 (Figma SP 35.7) */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
    font-size: clamp(16px, 16vw, 171px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
    font-size: clamp(16px, 8.90625vw, 171px);
  }
}
body.page-template-page-top2 .p-intro__float, .page-template-page-vision2 .p-intro__float {
  /* /top2/txt-bg.png を文字内に切り抜き表示（text-cutoutと同じ仕組み） */
  background-image: url("../images/top2/txt-bg.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* floats の位置 ── PC (Figma 1920px基準、全体 200px 上に移動) */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-intro__float--01, .page-template-page-vision2 .p-intro__float--01 {
    top: -5.8854166667vw;
    left: min(42.9166666667vw, 824px);
  }
  body.page-template-page-top2 .p-intro__float--02, .page-template-page-vision2 .p-intro__float--02 {
    top: -7.96875vw;
    left: min(14.21875vw, 273px);
  }
  body.page-template-page-top2 .p-intro__float--03, .page-template-page-vision2 .p-intro__float--03 {
    top: min(19.4270833333vw, 373px);
    left: min(5.3645833333vw, 103px);
  }
  body.page-template-page-top2 .p-intro__float--04, .page-template-page-vision2 .p-intro__float--04 {
    top: -2.34375vw;
    left: min(65.5729166667vw, 1259px);
  }
  body.page-template-page-top2 .p-intro__float--05, .page-template-page-vision2 .p-intro__float--05 {
    top: min(6.1458333333vw, 118px);
    left: min(39.4270833333vw, 757px);
  }
  body.page-template-page-top2 .p-intro__float--06, .page-template-page-vision2 .p-intro__float--06 {
    top: min(31.1979166667vw, 599px);
    left: min(1.3020833333vw, 25px);
  }
  body.page-template-page-top2 .p-intro__float--07, .page-template-page-vision2 .p-intro__float--07 {
    top: min(15.5729166667vw, 299px);
    left: min(60.46875vw, 1161px);
  }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* floats の位置 ── SP (Figma 375px基準) */
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-intro__float--01, .page-template-page-vision2 .p-intro__float--01 {
    top: 3.7333333333vw;
    left: 46.6666666667vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 人ぬ */ }
  body.page-template-page-top2 .p-intro__float--02, .page-template-page-vision2 .p-intro__float--02 {
    top: 4.8vw;
    left: 69.8666666667vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 思ゆん */ }
  body.page-template-page-top2 .p-intro__float--03, .page-template-page-vision2 .p-intro__float--03 {
    top: 31.4666666667vw;
    left: 3.2vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 技ぬ */ }
  body.page-template-page-top2 .p-intro__float--04, .page-template-page-vision2 .p-intro__float--04 {
    top: 18.1333333333vw;
    left: 61.8666666667vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 始みゆん */ }
  body.page-template-page-top2 .p-intro__float--05, .page-template-page-vision2 .p-intro__float--05 {
    top: 23.2vw;
    left: 22.1333333333vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 変わゆん */ }
  body.page-template-page-top2 .p-intro__float--06, .page-template-page-vision2 .p-intro__float--06 {
    top: 43.2vw;
    left: 1.3333333333vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* ちくゆん */ }
  body.page-template-page-top2 .p-intro__float--07, .page-template-page-vision2 .p-intro__float--07 {
    top: 38.6666666667vw;
    left: 67.7333333333vw;
  }
  body.page-template-page-top2, .page-template-page-vision2 { /* 続きゆん */ }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 親セクションを overflow: visible にして上にはみ出した floats を見えるように */
}
body.page-template-page-top2 .p-intro, .page-template-page-vision2 .p-intro {
  overflow: visible;
}
body.page-template-page-top2 .p-intro__floats, .page-template-page-vision2 .p-intro__floats {
  overflow: visible;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑩ .p-section-title__main の文字サイズを大きく ===== */
}
body.page-template-page-top2 .p-section-title__main, .page-template-page-vision2 .p-section-title__main {
  font-size: clamp(16px, 6.6666666667vw, 50px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-section-title__main, .page-template-page-vision2 .p-section-title__main {
    font-size: clamp(16px, 2.6041666667vw, 50px);
  }
}
body.page-template-page-top2 .p-section-title__main, .page-template-page-vision2 .p-section-title__main {
  /* PC 56px / SP 32px (元: 30/24) */
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== ⑪ p-interview：新レイアウト + 背景色アニメ =====
   * - 旧 .c-btn ラッパは消えたのでここで全プロパティ上書き
   * - 旧 画像３ clip-path アニメは打ち消し（写真は最初から見える）
   * - 新アニメ：背景色だけ #000（黒）→ #fafaf8（色付き）でフェード
   *
   * PC: アスペクト比 16/8（1920×960風）。写真は中央左寄せ。
   *     タイトル/ボタンは右側に絶対配置。
   * SP: 縦並び（写真 → タイトル → ボタン）。背景は #fafaf8 で広く敷く。
   */
}
body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
  position: relative;
  overflow: visible;
  background-color: #000;
  transition: background-color 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* PC：横長カード */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
    aspect-ratio: 1920/960;
  }
}
body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
  /* SP：縦並びカード（写真 → タイトル → ボタン） */
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    padding: 10.6666666667vw 5.3333333333vw;
  }
}
body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
  /* 画面に入ったら 黒 → 色付き */
}
body.page-template-page-top2 .p-interview__item.is-revealed, .page-template-page-vision2 .p-interview__item.is-revealed {
  background-color: #fafaf8;
}
body.page-template-page-top2 .p-interview__item, .page-template-page-vision2 .p-interview__item {
  /* 既存の clip-path（画像３）アニメは打ち消し */
}
body.page-template-page-top2 .p-interview__item .p-interview__photo img, .page-template-page-vision2 .p-interview__item .p-interview__photo img {
  clip-path: none;
  animation: none;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 背景写真：PC は絶対配置（中央左寄せ） / SP は縦長ポートレート（中央寄せ・横余白あり） */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__photo, .page-template-page-vision2 .p-interview__photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 75%; /* デザイン 1440/1920 ≈ 75% */
    overflow: hidden;
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__photo, .page-template-page-vision2 .p-interview__photo {
    width: 75.4666666667vw; /* デザイン: 中央寄せの縦長フォト */
    height: 114.9333333333vw;
    overflow: hidden;
  }
}
body.page-template-page-top2 .p-interview__photo img, .page-template-page-vision2 .p-interview__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* ===== 人ぬ力 デコ：PC は元位置（cards上に絶対配置） / SP は2つの item の間に挿入 ===== */
  /* PC のみ表示：上に置かれた元のデコ要素 */
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__decor--top, .page-template-page-vision2 .p-interview__decor--top {
    display: none;
  }
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* SP のみ表示：list 内の <li> として item の間に挟む */
}
body.page-template-page-top2 .p-interview__divider, .page-template-page-vision2 .p-interview__divider {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__divider, .page-template-page-vision2 .p-interview__divider {
    display: none;
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__divider, .page-template-page-vision2 .p-interview__divider {
    display: block;
    padding: 10.6666666667vw 0;
  }
}
body.page-template-page-top2 .p-interview__divider .p-interview__decor, .page-template-page-vision2 .p-interview__divider .p-interview__decor {
  display: inline-block;
  margin: 0;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* タイトル「営業ぬ仕事 / 現場ぬ仕事」
   * Figma (1:759, 1920×960 カード基準):
   *   left: calc(50% + 109px)  → 1069px / 1920
   *   top:  calc(50% - 66.46px) → 413.54px / 960
   *   width: 752.17px / Dela Gothic 150px / skewX(-8deg)
   */
}
body.page-template-page-top2 .p-interview__title, .page-template-page-vision2 .p-interview__title {
  margin: 0;
  color: #FDC01B;
  font-family: "Dela Gothic One", "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.023em;
  transform: skewX(-8deg);
  pointer-events: none;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__title, .page-template-page-vision2 .p-interview__title {
    position: absolute;
    z-index: 2;
    left: calc(50% + 5.6770833333vw);
    top: calc(50% - 3.4614583333vw);
    font-size: clamp(16px, 21.3333333333vw, 150px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  body.page-template-page-top2 .p-interview__title, .page-template-page-vision2 .p-interview__title {
    font-size: clamp(16px, 7.8125vw, 150px);
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__title, .page-template-page-vision2 .p-interview__title {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: clamp(16px, 16vw, 72px);
  }
}
@media (max-width: 767.98px) and (min-width: 768px) {
  body.page-template-page-top2 .p-interview__title, .page-template-page-vision2 .p-interview__title {
    font-size: clamp(16px, 3.75vw, 72px);
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-mv__copy-flex, .page-template-page-vision2 .p-mv__copy-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__copy, .page-template-page-vision2 .p-mv__copy-flex .p-mv__copy {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__copy:last-child, .page-template-page-vision2 .p-mv__copy-flex .p-mv__copy:last-child {
    margin-left: 40px;
  }
}
body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--01, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--03, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--01, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--03 { /* 力 */ }
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--01, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--03, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--01, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--03 {
    font-size: clamp(16px, 40vw, 200px);
  }
}
@media (max-width: 767.98px) and (min-width: 768px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--01, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--03, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--01, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--03 {
    font-size: clamp(16px, 10.4166666667vw, 200px);
  }
}
body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--02, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--04, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--02, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--04 { /* は、*/ }
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--02, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--04, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--02, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--04 {
    font-size: clamp(16px, 24vw, 140px);
  }
}
@media (max-width: 767.98px) and (min-width: 768px) {
  body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--02, body.page-template-page-top2 .p-mv__copy-flex .p-mv__char--04, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--02, .page-template-page-vision2 .p-mv__copy-flex .p-mv__char--04 {
    font-size: clamp(16px, 7.2916666667vw, 140px);
  }
}
body.page-template-page-top2 .p-about__inner .p-section-title, .page-template-page-vision2 .p-about__inner .p-section-title {
  flex-direction: column;
  align-items: center;
}
body.page-template-page-top2 .p-vision__lead, .page-template-page-vision2 .p-vision__lead {
  background-color: transparent;
  background-image: url("../images/top2/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
}
body.page-template-page-top2, .page-template-page-vision2 {
  /* 「職種インタビューを見る」ボタン
   * 見た目は共通 .c-btn を継承。ここでは配置のみ上書きする。
   * Figma (1:759, 1920×960 カード基準, 内側余白 px-240):
   *   left: 240 + 937 = 1177px / 1920
   *   top:  563px / 960
   *
   * NOTE: _main.scss の `.p-interview__item > .c-btn` が旧マークアップ
   *       （c-btn=画像ラッパー）用に背景/余白/角丸/影/初期非表示を全て打ち消しているため、
   *       /top2 では c-btn 本来の見た目を復元する必要がある。
   */
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__inner .p-section-title, .page-template-page-vision2 .p-interview__inner .p-section-title {
    justify-content: center;
  }
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
  /* c-btn 本来のボックス */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3em;
  width: 100%;
  max-width: none;
  padding-block: 5.3333333333vw;
  border-radius: 60px;
  background-image: url("../images/common/botton-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-weight: 500;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: visible;
  font-size: clamp(16px, 4.8vw, 20px);
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
    font-size: clamp(16px, 1.0416666667vw, 20px);
  }
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
  /* c-btn のポップイン初期状態を復元（.is-revealed でアニメ） */
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  animation: none;
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn.is-revealed, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn.is-revealed {
  animation: anim-img-1 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn:hover, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25);
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn:hover .p-interview__photo img, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn:hover .p-interview__photo img {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
  /* PC: 上のタイトル「営業ぬ仕事」の2文字目「業」あたりから開始（item 基準 ≈ 975px）
   *      タイトル開始 829 + 1文字 ~146 ≈ 975 */
}
@media (min-width: 768px) {
  body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
    position: absolute;
    z-index: 2;
    left: 50.78125vw;
    top: 26.5625vw;
    width: min(23.0208333333vw, 442px);
    padding-block: min(1.0416666667vw, 20px);
  }
}
@media (max-width: 767.98px) {
  body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn {
    align-self: center;
  }
}
body.page-template-page-top2 .p-interview__item > .c-btn.p-interview__btn .p-interview__btn-text, .page-template-page-vision2 .p-interview__item > .c-btn.p-interview__btn .p-interview__btn-text {
  width: fit-content;
}
body.page-template-page-top2 .p-faq__inner .p-section-title__sub .p-section-title__char, .page-template-page-vision2 .p-faq__inner .p-section-title__sub .p-section-title__char {
  background-image: url("../images/common/txt-bg-2.png");
}

/* /top2 ページ専用の上書き */
/* 力組採用特設サイト - スタイルエントリーポイント */
.l-footer {
  position: relative;
  background: #000000;
  color: #ffffff;
  overflow: hidden;
  background-color: #fff;
}
.l-footer__inner {
  width: 100%;
  margin: 0 auto;
  padding: 16vw 6.4vw;
  background-size: cover;
  background-image: url(../images/common/footer-bg.png);
}
@media (min-width: 768px) {
  .l-footer__inner {
    padding: min(10.4166666667vw, 200px) min(12.5vw, 240px) min(10.4166666667vw, 200px);
  }
}
.l-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.3333333333vw;
}
@media (min-width: 768px) {
  .l-footer__brand {
    flex-direction: row;
    justify-content: center;
    gap: min(2.0833333333vw, 40px);
  }
}
.l-footer__logo {
  width: 74.6666666667vw;
  max-width: 100%;
}
@media (min-width: 768px) {
  .l-footer__logo {
    width: min(29.1666666667vw, 560px);
  }
}
.l-footer__brand-labels {
  display: flex;
  flex-direction: column;
  gap: 2.6666666667vw;
}
@media (min-width: 768px) {
  .l-footer__brand-labels {
    flex-direction: row;
    gap: min(0.8333333333vw, 16px);
  }
}
.l-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 3.2vw 5.3333333333vw;
  background: #ffffff;
  color: #000000;
  font-weight: 700;
  line-height: 1;
  font-size: clamp(16px, 4.2666666667vw, 18px);
}
@media (min-width: 768px) {
  .l-footer__badge {
    font-size: clamp(16px, 0.9375vw, 18px);
  }
}
@media (min-width: 768px) {
  .l-footer__badge {
    padding: min(0.7291666667vw, 14px) min(1.25vw, 24px);
  }
}
.l-footer__badge:hover {
  background: #f0f0f0;
  transition: 0.5s;
}
.l-footer__badge_bg {
  justify-content: center;
}
.l-footer__badge_bg span {
  background-color: transparent;
  background-image: url("../images/top/txt-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  text-align: center;
}
.l-footer__badge-icon {
  width: 1em;
  height: 1em;
}
.l-footer__nav {
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .l-footer__nav {
    margin-top: min(3.125vw, 60px);
  }
}
.l-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4.2666666667vw 2.1333333333vw;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
}
@media (min-width: 768px) {
  .l-footer__nav-list {
    gap: min(1.5625vw, 30px) min(1.0416666667vw, 20px);
  }
}
.l-footer__nav-list > li {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
}
.l-footer__nav-list {
  /* セパレータ：各項目の左右に縦バー（空画像で塗る） */
}
.l-footer__nav-list > li::before, .l-footer__nav-list > li:last-child::after {
  content: "";
  display: inline-block;
  align-self: center;
  width: 2px;
  height: 1.6em;
  margin-inline: 2.1333333333vw;
  background: url("../images/common/txt-bg-2.png") center/cover no-repeat;
}
@media (min-width: 768px) {
  .l-footer__nav-list > li::before, .l-footer__nav-list > li:last-child::after {
    margin-inline: min(0.8333333333vw, 16px);
    height: 2em;
  }
}
.l-footer__nav-list a {
  display: inline-flex;
  align-items: flex-end;
  transition: opacity 0.5s ease;
}
.l-footer__nav-list a:hover {
  opacity: 0.8;
}
.l-footer {
  /* 強調語（TOP / 5分 / 想い / 職種 / 新 / 社長 / 語る / エントリー） */
}
.l-footer__txt {
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: bottom left;
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 7.4666666667vw, 40px);
}
@media (min-width: 768px) {
  .l-footer__txt {
    font-size: clamp(16px, 2.0833333333vw, 40px);
  }
}
@media (min-width: 768px) {
  .l-footer__txt {
    font-size: clamp(16px, 9.6vw, 60px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-footer__txt {
    font-size: clamp(16px, 3.125vw, 60px);
  }
}
.l-footer {
  /* 補助語（で分かる力組 / 力組としての / インタビュー / 力組構想 / が） */
}
.l-footer__txt--sm {
  display: inline-block;
  margin-bottom: 0.12em; /* 大きい文字とのベースラインを合わせる微調整 */
  font-family: "Zen Kaku Gothic New", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.023em;
  background-color: transparent;
  background-image: url("../images/common/txt-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* イタリック・skew(X|Y)・縦書き・negative letter-spacing 等で
   * glyph ink が要素 box の右や下を超えてはみ出すと、その部分は
   * bg-image の描画範囲外になり background-clip:text のマスクと組合さって
   * 「右端／下端が透明＝切れて見える」現象が起きる。
   * 物理的な右／下にわずかな padding を確保して bg-image の塗布領域を
   * 拡張し、グリフの外側にも background が回り込むようにする。
   * 左／上には padding を付けないので、テキストの開始原点はずれない。 */
  padding-right: 0.18em;
  padding-bottom: 0.18em;
  font-size: clamp(16px, 4.2666666667vw, 22px);
}
@media (min-width: 768px) {
  .l-footer__txt--sm {
    font-size: clamp(16px, 1.1458333333vw, 22px);
  }
}
@media (min-width: 768px) {
  .l-footer__txt--sm {
    font-size: clamp(16px, 5.8666666667vw, 30px);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .l-footer__txt--sm {
    font-size: clamp(16px, 1.5625vw, 30px);
  }
}
.l-footer__copy {
  margin-top: 5.3333333333vw;
  margin-bottom: 5.3333333333vw;
  text-align: center;
  color: #000000;
  font-size: clamp(16px, 3.2vw, 14px);
}
@media (min-width: 768px) {
  .l-footer__copy {
    font-size: clamp(16px, 0.7291666667vw, 14px);
  }
}
@media (min-width: 768px) {
  .l-footer__copy {
    margin-top: min(1.5625vw, 30px);
    margin-bottom: min(1.5625vw, 30px);
  }
}