@charset "UTF-8";

/*-----------------------------------

	mainvisual_block

-----------------------------------*/
#mainvisual_block{
	background: url(../img/sitemap/main-img.jpg) no-repeat top center / cover;
}

.outline-text {
	max-width: 830px;
	aspect-ratio: 919.59 / 152.7;
	background-image: url(../img/sitemap/outline-txt.svg);
}


/*-----------------------------------

	sitemap_block

-----------------------------------*/
#sitemap_block{
	margin-top: 120px;
}
#sitemap_block .sitemap_list{
	gap: 10px;
	justify-content: flex-start;
}
#sitemap_block .sitemap_list li{
	width: calc((100% - 30px) / 4);
}
#sitemap_block .sitemap_list li a{
	font-size: 18px;
	padding: 10px 0;
	display: inline-block;
}
#sitemap_block .sitemap_list li a .btn_box{
	gap: 10px;
	justify-content: flex-start;
	align-items: center;
}
#sitemap_block .sitemap_list li a .next-button {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #D71318;
	position: relative;
	overflow: hidden;
	z-index: 1;
	flex-shrink: 0;
}
#sitemap_block .sitemap_list li a .next-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #fff;
	transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	z-index: -1;
}
#sitemap_block .sitemap_list li a .next-button::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 7px;
	left: 6.5px;
	transition: border-color 0.3s;
}
#sitemap_block .sitemap_list li a:hover .btn_box span {
	color: #D71318;
	transition: 0.3s;
}
#sitemap_block .sitemap_list li a:hover .next-button::before {
	width: 100%;
}
#sitemap_block .sitemap_list li a:hover .next-button::after {
	border-top-color: #D71318;
	border-right-color: #D71318;
	transform: rotate(45deg) translate(2px, -2px);
}

@media screen and (max-width: 1100px){
	#sitemap_block .sitemap_list li{
		width: calc((100% - 20px) / 3);
	}
}
@media screen and (max-width: 880px){
	#sitemap_block .sitemap_list li{
		width: calc((100% - 10px) / 2);
	}
	#sitemap_block .sitemap_list li a{
		font-size: 16px;
	}
}
@media screen and (max-width: 640px){
	#sitemap_block{
		margin-top: 50px;
	}
	#sitemap_block .sitemap_list li{
		width: 100%;
	}
}