@charset "utf-8";

#contents{
	position:relative;
	margin:0 auto;
}

#contents li{
	transition:transform .3s cubic-bezier(.3,0,.2,1);
}

#contents li,
#contents a{
	background-repeat:no-repeat;
}


/*header*/
#header{
	position:relative;
	background-color:#e60027;
	margin:18px 0;
}
#header>ul{
	overflow:hidden;
	padding:3px;
}
#header>ul>li{
	position:relative;
	width:312px;
	height:190px;
	float:left;
	margin:3px;
}
#header>ul>li.logo{
	background:url(../img/index/header_logo.gif);
}
#header>ul>li.copy{
	background:url(../img/index/header_copy.gif);
}
#header>ul>li.usagi{
	background:url(../img/index/header_sugousagi.gif);
}
#header>ul>li>a{
	display:block;
	width:100%;
	height:100%;
}

#header>ul>li.copy ul.sns{
	position:absolute;
	width:56px;
	left:5px;
	bottom:5px;
}
#header>ul>li.copy ul.sns>li{
	position:relative;
	float:left;
	width:23px;
	height:23px;
	margin-left:5px;
}
#header>ul>li.copy ul.sns>li a{
	position:relative;
	display:block;
	width:100%;
	height:100%;
}
.pc #header>ul>li.copy ul.sns>li a:hover{
	opacity:.6;
}

#header>ul>li.copy ul.sns>li.fb a{
	background:url(../img/index/fb.gif) no-repeat;
}

#header>ul>li.copy ul.sns>li.tw a{
	background:url(../img/index/tw.gif) no-repeat;
}

#header>ul>li.copy .counter{
	bottom:3px;
	left:110px;
	color:#fff;
}
#header>ul>li.copy .counter .cnt{
	background-image:url(../img/detail/counter_fukidashi.png);
}

#header>ul>li.usagi a .over{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:url(../img/index/header_sugousagi_over_loop.gif);
}
.pc #header>ul>li.usagi a:hover .over,
.sp #header>ul>li.usagi.hover a .over{
	display:block;
}
#header>ul>li.usagi a .fukidashi{
	position:absolute;
	width:406px;
	height:206px;
	top:13px;
	left:-104px;
	background:url(../img/index/header_sugousagi_over_fukidashi.png);
}
.pc #header>ul>li.usagi a:hover .fukidashi,
.sp #header>ul>li.usagi.hover a .fukidashi{
	animation:headerFukidashiIn .5s cubic-bezier(0.2,0,0.4,1);
	animation-fill-mode: both;
}
	


/*thumbs*/
#thumbs{
	position:relative;
	margin-bottom:20px;
}
#thumbs>ul{
	overflow:hidden;
	padding:3px;
}
#thumbs>ul>li{
	position:absolute;
	width:312px;
	height:190px;
	float:left;
	margin:3px;
	background-color:#fff;
}
#thumbs>ul>li.toukou::after{
	display:block;
	position:absolute;
	content:url(../img/index/toukou_tag.gif);
	width:74px;
	height:74px;
	top:-3px;
	left:-3px;
	z-index:1;
}
#thumbs>ul>li a{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}
#thumbs>ul>li a .txt{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
}
.pc #thumbs>ul>li a:hover .txt{
	display:block;
}

#thumbs>ul>li.s{
	width:153px;
	height:92px;
}
#thumbs>ul>li.m{
	width:153px;
	height:190px;
}
#thumbs>ul>li.l{
	width:312px;
	height:190px;
}
#thumbs>ul>li.xl{
	width:312px;
	height:386px;
}

#thumbs .counter{
	left:5px;
	bottom:5px;
	color:#000;
}
#thumbs .counter .cnt{
	background-image:url(../img/index/counter_fukidashi.png);
}



/*/////////////////////////
 keyframes
//////////////////////////*/

@keyframes headerFukidashiIn {
	0% {
		transform: rotate(45deg) scale(.2);
	}
	30% {
		transform: rotate(-10deg) scale(1.2);
	}
	60% {
		transform: rotate(5deg) scale(.98);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}