@charset "UTF-8";

#key-visual{
	background-image: url(../images/sitemap-key-visual.jpg);
}

#sec01:before{
	content: "";
	display: block;
	border-left: 21.8vw solid #ffd700;
	border-bottom: 21.8vw solid transparent;
	position: absolute;
	left: 0;
	top: 0;
}
#sec01:after{
	content: "";
	display: block;
	border-bottom: min(29.3vw, 42rem) solid #00a1e9;
	border-left: min(29.3vw, 42rem) solid transparent;
	position: absolute;
	right: 0;
	bottom: 0;
}
#sec01 .inner{
	z-index: 9;
}
#sec01 li a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 8rem;
	padding: 2.4rem 1.5rem;
	background: #fff;
	margin-bottom: 2rem;
	transition: .3s all ease;
	line-height: 1.5;
}
#sec01 li a:after{
	content: "";
	display: block;
	border-left: 1.2rem solid #274a9d;
	border-top: .6rem solid transparent;
	border-bottom: .6rem solid transparent;
	margin-left: .5em;
}
#sec01 li{
	width: calc(33.333% - 1rem);
}
#sec01 li:not(:nth-of-type(3n)){
	margin-right: 1.5rem;
}





@media screen and (max-width: 599px){
	#sec01:before{
		border-left: 19vw solid #ffd700;
		border-bottom: 19vw solid transparent;
	}
	#sec01:after {
        	border-bottom: 28.7rem solid #00a1e9;
        	border-left: 28.7rem solid transparent;
	}


	#sec01 li a{
		height: 12rem;
		padding: 4rem;
		margin-bottom: 2rem;
	}
	#sec01 li a:after{
		border-left: 2.4rem solid #274a9d;
		border-top: 1.2rem solid transparent;
		border-bottom: 1.2rem solid transparent;
	}
	#sec01 li{
		width: 100%;
		margin-bottom: 0;
	}
	#sec01 li:not(:nth-of-type(3n)){
		margin-right: 0;
	}
}