/* ==================================================
	local_navi
================================================== */

@media screen and (max-width: 1023px) {
	.local_navi_trigger {
		font-size: 20px;
		line-height: 62px;
	}
	.local_navi_trigger::before {
		color: #000;
	}
	.local_navi .local_navi_menu {
		border-top: 1px solid #e8e8e8;
	}
	.local_navi_menu > h1 {
		display: none;
	}
	.local_navi_menu_level1 > li {
		background: #fff;
		border-color: #e8e8e8;
	}
	.local_navi_menu_level1 > li a {
		color: #000;
	}
	.local_navi_menu_level1 > li a br {
		display: none;
	}
	.local_navi_menu_level1 > li > a:not(:only-child) {
		border-color: #e8e8e8;
	}
	.local_navi_menu_level1 > li.local_navi_level2_open {
		background: #fff;
	}
	.local_navi_menu_level2 > li {
		background: rgba(243,243,243,1);
		border-top: none;
	}
	.local_navi_level2_trigger::after {
		color: #000;
	}

	/* toplink -------------------- */
	.toplink a {
		display: block;
		padding: 1.2rem 1.6rem;
		color: #000;
	}
	.local_navi_menu_level1 > li.main_menu_btn{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.local_navi_menu_level1 > li.main_menu_btn a{
		width: 100%;
		text-align: center;
	}
}

@media screen and (min-width: 1024px) {
	.local_navi {
		right: 50%;
		left: 50%;
		width: 100vw;
		margin-right: -50vw;
		margin-left: -50vw;
		padding: 0 20px;
		background: #fff;
	}
	.local_navi .local_navi_menu {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		max-width: 1220px;
		margin: 0 auto;
	}
	.local_navi_menu a {
		color: #000;
	}
	.local_navi_menu > h1,
	.local_navi_menu > h1 a {
		color: #000;
		font-size: 20px;
		font-weight: normal;
		line-height: 1;
		text-decoration: none;
		margin: 0;
	}
	.local_navi_menu > h1 a:hover {
		text-decoration: underline;
	}
	.local_navi_menu_level1 {
		display: flex;
		justify-content: space-between;
	}
	.local_navi_menu_level1 > li:nth-of-type(n+2) {
		margin-left: 30px;
	}
	.local_navi_menu_level1 > li.main_menu {
		height: 70px;
		text-align: center;
	}
	.local_navi_menu_level1 > li.main_menu > a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		color: #000;
		line-height: 1.4;
	}
	.local_navi_menu_level1 > li.main_menu > a:hover::after {
		display: block;
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: #165dba;
	}
	.local_navi_menu_level1 > li.main_menu_btn{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* level2 -------------------- */
	.local_navi_menu_level2 {
		width: 300px;
		background: #fff;
		border: 1px solid #e8e8e8;
		box-shadow: 0 12px 12px 0 rgb(0 0 0 / 20%);
	}
	.local_navi_menu_level2 > li > a {
		display: block;
		padding: 10px 20px;
		text-align: left;
		transition: .2s;
		white-space: nowrap;
	}
	.local_navi_menu_level2 > li > a:hover {
		color: #165dba;
		text-decoration: none;
		background: #e6fcff; /*rgba(44,48,56,.05)*/
	}
}



/* ----------------------------------------
	dd_btn
---------------------------------------- */

.dd_btn {
	padding: 1.2rem 1.6rem;
	text-align: center;
}
.dd_btn > span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: .3em .8em .3em 1em;
	color: #fff;
	background: #000;
	cursor: pointer;
}
.dd_btn > span::after {
	content: "\E90c";
	margin-left: 8px;
	font-family: HPIcons;
	line-height: 1;
}
.dd_btn > span.open::after {
	content: "\E90b";
}
.dd_btn > ul {
	display: none;
	width: 100%;
	background: #fff;
}
.dd_btn > ul > li > a {
	display: block;
	padding: 10px 20px;
	text-align: left;
	transition: .2s;
}

@media screen and (max-width: 1023px) {
	.dd_btn > ul > li {
		background: rgba(243,243,243,1);
	}
}

@media screen and (min-width: 1024px) {
	.dd_btn {
		align-self: center;
		position: relative;
		padding: 0;
		margin-left: auto;
	}
	.dd_btn > span {
		width: 240px;
	}
	.dd_btn > ul {
		position: absolute;
	}
	.dd_btn > ul > li > a:hover {
		color: #165dba;
		text-decoration: none;
		background: #e6fcff; /*rgba(44,48,56,.05)*/
	}
}
