* {
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	height: 100%;
	font-size: 100%;
	font-family: Helvetica, Hiragino Kaku Gothic ProN;
}
#can {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 100;
}

#can_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	background-image: url(images/logo.png), url(images/dotte.png);
	background-position:center 5px, left top;
	background-size: 320px, auto;
	background-repeat: no-repeat, repeat;
}
@media screen and (min-width: 600px) {
	#can_bg {
		background-size: 640px, auto;
	}
}
#can_is {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 80;
	background: #fff;
}
#scratchBox {
	overflow: hidden;
	position: relative;
	z-index: 80;
}
#cover {
	display: none;
	position: absolute;
	padding: 10px;
	box-sizing: border-box;
	top: 0;
	left: 0;
	z-index: 110;
	background: #fff;
}
.btn {
	font-family: 'Rammetto One', cursive;
	font-size: 0.8em;
	background: rgba(255,255,255,.3);
	color: #fff;
	display: inline-block;
	text-align: center;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	box-shadow: -1px -1px 1px rgba(0,0,0,.3),1px 1px 1px rgba(255,255,255,1);
	text-shadow: 0px -1px rgba(0,0,0,.5), 1px 0px rgba(0,0,0,.3), 0px 1px rgba(0,0,0,.5), -1px 0px rgba(0,0,0,.3);
	box-sizing: border-box;
}
#next {
	width: 60%;
	position: absolute;
	bottom: 1%;
	right: 5%;
	border-radius: 0 10px 10px 0;
}
#back {
	width: 30%;
	position: absolute;
	bottom: 1%;
	left: 5%;
	border-radius: 10px 0 0 10px;
}
@media screen and (min-width: 600px) {
	.btn {
		font-size: 1em;
		padding: 10px;
	}
}
/* - - - - osara - - - - */
#out {
	position: relative;
	width: 100%;
	height: 100%;
	border: solid #cdcdcd 1px;
	border-radius: 30px;
	background: url(images/check.png);
	box-sizing: border-box;
}
#in {
	position: absolute;
	top: 7.5%;
	left: 10%;
	width: 80%;
	height: 85%;
	border-radius: 30px;
	box-shadow: 0px -3px 5px 3px rgba(230,230,230,1) inset;
	box-sizing: border-box;
	background: #fff;
}
#line {
	position: absolute;
	top: 7.5%;
	left: 10%;
	width: 80%;
	height: 85%;
	border-radius: 30px;
	box-shadow: 0 -3px 5px 3px rgba(240,240,240,.7) inset;
	box-sizing: border-box;
}
#line img {
	margin: -30px 0 0 -15px;
}

/*- - - pop - - -*/
#result {
	width: 50%;
	color: #fff;
	font-weight: bold;
	font-size: 1.0em;
	text-align: center;
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	margin: -20% 0 0 -31%;
	padding: 20px;
	z-index: 105;
	border-radius: 15px;
	background: rgba(0,0,0,.5);
}
#result span {
	width: 45px;
	height: 45px;
	display: inline-block;
	margin-right: 10px;
	background: url(images/sprite.gif) no-repeat top left;
	background-position: 0;/* offset 50 */
	background-size: 400px 45px;
	vertical-align: middle;
	opacity: 1;
}
@media screen and (min-width: 600px) {
	#result {
		font-size: 1.5em;
		margin-left: -27%;
	}
	#result span {
		width: 90px;
		height: 90px;
		background-size: 800px 90px;
	}
}

/* - - - - -animation - - - - - - */
@-webkit-keyframes t-slideup {
	from {
		-webkit-transform: translateY(0);
	}
    to {
		-webkit-transform: translateY(-100%);
	}
}
@-webkit-keyframes t-slidedown {
	from {
		-webkit-transform: translateY(-100%);
	}
	to {
		-webkit-transform: translateY(0);
	}
}
.t-slideup {
	-webkit-animation-name: t-slideup;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}
.t-slidedown {
	-webkit-animation-name: t-slidedown;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}

@-webkit-keyframes t-popin {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
    100% {
		opacity: 0;
	}
}
.t-popin {
	-webkit-animation-name: t-popin;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 1500ms;
}

@-webkit-keyframes t-fadein {
	from {
		opacity: 0;
	}
    to {
		opacity: 1;
	}
}
.t-fadein {
	-webkit-animation-name: t-fadein;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}


/* --- PF-X bug ---*/
img[src^="http://www.pf-x.net/"] {
	position: absolute;
}