/* ============================================================
   トップ セクション02: 対応業種 マーキー  (Figma 231:1535)
   白背景 + 背面 INDUSTRIES 文字 + 見出し + 業種タグの横流し。
   JS不要 (CSS @keyframes)。
   ============================================================ */

.nv-industries {
  /* 英字ディスプレイ書体 (Figma実測: Montserrat)。enqueue済み ital,wght@0,600;0,700;1,600;1,700 */
  --nv-latin: 'Montserrat', var(--nv-font);
  background: var(--nv-white);
  padding: 56px 0 100px;
  overflow: hidden;
}

/* ---- ヘッダー ---- */
.nv-industries__head {
  position: relative;
  text-align: center;
}
.nv-industries__bg-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--nv-latin);    /* Montserrat SemiBold Italic (Figma実測) */
  font-style: italic;
  font-weight: 600;
  font-size: clamp(52px, 6.667vw, 96px);  /* Figma 96px @1440 */
  line-height: 1;
  letter-spacing: 0.04em;          /* Figma実測 .04em */
  color: var(--nv-base);           /* #EBF6FF: 白地に極薄の水色 */
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.nv-industries__title {
  position: relative;
  z-index: 1;
  margin: 68px 0 0;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--nv-text);
}
.nv-industries__accent {
  display: block;
  width: 49px;
  height: 5px;
  margin: 22px auto 0;
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a67d4 0%, #4eb1ea 100%) left center / 40px 5px no-repeat;
}
.nv-industries__accent::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4eb1ea;
}

/* ---- マーキー ---- */
.nv-industries__marquee {
  margin-top: 50px;
  overflow: hidden;
}
.nv-industries__track {
  display: flex;
  width: max-content;
  animation: nv-industries-scroll 40s linear infinite;
}
.nv-industries__marquee:hover .nv-industries__track {
  animation-play-state: paused;
}
.nv-industries__group {
  display: flex;
  gap: 32px;
  padding-right: 32px;      /* グループ末尾の間隔 = タグ間隔。2グループで -50% がシームレス */
  margin: 0;
  flex-shrink: 0;
}
.nv-industries__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  background: #f1f2f4;
  border-radius: 8px;
  color: var(--nv-text);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.nv-industries__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #47a6e6;
  flex-shrink: 0;
}

@keyframes nv-industries-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
/* SP (Figma 390x230 実測: 598:4545) */
@media (max-width: 767px) {
  .nv-industries {
    padding: 32px 0 40px;                     /* 上32(→bg-word) / 下40(marquee下) */
  }

  /* ---- ヘッダー (中央寄せ / 390幅) ---- */
  .nv-industries__bg-word {
    font-size: clamp(32px, 10.26vw, 40px);    /* Figma 40px @390 (Montserrat SemiBold Italic) */
    line-height: 1.5;                          /* Figma lh 60 / 40 */
    letter-spacing: 0.04em;                    /* Figma ls 1.60 / 40 */
  }
  .nv-industries__title {
    margin-top: 32px;                          /* bg-word上32 → title上64 */
    font-size: 24px;                           /* Figma 24px (Noto Sans JP Bold) */
    line-height: 1.5;                          /* Figma lh 36 / 24 */
    letter-spacing: 0.04em;                    /* Figma ls 0.96 / 24 */
  }
  .nv-industries__accent {
    width: 31px;                               /* Figma: line24 + gap + dot3 */
    height: 3px;
    margin-top: 8px;                           /* title下100 → accent上108 */
    background: linear-gradient(90deg, #2a67d4 0%, #4eb1ea 100%) left center / 24px 3px no-repeat;
  }
  .nv-industries__accent::after {
    width: 3px;
    height: 3px;
  }

  /* ---- マーキー ---- */
  .nv-industries__marquee {
    margin-top: 40px;                          /* accent下111 → marquee上151 */
  }
  .nv-industries__group {
    gap: 16px;                                 /* Figma: タグ間16 */
    padding-right: 16px;
  }
  .nv-industries__tag {
    height: 39px;                              /* Figma タグ高 39 */
    padding: 0 16px;                           /* 右pad16 / 左は dot+gap で text=30 */
    gap: 6px;                                  /* dot ↔ ラベル */
    border-radius: 4px;                        /* Figma r=4 (PC 8→SP 4) */
    font-size: 15px;                           /* Figma 15px */
    line-height: 22px;                         /* Figma lh 22 */
    letter-spacing: 0.04em;                    /* Figma ls 0.60 / 15 */
  }
  .nv-industries__dot {
    width: 8px;                                /* Figma タグ幅と一致 (16+8+6+text) */
    height: 8px;
  }
}

/* モーションを抑える設定では自動スクロールを停止 */
@media (prefers-reduced-motion: reduce) {
  .nv-industries__track {
    animation: none;
  }
  .nv-industries__marquee {
    overflow-x: auto;
  }
}