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

/*==============================*/
/* Frame */
/*==============================*/
section.visionWrap > div{
	padding: 80px 0;
}
section.visionWrap > div:not(:last-child){ border-bottom: 3px solid #f3f4f6;}

section.visionWrap > div:first-child{ padding-top: 0;}
section.visionWrap > div:last-child{ padding-bottom: 0;}


/*==============================*/
/* VISION */
/*==============================*/

/*---------------------------------
   Title
---------------------------------*/
div.visionTitle h2{
	margin-bottom: 44px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.3em;
}
div.visionTitle h2 span{
	position: relative;
	display: block;
	margin-bottom: 12px;
	padding-left: 44px;
	color: #000;
	font-size: 42px;
	font-weight: bold;
	font-family: "Inter", sans-serif;
	letter-spacing: 0.04em;
	line-height: 1.3em;
}
div.visionTitle h2 span::before{
	position: absolute; top: 50%; left: 0;
	content: "";
	width: 24px;
	height: 4px;
	background: #00abdc;
	transform: translateY(-50%);
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.visionTitle h2{
			margin-bottom: 30px;
			font-size: 36px;
		}
		div.visionTitle h2 span{
			margin-bottom: 12px;
			padding-left: 40px;
			font-size: 28px;
		}
	}

/*---------------------------------
   Text
---------------------------------*/
div.visionTitle p{
	font-size: 20px;
	line-height: 1.8em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.visionTitle p{
			font-size: 17px;
			line-height: 1.8em;
		}
	}


/*==============================*/
/* MISSION */
/*==============================*/
div.missionWrap{
	display: flex;
	gap: 48px;
	counter-reset: privacy-list;
}

div.mission{
	width: calc(calc(100% - 48px * 2) / 3);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.missionWrap{ flex-direction: column;}
		div.mission{ width: 100%;}
	}



/*---------------------------------
   Title
---------------------------------*/
div.mission h3{
	margin-bottom: 24px;	
	color: #000;
	font-size: 26px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.02em;
}

div.mission h3 span{
	position: relative;
	display: block;
	margin-bottom: 28px;
}
div.mission h3 span::after{
	position: absolute; bottom: -16px; left: 50%;
	content: "";
	width: 2px;
	height: 12px;
	background: #00abdc;
	transform: translateX(-50%);
}

div.mission h3 span small{
	position: relative;
	padding-left: 32px;
	padding-right: 10px;
	font-size: 19px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	letter-spacing: 0.03em;
}
div.mission h3 span small::before{
	position: absolute; top: -3px; left: 0;
	content: "0"counter(privacy-list) ;
	counter-increment: privacy-list;
	color: #00abdc;
	font-size: 19px;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.04em;
}

/*---------------------------------
   Text
---------------------------------*/
div.mission p:not(:last-child){ margin-bottom: 16px;}


/*==============================*/
/* ORIGIN */
/*==============================*/
div.companyOrigin{
	display: flex;
	align-items: center;
	gap: 56px;
	width: min(768px,100%);
	margin: 0 auto;
}

div.companyOrigin figure{
	flex: 0 0 280px;
}
div.companyOrigin div{
	flex: 1;
	min-width: 0;
}
div.companyOrigin div p{
	font-size: 19px;
	line-height: 1.7em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.companyOrigin{
			flex-direction: column;
			gap: 24px;
		}

		div.companyOrigin figure{ flex: auto;}
		div.companyOrigin figure img{ width: 248px;}
		
		div.companyOrigin div{ flex: auto;}
		div.companyOrigin div p{ font-size: 18px;}
	}