@charset "UTF-8";

/*cmn*/
.news_body,
.character_list,
.comic_list,
.series_list {padding:2em 0 5em;}


@media screen and (max-width: 1000px){
    .content_inner{width: 100%;}
    .news_body,
    .character_list,
    .comic_list,
    .series_list{padding: 5% 2.5% 10%;}
}

.ttl_header{
    background: #222;
}
.ttl_header .content_inner{
    max-width: 1000px;
}

.series_more{
    margin: 3em 0;
}
.series_more .btn{
    font-size: 1.7em !important;
    padding: 0.5em 0 !important;
    width: 95%;
}

.series_more.end{
    margin:-1.5em 0 3em;
}

/*pc*/
@media screen and (min-width: 640.1px){
    .series_more .btn{
        font-size: 2em !important;
        border-radius: 40px 40px 0;
        max-width: 500px;
        width: 100%;
    }
}

/*sp*/
@media screen and (max-width: 640px){
    .ttl_header .content_inner{padding-right: 2.5%; padding-left: 2.5%;}
    .series_more.end{margin-top: -.5em;}
}

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


#series{background: none;}

/*タイトル・作者*/

.page_sub{text-align: right;}
.page_ttl{font-size: 2em; font-weight: 500;}

.page_artist{font-size: 1.1em;}
.page_ttl,
.page_sub{width: 50%; color: #FFF;}
/*pc*/
@media screen and (min-width: 640.1px){
    #series .ttl_header{padding:.8em;}
    #series .ttl_header .content_inner{padding: 0 1em;}
    
}

/*sp*/
@media screen and (max-width: 640px){
    #series .ttl_header{background: #222; color: #FFF;}
    #series .page_ttl h2{margin: 0 auto; padding: 2.5% 0;}
    #series .page_sub{padding:2.5%;}
}

.series_list li{
    margin-right: 1.33333%;
    margin-top: 1em;
    
}

.content_block.series_list li{
    transition:box-shadow .3s;
    -webkit-box-shadow: 0 0 8px 0 #bec0c3; box-shadow: 0 0 8px 0 #bec0c3;
}

/*-----------------------
series
-----------------------*/
.series_list li a{
    background: #fff;
    padding:0.929em;
    display: block;
}

.series_list li:hover {-webkit-box-shadow: none !important; box-shadow:none !important;}
.series_list li:hover a{
    background: #bec0c3;
    
}

.series_list li .series_img img{
    width:100%;
}
.series_list li .series_ttl{font-weight: 600; margin-bottom: 0.3em;}
.series_list li .series_artist{font-weight: 300; font-size:.8em ; line-height: 1.3;}
.series_list li .series_copy{font-weight: 300; font-size: 1rem; margin-top: 1em; color: #777;}

.up_btn{
	margin: 2% 0 0; 
}

.up_btn img{
	width: 100%;
	max-width: 675px;
}

/*pc*/
@media screen and (min-width: 640.1px){
    .series_list li:nth-child(4n){
        margin-right: 0;
    }
    .series_list li:nth-child(-n + 4){
        margin-top: 0;
    }
}

/*sp*/
@media screen and (max-width: 640px){
    .series_list li a{
        display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 100%;
        -webkit-box-pack: justify; -ms-flex-pack: justify; flex-pack: justify; justify-content: space-between;
    }
    .series_img{width:35%;}
    .series_dtl{width:62%;}
}


.mangup_list{
    background-color: #222; background-image: url(../../common/images/bg_square_top.png), url(../../common/images/bg_square_bottom.png); background-position: right -100px, -30vw 230px; background-repeat: no-repeat;
}

.ttl_mangaup h2{font-size: 2.6em; padding: 1em 0 .4em; color: #68cd25;}

.mangup_list li{-webkit-box-shadow: none !important; box-shadow:none !important;}


/*sp*/
@media screen and (max-width: 640px){
    .ttl_mangaup h2{font-size: 2.3em; padding: 0.7em 0 0em;}
    .mangup_list{background-image: url(../../common/images/bg_square_top.png); background-position: right -100px; -webkit-background-size: contain ; background-size: contain ;}
}














/*作品詳細--------------------------------------------------------------*/


#series_detail .series_artist{text-align: right;}
#series_detail .series_artist p {margin-bottom: .2em;}
#series_detail .series_artist p.small{font-size: .8em;}
#series_detail .series_artist p span{font-size: 0.7em; display: block;}
#series_detail .series_ttl{font-size: 2em; font-weight: 500;}
#series_detail .series_ttl span{display: block; font-size: .5em;}

#series_detail .series_artist{font-size: 1.1em;}

/*pc*/
@media screen and (min-width: 640.1px){
   
    #series_detail .ttl_header{padding:.8em;}
    #series_detail .ttl_header .content_inner{padding: 0 1em;}
    #series_detail .series_ttl,
    #series_detail .series_artist{width: 50%; color: #FFF;}
}

/*sp*/
@media screen and (max-width: 640px){
    .ttl_header{
        background: #FFF;
    }
     #series_detail .ttl_header .content_inner{padding: 0;}
    #series_detail .series_ttl{background: #222; color: #FFF;}
    #series_detail .series_ttl h2{width: 95%; margin: 0 auto; padding: 2.5% 0;}
    #series_detail .series_artist{padding:2.5%;}
}




/*タイトル一覧*/
.ttl_story h3{color: #68cd25;}

/*インフォメーション*/
.ttl_information{margin-top: 5px;}
.ttl_information h3{color: #ffb400; background-color: #222; background-image: url(../../common/images/bg_square_top.png); background-position: 480px -130px; background-repeat: no-repeat;}

/*リンク*/
.ttl_link{margin-top: 5px;}
.ttl_link h3{color: #deff00; background-color: #222; background-image: url(../../common/images/bg_square_top.png); background-position: 480px -130px; background-repeat: no-repeat;}

/*キャラクター*/
.ttl_character{margin-top: 5px;}
.ttl_character h3{color: #e8548f; background-color: #222; background-image: url(../../common/images/bg_square_top.png); background-position: 480px -130px; background-repeat: no-repeat;}

/*コミックリスト*/
.ttl_comic{margin-top: 5px;}
.ttl_comic h3{color: #17dcc3; background-color: #222; background-image: url(../../common/images/bg_square_top.png); background-position: 480px -130px; background-repeat: no-repeat;}
/*STORY*/
#series_story{
    color: #fff;
    background-color: #222; background-image: url(../../common/images/bg_square_top.png); background-position: 480px -60px; background-repeat: no-repeat;}
#series_story a{color: #feb300;}

/*商標*/
#series-copy p{
	padding: 0 0 4% 0!important;
	color: #222222;
}

/*sp*/
@media screen and (max-width: 640px){
    /*インフォメーション*/
    .ttl_information h3{-webkit-background-size: 120%; background-size:120% ; background-position: -250% -80px;}
    /*リンク*/
    .ttl_link h3{-webkit-background-size: 120%; background-size:120% ; background-position: -250% -80px;}
    /*キャラクター*/
    .ttl_character h3{-webkit-background-size: 120%; background-size:120% ; background-position: -250% -80px;}
    /*コミックリスト*/
    .ttl_comic h3{-webkit-background-size: 120%; background-size:120% ; background-position: -250% -80px;}
}



.ttl_wrap h3{font-size: 3.6rem; font-weight: 900; line-height: 1; padding: 1.4rem .4em; max-width: 1000px; margin:0 auto;}

#series_main img{max-width:100%; width: 100%; height: auto; display: block;}

#series_story p{padding:0 2.1em 1.8em;}

#series_story .btn_wrap{padding-bottom: 2em; text-align: center; }
#series_story .btn{background-color: #68cd25; color: #FFF; }
#series_story .btn img{width:1.5em; height:auto; margin-right: .5em; vertical-align: middle;}
#series_story .btn span{vertical-align: middle;}

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

/*ボタン個数によって出し分け*/
/*1*/
#series_story .btn_wrap .btn:only-child {
  max-width:400px;
}

/* 2つの場合 */
#series_story .btn_wrap .btn:first-child:nth-last-child(2),
#series_story .btn_wrap .btn:first-child:nth-last-child(2) ~ .btn {
    max-width:400px;
    width:49%;
}
#series_story .btn_wrap .btn:first-child:nth-last-child(2){
    margin-right: 1%;
}

/* 3つの場合 */
#series_story .btn_wrap .btn:first-child:nth-last-child(3),
#series_story .btn_wrap .btn:first-child:nth-last-child(3) ~ .btn {
    max-width:400px;
    width:30%;
    margin-left: 1%;
}
#series_story .btn_wrap .btn:first-child:nth-last-child(3){
    margin-left: 0;
}


/*sp*/
@media screen and (max-width: 640px){
    #series_story{
        -webkit-background-size: 170%;
        background-size: 170%;
        background-position: 30px -10px;
    }
    #series_story .btn{display: block; max-width: 75% !important; width: 75% !important; margin:auto auto 1.5em!important; font-size: 1.5em !important;}
    #series_story .btn:last-of-type{margin-bottom: 0 !important;}
    
}

/*-----------------------------------
【ニュース】
--------------------------------------*/

.news_body li{margin-bottom: 1em; line-height: 1.8;}
.news_body li:last-of-type{margin-bottom: 0;}
.news_body a{text-decoration: underline;}
.news_body a:hover{text-decoration: none;}

.news_body li span{margin-right: 1em;}
.news_body li a {width: calc(100% - 6em);}

/*pc*/
@media screen and (min-width: 640.1px){
    .news_body{padding-right: 2.1em ; padding-left: 2.1em;}
}

/*-----------------------------------
【リンク】
--------------------------------------*/
ul.link_list{padding: 2em 0 5em;}
ul.link_list li.flx{ margin-right: 1%;}

@media screen and (max-width: 1000px){
    ul.link_list {padding: 5% 2.5% 10%;}
    ul.link_list.flx.bu2 > *{flex-basis: auto !important; max-width: auto !important; width: auto !important; justify-content:start;}
    ul.link_list.flx.bu3 > *{flex-basis: 32% !important; max-width: 32% !important; width: 32% !important; flex-wrap: wrap; margin-right: 0; justify-content:space-between;}
}
@media screen and (max-width: 640px){
    ul.link_list {max-width: 96% !important; width: 96% !important;margin:0 auto; padding: 5% 0%; justify-content:space-between;}
    ul.link_list li.flx{flex-basis: 49% !important; max-width: 49% !important; width: 49% !important; flex-wrap: wrap; margin: 0 0 2% 0;}
    ul.link_list li img{width: auto;}
}
@media screen and (max-width: 322px){
    ul.link_list li img{width: 100%;}
}

/*-----------------------------------
【キャラクター】
--------------------------------------*/

.character_list li .character_img img{width: 100%; max-width: 100%; display: block;}

.character_list li{padding: 1em; margin-right: 2%; margin-top: 2%; -webkit-box-shadow: 0 0 8px 0 #bec0c3; box-shadow: 0 0 8px 0 #bec0c3;}
.character_list li .character_dtl{padding-left: 1em;}
.character_name{font-size: 1.1em; font-weight: 600; line-height: 1.2; margin-bottom: 0.5em;}
/*pc*/
@media screen and (min-width: 640.1px){
    .character_list li .character_img{width: 42.9%; max-width: 125px;}
    .character_list li .character_dtl{width: 57.1%;}
    .character_list li:nth-child(3n){margin-right: 0;}
    .character_list li:nth-child(-n + 3){margin-top: 0;}
}

/*sp*/
@media screen and (max-width: 640px){
    .character_list li{margin-bottom: 1em;}
    .character_list li .character_img{width: 20%; max-width: 142px;}
    .character_list li .character_dtl{width: 80%;}
    .character_list li:first-child{margin-top: 0;}
}

/*-----------------------------------
【comic list】
--------------------------------------*/

.comic_list li .comic_img img{width: 100%; max-width: 100%; display: block;}

.comic_list li{padding: 1em; margin-right: 2%; margin-top: 2%; -webkit-box-shadow: 0 0 8px 0 #bec0c3; box-shadow: 0 0 8px 0 #bec0c3;}
.comic_name{font-size: 1em; font-weight: 600; line-height: 1; margin-bottom: 0.5em;}

.comic_list li .comic_txt .btn{background: #FFF; border: 2px solid #e5e5e5; padding: 0.3em; color: #222; font-size: 1em; margin-bottom: 0.37em; background-repeat: no-repeat; background-position: right 2px bottom 2px; background-image: url(../images/btn_bg_b.png);}
.comic_list li .comic_txt .btn:last-of-type{margin-bottom: 0;}

.comic_list li .comic_txt .btn img{height: 23px; width: auto; vertical-align: middle;}



/*pc*/
@media screen and (min-width: 640.1px){
    .comic_list li .comic_img{width: 42.9%; max-width: 125px;}
    .comic_list li .comic_dtl{width: 57.1%; padding-left: 1em;}
    .comic_list li:nth-child(3n){margin-right: 0;}
    .comic_list li:nth-child(-n + 3){margin-top: 0;}
    
}


@media screen and (max-width: 1000px){
    .comic_list li .comic_txt .btn img{height: 16px;}
}

/*sp*/
@media screen and (max-width: 640px){
    .comic_list li{padding: .8em;}
    .comic_list .comic_name{margin-top: 0.5em; line-height: 1.5;}
    .comic_list li .comic_txt .btn{padding:.6em !important; margin-bottom: .8em !important; font-size: 2vw !important;}
    .comic_list li .comic_txt .btn img{height: 20px;}
    .comic_list li:nth-child(2n){margin-right: 0;}
    .comic_list li:nth-child(-n + 2){margin-top: 0;}
    
}