/*
#40768c
#a9b1b5
#4c4948 グレー
#221714 黒
*/
/**************************************** ヘッダー ****************************************/
.headerarea {position:fixed;top:0px;left:0px;width:100%;height:60px;z-index:5000;}
.home .pageheaderarea {display:none;}
.pageheaderarea {}
.pageheaderarea .pagemenu {position:fixed;top:0px;right:0px;width:50px;z-index:5000;}
.pageheaderarea .prevbtn {position:fixed;top:0px;left:0px;width:50px;z-index:5000;}
.logoarea {position:fixed;top:100px;left:7vw;}
.logoarea a {}
.logoarea img {width:200px;}

.menuarea {position:fixed;top:80px;right:7vw;width:300px;height:50px;text-align:right;padding: 0px 0px 0px 0px;z-index:1000;}
.menu {position:relative;z-index:9100;}
.menu.active a, .menu.active span {display:none;}
.menu a, .menu span {line-height:50px;font-size:14px;display:inline-block;height:50px;margin-left:20px;color:#fff;cursor:pointer;}

.menu a.menu02 {margin-left:35px;}

.headerarea.on {background:#222;}
.headerarea.on .logoarea{top:17px;transition:0.4s;}
.headerarea.on .menuarea {top:10px;transition:0.4s;}
.headerarea.on .menu a, .headerarea.on .menu span {color:#fff;}
.headerarea.on .menu .bar {border-top:solid #fff 1px;}

.barwrap {position:fixed;top:103px;right:280px;z-index:9000;}
.barwrap {display:inline-block;height:50px;width:50px;vertical-align:middle;transition:0.3s;}
.bar {border-top:solid #fff 1px;width:50px;height:1px;transition:0.3s;}
/*
.home .menu a, .home .menu span {color:#333;}
.home .bar {border-top:solid #333 1px;}
*/

.headerarea.on .barwrap {top:33px;}
.headerarea.on .barwrap.on {top:70px;}

.menu .barwrap.on {position:fixed;top:70px;right:70px;transition:1s;}
.menu .barwrap.on .bar {border-top:solid #fff 1px;transition:1s;}
.menu .barwrap.on .bar.bar01 {transform:rotateZ(225deg);}
.menu .barwrap.on .bar.bar02 {transform:rotateZ(315deg);}

/*SP*/
@media (max-width: 896px){
	.menuarea {top:50px;width:auto;}
	.logoarea {top:66px;}
	.logoarea img {width:32vw;}
	.headerarea.on .logoarea{top:22px;}
	.headerarea.on .menuarea {top:5px;}
	.barwrap {top:50px;right:-130px;}
	.barwrap.on {}
	.menu a.menu02 {margin-left:15px;}
	.headerarea.on .barwrap.on {top:30px;}
	.menu .barwrap.on {top:30px;right:15px;}
}


.menubody {position:fixed;top:0px;right:0px;height:100vh;width:100vw;z-index:9000;overflow:scroll;padding:90px 120px 0px 120px;transform:translateX(100vw);transition:0.4s;}
.menubody {background:radial-gradient(#4c4948, #221714);}

.menubody.active {transform:translateX(0px);}
.menubody a {font-size:1.0rem;color:#fff;display:block;text-align:center;margin-bottom:1px;}
.menubody img.close {width:35px;position:absolute;top:50px;right:50px;}
.menubody .menuitems {padding-bottom:2px;}
.menubody .menuitems .inner {padding:70px 0px;position:relative;}
.menubody .menuitems .inner p {position:relative;z-index:100;color:#fff;font-size:1.1rem;}
.menubody .menuitems .inner .bgcover {position:absolute;top:1px;left:1px;height:calc(100% - 2px);width:calc(100% - 2px);background-repeat:no-repeat;background-position:center center;background-size:cover;filter:brightness(100%);transition:0.4s;}
.menubody .menuitems .inner:hover .bgcover {filter:brightness(40%);}
.menubody .menu01 .bgcover {background-image:url(../img/cmn/menu01.jpg);}
.menubody .menu02 .bgcover {background-image:url(../img/cmn/menu02.jpg);}
.menubody .menu03 .bgcover {background-image:url(../img/cmn/menu03.jpg);}
.menubody .menu04 .bgcover {background-image:url(../img/cmn/menu04.jpg);}
.menubody .menu05 .bgcover {background-image:url(../img/cmn/menu05.jpg);}
.menubody .menu06 .bgcover {background-image:url(../img/cmn/menu06.jpg);}

.menubody .menulist .inner {padding:0px 1px;position:relative;}
.menubody .menulist .inner a {color:#fff;font-size:1.1rem;background:#4c4948;padding:20px 0px;width:100%;}
.menubody .menulist .inner a:hover {text-decoration:none;background:#777;}

.menubody .menuctabox {text-align:center;width:100%;padding:40px 0px 40px 0px;}
.menubody .menuctabox h3 {color:#fff;font-size:1.5rem;margin-bottom:10px;font-weight:normal;}
.menubody .menuctabox p {color:#fff;font-size:0.9rem;}
.menubody .menuctabox a.header_tel {display:inline-block;font-size:2.5rem;color:#fff;letter-spacing:0.05em;margin-top:25px;
background:url(../img/cmn/header_tel.svg) no-repeat left center;background-size:contain;padding-left:1.1em;}
.menubody .menuctabox a:hover {text-decoration:none;opacity:0.8;}
.menubody .menuctabox a.header_mail {display:inline-block;font-size:1.2rem;color:#fff;letter-spacing:0.05em;margin-top:25px;border:solid #fff 1px;
background:url(../img/cmn/header_mail.svg) no-repeat left center;background-size:contain;padding: 10px 30px 10px 3.0em;}


.pankuzuarea {padding:13px 10px;background:#4c4948;position:relative;z-index:3000;}
.pankuzu {color:#fff;font-size:0.9rem;width:1200px;max-width:100%;margin: 0px auto 0px auto;}
.pankuzu span {color:#fff;padding:0px 2px;}
.pankuzu span a {color:#fff;}


/*SP*/
@media (max-width: 896px){
	.menubody {padding:60px 20px 0px 20px;}
	.menubody .menuitems .inner {padding:20px 0px;}
	.menusnsbox {text-align:center;}
	.menusnsbox p {color:#fff;padding:25px 15px;}
	.menubody .menusnsbox a {display:inline-block;}
	.menusnsbox img {width:35px;padding: 7px 5px 0px 5px;}
	.menubody .menuctabox {padding-top:0px;padding-bottom:0px;}
	.menubody .menuctabox .inner {padding-bottom:30px;}
	.menubody .menuctabox h3 {font-size:1.2rem;}
	.menubody .menuctabox p {font-size:0.8rem;}
	.menubody .menuctabox a.header_tel {font-size:1.8rem;margin-top:15px;}
	.menubody .menuctabox a.header_mail {font-size:0.9rem;margin-top:15px;padding: 7px 20px 7px 3em;}
}