@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);.preserve-3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d}body{padding:0;margin:0;border:0;overflow-x:none;background-color:#fff;font-family:Roboto Condensed,sans-serif;font-size:12px;font-smooth:always;-webkit-font-smoothing:antialiased}.back{width:20%;height:150px;float:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;counter-increment:bc}@media screen and (max-width:1260px){.back{width:33%}}@media screen and (max-width:840px){.back{width:100%;height:100px}}.button_base{margin:0;border:0;font-size:18px;position:relative;top:50%;left:50%;margin-top:-25px;margin-left:-100px;width:200px;height:50px;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-user-select:none;cursor:default}.button_base:hover{cursor:pointer}.b01_simple_rollover{color:#000;border:#000 solid 1px;padding:10px;background-color:#fff}.b01_simple_rollover:hover{color:#fff;background-color:#000}.b02_slide_in{overflow:hidden;border:#000 solid 1px}.b02_slide_in div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px}.b02_slide_in div:nth-child(1){color:#000;background-color:#fff}.b02_slide_in div:nth-child(2){background-color:#000;transition:top .1s ease;-webkit-transition:top .1s ease;-moz-transition:top .1s ease;top:-50px}.b02_slide_in div:nth-child(3){color:#fff;transition:opacity .1s ease;-webkit-transition:opacity .1s ease;-moz-transition:opacity .1s ease;opacity:0}.b02_slide_in:hover div:nth-child(2){top:0;transition:top .1s ease;-webkit-transition:top .1s ease;-moz-transition:top .1s ease}.b02_slide_in:hover div:nth-child(3){opacity:1;transition:opacity .1s ease;-webkit-transition:opacity .1s ease;-moz-transition:opacity .1s ease}.b03_skewed_slide_in{overflow:hidden;border:#000 solid 1px}.b03_skewed_slide_in div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px}.b03_skewed_slide_in div:nth-child(1){color:#000;background-color:#fff}.b03_skewed_slide_in div:nth-child(2){background-color:#000;width:230px;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:translate(-250px,0) skewX(-30deg);-webkit-transform:translate(-250px,0) skewX(-30deg);-moz-transform:translate(-250px,0) skewX(-30deg)}.b03_skewed_slide_in div:nth-child(3){color:#fff;left:-200px;transition:left .2s ease;-webkit-transition:left .2s ease;-moz-transition:left .2s ease}.b03_skewed_slide_in:hover div:nth-child(2){transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transform:translate(-15px,0) skewX(-30deg);-webkit-transform:translate(-15px,0) skewX(-30deg);-moz-transform:translate(-15px,0) skewX(-30deg)}.b03_skewed_slide_in:hover div:nth-child(3){left:0;transition:left .30000000000000004s ease;-webkit-transition:left .30000000000000004s ease;-moz-transition:left .30000000000000004s ease}.b04_3d_tick{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;perspective-origin:center top;-webkit-perspective-origin:center top;-moz-perspective-origin:center top}.b04_3d_tick div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;border:#000 solid 1px}.b04_3d_tick div:nth-child(1){color:#000;background-color:#fff;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease}.b04_3d_tick div:nth-child(2){color:#fff;background-color:#000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top}.b04_3d_tick:hover div:nth-child(1){transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;background-color:rgba(0,0,0,.5)}.b04_3d_tick:hover div:nth-child(2){transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0)}.b05_3d_roll{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px}.b05_3d_roll div{position:absolute;text-align:center;width:100%;height:50px;padding:10px;border:#000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.b05_3d_roll div:nth-child(1){color:#000;background-color:#000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b05_3d_roll div:nth-child(2){color:#000;background-color:#fff;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b05_3d_roll:hover div:nth-child(1){color:#fff;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0)}.b05_3d_roll:hover div:nth-child(2){background-color:#000;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg)}.b06_3d_swap{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.b06_3d_swap div{position:absolute;text-align:center;width:100%;height:50px;padding:10px;border:#000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.b06_3d_swap div:nth-child(1){color:#000;background-color:#fff;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b06_3d_swap div:nth-child(2){color:#fff;background-color:#000;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all .2s ease 50ms;-webkit-transition:all .2s ease 50ms;-moz-transition:all .2s ease 50ms;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b06_3d_swap:hover div:nth-child(1){color:#000;background-color:grey;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:translateZ(-200px);-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px)}.b06_3d_swap:hover div:nth-child(2){color:#fff;transition:all .2s ease 50ms;-webkit-transition:all .2s ease 50ms;-moz-transition:all .2s ease 50ms;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0)}.b07_3d_double_roll{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.b07_3d_double_roll div{position:absolute;text-align:center;padding:10px;border:#000 solid 1px;pointer-events:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.b07_3d_double_roll div:nth-child(1){color:#000;background-color:#fff;z-index:0;width:100%;height:50px;clip:rect(0,100px,50px,0);position:absolute;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b07_3d_double_roll div:nth-child(2){color:#000;background-color:#000;z-index:-1;width:100%;height:50px;clip:rect(0,100px,50px,0);position:absolute;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b07_3d_double_roll div:nth-child(3){color:#000;background-color:#fff;z-index:0;width:100%;height:50px;clip:rect(0,200px,50px,100px);position:absolute;transition:all .2s ease .1s;-webkit-transition:all .2s ease .1s;-moz-transition:all .2s ease .1s;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b07_3d_double_roll div:nth-child(4){color:#000;background-color:#000;z-index:-1;width:100%;height:50px;clip:rect(0,200px,50px,100px);position:absolute;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transition:all .2s ease .1s;-webkit-transition:all .2s ease .1s;-moz-transition:all .2s ease .1s;transform-origin:50% 50% -25px;-webkit-transform-origin:50% 50% -25px;-moz-transform-origin:50% 50% -25px}.b07_3d_double_roll:hover div:nth-child(1){background-color:#000;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg)}.b07_3d_double_roll:hover div:nth-child(2){color:#fff;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0)}.b07_3d_double_roll:hover div:nth-child(3){background-color:#000;transition:all .2s ease .1s;-webkit-transition:all .2s ease .1s;-moz-transition:all .2s ease .1s;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg)}.b07_3d_double_roll:hover div:nth-child(4){color:#fff;transition:all .2s ease .1s;-webkit-transition:all .2s ease .1s;-moz-transition:all .2s ease .1s;transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0)}.b08_3d_pushback{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}.b08_3d_pushback div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;pointer-events:none;padding:10px;border:#000 solid 1px}.b08_3d_pushback div:nth-child(1){color:#000;background-color:#fff;transform:rotateX(0) translateZ(0);-webkit-transform:rotateX(0) translateZ(0);-moz-transform:rotateX(0) translateZ(0);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease}.b08_3d_pushback div:nth-child(2){color:#fff;background-color:#000;transform:rotateX(-179.5deg) translateZ(1px);-webkit-transform:rotateX(-179.5deg) translateZ(1px);-moz-transform:rotateX(-179.5deg) translateZ(1px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease}.b08_3d_pushback:hover div:nth-child(1){transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(179.5deg);-webkit-transform:rotateX(179.5deg);-moz-transform:rotateX(179.5deg)}.b08_3d_pushback:hover div:nth-child(2){transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transform:rotateX(0) rotateY(0) translateZ(1px);-webkit-transform:rotateX(0) rotateY(0) translateZ(1px);-moz-transform:rotateX(0) rotateY(0) translateZ(1px)}.b09_electric{color:#000;background-color:#fff;border:#000 solid 1px;padding:10px;transition:all .1s ease;-webkit-transition:all .1s ease;-moz-transition:all .1s ease}.b09_electric:hover{color:#fff;background-color:#000;animation:b09_electric_blinkIn .1s step-end 0 2;-webkit-animation:b09_electric_blinkIn .1s step-end 0 2;-moz-animation:b09_electric_blinkIn .1s step-end 0 2;transition:all .2s ease .2s;-webkit-transition:all .2s ease .2s;-moz-transition:all .2s ease .2s}@-webkit-keyframes b09_electric_blinkIn{from,to{background-color:#f8f8f8;color:#080808}50%{background-color:#fff;color:#000}}.b10_tveffect div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.b10_tveffect div:nth-child(1){color:#000;background-color:#fff;-webkit-transition:all .1s ease;padding:10px;border:#000 solid 1px}.b10_tveffect div:nth-child(2){overflow:hidden}.b10_tveffect div:nth-child(2) div{position:absolute;text-align:center;width:100%;height:50px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;border:#000 hidden 1px}.b10_tveffect div:nth-child(2) div:nth-child(1){color:rgba(200,120,120,.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}.b10_tveffect div:nth-child(2) div:nth-child(2){color:rgba(120,200,120,.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}.b10_tveffect div:nth-child(2) div:nth-child(3){color:rgba(120,120,200,.8);opacity:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}.b10_tveffect:hover div:nth-child(1){color:#fff;background-color:#000;transition:color 0s ease;-webkit-transition:color 0s ease;transition:background-color .3s ease .2s;-webkit-transition:background-color .3s ease .2s;-moz-transition:background-color .3s ease .2s}.b10_tveffect:hover div:nth-child(2) div:nth-child(1){animation:b10_tveffect_red .25s linear;-webkit-animation:b10_tveffect_red .25s linear;-moz-animation:b10_tveffect_red .25s linear}.b10_tveffect:hover div:nth-child(2) div:nth-child(2){animation:b10_tveffect_green .25s linear;-webkit-animation:b10_tveffect_green .25s linear;-moz-animation:b10_tveffect_green .25s linear}.b10_tveffect:hover div:nth-child(2) div:nth-child(3){animation:b10_tveffect_blue .25s linear;-webkit-animation:b10_tveffect_blue .25s linear;-moz-animation:b10_tveffect_blue .25s linear}@-webkit-keyframes b10_tveffect_red{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.8,1.6) translate(-10px,3px) skewX(30deg)}50%{opacity:1;-webkit-transform:scale(1.5,1.2) translate(20px,6px) skewX(5deg)}75%{opacity:1;-webkit-transform:scale(.9,1.8) translate(-16px,-1px) skewX(-20deg)}}@-webkit-keyframes b10_tveffect_green{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.3,1.5) translate(3px,6px) skewX(25deg)}50%{opacity:1;-webkit-transform:scale(1.6,1.1) translate(-16px,-5px) skewX(-15deg)}75%{opacity:1;-webkit-transform:scale(1,1.8) translate(18px,4px) skewX(15deg)}}@-webkit-keyframes b10_tveffect_blue{from,to{opacity:0}25%{opacity:1;-webkit-transform:scale(1.2,1.4) translate(-10px,-3px) skewX(-25deg)}50%{opacity:1;-webkit-transform:scale(1.9,1.1) translate(16px,3px) skewX(5deg)}75%{opacity:1;-webkit-transform:scale(1.3,2) translate(-30px,-3px) skewX(20deg)}}.b11_3d_jumpback{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px}.b11_3d_jumpback div{color:#000;background-color:#fff;border:#000 solid 1px;padding:10px;position:absolute;width:100%;height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.b11_3d_jumpback:hover div{color:#fff;background-color:#000;animation:b11_3d_jump .3s ease-out;-webkit-animation:b11_3d_jump .3s ease-out;-moz-animation:b11_3d_jump .3s ease-out;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}@-webkit-keyframes b11_3d_jump{from{transform:translateZ(0) rotateX(0);-webkit-transform:translateZ(0) rotateX(0);-moz-transform:translateZ(0) rotateX(0);background-color:#fff;color:#000}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:grey;color:#000}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#000;color:grey}to{transform:translateZ(0) rotateX(0);-webkit-transform:translateZ(0) rotateX(0);-moz-transform:translateZ(0) rotateX(0);background-color:#000;color:#fff}}.b12_3d_glitch{overflow:hidden;width:200px;height:51px}.b12_3d_glitch div{padding:10px;position:absolute;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:200px;height:50px}.b12_3d_glitch div:nth-child(1){background-color:#fff;top:1px;left:0;border:#000 solid 1px}.b12_3d_glitch div:nth-child(2){color:#000;left:-100px;top:2px;width:400px;height:50px}.b12_3d_glitch:hover div:nth-child(1){animation:b12_3d_glitch_bg .3s linear;-webkit-animation:b12_3d_glitch_bg .3s linear;-moz-animation:b12_3d_glitch_bg .3s linear;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}.b12_3d_glitch:hover div:nth-child(2){color:#000;animation:b12_3d_glitch .3s linear;-webkit-animation:b12_3d_glitch .3s linear;-moz-animation:b12_3d_glitch .3s linear;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat}@-webkit-keyframes b12_3d_glitch_bg{49.00%{background-color:#fff}50.00%{background-color:#000}to{background-color:#000}}@-webkit-keyframes b12_3d_glitch{from{transform:skewX(0);-webkit-transform:skewX(0);-moz-transform:skewX(0);color:#000}25.00%{transform:skewX(80deg);-webkit-transform:skewX(80deg);-moz-transform:skewX(80deg);color:#000}75.00%{transform:skewX(-20deg);-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);color:#fff}90.00%{transform:skewX(0);-webkit-transform:skewX(0);-moz-transform:skewX(0);color:#fff}to{transform:skewX(0);-webkit-transform:skewX(0);-moz-transform:skewX(0);color:#fff}}.stopcontent :after{display:block;letter-spacing:1px;background:#000;color:#fff;font-size:12px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:1;position:absolute;content:'テスト中';top:0;left:0;padding:3px 10px}#top_text{padding:1em}