/* ---------------------------------------------------------
   LPの導入企業ロゴの帯を、トップ（custom-global.css の .top .logos）と同じ見た目にする
   apply_lp_top_logos.py が各LPに読み込ませる。値はトップと同じ（タイル200px・間隔32px・2段目は半タイルずらし）
   --------------------------------------------------------- */
@keyframes lpTopLogosScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lp-logos.lp-toplogos { position: relative; padding: 24px 0; overflow: hidden; background: #191919; --tile-w: 200px; --tile-gap: 32px; }
/* LP側の .lp-logos が左右の端にかけているフェード（mask-image）はトップに無いので消す */
.lp-logos.lp-toplogos::before, .lp-logos.lp-toplogos::after { display: none; }
.lp-logos.lp-toplogos { -webkit-mask-image: none; mask-image: none; }
.lp-toplogos .container { margin: 0; padding: 0 16px; max-width: none; overflow: visible; }
.lp-toplogos .logos__slider { display: flex; width: max-content; animation: lpTopLogosScroll 28.5s linear infinite; will-change: transform; backface-visibility: hidden; }
/* 下段は上段と別の会社（社数が1つ少ない）。トップと同じく段ごとに秒数を変えて速さを揃える */
.lp-toplogos .logos__slider--b { animation-duration: 27s; }   /* 28.5:27 = 19:18（社数の比とぴったり同じ） */
.lp-toplogos .logos__slider--b { margin-left: calc((var(--tile-w) + var(--tile-gap)) / -2); margin-top: 16px; }
.lp-toplogos .logos__slider__item {
  min-width: var(--tile-w); width: var(--tile-w); height: 64px; margin-right: var(--tile-gap);
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff; border-radius: 4px;
}
.lp-toplogos .logos__slider__item > img { width: auto; height: auto; max-width: 120px; max-height: 44px; }

/* ---------------------------------------------------------
   ファーストビューにロゴ帯まで必ず入れる（PC幅）。2026-11-03 水島「ロゴちゃんとファーストビューに入るようにして。全LPね」
   MVの高さ＝画面の高さ − ロゴ帯（上下余白16px＋タイル2段＝176px）。
   画面の高さが低いときは、見出し・本文・業種グリッドを段階的に詰めて、MVの中身がはみ出さないようにする
   （lp-hero.css / lp-fv-logos.css の旧ロゴ帯前提の高さ指定はここで上書きする）
   --------------------------------------------------------- */
@media (min-width: 769px) {
  .lp-logos.lp-toplogos { padding: 16px 0; border: 0; margin: 0; }
  /* lp-hero.css の「.lp-mv:has(.lp-hero-items) + .lp-logos」（上18px）より強く指定して、ロゴ帯を176pxにそろえる */
  .lp-mv:has(.lp-hero-items) + .lp-logos.lp-toplogos { padding: 16px 0 !important; }
  .lp-mv:has(+ .lp-toplogos),
  .kk-mvb:has(+ .lp-toplogos) {
    box-sizing: border-box;
    height: calc(100vh - 176px) !important;
    min-height: 0 !important;
  }
  /* 業種グリッドのあるLP：上はヘッダー（72px）の下から、中身を上下中央に */
  .lp-mv:has(.lp-hero-items) { padding: 72px 0 0 !important; display: flex; align-items: center; }
  .lp-mv:has(.lp-hero-items) > * { width: 100%; }
  /* 新聞LP（kk-mvb）：固定の高さ・下余白をやめ、コピーを上下中央に */
  .kk-mvb:has(+ .lp-toplogos) { padding: 72px 0 0; display: flex; align-items: center; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__inner { width: 100%; padding-top: 0; }
}
@media (min-width: 769px) and (max-height: 860px) {
  .lp-mv:has(.lp-hero-items) .lp-mv__title { font-size: 26px; }
  .lp-mv:has(.lp-hero-items) .lp-mv__text { font-size: 18px; }
  .lp-mv:has(.lp-hero-items) .lp-mv__buttons { margin-top: 16px; }
  .lp-mv:has(.lp-hero-items) .lp-hero-items { margin-top: 14px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__title { font-size: 34px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__eye { margin-bottom: 8px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__rule { margin: 14px 0 12px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__btns { margin-top: 18px; }
}
@media (min-width: 769px) and (max-height: 760px) {
  .lp-mv:has(.lp-hero-items) .lp-mv__title { font-size: 24px; }
  .lp-mv:has(.lp-hero-items) .lp-mv__text { font-size: 16px; line-height: 1.7; }
  .lp-mv:has(.lp-hero-items) .lp-mv__buttons { margin-top: 12px; }
  .lp-mv:has(.lp-hero-items) .lp-items__item { height: 52px; min-height: 0; padding-top: 6px; padding-bottom: 6px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__title { font-size: 30px; }
  .kk-mvb:has(+ .lp-toplogos) .kk-mvb__text { font-size: 14px; line-height: 1.7; }
}

@media screen and (max-width: 767px) {
  .lp-logos.lp-toplogos { padding: 24px 0; --tile-gap: 26px; }
  .lp-toplogos .container { max-width: 80vw; margin-left: 0; }
  .lp-toplogos .logos__slider__item { height: 72px; }
  .lp-toplogos .logos__slider__item > img { max-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-toplogos .logos__slider { animation: none; }
}