@charset "UTF-8";


.sitemap .page-header::before {
	content: '';
	position: absolute;
  	right: max(calc((100vw - 1200px) / 2 - -39px),20px);
  	top: 357px;
	display: block;
	width: min(12.34vw,153px);
	height: auto;
	aspect-ratio: 153 / 235;
	background: url(../img/blog/main_img.png) center / contain no-repeat;
  	transform: translateY(-50%);
}

.sec-sitemap {
	padding: 8rem 20px 15rem;
}

.sitemap-nav {
	column-count: 2;
	column-gap: 5rem;
	background: #fff;
	border-radius: 15px;
	padding: 5rem 5rem 3.5rem;

	--color-about: #e74921;
	--color-company: #0f91ce;
	--color-service: #1aa248;
	--color-other: #f98b2b;
}

.nav-item {
	break-inside: avoid;
	margin-bottom: 5.8rem;
}

.nav-item-ttl {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 7rem;
	border-radius: 1rem 3.5rem 3.5rem 1rem;
	color: #fff;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.5;
	padding-left: 5.7rem;
}

.nav-item-ttl::before {
	content: '';
	position: absolute;
	left: 1.8rem;
	top: 0;
	bottom: 0;
	display: block;
	width: 2.1rem;
	height: 2.1rem;
	background: rgba(255,255,255,.5);
	border-radius: 50%;
	margin: auto;
}

.nav-item-ttl::after {
	content: '';
	position: absolute;
	left: 3.3rem;
	top: 2.1rem;
	display: block;
	width: 5.1rem;
	height: auto;
	aspect-ratio: 51 / 19;
	background: url(../img/common/string.png) center / contain no-repeat;
	transform: translateX(-100%);
}

.about .nav-item-ttl {
	background-color: var(--color-about);
}

.company .nav-item-ttl {
	background-color: var(--color-company);
}

.service .nav-item-ttl {
	background-color: var(--color-service);
}

.other .nav-item-ttl {
	background-color: var(--color-other);
}

.nav-item-ttl.en {
	font-family: "Outfit", sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .1em;
}

.nav-item ul {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 3.2rem;
	padding-left: 2.4rem;
}

.nav-item.company > ul {
	column-count: 2;
}

.nav-item.service > ul {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 9.5%;
}

.nav-item li {
	position: relative;
	margin-bottom: .9em;
	padding-left: 2.4rem;
}

.nav-item li:last-child {
	margin-bottom: 0;
}

.nav-item li::before {
	content: '';
	position: absolute;
	top: .6em;
	left: 0;
	display: block;
	width: .4em;
	height: .4em;
	border-radius: 50%;
}

.nav-item.about li::before {
	background-color: var(--color-about);
}

.nav-item.company li::before {
	background-color: var(--color-company);
}

.nav-item.service li::before {
	background-color: var(--color-service);
}

.nav-item.other li::before {
	background-color: var(--color-other);
}

.nav-item a {
	position: relative;
	display: block;
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: .2s;
}

.nav-item a::after {
	display: none;
}

.nav-item a:hover {
	text-decoration: none;
}

.nav-item.about a:hover {
	color: var(--color-about);
}

.nav-item.company a:hover {
	color: var(--color-company);
}

.nav-item.service a:hover {
	color: var(--color-service);
}

.nav-item.other a:hover {
	color: var(--color-other);
}

.nav-item .has-child {
	margin-bottom: 0;
	padding-left: 0;
}

.nav-item .has-child::before {
	display: none;
}

.nav-item .has-child > a {
	font-weight: 700;
	text-decoration: none;
}

.nav-item.about .has-child > a {
	color: var(--color-about);
}

.nav-item.company .has-child > a {
	color: var(--color-company);
}

.nav-item.service .has-child > a {
	color: var(--color-service);
}

.nav-item.other .has-child > a {
	color: var(--color-other);
}

.nav-item .has-child ul {
	break-inside: avoid;
	margin-top: 1.9rem;
	padding-left: 0;
}

.nav-item li.child::before  {
	top: 1.3rem;
	width: 1.2rem;
	height: 2px;
	border-radius: 0;
}

@media screen and (max-width: 1100px) {
	.nav-item.company > ul {
		column-count: unset;
	}

	.nav-item.service > ul {
		display: block;
	}

	.nav-item .has-child {
		margin-bottom: 2.4rem;
	}
}

@media screen and (max-width: 960px) {
	.sec-sitemap {
		padding-top: 14rem;
	}

}

@media screen and (max-width: 750px) {
	.sitemap .page-header::before {
        top: 67.8vw;
		right: 1.25vw;
		width: 13.9vw;
	}
	.sec-sitemap {
		padding: 6rem 20px 8rem;
	}

	.sitemap-nav {
		column-count: unset;
		border-radius: 7.5px;
		padding: 24px 20px 8px;
	}

	.nav-item-ttl {
		height: 54px;
		font-size: 17px;
	}

	.nav-item-ttl.en {
		font-size: 18px;
	}

	.nav-item-ttl::before {
		left: 14px;
		width: 16px;
		height: 16px;
	}

	.nav-item-ttl::after {
		left: 25.5px;
		top: 16px;
		width: 39.5px;
	}

	.nav-item li {
		margin-bottom: 15px;
	}

	.nav-item a {
		font-size: 15px;
	}

	.nav-item .has-child > a {
		font-size: 16px;
	}

	.nav-item li.child::before {
		top: 11px;
		width: 10px;
	}
}