/* 広場の卓ゲーム「ふたりの相性診断」への派手なバナー（2026-09-29・inc/pair-promo.php / js/pair-promo.js） */
.ppm{position:relative;max-width:600px;margin:26px auto 22px;border-radius:22px;padding:3px;background:linear-gradient(120deg,#ff7eb6,#ffd452,#9b7bff,#ff7eb6);background-size:300% 300%;animation:ppmRim 6s linear infinite;box-shadow:0 14px 34px rgba(150,60,140,.28);text-align:left;font-family:inherit}
.ppm *{box-sizing:border-box}
.ppm--quiz{max-width:540px}
.ppm--shindan{max-width:none;margin:0 0 16px}
.ppm--b5pair{width:calc(100% - 32px)}
.ppm__top{position:relative;display:block;border-radius:19px 19px 0 0;overflow:hidden;text-decoration:none;background:#2d2055}
.ppm__art{position:relative;display:block;aspect-ratio:16/8.4;overflow:hidden}
.ppm__art img{display:block;max-width:100%}
.ppm__art--one img{width:100%;height:100%;object-fit:cover}
.ppm__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:ppmFade 10.5s infinite}
.ppm__bg--0{opacity:1;animation-delay:0s}
.ppm__bg--1{animation-delay:3.5s}
.ppm__bg--2{animation-delay:7s}
.ppm__tag{position:absolute;left:12px;bottom:10px;z-index:4;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#c0418a;font-size:12.5px;font-weight:900;letter-spacing:.06em;opacity:0;animation:ppmFade 10.5s infinite;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.ppm__tag--0{opacity:1;animation-delay:0s}
.ppm__tag--1{animation-delay:3.5s;color:#2f8a4e}
.ppm__tag--2{animation-delay:7s;color:#4a5bb8}
.ppm__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(45,32,85,0) 38%,rgba(45,32,85,.45) 100%),linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(45,32,85,.55) 100%)}
.ppm__burst{position:absolute;z-index:2;right:-2%;top:50%;width:52%;height:auto;margin-top:-26%;opacity:.95;animation:ppmSpin 14s linear infinite,ppmPulse 2.4s ease-in-out infinite}
.ppm__cards{position:absolute;z-index:3;right:8%;top:14%;width:34%;height:72%}
.ppm__card{position:absolute;top:0;width:58%;aspect-ratio:1/1.34;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.ppm__card img{width:100%;height:100%;object-fit:contain}
.ppm__card--a{left:0;transform:rotate(-12deg);animation:ppmBob 3.2s ease-in-out infinite}
.ppm__card--b{right:0;transform:rotate(10deg);perspective:600px}
.ppm__flip{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;animation:ppmFlip 4.2s ease-in-out infinite}
.ppm__face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ppm__face--front{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10%;background:linear-gradient(160deg,#fff7fb,#ffe3f0);border:3px solid #f6c64a;transform:rotateY(180deg)}
.ppm__face--front b{font-size:12px;font-weight:900;color:#8b6cc1;letter-spacing:.1em}
.ppm__face--front i{font-style:normal;font-size:clamp(20px,6vw,30px);font-weight:900;color:#d65c9a;line-height:1.1}
.ppm__fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ppm__cf{position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;opacity:.9;animation:ppmFall 4.6s linear infinite}
.ppm__cf--0{left:4%;background:#ff7eb6;animation-delay:0s}
.ppm__cf--1{left:11%;background:#ffd452;animation-delay:1.6s;animation-duration:5.2s}
.ppm__cf--2{left:18%;background:#9b7bff;animation-delay:.7s}
.ppm__cf--3{left:26%;background:#5fd3c4;animation-delay:2.4s;animation-duration:4s}
.ppm__cf--4{left:33%;background:#ff7eb6;animation-delay:3.1s}
.ppm__cf--5{left:40%;background:#ffd452;animation-delay:.3s;animation-duration:5.6s}
.ppm__cf--6{left:48%;background:#fff;animation-delay:1.9s}
.ppm__cf--7{left:55%;background:#9b7bff;animation-delay:3.6s;animation-duration:4.3s}
.ppm__cf--8{left:62%;background:#ff7eb6;animation-delay:1.1s}
.ppm__cf--9{left:69%;background:#ffd452;animation-delay:2.8s;animation-duration:5s}
.ppm__cf--10{left:76%;background:#5fd3c4;animation-delay:.5s}
.ppm__cf--11{left:83%;background:#fff;animation-delay:2.1s;animation-duration:4.4s}
.ppm__cf--12{left:90%;background:#ff7eb6;animation-delay:3.9s}
.ppm__cf--13{left:96%;background:#ffd452;animation-delay:1.4s;animation-duration:5.4s}
.ppm__sp{position:absolute;font-style:normal;color:#fff6c8;text-shadow:0 0 8px rgba(255,220,120,.95);animation:ppmTw 1.8s ease-in-out infinite}
.ppm__sp--0{left:8%;top:14%;font-size:20px}
.ppm__sp--1{left:44%;top:22%;font-size:14px;animation-delay:.6s}
.ppm__sp--2{right:6%;top:8%;font-size:18px;animation-delay:1.1s}
.ppm__sp--3{left:30%;bottom:16%;font-size:16px;animation-delay:.3s}
.ppm__rib{position:absolute;z-index:5;left:10px;top:10px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#ff4f9a,#ff8a3d);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 12px rgba(255,79,154,.45)}
.ppm__b{position:relative;border-radius:0 0 19px 19px;padding:16px 16px 18px;background:radial-gradient(120% 90% at 100% 0,#7b3fa0 0,rgba(123,63,160,0) 60%),linear-gradient(160deg,#2d2055,#4a2466);color:#fff}
.ppm__eye{margin:0 0 4px;font-size:11.5px;font-weight:900;letter-spacing:.1em;color:#ffd98a}
.ppm__h{margin:0 0 6px!important;padding:0!important;border:0!important;background:none!important;font-size:clamp(23px,6.6vw,30px)!important;line-height:1.25!important;font-weight:900;letter-spacing:.02em;color:#fff!important;text-shadow:0 2px 0 #d65c9a,0 0 18px rgba(255,126,182,.55)}
.ppm__h::before,.ppm__h::after{display:none!important}
.ppm__lead{margin:0 0 12px;font-size:14.5px;line-height:1.7;font-weight:800;color:#ffe9f4}
.ppm__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px!important;padding:0!important;list-style:none!important}
.ppm__chips li{display:inline-flex;align-items:center;gap:5px;margin:0!important;padding:7px 11px!important;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);font-size:12.5px;line-height:1.3;font-weight:900;color:#fff;white-space:nowrap;list-style:none!important}
.ppm__chips li::before{display:none!important}
.ppm__chips i{font-style:normal;font-size:15px;flex:none}
.ppm__steps{display:flex;gap:6px;margin:0 0 14px!important;padding:0!important;list-style:none!important;counter-reset:none}
.ppm__steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;margin:0!important;padding:0!important;font-size:11.5px;font-weight:800;color:#e9dcff;text-align:center;list-style:none!important}
.ppm__steps li::before{display:none!important}
.ppm__steps b{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#ffd452;color:#2d2055;font-size:13px}
.ppm__btn{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:12px 16px;border-radius:999px;overflow:hidden;background:linear-gradient(135deg,#ffe36b,#ffb347 45%,#ff6fae);color:#2d2055!important;font-size:16.5px;font-weight:900;text-decoration:none!important;box-shadow:0 8px 22px rgba(255,111,174,.45),inset 0 -3px 0 rgba(0,0,0,.12);animation:ppmBeat 2.2s ease-in-out infinite}
.ppm__btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-20deg);animation:ppmShine 2.8s ease-in-out infinite}
.ppm__btn:active{transform:scale(.98)}
.ppm__note{margin:9px 0 0;font-size:11.5px;line-height:1.6;font-weight:700;color:#cbbde5;text-align:center}
@media (min-width:720px){
	.ppm__art{aspect-ratio:16/7.2}
	.ppm__b{padding:18px 22px 20px}
}
@keyframes ppmRim{0%{background-position:0 50%}100%{background-position:300% 50%}}
@keyframes ppmFade{0%{opacity:0}4%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
@keyframes ppmSpin{to{transform:rotate(360deg)}}
@keyframes ppmPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes ppmBob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-6px)}}
@keyframes ppmFlip{0%,30%{transform:rotateY(0)}45%,85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes ppmFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(260px) rotate(540deg)}}
@keyframes ppmTw{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ppmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes ppmShine{0%{left:-60%}60%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){
	.ppm,.ppm *,.ppm *::after{animation:none!important}
	.ppm__bg--0,.ppm__tag--0{opacity:1}
	.ppm__bg--1,.ppm__bg--2,.ppm__tag--1,.ppm__tag--2,.ppm__cf{opacity:0}
	.ppm__flip{transform:rotateY(180deg)}
}