/* header */
header#header {
	width:100%;
	height:80px;
	background:#FFF;
	position:fixed;
	left:0;
	top:0;
	z-index:20000000;
	-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
	box-shadow:0 0 3px rgba(0,0,0,0.2);
}
#headerTop {
	display:none;
}
#headerMenu {
}
#headerMenu .headerMenuMobileLayout {
	display:table;
	width:100%;
	height:44px;
}
#headerMenu #headerMobileMenu {
	display:table-cell;
	width:56px;
	height:44px;
	z-index:20000;
	vertical-align:top;
}
#headerMenu #headerMobileMenu .headerNav {
	display:block;
	width:56px;
	height:44px;
	background:url(../../img/header/navicon_phone.png) no-repeat center 8px;
	background-size:26px;
	position:relative;
}
#headerMenu #headerMobileMenu .headerNav span {
	position:absolute;
	bottom:2px;
	left:0;
	line-height:1em;
	width:100%;
	text-align:center;
	font-size:0.7em;
}
#headerMenu p#sitelogo {
	display:table-cell;
	width:68px;
	height:44px;
	vertical-align:top;
}
#headerMenu p#sitelogo a {
	display:block;
	width:68px;
	height:44px;
	background:url(../../img/header/sitelogo_phone.png) no-repeat center center;
	background-size:68px 38px;
	text-indent:-1000em;
}
#headerMenu #headerNav {
	display:table-cell;
	height:44px;
	vertical-align:top;
}
#headerMenu #headerNav nav ul.nav-menu {
	display:table;
	table-layout: fixed;
	float:right;
}
#headerMenu #headerNav nav ul.nav-menu > li {
	display:table-cell;
	width:65px;
	height:44px;
	position:relative;
	vertical-align:top;
}
#headerMenu #headerNav nav ul.nav-menu > li > a {
	color:#444;
	text-decoration:none;
}
#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA {
	display:block;
	text-align:center;
	position:relative;
	height:44px;
	line-height:44px;
	padding:0;
}
#headerMenu #headerNav nav ul.nav-menu > li a#navLogin {
	background-image:url(../../img/header/header_icn_login.png);
	background-repeat:no-repeat;
	background-position:center 0px;
	background-size:24px;
}

#headerMenu #headerNav nav ul.nav-menu > li a#navBeginner {
	background-image:url(../../img/header/header_icn_beginner.png);
	background-repeat:no-repeat;
	background-position:center 4px;
	background-size:24px;
}
#headerMenu #headerNav nav ul.nav-menu > li a#navCart {
	background-image:url(../../img/header/header_icn_cart.png);
	background-repeat:no-repeat;
	background-position:center 4px;
	background-size:24px;
}
#headerMenu #headerNav nav ul.nav-menu > li a#navMypage {
	background-image:url(../../img/header/header_icn_mypage.png);
	background-repeat:no-repeat;
	background-position:center 4px;
	background-size:24px;
}
#headerMenu #headerNav nav ul.nav-menu > li a#navBookshelf {
	background-image:url(../../img/header/header_icn_bookshelf.png);
	background-repeat:no-repeat;
	background-position:center 4px;
	background-size:24px;
}
#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA:hover , 
#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA.open {
	background-color:#EEE!important;
}
#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA .headerNavLabel {
	font-size:0.7em;
	position:absolute;
	display:block;
	width:100%;
	text-align:center;
	line-height:1em;
	bottom:2px;
	left:0;
}
.cartNum {
	position:absolute;
	top: 1px;
	right: 2px;
	padding: 0 5px;
	line-height: 14px;
	border-radius: 7px;
	background: #d0111b;
	color: #fff;
	font-size: 11px;
	text-shadow:none;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1279px) {
	header#header {
		height:115px;
	}
	#headerTop {
		display:table;
		table-layout: fixed;
		width:100%;
		height:20px;
	}
	#headerTop #headerSiteCopy {
		display:table-cell;
		width:320px;
		line-height:20px;
		padding:0 0 0 10px;
		font-size:0.8em;
		color:#666;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#headerTop #headerUserName {
		display:table-cell;
		line-height:20px;
		padding:0 10px 0 10px;
		font-size:0.8em;
		color:#444;
		text-align:right;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	#headerMenu .headerMenuMobileLayout {
		display:block;
		width:auto;
		height:auto;
	}
	#headerMenu #headerMobileMenu {
		float:left;
		display:block;
		width:66px;
	}
	#headerMenu #headerMobileMenu .headerNav {
		width:66px;
	}
	#headerMenu #headerMobileMenu .headerNav span {
		bottom:2px;
	}
	#headerMenu p#sitelogo {
		display:block;
		float:left;
		width:115px;
		height:44px;
	}
	#headerMenu p#sitelogo a {
		width:115px;
		height:44px;
		background:url(../../img/header/sitelogo.png) no-repeat center center;
		background-size:115px 24px;
	}
	#headerMenu #headerNav {
		display:block;
		height:44px;
		float:right;
		padding:0 0 0 0;
	}
	#headerMenu #headerNav nav ul.nav-menu {
		display:block;
		float:right;
		width:auto;
		table-layout: auto;
	}

	#headerMenu #headerNav nav ul.nav-menu > li {
		display:block;
		float:left;
		width:66px;
		height:44px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navLogin {
		background-position:center 0px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navBeginner {
		background-position:center 4px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navCart {
		background-position:center 4px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navMypage {
		background-position:center 4px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navBookshelf {
		background-position:center 4px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA .headerNavLabel {
		bottom:2px;
		position:absolute;
		display:block;
		width:100%;
		text-align:center;
		line-height:1em;
	}
	.cartNum {
		top: -1px;
	}
}
@media only screen and (min-device-width: 1280px) {
	header#header {
		height:95px;
		min-width:1024px;
	}
	#headerTop {
		display:table;
		table-layout: fixed;
		width:100%;
		height:20px;
	}
	#headerTop #headerSiteCopy {
		display:table-cell;
		width:320px;
		line-height:20px;
		padding:0 0 0 10px;
		font-size:0.8em;
		color:#777;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
	}
	#headerTop #headerUserName {
		display:table-cell;
		line-height:20px;
		padding:0 10px 0 10px;
		font-size:0.8em;
		color:#444;
		text-align:right;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
	}
	#headerMenu .headerMenuMobileLayout {
		display:block;
		width:auto;
		height:auto;
	}
	#headerMenu #headerMobileMenu {
		display:none;
	}
	#headerMenu p#sitelogo {
		display:block;
		float:left;
		width:164px;
		height:44px;
	}
	#headerMenu p#sitelogo a {
		width:164px;
		height:44px;
		background:url(../../img/header/sitelogo.png) no-repeat center center;
		background-size:144px 30px;
	}
	#headerMenu #headerNav {
		display:block;
		height:44px;
		float:right;
		padding:0 0 0 0;
	}
	#headerMenu #headerNav nav ul.nav-menu {
		float:right;
		display:block;
		table-layout:auto;
		border-top:none;
	}
	#headerMenu #headerNav nav ul.nav-menu > li {
		display:block;
		float:left;
		width:auto;
		margin:8px 0 0 5px;
		height:30px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA {
		padding: 0 8px 0 25px;
		text-align:left;
		height:30px;
		line-height:30px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navLogin {
		background-position:4px center;
		background-size:20px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navBeginner {
		background-position:4px center;
		background-size:20px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navCart {
		background-position:4px center;
		background-size:20px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navMypage {
		background-position:4px center;
		background-size:20px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a#navBookshelf {
		background-position:4px center;
		background-size:20px;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA .headerNavLabel {
		font-size:0.9em;
		position:static;
		display: inline;
		width:auto;
	}
	#headerMenu #headerNav nav ul.nav-menu > li a.headerNavA#navLogin .headerNavLabel br {
		display:none;
	}
	.cartNum {
		top: -7px;
	}
}
/* /header */



/* header (headerSmallwin) */
header#header.headerSmallwin {
	height:50px;
}
header#header.headerSmallwin #headerMenu .headerMenuMobileLayout {
	padding-left:5px;
}
@media only screen and (min-device-width: 1280px) {
	header#header.headerSmallwin {
		height:45px;
	}
}
/* /header (headerSmallwin) */



/* .sub-nav */
.nav-item .sub-nav {
	position: absolute;
	display: none;
	top: 44px;
	background-color: #EEE;
	-moz-box-shadow:0 2px 2px rgba(0 , 0 , 0 , 0.2);
	-webkit-box-shadow:0 2px 2px rgba(0 , 0 , 0 , 0.2);
	box-shadow:0 2px 2px rgba(0 , 0 , 0 , 0.2);
	left:0px;
	right:0;
	padding:0 5px;
	z-index:16;
	min-width:100%;
	width:130px;
}
.nav-item:last-child .sub-nav {
	display: none;
	left:auto;
}
.nav-item .sub-nav.open {
	display: block;
}
.sub-nav a {
	color:#444;
	text-decoration:none;
}
.sub-nav a:hover {
	color:#444;
	text-decoration:underline;
}
.sub-nav ul.sub-nav-group li {
	border-bottom:1px solid #CCC;
}
.sub-nav ul.sub-nav-group li:last-child {
	border-bottom:none;
}
.sub-nav ul.sub-nav-group li a {
	display: block;
	padding:12px 10px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1279px) {
	.nav-item .sub-nav {
		top:44px;
		width:140px;
	}
	.sub-nav ul.sub-nav-group li a {
		padding:12px 10px;
	}
}
@media only screen and (min-device-width: 1280px) {
	.nav-item .sub-nav {
		top:30px;
		font-size:0.9em;
		width:140px;
	}
	.sub-nav ul.sub-nav-group li a {
		padding: 8px;
	}
}
/* /.sub-nav */