@charset "utf-8";
#container {overflow:hidden;}
#main-visual {float:left; width:73.77593360995851%; margin:0.6639004149377593% 0.5%/*8px*/;}
#main-visual ul.main-visual-imgs {position:relative;overflow:hidden; width:100%;height:0;padding-top:66.59167604049494%; }
#main-visual ul.main-visual-imgs li {float:left; width:100%; position:absolute; top:0; left:0;}
#main-visual ul.main-visual-imgs li a {display:block; width:100%; height:0; padding-top:66.59167604049494%;}
#main-visual .upper-banner1 {background:url(../img/main/main-visual-01.png) left bottom no-repeat; background-size:cover; animation:mv1 12s linear infinite;-moz-animation:mv1 12s linear infinite;-webkit-animation:mv1 12s linear infinite;}
@keyframes mv1 {
	0% {margin-left:0;}
	10% {margin-left:0;}
	33% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-moz-keyframes mv1 {
	0% {margin-left:0;}
	10% {margin-left:0;}
	33% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-webkit-keyframes mv1 {
	0% {margin-left:0;}
	10% {margin-left:0;}
	33% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
#main-visual .upper-banner2 {background:url(../img/main/main-visual-02.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv2 12s linear infinite;-moz-animation:mv2 12s linear infinite;-webkit-animation:mv2 12s linear infinite;}
@keyframes mv2 {
	0% {margin-left:100%;}
	10% {margin-left:100%;}
	33% {margin-left:0%;}
	43% {margin-left:0%;}
	66% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-moz-keyframes mv2 {
	0% {margin-left:100%;}
	10% {margin-left:100%;}
	33% {margin-left:0%;}
	43% {margin-left:0%;}
	66% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-webkit-keyframes mv2 {
	0% {margin-left:100%;}
	10% {margin-left:100%;}
	33% {margin-left:0%;}
	43% {margin-left:0%;}
	66% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
#main-visual .upper-banner3 {background:url(../img/main/main-visual-03.png) 0 0 no-repeat; background-size:cover;margin-left:200%;animation:mv3 12s linear infinite;-moz-animation:mv3 12s linear infinite;-webkit-animation:mv3 12s linear infinite;}
@keyframes mv3 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	66% {margin-left:0%;}
	76% {margin-left:0%;}
	99% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-moz-keyframes mv3 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	66% {margin-left:0%;}
	76% {margin-left:0%;}
	99% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-webkit-keyframes mv3 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	66% {margin-left:0%;}
	76% {margin-left:0%;}
	99% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
#main-visual .upper-banner4 {background:url(../img/main/main-visual-01.png) 0 0 no-repeat; background-size:cover;margin-left:300%;animation:mv4 12s linear infinite;-moz-animation:mv4 12s linear infinite;-webkit-animation:mv4 12s linear infinite;}
@keyframes mv4 {
	0% {margin-left:100%;}
	76% {margin-left:100%;}
	99% {margin-left:0%;}
	100%{margin-left:0%;}
}
@-moz-keyframes mv4 {
	0% {margin-left:100%;}
	76% {margin-left:100%;}
	99% {margin-left:0%;}
	100%{margin-left:0%;}
}
@-webkit-keyframes mv4 {
	0% {margin-left:100%;}
	76% {margin-left:100%;}
	99% {margin-left:0%;}
	100%{margin-left:0%;}
}

#main-visual:hover .upper-banner1,#main-visual:hover .upper-banner2,#main-visual:hover .upper-banner3,#main-visual:hover .upper-banner4 {animation-play-state: paused;-webkit-animation-play-state: paused;-moz-animation-play-state: paused;}

#container > div {position:relative;}
#container h2 {position:relative;width:100%; max-width:101%; height:90px; line-height:95px; text-align:right; background:#ffd200; margin-top:-1px; border:1px solid #ffd200; font-size:1.5vw/*22px*/; font-weight:bold;margin-bottom:35px;}
#container h2 span {padding-right:6.711724711899217%/*20px*/;}
#container h2:after {position:absolute; top:20px; left:5px; width:41.17989037151874%/*119px*/; height:0/*100px*/; padding-top:34.60494989203256%; display:block; content:''; }

#tag {width:23.98236514522822%; border:4px solid #ffd200; float:right; margin-top:0.6639004149377593%/*8px*/; margin-bottom:0.6639004149377593%/*8px*/; overflow:hidden; height:0; padding-top:48.41460580912863%/*584.601px*/;}
#tag:after {content:''; display:block; background:#fff; position:absolute; width:100%; height:0;padding-top:34.60494989203256;}
#tag h2 {position:absolute;top:0; left:0;}
#tag ul {overflow:hidden; position:absolute; top:23.72079760383578%/*126.98*/;left:0;max-width:100%;}
#tag ul li {float:left; margin:6.693967553945503% 6.300204756654591%/*17px 16px*/; max-width:;}
#tag ul li a {font-size:17px; font-weight:bold; white-space:nowrap; overflow:hidden; display:block; text-overflow:hidden; width:auto; max-width:100%;}
#container #tag h2:after {background:url(../img/main/hash.png)0 0 no-repeat; background-size:cover;}
#container #tag h2:hover:after {background-image:url(../img/main/hash.gif);}
#container .content {margin-right:0.3568464730290456%/*4.3px*/;width:24.89626556016598%; float:left;max-width:24.73029045643154%;}
#container #section1 h2:after {background:url(../img/main/wait-toon.png)0 0 no-repeat;background-size:cover;}
#container #tag h2:after {background:url(../img/main/hash.png)0 0 no-repeat; background-size:cover;}
#container #tag .more {top:20%}

#container #section1 {clear:both;}
#container #section1 h2:hover:after {background-image:url(../img/main/wait-toon.gif);}

#container #section2 h2:after {top:0;left:0; margin-top:-1px;width:41.17989037151874%/*119px*/; height:0/*100px*/; padding-top:34.60494989203256%;  display:block; content:''; background:url(../img/main/popular-toon.png)0 0 no-repeat;background-size:contain;}
#container #section2 h2:hover:after {background-image:url(../img/main/popular-toon.gif);}

#container #section3 h2:after {background:url(../img/main/wait-novel.png)0 0 no-repeat;background-size:cover;}
#container #section3 h2:hover:after {background-image:url(../img/main/wait-novel.gif);}

#container #section4 h2:after {background:url(../img/main/popular-novel.png)0 0 no-repeat;background-size:cover;}
#container #section4 h2:hover:after {background-image:url(../img/main/popular-novel.gif);}

#container div .more {position:absolute; top:7.15379222525861%/*100px*/; right:5.069379769519373%/*16px*/;}
#container div .more a {font-size:14px; color:#999; font-weight:bold;}


#container #section4.content {margin-right:0; float:right;}
.content li p {display:block; height:0/*201px*/; padding-top:67.44947749223118%; width:98.3220688220252%/*293px*/; margin:0 auto; background:url(../img/main/wait-toon/1.png)center center no-repeat; background-size:contain; position:relative;}
.content li p img {height:50px; position:absolute; top:0; left:0;}
.content li p + p {background:none !important; height:auto;padding:16px 0;}
.content li p + p span {display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.content li p + p .text1 {font-weight:bold;}
.content li p + p .text2 {margin-bottom:25px;}
#section1 .top2 p {background-image:url(../img/main/wait-toon/2.png);}
#section1 .top3 p {background-image:url(../img/main/wait-toon/3.png);}
#section1 .top4 p {background-image:url(../img/main/wait-toon/4.png);}

#section2 .top1 p {background-image:url(../img/main/pop-toon/1.png);}
#section2 .top2 p {background-image:url(../img/main/pop-toon/2.png);}
#section2 .top3 p {background-image:url(../img/main/pop-toon/3.png);}
#section2 .top4 p {background-image:url(../img/main/pop-toon/4.png);}

#section3 .top1 p {background-image:url(../img/main/wait-novel/1.png);}
#section3 .top2 p {background-image:url(../img/main/wait-novel/2.png);}
#section3 .top3 p {background-image:url(../img/main/wait-novel/3.png);}
#section3 .top4 p {background-image:url(../img/main/wait-novel/4.png);}

#section4 .top1 p {background-image:url(../img/main/pop-novel/1.png);}
#section4 .top2 p {background-image:url(../img/main/pop-novel/2.png);}
#section4 .top3 p {background-image:url(../img/main/pop-novel/3.png);}
#section4 .top4 p {background-image:url(../img/main/pop-novel/4.png);}


#lower-banner {overflow:hidden; height:0; padding-top:54.52282157676349%; width:100%; position:relative; margin:48px 0; }
#lower-banner p {position:absolute; top:40px; left:50%; margin-left:-39.83402489626556%; width:79.66804979253112%;}
#lower-banner p + p {top:auto; bottom:0px;}
#lower-banner p img {width:100%;}

@media (min-width:1441px) {
	#container h2 {font-size:22px;}
}
@media (max-width:1279px) {
	#container #tag .more {top:23%;}
	#container div .more {top:8.5%;}
}

@media (max-width:1023px) {
#main-visual {float:left; width:100%; margin:113px 0 6px/*8px*/;}

#container > div {position:relative;}
#container h2 {position:relative;width:100%; max-width:101%; height:52px; line-height:52px; text-align:center; background:#ffd200; margin-top:0px; border:1px solid #ffd200; font-size:20px/*22px*/; font-weight:bold;margin-bottom:6px;}
#container h2 span {padding-right:0/*20px*/;}
#container h2:after {display:none;}

#tag {min-width:760px;width:99.21798631476051%;max-width:1015px; border:4px solid #ffd200; float:left; margin:0; margin-bottom:0.6639004149377593%/*8px*/; overflow:hidden; height:131px; padding-top:0%; margin-bottom:6px;}
#tag h2 {position:absolute;top:0; left:0;width:22.10526315789474%; height:95px; font-size:24px; text-align:center;} 
#tag h2 span {line-height:95px;}
#tag ul {overflow:hidden; position:absolute; top:0%/*126.98*/;left:22.10526315789474%;width:77%;}
#tag ul li {float:left; margin:10px 4.342105263157895% 8px; max-width:;}
#tag .tag9, #tag .tag10 {display:none;}
#tag ul li a {font-size:17px; font-weight:bold; white-space:nowrap; overflow:hidden; display:block; text-overflow:hidden; width:auto; max-width:100%;}
#container #tag h2:after {display:none;}
#container #tag .more {left:5px; top:102px;}



#container #section2 h2:after {display:none;}

#container .content {margin:0 0 6px;width:100%; float:left;max-width:100%;padding-bottom:26px;}

#container #section4.content {float:left;}
.content li {float:left;width:25%/*24.73958333333333%*/;}
.content li p {display:block; height:0/*201px*/; padding-top:67.44947749223118%; width:100%/*190px*/; margin:0 1.578947368421053% 0 0; background:url(../img/main/wait-toon/1.png)center center no-repeat; background-size:contain; position:relative;}
.content li p img {height:40px;left:2px;}
.content li p + p {padding:6px 0;}
.content li p + p span {font-size:12px;}
.content li p + p .text2 {margin-bottom:15px;}

#container div .more {position:absolute; top:auto; bottom:6px; right:50%;text-align:center; width:150px; margin-right:-75px;}
#container div .more a {font-size:14px; color:#999; font-weight:bold;}

#lower-banner {overflow:hidden; height:0px; padding-top:63.80208333333333%; width:100%; position:relative; margin:30px 0; }
#lower-banner p {position:absolute; top:31px; left:0; margin-left:0; width:100%;}
#lower-banner p + p {top:210px;}
#lower-banner p img {width:100%;}
}

@media (max-width:767px) {
#main-visual {margin:111px 0 6px;}

#container h2 {position:relative;width:100%; max-width:101%; height:36px; line-height:36px;border:1px solid #ffd200; font-size:18px;}

#tag {min-width:312px;width:97.5%;max-width:759px; margin:0 auto 35px/*8px*/; overflow:visible; height:71px; padding-top:0%; left:0.6%}
#tag h2 {position:absolute;top:0; left:0;width:100%; height:36px; font-size:18px; text-align:center; } 
#tag h2 span {line-height:36px;display:block;}
#tag ul {top:36px/*126.98*/;left:0%;width:100%; height:40px}
#tag ul li {margin:10px 1.7% 8px; }
#tag ul li a {font-size:14px; }
#container #tag .more {left:auto; top:77px;right:74px;}

#container .content {padding-bottom:26px;}

.content li {width:50%;}
.content li p {display:block; height:0/*201px*/; padding-top:67.44947749223118%; width:100%/*190px*/; margin:0 1.578947368421053% 0 0; background:url(../img/main/wait-toon/1.png)center center no-repeat; background-size:contain; position:relative;}
.content li p img {height:35px; left:0.7894736842105265%;}
.content li p + p span {font-size:11px;}
.content li p + p .text2 {margin-bottom:15px;}
.content .top3 {clear:both;}

#container div .more {top:auto; bottom:6px;}

#lower-banner { height:0px; padding-top:73.75%; margin:12px 0; }
#lower-banner p {top:12px;}
#lower-banner p + p {top:auto; bottom:20px;}
}

@media (max-width:340px) {
#tag {left:0;}
}