/* ===== トップの FV「実績」（2026-10-07 開発サイトで試作。2026-10-11 本人決定で本番の FV にした）=====
   元は fiz-トップページFV/見本/方向/方向6_右に実績を並べる.html。組み方は template-parts/home/fv.php と inc/fv-variant.php（fiz_fv_works_render）
   読み込みは inc/fv-variant.php（トップで works が選ばれたときだけ）。home.css は変えず、ここで上書きする。すべて body.fv-variant-works の下に閉じる
   置き方：1024px 以上は右半分に実績6件（ゆっくり上に流す）／768〜1023px は h1 の下に6件／768px 未満は h1 の下に3件
   英字3行の大きさと h1 の位置・大きさは本番のまま。文字の色は白と灰だけ（赤は使わない） */

/* 実績の一覧 */
.fv-variant-works .fv-works { margin: 40px 24px 0; color: var(--color-white, #fff); }
.fv-variant-works .fv-works__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px; }
.fv-variant-works .fv-works__label {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--color-white, #fff);
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
}
.fv-variant-works .fv-works__all {
  color: var(--color-white, #fff);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
/* 枠の上の線は枠に固定し、行は下の線だけを持つ（流したとき、つなぎ目で線が2本にならないように） */
.fv-variant-works .fv-works__view { overflow: hidden; border-top: 1px solid #3A3838; }
.fv-variant-works .fv-works__list { margin: 0; padding: 0; list-style: none; }
.fv-variant-works .fv-works__item { border-bottom: 1px solid #3A3838; }
.fv-variant-works .fv-works__link { display: block; padding: 16px 0; color: var(--color-white, #fff); text-decoration: none; }
.fv-variant-works a.fv-works__link:hover .fv-works__name { text-decoration: underline; text-underline-offset: 4px; }
.fv-variant-works a.fv-works__link:focus-visible { outline: 2px solid var(--color-white, #fff); outline-offset: 2px; }
.fv-variant-works .fv-works__client { display: block; margin: 0; color: #B3B3B3; font-size: 14px; line-height: 1.5; }
.fv-variant-works .fv-works__name { display: block; margin: 4px 0 0; font-weight: 700; font-size: 18px; line-height: 1.4; }
.fv-variant-works .fv-works__nw { white-space: nowrap; }
.fv-variant-works .fv-works__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 4px 0 0; line-height: 1.3; }
.fv-variant-works .fv-works__num b {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.fv-variant-works .fv-works__unit { font-weight: 700; font-size: 16px; }

/* 2回目の6件は流すときだけ使う。流さない幅と、動きを減らす設定の人には出さない */
.fv-variant-works .fv-works__list--copy { display: none; }

/* 幅 768〜1023px：実績は h1 の下に縦に置き、FV の高さを中身に合わせて伸ばす（方向6 と同じ）。
   --clear は英字3行と赤い線の下端＋40px。この高さぶん、h1 と実績の上をあける */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .fv-variant-works .site-main__kv {
    --clear: calc(18svh + clamp(48px, 9vw, 140px) * 3.3 + 24px + 8px + 40px);
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .fv-variant-works .site-main__kv .wrapper { position: relative; padding-top: var(--clear); }
}
@media screen and (min-width: 768px) {
  .fv-variant-works .fv-works { margin: 40px 8vw 0; }
}

/* 768px 未満（スマホ）：FV に実績の一覧を出さない（2026-10-07 本人決定。理由：スクロールすればすぐ実績一覧に行けるため）。
   英字・赤い線・h1 の位置は本番のまま。候補3の h1 だけは長いので句の切れ目で折り返す */
@media screen and (max-width: 767px) {
  .fv-variant-works .fv-works { display: none; }
  .fv-variant-works .site-main__kv__title .site-main__kv__sub--copy { white-space: normal; }
}

/* 1024px 以上：右半分の実績の一覧。左は赤い線の右端（62%）から 48px あけ、右は英字の左と同じ 8vw。
   上はヘッダーの下 48px（ヘッダーの下端 100px + 48px = 148px）、下は NEWS の帯の上 40px（帯の高さ 66px + 40px = 106px）。
   6件で枠の高さを埋めるよう、行の高さの下限を枠の 1/6 にする（流したとき、つなぎ目の下に空きが出ないように） */
@media screen and (min-width: 1024px) {
  .fv-variant-works .fv-works {
    position: absolute;
    left: calc(62% + 48px);
    right: 8vw;
    bottom: 106px;
    height: calc(100vh - 148px - 106px);
    height: calc(100svh - 148px - 106px);
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .fv-variant-works .fv-works__view { flex: 1; min-height: 0; }
  .fv-variant-works .fv-works__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
    min-height: calc((100vh - 148px - 106px - 8px - 24px) / 6);
    min-height: calc((100svh - 148px - 106px - 8px - 24px) / 6);
  }
}

/* ゆっくり上に流す動き（1024px 以上・動きを減らす設定でない人だけ）。同じ6件を2回並べ、1周 40 秒で半分（＝6件ぶん）上げて繰り返す。
   マウスを載せたとき・キーボードで中に入ったときは止める。JS は使わない */
@media screen and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .fv-variant-works .fv-works__list--copy { display: block; }
  .fv-variant-works .fv-works__track { animation: fvWorksMarquee 40s linear infinite; }
  .fv-variant-works .fv-works__view:hover .fv-works__track,
  .fv-variant-works .fv-works__view:focus-within .fv-works__track { animation-play-state: paused; }
  /* 流れる一覧の上端と下端 32px を、FV の背景の黒へぼかす（2026-10-07。行が途中で切れて見えていたため）。
     枠の上の線を残すため、mask ではなく枠の内側に黒のグラデーションを重ねる。押す操作は下の行に通す */
  .fv-variant-works .fv-works__view { position: relative; }
  .fv-variant-works .fv-works__view::before,
  .fv-variant-works .fv-works__view::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 32px;
    pointer-events: none;
  }
  .fv-variant-works .fv-works__view::before { top: 0; background: linear-gradient(#161616, rgba(22, 22, 22, 0)); }
  .fv-variant-works .fv-works__view::after { bottom: 0; background: linear-gradient(rgba(22, 22, 22, 0), #161616); }
}
@keyframes fvWorksMarquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}



/* SCROLL の目印（案B。2026-10-07 本人決定）：768px 以上の実績の版では、右端の縦書き SCROLL を隠し、
   NEWS の帯の右隣（帯の右端 600px から 48px）に、下向きの矢印＋横書きの SCROLL を置く。帯と上下の中心をそろえる。
   出現は本番の縦書き SCROLL と同じ（幕が上がって 2.4 秒後にフェード）。矢印は 6px 上下に動く。動きを減らす設定では止める。
   768px 未満は一覧が無いので本番の縦書きのまま */
.fv-variant-works .fv-scroll-b { display: none; }
@media screen and (min-width: 768px) {
  .fv-variant-works .home-fv__scroll { display: none; }
  .fv-variant-works .fv-scroll-b {
    position: absolute;
    left: 648px;
    bottom: 0;
    height: 80px; /* 768〜1023px の NEWS の帯の高さ */
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.2em;
    color: #B3B3B3;
    opacity: 0;
  }
  .fv-variant-works .fv-scroll-b svg { display: block; width: 13px; height: 24px; stroke: #fff; stroke-width: 1; fill: none; }
  #js-home.cancel-overflow .fv-variant-works .fv-scroll-b,
  .fv-variant-works#js-home.cancel-overflow .fv-scroll-b { animation: homeFvFade 0.8s ease 2.4s forwards; }
  .fv-variant-works#js-home.cancel-overflow .fv-scroll-b svg { animation: fvScrollBob 1.8s ease-in-out 2.4s infinite; }
  @keyframes fvScrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
}
@media screen and (min-width: 1024px) {
  .fv-variant-works .fv-scroll-b { height: 66px; } /* PC の NEWS の帯の高さ */
}
@media (prefers-reduced-motion: reduce) {
  .fv-variant-works .fv-scroll-b, .fv-variant-works#js-home.cancel-overflow .fv-scroll-b { opacity: 1; animation: none; }
  .fv-variant-works#js-home.cancel-overflow .fv-scroll-b svg { animation: none; }
}