@charset "UTF-8";


@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap');

/* common
-------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
ul {
    list-style: none;
}
img {
	width: 100%;
	border: none;
	vertical-align: bottom;
}

#sqexHeader-white_rsp img{
	vertical-align:baseline;
}

@media only screen and (max-width:750px){
#sqexFooter dd img { width:25px !important; }
}
@media only screen and (min-width:750px){
#sqexFooter dd img { width:25px !important; }
}

#sqexlogo img{ width: auto; }

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
address, em, code, cite, dfn, var, optgroup {
  font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="reset"],textarea {
	-webkit-appearance: none;
	border-radius: 0;
	font-family: 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游 ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}

.mt30{
	margin-top: 30px;
}

/* module
------------------------------------------------- */
.floatL {
	float: left;
	display: inline;
}
.floatR {
	float: right;
	display: inline;
}
.alignCenter {text-align: center;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.valignTop {vertical-align: top;}
.valignMiddle {vertical-align: middle;}
.valignBottom {vertical-align: bottom;}

.light { font-weight: 300; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

.corTxt01 {
	color: #ffd940;
}

.none { display: none; }
.pcon { display: block; }
.spon { display: none; }

@media only screen and (max-width:750px){
.pcon { display: none; }
.spon { display: block; }
}


/* a
------------------------------------------------- */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
	text-decoration: none;
	outline: none;
	color: #222;
}
@media only screen and (min-width:751px){
a:hover {
/*	text-decoration: underline;*/
}
a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	transition: 0.3s;
	text-decoration: none;
}
}


a.btn{
	background: #000;
	font-size: 1.74em;
	padding: .75em;
	font-weight: 600;
	color: #fff;
	display: block;
	margin:auto;
	width: 90%;
	max-width: 565px;
	text-align: center;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 0 0 #555555;
	box-shadow: 0 4px 0 1px #555555;
}

@media screen and (max-width:768px){
	a.btn{
		font-size: 5.5vw;
	}
}

/* font
------------------------------------------------- */
@media only screen and (min-width:751px){
.fo10 { font-size: 10px; }
.fo11 { font-size: 11px; }
.fo12 { font-size: 12px; }
.fo13 { font-size: 13px; }
.fo14 { font-size: 14px; }
.fo15 { font-size: 15px; }
.fo16 { font-size: 16px; }
.fo17 { font-size: 17px; }
.fo18 { font-size: 18px; }
.fo19 { font-size: 19px; }
.fo20 { font-size: 20px; }
.fo21 { font-size: 21px; }
.fo22 { font-size: 22px; }
.fo24 { font-size: 24px; }
.fo25 { font-size: 25px; }
.fo27 { font-size: 27px; }
.fo28 { font-size: 28px; }
.fo29 { font-size: 29px; }
.fo30 { font-size: 30px; }
.fo33 { font-size: 33px; }
.fo35 { font-size: 35px; }
}
@media only screen and (min-width:751px) and (max-width:1024px){
.fo10 { font-size: 0.9765624vw; }
.fo11 { font-size: 1.0742186vw; }
.fo12 { font-size: 1.171875vw; }
.fo13 { font-size: 1.2695312vw; }
.fo14 { font-size: 1.3671875vw; }
.fo15 { font-size: 1.4648437vw; }
.fo16 { font-size: 1.5625vw; }
.fo17 { font-size: 1.6601562vw; }
.fo18 { font-size: 1.7578125vw; }
.fo19 { font-size: 1.8554687vw; }
.fo20 { font-size: 1.953125vw; }
.fo21 { font-size: 2.0507812vw; }
.fo22 { font-size: 2.1484374vw; }
.fo24 { font-size: 2.34375vw; }
.fo25 { font-size: 2.4414061vw; }
.fo27 { font-size: 2.6554687vw; }
.fo28 { font-size: 2.734375vw; }
.fo29 { font-size: 2.8320311vw; }
.fo30 { font-size: 2.9296875vw; }
.fo33 { font-size: 3.2226561vw; }
.fo35 { font-size: 3.4179687vw; }
}


/* html
-------------------------------------------------*/
html {
	overflow-y: scroll;
	height: 100%;
}

/* body
------------------------------------------------- */
body {
	font-family: 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游 ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #222;
    font-weight: 400;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}
@media only screen and (min-width:768.1px) and (max-width:1000px){
body {
	font-size: 1.3671875vw;
}
}
@media only screen and (max-width:768px){
body {
	font-size: 3.725vw;
}
}
/* cmn
------------------------------------------------- */

.contents *,
header *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*タイトル*/
h3{
	font-weight: 900;
}

h3 span{
	color: #f1512f;
}
h3 small{
	display: block;
	font-weight: 400;
	font-size: 12px;
}

@media screen and (min-width: 768.1px){
	h3{font-size: 45px;}
}

.ranking_list .new:before,
.new .thum_new{position: relative;}
.ranking_list .new:before,
.new .thum_new:before{
	content:'';
	width: 63px;
	height: 48px;
	background: url(../images/icon_new.png);
	display: block;
	position: absolute;
	top: -12px;
	right: 0;
	-webkit-background-size: cover !important;
	background-size: cover !important;
}

/* wrapper
------------------------------------------------- */
#wrapper {
	width: 100%;
	margin: 0 auto;
	clear: both;
	min-height: 100%;
	position: relative;
}
/* header
------------------------------------------------- */

#header h1{
	background: #222222;
	color: #fff;
	text-align: center;
}

#header h1 span{
	color: #ff790d;
}
#header{
	background: #000000;
}

.cont_inner{
	max-width:1000px;
	width: 100%;
	margin: auto;
}

.main_logo{
	width: 23%;
	padding: .57em 0;
}

@media screen and (max-width: 1000px) and (min-width: 768.1px){
	.cont_inner{
		padding-right: 3.5%;
		padding-left: 3.5%;
	}
	.head_inner > .flx{
		-webkit-flex-wrap: nowrap;
		-moz-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		-o-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	nav{
		width: 100%;
	}
}

@media screen and (max-width: 768px){
	h1{
		font-size: 3vw;
	}
	
	.cont_inner{
		padding-right: 3.5%;
		padding-left: 3.5%;
	}
}

.navlist a{
	color: #fff;
	font-weight: 600;
	font-size: 1.285em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	padding: 1em 0;
	-ms-align-items: center;
	align-items: center;
}
.navlist a img{
	margin-right: .5em;
	height: auto;
}

.navlist .active{
	display: none;
}

.navlist a:hover,
.navlist.active a{
	text-decoration: none;
	color: #fba705;
	opacity: 1;
}

.navlist a:hover .normal,
.navlist.active a .normal{
	display: none;
}

.navlist a:hover .active,
.navlist.active a .active{
	display: block;
}

.navlist.twitter a:hover{
	color: #00aced;
}


.head_inner.hdfixed{
	position: fixed;
	top: 0;
	background: #000;
	z-index: 100;
}

@media screen and (max-width: 768px){
	.head_inner .flx{
		justify-content: space-between;
		position: relative;
	}
	.main_logo{
		width: 37%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		padding-left: 2%;
	}
	#wrapper header nav{
		display: none;
		position: fixed;
	}
	.close,
	.sp_menu{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		
		-ms-align-items: center;
		align-items: center;
		justify-content: flex-end;
	}
	.close{border-bottom:1px solid #fff; padding: 0.7em 0;}
	.sp_menu{width: 60%;}
	
	.closebtn{margin: 1vw 3vw 1vw 0;}
	
	.sp_navbtn,
	.closebtn{position: relative; width: 11.39vw; height: 8.075vw; margin-left: 2%;}
	
	.closebtn span,
	.sp_navbtn span{position: absolute; background: #fff; width:100%; height:.5vw; padding: 0.35vw !important; transition:all .3s; margin: auto; left: 0; right: 0; width: 70%; }
	
	.closebtn span{width: 9vw;}
	
	.sp_navbtn span:nth-of-type(1){top:15%;}

	.sp_navbtn span:nth-of-type(2){top:calc(50% - 2px);}
	
	.sp_navbtn span:nth-of-type(3){bottom:12%;}
	
	.closebtn span:nth-of-type(2){display: none;}
	
	.closebtn span:nth-of-type(1){
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 0; bottom: 0; margin: auto; left: 0; right: 0;
	}
	.closebtn span:nth-of-type(3){
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 0; bottom: 0; margin: auto; left: 0; right: 0;
	}
}

@media screen and (max-width: 768px){
	
	.overray{
		background: #000;
		height: 100%;
		width: 100%;
		position: fixed;
		display: none;
		z-index: 101;
		opacity: .9;
		top: 0;
		left: 0;
	}
	nav{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
	}
	.navlist a{
		border-bottom:1px solid #fff;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}
	.comics img{
		width: 24px;
	}
	.original img{
		width: 35px;
	}
	.mochikomi img{
		width: 33px;
	}
	.twitter img{
		width: 28px;
	}
}

@media screen and (min-width: 768.1px){
	.navlist a{
		
		margin-left: 1.75em;
	}
	nav{
		justify-content: space-between;
	}
	.comics img{
		width: 24px;
	}
	.original img{
		width: 35px;
	}
	.mochikomi img{
		width: 33px;
	}
	.twitter img{
		width: 28px;
	}
	.sp_menu{display: none;}
}

.app_header,
.app_header *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.footer_wrap,
.app_header{
	background: #000;
}

.app_header{
	border-top: 1px solid #fff;
}

.app_header .cont_inner,
footer .cont_inner{
	width: 100%;
	max-width: 1000px;
	justify-content: space-between;
	padding: 1em 3.5%;
}
.app_header .cont_inner{
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}

.info_logo{
	width: 46%;
}

.ahd_apple,
.ahd_google,
.footer_apple,
.footer_google{
	width: 24%;
}

.ahd_apple{
	margin-right: 1%;
	margin-left: 3%;
}

.totop{
	width: 70px;
	height: 70px;
	position: fixed;
	right: 2%;
	bottom: 3%;
	z-index: 1;
	display: none;
}

.ffixed{
	position: fixed;
	bottom:0;
	width: 100%;
}

@media screen and (max-width: 768px){
	.totop{
		bottom: 20vw;
	}
	.app_header{
		display: none;
	}
	footer .cont_inner{
		-ms-align-items: center;
		align-items: center;
		justify-content: space-between;
		padding-top: .5em;
		padding-bottom: .5em;
	}
	.info_logo{
		width: 26%;
	}
	.footer_apple,
	.footer_google{
		width: 34%;
	}
	.totop{
		width: 10vw;
		height: 10vw;
	}
}

.flx{display: -webkit-box; display: -ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 100%;}

.flxcont{display:inline-block;}
.flx.al_center{-ms-align-items: center; align-items: center;}
.flx.fl_col{-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.flx.js_justify{-webkit-box-pack: justify; -ms-flex-pack: justify; flex-pack: justify; justify-content: space-between;}
.flx.js_end{-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.flx.js_around{-ms-flex-pack: distribute; justify-content: space-around;}
.flx.js_start{-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
.flx.js_center{-webkit-justify-content: center; -ms-justify-content: center; justify-content: center;}
.inline_flx{display:inline-flex;}


.icon_wrap:before,.icon_wrap:after{content:''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
.flx.flxcol2 > *{flex-basis: 49%; max-width:49%; width:49%;}
.flx.flxcol3 > *{flex-basis: 32%; max-width:32%; width:32%;}
.flx.flxcol4 > *{flex-basis: 24%; max-width:24%; width:24%;}

.flx > * img{max-width:100%;}

@media screen and (max-width: 768px){
	.flx.tocol1 > *{flex-basis: 100% !important; max-width:100% !important; width:100% !important; margin-right:0 !important;}
	.flx.tocol2 > *{flex-basis: 49% !important; max-width:49% !important; width:49% !important;}
	.flx.tocol3 > *{flex-basis: 32% !important; max-width:32% !important; width:32% !important;}
}



.tac{
	text-align: center;
}

.tar{
	text-align: right;
}



/**/
.none {
	display: none;
}

.pcon {
	display: block;
}

.spon {
	display: none;
}

@media only screen and (max-width:768px) {
	.pcon {
		display: none;
	}

	.spon {
		display: block;
	}
}