.slide_tips{display: block; width: 90px; height: 110px; position: fixed;z-index: 99;right:5%;}
.project_main_visual{display: block; width: 100%; max-height:500px; background-image: url(/images/project/2023/deco/visual_bc.jpg);text-align: center;background-repeat: no-repeat; background-size: cover;position: relative;background-position: center 0px;position: relative;}
.project_main_visual img{display: block; max-width: 100%; max-height: 100%;margin: 0 auto; aspect-ratio:6/5}
.trendlogo{display: block;position: absolute;top:10px;}
.share {display: inline-block;position: absolute;left: 120px;top:15px;z-index: 99;}
.team{text-align: center;margin-top:20px;}
.content{display: block;width: 100%; background-image: url(/images/project/2023/deco/bc.jpg);position: relative;}
.porject_nav{display:block;text-align: center;padding-top:20px;}
.porject_nav ul li{display: inline-block;border-right: 1px solid #cec7bf;}
.porject_nav ul li a{display: block; padding: 0px 30px;font-size: 1.25em;}
.porject_nav ul li a:after{display: block; content: "chapter01";font-size: 15px;}
.porject_nav ul li+li a:after{content: "chapter02";}
.porject_nav ul li+li+li a:after{content: "chapter03";}
.porject_nav ul li+li+li+li a:after{content: "chapter04";}
.porject_nav ul li a:hover{color:#d6b98e; }

.chapter01{max-width: 1000px;margin: 0 auto;}
.chapter h2{display: block;width: 250px; height: 65px; background-image:url(/images/project/2023/deco/chapter01.png);margin: 0 auto;margin-top:80px;}
.chapter01 h2{ background-image:url(/images/project/2023/deco/chapter01.png);}
.chapter02 h2{ background-image:url(/images/project/2023/deco/chapter02.png);}
.chapter03 h2{ background-image:url(/images/project/2023/deco/chapter03.png);}
.chapter h3{font-size: 1.44em; font-weight: 500; text-align: center; margin-top:80px;}
.desc{display:block; max-width: 700px; padding: 15px 0px; border-top: 3px solid #000;border-bottom: 3px solid #000;text-align: center;margin: 0 auto;margin-top: 20px;position: relative;}
.desc:before{display: block; content: ""; width: 50px;height: 24px; background-image: url(/images/project/2023/deco/dialog_icon.png);position: absolute;top: -22px;right: 200px;}
.desc i{display: block; font-size: 1.25em; width:150px; height: 40px;line-height: 40px; border-radius: 50px; margin: 0 auto;background-color: #000; color: #fff;margin-bottom: 10px;font-weight: 500;}
.desc p{font-size: 18px;}

.board{display: block;width:70%;background-color:#d6b98e;margin: 0 auto; margin-top: 50px;padding: 25px;box-sizing: border-box;border-radius: 10px;}
.law_desc{display: block; background-color: #fff; padding: 15px 30px;padding-top: 60px; border-top: 3px solid #000; border-bottom: 1px solid #000;position: relative;box-sizing: border-box;}
.law_desc a{text-decoration: underline;}
.law_desc:before{display: block; content: "";width: 232px; height: 45px; background-image: url(/images/project/2023/deco/clip.png);position: absolute;right: 0;left: 0;  margin: auto;top:-20px;}
.chapter01 h4{display: block;text-align: center;font-size: 1.44em;font-weight: 500;margin-bottom:10px;}
.law_desc p{ line-height:2em;}
.attention{display:flex; background-color:#d6b98e; box-sizing: border-box; padding:10px 20px; margin-top: 20px; border-radius: 10px;}
.attention p{display: block;font-weight: 500;line-height: 1.6em;margin-top:5px;}
.attention img{display: block; width:91px; height: 65px;margin-right:15px;position: relative;}

.chapter01 table{display: table;width:70%; margin: 0 auto;text-align: center;margin-top: 20px;border-radius:10px;overflow: hidden;}
.chapter01 table tr th{width: 30%;background-color: #36426b;padding: 15px 5px;color: #fff;font-weight: 500;font-size: 1.25em;border-right: 1px solid #ddbf57;}
.chapter01 table tr th:last-child , .chapter01 table tr td:last-child{border:none;}
.chapter01 table tr td{padding: 15px 5px;border-right: 1px solid #ddbf57;}
.chapter01 table tr:nth-child(odd){background-color: #fff;}
.chapter01 table tr:nth-child(even){background-color: #d5d5d5;}

.videobox {position: relative;width: 100%;height: 0;padding-bottom: 56.25%; border-radius: 10px;overflow: hidden; border:3px solid #000;box-shadow: 8px 8px 0px #000;margin-top: 20px;}
.videobox iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.chapter02{display: block; max-width: 1200px;margin: 0 auto;margin-top:80px;border:30px solid #fdeee8;padding:0 20px 40px 20px;box-sizing: border-box;background-color:#fff;}
.chapter02 h2{background-image:url(/images/project/2023/deco/chapter02.png)}
.chapter02 h4{display: block; width: 280px;height: 100px;background-image:url(/images/project/2023/deco/title01.png);margin: 0 auto; margin-top: 70px;}
.chapter02 h4.wall{background-image:url(/images/project/2023/deco/title02.png);}
.chapter02 h4.floor{background-image:url(/images/project/2023/deco/title03.png);}
 .chapter02 h4.furniture{background-image:url(/images/project/2023/deco/title04.png);}
.example{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 30px;}
.example>div{width:32%;}
.example_img img{width: 100%;}
.example_desc{display: flex;width:90%;margin-left: 10px;}
.example_desc div img{display: block; width: 100px; height: 100px;position: relative;top: -50px;margin-right: 20px; }
.example_desc div+div{width:70%;height:80px; padding-left:20px;border-left: 1px solid #000;}
.example_desc div+div strong{display: block;font-size:1.25em; }
.example_desc div+div span{display: block;}

.chapter03{margin-top:80px;}

.coverage_chart{ display: block;max-width: 650px; background-image:url(/images/project/2023/deco/chart01.png);height:520px;margin: 0 auto;background-repeat: no-repeat;margin-top: 50px;background-size: contain;}

.deco_step{display: flex; max-width: 1200px; margin: 0 auto;flex-wrap: wrap;justify-content:center; text-align: center;margin-top: 50px;}
.deco_step div{display: block; width: 165px;height: 165px;border-radius: 10px; border:1px solid #000;background-color: #fff;font-weight: 500;padding: 10px;box-sizing: border-box;margin:0 15px;position: relative;}
.deco_step div:after{display: block;content: ""; border-color:transparent transparent transparent #000; border-width:15px;position: absolute; border-style: solid;right:-30px;top:70px;}
.deco_step div i{display: block; width: 100px; height: 30px; margin: 0 auto;border:1px solid #000;text-align: center; border-radius: 50px;line-height: 30px;position: relative; top: -25px;background-color: #aaaaaa;color: #fff;font-size: 14px;}
.deco_step div span{display: block; width: 65px; height: 65px; margin: 0 auto;position: relative;top:-15px;}
.deco_step div strong{display: block;font-size: 1.25em;line-height: 1.2em;position: relative;top:-5px;}
.deco_step div:nth-child(2) i{background-color: #f26d95;}
.deco_step div:nth-child(3) i{background-color: #ffa17c;}
.deco_step div:nth-child(4) i{background-color: #55ddc7;}
.deco_step div:nth-child(5) i{background-color: #ab9af4;}
.deco_step div:nth-child(6) i{background-color: #58bff0;}
.deco_step div:nth-child(6):after{border:none;}

.payment_chart{display: block;max-width:500px; background-image:url(/images/project/2023/deco/chart02.png);height:430px;margin: 0 auto;background-repeat: no-repeat;margin-top: 50px;background-size: contain;}

.commend_company{display:flex; max-width: 1200px; margin: 0 auto;flex-wrap: wrap;justify-content:center;}
.commend_company div{width:40%;margin:0px;text-align: center;margin:10px;}
.commend_company div img{max-width:100%;max-height:100%;}

.type_nav{display: block; text-align: center;margin-top:50px;}
.type_nav ul li{display: inline-block;margin: 0 20px;}
.type_nav ul li a{display: block; width: 140px; height: 140px; background-image: url(/images/project/2023/deco/nav_bg.png);line-height: 140px; color: #fff;font-size: 1.25em;font-weight: 500;background-size: contain;}
.type_nav ul li a:hover , .type_nav ul li a:focus{color: #000;}

.type_box{display: block; max-width: 1200px; margin: 0 auto; background-color: #fff;padding:120px; box-sizing: border-box;margin-top:80px;}
.type_box a:hover{color:#d2b68c;}
.type_content{display: flex;justify-content:space-between;flex-wrap: wrap;}
.type_content>div{width:47%;}

.type_content img , .type_content_under img{max-width: 100%; max-height: 100%;}
.type_desc{width: 100%;padding:20px;margin-right:30px;box-sizing: border-box;}
.type_content h4{display: block;width: 100%; font-size: 1.87em;font-weight: 500;height: 80px;margin-bottom: 30px; background-image: url(/images/project/2023/deco/pen.png);background-repeat: no-repeat; background-position: bottom left;}
.type_content h5{font-size: 1.62em;font-weight: 500; line-height: 2em;border-top: 1px solid #000;border-bottom: 1px solid #000;}
.type_content em{display: block; font-size: 1.25em;font-weight: 500;line-height: 2em; }
.type_content p{border-bottom: 1px solid #000;padding-bottom: 20px;}

.type_content_under{display: flex; justify-content:space-between;flex-wrap: wrap;margin-top: 40px;}
.type_content_under>div{width:47%;}
.type_content_under .type_img{width:100%;}
.type_content_under .type_desc{width: 100%;padding:20px;box-sizing: border-box;}

.project_main_visual.exam{max-height:530px;margin-top: 80px;}


@media (min-width:320px) and (max-width:1024px) {  
	.IsWeb .container.content{padding-top:50px;}
	.deco_step div{margin: 15px 20px;}
	.type_box{padding:50px;}
	.example_desc{width: 100%;}
}

@media (min-width:320px) and (max-width:820px) { 
	.slide_tips{display: none;}
	.chapter01 , .chapter03{padding:0 15px;}
	.board , .chapter01 table{width:100%;}
	.example{justify-content: center;}
	.example>div{width:60%;margin-bottom: 30px;}
	.commend_company div{width:60%;}
	.type_content>div{width: 70%;margin: 0 auto;}
	.type_content_under .type_img{text-align: center;}

}

@media (min-width:320px) and (max-width:640px) { 
	.porject_nav ul li a{padding: 0px 15px;}
	.example>div{width:75%;}
	.commend_company div{width:75%;}
	.type_content>div{width: 90%;}
}

@media (min-width:320px) and (max-width:480px) { 
	.porject_nav ul li{border-right:0;}
	.porject_nav ul li a{padding:10px 30px;border:1px solid #000;margin: 10px;}
	.chapter h2{margin-top: 50px;}
	.coverage_chart{background-image: url(/images/project/2023/deco/chart01_480.png);height: 480px;}
	.payment_chart{background-image: url(/images/project/2023/deco/chart02_480.png);height: 400px;}
	.chapter h3{margin-top: 50px;}
	.example>div{width:75%;}
	.example>div{width:100%;}
	.commend_company div{width:100%;}
	.type_content>div{width:100%;}
	.type_box{margin-top: 50px;}

}

@media (min-width:320px) and (max-width:414px) {
	.attention{flex-wrap: wrap;}
	.chapter02{border-width: 20px;}
	.type_box{padding: 20px;}
	.coverage_chart{height:400px;}
	.payment_chart{height: 320px;}
	.type_nav ul li a{width:120px; height: 120px; line-height: 120px;}
}

@media (min-width:320px) and (max-width:375px) {
	.coverage_chart{height:350px;}
	.payment_chart{height: 290px;}
	
	
}
@media (min-width:320px) and (max-width:320px) {
.chapter02 {border-width: 5px;padding: 10px;}
.example_desc{margin-left: 0;}
.coverage_chart{height:290px;}
.payment_chart{height: 250px;}
.type_nav ul li a{width:100px; height: 100px; line-height: 100px;font-size: 1em;}
}