@charset "utf-8";


/* ボヨンボヨンアニメーション */
.fuwafuwa img {
display: inline-block;
animation: floatBounce 3s ease-in-out infinite;
transform-origin: center center;
}
@keyframes floatBounce {
0%   { transform: scale(0.9) translateY(0); }
10%  { transform: scale(1.0) translateY(-8px); }
20%  { transform: scale(0.92) translateY(4px); }
30%  { transform: scale(1.0) translateY(-6px); }
40%  { transform: scale(0.92) translateY(3px); }
100% { transform: scale(0.9) translateY(0); }
}




/* ビヨンビヨンアニメーション */
.bouncy-figure {
display: inline-block;
animation: bouncyStretch 2.5s infinite ease-in-out;
transform-origin: center;
}
@keyframes bouncyStretch {
0% { transform: scaleX(0.6); }
20% { transform: scaleX(1.0); }
35% { transform: scaleX(0.9); }
70% { transform: scaleX(0.9); }
100% { transform: scaleX(0.6); }
}
.bouncy-figure img{
transform: translateY(min(7vw , 50px));
}

/* ピクピクアニメーション */
/*
.pikupiku {
display: inline-block;
animation: shakeX 2s ease-in-out infinite;
}
@keyframes shakeX {
0% { transform: translateX(0); }
2% { transform: translateX(-10px); }
4% { transform: translateX(10px); }
6% { transform: translateX(-8px); }
8% { transform: translateX(8px); }
10% { transform: translateX(-6px); }
12% { transform: translateX(6px); }
14% { transform: translateX(-4px); }
16% { transform: translateX(4px); }
18% { transform: translateX(0); }
100% { transform: translateX(0); }
}
*/


/*光のエフェクト*/
.glow-effect {
position: relative;
display: inline-block;
overflow: hidden;
}
.glow-effect img {
display: block;
width: 100%;
height: auto;
}
/* 強調された光のスイープ */
.glow-effect::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 350%;
height: 350%;
background: linear-gradient(
130deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 60%
);
transform: translate(-250%, -250%) rotate(25deg);
animation: lightSweep 2.5s linear infinite;
pointer-events: none;
}
@keyframes lightSweep {
0% {
transform: translate(-250%, -250%) rotate(25deg);
}
100% {
transform: translate(250%, 250%) rotate(25deg);
}
}






/* 円グラフ */
.circle-graph {
/*
width: 284px;
height: 284px;
*/
width: 100%;
height: 100%;
position: relative;
}
.circle-graph img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
svg {
display: block;
transform: rotate(-90deg);
}
.bg-circle {
fill: none;
stroke: #dfdfdf;
stroke-width: 140;
}
.fg-circle {
fill: none;
stroke: #5a84d9;
stroke-width: 140;
stroke-linecap: butt;
stroke-dasharray: 452.39;
stroke-dashoffset: 452.39;
transition: stroke-dashoffset 2s ease-out;
}
.animate .fg-circle {
stroke-dashoffset: 36.19;
}