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

.logoarea {position:absolute;top:10px;left:50px;}
.logoarea a {display:block;float:left;}
.logoarea img {height:80px;display:block;margin:0px auto;}


/*PC*/
@media (min-width: 897px){
.menu {position:fixed;top:0px;right:0px;width:68%;height:100px;padding:0px 0px 0px 0px;z-index:7100;}
.menu .menulist {width:65%;float:left; height:100%;display:flex; flex-wrap:wrap;}
.menu .menulist .menuitem {width:33.3333%;height:50px;padding:1px;}
.menu .menulist a,.menu .menulist span {font-size:12px;line-height:16px;font-weight:bold;color:#000;}
.menu .menulist a,.menu .menulist span {display:block;width:100%;height:100%;background:#fff;padding:17px 15px;text-align:center;}
/*.menu .menulist .menuitem.line2 a {padding:9px 15px;}*/
.menu .menulist a:hover {text-decoration:none;background:#a90;color:#fff;}
.menu .menulist2 {width:35%;float:left; height:100%;display:flex; flex-wrap:wrap;}
.menu .menulist2 .menuitem {width:100%;height:50px;padding:1px;}
.menu .menulist2 a {font-size:12px;line-height:16px;font-weight:bold;color:#000;}
.menu .menulist2 a {display:block;width:100%;height:100%;padding:17px 15px;text-align:center;}
.menu .menulist2 .menuitem:nth-child(1) a {background:#f90;color:#fff;}
.menu .menulist2 .menuitem:nth-child(1) a:hover {background:#a90;color:#fff;}
.menu .menulist2 .menuitem:nth-child(2) a {background:#d80;color:#fff;}
.menu .menulist2 .menuitem:nth-child(2) a:hover {background:#a90;color:#fff;}
}
.menu .menulist2 .menuitem.line2 a {padding:9px 15px;}
.menu .menulist2 a:hover {text-decoration:none;background:#468;color:#fff;}
.menu .menulist br.res {display:none;}

/*PC*/
@media (min-width: 897px){
	.barwrap {display:none;}
	@media (max-width: 1200px){
	}
}
/*RES*/
@media (min-width: 897px){@media (max-width: 1400px){
	.logoarea {top:20px;left:10px;}
	.logoarea img {height:60px;}
	.menu .menulist .menuitem.line2 a, .menu .menulist .menuitem.line2 span {padding:9px 15px;}
	.menu .menulist br.res {display:block;}
}}

/*SP*/
@media (max-width: 896px){
	.headerarea {height:60px;}
	.logoarea {top:5px;left:10px;}
	.logoarea img {height:55px;}
	.barwrap {position:fixed;top:0px;right:0px;width:60px;height:60px;z-index:8000;}
	.barwrap .bar {position:absolute;width:31px;height:1.5px;background:#000;}
	.barwrap .bar.bar1 {top:25px;left:15px;}
	.barwrap .bar.bar2 {top:33px;left:5px;}
	.barwrap.on {}
	.barwrap.on .bar {transition:0.4s;}
	.barwrap.on .bar.bar1 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotateZ(45deg);}
	.barwrap.on .bar.bar2 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotateZ(-45deg);}
	.barwrap.out {}
	.barwrap.out .bar {transition:0.4s;}
	.barwrap.out .bar.bar1 {top:25px;left:15px;transform:translateX(0%) translateY(0%) rotateZ(0deg);}
	.barwrap.out .bar.bar2 {top:33px;left:5px;transform:translateX(0%) translateY(0%) rotateZ(0deg);}

	.menu {position:fixed;top:0px;right:0px;width:100%;height:100vh;padding:100px 50px 50px 50px;background:#fff;z-index:7100;transform:translateX(100vw);}
	.menu.on {transform:translateX(0vw);transition:0.5s;}
	.menu.out {transform:translateX(100vw);transition:0.2s;}

	.menu .menulist {}
	.menu .menulist2 {}
	.menu .menulist a,.menu .menulist span {color:#000;display:inline-block;width:100%;border-bottom:solid #ddd 1px;padding:15px;}
	.menu .menulist2 a,.menu .menulist2 span {color:#000;display:inline-block;width:100%;border-bottom:solid #ddd 1px;padding:15px;}
}