/* 04 対応業種：黒・高さ580vh（粒子が動くとき）。中身は画面に固定し、粒子が 化粧品→美容室→歯科→製造→事務→MSLロゴ と形を変え、
   集まりきるたびに同じ位置・大きさでカラーの絵（最後はロゴ）が浮かび上がる。1業種＝画面約0.8枚分で、その6割強は絵を見せたまま。
   今の形に当たる行を強調する（js/particles/stage.js が .is-active / .is-final を付ける） */
.industries {
  height: 580vh;
  padding: 0;
}
.industries-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-content);
  height: 100vh;
  height: 100svh;
}
.industries .industries-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: clamp(72px, 10vh, 96px);
  padding-bottom: clamp(32px, 6vh, 56px);
}

/* 粒子の形が描かれる場所（中は空。粒子はこの箱の大きさに合わせる） */
.industries-visual {
  position: relative;
  height: min(66vh, 560px);
}
/* 粒子が形を描く範囲（下の説明文と重ならないように、その上だけ） */
.industries-shape {
  position: absolute;
  inset: 0 0 48px 0;
}
.industries-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}
.industries-num {
  font-family: var(--font-latin);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.industries-title { font-size: var(--fs-h2); }
.industries-title::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 18px;
  background: var(--gold);
  transition: width var(--dur) var(--ease-out);
}
.industries-lead {
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--on-dark-muted);
}

/* 業種の一覧（罫線で区切る。カード型にしない） */
.industries-list {
  margin-top: clamp(20px, 3.5vh, 36px);
  border-top: 1px solid var(--line-dark);
}
.industries-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: clamp(10px, 1.7vh, 16px) 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease-out);
}
.industries-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--dur) var(--ease-out);
}
.industries-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease-out);
}
.industries-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}
.industries-desc {
  font-size: var(--fs-small);
  text-align: right;
}

.industries-item.is-active { color: var(--on-dark); }
.industries-item.is-active::after { width: 100%; }
.industries-item.is-active .industries-icon { opacity: 1; }
.industries-item.is-active .industries-desc { color: var(--gold-light); }

/* 最後（MSLロゴ）：全部の行が明るくなり、見出しの下に金の線 */
.industries.is-final .industries-item { color: var(--on-dark); }
.industries.is-final .industries-icon { opacity: 1; }
.industries.is-final .industries-title::after { width: 96px; }

/* ---- スマホ：形を上、一覧を下。一覧は業種名だけ（説明は形の下に1行で出す） ---- */
@media (max-width: 860px) {
  .industries .industries-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 68px;
    padding-bottom: 20px;
  }
  .industries-visual {
    flex: 1 1 auto;
    height: auto;
    min-height: 150px;
  }
  .industries-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem); margin-top: 6px; }
  .industries-title::after { margin-top: 10px; }
  .industries-lead { display: none; }
  .industries-list { margin-top: 12px; }
  .industries-item { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 9px 0; }
  .industries-icon { width: 22px; height: 22px; }
  .industries-name { font-size: 1rem; }
  .industries-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- 背の低い画面（375×667 の Safari・高さ650px前後のノートPC）：一覧の最後の行が画面の外に切れないように詰める ---- */
@media (max-height: 700px) {
  .industries .industries-inner { padding-top: 60px; padding-bottom: 16px; }
  .industries-title { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.125rem); }
  .industries-title::after { margin-top: 10px; }
  .industries-lead { display: none; }
  .industries-list { margin-top: 12px; }
  .industries-item { padding: 7px 0; }
  .industries-visual { height: min(62vh, 520px); }
}
@media (max-width: 860px) {
  .industries-visual { flex: 1 1 0; min-height: 0; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .industries .industries-inner { gap: 6px; }
  .industries-title { font-size: 1.375rem; margin-top: 2px; }
}

/* ---- 粒子が動かないとき（動きを減らす設定・WebGL なし・JS が動かない）：固定をやめて、一覧を全部そのまま読ませる。
   長い高さ（430vh）と固定は .stage-motion のときだけ ---- */
html:not(.stage-motion) .industries {
  height: auto;
  padding: var(--section-pad) 0;
}
html:not(.stage-motion) .industries-sticky {
  position: relative;
  height: auto;
}
html:not(.stage-motion) .industries .industries-inner {
  display: block;
  height: auto;
  max-width: calc(720px + var(--gutter) * 2);
  padding-top: 0;
  padding-bottom: 0;
}
html:not(.stage-motion) .industries-visual { display: none; }
html:not(.stage-motion) .industries-lead { display: block; }
html:not(.stage-motion) .industries-item {
  color: var(--on-dark);
  grid-template-columns: 24px auto minmax(0, 1fr);
}
html:not(.stage-motion) .industries-item::after { display: none; }
html:not(.stage-motion) .industries-icon { opacity: 1; }
html:not(.stage-motion) .industries-desc {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---- 各形の絵と最後のロゴ：粒が集まりきったら、くっきりした画像（js/particles/stage.js が .industries-shape に差し込む）が
   同じ位置・大きさで浮かび上がる。見た目の共通部分は 01_hero.css の .stage-logo（大きさは stage.js が箱を測って入れる） ---- */