@charset "utf-8";
/* CSS Document */

/*トップページ
----------------------------------------------*/

.topContentsArea {
  padding: 0;
  min-width: 100%;
}

.topMessage {
  width: 92%;
  margin: 0 auto;
}

.topMessage div {
  border-width: 3px;
  padding: 6px 14px;
}

.topMessage a {
  font-size: 13px;
  padding: 0 0 0 13px;
  background: url(/img/common/arrowSearch.png) left top 7px no-repeat;
}

.topMainContent {
  padding: 20px 4% 0;
  border: none;
}

.topLeftColumn {
  float: none;
  width: 100%;
  padding: 25px 4% 0;
}

.topRightColumn {
  float: none;
  width: 100%;
  padding: 0 4% 10px;
}

.topContent {
  margin: 0 0 25px;
}

/*
.topContent h2{
	margin:0 0 15px;
}
*/

.topContent h2 img {
  width: inherit;
  height: 25px;
}

.topContent .comListBtn,
.topContent .eventBtn,
.topContent .campaingBtn {
  top: 0;
  padding: 0;
  margin: 4px 0;
}

/*お知らせエリア*/

.attentionArea {
  border: 4px solid #d1bfac;
  border-radius: 2px;
  padding: 10px;
  background: #fff;
  margin-bottom: 20px;
  font-weight: bold;
}

.attentionArea p {
  font-size: 12px;
  margin-bottom: 10px;
}

.attentionArea p:last-child {
  margin-bottom: 0;
}

.attentionArea p a {
  padding-left: 15px;
  background: url(/img/common/arrowSearch.png) left center no-repeat;
  text-decoration: none;
}

/*メイン（スライド＆本を探す）*/

.topView {
  /*float: none;*/
  width: 100%;
  height: inherit;
  margin: 0 0 15px;
}

.topViewSlider {
  height: inherit;
}

.topSearch {
  float: none;
  width: 100%;
  height: inherit;
  padding: 18px 12px;
  background-position: right 26px top 8px;
  background-repeat: no-repeat;
  background-color: #fff;
}

.topSearch h2 {
  margin: 0 0 15px;
}

.topSearch h2 img {
  width: inherit;
  height: 17px;
}

.topSearch .comSearch {
  margin: 0 0 15px;
  height: 43px;
}

.topSearch li,
.topSearch li:nth-of-type(even) {
  width: 50%;
}

.topSearch li:nth-last-of-type(1),
.topSearch li:nth-last-of-type(2) {
  margin-bottom: 0;
}

.topSearch li a {
  font-size: 12px;
  padding: 0 0 0 14px;
  background: url(/img/common/arrowSearch.png) left top 5px no-repeat;
}

.topSearch .comSearch td:nth-of-type(1) {
  width: 75px;
}

.topSearch .comSearch td:nth-of-type(2) {
  width: auto;
}

.topSearch .comSearch td:nth-of-type(3) {
  width: 45px;
}

.topSearch li a:hover {
  color: #338c38;
}

.topSearch .comSearch td select {
  line-height: 37px;
  background-position: right 10px top 15px;
}

.topSearch .comSearch td a {
  width: 100%;
  line-height: 37px;
  height: 37px;
}

.topSearch .comSearch td a img {
  display: inline;
  vertical-align: middle;
}

/* ナビゲーション */
.navTop {
  padding: 16px 10px;
  background-color: #fff;
  border-radius: 6px;
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
}

.navTop ul.navTopList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.navTopListWrap {
  display: flex;
  flex-direction: column;
}

.navTop ul.navTopList li,
.navTop ul.navTopList li a {
  line-height: 1;
}

.navTop ul.navTopList:nth-child(1) {
  margin-bottom: 16px;
}

.navTop ul.navTopListUpper li:nth-of-type(1) img {
  width: 22.13333333vw;
}
.navTop ul.navTopListUpper li:nth-of-type(2) img {
  width: 19.73333333vw;
}
.navTop ul.navTopListUpper li:nth-of-type(3) img {
  width: 26.6666666666667vw;
}
.navTop ul.navTopListLower li:nth-of-type(1) img {
  width: 21.3333333333333vw;
}
.navTop ul.navTopListLower li:nth-of-type(2) img {
  width: 16vw;
}
.navTop ul.navTopListLower li:nth-of-type(3) img {
  width: 10.6666666666667vw;
}
.navTop ul.navTopListLower li:nth-of-type(4) img {
  width: 18.9333333333333vw;
}

/*書籍スライダー*/

.topContentsArea .comBookSlider {
  height: inherit;
}

/*トピックス*/

.topTopics h2 + div.clearfix {
  padding: 8px 0 0;
}

.topLeftColumn .comTopicsItem {
  width: 100%;
  height: inherit;
  margin: 0 10px 10px 0;
}

.topLeftColumn .comTopicsItem:nth-of-type(4n) {
  margin: 0 0 10px 0;
}

.topLeftColumn .comTopicsItem .coverImage {
  height: auto;
  display: block;
  justify-content: center;
  align-items: center;
}

.topLeftColumn .comTopicsItem .coverImage img {
  width: 25%;
}

/*ボタン（募集中のイベント一覧を見る）*/

.eventBtn {
  top: 1px;
  right: 0;
  padding: 0 0 0 15px;
}

/*ボタン（募集中のイベント一覧を見る）*/

.campaingBtn {
  top: 1px;
  right: 0;
  padding: 0 0 0 15px;
}

/*新刊情報*/

.topNewBook h3 {
  margin: 0 0 -12px;
  text-align: center;
}

.topNewBook h3 img {
  width: inherit;
  height: 25px;
}

/*事業紹介*/
.department.pcNone {
  padding: 0 4%;
}

.department > h2 img.ttlImg {
  max-width: 64px;
}

.department .deptContainer {
  margin: 0 0 25px;
  background: #fff;
  padding: 20px 10px;
  border-radius: 10px;
  width: 100%;
}

.department .deptContainer .overview {
  margin-bottom: 25px;
  display: block;
}

.department .deptContainer .overview p {
  width: 100%;
}

.department .deptContainer ul.iconWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.department .deptContainer ul.iconWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.department .deptContainer ul.iconWrap li {
  text-align: center;
  width: 40%;
  margin: 0 0 20px;
}

.department .deptContainer .linkBtn a {
  /*display: inline-block;*/
  width: 80%;
  /*height: 38px;
  color: #fff;*/
  font-size: 1.4rem;
  /*font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #8C7051;
  border-radius: 19px;
  margin: 0 auto;*/
}

.department h3 {
  padding-left: 28px;
  margin-bottom: 1rem;
}

.department h3::before {
  width: 18px;
  height: 13px;
}

.department .childrensBook img.ttlImg {
  max-width: 71px;
}

.department .Ippanshoseki img.ttlImg {
  max-width: 56px;
}

.department .SchoolLibrary img.ttlImg {
  max-width: 84px;
}

.department .Ippanshoseki ul.iconWrap img {
  height: 30vw;
  width: auto;
}

/*アンケート*/

.topQues {
  background: none;
  padding: 0 4%;
  width: 100%;
  margin: 0 0 35px;
}

.topQues li {
  float: none;
  width: 100%;
  height: 44px;
  border-radius: 22px;
}

.topQues li:nth-of-type(1) {
  margin: 0 0 25px;
}

.topQues li a {
  line-height: 44px;
  font-weight: bold;
  font-size: 14px;
}

.topQues li a:before {
  width: 17px;
  height: 100%;
  margin: 0 10px 0 0;
  background-size: 100% auto;
}

/*SNSリンク*/

.topSnsLinks {
  margin: 0 0 25px;
  background: inherit;
  padding: 0 4%;
  width: 100%;
  height: inherit;
}

.topSnsLinks dl {
  display: block;
  background: #fff;
  border-radius: 10px;
  margin: 0 0 15px;
  padding: 0 3%;
}

.topSnsLinks dl:nth-of-type(2) {
  margin: 0;
}

.topSnsLinks dt {
  float: left;
  display: block;
  width: 60%;
  line-height: 45px;
  padding: 0 2px 0 0;
  font-size: 12px;
}

.topSnsLinks dd {
  float: left;
  display: block;
  width: 10%;
  text-align: center;
  line-height: 45px;
  margin: 0;
}

.topSnsLinks dd img {
  width: 22px;
  vertical-align: middle;
}

/*関連サイト*/

.topRelatedSites {
  width: 100%;
  padding: 0 4%;
}

.topBnrList li {
  float: left;
  width: 50%;
  margin: 0 0 15px;
  text-align: center;
}

.topBnrList li:nth-of-type(odd) {
  margin: 0 0 15px;
  padding: 0 2% 0 0;
}

.topBnrList li:nth-of-type(even) {
  margin: 0 0 15px;
  padding: 0 0 0 2%;
}

.topBnrList li:nth-of-type(4n + 1) {
  clear: inherit;
}

.topBnrList li:nth-of-type(2n + 1) {
  clear: both;
}

.topBnrList li img {
  border-radius: 5px;
}

/*ランキング*/

.ranking {
  margin-bottom: 70px;
}

.rankingContent {
  text-align: center;
  background: none;
  border-radius: 10px;
  padding: 15px 0 0;
}

.rankingContent h2 {
  margin: 0 0 15px;
  padding: 0;
  text-align: left;
}

.rankingContent h2 img {
  width: inherit;
  height: 21px;
}

.rankingContent h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 -12px;
}

.rankingContent h3 img {
  width: inherit;
  height: 25px;
}

.rankingContent .ranking {
  display: none;
}

.rankingContent .rankingSlider {
  display: block !important;
  border-radius: 10px;
  background: #fff;
  padding: 30px 12px 15px;
  margin: 0 0 15px;
}

.rankingContent .rankingSlider + .comMoreBtn {
  display: none;
}

.rankingContent dt {
  margin: 0 0 4px;
}

/*.rankingContent dt img{
	width:inherit;
	height:20px;
}*/

.rankingNumber,
.rankingNumber.ranking1 {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 5px;
  vertical-align: top;
}

.rankingNumber:before,
.rankingNumber.ranking1:before {
  background-size: 4px auto;
  background-position: left bottom 12px;
  height: 30px;
  width: 8px;
}

.rankingNumber:after,
.rankingNumber.ranking1:after {
  background-size: 4px auto;
  background-position: right bottom 12px;
  height: 30px;
  width: 8px;
}

.rankingNumber small {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  vertical-align: baseline;
}

.rankingContent dd {
  margin: 0 0 12px;
}

.rankingContent dd img {
  width: inherit;
  border: 1px solid #cfcfcf;
}

.rankingContent .comMoreBtn {
  margin: 0 0 35px;
}

/* 公式アカウント */
.account {
  margin-bottom: 70px;
}

.account img.ttlImg {
  max-width: 112px;
}

.accountContent {
  padding: 20px 10px;
}

.accountContent h2 {
  padding-left: 36px;
}

.accountContent h2::before {
  width: 18px;
  height: 16px;
  left: 5px;
  top: 0;
}

.accountContent ul {
  max-width: 225px;
  margin: 0 auto;
}

.accountContent ul li {
  max-width: 37px;
  margin: 0 0 10px;
}

/*ポプラ社の取り組み*/
.initiatives img.ttlImg {
  max-width: 145px;
}

.initiatives h2 {
  padding-left: 36px;
}

.initiatives h2::before {
  width: 24px;
  height: 24px;
  top: -6px;
}

.initiatives ul {
  padding-left: 30px;
}

/* PR TIMES */
.newsRelease.pcNone {
  padding: 0 4%;
}

.newsRelease > h2 img {
  max-width: 150px;
}

.newsRelease .newsContainer {
  margin: 0 0 25px;
  background: #fff;
  padding: 20px 10px;
  border-radius: 10px;
  width: 100%;
}

.newsArticle dl {
  display: block;
}

.newsArticle dl dt {
  font-weight: bold;
  width: 100%;
  margin-bottom: 0.3em;
}

.newsArticle dl dd {
  width: 100%;
}