@charset "utf-8";

body, html{margin: 0; padding: 0; height: 100%;}
.bl{display:block;}
.br_mo{white-space:nowrap; word-break: keep-all; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit;}
.cont{width: 100%; max-width: 1920px; padding: 0 50px; box-sizing: border-box; margin: 0 auto;}
.sec ~ .sec{padding-top:140px;}

#main{border: 0; padding: 0; display:flex; align-items: center; width:100vw; height: 100vh; background-color: #fff; background-position: center ; background-size: cover;}
#main .cont{display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 0 10%;}
#main .lt_wrap{padding-top:10px;}
#main .logo_main{width:100%; max-width: 430px; margin-top: 10px;}
#main .menu li{position: relative; margin-bottom: 30px;}
#main .menu li a {font-family:'Pretendard'; font-weight:900; font-size: 50px; color:#2f6e53;}
#main .menu li:nth-of-type(2) > a{cursor: initial;}
#main .menu li:nth-of-type(4) a{color:#84734a;}
#main .menu li a div{font-size: 26px; line-height: 1.2; margin-top: 5px;}
#main .menu li a div em{font-size: inherit; font-weight: 900; font-style: normal;}
#main .menu li .sub_menu{margin-top: 5px;}
#main .menu li .sub_menu a{display: block; font-size: 26px; line-height: 1.6; white-space: nowrap;}
#main .menu li .sub_menu a + a{margin-top: 2px;}
#main .ico_wrap{padding-top: 8px;}
#main .ico_wrap a{display: inline-block; width: 32px; vertical-align: middle;}
#main .ico_wrap a:nth-of-type(2){width: 44px;}
#main .ico_wrap a + a{margin-left:10px;}
#main .ico_wrap a img, #main .ico_wrap a img{display: block; width: 100%; margin-bottom:0;}

#about{padding-bottom: 200px; box-sizing: border-box;}
#about p{display: block; font-size: 22px; color: #222; font-weight: 700; line-height: 2.4;}
#about > .cont{padding-top:253px;}
#about nav.navi{height:253px; position: fixed; z-index:1; top: 0; left: 0; width: 100%; background:#fff; padding-top:100px; padding-bottom: 40px; box-sizing:border-box;}
#about nav.navi .logo{display:block; width:210px; margin-bottom: 40px;}
#about nav.navi .logo img{display:block; width:100%;}
#about nav.navi .navi{display: flex; gap: 0 30px;}
#about nav.navi .navi li{font-size: 20px; color: #86744b; font-weight: 700;}
#about nav.navi .navi li a{display: block; font-size: inherit; color: inherit; font-weight: inherit;}
#about .tit{display: block; font-size: 41px; color: #2f6e53; font-weight: 900; line-height:1.8; margin-bottom: 20px;}
#about .tit.green{color: #5f8d5a; margin-bottom:0;}
#about .tit.green + .tit_sub{margin-top:0;}
#about .tit_s{display: block; font-size: 24px; color: #2f6e53; font-weight: 700; line-height:1.8; margin-top: 30px; margin-bottom: 10px;}
#about .tit_s strong{font-size: inherit; color: inherit; font-weight: 800; line-height:inherit;}
#about .tit_s.green{font-size:26px; color:#5f8d5a;}
#about .tit_s.green .sm{font-size: 20px;}
#about .tit_s.green + p{line-height:1.8;}
#about .tit_sub{display: block; font-size: 28px; color: #86744b; font-weight: 800; line-height:1.8; margin-top: 20px; margin-bottom: 20px;}
#about .tit_sub strong{font-size: inherit; color: inherit; font-weight: inherit; line-height:inherit;}
#about .img_w100p{display: block; width:100%; margin-top:50px; margin-bottom:80px;}
#about .img_ecovadis{display: block; width: 315px; margin-top: 60px; margin-bottom: 60px;}

.dl_row{display: flex; align-items: flex-start; margin-top: 60px;}
.dl_row dt{width: 300px; font-size: 28px; color: #2f6e53; font-weight: 700; line-height: 1.2;}
.dl_row dt.green{color:#5f8d5a;}
.dl_row dd{width: calc(100% - 300px); font-size: 22px; color: #222; font-weight: 700; line-height: 1.8; word-break: keep-all;}
.dl_row.tw380 dt{width: 380px;}
.dl_row.tw380 dd{width: calc(100% - 380px);}
.dl_row.tw250 dt{width: 250px;}
.dl_row.tw250 dd{width: calc(100% - 250px);}

.img_list{display: flex; gap: 0 15px; margin-top: 40px;}
.img_list img{width: calc((100% - 45px) / 4); object-fit: cover;}
.img_list img.line{border: 2px solid #ddd; box-sizing: border-box;}
.img_list.type_02 img{width: calc(20% - 15px);}
.img_list.type_02 img:first-child{width: 40%;}
.img_list.type_03{gap: 0 110px; align-items: center; margin-bottom: 50px;}
.img_list.type_03 img:first-child{width: 250px;}
.img_list.type_03 img:nth-child(2){width: 220px;}

footer .inner{display: flex; gap: 0 5%; border-top: 1px solid #2f6e53; border-bottom: 1px solid #2f6e53; padding: 50px 16px 200px 16px; box-sizing: border-box; margin-top: 200px;}
footer .inner .title{display: block; font-size: 26px; color: #2f6e53; font-weight: 900; line-height: 1.8; margin-bottom:10px;}
footer .inner .box{width:30%}
footer .inner .box ul li{display: block; font-size: 16px; color: #2f6e53; font-weight: 700; line-height: 1.8; word-break: break-all;}
footer .inner .box ul li a{display: block; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit;}
footer .inner .box ul li ~ li{margin-top:10px;}
footer .inner .box ul li .ico_wrap{display: flex; gap: 0 10px; padding-top:5px;}
footer .inner .box ul li .ico_wrap a img{display: block; width:auto; height:24px;}
footer .copy{font-size: 15px; color: #2f6e53; font-weight: 500; padding-left: 16px; margin-top: 20px;}

@media screen and (max-width:1250px) {
	#main .cont{flex-direction: column-reverse; margin: 0;}
	#main .lt_wrap{padding-top:0;}
	#main .logo_main{max-width: clamp(230px, 28vw, 350px); margin-top: 0; margin-bottom: 40px;}
	#main .menu li{margin-bottom:clamp(15px, 3vw, 22px);}
	#main .menu li a{font-size: clamp(28px, 3.5vw, 50px);}
	#main .menu li a div, #main .menu li .sub_menu a{font-size: clamp(16px, 1.92vw, 26px);}
	#main .ico_wrap a + a{margin-left:5px;}
}

@media screen and (max-width:1024px) {
	br.br_pc{display:none;}
	.cont{padding:0 4.9vw;}
	.sec ~ .sec{padding-top: clamp(50px, 13.7vw, 140px);}
	#about .tit{font-size:clamp(22px, 4vw, 41px); margin-bottom:clamp(10px, 2vw, 20px);}
	#about .tit_sub{font-size:clamp(15px, 2.73vw, 28px); margin-top: clamp(10px, 2vw, 20px); margin-bottom: clamp(10px, 2vw, 20px);}
	#about .tit_s{font-size: clamp(14px, 2.34vw, 22px); margin-top: clamp(12px, 2.95vw, 30px); margin-bottom: clamp(5px, 1vw, 10px);}
	#about .tit_s.green{font-size: clamp(16px, 2.54vw, 26px);}
	#about .tit_s.green .sm{font-size: clamp(12px, 1.95vw, 20px);}
	#about p{font-size:clamp(13px, 2.15vw, 22px);}
	#about .img_w100p{margin-top: clamp(20px, 4.9vw, 50px); margin-bottom: clamp(30px, 7.8vw, 80px);}
	#about .img_ecovadis{margin-top: clamp(24px, 5.8vw, 60px); margin-bottom: clamp(24px, 5.8vw, 60px);}
	.img_list{margin-top: clamp(20px, 4.2vw, 40px);}
	.img_list.type_03{gap: 0 10vw; margin-bottom: clamp(20px, 4.9vw, 50px);}
	.dl_row{margin-top:clamp(24px, 5.8vw, 60px);}
	.dl_row dt{width:33%; font-size:clamp(13px, 2.73vw, 28px); padding-top:2px; box-sizing:border-box;}
	.dl_row dd{width:67%; font-size: clamp(12px, 2.34vw, 22px); padding-left:2%; box-sizing:border-box;}
	.dl_row.tw380 dt{width:35%;}
	.dl_row.tw380 dd{width:65%;}
	.dl_row.tw250 dt{width:28%;}
	.dl_row.tw250 dd{width:72%;}

	footer .inner{padding: clamp(20px, 4.9vw, 50px) 1.56vw clamp(80px, 19.55vw, 200px) 1.56vw; margin-top: clamp(80px, 19.55vw, 200px);}
	footer .inner .title{font-size: clamp(16px, 2.54vw, 26px);}
	footer .inner .box ul li{font-size: clamp(12px, 1.56vw, 16px);}
	footer .inner .box ul li .ico_wrap a img{height: clamp(20px, 2.35vw, 24px);}
	footer .copy{font-size: clamp(12px, 1.46vw, 15px); padding-left: 1.56vw; margin-top: clamp(10px, 2vw, 20px);}
}

@media screen and (max-width:760px) {
	#main .menu li .sub_menu{top:12px; left:350px;}
	#about p{line-height:2;}
	#about .tit, #about .tit_sub{line-height:1.5;}
	#about > .cont{padding-top: 26vw;}
	#about nav.navi{height: 25vw; padding-top:50px; padding-bottom:20px;}
	#about nav.navi .logo{width:clamp(145px, 27.64vw, 210px); margin-bottom: clamp(20px, 4.2vw, 40px);}
	#about nav.navi .navi{gap: 0 clamp(16px, 3.95vw, 30px);}
	#about nav.navi .navi li{font-size:clamp(14px, 2.63vw, 20px);}
	#about .img_ecovadis{width: 100%; max-width: 230px;}
	.img_list{gap: 0 10px;}
	.img_list img{width: calc((100% - 30px) / 4);}
	.img_list.type_02 img{width: calc(20% - 10px);}
}

@media screen and (max-width:600px) {
	#main .cont{margin-top:-8%;}
	#about > .cont{padding-top: 140px;}
	#about nav.navi{height: 130px; padding-top:40px;}
	.img_list.type_03{gap: 0 11%;}
	.img_list.type_03 img:first-child{width: 47%;}
	.img_list.type_03 img:nth-child(2){width: 41%;}
	footer .inner{gap: 0 2%;}
	footer .inner .box:first-child{width: 33%;}
	footer .inner .box:nth-child(2){width: 33%;}
	footer .inner .box:last-child{width: 30%;}
}

@media screen and (max-width:400px) {
	.br_mo{display:block;}
}