/* ==========================================================================
   Home industry block (業種別ブロック) - js/home-hero.js 専用
   style.css は触らない。色は style.css の変数をそのまま使う。
   ========================================================================== */

/* --- 切替チップ ---------------------------------------------------------
   ヒーローの中・中央上に小さく置く。選択中だけ薄い色、他は文字だけにして主張を抑える */

.hv-chips-wrap {
  margin: 26px 0 0; /* ヒーロー文言のすぐ下 */
}

.hv-chips {
  display: flex;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto; /* 中央寄せ。入りきらないモバイルでは左端から横スクロール */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hv-chips::-webkit-scrollbar {
  display: none;
}

.hv-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
  transition: background 0.15s ease, color 0.15s ease;
}

.hv-chip:hover {
  color: var(--color-primary-dark);
}

.hv-chip[aria-current="page"] {
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  font-weight: 800;
}

.hv-chip:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* --- 業種ブロック本体(「MiriCanvasとは」セクションの中) -------------------- */

.hv-block {
  --hv-h: 120px;
  max-width: 960px;
  margin: 28px auto 0; /* チップのすぐ下。枠・背景なしでページに溶け込ませる */
  text-align: center;
  animation: hv-fade 0.25s ease;
}

.hv-block[data-tall="1"] {
  --hv-h: 168px;
}

.hv-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-bg-tint);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hv-h {
  margin: 10px 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.5;
  text-wrap: balance;
}

.hv-h em {
  font-style: normal;
  color: var(--color-primary-dark);
}

.hv-nb {
  white-space: nowrap; /* 日本語は語中でも折れるので、折れてほしくない語のまとまりを固定 */
}

.hv-sub {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-sub);
  text-wrap: balance;
}

.hv-block:not(.hv-has-variant) .hv-sub {
  display: none;
}

.hv-cta {
  margin-top: 26px; /* 文言+テンプレートの段から離して、独立した1行にする */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.hv-cta .btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
}

.hv-strip {
  margin-top: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hv-track {
  display: flex;
  width: max-content;
  animation: hv-marquee 42s linear infinite;
}

.hv-set {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

.hv-set img {
  height: var(--hv-h);
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}

@keyframes hv-marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes hv-fade {
  from {
    opacity: 0;
  }
}

/* 動きを減らす設定: 自動スクロールをやめて、指でスワイプする一列にする */
@media (prefers-reduced-motion: reduce) {
  .hv-block {
    animation: none;
  }

  .hv-strip {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hv-track {
    animation: none;
  }

  .hv-set img {
    scroll-snap-align: start;
  }

  .hv-set[aria-hidden="true"] {
    display: none;
  }
}

/* --- PC: 左に文言、右に流れるテンプレート ------------------------------- */

@media (min-width: 900px) {
  .hv-block {
    --hv-h: 190px;
  }

  .hv-block[data-tall="1"] {
    --hv-h: 230px;
  }

  .hv-main {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    text-align: left;
  }

  .hv-cta {
    margin-top: 32px;
  }

  .hv-cta .btn {
    flex: 0 0 auto;
    padding: 12px 22px;
    font-size: 14px;
  }

  .hv-strip {
    margin-top: 0;
  }
}