<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート マスターマインド</TITLE>
<STYLE TYPE="text/css">
<!--
@keyframes rn-1 {
from {
--rn-1:1;
}
to {
--rn-1:6;
}
}
@keyframes rn-2 {
from {
--rn-2:1;
}
to {
--rn-2:5;
}
}
@keyframes rn-3 {
from {
--rn-3:1;
}
to {
--rn-3:4;
}
}
@keyframes rn-4 {
from {
--rn-4:1;
}
to {
--rn-4:3;
}
}
@property --rn-1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --rn-2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --rn-3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --rn-4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cd-1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cd-2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cd-3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cd-4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ct-1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ct-2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ct-3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --ct-4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cc-1-1 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-1-2 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-2-1 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-2-2 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-3-1 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-3-2 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-4-1 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-4-2 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --row-01 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-02 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-03 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-04 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-05 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-06 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-07 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-08 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-09 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-10 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-11 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --row-12 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --win {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cg-1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cg-2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cg-3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cg-4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cc-1 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
@property --cc-2 {
syntax:'<color>';
inherits:true;
initial-value:black;
}
:root {
--board:#B07000;
--hole:#7B4E00;
--sep:#602000;
--peg-1-1:#FF6060;
--peg-1-2:#A00000;
--peg-2-1:#40FF40;
--peg-2-2:#008000;
--peg-3-1:#6060FF;
--peg-3-2:#000090;
--peg-4-1:#FFFF60;
--peg-4-2:#808000;
--peg-5-1:#A070C0;
--peg-5-2:#500060;
--peg-6-1:#60FFFF;
--peg-6-2:#009090;
}
body {
background-color:#CCFFFF;
}
#title {
color:#CC0000;
font-size:large;
font-weight:bold;
text-align:center;
}
input {
display:none;
}
#code {
animation:rn-1 510ms steps(6, jump-none) infinite,
rn-2 400ms steps(5, jump-none) infinite,
rn-3 300ms steps(4, jump-none) infinite,
rn-4 210ms steps(3, jump-none) infinite;
}
#base {
position:relative;
width:218px;
height:455px;
padding:20px;
margin-left:auto;
margin-right:auto;
background-color:var(--board);
border-radius:6px;
user-select:none;
--cd-1:1;
--cd-2:1;
--cd-3:1;
--cd-4:1;
--ct-1:0;
--ct-2:0;
--ct-3:0;
--ct-4:0;
--cc-1-1:black;
--cc-1-2:black;
--cc-2-1:black;
--cc-2-2:black;
--cc-3-1:black;
--cc-3-2:black;
--cc-4-1:black;
--cc-4-2:black;
--row-01:0;
--row-02:0;
--row-03:0;
--row-04:0;
--row-05:0;
--row-06:0;
--row-07:0;
--row-08:0;
--row-09:0;
--row-10:0;
--row-11:0;
--row-12:0;
--win-w1:calc(var(--ct-1) - var(--cd-1));
--win-w2:calc(var(--ct-2) - var(--cd-2));
--win-w3:calc(var(--ct-3) - var(--cd-3));
--win-w4:calc(var(--ct-4) - var(--cd-4));
--win:calc(1 - min(var(--win-w1) * var(--win-w1)
+ var(--win-w2) * var(--win-w2)
+ var(--win-w3) * var(--win-w3)
+ var(--win-w4) * var(--win-w4), 1));
transition:--cd-1 0s 10000s,
--cd-2 0s 10000s,
--cd-3 0s 10000s,
--cd-4 0s 10000s,
--ct-1 0s 10000s,
--ct-2 0s 10000s,
--ct-3 0s 10000s,
--ct-4 0s 10000s,
--cc-1-1 0s 10000s, --cc-1-2 0s 10000s,
--cc-2-1 0s 10000s, --cc-2-2 0s 10000s,
--cc-3-1 0s 10000s, --cc-3-2 0s 10000s,
--cc-4-1 0s 10000s, --cc-4-2 0s 10000s,
--row-01 0s 10000s,
--row-02 0s 10000s,
--row-03 0s 10000s,
--row-04 0s 10000s,
--row-05 0s 10000s,
--row-06 0s 10000s,
--row-07 0s 10000s,
--row-08 0s 10000s,
--row-09 0s 10000s,
--row-10 0s 10000s,
--row-11 0s 10000s,
--row-12 0s 10000s,
--win 0s 10000s;
}
.row {
position:relative;
height:20px;
margin:5px 0 5px 12px;
--cg-1:0;
--cg-2:0;
--cg-3:0;
--cg-4:0;
transition:--cg-1 0s 10000s,
--cg-2 0s 10000s,
--cg-3 0s 10000s,
--cg-4 0s 10000s;
--w11:calc(var(--cg-1) - var(--cd-1));
--w12:calc(var(--cg-1) - var(--cd-2));
--w13:calc(var(--cg-1) - var(--cd-3));
--w14:calc(var(--cg-1) - var(--cd-4));
--w21:calc(var(--cg-2) - var(--cd-1));
--w22:calc(var(--cg-2) - var(--cd-2));
--w23:calc(var(--cg-2) - var(--cd-3));
--w24:calc(var(--cg-2) - var(--cd-4));
--w31:calc(var(--cg-3) - var(--cd-1));
--w32:calc(var(--cg-3) - var(--cd-2));
--w33:calc(var(--cg-3) - var(--cd-3));
--w34:calc(var(--cg-3) - var(--cd-4));
--w41:calc(var(--cg-4) - var(--cd-1));
--w42:calc(var(--cg-4) - var(--cd-2));
--w43:calc(var(--cg-4) - var(--cd-3));
--w44:calc(var(--cg-4) - var(--cd-4));
/* 色も位置も合っている推測の数 */
--cnt1:calc(4 - min(var(--w11) * var(--w11), 1)
- min(var(--w22) * var(--w22), 1)
- min(var(--w33) * var(--w33), 1)
- min(var(--w44) * var(--w44), 1));
/* 色は合っているが位置が違う推測の数 */
--cnt2:calc(12 - min(var(--w12) * var(--w12), 1)
- min(var(--w13) * var(--w13), 1)
- min(var(--w14) * var(--w14), 1)
- min(var(--w21) * var(--w21), 1)
- min(var(--w23) * var(--w23), 1)
- min(var(--w24) * var(--w24), 1)
- min(var(--w31) * var(--w31), 1)
- min(var(--w32) * var(--w32), 1)
- min(var(--w34) * var(--w34), 1)
- min(var(--w41) * var(--w41), 1)
- min(var(--w42) * var(--w42), 1)
- min(var(--w43) * var(--w43), 1));
}
.cg, .ct {
position:absolute;
top:0;
width:20px;
height:20px;
border-radius:10px;
--cc-1:var(--hole);
--cc-2:var(--hole);
background-image:radial-gradient(at 7px 7px, var(--cc-1), var(--cc-2));
transition:--cc-1 0s 10000s, --cc-2 0s 10000s;
}
.cg-1, #ct-1 {
left:0;
}
.cg-2, #ct-2 {
left:30px;
}
.cg-3, #ct-3 {
left:60px;
}
.cg-4, #ct-4 {
left:90px;
}
.ky {
position:absolute;
top:4px;
width:12px;
height:12px;
--k1:clamp(0, var(--cnt1) - var(--n) + 1, 1);
--k0:clamp(0, var(--n) - var(--cnt1) - var(--cnt2), 1);
--k2:calc(1 - var(--k1) - var(--k0));
background-color:rgb(calc(var(--k1) * 255 + var(--k2) * 255 + var(--k0) * 123)
calc( var(--k2) * 255 + var(--k0) * 78 )
calc( var(--k2) * 255 ));
border-radius:6px;
filter:drop-shadow(0.5px 0.5px 0.5px rgb(0 0 0 / calc((1 - var(--k0)) * 0.8)));
}
.ky-1 {
left:122px;
--n:1;
}
.ky-2 {
left:142px;
--n:2;
}
.ky-3 {
left:162px;
--n:3;
}
.ky-4 {
left:182px;
--n:4;
}
#tmp {
position:absolute;
left:32px;
top:calc((26 + (var(--row-01) + var(--row-02) + var(--row-03) + var(--row-04) + var(--row-05) + var(--row-06)
+ var(--row-07) + var(--row-08) + var(--row-09) + var(--row-10) + var(--row-11)) * 31) * 1px);
width:110px;
height:20px;
background-color:var(--board);
z-index:calc(0 - var(--row-12));
}
.sep {
position:relative;
width:218px;
height:1px;
background-color:var(--sep);
}
#sel {
position:relative;
width:180px;
height:20px;
margin:16px auto 0;
z-index:0;
}
#sel-1, #sel-2, #sel-3, #sel-4 {
position:absolute;
left:0;
top:0;
width:180px;
height:20px;
}
#sel-1, #sel-2, #sel-3 {
transition:visibility 0s 10000s;
}
.cl {
position:absolute;
top:0;
width:20px;
height:20px;
border-radius:10px;
cursor:pointer;
background-image:radial-gradient(at 7px 7px, var(--cc-1), var(--cc-2));
z-index:0;
transition:--cc-1 0s 10000s, --cc-2 0s 10000s,
z-index 0s 10000s;
}
.cl-1 {
left:0;
--cc-1:var(--peg-1-1);
--cc-2:var(--peg-1-2);
}
.cl-2 {
left:32px;
--cc-1:var(--peg-2-1);
--cc-2:var(--peg-2-2);
}
.cl-3 {
left:64px;
--cc-1:var(--peg-3-1);
--cc-2:var(--peg-3-2);
}
.cl-4 {
left:96px;
--cc-1:var(--peg-4-1);
--cc-2:var(--peg-4-2);
}
.cl-5 {
left:128px;
--cc-1:var(--peg-5-1);
--cc-2:var(--peg-5-2);
}
.cl-6 {
left:160px;
--cc-1:var(--peg-6-1);
--cc-2:var(--peg-6-2);
}
#tr-cl {
position:relative;
margin-top:16px;
}
#try-f {
position:absolute;
left:40px;
top:0;
width:50px;
height:30px;
text-align:center;
color:white;
font-size:14px;
font-weight:bold;
line-height:30px;
background-color:var(--sep);
border-radius:5px;
}
.tl {
display:inline-block;
position:absolute;
left:40px;
top:0;
width:50px;
height:30px;
cursor:pointer;
visibility:hidden;
transition:visibility 0s 10000s;
}
#tl-01 {
z-index:calc(0 - var(--row-01));
}
#tl-02 {
z-index:calc(0 - var(--row-02));
}
#tl-03 {
z-index:calc(0 - var(--row-03));
}
#tl-04 {
z-index:calc(0 - var(--row-04));
}
#tl-05 {
z-index:calc(0 - var(--row-05));
}
#tl-06 {
z-index:calc(0 - var(--row-06));
}
#tl-07 {
z-index:calc(0 - var(--row-07));
}
#tl-08 {
z-index:calc(0 - var(--row-08));
}
#tl-09 {
z-index:calc(0 - var(--row-09));
}
#tl-10 {
z-index:calc(0 - var(--row-10));
}
#tl-11 {
z-index:calc(0 - var(--row-11));
}
#clear-f {
position:absolute;
left:120px;
top:0;
width:42px;
height:30px;
text-align:center;
color:white;
font-size:12px;
font-weight:bold;
line-height:30px;
background-color:var(--sep);
border-radius:5px;
}
#clear-l {
position:absolute;
left:120px;
top:0;
width:42px;
height:30px;
cursor:pointer;
visibility:hidden;
transition:visibility 0s 10000s;
}
#win, #lose {
position:absolute;
left:0;
top:404px;
width:100%;
height:80px;
text-align:center;
color:#000080;
font-size:14px;
font-weight:bold;
line-height:1;
background-color:var(--board);
}
#win {
z-index:-1;
transition:z-index 0s 10000s;
}
#lose {
z-index:calc(var(--row-12) - var(--win) - 1);
}
#win-msg {
position:relative;
}
#lose-msg1 {
position:relative;
}
#lose-ca {
position:relative;
margin-top:4px;
font-size:0;
}
#lose-msg2 {
display:inline-block;
position:relative;
height:20px;
font-size:14px;
line-height:20px;
vertical-align:top;
}
#cd {
display:inline-block;
position:relative;
width:110px;
height:20px;
margin-left:10px;
overflow:hidden;
}
.cd {
position:absolute;
--w1:calc(var(--cd-1) - var(--cd));
--w2:calc(var(--cd-2) - var(--cd));
--w3:calc(var(--cd-3) - var(--cd));
--w4:calc(var(--cd-4) - var(--cd));
left:calc((-1000 + (1 - min(var(--w1) * var(--w1), 1)) * 1000
+ (1 - min(var(--w2) * var(--w2), 1)) * 1030
+ (1 - min(var(--w3) * var(--w3), 1)) * 1060
+ (1 - min(var(--w4) * var(--w4), 1)) * 1090) * 1px);
top:0;
width:20px;
height:20px;
border-radius:10px;
}
#cd-1 {
--cd:1;
background-image:radial-gradient(at 7px 7px, var(--peg-1-1), var(--peg-1-2));
}
#cd-2 {
--cd:2;
background-image:radial-gradient(at 7px 7px, var(--peg-2-1), var(--peg-2-2));
}
#cd-3 {
--cd:3;
background-image:radial-gradient(at 7px 7px, var(--peg-3-1), var(--peg-3-2));
}
#cd-4 {
--cd:4;
background-image:radial-gradient(at 7px 7px, var(--peg-4-1), var(--peg-4-2));
}
#cd-5 {
--cd:5;
background-image:radial-gradient(at 7px 7px, var(--peg-5-1), var(--peg-5-2));
}
#cd-6 {
--cd:6;
background-image:radial-gradient(at 7px 7px, var(--peg-6-1), var(--peg-6-2));
}
#win-rst, #lose-rst {
display:inline-block;
position:relative;
width:100px;
height:30px;
margin-top:6px;
text-align:center;
color:white;
font-size:12px;
font-weight:bold;
line-height:30px;
background-color:var(--sep);
border-radius:5px;
cursor:pointer;
}
/* 色選択 */
#ci-1-1:active ~ #code #base {
--ct-1:1;
--cc-1-1:var(--peg-1-1);
--cc-1-2:var(--peg-1-2);
}
#ci-1-2:active ~ #code #base {
--ct-1:2;
--cc-1-1:var(--peg-2-1);
--cc-1-2:var(--peg-2-2);
}
#ci-1-3:active ~ #code #base {
--ct-1:3;
--cc-1-1:var(--peg-3-1);
--cc-1-2:var(--peg-3-2);
}
#ci-1-4:active ~ #code #base {
--ct-1:4;
--cc-1-1:var(--peg-4-1);
--cc-1-2:var(--peg-4-2);
}
#ci-1-5:active ~ #code #base {
--ct-1:5;
--cc-1-1:var(--peg-5-1);
--cc-1-2:var(--peg-5-2);
}
#ci-1-6:active ~ #code #base {
--ct-1:6;
--cc-1-1:var(--peg-6-1);
--cc-1-2:var(--peg-6-2);
}
#ci-2-1:active ~ #code #base {
--ct-2:1;
--cc-2-1:var(--peg-1-1);
--cc-2-2:var(--peg-1-2);
}
#ci-2-2:active ~ #code #base {
--ct-2:2;
--cc-2-1:var(--peg-2-1);
--cc-2-2:var(--peg-2-2);
}
#ci-2-3:active ~ #code #base {
--ct-2:3;
--cc-2-1:var(--peg-3-1);
--cc-2-2:var(--peg-3-2);
}
#ci-2-4:active ~ #code #base {
--ct-2:4;
--cc-2-1:var(--peg-4-1);
--cc-2-2:var(--peg-4-2);
}
#ci-2-5:active ~ #code #base {
--ct-2:5;
--cc-2-1:var(--peg-5-1);
--cc-2-2:var(--peg-5-2);
}
#ci-2-6:active ~ #code #base {
--ct-2:6;
--cc-2-1:var(--peg-6-1);
--cc-2-2:var(--peg-6-2);
}
#ci-3-1:active ~ #code #base {
--ct-3:1;
--cc-3-1:var(--peg-1-1);
--cc-3-2:var(--peg-1-2);
}
#ci-3-2:active ~ #code #base {
--ct-3:2;
--cc-3-1:var(--peg-2-1);
--cc-3-2:var(--peg-2-2);
}
#ci-3-3:active ~ #code #base {
--ct-3:3;
--cc-3-1:var(--peg-3-1);
--cc-3-2:var(--peg-3-2);
}
#ci-3-4:active ~ #code #base {
--ct-3:4;
--cc-3-1:var(--peg-4-1);
--cc-3-2:var(--peg-4-2);
}
#ci-3-5:active ~ #code #base {
--ct-3:5;
--cc-3-1:var(--peg-5-1);
--cc-3-2:var(--peg-5-2);
}
#ci-3-6:active ~ #code #base {
--ct-3:6;
--cc-3-1:var(--peg-6-1);
--cc-3-2:var(--peg-6-2);
}
#ci-4-1:active ~ #code #base {
--ct-4:1;
--cc-4-1:var(--peg-1-1);
--cc-4-2:var(--peg-1-2);
}
#ci-4-2:active ~ #code #base {
--ct-4:2;
--cc-4-1:var(--peg-2-1);
--cc-4-2:var(--peg-2-2);
}
#ci-4-3:active ~ #code #base {
--ct-4:3;
--cc-4-1:var(--peg-3-1);
--cc-4-2:var(--peg-3-2);
}
#ci-4-4:active ~ #code #base {
--ct-4:4;
--cc-4-1:var(--peg-4-1);
--cc-4-2:var(--peg-4-2);
}
#ci-4-5:active ~ #code #base {
--ct-4:5;
--cc-4-1:var(--peg-5-1);
--cc-4-2:var(--peg-5-2);
}
#ci-4-6:active ~ #code #base {
--ct-4:6;
--cc-4-1:var(--peg-6-1);
--cc-4-2:var(--peg-6-2);
}
.ci-1:active ~ #code #base {
/* --ct-1 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-2, --ct-3, --ct-4,
--cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
.ci-2:active ~ #code #base {
/* --ct-2 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
.ci-3:active ~ #code #base {
/* --ct-3 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
.ci-4:active ~ #code #base {
/* --ct-4 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
.ci-1:active ~ #code #ct-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
.ci-2:active ~ #code #ct-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
.ci-3:active ~ #code #ct-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
.ci-4:active ~ #code #ct-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
.cs-1:active ~ #code .cl-1 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.cs-2:active ~ #code .cl-2 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.cs-3:active ~ #code .cl-3 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.cs-4:active ~ #code .cl-4 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.cs-5:active ~ #code .cl-5 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.cs-6:active ~ #code .cl-6 {
--cc-1:var(--hole);
--cc-2:var(--hole);
z-index:-1;
transition:none;
}
.ci-1:active ~ #code #sel-1 {
visibility:hidden;
transition:none;
}
.ci-2:active ~ #code #sel-2 {
visibility:hidden;
transition:none;
}
.ci-3:active ~ #code #sel-3 {
visibility:hidden;
transition:none;
}
.ci-4:active ~ #code .cl {
z-index:-1;
transition-property:--cc-1, --cc-2;
}
.ci-1:active ~ #code #clear-l {
visibility:visible;
transition:none;
}
.ci-4:active ~ #code .tl {
visibility:visible;
transition:none;
}
/* OK */
#ti-01:active ~ #code {
animation-play-state:paused;
}
#ti-01:active ~ #code #base {
/* 問題の色の組み合わせを決める */
--cd-1:var(--rn-1);
--cd-2:calc(var(--rn-2) + clamp(0, var(--rn-2) - var(--cd-1) + 1, 1));
--cd-w1:calc(var(--rn-3) + clamp(0, var(--rn-3) - min(var(--cd-1), var(--cd-2)) + 1, 1));
--cd-3: calc(var(--cd-w1) + clamp(0, var(--cd-w1) - max(var(--cd-1), var(--cd-2)) + 1, 1));
--cd-4-min:min(var(--cd-1), var(--cd-2), var(--cd-3));
--cd-4-max:max(var(--cd-1), var(--cd-2), var(--cd-3));
--cd-w2:calc(var(--rn-4) + clamp(0, var(--rn-4) - var(--cd-4-min) + 1, 1));
--cd-w3:calc(var(--cd-w2) + clamp(0, var(--cd-w2) - (
min(var(--cd-1) - var(--cd-4-min), 1) * min(var(--cd-4-max) - var(--cd-1), 1) * var(--cd-1)
+ min(var(--cd-2) - var(--cd-4-min), 1) * min(var(--cd-4-max) - var(--cd-2), 1) * var(--cd-2)
+ min(var(--cd-3) - var(--cd-4-min), 1) * min(var(--cd-4-max) - var(--cd-3), 1) * var(--cd-3)
) + 1, 1));
--cd-4:calc(var(--cd-w3) + clamp(0, var(--cd-w3) - var(--cd-4-max) + 1, 1));
--row-01:1;
/* --cd-1 〜 --cd-4，--row-01 の transition を無効にする */
transition-property:--ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-02:active ~ #code #base {
--row-02:1;
/* --row-02 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-03:active ~ #code #base {
--row-03:1;
/* --row-03 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-04:active ~ #code #base {
--row-04:1;
/* --row-04 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-05:active ~ #code #base {
--row-05:1;
/* --row-05 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-06:active ~ #code #base {
--row-06:1;
/* --row-06 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05,
--row-07, --row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-07:active ~ #code #base {
--row-07:1;
/* --row-07 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-08, --row-09, --row-10, --row-11, --row-12;
}
#ti-08:active ~ #code #base {
--row-08:1;
/* --row-08 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-09, --row-10, --row-11, --row-12;
}
#ti-09:active ~ #code #base {
--row-09:1;
/* --row-09 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-10, --row-11, --row-12;
}
#ti-10:active ~ #code #base {
--row-10:1;
/* --row-10 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-11, --row-12;
}
#ti-11:active ~ #code #base {
--row-11:1;
/* --row-11 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-12;
}
#ti-12:active ~ #code #base {
--row-12:1;
/* --row-12 の transition を無効にする */
transition-property:--cd-1, --cd-2, --cd-3, --cd-4, --ct-1, --ct-2, --ct-3, --ct-4,
--cc-1-1, --cc-1-2, --cc-2-1, --cc-2-2, --cc-3-1, --cc-3-2, --cc-4-1, --cc-4-2,
--row-01, --row-02, --row-03, --row-04, --row-05, --row-06,
--row-07, --row-08, --row-09, --row-10, --row-11;
}
#ti-01:active ~ #code #row-01 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-02:active ~ #code #row-02 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-03:active ~ #code #row-03 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-04:active ~ #code #row-04 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-05:active ~ #code #row-05 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-06:active ~ #code #row-06 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-07:active ~ #code #row-07 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-08:active ~ #code #row-08 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-09:active ~ #code #row-09 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-10:active ~ #code #row-10 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-11:active ~ #code #row-11 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-12:active ~ #code #row-12 {
--cg-1:var(--ct-1);
--cg-2:var(--ct-2);
--cg-3:var(--ct-3);
--cg-4:var(--ct-4);
transition:none;
}
#ti-01:active ~ #code #cg-01-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-01:active ~ #code #cg-01-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-01:active ~ #code #cg-01-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-01:active ~ #code #cg-01-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-02:active ~ #code #cg-02-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-02:active ~ #code #cg-02-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-02:active ~ #code #cg-02-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-02:active ~ #code #cg-02-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-03:active ~ #code #cg-03-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-03:active ~ #code #cg-03-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-03:active ~ #code #cg-03-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-03:active ~ #code #cg-03-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-04:active ~ #code #cg-04-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-04:active ~ #code #cg-04-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-04:active ~ #code #cg-04-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-04:active ~ #code #cg-04-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-05:active ~ #code #cg-05-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-05:active ~ #code #cg-05-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-05:active ~ #code #cg-05-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-05:active ~ #code #cg-05-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-06:active ~ #code #cg-06-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-06:active ~ #code #cg-06-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-06:active ~ #code #cg-06-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-06:active ~ #code #cg-06-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-07:active ~ #code #cg-07-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-07:active ~ #code #cg-07-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-07:active ~ #code #cg-07-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-07:active ~ #code #cg-07-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-08:active ~ #code #cg-08-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-08:active ~ #code #cg-08-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-08:active ~ #code #cg-08-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-08:active ~ #code #cg-08-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-09:active ~ #code #cg-09-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-09:active ~ #code #cg-09-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-09:active ~ #code #cg-09-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-09:active ~ #code #cg-09-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-10:active ~ #code #cg-10-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-10:active ~ #code #cg-10-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-10:active ~ #code #cg-10-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-10:active ~ #code #cg-10-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-11:active ~ #code #cg-11-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-11:active ~ #code #cg-11-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-11:active ~ #code #cg-11-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-11:active ~ #code #cg-11-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
#ti-12:active ~ #code #cg-12-1 {
--cc-1:var(--cc-1-1);
--cc-2:var(--cc-1-2);
transition:none;
}
#ti-12:active ~ #code #cg-12-2 {
--cc-1:var(--cc-2-1);
--cc-2:var(--cc-2-2);
transition:none;
}
#ti-12:active ~ #code #cg-12-3 {
--cc-1:var(--cc-3-1);
--cc-2:var(--cc-3-2);
transition:none;
}
#ti-12:active ~ #code #cg-12-4 {
--cc-1:var(--cc-4-1);
--cc-2:var(--cc-4-2);
transition:none;
}
.ti:active ~ #code #win {
z-index:calc(var(--win) - 1);
transition:none;
}
/* OK／取消 */
:is(.ti, #clear):active ~ #code :is(.ct, #sel-1, #sel-2, #sel-3, .cl, .tl, #clear-l) {
transition:none;
}
/* もう一度遊ぶ */
#reset:active ~ #code :is(#base, .row, .cg, #sel-1, #sel-2, #sel-3, .cl, .tl, #clear-l, #win) {
transition:none;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート マスターマインド</DIV>
<BR>
<INPUT TYPE=BUTTON ID="ci-1-1" CLASS="ci-1 cs-1">
<INPUT TYPE=BUTTON ID="ci-1-2" CLASS="ci-1 cs-2">
<INPUT TYPE=BUTTON ID="ci-1-3" CLASS="ci-1 cs-3">
<INPUT TYPE=BUTTON ID="ci-1-4" CLASS="ci-1 cs-4">
<INPUT TYPE=BUTTON ID="ci-1-5" CLASS="ci-1 cs-5">
<INPUT TYPE=BUTTON ID="ci-1-6" CLASS="ci-1 cs-6">
<INPUT TYPE=BUTTON ID="ci-2-1" CLASS="ci-2 cs-1">
<INPUT TYPE=BUTTON ID="ci-2-2" CLASS="ci-2 cs-2">
<INPUT TYPE=BUTTON ID="ci-2-3" CLASS="ci-2 cs-3">
<INPUT TYPE=BUTTON ID="ci-2-4" CLASS="ci-2 cs-4">
<INPUT TYPE=BUTTON ID="ci-2-5" CLASS="ci-2 cs-5">
<INPUT TYPE=BUTTON ID="ci-2-6" CLASS="ci-2 cs-6">
<INPUT TYPE=BUTTON ID="ci-3-1" CLASS="ci-3 cs-1">
<INPUT TYPE=BUTTON ID="ci-3-2" CLASS="ci-3 cs-2">
<INPUT TYPE=BUTTON ID="ci-3-3" CLASS="ci-3 cs-3">
<INPUT TYPE=BUTTON ID="ci-3-4" CLASS="ci-3 cs-4">
<INPUT TYPE=BUTTON ID="ci-3-5" CLASS="ci-3 cs-5">
<INPUT TYPE=BUTTON ID="ci-3-6" CLASS="ci-3 cs-6">
<INPUT TYPE=BUTTON ID="ci-4-1" CLASS="ci-4 cs-1">
<INPUT TYPE=BUTTON ID="ci-4-2" CLASS="ci-4 cs-2">
<INPUT TYPE=BUTTON ID="ci-4-3" CLASS="ci-4 cs-3">
<INPUT TYPE=BUTTON ID="ci-4-4" CLASS="ci-4 cs-4">
<INPUT TYPE=BUTTON ID="ci-4-5" CLASS="ci-4 cs-5">
<INPUT TYPE=BUTTON ID="ci-4-6" CLASS="ci-4 cs-6">
<INPUT TYPE=BUTTON ID="ti-01" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-02" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-03" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-04" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-05" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-06" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-07" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-08" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-09" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-10" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-11" CLASS="ti">
<INPUT TYPE=BUTTON ID="ti-12" CLASS="ti">
<INPUT TYPE=BUTTON ID="clear">
<INPUT TYPE=BUTTON ID="reset">
<DIV ID="code">
<DIV ID="base">
<DIV CLASS="sep"></DIV>
<DIV ID="row-01" CLASS="row">
<DIV ID="cg-01-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-01-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-01-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-01-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-02" CLASS="row">
<DIV ID="cg-02-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-02-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-02-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-02-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-03" CLASS="row">
<DIV ID="cg-03-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-03-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-03-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-03-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-04" CLASS="row">
<DIV ID="cg-04-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-04-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-04-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-04-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-05" CLASS="row">
<DIV ID="cg-05-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-05-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-05-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-05-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-06" CLASS="row">
<DIV ID="cg-06-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-06-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-06-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-06-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-07" CLASS="row">
<DIV ID="cg-07-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-07-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-07-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-07-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-08" CLASS="row">
<DIV ID="cg-08-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-08-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-08-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-08-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-09" CLASS="row">
<DIV ID="cg-09-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-09-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-09-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-09-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-10" CLASS="row">
<DIV ID="cg-10-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-10-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-10-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-10-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-11" CLASS="row">
<DIV ID="cg-11-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-11-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-11-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-11-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="row-12" CLASS="row">
<DIV ID="cg-12-1" CLASS="cg cg-1"></DIV>
<DIV ID="cg-12-2" CLASS="cg cg-2"></DIV>
<DIV ID="cg-12-3" CLASS="cg cg-3"></DIV>
<DIV ID="cg-12-4" CLASS="cg cg-4"></DIV>
<DIV CLASS="ky ky-1"></DIV>
<DIV CLASS="ky ky-2"></DIV>
<DIV CLASS="ky ky-3"></DIV>
<DIV CLASS="ky ky-4"></DIV>
</DIV>
<DIV CLASS="sep"></DIV>
<DIV ID="tmp">
<DIV ID="ct-1" CLASS="ct"></DIV>
<DIV ID="ct-2" CLASS="ct"></DIV>
<DIV ID="ct-3" CLASS="ct"></DIV>
<DIV ID="ct-4" CLASS="ct"></DIV>
</DIV>
<DIV ID="sel">
<DIV ID="sel-4">
<LABEL CLASS="cl cl-1" FOR="ci-4-1"></LABEL>
<LABEL CLASS="cl cl-2" FOR="ci-4-2"></LABEL>
<LABEL CLASS="cl cl-3" FOR="ci-4-3"></LABEL>
<LABEL CLASS="cl cl-4" FOR="ci-4-4"></LABEL>
<LABEL CLASS="cl cl-5" FOR="ci-4-5"></LABEL>
<LABEL CLASS="cl cl-6" FOR="ci-4-6"></LABEL>
</DIV>
<DIV ID="sel-3">
<LABEL CLASS="cl cl-1" FOR="ci-3-1"></LABEL>
<LABEL CLASS="cl cl-2" FOR="ci-3-2"></LABEL>
<LABEL CLASS="cl cl-3" FOR="ci-3-3"></LABEL>
<LABEL CLASS="cl cl-4" FOR="ci-3-4"></LABEL>
<LABEL CLASS="cl cl-5" FOR="ci-3-5"></LABEL>
<LABEL CLASS="cl cl-6" FOR="ci-3-6"></LABEL>
</DIV>
<DIV ID="sel-2">
<LABEL CLASS="cl cl-1" FOR="ci-2-1"></LABEL>
<LABEL CLASS="cl cl-2" FOR="ci-2-2"></LABEL>
<LABEL CLASS="cl cl-3" FOR="ci-2-3"></LABEL>
<LABEL CLASS="cl cl-4" FOR="ci-2-4"></LABEL>
<LABEL CLASS="cl cl-5" FOR="ci-2-5"></LABEL>
<LABEL CLASS="cl cl-6" FOR="ci-2-6"></LABEL>
</DIV>
<DIV ID="sel-1">
<LABEL CLASS="cl cl-1" FOR="ci-1-1"></LABEL>
<LABEL CLASS="cl cl-2" FOR="ci-1-2"></LABEL>
<LABEL CLASS="cl cl-3" FOR="ci-1-3"></LABEL>
<LABEL CLASS="cl cl-4" FOR="ci-1-4"></LABEL>
<LABEL CLASS="cl cl-5" FOR="ci-1-5"></LABEL>
<LABEL CLASS="cl cl-6" FOR="ci-1-6"></LABEL>
</DIV>
</DIV>
<DIV ID="tr-cl">
<DIV ID="try-f">O K</DIV>
<LABEL CLASS="tl" FOR="ti-12"></LABEL>
<LABEL ID="tl-11" CLASS="tl" FOR="ti-11"></LABEL>
<LABEL ID="tl-10" CLASS="tl" FOR="ti-10"></LABEL>
<LABEL ID="tl-09" CLASS="tl" FOR="ti-09"></LABEL>
<LABEL ID="tl-08" CLASS="tl" FOR="ti-08"></LABEL>
<LABEL ID="tl-07" CLASS="tl" FOR="ti-07"></LABEL>
<LABEL ID="tl-06" CLASS="tl" FOR="ti-06"></LABEL>
<LABEL ID="tl-05" CLASS="tl" FOR="ti-05"></LABEL>
<LABEL ID="tl-04" CLASS="tl" FOR="ti-04"></LABEL>
<LABEL ID="tl-03" CLASS="tl" FOR="ti-03"></LABEL>
<LABEL ID="tl-02" CLASS="tl" FOR="ti-02"></LABEL>
<LABEL ID="tl-01" CLASS="tl" FOR="ti-01"></LABEL>
<DIV ID="clear-f">取消</DIV>
<LABEL ID="clear-l" FOR="clear"></LABEL>
</DIV>
<DIV ID="win">
<DIV ID="win-msg">あなたの勝ち！</DIV>
<LABEL ID="win-rst" FOR="reset">もう一度遊ぶ</LABEL>
</DIV>
<DIV ID="lose">
<DIV ID="lose-msg1">あなたの負け！</DIV>
<DIV ID="lose-ca">
<DIV ID="lose-msg2">正解は</DIV>
<DIV ID="cd">
<DIV ID="cd-1" CLASS="cd"></DIV>
<DIV ID="cd-2" CLASS="cd"></DIV>
<DIV ID="cd-3" CLASS="cd"></DIV>
<DIV ID="cd-4" CLASS="cd"></DIV>
<DIV ID="cd-5" CLASS="cd"></DIV>
<DIV ID="cd-6" CLASS="cd"></DIV>
</DIV>
</DIV>
<LABEL ID="lose-rst" FOR="reset">もう一度遊ぶ</LABEL>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
|
