/*
 * 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) {
}


/* ---------------------------------------- common */

main { padding: 6em 0 0; }
section { margin: 0 0 5em; }

/* ---------------------------------------- reports */

#reports { padding: 0 1em 3em; }
section h3 {
	background: var( --skin-color );
	border-left: 5px var( --orange-color ) solid;
	border-radius: 4px;
	line-height: 1.4;
	padding: .5em 1em;
	margin: 0 0 1.5em;
}

section ul { margin: 0 0 1.5em; }
section ul li h4 {
	display: inline-block;
	color: #fff;
	background: var( --orange-color );
	padding: .25em 1.25em;
	border-radius: 100px;
	margin: 0 0 1em;
}
section ul li a { 
	display:block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	vertical-align: text-top;
}
section ul li a:hover { opacity: .5; }
section .sitelink a {
	display: inline-block;
	color: var( --orange-color );
	border: 1px var( --orange-color ) solid;
	padding: .25em 1.25em;
	border-radius: 100px;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
section .sitelink a:hover {
	color: #fff;
	background: var( --orange-color );
}

@media (max-width: 767px) {

	section h3 { font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem); }

}

@media (min-width: 768px) {

	section h3 { font-size: clamp(1.125rem, 0.573rem + 1.15vw, 1.5rem); }

}

@media (max-width: 480px) {

	section ul li { 
		width: 90%;
		margin: 0 auto 1.5em;
	}
	section .sitelink { text-align: center; }
}

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

	section ul {
		display: flex;
		gap: 10%;
	}
	section ul li { width: 38%; }

}

@media (min-width: 768px) {

	section ul {
		display: flex;
		gap: 10%;
	}
	section ul li { width: 38%; }

}