/*
 * Avatar
 */
div:hover {
    xoutline:1px solid rgba(255,0,0,0.5);
}

.avatar{
    position:relative;
    width:80px;
    height:120px;
    margin:30px auto 0px;
    -webkit-user-select:none;
}
/*
 * Face
 */
    .avatar .face{
        position:absolute;
        top:0;
        left:0;
        width:80px;
        height:70px;
        z-index:3;
        border-radius:40px 40px 30px 30px / 40px 40px 30px 30px;
        background:#f9e6ad;
    }
    /*
     * Eye
     */
        .avatar .face .eye{
            position:absolute;
            top:38px;
            width:10px;
            height:10px;
            background:#000;
            border-radius:5px;
      
      /* Anim */
      -webkit-animation-name: wink;
      -webkit-animation-property: all;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
        }
        .avatar .face .eye:before{
            content:'';
            display:block;
            position:absolute;
            top:2px;
            left:2px;
            width:2px;
            height:2px;
            border-radius:1px;
            background:#fff;
        }
            .avatar .face .eye.left {left:18px;}
            .avatar .face .eye.right{right:18px;}
                .avatar .face .eye .parts{
                    position:absolute;
                    top:-1px;
                    width:24px;
                    height:10px;
                    border-top:2px solid #000;
                    border-radius:10px 10px 0 0 / 10px 10px 0 0;
                }
                    .avatar .face .eye.left  .parts{left:-8px; -webkit-transform:rotate(-5deg);}
                    .avatar .face .eye.right .parts{right:-8px; -webkit-transform:rotate(5deg);}
    
    
    @-webkit-keyframes "wink" {
      96% {
              top:38px;
               height:10px;
      }
      98% {
              top:47px;
        height:1px;
      }
      100% {
              top:38px;
              height:10px;
      }
    }
    /*
     * Nose
     */
        .avatar .face .nose{
            position:absolute;
            top:48px;
            left:34px;
            width:12px;
            height:10px;
            border-top:2px solid #e69e51;
            border-radius:10px 10px 0 0 / 10px 10px 0 0;
        }
    /*
     * Mouth
     */
       .avatar .face .mouth{
           position:absolute;
           top:52px;
           left:30px;
           width:20px;
           height:6px;
           border-bottom:2px solid #e67151;
           border-radius:0px 0px 10px 10px / 0px 0px 10px 10px;
       }
     
     .avatar .face .mouth.talk {
       display:block;
       content:"";
           position:absolute;
           top:56px;
           left:33px;
           width:14px;
           height:6px;
           background-color:#e67151;
           border-radius:0px 0px 8px 8px;
       
      /* Anim */
      -webkit-animation-name: shabetta;
      -webkit-animation-property: all;
      -webkit-animation-duration: 1.1s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
     }
     
     /**
      * 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ
      * http://jsdo.it/GeckoTang/cL9u
    */
     @-webkit-keyframes "shabetta" {
      0% {
           height:6px;
      }
      25% {
           height:0px;
      }
      45% {
           height:6px;
      }
      50% {
           height:0px;
      }
      75% {
           height:6px;
      }
    }

    /*
     * Cheek
     */
       .avatar .face .cheek{
           position:absolute;
            top:49px;
            width:10px;
            height:10px;
            border-radius:10px;
            background:rgba(255,110,80,0.4);
            -webkit-box-shadow:0 0 5px rgba(255,110,80,0.4);
        }
       .avatar .face .cheek.left{left:10px;}
       .avatar .face .cheek.right{right:10px;}
    /*
     * Ear
     */
       .avatar .face .ear {
            position:absolute;
            top:38px;
            width:10px;
            height:10px;
            background:#f9e6ad;
            z-index:-1;
        }
       .avatar .face .ear:before{
           content:'';
           position: absolute;
           top: 3px;
           left:2px;
           display:block;
           width:6px;
           height:6px;
           border-radius:3px;
           background:#e2b37b;
        }
        .avatar .face .ear.left {
            left:-4px;
            -webkit-transform:rotate(15deg);
            border-radius:5px 0px 0px 5px / 5px 0px 0px 5px;
        }
       .avatar .face .ear.right {
            right:-4px;
            -webkit-transform:rotate(-15deg);
            border-radius:0px 5px 5px 0px / 0px 5px 5px 0px;
        }
    /*
     * Hair
     */
       .avatar .hair {
            position:absolute;
            top:0;
            left:0;
            width:80px;
            height:80px;
        }
       .avatar .hair .parts{
            position:absolute;
            display:block;
            width:50px;
            height:50px;
        }
        /* left - sideburn */
       .avatar .hair .parts:nth-of-type(1){
           top:17px;
           left:0px;
           width:10px;
           height:50px;
           background:#381e00;
           border-radius:10px 0px 0px 10px /  25px 0px 0px 25px;
           -webkit-transform-origin:top left;
           -webkit-transform:scaleX(.6);
           z-index:4;
        }
        /* right - sideburn */
       .avatar .hair .parts:nth-of-type(2){
           top:17px;
           right:0px;
           width:10px;
           height:50px;
           background:#381e00;
           border-radius:0px 10px 10px 0px /  0px 25px 25px 0px;
           -webkit-transform-origin:top right;
           -webkit-transform:scaleX(.6);
           z-index:4;
        }
        /* left - front */
       .avatar .hair .parts:nth-of-type(3){
           top:-12px;
           left:-5px;
           width:45px;
           height:45px;
           background:#381e00;
           border-radius:45px 0px 0px 0px / 45px 0px 0px 0px;
           -webkit-transform:rotate(5deg);
            z-index:5;
        }
        /* right - front side */
       .avatar .hair .parts:nth-of-type(4){
           top:-12px;
           right:-5px;
           width:45px;
           height:45px;
           background:#381e00;
           border-radius:45px 45px 0px 0px / 0px 45px 0px 0px;
           -webkit-transform:rotate(-5deg);
           z-index:5;
        }
       .avatar .hair .parts:nth-of-type(4):before{
            content:'';
            position:absolute;
            top:20px;
            left:25px;
            z-index:5;
            display:block;
            width:10px;
            height:10px;
            border-radius:5px;
            background:rgba(255,255,255,0.5);
        }
        /* back side */
        .avatar .hair .parts:nth-of-type(5){
           top:-5px;
           left:-5px;
           width:90px;
           height:70px;
           background:#381e00;
           border-radius:45px 45px 20px 20px / 45px 45px 20px 20px;
           z-index:-1;
           -webkit-transform:scaleX(1.08) scaleY(1);
        }
        .avatar .hair .parts:nth-of-type(5):before{
            content:'';
            position:absolute;
            top:-15px;
            left:30px;
            display:block;
            width:30px;
            height:30px;
            background:#220a00;
            border-radius:15px;
            z-index:1;
        }
        .avatar .hair .parts:nth-of-type(5):after{
            content:'';
            position:absolute;
            top:-8px;
            left:25px;
            display:block;
            width:40px;
            height:40px;
            background:#72cb4f;
            z-index:2;
            border-radius:20px;
        }
/*
 * Body
 */
.avatar .body {
    position:absolute;
    top:65px;
    left:25px;
    width:30px;
    height:36px;
    border-radius:15px 15px 0px 0px / 18px 18px 0px 0px;
    background:rgba(255,120,120,1);
}
    /*
     * Arm
     */
    .avatar .body .arm{
        position:absolute;
        top:9px;
        width:16px;
        height:25px;
        background:#ccc;
        z-index:-1;
        background:rgba(255,120,120,1);
        -webkit-transform-origin:top center;
    }
    .avatar .body .arm.left{
        left:1px;
        border-radius:10px 0px 6px 10px / 10px 0px 6px 10px;
        -webkit-transform:rotate(45deg);
    }
    .avatar .body .arm.right{
        right:1px;
        border-radius:0px 10px 10px 6px / 0px 10px 10px 6px;
        -webkit-transform:rotate(-45deg);
    }
    .avatar .body .arm .parts{
        position:absolute;
        bottom:-3px;
        background:#f9e6ad;
        width:12px;
        height:12px;
        z-index:3;
        border-radius:6px;
    }
    .avatar .body .arm.left .parts{
        left:2px;
    }
    .avatar .body .arm.right .parts{
        right:2px;
    }
    /*
     * Legs
     */
    .avatar .body .leg{
        position:absolute;
        top:33px;
        width:12px;
        height:10px;
        z-index:-1;
        background:rgba(255,100,120,1);
    }
    .avatar .body .leg.left{
        left:3px;
        border-radius:0 0 0 12px / 0 0 0 10px;
    }
    .avatar .body .leg.right{
        right:3px;
        border-radius:0 0 12px 0 / 0 0 10px 0;
    }
        .avatar .body .leg .parts{
            position:absolute;
            bottom:-3px;
            width:14px;
            height:6px;
            background:#f9e6ad;
            border-radius:5px 5px 0 0 / 5px 5px 0 0;
        }
        .avatar .body .leg.left .parts{
           left:-2px;
        }
        .avatar .body .leg.right .parts{
            right:-2px;
        }



/*
 * Anim
 */
.avatar {
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover {
    -webkit-transform:translateY(-10px);
}


.avatar .face .eye,
.avatar .face .eye .parts{
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover .face .eye.left .parts{
    -webkit-transform:translateY(-2px) rotate(7deg);
}
.avatar:hover .face .eye.right .parts{
    -webkit-transform:translateY(-2px) rotate(-7deg);
}

.avatar .body .arm{
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover .body .arm.left{
    -webkit-transform:translateX(1px) translateY(4px) rotate(70deg);
}
.avatar:hover .body .arm.right{
    -webkit-transform:translateX(-1px) translateY(4px) rotate(-70deg);
}


.avatar .body .leg{
    -webkit-transition:all 0.3s ease-out;
}
    .avatar .body .leg.left{
        -webkit-transform-origin:top right;
    }
    .avatar .body .leg.right{
        -webkit-transform-origin:top left;
    }

    .avatar:hover .body .leg.left{
        -webkit-transform:translateX(-2px) translateY(3px) rotate(35deg);
    }
    .avatar:hover .body .leg.right{
        -webkit-transform:translateX(2px) translateY(3px) rotate(-35deg);
    }












/*
* Avatar #small_50
*/
#small_50.avatar{
    -webkit-transform: scale(.5) translateY(0px) ;
}
#small_50.avatar:hover{
    -webkit-transform: scale(.8) translateY(-10px) ;
}









/**
 *  Background & shadow added by tsmallfield
 *  @see http://jsdo.it/tsmallfield/counting_sheep2
 */
/*------------------------------------------------
        位置指定
------------------------------------------------*/
.avatar{
  position: absolute;
  top: 252px;
  left: 232px;
  margin-left: -40px;
  margin-top: -60px;
  z-index: 100;
}
.avatar .shadow{
  position: absolute;
  top: 107px;
  left: 15px;
  width: 50px;
  height: 10px;
  background-color: #000;
  -webkit-border-radius: 200px / 50px;
  -moz-border-radius:    200px / 50px;
  border-radius:         200px / 50px;
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow:    0 0 5px #000;
  box-shadow:         0 0 5px #000;
  opacity: .15;
  -webkit-transition:all 0.3s ease-out;
  z-index: -2;
}
.avatar:hover .shadow{
  -webkit-transform: scale(.8) translateY(10px);
}
/*------------------------------------------------
        リセット
------------------------------------------------*/
#wrapper *{
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-decoration: none;
}
#wrapper *:before,
#wrapper *:after{
  position: absolute;
  display: block;
  content: "";
}
/*
script,
style{
  display: none;
}*/
/*------------------------------------------------
          body
------------------------------------------------*/
body{
  overflow: hidden;
}
#wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 465px;
  height: 465px;
  background-color: #690;
  overflow: hidden;
}
#wrapper #sky{
  width: 100%;
  height: 70px;
  padding: 30px 0;
  background-color: #6cf;
  background: -moz-linear-gradient(top, #6cf, #fff);
  background: -webkit-gradient(linear, left top, left bottom, from(#6cf), to(#fff));
  border-top: 5px solid #36c;
}
#wrapper #ground{
  top: 135px;
  width: 100%;
  height: 325px;
  background-color: #690;
  background: -moz-linear-gradient(top, #9c3, #690);
  background: -webkit-gradient(linear, left top, left bottom, from(#9c3), to(#690));
  border-bottom: 5px solid #360;
}
#wrapper #zoo{
  top: 135px;
  right: 60px;
  bottom: 20px;
  left: 30px;
}
/*------------------------------------------------
          C.L.O.U.D.S.
------------------------------------------------*/
#wrapper c.clouds l,
#wrapper c.clouds o,
#wrapper c.clouds d,
#wrapper c.clouds s,
#wrapper c.clouds:before,
#wrapper c.clouds:after,
#wrapper c.clouds *:before,
#wrapper c.clouds *:after{
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
}
#wrapper c.clouds,
#wrapper c.clouds u{
  top: 25px;
  width: 120px;
  height: 30px;
  background-color: #fff;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
  z-index: 5;
}
/*----- 中 -----*/
#wrapper c.clouds:nth-of-type(1){
  top: 15px;
  left: -40px;
}
#wrapper c.clouds:nth-of-type(2){
  top: 10px;
  right: 70px;
}
#wrapper c.clouds:nth-of-type(1),
#wrapper c.clouds:nth-of-type(2){
  -webkit-transform: scale(.5, .5);
  -moz-transform:    scale(.5, .5);
  transform:         scale(.5, .5);
}
/*----- 大 -----*/
#wrapper c.clouds:nth-of-type(3){
  top: 65px;
  left: -10px;
}
#wrapper c.clouds:nth-of-type(4){
  top: 55px;
  right: 75px;
}
#wrapper c.clouds:nth-of-type(3),
#wrapper c.clouds:nth-of-type(4){
  -webkit-transform: scale(.25, .25);
  -moz-transform:    scale(.25, .25);
  transform:         scale(.25, .25);
}
/*----- 1個目(上側：時計回り) -----*/
#wrapper c.clouds:before{
  top: -6px;
  left: 13px;
}
#wrapper c.clouds:after{
  top: -10px;
  left: 35px;
}
#wrapper c.clouds l{
  top: -10px;
  left: 57px;
}
#wrapper c.clouds l:before{
  top: 4px;
  left: 21px;
}
/*----- 1個目(下側：時計回り)-----*/
#wrapper c.clouds l:after{
  top: 16px;
  left: 21px;
}
#wrapper c.clouds o{
  top: 10px;
  left: 57px;
}
#wrapper c.clouds o:before{
  left: -22px;
}
#wrapper c.clouds o:after{
  top: -4px;
  left: -44px;
}
/*----- 2個目(本体) -----*/
#wrapper c.clouds u,
#wrapper c.clouds d,
#wrapper c.clouds s{
  margin-top: 0;
  margin-left: 220px;
}
/*----- 2個目(上側：時計回り) -----*/
#wrapper c.clouds u:before{
  top: -6px;
  left: 13px;
}
#wrapper c.clouds u:after{
  top: -10px;
  left: 35px;
}
#wrapper c.clouds d{
  top: 15px;
  left: 59px;
}
#wrapper c.clouds d:before{
  top: 4px;
  left: 22px;
}
/*----- 2個目(下側：時計回り) -----*/
#wrapper c.clouds d:after{
  top: 16px;
  left: 22px;
}
#wrapper c.clouds s{
  top: 36px;
  left: 59px;
}
#wrapper c.clouds s:before{
  left: -22px;
}
#wrapper c.clouds s:after{
  top: -4px;
  left: -42px;
}
/*------------------------------------------------
          T.R.E.E.
------------------------------------------------*/
/*----- trunk -----*/
#wrapper t.tree{
  top: 10px;
  width: 3px;
  height: 20px;
  margin-left: -3px;
  background-color: #c93;
  border-right: 3px solid #960;
  border-left: 1px solid #960;
  -webkit-transform: scale(.5, .5);
  -moz-transform:    scale(.5, .5);
  transform:         scale(.5, .5);
}
/*----- position -----*/
#wrapper t.tree:nth-of-type(1) { top: 10px; left:  1%; }
#wrapper t.tree:nth-of-type(2) { top: 15px; left:  5%; }
#wrapper t.tree:nth-of-type(3) { top: 10px; left:  9%; }
#wrapper t.tree:nth-of-type(4) { top: 15px; left: 13%; }
#wrapper t.tree:nth-of-type(5) { top: 10px; left: 17%; }
#wrapper t.tree:nth-of-type(6) { top: 15px; left: 21%; }
#wrapper t.tree:nth-of-type(7) { top: 10px; left: 25%; }
#wrapper t.tree:nth-of-type(8) { top: 10px; left: 75%; }
#wrapper t.tree:nth-of-type(9) { top: 15px; left: 79%; }
#wrapper t.tree:nth-of-type(10){ top: 10px; left: 83%; }
#wrapper t.tree:nth-of-type(11){ top: 15px; left: 87%; }
#wrapper t.tree:nth-of-type(12){ top: 10px; left: 91%; }
#wrapper t.tree:nth-of-type(13){ top: 15px; left: 95%; }
#wrapper t.tree:nth-of-type(14){ top: 10px; left: 99%; }
/*----- leaves -----*/
#wrapper t.tree:before,
#wrapper t.tree:after,
#wrapper t.tree r,
#wrapper t.tree r:before,
#wrapper t.tree r:after,
#wrapper t.tree e,
#wrapper t.tree e:before,
#wrapper t.tree e:after{
  width: 10px;
  height: 10px;
  background-color: #81b41c;
  border-right:  1px solid #5c8f0f;
  border-bottom: 1px solid #5c8f0f;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
}
#wrapper t.tree:before{
  bottom: 30px;
  left: -3px;
}
#wrapper t.tree:after{
  bottom: 20px;
  left: -13px;
}
#wrapper t.tree r{
  top: -10px;
  left: 8px;
}
#wrapper t.tree r:before{
  top: -7px;
  left: -3px;
}
#wrapper t.tree r:after{
  top: -7px;
  left: -18px;
}
#wrapper t.tree e:nth-of-type(1){
  top: -5px;
  left: -10px;
}
#wrapper t.tree e:nth-of-type(1):before{
  top: -7px;
  left: 13px;
}
#wrapper t.tree e:nth-of-type(1):after{
  left: 15px;
}
#wrapper t.tree e:nth-of-type(2){
  top: -15px;
  left: -5px;
}
#wrapper t.tree e:nth-of-type(2):before{
  top: 12px;
}
#wrapper t.tree e:nth-of-type(2):after{
  top: 7px;
  left: 3px;
}
/*------------------------------------------------
          S.U.N.
------------------------------------------------*/
#wrapper s.sun,
#wrapper s.sun:before,
#wrapper s.sun:after,
#wrapper s.sun u,
#wrapper s.sun u:before,
#wrapper s.sun u:after,
#wrapper s.sun n,
#wrapper s.sun n:before{
  width: 30px;
  height: 30px;
  background-color: #f90;
  z-index: 1;
}
#wrapper s.sun{
  top: 40px;
  left: 85%;
  margin-left: -15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform:    rotate(-90deg);
  transform:         rotate(-90deg);
}
#wrapper s.sun:before{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun:after{
  -webkit-transform: rotate(30deg);
  -moz-transform:    rotate(30deg);
  transform:         rotate(30deg);
}
#wrapper s.sun u{
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  transform:         rotate(45deg);
}
#wrapper s.sun u:before{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun u:after{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun n{
  -webkit-transform: rotate(75deg);
  -moz-transform:    rotate(75deg);
  transform:         rotate(75deg);
  z-index: 2;
}
#wrapper s.sun n:before{
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  background-color: #fc0;
  background: -moz-linear-gradient(top, #ff9, #fc0);
  background: -webkit-gradient(linear, left top, left bottom, from(#ff9), to(#fc0));
  -webkit-border-radius: 16px;
  -moz-border-radius:    16px;
  border-radius:         16px;
  -webkit-box-shadow: 0 0 20px #fff;
  -moz-box-shadow:    0 0 20px #fff;
  box-shadow:         0 0 20px #fff;
  z-index: 2;
}
#wrapper s.sun n:after{
  top: 2px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  opacity: .75;
  z-index: 2;
}
/*------------------------------------------------
        R.A.I.N.B.O.W.
------------------------------------------------*/
#wrapper r.rainbow,
#wrapper r.rainbow a,
#wrapper r.rainbow i,
#wrapper r.rainbow n,
#wrapper r.rainbow b,
#wrapper r.rainbow o,
#wrapper r.rainbow w{
  -webkit-border-radius: 999px 999px 0 0;
  -moz-border-radius:    999px 999px 0 0;
  border-radius:         999px 999px 0 0;
  border-width: 3px;
  border-style: solid;
  border-bottom-style: none;
}
#wrapper r.rainbow{
  top: 40px;
  left: -140px;
  width: 200px;
  height: 100px;
  border-color: #f00;
  opacity: .75;
}
#wrapper r.rainbow a{
  width: 194px;
  height: 94px;
  border-color: #f90;
}
#wrapper r.rainbow i{
  top: 3px;
  left: 3px;
  width: 188px;
  height: 88px;
  border-color: #ff0;
}
#wrapper r.rainbow n{
  top: 6px;
  left: 6px;
  width: 182px;
  height: 82px;
  border-color: #0f0;
}
#wrapper r.rainbow b{
  top: 9px;
  left: 9px;
  width: 176px;
  height: 76px;
  border-color: #0ff;
}
#wrapper r.rainbow o{
  top: 12px;
  left: 12px;
  width: 170px;
  height: 70px;
  border-color: #00f;
}
#wrapper r.rainbow w{
  top: 15px;
  left: 15px;
  width: 164px;
  height: 64px;
  border-color: #f0f;
}
/*------------------------------------------------
          F.E.N.C.E.
------------------------------------------------*/
#wrapper f.fence{
  bottom: 20px;
  width: 145px;
  height: 2px;
  background-color: #c93;
  border-top:    1px solid #fc6;
  border-bottom: 1px solid #960;
}
#wrapper f.fence:after,
#wrapper f.fence:before,
#wrapper f.fence e,
#wrapper f.fence e:before,
#wrapper f.fence e:after,
#wrapper f.fence n,
#wrapper f.fence n:before,
#wrapper f.fence n:after,
#wrapper f.fence c,
#wrapper f.fence c:before,
#wrapper f.fence c:after{
  width: 2px;
  height: 20px;
  background-color: #c93;
  border-right: 1px solid #960;
  border-bottom: 1px solid #690;
  border-left:  1px solid #fc6;
}
#wrapper f.fence:after{
  top: -5px;
  left: 5px;
}
#wrapper f.fence:before{
  top: -5px;
  left: 15px;
}
#wrapper f.fence e{
  top: -5px;
  left: 25px;
}
#wrapper f.fence e:before{
  left: 9px;
}
#wrapper f.fence e:after{
  left: 19px;
}
#wrapper f.fence n{
  top: -5px;
  left: 54px;
}
#wrapper f.fence n:before{
  left: 10px;
}
#wrapper f.fence n:after{
  left: 20px;
}
#wrapper f.fence c{
  top: -5px;
  left: 85px;
}
#wrapper f.fence c:before{
  left: 10px;
}
#wrapper f.fence c:after{
  left: 20px;
}
#wrapper f.fence e:last-child{
  left: 116px;
}
#wrapper f.fence:last-child{
  left: auto;
  right: 0;
}
/*------------------------------------------------
        M.O.U.N.T.A.I.N.
------------------------------------------------*/
#wrapper m.mountain{
  top: -40px;
  width: 465px;
  height: 40px;
  background-color: transparent;
  overflow: hidden;
}
#wrapper m.mountain *,
#wrapper m.mountain *:before,
#wrapper m.mountain *:after{
  width:  100px;
  height: 100px;
  background-color: #693;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
}
#wrapper m.mountain *:before,
#wrapper m.mountain *:after{
  background-color: #9c3;
}
/*----- 中 -----*/
#wrapper m.mountain *{
  margin-top: 20px;
  margin-left: -70px;/* 100 * 1.41 / 2 = 70 */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  transform:         rotate(-45deg);
}
/*----- 左 -----*/
#wrapper m.mountain *:before{
  margin-top: -10px;
  margin-left: -10px;
}
/*----- 右 -----*/
#wrapper m.mountain *:after{
  margin-top: 10px;
  margin-left: 10px;
}
/*----- o -----*/
#wrapper m.mountain o{
  left: 35px;
}
#wrapper m.mountain o:before{
  left: -5px;
}
#wrapper m.mountain o:after{
  top: 10px;
}
/*----- u -----*/
#wrapper m.mountain u{
  top: 15px;
  left: 100px;
}
#wrapper m.mountain u:before{
  left: -5px;
}
#wrapper m.mountain u:after{
  left: 5px;
}
/*----- n -----*/
#wrapper m.mountain n:nth-of-type(1){
  top: 5px;
  left: 170px;
}
#wrapper m.mountain n:nth-of-type(1):before{
  left: -10px;
}
#wrapper m.mountain n:nth-of-type(1):after{
  left: 5px;
}
/*----- t -----*/
#wrapper m.mountain t{
  top: 23px;
  left: 51%;
}
#wrapper m.mountain t:before{
  left: 5px;
}
#wrapper m.mountain t:after{
  left: -5px;
}
/*----- a -----*/
#wrapper m.mountain a{
  top: 5px;
  right: 110px;
}
#wrapper m.mountain a:before{
  top: 5px;
  left: -5px;
}
#wrapper m.mountain a:after{
  top: 10px;
}
/*----- i -----*/
#wrapper m.mountain i{
  top: 10px;
  right: 40px;
}
#wrapper m.mountain i:before{
  top: 5px;
  left: -5px;
}
#wrapper m.mountain i:after{
  left: 10px;
}
/*----- n -----*/
#wrapper m.mountain n:nth-of-type(2){
  right: -30px;
}
#wrapper m.mountain n:nth-of-type(2):before{
  left: -10px;
}

/*----------------------------------------------------
  入力エリア
----------------------------------------------------*/
/* #wrapperリセット回避＆背景との分離 */
#container{
  position: absolute;
  top: 0;
  left: 0;
  width: 465px;
  height: 465px;
  overflow: hidden;
}

#commentbox {
  position:absolute;
  bottom:40px;
  left:0;
  margin:0;
  width:100%;
  height:30px;
}

/* 
 * CSS3でつくるええ感じのテキストボックス
 * http://jsdo.it/calmbooks/niceTextbox
 * #design03
--------------------------------------------------*/
#comment {
  outline:0;
  position:absolute;
  bottom:0;
  left:50px;
  
  height: 2em;
  width: 250px;
  padding: 0 5px;
  font-size: 20px;
  
  border: solid 4px #29ABE2;
  color: #29ABE2;
  font-weight: bold;
  font-size: 12px;
  
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF));
  background: -moz-linear-gradient(#ddd, #fff);
  
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}

#comment:focus {
  border: solid 5px #29ABE2;
  width: 250px;
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0));
  background: -moz-linear-gradient(#FFED85, #FFF6C0);
}

/* ふきだし変更ボタン
--------------------------------------------------*/
#voice-mode {
  position:absolute;
  right:50px;
  top:0;
}

#voice-mode input[type="radio"] {
  -webkit-appearance:none;
  width: 24px;
  height: 26px;
  
  position:static;
  display: inline-block;
  margin: 0px;
  border-radius: 6px;
  
  background-color: #269FCF;
  border: 0;
  
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
    
}
#voice-mode input[type="radio"]:before {
    content:attr(data-mode);
  display:block;
    position:       absolute;
    z-index:        10;
    width:          20px;
    height:         20px;
    margin: 2px;
    border-radius: 4px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#12A7E2));
    border-top: 1px solid rgba(255,255,255,0.15);

  font:14px/16px Tahoma, Geneva, sans-serif;
  font-weight:bold;
    text-shadow:    rgba(0,0,0,0.3) 0 -1px 0;
    text-align:     center;
  color:#fff;
    
}
#voice-mode input[type="radio"]:focus,
#voice-mode input[type="radio"]:hover {
  background-color:#4AD3EF
}

#voice-mode input[type="radio"]:active,
#voice-mode input[type="radio"]:checked {
  background-color:#FFED85;
}
#voice-mode input[type="radio"]:active:before,
#voice-mode input[type="radio"]:checked:before{
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFC6), color-stop(100%,#ffff88));
  color:#FFB900;
    text-shadow:    rgba(255,185,0,0.3) 0 -1px 0;
}


/*----------------------------------------------------
 かわいいふきだし
 http://jsdo.it/GeckoTang/fOSh
 
 1,2,5だけ使ってます
----------------------------------------------------*/
/*
 * SpeechBalloon
 */
.SpeechBalloon{
    position:absolute;
  left:50%;
    margin:0 auto 0;
  margin-left:-120px;
  top:60px;
  z-index:20;
  white-space:normal;
}
.SpeechBalloon p{
  font-size:12px;
}

/*
 * SpeechBalloon Type1
 */
.SpeechBalloon.talk {
    width:100px;
    height:100px;
    background:#FF54AC;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.talk:before {
    position:absolute;
    content:'';
    display:block;
    width:0;
    height:0;
    top:92px;
    left:116px;
    border-top:18px solid #FF54AC;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
}

.SpeechBalloon.talk p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type2
 */
.SpeechBalloon.mind {
    width:100px;
    height:100px;
    border-radius:50px;
    -moz-border-radius:50px;
    background:#FF54AC;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.mind:before {
    position:absolute;
    content:'';
    display:block;
    width:20px;
    height:20px;
    border-radius:10px;
    -moz-border-radius:10px;
    top:85px;
    left:30px;
    background:#FF54AC;
}
.SpeechBalloon.mind:after {
    position:absolute;
    content:'';
    display:block;
    width:10px;
    height:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    top:105px;
    left:40px;
    background:#FF54AC;
}

.SpeechBalloon.mind p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type3
 */
.SpeechBalloon.type3 {
    top:25px;
    shout
    width:50px;
    height:50px;
    border-radius:25px;
    -moz-border-radius:25px;
    background:#FFF;
    -webkit-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
    -moz-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
}
.SpeechBalloon.type3:before {
    position:relative;
    content:'';
    display:block;
    top:-5px;
    left:-5px;
    width:60px;
    height:60px;
    border-radius:30px;
    -moz-border-radius:30px;
    background:#FF54AC;
    z-index:-1;
    -webkit-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
    -moz-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
}
.SpeechBalloon.type3:after {
    position:absolute;
    top:80px;
    left:97px;
    content:'';
    display:block;
    width:8px;
    height:8px;
    position:absolute;
    background:#fff;
    z-index:2;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:4px 4px 0 #FF54AC;
    -moz-transform:rotate(45deg);
    -moz-box-shadow:4px 4px 0 #FF54AC;
}
.SpeechBalloon.type3 p{
    position:absolute;
    top:20px;
    left:20px;
    width:175px;
    color:#FF54AC;
    font-size:14px;
    text-align:center;
}

/*
 * SpeechBalloon Type4
 */
.SpeechBalloon.type4 {
  width:170px;
  height:120px;
  margin:0 auto 20px;
}
.SpeechBalloon.type4:before {
  position:absolute;
  top:60px;
  left:-15px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:200px;
  color:#FFF;
}
.SpeechBalloon.type4:after {
  position:absolute;
  top:60px;
  left:-25px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:220px;
  color:#FF54AC;
  z-index:-1;
}


.SpeechBalloon.type4 p {
  position:relative;
  z-index:2;
  width:170px;
  height:120px;
  color:#FF54AC;
  line-height:120px;
  text-align:center;
}

/*
 * SpeechBalloon Type5
 */
.SpeechBalloon.shout {
  top:0;
    width:150px;
    height:100px;
    margin:60px auto 100px;
    background:#FFF;
  margin-left:-75px;
}
.SpeechBalloon.shout:before {
    position:absolute;
    top:-25px;
    left:-25px;
  z-index:20;
    content:'';
    display:block;
    width:50px;
    height:50px;
    background:#FFF;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FFF,
        170px -30px 0 #FFF,
        140px 0px 0 #FFF,
        100px 40px 0 #FFF,
        100px -100px 0 #FFF,
        70px -70px 0 #FFF,
        30px -30px 0 #FFF,
        36px 36px 0 #FFF,
        71px 71px 0 #FFF
    ;
}
.SpeechBalloon.shout:after {
    position:absolute;
    top:-30px;
    left:-30px;
    content:'';
    display:block;
    width:60px;
    height:60px;
    background:#FF54AC;
    z-index:19;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FF54AC,
        170px -30px 0 #FF54AC,
        140px 0px 0 #FF54AC,
        100px 40px 0 #FF54AC,
        100px -100px 0 #FF54AC,
        70px -70px 0 #FF54AC,
        30px -30px 0 #FF54AC,
        36px 36px 0 #FF54AC,
        71px 71px 0 #FF54AC
    ;
}
.SpeechBalloon.shout p {
    position:relative;
    z-index:22;
    height:100px;
    font-size:14px;
    line-height:100px;
    color:#FF54AC;
    text-align:center;
  background:#fff;
}