<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート ドライブ ゲーム</TITLE>
<STYLE TYPE="text/css">
<!--
@keyframes course-off {
from {
--course-off:-190;
}
to {
--course-off:339;
}
}
@property --course-off {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --car-x {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
body {
background-color:#CCFFFF;
overflow:clip;
}
#title {
color:#CC0000;
font-size:large;
font-weight:bold;
text-align:center;
}
input {
display:none;
}
#base {
position:relative;
width:240px;
height:300px;
margin-left:auto;
margin-right:auto;
--car-x:120;
}
/* カーソル位置取得用要素 */
.pos-x {
position:absolute;
top:-1000px;
width:2px;
height:2300px;
z-index:1;
}
#pos-l {
position:absolute;
left:-1000px;
top:-1000px;
width:1010px;
height:2300px;
z-index:1;
}
#pos-l:hover ~ #view {
transition:none;
--car-x:8;
}
#pos-r {
position:absolute;
left:232px;
top:-1000px;
width:1008px;
height:2300px;
z-index:1;
}
#pos-r:hover ~ #view {
transition:none;
--car-x:232;
}
#view {
position:absolute;
left:0;
top:0;
width:240px;
height:300px;
background-color:silver;
user-select:none;
transition:--car-x 0s 10000s;
--course-off:-190;
--start:0;
--out:1;
--goal:max(var(--course-off) - 338, 0);
}
#mask {
position:absolute;
left:-1000px;
top:-1000px;
width:2240px;
height:2300px;
/* 車の移動が可能でなくなったら前面に出す */
z-index:min(var(--start) * var(--out) + var(--goal), 1);
}
#click {
position:absolute;
left:0;
top:calc(300px - 2em);
width:240px;
color:black;
text-align:center;
}
/* コース */
.course {
position:absolute;
left:0;
top:calc(var(--course-y) * 1px);
/* 画面外のときは幅 0 */
/* マスクを画面からはみ出して表示する必要があるため，クリップできない */
width:calc(var(--vis) * 240px);
height:2px;
background-color:green;
--w:calc(var(--course-off) + var(--y));
--p:clamp(0, var(--w) - 239, 1);
--course-y:calc((var(--w) - var(--p) * 240) * 2);
--vis:calc(clamp(0, var(--course-y) + 1, 1) * clamp(0, 300 - var(--course-y), 1));
--x2:calc((1 - var(--p)) * var(--x) + var(--p) * (180 - var(--x)));
}
/* 道の部分の色を変える */
.course::before {
display:block;
position:absolute;
left:calc(var(--x2) * 1px);
top:0;
/* 画面外のときは幅 0 */
/* マスクを画面からはみ出して表示する必要があるため，クリップできない */
width:calc(var(--vis) * 60px);
height:2px;
background-color:silver;
content:"";
}
/* コース アウト時にカーソル位置取得用要素をマスクする */
.course::after {
display:block;
position:absolute;
left:10px;
top:calc((-1000 - var(--course-y)) * 1px);
width:222px;
height:2300px;
content:"";
/* コース アウトしていないときは背面に隠す */
z-index:min((clamp(0, var(--course-y) - 137, 1) * clamp(0, 139 - var(--course-y), 1)
+ clamp(0, var(--course-y) - 161, 1) * clamp(0, 163 - var(--course-y), 1))
* (clamp(0, var(--x2) - var(--car-x) + 6, 1)
+ clamp(0, var(--car-x) - var(--x2) - 54, 1))
+ clamp(0, var(--course-y) - 139, 1) * clamp(0, 161 - var(--course-y), 1)
* (clamp(0, var(--x2) - var(--car-x) + 10, 1)
+ clamp(0, var(--car-x) - var(--x2) - 50, 1)), 1);
}
/* 車 */
#car {
position:absolute;
left:calc((var(--car-x) - 10) * 1px);
top:138px;
width:20px;
height:26px;
}
#car-1 {
position:absolute;
left:0;
top:5px;
width:20px;
height:6px;
background-color:black;
border-radius:1px;
}
#car-2 {
position:absolute;
left:0;
top:15px;
width:20px;
height:6px;
background-color:black;
border-radius:1px;
}
#car-3 {
position:absolute;
left:2px;
top:0;
width:16px;
height:26px;
background-color:#C00000;
border-radius:5px;
}
#car-4 {
position:absolute;
left:5px;
top:8px;
width:10px;
height:12px;
background-color:#C06000;
border-radius:3px;
}
#clip {
position:absolute;
left:0;
top:0;
width:240px;
height:300px;
overflow:clip;
}
#goal {
position:absolute;
left:120px;
transform:translateX(-50%);
top:calc((var(--course-off) - 272) * 2px - 2em);
background-color:#FFFF80;
color:black;
font-weight:bold;
padding:0 6px;
border-radius:3px;
white-space:nowrap;
}
#out {
position:absolute;
left:120px;
transform:translateX(-50%);
top:180px;
background-color:rgba(255, 255, 255, 0.5);
color:red;
font-weight:bold;
padding:0 6px;
border-radius:3px;
white-space:nowrap;
/* ゴールした後は背面に隠す */
z-index:calc(0 - var(--goal));
}
#reset-l {
position:absolute;
left:120px;
transform:translateX(-50%);
top:calc(260px - 1.5em);
background-color:navy;
color:white;
padding:4px 8px;
border-radius:3px;
white-space:nowrap;
/* ゴールしたかコース アウトした場合以外は背面に隠す */
z-index:calc(min(var(--goal) + var(--start) * var(--out), 1) * 2 - 1);
}
#reset-l:hover {
background-color:mediumblue;
}
#start:checked ~ #base #view {
--start:1;
}
:where(#start:checked) ~ :where(#base) #view {
animation:course-off 20s steps(530, jump-none) forwards paused;
}
#start:checked ~ #base #view #click {
visibility:hidden;
}
#start:not(:checked) ~ #base #view #out {
visibility:hidden;
}
.pos-x:hover ~ #view {
animation-play-state:running;
transition:none;
--out:0;
}
.pos-x:hover ~ #view #out {
visibility:hidden;
}
/* カーソル位置取得 */
#pos-x5:hover ~ #view {
--car-x:10;
}
#pos-x6:hover ~ #view {
--car-x:12;
}
#pos-x7:hover ~ #view {
--car-x:14;
}
#pos-x8:hover ~ #view {
--car-x:16;
}
#pos-x9:hover ~ #view {
--car-x:18;
}
#pos-x10:hover ~ #view {
--car-x:20;
}
#pos-x11:hover ~ #view {
--car-x:22;
}
#pos-x12:hover ~ #view {
--car-x:24;
}
#pos-x13:hover ~ #view {
--car-x:26;
}
#pos-x14:hover ~ #view {
--car-x:28;
}
#pos-x15:hover ~ #view {
--car-x:30;
}
#pos-x16:hover ~ #view {
--car-x:32;
}
#pos-x17:hover ~ #view {
--car-x:34;
}
#pos-x18:hover ~ #view {
--car-x:36;
}
#pos-x19:hover ~ #view {
--car-x:38;
}
#pos-x20:hover ~ #view {
--car-x:40;
}
#pos-x21:hover ~ #view {
--car-x:42;
}
#pos-x22:hover ~ #view {
--car-x:44;
}
#pos-x23:hover ~ #view {
--car-x:46;
}
#pos-x24:hover ~ #view {
--car-x:48;
}
#pos-x25:hover ~ #view {
--car-x:50;
}
#pos-x26:hover ~ #view {
--car-x:52;
}
#pos-x27:hover ~ #view {
--car-x:54;
}
#pos-x28:hover ~ #view {
--car-x:56;
}
#pos-x29:hover ~ #view {
--car-x:58;
}
#pos-x30:hover ~ #view {
--car-x:60;
}
#pos-x31:hover ~ #view {
--car-x:62;
}
#pos-x32:hover ~ #view {
--car-x:64;
}
#pos-x33:hover ~ #view {
--car-x:66;
}
#pos-x34:hover ~ #view {
--car-x:68;
}
#pos-x35:hover ~ #view {
--car-x:70;
}
#pos-x36:hover ~ #view {
--car-x:72;
}
#pos-x37:hover ~ #view {
--car-x:74;
}
#pos-x38:hover ~ #view {
--car-x:76;
}
#pos-x39:hover ~ #view {
--car-x:78;
}
#pos-x40:hover ~ #view {
--car-x:80;
}
#pos-x41:hover ~ #view {
--car-x:82;
}
#pos-x42:hover ~ #view {
--car-x:84;
}
#pos-x43:hover ~ #view {
--car-x:86;
}
#pos-x44:hover ~ #view {
--car-x:88;
}
#pos-x45:hover ~ #view {
--car-x:90;
}
#pos-x46:hover ~ #view {
--car-x:92;
}
#pos-x47:hover ~ #view {
--car-x:94;
}
#pos-x48:hover ~ #view {
--car-x:96;
}
#pos-x49:hover ~ #view {
--car-x:98;
}
#pos-x50:hover ~ #view {
--car-x:100;
}
#pos-x51:hover ~ #view {
--car-x:102;
}
#pos-x52:hover ~ #view {
--car-x:104;
}
#pos-x53:hover ~ #view {
--car-x:106;
}
#pos-x54:hover ~ #view {
--car-x:108;
}
#pos-x55:hover ~ #view {
--car-x:110;
}
#pos-x56:hover ~ #view {
--car-x:112;
}
#pos-x57:hover ~ #view {
--car-x:114;
}
#pos-x58:hover ~ #view {
--car-x:116;
}
#pos-x59:hover ~ #view {
--car-x:118;
}
#pos-x60:hover ~ #view {
--car-x:120;
}
#pos-x61:hover ~ #view {
--car-x:122;
}
#pos-x62:hover ~ #view {
--car-x:124;
}
#pos-x63:hover ~ #view {
--car-x:126;
}
#pos-x64:hover ~ #view {
--car-x:128;
}
#pos-x65:hover ~ #view {
--car-x:130;
}
#pos-x66:hover ~ #view {
--car-x:132;
}
#pos-x67:hover ~ #view {
--car-x:134;
}
#pos-x68:hover ~ #view {
--car-x:136;
}
#pos-x69:hover ~ #view {
--car-x:138;
}
#pos-x70:hover ~ #view {
--car-x:140;
}
#pos-x71:hover ~ #view {
--car-x:142;
}
#pos-x72:hover ~ #view {
--car-x:144;
}
#pos-x73:hover ~ #view {
--car-x:146;
}
#pos-x74:hover ~ #view {
--car-x:148;
}
#pos-x75:hover ~ #view {
--car-x:150;
}
#pos-x76:hover ~ #view {
--car-x:152;
}
#pos-x77:hover ~ #view {
--car-x:154;
}
#pos-x78:hover ~ #view {
--car-x:156;
}
#pos-x79:hover ~ #view {
--car-x:158;
}
#pos-x80:hover ~ #view {
--car-x:160;
}
#pos-x81:hover ~ #view {
--car-x:162;
}
#pos-x82:hover ~ #view {
--car-x:164;
}
#pos-x83:hover ~ #view {
--car-x:166;
}
#pos-x84:hover ~ #view {
--car-x:168;
}
#pos-x85:hover ~ #view {
--car-x:170;
}
#pos-x86:hover ~ #view {
--car-x:172;
}
#pos-x87:hover ~ #view {
--car-x:174;
}
#pos-x88:hover ~ #view {
--car-x:176;
}
#pos-x89:hover ~ #view {
--car-x:178;
}
#pos-x90:hover ~ #view {
--car-x:180;
}
#pos-x91:hover ~ #view {
--car-x:182;
}
#pos-x92:hover ~ #view {
--car-x:184;
}
#pos-x93:hover ~ #view {
--car-x:186;
}
#pos-x94:hover ~ #view {
--car-x:188;
}
#pos-x95:hover ~ #view {
--car-x:190;
}
#pos-x96:hover ~ #view {
--car-x:192;
}
#pos-x97:hover ~ #view {
--car-x:194;
}
#pos-x98:hover ~ #view {
--car-x:196;
}
#pos-x99:hover ~ #view {
--car-x:198;
}
#pos-x100:hover ~ #view {
--car-x:200;
}
#pos-x101:hover ~ #view {
--car-x:202;
}
#pos-x102:hover ~ #view {
--car-x:204;
}
#pos-x103:hover ~ #view {
--car-x:206;
}
#pos-x104:hover ~ #view {
--car-x:208;
}
#pos-x105:hover ~ #view {
--car-x:210;
}
#pos-x106:hover ~ #view {
--car-x:212;
}
#pos-x107:hover ~ #view {
--car-x:214;
}
#pos-x108:hover ~ #view {
--car-x:216;
}
#pos-x109:hover ~ #view {
--car-x:218;
}
#pos-x110:hover ~ #view {
--car-x:220;
}
#pos-x111:hover ~ #view {
--car-x:222;
}
#pos-x112:hover ~ #view {
--car-x:224;
}
#pos-x113:hover ~ #view {
--car-x:226;
}
#pos-x114:hover ~ #view {
--car-x:228;
}
#pos-x115:hover ~ #view {
--car-x:230;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート ドライブ ゲーム</DIV>
<BR>
<FORM>
<INPUT TYPE=RADIO ID="start">
<INPUT TYPE=RESET ID="reset">
<DIV ID="base">
<!-- カーソル位置取得 -->
<LABEL ID="pos-x5" FOR="start" CLASS="pos-x" STYLE="left:10px"></LABEL>
<LABEL ID="pos-x6" FOR="start" CLASS="pos-x" STYLE="left:12px"></LABEL>
<LABEL ID="pos-x7" FOR="start" CLASS="pos-x" STYLE="left:14px"></LABEL>
<LABEL ID="pos-x8" FOR="start" CLASS="pos-x" STYLE="left:16px"></LABEL>
<LABEL ID="pos-x9" FOR="start" CLASS="pos-x" STYLE="left:18px"></LABEL>
<LABEL ID="pos-x10" FOR="start" CLASS="pos-x" STYLE="left:20px"></LABEL>
<LABEL ID="pos-x11" FOR="start" CLASS="pos-x" STYLE="left:22px"></LABEL>
<LABEL ID="pos-x12" FOR="start" CLASS="pos-x" STYLE="left:24px"></LABEL>
<LABEL ID="pos-x13" FOR="start" CLASS="pos-x" STYLE="left:26px"></LABEL>
<LABEL ID="pos-x14" FOR="start" CLASS="pos-x" STYLE="left:28px"></LABEL>
<LABEL ID="pos-x15" FOR="start" CLASS="pos-x" STYLE="left:30px"></LABEL>
<LABEL ID="pos-x16" FOR="start" CLASS="pos-x" STYLE="left:32px"></LABEL>
<LABEL ID="pos-x17" FOR="start" CLASS="pos-x" STYLE="left:34px"></LABEL>
<LABEL ID="pos-x18" FOR="start" CLASS="pos-x" STYLE="left:36px"></LABEL>
<LABEL ID="pos-x19" FOR="start" CLASS="pos-x" STYLE="left:38px"></LABEL>
<LABEL ID="pos-x20" FOR="start" CLASS="pos-x" STYLE="left:40px"></LABEL>
<LABEL ID="pos-x21" FOR="start" CLASS="pos-x" STYLE="left:42px"></LABEL>
<LABEL ID="pos-x22" FOR="start" CLASS="pos-x" STYLE="left:44px"></LABEL>
<LABEL ID="pos-x23" FOR="start" CLASS="pos-x" STYLE="left:46px"></LABEL>
<LABEL ID="pos-x24" FOR="start" CLASS="pos-x" STYLE="left:48px"></LABEL>
<LABEL ID="pos-x25" FOR="start" CLASS="pos-x" STYLE="left:50px"></LABEL>
<LABEL ID="pos-x26" FOR="start" CLASS="pos-x" STYLE="left:52px"></LABEL>
<LABEL ID="pos-x27" FOR="start" CLASS="pos-x" STYLE="left:54px"></LABEL>
<LABEL ID="pos-x28" FOR="start" CLASS="pos-x" STYLE="left:56px"></LABEL>
<LABEL ID="pos-x29" FOR="start" CLASS="pos-x" STYLE="left:58px"></LABEL>
<LABEL ID="pos-x30" FOR="start" CLASS="pos-x" STYLE="left:60px"></LABEL>
<LABEL ID="pos-x31" FOR="start" CLASS="pos-x" STYLE="left:62px"></LABEL>
<LABEL ID="pos-x32" FOR="start" CLASS="pos-x" STYLE="left:64px"></LABEL>
<LABEL ID="pos-x33" FOR="start" CLASS="pos-x" STYLE="left:66px"></LABEL>
<LABEL ID="pos-x34" FOR="start" CLASS="pos-x" STYLE="left:68px"></LABEL>
<LABEL ID="pos-x35" FOR="start" CLASS="pos-x" STYLE="left:70px"></LABEL>
<LABEL ID="pos-x36" FOR="start" CLASS="pos-x" STYLE="left:72px"></LABEL>
<LABEL ID="pos-x37" FOR="start" CLASS="pos-x" STYLE="left:74px"></LABEL>
<LABEL ID="pos-x38" FOR="start" CLASS="pos-x" STYLE="left:76px"></LABEL>
<LABEL ID="pos-x39" FOR="start" CLASS="pos-x" STYLE="left:78px"></LABEL>
<LABEL ID="pos-x40" FOR="start" CLASS="pos-x" STYLE="left:80px"></LABEL>
<LABEL ID="pos-x41" FOR="start" CLASS="pos-x" STYLE="left:82px"></LABEL>
<LABEL ID="pos-x42" FOR="start" CLASS="pos-x" STYLE="left:84px"></LABEL>
<LABEL ID="pos-x43" FOR="start" CLASS="pos-x" STYLE="left:86px"></LABEL>
<LABEL ID="pos-x44" FOR="start" CLASS="pos-x" STYLE="left:88px"></LABEL>
<LABEL ID="pos-x45" FOR="start" CLASS="pos-x" STYLE="left:90px"></LABEL>
<LABEL ID="pos-x46" FOR="start" CLASS="pos-x" STYLE="left:92px"></LABEL>
<LABEL ID="pos-x47" FOR="start" CLASS="pos-x" STYLE="left:94px"></LABEL>
<LABEL ID="pos-x48" FOR="start" CLASS="pos-x" STYLE="left:96px"></LABEL>
<LABEL ID="pos-x49" FOR="start" CLASS="pos-x" STYLE="left:98px"></LABEL>
<LABEL ID="pos-x50" FOR="start" CLASS="pos-x" STYLE="left:100px"></LABEL>
<LABEL ID="pos-x51" FOR="start" CLASS="pos-x" STYLE="left:102px"></LABEL>
<LABEL ID="pos-x52" FOR="start" CLASS="pos-x" STYLE="left:104px"></LABEL>
<LABEL ID="pos-x53" FOR="start" CLASS="pos-x" STYLE="left:106px"></LABEL>
<LABEL ID="pos-x54" FOR="start" CLASS="pos-x" STYLE="left:108px"></LABEL>
<LABEL ID="pos-x55" FOR="start" CLASS="pos-x" STYLE="left:110px"></LABEL>
<LABEL ID="pos-x56" FOR="start" CLASS="pos-x" STYLE="left:112px"></LABEL>
<LABEL ID="pos-x57" FOR="start" CLASS="pos-x" STYLE="left:114px"></LABEL>
<LABEL ID="pos-x58" FOR="start" CLASS="pos-x" STYLE="left:116px"></LABEL>
<LABEL ID="pos-x59" FOR="start" CLASS="pos-x" STYLE="left:118px"></LABEL>
<LABEL ID="pos-x60" FOR="start" CLASS="pos-x" STYLE="left:120px"></LABEL>
<LABEL ID="pos-x61" FOR="start" CLASS="pos-x" STYLE="left:122px"></LABEL>
<LABEL ID="pos-x62" FOR="start" CLASS="pos-x" STYLE="left:124px"></LABEL>
<LABEL ID="pos-x63" FOR="start" CLASS="pos-x" STYLE="left:126px"></LABEL>
<LABEL ID="pos-x64" FOR="start" CLASS="pos-x" STYLE="left:128px"></LABEL>
<LABEL ID="pos-x65" FOR="start" CLASS="pos-x" STYLE="left:130px"></LABEL>
<LABEL ID="pos-x66" FOR="start" CLASS="pos-x" STYLE="left:132px"></LABEL>
<LABEL ID="pos-x67" FOR="start" CLASS="pos-x" STYLE="left:134px"></LABEL>
<LABEL ID="pos-x68" FOR="start" CLASS="pos-x" STYLE="left:136px"></LABEL>
<LABEL ID="pos-x69" FOR="start" CLASS="pos-x" STYLE="left:138px"></LABEL>
<LABEL ID="pos-x70" FOR="start" CLASS="pos-x" STYLE="left:140px"></LABEL>
<LABEL ID="pos-x71" FOR="start" CLASS="pos-x" STYLE="left:142px"></LABEL>
<LABEL ID="pos-x72" FOR="start" CLASS="pos-x" STYLE="left:144px"></LABEL>
<LABEL ID="pos-x73" FOR="start" CLASS="pos-x" STYLE="left:146px"></LABEL>
<LABEL ID="pos-x74" FOR="start" CLASS="pos-x" STYLE="left:148px"></LABEL>
<LABEL ID="pos-x75" FOR="start" CLASS="pos-x" STYLE="left:150px"></LABEL>
<LABEL ID="pos-x76" FOR="start" CLASS="pos-x" STYLE="left:152px"></LABEL>
<LABEL ID="pos-x77" FOR="start" CLASS="pos-x" STYLE="left:154px"></LABEL>
<LABEL ID="pos-x78" FOR="start" CLASS="pos-x" STYLE="left:156px"></LABEL>
<LABEL ID="pos-x79" FOR="start" CLASS="pos-x" STYLE="left:158px"></LABEL>
<LABEL ID="pos-x80" FOR="start" CLASS="pos-x" STYLE="left:160px"></LABEL>
<LABEL ID="pos-x81" FOR="start" CLASS="pos-x" STYLE="left:162px"></LABEL>
<LABEL ID="pos-x82" FOR="start" CLASS="pos-x" STYLE="left:164px"></LABEL>
<LABEL ID="pos-x83" FOR="start" CLASS="pos-x" STYLE="left:166px"></LABEL>
<LABEL ID="pos-x84" FOR="start" CLASS="pos-x" STYLE="left:168px"></LABEL>
<LABEL ID="pos-x85" FOR="start" CLASS="pos-x" STYLE="left:170px"></LABEL>
<LABEL ID="pos-x86" FOR="start" CLASS="pos-x" STYLE="left:172px"></LABEL>
<LABEL ID="pos-x87" FOR="start" CLASS="pos-x" STYLE="left:174px"></LABEL>
<LABEL ID="pos-x88" FOR="start" CLASS="pos-x" STYLE="left:176px"></LABEL>
<LABEL ID="pos-x89" FOR="start" CLASS="pos-x" STYLE="left:178px"></LABEL>
<LABEL ID="pos-x90" FOR="start" CLASS="pos-x" STYLE="left:180px"></LABEL>
<LABEL ID="pos-x91" FOR="start" CLASS="pos-x" STYLE="left:182px"></LABEL>
<LABEL ID="pos-x92" FOR="start" CLASS="pos-x" STYLE="left:184px"></LABEL>
<LABEL ID="pos-x93" FOR="start" CLASS="pos-x" STYLE="left:186px"></LABEL>
<LABEL ID="pos-x94" FOR="start" CLASS="pos-x" STYLE="left:188px"></LABEL>
<LABEL ID="pos-x95" FOR="start" CLASS="pos-x" STYLE="left:190px"></LABEL>
<LABEL ID="pos-x96" FOR="start" CLASS="pos-x" STYLE="left:192px"></LABEL>
<LABEL ID="pos-x97" FOR="start" CLASS="pos-x" STYLE="left:194px"></LABEL>
<LABEL ID="pos-x98" FOR="start" CLASS="pos-x" STYLE="left:196px"></LABEL>
<LABEL ID="pos-x99" FOR="start" CLASS="pos-x" STYLE="left:198px"></LABEL>
<LABEL ID="pos-x100" FOR="start" CLASS="pos-x" STYLE="left:200px"></LABEL>
<LABEL ID="pos-x101" FOR="start" CLASS="pos-x" STYLE="left:202px"></LABEL>
<LABEL ID="pos-x102" FOR="start" CLASS="pos-x" STYLE="left:204px"></LABEL>
<LABEL ID="pos-x103" FOR="start" CLASS="pos-x" STYLE="left:206px"></LABEL>
<LABEL ID="pos-x104" FOR="start" CLASS="pos-x" STYLE="left:208px"></LABEL>
<LABEL ID="pos-x105" FOR="start" CLASS="pos-x" STYLE="left:210px"></LABEL>
<LABEL ID="pos-x106" FOR="start" CLASS="pos-x" STYLE="left:212px"></LABEL>
<LABEL ID="pos-x107" FOR="start" CLASS="pos-x" STYLE="left:214px"></LABEL>
<LABEL ID="pos-x108" FOR="start" CLASS="pos-x" STYLE="left:216px"></LABEL>
<LABEL ID="pos-x109" FOR="start" CLASS="pos-x" STYLE="left:218px"></LABEL>
<LABEL ID="pos-x110" FOR="start" CLASS="pos-x" STYLE="left:220px"></LABEL>
<LABEL ID="pos-x111" FOR="start" CLASS="pos-x" STYLE="left:222px"></LABEL>
<LABEL ID="pos-x112" FOR="start" CLASS="pos-x" STYLE="left:224px"></LABEL>
<LABEL ID="pos-x113" FOR="start" CLASS="pos-x" STYLE="left:226px"></LABEL>
<LABEL ID="pos-x114" FOR="start" CLASS="pos-x" STYLE="left:228px"></LABEL>
<LABEL ID="pos-x115" FOR="start" CLASS="pos-x" STYLE="left:230px"></LABEL>
<DIV ID="pos-l"></DIV>
<DIV ID="pos-r"></DIV>
<DIV ID="view">
<DIV ID="mask"></DIV>
<!-- コース データ -->
<DIV CLASS="course" STYLE="--x: 90; --y: 0"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 1"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 2"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 3"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 4"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 5"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 6"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y: 7"></DIV>
<DIV CLASS="course" STYLE="--x: 89; --y: 8"></DIV>
<DIV CLASS="course" STYLE="--x: 89; --y: 9"></DIV>
<DIV CLASS="course" STYLE="--x: 89; --y: 10"></DIV>
<DIV CLASS="course" STYLE="--x: 88; --y: 11"></DIV>
<DIV CLASS="course" STYLE="--x: 88; --y: 12"></DIV>
<DIV CLASS="course" STYLE="--x: 87; --y: 13"></DIV>
<DIV CLASS="course" STYLE="--x: 87; --y: 14"></DIV>
<DIV CLASS="course" STYLE="--x: 86; --y: 15"></DIV>
<DIV CLASS="course" STYLE="--x: 85; --y: 16"></DIV>
<DIV CLASS="course" STYLE="--x: 84; --y: 17"></DIV>
<DIV CLASS="course" STYLE="--x: 83; --y: 18"></DIV>
<DIV CLASS="course" STYLE="--x: 82; --y: 19"></DIV>
<DIV CLASS="course" STYLE="--x: 81; --y: 20"></DIV>
<DIV CLASS="course" STYLE="--x: 80; --y: 21"></DIV>
<DIV CLASS="course" STYLE="--x: 79; --y: 22"></DIV>
<DIV CLASS="course" STYLE="--x: 78; --y: 23"></DIV>
<DIV CLASS="course" STYLE="--x: 77; --y: 24"></DIV>
<DIV CLASS="course" STYLE="--x: 76; --y: 25"></DIV>
<DIV CLASS="course" STYLE="--x: 75; --y: 26"></DIV>
<DIV CLASS="course" STYLE="--x: 74; --y: 27"></DIV>
<DIV CLASS="course" STYLE="--x: 73; --y: 28"></DIV>
<DIV CLASS="course" STYLE="--x: 72; --y: 29"></DIV>
<DIV CLASS="course" STYLE="--x: 71; --y: 30"></DIV>
<DIV CLASS="course" STYLE="--x: 70; --y: 31"></DIV>
<DIV CLASS="course" STYLE="--x: 69; --y: 32"></DIV>
<DIV CLASS="course" STYLE="--x: 68; --y: 33"></DIV>
<DIV CLASS="course" STYLE="--x: 67; --y: 34"></DIV>
<DIV CLASS="course" STYLE="--x: 66; --y: 35"></DIV>
<DIV CLASS="course" STYLE="--x: 65; --y: 36"></DIV>
<DIV CLASS="course" STYLE="--x: 64; --y: 37"></DIV>
<DIV CLASS="course" STYLE="--x: 63; --y: 38"></DIV>
<DIV CLASS="course" STYLE="--x: 62; --y: 39"></DIV>
<DIV CLASS="course" STYLE="--x: 61; --y: 40"></DIV>
<DIV CLASS="course" STYLE="--x: 60; --y: 41"></DIV>
<DIV CLASS="course" STYLE="--x: 59; --y: 42"></DIV>
<DIV CLASS="course" STYLE="--x: 58; --y: 43"></DIV>
<DIV CLASS="course" STYLE="--x: 57; --y: 44"></DIV>
<DIV CLASS="course" STYLE="--x: 56; --y: 45"></DIV>
<DIV CLASS="course" STYLE="--x: 55; --y: 46"></DIV>
<DIV CLASS="course" STYLE="--x: 54; --y: 47"></DIV>
<DIV CLASS="course" STYLE="--x: 53; --y: 48"></DIV>
<DIV CLASS="course" STYLE="--x: 52; --y: 49"></DIV>
<DIV CLASS="course" STYLE="--x: 51; --y: 50"></DIV>
<DIV CLASS="course" STYLE="--x: 50; --y: 51"></DIV>
<DIV CLASS="course" STYLE="--x: 49; --y: 52"></DIV>
<DIV CLASS="course" STYLE="--x: 48; --y: 53"></DIV>
<DIV CLASS="course" STYLE="--x: 47; --y: 54"></DIV>
<DIV CLASS="course" STYLE="--x: 46; --y: 55"></DIV>
<DIV CLASS="course" STYLE="--x: 45; --y: 56"></DIV>
<DIV CLASS="course" STYLE="--x: 44; --y: 57"></DIV>
<DIV CLASS="course" STYLE="--x: 43; --y: 58"></DIV>
<DIV CLASS="course" STYLE="--x: 42; --y: 59"></DIV>
<DIV CLASS="course" STYLE="--x: 41; --y: 60"></DIV>
<DIV CLASS="course" STYLE="--x: 40; --y: 61"></DIV>
<DIV CLASS="course" STYLE="--x: 39; --y: 62"></DIV>
<DIV CLASS="course" STYLE="--x: 38; --y: 63"></DIV>
<DIV CLASS="course" STYLE="--x: 37; --y: 64"></DIV>
<DIV CLASS="course" STYLE="--x: 36; --y: 65"></DIV>
<DIV CLASS="course" STYLE="--x: 35; --y: 66"></DIV>
<DIV CLASS="course" STYLE="--x: 34; --y: 67"></DIV>
<DIV CLASS="course" STYLE="--x: 33; --y: 68"></DIV>
<DIV CLASS="course" STYLE="--x: 32; --y: 69"></DIV>
<DIV CLASS="course" STYLE="--x: 31; --y: 70"></DIV>
<DIV CLASS="course" STYLE="--x: 30; --y: 71"></DIV>
<DIV CLASS="course" STYLE="--x: 29; --y: 72"></DIV>
<DIV CLASS="course" STYLE="--x: 28; --y: 73"></DIV>
<DIV CLASS="course" STYLE="--x: 27; --y: 74"></DIV>
<DIV CLASS="course" STYLE="--x: 26; --y: 75"></DIV>
<DIV CLASS="course" STYLE="--x: 26; --y: 76"></DIV>
<DIV CLASS="course" STYLE="--x: 25; --y: 77"></DIV>
<DIV CLASS="course" STYLE="--x: 25; --y: 78"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 79"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 80"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 81"></DIV>
<DIV CLASS="course" STYLE="--x: 23; --y: 82"></DIV>
<DIV CLASS="course" STYLE="--x: 23; --y: 83"></DIV>
<DIV CLASS="course" STYLE="--x: 23; --y: 84"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 85"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 86"></DIV>
<DIV CLASS="course" STYLE="--x: 24; --y: 87"></DIV>
<DIV CLASS="course" STYLE="--x: 25; --y: 88"></DIV>
<DIV CLASS="course" STYLE="--x: 25; --y: 89"></DIV>
<DIV CLASS="course" STYLE="--x: 26; --y: 90"></DIV>
<DIV CLASS="course" STYLE="--x: 26; --y: 91"></DIV>
<DIV CLASS="course" STYLE="--x: 27; --y: 92"></DIV>
<DIV CLASS="course" STYLE="--x: 28; --y: 93"></DIV>
<DIV CLASS="course" STYLE="--x: 29; --y: 94"></DIV>
<DIV CLASS="course" STYLE="--x: 30; --y: 95"></DIV>
<DIV CLASS="course" STYLE="--x: 31; --y: 96"></DIV>
<DIV CLASS="course" STYLE="--x: 32; --y: 97"></DIV>
<DIV CLASS="course" STYLE="--x: 33; --y: 98"></DIV>
<DIV CLASS="course" STYLE="--x: 34; --y: 99"></DIV>
<DIV CLASS="course" STYLE="--x: 35; --y:100"></DIV>
<DIV CLASS="course" STYLE="--x: 36; --y:101"></DIV>
<DIV CLASS="course" STYLE="--x: 37; --y:102"></DIV>
<DIV CLASS="course" STYLE="--x: 38; --y:103"></DIV>
<DIV CLASS="course" STYLE="--x: 39; --y:104"></DIV>
<DIV CLASS="course" STYLE="--x: 40; --y:105"></DIV>
<DIV CLASS="course" STYLE="--x: 41; --y:106"></DIV>
<DIV CLASS="course" STYLE="--x: 42; --y:107"></DIV>
<DIV CLASS="course" STYLE="--x: 43; --y:108"></DIV>
<DIV CLASS="course" STYLE="--x: 44; --y:109"></DIV>
<DIV CLASS="course" STYLE="--x: 45; --y:110"></DIV>
<DIV CLASS="course" STYLE="--x: 46; --y:111"></DIV>
<DIV CLASS="course" STYLE="--x: 47; --y:112"></DIV>
<DIV CLASS="course" STYLE="--x: 48; --y:113"></DIV>
<DIV CLASS="course" STYLE="--x: 49; --y:114"></DIV>
<DIV CLASS="course" STYLE="--x: 50; --y:115"></DIV>
<DIV CLASS="course" STYLE="--x: 51; --y:116"></DIV>
<DIV CLASS="course" STYLE="--x: 52; --y:117"></DIV>
<DIV CLASS="course" STYLE="--x: 53; --y:118"></DIV>
<DIV CLASS="course" STYLE="--x: 54; --y:119"></DIV>
<DIV CLASS="course" STYLE="--x: 55; --y:120"></DIV>
<DIV CLASS="course" STYLE="--x: 56; --y:121"></DIV>
<DIV CLASS="course" STYLE="--x: 57; --y:122"></DIV>
<DIV CLASS="course" STYLE="--x: 58; --y:123"></DIV>
<DIV CLASS="course" STYLE="--x: 59; --y:124"></DIV>
<DIV CLASS="course" STYLE="--x: 60; --y:125"></DIV>
<DIV CLASS="course" STYLE="--x: 61; --y:126"></DIV>
<DIV CLASS="course" STYLE="--x: 62; --y:127"></DIV>
<DIV CLASS="course" STYLE="--x: 63; --y:128"></DIV>
<DIV CLASS="course" STYLE="--x: 64; --y:129"></DIV>
<DIV CLASS="course" STYLE="--x: 65; --y:130"></DIV>
<DIV CLASS="course" STYLE="--x: 66; --y:131"></DIV>
<DIV CLASS="course" STYLE="--x: 67; --y:132"></DIV>
<DIV CLASS="course" STYLE="--x: 68; --y:133"></DIV>
<DIV CLASS="course" STYLE="--x: 69; --y:134"></DIV>
<DIV CLASS="course" STYLE="--x: 70; --y:135"></DIV>
<DIV CLASS="course" STYLE="--x: 71; --y:136"></DIV>
<DIV CLASS="course" STYLE="--x: 72; --y:137"></DIV>
<DIV CLASS="course" STYLE="--x: 73; --y:138"></DIV>
<DIV CLASS="course" STYLE="--x: 74; --y:139"></DIV>
<DIV CLASS="course" STYLE="--x: 75; --y:140"></DIV>
<DIV CLASS="course" STYLE="--x: 76; --y:141"></DIV>
<DIV CLASS="course" STYLE="--x: 77; --y:142"></DIV>
<DIV CLASS="course" STYLE="--x: 78; --y:143"></DIV>
<DIV CLASS="course" STYLE="--x: 79; --y:144"></DIV>
<DIV CLASS="course" STYLE="--x: 80; --y:145"></DIV>
<DIV CLASS="course" STYLE="--x: 81; --y:146"></DIV>
<DIV CLASS="course" STYLE="--x: 82; --y:147"></DIV>
<DIV CLASS="course" STYLE="--x: 83; --y:148"></DIV>
<DIV CLASS="course" STYLE="--x: 84; --y:149"></DIV>
<DIV CLASS="course" STYLE="--x: 85; --y:150"></DIV>
<DIV CLASS="course" STYLE="--x: 86; --y:151"></DIV>
<DIV CLASS="course" STYLE="--x: 87; --y:152"></DIV>
<DIV CLASS="course" STYLE="--x: 88; --y:153"></DIV>
<DIV CLASS="course" STYLE="--x: 89; --y:154"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:155"></DIV>
<DIV CLASS="course" STYLE="--x: 91; --y:156"></DIV>
<DIV CLASS="course" STYLE="--x: 92; --y:157"></DIV>
<DIV CLASS="course" STYLE="--x: 93; --y:158"></DIV>
<DIV CLASS="course" STYLE="--x: 94; --y:159"></DIV>
<DIV CLASS="course" STYLE="--x: 95; --y:160"></DIV>
<DIV CLASS="course" STYLE="--x: 96; --y:161"></DIV>
<DIV CLASS="course" STYLE="--x: 97; --y:162"></DIV>
<DIV CLASS="course" STYLE="--x: 98; --y:163"></DIV>
<DIV CLASS="course" STYLE="--x: 99; --y:164"></DIV>
<DIV CLASS="course" STYLE="--x:100; --y:165"></DIV>
<DIV CLASS="course" STYLE="--x:101; --y:166"></DIV>
<DIV CLASS="course" STYLE="--x:102; --y:167"></DIV>
<DIV CLASS="course" STYLE="--x:103; --y:168"></DIV>
<DIV CLASS="course" STYLE="--x:104; --y:169"></DIV>
<DIV CLASS="course" STYLE="--x:105; --y:170"></DIV>
<DIV CLASS="course" STYLE="--x:106; --y:171"></DIV>
<DIV CLASS="course" STYLE="--x:107; --y:172"></DIV>
<DIV CLASS="course" STYLE="--x:108; --y:173"></DIV>
<DIV CLASS="course" STYLE="--x:109; --y:174"></DIV>
<DIV CLASS="course" STYLE="--x:110; --y:175"></DIV>
<DIV CLASS="course" STYLE="--x:111; --y:176"></DIV>
<DIV CLASS="course" STYLE="--x:112; --y:177"></DIV>
<DIV CLASS="course" STYLE="--x:113; --y:178"></DIV>
<DIV CLASS="course" STYLE="--x:114; --y:179"></DIV>
<DIV CLASS="course" STYLE="--x:115; --y:180"></DIV>
<DIV CLASS="course" STYLE="--x:116; --y:181"></DIV>
<DIV CLASS="course" STYLE="--x:117; --y:182"></DIV>
<DIV CLASS="course" STYLE="--x:118; --y:183"></DIV>
<DIV CLASS="course" STYLE="--x:119; --y:184"></DIV>
<DIV CLASS="course" STYLE="--x:120; --y:185"></DIV>
<DIV CLASS="course" STYLE="--x:120; --y:186"></DIV>
<DIV CLASS="course" STYLE="--x:121; --y:187"></DIV>
<DIV CLASS="course" STYLE="--x:121; --y:188"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:189"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:190"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:191"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:192"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:193"></DIV>
<DIV CLASS="course" STYLE="--x:122; --y:194"></DIV>
<DIV CLASS="course" STYLE="--x:121; --y:195"></DIV>
<DIV CLASS="course" STYLE="--x:121; --y:196"></DIV>
<DIV CLASS="course" STYLE="--x:120; --y:197"></DIV>
<DIV CLASS="course" STYLE="--x:120; --y:198"></DIV>
<DIV CLASS="course" STYLE="--x:119; --y:199"></DIV>
<DIV CLASS="course" STYLE="--x:118; --y:200"></DIV>
<DIV CLASS="course" STYLE="--x:117; --y:201"></DIV>
<DIV CLASS="course" STYLE="--x:116; --y:202"></DIV>
<DIV CLASS="course" STYLE="--x:115; --y:203"></DIV>
<DIV CLASS="course" STYLE="--x:114; --y:204"></DIV>
<DIV CLASS="course" STYLE="--x:113; --y:205"></DIV>
<DIV CLASS="course" STYLE="--x:112; --y:206"></DIV>
<DIV CLASS="course" STYLE="--x:111; --y:207"></DIV>
<DIV CLASS="course" STYLE="--x:110; --y:208"></DIV>
<DIV CLASS="course" STYLE="--x:109; --y:209"></DIV>
<DIV CLASS="course" STYLE="--x:108; --y:210"></DIV>
<DIV CLASS="course" STYLE="--x:107; --y:211"></DIV>
<DIV CLASS="course" STYLE="--x:106; --y:212"></DIV>
<DIV CLASS="course" STYLE="--x:105; --y:213"></DIV>
<DIV CLASS="course" STYLE="--x:104; --y:214"></DIV>
<DIV CLASS="course" STYLE="--x:103; --y:215"></DIV>
<DIV CLASS="course" STYLE="--x:102; --y:216"></DIV>
<DIV CLASS="course" STYLE="--x:101; --y:217"></DIV>
<DIV CLASS="course" STYLE="--x:100; --y:218"></DIV>
<DIV CLASS="course" STYLE="--x: 99; --y:219"></DIV>
<DIV CLASS="course" STYLE="--x: 98; --y:220"></DIV>
<DIV CLASS="course" STYLE="--x: 97; --y:221"></DIV>
<DIV CLASS="course" STYLE="--x: 96; --y:222"></DIV>
<DIV CLASS="course" STYLE="--x: 95; --y:223"></DIV>
<DIV CLASS="course" STYLE="--x: 94; --y:224"></DIV>
<DIV CLASS="course" STYLE="--x: 93; --y:225"></DIV>
<DIV CLASS="course" STYLE="--x: 93; --y:226"></DIV>
<DIV CLASS="course" STYLE="--x: 92; --y:227"></DIV>
<DIV CLASS="course" STYLE="--x: 92; --y:228"></DIV>
<DIV CLASS="course" STYLE="--x: 91; --y:229"></DIV>
<DIV CLASS="course" STYLE="--x: 91; --y:230"></DIV>
<DIV CLASS="course" STYLE="--x: 91; --y:231"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:232"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:233"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:234"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:235"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:236"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:237"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:238"></DIV>
<DIV CLASS="course" STYLE="--x: 90; --y:239"></DIV>
<!-- 車 -->
<DIV ID="car">
<DIV ID="car-1"></DIV>
<DIV ID="car-2"></DIV>
<DIV ID="car-3"></DIV>
<DIV ID="car-4"></DIV>
</DIV>
<DIV ID="clip">
<DIV ID="goal">ゴール</DIV>
</DIV>
<DIV ID="click">クリックでスタート</DIV>
<DIV ID="out">コース アウト</DIV>
<LABEL ID="reset-l" FOR="reset">もう一度遊ぶ</LABEL>
</DIV>
</DIV>
</FORM>
</BODY>
</HTML>
|
