/* fiika_hero-003 */
.fh3 {
  --fh3-bg: #070b13;
  --fh3-fg: #dce6ff;
  position: relative;
  width: 100%;
  background: var(--fh3-bg);
  color: var(--fh3-fg);
  overflow: hidden;
  isolation: isolate;
}
/* 画面全幅：親コンテナの幅を超えてビューポート幅いっぱいに広げる */
.fh3--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
html:has(.fh3--full) { overflow-x: clip; }
.fh3--pop   { --fh3-bg: #fdf5e6; --fh3-fg: #2f3d7a; }
.fh3--light { --fh3-bg: #eceff3; --fh3-fg: #121a2b; }
.fh3--dark  { --fh3-bg: #070b13; --fh3-fg: #dce6ff; }

/* ---- フレーム：標準は PC 16:9（最大で画面の高さ／最小420px）、SP 画面の高さの88%（最小560px）
        高さは --h-pc / --h-sp（モジュール設定「KVの高さ」）で上書きされます ---- */
.fh3__frame {
  position: relative;
  width: 100%;
  height: var(--h-pc, max(420px, min(56.25vw, 100vh)));
  overflow: hidden;
  touch-action: pan-y;
}
@supports (height: 100svh) {
  .fh3__frame { height: var(--h-pc-s, max(420px, min(56.25vw, 100svh))); }
}
@media (max-width: 767px) {
  .fh3__frame { height: var(--h-sp, max(560px, 88vh)); }
  @supports (height: 100svh) {
    .fh3__frame { height: var(--h-sp-s, max(560px, 88svh)); }
  }
}

/* キャンバスの包み。下端フェード（アルファ）はここにかける */
.fh3__cv {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fh3--fade .fh3__cv {
  --fade: var(--fade-pc, 25);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade) * 1%), rgba(0, 0, 0, 0.55) calc(100% - var(--fade) * 0.45%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade) * 1%), rgba(0, 0, 0, 0.55) calc(100% - var(--fade) * 0.45%), transparent 100%);
}
@media (max-width: 767px) {
  .fh3--fade .fh3__cv { --fade: var(--fade-sp, 20); }
}

/* 描画サイズ固定のキャンバスを、枠に隙間なく敷き詰める（サイズは JS が指定） */
.fh3__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---- カーソル画像 ---- */
.fh3__frame--nocursor { cursor: none; }
.fh3__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: calc(var(--cur-size, 40) * 1px);
  height: auto;
  max-width: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.fh3__cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .fh3__cursor { display: none; }
  .fh3__frame--nocursor { cursor: auto; }
}

/* ---- 見出し（h1 / h2） ---- */
.fh3__h {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  pointer-events: none;
}

.fh3__t {
  --x: var(--x-pc);
  --y: var(--y-pc);
  --fs: var(--fs-pc);
  --ax: 0%;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: block;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  color: var(--c, var(--fh3-text, var(--fh3-fg)));
  font-size: clamp(calc(var(--fs) * 0.5px), calc(var(--fs) / 1440 * 100vw), calc(var(--fs) * 1.4px));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 1.4);
  letter-spacing: calc(var(--ls, 0) * 1em);
  white-space: normal;
  transform: translate3d(
    calc(var(--ax) + var(--mx, 0) * var(--depth, 0) * 1px),
    calc(-50% + var(--my, 0) * var(--depth, 0) * 1px - var(--sp, 0) * var(--drift, 0) * 1px),
    0
  );
  will-change: transform;
}
@media (max-width: 767px) {
  .fh3__t {
    --x: var(--x-sp);
    --y: var(--y-sp);
    --fs: var(--fs-sp);
    font-size: clamp(calc(var(--fs) * 0.85px), calc(var(--fs) / 390 * 100vw), calc(var(--fs) * 1.6px));
  }
}

.fh3__t--left   { --ax: 0%;    text-align: left; }
.fh3__t--center { --ax: -50%;  text-align: center; }
.fh3__t--right  { --ax: -100%; text-align: right; }

.fh3__t--mincho { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.fh3__t--gothic { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; }
.fh3__t--mono   { font-family: "IBM Plex Mono", "Zen Kaku Gothic New", ui-monospace, monospace; }

/* ---- テキストを縦に並べる（テキスト間のマージン指定） ---- */
.fh3__flow {
  --fx: var(--fx-pc);
  --fy: var(--fy-pc);
  --fax: 0%;
  position: absolute;
  left: calc(var(--fx) * 1%);
  top: calc(var(--fy) * 1%);
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: calc(100% - 2rem);
  transform: translate(var(--fax), -50%);
}
@media (max-width: 767px) {
  .fh3__flow { --fx: var(--fx-sp); --fy: var(--fy-sp); }
}
.fh3__flow--left   { --fax: 0%;    align-items: flex-start; text-align: left; }
.fh3__flow--center { --fax: -50%;  align-items: center;     text-align: center; }
.fh3__flow--right  { --fax: -100%; align-items: flex-end;   text-align: right; }
.fh3__flow .fh3__t:not(.fh3__t--sr) {
  position: relative;
  left: auto;
  top: auto;
  max-width: none;
  text-align: inherit;
  transform: translate3d(
    calc(var(--mx, 0) * var(--depth, 0) * 1px),
    calc(var(--my, 0) * var(--depth, 0) * 1px - var(--sp, 0) * var(--drift, 0) * 1px),
    0
  );
}
/* 前に表示中のテキストがあるものだけ、上マージンを適用 */
.fh3__flow .fh3__t:not(.fh3__t--sr) ~ .fh3__t:not(.fh3__t--sr) {
  margin-top: clamp(calc(var(--mt-pc) * 0.5px), calc(var(--mt-pc) / 1440 * 100vw), calc(var(--mt-pc) * 1.4px));
}
@media (max-width: 767px) {
  .fh3__flow .fh3__t:not(.fh3__t--sr) ~ .fh3__t:not(.fh3__t--sr) {
    margin-top: clamp(calc(var(--mt-sp) * 0.85px), calc(var(--mt-sp) / 390 * 100vw), calc(var(--mt-sp) * 1.6px));
  }
}
/* 「1つずつ切り替え」のときは同じ位置に重ねる */
.fh3__flow--grid { display: grid; }
.fh3__flow--grid.fh3__flow--left   { justify-items: start; }
.fh3__flow--grid.fh3__flow--center { justify-items: center; }
.fh3__flow--grid.fh3__flow--right  { justify-items: end; }
.fh3__flow--grid .fh3__t:not(.fh3__t--sr) { grid-area: 1 / 1; margin-top: 0 !important; }

/* リッチテキスト内の段落・リンク */
.fh3__in p { margin: 0; }
.fh3__in p + p { margin-top: 0.6em; }
.fh3__in a { color: inherit; text-decoration: underline; }

/* 縦書き */
.fh3__t--v {
  --ax: -50%;
  writing-mode: vertical-rl;
  width: auto;
  height: max-content;
  max-width: none;
  max-height: calc(100% - 2rem);
}

/* 非表示（検索エンジン・読み上げ用のみ） */
.fh3__t--sr {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: none !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  transform: none !important;
}
.fh3__t--sr .fh3__in { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---- 出現アニメーション ---- */
.fh3__in {
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
.fh3__t[data-anim="rise"] .fh3__in { transform: translateY(0.55em); }
.fh3__t[data-anim="blur"] .fh3__in { filter: blur(14px); transform: scale(1.04); }
.fh3__t[data-anim="none"] .fh3__in { opacity: 1; transition: none; }
.fh3__t[data-anim="chars"] .fh3__in { opacity: 1; }

.fh3__t.is-in .fh3__in {
  opacity: 1;
  transform: none;
  filter: none;
  transition-duration: 1.1s, 1.2s, 1s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.7, 0.2, 1), ease;
  transition-delay: var(--delay, 0s);
}

.fh3__c {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fh3__t.is-in .fh3__c {
  opacity: 1;
  transform: none;
  transition-duration: 0.9s, 1s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 45ms);
}

/* 視差効果を減らす */
@media (prefers-reduced-motion: reduce) {
  .fh3__t { transform: translate3d(var(--ax), -50%, 0); will-change: auto; }
  .fh3__flow .fh3__t:not(.fh3__t--sr) { transform: none; }
  .fh3__in, .fh3__c { transition-duration: 0.6s !important; transition-delay: 0s !important; transform: none !important; filter: none !important; }
}