@charset "UTF-8";
#header{
	top:0;
	left:0;
	z-index:120;
}
#headerOuter{
	height:76px;
}
#headerMain{
	z-index:120;
}
.scroll #headerOuter{
	height:64px;
}
#logo{
	width:192px;
	transition:width 0.4s ease-out
}
.scroll #logo{
	width:180px;
}
#navToggle,
.topBtn{
	width:36px;
	height:36px;
	cursor:pointer;
	margin-left:.4em
}
#iconMenu{
	vertical-align:middle
}
#navToggle .line{
	left:22%;
	width:56%;
	height:2px;
	opacity:1
}
.line-1{
	top:10px
}
.isActive .line-1{
	transform:translateY(7px) translateX(0) rotate(225deg)
}
.line-2{
	top:50%;
	margin-top:-1px
}
#navToggle.isActive .line-2{
	opacity:0;
	left:45%;
	width:10%
}
.line-3{bottom:10px}
.isActive .line-3{transform:translateY(-7px) translateX(0) rotate(-225deg)}
#mainContent{
	padding-top:72px;
}
#pageTitleWrap{height:192px}
#bgPageTitle{width:100%;height:100%;object-fit:cover;font-family:'object-fit:cover;'}

#breadcrumbList{font-size:0}
#breadcrumbList span{font-size:0.9rem;padding:.6em .4em;margin:0}
#breadcrumbList li{min-width:72px;text-align:center}

@media all and (min-width:992px),print{
	#headerOuter{
		height:100px;
	}
	.scroll #headerOuter{
		height:76px;
	}
	#logo{
		width:220px;
	}
	.scroll #logo{
		width:180px;
	}
	.topBtn{
		width:auto;
		height:auto;
		margin-left:.4em
	}
	.scroll #topMail{
		padding-top:.7em!important;
		padding-bottom:.7em!important
	}
	#mainContent{
		padding-top:140px;
	}
	#pageTitleWrap{height:360px}
#breadcrumb{background:none;color:#444;margin:0.1em 0}
#breadcrumbList li{min-width:0;flex:0 0 auto}
#breadcrumbList li:last-child{flex:0 1 auto}
#breadcrumbList span{vertical-align:top;padding:.3em 0}
#breadcrumbList li a{color:initial}
#breadcrumbList li:last-child a,#breadcrumb li:last-child a:hover{color:#444;cursor:default}
#breadcrumbList a span:after{content:">";padding:0 .3em}
#breadcrumbList li:last-child a span:after{content:""}
}