/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/* ---------------------------------------- links */

#links ul li a {
	display: inline-block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#links ul li a p {
	padding: 1em 2em 1em 0;
	position: relative;
}
#links ul li a p::after	{
	content: "";
	display: block;
	width: 1.5em;
	height: 3em;
	background: url( ../images/commons/arrow-right-long.svg ) no-repeat center center;
	background-size: contain;
	border-bottom: 1px #000 solid;
	position: absolute;
	top: 0;
	right: 0;
}
#links ul li a:hover { opacity: .5; }


@media (max-width: 767px) {

	#links ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#links ul li { 
		margin: 0 0 4em;
	}
}

@media (min-width: 768px) {

	#links { padding: 0 1.5em; }
	#links ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#links ul li { 
		width: 47.4%;
		margin: 0 0 4em;
	}
}