<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート 神経衰弱</TITLE>
<STYLE TYPE="text/css">
<!--
@keyframes shuffle1 {
from {
--order1:0;
}
to {
--order1:120;
}
}
@keyframes shuffle2 {
from {
--order2:0;
}
to {
--order2:var(--steps);
}
}
@property --order1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --order2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --usa {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --us0 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --usj {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --usq {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --usk {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uca {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uc0 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ucj {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ucq {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uck {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uha {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uh0 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uhj {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uhq {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uhk {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --uda {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ud0 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --udj {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --udq {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --udk {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
body {
background-color:#CCFFFF;
}
#title {
text-align:center;
color:#CC0000;
font-weight:bold;
}
form, #base, #act, .win-btn, #mask2 {
background-color:inherit;
}
input {
display:none;
}
#base {
position:relative;
line-height:0;
user-select:none;
/* --usa 等の初期値が 0 だと，カードを伏せたときに設定値が初期値から変化しないので
プロパティが更新されない．そのため初期値を 0，1 以外にする． */
--usa:-1; --us2:-1; --us3:-1; --us4:-1; --us5:-1; --us6:-1; --us7:-1;
--us8:-1; --us9:-1; --us0:-1; --usj:-1; --usq:-1; --usk:-1;
--uca:-1; --uc2:-1; --uc3:-1; --uc4:-1; --uc5:-1; --uc6:-1; --uc7:-1;
--uc8:-1; --uc9:-1; --uc0:-1; --ucj:-1; --ucq:-1; --uck:-1;
--uha:-1; --uh2:-1; --uh3:-1; --uh4:-1; --uh5:-1; --uh6:-1; --uh7:-1;
--uh8:-1; --uh9:-1; --uh0:-1; --uhj:-1; --uhq:-1; --uhk:-1;
--uda:-1; --ud2:-1; --ud3:-1; --ud4:-1; --ud5:-1; --ud6:-1; --ud7:-1;
--ud8:-1; --ud9:-1; --ud0:-1; --udj:-1; --udq:-1; --udk:-1;
--dsa:10000s; --ds2:10000s; --ds3:10000s; --ds4:10000s; --ds5:10000s; --ds6:10000s; --ds7:10000s;
--ds8:10000s; --ds9:10000s; --ds0:10000s; --dsj:10000s; --dsq:10000s; --dsk:10000s;
--dca:10000s; --dc2:10000s; --dc3:10000s; --dc4:10000s; --dc5:10000s; --dc6:10000s; --dc7:10000s;
--dc8:10000s; --dc9:10000s; --dc0:10000s; --dcj:10000s; --dcq:10000s; --dck:10000s;
--dha:10000s; --dh2:10000s; --dh3:10000s; --dh4:10000s; --dh5:10000s; --dh6:10000s; --dh7:10000s;
--dh8:10000s; --dh9:10000s; --dh0:10000s; --dhj:10000s; --dhq:10000s; --dhk:10000s;
--dda:10000s; --dd2:10000s; --dd3:10000s; --dd4:10000s; --dd5:10000s; --dd6:10000s; --dd7:10000s;
--dd8:10000s; --dd9:10000s; --dd0:10000s; --ddj:10000s; --ddq:10000s; --ddk:10000s;
transition-property:--usa, --us2, --us3, --us4, --us5, --us6, --us7,
--us8, --us9, --us0, --usj, --usq, --usk,
--uca, --uc2, --uc3, --uc4, --uc5, --uc6, --uc7,
--uc8, --uc9, --uc0, --ucj, --ucq, --uck,
--uha, --uh2, --uh3, --uh4, --uh5, --uh6, --uh7,
--uh8, --uh9, --uh0, --uhj, --uhq, --uhk,
--uda, --ud2, --ud3, --ud4, --ud5, --ud6, --ud7,
--ud8, --ud9, --ud0, --udj, --udq, --udk;
transition-duration:0s;
transition-delay:var(--dsa), var(--ds2), var(--ds3), var(--ds4), var(--ds5), var(--ds6), var(--ds7),
var(--ds8), var(--ds9), var(--ds0), var(--dsj), var(--dsq), var(--dsk),
var(--dca), var(--dc2), var(--dc3), var(--dc4), var(--dc5), var(--dc6), var(--dc7),
var(--dc8), var(--dc9), var(--dc0), var(--dcj), var(--dcq), var(--dck),
var(--dha), var(--dh2), var(--dh3), var(--dh4), var(--dh5), var(--dh6), var(--dh7),
var(--dh8), var(--dh9), var(--dh0), var(--dhj), var(--dhq), var(--dhk),
var(--dda), var(--dd2), var(--dd3), var(--dd4), var(--dd5), var(--dd6), var(--dd7),
var(--dd8), var(--dd9), var(--dd0), var(--ddj), var(--ddq), var(--ddk);
/* カードを 2枚開けると --ucnt が 1 になる */
--ucnt:calc(var(--usa) + var(--us2) + var(--us3) + var(--us4) + var(--us5) + var(--us6) + var(--us7)
+ var(--us8) + var(--us9) + var(--us0) + var(--usj) + var(--usq) + var(--usk)
+ var(--uca) + var(--uc2) + var(--uc3) + var(--uc4) + var(--uc5) + var(--uc6) + var(--uc7)
+ var(--uc8) + var(--uc9) + var(--uc0) + var(--ucj) + var(--ucq) + var(--uck)
+ var(--uha) + var(--uh2) + var(--uh3) + var(--uh4) + var(--uh5) + var(--uh6) + var(--uh7)
+ var(--uh8) + var(--uh9) + var(--uh0) + var(--uhj) + var(--uhq) + var(--uhk)
+ var(--uda) + var(--ud2) + var(--ud3) + var(--ud4) + var(--ud5) + var(--ud6) + var(--ud7)
+ var(--ud8) + var(--ud9) + var(--ud0) + var(--udj) + var(--udq) + var(--udk)
- 1);
/* 取った */
--wsa:0; --ws2:0; --ws3:0; --ws4:0; --ws5:0; --ws6:0; --ws7:0;
--ws8:0; --ws9:0; --ws0:0; --wsj:0; --wsq:0; --wsk:0;
--wca:0; --wc2:0; --wc3:0; --wc4:0; --wc5:0; --wc6:0; --wc7:0;
--wc8:0; --wc9:0; --wc0:0; --wcj:0; --wcq:0; --wck:0;
--wha:0; --wh2:0; --wh3:0; --wh4:0; --wh5:0; --wh6:0; --wh7:0;
--wh8:0; --wh9:0; --wh0:0; --whj:0; --whq:0; --whk:0;
--wda:0; --wd2:0; --wd3:0; --wd4:0; --wd5:0; --wd6:0; --wd7:0;
--wd8:0; --wd9:0; --wd0:0; --wdj:0; --wdq:0; --wdk:0;
}
#start:not(:checked) ~ #base,
#down:active ~ #base {
--usa:0; --us2:0; --us3:0; --us4:0; --us5:0; --us6:0; --us7:0;
--us8:0; --us9:0; --us0:0; --usj:0; --usq:0; --usk:0;
--uca:0; --uc2:0; --uc3:0; --uc4:0; --uc5:0; --uc6:0; --uc7:0;
--uc8:0; --uc9:0; --uc0:0; --ucj:0; --ucq:0; --uck:0;
--uha:0; --uh2:0; --uh3:0; --uh4:0; --uh5:0; --uh6:0; --uh7:0;
--uh8:0; --uh9:0; --uh0:0; --uhj:0; --uhq:0; --uhk:0;
--uda:0; --ud2:0; --ud3:0; --ud4:0; --ud5:0; --ud6:0; --ud7:0;
--ud8:0; --ud9:0; --ud0:0; --udj:0; --udq:0; --udk:0;
transition:none;
}
#grid {
display:grid;
position:relative;
width:616px;
height:264px;
margin-left:auto;
margin-right:auto;
padding:20px;
text-align:center;
background-color:green;
grid-template-rows:repeat(4, 60px);
grid-template-columns:repeat(13, 40px);
gap:8px;
z-index:0;
}
#mask1 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:var(--ucnt);
}
/* カード */
.card {
position:relative;
width:40px;
height:54px;
padding-top:6px;
font-size:24px;
font-weight:bold;
line-height:1;
background-color:white;
background-repeat:no-repeat;
background-position:8px 30px;
border-radius:4px;
visibility:hidden;
animation:shuffle1 calc(var(--duration) / var(--steps)) steps(calc(120 / var(--steps)), jump-end) calc(-1 * var(--shift)) infinite,
shuffle2 var(--duration) steps(var(--steps), jump-end) calc(-1 * var(--shift)) infinite;
order:calc(var(--order1) + var(--order2));
}
.narrow {
transform:scaleX(0.8);
}
.spade, .club {
color:black;
}
.heart, .diamond {
color:#E00000;
}
.spade {
background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAABj0lEQVR42p2UvY6CQBzE5aKhs6KxEAMW\
WJNYUNCRS+xsCImNvogVHb6EBR0vcMV15AobWiXE0tAQC0NDjOEmLFEPZFduCvLf3Zkfy37A5XneoSqO\
YzwHgwHd9tFh6bsQ08YxZ2QYBsExSDlV9zwKupMGOp/PkiQREAo0/wO6Xq+z2ex57miisx0IgeVyWV8H\
dDaxXoDSNJ3P501riiEY2KDT6TSdTun7AwNsNFAURaIoMo8MBBvMr0FJkozH43coRDAj8gK0WCzepxAh\
UgUdj0eO49qCEEGQEMq75vt+zrordSGCIKlL0OVyaUupBEuQLMtN1s9CTaOPIPnCLMsmk0ndNxwOfwqh\
qI8igmB11/b7/Wg0qvgOh8NXIRSVN+EoIXKP//kf4YO3220QBDzP67pumiaK9XqNIdu28XLP87C6KFRV\
Xa1W/X7/sYP0zcIVVRQFRRiGvV6PsYUUbTYbYkNBd9JArut2u10CQoFmO9DtdtvtdpZl1aePTgzBwAA5\
jqNpmiAI9EMIA2wwP2d/AW2u2ETpQkxNAAAAAElFTkSuQmCC");
}
.club {
background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAABtklEQVR42qWUT4tBURiHz1yxUNKUUlYo\
SytlYTElRdlLtoqaT+AzyBfwCWYjZTMWNjZsWVkpWUkWFKUQ5jn31qS595wxc3+r98/vfc65vB1xV+h8\
Prfb7Uwm82qKgJSiyi8cq4fDIZfLCZso0voDqFqtCoVoPQtaLpcej0cFooXBPmXYraPR6Hq9qkC0MNjr\
DqD9fi+0cjQ4gBKJhB7kbHj8vxeLBaedTqd4PK6i0MKADfPjNkgQn91qtUKhED6fz1coFCqVigpECwM2\
YkYYZFyCbrdbvV4XLlSr1YCIbrfrhmIJiGez2bAXLkFARCAQcH8jCdEs8fMCYsRiMb3pzZTeIyGNRkPj\
iEajn6b050nIdrvF7dgOBoOTyeTDFAGp6jAgciHn83kymfzRTqVSs9mM7rspAlKKP2wMMk73RS6lEJfL\
pdPpDIfD3W4XiUSKxWI+nzcM43g8WvdlRfx+P4s3GAz6/f5qteLZzGazpVLJ6/VK5F2rZrNpnUygd+pA\
0+mUW1ggAtL/gMbjcTgcfvw5SCk+C+J96PV65XLZcVEp0sKATQlar9fpdNp6H34VNsyMfI9/AdZwauiD\
AADpAAAAAElFTkSuQmCC");
}
.heart {
background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAB6klEQVR42qWUQUsCQRiGZ1dLRBHCpNIF\
AzssKIaCV0m7+De8eRfp1M1jnT116Qf4Eyo8h1IQeFBQ2t0KkZTw4Oru9i6zlenuVPayOt833/s9zoy7\
S4wPaePx6+mpnEg8CoKcSo2qVW00MhaEFJMomYZEAma0fFYJHWaKIolij5DFS4rF1G6XGhAgXTaIIhqp\
gTNhhDznctObG7IityiGWy0ESio1b7dXDZ6jo93rawQmSL2/fzo8JA7aOj/H92u57GTYu7vbTCbdiNTb\
W+Kst1qNMIV2C2ToOsM373TYINrO47NxcED+oY1YzDojYzqVIhF9OFyDwgeDgixzHo+5Igz+Umm95aAR\
7daKMOiTiRKPa/3+nyiuaDT88MD7fNYZmYPPF7y4IDz/l13xaKGULxDkPT4OnJz8ngMzWj5Ta2tUhqa9\
5PPTRuNHiieb3bm64lwuexA0l6SndFofDFh7CoX2mk23IHybXDKhvH15yTosnodhiWIDMg+rUAhUKo5H\
U6nAYFMw7KSrqpLJ9L6/NHBhEiXbFnuQ+Upot/te7yIFKSad/I4gaHx2tghCyjCzQPpsJieTlIIA6Zog\
aFKvUxACtnP5Plr9K/AMIsAzxXEcw+lm38Fo9heLNPjByV4RNO/1zB/c32fb3gGB2Q5IoqJVwAAAAABJ\
RU5ErkJggg==");
}
.diamond {
background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAABaklEQVR42rVUzWrCQBDeLKFQAiktFdo+\
gF48i88hKnjMC3jTqxcvvoB3T4KKr6F4zkVPOZS2EAnUsLQUm/RrIiHR3Wla6rDIzO43X5xfLQxDRoqY\
TPBrNJs0TKOJAiGeymUoD7bNDYNiCknxul2HMRyv06GRFNH7YuHoekwEBeZfiD59/7FYPLBEByYuVXiu\
Ctlrt/ebTfoGJi5/lyN/NEr/l/TBk9RFUrUP236pVkMh5GU2jLvl8iIqZVqOQwt2O7deV7F8RyAEAIBR\
RGEQbC1rv17TvQcAYAAriV77/bf5nOUQwADOhJzkCKOwbbVY9juUcH47Hiejw/O6/UibaOC+6vXyewKc\
nuRM+ZE/t9HIk6bLWq0wnWqcy4lYVP7nSoUunF4q3a9W3DTloR1s0yzMZpp6Y+AJgCMWJk02uvZmOFQR\
4em0raO8KMS1LOdk0HB59jVy/sUWS/5V+2/LX6cbD87Xg0Gs0MgvGxhlQEhpnS8AAAAASUVORK5CYII=");
}
/* order をランダムに決める */
#lsa {
--duration:1000ms;
}
#ls2 {
--duration:1010ms;
}
#ls3 {
--duration:1020ms;
}
#ls4 {
--duration:1032ms;
}
#ls5 {
--duration:1040ms;
}
#ls6 {
--duration:1050ms;
}
#ls7 {
--duration:1060ms;
}
#ls8 {
--duration:1070ms;
}
#ls9 {
--duration:1080ms;
}
#ls0 {
--duration:1092ms;
}
#lsj {
--duration:1100ms;
}
#lsq {
--duration:1110ms;
}
#lsk {
--duration:1120ms;
}
#lca {
--duration:1130ms;
}
#lc2 {
--duration:1140ms;
}
#lc3 {
--duration:1152ms;
}
#lc4 {
--duration:1160ms;
}
#lc5 {
--duration:1170ms;
}
#lc6 {
--duration:1180ms;
}
#lc7 {
--duration:1190ms;
}
#lc8 {
--duration:1200ms;
}
#lc9 {
--duration:1212ms;
}
#lc0 {
--duration:1220ms;
}
#lcj {
--duration:1230ms;
}
#lcq {
--duration:1240ms;
}
#lck {
--duration:1250ms;
}
#lha {
--duration:1260ms;
}
#lh2 {
--duration:1272ms;
}
#lh3 {
--duration:1280ms;
}
#lh4 {
--duration:1290ms;
}
#lh5 {
--duration:1300ms;
}
#lh6 {
--duration:1310ms;
}
#lh7 {
--duration:1320ms;
}
#lh8 {
--duration:1332ms;
}
#lh9 {
--duration:1340ms;
}
#lh0 {
--duration:1350ms;
}
#lhj {
--duration:1360ms;
}
#lhq {
--duration:1370ms;
}
#lhk {
--duration:1380ms;
}
#lda {
--duration:1392ms;
}
#ld2 {
--duration:1400ms;
}
#ld3 {
--duration:1410ms;
}
#ld4 {
--duration:1420ms;
}
#ld5 {
--duration:1430ms;
}
#ld6 {
--duration:1440ms;
}
#ld7 {
--duration:1452ms;
}
#ld8 {
--duration:1460ms;
}
#ld9 {
--duration:1470ms;
}
#ld0 {
--duration:1480ms;
}
#ldj {
--duration:1490ms;
}
#ldq {
--duration:1500ms;
}
#ldk {
--duration:1512ms;
}
#lsa, #ls7, #lsk, #lc6, #lcq, #lh5, #lhj, #ld4, #ld0 {
--steps:1;
}
#ls2, #ls8, #lca, #lc7, #lck, #lh6, #lhq, #ld5, #ldj {
--steps:2;
}
#ls3, #ls9, #lc2, #lc8, #lha, #lh7, #lhk, #ld6, #ldq {
--steps:3;
}
#ls4, #ls0, #lc3, #lc9, #lh2, #lh8, #lda, #ld7, #ldk {
--steps:4;
}
#ls5, #lsj, #lc4, #lc0, #lh3, #lh9, #ld2, #ld8 {
--steps:5;
}
#ls6, #lsq, #lc5, #lcj, #lh4, #lh0, #ld3, #ld9 {
--steps:6;
}
#lsa, #ls6, #lsj, #lc3, #lc8, #lck, #lh5, #lh0, #ld2, #ld7, #ldq {
--shift:0s;
}
#ls2, #ls7, #lsq, #lc4, #lc9, #lha, #lh6, #lhj, #ld3, #ld8, #ldk {
--shift:200ms;
}
#ls3, #ls8, #lsk, #lc5, #lc0, #lh2, #lh7, #lhq, #ld4, #ld9 {
--shift:400ms;
}
#ls4, #ls9, #lca, #lc6, #lcj, #lh3, #lh8, #lhk, #ld5, #ld0 {
--shift:600ms;
}
#ls5, #ls0, #lc2, #lc7, #lcq, #lh4, #lh9, #lda, #ld6, #ldj {
--shift:800ms;
}
/* 開ける */
.card label {
display:block;
position:absolute;
left:0;
top:0;
width:36px;
height:56px;
background-color:#0000A0;
border:solid 2px white;
border-radius:4px;
}
#lsa label {
z-index:calc(0 - var(--usa));
}
#ls2 label {
z-index:calc(0 - var(--us2));
}
#ls3 label {
z-index:calc(0 - var(--us3));
}
#ls4 label {
z-index:calc(0 - var(--us4));
}
#ls5 label {
z-index:calc(0 - var(--us5));
}
#ls6 label {
z-index:calc(0 - var(--us6));
}
#ls7 label {
z-index:calc(0 - var(--us7));
}
#ls8 label {
z-index:calc(0 - var(--us8));
}
#ls9 label {
z-index:calc(0 - var(--us9));
}
#ls0 label {
z-index:calc(0 - var(--us0));
}
#lsj label {
z-index:calc(0 - var(--usj));
}
#lsq label {
z-index:calc(0 - var(--usq));
}
#lsk label {
z-index:calc(0 - var(--usk));
}
#lca label {
z-index:calc(0 - var(--uca));
}
#lc2 label {
z-index:calc(0 - var(--uc2));
}
#lc3 label {
z-index:calc(0 - var(--uc3));
}
#lc4 label {
z-index:calc(0 - var(--uc4));
}
#lc5 label {
z-index:calc(0 - var(--uc5));
}
#lc6 label {
z-index:calc(0 - var(--uc6));
}
#lc7 label {
z-index:calc(0 - var(--uc7));
}
#lc8 label {
z-index:calc(0 - var(--uc8));
}
#lc9 label {
z-index:calc(0 - var(--uc9));
}
#lc0 label {
z-index:calc(0 - var(--uc0));
}
#lcj label {
z-index:calc(0 - var(--ucj));
}
#lcq label {
z-index:calc(0 - var(--ucq));
}
#lck label {
z-index:calc(0 - var(--uck));
}
#lha label {
z-index:calc(0 - var(--uha));
}
#lh2 label {
z-index:calc(0 - var(--uh2));
}
#lh3 label {
z-index:calc(0 - var(--uh3));
}
#lh4 label {
z-index:calc(0 - var(--uh4));
}
#lh5 label {
z-index:calc(0 - var(--uh5));
}
#lh6 label {
z-index:calc(0 - var(--uh6));
}
#lh7 label {
z-index:calc(0 - var(--uh7));
}
#lh8 label {
z-index:calc(0 - var(--uh8));
}
#lh9 label {
z-index:calc(0 - var(--uh9));
}
#lh0 label {
z-index:calc(0 - var(--uh0));
}
#lhj label {
z-index:calc(0 - var(--uhj));
}
#lhq label {
z-index:calc(0 - var(--uhq));
}
#lhk label {
z-index:calc(0 - var(--uhk));
}
#lda label {
z-index:calc(0 - var(--uda));
}
#ld2 label {
z-index:calc(0 - var(--ud2));
}
#ld3 label {
z-index:calc(0 - var(--ud3));
}
#ld4 label {
z-index:calc(0 - var(--ud4));
}
#ld5 label {
z-index:calc(0 - var(--ud5));
}
#ld6 label {
z-index:calc(0 - var(--ud6));
}
#ld7 label {
z-index:calc(0 - var(--ud7));
}
#ld8 label {
z-index:calc(0 - var(--ud8));
}
#ld9 label {
z-index:calc(0 - var(--ud9));
}
#ld0 label {
z-index:calc(0 - var(--ud0));
}
#ldj label {
z-index:calc(0 - var(--udj));
}
#ldq label {
z-index:calc(0 - var(--udq));
}
#ldk label {
z-index:calc(0 - var(--udk));
}
#sa:active ~ #base {
--usa:1;
--dsa:0s;
}
#s2:active ~ #base {
--us2:1;
--ds2:0s;
}
#s3:active ~ #base {
--us3:1;
--ds3:0s;
}
#s4:active ~ #base {
--us4:1;
--ds4:0s;
}
#s5:active ~ #base {
--us5:1;
--ds5:0s;
}
#s6:active ~ #base {
--us6:1;
--ds6:0s;
}
#s7:active ~ #base {
--us7:1;
--ds7:0s;
}
#s8:active ~ #base {
--us8:1;
--ds8:0s;
}
#s9:active ~ #base {
--us9:1;
--ds9:0s;
}
#s0:active ~ #base {
--us0:1;
--ds0:0s;
}
#sj:active ~ #base {
--usj:1;
--dsj:0s;
}
#sq:active ~ #base {
--usq:1;
--dsq:0s;
}
#sk:active ~ #base {
--usk:1;
--dsk:0s;
}
#ca:active ~ #base {
--uca:1;
--dca:0s;
}
#c2:active ~ #base {
--uc2:1;
--dc2:0s;
}
#c3:active ~ #base {
--uc3:1;
--dc3:0s;
}
#c4:active ~ #base {
--uc4:1;
--dc4:0s;
}
#c5:active ~ #base {
--uc5:1;
--dc5:0s;
}
#c6:active ~ #base {
--uc6:1;
--dc6:0s;
}
#c7:active ~ #base {
--uc7:1;
--dc7:0s;
}
#c8:active ~ #base {
--uc8:1;
--dc8:0s;
}
#c9:active ~ #base {
--uc9:1;
--dc9:0s;
}
#c0:active ~ #base {
--uc0:1;
--dc0:0s;
}
#cj:active ~ #base {
--ucj:1;
--dcj:0s;
}
#cq:active ~ #base {
--ucq:1;
--dcq:0s;
}
#ck:active ~ #base {
--uck:1;
--dck:0s;
}
#ha:active ~ #base {
--uha:1;
--dha:0s;
}
#h2:active ~ #base {
--uh2:1;
--dh2:0s;
}
#h3:active ~ #base {
--uh3:1;
--dh3:0s;
}
#h4:active ~ #base {
--uh4:1;
--dh4:0s;
}
#h5:active ~ #base {
--uh5:1;
--dh5:0s;
}
#h6:active ~ #base {
--uh6:1;
--dh6:0s;
}
#h7:active ~ #base {
--uh7:1;
--dh7:0s;
}
#h8:active ~ #base {
--uh8:1;
--dh8:0s;
}
#h9:active ~ #base {
--uh9:1;
--dh9:0s;
}
#h0:active ~ #base {
--uh0:1;
--dh0:0s;
}
#hj:active ~ #base {
--uhj:1;
--dhj:0s;
}
#hq:active ~ #base {
--uhq:1;
--dhq:0s;
}
#hk:active ~ #base {
--uhk:1;
--dhk:0s;
}
#da:active ~ #base {
--uda:1;
--dda:0s;
}
#d2:active ~ #base {
--ud2:1;
--dd2:0s;
}
#d3:active ~ #base {
--ud3:1;
--dd3:0s;
}
#d4:active ~ #base {
--ud4:1;
--dd4:0s;
}
#d5:active ~ #base {
--ud5:1;
--dd5:0s;
}
#d6:active ~ #base {
--ud6:1;
--dd6:0s;
}
#d7:active ~ #base {
--ud7:1;
--dd7:0s;
}
#d8:active ~ #base {
--ud8:1;
--dd8:0s;
}
#d9:active ~ #base {
--ud9:1;
--dd9:0s;
}
#d0:active ~ #base {
--ud0:1;
--dd0:0s;
}
#dj:active ~ #base {
--udj:1;
--ddj:0s;
}
#dq:active ~ #base {
--udq:1;
--ddq:0s;
}
#dk:active ~ #base {
--udk:1;
--ddk:0s;
}
/* 伏せる／取る */
#act {
display:block;
position:relative;
width:60px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#down-btn, .win-btn {
display:block;
position:absolute;
left:0;
top:0;
width:60px;
height:30px;
text-align:center;
color:white;
font-size:14px;
line-height:30px;
cursor:pointer;
}
#down-btn {
background-color:#D04000;
border-radius:4px;
z-index:var(--ucnt);
}
.win-btn {
z-index:0;
}
.win-btn::before {
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#D04000;
border-radius:4px;
content:"取る";
}
#mask2 {
position:absolute;
left:0;
top:0;
width:100%;
height:30px;
z-index:0;
}
#lsca {
z-index:calc(var(--usa) * var(--uca));
}
#lsha {
z-index:calc(var(--usa) * var(--uha));
}
#lsda {
z-index:calc(var(--usa) * var(--uda));
}
#lcha {
z-index:calc(var(--uca) * var(--uha));
}
#lcda {
z-index:calc(var(--uca) * var(--uda));
}
#lhda {
z-index:calc(var(--uha) * var(--uda));
}
#lsc2 {
z-index:calc(var(--us2) * var(--uc2));
}
#lsh2 {
z-index:calc(var(--us2) * var(--uh2));
}
#lsd2 {
z-index:calc(var(--us2) * var(--ud2));
}
#lch2 {
z-index:calc(var(--uc2) * var(--uh2));
}
#lcd2 {
z-index:calc(var(--uc2) * var(--ud2));
}
#lhd2 {
z-index:calc(var(--uh2) * var(--ud2));
}
#lsc3 {
z-index:calc(var(--us3) * var(--uc3));
}
#lsh3 {
z-index:calc(var(--us3) * var(--uh3));
}
#lsd3 {
z-index:calc(var(--us3) * var(--ud3));
}
#lch3 {
z-index:calc(var(--uc3) * var(--uh3));
}
#lcd3 {
z-index:calc(var(--uc3) * var(--ud3));
}
#lhd3 {
z-index:calc(var(--uh3) * var(--ud3));
}
#lsc4 {
z-index:calc(var(--us4) * var(--uc4));
}
#lsh4 {
z-index:calc(var(--us4) * var(--uh4));
}
#lsd4 {
z-index:calc(var(--us4) * var(--ud4));
}
#lch4 {
z-index:calc(var(--uc4) * var(--uh4));
}
#lcd4 {
z-index:calc(var(--uc4) * var(--ud4));
}
#lhd4 {
z-index:calc(var(--uh4) * var(--ud4));
}
#lsc5 {
z-index:calc(var(--us5) * var(--uc5));
}
#lsh5 {
z-index:calc(var(--us5) * var(--uh5));
}
#lsd5 {
z-index:calc(var(--us5) * var(--ud5));
}
#lch5 {
z-index:calc(var(--uc5) * var(--uh5));
}
#lcd5 {
z-index:calc(var(--uc5) * var(--ud5));
}
#lhd5 {
z-index:calc(var(--uh5) * var(--ud5));
}
#lsc6 {
z-index:calc(var(--us6) * var(--uc6));
}
#lsh6 {
z-index:calc(var(--us6) * var(--uh6));
}
#lsd6 {
z-index:calc(var(--us6) * var(--ud6));
}
#lch6 {
z-index:calc(var(--uc6) * var(--uh6));
}
#lcd6 {
z-index:calc(var(--uc6) * var(--ud6));
}
#lhd6 {
z-index:calc(var(--uh6) * var(--ud6));
}
#lsc7 {
z-index:calc(var(--us7) * var(--uc7));
}
#lsh7 {
z-index:calc(var(--us7) * var(--uh7));
}
#lsd7 {
z-index:calc(var(--us7) * var(--ud7));
}
#lch7 {
z-index:calc(var(--uc7) * var(--uh7));
}
#lcd7 {
z-index:calc(var(--uc7) * var(--ud7));
}
#lhd7 {
z-index:calc(var(--uh7) * var(--ud7));
}
#lsc8 {
z-index:calc(var(--us8) * var(--uc8));
}
#lsh8 {
z-index:calc(var(--us8) * var(--uh8));
}
#lsd8 {
z-index:calc(var(--us8) * var(--ud8));
}
#lch8 {
z-index:calc(var(--uc8) * var(--uh8));
}
#lcd8 {
z-index:calc(var(--uc8) * var(--ud8));
}
#lhd8 {
z-index:calc(var(--uh8) * var(--ud8));
}
#lsc9 {
z-index:calc(var(--us9) * var(--uc9));
}
#lsh9 {
z-index:calc(var(--us9) * var(--uh9));
}
#lsd9 {
z-index:calc(var(--us9) * var(--ud9));
}
#lch9 {
z-index:calc(var(--uc9) * var(--uh9));
}
#lcd9 {
z-index:calc(var(--uc9) * var(--ud9));
}
#lhd9 {
z-index:calc(var(--uh9) * var(--ud9));
}
#lsc0 {
z-index:calc(var(--us0) * var(--uc0));
}
#lsh0 {
z-index:calc(var(--us0) * var(--uh0));
}
#lsd0 {
z-index:calc(var(--us0) * var(--ud0));
}
#lch0 {
z-index:calc(var(--uc0) * var(--uh0));
}
#lcd0 {
z-index:calc(var(--uc0) * var(--ud0));
}
#lhd0 {
z-index:calc(var(--uh0) * var(--ud0));
}
#lscj {
z-index:calc(var(--usj) * var(--ucj));
}
#lshj {
z-index:calc(var(--usj) * var(--uhj));
}
#lsdj {
z-index:calc(var(--usj) * var(--udj));
}
#lchj {
z-index:calc(var(--ucj) * var(--uhj));
}
#lcdj {
z-index:calc(var(--ucj) * var(--udj));
}
#lhdj {
z-index:calc(var(--uhj) * var(--udj));
}
#lscq {
z-index:calc(var(--usq) * var(--ucq));
}
#lshq {
z-index:calc(var(--usq) * var(--uhq));
}
#lsdq {
z-index:calc(var(--usq) * var(--udq));
}
#lchq {
z-index:calc(var(--ucq) * var(--uhq));
}
#lcdq {
z-index:calc(var(--ucq) * var(--udq));
}
#lhdq {
z-index:calc(var(--uhq) * var(--udq));
}
#lsck {
z-index:calc(var(--usk) * var(--uck));
}
#lshk {
z-index:calc(var(--usk) * var(--uhk));
}
#lsdk {
z-index:calc(var(--usk) * var(--udk));
}
#lchk {
z-index:calc(var(--uck) * var(--uhk));
}
#lcdk {
z-index:calc(var(--uck) * var(--udk));
}
#lhdk {
z-index:calc(var(--uhk) * var(--udk));
}
:is(#sca, #sha, #sda):checked ~ #base {
--usa:0;
--dsa:0s;
--wsa:1;
}
:is(#sca, #cha, #cda):checked ~ #base {
--uca:0;
--dca:0s;
--wca:1;
}
:is(#sha, #cha, #hda):checked ~ #base {
--uha:0;
--dha:0s;
--wha:1;
}
:is(#sda, #cda, #hda):checked ~ #base {
--uda:0;
--dda:0s;
--wda:1;
}
:is(#sc2, #sh2, #sd2):checked ~ #base {
--us2:0;
--ds2:0s;
--ws2:1;
}
:is(#sc2, #ch2, #cd2):checked ~ #base {
--uc2:0;
--dc2:0s;
--wc2:1;
}
:is(#sh2, #ch2, #hd2):checked ~ #base {
--uh2:0;
--dh2:0s;
--wh2:1;
}
:is(#sd2, #cd2, #hd2):checked ~ #base {
--ud2:0;
--dd2:0s;
--wd2:1;
}
:is(#sc3, #sh3, #sd3):checked ~ #base {
--us3:0;
--ds3:0s;
--ws3:1;
}
:is(#sc3, #ch3, #cd3):checked ~ #base {
--uc3:0;
--dc3:0s;
--wc3:1;
}
:is(#sh3, #ch3, #hd3):checked ~ #base {
--uh3:0;
--dh3:0s;
--wh3:1;
}
:is(#sd3, #cd3, #hd3):checked ~ #base {
--ud3:0;
--dd3:0s;
--wd3:1;
}
:is(#sc4, #sh4, #sd4):checked ~ #base {
--us4:0;
--ds4:0s;
--ws4:1;
}
:is(#sc4, #ch4, #cd4):checked ~ #base {
--uc4:0;
--dc4:0s;
--wc4:1;
}
:is(#sh4, #ch4, #hd4):checked ~ #base {
--uh4:0;
--dh4:0s;
--wh4:1;
}
:is(#sd4, #cd4, #hd4):checked ~ #base {
--ud4:0;
--dd4:0s;
--wd4:1;
}
:is(#sc5, #sh5, #sd5):checked ~ #base {
--us5:0;
--ds5:0s;
--ws5:1;
}
:is(#sc5, #ch5, #cd5):checked ~ #base {
--uc5:0;
--dc5:0s;
--wc5:1;
}
:is(#sh5, #ch5, #hd5):checked ~ #base {
--uh5:0;
--dh5:0s;
--wh5:1;
}
:is(#sd5, #cd5, #hd5):checked ~ #base {
--ud5:0;
--dd5:0s;
--wd5:1;
}
:is(#sc6, #sh6, #sd6):checked ~ #base {
--us6:0;
--ds6:0s;
--ws6:1;
}
:is(#sc6, #ch6, #cd6):checked ~ #base {
--uc6:0;
--dc6:0s;
--wc6:1;
}
:is(#sh6, #ch6, #hd6):checked ~ #base {
--uh6:0;
--dh6:0s;
--wh6:1;
}
:is(#sd6, #cd6, #hd6):checked ~ #base {
--ud6:0;
--dd6:0s;
--wd6:1;
}
:is(#sc7, #sh7, #sd7):checked ~ #base {
--us7:0;
--ds7:0s;
--ws7:1;
}
:is(#sc7, #ch7, #cd7):checked ~ #base {
--uc7:0;
--dc7:0s;
--wc7:1;
}
:is(#sh7, #ch7, #hd7):checked ~ #base {
--uh7:0;
--dh7:0s;
--wh7:1;
}
:is(#sd7, #cd7, #hd7):checked ~ #base {
--ud7:0;
--dd7:0s;
--wd7:1;
}
:is(#sc8, #sh8, #sd8):checked ~ #base {
--us8:0;
--ds8:0s;
--ws8:1;
}
:is(#sc8, #ch8, #cd8):checked ~ #base {
--uc8:0;
--dc8:0s;
--wc8:1;
}
:is(#sh8, #ch8, #hd8):checked ~ #base {
--uh8:0;
--dh8:0s;
--wh8:1;
}
:is(#sd8, #cd8, #hd8):checked ~ #base {
--ud8:0;
--dd8:0s;
--wd8:1;
}
:is(#sc9, #sh9, #sd9):checked ~ #base {
--us9:0;
--ds9:0s;
--ws9:1;
}
:is(#sc9, #ch9, #cd9):checked ~ #base {
--uc9:0;
--dc9:0s;
--wc9:1;
}
:is(#sh9, #ch9, #hd9):checked ~ #base {
--uh9:0;
--dh9:0s;
--wh9:1;
}
:is(#sd9, #cd9, #hd9):checked ~ #base {
--ud9:0;
--dd9:0s;
--wd9:1;
}
:is(#sc0, #sh0, #sd0):checked ~ #base {
--us0:0;
--ds0:0s;
--ws0:1;
}
:is(#sc0, #ch0, #cd0):checked ~ #base {
--uc0:0;
--dc0:0s;
--wc0:1;
}
:is(#sh0, #ch0, #hd0):checked ~ #base {
--uh0:0;
--dh0:0s;
--wh0:1;
}
:is(#sd0, #cd0, #hd0):checked ~ #base {
--ud0:0;
--dd0:0s;
--wd0:1;
}
:is(#scj, #shj, #sdj):checked ~ #base {
--usj:0;
--dsj:0s;
--wsj:1;
}
:is(#scj, #chj, #cdj):checked ~ #base {
--ucj:0;
--dcj:0s;
--wcj:1;
}
:is(#shj, #chj, #hdj):checked ~ #base {
--uhj:0;
--dhj:0s;
--whj:1;
}
:is(#sdj, #cdj, #hdj):checked ~ #base {
--udj:0;
--ddj:0s;
--wdj:1;
}
:is(#scq, #shq, #sdq):checked ~ #base {
--usq:0;
--dsq:0s;
--wsq:1;
}
:is(#scq, #chq, #cdq):checked ~ #base {
--ucq:0;
--dcq:0s;
--wcq:1;
}
:is(#shq, #chq, #hdq):checked ~ #base {
--uhq:0;
--dhq:0s;
--whq:1;
}
:is(#sdq, #cdq, #hdq):checked ~ #base {
--udq:0;
--ddq:0s;
--wdq:1;
}
:is(#sck, #shk, #sdk):checked ~ #base {
--usk:0;
--dsk:0s;
--wsk:1;
}
:is(#sck, #chk, #cdk):checked ~ #base {
--uck:0;
--dck:0s;
--wck:1;
}
:is(#shk, #chk, #hdk):checked ~ #base {
--uhk:0;
--dhk:0s;
--whk:1;
}
:is(#sdk, #cdk, #hdk):checked ~ #base {
--udk:0;
--ddk:0s;
--wdk:1;
}
#sca:checked ~ #base :is(#lsa, #lca, #lsca),
#sha:checked ~ #base :is(#lsa, #lha, #lsha),
#sda:checked ~ #base :is(#lsa, #lda, #lsda),
#cha:checked ~ #base :is(#lca, #lha, #lcha),
#cda:checked ~ #base :is(#lca, #lda, #lcda),
#hda:checked ~ #base :is(#lha, #lda, #lhda),
#sc2:checked ~ #base :is(#ls2, #lc2, #lsc2),
#sh2:checked ~ #base :is(#ls2, #lh2, #lsh2),
#sd2:checked ~ #base :is(#ls2, #ld2, #lsd2),
#ch2:checked ~ #base :is(#lc2, #lh2, #lch2),
#cd2:checked ~ #base :is(#lc2, #ld2, #lcd2),
#hd2:checked ~ #base :is(#lh2, #ld2, #lhd2),
#sc3:checked ~ #base :is(#ls3, #lc3, #lsc3),
#sh3:checked ~ #base :is(#ls3, #lh3, #lsh3),
#sd3:checked ~ #base :is(#ls3, #ld3, #lsd3),
#ch3:checked ~ #base :is(#lc3, #lh3, #lch3),
#cd3:checked ~ #base :is(#lc3, #ld3, #lcd3),
#hd3:checked ~ #base :is(#lh3, #ld3, #lhd3),
#sc4:checked ~ #base :is(#ls4, #lc4, #lsc4),
#sh4:checked ~ #base :is(#ls4, #lh4, #lsh4),
#sd4:checked ~ #base :is(#ls4, #ld4, #lsd4),
#ch4:checked ~ #base :is(#lc4, #lh4, #lch4),
#cd4:checked ~ #base :is(#lc4, #ld4, #lcd4),
#hd4:checked ~ #base :is(#lh4, #ld4, #lhd4),
#sc5:checked ~ #base :is(#ls5, #lc5, #lsc5),
#sh5:checked ~ #base :is(#ls5, #lh5, #lsh5),
#sd5:checked ~ #base :is(#ls5, #ld5, #lsd5),
#ch5:checked ~ #base :is(#lc5, #lh5, #lch5),
#cd5:checked ~ #base :is(#lc5, #ld5, #lcd5),
#hd5:checked ~ #base :is(#lh5, #ld5, #lhd5),
#sc6:checked ~ #base :is(#ls6, #lc6, #lsc6),
#sh6:checked ~ #base :is(#ls6, #lh6, #lsh6),
#sd6:checked ~ #base :is(#ls6, #ld6, #lsd6),
#ch6:checked ~ #base :is(#lc6, #lh6, #lch6),
#cd6:checked ~ #base :is(#lc6, #ld6, #lcd6),
#hd6:checked ~ #base :is(#lh6, #ld6, #lhd6),
#sc7:checked ~ #base :is(#ls7, #lc7, #lsc7),
#sh7:checked ~ #base :is(#ls7, #lh7, #lsh7),
#sd7:checked ~ #base :is(#ls7, #ld7, #lsd7),
#ch7:checked ~ #base :is(#lc7, #lh7, #lch7),
#cd7:checked ~ #base :is(#lc7, #ld7, #lcd7),
#hd7:checked ~ #base :is(#lh7, #ld7, #lhd7),
#sc8:checked ~ #base :is(#ls8, #lc8, #lsc8),
#sh8:checked ~ #base :is(#ls8, #lh8, #lsh8),
#sd8:checked ~ #base :is(#ls8, #ld8, #lsd8),
#ch8:checked ~ #base :is(#lc8, #lh8, #lch8),
#cd8:checked ~ #base :is(#lc8, #ld8, #lcd8),
#hd8:checked ~ #base :is(#lh8, #ld8, #lhd8),
#sc9:checked ~ #base :is(#ls9, #lc9, #lsc9),
#sh9:checked ~ #base :is(#ls9, #lh9, #lsh9),
#sd9:checked ~ #base :is(#ls9, #ld9, #lsd9),
#ch9:checked ~ #base :is(#lc9, #lh9, #lch9),
#cd9:checked ~ #base :is(#lc9, #ld9, #lcd9),
#hd9:checked ~ #base :is(#lh9, #ld9, #lhd9),
#sc0:checked ~ #base :is(#ls0, #lc0, #lsc0),
#sh0:checked ~ #base :is(#ls0, #lh0, #lsh0),
#sd0:checked ~ #base :is(#ls0, #ld0, #lsd0),
#ch0:checked ~ #base :is(#lc0, #lh0, #lch0),
#cd0:checked ~ #base :is(#lc0, #ld0, #lcd0),
#hd0:checked ~ #base :is(#lh0, #ld0, #lhd0),
#scj:checked ~ #base :is(#lsj, #lcj, #lscj),
#shj:checked ~ #base :is(#lsj, #lhj, #lshj),
#sdj:checked ~ #base :is(#lsj, #ldj, #lsdj),
#chj:checked ~ #base :is(#lcj, #lhj, #lchj),
#cdj:checked ~ #base :is(#lcj, #ldj, #lcdj),
#hdj:checked ~ #base :is(#lhj, #ldj, #lhdj),
#scq:checked ~ #base :is(#lsq, #lcq, #lscq),
#shq:checked ~ #base :is(#lsq, #lhq, #lshq),
#sdq:checked ~ #base :is(#lsq, #ldq, #lsdq),
#chq:checked ~ #base :is(#lcq, #lhq, #lchq),
#cdq:checked ~ #base :is(#lcq, #ldq, #lcdq),
#hdq:checked ~ #base :is(#lhq, #ldq, #lhdq),
#sck:checked ~ #base :is(#lsk, #lck, #lsck),
#shk:checked ~ #base :is(#lsk, #lhk, #lshk),
#sdk:checked ~ #base :is(#lsk, #ldk, #lsdk),
#chk:checked ~ #base :is(#lck, #lhk, #lchk),
#cdk:checked ~ #base :is(#lck, #ldk, #lcdk),
#hdk:checked ~ #base :is(#lhk, #ldk, #lhdk) {
visibility:hidden;
}
/* ゲーム開始 */
#start-box {
position:absolute;
left:calc(50% - 100px);
top:80px;
width:200px;
height:80px;
text-align:center;
background-color:white;
border:solid 4px #C06000;
border-radius:6px;
z-index:1;
}
#start-msg {
margin-top:14px;
text-align:center;
font-size:12px;
font-weight:bold;
line-height:1;
}
#start-btn {
display:inline-block;
height:30px;
margin-top:12px;
padding-left:10px;
padding-right:10px;
text-align:center;
color:white;
font-size:12px;
line-height:30px;
background-color:#0000A0;
border-radius:4px;
cursor:pointer;
}
#start:checked ~ #base #start-box {
visibility:hidden;
}
#start:checked ~ #base .card {
animation-play-state:paused;
visibility:visible;
}
#start:checked ~ #base #reset-box {
transition:z-index 0s 2s;
}
/* もう一度 */
#reset-box {
position:absolute;
left:calc(50% - 50px);
top:90px;
width:100px;
height:60px;
text-align:center;
background-color:white;
border:solid 4px #C06000;
border-radius:6px;
/* 全部取った？ */
z-index:calc(var(--wsa) * var(--ws2) * var(--ws3) * var(--ws4) * var(--ws5) * var(--ws6) * var(--ws7)
* var(--ws8) * var(--ws9) * var(--ws0) * var(--wsj) * var(--wsq) * var(--wsk)
* var(--wca) * var(--wc2) * var(--wc3) * var(--wc4) * var(--wc5) * var(--wc6) * var(--wc7)
* var(--wc8) * var(--wc9) * var(--wc0) * var(--wcj) * var(--wcq) * var(--wck)
* var(--wha) * var(--wh2) * var(--wh3) * var(--wh4) * var(--wh5) * var(--wh6) * var(--wh7)
* var(--wh8) * var(--wh9) * var(--wh0) * var(--whj) * var(--whq) * var(--whk)
* var(--wda) * var(--wd2) * var(--wd3) * var(--wd4) * var(--wd5) * var(--wd6) * var(--wd7)
* var(--wd8) * var(--wd9) * var(--wd0) * var(--wdj) * var(--wdq) * var(--wdk));
}
#reset-btn {
display:inline-block;
height:30px;
margin-top:15px;
padding-left:10px;
padding-right:10px;
text-align:center;
color:white;
font-size:12px;
line-height:30px;
background-color:#0000A0;
border-radius:4px;
cursor:pointer;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート 神経衰弱</DIV>
<BR>
<FORM>
<!-- 開ける -->
<INPUT TYPE=BUTTON ID="sa">
<INPUT TYPE=BUTTON ID="s2">
<INPUT TYPE=BUTTON ID="s3">
<INPUT TYPE=BUTTON ID="s4">
<INPUT TYPE=BUTTON ID="s5">
<INPUT TYPE=BUTTON ID="s6">
<INPUT TYPE=BUTTON ID="s7">
<INPUT TYPE=BUTTON ID="s8">
<INPUT TYPE=BUTTON ID="s9">
<INPUT TYPE=BUTTON ID="s0">
<INPUT TYPE=BUTTON ID="sj">
<INPUT TYPE=BUTTON ID="sq">
<INPUT TYPE=BUTTON ID="sk">
<INPUT TYPE=BUTTON ID="ca">
<INPUT TYPE=BUTTON ID="c2">
<INPUT TYPE=BUTTON ID="c3">
<INPUT TYPE=BUTTON ID="c4">
<INPUT TYPE=BUTTON ID="c5">
<INPUT TYPE=BUTTON ID="c6">
<INPUT TYPE=BUTTON ID="c7">
<INPUT TYPE=BUTTON ID="c8">
<INPUT TYPE=BUTTON ID="c9">
<INPUT TYPE=BUTTON ID="c0">
<INPUT TYPE=BUTTON ID="cj">
<INPUT TYPE=BUTTON ID="cq">
<INPUT TYPE=BUTTON ID="ck">
<INPUT TYPE=BUTTON ID="ha">
<INPUT TYPE=BUTTON ID="h2">
<INPUT TYPE=BUTTON ID="h3">
<INPUT TYPE=BUTTON ID="h4">
<INPUT TYPE=BUTTON ID="h5">
<INPUT TYPE=BUTTON ID="h6">
<INPUT TYPE=BUTTON ID="h7">
<INPUT TYPE=BUTTON ID="h8">
<INPUT TYPE=BUTTON ID="h9">
<INPUT TYPE=BUTTON ID="h0">
<INPUT TYPE=BUTTON ID="hj">
<INPUT TYPE=BUTTON ID="hq">
<INPUT TYPE=BUTTON ID="hk">
<INPUT TYPE=BUTTON ID="da">
<INPUT TYPE=BUTTON ID="d2">
<INPUT TYPE=BUTTON ID="d3">
<INPUT TYPE=BUTTON ID="d4">
<INPUT TYPE=BUTTON ID="d5">
<INPUT TYPE=BUTTON ID="d6">
<INPUT TYPE=BUTTON ID="d7">
<INPUT TYPE=BUTTON ID="d8">
<INPUT TYPE=BUTTON ID="d9">
<INPUT TYPE=BUTTON ID="d0">
<INPUT TYPE=BUTTON ID="dj">
<INPUT TYPE=BUTTON ID="dq">
<INPUT TYPE=BUTTON ID="dk">
<!-- 取る -->
<INPUT TYPE=CHECKBOX ID="sca">
<INPUT TYPE=CHECKBOX ID="sha">
<INPUT TYPE=CHECKBOX ID="sda">
<INPUT TYPE=CHECKBOX ID="cha">
<INPUT TYPE=CHECKBOX ID="cda">
<INPUT TYPE=CHECKBOX ID="hda">
<INPUT TYPE=CHECKBOX ID="sc2">
<INPUT TYPE=CHECKBOX ID="sh2">
<INPUT TYPE=CHECKBOX ID="sd2">
<INPUT TYPE=CHECKBOX ID="ch2">
<INPUT TYPE=CHECKBOX ID="cd2">
<INPUT TYPE=CHECKBOX ID="hd2">
<INPUT TYPE=CHECKBOX ID="sc3">
<INPUT TYPE=CHECKBOX ID="sh3">
<INPUT TYPE=CHECKBOX ID="sd3">
<INPUT TYPE=CHECKBOX ID="ch3">
<INPUT TYPE=CHECKBOX ID="cd3">
<INPUT TYPE=CHECKBOX ID="hd3">
<INPUT TYPE=CHECKBOX ID="sc4">
<INPUT TYPE=CHECKBOX ID="sh4">
<INPUT TYPE=CHECKBOX ID="sd4">
<INPUT TYPE=CHECKBOX ID="ch4">
<INPUT TYPE=CHECKBOX ID="cd4">
<INPUT TYPE=CHECKBOX ID="hd4">
<INPUT TYPE=CHECKBOX ID="sc5">
<INPUT TYPE=CHECKBOX ID="sh5">
<INPUT TYPE=CHECKBOX ID="sd5">
<INPUT TYPE=CHECKBOX ID="ch5">
<INPUT TYPE=CHECKBOX ID="cd5">
<INPUT TYPE=CHECKBOX ID="hd5">
<INPUT TYPE=CHECKBOX ID="sc6">
<INPUT TYPE=CHECKBOX ID="sh6">
<INPUT TYPE=CHECKBOX ID="sd6">
<INPUT TYPE=CHECKBOX ID="ch6">
<INPUT TYPE=CHECKBOX ID="cd6">
<INPUT TYPE=CHECKBOX ID="hd6">
<INPUT TYPE=CHECKBOX ID="sc7">
<INPUT TYPE=CHECKBOX ID="sh7">
<INPUT TYPE=CHECKBOX ID="sd7">
<INPUT TYPE=CHECKBOX ID="ch7">
<INPUT TYPE=CHECKBOX ID="cd7">
<INPUT TYPE=CHECKBOX ID="hd7">
<INPUT TYPE=CHECKBOX ID="sc8">
<INPUT TYPE=CHECKBOX ID="sh8">
<INPUT TYPE=CHECKBOX ID="sd8">
<INPUT TYPE=CHECKBOX ID="ch8">
<INPUT TYPE=CHECKBOX ID="cd8">
<INPUT TYPE=CHECKBOX ID="hd8">
<INPUT TYPE=CHECKBOX ID="sc9">
<INPUT TYPE=CHECKBOX ID="sh9">
<INPUT TYPE=CHECKBOX ID="sd9">
<INPUT TYPE=CHECKBOX ID="ch9">
<INPUT TYPE=CHECKBOX ID="cd9">
<INPUT TYPE=CHECKBOX ID="hd9">
<INPUT TYPE=CHECKBOX ID="sc0">
<INPUT TYPE=CHECKBOX ID="sh0">
<INPUT TYPE=CHECKBOX ID="sd0">
<INPUT TYPE=CHECKBOX ID="ch0">
<INPUT TYPE=CHECKBOX ID="cd0">
<INPUT TYPE=CHECKBOX ID="hd0">
<INPUT TYPE=CHECKBOX ID="scj">
<INPUT TYPE=CHECKBOX ID="shj">
<INPUT TYPE=CHECKBOX ID="sdj">
<INPUT TYPE=CHECKBOX ID="chj">
<INPUT TYPE=CHECKBOX ID="cdj">
<INPUT TYPE=CHECKBOX ID="hdj">
<INPUT TYPE=CHECKBOX ID="scq">
<INPUT TYPE=CHECKBOX ID="shq">
<INPUT TYPE=CHECKBOX ID="sdq">
<INPUT TYPE=CHECKBOX ID="chq">
<INPUT TYPE=CHECKBOX ID="cdq">
<INPUT TYPE=CHECKBOX ID="hdq">
<INPUT TYPE=CHECKBOX ID="sck">
<INPUT TYPE=CHECKBOX ID="shk">
<INPUT TYPE=CHECKBOX ID="sdk">
<INPUT TYPE=CHECKBOX ID="chk">
<INPUT TYPE=CHECKBOX ID="cdk">
<INPUT TYPE=CHECKBOX ID="hdk">
<INPUT TYPE=CHECKBOX ID="start">
<INPUT TYPE=BUTTON ID="down">
<INPUT TYPE=RESET ID="reset">
<DIV ID="base">
<DIV ID="start-box">
<DIV ID="start-msg">シャッフルしています。</DIV>
<LABEL ID="start-btn" FOR="start">ゲーム開始</LABEL>
</DIV>
<DIV ID="reset-box">
<LABEL ID="reset-btn" FOR="reset">もう一度</LABEL>
</DIV>
<DIV ID="grid">
<DIV ID="mask1"></DIV>
<!-- カード -->
<DIV ID="lsa" CLASS="card spade">A<LABEL FOR="sa"></LABEL></DIV>
<DIV ID="ls2" CLASS="card spade">2<LABEL FOR="s2"></LABEL></DIV>
<DIV ID="ls3" CLASS="card spade">3<LABEL FOR="s3"></LABEL></DIV>
<DIV ID="ls4" CLASS="card spade">4<LABEL FOR="s4"></LABEL></DIV>
<DIV ID="ls5" CLASS="card spade">5<LABEL FOR="s5"></LABEL></DIV>
<DIV ID="ls6" CLASS="card spade">6<LABEL FOR="s6"></LABEL></DIV>
<DIV ID="ls7" CLASS="card spade">7<LABEL FOR="s7"></LABEL></DIV>
<DIV ID="ls8" CLASS="card spade">8<LABEL FOR="s8"></LABEL></DIV>
<DIV ID="ls9" CLASS="card spade">9<LABEL FOR="s9"></LABEL></DIV>
<DIV ID="ls0" CLASS="card spade"><DIV CLASS="narrow">10</DIV><LABEL FOR="s0"></LABEL></DIV>
<DIV ID="lsj" CLASS="card spade">J<LABEL FOR="sj"></LABEL></DIV>
<DIV ID="lsq" CLASS="card spade">Q<LABEL FOR="sq"></LABEL></DIV>
<DIV ID="lsk" CLASS="card spade">K<LABEL FOR="sk"></LABEL></DIV>
<DIV ID="lca" CLASS="card club">A<LABEL FOR="ca"></LABEL></DIV>
<DIV ID="lc2" CLASS="card club">2<LABEL FOR="c2"></LABEL></DIV>
<DIV ID="lc3" CLASS="card club">3<LABEL FOR="c3"></LABEL></DIV>
<DIV ID="lc4" CLASS="card club">4<LABEL FOR="c4"></LABEL></DIV>
<DIV ID="lc5" CLASS="card club">5<LABEL FOR="c5"></LABEL></DIV>
<DIV ID="lc6" CLASS="card club">6<LABEL FOR="c6"></LABEL></DIV>
<DIV ID="lc7" CLASS="card club">7<LABEL FOR="c7"></LABEL></DIV>
<DIV ID="lc8" CLASS="card club">8<LABEL FOR="c8"></LABEL></DIV>
<DIV ID="lc9" CLASS="card club">9<LABEL FOR="c9"></LABEL></DIV>
<DIV ID="lc0" CLASS="card club"><DIV CLASS="narrow">10</DIV><LABEL FOR="c0"></LABEL></DIV>
<DIV ID="lcj" CLASS="card club">J<LABEL FOR="cj"></LABEL></DIV>
<DIV ID="lcq" CLASS="card club">Q<LABEL FOR="cq"></LABEL></DIV>
<DIV ID="lck" CLASS="card club">K<LABEL FOR="ck"></LABEL></DIV>
<DIV ID="lha" CLASS="card heart">A<LABEL FOR="ha"></LABEL></DIV>
<DIV ID="lh2" CLASS="card heart">2<LABEL FOR="h2"></LABEL></DIV>
<DIV ID="lh3" CLASS="card heart">3<LABEL FOR="h3"></LABEL></DIV>
<DIV ID="lh4" CLASS="card heart">4<LABEL FOR="h4"></LABEL></DIV>
<DIV ID="lh5" CLASS="card heart">5<LABEL FOR="h5"></LABEL></DIV>
<DIV ID="lh6" CLASS="card heart">6<LABEL FOR="h6"></LABEL></DIV>
<DIV ID="lh7" CLASS="card heart">7<LABEL FOR="h7"></LABEL></DIV>
<DIV ID="lh8" CLASS="card heart">8<LABEL FOR="h8"></LABEL></DIV>
<DIV ID="lh9" CLASS="card heart">9<LABEL FOR="h9"></LABEL></DIV>
<DIV ID="lh0" CLASS="card heart"><DIV CLASS="narrow">10</DIV><LABEL FOR="h0"></LABEL></DIV>
<DIV ID="lhj" CLASS="card heart">J<LABEL FOR="hj"></LABEL></DIV>
<DIV ID="lhq" CLASS="card heart">Q<LABEL FOR="hq"></LABEL></DIV>
<DIV ID="lhk" CLASS="card heart">K<LABEL FOR="hk"></LABEL></DIV>
<DIV ID="lda" CLASS="card diamond">A<LABEL FOR="da"></LABEL></DIV>
<DIV ID="ld2" CLASS="card diamond">2<LABEL FOR="d2"></LABEL></DIV>
<DIV ID="ld3" CLASS="card diamond">3<LABEL FOR="d3"></LABEL></DIV>
<DIV ID="ld4" CLASS="card diamond">4<LABEL FOR="d4"></LABEL></DIV>
<DIV ID="ld5" CLASS="card diamond">5<LABEL FOR="d5"></LABEL></DIV>
<DIV ID="ld6" CLASS="card diamond">6<LABEL FOR="d6"></LABEL></DIV>
<DIV ID="ld7" CLASS="card diamond">7<LABEL FOR="d7"></LABEL></DIV>
<DIV ID="ld8" CLASS="card diamond">8<LABEL FOR="d8"></LABEL></DIV>
<DIV ID="ld9" CLASS="card diamond">9<LABEL FOR="d9"></LABEL></DIV>
<DIV ID="ld0" CLASS="card diamond"><DIV CLASS="narrow">10</DIV><LABEL FOR="d0"></LABEL></DIV>
<DIV ID="ldj" CLASS="card diamond">J<LABEL FOR="dj"></LABEL></DIV>
<DIV ID="ldq" CLASS="card diamond">Q<LABEL FOR="dq"></LABEL></DIV>
<DIV ID="ldk" CLASS="card diamond">K<LABEL FOR="dk"></LABEL></DIV>
</DIV>
<DIV ID="act">
<LABEL ID="down-btn" FOR="down">伏せる</LABEL>
<!-- 取る -->
<LABEL ID="lsca" CLASS="win-btn" FOR="sca"></LABEL>
<LABEL ID="lsha" CLASS="win-btn" FOR="sha"></LABEL>
<LABEL ID="lsda" CLASS="win-btn" FOR="sda"></LABEL>
<LABEL ID="lcha" CLASS="win-btn" FOR="cha"></LABEL>
<LABEL ID="lcda" CLASS="win-btn" FOR="cda"></LABEL>
<LABEL ID="lhda" CLASS="win-btn" FOR="hda"></LABEL>
<LABEL ID="lsc2" CLASS="win-btn" FOR="sc2"></LABEL>
<LABEL ID="lsh2" CLASS="win-btn" FOR="sh2"></LABEL>
<LABEL ID="lsd2" CLASS="win-btn" FOR="sd2"></LABEL>
<LABEL ID="lch2" CLASS="win-btn" FOR="ch2"></LABEL>
<LABEL ID="lcd2" CLASS="win-btn" FOR="cd2"></LABEL>
<LABEL ID="lhd2" CLASS="win-btn" FOR="hd2"></LABEL>
<LABEL ID="lsc3" CLASS="win-btn" FOR="sc3"></LABEL>
<LABEL ID="lsh3" CLASS="win-btn" FOR="sh3"></LABEL>
<LABEL ID="lsd3" CLASS="win-btn" FOR="sd3"></LABEL>
<LABEL ID="lch3" CLASS="win-btn" FOR="ch3"></LABEL>
<LABEL ID="lcd3" CLASS="win-btn" FOR="cd3"></LABEL>
<LABEL ID="lhd3" CLASS="win-btn" FOR="hd3"></LABEL>
<LABEL ID="lsc4" CLASS="win-btn" FOR="sc4"></LABEL>
<LABEL ID="lsh4" CLASS="win-btn" FOR="sh4"></LABEL>
<LABEL ID="lsd4" CLASS="win-btn" FOR="sd4"></LABEL>
<LABEL ID="lch4" CLASS="win-btn" FOR="ch4"></LABEL>
<LABEL ID="lcd4" CLASS="win-btn" FOR="cd4"></LABEL>
<LABEL ID="lhd4" CLASS="win-btn" FOR="hd4"></LABEL>
<LABEL ID="lsc5" CLASS="win-btn" FOR="sc5"></LABEL>
<LABEL ID="lsh5" CLASS="win-btn" FOR="sh5"></LABEL>
<LABEL ID="lsd5" CLASS="win-btn" FOR="sd5"></LABEL>
<LABEL ID="lch5" CLASS="win-btn" FOR="ch5"></LABEL>
<LABEL ID="lcd5" CLASS="win-btn" FOR="cd5"></LABEL>
<LABEL ID="lhd5" CLASS="win-btn" FOR="hd5"></LABEL>
<LABEL ID="lsc6" CLASS="win-btn" FOR="sc6"></LABEL>
<LABEL ID="lsh6" CLASS="win-btn" FOR="sh6"></LABEL>
<LABEL ID="lsd6" CLASS="win-btn" FOR="sd6"></LABEL>
<LABEL ID="lch6" CLASS="win-btn" FOR="ch6"></LABEL>
<LABEL ID="lcd6" CLASS="win-btn" FOR="cd6"></LABEL>
<LABEL ID="lhd6" CLASS="win-btn" FOR="hd6"></LABEL>
<LABEL ID="lsc7" CLASS="win-btn" FOR="sc7"></LABEL>
<LABEL ID="lsh7" CLASS="win-btn" FOR="sh7"></LABEL>
<LABEL ID="lsd7" CLASS="win-btn" FOR="sd7"></LABEL>
<LABEL ID="lch7" CLASS="win-btn" FOR="ch7"></LABEL>
<LABEL ID="lcd7" CLASS="win-btn" FOR="cd7"></LABEL>
<LABEL ID="lhd7" CLASS="win-btn" FOR="hd7"></LABEL>
<LABEL ID="lsc8" CLASS="win-btn" FOR="sc8"></LABEL>
<LABEL ID="lsh8" CLASS="win-btn" FOR="sh8"></LABEL>
<LABEL ID="lsd8" CLASS="win-btn" FOR="sd8"></LABEL>
<LABEL ID="lch8" CLASS="win-btn" FOR="ch8"></LABEL>
<LABEL ID="lcd8" CLASS="win-btn" FOR="cd8"></LABEL>
<LABEL ID="lhd8" CLASS="win-btn" FOR="hd8"></LABEL>
<LABEL ID="lsc9" CLASS="win-btn" FOR="sc9"></LABEL>
<LABEL ID="lsh9" CLASS="win-btn" FOR="sh9"></LABEL>
<LABEL ID="lsd9" CLASS="win-btn" FOR="sd9"></LABEL>
<LABEL ID="lch9" CLASS="win-btn" FOR="ch9"></LABEL>
<LABEL ID="lcd9" CLASS="win-btn" FOR="cd9"></LABEL>
<LABEL ID="lhd9" CLASS="win-btn" FOR="hd9"></LABEL>
<LABEL ID="lsc0" CLASS="win-btn" FOR="sc0"></LABEL>
<LABEL ID="lsh0" CLASS="win-btn" FOR="sh0"></LABEL>
<LABEL ID="lsd0" CLASS="win-btn" FOR="sd0"></LABEL>
<LABEL ID="lch0" CLASS="win-btn" FOR="ch0"></LABEL>
<LABEL ID="lcd0" CLASS="win-btn" FOR="cd0"></LABEL>
<LABEL ID="lhd0" CLASS="win-btn" FOR="hd0"></LABEL>
<LABEL ID="lscj" CLASS="win-btn" FOR="scj"></LABEL>
<LABEL ID="lshj" CLASS="win-btn" FOR="shj"></LABEL>
<LABEL ID="lsdj" CLASS="win-btn" FOR="sdj"></LABEL>
<LABEL ID="lchj" CLASS="win-btn" FOR="chj"></LABEL>
<LABEL ID="lcdj" CLASS="win-btn" FOR="cdj"></LABEL>
<LABEL ID="lhdj" CLASS="win-btn" FOR="hdj"></LABEL>
<LABEL ID="lscq" CLASS="win-btn" FOR="scq"></LABEL>
<LABEL ID="lshq" CLASS="win-btn" FOR="shq"></LABEL>
<LABEL ID="lsdq" CLASS="win-btn" FOR="sdq"></LABEL>
<LABEL ID="lchq" CLASS="win-btn" FOR="chq"></LABEL>
<LABEL ID="lcdq" CLASS="win-btn" FOR="cdq"></LABEL>
<LABEL ID="lhdq" CLASS="win-btn" FOR="hdq"></LABEL>
<LABEL ID="lsck" CLASS="win-btn" FOR="sck"></LABEL>
<LABEL ID="lshk" CLASS="win-btn" FOR="shk"></LABEL>
<LABEL ID="lsdk" CLASS="win-btn" FOR="sdk"></LABEL>
<LABEL ID="lchk" CLASS="win-btn" FOR="chk"></LABEL>
<LABEL ID="lcdk" CLASS="win-btn" FOR="cdk"></LABEL>
<LABEL ID="lhdk" CLASS="win-btn" FOR="hdk"></LABEL>
<DIV ID="mask2"></DIV>
</DIV>
</DIV>
</FORM>
</BODY>
</HTML>
|
