/* ==========================================================
   PUDU（ロボット事業）ページ — Robotics の色 = グレー
   robotshare.css の共通部品（header / footer / .lbl / .pill /
   .flow / .g-band / reveal）の上に載せる
   ========================================================== */
:root{
  --rb:#7c7a78;        /* Robot grey（TOPと同じ） */
  --rb-ink:#2a2826;    /* 暗いグレー（帯・大見出し） */
  --rb-soft:#e9e7e4;   /* 薄いグレー面 */
  --rb-soft2:#f0efec;
  --rb-line:#d6d3cf;
}
.page-pudu .lbl::before{background:var(--rb);box-shadow:10px 0 0 var(--c-drone),20px 0 0 var(--c-ai)}
.page-pudu .lead{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:36em}
.page-pudu .head h2{font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.35;margin:10px 0 0;letter-spacing:-.01em}
.page-pudu .head{margin-bottom:clamp(28px,4vw,48px)}
.page-pudu section{padding:0 0 var(--pad)}
.sp{display:none}
@media(max-width:600px){.sp{display:inline}}

/* ghost pill（枠だけ） */
.pill--ghost{background:transparent !important;color:var(--ink) !important;border:1px solid var(--ink)}
.pill--ghost:hover{background:var(--ink) !important;color:#fff !important}

/* ---------- Hero ---------- */
.ph{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(40px,6vw,80px);overflow:clip}
.ph .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center}
.ph h1{font-family:var(--f-en);font-weight:700;font-size:clamp(44px,7.4vw,108px);line-height:.98;letter-spacing:-.045em;color:var(--ink);margin:14px 0 18px}
.ph h1 .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ph h1 .hl>span{display:block}
.js .ph h1 .hl>span{transform:translateY(112%);animation:heroLine .9s var(--ease-out) forwards .15s}
.js .ph h1 .hl:nth-child(2)>span{animation-delay:.28s}
.ph-jp{font-size:clamp(20px,2.3vw,30px);font-weight:700;letter-spacing:-.01em;margin:0 0 14px}
.ph-jp b{color:var(--rb)}
.ph-sub{font-size:14.5px;color:var(--ink-2);max-width:34em;margin:0 0 26px}
.ph-cta{display:flex;gap:12px;flex-wrap:wrap}
.js .ph-jp,.js .ph-sub,.js .ph-cta{opacity:0;animation:fadeIn .8s ease forwards .7s}
.ph-visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.ph-disc{position:absolute;inset:6%;border-radius:50%;background:var(--rb);opacity:.92}
.js .ph-disc{transform:scale(.5);opacity:0;animation:discIn 1.2s cubic-bezier(.22,1,.36,1) forwards .2s}
@keyframes discIn{to{transform:none;opacity:.92}}
.ph-robot{position:relative;width:96%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28));z-index:1}
.js .ph-robot{opacity:0;transform:translateY(30px) scale(.96);animation:robotIn 1.1s cubic-bezier(.22,1,.36,1) forwards .55s}
@keyframes robotIn{to{opacity:1;transform:none}}
.js .ph-visual.in .ph-robot{animation:none}
.ph-tag{position:absolute;right:4%;bottom:8%;z-index:2;font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.06em;color:#fff;background:var(--rb-ink);padding:7px 12px;border-radius:999px}
.js .ph-tag{opacity:0;animation:fadeIn .6s ease forwards 1.4s}
@media(max-width:900px){.ph .wrap{grid-template-columns:1fr}.ph-visual{max-width:420px;margin:0 auto;width:100%}}
@media(max-width:600px){.ph h1{font-size:clamp(40px,12vw,56px)}}

/* ---------- Problem ---------- */
.pp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.pp-grid li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px 24px;position:relative;transition:transform .4s var(--ease-out),border-color .3s}
.pp-grid li:hover{transform:translateY(-4px);border-color:var(--rb)}
.pp-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;margin-bottom:12px}
.pp-grid b{display:inline-block;font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.06em;color:#fff;background:var(--rb);padding:4px 10px;border-radius:999px;margin-bottom:10px}
.pp-grid h3{font-size:16px;font-weight:700;line-height:1.5;margin:0 0 8px}
.pp-grid p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.8}
@media(max-width:900px){.pp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pp-grid{grid-template-columns:1fr}}

/* ---------- Products ---------- */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.prc{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);transition:transform .45s var(--ease-out),box-shadow .45s,border-color .3s}
.prc:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.09);border-color:var(--rb-line)}
.prc-img{position:relative;background:linear-gradient(160deg,var(--rb-soft2),var(--rb-soft));aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.prc-img img{width:82%;height:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.16));transition:transform .8s var(--ease-out)}
.prc:hover .prc-img img{transform:translateY(-4px) scale(1.04)}
.prc-tag{position:absolute;left:14px;top:14px;font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--acc);padding:4px 10px;border-radius:999px}
.prc-tag--new{background:var(--rb-ink)}
.prc-body{padding:18px 20px 22px}
.prc-cat{font-size:11.5px;font-weight:700;color:var(--rb);letter-spacing:.02em}
.prc h3{font-family:var(--f-en);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:4px 0 4px}
.prc p{font-size:13px;color:var(--ink-2);margin:0 0 12px}
.prc ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
.prc ul li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rb);margin-right:9px;vertical-align:2px}
.pr-more{margin-top:clamp(28px,4vw,48px);padding:clamp(20px,3vw,32px);border-radius:14px;background:var(--rb-soft2);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center}
.pr-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.pr-more li{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-2)}
.pr-more li b{font-family:var(--f-en);font-size:15px;color:var(--ink)}
@media(max-width:900px){.pr-grid{grid-template-columns:repeat(2,1fr)}.pr-more{grid-template-columns:1fr}.pr-more .pill{justify-self:start}}
@media(max-width:560px){.pr-grid{grid-template-columns:1fr}.pr-more ul{grid-template-columns:1fr}}

/* ---------- Reviews（暗いグレー帯） ---------- */
.rv{background:var(--rb-ink);color:#fff;padding:clamp(72px,9vw,130px) 0 clamp(72px,9vw,130px) !important;margin-bottom:var(--pad)}
.rv .lbl{color:#fff}
.rv .lead{color:rgba(255,255,255,.75)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.rvc{display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .3s,transform .45s var(--ease-out)}
.rvc:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.rv-q{font-size:14.5px;line-height:1.85;margin:0;flex:1}
.rv-q::before{content:"“";font-family:var(--f-en);font-size:40px;line-height:0;color:var(--rb);margin-right:6px;vertical-align:-14px}
.rv-tags{display:flex;gap:6px;flex-wrap:wrap}
.rv-tags span{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--rb);color:#fff}
.rv-who{display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(255,255,255,.16);padding-top:12px}
.rv-who b{font-size:14px}
.rv-who span{font-size:12px;color:rgba(255,255,255,.65)}
.rv-more{font-family:var(--f-en);font-size:12px;font-weight:600;color:#fff;opacity:.8}
.rvc:hover .rv-more{opacity:1}
.rv .center{margin-top:clamp(28px,4vw,44px)}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}

/* ---------- Cost simulator ---------- */
.cs-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.cs h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.35;margin:10px 0 0}
.cs-pts{list-style:none;margin:18px 0 24px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.cs-pts li{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--rb-line);color:var(--ink-2)}
.cs-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-nums>div{background:var(--rb-soft2);border-radius:14px;padding:clamp(24px,3vw,40px) clamp(18px,2.5vw,30px);text-align:center}
.cs-nums b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(44px,5.5vw,76px);letter-spacing:-.04em;line-height:1;color:var(--rb-ink)}
.cs-nums span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
@media(max-width:800px){.cs-grid{grid-template-columns:1fr}}

/* ---------- Demo event ---------- */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.ev-img{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.ev-img img{width:100%;height:auto;display:block}
.ev h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.35;margin:10px 0 0}
.ev-info{margin:22px 0 24px;padding:0;display:grid;gap:0}
.ev-info>div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ev-info dt{font-weight:700;color:var(--rb)}
.ev-info dd{margin:0;color:var(--ink)}
.ev-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ev-tel{font-size:13px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink)}
@media(max-width:800px){.ev-grid{grid-template-columns:1fr}}

/* ---------- Why ---------- */
.wy-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.wy-grid li{padding:26px 24px 26px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.wy-n{display:inline-block;font-family:var(--f-en);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--rb);margin-bottom:14px}
.wy-grid h3{font-size:17px;font-weight:700;line-height:1.5;margin:0 0 10px}
.wy-grid p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.85}
@media(max-width:900px){.wy-grid{grid-template-columns:1fr}}

/* ---------- Flow（4ステップ版） ---------- */
.flow--4{grid-template-columns:repeat(4,1fr)}
.page-pudu .flow-n{color:var(--rb)}
.page-pudu .flow li:hover .flow-n{background:var(--rb);border-color:var(--rb)}
@media(max-width:900px){.flow--4{grid-template-columns:repeat(2,1fr);gap:28px}.flow--4::before{display:none}.flow--4 li+li{padding-left:0}}
@media(max-width:560px){.flow--4{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.fq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.fq-head h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.3;margin:10px 0 0}
.fq-head .lead{margin-bottom:22px}
.fq-list details{border-bottom:1px solid var(--line)}
.fq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:15.5px;font-weight:700;line-height:1.5}
.fq-list summary::-webkit-details-marker{display:none}
.fq-list summary::after{content:"+";font-family:var(--f-en);font-size:22px;font-weight:600;color:var(--rb);flex-shrink:0;transition:transform .35s var(--ease-out)}
.fq-list details[open] summary::after{transform:rotate(45deg)}
.fq-list details p{margin:0;padding:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.85}
@media(max-width:800px){.fq-grid{grid-template-columns:1fr}}

/* ---------- Trial CTA ---------- */
.tr{padding:0 0 var(--pad) !important}
.tr .wrap{background:var(--rb-soft2);border-radius:18px;padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);text-align:center;position:relative;overflow:hidden}
.tr h2{font-size:clamp(26px,3.4vw,44px);font-weight:700;line-height:1.35;margin:10px 0 0}
.tr .lead{margin:14px auto 26px}
.tr-cta{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
.tr-tel{font-family:var(--f-en);font-weight:700;font-size:22px;color:var(--ink);display:flex;flex-direction:column;line-height:1.1}
.tr-tel small{font-family:var(--f-jp);font-size:11px;font-weight:500;color:var(--ink-3);margin-top:4px}
.cs-nums>div>span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}
.cs-nums b span{display:inline;font:inherit;color:inherit;margin:0}
@media(max-width:480px){.pp-grid li{display:grid;grid-template-columns:96px 1fr;gap:6px 16px;align-items:start}.pp-grid img{grid-row:1/4;margin:0}.pp-grid b{margin-bottom:4px}}
/* ---- v2 ---- */
/* ヒーロー：製品スライダー＋マウスに反応する灰色の円 */
.ph-visual{cursor:default}
.ph-disc{transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .25s ease-out}
.js .ph-disc{animation:discIn 1.2s cubic-bezier(.22,1,.36,1) forwards .2s}
.ph-slides{position:relative;width:100%;aspect-ratio:1/1;z-index:1}
.ph-slides figure{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .7s ease,transform .9s var(--ease-out);pointer-events:none}
.ph-slides figure.is-on{opacity:1;transform:none}
.ph-slides figure.is-out{opacity:0;transform:translateY(-18px) scale(1.02)}
.ph-slides img{width:92%;height:auto;max-height:78%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28));transform:translate3d(calc(var(--mx,0) * -.6),calc(var(--my,0) * -.6),0)}
.ph-slides .fig-tall img{width:auto;height:84%;max-height:84%}
.ph-slides figcaption{position:absolute;right:4%;bottom:6%;font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.06em;color:#fff;background:var(--rb-ink);padding:7px 12px;border-radius:999px}
.ph-dots{list-style:none;margin:0;padding:0;position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.ph-dots li{width:8px;height:8px;border-radius:50%;background:var(--rb-line);transition:background .3s,transform .3s}
.ph-dots li.is-on{background:var(--rb);transform:scale(1.25)}
.js .ph-slides,.js .ph-dots{opacity:0;animation:fadeIn .8s ease forwards .6s}
/* Products */
.pr-note{display:inline-block;margin-left:12px;font-size:11px;font-weight:700;color:var(--rb);border:1px solid var(--rb-line);border-radius:999px;padding:3px 10px;vertical-align:1px}
.prc-img img{width:78%;max-height:80%;height:auto}
.pr-cta{margin-top:clamp(28px,4vw,44px)}
/* Reviews with photos */
.rvc{padding:0 0 22px;overflow:hidden}
.rv-img{display:block;aspect-ratio:16/10;overflow:hidden;margin:0 0 6px}
.rv-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out)}
.rvc:hover .rv-img img{transform:scale(1.05)}
.rvc>.rv-q,.rvc>.rv-tags,.rvc>.rv-who,.rvc>.rv-more{margin-left:24px;margin-right:24px}
.rvc>.rv-q{margin-top:14px}
@media(max-width:600px){.pr-note{display:block;margin:8px 0 0;width:max-content}}
/* ---- v3: グレー主体に統一、サイズ統一、マウス追従は廃止 ---- */
.ph-disc{transform:none !important;background:
  radial-gradient(circle at 18% 22%, rgba(255,160,122,.55) 0, rgba(255,160,122,0) 38%),
  radial-gradient(circle at 84% 82%, rgba(184,82,127,.5) 0, rgba(184,82,127,0) 40%),
  #8b8885;opacity:1}
.js .ph-disc{animation:discIn2 1.2s cubic-bezier(.22,1,.36,1) forwards .2s}
@keyframes discIn2{to{transform:none;opacity:1}}
.ph-slides img{transform:none !important;width:auto;height:58%;max-height:58%;max-width:84%}
.ph-slides .fig-tall img{height:66%;max-height:66%}
/* 製品写真：同じ高さに揃える */
.prc-img img{width:auto;height:64%;max-height:64%;max-width:82%}
/* このページの橙を減らす：ボタン・タグは濃いグレー */
.page-pudu .pill:not(.pill--ghost):not(.pill--white){background:var(--rb-ink);color:#fff !important}
.page-pudu .pill:not(.pill--ghost):not(.pill--white):hover{background:var(--rb)}
.page-pudu .hd .pill{background:var(--acc)}
.page-pudu .hd .pill:hover{background:var(--ink)}
.page-pudu .pill--white{background:#fff;color:var(--rb-ink) !important}
.page-pudu .pill--white:hover{background:var(--rb);color:#fff !important}
.prc-tag{background:var(--rb)}
.prc-tag--new{background:var(--rb-ink)}
.page-pudu .g-band{background:linear-gradient(100deg,#3a3735 0%,var(--rb-ink) 55%,#5a4a52 100%)}
.page-pudu .bd-social a:hover{color:var(--rb-ink)}
.page-pudu .lbl::before{background:var(--rb);box-shadow:10px 0 0 var(--rb-line),20px 0 0 var(--rb-line)}
.page-pudu .num,.page-pudu .g-news .lbl{color:var(--rb)}
.page-pudu .cs-nums b{color:var(--rb-ink)}
.page-pudu #bar a+a{background:var(--rb-ink)}

/* ---- v4: ヒーロー刷新（灰色のステージ＋巨大型番＋横スライド）・3色ブロック復活・橙を一部戻す ---- */
.page-pudu .lbl::before{background:var(--c-drone);box-shadow:10px 0 0 var(--c-robot),20px 0 0 var(--c-ai)}
.js .page-pudu [data-reveal].in .lbl::before{box-shadow:10px 0 0 var(--c-robot),20px 0 0 var(--c-ai)}
.page-pudu .pill.pill--acc{background:var(--acc) !important;color:#fff !important}
.page-pudu .pill.pill--acc:hover{background:var(--ink) !important}
.prc-tag{background:var(--acc)}
.page-pudu .g-band{background:linear-gradient(100deg,#3a3735 0%,var(--rb-ink) 50%,#7a3b4f 100%)}
.page-pudu .bd-ar{color:#ffa07a}
.page-pudu .prc-cat{color:var(--rb)}
.page-pudu .flow-n{color:var(--acc)}
.page-pudu .flow li:hover .flow-n{background:var(--acc);border-color:var(--acc)}
.page-pudu .ev-info dt{color:var(--acc)}

/* hero */
.ph{background:var(--rb-soft2);padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,100px);margin-bottom:var(--pad)}
.page-pudu .pp{padding-top:0}
.ph-visual{aspect-ratio:1/1;position:relative;overflow:visible;display:block}
.ph-disc{display:none}
.ph-bigname{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:140%;text-align:center;pointer-events:none;z-index:0}
.ph-bigname span{position:absolute;left:0;right:0;font-family:var(--f-en);font-weight:700;font-size:clamp(64px,10vw,150px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(124,122,120,.55);opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .9s var(--ease-out)}
.ph-bigname span.is-on{opacity:1;transform:none}
.ph-stage{position:absolute;left:4%;right:4%;bottom:8%;height:26%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#9a9794 0,#7c7a78 55%,#6e6c6a 100%);box-shadow:0 30px 60px rgba(0,0,0,.18);z-index:0}
.js .ph-stage{transform:scaleX(.4);opacity:0;animation:stageIn 1.1s cubic-bezier(.22,1,.36,1) forwards .2s}
@keyframes stageIn{to{transform:none;opacity:1}}
.ph-ring{position:absolute;left:50%;top:0;width:100%;height:100%;border-radius:50%;border:1px solid rgba(124,122,120,.35);transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none}
.js .ph-ring{animation:ring 4.5s ease-out infinite 1.2s}
.js .ph-ring--2{animation-delay:3.4s}
@keyframes ring{0%{transform:translateX(-50%) scale(.55);opacity:.7}100%{transform:translateX(-50%) scale(1.15);opacity:0}}
.ph-slides{position:absolute;inset:0;z-index:1;aspect-ratio:auto}
.ph-slides figure{position:absolute;inset:0;margin:0;display:grid;place-items:end center;padding-bottom:16%;opacity:0;transform:translateX(60px);transition:opacity .6s ease,transform .9s var(--ease-out);pointer-events:none}
.ph-slides figure.is-on{opacity:1;transform:none}
.ph-slides figure.is-out{opacity:0;transform:translateX(-60px)}
.ph-slides img{height:52%;max-height:52%;width:auto;max-width:80%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.28));transform:none !important}
.ph-slides .fig-tall img{height:60%;max-height:60%}
.ph-slides figcaption{position:absolute;left:0;bottom:-2%;right:auto;display:flex;flex-direction:column;gap:2px;background:none;padding:0;color:var(--ink);text-align:left}
.ph-slides figcaption b{font-family:var(--f-en);font-size:15px;font-weight:700;letter-spacing:.02em}
.ph-slides figcaption span{font-size:12px;color:var(--ink-2)}
.ph-dots{bottom:0;left:auto;right:0;transform:none}
@media(max-width:900px){.ph-visual{max-width:440px;margin:0 auto}.ph-bigname span{font-size:64px}}
.ph-slides figure.is-out figcaption{opacity:0;transition:opacity .15s}
.ph-slides figcaption{transition:opacity .5s ease .3s}
.ph{padding-bottom:clamp(40px,5vw,72px)}

/* ---- v5: ヒーローを詰めて立体的に、画像の基準線を統一、帯は灰色だけ、スクロール演出 ---- */
.ph{padding:clamp(36px,4.5vw,64px) 0 clamp(36px,4.5vw,64px)}
.ph .wrap{align-items:center}
.ph-visual{aspect-ratio:1/.82;overflow:visible}
.ph-ring{display:none}
/* 台座：厚みのある円盤＋床の影＋上からの光 */
.ph-stage{left:4%;right:4%;bottom:12%;height:24%;background:radial-gradient(ellipse at 50% 35%,#b5b2ae 0,#8f8c89 45%,#7c7a78 100%);box-shadow:0 22px 40px rgba(0,0,0,.22);z-index:0}
.ph-stage-base{position:absolute;left:4%;right:4%;bottom:9.5%;height:24%;border-radius:50%;background:linear-gradient(180deg,#6b6967,#4e4c4a);z-index:0}
.js .ph-stage-base{transform:scaleX(.4);opacity:0;animation:stageIn 1.1s cubic-bezier(.22,1,.36,1) forwards .2s}
.ph-stage::after{content:"";position:absolute;left:18%;right:18%;top:18%;bottom:18%;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.ph-light{position:absolute;left:50%;top:-8%;width:70%;height:78%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 60%);pointer-events:none;z-index:0}
.js .ph-light{opacity:0;animation:fadeIn 1.2s ease forwards .8s}
/* ロボット：全機種を同じ基準線に。接地の影 */
.ph-slides figure{padding:0;display:block}
.ph-slides img,.ph-slides .fig-tall img{position:absolute;left:12%;width:76%;top:6%;height:66% !important;max-height:none !important;max-width:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 14px rgba(0,0,0,.32))}
.ph-slides figure::after{content:"";position:absolute;left:30%;right:30%;top:calc(6% + 66% - 2%);height:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.35),rgba(0,0,0,0) 70%);z-index:-1}
.ph-slides figcaption{bottom:0}
/* 型番は上へ */
.ph-bigname{top:-2%}
.ph-bigname span{font-size:clamp(60px,9.4vw,140px)}
/* 製品カードの写真も同じ基準線 */
.prc-img{position:relative}
.prc-img img{position:absolute;left:12%;width:76%;top:10%;height:76% !important;max-height:none;max-width:none;object-fit:contain;object-position:center bottom}
/* 下の帯：灰色だけのグラデーションで厚みを */
.page-pudu .g-band{background:linear-gradient(180deg,#4a4846 0%,#2f2d2b 60%,#232120 100%)}
.page-pudu .bd-ar{color:#fff}
/* スクロール演出：写真がゆっくり動く、見出しは左から */
[data-py]{will-change:transform;transform:translate3d(0,var(--py,0),0) scale(1.08)}
.rv-img img[data-py],.ev-img img[data-py]{transition:none}
.page-pudu .head h2,.cs h2,.ev h2,.fq-head h2,.tr h2{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out) .1s}
.page-pudu [data-reveal].in .head h2,.page-pudu [data-reveal].in.head h2,.page-pudu [data-reveal].in h2{clip-path:inset(0 0 0 0)}
.pp-grid li img,.wy-grid li{transform:translateY(10px);transition:transform .9s var(--ease-out),border-color .3s}
.js [data-reveal].in .pp-grid li img,.js [data-reveal].in.pp-grid li img,.js .pp-grid.in li img{transform:none}
@media(max-width:900px){.ph-visual{aspect-ratio:1/.9}}
@media(prefers-reduced-motion:reduce){[data-py]{transform:none}.page-pudu h2{clip-path:none !important}}

/* ---- v6: ヒーローを画面の高さいっぱいに、余裕を持たせる。立体感は控えめ。型番はロボットの上に ---- */
.ph{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px);margin-bottom:var(--pad)}
.ph .wrap{width:100%;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.ph h1{margin:22px 0 26px}
.ph-jp{margin:0 0 20px}
.ph-sub{margin:0 0 36px;line-height:2}
.ph-visual{aspect-ratio:1/1;max-width:560px;margin-left:auto}
.ph-stage-base,.ph-light{display:none}
.ph-stage{left:8%;right:8%;bottom:14%;height:20%;background:radial-gradient(ellipse at 50% 45%,#cfcbc6 0,#bcb8b3 60%,rgba(188,184,179,0) 100%);box-shadow:none;border-radius:50%}
.ph-stage::after{border:1px solid rgba(255,255,255,.55);left:22%;right:22%;top:22%;bottom:22%}
.ph-bigname{top:0;width:120%}
.ph-bigname span{font-size:clamp(56px,8.6vw,124px);-webkit-text-stroke:1.2px rgba(124,122,120,.5)}
.ph-slides img,.ph-slides .fig-tall img{top:26%;height:54% !important;left:14%;width:72%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.22))}
.ph-slides figure::after{top:calc(26% + 54% - 2%);height:5%;left:32%;right:32%;background:radial-gradient(ellipse,rgba(0,0,0,.22),rgba(0,0,0,0) 70%)}
.ph-slides figcaption{bottom:2%}
.ph-dots{bottom:3%}
@media(max-width:900px){.ph{min-height:0}.ph .wrap{grid-template-columns:1fr;gap:28px}.ph-visual{max-width:440px;margin:0 auto}}
.ph-visual{width:100%;max-width:560px;margin-left:0;justify-self:end}

/* ---- v7 ---- */
.lead--wide{max-width:none}
.pr-note{display:inline-block;margin:14px 0 0;vertical-align:baseline}
.pr .head{margin-bottom:clamp(24px,3vw,40px)}

/* ---- v9 ---- */
/* 型番：白抜き → 左から灰色で塗られる */
.ph-bigname span{background-image:linear-gradient(90deg,var(--rb) 0,var(--rb) 100%);background-repeat:no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.2px rgba(124,122,120,.6);transition:opacity .7s ease,transform .9s var(--ease-out),background-size 0s linear}
.ph-bigname span.is-on{background-size:100% 100%;transition:opacity .7s ease,transform .9s var(--ease-out),background-size 1.4s cubic-bezier(.4,0,.2,1) .5s}
/* 導入企業の声：カクつき解消（写真の拡大は transform 1本に） */
.rv-img img{transform:none;transition:transform .9s var(--ease-out)}
.rvc:hover .rv-img img{transform:scale(1.04)}
.rvc{will-change:transform;backface-visibility:hidden}
/* スマホ */
@media(max-width:800px){
  .ph{padding:28px 0 40px;margin-bottom:56px}
  .ph .wrap{gap:20px}
  .ph h1{font-size:clamp(40px,12vw,60px);margin:14px 0 14px}
  .ph-jp{font-size:20px;margin-bottom:12px}
  .ph-sub{font-size:14px;margin-bottom:22px;line-height:1.9}
  .ph-cta .pill{padding:12px 18px;font-size:13px}
  .ph-visual{max-width:360px;aspect-ratio:1/.95}
  .ph-bigname span{font-size:52px}
  .ph-slides figcaption b{font-size:14px}
  .page-pudu section{padding-bottom:56px}
  .page-pudu .head{margin-bottom:22px}
  .page-pudu .head h2,.cs h2,.ev h2,.fq-head h2,.tr h2{font-size:22px}
  .pp-grid{gap:10px}
  .pr-grid{gap:12px}
  .prc-body{padding:14px 16px 18px}
  .prc h3{font-size:19px}
  .rv{padding:56px 0 !important;margin-bottom:56px}
  .rv-grid{gap:12px}
  .rvc>.rv-q,.rvc>.rv-tags,.rvc>.rv-who,.rvc>.rv-more{margin-left:18px;margin-right:18px}
  .cs-nums b{font-size:40px}
  .cs-nums>div{padding:20px 14px}
  .ev-info>div{grid-template-columns:60px 1fr;font-size:13px}
  .ev-cta{gap:12px}
  .fq-list summary{font-size:14.5px;padding:14px 0}
  .tr .wrap{padding:36px 20px;border-radius:14px}
  .tr h2{font-size:22px}
  .tr-cta{gap:14px}
  .tr-tel{font-size:20px}
  .pr-note{margin-top:10px}
}
.ph-bigname span:not(.is-on){transition:opacity .3s ease,transform .5s var(--ease-out),background-size 0s linear;transform:translateY(-10px)}

/* ---- v10: 型番の塗りを速く・文字間を空け・金属っぽい立体に ---- */
.ph-bigname span{letter-spacing:.02em;background-image:linear-gradient(180deg,#b3b0ac 0%,#8e8b88 42%,#63615e 100%);-webkit-text-stroke:1.2px rgba(124,122,120,.6)}
.ph-bigname span.is-on{transition:opacity .5s ease,transform .7s var(--ease-out),background-size .8s cubic-bezier(.4,0,.2,1) .2s}
.ph-bigname span::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;transform:translate(5px,6px);color:#4a4846;-webkit-text-stroke:0;background:none;-webkit-text-fill-color:#4a4846;z-index:-1;opacity:0;transition:opacity .4s ease .55s}
.ph-bigname span.is-on::after{opacity:.55}
.ph-bigname span:not(.is-on)::after{opacity:0;transition:opacity .15s}
.ph-bigname span.is-on{-webkit-text-stroke-color:transparent;transition:opacity .5s ease,transform .7s var(--ease-out),background-size .8s cubic-bezier(.4,0,.2,1) .2s,-webkit-text-stroke-color .25s ease .2s}
/* v11: 立体表現は撤回。平らな灰色（上下にごく薄いグラデーション）だけ */
.ph-bigname span::after{display:none}
.ph-bigname span{background-image:linear-gradient(180deg,#8f8c89 0%,#7c7a78 100%)}

/* ---- v12: 案A 型番タブ（巨大文字は廃止） ---- */
.ph-bigname{display:none}
.ph-tabs{list-style:none;margin:0;padding:0 0 10px;position:absolute;left:0;right:0;top:2%;display:flex;gap:clamp(14px,2vw,26px);z-index:2;border-bottom:1px solid var(--rb-line)}
.ph-tabs li{position:relative;font-family:var(--f-en);font-weight:600;font-size:clamp(12px,1.05vw,14px);letter-spacing:.06em;color:var(--ink-3);cursor:pointer;padding:4px 0;transition:color .35s}
.ph-tabs li.is-on{color:var(--ink);font-weight:700}
.ph-tabs li:hover{color:var(--ink)}
.ph-tabs-line{position:absolute;left:var(--tl,0);bottom:-1px;width:var(--tw,0);height:2px;background:var(--rb-ink);transition:left .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1)}
.js .ph-tabs{opacity:0;animation:fadeIn .8s ease forwards .6s}
.ph-slides img,.ph-slides .fig-tall img{top:22%;height:56% !important}
.ph-slides figure::after{top:calc(22% + 56% - 2%)}
@media(max-width:800px){.ph-tabs{gap:12px;flex-wrap:wrap;position:relative;top:0;margin-bottom:8px}.ph-tabs li{font-size:12px}}

/* ---- v13: 白抜きの大文字に戻す（タブは廃止） ---- */
.ph-bigname{display:block}
.ph-tabs{display:none}
.ph-slides img,.ph-slides .fig-tall img{top:26%;height:54% !important}
.ph-slides figure::after{top:calc(26% + 54% - 2%)}
/* v14: 型番の塗りは灰色主体に、右端へ向けてカシスをひと匙 */
.ph-bigname span{background-image:linear-gradient(100deg,#8a8785 0%,#7c7a78 55%,#8e2f5c 100%)}
/* v15: 型番は黒→グレーの横グラデーション */
.ph-bigname span{background-image:linear-gradient(100deg,#1a1a1a 0%,#3a3836 45%,#7c7a78 100%)}
/* v16: グレー寄りの黒→グレー */
.ph-bigname span{background-image:linear-gradient(100deg,#2e2c2a 0%,#5f5d5a 40%,#8a8785 75%,#a3a09c 100%)}
/* v17: グラデーションを文字の幅に合わせる（短い型番でも同じ色の流れに） */
.ph-bigname span{left:50%;right:auto;width:max-content;translate:-50% 0;white-space:nowrap}