/* ==========================================================================
   front-page.css — フロントページ: 画像セクション 01–06
   Figma 正本: v2 Desktop 119:976 (1440px) / Mobile 119:1206 (375px)
   画像: theme/assets/images/front-page/{desktop,mobile}/（docs/IMAGE_EXPORT_MANIFEST.md）
   ========================================================================== */

/* Utility
   ========================================================================== */

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Layout
   ========================================================================== */

.front-page {
  width: 100%;
  overflow-x: clip;
}

.image-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 画像はデザイン基準幅 1440px を上限に中央配置（それ以上は拡大しない） */
.image-section picture {
  display: block;
  width: min(100%, 1440px);
  margin-inline: auto;
}

.image-section img {
  display: block;
  width: 100%;
  height: auto;
}

/* Section background
   1440px を超える viewport で画像左右の余白を埋めるためだけの背景。
   色は Figma 由来の書き出し画像（desktop 1x）の左右端の列から取得している。
   画像本体の見た目は変えない。
   ========================================================================== */

.image-section--hero {
  background: #fbf8f0;
}

.image-section--mission {
  background: #fffcf1;
}

/* 左右で色が異なるため、左半分・右半分に別々の縦グラデーションを敷く。
   右端の soft-light の流線（73.5–83.5%）は装飾なので、下地のグラデーションで補間している。
   下端の波は画像から除き ::after で描くため、塗りは下端までグラデーションのまま */
.image-section--business {
  container-type: inline-size;
  background:
    linear-gradient(to bottom, #70c3c9 0%, #72c6ca 22.12%, #8fd3d7 100%) left top / 50% 100% no-repeat,
    linear-gradient(to bottom, #d5dea5 0%, #d5e09f 19.87%, #d5dfa3 25.53%, #dbe19d 100%) right top / 50% 100% no-repeat;
}

/* Business 下端の波（Figma 119:1042 Vector 39、1440×42、#FBFBF5）。
   画面幅に合わせて左右端まで伸ばす。高さは画像と同じ比率（42 / 1440）で縮み、1440px 以上は 42px。
   Desktop 画像（03-business）には波を焼き込んでいない。Mobile 画像は波込みのため表示しない */
.image-section--business::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(2.9167cqw, 42px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none'%3E%3Cpath d='M0 12.8682V42H1440V0.813496C1346.81 14.5423 1083.86 36.1736 777.62 12.8682C471.382 -10.4373 131.608 3.15754 0 12.8682Z' fill='%23FBFBF5'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.image-section--greeting {
  background: #fafcf4;
}

/* Figma s3sub の背景（68.75% から黄色へ）。下部の写真帯は画像端で終わる */
.image-section--message {
  background: linear-gradient(to bottom, #fcfbf4 0%, #fcfbf4 68.75%, #fff0b5 100%);
}

.image-section--company {
  background:
    linear-gradient(to bottom, #ffeeb4 0%, #fdedb3 16.71%, #ece6cf 100%) left top / 50% 100% no-repeat,
    linear-gradient(to bottom, #fdecb7 0%, #ede9c8 58.16%, #e9e5d4 100%) right top / 50% 100% no-repeat;
}

/* Business: 流線（Figma 119:1041 Vector 17 / soft-light）の画像外の部分
   Figma のフレーム幅 1440px で切れて画像に焼き込まれている流線を、1440px を超える viewport で
   画面右端まで延長する。Figma のパスを中心線が x = 1440 を通る点で分割し、接線を合わせたカーブで
   向きを変えてから 10° 右上がりの直線で右へ抜ける（viewport 3920px まで画面右端に届く）。
   ブラウザの soft-light は Figma と計算結果が異なるため、Figma の合成結果に合わせて
   背景色込みで事前合成した透過画像を通常合成で重ねる。はみ出しは .front-page の overflow-x: clip で切る。
   範囲: 1440×936 基準で x 1440–2680 / y 553–811
   ========================================================================== */

/* .image-section img（width: 100% / display: block）より優先させるため section で限定する */
.image-section .business-wave-ext {
  display: none;
  position: absolute;
  top: 59.0812%;   /* 553 / 936 */
  left: 100%;      /* 画像右端 x = 1440 */
  width: 86.1111%; /* 1240 / 1440 */
  height: auto;
  max-width: none;
  pointer-events: none;
}

@media (min-width: 1441px) {
  .image-section .business-wave-ext {
    display: block;
  }
}

/* Image hotspot
   画像内のリンク領域に透明なリンクを重ねる。座標は画像サイズに対する %
   （docs/IMAGE_EXPORT_MANIFEST.md）。Figma に hover 表現が無いため見た目は変えない
   ========================================================================== */

.image-section__frame {
  position: relative;
  width: min(100%, 1440px);
  margin-inline: auto;
}

.image-hotspot {
  position: absolute;
  display: block;
}

/* 03-business「サポキタ公式サイト」テキスト + 矢印ボタン
   Desktop: 1440×936 内 x 868–1092 / y 738–764 */
.image-hotspot--sapokita {
  top: 78.85%;
  left: 60.28%;
  width: 15.56%;
  height: 2.78%;
}

@media (max-width: 767px) {
  .image-section--business::after {
    display: none;
  }

  /* Mobile: 375×904 内 x 125–349 / y 743–769 */
  .image-hotspot--sapokita {
    top: 82.19%;
    left: 33.33%;
    width: 59.73%;
    height: 2.88%;
  }
}