@charset "utf-8";





/*==========================================================================

	            #top-mv  メインビジュアル
	
============================================================================*/

#top-mv {
	max-width: 1500px;
	margin: 0 auto 100px;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 768px){
	#top-mv {
		margin: 0 auto;
	}
}

/*----------------------------------- 
      キャッチコピー
-----------------------------------*/

#top-mv h2 {
    font-size: clamp(28px, 5vw, 60px);
	font-weight: bold;
	/* text-align: center; */
	/* color: #fff; */
	line-height: 1.3;
	letter-spacing: 0.03em;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	background-color: #fff;
	padding: 0.3em 0.1em 0.6em 0.5em;
}
#top-mv h2 span {
	background: linear-gradient(90deg, #000f55 0%, #52c920 87%, #52c920 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 768px){
	#top-mv h2 {
		width: 84%;
		margin: -8% auto 0;
		text-align: center;
		line-height: 1.5;
		/* letter-spacing: 0.03em; */
		position: inherit;
		bottom: inherit;
		left: inherit;
		/* z-index: 2;
		background-color: #fff; */
		padding: 0.8em 0 1em 1em;
	}
}

/*----------------------------------- 
      スライダー
-----------------------------------*/

#top-mv .swiper {
	padding-bottom: 40px;
    position: relative;
}
#top-mv .slide-img .sp {
	display: none;
}

@media screen and (max-width: 768px){
	#top-mv .swiper {
		padding-bottom: 0;
	}
	#top-mv .slide-img .pc {
		display: none;
	}
	#top-mv .slide-img .sp {
		display: block;
	}
}


/*--------------------------------
   　　次へ・前へ　ボタン
--------------------------------*/

#top-mv .swiper-button-next ,#top-mv .swiper-button-prev {
	width: 80px;
	height: 80px;
	top: calc(50% - 40px);
}
#top-mv .swiper-button-next {
	background: url(../img/common/swiper-next.png) center center no-repeat;
	background-size: contain;
}
#top-mv .swiper-button-prev {
	background: url(../img/common/swiper-prev.png) center center no-repeat;
	background-size: contain;
}
#top-mv .swiper-button-next:after ,#top-mv .swiper-button-prev:after {
	display: none;
}

@media screen and (max-width: 768px){
	#top-mv .swiper-button-next ,#top-mv .swiper-button-prev {
		width: 50px;
		height: 50px;
		top: 50%;
	}
}

/*--------------------------------
   　　ページネーション
--------------------------------*/

#top-mv .swiper-pagination {
    width: 100%;
	text-align: right;
    position: absolute;
    bottom: 0;
    left: inherit;
    right: 0;
	z-index: 99;
}
#top-mv .swiper-pagination-bullet {
    margin: 0 5px;
    width: 11px;
    height: 11px;
	border-radius: 50%;
    background: #d1d1d1;
	opacity: 1;
}
#top-mv .swiper-pagination-bullet-active {
    background: #6ec34a;
}

@media screen and (max-width: 768px){
	#top-mv .swiper-pagination {
		display: none;
	}
}


/*==========================================================================

	            #top-sec1  事業案内
	
============================================================================*/

#top-sec1 {
	background-color: #d8f2d4;
	padding: 0 5% 200px;
	/* overflow: hidden; */
	position: relative;
	z-index: 0;
}
#top-sec1::before {
	content: "";
	width: 100%;
	height: 250px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	background-color: #fff;
	clip-path: polygon(100% 0, 0 0, 0 100%);
}
#top-sec1::after {
	content: "";
	width: 100%;
	height: 250px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	background-color: #fff;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
@media screen and (max-width: 768px){
	#top-sec1 {
		padding: 0 5% 20%;
	}
	#top-sec1::before {
		height: 70px;
	}
	#top-sec1::after {
		height: 70px;
	}
}

/*----------------------------------- 
     .top-sec1-box1
-----------------------------------*/

.top-sec1-box1 {
    max-width: 1200px;
	margin: 0 auto 3em;
	font-size: clamp(15px, 2.4vw, 22px);
	text-align: center;
	line-height: 2.2;
	position: relative;
	z-index: 2;
}

/*----------------------------------- 
     .top-sec1-box2
-----------------------------------*/

.top-sec1-box2 {
    max-width: 1230px;
	margin: 0 auto;
}
.top-sec1-box2 ul {
	margin-bottom: 2.5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.top-sec1-box2 ul > li {
	max-width: 380px;
	width: 31%;
	margin: 0 1% 2%;
	background-color: #fff;
	overflow: hidden;
}
.top-sec1-box2 dt {
	position: relative;
}
.top-sec1-box2 dt h2 {
    font-size: clamp(18px, 3vw, 24px);
	font-weight: bold;
	text-align: center;
	line-height: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	background-color: #fff;
	padding: 0.7em 1em 0.3em;
}
.top-sec1-box2 dd {
	padding: 1.5em 2em;
}

@media screen and (max-width: 1200px){
	.top-sec1-box2 ul > li {
		width: 48%;
	}
}
@media screen and (max-width: 768px){
	.top-sec1-box2 ul > li {
		width: 100%;
	}
	.top-sec1-box2 dd {
		padding: 1.5em 1.5em;
	}
	}

/*==========================================================================

	            #top-sec2  施工事例
	
============================================================================*/

#top-sec2 {
	overflow: hidden;
	padding: 0 3%;
	margin-bottom: 60px;
}

.top-sec2-box1 h2 {
	font-size: clamp(20px, 5vw, 48px);
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	margin-bottom: 1em;
}

.top-sec2-box1 ul {
	margin-bottom: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}
.top-sec2-box1 ul li a {
	font-size: clamp(15px, 3vw, 18px);
	text-align: center;
	padding: 0.3em 1em;
	border: #838383 1px solid;
	text-decoration: none;
	border-radius: 30px;
	transition: .5s;
}
.top-sec2-box1 ul li a:hover {
	color: #fff;
	border: #59c32c 1px solid;
	background-color: #59c32c;
	transition: .5s;
}

/*----------------------------------- 
      スライダー
-----------------------------------*/

#top-sec2 .swiper-wrapper {
    /* transition-timing-function: linear; */
}

#top-sec2 .swiper2 {
	padding-bottom: 70px;
    position: relative;
}

#top-sec2 .swiper-slide h2 {
	font-size: clamp(13px, 3vw, 16px);
	font-weight: bold;
	text-align: center;
	line-height: 1;
	position: absolute;
	bottom: -20px;
	left: -1px;
	z-index: 2;
	background-color: #fff;
	padding: 1em 1em 0.3em;
}

#top-sec2 .swiper-slide h3 {
	box-shadow: 20px 20px 0px 0px #c0edad;
}

@media screen and (max-width: 768px){
	#top-sec2 {
		margin-bottom: 10%;
	}
	#top-sec2 .swiper2 {
		padding-bottom: 10%;
	}
	#top-sec2 .swiper-slide h2 {
		bottom: -10px;
	}

	#top-sec2 .swiper-slide h3 {
		box-shadow: 10px 10px 0px 0px #c0edad;
	}
}

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

.swiper2-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px;
	padding-top: 60px;
}

/*--------------------------------
   　　次へ・前へ　ボタン
--------------------------------*/

#top-sec2 .swiper-button-next2 ,#top-sec2 .swiper-button-prev2 {
	width: 60px;
	height: 60px;
	/* position: absolute;
	top: calc(50% - 70px);
	z-index:10; */
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color,var(--swiper-theme-color));

	/* position:absolute;
	top:50%;
	width:calc(var(--swiper-navigation-size)/ 44 * 27);
	height:var(--swiper-navigation-size);
	margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color,var(--swiper-theme-color)); */
}
#top-sec2 .swiper-button-next2 {
	background: url(../img/common/swiper-next2.png) center center no-repeat;
	background-size: contain;
	/* right: 0; */
}
#top-sec2 .swiper-button-prev2 {
	background: url(../img/common/swiper-prev2.png) center center no-repeat;
	background-size: contain;
	/* left: 0; */
}
/* #top-sec2 .swiper-button-next2:after ,#top-sec2 .swiper-button-prev2:after {
	display: none;
} */

@media screen and (max-width: 768px){
	#top-sec2 .swiper-button-next2 ,#top-sec2 .swiper-button-prev2 {
		width: 50px;
		height: 50px;
		top: 30%;
	}
}

/*--------------------------------
   　　ページネーション
--------------------------------*/

#top-sec2 .swiper-pagination2 {
	width: inherit;
    /* width: 100%; */
	text-align: center;
    /* position: absolute;
    bottom: 0;
    left: 0;
	z-index: 99; */
}
#top-sec2 .swiper-pagination-bullet {
    margin: 0 4px;
    width: 10px;
    height: 10px;
	border-radius: 50%;
    background: #d1d1d1;
	opacity: 1;
}
#top-sec2 .swiper-pagination-bullet-active {
    background: #6ec34a;
}

@media screen and (max-width: 768px){
	#top-sec2 .swiper-pagination2 {
		/* display: none; */
	}
	#top-sec2 .swiper-pagination-bullet {
		margin: 0 2px;
		width: 8px;
		height: 8px;
	}
}


/*==========================================================================

	            #top-sec3  採用情報
	
============================================================================*/

#top-sec3 {
	padding: 110px 5% 130px;
}
@media screen and (max-width: 768px){
	#top-sec3 {
		padding: 10% 5% 15%;
	}
}

/*----------------------------------- 
     .top-sec3-box1
-----------------------------------*/

.top-sec3-box1 {
    max-width: 860px;
	margin: 0 auto;
	position: relative;
}
.top-sec3-box1 h2 {
    font-size: clamp(24px, 5vw, 48px);
	font-weight: bold;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.1em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: #fff;
	padding: 0.3em 0.6em;
}
.top-sec3-box1 h2 span {
	background: linear-gradient(90deg, #000f55 0%, #52c920 87%, #52c920 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.top-sec3-btn a {
	width: 15em;
	position: absolute;
	bottom: -25px;
	right: -30px;
	line-height: 2.8;
}

@media screen and (max-width: 768px){
	.top-sec3-btn a {
		width: 12em;
		bottom: -15px;
		right: -15px;
	}
}

/*==========================================================================

	            #top-sec4  バナー
	
============================================================================*/

/*----------------------------------- 
     .top-sec4-box1
-----------------------------------*/

.top-sec4-box1 {
	background-color: #fff;
	position: relative;
}
.top-sec4-box1::before {
	display: block;
	content: '';
	width: 2px;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
}
.top-sec4-box1 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.top-sec4-box1 ul li {
	width: 50%;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: bold;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.1em;
	border-bottom: #fff 2px solid;
}
.top-sec4-box1 ul li a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 5em 0;
	transition: .5s;
}
.top-sec4-box1 ul li:nth-child(1) a {
	background: url(../img/top/sec4-01.jpg) center center no-repeat;
	background-size: cover;
}
.top-sec4-box1 ul li:nth-child(2) a {
	background: url(../img/top/sec4-02.jpg) center center no-repeat;
	background-size: cover;
}
.top-sec4-box1 ul li a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
	transition: .5s;
}

@media screen and (max-width: 768px){
	.top-sec4-box1::before {
		display: none;
	}
	.top-sec4-box1 ul li {
		width: 100%;
	}
}