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

	rank.css / ランキングから選ぶページ共通CSS

	2014.6.3.更新 Scinex

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


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

	共通パーツ

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

/* ------------------------------
	eyecatch
--------------------------------- */

/* 土台 */

#eyecatch,
#eyecatch02 {
	width:100%;
	border-top:1px solid #006600;
	border-bottom:1px solid #006600;
	margin:0;
	padding:0;
}

#eyecatch .inner,
#eyecatch02 .inner  {
	width: 1020px;
	height:132px;
	margin: 0 auto;
	padding:0;
}

#eyecatch .inner{background: url(../../rank/img/eyecatch.jpg) right top no-repeat;}

#eyecatch02 .inner{background: url(../../rank/img/eyecatch02.jpg) right top no-repeat;}


/* H2部分 */

#eyecatch h2,
#eyecatch02 h2 {
	letter-spacing :0.1em;
	font-weight:lighter;
}

#eyecatch h2 span.txt1,
#eyecatch02 h2 span.txt1 {
	font-size: 22px;
	line-height:22px;
	padding:30px 0 10px 0;
	display:block;
}

#eyecatch h2 span.txt2,
#eyecatch02 h2 span.txt2 {
	font-size: 44px;
	line-height:56px;
	padding:0;
	display:block;
	letter-spacing:1px;
}

#eyecatch h2 span.txt3,
#eyecatch02 h2 span.txt3 {
	font-size: 22px;
	padding:0 0 0 5px;
}


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

	TOPページ

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

/* TOPページ専用TAB */
ul#rankTopTab {
	width:1020px;
	margin:10px 0;
	padding:10px 0 0 0;	/* ←「PageTopに戻る」クリック時、上余白を10px表示 */
}
ul#rankTopTab li {
	width:254px;
	margin:0 1px 0 0;
	padding:0;
	line-height:37px;
	font-weight:bold;
	float:left;
	background-image:none !important;
}
ul#rankTopTab li a {
	height:40px;
	padding:0 0 0 10px;
	color:#FFFFFF;
	font-size:14px;
	text-decoration:none;
	display:block;
}

ul#rankTopTab li#tab_c01 a { background:url(../../rank/img/tab_c01.gif) left top no-repeat !important; }
ul#rankTopTab li#tab_c02 a { background:url(../../rank/img/tab_c02.gif) left top no-repeat !important; }
ul#rankTopTab li#tab_c03 a { background:url(../../rank/img/tab_c03.gif) left top no-repeat !important; }

ul#rankTopTab li a:hover {
	filter: alpha(opacity=65);
	-moz-opacity:0.65;
	opacity:0.65;
}


/*TOPページ*/
#container #topList { padding:0 0 10px 0; }

#container #topList .rankTit {
	width:188px;
	height:142px;
	margin:10px 20px 0 0;
	padding:0;
	float:left;
	background:url(../../rank/img/rankframe.gif) left top no-repeat;
	text-align:center;
}

#container #topList .rankTit h4 {
	font-size:18px;
	color:#006600;
	text-align:center;
	margin:-5px 0 2px 0;
}

#container #topList .rankTit h4 img {
	margin-bottom:5px;
}

#container #topList .rankTit p {
	font-weight:bold;
}

#container #topList .ranks {
	width:188px;
	margin:0 20px 0 0;
	padding:0;
	float:left;
	position:relative;
}

.medal {
	position:absolute;
	top:0;
	left:0;
	z-index:50;
}

.spaceImg {	/* .rankConNameを中央揃えにするためのパーツ */
	position:relative;
	width:58px;		/* .rankConNameの左余白値 */
	height:45px;		/* .rankConNameの基本高さ領域値（＝後続の画像の位置調整） */
	display:table-cell;
	vertical-align:middle;
	/display:inline;
	/zoom:1;
}

.rankConName {
	line-height:1.3;
	position:relative;
	padding:3px 0;
	margin:0;
	width:130px;		/* コラム幅188px - spaceImgのwidth値 */
	display:table-cell;
	vertical-align:middle;
	/display:inline;
	/zoom:1;
}

.rankConName a {
	color:#006600;
}

.rankConImg {
	position:relative;
	width:188px;
	margin:0;
	padding:0;
	backgound:#FFFFFF;
}

.rankBtnArea {
	width:188px;
	margin:20px 0 0 0;
	padding:0;
	float:left;
}

/* ふるさと納税実績ランキング追記 */
.results_box {
	margin-bottom:40px;
    border-bottom: 2px dotted #aaaaaa;
}

.results_box h3,
.tit_rank {
	font-size:24px;
	color:#006600;
}

.results_box p{
	margin-bottom:10px;
}

.results_box ul {
	margin:0 240px 20px;
}

.results_box li {
	display:inline-block;
}

.results_box li a {
	color:#6cc321;
}

.results_box li.mr16 {
	margin-right:16px;
}


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

	ダイレクトリンクエリア

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

#directlinkArea {
	clear:both; padding:20px 0 50px 0;
}

#directlinkArea .oneline { margin:0 0 6px 0; }


/* 共通 */
#directlinkArea #c00,
#directlinkArea #c01,
#directlinkArea #c02,
#directlinkArea #c03 {
	width:396px;
	min-height:40px;
	margin:0;
	padding:0;
	float:left;
}

#directlinkArea #c00 { background-color: #006600; }
#directlinkArea #c01 { background:url(../../rank/img/c01.jpg) right top no-repeat #629ce5; }
#directlinkArea #c02 { background:url(../../rank/img/c02.jpg) right top no-repeat #ff981f; }
#directlinkArea #c03 { background:url(../../rank/img/c03.jpg) right top no-repeat #ab8b74; }

#directlinkArea h4 {
	line-height:36px;	/* mine-height40px - margin上下計4px */
	margin:2px 0 2px 10px;
	font-size:100%;
	color:#FFFFFF;
}

#directlinkArea ul {
	float:left;
	width:592px;	/* w604 - ml 12px */
	padding:0;
	margin-left:12px;
}

#directlinkArea ul li {
	float:left;
	display:block;
	margin:0;
	line-height:40px;
	padding-right:20px;
}

#directlinkArea ul li.ic_r01 {
	background:url(../../rank/img/r01_i.png) 0 2px no-repeat !important;
	padding-left:40px;
}
#directlinkArea ul li.ic_r02 {
	background:url(../../rank/img/r02_i.png) 0 2px no-repeat !important;
	padding-left:40px;
}

#directlinkArea ul li.ic_r03 {
	background:url(../../rank/img/r03spring_i.png) 0 2px no-repeat !important;
	padding-left:40px;
}

#directlinkArea #rankLinkTit ul li {
	background-image:none !important;
	font-weight:bold;
	padding-left:8px;
}

#directlinkArea #rankLinkTit ul li a {
	color:#006600;
}


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

	詳細ページ 共通

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

/* ----------------------------------------
	集計期間
---------------------------------------- */

p.ic_addup {
	background:url(../../rank/img/ic_addup.gif) no-repeat left top;
	padding:0 0 0 80px;
	min-height:64px;
	margin-top:10px;
}

p.ic_addup img {
	vertical-align:middle;
	margin-right:5px;
}

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

	詳細ページ

---------------------------------------- */
/* ----------------------------------------
	r00c01 r00c02 r00c03 共通
---------------------------------------- */

#r00c01,
#r00c02,
#r00c03 { }

#r00c01 .topAreaBox,
#r00c02 .topAreaBox,
#r00c03 .topAreaBox {
	width:1020px;
	border-bottom:2px dotted #AAAAAA;
	padding:0 0 10px 0;
	margin:0;
}


#r00c01 .oneline,
#r00c01 .oneline2,
#r00c02 .oneline,
#r00c03 .oneline {
	border-bottom: 2px dotted #AAAAAA;
	padding-top: 10px;
	padding-right: 0;
	padding-left: 10px;
	padding-bottom: 10px;
}

/* メダル */
#r00c01 h3,
#r00c02 h3,
#r00c03 h3 {
	float:left;
	width:67px;
	margin-right:20px;
}

/* 該当タイトルのリンク色 */
#r00c01 h4 a,
#r00c02 h4 a,
#r00c03 h4 a {
	color:#006600;
}

/* ----------------------------------------
	r00c01専用（地域ランキング基本）
---------------------------------------- */

#r00c01 .citycom {
	float:left;
	width:517px;
	margin-right:20px;
}

#r00c01 .oneline h4 {
	font-size:18px;
	margin:5px 0 3px 0;
}

#r00c01 h5 {
	font-size:100%;
	margin-bottom:3px;
}

#r00c01 .f_img{
	float:left;
	width:188px;
}

#r00c01 .p_img{
	float:right;
	width:188px;
}

#r00c01 .oneline2 h3 {
	text-align:center;
	font-size:100%;
}

#r00c01 .oneline2 h4 {
	font-size:100%;
	width:239px;
	float:left;
}

.rank11 {
	text-align: center;
	background-color: #fffa7c;
	font-weight: bold;
	border-radius: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.rank21 {
	text-align: center;
	background-color: #FEC97B;
	font-weight: bold;
	border-radius: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.rank31 {
	text-align: center;
	background-color: #ffb4bc;
	font-weight: bold;
	border-radius: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.rank41 {
	text-align: center;
	background-color: #bbdfff;
	font-weight: bold;
	border-radius: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* ----------------------------------------
	r00c02 r00c03 共通（特典・使い道ランキング基本）
---------------------------------------- */

#r00c02 .con-txt,
#r00c03 .con-txt {
	float:left;
	width:517px;
	font-weight: bold;
}

/* 内容タイトル */
#r00c02 h4,
#r00c03 h4 {
	font-size:18px;
	margin:5px 0 3px 0;
}

/* ----------------------------------------
	r00c02用（特典ランキング専用）
---------------------------------------- */

#r00c02 .con-imgArea {
	float:right;
	width:396px;
	position:relative;
}

#r00c02 .con-img-img {
	position:relative;
}

#r00c02 .con-img-txt {
	text-align:right;
	padding:2px 5px;
	position:absolute;
	bottom:0;
	right:0;
	font-size:14px;	/* サイズ固定 */
	color:#FFFFFF;
}
#r00c02 .con-img-txt span {
	padding-right:2px;
	font-size:12px;	/* サイズ固定 */
}

#r00c02 .bgcf01 { background-color:#CC9966; }	/* 米・パン */
#r00c02 .bgcf02 {  }				/* 野菜・果物 */
#r00c02 .bgcf03 {  }				/* 水産物 */
#r00c02 .bgcf04 {  }				/* 肉類 */
#r00c02 .bgcf05 { background-color:#669999; }	/* 麺類 */
#r00c02 .bgcf06 { background-color:#AA9966; }	/* 加工食品 */
#r00c02 .bgcf07 { background-color:#AA9966; }	/* 料理・食品 */
#r00c02 .bgcf08 { background-color:#AA9966; }	/* 菓子・スイーツ */
#r00c02 .bgcf09 { background-color:#FFAA00; }	/* 飲み物 */
#r00c02 .bgcf10 {  }				/* 酒類 */
#r00c02 .bgcf11 {  }				/* セット・詰め合わせ */
#r00c02 .bgcf12 { background-color:#BB9966; }	/* 雑貨・日用品 */
#r00c02 .bgcf13 { background-color:#AA9966; }	/* 民芸・工芸 */
#r00c02 .bgcf14 { background-color:#66CCCC; }	/* 宿泊券・チケット */
#r00c02 .bgcf15 { background-color:#3399CC; }	/* その他 */

/* ----------------------------------------
	r00c03用（使い道ランキング専用）
---------------------------------------- */

#r00c03 .con-img {
	float:right;
	width:396px;
	position:relative;
}


/* ----------------------------------------
	実績ランキング
---------------------------------------- */
#r00c01.results_rank .column3_5 {
	float:none;
	width:1020px;
}

#r00c01.results_rank .column3_5.colrsp {
	margin-right:0;
}

#r00c01.results_rank .column3_5.colrsp .txt {
	float:left;
	width:758px;
}

#r00c01.results_rank .column3_5.colrsp .btn {
	float:right;
	margin-top:30px;
}

#r00c01.results_rank .column3_5.colrsp .info a {
	color:#006600;
}

#r00c01.results_rank .oneline .oneline_inner p,
#r00c01.results_rank .oneline .oneline_inner div {
	float:left;
}

#r00c01.results_rank .oneline .oneline_inner .rank {
	width:90px;
}

#r00c01.results_rank .oneline .oneline_inner div {
	width:900px;
}

#r00c01.results_rank .oneline .oneline_inner h3 {
	margin-bottom:3px;
	float:none;
	width:500px;
	margin-right:0;
}

#r00c01.results_rank .oneline .oneline_inner h3 a {
	color:#006600;
	font-weight:bold;
}

#r00c01.results_rank .oneline_inner .donation li {
	display:inline-block;
	font-weight:bold;
	margin-bottom:5px;
}

#r00c01.results_rank .oneline_inner .donation .mr10 {
	margin-right:10px;
}

#r00c01.results_rank .oneline .pic {
	margin:5px 160px 0;
}

#r00c01.results_rank .oneline .pic li {
	display:inline-block;
}

#r00c01.results_rank .oneline .pic li img {
	width:320px;
	height:auto;
}

#r00c01.results_rank .oneline .pic .mr20 {
	margin-right:20px;
}

#r00c01 .oneline2 .donation02 {
	clear:left;
	margin-left:48px;
	font-size:95%;
}