@charset "UTF-8";

@media only screen and (min-width: 360px) {

#main{
 width: 360px;
}
#menu,
#topics,
#special,
#contents,
.magazine_list{
 width: 350px;
}
#menu h3,
#topics h3,
#special h3,
.magazine_list h3{
 margin-top: 20px;
}
#menu ul li a,
#special ul li a,
#menu_btn a{
 letter-spacing: 2px;
}
#topics ul li a{
 font-size: 16px;
 padding: 10px 15px;
}
#contents_box p,
#furoku_box p,
#topics_box p,
#category_text p,
#topics_box dl dd p,
.category_list_text p,
.category_list dl dd p.review{
 width: 320px;
}
.category_list dl dd p.text{
 width: 280px;
}
.category_list dl dd p.book img{
 height: 340px;
 max-width: 340px;
}
.category_list dl dd p.cover img{
 height: 320px;
 max-width: 320px;
}
.category_list dl dd p.cover span{
 line-height: 298px;
}
#furoku_box,
.topics_list,
.category_list,
#category_text{
 margin-top: 20px;
}
#furoku_box dl dt{
 padding: 10px 15px;
}
.topics_list ol li{
 padding: 16px 20px 16px 8px;
}
.topics_list ol li div{
 width: 212px;
}
.topics_list ol li div p.title{
 line-height: 24px;
}
.topics_list ol li div p.date,
.topics_list ol li div p.dates{
 padding-top: 3px;
}
.topics_list ol li p.image img{
 width: 100px;
 height: 100px;
}
.topics_list ul li{
 padding: 20px;
}
.topics_list dl dt img{
 width: 320px;
 height: 320px;
}
.topics_list dl dd{
 padding-top: 14px;
 padding-bottom: 14px;
}
#magazine_info,
#magazine_text,
.magazine_box{
 width: 310px;
}
#magazine{
 padding-bottom: 20px;
 border: 1px solid #ccc;
}
#magazine h2{
 border-top: none;
 border-left: none;
 border-right: none;
}
#magazine_info{
 margin-top: 20px;
 border-top: 1px solid #ccc;
}
#magazine_text{
 margin: 0 auto;
}
.magazine_box{
 margin: 20px auto 0 auto;
}
.abc_a,
.abc_n,
.abc_s{
 padding-top: 20px;
 padding-bottom: 20px;
 border: 1px solid #ccc;
}
.abc_a,
.abc_b,
.abc_s,
#search{
 margin-top: 20px;
}
#search input[type=text]{
 width: 220px;
}

}

@media only screen and (min-width: 400px) {

#header h1,h2,h3{
 letter-spacing: 2px;
}
#header div{
  letter-spacing: 3px;
}
#main{
 width: 400px;
}
#menu,
#topics,
#special,
#contents,
.magazine_list{
 width: 390px;
}
#contents_box p,
#furoku_box p,
#topics_box p,
#category_text p,
#topics_box dl dd p,
.category_list_text p,
.category_list dl dd p.review{
 width: 360px;
}
.category_list_text table td,
.category_list dl dt a{
 letter-spacing: 2px;
}
.category_list dl dd p.book img{
 height: 380px;
 max-width: 380px;
}
.category_list dl dd p.cover img{
 height: 360px;
 max-width: 360px;
}
.category_list dl dd p.review{
 width: 350px;
}
.topics_list ol li{
 padding: 18px 24px 18px 24px;
}
#magazine_info,
#magazine_text,
.magazine_box{
 width: 350px;
}

}

@media only screen and (min-width: 480px) {

#header h1,h2,h3{
 font-size: 18px;
}
#header div{
 font-size: 22px;
}
#header ul{
 margin-top: 20px;
}
#main{
 width: 480px;
}
#menu,
#topics,
#special,
#contents,
.magazine_list{
 width: 440px;
}
#contents_box p,
#furoku_box p,
#topics_box p,
#category_text p,
#topics_box dl dd p,
.category_list_text p{
 width: 400px;
}
#contents_box p,
#furoku_box p,
#topics_box p,
#magazine_text div p,
.magazine_box div p,
#category_text p,
#contents_box ul li,
.category_list_text p,
.category_list dl dd p.text,
.category_list dl dd p.review{
 line-height: 26px;
}
.category_list dl dt a{
 margin-top: 20px;
}
.category_list dl dd p.book img{
 height: 400px;
 max-width: 400px;
}
.category_list dl dd p.text{
 height: 55px;
}
.category_list dl dd p.review{
 width: 390px;
}
.category_list ul{
 padding-bottom: 15px;
}
.category_list ul li{
 margin-top: 15px;
}
#furoku_box dl dt{
 padding: 15px 20px;
 letter-spacing: 2px;
}
#topics_box dl dt{
 padding: 16px 0 14px 0;
 letter-spacing: 2px;
}
#furoku_box dl dd.image{
 padding: 15px 0;
}
#furoku_box dl dd p{
 margin: 15px auto;
}
#topics_box dl dd.link{
 letter-spacing: 1px;
}
#topics_box dl dd.sns{
 padding: 20px;
}
.topics_list ol li{
 padding: 20px 20px 20px 8px;
}
.topics_list ol li div{
 width: 300px;
}
.topics_list ol li div p.title{
 padding-top: 5px;
 line-height: 30px;
}
.topics_list ol li div p.date{
 padding-top: 5px;
 font-size:16px;
}
.topics_list ol li div p.dates{
 padding-top: 6px;
 letter-spacing: 1px;
}
.topics_list dl dt{
 margin-top: 20px;
}
.topics_list dl dt img{
 width: 380px;
 height: 380px;
}
.topics_list dl dd{
 padding-top: 15px;
 padding-bottom: 15px;
}
.topics_list dl dd p{
 width: 310px;
 font-size: 16px;
}
#magazine_info,
#magazine_text,
.magazine_box,
.abc_n{
 width: 400px;
}
#magazine_info dl dt,
#magazine_info dl dd{
 height: 40px;
 line-height: 40px;
}
#magazine_text{
 padding: 15px 0;
}
#header ul li a,
#footer ul li a,
#magazine_text ul li a,
.link_btn a{
 letter-spacing: 2px;
}
.magazine_box{
 padding-bottom: 20px;
}
.magazine_box div{
 margin-top: 15px;
}
.magazine_box div h4{
 margin-top: 10px;
}
.magazine_box_image,
.link_btn{
 margin-top: 12px;
}
.magazine_box_image_add{
 margin-top: 20px;
 padding-top: 20px;
}
.abc_a,
.abc_n,
.abc_s{
 padding-bottom: 10px;
}
.abc_a,
.abc_s{
 width: inherit;
 box-sizing: border-box;
}
.abc_a iframe{
 margin-top: 0px;
 margin-bottom: 5px;
}
#rakuten{
 margin-bottom: 10px;
}
#search input[type=text]{
 width: 300px;
}

}

@media only screen and (min-width: 640px) {

#header{
 padding-top: 22px;
}
#header div{
 letter-spacing: 6px;
 padding-top: 0;
}
h2 span{
 letter-spacing: 1px;
 display: inline;
}
#main{
 width: 640px;
}
#menu,
#topics,
#special,
#contents,
.magazine_list{
 width: 600px;
}
#topics ul li a{
 font-size: 15.4px;
 padding: 0;
 height: 48px;
 line-height: 48px;
 text-align: center;
}
#menu ul:after,
#special ul:after,
.magazine_list ul:after{
 content : "";
 display : block;
 clear : both;
}
#menu ul li,
#special ul li,
.magazine_list ul li{
 width: 50%;
 float: left;
}
#contents_box p,
#furoku_box p,
#topics_box p,
#category_text p,
.category_list_text p{
 width: 555px;
}
#contents_box p,
#category_text p,
.category_list_text p,
#magazine_text div p,
.magazine_box div p,
#furoku_box p,
#topics_box p{
 line-height: 28px;
}
#furoku_box p,
#topics_box p,
#contents_box p,
#category_text p,
.category_list_text p{
 padding: 3px 0;
}
.category_list{
 border-bottom: 1px solid #ccc;
}
.category_list dl{
 width: 560px;
 margin: 0 auto;
 padding-bottom: 20px;
}
.category_list dl dt a{
 width: inherit;
}
.category_list dl dd{
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}
.category_list dl dd:after{
 content : "";
 display : block;
 clear : both;
}
.category_list dl dd div{
 width: 330px;
 border-left: 1px dotted #ccc;
 float: right;
}
.category_list dl dd p.image,
.category_list dl dd p.thumbnail{
 width: 225px;
 border-bottom: none;
 float: left;
}
.category_list dl dd p.book,
.category_list dl dd p.cover{
 padding: 15px 0;
 border-bottom: 1px dotted #ccc;
}
.category_list dl dd p.book img{
 height: 500px;
 max-width: 500px;
}
.category_list dl dd p.image img{
 height: 200px;
 max-width: 200px;
}
.category_list dl dd p.thumbnail img{
 height: 100px;
 max-width: 100px;
}
.category_list dl dd p.image{
 padding: 22px 0;
}
.category_list dl dd p.thumbnail{
 padding: 10px 0;
}
.category_list dl dd p.rank,
.category_list dl dd p.title,
.category_list dl dd p.kana,
.category_list dl dd p.pub,
.category_list dl dd p.issue,
.category_list dl dd p.sale,
.category_list dl dd p.age,
.category_list dl dd p.btm,
.category_list dl dd p.price,
.category_list dl dd p.style{
 line-height: 40px;
}
.category_list dl dd p.rank,
.category_list dl dd p.title,
.category_list dl dd p.kana,
.category_list dl dd p.pub,
.category_list dl dd p.issue,
.category_list dl dd p.sale,
.category_list dl dd p.age,
.category_list dl dd p.style{
 border-bottom: 1px dotted #ccc;
}
.category_list dl dd p.btm,
.category_list dl dd p.price{
 padding: 0;
}
.category_list dl dd p.title span,
.category_list dl dd p.issue span{
 display: inline;
}
.category_list dl dd p.text{
 height: 56px;
 margin: 12px auto;
 line-height: 28px;
}
.category_list dl dd p.review{
 width: 528px;
}
.category_list ul{
 padding-top: 5px;
 padding-bottom: 20px;
 border-bottom: none;
}
.category_list ul li{
 width: 550px;
 letter-spacing: 1px;
}
#furoku_box dl dt{
 text-align: center;
 letter-spacing: 0;
 padding: 12px 0;
}
#furoku_box dl dt.cover{
  letter-spacing: 1px;
}
#furoku_box dl dd p{
 width: 538px;
}
#topics_box dl dd p{
 width: 510px;
}
#topics_box dl dd img{
 padding: 5px 0;
}
#topics_box dl dd.sns{
 padding: 25px 50px;
}
.topics_list ol li{
 padding: 22px 48px 22px 40px;
}
.topics_list ol li div{
 width: 350px;
}
.topics_list ol li div p.title{
 font-weight: bold;
 letter-spacing: 2px;
 line-height: 37px;
}
.topics_list ol li div p.date,
.topics_list ol li div p.dates{
 padding-top: 8px;
 letter-spacing: 2px;
}
.category_list_text table th,
.topics_list ol li p.link,
.topics_list ul li p.link{
 letter-spacing: 2px;
}
.category_list_text table td{
 letter-spacing: 3px;
}
.topics_list ol li p.link,
.topics_list ul li p.link a,
.topics_list ol li div p.dates{
 font-weight: bold;
}
.topics_list ol li p.image img{
 width: 120px;
 height: 120px;
}
.topics_list dl dt{
 margin-top: 22px;
}
.topics_list dl dt img{
 width: 500px;
 height: 500px;
}
.topics_list dl dd p{
 width: 380px;
 font-size: 18px;
 line-height: 28px;
 letter-spacing: 1px;
}
#magazine_info,
#magazine_text,
.magazine_box{
 width: 560px;
}
#magazine_info{
 border-bottom: none;
}
#magazine_info:after{
 content: "";
 display: block;
 clear: both;
}
#magazine_info dl{
 width: 360px;
 height: 200px;
 margin: 0;
 float: right;
}
#magazine_info dl dt{
 width: 90px;
 border-left: 1px solid #ccc;
}
#magazine_info dl dd{
 width: 270px;
}
#magazine_info_image{
 width: 200px;
 height: 200px;
 padding: 20px 0;
 border-bottom: 1px solid #ccc;
 float: left;
}
#magazine_text div,
#magazine_text ul,
.magazine_box div,
.link_btn a{
 width: 520px;
}
#magazine_text ul li a{
 margin-top: 12px;
}
#magazine_text ul li p{
 text-align: center;
}
.magazine_list ol{
 padding: 20px 20px 5px 20px;
}
.magazine_box_image img,
.magazine_box_image_add img{
 max-width: 520px;
}
.abc_n{
 width: 560px;
}
#search input[type=text]{
 width: 460px;
}

}

@media only screen and (min-width: 1000px) {

#wrap{
 width: 960px;
 margin: 0 auto;
}
#main{
 width: inherit;
}
#main:after{
 content : "";
 display : block;
 clear : both;
}
#contents{
 width: 600px;
 float: left;
}
#menu{
 width: 340px;
 float: right;
}
#menu ul li{
 width: 100%;
 float: none;
}
#special{
 width: 960px;
}
#special ul li{
 width: 33.3333333333%;
}
#header h1,
#header p,
#header div{
 width: 600px;
}
#header ul,
#footer ul{
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}
#rakuten{
 height: 250px;
}
#error_text{
 padding-top: 41px;
 padding-bottom: 50px;
}
#search{
 padding: 15px 10px 10px 15px;
}
#search input[type=text]{
 width: 210px;
}

}