/*====================================================================================================

  TOPPAGE

====================================================================================================*/

#toppage {
	margin: 0;
	padding: 0;
}

/* COMMON TOP CSS */
#toppage h3 { max-width:1200px; width:100%; margin:auto; }
#toppage h3 small { display:block; font-size:125%; color:#A52B36; }
#toppage h3 b {
	display:block;
	margin-top: 5px;
	font-size: 200%;
	font-weight: 700;
	line-height: 170%;
	width: fit-content;
	border-bottom: 1px solid #000;
}
#toppage h4 { border-left:2px solid #A52B36; padding-left:20px; }
#toppage h4 small { display:block; font-size:125%; line-height: 100%; color:#A52B36; }
#toppage h4 b {
	display:block;
	font-size:187.5%;
	font-weight: 700;
	line-height: 100%;
	margin-top: 15px;
}
#toppage h4.mid { border:none; padding:0; }
#toppage h4.mid small { font-size:112.5%; }
#toppage h4.mid b { font-size: 150%; letter-spacing: -0.01em; }


#toppage .detail_box {
	bottom: 0;
	width: 483px;
	position:absolute;
	padding: 40px 50px;
	background: #F5F5F5;
}
#toppage .detail_box .come { font-size:93.8%; font-weight:700; margin-block:25px 30px; }


/*** MAINIMG *******************************************************************/
#toppage .mainimg { position:relative; }
#toppage .mainimg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 83, 0.4);
}
#toppage .mainimg h2 {
	left: 0;
	right: 0;
	top: 50%;
	z-index: 2;
	width: 100%;
	color: #FFF;
	margin: auto;
	max-width: 1200px;
	position: absolute;
	transform: translateY(-50%);
}
#toppage .mainimg h2 b { display: block; font-size:500%; font-weight: 700; line-height:150%; }
#toppage .mainimg h2 small {
	display:block;
	font-size: 125%;
	line-height:180%;
	margin-top: 35px;
	width: fit-content;
	border-bottom: 1px solid #FFF;
}
#toppage .mainimg ul li img { width:100%; }

#toppage .mainimg .scroll {
	left:0;
	right: 0;
	bottom:0;
	z-index: 3;
	color: #FFF;
	margin: auto;
	height: 110px;
	font-size: 81.3%;
	font-weight: 700;
	line-height: 100%;
	width: fit-content;
	position: absolute;
	padding-right: 40px;
	letter-spacing: 0.25em;
	writing-mode: vertical-rl;
}
#toppage .mainimg .scroll::before,
#toppage .mainimg .scroll::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	background: #FFF;
}
#toppage .mainimg .scroll::before { bottom: 0; width: 1px; height: 110px; }
#toppage .mainimg .scroll::after { width: 10px; height: 10px; bottom: 90px; border-radius: 50%; }

#toppage .mainimg .scroll::after {
	animation:
		circlemove 2.2s ease-in-out infinite,
		cirlemovehide 2.2s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
	0% { bottom:100px; }
	100% { bottom:0; }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
	0% { opacity:0 }
	50% { opacity:1; }
	80% { opacity:0.9; }
	100% { opacity:0; }
}

#toppage .mainimg :is(img,video) { height:100svh; object-fit:cover;}
#toppage .mainimg video { width:100%; filter:drop-shadow(0 0 #000);}

/*** ABOUT *******************************************************************/
#toppage .about { padding-block:75px;}
#toppage .about h2 {
	text-align:center;
	font-size:32px;
	font-weight:bold;
	line-height:1.4;
	margin-block:2em 4em;
}
#toppage .about .photo {
	width:750px;
	margin-inline:auto;
}
/* #toppage .about .case {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1rem 2rem;
	max-width:1000px;
	margin-inline:auto;
}
#toppage .about .case li { display:grid; grid-template-rows:subgrid; grid-row:span 3;}
#toppage .about .case .title { font-size:1.25em; font-weight:bold;} */



/*** page_list *******************************************************************/
#toppage .page_list { padding-block:75px;}
#toppage .page_list ul { max-width:1000px; margin-inline:auto;}
#toppage .page_list ul li { display:flex; justify-content:space-between; gap:5%;}
#toppage .page_list ul li + li { margin-top:50px;}
#toppage .page_list ul img { aspect-ratio:4/3; object-fit:cover;}
#toppage .page_list .title { font-size:1.25em; font-weight:bold; margin-bottom:0.5em;}
#toppage .page_list .come { text-align:justify;}
#toppage .page_list .photo { width:350px; aspect-ratio:4/3; flex-shrink:0; object-fit:cover;}


/*** RECRUIT *******************************************************************/
#toppage .contact .c_link {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:1em;
	font-size:32px;
	font-weight:bold;
	color:#222;
	height:300px;
	background:url(../../image/top/top_contact.jpg) no-repeat center left / 100% auto;
	object-fit:cover;
}
#toppage .contact .c_link a {
	display:block;
	display:grid;
	place-items:center;
	width:300px;
	aspect-ratio:300/50;
	border-radius:300px;
	color:#fff;
	font-size:16px;
	text-decoration:none;
	background:#00bbcc;
}
#toppage .contact .c_link a:hover { opacity:0.75;}

#toppage .contact .c_tel {
	display:flex;
	gap:1.25em;
	align-items:end;
	justify-content:center;
	padding-block:1em;
	font-weight:bold;
}
#toppage .contact .c_tel small { line-height:1;}
#toppage .contact .c_tel a { font-size:2em; color:inherit;}