@charset "utf-8";
/* =========================================================================
   Layout system
   ・スマホ設計のまま最大幅480pxで中央固定（PC専用レイアウトは作らない）
   ・1セクション = 1画面(100dvh) / CSS Scroll Snap のみでスワイプ成立
   ・PC時の左右余白にだけ固定UI（左=ロゴ / 右=募集要項・エントリー）
   ========================================================================= */

/* 🔴 2026-09-19 ユーザー指摘「MERIT1〜3の右端に線」の原因調査で判明:
   html.scrollHeight(792) が html.clientHeight(740) より52px大きく、
   body には overflow:hidden があるが html 自身には無かったため、
   ルート要素側でページ全体がスクロール可能になり、その分の
   ネイティブスクロールバーが右端に薄い縦線として描画されていた。
   （.swipe-container 側は既に scrollbar-width:none 済みだが、
   これは別レイヤーのスクロールなので対象外だった。） */
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body {
  overflow-x: hidden;
  background: var(--base);
}

/* ---------- 中央のスマホカラム ---------- */
.swipe-container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  margin-top: var(--headerH);
  height: calc(100dvh - var(--headerH));

  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;         /* smooth は入れない（スナップ・IOと干渉する） */
  background: var(--base);
}
/* カラム内のスクロールバーは見た目のみ隠す（スクロール自体は生きている） */
.swipe-container { scrollbar-width: none; }
.swipe-container::-webkit-scrollbar { display: none; }

/* ---------- 1セクション = 1画面 ---------- */
.swipe-section {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--headerH));
  min-height: calc(100dvh - var(--headerH));
  scroll-snap-align: start;
  scroll-snap-stop: always;

  display: flex;
  flex-direction: column;
  /* safe center: 収まらない場合だけ中央寄せをやめ、上端(ヘッダー側)を切らせない */
  justify-content: safe center;
  /* 上下paddingは画面の高さに追随（優先順位1：まず余白から詰める） */
  padding: clamp(6px, 2.2dvh, 30px) var(--sidegap);
}

/* ---------- 縦リズム（高さ可変）----------
   1画面へ収めるとき、最初に効かせるのは余白。
   低い画面では詰まり、高い画面では元のDNA値（12/24/32）まで開く。 */
.mt-xs { margin-top: clamp(4px,  1.1dvh, 12px); }
.mt-sm { margin-top: clamp(5px,  1.6dvh, 17px); }
.mt-md { margin-top: clamp(7px,  2.2dvh, 24px); }
.mt-lg { margin-top: clamp(9px,  3.0dvh, 32px); }
/* 装飾のはみ出しだけ許容。中身は必ず1画面内で成立させる */
.swipe-section > * { flex: none; }

/* Contact だけは入力量に応じて縦に伸ばす（100dvhへ押し込まない） */
.swipe-section--auto {
  height: auto;
  min-height: calc(100dvh - var(--headerH));
  max-height: none;
  justify-content: flex-start;
  scroll-snap-stop: normal;      /* フォーム途中で強制停止させない */
  padding-block: var(--sp-40);
}

/* 背景の切り替えでセクションを区切る（DNA） */
.swipe-section--base  { background: var(--base); }
.swipe-section--base2 { background: var(--base2); }
.swipe-section--brand   { background: var(--brand); }

/* ---------- ヘッダー（中央カラムに追従して固定） ---------- */
.kb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;           /* left/right:0 + max-width + auto で中央に固定 */
  height: var(--headerH);
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* ロゴの左端を本文の左端ラインに揃える */
  padding-inline: var(--sidegap);
  background: var(--base);
}
.kb-header::after {              /* 手描きの下線 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line); opacity: .85;
}

.kb-logo { display: flex; flex-direction: column; justify-content: center; flex: none; }
.kb-logo_en {
  font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1;
  color: var(--ink);
}
.kb-logo_en i { font-style: normal; color: var(--accent); }
.kb-logo_ja {
  font-size: 8.5px; font-weight: 500; letter-spacing: .16em; line-height: 1;
  margin-top: 3px; color: var(--ink);
}

/* ヘッダー右の2ボタン — サイズは指定値で固定 */
.kb-header_cta { display: flex; align-items: center; gap: 8px; flex: none; }
.kb-header_cta .kb-btn {
  font-size: 13px;
  padding: 3px 8px;
  letter-spacing: .06em;
  line-height: 1.5;
  white-space: nowrap;
}
.kb-header_cta .kb-btn::after { width: .7em; height: .7em; }

/* ---------- PC時：左右の余白に固定UI ---------- */
/* 画面端〜中央カラムの「余白の中央」に置く。端基準では置かない。 */
.kb-gutter { display: none; }

@media (min-width: 768px) {
  body { background: var(--base2); }
  /* 中央カラムを面として立たせる（線は1px黒＝DNA） */
  .swipe-container,
  .kb-header {
    border-inline: 1px solid rgba(0,0,0,.35);
  }

  .kb-gutter {
    display: block;
    position: fixed;
    top: 50%;
    z-index: 90;
    /* 余白の中央 = 左:25vw-240/2 / 右:75vw+240/2 */
    transform: translate(-50%, -50%);
    /* 余白幅から左右40pxを確保した上で上限をかける */
    width: clamp(88px, calc((100vw - var(--wrap)) / 2 - 40px), 150px);
  }
  .kb-gutter--left  { left: calc(25% - (var(--wrap) / 4)); }
  .kb-gutter--right { left: calc(75% + (var(--wrap) / 4)); }

  /* 左：ロゴ（縦横比を保ったまま拡大） */
  .kb-gutter--left .kb-glogo { text-align: center; }
  .kb-gutter--left .kb-glogo_en {
    font-size: clamp(20px, calc((100vw - var(--wrap)) / 2 / 5.2), 30px);
    font-weight: 700; letter-spacing: .08em; line-height: 1.1; color: var(--ink);
  }
  .kb-gutter--left .kb-glogo_en i { font-style: normal; color: var(--accent); }
  .kb-gutter--left .kb-glogo_ja {
    margin-top: 8px;
    font-size: clamp(10px, calc((100vw - var(--wrap)) / 2 / 13), 13px);
    font-weight: 500; letter-spacing: .14em; line-height: 1.4; color: var(--ink);
  }
  .kb-gutter--left .kb-glogo_star {
    width: clamp(18px, calc((100vw - var(--wrap)) / 2 / 8), 26px);
    height: auto; aspect-ratio: 1; margin: 0 auto 10px;
    background: var(--brand); border: 0;
    clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }

  /* 右：募集要項 / エントリー の縦2ボタン */
  .kb-gutter--right { display: flex; flex-direction: column; gap: 14px; }
  .kb-gutter--right .kb-btn {
    --btnShadow: 3px;              /* 大きいボタンは影も比例して深く */
    --btnRadius: 6px;
    width: 100%;
    padding-block: 14px;           /* 高さは padding で自然に確保する */
    padding-inline: 10px;
    font-size: clamp(12px, calc((100vw - var(--wrap)) / 2 / 11), 14px);
    letter-spacing: .08em;
    line-height: 1.4;
  }
}

/* 余白が足りない幅では固定UIを出さない（中央カラムに重ねない） */
@media (max-width: 767.98px) {
  .kb-gutter { display: none !important; }
}

/* ---------- 募集要項 ----------
   🔴 2026-09-18 ユーザー指示で「内部スクロールをやめ、ページごとスクロール」へ変更。
   旧版はここで .kb-reqbox に overflow-y:auto を掛けて表組みの中だけを送っていた。
   現在は section 側に swipe-section--auto（height:auto / min-height:100dvh /
   scroll-snap-stop:normal）を付けてセクションごと縦に伸ばしている。
   ＝ エントリー(s12)と同じ方式。スナップは先頭に当たるだけで、
     スナップ領域がスナップポートより高い場合は途中で止まれる（仕様どおり）。
   JSでのスクロール制御は引き続き一切していない。 */
.kb-reqsec { justify-content: flex-start; }

/* ---------- PC左右余白のイラスト ---------- */
/* 幅は余白に合わせ、高さは auto。% の max-width で横潰れさせない。 */
.kb-gutter_il { margin: 0; display: grid; place-items: center; }
.kb-gutter_il img { width: min(100%, 132px); height: auto; max-width: none; }
.kb-gutter--left .kb-gutter_il { margin-top: clamp(14px, 3.4vh, 38px); }
.kb-gutter--right .kb-gutter_il { margin-bottom: clamp(10px, 2.4vh, 26px); }

/* ---------- 横スライド（現場風景）— 横方向のみ。縦スクロール領域は作らない ---------- */
.kb-slider {
  display: flex;
  gap: clamp(10px, 2.4vw, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: calc(6 * var(--u));
  scrollbar-width: none;
}
.kb-slider::-webkit-scrollbar { display: none; }
/* 🔴 li を固定幅にすると、幅の広いイラストが max-width:100% に当たって
   横だけ潰れる。幅は画像に追従させ、高さだけ揃える。 */
.kb-slider > li {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.kb-slider .kb-illust img {
  max-width: none;
  width: auto;
  /* 🔴 中身が小さいと中央寄せでも「浮いて」見える。
     31dvh/上限330px では上下に死に余白が 19.4〜22.5% も残っていた（実測）。
     54dvh/上限560px で 6.8〜10.4% に収まり、あふれは全ケース0。 */
  height: clamp(132px, 54dvh, 560px);
}

/* ---------- スクロールヒント ---------- */
.kb-scrollhint {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: .2em;
  color: var(--ink); opacity: .7;
}
.kb-scrollhint svg { width: calc(11 * var(--u)); height: calc(16 * var(--u)); }
/* 反転帯の上でも白は沈むので #333 のまま使う */
.swipe-section--brand .kb-scrollhint { color: var(--ink); opacity: .85; }
.swipe-section--brand .kb-scrollhint .kb-stroke { stroke: var(--ink); }

@keyframes kb-hint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.kb-scrollhint svg { animation: kb-hint 1.6s var(--easeOut) infinite; }
@media (prefers-reduced-motion: reduce) { .kb-scrollhint svg { animation: none; } }

/* ---------- 箇条書き（メリット2の「・」相当）----------
   汎用アイコンは使わず、ラベルと同じ星を小さく敷く。 */
.kb-bullets li { position: relative; padding-left: 1.45em; }
/* `.kb-p + .kb-p`(0,2,0) に勝つ必要があるので li にもクラスを足して特定度を上げる */
.kb-bullets li.kb-p + li.kb-p { margin-top: calc(3 * var(--u)); }
.kb-bullets li::before {
  content: ""; position: absolute; left: .15em; top: .66em;
  width: .62em; height: .62em; background: var(--accent);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* =========================================================================
   S00 縦型動画セクション（FVの手前）
   ・レイアウト高さは他セクションと同じに保ち、見た目だけヘッダー帯まで覆う
   ・本番動画は <source> の差し替えだけで済む
   ========================================================================= */
.kb-video {
  position: relative;
  /* top で視覚的に上へ寄せ、margin-bottom でレイアウト高さを他と揃える */
  top: calc(-1 * var(--headerH));
  height: 100dvh;
  min-height: 100dvh;
  margin-bottom: calc(-1 * var(--headerH));
  padding: 0;
  background: #17120c;
  overflow: hidden;
}
.kb-video_media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* 9:16 を崩さずに画面いっぱい */
  object-position: center;
  display: block;
}
/* スワイプ誘導：控えめに上下へ */
.kb-video_hint {
  position: absolute; z-index: 2;
  left: 50%; translate: -50% 0;
  bottom: clamp(26px, 5dvh, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff;
  font-size: clamp(9px, 1.3dvh, 12px);
  font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
  pointer-events: none;
}
.kb-video_hint svg {
  width: clamp(12px, 1.8dvh, 17px); height: auto;
  fill: none; stroke: #fff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
  animation: kb-videohint 1.9s var(--easeOut) infinite;
}
@keyframes kb-videohint {
  0%, 100% { transform: translateY(0);   opacity: .85; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .kb-video_hint svg { animation: none; } }

/* 動画セクション表示中だけヘッダーを隠す */
.kb-header {
  transition: opacity .28s var(--easeOut), transform .28s var(--easeOut);
}
html.is-video .kb-header {
  opacity: 0;
  transform: translateY(calc(-1 * var(--headerH)));
  pointer-events: none;
}