/* =========================================================
   SP メインビジュアル（写真のセクションを含む / y=0〜3977.8）
   数値は幅 375px のデザイン座標。
   写真のまとまり（y=1503〜3914.3）は、600px より広い画面でも画面幅に合わせて広げる（--uwide）。
   その下の帯・石壁・メインビジュアルの下端は、写真のまとまりの下端からの距離で置く。
   ========================================================= */
.hero {
  --collage-bottom: calc(1503 * var(--u) + 2411.3 * var(--uwide));
  height: calc(var(--collage-bottom) + 63.5 * var(--u));
}

.hero::before {
  top: calc(var(--collage-bottom) - 142.5 * var(--u));
  background-color: var(--color-white);
  background-size: calc(276.7 * var(--uc)) calc(245.6 * var(--uc));
}

.hero__waves {
  top: calc(137.9 * var(--u));
  left: calc(-733 * var(--u));
  width: calc(1841 * var(--u));
}

.wave {
  top: calc(var(--i) * 141.2 * var(--u));
}

.wave:nth-child(10) {
  top: calc(1251.1 * var(--u));
  --wave-color: #0d50a2 !important;
}

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

.wave::after {
  top: calc(155.2 * var(--u));
  height: calc(1422 * var(--u));
}

body.is-settled .wave:not(:last-child)::after {
  height: calc(36 * var(--u));
}

.shape--pc {
  display: none;
}

.shape--sp {
  display: block;
}

.hero__logo {
  top: calc(237 * var(--u));
  left: calc(61 * var(--u));
  width: calc(253 * var(--u));
}

.hero__message {
  top: calc(748 * var(--u));
  left: 0;
  width: calc(375 * var(--u));
  translate: none;
  font-size: calc(16 * var(--u));
  letter-spacing: 0.08em;
  line-height: calc(24 * var(--u));
}

.hero__message span {
  height: auto;
  line-height: calc(51 * var(--u));
  white-space: normal;
}

.hero__nextwave {
  top: calc(1372 * var(--u));
  left: calc(37 * var(--u));
  width: calc(301.7 * var(--u));
}

/* 写真のまとまり。2026-10-08 の SP デザインどおりの位置（上端は柄の上端）。
   写真の枠はデザインの 58 枠に、途中の区間の写しを足した 85 枠で、デザインより 683.3 長い（tools/collage-slots.py の SP_REPEAT）。
   大きさは --uwide（600px で止めない）で決め、画面の中央にそろえる（hero.js の cu() と同じ単位） */
.hero__collage {
  --cu: var(--uwide);
  top: calc(1503 * var(--u));
  left: calc(187.5 * var(--u) - 187.5 * var(--cu));
  width: calc(375 * var(--cu));
  height: calc(2411.3 * var(--cu));
}

/* 柄はデザインでは幅 812（x=-219）。写真の枠を増やした分だけ縦に長いため、縦横比を保ったまま高さに合わせて大きく表示する。
   下端は帯の表のリボンの中心（写真のまとまりの下端から 19.7 上。傾き 5.2 度）で切る */
.hero__moyo {
  --moyo-width: max(calc(812 * var(--cu)), 100vw);
  --moyo-seam: calc(var(--collage-bottom) - 19.7 * var(--u) - 1503 * var(--u));
  --moyo-tilt: 0.0455;
  left: 50%;
}

/* SP ではコンセプトコピーが最初の画面に入るため、ローディング中は隠しておく（ローディングの波の上に透けないように） */
body.is-loading .hero__message,
body.is-loading .hero__nextwave {
  visibility: hidden;
}

/* 600px より広い画面では、PC の写真の並び（幅 1440 のデザイン）を画面幅に縮めて使う（hero.js の collageLayout が is-collage-pc を付ける）。
   最初の写真の上端（PC の y=323）を、SP の並びの最初の写真と同じ高さ（1503 + 155）にそろえ、
   最後の写真の下端（PC の y=4261）から下は、SP の並びと同じく 144 あけて帯を置く */
.hero.is-collage-pc {
  --cpc: calc(var(--uwide) * 375 / 1440);
  --collage-top: calc(1658 * var(--u) - 323 * var(--cpc));
  --collage-bottom: calc(var(--collage-top) + 4261 * var(--cpc) + 144 * var(--u));
}

.is-collage-pc .hero__collage {
  --cu: var(--cpc);
  top: var(--collage-top);
  left: calc(187.5 * var(--u) - 720 * var(--cu));
  width: calc(1440 * var(--cu));
  height: calc(var(--collage-bottom) - var(--collage-top));
}

.is-collage-pc .hero__moyo {
  --moyo-width: max(calc(1717 * var(--cu)), 100vw);
  --moyo-seam: calc(var(--collage-bottom) - 19.7 * var(--u) - var(--collage-top));
}