@charset "UTF-8";

/*-contents-*/
#wrap{
	position:absolute;
	width:100%;
	min-width:480px;
	overflow:hidden;
	/*display:none;*/
}
.pc #wrap{
	min-width:640px;
}

.content{
	width:100%;
	position:relative;
	margin:0 auto;
}

.inner{
	position:relative;
	margin:0 15px;
}


/*loading*/
#loader{
	width:100%;
	height:100%;
	background-color:#fff;
	position:fixed;
	color:#4cb920;
	z-index:9999;
	/*display:none;*/
}

#loader .chara{
	position:absolute;
	width:40px;
	height:40px;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-20px;
}
#loader .chara .fukidashi{
	position:absolute;
	width:95px;
	height:27px;
	margin-top:-27px;
	margin-left:-28px;
}

/*-header*/
#header{
	position:fixed;
	width:100%;
	z-index:99;
	top:0px;
	background-color:#baa6ff;
}
.pc #header{
	min-width:640px;
}
#header .inner{
	height:50px;
	width:100%;
	margin:0;
}
#menubtn{
	position:absolute;
	top:8px;
	left:10px;
}
#headershare{
	position:absolute;
	bottom:10px;
	right:15px;
}

.ad41 #header .inner{
	position:fixed;
	height:50px;
	width:100%;
	margin:0;
	background-color:#baa6ff;
}
.ad41 #headershare{
	position:fixed;
	top:14px;
	bottom:auto;
	right:15px;
	background-color:#baa6ff;
}

/*--nav--*/
#nav{
	position:absolute;
	top:50px;
	left:0px;
	width:100%;
	display:none;
}
#nav.head{
	width:600px;
}
#nav.in{
	display:block;
}
#nav li{
	position:relative;
	border-top:#362b2c 2px solid;
	overflow:hidden;
	background-color:#baa6ff;
}
#nav li.subnav{
	border:none;
	background:none;
}
#nav li.subnav ol.subnav li{
	border-color:#706499;
	background-color:#d6caff;
}
#nav li a{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	padding:0 0 0 15px;

	color:#000;
}
#nav li a img{
	position:absolute;

	top:50%;
	margin-top:-8px;
}

/*header*/
#nav.head{
	display:block;
	top:0;
}
#nav.head li{
	position:relative;
	border:none;
	background:none;
	float:left;
	overflow:visible;
	height:50px;
}
#nav.head li a{
	position:relative;
}
#nav.head li a img{
	position:relative;
	top:17px;
	margin-top:0;
}


#nav.head li.subnav ol.subnav{
	position:absolute;
	background-color:#706499;
	top:50px;
	display:none;
}
#nav.head li.subnav:hover ol.subnav{
	display:block;
}

#nav.head li.subnav ol.subnav li{
	margin-top:1px;
	width:100%;
}
#nav.head li.subnav ol.subnav li a{
	padding:0 15px;
	width:100% !important;
}



/*-mainvisual*/
#mainvisual{
	margin-top:50px;
}
#mainvisual .mv{
	position:absolute;
	left:50%;
}
#mv2{
	display:none;
}

#mainvisual .txt{
	position:absolute;
	left:50%;
	top:15px;
	height:200px;
	width:600px;
	margin-left:-300px;
}
#mainvisual.s .txt{
	position:absolute;
	left:50%;
	top:-10px;
	transform:scale3d(.75,.75,1);
}
#mainvisual .logo{
	position:absolute;
	left:0;
	top:0;
	height:100%;
}
#mainvisual .info{
	position:absolute;
	right:0px;
	top:50px;
}
#mainvisual .info a{
	position:relative;
	display:block;
	left:0;
	top:0;
	height:100%;
	width:auto;
	overflow:hidden;
}
#mainvisual .mv img{
	display:block;
	height:100%;
	width:auto;
}
#mainvisual .info img{
	float:right;
}


#contents{
	background-color:#e6e6e6;
	/*padding-bottom:12px;*/
}


/*--news--*/
#news{
	position:relative;
	top:12px;
	background:url(../img/mainvisual/news.gif) 50% 0 no-repeat;
	width:100%;
	height:60px;
	margin:0 auto;
}
#news ul{
	position:relative;
	width:100%;
	top:24px;
	height:20px;
	overflow:hidden;
}
#news li{
	position:absolute;
	width:100%;
	text-align:center;
	color:#362b2c;
	font-size:14px;

	top:30px;
}
#news li a{
	color:#362b2c;
	white-space: nowrap;
}
#news li a:hover{
	color:#e74c3c;
}

/*--その日占い--*/
#fortunebtn{
	position:relative;
	top:-230px;
	margin:0 auto;
	width:100%;
	max-width:960px;
}
#fortunebtn a{
	position:absolute;
	display:block;
	right:10px;
	background:url(../img/mainvisual/fortunebtnBG.png) 50% 50% no-repeat;
}
#fortunebtn .fukidashi{
	position:absolute;
	right:60px;
	top:-45px;
	width:124px;
	height:63px;
	background:url(../fortune/img/fukidashi.png) 0 0 no-repeat;
	/*display:none;*/
	opacity:0;

	-moz-transition: opacity .2s ease-out,top .2s ease-out;
	-webkit-transition: opacity .2s ease-out,top .2s ease-out;
	-o-transition: opacity .2s ease-out,top .2s ease-out;
	-ms-transition: opacity .2s ease-out,top .2s ease-out;
	transition: opacity .2s ease-out,top .2s ease-out;
}
#fortunebtn .fukidashi.in{
	display:block;
	top:-50px;
	opacity:1;
}

/*--キービジュアルサムネイル--*/
#keyvisualArea{
	position:relative;
	top:-230px;
	margin:0 auto;
	width:100%;
	max-width:960px;
}
#keyvisual{
	position:absolute;
	top:25px;
	left:10px;
}
#keyvisualThumb01{
	position:absolute;
	top:0px;
	left:0px;
	background:url(../img/mainvisual/keyvisualThumbBG_01.png) no-repeat;
}
#keyvisualThumb02{
	position:absolute;
	top:10px;
	left:110px;
	background:url(../img/mainvisual/keyvisualThumbBG_02.png) no-repeat;
}
#keyvisual .txt{
	position:absolute;
	top:109px;
	left:0px;
}

/*--vs魚心くん--*/
#vsArea{
	position:relative;
	top:-270px;
	margin:0 auto;
	width:100%;
	max-width:960px;
}
#vs{
	position:absolute;
	top:0px;
	left:10px;
	width:190px;
	height:200px;
}
#vs a{
	position:relative;
	width:100%;
	height:100%;
	display:block;
	background:url(../img/mainvisual/vs.png) 0 0 no-repeat;
}
#vs a:hover{
	background:url(../img/mainvisual/vs_on.png) 0 0 no-repeat;
}



/*-widgetarea-*/
#twwidget_preload{
	/*display:none;*/
}
#widgetarea{
	padding-top:15px;
}
#widgetarea .inner{
	/*margin-bottom:6px;*/
}
#widgets{
	position:relative;
	/*max-width:1024px;*/
	margin:0 auto;
}
#widgets ul{
	position:absolute;
	top:0;
	left:0;
	margin:0 -6px -6px 0;
	overflow:hidden;
}
#widgets li{
	position:relative;
	height:136px;
	float:left;
	overflow:hidden;
	margin:0 6px 6px 0;
	opacity:0;

	-moz-transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	-ms-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;
}
#widgets li.in{
	opacity:1;
}


#twwidget{
	position:absolute;
	top:0;
	left:0;
	height:278px;
	opacity:0;

	-moz-transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	-ms-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;

}
#twwidget.in{
	opacity:1;
}

#twwidget iframe{
	width:100% !important;
}



/*-gridarea*/
#gridarea{

}
#gridarea .inner{

}

#grid{
	width:100%;
}
#grid li{
	position:absolute;
	display:none;
}
.sp #grid li{
	display:block;
}

/*--gridタイトル--*/
#grid li .text h1{
	margin:55px 25px 0 25px;
	color:#362b2c;
	font-size:18px;
	line-height:18px;
	font-weight:700;
}
/*--gridカテゴリータグ--*/
#grid li .text h2{
	margin:25px 25px 0 25px;
	padding:5px 10px;
	position:absolute;
	color:#fff;
	background-color:#362b2c;
	font-size:14px;
	line-height:14px;
	font-weight:600;
}
/*--grid本文--*/
#grid li .text h3{
	margin:5px 25px 0 25px;
	color:#362b2c;
	font-size:10px;
	line-height:14px;
}
/*--grid画像--*/
#grid li .image{
	background-color:#fff;
}
#grid li .image img{
	position:absolute;
}
#grid li .image .new{
	position:absolute;
	background:url(../img/grid/new.png) 0 0 no-repeat;
	width:83px;
	height:83px;
	top:0;
	right:0;
}
/*--grid Moreボタン--*/
#grid li .more{
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	background:url(../img/common/blank.gif) repeat;
}
#grid li .more a{
	position:relative;
	display:block;
	width:100%;
	height:100%;
}
#grid li .more a img{
	position:absolute;
	bottom:20px;
}
#grid li.m.txtr .more a img{
	right:25px;
}
#grid li.m.txtl .more a img{
	left:25px;
}
#grid li.l .more a img{
	left:25px;
}

/*--m size--*/
#grid li.m .text{
	position:absolute;
	width:50%;
	height:100%;
	overflow:hidden;
}
#grid li.m .image{
	position:absolute;
	width:50%;
	height:100%;
	overflow:hidden;
}
#grid li.m .fukidashi{
	position:absolute;
	width:16px;
	height:34px;
	top:40px;
}
#grid li.m.txtr .text{right:0px;}
#grid li.m.txtr .image{left:0px;}
#grid li.m.txtr .fukidashi{right:0px;}
#grid li.m.txtl .text{left:0px;}
#grid li.m.txtl .image{right:0px;}
#grid li.m.txtl .fukidashi{left:0px;}

/*--l size--*/
#grid li.l .text{
	position:absolute;
	width:100%;
	height:50%;
	top:50%;
	overflow:hidden;
}
#grid li.l .image{
	position:absolute;
	width:100%;
	height:50%;
	overflow:hidden;
}

#grid li.accessory{
	background:none !important;
}
#grid li.accessory .image{
	width:100%;
}

/*--accessory--*/
#grid li.accessory .image{
	background:none;
	overflow:visible;
}


/*-loadnext-*/
#loadnext{
	padding:6px 0 12px 0;
}
#loadnext.out{
	display:none;
}
#loadnext .inner{
	position:relative;
}
#loadnext .btn{
	position:relative;
	width:130px;
	height:34px;
	margin:0 auto;
}
#loadnext .btn a{
	position:relative;
}


/*-bannerarea-*/
#bannerarea{
}
#bannerarea .inner{
	pading-bottom:6px;
}
#banners{
	position:relative;
	top:0;
	left:0;
	overflow:hidden;
}
#banners ul{
}
#banners li{
	position:absolute;
}


/*-footer*/
#footer{
	background-color:#baa6ff;
}
#footer .inner{
	height:240px;
}
#pagetopbtn{
	position:absolute;
	top:20px;
	height:34px;
}
#pagetopbtn img{
	position:absolute;
}
#cr{
	position:absolute;
	right:0px;
	top:20px;
}



/*-charaAnime-*/

.charaAnime{
	position:absolute;
	z-index:100;
}
.charaAnime .chara{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
.charaAnime .fukidashi{
	position:absolute;
	overflow:hidden;
	display:none;
}
.charaAnime img{
	position:absolute;
}


/*
line-stamp
*/
#line-stamp{
	position:fixed;
	width:190px;
	height:160px;
	bottom:10px;
	left:10px;
	z-index:1000;
}
#line-stamp a.btn{
	position:absolute;
	display:block;
	width:190px;
	height:160px;
	top:0;
	left:10px;
}
#line-stamp a.btn .fukidashi{
	position:absolute;
	width:155px;
	height:123px;
	top:0;
	right:0;
	background:url(../img/top/lineStamp_fukidashi.png) no-repeat;
}
#line-stamp a.btn .chara{
	position:absolute;
	width:85px;
	height:76px;
	bottom:0;
	left:0;
	background:url(../img/top/lineStamp_chara.png) no-repeat;
}

#line-stamp a.btn .fukidashi{
	transform-origin:60px 118px;
	animation: lineStampFukidashiIdle 8s cubic-bezier(0.4,0,.6,1) 5s;
	animation-iteration-count:infinite;
}
#line-stamp a.btn .chara{
	transform-origin:44px 76px;
	animation: lineStampCharaIdle 8s cubic-bezier(0,0.4,.5,1) 5s;
	animation-iteration-count:infinite;
}


.pc #line-stamp a.btn:hover .fukidashi{
	animation: lineStampFukidashiHover 2s cubic-bezier(0.4,0,.6,1) 0s;
	animation-iteration-count:infinite;
}
.pc #line-stamp a.btn:hover .chara{
	animation: lineStampCharaHover 2s cubic-bezier(0,0.4,.5,1) 0s;
	animation-iteration-count:infinite;
}


/*/////////////////////////
 keyframe
//////////////////////////*/

@keyframes lineStampCharaIdle {
	0% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	2.5% {
		transform:scale3d(1.2,.8,1) translate3d(0,0,0);
	}
	5% {
		animation-timing-function: cubic-bezier(0.4,0,1,.6);
		transform:scale3d(.9,1.1,1) translate3d(0,-20px,0);
	}
	7.5% {
		animation-timing-function: cubic-bezier(0,0.4,.5,1);
		transform:scale3d(.9,1.1,1) translate3d(0,0,0);
	}
	8.75% {
		animation-timing-function: cubic-bezier(0.4,0,.6,1);
		transform:scale3d(1.1,.9,1) translate3d(0,0,0);
	}
	10.95% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	100% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
}

@keyframes lineStampFukidashiIdle {
	0% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	2.5% {
		transform:rotate(-5deg) scale3d(.8,.8,1) translate3d(0,10px,0);
	}
	5% {
		transform:rotate(10deg) scale3d(1.2,1.2,1) translate3d(0,-5px,0);
	}
	7.5% {
		transform:rotate(-5deg) scale3d(.9,.9,1) translate3d(0,2px,0);
	}
	8.75% {
		transform:rotate(3deg) scale3d(1.1,1.1,1) translate3d(0,-1px,0);
	}
	10.95% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	100% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
}

@keyframes lineStampCharaHover {
	0% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	10% {
		transform:scale3d(1.2,.8,1) translate3d(0,0,0);
	}
	20% {
		animation-timing-function: cubic-bezier(0.4,0,1,.6);
		transform:scale3d(.9,1.1,1) translate3d(0,-20px,0);
	}
	30% {
		animation-timing-function: cubic-bezier(0,0.4,.5,1);
		transform:scale3d(.9,1.1,1) translate3d(0,0,0);
	}
	35% {
		animation-timing-function: cubic-bezier(0.4,0,.6,1);
		transform:scale3d(1.1,.9,1) translate3d(0,0,0);
	}
	45% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	100% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
}

@keyframes lineStampFukidashiHover {
	0% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	10% {
		transform:rotate(-5deg) scale3d(.8,.8,1) translate3d(0,10px,0);
	}
	20% {
		transform:rotate(10deg) scale3d(1.2,1.2,1) translate3d(0,-5px,0);
	}
	30% {
		transform:rotate(-5deg) scale3d(.9,.9,1) translate3d(0,2px,0);
	}
	35% {
		transform:rotate(3deg) scale3d(1.1,1.1,1) translate3d(0,-1px,0);
	}
	45% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	100% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
}


@keyframes xmasPresentIn {
	0% {
		transform:scale3d(.5,.5,1);
	}
	100% {
		transform:scale3d(1,1,1);
	}
}
@keyframes xmasPresentFix {
	0% {
		transform:scale3d(1,1,1);
	}
	20% {
		animation-timing-function: cubic-bezier(0.4,0,.6,1);
		transform:scale3d(1.6,.6,1);
	}
	50% {
		transform:scale3d(.8,1.2,1);
	}
	80% {
		transform:scale3d(1.1,.9,1);
	}
	100% {
		transform:scale3d(1,1,1);
	}
}
@keyframes xmasPresentBoxHover {
	0% {
		transform:scale3d(1,1,1);
	}
	20% {
		transform:scale3d(1.4,.8,1);
	}
	50% {
		transform:scale3d(.8,1.2,1);
	}
	80% {
		transform:scale3d(1.1,.9,1);
	}
	100% {
		transform:scale3d(1,1,1);
	}
}

@keyframes xmasPresentBoxIdle {
	0% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	2.5% {
		transform:scale3d(1.2,.8,1) translate3d(0,0,0);
	}
	5% {
		animation-timing-function: cubic-bezier(0.4,0,1,.6);
		transform:scale3d(.9,1.1,1) translate3d(0,-20px,0);
	}
	7.5% {
		animation-timing-function: cubic-bezier(0,0.4,.5,1);
		transform:scale3d(.9,1.1,1) translate3d(0,0,0);
	}
	8.75% {
		animation-timing-function: cubic-bezier(0.4,0,.6,1);
		transform:scale3d(1.1,.9,1) translate3d(0,0,0);
	}
	10.95% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
	100% {
		transform:scale3d(1,1,1) translate3d(0,0,0);
	}
}

@keyframes xmasPresentFukidashiIdle {
	0% {
		transform:rotate(-10deg) scale3d(.5,.5,1) translate3d(0,10px,0);
	}
	2.5% {
		transform:rotate(10deg) scale3d(1.2,1.2,1) translate3d(0,-20px,0);
	}
	5% {
		transform:rotate(-5deg) scale3d(.9,.9,1) translate3d(0,5px,0);
	}
	7.5% {
		transform:rotate(3deg) scale3d(1.1,1.1,1) translate3d(0,-2px,0);
	}
	9% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	97% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0px,0);
	}
	100% {
		transform:rotate(-10deg) scale3d(.5,.5,1) translate3d(0,10px,0);
	}
}
@keyframes xmasPresentFukidashiHover {
	0% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
	20% {
		transform:rotate(10deg) scale3d(1.2,1.2,1) translate3d(0,-5px,0);
	}
	50% {
		transform:rotate(-5deg) scale3d(.9,.9,1) translate3d(0,2px,0);
	}
	80% {
		transform:rotate(3deg) scale3d(1.1,1.1,1) translate3d(0,-1px,0);
	}
	100% {
		transform:rotate(0deg) scale3d(1,1,1) translate3d(0,0,0);
	}
}