<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート ライツ アウト</TITLE>
<STYLE TYPE="text/css">
<!--
@keyframes is11 {
from {
--is11:0;
}
to {
--is11:1;
}
}
@keyframes is21 {
from {
--is21:0;
}
to {
--is21:1;
}
}
@keyframes is31 {
from {
--is31:0;
}
to {
--is31:1;
}
}
@keyframes is41 {
from {
--is41:0;
}
to {
--is41:1;
}
}
@keyframes is51 {
from {
--is51:0;
}
to {
--is51:1;
}
}
@keyframes is12 {
from {
--is12:0;
}
to {
--is12:1;
}
}
@keyframes is22 {
from {
--is22:0;
}
to {
--is22:1;
}
}
@keyframes is32 {
from {
--is32:0;
}
to {
--is32:1;
}
}
@keyframes is42 {
from {
--is42:0;
}
to {
--is42:1;
}
}
@keyframes is52 {
from {
--is52:0;
}
to {
--is52:1;
}
}
@keyframes is13 {
from {
--is13:0;
}
to {
--is13:1;
}
}
@keyframes is23 {
from {
--is23:0;
}
to {
--is23:1;
}
}
@keyframes is33 {
from {
--is33:0;
}
to {
--is33:1;
}
}
@keyframes is43 {
from {
--is43:0;
}
to {
--is43:1;
}
}
@keyframes is53 {
from {
--is53:0;
}
to {
--is53:1;
}
}
@keyframes is14 {
from {
--is14:0;
}
to {
--is14:1;
}
}
@keyframes is24 {
from {
--is24:0;
}
to {
--is24:1;
}
}
@keyframes is34 {
from {
--is34:0;
}
to {
--is34:1;
}
}
@keyframes is44 {
from {
--is44:0;
}
to {
--is44:1;
}
}
@keyframes is54 {
from {
--is54:0;
}
to {
--is54:1;
}
}
@keyframes is15 {
from {
--is15:0;
}
to {
--is15:1;
}
}
@keyframes is25 {
from {
--is25:0;
}
to {
--is25:1;
}
}
@keyframes is35 {
from {
--is35:0;
}
to {
--is35:1;
}
}
@property --is11 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is21 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is31 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is41 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is51 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is12 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is22 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is32 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is42 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is52 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is13 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is23 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is33 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is43 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is53 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is14 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is24 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is34 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is44 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is54 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is15 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is25 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --is35 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --aw45 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --aw55 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --ai45 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --ai55 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw11 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw21 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw31 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw41 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw51 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw12 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw22 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw32 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw42 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw52 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw13 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw23 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw33 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw43 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw53 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw14 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw24 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw34 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw44 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw54 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw15 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw25 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw35 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw45 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lw55 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li11 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li21 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li31 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li41 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li51 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li12 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li22 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li32 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li42 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li52 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li13 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li23 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li33 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li43 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li53 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li14 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li24 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li34 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li44 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li54 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li15 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li25 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li35 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li45 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --li55 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo11 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo21 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo31 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo41 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo51 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo12 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo22 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo32 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo42 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo52 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo13 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo23 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo33 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo43 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo53 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo14 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo24 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo34 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo44 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo54 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo15 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo25 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo35 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo45 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --lo55 {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
body {
background-color:#CCFFFF;
}
#title {
color:#CC0000;
font-size:large;
font-weight:bold;
text-align:center;
}
input {
display:none;
}
#base {
position:relative;
top:3.5em;
width:312px;
height:237px;
margin-left:auto;
margin-right:auto;
background-color:dimgrey;
/* シャッフル */
animation:is11 10ms steps(2, jump-none) infinite,
is21 80ms steps(2, jump-none) infinite,
is31 20ms steps(2, jump-none) infinite,
is41 160ms steps(2, jump-none) infinite,
is51 40ms steps(2, jump-none) infinite,
is12 13ms steps(2, jump-none) infinite,
is22 52ms steps(2, jump-none) infinite,
is32 26ms steps(2, jump-none) infinite,
is42 104ms steps(2, jump-none) infinite,
is52 11ms steps(2, jump-none) infinite,
is13 88ms steps(2, jump-none) infinite,
is23 22ms steps(2, jump-none) infinite,
is33 176ms steps(2, jump-none) infinite,
is43 44ms steps(2, jump-none) infinite,
is53 14ms steps(2, jump-none) infinite,
is14 56ms steps(2, jump-none) infinite,
is24 28ms steps(2, jump-none) infinite,
is34 112ms steps(2, jump-none) infinite,
is44 12ms steps(2, jump-none) infinite,
is54 96ms steps(2, jump-none) infinite,
is15 24ms steps(2, jump-none) infinite,
is25 192ms steps(2, jump-none) infinite,
is35 48ms steps(2, jump-none) infinite;
/* 加算して 1桁目を取り出す（XOR） */
/* mod()，rem() は実装されていない */
--aw45:calc(var(--is21) + var(--is31) + var(--is41)
+ var(--is12) + var(--is32) + var(--is52)
+ var(--is13) + var(--is23) + var(--is43) + var(--is53)
+ var(--is14) + var(--is34) + var(--is54)
+ var(--is25) + var(--is35));
--aw55:calc(var(--is11) + var(--is31) + var(--is51)
+ var(--is12) + var(--is32) + var(--is52)
+ var(--is14) + var(--is34) + var(--is54)
+ var(--is15) + var(--is35));
--ai45:calc(var(--aw45) / 2 - 0.1); /* 小数部切り捨て */
--ai55:calc(var(--aw55) / 2 - 0.1);
--is45:calc(var(--aw45) - var(--ai45) * 2);
--is55:calc(var(--aw55) - var(--ai55) * 2);
--ui11:0;
--ui21:0;
--ui31:0;
--ui41:0;
--ui51:0;
--ui12:0;
--ui22:0;
--ui32:0;
--ui42:0;
--ui52:0;
--ui13:0;
--ui23:0;
--ui33:0;
--ui43:0;
--ui53:0;
--ui14:0;
--ui24:0;
--ui34:0;
--ui44:0;
--ui54:0;
--ui15:0;
--ui25:0;
--ui35:0;
--ui45:0;
--ui55:0;
/* すべて消灯？ */
--none:calc(1 - min(var(--is11) + var(--is21) + var(--is31) + var(--is41) + var(--is51)
+ var(--is12) + var(--is22) + var(--is32) + var(--is42) + var(--is52)
+ var(--is13) + var(--is23) + var(--is33) + var(--is43) + var(--is53)
+ var(--is14) + var(--is24) + var(--is34) + var(--is44) + var(--is54)
+ var(--is15) + var(--is25) + var(--is35), 1));
/* 加算して 1桁目を取り出す（XOR） */
/* mod()，rem() は実装されていない */
--lw11:calc(var(--is11) + var(--none) + var(--ui11) + var(--ui21) + var(--ui12));
--lw21:calc(var(--is21) + var(--none) + var(--ui21) + var(--ui11) + var(--ui31) + var(--ui22));
--lw31:calc(var(--is31) + var(--none) + var(--ui31) + var(--ui21) + var(--ui41) + var(--ui32));
--lw41:calc(var(--is41) + var(--none) + var(--ui41) + var(--ui31) + var(--ui51) + var(--ui42));
--lw51:calc(var(--is51) + var(--none) + var(--ui51) + var(--ui41) + var(--ui52));
--lw12:calc(var(--is12) + var(--none) + var(--ui12) + var(--ui22) + var(--ui11) + var(--ui13));
--lw22:calc(var(--is22) + var(--none) + var(--ui22) + var(--ui12) + var(--ui32) + var(--ui21) + var(--ui23));
--lw32:calc(var(--is32) + var(--none) + var(--ui32) + var(--ui22) + var(--ui42) + var(--ui31) + var(--ui33));
--lw42:calc(var(--is42) + var(--none) + var(--ui42) + var(--ui32) + var(--ui52) + var(--ui41) + var(--ui43));
--lw52:calc(var(--is52) + var(--none) + var(--ui52) + var(--ui42) + var(--ui51) + var(--ui53));
--lw13:calc(var(--is13) + var(--none) + var(--ui13) + var(--ui23) + var(--ui12) + var(--ui14));
--lw23:calc(var(--is23) + var(--none) + var(--ui23) + var(--ui13) + var(--ui33) + var(--ui22) + var(--ui24));
--lw33:calc(var(--is33) + var(--none) + var(--ui33) + var(--ui23) + var(--ui43) + var(--ui32) + var(--ui34));
--lw43:calc(var(--is43) + var(--none) + var(--ui43) + var(--ui33) + var(--ui53) + var(--ui42) + var(--ui44));
--lw53:calc(var(--is53) + var(--none) + var(--ui53) + var(--ui43) + var(--ui52) + var(--ui54));
--lw14:calc(var(--is14) + var(--none) + var(--ui14) + var(--ui24) + var(--ui13) + var(--ui15));
--lw24:calc(var(--is24) + var(--none) + var(--ui24) + var(--ui14) + var(--ui34) + var(--ui23) + var(--ui25));
--lw34:calc(var(--is34) + var(--none) + var(--ui34) + var(--ui24) + var(--ui44) + var(--ui33) + var(--ui35));
--lw44:calc(var(--is44) + var(--none) + var(--ui44) + var(--ui34) + var(--ui54) + var(--ui43) + var(--ui45));
--lw54:calc(var(--is54) + var(--none) + var(--ui54) + var(--ui44) + var(--ui53) + var(--ui55));
--lw15:calc(var(--is15) + var(--none) + var(--ui15) + var(--ui25) + var(--ui14));
--lw25:calc(var(--is25) + var(--none) + var(--ui25) + var(--ui15) + var(--ui35) + var(--ui24));
--lw35:calc(var(--is35) + var(--none) + var(--ui35) + var(--ui25) + var(--ui45) + var(--ui34));
--lw45:calc(var(--is45) + var(--none) + var(--ui45) + var(--ui35) + var(--ui55) + var(--ui44));
--lw55:calc(var(--is55) + var(--none) + var(--ui55) + var(--ui45) + var(--ui54));
--li11:calc(var(--lw11) / 2 - 0.1); /* 小数部切り捨て */
--li21:calc(var(--lw21) / 2 - 0.1);
--li31:calc(var(--lw31) / 2 - 0.1);
--li41:calc(var(--lw41) / 2 - 0.1);
--li51:calc(var(--lw51) / 2 - 0.1);
--li12:calc(var(--lw12) / 2 - 0.1);
--li22:calc(var(--lw22) / 2 - 0.1);
--li32:calc(var(--lw32) / 2 - 0.1);
--li42:calc(var(--lw42) / 2 - 0.1);
--li52:calc(var(--lw52) / 2 - 0.1);
--li13:calc(var(--lw13) / 2 - 0.1);
--li23:calc(var(--lw23) / 2 - 0.1);
--li33:calc(var(--lw33) / 2 - 0.1);
--li43:calc(var(--lw43) / 2 - 0.1);
--li53:calc(var(--lw53) / 2 - 0.1);
--li14:calc(var(--lw14) / 2 - 0.1);
--li24:calc(var(--lw24) / 2 - 0.1);
--li34:calc(var(--lw34) / 2 - 0.1);
--li44:calc(var(--lw44) / 2 - 0.1);
--li54:calc(var(--lw54) / 2 - 0.1);
--li15:calc(var(--lw15) / 2 - 0.1);
--li25:calc(var(--lw25) / 2 - 0.1);
--li35:calc(var(--lw35) / 2 - 0.1);
--li45:calc(var(--lw45) / 2 - 0.1);
--li55:calc(var(--lw55) / 2 - 0.1);
/* 0:消灯，1:点灯 */
--lo11:calc(var(--lw11) - var(--li11) * 2);
--lo21:calc(var(--lw21) - var(--li21) * 2);
--lo31:calc(var(--lw31) - var(--li31) * 2);
--lo41:calc(var(--lw41) - var(--li41) * 2);
--lo51:calc(var(--lw51) - var(--li51) * 2);
--lo12:calc(var(--lw12) - var(--li12) * 2);
--lo22:calc(var(--lw22) - var(--li22) * 2);
--lo32:calc(var(--lw32) - var(--li32) * 2);
--lo42:calc(var(--lw42) - var(--li42) * 2);
--lo52:calc(var(--lw52) - var(--li52) * 2);
--lo13:calc(var(--lw13) - var(--li13) * 2);
--lo23:calc(var(--lw23) - var(--li23) * 2);
--lo33:calc(var(--lw33) - var(--li33) * 2);
--lo43:calc(var(--lw43) - var(--li43) * 2);
--lo53:calc(var(--lw53) - var(--li53) * 2);
--lo14:calc(var(--lw14) - var(--li14) * 2);
--lo24:calc(var(--lw24) - var(--li24) * 2);
--lo34:calc(var(--lw34) - var(--li34) * 2);
--lo44:calc(var(--lw44) - var(--li44) * 2);
--lo54:calc(var(--lw54) - var(--li54) * 2);
--lo15:calc(var(--lw15) - var(--li15) * 2);
--lo25:calc(var(--lw25) - var(--li25) * 2);
--lo35:calc(var(--lw35) - var(--li35) * 2);
--lo45:calc(var(--lw45) - var(--li45) * 2);
--lo55:calc(var(--lw55) - var(--li55) * 2);
/* 終了判定 */
--comp:calc(1 - (var(--lo11) + var(--lo21) + var(--lo31) + var(--lo41) + var(--lo51)
+ var(--lo12) + var(--lo22) + var(--lo32) + var(--lo42) + var(--lo52)
+ var(--lo13) + var(--lo23) + var(--lo33) + var(--lo43) + var(--lo53)
+ var(--lo14) + var(--lo24) + var(--lo34) + var(--lo44) + var(--lo54)
+ var(--lo15) + var(--lo25) + var(--lo35) + var(--lo45) + var(--lo55)));
}
#shuffle1-l, #shuffle2-l, #start-l, #start-m {
position:absolute;
left:calc(156px - 3.5em);
top:-3.5em;
width:7em;
background-color:gainsboro;
padding:6px 0;
border-radius:3px;
text-align:center;
user-select:none;
}
#shuffle1-l, #shuffle2-l, #start-l {
display:block;
color:black;
}
#start-m {
color:gray;
}
:is(#shuffle1-l, #shuffle2-l, #start-l):hover {
background-color:lightgray;
}
#shuffle1-l {
z-index:1;
}
#shuffle2-l {
z-index:var(--comp);
}
#shuffle1:checked ~ form #base #shuffle1-l {
display:none;
}
/* 初期状態 */
#shuffle1:not(:checked) ~ form #base {
animation-play-state:paused;
--lo11:0;
--lo21:0;
--lo31:0;
--lo41:0;
--lo51:0;
--lo12:0;
--lo22:0;
--lo32:0;
--lo42:0;
--lo52:0;
--lo13:0;
--lo23:0;
--lo33:0;
--lo43:0;
--lo53:0;
--lo14:0;
--lo24:0;
--lo34:0;
--lo44:0;
--lo54:0;
--lo15:0;
--lo25:0;
--lo35:0;
--lo45:0;
--lo55:0;
}
.lb-l {
position:absolute;
width:60px;
height:45px;
pointer-events:none;
cursor:pointer;
}
#mask {
position:absolute;
width:312px;
height:237px;
z-index:var(--comp);
}
#lb11-l, #lb12-l, #lb13-l, #lb14-l, #lb15-l {
left:2px;
}
#lb21-l, #lb22-l, #lb23-l, #lb24-l, #lb25-l {
left:64px;
}
#lb31-l, #lb32-l, #lb33-l, #lb34-l, #lb35-l {
left:126px;
}
#lb41-l, #lb42-l, #lb43-l, #lb44-l, #lb45-l {
left:188px;
}
#lb51-l, #lb52-l, #lb53-l, #lb54-l, #lb55-l {
left:250px;
}
#lb11-l, #lb21-l, #lb31-l, #lb41-l, #lb51-l {
top:2px;
}
#lb12-l, #lb22-l, #lb32-l, #lb42-l, #lb52-l {
top:49px;
}
#lb13-l, #lb23-l, #lb33-l, #lb43-l, #lb53-l {
top:96px;
}
#lb14-l, #lb24-l, #lb34-l, #lb44-l, #lb54-l {
top:143px;
}
#lb15-l, #lb25-l, #lb35-l, #lb45-l, #lb55-l {
top:190px;
}
#lb11-l {
background-color:hsl(60, 100%, max(15%, var(--lo11) * 90%));
}
#lb21-l {
background-color:hsl(60, 100%, max(15%, var(--lo21) * 90%));
}
#lb31-l {
background-color:hsl(60, 100%, max(15%, var(--lo31) * 90%));
}
#lb41-l {
background-color:hsl(60, 100%, max(15%, var(--lo41) * 90%));
}
#lb51-l {
background-color:hsl(60, 100%, max(15%, var(--lo51) * 90%));
}
#lb12-l {
background-color:hsl(60, 100%, max(15%, var(--lo12) * 90%));
}
#lb22-l {
background-color:hsl(60, 100%, max(15%, var(--lo22) * 90%));
}
#lb32-l {
background-color:hsl(60, 100%, max(15%, var(--lo32) * 90%));
}
#lb42-l {
background-color:hsl(60, 100%, max(15%, var(--lo42) * 90%));
}
#lb52-l {
background-color:hsl(60, 100%, max(15%, var(--lo52) * 90%));
}
#lb13-l {
background-color:hsl(60, 100%, max(15%, var(--lo13) * 90%));
}
#lb23-l {
background-color:hsl(60, 100%, max(15%, var(--lo23) * 90%));
}
#lb33-l {
background-color:hsl(60, 100%, max(15%, var(--lo33) * 90%));
}
#lb43-l {
background-color:hsl(60, 100%, max(15%, var(--lo43) * 90%));
}
#lb53-l {
background-color:hsl(60, 100%, max(15%, var(--lo53) * 90%));
}
#lb14-l {
background-color:hsl(60, 100%, max(15%, var(--lo14) * 90%));
}
#lb24-l {
background-color:hsl(60, 100%, max(15%, var(--lo24) * 90%));
}
#lb34-l {
background-color:hsl(60, 100%, max(15%, var(--lo34) * 90%));
}
#lb44-l {
background-color:hsl(60, 100%, max(15%, var(--lo44) * 90%));
}
#lb54-l {
background-color:hsl(60, 100%, max(15%, var(--lo54) * 90%));
}
#lb15-l {
background-color:hsl(60, 100%, max(15%, var(--lo15) * 90%));
}
#lb25-l {
background-color:hsl(60, 100%, max(15%, var(--lo25) * 90%));
}
#lb35-l {
background-color:hsl(60, 100%, max(15%, var(--lo35) * 90%));
}
#lb45-l {
background-color:hsl(60, 100%, max(15%, var(--lo45) * 90%));
}
#lb55-l {
background-color:hsl(60, 100%, max(15%, var(--lo55) * 90%));
}
#start:checked ~ #base #start-l {
display:none;
}
#start:checked ~ #base {
animation-play-state:paused;
}
#start:checked ~ #base .lb-l {
pointer-events:initial;
}
#lb11:checked ~ #base {
--ui11:1;
}
#lb21:checked ~ #base {
--ui21:1;
}
#lb31:checked ~ #base {
--ui31:1;
}
#lb41:checked ~ #base {
--ui41:1;
}
#lb51:checked ~ #base {
--ui51:1;
}
#lb12:checked ~ #base {
--ui12:1;
}
#lb22:checked ~ #base {
--ui22:1;
}
#lb32:checked ~ #base {
--ui32:1;
}
#lb42:checked ~ #base {
--ui42:1;
}
#lb52:checked ~ #base {
--ui52:1;
}
#lb13:checked ~ #base {
--ui13:1;
}
#lb23:checked ~ #base {
--ui23:1;
}
#lb33:checked ~ #base {
--ui33:1;
}
#lb43:checked ~ #base {
--ui43:1;
}
#lb53:checked ~ #base {
--ui53:1;
}
#lb14:checked ~ #base {
--ui14:1;
}
#lb24:checked ~ #base {
--ui24:1;
}
#lb34:checked ~ #base {
--ui34:1;
}
#lb44:checked ~ #base {
--ui44:1;
}
#lb54:checked ~ #base {
--ui54:1;
}
#lb15:checked ~ #base {
--ui15:1;
}
#lb25:checked ~ #base {
--ui25:1;
}
#lb35:checked ~ #base {
--ui35:1;
}
#lb45:checked ~ #base {
--ui45:1;
}
#lb55:checked ~ #base {
--ui55:1;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート ライツ アウト</DIV>
<BR>
<INPUT TYPE=CHECKBOX ID="shuffle1">
<FORM>
<INPUT TYPE=RESET ID="shuffle2">
<INPUT TYPE=CHECKBOX ID="start">
<INPUT TYPE=CHECKBOX ID="lb11">
<INPUT TYPE=CHECKBOX ID="lb12">
<INPUT TYPE=CHECKBOX ID="lb13">
<INPUT TYPE=CHECKBOX ID="lb14">
<INPUT TYPE=CHECKBOX ID="lb15">
<INPUT TYPE=CHECKBOX ID="lb21">
<INPUT TYPE=CHECKBOX ID="lb22">
<INPUT TYPE=CHECKBOX ID="lb23">
<INPUT TYPE=CHECKBOX ID="lb24">
<INPUT TYPE=CHECKBOX ID="lb25">
<INPUT TYPE=CHECKBOX ID="lb31">
<INPUT TYPE=CHECKBOX ID="lb32">
<INPUT TYPE=CHECKBOX ID="lb33">
<INPUT TYPE=CHECKBOX ID="lb34">
<INPUT TYPE=CHECKBOX ID="lb35">
<INPUT TYPE=CHECKBOX ID="lb41">
<INPUT TYPE=CHECKBOX ID="lb42">
<INPUT TYPE=CHECKBOX ID="lb43">
<INPUT TYPE=CHECKBOX ID="lb44">
<INPUT TYPE=CHECKBOX ID="lb45">
<INPUT TYPE=CHECKBOX ID="lb51">
<INPUT TYPE=CHECKBOX ID="lb52">
<INPUT TYPE=CHECKBOX ID="lb53">
<INPUT TYPE=CHECKBOX ID="lb54">
<INPUT TYPE=CHECKBOX ID="lb55">
<DIV ID="base">
<LABEL ID="shuffle2-l" FOR="shuffle2">シャッフル</LABEL>
<DIV ID="start-m">ゲーム開始</DIV>
<LABEL ID="start-l" FOR="start">ゲーム開始</LABEL>
<LABEL ID="shuffle1-l" FOR="shuffle1">シャッフル</LABEL>
<DIV ID="mask"></DIV>
<LABEL ID="lb11-l" FOR="lb11" CLASS="lb-l"></LABEL>
<LABEL ID="lb12-l" FOR="lb12" CLASS="lb-l"></LABEL>
<LABEL ID="lb13-l" FOR="lb13" CLASS="lb-l"></LABEL>
<LABEL ID="lb14-l" FOR="lb14" CLASS="lb-l"></LABEL>
<LABEL ID="lb15-l" FOR="lb15" CLASS="lb-l"></LABEL>
<LABEL ID="lb21-l" FOR="lb21" CLASS="lb-l"></LABEL>
<LABEL ID="lb22-l" FOR="lb22" CLASS="lb-l"></LABEL>
<LABEL ID="lb23-l" FOR="lb23" CLASS="lb-l"></LABEL>
<LABEL ID="lb24-l" FOR="lb24" CLASS="lb-l"></LABEL>
<LABEL ID="lb25-l" FOR="lb25" CLASS="lb-l"></LABEL>
<LABEL ID="lb31-l" FOR="lb31" CLASS="lb-l"></LABEL>
<LABEL ID="lb32-l" FOR="lb32" CLASS="lb-l"></LABEL>
<LABEL ID="lb33-l" FOR="lb33" CLASS="lb-l"></LABEL>
<LABEL ID="lb34-l" FOR="lb34" CLASS="lb-l"></LABEL>
<LABEL ID="lb35-l" FOR="lb35" CLASS="lb-l"></LABEL>
<LABEL ID="lb41-l" FOR="lb41" CLASS="lb-l"></LABEL>
<LABEL ID="lb42-l" FOR="lb42" CLASS="lb-l"></LABEL>
<LABEL ID="lb43-l" FOR="lb43" CLASS="lb-l"></LABEL>
<LABEL ID="lb44-l" FOR="lb44" CLASS="lb-l"></LABEL>
<LABEL ID="lb45-l" FOR="lb45" CLASS="lb-l"></LABEL>
<LABEL ID="lb51-l" FOR="lb51" CLASS="lb-l"></LABEL>
<LABEL ID="lb52-l" FOR="lb52" CLASS="lb-l"></LABEL>
<LABEL ID="lb53-l" FOR="lb53" CLASS="lb-l"></LABEL>
<LABEL ID="lb54-l" FOR="lb54" CLASS="lb-l"></LABEL>
<LABEL ID="lb55-l" FOR="lb55" CLASS="lb-l"></LABEL>
</DIV>
</FORM>
</BODY>
</HTML>
|
