/* ============================================================
   C16 — HERO（§4-1）
   メッセージ + 写真オブジェクト + 16セルの銘板
   ============================================================ */

.hero{
  position:relative;
  min-height:760px;
  min-height:100svh;
  max-height:1010px;
  padding-top:var(--header-h);
  display:grid;
  grid-template-rows:54fr 46fr;
  background:var(--base);
  overflow:hidden;
}

/* ---- 上：メッセージゾーン -------------------------------- */
.hero__msg{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:48px;
  align-items:center;
  padding-block:32px 0;
}

.hero__kicker{
  font-family:var(--en);
  font-size:var(--fs-14);
  font-weight:500;
  letter-spacing:.16em;
  color:var(--ink2);
  margin-bottom:28px;
}

.hero__ttl{
  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(40px, 4.3vw, 60px);
  line-height:1.42;
  letter-spacing:.03em;
  color:var(--navy);
  white-space:nowrap;      /* 1行1文＝組版の意図どおりに折る */
}
.hero__ttl span{ display:block; }

.hero__sub{
  margin-top:28px;
  font-size:var(--fs-17);
  line-height:1.9;
  color:var(--ink);
  max-width:36em;
}

/* ---- 写真オブジェクト（紙面に貼られた物）----------------- */
.hero__photos{
  position:relative;
  justify-self:end;
  width:420px;
  padding-bottom:56px;   /* 副写真のはみ出し分 */
}
.hero__photo-main{
  position:relative;
  width:420px;
  aspect-ratio:3/2;
  overflow:hidden;
  outline:1px solid var(--line-strong);
  outline-offset:-1px;
  background:var(--tint);
}
.hero__photo-main img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero__cap{
  margin-top:10px;
  text-align:right;
  font-family:var(--en);
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--ink2);
}
.hero__photo-sub{
  position:absolute;
  left:-46px; bottom:8px;
  width:172px;
  aspect-ratio:4/5;
  overflow:hidden;
  outline:1px solid var(--line-strong);
  outline-offset:-1px;
  background:var(--surface);
}
.hero__photo-sub img{
  width:100%; height:100%;
  object-fit:cover;
}

/* ---- 下：盤面ゾーン（16の銘板）--------------------------- */
.hero__plate-zone{
  display:flex;
  align-items:flex-end;
  padding-bottom:40px;
}
.plate{
  position:relative;
  width:100%;
  background:var(--surface);
  /* 罫・影・角丸なし。白面のみで浮かす（Speee準拠） */
}
.plate__grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(2,150px);
}

.cell{
  position:relative;
  overflow:hidden;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cell:nth-child(8n){ border-right:0; }
.cell:nth-child(n+9){ border-bottom:0; }

/* 事業写真のゴースト */
.cell__ghost{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
  opacity:.05;
  mix-blend-mode:multiply;
  transition:opacity var(--dur-hover) var(--ease-out);
  pointer-events:none;
}
.cell:hover .cell__ghost{ opacity:.11; }

.cell__i{
  position:relative;
  font-family:var(--en);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--ink2);
}
.cell__foot{ position:relative; }
.cell__name{
  position:relative;
  display:block;
  font-size:var(--fs-14);
  font-weight:500;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color var(--dur-hover) var(--ease-out);
}
.cell:hover .cell__name{ color:var(--navy); }

/* 主力3事業 */
.cell--core .cell__name{ font-weight:700; color:var(--navy); }
.cell--core .cell__bar{
  position:absolute; inset:0 0 auto 0;
  height:3px;
  background:var(--navy);
  transform:scaleX(0);
  transform-origin:left center;
}
/* 銘板の行を揃えるため、タグは右上に浮かせる（事業名の位置を全セル共通に） */
.cell__tag{
  position:absolute;
  right:12px; top:13px;
  font-size:var(--fs-12);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent);
}

/* ---- スクロールキュー ------------------------------------ */
.hero__cue{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%);
  font-family:var(--en);
  font-size:var(--fs-12);
  letter-spacing:.3em;
  color:var(--ink2);
}

/* ---- 圧盤スイープ（ロード演出の帯）----------------------- */
.sweep{
  position:absolute; inset:0 0 auto 0;
  height:140px;
  background:rgba(16,38,63,.06);
  border-top:1px solid rgba(16,38,63,.18);
  pointer-events:none;
  z-index:60;
  opacity:0;
}

/* ============================================================
   JS有効時のみ初期状態を隠す（JS無効／エラーでも静止画は完成）
   ============================================================ */
.js-ready .hero__kicker,
.js-ready .hero__ttl span,
.js-ready .hero__sub,
.js-ready .hero__cap,
.js-ready .hero__cue{ opacity:0; }

.js-ready .hero__photo-main,
.js-ready .hero__photo-sub{ clip-path:inset(100% 0 0 0); }

.js-ready .cell__i,
.js-ready .cell__name,
.js-ready .cell__tag{ opacity:0; }
.js-ready .cell{ border-color:transparent; }