@charset utf-8;
*{margin:0px;padding:0px;font-size:inherit;}
a{color:#000;}
a:hover{opacity:0.7;}
ul li{list-style:none;}
.mbL{margin-bottom:50px;}
.mbM{margin-bottom:30px;}
.mbS{margin-bottom:10px;}
.mtL{margin-top:50px;}
.mtM{margin-top:30px;}
.mtS{margin-top:10px;}

/*全体の色はbrimnと合わせる？*/

#index{width:90%; margin:auto;}
.wrap{width:90%; margin:auto;}
.wrapL{width:90%; margin:auto; padding-bottom:50px;}
.cptn{font-size:95%; padding:10px 5px;}

h1{background:#000; color:#fff; font-size:30px; padding:10px 5%; margin-bottom:20px;}
.title01{background:#000; color:#fff; margin:0 auto; padding:5px 0 5px 10px;}
.title01 > a{color:#fff; text-decoration: none; position:relative;}
.title01 > a::after{content:""; width:8px; height:8px; border:solid #fff; border-width: 3px 3px 0 0; transform: rotate(45deg); display: inline-block; margin:0 10px 0;}
.title02{padding:0 2% 3px; border-bottom:solid 5px #000; font-size:120%; margin-top:10px;}
.title02.thin{border-bottom:solid 2px #666;}
.title02 > a{text-decoration: none; position: relative;}
.title02 > a::after{content:""; width:8px; height:8px; border:solid #666; border-width: 2px 2px 0 0; transform: rotate(45deg); display: inline-block; margin:0 10px 0;}


.insta{min-height:200px; text-align:center;}

.lab{width:100%; display:flex; justify-content:flex-start; flex-wrap: wrap;}
.lab li{width:30%; margin:20px 1%; border:solid 1px #000; border-width:3px 5px 8px 3px; position:relative;}
.lab li .ttl{width:90%; background:#000; margin:0; margin-bottom:5px; position:relative;}
.lab li .ttl a{display:block; padding:5px; color:#fff;}
.lab li .ttl::after{content:""; display:inline-block; width:8px; height:8px; border:solid 5px #fff; border-width:5px 5px 0 0; transform:rotate(45deg); position:absolute; top:10px; right:20px;}
.lab li .ctgr{padding:4px 0 3px; background:#000; color:#fff; border-radius:5px 0 0 5px; margin:3px; text-align:right; padding-right:5%; width:80%; margin-left:15%;}
.lab li .ctgr.html{background:#000249;}
.lab li .ctgr.css{background:#1dced8;}
.lab li .ctgr.js{background:#f6490d;}
.lab li .desc{margin:5px auto; font-size:14px; padding:5px;}
/*配色パターン記事
https://univ.peraichi.com/27
*/
/* http://colorhunt.co/c/104487 */

.links{display:flex; justify-content:center;}
.links li{min-width:32%; text-align:center; margin:20px 10px;}
.links li a{display:block; padding:20px; text-decoration:none;}
.btn_brmn{background:#000; color:#fff;}
.btn_bnbn{background:#ce0; color:#000;}
.btn_inst{background:#784396; color:#fff;}
.btn{margin:10px auto;}
a.btn{text-decoration:none; padding:10px 20px; position:relative; display: inline-block; border-radius: 5px 0 5px 0;}
a.btn::after{content:""; display:inline-block; width:8px; height:8px; border:solid #fff; border-width:3px 3px 0 0; transform:rotate(45deg); margin-left:10px;}

.novels{display:flex; margin-top:10px; flex-wrap: wrap;}
.novels > li{width:30%; border:solid 1px #ccc; padding:10px; margin:0 0.5%10px;}
.novels > li~li{margin-left:0.5%;}
.novels > li .ttl{font-size:18px;}
.novels > li p{font-size:14px; margin:5px auto;}
.novels > li .btn{background:#000; color:#fff; display:block; width:90%; margin:10px auto; padding:5px 0; position:relative; text-align:center;}
.novels > li .btn::after{content:""; display:inline-block; width:5px; height:5px; border:solid #fff; border-width:2px 2px 0 0; transform:rotate(45deg); margin-left:10px;}

/*novel*/
.series{margin-top:20px;}
.series .disc{margin:10px 0;}
.novel_desc{margin:5px; padding:10px; font-size:95%;}
.series table{border:solid 1px #000;}
.series table td{padding:5px; text-align:center;}
.novel_list{}
.novel_list > li{border:2px solid #666; border-width: 2px 0 2px 0; padding:10px 0 0;}
.novel_list > li~li{border-top:none;}
.novel_list > li .ttl{border-bottom:dashed 1px #eee; margin-bottom:5px;}
.toTop{margin-top:50px;  background:#000; padding:10px;}
.toTop a{color:#fff; padding:10px; position:relative;}
.toTop a::after{content:""; display:inline-block; width:5px; height:5px; border:solid #fff; border-width:2px 2px 0 0; transform:rotate(45deg); margin-left:5px;}

/* ===== TB(PC) Layout ===== */
@media print, screen and (max-width:999px) {
	#wrapper {width:1020px;}
	.wrap {width:100vw; margin:0 auto; padding:0;}
}

/* ===== TB Size 768-979px ===== */
@media screen and (min-width:768px) {
	.onlySP{display:none;}
}

/* ===== SP Size 0-767px ===== */
@media screen and (max-width:767px) {
	.wrap{width:95%; margin:auto;}
	.wrapL{width:95%;}
	.onlyPC{display:none;}
	.links{display:block;}
	.links li{width:100%; margin:10px auto;}
	.lab li{width:100%; margin:20px auto;}
	.novels{margin-top:10px;}
	.novels > li{width:100%; padding:10px;}
}