@charset "utf-8";
/* CSS Document */
/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
.sp_none{
    display: none;
}
    
.sp_block{
    display: block;
}


/*********** wrap設定 ***********/
#wrap{
	width: 100%;
    min-width:100%;
}

    
/*************************************************************************************
header設定
**************************************************************************************/
header{
    padding:10px;
}

#h_logo{
    width:31.875%;
}

	
/******************** #menu_btn設定 *********************/
#menu_btn {
	display: block;
	width: 45px;
	height:45px;
	position:absolute;
	top:0;
    bottom:0;
	right:10px;
    margin:auto 0;
	z-index: 10001;
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;
	background:#fff;
    border-radius: 45px;
}
    
#menu_btn.active {
	background:#539b2d;
}

#menu_btn span {
	display: block;
	background: #539b2d;
	width: 25px;
	height: 3px;
	position: absolute;
	left: 10px;
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
}

#menu_btn span:first-child {
	top: 12px;
}

#menu_btn span:nth-child(2) {
	margin-top: -2px;
	top: 50%;
}

#menu_btn span:last-child {
	bottom: 12px;
}
    
#menu_btn.active span{
	background:#fff;
    left:8px;
    width:29px;
}
    
#menu_btn.active span:first-child {
	-webkit-transform: translateY(6px) rotate(45deg);
	-moz-transform: translateY(6px) rotate(45deg);
	-ms-transform: translateY(6px) rotate(45deg);
	transform: translateY(6px) rotate(45deg);
    top:16px;
}

#menu_btn.active span:nth-child(2) {
	opacity: 0;
}

#menu_btn.active span:last-child {
	-webkit-transform: translateY(-8px) rotate(-45deg);
	-moz-transform: translateY(-8px) rotate(-45deg);
	-ms-transform: translateY(-8px) rotate(-45deg);
	transform: translateY(-8px) rotate(-45deg);
}

#overlay {
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity .5s;
}

#overlay.active {
  width: 100%;
  height: 100%;
  opacity: 1;
}

/******************** #sp_navi設定 *********************/
#sp_navi{
    z-index:10000;	
    width:300px;
    box-sizing: border-box;
    height: 100%;
    background:#f4f4f4;
    position:fixed;
    top: 0;
    right: -1px;
    transform: translate(300px);
    transition: all .3s;
    padding-top:11.6%;
    overflow:auto;
    font-size:12pt;
}

#sp_navi.active{
    transform: translateZ(0);
}

#sp_navi li{
	list-style:none;
    padding:4px 8px;
}

#sp_navi a{
	display:block;
	height:50px;
	line-height:50px;
	width:100%;
	color:#333;
	text-decoration:none;
	box-sizing:border-box;
	padding:0 10px 0 20px;
	background: url(/img/arrow1.png) 10px center/5px no-repeat #fff;
    border-radius: 8px;
    position: relative;
}
    
.sp_nav_en{
    position: absolute;
    bottom:-12px;
    right:10px;
    color:#27aa61;
    font-size:7pt;
}

#sp_navi a:active{
	background: url(/img/arrow2.png) 10px center/5px no-repeat #539b2d;
}

#sp_navi a:active .sp_nav_jp,
#sp_navi a:active .sp_nav_en{
    color:#fff;
}


/*************************************************************************************
パンクズ設定
**************************************************************************************/
#pankuzu{
    border-bottom:1px solid #539b2d;
}

#pankuzu_ul{
    min-width:100%;
    padding:8px 10px;
}


/*************************************************************************************
#contents設定
**************************************************************************************/
#contents {
    /*padding-bottom: 500px;*/
    padding-bottom: 350px;
}
    
#contents_inner{
    min-width:100%;
    padding:20px 10px 40px;
}


/*************************************************************************************
footer設定
**************************************************************************************/
#footer_ul{
    max-width:100%;
    min-width:100%;
    margin:0;
    justify-content:flex-start;
    flex-wrap: wrap;
}
    
#footer_ul li{
    width:100%;
}
    
/*.footer_inner{
    min-width:100%;
    flex-wrap: wrap;
    gap:20px;
}

.footer_menu{
    width:calc(50% - 10px);
}*/

#page_top{
    bottom:73px;
}


/*************************************************************************************
#side設定
**************************************************************************************/
#side{
    width:100%;
    float:none;
    display: none;
}
    
.top #side{
    display:block;
}
    
.sp_side_search_open{
    display: inline-block;
    width:21px;
    height:21px;
    background: url(../img/i_plus.png) center center/11px no-repeat #539c29;
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto 0;
    cursor: pointer;
}
    
.sp_side_search_open.active{
    background: url(../img/i_minus.png) center center/11px no-repeat #bbb;
}
    
#side_search_ul{
    height:0;
    overflow: hidden;
    padding-top:10px;
}

#side_search_ul.active{
    height:auto;
}


/*************************************************************************************
#main設定
**************************************************************************************/
#main{
    width:100%;
    float:none;
}


/*************************************************************************************
書籍一覧設定
**************************************************************************************/
.book_ul{
    gap:15px;
}
    
.book_ul li{
    width:100%;
}


/*************************************************************************************
box設定
**************************************************************************************/
.box2{
    padding:10px;
}



/*************************************************************************************
ul設定
**************************************************************************************/
/*********** シリーズ検索 ***********/
.search_series_ul li{
    width:100%;
}



/*************************************************************************************
dl設定
**************************************************************************************/
/*********** table風dl ***********/
.dl1{
    flex-wrap: wrap;
}
    
.dl1 dt{
    width:100%;
    padding:5px 10px 8px;
    font-size:90%;
}

.dl1 dd{
    padding:15px 10px;
    width:100%;
}

.dl1_inner{
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
    padding:15px;
}

/*********** 横並びdl（サイトマップ） ***********/
.sitemap_dl{
    gap:0;
    padding-left:10px;
    flex-wrap: wrap;
}

.sitemap_dl dt{
    width:100%;
    margin-bottom:5px;
}

.sitemap_dl dd{
    width:100%;
}


/*************************************************************************************
見出し設定
**************************************************************************************/
/*********** タブ風の見出し ***********/
#side .title1_text{
    min-width:180px;
}


/*************************************************************************************
ボタン設定
**************************************************************************************/
/*********** inputボタン ***********/
.btn4{
    min-width:calc(50% - 5px);
}

    

/*************************************************************************************
TOP MV設定
**************************************************************************************/
.mv_slider2_item{
    height:0;
    padding-top:81.70515097690941%;
    position: relative;
}

.mv_slider2_item img{
    object-fit: cover;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
}


/*************************************************************************************
TOP タブ設定
**************************************************************************************/
.tab_ul li{
    width:calc(50% - 2px);
}

.tab_ul a{
    width:100%;
}


/*********** 検索用 ***********/
#search_tab_ul li{
    margin-right:3px;
}
    
#search_tab_ul li:last-of-type{
    margin-right:0;
}  
    
#search_tab_ul li{
    width:calc(50% - 2px);
}
    
    

/*************************************************************************************
トピックス設定
**************************************************************************************/
/*********** TOPトピックス ***********/
.topics_date{
    width:100%;
    margin-bottom:2px;
}

.topics_title{
    background: url("../img/arrow1.png") 0 0.5em/5px no-repeat;
    width:100%;
}
    

/*************************************************************************************
書籍詳細
**************************************************************************************/
/*********** 書籍名 ***********/
#book_title_wrap{
    padding:5px 0 10px 8px;
}

#book_title{
    font-size:20px;
    margin-bottom:10px;
}

#book_title2{
    font-size:20px;
    margin-bottom:10px;
}

#book_meta{
    gap:20px;
    flex-wrap: wrap;
}

#book_img{
    width:70%;
    max-width:300px;
    margin:0 auto;
}

#book_img img{
    width:100%;
}

#book_info{
    width:100%;
}

#book_table th{
    width:70px;
}

#book_bn_ul{
    gap:6px;
    flex-wrap: wrap;
}
    
#book_bn_ul li{
    width:calc(50% - 3px);
}


/*************************************************************************************
書籍画面
**************************************************************************************/
/*********** 3カラム ***********/
.book_ul2{
    gap:12px;
    flex-wrap: wrap;
}

.book_ul2 li{
    width:100%;
}

.book_ul2_catch{
    padding:10px 10px;
}

.book_ul2_img{
    height:auto;
    padding-top:0;
    max-width:220px;
    width:auto;
    margin:0 auto 10px;
}

.book_ul2_img img{
    position:relative;
    height:auto;
}

.book_ul2_title{
    margin-bottom:5px;    
}

.book_ul2_title a{
    line-height:1.2;
    color:#539c29;
    font-weight: bold;
    text-decoration: none;
    font-size:90%;
}

.book_ul2_author{
    font-size:80%; 
    text-align: right;
    margin-bottom:5px;
}

.book_ul2_author a{
    line-height:1.2;
    color:#333;
}

.book_ul2_author a:hover{
    text-decoration: none;
}

.book_ul2_price{
    text-align:right;
    font-size:80%; 
}



/*************************************************************************************
ジャンル検索
**************************************************************************************/
.search_genre_item{
    width:100%;
}
    
}



/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:500px){
/*************************************************************************************
TOP タブ設定
**************************************************************************************/
/*********** 検索用 ***********/    
/*#search_tab_ul a{
    font-size:3vw;
}

#search_tab_ul a span:before{
    width:12px;
    height:12px;
}

#search_tab_ul a span:before{
    background: url(../img/i_search.png) 0 0/12px no-repeat;
}*/
    
    

/*************************************************************************************
トピックス設定
**************************************************************************************/
/*********** トピックス一覧 ***********/
#topics_ul2 a{
    padding:10px 0;
}
    
.topics_ul2_date{
    font-size:90%;
}

.topics_ul2_title{
    font-size:100%;
    background: url("../img/arrow3.png") 0 8px/5px no-repeat;
}


/*********** トピックス詳細 ***********/
#topics_detail_img_wrap{
    gap:12px;
}

#topics_detail_img_wrap figure{
    width:calc(33.33333333333333% - 8px);
}

#topics_detail_pager_ul{
    gap:10px;
    padding-top:10px;
}

#topics_detail_pager_ul li{
    width:calc(50% - 5px);
}

.topics_detail_pager_title{
    padding:0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}



/*************************************************************************************
書籍詳細
**************************************************************************************/
/*********** カテゴリー ***********/    
#bookcat_ul span {
    font-size: 70%;
    padding: 0 5px;
}

/*************************************************************************************
検索結果設定
**************************************************************************************/
/*********** ページャー ***********/
.result_pager_ul{
    gap:2px;
}

.result_pager_ul a,
.result_pager_ul span{
    height:20px;
    min-width:20px;
    line-height:18px;
    font-size: 80%;
}


/*********** 結果一覧 ***********/
#result_ul li{
    font-size:90%;
}

.result_img{
    width:80px;
}

.result_info{
    width:calc(100% - 90px);
} 
    


/*************************************************************************************
バックナンバー
**************************************************************************************/
#backnumber_ul li{
    gap:10px;
}

.backnumber_img{
    width:100px;
}

.backnumber_info{
    width:calc(100% - 110px);
}

.backnumber_title a{
    font-size:130%;
}
    
.backnumber_text{
    font-size:90%;
}



/*************************************************************************************
注文書ダウンロード
**************************************************************************************/
#order_ul li{
    width:calc(50% - 10px);
}
    
    
}