/* FRFX1029 アイコン枠の動く層。動かすのは transform と opacity だけ。.is-in（画面の中）の時だけ動く。 */
.frfx{position:absolute;left:0;top:0;display:block;pointer-events:none;contain:layout style;--c1:#ffd86b;--c2:#fff4c2;--sp:#fff}
.frfx>*{position:absolute;display:block;pointer-events:none}

/* 色 */
.frfx-t-gold{--c1:#ffc93c;--c2:#fff1b0;--sp:#fffbe8}
.frfx-t-silver{--c1:#b9d4ff;--c2:#f2f7ff;--sp:#fff}
.frfx-t-bronze{--c1:#f0a56a;--c2:#ffe0c4;--sp:#fff6ee}
.frfx-t-rose{--c1:#ff7dc4;--c2:#ffd3ec;--sp:#fff}
.frfx-t-violet{--c1:#b388ff;--c2:#eadcff;--sp:#fff}
.frfx-t-pumpkin{--c1:#ff9a3c;--c2:#ffe1a8;--sp:#fff8e6}
.frfx-t-autumn{--c1:#ff7a45;--c2:#ffd59a;--sp:#fff6e0}
.frfx-t-night{--c1:#7fa8ff;--c2:#e2ecff;--sp:#fff}
.frfx-t-sunrise{--c1:#ff9f6b;--c2:#ffe9b8;--sp:#fff}
.frfx-t-aqua{--c1:#4fd8e8;--c2:#d4fbff;--sp:#fff}
.frfx-t-leaf{--c1:#7fd88a;--c2:#e6ffd9;--sp:#fff}

/* 1) オーラ（枠の外がわに、ゆっくり脈打つ光の輪） */
/* 枠の絵（半径 0.5）の外だけ: 箱を 120% にして、半径の 82%〜100% に光 */
.frfx .fx-a{inset:-10%;border-radius:50%;opacity:.5;
  background:radial-gradient(circle closest-side,transparent 0 80%,var(--c1) 85%,color-mix(in srgb,var(--c1) 35%,transparent) 92%,transparent 100%)}
@supports not (color: color-mix(in srgb,red 50%,blue)){.frfx .fx-a{background:radial-gradient(circle closest-side,transparent 0 80%,var(--c1) 85%,transparent 100%)}}
.frfx--lg .fx-a{opacity:.7;inset:-13%;background:radial-gradient(circle closest-side,transparent 0 76%,var(--c1) 81%,#ff9be0 88%,rgba(159,208,255,.5) 94%,transparent 100%)}

/* 2) まわりを回る光（彗星）。輪の形に型抜きして回すだけ */
.frfx .fx-r{inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--c1) 70%,transparent) 82%,var(--c2) 93%,#fff 97%,transparent 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 80%,#000 85%,#000 96%,transparent 100%);
          mask:radial-gradient(circle closest-side,transparent 0 80%,#000 85%,#000 96%,transparent 100%)}
@supports not (color: color-mix(in srgb,red 50%,blue)){.frfx .fx-r{background:conic-gradient(from 0deg,transparent 0 62%,var(--c1) 82%,var(--c2) 93%,#fff 97%,transparent 100%)}}
.frfx .fx-r2{inset:0;border-radius:50%;opacity:.9;
  background:conic-gradient(from 180deg,transparent 0 66%,#ff9be0 76%,#9fd0ff 84%,#b6ffcf 90%,#fff 96%,transparent 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 83%,#000 87%,#000 94%,transparent 98%);
          mask:radial-gradient(circle closest-side,transparent 0 83%,#000 87%,#000 94%,transparent 98%)}

/* 3) 流れる光沢（枠の絵の形で型抜き＝絵の上だけが光る） */
.frfx .fx-s{inset:0;overflow:hidden;
  -webkit-mask:var(--fx-m) center/100% 100% no-repeat;mask:var(--fx-m) center/100% 100% no-repeat}
.frfx .fx-s>i{position:absolute;top:-10%;bottom:-10%;left:0;width:100%;opacity:0;transform:translateX(-100%) skewX(-18deg);
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.15) 60%,transparent 70%)}

/* 4) きらめきの粒（十字の光）。輪の上の決まった位置で、順に光る */
.frfx .fx-k{inset:0;opacity:0}
.frfx .fx-k>b{transform:rotate(45deg) scale(.85)}
.frfx .fx-k>b{position:absolute;display:block;width:22%;height:22%;margin:-11% 0 0 -11%;
  background:
    radial-gradient(circle closest-side,#fff 0 16%,color-mix(in srgb,var(--sp) 80%,transparent) 28%,transparent 66%),
    linear-gradient(90deg,transparent 46%,var(--sp) 49% 51%,transparent 54%) center/100% 70% no-repeat,
    linear-gradient(0deg,transparent 46%,var(--sp) 49% 51%,transparent 54%) center/70% 100% no-repeat}
@supports not (color: color-mix(in srgb,red 50%,blue)){.frfx .fx-k>b{background:radial-gradient(circle closest-side,#fff 0 16%,transparent 66%),linear-gradient(90deg,transparent 46%,#fff 49% 51%,transparent 54%) center/100% 70% no-repeat,linear-gradient(0deg,transparent 46%,#fff 49% 51%,transparent 54%) center/70% 100% no-repeat}}
/* 半径46%の輪の上: 300°・40°・160°・230°・95°・345° */
.frfx .fx-k>b.p1{left:73%;top:10.2%}
.frfx .fx-k>b.p2{left:85.2%;top:79.6%}
.frfx .fx-k>b.p3{left:6.8%;top:65.7%}
.frfx .fx-k>b.p4{left:20.4%;top:14.8%}
.frfx .fx-k>b.p5{left:46%;top:95.8%}
.frfx .fx-k>b.p6{left:94.4%;top:38.1%}

/* 5) まわりを周回する光の粒 */
.frfx .fx-o{inset:0}
.frfx .fx-o::before,.frfx .fx-o::after{content:"";position:absolute;left:45%;top:-.5%;width:10%;height:10%;border-radius:50%;
  background:radial-gradient(circle closest-side,#fff 0 30%,var(--c2) 50%,color-mix(in srgb,var(--c1) 50%,transparent) 72%,transparent 100%)}
.frfx .fx-o::after{display:none;top:auto;bottom:-.5%}
.frfx--lg .fx-o::after{display:block}

/* 6) 舞う粒（輪の外がわ、左右のふちを落ちる／火の粉は昇る）。絵は p/<名>.webp（64px・2KB 以下） */
.frfx .fx-p{inset:0}
.frfx .fx-p>b{position:absolute;display:block;width:15%;height:15%;top:-4%;opacity:0;background:var(--fx-pi) center/contain no-repeat}
.frfx .fx-p>b:nth-child(1){left:1%}
.frfx .fx-p>b:nth-child(2){left:84%;width:12%;height:12%}
.frfx .fx-p>b:nth-child(3){left:9%;width:11%;height:11%}
.frfx .fx-p>b:nth-child(4){left:90%}
.frfx-p-ember .fx-p>b{top:auto;bottom:-4%}

/* 大きさごとの見せ方 */
.frfx--xs .fx-p,.frfx--s .fx-p{display:none}
.frfx--xs .fx-s,.frfx--xs .fx-k,.frfx--xs .fx-o{display:none}
.frfx--xs .fx-a{inset:-8%}
.frfx--s .fx-k2{display:none}
.frfx--s.frfx--ur .fx-s,.frfx--s.frfx--lg .fx-s{display:none}
.frfx--s.frfx--ur .fx-o{display:none}
.frfx--l .fx-k>b{width:18%;height:18%;margin:-9% 0 0 -9%}

/* 動き（画面の中・動きを減らす設定でない時だけ） */
@media (prefers-reduced-motion:no-preference){
  .frfx.is-in .fx-a{animation:frfx-pulse 2.4s ease-in-out infinite alternate;will-change:transform,opacity}
  .frfx--lg.is-in .fx-a{animation-duration:1.6s}
  .frfx.is-in .fx-r{animation:frfx-spin 2.6s linear infinite;will-change:transform}
  .frfx--lg.is-in .fx-r{animation-duration:2.2s}
  .frfx.is-in .fx-r2{animation:frfx-spin 3.6s linear infinite reverse;will-change:transform}
  .frfx.is-in .fx-s>i{animation:frfx-sheen 4.2s ease-in-out infinite;will-change:transform,opacity}
  .frfx--sr.is-in .fx-s>i{animation-duration:3.4s}
  .frfx--ur.is-in .fx-s>i,.frfx--lg.is-in .fx-s>i{animation-duration:2.8s}
  .frfx.is-in .fx-k{animation:frfx-twinkle 2.4s ease-in-out infinite;will-change:transform,opacity}
  .frfx.is-in .fx-k2{animation-delay:-1.2s}
  .frfx--lg.is-in .fx-k{animation-duration:1.8s}
  .frfx--lg.is-in .fx-k2{animation-delay:-.9s}
  .frfx.is-in .fx-p>b{animation:frfx-fall 3.6s linear infinite;will-change:transform,opacity}
  .frfx.is-in .fx-p>b:nth-child(2){animation-delay:-.9s;animation-duration:4.2s}
  .frfx.is-in .fx-p>b:nth-child(3){animation-delay:-2.1s;animation-duration:3.9s}
  .frfx.is-in .fx-p>b:nth-child(4){animation-delay:-2.9s}
  .frfx-p-ember.is-in .fx-p>b{animation-name:frfx-rise}
  .frfx.is-in .fx-o{animation:frfx-spin 4.2s linear infinite;will-change:transform}
  .frfx--lg.is-in .fx-o{animation-duration:3.2s}
}
/* 動きを減らす設定: 光の輪とオーラを止めた形で少しだけ見せる */
@media (prefers-reduced-motion:reduce){
  .frfx .fx-s,.frfx .fx-k,.frfx .fx-o,.frfx .fx-p{display:none}
}
@keyframes frfx-spin{to{transform:rotate(360deg)}}
@keyframes frfx-pulse{from{opacity:.25;transform:scale(.97)}to{opacity:.75;transform:scale(1.03)}}
@keyframes frfx-sheen{0%{opacity:0;transform:translateX(-100%) skewX(-18deg)}8%{opacity:1}38%{opacity:1;transform:translateX(100%) skewX(-18deg)}42%,100%{opacity:0;transform:translateX(100%) skewX(-18deg)}}
@keyframes frfx-twinkle{0%,100%{opacity:0;transform:scale(.94)}45%{opacity:1;transform:scale(1.02)}75%{opacity:0;transform:scale(1.05)}}
@keyframes frfx-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}50%{transform:translate(40%,320%) rotate(160deg)}88%{opacity:1}100%{opacity:0;transform:translate(-20%,640%) rotate(320deg)}}
@keyframes frfx-rise{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(30%,-600%) scale(1.1)}}