@charset "UTF-8";

.clear {clear: both;}
.tarea, #init input {display: none;}
#init fieldset {float: left;margin: 20px 10px 0 0;padding: 0 10px 10px 10px;border: 4px solid #000;border-radius: 4px;}

/* 2601 */
.noneToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;}

#init ul {padding: 5px 0 0 0;}
#init li {padding: 3px 0;}
label {cursor: pointer;}
legend {font-size: 14px;font-weight: bold;}
legend label {font-size: 14px;}

label, legend {border-left: 5px solid #FFF;border-right: 5px solid #FFF;}
legend label {border: none;}

label.unchecked:before,
label.checked:before {content: '';display: inline-block;width: 18px;height: 14px;vertical-align: middle;}
label.unchecked:before {background: url(./img/cross.png) no-repeat;background-size: 16px 14px;}
label.checked:before {background: url(./img/tick.png) no-repeat;background-size: 16px 14px;}



#start {clear: both;padding-top: 15px;}

.other {padding-top: 5px;}

#ui{clear: both;}

#result h2,
p.count {clear: both;margin-top: 10px;padding: 10px 0 30px 0;background: url(./img/ribbons.png) no-repeat 50% 50%;background-size: contain;text-align: center;}

.zitem {width: 49.8%;margin: 10px 0 0 0;padding: 10px 0 20px 0;cursor: pointer;
background: url(./img/bg.png) no-repeat 50% 50%;background-size: contain;}

.zitem .img {height: 110px;line-height: 110px;text-align: center;}
.zitem .img img {vertical-align: bottom;}

.zitem#left {float: left;}
.zitem#right {float: right;}

#result ul li img,
.zitem img {
-ms-interpolation-mode: nearest-neighbor;	/* IE8+ */
image-rendering: -webkit-optimize-contrast;	/* Safari (WebKit) */
image-rendering: -moz-crisp-edges;			/* Firefox (Gecko) */
image-rendering: -o-crisp-edges;			/* Opera 12.x */
image-rendering: pixelated;					/* Chrome 41+, Opera 29+ (CSS4) */
}
.zitem img {transform-origin: center bottom;
transform: scale(2, 2);}
.zitem .name,
.zitem .nick {padding-top: 5px;text-align: center;font-size: 12px;font-weight: bold;}
#ui .clear {padding: 20px 0 0 0;text-align: center;}

#result ul.clear,
#result ul.pose {clear: both;}

#result ul.clear,
#result ul.pose {border-top: 1px dotted #999;}

#result ul li {position: relative;float: left;padding: 5px 0 0 0;text-align: center;}

#result ul li h3, #result ul li p {text-align: center;}

#result ul li h3 {position: absolute;top: 0;left: 0;text-align: center;}
#result ul li p {padding: 0;}
#result ul li p.img {position: relative;}
#result ul li p.img img {position: absolute;bottom: 0;}
#result ul li p.txt {padding: 0 0 5px 0;}

#result ul li p.pt {display: inline-block;margin-bottom: 10px;padding: 0 5px 2px 5px;border-radius: 10px;background: #000;color: #FFF;text-align: center;font-size: 11px;}

#result .rs_1st  li p {font-size: 16px;font-weight: bold;}
#result .rs_2nd  li p {font-weight: bold;}
#result .rs_3rd  li p,
#result .rs_4th  li p {font-size: 12px;font-weight: bold;}

#result .rs_1st  li h3 {left: 10%;width: 69px;height: 96px;background: url(./img/no1.png) no-repeat;background-size: 69px 96px;line-height: 68px;font-size: 16px;}
#result .rs_2nd  li h3 {width: 46px;height: 64px;background: url(./img/no2.png) no-repeat;background-size: 46px 64px;line-height: 48px;}
#result .rs_3rd  li h3 {width: 31px;height: 43px;background: url(./img/no3.png) no-repeat;background-size: 31px 43px;line-height: 32px;font-size: 10px;}
#result .rs_4th  li h3 {width: 25px;height: 35px;background: url(./img/no4.png) no-repeat;background-size: 25px 35px;line-height: 27px;font-size: 10px;}

.rs_1st li {width: 100%;}
.rs_2nd li {width: 33.3%;}
.rs_3rd li {width: 33.3%;}
.rs_4th li {width: 20%;}

#result ul.rs_1st li h3 {top: 20px;}
#result ul.rs_2nd li h3 {top: 10px;}
#result ul.rs_3rd li h3,
#result ul.rs_4th li h3 {top: 10px;}

.rs_1st li p.img {height: 187px;} .rs_1st li img {transform-origin: center bottom;transform: scale(3, 3);}
.rs_2nd li p.img {height: 118px;l} .rs_2nd li img {transform-origin: center bottom;transform: scale(2, 2);}
.rs_3rd li p.img {height: 60px;} .rs_3rd li img {transform-origin: center bottom;transform: scale(1, 1);}
.rs_4th li p.img {height: 60px;} .rs_4th li img {transform-origin: center bottom;transform: scale(1, 1);}

#times{padding: 20px 0 10px 10px;}
.box  a.tweet-btn:link {color: #FFF;text-decoration: none;}
.box .tweet-btn {padding: 12px 25px;border: none;border-radius: 50px;background: #000;}
.box .tweet-btn:hover {background-color: #F60;}

#reset {padding: 20px 0 10px 0;}

#list {clear: both;}
#list ul {padding-top: 20px;}
#list li {float: left;position: relative;width: 47%;height: 85px;border: 5px solid #FFF;border-left: none;border-top: none;}
#list li p {padding: 0;}
#list p.no {padding: 2px 0;background: #000;color: #FFF;text-align: center;}
#list p.img {position: absolute;bottom: 3px;height: 82px;padding: 0;line-height: 80px;}
#list p.img img {vertical-align: bottom;}
#list p.txt {position: absolute;bottom: 0;right: 0;padding: 0 8px 3px 0;text-align: right;}

#list li.x {background: #CCC;}
#list li.x p.no {color: #CCC;}

.notes li {padding: 5px 0 0 0;}

@media screen and (min-width: 480px) {
.zitem {width: 49%;}
.zitem .img {height: 138px;line-height: 138px;}

#list li {width: 31%;}
}
@media screen and (min-width: 768px) {
#ui {width: 490px;margin: 0 auto;}
#result h2,
p.count {padding: 10px 0 35px 0;}

#result ul.pose {clear: none;border: none;}

.rs_2nd li {width: 33.3%;}
.rs_3rd li {width: 16.66%;}
.rs_4th li {width: 10%;}

#result .rs_1st  li h3 {left: 35%;}
#result .rs_2nd  li h3 {left: 20%;}

#list li {width: 18%;}
}

@media screen and (min-width: 800px) {#list li {width: 16%;}}
@media screen and (min-width: 980px) {}