@charset "utf-8";
/* ------------------------------------------------------------ common */

.date_info { padding: 5px 0 0;}
.date_info span.date { font-size: 13px;}
.date_info p { float: right; text-align: right; } 

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

#firstview { text-align: center; background: url(../images/images_cocoas/fv.jpg) center center no-repeat; padding: 97px 0 80px;}
#firstview h2 { color: #fff; font-size: 22px; line-height: 150%;}
#firstview h2 img { padding: 0 0 25px;}


#main h2		{ padding: 40px 0 10px; font-size: 24px; font-weight: bold; color: #525252;}
.list #recent h2 { padding: 0 0 20px; font-size: 22px; padding: 25px 0 0;}

#topentry 		{ position: relative; margin: 0 0 40px;}
#topentry img.ranking { position: absolute; top: 0; left: 10px;}
#topentry .writer { float: right; }
#topentry a img 	{ width: 100%; height: auto; }
#topentry div 	{ position: absolute; bottom: 0; left: 0; right: 0; background: url(../images/common/opc_b.png); color: #fff; padding: 15px 3%; }
#topentry div a { color: #fff; }
#topentry div p { padding: 0 0 5px; }

#main .block .flL 			{ width: 47%; text-align: center; background: #fff; }
#main .block .flL div		{ padding: 17px 15px; text-align: left;} 
#main .block .flL img		{ max-width: 272px; height: auto; margin: 0 auto;}
/* #main .block .flL p			{ padding: 0 0 15px; } */
#main .block .flL h3 a 		{ font-weight: bold; font-size: 20px; line-height: 155%; }
#main .block .flL p.writer { padding: 20px 0 0;}
#main .block .flR 			{ width: 47%; padding: 0 3%; background: #fafafa; }
#main .block .flR img 		{ float: left; padding: 0 3% 0 0; width: 22%; height: auto; } 
#main .block .flR .box 		{ float: right; width: 72%; padding: 0; }
#main .block .flR li		{ padding: 15px 0; border-top: 1px solid #e5e5e5; }
#main .block .flR li:first-child { border: none; }
#main .block .flR h3 a 		{ font-weight: bold; }
#main .block .flR .writer { float: right; }
#main .block .btn			{ padding: 30px 0 0; }
#main .block .clr_bg { background: #fafafa; }

#main .main_news h2 { padding: 20px 0 20px 45px; }
#main .main_news.rank_title h2 { background: url(../images/common/ranking.png?v=180929) no-repeat left center; }
#main .main_news.new_title h2 { background: url(../images/common/new_title.png?v=180929) no-repeat left center; }

#ranking_bottom 					{ width: 102%; margin-left: -2%; }
#ranking_bottom li.shadow 				{ width: 31%; margin: 0 0 2% 2%; float: left; position: relative;}
#ranking_bottom li.shadow a img 			{ width: 100%; height: auto; }
#ranking_bottom li.shadow img.ranking { position: absolute; top: 0; left: 10px;}
#ranking_bottom li.shadow .box 			{ padding: 15px 10px; }
#ranking_bottom li.shadow .box small.cate 		{ margin: 10px 0; display: inline-block; *display: inline; *zoom: 1; padding: 0 10px;}
#ranking_bottom li.shadow .box h3 		{ font-size: 14px; height: 70px; overflow: hidden; padding: 5px 0 0 0;}
#ranking_bottom li.shadow  h3 a				{ font-weight: bold;}

/* ------------------------------------------------------------ tablet */
@media only screen and (max-width:780px){

#main h2				{ font-size: 20px; }
#main .block .flL h3 a 	{ font-size: 16px; }
#main .block .flR h3 a	{ font-size: 14px; line-height: 150%; }

}


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

#firstview { text-align: center; background: url(../images/images_cocoas/fv_sp.jpg) center center no-repeat; padding: 23% 0 23%; background-size: cover;}
#firstview h2 { color: #fff; font-size: 16px;}
#firstview h2 img { width: 130px; height: auto; padding: 0 0 10px;}

#main .block .flL { width: 100%; }
#main .block .flR { width: 94%; }
#main .block .flL p.writer { padding: 10px 0 0;}

#topentry div 	{ position: inherit; background: url(../images/common/opc_b.png); color: #fff; padding: 15px 3%; }
#topentry .writer { float: none; display: block; padding: 5px 0 0;}
#topentry img.ranking { position: absolute; top: 0; left: 10px; width: 30px; height: auto;}

#main .main_news h2 { padding: 10px 0 10px 35px;}
#main .main_news.rank_title h2 { background: url(../images/common/ranking.png) no-repeat left center; background-size: 25px auto; }
#main .main_news.new_title h2 { background: url(../images/common/new_title.png) no-repeat left center; background-size: 25px auto; }

#ranking_bottom 					{ width: 100%; margin-left: 0; }
#ranking_bottom li.shadow 				{ width: 100%; margin: 0 0 15px; float: none; position: relative;}
#ranking_bottom li.shadow a img 			{ width: 100%; height: auto; }
#ranking_bottom li.shadow img.ranking { position: absolute; top: 0; left: 10px;}
#ranking_bottom li.shadow .box 			{ padding: 10px; }
#ranking_bottom li.shadow .box small.cate 		{ margin: 10px 0; display: inline-block; *display: inline; *zoom: 1; padding: 0 10px;}
#ranking_bottom li.shadow .box h3 		{ font-size: 14px; height: auto; overflow: none; }


}