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

	Main Visual

--------------------------------------------------*/
#mv {position: relative;z-index: 2;background: #3A67B1;}
#mv .wrap {position: absolute;bottom: 18%;left: 4%;z-index: 2;}
#mv .wrap h1 {margin-bottom: 2%;font-weight: bold;font-size: 2.8vw;line-height: 1.3;}
#mv .wrap h1 span {color: #006E91;}
#mv .wrap p {font-weight: bold;font-size: 1.2vw;}
#mv .splide__slide {display: flex;position: relative;}
#mv .splide__slide span:nth-child(1) {width: 70%;}
#mv .splide__slide span:nth-child(2) {position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 45%;}
@media only screen and ( max-width : 767px ) {
	#mv .wrap h1 {font-size: 3.8vw;}
	#mv .wrap p {font-size: 1.8vw;}
}
@media only screen and ( max-width : 500px ) {
	#mv .wrap {bottom: 20%;}
	#mv .wrap h1 {font-size: 8.8vw;}
	#mv .wrap p {font-size: 3vw;}
}
/*-------------------------------------------------

	Message

--------------------------------------------------*/
#message {background: #F0F4F7;}
#message .container h3 {width: 46%;font-weight: bold;font-size: clamp(22px, calc(22px + 14 * ((100vw - 375px) / 1545)), 36px);}
#message .container .wrap {width: 50%;}
#message .container .wrap p {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
@media only screen and ( max-width : 767px ) {
	#message .container h3 {width: 100%;margin-bottom: 30px; font-size: 20px;}
	#message .container .wrap {width: 100%;}
}
/*-------------------------------------------------

	Business

--------------------------------------------------*/
#business {position: relative;z-index: 1;background: #E6F0F9;}
#business::before,
#business::after {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;}
#business::before {background: url(../img/front/business/bgR.webp) no-repeat 99% 14% / 334px;}
#business::after {background: url(../img/front/business/bgL.webp) no-repeat 3% 94% / 288px;}
#business .ttl_wrap {max-width: 600px;}
#business ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: flex-start;
	gap: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	max-width: 1387px;
	margin: -40px auto 0;
}
#business ul li {
	position: relative;
	padding: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	box-shadow: 3px 5px 10px rgba(0, 0, 0, 16%);
	background: #E6F0F9;
	transition: .3s;
}
#business ul li:nth-child(1) {margin-top: 250px;}
#business ul li:nth-child(2) {margin-top: 110px;}
#business ul li:hover {box-shadow: 1px 1px 3px rgba(0, 0, 0, 16%);}
#business ul li figure {margin-bottom: 15px;}
#business ul li h3 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#business ul li h3 span {
	display: block;
	font-size: clamp(14px, calc(14px + 10 * ((100vw - 375px) / 1545)), 24px);
	font-weight: 400;
}
#business ul li p.txt {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#business ul li:hover .read p span::after {opacity: 1;}
#business ul li:hover .read p span::before {background: #fff;}
@media only screen and ( max-width : 767px ) {
	#business ul {grid-template-columns: repeat(1, 1fr);}
	#business ul li {width: 65%;}
	#business ul li:nth-child(2) {margin: 0 0 0 auto;}
}
@media only screen and ( max-width : 500px ) {
	#business::before {background-position: 99% 24%;background-size: 50%;}
}
/*-------------------------------------------------

	System Products

--------------------------------------------------*/
#products {overflow: hidden;background: #F6F8F8 url(../img/front/products/bg.svg) no-repeat top center / cover;}
#products .container .wrap {width: 50%;}
#products .container .wrap h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#products .container .wrap .content p {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
#products .container figure {width: 46%;}
@media only screen and ( max-width : 767px ) {
	#products {padding-bottom: 0;background-image: url(../img/front/products/bg-sp.svg);}
	#products .container .wrap {width: 100%;margin-bottom: 30px;}
	#products .container figure {width: 100vw;margin: 0 calc(50% - 50vw);}
	#products .container .wrap h3 {font-size: 17px;}
}
/*-------------------------------------------------

	Company

--------------------------------------------------*/
#company {position: relative;z-index: 1;overflow: hidden;background: #E6F0F9;}
#company::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
	width: 98%;
	height: 80%;
	border-radius: 80px 30px;
	background: #F0F4F7;
}
#company .container {
	padding-top: clamp(40px, calc(40px + 50 * ((100vw - 375px) / 1545)), 90px);
	padding-bottom: clamp(40px, calc(40px + 50 * ((100vw - 375px) / 1545)), 90px);
}
#company .container .wrap {width: 50%;}
#company .container .wrap .content p {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
#company .container figure {width: 46%;}
@media only screen and ( max-width : 767px ) {
	#company::before {height: 90%;border-radius: 60px 20px;}
	#company .container .wrap {width: 100%;margin-bottom: 30px;}
	#company .container figure {width: 100vw;margin: 0 calc(50% - 50vw);}
}
/*-------------------------------------------------

	News

--------------------------------------------------*/
#news {overflow: hidden;background: #F8F9F9 url(../img/front/news/bg.svg) no-repeat top center / cover;}
#news .container {text-align: right;}
#news .container ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;}
#news .container ul li {
	position: relative;
	padding: clamp(10px, calc(10px + 15 * ((100vw - 375px) / 1545)), 25px);
	box-shadow: 0 0 10px rgba(0, 0, 0, 16%);
	background: #fff;
	transition: .3s;
}
#news .container ul li:hover {box-shadow: 0 0 3px rgba(0, 0, 0, 16%);}
#news .container ul li dl {margin-bottom: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px);}
#news .container ul li dl dt {
	display: flex;
	align-items: center;
	gap: 25px;
	margin-bottom: clamp(45px, calc(45px + 30 * ((100vw - 375px) / 1545)), 75px);
}
#news .container ul li dl dt time {color: #3175BB;font-weight: bold;}
#news .container ul li dl dt span {
	width: 90px;
	padding: 5px 0;
	border: 1px solid #3175BB;
	border-radius: 16px;
	color: #3175BB;
	font-weight: bold;
	text-align: center;
}
#news .container ul li:hover .read p span::after {opacity: 1;}
#news .container ul li:hover .read p span::before {background: #fff;}
#news .container a.view {
	margin-top: clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
	padding: 10px 30px 8px;
	border-radius: 20px;
	background: #3175BB;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
#news .container a.view:hover {background: #C3C3C3;}
@media only screen and ( max-width : 767px ) {
	#news .container ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#news .container ul {grid-template-columns: repeat(1, 1fr);}
}