@charset "utf-8";
/* CSS Document */
section{padding: 110px 0;}
.br520,.br470{display: none;}
@media (max-width: 850px) {
	section{padding: 60px 0;}}
@media (max-width: 520px) {.br520{display: block;}}
@media (max-width: 470px) {.br470{display: block;}}
/*================================================================

================================================================*/
#particle-green,
#particle-white{
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 50%;
}
#particle-white{
	z-index: 1;
	bottom: 0%;
	left: -20%;
}
#particle-green{
	z-index: 0;
	bottom: -10%;
	left: 0;
}
.mv{
	background: url("../img/mv.jpg") ;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
    height: auto;
    aspect-ratio: 1440 / 650;
	position: relative;
}
.mv img{
	width: 28%;
    position: absolute;
    top: 50%;
    left: 15%;
	transform: translatey(-50%);
}
@media (max-width: 750px) {
	.mv img{left: 5%;}
	.mv{
		background: url("../img/mv_sp.jpg") ;
		background-repeat: no-repeat;
		background-size: cover;
		height: auto;
		aspect-ratio: 85 / 120;
	}
	.mv img{
		width: 60%;
		top: 35%;
		left: 5%;
		transform: translatey(1);
	}
}
.scroll-container {
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	bottom: -20px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #27416d;
	font-size: 18px;
}
.scroll-line {
	position: relative;
	width: 1px;
	height: 50px;
	background:#fff;
	margin-top: 5px;
	overflow: hidden;
}
.scroll-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #27416d;
	animation: scroll-animation 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scroll-animation {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  40% {
    transform: scaleY(1);
    transform-origin: top;
  }
  60% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
/*================================================================

================================================================*/
.message {background: url("../img/map.jpg") no-repeat bottom right 10%/ 50vw;}
.message p{
	line-height: 2.3;
	font-size: 21px;
	margin-bottom: 30px;
}
@media (max-width: 1200px) {
	.message p{font-size: 18px;}
}
@media (max-width: 850px) {
	.message {background: url("../img/map.jpg") no-repeat bottom 20% center/80vw;}
	.message p{
		text-align: center;
		font-size: 16px;
	}
}
/*================================================================

================================================================*/
.service{
	overflow: hidden;
	padding-left: max(5%, calc((100% - 1000px) / 2));
	background: url("../img/bg_1.jpg") no-repeat ;
	background-size: cover
}
.service>div{
	display: flex;
	gap:5%;
}
.service_txt{min-width: 300px; width: 33%;}
.slider {
	position: relative;
	width: 47%;
}
.slides-wrapper {
	overflow: hidden;
	width: 1260px;
}
.slides {
	display: flex;
	gap: 30px;
	transition: transform .5s ease;
}
.slides img {
	width: 300px;
	flex-shrink: 0;
	object-fit: cover;
}
.slides p{font-size: 24px;}
.dots { margin-top: 15px;}
.dot {
	display: inline-block;
	width: 50px;
	height: 2px;
	margin-right: 10px;
	background: #b5b5b5;
	cursor: pointer;
	transition: background .3s;
	position: relative;
}
.dot::before {
	content: '';
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 0;
	right: 0;
}
.dot.active { background: #01af00;}
@media (max-width: 850px) {
	.slides p{font-size: 21px;}
	.service>div{
		flex-direction: column;
		gap:20px;
	}
	.service_txt{width: 100%;}
}
@media (max-width: 850px) {
    .service {
        padding-left: 5%; 
        padding-right: 5%;
    }
    .service > div {
        flex-direction: column;
        gap: 60px;
        align-items: center;
    }
    .service_txt {
        width: 100%;
        min-width: unset;
    }
    .slider {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .slides-wrapper {
        width: 300px; 
        overflow: visible;
    }
    .dots {
        text-align: center;
        width: 100%;
    }
}
/*================================================================

================================================================*/
.flex_box{
	display: flex;
	align-items: flex-start;
	gap:80px;
}
.works{	max-width: 1200px;}
.works_txt{	max-width: 525px;}
.recruit{
	background-image: linear-gradient(#ffffff, #eff8ef);
	position: relative;
	overflow: hidden;
	margin: 0;
}
.recruit .flex_box{justify-content: space-between;}
.recruit .content{
	position: relative;
	z-index: 1;
}
.flex_img{width: 50%;}
@media (max-width: 1110px) {
	.flex_box{gap:40px;}
}
@media (max-width: 850px) {
	.flex_box{
		flex-direction: column;
		gap:20px;
	}
	.flex_img{width: 100%;}
	.works img{margin-bottom: 20px;}
	.recruit .flex_box{flex-direction: column-reverse;	}
	.works_txt{	max-width: 100%;}
}
.map{
	background: url("../img/googlemap.jpg") no-repeat center center / cover;
	height: 400px;
}
.map a{
	width: 100%;
	height: 100%;
	display: block;
}
@media (max-width: 850px) {
	.map{height: 250px;}
}