@charset "UTF-8";

/*cmn*/
.news_body {
	padding: 2em 0 5em;
}

.series_list {
	padding: 0 0 3em 0;
}

.comics_list {
	padding: 2em 0;
}

@media screen and (max-width: 1000px) {
	.content_inner {
		width: 100%;
	}

	.news_body {
		padding: 5% 2.5% 10%;
	}
}

.comics_list {
	padding: 5% 2.5%;
}


.ttl_header {
	background: #FFF;
	transform: rotate(0.03deg);
}

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

.series_more {
	padding: 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 {
		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;
	color: #272e58;
}

/*タイトル・作者*/

.page_ttl,
.page_sub {
	width: 50%;
	color: #272e58;
}

#series .ttl_wrap h2 {
	padding: 0.2rem 0 0.5rem 50px;
}

#series .ttl_wrap h2::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url("../../common/images/ico_list_g.png");
	background-repeat: no-repeat;
	background-position: 95%;
	background-size: 40px;
	position: absolute;
	left: 10px;
	top: 10px;
}

.series_list li {
	margin-right: 1.33333%;
	margin-top: 1em;
	background-color: #FFFFFF;
}


/*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 {}

	.page_ttl,
	.page_sub {
		width: 100%;
		color: #272e58;
	}

	.ttl_header .content_inner {
		padding-left: 13%;
	}

	#series .ttl_wrap h2::before {
		width: 30px;
		height: 30px;
		background-size: 30px;
		position: absolute;
		left: -41px;
		top: 20px;
	}

	#series .page_ttl h2 {
		margin: 0 auto;
		padding: 1% 0 3% 0;
		font-size: 3.5rem;
	}

	.ttl_wrap span.sub {
		font-size: 0.4em;
		margin-left: 0.5em;
	}

	#series .page_sub {
		padding: 2.5%;
	}

	.series_list li {
		margin: 1em 4% 0 4%;
	}

	.series_list li .btn span.icon::before {
		left: 0px;
	}

	.series_list li .btn_trial span.icon::before {
		width: 20px;
		height: 20px;
	}

	.series_list li .btn span.icon {
		padding-left: 20px;
	}

}



/*-----------------------
series
-----------------------*/

.series_list li .series_img img {
	width: 100%;
}

.series_list li .comic_info {
	padding: 0 1em;
	margin: 0.5em 0 1em 0;
}

.series_list li .comic_ttl {
	font-weight: 800;
	line-height: 1.3;
	transform: rotate(0.03deg);
	margin-bottom: 0.2em;
	font-size: 14px !important;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

.series_list li .series_artist {
	font-weight: 400;
	font-size: .8em;
	line-height: 1.3;
	transform: rotate(0.03deg);
}

.series_list li .series_copy {
	font-weight: 400;
	font-size: 1rem;
	margin-top: 1em;
	color: #777;
}

.series_list li .comic_btn {
	padding: 1em;
}

.series_list li .comic_btn .btn {
	margin: 0 0 .5em 0;
}

.series_list li .comic_btn .btn_buy {
	font-size: 1em;
	padding: 0.8em;
	display: table;
}

.series_list li .comic_btn .btn_buy span {
	display: table-cell;
	vertical-align: middle;
}

.series_list li .comic_btn .btn_buy img {
	height: 17px;
	margin-bottom: -.4em;
}

.series_list li .comic_btn span {
	transform: rotate(0.03deg);
}

.series_list ul a {
	color: #272e58;
	display: block;
	height: 100%;
	width: 100%
}

/*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 {
		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_list ul a {
		color: #272e58;
		display: block;
		height: 100%;
		width: 100%
	}

	.series_list li .comic_img {
		width: 48%;
		float: left;
		padding: 2%;
	}

	.series_list li .comic_info {
		padding: 0.5em;
		width: 54%;
		margin-left: 46%;
	}

	.series_list li .comic_btn {
		padding: 1em;
		width: 56%;
		margin-left: 45%;
	}

	.series_list li .comic_btn .btn {
		font-size: 1.2rem !important;
	}

	.series_img {
		width: 35%;
	}

	.series_dtl {
		width: 62%;
	}
}


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




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


#series_detail {
	color: #272e58;
}

#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 h2 {
	font-size: 2em;
	padding-bottom: .5em;
	font-weight: 700;
}

#series_detail .series_ttl h2 span {
	display: block;
	font-size: .5em;
	font-weight: 400;
}


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

.series_artist .icon {
	margin-left: 20px;
	position: relative;
}

.series_artist .icon::before {
	position: absolute;
	content: '';
	display: inline-block;
	width: 16px;
	height: 20px;
	background-image: url("../../common/images/ico_author.png");
	background-size: contain;
	vertical-align: middle;
	left: -25px;
	top: 3px;
}

.series_artist .small.icon::before {
	top: 1px;
}

.series_artist .ruby.icon::before {
	top: 12px;
}



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

	#series_detail .ttl_header {
		padding: .8em .8em 1.2em .8em;
	}

	#series_detail .ttl_header .content_inner {
		padding: 0 1em;
	}
}

/*sp*/
@media screen and (max-width: 640px) {
	.ttl_header {
		background: #FFF;
	}

	#series_detail .ttl_header .content_inner {
		padding: 0;
	}

	#series_detail .series_ttl h2 {
		width: 90%;
		margin: 0 auto;
		padding: 2.5% 0;
	}

	#series_detail .series_artist {
		padding: 2.5% 6% 3.5% 6%;
	}
}




/*タイトル一覧*/
.ttl_wrap {
	margin-top: 5px;
}

.ttl_wrap h3 {
	color: #FFF;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	padding: 1.4rem .7em;
	margin: 0px auto 0 auto;
	width: auto;
	position: absolute;
	top: -1em;
	left: .5em;
	background-image: url("../../common/images/ico_bg_blue.png");
	background-repeat: no-repeat;
	background-position: 5% 50%;
}

#series_story .ttl_wrap {
	margin-top: 0;
}

@media screen and (max-width: 640px) {
	.ttl_wrap h3 {
		background-position: 7% 50%;
		background-size: auto 70%;
	}
}



/*STORY*/
#series_story {
	color: #272e58;
	background-color: #FFF;
}

#series_story h3 {
	left: .3em !important;
}

#series_story .btn_trial {
	width: 100%;
}

#series_story .btn_buy img {
	height: 25px;
	margin-bottom: -.4em;
}

/*sp*/
@media screen and (max-width: 640px) {
	#series_main {
		width: 90%;
		margin: 2em auto 0 auto;
	}

	#series_story {
		color: #272e58;
		background-color: #FFF;
		width: 90%;
		margin: 0 auto;
	}

	.ttl_wrap h3 {
		font-size: 2.5rem;
	}

}


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

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

#series_story .btn_wrap {
	padding-bottom: 2em;
	text-align: center;
}

#series_story .btn span {
	font-size: 2rem;
}

/*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: 90% !important;
		width: 90% !important;
		margin: auto auto 1em !important;
		font-size: 1.2em !important;
		padding: 1.5rem 0 !important;
	}

	#series_story .btn:last-of-type {
		margin-bottom: 0 !important;
	}

}

/*-----------------------------------
【ニュース】
--------------------------------------*/
#series_information {
	color: #272e58;
	background-color: #FFF;
	padding: .5em 1em;
	margin-top: 6em;
}

.news_body {
	padding: 0;
	margin: 4em 1.5em 1.5em 1.5em;
	max-height: 100px;
	overflow-y: scroll;
}

.news_body li {
	margin-bottom: 1.2em;
	line-height: 1.2;
}

.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);
}

/*sp*/
@media screen and (max-width: 640px) {
	#series_information {
		width: 90%;
		margin: 4em auto 0 auto;
	}

	.news_body {
		margin: 4em 1em 2em 1em;
		max-height: 100px;
	}

	.news_body li a {
		width: 100%;
	}
}





/*-----------------------------------
【sample】
--------------------------------------*/

#series_sample {
	color: #272e58;
	background-color: #FFF;
	margin-top: 4em;
	padding-top: 0.5em;
}

.sample_body {
	padding: 0;
	margin: 4em 1.5em 2em 1.5em;
}

.sample_body li {
	background-color: #FFF;
	border-radius: 3px;
	border: 1px solid #f3f3f3;
	box-shadow: 0 2px 0 #f3f3f3;
}

.sample_body .link_img {
	width: 100%;
}

.sample_title_margin {
	margin-bottom: 3em;
	left: -.3em;
}

/*sp*/
@media screen and (max-width: 640px) {
	#series_sample {
		width: 90%;
		margin: 4em auto 0 auto;
	}

	.sample_body {
		margin: 4em 1em 2em 1em;
	}

	.sample_body li {
		margin-right: 2%;
		margin-bottom: .7em;
	}

	.sample_body li:nth-of-type(even) {
		margin-right: 0;
	}
}




/*-----------------------------------
【shoplist】
--------------------------------------*/
#series_shop {
	color: #272e58;
	background-color: #FFF;
	padding: .5em 1em;
	margin-top: 6em;
}

.shop_body {
	padding: 0;
	margin: 4em 1.5em 2em 1.5em;
}

.shop_body li {
	background-color: #FFF;
	border-radius: 3px;
	border: 1px solid #f3f3f3;
	box-shadow: 0 2px 0 #f3f3f3;
}

.shop_body .link_img {
	width: 100%;
}

.shop_body .link_img .no_senkou {
	margin: 2em 0;
}

.senkou {
	text-align: center;
	color: red;
}

/*sp*/
@media screen and (max-width: 640px) {
	#series_shop {
		width: 90%;
		margin: 4em auto 0 auto;
	}

	.shop_body {
		margin: 4em 1em 2em 1em;
	}

	.shop_body li {
		margin-right: 2%;
		margin-bottom: .7em;
	}

	.shop_body li:nth-of-type(even) {
		margin-right: 0;
	}
}


/*-----------------------------------
【comics list】
--------------------------------------*/
#series_comics {
	color: #272e58;
	background-color: #FFF;
	padding: .5em 1em;
	margin-top: 6em;
}

.comics_info {
	width: 100%;
}

.comics_list li {
	padding: 1em;
}

.comics_list li .comics_name {
	padding: .5em 0;
}

#series_comics .btn_buy img {
	height: 20px;
	margin-bottom: -.4em;
}

.comics_list .comics_img {
	width: 100%;
}

/*sp*/
@media screen and (max-width: 640px) {
	#series_comics {
		width: 90%;
		margin: 4em auto 0 auto;
	}

	.comics_list {
		padding: 0;
		margin: 3em 1em 2em 1em;
	}

	.comics_list li {
		margin-right: 2%;
		margin-bottom: .7em;
		padding: .5em;
	}

	.comics_list li:nth-of-type(even) {
		margin-right: 0;
	}

	#series_comics .btn_buy img {
		height: 16px;
	}

}


/*sp*/
@media screen and (max-width: 640px) {
	#series_comics {
		margin-top: 4em;
	}

	.news_body {
		margin: 4em 1em 2em 1em;
		max-height: 100px;
	}
}