@charset "utf-8";

/* ---------------------------------------------------------------------------
   Redesign HR Forum 2026 — 骨格
   ファーストビュー、固定ヘッダー、そして「水面の板が左右にマスクされて
   地の色が見えてくる」スクロール演出。
--------------------------------------------------------------------------- */

/*
  水面はページ全体に敷かない。Figma では区間ごとに別々の背景が置かれていて、
  水面が出るのは (1) ファーストビュー (2) その下のロゴ帯〜KEYNOTE (3) 申込フォーム
  (4) FAQ の4か所。(1) と (2) は別々の画像で、藤色へのぼかしもそれぞれの高さで
  掛かる。まとめて1枚にすると FV が青く残ってしまう。

  スクロールにつれて両方の板の左右が 80px ずつ詰まり、地の色が見えてくる
  （デザイナー指示「最終的に左右80pxずつくらいマスクされる」）。
*/
.hero {
  position: relative;
  isolation: isolate;
}

/*
  .hero__rest を位置決めの基準にしておかないと、その背景が .hero 全体に広がって
  ファーストビューの上に乗ってしまう。
*/
.hero__rest {
  position: relative;
  isolation: isolate;
}

.fv::before,
.fv::after,
.hero__rest::before,
.hero__rest::after {
  content: "";
  position: absolute;
  inset: 0 var(--hero-inset);
  z-index: 0;
  border-radius: var(--hero-radius);
  pointer-events: none;
}

/* ファーストビュー: 1875x1219 の画像を -188,-138 に置いた見え方。 */
.fv::before {
  background: url("../img/hero-water.webp?v=47f41faf") 43.2% 43.3% / 130.2% auto no-repeat, var(--lavender);
}

/* その下: 2223x1445 を -362,900 に置き直す。空の青がもう一度出る。 */
.hero__rest::before {
  background: url("../img/hero-water.webp?v=47f41faf") 46% top / 154.4% auto no-repeat, var(--lavender);
}

.fv::after {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--hero-veil));
}

/* 設計では 1446px かけて藤色へ送る。こちらは節が少し短いので早めに詰める。 */
.hero__rest::after {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, var(--hero-veil) 100%);
}

.fv > *,
.hero__rest > * {
  position: relative;
  z-index: 1;
}

/* ---- ファーストビュー ----------------------------------------------------- */

.fv {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(100svh, 62.5vw);
  overflow: hidden;
  isolation: isolate;
}

.fv__compass {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fv__compass svg {
  width: 100%;
  height: 100%;
}

/* 目盛り盤はポインタの方角へ向く（compass.js が --dial を書き換える）。 */
#compass-dial {
  transform: rotate(var(--dial, 0deg));
  transition: transform 1.1s var(--ease);
}

.fv__inner {
  position: relative;
  width: min(100% - 2 * var(--gutter), 900px);
  text-align: center;
  /* 設計では見出しの塊が中心よりやや下（本文の中心 y=512）に置かれている。 */
  translate: 0 clamp(0px, 4.24vw, 61px);
}

.fv__kicker {
  font-size: 16px;
  font-weight: 800;
}

/* Figma では1行。狭い画面でも折らず、幅に合わせて詰める。 */
.fv__title {
  margin-top: 16px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: min(72px, 8.2vw);
  font-weight: 700;
  line-height: 1.22;
  white-space: nowrap;
}

.fv__host {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--note);
}

.fv__sub {
  margin-top: 16px;
  font-size: clamp(18px, 1.67vw, 24px);
  font-weight: 700;
  line-height: 1.4;
}

.fv__sub .en {
  font-weight: 700;
}

.fv__cta {
  margin-top: 40px;
}

/* 日付は左下に置く。 */
.fv__when {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 2.43vw, 35px);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(28px, 3.31vw, 47.64px);
  font-weight: 700;
  line-height: 1.2;
}

.fv__when b {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.672em;
  font-weight: 700;
}

/* ---- 固定ヘッダー --------------------------------------------------------- */

/* ファーストビューの上ではページ内に溶けており、離れると帯になる。 */
.hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--gutter);
  transition: background-color 0.35s var(--ease), padding 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.hud.is-stuck {
  align-items: center;
  padding-block: 14px;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(15 9 21 / 8%);
}

.hud__nav {
  display: grid;
  gap: 10px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.hud.is-stuck .hud__nav {
  grid-auto-flow: column;
  gap: clamp(14px, 1.6vw, 28px);
  font-size: 14px;
}

.hud__nav a {
  position: relative;
  line-height: 1.25;
}

.hud__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: currentcolor;
  transition: right 0.3s var(--ease);
}

.hud__nav a:hover::after {
  right: 0;
}

.hud__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.hud__burger span {
  display: block;
  position: relative;
  width: 22px;
  height: 1.5px;
  background: var(--ink-plain);
  transition: background-color 0.2s var(--ease);
}

.hud__burger span::before,
.hud__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--ink-plain);
  transition: transform 0.28s var(--ease);
}

.hud__burger span::before {
  top: -7px;
}

.hud__burger span::after {
  top: 7px;
}

.hud[data-menu="open"] .hud__burger span {
  background: transparent;
}

.hud[data-menu="open"] .hud__burger span::before {
  transform: translateY(7px) rotate(45deg);
}

.hud[data-menu="open"] .hud__burger span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- スマートフォンの引き出しメニュー ------------------------------------- */

/* 引き出しの下に敷く幕。これがないと裏のボタンが引き出しの縁から覗く。 */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgb(15 9 21 / 32%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.scrim[data-open="true"] {
  opacity: 1;
}

.drawer {
  position: fixed;
  inset: var(--hud) 0 auto;
  z-index: 39;
  display: grid;
  gap: 4px;
  padding: 24px var(--gutter) 32px;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px rgb(15 9 21 / 10%);
  transform: translateY(-120%);
  transition: transform 0.4s var(--ease), visibility 0.4s;
  visibility: hidden;
}

.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
}

.drawer a {
  padding: 12px 4px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--hairline);
}

.drawer .cta {
  margin-top: 24px;
  min-height: 60px;
  border-bottom: 0;
}

/* ---- 帯 ------------------------------------------------------------------- */

.band {
  position: relative;
}

.band__inner {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

/*
  申込フォームと FAQ。濃い藤色の地に水面を重ね、上端は地の色から溶かし、
  下へいくほど白から淡い藤色へ送る（Figma の Rectangle 4 と Rectangle 3）。
*/
.deep {
  position: relative;
  isolation: isolate;
  /* 設計では ENTRY も FAQ も帯の上端から 120px 下に見出しが来る。 */
  padding-block: clamp(64px, 8.33vw, 120px);
  background: var(--deep);
}

/* 申込は下の余白が広い（帯 11272..12684、フォームの下に注記が入る）。 */
.entry {
  padding-bottom: clamp(80px, 11.1vw, 160px);
}

.deep__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/*
  Figma は 1921x1249 の画像を 1440 幅の枠に x-211 で置いている。cover に任せると
  節の高さぶん拡大されて、夕景の淡い帯ではなく濃い水面が出てしまう。
*/
/* Figma は 1921x1249 の画像を節の上端から 163px 下に置いている。 */
.deep__bg img {
  position: absolute;
  left: calc(-211 / 1440 * 100%);
  top: calc(163 / 1440 * 100vw);
  width: calc(1921 / 1440 * 100%);
  max-width: none;
  height: auto;
  /*
    上端 376px は地の色へ溶ける。Figma には黒20%の重ねも入っているが、
    4か所すべてに効かせると水面が濃くなりすぎるので入れていない。
  */
  mask-image: linear-gradient(to bottom, transparent 0, #000 367px);
}

/*
  申込は FanGrowth のフォームぶん節が設計より高い。設計では写真の下端が帯の
  下端とそろうので、上からの 163px ではなく下端にそろえる。
*/
.entry .deep__bg img {
  top: auto;
  bottom: 0;
}

.deep__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, #e3e0f1 100%);
}

/*
  Figma では紗（1412px）が FAQ の帯（980px）からはみ出して切られている。
  帯の高さで割ると下端が藤色で埋まり、水面が消えてしまう。
*/
.faq .deep__fade {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0, #e3e0f1 calc(1412 / 1440 * 100vw));
}

.deep > *:not(.deep__bg) {
  position: relative;
  z-index: 1;
}

@media (width <= 900px) {
  .hud__nav {
    display: none;
  }

  .hud__burger {
    display: flex;
    order: 2;
  }

  .hud {
    align-items: center;
    padding-block: 14px;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(10px);
  }

  .fv {
    min-height: 100svh;
  }

  .fv__when {
    font-size: 26px;
  }
}

@media (width > 900px) {
  .drawer {
    display: none;
  }
}