@charset "utf-8";

/* -----------------------------------------------------------
    sitemap
----------------------------------------------------------- */
.sitemap-area {
    padding: 80px 0;
}

.sitemap-area .sitemap-block {
    --block-padding: clamp(80px, 6vw, 100px) clamp(50px, 5vw, 100px) clamp(50px, 5vw, 100px);
    width: 100%;
    padding: var(--block-padding);
    
    position: relative;
    margin-top: 100px;
}

.sitemap-area #cast.sitemap-block {
	border: 1px solid #D6796F;
}

.sitemap-area #staff.sitemap-block {
	border: 1px solid #56BCA9;
}

.sitemap-area .sitemap-block-title {
    position: absolute;
    top: -30px;
}

.sitemap-area .sitemap-block-title .en {
    font-family: var(--en);
    font-size: 7.0rem;
    background-color: #fff;
    padding: 0 20px;
    line-height: 1;
    margin-left: -30px;
}

.sitemap-area #cast .sitemap-block-title .en {
	color: #D6796F;
}

.sitemap-area #staff .sitemap-block-title .en {
	color: #56BCA9;
}


.sitemap-area .sitemap-list-wrap+.sitemap-list-wrap {
    margin-top: 40px;
}

.sitemap-area .sitemap-list-title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 2.4rem;
    font-family: var(--serif);

}

.sitemap-area .sitemap-list-title::after {
    content: "";
    height: 1px;
    background-color: #ccc;
    flex-grow: 1;
    display: block;
}


.sitemap-area .sitemap-list-title+.sitemap-list {
    margin-top: 30px;
}

.sitemap-area .sitemap-list {
    --gap: clamp(30px, 3vw, 40px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.sitemap-area .sitemap-list-item {
    width: calc((100% - var(--gap)*3) / 4);
}

.sitemap-area .sitemap-list-link {
    display: block;
    font-family: var(--serif);
    color: #333;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.sitemap-area .sitemap-list-link.sitemap-long {
	font-size: clamp(1.4rem, 1vw, 1.6rem);
}

.sitemap-area .sitemap-list-link:not(.external)::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    background: url(../img/arrow-black.svg) no-repeat center/contain;
    aspect-ratio: 30/6;
    width: 23px;
    height: auto;

}

.sitemap-area .sitemap-list-link.external::after {
    content: "\f08e";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    font-family: var(--webicon);
    font-weight: bold;
}

@media screen and (min-width: 769px) {
	.sitemap-area .sitemap-list-link:hover {
		border-bottom: 1px solid var(--gold);
		color: var(--gold);
	}
	
	.sitemap-area .sitemap-list-link:not(.external):hover::after {
		background: url("../img/arrow-gold.svg") no-repeat center/contain;
		transform: translateX(5px) translateY(-50%);
	}
	
    .sitemap-area #cast .sitemap-list-link:hover {
		border-bottom: 1px solid #D6796F;
		color: #D6796F;
	}
	
	.sitemap-area #cast .sitemap-list-link:not(.external):hover::after {
		background: url("../img/arrow-pink.svg") no-repeat center/contain;
	}
	
	.sitemap-area #staff .sitemap-list-link:hover {
		border-bottom: 1px solid #56BCA9;
		color: #56BCA9;
	}
	
	.sitemap-area #staff .sitemap-list-link:not(.external):hover::after {
		background: url("../img/arrow-green.svg") no-repeat center/contain;
	}
}

@media screen and (max-width: 768px) {
	.sitemap-area {
		padding: 40px 0;
	}
	
	.sitemap-area .sitemap-block {
		--block-padding: clamp(50px, 8vw, 60px) clamp(30px, 6vw, 40px);
		margin-top: clamp(70px, 15vw, 90px);
	}
	
	.sitemap-area .sitemap-block-title {
	    top: -25px;
	}
	
	.sitemap-area .sitemap-block-title .en {
		font-size: 4.5rem;
		margin-left: -20px;
	}
	.sitemap-area .sitemap-block-title .jp {
		font-size: 1.3rem;
	}
	
	.sitemap-area .sitemap-list-wrap+.sitemap-list-wrap {
	    margin-top: 40px;
	}
	
	.sitemap-area .sitemap-list {
		flex-direction: column;
    	align-items: center;
    	gap: 20px;
    	font-size: 1.6rem;
	}
	
	.sitemap-area .sitemap-list-item {
		width: 100%;
	}
	
	.sitemap-area .sitemap-list-link.sitemap-long {
		font-size: clamp(1.5rem, 4vw, 1.6rem);
	}
}