/* 自動生成。直さないこと（tools/copy-fx-assets.js が作ります）
   元は src/assets/fx/ の各ファイル。40本ぶん。 */
/* ---- mogufx-core.css ---- */
/**
 * 動きの土台のCSS（共通）
 *
 * 色は1つの変数にまとめてあります。テーマ側から上書きできます。
 *   .mogufx { --mogufx-c: #3a7ae5; }
 */

.mogufx {
  --mogufx-c: #e5793a;
  --pt0701-line: currentColor;
  position: relative;
  margin: 28px 0;
}

/* 「もう一度」ボタン。
   自分から動き出すものは、一度通り過ぎるとそれきりなので、
   見落とした人のために押せる場所を用意します。 */
.mogufx__again {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.78em;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: 1px solid var(--pt0701-line);
  border-radius: 999px;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.mogufx__again:hover,
.mogufx__again:focus-visible {
  opacity: 1;
}

/* 数字が入るところは、幅が動かないようにします。
   桁が変わるたびに周りの文字が揺れると、読みにくくなります。 */
.mogufx b,
.fx-count,
.fx-odo {
  font-variant-numeric: tabular-nums;
}

/* 「動きを減らす」設定の人には、動かさずに結果だけ見せます。
   JavaScript側でも見ていますが、CSSの transition はここで止めます。 */
@media (prefers-reduced-motion: reduce) {
  .mogufx *,
  .fx-count,
  .fx-odo {
    transition: none !important;
    animation: none !important;
  }
  .mogufx__again {
    display: none;
  }
}

/* ---- bar.css ---- */
/**
 * 棒が伸びる
 *
 * 幅の変化はここに書いてあります。JavaScriptは値を入れるだけです。
 * 1コマずつ幅を書き換える作りにすると、行数が増えたときに引っかかります。
 */

.fx-bars {
  display: grid;
  gap: 12px;
}

.fx-bar {
  display: grid;
  grid-template-columns: minmax(0, 8em) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 0.94em;
}

.fx-bar__l {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 溝。currentColor を薄めて使うので、暗い背景でも明るい背景でも成立します */
.fx-bar__t {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
}

.fx-bar__v {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--mogufx-c);
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-bar__o {
  font-size: 0.9em;
  opacity: 0.75;
  white-space: nowrap;
}

/* 名前が長いときは、上下に積みます。
   横に並べたまま縮めると、名前も棒も両方読めなくなります */
@media (max-width: 480px) {
  .fx-bar {
    grid-template-columns: 1fr auto;
  }
  .fx-bar__l {
    grid-column: 1 / -1;
  }
}

/* ---- bouten.css ---- */
/**
 * 傍点が打たれる
 *
 * ── なぜ text-emphasis を使わないのか ──
 *
 * CSSには傍点の指定（text-emphasis）があります。
 * ただし**一度に全部出る**ので、打たれていく感じになりません。
 *
 * 1文字ずつ包んで、順に出します。
 */

.fx-bouten__c {
  position: relative;
}

.fx-bouten__c::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.35em;
  width: 0.16em;
  height: 0.16em;
  margin-left: -0.08em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s, transform 0.18s;
  transition-delay: var(--mogufx-i, 0s);
}

.fx-bouten.is-in .fx-bouten__c::after {
  opacity: 1;
  transform: scale(1);
}

/* 縦書きのときは、右側に打ちます */
.fx-bouten[style*="vertical"] .fx-bouten__c::after,
.fx-vertical .fx-bouten__c::after {
  left: auto;
  right: -0.35em;
  top: 50%;
  margin: -0.08em 0 0;
}

/* ---- bracket.css ---- */
/**
 * 見出しを線が囲む
 *
 * 左右に「かぎかっこ」を伸ばします。
 * 四角で囲むと、見出しが枠の中に閉じ込められて重くなります。
 * 角だけにすると、囲んでいるのに軽く見えます。
 */

.fx-bracket {
  position: relative;
  padding: 0.5em 0.9em;
}

.fx-bracket::before,
.fx-bracket::after {
  content: "";
  position: absolute;
  width: 0.7em;
  height: 100%;
  border: 2px solid var(--mogufx-c);
  opacity: 0;
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-bracket::before {
  left: 0;
  top: 0;
  border-right: none;
  transform: translateX(0.6em);
}
.fx-bracket::after {
  right: 0;
  top: 0;
  border-left: none;
  transform: translateX(-0.6em);
}

.fx-bracket.is-in::before,
.fx-bracket.is-in::after {
  opacity: 1;
  transform: translateX(0);
}

/* ---- compare.css ---- */
/**
 * 左右で見比べる
 *
 * つまみは input[type=range] のままです。
 * 見た目だけこちらで作り、中身は素の部品に任せます。
 */

.fx-compare {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
}

.fx-compare img {
  display: block;
  width: 100%;
  height: auto;
}

/* 上に重ねる1枚。右から削られていきます */
.fx-compare__t {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* 境目の線 */
.fx-compare__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  transform: translateX(-1px);
  pointer-events: none;
}

/* つまみ。素の range を、枠いっぱいに透明で重ねます */
.fx-compare__r {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* 焦点が当たったことは見えるようにします。
   透明にしたまま印も消すと、キーボードで使えても場所が分かりません */
.fx-compare__r:focus-visible {
  outline: 3px solid var(--mogufx-c);
  outline-offset: 2px;
  border-radius: 8px;
}
/* ---- copy.css ---- */
/**
 * 押すと出る知らせ
 */

.fx-copy {
  position: relative;
  display: inline-block;
}

.fx-copy__b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: 1.5px dashed var(--mogufx-c);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fx-copy__b:hover,
.fx-copy__b:focus-visible {
  background: color-mix(in srgb, var(--mogufx-c) 10%, transparent);
}

.fx-copy__i {
  opacity: 0.6;
  font-size: 0.9em;
}

/* 出て消える知らせ */
.fx-copy__t {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 12px;
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: #333;
  border-radius: 999px;
  transform: translate(-50%, 4px);
  opacity: 0;
  animation: fx-copy-in 0.28s ease forwards;
  pointer-events: none;
}

.fx-copy__t.is-ng {
  background: #b32d2e;
}

.fx-copy__t.is-out {
  animation: fx-copy-out 0.4s ease forwards;
}

@keyframes fx-copy-in {
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes fx-copy-out {
  to {
    transform: translate(-50%, -4px);
    opacity: 0;
  }
}

/* 動かさない設定でも、知らせは出します。
   出ないと、押せたのかどうかが分かりません */
@media (prefers-reduced-motion: reduce) {
  .fx-copy__t {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .fx-copy__t.is-out {
    display: none;
  }
}
/* ---- countdown.css ---- */
/**
 * 残り時間
 */

.fx-cd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.fx-cd__u {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 0.85em;
  opacity: 0.75;
}

.fx-cd__n {
  min-width: 1.4em;
  font-size: 2em;
  font-weight: 800;
  line-height: 1;
  color: var(--mogufx-c);
  opacity: 1;
  text-align: right;
}

.fx-cd__h {
  margin: 0 0 8px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* 過ぎたあと。数字ではなく、決めた文字を出して止まります */
.fx-cd.is-over {
  display: block;
  font-size: 1em;
  opacity: 0.7;
}

/* ---- decode.css ---- */
/**
 * 文字が解読される
 *
 * 記号に入れ替わっても幅が動かないようにします。
 * 動くと、まわりの文章が1文字ごとに揺れます。
 */

.fx-decode {
  font-variant-numeric: tabular-nums;
}

.fx-decode > span {
  /* 記号のほうが幅が広いことがあるので、少しだけ余裕を持たせます */
  display: inline-block;
  min-width: 1ch;
}
/* ---- delta.css ---- */
/**
 * 増減の矢印
 *
 * ── 色だけで伝えません ──
 *
 * 増減を色（緑・赤）だけで示すと、色の見え方が違う人に何も伝わりません。
 * **矢印の向き**と**符号**を必ず出します。色は補助です。
 */

.fx-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fx-delta__mark {
  font-size: 0.8em;
  line-height: 1;
}

.fx-delta.is-up {
  color: #1a7f4b;
}
.fx-delta.is-down {
  color: #b3402d;
}
.fx-delta.is-flat {
  color: inherit;
  opacity: 0.7;
}

/* ---- dots.css ---- */
/**
 * 文字が粒から集まる
 *
 * 高さは枠で決めます。canvas 側は、その大きさに合わせて描き直します。
 */

.fx-dots {
  position: relative;
  /* 幅は枠いっぱい。これを書かないと、中の canvas の大きさで
     自分の幅が決まってしまい、枠が細くなっても追従できません */
  width: 100%;
  height: 160px;
  color: inherit;
}

.fx-dots canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .fx-dots {
    height: 110px;
  }
}
/* ---- fold.css ---- */
/**
 * 開いて閉じる
 *
 * 高さを 0fr から 1fr へ動かします。
 * px で指定すると、中身が増えたときに数字が合わなくなります。
 */

.fx-fold {
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.fx-fold__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 2px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* 開いているかどうかの印。矢印は擬似要素で作ります */
.fx-fold__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mogufx-c);
  border-bottom: 2px solid var(--mogufx-c);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
}

.fx-fold__q[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

.fx-fold__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-fold__q[aria-expanded="true"] + .fx-fold__a {
  grid-template-rows: 1fr;
}

.fx-fold__a > div {
  overflow: hidden;
}

.fx-fold__q[aria-expanded="true"] + .fx-fold__a > div {
  padding-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-fold__a,
  .fx-fold__q::after {
    transition: none;
  }
}
/* ---- gauge.css ---- */
/**
 * 半円のメーター
 *
 * 円（fx-ring）は「まるごとの中のどれだけ」を出すもの、
 * こちらは「**目盛りの上のいま**」を出すものです。
 * 満足度・稼働率のように、上限が決まっているものに向きます。
 */

.fx-gauge {
  --mogufx-gauge-w: 12;
  display: block;
  max-width: 260px;
  margin-inline: auto;
  text-align: center;
  position: relative;
}

.fx-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fx-gauge__bg {
  fill: none;
  stroke: color-mix(in srgb, currentColor 14%, transparent);
  stroke-width: var(--mogufx-gauge-w);
  stroke-linecap: round;
}

.fx-gauge__on {
  fill: none;
  stroke: var(--mogufx-c);
  stroke-width: var(--mogufx-gauge-w);
  stroke-linecap: round;
}

/* 数字は半円の内側。図の上に重ねると、細い針と重なって読めません */
.fx-gauge__n {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- gradient.css ---- */
/**
 * 文字に色がすべる
 *
 * ── 文字は読めるまま残します ──
 *
 * 文字そのものを薄い色にして光らせる作りにすると、
 * 動きが終わるまで読みにくくなります。
 * ここでは**元の色のまま**にして、明るい帯を1度だけ通します。
 */

.fx-gradient {
  background-image: linear-gradient(
    100deg,
    transparent 40%,
    color-mix(in srgb, var(--mogufx-c) 55%, transparent) 50%,
    transparent 60%
  );
  background-size: 250% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字の色は元のまま。帯だけが乗ります */
}

.fx-gradient.is-in {
  transition: background-position 1.4s ease-out;
  background-position: -30% 0;
}

/* ---- hint.css ---- */
/**
 * 横に送れる印
 *
 * 横に長い表やカードの列は、**送れることに気づかれません。**
 * 画面の端で切れているだけに見えます。
 *
 * ── 送り切ったら消します ──
 *
 * 出しっぱなしにすると、もう右が無いのに「まだある」と言い続けます。
 */

.fx-hint {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fx-hint::after {
  content: "→";
  position: sticky;
  right: 8px;
  float: right;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mogufx-c);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.fx-hint.is-more::after {
  opacity: 0.85;
}

/* 右に続いているあいだ、端を薄く暗くします */
.fx-hint.is-more {
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}

/* ---- letters.css ---- */
/** 1文字ずつ現れる */

.fx-letters span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-letters span.is-in {
  opacity: 1;
  transform: none;
}
/* ---- line.css ---- */
/**
 * 折れ線が引かれる
 *
 * 線を引き終わってから、下の面と点を出します。
 * 全部同時に出すと、どこを見ればよいのか分からないまま完成してしまいます。
 */

.fx-line {
  display: block;
}

.fx-line svg {
  display: block;
  width: 100%;
  height: 130px;
}

/* 底の線。グラフの下端がどこかを示します */
.fx-line__base {
  stroke: color-mix(in srgb, currentColor 18%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fx-line__l {
  fill: none;
  stroke: var(--mogufx-c);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* 横に伸ばしても線の太さは変えない */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* 下の面。線を引き終わってから、遅れて出します */
.fx-line__a {
  fill: var(--mogufx-c);
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}

.fx-line.is-on .fx-line__a {
  opacity: 0.12;
}

.fx-line__d {
  fill: var(--mogufx-c);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.fx-line__d.is-on {
  opacity: 1;
  transform: scale(1);
}

/* 目盛り。数と数が合っているときだけ出しています（PHP側で判断） */
.fx-line__x {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.76em;
  opacity: 0.7;
}

/* ---- lines.css ---- */
/**
 * 行ごとに立ち上がる
 *
 * 枠（span）で切り取り、中身（i）を動かします。
 * 枠が無いと、上がってくる途中の行が上の行に重なります。
 */

.fx-lines span {
  display: block;
  overflow: hidden;   /* ここが枠。切り取る役です */
}

.fx-lines i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-lines span.is-in i {
  transform: none;
}
/* ---- loupe.css ---- */
/**
 * 写真を拡大して見る
 *
 * ── 触る端末では何もしません ──
 *
 * 指で操作する端末に「カーソルを乗せる」はありません。
 * そこで動かすと、触った瞬間に拡大されて戻せなくなります。
 * マウスのある端末だけで動かします。
 */

.fx-loupe {
  position: relative;
  overflow: hidden;
  display: block;
}

.fx-loupe > img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease-out;
  transform-origin: center;
}

.fx-loupe.is-on > img {
  transform: scale(1.8);
}

@media (prefers-reduced-motion: reduce) {
  .fx-loupe > img {
    transition: none;
  }
}

/* ---- magnet.css ---- */
/**
 * カーソルに吸い付くボタン
 *
 * 動かすのは中身だけです。**当たり判定は動かしません。**
 * 判定ごと動かすと、追いかけても届かないボタンになります。
 */

.fx-magnet {
  display: inline-block;
  position: relative;
}

.fx-magnet > * {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .fx-magnet > * {
    transition: none;
    transform: none !important;
  }
}
/* ---- marker.css ---- */
/**
 * 見出しにマーカー
 *
 * 文字の後ろだけを塗り、左から引きます。
 *
 * ── 塗るのは、中に作った器です ──
 *
 * 元の要素をブロックのまま置いておき、中身を span で包んで、
 * そこを塗ります（包む処理は assets/reveal.js）。
 *
 * 元の要素を inline にすると、テーマの左右の余白から外れて
 * 行頭が左端に飛び出します。width:fit-content にすると、
 * 今度は中央に寄ります。どちらも、書いた人の揃えかたを壊します。
 */

.fx-marker__t {
  display: inline;
  padding: 0 0.1em;
  background-image: linear-gradient(
    transparent 62%,
    var(--mogufx-marker, color-mix(in srgb, var(--mogufx-c) 38%, transparent)) 62%
  );
  background-repeat: no-repeat;
  background-size: 0 100%;
  /* 折り返しても、行ごとに塗ります */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-marker.is-in .fx-marker__t {
  background-size: 100% 100%;
}

/* JavaScript が動かない環境では、器が作られません。
   そのときは何も塗られませんが、文字はそのまま読めます。 */

/* ---- marquee.css ---- */
/**
 * 流れる帯
 *
 * 同じ並びを2つ入れて、半分だけ動かすと継ぎ目なく回ります。
 * 速さは --fx-sec（1周にかかる秒数）で決まります。
 */

.fx-marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  /* 端をぼかして、切れているのではなく続いていることを伝えます */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.fx-marquee__r {
  display: flex;
  flex: 0 0 auto;
  gap: 28px;
  padding-right: 28px;
  animation: fx-marquee var(--fx-sec, 28s) linear infinite;
}

.fx-marquee__r span {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--mogufx-c);
  font-weight: 700;
}

.fx-marquee:hover .fx-marquee__r {
  animation-play-state: paused;   /* 読みたいときに止められます */
}

@keyframes fx-marquee {
  to {
    transform: translateX(-100%);
  }
}

/* 動かさない設定のときは、1行に並べたまま止めます */
.fx-marquee.is-still {
  overflow-x: auto;
}

.fx-marquee.is-still .fx-marquee__r {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-marquee__r {
    animation: none;
  }
}
/* ---- odo.css ---- */
/**
 * 数字の桁が回る
 *
 * 0〜9を縦に並べた帯を、桁ごとに動かします。
 * 見えるのは1つぶんの高さだけで、あとは枠の外に隠れています。
 */

.fx-odo {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

/* 組み立てが終わるまで、素の数字を出しておきます。
   ここを消してしまうと、JavaScriptが動かない環境で
   数字そのものが消えます。 */
.fx-odo.is-ready > span {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: baseline;
}

.fx-odo em {
  display: block;
  font-style: normal;
  white-space: pre;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 桁区切りや単位。回さずにそのまま置きます */
.fx-odo i {
  font-style: normal;
}

/* ---- parallax.css ---- */
/**
 * 背景がゆっくりずれる
 *
 * ── background-attachment: fixed を使いません ──
 *
 * あれはスマホで効かないうえ、効く環境では描き直しが重くなります。
 * 中の画像を少しだけ動かすほうが、軽くて確実です。
 */

.fx-parallax {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.fx-parallax > img,
.fx-parallax > .fx-parallax__bg {
  display: block;
  width: 100%;
  /* はみ出しぶんを、動かす余地にします */
  height: calc(100% + 60px);
  object-fit: cover;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .fx-parallax > img,
  .fx-parallax > .fx-parallax__bg {
    height: 100%;
    transform: none !important;
  }
}

/* ---- pie.css ---- */
/**
 * 割合の円
 *
 * 円（fx-ring）は輪郭だけ、こちらは**面で塗ります**。
 * 「全体のうち何割」を、面積として見せたいときに。
 *
 * 塗りは conic-gradient です。画像もSVGも使いません。
 */

.fx-pie {
  --mogufx-pie: 0deg;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--mogufx-c) var(--mogufx-pie),
    color-mix(in srgb, currentColor 12%, transparent) 0
  );
}

/* 真ん中を抜いて、数字を置く場所を作ります */
.fx-pie::before {
  content: "";
  grid-area: 1 / 1;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: var(--mogufx-bg, #fff);
}

.fx-pie__n {
  grid-area: 1 / 1;
  font-size: 1.6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- progress.css ---- */
/**
 * 読み終わりの目盛り
 *
 * ── ページ全体ではなく、置いた要素を測ります ──
 *
 * ページ全体で測ると、長いフッターのぶんまで「まだ下がある」ことになり、
 * 本文を読み終えても8割で止まります。
 * 本文の入れものに付けてください。
 */

.fx-progress {
  position: relative;
}

.fx-progress__bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--mogufx-c);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-progress__bar {
    transition: none;
  }
}

/* ---- quote.css ---- */
/**
 * 引用符が開く
 *
 * お客さんの声や、抜き書きに。
 *
 * 引用符は**飾り**なので、読み上げからは外してあります
 * （content で作った文字は、多くの読み上げが読み飛ばします）。
 */

.fx-quote {
  position: relative;
  padding: 0.2em 1.4em;
  font-style: normal;
}

.fx-quote::before,
.fx-quote::after {
  position: absolute;
  font-size: 2.4em;
  line-height: 1;
  color: var(--mogufx-c);
  opacity: 0;
  transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-quote::before {
  content: "\201C";
  left: -0.1em;
  top: -0.25em;
  transform: translateX(0.3em) scale(0.6);
}
.fx-quote::after {
  content: "\201D";
  right: -0.1em;
  bottom: -0.55em;
  transform: translateX(-0.3em) scale(0.6);
}

.fx-quote.is-in::before,
.fx-quote.is-in::after {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ---- rail.css ---- */
/**
 * 横に送る一覧
 *
 * 横の動きはブラウザに任せます（overflow-x）。
 * 自前で位置を持つと、指でなぞる・はじく・慣性で滑るを全部書き直すことになります。
 */

.fx-rail {
  position: relative;
}

.fx-rail__s {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding-bottom: 6px;
  /* スクロールバーは出しません。矢印と、なぞる操作で足ります */
  scrollbar-width: none;
}

.fx-rail__s::-webkit-scrollbar {
  display: none;
}

.fx-rail__s > * {
  flex: 0 0 auto;
  width: min(260px, 72%);
  scroll-snap-align: start;
  margin: 0;
}

/* つかんで動かしている間は、吸い付きを切ります。
   付けたままだと、離すたびに引き戻されて狙った場所で止められません */
.fx-rail__s.is-drag {
  scroll-snap-type: none;
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.fx-rail__b {
  position: absolute;
  top: 40%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  background: var(--mogufx-bg, #fff);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.fx-rail__b--p { left: -8px; }
.fx-rail__b--n { right: -8px; }

/* 端に着いたら、押せないことを見た目でも伝えます */
.fx-rail__b:disabled {
  opacity: 0.25;
  cursor: default;
}

/* 指の端末では矢印を出しません。なぞれば動くので、場所を取るだけです */
@media (hover: none) {
  .fx-rail__b {
    display: none;
  }
}
/* ---- ratio.css ---- */
/**
 * 2つの比
 *
 * 「A社62：B社38」のように、**2つを直接くらべる**ときのものです。
 * 円グラフにすると、どちらが多いかを角度で読ませることになります。
 * 帯にして左右から出会わせるほうが、差がそのまま長さに出ます。
 */

.fx-ratio {
  --mogufx-ratio: 50%;
  display: block;
  max-width: 460px;
  margin-inline: auto;
}

.fx-ratio__bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.fx-ratio__a,
.fx-ratio__b {
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-ratio__a {
  width: var(--mogufx-ratio);
  background: var(--mogufx-c);
}
.fx-ratio__b {
  width: calc(100% - var(--mogufx-ratio));
  background: color-mix(in srgb, currentColor 30%, transparent);
}

.fx-ratio__n {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- ring.css ---- */
/**
 * 円が描かれる
 *
 * 円周を破線1本ぶんの長さとして扱い、隙間をずらして描き足します。
 * r=42 は assets/ring.js と揃えること。片方だけ直すと線が途中で止まります。
 */

.fx-ring {
  position: relative;
  display: block;
  width: 160px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1;
}

.fx-ring__s {
  display: block;
  width: 100%;
  height: 100%;
  /* 12時の位置から時計回りに描き始めます。
     何もしないと3時から始まり、割合として読みにくくなります */
  transform: rotate(-90deg);
}

.fx-ring__b,
.fx-ring__v {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}

.fx-ring__b {
  stroke: color-mix(in srgb, currentColor 12%, transparent);
}

.fx-ring__v {
  stroke: var(--mogufx-c);
  transition: stroke-dashoffset 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 真ん中の数字 */
.fx-ring__c {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.95em;
}

.fx-ring__n {
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1;
}

.fx-ring__l {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.8;
}

/* ---- ripple.css ---- */
/**
 * 押した場所から波紋
 *
 * 押した場所は指で隠れるので、周りへ広がる形にしないと見えません。
 */

.fx-ripple {
  position: relative;
  overflow: hidden;
  /* 押したときに文字が選択されると、波紋より選択のほうが目立ちます */
  -webkit-user-select: none;
  user-select: none;
}

.fx-ripple__w {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transform: scale(0);
  pointer-events: none;
  animation: fx-ripple 0.62s ease-out forwards;
}

@keyframes fx-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
/* ---- scale.css ---- */
/**
 * 目盛りつきの帯
 *
 * 棒（fx-bar）との違いは**目盛り**です。
 * 目盛りが無いと「どこまで行けば満点か」が分かりません。
 * 達成率や進み具合のように、上限が意味を持つものに向きます。
 */

.fx-scale {
  --mogufx-scale: 0%;
  display: block;
  max-width: 420px;
  margin-inline: auto;
}

.fx-scale__track {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  overflow: hidden;
}

.fx-scale__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mogufx-scale);
  background: var(--mogufx-c);
  border-radius: 9px;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 目盛り。10等分の細い線を、帯の上に重ねます */
.fx-scale__ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    color-mix(in srgb, currentColor 22%, transparent) calc(10% - 1px),
    color-mix(in srgb, currentColor 22%, transparent) 10%
  );
  pointer-events: none;
}

.fx-scale__n {
  display: block;
  margin-top: 0.5em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- shine.css ---- */
/**
 * 写真の上を光がすべる
 *
 * 1度だけです。**繰り返すと、ページ全体が落ち着きません。**
 * 「もう一度」で見直せます。
 */

.fx-shine {
  position: relative;
  overflow: hidden;
}

.fx-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 250% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fx-shine.is-in::after {
  transition: background-position 1s ease-out;
  background-position: -30% 0;
}

@media (prefers-reduced-motion: reduce) {
  .fx-shine::after {
    display: none;
  }
}

/* ---- slides.css ---- */
/**
 * 写真が入れ替わる
 *
 * 同じ場所に重ねて、重ね合わせながら入れ替えます。
 */

.fx-slides {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
}

.fx-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.fx-slides img.is-on {
  opacity: 1;
}

/* 何枚目かを示す点 */
.fx-slides__d {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.fx-slides__d i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease;
}

.fx-slides__d i.is-on {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .fx-slides img {
    transition: none;
  }
}
/* ---- steps.css ---- */
/**
 * 縦に伸びる筋道
 *
 * 線は左に1本。読み進めた分だけ伸び、通り過ぎた印が点きます。
 */

.fx-steps {
  position: relative;
  padding-left: 34px;
}

/* 通っていない線（薄い） */
.fx-steps::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* 通った線（濃い）。高さを JavaScript が動かします */
.fx-steps__bar {
  position: absolute;
  left: 9px;
  top: 6px;
  width: 2px;
  height: 0;
  background: var(--mogufx-c);
  transition: height 0.25s linear;
}

.fx-steps__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.fx-steps__i {
  position: relative;
}

/* 印。線の上に置きます */
.fx-steps__i::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mogufx-bg, #fff);
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.fx-steps__i.is-on::before {
  background: var(--mogufx-c);
  border-color: var(--mogufx-c);
  transform: scale(1.15);
}

.fx-steps__i b {
  display: block;
  font-size: 1.02em;
}

.fx-steps__i span {
  display: block;
  margin-top: 3px;
  font-size: 0.92em;
  opacity: 0.8;
}
/* ---- tabs.css ---- */
/**
 * 切り替えるタブ
 *
 * 左右キーで移動できます（JavaScript側）。
 * 選ばれていないタブは Tab キーの順路から外れます。
 */

.fx-tabs__b {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid color-mix(in srgb, currentColor 14%, transparent);
}

.fx-tabs__b button {
  padding: 8px 16px;
  font: inherit;
  font-size: 0.94em;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.fx-tabs__b button[aria-selected="true"] {
  opacity: 1;
  font-weight: 700;
  border-bottom-color: var(--mogufx-c);
}

.fx-tabs__b button:hover {
  opacity: 1;
}

.fx-tabs__p {
  padding-top: 14px;
}

/* hidden の中身は出しません。
   ここを書かないと、display を持つテーマで隠れないことがあります */
.fx-tabs__p [hidden] {
  display: none;
}
/* ---- tilt.css ---- */
/**
 * 傾くカード
 *
 * マウスのある端末だけで動きます（JavaScript側で分けています）。
 * 光は、カーソルの位置に合わせて動きます。
 */

.fx-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  /* 光を文字の裏に回すための下ごしらえ。
     これが無いと、光が文字の上に乗って白くかぶる。 */
  overflow: hidden;
  isolation: isolate;
}

/* カーソルの位置に光を置きます。
   位置は JavaScript が --fx-gx / --fx-gy に入れます */
.fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--fx-gx, 50%) var(--fx-gy, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* 文字の裏。上に置くと、明るい光で文字が読みにくくなる */
  z-index: -1;
}

.fx-tilt:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fx-tilt {
    transition: none;
  }
  .fx-tilt::after {
    display: none;
  }
}
/* ---- totop.css ---- */
/**
 * 上に戻るボタン
 *
 * ── 最初から出しません ──
 *
 * 上にいる人に「上に戻る」を出しても、押す理由がありません。
 * 1画面ぶん下げてから出します。
 *
 * ── 押せる大きさにします ──
 *
 * 44px を下回ると、指では押し間違えます。
 */

.fx-totop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--mogufx-c);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9998;
}

.fx-totop.is-in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fx-totop {
    transition: none;
  }
}

/* ---- type.css ---- */
/**
 * 打ち込まれる文字
 *
 * 後ろの棒（カーソル）は擬似要素です。
 * 文字を入れる場所と分けておくと、打っている途中でも位置が動きません。
 */

.fx-type {
  display: inline-flex;
  align-items: baseline;
}

.fx-type__t {
  color: var(--mogufx-c);
  font-weight: 700;
}

.fx-type::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  transform: translateY(0.1em);
  animation: fx-type-blink 1.05s step-end infinite;
}

/* 動かさない設定のときは、棒も点滅させません */
.fx-type.is-still::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-type::after {
    animation: none;
  }
}

@keyframes fx-type-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ---- vertical.css ---- */
/**
 * 縦書きの見出し
 *
 * 日本語の縦書きです。数字や英字が混ざるときは、
 * text-orientation を upright にすると1文字ずつ縦に並びます。
 */

.fx-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.5;
  letter-spacing: 0.08em;
  max-height: 14em;
  /* 横方向のまん中に置きます。

     margin-inline とは書けません。論理プロパティは**その要素自身の
     書字方向**で解決されるので、縦書き（vertical-rl）では
     margin-inline が上下になり、横には寄りません。

     幅を内容ぶんに決めてから、左右のマージンを auto にします。
     親に display:flex などを求めない書きかたにしてあります
     （置き場所はお客さんが決めるものなので）。 */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(-0.6em);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-vertical.is-in {
  opacity: 1;
  transform: none;
}

/* 狭い画面では横書きに戻します。
   縦書きのまま縮めると、1行に1文字しか入らなくなります */
@media (max-width: 480px) {
  .fx-vertical {
    writing-mode: horizontal-tb;
    max-height: none;
  }
}
/* ---- wave.css ---- */
/**
 * 文字が波打つ
 *
 * 1文字ずつ、遅れて上下します。
 * 「1文字ずつ現れる」（fx-letters）は**出てくる**もの、
 * こちらは**出たあとも動き続ける**ものです。使いどころが違います。
 */

.fx-wave__c {
  display: inline-block;
  animation: fx-wave 1.8s ease-in-out infinite;
  animation-delay: var(--mogufx-i, 0s);
}

@keyframes fx-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.18em); }
}

/* 動きを減らす設定の人には、動かしません */
@media (prefers-reduced-motion: reduce) {
  .fx-wave__c {
    animation: none;
  }
}