@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{
	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{
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	height: 69px;
	background-color: #ffb4c6;
}

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

div#header div.inner .logo{
	position: absolute;
	top: 16px;
	left: 0;
}

/* globalNav */

div#header div.inner ul.globalNav{
	position: absolute;
    top: 0;
    left: 147px;
}

div#header div.inner ul.globalNav li{
	position: relative;
	display: inline-block;
}

div#header div.inner ul.globalNav li ul{
	display: none;
	position: absolute;
	top: 69px;
	left: 0;
}

div#header div.inner ul.globalNav li:hover ul{
	display: block;
}

div#header div.inner ul.globalNav li ul li{
	display: block;
	line-height: 0;
	background-color: #ffb4c6;
}

body#new div#header ul.globalNav li.new::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: 0px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

body#next div#header ul.globalNav li.next::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: 5px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

body#comics div#header ul.globalNav li.comics::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: 8px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

body#ebook div#header ul.globalNav li.ebook::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: -4px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

body#viewer div#header ul.globalNav li.viewer::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: 8px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

body#contribute div#header ul.globalNav li.contribute::after{
	content: "";
	position: absolute;
	display: block;
    top: 50px;
    left: 10px;
	width: 51px;
	height: 12px;
	background-image: url(../img/gnav-current.png);
}

/* search */

div#header div.inner div#search{
	position: absolute;
	top: 20px;
	left: 736px;
	width: 160px;
}

#search{
    position:relative;
    width:100%;
    margin: 0 auto;
}
 
#search td {
    border: none;    
}
 
#search .gsc-control-cse, 
#search .gsc-control-cse-ja,
#search .gsib_a{
    margin: 0 !important;
    padding: 0 !important;
}

#search table.gsc-search-box td,
#search table.gsc-search-box input {
    vertical-align: top !important;
}

#search table.gsc-search-box input[type="text"] {
    background: none !important;
    font-size: 10px !important;
}

#search input[type="text"]{
    border: 1px solid #dddddd !important;
    height:25px !important;
    margin-top: 100px;
}
 
#search input[type="text"]:focus {
    border: 2px solid #b2e0eb !important;
    outline: 0;
}
 
#search #search-iw-id1{
    border:none !important;
}

#search #gs_tti0 input{
    background-position:5px 5px !important;
}

#search input.gsc-search-button {
	background: #428ccb !important;
	border: 1px solid #2a679d !important;
}

#search .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0px;
}

#search .gsc-completion-container{
	font-size: 12px !important;
}

#search form.gsc-search-box{
	margin-bottom: 0;
}

#search .gsib_b span{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding:2px 0 0 0;
}
/* 0615追加 */
#search table, #search td, #search th {
  border: none;
  line-height: 1;
  font-size: 16px !important;
}
#search ::placeholder {
	color: #fff;
}
.gssb_a, .gssb_a td{
	font-size: 16px;
}

/* menu */

div#menu{
	cursor: pointer;
	position: absolute;
	z-index: 200;
	top: 9px;
	right: 0;
	width: 46px;
	height: 46px;
	border: 1px solid #fff;
	border-radius: 30px;
}

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

div#menu span:nth-of-type(1) {
	top: 14px;
}
div#menu span:nth-of-type(2) {
	top: 22px;
}
div#menu span:nth-of-type(3) {
	top: 30px;
}

div#menu.active{
	border: 1px solid #000;
}

div#menu.active span{
	background-color: #000;
}

div#menu.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
div#menu.active span:nth-of-type(2) {
	opacity: 0;
}
div#menu.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#header{
		height: 48px;
	}
	
	div#header div.inner{
		width: auto;
	}
	
	div#header div.inner .logo{
		top: 4px;
		left: 10px;
	}
	
	div#header div.inner ul.globalNav{
		display: none;
	}
	
	/* 検索ボックス */

	div#btn-search{
		display: block;
		cursor: pointer;
		position: fixed;
		z-index: 100;
		top: 2px;
		right: 56px;
		width: 40px;
		height: 40px;
		border: 2px solid #000;
		border-radius: 30px;
		background-image: url(../img/icon/icon-search.png);
		background-size: 19px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	div#header div.inner div#search {
		display: none;
	    position: fixed;
	    top: 55px;
	    right: 0;
	    left: auto;
	    width: 100%;
	    padding: 10px;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    background-color: #fff;
	}
	
	div#header div.inner div#search::before{
		content: "";
		display: block;
		position: absolute;
		top: -4px;
		right: 74px;
		width: 10px;
		height: 10px;
		background-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	div#menu{
		position: fixed;
		top: 0;
		right: 0;
		border-radius: 0;
		border-color: #000;
		background-color: #000;
	}
	
	div#menu.active span{
		background-color: #fff;
	}

}

/*-----------------------------------------------
 modal
-----------------------------------------------*/

div#modal-menu{
	display: none;
	position: fixed;
	z-index: 101;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div#modal-menu .close{
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.95);
}

div#modal-menu div.inner{
	z-index: 2;
	width: 480px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

div#modal-menu div.inner h2{
	margin-bottom: 5px;
	line-height: 0;
}

div#modal-menu div.inner ul.list1 {
	margin-bottom: 20px;
}

div#modal-menu div.inner ul.list1 li{
	float: left;
	width: 50%;
	line-height: 0;
}

div#modal-menu div.inner ul.list2 {
	margin-bottom: 20px;
}

div#modal-menu div.inner ul.list2 li:nth-child(1){
	float: left;
	width: 33.75%;
	line-height: 0;
}

div#modal-menu div.inner ul.list2 li:nth-child(2){
	float: left;
	width: 32.5%;
	line-height: 0;
}

div#modal-menu div.inner ul.list2 li:nth-child(3){
	float: left;
	width: 33.75%;
	line-height: 0;
}

div#modal-menu div.inner ul.list3 li{
	float: left;
	width: 50%;
	line-height: 0;
}

div#modal-menu div.inner ul.list4{
	text-align: center;
	margin-bottom: 20px;
}

div#modal-menu div.inner ul.list4 li{
	display: inline-block;
	padding: 0 10px;
	line-height: 0;
}
/*171201電子版ナビ変更*/
/*div#modal-menu div.inner ul.list5 {
	margin-bottom: 20px;
}
div#modal-menu div.inner ul.list5 li{
	width: 100%;
	line-height: 0;
}*/
/*20181001更新*/

div#modal-menu div.inner ul.list5 {
	margin-bottom: 20px;
}

div#modal-menu div.inner ul.list5 li{
	float: left;
	width: 50%;
	line-height: 0;
}

div#modal-menu div.inner h2 img,
div#modal-menu div.inner ul li img{
	width: 100%;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	div#modal-menu div.inner{
		width:auto;
		padding-top: 50px;
	}
	
	div#modal-menu div.inner h2 img{
		width: 100%;
	}
	
	div#modal-menu div.inner ul li img{
		width: 100%;
	}
	
	div#modal-menu div.inner ul.list1,
	div#modal-menu div.inner ul.list2,
	div#modal-menu div.inner ul.list4{
		margin-bottom: 10px;
	}
	
	
}

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

html{
	background-image: url(../img/bg2.png);
	background-position: 50% top;
}

body{
	background-image: url(../img/bg1.png);
	background-position: 50% top;
}

div#content{
	width: 960px;
	margin: 0 auto;
	padding-top: 69px;
}

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

}

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

div#footer{
	position: relative;
	background-color: #b3b3b3;
}

div#footer div.logo{
	display: none;	
}

div#footer div.footer-top{
	background-color: #fff;
}

/* pagetop */

div#footer div.pagetop{
	position: fixed;
	right: 10px;
	bottom: 10px;
}

div#footer div.pagetop a{
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background-color: rgba(148,148,148,0.6);
}

div#footer div.pagetop a::before{
	content: "";
	position: absolute;
    top: 25px;
    left: 21px;
    width: 15px;
    height: 15px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* ExternalNav */

div#footer div.ExternalNav{
	padding: 20px 0;
	background-color: #fff;
}

div#footer div.ExternalNav ul{
	width: 960px;
	margin: 0 auto;
}

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

/* footerNav */

div#footer div.footer-bottom{
	width: 960px;
	padding: 20px 0;
	margin: 0 auto;
}

div#footer div.footer-bottom div.footerNav{
	margin-bottom: 20px;
}

div#footer div.footer-bottom div.footerNav div.box{
	float: left;
	width: 240px;
}

div#footer div.footer-bottom div.footerNav ul li > ul{
	padding-left: 20px;
}

div#footer div.footer-bottom div.footerNav ul li p{
	margin-bottom: 10px;
	color: #fff;
}

div#footer div.footerNav ul li{
	margin-bottom: 10px;
	font-size: 12px;
}

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

div#footer div.footer-bottom p.terms,
div#footer div.footer-bottom p.copy{
	font-size: 12px;
	color: #fff;
	text-align: center;
}

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

div#footer div.footer-bottom p.terms a{
	color: #fff;
}

/* sns */

div#footer div.sns{
	margin-bottom: 20px;
	text-align: center;
}

div#footer div.sns div{
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
}

div#footer div.sns div:last-child{
	margin-right: 0;
}
/* abj */
div#footer p.abj {
    text-align: center;
}
div#footer p.abj img {
    width: 72px;
}
div#footer p.abj-txt {
	padding-bottom: 20px;
    text-align: center;
    font-size: 120%;
	color: #fff;
}
div#footer p.abj-txt a{
	color: #fff;
}

@media screen and (max-width:767px) and (min-width: 1px){

	div#footer div.stripe{
		  width: 100%;
		  height: 14px;
		  background-image: -webkit-linear-gradient(-45deg,#fff 25%,#b3b3b3 25%, #b3b3b3 50%, #fff 50%, #fff 75%, #b3b3b3 75%, #b3b3b3);
		  background-image: linear-gradient(-45deg,#fff 25%,#b3b3b3 25%, #b3b3b3 50%, #fff 50%, #fff 75%, #b3b3b3 75%, #b3b3b3);
		  background-size: 30px 30px;
	}
	
	div#footer div.logo{
		display: block;
		height: 60px;
		margin-right: 60px;
		line-height: 0;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 10px 0 10px 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	div#footer div.logo img{
		height: 40px;
	}
	
	div#footer div.footer-top{
		background-color: #b3b3b3;
	}
	
	div#footer div.pagetop{
		position: static;
		float: right;
		width: 60px;
		height: 60px;
		border-bottom: 1px solid #fff;
		padding: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		line-height: 0;
	}
	
	div#footer div.pagetop a{
		border-radius: 0;
		background: none;
	}
	
	/* ExternalNav */
	
	div#footer div.ExternalNav{
		width: auto;
		padding: 10px;
		background-color: transparent;
	}

	div#footer div.ExternalNav ul{
		width: auto;
		text-align: center;
	}
	
	div#footer div.ExternalNav ul li{
		margin-right: 10px;
	}
	
	div#footer div.ExternalNav ul li a{
		color: #fff;
	}
	
	/* footerNav */

	div#footer div.footer-bottom{
		width: auto;
		padding: 0 10px 10px;
		margin: 0 auto;
	}

	div#footer div.footer-bottom p.terms{
		text-align: left;
	}
	
	div#footer div.footer-bottom div.footerNav{
		display: none;
	}
	/* abj */
	div#footer p.abj{
	text-align: left;
	float: left;
	padding-right:10px;
}
	div#footer p.abj-txt{
		text-align: left;
	}
}