/*タブレットサイズに適用*/
@media screen and (max-width : 1024px){
.main{
padding: 30px 20px;}
.main_gaiyou{
padding: 20px 40px;}
.gaiyou_cap {
    font-size: 1rem;
    line-height: 2rem;
}

.cp_title{
	font-size:1.5rem;
}

.goods_flex{
	display:flex;
	width:100%;
}
.goods_flex_item{
	width:180;
	margin-right:20px;
}
.goods_flex_text{
	width: calc(100% - 200px);
	
}

.button a {

    padding: 10px 15px;
}

/* 既刊リスト */

.kikanlist li {width:200px;}


/* あらすじ本 */


.book_flex{
	display:flex;
}
.book_flex_left{
	width:200px;
	margin-right:20px;
	border: solid 1px #ccc;
}
.book_flex_right{
	width: calc(100% - 220px);
}
.book_gaiyou{font-size:1rem;}

/* クラクター */

.cara_left{margin-right:15px;
width:200px;
margin-right:20px;}
.cara_left img{
  border: 1px solid #cccccc;
  width:200px;
}
.cara_right{
  display: flex;
    flex-direction: column;/* 子要素の縦並び */
  width: calc(100% - 220px);}
.mg_b20{margin-bottom:20px;}

.cara_name{margin-bottom:5px;
font-weight:600;
font-size:1.1rem;
color:#000;}

.cara_name2{margin-bottom:5px;
font-weight:600;
font-size:1rem;
}
}



/*スマホサイズに適用*/

@media screen and (max-width : 599px){
	body {
font-size:0.9rem;
}

.cp_title{
	font-size:1.2rem;
	padding:5px;
}

/* 書籍情報 */

.book {
	width:250px;
	margin-bottom:20px;}

/* 試読ボタン */

.button {padding:0 30px;
margin-top:20px;}

/* あらすじ本 */


.book_flex{
	display:block;
}
.book_flex_left{
	width:300px;
	margin:0 auto;
	
	margin-bottom:20px;
}
.book_flex_right{
	width:100%;
}
.book_gaiyou{font-size:0.9rem;}

/* キャラクター */
.cara_flex {
display:block;
margin:0 auto;
    margin-bottom: 25px;
}
.cara_left{margin-right:0px;
margin:0 auto;
width:250px;
margin-bottom:10px;}

.cara_right{
  display: flex;
    flex-direction: column;/* 子要素の縦並び */
  width: 100%;}
  
 .cara_name2 {
	 margin:0 auto;
margin-bottom:2px;
 font-size: 0.95rem;}

.kikanlist {
    display: flex;
	 flex-flow: column;
    justify-content: center;
    width: 100%;
	
}
    .kikanlist li {
        width: 250px;
        margin: 0 auto;
        padding-bottom: 20px;
        margin-bottom: :20px;
    }


.sp_br {
    display: block;
  }


.w_box {
    padding: 20px 15px;
}
.main {padding: 20px 15px;}



}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 599px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}