/*
 * 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 */

@media (max-width: 767px) {
	main {
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		padding: 5em 0;
	}
	main .inner {
		margin: 0 1em;
	}
}

@media (min-width: 768px) {
	main {
		font-size: clamp(0.813rem, 0.192rem + 1.29vw, 1rem);
		padding: 5em 0 8em;
	}
	main .inner {
		max-width: 1000px;
		margin: 0 auto;
	}
}

/* sidemenu */
@media (min-width: 768px) {

	#sidemenu {
		top: 15vh;
	}

}

/* ---------------------------------------- visual */

#visual {
	position: relative;
}
#visual-title {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 1.2;
}
#visual-title span {
	color: #e0133a;
	font-family: "Oswald", sans-serif;
	font-weight: 400;
}
#visual-title small {
	display: block;
	color: #fff;
	margin: 5px 0 0;
}
#visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {

	#visual {
		width: 100%;
		height: 16em; /* @16@x */
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
	}
	#visual-title span {
		font-size: clamp(1.563rem, 0.444rem + 5.59vw, 3.125rem);
	}
	#visual-title small {
		font-size: clamp(0.813rem, 0.589rem + 1.12vw, 1.125rem)
	}

}

@media (min-width: 768px) {

	#visual {
		width: 100%;
		height: 21.875em; /* @16@x */
		font-size: clamp(0.813rem, 0.192rem + 1.29vw, 1rem);
	}
	#visual-title span {
		font-size: clamp(2.813rem, -6.498rem + 19.4vw, 5.625rem);
	}
	#visual-title small {
		font-size: clamp(1rem, -1.069rem + 4.31vw, 1.625rem);
	}

}

@media (max-width: 480px) {
	#visual-title { left: 1em; }
}

@media (min-width: 481px) and (max-width:767px) {
	#visual-title { left: 1.25em; }
}

@media (min-width: 768px) and (max-width:999px) {
	#visual-title { left: 1.5em; }
}

@media (min-width: 1000px) and (max-width:1499px) {
	#visual-title { left: 5%; }
}
@media (min-width: 1500px) {
	#visual-title { left: 10%; }
}

/* ---------------------------------------- breadcrumbWrap */

@media (max-width: 767px) {
	#breadcrumbWrap { display: none !important; }
}

@media (min-width: 768px) {
	#breadcrumbWrap {
		font-size: clamp(0.75rem, 0.336rem + 0.86vw, 0.875rem);
		padding: 4em 1.5em 0;
	}
	#breadcrumbWrap .inner {
		max-width: 1000px;
		margin: 0 auto;
	}
}