/* Android版リリース告知帯（トップの一番上）。iPhone が「ここに行こ！」と呼ぶ → Android が登場 →
   真ん中のいこボードに両方からカードが集まる → 「Android版リリース！」。12秒ループ。
   index.html（日本語）と en.html（英語）で共有する。動きを減らす設定では静止表示。 */
.announce{--a-ink:#1f2421;--a-sub:#5b6360;--a-line:#e4e6e3;--a-accent:#2a7a5f;--a-droid:#3ddc84;--ny:#f7d86b;--np:#f4a7b9;--nb:#9cc7f0;--no:#f6b37a;position:relative;overflow:hidden;background:linear-gradient(135deg,#e8f2ee 0%,#fdfdfb 55%,#fff5d9 100%);border-bottom:1px solid var(--a-line)}
.announce .a-inner{max-width:960px;margin:0 auto;padding:40px 20px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.announce .a-copy{flex:1 1 330px}
.announce .a-art{flex:1 1 400px;display:flex;justify-content:center}
.announce .a-pill{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--a-line);border-radius:999px;padding:.22em .95em .22em .28em;font-size:.86rem;font-weight:700;margin:0 0 .9em;line-height:1.6}
.announce .a-pill .a-new{background:var(--a-accent);color:#fff;border-radius:999px;padding:.08em .65em;font-size:.72rem;letter-spacing:.1em}
.announce .a-title{font-size:1.85rem;line-height:1.45;margin:0 0 .5em;font-weight:800;letter-spacing:.01em}
.announce .a-duo{background:linear-gradient(90deg,#1f2421 0%,#1f2421 30%,#2a7a5f 45%,#3ddc84 55%,#1f2421 70%,#1f2421 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:a-shine 4.5s linear infinite}
@keyframes a-shine{from{background-position:100% 0}to{background-position:-160% 0}}
.announce .nw{display:inline-block}
.announce .a-sub{color:var(--a-sub);margin:0 0 1.2em;line-height:1.8}
.announce .a-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.announce .a-more{color:var(--a-accent);font-weight:700;text-decoration:none;font-size:.95rem}
.announce .a-copy > *{animation:a-rise .7s cubic-bezier(.2,.8,.2,1) both}
.announce .a-copy > :nth-child(2){animation-delay:.12s}.announce .a-copy > :nth-child(3){animation-delay:.24s}.announce .a-copy > :nth-child(4){animation-delay:.36s}
@keyframes a-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.announce .stage{position:relative;width:min(100%,520px);aspect-ratio:520/360;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.5}
.announce .ph{position:absolute;background:#17191b;box-shadow:0 14px 28px rgba(31,36,33,.22)}
.announce .ph .scr{position:absolute;inset:5%;background:#fdfdfb;display:flex;flex-direction:column;gap:7%;padding:22% 8% 8%}
.announce .ph.ios{border-radius:22%/11%}
.announce .ph.ios .scr{border-radius:18%/9%}
.announce .ph.ios::after{content:"";position:absolute;left:36%;top:4.2%;width:28%;height:4%;border-radius:99px;background:#17191b}
.announce .ph.droid{border-radius:14%/7%}
.announce .ph.droid .scr{border-radius:10%/5%}
.announce .ph.droid::after{content:"";position:absolute;left:47%;top:5%;width:6%;aspect-ratio:1;border-radius:50%;background:#17191b}
.announce .mc{display:block;height:17%;border-radius:8px;background:#fff;border:1px solid var(--a-line);position:relative}
.announce .mc::before{content:"";position:absolute;left:6%;top:14%;bottom:14%;aspect-ratio:1;border-radius:6px;background:var(--c,#cfe4db)}
.announce .mc::after{content:"";position:absolute;left:42%;right:10%;top:34%;height:14%;border-radius:9px;background:#c9cdc9}
.announce .bub{position:absolute;background:#fff;border:2px solid var(--a-ink);border-radius:18px;padding:.35em .9em;font-weight:800;font-size:1.02rem;white-space:nowrap;box-shadow:0 6px 14px rgba(31,36,33,.12);color:var(--a-ink)}
.announce .bub::after{content:"";position:absolute;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--a-ink);border-bottom:2px solid var(--a-ink);transform:rotate(45deg)}
.announce .bub small{display:block;font-size:.68rem;font-weight:600;color:var(--a-sub)}
.announce .board{position:absolute;left:27%;top:12%;width:46%;height:78%;z-index:1;background:#fff;border:1px solid var(--a-line);border-radius:16px;box-shadow:0 14px 30px rgba(31,36,33,.12);animation:E-board 12s infinite}
.announce .board .bt{position:absolute;left:0;right:0;top:4%;text-align:center;font-weight:800;font-size:.9rem;color:var(--a-ink)}
.announce .board .bt small{display:block;font-size:.64rem;color:var(--a-sub);font-weight:600}
.announce .board .col{position:absolute;top:24%;bottom:5%;width:43%;border-radius:10px;background:#f4f6f4}
.announce .board .col.c1{left:5%}.announce .board .col.c2{right:5%}
.announce .board .col span{position:absolute;top:3%;left:0;right:0;text-align:center;font-size:.62rem;color:var(--a-sub);font-weight:700}

.announce .E-ios{left:2%;top:33%;width:18%;height:53%;z-index:2;animation:E-ios 12s infinite}
.announce .E-droid{right:2%;top:33%;width:18%;height:53%;z-index:2;animation:E-droid 12s infinite}
.announce .E-lab{position:absolute;top:89%;width:22%;text-align:center;font-weight:800;font-size:.9rem;letter-spacing:.02em;color:var(--a-ink)}
.announce .E-lab.l{left:0;animation:E-fadeL 12s infinite}
.announce .E-lab.r{right:0;color:var(--a-accent);animation:E-fadeR 12s infinite}
.announce .E-lab.r::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--a-droid);margin-right:.35em;vertical-align:.08em}
.announce .E-b1{left:0;top:5%;z-index:5;transform-origin:20% 100%;animation:E-b1 12s infinite}
.announce .E-b1::after{left:26px}
.announce .E-b2{right:1%;top:14%;z-index:5;transform-origin:80% 100%;background:#eafaf1;border-color:var(--a-accent);color:var(--a-accent);animation:E-b2 12s infinite}
.announce .E-b2::after{right:26px;background:#eafaf1;border-color:var(--a-accent)}
.announce .E-sp{position:absolute;color:var(--a-droid);font-size:1.25rem;z-index:3;animation:E-sp 12s infinite}
.announce .E-sp.s1{right:21%;top:30%}.announce .E-sp.s2{right:0;top:28%;animation-delay:.1s}.announce .E-sp.s3{right:20%;top:80%;animation-delay:.18s}.announce .E-sp.s4{right:1%;top:86%;animation-delay:.06s}
.announce .E-card{position:absolute;width:18%;height:17%;z-index:3;background:#fff;border:1px solid var(--a-line);border-left:5px solid var(--c);border-radius:8px;box-shadow:0 6px 14px rgba(31,36,33,.16)}
.announce .E-card::before{content:"";position:absolute;left:9%;top:16%;width:30%;height:68%;border-radius:5px;background:var(--t)}
.announce .E-card i{position:absolute;left:46%;right:8%;top:22%;height:14%;border-radius:9px;background:#3a3f3c;opacity:.75}
.announce .E-card b{position:absolute;right:6%;bottom:9%;font-size:.5rem;line-height:1.5;color:#fff;border-radius:99px;padding:.05em .5em;background:var(--o)}
.announce .E-c1{animation:E-c1 12s infinite}.announce .E-c2{animation:E-c2 12s infinite}.announce .E-c3{animation:E-c3 12s infinite}.announce .E-c4{animation:E-c4 12s infinite}
.announce .E-stamp{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%) rotate(-7deg);background:#fff;color:var(--a-accent);border:3px solid var(--a-accent);border-radius:16px;padding:.35em .8em;font-size:1.55rem;font-weight:900;line-height:1.2;text-align:center;white-space:nowrap;box-shadow:0 10px 24px rgba(42,122,95,.25);animation:E-stamp 12s infinite}
.announce .E-stamp small{display:block;font-size:.55em;color:var(--a-ink);font-weight:800}
.announce .E-conf{position:absolute;left:50%;top:50%;z-index:6;width:16px;height:12px;border-radius:2px;background:var(--c);animation:E-conf 12s infinite}

@keyframes E-ios{0%{opacity:0;transform:translateY(18px)}5%{opacity:1;transform:none}7%{transform:rotate(0)}8.5%{transform:rotate(-6deg)}10%{transform:rotate(5deg)}11.5%{transform:rotate(0)}92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes E-fadeL{0%{opacity:0}5%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes E-fadeR{0%,17%{opacity:0}22%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes E-b1{0%,7%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.1)}12%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes E-droid{0%,16%{opacity:0;transform:translateX(90px) rotate(8deg)}21%{opacity:1;transform:translateX(-10px) rotate(-3deg)}24%{transform:none}92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes E-sp{0%,19%{opacity:0;transform:scale(0) rotate(0)}23%{opacity:1;transform:scale(1.3) rotate(90deg)}30%,100%{opacity:0;transform:scale(.4) rotate(180deg)}}
@keyframes E-b2{0%,25%{opacity:0;transform:scale(.3)}28%{opacity:1;transform:scale(1.1)}30%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes E-board{0%,31%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1.05)}37%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes E-c1{0%,37%{opacity:0;left:2%;top:52%;transform:scale(.5)}39%{opacity:1;left:2%;top:52%;transform:scale(1)}42%{left:15%;top:20%;transform:rotate(-8deg) scale(1.08)}45%{left:30.2%;top:40%;transform:none}92%{opacity:1;left:30.2%;top:40%}97%,100%{opacity:0;left:30.2%;top:40%}}
@keyframes E-c2{0%,45%{opacity:0;left:80%;top:52%;transform:scale(.5)}47%{opacity:1;left:80%;top:52%;transform:scale(1)}50%{left:67%;top:20%;transform:rotate(8deg) scale(1.08)}53%{left:51.8%;top:40%;transform:none}92%{opacity:1;left:51.8%;top:40%}97%,100%{opacity:0;left:51.8%;top:40%}}
@keyframes E-c3{0%,53%{opacity:0;left:2%;top:52%;transform:scale(.5)}55%{opacity:1;left:2%;top:52%;transform:scale(1)}58%{left:15%;top:30%;transform:rotate(-6deg) scale(1.08)}61%{left:30.2%;top:62%;transform:none}92%{opacity:1;left:30.2%;top:62%}97%,100%{opacity:0;left:30.2%;top:62%}}
@keyframes E-c4{0%,61%{opacity:0;left:80%;top:52%;transform:scale(.5)}63%{opacity:1;left:80%;top:52%;transform:scale(1)}66%{left:67%;top:30%;transform:rotate(6deg) scale(1.08)}69%{left:51.8%;top:62%;transform:none}92%{opacity:1;left:51.8%;top:62%}97%,100%{opacity:0;left:51.8%;top:62%}}
@keyframes E-stamp{0%,70%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(2.3)}73%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(.94)}75%{transform:translate(-50%,-50%) rotate(-7deg) scale(1.04)}77%,92%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}97%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
@keyframes E-conf{0%,72%{opacity:0;transform:translate(-50%,-50%)}74%{opacity:1;transform:translate(-50%,-50%)}86%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r))}92%,100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 30px)) rotate(var(--r))}}

@media (max-width:720px){
.announce .a-inner{padding:24px 18px 28px;gap:14px}
.announce .a-art{order:-1}
.announce .a-title{font-size:1.38rem}
.announce .bub{font-size:.78rem;padding:.3em .7em}
.announce .bub small{font-size:.58rem}
.announce .E-lab{font-size:.75rem}
.announce .board .bt{font-size:.75rem}
.announce .E-stamp{font-size:1.2rem}
}
/* 動きを減らす設定: 最後の場面（全員そろってスタンプが押された状態）で止める */
@media (prefers-reduced-motion:reduce){
.announce *,.announce *::before,.announce *::after{animation:none!important}
.announce .E-c1{left:30.2%;top:40%}.announce .E-c2{left:51.8%;top:40%}.announce .E-c3{left:30.2%;top:62%}.announce .E-c4{left:51.8%;top:62%}
.announce .E-sp,.announce .E-conf{display:none}
.announce .a-duo{color:var(--a-ink);background:none}
}