@charset "utf-8";

#contents	{
	width: 766px;
	padding-left: 10px;
}

.pat30		{
	padding-top: 30px;
}


.mal35		{
	margin-left: 35px;
}


.mat15		{ 
	margin-top: 15px;
}

.mar25		{
	margin-top: 25px;
}

.mat30		{ 
	margin-top: 30px;
}
.mat40		{ 
	padding-top: 50px;
}

.mab10		{ 
	padding-bottom: 10px;
}

/* ====================================================================================================
   index
==================================================================================================== */

.rank-tab{ margin: 30px 0; border-bottom: 5px solid #57b141; }
.rank-tab li { float: left; width: 170px; margin-right: 14px; padding: 12px 0 5px; cursor: pointer; font-size: 117%; background: #eee; color: #6d4c41; font-weight: bold; text-align: center; -webkit-border-top-left-radius: 10px;  -webkit-border-top-right-radius: 10px;　-moz-border-radius-topleft: 10px;　-moz-border-radius-topright: 10px;　}
.rank-tab li:first-child{ margin-left: 20px; }
.rank-tab li:last-child{ margin-right: 0px; }
.rank-tab li:hover { background: #57b141; color: #fff; }
.rank-tab li.active { background: #57b141; color: #fff; }
.rank-content { clear: both; display: none; }
div.active { display: block;}


.rank-content #animal #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #astronomical #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #camp #lead .left	{
	width: 455px;
}

.rank-content #cherry #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #cosmos #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #cyclamen #lead dl	{
	width: 420px;
}

.rank-content #expe #lead .left	{
	width: 305px;
}

.rank-content #fishing #lead .left	{
	width: 455px;
}

.rank-content #forest #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #hasu #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #hiking #lead dl	{
	width: 480px;
}

.rank-content #momiji #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #powerspot #lead dl	{
	width: 425px;
}

.rank-content #setsubun #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #shiba #lead dl	{
	width: 470px;
	padding-top: 21px;
}


.rank-content #tsutsuji #lead dl	{
	width: 470px;
	padding-top: 21px;
}

.rank-content #ume #lead dl	{
	width: 470px;
	padding-top: 21px;
}


.rank-content #water #lead dl	{
	width: 470px;
	padding-top: 21px;
}


.list	{
	margin-bottom: 25px;
	padding-left: 2px;
	padding-bottom: 24px;
}

.list dl	{
	float: left;
	width: 550px;
}

.list dl dt p	{
	width: 400px;
	line-height: 35px;
	font-size: 1.5em;
}

.list dl dt p a {
	color: #333;
	text-decoration: none;
}

.list dl dt p strong	{
	color: #389323;
	/*font-size: 1.5em;*/
}

.list dl dd	{
	padding-top: 15px;
	padding-left: 10px;
}

.list .right img	{
	max-width: 200px;
}

#lead dl	{
	width: 315px;
	padding-top: 21px;
}
#lead dl dd	{
	padding-top: 20px;
}


.rankBox h3		{
	margin-bottom: 33px;
}

.rankBox		{ 
	margin-bottom: 35px;
}

.rankBox .leadBox		{ 
	padding-left: 12px;
}

.rankBox .leadBox .leadLeft		{
	float: left;
	width: 520px;
}

.rankBox .leadBox .leadLeft dt		{
	margin-bottom: 20px;
	font-size: 202%;
}
.rankBox .leadBox .leadLeft .rankIcon li		{
	float: left;
	margin: 25px 2px 0 0;
}


.rankBox .leadBox .leadRight		{
	float: right;
	
}

.rankBox .leadBox .detail		{
	margin-top: 9px;
	text-align: right;
	
}

.lowList	{
	margin-bottom: 30px;
}

.rankBoxLow		{ 
	width: 364px;
	padding: 30px 0;
	border-bottom: 1px dotted #000;
}

.rankBoxLow .rankTxt		{
	float: left;
	width: 200px;
	padding: 0 0 0 7px;
}

.rankBoxLow .rankTxt .left	{
	margin-right: 10px;
}

.rankBoxLow .rankTxt dl		{
	float: left;
	width: 155px;
}

.rankBoxLow .rankTxt dd		{
	font-size: 151%;
}

.rankBoxLow .rankTxt ul		{
	margin-top: 15px;
}

.rankBoxLow .rankTxt li		{
	float: left;
	margin-right: 2px;
}

.rankBoxLow .leadRight		{
	float: right;
	
}

.rankBoxLow .detail		{
	margin-top: 9px;
	text-align: right;
	
}


/* ====================================================================================================
   クリアフィックス
==================================================================================================== */
.list:after,
.flower_item:after,
.nature_item:after,
.knowledge_content:after	{
	content: ".";
	display: block;
	clear: both; 
	height: 0;
	visibility: hidden;
}

.list,
.flower_item,
.nature_item,
.knowledge_content	{
	display: block;
	#display: inline-block;
}


/* ====================================================================================================
   640px以下のメディアクエリ
==================================================================================================== */

@media screen and (max-width: 640px) {
	

/* ====================================================================================================
   index
==================================================================================================== */
.rank-tab{ margin: 4.68% 0; border-bottom: 5px solid #57b141; }
.rank-tab li { float: left; width: 22.65%; margin-right: 1.09%; padding: 5px 0 5px; font-size: 100%; background: #eee; color: #6d4c41; font-weight: bold; text-align: center; -webkit-border-top-left-radius: 10px;  -webkit-border-top-right-radius: 10px;　-moz-border-radius-topleft: 10px;　-moz-border-radius-topright: 10px;　}
.rank-tab li:first-child{ margin-left: 3.125%; }
.rank-tab li:last-child{ margin-right: 0px; }
.rank-tab li:hover { background: #57b141; color: #fff; }
.rank-tab li.active { background: #57b141; color: #fff; }
.rank-content { clear: both; display: none; }
div.active { display: block;}



h3		{
	padding: 0 0 3.9% 3.12%;
	margin: 0;

}
.rankBox h3		{
	margin-bottom: 3.125% !important;
}

.rankBox .leadBox		{
	width: 93.75%;
	margin: 0 auto;
	padding: 0;

}

.rankBox .leadBox .leadLeft		{
	float: none;
	width: 100%;
}

.rankBox .leadBox .leadLeft .rankIcon li		{
	float: left;
	margin: 25px 2px 0 0;
}


.rankBox .leadBox .leadRight		{
	float: none;
	
}

.rankBox .leadBox .photo{
	width: 50%;
	margin: 0 auto;
}


.rankBox .leadBox .detail img {
	width: auto;
}
.rankBox .leadBox .detailBtn img {
	width: auto;
}

.lowList	{
	width: 93.75%;
	margin: 0 auto;
	padding: 0;
}

.rankBoxLow		{
	width: 45%;
	padding: 10px 5% 10px 0;
	border-bottom: 1px dotted #000;
	
}

.rankBoxLow .rankTxt		{
	float: none;
	width: 100%;
	padding: 0 0 0 7px;

}

.rankBoxLow .rankTxt .left	{
	margin-right: 10px;
}

.rankBoxLow .rankTxt dl		{
	float: left;
	width: 100%;
}

.rankBoxLow .rankTxt dd		{
	font-size: 151%;
}

.rankBoxLow .rankTxt ul		{
	margin-top: 15px;
}

.rankBoxLow .rankTxt li		{
	float: left;
	margin-right: 2px;
}

.rankBoxLow .leadRight		{
	float: none;
}

.rankBoxLow .detail		{
	margin-top: 9px;
	text-align: right;
	float: none;
}

.rankBoxLow .detailBtn		{
	margin-top: 9px;
	text-align: right;
	float: none;
}

.rankBoxLow .detail img	{
	width: auto;
}

.rankBoxLow .detailBtn img	{
	width: auto;
}



#lead{
	padding: 0;
}
#lead .left{
	float: none !important;
	padding: 0;
	
}
#lead .right{
	float: none !important;
	padding:0;
	margin: 2.34% 0;
	
}
#lead dl	{
	width: 93.75%;
	margin: 0 auto;
	padding-top: 21px;
}
.list dl	{
	float: none;
	width: 100%;
	padding: 2.34% 0;
}

.list dl dt span	{
	float: none;
}
.list dl dt{
	width: 100%;
}
.list dl dt p	{
	float: none;
	width: 90%;
	
}

.list dl dd	{
	padding-top: 15px;
	padding-left: 0;
	width: 100%;

}
.list dl .detailBtn img{
	width: 15.16%;
	margin: 0 auto;
}
.list dl .right{
	float: none;
	width: 60%;
	margin: 0 auto !important;
	margin-bottom: 3.125%;

}
.list dl .right img{
	max-width: 100%;
}

/*ランキング　make*/

.rank-content #beef #lead dt {
	width: 44.33%;
	margin: 0 auto;
}

.rank-content #beef #lead .right {
	width: 71.66%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #beef #column dt{
	width: 37%;
	margin: 0 auto;
}


.rank-content #blueberry #lead dt {
	width: 40.5%;
	margin: 0 auto;
}

.rank-content #blueberry #lead .right {
	width: 65.33%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #chicken #lead dt {
	width: 38%;
	margin: 0 auto;
}

.rank-content #chicken #lead .right {
	width: 71.66%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}
.rank-content #chicken .knowledge_content .left	{
	float: none;
	width: 100%;
	padding-top: 0;
}
.rank-content #chicken .knowledge_content .right	{
	float: none;
	width: 49%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #fish #lead dt {
	width: 51.16%;
	margin: 0 auto;
}

.rank-content #fish #lead .right {
	width: 71.66%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #goheimochi #lead dt{
	width: 26.83%;
	margin: 0 auto;
	
}

.rank-content #goheimochi #lead .right{
	width: 65.33%;
	margin: 0 auto;
	margin-bottom: 3.125%;
	
}

.rank-content #souvenir #lead dt {
	width: 45.66%;
	margin: 0 auto;
}

.rank-content #souvenir #lead .right {
	width: 71.5%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #station #lead dt {
	width: 41.66%;
	margin: 0 auto;
}

.rank-content #station #lead .right {
	width: 71.5%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}

.rank-content #vegetable #lead dt {
	width: 52.16%;
	margin: 0 auto;
}

.rank-content #vegetable #lead .right {
	width: 71.5%;
	margin: 0 auto;
	margin-bottom: 2.34%;
}


/*ランキング　experience*/

.rank-content #animal #lead dl{
	width: 100% !important;
}

.rank-content #animal #lead dt{
	width: 77.33%;
	margin: 0 auto;
}

.rank-content #animal #lead .right{
	width:43.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}
.rank-content #astronomical #lead dl{
	width: 100% !important;
}

.rank-content #astronomical #lead dt{
	width: 67.5%;
	margin: 0 auto;
}

.rank-content #astronomical #lead .right{
	width:43.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #camp #lead .left	{
	float: none !important;
	width: 100% !important;
}

.rank-content #camp #lead .right{
	float: none;
	width:47.5% !important;
	margin: 0 auto;
	margin-bottom: 3.125%;
}
.rank-content #cherry #lead dl{
	width: 100% !important;
}

.rank-content #cherry #lead dt{
	width: 26.83%;
	margin: 0 auto;
}

.rank-content #cherry #lead .right{
	width:43.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #cosmos #lead dl{
	width: 100% !important;
}

.rank-content #cosmos #lead dt{
	width: 44.5%;
	margin: 0 auto;
}

.rank-content #cosmos #lead .right{
	width:43.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}


.rank-content #cyclamen #lead dl	{
	width: 100% !important;
}

.rank-content #cyclamen #lead dt{
	width: 49.83%;
	margin: 0 auto;
}

.rank-content #cyclamen #lead .right{
	width:54.66%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}


.rank-content #expe #lead dl	{
	width: 100% !important;
}
.rank-content #expe #lead dt{
	width: 50.5%;
	margin: 0 auto;
}

.rank-content #expe #lead .right{
	width: 71.5%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}
.rank-content #expe #lead .left	{
	width: 100%;
}


.rank-content #fishing #lead .left	{
	width: 100% !important;
}

.rank-content #fishing #lead .right{
	width:48.5%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #forest #lead dl	{
	width: 100% !important;
}

.rank-content #forest #lead dt{
	width: 65%;
	margin: 0 auto;
}

.rank-content #forest #lead .right{
	width: 43.33%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #hasu #lead dl	{
	width: 100% !important;
}


.rank-content #hasu #lead dt{
	width: 32.5%;
	margin: 0 auto;
}

.rank-content #hasu #lead .right{
	width: 46.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #hiking #lead dl	{
	width: 100% !important;
}

.rank-content #hiking #lead dt{
	width: 79.83%;
	margin: 0 auto;
}

.rank-content #hiking #lead .right{
	width:43.33%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #momiji #lead dl	{
	width: 100% !important;
}


.rank-content #momiji #lead dt{
	width: 34.66%;
	margin: 0 auto;
}

.rank-content #momiji #lead .right{
	width: 43.16%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #powerspot #lead dl	{
	width: 100% !important;
}

.rank-content #powerspot #lead dt{
	width: 70.33%;
	margin: 0 auto;
}

.rank-content #powerspot #lead .right{
	width:48.5%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}


.rank-content #setsubun #lead dl	{
	width: 100% !important;
}

.rank-content #setsubun #lead dt{
	width: 42.5%;
	margin: 0 auto;
}

.rank-content #setsubun #lead .right{
	width: 36.66%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #shiba #lead dl	{
	width: 100% !important;
}

.rank-content #shiba #lead dt{
	width: 34.33%;
	margin: 0 auto;
}

.rank-content #shiba #lead .right{
	width: 42.83%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

.rank-content #tsutsuji #lead dl	{
	width: 100% !important;
}
.rank-content #tsutsuji #lead dt{
	width: 38.66%;
	margin: 0 auto;
}

.rank-content #tsutsuji #lead .right{
	width: 43%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}


.rank-content #ume #lead dl	{
	width: 100% !important;
}

.rank-content #ume #lead dt{
	width: 26.66%;
	margin: 0 auto;
}

.rank-content #ume #lead .right{
	width: 43.33%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}


.rank-content #water #lead dl	{
	width: 100% !important;
}

.rank-content #water #lead dt{
	width: 74.66%;
	margin: 0 auto;
}

.rank-content #water #lead .right{
	width: 43.33%;
	margin: 0 auto;
	margin-bottom: 3.125%;
}

}




/* ====================================================================================================
   360px以下のメディアクエリ
==================================================================================================== */

@media screen and (max-width: 390px) {
	.rank-tab li { font-size:63% !important; }
}