/* nav */
@media screen and (max-width:900px){
	html.fixed,
	html.fixed body{ height: 100%; overflow: hidden;}
	
	.nav_box{ position: fixed; top: 100vh; bottom: initial; width: 100%; height: 0; z-index: 9999; transition: .6s ease-in-out;}
	.nav_box.fixed{ top: 0px;}
	.nav_box .shadow_nav_btn{ width: 46px; aspect-ratio: 1 / 1; background-color: var(--color__green); position: absolute; top: -50px; left: 5px; z-index: 1; padding: 2px; box-sizing: border-box;}
	.nav_box .nav_btn{ width: 100%; aspect-ratio: 1 / 1; margin: auto; background-color: var(--color__black); position: relative; clip-path: polygon(0% 0%, 75% 0%, 100% 25%, 100% 100%, 0% 100%); transition: .3s ease-in-out;}
	.nav_box .nav_btn::before{ content: ""; width: 20px; height: 2px; background-color: var(--color__green); position: absolute; top: 15px; left: 0; right: 0; margin: auto; transition: .3s ease-in-out;}
	.nav_box .nav_btn::after{ content: ""; width: 20px; height: 2px; background-color: var(--color__green); position: absolute; bottom: 15px; left: 0; right: 0; margin: auto; transition: .3s ease-in-out;}
	.nav_box .nav_btn.active::before{ transform: rotate(-30deg); top: 20px;}
	.nav_box .nav_btn.active::after{ transform: rotate(30deg); bottom: 20px;}
	.nav_box.fixed .shadow_nav_btn{ top: 5px;}
	.nav_box .nav{ width: 100%; height: 100vh; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: absolute; top: -100vh; left: 0; margin-left: 0; transition: .1s ease-in-out; transition-property: opacity; opacity: 0; visibility: hidden; }
	.nav_box .nav.active{ opacity: 1; visibility: visible;}
	.nav_box.fixed .nav{ top: 0; overflow: auto; -webkit-overflow-scrolling: touch; position: fixed;}
	.nav_box .nav .nav_bg{ background-color: rgba(0, 0, 0, 0.6);}
	.nav_box .nav ul{ max-width: 80%; display: block; padding: 0;}
	.nav_box .nav ul li{ padding: 10px 0; box-sizing: border-box;}
	.nav_box .nav ul li:nth-child(1){ border-top: 1px solid var(--color__black);}
	.nav_box .nav ul li:nth-child(even){ border-top: 1px solid var(--color__black); border-bottom: 1px solid var(--color__black); box-sizing: border-box;}
	.nav_box .nav ul li a{ font-size: 22px; text-align: center; display: block;}
	.nav_box .nav ul li.btn a{ font-size: 18px !important; clip-path: polygon(9% 0%, 100% 0px, 100% 75%, 100% 100%, 0px 100%, 0% 35%);}
	@keyframes sp_menu_anime{
	  0%{ left: -100%;}
	  100%{ left: 0%;}
	}
}


/* product_area */
@media screen and (max-width:1140px){
	.product_area .box .list-box{ width: 49%;}
	.product_area .box .list-box li .text{ padding: 15px;}
	.product_area .box .list-box li .text .title{ font-size: 14px; max-width: 130px;}
	.product_area .box .list-box li .text .detail{ font-size: 14px; max-width: calc(100% - 130px);}
	.product_area .box .list-box li .line{ width: 120px; height: 40px;}
}
@media screen and (max-width:880px){
	.product_area .box{ display: block;}
	.product_area .box .list-box{ width: 100%;}
	.product_area .box .list-box li:nth-child(2n){ margin: 10px 0px;}
	.product_area .box .list-box li .line{ top: -2px; left: -2px;}
	.product_area .box .list-box li .text{ display: block; padding: 15px 20px;}
	.product_area .box .list-box li .text .title{ max-width: 100%; padding-left: 0; font-size: 12px; color: var(--color__green);}
	.product_area .box .list-box li .text .title br{ display: none;}
	.product_area .box .list-box li .text .detail{ max-width: 100%; font-size: 12px;}
}


footer{ padding: 30px 20px 160px;}
footer .wrap{ display: flex; flex-direction: column;}
footer .wrap .left{ margin: 40px auto auto; order: 2;}
footer .wrap .right{ margin: auto auto; order: 1; max-width: 520px;}
footer .wrap .right p.title{ text-align: center;}
footer .wrap .right ul{ display: flex; justify-content: space-around; align-items: center;}
footer .wrap .right ul li{ width: auto; display: inline-block; text-align: center;}
footer #copy{ margin-top: 30px;}

#footer_link{ max-width: 300px;}