@charset "utf-8";

/*
===== CONTENTS =========================================

 // Site Outline //

	Site Name:  河出書房新社
	URL:  http://www.kawade.co.jp/


 // Font-size Adjustment //

	71% = 10px
	86% = 12px
	100% = 14px
	114% = 16px
	129% = 18px


 // CSS Index //

	1: flash
	2: navi and contents and sub
	3: switch_tab
	4: topSub
	5: ropics
	6: webmag
	7: rank
	8: recommend
	9: topRotationBanner
	10:topNewbook


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

/*------------------------------
 // 1: flash
------------------------------ */


/*------------------------------
 // 2: navi and contents and sub
------------------------------ */

#top #main .topContents {
	width: 540px;
	float: left;
}

#top #main .topSub {
	width: 220px;
	float: right;
}

/*------------------------------
 // 3: switch_tab
------------------------------ */

#top #main .tab {
	padding-top: 20px;
}

#top #main .tabTittle li {
	float:left;
}

#top #main .tabTittle li a{
	height:33px;
	margin-left: 10px;
}

/* もうすぐ出る本
--------------------*/

#top #main .tt01 a{
	outline:none;
	background:url(img/m_t_coming_off.jpg) no-repeat top left;
	display:block;
	width: 121px;
	text-indent: -9999px;
}

#top #main .tt01 a:hover {
	background:url(img/m_t_coming_on.jpg) no-repeat top left;
}

#top #main .tt01 a.selected{
	background:url(img/m_t_coming_on.jpg) no-repeat top left;
}

/* 話題の本
--------------------*/

#top #main .tt02 a{
	outline:none;
	background:url(img/m_t_hot_off.jpg) no-repeat top left;
	display:block;
	width: 83px;
	text-indent: -9999px;
}

#top #main .tt02 a:hover {
	background:url(img/m_t_hot_on.jpg) no-repeat top left;
}

#top #main .tt02 a.selected{
	background:url(img/m_t_hot_on.jpg) no-repeat top left;
}

/* 映画・ドラマ・メディア関連の本
--------------------*/

#top #main .tt03 a{
	outline:none;
	background:url(img/m_t_media_off.jpg) no-repeat top left;
	display:block;
	width: 214px;
	text-indent: -9999px;
}

#top #main .tt03 a:hover {
	background:url(img/m_t_media_on.jpg) no-repeat top left;
}

#top #main .tt03 a.selected{
	background:url(img/m_t_media_on.jpg) no-repeat top left;
}

/* 感想
--------------------*/

#top #main .tt04 a{
	outline:none;
	background:url(img/m_t_review_off.jpg) no-repeat top left;
	display:block;
	width: 56px;
	text-indent: -9999px;
}

#top #main .tab .tt04 a:hover {
	background:url(img/m_t_review_on.jpg) no-repeat top left;
}

#top #main .tab .tt04 a.selected{
	background:url(img/m_t_review_on.jpg) no-repeat top left;
}

#top #main .topBox{
	clear: both;
	background:url(img/m_tab_bg_foot.jpg) no-repeat left bottom;
	padding-bottom: 10px;
}

#top #main .topBoxBody{
	background:url(img/m_tab_bg_body.jpg) repeat-y left top;
}

#top #main .panel{
	padding: 10px 25px 0 25px;
	background:url(img/m_tab_bg_head.jpg) no-repeat top left;
}

/* タブ内部リスト
--------------------*/

#top #main .tabList{
	clear: both;
	margin-top: 5px;
	padding-top: 10px;
}

#top #main .tabList dt{
	float: left;
	width: 65px;
}

#top #main .tabList dt img{
	margin: 5px;
	padding: 0px;
	border: 1px solid #CCCCCC;
}

#top #main .tabList dd{
	float: right;
	width: 415px;
}

#top #main .tabList dd p{
	margin: 0px;
	padding: 0px 0px 5px;
}

#top #main .tabList dd img{
	margin: 5px;
	padding: 0px;
	border: 1px solid #CCCCCC;
}

/* 新刊ピックアップ
--------------------*/

#top #main .pickup {
	margin-top: 20px;
}

#top #main .pickupHead {
	padding-bottom: 10px;
	background:url(img/m_tab_bg_head.jpg) no-repeat bottom left;
}

#top #main .pickupTitle {
	margin-left: 10px;
	background:url(img/m_t_pickup.jpg) no-repeat top left;
	height: 33px;
	text-indent: -9999px;
}

#top #main .pickup .pickupWrap {
	padding: 15px 20px;
}

#top #main .pickup .cover {
	width: 150px;
	float: left;
}

#top #main .pickup .bookdata {
	width: 340px;
	float: right;
}

/*------------------------------
 // 4: topSub
------------------------------ */

#top #main .subHead {
	background:url(img/r_bg_head.jpg) no-repeat top left;
	height: 46px;
	position: relative;
}

#top #main .subHead .list{
	position: absolute;
	top: 15px;
	left: 110px;
}

#top #main .subHead .rss{
	position: absolute;
	top: 15px;
	left: 165px;
}

#top #main .topicsTitle,
#top #main .webmagTitle,
#top #main .rankTitle {
	height: 46px;
	text-indent: -9999px;
}

#top #main .subBox {
	background: url(img/r_bg_body.jpg) repeat-y;
}

#top #main .subBoxBody {
	padding: 0 10px 10px 10px;
	background: url(img/r_bg_foot.jpg) no-repeat left bottom;
	zoom: 1;
}

#top #main .topSub a:link,
#top #main .topSub a:hover,
#top #main .topSub a:visited,
#top #main .topSub a:active{
	color: #333;
}

/*------------------------------
 // 5: topics
------------------------------ */

#top #main .topics {
}

#top #main .topicsTitle {
	background: url(img/r_t_topics.jpg) no-repeat 10px center;
}

#top #main .topicsIcon {
	background: url(img/r_dottedline.jpg) no-repeat left bottom;
	padding: 5px 0 25px 10px;
}

#top #main .topicsIcon li{
	float: left;
}

#top #main .topicsInfoList {
	clear: both;
	background: url(img/r_dottedline.jpg) no-repeat left bottom;
	padding: 10px 5px 5px 5px;
}

#top #main .topicsList {
	padding: 10px 5px 10px 5px;
}

#top #main .topicsInfoList li{
	background: url(img/r_info_i_bg.gif) no-repeat 0 6px;
	text-indent: 17px;
	padding-bottom: 5px;
}

#top #main .publicityIcon {
	background: url(img/r_publicity_i_bg.gif) no-repeat 0 6px;
	text-indent: 17px;
	padding-bottom: 5px;
}

#top #main .eventIcon {
	background: url(img/r_event_i_bg.gif) no-repeat 0 6px;
	text-indent: 17px;
	padding-bottom: 5px;
}

#top #main .infoIcon{
	background: url(img/r_info_i_bg.gif) no-repeat 0 6px;
	text-indent: 17px;
	padding-bottom: 5px;
}
.dot_line{
  height: 3px;
  background: url(img/dot_line.gif);
  background-repeat: no-repeat;
  margin: 0 -4px 12px;
  border: none;
}
.topics_cat{
  display: flex;
  justify-content: space-between;
  font-size: 10px;

}
.topics_cat a{
  color:#666 !important;
  text-decoration: none;
}
.topics_cat p{
  position: relative;
  right: -3px; 
}
.topics_cat p::after{
  content: url(img/arrow_gray.gif);
  padding-left: 2px;
  position: relative;
  top:-1px;
}

/*------------------------------
 // 6: webmag
------------------------------ */

#top #main .webmag {
	margin-top: 15px;
}

#top #main .webmagTitle {
	background: url(img/r_t_webmag.jpg) no-repeat 10px center;
}

#top #main .webmagList {
	padding: 10px 5px 0px 5px;
}

#top #main .webmagIcon{
	margin-right: 10px;
}

#top #main .webmagIcon img{
	vertical-align: middle;
}

#top #main .webmagList dd{
	padding-bottom: 5px;
}

/*------------------------------
 // 7: rank
------------------------------ */

#top #main .rank {
	margin-top: 15px;
}

#top #main .rankTitle {
	background: url(img/r_t_rank.jpg) no-repeat 10px center;
}

#top #main .rankList {
	padding: 10px 5px 10px 5px;
}

#top #main .rankIcon{
	margin-right: 10px;
}

#top #main .rank img{
	vertical-align: middle;
}

#top #main .rankList dd{
	padding-bottom: 5px;
}


/*------------------------------
 // 8: recommend
------------------------------ */
#topRecommend {
	margin-top:20px;
}

#topRecommend .recommendBook {
	width:158px;
	float:left;
	margin:0 10px 0 10px;
}

#topRecommend .recommendBook .cover { 
	position:relative;
	background:url(img/recommend_shadow.png) center bottom no-repeat;
	width:158px;
	height:215px;
}

#topRecommend .recommendBook .img,
#topRecommend .recommendBook .ico {
	display:block;
	position:absolute;
}

#topRecommend .recommendBook .img {
	left:9px;
	bottom:7px;
}

#topRecommend .recommendBook .ico {
	left:-20px;
	bottom:12px;
	border:none;
}

#topRecommend .recommendBook dl {
	width:140px;
	margin-left:9px;
}	
	
#topRecommend .recommendBook .title { 
	font-weight:bold;
}
	
#topRecommend .recommendBook .text {
	 color:#666;
}


/*------------------------------
 // 9: topRotationBanner
------------------------------ */

#topRotationBanner {
	height:176px;
}


/*------------------------------
 // 10: topNewbook
------------------------------ */
#topNewbook {
	height:230px;
	background:url(/cmn/img/newbook_bg.jpg) top center no-repeat;
}

/*------------------------------
 // 最新情報 Web河出
------------------------------ */
.newArticle_title{
    text-align: center;
    position: relative;
    top:10px;
    font-size: 16px;
  }
.newArticle {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0 0.8rem;
  overflow: hidden;
}
.newArticle li {
  width: calc((100% - 18px)/3);
}
.newArticle_pict {
  background-color: #f0f0f0;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem; 
}
.newArticle_pict img {
  max-width: 90%;
  max-height: 160px;
}
.newArticle a{opacity: 1.0;transition:0.8s}
.newArticle a:hover{opacity: 0.6;}
.newArticle_cnt{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}
.newArticle .date{
}
.btn_webKawade{
    text-align: right;
  }
/*------------------------------
 // swiper topスライダー 2020.12
------------------------------ */	
.wrapper-slider{
	width:940px;
	margin:35px auto 0; 
	padding:0 20px;
}
.swiper-container {
		width: 100%;
	}
.swiper-container.slider {
	height: 350px;
	margin-bottom: 20px;
	
}
.swiper-container.slider-thumbnail {
	max-width: 680px;
	margin: 30px auto;
	height: 48px;
}
.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
	/* width: 25%;
	height: 100%; */
	opacity: 0.5;
	overflow: hidden;
	cursor: pointer;
}
.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}
.swiper-slide{
	/* border: 1px solid red; */
	/* width: 960px; */
	background-color: #dbe5eb;
}
.slider .swiper-slide img{
	width: 780px;
	height: 350px;
}
.slider-thumbnail .swiper-slide img{
	width: 130px;
}
.swiper-container {
	width: 100%;
}
.swiper-container.slider {
	height: 350px;
	margin-bottom: 20px;
}
.swiper-container.slider-thumbnail {
	max-width: 680px;
	margin: 30px auto;
	height: 58px;
}
.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
	/* width: 25%;
	height: 100%; */
	opacity: 0.5;
	overflow: hidden;
	cursor: pointer;
}
.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}
.swiper-slide{
	/* border: 1px solid red; */
	/* width: 960px; */
	background-color: #dbe5eb;
}
.slider .swiper-slide img{
	width: 780px;
	height: 350px;
}
.slider-thumbnail .swiper-slide img{
	width: 130px;
}