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

  TOPPAGE

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

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

#toppage .photo-outlined {
	width:257px;
	height:257px;
	z-index: -1;
	border-radius:50%;
	position: absolute;
}
#toppage .photo-outlined::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 478px;
	height: 478px;
	border-radius: 50%;
	border: 60px solid #CCE9F2;
	transform: translate(-50%, -50%);
}
#toppage .photo-outlined img { width:100%; border-radius:50%; }

#toppage .box { display:flex; }
#toppage .box img { width:100%; }
#toppage .box .photo { flex: 1; z-index:1; }
#toppage .box .txt { flex:1; }
#toppage .box .txt h3 { width:fit-content; position:relative; z-index:3; }
#toppage .box .txt p { position:absolute; z-index:2;  }
#toppage .box .txt .come { color:#FFF; font-weight:600; }


/*** MAINIMG *******************************************************************/
#toppage .mainimg {
	width: 100%;
	height: 600px;
	position: relative;
	background: #005787;
	margin-block: 170px 230px;
}
#toppage .mainimg ul.top_slider {
	left: 0;
	width: 68.1%;
	top: -150px;
	background: #FFF;
	position: absolute;
	border-radius:0 100px 100px 0;
}
#toppage .mainimg ul.top_slider li img {
	width:100%;
	height: 980px;
	object-fit: cover;
	border-radius:0 100px 100px 0;
}
#toppage .mainimg .main_tit {
	position: absolute;
	top: 50%;
	right: 5.4%;
	z-index: 2;
	transform: translateY(-50%);
}
#toppage .mainimg .main_tit p {
	color: #FFF031;
	margin-top: 20px;
	font-size: 156.3%;
	font-weight: 700;
	font-family: "Noto Sans", sans-serif;
}
/* SCROLL ARROW */
#toppage .mainimg .scroll {
	z-index: 3;
	left: 50px;
	bottom:-182px;
	color: #FFF;
	font-size: 93.8%;
	font-weight: 700;
	position: absolute;
	letter-spacing: 0.2em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: "Noto Sans", sans-serif;
}
#toppage .mainimg .scroll::after {
	content: "";
	right: 15px;
	bottom: 0;
	position: absolute;
	width: 16px;
	height: 211px;
	transform: rotate(180deg);
	background: url(../image/scroll_arrow.svg) no-repeat;
	background-size: contain;
}

/* NEWS */
#toppage .mainimg .news {
	z-index: 2;
	left: 18.8%;
	bottom: -230px;
	min-height: 75px;
	display: flex;
	font-weight: 300;
	background: #FFF;
	max-width: 41.9%;
	position: absolute;
	padding:23px 25px 10px;
	border-radius: 10px 10px 0 0;
}
#toppage .mainimg .news h4 {
	order: 1;
	color: #3689BB;
	flex-shrink: 0;
	font-size: 150%;
	font-weight: 700;
	margin-right: 1.8vw;
	font-family: "Baloo Da 2", sans-serif;
}
#toppage .mainimg .news ul { order: 2; display:flex; flex-wrap: wrap; margin-right:1.3vw; font-weight:300; }
#toppage .mainimg .news ul li.date { color:#333; margin-right:1vw; flex-shrink:0; }
#toppage .mainimg .news ul li a {
	color:#333;
	display: block;
	line-height: 150%;
	text-underline-offset:2px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
#toppage .mainimg .news .b_list { order: 3; margin-left:auto; flex-shrink:0; }
#toppage .mainimg .news .b_list a {
	color: #333;
	display: block;
	padding-right: 45px;
	text-decoration: none;
	transition: 0.2s ease;
	background: url(../image/arrow_right1.svg) no-repeat 95% 30%;
}
#toppage .mainimg .news .b_list a:hover { background-position:100% 30%; }


/*** OVERVIEW *******************************************************************/
#toppage .overview { position:relative; max-width:620px; margin:auto; padding:80px 0 190px; }
#toppage .overview .photo-outlined.p1 { right:calc((100% - 1200px) / 2); top:-40px; }
#toppage .overview .photo-outlined.p2 { left:calc((100% - 1200px) / 2); bottom:40px; }
#toppage .overview .come { font-size:112.5%; font-weight: 600; line-height:200%; }
#toppage .overview .come+.come { margin-top:35px; }




/*** COMMON CSS *******************************************************************/
#toppage .about_wrap { background:#005787; position:relative; }

/* ABOUT */
#toppage .about { padding-block:125px 165px; }
#toppage .about .photo {
	position: absolute;
	max-width:1067px;
	height: 600px;
	top:-78px;
	right:calc(((100% - 1920px) / 2));
}
#toppage .about .photo::after {
	content: "";
	position: absolute;
	left: -66px;
	bottom: -130px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	border: 12px solid #005787;
	background: url(../../image/top/about_02.jpg) no-repeat;
	background-size: contain;
}
#toppage .about .photo img {
	height: 100%;
	object-fit: cover;
	object-position: left;
	border-radius:100px 0 0 100px;
}
#toppage .about .txt h3 { margin-left:15px; }
#toppage .about .txt p { width: 40.2%; top:100px; left:0; }
#toppage .about .txt .come { max-width:35.6%; margin-block:52px 74px; }
@media only screen and (min-width:1920px){
	#toppage .about .photo { right:0; }
}


/* MESSAGE */
#toppage .message { padding-block:110px 195px; column-gap:5%; }
#toppage .message .photo { position: relative; max-width:990px; height:464px; margin-top:20px; }
#toppage .message .photo::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -120px;
	width: 209px;
	height: 209px;
	border-radius: 50%;
	border: 12px solid #005787;
	background: url(../../image/top/message_02.jpg) no-repeat;
	background-size: contain;
}
#toppage .message .photo img {
	height: 100%;
	object-fit: cover;
	object-position: right;
	border-radius:0 100px 100px 0;
}
#toppage .message .txt { margin-right:30px; }
#toppage .message .txt p { width: 36.4%; right:0; top:48%; }
#toppage .message .txt .come { max-width:656px; margin-block:65px 80px; }


/*** CASE STUDY *******************************************************************/
#toppage .case_wrap { position:relative; }
#toppage .case { padding:100px 0; max-width: 1780px; align-items: flex-start; justify-content:space-between; }
#toppage .case .txt { flex:unset; flex-shrink:1; }
#toppage .case .txt h3 { margin-top:80px; width:auto; position:absolute; }
#toppage .case .txt p { position:absolute; left:0; top:100px; width:25.4%; }
#toppage .case .txt .come {
	color:#333;
	margin:205px 90px 140px 0;
	transition: margin-left 0.5s;
}
#toppage .case .txt .b_more { white-space:nowrap; }
#toppage .case .txt .photo-outlined { bottom:48px; left:calc(((100% - 1920px) / 2) + 460px); }
#toppage .case .txt .photo-outlined img { width:100%; }
#toppage .case ul {
	flex-shrink:0;
	z-index: 1;
	display:flex;
	row-gap: 40px;
	flex-wrap:wrap;
	column-gap: 40px;
	width: 840px;
	position: relative;
}
#toppage .case ul::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -4.2vw;
	width: 100vw;
	height: 464px;
	margin: auto 0;
	background: #CCE9F2;
	transform: translateY(-50%);
	border-radius: 100px 0 0 100px;
}
#toppage .case ul li { position:relative; width:400px; height:auto; }
#toppage .case ul li img { width:100%; object-fit: cover; border-radius:30px }
#toppage .case ul li span {
	position: absolute;
	left: 20px;
	bottom: 20px;
	color: #FFF;
	font-size: 93.8%;
	font-weight: 500;
	line-height: 120%;
	font-family: "M Plus Rounded 1C", sans-serif;
}
@media only screen and (max-width:1400px){
	#toppage .case .txt .photo-outlined { left:180px; }
}
@media only screen and (max-width:1780px){
	#toppage .case .txt { margin-left:70px; }
}


/*** RECRUIT *******************************************************************/
#toppage .recruit {
/*	column-gap: 5.7%;*/
	position: relative;
	background: #3689BB;
}
#toppage .recruit .photo { max-width:1200px; height:563px; margin-block: 180px; position:relative; }
#toppage .recruit .photo img.main {
	height: 100%;
	object-fit: cover;
	object-position: right;
	border-radius:0 100px 100px 0;
}
#toppage .recruit .photo img.person { position: absolute; right: 20px; bottom: -180px; width: 308px; }
#toppage .recruit .photo img.balloon { position:absolute; right:-44px; bottom: -57px; width: 142px; }
#toppage .recruit .photo .animate { transform: translateY(80px); transition: 0.6s all; }
#toppage .recruit .photo .animate.active { opacity: 1; transform: translateY(0); }
#toppage .recruit .txt {
	max-width: 37.5%;
	margin-left: -92px;
	padding:180px 0 180px 13.6vw;
	background: url(../../image/top/recruit_txt-bg.png) no-repeat left center;
}
#toppage .recruit .txt h3 { position: absolute; width:auto; right:70px; }
#toppage .recruit .txt p { width: 32.6%; left:0; bottom:calc(100% - 181px); }
#toppage .recruit .txt .come { max-width: 427px; margin:265px 30px 80px 0; }


/*** CERTIFIED *******************************************************************/
#toppage .certified {
	display: flex;
	column-gap: 4.2%;
	background: #FFF;
	padding: 53px 60px;
	border-radius: 50px;
	margin-block: 150px 50px;
	justify-content: space-between;
}
#toppage .certified .photo { width:181px; flex-shrink:0; }
#toppage .certified .photo img { width:100%; }
#toppage .certified .txt {}
#toppage .certified .txt .mid {
	font-size: 187.5%;
	font-weight: 500;
	line-height: 130%;
	font-family: "M Plus Rounded 1C", sans-serif;
}
#toppage .certified .txt .mid span {
  background-image: linear-gradient(#FFF040, #FFF040);
  background-repeat: no-repeat;
  background-size: 100% 15px;
  background-position: center 25px;
}
#toppage .certified .txt .come {
	margin-top: 25px;
	font-size: 112.5%;
	font-weight: 300;
	line-height: 200%;
}