/* ui.css：第7版のUI（2026-11-15）。v4.css のあとに読む。 */

/* ---- 悩み：吹き出しが重なって積もり、最後に「A.」の答え ---- */
.wbox{position:relative;margin-top:36px}
.worries.wstack{position:relative;height:520px;margin:0 auto;max-width:980px;padding:0}
.worries.wstack li.wq{position:absolute;left:var(--x);top:var(--y);width:auto;max-width:330px;margin:0;background:var(--surface,#fff);color:var(--ink);border:1.5px solid var(--ink);border-radius:3px;padding:14px 18px;font:600 15px/1.55 var(--font);box-shadow:4px 4px 0 rgba(0,0,0,.06);transform-origin:30% 100%;transition:filter .5s,opacity .5s}
.worries.wstack li.wq.short{font-size:14px;max-width:280px;padding:11px 15px;color:var(--sub)}
.worries.wstack li.wq::after{content:"";position:absolute;bottom:-9px;left:var(--t,28px);width:14px;height:14px;background:var(--surface,#fff);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:skewX(-25deg) rotate(45deg)}
.worries.wstack li.deco{display:none}
.wbox.settled .worries.wstack li.wq{opacity:.32!important;filter:blur(1px)}
.wanswer{position:absolute;left:50%;top:50%;z-index:100;margin:0;transform:translate(-50%,-50%) scale(.7);opacity:0;display:flex;align-items:baseline;gap:.4em;padding:26px 34px;background:var(--navy);color:#fff;border-radius:10px;font:700 clamp(22px,3vw,36px)/1.35 var(--font-d);white-space:nowrap;box-shadow:0 18px 50px rgba(0,0,0,.18);transition:opacity .3s}
.wanswer.on{opacity:1}
.wanswer .a-mark{font:800 1.5em/1 var(--font-d);color:var(--acc,#C6F432)}
.wanswer .a-txt{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc,#C6F432) 70%,transparent) 62%) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(0.65,0,0.35,1) .35s}
.wanswer.on .a-txt{background-size:100% 100%}
html[data-theme="3"] .wanswer .a-txt{background-image:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 45%,transparent) 62%)}
@media (max-width:860px){
  .worries.wstack{height:auto;display:flex;flex-direction:column}
  .worries.wstack li.wq{position:relative;left:auto;top:auto;max-width:86%;margin-top:-6px}
  .worries.wstack li.wq:nth-child(even){align-self:flex-end}
  .wanswer{position:relative;left:auto;top:auto;transform:none;margin-top:24px;white-space:normal;padding:20px 22px}
  .wbox.settled .worries.wstack li.wq{opacity:.45!important;filter:none}
}

/* ---- 料金：定価 ↔ ローンチセール ---- */
.pswitch{margin-top:40px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;padding:32px 36px}
.ps-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ps-head h3{font-size:22px;margin:0}
.seg{position:relative;display:inline-flex;padding:4px;border-radius:8px;background:var(--bg2);border:1px solid var(--line)}
.seg button{position:relative;z-index:1;min-height:42px;padding:0 20px;border:0;background:none;font:700 15px/1 var(--font);color:var(--sub);cursor:pointer;border-radius:6px;touch-action:manipulation}
.seg button[aria-pressed="true"]{color:var(--on-acc,#fff)}
.seg-pill{position:absolute;top:4px;bottom:4px;left:4px;width:60px;border-radius:6px;background:var(--acc,#002266)}
html:not([data-theme]) .seg button[aria-pressed="true"]{color:#fff}
.ps-lim{margin:10px 0 18px;font-size:14px;color:var(--sub)}
.prow{display:grid;grid-template-columns:7em 1fr auto;grid-template-areas:"n v d" ". note note";align-items:baseline;gap:4px 16px;padding:18px 0;border-top:1px solid var(--line)}
.pname{grid-area:n;font-weight:600;color:var(--sub)}
.pval{grid-area:v;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pnum{font:800 clamp(26px,3.4vw,40px)/1 var(--font-d);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.pval small{font:500 14px/1 var(--font);color:var(--sub)}
.pold{position:relative;font:600 16px/1 var(--font);color:var(--sub);text-decoration:none;opacity:0;transition:opacity .25s}
.pold::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(0.65,0,0.35,1) .15s}
.is-sale .pold{opacity:1}
.is-sale .pold::after{transform:scaleX(1)}
.pdiff{grid-area:d;justify-self:end;font:800 15px/1 var(--font);color:var(--on-acc,#fff);background:var(--acc,#002266);padding:7px 10px;border-radius:4px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .5s cubic-bezier(0.34,1.56,0.64,1)}
.pdiff:empty{display:none}
.is-sale .pdiff{opacity:1;transform:none;transition-delay:.35s}
.pnote{grid-area:note;font-size:13px;color:var(--sub)}
.pnote:empty{display:none}
.prow.off .pnum,.prow.off small{opacity:.35}
.prow:not(.off) .pnote:first-letter{}
.pswitch:not(.is-sale) .prow .pnote{display:none}
.pswitch:not(.is-sale) .prow[data-i="1"] .pnote{display:block}
@media (max-width:560px){.pswitch{padding:22px 18px}.prow{grid-template-columns:1fr auto;grid-template-areas:"n d" "v v" "note note"}}

/* ---- C08：工程の文字を押せることを分かるように ---- */
.stage[data-mod="c08"] .chip{cursor:pointer}
.stage[data-mod="c08"] .chip:focus-visible{outline:2px solid currentColor}

/* ---- C07：生成結果の見本 ---- */
.whydiag .gen-sample rect{transition:opacity .3s}
.pold:empty{display:none}

/* ===== 第8版（2026-11-15） ===== */
/* ペンの線の太さは --pen-k（調整台で変える倍率）で決める */
.pen path{stroke-width:calc(3px * var(--pen-k,1))}
.tagline .pen path{stroke-width:calc(5px * var(--pen-k,1))}
html[data-theme="3"] .pen path{stroke-width:calc(10px * var(--pen-k,1))}
html[data-theme="3"] .tagline .pen path{stroke-width:calc(18px * var(--pen-k,1))}
.marquee{display:none}

/* 料金：旧価格・新価格・単位の列をそろえる */
.pval{display:grid;grid-template-columns:7.5em 8.6em auto;align-items:baseline;gap:0 12px}
.pold{justify-self:end}
.pnum{justify-self:end}
.pdiff{min-width:6.6em;text-align:center}
@media (max-width:560px){.pval{grid-template-columns:6.5em 1fr auto}.pnum{font-size:26px}}

/* 進め方のアイコン */
.flow li .fi{display:block;width:30px;height:30px;margin-bottom:10px;color:var(--acc-text,var(--navy))}
.flow li .fi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow li::before{display:inline-block;margin:0 0 6px}

/* C07のロボット（2Dのベクター。PCでカタカタ作業する） */
.bot-arm{transform-box:fill-box;transform-origin:50% 0}
.bot-arm-l{animation:botType .26s ease-in-out infinite alternate}
.bot-arm-r{animation:botType .26s ease-in-out .13s infinite alternate}
@keyframes botType{from{transform:translateY(0) rotate(0)}to{transform:translateY(5px) rotate(-4deg)}}
.bot-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:botBlink 3.4s infinite}
@keyframes botBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bot-ant{transform-box:fill-box;transform-origin:50% 50%;animation:botPulse 1.2s ease-in-out infinite}
@keyframes botPulse{50%{transform:scale(1.25)}}
.bot-led{animation:botLed .5s steps(2) infinite}
@keyframes botLed{50%{opacity:.3}}
.bot-bits text{font:800 14px/1 ui-monospace,monospace;fill:#111;opacity:0;animation:botBit 2.4s ease-out infinite}
.bot-bits text:nth-child(2){animation-delay:.8s}.bot-bits text:nth-child(3){animation-delay:1.6s;fill:var(--acc-text,#111)}
@keyframes botBit{0%{opacity:0;transform:translateY(16px)}25%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.bot{animation:botBob 1.8s ease-in-out infinite}
@keyframes botBob{50%{transform:translate(330px,-24px)}}
.bot{transform:translate(330px,-22px)}
@media (prefers-reduced-motion:reduce){html:not(.force-motion) .bot,html:not(.force-motion) .bot *{animation:none!important}html:not(.force-motion) .bot-bits text{opacity:1}}
/* 新価格の列は、いちばん長い数字（1,500,000）が入る幅で固定して、行どうしの桁をそろえる */
.pval{grid-template-columns:8em 230px auto}
@media (max-width:560px){.pval{grid-template-columns:auto 150px auto}}
.pold:empty{display:block;visibility:hidden}
/* ヘッダー：ロゴの横のLP名は、ロゴの下の線にそろえ、文字を大きくする */
.hd .logo{align-items:flex-end;gap:12px}
.hd .logo span{font-size:17px;line-height:1;font-weight:700;letter-spacing:.02em;margin-bottom:-1px}
@media (max-width:480px){.hd .logo span{font-size:15px}}

/* ===== 第9版（2026-11-15） ===== */
/* 悩み：下の吹き出しも薄くしない。出たあと上下にゆっくり揺れる（--fy・--fd は ui.js が吹き出しごとに入れる） */
.wbox.settled .worries.wstack li.wq{opacity:1!important;filter:none}
.worries.wstack li.wq{transition:none;opacity:1}
.worries.wstack li.wq.on{animation:wfloat var(--fd,3s) ease-in-out var(--fdl,0s) infinite alternate}
@keyframes wfloat{from{translate:0 0}to{translate:0 var(--fy,8px)}}
@media (prefers-reduced-motion:reduce){html:not(.force-motion) .worries.wstack li.wq.on{animation:none}}

/* ヘッダーのLP名：大きさは --lpname（?tune=1 の調整台で変えられる） */
.hd .logo span{font-size:var(--lpname,20px)}

/* 料金：1行に「月払い　100,000円 → 95,000円 円／月　5% OFF」 */
.prow{grid-template-columns:6.5em 9em 2em 210px 6.5em auto;grid-template-areas:"n o a v u d" ". note note note note note";align-items:baseline;column-gap:10px}
.prow .pname{grid-area:n}.prow .pold{grid-area:o;justify-self:end}.prow .parr{grid-area:a;justify-self:center;color:var(--sub);font-weight:700}
.prow .pnum{grid-area:v;justify-self:end}.prow .punit{grid-area:u;font:500 14px/1 var(--font);color:var(--sub)}
.prow .pdiff{grid-area:d;justify-self:start}.prow .pnote{grid-area:note}
.pswitch:not(.is-sale) .parr{opacity:0}
.parr{transition:opacity .3s}
@media (max-width:760px){.prow{grid-template-columns:auto 1fr auto;grid-template-areas:"n n d" "o a ." "v v u" "note note note"}.prow .pnum{justify-self:start}}

/* 進め方：番号の横にアイコン、4つの箱は同じ幅 */
.flow{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;align-items:center;column-gap:10px}
.flow li::before{grid-column:1;grid-row:1;margin:0}
.flow li .fhead{grid-column:2;grid-row:1;display:flex}
.flow li .fhead .fi{width:24px;height:24px;margin:0}
.flow li .ftitle{grid-column:1 / 3;grid-row:2;margin-top:10px;font-weight:700}
.flow li > span:last-child{grid-column:1 / 3;grid-row:3;align-self:start}
@media (max-width:760px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 作品のウィンドウ：事例ページの形（映像 → 業種 → 題名 → 一文 → 項目 → 背景・狙い・言葉 → 事例へ） */
dialog.work.case{max-width:min(1040px,94vw);max-height:calc(100dvh - 32px);overflow:auto}
dialog.work.case .vid{aspect-ratio:16/9;background:var(--navy)}
dialog.work.case .body{padding:40px 56px 48px;display:grid;gap:18px}
dialog.work.case .c-cat{margin:0;font:700 13px/1 var(--font);letter-spacing:.08em;color:var(--acc-text,var(--mid))}
dialog.work.case h3{margin:0;font:700 clamp(24px,3vw,36px)/1.3 var(--font-d);color:var(--navy)}
dialog.work.case .c-lead{margin:0;font:500 18px/1.8 var(--font);color:var(--ink)}
dialog.work.case .c-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
dialog.work.case .c-meta dt{grid-row:1;padding:14px 0 0;font-size:12px;color:var(--sub)}
dialog.work.case .c-meta dd{grid-row:2;margin:0;padding:4px 16px 14px 0;font-weight:600}
dialog.work.case .c-sec{display:grid;grid-template-columns:10em 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
dialog.work.case .c-sec h4{margin:0;font:700 15px/1.6 var(--font-d);color:var(--navy)}
dialog.work.case .c-sec p{margin:0;line-height:1.9;color:var(--ink)}
dialog.work.case .caselink{margin:12px 0 0}
@media (max-width:760px){dialog.work.case .body{padding:24px 20px 32px}dialog.work.case .c-meta{grid-template-columns:1fr}dialog.work.case .c-meta dt,dialog.work.case .c-meta dd{grid-row:auto}dialog.work.case .c-sec{grid-template-columns:1fr;gap:8px}}

/* C07：頼んでいる人の顔 */
.whydiag .who{animation:whoNod 2.4s ease-in-out infinite}
@keyframes whoNod{50%{transform:translate(130px,160px)}}
.whydiag .who{transform:translate(130px,162px)}
@media (prefers-reduced-motion:reduce){html:not(.force-motion) .whydiag .who{animation:none}}

/* 元案（ブランド色）：ローンチセールの札を他の案と同じ位置に。白と灰色だけにならないよう、面を紺の薄い色に。ペンは文字の紺と重ならない色に */
html:not([data-theme]){--bg2:#EEF2FA;--stage:#E8EDF7;--line:#D5DCEA;--light:#F5F7FC;--pen:#F2A93B;--pen-hl:#F2A93B;--acc:#002266;--acc-text:#3F598C;--on-acc:#fff;--surface:#fff;--navy:#002266}
html:not([data-theme]) .hero .badge{position:static;width:auto;height:auto;border-radius:8px;padding:12px 16px;display:block;text-align:left;box-shadow:none;justify-self:start}
html:not([data-theme]) .hero .badge b{display:block;margin:0 0 4px}
html:not([data-theme]) .pen{mix-blend-mode:multiply}
html:not([data-theme]) .pen-underline,html:not([data-theme]) .pen-circle{z-index:-1}
html:not([data-theme]) .hero .pen{mix-blend-mode:normal}
html:not([data-theme]) .hero .pen-strike path{stroke:#F2A93B}

/* AI構築支援は案2をもとに、元案の紺に寄せた色（濃い青緑・生成り・琥珀） */
html[data-lp="build"][data-theme="2"]{--navy:#14304A;--mid:#2E5F7A;--slate:#8AA7B8;--pale:#CFDCE4;--ink:#13202C;--sub:#3A5163;--line:#D8E1E4;--bg2:#EFEEE6;--stage:#E9EEEE;--acc:#A86A1A;--acc-line:#C9862F;--acc-text:#8E5814;--dark2:#21486A;--onDark:#DCE7EF;--shade:20,48,74;--accent:#14304A;--accent2:#2E5F7A;--field:#5E8296;--photo-back:#C9862F;--pen:#C9862F;
  --ring:#14304A,#21486A,#A86A1A,#2E5F7A,#3F7590,#1A3A57,#8E5814,#2A5670,#102538,#5A8098}

/* ===== 第10版（2026-11-15） ===== */
/* 冒頭：大きな言葉と、その下の文・写真の間を少し広く */
html[data-theme] .hero .hgrid{row-gap:68px}
html:not([data-theme]) .hero .tagline{margin-bottom:16px}
/* 元案：ペンの線を太く。ローンチセールの札は他の案と同じ大きさと間に */
html:not([data-theme]) .pen path{stroke-width:calc(5px * var(--pen-k,1))}
html:not([data-theme]) .tagline .pen path{stroke-width:calc(9px * var(--pen-k,1))}
html:not([data-theme]) .hero .badge{margin-top:12px;background:rgba(255,255,255,.96);color:var(--navy)}
html:not([data-theme]) .hero .badge b{font-size:16px}
html:not([data-theme]) .hero .badge span{font-size:13px}

/* 料金：最初は定価を左に出し、セールに切り替えると右にセール価格が回って出る */
.prow .pold{justify-self:start;font:700 20px/1 var(--font-d);color:var(--navy);transition:font-size .3s,color .3s,opacity .3s;opacity:1}
.is-sale .prow .pold{font-size:16px;color:var(--sub)}
.pold::after{background:var(--sub)}
.pswitch:not(.is-sale) .prow:not(.only) .pnum,.pswitch:not(.is-sale) .prow:not(.only) .punit,.pswitch:not(.is-sale) .prow .pdiff{visibility:hidden}
.prow.only .pold{display:none}

/* 進め方：番号とアイコンの大きさをそろえる */
.flow li::before{font:800 22px/24px var(--font-d)}
.flow li .fhead .fi{width:24px;height:24px}

/* AIと合わせる良さ（3つ） */
.syn{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.syn li{background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.syn .no{display:block;font:800 22px/1 var(--font-d);color:var(--acc-text,var(--mid));margin-bottom:12px}
.syn b{display:block;font:700 18px/1.5 var(--font-d);color:var(--navy);margin-bottom:8px}
.syn p{margin:0;color:var(--sub);line-height:1.8}
@media (max-width:860px){.syn{grid-template-columns:1fr}}

/* 作品のウィンドウ：項目は見出しと中身の組で、3列にそろえる */
dialog.work.case .c-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:8px 0 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
dialog.work.case .c-m{display:grid;gap:4px;align-content:start}
dialog.work.case .c-m span{font-size:12px;color:var(--sub)}
dialog.work.case .c-m b{font-weight:600}
dialog.work.case .c-m[hidden]{display:none}
@media (max-width:760px){dialog.work.case .c-meta{grid-template-columns:1fr;gap:12px}}

/* C07：文と図の間を広く。人はロボットと同じ高さに */
.whydiag{margin-top:56px}
.whydiag .who{transform:translate(130px,104px)}
@keyframes whoNod{50%{transform:translate(130px,102px)}}
/* C07：人はロボットと同じくらいの大きさに */
.whydiag .who{transform:translate(130px,86px) scale(1.35)}
@keyframes whoNod{50%{transform:translate(130px,84px) scale(1.35)}}

/* ===== 第11版（2026-11-15） ===== */
/* 一番下：「©eureka inc. / … / お問い合わせ」の1行 */
.ft{padding:28px 0}
.ft .wrap{display:block}
.ft-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
.ft-row a{color:var(--ink);text-decoration:none}
.ft-row span{color:var(--sub)}
@media (hover:hover){.ft-row a:hover{text-decoration:underline}}

/* ---- 第13版 ---- */
/* ロボの腕：肩で少し、ひじで大きく曲げてキーを打つ */
.bot-arm,.bot-fore{transform-box:view-box}
.bot-arm-l{animation:botShoulder .26s ease-in-out infinite alternate}
.bot-arm-r{animation:botShoulder .26s ease-in-out .13s infinite alternate}
.bot-arm-l .bot-fore{animation:botElbowL .26s ease-in-out infinite alternate}
.bot-arm-r .bot-fore{animation:botElbowR .26s ease-in-out .13s infinite alternate}
@keyframes botShoulder{from{transform:rotate(0)}to{transform:rotate(-3deg)}}
@keyframes botElbowL{from{transform:rotate(0)}to{transform:rotate(16deg)}}
@keyframes botElbowR{from{transform:rotate(0)}to{transform:rotate(-16deg)}}
/* 「雑に頼んでいる」の丸：線を細く、背景に溶けない濃い緑で、文字の後ろに描く */
html[data-theme="3"] .why .pen-circle path{stroke:#7DAA00;stroke-width:calc(5px * var(--pen-k,1))}
html[data-theme="3"] .why .pen-circle{mix-blend-mode:normal}
/* 実績の章：ほかの章と同じ背景にする */
html[data-theme] #works{background:var(--bg2);color:var(--ink)}
html[data-theme] #works h2{color:inherit}
html[data-theme] #works .lead{color:var(--sub)}
html[data-theme] #works .sc{color:var(--sub);opacity:1}
html[data-theme] #works .worklist button{color:var(--ink);border-bottom-color:var(--line)}
html[data-theme] #works .worklist .n{color:var(--sub)}
html[data-theme] #works .worklist button:focus-visible{outline-color:var(--navy)}
html[data-theme] #works .mk .pen path{stroke:var(--pen)}
html[data-theme="3"] #works .pen-underline path{stroke:var(--pen-hl)}
@media (hover:hover){html[data-theme] #works .worklist button:hover{color:var(--navy)}}
/* 料金：定価は小さくせず、消し線だけ */
.pold{font:800 clamp(26px,3.4vw,40px)/1 var(--font-d);font-variant-numeric:tabular-nums;color:var(--sub)}
.pold::after{height:3px}
@media (max-width:560px){.pold{font-size:26px}}
/* 体制：プロフィールの前の見出し */
.prof-cap{margin:40px 0 16px;font:700 14px/1.4 var(--font);color:var(--sub);letter-spacing:.04em}
/* 実績の輪：縦に回る輪が上下で切れないよう、高さを足す */
#works .ring{aspect-ratio:16/10}
@media (max-width:760px){#works .ring{aspect-ratio:1/1}}

/* ---- 第14版 ---- */
/* ヘッダーは画面の上に付いてこない */
.hd{position:relative}
/* 悩みの章：吹き出しが半分出たところで、薄い背景を一枚敷いて答えを出す */
.wveil{position:absolute;inset:-12px;z-index:90;background:color-mix(in srgb,var(--bg2,#fff) 78%,transparent);border-radius:12px;opacity:0;transition:opacity .45s linear;pointer-events:none}
.wveil.on{opacity:1}
@media (max-width:860px){.wveil{display:none}}

/* ---- 第15版 ---- */
/* ロボ：8秒でくり返す。前半は普通に作業し、後半はノって目がニッコリになり、鼻歌の音符が出て体が揺れる */
.bot-eyeset{animation:botNormal 8s infinite}
.bot-happy{opacity:0;animation:botHappy 8s infinite}
@keyframes botNormal{0%,44%{opacity:1}47%,97%{opacity:0}100%{opacity:1}}
@keyframes botHappy{0%,44%{opacity:0}47%,97%{opacity:1}100%{opacity:0}}
.bot-notes{opacity:0;animation:botHappy 8s infinite}
.bot-notes text{font:800 16px/1 sans-serif;fill:#111;animation:botNote 1.6s ease-out infinite}
.bot-notes text:nth-child(2){animation-delay:.55s;fill:var(--acc-text,#111)}
.bot-notes text:nth-child(3){animation-delay:1.1s}
@keyframes botNote{0%{opacity:0;transform:translate(0,10px)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-14px)}}
.bot-in{transform-box:view-box;transform-origin:60px 172px;animation:botGroove 8s ease-in-out infinite}
@keyframes botGroove{0%,46%{transform:rotate(0)}52%{transform:rotate(-5deg)}58%{transform:rotate(5deg)}64%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}76%{transform:rotate(-5deg)}82%{transform:rotate(5deg)}88%{transform:rotate(-5deg)}94%{transform:rotate(4deg)}98%,100%{transform:rotate(0)}}
/* 料金：消し線は、数字が動き出してからゆっくり引く */
.pold::after{transition:transform .8s cubic-bezier(0.65,0,0.35,1) .5s}

/* ---- 第17版 ---- */
/* ロボ：PCと机は動かさない（体だけが揺れる） */
.bot{animation:none}

/* ---- 第18版 ---- */
/* ロボ：11秒でくり返す。普通に作業（0〜4秒）→ニッコリ（4〜7秒）→ニッコリで鼻歌（7〜11秒） */
.bot-eyeset{animation:botNormal 11s infinite}
.bot-happy{animation:botHappy 11s infinite}
.bot-notes{animation:botHum 11s infinite}
.bot-in{animation:botGroove 11s ease-in-out infinite}
@keyframes botNormal{0%,35%{opacity:1}37%,98%{opacity:0}100%{opacity:1}}
@keyframes botHappy{0%,35%{opacity:0}37%,98%{opacity:1}100%{opacity:0}}
@keyframes botHum{0%,63%{opacity:0}66%,97%{opacity:1}100%{opacity:0}}
@keyframes botGroove{0%,64%{transform:rotate(0)}68%{transform:rotate(-5deg)}72%{transform:rotate(5deg)}76%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}84%{transform:rotate(-5deg)}88%{transform:rotate(5deg)}92%{transform:rotate(-5deg)}96%{transform:rotate(4deg)}99%,100%{transform:rotate(0)}}
/* %OFFの札：行き過ぎの大きさを調整台で変えられる（--badge-y、1で行き過ぎなし） */
.pdiff{transition:opacity .2s,transform .5s cubic-bezier(0.34,var(--badge-y,1.05),0.64,1)}

/* ---- 第20版 ---- */
/* 文字に乗せる線と丸：描く長さと緩急は調整台で変えられる（--pen-dur、--pen-cdur、--pen-x1、--pen-x2） */
.pen path{transition:stroke-dashoffset var(--pen-dur,.75s) cubic-bezier(var(--pen-x1,.65),0,var(--pen-x2,.35),1)}
.pen-circle path{transition-duration:var(--pen-cdur,.75s)}
dialog.work .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}

/* ---- 第28版 ---- */
/* 左上：「eureka inc. のデザイン顧問」。「の」だけ小さく（--lpno、調整台で変えられる） */
.hd .logo .lp-no{font-size:var(--lpno,13px);font-weight:500;margin-right:.15em;vertical-align:baseline}
/* 「の」と後ろの文字の間（--lpnogap、調整台で変えられる） */
.hd .logo .lp-no{margin-right:var(--lpnogap,2px)}

/* ---- 第35版 ---- */
/* 章の番号とタイムコードは、制作のための目印だったので画面に出さない */
.sc{display:none!important}