@charset "UTF-8";
canvas {
display: block;
vertical-align: bottom;
opacity: .3;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
}

#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}

/* ===== ベース ===== */
.stage {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

/* ===== 横流しアニメーション ===== */
.flow {
position: absolute;
left: 110vw;
top: 10vh; /* data-position 側で上書き */
animation: flowX var(--dur, 14s) linear infinite;
animation-delay: var(--delay, 0s);
will-change: transform;
z-index: 15;
}
@keyframes flowX {
from { transform: translateX(0); }
to   { transform: translateX(-240vw); }
}

/* ===== カード（横幅は --w で制御） ===== */
.card {
width: var(--w, clamp(170px, 26vw, 340px));
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
}

/* ===== 子画像フェード切替 ===== */
.card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation: fade-switch var(--fade-total, 6s) infinite;
animation-delay: calc(var(--i, 0) * var(--fade-step, 3s));
}
@keyframes fade-switch {
0%   { opacity: 0; }
10%  { opacity: 1; }
60%  { opacity: 1; }
65%  { opacity: 0; }
100% { opacity: 0; }
}


/*PC*/
@media print, screen and (min-width: 768px) {
.card {
box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* ===== data-position a〜h 個別設定 ===== */
/* 縦位置(top) / 流れる速さ(--dur) / 開始ズラし(--delay) / 横幅(--w) */
[data-position="a"] { top: 15vh; --dur: 20s; --delay: 0s;  --w: 14vw; }
[data-position="b"] { top: 20vh; --dur: 24s; --delay: -2s;  --w: 12vw; }
[data-position="c"] { top: 30vh; --dur: 18s; --delay: -1s; --w: 22vw }
[data-position="d"] { top: 45vh; --dur: 36s; --delay: -2s;  --w: 18vw; }
[data-position="e"] { top: 55vh; --dur: 28s; --delay: -5s; --w: 20vw; }
[data-position="f"] { top: 62vh; --dur: 24s; --delay: -7s;  --w: 26vw; }
[data-position="g"] { top: 70vh; --dur: 20s; --delay: -3s; --w: 16vw; }
[data-position="h"] { top: 85vh; --dur: 36s; --delay: -5s;  --w: 12vw; }


}
/*SP*/
@media print, screen and (max-width: 767px) {
.card {
box-shadow: 0 3px 12px rgba(0,0,0,.35);
}

/* ===== data-position a〜h 個別設定 ===== */
/* 縦位置(top) / 流れる速さ(--dur) / 開始ズラし(--delay) / 横幅(--w) */
[data-position="a"] { top:  15vh; --dur: 10s; --delay: 0s;  --w: 44vw; }
[data-position="b"] { top: 20vh; --dur: 14s; --delay: -2s;  --w: 42vw; }
[data-position="c"] { top: 30vh; --dur: 8s; --delay: -1s; --w: 50vw }
[data-position="d"] { top: 45vh; --dur: 10s; --delay: -2s;  --w: 48vw; }
[data-position="e"] { top: 45vh; --dur: 18s; --delay: -5s; --w: 58vw; }
[data-position="f"] { top: 60vh; --dur: 14s; --delay: -7s;  --w: 56vw; }
[data-position="g"] { top: 70vh; --dur: 16s; --delay: -3s; --w: 42vw; }
[data-position="h"] { top: 90vh; --dur: 10s; --delay: -5s;  --w: 40vw; }
}


}