@charset "utf-8";

h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd{
	padding: 0;
	margin: 0;
}

ol,ul{
	list-style-type: none;
}

/*-----------------------------------------------
 root
-----------------------------------------------*/
html{
	overflow-y: scroll;
}

body{
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
}

/*-----------------------------------------------
 font
-----------------------------------------------*/

html{
	font-size: medium;	
}

body{
	word-wrap : break-word;
	overflow-wrap : break-word;
	font-size: 62.5%; /* 16px -> 10px */
}

dt,dd,li,
caption,th,td,
input,button,textarea,select,
h1,h2,h3,h4,h5,h6,p,address{
	line-height: 1.5;
	font-size: 140%;
	margin: 0;
	padding: 0;
}

h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
p input,p button,p select,
li h1,li h2,li h3,li h4,li h5,li h6,li p,li dt,li dd,li li,li th,li td,li input,li button,li textarea,li select,
dd h1,dd h2,dd h3,dd h4,dd h5,dd h6,dd p,dd dt,dd dd,dd li,dd th,dd td,dd input,dd button,dd textarea,dd select,
tr h1,tr h2,tr h3,tr h4,tr h5,tr h6,tr p,tr dt,tr dd,tr li,            tr input,tr button,tr textarea,tr select{
	font-size: 100%;
}

input,button,select,option,textarea{
	font-size: 14px;
}

a,
a:link,
a:visited{
	color: #000;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

section{
	position: relative;
}

/*-----------------------------------------------
 header
-----------------------------------------------*/

div#header{
	border-top: 3px solid #ff3366;
}

div#header h1,
div#header div.logo{
	padding: 5px 0;
	line-height: 0;
	text-align: center;
}

div#header div.inner{
	position: relative;
	width: 900px;
	margin: 0 auto;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#header{
		border-top: 10px solid #ff3366;
	}
	
	div#header .logo img{
		width: 100%;
	}
	
	div#header div.inner{
		width: auto;
	}
	
	div#header div.inner p.question{
		display: none;
	}

}

/* グローバルナビ */

div#header div.globalNav{
	height: 26px;
	border-bottom: 3px solid #ff2e63;
	background-color: #000;
}

div#header div.globalNav ul{
	width: 900px;
	margin: 0 auto;
}

div#header div.globalNav ul li{
	display: block;
	position: relative;
	float: left;
	width: 128.5px;
	width: calc(900px/7);
	text-align: center;
	line-height: 26px;
}

div#header div.globalNav ul li a{
	display: block;
	color: #fff;
}

div#header div.inner p.question{
	position: absolute;
	top : 0;
	right: 0;
	padding-left: 16px;
	background-image: url(../img/icon-q.png);
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 12px;
	font-weight: bold;
}

body#now div#header div.globalNav ul li.now a,
body#next div#header div.globalNav ul li.next a,
body#story div#header div.globalNav ul li.story a,
body#comics div#header div.globalNav ul li.comics a,
body#news div#header div.globalNav ul li.news a,
body#viewer div#header div.globalNav ul li.viewer a,
body#contribute div#header div.globalNav ul li.contribute a{
	color: #ff3d6e;
}

body#now div#header div.globalNav ul li.now::after,
body#next div#header div.globalNav ul li.next::after,
body#story div#header div.globalNav ul li.story::after,
body#comics div#header div.globalNav ul li.comics::after,
body#news div#header div.globalNav ul li.news::after,
body#viewer div#header div.globalNav ul li.viewer::after,
body#contribute div#header div.globalNav ul li.contribute::after{
	content: "";
	position: absolute;
	display: block;
    top: 26px;
    left: 40px;
	width: 50px;
	height: 11px;
	background-image: url(../img/nav-current.png);
}


@media screen and (max-width:767px) and (min-width: 1px){
	
	div#header div.globalNav.active{
		display: block;
	}
	
	div#header div.globalNav{
		display: none;
		position: fixed;
		z-index: 100;
		top: 80px;
		right: 0;
		width: auto;
		min-width: 200px;
		height: auto;
		padding: 10px;
		border: none;
		background-color: rgba(255,255,255,0.9);
	}
	
	div#header div.globalNav ul{
		width: auto;
	}
	
	div#header div.globalNav ul li{
		float: none;
		width: auto;
		padding: 10px 0;
		border-bottom: 1px solid #000;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.5;
		text-align: right;
	}
	
	div#header div.globalNav ul li:last-child{
		border-bottom: none;
	}
	
	div#header div.globalNav ul li a{
		color: #000;
	}
	
	body div#header div.globalNav ul li::after{
		display: none !important;
	}

}

/* スマホメニュー */

div#menu-sp{
	display: none;
	position: fixed;
	z-index: 100;
	top: 15px;
	right: 10px;
	width: 60px;
	height: 60px;
	border: 1px solid #000;
	border-radius: 30px;
	background-color: rgba(255,255,255,0.4)
}

div#menu-sp span {
	position: absolute;
	left: 20px;
	width: 20px;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
	transition: all .4s;
}

div#menu-sp span:nth-of-type(1) {
	top: 21px;
}
div#menu-sp span:nth-of-type(2) {
	top: 29px;
}
div#menu-sp span:nth-of-type(3) {
	top: 37px;
}

div#menu-sp.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
div#menu-sp.active span:nth-of-type(2) {
	opacity: 0;
}
div#menu-sp.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(-45deg);
	transform: translateY(-8px) rotate(45deg);
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#menu-sp{
		display: block;
	}
}

/*-----------------------------------------------
 content
-----------------------------------------------*/

div#content{
	width: 900px;
	margin: 0 auto;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#content{
		width: auto;
	}

}

/*-----------------------------------------------
 main
-----------------------------------------------*/

div#main{
	float: left;
	width: 670px;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#main{
		float: none;
		width: auto;
		padding: 0 10px;
	}
	
}

/*-----------------------------------------------
 aside
-----------------------------------------------*/

div#aside{
	float: right;
	width: 225px;
}

/* bnr */

div#aside div.bnr{
	margin-bottom: 10px;
	line-height: 0;
	border:1px #e1e1e1 solid;
}

div#aside div.bnr img{
	width: 100%;
}

/* column-twitter */

div#aside div.column-twitter{
	margin-bottom: 10px;
}

div#aside div.column-twitter div{
	line-height: 0;
}

div#aside div.column-twitter div.inner{
	padding: 10px;
	background-color: #fc3366;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#aside{
		float: none;
		width: auto;
		padding: 0 10px;
	}

	/* twitter */

	div#aside div.column-twitter div img{
		width: 100%;
	}
	
}

/*-----------------------------------------------
 footer
-----------------------------------------------*/

div#footer{
	position: relative;
	padding-bottom: 20px;
	background-color: #ff3366;
}

div#footer div#pagetop{
	position: absolute;
	top: -24px;
	right: 20px;
	line-height: 0;
}

div#footer div.inner{
	position: relative;
	width: 900px;
	margin: 0 auto;
}

div#footer div.inner p{
	font-size: 12px;
}

div#footer div.inner p.copy{
	margin-bottom: 10px;
}

div#footer div.inner p.question{
	position: absolute;
	top : 0;
	right: 0;
	padding-left: 16px;
	background-image: url(../img/icon-q.png);
	background-repeat: no-repeat;
	background-position: left top;
	font-weight: bold;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#footer div.inner{
		width: auto;
	}

	div#footer div.inner p{
		font-size: 14px;
		text-align: center;
		color: #fff;
	}
	
	div#footer div.inner p.question{
		display: none;
	}
}

/* フッターメニュー */

div#footer div.footerNav{
	height: 33px;
	background-color: #000;
}

div#footer div.footerNav div.logo{
	position: absolute;
	top: 0;
	left: 0;
}

div#footer div.footerNav div.logo img{
	height: 33px;
}

div#footer div.footerNav ul{
	padding-left: 130px;
}

div#footer div.footerNav ul li{
	display: inline-block;
	margin-right: 25px;
	font-size: 12px;
	line-height: 33px;
}

div#footer div.footerNav ul li:last-child{
	margin-right: 0;
}

div#footer div.footerNav ul li a{
	color: #fff;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#footer div.footerNav{
		margin-bottom: 10px;
	}
	
	div#footer div.footerNav div.logo{
		position: static;
		text-align: center;
	}
	
	div#footer div.footerNav ul{
		display: none;
	}
	
}

/* 外部リンク */

div#footer ul.ExternalNav li{
	display: inline-block;
	margin-right: 10px;
	font-size: 12px;
}

div#footer ul.ExternalNav li:last-child{
	margin-right: 0;
}

div#footer ul.ExternalNav li a{
	display: inline-block;
	position: relative;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
}

div#footer ul.ExternalNav li a::before,
div#footer ul.ExternalNav li a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

div#footer ul.ExternalNav li a::before{
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #000;
}

div#footer ul.ExternalNav li a::after{
	left: 5px;
	width: 3px;
	height: 3px;
	box-sizing: border-box;
	border: 3px solid transparent;
	border-left: 3px solid #ff3366;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#footer ul.ExternalNav{
		display: none;
	}
	
}

/*-----------------------------------------------
 footer（2018.12.05追加）
-----------------------------------------------*/
div#footer div.inner .column-copy{
width: 780px;
padding-top:20px;
}

div#footer div.inner .column-copy .icon{
float: left;
width: 80px;
}
div#footer div.inner .column-copy .txt{
float: right;
width: 700px;
}
@media screen and (max-width:767px) and (min-width: 1px){
div#footer div.inner .column-copy{
width: 100%;
}

div#footer div.inner .column-copy .icon{
float: none;
width: 30%;
margin: 0 auto 2%;
text-align: center;
}

div#footer div.inner .column-copy .txt{
float: none;
width: 100%;
}

}
/*--（2018.12.05追加ここまで）--*/