/**************************************** ヘッダー ****************************************/
.headerarea {width:100%;height:120px;background:#fff;z-index:1000;}
.headerhide .headerarea {display:none;}
.headerscroll .headerarea.on {position:fixed;top:0px;left:0px;display:block;transform:translateY(-100px);opacity:0;transition:0.4s;}
.headerscroll .headerarea.active {transform:translateY(0px);opacity:1;}
.logoarea {height:120px;float:left;padding:20px 0px;}
.logoarea h1 {height:100%;}
.logoarea a {padding:5px;height:100%;width:100%;display:block;position:relative; }
.logoarea img {width:100%;height:100%;object-fit:contain;object-position:3vw 0px;
	position:absolute;top:50%;left:0px;transform:translateY(-50%);}
@media (max-width: 896px){
	.headerarea {height:60px;}
	.logoarea a {padding:13px 15px 13px 15px;height:100%;width:100%;display:block; }
}


/*レスポンシブメニュー*/
@media (max-width: 896px){
	.menuarea {}
	.logoarea {height:60px;width:80vw;position:relative;padding:5px 5px;}
	.logoarea a {padding:0px;}
	.logoarea img {left:0px;}
	.headerctaarea {display:none;}
	.menuwrap {position:fixed;top:0px;right:0px;height:100%;width:100%;background:#f2f2f2;padding:15vh 10vw;z-index:8000;}
	.menuwrap {margin-right:-100vw;transition:0.5s;}
	.menuwrap.active {margin-right:0px;}
	.menuarea ul.menuitem {height:100%;width:100%;overflow:scroll;}
	.menuarea ul.menuitem li a {display:block;width:100%;text-decoration:none;color:#000;font-size:0.9rem;line-height:2em;padding:0.3em 1em;border-bottom:dotted #000 1px;}
	
	.menubox {position:fixed;top:10px;right:10px;width:42px;height:42px;padding: 12px 0px 3px 0px;z-index:9000;}
	.menubox .bar {border-top:solid #000 1px;width:60%;margin:0px auto;height:9px;transition:1s;}
	.menubox.on .bar {border-top:solid #000 1px;}
	.menubox.on .bar.bar01 {transform: rotate(-45deg);margin-top:10px;margin-left:12px;}
	.menubox.on .bar.bar02 {width:0px;}
	.menubox.on .bar.bar03 {transform: rotate(-135deg);margin-top:-24px;margin-left:12px;}
}
/*パソコンメニュー*/
@media (min-width: 897px){
	.logoarea {width:30%;}
	.menubox {display:none; }
	.headerctaarea {float:right;width:70%;height:80px;text-align:right;display:flex;justify-content:flex-end;padding-right:50px;}
	.headerarea .telbox {display:block;height:80px;margin-right:20px;padding:15px 0px;}
	.headerarea .telbox a.image {}
	.headerarea .telbox a.image img {height:100%;}
	.headerarea .telbox a.image img:hover {opacity:0.8;}
	.headerarea .telbox a.text {font-size:38px;line-height:1em;color:#000;text-decoration:none;
	background-image:url(../img/cmn/header_tel.svg);background-size:30px auto;background-repeat:no-repeat;background-position:left center;padding-left:38px; }
	.headerarea .telbox a:hover {color:#000;}
	.headerarea .telbox p {font-size:14px;}
	.headerctaarea .iconbox {display:block;}
	.headerctaarea .iconbox img {height:100%;padding:25px 3px;}
	.headerctaarea .iconbox img:hover {opacity:0.8;}

	.menuarea {float:right;width:70%;height:40px;padding-right:50px;}
	.menuarea ul.menuitem {text-align:center;display:flex;justify-content:flex-end;}
	.menuarea ul.menuitem li {display:block;text-align:center;position:relative;}
	.menuarea ul.menuitem li a {display:block;color:#000;font-size:15px;padding:0em 10px;height:40px;line-height:40px;text-decoration:none;}
	.menuarea ul.menuitem li a:hover {text-decoration:none;background-color:#ddd;}
	.menuarea ul.sub-menu {display:none;}
	.menuarea ul.menuitem li:hover ul.sub-menu {display:block;position:absolute;top:60px;left:0px;width:250px;}
	.menuarea ul.sub-menu li {width:250px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

	.bgcolor {}
	.bgcolor .headerarea {background:#000;border-bottom:solid #222 1px;}
	.bgcolor .headerarea .telbox a.text {color:#fff;background-image:url(../img/cmn/header_tel_w.svg);}
	.bgcolor .headerarea .telbox p {color:#fff;}
	.bgcolor .headerarea .telbox a:hover {color:#fff;}
	.bgcolor .menuarea {}
	.menuarea ul.menuitem {}
	.bgcolor .menuarea ul.menuitem li {}
	.bgcolor .menuarea ul.menuitem li a {color:#fff;}
	.bgcolor .menuarea ul.menuitem li a:hover {background-color:#555;}
	@media (max-width: 1350px){
		.menuarea ul.menuitem li a {font-size:0.8rem;padding:0px 5px;}
	}

}