@charset "UTF-8";

/*cmn*/

.ttl_header{
	background: #dee2e7;
	background-image: url("../images/bg_ttl.png");
	background-position: top right;
	background-repeat: no-repeat;
	color: #111;
	margin-bottom: 1.5em;
}
.ttl_header .content_inner{
    max-width: 1000px;
}

/*pc*/
@media screen and (min-width: 767.1px){
	.comics_list{padding: 2em 0 4em; display: block !important;}
}


@media screen and (max-width: 1000px){
    .content_inner{width: 100%;}
	.comics_list{padding-left: 2.5%; padding-right: 2.5%;}
}

/*sp*/
@media screen and (max-width: 767px){
	.content.content_inner{padding-bottom: 3em;}
}

/*作品一覧--------------------------------------------------------------*/


/*タイトル・作者*/

.page_ttl{font-size: 3em; font-weight: 900; color: #111111; text-align: center; }
.page_ttl span{ display: block; font-size: 0.4em; font-family: 'Teko', sans-serif; }

.page_artist{font-size: 1.1em;}

/*pc*/
@media screen and (min-width: 767.1px){
    .ttl_header .content_inner{padding: 0 1em; }
}

/*sp*/
@media screen and (max-width: 767px){
    .ttl_header{ background-image: url("../images/bg_ttl_sp.png"); background-size: auto 100%; }
	.ttl_header .content_inner { padding-right: 2.5%; padding-left: 2.5%; }
    .page_ttl h2{ margin: 0 auto; padding: 2.5% 0; }
    .page_sub{ padding:2.5%; }
    .page_sub{ width: 20%; }
    .page_ttl{ width: 100%; font-size: 2em; }
}

/*タイトル*/

.ttl_wrap{ background: #fff; }
.ttl_wrap h3{ font-size: 3rem; padding: 1.55rem 0; }

/*sp*/
@media screen and (max-width: 767px){
.ttl_wrap{ background-color: #111111; }
}

/*月一覧*/
.month_list{margin-bottom: 1em;}
.month_list li a{
	width: 100%;
	display: block;
	background: #222;
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: 1em 0;
	box-shadow: 0 2px 0 0 #5b5b5b;
}
.month_list li a:hover{ color: #111111; opacity: 1;}
/*pc*/
@media screen and (min-width: 767.1px){
	.month_list li{ width: 7.93%; margin: 0 2px; }
	.month_list li:last-of-type{border-right: none;}
}

/*sp*/
@media screen and (max-width: 767px){
	.ttl_wrap h3{font-size: 6.6vw; padding: 2.5% 2.5% 2.5% 3%; text-align: left; }
	.month_list li{width: 76px; margin-left: 10px; }
	.month_list ul{width: calc(86px * 12); max-width: 1000%; padding-bottom: 5px;}
	.month_list{overflow-x: auto; margin-top: 1em;}
}



/*コミックスリスト*/
.comics_list > li{
	background: #fff;
	padding: 1.5% 2% 4% 2%;
	margin-top: 2em;
	border-bottom: 1px solid #ebebeb;
}
.comics_list > li:first-of-type{
	margin-top: 0;
}
.comics_list > li:last-child{ border-bottom: none; }

.comics_list .new:after{
    display: inline-block; content:'NEW!!'; color: #e61753; position:inherit; top:0; right:0; z-index: 10; line-height: 2em; font-size: .8em; font-family: 'Noto Sans JP';
}
.comics_list .new:before{ display: none; content:''; }

.comics_list > li .comics_img{ width: 370px; }
.comics_list > li .comics_img_wrap{ 
	text-align: center;
	padding: 20px;
	background-color: #dee2e7;
}

.comics_list > li .comics_img img{ width: 100%; }

.comiclabel {
    margin: 0 0 0.8em 0;
}

@media screen and (max-width: 767px){
    .comics_list .new:after,
	.comics_list .new:before{font-size: 1rem;}
	.comics_list .new:before{border-radius: 3.3em; width:3.3em; height:3.3em;}
}

.artist{ color: #434343; }
.copyright{ font-size: 0.8em; padding: 1em 0 0 0; color: #434343; }

.sale_date{
	padding: 1em ;
	width: 100%;
	background: #ddecff;
	color: #111111;
	font-weight: 500;
}

.comics_ttl h4{color: #000; font-weight: 500;}
.comics_dtl h5{color: #2878DB; padding-top: 0.5em; font-size: 1.7em; font-weight: 500;}
.comics_dtl .intro{font-weight: 300; margin-top: .5em;}
.comics_dtl .intro span{ color: #ff5b0c; font-weight: 500;}

.sale_btn .btn{
	background: #FFF;
    background-image: none;
	border: 2px solid #111111;
	padding: 0.7em;
	color: #222;
	font-size: 1em;
	margin-bottom: 1.3em;
	background-repeat: no-repeat;
	background-position: right 4px bottom 4px;
	background-image: url("../../common/images/btn_bg_b.png");
	box-shadow: 0 2px 0 #5b5b5b;
}

.info_btn {margin-bottom: 1em;}
.info_btn .btn{
	font-size: 1.3em;
	line-height: 1;
	background-color: #111;
	background-position: right 5px bottom 5px;
	background-image: url(../images/btn_bg.png);
}

.item_list{width: 95%; margin: 0 auto 1em;}
.item_list li{border-bottom: 1px solid #dcdcdc;}
.item_list li a{
	padding:1em;
	display: block;
	position: relative;
	padding-right: 2.5em;
    color: #FFF;
    background-image: url("../../common/images/sp_arrow_w.png");
    background-repeat: no-repeat;
    background-position: 99% 50%;
    padding-right: 2em;
    font-size: 1.2em;
}
.item_list a:after{content:''; position: absolute;
	height: .7em; width: .7em; background: url(../../common/images/arrow_b.png) no-repeat;
	top:0; bottom:0; right: 1em; margin: auto; -webkit-background-size: contain; background-size: contain;}

.comics_img img{border:1px solid #ebecee;}



/*pc*/
@media screen and (min-width: 767.1px){
	.comics_img img{width: 200px; display: block; margin-bottom: 1em;}
	.comics_img .sale_date span{display: block; text-align: center;}
	.comics_body{width: calc(100% - 370px); padding-left: 3%; }
	.comics_ttl h4{font-size: 2.1em;}
	.comics_ttl .artist{font-size: 1.15em; font-weight: 400;}
	.comics_dtl h5{font-size: 1.3em;}
	.comics_body > div{margin-bottom: 1em;}
	.comics_body > div:last-of-type{margin-bottom: 0;}
	.sale_btn {
	padding-top: 4%;
	border-top: 1px solid #ebebeb;
	margin-top: 4%;
	}
	.info_btn li,
	.sale_btn li{flex-basis: 48.2% !important; max-width: 48.2% !important; width: 48.2% !important;}
	.sale_btn li,
	.info_btn li{margin-right: 3%;}
	.sale_btn li:nth-child(2n),
	.info_btn li:nth-child(2n){margin-right: 0;}
	.sale_btn img,
	.info_btn img{height: 2.4vw; width: auto; vertical-align: middle; max-height: 27px ;}
	.item_list.odd li:last-of-type{border-bottom: none;}
	.item_list.even li:nth-last-of-type(-n + 2){border-bottom: none;}
	/*.item_list.sp{display: none !important;}*/
}

/*pc l*/
@media screen and (min-width: 1000px){
	.award_btn p{font-size: 1.4rem;}
	.award_btn p.btn_head{font-size: 1.3em;}
	.award_btn,
	.award_visual{width: 100%;}
}

/*sp*/
@media screen and (max-width: 767px){
	.month_cont{margin-bottom: 1em;}
	.month_cont .item_list,
	.month_cont .comics_list{}
	.ttl_wrap h3:before,
	.ttl_wrap h3:after{content:''; display: inline-block; right: 2.5%; width: 1em; height: 1em; background: #fff; position: absolute; top: 0; bottom: 0; margin: auto; line-height: 1; text-align: center;}
	.ttl_wrap h3:before{content: '+'; background: none; color: #222; z-index: 1;}
	.ttl_wrap.active h3:before{content: ''; height: 4px; width: 2vw; background: #222;  right: 5%;}
	.comics_list > li{ padding: 4% 0; margin: 3.5%; }
	.comics_img img{width: 60%; margin: 1em auto 1.5em; display: block;}
	.comics_ttl{margin-top: 1em;}
	.comics_ttl h4{font-size: 1.4em; position: relative;}
	
	.copyright{ padding: 1em 0 ; }
	
	.sale_date{ margin-top: 1em; text-align: left; font-size: 3.8vw; font-weight: 500;}
	.comics_dtl{margin: 0 auto 1.5em auto;}
	.comics_dtl h5{font-size: 1.4em; }
	.sale_date span:first-of-type{margin-right: 3%;}

	.sale_btn {
	padding-top: 4%;
	border-top: 1px solid #ebebeb;
	margin: 4% 0;
	}
	
	#comics .info_btn li,
	#comics .sale_btn li{flex-basis: 48.2% !important; max-width: 48.2% !important; width: 48.2% !important;}
	#comics .info_btn li:nth-child(odd),
	#comics .sale_btn li:nth-child(odd){margin-right: 3%;}
	#comics .sale_btn li:nth-child(-n +2){margin-bottom: 1em;}
	
	#comics .info_btn .btn{font-size: 4vw !important; padding: 0.9em 0 !important; display: block;}
	#comics .sale_btn .btn{font-size: 6vw !important; padding: 0.35em 0 !important; display: block; }
	#comics .sale_btn .btn img{max-height: 1em; display: block; margin: 0 auto;}
	
}


/*sp*/
@media screen and (max-width: 767px){
    
}


/*sp*/
@media screen and (max-width: 767px){

}

/*pc*/
@media screen and (min-width: 767.1px){

}
/*pc l*/
@media screen and (min-width: 1000px){
}