@charset "utf-8";

/* -------------------------------------------------------- common */
.wrapper{ position: relative; }
.sp{ display: none; }

#bread{ z-index: 4; position: absolute; left: 2%; top: 10px; display: flex; align-items: center; }
#bread li{ position: relative; padding: 0 15px; }
#bread li:before{ position: absolute; content: ""; right: 0; top: 0; background: #000; width: 1px; height: 100%; transform: rotate(40deg); }
#bread li:last-of-type:before{ display: none; }
#bread li a,
#bread li strong{ font-size: 12px; color: #000; font-weight: normal; }


/* -------------------------------------------------------- fv */
#fv{ position: relative; overflow: hidden; }
#fv:before{ z-index: -1; position: absolute; content: ""; left: 0; top: 0; right: 0; width: 100%; height: 60%; background: var(--bg-color); }

.fv-inner{ display: flex; align-items: center; justify-content: space-between; padding: 0 5%; }
.pages-ttl{ font-size: clamp(20px,3vw,43px); font-weight: 600; }
.text-item{ z-index: -1; max-width: initial; position: absolute; left: 50%; transform: translate(-50%,0); bottom: 0; }





/* -------------------------------------------------------- bread */



/* ------------------------------------- mobile --------------------------------------- */
@media only screen and (max-width: 960px) {
	
/* -------------------------------------------------------- common */
	.pc{ display: none; }
	.sp{ display: block; }
	
	#bread li a, #bread li strong { font-size: 10px; }
	#bread li { padding: 0 10px; }
	#bread li::before { top: 4px; height: 73%; }


/* -------------------------------------------------------- fv */
	#fv { padding: 50px 0; position: relative; }
	#fv::before{ height: 83%; }
	.fv-inner{ display: block; }
	
	.pages-ttl{ padding: 0 0 10px; font-size: 34px; }
	.text-item{ width: 150%; left: -5%; transform: none; }







}