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

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

#top #headerWrap{
  margin-bottom: 0;
}


/* #contents -----------------------------------*/
#top #contents {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#top #contents #mainContents{
  width: 100%;
  text-align: center;
  margin-top: 0;
  padding-bottom: 20px;
}
#top #contents #mainContents h1{
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
  margin: 0 auto;
}
#top #contents #mainContents h2{
  background-color: #323232;
  color: #fff;
  font-size: 20px;
  padding: 12px 0 9px;
}
#top #contents #mainContents h3{
  font-size: 18px;
  padding: 0;
  margin-bottom: 20px;
}

#top #contents #mainContents h3 span{
  font-size: 14px;
}

/* .photoList -----------------------------------*/
#top #mainContents .photoList{
  background-color: #323232;
  width: 100%;
  text-align: left;
  overflow: hidden;
  margin-bottom: 20px;
}
#top #mainContents .photoList ul{
  width: 1000px;
  margin: auto;
}
#top #mainContents .photoList ul li{
  width: 332px;
  float: left;
  border-left: 1px solid #575757;
  margin: 0;
  position: relative;
}
#top #mainContents .photoList ul li:nth-child(3n+3){
  border-right: 1px solid #575757;
}
#top #mainContents .photoList ul li .title{
  position: absolute;
  top: 190px;
  left: 20px;
  font-size: 18px;
  font-weight: bold;
}
#top #mainContents .photoList ul li .subTitle{
  font-size: 13px;
  width: 292px;
  height: 100px;
  overflow: hidden;
  text-align: left;
  position: relative;
  left: 20px;
  top: 10px;
}
#top #mainContents .photoList ul li a{
  color: #fefdfb;
}
#top #mainContents .photoList ul li a:hover{
  text-decoration: none;
}
#top #mainContents .photoList ul li a span{
  display: block;
}
#top #mainContents .photoList ul li:hover{
  background-color: #575757;
}
#top #mainContents .photoList ul li:hover:after {
  bottom: 100px;
  right: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(87, 87, 87, 0);
  border-bottom-color: #575757;
  border-width: 18px;
  margin-left: -18px;
}

/* sns -----------------------------------*/
#top #mainContents .centerSns{
  overflow: hidden;
  margin-bottom: 30px;
}
#top #mainContents .centerSns .snsButton,
#top #mainContents .centerSns .fb-share-button{
  display: inline-block;
  margin: 0 10px;
}

/* .linkBox -----------------------------------*/
#top #mainContents .linkBox{
  width: 1000px;
  margin: 0 auto;
}
#top #mainContents .col01{
  width: 680px;
  float: left;
  margin-right: 20px;
}
#top #mainContents .col01 ul{
  text-align: left;
}
#top #mainContents .col01 ul a:link{
  color: #080808;
}
#top #mainContents .col01 ul a:hover{
  color: #fedc00;
}
#top #mainContents .col02{
  width: 300px;
  float: left;
}
#top #mainContents .col02 > p{
  margin-bottom: 20px;
}

/*リンク：PHOTO ARKの関連書籍・雑誌*/
#top #mainContents .relatedLink{
  background-color: #fff;
  margin-bottom: 20px;
}
#top #mainContents .relatedLink li{
  padding: 30px 20px;
  overflow: hidden;
}
#top #mainContents .relatedLink li .bookImg{
  width: 220px;
  float: left;
  margin-right: 20px;
}
#top #mainContents .relatedLink li .bookImg img{
  max-width: 220px;
}
#top #mainContents .relatedLink li .bookTxt{
  overflow: hidden;
}
#top #mainContents .relatedLink li h3{
  color: #080808;
  font-size: 15px;
  line-height: 1.333;
  padding: 0;
  margin-bottom: 10px;
}
#top #mainContents .relatedLink li p{
  color: #080808;
  font-size: 13px;
  line-height: 1.538;
  margin-bottom: 10px;
}
#top #mainContents .relatedLink li p a{
  display: block;
  font-size: 15px;
  font-weight: bold;
  padding-top: 8px;
}

/*リンク：絶滅危惧種ニュース*/
#top #mainContents .newsList{
  background-color: #fff;
  color: #080808;
  margin-bottom: 40px;
  padding: 15px 20px 10px;
  overflow: hidden;
}
#top #mainContents .newsList li{
  overflow: hidden;
  border-bottom: 1px dotted #ccc8c2;
  padding: 9px 0 15px 0;
}
#top #mainContents .newsList .img{
  width: 120px;
  float: left;
  margin-right: 18px;
}
#top #mainContents .newsList .img img{
  border: 1px solid #ddd;
  max-width: 118px;
}
#top #mainContents .newsList p.title{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
#top #mainContents .newsList li.linkMore{
  border: none;
  padding: 19px 0 10px;
  text-align: right;
}
#top #mainContents .linkMore a{
  background-color: #ffcc00;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  padding: 12px 30px 10px;
}
#top #mainContents .linkMore a:hover{
  background-color: #fddb4e;
  color: #080808!important;
  text-decoration: none;
}

/*リンク：動物大図鑑*/
#top #mainContents .directoryBox{
  background-color: #323232;
  clear: both;
  padding: 50px 0 40px;
  overflow: hidden;
}
#top #mainContents .directoryBox h3{
  color: #fff!important;
  font-size: 28px!important;
  margin-bottom: 17px!important;
  padding: 0!important;
}
#top #mainContents .directoryList {
  width: 1000px;
  margin: 0 auto;
}
#top #mainContents .directoryList ul{
  padding: 10px 0;
}
#top #mainContents .directoryList li{
  width: 130px;
  float: left;
  margin-right: 43px;
  margin-bottom: 12px;
}
#top #mainContents .directoryList li:last-child{
  margin-right: 0;
}
#top #mainContents .directoryList li a{
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.23;
}
#top #mainContents .directoryList li a:hover{
  color: #ffcc00;
  text-decoration: none;
}
#top #mainContents .directoryList li img{
  border-radius: 50%;
  margin-bottom: 15px;
}
#top #mainContents .directoryList .linkMore{
  clear: both;
  border: none;
  padding: 19px 0 10px;
  text-align: center;
}
#top #mainContents .directoryList .linkMore a{
  padding: 10px 38px 7px;
}

/* Sponsored by -----------------------------------*/
#top #mainContents .sponsored{
  width: 1000px;
  margin: 15px auto 20px;
  overflow: hidden;
}
#top #mainContents .sponsored li{
  width: 308px;
  float: left;
  border: 1px solid #c7c7c7;
  margin-right: 35px;
}
#top #mainContents .sponsored li:last-child{
  margin-right: 0;
}

/* ページネーション -----------------------------------*/
.pager{
  width: 620px;
}
.pager a {
  display: inline-block;
  *display: inline;*zoom: 1;
  background-color: #323232;
  color: #fff;
  width:280px;
  border-right: 1px solid #fff;
  font-size: 14px;
  padding: 7px 10px 6px 10px;
}
.pager a.prev{
  padding-left: 20px;
}
.pager a.next{
  width: 279px;
  border-right: none;
  text-align: right;
  padding-right: 20px;
}
.pager a:hover{
  color: #FFDB00;
  text-decoration: none;
}

/* #sideContents -----------------------------------*/
#sideContents .photoarkList li{
  background: #323232 url(/nng/images/n/2017/side/icon_arrow.png) no-repeat 273px 23px;
  border-bottom: 1px solid #7d7d83;
  color: #323232;
  padding: 10px 10px 9px 20px;
}
#sideContents .photoarkList li a{
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  height: 100%;
}
#sideContents .photoarkList li a span{
  font-size: 12px;
  font-weight: none;
}
#sideContents .photoarkList li:last-child{
  border-bottom: none;
}

#sideContents .relatedLink{
  background-color: #fff;
  padding: 25px 25px 0 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
#sideContents .relatedLink h2{
  border-left: 4px solid #fcca00;
  font-size: 20px;
  margin-bottom: 10px;
  padding: 2px 0 2px 10px;
}
#sideContents .relatedLink ul{
  padding-top: 8px;
}
#sideContents .relatedLink li{
  margin-bottom: 30px;
  overflow: hidden;
  position:relative;
}
#sideContents .relatedLink li:last-child{
  margin-bottom: 10px;
}
#sideContents .relatedLink li a{
  color: #080808;
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background: #FFF;
  opacity:0;
}
#sideContents .relatedLink li p.ttl{
  font-size: 13px;
  font-weight: bold;
}
#sideContents .relatedLink li:hover p{
  text-decoration: underline;
}
#sideContents .relatedLink img{
  width: 70px;
  float: left;
  margin-right: 10px;
}
#sideContents .relatedLink p{
  width: 170px;
  float: left;
  font-size: 13px;
}

#sideContents .sideSns{
  padding: 10px 0 0;
  margin-bottom: 20px;
}
#sideContents .sideSns .snsButton{
  margin-bottom: 10px;
}

.yellowBorder.hiragino{
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3' !important;
  font-size: 17.06px;
  padding: 0 0 0 14px;
  margin-bottom: 8px;
}