
:root{
	--service_area_line_height:2.4;
}

.service.area .sw{
	display:inline-block;
	position:relative;
	padding:0 10px;
	font-size:var(--pc_font_size);
	line-height:var(--service_area_line_height) !important;
	cursor:pointer;
}

.service.area .sw.active{
	/*
	color:#fff;
	background:var(--orange);
	*/
}

.service.area .sw.active::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	border-bottom:var(--orange) 3px solid;
}

.service.area .lv1{
	display:-webkit-flex;
	display:flex;
	position:relative;
	height:279px;
	border:var(--gray) 1px solid;
	border-radius:10px;
	background:#fff;
}

.service.area .lv1 > li:first-of-type > a{
	/*
	border-top-left-radius:10px;
	*/
}

.service.area .lv2{
	display:-webkit-flex;
	display:flex;
	position:absolute;
	top:calc(var(--pc_font_size) * var(--service_area_line_height));
	left:0;
	width:100%;
	border-top:var(--gray) 1px solid;
}

.service.area .lv3{
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
	gap:10px;
	position:absolute;
	top:calc(var(--pc_font_size) * var(--service_area_line_height));
	left:-1px;
	padding:10px;
	width:calc(100% + 2px);
	border-top:var(--gray) 1px solid;
}

.service.area .lv3 > li > a{
	color:var(--font_color);
	border:var(--gray) 1px solid;
	border-radius:5px;
}

.service.area .lv3 > li > a:hover{
	color:#fff;
	background:var(--orange);
}
