@charset "utf-8";
/* CSS Document */

img {width: auto; max-width: 100%; height: auto;}

.manga__cont {margin:60px auto;}
.manga__cont h2 {background: var(--c-red); color: #fff; font-size: 20px; padding: 10px 30px; position: relative; font-weight: 600; margin-bottom: 20px;}
.manga__cont h2::before {content: ""; width: 5px; height: calc(100% - 20px); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: #fff;}

.manga__cont .top_list {display: flex; display: -webkit-flex; justify-content: center; column-gap: 6%; flex-wrap: wrap;  width: 86%; margin: 0 auto;}
.manga__cont .top_list li {width: 47%; text-align: center; margin-bottom: 20px; }
.manga__cont .top_list li  img {box-shadow: rgb(179, 182, 186) 3px 2px 6px 0px;}
.manga__cont .top_list li h3 {color: var(--c-red); font-size: 16px; font-weight: 600; margin-bottom: 10px;}


@media (min-width: 768px) {
 .visManga{text-align: center; background: linear-gradient(#fff1b2, #ffe88d, #ffd647);}
 .visManga img {max-width: 1000px;}
 .manga__cont h2 {font-size: 28px; padding: 15px 40px; margin-bottom: 30px;}
 .manga__cont h2::before {height: calc(100% - 30px); left: 15px; }
 .manga__cont .top_list li h3 {font-size:20px;}
}


@media screen and (min-width: 768px){
.pc {display: block !important;}
.sp {display: none !important;}
}
@media screen and (max-width: 767px){
.sp {display: block !important;}
.pc {display: none !important;}
}