@charset "utf-8";

/* Colors of Mag
	#f00; COLOR-A
	#00f; COLOR-B
	#ff0; COLOR-C
*/

/* =================== CTS CMN ========================= */

	#CTSv30_MA {
		position: relative;
	}
		#CTSv30_C {
			color: #f00; /* COLOR-A */
			font-size: 12px;
			font-size: 1.2rem;
			margin: 0 auto 4px;
			text-align: center;
		}
		#CTSv30_T {
			background: #000; /* BLACK */
			color: #fff; /* WHITE */
			font-size: 14px;
			font-size: 1.4rem;
			padding: 10px 0;
			text-align: center;
		}
		/* CTS-A MainV IMG */
		#CTSv30_Img {
			max-width: 1200px;
			margin: 0 auto;
			text-align: center;
			position: relative;
			width: 100%;
			height: auto;
			overflow: hidden;
		}
		#CTSv30_Img:before {
			content: "";
			display: block;
			padding-top: 31.914894%;
		}
			#CTSv30_Img img{
				height: auto;
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%,-50%);
				-moz-transform: translate(-50%,-50%);
				-ms-transform: translate(-50%,-50%);
				-o-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
			}
			#CTSv30_Img-B img {
				margin: 0 auto;
			}
		/* 連載ステータス表示 */
		.ctsMag {
			background: #000;
			color: #fff;
			display: block;
			font-size: 13px;
			font-size: 1.3rem;
			line-height: 1;
			margin: 0;
			padding: 10px 0;
			text-align: center;
		}
				.ctsMag img {
					display: inline-block;
					height: 30px;
					margin: 0;
					width: auto;
					vertical-align: bottom;
				}
		/* 特設バナー */
		.ctsBnr {
			display: block;
			margin: 0 auto 15px;
			padding: 0;
		}
			.ctsBnr img {
				display: block;
				margin: 0 auto;
				padding: 0;
			}

		/* CTS-A 試し読みボタン */
		#ctsTrialBtn .btnTRY,
		#ctsTrialBtn .btnDAYS {
			border-radius: 100px;
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 16px;
			margin: 30px auto;
			padding: 15px 0;
			width: 80%;
		}
			#ctsTrialBtn .btnTRY img,
			#ctsTrialBtn .btnDAYS img {
				height: auto;
				max-width: 120px;
				margin: 3px 5px 0 0;
				vertical-align: bottom;
				width: 30%;
			}

		/* GRID */
		#CTSv30_ctsGRD {
			/* background: rgba(210,100,220,.5); CHK */
			font-size: 0;
			min-height: 100px;
		}
			.ctsGRD-item {
				/* background: rgba(110,150,250,.3); CHK */
				display: inline-block;
				font-size: 14px;
				font-size: 1.4rem;
				margin: 2%;
				min-height: 100px;
				text-align: left;
				vertical-align: top;
				width: 46%;
			}
				.ctsGRD-item h2 {
					margin: 0 0 15px;
				}
				.ctsGRD-item h3 {
					margin: 0 0 10px;
				}
				.ctsC
				.ctsAtrC {
					margin: 0 0 2%;
				}
					.ctsDesc a,
					.ctsAtrC a {
						color: #005bd9;
					}
				.ctsSNS,
				.CtsAthr {
					margin: 10px 0 0;
				}
				.ctsGRD-item .btnCircle {
					display: block;
				}
					.ctsGRD-item .btnCircle span {
						border-radius: 15px;
						display: inline-block;
						height: 30px;
						line-height: 30px;
						text-align: center;
						vertical-align: middle;
						width: 30px;
					}
						.ctsGRD-item .btnIG {
							overflow: hidden;
						}
						.ctsGRD-item .btnAP span {
								background: #f00; /* COLOR-A */
							}

			/* KC */
			#ctsComic {
				font-size: 0;
			}
				#ctsComic li {
					display: inline-block;
					height: auto;
					margin: 4%;
					vertical-align: top;
					width: 42%;
				}
					#ctsComic li img {
						display: block;
						height: auto;
						min-width: 1%;
						width: 100%;
					}
					#ctsComic li .btnDAYS {
						background: #292929;
						color: #fff;
					}
				#ctsNSL,
				#ctsEBL,
				#ctsRSS {
					/* background: rgba(255,255,255,.7); CHK */
					margin: 20px 0;
				}
					#ctsNSL h3,
					#ctsEBL h3,
					#ctsRSS h3 {
						border-bottom: 2px solid #32be00;
						color: #32be00;
						font-size: 12px;
						line-height: 1;
						margin: 0 0 10px;
						position: relative;
						text-align: center;
					}
					#ctsNSL h3:before,
					#ctsEBL h3:before,
					#ctsRSS h3:before {
						content: "";
						position: absolute;
						top: 100%;
						left: 50%;
						margin-left: -8px;
						border: 8px solid transparent;
						border-top: 8px solid #32be00;
					}
					#ctsRSS .btnBUY {
						font-size: 14px;
						font-size: 1.4rem;
						line-height: 1;
						margin: 0 auto 20px;
						padding: 15px 0;
					}
					#ctsRSS .colorBarBTN_skyblue,
					#ctsRSS .colorBarBTN_cp {
						font-size: 14px;
						font-size: 1.4rem;
						padding: 10px 0;
						width: auto;
					}
					.bnrStore {
						/* background: rgba(100,100,100,.4); */
						font-size: 0;
					}
						.bnrStore li {
							display: inline-block;
							font-size: 10px;
							font-size: 1rem;
							margin: 1%;
							padding: 0;
							width: 23%;
							vertical-align: top;
						}
							.bnrStore li img {
								display: block;
								margin: 0;
								padding: 0;
							}

	/* CTS Character */
        #ctsChar {
            font-size: 0;
        }
            #ctsChar li {
                display: inline-block;
                font-size: 12px;
                font-size: 1.2rem;
                line-height: 1.4;
                margin: 2%;
                width: 21%;
                vertical-align: top;
            }
                .ctsChar_N {
                    border-bottom: 1px dashed #ccc;
                    display: block;
                    font-weight: bold;
                    margin: 0 0 3px;
                    padding: 0;
                }
                .ctsChar_R {
                    font-size: 9px;
                    font-size: 0.9rem;
                    margin: 0 0 5px;
                    font-weight: bold;
                }
                .ctsChar_C {
                    font-size: 11px;
                    font-size: 1.1rem;
                }

	/* CTS Twitter */
	    section.twArea {
	            height: 540px;
	    }
	        section.twArea .twitter-timeline {
	            height: 540px;
	            margin: 0 auto;
	            max-width: 720px;
	            width: 100% !important;
	        }





/* ====================================================================
RESPONSIVE
==================================================================== */

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


/* ----------------------------------------------------------------
                              1024
------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
					#ctsChar li {
						width: 29.3333333333%;
					}
							.bnrStore li {
								width: 31.3333333333%;
							}
}/* 1024px */


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


/* ----------------------------------------------------------------
                              860
------------------------------------------------------------------- */
@media screen and (max-width: 860px) {
			#ctsComic {
				margin: 0 auto;
				width: 80%;
			}
				#ctsComic li {
					display: block;
					margin: 4% 0;
					width: 92%;
				}
}/* 860px */


/* ----------------------------------------------------------------
                              720
------------------------------------------------------------------- */
@media screen and (max-width: 720px) {
			.ctsGRD-item {
				display: block;
				margin: 0 0 4%;
				width: 100%;
			}
			#ctsComic {
				width: auto;
			}
				#ctsComic li {
					display: inline-block;
					margin: 4%;
					width: 42%;
				}
				#ctsComic li {
					margin: 1%;
					vertical-align: top;
					width: 48%;
				}
					#ctsComic li img {
						min-width: 1%;
					}
					#ctsRSS .colorBarBTN_skyblue {
						font-size: 12px;
						font-size: 1.2rem;
						margin: 0 0 5px;
						padding: 7px 0;
					}
						.bnrStore li {
							width: 23%;
						}
			#ctsChar li {
				margin: 2%;
				width: 29.3333333333%;
				vertical-align: top;
			}
					#ctsChar li {
						width: 21%;
					}
}/* 720px */


/* ----------------------------------------------------------------
                              640
------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
			#CTSv30_Img:before {
				padding-top: 83.3333333%;
			}

		/* CTS-A 試し読みボタン */
		#ctsTrialBtn .btnTRY,
		#ctsTrialBtn .btnDAYS {
			font-size: 13px;
			font-size: 1.3rem;
			padding: 10px 0;
			width: 90%;
		}
			#ctsTrialBtn .btnTRY img, 
			#ctsTrialBtn .btnDAYS img {
				max-width: 200px;
				margin: 3px auto;
			}
} /* 640 */


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


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


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


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