@charset "utf-8";

/* ゼロホー 演出レイヤー(2026-08-16)
   ページに入った要素を順に出し、オレンジの部品を一度だけ光らせる。
   出し方は clip-path と大きさの 2 種類。文章は opacity で隠さない。
   合図は enshutsu.js が付ける class(zh-on / zh-in / zh-roll / zh-armed)。
   ★隠す側の規則には必ず .zh-on を付ける。JS が落ちたとき .zh-on が外れて
     素の見た目に戻る作りなので、.zh-on の無い隠し方は戻らない。 */

:root{
  --zh-ease:cubic-bezier(.22,1,.36,1);
  --zh-step:62ms;
  --zh-lane:200ms;
  /* §10-B の順ぐりループを調整する数字。周期(2 つの並びで別)と、持ち上げる量。
     ★持ち上げる量は §8 / §10 の「触ったとき」と同じ値にすること。
       ループの方が大きいと、触った瞬間にカードが下がる。 */
  --zh-cyc:5s;
  --zh-cyc-inc:5.6s;
  --zh-cyc-case-y:-4px;
  --zh-cyc-inc-y:-5px;
  --zh-wm-ink:rgba(20,24,30,.085);
  --zh-wm-ink-2:rgba(20,24,30,.06);
  --zh-orn-orange:rgba(242,98,42,.28);
  --zh-orn-ink:rgba(20,24,30,.13);
  /* §13-C の玉。大きさは章の上の空き帯(64〜112px + 斜めの分)に収まる値。
     時間は下の 6 つが唯一の出どころで、出番の時刻はそこから足して作る。
     式を使う側へ書き写さないこと(片方だけ直すと必ずずれる)。
     ★--zh-b-swap は玉と文字が入れ替わるのにかける時間。膨らむ時間より短くする。
       同じ長さにすると、消えかけの玉と出かけの文字が重なった時間が長く続き、
       ひとかたまりの塊に見える。玉を先に引かせて、文字だけを伸ばす。
     ★横に進む速さの曲線は §13-C の 2 か所で使う。回転にも同じものを当てるので、
       ここに名前を付けて 1 か所から配る。**別々に書くと必ず食い違い、玉が滑る。** */
  --zh-bd:clamp(46px,5.4vw,74px);
  --zh-b-in:1.15s;
  --zh-b-pop:.42s;
  --zh-b-swap:.16s;
  --zh-b-hold:2s;
  --zh-b-unpop:.3s;
  --zh-b-out:1.15s;
  --zh-b-ease-in:cubic-bezier(.17,.72,.3,1);
  --zh-b-ease-out:cubic-bezier(.7,.02,.86,.38);
  --zh-b-t1:var(--zh-b-in);
  --zh-b-t2:calc(var(--zh-b-in) + var(--zh-b-pop) + var(--zh-b-hold));
  --zh-b-t2b:calc(var(--zh-b-t2) + var(--zh-b-unpop) - var(--zh-b-swap));
  --zh-b-t3:calc(var(--zh-b-t2) + var(--zh-b-unpop));
}

.sec > .wrap,
.band > .wrap,
.sec > .phone-strip,
.band > .phone-strip{position:relative;z-index:1}

/* ── 1. 登場 ─────────────────────────────────────────────
   描画だけを切って出す。矩形も行間も動かない。
   終状態は四方へ大きく逃がす(影とフォーカスリングの張り出しぶん)。
   ★開き始めを遅らせる量 = 並びの中の段差(--zh-d)+ 左からの列(--zh-pd)。
     この 2 つを足したものを --zh-t0 として持たせ、§1-B と共通で使う。
     §12 の「点から膨らむ」も同じ 2 項を足して始めるので、
     どの要素でも「カードが開き終わってから 40ms で中身が出る」で揃う。
     ここだけ変えると、開いたのに中身が出ない空白時間が生まれる。 */
.zh-on .zh-r{
  --zh-t0:calc(var(--zh-d,0) * var(--zh-step,62ms) + var(--zh-pd,0) * var(--zh-lane,200ms));
  clip-path:inset(0 -30px 101% -30px);
  transition:clip-path .58s var(--zh-ease) var(--zh-t0);
}
.zh-on .zh-r.zh-in{clip-path:inset(-160px)}

.zh-on .plan.zh-r,.zh-on .work.zh-r,.zh-on .movie-card.zh-r,
.zh-on .freeplan.zh-r{clip-path:inset(0 -60px 101% -60px)}
.zh-on .plan.zh-r.zh-in,.zh-on .work.zh-r.zh-in,.zh-on .movie-card.zh-r.zh-in,
.zh-on .freeplan.zh-r.zh-in{clip-path:inset(-160px)}

.zh-on.has-rv .rv{transform:none;transition:none}

/* ── 1-B. 出現の動きと、触ったときの動きを 1 つの指定に束ねる ────────
   transition はリストごと後から書いた方に置き換わる。同じ要素へ別々の
   規則で書くと、勝った側だけが残って もう片方が黙って消える。
   出現(clip-path)を持つ部品のうち、触ったときにも動くものは
   ここで両方を 1 本にまとめる。詳細度を 1 つ上げてあるので §1 より強い。

   ★時間と間隔は、それぞれの部品が元から持っていた値をそのまま使う
     (.work は .25s / .plan は .32s / ボタンは .2s)。ここで揃えない。
   ★触っても色が変わらない部品に border-color を足さない。
   ★出現の遅れは §1 の --zh-t0 を読む。式を書き写さない。
   ★§10 で同じ transition を持つ .free-points > li と .bot-points > li は
     ここに入れていない。いまは出現の対象にならない置き方だから当たらないだけで、
     .wrap の直下へ移すと同じ潰れ方をする。移したらここへ足すこと。 */
.zh-on .case.zh-r{
  transition:
    clip-path .58s var(--zh-ease) var(--zh-t0),
    transform .3s var(--zh-ease),
    box-shadow .3s var(--zh-ease),
    border-color .25s ease;
}
.zh-on .work.zh-r{
  transition:
    clip-path .58s var(--zh-ease) var(--zh-t0),
    transform .25s;
}
.zh-on .plan.zh-r{
  transition:
    clip-path .58s var(--zh-ease) var(--zh-t0),
    transform .32s var(--zh-ease),
    box-shadow .32s var(--zh-ease);
}
.zh-on .include.zh-r,
.zh-on .net-cards > article.zh-r{
  transition:
    clip-path .58s var(--zh-ease) var(--zh-t0),
    transform .3s var(--zh-ease),
    box-shadow .3s var(--zh-ease);
}
/* 帯の中の申し込みボタンも出現の対象に入る。ここを書かないと、
   ボタンの色替えと持ち上げがその場で切り替わる。 */
.zh-on .btn.zh-r{
  transition:
    clip-path .58s var(--zh-ease) var(--zh-t0),
    transform .2s,
    background .2s,
    color .2s,
    border-color .2s,
    box-shadow .2s;
}

/* ── 2. 大見出しの出現 ────────────────────────────────────
   見出しと同じ色の面を重ね、その面を自分の clip-path で左から消す。
   面は動かさない(動かすと縁が居残る)。親に overflow は足さない。 */
.zh-on .zh-head{position:relative}
.zh-on .zh-head.zh-r,.zh-on .zh-head.zh-r.zh-in{clip-path:none;transition:none}
.zh-on .zh-head::after{
  content:"";position:absolute;inset:-4px -6px;
  z-index:1;pointer-events:none;background:var(--paper);
  clip-path:inset(0 0 0 0);
  transition:clip-path .8s cubic-bezier(.16,1,.3,1) .1s}
.zh-on .zh-head.zh-in::after{clip-path:inset(0 0 0 101%)}
.zh-on .band-gray .zh-head::after{background:var(--paper-2)}
.zh-on .band-warm .zh-head::after{background:var(--paper-3)}
.zh-on .band-accent .zh-head::after{background:var(--orange)}

/* ── 3. 光が一度だけ横切る ───────────────────────────────── */
.zh-on .zh-glint{
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 38%,rgba(255,255,255,.60) 50%,rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
  background-size:230% 100%;
  background-position:-130% 0;
}
.zh-on .zh-glint.zh-in{animation:zhGlint 1.05s ease-out .18s 1 both}
@keyframes zhGlint{
  from{background-position:-130% 0}
  to{background-position:230% 0}
}
/* ヒーローの帯は元から fadeSeq を持つので、消さずに並べて書く。 */
.zh-on .hero-in .pill.zh-in{
  animation:fadeSeq .3s ease .04s forwards,
            zhGlint 1.05s ease-out 2.6s 1 both,
            zhGlintLoop 7s ease-out 5.2s infinite}
@keyframes zhGlintLoop{
  0%{background-position:-130% 0}
  16%{background-position:230% 0}
  100%{background-position:230% 0}
}

/* ── 4. 枠の外から玉が転がってきて 0 になる ────────────────
   横に進むのは外側、跳ねと回転は内側。1 つの transform にまとめると
   跳ねと直進が混ざって「転がる」に見えない。
   位置と大きさは enshutsu.js が毎回測って変数で渡す。 */
.zh-coin{
  position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  width:var(--zh-cd,96px);height:var(--zh-cd,96px);
  transform:translate3d(var(--zh-x0,1400px),var(--zh-cy,0),0);
}
.zh-coin i{
  display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FF9F6B,var(--orange) 52%,var(--orange-dark));
  box-shadow:0 16px 26px -12px rgba(242,98,42,.85);
}
.zh-coin i::before{
  content:"";position:absolute;inset:17%;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  border-bottom-color:transparent;border-right-color:transparent}

.zh-roll .zh-coin{animation:zhCoinX 1.75s cubic-bezier(.3,.55,.22,1) both,
                            zhCoinGone .26s ease 1.8s both}
.zh-roll .zh-coin i{animation:zhCoinHop 1.75s linear both}

@keyframes zhCoinX{
  from{transform:translate3d(var(--zh-x0,1400px),var(--zh-cy,0),0)}
  to{transform:translate3d(var(--zh-cx,0),var(--zh-cy,0),0)}
}
/* 跳ねの高さは玉の直径に対する比で書く(画面幅で玉の大きさが変わるため)。 */
@keyframes zhCoinHop{
  0%{transform:translateY(calc(var(--zh-cd,96px) * -0.96)) rotate(0deg)}
  14%{transform:translateY(0) rotate(-130deg)}
  30%{transform:translateY(calc(var(--zh-cd,96px) * -0.60)) rotate(-280deg)}
  48%{transform:translateY(0) rotate(-440deg)}
  63%{transform:translateY(calc(var(--zh-cd,96px) * -0.31)) rotate(-570deg)}
  78%{transform:translateY(0) rotate(-690deg)}
  88%{transform:translateY(calc(var(--zh-cd,96px) * -0.115)) rotate(-755deg)}
  100%{transform:translateY(0) rotate(-820deg)}
}
@keyframes zhCoinGone{
  from{opacity:1}
  to{opacity:0}
}
/* 0 は玉が収まった瞬間に中央から開く(位置は動かさない)。 */
.zh-armed .price-hero .num{clip-path:circle(0% at 50% 54%)}
.zh-roll .price-hero .num{animation:zhNumOpen .4s var(--zh-ease) 1.78s forwards}
@keyframes zhNumOpen{to{clip-path:circle(78% at 50% 54%)}}

/* ── 5. ヘッダーの読み進みメーター ───────────────────────── */
.zh-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;z-index:2}
.zh-prog i{display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--zh-read,0));will-change:transform;
  background:linear-gradient(90deg,#FF9457,var(--orange) 55%,var(--orange-dark))}

/* ── 6. 飾りの層(動かさない。入ってきたら出るだけ)──────── */
.sec > .zh-orn,.band > .zh-orn,
.zh-orn{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.zh-orn > *{position:absolute;opacity:0;transition:opacity .9s ease}
.zh-orn.zh-in > *{opacity:1}
.zh-orn > .zh-wm{opacity:1;transition:none}

.zh-ring{border:1px solid var(--zh-orn-orange);border-radius:50%}
.zh-ring.a{width:clamp(190px,27vw,400px);aspect-ratio:1;right:-7%;bottom:-18%}
.zh-ring.b{width:clamp(140px,19vw,270px);aspect-ratio:1;left:-6%;top:12%;
  border-color:var(--zh-orn-ink);border-style:dashed}

.zh-dots{width:clamp(120px,15vw,215px);aspect-ratio:1;
  background-image:radial-gradient(rgba(20,24,30,.16) 1.4px,transparent 1.5px);
  background-size:15px 15px}
.zh-dots.a{right:6%;top:8%}
.zh-dots.b{left:2%;bottom:7%}
.band-accent .zh-dots{background-image:radial-gradient(rgba(255,255,255,.42) 1.4px,transparent 1.5px)}

.zh-hair{width:clamp(150px,24vw,340px);height:1px;background:var(--zh-orn-ink);
  transform:rotate(-31deg);transform-origin:0 50%}
.zh-hair.a{right:3%;top:40%}
.zh-hair.b{left:6%;top:9%}
.band-accent .zh-hair{background:rgba(255,255,255,.32)}

.zh-wm{top:calc(var(--slant) + clamp(4px,1.4vw,22px));
  right:calc(-1 * clamp(6px,2.4vw,54px));
  pointer-events:none;user-select:none;white-space:nowrap}
.zh-wm::before{
  content:attr(data-w);display:block;
  font-size:clamp(66px,11.6vw,176px);font-weight:900;line-height:.86;letter-spacing:.012em;
  color:transparent;-webkit-text-stroke:1.5px var(--zh-wm-ink);
  opacity:0;transition:opacity 1s ease}
.zh-wm.is-long::before{font-size:clamp(48px,8.2vw,124px)}
.zh-orn.zh-in .zh-wm::before{opacity:1}
.band-gray .zh-wm::before{-webkit-text-stroke-color:var(--zh-wm-ink-2)}
.band-accent .zh-wm::before{-webkit-text-stroke-color:rgba(255,255,255,.30)}

/* ── 7. 章タイトル(英字)────────────────────────────────── */
.zh-on .mark{position:relative;padding-bottom:16px;margin-bottom:16px}
.zh-on .mark span{font-size:clamp(27px,4.3vw,54px);letter-spacing:.115em}
.zh-on .mark::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--orange),rgba(242,98,42,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--zh-ease) .18s}
.zh-on .mark.zh-in::after{transform:scaleX(1)}
.zh-on .band-accent .mark::after{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
/* 大きくした分、行間は詰める(2 行になったときの行間比を保つ)。 */
.zh-on .h2{font-size:clamp(26px,3.9vw,44px);line-height:1.32}
.zh-on .promise-head{font-size:clamp(23px,3.4vw,38px);line-height:1.3}

/* ── 8. お客様の声は吹き出しの形にする ───────────────────── */
.zh-on .case-grid{border-top:0;gap:clamp(20px,2.6vw,34px) clamp(16px,2.2vw,28px);
  margin-top:clamp(34px,4vw,52px)}
.zh-on .case{background:#fff;border:2px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px);
  box-shadow:0 22px 40px -32px rgba(20,24,30,.5);
  transition:border-color .25s ease,transform .3s var(--zh-ease),box-shadow .3s var(--zh-ease)}
.zh-on .case:hover{border-color:var(--orange);transform:translateY(-4px);
  box-shadow:0 30px 50px -30px rgba(242,98,42,.55)}
.zh-on .case::before{display:none}
.zh-on .case::after{content:"";position:absolute;left:38px;bottom:-11px;width:18px;height:18px;
  background:#fff;border-right:2px solid var(--line);border-bottom:2px solid var(--line);
  transform:rotate(45deg);transition:border-color .25s ease}
.zh-on .case:hover::after{border-color:var(--orange)}
.zh-on .case b{position:absolute;top:-15px;left:22px;margin:0;
  background:var(--orange);color:#fff;border-radius:999px;
  font-size:14px;line-height:1.9;letter-spacing:.08em;padding:0 14px}
.zh-on .case p{font-size:clamp(15.5px,1.8vw,17.5px);line-height:1.85}
.zh-on .case.zh-r{clip-path:circle(0% at 26% 52%)}
.zh-on .case.zh-r.zh-in{clip-path:circle(135% at 26% 52%)}

/* ── 9. 画像 ─────────────────────────────────────────────
   ★寄りと傾きは .zh-on 付きで書く。付けないと、JS が落ちて .zh-on が
     外れたときに「寄ったまま・傾いたまま・切れたまま」で残る。 */
.zh-ph{overflow:hidden;position:relative}
.zh-on .zh-ph img,.zh-on .zh-ph video{
  transform:perspective(900px) rotateY(5.5deg) scale(1.14);
  transition:transform 1s var(--zh-ease)}
.zh-on .zh-ph.zh-in img,.zh-on .zh-ph.zh-in video{transform:perspective(900px) rotateY(0) scale(1)}
.zh-on .work figure.zh-ph::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--paper);border-left:5px solid var(--orange);
  transform:translate3d(0,0,0);transition:transform .62s var(--zh-ease)}
.zh-on .work figure.zh-ph.zh-in::before{transform:translate3d(101%,0,0)}
.zh-on .work:hover figure.zh-ph.zh-in img,
.zh-on .work:focus-visible figure.zh-ph.zh-in img{transform:perspective(900px) rotateY(0) scale(1.075)}

/* ── 10. 触ったときの手応え ──────────────────────────────── */
.work{position:relative}
.work figure{position:relative}
.work figure::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border:0 solid var(--orange);transition:border-width .28s var(--zh-ease)}
.work:hover figure::after,.work:focus-visible figure::after{border-width:5px}
.work:hover{transform:translateY(-10px)}

.zh-go{position:absolute;right:12px;bottom:12px;z-index:3;display:block;
  width:clamp(42px,3.6vw,52px);aspect-ratio:1;border-radius:50%;background:var(--orange);
  transform:translate3d(0,16px,0) scale(.72);opacity:0;
  transition:transform .4s var(--zh-ease),opacity .28s ease;
  box-shadow:0 16px 30px -14px rgba(242,98,42,.9)}
.zh-go::before{content:"";position:absolute;inset:0;margin:auto;width:34%;height:2px;background:#fff}
.zh-go::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-top:2px solid #fff;border-right:2px solid #fff;transform:translateX(6px) rotate(45deg)}
.work:hover .zh-go,.work:focus-visible .zh-go{transform:translate3d(0,0,0) scale(1);opacity:1}

.plan{transition:transform .32s var(--zh-ease),box-shadow .32s var(--zh-ease)}
.plan:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(20,24,30,.55)}

.btn{position:relative;overflow:hidden;isolation:isolate}
.btn .arw{transition:transform .3s var(--zh-ease)}
.btn:hover .arw{transform:translateX(7px)}
.btn-main:hover{transform:translateY(-3px);box-shadow:0 26px 46px -20px rgba(242,98,42,1)}

.include,.net-cards > article,.free-points > li,.bot-points > li{
  transition:transform .3s var(--zh-ease),box-shadow .3s var(--zh-ease)}
.include:hover,.net-cards > article:hover,.free-points > li:hover,.bot-points > li:hover{
  transform:translateY(-5px);box-shadow:0 28px 50px -34px rgba(20,24,30,.5)}
.include .ico{transition:transform .34s var(--zh-ease),background .25s ease,color .25s ease}
.include:hover .ico{transform:rotate(-7deg) scale(1.08);background:var(--orange);color:#fff}

.faq summary{transition:background .22s ease,padding-left .22s var(--zh-ease)}
.faq summary:hover{background:rgba(242,98,42,.05);padding-left:10px}
.phone{transition:transform .4s var(--zh-ease)}
.phone:hover{transform:translateY(-10px)}

/* ── 10-B. 触らなくても、番号の順に 1 枚ずつ手応えを見せる ──────────
   §8 / §10 の「触ったときの見た目」を、番号順に少しずつずらして自動で見せ、
   終わったら頭から繰り返す。対象は 2 つの並び ── お客様の声のカードと、
   含まれるものの一覧。

   ★見せる形は「触ったとき」と同じ値にすること(持ち上げ量・影・色)。
     ループの方が大きいと、触った瞬間にカードが下がって見える。
   ★順番は並び順(nth-child)でよい。カードは番号どおりに置いてあるので、
     画面が狭くて 4 列 → 2 列 → 1 列に折り返しても 01 → 02 → … で正しい。
     §12 が「実際の左位置」から順位を出しているのとは目的が違う。あちらは
     「左から」なので列数で左右が入れ替わるが、ここは番号そのものが順序。
   ★カードを増やしたら --zh-cyi の行を 1 行足すこと。足さないと、増えた分は
     0 番あつかいになって 1 枚目と同時に光る(消えはしない)。
   ★遅らせる量は animation とは別の行に書く。ショートハンドに calc(var()) を
     入れると、変数が 1 度でも不正になったとき animation ごと無効になる。
     分けておけば、時間差の計算が失敗しても光ること自体は起きる。
     ★ただしこの守りが効くのは遅延の計算だけ。ショートハンド側の 2 つの変数が
       不正になれば animation ごと消える。だから 2 つとも既定値を書いてある。
   ★ループは止めない。止める作りにすると、指で触れる機械では触れた場所に
     :hover が残り続けるため、動きが止まったまま戻らなくなる。
   ★持ち上げに transform を使わず translate を使う。ブラウザは、動きが
     走っている指定については移り変わり(transition)を始めない。触ったときの
     持ち上げは transform なので、別の指定に分けておくと、ループが回っている
     カードでも触ったときだけは じわっと動く。同じ指定にすると その場で切り替わる。
     触ったカードの色を優先させる方法は §10-C。 */
.zh-on .case-grid > .case:nth-child(1),
.zh-on .include-grid > .include:nth-child(1){--zh-cyi:0}
.zh-on .case-grid > .case:nth-child(2),
.zh-on .include-grid > .include:nth-child(2){--zh-cyi:1}
.zh-on .case-grid > .case:nth-child(3),
.zh-on .include-grid > .include:nth-child(3){--zh-cyi:2}
.zh-on .case-grid > .case:nth-child(4),
.zh-on .include-grid > .include:nth-child(4){--zh-cyi:3}
.zh-on .include-grid > .include:nth-child(5){--zh-cyi:4}
.zh-on .include-grid > .include:nth-child(6){--zh-cyi:5}
.zh-on .include-grid > .include:nth-child(7){--zh-cyi:6}
.zh-on .include-grid > .include:nth-child(8){--zh-cyi:7}

.zh-on .case-grid > .case{
  animation:zhCycCase var(--zh-cyc,5s) var(--zh-ease,cubic-bezier(.22,1,.36,1)) infinite;
  animation-delay:calc(var(--zh-cyi,0) * 1s)}
.zh-on .case-grid > .case::after{
  animation:zhCycTail var(--zh-cyc,5s) var(--zh-ease,cubic-bezier(.22,1,.36,1)) infinite;
  animation-delay:calc(var(--zh-cyi,0) * 1s)}
.zh-on .include-grid > .include{
  animation:zhCycInc var(--zh-cyc-inc,5.6s) var(--zh-ease,cubic-bezier(.22,1,.36,1)) infinite;
  animation-delay:calc(var(--zh-cyi,0) * .6s)}
.zh-on .include-grid > .include .ico{
  animation:zhCycIco var(--zh-cyc-inc,5.6s) var(--zh-ease,cubic-bezier(.22,1,.36,1)) infinite;
  animation-delay:calc(var(--zh-cyi,0) * .6s)}

@keyframes zhCycCase{
  0%,30%,100%{translate:0 0;border-color:var(--line);
    box-shadow:0 22px 40px -32px rgba(20,24,30,.5)}
  7%,19%{translate:0 var(--zh-cyc-case-y,-4px);border-color:var(--orange);
    box-shadow:0 30px 50px -30px rgba(242,98,42,.55)}
}
/* 吹き出しの尻尾はカードと一緒に動くので、色だけ合わせる。
   ★ここで transform を触らないこと。尻尾は 45 度に回した正方形そのものなので、
     transform を上書きすると吹き出しの形が失われる。 */
@keyframes zhCycTail{
  0%,30%,100%{border-color:var(--line)}
  7%,19%{border-color:var(--orange)}
}
/* こちらは 8 枚を .6s おきに送るので、光っている時間を短くして
   隣どうしが同時に持ち上がったままにならないようにする。
   ★送りを変えたら周期(--zh-cyc-inc)も一緒に動かすこと。8 枚目が光り終わる前に
     周期が来ると、1 枚目と 8 枚目が重なって「順ぐり」が崩れる。
     いまの配分は 8 枚目が 4.2s に始まり 5.2s に戻り終わる(周期 5.6s)。 */
@keyframes zhCycInc{
  0%,18%,100%{translate:0 0;box-shadow:0 0 0 0 rgba(20,24,30,0)}
  4%,10%{translate:0 var(--zh-cyc-inc-y,-5px);
    box-shadow:0 28px 50px -34px rgba(20,24,30,.5)}
}
/* アイコンは色だけ変える。傾きと拡大は触ったとき専用に空けておく
   (ここで動かすと、触ったときの傾きと足し算になって二重に傾く)。 */
@keyframes zhCycIco{
  0%,18%,100%{background:var(--orange-soft);color:var(--orange)}
  4%,10%{background:var(--orange);color:#fff}
}

/* ── 10-C. 触れた 1 枚は、ループの色より触ったときの色を優先する ────
   色と影はループも触ったときも同じ指定を使うので、動きの方が強くて
   そのままでは触っても変わらない。! を付けて押し上げる。値は §8 / §10 と同じ。
   ★持ち上げには ! を付けない ── そもそもぶつかっていない(ループは translate、
     触ったときは transform)。分けてあるので触ったときだけ じわっと動く。
   ★色と影は、ぶつかっている以上どうしても その場で切り替わる。
     位置と違って距離が無いので、切り替わっても目に付かない。
   ★ループを止める作りにしないこと。指で触れる機械では触れた場所に :hover が
     残り続けるので、止めると並び全体が止まったまま戻らなくなる。 */
.zh-on .case-grid > .case:hover{
  border-color:var(--orange) !important;
  box-shadow:0 30px 50px -30px rgba(242,98,42,.55) !important}
.zh-on .case-grid > .case:hover::after{border-color:var(--orange) !important}
.zh-on .include-grid > .include:hover{
  box-shadow:0 28px 50px -34px rgba(20,24,30,.5) !important}
.zh-on .include-grid > .include:hover .ico{
  background:var(--orange) !important;
  color:#fff !important}

/* ── 11. ヒーロー ────────────────────────────────────────── */
.hero{isolation:isolate}
.hero-veil{z-index:1}
.hero > .wrap{position:relative;z-index:2}
.hero .scroll-wrap{z-index:3}
.price-hero{position:relative}

/* ── 12. 点から膨らんで出る ───────────────────────────────
   小さな点 → 拡大 → 少し膨らむ → 元の大きさで固定。
   対象 = 動画の板と制作例サムネの枠。大きさだけで出す(opacity は使わない)。

   ★開始は「包んでいるカードが開き切ってから」。
     カードの開き始め = --zh-d × --zh-step + --zh-pd × --zh-lane(§1)、開くのに .58s。
     ここは同じ 2 項に 620ms を足すだけなので、**どの要素でも余裕は 620-580 = 40ms 固定**。
     画面幅で --zh-step が変わっても、列が何列でも崩れない。
     ★時間差を §1 と §12 の片方だけに入れないこと。片方だけだと、カードが
       開き切っているのに絵の場所が白いままの時間が最大 0.8 秒できて、
       「画像が出ていない」に見える。
     ★620ms は §1 の .58s に手で合わせた数字。.58s を触るならここも触ること。
   ★--zh-pd は行の中での左からの順位(JS が実際の位置から出してカードに入れる)。
     並び順の番号ではない ── 列数は画面幅で 3 → 2 → 1 と変わるため。
   ★下の 2 行は順番も大事。animation ショートハンドは delay を 0 に戻すので、
     animation-delay を先に書くと時間差が丸ごと消える。
   ★animation-delay を分けて書くこと。ショートハンドに calc(var()) を入れると、
     変数が 1 度でも不正になったとき animation ごと無効になり、
     初期値の scale(.04) だけが残って中身が永久に見えなくなる。
     分けておけば、失敗しても消えるのは時間差だけで、出ること自体は必ず起きる。
   ★下の 2 つのセレクタは 1 つの宣言ブロックのままにすること。同じ値なので
     後から片方が当たっても再生し直しにならない。別ブロックに割って値を変えると、
     その瞬間に途中から再生し直す(動きが飛ぶ)。 */
.zh-on .zh-pop{transform:scale(.04)}
.zh-on .zh-pop.zh-in,
.zh-on .zh-r.zh-in .zh-pop{
  animation:zhPop 1.02s cubic-bezier(.33,.9,.35,1) both;
  animation-delay:calc(var(--zh-d,0) * var(--zh-step,62ms)
    + var(--zh-pd,0) * var(--zh-lane,200ms) + 620ms)}
@keyframes zhPop{
  0%{transform:scale(.04)}
  62%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
/* サムネは面が抜ける演出(§9)と重ねない。中の画像の傾きと寄りも止め、
   外側の「膨らんで出る」1 つだけにする。触ったときの寄りは残す
   (§9 と同じ 1.075 倍。値を変えると出現の前後で寄り方が変わる)。
   ★この 2 行は §9 と詳細度が同じで、後ろに在ることで勝っている。
     節の順番を入れ替えると面抜きが黙って復活する。 */
.zh-on .work figure.zh-pop::before{display:none}
.zh-on .work figure.zh-pop img{transform:none}
.zh-on .work:hover figure.zh-pop img,
.zh-on .work:focus-visible figure.zh-pop img{transform:scale(1.075)}

/* ── 13. 流れるスマホ画面の上端 ───────────────────────────
   触ると 10px 持ち上がる(§10)。帯は横を隠すために overflow:hidden なので、
   上に逃げ場が無いと持ち上げた端が切れる。上へ余白を作り、その分だけ
   上の余白を減らして合計を元の clamp(26px,3.4vw,44px) と一致させる。
   ★この規則に .zh-on を付けないこと。持ち上げ側が .zh-on 無しで効くため、
     付けると JS が動かないときに余白だけ消えて上端が切れる。
   ★下の 1 行は production.css の .phone-strip と詳細度が同じで、
     読み込み順が後ろだから勝っている。link の並び順を入れ替えると
     余白が無言で消えて、上端が切れる状態に戻る。 */
.phone-strip{padding-top:22px;margin-top:clamp(4px,calc(3.4vw - 22px),22px)}

/* ── 13-B. チャットの見本が、実際に会話する ───────────────────
   合図(.zh-on)が付くまでは 7 つの吹き出しが全部そのまま並ぶ。JS が動かない
   ときの見た目は今までと同じ。

   ★この節だけ opacity で隠してよい。この見本は aria-hidden の飾りで、
     読み上げにも公開品質の検査にも載っていないため。他の節では禁止。
   ★隠している間も吹き出しは場所を取り続ける。消して詰めると、会話が進むたびに
     枠の高さが変わってページ全体が上下に動く。
   ★「入力中」の丸は場所を取らない置き方にして、次の返事が出る位置へ JS が置く。
     並びの一員にすると、出し入れのたびに枠が伸び縮みする。 */
.zh-on .bot-demo .bot-log{position:relative}
.zh-on .bot-demo .bot-msg{
  opacity:0;transform:translateY(9px);
  transition:opacity .34s ease,transform .34s var(--zh-ease)}
.zh-on .bot-demo .bot-msg.is-on{opacity:1;transform:none}
/* ★オレンジの吹き出しには §3 の「光が一度だけ横切る」が乗っている。§3 は
   「画面に入ったとき」に 1 回だけ走らせる作りだが、この見本の吹き出しは
   会話がそこまで進むまで出てこない。そのままだと、まだ見えていない間に
   光り終わってしまい 1 コマも見えない。ここでは吹き出しが出た瞬間に走らせる。
   会話が頭から繰り返されるたびに、光も出直す。 */
.zh-on .bot-demo .bot-msg.zh-glint.zh-in{animation:none}
.zh-on .bot-demo .bot-msg.zh-glint.is-on{
  animation:zhGlint 1.05s ease-out .18s 1 both}

.bot-typing{
  position:absolute;left:0;top:0;display:none;align-items:center;gap:5px;
  padding:13px 15px;border-radius:16px;border-bottom-left-radius:5px;
  background:rgba(255,255,255,.10);pointer-events:none}
.zh-on .bot-typing.is-on{display:flex}
/* ★fill-mode を both にすること。none のままだと、2 個目・3 個目は遅延の間だけ
   指定の無い状態(不透明)で描かれ、遅れて沈む。出るたびに 1 回ずつ光って見える。 */
.bot-typing i{display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.75);
  animation:zhBotDot 1.05s ease-in-out infinite both}
.bot-typing i:nth-child(2){animation-delay:.16s}
.bot-typing i:nth-child(3){animation-delay:.32s}
@keyframes zhBotDot{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}

/* ── 13-C. 章の上の空き帯を「0円」の玉が転がってくる ────────────────
   決めた章まで画面を送ると、玉が枠の外から転がって入り、真ん中で止まって
   「0円」に一瞬大きく膨らんで出て、通常の大きさへ戻り、そのまま 2 秒おいて
   また玉に戻り、来たのと同じ向きへ転がって出ていく。
   1 回の読み込みにつき、それぞれ 1 度だけ。

   ★**転がって見える条件 = どの瞬間でも「回った角度 ÷ 1 回転」が「進んだ距離 ÷ 円周」と等しいこと。**
     始めと終わりだけ合わせても駄目で、途中の速さの曲線まで一致していないと、
     入りの前半は氷の上を滑り、抜けぎわはその場で空回りする。
     だから横の動きと回転には **必ず同じ曲線**(--zh-b-ease-in / --zh-b-ease-out)を当てる。
     片方を linear にしない。長さと遅れも同じにする。
   ★玉は §6 の飾りの層(.zh-orn)の中に入れる。理由は 2 つ。
     (1) あの層は章の外側を切り落とすので、枠の外へ出た玉がページの横幅を
         伸ばさない。**切って隠す指定は見た目を隠すだけで、幅の計算からは外れない。**
         章へ直に置くと、外に居る分がそのままページの幅に足されて横スクロールになる。
     (2) 章より内側なので、影が端で切られない。
     ★入れる先を変えるときは、必ず横幅(scrollWidth)を測り直すこと。
   ★飾りの層は「入ってきたら出る」ために中身を薄くしているので、玉だけは
     その対象から外す(下の 1 行目)。外さないと、章が画面に入るまで見えない。
     **position も自分で宣言する**(§6 の `.zh-orn > *` に頼らない。あちらを触ると
     玉が静的配置に戻り、left / top が死んで斜めの縁で頭が欠ける)。
   ★opacity は使わない。出る前と出た後は枠の外に居るので、それだけで見えない。
   ★**右側の枠外は画面幅そのもの(100vw)から作る。数字で持たない。**
     走り終わった玉は測り直さないので、数字で持つと、あとで画面幅が広がったときに
     「抜けた先」が枠の中に入り、玉が帯の中に居残って見えっぱなしになる。
     左側は負の数(玉の直径 + 余白)でよい ── 幅がどう変わっても必ず枠の外に残る。
   ★斜めの分(--slant)を足すのは **帯(.band)のときだけ**。--slant は :root に在るので、
     無条件に足すと、斜めではない章(.sec)に置いたとき下へ寄りすぎて本文に掛かる。
   ★横に動くのは translate、玉の回転は rotate、大小は scale。指定を 3 つに
     分けてある。1 つの transform にまとめると、同時に走る 3 つが互いを
     打ち消して、後から書いたものだけが残る。
     ★**この 3 つは比較的新しい書き方で、古いブラウザには届かない。**届かないと
       玉が左端に居座り、文字が原寸で出る。下の @supports で丸ごと消す。
       JS 側でも同じ判定をして作らない(片方だけだと、もう片方が素通りする)。
   ★止まる位置・入る位置・抜ける位置・回す角度は enshutsu.js が測って渡す。
   ★玉が縮む時間(--zh-b-swap)は、文字が膨らむ時間(--zh-b-pop)より短い。
     同じにすると、消えかけの玉と出かけの文字が長く重なって塊に見える。
   ★**膨らみの頂点は必ずキーフレームに数字で書く。**イージングの行き過ぎで表すと、
     頂点が何倍になるかがどこにも書かれず、測る側も「膨らみ終わった後」しか見られない。
     いまの頂点 = 1.28 倍(§12 の 1.12 倍より強い。ここは控えめにしない)。
     ★頂点は静止時の玉の箱より下へ出る。**頂点を上げるか玉を大きくするなら、
       本文との隙間を頂点で測り直すこと**(狭い画面で余っているのは 4px しかない)。
   ★出番の時刻は :root の --zh-b-t1 / t2 / t2b / t3。6 つの長さから足して作ってある。
     式をここへ書き写さないこと。
   ★animation-delay は必ず別の行に分ける(§12 と同じ理由)。
     ★**正直な限界**: var() の既定値が効くのは「変数が定義されていない」ときだけで、
       「定義されているが値が不正」なときは効かない。--zh-b-t2 → t2b / t3 は calc の
       入れ子なので、途中の 1 つが不正になると animation-delay の行が丸ごと無効になり、
       その行の遅れが全部 0s に落ちる。**そのとき何も起きなくなるのではなく、
       リストの後ろが勝って途中から始まったように見える** ── t2 が不正なら
       「玉が中央からいきなり転がり出て消える」、t2b だけが不正なら
       「横は入り・回転は抜けの分」で食い違って滑る。
       **「既定値があるから順番どおりに動く」とは書けない。**書けるのは
       「1 つも定義されていない場面では既定値で動く」まで。 */
.zh-orn > .zh-ball{
  position:absolute;display:block;opacity:1;transition:none;z-index:1;
  width:var(--zh-bd,64px);height:var(--zh-bd,64px);left:0;
  top:clamp(8px,1vw,16px);
  translate:var(--zh-bx0,150vw) 0}
/* 斜めに切ってある帯だけ、その分下げる。 */
.band > .zh-orn > .zh-ball{top:calc(var(--slant,0px) + clamp(8px,1vw,16px))}
.zh-ball i{
  display:block;position:relative;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FF9F6B,var(--orange) 52%,var(--orange-dark));
  box-shadow:0 14px 24px -12px rgba(242,98,42,.85)}
/* 白い弧。これが無いと、まん丸のままでは回っていることが見えない。 */
.zh-ball i::before{
  content:"";position:absolute;inset:17%;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  border-bottom-color:transparent;border-right-color:transparent}
/* 文字は文書に足さず、属性から描く(章の巨大英字 §6 と同じ作り)。 */
.zh-ball b{
  display:block;position:absolute;left:50%;top:50%;
  translate:-50% -50%;scale:0;
  white-space:nowrap;font-weight:900;line-height:1;letter-spacing:-.01em;
  font-size:var(--zh-bd,64px);color:var(--orange)}
.zh-ball b::before{content:attr(data-w)}
/* オレンジ帯の章に置いたときだけ白へ。飾りは全部この上書きを持っている
   (§6 の点・線・巨大英字)。玉だけ持たせないと、地色と同じ色になって
   文字が無言で消える。いまの 3 か所はオレンジ帯ではないが、増やしたときに
   気づけない類の欠け方なので、先に揃えておく。 */
.band-accent .zh-ball b{color:#fff}

/* 個別の translate / rotate / scale に対応していないブラウザでは、玉を出さない。
   出すと、逃がすはずの translate が丸ごと捨てられて左端に居座り、
   scale:0 も捨てられて「0円」が原寸で見出しに重なる。**壊れた形で固定されるより、
   演出が出ないほうがよい。** */
@supports not (translate:0px){
  .zh-ball{display:none !important}
}

.zh-ball.is-run{
  animation:
    zhBallIn var(--zh-b-in,1.15s) var(--zh-b-ease-in,cubic-bezier(.17,.72,.3,1)) both,
    zhBallOut var(--zh-b-out,1.15s) var(--zh-b-ease-out,cubic-bezier(.7,.02,.86,.38)) forwards;
  animation-delay:0s,var(--zh-b-t3,3.87s)}
/* ★回転は横の動きと同じ曲線・同じ長さ・同じ遅れ。ここを linear にすると滑る。 */
.zh-ball.is-run i{
  animation:
    zhBallRollIn var(--zh-b-in,1.15s) var(--zh-b-ease-in,cubic-bezier(.17,.72,.3,1)) both,
    zhBallShrink var(--zh-b-swap,.16s) cubic-bezier(.5,0,.78,.1) forwards,
    zhBallGrow var(--zh-b-swap,.16s) cubic-bezier(.2,.9,.4,1.1) forwards,
    zhBallRollOut var(--zh-b-out,1.15s) var(--zh-b-ease-out,cubic-bezier(.7,.02,.86,.38)) forwards;
  animation-delay:0s,var(--zh-b-t1,1.15s),var(--zh-b-t2b,3.71s),var(--zh-b-t3,3.87s)}
.zh-ball.is-run b{
  animation:
    zhBallPop var(--zh-b-pop,.42s) cubic-bezier(.33,.9,.35,1) forwards,
    zhBallUnpop var(--zh-b-unpop,.3s) cubic-bezier(.5,0,.78,.1) forwards;
  animation-delay:var(--zh-b-t1,1.15s),var(--zh-b-t2,3.57s)}

@keyframes zhBallIn{
  from{translate:var(--zh-bx0,150vw) 0}
  to{translate:var(--zh-bx1,0px) 0}
}
@keyframes zhBallOut{
  from{translate:var(--zh-bx1,0px) 0}
  to{translate:var(--zh-bx2,-150vw) 0}
}
@keyframes zhBallRollIn{
  from{rotate:0deg}
  to{rotate:var(--zh-br1,-900deg)}
}
@keyframes zhBallRollOut{
  from{rotate:var(--zh-br1,-900deg)}
  to{rotate:var(--zh-br2,-1800deg)}
}
@keyframes zhBallShrink{from{scale:1}to{scale:0}}
@keyframes zhBallGrow{from{scale:0}to{scale:1}}
/* 一瞬 1.28 倍まで行ってから通常の大きさへ戻る。頂点をここに数字で書く。 */
@keyframes zhBallPop{
  0%{scale:0}
  62%{scale:1.28}
  100%{scale:1}
}
@keyframes zhBallUnpop{from{scale:1}to{scale:0}}

/* ── 14. 画面が狭いとき ──────────────────────────────────── */
@media (max-width:900px){
  .zh-wm::before{font-size:clamp(52px,14vw,116px);-webkit-text-stroke-width:1.2px}
  .zh-wm.is-long::before{font-size:clamp(40px,10.4vw,88px)}
  .zh-ring.b,.zh-hair.b,.zh-dots.b{display:none}
  :root{--zh-step:48ms;--zh-lane:160ms}
}
@media (max-width:640px){
  .zh-ring.a{right:-24%;bottom:-10%}
  .zh-go{right:8px;bottom:8px}
  .zh-on .mark span{letter-spacing:.09em}
}

/* ── 15. 「動きを減らす」設定の人には最終形をそのまま ────── */
@media (prefers-reduced-motion:reduce){
  .zh-on .zh-r,.zh-on .zh-r.zh-in,.zh-on .case.zh-r,.zh-on .case.zh-r.zh-in{
    clip-path:none !important;transition:none !important}
  .zh-on .zh-head::after{display:none}
  .zh-on .zh-glint,.zh-on .zh-glint.zh-in{background-image:none !important}
  .zh-on .zh-glint.zh-in{animation:none !important}
  .zh-on .hero-in .pill.zh-in{animation:fadeSeq .3s ease .04s forwards !important}
  .zh-coin{display:none !important}
  .zh-armed .price-hero .num,.zh-roll .price-hero .num{
    clip-path:none !important;animation:none !important}
  .zh-wm::before,.zh-orn > *{opacity:1 !important;transition:none !important}
  .zh-on .mark::after{transform:scaleX(1) !important;transition:none !important}
  .zh-ph img,.zh-ph video{transform:none !important;transition:none !important}
  .zh-on .work figure.zh-ph::before{display:none}
  .case:hover,.work:hover,.plan:hover,.btn-main:hover,.include:hover,
  .net-cards > article:hover,.free-points > li:hover,.bot-points > li:hover,
  .phone:hover{transform:none !important}
  .include:hover .ico{transform:none !important}
  .zh-go{display:none !important}
  .zh-prog{display:none !important}
  /* §12 も止めて最終形のまま置く(止め忘れると点のまま残って中身が見えない)。 */
  .zh-on .zh-pop,.zh-on .zh-pop.zh-in,.zh-on .zh-r.zh-in .zh-pop{
    transform:none !important;animation:none !important}
  /* §13-B のチャットは会話を再生せず、7 つの吹き出しを最初から全部出す。
     「入力中」の丸は出さない。 */
  .zh-on .bot-demo .bot-msg,.zh-on .bot-demo .bot-msg.is-on{
    opacity:1 !important;transform:none !important;transition:none !important}
  .bot-typing,.zh-on .bot-typing.is-on{display:none !important}
  .zh-on .bot-demo .bot-msg.zh-glint.is-on{animation:none !important}
  .bot-typing i{animation:none !important}
  /* §13-C の玉は丸ごと出さない。転がることそのものが中身なので、止めた形を
     置いても意味を持たない。JS 側でも作らない(両方に書くのは、設定を
     読むのが 1 度きりだから ── 途中で設定を変えた人にも効かせる)。 */
  .zh-ball{display:none !important}
  /* §10-B の順ぐりループも止める。常に動き続ける飾りなので、
     ここを書き忘れると「動きを減らす」設定が効かない部品が残る。
     ★止めるのは動きだけにすること。transform:none を巻き添えで当てると、
       45 度に回して作ってある吹き出しの尻尾が ただの正方形になる。
       ループは translate を使っているので、動きを外せば位置は 0 に戻る。 */
  .zh-on .case-grid > .case,.zh-on .case-grid > .case::after,
  .zh-on .include-grid > .include,.zh-on .include-grid > .include .ico{
    animation:none !important}
}