/**************************************** ヘッダー ****************************************/
.headerarea {position:fixed;top:0px;left:0px;width:100%;height:90px;z-index:1000;background:#333;}

.logoarea {position:fixed;top:0px;left:0px;padding:20px;width:calc(25% - 1px);background:#000;text-align:center;}
.logoarea a {}
.logoarea img {height:50px;display:block;margin:0px auto;}

.menuarea {position:fixed;top:0px;right:0px;width:75%;height:90px;text-align:right;padding: 0px 0px 0px 0px;z-index:1000;}

.menu {}
.barwrap {display:none;}

.menu .menulist a {height:90px;line-height:1.5em;font-size:14px;padding-top:23px;display:block;width:calc(20% - 1px);float:left;margin-right:1px;color:#fff;text-align:center;background:#000;}
.menu .menulist a span {color:#aaa;font-size:11px;}
.menu .menulist a.cta {width:calc(10% - 1px);}
.menu .menulist a:hover {background:#222;text-decoration:none;}




/*SP*/
@media (max-width: 896px){
	.headerarea {background:#000;}

	.barwrap {position:absolute;top:0px;right:0px;display:block;height:90px;width:90px;vertical-align:middle;}
	.barwrap .bar {position:absolute;background:#fff;width:35px;height:1px;}
	.barwrap .bar.bar01 {top:40px;right:20px;}
	.barwrap .bar.bar02 {top:50px;right:30px;}

	.barwrap.on .bar {transition:0.6s;}
	.barwrap.on .bar.bar01 {transform:rotateZ(45deg);top:40px;right:20px;}
	.barwrap.on .bar.bar02 {transform:rotateZ(-45deg);top:40px;right:20px;}
	.barwrap.out .bar {transition:0.2s;}
	.barwrap.out .bar.bar01 {transform:rotateZ(0deg);top:40px;right:20px;}
	.barwrap.out .bar.bar02 {transform:rotateZ(0deg);top:50px;right:30px;}
	.menuarea {position:fixed;top:0px;right:0px;width:90px;}
	.menu {position:fixed;top:0px;right:0px;width:100%;height:100vh;background:#000;transform:translateX(150vw);padding:60px 50px 0px 50px;}
	.menu.on {transform:translateX(0px);transition:0.6s;}
	.menu.out {transform:translateX(150vw);transition:0.2s;}
	.menu .menulist {margin-bottom:35px;}
	.menu .menulist a span {display:none;}
	.menu .menulist a {position:relative;width:100%;float:none;margin:0px;height:auto;padding:5px 0px 15px 0px;}
	.menu .menulist a:after {content:"";position:absolute;left:0px;bottom:0px;width:100%;height:1px;background:#fff;transform:scaleX(0);}
	.menu.on .menulist a:after {transform:scaleX(1);transition:2s;}
	.menu .menulist a.cta {display:none;}
	.menu .snsarea {text-align:center;margin-bottom:35px;}
	.menu .snsarea p {color:#fff;}
	.menu .snsarea img {width:35px;margin:0px 10px;}

	.menu .headercontact {}
	.menu .headercontact .inner {width:50%;float:left;padding:10px;margin-bottom:5px;}
	.menu .headercontact .inner img {width:100%;}
	.menu .headercontact p {color:#fff;text-align:center;}
}
/*パソコンメニュー*/
@media (min-width: 897px){
}