﻿/*	fixTop
============================== */

div.fixtop-outer {
	position:relative;
}
div.fixtop-outer div.fixtop {
	left:0;
	top:0;
	width:100%;
	z-index:5;
}
div.fixtop-outer div.fixtop-off {
	position:absolute;
}
div.fixtop-outer div.fixtop-on {
/*	-webkit-animation: slideInDown 700ms;
	animation: slideInDown 700ms;*/
	position:fixed;
}
@media all and (min-width: 768px) {
div.fixtop-outer {
	padding-top:70px;
}
div.fixtop-on nav {
	-webkit-box-shadow:0 12px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:0 12px 0 0 hsla(0,0%,0%,0.1);
}
}
@media all and (max-width: 767px) {
div.fixtop-outer {
	padding-top:50px;
}
div.fixtop-on nav {
	-webkit-box-shadow:0 6px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:0 6px 0 0 hsla(0,0%,0%,0.1);
}
}

/*	nav
============================== */

div.menu nav {
	background-color:#fff;
	border-top:3px solid #d6f4ff;
	border-bottom:3px solid #d6f4ff;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #e8f9ff), to(#e8f9ff));
	background-image: linear-gradient(transparent 50%, #e8f9ff 50%);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
div.menu nav ul {
	display:table;
}
div.menu nav ul li {
	display:table-cell;
	vertical-align:middle;
	/* width:32%; */
}
/*
div.menu nav ul li:first-child,
div.menu nav ul li:last-child {
	width:18%;
}
*/
div.menu nav ul li > span {
	border-color:#b2e0fa;
	border-color:#d6f4ff;
	border-style:solid;
}
div.menu nav ul li:nth-child(4n-3) > span {
	border-right-width:3px;
}
div.menu nav ul li:nth-child(4n-2) > span {
	border-left-width:1px;
	border-right-width:2px;
}
div.menu nav ul li:nth-child(4n-1) > span {
	border-left-width:2px;
	border-right-width:1px;
}
div.menu nav ul li:nth-child(4n) > span {
	border-left-width:3px;
}
div.menu nav ul li > span,
div.menu nav ul li > span > a {
	display:block;
}
div.menu nav ul li > span > a {
	color:#000;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 2px 2px 3px #d6f4ff;
	background-image:url(../img/bg_menu.svg?0);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	text-decoration:none;
}
div.menu nav ul li.comingsoon > span > a {
	opacity:0.3;
	cursor:default;
}
div.menu nav ul li.new > span > a {
	position:relative;
}
div.menu nav ul li.new > span > a:after {
	content:"NEW";
	display:inline-block;
	position:absolute;
	left:50%;
	bottom:-1em;
	height:auto;
	margin-left:-1.75em;
	padding:0 0.5em;
	line-height:1.5;
	color:#ccff2c;
	background-color:#ff2cae;
	text-shadow:none;
	-webkit-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
@media all and (min-width: 768px) {
div.menu nav {
	height:70px;
}
div.menu nav ul {
	width:1080px;
	border-left:4px solid #d6f4ff;
	border-right:4px solid #d6f4ff;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0 auto;
}
div.menu nav ul li span a {
	font-size:150%;
	height:64px;
	line-height:64px;
}
div.menu nav ul li.new > span > a:after {
	font-size:16px;
}
}
@media all and (max-width: 767px) {
div.menu nav {
	height:50px;
}
div.menu nav ul {
	width:100%;
}
div.menu nav ul li span a {
	height:44px;
	line-height:44px;
}
div.menu nav ul li.new > span > a:after {
	font-size:12px;
}
}
@media all and (min-width: 481px) and (max-width: 767px) {
div.menu nav ul li span a {
	font-size:112.5%;
}
}
@media all and (min-width: 375px) and (max-width: 480px) {
div.menu nav ul li span a {
	font-size:100%;
}
}
@media all and (max-width: 374px) {
div.menu nav ul li span a {
	font-size:87.5%;
}
}