/* =====================================================
   Phase 2 追加調整 CSS  (2026-08-22)
   - 案③ 社員インタビュー セクション新規
   - 案⑤ WORK STORIES カルーセル 1点大表示の微調整
   数値は Figma「260821_デザイン修正 / 01_PCtop_A」1440px基準を vw 換算
   ===================================================== */

/* ============ 案③ 社員インタビュー ============ */
/* Figma「260821_デザイン修正 / 01_PCtop_A」1440px基準を vw 換算
   背景文字・斜め帯・装飾ラインは既存サイトの流儀に合わせて SVG画像で配置 */
section#interview {
  position: relative;
  margin-top: 5vw;                /* 動画セクションとの間に余白 */
  padding: 5vw 0 7vw;
  /* 背景は既存 #strengths と同じ方眼（.paper-graph 相当）を敷く */
  background-color: var(--g_bg);
  background-image:
    linear-gradient(to bottom, var(--g_bold) 1px, transparent 1px),
    linear-gradient(to right,  var(--g_bold) 1px, transparent 1px),
    linear-gradient(to bottom, var(--g_line) 1px, transparent 1px),
    linear-gradient(to right,  var(--g_line) 1px, transparent 1px);
  background-size: var(--g_grid) var(--g_grid), var(--g_grid) var(--g_grid);
}

/* --- オレンジの帯（Figma: Rectangle 4564 1320×499 / #EA5520） --- */
section#interview .interview-head {
  position: relative;
  width: 91.67vw;                 /* 1320/1440 */
  margin: 0 0 0 8.33vw;           /* Figma: 帯は x=120 起点で右端(1440)まで。中央寄せではない */
  background: #EA5520;
  border-radius: 0 0 8px 8px;     /* Figma: cornerRadii [0,0,8,8] */
  padding: 3.61vw 0 0;            /* Figma: ラベル上端が帯の上端+52px */
  box-sizing: border-box;
  /* overflow は hidden にしない。Figmaでは写真が帯の左(-120px)と下(+54px)を
     突き抜ける設計で、切ると「左に突き抜けていない」見え方になる */
  overflow: visible;
  /* ただし overflow:visible だと最後の子の負 margin-bottom が親の外へ相殺で漏れ、
     帯の高さが縮まない。flow-root で BFC を作って高さに反映させる（クリップはしない） */
  display: flow-root;
}

/* 背景の英字（既存 #work の span.text-img と同じ方式：SVG画像） */
section#interview .interview-text-img {
  position: absolute;
  top: 1vw;
  right: 0;
  width: 53.5vw;                  /* 771/1440 */
  display: block;
  z-index: 0;
  pointer-events: none;
}
section#interview .interview-text-img img {
  display: block;
  width: 100%;
  height: auto;
}

section#interview .interview-head .label {
  position: relative;
  z-index: 1;
  display: block;
  width: 10.4vw;                  /* 150/1440 */
  margin: 0 0 1.67vw 6.6vw;       /* Figma: h2 は帯の上端+92px（ラベルの24px下） */
}

section#interview h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 2.29vw 6.6vw;       /* Figma: 写真は帯の上端+185px（h2の33px下） */
  font-size: 2.78vw;              /* 40/1440 */
  font-weight: 700;
  color: #fff;
  line-height: 1.5;               /* Figma: h2 の高さ60px = 40×1.5 */
}

/* --- 人物ブロック：写真は帯の左端を突き抜けて画面左端まで --- */
section#interview .interview-person {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 43.19vw 1fr;   /* 帯の中に見える写真幅 622/1440 */
  align-items: start;             /* Figma: プロフィールは写真の上端から156px下 */
  gap: 0;                              /* Figma: meta は写真右端 x=742 に接する */
  padding-bottom: 0;
  margin-bottom: -3.75vw;              /* 54/1440 写真が帯の下端を突き抜ける分 */
}

section#interview .interview-person figure {
  margin: 0 0 0 -8.33vw;          /* 帯の左端(120px)ぶん外へ出す＝画面左端に接する */
  width: 51.53vw;                 /* 742/1440 */
  line-height: 0;
}

section#interview .interview-person img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;                    /* 右の斜めカットは画像に焼き込み済み */
}

section#interview .interview-person .meta {
  color: #fff;
  margin-top: 10.83vw;            /* Figma: job は帯の上端+341（写真上端+185 の156px下） */
}
section#interview .interview-person .job {
  font-size: 1.67vw; font-weight: 700; margin: 0; line-height: 1.5;   /* Figma: 24px・高さ36 */
}
section#interview .interview-person .name {
  font-size: 2.78vw; font-weight: 700; margin: 0 0 0.07vw; line-height: 1.5;  /* Figma: 40px・高さ60 */
}
section#interview .interview-person .name span {
  font-size: 1.67vw; margin-left: 0.5vw;
}
section#interview .interview-person .desc {
  font-size: 1.25vw; font-weight: 700; margin: 0; line-height: 1.5;   /* Figma: 18px・高さ27 */
}

/* --- Q&A（Figma: Rectangle 4562 840×59・左右が斜めにカットされた平行四辺形） --- */
section#interview .qa {
  position: relative;
  width: 58.33vw;                 /* 840/1440 */
  /* Figma: Q&Aの黒帯は y=4508、帯の上端(3917)+591。帯の高さが499なので
     帯の下端から 92px。写真が 54px 突き抜けている分を含めてこの値になる */
  margin: 6.39vw auto 0;
}

section#interview .qa dl { margin: 0 0 4vw; }
section#interview .qa dl:last-of-type { margin-bottom: 0; }

section#interview .qa dt {
  display: flex;
  align-items: center;
  gap: 0 0.8vw;
  background: #0C0C0C;
  color: #fff;
  padding: 0.7vw 2.9vw;
  font-size: 1.67vw;
  font-weight: 700;
  box-sizing: border-box;
  /* 斜め処理：Figma実測 29.87px/高さ59px ＝ 約26.9° */
  clip-path: polygon(2.075vw 0, 100% 0, calc(100% - 2.075vw) 100%, 0 100%);
}

section#interview .qa dt .mark {
  font-size: 2.78vw; font-weight: 700; line-height: 1;
}

section#interview .qa dd { margin: 1.2vw 0 0; padding: 0 2.9vw; }

section#interview .qa dd .a-head {
  display: flex; align-items: baseline; gap: 0 0.8vw;
  color: #EA5520; font-size: 1.67vw; font-weight: 700; margin: 0 0 0.6vw;
}
section#interview .qa dd .a-head .mark { font-size: 2.78vw; line-height: 1; }

section#interview .qa dd p:not(.a-head) {
  margin: 0;
  /* A見出しは [A.][テキスト] の flex。本文の左端をオレンジ文字の位置に合わせる */
  padding-left: 3.4vw;            /* A.マーク(2.78vw) + gap(0.8vw) 相当 */
  font-size: 1.11vw; font-weight: 700; line-height: 1.9; color: #0C0C0C;
}

/* --- 左下の装飾ライン（既存サイトのライン画像と同じ扱い・SVG3枚を重ねる） --- */
section#interview .interview-deco {
  position: absolute;
  left: -21vw;
  top: 12.4vw;
  width: 21vw;                    /* 大きすぎたため縮小（旧29.2vw） */
  display: block;
  z-index: -1;
  pointer-events: none;
}
section#interview .interview-deco img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
}
section#interview .interview-deco img:nth-child(1) { left: 0;      top: 0;    width: 100%;   }  /* 210×210 #EF7954 */
section#interview .interview-deco img:nth-child(2) { left: 1.94vw; top: 3.4vw; width: 94.5%; }  /* 198×198 #EA5520 */
section#interview .interview-deco img:nth-child(3) { left: -1.18vw; top: 5.35vw; width: 94.5%; } /* 198×198 #EA5520 */

/* ---------- SP ---------- */
@media (max-width: 767px) {
  section#interview { padding-bottom: 14vw; }

  /* Figma 02_SPtop: 帯は x=-1 / 391×361 ＝ 実質「画面幅いっぱい」。
     PC の margin-left:8.33vw がSPにも効いていて x=21 にずれていたので打ち消す */
  section#interview .interview-head {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    border-radius: 0;
    padding-top: 15.38vw;              /* Figma: ラベル上端が帯の上端+60px */
  }
  section#interview .interview-text-img {
    width: 87.44vw;                    /* Figma: 341/390 */
    left: 10.77vw;                     /* Figma: x=42 */
    right: auto;
    top: 1.03vw;                       /* Figma: 帯の上端+4px */
  }
  section#interview .interview-head .label {
    width: 33.59vw;                    /* Figma: 131/390 */
    margin: 0 0 3.08vw 4.87vw;         /* Figma: x=19 / h2 は帯の上端+86px */
  }
  section#interview h2 {
    font-size: 6.67vw;                 /* Figma: 26px */
    line-height: 1.5;                  /* Figma: h2 の高さ39px = 26×1.5 */
    margin: 0 0 4.1vw 4.87vw;          /* Figma: x=19 / プロフィールは帯の上端+141px */
  }

  section#interview .interview-person {
    grid-template-columns: 1fr;
    gap: 4vw 0;
    padding-bottom: 0;
    margin-bottom: -19.23vw;           /* 75/390 写真が帯の下端を突き抜ける分 */
  }
  /* Figma 02_SPtop: SPは「プロフィール → 写真」の順（PCは横並びで写真が左）。
     写真は x=-1 / 370×184 で、帯(y4492〜4853)の下端を 75px 突き抜ける */
  section#interview .interview-person .meta   { order: 1; }
  section#interview .interview-person figure  {
    order: 2;
    margin-left: -0.26vw;            /* Figma: x=-1 */
    width: 94.87vw;                  /* 370/390 */
  }
  section#interview .interview-person img { border-radius: 0; }
  section#interview .interview-person .meta { padding: 0 4.87vw; margin-top: 0; }  /* Figma: x=19 */
  section#interview .interview-person .job { font-size: 4.62vw; line-height: 1.5; margin: 0 0 0.26vw; }   /* Figma: 18px */
  section#interview .interview-person .name { font-size: 7.18vw; line-height: 1.5; margin: 0 0 0.26vw; }  /* Figma: 28px */
  section#interview .interview-person .name span { font-size: 4.62vw; }                                   /* Figma: 18px */
  section#interview .interview-person .desc { font-size: 4.1vw; line-height: 1.5; }                        /* Figma: 16px */

  /* Figma 02_SPtop: Q&Aの黒帯（Rectangle 4563）は x=-108・478×35 で
     画面左へ108px突き抜ける。テキストは Q./A. が x=19、質問文・回答が x=45。
     2問目（Group 204）も同じ x=-108・478×35。
     → .qa 自体を画面幅いっぱいにして、dt（黒帯）だけ左へ出す */
  section#interview .qa {
    width: 100vw;
    position: relative;
    left: 50%;
    margin: 8vw 0 0 -50vw;
  }
  section#interview .qa dl { margin-bottom: 10.26vw; }   /* Figma: 本文下端から次の黒帯まで40px */
  section#interview .qa dt {
    align-items: center;
    width: 122.56vw;                   /* Figma: 478/390 */
    margin-left: -27.69vw;             /* Figma: x=-108 */
    box-sizing: border-box;
    padding: 1.41vw 0 1.41vw 32.56vw;  /* Q. を x=19 に（dt左端から127px）・高さ35px */
    gap: 0 0.77vw;                     /* Figma: 質問文 x=45。Q.マークの実描画幅が23px（Figma19px）なので詰める */
    font-size: 4.1vw;                  /* Figma: 16px */
    line-height: 1.5;
    /* 斜めはPCと同角度（29.87/59）を高さ35pxに換算 ＝ 17.7px */
    clip-path: polygon(4.54vw 0, 100% 0, calc(100% - 4.54vw) 100%, 0 100%);
  }
  section#interview .qa dt .mark { font-size: 6.15vw; line-height: 1; }  /* Figma: 24px */
  section#interview .qa dd {
    padding: 0 5.13vw 0 4.87vw;        /* Figma: A. が x=19、本文の右端 370 */
    margin-top: 1.28vw;                /* Figma: A. は黒帯の下端+5px */
  }
  section#interview .qa dd .a-head { font-size: 4.1vw; gap: 0 0.77vw; }  /* Figma: 16px・回答 x=45 */
  section#interview .qa dd .a-head .mark { font-size: 6.15vw; }          /* Figma: 24px */
  section#interview .qa dd p:not(.a-head) {
    font-size: 3.59vw;                 /* Figma: 14px */
    line-height: 1.8;
    padding-left: 6.67vw;              /* Figma: 本文 x=45（dd左端+26px） */
    margin-top: 2.05vw;
  }

  /* Figma 02_SPtop にはインタビューの装飾（3枚組の四角）が存在しない。
     PCのみの演出なのでSPでは出さない */
  section#interview .interview-deco { display: none; }
}

/* ============ 案⑤ カルーセル 1点大表示の微調整 ============ */
/* 中央以外のスライドを少し落ち着かせる（中央を主役に見せる） */
section#behind .yt-behind.slick-slider .slick-slide {
  transition: opacity .35s ease;
}
section#behind .yt-behind.slick-slider .slick-slide:not(.slick-center) {
  opacity: .55;
}

/* ============ FV下 導入コピー（Figma y=892 / 未経験から 一生モノの技術を） ============ */
/* 黒帯＋白文字は既存の .reveal-text（main.js のIntersectionObserverで発火）をそのまま使う */
section#intro-lead {
  position: relative;
  z-index: 1;                     /* 後続の .work-panel(absolute) より前面に */
  /* 次の #work は .work-panel が top:-18vw でせり出す設計のため、
     その分＋Figmaの余白(96px≒6.7vw)を padding-bottom で確保しないと本文が隠れる */
  padding: 5vw 0 24.6vw;
}

section#intro-lead .lead-inner {
  display: grid;
  /* Figma: タイトルの黒帯 x=201〜601（400px）、本文 x=661 ＝ 間隔60px。
     実装は列455px+gap65pxで本文が x=725 と64px右にずれ、本文の折返しも1行ぶん増えていた */
  grid-template-columns: 27.78vw 1fr;  /* 黒帯の幅 400/1440 */
  gap: 0 3.89vw;                       /* Figma: 黒帯の右端601 → 本文661 ＝ 56px */
  align-items: start;
}

section#intro-lead .lead-copy .text-wrap { line-height: 0; }

/* Figma: 48px/700 → 3.33vw（既存 .reveal-text の 3.43vw をこのセクションだけ合わせる） */
section#intro-lead .lead-copy .reveal-text {
  font-size: 3.33vw;
  padding: 0 1.1vw;               /* 既定0.5vwだと帯の右端で文字が切れるため広げる */
  overflow: visible;              /* .reveal-text の overflow:hidden が字形を欠けさせるのを回避 */
}

section#intro-lead .lead-body p {
  margin: 0;
  font-size: 1.25vw;                   /* 18/1440 */
  font-weight: 700;
  line-height: 2.5;                    /* Figma: lineHeight 45px = 18×2.5（実装は37.8pxだった） */
  color: #0C0C0C;
}

@media (max-width: 767px) {
  section#intro-lead { padding: 10vw 0 22vw; }  /* SPは .work-panel が top:-10vw */
  section#intro-lead .lead-inner {
    grid-template-columns: 1fr;
    gap: 6vw 0;
  }
  section#intro-lead .lead-copy .reveal-text { font-size: 7vw; }
  section#intro-lead .lead-body p { font-size: 3.5vw; line-height: 1.9; }
  /* Figma 02_SPtop は本文が改行されている（16px / 行間32px / 幅350）ので改行を活かす */
  section#intro-lead .lead-body br { display: inline; }
}

/* ============ 2026-08-22 フィードバック反映（その他） ============ */

/* ⑤ 「防水とは？」の見出しは 2026-08-28 Azu指示により復活
   section#about-waterproof > .section-inner > h2,
   section#about-waterproof h2 {
     display: none;
   } */

/* ⑥ 「東西アスの強み」の方眼をもう少し濃く
   既定 --g_line/--g_bold は rgba(0,0,0,.03)。このセクションだけ上書きする */
section#strengths.paper-graph {
  --g_line: rgba(0, 0, 0, .07);
  --g_bold: rgba(0, 0, 0, .10);
}
/* インタビューの方眼は控えめに（本文の可読性を優先） */
section#interview {
  --g_line: rgba(0, 0, 0, .05);
  --g_bold: rgba(0, 0, 0, .07);
}

/* ③ WORK STORIES カルーセル：1900px以上で中央カードが伸びすぎるのを抑える
   centerPadding が vw 指定のため、広い画面ほど左右の見切れが過大になる */
@media (min-width: 1900px) {
  section#behind .yt-behind.slick-slider .slick-list {
    width: 1370px;                /* 71.3vw を 1920px 相当で固定 */
    margin: 0 auto;
  }
  section#behind .yt-behind.slick-slider .slick-dots {
    width: 1370px;
  }
}

/* ============ 案② ヘッダー（Figma 260821 / 01_PCtop_A 準拠） ============
   Figma実測: 白帯 Frame627639 = x20,y20,1096×58,#FFFFFF,角丸6
              黄ボタン Frame627640 = x1239,y20,181×58,#FFEB00,角丸6
              ナビ 14px/700 #0C0C0C・項目間 18px
   → 全幅バーではなく「白帯」と「黄ボタン」が独立して浮くフローティング型に変更 */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;                    /* Figma: 上下左右 20px */
  background-color: transparent;
}

/* 白い帯（ロゴ＋ナビ）
   .header-inner には .wrap（width:var(--wrap); margin-inline:auto）が付いており
   そのままだと中央寄せ＋幅制限がかかるので打ち消す */
.site-header .header-inner {
  flex: 1 1 auto;
  width: auto;
  margin-inline: 0;
  max-width: 1096px;
  height: 58px;
  background: #fff;
  border-radius: 6px;
  padding: 0 24px;
  box-sizing: border-box;
  gap: 0;
  justify-content: space-between;
}

/* スクロール時も白帯を維持（全幅を白くしない） */
.site-header.scrollUp {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header.scrollUp .header-inner {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.site-header .logo { width: 280px; }
.site-header .logo img { width: auto; height: 30px; }

/* ナビ本体は #gnav（IDセレクタ）で既存指定があるので同じ詳細度で上書きする */
.site-header #gnav {
  display: flex;
  align-items: center;
  gap: 18px;                        /* Figma: 項目間18px（既存は5px） */
  flex: 0 0 auto;                   /* 伸ばさない（既存は伸びてロゴの隣に張り付いていた） */
  margin-left: auto;                /* 右寄せ＝Figma: ロゴ右端304 → ナビ344 で40px空く */
  margin-right: 0;                  /* Figma: ナビ右端は帯の内側右端(1092)にぴったり */
}
.site-header #gnav a {
  height: auto;                     /* 既存の height:80px を帯(58px)に収める */
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0C0C0C;
  white-space: nowrap;
  line-height: 1;
  border: 0;
  /* Figmaのナビ幅728pxに対しブラウザの日本語レンダリングは766pxになるため詰める */
  letter-spacing: -0.055em;
}

/* 黄色ボタン（帯の外に独立）。文言は Figma 準拠で「採用情報」、
   機能は既存のまま（js-open-regions で求人一覧＝地域選択を開く） */
.site-header .cta-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
.site-header .cta {
  flex: 0 0 auto;
  width: 181px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFEB00;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #F33708;                 /* 矢印(header-arrow.svg)と同色 */
  box-sizing: border-box;
}

/* 1200px以下：ナビが詰まるので文字と間隔を少し縮める */
@media (max-width: 1200px) {
  .site-header .header-inner { height: 52px; padding: 0 16px; }
  .site-header .logo { width: 220px; }
  .site-header #gnav { gap: 12px; }
  .site-header #gnav a { font-size: 12px; }
  .site-header .cta { width: 150px; height: 52px; font-size: 16px; }
  .site-header .cta-arrow { width: 14px; height: 14px; }
}

/* SP：ナビは非表示（ハンバーガー） */
@media (max-width: 767px) {
  .site-header { padding: 10px; gap: 10px; }
  .site-header .header-inner { height: 46px; padding: 0 12px; }
  .site-header .logo { width: 160px; }
  .site-header .logo img { height: 22px; }
  .site-header .cta { width: 104px; height: 46px; font-size: 13px; gap: 4px; }
  .site-header .cta-arrow { width: 11px; height: 11px; }
}

/* ============ 装飾の調整（2026-08-22 フィードバック ②⑤） ============
   計測: .slider-wrap::before(右 y6569) / .slider-wrap::after(左 y6641)
         .merit_area::before(右 y6496) / .merit_area::after(左 y7612)
   Figma: 左 y6738 の1セット ／ 右 y8681 の1セット
   → 左は .slider-wrap::after(6641≒Figma6738) を残し .merit_area::after は余分
   → 右の .merit_area::before は top:-51vw で上に飛び出しすぎ */

/* ② 右側の装飾を下へ（top:-51vw → セクション下部へ） */
section#about-waterproof .merit_area::before {
  top: auto;
  bottom: -8vw;
}

/* ⑤ 左側の装飾が一つ多い → Figmaに無い .merit_area::after を非表示 */
section#about-waterproof .merit_area::after {
  display: none;
}

@media (max-width: 767px) {
  section#about-waterproof .merit_area::before { bottom: -14vw; }
}

/* ============ 案④ 職種セクション（Figma「←このレイアウトで決定」） ============
   Figma実測: 上段=大カード560×400 ×2（x=0 画面左端／x=584）＝工事管理・防水技能員
              下段=小カード520×190 ×2（x=376／x=920）＝営業・事務経理
              カード間 gap 24px ／ 職種名32px ／ 説明16px
   HTML側でカード順を 工事管理→防水技能員→営業→事務経理 に変更済み。
   背景画像は nth-child 依存なので、順序変更に合わせて割り当て直す。 */

/* 背景画像の再割り当て（順序変更に追従） */
section#work .job-box.stagger.top span.wrap:nth-child(1) { background-image: url(../img/work3.webp); }  /* 工事管理 */
section#work .job-box.stagger.top span.wrap:nth-child(2) { background-image: url(../img/work4.webp); }  /* 防水技能員 */
section#work .job-box.stagger.bottom span.wrap:nth-child(1) { background-image: url(../img/work2.webp); } /* 営業 */
section#work .job-box.stagger.bottom span.wrap:nth-child(2) { background-image: url(../img/work5.webp); } /* 事務・経理 */

/* 上段：画面左端から 1144px 幅（大カード560×2＋gap24） */
section#work .job-box.stagger.top {
  width: 79.44vw;
  gap: 1.67vw;
  /* Figma: JOB CATEGORIES の下端1576 → カード上端1611 ＝ 35px 空く。
     実装は英字にカードが45px重なっていたので 80px 下げる */
  margin-top: 5.56vw;
  margin-bottom: 2.43vw;            /* Figma: 上段下端2011 → 下段上端2046 ＝35px */
}
section#work .job-box.stagger.top span.wrap {
  min-height: 27.78vw;              /* 400/1440 */
}

/* 下段：x=376 から右端まで（小カード520×2＋gap24） */
section#work .job-box.stagger.bottom {
  /* 親 .work-panel が x=7vw / padding-left 7vw のため、その分を差し引く
     目標 x=376px = 26.11vw → margin-left = 26.11 - 7 - 7 = 12.1vw */
  width: 73.89vw;
  margin-left: 12.1vw;
  margin-right: calc(50% - 50vw);
  gap: 1.67vw;
}
/* 下段は小カード（520×190）。既存の .job padding(108/115/79px) では高さが389pxになるため詰める
   Figma: テキスト枠368×140 → 上下30px・左右31px相当 */
/* 既存 `#work .job-box.stagger span.wrap .job`(詳細度141) に勝つため span.wrap を含める(151) */
@media (min-width: 768px) {
  section#work .job-box.stagger.bottom span.wrap .job {
    /* Figma: カード520×190 / テキスト枠368×140（左31px・上30px）
       右は 520-31-368 = 121px 空ける */
    padding: 1.39vw 8.4vw 1.39vw 2.15vw;
  }
}
/* 説明文の下マージンは末尾要素なので不要（カード高が22px膨らむ） */
section#work .job-box.stagger.bottom span.wrap .job p {
  margin-bottom: 0;
}
section#work .job-box.stagger.bottom span.wrap {
  min-height: 13.19vw;              /* 190/1440 */
}

/* カード内テキスト（Figma: 職種名32px／説明16px） */
section#work .job label { font-size: 2.22vw; }
section#work .job p { font-size: 1.11vw; }

@media (max-width: 767px) {
  /* SPは1カラムに積む（4カラムは段落ちしてラベルが読めなくなるため） */
  section#work .job-box.stagger.top,
  section#work .job-box.stagger.bottom {
    width: 92vw;
    margin-left: auto;
    margin-right: auto;
    gap: 4vw;
  }
  /* PC用に足した margin-top:5.56vw がSPにも効いてカードが21px下がっていたので戻す
     （SPは padding-top:35vw で別途あけてある） */
  section#work .job-box.stagger.top { margin-top: 0; }
  section#work .job-box.stagger.top span.wrap,
  section#work .job-box.stagger.bottom span.wrap {
    min-height: 0;
    flex: 1 1 100%;
  }
  section#work .job label { font-size: 5.4vw; }
  section#work .job p { font-size: 3.5vw; }
}

/* ============================================================
   案② キービジュアル（Figma 260821: 1枚画像・アニメーションなし）
   PC 1440x877 / SP 390x772 の書き出し画像をそのまま敷く。
   旧構成（背景+人物2+コピー画像の5レイヤー＋.offアニメ）は廃止。
   ============================================================ */
section#hero .hero-kv {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;      /* style.css の .hero-visual 用 cover を無効化 */
}

@media (max-width: 767px) {
  /* phase1 で背景imgを消していた頃の高さ担保。SP専用画像が高さを作るので不要 */
  section#hero {
    min-height: 0;
  }
}

/* ---- SP ヘッダー（Figma 02_SPtop 準拠） ----------------------------------
   Figma実測: ヘッダーは「浮く白帯」ではなく画面全幅・高さ46pxの帯。
   ロゴ x18/155×17 ／ ハンバーガー x251/46×46(#0D0D0D) ／ 黄ボタン x297/93×46。
   さらに sp-top_img は y=46 ＝ KVはヘッダーに重ならず、その下から始まる
   （PCは KV y=0 でヘッダーが重なる設計なので、SPだけ挙動が違う）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header {
    padding: 0;
    gap: 0;
    background: #fff;             /* 全幅の白帯そのものになる */
    align-items: stretch;
  }

  .site-header .header-inner {
    height: 46px;
    max-width: none;              /* PC用の 1096px 上限を解除 */
    padding: 0 0 0 18px;          /* Figma: ロゴ左端 x=18 */
    background: transparent;      /* 親(.site-header)が白なので帯は不要 */
    border-radius: 0;
    box-shadow: none;
  }

  /* スクロール時の影は帯全体に付ける（PCは白帯だけに付ける挙動） */
  .site-header.scrollUp {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  }
  .site-header.scrollUp .header-inner { box-shadow: none; }

  .site-header .logo { width: auto; }
  .site-header .logo img { width: 155px; height: auto; }  /* Figma: 155×17（SVG実寸280×30＝比9.33） */

  .site-header .cta {
    width: 93px;                  /* Figma: x297 → 右端390 */
    height: 46px;
    border-radius: 0;             /* 画面右上に密着 */
    font-size: 14px;
    color: #F33708;               /* Figma: 採用情報の文字色 */
    gap: 4px;
  }
  .site-header .cta-arrow { width: 18px; height: 18px; }

  /* KVをヘッダーの下から始める */
  section#hero { padding-top: 46px; }
}

/* ---- SP: 動画セクションの注記が枠から17pxはみ出す ------------------------
   <p> が display:inline-block のため、<br class="sp-only"> で2行になったときの
   幅計算が最長行を拾えず、2行目「CMや体験動画を公開中！」が枠外へ出ていた。
   block にして親（.notice, text-align:center）の幅内で折り返させる。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section#movie-area .notice p {
    display: block;
    padding: 0 5vw;
  }
}

/* ---- Azu指摘②「右側の装飾が上にあるので、下に移動」 ---------------------
   Figma 01_PCtop_A の装飾B（work6.svg と同じ 3本組・#EA5520×2 + #EF7954×1）は
   x=1250〜1493 / y=2830 ＝「求人募集中の組合企業」(y=2483) の 347px 下にある。
   これは実装では #jobs（求人一覧）の中。
   ところが実装はPCだけ #work の職種カード下段に付いていて、約646px 上にあった。
   （SPは phase1-adjustments.css で既に section#jobs::after へ移してある）
   -------------------------------------------------------------------------- */
/* 旧位置の装飾はPC・SPとも止める。
   SPは phase1 で section#jobs::after を追加した際に style.css 側を消しておらず、
   #work と #jobs に同じ work6.svg が同じ位置で2枚重なっていた */
section#work .job-box.stagger.bottom::after { display: none; }

@media (min-width: 768px) {
  section#jobs::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/work6.svg) 0 0 / 100% no-repeat;
    width: 9.5vw;
    height: 17vw;
    right: 0;
    top: 37.92vw;                  /* Figma: 「求人募集中の組合企業」の347px下 */
    z-index: -1;
    pointer-events: none;
  }
}

/* ---- Azu指摘⑤ 続き: 「防水とは？」右のグレーのイラストを止める ------------
   about3.svg は #D5D5D5 のビル群イラスト（389×403）。Figma 01_PCtop_A の
   同エリアには対応する要素がなく（Figmaは MERIT の下がすぐ写真＋「東西アスの強み」）、
   Figma準拠にするため非表示にする。
   ※Figmaの「丸」＝Professionals吹き出しは strengths1.webp に焼き込み済み、
     「四角」＝アイコン4つは strengths3〜6.svg として実装済み。どちらも既にある。
   ※戻す場合はこのブロックを消せば元に戻る（画像ファイルは残してある）
   -------------------------------------------------------------------------- */
/* 2026-08-27: Azu指示により復活（Figmaには無いが、元のデザインにあった装飾）
   section#about-waterproof .merit_area::before { display: none; } */

/* ---- ヘッダーのホバー挙動 -------------------------------------------------
   既存サイトは汎用の `a:hover { background:#000; color:#fff }` を持っており、
   白帯の中のナビにホバーすると「黒い矩形に白文字」になって文字が読めなくなる。
   ナビは下線、黄色ボタンは黄色のまま少し沈む挙動に置き換える。
   -------------------------------------------------------------------------- */
.site-header #gnav a:hover,
.site-header #gnav a:focus-visible {
  background: transparent;
  color: #0C0C0C;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 黄色ボタン：既存の `.cta:hover { background:#000; color:#fff }` を打ち消す。
   文字色は矢印と同じ #F33708 のまま、地の黄色だけ少し濃くする */
.site-header .cta:hover,
.site-header .cta:focus-visible {
  background: #F5E100;
  border-color: transparent;
  color: #F33708;
}

/* ---- ④ 職種カード上段の内側余白を Figma に合わせる ------------------------
   Figma: カード560×400 に対しテキスト枠は x=+30 / y=+113 / 幅368。
   実装は `padding: 7.5vw 8vw 5.5vw`（108 / 115.2 / 79.2）で
   左が 115px もあり、Azu指摘のとおり左が空きすぎていた。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  section#work .job-box.stagger.top span.wrap .job {
    padding: 7.85vw 11.25vw 5.76vw 2.08vw;  /* Figma: 上113 右162 下83 左30 */
  }
}

/* ---- ③ JOB CATEGORIES の色を Figma に合わせる ----------------------------
   Figma: fill #EA5520 ＋ レイヤー opacity 0.8 ＋ blendMode COLOR_DODGE。
   同じ #EA5520 のパネルの上に覆い焼きで重なるので、パネルより明るく黄色寄りになる。
   実装は SVG 内に mix-blend-mode があるだけで、<img> で読むと外側の
   パネルとはブレンドしないため、#f27a51 がそのまま乗って
   Figma（rgb 251,119,35）より青っぽい（rgb 242,122,81）色になっていた。
   → SVGの色を #EA5520 に戻し、img 側でパネルと覆い焼き合成する。
   -------------------------------------------------------------------------- */
section#work .work-panel span.text-img img {
  /* Figmaは「#EA5520 / 不透明度80% / 覆い焼き(カラー)」だが、
     ブラウザの color-dodge 合成では Figma のレンダリング結果と一致しない
     （理論値 rgb251,119,35 に対し Figmaの実際の描画は #D67630 = rgb214,118,48）。
     Azuが Photoshop で実測した #D67630 をそのまま塗るのが確実なので、
     ブレンドと不透明度は使わずフラットに乗せる */
  mix-blend-mode: normal;
  opacity: 1;
}

/* `.job-box.stagger.top` の margin-top が親の外へ相殺で漏れて効かなかった。
   `.work-panel` は absolute なのでフローに残るのはカードだけ＝最初の子になり、
   親（.section-inner）に padding も border も無いため margin が親の外に出ていた。
   flow-root で BFC を作って margin をセクション内に閉じ込める。 */
section#work .section-inner {
  display: flow-root;
}

/* ---- 導入コピー左の装飾（Figma Group 108）--------------------------------
   Figma: x=-94 / y=1112 / 228×264 の斜線2本（#EF7954 + #EA5520）。
   図形自体は #movie-area で使っている about1.svg と同一だが、
   about1.svg は viewBox が「0 0 135 265」で左側（x<0）を切り落としているため、
   viewBox を「-94 0 229 265」に広げた intro-deco.svg を用意して全体を出す。
   y=1112 は KV下端(877)＝#intro-lead の上端から +235px。
   -------------------------------------------------------------------------- */
section#intro-lead::before {
  content: "";
  display: block;
  position: absolute;
  left: -6.53vw;                 /* Figma: x=-94（画面左へはみ出す） */
  top: 16.32vw;                  /* Figma: y=1112 ＝ セクション上端+235px */
  width: 15.83vw;                /* 228/1440 */
  height: 18.33vw;               /* 264/1440 */
  background: url(../img/intro-deco.svg) 0 0 / 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 767px) {
  /* Figma 02_SPtop の導入コピー付近には装飾が無い（PCのみの演出） */
  section#intro-lead::before { display: none; }
}

/* ============================================================
   2026-08-26 仕様変更: 動画セクション（WORK STORIES）を
   「1件ずつ表示・左に動画／右にテキスト」へ作り替え
   ※8/22時点のFigmaは左右見切れのカルーセルだったが、8/24更新で変更されていた

   Figma実測（1440基準）:
     黒パネル Rectangle4473   x=40   1320×600
     コンテンツ Frame627641   x=234  960×328
       動画   Group186        x=234  506×328
       テキスト Frame627648   x=780  414×151   ← 動画の右、間隔40px
     矢印 Rectangle4598/4599  x=150 / x=1190  88×88
     ドット Frame627649       x=654  116×20
   ============================================================ */

/* 黒パネル：Figma x=40〜1360（1320幅） */
section#behind .stories-inner {
  width: 91.67vw;                 /* 1320/1440 */
  margin-left: 2.78vw;            /* Figma: x=40 */
}

/* スライダーの器：パネル内の余白を Figma に合わせる
   （上108 / 左194 / 右166。左右は「パネル左端40」からの差） */
section#behind .yt-behind {
  display: block;                 /* 旧: grid 3カラム */
  height: auto;
  padding: 7.5vw 11.53vw 9.31vw 13.47vw;   /* 下を134pxに（Figmaのパネル高さ600に合わせる） */
  grid-template-columns: none;
}

section#behind .yt-behind.slick-slider .slick-list {
  width: 100%;                    /* 旧: 71.3vw（見切れ用の窓） */
  overflow: hidden;
}

/* スライド1枚：左に動画・右にテキストの横並び */
section#behind .yt-behind .behind {
  display: flex;
  align-items: flex-start;
  gap: 0 2.78vw;                  /* Figma: 動画右端740 → テキスト780 ＝ 40px */
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section#behind .yt-behind .behind .yt-card {
  flex: 0 0 35.14vw;              /* Figma: 動画 506/1440 */
  width: 35.14vw;
  aspect-ratio: 506 / 328;        /* Figma: 506×328 */
  border-radius: 12px;
}

section#behind .yt-behind .behind > ul {
  flex: 1 1 auto;
  width: 28.75vw;                 /* Figma: テキスト 414/1440 */
  padding-top: 6.18vw;            /* Figma: 動画3330 → テキスト3419 ＝ 89px */
}
/* ラベルの上マージン(0.35em)が乗って実測95pxになるので消す */
section#behind .yt-behind .behind .title {
  margin-top: 0;
}

/* 見切れ演出（中央以外を薄く）は1件表示になったので解除 */
section#behind .yt-behind.slick-slider .slick-slide:not(.slick-center) {
  opacity: 1;
}

/* 矢印：Figma x=150 / x=1190、88×88（パネル左端40からの相対で配置） */
section#behind .yt-behind .slick-prev,
section#behind .yt-behind .slick-next {
  width: 6.11vw;                  /* 88/1440 */
  height: 6.11vw;
  top: 50%;
  transform: translateY(-50%);
}
section#behind .yt-behind .slick-prev { left: 7.64vw; }   /* Figma x=150 − パネル左端40 = 110 */
section#behind .yt-behind .slick-next { right: 5.9vw; }   /* Figma 右端1278 → パネル右端1360 との差85 */
section#behind .yt-behind .slick-prev::before,
section#behind .yt-behind .slick-next::before {
  width: 2.4vw;
  height: 2.4vw;
  border-width: 3px;
}

/* ドット：Figma x=654〜770（116幅）＝ パネル内で中央寄せ */
section#behind .yt-behind.slick-slider .slick-dots {
  /* width:100% だと親(1320px)と同じ幅になり、left が padding 起点でずれて中心が894になっていた。
     左右を padding に合わせて中央寄せする（Figma: ドット中心712 ＝ パネル内側の中央714） */
  left: 13.47vw;                  /* .yt-behind の padding-left と同値 */
  right: 11.53vw;                 /* 同 padding-right */
  width: auto;
  bottom: 3.4vw;
}

/* ---- SP: 縦に並べる ---- */
@media (max-width: 767px) {
  section#behind .stories-inner {
    width: 100vw;
    margin-left: 0;
  }
  section#behind .yt-behind {
    padding: 10vw 6vw 14vw;
  }
  section#behind .yt-behind .behind {
    display: block;               /* 縦積み */
  }
  section#behind .yt-behind .behind .yt-card {
    width: 100%;
    flex: none;
  }
  section#behind .yt-behind .behind > ul {
    width: 100%;
    padding-top: 4vw;
  }
  section#behind .yt-behind .slick-prev,
  section#behind .yt-behind .slick-next {
    width: 10vw;
    height: 10vw;
    top: 41.3vw;                  /* 動画の高さの中央（実測: 動画 y+0〜223 の中央218） */
    transform: none;
  }
  section#behind .yt-behind .slick-prev { left: 1vw; }
  section#behind .yt-behind .slick-next { right: 1vw; }
}

/* ============================================================
   2026-08-26 Azuフィードバック ①②④⑥
   ============================================================ */

/* ① 求人一覧の黄色カード → 「働く現場の裏側」の余白を Figma に
   Figma: カード下端2937 → 見出し3030 ＝ 93px（実装は172pxで79px広かった） */
section#jobs { padding-bottom: 2.78vw; }     /* 72 → 40px */
section#behind { padding-top: 2.74vw; }      /* 86.4 → 39.4px */

/* ② WORK STORIES の英字を Figma 位置へ（黒帯の文字にめり込ませ、右は画面外へ）
   Figma: x=1321〜1461（140幅）＝ 黒帯右端1360より39px左から始まり、画面1440を21px超える */
@media (min-width: 768px) {
  section#behind span.stories-text-img {
    position: absolute;
    right: -1.46vw;            /* Figma: 右端1461 ＝ 画面1440 を21px超える */
    width: 9.72vw;             /* Figma: 140/1440 */
    z-index: 1;
  }
}

/* ④⑥ 方眼を黒帯の後ろまで伸ばし、オレンジ帯までを2マス(95px)に
   Figma: 方眼上端3696（黒帯下端3822の126px上）／黒帯下端→オレンジ帯 ＝ 95px */
section#interview {
  margin-top: -8.75vw;         /* 黒帯の後ろへ126px潜り込ませる（旧 +5vw） */
  padding-top: 15.35vw;        /* オレンジ帯を黒帯下端+95px の位置に（旧 5vw） */
  --g_grid: 3.4vw;             /* 方眼のマス目 49px（旧 3.55vw＝51px） */
  z-index: 0;
}
/* 黒帯が方眼より前面に来るように */
section#behind .stories {
  position: relative;
  z-index: 1;
}

/* ⑥ INTERVIEW の英字は JOB CATEGORIES と同じ扱い（#FB7724 をフラットに） */
section#interview .interview-text-img img {
  mix-blend-mode: normal;
  opacity: 1;
}

@media (max-width: 767px) {
  section#jobs { padding-bottom: 8vw; }
  section#behind { padding-top: 8vw; }
  section#interview {
    margin-top: 0;
    padding-top: 10vw;
  }
}

/* ============================================================
   2026-08-26 Azuフィードバック（動画セクションの仕上げ）
   ============================================================ */

/* ③ 黒帯の色: 実装は純黒 #000 だったが Figma は #0C0C0C。
   WORK STORIES の文字色も同じ #0C0C0C なので、帯に重なった部分が
   うっすら沈んで見えるのが正しい見え方 */
section#behind .stories-inner {
  background: #0C0C0C;
}

/* ① WORK STORIES の文字が大きすぎた（実装の高さ776 / Figma 672）。
   SVGとFigmaでアスペクト比が違う（0.180 vs 0.208 ＝ Figmaは行間77%で詰めている）ため、
   高さをFigmaに合わせて幅は成り行きにする */
@media (min-width: 768px) {
  section#behind span.stories-text-img {
    width: auto;
    height: 46.67vw;           /* Figma: 672/1440 */
    right: -1.46vw;            /* Figma: 右端1461 ＝ 画面を21px超える */
  }
  section#behind span.stories-text-img img {
    width: auto;
    height: 100%;
    display: block;
  }
}

/* ④ 矢印: Figma は 88×88 の線画（stroke 4px）。
   実装は 34.6px の山括弧で小さかったので、88×88 相当に拡大する */
section#behind .yt-behind .slick-prev::before,
section#behind .yt-behind .slick-next::before {
  width: 4.31vw;               /* 62px ＝ 45度回転で約88pxの見え方 */
  height: 4.31vw;
  border-top-width: 4px;       /* Figma: strokeWeight 4 */
  border-right-width: 4px;
}

/* ④続き 矢印を動画・テキストから離す（Azu指示「余白をとって少し離して」）
   Figmaは矢印と動画がほぼ接している（矢印右端238 / 動画左端234）が、
   実機で窮屈なので外側へずらす */
@media (min-width: 768px) {
  section#behind .yt-behind .slick-prev { left: 5.97vw; }   /* 110 → 86px（動画から20px空く） */
  section#behind .yt-behind .slick-next { right: 4.2vw; }   /* 85 → 60px（テキストから18px空く） */
}

/* ============================================================
   2026-08-26 Azuフィードバック（動画左の装飾 / INTERVIEW上余白 / 東西アスとは？上の装飾）
   ============================================================ */

/* ① 動画（黒帯）左の装飾が切れていた。
   behind5.svg は path が x=-81〜147（Figmaの228幅と一致）なのに
   viewBox が「0 0 148 265」で左半分を切り落としていた（intro-deco と同じ罠）。
   → viewBox を広げた behind5-full.svg に差し替え、Figma位置へ。
   Figma: 装飾 x=-81〜147 / y=3132（黒帯 x=40・y=3222 が基準で -121px, -90px） */
@media (min-width: 768px) {
  section#behind .stories-inner::before {
    background-image: url(../img/behind5-full.svg);
    left: -8.4vw;              /* 黒帯左端から -121px */
    top: -6.25vw;              /* 黒帯上端から -90px */
    width: 15.83vw;            /* Figma: 228/1440 */
    height: 18.33vw;           /* Figma: 264/1440 */
  }
}

/* ② INTERVIEW の英字を帯の上端から22px下げる（Figma: 帯3917 → 英字3939） */
section#interview .interview-text-img {
  top: 1.53vw;                 /* 22/1440（旧 1vw＝14px） */
}

/* ③ 「東西アスとは？」上（＝インタビュー左）の装飾の大きさと位置を Figma に
   Figma: 3枚組の外接 x=-51〜192 / y=4682〜4957 ＝ 243×275
   基準の .qa は x=300 なので left = -51-300 = -351px */
section#interview .interview-deco {
  left: -24.375vw;             /* Figma: 装飾の左端 x=-51 */
  top: 11.67vw;                /* Figma: y=4682（.qa の168px上） */
  width: 16.88vw;              /* Figma: 243/1440（旧 21vw＝302px） */
  height: 19.1vw;              /* Figma: 275/1440 */
}
/* 3枚の相対位置を外接枠に対する比率で指定（幅が変わっても崩れない）
   Figma: 4567(17,0,210) / 4565(45,49,198) / 4566(0,77,198) */
section#interview .interview-deco img:nth-child(1) { left: 7.0%;  top: 0;     width: 86.4%; }
section#interview .interview-deco img:nth-child(2) { left: 18.5%; top: 17.8%; width: 81.5%; }
section#interview .interview-deco img:nth-child(3) { left: 0;     top: 28.0%; width: 81.5%; }

@media (max-width: 767px) {
  /* ② のPC値(1.53vw)がSPにも効いていたのでSP値に戻す
     Figma 02_SPtop: 英字 y=4496 / 帯 y=4492 ＝ 4px */
  section#interview .interview-text-img { top: 1.03vw; }
}

/* インタビューのオレンジ帯：上の角も丸める（Azu指摘）
   ※Figma の Rectangle 4564 は角丸 [0,0,8,8] ＝ 下2つのみだが、
     「背景角丸」の指摘が上端の角を指していると判断して4隅とも8pxにする。
     Figma準拠に戻す場合は border-radius: 0 0 8px 8px */
section#interview .interview-head {
  border-radius: 8px;
}

/* インタビュー帯の調整（Azu指摘 2026-08-27）
   ・黒帯とオレンジ帯の縦の余白を倍に（95px → 190px ＝ 方眼およそ4マス）
   ・角丸は左上・左下のみ。右上・右下は0 */
section#interview {
  padding-top: 21.94vw;        /* 316px。オレンジ帯を黒帯の下端+190px の位置に */
}
section#interview .interview-head {
  border-radius: 8px 0 0 8px;  /* 左上・左下だけ8px、右上・右下は0 */
}

@media (max-width: 767px) {
  section#interview { padding-top: 16vw; }   /* SPも倍に（旧 10vw） */
}

/* 修正（Azu指摘）: 広げるのは「オレンジ帯の外側」ではなく「内側」＝ INTERVIEW文字の上
   ・外側（黒帯→オレンジ帯）は Figma の95pxに戻す
   ・内側（帯の上端→INTERVIEW英字）を 22px → 44px（倍）に */
section#interview {
  padding-top: 15.35vw;        /* 221px。黒帯の下端+95px の位置に戻す */
}
section#interview .interview-text-img {
  top: 3.06vw;                 /* 44px（Figma 22px の倍） */
}

@media (max-width: 767px) {
  section#interview { padding-top: 10vw; }              /* SPも元に戻す */
  section#interview .interview-text-img { top: 2.06vw; } /* SPも倍（元 1.03vw） */
}

/* ① 「東西アスとは？」の背景色（Azu指定） */
section#about-company {
  background-color: #F5F5F5;
}

/* ③ 動画左の装飾を下へ（Azu指示）
   実装は装飾が防水動画より165px上にあったが、Figma では
   装飾(Rectangle4568/4569) y=6738〜7002 / 動画(Rectangle4513) y=6719〜7019 で
   ほぼ同じ高さ（装飾が19px下）。→ 184px 下げる */
@media (min-width: 768px) {
  section#movie-area .slider-wrap::after {
    top: 36.28vw;              /* 338px → 522px */
  }
}

/* 2026-08-27 装飾の位置合わせ（Azu指摘「②と③の位置が一致していない」）
   Figmaには対応要素が無い装飾（ビル群）と、動画の高さが Figma(300px) と
   実装(540px・16:9) で違うため、数値ではなく「見た目の位置」で合わせる。
   ・ビル群 → 動画の右上へ（実測: x+182 / y-598）
   ・斜線   → 動画の中心の高さへ（実測: 150px 下） */
@media (min-width: 768px) {
  /* 2026-08-27 Azu指定値 */
  section#about-waterproof .merit_area::before {
    left: 52vw;
    top: -39vw;
  }
  section#movie-area .slider-wrap::after {
    top: 62vw;
  }
}

/* 2026-08-27 Azu指定（PC時のみ） */
@media (min-width: 768px) {
  section#about-waterproof {
    padding-bottom: 6vw;
  }
  /* 動画のサイズを Figma に合わせて小さく */
  section#about-waterproof .yt-single {
    max-width: 740px;
  }
  section#strengths {
    padding: 5vw 0 4vw;
  }
}

@media (max-width: 767px) {
  /* SPは幅が足りず「求人一覧」が2行に折れるため、矢印は出さない */
  .site-header .cta-arrow { display: none; }
}

/* ---- SP: 導入コピーまわり（Figma 02_SPtop 準拠）--------------------------
   ・本文 16px / 行間32px / 幅350（実装は 3.5vw＝13.65px・行間1.9 だった）
   ・右上の装飾（Group 107 = 斜線3本 140×155）を追加。
     Figma: x=310〜450 / y=740〜897 ＝ 画面390を60px超え、KV下端818の78px上から
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section#intro-lead .lead-body p {
    font-size: 4.1vw;            /* Figma: 16px */
    line-height: 2;              /* Figma: lineHeight 32px = 16×2 */
  }
  section#intro-lead .lead-inner {
    width: 89.74vw;              /* Figma: 本文幅 350/390 */
    margin-inline: auto;
  }
  section#intro-lead::before {
    display: block;
    background-image: url(../img/intro-deco-sp.svg);
    left: 79.49vw;               /* Figma: x=310 */
    top: -20vw;                  /* Figma: y=740 ＝ KV下端818の78px上 */
    width: 35.9vw;               /* Figma: 140/390 */
    height: 39.74vw;             /* Figma: 155/390 */
  }
}

/* ---- SP: 職種カードの上余白を統一（Azu指摘）------------------------------
   実装はカードごとに padding-top が 17.5vw / 10.5vw / 18.5vw とバラバラで、
   ラベルの上余白が 72 / 35 / 10 / 76px になっていた。
   Figma 02_SPtop は 49 / 47 / 43 / 43px でほぼ揃っているので 45px に統一する。
   高さは内容なりに下へ伸びる（Azu指示「広げるなら下に」）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section#work .job-box.stagger span.wrap .job,
  section#work .job-box.stagger.top span.wrap:nth-child(1) .job,
  section#work .job-box.stagger.bottom span.wrap:nth-child(2) .job {
    padding-top: 11.54vw;        /* 45/390 に統一 */
  }

  /* 右下の装飾を縮小し、下端を選手の頭の高さまで上げる
     Figma: 装飾 Group108 の下端2432 ≒ 選手 WDC06003 の頭2429 */
  section#jobs::after {
    width: 17.82vw;              /* 92 → 69.5px */
    height: 32.56vw;             /* 168 → 127px */
  }
}

/* ---- SP: 動画をカルーセルではなく縦に並べる（Figma 02_SPtop 準拠）--------
   JS側は breakpoint 768 で 'unslick'。CSSは縦積みの見た目を整える。
   Figma: 動画 351×235 ＋ テキスト126px を 40px 間隔で3つ並べる
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section#behind .yt-behind .behind {
    display: block;
    margin-bottom: 10.26vw;      /* Figma: カード間 40px */
  }
  section#behind .yt-behind .behind:last-child { margin-bottom: 0; }
  section#behind .yt-behind .behind .yt-card {
    width: 100%;
    aspect-ratio: 351 / 235;     /* Figma: 動画のサイズ */
  }

  /* 黄色カードの左下の装飾（Figma Group109: 斜線2本 106×106・x=-43）
     既存の about4.svg が同じ2枚組・正方形なので流用する */
  section#jobs::before {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/about4.svg) 0 0 / 100% no-repeat;
    left: -11.03vw;              /* Figma: x=-43 */
    bottom: -8vw;
    width: 27.18vw;              /* Figma: 106/390 */
    height: 27.18vw;
    z-index: 1;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  /* ① 黄色カード左下の装飾はカードの「下」に潜らせる（Azu指摘）
     カードが position:static / z-index:auto なので装飾の z-index:1 が前面に出ていた */
  /* z-index:0 ではカードの下に回らなかったので負値にする。
     #jobs が position:relative なので、-1 でも #jobs の背景より前には残る */
  section#jobs::before { z-index: -1; }
  /* 既存の `section#jobs a.jobs-list { position: initial }`(詳細度1,1,1) に
     `.jobs-list`(1,1,0) では1差で負けていた。同じ a. 付きにして勝たせる */
  section#jobs a.jobs-list { position: relative; }

  /* ② WORK STORIES の英字を上へ
     実装は黒帯の上端から160px下。Figma 02_SPtop は英字 y=3109 / 黒帯 y=3162 で
     英字が黒帯より53px上から始まる → 213px 上げる */
  section#behind span.stories-text-img {
    /* 2026-08-31 縦書きの下端をドットナビの中心に合わせる位置まで上げる
       （旧 -13.59vw では下端が黒帯の底に近く、ドットより下まで伸びていた） */
    top: -21.59vw;
    /* 2026-08-31 SPをスライダーに戻したことで黒帯がカード1枚分の高さになり、
       縦書きタイトルが下端から数px はみ出して次セクションに入っていた。
       27vw → 26vw に縮小（375px/430px とも黒帯の内側に約20px の余裕ができる） */
    width: 26vw;
  }
}

/* ============================================================
   2026-08-27 SP フィードバック（インタビュー周辺）
   ============================================================ */
@media (max-width: 767px) {
  /* ① 動画エリアの下の余白を詰める */
  section#behind .yt-behind {
    padding-bottom: 5vw;         /* 54.6px → 19.5px */
  }

  /* ② INTERVIEWの右上に出ている装飾（#behind の behind3.svg）を非表示 */
  section#behind .stories-inner::after { display: none; }

  /* ③ オレンジ帯の角丸をなくす */
  section#interview .interview-head { border-radius: 0; }

  /* ④ Q&Aが写真に隠れていたので下げる（Azu指定値） */
  section#interview .qa { margin: 26vw 0 0 -50vw; }

  /* ⑤ 方眼を「東西アスの強み」と同じ大きさ・濃さに
     ※ #strengths は SP で --g_grid_sp: 12.5vw を使っている（PCの3.55vwではない） */
  section#interview {
    --g_grid: 12.5vw;
    --g_line: rgba(0, 0, 0, .07);
    --g_bold: rgba(0, 0, 0, .10);
  }
}

/* ============================================================
   2026-08-27 SP フィードバック（CM部分の装飾）
   ============================================================ */
@media (max-width: 767px) {
  /* ⑥ ビル群がセクションの一番下に落ちて見えなくなっていた（下端がセクション下端の8px上）
     → PC同様に「防水動画の右上」へ持ってくる */
  section#about-waterproof .merit_area::before {
    left: 54vw;                  /* Azu指定 */
    top: -60vw;                  /* Azu指定 */
    bottom: auto;
    right: auto;
  }

  /* ⑦ 動画まわりの右のオレンジ装飾を「東西アスの強み」の手前まで下ろし、少し拡大 */
  section#movie-area .slider-wrap::before {
    top: 244vw;                  /* y=6857 → 7700（#strengths 7826 の手前） */
    width: 22.56vw;              /* 68 → 88px（約1.3倍） */
    height: 41.79vw;             /* 125 → 163px */
  }
}

/* 2026-08-27 Azu指定（SP） */
@media (max-width: 767px) {
  /* 動画の下の余白に合わせて、インタビュー側の上余白も取る */
  section#interview {
    padding-top: 0;
  }

  /* INTERVIEW右上に残っていた装飾（orange-line の擬似要素）を非表示 */
  section#behind .stories-inner .orange-line::before { display: none; }

  /* 動画まわりの左の装飾も非表示 */
  section#movie-area .slider-wrap::after { display: none; }

  /* 防水動画の幅 */
  section#about-waterproof .yt-single {
    max-width: 85%;
  }
}

/* 2026-08-27 Azu指定（SP） */
@media (max-width: 767px) {
  section#interview .interview-head {
    padding-top: 17vw;
  }
  section#interview .interview-text-img {
    top: 5vw;
  }
  section#about-company {
    padding: 7vw 0 10vw;
  }
}

/* ============================================================
   2026-08-28 修正依頼（PDF: 東西アスLP修正内容0828）
   ============================================================ */

/* ① 「東西アスで働こう！」のアンカーがスクロールしすぎて
      「どんな職種があるの？」のタイトルが隠れていた。
      オレンジパネルの上端(セクション上端の259px手前)がヘッダー(98px)の下に来る位置で止める */
/* ① 「東西アスで働こう！」
   オレンジ背景 .work-panel は #work セクションの上端より 259px 上にはみ出している
   （セクション上端1618 / パネル上端1359）。セクション上端で止めるとオレンジの上半分を
   通り過ぎてしまい、「どんな職種があるの？」のタイトルがヘッダーの上に隠れる。
   パネルの上端がヘッダーの見た目の下端に来るよう 22.5vw 手前で止める */
section#work {
  scroll-margin-top: calc(78px + 17.99vw + var(--anchor-gap));
}

/* ② 残りのセクション
   各セクションで「ヘッダー直下に来てほしい要素」の上端が、ヘッダーの見た目の下端
   （＝白帯の下端 78px）に来る値。形は必ず **calc(78px - D vw)**。

   ★ px と vw の使い分け（ここを間違えると幅を変えたときにズレる）★
     78px … ヘッダーの高さ。CSSで height を px 固定しているので画面幅が変わっても不変
     D vw … セクション上端から見せたい要素までの距離。中の padding が vw なので幅に比例
   両方を vw に統一すると、幅が変わったときヘッダー高だけ実態と合わなくなる
   （例: 46px を 12.27vw と書くと 600px幅では 73.6px と解釈され 27px ずれる）。

   ★ 微調整するときはここだけ触ればOK ★
   --anchor-gap を増やすと「全メニュー」がその分だけ手前（上）で止まる。
   減らす（マイナスにする）とその分だけ下で止まる。例: 20px 下げたいなら -20px。
   個別に変えたいときは下の各行の数値を直接いじる（増やす=手前で止まる / 減らす=下で止まる）。 */
:root {
  --anchor-gap: 0px;    /* PC共通の微調整。+で手前(上)、-で下 */
}
section#jobs            { scroll-margin-top: calc(78px -  8vw + var(--anchor-gap)); }
section#behind          { scroll-margin-top: calc(78px -  0vw + var(--anchor-gap)); }
section#about-company   { scroll-margin-top: calc(78px -  0vw + var(--anchor-gap)); }
section#about-waterproof{ scroll-margin-top: calc(78px -  2vw + var(--anchor-gap)); }
section#strengths       { scroll-margin-top: calc(78px -  0vw + var(--anchor-gap)); }

/* ③ 「社員インタビュー」のアンカーはスクロールが足りず、
      オレンジ帯(セクション上端の221px下)まで届いていなかった。
      2026-08-30 追加調整: PCヘッダーはフローティング型（透明20px + 白帯58px + 透明20px）で、
      オレンジ帯の上端をヘッダー下端(98px)に合わせると、透明部分ごしに前セクションの
      黒帯(#behind の動画背景)が98px分すべて見えてしまう。
      オレンジ帯の上端を白帯の下端(78px)に合わせることで、黒が見えるのは上部20pxだけになり、
      かつ帯の中身（英字INTERVIEW・●社員インタビュー・見出し）は全て白帯より下に残る。
      ※ これ以上上げると中身が白帯の裏に隠れる。上20pxはフローティングヘッダーの構造上どうしても残る */
section#interview {
  scroll-margin-top: calc(78px - 15.35vw + var(--anchor-gap));
}

/* ② 「働く現場の裏側」のタイトル下に余白を追加（既存デザインと同じ間隔に）
      本文と黒帯の間隔が0だったので .stories に margin-top を足す。
      黒帯の装飾（.stories-inner の擬似要素）も一緒に下がるのでデザインはずれない。
      ※ #behind の padding-bottom ではセクションの下に効いてしまい効果がなかった */
section#behind .stories {
  margin-top: 3.47vw;          /* 約50px */
}

@media (max-width: 767px) {
  /* SPのアンカー停止位置。
     ヘッダー高は46px固定（.header-inner が height:52px 指定）だが、
     セクション内の余白は vw 指定なので smt = 46px - D(vw) を calc で表す。
     D = セクション上端から「ヘッダー直下に来てほしい要素」までの距離（375pxで実測しvw換算） */
  /* ★ SPの微調整はこの --anchor-gap-sp を変えるだけ（+で手前=上、-で下） ★
     形は calc(46px - D vw)。46px はヘッダー高（px固定なので vw にしてはいけない）、
     D vw はセクション上端から見せたい要素までの距離（padding が vw なので幅に比例）。 */
  :root { --anchor-gap-sp: 0px; }
  section#work             { scroll-margin-top: calc(46px +  9.87vw + var(--anchor-gap-sp)); }
  section#jobs             { scroll-margin-top: calc(46px -  5vw + var(--anchor-gap-sp)); }
  section#behind           { scroll-margin-top: calc(46px -  5vw + var(--anchor-gap-sp)); }
  section#about-company    { scroll-margin-top: calc(46px -  2vw + var(--anchor-gap-sp)); }
  section#about-waterproof { scroll-margin-top: calc(46px - 10vw + var(--anchor-gap-sp)); }
  section#strengths        { scroll-margin-top: calc(46px - 20vw + var(--anchor-gap-sp)); }
  /* #interview だけは「オレンジ帯をヘッダー直下」ではなく、前セクションの黒帯を
     確実に隠すため16pxぶん余分に下げる。
     12vw(45px)だと黒帯の下端45.1px vs ヘッダー46px で余裕が0.9pxしかなく、
     実機のヘッダー高やアドレスバーのわずかな差で黒帯が顔を出していた */
  section#interview        { scroll-margin-top: calc(30px + var(--anchor-gap-sp)); }   /* D=0。黒帯を16px隠すため 46-16=30px */
  section#behind .stories { margin-top: 8vw; }
}


/* ==========================================================================
   ④ 社員インタビュー Q&A 本文をFigmaに合わせる（2026-08-28 PDF指示）
   Figma実測: 本文テキストは左端385px / 右端1140px / 幅755px（1440px基準）
   実装は dd の padding-right 41.76px ぶん右端が内側に入っていて幅707pxだった。
   本文の p だけ右に伸ばして幅を合わせる（見出しの位置は変えない）
   ========================================================================== */
@media (min-width: 768px) {
  /* 既存の section#interview .qa dd p:not(.a-head) に詳細度で勝つため .qa を含める */
  section#interview .qa dl dd p:not(.a-head) {
    padding-left: 3.0vw;         /* 43.2px：文字開始をFigmaの385pxに合わせる */
    margin-right: -2.9vw;        /* dd の padding-right 41.76px を打ち消して右端を1140pxに */
  }
}


/* ==========================================================================
   SPハンバーガーメニュー（2026-08-30 指示）
   ・並びをPCグローバルナビと同じ順序に（HTML側で並べ替え済み）
   ・リンク同士の間隔が広かったので詰める
     元: .drawer__list a { padding: 12px } → リンク間24px
   ========================================================================== */
.drawer__list a {
  padding: 7px 12px;             /* 上下を12→7pxに。リンク間 24px → 14px */
}


/* ==========================================================================
   RECRUIT（#jobs）SPレイアウト（2026-08-30）
   Figma「02_SPtop / Frame 627626」390px基準の実測:
     選手 x=220 y=60 w=136 h=211  ／  黄色ボックス y=254
     → 選手は黄色ボックスの上端より 194px(49.74vw) 上から始まり、
       足元は上端より 17px(4.36vw) 下まで入り込む＝「ニョキっと出て足元が刺さる」形
   包含ブロックは div.off（= 黄色ボックスの上端 + padding 8vw）なので
     top = -(49.74vw + 8vw) = -57.74vw
   ※ px でキャップすると画面幅が変わったとき比率が崩れるので、すべて vw で通す
   ========================================================================== */
@media (max-width: 767px) {
  /* 選手の親 div.off は position:absolute だが top/left が未指定のため、
     .jobs-list の display:flex + align-items:center による「静的位置」に置かれる。
     するとボックスの高さ（＝本文の行数）が変わるたびに上下位置が動いてしまう。
     → top/left を 0 に固定して、選手の位置を黄色ボックスの左上基準にする。
     ※ static にすると flex アイテムとして幅を取り、ボタンが改行するのでダメ（2026-08-30 検証済み） */
  section#jobs a.jobs-list > div.off {
    top: 0;
    left: 0;
  }
  section#jobs a.jobs-list span.jobs-img {
    width: 34.87vw;    /* Figma 136/390。高さは画像の縦横比(×1.551)で 54.10vw になる */
    /* 親 div.off の上端は黄色ボックスの上端から padding-top(8vw) + border(1px) だけ下。
       padding は vw 指定なので幅に比例、border だけが px 固定。
       -49.74vw は Figma の「ボックス上端の 49.74vw 上」＝幅に比例する分 */
    top: calc(-49.74vw - 4vw - 1px);
    left: 53.41vw;
  }
  /* フォントは元から vw 指定（title 5vw / text 3.8vw）。
     選手の位置・大きさも vw に統一したので、画面幅が変わっても
     文字と人物の位置関係は比例して保たれる。px による頭打ちは入れない */
}


/* ==========================================================================
   職種カードの背景画像がタイル状に繰り返される問題（2026-08-30 指摘）
   既存は background-size:100%（＝幅100%）で、画像の高さがカードの高さに
   届かず下側に2枚目が出ていた。
   → 画像を少し拡大して隙間を埋め、あわせて繰り返し自体も止める。
   セレクタは既存（style.css の nth-child 指定）と同じ形にして後勝ちさせる。
   ========================================================================== */
section#work .job-box.stagger.top span.wrap:nth-child(1),
section#work .job-box.stagger.top span.wrap:nth-child(2),
section#work .job-box.stagger.bottom span.wrap:nth-child(1),
section#work .job-box.stagger.bottom span.wrap:nth-child(2) {
  background-size: 110%;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  section#work .job-box.stagger.top span.wrap:nth-child(1),
  section#work .job-box.stagger.top span.wrap:nth-child(2),
  section#work .job-box.stagger.bottom span.wrap:nth-child(1),
  section#work .job-box.stagger.bottom span.wrap:nth-child(2) {
    background-size: 102%;
  }
}