/* FIELD-BORN FEATURES — shared by index-v2 & feature pages */
.uq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.uq-card{
  position:relative;overflow:hidden;
  border:1px solid var(--blue-line);background:#fff;display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease;
}
.uq-card:hover{box-shadow:0 24px 48px -24px rgba(10,30,60,.35);transform:translateY(-3px);}
.uq-visual{
  position:relative;height:236px;overflow:visible;
  background:linear-gradient(160deg,#F3F8FD,#E7EFF8);
  z-index:1;
}
.uq-visual .device{
  position:absolute;left:var(--x,30%);top:var(--y,62%);
  transform:translate(-50%,-50%) scale(1.5);opacity:1;z-index:2;
  transform-style:preserve-3d;
}
.uq-visual .d-tilt{
  transform-style:preserve-3d;
  animation:floaty 7s ease-in-out infinite alternate;
  animation-delay:var(--fd,0s);
}
/* ヒーローと同じ背面プレートで板厚を表現 */
.uq-visual .d-body{
  position:relative;
  transform-style:preserve-3d;
  box-shadow:
    0 40px 70px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
.uq-visual .d-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(201,162,84,.42);
  background:linear-gradient(168deg,#0A1A33 0%,#050B16 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
  transform:translate3d(6px,8px,-22px);
  z-index:-1;
}
.uq-visual .d-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(201,162,84,.22);
  background:linear-gradient(145deg,rgba(201,162,84,.16) 0%,#081528 28%,#040A14 100%);
  transform:translate3d(4px,6px,-11px);
  z-index:-2;
}
.uq-visual .d-screen{transform:translateZ(1px);}
.uq-visual .iphone .island{transform:translateX(-50%) translateZ(2px);}
.uq-body{
  position:relative;z-index:3;
  margin-top:-8px;
  padding:26px 30px 32px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(9px);
  border-top:1px solid rgba(198,214,232,.55);
}
.uq-no{font-size:11px;letter-spacing:.24em;color:var(--gold-deep);font-weight:700;display:flex;align-items:center;gap:10px;}
.uq-no .first{
  background:var(--gold);color:var(--navy);font-size:9.5px;letter-spacing:.14em;
  padding:2px 9px;border-radius:2px;
}
.uq-card h3{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:19.5px;line-height:1.6;margin:12px 0 10px;color:var(--ink);}
.uq-card .uq-body p{font-size:13px;color:var(--ink-weak);line-height:1.95;}
.pop{
  position:absolute;left:43%;top:50%;z-index:6;
  width:min(60%,256px);
  background:#fff;border:1px solid var(--blue-line);border-left:3px solid var(--gold);
  border-radius:10px;padding:15px 18px;font-size:12px;
  box-shadow:0 34px 64px -22px rgba(10,30,60,.55),0 8px 20px -10px rgba(10,30,60,.25);
  animation:popFloat 5.5s ease-in-out infinite alternate;
}
@keyframes popFloat{
  from{transform:translateY(-53%) perspective(900px) rotateY(-7deg) rotateX(3deg);}
  to{transform:translateY(-47%) perspective(900px) rotateY(-7deg) rotateX(3deg);}
}
.pop::before{
  content:"";position:absolute;left:-9px;top:34px;
  border:solid transparent;border-width:8px 10px 8px 0;border-right-color:#fff;
  filter:drop-shadow(-1.5px 0 0 var(--blue-line));
}
.pop .row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pop .nm{font-weight:700;color:var(--ink);font-size:12.5px;}
.pop .old-p{color:var(--ink-weak);text-decoration:line-through;font-size:11px;}
.pop .new-p{font-family:"Zen Old Mincho",serif;color:var(--gold-deep);font-weight:700;font-size:18px;}
.uq-chip{
  display:inline-block;margin-top:9px;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  color:var(--gold-deep);border:1px solid var(--gold);padding:2px 9px;border-radius:99px;
}
.uq-btn{
  display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;
  font-size:11.5px;letter-spacing:.08em;padding:8px 16px;border-radius:5px;white-space:nowrap;
}
.tring{
  width:52px;height:52px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--gold) 0 68%,#E2EAF4 68% 100%);
}
.tring::before{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%;}
.tring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;color:var(--navy);font-weight:700;}
.uq-sug{
  margin-top:11px;padding:11px 13px;background:#F4F8FC;border:1px solid var(--blue-line);
  border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.uq-sug span{font-size:11.5px;color:var(--ink);}
.uq-sug--stack{
  flex-direction:column;align-items:stretch;gap:10px;
}
.uq-sug--stack .uq-btn{align-self:flex-end;}
.pop .rv-stars{font-size:20px;letter-spacing:4px;color:var(--gold-lt);display:block;text-align:center;}
.pop .rv-t{display:block;text-align:center;font-size:11px;color:var(--ink-weak);margin:7px 0 11px;}
.pop .rv-c{text-align:center;}
.pop-win{
  background:linear-gradient(160deg,#FFFDF6,#FFF3D6);
  border-color:var(--gold);border-left-color:var(--gold);
  box-shadow:0 34px 64px -22px rgba(10,30,60,.5),0 0 34px rgba(201,162,84,.35);
}
.pop-win::before{border-right-color:#FFFDF6;filter:drop-shadow(-1.5px 0 0 var(--gold));}
.dice{display:flex;gap:10px;justify-content:center;margin-bottom:10px;}
.die{
  width:36px;height:36px;background:#fff;border-radius:8px;padding:6px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  box-shadow:0 4px 10px rgba(90,64,15,.3),0 1px 0 rgba(255,255,255,.9) inset;
  border:1px solid #E4D3A8;
  animation:dieWiggle 3.4s ease-in-out infinite;
}
.die:nth-child(2){animation-delay:.35s;}
.die i{width:6px;height:6px;border-radius:50%;background:#1B2635;place-self:center;}
@keyframes dieWiggle{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(6deg);}}
.pop-win .w1{display:block;text-align:center;font-family:"Zen Old Mincho",serif;font-size:17px;font-weight:700;color:var(--gold-deep);letter-spacing:.1em;}
.pop-win .w2{display:block;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink);margin-top:3px;}
.pop-gauge{
  animation:popFloat 5.5s ease-in-out infinite alternate,pgMood 10s linear infinite;
}
.pg-labels{position:relative;height:20px;font-weight:700;font-size:12px;}
.pg-labels span{position:absolute;inset:0;opacity:0;white-space:nowrap;}
.pg-labels .l1{color:var(--ink-weak);animation:pgL1 10s linear infinite;}
.pg-labels .l2{color:var(--gold-deep);animation:pgL2 10s linear infinite;}
.pg-labels .l3{color:#9A6A00;font-size:13px;animation:pgL3 10s linear infinite;}
.pg-bar{height:10px;border-radius:99px;background:#E8EEF6;overflow:hidden;margin-top:10px;}
.pg-bar i{display:block;height:100%;border-radius:inherit;width:0;
  background:linear-gradient(90deg,var(--gold),#E4CB8A);
  animation:pgFill 10s linear infinite;}
.pg-pct{margin-top:7px;font-size:10px;color:var(--ink-weak);display:flex;justify-content:space-between;}
@keyframes pgFill{0%{width:0;}24%{width:50%;}50%{width:50%;}74%{width:100%;}100%{width:100%;}}
@keyframes pgL1{0%,22%{opacity:1;}27%,100%{opacity:0;}}
@keyframes pgL2{0%,25%{opacity:0;}30%,70%{opacity:1;}75%,100%{opacity:0;}}
@keyframes pgL3{0%,73%{opacity:0;}78%,100%{opacity:1;}}
@keyframes pgMood{
  0%,24%{background:#fff;border-left-color:var(--gold);box-shadow:0 34px 64px -22px rgba(10,30,60,.55);}
  30%,70%{background:#FFFBF0;border-left-color:var(--gold);box-shadow:0 34px 64px -22px rgba(10,30,60,.5),0 0 22px rgba(201,162,84,.25);}
  78%,100%{background:#FFF3D6;border-left-color:#E4A93C;box-shadow:0 34px 64px -22px rgba(10,30,60,.5),0 0 44px rgba(228,169,60,.55);}
}
@media(prefers-reduced-motion:reduce){
  .pop,.pop-gauge,.die,.pg-bar i,.pg-labels span{animation:none;}
  .pg-bar i{width:100%;}
  .pg-labels .l3{opacity:1;}
  .pop{transform:translateY(-50%);}
}
@media(max-width:960px){
  .uq-grid{grid-template-columns:1fr;}
}

/* #revenue / #unique：モバイルで横スワイプカルーセル化 */
.uq-dots{display:none;}
@media(max-width:900px){
  #revenue .uq-grid{
    display:flex;flex-wrap:nowrap;gap:0;
    margin:0 -20px;padding:4px 20px 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  #revenue .uq-grid::-webkit-scrollbar{display:none;}
  #revenue .uq-card{
    flex:0 0 auto;width:82vw;max-width:340px;
    scroll-snap-align:center;
    margin-right:16px;
  }
  #revenue .uq-dots{
    display:flex;justify-content:center;gap:7px;margin-top:14px;
  }
  #revenue .uq-dots span,
  #revenue .uq-dots button{
    width:6px;height:6px;padding:0;border:0;border-radius:50%;
    background:rgba(46,111,183,.22);cursor:pointer;
  }
  #revenue .uq-dots span.on,
  #revenue .uq-dots button.is-on,
  #revenue .uq-dots button.on{background:var(--gold);}
}
@media(min-width:901px){
  #revenue .uq-dots{display:none;}
}
@media(max-width:720px){
  #unique .uq-grid{
    display:flex;flex-wrap:nowrap;gap:0;
    margin:0 -16px;padding:4px 16px 10px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  #unique .uq-grid::-webkit-scrollbar{display:none;}
  #unique .uq-card{
    flex:0 0 min(86vw,340px);
    scroll-snap-align:center;scroll-snap-stop:always;
    margin-right:14px;
  }
  #unique .uq-card:last-child{margin-right:0;}
}