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

/*==============================*/
/* Title */
/*==============================*/
.topTitle{
	margin-bottom: 56px;
	color: #000;
	text-align: center;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.01em;
}
.topTitle small{
	color: #BDBDBD;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.414em;
	letter-spacing: 0.02em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		.topTitle{
			margin-bottom: 48px;
			font-size: 44px;
			letter-spacing: 0em;
		}
		.topTitle small{
			font-size: 15px;
		}
	}


/*==============================*/
/* Main Visual */
/*==============================*/
div.mainVisual{
	margin-bottom: 32px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual{ margin-bottom: 40px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual{ margin-bottom: 0px;}
	}


/*---------------------------------
	Content
---------------------------------*/
div.mainVisual div.visualContent{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1920 / 1080;
	max-height: 800px;
	padding-left: 10%;
	box-sizing: border-box;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual div.visualContent{
			width: 100%;
			padding-left: 24px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual div.visualContent{
			width: 100%;
			aspect-ratio: 828 / 1792;
			max-height: 560px;
			padding-left: 24px;
			container-type: inline-size;
		}
	}


/*-- タイトル
------------------------- */
div.mainVisual div.visualContent h1{
	position: relative;
	z-index: 1;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	margin-bottom: 16px;
	padding: 12px 12px 12px 0;
	background: #fff;
	font-size: 72px;
	font-weight: 800;
	line-height: 1.5em;
	box-sizing: border-box;
}
div.mainVisual div.visualContent h1 span{
	vertical-align: baseline;
	color: #00A9DA;
	font-size: inhreit;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual div.visualContent h1{
			margin-bottom: 24px;
			padding: 8px 8px 8px 0;
			font-size: 60px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual div.visualContent h1{
			margin-bottom: 16px;
			padding: 4px 4px 4px 0;
			font-size: min(11.2cqw,64px);
			line-height: 1.5em;
		}
	}


/*-- テキスト
------------------------- */
div.mainVisual div.visualContent div{
	position: relative;
	z-index: 1;
	width: 288px;
}
div.mainVisual div.visualContent div p{
	font-size: 19px;
	font-weight: 500;
	line-height: 1.8em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual div.visualContent div{
			z-index: 1;
			width: auto;
			padding-left: 24px;
		}
		div.mainVisual div.visualContent div p{
			font-size: min(4cqw,19px);
			line-height: 1.8em;
			text-shadow: 0px 0px 6px rgba(255,255,255,1);
		}
	}


/*---------------------------------
	Image
---------------------------------*/
div.mainVisual div.visualContent figure{
	position: absolute; top: 0; right: 0;
	width: 70%;
	height: 100%;
}
div.mainVisual div.visualContent figure img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual div.visualContent figure{
			width: calc(100% - 24px);
		}
		div.mainVisual div.visualContent figure img{
			border-radius: 10px 0 0 10px;
		}
	}
	



/*==============================*/
/* ABOUT */
/*==============================*/
div.topAbout{
	position: relative;
}
div.topAbout::before{
	position: absolute; bottom: 28px; right: -20px;
	content: "";
	width: 640px;
	aspect-ratio: 580/136;
	background: url("/common/img/top/bg-about.svg");
	background-size: contain;
	z-index: -9;
}

div.topAbout h2{
	position: relative;
	padding-bottom: 22px;
	margin-bottom: 32px;
	color: #000;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.01em;
}
div.topAbout h2::before{
	position: absolute; bottom: 0; left: 0;
	content: "";
	width: 44px;
	height: 5px;
	background: #00abdc;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topAbout h2{
			padding-bottom: 24px;
			margin-bottom: 32px;
			font-size: 40px;
			line-height: 1.3em;
		}
		div.topAbout::before{
			position: absolute; bottom: 10%; right: -20px;
			width: 95%;
		}
		
		div.topAbout div p:not(:last-child){ margin-bottom: 12px;}
	}


/*==============================*/
/* ACIEVMENTS */
/*==============================*/
.achievement{
	margin-bottom: 104px;
}

.achievement h3{
	position: relative;
	margin-bottom: -56px;
}
.achievement figure{
	margin-bottom: 12px;
	text-align: center;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		.achievement h3{ margin-bottom: -12px;}
		.achievement figure{ margin-bottom: 24px;}
	}



/*==============================*/
/* SERVICE */
/*==============================*/
section.topService-wrap{
	padding-top: 120px;
	padding-bottom: 88px;
	background: url("/common/img/top/bg-service.png");
	background-size: cover;
}


div.topService div.topService-box{
	display: flex;
	align-items: center;
	gap: 40px;
	padding-top: 72px;
	padding-bottom: 72px;
}
div.topService div.topService-box:not(:last-child){ margin-bottom: 40px;}


div.topService div.topService-box:nth-child(1){
	margin-right: calc( calc( 100% - 1068px ) / 2 );
	padding-left: calc( calc( 100% - 1068px ) / 2 );
	padding-right: 64px;
	background: #28B5E0;
}
div.topService div.topService-box:nth-child(2){
	flex-direction: row-reverse;
	margin-left: calc( calc( 100% - 1068px ) / 2 );
	padding-left: 80px;
	padding-right: calc( calc( 100% - 1068px ) / 2 );
	background: #40487C;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 1200px) {
		div.topService div.topService-box:nth-child(1){
			margin-right: 40px;
			padding-left: 48px;
			padding-right: 40px;
		}
		div.topService div.topService-box:nth-child(2){
			margin-left: 40px;
			padding-left: 40px;
			padding-right: 48px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		section.topService-wrap{
			padding-top: 80px;
			padding-bottom: 80px;
		}

		
		div.topService div.topService-box{
			flex-direction: column-reverse;
			gap: 20px;
			padding-top: 40px;
			padding-bottom: 48px;
		}
		div.topService div.topService-box:not(:last-child){ margin-bottom: 24px;}
		
		div.topService div.topService-box:nth-child(1){
			margin-right: 24px;
			padding-left: 32px;
			padding-right: 32px;
			border-radius: 0 10px 10px 0;
		}
		div.topService div.topService-box:nth-child(2){
			flex-direction: column-reverse;
			margin-left: 24px;
			padding-left: 32px;
			padding-right: 32px;
			border-radius:  10px 0 0 10px;
		}
		
	}


/*---------------------------------
   
---------------------------------*/
div.topService div.topService-box div{
	flex: 1;
	min-width: 0;
	color: #fff;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topService div.topService-box div{
			flex: auto;
			width: 100%;
		}
	}


/*-- タイトル
------------------------- */
div.topService div.topService-box div h3{
	margin-bottom: 20px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.414em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topService div.topService-box div h3{
			margin-bottom: 16px;
			font-size: 26px;
			font-weight: 700;
			line-height: 1.414em;
		}
		div.topService div.topService-box div p{
			font-size: 14px;
			line-height: 1.8em;
		}
	}


/*-- ボタン
------------------------- */
div.topService div.topService-box div p.topServiceBtn{
	margin-top: 32px;
}
div.topService div.topService-box div p.topServiceBtn a{
	position: relative;
	display: inline-block;
	padding: 9px 36px 11px 14px;
	background: #18282b;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	transition: all 300ms;
	text-align: center;
}
div.topService div.topService-box div p.topServiceBtn a::after{
	position: absolute; top: 50%; right: 14px;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #0FAAD8;
    border-right: 1px solid #0FAAD8;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -5px;
}
div.topService div.topService-box div p.topServiceBtn a:hover {
	background-color: #00abdc;
	box-shadow: 0 0 0 1px #00abdc inset;
	color: #fff;
	transform: translateY(-3px);
}
div.topService div.topService-box div p.topServiceBtn a:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}


/*---------------------------------
   
---------------------------------*/
div.topService div.topService-box figure{
	flex: 0 0 auto;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topService div.topService-box figure{ flex: auto;}
		div.topService div.topService-box:nth-child(1) figure img{ width: 176px;}
		div.topService div.topService-box:nth-child(2) figure img{ width: 160px;}
	}


/*==============================*/
/* MEMBERS */
/*==============================*/
div.topMember{
	width: min(1360px,100%);
	margin: 0 auto;
	padding-top: 160px;
	padding-bottom: 160px;
	background: url("/common/img/top/bg-member-pc.png") no-repeat;
	background-position: center;
	background-size: contain;
}
div.topMember h3{
	margin-bottom: 64px;
	color: #fff;
	text-align: center;
	font-size: 32px;
	line-height: 1.8em;
}
div.topMember h3 span{
	background: #00ABDC;
	font-size: inherit;
	font-weight: 600;
}
	/* ======= SP以上 =======*/
	@media (min-width: 768px) {
		div.topMember figure{ display: none;}
	}
	/* ======= PC以下 =======*/
	@media (max-width: 1370px) {
		div.topMember{
			padding-right: 24px;
			padding-left: 24px;
		}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topMember{
			padding-top: 96px;
			padding-bottom: 0px;
		}
		div.topMember h3{
			margin-bottom: 64px;
			font-size: 26px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topMember{
			padding-top: 80px;
			padding-bottom: 12px;
			background: none;
			container-type: inline-size;
		}
		div.topMember h2{
			margin-bottom: 28px;
			font-size: min(11cqw, 40px);
		}
		div.topMember h3{
			margin-bottom: 32px;
			font-size: min(6cqw, 30px);
		}
		div.topMember figure{ margin-bottom: 36px;}
	}



/*==============================*/
/* RECRUIT */
/*==============================*/
div.topRecruit{
	display: flex;
	gap: 2px;
	width: min(1360px,100%);
	margin: 0 auto;
}
div.topRecruit div.topRecruit-box{ width: calc(calc(100% - 2px * 1) / 2);}

div.topRecruit div.topRecruit-box div{
	position: relative;
	width: 85%;
	margin: 0 auto;
	padding: 28px 0 28px 0;
	border-radius: 5px;
	box-shadow: 0px 2px 10px 0px rgba(153,153,153,0.2);
	transform: translateY(-20%);
	text-align: center;
	background: #fff;
}
div.topRecruit div.topRecruit-box div h3{
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 16px;
	color: #000;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4em;
	letter-spacing: 0.01em;
}
div.topRecruit div.topRecruit-box div h3::before{
	position: absolute; bottom: 0; left: 50%;
	content: "";
	width: 34px;
	height: 4px;
	background: #00abdc;
	transform: translateX(-50%);
}
div.topRecruit div.topRecruit-box div p:nth-child(2){
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.8em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topRecruit{
			flex-direction: column;
			gap: 2px;
			width: min(1360px,100%);
			margin: 0 auto;
		}
		div.topRecruit div.topRecruit-box{ width: 100%;}

	}


/*==============================*/
/* NEWS */
/*==============================*/
div.top-newsBox-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 48px 40px;
	margin-bottom: 40px;
}

div.top-newsBox{
	position: relative;
	width: calc(calc(100% - 40px * 2) / 3);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.top-newsBox-wrap{ gap: 40px 32px;}
		div.top-newsBox{ width: calc(calc(100% - 32px * 1) / 2);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.top-newsBox-wrap{ gap: 28px;}
		div.top-newsBox{ width: 100%;}
	}


/*---------------------------------
   
---------------------------------*/
div.top-newsBox figure{
	margin-bottom: 20px;
	border: 1px solid #eee;
}
div.top-newsBox figure img{ width: 100%;}


/*---------------------------------
   
---------------------------------*/

/*-- 
------------------------- */
div.top-newsBox div h2{
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55em;
	letter-spacing: 0.02em;
}

/*-- 
------------------------- */
div.top-newsBox div.newsBox-info{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
div.top-newsBox div.newsBox-info p.category{
    width: 96px;
	padding: 1px 0 2px 0;
    background: #00abdc;
    color: #fff;
    font-size: 12px;
    line-height: 1.414em;
    text-align: center;
}
div.top-newsBox div.newsBox-info p.date{
	padding-top: 2px;
	color: #b8b8b8;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.01em;
	line-height: 1.414em;
	font-size: 15px;
}



/*==============================*/
/* CCMPANY */
/*==============================*/
div.topCompany{
	display: flex;
	gap: 56px;
}

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


/*---------------------------------
   
---------------------------------*/
div.topCompany div{
	flex: 0 0 auto;
}

/*-- タイトル
------------------------- */
div.topCompany div h2{
	margin-bottom: 28px;
	color: #000;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.01em;
}
div.topCompany div h2 small{
	color: #BDBDBD;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.414em;
	letter-spacing: 0.02em;
}

div.topCompany div h3{
	position: relative;
	padding-bottom: 22px;
	margin-bottom: 26px;
	color: #000;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.01em;
}
div.topCompany div h3::before{
	position: absolute; bottom: 0; left: 0;
	content: "";
	width: 44px;
	height: 5px;
	background: #00abdc;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topCompany div h2{
			margin-bottom: 28px;
			font-size: 56px;
		}
		div.topCompany div h2 small{
			font-size: 16px;
		}
		div.topCompany div h3{
			padding-bottom: 22px;
			margin-bottom: 24px;
			font-size: 26px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topCompany div h2{
			margin-bottom: 28px;
			font-size: 48px;
		}
		div.topCompany div h2 small{
			font-size: 15px;
		}
		div.topCompany div h3{
			padding-bottom: 22px;
			margin-bottom: 24px;
			font-size: 22px;
		}
	}



/*---------------------------------
   
---------------------------------*/
div.topCompany iframe{
	flex: 1;
	min-width: 0;
}