@charset "utf-8";
/*-------------------------------------------------

	Main Visual

--------------------------------------------------*/
#mv {position: relative;overflow: hidden;}
#mv .human {position: absolute;bottom: 12%;left: -3%;width: 102vw;}
@media only screen and ( max-width : 767px ) {
	#mv {margin-bottom: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);}
	#mv .human {bottom: 0;width: 115vw;}
}
/*-------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {padding-top: 0;}
#message .inner {max-width: 1532px;}
#message .container {
	position: relative;
	margin-bottom: clamp(30px, calc(30px + 120 * ((100vw - 375px) / 1545)), 150px);
	padding-top: clamp(30px, calc(30px + 100 * ((100vw - 375px) / 1545)), 130px);
	background: #fff;
}
#message .container h2 {width: 90%;max-width: 1110px;margin: 0 auto clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);}
#message .container h2 span {
	display: flex;
	width: clamp(70px, calc(70px + 100 * ((100vw - 375px) / 1545)), 170px);
	margin: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px) auto 0;
}
#message .container ul {position: relative;width: 90%;margin: 0 auto;}
#message .container ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 98%;
	background: #019CDE;
}
#message .container ul::after {
	content: '';
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(60px, calc(60px + 60 * ((100vw - 375px) / 1545)), 120px);
	height: clamp(60px, calc(60px + 60 * ((100vw - 375px) / 1545)), 120px);
	background: #fff;
}
#message .container ul li {width: 50%;padding: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px);}
#message .container ul li:nth-child(odd) {padding-left: 0;}
#message .container ul li:nth-child(even) {padding-right: 0;}
#message .container ul li:nth-child(1),
#message .container ul li:nth-child(2) {border-bottom: 1px solid #019CDE;}
#message .container ul li h3 {
	margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	font-weight: bold;
	font-size: clamp(24px, calc(24px + 12 * ((100vw - 375px) / 1545)), 36px);
	letter-spacing: .1em;
}
#message .container ul li h3 span {
	display: block;
	margin-bottom: 5px;
	color: #019CDE;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
}
#message .container ul li p {font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);}
#message .link_wrap {background: url(../img/front/message/bg.webp) repeat-x -2% 50% / 50%;text-align: center;}
#message .link_wrap a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: clamp(20px, calc(20px + 100 * ((100vw - 375px) / 1545)), 120px);
	padding-top: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	padding-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, .7);
	font-weight: bold;
	font-size: clamp(20px, calc(20px + 26 * ((100vw - 375px) / 1545)), 46px);
	letter-spacing: .1em;
}
#message .link_wrap a::before,
#message .link_wrap a::after {content: '';position: absolute;width: 8%;height: 90%;transition: .3s;}
#message .link_wrap a::before {top: 0;left: 0;border-left: .3em solid #019CDE;border-top: .3em solid #019CDE;}
#message .link_wrap a:hover::before {top: -12%;left: -2%;}
#message .link_wrap a::after {bottom: 0;right: 0;border-right: .3em solid #019CDE;border-bottom: .3em solid #019CDE;}
#message .link_wrap a:hover::after {bottom: -12%;right: -2%;}
#message .link_wrap a span.arrow {margin-left: clamp(10px, calc(10px + 40 * ((100vw - 375px) / 1545)), 50px);}
#message .link_wrap a:hover span.arrow {background-color: #019CDE;background-image: url(../img/common/Icon_arrowR-wht.svg);}
#message .link_wrap a span.color {color: #019CDE;}
@media only screen and ( max-width : 767px ) {
	#message .container ul::before,
	#message .container ul::after {display: none;}
	#message .container ul li {width: 100%;border-bottom: 1px solid #019CDE;}
	#message .container ul li:nth-child(odd),
	#message .container ul li:nth-child(even) {padding: 30px 0;}
	#message .container ul li:first-child {padding-top: 0 !important;}
	#message .container ul li:last-child {border-bottom: 0;}
}
@media only screen and ( max-width : 500px ) {
	#message .container ul {width: 100%;}
	#message .container ul li:nth-child(odd),
	#message .container ul li:nth-child(even) {padding: 20px;}
}
/*-------------------------------------------------

	BUSINESS │ 事業内容

--------------------------------------------------*/
#business {
	padding-top: clamp(85px, calc(85px + 365 * ((100vw - 375px) / 1545)), 450px);
	background: url(../img/front/business/mv.webp) no-repeat top center / 100%;
}
#business .inner {max-width: 1702px;}
#business .title_common h2 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-size: clamp(40px, calc(40px + 66 * ((100vw - 375px) / 1545)), 106px);
}
#business .title_common h2 span.color {color: #019CDE;}
#business .title_common p.txt {font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);}
#business .block {
	position: relative;
	width: 90%;
	margin: 0 auto clamp(70px, calc(70px + 160 * ((100vw - 375px) / 1545)), 230px);
	padding: 5vw;
	box-shadow: 1px 6px 14px rgba(0, 0, 0, 16%);
	border-radius: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	background: #fff url(../img/front/business/job/bg_TJK01.webp) no-repeat bottom center / 100%;
	text-align: right;
}
#business .block::before {
	content: '';
	position: absolute;
    left: -23.5vw;
    bottom: -7.6vw;
	z-index: -1;
	width: 125%;
	height: 100%;
	background: url(../img/front/business/job/bg_TJK02.webp) no-repeat center bottom / 100%;
}
#business .block .container {margin-bottom: 30px;background: url(../img/front/business/job/bg_dot.svg) no-repeat 0 68% / 105%;}
#business .block .container ul li {position: relative;width: 24%;padding-top: 7vw;}
#business .block .container ul li:last-child {width: 38%;margin: 5% auto 0;padding-top: 6vw;}
#business .block .container ul li h3 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 9em;
	padding: 1.3vw 0;
	background: #019CDE;
	color: #fff;
	font-weight: bold;
	font-size: 1.3vw;
	letter-spacing: .1em;
	text-align: center;
	transition: .3s;
}
#business .block .container ul li:hover h3 {top: -3%;}
#business .block .container ul li h3::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	border-top: .6em solid #019CDE;
	border-left: 1.1em solid transparent;
}
#business .block .container ul li figure {position: relative;margin-bottom: 1vw;text-align: center;}
#business .block .container ul li:nth-child(1) figure img {width: 75%;}
#business .block .container ul li:nth-child(2) figure img {width: 62%;}
#business .block .container ul li:nth-child(3) figure img {width: 100%;}
#business .block .container ul li:nth-child(4) figure img {width: 80%;}
#business .block .container ul li figure figcaption {
	display: inline-block;
	position: relative;
	margin: 2vw auto 0;
	padding: .5vw 2vw;
	border-radius: 4em;
	background: #1C2D5B;
	color: #fff;
	font-weight: 500;
	font-size: .9vw;
	line-height: 1.5;
	letter-spacing: .05em;
	text-align: center;
}
#business .block .container ul li figure figcaption::before {
	content: '';
	position: absolute;
	bottom: 98%;
	left: 50%;
	transform: translateX(-50%);
	width: 1vw;
	height: calc(tan(60deg) * 1vw / 2);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background: #1C2D5B;
}
#business .block .container ul li .search {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.5vw;
	height: 3.5vw;
	margin: 0 auto;
	border-radius: 50%;
	background: #019CDE;
	transition: .3s;
}
#business .block .container ul li:hover .search {background: #39BBF3;}
#business .block .container ul li .search img {width: 50%;padding-left: .1vw;}
@media only screen and ( max-width : 1024px ) {
	#business .title_common {margin-bottom: 0;}
	#business .block .container {background: none;}
	#business .block .container ul li {width: 50%;margin-top: 7vw;padding-top: 11vw;}
	#business .block .container ul li:last-child {width: 50%;margin-top: 7vw;}
	#business .block .container ul li h3 {font-size: 2.3vw;}
	#business .block .container ul li:nth-child(3) figure img {width: 77%;}
	#business .block .container ul li:nth-child(4) figure img {width: 92%;}
	#business .block .container ul li figure figcaption {padding: .5vw 3vw;font-size: 1.9vw;}
	#business .block .container ul li .search {width: 7vw;height: 7vw;}
}
@media only screen and ( max-width : 767px ) {
	#business .block {
		padding-top: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
		padding-bottom: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	}
	#business .block .container ul li figure figcaption {padding: 1.3vw 6vw;font-size: 2.5vw;}
	#business .block .container ul li figure figcaption::before {width: 3vw;height: calc(tan(60deg) * 2vw / 2);}
}
@media only screen and ( max-width : 767px ) {
	#business .block .container ul li {padding-top: 14vw;}
	#business .block .container ul li:last-child {padding-top: 9vw;}
	#business .block .container ul li h3 {padding: 1.8vw 0;font-size: 3.3vw;}
	#business .block .container ul li figure figcaption {padding: 1.8vw 5vw;font-size: 3vw;}
}
/*-------------------------------------------------

	What is “Kenpo”? │ けんぽってなに？

--------------------------------------------------*/
#kenpo .link_wrap {
	position: relative;
	width: 90%;
	max-width: 1053px;
	margin: 0 auto;
	padding-top: clamp(20px, calc(20px + 50 * ((100vw - 375px) / 1545)), 70px);
	padding-bottom: clamp(20px, calc(20px + 50 * ((100vw - 375px) / 1545)), 70px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
    background: #F0F9FD url(../img/front/kenpo/bg.webp) no-repeat center / cover;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	letter-spacing: .1em;
	text-align: center;
}
#kenpo .link_wrap::before,
#kenpo .link_wrap::after {content: '';position: absolute;width: 8%;height: 90%;transition: .3s;}
#kenpo .link_wrap::before {top: -.3em;left: -.3em;border-left: .3em solid #019CDE;border-top: .3em solid #019CDE;}
#kenpo .link_wrap:hover::before {top: -12%;left: -2%;}
#kenpo .link_wrap::after {bottom: -.3em;right: -.3em;border-right: .3em solid #019CDE;border-bottom: .3em solid #019CDE;}
#kenpo .link_wrap:hover::after {bottom: -12%;right: -2%;}
#kenpo .link_wrap h4 {
	margin-bottom: clamp(10px, calc(10px + 20 * ((100vw - 375px) / 1545)), 30px);
	font-weight: bold;
	font-size: clamp(26px, calc(26px + 20 * ((100vw - 375px) / 1545)), 46px);
	letter-spacing: .1em;
	text-align: center;
}
#kenpo .link_wrap h4 span {color: #019CDE;}
#kenpo .link_wrap p {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 5px 20px;
	border: 1px solid #019CDE;
	border-radius: clamp(10px, calc(10px + 20 * ((100vw - 375px) / 1545)), 30px);
	background: #019CDE;
	color: #fff;
	font-size: clamp(14px, calc(14px + 1 * ((100vw - 375px) / 1545)), 15px);
	text-align: center;
	transition: .3s;
}
#kenpo .link_wrap:hover p {background: #fff;color: #019CDE;}
#kenpo .link_wrap p .arrow {
	width: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	height: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
/*-------------------------------------------------

	WORK ENVIRONMENT │ 働く環境

--------------------------------------------------*/
#work .inner {max-width: 1702px;}
#work .block {
	position: relative;
	padding: clamp(20px, calc(20px + 60 * ((100vw - 375px) / 1545)), 80px);
	padding-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	box-shadow: 1px 6px 14px rgba(0, 0, 0, 16%);
	border-radius: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	background: #fff url(../img/front/work/bg.webp) no-repeat top center / cover;
}
#work .block figure {position: absolute;top: 5vw;right: 3vw;z-index: -1;transform: translateY(-50%);width: 16vw;}
#work .block .title_common {text-align: left;}
#work .block .title_common p span {margin: 0 0 10px 0;}
#work .block .title_common p {text-align: left;}
#work .block .title_common p img {margin: 0;}
#work .block .title_common h2 {text-align: left;}
#work .block .title_common h2 span.color {color: #019CDE;}
#work .block .container {display: flex;align-items: flex-end;gap: 25px;}
#work .block .container .content p:not(:last-child) {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#work .block .container a {margin-left: 0;}
@media only screen and ( max-width : 1024px ) {
	#work .block .container {display: block;}
	#work .block .container .content {margin-bottom: 30px;}
}
@media only screen and ( max-width : 500px ) {
	#work .block figure {top: 2vw;width: 28vw;}
}