@charset "utf-8";


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	file name : popular.css

 : :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


/* ********************************************************************************
 * CLEARFIX
 * ******************************************************************************** */

body#popular ul#popularNavi:after,
body#popular ul#popularNavi li:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
body#popular ul#popularNavi,
body#popular ul#popularNavi li {
	display: inline-block;
}
* html body#popular ul#popularNavi,
* html body#popular ul#popularNavi li {
	height: 1%;
}
body#popular ul#popularNavi,
body#popular ul#popularNavi li {
	display: block;
}

/* ********************************************************************************
 * ■海遊館のにんきもの：トップ
 * file path : /encyclopedia/popular/index.html
 * body id name : body#popula
 * ******************************************************************************** */

/* ul#popularNavi
------------------------------------------------------------*/
body#popular ul#popularNavi {
	width: 696px;
	margin: 25px 0 0 -32px;
}
body#popular ul#popularNavi li {
	display: inline;
	float: left;
	width: 316px;
	margin-left: 32px;
	margin-bottom: 20px;
}
/* dl */
body#popular ul#popularNavi li dl {
	float: right;
	width: 174px;
}
body#popular ul#popularNavi li dl dt {
	margin-bottom: 5px;
	line-height: 1.1;
	color: #009be5;
}
body#popular ul#popularNavi li dl dd {
	line-height: 1.5;
}
body#popular ul#popularNavi li dl dd a {
	color: #4D4D4D;
}

/* p.thumbnail */
body#popular ul#popularNavi li p.thumbnail {
	float: left;
	width: 122px;
}
/* p.thumbnail a:hover img */
body#popular ul#popularNavi li p.thumbnail a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}

/* li.on p.thumbnail a img */
body#popular ul#popularNavi li.on p.thumbnail a img {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}
/* li.on dl dd a */
body#popular ul#popularNavi li.on dl dd a {
	color: #4D4D4D;
	text-decoration: none;
}


/* .list_box
------------------------------------------------------------*/
.list_box {
	width: 664px;
	height: 102px;
	margin-top: 30px;
	line-height: 1.5;
	color: #5e5e5e;
}
.list_box a {
	line-height: 1.4;
	color: #4d4d4d;
}

.list_l  {
	float: left;
	width: 314px;
	margin-right: 35px;
}

.list_r  {
	float: left;
	width: 314px;
}
img.main_img {
	float: left;
	width: 122px;
	height: 102px;
	margin-right: 20px;
}

div.description {
	float: right;
	width: 172px;
	height: 102px;
}

.main_title {
	width: 172px;
	height: 25px;
	margin-bottom: 4px;
}

.text_explain {
	width: 168px;
	height: 85px;
}



/* ********************************************************************************
 * ■海遊館のにんきもの　各いきもの
 * file path : /encyclopedia/popular/xxx/
 * ******************************************************************************** */

/* .list_body
------------------------------------------------------------*/
.list_body {
	width: 664px;
	line-height: 1.5;
	color: #5e5e5e;
}

.list_body p	{
	margin-bottom: 15px;
}

.list_title  {
	float: left;
	margin-bottom: 5px;
}

.list_header_text  {
	float: left;
	width: 650px;
	margin-bottom: 10px;
}
.list_main_img {
	float: left;
	margin-bottom: 20px;
}

.list_sub_img {
	float: right;
	margin-bottom: 10px;
}

.list_main_text_w434 {
	float: left;
	width: 434px;
	margin-right: 30px;
}

.list_main_text_w664 {
	float: left;
	width: 664px;
}

.list_footer {
	margin-top: 30px;
	float: left;
	width: 664px;
}

.footer_title  {
	border-bottom: 1px dotted #bbbbbb;
}

.list_footer ul {
	margin: 14px 5px 0px 5px;
	width: 664px;
}

.list_footer li {
	float: left;
}

.list_footer li .center {
	margin-left: 44px;
	margin-right: 43px;
}