/* ============================================================
  fv.css — トップページ ファーストビュー「AI保健室」
  読み込み: functions.php（is_front_page のときだけ）
  ※ サイト全体に影響しないよう、すべて .fv の中に閉じている
  ※ ヘッダーの高さは theme-2026.css に合わせて --header-h に設定（スマホ64px／PC76px）
============================================================ */

/* ----- トークン（白と墨が土台。水彩色は装飾だけに使い、文字には使わない） ----- */
.fv {
  --paper: #FFFFFF;
  --ink: #24303A;      /* 文字・ボタン（白地で約13:1） */
  --ink-hover: #3A4752;
  --sub: #5A6670;      /* 補足文字（白地で約5.9:1） */
  --mist: #E3EBEE;     /* 淡い青 */
  --blush: #F5EDEA;    /* 淡いピンク */
  --mint: #7FC7AE;     /* 水彩：装飾のみ */
  --sun: #F4C430;      /* 水彩：装飾のみ */
  --coral: #EE8A82;    /* 水彩・手書き：装飾のみ */
  --f-en: "Bodoni Moda", "Times New Roman", serif;
  --f-ja-head: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-label: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --header-h: 64px;   /* ヘッダーの高さ（theme-2026.css：スマホ64px／PC76px） */
  color: var(--ink);
  font-family: var(--f-body);
  line-height: 1.85;
}
.fv h1, .fv p { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.fv a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.fv__svg-defs { position: absolute; width: 0; height: 0; }
.fv-sp-only { display: inline; }
@media (min-width: 768px) { .fv-sp-only { display: none; } }
.fv .tcy { text-combine-upright: all; }

/* ============================
   ファーストビュー
   .fv の高さ＝スクロール演出の長さ
   重なり順：写真1 < 英字2/4 < パネル3 < コピー5
============================ */
.fv {
  position: relative;
  height: 360vh;
  --ph-top: calc(var(--header-h) + 12px);  /* 写真の上端 */
  --ph-side: 20px;                          /* 写真の左右余白 */
  --ph-h: 36svh;                            /* 写真の高さ（SE基準） */
}
.fv__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

/* 写真（3枚切り替え） */
.fv__photo {
  position: absolute;
  z-index: 1;
  top: var(--ph-top);
  left: var(--ph-side);
  right: var(--ph-side);
  height: var(--ph-h);
  margin: 0;
  overflow: hidden;
  background: var(--mist);
}
.fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* 箱の比率が画面幅で変わるため、cover で切り抜く。主役がずれる時は object-position で調整 */
.fv__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.fv__slide.is-active { opacity: 1; }

/* 背景の大きな英字（写真の下端にかける） */
.fv__word {
  position: absolute;
  z-index: 4;
  left: 8px;
  top: calc(var(--ph-top) + var(--ph-h) - 0.62em);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: 17vw;
  line-height: 1;
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
  will-change: transform;
}

/* 水彩のにじみ（CSSで仮作成。本番は水彩スキャン画像でもよい） */
.fv__blob {
  position: absolute;
  z-index: 0;
  border-radius: 46% 54% 40% 60% / 55% 42% 58% 45%;
  filter: url(#fv-wc);
  opacity: 0.9;
  pointer-events: none;
  will-change: transform;
}
.fv__blob--mint  { width: 30vw; aspect-ratio: 1.3; background: var(--mint);  left: -4vw; top: calc(var(--header-h) - 10px); }
.fv__blob--coral { width: 11vw; aspect-ratio: 1.4; background: var(--coral); right: 4vw; top: calc(var(--ph-top) + var(--ph-h) + 8px); }
.fv__blob--sun   { width: 14vw; aspect-ratio: 1.1; background: var(--sun);   right: -3vw; bottom: 6%; }

/* 手書き（本人の字・透過PNG）
   傾きは rotate で指定（transform はJSのフェードで上書きされるため） */
.fv__hand {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: calc(var(--ph-top) + 14px);  /* ヘッダーと重ならないよう写真の内側から */
  width: 52vw;
  height: auto;
  rotate: -5deg;
  pointer-events: none;
}

/* スクロールで散らばるパネル */
.fv__panels {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 1100px;
  pointer-events: none;
}
.fv__panel {
  position: absolute;
  left: 0; top: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  background: var(--mist);
  will-change: transform, opacity;
  transform-origin: center;
}
.fv__panel img { width: 100%; height: 100%; object-fit: cover; }

/* コピー共通 */
.fv__copy { position: absolute; z-index: 5; will-change: opacity, transform; }

/* stage1（スマホ基準）：写真の下に「ロックアップ→見出し→リード→ボタン」を縦に流す */
.fv__intro {
  position: absolute;
  z-index: 5;
  left: 20px; right: 20px;
  top: calc(var(--ph-top) + var(--ph-h) + 10vw + 6px);
  display: grid;
  gap: 14px;
}
.fv__intro .fv__copy { position: static; }
.fv__lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
  font-family: var(--f-ja-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
}
.fv__lockup span { font-family: var(--f-en); font-weight: 500; letter-spacing: 0.08em; }
.fv__title {
  font-family: var(--f-ja-head);
  font-weight: 700;
  font-size: clamp(1.75rem, 5.6vw + 0.5rem, 3rem);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
.fv__copy--1b {
  display: grid;
  gap: 16px;
}
.fv__lead { font-size: 14px; line-height: 1.8; color: var(--ink); }

/* ボタン：墨の四角 */
.fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s;
}
.fv__btn:hover { background: var(--ink-hover); }
.fv__btn i { font-size: 12px; transition: transform 0.2s; }
.fv__btn:hover i { transform: translateX(4px); }
.fv__btn--ghost { color: var(--ink); background: var(--paper); }
.fv__btn--ghost:hover { background: var(--mist); }

/* スライド位置 */
.fv__dots {
  position: absolute;
  z-index: 5;
  left: calc(var(--ph-side) + 14px);
  top: calc(var(--ph-top) + 16px);
  display: flex;
  gap: 6px;
}
/* 写真が明るいので墨色で表示 */
.fv__dots i { width: 18px; height: 2px; background: var(--ink); opacity: 0.25; transition: opacity 0.4s; }
.fv__dots i.is-active { opacity: 1; }

/* stage2：共感 */
.fv__copy--2 {
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(86%, 560px);
  padding: 28px 32px;
  background: var(--paper);
  font-family: var(--f-ja-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw + 0.6rem, 2.1rem);
  line-height: 1.65;
  letter-spacing: 0.04em;
  opacity: 0;
  visibility: hidden;
}

/* stage3：着地＋CTA */
.fv__copy--3 {
  left: 20px; right: 20px;
  bottom: 24px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.fv__message {
  font-family: var(--f-ja-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw + 0.6rem, 3rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.fv__message-sub { font-size: 14px; color: var(--sub); }
.fv__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.fv__copy--3 .fv__btn { padding: 0 18px; font-size: 14px; }

.fv__scroll {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: none;
  margin: 0;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.fv__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 32px;
  margin: 6px auto 0;
  background: var(--ink);
  animation: scrollLine 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 縦に長いスマホ（iPhone 12以降など）は写真を大きく。SE（667px）は36svhのまま */
@media (max-width: 767px) and (min-height: 760px) {
  .fv { --ph-h: 46svh; }
}

/* ---------- 520px〜 ---------- */
@media (min-width: 520px) {
  .fv { --ph-side: 32px; }
  .fv__intro { left: 32px; right: 32px; }
  .fv__lead { font-size: 15px; }
}

/* ---------- 768px〜（タブレット） ---------- */
@media (min-width: 768px) {
  .fv { --ph-top: calc(var(--header-h) + 36px); --ph-side: 6vw; --ph-h: 46svh; }
  .fv__word { left: calc(6vw - 0.08em); font-size: 13vw; }
  /* タブレット縦向き：スマホと同じく上から順に並べる（高さが足りなくても重ならない） */
  .fv__intro { left: 6vw; right: 6vw; top: calc(var(--ph-top) + var(--ph-h) + 8.5vw + 8px); }
  .fv__copy--1b { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
  .fv__lead { max-width: 30em; }
  .fv__hand { right: calc(6vw + 16px); top: calc(var(--header-h) + 14px); width: 34vw; }
  .fv__blob--mint { width: 22vw; left: 1vw; }
  .fv__copy--3 .fv__btn { padding: 0 26px; font-size: 15px; }
}

/* ---------- PC・横長の画面（900px以上で横長、または1100px以上）：見出しを右の余白に縦組み ---------- */
@media (min-width: 1100px), (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .fv__intro { display: contents; }
  .fv__intro .fv__copy { position: absolute; }
  .fv {
    --ph-top: calc(var(--header-h) + 40px);  /* 手書きが写真の上端をまたぐ余白 */
    --ph-side: 18vw;
    --ph-h: calc(100svh - var(--ph-top) - 128px);
  }
  .fv__word {
    left: calc(var(--ph-side) - 0.55em);
    top: calc(var(--ph-top) + var(--ph-h) - 0.68em);
    font-size: min(9vw, 150px);
    letter-spacing: 0.3em;
  }
  .fv__copy--1 {
    left: auto; right: 4.5vw;
    top: var(--ph-top);
    /* 右端にロックアップ、その左に見出し */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
    writing-mode: vertical-rl;
  }
  .fv__lockup { margin: 0; font-size: 16px; }
  /* 縦組みでは「A」「I」を1文字ずつ縦に並べる（正立） */
  .fv__lockup span { text-orientation: upright; letter-spacing: 0; }
  .fv__title { font-size: clamp(1.9rem, 2.3vw, 2.6rem); line-height: 1.6; letter-spacing: 0.12em; }
  .fv__copy--1b { left: var(--ph-side); right: var(--ph-side); bottom: 34px; }
  /* 写真の上端をまたぐ：半分は白い余白に乗せて読みやすく */
  .fv__hand { right: calc(var(--ph-side) + 20px); top: calc(var(--header-h) + 16px); width: min(24vw, 360px); }
  .fv__dots { top: auto; left: auto; right: calc(var(--ph-side) + 16px); bottom: calc(100svh - var(--ph-top) - var(--ph-h) + 16px); }
  .fv__blob--mint  { width: 15vw; left: 8vw; top: calc(var(--header-h) + 2vh); }
  .fv__blob--coral { width: 5vw; right: 12vw; top: 58%; }
  .fv__blob--sun   { width: 7vw; right: auto; left: 11vw; bottom: 9%; }
  .fv__scroll { display: block; left: auto; right: 4.5vw; translate: none; }
}
@media (min-width: 1280px) {
  .fv { --ph-side: 16vw; }
}

/* 動きを減らす設定：スクロール演出なし（1画面で完結） */
.fv.is-reduced { height: 100svh; }
.fv.is-reduced .fv__panels { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fv__slide { transition: none; }
  .fv__scroll::after { animation: none; }
}

/* 900〜1099px の横長画面：縦書きの見出しが入るよう右の余白を広めに */
@media (min-width: 900px) and (max-width: 1099px) and (min-aspect-ratio: 5/4) {
  .fv { --ph-side: 21vw; }
}

/* PCはヘッダーが76px */
@media (min-width: 900px) {
  .fv { --header-h: 76px; }
}