@charset "utf-8";
/* ===================================================================
CSS information

file name : top.css
=================================================================== */

/*----------------------------------------------------
　トップページ
----------------------------------------------------*/
/***** スクリーン *****/
#textScreen{
	width:680px;
	height:253px;
	overflow:hidden;
	*zoom:1;
	margin:0 0 20px 0;
}
#textScreen .inner{
	width:680px;
	height:253px;
	background:#2c2c2c;
	color:#fff;
	font-size:14px;
	line-height:1.3;
	font-weight:bold;
	position:relative;
}
#textScreen .inner #imageList{
	width:380px;
	height:253px;
	overflow:hidden;
	*zoom:1
	position:relative;
}
#textScreen .inner #imageList li{
	display:none;
	width:380px;
	height:253px;
	line-height:253px;
	overflow:hidden;
	*zoom:1;
	position:absolute;
	left:0;
	top:0;
}
#textScreen .inner #imageList li.on{
	display:block;
}
#textScreen .inner #imageList li a{
	display:block;
	width:380px;
	height:253px;
	position:relative;
	text-align:center;
	cursor:pointer;
}
#textScreen .inner #imageList li img{
	width:380px;
	height:auto;
}
* html body #textScreen .inner #imageList li img{
	width: expression(document.body.clientWidth > 380? "380px" : "auto");
}
#textScreen .inner #textList{
	width:317px;
	height:260px;
	position:absolute;
	right:0px;
	top:5px;
}
#textScreen .inner #textList li{
	display:block;
	width:317px;
	height:41px;
	position:relative;
	overflow:visible;
	*float:left;
}
#textScreen .inner #textList li a{
	position:absolute;
	left:0;
	top:-3px;
	display:block;
	width:292px;
	height:40px;
	color:#fff;
	padding:7px 0 0 25px;
	cursor:pointer;
	text-decoration:none;
	*height:39px;
	*padding:8px 0 0 25px;
}
#textScreen .inner #textList li a span{
	display:block;
}
#textScreen .inner #textList li a .title{
	text-shadow:1px 1px 1px #000;
}
#textScreen .inner #textList li.on a,
#textScreen .inner #textList li a:hover{
	background:url(/nng/images/n/2014/top/screen_text_on.png) left top no-repeat;
	color:#333;
}
* html body #textScreen .inner #textList li.on a{
	background:url(/nng/images/n/2014/top/screen_text_on.gif) left top no-repeat;
}
* html body #textScreen .inner #textList li a:hover{
	background:url(/nng/images/n/2014/top/screen_text_on.gif) left top no-repeat;
}
#textScreen .inner #textList li.on a .title,
#textScreen .inner #textList li a:hover .title{
	text-shadow:none;
}
#textScreen .inner #textList li a .category{
	display:block;
	font-size:11px;
	line-height:1.3;
	color:#ffdb00;
}
#textScreen .inner #textList li.on a .category,
#textScreen .inner #textList li a:hover .category{
	color:#333;
}


/***** コンテンツ大枠 *****/
.topContentsWrap{
	width:680px;
	overflow:hidden;
}
.topContentsWrap .topContentsLeft{
	float:left;
	width:185px;
}
.topContentsWrap .topContentsRight{
	float:right;
	width:475px;
}

/***** コンテンツ部 左 *****/

.topContentsLeft h2{
	margin:0 0 3px 0;
}

/* 動画トピックス */
.topLeftMovie{
	display: block;
	background: #fff;
	margin: 0 0 15px 0;
	border-top: 1px dotted #bfbfbf;
}

/* ジャンルで探す */
.topContentsLeft .topLeftSearch{
	display:block;
	background:#fff;
	margin:0 0 15px 0;
	border-top:1px dotted #bfbfbf;
}
.topContentsLeft .category li{
	position:relative;
}
.topContentsLeft .category li a{
	display:block;
	width:170px;
	height:34px;
	line-height:34px;
	font-weight:bold;
	text-decoration:none;
	color:#333;
	border-bottom:1px solid #e7e7e7;
	padding:0 0 0 10px;
	background:url(/nng/images/n/2013/top/left_mark_link.gif) right top no-repeat;
}
.topContentsLeft .category li.life a{
	border-left:5px solid #a93333;
}
.topContentsLeft .category li.history a{
	border-left:5px solid #d69a34;
}
.topContentsLeft .category li.paleontology a{
	border-left:5px solid #a39933;
}
.topContentsLeft .category li.landscape a{
	border-left:5px solid #518833;
}
.topContentsLeft .category li.environment a{
	border-left:5px solid #34c5bd;
}
.topContentsLeft .category li.exploration a{
	border-left:5px solid #3597d5;
}
.topContentsLeft .category li.space a{
	border-left:5px solid #4164e0;
}
.topContentsLeft .category li.science a{
	border-left:5px solid #9872bf;
}
.topContentsLeft .category li.culture a{
	border-left:5px solid #e57eec;
}
.topContentsLeft .category li.area a{
	border-left:5px solid #d55982;
}
.topContentsLeft .category li.movie a{
	border-left:5px solid #76252e;
	border-bottom:none;
}
.topContentsLeft .category li:hover a,
.topContentsLeft .category li a:hover{
	background:url(/nng/images/n/2013/top/left_mark_link.gif) right -34px no-repeat #ffdb00;
}
.topContentsLeft .category li ul.sub{
	position:absolute;
	left:185px;
	top:-1px;
	display:block;
	width:170px;
	background:#ffdb00;
	padding:3px 0;
	border-right:1px solid #666;
	border-bottom:1px solid #666;
	border-top:1px solid #e7e7e7;
	display:none;
}
.topContentsLeft .category li:hover ul.sub{
	display:block;
}
.topContentsLeft .category li ul.sub li a,
.topContentsLeft .category li.first ul.sub li a,
.topContentsLeft .category li.last ul.sub li a{
	background:url(/nng/images/n/2012/top/leftnavi_sub_bg.gif) 11px center no-repeat;
	border:none;
	width:159px;
	height:auto;
	line-height:1.4;
	padding:3px 0 3px 21px;
	color:#373737;
}
.topContentsLeft .category li ul.sub li a:hover{
	color:#fff;
}

/* 注目のテーマ特集 */
.topLeftThema{
	display:block;
	margin:0 0 15px 0;
	border-top:1px dotted #bfbfbf;
}
.topLeftThema li a{
	display:block;
	width:185px;
	height:44px;
	line-height:44px;
	background:#fff;
	font-weight:bold;
	border-bottom:1px dotted #bfbfbf;
	cursor:pointer;
	overflow:hidden;
	vertical-align:middle;
	*zoom:1;
}
.topLeftThema li a .image{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
}
.topLeftThema li a .image img{
	vertical-align:middle;
}
.topLeftThema li a .text{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:115px;
	line-height:1.3;
	vertical-align:middle;
	word-wrap:break-word;
	overflow:hidden;
}
.topLeftThema .listLink{
	display:block;
	overflow:hidden;
	margin:3px 2px 0 0;
}
.topLeftThema .listLink a{
	float:right;
	font-weight:bold;
	background:url(/nng/images/n/2013/common/mark_red.gif) left center no-repeat;
	padding:0 0 0 10px;
}

/* リンク集 */
.topLeftBanner{
	display:block;
	margin:0 0 15px 0;
}
.topLeftBanner li{
	display:block;
	margin:0 0 5px 0;
}
.topLeftBanner li a:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

/***** コンテンツ部 右 *****/
.topContentsRight span.new,
.topContentsRight span.new a{
	color:#f00;
	font-size:11px;
	font-weight:bold;
}
.topContentsRight .titleWrap{
	position:relative;
	margin:0 0 3px 0;
}
.topContentsRight .titleWrap .yellowBorder{
	display:inline-block;
	*display:inline;
	*zoom:1;
}
.topContentsRight .titleWrap .text{
	display:inline-block;
	*display:inline;
	*zoom:1;
	font-size:11px;
	color:#505050;
	margin:0 0 0 5px;
}
.topContentsRight .titleWrap .linkMore{
	position:absolute;
	right:0;
	top:3px;
	text-align:right;
}
.topContentsRight .titleWrap .linkMore a{
	font-weight:bold;
	background:url(/nng/images/n/2013/common/mark_red.gif) left center no-repeat;
	padding:0 0 0 10px;
}
.topContentsRight .ctWrap{
	background:#fff;
	overflow:hidden;
}
.topContentsRight .itemWrap{
	overflow:hidden;
}

/* ニュース枠 */
.newsBox{
	margin:0 0 40px 0;
	padding:0 0 1px 0;
	width:475px;
	overflow:hidden;
}
ul.imgType{
	width:500px;
	margin:0 0 30px 0;
	overflow:hidden;
}
ul.imgType li{
	float:left;
	width:230px;
	margin:0 15px 0 0;
}
ul.imgType li .image{
	position:relative;
	margin:0 0 10px 0;
}
ul.imgType li .image a{
	display:block;
	width:230px;
	height:153px;
	text-align:center;
	overflow:hidden;
}
ul.imgType li .image a img{
	width:230px;
}
ul.imgType li .image a:after{
	content:"　";
	background:url(/nng/images/n/2014/top/icon_triangle_w.png) left top no-repeat;
	width:30px;
	height:14px;
	overflow:hidden;
	position:absolute;
	left:20px;
	bottom:0;
}
ul.imgType li h3{
	font-size:16px;
	line-height:1.3;
	margin:0 10px 5px 10px;
}
ul.imgType li .summary{
	font-size:13px;
	line-height:1.3;
	margin:0 10px;
}
ul.textType{
	display:block;
	margin:0 10px 15px 10px;
}
ul.textType li{
	display:block;
	margin:0 0 10px 0;
}
ul.textType li a{
	background: url(/nng/images/n/2013/common/mark_gray.gif) 2px 5px no-repeat;
	display:block;
	padding:0 0 0 15px;
	font-size:15px;
	line-height:1.3;
}


/* ニュース枠 枠線あり上書き定義 */
.newsBoxBorder{
	margin:0 0 30px 0;
}
.newsBoxBorder .titleWrap{
	background:#ffe129;
	margin-bottom:0;
	padding:7px 10px 5px 10px;
}
.newsBoxBorder .titleWrap .yellowBorder{
	background:none;
	padding:0;
}
.newsBoxBorder .titleWrap .linkMore{
	position:absolute;
	right:10px;
	top:9px;
}
.newsBoxBorder .titleWrap .linkMore a{
	color:#333;
}
.newsBoxBorder .ctWrap{
	width:473px;
	border:1px solid #ffe129;
}
.newsBoxBorder ul.imgType li{
	float:left;
	width:223px;
	margin:8px 0 0 9px;
}
.newsBoxBorder ul.imgType li .image{
	position:relative;
	margin:0 0 10px 0;
}
.newsBoxBorder ul.imgType li .image a{
	display:block;
	width:223px;
	height:150px;
	text-align:center;
	overflow:hidden;
}
.newsBoxBorder ul.imgType li .image a img{
	width:223px;
}
.newsBoxBorder ul.imgType li h3{
	margin:0 5px 5px 5px;
}
.newsBoxBorder ul.imgType li .summary{
	margin:0 5px;
}


/* 特設サイト誘導バナー */
.spBanner{
	margin:0 0 30px 0;
	text-align:center;
}
.spBanner a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}


/* フォト枠 */
.photoBox{
	margin:0 0 30px 0;
	width:475px;
	overflow:hidden;
}
ul.photoList{
	width:500px;
	overflow:hidden;
}
ul.photoList li{
	float:left;
	width:148px;
	height:140px;
	margin:0 15px 0 0;
	background:#fff;
}
ul.photoList li .image a{
	display:block;
	width:148px;
	height:99px;
	text-align:center;
	overflow:hidden;
}
ul.photoList li .image a img{
	width:148px;
}
ul.photoList li h3{
	font-size:12px;
	font-weight:normal;
	margin:10px;
}

/* Webナショ枠 */
.webnBox{
	margin:0 0 30px 0;
	width:475px;
	overflow:hidden;
}
ul.webnList{
	width:500px;
	overflow:hidden;
}
ul.webnList li{
	float:left;
	width:210px;
	min-height:230px;
	margin:0 15px 15px 0;
	background:#fff;
	border-top:3px #bfbfbf solid;
	border-bottom:1px dotted #bfbfbf;
	padding:5px 10px;
	position:relative;
}
ul.webnList li.mrClear{
	clear:left;
}
ul.webnList li h3{
	height:63px;
	margin-bottom:5px;
}
ul.webnList li .image a{
	display:block;
	width:208px;
	height:138px;
	border:1px solid #d6d6d6;
	overflow:hidden;
}
ul.webnList li .image img{
	width:208px;
	height:auto;
}
ul.webnList li .new {
	position:absolute;
	right:0;
	top:63px;
	width:51px;
	height:51px;
	background:url(/nng/images/n/2011/webnatgeo/top/mark_new.png) left top no-repeat;
	z-index:9999;
	text-indent:-9999px;
}
* html body ul.webnList li .new{/* IE6のみ透過png対策 */
	background:url(/nng/images/n/2011/webnatgeo/top/mark_new_ie6.gif) left top no-repeat;
}
ul.webnList li .text{
	padding:5px 0;
}
ul.webnList li .text a{
	color:#4d4d4d;
	font-weight:bold;
}


/* PICKUP */
.selectPickupWrap{
	width:475px;
	margin:0 0 20px 0;
}
.selectPickupWrap h2{
	margin:0 0 3px 0;
}
.selectPickupWrap .inner{
	width:475px;
	overflow:hidden;
}
.selectPickupWrap .inner ul{
	width:500px;
}
.selectPickupWrap .inner li{
	width:148px;
	min-height:150px;
	overflow:hidden;
	background:#fff;
	float:left;
	margin:0 16px 15px 0;
}
.selectPickupWrap .inner li.mrClear{
	clear:left;
}
.selectPickupWrap .inner li a{
	display:block;
	cursor:pointer;
	text-align:center;
}
.selectPickupWrap .inner li a .image{
}
.selectPickupWrap .inner li a .image img{
	height:96px;
	border:1px solid #d1d1d1;
}
.selectPickupWrap .inner li a .text{
	display:block;
	padding:5px;
	line-height:1.4;
	text-align:left;
}
.selectPickupWrap .inner li a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

/* トピックス、テキストアド */
.topicsWrap{
	width:475px;
	margin:0 0 20px 0;
	position:relative;
}
.topicsWrap h2{
	margin:0 0 3px 0;
}
.topicsWrap .linkMore{
	position:absolute;
	right:0;
	top:3px;
	text-align:right;
}
.topicsWrap .linkMore a{
	font-weight:bold;
	background:url(/nng/images/n/2013/common/mark_red.gif) left center no-repeat;
	padding:0 0 0 10px;
}
.topicsWrap .inner{
	padding:10px;
	background:#fff;
}
.topicsWrap .inner li{
	background:url(/nng/images/n/2013/common/icon_dot.gif) left center no-repeat;
	font-size:12px;
	padding:0 0 0 10px;
	margin:0 0 4px 5px;
}
.topicsWrap .inner .adArea ul{
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	border-top:1px dotted #bfbfbf;
}
.topicsWrap .inner .adArea ul li a{
	background:url(/nng/images/n/2013/common/icon_ad.gif) right center no-repeat;
	padding:0 23px 0 0;
}


/* ジャンル */
.topGenreListWrap{
	margin:0 0 20px 0;
	width:680px;
	overflow:hidden;
	position:relative;
}
.topGenreListWrap h2{
	margin:0 0 3px 0;
}
.topGenreListWrap .linkMore{
	position:absolute;
	right:0;
	top:3px;
	text-align:right;
}
.topGenreListWrap .linkMore a{
	font-weight:bold;
	background:url(/nng/images/n/2013/common/mark_red.gif) left center no-repeat;
	padding:0 0 0 10px;
}
.topGenreListWrap .inner{
	width:720px;
}
.topGenreListWrap .inner .listBoxWrap{
	width:314px;
	float:left;
	overflow:hidden;
	background:#fff;
	border-top:1px dotted #bfbfbf;
	margin:0 12px 10px 0;
	padding:10px;
	position:relative;
}
.topGenreListWrap .inner .listBoxWrap h3{
	margin:0 0 10px 0;
	padding:0 0 3px 0;
	border-bottom:1px solid #bfbfbf;
}
.topGenreListWrap .inner .listBoxWrap h3 a{
	display:block;
	font-size:16px;
	line-height:1.3;
	font-weight:bold;
	border-left:5px solid #999;
	padding:0 0 0 5px;
	color:#333;
	background:url(/nng/images/n/2013/top/left_mark_link.gif) 300px -5px no-repeat;
}
.topGenreListWrap .inner .life h3 a{
	border-left:5px solid #a93333;
}
.topGenreListWrap .inner .history h3 a{
	border-left:5px solid #d69a34;
}
.topGenreListWrap .inner .paleontology h3 a{
	border-left:5px solid #a39933;
}
.topGenreListWrap .inner .landscape h3 a{
	border-left:5px solid #518833;
}
.topGenreListWrap .inner .environment h3 a{
	border-left:5px solid #34c5bd;
}
.topGenreListWrap .inner .exploration h3 a{
	border-left:5px solid #3597d5;
}
.topGenreListWrap .inner .space h3 a{
	border-left:5px solid #4164e0;
}
.topGenreListWrap .inner .science h3 a{
	border-left:5px solid #9872bf;
}
.topGenreListWrap .inner .culture h3 a{
	border-left:5px solid #e57eec;
}
.topGenreListWrap .inner .area h3 a{
	border-left:5px solid #d55982;
}
.topGenreListWrap .inner .listBoxWrap .image{
	width:120px;
	float:right;
	margin:0 0 10px 10px;
}
.topGenreListWrap .inner .listBoxWrap .image a{
	width:120px;
	text-align:center;
	cursor:pointer;
}
.topGenreListWrap .inner .listBoxWrap .image a .img{
	display:block;
	margin:0 0 2px 0;
}
.topGenreListWrap .inner .listBoxWrap .image a .img img{
	width:120px;
}
.topGenreListWrap .inner .listBoxWrap .image a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.topGenreListWrap .inner .listBoxWrap .image a .text{
	display:inline-block;
	*display:inline;
	*zoom:1;
	text-align:left;
}
.topGenreListWrap .inner .listBoxWrap li{
	display:block;
	margin:0 0 5px 0;
	vertical-align:top;
	*zoom:1;
}
.topGenreListWrap .inner .listBoxWrap li a{
	background: url(/nng/images/n/2013/common/mark_gray.gif) 2px 5px no-repeat;
	display:block;
	padding:0 0 0 15px;
	line-height:1.3;
}
.topGenreListWrap .inner .listBoxWrap .listLink{
	position:absolute;
	right:10px;
	bottom:10px;
}
.topGenreListWrap .inner .listBoxWrap .listLink a{
	font-weight:bold;
	background:url(/nng/images/n/2013/common/mark_red.gif) left center no-repeat;
	padding:0 0 0 10px;
}




/* -----------------------------------------------------------
　ジャンル検索結果
----------------------------------------------------------- */
div#genreWrap {
	display:block;
	background:#FFFFFF url(/nng/images/n/2011/common/border_01.gif) repeat-x bottom;
	padding:0 10px 5px 10px;
	margin: 0 0 20px 0;
	overflow:hidden;
}
div#genreWrap h1 {
	font-size:18px;
	margin-bottom:10px;
}
ul#genreSearch {
	margin:0;
	background:none;
}
ul#genreSearch li {
	border-top: none;
	border-bottom:1px dotted #CCC8C2;
	padding: 7px 0;
	overflow:hidden;
	*height:1%;
}
ul#genreSearch li p {
	padding:0;
	display:block;
	width:320px;
	overflow:hidden;
	float:right;
}
ul#genreSearch li img {
	width:118px;
	border:1px solid #dddddd;
	margin:0;
}
ul#genreSearch li a.image {
	display:block;
	margin:0 10px 5px 0;
	width:120px;
	height:auto;
	float:left;
	border:2px solid #fff;
	overflow:hidden;
}
ul#genreSearch li a.image:hover {
	border:2px solid #ffdb00;
}
ul#genreSearch li a.image:hover img{
	border:1px solid #ffdb00;
}
ul#genreSearch li a.text {
	display:block;
	font-weight:bold;
	font-size:14px;
	width:320px;
	overflow:hidden;
	float:right;
	border:none;
}

#subGenreList{
	margin:10px 0 20px 0;
}
#subGenreList li{
	display:inline-block;
	background:url(/nng/images/n/2012/top/subgenre_bg_right.gif) right top no-repeat;
	font-size:18px;
	font-weight:bold;
	line-height:32px;
	height:32px;
	padding:0 10px 0 0;
	margin:0 0 5px 0;
	*display:inline;
	*zoom:1;
	*margin:0 5px 5px 0;
}
#subGenreList li a{
	display:inline-block;
	background:url(/nng/images/n/2012/top/subgenre_bg_left.gif) left top no-repeat;
	color:#fff;
	padding:0 0 0 20px;
	text-decoration:none;
}
#subGenreList li:hover a{
	color:#ffdb00;
}
#subGenreList li.on{
	background:url(/nng/images/n/2012/top/subgenre_bg_right.gif) right -32px no-repeat;
}
#subGenreList li.on a{
	color:#535353;
	background:url(/nng/images/n/2012/top/subgenre_bg_left.gif) left -32px no-repeat;
}

.topContentsRight .genreListBox{
	position:relative;
}
.topContentsRight .genreListBox .numBox{
	position:absolute;
	right:0;
	top:0;
	text-align:right;
}
.topContentsRight .genreListBox .pagingBox{
	display:block;
	text-align:center;
}
.topContentsRight .genreListBox .pagingBox ul{
	display:block;
	overflow:hidden;
	margin:7px 0;
}
.topContentsRight .genreListBox .pagingBox li{
	margin:7px 3px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	*height:1%;
}
.topContentsRight .genreListBox .pagingBox li a{
	width:25px;
	height:25px;
	padding: 4px 8px;
	text-align:center;
	line-height:25px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	border: solid 1px #c0c0c0;
	color:#373737;
	*display:inline;
	*zoom:1;
	*padding: 4px 4px;
}
.topContentsRight .genreListBox .pagingBox li a:hover{
	background:#eee;
}
.topContentsRight .genreListBox .pagingBox li a.on{
	background:#c0c0c0;
}
#genreWrap .pageNav span {
	font-weight:bold;
}