/* hero.css — Sec:hero（ライブHTML/CSS）
   黒帯背景は全幅(width:100%)＝背景のドット地と連結。
   コンテンツ(ADVISER＋リード＋写真3×2)はカード幅(2枚分)のキャンバスに収め中央寄せ。
   デスクトップ(≥960px): コンプ座標を bbox 基準で再現／スマホ(≤959px): 縦積み＋写真3×2。 */

.sec-hero {
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* 舞台＝全幅。高さは黒帯の下端(設計y601.5)までに詰める（従来760→602）。
   これでカード上部の余分な余白が消える。黒帯の絶対位置・サイズは不変（背景ドットのズレなし）。 */
.sec-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 602;
  overflow: hidden;
}

/* 黒帯背景：全幅。書き出し画像（黒#040000＋ファセット＋ドット）。
   y50.7〜601.5 → 上 50.69/602=8.42% / 高 550.85/602=91.50% */
.sec-hero__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.42%;
  height: 91.50%;
  background: url("../../assets/hero-band.png") center / 100% 100% no-repeat;
}

/* コンテンツ層：黒帯の範囲をオーバーレイし、カード幅のキャンバスを中央寄せ */
.sec-hero__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.42%;
  height: 91.50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* キャンバス＝コンテンツのbbox(1619×484)。幅は「カード2枚分」(.container の内容幅)に一致。
   文字は cqw（このキャンバス幅基準）でスケール */
.sec-hero__canvas {
  position: relative;
  width: min(1160px, calc(100% - 2 * clamp(16px, 4vw, 40px)));
  aspect-ratio: 1619 / 484;
  container-type: inline-size;
}

/* 写真グリッド（bbox基準の%配置）。各写真は 243.86/1618.65 = 15.066% 幅 */
.sec-hero__photos { margin: 0; padding: 0; list-style: none; }
.hero-photo {
  position: absolute;
  width: 15.066%;
  margin: 0;
  overflow: hidden;
  padding: 0.6cqw;          /* 写真間の余白（黒帯が透ける） */
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 上段 top=0%、下段 top=(313.2-74.61)/483.76=49.32% */
.hero-photo--r1 { top: 0%; aspect-ratio: 244 / 239; }
.hero-photo--r2 { top: 49.32%; aspect-ratio: 244 / 245; }
.hero-photo--furuta     { left: 54.83%; }
.hero-photo--okumura    { left: 69.89%; }
.hero-photo--nishihashi { left: 84.85%; }
.hero-photo--sakurai    { left: 54.84%; }
.hero-photo--shimizu    { left: 69.91%; }
.hero-photo--otsuka     { left: 84.98%; }

/* introは器を持たず、子(ADVISER/リード)をキャンバスに絶対配置 */
.sec-hero__intro { display: contents; }

/* ADVISER（Helvetica LT Std Bold Condensed 180px 近似）。bbox左端=0%、top=(167-74.61)/483.76=19.10% */
.sec-hero__title {
  position: absolute;
  left: 0;
  top: 19.10%;
  margin: 0;
  color: #ffffff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 11.17cqw;      /* 180.7 / 1618.65 ≈ 11.17cqw */
  line-height: 0.9;
  letter-spacing: -0.03em;
  transform: scaleX(0.85);
  transform-origin: left center;
  white-space: nowrap;
}

/* リード文（新キャッチコピー・Noto Sans 18px / lh1.75）。bbox左端=0%、top=(363-74.61)/483.76=59.62% */
.sec-hero__lead {
  position: absolute;
  left: 0;
  top: 59.62%;
  width: 52%;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: clamp(10px, 1.112cqw, 16px);   /* 18 / 1618.65 ≈ 1.112cqw */
  line-height: 1.75;
  font-weight: 400;
  white-space: nowrap;
}

/* ============================================================
   スマホ/タブレット（≤959px）: 縦積み。
   黒ブロック(ADVISER＋リード) → 写真3×2グリッド
   ============================================================ */
@media (max-width: 959px) {
  .sec-hero__stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .sec-hero__band { display: none; }
  /* ラッパを畳んで intro/photos を stage 直下の縦積みに */
  .sec-hero__content,
  .sec-hero__canvas { display: contents; }

  .sec-hero__intro {
    display: flex;
    flex-direction: column;
    order: 1;
    background: #0c0c0c;
    padding: clamp(28px, 7vw, 56px) clamp(20px, 6vw, 56px);
  }
  .sec-hero__title {
    position: static;
    transform: scaleX(0.9);
    transform-origin: left center;
    font-size: clamp(52px, 17vw, 132px);
    letter-spacing: -0.02em;
  }
  .sec-hero__lead {
    position: static;
    width: auto;
    z-index: auto;
    white-space: normal;
    margin-top: clamp(14px, 4vw, 24px);
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.85;
  }

  .sec-hero__photos {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .hero-photo {
    position: static;
    width: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
  }
}