<div class="space">
<div class="chara" ontouchstart="">
<ul class="mario mario_j">
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
</ul>
<ul class="mario mario_s">
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
<li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
</ul>
</div>
</div>
/********* 設定 *******/
body {
background: #a0adfe;
}
:root {
/*肌色*/
--Hada: #facd89;
--None: none;
}
.mario{
/*マリオ服*/
--Fuku: #ff0000;
/*マリオ他*/
--Hoka: #638c0b;
}
.mario,
.luigi {
font-size: 0;
margin: 0;
padding: 0;
display: block;
}
img {
background: #eee;
width: 10px;
height: 10px;
}
/********* ジャンプ *******/
.space {
width: 100%;
height: 400px;
position: relative;
background: #a0adfe;
border-bottom: 30px solid #DF7D00;
}
.chara {
position: absolute;
bottom:0;
left: 25%;
}
.chara_jump {
animation-duration: 0.8s;
animation-name: jump;
animation-timing-function: ease-in;
}
@keyframes jump {
from {
bottom:0;
}
45% {
bottom: 150px;
}
55% {
bottom: 150px;
}
to {
bottom: 0;
}
}
/********* マリオ(ジャンプ) *******/
/*1行目*/
.mario_j li:nth-child(1) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(7) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(8) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(9) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(10) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(11) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(1) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(1) img:nth-child(16) {background: var(--Hada);}
/*2行目*/
.mario_j li:nth-child(2) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(2) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(2) img:nth-child(16) {background: var(--Hada);}
/*3行目*/
.mario_j li:nth-child(3) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(3) img:nth-child(16) {background: var(--Hada);}
/*4行目*/
.mario_j li:nth-child(4) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(16) {background: var(--Hoka);}
/*5行目*/
.mario_j li:nth-child(5) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(6) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(16) {background: var(--Hoka);}
/*6行目*/
.mario_j li:nth-child(6) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(6) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(11) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(16) {background: var(--Hoka);}
/*7行目*/
.mario_j li:nth-child(7) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(7) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(13) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(16) {background: var(--None);}
/*8行目*/
.mario_j li:nth-child(8) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(7) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(11) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(8) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(16) {background: var(--None);}
/*9行目*/
.mario_j li:nth-child(9) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(9) img:nth-child(9) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(9) img:nth-child(13) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(16) {background: var(--None);}
/*10行目*/
.mario_j li:nth-child(10) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(10) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(10) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(16) {background: var(--Hoka);}
/*11行目*/
.mario_j li:nth-child(11) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(11) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(11) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(11) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(11) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(16) {background: var(--Hoka);}
/*12行目*/
.mario_j li:nth-child(12) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(12) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(4) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(12) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(12) img:nth-child(16) {background: var(--Hoka);}
/*13行目*/
.mario_j li:nth-child(13) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(13) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(13) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(13) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(13) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(13) img:nth-child(16) {background: var(--Hoka);}
/*14行目*/
.mario_j li:nth-child(14) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(16) {background: var(--Hoka);}
/*15行目*/
.mario_j li:nth-child(15) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(15) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(15) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(16) {background: var(--None);}
/*16行目*/
.mario_j li:nth-child(16) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(2) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(9) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(10) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(11) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(16) {background: var(--None);}
/********* マリオ(スタンド) *******/
/*1行目*/
.mario_s li:nth-child(1) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(5) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(11) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(16) {background: var(--None);}
/*2行目*/
.mario_s li:nth-child(2) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(13) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(16) {background: var(--None);}
/*3行目*/
.mario_s li:nth-child(3) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(7) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(16) {background: var(--None);}
/*4行目*/
.mario_s li:nth-child(4) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(16) {background: var(--None);}
/*5行目*/
.mario_s li:nth-child(5) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(7) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(16) {background: var(--None);}
/*6行目*/
.mario_s li:nth-child(6) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(6) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(16) {background: var(--None);}
/*7行目*/
.mario_s li:nth-child(7) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(5) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(6) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(16) {background: var(--None);}
/*8行目*/
.mario_s li:nth-child(8) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(8) img:nth-child(8) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(9) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(11) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(16) {background: var(--None);}
/*9行目*/
.mario_s li:nth-child(9) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(9) img:nth-child(8) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(9) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(9) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(16) {background: var(--None);}
/*10行目*/
.mario_s li:nth-child(10) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(3) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(14) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(16) {background: var(--None);}
/*11行目*/
.mario_s li:nth-child(11) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(11) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(11) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(16) {background: var(--None);}
/*12行目*/
.mario_s li:nth-child(12) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(16) {background: var(--None);}
/*13行目*/
.mario_s li:nth-child(13) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(16) {background: var(--None);}
/*14行目*/
.mario_s li:nth-child(14) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(16) {background: var(--None);}
/*15行目*/
.mario_s li:nth-child(15) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(7) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(10) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(16) {background: var(--None);}
/*16行目*/
.mario_s li:nth-child(16) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(3) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(7) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(10) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(14) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(16) {background: var(--None);}
chara = document.querySelector(".chara");
mario_j = document.querySelector(".mario_j");
mario_s = document.querySelector(".mario_s");
//ページ読み込み時
mario_j.style.display="none";
//イベント(ジャンプ)
chara.addEventListener('click', function() {
chara.classList.add('chara_jump');
mario_j.style.display="block";
mario_s.style.display="none";
}, false);
//イベント(着地後)
chara.addEventListener('animationend', function() {
chara.classList.remove('chara_jump');
mario_j.style.display="none";
mario_s.style.display="block";
}, false);
This Pen doesn't use any external CSS resources.