html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
font-family:
"Yu Gothic",
sans-serif;
}
*{
box-sizing:border-box;
}
/* ==========================
全体
========================== */
#top{
position:relative;
width:100vw;
height:100vh;
height:100dvh;
overflow:hidden;
background:#eaf6ff;
}
/* ==========================
背景
========================== */
.back{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}
/* ==========================
回転する円
========================== */
.maru{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
object-fit:contain;
transform:
translate(-50%,-50%);
animation:
kaiten 60s linear infinite;
z-index:2;
}
@keyframes kaiten{
from{
transform:
translate(-50%,-50%)
rotate(0deg);
}
to{
transform:
translate(-50%,-50%)
rotate(360deg);
}
}
/* ==========================
カエル＋ガチャ
========================== */
.kaeru{
position:absolute;
left:0;
top:-50px;
width:100%;
height:100%;
object-fit:contain;
z-index:3;
}
/* ==========================
文字
========================== */
.moji{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:contain;
z-index:4;
}
/* ==========================
ガチャ玉
========================== */
#tama{
position:absolute;
width:clamp(120px,18vw,170px);
left:60%;
top:40%;
transform:translate(-50%,-50%);
z-index:5;
animation:tamaFloat 4s ease-in-out infinite;
}
@keyframes tamaFloat{
0%{
transform:
translate(-50%,-50%)
translateY(0)
rotate(0deg);
}
50%{
transform:
translate(-50%,-50%)
translateY(-30px)
rotate(15deg);
}
100%{
transform:
translate(-50%,-50%)
translateY(0)
rotate(0deg);
}
}
/* ==========================
音符
========================== */
.note{
position:absolute;
color:#4aa3ff;
font-size:clamp(30px,4vw,48px);
font-weight:bold;
opacity:0;
z-index:6;
text-shadow:
0 0 15px rgba(74,163,255,.8);
animation:
rise 15s linear infinite;
}
.note1{
left:10%;
animation-delay:0s;
}
.note2{
left:30%;
animation-delay:5s;
}
.note3{
left:70%;
animation-delay:10s;
}
@keyframes rise{
0%{
transform:
translateY(100vh);
opacity:0;
}
20%{
opacity:.7;
}
50%{
transform:
translateY(50vh);
}
100%{
transform:
translateY(-150px);
opacity:0;
}
}
/* ==========================
クーポン
========================== */
.coupon{
position:fixed;
left:50%;
bottom:100px;
transform:translateX(-50%);
width:min(70%,700px);
max-width:700px;
z-index:9999;
animation:couponFloat 2.5s ease-in-out infinite;
pointer-events:auto;
}
@keyframes couponFloat{
0%,100%{
transform:translateX(-50%) translateY(0);
}
50%{
transform:translateX(-50%) translateY(-8px);
}
}
img{
max-width:100%;
height:auto;
display:block;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
/* ==========================
スマホだけガチャ玉調整
========================== */
@media (max-width:768px){
#tama{
width:110px;
left:60%;
top:46%;
}
}
/* iPad */
@media only screen and (min-device-width:768px) and (max-device-width:1366px){
.kaeru,
.moji{
width:92%;
height:92%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
/* ==========================
PCだけクーポンを小さく
========================== */
@media (min-width: 769px){
.coupon{
width:500px; /* 好きな大きさ */
max-width:500px;
bottom:40px; /* 少し下へ */
}
}