/* =========================================================
   メインビジュアル〜NEXT WAVE〜写真（Figma: 01_top_修正 の上から 7242px）
   位置はすべて Figma のフレーム左上からの座標（px）を --u で換算している。
   ========================================================= */
.hero {
  position: relative;
  height: calc(7242 * var(--u));
  overflow: hidden;
  background: var(--color-white);
}

/* 帯の下（Figma: ishikabe。y=7056 から）。下の THANKS MESSAGE の石壁の柄と継ぎ目なくつながるよう、
   柄の大きさは --uc（1440px で止まる単位）で決め、下端にそろえて並べる */
.hero::before {
  content: "";
  position: absolute;
  /* 帯の上端から敷く。帯の上はモノグラム（.hero__moyo）が覆い、帯の真ん中から下だけ石壁が見える */
  top: calc(6877 * var(--u));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: var(--color-white) url("../../img/deco/stone.svg") left bottom / calc(621.6 * var(--uc)) calc(551.84 * var(--uc));
}

/* ---------- 波（Figma: back / 10枚） ---------- */
.hero__waves {
  position: absolute;
  top: calc(474 * var(--u));
  left: calc(-834 * var(--u));
  z-index: 1;
  width: calc(3107 * var(--u));
}

/* 1枚ごとの波。上端の波形（img）の下に同じ色の面を伸ばしておき、
   ずらして動かしても下の層とのすき間が出ないようにしている */
.wave {
  --shift: 0; /* ローディング用の縦ずれ（デザイン px）。JS が動かす */
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--i) * 237 * var(--u));
  translate: 0 calc(var(--shift) * var(--u));
}

.wave picture,
.wave img {
  display: block;
  width: 100%;
}

.wave img {
  height: auto;
}

.wave::after {
  content: "";
  position: absolute;
  top: calc(262 * var(--u)); /* 波の下端（268〜307px）より少し上から塗る */
  left: 0;
  width: 100%;
  height: calc(2400 * var(--u));
  background: var(--wave-color);
}

/* 塗り足しはローディングで波を動かしている間だけ使う。
   波が収まったら消して、一番下の波の下にある柄を見せる */
body.is-settled .wave::after {
  content: none;
}

/* 波が収まったあとも、一番下以外の波には、次の波と重なるところまで短い塗り足しを残す。
   波の下端（268〜307）と次の波の上端（237〜276）の重なりが狭く、波が左右に揺れると白いすき間が出るため */
body.is-settled .wave:not(:last-child)::after {
  content: "";
  height: calc(60 * var(--u));
}

/* ---------- 浮遊する図形（Figma: zukei） ---------- */
.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.shape {
  position: absolute;
  will-change: transform;
}

/* SP 用の図形も DOM に置き、画面幅をまたぐときは CSS だけで表示を切り替える */
.shape--sp {
  display: none;
}

.shape img {
  width: 100%;
  height: 100%;
}

/* ---------- 10周年ロゴ（Figma: 10周年ロゴ） ---------- */
.hero__logo {
  position: absolute;
  top: calc(190 * var(--u));
  left: calc(492 * var(--u));
  z-index: 4;
  width: calc(455 * var(--u));
  margin: 0;
}

.hero__logo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- コンセプトコピー（Figma: nextwave > Frame） ---------- */
.hero__message {
  position: absolute;
  top: calc(1480 * var(--u));
  left: 50%;
  z-index: 4;
  width: calc(900 * var(--u));
  margin: 0;
  translate: -50% 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: 0.1em;
  text-align: center;
}

.hero__message span {
  display: block;
  height: calc(86 * var(--u));
  line-height: calc(34 * var(--u));
}

/* ---------- NEXT WAVE（Figma: nextwave > _デザイン） ---------- */
.hero__nextwave {
  position: absolute;
  top: calc(2436 * var(--u));
  left: calc(320 * var(--u));
  z-index: 4;
  width: calc(800 * var(--u));
  margin: 0;
}

.hero__nextwave svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- 写真のまとまり（Figma: 写真107枚＋薄い柄） ---------- */
.hero__collage {
  --cu: var(--u);
  position: absolute;
  top: calc(2719 * var(--u));
  left: 0;
  width: calc(1440 * var(--cu));
  height: calc(4564 * var(--cu));
}

/* 柄（モノグラム）は写真より後ろに置く。上端は最後の波の下に隠れ、下端は帯の表のリボンの真ん中で、リボンの傾きに沿って切る
   （--moyo-seam：まとまりの上端からリボンの中心までの距離、--moyo-tilt：リボンの傾き tan / 2）。
   切った線より下は、.hero::before の石壁が見える。画像（2 倍の解像度）は枠いっぱいに縦横比を保って広げ、
   パララックスで上下に動いても下端にすき間が出ないよう、枠より少し長くする */
.hero__moyo {
  --moyo-width: max(calc(1717 * var(--cu)), 100vw);
  --moyo-seam: calc(4328 * var(--cu));
  --moyo-tilt: 0.049;
  position: absolute;
  top: 0;
  left: calc(50% - 1.5 * var(--cu));
  z-index: 0;
  width: var(--moyo-width);
  height: calc(var(--moyo-seam) + var(--moyo-width) * var(--moyo-tilt));
  overflow: hidden;
  translate: -50% 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(var(--moyo-seam) - var(--moyo-width) * var(--moyo-tilt)),
    0 calc(var(--moyo-seam) + var(--moyo-width) * var(--moyo-tilt))
  );
}

.hero__moyo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 80 * var(--cu));
  object-fit: cover;
  object-position: center top;
}

/* 写真 1 枚は 3 重の入れ物にしている。動きどうしがぶつからないよう、動かす要素を分けるため（hero.js の setupCollage）
   - .collage-photo：位置と大きさ（Figma の座標）。スクロールに合わせたパララックスで上下に動く
   - .collage-photo__inner：写真の枠。画面に入ったときに飛んでくる
   - img：大きい写真だけ、枠の中でゆっくり拡大・縮小する */
.collage-photo {
  position: absolute;
  top: calc(var(--y) * var(--cu));
  left: calc(var(--x) * var(--cu));
  z-index: 2;
  width: calc(var(--w) * var(--cu));
  height: calc(var(--h) * var(--cu));
}

.collage-photo__inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.collage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}