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

file name : common.css

新ヘッダー・フッター用のスタイル
このCSSは、新旧すべてのページで読み込みます。

=================================================================== */

/* 201710 header */
.headerWrap {
  width: 100%;
  background-color: #fff;
}
.headerWrap #bpGlobalHeader {
  width: 100%;
  margin: 0 auto;
}
.headerWrap .nngheader {
  width: 1000px;
  margin: 0 auto;
  height: 70px;
  padding-top: 20px;
  position: relative;
}
.headerWrap .nngheader #siteLogo {
}
.headerWrap .nngheader .loginBox {
  position: absolute;
  top: 10px;
  right:10px;
}
.headerWrap .nngheader .loginBox ul {
  border-left: 1px solid #999999;
}
.headerWrap .nngheader .loginBox li {
  display: inline-block;
}
.headerWrap .nngheader .loginBox li a {
  font-size: 12px;
  display: block;
  padding: 2px 20px;
  border-right: 1px solid #999999;
  line-height: 1;
}
.headerWrap .nngheader .loginBox li a:hover {
  color:#929292;
}
.headerWrap .nngheader .headTool {
  position: absolute;
  top: 45px;
  right:10px;
  height: 30px;
}
/* searchBox */
.headerWrap .nngheader .headTool .searchBox {
  float: right;
  width: 230px;
  height: 30px;
  border: 1px solid #cccccc;
}
.headTool .searchBox #textBox {
  border: none !important;
  width: 190px;
  height: 20px;
  margin-left: 5px;
  margin-top: 2px;
}
.headTool .searchBox .icon {
  padding: 5px 8px 0 0;
  float: right;
}
.headerWrap .nngheader .headTool .snsBox {
  float: right;
  padding-top: 5px;
}
.headerWrap .nngheader .headTool .snsBox li {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
}
.headerWrap .nngheader .headTool .snsBox li.mailmag a {
  background: url(/nng/images/n/2017/common/icon_mail.png) left center no-repeat;
  padding-left: 30px;
  font-size: 11px;
  line-height: 1.7;
  display: inline-block;
}
.headerWrap .localNavi {
  width: 100%;
  background-color: #000;
}
.headerWrap .localNavi ul {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  padding: 13px 0 13px 1px;
}
.headerWrap .localNavi li {
  float: left;
  margin-left: -1px;
}
.headerWrap .localNavi li a {
  color: #fff;
  font-size: 15px;
  width: 124px;
  display: block;
  padding: 2px 0;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  line-height: 1;
  text-align: center;
}
.headerWrap .localNavi li a:first-child {
}
.headerWrap .localNavi li a:hover {
  color: #ffcd05;
  border-left: 1px solid #ffcd05;
  border-right: 1px solid #ffcd05;
  text-decoration: none;
}
.headerWrap .localNavi li:hover + li a {
  border-left: 1px solid #ffcd05;
}
.headerWrap .localNavi ul.nngtop li.top a,
.headerWrap .localNavi ul.video li.video a,
.headerWrap .localNavi ul.mag li.magazine a,
.headerWrap .localNavi ul.photo li.photo a,
.headerWrap .localNavi ul.news li.news a,
.headerWrap .localNavi ul.product li.product a,
.headerWrap .localNavi ul.movie li.movie a,
.headerWrap .localNavi ul.tv li.tv a,
.headerWrap .localNavi ul.web li.web a {
  color: #ffcd05;
  border-left: 1px solid #ffcd05;
  border-right: 1px solid #ffcd05;
}
.headerWrap .localNavi ul.nngtop li.top + li a,
.headerWrap .localNavi ul.video li.video + li a,
.headerWrap .localNavi ul.mag li.magazine + li a,
.headerWrap .localNavi ul.photo li.photo + li a,
.headerWrap .localNavi ul.news li.news + li a,
.headerWrap .localNavi ul.product li.product + li a,
.headerWrap .localNavi ul.movie li.movie + li a,
.headerWrap .localNavi ul.tv li.tv + li a,
.headerWrap .localNavi ul.web li.web + li a {
  border-left: 1px solid #ffcd05;
}
#facebookHeadSnsBox {
  display: none;
}

/* 201710 Side */
#sideContents .sideNewmag {
  margin-bottom: 20px;
}
#sideContents h2 {
  margin-bottom: 3px;
}
#sideContents h2 a {
  background: url(/nng/images/n/2017/common/icon_link.png) right center no-repeat;
  padding-right: 14px;
  padding-top: 1px;
}

#sideContents .conectNatgeo {
  padding-top: 10px;
  margin-bottom: 20px;
}
#sideContents .conectNatgeo h3 {
  border-left: 3px solid #ffcd05;
  padding-left: 12px;
  font-size: 15px;
  text-align: left;
  margin-bottom: 20px;
}
#sideContents .conectNatgeo .mailmagazine {
  width: 276px;
  border: 2px solid #ffcd05;
  padding: 10px;
  position: relative;
  margin-bottom: 20px;
  background-color:#ffffff;
}
#sideContents .conectNatgeo .mailmagazine div {
  width: 46px;
  height: 38px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffcd05;
  text-align: center;
  color: black;
  font-size: 11px;
  line-height: 1.5;
  padding-top: 8px;
}
#sideContents .conectNatgeo .mailmagazine h4 {
  background: url(/nng/images/n/2017/common/icon_mail.png) left center no-repeat;
  background-size: 20px auto;
  padding-left: 25px;
  font-size: 15px;
  text-align: left;
  margin-bottom: 5px;
}
#sideContents .conectNatgeo .mailmagazine p a {
  background: url(/nng/images/n/2017/common/icon_link.png) no-repeat right center;
  padding-right: 20px;
  color: #929292;
}

/* 201710 footer backnumber */
#backNum {
  background: none;
  padding: 30px 0 15px;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #cccccc;
}
#backNum h3.titleBacknum {
  width: 1000px;
  margin: 0 auto 30px;
  font-size: 16px;
}
#backNum #backNumPrevBtn {
  margin: 40px 45px 0 0;
}

/* 旧レイアウト用 */
#contents {
  padding-top: 10px;
}

/*--------------------------
 新ページャー
----------------------------*/
div.pager {
  overflow:hidden; zoom:1;
  text-align:center;
  margin:15px 0;
}
div.pager li {
  display:inline-block;
  font-size:15px;
  padding: 0 10px;
}
div.pager li.now {
  color:#929292;
}
div.pager li a:hover {
  color:#929292;
}
div.pager li.prev,
div.pager li.next {
  font-size:14px;
  padding: 0 20px;
}
div.pager li.prev {
  background:url(/nng/images/n/2017/common/icon_prev.png) left 4px no-repeat;
}
div.pager li.next {
  background:url(/nng/images/n/2017/common/icon_next.png) right 4px no-repeat;
}


/* 記事内 おすすめ関連書籍 */
div.recommendBox{
  width: 440px;
  border: 2px solid #ffcd05;
  padding: 30px;
  overflow: hidden;
  margin:0 auto 20px;
  background-color: #fff;
}
div.recommendBox h4{
  font-size: 16px;
  border-left: 3px solid #ffcd05;
  margin-bottom: 25px;
  padding-left: 15px;
  line-height: 1.3;
}
div.recommendBox .image{
  width: 120px;
  float: left;
  margin-top: 5px;
}
div.recommendBox .info{
  width: 290px;
  float: right;
}
div.recommendBox .image img{
  max-width: 120px;
  max-height: 240px;
  text-align: center;
}
div.recommendBox p{
  width: auto !important;
  color: #929292;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
}
div.recommendBox p.title{
  color: #000;
  font-size: 15px !important;
  font-weight: bold;
}
div.recommendBox p.subTitle{
  color: #000 !important;
}
div.recommendBox p.price{
  color: #000;
  margin: 0 0 20px !important;
}
div.recommendBox p.textLinks{
  clear: both;
  margin-bottom: 5px;
  padding-top: 10px;
}
div.recommendBox .textLinks li{
  display: inline-block;
  background: #000;
  width: 140px;
  margin-right: 5px;
}
div.recommendBox .textLinks li:last-child{
  margin-right: 0;
}
div.recommendBox .textLinks li a{
  display: block;
  background: #000;
  font-size: 13px;
  color: #fff !important;
  text-align: center;
  width: 100%;
  padding: 7px 0 8px;
}
div.recommendBox .textLinks li a:hover{
  text-decoration: none;
  color: #ffcd05;
}

/* 記事内 ログインボックス */
#mainContents #member {
  background: #f2f2f2;
  padding: 30px 0 30px 50px;
  overflow: hidden;
  margin-bottom: 30px;
}
#mainContents #member p {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  padding-right: 50px;
}
#mainContents #member .memberBtn li a:nth-child(2n+1) {
  margin-right: 20px;
}
#mainContents #member .memberBtn li a {
  display: block;
  width: 190px;
  float: left;
  background: #000;
  color: #808080;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding: 9px 0;
}
#mainContents #member .memberBtn li a:hover{
  text-decoration: none;
  color: #ffcd05;
}


/* 右カラム：AD クローズアップ */
#sideContents .nngCloseup {
  width: 300px;
  margin-bottom:20px;
}
#sideContents .nngCloseup #iconAd {
  float: right;
}
#sideContents .nngCloseup ul {
  width: 258px;
  background: #fff;
  border: 1px solid #ffdb00;
  margin-bottom:20px;
  padding: 20px 20px 0;
}
#sideContents .nngCloseup li {
  width: 258px;
  overflow: hidden;
  margin-bottom: 20px;
}
#sideContents .nngCloseup li p {
  float: left;
  margin: 0 10px 0 0;
}
#sideContents .nngCloseup li p img {
  width: 80px;
}
#sideContents .nngCloseup li h3 {
  font-weight: normal;
  font-size: 14px;
}