@charset "UTF-8";
/* --------------------------------------------------------

今日の占いランキング

-------------------------------------------------------- */

/* --------------------------------------------------------
	▼共通設定
-------------------------------------------------------- */

/* base font-size
-----------------------------------------------------------
Pixels / Percent
-----------------------------------------------------------
6px		42.9%	16px	114.3%
7px		50%		17px	121.4%
8px		57.1%	18px	128.6%
9px		64.3%	19px	135.7%
10px	71.4%	20px	142.9%
11px	78.6%	21px	150%
12px	85.7%	22px	157.1%
13px	92.9%	23px	164.3%
14px	100%	24px	171.4%
15px	107.1%
-------------------------------------------------------- */

/* ヘッダー下のライン */
header#globalnav{
	border-bottom:2px solid #d66bf1;
	padding-bottom:5px;
	background-color:#ffffff;
	display: block;
}

/*タイトル*/
.fortune_ttl{
	margin:10px auto auto 7px;
	padding-left:20px;
	font-size:130%;
	background:url(../img/low_fortune_ttl.png) no-repeat left center;
	background-size:8px 23px;
	-webkit-background-size:8px 23px;
	-moz-background-size:8px 23px;
	-o-background-size:8px 23px;
}

/* ラッパー背景 */
#wrapper_low{
	background: #ffffff;
}

/* ソーシャルボタン */
.sharebtn{
	display: block;
	background: #ffffff;
	padding-right: 10px;
}
.sharebtn ul{
	float: right;
	padding: 10px 0 0;
}
	.sharebtn li{
		float: left;
	}
	.sharebtn li.twitter{
		margin-right: 9px;
	}

.container{
	position: relative;
}


/* ▼タブレット縦用 [ 画面サイズ横768以上 ]
------------------------------------------------ */
@media screen and (min-width:768px){

	/* 横2カラム 縦2カラム
	------------------------------ */
		.col_2_2 .contents{
			float:left;
			width:50%;
		}
		.col_2_2 .contents:nth-child(2n+1) {
			clear: both;
		}
		.col_2_2 .contents:nth-child(2n-1) .container{
			margin-right: 2px;
		}

	/* 横3カラム 縦3カラム
	------------------------------ */
		.col_3_3 .contents{
			float:left;
			width:33%;
		}
		.col_3_3 .contents:nth-child(3n) {
			width:34%;
		}
		.col_3_3 .contents:nth-child(2n+1) {
			clear: none;
		}
		.col_3_3 .contents:nth-child(3n+1) {
			clear: both;
		}
		.col_3_3 .contents:nth-child(2n-1) .container{
			margin-right: 0;
		}
		.col_3_3 .contents:nth-child(3n-1) .container,
		.col_3_3 .contents:nth-child(3n-2) .container{
			margin-right: 2px;
		}

}

/* ▼タブレット横用 [ 画面サイズ横1024以上 ]
------------------------------------------------ */
@media screen and (min-width:1024px){


	/* 横2カラム 縦2カラム
	------------------------------ */
		.col_2_2 .contents{
			float:left;
			width:50%;
		}
		.col_2_2 .contents:nth-child(2n+1) {
			clear: both;
		}
		.col_2_2 .contents:nth-child(2n-1) .container{
			margin-right: 2px;
		}

	/* 横3カラム 縦3カラム
	------------------------------ */
		.col_3_3 .contents{
			float:left;
			width:33%;
		}
		.col_3_3 .contents:nth-child(3n) {
			width:34%;
		}
		.col_3_3 .contents:nth-child(2n+1) {
			clear: none;
		}
		.col_3_3 .contents:nth-child(3n+1) {
			clear: both;
		}
		.col_3_3 .contents:nth-child(2n-1) .container{
			margin-right: 0;
		}
		.col_3_3 .contents:nth-child(3n-1) .container,
		.col_3_3 .contents:nth-child(3n-2) .container{
			margin-right: 2px;
		}

}




/* --------------------------------------------------------
	▼コンテンツ
-------------------------------------------------------- */

/* ▼大枠
-------------------------------------- */
#main{
	width: 100%;
	overflow: hidden;
	line-height: 1.4;
	margin-top: 1px;
}
	#main a{
		text-decoration: none;
		line-height: 1.4;
	}
	#main header .tit{
		position: relative;
		line-height: 1;
		color: #ffffff;
		padding: 10px 20px 10px 6px;
		background-size:80px 40px,auto auto;
		-webkit-background-size:80px 40px,auto auto;
		-moz-background-size:80px 40px,auto auto;
		-o-background-size:80px 40px,auto auto;
	}
		#main header .tit span{
			font-size: 142.9%;
		}
		#main header .tit span.icon{
			padding-left: 20px;
			background: url(../img/fortune_shining1.png) no-repeat 0 50%;
			background-size:16px 17px;
			-webkit-background-size:16px 17px;
			-moz-background-size:16px 17px;
			-o-background-size:16px 17px;
		}
		#main header .tit span.date{
			position: absolute;
			bottom: 10px;
			right: 10px;
			font-size: 100%;
		}

.excts{
	display: none;
}
	.expand a{
		color: #9f2500;
	}

	.expand .subt{
		position: relative;
		border-top: 1px solid #eaa88e;
		border-right: 1px solid #eaa88e;
		border-bottom: 1px solid #9f5132;
		border-left: 1px solid #eaa88e;
	}
		.expand .subt a{
			display: block;
			font-size: 142.9%;
			text-align: center;
			padding: 3px;
			border: 1px solid #ffffff;
			background: -webkit-gradient(linear, left top, left bottom,
				from(#ffffff),
				to(#ffb273)
			);
		}

			.expand .subt a:after{
				content:'';
				width:14px;
				height:14px;

				position:absolute;
				z-index:2;
				top: 12px;
				right: 10px;

				background: url(../img/fortune_plus.png) no-repeat 0 0;
				background-size:14px 14px;
				-webkit-background-size:14px 14px;
				-moz-background-size:14px 14px;
				-o-background-size:14px 14px;

			}

			.expand.open .subt a:after{
				background: url(../img/fortune_minus.png) no-repeat 0 0;
			}



/* ▼12星座占い
-------------------------------------- */
#star12 header .tit{
	background: url(../img/fortune_pattern.png) repeat-x 0 0, -webkit-gradient(linear, left top, left bottom,
		from(#9d8f01),
		to(#6e6001)
	);
}

	/* 設定 */
	#setting{
		position: relative;
		margin: 7px 0;
		color: #9f2500;
	}
	#setting a{
		color: #9f2500;
	}

		/* 設定ボタン */
		#setting .cts{
			background: #ffc595;
			padding: 9px 20px 20px 20px;
		}
		#setting .cts ul{
			width: 100%;
		}
			#setting .cts li{
				float: left;
				width: 33%;
				margin: 5px 0 0 0;
			}

			#setting .cts li:nth-child(3n-1){
				width: 34%;
			}

			#setting .cts a{
				display: block;
				margin-right: 5px;
				border: 1px solid #eca080;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				text-align: center;
			}
			#setting .cts li:nth-child(3n) .btn{
				margin-right: 0;
			}
				#setting.noborder .subt a,
				#setting.noborder .cts a{
					-webkit-tap-highlight-color: rgba(0,0,0,0);
				}

			#setting .cts .btn{
				padding: 12px 0 6px;
				border: 2px solid #ffffff;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				text-align: center;
				background: -webkit-gradient(linear, left top, left bottom,
					from(#ffffff),
					to(#fddab8)
				);
			}

			#setting .cts .act .btn{
				color: #ffffff;
				background: #9F2500;
			}

			#setting .cts .btn .name{
				line-height: 1;
			}

			#setting .cts .btn .period{
				padding-top: 2px;
				font-size: 71.4%;
				line-height: 1;
			}

			#setting .cts .caption{
				font-size: 85.7%;
				padding-top: 20px;
			}

		/* 設定完了 */
		#complete{
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
			height: 100%;
			background: #ffc595 url(../img/fortune_setting.png) no-repeat 50% 0;
			background-size:320px 240px;
			-webkit-background-size:320px 240px;
			-moz-background-size:320px 240px;
			-o-background-size:320px 240px;
		}
			#complete .txt{
				margin-top: 75px;
				text-align: center;
				font-size: 214.3%;
			}
			#complete ul{
				width: 200px;
				margin: 23px auto 0;
			}

			#complete li{
				width: 200px;
				margin-top: 5px;
				border: 1px solid #eca080;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				text-align: center;
			}
			#complete li a{
				font-size:142.9%;
				display: block;
				padding: 9px 0 7px;
				border: 2px solid #ffffff;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				text-align: center;
				background: -webkit-gradient(linear, left top, left bottom,
					from(#ffffff),
					to(#fddab8)
				);
			}

	/* メインビジュアル */
	.mainvis{
		width: 100%;
		height: 200px;
		background: #e1e076 url(../img/fortune_main_bg.jpg) no-repeat 50% 0;
		background-size:1000px 200px;
		-webkit-background-size:1000px 200px;
		-moz-background-size:1000px 200px;
		-o-background-size:1000px 200px;
	}
		/* 詳細ページ */
		.result .mainvis{
			height: 160px;
			background: #e1e076 url(../img/fortune_detail_main_bg.jpg) no-repeat 50% 0;
			background-size:1000px 160px;
			-webkit-background-size:1000px 160px;
			-moz-background-size:1000px 160px;
			-o-background-size:1000px 160px;
		}

		.mainvis h3{
			position: relative;
			margin: 0 auto;
			width: 320px;
		}
			.mainvis h3 img{
				width: 320px;
			}
		.mainvis h3 span{
			position: absolute;
			top: 170px;
			left: 0;
			width: 320px;
			text-align: center;
			color: #787800;
		}

/* ランキング */
	.ranking .vis img{
		width: 46px;
	}

	.ranking .container{
		border-top: 1px solid #EAE9CD;
	}

	.ranking a{
		display: block;
		margin-top: 2px;
		padding: 0 0 2px;
		border-top: 1px solid #b8b06a;
	}

@media screen and (min-width:768px){
	#ranking_top{
		border-top: 1px solid #b8b06a;
	}
	#ranking_top a{
		margin-top: 0;
		border-top: none;
	}
}

	.ranking .cts{
		position: relative;
		width: 100%;
		margin-top: 2px;
		padding: 15px 0 10px;
		border-top: 1px solid #eae9cd;
		background: -webkit-gradient(linear, left top, left bottom,
			from(#f2f2d4),
			color-stop(0.2, #ffffff),
			to(#ffffff)
		);

	}

	.ranking .vis{
		display: table-cell;
		vertical-align: top;
		width: 80px;
	}
		.ranking .vis p{
			padding: 0 0 2px 20px;
		}

	.ranking .info{
		display: table-cell;
		vertical-align: top;
	}

	.ranking .tit .name{
		color: #787800;
		font-size: 128.6%;
	}
	.ranking .tit .period{
		color: #7d7d7d;
		font-size: 85.7%;
	}

	.ranking .txt{
		color: #000000;
		margin: 10px 30px 16px 0;
	}

	.ranking .detail{
		position: absolute;
		right: 20px;
		bottom: 5px;
		font-size: 85.7%;
		color: #787800;
		padding-right: 15px;
		text-align: right;
		background: url(../img/fortune_comm_arrow_gold.png) no-repeat 100% 50%;
		background-size:10px 11px;
		-webkit-background-size:10px 11px;
		-moz-background-size:10px 11px;
		-o-background-size:10px 11px;
	}


#ranking_btm{
	margin: 2px 0 10px;
}

/* ▼タブレット用 [ 画面サイズ横768以上 ]
------------------------------------------------ */
@media screen and (min-width:768px){
	#ranking_btm{
		margin-top: 0;
	}
	#ranking_btm .subt{
		display: none;
	}
	#ranking_btm .excts{
		display: block !important;
	}
}




/* ▼結果
-------------------------------------- */
.luck{
	padding: 0 10px;
}
	.luck .box{
		padding: 0 10px;
	}

	.luck .tit{
		display: table;
		width: 100%;
		margin: 10px 0;
		border-radius:4px;
	}
	.luck .tit p{
		line-height: 1;
	}
	.luck .tit .kind{
		font-size: 142.9%;
		color: #ffffff;
		display: table-cell;
		width: 96px;
		text-align: center;
		background: url(../img/fortune_shining2.png) no-repeat 5px 50%;
		background-size:17px 16px;
		-webkit-background-size:17px 16px;
		-moz-background-size:17px 16px;
		-o-background-size:17px 16px;
		border-radius: 4px 0 0 4px;
		-webkit-border-radius: 4px 0 0 4px;
		-moz-border-radius: 4px 0 0 4px;
		-o-border-radius: 4px 0 0 4px;
	}
		.luck .tit .kind p{
			padding: 5px 0 5px 10px;
		}

	.luck .tit .val{
		font-size: 142.9%;
		display: table-cell;
		border-radius: 0 4px 4px 0;
		-webkit-border-radius: 0 4px 4px 0;
		-moz-border-radius: 0 4px 4px 0;
		-o-border-radius: 0 4px 4px 0;
	}
		.luck .tit .val p{
			padding: 5px 0 5px 20px;
		}
		.luck .tit .val span{
			color: #b5b5b5;
		}

	/* 全体運 */
	.luck .all .tit{
	}
		.luck .all .tit .kind{
			background-color: #50822b;
		}
		.luck .all .tit .val{
			color: #50822b;
			border: 1px solid #b9cdaa;
		}

	/* 恋愛運 */
	.luck .love .tit{
	}
		.luck .love .tit .kind{
			background-color: #e94e7a;
		}
		.luck .love .tit .val{
			color: #e94e7a;
			border: 1px solid #f6b8ca;
		}

	/* 仕事運 */
	.luck .work .tit{
	}
		.luck .work .tit .kind{
			background-color: #219eba;
		}
		.luck .work .tit .val{
			color: #219eba;
			border: 1px solid #a6d8e3;
		}

	/* 金運 */
	.luck .money .tit{
	}
		.luck .money .tit .kind{
			background-color: #ef6c14;
		}
		.luck .money .tit .val{
			color: #ef6c14;
			border: 1px solid #f9c4a1;
		}

	/* その他 */
	.other{
		margin: 20px 20px 0;
		
	}
		.other .box{
			padding: 0 0 8px 0;
			border-top: 1px dotted #959595;
		}

	.other .tit{
		margin: 7px 0 2px;
		color: #70368d;
	}

	.morearea{
		margin-top: 30px;
		padding: 20px;
		background:#f2f2bd;
		text-align: center;
		color:#4b4200;
	}

	.morearea .btn{
		margin: 0 auto;
		border: 1px solid #b8b06a;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
		text-align: center;
	}
		.morearea .btn a{
			color:#4b4200;
			font-size: 142.9%;
			display: block;
			padding: 8px 0 5px;
			border: 2px solid #ffffff;
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			-o-border-radius: 4px;
			text-align: center;
			background: url(../img/fortune_crown.png) no-repeat 20px 50%, -webkit-gradient(linear, left top, left bottom,
				from(#ffffff),
				to(#fefebd)
			);
			background-size:22px 17px,auto auto;
			-webkit-background-size:22px 17px,auto auto;
			-moz-background-size:22px 17px,auto auto;
			-o-background-size:22px 17px,auto auto;

		}

	.morearea .txt{
		margin-top: 10px;
	}




/* ▼おすすめ占い
-------------------------------------- */
#recomend{
}
#recomend img{
	width: 96px;
}
#recomend .icon img{
	width: 92px;
}

#recomend header .tit{
	background: url(../img/fortune_pattern.png) repeat-x 0 0, -webkit-gradient(linear, left top, left bottom,
		from(#0b92be),
		to(#07629f)
	);
}

#recomend header .subt{
	color: #ffffff;
	padding: 6px 20px 5px 26px;
	background: #33bbfe;
	border-bottom: 1px solid #ffffff;
}
#recomend header .subt .icon{
	color: #ffff00;
}



#recomend .area{
	background: #ffffff;
}

	#recomend .contents{
		border-top: 1px solid #7bc5fd;
	}

	#recomend .container{
		min-height: 356px;
		border-top: 1px solid #ffffff;
		background: -webkit-gradient(linear, left top, left bottom,
			from(#bee6fb),
			color-stop(0.04, #bee6fb),
			color-stop(0.08, #e3f2f9),
			to(#e3f2f9)
		);
	}

	#recomend .container .frm{
		padding:30px 10px 28px 20px;
	}

		#recomend .container a{
			display: block;
		}

			/* アプリサムネイル */
			#recomend .vis{
				display: table-cell;
				padding-right: 14px;
			}

				/* アプリサムアイコン */
				#recomend .vis .icon{
					position: relative;
					margin-bottom: 20px;
					padding: 2px;
				}
					#recomend .vis .icon .mask{
						width:92px;
						height:92px;
						position:absolute;
						z-index:2;
						top: 2px;
						left: 2px;
						background: url(../img/fortune_comm_mask.png) no-repeat 0 0;
						background-size:92px 92px;
						-webkit-background-size:92px 92px;
						-moz-background-size:92px 92px;
						-o-background-size:92px 92px;
					}
					#recomend .vis .icon .mask:after{
						content:'';
						width:88px;
						height:88px;
						position:absolute;
						z-index:2;
						top: 0;
						left: 0;
						border: 2px solid #30afff;
						border-radius:14px;
						-webkit-border-radius:14px;
						-moz-border-radius:14px;
						-o-border-radius:14px;
					}

			/* アプリサムネイル zoombox */
				#recomend .vis .thum{
					margin-top: 10px;
					cursor: pointer;
				}

			/* ZOOM BOX */
				.zb{
					cursor: pointer;
					background: url(../img/pickup_comm_close.png) no-repeat 5px 5px, rgba(0,0,0,0.8);
					background-size:20px 20px,auto auto;
					-webkit-background-size:20px 20px,auto auto;
					-moz-background-size:20px 20px,auto auto;
					-o-background-size:20px 20px,auto auto;
				}
					.zoombox{
						position:absolute;
						top:0;
						left:0;
						zoom:2;
						z-index:10;
						width:100%;
						height:100%;
						display:table-cell;
						text-align:center;
					}
					.zoombox img{
						padding-top: 5px;
					}

			/* アプリ紹介文 */
			#recomend .txt{
				display: table-cell;
				vertical-align: top;
			}
				#recomend .txt h2{
					font-size: 180%;
					line-height: 1.1;
					color: #0052b8;
					padding-right: 23px;
					background: url(../img/fortune_comm_arrow_blue.png) no-repeat 100% 50%;
					background-size:11px 11px;
					-webkit-background-size:11px 11px;
					-moz-background-size:11px 11px;
					-o-background-size:11px 11px;
				}
				#recomend .txt p{
					padding-top: 10px;
					color: #434343;
				}
				#recomend .txt .subt{
					padding-top: 12px;
					font-size: 120%;
					line-height: 1.2;
					color: #000000;
				}