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

/*==============================*/
/* 枠 */
/*==============================*/
div.companyWrap{
	width: min(1016px,100%);
	margin: 0 auto;
}

/*==============================*/
/* 会社概要 */
/*==============================*/
div.company dl{ display: flex;}

div.company dl:first-child dt{ border-top: 1px solid #1F5E54;}
div.company dl dt{
	width: 200px;
	flex: 0 0 200px;
	padding: 16px 0;
	border-bottom: 1px solid #1F5E54;
	color: #1F5E54;
	font-size: 17px;
	font-weight: 700;
}

div.company dl:first-child dd{ border-top: 1px solid #ccc;}
div.company dl dd{
	flex: 1;
	margin-left: 32px;
	padding: 16px 0;
	border-bottom: 1px solid #ccc;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.company dl{
			flex-direction: column;
			padding: 18px 0;
			border-bottom: 1px solid #ccc;
		}
		div.company dl:first-child{ border-top: 1px solid #ccc;}
		div.company dl:first-child dt{ border-top: none;}
		div.company dl dt{
			width: 100%;
			margin-bottom: 8px;
			flex: none;
			padding: 0;
			border-bottom: none;
			font-size: 18px;
			line-height: 1.3em;
		}

		div.company dl:first-child dd{ border-top: none;}
		div.company dl dd{
			margin-left: 0;
			padding: 0;
			border-bottom: none;
			line-height: 1.414em;
		}
	}

/*==============================*/
/* MAP */
/*==============================*/
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.googleMap iframe{ height: 280px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.googleMap iframe{ height: 224px;}
	}

/*==============================*/
/* 支店 */
/*==============================*/
div.branchWrap{
	display: flex;
	flex-wrap: wrap;
	gap: 48px 40px;
}

div.branch{
	width: calc(calc(100% - 40px * 1) / 2); 
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.branchWrap{
			flex-direction: column;
			gap: 40px;
		}

		div.branch{
			width: 100%; 
		}
	}


/*---------------------------------
   title
---------------------------------*/
div.branch div.branchTitle{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid #ccc;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.branch div.branchTitle{
			margin-bottom: 14px;
			padding-top: 20px;
		}
	}

/*-- 
------------------------- */
div.branch div.branchTitle h3{
	color: #1F5E54;
	font-size: 23px;
	font-weight: 700;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.branch div.branchTitle h3{ font-size: 21px;}
	}

/*-- btn
------------------------- */
div.branch div.branchTitle p{ width: 160px;}
div.branch div.branchTitle p a{
	display: block;
	padding: 8px 0;
	border-radius: 200px;
	border: 1px solid #288E7E;
	color: #288E7E;
	text-align: center;
	font-size: 14px;
	line-height: 1.3em;
}
div.branch div.branchTitle p a:hover{
	background: #288E7E;
	color: #fff;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.branch div.branchTitle p{ width: 144px;}
		div.branch div.branchTitle p a{
			padding: 6px 0;
			font-size: 13px;
		}
	}


/*---------------------------------
   
---------------------------------*/
div.branch > p{
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.618em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}



/*==============================*/
/* サービス */
/*==============================*/
div.companyService-wrap{
	padding: 48px 64px 60px 64px;
	background: #EFF9F5 url("/common/img/share/bg-texture.png");
	border-radius: 24px;
}

div.companyService{
	display: flex;
	gap: 40px;
}
div.companyService dl{
	width: calc(calc(100% - 40px * 1) / 2); 
	padding: 28px 32px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 1px 2px 6px 0px rgba(29,124,183,0.1);
}

div.companyService dl dt{
	margin-bottom: 14px;
	color: #87B32E;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3em;
}
div.companyService dl dd ul li{
	position: relative;
	padding-left: 16px;
	font-size: 15px;
	line-height: 1.414em;
}
div.companyService dl dd ul li:not(:last-child){ margin-bottom: 6px;}
div.companyService dl dd ul li::before{
	position: absolute; top: 8px; left: 0;
	content: "";
	width: 6px;
	height: 6px;
	background: #46403B;
	border-radius: 50%;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.companyService-wrap{ padding: 48px 36px 56px 36px;}

		div.companyService{ gap: 20px;}
		div.companyService dl{
			width: calc(calc(100% - 20px * 1) / 2); 
			padding: 28px 28px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.companyService-wrap{ padding: 32px 20px 32px 20px;}

		div.companyService{
			flex-direction: column;
			gap: 16px;
		}
		div.companyService dl{
			width: 100%; 
			padding: 24px 24px;
		}

		div.companyService dl dt{
			margin-bottom: 12px;
			font-size: 20px;
		}
	}


/*==============================*/
/* 取り組み */
/*==============================*/
div.effortBox-wrap{ counter-reset: number;}

div.effortBox{
	display: flex;
	align-items: center;
	gap: 64px;
}
div.effortBox:nth-child(even){ flex-direction: row-reverse;}
div.effortBox:not(:last-child){ margin-bottom: 80px;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.effortBox{
			gap: 32px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.effortBox{
			flex-direction: column-reverse;
			gap: 36px;
		}
		div.effortBox:nth-child(even){ flex-direction: column-reverse;}
		div.effortBox:not(:last-child){ margin-bottom: 56px;}
	}


/*---------------------------------
   img
---------------------------------*/
div.effortBox figure{
	flex: 1 1 50%;
}
div.effortBox figure img{
	border-radius: 16px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.effortBox figure{
			width: 100%;
			flex: none;
		}
		div.effortBox figure img{
			object-fit: cover;
			width: 100%;
			height: 200px;
			aspect-ratio: 4 / 2;
			border-radius: 12px;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.effortBox div{
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
}
div.effortBox div::before {
	position: absolute; top: 0px; right: 0;
	counter-increment: number;
	content: "0"counter(number);
	color: #F5F5F5;
	font-size: 104px;
	font-weight: 700;
	font-family: "Inter", sans-serif;
	letter-spacing: 0.01em;
	z-index: -1;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.effortBox div{
			width: 100%;
			flex: none;
		}
		div.effortBox div::before {
			position: absolute; top: 2px; right: 0;
			font-size: 88px;
		}
	}

/*-- 
------------------------- */
div.effortBox div h3{
	margin-bottom: 36px;
	color: #1F5E54;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3em;
}
div.effortBox div h4{
	margin-bottom: 18px;
	color: #000;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.effortBox div h3{
			margin-bottom: 20px;
			font-size: 24px;
		}
		div.effortBox div h4{
			margin-bottom: 16px;
			font-size: 20px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.effortBox div h3{
			margin-bottom: 24px;
			font-size: 24px;
		}
		div.effortBox div h4{
			margin-bottom: 14px;
			font-size: 20px;
		}
	}

/*-- 
------------------------- */
div.effortBox div p{
	font-size: 15px;
	line-height: 1.618em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.effortBox div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- 
------------------------- */
div.effortBox div dl dt{
	width: min(136px,100%);
	padding: 2px 0; 
	background: #1D7CB7;
	border-radius: 5px 5px 0 0;
	color: #fff;
	font-size: 17px;
	text-align: center;
}
div.effortBox div dl dd{
	padding: 24px;
	background: #F3F9FE;
	border-radius: 0px 5px 5px 5px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}