@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 .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;
}

.headerWrap .nngheader .headTool .searchBox {
  float: right;
  width: 230px;
  height: 30px;
  border: 1px solid #cccccc;
}

/* searchBox */
.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: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: 10px;
}

#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;
}

.sideMemberLogin {
  padding: 24px 20px 14px;
  margin-bottom: 20px;
  border: 2px solid #e2e2e2;
  background-color: #fff;
}

.sideMemberLogin_logo {
  margin-bottom: 1em;
}

.sideMemberLogin_desc {
  margin-bottom: .8em;
  text-align: center;
}

.sideMemberLogin_btnes {
  width: 210px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.sideMemberLogin_btnes_item:not(:last-child) {
  margin-bottom: 7px;
}

.sideMemberLogin_btn {
  display: block;
  width: 100%;
  padding: .5em .75em .35em;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #000;
  background-color: #fdd235;
  border: 1px solid #000;
  border-radius: 3px;
  box-sizing: border-box;
  transition: background-color .3s;
}

.sideMemberLogin_btn em {
  color: #e40004;
}

.sideMemberLogin_btn:link, .sideMemberLogin_btn:visited {
  color: #000;
}

.sideMemberLogin_btn:hover {
  color: #000;
  text-decoration: none;
  background-color: #fedd68;
}

.sideMemberLogin_link {
  padding-left: 10px;
  background: url("/nng/images/n/2013/common/mark_red.gif") left center no-repeat;
}

.sideMemberLogin_link:hover {
  color: #4d4d4d;
}

/* 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;
}

/* 201802 footer navi */
#footer .footerWrap2018 {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 1000px;
  padding: 15px 0 20px;
}

#footer .footerWrap2018 .footNav ul {
  overflow: hidden;
}

#footer .footerWrap2018 .footNav ul li {
  float: left;
  border-left: 1px solid #666666;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.3;
  margin: 0 0 7px;
}

#footer .footerWrap2018 .footNav ul li:last-child {
  border-right: 1px solid #666666;
  padding-right: 10px;
}

#footer .footerWrap2018 .footNav ul li a {
  color: #115385;
}

#footer .footerWrap2018 .footNav ul li a:hover {
  color: #A22222;
}

#footer .footerWrap2018 ul.footBtn {
  position: absolute;
  top: 14px;
  right: 0;
}

#footer .footerWrap2018 ul.footBtn li {
  float: left;
  margin-left: 10px;
}

#footer .footerWrap2018 ul.footBtn li a {
  width: 116px;
  height: 50px;
  border: 2px solid #d5d5d5;
  background: #ffffff;
  padding: 3px 0 0;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .footerWrap2018 ul.footBtn li a:hover {
  background: #ffcd05;
  color: #333;
  text-decoration: none;
}

/* 旧レイアウト用 */
#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, 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: 436px;
  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 {
  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:nth-child(2n+1) {
  margin-right: 20px;
}

#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;
}

/* インリード動画 */
#dag_inread {
  width: 500px;
  margin: 0 auto 15px;
}

/*--------------------------
 ナショジオ無料会員化
 201811
----------------------------*/
.ngj_free {
  position: relative;
}

.ngj_free .ngj_free_icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  padding-left: .4em;
}

.ngj_free .ngj_free_icon:after {
  display: block;
}

#nngSideRank .rankBox ol li.ngj_free {
  overflow: visible;
}

#nngSideRank .rankBox ol li.ngj_free .ngj_free_icon {
  position: relative;
  width: auto;
  height: auto;
}

.ngj_free_balloon {
  position: absolute;
  padding: .5em 1em .4em;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-color: #2c2c2c;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
}

.ngj_free_balloon:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 6px 6px 0 6px;
}

#nngSideRank .rankBox ol > li .ngj_free_balloon {
  top: -46px;
  left: 0;
}

.topContentsRight .newsBox .imgType > li .ngj_free_balloon {
  bottom: 85px;
  left: 50%;
  width: 60%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.topContentsRight .newsBox .textType > li .ngj_free_balloon {
  top: -54px;
  left: 0;
}

.topContentsRight .webnList > li .ngj_free_balloon {
  left: 50%;
  top: 164px;
  width: 60%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#newsTop #newsListResult ul > li .ngj_free_balloon {
  top: -42px;
  left: 165px;
}

#newsTop #newsListResult ul > li .ngj_free_balloon p {
  padding: 0;
  margin: 0;
}

#newsTop #newsListResult ul > li.firstPageFirstItem .ngj_free_balloon {
  top: 368px;
  left: 15px;
}

#newsTop #newsListResult ul > li:not(.firstPageFirstItem) {
  overflow: visible;
}

#newsTop #newsListResult ul > li:not(.firstPageFirstItem):after {
  content: " ";
  display: block;
  clear: both;
}

#webNatiogeoTop #newestList .contentsListLarge > li .ngj_free_balloon {
  top: 196px;
  left: 15px;
  z-index: 20;
  padding: .5em 1em .4em;
}

#webNatiogeoTop #newestList .contentsList > li .ngj_free_balloon {
  position: absolute;
  padding: .5em 1em .4em;
  top: 170px;
  left: 50%;
  z-index: 20;
  width: 75%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#storiesTop #newsListResult ul > li .ngj_free_balloon {
  top: -42px;
  left: 315px;
}

#storiesTop #newsListResult ul > li .ngj_free_balloon p {
  padding: 0;
  margin: 0;
}

#storiesTop #newsListResult ul > li.firstPageFirstItem .ngj_free_balloon {
  top: 368px;
  left: 15px;
}

#storiesTop #newsListResult ul > li:not(.firstPageFirstItem) {
  overflow: visible;
}

#storiesTop #newsListResult ul > li:not(.firstPageFirstItem):after {
  content: " ";
  display: block;
  clear: both;
}

#nngSearch #resultArea ul > li {
  overflow: visible;
}

#nngSearch #resultArea ul > li:after {
  content: " ";
  display: block;
  clear: both;
}

#nngSearch #resultArea ul > li .ngj_free_balloon {
  top: -52px;
  left: 148px;
}

body.notlogin .ngj_free:hover .ngj_free_balloon {
  opacity: 1;
  visibility: visible;
}

body.notlogin .ngj_free .ngj_free_icon {
  width: 10px;
  height: 12px;
}

body.notlogin .ngj_free .ngj_free_icon:after {
  content: url("/nng/images/n/2018/icon_lockedkey.png");
}

body.ngj_free .ngj_free .ngj_free_icon {
  width: 15px;
  height: 12px;
}

body.ngj_free .ngj_free .ngj_free_icon:after {
  content: url("/nng/images/n/2018/icon_openedkey.png");
}

/* 会員ログインBox */
.articleBody .memberLoginBox {
  max-width: 580px;
  margin: 35px auto 35px auto;
}

.articleBody .memberLoginBox_desc {
  text-align: center;
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 30px;
}

.articleBody .memberLoginBox_free {
  color: #e40004;
}

.articleBody .memberLoginBox_body {
  padding: 20px 20px 40px;
  background-color: #fffaea;
}

.articleBody .memberLoginBox_title {
  padding-left: 15px;
  margin-top: 5px;
  margin-bottom: 20px;
  line-height: 1.4;
  font-weight: bold;
  font-size: 17px;
  border-left: 3px solid #fdd235;
}

.articleBody .memberLoginBox_lead {
  margin-bottom: 20px !important;
  font-size: 13px;
}

.articleBody .memberLoginBox_merits {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  line-height: 1.5;
  margin-right: -15px;
}

.articleBody .memberLoginBox_merits_item {
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 15px;
  font-size: 13px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.articleBody .memberLoginBox_merits_no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  font-size: 17px;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
}

.articleBody .memberLoginBox_btnes {
  display: flex;
}

.articleBody .memberLoginBox_btnes_item {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 12px;
  padding-left: 12px;
  box-sizing: border-box;
}

.articleBody .memberLoginBox_btn {
  display: block;
  padding: 1em 1em;
  text-align: center;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 3px;
}

.articleBody .memberLoginBox_btn:link, .articleBody .memberLoginBox_btn:visited {
  color: #000;
}

.articleBody .memberLoginBox_btn:hover {
  color: #000;
  text-decoration: none;
}

.articleBody .memberLoginBox_btn-register {
  background-color: #fdd235;
  transition: background-color .3s;
}

.articleBody .memberLoginBox_btn-register:hover {
  background-color: #fedd68;
}