@charset "utf-8";

/*基本 CSS*/
body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
-webkit-touch-callout:none; // リンク長押しのポップアップを無効化
-moz-touch-callout:none;
-ms-touch-callout:none;
-o-touch-callout:none;
touch-callout:none;
-webkit-user-select:none; // テキスト長押しの選択ボックスを無効化
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
#detailWindow{
display:none;
}
.card1{
display:block;
width:170px;
height: 170px;
}
#fade {
display:none;
width:100%;
height:100%;
background-color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}

/*カードゲット時 CSS*/
.cardWindow{
	text-align:center;
}
.firstget{
	position:absolute;
	top:330px;
	left:0px;
}
.cardWindow p{
	color:#FFF;
	font-size:16px;
	line-height:1.4em;
	margin-top:10px;
}
.cardWindow p span{
	color:#FF3;
	font-weight:bold;
}

/*シールめくり CSS*/
.anim750{
-webkit-transition: all 380ms ease-in-out;
-moz-transition: all 380ms ease-in-out;
-ms-transition: all 380ms ease-in-out;
-o-transition: all 380ms ease-in-out;
transition: all 380ms ease-in-out;
}

#Awesome{
position: relative;
width: 170px;
height: 170px;
margin: 0 auto;
}

/*sticky=シール全体　back=めくれ部分　=シール本体*/

/*シール全体 角度*/
#Awesome .sticky{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}

#Awesome:hover .sticky{
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}

#Awesome .sticky{
position: absolute;
top: 0;
left: 0;
width:170px;
height: 170px;
}

#Awesome .circle_wrapper{
position: absolute;
width: 170px;
height: 170px;
left: 0px;
top: 0px;
overflow: hidden;
}

#Awesome .circle{
position: absolute;
width: 170px;
height: 170px;
margin: 0px;
}

/*めくれ部分*/
#Awesome .back{
height: 15px;
top: 15px;
}
/*めくれ量の調節*/
#Awesome:hover .back{
height: 170px;
top: 105px;
}

#Awesome:hover .back .circle{
margin-top: -65px;
}

/*前シール部分*/
#Awesome .front{
height: 155px;/*全高 ー #Awesome .front .circle の margin-top */
bottom: 0;
top: auto;
}

#Awesome:hover .front{
height: 60px;
}

#Awesome .front .circle{
margin-top: -15px;
background:url(images/seal_front.png) no-repeat top center;
}

#Awesome h3{
position: absolute;
width: 170px;
height: 170px;
top: 0px;
left: 0px;
background: url(images/seal_date7.png) no-repeat;
text-indent: -9999px;

-webkit-transition: opacity 50ms linear 200ms;
-moz-transition: opacity 50ms linear 200ms;
-ms-transition: opacity 50ms linear 200ms;
-o-transition: opacity 50ms linear 200ms;
transition: opacity 50ms linear 200ms;
}

#Awesome:hover h3{
filter: alpha( opacity=0 );/*ie6,7*/
-ms-filter: "alpha( opacity=0 )";/*ie8*/
opacity: 0;
-webkit-transition: opacity 50ms linear 100ms;
-moz-transition: opacity 50ms linear 100ms;
-ms-transition: opacity 50ms linear 100ms;
-o-transition: opacity 50ms linear 100ms;
transition: opacity 50ms linear 100ms;
}

#Awesome:hover .front .circle{
margin-top: -110px;
background-position: 0;
}