@charset "UTF-8";
/*
 * sitemap.css
 *
 */

/* !サイトマップ
---------------------------------------------------------- */
.sitemap {
	width:100%;
	padding:100px 50px 0px 50px;
}

.sitemap__items {
    margin-top: 50px;
}

.sitemap__item {
    width:100%;
}

.sitemap__link {
	position: relative;
	border-bottom: 1px solid #ddd;
    padding: 1em 0;
    display: flex;
    justify-content: space-between;
	color: var(--base-font-color);
    align-items: center;
    transition: color 0.6s;
}

.sitemap__link:hover {
    color: var(--main-color);
}

.sitemap__child-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC時は3列並び */
    gap: 15px 15px;
    padding: 20px 0 10px 0;
    margin: 0;
}

.sitemap__child-item {
    display: flex;
    align-items: flex-start;
}

.sitemap__child-link {
	position: relative;
    color: var(--base-font-color);
    font-size: 14px;
    line-height: 1.6;
	padding:0.5em 0 0.5em 1em;
	transition: color 0.6s;
}

.sitemap__child-link:hover {
    color: var(--main-color);
}

.sitemap__child-link::before {
	position: absolute;
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--main-color);
    border-radius: 50%;
    top:17px;
	left:0;
}

.sitemap__arrow {
	position: absolute;
	width:30px;
	height: 30px;
	background: var(--accent-color);
	border:1px solid var(--accent-color);
	border-radius: 50%;
	right:10px;
	top:50%;
	margin-top: -15px;
	transform: scale(.3);
	transition: .3s;
	overflow: hidden;
	z-index: 4;
}
	a:hover .sitemap__arrow {
		border:1px solid var(--accent-color);
		background: none;
		transform: scale(1);
	}
	.sitemap__arrow span {
		position: absolute;
		display: block; 
		width: 13px;
		height: 6px;
		background-color: var(--accent-color);
		-webkit-mask-image: url("../img/icon_arrow.svg");
		mask-image: url("../img/icon_arrow.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

@media screen and (max-width:1039px){
.sitemap {
	padding:70px 30px 0px 30px;
}
		
.sitemap__items {
    margin-top: 45px;
}

.sitemap__link:hover {
    color: var(--base-font-color);
}

.sitemap__child-link:hover {
    color: var(--base-font-color);
}

.sitemap__arrow {
	background: #fff;
	transform: none;
}
}

@media screen and (max-width:767px){
.sitemap {
	padding:70px 25px 0px 25px;
}

.sitemap__items {
    margin-top: 35px;
}

.sitemap__child-list {
	grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 0 10px 0;
}

.sitemap__child-link {
	width:100%;
	display: block;
	padding:0.8em 0 0.8em 1em;
}

.sitemap__child-link::before {
    top:21px;
}
}