The Matrix in Sass
How do I make an the matrix in sass?
From my talk at SassConf! No Javascript is used to create this. Just CSS animations.. What is a the matrix in sass? How do you make a the matrix in sass? This script and codes were developed by John W. Long on 24 September 2022, Saturday.
The Matrix in Sass Previews
The Matrix in Sass - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Matrix in Sass</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="matrix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>
</body>
</html>
The Matrix in Sass - Script Codes CSS Codes
@charset "UTF-8";
body { font-family: courier; background: black; overflow: hidden; margin: 0; padding: 0; text-align: center;
}
.matrix { display: block; list-style: none; padding: 0; margin: 0; color: #80ff80; font-size: 18px; line-height: 24px; overflow: hidden; width: 100%; white-space: nowrap;
}
.matrix li:nth-child(1) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(1):before { display: block; width: 1em; content: "ワ バ ラ リ フ バ フ フ リ う リ た う ょ ょ フ し ド ワ し リ ウ フ フ";
}
.matrix li:nth-child(1):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 120px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(25%, #000000), color-stop(100%, #000000)) 0 120px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 120px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 120px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 120px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "た"; padding-top: 264px; overflow: hidden; -webkit-animation: 1920ms column-1 infinite steps(1, start); -moz-animation: 1920ms column-1 infinite steps(1, start); -ms-animation: 1920ms column-1 infinite steps(1, start); -o-animation: 1920ms column-1 infinite steps(1, start); animation: 1920ms column-1 infinite steps(1, start);
}
@-webkit-keyframes column-1 { 0% { background-position: 0 120px; padding-top: 264px; } 4.16667% { background-position: 0 144px; padding-top: 288px; } 8.33333% { background-position: 0 168px; padding-top: 312px; } 12.5% { background-position: 0 192px; padding-top: 336px; } 16.66667% { background-position: 0 216px; padding-top: 360px; } 20.83333% { background-position: 0 240px; padding-top: 384px; } 25% { background-position: 0 264px; padding-top: 408px; } 29.16667% { background-position: 0 288px; padding-top: 432px; } 33.33333% { background-position: 0 312px; padding-top: 456px; } 37.5% { background-position: 0 336px; padding-top: 480px; } 41.66667% { background-position: 0 360px; padding-top: 504px; } 45.83333% { background-position: 0 384px; padding-top: 528px; } 50% { background-position: 0 408px; padding-top: 552px; } 54.16667% { background-position: 0 -144px; padding-top: 0px; } 58.33333% { background-position: 0 -120px; padding-top: 24px; } 62.5% { background-position: 0 -96px; padding-top: 48px; } 66.66667% { background-position: 0 -72px; padding-top: 72px; } 70.83333% { background-position: 0 -48px; padding-top: 96px; } 75% { background-position: 0 -24px; padding-top: 120px; } 79.16667% { background-position: 0 0px; padding-top: 144px; } 83.33333% { background-position: 0 24px; padding-top: 168px; } 87.5% { background-position: 0 48px; padding-top: 192px; } 91.66667% { background-position: 0 72px; padding-top: 216px; } 95.83333% { background-position: 0 96px; padding-top: 240px; }
}
@-moz-keyframes column-1 { 0% { background-position: 0 120px; padding-top: 264px; } 4.16667% { background-position: 0 144px; padding-top: 288px; } 8.33333% { background-position: 0 168px; padding-top: 312px; } 12.5% { background-position: 0 192px; padding-top: 336px; } 16.66667% { background-position: 0 216px; padding-top: 360px; } 20.83333% { background-position: 0 240px; padding-top: 384px; } 25% { background-position: 0 264px; padding-top: 408px; } 29.16667% { background-position: 0 288px; padding-top: 432px; } 33.33333% { background-position: 0 312px; padding-top: 456px; } 37.5% { background-position: 0 336px; padding-top: 480px; } 41.66667% { background-position: 0 360px; padding-top: 504px; } 45.83333% { background-position: 0 384px; padding-top: 528px; } 50% { background-position: 0 408px; padding-top: 552px; } 54.16667% { background-position: 0 -144px; padding-top: 0px; } 58.33333% { background-position: 0 -120px; padding-top: 24px; } 62.5% { background-position: 0 -96px; padding-top: 48px; } 66.66667% { background-position: 0 -72px; padding-top: 72px; } 70.83333% { background-position: 0 -48px; padding-top: 96px; } 75% { background-position: 0 -24px; padding-top: 120px; } 79.16667% { background-position: 0 0px; padding-top: 144px; } 83.33333% { background-position: 0 24px; padding-top: 168px; } 87.5% { background-position: 0 48px; padding-top: 192px; } 91.66667% { background-position: 0 72px; padding-top: 216px; } 95.83333% { background-position: 0 96px; padding-top: 240px; }
}
@-o-keyframes column-1 { 0% { background-position: 0 120px; padding-top: 264px; } 4.16667% { background-position: 0 144px; padding-top: 288px; } 8.33333% { background-position: 0 168px; padding-top: 312px; } 12.5% { background-position: 0 192px; padding-top: 336px; } 16.66667% { background-position: 0 216px; padding-top: 360px; } 20.83333% { background-position: 0 240px; padding-top: 384px; } 25% { background-position: 0 264px; padding-top: 408px; } 29.16667% { background-position: 0 288px; padding-top: 432px; } 33.33333% { background-position: 0 312px; padding-top: 456px; } 37.5% { background-position: 0 336px; padding-top: 480px; } 41.66667% { background-position: 0 360px; padding-top: 504px; } 45.83333% { background-position: 0 384px; padding-top: 528px; } 50% { background-position: 0 408px; padding-top: 552px; } 54.16667% { background-position: 0 -144px; padding-top: 0px; } 58.33333% { background-position: 0 -120px; padding-top: 24px; } 62.5% { background-position: 0 -96px; padding-top: 48px; } 66.66667% { background-position: 0 -72px; padding-top: 72px; } 70.83333% { background-position: 0 -48px; padding-top: 96px; } 75% { background-position: 0 -24px; padding-top: 120px; } 79.16667% { background-position: 0 0px; padding-top: 144px; } 83.33333% { background-position: 0 24px; padding-top: 168px; } 87.5% { background-position: 0 48px; padding-top: 192px; } 91.66667% { background-position: 0 72px; padding-top: 216px; } 95.83333% { background-position: 0 96px; padding-top: 240px; }
}
@keyframes column-1 { 0% { background-position: 0 120px; padding-top: 264px; } 4.16667% { background-position: 0 144px; padding-top: 288px; } 8.33333% { background-position: 0 168px; padding-top: 312px; } 12.5% { background-position: 0 192px; padding-top: 336px; } 16.66667% { background-position: 0 216px; padding-top: 360px; } 20.83333% { background-position: 0 240px; padding-top: 384px; } 25% { background-position: 0 264px; padding-top: 408px; } 29.16667% { background-position: 0 288px; padding-top: 432px; } 33.33333% { background-position: 0 312px; padding-top: 456px; } 37.5% { background-position: 0 336px; padding-top: 480px; } 41.66667% { background-position: 0 360px; padding-top: 504px; } 45.83333% { background-position: 0 384px; padding-top: 528px; } 50% { background-position: 0 408px; padding-top: 552px; } 54.16667% { background-position: 0 -144px; padding-top: 0px; } 58.33333% { background-position: 0 -120px; padding-top: 24px; } 62.5% { background-position: 0 -96px; padding-top: 48px; } 66.66667% { background-position: 0 -72px; padding-top: 72px; } 70.83333% { background-position: 0 -48px; padding-top: 96px; } 75% { background-position: 0 -24px; padding-top: 120px; } 79.16667% { background-position: 0 0px; padding-top: 144px; } 83.33333% { background-position: 0 24px; padding-top: 168px; } 87.5% { background-position: 0 48px; padding-top: 192px; } 91.66667% { background-position: 0 72px; padding-top: 216px; } 95.83333% { background-position: 0 96px; padding-top: 240px; }
}
.matrix li:nth-child(2) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(2):before { display: block; width: 1em; content: "ソ う ョ ょ タ コ ョ ド ョ ド ウ バ タ ラ ク ワ ウ ウ ょ ウ ラ ョ ョ ン";
}
.matrix li:nth-child(2):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -48px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(25%, #000000), color-stop(100%, #000000)) 0 -48px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 -48px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 -48px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 -48px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "タ"; padding-top: 96px; overflow: hidden; -webkit-animation: 1920ms column-2 infinite steps(1, start); -moz-animation: 1920ms column-2 infinite steps(1, start); -ms-animation: 1920ms column-2 infinite steps(1, start); -o-animation: 1920ms column-2 infinite steps(1, start); animation: 1920ms column-2 infinite steps(1, start);
}
@-webkit-keyframes column-2 { 0% { background-position: 0 -48px; padding-top: 96px; } 4.16667% { background-position: 0 -24px; padding-top: 120px; } 8.33333% { background-position: 0 0px; padding-top: 144px; } 12.5% { background-position: 0 24px; padding-top: 168px; } 16.66667% { background-position: 0 48px; padding-top: 192px; } 20.83333% { background-position: 0 72px; padding-top: 216px; } 25% { background-position: 0 96px; padding-top: 240px; } 29.16667% { background-position: 0 120px; padding-top: 264px; } 33.33333% { background-position: 0 144px; padding-top: 288px; } 37.5% { background-position: 0 168px; padding-top: 312px; } 41.66667% { background-position: 0 192px; padding-top: 336px; } 45.83333% { background-position: 0 216px; padding-top: 360px; } 50% { background-position: 0 240px; padding-top: 384px; } 54.16667% { background-position: 0 264px; padding-top: 408px; } 58.33333% { background-position: 0 288px; padding-top: 432px; } 62.5% { background-position: 0 312px; padding-top: 456px; } 66.66667% { background-position: 0 336px; padding-top: 480px; } 70.83333% { background-position: 0 360px; padding-top: 504px; } 75% { background-position: 0 384px; padding-top: 528px; } 79.16667% { background-position: 0 408px; padding-top: 552px; } 83.33333% { background-position: 0 -144px; padding-top: 0px; } 87.5% { background-position: 0 -120px; padding-top: 24px; } 91.66667% { background-position: 0 -96px; padding-top: 48px; } 95.83333% { background-position: 0 -72px; padding-top: 72px; }
}
@-moz-keyframes column-2 { 0% { background-position: 0 -48px; padding-top: 96px; } 4.16667% { background-position: 0 -24px; padding-top: 120px; } 8.33333% { background-position: 0 0px; padding-top: 144px; } 12.5% { background-position: 0 24px; padding-top: 168px; } 16.66667% { background-position: 0 48px; padding-top: 192px; } 20.83333% { background-position: 0 72px; padding-top: 216px; } 25% { background-position: 0 96px; padding-top: 240px; } 29.16667% { background-position: 0 120px; padding-top: 264px; } 33.33333% { background-position: 0 144px; padding-top: 288px; } 37.5% { background-position: 0 168px; padding-top: 312px; } 41.66667% { background-position: 0 192px; padding-top: 336px; } 45.83333% { background-position: 0 216px; padding-top: 360px; } 50% { background-position: 0 240px; padding-top: 384px; } 54.16667% { background-position: 0 264px; padding-top: 408px; } 58.33333% { background-position: 0 288px; padding-top: 432px; } 62.5% { background-position: 0 312px; padding-top: 456px; } 66.66667% { background-position: 0 336px; padding-top: 480px; } 70.83333% { background-position: 0 360px; padding-top: 504px; } 75% { background-position: 0 384px; padding-top: 528px; } 79.16667% { background-position: 0 408px; padding-top: 552px; } 83.33333% { background-position: 0 -144px; padding-top: 0px; } 87.5% { background-position: 0 -120px; padding-top: 24px; } 91.66667% { background-position: 0 -96px; padding-top: 48px; } 95.83333% { background-position: 0 -72px; padding-top: 72px; }
}
@-o-keyframes column-2 { 0% { background-position: 0 -48px; padding-top: 96px; } 4.16667% { background-position: 0 -24px; padding-top: 120px; } 8.33333% { background-position: 0 0px; padding-top: 144px; } 12.5% { background-position: 0 24px; padding-top: 168px; } 16.66667% { background-position: 0 48px; padding-top: 192px; } 20.83333% { background-position: 0 72px; padding-top: 216px; } 25% { background-position: 0 96px; padding-top: 240px; } 29.16667% { background-position: 0 120px; padding-top: 264px; } 33.33333% { background-position: 0 144px; padding-top: 288px; } 37.5% { background-position: 0 168px; padding-top: 312px; } 41.66667% { background-position: 0 192px; padding-top: 336px; } 45.83333% { background-position: 0 216px; padding-top: 360px; } 50% { background-position: 0 240px; padding-top: 384px; } 54.16667% { background-position: 0 264px; padding-top: 408px; } 58.33333% { background-position: 0 288px; padding-top: 432px; } 62.5% { background-position: 0 312px; padding-top: 456px; } 66.66667% { background-position: 0 336px; padding-top: 480px; } 70.83333% { background-position: 0 360px; padding-top: 504px; } 75% { background-position: 0 384px; padding-top: 528px; } 79.16667% { background-position: 0 408px; padding-top: 552px; } 83.33333% { background-position: 0 -144px; padding-top: 0px; } 87.5% { background-position: 0 -120px; padding-top: 24px; } 91.66667% { background-position: 0 -96px; padding-top: 48px; } 95.83333% { background-position: 0 -72px; padding-top: 72px; }
}
@keyframes column-2 { 0% { background-position: 0 -48px; padding-top: 96px; } 4.16667% { background-position: 0 -24px; padding-top: 120px; } 8.33333% { background-position: 0 0px; padding-top: 144px; } 12.5% { background-position: 0 24px; padding-top: 168px; } 16.66667% { background-position: 0 48px; padding-top: 192px; } 20.83333% { background-position: 0 72px; padding-top: 216px; } 25% { background-position: 0 96px; padding-top: 240px; } 29.16667% { background-position: 0 120px; padding-top: 264px; } 33.33333% { background-position: 0 144px; padding-top: 288px; } 37.5% { background-position: 0 168px; padding-top: 312px; } 41.66667% { background-position: 0 192px; padding-top: 336px; } 45.83333% { background-position: 0 216px; padding-top: 360px; } 50% { background-position: 0 240px; padding-top: 384px; } 54.16667% { background-position: 0 264px; padding-top: 408px; } 58.33333% { background-position: 0 288px; padding-top: 432px; } 62.5% { background-position: 0 312px; padding-top: 456px; } 66.66667% { background-position: 0 336px; padding-top: 480px; } 70.83333% { background-position: 0 360px; padding-top: 504px; } 75% { background-position: 0 384px; padding-top: 528px; } 79.16667% { background-position: 0 408px; padding-top: 552px; } 83.33333% { background-position: 0 -144px; padding-top: 0px; } 87.5% { background-position: 0 -120px; padding-top: 24px; } 91.66667% { background-position: 0 -96px; padding-top: 48px; } 95.83333% { background-position: 0 -72px; padding-top: 72px; }
}
.matrix li:nth-child(3) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(3):before { display: block; width: 1em; content: "フ ば ワ わ ワ た こ ソ バ ワ フ マ バ ウ ょ ん き う ワ う ウ ト う ン";
}
.matrix li:nth-child(3):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -168px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(41.66667%, rgba(0, 0, 0, 0)), color-stop(41.66667%, #000000), color-stop(100%, #000000)) 0 -168px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -168px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -168px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -168px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "わ"; padding-top: 72px; overflow: hidden; -webkit-animation: 1920ms column-3 infinite steps(1, start); -moz-animation: 1920ms column-3 infinite steps(1, start); -ms-animation: 1920ms column-3 infinite steps(1, start); -o-animation: 1920ms column-3 infinite steps(1, start); animation: 1920ms column-3 infinite steps(1, start);
}
@-webkit-keyframes column-3 { 0% { background-position: 0 -168px; padding-top: 72px; } 4.16667% { background-position: 0 -144px; padding-top: 96px; } 8.33333% { background-position: 0 -120px; padding-top: 120px; } 12.5% { background-position: 0 -96px; padding-top: 144px; } 16.66667% { background-position: 0 -72px; padding-top: 168px; } 20.83333% { background-position: 0 -48px; padding-top: 192px; } 25% { background-position: 0 -24px; padding-top: 216px; } 29.16667% { background-position: 0 0px; padding-top: 240px; } 33.33333% { background-position: 0 24px; padding-top: 264px; } 37.5% { background-position: 0 48px; padding-top: 288px; } 41.66667% { background-position: 0 72px; padding-top: 312px; } 45.83333% { background-position: 0 96px; padding-top: 336px; } 50% { background-position: 0 120px; padding-top: 360px; } 54.16667% { background-position: 0 144px; padding-top: 384px; } 58.33333% { background-position: 0 168px; padding-top: 408px; } 62.5% { background-position: 0 192px; padding-top: 432px; } 66.66667% { background-position: 0 216px; padding-top: 456px; } 70.83333% { background-position: 0 240px; padding-top: 480px; } 75% { background-position: 0 264px; padding-top: 504px; } 79.16667% { background-position: 0 288px; padding-top: 528px; } 83.33333% { background-position: 0 312px; padding-top: 552px; } 87.5% { background-position: 0 -240px; padding-top: 0px; } 91.66667% { background-position: 0 -216px; padding-top: 24px; } 95.83333% { background-position: 0 -192px; padding-top: 48px; }
}
@-moz-keyframes column-3 { 0% { background-position: 0 -168px; padding-top: 72px; } 4.16667% { background-position: 0 -144px; padding-top: 96px; } 8.33333% { background-position: 0 -120px; padding-top: 120px; } 12.5% { background-position: 0 -96px; padding-top: 144px; } 16.66667% { background-position: 0 -72px; padding-top: 168px; } 20.83333% { background-position: 0 -48px; padding-top: 192px; } 25% { background-position: 0 -24px; padding-top: 216px; } 29.16667% { background-position: 0 0px; padding-top: 240px; } 33.33333% { background-position: 0 24px; padding-top: 264px; } 37.5% { background-position: 0 48px; padding-top: 288px; } 41.66667% { background-position: 0 72px; padding-top: 312px; } 45.83333% { background-position: 0 96px; padding-top: 336px; } 50% { background-position: 0 120px; padding-top: 360px; } 54.16667% { background-position: 0 144px; padding-top: 384px; } 58.33333% { background-position: 0 168px; padding-top: 408px; } 62.5% { background-position: 0 192px; padding-top: 432px; } 66.66667% { background-position: 0 216px; padding-top: 456px; } 70.83333% { background-position: 0 240px; padding-top: 480px; } 75% { background-position: 0 264px; padding-top: 504px; } 79.16667% { background-position: 0 288px; padding-top: 528px; } 83.33333% { background-position: 0 312px; padding-top: 552px; } 87.5% { background-position: 0 -240px; padding-top: 0px; } 91.66667% { background-position: 0 -216px; padding-top: 24px; } 95.83333% { background-position: 0 -192px; padding-top: 48px; }
}
@-o-keyframes column-3 { 0% { background-position: 0 -168px; padding-top: 72px; } 4.16667% { background-position: 0 -144px; padding-top: 96px; } 8.33333% { background-position: 0 -120px; padding-top: 120px; } 12.5% { background-position: 0 -96px; padding-top: 144px; } 16.66667% { background-position: 0 -72px; padding-top: 168px; } 20.83333% { background-position: 0 -48px; padding-top: 192px; } 25% { background-position: 0 -24px; padding-top: 216px; } 29.16667% { background-position: 0 0px; padding-top: 240px; } 33.33333% { background-position: 0 24px; padding-top: 264px; } 37.5% { background-position: 0 48px; padding-top: 288px; } 41.66667% { background-position: 0 72px; padding-top: 312px; } 45.83333% { background-position: 0 96px; padding-top: 336px; } 50% { background-position: 0 120px; padding-top: 360px; } 54.16667% { background-position: 0 144px; padding-top: 384px; } 58.33333% { background-position: 0 168px; padding-top: 408px; } 62.5% { background-position: 0 192px; padding-top: 432px; } 66.66667% { background-position: 0 216px; padding-top: 456px; } 70.83333% { background-position: 0 240px; padding-top: 480px; } 75% { background-position: 0 264px; padding-top: 504px; } 79.16667% { background-position: 0 288px; padding-top: 528px; } 83.33333% { background-position: 0 312px; padding-top: 552px; } 87.5% { background-position: 0 -240px; padding-top: 0px; } 91.66667% { background-position: 0 -216px; padding-top: 24px; } 95.83333% { background-position: 0 -192px; padding-top: 48px; }
}
@keyframes column-3 { 0% { background-position: 0 -168px; padding-top: 72px; } 4.16667% { background-position: 0 -144px; padding-top: 96px; } 8.33333% { background-position: 0 -120px; padding-top: 120px; } 12.5% { background-position: 0 -96px; padding-top: 144px; } 16.66667% { background-position: 0 -72px; padding-top: 168px; } 20.83333% { background-position: 0 -48px; padding-top: 192px; } 25% { background-position: 0 -24px; padding-top: 216px; } 29.16667% { background-position: 0 0px; padding-top: 240px; } 33.33333% { background-position: 0 24px; padding-top: 264px; } 37.5% { background-position: 0 48px; padding-top: 288px; } 41.66667% { background-position: 0 72px; padding-top: 312px; } 45.83333% { background-position: 0 96px; padding-top: 336px; } 50% { background-position: 0 120px; padding-top: 360px; } 54.16667% { background-position: 0 144px; padding-top: 384px; } 58.33333% { background-position: 0 168px; padding-top: 408px; } 62.5% { background-position: 0 192px; padding-top: 432px; } 66.66667% { background-position: 0 216px; padding-top: 456px; } 70.83333% { background-position: 0 240px; padding-top: 480px; } 75% { background-position: 0 264px; padding-top: 504px; } 79.16667% { background-position: 0 288px; padding-top: 528px; } 83.33333% { background-position: 0 312px; padding-top: 552px; } 87.5% { background-position: 0 -240px; padding-top: 0px; } 91.66667% { background-position: 0 -216px; padding-top: 24px; } 95.83333% { background-position: 0 -192px; padding-top: 48px; }
}
.matrix li:nth-child(4) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(4):before { display: block; width: 1em; content: "タ ソ フ た ょ コ ン バ ワ う ば こ ソ タ き タ ト こ リ た わ わ き ク";
}
.matrix li:nth-child(4):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 144px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #000000), color-stop(100%, #000000)) 0 144px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 288px, #000000 288px, #000000 576px) 0 144px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 288px, #000000 288px, #000000 576px) 0 144px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 288px, #000000 288px, #000000 576px) 0 144px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "リ"; padding-top: 432px; overflow: hidden; -webkit-animation: 1920ms column-4 infinite steps(1, start); -moz-animation: 1920ms column-4 infinite steps(1, start); -ms-animation: 1920ms column-4 infinite steps(1, start); -o-animation: 1920ms column-4 infinite steps(1, start); animation: 1920ms column-4 infinite steps(1, start);
}
@-webkit-keyframes column-4 { 0% { background-position: 0 144px; padding-top: 432px; } 4.16667% { background-position: 0 168px; padding-top: 456px; } 8.33333% { background-position: 0 192px; padding-top: 480px; } 12.5% { background-position: 0 216px; padding-top: 504px; } 16.66667% { background-position: 0 240px; padding-top: 528px; } 20.83333% { background-position: 0 264px; padding-top: 552px; } 25% { background-position: 0 -288px; padding-top: 0px; } 29.16667% { background-position: 0 -264px; padding-top: 24px; } 33.33333% { background-position: 0 -240px; padding-top: 48px; } 37.5% { background-position: 0 -216px; padding-top: 72px; } 41.66667% { background-position: 0 -192px; padding-top: 96px; } 45.83333% { background-position: 0 -168px; padding-top: 120px; } 50% { background-position: 0 -144px; padding-top: 144px; } 54.16667% { background-position: 0 -120px; padding-top: 168px; } 58.33333% { background-position: 0 -96px; padding-top: 192px; } 62.5% { background-position: 0 -72px; padding-top: 216px; } 66.66667% { background-position: 0 -48px; padding-top: 240px; } 70.83333% { background-position: 0 -24px; padding-top: 264px; } 75% { background-position: 0 0px; padding-top: 288px; } 79.16667% { background-position: 0 24px; padding-top: 312px; } 83.33333% { background-position: 0 48px; padding-top: 336px; } 87.5% { background-position: 0 72px; padding-top: 360px; } 91.66667% { background-position: 0 96px; padding-top: 384px; } 95.83333% { background-position: 0 120px; padding-top: 408px; }
}
@-moz-keyframes column-4 { 0% { background-position: 0 144px; padding-top: 432px; } 4.16667% { background-position: 0 168px; padding-top: 456px; } 8.33333% { background-position: 0 192px; padding-top: 480px; } 12.5% { background-position: 0 216px; padding-top: 504px; } 16.66667% { background-position: 0 240px; padding-top: 528px; } 20.83333% { background-position: 0 264px; padding-top: 552px; } 25% { background-position: 0 -288px; padding-top: 0px; } 29.16667% { background-position: 0 -264px; padding-top: 24px; } 33.33333% { background-position: 0 -240px; padding-top: 48px; } 37.5% { background-position: 0 -216px; padding-top: 72px; } 41.66667% { background-position: 0 -192px; padding-top: 96px; } 45.83333% { background-position: 0 -168px; padding-top: 120px; } 50% { background-position: 0 -144px; padding-top: 144px; } 54.16667% { background-position: 0 -120px; padding-top: 168px; } 58.33333% { background-position: 0 -96px; padding-top: 192px; } 62.5% { background-position: 0 -72px; padding-top: 216px; } 66.66667% { background-position: 0 -48px; padding-top: 240px; } 70.83333% { background-position: 0 -24px; padding-top: 264px; } 75% { background-position: 0 0px; padding-top: 288px; } 79.16667% { background-position: 0 24px; padding-top: 312px; } 83.33333% { background-position: 0 48px; padding-top: 336px; } 87.5% { background-position: 0 72px; padding-top: 360px; } 91.66667% { background-position: 0 96px; padding-top: 384px; } 95.83333% { background-position: 0 120px; padding-top: 408px; }
}
@-o-keyframes column-4 { 0% { background-position: 0 144px; padding-top: 432px; } 4.16667% { background-position: 0 168px; padding-top: 456px; } 8.33333% { background-position: 0 192px; padding-top: 480px; } 12.5% { background-position: 0 216px; padding-top: 504px; } 16.66667% { background-position: 0 240px; padding-top: 528px; } 20.83333% { background-position: 0 264px; padding-top: 552px; } 25% { background-position: 0 -288px; padding-top: 0px; } 29.16667% { background-position: 0 -264px; padding-top: 24px; } 33.33333% { background-position: 0 -240px; padding-top: 48px; } 37.5% { background-position: 0 -216px; padding-top: 72px; } 41.66667% { background-position: 0 -192px; padding-top: 96px; } 45.83333% { background-position: 0 -168px; padding-top: 120px; } 50% { background-position: 0 -144px; padding-top: 144px; } 54.16667% { background-position: 0 -120px; padding-top: 168px; } 58.33333% { background-position: 0 -96px; padding-top: 192px; } 62.5% { background-position: 0 -72px; padding-top: 216px; } 66.66667% { background-position: 0 -48px; padding-top: 240px; } 70.83333% { background-position: 0 -24px; padding-top: 264px; } 75% { background-position: 0 0px; padding-top: 288px; } 79.16667% { background-position: 0 24px; padding-top: 312px; } 83.33333% { background-position: 0 48px; padding-top: 336px; } 87.5% { background-position: 0 72px; padding-top: 360px; } 91.66667% { background-position: 0 96px; padding-top: 384px; } 95.83333% { background-position: 0 120px; padding-top: 408px; }
}
@keyframes column-4 { 0% { background-position: 0 144px; padding-top: 432px; } 4.16667% { background-position: 0 168px; padding-top: 456px; } 8.33333% { background-position: 0 192px; padding-top: 480px; } 12.5% { background-position: 0 216px; padding-top: 504px; } 16.66667% { background-position: 0 240px; padding-top: 528px; } 20.83333% { background-position: 0 264px; padding-top: 552px; } 25% { background-position: 0 -288px; padding-top: 0px; } 29.16667% { background-position: 0 -264px; padding-top: 24px; } 33.33333% { background-position: 0 -240px; padding-top: 48px; } 37.5% { background-position: 0 -216px; padding-top: 72px; } 41.66667% { background-position: 0 -192px; padding-top: 96px; } 45.83333% { background-position: 0 -168px; padding-top: 120px; } 50% { background-position: 0 -144px; padding-top: 144px; } 54.16667% { background-position: 0 -120px; padding-top: 168px; } 58.33333% { background-position: 0 -96px; padding-top: 192px; } 62.5% { background-position: 0 -72px; padding-top: 216px; } 66.66667% { background-position: 0 -48px; padding-top: 240px; } 70.83333% { background-position: 0 -24px; padding-top: 264px; } 75% { background-position: 0 0px; padding-top: 288px; } 79.16667% { background-position: 0 24px; padding-top: 312px; } 83.33333% { background-position: 0 48px; padding-top: 336px; } 87.5% { background-position: 0 72px; padding-top: 360px; } 91.66667% { background-position: 0 96px; padding-top: 384px; } 95.83333% { background-position: 0 120px; padding-top: 408px; }
}
.matrix li:nth-child(5) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(5):before { display: block; width: 1em; content: "た ョ タ ョ ば と ョ こ ョ マ う タ ラ シ ウ タ ば た し キ こ し ウ ょ";
}
.matrix li:nth-child(5):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 72px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(20.83333%, rgba(0, 0, 0, 0)), color-stop(20.83333%, #000000), color-stop(100%, #000000)) 0 72px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 72px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 72px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 72px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ョ"; padding-top: 192px; overflow: hidden; -webkit-animation: 1920ms column-5 infinite steps(1, start); -moz-animation: 1920ms column-5 infinite steps(1, start); -ms-animation: 1920ms column-5 infinite steps(1, start); -o-animation: 1920ms column-5 infinite steps(1, start); animation: 1920ms column-5 infinite steps(1, start);
}
@-webkit-keyframes column-5 { 0% { background-position: 0 72px; padding-top: 192px; } 4.16667% { background-position: 0 96px; padding-top: 216px; } 8.33333% { background-position: 0 120px; padding-top: 240px; } 12.5% { background-position: 0 144px; padding-top: 264px; } 16.66667% { background-position: 0 168px; padding-top: 288px; } 20.83333% { background-position: 0 192px; padding-top: 312px; } 25% { background-position: 0 216px; padding-top: 336px; } 29.16667% { background-position: 0 240px; padding-top: 360px; } 33.33333% { background-position: 0 264px; padding-top: 384px; } 37.5% { background-position: 0 288px; padding-top: 408px; } 41.66667% { background-position: 0 312px; padding-top: 432px; } 45.83333% { background-position: 0 336px; padding-top: 456px; } 50% { background-position: 0 360px; padding-top: 480px; } 54.16667% { background-position: 0 384px; padding-top: 504px; } 58.33333% { background-position: 0 408px; padding-top: 528px; } 62.5% { background-position: 0 432px; padding-top: 552px; } 66.66667% { background-position: 0 -120px; padding-top: 0px; } 70.83333% { background-position: 0 -96px; padding-top: 24px; } 75% { background-position: 0 -72px; padding-top: 48px; } 79.16667% { background-position: 0 -48px; padding-top: 72px; } 83.33333% { background-position: 0 -24px; padding-top: 96px; } 87.5% { background-position: 0 0px; padding-top: 120px; } 91.66667% { background-position: 0 24px; padding-top: 144px; } 95.83333% { background-position: 0 48px; padding-top: 168px; }
}
@-moz-keyframes column-5 { 0% { background-position: 0 72px; padding-top: 192px; } 4.16667% { background-position: 0 96px; padding-top: 216px; } 8.33333% { background-position: 0 120px; padding-top: 240px; } 12.5% { background-position: 0 144px; padding-top: 264px; } 16.66667% { background-position: 0 168px; padding-top: 288px; } 20.83333% { background-position: 0 192px; padding-top: 312px; } 25% { background-position: 0 216px; padding-top: 336px; } 29.16667% { background-position: 0 240px; padding-top: 360px; } 33.33333% { background-position: 0 264px; padding-top: 384px; } 37.5% { background-position: 0 288px; padding-top: 408px; } 41.66667% { background-position: 0 312px; padding-top: 432px; } 45.83333% { background-position: 0 336px; padding-top: 456px; } 50% { background-position: 0 360px; padding-top: 480px; } 54.16667% { background-position: 0 384px; padding-top: 504px; } 58.33333% { background-position: 0 408px; padding-top: 528px; } 62.5% { background-position: 0 432px; padding-top: 552px; } 66.66667% { background-position: 0 -120px; padding-top: 0px; } 70.83333% { background-position: 0 -96px; padding-top: 24px; } 75% { background-position: 0 -72px; padding-top: 48px; } 79.16667% { background-position: 0 -48px; padding-top: 72px; } 83.33333% { background-position: 0 -24px; padding-top: 96px; } 87.5% { background-position: 0 0px; padding-top: 120px; } 91.66667% { background-position: 0 24px; padding-top: 144px; } 95.83333% { background-position: 0 48px; padding-top: 168px; }
}
@-o-keyframes column-5 { 0% { background-position: 0 72px; padding-top: 192px; } 4.16667% { background-position: 0 96px; padding-top: 216px; } 8.33333% { background-position: 0 120px; padding-top: 240px; } 12.5% { background-position: 0 144px; padding-top: 264px; } 16.66667% { background-position: 0 168px; padding-top: 288px; } 20.83333% { background-position: 0 192px; padding-top: 312px; } 25% { background-position: 0 216px; padding-top: 336px; } 29.16667% { background-position: 0 240px; padding-top: 360px; } 33.33333% { background-position: 0 264px; padding-top: 384px; } 37.5% { background-position: 0 288px; padding-top: 408px; } 41.66667% { background-position: 0 312px; padding-top: 432px; } 45.83333% { background-position: 0 336px; padding-top: 456px; } 50% { background-position: 0 360px; padding-top: 480px; } 54.16667% { background-position: 0 384px; padding-top: 504px; } 58.33333% { background-position: 0 408px; padding-top: 528px; } 62.5% { background-position: 0 432px; padding-top: 552px; } 66.66667% { background-position: 0 -120px; padding-top: 0px; } 70.83333% { background-position: 0 -96px; padding-top: 24px; } 75% { background-position: 0 -72px; padding-top: 48px; } 79.16667% { background-position: 0 -48px; padding-top: 72px; } 83.33333% { background-position: 0 -24px; padding-top: 96px; } 87.5% { background-position: 0 0px; padding-top: 120px; } 91.66667% { background-position: 0 24px; padding-top: 144px; } 95.83333% { background-position: 0 48px; padding-top: 168px; }
}
@keyframes column-5 { 0% { background-position: 0 72px; padding-top: 192px; } 4.16667% { background-position: 0 96px; padding-top: 216px; } 8.33333% { background-position: 0 120px; padding-top: 240px; } 12.5% { background-position: 0 144px; padding-top: 264px; } 16.66667% { background-position: 0 168px; padding-top: 288px; } 20.83333% { background-position: 0 192px; padding-top: 312px; } 25% { background-position: 0 216px; padding-top: 336px; } 29.16667% { background-position: 0 240px; padding-top: 360px; } 33.33333% { background-position: 0 264px; padding-top: 384px; } 37.5% { background-position: 0 288px; padding-top: 408px; } 41.66667% { background-position: 0 312px; padding-top: 432px; } 45.83333% { background-position: 0 336px; padding-top: 456px; } 50% { background-position: 0 360px; padding-top: 480px; } 54.16667% { background-position: 0 384px; padding-top: 504px; } 58.33333% { background-position: 0 408px; padding-top: 528px; } 62.5% { background-position: 0 432px; padding-top: 552px; } 66.66667% { background-position: 0 -120px; padding-top: 0px; } 70.83333% { background-position: 0 -96px; padding-top: 24px; } 75% { background-position: 0 -72px; padding-top: 48px; } 79.16667% { background-position: 0 -48px; padding-top: 72px; } 83.33333% { background-position: 0 -24px; padding-top: 96px; } 87.5% { background-position: 0 0px; padding-top: 120px; } 91.66667% { background-position: 0 24px; padding-top: 144px; } 95.83333% { background-position: 0 48px; padding-top: 168px; }
}
.matrix li:nth-child(6) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(6):before { display: block; width: 1em; content: "ク ょ バ コ し た た ラ わ ョ ョ う ょ ソ キ ょ ん マ バ ト こ ウ し こ";
}
.matrix li:nth-child(6):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iODcuNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4Ny41JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 -48px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(87.5%, rgba(0, 0, 0, 0)), color-stop(87.5%, #000000), color-stop(100%, #000000)) 0 -48px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -48px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -48px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -48px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ト"; padding-top: 456px; overflow: hidden; -webkit-animation: 1920ms column-6 infinite steps(1, start); -moz-animation: 1920ms column-6 infinite steps(1, start); -ms-animation: 1920ms column-6 infinite steps(1, start); -o-animation: 1920ms column-6 infinite steps(1, start); animation: 1920ms column-6 infinite steps(1, start);
}
@-webkit-keyframes column-6 { 0% { background-position: 0 -48px; padding-top: 456px; } 4.16667% { background-position: 0 -24px; padding-top: 480px; } 8.33333% { background-position: 0 0px; padding-top: 504px; } 12.5% { background-position: 0 24px; padding-top: 528px; } 16.66667% { background-position: 0 48px; padding-top: 552px; } 20.83333% { background-position: 0 -504px; padding-top: 0px; } 25% { background-position: 0 -480px; padding-top: 24px; } 29.16667% { background-position: 0 -456px; padding-top: 48px; } 33.33333% { background-position: 0 -432px; padding-top: 72px; } 37.5% { background-position: 0 -408px; padding-top: 96px; } 41.66667% { background-position: 0 -384px; padding-top: 120px; } 45.83333% { background-position: 0 -360px; padding-top: 144px; } 50% { background-position: 0 -336px; padding-top: 168px; } 54.16667% { background-position: 0 -312px; padding-top: 192px; } 58.33333% { background-position: 0 -288px; padding-top: 216px; } 62.5% { background-position: 0 -264px; padding-top: 240px; } 66.66667% { background-position: 0 -240px; padding-top: 264px; } 70.83333% { background-position: 0 -216px; padding-top: 288px; } 75% { background-position: 0 -192px; padding-top: 312px; } 79.16667% { background-position: 0 -168px; padding-top: 336px; } 83.33333% { background-position: 0 -144px; padding-top: 360px; } 87.5% { background-position: 0 -120px; padding-top: 384px; } 91.66667% { background-position: 0 -96px; padding-top: 408px; } 95.83333% { background-position: 0 -72px; padding-top: 432px; }
}
@-moz-keyframes column-6 { 0% { background-position: 0 -48px; padding-top: 456px; } 4.16667% { background-position: 0 -24px; padding-top: 480px; } 8.33333% { background-position: 0 0px; padding-top: 504px; } 12.5% { background-position: 0 24px; padding-top: 528px; } 16.66667% { background-position: 0 48px; padding-top: 552px; } 20.83333% { background-position: 0 -504px; padding-top: 0px; } 25% { background-position: 0 -480px; padding-top: 24px; } 29.16667% { background-position: 0 -456px; padding-top: 48px; } 33.33333% { background-position: 0 -432px; padding-top: 72px; } 37.5% { background-position: 0 -408px; padding-top: 96px; } 41.66667% { background-position: 0 -384px; padding-top: 120px; } 45.83333% { background-position: 0 -360px; padding-top: 144px; } 50% { background-position: 0 -336px; padding-top: 168px; } 54.16667% { background-position: 0 -312px; padding-top: 192px; } 58.33333% { background-position: 0 -288px; padding-top: 216px; } 62.5% { background-position: 0 -264px; padding-top: 240px; } 66.66667% { background-position: 0 -240px; padding-top: 264px; } 70.83333% { background-position: 0 -216px; padding-top: 288px; } 75% { background-position: 0 -192px; padding-top: 312px; } 79.16667% { background-position: 0 -168px; padding-top: 336px; } 83.33333% { background-position: 0 -144px; padding-top: 360px; } 87.5% { background-position: 0 -120px; padding-top: 384px; } 91.66667% { background-position: 0 -96px; padding-top: 408px; } 95.83333% { background-position: 0 -72px; padding-top: 432px; }
}
@-o-keyframes column-6 { 0% { background-position: 0 -48px; padding-top: 456px; } 4.16667% { background-position: 0 -24px; padding-top: 480px; } 8.33333% { background-position: 0 0px; padding-top: 504px; } 12.5% { background-position: 0 24px; padding-top: 528px; } 16.66667% { background-position: 0 48px; padding-top: 552px; } 20.83333% { background-position: 0 -504px; padding-top: 0px; } 25% { background-position: 0 -480px; padding-top: 24px; } 29.16667% { background-position: 0 -456px; padding-top: 48px; } 33.33333% { background-position: 0 -432px; padding-top: 72px; } 37.5% { background-position: 0 -408px; padding-top: 96px; } 41.66667% { background-position: 0 -384px; padding-top: 120px; } 45.83333% { background-position: 0 -360px; padding-top: 144px; } 50% { background-position: 0 -336px; padding-top: 168px; } 54.16667% { background-position: 0 -312px; padding-top: 192px; } 58.33333% { background-position: 0 -288px; padding-top: 216px; } 62.5% { background-position: 0 -264px; padding-top: 240px; } 66.66667% { background-position: 0 -240px; padding-top: 264px; } 70.83333% { background-position: 0 -216px; padding-top: 288px; } 75% { background-position: 0 -192px; padding-top: 312px; } 79.16667% { background-position: 0 -168px; padding-top: 336px; } 83.33333% { background-position: 0 -144px; padding-top: 360px; } 87.5% { background-position: 0 -120px; padding-top: 384px; } 91.66667% { background-position: 0 -96px; padding-top: 408px; } 95.83333% { background-position: 0 -72px; padding-top: 432px; }
}
@keyframes column-6 { 0% { background-position: 0 -48px; padding-top: 456px; } 4.16667% { background-position: 0 -24px; padding-top: 480px; } 8.33333% { background-position: 0 0px; padding-top: 504px; } 12.5% { background-position: 0 24px; padding-top: 528px; } 16.66667% { background-position: 0 48px; padding-top: 552px; } 20.83333% { background-position: 0 -504px; padding-top: 0px; } 25% { background-position: 0 -480px; padding-top: 24px; } 29.16667% { background-position: 0 -456px; padding-top: 48px; } 33.33333% { background-position: 0 -432px; padding-top: 72px; } 37.5% { background-position: 0 -408px; padding-top: 96px; } 41.66667% { background-position: 0 -384px; padding-top: 120px; } 45.83333% { background-position: 0 -360px; padding-top: 144px; } 50% { background-position: 0 -336px; padding-top: 168px; } 54.16667% { background-position: 0 -312px; padding-top: 192px; } 58.33333% { background-position: 0 -288px; padding-top: 216px; } 62.5% { background-position: 0 -264px; padding-top: 240px; } 66.66667% { background-position: 0 -240px; padding-top: 264px; } 70.83333% { background-position: 0 -216px; padding-top: 288px; } 75% { background-position: 0 -192px; padding-top: 312px; } 79.16667% { background-position: 0 -168px; padding-top: 336px; } 83.33333% { background-position: 0 -144px; padding-top: 360px; } 87.5% { background-position: 0 -120px; padding-top: 384px; } 91.66667% { background-position: 0 -96px; padding-top: 408px; } 95.83333% { background-position: 0 -72px; padding-top: 432px; }
}
.matrix li:nth-child(7) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(7):before { display: block; width: 1em; content: "ワ た わ マ ウ キ ン リ ば ウ タ き リ ワ ド わ コ マ ば フ ト コ タ シ";
}
.matrix li:nth-child(7):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 0px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(66.66667%, rgba(0, 0, 0, 0)), color-stop(66.66667%, #000000), color-stop(100%, #000000)) 0 0px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 384px, #000000 384px, #000000 576px) 0 0px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 384px, #000000 384px, #000000 576px) 0 0px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 384px, #000000 384px, #000000 576px) 0 0px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "コ"; padding-top: 384px; overflow: hidden; -webkit-animation: 1920ms column-7 infinite steps(1, start); -moz-animation: 1920ms column-7 infinite steps(1, start); -ms-animation: 1920ms column-7 infinite steps(1, start); -o-animation: 1920ms column-7 infinite steps(1, start); animation: 1920ms column-7 infinite steps(1, start);
}
@-webkit-keyframes column-7 { 0% { background-position: 0 0px; padding-top: 384px; } 4.16667% { background-position: 0 24px; padding-top: 408px; } 8.33333% { background-position: 0 48px; padding-top: 432px; } 12.5% { background-position: 0 72px; padding-top: 456px; } 16.66667% { background-position: 0 96px; padding-top: 480px; } 20.83333% { background-position: 0 120px; padding-top: 504px; } 25% { background-position: 0 144px; padding-top: 528px; } 29.16667% { background-position: 0 168px; padding-top: 552px; } 33.33333% { background-position: 0 -384px; padding-top: 0px; } 37.5% { background-position: 0 -360px; padding-top: 24px; } 41.66667% { background-position: 0 -336px; padding-top: 48px; } 45.83333% { background-position: 0 -312px; padding-top: 72px; } 50% { background-position: 0 -288px; padding-top: 96px; } 54.16667% { background-position: 0 -264px; padding-top: 120px; } 58.33333% { background-position: 0 -240px; padding-top: 144px; } 62.5% { background-position: 0 -216px; padding-top: 168px; } 66.66667% { background-position: 0 -192px; padding-top: 192px; } 70.83333% { background-position: 0 -168px; padding-top: 216px; } 75% { background-position: 0 -144px; padding-top: 240px; } 79.16667% { background-position: 0 -120px; padding-top: 264px; } 83.33333% { background-position: 0 -96px; padding-top: 288px; } 87.5% { background-position: 0 -72px; padding-top: 312px; } 91.66667% { background-position: 0 -48px; padding-top: 336px; } 95.83333% { background-position: 0 -24px; padding-top: 360px; }
}
@-moz-keyframes column-7 { 0% { background-position: 0 0px; padding-top: 384px; } 4.16667% { background-position: 0 24px; padding-top: 408px; } 8.33333% { background-position: 0 48px; padding-top: 432px; } 12.5% { background-position: 0 72px; padding-top: 456px; } 16.66667% { background-position: 0 96px; padding-top: 480px; } 20.83333% { background-position: 0 120px; padding-top: 504px; } 25% { background-position: 0 144px; padding-top: 528px; } 29.16667% { background-position: 0 168px; padding-top: 552px; } 33.33333% { background-position: 0 -384px; padding-top: 0px; } 37.5% { background-position: 0 -360px; padding-top: 24px; } 41.66667% { background-position: 0 -336px; padding-top: 48px; } 45.83333% { background-position: 0 -312px; padding-top: 72px; } 50% { background-position: 0 -288px; padding-top: 96px; } 54.16667% { background-position: 0 -264px; padding-top: 120px; } 58.33333% { background-position: 0 -240px; padding-top: 144px; } 62.5% { background-position: 0 -216px; padding-top: 168px; } 66.66667% { background-position: 0 -192px; padding-top: 192px; } 70.83333% { background-position: 0 -168px; padding-top: 216px; } 75% { background-position: 0 -144px; padding-top: 240px; } 79.16667% { background-position: 0 -120px; padding-top: 264px; } 83.33333% { background-position: 0 -96px; padding-top: 288px; } 87.5% { background-position: 0 -72px; padding-top: 312px; } 91.66667% { background-position: 0 -48px; padding-top: 336px; } 95.83333% { background-position: 0 -24px; padding-top: 360px; }
}
@-o-keyframes column-7 { 0% { background-position: 0 0px; padding-top: 384px; } 4.16667% { background-position: 0 24px; padding-top: 408px; } 8.33333% { background-position: 0 48px; padding-top: 432px; } 12.5% { background-position: 0 72px; padding-top: 456px; } 16.66667% { background-position: 0 96px; padding-top: 480px; } 20.83333% { background-position: 0 120px; padding-top: 504px; } 25% { background-position: 0 144px; padding-top: 528px; } 29.16667% { background-position: 0 168px; padding-top: 552px; } 33.33333% { background-position: 0 -384px; padding-top: 0px; } 37.5% { background-position: 0 -360px; padding-top: 24px; } 41.66667% { background-position: 0 -336px; padding-top: 48px; } 45.83333% { background-position: 0 -312px; padding-top: 72px; } 50% { background-position: 0 -288px; padding-top: 96px; } 54.16667% { background-position: 0 -264px; padding-top: 120px; } 58.33333% { background-position: 0 -240px; padding-top: 144px; } 62.5% { background-position: 0 -216px; padding-top: 168px; } 66.66667% { background-position: 0 -192px; padding-top: 192px; } 70.83333% { background-position: 0 -168px; padding-top: 216px; } 75% { background-position: 0 -144px; padding-top: 240px; } 79.16667% { background-position: 0 -120px; padding-top: 264px; } 83.33333% { background-position: 0 -96px; padding-top: 288px; } 87.5% { background-position: 0 -72px; padding-top: 312px; } 91.66667% { background-position: 0 -48px; padding-top: 336px; } 95.83333% { background-position: 0 -24px; padding-top: 360px; }
}
@keyframes column-7 { 0% { background-position: 0 0px; padding-top: 384px; } 4.16667% { background-position: 0 24px; padding-top: 408px; } 8.33333% { background-position: 0 48px; padding-top: 432px; } 12.5% { background-position: 0 72px; padding-top: 456px; } 16.66667% { background-position: 0 96px; padding-top: 480px; } 20.83333% { background-position: 0 120px; padding-top: 504px; } 25% { background-position: 0 144px; padding-top: 528px; } 29.16667% { background-position: 0 168px; padding-top: 552px; } 33.33333% { background-position: 0 -384px; padding-top: 0px; } 37.5% { background-position: 0 -360px; padding-top: 24px; } 41.66667% { background-position: 0 -336px; padding-top: 48px; } 45.83333% { background-position: 0 -312px; padding-top: 72px; } 50% { background-position: 0 -288px; padding-top: 96px; } 54.16667% { background-position: 0 -264px; padding-top: 120px; } 58.33333% { background-position: 0 -240px; padding-top: 144px; } 62.5% { background-position: 0 -216px; padding-top: 168px; } 66.66667% { background-position: 0 -192px; padding-top: 192px; } 70.83333% { background-position: 0 -168px; padding-top: 216px; } 75% { background-position: 0 -144px; padding-top: 240px; } 79.16667% { background-position: 0 -120px; padding-top: 264px; } 83.33333% { background-position: 0 -96px; padding-top: 288px; } 87.5% { background-position: 0 -72px; padding-top: 312px; } 91.66667% { background-position: 0 -48px; padding-top: 336px; } 95.83333% { background-position: 0 -24px; padding-top: 360px; }
}
.matrix li:nth-child(8) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(8):before { display: block; width: 1em; content: "マ ン き タ タ ン リ ド ラ ク タ う ソ と バ ソ ば ウ ン と フ ド キ タ";
}
.matrix li:nth-child(8):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 72px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(25%, #000000), color-stop(100%, #000000)) 0 72px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 72px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 72px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 72px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ク"; padding-top: 216px; overflow: hidden; -webkit-animation: 1920ms column-8 infinite steps(1, start); -moz-animation: 1920ms column-8 infinite steps(1, start); -ms-animation: 1920ms column-8 infinite steps(1, start); -o-animation: 1920ms column-8 infinite steps(1, start); animation: 1920ms column-8 infinite steps(1, start);
}
@-webkit-keyframes column-8 { 0% { background-position: 0 72px; padding-top: 216px; } 4.16667% { background-position: 0 96px; padding-top: 240px; } 8.33333% { background-position: 0 120px; padding-top: 264px; } 12.5% { background-position: 0 144px; padding-top: 288px; } 16.66667% { background-position: 0 168px; padding-top: 312px; } 20.83333% { background-position: 0 192px; padding-top: 336px; } 25% { background-position: 0 216px; padding-top: 360px; } 29.16667% { background-position: 0 240px; padding-top: 384px; } 33.33333% { background-position: 0 264px; padding-top: 408px; } 37.5% { background-position: 0 288px; padding-top: 432px; } 41.66667% { background-position: 0 312px; padding-top: 456px; } 45.83333% { background-position: 0 336px; padding-top: 480px; } 50% { background-position: 0 360px; padding-top: 504px; } 54.16667% { background-position: 0 384px; padding-top: 528px; } 58.33333% { background-position: 0 408px; padding-top: 552px; } 62.5% { background-position: 0 -144px; padding-top: 0px; } 66.66667% { background-position: 0 -120px; padding-top: 24px; } 70.83333% { background-position: 0 -96px; padding-top: 48px; } 75% { background-position: 0 -72px; padding-top: 72px; } 79.16667% { background-position: 0 -48px; padding-top: 96px; } 83.33333% { background-position: 0 -24px; padding-top: 120px; } 87.5% { background-position: 0 0px; padding-top: 144px; } 91.66667% { background-position: 0 24px; padding-top: 168px; } 95.83333% { background-position: 0 48px; padding-top: 192px; }
}
@-moz-keyframes column-8 { 0% { background-position: 0 72px; padding-top: 216px; } 4.16667% { background-position: 0 96px; padding-top: 240px; } 8.33333% { background-position: 0 120px; padding-top: 264px; } 12.5% { background-position: 0 144px; padding-top: 288px; } 16.66667% { background-position: 0 168px; padding-top: 312px; } 20.83333% { background-position: 0 192px; padding-top: 336px; } 25% { background-position: 0 216px; padding-top: 360px; } 29.16667% { background-position: 0 240px; padding-top: 384px; } 33.33333% { background-position: 0 264px; padding-top: 408px; } 37.5% { background-position: 0 288px; padding-top: 432px; } 41.66667% { background-position: 0 312px; padding-top: 456px; } 45.83333% { background-position: 0 336px; padding-top: 480px; } 50% { background-position: 0 360px; padding-top: 504px; } 54.16667% { background-position: 0 384px; padding-top: 528px; } 58.33333% { background-position: 0 408px; padding-top: 552px; } 62.5% { background-position: 0 -144px; padding-top: 0px; } 66.66667% { background-position: 0 -120px; padding-top: 24px; } 70.83333% { background-position: 0 -96px; padding-top: 48px; } 75% { background-position: 0 -72px; padding-top: 72px; } 79.16667% { background-position: 0 -48px; padding-top: 96px; } 83.33333% { background-position: 0 -24px; padding-top: 120px; } 87.5% { background-position: 0 0px; padding-top: 144px; } 91.66667% { background-position: 0 24px; padding-top: 168px; } 95.83333% { background-position: 0 48px; padding-top: 192px; }
}
@-o-keyframes column-8 { 0% { background-position: 0 72px; padding-top: 216px; } 4.16667% { background-position: 0 96px; padding-top: 240px; } 8.33333% { background-position: 0 120px; padding-top: 264px; } 12.5% { background-position: 0 144px; padding-top: 288px; } 16.66667% { background-position: 0 168px; padding-top: 312px; } 20.83333% { background-position: 0 192px; padding-top: 336px; } 25% { background-position: 0 216px; padding-top: 360px; } 29.16667% { background-position: 0 240px; padding-top: 384px; } 33.33333% { background-position: 0 264px; padding-top: 408px; } 37.5% { background-position: 0 288px; padding-top: 432px; } 41.66667% { background-position: 0 312px; padding-top: 456px; } 45.83333% { background-position: 0 336px; padding-top: 480px; } 50% { background-position: 0 360px; padding-top: 504px; } 54.16667% { background-position: 0 384px; padding-top: 528px; } 58.33333% { background-position: 0 408px; padding-top: 552px; } 62.5% { background-position: 0 -144px; padding-top: 0px; } 66.66667% { background-position: 0 -120px; padding-top: 24px; } 70.83333% { background-position: 0 -96px; padding-top: 48px; } 75% { background-position: 0 -72px; padding-top: 72px; } 79.16667% { background-position: 0 -48px; padding-top: 96px; } 83.33333% { background-position: 0 -24px; padding-top: 120px; } 87.5% { background-position: 0 0px; padding-top: 144px; } 91.66667% { background-position: 0 24px; padding-top: 168px; } 95.83333% { background-position: 0 48px; padding-top: 192px; }
}
@keyframes column-8 { 0% { background-position: 0 72px; padding-top: 216px; } 4.16667% { background-position: 0 96px; padding-top: 240px; } 8.33333% { background-position: 0 120px; padding-top: 264px; } 12.5% { background-position: 0 144px; padding-top: 288px; } 16.66667% { background-position: 0 168px; padding-top: 312px; } 20.83333% { background-position: 0 192px; padding-top: 336px; } 25% { background-position: 0 216px; padding-top: 360px; } 29.16667% { background-position: 0 240px; padding-top: 384px; } 33.33333% { background-position: 0 264px; padding-top: 408px; } 37.5% { background-position: 0 288px; padding-top: 432px; } 41.66667% { background-position: 0 312px; padding-top: 456px; } 45.83333% { background-position: 0 336px; padding-top: 480px; } 50% { background-position: 0 360px; padding-top: 504px; } 54.16667% { background-position: 0 384px; padding-top: 528px; } 58.33333% { background-position: 0 408px; padding-top: 552px; } 62.5% { background-position: 0 -144px; padding-top: 0px; } 66.66667% { background-position: 0 -120px; padding-top: 24px; } 70.83333% { background-position: 0 -96px; padding-top: 48px; } 75% { background-position: 0 -72px; padding-top: 72px; } 79.16667% { background-position: 0 -48px; padding-top: 96px; } 83.33333% { background-position: 0 -24px; padding-top: 120px; } 87.5% { background-position: 0 0px; padding-top: 144px; } 91.66667% { background-position: 0 24px; padding-top: 168px; } 95.83333% { background-position: 0 48px; padding-top: 192px; }
}
.matrix li:nth-child(9) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(9):before { display: block; width: 1em; content: "ド ト ょ タ ン タ ん た わ ば マ わ ょ ョ リ ン ン ウ う キ マ ド ょ ョ";
}
.matrix li:nth-child(9):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 120px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(45.83333%, rgba(0, 0, 0, 0)), color-stop(45.83333%, #000000), color-stop(100%, #000000)) 0 120px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 120px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 120px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 120px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ン"; padding-top: 384px; overflow: hidden; -webkit-animation: 1920ms column-9 infinite steps(1, start); -moz-animation: 1920ms column-9 infinite steps(1, start); -ms-animation: 1920ms column-9 infinite steps(1, start); -o-animation: 1920ms column-9 infinite steps(1, start); animation: 1920ms column-9 infinite steps(1, start);
}
@-webkit-keyframes column-9 { 0% { background-position: 0 120px; padding-top: 384px; } 4.16667% { background-position: 0 144px; padding-top: 408px; } 8.33333% { background-position: 0 168px; padding-top: 432px; } 12.5% { background-position: 0 192px; padding-top: 456px; } 16.66667% { background-position: 0 216px; padding-top: 480px; } 20.83333% { background-position: 0 240px; padding-top: 504px; } 25% { background-position: 0 264px; padding-top: 528px; } 29.16667% { background-position: 0 288px; padding-top: 552px; } 33.33333% { background-position: 0 -264px; padding-top: 0px; } 37.5% { background-position: 0 -240px; padding-top: 24px; } 41.66667% { background-position: 0 -216px; padding-top: 48px; } 45.83333% { background-position: 0 -192px; padding-top: 72px; } 50% { background-position: 0 -168px; padding-top: 96px; } 54.16667% { background-position: 0 -144px; padding-top: 120px; } 58.33333% { background-position: 0 -120px; padding-top: 144px; } 62.5% { background-position: 0 -96px; padding-top: 168px; } 66.66667% { background-position: 0 -72px; padding-top: 192px; } 70.83333% { background-position: 0 -48px; padding-top: 216px; } 75% { background-position: 0 -24px; padding-top: 240px; } 79.16667% { background-position: 0 0px; padding-top: 264px; } 83.33333% { background-position: 0 24px; padding-top: 288px; } 87.5% { background-position: 0 48px; padding-top: 312px; } 91.66667% { background-position: 0 72px; padding-top: 336px; } 95.83333% { background-position: 0 96px; padding-top: 360px; }
}
@-moz-keyframes column-9 { 0% { background-position: 0 120px; padding-top: 384px; } 4.16667% { background-position: 0 144px; padding-top: 408px; } 8.33333% { background-position: 0 168px; padding-top: 432px; } 12.5% { background-position: 0 192px; padding-top: 456px; } 16.66667% { background-position: 0 216px; padding-top: 480px; } 20.83333% { background-position: 0 240px; padding-top: 504px; } 25% { background-position: 0 264px; padding-top: 528px; } 29.16667% { background-position: 0 288px; padding-top: 552px; } 33.33333% { background-position: 0 -264px; padding-top: 0px; } 37.5% { background-position: 0 -240px; padding-top: 24px; } 41.66667% { background-position: 0 -216px; padding-top: 48px; } 45.83333% { background-position: 0 -192px; padding-top: 72px; } 50% { background-position: 0 -168px; padding-top: 96px; } 54.16667% { background-position: 0 -144px; padding-top: 120px; } 58.33333% { background-position: 0 -120px; padding-top: 144px; } 62.5% { background-position: 0 -96px; padding-top: 168px; } 66.66667% { background-position: 0 -72px; padding-top: 192px; } 70.83333% { background-position: 0 -48px; padding-top: 216px; } 75% { background-position: 0 -24px; padding-top: 240px; } 79.16667% { background-position: 0 0px; padding-top: 264px; } 83.33333% { background-position: 0 24px; padding-top: 288px; } 87.5% { background-position: 0 48px; padding-top: 312px; } 91.66667% { background-position: 0 72px; padding-top: 336px; } 95.83333% { background-position: 0 96px; padding-top: 360px; }
}
@-o-keyframes column-9 { 0% { background-position: 0 120px; padding-top: 384px; } 4.16667% { background-position: 0 144px; padding-top: 408px; } 8.33333% { background-position: 0 168px; padding-top: 432px; } 12.5% { background-position: 0 192px; padding-top: 456px; } 16.66667% { background-position: 0 216px; padding-top: 480px; } 20.83333% { background-position: 0 240px; padding-top: 504px; } 25% { background-position: 0 264px; padding-top: 528px; } 29.16667% { background-position: 0 288px; padding-top: 552px; } 33.33333% { background-position: 0 -264px; padding-top: 0px; } 37.5% { background-position: 0 -240px; padding-top: 24px; } 41.66667% { background-position: 0 -216px; padding-top: 48px; } 45.83333% { background-position: 0 -192px; padding-top: 72px; } 50% { background-position: 0 -168px; padding-top: 96px; } 54.16667% { background-position: 0 -144px; padding-top: 120px; } 58.33333% { background-position: 0 -120px; padding-top: 144px; } 62.5% { background-position: 0 -96px; padding-top: 168px; } 66.66667% { background-position: 0 -72px; padding-top: 192px; } 70.83333% { background-position: 0 -48px; padding-top: 216px; } 75% { background-position: 0 -24px; padding-top: 240px; } 79.16667% { background-position: 0 0px; padding-top: 264px; } 83.33333% { background-position: 0 24px; padding-top: 288px; } 87.5% { background-position: 0 48px; padding-top: 312px; } 91.66667% { background-position: 0 72px; padding-top: 336px; } 95.83333% { background-position: 0 96px; padding-top: 360px; }
}
@keyframes column-9 { 0% { background-position: 0 120px; padding-top: 384px; } 4.16667% { background-position: 0 144px; padding-top: 408px; } 8.33333% { background-position: 0 168px; padding-top: 432px; } 12.5% { background-position: 0 192px; padding-top: 456px; } 16.66667% { background-position: 0 216px; padding-top: 480px; } 20.83333% { background-position: 0 240px; padding-top: 504px; } 25% { background-position: 0 264px; padding-top: 528px; } 29.16667% { background-position: 0 288px; padding-top: 552px; } 33.33333% { background-position: 0 -264px; padding-top: 0px; } 37.5% { background-position: 0 -240px; padding-top: 24px; } 41.66667% { background-position: 0 -216px; padding-top: 48px; } 45.83333% { background-position: 0 -192px; padding-top: 72px; } 50% { background-position: 0 -168px; padding-top: 96px; } 54.16667% { background-position: 0 -144px; padding-top: 120px; } 58.33333% { background-position: 0 -120px; padding-top: 144px; } 62.5% { background-position: 0 -96px; padding-top: 168px; } 66.66667% { background-position: 0 -72px; padding-top: 192px; } 70.83333% { background-position: 0 -48px; padding-top: 216px; } 75% { background-position: 0 -24px; padding-top: 240px; } 79.16667% { background-position: 0 0px; padding-top: 264px; } 83.33333% { background-position: 0 24px; padding-top: 288px; } 87.5% { background-position: 0 48px; padding-top: 312px; } 91.66667% { background-position: 0 72px; padding-top: 336px; } 95.83333% { background-position: 0 96px; padding-top: 360px; }
}
.matrix li:nth-child(10) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(10):before { display: block; width: 1em; content: "ん し タ ク ラ ワ ソ ょ キ フ こ リ ワ ょ ょ わ ク ょ こ ラ ソ ラ こ わ";
}
.matrix li:nth-child(10):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 72px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(75%, rgba(0, 0, 0, 0)), color-stop(75%, #000000), color-stop(100%, #000000)) 0 72px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 432px, #000000 432px, #000000 576px) 0 72px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 432px, #000000 432px, #000000 576px) 0 72px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 432px, #000000 432px, #000000 576px) 0 72px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ラ"; padding-top: 504px; overflow: hidden; -webkit-animation: 1920ms column-10 infinite steps(1, start); -moz-animation: 1920ms column-10 infinite steps(1, start); -ms-animation: 1920ms column-10 infinite steps(1, start); -o-animation: 1920ms column-10 infinite steps(1, start); animation: 1920ms column-10 infinite steps(1, start);
}
@-webkit-keyframes column-10 { 0% { background-position: 0 72px; padding-top: 504px; } 4.16667% { background-position: 0 96px; padding-top: 528px; } 8.33333% { background-position: 0 120px; padding-top: 552px; } 12.5% { background-position: 0 -432px; padding-top: 0px; } 16.66667% { background-position: 0 -408px; padding-top: 24px; } 20.83333% { background-position: 0 -384px; padding-top: 48px; } 25% { background-position: 0 -360px; padding-top: 72px; } 29.16667% { background-position: 0 -336px; padding-top: 96px; } 33.33333% { background-position: 0 -312px; padding-top: 120px; } 37.5% { background-position: 0 -288px; padding-top: 144px; } 41.66667% { background-position: 0 -264px; padding-top: 168px; } 45.83333% { background-position: 0 -240px; padding-top: 192px; } 50% { background-position: 0 -216px; padding-top: 216px; } 54.16667% { background-position: 0 -192px; padding-top: 240px; } 58.33333% { background-position: 0 -168px; padding-top: 264px; } 62.5% { background-position: 0 -144px; padding-top: 288px; } 66.66667% { background-position: 0 -120px; padding-top: 312px; } 70.83333% { background-position: 0 -96px; padding-top: 336px; } 75% { background-position: 0 -72px; padding-top: 360px; } 79.16667% { background-position: 0 -48px; padding-top: 384px; } 83.33333% { background-position: 0 -24px; padding-top: 408px; } 87.5% { background-position: 0 0px; padding-top: 432px; } 91.66667% { background-position: 0 24px; padding-top: 456px; } 95.83333% { background-position: 0 48px; padding-top: 480px; }
}
@-moz-keyframes column-10 { 0% { background-position: 0 72px; padding-top: 504px; } 4.16667% { background-position: 0 96px; padding-top: 528px; } 8.33333% { background-position: 0 120px; padding-top: 552px; } 12.5% { background-position: 0 -432px; padding-top: 0px; } 16.66667% { background-position: 0 -408px; padding-top: 24px; } 20.83333% { background-position: 0 -384px; padding-top: 48px; } 25% { background-position: 0 -360px; padding-top: 72px; } 29.16667% { background-position: 0 -336px; padding-top: 96px; } 33.33333% { background-position: 0 -312px; padding-top: 120px; } 37.5% { background-position: 0 -288px; padding-top: 144px; } 41.66667% { background-position: 0 -264px; padding-top: 168px; } 45.83333% { background-position: 0 -240px; padding-top: 192px; } 50% { background-position: 0 -216px; padding-top: 216px; } 54.16667% { background-position: 0 -192px; padding-top: 240px; } 58.33333% { background-position: 0 -168px; padding-top: 264px; } 62.5% { background-position: 0 -144px; padding-top: 288px; } 66.66667% { background-position: 0 -120px; padding-top: 312px; } 70.83333% { background-position: 0 -96px; padding-top: 336px; } 75% { background-position: 0 -72px; padding-top: 360px; } 79.16667% { background-position: 0 -48px; padding-top: 384px; } 83.33333% { background-position: 0 -24px; padding-top: 408px; } 87.5% { background-position: 0 0px; padding-top: 432px; } 91.66667% { background-position: 0 24px; padding-top: 456px; } 95.83333% { background-position: 0 48px; padding-top: 480px; }
}
@-o-keyframes column-10 { 0% { background-position: 0 72px; padding-top: 504px; } 4.16667% { background-position: 0 96px; padding-top: 528px; } 8.33333% { background-position: 0 120px; padding-top: 552px; } 12.5% { background-position: 0 -432px; padding-top: 0px; } 16.66667% { background-position: 0 -408px; padding-top: 24px; } 20.83333% { background-position: 0 -384px; padding-top: 48px; } 25% { background-position: 0 -360px; padding-top: 72px; } 29.16667% { background-position: 0 -336px; padding-top: 96px; } 33.33333% { background-position: 0 -312px; padding-top: 120px; } 37.5% { background-position: 0 -288px; padding-top: 144px; } 41.66667% { background-position: 0 -264px; padding-top: 168px; } 45.83333% { background-position: 0 -240px; padding-top: 192px; } 50% { background-position: 0 -216px; padding-top: 216px; } 54.16667% { background-position: 0 -192px; padding-top: 240px; } 58.33333% { background-position: 0 -168px; padding-top: 264px; } 62.5% { background-position: 0 -144px; padding-top: 288px; } 66.66667% { background-position: 0 -120px; padding-top: 312px; } 70.83333% { background-position: 0 -96px; padding-top: 336px; } 75% { background-position: 0 -72px; padding-top: 360px; } 79.16667% { background-position: 0 -48px; padding-top: 384px; } 83.33333% { background-position: 0 -24px; padding-top: 408px; } 87.5% { background-position: 0 0px; padding-top: 432px; } 91.66667% { background-position: 0 24px; padding-top: 456px; } 95.83333% { background-position: 0 48px; padding-top: 480px; }
}
@keyframes column-10 { 0% { background-position: 0 72px; padding-top: 504px; } 4.16667% { background-position: 0 96px; padding-top: 528px; } 8.33333% { background-position: 0 120px; padding-top: 552px; } 12.5% { background-position: 0 -432px; padding-top: 0px; } 16.66667% { background-position: 0 -408px; padding-top: 24px; } 20.83333% { background-position: 0 -384px; padding-top: 48px; } 25% { background-position: 0 -360px; padding-top: 72px; } 29.16667% { background-position: 0 -336px; padding-top: 96px; } 33.33333% { background-position: 0 -312px; padding-top: 120px; } 37.5% { background-position: 0 -288px; padding-top: 144px; } 41.66667% { background-position: 0 -264px; padding-top: 168px; } 45.83333% { background-position: 0 -240px; padding-top: 192px; } 50% { background-position: 0 -216px; padding-top: 216px; } 54.16667% { background-position: 0 -192px; padding-top: 240px; } 58.33333% { background-position: 0 -168px; padding-top: 264px; } 62.5% { background-position: 0 -144px; padding-top: 288px; } 66.66667% { background-position: 0 -120px; padding-top: 312px; } 70.83333% { background-position: 0 -96px; padding-top: 336px; } 75% { background-position: 0 -72px; padding-top: 360px; } 79.16667% { background-position: 0 -48px; padding-top: 384px; } 83.33333% { background-position: 0 -24px; padding-top: 408px; } 87.5% { background-position: 0 0px; padding-top: 432px; } 91.66667% { background-position: 0 24px; padding-top: 456px; } 95.83333% { background-position: 0 48px; padding-top: 480px; }
}
.matrix li:nth-child(11) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(11):before { display: block; width: 1em; content: "う フ う ワ ん コ キ ウ ク た ク ン コ ン ょ ょ ワ リ た ょ ワ わ ド タ";
}
.matrix li:nth-child(11):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 264px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(20.83333%, rgba(0, 0, 0, 0)), color-stop(20.83333%, #000000), color-stop(100%, #000000)) 0 264px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 264px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 264px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 264px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ワ"; padding-top: 384px; overflow: hidden; -webkit-animation: 1920ms column-11 infinite steps(1, start); -moz-animation: 1920ms column-11 infinite steps(1, start); -ms-animation: 1920ms column-11 infinite steps(1, start); -o-animation: 1920ms column-11 infinite steps(1, start); animation: 1920ms column-11 infinite steps(1, start);
}
@-webkit-keyframes column-11 { 0% { background-position: 0 264px; padding-top: 384px; } 4.16667% { background-position: 0 288px; padding-top: 408px; } 8.33333% { background-position: 0 312px; padding-top: 432px; } 12.5% { background-position: 0 336px; padding-top: 456px; } 16.66667% { background-position: 0 360px; padding-top: 480px; } 20.83333% { background-position: 0 384px; padding-top: 504px; } 25% { background-position: 0 408px; padding-top: 528px; } 29.16667% { background-position: 0 432px; padding-top: 552px; } 33.33333% { background-position: 0 -120px; padding-top: 0px; } 37.5% { background-position: 0 -96px; padding-top: 24px; } 41.66667% { background-position: 0 -72px; padding-top: 48px; } 45.83333% { background-position: 0 -48px; padding-top: 72px; } 50% { background-position: 0 -24px; padding-top: 96px; } 54.16667% { background-position: 0 0px; padding-top: 120px; } 58.33333% { background-position: 0 24px; padding-top: 144px; } 62.5% { background-position: 0 48px; padding-top: 168px; } 66.66667% { background-position: 0 72px; padding-top: 192px; } 70.83333% { background-position: 0 96px; padding-top: 216px; } 75% { background-position: 0 120px; padding-top: 240px; } 79.16667% { background-position: 0 144px; padding-top: 264px; } 83.33333% { background-position: 0 168px; padding-top: 288px; } 87.5% { background-position: 0 192px; padding-top: 312px; } 91.66667% { background-position: 0 216px; padding-top: 336px; } 95.83333% { background-position: 0 240px; padding-top: 360px; }
}
@-moz-keyframes column-11 { 0% { background-position: 0 264px; padding-top: 384px; } 4.16667% { background-position: 0 288px; padding-top: 408px; } 8.33333% { background-position: 0 312px; padding-top: 432px; } 12.5% { background-position: 0 336px; padding-top: 456px; } 16.66667% { background-position: 0 360px; padding-top: 480px; } 20.83333% { background-position: 0 384px; padding-top: 504px; } 25% { background-position: 0 408px; padding-top: 528px; } 29.16667% { background-position: 0 432px; padding-top: 552px; } 33.33333% { background-position: 0 -120px; padding-top: 0px; } 37.5% { background-position: 0 -96px; padding-top: 24px; } 41.66667% { background-position: 0 -72px; padding-top: 48px; } 45.83333% { background-position: 0 -48px; padding-top: 72px; } 50% { background-position: 0 -24px; padding-top: 96px; } 54.16667% { background-position: 0 0px; padding-top: 120px; } 58.33333% { background-position: 0 24px; padding-top: 144px; } 62.5% { background-position: 0 48px; padding-top: 168px; } 66.66667% { background-position: 0 72px; padding-top: 192px; } 70.83333% { background-position: 0 96px; padding-top: 216px; } 75% { background-position: 0 120px; padding-top: 240px; } 79.16667% { background-position: 0 144px; padding-top: 264px; } 83.33333% { background-position: 0 168px; padding-top: 288px; } 87.5% { background-position: 0 192px; padding-top: 312px; } 91.66667% { background-position: 0 216px; padding-top: 336px; } 95.83333% { background-position: 0 240px; padding-top: 360px; }
}
@-o-keyframes column-11 { 0% { background-position: 0 264px; padding-top: 384px; } 4.16667% { background-position: 0 288px; padding-top: 408px; } 8.33333% { background-position: 0 312px; padding-top: 432px; } 12.5% { background-position: 0 336px; padding-top: 456px; } 16.66667% { background-position: 0 360px; padding-top: 480px; } 20.83333% { background-position: 0 384px; padding-top: 504px; } 25% { background-position: 0 408px; padding-top: 528px; } 29.16667% { background-position: 0 432px; padding-top: 552px; } 33.33333% { background-position: 0 -120px; padding-top: 0px; } 37.5% { background-position: 0 -96px; padding-top: 24px; } 41.66667% { background-position: 0 -72px; padding-top: 48px; } 45.83333% { background-position: 0 -48px; padding-top: 72px; } 50% { background-position: 0 -24px; padding-top: 96px; } 54.16667% { background-position: 0 0px; padding-top: 120px; } 58.33333% { background-position: 0 24px; padding-top: 144px; } 62.5% { background-position: 0 48px; padding-top: 168px; } 66.66667% { background-position: 0 72px; padding-top: 192px; } 70.83333% { background-position: 0 96px; padding-top: 216px; } 75% { background-position: 0 120px; padding-top: 240px; } 79.16667% { background-position: 0 144px; padding-top: 264px; } 83.33333% { background-position: 0 168px; padding-top: 288px; } 87.5% { background-position: 0 192px; padding-top: 312px; } 91.66667% { background-position: 0 216px; padding-top: 336px; } 95.83333% { background-position: 0 240px; padding-top: 360px; }
}
@keyframes column-11 { 0% { background-position: 0 264px; padding-top: 384px; } 4.16667% { background-position: 0 288px; padding-top: 408px; } 8.33333% { background-position: 0 312px; padding-top: 432px; } 12.5% { background-position: 0 336px; padding-top: 456px; } 16.66667% { background-position: 0 360px; padding-top: 480px; } 20.83333% { background-position: 0 384px; padding-top: 504px; } 25% { background-position: 0 408px; padding-top: 528px; } 29.16667% { background-position: 0 432px; padding-top: 552px; } 33.33333% { background-position: 0 -120px; padding-top: 0px; } 37.5% { background-position: 0 -96px; padding-top: 24px; } 41.66667% { background-position: 0 -72px; padding-top: 48px; } 45.83333% { background-position: 0 -48px; padding-top: 72px; } 50% { background-position: 0 -24px; padding-top: 96px; } 54.16667% { background-position: 0 0px; padding-top: 120px; } 58.33333% { background-position: 0 24px; padding-top: 144px; } 62.5% { background-position: 0 48px; padding-top: 168px; } 66.66667% { background-position: 0 72px; padding-top: 192px; } 70.83333% { background-position: 0 96px; padding-top: 216px; } 75% { background-position: 0 120px; padding-top: 240px; } 79.16667% { background-position: 0 144px; padding-top: 264px; } 83.33333% { background-position: 0 168px; padding-top: 288px; } 87.5% { background-position: 0 192px; padding-top: 312px; } 91.66667% { background-position: 0 216px; padding-top: 336px; } 95.83333% { background-position: 0 240px; padding-top: 360px; }
}
.matrix li:nth-child(12) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(12):before { display: block; width: 1em; content: "き シ ト う フ ョ ョ と シ と と バ フ ば う ラ ラ ソ タ タ ソ と と ョ";
}
.matrix li:nth-child(12):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -120px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(54.16667%, rgba(0, 0, 0, 0)), color-stop(54.16667%, #000000), color-stop(100%, #000000)) 0 -120px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -120px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -120px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -120px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "シ"; padding-top: 192px; overflow: hidden; -webkit-animation: 1920ms column-12 infinite steps(1, start); -moz-animation: 1920ms column-12 infinite steps(1, start); -ms-animation: 1920ms column-12 infinite steps(1, start); -o-animation: 1920ms column-12 infinite steps(1, start); animation: 1920ms column-12 infinite steps(1, start);
}
@-webkit-keyframes column-12 { 0% { background-position: 0 -120px; padding-top: 192px; } 4.16667% { background-position: 0 -96px; padding-top: 216px; } 8.33333% { background-position: 0 -72px; padding-top: 240px; } 12.5% { background-position: 0 -48px; padding-top: 264px; } 16.66667% { background-position: 0 -24px; padding-top: 288px; } 20.83333% { background-position: 0 0px; padding-top: 312px; } 25% { background-position: 0 24px; padding-top: 336px; } 29.16667% { background-position: 0 48px; padding-top: 360px; } 33.33333% { background-position: 0 72px; padding-top: 384px; } 37.5% { background-position: 0 96px; padding-top: 408px; } 41.66667% { background-position: 0 120px; padding-top: 432px; } 45.83333% { background-position: 0 144px; padding-top: 456px; } 50% { background-position: 0 168px; padding-top: 480px; } 54.16667% { background-position: 0 192px; padding-top: 504px; } 58.33333% { background-position: 0 216px; padding-top: 528px; } 62.5% { background-position: 0 240px; padding-top: 552px; } 66.66667% { background-position: 0 -312px; padding-top: 0px; } 70.83333% { background-position: 0 -288px; padding-top: 24px; } 75% { background-position: 0 -264px; padding-top: 48px; } 79.16667% { background-position: 0 -240px; padding-top: 72px; } 83.33333% { background-position: 0 -216px; padding-top: 96px; } 87.5% { background-position: 0 -192px; padding-top: 120px; } 91.66667% { background-position: 0 -168px; padding-top: 144px; } 95.83333% { background-position: 0 -144px; padding-top: 168px; }
}
@-moz-keyframes column-12 { 0% { background-position: 0 -120px; padding-top: 192px; } 4.16667% { background-position: 0 -96px; padding-top: 216px; } 8.33333% { background-position: 0 -72px; padding-top: 240px; } 12.5% { background-position: 0 -48px; padding-top: 264px; } 16.66667% { background-position: 0 -24px; padding-top: 288px; } 20.83333% { background-position: 0 0px; padding-top: 312px; } 25% { background-position: 0 24px; padding-top: 336px; } 29.16667% { background-position: 0 48px; padding-top: 360px; } 33.33333% { background-position: 0 72px; padding-top: 384px; } 37.5% { background-position: 0 96px; padding-top: 408px; } 41.66667% { background-position: 0 120px; padding-top: 432px; } 45.83333% { background-position: 0 144px; padding-top: 456px; } 50% { background-position: 0 168px; padding-top: 480px; } 54.16667% { background-position: 0 192px; padding-top: 504px; } 58.33333% { background-position: 0 216px; padding-top: 528px; } 62.5% { background-position: 0 240px; padding-top: 552px; } 66.66667% { background-position: 0 -312px; padding-top: 0px; } 70.83333% { background-position: 0 -288px; padding-top: 24px; } 75% { background-position: 0 -264px; padding-top: 48px; } 79.16667% { background-position: 0 -240px; padding-top: 72px; } 83.33333% { background-position: 0 -216px; padding-top: 96px; } 87.5% { background-position: 0 -192px; padding-top: 120px; } 91.66667% { background-position: 0 -168px; padding-top: 144px; } 95.83333% { background-position: 0 -144px; padding-top: 168px; }
}
@-o-keyframes column-12 { 0% { background-position: 0 -120px; padding-top: 192px; } 4.16667% { background-position: 0 -96px; padding-top: 216px; } 8.33333% { background-position: 0 -72px; padding-top: 240px; } 12.5% { background-position: 0 -48px; padding-top: 264px; } 16.66667% { background-position: 0 -24px; padding-top: 288px; } 20.83333% { background-position: 0 0px; padding-top: 312px; } 25% { background-position: 0 24px; padding-top: 336px; } 29.16667% { background-position: 0 48px; padding-top: 360px; } 33.33333% { background-position: 0 72px; padding-top: 384px; } 37.5% { background-position: 0 96px; padding-top: 408px; } 41.66667% { background-position: 0 120px; padding-top: 432px; } 45.83333% { background-position: 0 144px; padding-top: 456px; } 50% { background-position: 0 168px; padding-top: 480px; } 54.16667% { background-position: 0 192px; padding-top: 504px; } 58.33333% { background-position: 0 216px; padding-top: 528px; } 62.5% { background-position: 0 240px; padding-top: 552px; } 66.66667% { background-position: 0 -312px; padding-top: 0px; } 70.83333% { background-position: 0 -288px; padding-top: 24px; } 75% { background-position: 0 -264px; padding-top: 48px; } 79.16667% { background-position: 0 -240px; padding-top: 72px; } 83.33333% { background-position: 0 -216px; padding-top: 96px; } 87.5% { background-position: 0 -192px; padding-top: 120px; } 91.66667% { background-position: 0 -168px; padding-top: 144px; } 95.83333% { background-position: 0 -144px; padding-top: 168px; }
}
@keyframes column-12 { 0% { background-position: 0 -120px; padding-top: 192px; } 4.16667% { background-position: 0 -96px; padding-top: 216px; } 8.33333% { background-position: 0 -72px; padding-top: 240px; } 12.5% { background-position: 0 -48px; padding-top: 264px; } 16.66667% { background-position: 0 -24px; padding-top: 288px; } 20.83333% { background-position: 0 0px; padding-top: 312px; } 25% { background-position: 0 24px; padding-top: 336px; } 29.16667% { background-position: 0 48px; padding-top: 360px; } 33.33333% { background-position: 0 72px; padding-top: 384px; } 37.5% { background-position: 0 96px; padding-top: 408px; } 41.66667% { background-position: 0 120px; padding-top: 432px; } 45.83333% { background-position: 0 144px; padding-top: 456px; } 50% { background-position: 0 168px; padding-top: 480px; } 54.16667% { background-position: 0 192px; padding-top: 504px; } 58.33333% { background-position: 0 216px; padding-top: 528px; } 62.5% { background-position: 0 240px; padding-top: 552px; } 66.66667% { background-position: 0 -312px; padding-top: 0px; } 70.83333% { background-position: 0 -288px; padding-top: 24px; } 75% { background-position: 0 -264px; padding-top: 48px; } 79.16667% { background-position: 0 -240px; padding-top: 72px; } 83.33333% { background-position: 0 -216px; padding-top: 96px; } 87.5% { background-position: 0 -192px; padding-top: 120px; } 91.66667% { background-position: 0 -168px; padding-top: 144px; } 95.83333% { background-position: 0 -144px; padding-top: 168px; }
}
.matrix li:nth-child(13) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(13):before { display: block; width: 1em; content: "き バ う こ タ と キ こ ラ ウ タ わ ん た ン シ わ ク コ ウ き ン こ シ";
}
.matrix li:nth-child(13):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNjIuNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI2Mi41JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 -48px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(62.5%, rgba(0, 0, 0, 0)), color-stop(62.5%, #000000), color-stop(100%, #000000)) 0 -48px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 360px, #000000 360px, #000000 576px) 0 -48px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 360px, #000000 360px, #000000 576px) 0 -48px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 360px, #000000 360px, #000000 576px) 0 -48px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "た"; padding-top: 312px; overflow: hidden; -webkit-animation: 1920ms column-13 infinite steps(1, start); -moz-animation: 1920ms column-13 infinite steps(1, start); -ms-animation: 1920ms column-13 infinite steps(1, start); -o-animation: 1920ms column-13 infinite steps(1, start); animation: 1920ms column-13 infinite steps(1, start);
}
@-webkit-keyframes column-13 { 0% { background-position: 0 -48px; padding-top: 312px; } 4.16667% { background-position: 0 -24px; padding-top: 336px; } 8.33333% { background-position: 0 0px; padding-top: 360px; } 12.5% { background-position: 0 24px; padding-top: 384px; } 16.66667% { background-position: 0 48px; padding-top: 408px; } 20.83333% { background-position: 0 72px; padding-top: 432px; } 25% { background-position: 0 96px; padding-top: 456px; } 29.16667% { background-position: 0 120px; padding-top: 480px; } 33.33333% { background-position: 0 144px; padding-top: 504px; } 37.5% { background-position: 0 168px; padding-top: 528px; } 41.66667% { background-position: 0 192px; padding-top: 552px; } 45.83333% { background-position: 0 -360px; padding-top: 0px; } 50% { background-position: 0 -336px; padding-top: 24px; } 54.16667% { background-position: 0 -312px; padding-top: 48px; } 58.33333% { background-position: 0 -288px; padding-top: 72px; } 62.5% { background-position: 0 -264px; padding-top: 96px; } 66.66667% { background-position: 0 -240px; padding-top: 120px; } 70.83333% { background-position: 0 -216px; padding-top: 144px; } 75% { background-position: 0 -192px; padding-top: 168px; } 79.16667% { background-position: 0 -168px; padding-top: 192px; } 83.33333% { background-position: 0 -144px; padding-top: 216px; } 87.5% { background-position: 0 -120px; padding-top: 240px; } 91.66667% { background-position: 0 -96px; padding-top: 264px; } 95.83333% { background-position: 0 -72px; padding-top: 288px; }
}
@-moz-keyframes column-13 { 0% { background-position: 0 -48px; padding-top: 312px; } 4.16667% { background-position: 0 -24px; padding-top: 336px; } 8.33333% { background-position: 0 0px; padding-top: 360px; } 12.5% { background-position: 0 24px; padding-top: 384px; } 16.66667% { background-position: 0 48px; padding-top: 408px; } 20.83333% { background-position: 0 72px; padding-top: 432px; } 25% { background-position: 0 96px; padding-top: 456px; } 29.16667% { background-position: 0 120px; padding-top: 480px; } 33.33333% { background-position: 0 144px; padding-top: 504px; } 37.5% { background-position: 0 168px; padding-top: 528px; } 41.66667% { background-position: 0 192px; padding-top: 552px; } 45.83333% { background-position: 0 -360px; padding-top: 0px; } 50% { background-position: 0 -336px; padding-top: 24px; } 54.16667% { background-position: 0 -312px; padding-top: 48px; } 58.33333% { background-position: 0 -288px; padding-top: 72px; } 62.5% { background-position: 0 -264px; padding-top: 96px; } 66.66667% { background-position: 0 -240px; padding-top: 120px; } 70.83333% { background-position: 0 -216px; padding-top: 144px; } 75% { background-position: 0 -192px; padding-top: 168px; } 79.16667% { background-position: 0 -168px; padding-top: 192px; } 83.33333% { background-position: 0 -144px; padding-top: 216px; } 87.5% { background-position: 0 -120px; padding-top: 240px; } 91.66667% { background-position: 0 -96px; padding-top: 264px; } 95.83333% { background-position: 0 -72px; padding-top: 288px; }
}
@-o-keyframes column-13 { 0% { background-position: 0 -48px; padding-top: 312px; } 4.16667% { background-position: 0 -24px; padding-top: 336px; } 8.33333% { background-position: 0 0px; padding-top: 360px; } 12.5% { background-position: 0 24px; padding-top: 384px; } 16.66667% { background-position: 0 48px; padding-top: 408px; } 20.83333% { background-position: 0 72px; padding-top: 432px; } 25% { background-position: 0 96px; padding-top: 456px; } 29.16667% { background-position: 0 120px; padding-top: 480px; } 33.33333% { background-position: 0 144px; padding-top: 504px; } 37.5% { background-position: 0 168px; padding-top: 528px; } 41.66667% { background-position: 0 192px; padding-top: 552px; } 45.83333% { background-position: 0 -360px; padding-top: 0px; } 50% { background-position: 0 -336px; padding-top: 24px; } 54.16667% { background-position: 0 -312px; padding-top: 48px; } 58.33333% { background-position: 0 -288px; padding-top: 72px; } 62.5% { background-position: 0 -264px; padding-top: 96px; } 66.66667% { background-position: 0 -240px; padding-top: 120px; } 70.83333% { background-position: 0 -216px; padding-top: 144px; } 75% { background-position: 0 -192px; padding-top: 168px; } 79.16667% { background-position: 0 -168px; padding-top: 192px; } 83.33333% { background-position: 0 -144px; padding-top: 216px; } 87.5% { background-position: 0 -120px; padding-top: 240px; } 91.66667% { background-position: 0 -96px; padding-top: 264px; } 95.83333% { background-position: 0 -72px; padding-top: 288px; }
}
@keyframes column-13 { 0% { background-position: 0 -48px; padding-top: 312px; } 4.16667% { background-position: 0 -24px; padding-top: 336px; } 8.33333% { background-position: 0 0px; padding-top: 360px; } 12.5% { background-position: 0 24px; padding-top: 384px; } 16.66667% { background-position: 0 48px; padding-top: 408px; } 20.83333% { background-position: 0 72px; padding-top: 432px; } 25% { background-position: 0 96px; padding-top: 456px; } 29.16667% { background-position: 0 120px; padding-top: 480px; } 33.33333% { background-position: 0 144px; padding-top: 504px; } 37.5% { background-position: 0 168px; padding-top: 528px; } 41.66667% { background-position: 0 192px; padding-top: 552px; } 45.83333% { background-position: 0 -360px; padding-top: 0px; } 50% { background-position: 0 -336px; padding-top: 24px; } 54.16667% { background-position: 0 -312px; padding-top: 48px; } 58.33333% { background-position: 0 -288px; padding-top: 72px; } 62.5% { background-position: 0 -264px; padding-top: 96px; } 66.66667% { background-position: 0 -240px; padding-top: 120px; } 70.83333% { background-position: 0 -216px; padding-top: 144px; } 75% { background-position: 0 -192px; padding-top: 168px; } 79.16667% { background-position: 0 -168px; padding-top: 192px; } 83.33333% { background-position: 0 -144px; padding-top: 216px; } 87.5% { background-position: 0 -120px; padding-top: 240px; } 91.66667% { background-position: 0 -96px; padding-top: 264px; } 95.83333% { background-position: 0 -72px; padding-top: 288px; }
}
.matrix li:nth-child(14) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(14):before { display: block; width: 1em; content: "キ ソ タ ば わ ょ き ョ た ト ド う ょ ョ ワ マ ウ ば ド き リ き と ョ";
}
.matrix li:nth-child(14):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 192px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(45.83333%, rgba(0, 0, 0, 0)), color-stop(45.83333%, #000000), color-stop(100%, #000000)) 0 192px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 192px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 192px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 192px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "き"; padding-top: 456px; overflow: hidden; -webkit-animation: 1920ms column-14 infinite steps(1, start); -moz-animation: 1920ms column-14 infinite steps(1, start); -ms-animation: 1920ms column-14 infinite steps(1, start); -o-animation: 1920ms column-14 infinite steps(1, start); animation: 1920ms column-14 infinite steps(1, start);
}
@-webkit-keyframes column-14 { 0% { background-position: 0 192px; padding-top: 456px; } 4.16667% { background-position: 0 216px; padding-top: 480px; } 8.33333% { background-position: 0 240px; padding-top: 504px; } 12.5% { background-position: 0 264px; padding-top: 528px; } 16.66667% { background-position: 0 288px; padding-top: 552px; } 20.83333% { background-position: 0 -264px; padding-top: 0px; } 25% { background-position: 0 -240px; padding-top: 24px; } 29.16667% { background-position: 0 -216px; padding-top: 48px; } 33.33333% { background-position: 0 -192px; padding-top: 72px; } 37.5% { background-position: 0 -168px; padding-top: 96px; } 41.66667% { background-position: 0 -144px; padding-top: 120px; } 45.83333% { background-position: 0 -120px; padding-top: 144px; } 50% { background-position: 0 -96px; padding-top: 168px; } 54.16667% { background-position: 0 -72px; padding-top: 192px; } 58.33333% { background-position: 0 -48px; padding-top: 216px; } 62.5% { background-position: 0 -24px; padding-top: 240px; } 66.66667% { background-position: 0 0px; padding-top: 264px; } 70.83333% { background-position: 0 24px; padding-top: 288px; } 75% { background-position: 0 48px; padding-top: 312px; } 79.16667% { background-position: 0 72px; padding-top: 336px; } 83.33333% { background-position: 0 96px; padding-top: 360px; } 87.5% { background-position: 0 120px; padding-top: 384px; } 91.66667% { background-position: 0 144px; padding-top: 408px; } 95.83333% { background-position: 0 168px; padding-top: 432px; }
}
@-moz-keyframes column-14 { 0% { background-position: 0 192px; padding-top: 456px; } 4.16667% { background-position: 0 216px; padding-top: 480px; } 8.33333% { background-position: 0 240px; padding-top: 504px; } 12.5% { background-position: 0 264px; padding-top: 528px; } 16.66667% { background-position: 0 288px; padding-top: 552px; } 20.83333% { background-position: 0 -264px; padding-top: 0px; } 25% { background-position: 0 -240px; padding-top: 24px; } 29.16667% { background-position: 0 -216px; padding-top: 48px; } 33.33333% { background-position: 0 -192px; padding-top: 72px; } 37.5% { background-position: 0 -168px; padding-top: 96px; } 41.66667% { background-position: 0 -144px; padding-top: 120px; } 45.83333% { background-position: 0 -120px; padding-top: 144px; } 50% { background-position: 0 -96px; padding-top: 168px; } 54.16667% { background-position: 0 -72px; padding-top: 192px; } 58.33333% { background-position: 0 -48px; padding-top: 216px; } 62.5% { background-position: 0 -24px; padding-top: 240px; } 66.66667% { background-position: 0 0px; padding-top: 264px; } 70.83333% { background-position: 0 24px; padding-top: 288px; } 75% { background-position: 0 48px; padding-top: 312px; } 79.16667% { background-position: 0 72px; padding-top: 336px; } 83.33333% { background-position: 0 96px; padding-top: 360px; } 87.5% { background-position: 0 120px; padding-top: 384px; } 91.66667% { background-position: 0 144px; padding-top: 408px; } 95.83333% { background-position: 0 168px; padding-top: 432px; }
}
@-o-keyframes column-14 { 0% { background-position: 0 192px; padding-top: 456px; } 4.16667% { background-position: 0 216px; padding-top: 480px; } 8.33333% { background-position: 0 240px; padding-top: 504px; } 12.5% { background-position: 0 264px; padding-top: 528px; } 16.66667% { background-position: 0 288px; padding-top: 552px; } 20.83333% { background-position: 0 -264px; padding-top: 0px; } 25% { background-position: 0 -240px; padding-top: 24px; } 29.16667% { background-position: 0 -216px; padding-top: 48px; } 33.33333% { background-position: 0 -192px; padding-top: 72px; } 37.5% { background-position: 0 -168px; padding-top: 96px; } 41.66667% { background-position: 0 -144px; padding-top: 120px; } 45.83333% { background-position: 0 -120px; padding-top: 144px; } 50% { background-position: 0 -96px; padding-top: 168px; } 54.16667% { background-position: 0 -72px; padding-top: 192px; } 58.33333% { background-position: 0 -48px; padding-top: 216px; } 62.5% { background-position: 0 -24px; padding-top: 240px; } 66.66667% { background-position: 0 0px; padding-top: 264px; } 70.83333% { background-position: 0 24px; padding-top: 288px; } 75% { background-position: 0 48px; padding-top: 312px; } 79.16667% { background-position: 0 72px; padding-top: 336px; } 83.33333% { background-position: 0 96px; padding-top: 360px; } 87.5% { background-position: 0 120px; padding-top: 384px; } 91.66667% { background-position: 0 144px; padding-top: 408px; } 95.83333% { background-position: 0 168px; padding-top: 432px; }
}
@keyframes column-14 { 0% { background-position: 0 192px; padding-top: 456px; } 4.16667% { background-position: 0 216px; padding-top: 480px; } 8.33333% { background-position: 0 240px; padding-top: 504px; } 12.5% { background-position: 0 264px; padding-top: 528px; } 16.66667% { background-position: 0 288px; padding-top: 552px; } 20.83333% { background-position: 0 -264px; padding-top: 0px; } 25% { background-position: 0 -240px; padding-top: 24px; } 29.16667% { background-position: 0 -216px; padding-top: 48px; } 33.33333% { background-position: 0 -192px; padding-top: 72px; } 37.5% { background-position: 0 -168px; padding-top: 96px; } 41.66667% { background-position: 0 -144px; padding-top: 120px; } 45.83333% { background-position: 0 -120px; padding-top: 144px; } 50% { background-position: 0 -96px; padding-top: 168px; } 54.16667% { background-position: 0 -72px; padding-top: 192px; } 58.33333% { background-position: 0 -48px; padding-top: 216px; } 62.5% { background-position: 0 -24px; padding-top: 240px; } 66.66667% { background-position: 0 0px; padding-top: 264px; } 70.83333% { background-position: 0 24px; padding-top: 288px; } 75% { background-position: 0 48px; padding-top: 312px; } 79.16667% { background-position: 0 72px; padding-top: 336px; } 83.33333% { background-position: 0 96px; padding-top: 360px; } 87.5% { background-position: 0 120px; padding-top: 384px; } 91.66667% { background-position: 0 144px; padding-top: 408px; } 95.83333% { background-position: 0 168px; padding-top: 432px; }
}
.matrix li:nth-child(15) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(15):before { display: block; width: 1em; content: "シ こ た こ ク ウ た バ ワ バ う わ タ ょ タ た ド う う う ょ ワ ょ タ";
}
.matrix li:nth-child(15):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDUuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 144px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(45.83333%, rgba(0, 0, 0, 0)), color-stop(45.83333%, #000000), color-stop(100%, #000000)) 0 144px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 144px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 144px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 264px, #000000 264px, #000000 576px) 0 144px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "う"; padding-top: 408px; overflow: hidden; -webkit-animation: 1920ms column-15 infinite steps(1, start); -moz-animation: 1920ms column-15 infinite steps(1, start); -ms-animation: 1920ms column-15 infinite steps(1, start); -o-animation: 1920ms column-15 infinite steps(1, start); animation: 1920ms column-15 infinite steps(1, start);
}
@-webkit-keyframes column-15 { 0% { background-position: 0 144px; padding-top: 408px; } 4.16667% { background-position: 0 168px; padding-top: 432px; } 8.33333% { background-position: 0 192px; padding-top: 456px; } 12.5% { background-position: 0 216px; padding-top: 480px; } 16.66667% { background-position: 0 240px; padding-top: 504px; } 20.83333% { background-position: 0 264px; padding-top: 528px; } 25% { background-position: 0 288px; padding-top: 552px; } 29.16667% { background-position: 0 -264px; padding-top: 0px; } 33.33333% { background-position: 0 -240px; padding-top: 24px; } 37.5% { background-position: 0 -216px; padding-top: 48px; } 41.66667% { background-position: 0 -192px; padding-top: 72px; } 45.83333% { background-position: 0 -168px; padding-top: 96px; } 50% { background-position: 0 -144px; padding-top: 120px; } 54.16667% { background-position: 0 -120px; padding-top: 144px; } 58.33333% { background-position: 0 -96px; padding-top: 168px; } 62.5% { background-position: 0 -72px; padding-top: 192px; } 66.66667% { background-position: 0 -48px; padding-top: 216px; } 70.83333% { background-position: 0 -24px; padding-top: 240px; } 75% { background-position: 0 0px; padding-top: 264px; } 79.16667% { background-position: 0 24px; padding-top: 288px; } 83.33333% { background-position: 0 48px; padding-top: 312px; } 87.5% { background-position: 0 72px; padding-top: 336px; } 91.66667% { background-position: 0 96px; padding-top: 360px; } 95.83333% { background-position: 0 120px; padding-top: 384px; }
}
@-moz-keyframes column-15 { 0% { background-position: 0 144px; padding-top: 408px; } 4.16667% { background-position: 0 168px; padding-top: 432px; } 8.33333% { background-position: 0 192px; padding-top: 456px; } 12.5% { background-position: 0 216px; padding-top: 480px; } 16.66667% { background-position: 0 240px; padding-top: 504px; } 20.83333% { background-position: 0 264px; padding-top: 528px; } 25% { background-position: 0 288px; padding-top: 552px; } 29.16667% { background-position: 0 -264px; padding-top: 0px; } 33.33333% { background-position: 0 -240px; padding-top: 24px; } 37.5% { background-position: 0 -216px; padding-top: 48px; } 41.66667% { background-position: 0 -192px; padding-top: 72px; } 45.83333% { background-position: 0 -168px; padding-top: 96px; } 50% { background-position: 0 -144px; padding-top: 120px; } 54.16667% { background-position: 0 -120px; padding-top: 144px; } 58.33333% { background-position: 0 -96px; padding-top: 168px; } 62.5% { background-position: 0 -72px; padding-top: 192px; } 66.66667% { background-position: 0 -48px; padding-top: 216px; } 70.83333% { background-position: 0 -24px; padding-top: 240px; } 75% { background-position: 0 0px; padding-top: 264px; } 79.16667% { background-position: 0 24px; padding-top: 288px; } 83.33333% { background-position: 0 48px; padding-top: 312px; } 87.5% { background-position: 0 72px; padding-top: 336px; } 91.66667% { background-position: 0 96px; padding-top: 360px; } 95.83333% { background-position: 0 120px; padding-top: 384px; }
}
@-o-keyframes column-15 { 0% { background-position: 0 144px; padding-top: 408px; } 4.16667% { background-position: 0 168px; padding-top: 432px; } 8.33333% { background-position: 0 192px; padding-top: 456px; } 12.5% { background-position: 0 216px; padding-top: 480px; } 16.66667% { background-position: 0 240px; padding-top: 504px; } 20.83333% { background-position: 0 264px; padding-top: 528px; } 25% { background-position: 0 288px; padding-top: 552px; } 29.16667% { background-position: 0 -264px; padding-top: 0px; } 33.33333% { background-position: 0 -240px; padding-top: 24px; } 37.5% { background-position: 0 -216px; padding-top: 48px; } 41.66667% { background-position: 0 -192px; padding-top: 72px; } 45.83333% { background-position: 0 -168px; padding-top: 96px; } 50% { background-position: 0 -144px; padding-top: 120px; } 54.16667% { background-position: 0 -120px; padding-top: 144px; } 58.33333% { background-position: 0 -96px; padding-top: 168px; } 62.5% { background-position: 0 -72px; padding-top: 192px; } 66.66667% { background-position: 0 -48px; padding-top: 216px; } 70.83333% { background-position: 0 -24px; padding-top: 240px; } 75% { background-position: 0 0px; padding-top: 264px; } 79.16667% { background-position: 0 24px; padding-top: 288px; } 83.33333% { background-position: 0 48px; padding-top: 312px; } 87.5% { background-position: 0 72px; padding-top: 336px; } 91.66667% { background-position: 0 96px; padding-top: 360px; } 95.83333% { background-position: 0 120px; padding-top: 384px; }
}
@keyframes column-15 { 0% { background-position: 0 144px; padding-top: 408px; } 4.16667% { background-position: 0 168px; padding-top: 432px; } 8.33333% { background-position: 0 192px; padding-top: 456px; } 12.5% { background-position: 0 216px; padding-top: 480px; } 16.66667% { background-position: 0 240px; padding-top: 504px; } 20.83333% { background-position: 0 264px; padding-top: 528px; } 25% { background-position: 0 288px; padding-top: 552px; } 29.16667% { background-position: 0 -264px; padding-top: 0px; } 33.33333% { background-position: 0 -240px; padding-top: 24px; } 37.5% { background-position: 0 -216px; padding-top: 48px; } 41.66667% { background-position: 0 -192px; padding-top: 72px; } 45.83333% { background-position: 0 -168px; padding-top: 96px; } 50% { background-position: 0 -144px; padding-top: 120px; } 54.16667% { background-position: 0 -120px; padding-top: 144px; } 58.33333% { background-position: 0 -96px; padding-top: 168px; } 62.5% { background-position: 0 -72px; padding-top: 192px; } 66.66667% { background-position: 0 -48px; padding-top: 216px; } 70.83333% { background-position: 0 -24px; padding-top: 240px; } 75% { background-position: 0 0px; padding-top: 264px; } 79.16667% { background-position: 0 24px; padding-top: 288px; } 83.33333% { background-position: 0 48px; padding-top: 312px; } 87.5% { background-position: 0 72px; padding-top: 336px; } 91.66667% { background-position: 0 96px; padding-top: 360px; } 95.83333% { background-position: 0 120px; padding-top: 384px; }
}
.matrix li:nth-child(16) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(16):before { display: block; width: 1em; content: "タ タ マ ば ョ コ ン キ ば フ う ん リ リ シ ょ ョ ド バ ョ き タ バ き";
}
.matrix li:nth-child(16):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 240px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(25%, #000000), color-stop(100%, #000000)) 0 240px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 240px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 240px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 144px, #000000 144px, #000000 576px) 0 240px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ョ"; padding-top: 384px; overflow: hidden; -webkit-animation: 1920ms column-16 infinite steps(1, start); -moz-animation: 1920ms column-16 infinite steps(1, start); -ms-animation: 1920ms column-16 infinite steps(1, start); -o-animation: 1920ms column-16 infinite steps(1, start); animation: 1920ms column-16 infinite steps(1, start);
}
@-webkit-keyframes column-16 { 0% { background-position: 0 240px; padding-top: 384px; } 4.16667% { background-position: 0 264px; padding-top: 408px; } 8.33333% { background-position: 0 288px; padding-top: 432px; } 12.5% { background-position: 0 312px; padding-top: 456px; } 16.66667% { background-position: 0 336px; padding-top: 480px; } 20.83333% { background-position: 0 360px; padding-top: 504px; } 25% { background-position: 0 384px; padding-top: 528px; } 29.16667% { background-position: 0 408px; padding-top: 552px; } 33.33333% { background-position: 0 -144px; padding-top: 0px; } 37.5% { background-position: 0 -120px; padding-top: 24px; } 41.66667% { background-position: 0 -96px; padding-top: 48px; } 45.83333% { background-position: 0 -72px; padding-top: 72px; } 50% { background-position: 0 -48px; padding-top: 96px; } 54.16667% { background-position: 0 -24px; padding-top: 120px; } 58.33333% { background-position: 0 0px; padding-top: 144px; } 62.5% { background-position: 0 24px; padding-top: 168px; } 66.66667% { background-position: 0 48px; padding-top: 192px; } 70.83333% { background-position: 0 72px; padding-top: 216px; } 75% { background-position: 0 96px; padding-top: 240px; } 79.16667% { background-position: 0 120px; padding-top: 264px; } 83.33333% { background-position: 0 144px; padding-top: 288px; } 87.5% { background-position: 0 168px; padding-top: 312px; } 91.66667% { background-position: 0 192px; padding-top: 336px; } 95.83333% { background-position: 0 216px; padding-top: 360px; }
}
@-moz-keyframes column-16 { 0% { background-position: 0 240px; padding-top: 384px; } 4.16667% { background-position: 0 264px; padding-top: 408px; } 8.33333% { background-position: 0 288px; padding-top: 432px; } 12.5% { background-position: 0 312px; padding-top: 456px; } 16.66667% { background-position: 0 336px; padding-top: 480px; } 20.83333% { background-position: 0 360px; padding-top: 504px; } 25% { background-position: 0 384px; padding-top: 528px; } 29.16667% { background-position: 0 408px; padding-top: 552px; } 33.33333% { background-position: 0 -144px; padding-top: 0px; } 37.5% { background-position: 0 -120px; padding-top: 24px; } 41.66667% { background-position: 0 -96px; padding-top: 48px; } 45.83333% { background-position: 0 -72px; padding-top: 72px; } 50% { background-position: 0 -48px; padding-top: 96px; } 54.16667% { background-position: 0 -24px; padding-top: 120px; } 58.33333% { background-position: 0 0px; padding-top: 144px; } 62.5% { background-position: 0 24px; padding-top: 168px; } 66.66667% { background-position: 0 48px; padding-top: 192px; } 70.83333% { background-position: 0 72px; padding-top: 216px; } 75% { background-position: 0 96px; padding-top: 240px; } 79.16667% { background-position: 0 120px; padding-top: 264px; } 83.33333% { background-position: 0 144px; padding-top: 288px; } 87.5% { background-position: 0 168px; padding-top: 312px; } 91.66667% { background-position: 0 192px; padding-top: 336px; } 95.83333% { background-position: 0 216px; padding-top: 360px; }
}
@-o-keyframes column-16 { 0% { background-position: 0 240px; padding-top: 384px; } 4.16667% { background-position: 0 264px; padding-top: 408px; } 8.33333% { background-position: 0 288px; padding-top: 432px; } 12.5% { background-position: 0 312px; padding-top: 456px; } 16.66667% { background-position: 0 336px; padding-top: 480px; } 20.83333% { background-position: 0 360px; padding-top: 504px; } 25% { background-position: 0 384px; padding-top: 528px; } 29.16667% { background-position: 0 408px; padding-top: 552px; } 33.33333% { background-position: 0 -144px; padding-top: 0px; } 37.5% { background-position: 0 -120px; padding-top: 24px; } 41.66667% { background-position: 0 -96px; padding-top: 48px; } 45.83333% { background-position: 0 -72px; padding-top: 72px; } 50% { background-position: 0 -48px; padding-top: 96px; } 54.16667% { background-position: 0 -24px; padding-top: 120px; } 58.33333% { background-position: 0 0px; padding-top: 144px; } 62.5% { background-position: 0 24px; padding-top: 168px; } 66.66667% { background-position: 0 48px; padding-top: 192px; } 70.83333% { background-position: 0 72px; padding-top: 216px; } 75% { background-position: 0 96px; padding-top: 240px; } 79.16667% { background-position: 0 120px; padding-top: 264px; } 83.33333% { background-position: 0 144px; padding-top: 288px; } 87.5% { background-position: 0 168px; padding-top: 312px; } 91.66667% { background-position: 0 192px; padding-top: 336px; } 95.83333% { background-position: 0 216px; padding-top: 360px; }
}
@keyframes column-16 { 0% { background-position: 0 240px; padding-top: 384px; } 4.16667% { background-position: 0 264px; padding-top: 408px; } 8.33333% { background-position: 0 288px; padding-top: 432px; } 12.5% { background-position: 0 312px; padding-top: 456px; } 16.66667% { background-position: 0 336px; padding-top: 480px; } 20.83333% { background-position: 0 360px; padding-top: 504px; } 25% { background-position: 0 384px; padding-top: 528px; } 29.16667% { background-position: 0 408px; padding-top: 552px; } 33.33333% { background-position: 0 -144px; padding-top: 0px; } 37.5% { background-position: 0 -120px; padding-top: 24px; } 41.66667% { background-position: 0 -96px; padding-top: 48px; } 45.83333% { background-position: 0 -72px; padding-top: 72px; } 50% { background-position: 0 -48px; padding-top: 96px; } 54.16667% { background-position: 0 -24px; padding-top: 120px; } 58.33333% { background-position: 0 0px; padding-top: 144px; } 62.5% { background-position: 0 24px; padding-top: 168px; } 66.66667% { background-position: 0 48px; padding-top: 192px; } 70.83333% { background-position: 0 72px; padding-top: 216px; } 75% { background-position: 0 96px; padding-top: 240px; } 79.16667% { background-position: 0 120px; padding-top: 264px; } 83.33333% { background-position: 0 144px; padding-top: 288px; } 87.5% { background-position: 0 168px; padding-top: 312px; } 91.66667% { background-position: 0 192px; padding-top: 336px; } 95.83333% { background-position: 0 216px; padding-top: 360px; }
}
.matrix li:nth-child(17) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(17):before { display: block; width: 1em; content: "ョ マ ょ ウ リ ラ マ フ フ ウ う ド マ ソ タ タ キ ワ ょ う ウ ド ョ う";
}
.matrix li:nth-child(17):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -120px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(29.16667%, rgba(0, 0, 0, 0)), color-stop(29.16667%, #000000), color-stop(100%, #000000)) 0 -120px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 -120px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 -120px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 -120px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ょ"; padding-top: 48px; overflow: hidden; -webkit-animation: 1920ms column-17 infinite steps(1, start); -moz-animation: 1920ms column-17 infinite steps(1, start); -ms-animation: 1920ms column-17 infinite steps(1, start); -o-animation: 1920ms column-17 infinite steps(1, start); animation: 1920ms column-17 infinite steps(1, start);
}
@-webkit-keyframes column-17 { 0% { background-position: 0 -120px; padding-top: 48px; } 4.16667% { background-position: 0 -96px; padding-top: 72px; } 8.33333% { background-position: 0 -72px; padding-top: 96px; } 12.5% { background-position: 0 -48px; padding-top: 120px; } 16.66667% { background-position: 0 -24px; padding-top: 144px; } 20.83333% { background-position: 0 0px; padding-top: 168px; } 25% { background-position: 0 24px; padding-top: 192px; } 29.16667% { background-position: 0 48px; padding-top: 216px; } 33.33333% { background-position: 0 72px; padding-top: 240px; } 37.5% { background-position: 0 96px; padding-top: 264px; } 41.66667% { background-position: 0 120px; padding-top: 288px; } 45.83333% { background-position: 0 144px; padding-top: 312px; } 50% { background-position: 0 168px; padding-top: 336px; } 54.16667% { background-position: 0 192px; padding-top: 360px; } 58.33333% { background-position: 0 216px; padding-top: 384px; } 62.5% { background-position: 0 240px; padding-top: 408px; } 66.66667% { background-position: 0 264px; padding-top: 432px; } 70.83333% { background-position: 0 288px; padding-top: 456px; } 75% { background-position: 0 312px; padding-top: 480px; } 79.16667% { background-position: 0 336px; padding-top: 504px; } 83.33333% { background-position: 0 360px; padding-top: 528px; } 87.5% { background-position: 0 384px; padding-top: 552px; } 91.66667% { background-position: 0 -168px; padding-top: 0px; } 95.83333% { background-position: 0 -144px; padding-top: 24px; }
}
@-moz-keyframes column-17 { 0% { background-position: 0 -120px; padding-top: 48px; } 4.16667% { background-position: 0 -96px; padding-top: 72px; } 8.33333% { background-position: 0 -72px; padding-top: 96px; } 12.5% { background-position: 0 -48px; padding-top: 120px; } 16.66667% { background-position: 0 -24px; padding-top: 144px; } 20.83333% { background-position: 0 0px; padding-top: 168px; } 25% { background-position: 0 24px; padding-top: 192px; } 29.16667% { background-position: 0 48px; padding-top: 216px; } 33.33333% { background-position: 0 72px; padding-top: 240px; } 37.5% { background-position: 0 96px; padding-top: 264px; } 41.66667% { background-position: 0 120px; padding-top: 288px; } 45.83333% { background-position: 0 144px; padding-top: 312px; } 50% { background-position: 0 168px; padding-top: 336px; } 54.16667% { background-position: 0 192px; padding-top: 360px; } 58.33333% { background-position: 0 216px; padding-top: 384px; } 62.5% { background-position: 0 240px; padding-top: 408px; } 66.66667% { background-position: 0 264px; padding-top: 432px; } 70.83333% { background-position: 0 288px; padding-top: 456px; } 75% { background-position: 0 312px; padding-top: 480px; } 79.16667% { background-position: 0 336px; padding-top: 504px; } 83.33333% { background-position: 0 360px; padding-top: 528px; } 87.5% { background-position: 0 384px; padding-top: 552px; } 91.66667% { background-position: 0 -168px; padding-top: 0px; } 95.83333% { background-position: 0 -144px; padding-top: 24px; }
}
@-o-keyframes column-17 { 0% { background-position: 0 -120px; padding-top: 48px; } 4.16667% { background-position: 0 -96px; padding-top: 72px; } 8.33333% { background-position: 0 -72px; padding-top: 96px; } 12.5% { background-position: 0 -48px; padding-top: 120px; } 16.66667% { background-position: 0 -24px; padding-top: 144px; } 20.83333% { background-position: 0 0px; padding-top: 168px; } 25% { background-position: 0 24px; padding-top: 192px; } 29.16667% { background-position: 0 48px; padding-top: 216px; } 33.33333% { background-position: 0 72px; padding-top: 240px; } 37.5% { background-position: 0 96px; padding-top: 264px; } 41.66667% { background-position: 0 120px; padding-top: 288px; } 45.83333% { background-position: 0 144px; padding-top: 312px; } 50% { background-position: 0 168px; padding-top: 336px; } 54.16667% { background-position: 0 192px; padding-top: 360px; } 58.33333% { background-position: 0 216px; padding-top: 384px; } 62.5% { background-position: 0 240px; padding-top: 408px; } 66.66667% { background-position: 0 264px; padding-top: 432px; } 70.83333% { background-position: 0 288px; padding-top: 456px; } 75% { background-position: 0 312px; padding-top: 480px; } 79.16667% { background-position: 0 336px; padding-top: 504px; } 83.33333% { background-position: 0 360px; padding-top: 528px; } 87.5% { background-position: 0 384px; padding-top: 552px; } 91.66667% { background-position: 0 -168px; padding-top: 0px; } 95.83333% { background-position: 0 -144px; padding-top: 24px; }
}
@keyframes column-17 { 0% { background-position: 0 -120px; padding-top: 48px; } 4.16667% { background-position: 0 -96px; padding-top: 72px; } 8.33333% { background-position: 0 -72px; padding-top: 96px; } 12.5% { background-position: 0 -48px; padding-top: 120px; } 16.66667% { background-position: 0 -24px; padding-top: 144px; } 20.83333% { background-position: 0 0px; padding-top: 168px; } 25% { background-position: 0 24px; padding-top: 192px; } 29.16667% { background-position: 0 48px; padding-top: 216px; } 33.33333% { background-position: 0 72px; padding-top: 240px; } 37.5% { background-position: 0 96px; padding-top: 264px; } 41.66667% { background-position: 0 120px; padding-top: 288px; } 45.83333% { background-position: 0 144px; padding-top: 312px; } 50% { background-position: 0 168px; padding-top: 336px; } 54.16667% { background-position: 0 192px; padding-top: 360px; } 58.33333% { background-position: 0 216px; padding-top: 384px; } 62.5% { background-position: 0 240px; padding-top: 408px; } 66.66667% { background-position: 0 264px; padding-top: 432px; } 70.83333% { background-position: 0 288px; padding-top: 456px; } 75% { background-position: 0 312px; padding-top: 480px; } 79.16667% { background-position: 0 336px; padding-top: 504px; } 83.33333% { background-position: 0 360px; padding-top: 528px; } 87.5% { background-position: 0 384px; padding-top: 552px; } 91.66667% { background-position: 0 -168px; padding-top: 0px; } 95.83333% { background-position: 0 -144px; padding-top: 24px; }
}
.matrix li:nth-child(18) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(18):before { display: block; width: 1em; content: "タ た わ ョ タ ワ ソ う ト ク ド ラ ワ マ ラ し た キ ン ョ マ タ キ タ";
}
.matrix li:nth-child(18):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 240px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(29.16667%, rgba(0, 0, 0, 0)), color-stop(29.16667%, #000000), color-stop(100%, #000000)) 0 240px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 240px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 240px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 168px, #000000 168px, #000000 576px) 0 240px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "キ"; padding-top: 408px; overflow: hidden; -webkit-animation: 1920ms column-18 infinite steps(1, start); -moz-animation: 1920ms column-18 infinite steps(1, start); -ms-animation: 1920ms column-18 infinite steps(1, start); -o-animation: 1920ms column-18 infinite steps(1, start); animation: 1920ms column-18 infinite steps(1, start);
}
@-webkit-keyframes column-18 { 0% { background-position: 0 240px; padding-top: 408px; } 4.16667% { background-position: 0 264px; padding-top: 432px; } 8.33333% { background-position: 0 288px; padding-top: 456px; } 12.5% { background-position: 0 312px; padding-top: 480px; } 16.66667% { background-position: 0 336px; padding-top: 504px; } 20.83333% { background-position: 0 360px; padding-top: 528px; } 25% { background-position: 0 384px; padding-top: 552px; } 29.16667% { background-position: 0 -168px; padding-top: 0px; } 33.33333% { background-position: 0 -144px; padding-top: 24px; } 37.5% { background-position: 0 -120px; padding-top: 48px; } 41.66667% { background-position: 0 -96px; padding-top: 72px; } 45.83333% { background-position: 0 -72px; padding-top: 96px; } 50% { background-position: 0 -48px; padding-top: 120px; } 54.16667% { background-position: 0 -24px; padding-top: 144px; } 58.33333% { background-position: 0 0px; padding-top: 168px; } 62.5% { background-position: 0 24px; padding-top: 192px; } 66.66667% { background-position: 0 48px; padding-top: 216px; } 70.83333% { background-position: 0 72px; padding-top: 240px; } 75% { background-position: 0 96px; padding-top: 264px; } 79.16667% { background-position: 0 120px; padding-top: 288px; } 83.33333% { background-position: 0 144px; padding-top: 312px; } 87.5% { background-position: 0 168px; padding-top: 336px; } 91.66667% { background-position: 0 192px; padding-top: 360px; } 95.83333% { background-position: 0 216px; padding-top: 384px; }
}
@-moz-keyframes column-18 { 0% { background-position: 0 240px; padding-top: 408px; } 4.16667% { background-position: 0 264px; padding-top: 432px; } 8.33333% { background-position: 0 288px; padding-top: 456px; } 12.5% { background-position: 0 312px; padding-top: 480px; } 16.66667% { background-position: 0 336px; padding-top: 504px; } 20.83333% { background-position: 0 360px; padding-top: 528px; } 25% { background-position: 0 384px; padding-top: 552px; } 29.16667% { background-position: 0 -168px; padding-top: 0px; } 33.33333% { background-position: 0 -144px; padding-top: 24px; } 37.5% { background-position: 0 -120px; padding-top: 48px; } 41.66667% { background-position: 0 -96px; padding-top: 72px; } 45.83333% { background-position: 0 -72px; padding-top: 96px; } 50% { background-position: 0 -48px; padding-top: 120px; } 54.16667% { background-position: 0 -24px; padding-top: 144px; } 58.33333% { background-position: 0 0px; padding-top: 168px; } 62.5% { background-position: 0 24px; padding-top: 192px; } 66.66667% { background-position: 0 48px; padding-top: 216px; } 70.83333% { background-position: 0 72px; padding-top: 240px; } 75% { background-position: 0 96px; padding-top: 264px; } 79.16667% { background-position: 0 120px; padding-top: 288px; } 83.33333% { background-position: 0 144px; padding-top: 312px; } 87.5% { background-position: 0 168px; padding-top: 336px; } 91.66667% { background-position: 0 192px; padding-top: 360px; } 95.83333% { background-position: 0 216px; padding-top: 384px; }
}
@-o-keyframes column-18 { 0% { background-position: 0 240px; padding-top: 408px; } 4.16667% { background-position: 0 264px; padding-top: 432px; } 8.33333% { background-position: 0 288px; padding-top: 456px; } 12.5% { background-position: 0 312px; padding-top: 480px; } 16.66667% { background-position: 0 336px; padding-top: 504px; } 20.83333% { background-position: 0 360px; padding-top: 528px; } 25% { background-position: 0 384px; padding-top: 552px; } 29.16667% { background-position: 0 -168px; padding-top: 0px; } 33.33333% { background-position: 0 -144px; padding-top: 24px; } 37.5% { background-position: 0 -120px; padding-top: 48px; } 41.66667% { background-position: 0 -96px; padding-top: 72px; } 45.83333% { background-position: 0 -72px; padding-top: 96px; } 50% { background-position: 0 -48px; padding-top: 120px; } 54.16667% { background-position: 0 -24px; padding-top: 144px; } 58.33333% { background-position: 0 0px; padding-top: 168px; } 62.5% { background-position: 0 24px; padding-top: 192px; } 66.66667% { background-position: 0 48px; padding-top: 216px; } 70.83333% { background-position: 0 72px; padding-top: 240px; } 75% { background-position: 0 96px; padding-top: 264px; } 79.16667% { background-position: 0 120px; padding-top: 288px; } 83.33333% { background-position: 0 144px; padding-top: 312px; } 87.5% { background-position: 0 168px; padding-top: 336px; } 91.66667% { background-position: 0 192px; padding-top: 360px; } 95.83333% { background-position: 0 216px; padding-top: 384px; }
}
@keyframes column-18 { 0% { background-position: 0 240px; padding-top: 408px; } 4.16667% { background-position: 0 264px; padding-top: 432px; } 8.33333% { background-position: 0 288px; padding-top: 456px; } 12.5% { background-position: 0 312px; padding-top: 480px; } 16.66667% { background-position: 0 336px; padding-top: 504px; } 20.83333% { background-position: 0 360px; padding-top: 528px; } 25% { background-position: 0 384px; padding-top: 552px; } 29.16667% { background-position: 0 -168px; padding-top: 0px; } 33.33333% { background-position: 0 -144px; padding-top: 24px; } 37.5% { background-position: 0 -120px; padding-top: 48px; } 41.66667% { background-position: 0 -96px; padding-top: 72px; } 45.83333% { background-position: 0 -72px; padding-top: 96px; } 50% { background-position: 0 -48px; padding-top: 120px; } 54.16667% { background-position: 0 -24px; padding-top: 144px; } 58.33333% { background-position: 0 0px; padding-top: 168px; } 62.5% { background-position: 0 24px; padding-top: 192px; } 66.66667% { background-position: 0 48px; padding-top: 216px; } 70.83333% { background-position: 0 72px; padding-top: 240px; } 75% { background-position: 0 96px; padding-top: 264px; } 79.16667% { background-position: 0 120px; padding-top: 288px; } 83.33333% { background-position: 0 144px; padding-top: 312px; } 87.5% { background-position: 0 168px; padding-top: 336px; } 91.66667% { background-position: 0 192px; padding-top: 360px; } 95.83333% { background-position: 0 216px; padding-top: 384px; }
}
.matrix li:nth-child(19) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(19):before { display: block; width: 1em; content: "こ ド リ と コ と わ ク ラ マ こ フ マ マ ん し こ ン ば ば た う ラ ト";
}
.matrix li:nth-child(19):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -192px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(54.16667%, rgba(0, 0, 0, 0)), color-stop(54.16667%, #000000), color-stop(100%, #000000)) 0 -192px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -192px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -192px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -192px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "と"; padding-top: 120px; overflow: hidden; -webkit-animation: 1920ms column-19 infinite steps(1, start); -moz-animation: 1920ms column-19 infinite steps(1, start); -ms-animation: 1920ms column-19 infinite steps(1, start); -o-animation: 1920ms column-19 infinite steps(1, start); animation: 1920ms column-19 infinite steps(1, start);
}
@-webkit-keyframes column-19 { 0% { background-position: 0 -192px; padding-top: 120px; } 4.16667% { background-position: 0 -168px; padding-top: 144px; } 8.33333% { background-position: 0 -144px; padding-top: 168px; } 12.5% { background-position: 0 -120px; padding-top: 192px; } 16.66667% { background-position: 0 -96px; padding-top: 216px; } 20.83333% { background-position: 0 -72px; padding-top: 240px; } 25% { background-position: 0 -48px; padding-top: 264px; } 29.16667% { background-position: 0 -24px; padding-top: 288px; } 33.33333% { background-position: 0 0px; padding-top: 312px; } 37.5% { background-position: 0 24px; padding-top: 336px; } 41.66667% { background-position: 0 48px; padding-top: 360px; } 45.83333% { background-position: 0 72px; padding-top: 384px; } 50% { background-position: 0 96px; padding-top: 408px; } 54.16667% { background-position: 0 120px; padding-top: 432px; } 58.33333% { background-position: 0 144px; padding-top: 456px; } 62.5% { background-position: 0 168px; padding-top: 480px; } 66.66667% { background-position: 0 192px; padding-top: 504px; } 70.83333% { background-position: 0 216px; padding-top: 528px; } 75% { background-position: 0 240px; padding-top: 552px; } 79.16667% { background-position: 0 -312px; padding-top: 0px; } 83.33333% { background-position: 0 -288px; padding-top: 24px; } 87.5% { background-position: 0 -264px; padding-top: 48px; } 91.66667% { background-position: 0 -240px; padding-top: 72px; } 95.83333% { background-position: 0 -216px; padding-top: 96px; }
}
@-moz-keyframes column-19 { 0% { background-position: 0 -192px; padding-top: 120px; } 4.16667% { background-position: 0 -168px; padding-top: 144px; } 8.33333% { background-position: 0 -144px; padding-top: 168px; } 12.5% { background-position: 0 -120px; padding-top: 192px; } 16.66667% { background-position: 0 -96px; padding-top: 216px; } 20.83333% { background-position: 0 -72px; padding-top: 240px; } 25% { background-position: 0 -48px; padding-top: 264px; } 29.16667% { background-position: 0 -24px; padding-top: 288px; } 33.33333% { background-position: 0 0px; padding-top: 312px; } 37.5% { background-position: 0 24px; padding-top: 336px; } 41.66667% { background-position: 0 48px; padding-top: 360px; } 45.83333% { background-position: 0 72px; padding-top: 384px; } 50% { background-position: 0 96px; padding-top: 408px; } 54.16667% { background-position: 0 120px; padding-top: 432px; } 58.33333% { background-position: 0 144px; padding-top: 456px; } 62.5% { background-position: 0 168px; padding-top: 480px; } 66.66667% { background-position: 0 192px; padding-top: 504px; } 70.83333% { background-position: 0 216px; padding-top: 528px; } 75% { background-position: 0 240px; padding-top: 552px; } 79.16667% { background-position: 0 -312px; padding-top: 0px; } 83.33333% { background-position: 0 -288px; padding-top: 24px; } 87.5% { background-position: 0 -264px; padding-top: 48px; } 91.66667% { background-position: 0 -240px; padding-top: 72px; } 95.83333% { background-position: 0 -216px; padding-top: 96px; }
}
@-o-keyframes column-19 { 0% { background-position: 0 -192px; padding-top: 120px; } 4.16667% { background-position: 0 -168px; padding-top: 144px; } 8.33333% { background-position: 0 -144px; padding-top: 168px; } 12.5% { background-position: 0 -120px; padding-top: 192px; } 16.66667% { background-position: 0 -96px; padding-top: 216px; } 20.83333% { background-position: 0 -72px; padding-top: 240px; } 25% { background-position: 0 -48px; padding-top: 264px; } 29.16667% { background-position: 0 -24px; padding-top: 288px; } 33.33333% { background-position: 0 0px; padding-top: 312px; } 37.5% { background-position: 0 24px; padding-top: 336px; } 41.66667% { background-position: 0 48px; padding-top: 360px; } 45.83333% { background-position: 0 72px; padding-top: 384px; } 50% { background-position: 0 96px; padding-top: 408px; } 54.16667% { background-position: 0 120px; padding-top: 432px; } 58.33333% { background-position: 0 144px; padding-top: 456px; } 62.5% { background-position: 0 168px; padding-top: 480px; } 66.66667% { background-position: 0 192px; padding-top: 504px; } 70.83333% { background-position: 0 216px; padding-top: 528px; } 75% { background-position: 0 240px; padding-top: 552px; } 79.16667% { background-position: 0 -312px; padding-top: 0px; } 83.33333% { background-position: 0 -288px; padding-top: 24px; } 87.5% { background-position: 0 -264px; padding-top: 48px; } 91.66667% { background-position: 0 -240px; padding-top: 72px; } 95.83333% { background-position: 0 -216px; padding-top: 96px; }
}
@keyframes column-19 { 0% { background-position: 0 -192px; padding-top: 120px; } 4.16667% { background-position: 0 -168px; padding-top: 144px; } 8.33333% { background-position: 0 -144px; padding-top: 168px; } 12.5% { background-position: 0 -120px; padding-top: 192px; } 16.66667% { background-position: 0 -96px; padding-top: 216px; } 20.83333% { background-position: 0 -72px; padding-top: 240px; } 25% { background-position: 0 -48px; padding-top: 264px; } 29.16667% { background-position: 0 -24px; padding-top: 288px; } 33.33333% { background-position: 0 0px; padding-top: 312px; } 37.5% { background-position: 0 24px; padding-top: 336px; } 41.66667% { background-position: 0 48px; padding-top: 360px; } 45.83333% { background-position: 0 72px; padding-top: 384px; } 50% { background-position: 0 96px; padding-top: 408px; } 54.16667% { background-position: 0 120px; padding-top: 432px; } 58.33333% { background-position: 0 144px; padding-top: 456px; } 62.5% { background-position: 0 168px; padding-top: 480px; } 66.66667% { background-position: 0 192px; padding-top: 504px; } 70.83333% { background-position: 0 216px; padding-top: 528px; } 75% { background-position: 0 240px; padding-top: 552px; } 79.16667% { background-position: 0 -312px; padding-top: 0px; } 83.33333% { background-position: 0 -288px; padding-top: 24px; } 87.5% { background-position: 0 -264px; padding-top: 48px; } 91.66667% { background-position: 0 -240px; padding-top: 72px; } 95.83333% { background-position: 0 -216px; padding-top: 96px; }
}
.matrix li:nth-child(20) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(20):before { display: block; width: 1em; content: "フ ウ う リ フ ョ ク ラ タ ウ ク た ば ョ ウ ト ン キ し う ョ キ ウ シ";
}
.matrix li:nth-child(20):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -288px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(58.33333%, rgba(0, 0, 0, 0)), color-stop(58.33333%, #000000), color-stop(100%, #000000)) 0 -288px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -288px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -288px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -288px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "う"; padding-top: 48px; overflow: hidden; -webkit-animation: 1920ms column-20 infinite steps(1, start); -moz-animation: 1920ms column-20 infinite steps(1, start); -ms-animation: 1920ms column-20 infinite steps(1, start); -o-animation: 1920ms column-20 infinite steps(1, start); animation: 1920ms column-20 infinite steps(1, start);
}
@-webkit-keyframes column-20 { 0% { background-position: 0 -288px; padding-top: 48px; } 4.16667% { background-position: 0 -264px; padding-top: 72px; } 8.33333% { background-position: 0 -240px; padding-top: 96px; } 12.5% { background-position: 0 -216px; padding-top: 120px; } 16.66667% { background-position: 0 -192px; padding-top: 144px; } 20.83333% { background-position: 0 -168px; padding-top: 168px; } 25% { background-position: 0 -144px; padding-top: 192px; } 29.16667% { background-position: 0 -120px; padding-top: 216px; } 33.33333% { background-position: 0 -96px; padding-top: 240px; } 37.5% { background-position: 0 -72px; padding-top: 264px; } 41.66667% { background-position: 0 -48px; padding-top: 288px; } 45.83333% { background-position: 0 -24px; padding-top: 312px; } 50% { background-position: 0 0px; padding-top: 336px; } 54.16667% { background-position: 0 24px; padding-top: 360px; } 58.33333% { background-position: 0 48px; padding-top: 384px; } 62.5% { background-position: 0 72px; padding-top: 408px; } 66.66667% { background-position: 0 96px; padding-top: 432px; } 70.83333% { background-position: 0 120px; padding-top: 456px; } 75% { background-position: 0 144px; padding-top: 480px; } 79.16667% { background-position: 0 168px; padding-top: 504px; } 83.33333% { background-position: 0 192px; padding-top: 528px; } 87.5% { background-position: 0 216px; padding-top: 552px; } 91.66667% { background-position: 0 -336px; padding-top: 0px; } 95.83333% { background-position: 0 -312px; padding-top: 24px; }
}
@-moz-keyframes column-20 { 0% { background-position: 0 -288px; padding-top: 48px; } 4.16667% { background-position: 0 -264px; padding-top: 72px; } 8.33333% { background-position: 0 -240px; padding-top: 96px; } 12.5% { background-position: 0 -216px; padding-top: 120px; } 16.66667% { background-position: 0 -192px; padding-top: 144px; } 20.83333% { background-position: 0 -168px; padding-top: 168px; } 25% { background-position: 0 -144px; padding-top: 192px; } 29.16667% { background-position: 0 -120px; padding-top: 216px; } 33.33333% { background-position: 0 -96px; padding-top: 240px; } 37.5% { background-position: 0 -72px; padding-top: 264px; } 41.66667% { background-position: 0 -48px; padding-top: 288px; } 45.83333% { background-position: 0 -24px; padding-top: 312px; } 50% { background-position: 0 0px; padding-top: 336px; } 54.16667% { background-position: 0 24px; padding-top: 360px; } 58.33333% { background-position: 0 48px; padding-top: 384px; } 62.5% { background-position: 0 72px; padding-top: 408px; } 66.66667% { background-position: 0 96px; padding-top: 432px; } 70.83333% { background-position: 0 120px; padding-top: 456px; } 75% { background-position: 0 144px; padding-top: 480px; } 79.16667% { background-position: 0 168px; padding-top: 504px; } 83.33333% { background-position: 0 192px; padding-top: 528px; } 87.5% { background-position: 0 216px; padding-top: 552px; } 91.66667% { background-position: 0 -336px; padding-top: 0px; } 95.83333% { background-position: 0 -312px; padding-top: 24px; }
}
@-o-keyframes column-20 { 0% { background-position: 0 -288px; padding-top: 48px; } 4.16667% { background-position: 0 -264px; padding-top: 72px; } 8.33333% { background-position: 0 -240px; padding-top: 96px; } 12.5% { background-position: 0 -216px; padding-top: 120px; } 16.66667% { background-position: 0 -192px; padding-top: 144px; } 20.83333% { background-position: 0 -168px; padding-top: 168px; } 25% { background-position: 0 -144px; padding-top: 192px; } 29.16667% { background-position: 0 -120px; padding-top: 216px; } 33.33333% { background-position: 0 -96px; padding-top: 240px; } 37.5% { background-position: 0 -72px; padding-top: 264px; } 41.66667% { background-position: 0 -48px; padding-top: 288px; } 45.83333% { background-position: 0 -24px; padding-top: 312px; } 50% { background-position: 0 0px; padding-top: 336px; } 54.16667% { background-position: 0 24px; padding-top: 360px; } 58.33333% { background-position: 0 48px; padding-top: 384px; } 62.5% { background-position: 0 72px; padding-top: 408px; } 66.66667% { background-position: 0 96px; padding-top: 432px; } 70.83333% { background-position: 0 120px; padding-top: 456px; } 75% { background-position: 0 144px; padding-top: 480px; } 79.16667% { background-position: 0 168px; padding-top: 504px; } 83.33333% { background-position: 0 192px; padding-top: 528px; } 87.5% { background-position: 0 216px; padding-top: 552px; } 91.66667% { background-position: 0 -336px; padding-top: 0px; } 95.83333% { background-position: 0 -312px; padding-top: 24px; }
}
@keyframes column-20 { 0% { background-position: 0 -288px; padding-top: 48px; } 4.16667% { background-position: 0 -264px; padding-top: 72px; } 8.33333% { background-position: 0 -240px; padding-top: 96px; } 12.5% { background-position: 0 -216px; padding-top: 120px; } 16.66667% { background-position: 0 -192px; padding-top: 144px; } 20.83333% { background-position: 0 -168px; padding-top: 168px; } 25% { background-position: 0 -144px; padding-top: 192px; } 29.16667% { background-position: 0 -120px; padding-top: 216px; } 33.33333% { background-position: 0 -96px; padding-top: 240px; } 37.5% { background-position: 0 -72px; padding-top: 264px; } 41.66667% { background-position: 0 -48px; padding-top: 288px; } 45.83333% { background-position: 0 -24px; padding-top: 312px; } 50% { background-position: 0 0px; padding-top: 336px; } 54.16667% { background-position: 0 24px; padding-top: 360px; } 58.33333% { background-position: 0 48px; padding-top: 384px; } 62.5% { background-position: 0 72px; padding-top: 408px; } 66.66667% { background-position: 0 96px; padding-top: 432px; } 70.83333% { background-position: 0 120px; padding-top: 456px; } 75% { background-position: 0 144px; padding-top: 480px; } 79.16667% { background-position: 0 168px; padding-top: 504px; } 83.33333% { background-position: 0 192px; padding-top: 528px; } 87.5% { background-position: 0 216px; padding-top: 552px; } 91.66667% { background-position: 0 -336px; padding-top: 0px; } 95.83333% { background-position: 0 -312px; padding-top: 24px; }
}
.matrix li:nth-child(21) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(21):before { display: block; width: 1em; content: "ョ ョ ょ う ワ ン き ド コ ン タ タ う ょ シ ク し た ョ タ き ょ ょ ョ";
}
.matrix li:nth-child(21):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -240px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(58.33333%, rgba(0, 0, 0, 0)), color-stop(58.33333%, #000000), color-stop(100%, #000000)) 0 -240px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -240px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -240px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -240px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ワ"; padding-top: 96px; overflow: hidden; -webkit-animation: 1920ms column-21 infinite steps(1, start); -moz-animation: 1920ms column-21 infinite steps(1, start); -ms-animation: 1920ms column-21 infinite steps(1, start); -o-animation: 1920ms column-21 infinite steps(1, start); animation: 1920ms column-21 infinite steps(1, start);
}
@-webkit-keyframes column-21 { 0% { background-position: 0 -240px; padding-top: 96px; } 4.16667% { background-position: 0 -216px; padding-top: 120px; } 8.33333% { background-position: 0 -192px; padding-top: 144px; } 12.5% { background-position: 0 -168px; padding-top: 168px; } 16.66667% { background-position: 0 -144px; padding-top: 192px; } 20.83333% { background-position: 0 -120px; padding-top: 216px; } 25% { background-position: 0 -96px; padding-top: 240px; } 29.16667% { background-position: 0 -72px; padding-top: 264px; } 33.33333% { background-position: 0 -48px; padding-top: 288px; } 37.5% { background-position: 0 -24px; padding-top: 312px; } 41.66667% { background-position: 0 0px; padding-top: 336px; } 45.83333% { background-position: 0 24px; padding-top: 360px; } 50% { background-position: 0 48px; padding-top: 384px; } 54.16667% { background-position: 0 72px; padding-top: 408px; } 58.33333% { background-position: 0 96px; padding-top: 432px; } 62.5% { background-position: 0 120px; padding-top: 456px; } 66.66667% { background-position: 0 144px; padding-top: 480px; } 70.83333% { background-position: 0 168px; padding-top: 504px; } 75% { background-position: 0 192px; padding-top: 528px; } 79.16667% { background-position: 0 216px; padding-top: 552px; } 83.33333% { background-position: 0 -336px; padding-top: 0px; } 87.5% { background-position: 0 -312px; padding-top: 24px; } 91.66667% { background-position: 0 -288px; padding-top: 48px; } 95.83333% { background-position: 0 -264px; padding-top: 72px; }
}
@-moz-keyframes column-21 { 0% { background-position: 0 -240px; padding-top: 96px; } 4.16667% { background-position: 0 -216px; padding-top: 120px; } 8.33333% { background-position: 0 -192px; padding-top: 144px; } 12.5% { background-position: 0 -168px; padding-top: 168px; } 16.66667% { background-position: 0 -144px; padding-top: 192px; } 20.83333% { background-position: 0 -120px; padding-top: 216px; } 25% { background-position: 0 -96px; padding-top: 240px; } 29.16667% { background-position: 0 -72px; padding-top: 264px; } 33.33333% { background-position: 0 -48px; padding-top: 288px; } 37.5% { background-position: 0 -24px; padding-top: 312px; } 41.66667% { background-position: 0 0px; padding-top: 336px; } 45.83333% { background-position: 0 24px; padding-top: 360px; } 50% { background-position: 0 48px; padding-top: 384px; } 54.16667% { background-position: 0 72px; padding-top: 408px; } 58.33333% { background-position: 0 96px; padding-top: 432px; } 62.5% { background-position: 0 120px; padding-top: 456px; } 66.66667% { background-position: 0 144px; padding-top: 480px; } 70.83333% { background-position: 0 168px; padding-top: 504px; } 75% { background-position: 0 192px; padding-top: 528px; } 79.16667% { background-position: 0 216px; padding-top: 552px; } 83.33333% { background-position: 0 -336px; padding-top: 0px; } 87.5% { background-position: 0 -312px; padding-top: 24px; } 91.66667% { background-position: 0 -288px; padding-top: 48px; } 95.83333% { background-position: 0 -264px; padding-top: 72px; }
}
@-o-keyframes column-21 { 0% { background-position: 0 -240px; padding-top: 96px; } 4.16667% { background-position: 0 -216px; padding-top: 120px; } 8.33333% { background-position: 0 -192px; padding-top: 144px; } 12.5% { background-position: 0 -168px; padding-top: 168px; } 16.66667% { background-position: 0 -144px; padding-top: 192px; } 20.83333% { background-position: 0 -120px; padding-top: 216px; } 25% { background-position: 0 -96px; padding-top: 240px; } 29.16667% { background-position: 0 -72px; padding-top: 264px; } 33.33333% { background-position: 0 -48px; padding-top: 288px; } 37.5% { background-position: 0 -24px; padding-top: 312px; } 41.66667% { background-position: 0 0px; padding-top: 336px; } 45.83333% { background-position: 0 24px; padding-top: 360px; } 50% { background-position: 0 48px; padding-top: 384px; } 54.16667% { background-position: 0 72px; padding-top: 408px; } 58.33333% { background-position: 0 96px; padding-top: 432px; } 62.5% { background-position: 0 120px; padding-top: 456px; } 66.66667% { background-position: 0 144px; padding-top: 480px; } 70.83333% { background-position: 0 168px; padding-top: 504px; } 75% { background-position: 0 192px; padding-top: 528px; } 79.16667% { background-position: 0 216px; padding-top: 552px; } 83.33333% { background-position: 0 -336px; padding-top: 0px; } 87.5% { background-position: 0 -312px; padding-top: 24px; } 91.66667% { background-position: 0 -288px; padding-top: 48px; } 95.83333% { background-position: 0 -264px; padding-top: 72px; }
}
@keyframes column-21 { 0% { background-position: 0 -240px; padding-top: 96px; } 4.16667% { background-position: 0 -216px; padding-top: 120px; } 8.33333% { background-position: 0 -192px; padding-top: 144px; } 12.5% { background-position: 0 -168px; padding-top: 168px; } 16.66667% { background-position: 0 -144px; padding-top: 192px; } 20.83333% { background-position: 0 -120px; padding-top: 216px; } 25% { background-position: 0 -96px; padding-top: 240px; } 29.16667% { background-position: 0 -72px; padding-top: 264px; } 33.33333% { background-position: 0 -48px; padding-top: 288px; } 37.5% { background-position: 0 -24px; padding-top: 312px; } 41.66667% { background-position: 0 0px; padding-top: 336px; } 45.83333% { background-position: 0 24px; padding-top: 360px; } 50% { background-position: 0 48px; padding-top: 384px; } 54.16667% { background-position: 0 72px; padding-top: 408px; } 58.33333% { background-position: 0 96px; padding-top: 432px; } 62.5% { background-position: 0 120px; padding-top: 456px; } 66.66667% { background-position: 0 144px; padding-top: 480px; } 70.83333% { background-position: 0 168px; padding-top: 504px; } 75% { background-position: 0 192px; padding-top: 528px; } 79.16667% { background-position: 0 216px; padding-top: 552px; } 83.33333% { background-position: 0 -336px; padding-top: 0px; } 87.5% { background-position: 0 -312px; padding-top: 24px; } 91.66667% { background-position: 0 -288px; padding-top: 48px; } 95.83333% { background-position: 0 -264px; padding-top: 72px; }
}
.matrix li:nth-child(22) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(22):before { display: block; width: 1em; content: "ョ ン こ わ こ ソ ョ ン ト マ フ う ク と マ ラ ン フ う フ ょ リ ょ ば";
}
.matrix li:nth-child(22):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -192px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(41.66667%, rgba(0, 0, 0, 0)), color-stop(41.66667%, #000000), color-stop(100%, #000000)) 0 -192px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -192px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -192px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 -192px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "こ"; padding-top: 48px; overflow: hidden; -webkit-animation: 1920ms column-22 infinite steps(1, start); -moz-animation: 1920ms column-22 infinite steps(1, start); -ms-animation: 1920ms column-22 infinite steps(1, start); -o-animation: 1920ms column-22 infinite steps(1, start); animation: 1920ms column-22 infinite steps(1, start);
}
@-webkit-keyframes column-22 { 0% { background-position: 0 -192px; padding-top: 48px; } 4.16667% { background-position: 0 -168px; padding-top: 72px; } 8.33333% { background-position: 0 -144px; padding-top: 96px; } 12.5% { background-position: 0 -120px; padding-top: 120px; } 16.66667% { background-position: 0 -96px; padding-top: 144px; } 20.83333% { background-position: 0 -72px; padding-top: 168px; } 25% { background-position: 0 -48px; padding-top: 192px; } 29.16667% { background-position: 0 -24px; padding-top: 216px; } 33.33333% { background-position: 0 0px; padding-top: 240px; } 37.5% { background-position: 0 24px; padding-top: 264px; } 41.66667% { background-position: 0 48px; padding-top: 288px; } 45.83333% { background-position: 0 72px; padding-top: 312px; } 50% { background-position: 0 96px; padding-top: 336px; } 54.16667% { background-position: 0 120px; padding-top: 360px; } 58.33333% { background-position: 0 144px; padding-top: 384px; } 62.5% { background-position: 0 168px; padding-top: 408px; } 66.66667% { background-position: 0 192px; padding-top: 432px; } 70.83333% { background-position: 0 216px; padding-top: 456px; } 75% { background-position: 0 240px; padding-top: 480px; } 79.16667% { background-position: 0 264px; padding-top: 504px; } 83.33333% { background-position: 0 288px; padding-top: 528px; } 87.5% { background-position: 0 312px; padding-top: 552px; } 91.66667% { background-position: 0 -240px; padding-top: 0px; } 95.83333% { background-position: 0 -216px; padding-top: 24px; }
}
@-moz-keyframes column-22 { 0% { background-position: 0 -192px; padding-top: 48px; } 4.16667% { background-position: 0 -168px; padding-top: 72px; } 8.33333% { background-position: 0 -144px; padding-top: 96px; } 12.5% { background-position: 0 -120px; padding-top: 120px; } 16.66667% { background-position: 0 -96px; padding-top: 144px; } 20.83333% { background-position: 0 -72px; padding-top: 168px; } 25% { background-position: 0 -48px; padding-top: 192px; } 29.16667% { background-position: 0 -24px; padding-top: 216px; } 33.33333% { background-position: 0 0px; padding-top: 240px; } 37.5% { background-position: 0 24px; padding-top: 264px; } 41.66667% { background-position: 0 48px; padding-top: 288px; } 45.83333% { background-position: 0 72px; padding-top: 312px; } 50% { background-position: 0 96px; padding-top: 336px; } 54.16667% { background-position: 0 120px; padding-top: 360px; } 58.33333% { background-position: 0 144px; padding-top: 384px; } 62.5% { background-position: 0 168px; padding-top: 408px; } 66.66667% { background-position: 0 192px; padding-top: 432px; } 70.83333% { background-position: 0 216px; padding-top: 456px; } 75% { background-position: 0 240px; padding-top: 480px; } 79.16667% { background-position: 0 264px; padding-top: 504px; } 83.33333% { background-position: 0 288px; padding-top: 528px; } 87.5% { background-position: 0 312px; padding-top: 552px; } 91.66667% { background-position: 0 -240px; padding-top: 0px; } 95.83333% { background-position: 0 -216px; padding-top: 24px; }
}
@-o-keyframes column-22 { 0% { background-position: 0 -192px; padding-top: 48px; } 4.16667% { background-position: 0 -168px; padding-top: 72px; } 8.33333% { background-position: 0 -144px; padding-top: 96px; } 12.5% { background-position: 0 -120px; padding-top: 120px; } 16.66667% { background-position: 0 -96px; padding-top: 144px; } 20.83333% { background-position: 0 -72px; padding-top: 168px; } 25% { background-position: 0 -48px; padding-top: 192px; } 29.16667% { background-position: 0 -24px; padding-top: 216px; } 33.33333% { background-position: 0 0px; padding-top: 240px; } 37.5% { background-position: 0 24px; padding-top: 264px; } 41.66667% { background-position: 0 48px; padding-top: 288px; } 45.83333% { background-position: 0 72px; padding-top: 312px; } 50% { background-position: 0 96px; padding-top: 336px; } 54.16667% { background-position: 0 120px; padding-top: 360px; } 58.33333% { background-position: 0 144px; padding-top: 384px; } 62.5% { background-position: 0 168px; padding-top: 408px; } 66.66667% { background-position: 0 192px; padding-top: 432px; } 70.83333% { background-position: 0 216px; padding-top: 456px; } 75% { background-position: 0 240px; padding-top: 480px; } 79.16667% { background-position: 0 264px; padding-top: 504px; } 83.33333% { background-position: 0 288px; padding-top: 528px; } 87.5% { background-position: 0 312px; padding-top: 552px; } 91.66667% { background-position: 0 -240px; padding-top: 0px; } 95.83333% { background-position: 0 -216px; padding-top: 24px; }
}
@keyframes column-22 { 0% { background-position: 0 -192px; padding-top: 48px; } 4.16667% { background-position: 0 -168px; padding-top: 72px; } 8.33333% { background-position: 0 -144px; padding-top: 96px; } 12.5% { background-position: 0 -120px; padding-top: 120px; } 16.66667% { background-position: 0 -96px; padding-top: 144px; } 20.83333% { background-position: 0 -72px; padding-top: 168px; } 25% { background-position: 0 -48px; padding-top: 192px; } 29.16667% { background-position: 0 -24px; padding-top: 216px; } 33.33333% { background-position: 0 0px; padding-top: 240px; } 37.5% { background-position: 0 24px; padding-top: 264px; } 41.66667% { background-position: 0 48px; padding-top: 288px; } 45.83333% { background-position: 0 72px; padding-top: 312px; } 50% { background-position: 0 96px; padding-top: 336px; } 54.16667% { background-position: 0 120px; padding-top: 360px; } 58.33333% { background-position: 0 144px; padding-top: 384px; } 62.5% { background-position: 0 168px; padding-top: 408px; } 66.66667% { background-position: 0 192px; padding-top: 432px; } 70.83333% { background-position: 0 216px; padding-top: 456px; } 75% { background-position: 0 240px; padding-top: 480px; } 79.16667% { background-position: 0 264px; padding-top: 504px; } 83.33333% { background-position: 0 288px; padding-top: 528px; } 87.5% { background-position: 0 312px; padding-top: 552px; } 91.66667% { background-position: 0 -240px; padding-top: 0px; } 95.83333% { background-position: 0 -216px; padding-top: 24px; }
}
.matrix li:nth-child(23) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(23):before { display: block; width: 1em; content: "リ ソ バ た シ ん ン タ ラ ク ン こ タ ョ ラ と シ バ う コ ョ し リ バ";
}
.matrix li:nth-child(23):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMzcuNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIzNy41JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 240px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(37.5%, rgba(0, 0, 0, 0)), color-stop(37.5%, #000000), color-stop(100%, #000000)) 0 240px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 216px, #000000 216px, #000000 576px) 0 240px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 216px, #000000 216px, #000000 576px) 0 240px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 216px, #000000 216px, #000000 576px) 0 240px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "コ"; padding-top: 456px; overflow: hidden; -webkit-animation: 1920ms column-23 infinite steps(1, start); -moz-animation: 1920ms column-23 infinite steps(1, start); -ms-animation: 1920ms column-23 infinite steps(1, start); -o-animation: 1920ms column-23 infinite steps(1, start); animation: 1920ms column-23 infinite steps(1, start);
}
@-webkit-keyframes column-23 { 0% { background-position: 0 240px; padding-top: 456px; } 4.16667% { background-position: 0 264px; padding-top: 480px; } 8.33333% { background-position: 0 288px; padding-top: 504px; } 12.5% { background-position: 0 312px; padding-top: 528px; } 16.66667% { background-position: 0 336px; padding-top: 552px; } 20.83333% { background-position: 0 -216px; padding-top: 0px; } 25% { background-position: 0 -192px; padding-top: 24px; } 29.16667% { background-position: 0 -168px; padding-top: 48px; } 33.33333% { background-position: 0 -144px; padding-top: 72px; } 37.5% { background-position: 0 -120px; padding-top: 96px; } 41.66667% { background-position: 0 -96px; padding-top: 120px; } 45.83333% { background-position: 0 -72px; padding-top: 144px; } 50% { background-position: 0 -48px; padding-top: 168px; } 54.16667% { background-position: 0 -24px; padding-top: 192px; } 58.33333% { background-position: 0 0px; padding-top: 216px; } 62.5% { background-position: 0 24px; padding-top: 240px; } 66.66667% { background-position: 0 48px; padding-top: 264px; } 70.83333% { background-position: 0 72px; padding-top: 288px; } 75% { background-position: 0 96px; padding-top: 312px; } 79.16667% { background-position: 0 120px; padding-top: 336px; } 83.33333% { background-position: 0 144px; padding-top: 360px; } 87.5% { background-position: 0 168px; padding-top: 384px; } 91.66667% { background-position: 0 192px; padding-top: 408px; } 95.83333% { background-position: 0 216px; padding-top: 432px; }
}
@-moz-keyframes column-23 { 0% { background-position: 0 240px; padding-top: 456px; } 4.16667% { background-position: 0 264px; padding-top: 480px; } 8.33333% { background-position: 0 288px; padding-top: 504px; } 12.5% { background-position: 0 312px; padding-top: 528px; } 16.66667% { background-position: 0 336px; padding-top: 552px; } 20.83333% { background-position: 0 -216px; padding-top: 0px; } 25% { background-position: 0 -192px; padding-top: 24px; } 29.16667% { background-position: 0 -168px; padding-top: 48px; } 33.33333% { background-position: 0 -144px; padding-top: 72px; } 37.5% { background-position: 0 -120px; padding-top: 96px; } 41.66667% { background-position: 0 -96px; padding-top: 120px; } 45.83333% { background-position: 0 -72px; padding-top: 144px; } 50% { background-position: 0 -48px; padding-top: 168px; } 54.16667% { background-position: 0 -24px; padding-top: 192px; } 58.33333% { background-position: 0 0px; padding-top: 216px; } 62.5% { background-position: 0 24px; padding-top: 240px; } 66.66667% { background-position: 0 48px; padding-top: 264px; } 70.83333% { background-position: 0 72px; padding-top: 288px; } 75% { background-position: 0 96px; padding-top: 312px; } 79.16667% { background-position: 0 120px; padding-top: 336px; } 83.33333% { background-position: 0 144px; padding-top: 360px; } 87.5% { background-position: 0 168px; padding-top: 384px; } 91.66667% { background-position: 0 192px; padding-top: 408px; } 95.83333% { background-position: 0 216px; padding-top: 432px; }
}
@-o-keyframes column-23 { 0% { background-position: 0 240px; padding-top: 456px; } 4.16667% { background-position: 0 264px; padding-top: 480px; } 8.33333% { background-position: 0 288px; padding-top: 504px; } 12.5% { background-position: 0 312px; padding-top: 528px; } 16.66667% { background-position: 0 336px; padding-top: 552px; } 20.83333% { background-position: 0 -216px; padding-top: 0px; } 25% { background-position: 0 -192px; padding-top: 24px; } 29.16667% { background-position: 0 -168px; padding-top: 48px; } 33.33333% { background-position: 0 -144px; padding-top: 72px; } 37.5% { background-position: 0 -120px; padding-top: 96px; } 41.66667% { background-position: 0 -96px; padding-top: 120px; } 45.83333% { background-position: 0 -72px; padding-top: 144px; } 50% { background-position: 0 -48px; padding-top: 168px; } 54.16667% { background-position: 0 -24px; padding-top: 192px; } 58.33333% { background-position: 0 0px; padding-top: 216px; } 62.5% { background-position: 0 24px; padding-top: 240px; } 66.66667% { background-position: 0 48px; padding-top: 264px; } 70.83333% { background-position: 0 72px; padding-top: 288px; } 75% { background-position: 0 96px; padding-top: 312px; } 79.16667% { background-position: 0 120px; padding-top: 336px; } 83.33333% { background-position: 0 144px; padding-top: 360px; } 87.5% { background-position: 0 168px; padding-top: 384px; } 91.66667% { background-position: 0 192px; padding-top: 408px; } 95.83333% { background-position: 0 216px; padding-top: 432px; }
}
@keyframes column-23 { 0% { background-position: 0 240px; padding-top: 456px; } 4.16667% { background-position: 0 264px; padding-top: 480px; } 8.33333% { background-position: 0 288px; padding-top: 504px; } 12.5% { background-position: 0 312px; padding-top: 528px; } 16.66667% { background-position: 0 336px; padding-top: 552px; } 20.83333% { background-position: 0 -216px; padding-top: 0px; } 25% { background-position: 0 -192px; padding-top: 24px; } 29.16667% { background-position: 0 -168px; padding-top: 48px; } 33.33333% { background-position: 0 -144px; padding-top: 72px; } 37.5% { background-position: 0 -120px; padding-top: 96px; } 41.66667% { background-position: 0 -96px; padding-top: 120px; } 45.83333% { background-position: 0 -72px; padding-top: 144px; } 50% { background-position: 0 -48px; padding-top: 168px; } 54.16667% { background-position: 0 -24px; padding-top: 192px; } 58.33333% { background-position: 0 0px; padding-top: 216px; } 62.5% { background-position: 0 24px; padding-top: 240px; } 66.66667% { background-position: 0 48px; padding-top: 264px; } 70.83333% { background-position: 0 72px; padding-top: 288px; } 75% { background-position: 0 96px; padding-top: 312px; } 79.16667% { background-position: 0 120px; padding-top: 336px; } 83.33333% { background-position: 0 144px; padding-top: 360px; } 87.5% { background-position: 0 168px; padding-top: 384px; } 91.66667% { background-position: 0 192px; padding-top: 408px; } 95.83333% { background-position: 0 216px; padding-top: 432px; }
}
.matrix li:nth-child(24) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(24):before { display: block; width: 1em; content: "う シ ン ん バ タ ド ラ ク う と ょ う ソ キ ワ ド キ ラ ん タ ょ う シ";
}
.matrix li:nth-child(24):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 264px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(33.33333%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #000000), color-stop(100%, #000000)) 0 264px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 192px, #000000 192px, #000000 576px) 0 264px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 192px, #000000 192px, #000000 576px) 0 264px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 192px, #000000 192px, #000000 576px) 0 264px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ん"; padding-top: 456px; overflow: hidden; -webkit-animation: 1920ms column-24 infinite steps(1, start); -moz-animation: 1920ms column-24 infinite steps(1, start); -ms-animation: 1920ms column-24 infinite steps(1, start); -o-animation: 1920ms column-24 infinite steps(1, start); animation: 1920ms column-24 infinite steps(1, start);
}
@-webkit-keyframes column-24 { 0% { background-position: 0 264px; padding-top: 456px; } 4.16667% { background-position: 0 288px; padding-top: 480px; } 8.33333% { background-position: 0 312px; padding-top: 504px; } 12.5% { background-position: 0 336px; padding-top: 528px; } 16.66667% { background-position: 0 360px; padding-top: 552px; } 20.83333% { background-position: 0 -192px; padding-top: 0px; } 25% { background-position: 0 -168px; padding-top: 24px; } 29.16667% { background-position: 0 -144px; padding-top: 48px; } 33.33333% { background-position: 0 -120px; padding-top: 72px; } 37.5% { background-position: 0 -96px; padding-top: 96px; } 41.66667% { background-position: 0 -72px; padding-top: 120px; } 45.83333% { background-position: 0 -48px; padding-top: 144px; } 50% { background-position: 0 -24px; padding-top: 168px; } 54.16667% { background-position: 0 0px; padding-top: 192px; } 58.33333% { background-position: 0 24px; padding-top: 216px; } 62.5% { background-position: 0 48px; padding-top: 240px; } 66.66667% { background-position: 0 72px; padding-top: 264px; } 70.83333% { background-position: 0 96px; padding-top: 288px; } 75% { background-position: 0 120px; padding-top: 312px; } 79.16667% { background-position: 0 144px; padding-top: 336px; } 83.33333% { background-position: 0 168px; padding-top: 360px; } 87.5% { background-position: 0 192px; padding-top: 384px; } 91.66667% { background-position: 0 216px; padding-top: 408px; } 95.83333% { background-position: 0 240px; padding-top: 432px; }
}
@-moz-keyframes column-24 { 0% { background-position: 0 264px; padding-top: 456px; } 4.16667% { background-position: 0 288px; padding-top: 480px; } 8.33333% { background-position: 0 312px; padding-top: 504px; } 12.5% { background-position: 0 336px; padding-top: 528px; } 16.66667% { background-position: 0 360px; padding-top: 552px; } 20.83333% { background-position: 0 -192px; padding-top: 0px; } 25% { background-position: 0 -168px; padding-top: 24px; } 29.16667% { background-position: 0 -144px; padding-top: 48px; } 33.33333% { background-position: 0 -120px; padding-top: 72px; } 37.5% { background-position: 0 -96px; padding-top: 96px; } 41.66667% { background-position: 0 -72px; padding-top: 120px; } 45.83333% { background-position: 0 -48px; padding-top: 144px; } 50% { background-position: 0 -24px; padding-top: 168px; } 54.16667% { background-position: 0 0px; padding-top: 192px; } 58.33333% { background-position: 0 24px; padding-top: 216px; } 62.5% { background-position: 0 48px; padding-top: 240px; } 66.66667% { background-position: 0 72px; padding-top: 264px; } 70.83333% { background-position: 0 96px; padding-top: 288px; } 75% { background-position: 0 120px; padding-top: 312px; } 79.16667% { background-position: 0 144px; padding-top: 336px; } 83.33333% { background-position: 0 168px; padding-top: 360px; } 87.5% { background-position: 0 192px; padding-top: 384px; } 91.66667% { background-position: 0 216px; padding-top: 408px; } 95.83333% { background-position: 0 240px; padding-top: 432px; }
}
@-o-keyframes column-24 { 0% { background-position: 0 264px; padding-top: 456px; } 4.16667% { background-position: 0 288px; padding-top: 480px; } 8.33333% { background-position: 0 312px; padding-top: 504px; } 12.5% { background-position: 0 336px; padding-top: 528px; } 16.66667% { background-position: 0 360px; padding-top: 552px; } 20.83333% { background-position: 0 -192px; padding-top: 0px; } 25% { background-position: 0 -168px; padding-top: 24px; } 29.16667% { background-position: 0 -144px; padding-top: 48px; } 33.33333% { background-position: 0 -120px; padding-top: 72px; } 37.5% { background-position: 0 -96px; padding-top: 96px; } 41.66667% { background-position: 0 -72px; padding-top: 120px; } 45.83333% { background-position: 0 -48px; padding-top: 144px; } 50% { background-position: 0 -24px; padding-top: 168px; } 54.16667% { background-position: 0 0px; padding-top: 192px; } 58.33333% { background-position: 0 24px; padding-top: 216px; } 62.5% { background-position: 0 48px; padding-top: 240px; } 66.66667% { background-position: 0 72px; padding-top: 264px; } 70.83333% { background-position: 0 96px; padding-top: 288px; } 75% { background-position: 0 120px; padding-top: 312px; } 79.16667% { background-position: 0 144px; padding-top: 336px; } 83.33333% { background-position: 0 168px; padding-top: 360px; } 87.5% { background-position: 0 192px; padding-top: 384px; } 91.66667% { background-position: 0 216px; padding-top: 408px; } 95.83333% { background-position: 0 240px; padding-top: 432px; }
}
@keyframes column-24 { 0% { background-position: 0 264px; padding-top: 456px; } 4.16667% { background-position: 0 288px; padding-top: 480px; } 8.33333% { background-position: 0 312px; padding-top: 504px; } 12.5% { background-position: 0 336px; padding-top: 528px; } 16.66667% { background-position: 0 360px; padding-top: 552px; } 20.83333% { background-position: 0 -192px; padding-top: 0px; } 25% { background-position: 0 -168px; padding-top: 24px; } 29.16667% { background-position: 0 -144px; padding-top: 48px; } 33.33333% { background-position: 0 -120px; padding-top: 72px; } 37.5% { background-position: 0 -96px; padding-top: 96px; } 41.66667% { background-position: 0 -72px; padding-top: 120px; } 45.83333% { background-position: 0 -48px; padding-top: 144px; } 50% { background-position: 0 -24px; padding-top: 168px; } 54.16667% { background-position: 0 0px; padding-top: 192px; } 58.33333% { background-position: 0 24px; padding-top: 216px; } 62.5% { background-position: 0 48px; padding-top: 240px; } 66.66667% { background-position: 0 72px; padding-top: 264px; } 70.83333% { background-position: 0 96px; padding-top: 288px; } 75% { background-position: 0 120px; padding-top: 312px; } 79.16667% { background-position: 0 144px; padding-top: 336px; } 83.33333% { background-position: 0 168px; padding-top: 360px; } 87.5% { background-position: 0 192px; padding-top: 384px; } 91.66667% { background-position: 0 216px; padding-top: 408px; } 95.83333% { background-position: 0 240px; padding-top: 432px; }
}
.matrix li:nth-child(25) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(25):before { display: block; width: 1em; content: "ン ょ コ ラ う ワ ト ョ き ラ う ワ ん ョ ョ ョ ば し ば ウ ウ タ し ョ";
}
.matrix li:nth-child(25):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTguMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -312px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(58.33333%, rgba(0, 0, 0, 0)), color-stop(58.33333%, #000000), color-stop(100%, #000000)) 0 -312px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -312px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -312px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 336px, #000000 336px, #000000 576px) 0 -312px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ょ"; padding-top: 24px; overflow: hidden; -webkit-animation: 1920ms column-25 infinite steps(1, start); -moz-animation: 1920ms column-25 infinite steps(1, start); -ms-animation: 1920ms column-25 infinite steps(1, start); -o-animation: 1920ms column-25 infinite steps(1, start); animation: 1920ms column-25 infinite steps(1, start);
}
@-webkit-keyframes column-25 { 0% { background-position: 0 -312px; padding-top: 24px; } 4.16667% { background-position: 0 -288px; padding-top: 48px; } 8.33333% { background-position: 0 -264px; padding-top: 72px; } 12.5% { background-position: 0 -240px; padding-top: 96px; } 16.66667% { background-position: 0 -216px; padding-top: 120px; } 20.83333% { background-position: 0 -192px; padding-top: 144px; } 25% { background-position: 0 -168px; padding-top: 168px; } 29.16667% { background-position: 0 -144px; padding-top: 192px; } 33.33333% { background-position: 0 -120px; padding-top: 216px; } 37.5% { background-position: 0 -96px; padding-top: 240px; } 41.66667% { background-position: 0 -72px; padding-top: 264px; } 45.83333% { background-position: 0 -48px; padding-top: 288px; } 50% { background-position: 0 -24px; padding-top: 312px; } 54.16667% { background-position: 0 0px; padding-top: 336px; } 58.33333% { background-position: 0 24px; padding-top: 360px; } 62.5% { background-position: 0 48px; padding-top: 384px; } 66.66667% { background-position: 0 72px; padding-top: 408px; } 70.83333% { background-position: 0 96px; padding-top: 432px; } 75% { background-position: 0 120px; padding-top: 456px; } 79.16667% { background-position: 0 144px; padding-top: 480px; } 83.33333% { background-position: 0 168px; padding-top: 504px; } 87.5% { background-position: 0 192px; padding-top: 528px; } 91.66667% { background-position: 0 216px; padding-top: 552px; } 95.83333% { background-position: 0 -336px; padding-top: 0px; }
}
@-moz-keyframes column-25 { 0% { background-position: 0 -312px; padding-top: 24px; } 4.16667% { background-position: 0 -288px; padding-top: 48px; } 8.33333% { background-position: 0 -264px; padding-top: 72px; } 12.5% { background-position: 0 -240px; padding-top: 96px; } 16.66667% { background-position: 0 -216px; padding-top: 120px; } 20.83333% { background-position: 0 -192px; padding-top: 144px; } 25% { background-position: 0 -168px; padding-top: 168px; } 29.16667% { background-position: 0 -144px; padding-top: 192px; } 33.33333% { background-position: 0 -120px; padding-top: 216px; } 37.5% { background-position: 0 -96px; padding-top: 240px; } 41.66667% { background-position: 0 -72px; padding-top: 264px; } 45.83333% { background-position: 0 -48px; padding-top: 288px; } 50% { background-position: 0 -24px; padding-top: 312px; } 54.16667% { background-position: 0 0px; padding-top: 336px; } 58.33333% { background-position: 0 24px; padding-top: 360px; } 62.5% { background-position: 0 48px; padding-top: 384px; } 66.66667% { background-position: 0 72px; padding-top: 408px; } 70.83333% { background-position: 0 96px; padding-top: 432px; } 75% { background-position: 0 120px; padding-top: 456px; } 79.16667% { background-position: 0 144px; padding-top: 480px; } 83.33333% { background-position: 0 168px; padding-top: 504px; } 87.5% { background-position: 0 192px; padding-top: 528px; } 91.66667% { background-position: 0 216px; padding-top: 552px; } 95.83333% { background-position: 0 -336px; padding-top: 0px; }
}
@-o-keyframes column-25 { 0% { background-position: 0 -312px; padding-top: 24px; } 4.16667% { background-position: 0 -288px; padding-top: 48px; } 8.33333% { background-position: 0 -264px; padding-top: 72px; } 12.5% { background-position: 0 -240px; padding-top: 96px; } 16.66667% { background-position: 0 -216px; padding-top: 120px; } 20.83333% { background-position: 0 -192px; padding-top: 144px; } 25% { background-position: 0 -168px; padding-top: 168px; } 29.16667% { background-position: 0 -144px; padding-top: 192px; } 33.33333% { background-position: 0 -120px; padding-top: 216px; } 37.5% { background-position: 0 -96px; padding-top: 240px; } 41.66667% { background-position: 0 -72px; padding-top: 264px; } 45.83333% { background-position: 0 -48px; padding-top: 288px; } 50% { background-position: 0 -24px; padding-top: 312px; } 54.16667% { background-position: 0 0px; padding-top: 336px; } 58.33333% { background-position: 0 24px; padding-top: 360px; } 62.5% { background-position: 0 48px; padding-top: 384px; } 66.66667% { background-position: 0 72px; padding-top: 408px; } 70.83333% { background-position: 0 96px; padding-top: 432px; } 75% { background-position: 0 120px; padding-top: 456px; } 79.16667% { background-position: 0 144px; padding-top: 480px; } 83.33333% { background-position: 0 168px; padding-top: 504px; } 87.5% { background-position: 0 192px; padding-top: 528px; } 91.66667% { background-position: 0 216px; padding-top: 552px; } 95.83333% { background-position: 0 -336px; padding-top: 0px; }
}
@keyframes column-25 { 0% { background-position: 0 -312px; padding-top: 24px; } 4.16667% { background-position: 0 -288px; padding-top: 48px; } 8.33333% { background-position: 0 -264px; padding-top: 72px; } 12.5% { background-position: 0 -240px; padding-top: 96px; } 16.66667% { background-position: 0 -216px; padding-top: 120px; } 20.83333% { background-position: 0 -192px; padding-top: 144px; } 25% { background-position: 0 -168px; padding-top: 168px; } 29.16667% { background-position: 0 -144px; padding-top: 192px; } 33.33333% { background-position: 0 -120px; padding-top: 216px; } 37.5% { background-position: 0 -96px; padding-top: 240px; } 41.66667% { background-position: 0 -72px; padding-top: 264px; } 45.83333% { background-position: 0 -48px; padding-top: 288px; } 50% { background-position: 0 -24px; padding-top: 312px; } 54.16667% { background-position: 0 0px; padding-top: 336px; } 58.33333% { background-position: 0 24px; padding-top: 360px; } 62.5% { background-position: 0 48px; padding-top: 384px; } 66.66667% { background-position: 0 72px; padding-top: 408px; } 70.83333% { background-position: 0 96px; padding-top: 432px; } 75% { background-position: 0 120px; padding-top: 456px; } 79.16667% { background-position: 0 144px; padding-top: 480px; } 83.33333% { background-position: 0 168px; padding-top: 504px; } 87.5% { background-position: 0 192px; padding-top: 528px; } 91.66667% { background-position: 0 216px; padding-top: 552px; } 95.83333% { background-position: 0 -336px; padding-top: 0px; }
}
.matrix li:nth-child(26) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(26):before { display: block; width: 1em; content: "キ た フ ト わ ば タ わ リ バ ド ド こ マ ウ リ コ ド ょ リ う マ シ ン";
}
.matrix li:nth-child(26):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iOTEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iOTEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -96px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(91.66667%, rgba(0, 0, 0, 0)), color-stop(91.66667%, #000000), color-stop(100%, #000000)) 0 -96px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -96px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -96px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -96px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ょ"; padding-top: 432px; overflow: hidden; -webkit-animation: 1920ms column-26 infinite steps(1, start); -moz-animation: 1920ms column-26 infinite steps(1, start); -ms-animation: 1920ms column-26 infinite steps(1, start); -o-animation: 1920ms column-26 infinite steps(1, start); animation: 1920ms column-26 infinite steps(1, start);
}
@-webkit-keyframes column-26 { 0% { background-position: 0 -96px; padding-top: 432px; } 4.16667% { background-position: 0 -72px; padding-top: 456px; } 8.33333% { background-position: 0 -48px; padding-top: 480px; } 12.5% { background-position: 0 -24px; padding-top: 504px; } 16.66667% { background-position: 0 0px; padding-top: 528px; } 20.83333% { background-position: 0 24px; padding-top: 552px; } 25% { background-position: 0 -528px; padding-top: 0px; } 29.16667% { background-position: 0 -504px; padding-top: 24px; } 33.33333% { background-position: 0 -480px; padding-top: 48px; } 37.5% { background-position: 0 -456px; padding-top: 72px; } 41.66667% { background-position: 0 -432px; padding-top: 96px; } 45.83333% { background-position: 0 -408px; padding-top: 120px; } 50% { background-position: 0 -384px; padding-top: 144px; } 54.16667% { background-position: 0 -360px; padding-top: 168px; } 58.33333% { background-position: 0 -336px; padding-top: 192px; } 62.5% { background-position: 0 -312px; padding-top: 216px; } 66.66667% { background-position: 0 -288px; padding-top: 240px; } 70.83333% { background-position: 0 -264px; padding-top: 264px; } 75% { background-position: 0 -240px; padding-top: 288px; } 79.16667% { background-position: 0 -216px; padding-top: 312px; } 83.33333% { background-position: 0 -192px; padding-top: 336px; } 87.5% { background-position: 0 -168px; padding-top: 360px; } 91.66667% { background-position: 0 -144px; padding-top: 384px; } 95.83333% { background-position: 0 -120px; padding-top: 408px; }
}
@-moz-keyframes column-26 { 0% { background-position: 0 -96px; padding-top: 432px; } 4.16667% { background-position: 0 -72px; padding-top: 456px; } 8.33333% { background-position: 0 -48px; padding-top: 480px; } 12.5% { background-position: 0 -24px; padding-top: 504px; } 16.66667% { background-position: 0 0px; padding-top: 528px; } 20.83333% { background-position: 0 24px; padding-top: 552px; } 25% { background-position: 0 -528px; padding-top: 0px; } 29.16667% { background-position: 0 -504px; padding-top: 24px; } 33.33333% { background-position: 0 -480px; padding-top: 48px; } 37.5% { background-position: 0 -456px; padding-top: 72px; } 41.66667% { background-position: 0 -432px; padding-top: 96px; } 45.83333% { background-position: 0 -408px; padding-top: 120px; } 50% { background-position: 0 -384px; padding-top: 144px; } 54.16667% { background-position: 0 -360px; padding-top: 168px; } 58.33333% { background-position: 0 -336px; padding-top: 192px; } 62.5% { background-position: 0 -312px; padding-top: 216px; } 66.66667% { background-position: 0 -288px; padding-top: 240px; } 70.83333% { background-position: 0 -264px; padding-top: 264px; } 75% { background-position: 0 -240px; padding-top: 288px; } 79.16667% { background-position: 0 -216px; padding-top: 312px; } 83.33333% { background-position: 0 -192px; padding-top: 336px; } 87.5% { background-position: 0 -168px; padding-top: 360px; } 91.66667% { background-position: 0 -144px; padding-top: 384px; } 95.83333% { background-position: 0 -120px; padding-top: 408px; }
}
@-o-keyframes column-26 { 0% { background-position: 0 -96px; padding-top: 432px; } 4.16667% { background-position: 0 -72px; padding-top: 456px; } 8.33333% { background-position: 0 -48px; padding-top: 480px; } 12.5% { background-position: 0 -24px; padding-top: 504px; } 16.66667% { background-position: 0 0px; padding-top: 528px; } 20.83333% { background-position: 0 24px; padding-top: 552px; } 25% { background-position: 0 -528px; padding-top: 0px; } 29.16667% { background-position: 0 -504px; padding-top: 24px; } 33.33333% { background-position: 0 -480px; padding-top: 48px; } 37.5% { background-position: 0 -456px; padding-top: 72px; } 41.66667% { background-position: 0 -432px; padding-top: 96px; } 45.83333% { background-position: 0 -408px; padding-top: 120px; } 50% { background-position: 0 -384px; padding-top: 144px; } 54.16667% { background-position: 0 -360px; padding-top: 168px; } 58.33333% { background-position: 0 -336px; padding-top: 192px; } 62.5% { background-position: 0 -312px; padding-top: 216px; } 66.66667% { background-position: 0 -288px; padding-top: 240px; } 70.83333% { background-position: 0 -264px; padding-top: 264px; } 75% { background-position: 0 -240px; padding-top: 288px; } 79.16667% { background-position: 0 -216px; padding-top: 312px; } 83.33333% { background-position: 0 -192px; padding-top: 336px; } 87.5% { background-position: 0 -168px; padding-top: 360px; } 91.66667% { background-position: 0 -144px; padding-top: 384px; } 95.83333% { background-position: 0 -120px; padding-top: 408px; }
}
@keyframes column-26 { 0% { background-position: 0 -96px; padding-top: 432px; } 4.16667% { background-position: 0 -72px; padding-top: 456px; } 8.33333% { background-position: 0 -48px; padding-top: 480px; } 12.5% { background-position: 0 -24px; padding-top: 504px; } 16.66667% { background-position: 0 0px; padding-top: 528px; } 20.83333% { background-position: 0 24px; padding-top: 552px; } 25% { background-position: 0 -528px; padding-top: 0px; } 29.16667% { background-position: 0 -504px; padding-top: 24px; } 33.33333% { background-position: 0 -480px; padding-top: 48px; } 37.5% { background-position: 0 -456px; padding-top: 72px; } 41.66667% { background-position: 0 -432px; padding-top: 96px; } 45.83333% { background-position: 0 -408px; padding-top: 120px; } 50% { background-position: 0 -384px; padding-top: 144px; } 54.16667% { background-position: 0 -360px; padding-top: 168px; } 58.33333% { background-position: 0 -336px; padding-top: 192px; } 62.5% { background-position: 0 -312px; padding-top: 216px; } 66.66667% { background-position: 0 -288px; padding-top: 240px; } 70.83333% { background-position: 0 -264px; padding-top: 264px; } 75% { background-position: 0 -240px; padding-top: 288px; } 79.16667% { background-position: 0 -216px; padding-top: 312px; } 83.33333% { background-position: 0 -192px; padding-top: 336px; } 87.5% { background-position: 0 -168px; padding-top: 360px; } 91.66667% { background-position: 0 -144px; padding-top: 384px; } 95.83333% { background-position: 0 -120px; padding-top: 408px; }
}
.matrix li:nth-child(27) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(27):before { display: block; width: 1em; content: "ド ラ コ と う ョ タ ト バ シ ウ ウ ワ ン ば フ ウ と フ ン フ ウ わ ん";
}
.matrix li:nth-child(27):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTQuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -168px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(54.16667%, rgba(0, 0, 0, 0)), color-stop(54.16667%, #000000), color-stop(100%, #000000)) 0 -168px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -168px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -168px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 312px, #000000 312px, #000000 576px) 0 -168px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "タ"; padding-top: 144px; overflow: hidden; -webkit-animation: 1920ms column-27 infinite steps(1, start); -moz-animation: 1920ms column-27 infinite steps(1, start); -ms-animation: 1920ms column-27 infinite steps(1, start); -o-animation: 1920ms column-27 infinite steps(1, start); animation: 1920ms column-27 infinite steps(1, start);
}
@-webkit-keyframes column-27 { 0% { background-position: 0 -168px; padding-top: 144px; } 4.16667% { background-position: 0 -144px; padding-top: 168px; } 8.33333% { background-position: 0 -120px; padding-top: 192px; } 12.5% { background-position: 0 -96px; padding-top: 216px; } 16.66667% { background-position: 0 -72px; padding-top: 240px; } 20.83333% { background-position: 0 -48px; padding-top: 264px; } 25% { background-position: 0 -24px; padding-top: 288px; } 29.16667% { background-position: 0 0px; padding-top: 312px; } 33.33333% { background-position: 0 24px; padding-top: 336px; } 37.5% { background-position: 0 48px; padding-top: 360px; } 41.66667% { background-position: 0 72px; padding-top: 384px; } 45.83333% { background-position: 0 96px; padding-top: 408px; } 50% { background-position: 0 120px; padding-top: 432px; } 54.16667% { background-position: 0 144px; padding-top: 456px; } 58.33333% { background-position: 0 168px; padding-top: 480px; } 62.5% { background-position: 0 192px; padding-top: 504px; } 66.66667% { background-position: 0 216px; padding-top: 528px; } 70.83333% { background-position: 0 240px; padding-top: 552px; } 75% { background-position: 0 -312px; padding-top: 0px; } 79.16667% { background-position: 0 -288px; padding-top: 24px; } 83.33333% { background-position: 0 -264px; padding-top: 48px; } 87.5% { background-position: 0 -240px; padding-top: 72px; } 91.66667% { background-position: 0 -216px; padding-top: 96px; } 95.83333% { background-position: 0 -192px; padding-top: 120px; }
}
@-moz-keyframes column-27 { 0% { background-position: 0 -168px; padding-top: 144px; } 4.16667% { background-position: 0 -144px; padding-top: 168px; } 8.33333% { background-position: 0 -120px; padding-top: 192px; } 12.5% { background-position: 0 -96px; padding-top: 216px; } 16.66667% { background-position: 0 -72px; padding-top: 240px; } 20.83333% { background-position: 0 -48px; padding-top: 264px; } 25% { background-position: 0 -24px; padding-top: 288px; } 29.16667% { background-position: 0 0px; padding-top: 312px; } 33.33333% { background-position: 0 24px; padding-top: 336px; } 37.5% { background-position: 0 48px; padding-top: 360px; } 41.66667% { background-position: 0 72px; padding-top: 384px; } 45.83333% { background-position: 0 96px; padding-top: 408px; } 50% { background-position: 0 120px; padding-top: 432px; } 54.16667% { background-position: 0 144px; padding-top: 456px; } 58.33333% { background-position: 0 168px; padding-top: 480px; } 62.5% { background-position: 0 192px; padding-top: 504px; } 66.66667% { background-position: 0 216px; padding-top: 528px; } 70.83333% { background-position: 0 240px; padding-top: 552px; } 75% { background-position: 0 -312px; padding-top: 0px; } 79.16667% { background-position: 0 -288px; padding-top: 24px; } 83.33333% { background-position: 0 -264px; padding-top: 48px; } 87.5% { background-position: 0 -240px; padding-top: 72px; } 91.66667% { background-position: 0 -216px; padding-top: 96px; } 95.83333% { background-position: 0 -192px; padding-top: 120px; }
}
@-o-keyframes column-27 { 0% { background-position: 0 -168px; padding-top: 144px; } 4.16667% { background-position: 0 -144px; padding-top: 168px; } 8.33333% { background-position: 0 -120px; padding-top: 192px; } 12.5% { background-position: 0 -96px; padding-top: 216px; } 16.66667% { background-position: 0 -72px; padding-top: 240px; } 20.83333% { background-position: 0 -48px; padding-top: 264px; } 25% { background-position: 0 -24px; padding-top: 288px; } 29.16667% { background-position: 0 0px; padding-top: 312px; } 33.33333% { background-position: 0 24px; padding-top: 336px; } 37.5% { background-position: 0 48px; padding-top: 360px; } 41.66667% { background-position: 0 72px; padding-top: 384px; } 45.83333% { background-position: 0 96px; padding-top: 408px; } 50% { background-position: 0 120px; padding-top: 432px; } 54.16667% { background-position: 0 144px; padding-top: 456px; } 58.33333% { background-position: 0 168px; padding-top: 480px; } 62.5% { background-position: 0 192px; padding-top: 504px; } 66.66667% { background-position: 0 216px; padding-top: 528px; } 70.83333% { background-position: 0 240px; padding-top: 552px; } 75% { background-position: 0 -312px; padding-top: 0px; } 79.16667% { background-position: 0 -288px; padding-top: 24px; } 83.33333% { background-position: 0 -264px; padding-top: 48px; } 87.5% { background-position: 0 -240px; padding-top: 72px; } 91.66667% { background-position: 0 -216px; padding-top: 96px; } 95.83333% { background-position: 0 -192px; padding-top: 120px; }
}
@keyframes column-27 { 0% { background-position: 0 -168px; padding-top: 144px; } 4.16667% { background-position: 0 -144px; padding-top: 168px; } 8.33333% { background-position: 0 -120px; padding-top: 192px; } 12.5% { background-position: 0 -96px; padding-top: 216px; } 16.66667% { background-position: 0 -72px; padding-top: 240px; } 20.83333% { background-position: 0 -48px; padding-top: 264px; } 25% { background-position: 0 -24px; padding-top: 288px; } 29.16667% { background-position: 0 0px; padding-top: 312px; } 33.33333% { background-position: 0 24px; padding-top: 336px; } 37.5% { background-position: 0 48px; padding-top: 360px; } 41.66667% { background-position: 0 72px; padding-top: 384px; } 45.83333% { background-position: 0 96px; padding-top: 408px; } 50% { background-position: 0 120px; padding-top: 432px; } 54.16667% { background-position: 0 144px; padding-top: 456px; } 58.33333% { background-position: 0 168px; padding-top: 480px; } 62.5% { background-position: 0 192px; padding-top: 504px; } 66.66667% { background-position: 0 216px; padding-top: 528px; } 70.83333% { background-position: 0 240px; padding-top: 552px; } 75% { background-position: 0 -312px; padding-top: 0px; } 79.16667% { background-position: 0 -288px; padding-top: 24px; } 83.33333% { background-position: 0 -264px; padding-top: 48px; } 87.5% { background-position: 0 -240px; padding-top: 72px; } 91.66667% { background-position: 0 -216px; padding-top: 96px; } 95.83333% { background-position: 0 -192px; padding-top: 120px; }
}
.matrix li:nth-child(28) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(28):before { display: block; width: 1em; content: "し バ バ ょ と こ ン シ タ た ソ ん ン こ ョ ば キ ョ う と し と ョ ョ";
}
.matrix li:nth-child(28):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNzkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNzkuMTY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -120px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(79.16667%, rgba(0, 0, 0, 0)), color-stop(79.16667%, #000000), color-stop(100%, #000000)) 0 -120px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 456px, #000000 456px, #000000 576px) 0 -120px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 456px, #000000 456px, #000000 576px) 0 -120px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 456px, #000000 456px, #000000 576px) 0 -120px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ョ"; padding-top: 336px; overflow: hidden; -webkit-animation: 1920ms column-28 infinite steps(1, start); -moz-animation: 1920ms column-28 infinite steps(1, start); -ms-animation: 1920ms column-28 infinite steps(1, start); -o-animation: 1920ms column-28 infinite steps(1, start); animation: 1920ms column-28 infinite steps(1, start);
}
@-webkit-keyframes column-28 { 0% { background-position: 0 -120px; padding-top: 336px; } 4.16667% { background-position: 0 -96px; padding-top: 360px; } 8.33333% { background-position: 0 -72px; padding-top: 384px; } 12.5% { background-position: 0 -48px; padding-top: 408px; } 16.66667% { background-position: 0 -24px; padding-top: 432px; } 20.83333% { background-position: 0 0px; padding-top: 456px; } 25% { background-position: 0 24px; padding-top: 480px; } 29.16667% { background-position: 0 48px; padding-top: 504px; } 33.33333% { background-position: 0 72px; padding-top: 528px; } 37.5% { background-position: 0 96px; padding-top: 552px; } 41.66667% { background-position: 0 -456px; padding-top: 0px; } 45.83333% { background-position: 0 -432px; padding-top: 24px; } 50% { background-position: 0 -408px; padding-top: 48px; } 54.16667% { background-position: 0 -384px; padding-top: 72px; } 58.33333% { background-position: 0 -360px; padding-top: 96px; } 62.5% { background-position: 0 -336px; padding-top: 120px; } 66.66667% { background-position: 0 -312px; padding-top: 144px; } 70.83333% { background-position: 0 -288px; padding-top: 168px; } 75% { background-position: 0 -264px; padding-top: 192px; } 79.16667% { background-position: 0 -240px; padding-top: 216px; } 83.33333% { background-position: 0 -216px; padding-top: 240px; } 87.5% { background-position: 0 -192px; padding-top: 264px; } 91.66667% { background-position: 0 -168px; padding-top: 288px; } 95.83333% { background-position: 0 -144px; padding-top: 312px; }
}
@-moz-keyframes column-28 { 0% { background-position: 0 -120px; padding-top: 336px; } 4.16667% { background-position: 0 -96px; padding-top: 360px; } 8.33333% { background-position: 0 -72px; padding-top: 384px; } 12.5% { background-position: 0 -48px; padding-top: 408px; } 16.66667% { background-position: 0 -24px; padding-top: 432px; } 20.83333% { background-position: 0 0px; padding-top: 456px; } 25% { background-position: 0 24px; padding-top: 480px; } 29.16667% { background-position: 0 48px; padding-top: 504px; } 33.33333% { background-position: 0 72px; padding-top: 528px; } 37.5% { background-position: 0 96px; padding-top: 552px; } 41.66667% { background-position: 0 -456px; padding-top: 0px; } 45.83333% { background-position: 0 -432px; padding-top: 24px; } 50% { background-position: 0 -408px; padding-top: 48px; } 54.16667% { background-position: 0 -384px; padding-top: 72px; } 58.33333% { background-position: 0 -360px; padding-top: 96px; } 62.5% { background-position: 0 -336px; padding-top: 120px; } 66.66667% { background-position: 0 -312px; padding-top: 144px; } 70.83333% { background-position: 0 -288px; padding-top: 168px; } 75% { background-position: 0 -264px; padding-top: 192px; } 79.16667% { background-position: 0 -240px; padding-top: 216px; } 83.33333% { background-position: 0 -216px; padding-top: 240px; } 87.5% { background-position: 0 -192px; padding-top: 264px; } 91.66667% { background-position: 0 -168px; padding-top: 288px; } 95.83333% { background-position: 0 -144px; padding-top: 312px; }
}
@-o-keyframes column-28 { 0% { background-position: 0 -120px; padding-top: 336px; } 4.16667% { background-position: 0 -96px; padding-top: 360px; } 8.33333% { background-position: 0 -72px; padding-top: 384px; } 12.5% { background-position: 0 -48px; padding-top: 408px; } 16.66667% { background-position: 0 -24px; padding-top: 432px; } 20.83333% { background-position: 0 0px; padding-top: 456px; } 25% { background-position: 0 24px; padding-top: 480px; } 29.16667% { background-position: 0 48px; padding-top: 504px; } 33.33333% { background-position: 0 72px; padding-top: 528px; } 37.5% { background-position: 0 96px; padding-top: 552px; } 41.66667% { background-position: 0 -456px; padding-top: 0px; } 45.83333% { background-position: 0 -432px; padding-top: 24px; } 50% { background-position: 0 -408px; padding-top: 48px; } 54.16667% { background-position: 0 -384px; padding-top: 72px; } 58.33333% { background-position: 0 -360px; padding-top: 96px; } 62.5% { background-position: 0 -336px; padding-top: 120px; } 66.66667% { background-position: 0 -312px; padding-top: 144px; } 70.83333% { background-position: 0 -288px; padding-top: 168px; } 75% { background-position: 0 -264px; padding-top: 192px; } 79.16667% { background-position: 0 -240px; padding-top: 216px; } 83.33333% { background-position: 0 -216px; padding-top: 240px; } 87.5% { background-position: 0 -192px; padding-top: 264px; } 91.66667% { background-position: 0 -168px; padding-top: 288px; } 95.83333% { background-position: 0 -144px; padding-top: 312px; }
}
@keyframes column-28 { 0% { background-position: 0 -120px; padding-top: 336px; } 4.16667% { background-position: 0 -96px; padding-top: 360px; } 8.33333% { background-position: 0 -72px; padding-top: 384px; } 12.5% { background-position: 0 -48px; padding-top: 408px; } 16.66667% { background-position: 0 -24px; padding-top: 432px; } 20.83333% { background-position: 0 0px; padding-top: 456px; } 25% { background-position: 0 24px; padding-top: 480px; } 29.16667% { background-position: 0 48px; padding-top: 504px; } 33.33333% { background-position: 0 72px; padding-top: 528px; } 37.5% { background-position: 0 96px; padding-top: 552px; } 41.66667% { background-position: 0 -456px; padding-top: 0px; } 45.83333% { background-position: 0 -432px; padding-top: 24px; } 50% { background-position: 0 -408px; padding-top: 48px; } 54.16667% { background-position: 0 -384px; padding-top: 72px; } 58.33333% { background-position: 0 -360px; padding-top: 96px; } 62.5% { background-position: 0 -336px; padding-top: 120px; } 66.66667% { background-position: 0 -312px; padding-top: 144px; } 70.83333% { background-position: 0 -288px; padding-top: 168px; } 75% { background-position: 0 -264px; padding-top: 192px; } 79.16667% { background-position: 0 -240px; padding-top: 216px; } 83.33333% { background-position: 0 -216px; padding-top: 240px; } 87.5% { background-position: 0 -192px; padding-top: 264px; } 91.66667% { background-position: 0 -168px; padding-top: 288px; } 95.83333% { background-position: 0 -144px; padding-top: 312px; }
}
.matrix li:nth-child(29) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(29):before { display: block; width: 1em; content: "ん マ う た う ト リ タ た ょ う ょ き た キ タ ワ ン マ フ ラ き ク シ";
}
.matrix li:nth-child(29):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNDEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 264px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(41.66667%, rgba(0, 0, 0, 0)), color-stop(41.66667%, #000000), color-stop(100%, #000000)) 0 264px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 264px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 264px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 240px, #000000 240px, #000000 576px) 0 264px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "き"; padding-top: 504px; overflow: hidden; -webkit-animation: 1920ms column-29 infinite steps(1, start); -moz-animation: 1920ms column-29 infinite steps(1, start); -ms-animation: 1920ms column-29 infinite steps(1, start); -o-animation: 1920ms column-29 infinite steps(1, start); animation: 1920ms column-29 infinite steps(1, start);
}
@-webkit-keyframes column-29 { 0% { background-position: 0 264px; padding-top: 504px; } 4.16667% { background-position: 0 288px; padding-top: 528px; } 8.33333% { background-position: 0 312px; padding-top: 552px; } 12.5% { background-position: 0 -240px; padding-top: 0px; } 16.66667% { background-position: 0 -216px; padding-top: 24px; } 20.83333% { background-position: 0 -192px; padding-top: 48px; } 25% { background-position: 0 -168px; padding-top: 72px; } 29.16667% { background-position: 0 -144px; padding-top: 96px; } 33.33333% { background-position: 0 -120px; padding-top: 120px; } 37.5% { background-position: 0 -96px; padding-top: 144px; } 41.66667% { background-position: 0 -72px; padding-top: 168px; } 45.83333% { background-position: 0 -48px; padding-top: 192px; } 50% { background-position: 0 -24px; padding-top: 216px; } 54.16667% { background-position: 0 0px; padding-top: 240px; } 58.33333% { background-position: 0 24px; padding-top: 264px; } 62.5% { background-position: 0 48px; padding-top: 288px; } 66.66667% { background-position: 0 72px; padding-top: 312px; } 70.83333% { background-position: 0 96px; padding-top: 336px; } 75% { background-position: 0 120px; padding-top: 360px; } 79.16667% { background-position: 0 144px; padding-top: 384px; } 83.33333% { background-position: 0 168px; padding-top: 408px; } 87.5% { background-position: 0 192px; padding-top: 432px; } 91.66667% { background-position: 0 216px; padding-top: 456px; } 95.83333% { background-position: 0 240px; padding-top: 480px; }
}
@-moz-keyframes column-29 { 0% { background-position: 0 264px; padding-top: 504px; } 4.16667% { background-position: 0 288px; padding-top: 528px; } 8.33333% { background-position: 0 312px; padding-top: 552px; } 12.5% { background-position: 0 -240px; padding-top: 0px; } 16.66667% { background-position: 0 -216px; padding-top: 24px; } 20.83333% { background-position: 0 -192px; padding-top: 48px; } 25% { background-position: 0 -168px; padding-top: 72px; } 29.16667% { background-position: 0 -144px; padding-top: 96px; } 33.33333% { background-position: 0 -120px; padding-top: 120px; } 37.5% { background-position: 0 -96px; padding-top: 144px; } 41.66667% { background-position: 0 -72px; padding-top: 168px; } 45.83333% { background-position: 0 -48px; padding-top: 192px; } 50% { background-position: 0 -24px; padding-top: 216px; } 54.16667% { background-position: 0 0px; padding-top: 240px; } 58.33333% { background-position: 0 24px; padding-top: 264px; } 62.5% { background-position: 0 48px; padding-top: 288px; } 66.66667% { background-position: 0 72px; padding-top: 312px; } 70.83333% { background-position: 0 96px; padding-top: 336px; } 75% { background-position: 0 120px; padding-top: 360px; } 79.16667% { background-position: 0 144px; padding-top: 384px; } 83.33333% { background-position: 0 168px; padding-top: 408px; } 87.5% { background-position: 0 192px; padding-top: 432px; } 91.66667% { background-position: 0 216px; padding-top: 456px; } 95.83333% { background-position: 0 240px; padding-top: 480px; }
}
@-o-keyframes column-29 { 0% { background-position: 0 264px; padding-top: 504px; } 4.16667% { background-position: 0 288px; padding-top: 528px; } 8.33333% { background-position: 0 312px; padding-top: 552px; } 12.5% { background-position: 0 -240px; padding-top: 0px; } 16.66667% { background-position: 0 -216px; padding-top: 24px; } 20.83333% { background-position: 0 -192px; padding-top: 48px; } 25% { background-position: 0 -168px; padding-top: 72px; } 29.16667% { background-position: 0 -144px; padding-top: 96px; } 33.33333% { background-position: 0 -120px; padding-top: 120px; } 37.5% { background-position: 0 -96px; padding-top: 144px; } 41.66667% { background-position: 0 -72px; padding-top: 168px; } 45.83333% { background-position: 0 -48px; padding-top: 192px; } 50% { background-position: 0 -24px; padding-top: 216px; } 54.16667% { background-position: 0 0px; padding-top: 240px; } 58.33333% { background-position: 0 24px; padding-top: 264px; } 62.5% { background-position: 0 48px; padding-top: 288px; } 66.66667% { background-position: 0 72px; padding-top: 312px; } 70.83333% { background-position: 0 96px; padding-top: 336px; } 75% { background-position: 0 120px; padding-top: 360px; } 79.16667% { background-position: 0 144px; padding-top: 384px; } 83.33333% { background-position: 0 168px; padding-top: 408px; } 87.5% { background-position: 0 192px; padding-top: 432px; } 91.66667% { background-position: 0 216px; padding-top: 456px; } 95.83333% { background-position: 0 240px; padding-top: 480px; }
}
@keyframes column-29 { 0% { background-position: 0 264px; padding-top: 504px; } 4.16667% { background-position: 0 288px; padding-top: 528px; } 8.33333% { background-position: 0 312px; padding-top: 552px; } 12.5% { background-position: 0 -240px; padding-top: 0px; } 16.66667% { background-position: 0 -216px; padding-top: 24px; } 20.83333% { background-position: 0 -192px; padding-top: 48px; } 25% { background-position: 0 -168px; padding-top: 72px; } 29.16667% { background-position: 0 -144px; padding-top: 96px; } 33.33333% { background-position: 0 -120px; padding-top: 120px; } 37.5% { background-position: 0 -96px; padding-top: 144px; } 41.66667% { background-position: 0 -72px; padding-top: 168px; } 45.83333% { background-position: 0 -48px; padding-top: 192px; } 50% { background-position: 0 -24px; padding-top: 216px; } 54.16667% { background-position: 0 0px; padding-top: 240px; } 58.33333% { background-position: 0 24px; padding-top: 264px; } 62.5% { background-position: 0 48px; padding-top: 288px; } 66.66667% { background-position: 0 72px; padding-top: 312px; } 70.83333% { background-position: 0 96px; padding-top: 336px; } 75% { background-position: 0 120px; padding-top: 360px; } 79.16667% { background-position: 0 144px; padding-top: 384px; } 83.33333% { background-position: 0 168px; padding-top: 408px; } 87.5% { background-position: 0 192px; padding-top: 432px; } 91.66667% { background-position: 0 216px; padding-top: 456px; } 95.83333% { background-position: 0 240px; padding-top: 480px; }
}
.matrix li:nth-child(30) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(30):before { display: block; width: 1em; content: "バ ン き ん ょ ソ ば ょ タ タ き バ と ょ キ ょ ょ ン ん バ ン ょ ト し";
}
.matrix li:nth-child(30):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iODcuNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4Ny41JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 -360px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(87.5%, rgba(0, 0, 0, 0)), color-stop(87.5%, #000000), color-stop(100%, #000000)) 0 -360px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -360px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -360px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 504px, #000000 504px, #000000 576px) 0 -360px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ば"; padding-top: 144px; overflow: hidden; -webkit-animation: 1920ms column-30 infinite steps(1, start); -moz-animation: 1920ms column-30 infinite steps(1, start); -ms-animation: 1920ms column-30 infinite steps(1, start); -o-animation: 1920ms column-30 infinite steps(1, start); animation: 1920ms column-30 infinite steps(1, start);
}
@-webkit-keyframes column-30 { 0% { background-position: 0 -360px; padding-top: 144px; } 4.16667% { background-position: 0 -336px; padding-top: 168px; } 8.33333% { background-position: 0 -312px; padding-top: 192px; } 12.5% { background-position: 0 -288px; padding-top: 216px; } 16.66667% { background-position: 0 -264px; padding-top: 240px; } 20.83333% { background-position: 0 -240px; padding-top: 264px; } 25% { background-position: 0 -216px; padding-top: 288px; } 29.16667% { background-position: 0 -192px; padding-top: 312px; } 33.33333% { background-position: 0 -168px; padding-top: 336px; } 37.5% { background-position: 0 -144px; padding-top: 360px; } 41.66667% { background-position: 0 -120px; padding-top: 384px; } 45.83333% { background-position: 0 -96px; padding-top: 408px; } 50% { background-position: 0 -72px; padding-top: 432px; } 54.16667% { background-position: 0 -48px; padding-top: 456px; } 58.33333% { background-position: 0 -24px; padding-top: 480px; } 62.5% { background-position: 0 0px; padding-top: 504px; } 66.66667% { background-position: 0 24px; padding-top: 528px; } 70.83333% { background-position: 0 48px; padding-top: 552px; } 75% { background-position: 0 -504px; padding-top: 0px; } 79.16667% { background-position: 0 -480px; padding-top: 24px; } 83.33333% { background-position: 0 -456px; padding-top: 48px; } 87.5% { background-position: 0 -432px; padding-top: 72px; } 91.66667% { background-position: 0 -408px; padding-top: 96px; } 95.83333% { background-position: 0 -384px; padding-top: 120px; }
}
@-moz-keyframes column-30 { 0% { background-position: 0 -360px; padding-top: 144px; } 4.16667% { background-position: 0 -336px; padding-top: 168px; } 8.33333% { background-position: 0 -312px; padding-top: 192px; } 12.5% { background-position: 0 -288px; padding-top: 216px; } 16.66667% { background-position: 0 -264px; padding-top: 240px; } 20.83333% { background-position: 0 -240px; padding-top: 264px; } 25% { background-position: 0 -216px; padding-top: 288px; } 29.16667% { background-position: 0 -192px; padding-top: 312px; } 33.33333% { background-position: 0 -168px; padding-top: 336px; } 37.5% { background-position: 0 -144px; padding-top: 360px; } 41.66667% { background-position: 0 -120px; padding-top: 384px; } 45.83333% { background-position: 0 -96px; padding-top: 408px; } 50% { background-position: 0 -72px; padding-top: 432px; } 54.16667% { background-position: 0 -48px; padding-top: 456px; } 58.33333% { background-position: 0 -24px; padding-top: 480px; } 62.5% { background-position: 0 0px; padding-top: 504px; } 66.66667% { background-position: 0 24px; padding-top: 528px; } 70.83333% { background-position: 0 48px; padding-top: 552px; } 75% { background-position: 0 -504px; padding-top: 0px; } 79.16667% { background-position: 0 -480px; padding-top: 24px; } 83.33333% { background-position: 0 -456px; padding-top: 48px; } 87.5% { background-position: 0 -432px; padding-top: 72px; } 91.66667% { background-position: 0 -408px; padding-top: 96px; } 95.83333% { background-position: 0 -384px; padding-top: 120px; }
}
@-o-keyframes column-30 { 0% { background-position: 0 -360px; padding-top: 144px; } 4.16667% { background-position: 0 -336px; padding-top: 168px; } 8.33333% { background-position: 0 -312px; padding-top: 192px; } 12.5% { background-position: 0 -288px; padding-top: 216px; } 16.66667% { background-position: 0 -264px; padding-top: 240px; } 20.83333% { background-position: 0 -240px; padding-top: 264px; } 25% { background-position: 0 -216px; padding-top: 288px; } 29.16667% { background-position: 0 -192px; padding-top: 312px; } 33.33333% { background-position: 0 -168px; padding-top: 336px; } 37.5% { background-position: 0 -144px; padding-top: 360px; } 41.66667% { background-position: 0 -120px; padding-top: 384px; } 45.83333% { background-position: 0 -96px; padding-top: 408px; } 50% { background-position: 0 -72px; padding-top: 432px; } 54.16667% { background-position: 0 -48px; padding-top: 456px; } 58.33333% { background-position: 0 -24px; padding-top: 480px; } 62.5% { background-position: 0 0px; padding-top: 504px; } 66.66667% { background-position: 0 24px; padding-top: 528px; } 70.83333% { background-position: 0 48px; padding-top: 552px; } 75% { background-position: 0 -504px; padding-top: 0px; } 79.16667% { background-position: 0 -480px; padding-top: 24px; } 83.33333% { background-position: 0 -456px; padding-top: 48px; } 87.5% { background-position: 0 -432px; padding-top: 72px; } 91.66667% { background-position: 0 -408px; padding-top: 96px; } 95.83333% { background-position: 0 -384px; padding-top: 120px; }
}
@keyframes column-30 { 0% { background-position: 0 -360px; padding-top: 144px; } 4.16667% { background-position: 0 -336px; padding-top: 168px; } 8.33333% { background-position: 0 -312px; padding-top: 192px; } 12.5% { background-position: 0 -288px; padding-top: 216px; } 16.66667% { background-position: 0 -264px; padding-top: 240px; } 20.83333% { background-position: 0 -240px; padding-top: 264px; } 25% { background-position: 0 -216px; padding-top: 288px; } 29.16667% { background-position: 0 -192px; padding-top: 312px; } 33.33333% { background-position: 0 -168px; padding-top: 336px; } 37.5% { background-position: 0 -144px; padding-top: 360px; } 41.66667% { background-position: 0 -120px; padding-top: 384px; } 45.83333% { background-position: 0 -96px; padding-top: 408px; } 50% { background-position: 0 -72px; padding-top: 432px; } 54.16667% { background-position: 0 -48px; padding-top: 456px; } 58.33333% { background-position: 0 -24px; padding-top: 480px; } 62.5% { background-position: 0 0px; padding-top: 504px; } 66.66667% { background-position: 0 24px; padding-top: 528px; } 70.83333% { background-position: 0 48px; padding-top: 552px; } 75% { background-position: 0 -504px; padding-top: 0px; } 79.16667% { background-position: 0 -480px; padding-top: 24px; } 83.33333% { background-position: 0 -456px; padding-top: 48px; } 87.5% { background-position: 0 -432px; padding-top: 72px; } 91.66667% { background-position: 0 -408px; padding-top: 96px; } 95.83333% { background-position: 0 -384px; padding-top: 120px; }
}
.matrix li:nth-child(31) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(31):before { display: block; width: 1em; content: "ト バ コ ク ょ と バ ば ン バ と た ト ん フ き と う コ ワ し マ タ と";
}
.matrix li:nth-child(31):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjAuODMzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 24px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(20.83333%, rgba(0, 0, 0, 0)), color-stop(20.83333%, #000000), color-stop(100%, #000000)) 0 24px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 24px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 24px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 120px, #000000 120px, #000000 576px) 0 24px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "バ"; padding-top: 144px; overflow: hidden; -webkit-animation: 1920ms column-31 infinite steps(1, start); -moz-animation: 1920ms column-31 infinite steps(1, start); -ms-animation: 1920ms column-31 infinite steps(1, start); -o-animation: 1920ms column-31 infinite steps(1, start); animation: 1920ms column-31 infinite steps(1, start);
}
@-webkit-keyframes column-31 { 0% { background-position: 0 24px; padding-top: 144px; } 4.16667% { background-position: 0 48px; padding-top: 168px; } 8.33333% { background-position: 0 72px; padding-top: 192px; } 12.5% { background-position: 0 96px; padding-top: 216px; } 16.66667% { background-position: 0 120px; padding-top: 240px; } 20.83333% { background-position: 0 144px; padding-top: 264px; } 25% { background-position: 0 168px; padding-top: 288px; } 29.16667% { background-position: 0 192px; padding-top: 312px; } 33.33333% { background-position: 0 216px; padding-top: 336px; } 37.5% { background-position: 0 240px; padding-top: 360px; } 41.66667% { background-position: 0 264px; padding-top: 384px; } 45.83333% { background-position: 0 288px; padding-top: 408px; } 50% { background-position: 0 312px; padding-top: 432px; } 54.16667% { background-position: 0 336px; padding-top: 456px; } 58.33333% { background-position: 0 360px; padding-top: 480px; } 62.5% { background-position: 0 384px; padding-top: 504px; } 66.66667% { background-position: 0 408px; padding-top: 528px; } 70.83333% { background-position: 0 432px; padding-top: 552px; } 75% { background-position: 0 -120px; padding-top: 0px; } 79.16667% { background-position: 0 -96px; padding-top: 24px; } 83.33333% { background-position: 0 -72px; padding-top: 48px; } 87.5% { background-position: 0 -48px; padding-top: 72px; } 91.66667% { background-position: 0 -24px; padding-top: 96px; } 95.83333% { background-position: 0 0px; padding-top: 120px; }
}
@-moz-keyframes column-31 { 0% { background-position: 0 24px; padding-top: 144px; } 4.16667% { background-position: 0 48px; padding-top: 168px; } 8.33333% { background-position: 0 72px; padding-top: 192px; } 12.5% { background-position: 0 96px; padding-top: 216px; } 16.66667% { background-position: 0 120px; padding-top: 240px; } 20.83333% { background-position: 0 144px; padding-top: 264px; } 25% { background-position: 0 168px; padding-top: 288px; } 29.16667% { background-position: 0 192px; padding-top: 312px; } 33.33333% { background-position: 0 216px; padding-top: 336px; } 37.5% { background-position: 0 240px; padding-top: 360px; } 41.66667% { background-position: 0 264px; padding-top: 384px; } 45.83333% { background-position: 0 288px; padding-top: 408px; } 50% { background-position: 0 312px; padding-top: 432px; } 54.16667% { background-position: 0 336px; padding-top: 456px; } 58.33333% { background-position: 0 360px; padding-top: 480px; } 62.5% { background-position: 0 384px; padding-top: 504px; } 66.66667% { background-position: 0 408px; padding-top: 528px; } 70.83333% { background-position: 0 432px; padding-top: 552px; } 75% { background-position: 0 -120px; padding-top: 0px; } 79.16667% { background-position: 0 -96px; padding-top: 24px; } 83.33333% { background-position: 0 -72px; padding-top: 48px; } 87.5% { background-position: 0 -48px; padding-top: 72px; } 91.66667% { background-position: 0 -24px; padding-top: 96px; } 95.83333% { background-position: 0 0px; padding-top: 120px; }
}
@-o-keyframes column-31 { 0% { background-position: 0 24px; padding-top: 144px; } 4.16667% { background-position: 0 48px; padding-top: 168px; } 8.33333% { background-position: 0 72px; padding-top: 192px; } 12.5% { background-position: 0 96px; padding-top: 216px; } 16.66667% { background-position: 0 120px; padding-top: 240px; } 20.83333% { background-position: 0 144px; padding-top: 264px; } 25% { background-position: 0 168px; padding-top: 288px; } 29.16667% { background-position: 0 192px; padding-top: 312px; } 33.33333% { background-position: 0 216px; padding-top: 336px; } 37.5% { background-position: 0 240px; padding-top: 360px; } 41.66667% { background-position: 0 264px; padding-top: 384px; } 45.83333% { background-position: 0 288px; padding-top: 408px; } 50% { background-position: 0 312px; padding-top: 432px; } 54.16667% { background-position: 0 336px; padding-top: 456px; } 58.33333% { background-position: 0 360px; padding-top: 480px; } 62.5% { background-position: 0 384px; padding-top: 504px; } 66.66667% { background-position: 0 408px; padding-top: 528px; } 70.83333% { background-position: 0 432px; padding-top: 552px; } 75% { background-position: 0 -120px; padding-top: 0px; } 79.16667% { background-position: 0 -96px; padding-top: 24px; } 83.33333% { background-position: 0 -72px; padding-top: 48px; } 87.5% { background-position: 0 -48px; padding-top: 72px; } 91.66667% { background-position: 0 -24px; padding-top: 96px; } 95.83333% { background-position: 0 0px; padding-top: 120px; }
}
@keyframes column-31 { 0% { background-position: 0 24px; padding-top: 144px; } 4.16667% { background-position: 0 48px; padding-top: 168px; } 8.33333% { background-position: 0 72px; padding-top: 192px; } 12.5% { background-position: 0 96px; padding-top: 216px; } 16.66667% { background-position: 0 120px; padding-top: 240px; } 20.83333% { background-position: 0 144px; padding-top: 264px; } 25% { background-position: 0 168px; padding-top: 288px; } 29.16667% { background-position: 0 192px; padding-top: 312px; } 33.33333% { background-position: 0 216px; padding-top: 336px; } 37.5% { background-position: 0 240px; padding-top: 360px; } 41.66667% { background-position: 0 264px; padding-top: 384px; } 45.83333% { background-position: 0 288px; padding-top: 408px; } 50% { background-position: 0 312px; padding-top: 432px; } 54.16667% { background-position: 0 336px; padding-top: 456px; } 58.33333% { background-position: 0 360px; padding-top: 480px; } 62.5% { background-position: 0 384px; padding-top: 504px; } 66.66667% { background-position: 0 408px; padding-top: 528px; } 70.83333% { background-position: 0 432px; padding-top: 552px; } 75% { background-position: 0 -120px; padding-top: 0px; } 79.16667% { background-position: 0 -96px; padding-top: 24px; } 83.33333% { background-position: 0 -72px; padding-top: 48px; } 87.5% { background-position: 0 -48px; padding-top: 72px; } 91.66667% { background-position: 0 -24px; padding-top: 96px; } 95.83333% { background-position: 0 0px; padding-top: 120px; }
}
.matrix li:nth-child(32) { position: relative; display: inline-block; white-space: normal; vertical-align: top;
}
.matrix li:nth-child(32):before { display: block; width: 1em; content: "た フ ワ タ ョ ン マ ョ ン ョ ド フ た ク う う ば リ バ コ シ ト シ ラ";
}
.matrix li:nth-child(32):after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iOTEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iOTEuNjY2NjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -360px repeat; background: -webkit-gradient(linear, 50% 0%, 50% 576, color-stop(0%, #000000), color-stop(91.66667%, rgba(0, 0, 0, 0)), color-stop(91.66667%, #000000), color-stop(100%, #000000)) 0 -360px repeat; background: -moz-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -360px repeat; background: -webkit-linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -360px repeat; background: linear-gradient(#000000 0%, rgba(0, 0, 0, 0) 528px, #000000 528px, #000000 576px) 0 -360px repeat; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: white; content: "ョ"; padding-top: 168px; overflow: hidden; -webkit-animation: 1920ms column-32 infinite steps(1, start); -moz-animation: 1920ms column-32 infinite steps(1, start); -ms-animation: 1920ms column-32 infinite steps(1, start); -o-animation: 1920ms column-32 infinite steps(1, start); animation: 1920ms column-32 infinite steps(1, start);
}
@-webkit-keyframes column-32 { 0% { background-position: 0 -360px; padding-top: 168px; } 4.16667% { background-position: 0 -336px; padding-top: 192px; } 8.33333% { background-position: 0 -312px; padding-top: 216px; } 12.5% { background-position: 0 -288px; padding-top: 240px; } 16.66667% { background-position: 0 -264px; padding-top: 264px; } 20.83333% { background-position: 0 -240px; padding-top: 288px; } 25% { background-position: 0 -216px; padding-top: 312px; } 29.16667% { background-position: 0 -192px; padding-top: 336px; } 33.33333% { background-position: 0 -168px; padding-top: 360px; } 37.5% { background-position: 0 -144px; padding-top: 384px; } 41.66667% { background-position: 0 -120px; padding-top: 408px; } 45.83333% { background-position: 0 -96px; padding-top: 432px; } 50% { background-position: 0 -72px; padding-top: 456px; } 54.16667% { background-position: 0 -48px; padding-top: 480px; } 58.33333% { background-position: 0 -24px; padding-top: 504px; } 62.5% { background-position: 0 0px; padding-top: 528px; } 66.66667% { background-position: 0 24px; padding-top: 552px; } 70.83333% { background-position: 0 -528px; padding-top: 0px; } 75% { background-position: 0 -504px; padding-top: 24px; } 79.16667% { background-position: 0 -480px; padding-top: 48px; } 83.33333% { background-position: 0 -456px; padding-top: 72px; } 87.5% { background-position: 0 -432px; padding-top: 96px; } 91.66667% { background-position: 0 -408px; padding-top: 120px; } 95.83333% { background-position: 0 -384px; padding-top: 144px; }
}
@-moz-keyframes column-32 { 0% { background-position: 0 -360px; padding-top: 168px; } 4.16667% { background-position: 0 -336px; padding-top: 192px; } 8.33333% { background-position: 0 -312px; padding-top: 216px; } 12.5% { background-position: 0 -288px; padding-top: 240px; } 16.66667% { background-position: 0 -264px; padding-top: 264px; } 20.83333% { background-position: 0 -240px; padding-top: 288px; } 25% { background-position: 0 -216px; padding-top: 312px; } 29.16667% { background-position: 0 -192px; padding-top: 336px; } 33.33333% { background-position: 0 -168px; padding-top: 360px; } 37.5% { background-position: 0 -144px; padding-top: 384px; } 41.66667% { background-position: 0 -120px; padding-top: 408px; } 45.83333% { background-position: 0 -96px; padding-top: 432px; } 50% { background-position: 0 -72px; padding-top: 456px; } 54.16667% { background-position: 0 -48px; padding-top: 480px; } 58.33333% { background-position: 0 -24px; padding-top: 504px; } 62.5% { background-position: 0 0px; padding-top: 528px; } 66.66667% { background-position: 0 24px; padding-top: 552px; } 70.83333% { background-position: 0 -528px; padding-top: 0px; } 75% { background-position: 0 -504px; padding-top: 24px; } 79.16667% { background-position: 0 -480px; padding-top: 48px; } 83.33333% { background-position: 0 -456px; padding-top: 72px; } 87.5% { background-position: 0 -432px; padding-top: 96px; } 91.66667% { background-position: 0 -408px; padding-top: 120px; } 95.83333% { background-position: 0 -384px; padding-top: 144px; }
}
@-o-keyframes column-32 { 0% { background-position: 0 -360px; padding-top: 168px; } 4.16667% { background-position: 0 -336px; padding-top: 192px; } 8.33333% { background-position: 0 -312px; padding-top: 216px; } 12.5% { background-position: 0 -288px; padding-top: 240px; } 16.66667% { background-position: 0 -264px; padding-top: 264px; } 20.83333% { background-position: 0 -240px; padding-top: 288px; } 25% { background-position: 0 -216px; padding-top: 312px; } 29.16667% { background-position: 0 -192px; padding-top: 336px; } 33.33333% { background-position: 0 -168px; padding-top: 360px; } 37.5% { background-position: 0 -144px; padding-top: 384px; } 41.66667% { background-position: 0 -120px; padding-top: 408px; } 45.83333% { background-position: 0 -96px; padding-top: 432px; } 50% { background-position: 0 -72px; padding-top: 456px; } 54.16667% { background-position: 0 -48px; padding-top: 480px; } 58.33333% { background-position: 0 -24px; padding-top: 504px; } 62.5% { background-position: 0 0px; padding-top: 528px; } 66.66667% { background-position: 0 24px; padding-top: 552px; } 70.83333% { background-position: 0 -528px; padding-top: 0px; } 75% { background-position: 0 -504px; padding-top: 24px; } 79.16667% { background-position: 0 -480px; padding-top: 48px; } 83.33333% { background-position: 0 -456px; padding-top: 72px; } 87.5% { background-position: 0 -432px; padding-top: 96px; } 91.66667% { background-position: 0 -408px; padding-top: 120px; } 95.83333% { background-position: 0 -384px; padding-top: 144px; }
}
@keyframes column-32 { 0% { background-position: 0 -360px; padding-top: 168px; } 4.16667% { background-position: 0 -336px; padding-top: 192px; } 8.33333% { background-position: 0 -312px; padding-top: 216px; } 12.5% { background-position: 0 -288px; padding-top: 240px; } 16.66667% { background-position: 0 -264px; padding-top: 264px; } 20.83333% { background-position: 0 -240px; padding-top: 288px; } 25% { background-position: 0 -216px; padding-top: 312px; } 29.16667% { background-position: 0 -192px; padding-top: 336px; } 33.33333% { background-position: 0 -168px; padding-top: 360px; } 37.5% { background-position: 0 -144px; padding-top: 384px; } 41.66667% { background-position: 0 -120px; padding-top: 408px; } 45.83333% { background-position: 0 -96px; padding-top: 432px; } 50% { background-position: 0 -72px; padding-top: 456px; } 54.16667% { background-position: 0 -48px; padding-top: 480px; } 58.33333% { background-position: 0 -24px; padding-top: 504px; } 62.5% { background-position: 0 0px; padding-top: 528px; } 66.66667% { background-position: 0 24px; padding-top: 552px; } 70.83333% { background-position: 0 -528px; padding-top: 0px; } 75% { background-position: 0 -504px; padding-top: 24px; } 79.16667% { background-position: 0 -480px; padding-top: 48px; } 83.33333% { background-position: 0 -456px; padding-top: 72px; } 87.5% { background-position: 0 -432px; padding-top: 96px; } 91.66667% { background-position: 0 -408px; padding-top: 120px; } 95.83333% { background-position: 0 -384px; padding-top: 144px; }
}
| Developer | John W. Long |
| Username | jlong |
| Uploaded | September 24, 2022 |
| Rating | 4.5 |
| Size | 15,344 Kb |
| Views | 18,216 |
Do you need developer help for The Matrix in Sass?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
John W. Long (jlong) Script Codes
| Name | Size |
| Animated CSS Flower Spinner | 2,747 Kb |
| Mixins for semi-transparent colors | 2,620 Kb |
| Simple menu 1 | 3,420 Kb |
| Simple menu | 3,691 Kb |
| Donut Graph with D3 | 4,022 Kb |
| Animated CSS Throbber | 2,665 Kb |
| UserVoice Listboxes | 6,978 Kb |
| Simple menu 3 | 3,414 Kb |
| Animated CSS Timer Spinner | 2,769 Kb |
| Animated CSS Google Plus-Like Loader | 3,913 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| STIKHOI | Denmch | 7,122 Kb |
| Funny menu | AxeLVaisper | 4,671 Kb |
| Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| Knob rotation | Alemesre | 2,122 Kb |
| Dribbble Template | ExtremelyGinger | 2,204 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Parallax scrolling scene | Iharosi | 2,485 Kb |
| A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!