body {
    background:#fff;
}
#bowl {
    background:#EFFCFF;
    border:solid 1px #95CFEF;
    position:relative;
    width:300px;
    height:300px;
    border-radius:20px;
}
#circle {
    position:absolute;
    width:200px;
    height:200px;
    margin:50px;
    border-radius:200px;
}
.goldfish {
    position:relative;
    width:32px;
    height:46px;
    -moz-transform-origin:8px center;
    -webkit-transform-origin:8px center;
    top:150px;
    left:33px;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    
    -webkit-animation-name:goldfishMortion;
    -webkit-animation-property:all;
    -webkit-animation-duration:20s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
.goldfish *{
    background:#FF652F;
    position:absolute;
}
.goldfish .head {
    left:8px;
    width:16px;
    height:20px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.goldfish .body {
    left:8px;
    top:8px;
    width:16px;
    height:24px;
    -moz-border-radius:5px 5px 6px 6px / 5px 5px 30px 30px;
    border-radius:5px 5px 6px 6px / 5px 5px 30px 30px;
    -moz-transform-origin:top center;
    -moz-transform:rotate(0deg);
}
.goldfish .fin {
    top:10px;
    width:8px;
    height:8px;
    
    -webkit-animation-property:all;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
.goldfish .fin.left {
    left:1px;
    -moz-border-radius:5px 2px 10px 10px;
    border-radius:5px 2px 10px 10px;
    background: -moz-linear-gradient(right, rgba(255,101,47,1) 0%, rgba(255,101,47, 0.3) 100%);
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0%,rgba(255,101,47,1)), color-stop(100%,rgba(255,101,47,0.3)));
    
    -moz-transform-origin:right top;
    -webkit-transform-origin:right top;
    -webkit-animation-name:goldfishLeftFinMortion;
}
.goldfish .fin.right {
    left:23px;
    -moz-border-radius:2px 5px 10px 10px;
    border-radius:2px 5px 10px 10px;
    background: -moz-linear-gradient(left, rgba(255,101,47,1) 0%, rgba(255,101,47, 0.3) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,101,47,1)), color-stop(100%,rgba(255,101,47,0.3)));
    
    -moz-transform-origin:left top;
    -webkit-transform-origin:left top;
    -webkit-animation-name:goldfishRightFinMortion;
}
.goldfish .tail {
    width:10px;
    height:12px;
    top:28px;
    left:11px;
    -moz-border-radius:5px 5px 15px 15px / 5px 5px 30px 30px;
    border-radius:5px 5px 15px 15px / 5px 5px 30px 30px;
    -moz-transform-origin:top center;
    -moz-transform:rotate(0deg);
    -webkit-transform-origin:top center;
    -webkit-transform:rotate(0deg);
    position:relative;
    
    -webkit-animation-name:goldfishTailMortion;
    -webkit-animation-property:all;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
.goldfish .tail .parts {
    width:6px;
    height:8px;
    top:10px;
    left:2px;
    -moz-border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    background: -moz-linear-gradient(top, rgba(255,101,47,1) 0%, rgba(255,101,47, 0.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,101,47,1)), color-stop(100%,rgba(255,101,47,0.3)));
    -moz-transform-origin:top center;
    -moz-transform:rotate(0deg);
    -webkit-transform-origin:top center;
    -webkit-transform:rotate(0deg);
    
    
    -webkit-animation-name:goldfishTailPartMortion;
    -webkit-animation-property:all;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
.goldfish .tail .parts:before {
    content:"";
    display:block;
    position:absolute;
    width:6px;
    height:8px;
    top:0px;
    left:-1px;
    -moz-border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    background: -moz-linear-gradient(top, rgba(255,101,47,1) 0%, rgba(255,101,47, 0.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,101,47,1)), color-stop(100%,rgba(255,101,47,0.3)));
    -moz-transform-origin:top center;
    -moz-transform:rotate(30deg);
    -webkit-transform-origin:top center;
    -webkit-transform:rotate(30deg);
}
.goldfish .tail .parts:after {
    content:"";
    display:block;
    position:absolute;
    width:6px;
    height:8px;
    top:0px;
    left:1px;
    -moz-border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    border-radius:6px 6px 2px 2px / 10px 10px 2px 2px;
    background: -moz-linear-gradient(top, rgba(255,101,47,1) 0%, rgba(255,101,47, 0.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,101,47,1)), color-stop(100%,rgba(255,101,47,0.3)));
    -moz-transform-origin:top center;
    -moz-transform:rotate(-30deg);
    -webkit-transform-origin:top center;
    -webkit-transform:rotate(-30deg);
}


@-webkit-keyframes "goldfishTailMortion" {
    0%{
        -webkit-transform:rotate(0deg);
    }
    25%{
        -webkit-transform:rotate(20deg);
    }
    50%{
        -webkit-transform:rotate(0deg);
    }
    75% {
        -webkit-transform:rotate(-20deg);
    }
    100%{
        -webkit-transform:rotate(0deg);
    }
}

@-webkit-keyframes "goldfishTailPartMortion" {
    0%{
        -webkit-transform:rotate(0deg);
    }
    30%{
        -webkit-transform:rotate(30deg);
    }
    50% {
        -webkit-transform:rotate(0deg);
    }
    80%{
        -webkit-transform:rotate(-30deg);
    }
    100%{
        -webkit-transform:rotate(0deg);
    }
}
@-webkit-keyframes "goldfishLeftFinMortion" {
    0%{
        -webkit-transform:scale(0deg) scale(1);
    }
    50%{
        -webkit-transform:rotate(-10deg) scaleX(0.8);
    }
    100%{
        -webkit-transform:rotate(0deg) scale(1);
    }
}
@-webkit-keyframes "goldfishRightFinMortion" {
    0%{
        -webkit-transform:scale(0deg) scale(1);
    }
    50%{
        -webkit-transform:rotate(10deg) scaleX(0.8);
    }
    100%{
        -webkit-transform:rotate(0deg) scale(1);
    }
}
/*
@-webkit-keyframes "goldfishMortion" {
    0% {
        top:150px;
        left:33px;
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
    6% {
        top:90px;
        left:40px;
        -moz-transform:rotate(27.5deg);
        -webkit-transform:rotate(27.5deg);
    }
    12.5% {
        top:54px;
        left:63px;
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
    }
    18% {
        top:34px;
        left:93px;
        -moz-transform:rotate(66deg);
        -webkit-transform:rotate(66deg);
    }
    25% {
        top:20px;
        left:130px;
        -moz-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
    }
    31% {
        top:30px;
        left:190px;
        -moz-transform:rotate(111deg);
        -webkit-transform:rotate(111deg);
    }
    37.5% {
        top:40px;
        left:210px;
        -moz-transform:rotate(135deg);
        -webkit-transform:rotate(135deg);
    }
    43% {
        top:80px;
        left:240px;
        -moz-transform:rotate(158deg);
        -webkit-transform:rotate(158deg);
    }
    50% {
        top:120px;
        left:250px;
        -moz-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
    }
    56% {
        top:150px;
        left:250px;
        -moz-transform:rotate(202deg);
        -webkit-transform:rotate(202deg);
    }
    62.5% {
        top:200px;
        left:220px;
        -moz-transform:rotate(225deg);
        -webkit-transform:rotate(225deg);
    }
    68% {
        top:220px;
        left:200px;
        -moz-transform:rotate(247deg);
        -webkit-transform:rotate(247deg);
    }
    75% {
        top:235px;
        left:150px;
        -moz-transform:rotate(270deg);
        -webkit-transform:rotate(270deg);
    }
    81% {
        top:230px;
        left:110px;
        -moz-transform:rotate(292deg);
        -webkit-transform:rotate(292deg);
    }
    87.5% {
        top:210px;
        left:70px;
        -moz-transform:rotate(315deg);
        -webkit-transform:rotate(315deg);
    }
    93% {
        top:180px;
        left:45px;
        -moz-transform:rotate(337deg);
        -webkit-transform:rotate(337deg);
    }
    100%{
        top:150px;
        left:33px;
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }
}
*/


/*------------------------------------------------
    
------------------------------------------------*/
body{
    margin: 0; padding: 0;
}
#bowl{
    top: 10px; left: 10px;
    overflow: hidden;
}

/*------------------------------------------------
    位置リセット用
------------------------------------------------*/
#reset{
    position: absolute;
    top: 0; left: 0;
    width: 300px; height: 300px;
    display: none;
}
/*----- 餌食べてるときだけ表示 -----*/
.a:target #reset{
    display: block;
}
/*
#aReset,
.a{
    position: fixed;
}
*/
/*------------------------------------------------
    segments
------------------------------------------------*/
.row{
    height: 30px;
}
.row:after{
    content: " ";
    clear: left;
}
.s{
    position: relative;
    float: left;
    width: 30px; height: 30px;
}

/*----- クリックで餌をあげる -----*/
.s a{
    position: absolute;
    display: block;
    width: 30px; height: 30px;
}

/*------------------------------------------------
    座標調整用
------------------------------------------------*/
#origin{
    position: absolute;
    top:  150px; left: 150px;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    -webkit-transition: all 1s ease-out;
}/*----- 餌の位置に移動 -----*/
#a0:target  #origin{ margin: -135px 0 0 -135px; }
#a1:target  #origin{ margin: -135px 0 0 -105px; }
#a2:target  #origin{ margin: -135px 0 0  -75px; }
#a3:target  #origin{ margin: -135px 0 0  -45px; }
#a4:target  #origin{ margin: -135px 0 0  -15px; }
#a5:target  #origin{ margin: -135px 0 0   15px; }
#a6:target  #origin{ margin: -135px 0 0   45px; }
#a7:target  #origin{ margin: -135px 0 0   75px; }
#a8:target  #origin{ margin: -135px 0 0  105px; }
#a9:target  #origin{ margin: -135px 0 0  135px; }

#a10:target #origin{ margin: -105px 0 0 -135px; }
#a11:target #origin{ margin: -105px 0 0 -105px; }
#a12:target #origin{ margin: -105px 0 0  -75px; }
#a13:target #origin{ margin: -105px 0 0  -45px; }
#a14:target #origin{ margin: -105px 0 0  -15px; }
#a15:target #origin{ margin: -105px 0 0   15px; }
#a16:target #origin{ margin: -105px 0 0   45px; }
#a17:target #origin{ margin: -105px 0 0   75px; }
#a18:target #origin{ margin: -105px 0 0  105px; }
#a19:target #origin{ margin: -105px 0 0  135px; }

#a20:target #origin{ margin: -75px 0 0 -135px; }
#a21:target #origin{ margin: -75px 0 0 -105px; }
#a22:target #origin{ margin: -75px 0 0  -75px; }
#a23:target #origin{ margin: -75px 0 0  -45px; }
#a24:target #origin{ margin: -75px 0 0  -15px; }
#a25:target #origin{ margin: -75px 0 0   15px; }
#a26:target #origin{ margin: -75px 0 0   45px; }
#a27:target #origin{ margin: -75px 0 0   75px; }
#a28:target #origin{ margin: -75px 0 0  105px; }
#a29:target #origin{ margin: -75px 0 0  135px; }

#a30:target #origin{ margin: -45px 0 0 -135px; }
#a31:target #origin{ margin: -45px 0 0 -105px; }
#a32:target #origin{ margin: -45px 0 0  -75px; }
#a33:target #origin{ margin: -45px 0 0  -45px; }
#a34:target #origin{ margin: -45px 0 0  -15px; }
#a35:target #origin{ margin: -45px 0 0   15px; }
#a36:target #origin{ margin: -45px 0 0   45px; }
#a37:target #origin{ margin: -45px 0 0   75px; }
#a38:target #origin{ margin: -45px 0 0  105px; }
#a39:target #origin{ margin: -45px 0 0  135px; }

#a40:target #origin{ margin: -15px 0 0 -135px; }
#a41:target #origin{ margin: -15px 0 0 -105px; }
#a42:target #origin{ margin: -15px 0 0  -75px; }
#a43:target #origin{ margin: -15px 0 0  -45px; }
#a44:target #origin{ margin: -15px 0 0  -15px; }
#a45:target #origin{ margin: -15px 0 0   15px; }
#a46:target #origin{ margin: -15px 0 0   45px; }
#a47:target #origin{ margin: -15px 0 0   75px; }
#a48:target #origin{ margin: -15px 0 0  105px; }
#a49:target #origin{ margin: -15px 0 0  135px; }

#a50:target #origin{ margin:  15px 0 0 -135px; }
#a51:target #origin{ margin:  15px 0 0 -105px; }
#a52:target #origin{ margin:  15px 0 0  -75px; }
#a53:target #origin{ margin:  15px 0 0  -45px; }
#a54:target #origin{ margin:  15px 0 0  -15px; }
#a55:target #origin{ margin:  15px 0 0   15px; }
#a56:target #origin{ margin:  15px 0 0   45px; }
#a57:target #origin{ margin:  15px 0 0   75px; }
#a58:target #origin{ margin:  15px 0 0  105px; }
#a59:target #origin{ margin:  15px 0 0  135px; }

#a60:target #origin{ margin:  45px 0 0 -135px; }
#a61:target #origin{ margin:  45px 0 0 -105px; }
#a62:target #origin{ margin:  45px 0 0  -75px; }
#a63:target #origin{ margin:  45px 0 0  -45px; }
#a64:target #origin{ margin:  45px 0 0  -15px; }
#a65:target #origin{ margin:  45px 0 0   15px; }
#a66:target #origin{ margin:  45px 0 0   45px; }
#a67:target #origin{ margin:  45px 0 0   75px; }
#a68:target #origin{ margin:  45px 0 0  105px; }
#a69:target #origin{ margin:  45px 0 0  135px; }

#a70:target #origin{ margin:  75px 0 0 -135px; }
#a71:target #origin{ margin:  75px 0 0 -105px; }
#a72:target #origin{ margin:  75px 0 0  -75px; }
#a73:target #origin{ margin:  75px 0 0  -45px; }
#a74:target #origin{ margin:  75px 0 0  -15px; }
#a75:target #origin{ margin:  75px 0 0   15px; }
#a76:target #origin{ margin:  75px 0 0   45px; }
#a77:target #origin{ margin:  75px 0 0   75px; }
#a78:target #origin{ margin:  75px 0 0  105px; }
#a79:target #origin{ margin:  75px 0 0  135px; }

#a80:target #origin{ margin: 105px 0 0 -135px; }
#a81:target #origin{ margin: 105px 0 0 -105px; }
#a82:target #origin{ margin: 105px 0 0  -75px; }
#a83:target #origin{ margin: 105px 0 0  -45px; }
#a84:target #origin{ margin: 105px 0 0  -15px; }
#a85:target #origin{ margin: 105px 0 0   15px; }
#a86:target #origin{ margin: 105px 0 0   45px; }
#a87:target #origin{ margin: 105px 0 0   75px; }
#a88:target #origin{ margin: 105px 0 0  105px; }
#a89:target #origin{ margin: 105px 0 0  135px; }

#a90:target #origin{ margin: 135px 0 0 -135px; }
#a91:target #origin{ margin: 135px 0 0 -105px; }
#a92:target #origin{ margin: 135px 0 0  -75px; }
#a93:target #origin{ margin: 135px 0 0  -45px; }
#a94:target #origin{ margin: 135px 0 0  -15px; }
#a95:target #origin{ margin: 135px 0 0   15px; }
#a96:target #origin{ margin: 135px 0 0   45px; }
#a97:target #origin{ margin: 135px 0 0   75px; }
#a98:target #origin{ margin: 135px 0 0  105px; }
#a99:target #origin{ margin: 135px 0 0  135px; }

/*------------------------------------------------
    ぐるぐる回るアニメーション
------------------------------------------------*/
@-webkit-keyframes orbit{
    0% {
        -webkit-transform:rotate(0deg);
    } 100% {
        -webkit-transform:rotate(360deg);
    }
}
#orbit{
    width: 250px; height: 1px;
    margin-left: -125px;
    
    -webkit-transition: all 1s ease-in-out;
    
    -webkit-animation-name: orbit;
    -webkit-animation-property: all;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
/*----- 餌に近づく -----*/
.a:target #orbit{
    width: 36px;
    margin-left: -18px;
}

/*------------------------------------------------
    方向
-------------------------------------------------*/
#yaw{
    -webkit-transform-origin: left top;
}
/*----- 餌の方を向く -----*/
.a:target #yaw{
    -webkit-transform: rotate(90deg);
    -webkit-transition: all 1s ease-out;
}
/*----- リセット時に外側を向く -----*/
@-webkit-keyframes back2orbit{
    0% {
        -webkit-transform: rotate(90deg);
    } 25% {
        -webkit-transform: rotate(-90deg);
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
#aReset:target #yaw{
    -webkit-transform: rotate(0deg);
    -webkit-animation-name: back2orbit;
    -webkit-animation-property: all;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

/*------------------------------------------------
    金魚
------------------------------------------------*/
@-webkit-keyframes yurayura{
    0% {
        -webkit-transform: rotate(0deg);
    } 25% {
        -webkit-transform: rotate(-10deg);
    } 50% {
        -webkit-transform: rotate(-5deg);
    } 75% {
        -webkit-transform: rotate(5deg);
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
.goldfish {
    top: -14px; left: -15px;
    -webkit-transform-origin: 15px 14px;
    
    -webkit-animation-name: yurayura;
    -webkit-animation-property: all;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
/*----- 尾ひれバタバタ -----*/
.a:target .goldfish .fin,
.a:target .goldfish .tail{
    -webkit-animation-duration:.3s;
    -webkit-animation-timing-function:ease-out;
}


/*------------------------------------------------
    餌
------------------------------------------------*/
.f,
.f:after,
.f:before{
    position: absolute;
    width: 6px; height: 6px;
    background-color: #f93;
    -webkit-border-radius: 3px;
    -moz-border-radius:    3px;
    border-radius:         3px;
    opacity: 0;
}
.f{
    left: 12px; top: 12px;
}
.f:after,
.f:before{
    display: block;
    content: "";
}
.f:after{
    top: 2px; left: 4px;
    opacity: .75;
}
.f:before{
    top: 1px; left: -4px;
    opacity: .5;
}
/*----- 餌だんだん減ってく -----*/
@-webkit-keyframes food{
    0% {
        -webkit-transform: rotate(0deg) scale(1, 1);
        opacity: 1;
    } 100% {
        -webkit-transform: rotate(360deg) scale(0, 0);
        opacity: 0;
    }
}
#a0:target  #f0,
#a1:target  #f1,
#a2:target  #f2,
#a3:target  #f3,
#a4:target  #f4,
#a5:target  #f5,
#a6:target  #f6,
#a7:target  #f7,
#a8:target  #f8,
#a9:target  #f9,

#a10:target #f10,
#a11:target #f11,
#a12:target #f12,
#a13:target #f13,
#a14:target #f14,
#a15:target #f15,
#a16:target #f16,
#a17:target #f17,
#a18:target #f18,
#a19:target #f19,

#a20:target #f20,
#a21:target #f21,
#a22:target #f22,
#a23:target #f23,
#a24:target #f24,
#a25:target #f25,
#a26:target #f26,
#a27:target #f27,
#a28:target #f28,
#a29:target #f29,

#a30:target #f30,
#a31:target #f31,
#a32:target #f32,
#a33:target #f33,
#a34:target #f34,
#a35:target #f35,
#a36:target #f36,
#a37:target #f37,
#a38:target #f38,
#a39:target #f39,

#a40:target #f40,
#a41:target #f41,
#a42:target #f42,
#a43:target #f43,
#a44:target #f44,
#a45:target #f45,
#a46:target #f46,
#a47:target #f47,
#a48:target #f48,
#a49:target #f49,

#a50:target #f50,
#a51:target #f51,
#a52:target #f52,
#a53:target #f53,
#a54:target #f54,
#a55:target #f55,
#a56:target #f56,
#a57:target #f57,
#a58:target #f58,
#a59:target #f59,

#a60:target #f60,
#a61:target #f61,
#a62:target #f62,
#a63:target #f63,
#a64:target #f64,
#a65:target #f65,
#a66:target #f66,
#a67:target #f67,
#a68:target #f68,
#a69:target #f69,

#a70:target #f70,
#a71:target #f71,
#a72:target #f72,
#a73:target #f73,
#a74:target #f74,
#a75:target #f75,
#a76:target #f76,
#a77:target #f77,
#a78:target #f78,
#a79:target #f79,

#a80:target #f80,
#a81:target #f81,
#a82:target #f82,
#a83:target #f83,
#a84:target #f84,
#a85:target #f85,
#a86:target #f86,
#a87:target #f87,
#a88:target #f88,
#a89:target #f89,

#a90:target #f90,
#a91:target #f91,
#a92:target #f92,
#a93:target #f93,
#a94:target #f94,
#a95:target #f95,
#a96:target #f96,
#a97:target #f97,
#a98:target #f98,
#a99:target #f99{
    -webkit-animation-name: food;
    -webkit-animation-property: all;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

/*------------------------------------------------
    波
------------------------------------------------*/
.w,
.w:before,
.w:after{
    position: absolute;
    top: -11px; left: -11px;
    border:solid 2px #95CFEF;
    -webkit-border-radius: 99px;
    -moz-border-radius:    99px;
    border-radius:         99px;
}
.w:before,
.w:after{
    display: block;
    content: "";
}
.w{
    width: 50px; height: 50px;
    opacity: 0;
    display: none;
}
.w:before{
    top: 6px; left: 6px;
    width: 34px; height: 34px;
}
.w:after{
    top: 13px; left: 13px;
    width: 20px; height: 20px;
}
@-webkit-keyframes wave{
    0% {
        -webkit-transform: scale(0, 0);
        opacity: .5;
    } 100% {
        -webkit-transform: scale(1.5, 1.5);
        opacity: 0;
    }
}

#a0:target  #w0,
#a1:target  #w1,
#a2:target  #w2,
#a3:target  #w3,
#a4:target  #w4,
#a5:target  #w5,
#a6:target  #w6,
#a7:target  #w7,
#a8:target  #w8,
#a9:target  #w9,

#a10:target #w10,
#a11:target #w11,
#a12:target #w12,
#a13:target #w13,
#a14:target #w14,
#a15:target #w15,
#a16:target #w16,
#a17:target #w17,
#a18:target #w18,
#a19:target #w19,

#a20:target #w20,
#a21:target #w21,
#a22:target #w22,
#a23:target #w23,
#a24:target #w24,
#a25:target #w25,
#a26:target #w26,
#a27:target #w27,
#a28:target #w28,
#a29:target #w29,

#a30:target #w30,
#a31:target #w31,
#a32:target #w32,
#a33:target #w33,
#a34:target #w34,
#a35:target #w35,
#a36:target #w36,
#a37:target #w37,
#a38:target #w38,
#a39:target #w39,

#a40:target #w40,
#a41:target #w41,
#a42:target #w42,
#a43:target #w43,
#a44:target #w44,
#a45:target #w45,
#a46:target #w46,
#a47:target #w47,
#a48:target #w48,
#a49:target #w49,

#a50:target #w50,
#a51:target #w51,
#a52:target #w52,
#a53:target #w53,
#a54:target #w54,
#a55:target #w55,
#a56:target #w56,
#a57:target #w57,
#a58:target #w58,
#a59:target #w59,

#a60:target #w60,
#a61:target #w61,
#a62:target #w62,
#a63:target #w63,
#a64:target #w64,
#a65:target #w65,
#a66:target #w66,
#a67:target #w67,
#a68:target #w68,
#a69:target #w69,

#a70:target #w70,
#a71:target #w71,
#a72:target #w72,
#a73:target #w73,
#a74:target #w74,
#a75:target #w75,
#a76:target #w76,
#a77:target #w77,
#a78:target #w78,
#a79:target #w79,

#a80:target #w80,
#a81:target #w81,
#a82:target #w82,
#a83:target #w83,
#a84:target #w84,
#a85:target #w85,
#a86:target #w86,
#a87:target #w87,
#a88:target #w88,
#a89:target #w89,

#a90:target #w90,
#a91:target #w91,
#a92:target #w92,
#a93:target #w93,
#a94:target #w94,
#a95:target #w95,
#a96:target #w96,
#a97:target #w97,
#a98:target #w98,
#a99:target #w99{
    display: block;
    -webkit-animation-name: wave;
    -webkit-animation-property: all;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
}

/*------------------------------------------------
    デバッグ用
------------------------------------------------*/
.debug #bowl{
    overflow: visible;
}
.debug #bowl:before{
    position: absolute;
    left: 149px; top: 0;
    display: block;
    width: 2px; height: 300px;
    background-color: rgba(0, 0, 0, .1);
    content: "";
    z-index: 2;
}
.debug #bowl:after{
    position: absolute;
    left: 0; top: 149px;
    display: block;
    width: 300px; height: 2px;
    background-color: rgba(0, 0, 0, .1);
    content: "";
}
.debug #reset{
    background-color: rgba(0, 255, 0, .25);
    text-decoration: none;
}
.debug #reset:before{
    position: absolute;
    display: block;
    top: 0; left: 0;
    content: "a#reset";
    padding: 3px 6px;
    background-color: #090;
    color: #fff;
}
.debug .s{
    -webkit-box-shadow: 0 0 1px #aaa inset;
    -moz-box-shadow:    0 0 1px #aaa inset;
    box-shadow:         0 0 1px #aaa inset;
}
.debug .s:hover{
    background-color: rgba(0, 0, 255, .1);
}
.debug #orbit{
    background-color: #f00;
}
.debug #orbit:before{
    position: absolute;
    left: 50%; top: -20px;
    display: block;
    width: 1px; height: 40px;
    background-color: #f00;
    content: "";
}
.debug #yaw:before{
    display: block;
    position: absolute;
    top: 0; left: -15px;
    width: 30px; height: 1px;
    background-color: #00f;
    content: "";
    z-index: 2;
}
.debug #yaw:after{
    display: block;
    position: absolute;
    top: -40px; left: 0;
    width: 1px; height: 80px;
    background-color: #00f;
    content: "";
}
.debug .goldfish:before{
    display: block;
    position: absolute;
    top: 14px; left: -10px;
    width: 50px; height: 1px;
    background-color: #0c0;
    content: "";
    z-index: 2;
}
.debug .goldfish:after{
    display: block;
    position: absolute;
    top: -46px; left: 15px;
    width: 1px; height: 120px;
    background-color: #0c0;
    content: "";
}