/* ============ 変数 ============ */
:root {
  /* 深さ4段の水の色（WebGL 側の SEA と揃えてある） */
  --sea-0: #59c6cd;
  --sea-1: #1b7fa8;
  --sea-2: #0d5479;
  --sea-3: #072f4d;

  --ink: #eaf7fb;              /* 本文 */
  --ink-dim: #a8cfdd;          /* 副文 */
  --ink-faint: #7ba9bd;
  --panel: rgba(6, 32, 50, 0.60);
  --panel-hi: rgba(10, 46, 68, 0.74);
  --edge: rgba(150, 226, 240, 0.20);
  --edge-hi: rgba(160, 240, 250, 0.42);
  --accent: #ffcf5c;           /* 差し色（コイン。アプリの貯金箱と同じ黄） */
  --accent-2: #62e3c8;         /* 差し色（水の照り） */
  --coral: #ff8a6b;

  --head-h: 62px;
  --rad: 18px;
  --shadow: 0 18px 50px -18px rgba(0, 20, 34, 0.75);
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
          system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* アンカーで飛んだとき見出しがヘッダの下に隠れないように */
  scroll-padding-top: calc(var(--head-h) + 18px);
  background: var(--sea-2);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.85;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  background:
    linear-gradient(180deg,
      var(--sea-0) 0%, #2fa3bd 14%, var(--sea-1) 36%,
      var(--sea-2) 66%, var(--sea-3) 92%, #0b2c42 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ============ 背景の canvas ============ */
#sea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
#sea.gl-off { display: none; }

/* 内容は canvas の上 */
.page { position: relative; z-index: 1; }

/* ============ ヘッダ ============ */
header.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(14px, 3vw, 34px);
  background: rgba(4, 26, 42, 0.30);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background 0.35s ease, border-color 0.35s ease;
}
header.bar.solid {
  background: rgba(4, 26, 42, 0.78);
  border-bottom-color: var(--edge);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.brand .name {
  font-size: 17px; font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap;
}
.brand .name em {
  font-style: normal;
  color: var(--accent-2);
}

nav.anchors { margin-left: auto; display: flex; gap: 4px; align-items: center; }
nav.anchors a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
nav.anchors a:hover { color: var(--ink); background: rgba(120, 220, 235, 0.14); }
nav.anchors a.on { color: #06222f; background: var(--accent-2); font-weight: 700; }

.bar-dl {
  margin-left: 10px;
  font-size: 13px; font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge-hi);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(98, 227, 200, 0.24), rgba(98, 227, 200, 0.08));
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bar-dl:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(98, 227, 200, 0.7); }

/* いまの深さ（ヘッダ右）。**1枚ものなので、どこまで来たかの手がかりを1つ置く** */
.depth-meter {
  display: flex; align-items: center; gap: 9px;
  margin-left: 14px;
  font-size: 11.5px; letter-spacing: 0.14em;
  color: var(--ink-faint);
  user-select: none;
}
.depth-meter .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.depth-meter .num b { color: var(--accent-2); font-size: 13px; }
.depth-meter .rail {
  position: relative;
  width: 62px; height: 3px; border-radius: 999px;
  background: rgba(150, 226, 240, 0.20);
  overflow: hidden;
}
.depth-meter .rail i {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9df3ff, var(--accent-2));
}

.menu-btn { display: none; }

/* ============ 共通のレイアウト ============ */
main { display: block; }

section {
  position: relative;
  padding: clamp(70px, 11vh, 140px) clamp(16px, 4vw, 40px);
}
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap.narrow { max-width: 820px; }

/* 深さの目印（左端に薄く「-30m」のような目盛りを出す） */
.depth-tick {
  position: absolute;
  left: clamp(6px, 1.6vw, 18px);
  top: clamp(70px, 11vh, 140px);
  font: 600 11px/1 var(--font);
  letter-spacing: 0.22em;
  color: rgba(170, 222, 236, 0.42);
  writing-mode: vertical-rl;
  user-select: none;
  pointer-events: none;
}
.depth-tick::after {
  content: "";
  display: block;
  width: 1px; height: 54px;
  margin: 10px auto 0;
  background: linear-gradient(180deg, rgba(170, 222, 236, 0.42), transparent);
}

h2.sec {
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.35;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-shadow: 0 3px 18px rgba(0, 22, 38, 0.6);
}
h2.sec .en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 12px;
  text-transform: uppercase;
  text-shadow: none;
}
p.lead {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0 0 40px;
}
p.lead strong { color: var(--ink); font-weight: 700; }

/* ★キーボードで辿れることを見えるようにする。**`outline: none` にしない。**
   海の上なので、明るい輪と暗い輪を二重にして地の明暗どちらでも見えるようにする。 */
:focus-visible {
  outline: 2px solid #9df3ff;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(3, 26, 42, 0.65);
}
.btn:focus-visible, .bar-dl:focus-visible, nav.anchors a:focus-visible { border-radius: 999px; }
.shot:focus-visible { border-radius: 14px; }

/* 札。**海の上でも文字が読めるように地を持つ** */
.card, .panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--rad);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--shadow);
}

/* ============ ヒーロー ============ */
#hero {
  min-height: 100svh;
  padding-top: calc(var(--head-h) + clamp(28px, 6vh, 70px));
  padding-bottom: clamp(40px, 8vh, 90px);
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.scrim { position: relative; }
.scrim > * { position: relative; z-index: 1; }
.scrim::before {
  content: "";
  position: absolute;
  inset: -64px -112px -54px -100px;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px);
  background:
    radial-gradient(70% 76% at 42% 50%,
      rgba(3, 26, 42, 0.76) 0%, rgba(3, 26, 42, 0.58) 38%,
      rgba(3, 26, 42, 0.20) 66%, rgba(3, 26, 42, 0) 86%);
}
.scrim.light::before {
  inset: -48px -90px auto -84px;
  height: 340px;
  filter: blur(26px);
  background:
    radial-gradient(56% 66% at 30% 44%,
      rgba(3, 26, 42, 0.62) 0%, rgba(3, 26, 42, 0.42) 42%,
      rgba(3, 26, 42, 0.14) 68%, rgba(3, 26, 42, 0) 88%);
}

.hero-copy .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.2em; font-weight: 700;
  color: #06222f;
  background: var(--accent-2);
  padding: 5px 13px; border-radius: 999px;
  margin-bottom: 20px;
}
.hero-copy h1 {
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.16;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 26px rgba(0, 20, 34, 0.66);
}
.hero-copy h1 .glow {
  background: linear-gradient(96deg, #9df3ff 8%, var(--accent-2) 52%, #ffe089 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-copy p {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--ink-dim);
  margin: 0 0 14px;
  max-width: 46ch;
}
.hero-copy p strong { color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn.primary {
  color: #04222e;
  background: linear-gradient(180deg, #9ff4dd, var(--accent-2));
  box-shadow: 0 14px 34px -14px rgba(98, 227, 200, 0.8);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -14px rgba(98, 227, 200, 0.9); }
.btn.ghost {
  color: var(--ink);
  border-color: var(--edge-hi);
  background: rgba(8, 38, 56, 0.42);
  backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: rgba(16, 58, 82, 0.6); transform: translateY(-2px); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.cta-note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }

.tank {
  position: relative;
  aspect-ratio: 16 / 10.4;
  width: 100%;
  border-radius: 22px;
  background: none;
  box-shadow: 0 40px 80px -34px rgba(0, 22, 40, 0.9);
  isolation: isolate;
}
.tank .inner {
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(4, 34, 50, 0.78) inset,
    0 18px 44px -14px rgba(0, 20, 34, 0.58) inset,
    0 -10px 26px -12px rgba(230, 255, 255, 0.30) inset,
    0 0 0 3px rgba(132, 214, 238, 0.22),
    0 0 0 8px rgba(196, 244, 255, 0.34),
    0 0 0 10px rgba(240, 254, 255, 0.72),
    0 0 0 11.5px rgba(38, 96, 126, 0.78),
    0 0 34px 8px rgba(150, 232, 255, 0.16);
}
.tank .inner::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    /* 水面のきわ */
    linear-gradient(180deg, rgba(224, 255, 255, 0.40) 0%, rgba(224, 255, 255, 0) 20%),
    /* 砂の面（下辺）。手前が明るく、奥ぎわで水に溶ける */
    linear-gradient(0deg,
      rgba(236, 226, 200, 0.95) 0%, rgba(226, 214, 186, 0.92) 5%,
      rgba(206, 196, 172, 0.72) 9%, rgba(180, 186, 176, 0.34) 12.5%,
      rgba(160, 180, 180, 0) 16%);
}
/* ガラスの斜めの映り込み。**細く・薄く**（太いと中が見えない） */
.tank .inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.10) 43%,
    rgba(255, 255, 255, 0.015) 48%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
  z-index: 4;
}
/* 台（水槽の下の帯） */
.tank .base {
  position: absolute;
  left: 6%; right: 6%; bottom: -13px; height: 15px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #123246, #081d2c);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.8);
  z-index: -1;
}
/* 水槽の上の照明バー（Web 用の意匠。アプリのものは真似ていない） */
.tank .lamp {
  position: absolute;
  left: 12%; right: 12%; top: -9px; height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #bfe9ff 60%, #6fbcd8);
  box-shadow: 0 0 24px 4px rgba(180, 240, 255, 0.55), 0 0 60px 16px rgba(120, 210, 240, 0.28);
  z-index: 5;
}
/* 水槽の隅の名札 */
.tank .tag {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.12em;
  color: rgba(228, 250, 255, 0.9);
  background: rgba(4, 26, 40, 0.62);
  border: 1px solid rgba(160, 230, 245, 0.24);
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  backdrop-filter: blur(6px);
}
/* 生きて動いていることの印。**点は本当に脈打つ**（静止画に見せないため） */
.tank .tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6dffc0;
  box-shadow: 0 0 8px 2px rgba(109, 255, 192, 0.7);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.42; transform: scale(0.72); }
}
.tank .nogl {
  position: absolute; inset: 0; z-index: 2;
  display: none;
  align-items: center; justify-content: center;
  text-align: center; font-size: 13px; color: var(--ink-dim);
  padding: 20px;
  background: linear-gradient(180deg, #2aa3bd, #0d5479);
}
body.no-gl .tank .nogl { display: flex; }

/* 数字の帯 */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  margin-top: 30px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--edge);
}
.stats div {
  background: rgba(5, 30, 46, 0.62);
  padding: 14px 16px;
  backdrop-filter: blur(10px);
}
.stats b {
  display: block;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.2;
  color: var(--accent-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stats span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.08em; }

/* ============ 特徴 ============ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.feat {
  padding: 26px 24px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
/* 触ると少し浮く。**動かすのは影と縁だけ**——`transform` は「漂う」アニメが使っている */
.feat:hover {
  border-color: var(--edge-hi);
  background: var(--panel-hi);
  box-shadow: 0 26px 60px -22px rgba(0, 18, 30, 0.85),
              0 0 0 1px rgba(150, 226, 240, 0.14) inset;
}
.feat:hover .ico { color: #9df3ff; }
.feat .ico { transition: color 0.3s ease; }
.feat .ico {
  width: 40px; height: 40px;
  margin-bottom: 16px;
  color: var(--accent-2);
}
.feat h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }
.feat p { margin: 0; font-size: 14px; color: var(--ink-dim); line-height: 1.8; }
.feat p em { font-style: normal; color: var(--accent); }

/* ============ 魚の一覧 ============ */
.roster-note { font-size: 13px; color: var(--ink-faint); margin: 18px 0 0; }

.dlbox {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: 22px;
  border-color: rgba(98, 227, 200, 0.34);
}
html { overflow-x: clip; }

.phone-only { display: none; }
html.no-exe .pc-only { display: none !important; }
html.no-exe .phone-only { display: block; }
html.no-exe a.phone-only { display: inline-flex; }
.dl-phone {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-dim, var(--ink));
}
.dl-phone b { color: var(--accent-2); }

.dlbox-get { display: grid; gap: 12px; justify-items: start; }
.btn.big { font-size: 16.5px; padding: 17px 30px; }
.dlbox-meta { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.dlbox-meta b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.dlbox-need { margin: 0; padding-left: 1.15em; display: grid; gap: 9px; }
.dlbox-need li { font-size: 14px; line-height: 1.75; color: var(--ink-dim, var(--ink)); }
.dlbox-need code { font-size: 12.5px; }
.dlbox-need a {
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(98, 227, 200, 0.45);
}
.dlbox-need a:hover { border-bottom-color: var(--accent-2); }
.dlbox-need a:visited { color: var(--accent-2); }
@media (max-width: 760px) {
  .dlbox { grid-template-columns: 1fr; }
}

/* ============ 手順（はじめかた／あそびかた／ダッシュボード） ============ */
.steps { display: grid; gap: 22px; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
}
.step:nth-child(even) .shot { order: -1; }
.step .no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  color: #04222e; background: var(--accent-2);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin: 0 0 10px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; line-height: 1.5; }
.step p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-dim); }
.step p:last-child { margin-bottom: 0; }
.step p strong { color: var(--ink); }
.step .keys {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
kbd {
  font: 600 12px/1 var(--font);
  padding: 6px 10px; border-radius: 7px;
  color: var(--ink);
  background: rgba(12, 48, 70, 0.85);
  border: 1px solid var(--edge-hi);
  border-bottom-width: 2px;
  white-space: nowrap;
}

/* スクリーンショットの額。**押すと大きく見られる** */
.shot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--edge);
  background: #04202f;
  box-shadow: 0 22px 48px -22px rgba(0, 16, 28, 0.85);
  cursor: zoom-in;
  display: block;
  width: 100%;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.shot:hover { transform: translateY(-3px) scale(1.006); box-shadow: 0 30px 60px -22px rgba(0, 16, 28, 0.95); }
.shot img { display: block; width: 100%; height: auto; }
/* 幅いっぱいで見せる1枚（説明の札の中ではなく、節の地に直接置く） */
.shot.wide { margin-top: 26px; border-radius: var(--rad); }
.shot.wide .shotcap { font-size: 12.5px; padding: 12px 18px 13px; line-height: 1.7; }
.shot .shotcap {
  display: block;
  font-size: 11.5px; line-height: 1.65; letter-spacing: 0.04em;
  color: rgba(214, 240, 250, 0.92);
  background: rgba(3, 24, 38, 0.72);
  border-top: 1px solid rgba(150, 226, 240, 0.16);
  padding: 9px 13px 10px;
  text-align: left;
}
.shot .zoom-hint {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(4, 26, 40, 0.66);
  border: 1px solid var(--edge);
  color: var(--ink);
  opacity: 0; transition: opacity 0.25s ease;
}
.shot:hover .zoom-hint { opacity: 1; }

/* 図（スクリーンショットが撮れないものは図で説明する。**写真のふりをしない**） */
.diagram {
  border-radius: 14px;
  border: 1px dashed var(--edge-hi);
  background: rgba(6, 34, 52, 0.5);
  padding: 18px;
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .cap { font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 0; letter-spacing: 0.04em; }

/* 注意書き */
.note {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 14px;
  border: 1px solid rgba(255, 207, 92, 0.34);
  background: rgba(74, 54, 12, 0.34);
  padding: 16px 18px;
  font-size: 13.5px;
  color: #ffeec2;
  margin-top: 26px;
}
.note svg { flex: 0 0 20px; margin-top: 2px; color: var(--accent); }
.note b { color: #fff6dd; }

/* ============ 表（動作環境） ============ */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  overflow: hidden;
  border-radius: 14px;
}
.spec th, .spec td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(150, 226, 240, 0.13);
  vertical-align: top;
}
.spec th {
  width: 34%;
  color: var(--accent-2);
  font-weight: 700;
  white-space: nowrap;
  background: rgba(4, 28, 44, 0.5);
}
.spec td { color: var(--ink-dim); background: rgba(4, 28, 44, 0.3); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details {
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--panel);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.faq summary {
  cursor: pointer;
  padding: 17px 22px;
  font-size: 15px; font-weight: 700;
  list-style: none;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "?";
  flex: 0 0 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px; color: #04222e; background: var(--accent-2);
}
.faq summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .body {
  padding: 0 22px 20px;
  font-size: 14px; color: var(--ink-dim);
}
/* `.inner` は上の実験の名残。**残しておく**（HTML 側にあるので、無いと余白が崩れる） */
.faq .body > .inner { display: contents; }
.faq .body p { margin: 0 0 10px; }
.faq .body p:last-child { margin: 0; }
.faq .body > .inner > p:last-child { margin: 0; }

/* ============ フッター（海の底）============ */
#seabed {
  position: relative;
  /* 砂と海藻は WebGL がこの矩形へ描く。**ここは文字の側だけ** */
  min-height: 620px;
  padding-top: clamp(60px, 10vh, 120px);
  padding-bottom: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#seabed .foot-cta {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(26px, 3vw, 38px);
}
#seabed .foot-cta h2 { font-size: clamp(24px, 3.6vw, 36px); margin: 0 0 12px; }
#seabed .foot-cta p { color: var(--ink-dim); font-size: 15px; margin: 0 0 24px; }
.foot-bottom {
  position: relative;
  max-width: 1180px;
  margin: clamp(60px, 12vh, 150px) auto 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  padding: 16px clamp(16px, 2.4vw, 30px) 16px;
  border-radius: 16px;
  border: 1px solid rgba(150, 226, 240, 0.18);
  background: rgba(3, 24, 38, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.foot-bottom .links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-bottom a { color: var(--ink-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); text-decoration: underline; }
.foot-bottom .copy { margin-left: auto; letter-spacing: 0.06em; white-space: nowrap; }
/* クレジット（CC-BY。**消さない**）。行を分けて、リンク集とコピーライトの間に挟む */
.foot-bottom .credit {
  flex: 1 1 100%;
  order: 3;
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(123, 169, 189, 0.85);
}
.foot-bottom .credit a { color: rgba(168, 207, 221, 0.95); text-decoration: underline; }

.rise { opacity: 0; translate: 0 26px; }
.rise.in {
  opacity: 1; translate: none;
  transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              translate 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rise.d1.in { transition-delay: 0.08s; }
.rise.d2.in { transition-delay: 0.16s; }
.rise.d3.in { transition-delay: 0.24s; }
.rise.d4.in { transition-delay: 0.32s; }

/* ゆらり漂う（札が水に浮いている感じ） */
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-0.12deg); }
  50% { transform: translateY(-7px) rotate(0.12deg); }
}
.float-slow { animation: drift 9s ease-in-out infinite; }
.float-slow.b { animation-duration: 11.5s; animation-delay: -3s; }
.float-slow.c { animation-duration: 13s; animation-delay: -6s; }

@keyframes drift-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.drift-soft { animation: drift-soft 15s ease-in-out infinite; }
.drift-soft.s1 { animation-delay: -2.5s; animation-duration: 16.5s; }
.drift-soft.s2 { animation-delay: -5s;   animation-duration: 14s; }
.drift-soft.s3 { animation-delay: -7.5s; animation-duration: 17.5s; }
.drift-soft.s4 { animation-delay: -10s;  animation-duration: 15.5s; }

/* 泡が上がる小さな飾り（見出しの横） */
@keyframes bubble-up {
  0% { transform: translateY(8px) scale(0.7); opacity: 0; }
  25% { opacity: 0.8; }
  100% { transform: translateY(-40px) scale(1.1); opacity: 0; }
}

/* ============ 拡大表示（ライトボックス）============ */
#lb {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 14, 24, 0.90);
  backdrop-filter: blur(10px);
  padding: clamp(14px, 4vw, 50px);
}
#lb.on { display: flex; animation: lb-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
#lb img {
  max-width: 100%; max-height: 84vh;
  border-radius: 12px;
  border: 1px solid var(--edge);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
#lb.on img { animation: lb-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lb-pop {
  from { transform: scale(0.955) translateY(10px); }
  to { transform: none; }
}
#lb .cap {
  position: absolute; left: 0; right: 0; bottom: max(18px, 3vh);
  text-align: center; font-size: 13px; color: var(--ink-dim);
  padding: 0 20px;
}
#lb .x {
  position: absolute; top: 16px; right: 18px;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--edge);
  background: rgba(8, 34, 50, 0.8);
  color: var(--ink);
  font-size: 20px; cursor: pointer;
  display: grid; place-items: center;
}
#lb .x:hover { background: rgba(20, 60, 84, 0.9); }

/* ============ 狭い画面 ============ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 2; }
  .tank { order: 1; max-height: 44svh; aspect-ratio: 16 / 10; }
  #hero { min-height: 0; padding-top: calc(var(--head-h) + 22px); }
  /* 押して拡大できることは**触る画面では hover で伝わらない**ので、常に出す */
  .shot .zoom-hint { opacity: 0.85; }
  .scrim::before { inset: -30px 0 -26px 0; filter: blur(16px); }
  .scrim.light::before { inset: -24px 0 auto 0; height: 260px; filter: blur(18px); }
  .step, .step:nth-child(even) { grid-template-columns: 1fr; }
  .step:nth-child(even) .shot { order: 0; }
  nav.anchors { display: none; }
  nav.anchors.open {
    display: flex;
    position: fixed; top: var(--head-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(4, 26, 42, 0.96);
    border-bottom: 1px solid var(--edge);
    padding: 8px;
    backdrop-filter: blur(16px);
  }
  nav.anchors.open a { padding: 13px 16px; border-radius: 10px; font-size: 14px; }
  .menu-btn {
    display: grid; place-items: center;
    margin-left: auto;
    width: 40px; height: 40px;
    border-radius: 11px;
    border: 1px solid var(--edge-hi);
    background: rgba(8, 38, 56, 0.5);
    color: var(--ink);
    cursor: pointer;
  }
  .bar-dl { display: none; }
  .depth-meter { display: none; }
  .depth-tick { display: none; }
  .foot-bottom .copy { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  :root { --head-h: 56px; }
  section { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; translate: none; }
  .drift-soft, .float-slow, .tank .tag .dot { animation: none; }
  .tank .tag .dot { opacity: 1; }
}

.fish-grid {
  margin-top: 22px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.fish-card {
  position: relative;
  display: block; width: 100%;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(150, 226, 240, 0.16);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(98, 227, 200, 0.10), transparent 62%),
    rgba(8, 40, 60, 0.52);
  /* ★立ち上がりは1枚ずつ遅らせる（--i は札の番号）。**同時に出ると格子が「点滅」する** */
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.25, 1),
              border-color 0.3s, background 0.3s, box-shadow 0.42s;
}
.fish-card::after {
  /* 押せることの合図。**hover だけに頼らない**（触る画面では hover が無い）ので、
     常に薄く出しておき、hover で濃くする */
  content: "詳しく";
  position: absolute; right: 10px; top: 10px;
  font-size: 10.5px; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 999px;
  color: #062430; background: rgba(98, 227, 200, 0.42);
  opacity: 0.55; transition: opacity 0.3s, background 0.3s;
}
.fish-card:hover, .fish-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--edge-hi);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(98, 227, 200, 0.20), transparent 62%),
    rgba(12, 52, 76, 0.72);
  box-shadow: 0 20px 40px -22px rgba(0, 24, 40, 0.9);
  outline: none;
}
.fish-card:hover::after, .fish-card:focus-visible::after { opacity: 1; background: var(--accent-2); }
.fish-card .thumb { display: block; width: 100%; height: 96px; }
.fish-card .nm {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fish-card .st {
  display: flex; align-items: center; gap: 7px;
  margin-top: 3px; font-size: 11.5px; color: var(--ink-faint);
}
.fish-card .st b { color: var(--accent); font-size: 13px; font-weight: 800; }
.fish-card .st i { width: 1px; height: 11px; background: var(--edge); }
.fish-card .tg {
  position: absolute; left: 12px; top: 10px;
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(4, 28, 44, 0.72); color: var(--ink-dim);
  border: 1px solid var(--edge);
}

/* ---- 開いたところ ---- */
#fx {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(2, 16, 28, 0.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#fx.on { display: flex; animation: fx-veil 0.24s ease both; }
@keyframes fx-veil { from { opacity: 0; } }
body.fx-open { overflow: hidden; }
.fx-card {
  position: relative;
  width: min(980px, 100%); max-height: min(88vh, 720px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--edge-hi);
  background: rgba(6, 34, 52, 0.92);
  box-shadow: 0 40px 90px -30px rgba(0, 16, 28, 0.9);
  animation: fx-pop 0.36s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
@keyframes fx-pop { from { opacity: 0; transform: translateY(18px) scale(0.965); } }
.fx-stage {
  position: relative; min-height: 300px;
  background: linear-gradient(180deg, #2f8fa6, #0b4a68);
  border-right: 1px solid var(--edge);
  overflow: hidden;
}
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-stage.no-gl .fx-hint { display: none; }
.fx-hint {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11px; letter-spacing: 0.06em; color: rgba(214, 244, 250, 0.62);
  padding: 4px 9px; border-radius: 999px;
  background: rgba(3, 22, 36, 0.5); border: 1px solid rgba(150, 226, 240, 0.18);
}
.fx-body { padding: 26px 28px 30px; overflow-y: auto; }
.fx-en {
  margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2);
}
.fx-jp { margin: 4px 0 10px; font-size: 26px; letter-spacing: 0.01em; }
.fx-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.85; color: var(--ink-dim); }
.fx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.fx-stat {
  text-align: center; padding: 9px 4px; border-radius: 12px;
  background: rgba(4, 26, 42, 0.6); border: 1px solid var(--edge);
}
.fx-stat b { display: block; font-size: 15px; color: var(--accent); }
.fx-stat span { display: block; margin-top: 2px; font-size: 10px; color: var(--ink-faint); }
.fx-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 18px; }
.fx-rows dt {
  font-size: 11.5px; color: var(--ink-faint); white-space: nowrap;
  padding-top: 2px;
}
.fx-rows dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink); }
.fx-real { color: var(--ink-faint); font-size: 12px; }
.fx-v {
  display: inline-block; margin: 0 5px 5px 0; padding: 2px 8px;
  font-size: 11.5px; border-radius: 999px;
  background: rgba(98, 227, 200, 0.12); border: 1px solid rgba(98, 227, 200, 0.26);
}
.fx-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); }
.fx-p:last-child { margin-bottom: 0; }
.fx-x, .fx-nav {
  position: absolute; z-index: 3;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer; color: var(--ink);
  background: rgba(4, 26, 42, 0.72); border: 1px solid var(--edge);
  transition: background 0.2s, transform 0.2s;
}
.fx-x { right: 12px; top: 12px; width: 34px; height: 34px; font-size: 20px; line-height: 1; }
.fx-nav { top: 50%; margin-top: -20px; width: 40px; height: 40px; font-size: 24px; line-height: 1; }
.fx-prev { left: 12px; }
.fx-next { left: calc(52% - 20px); }
.fx-x:hover, .fx-nav:hover { background: rgba(20, 70, 96, 0.92); transform: scale(1.08); }

@media (max-width: 760px) {
  .fx-card { grid-template-columns: 1fr; max-height: 92vh; }
  .fx-stage { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--edge); }
  .fx-body { padding: 20px 18px 24px; }
  .fx-jp { font-size: 22px; }
  .fx-stats { grid-template-columns: repeat(2, 1fr); }
  .fx-next { left: auto; right: 56px; top: 12px; margin-top: 0; width: 34px; height: 34px; }
  .fx-prev { left: 12px; top: 12px; margin-top: 0; width: 34px; height: 34px; }
  .fish-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
}

.coin-hero {
  margin: 8px 0 26px;
  padding: 22px 24px;
  border-radius: var(--rad);
  border: 1px solid var(--edge);
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(255, 207, 92, 0.13), transparent 60%),
    rgba(6, 32, 50, 0.62);
}
.coin-eq {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px;
}
.ce-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 16px; border-radius: 13px;
  background: rgba(4, 26, 42, 0.62); border: 1px solid var(--edge);
  /* ★式そのものが動く。**左から順に立ち上がる**ので「これが足されていく」が読める */
  animation: ce-in 0.62s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
.ce-item b { font-size: 17px; color: var(--accent); letter-spacing: 0.01em; }
.ce-item span { font-size: 10.5px; color: var(--ink-faint); }
.ce-op { font-size: 19px; color: var(--ink-faint); }
.ce-eq { color: var(--accent-2); }
.ce-hot {
  border-color: rgba(255, 138, 107, 0.44);
  background: rgba(52, 22, 18, 0.5);
}
.ce-hot b { color: var(--coral); }
.ce-out { border-color: rgba(98, 227, 200, 0.4); background: rgba(8, 46, 54, 0.62); }
.ce-out b { color: var(--accent-2); font-size: 15px; }
.rise.in .ce-item:nth-child(1) { animation-delay: 0.05s; }
.rise.in .ce-item:nth-child(3) { animation-delay: 0.17s; }
.rise.in .ce-item:nth-child(5) { animation-delay: 0.29s; }
.rise.in .ce-item:nth-child(7) { animation-delay: 0.41s; }
@keyframes ce-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.coin-note {
  margin: 16px 0 0; text-align: center;
  font-size: 13px; line-height: 1.9; color: var(--ink-dim);
}

.coin-cols { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.coin-feed { margin-top: 22px; }
.coin-cols > .card, .coin-feed {
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
}
.coin-cols > .card > :first-child, .coin-feed > :first-child { margin-top: 0; }
.coin-cols > .card > :last-child, .coin-feed > :last-child { margin-bottom: 0; }
.coin-warn {
  margin-top: 12px !important; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 138, 107, 0.3); background: rgba(52, 22, 18, 0.38);
  font-size: 13px !important;
}
.coin-table-wrap { margin-top: 26px; overflow-x: auto; }
.coin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.coin-table caption {
  text-align: left; padding-bottom: 10px;
  font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint);
}
.coin-table th, .coin-table td {
  padding: 9px 12px; text-align: right; border-bottom: 1px solid rgba(150, 226, 240, 0.11);
}
.coin-table thead th { font-size: 11px; color: var(--ink-faint); font-weight: 600; }
.coin-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); }
.coin-table tbody tr { transition: background 0.2s; }
.coin-table tbody tr:hover { background: rgba(98, 227, 200, 0.07); }
/* 毎分の欄は棒でも出す。**数字だけだと 1 と 9 の差が読み取れない** */
.ct-bar { position: relative; }
.ct-bar i {
  position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px;
  border-radius: 999px; background: rgba(255, 207, 92, 0.16); overflow: hidden;
}
.ct-bar i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  border-radius: 999px; background: var(--accent);
}
.ct-bar b { color: var(--accent); font-size: 14px; }

@media (max-width: 860px) {
  .coin-cols { grid-template-columns: 1fr; }
  .coin-eq { gap: 6px 8px; }
  .ce-item { padding: 8px 11px; }
  .ce-item b { font-size: 14px; }
}


/* ---- ① 見出し: ぼけが晴れながら浮く ---- */
h2.sec { position: relative; }
h2.sec.rise { filter: blur(7px); }
h2.sec.rise.in {
  filter: blur(0);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 1.05s cubic-bezier(0.2, 0.7, 0.2, 1);
}
h2.sec .en { position: relative; overflow: hidden; width: fit-content; }
h2.sec .en::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%,
    rgba(255, 255, 255, 0.85) 46%, rgba(154, 243, 255, 0.5) 54%, transparent 78%);
  translate: -130% 0; opacity: 0;
}
h2.sec.in .en::after { animation: sec-sheen 1.5s 0.35s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
@keyframes sec-sheen {
  0% { translate: -130% 0; opacity: 0; }
  16% { opacity: 1; }
  100% { translate: 130% 0; opacity: 0; }
}
/* 見出しの左に、水位の線が伸びる */
h2.sec::before {
  content: ""; position: absolute; left: -22px; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-2), rgba(98, 227, 200, 0));
  scale: 1 0; transform-origin: top;
  transition: scale 0.95s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1);
}
h2.sec.in::before { scale: 1 1; }

.card.rise, .panel.rise, .step.rise {
  clip-path: inset(0 0 22% 0 round var(--rad));
}
.card.rise.in, .panel.rise.in, .step.rise.in {
  clip-path: inset(0 0 0 0 round var(--rad));
  transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              translate 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              clip-path 1.0s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card, .panel { position: relative; }
.card::after, .panel::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(var(--edge-hi), var(--edge-hi)) left 14px top 0 / 26px 1.5px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) left 0 top 14px / 1.5px 26px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) right 14px top 0 / 26px 1.5px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) right 0 top 14px / 1.5px 26px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) left 14px bottom 0 / 26px 1.5px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) left 0 bottom 14px / 1.5px 26px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) right 14px bottom 0 / 26px 1.5px no-repeat,
    linear-gradient(var(--edge-hi), var(--edge-hi)) right 0 bottom 14px / 1.5px 26px no-repeat;
  opacity: 0;
  transition: opacity 0.9s 0.25s ease;
}
.card.in::after, .panel.in::after, .step.in > .card::after { opacity: 0.75; }
.card:hover::after, .panel:hover::after { opacity: 1; }

/* ---- ④ 図版（スクショ）: 中身が少し引いてから収まる ---- */
.shot img { transition: scale 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.1s ease; }
.rise .shot img { scale: 1.06; filter: saturate(0.7) brightness(0.86); }
.rise.in .shot img { scale: 1; filter: none; }

/* ---- ⑤ 節ぜんたい: 入ってくる間だけ、上に水の膜がかかる ---- */
section > .wrap { position: relative; }
section > .wrap::after {
  content: ""; position: absolute; inset: -30px -40px; pointer-events: none;
  border-radius: 30px;
  background: linear-gradient(180deg,
    rgba(120, 220, 240, 0.13), rgba(120, 220, 240, 0) 55%);
  opacity: 0; transition: opacity 1.2s ease;
}
section.seen > .wrap::after { opacity: 1; }

/* ---- ⑥ 特徴の格子・図鑑の札は、番号ぶん遅らせる ---- */
.feat-grid > .rise:nth-child(1).in { transition-delay: 0.04s; }
.feat-grid > .rise:nth-child(2).in { transition-delay: 0.12s; }
.feat-grid > .rise:nth-child(3).in { transition-delay: 0.20s; }
.feat-grid > .rise:nth-child(4).in { transition-delay: 0.28s; }
.feat-grid > .rise:nth-child(5).in { transition-delay: 0.36s; }
.feat-grid > .rise:nth-child(6).in { transition-delay: 0.44s; }
.fish-grid .fish-card {
  opacity: 0; translate: 0 20px;
}
.fish-grid.in .fish-card {
  opacity: 1; translate: none;
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.42s cubic-bezier(0.2, 0.8, 0.25, 1),
              border-color 0.3s, background 0.3s, box-shadow 0.42s;
  transition-delay: calc(var(--i) * 42ms);
}

@media (prefers-reduced-motion: reduce) {
  h2.sec.rise, h2.sec.rise.in { filter: none; }
  h2.sec .en::after { display: none; }
  h2.sec::before { scale: 1 1; }
  .card.rise, .panel.rise, .step.rise,
  .card.rise.in, .panel.rise.in, .step.rise.in { clip-path: none; }
  .rise .shot img, .rise.in .shot img { scale: 1; filter: none; }
  .fish-grid .fish-card { opacity: 1; translate: none; }
  section > .wrap::after { display: none; }
}