/* ============================================================
   05.html・06.html だけが読み込む見た目（css/style.css → css/style02.css の上に重ねる）
   MV の中に、支援企業のロゴの帯（.fv-clients）を入れる。スクロールしなくても、実績が見えるように。
   ・PC（900px以上）：MV の下端に、横いっぱいの帯。写真の窓は、帯の上で終わる。
   ・スマホ・タブレット：2つのボタンのすぐ下（写真より上）。
   ・ロゴは、02 と同じ流れる帯（js/lp.js の initClients がそのまま動く）。
   ============================================================ */
.fv--logos { --tile-h: 54px; }
.fv-clients {
  position: relative; z-index: 3;
  margin: 20px calc(50% - 50vw) 0; padding: 12px 0 14px;      /* 画面の横いっぱい（.fv__inner の幅の外まで） */
  background: var(--sky);                                    /* 方眼の地を消して、帯として見せる */
}
.fv-clients__label {
  display: flex; justify-content: center; align-items: center; gap: .4em; margin-bottom: 9px;
  font-size: 14px; font-weight: 900; line-height: 1.4; letter-spacing: .06em; color: var(--navy);
}
.fv-clients__part { margin-left: -.42em; font-size: .86em; }      /* 「（」の左の空きを詰める */
.fv-clients .clients__track li { width: 126px; height: var(--tile-h); margin-right: 10px; padding: 6px 12px; border-radius: 12px; }
.fv--logos .fv__visual { margin-top: 18px; }
.js .fv-clients { animation: rise .8s var(--ease) 1.1s both; }

/* スマホ：MV の上の余白を少し詰めて、ロゴの帯が画面の高さ 650px 前後でも見えるように */
@media (max-width: 599px) {
  .fv--logos .fv__inner { padding-top: 16px; }
  .fv--logos .fv__logo { width: min(210px, 52%); margin-bottom: 10px; }
  .fv--logos .fv__kicker { margin-bottom: 8px; }
  .fv--logos .cv { margin-top: 16px; }
  .fv-clients { margin-top: 16px; padding: 10px 0 12px; }
  .fv-clients__label { margin-bottom: 7px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .fv--logos { --tile-h: 60px; }
  .fv-clients .clients__track li { width: 144px; margin-right: 14px; }
}

@media (min-width: 900px) {
  /* MV：コピーを上の残りの高さの真ん中に、ロゴの帯を下端に。帯の下は、実績の紺の面がかぶさる分（--r）をあける */
  .fv--logos { --tile-h: clamp(56px, 4.4vw, 70px); --strip: calc(16px + 22px + 10px + var(--tile-h) + 14px + var(--r)); align-items: stretch; }
  .fv--logos .fv__inner { display: flex; flex-direction: column; padding: 0; }
  .fv--logos .fv__copy { margin-block: auto; padding: 26px 0 22px; }
  .fv--logos .fv__visual { bottom: var(--strip); margin: 0; }
  .fv-clients { margin-top: 0; padding: 16px 0 calc(14px + var(--r)); }
  .fv-clients__label { margin-bottom: 10px; font-size: 16px; line-height: 22px; }
  .fv-clients .clients__track li { width: clamp(132px, 11vw, 176px); margin-right: clamp(12px, 1.3vw, 20px); padding: 7px 14px; }
}

/* ---------- 06（二次募集訴求）：「高卒採用の2次募集を／成功に導くなら」を2行で。「2次募集」を橙に ---------- */
.fv__l1--2ji { font-size: clamp(22px, 10cqw, 80px); letter-spacing: -.01em; }
.fv__l1--2ji > span { display: block; white-space: nowrap; }
.fv__l1--2ji em { font-style: normal; color: var(--orange); }
@media (min-width: 600px) {
  .fv__l1--2ji { font-size: clamp(22px, 8.6cqw, 80px); }
  .fv--2ji .fv__l2 { font-size: clamp(30px, 10cqw, 112px); }
}

/* PC で画面が低いとき（ノートPCなど）：MV が画面の高さにおさまるよう、コピーの余白と見出しを詰める（ロゴの帯まで、スクロールせずに見えるように） */
@media (min-width: 900px) and (max-height: 860px) {
  .fv--logos .fv__logo { width: 196px; margin-bottom: 14px; }
  .fv--logos .fv__kicker { margin-bottom: 12px; }
  .fv--logos .fv__copy { padding: 18px 0 14px; }
  .fv--logos .cv { margin-top: 20px; }
  .fv--logos .fv__l1 { font-size: min(12.6cqw, 11.6vh); }
  .fv--logos .fv__l2 { font-size: min(11.3cqw, 10.6vh); }
  .fv--logos .fv__l1--2ji { font-size: min(8.6cqw, 7.4vh); }
  .fv--2ji .fv__l2 { font-size: min(10cqw, 9.2vh); }
}
@media (min-width: 900px) and (max-height: 700px) {
  .fv--logos { --tile-h: 52px; --strip: calc(12px + 22px + 10px + var(--tile-h) + 14px + var(--r)); }
  .fv--logos .fv__logo { width: 170px; margin-bottom: 10px; }
  .fv--logos .fv__kicker { margin-bottom: 8px; font-size: 16px; }
  .fv--logos .cv { margin-top: 16px; }
  .fv-clients { padding-top: 12px; }
}