@charset "utf-8";
#headNavi {position: absolute; z-index: 2; right: 40px; top: 70px;}
@media screen and (max-width: 1220px) {
	#headNavi {right: 20px; top: 80px;}
}
/* Nav
-----------------------------------------*/
.Nav .navbtn {display: none;}
.Nav ul.close {display: none;border-top: solid 1px #F5F4F0;}
.Nav > ul {margin: 0 auto;}
.Nav > ul > li {position: relative;display: inline-block; margin: 0; padding: 5px 10px 5px 10px; line-height: 30px;}
.Nav > ul > li.parent {position: relative;display: inline-block; margin: 0; padding: 5px 25px 5px 10px; line-height: 30px;}
.Nav > ul > li a {color: #222; font-weight: bold; font-size: 16px; text-shadow:1px 1px 2px #FFF,-1px -1px 2px #FFF;}
.Nav > ul > li.parent > a::before {display: block;content: "";position: absolute;top: 20px;right: 8px;width: 6px;height: 6px;margin: -6px 0 0 0;border-top: solid 2px #E96000;border-right: solid 2px #E96000;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.Nav > ul > li.parent.open > a {color: #FFF;}
.Nav > ul > li.parent.open > a::after {background: #333;-webkit-transform: scale(1);transform: scale(1);}
.Nav > ul > li a:hover {color: #fff; text-decoration: none; text-shadow: none;}
.Nav > ul > li a::after {position: absolute;z-index: -1;display: block;content: '';}
.Nav > ul > li a,
.Nav > ul > li a::after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s;}
.Nav > ul > li a::after {top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: scale(.5);transform: scale(.5);}
.Nav > ul > li a:hover::after {background: #E96000;-webkit-transform: scale(1);transform: scale(1);}
/* 2階層 */
.Nav > ul > li > ul {display: none;position: absolute;top: 40px;left: 0;width: auto;background-color: rgba(233,96,0,0.8);z-index: 9;}
.Nav > ul > li > ul li {white-space: nowrap;padding: 5px 10px;}
.Nav > ul > li > ul li a {position: relative; color: #FFF; text-shadow: none;}
.Nav > ul > li > ul li a:hover {text-decoration: none; color: #222;}
.Nav > ul > li > ul li a:hover::after {background: none;}
@media screen and (max-width: 1220px) {
	.Nav > ul > li {padding: 5px;}
	.Nav > ul > li:last-child {padding-right: 0!important;}
	.Nav > ul > li.parent {padding: 5px 20px 5px 5px;}
	.Nav > ul > li a {font-size: 15px;}
}

@media screen and (max-width: 812px) {
	#headNavi {position: inherit; z-index: 2;}
	.Nav .navbtn {display: block;position: absolute;top: 0; right: 0; z-index: 10;}
	.Nav .navbtn a,
	.Nav .navbtn a.close {display: block;position: relative;width: 50px;height: 50px;background-color: #E96000; border-radius: 0;}
	.Nav .navbtn a::before,
	.Nav .navbtn a.close::before {position: absolute;top:15px;left:10px;content:"";width: 30px;height: 2px;background-color: #FFF;transition: .2s;}
	.Nav .navbtn a.open::before {top:24px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
	.Nav .navbtn a::after,
	.Nav .navbtn a.close::after {position: absolute;bottom:15px;left:10px;content:"";width: 30px;height: 2px;background-color: #FFF;transition: .2s;}
	.Nav .navbtn a.open::after {bottom:24px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
	.Nav .navbtn a.open {}
	.Nav .navbtn a span {display: block;overflow: hidden;width: 1px;height: 1px;}
	.Nav .navbtn a span::after,
	.Nav .navbtn a.close span::after {position: absolute;top:24px;left:10px;content:"";width: 30px;height: 2px;background-color: #FFF;}
	.Nav .navbtn a.open span::after {display: none;}
	.Nav > ul {display: none;position: absolute;top: 0;left: 0;right: 0;z-index: 9;background-color: #FFF;}
	.Nav > ul > li {display: block; border-bottom: solid 1px #dddddd;}
	.Nav > ul > li.parent {display: block; padding: 10px;}
	.Nav > ul > li.parent.open > a::before {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
	.Nav > ul > li.parent.open {border-bottom: none; background-color: #E96000;}
	.Nav > ul > li.parent.open > a {color: #FFF;}
	.Nav > ul > li a:hover::after {background: none ;-webkit-transform: scale(1); transform: scale(1);}
	.Nav > ul > li a {display: block; text-shadow:none;}
	.Nav > ul > li a:hover {color: #222;}
	.Nav > ul > li a span.JP {text-align: left;}
	/* 2階層 */
	.Nav > ul > li > ul {background-color: #E96000; position: static;}
	.Nav > ul > li > ul li a {border-bottom: solid 1px #dddddd;}
	.Nav > ul > li > ul li a:hover {background-color: #E96000;}
}