@charset "utf-8";
/* CSS Document */
body{
	padding-top: 0!important;
}
.header{
	background-color: transparent;
	transition: ease 0.3s;
}
.header.active{
	background-color: #ffffff;
}

.main-img{
	width: 100%;
	height: 100vh;
	min-height: 800px;
	position: relative;
	background-image: url("https://eco1.co.jp/system_panel/uploads/images/mainimg.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.main-img .main-txt{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.main-img .main-txt .txt-box{
	position: relative;
	text-align: center;
	padding-top: 8%;
}
.main-img .main-txt .txt-box::after{
	content: "";
	width: 100%;
	height: 100vh;
	min-height: 800px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("https://eco1.co.jp/system_panel/uploads/images/mainmask.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	
}
.main-img .main-txt .txt-box .posi-center{
	z-index: 2;
}
.main-img .main-txt .txt-box .item-img{
	width: 80%;
	margin: 0 auto;
	position: relative;
}
.main-img .main-txt .txt-box .item-img div{
	width: 100%;
	color: #ffffff;
}
.main-img .main-txt .txt-box .item-img div p{
	font-weight: 900;
	font-size: 5vw;
	letter-spacing: 5px;
}
.main-img .main-txt .box-txt{
	position: relative;
	z-index: 2;
}
.main-img .main-txt .link-wrap{
	width: 80%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	gap: 100px;
}
.main-img .main-txt .link-wrap > div{
	width: calc(100% / 2 - 50px);
	max-width: 420px;
}
.main-img .main-txt .link-wrap a{
	display: block;
	padding: 20px;
	border: 5px solid #ffffff;
	border-radius: 100px;
	text-align: center;
	transition: ease 0.3s;
}
.main-img .main-txt .link-wrap a:hover{
	opacity: 0.5;
}
.main-img .main-txt .link-wrap a p{
	color: #ffffff;
}

.section01 {
	padding: 150px 50px;
	background-image: url("https://eco1.co.jp/system_panel/uploads/images/top-intro.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.section01 > div{
	background-color: #ffffff;
	padding: 50px;
	text-align: center;
	border-radius: 40px;
}

.section02 .box-wrap .box{
	position: relative;
}
.section02 .box-wrap .box .txt-box{
	width: 30%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 40px;
	border-radius: 40px;
}
.section02 .box-wrap .box:nth-of-type(odd) .txt-box{
	left: 5%;
}
.section02 .box-wrap .box:nth-of-type(even) .txt-box{
	right: 5%;
}
.section02 .box-wrap .box .img-box{
	width: 80%;
	overflow: hidden;
}
.section02 .box-wrap .box:nth-of-type(odd) .img-box{
	margin-left: 20%;
	border-radius: 40px 0 0 40px;
}
.section02 .box-wrap .box:nth-of-type(even) .img-box{
	border-radius: 0 40px 40px 0;
}
.section02 .box-wrap .box3 .img-box{
	background-color: #F2F2F2;
	padding: 100px 5%;
	padding-left: 20%;
}
.section02 .box-wrap .box3 .img-box img{
}

.section02 .box-wrap .box4 .item-wrap .item{
	border-bottom: 1px solid #004014;
	padding: 5px 0;
}
.section02 .box-wrap .box4 .item-wrap .item:first-of-type{
	border-top: 1px solid #004014;
}
.section02 .box-wrap .box4 .item-wrap .item h3{
	width: 80px;
	text-align: right;
}
.section02 .box-wrap .box4 .item-wrap .item > p,.section02 .box-wrap .box4 .item-wrap .item > div{
	width: calc(100% - 80px);
	box-sizing: border-box;
	padding-left: 30px;
}
.section02 .box-wrap .box4 .item-wrap .item  a p{
	color: #000000;
}

.section03 {
	padding: 150px 50px;
	background-image: url("https://eco1.co.jp/system_panel/uploads/images/footerlinks.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.section03 .flex{
	gap: 100px;
}
.section03 .flex .more{
	width: calc(50% - 50px);
	max-width: 550px;
}
.section03 .flex .more a{
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #ffffff;
}
.section03 .flex .more p{
	line-height: 1;
}
.section03 .flex .more p:first-of-type{
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 10px;
}
.section03 .flex .more p:last-of-type{
	font-size: 30px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.main-img .main-txt .link-wrap{
		width: 90%;
	}
	.section02 .box-wrap .box .txt-box{
		width: 50%;
		padding: 40px 30px;
		border-radius: 30px;
	}
	.section02 .box-wrap .box3 .img-box{
		background-color: #F2F2F2;
		padding-left: 40%;
	}
	.section03 .flex .more p:first-of-type{
		font-size: 36px;
	}
	.section03 .flex .more p:last-of-type{
		font-size: 20px;
	}
}
/* ---------- 1000px ~ ---------- */
@media screen and (max-width: 1000px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.main-img .main-txt .txt-box{
		padding-top: 25%;
	}
	.main-img .main-txt .link-wrap{
		gap: 50px;
	}
	.main-img .main-txt .link-wrap > div{
		width: calc(100% / 2 - 25px);
		max-width: 420px;
	}
	.section01{
		padding: 100px 50px;
	}
	
	.section02 .box-wrap .box .txt-box{
		position: static;
		transform: translateY(-100px);
		width: 60%;
		padding:40px 30px ;
		border-radius: 40px;
	}
	.section02 .box-wrap .box:nth-of-type(even) .txt-box{
		margin-left: 40%;
	}
	.section02 .box-wrap .box3 .img-box{
		background-color: #F2F2F2;
		padding: 50px 5% 100px;
	}
	.section02 .box-wrap .box3 .img-box{
		padding-bottom: 50px;
	}
	.section03{
		padding: 100px 50px;
	}
	.section03 .flex{
		gap: 50px;
	}
	.section03 .flex .more{
		width: calc(50% - 25px);
	}
	.section03 .flex .more p:first-of-type{
		font-size: 30px;
	}
	.section03 .flex .more p:last-of-type{
		font-size: 18px;
	}
	
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.main-img .main-txt .txt-box{
		padding-top: 50%;
	}
	.main-img .main-txt .txt-box .item-img{
		width: 95%;
	}
	.main-img .main-txt .link-wrap{
		gap: 30px;
	}
	.main-img .main-txt .link-wrap > div{
		width: 100%;
		max-width: 420px;
	}
	.main-img .main-txt .link-wrap a{
		border-width: 3px;
	}
	.section01{
		padding: 50px 30px;
	}
	.section01 > div{
		padding: 20px;
		border-radius: 20px;
	}
	
	.section02 .box-wrap .box .img-box{
		width: 90%;
	}
	.section02 .box-wrap .box:nth-of-type(odd) .img-box{
		margin-left: 10%;
		border-radius: 20px 0 0 20px
	}
	.section02 .box-wrap .box .txt-box{
		width: 90%;
		padding: 30px 20px;
		border-radius: 20px;
		transform: translateY(-50px);
	}
	.section02 .box-wrap .box:nth-of-type(even) .txt-box{
		margin-left: 10%;
	}
	.section02 .box-wrap .box4 .item-wrap .item h3,.section02 .box-wrap .box4 .item-wrap .item p{
		font-size: 12px;
	}
	.section02 .box-wrap .box4 .item-wrap .item h3{
		width: 70px;
	}
	.section02 .box-wrap .box4 .item-wrap .item > p,.section02 .box-wrap .box4 .item-wrap .item > div{
		width: calc(100% - 70px);
		padding-left: 20px;
	}
	
	.section03{
		padding: 50px 30px;
	}
	.section03 .flex{
		gap: 30px;
	}
	.section03 .flex .more{
		width: 90%;
	}
	.section03 .flex .more p:first-of-type{
		font-size: 24px;
	}
	.section03 .flex .more p:last-of-type{
		font-size: 16px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}