@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
    max-width: 100%;
    vertical-align:top;
}
* {box-sizing: border-box;}

/***********
base
***********/

body {
    font-family: "Roboto Condensed",Helvetica, Arial, serif;
    color: #000000;
    line-height: 1.5;
    font-size: 15px;
    animation: fadeIn 1s ease-in-out forwards;
}


@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


.title_inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1em;
}

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

a,a span {
    text-decoration: none;
    color: inherit;
}

a img,a {transition: 0.5s;}
a:hover {opacity: 0.8;}

/***********
header
***********/
header{
    text-align: center;
    background-image: url("../img/bg.jpg");
    background-size: contain;
    background-position: top center;
    display: flex;
    align-items: center;
    padding: 3em;
}
.header_inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 2em;
    background: rgba(255, 255, 255, 0.75);
}

.header_img img {
    max-width: 600px;
    width: 100%;
    margin: 0 0 30px;
}

.header_txt {
    font-size: 20px;
    line-height: 1.6;
}

@media screen and (max-width: 759px) {
    header,.header_inner{
        padding: 2em 1em;
    }
}

/***********
main
***********/

h2 {
    font-size: 200%;
    font-weight: 600;
    margin: 0 0 40px;
    padding: 45px 1em;
    text-align: center;
}

h2 span {
    color: #ff0000;
}

.poll-highlight {
    font-size: 130%;
    font-weight: bold;
    display: inline-block;
}

h3 {
    font-family: "Changa One","Roboto Condensed",Helvetica, Arial, serif;
    font-size: 300%;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0 0 20px;
}

h3 span {
    color: #b00000;
    font-size: 120%;
}

h4 {
    font-size: 160%;
    text-align: center;
    margin: 0 3em 1em;
    padding: 45px 0;
    color: #b00000;
    border-bottom: solid 3px #b00000;
}

h4 strong {
    font-size: 120%;
    font-weight: 600;
}

.txt {
    text-align: center;
}

@media screen and (max-width: 479px) {
    h2 {
        margin: 0 0 30px;
        padding: 1em 0.5em;
        font-size: 160%;
    }
    h4 {
        margin: 30px 1em;
        padding: 1em 0;
        font-size: 120%;
    }
    .title5 h2 span,.title6 h2 span {
        font-size: 16px; 
        /* アンケート改行しないように */
    }
}

/* 書影レイアウト
.manga1：1～3位、大きめ
.manga2：４位以下、小さ目*/

ul.manga1 {
    margin: 3em;
    display: flex;
    justify-content: space-between;
}

ul.manga1 li {
    margin: 40px 10px 30px 10px;
    max-width: 270px;
    text-align: center;
}

ul.manga2 {
    margin: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

ul.manga2 li {
    max-width: 180px;
    margin: 10px 10px 30px 10px;
    text-align: center;
}

/* 書影レイアウト
.manga3：アニメ化、２列*/
ul.manga3 {
    margin: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}
ul.manga3 li {
    width: 48%;
    margin: 0 0 30px;
}

/* 書影レイアウト
.manga4：コマ、大きく1列*/
ul.manga4 {
    margin: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul.manga4 li {
    margin: 0 0 30px;
    text-align: center;
}

ul.manga4 .chapter_box {
    margin: 0 0 2em;
    padding: 0 0 0 90px;
    text-align: left;
    font-size: 140%;
}

ul.manga4 .chapter_box .chapter {
    padding: 0 0 5px;
    border-bottom: 1px solid #b00000;
}

.title {
    font-size: 120%;
    font-weight: 600;
    color: #b00000;
}

.chapter_box .title {font-size: 140%;}

.autor {font-weight: 600;}
.survey_box {
    background-color: #ffffff;
    padding: 1em;
    margin: 2em;
    text-align: center;
    border-radius: 30px;
    font-size: 160%;
}

.survey_box strong {
    display: block;
    font-weight: 600;
}

.survey_box span {
    color: #b00000;
}
/* Read now!バナー */
.banner_read a {
    max-width: 300px;
    margin: 10px auto;
    padding: 5px 10px;
    display: block;
    background-color: #b00000;
    color: #ffffff;
    border-radius: 15px;
    font-size: 120%;
    letter-spacing: 0.02em;
    font-weight: 800;
}

/* MANGA PLUSバナー */

.banner_max {
    text-align: center;
    margin: 30px 0;
}

.banner_max a {
    width: 300px;
    margin: 0 auto;
    padding: 10px 20px;
    display: block;
    background-color: #b00000;
    color: #ffffff;
    border-radius: 15px;
    font-size: 160%;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 30px;
    border: 5px solid #000000;
}


@media screen and (max-width: 959px) {
    ul.manga1 {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    ul.manga3 {
        justify-content: space-between;
    }
    ul.manga1 br.pc,ul.manga2 br.pc {display: none;}
}

@media screen and (max-width: 479px) {
    ul.manga1,ul.manga2,ul.manga3,ul.manga4 {
        margin: 1em;
    }
    ul.manga1 li,ul.manga2 li,ul.manga3 li {
        margin: 40px 0 20px;
    }
    ul.manga2 {justify-content: space-around;} 
    ul.manga2 li {width: 44%;}
    .survey_box {
        margin: 2em 0;
    }
}

/***********
footer
***********/

footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1em;
}

footer .footer_banner {
    margin: 50px 0;
    text-align: center;
}

footer .footer_banner li {
    margin: 0 auto 40px;
    max-width: 500px;
}

footer .footer_banner p {
    margin: 1em 0;
    font-size: 120%;
}
footer .footer_sns{
    margin: 40px 0;
}

footer .footer_sns p {
    margin: 0 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120%;

}
footer .footer_sns img {
    margin: 10px 25px;
}

.copyright {
    margin: 50px 0 0;
    background: #000000;
    color: #ffffff;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;

}
@media screen and (max-width: 959px) {
    footer {
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 479px) {
    footer .footer_sns img {
        height: 50px;
    }

}




/*********************************
ここから背景色変更です
*********************************/

.title1 h2 {
    background-color: #000000;
    color: #ffffff;
}
.title1 {
    background-color: #ffffff;
    padding: 50px 0;
}
.title2 h2 {
    background-color: #000000;
    color: #ffffff;
}
.title2 {
    background-color: #ffe991;
    padding: 0 0 50px;
}
.title3 h2 {
    background-color: #000000;
    color: #ffffff;
}
.title3 {
    background-color: #dffffe;
    padding: 0 0 50px;
}
.title4 h2 {
    background-color: #000000;
    color: #ffffff;
}
.title4 {
    background-color: #faecec;
    padding: 0 0 50px;
}
.title5 h2 {
    background-color: #000000;
    color: #ffffff;
}
.title5 {
    background-color: #dfffe6;
    padding: 0 0 50px;
}

.title6 {
    background-color: #dffffe;
    padding: 0 0 50px;
}

.title6 h2 {
    background-color: #000000;
    color: #ffffff;
}
/*********************************
ここからランキングアイコンです
*********************************/

.manga1 li,
.manga2 li,
.manga3 li {position: relative;}

.manga1 li:before,.manga2 li:before,.manga3 li:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 70px;
    height: 80px;
    background-size: 70px auto;
    background-position: top center;
    background-repeat: no-repeat;
}

.manga1 .no1:before,.manga2 .no1:before,.manga3 .no1:before {background-image: url("../img/icon/1.png");}
.manga1 .no2:before,.manga2 .no2:before,.manga3 .no2:before {background-image: url("../img/icon/2.png");}
.manga1 .no3:before,.manga2 .no3:before,.manga3 .no3:before {background-image: url("../img/icon/3.png");}
.manga1 .no4:before,.manga2 .no4:before,.manga3 .no4:before {background-image: url("../img/icon/4.png");}
.manga1 .no5:before,.manga2 .no5:before,.manga3 .no5:before {background-image: url("../img/icon/5.png");}
.manga1 .no6:before,.manga2 .no6:before,.manga3 .no6:before {background-image: url("../img/icon/6.png");}
.manga1 .no7:before,.manga2 .no7:before,.manga3 .no7:before {background-image: url("../img/icon/7.png");}
.manga1 .no8:before,.manga2 .no8:before,.manga3 .no8:before {background-image: url("../img/icon/8.png");}
.manga1 .no9:before,.manga2 .no9:before,.manga3 .no9:before {background-image: url("../img/icon/9.png");}
.manga1 .no10:before,.manga2 .no10:before,.manga3 .no10:before {background-image: url("../img/icon/10.png");}

@media screen and (max-width: 479px) {
    .manga3 li:before {
        width: 45px;
        height: 55px;
        background-size: 45px auto;
    }
}

.manga4 .chapter_box {position: relative;}
.manga4 .chapter_box::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0px;
    width: 80px;
    height: 90px;
    background-size: 80px auto;
    background-position: top center;
    background-repeat: no-repeat;
}

.manga4 .no1 .chapter_box:before {background-image: url("../img/icon/1.png");}
.manga4 .no2 .chapter_box:before {background-image: url("../img/icon/2.png");}
.manga4 .no3 .chapter_box:before {background-image: url("../img/icon/3.png");}
.manga4 .no4 .chapter_box:before {background-image: url("../img/icon/4.png");}
.manga4 .no5 .chapter_box:before {background-image: url("../img/icon/5.png");}
.manga4 .no6 .chapter_box:before {background-image: url("../img/icon/6.png");}
.manga4 .no7 .chapter_box:before {background-image: url("../img/icon/7.png");}
.manga4 .no8 .chapter_box:before {background-image: url("../img/icon/8.png");}
.manga4 .no9 .chapter_box:before {background-image: url("../img/icon/9.png");}
.manga4 .no10 .chapter_box:before {background-image: url("../img/icon/10.png");}