/* fullorderjp.html ヒーロー: 液体テキスト演出(黒地・白文字の反転版)
   wfo.html(白地)と同じ仕組み。このページ専用・.foj-fluid-hero 配下にスコープ。
   ナビはサイト既定の黒ベースのまま使う(wfo のような白ナビ化はしない) */

.foj-fluid-hero {
  position: relative;
  width: 100%;
  min-height: 92svh;
  padding: 7rem 2rem 3rem;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.foj-fluid-hero .foj-header {
  display: flex;
  flex-direction: column;
}

.foj-fluid-hero h1 {
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Anton", "Roboto", sans-serif;
  font-weight: 400; /* Antonは単一ウェイト */
  font-size: clamp(5rem, 16vw, 20rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-align: center;
}

/* 日本語のキャッチコピー(白帯に黒抜き = wfo の反転) */
.foj-fluid-hero .foj-ja {
  width: fit-content;
  margin: 1.8rem auto 0;
  background: #ffffff;
  color: #0a0a0a;
  padding: 0.14em 0.38em 0.2em 0.5em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 8rem);
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-align: center;
}

.foj-fluid-hero .foj-sub {
  margin-top: 2.4rem;
  color: #ffffff;
  font-family: "Anton", "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.4vw, 2rem);
  letter-spacing: 0.55em;
  padding-left: 0.55em; /* 字間ぶんの右余りを補正して中央に見せる */
  text-transform: uppercase;
  text-align: center;
}

/* 液体のキャンバス。マウスの軌跡の形に革の表面写真が現れる。
   文字より下に敷く(z-index:0)ので、白い文字は革の上に乗ったまま読める */
#foj-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.foj-fluid-hero .foj-header,
.foj-fluid-hero .foj-ja,
.foj-fluid-hero .foj-sub {
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  .foj-fluid-hero {
    min-height: 60svh;
    padding: 6rem 1rem 2rem;
  }
}