@charset "UTF-8";

/*cmn*/
#series .content_inner,
#topics .content_inner,
#new_release .content_inner,
.mangasyou_body,
.twitter_body {
	padding: 2em 0 5em;
}

#new_release {
	background-color: #D2D2D2;
}

/*メインバナー*/
#main_banner img {
	width: 100%;
	height: auto;
	display: block;
}

/*新着mangasyou(上)*/
.mangasyou_top_list {
	background: #222222;
}

.mangasyou_top_list ul {
	padding: 1.1em 0;
	background: url(../common/images/mangasyou_top_bg.png) no-repeat right;
	color: #FFF;
}

.mangasyou_top_list a {
	color: inherit;
	text-decoration: underline;
}

.mangasyou_top_list a:hover {
	color: #d7000f;
}

.mangasyou_top_list li {
	margin-bottom: .5em;
}


/*sp*/
@media screen and (max-width: 640px) {
	.mangasyou_top_list ul {
		background-position: left;
	}
}


/*デジタル版*/
.digital_ttl {
	color: #fff;
	font-weight: 900;
	line-height: 1;
}

.digital_ttl span {
	color: #111;
	font-weight: 500;
}

.digital_banner_list.content_inner {
	max-width: 1000px;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	-o-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.digital_banner_list li a img {
	display: block;
}

.digital_banner_list li a:hover {
	opacity: .8;
}

/*pc*/
@media screen and (min-width: 640.1px) {

	.digital_banner {
		background-image: url(../images/magazine/maga_bg.png);
		padding: 0.8em;
	}

	.digital_ttl span {
		margin-top: .3em;
	}

	.digital_ttl {
		font-size: 2.7vw;
		word-break: keep-all;
	}

	.digital_banner_wrap {
		width: 100%;
	}

	.digital_banner_list li {
		width: 20%;
	}

	.digital_ttl span {
		display: block;
		font-size: .6em;
		color: #318fd3;
		font-weight: bold;
	}

	.digital_ttl p {
		padding: 0.3em;
	}

}

/*pc*/
@media screen and (min-width: 1000px) {
	.digital_ttl {
		font-size: 2.2em;
	}
}

/*sp*/
@media screen and (max-width: 640px) {

	.digital_banner {
		background-image: url(../images/magazine/maga_bg_sp.jpg);
	}

	.digital_banner_list.content_inner {
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.digital_ttl {
		font-size: 4.5vw;
		width: 100%;
		padding: 1em 0;
	}

	.digital_ttl p {}

	.digital_ttl span {
		font-size: 0.8em;
		font-weight: bold;
		margin-left: 0.4em;
		color: #318fd3;
	}

	.digital_banner_wrap {
		overflow-x: auto;
		padding-bottom: 1em;
	}

	.digital_banner_wrap li {
		width: 150px;
	}

	.digital_banner_wrap .flx {
		width: 750px;
		max-width: 750px;
	}

	.digital_banner_wrap li img {
		width: 95%;
	}
}


/*トピックス*/

#topics {
	background-color: #d2d2d2;
}

.topics_banner_list {
	overflow: hidden;
}

.topics_banner_list li {
	width: 230px;
	border: 5px solid #FFF;
	-webkit-box-shadow: 0 0 8px 0 #bec0c3;
	box-shadow: 0 0 8px 0 #bec0c3;
	margin: 1em 0;
}

.topics_banner_list li img {
	height: auto;
	width: 370px;
}

.topics_banner_list .slick-list {
	margin-right: -8px;
	/* ガター分ネガティブマージン */
}

.topics_banner_list .slick-dots {
	position: relative;
	bottom: auto;
}

.topics_banner_list .slick-dotted.slick-slider {
	margin-bottom: 1em;
}

.topics_banner_list .slick-dots li button::before {
	font-size: 15px;
}

.slick-slide {
	margin-right: 16px;
	/* ガター */
}

.slick-slider {
	overflow: hidden;
}

.topics_banner_list .slick-dots li {
	width: 20px;
	margin: 0 5px;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.mangasyou_top_list span,
.mangasyou_list li span {
	margin-right: 1em;
}

.mangasyou_top_list a,
.mangasyou_list li a {
	width: calc(100% - 6em);
}


.topics_banner_list .slick-list {
	padding: 2em 0 2.5em;
}

.slick-nav-arrows {
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: 100;
	height: 0;
	width: 95%;
}

.slick-nav-arrows .slick-next,
.slick-nav-arrows .slick-prev {
	width: 70px;
	height: 74px;
	z-index: 2;
	overflow: hidden;
	font-size: 0;
}

.slick-nav-arrows .slick-next,
.slick-nav-arrows .slick-next:hover {
	right: 0;
	background: url(../common/images/media_next.png);
	-webkit-background-size: cover;
	background-size: cover;
}

.slick-nav-arrows .slick-prev,
.slick-nav-arrows .slick-prev:hover {
	left: 0;
	background: url(../common/images/media_prev.png);
	-webkit-background-size: cover;
	background-size: cover;
}

.slick-nav-arrows .slick-next:hover,
.slick-nav-arrows .slick-prev:hover {
	opacity: .8;
	cursor: pointer;
}

.slick-nav-arrows .slick-prev:before,
.slick-nav-arrows .slick-next:before {
	content: '';
}

.topics_banner_list.low_slide ul {
	text-align: center;
}

.topics_banner_list.low_slide li {
	display: inline-block;
	margin: 1em .5em;
}

.topics_banner_list.low_slide .slick-nav-arrows {
	display: none;
}

.topics_banner_list .slick-nav-arrows .slick-next,
.topics_banner_list .slick-nav-arrows .slick-prev {
	top: calc(50% - 20px);
}

/*sp*/
@media screen and (max-width: 640px) {

	.slick-nav-arrows .slick-next,
	.slick-nav-arrows .slick-next:hover {
		right: 2%;
		left: auto;
	}

	.slick-nav-arrows .slick-prev,
	.slick-nav-arrows .slick-prev:hover {
		left: 2%;
		right: auto;
	}

	.topics_banner_list.low_slide ul {
		width: 95%;
		margin: 0 auto;
	}

	.topics_banner_list.low_slide li {
		margin: 1em .6%;
	}

	.topics_banner_list li img {
		width: 80vw;
	}

}


/*-----------------------
新刊情報
-----------------------*/
.newrelease_list {
	padding: 0 0 3em;
}

.newrelease_list li {
	width: 15.2%;

	-webkit-box-shadow: 0 0 8px 0 #bec0c3;
	box-shadow: 0 0 8px 0 #bec0c3;
	margin-top: 1.5em;
	font-size: 1.2rem;
	font-weight: 500;
}

.newrelease_list li a {
	padding: 9px;
	display: block;
}

.newrelease_list li a:hover {
	color: #fff;
	background: #17dcc3;
}

.newrelease_list li .comics_img img {
	width: 100%;
	display: block;
}

.newrelease_list li .comics_ttl {
	padding-top: .5em;
}

/*pc*/
@media screen and (min-width: 640.1px) {
	.newrelease_list li a {
		padding: .8em;
	}

	.newrelease_list li {
		width: 15.2%;
		margin-right: 1.7%;
	}

	.newrelease_list li:nth-child(-n+6) {
		margin-top: 0;
	}

	.newrelease_list li:nth-child(6n) {
		margin-right: 0;
	}
}

/*sp*/
@media screen and (max-width: 640px) {
	.newrelease_list li {
		margin-right: 2%;
	}

	.newrelease_list li:nth-child(-n+3) {
		margin-top: 0;
	}

	.newrelease_list li:nth-child(3n) {
		margin-right: 0;
	}
}


/*---------------------
メディア
-----------------------*/
.topics_list li {
	width: 48%;
	-webkit-box-shadow: 0 0 8px 0 #bec0c3;
	box-shadow: 0 0 8px 0 #bec0c3;
	margin-bottom: 1em;
}

.topics_list li a {
	padding: .5em;
	background: #FFF;
	display: block;
}

.topics_list li a:hover {
	color: #fff;
	background: #e8548f;
}

.topics_list li .topics_ttl {
	font-size: 1.4rem;
	font-weight: 300;
}

.topics_img img {
	width: 100%;
	height: auto;
}

/*pc*/
@media screen and (min-width: 640.1px) {

	.topics_list li:nth-child(even) {
		margin-left: 4%;
	}

	.topics_list li:nth-child(-n + 2) {
		margin-top: 0;
	}
}

@media screen and (max-width: 640px) {
	.topics_list li:first-of-type {
		margin-top: 0;
	}
}


/*-----------------------
sns
-----------------------*/

#sns {
	background-color: #d2d2d2;
}

.mangasyou_list {
	padding: 2em;
}

.mangasyou_body li {
	margin-bottom: 1em;
	line-height: 1.8;
}

.mangasyou_body li:last-of-type {
	margin-bottom: 0;
}

.mangasyou_body a {
	text-decoration: underline;
}

.mangasyou_body a:hover {
	text-decoration: none;
}

.mangasyou_body_main img {
	vertical-align: bottom;
}


.mangasyou_body_bn {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 492px;
	margin: 0 0 0 auto;
}

.mangasyou_body_bn img {
	vertical-align: bottom;
	max-width: 24.3vw;
}


/*pc*/
@media screen and (min-width: 640.1px) {
	.sns_content {
		width: 50%;
	}

	.sns_content h2 {
		width: 100%;
		max-width: calc(500px - 3%);
	}

	.sns_inner > h2,
	.sns_inner > ul,
	.twitter_body {
		width: 100%;
		max-width: calc(500px - 3%);
	}

	#mangasyou .sns_inner {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	#mangasyou .sns_inner > h2,
	#mangasyou .sns_inner > ul {
		margin-right: 3%;
	}

	#twitter .sns_inner > h2,
	#twitter .twitter_body {
		margin-left: 3%;
	}

	/*.twitter_body iframe{height: 100% !important;}*/
	.mangasyou_body {
		display: flex;
		flex-direction: column;
		text-align: right;
	}


}


@media screen and (max-width: 1000px) {
	.sns_content h2 {
		width: 92%;
	}

	.sns_inner > h2,
	.sns_inner > ul,
	.twitter_body {
		width: 92%;
		max-width: calc(500px - 3%);
	}

	.mangasyou_body_main img {
		vertical-align: bottom;
		width: 100%;
	}

	.mangasyou_body_bn {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		max-width: 492px;
		margin: 0 0 0 auto;
	}

	.mangasyou_body_bn img {
		vertical-align: bottom;
		max-width: 24.3vw;
	}
}

@media screen and (max-width: 640px) {

	.sns_inner > h2,
	.sns_inner > ul,
	.twitter_body {
		max-width: 100%;
	}

	.sns_inner > h2 {
		width: 95%;
	}

	.sns_inner > ul {
		width: 100%;
		background: none;
	}

	.twitter_body {
		width: 95%;
		margin: 0 auto;
	}


	.mangasyou_body,
	.sns_inner .mangasyou_list,
	.mangasyou_body li {
		padding: 2em 2vw 5em;
	}

	.mangasyou_body li {
		-ms-align-items: center;
		align-items: center;
		border-bottom: 1px solid #dcdcdc;
		padding: 0 2.5%;
		margin: 0;
	}

	.mangasyou_body li:last-of-type {
		border-bottom: none;
	}

	.mangasyou_body li a {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}

	.mangasyou_body_bn {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 100%;
		max-width: 492px;
		margin: 0 0 0 auto;
	}

	.mangasyou_body_bn img {
		vertical-align: bottom;
		max-width: 48vw;
	}

	.timeline-Viewport {
		overflow: scroll;
	}
}

.series_list li {
	margin-right: 1.33333%;
	margin-top: 1em;
	/*-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 a:hover {
	background: #68cd25;
	color: #fff;
}

.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;
}

/*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%;
	}
}


/*-----------------------
ページ下部リンクバナー
-----------------------*/
#link_banner ul {
	max-width: 968px;
	width: 95%;
	margin: 3em auto 5em;
}

#link_banner ul li {
	width: 23.5%;
	margin-right: 2%;
	margin-top: 2%;
}

#link_banner ul li a img {
	width: 100%;
	display: block;
}

/*pc*/
@media screen and (min-width: 640.1px) {
	#link_banner ul li:nth-of-type(4n) {
		margin-right: 0;
	}

	#link_banner ul li:nth-of-type(-n + 4) {
		margin-top: 0;
	}
}

/*sp*/
@media screen and (max-width: 640px) {
	#series .content_inner {
		padding-top: 0;
	}

	#link_banner ul li:nth-of-type(even) {
		margin-right: 0;
	}

	#link_banner ul li:nth-of-type(-n + 2) {
		margin-top: 0;
	}
}



/* web font */
.wf-sawarabimincho {
	font-family: "Sawarabi Mincho";
}



.new_comics {
	background-color: #fff;
}
