/* =========================================================
   かくい 公式HP　スタイル
   世界観：「灯りを持って、一緒に潜る海」（docs/03_design.md）
   技術：HTML / CSS / JavaScript のみ（docs/03_tech.md）
   スマホ（375px）を基準に作り、768px・1024px で広げる
   色・文字・余白・動きの速さと加減速は、すべてここ（:root）に集める
   ========================================================= */
:root {
  /* 海（上＝水面 → 下＝深海） */
  --sea-top: #22628A;
  --sea-top-2: #1A5379;
  --sea-mid: #123F62;
  --sea-mid-2: #0A2A45;
  --sea-deep: #04111D;

  /* 基本の色 */
  --cream: #F6F1E7;        /* ヘッダー・暗い場所の見出し */
  --card: #FFFDF8;         /* カードの面 */
  --ink: #1B2733;          /* カードの本文 */
  --navy: #0F2E4C;         /* カードの見出し・選択中の印 */
  --text-sub: #3E4C5A;     /* カードの説明文 */
  --on-dark: #E2EDF3;      /* 海の上の本文 */
  --on-dark-sub: #C9D9E3;  /* 海の上の補足 */

  /* 水の色 */
  --aqua: #3FA3C2;
  --aqua-deep: #186A84;
  --aqua-light: #A9E2F0;   /* キャッチ2行目・番号・流れの綱 */
  --foam: #BFE7F2;         /* 暗い場所の文字リンク */
  --pale: #DDF0F5;         /* 選択中の面・安心の一言 */
  --glow: #7FF0FF;         /* 灯り（見出しの灯・光の粒・目盛り） */
  --jelly: #9FE6F5;        /* クラゲ（水色だけ） */

  /* 使う場所を限定する色 */
  --line-green: #06C755;   /* LINEボタンだけ */
  --line-ink: #FFFFFF;     /* LINEボタンの文字 */
  --trick: #E9A23B;        /* 仕掛け解説の電球・付せんの枠線だけ */
  --note: #FFF4D6;         /* 付せんの紙 */
  --field-border: #6B7A88; /* 入力欄・選択肢の枠（背景と3:1以上） */
  --error: #A3262A;        /* エラーの文字 */

  /* 文字 */
  --font-head: 'Zen Maru Gothic', sans-serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;

  /* 形 */
  --radius: 20px;
  --radius-s: 12px;
  --shadow: 0 10px 28px rgba(2, 10, 20, .28);

  /* 余白 */
  --space-section: 88px;   /* セクションの上下（パソコンは120px） */
  --space-side: 20px;
  --width-max: 1160px;
  --bar-h: 76px;           /* 画面下のバーの高さ */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 動きの性格：水の中のように、ゆっくり浮かんで、やわらかく止まる */
  --ease-water: cubic-bezier(.22, .61, .36, 1);
  --dur-quick: .35s;   /* 押したときの反応 */
  --dur-base: .9s;     /* 浮かび上がる */
  --dur-slow: 1.4s;    /* 灯がともる */
  --dur-open: .6s;     /* フォームが開く */
  --dur-shot: 6s;      /* 制作実績の画面画像が流れる */
  --rise: 18px;        /* 浮かび上がる距離 */
  --spread: .6;        /* キャッチの光の粒が飛んでくる距離の倍率（スマホは小さく。はみ出し対策） */
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* ページ内リンクのなめらかなスクロールは、読み込みが終わってから効かせる（main.js が .is-ready を付ける）。
   最初から効かせると、別ページから index.html#works などで来たとき、その位置へ移らないことがあるため */
html.is-ready { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--sea-deep); color: var(--on-dark);
  font-family: var(--font-body); font-size: 17px; line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + 20px + var(--safe-bottom));
  /* 保険（はみ出しの元は .hero で切っている）。html には付けない：sticky やスクロールの合図が効かなくなるため */
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0; }
p { margin: 0; }
a { color: var(--foam); }
svg { display: block; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.card :focus-visible, .sim :focus-visible, .form :focus-visible { outline-color: var(--aqua-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 10px;
  background: var(--cream); color: var(--navy); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- 海（画面に固定。スクロールで深くなる：G4） ----------
   高さは「アドレスバーが隠れたときの大きい画面の高さ」（100lvh）。出入りしても、すき間が出にくい */
.sea { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; background: var(--sea-deep); }
.sea__layer { position: absolute; inset: 0; will-change: opacity; }
.sea__mid { background: linear-gradient(180deg, var(--sea-mid), var(--sea-mid-2)); }
.sea__top { background: linear-gradient(180deg, var(--sea-top), var(--sea-top-2)); }
.sea__light { background: radial-gradient(130% 55% at 50% -8%, rgba(191, 231, 242, .32), transparent 62%); }
.sea__snow {
  bottom: auto; height: calc(100% + 260px); opacity: 0; will-change: transform, opacity;
  background-image:
    radial-gradient(circle, rgba(220, 236, 245, .55) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(220, 236, 245, .35) 1px, transparent 1.6px);
  background-size: 110px 130px, 170px 260px;
  background-position: 10px 20px, 60px 90px;
}
/* マリンスノーがカクつくときは、下の1行のコメントを外す（動かさず、透明度だけ変える代替案） */
/* .sea__snow { transform: none !important; } */
.sea__glow {
  opacity: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(127, 240, 255, .55) 0 2px, rgba(127, 240, 255, .12) 3px, transparent 12px),
    radial-gradient(circle at 88% 55%, rgba(156, 255, 224, .5) 0 2px, rgba(156, 255, 224, .1) 3px, transparent 12px),
    radial-gradient(circle at 20% 78%, rgba(127, 240, 255, .4) 0 1.5px, transparent 10px),
    radial-gradient(circle at 80% 16%, rgba(127, 240, 255, .4) 0 1.5px, transparent 10px);
}

/* ---------- 水深の目盛り（右はし：G5） ---------- */
.gauge {
  position: fixed; right: 7px; top: 24vh; height: 46vh; width: 2px; z-index: 15;
  background: rgba(169, 226, 240, .2); border-radius: 2px; pointer-events: none;
}
.gauge__dot {
  position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 8px rgba(127, 240, 255, .8);
}
.gauge__label {
  display: none; position: absolute; right: 16px; top: -9px; white-space: nowrap;
  font-size: 12px; line-height: 1.5; color: var(--on-dark-sub); letter-spacing: .08em;
}

/* ---------- ヘッダー（水面） ---------- */
/* z-index は水深の目盛り（15）より上：スマホで開いたメニューの上に目盛りが乗らないように。付せん（20）・画面下のバー（30）よりは下 */
.site-header { position: relative; z-index: 16; background: var(--cream); color: var(--navy); }
.site-header__inner {
  max-width: var(--width-max); margin: 0 auto; min-height: 68px; padding: 0 var(--space-side);
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.logo__whale { width: auto; height: 26px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-head); }
.logo__name { font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.logo__roman { font-weight: 500; font-size: 11px; letter-spacing: .3em; color: var(--aqua-deep); }
.menu-btn {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid #C9BFAB; background: transparent;
  color: var(--navy); display: grid; place-items: center; cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
/* 開いている間は「×」にして、閉じられることを見せる（「＝」が回りながら「×」に入れかわる） */
.menu-btn__open, .menu-btn__close {
  transform-box: fill-box; transform-origin: center;
  transition: opacity var(--dur-quick) var(--ease-water), transform var(--dur-quick) var(--ease-water);
}
.menu-btn__close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.menu-btn[aria-expanded="true"] .menu-btn__open { opacity: 0; transform: rotate(90deg) scale(.5); }
.menu-btn[aria-expanded="true"] .menu-btn__close { opacity: 1; transform: none; }
/* メニューは水面から少し浮かび上がるように開く（閉じるときは逆） */
.site-nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--cream); padding: 4px 20px 14px; box-shadow: 0 16px 30px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--dur-quick) var(--ease-water), transform var(--dur-quick) var(--ease-water), visibility 0s var(--dur-quick);
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-quick) var(--ease-water), transform var(--dur-quick) var(--ease-water), visibility 0s; }
/* 項目が上から順に0.04秒ずつ遅れて現れる */
.site-nav li { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-quick) var(--ease-water), transform var(--dur-quick) var(--ease-water); }
.site-nav.is-open li { opacity: 1; transform: none; }
.site-nav.is-open li:nth-child(2) { transition-delay: .04s; }
.site-nav.is-open li:nth-child(3) { transition-delay: .08s; }
.site-nav.is-open li:nth-child(4) { transition-delay: .12s; }
.site-nav.is-open li:nth-child(5) { transition-delay: .16s; }
.site-nav.is-open li:nth-child(6) { transition-delay: .2s; }
.site-nav.is-open li:nth-child(7) { transition-delay: .24s; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 11px 4px; color: var(--navy); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(201,191,171,.5); }
.waves { position: absolute; left: 0; right: 0; top: 100%; height: 40px; overflow: hidden; pointer-events: none; }
.waves__layer { position: absolute; left: 0; top: -1px; width: 200%; height: 30px; color: var(--cream); }
.waves__layer svg { width: 100%; height: 100%; }
.waves__layer--back { top: 8px; opacity: .3; animation: kwave 22s linear infinite reverse; }
.waves__layer--front { animation: kwave 14s linear infinite; }
/* 最初の画面が見えていないときは、波も止める */
.waves-paused .waves__layer { animation-play-state: paused; }

/* ---------- ① 最初の画面 ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 68px - var(--bar-h) - 40px);
  min-height: calc(100svh - 68px - var(--bar-h) - 40px);
  display: flex; align-items: center;
  /* 光の粒が画面の右はしからはみ出さないように切る（clip はスクロールの箱を作らないので sticky を壊さない） */
  overflow-x: hidden;
  overflow-x: clip;
}
.hero__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 光の筋：動くぼかし（filter）は重いので、端がやわらかいグラデーションで描く */
.ray {
  position: absolute; top: -40px; left: var(--x); width: var(--w); height: 90%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(191, 231, 242, .26), rgba(191, 231, 242, .08) 60%, rgba(191, 231, 242, 0) 100%);
  transform-origin: top center;
  animation: kray var(--dur) ease-in-out var(--delay, 0s) infinite;
}
.mote {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(191, 231, 242, .7); box-shadow: 0 0 6px rgba(191, 231, 242, .6);
  animation: kmote var(--dur) ease-in-out var(--delay, 0s) infinite;
}
.hero:not(.is-active) .ray, .hero:not(.is-active) .mote { animation-play-state: paused; }
.hero__inner { position: relative; width: 100%; max-width: var(--width-max); margin: 0 auto; padding: 72px 24px 56px; }
.catch { font-size: clamp(40px, 11.2vw, 88px); line-height: 1.35; letter-spacing: .02em; color: var(--cream); }
.catch__line { display: block; white-space: nowrap; }
/* 崩し：2行目を右へずらし、「散らばったものが形にまとまる」流れを見せる */
.catch__line--2 { padding-left: 1.4em; color: var(--aqua-light); }
.ch { display: inline-block; position: relative; }
.hero__sub { margin-top: 28px; font-size: 16px; line-height: 1.8; color: var(--on-dark); max-width: 24em; }
.cue {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 44px; min-height: 44px;
  color: var(--cream); text-decoration: none; font-size: 15px; font-weight: 500;
  border-bottom: 1px solid rgba(246, 241, 231, .4);
}
.cue svg { width: 18px; height: 18px; }

/* キャッチ：光の粒が集まって、文字に灯がともる（G1・G2） */
.js .hero:not(.play) .ch,
.js .hero:not(.play) .hero__sub,
.js .hero:not(.play) .cue { opacity: 0; }
.hero.play .ch { animation: kchar var(--dur-base) var(--ease-water) calc(var(--d) + .7s) both; }
.hero.play .ch::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px 2px rgba(127, 240, 255, .7);
  pointer-events: none; animation: kdot 1.3s var(--ease-water) var(--d) both;
}
.hero.play .hero__sub { animation: krise var(--dur-base) var(--ease-water) 1.9s both; }
.hero.play .cue { animation: krise var(--dur-base) var(--ease-water) 2.3s both; }
.hero.play .cue svg { animation: kcue 1.6s var(--ease-water) 3.2s 2; }

/* ---------- セクション共通 ---------- */
.section { position: relative; max-width: var(--width-max); margin: 0 auto; padding: var(--space-section) var(--space-side); }
.sec-title { display: flex; align-items: center; gap: 14px; font-size: 30px; line-height: 1.45; color: var(--cream); }
/* 見出しの灯：セクションに入るとともる（G6） */
.sec-title::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(169, 226, 240, .3);
  transition: background var(--dur-slow) var(--ease-water), box-shadow var(--dur-slow) var(--ease-water);
}
.section.is-in .sec-title::before { background: var(--glow); box-shadow: 0 0 12px 3px rgba(127, 240, 255, .5); }
.sec-lead { margin-top: 12px; font-size: 16px; color: var(--on-dark-sub); }
.sec-head { margin-bottom: 32px; }

/* 浮かび上がる（G7） */
.js [data-rise] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-base) var(--ease-water), transform var(--dur-base) var(--ease-water); transition-delay: var(--delay, 0s); }
.js [data-rise].is-in { opacity: 1; transform: none; }

.card { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.card h3 { color: var(--navy); }
.card p { color: var(--text-sub); }

/* 水色のクラゲ（1〜2匹だけ。見えていないときは止める） */
.deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.jelly {
  position: absolute; top: var(--y, auto); bottom: var(--b, auto); left: var(--x, auto); right: var(--r, auto);
  width: var(--s, 26px); height: calc(var(--s, 26px) * 1.67); color: var(--c, var(--jelly)); opacity: .45;
  animation: kjelly var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}
.jelly svg, .jelly use { width: 100%; height: 100%; }
[data-deco]:not(.is-active) .jelly { animation-play-state: paused; }

/* ボタン */
.btn-line {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px;
  background: var(--line-green); color: var(--line-ink); text-decoration: none; font-weight: 700; font-size: 17px;
  border-radius: 999px; transition: transform var(--dur-quick) var(--ease-water);
}
.btn-line:hover, .btn-line:visited { color: var(--line-ink); }
.btn-line:active { transform: scale(.97); }
.btn-line svg { width: 24px; height: 24px; flex: none; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid var(--navy); background: transparent; color: var(--navy);
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background var(--dur-quick) var(--ease-water);
}
.btn-ghost:hover { background: var(--pale); }
.btn-ghost svg { width: 18px; height: 18px; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: none;
  color: var(--aqua-deep); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}

/* ---------- ② できること ---------- */
.service-list { display: grid; gap: 18px; }
.service { min-width: 0; padding: 26px 22px; }
.service__icon { width: 56px; height: 56px; border-radius: 28px; background: var(--pale); color: var(--navy); display: grid; place-items: center; margin-bottom: 14px; }
.service__icon svg { width: 28px; height: 28px; }
.service h3 { font-size: 22px; margin-bottom: 8px; }
.service p { font-size: 16px; }

/* ---------- ③ 選ばれる3つの理由（カードにしない。番号を大きく） ---------- */
.reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.reason { position: relative; padding-left: 4px; }
.reason__num {
  display: block; margin-left: -4px; font-family: var(--font-head); font-weight: 700; font-size: 64px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--aqua-light);
  transition: color var(--dur-slow) var(--ease-water);
}
/* 番号に色が満ちる（G8） */
.reason.is-in .reason__num { color: rgba(169, 226, 240, .22); }
.reason h3 { margin-top: -18px; font-size: 21px; line-height: 1.5; color: var(--cream); }
.reason p { margin-top: 8px; font-size: 16px; color: var(--on-dark); }

/* ---------- ④ 制作実績 ---------- */
.works-list { display: grid; gap: 22px; }
.works-list > * { min-width: 0; }
.work { overflow: hidden; }
.work__thumb { position: relative; height: 180px; overflow: hidden; display: grid; place-items: center; }
.work__thumb--self { background: linear-gradient(180deg, var(--sea-top) 0%, var(--sea-mid) 55%, var(--sea-deep) 100%); }
.mini { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--cream); }
.mini span { display: block; padding-left: 1.4em; color: var(--aqua-light); }
.mini-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 14px; border-radius: 7px; background: rgba(246, 241, 231, .25); }
/* カフェ：画面画像ができるまでの仮の表示（カフェ見本の色で描いた小さな画面） */
.work__thumb--cafe { background: #EDE3D1; place-items: start center; padding: 16px 18px 0; }
.cafe-mock {
  width: 100%; max-width: 300px; height: 100%; overflow: hidden; border-radius: 10px 10px 0 0;
  background: #F7F2E8; box-shadow: 0 6px 18px rgba(47, 74, 58, .18);
}
.cafe-mock__head {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #D6C8B0;
  color: #2F4A3A; font-family: serif; line-height: 1.2;
}
.cafe-mock__head span { font-size: 9px; color: #5C5249; letter-spacing: .08em; }
.cafe-mock__head b { font-size: 13px; letter-spacing: .08em; }
.cafe-mock__hero {
  padding: 14px 12px 12px;
  background: radial-gradient(60% 80% at 75% 20%, rgba(255, 246, 220, .95), transparent 70%), #DCCDB3;
}
.cafe-mock__hero p { font-family: serif; font-weight: 600; font-size: 13px; line-height: 1.5; color: #2B2622; }
.cafe-mock__hero em { font-style: normal; color: #2F4A3A; font-size: 16px; }
.cafe-mock__lines { display: grid; gap: 6px; padding: 12px; }
.cafe-mock__lines i { display: block; height: 6px; border-radius: 3px; background: #D6C8B0; }
.cafe-mock__lines i:nth-child(2) { width: 80%; }
.cafe-mock__lines i:nth-child(3) { width: 55%; background: #8A4B1F; height: 14px; border-radius: 4px; }
/* 画面画像（差し替え後）。G9：画面に入ったら、ゆっくり下へ流れて止まる */
.work__shot { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
[data-shot-scroll] { place-items: initial; padding: 0; }
[data-shot-scroll] .work__shot { transition: transform var(--dur-shot) var(--ease-water) .4s; }
[data-shot-scroll].is-in .work__shot { transform: translateY(var(--shot-move, 0px)); }
.work__body { padding: 18px 20px 22px; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--aqua-deep); background: var(--pale); border-radius: 12px; padding: 2px 10px; }
.work h3 { margin: 8px 0 6px; font-size: 20px; }
.work p { font-size: 15px; margin-bottom: 16px; }

/* ---------- ⑤ 料金 ---------- */
.plan-list { display: grid; gap: 18px; }
.plan { position: relative; min-width: 0; padding: 24px 22px; }
.plan h3 { font-size: 21px; }
.plan__lead { margin-top: 2px; font-size: 14px; }
.plan__price { margin: 10px 0 14px; font-family: var(--font-head); font-weight: 700; font-size: 38px; line-height: 1.2; color: var(--navy); letter-spacing: .01em; }
.card .plan__price { color: var(--navy); }
/* 「円〜（税込）」は途中で切れず、入らないときはまとめて次の行へ */
.plan__price small { display: inline-block; font-size: 15px; font-weight: 500; margin-left: 2px; }
.plan__rows { margin: 0; font-size: 14px; line-height: 1.6; }
/* 値が項目名の横に入らないときは、値を次の行（右寄せ）へ送る。1文字ずつ縦に折れないように */
.plan__rows div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid #E4DED2; }
.plan__rows dt { color: var(--text-sub); flex: none; }
.plan__rows dd { margin: 0 0 0 auto; min-width: 0; color: var(--ink); font-weight: 500; text-align: right; }
.plan--pick { border: 2px solid var(--navy); padding-top: 30px; }
.plan__badge { position: absolute; top: -13px; left: 20px; background: var(--navy); color: var(--cream); font-size: 13px; font-weight: 700; border-radius: 13px; padding: 2px 14px; }
.card .plan__deal { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--aqua-deep); }
.plan__detail { margin-bottom: 6px; font-size: 13px; color: var(--text-sub); }
.plan__detail summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--aqua-deep); }
.price-extra { margin-top: 32px; display: grid; gap: 24px; }
.price-extra > div { min-width: 0; }
.price-extra h3 { font-size: 18px; color: var(--cream); margin-bottom: 6px; }
.price-extra dl { margin: 0; font-size: 15px; }
.price-extra dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(169, 226, 240, .22); }
.price-extra dd { margin: 0; flex: none; text-align: right; font-weight: 700; color: var(--cream); }
.price-extra dt { min-width: 0; color: var(--on-dark); }
.price-extra dt small { display: block; font-size: 13px; line-height: 1.6; color: var(--on-dark-sub); }
.price-note { margin-top: 12px; font-size: 14px; color: var(--on-dark-sub); }

/* 料金シミュレーター（機能①） */
.sim { position: relative; margin-top: 48px; padding: 0 16px 22px; background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 「いまの目安」の帯：シミュレーターの中ではずっと上に付いてくる（G10）。結果の欄が見えている間は隠す */
/* 上へ22pxずらして置くので、付いてくる位置は 8px＋22px（見た目の上はしが画面の上から8pxになる） */
.sim__peek {
  position: sticky; top: calc(8px + 22px); z-index: 5; margin: 0 -8px; transform: translateY(-22px);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--navy); color: var(--cream); border-radius: 999px; padding: 8px 18px; box-shadow: 0 6px 16px rgba(2,10,20,.3);
  transition: opacity var(--dur-quick) var(--ease-water), visibility 0s;
}
.sim__peek.is-hidden { opacity: 0; visibility: hidden; transition: opacity var(--dur-quick) var(--ease-water), visibility 0s var(--dur-quick); }
.sim__peek span { font-size: 13px; }
.sim__peek strong { font-family: var(--font-head); font-size: 18px; }
.sim__title { font-size: 23px; line-height: 1.5; color: var(--navy); }
.card .sim__lead, .sim__lead { margin-top: 4px; font-size: 15px; color: var(--text-sub); }
.sim__noscript { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--navy); }
.sim__group { margin: 26px 0 0; padding: 0; border: none; min-width: 0; }
.sim__group legend, .stepper__label { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 17px; color: var(--navy); }
.sim__step { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pale); color: var(--navy); font-family: var(--font-head); font-size: 14px; line-height: 26px; text-align: center; }
.choice-list { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; min-width: 0; padding: 10px 16px;
  border: 1.5px solid var(--field-border); border-radius: 14px; cursor: pointer; background: var(--card);
  transition: background var(--dur-quick) var(--ease-water), border-color var(--dur-quick) var(--ease-water);
}
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.choice__name { min-width: 0; font-weight: 500; line-height: 1.4; }
.choice__tag { display: inline-block; margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--cream); background: var(--navy); border-radius: 10px; padding: 0 8px; vertical-align: 2px; }
.choice__price { margin-left: auto; font-family: var(--font-head); font-weight: 700; color: var(--navy); white-space: nowrap; }
.choice.is-checked { border-color: var(--navy); background: var(--pale); box-shadow: inset 0 0 0 1px var(--navy); }
.choice:focus-within { outline: 3px solid var(--aqua-deep); outline-offset: 2px; }
.stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.stepper__label { margin: 0; flex-wrap: wrap; min-width: 0; }
.stepper__label small { width: 100%; padding-left: 36px; font-size: 13px; font-weight: 500; color: var(--text-sub); }
.stepper__ctrl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.stepper__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy); background: var(--card);
  color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; transition: transform var(--dur-quick) var(--ease-water);
}
.stepper__btn:active { transform: scale(.92); }
.stepper__btn:disabled { opacity: .35; cursor: default; }
.stepper output { min-width: 2.2em; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--navy); }
.card .sim__hint, .sim__hint { margin-top: 8px; font-size: 14px; color: var(--text-sub); }
.sim__result { margin-top: 30px; padding: 22px 18px; border-radius: 16px; background: var(--pale); }
.sim__label { font-size: 14px; color: var(--text-sub); }
.sim__total { margin: 2px 0 16px; font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1.25; color: var(--navy); font-variant-numeric: tabular-nums; }
.sim__total .sim__yen { font-size: 17px; margin-left: 2px; }
/* 「〜158,000円」は途中で折り返さず、入らないときはまとめて次の行へ（375px幅のはみ出し対策） */
.sim__total .sim__range { display: inline-block; font-size: 26px; }
.sim__monthly { margin-top: 2px; font-size: 16px; font-weight: 500; color: var(--ink); }
.sim__advice { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--navy); background: var(--card); font-size: 14px; color: var(--ink); border-radius: 0 10px 10px 0; }
.sim__note { margin: 16px 0 18px; font-size: 13px; color: var(--text-sub); }
.sim__links { display: flex; justify-content: center; margin-top: 8px; }

/* ---------- ⑥ ご依頼の流れ（綱をたどって降りる：G11） ---------- */
.flow-wrap { position: relative; }
.flow { list-style: none; margin: 0; padding: 0; }
.flow__line, .flow__fill { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; }
.flow__line { background: rgba(169, 226, 240, .2); }
.flow__fill { background: var(--aqua-light); transform-origin: top center; transform: scaleY(0); }
/* JavaScriptが動かないときは、綱は伸びきった状態 */
html:not(.js) .flow__fill { transform: none; }
.flow__step { position: relative; display: flex; gap: 18px; padding-bottom: 30px; }
.flow__step > div { min-width: 0; }
.flow__step:last-child { padding-bottom: 0; }
.flow__num {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sea-mid-2); border: 2px solid rgba(169, 226, 240, .45); color: var(--on-dark);
  font-family: var(--font-head); font-weight: 700; line-height: 36px; text-align: center;
  transition: background var(--dur-base) var(--ease-water), color var(--dur-base) var(--ease-water), border-color var(--dur-base) var(--ease-water);
}
.flow__step.is-reached .flow__num { background: var(--aqua-light); border-color: var(--aqua-light); color: var(--navy); }
.flow h3 { margin-top: 4px; font-size: 20px; color: var(--cream); }
.flow p { margin-top: 4px; font-size: 16px; color: var(--on-dark); }
.flow .flow__relief { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 14px; background: var(--pale); color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.6; }

/* ---------- ⑦ プロフィール ---------- */
.profile { padding: 30px 22px; }
.profile__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile__icon { flex: none; width: 84px; height: 84px; border-radius: 50%; background: var(--navy); color: #6CC4DC; display: grid; place-items: center; }
.profile__icon svg { width: 58px; height: 35px; }
.profile__icon img { width: 100%; height: 100%; border-radius: 50%; }
.profile__name { font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1.3; }
.card .profile__name { color: var(--navy); }
.profile__roman { display: block; font-size: 12px; font-weight: 500; letter-spacing: .3em; color: var(--aqua-deep); }
.profile__meta { font-size: 15px; }
.profile__text { min-width: 0; }
.profile__text p + p { margin-top: 12px; }
.card .profile__text p { color: var(--ink); }

/* ---------- ⑧ お問い合わせ（いちばん深い場所） ---------- */
.contact { text-align: center; padding-bottom: 0; }
.contact .sec-title { justify-content: center; font-size: 28px; }
.contact__lead { margin: 14px 0 32px; color: var(--on-dark-sub); }
.contact__cta { position: relative; max-width: 460px; margin: 0 auto; }
.btn-line--big { position: relative; min-height: 72px; font-size: 20px; }
.btn-line--big svg { width: 28px; height: 28px; }
/* LINEボタンにだけ灯がともる（一度ともったら止まる。点滅させない：G12） */
.btn-line--big::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(6, 199, 85, .38), transparent);
  opacity: 0; transition: opacity 1.6s var(--ease-water) .3s;
}
.contact.is-in .btn-line--big::before { opacity: 1; }
.contact__form { position: relative; max-width: 560px; margin: 26px auto 0; }
.form-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; background: none; border: none;
  color: var(--foam); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.form-toggle svg { width: 16px; height: 16px; transition: transform var(--dur-quick) var(--ease-water); }
.form-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* たためるフォーム（G16）：行の高さを 0 から 1 へ。JavaScriptが動かないときは最初から開いている */
.form-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-open) var(--ease-water); }
.js .form-panel:not(.is-open) { grid-template-rows: 0fr; }
.form-panel__inner { overflow: hidden; min-height: 0; }
.js .form-panel:not(.is-open) .form-panel__inner { visibility: hidden; transition: visibility 0s var(--dur-open); }
.form__noscript { margin-top: 12px; font-size: 15px; color: var(--on-dark); }
html:not(.js) .form { display: none; }
.form { margin-top: 12px; padding: 24px 20px; text-align: left; }
.card .form__req-note { font-size: 14px; color: var(--text-sub); margin-bottom: 8px; }
.req { display: inline-block; font-size: 12px; font-weight: 700; color: var(--cream); background: var(--navy); border-radius: 8px; padding: 0 7px; margin-left: 6px; vertical-align: 2px; line-height: 1.7; }
.field { margin-top: 18px; }
.field label, .field legend { display: block; font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 6px; padding: 0; }
.field fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 17px; color: var(--ink);
  border: 1.5px solid var(--field-border); border-radius: 10px; background: #FFFFFF;
}
.field textarea { min-height: 110px; resize: vertical; }
.checks { display: grid; gap: 4px; }
.checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; color: var(--ink); margin: 0; }
.checks input { flex: none; width: 20px; height: 20px; accent-color: var(--navy); }
.card .field__error { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--error); }
/* わなの欄：人には見えない（display:none にすると機械に見抜かれやすいので、画面の外へ出す） */
/* top:0 で、たたんだフォームの外（ページの下）にはみ出してページが長くならないようにする */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.btn-submit {
  width: 100%; min-height: 56px; margin-top: 24px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: var(--cream); font-size: 17px; font-weight: 700;
}
.btn-submit:disabled { opacity: .6; cursor: default; }
.card .form__privacy { margin-top: 12px; font-size: 13px; }
.card .form__done { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--pale); color: var(--navy); font-weight: 700; font-size: 15px; }
.card .form__fail { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #FBEDEC; color: var(--error); font-weight: 700; font-size: 15px; }

/* 海底の飾り（一番下の余白が多くなりすぎないよう、低めにする） */
.seabed-area { position: relative; height: 96px; margin-top: 32px; overflow: hidden; }
.seabed { position: absolute; left: 0; bottom: 0; width: 100%; height: 56px; color: #020A12; }
/* 遠くのクジラの影：一度だけ横切る（G13） */
.far-whale { position: absolute; top: 4px; left: 0; width: 110px; color: var(--foam); opacity: .12; transform: translateX(-140px); }
.far-whale svg { width: 100%; height: auto; transform: scaleX(-1); }
.contact.is-in .far-whale { animation: kswim 34s linear 1.2s 1 both; }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 20px 0 8px; border-top: 1px solid rgba(169, 226, 240, .18); font-size: 13px; color: #B7C7D3; text-align: left;
}
.site-footer b { font-family: var(--font-head); font-size: 16px; color: var(--cream); }
.sns-links { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.sns-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--foam); }

/* ---------- 画面下のバー（G14） ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(14px + var(--safe-bottom)) max(14px, env(safe-area-inset-left, 0px));
  background: rgba(4, 16, 30, .9); border-top: 1px solid rgba(169, 226, 240, .2);
}
.js .action-bar { transform: translateY(110%); transition: transform var(--dur-base) var(--ease-water); }
.js .action-bar.is-shown { transform: none; }
.trick-btn {
  flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border: 1px solid #C9BFAB; border-radius: 22px; background: var(--card); color: var(--text-sub);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.trick-btn svg { width: 16px; height: 16px; }
.trick-btn .js-trick-label { display: inline-block; min-width: 7em; text-align: left; }
.trick-btn.is-on { background: #F7E3BE; color: var(--ink); }
.action-bar__line { position: relative; flex: 1; min-width: 0; }
.btn-line--bar { min-height: 52px; padding: 0 12px; font-size: 17px; gap: 8px; }
.btn-line--bar svg { width: 22px; height: 22px; }

/* ---------- 仕掛け解説モード（付せん：G15） ---------- */
[data-trick] { position: relative; }
html.shikake-on [data-trick] { outline: 2px dashed rgba(233, 162, 59, .8); outline-offset: 6px; }
/* 点線の枠の角を丸くするため、角丸のない囲みにだけ角丸を付ける。
   シミュレーターはカード自身の角丸（20px）のままにする（しかけオンで形が変わらないように） */
html.shikake-on [data-trick]:not(.sim) { border-radius: 14px; }
.note {
  position: absolute; z-index: 20; right: 4px; bottom: calc(100% + 12px);
  width: min(290px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 16px 14px 12px; background: var(--note); color: var(--ink); text-align: left;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.7;
  border-radius: 3px 3px 12px 3px; box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  transform: rotate(-1.2deg);
}
.note--below { bottom: auto; top: calc(100% + 14px); }
.note--left { right: auto; left: 4px; transform: rotate(1deg); }
/* 付せんを留めるテープ */
.note::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: rgba(246, 241, 231, .75); border: 1px solid rgba(233, 162, 59, .35); transform: rotate(-3deg);
}
.note__icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--trick); color: var(--ink); }
.note p { margin: 0; color: var(--ink); }
.note:not([hidden]) { animation: knote .5s var(--ease-water) var(--i, 0ms) both; }
.note--left:not([hidden]) { animation-name: knote-left; }
/* スマホ：最初の画面が見えている間は、画面下のLINEボタンの付せん（10番）を出さない。
   キャッチの付せん（1番）の上に重なって隠してしまうため。少し下へ進むと貼られる（main.js が body に .hero-in-view を付け外し） */
@media (max-width: 767px) {
  .hero-in-view .action-bar__line > .note { display: none; }
}

/* =========================================================
   パソコン（768px以上）
   ========================================================= */
@media (min-width: 768px) {
  :root { --space-section: 120px; --space-side: 56px; --spread: 1; }
  body { font-size: 18px; line-height: 1.9; }
  .menu-btn { display: none; }
  .site-nav { display: block; position: static; background: none; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav li { opacity: 1; transform: none; transition: none; }
  .site-nav ul { display: flex; gap: 26px; }
  .site-nav a { border: none; padding: 8px 0; font-size: 15px; }
  .site-nav__sp { display: none; }
  .site-header__inner { min-height: 80px; padding: 0 40px; }
  .gauge { right: 24px; }
  .hero__inner { padding: 120px 56px 96px; }
  .hero__sub { font-size: 19px; margin-top: 36px; }
  .sec-title { font-size: clamp(32px, 3.4vw, 42px); }
  .sec-lead { font-size: 18px; }
  .sec-head { margin-bottom: 48px; }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .service { padding: 40px 36px; }
  /* 理由は、右下へ一段ずつ降りていく並び（崩し） */
  .reason { max-width: 62%; }
  .reason:nth-child(2) { margin-left: 19%; }
  .reason:nth-child(3) { margin-left: 38%; }
  .reason__num { font-size: 88px; }
  .reason h3 { font-size: 24px; margin-top: -26px; }
  .jelly { opacity: .5; }
  .works-list { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .work__thumb { height: 240px; }
  .mini { font-size: 30px; }
  /* 料金のカードは、768〜1023pxでは1列（3列だと1枚が約200pxになり、表が読めないため。3列は1024px以上） */
  .plan { padding: 30px 26px; }
  .plan--pick { padding-top: 36px; }
  .price-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .sim { max-width: 760px; margin: 72px auto 0; padding: 0 40px 36px; }
  .sim .choice-list--plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim .choice-list--plans .choice { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .sim .choice-list--plans .choice__price { margin-left: 0; }
  .flow-wrap { max-width: 720px; }
  .profile { display: flex; gap: 40px; align-items: center; padding: 48px; }
  .profile__head { flex: 0 0 200px; flex-direction: column; text-align: center; margin: 0; }
  .profile__icon { width: 150px; height: 150px; }
  .profile__icon svg { width: 104px; height: 62px; }
  .contact .sec-title { font-size: clamp(32px, 3.6vw, 46px); }
  .btn-line--big { min-height: 80px; font-size: 22px; }
  .far-whale { width: 180px; }
  .action-bar { justify-content: space-between; align-items: flex-end; padding: 0 28px calc(22px + var(--safe-bottom)); background: none; border: none; pointer-events: none; }
  .action-bar > * { pointer-events: auto; }
  .trick-btn { font-size: 13px; padding: 0 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .action-bar__line { flex: none; }
  .btn-line--bar { min-height: 60px; padding: 0 30px; font-size: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
  /* 最初の画面の付せん（1番）は、キャッチの下に置く（768〜1023px）。
     左はしは左下の「しかけを閉じる」ボタン（右はし約173px）より右へ、右はしは右下のLINEボタンの付せん（10番）より左へ収める。
     （位置：本文の左はし56px＋132px＝188px／幅：画面幅から 188px と 10番の幅・余白 約332px を引いた分。最大290px） */
  .hero__text > .note { right: auto; left: 132px; width: min(290px, calc(100vw - 520px)); }
}

/* =========================================================
   広いパソコン（1024px以上）：料金のカードを3列に
   ========================================================= */
@media (min-width: 1024px) {
  .plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 22px; }
  .plan { padding: 30px 22px; }
  .plan--pick { top: -16px; }
  /* 1024px付近でも「248,000円〜（税込）」が1行に入る大きさ */
  .plan__price { font-size: clamp(32px, 3.1vw, 38px); }
  /* 最初の画面の付せん（1番）は、キャッチの右上に置く。
     画面の高さが低くても（1024×768・1280×720 など）左下の「しかけを閉じる」ボタンや画面の下にかからず、
     右下のLINEボタンの付せん（10番）よりも上に収まる。キャッチ（最大88px・右はし約630px）の右の空きに入る */
  .hero__text > .note { top: 0; bottom: auto; left: auto; right: 4px; width: 290px; }
}

/* =========================================================
   とても広い画面（1360px以上）：水深の目盛りの横に、いまのセクション名を出す
   （これより狭いと、名前が本文のカードの右はしに重なるため。点と目盛りは768px以上で出る）
   ========================================================= */
@media (min-width: 1360px) {
  .gauge__label { display: block; }
}

/* =========================================================
   動き
   ========================================================= */
@keyframes kwave { to { transform: translateX(-50%); } }
@keyframes kray { 0%, 100% { opacity: .45; transform: skewX(-14deg); } 50% { opacity: 1; transform: skewX(-8deg) translateX(18px); } }
@keyframes kmote { 0%, 100% { transform: translate(0, 0); opacity: .35; } 50% { transform: translate(6px, -18px); opacity: .9; } }
/* 光の粒：飛んでくる距離は --spread で画面の幅に合わせる（スマホは小さく） */
@keyframes kdot {
  0% { transform: translate(calc(var(--dx) * var(--spread)), calc(var(--dy) * var(--spread))) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  65% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes kchar { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes krise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes kcue { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
@keyframes kswim { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 40px)); } }
/* クラゲ：ゆっくり上下に漂うだけ（跳ねない・回らない） */
@keyframes kjelly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes knote { from { opacity: 0; transform: translateY(8px) rotate(-3deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes knote-left { from { opacity: 0; transform: translateY(8px) rotate(3deg); } to { opacity: 1; transform: rotate(1deg); } }

/* 「動きを減らす」設定の人には、動きを止める（海の色が深くなるのは残す） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, html.is-ready { scroll-behavior: auto; }
  .js .hero:not(.play) .ch, .js .hero:not(.play) .hero__sub, .js .hero:not(.play) .cue { opacity: 1; }
  /* 光の粒は動きの最後で消える作りなので、動きを止めると残ってしまう。最初から出さない */
  .hero.play .ch::after { content: none; }
  .js [data-rise] { opacity: 1; transform: none; }
  .far-whale { display: none; }
  .js .action-bar { transform: none; }
}