@charset "UTF-8";
/*//リノベーションページ専用　css///*/
.count_en{
	counter-reset: number 0;
}
.count_en-item::before{
	counter-increment: number 1;
	content: counter(number, upper-alpha) " ";
	display:block;
}

.renovation .renove_head{
	margin-bottom:45px;
}
/*//日本語？//*/
/* .renovation p{
	font-family:'Noto Sans JP', sans-serif;
	line-height:1.8;
} */
.second-renova-container{
	background:#F2EFEC;
}
.renovation_top .inner_box {
	padding: 0 20px;
}
.renovation .renove_sign {
	padding:40px 0 50px;
}
.renovation_top .common_btn{
	max-width:273px;
	width:100%;
	margin:auto;
}
.renovation .renove_sign .sign_list .sign_box {
	border:1px solid #fff;
	padding:15px 10px;
	position:relative;
}
.renovation .renove_sign .sign_list .sign_box::before {
	position: absolute;
	left: 10px;
	top: 15px;
	height: 30px;
	width: 30px;
	background: #9E9485;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 30px;
}
.renovation .renove_sign .sign_list .sign_box:not(:last-child){
	margin-bottom:10px;
}
.renovation .renove_sign .sign_list .sign_box .sign_box_inner{
	padding-left:40px;
}
.renovation .renove_sign .renove_sign_pic .flex-content{
	gap:25px;
}
.renovation .renove_sign .renove_sign_pic .count_en-item{
	width:calc(100% / 2 - 13px);
	position:relative;
}
.renovation .renove_sign .renove_sign_pic .count_en-item::before{
	position: absolute;
	right:0;
	top:0;
	height: 30px;
	width: 30px;
	background: #9E9485;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 30px;
}

.renove_ttl_box {
	background:#000;
	padding:20px 20px 20px 90px;
	position:relative;
}
.renove_ttl_box::before{
	content:"";
	display:block;
	position:absolute;
	left:20px;
	top:8px;
	width:57px;
	height:57px;
}
.renove_ttl_box.luxury_icon::before{
	background:url(../img/w_icon3.svg) no-repeat center;
	background-size:contain;
}
.renove_ttl_box.addfunction_icon::before{
	background:url(../img/w_icon2.svg) no-repeat center;
	background-size:contain;
}
.renove_ttl_box.color-scheme_icon::before{
	background:url(../img/w_icon1.svg) no-repeat center;
	background-size:contain;
}
.renove_ttl_box.factories_icon::before{
	background:url(../img/w_icon4.svg) no-repeat center;
	background-size:contain;
}
.luxury_section, .addfunction_section, .color-scheme_section {
	position:relative;
}
.luxury_section, .addfunction_section{
	margin-bottom: 80px;
}
.luxury_section::before, .color-scheme_section::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	right: 18%;
	top: 0;
	z-index: 0;
}
.addfunction_section::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top:0;
	left:18%;
	z-index: 0;
}

.renove_valuable {
	background: #F2EFEC;
	padding-bottom: 80px;
	padding-top:40px;
}
.renove_valuable h3{
	padding-bottom:40px;
	margin-right:40px;
}
.renove_valuable h3 span{
	display:inline-block;
}


.renove_valuable_flex{
	display: flex;
	justify-content: space-between;
	padding: 60px 0 90px;
	position:relative;
}

.renove_box_l{
	width: calc(50% + 81px);
	position: relative;
}
.renove_box_l_inner{
	margin-left: auto;
	max-width: 640px;
	padding-right: 40px;
}
.renove_box_r{
	margin-top: -90px;
	width: calc(50% + 40px);
}
.renove_box_r .pic_box{
	position: relative;
	max-width: 833px;
	width: 43.39vw;
	margin-left: auto;
}
.renove_box_r .pic_box::before {
	content: "";
	display: block;
	background: rgb(88, 86, 86);
	background: linear-gradient(180deg, rgba(88, 86, 86, 1) 0%, rgba(0, 0, 0, 1) 100%);
	position: absolute;
	left: -81px;
	top: 54px;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.renove_box_r .pic_box .pic {
	position: relative;
	z-index: 1;
}
.renove_box_r .pic_box .text{
	position:absolute;
	bottom:20px;
	right:0;
	z-index:2;
	background:#000;
	color:#fff;
	padding:7px 25px;
}
.renove_valuable_flex.reverse .renove_box_r .pic_box{
	margin-left: 0;
	margin-right: auto;
}
.renove_valuable_flex.reverse .renove_box_r .pic_box::before {
	right: -81px;
	left: inherit;
}
.renove_valuable_flex.reverse .renove_box_l_inner{
	margin-right: auto;
	margin-left: 0;
	padding-left: 40px;
}
.renove_valuable_flex.reverse .renove_box_l_inner{
	padding-left: 40px;
	padding-right:0;
}

.renove_in_pic ul{
	gap:15px 0;
}
.renove_in_pic li{
	width:calc(100% / 2 - 10px);
	position:relative;
}
.renove_in_pic li .pic_name {
	background: rgba(255,255,255,80%);
	max-width: 123px;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
}
.renove_factories{
	padding:80px 0 70px;
}
.renove_factories_box{
	align-items:center;
}
.renove_factories .renove_factories_box .text_box {
	margin-right: auto;
	max-width: 640px;
	padding-left: 40px;
	width: calc(100% - 50%);
}
.renove_factories .renove_factories_box .pic_box{
	width:50%;
}
.renovation_head_ttl{
	padding:20px 35px;
}
.renovation_head_ttl span {
	vertical-align: middle;
	display: inline-block;
	margin-right: 13px;
}

.renovation_luxury-design .slider__wrap .sub__wrap {
    overflow: hidden;
    padding: 0;
	max-width:1200px;
}
.renovation_luxury-design .slider__wrap .swiper-container{
	margin-bottom:20px;
}
.renovation_luxury-design .slider__wrap .thumb-list {
    display: grid;
    grid-template-columns:repeat(8,1fr);;
    gap: 10px;
}
.renovation_luxury-design .slider__wrap .thumb-list img{
	width:100%;
}

.before_after_head ul li,.before_after_inner .after .pic p{
	background:#000;
	padding:10px;
	text-align:center;
}
.before_after_inner .flex-content{
	position:relative;
}
.before_after_inner .flex-content::after{
	content:"";
	display:block;
	background:url(../img/renovation/before_after_arrow.svg) no-repeat;
	width:19px;
	height:40px;
	background-size:contain;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.before_after_head ul li,.before_after_inner .before, .before_after_inner .after {
	width:calc(100% / 2 - clamp(10px,2.7vw,40px));
}

.before_after_inner .after .pic{
	position:relative;
}
.before_after_inner .after .pic p{
	position:absolute;
	bottom:0;
	right:0;
}
.after_modal .modal_pic {
	margin: auto;
	text-align: center;
}

.skk_ldm_ttl {
	border-bottom: 1px solid #707070;
	padding-bottom: 15px;
}
.skk_ldm .common_btn {
	max-width: 400px;
}
.skk_ldm .common_btn::before{
	border-color:#fff;
}

.renovation_bottom_link{	
	position:relative;
	padding:0 0 30px;
}
.renovation_bottom_link_wrap{
	padding:30px 0;
	background:#333232;
}

.renovation_bottom_link ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px 0;
}
.renovation_bottom_link ul li {
	width: calc(100% / 4 - 10px);
	text-align: center;
}

.renovation_bottom_link ul li a {
	color: #fff;
	padding: 20px 10px;
	display: block;
	width: 100%;
	border: 1px solid #fff;
	box-sizing: border-box;
	position: relative;
	transition:.3s all;
}
.renovation_bottom_link ul li:hover a{
	background:#fff;
	color:#000;
}
.renovation_bottom_link ul li .is-active{
	background:#fff;
	color:#000;
}
.renovation_bottom_link ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.renovation_bottom_link ul li span::before{
	content:"";
	display:inline-block;
	width:35px;
	height:35px;
	margin-right:10px;
}

.luxury_Design_icon span::before{
	background:url(../img/w_icon3.svg) no-repeat;
	background-size:contain;
}
.luxury_Design_icon .is-active span::before{
	background:url(../img/b_icon3.svg) no-repeat;
	background-size:contain;
}
.luxury_Design_icon:hover a span::before{
	background:url(../img/b_icon3.svg) no-repeat;
	background-size:contain;
}

.add_function_icon span::before{
	background:url(../img/w_icon2.svg) no-repeat;
	background-size:contain;	
}
.add_function_icon .is-active span::before{
	background:url(../img/b_icon2.svg) no-repeat;
	background-size:contain;
}
.add_function_icon:hover a span::before{
	background:url(../img/b_icon2.svg) no-repeat;
	background-size:contain;
}

.color_scheme_icon span::before{
	background:url(../img/w_icon1.svg) no-repeat;
	background-size:contain;	
}
.color_scheme_icon .is-active span::before{
	background:url(../img/b_icon1.svg) no-repeat;
	background-size:contain;
}
.color_scheme_icon:hover a span::before{
	background:url(../img/b_icon1.svg) no-repeat;
	background-size:contain;
}

.fandw_icon span::before{
	background:url(../img/w_icon4.svg) no-repeat;
	background-size:contain;	
}
.fandw_icon .is-active span::before{
	background:url(../img/b_icon4.svg) no-repeat;
	background-size:contain;
}
.fandw_icon:hover a span::before{
	background:url(../img/b_icon4.svg) no-repeat;
	background-size:contain;
}

.renovation_addfanction .inner {
	padding: 30px;
}
.renovation_addfanction .r_sub__ttl{
	padding:10px;
}
.renovation_addfanction .banner_area{
	padding:25px 0;
}
.renovation_addfanction .before_after_inner .flex-content::after{
	content: "";
	display: block;    
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 43px 0 43px 16px;
	border-color: transparent transparent transparent #9E9485;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.renovation_addfanction .before-after-l{
	position:relative;
}
.renovation_addfanction .before-after-l::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 43px 0px 43px;
    border-color: #9E9485 transparent transparent transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.renovation_addfanction .before-after-l .before {
    margin-bottom: 50px;
}

.renovation_addfanction .features dl {
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	gap:10px 19px;
}
.renovation_addfanction .features dl:not(:last-child){
	margin-bottom:17px;
}
.renovation_addfanction .features dl dt{
	max-width:123px;
	width:100%;
	text-align: center;
}
.renovation_addfanction .features dl dt img {
	/*background: #fff;*/
	padding: 5px;
}
.renovation_addfanction .features dl dd{
	background:#fff;
	padding:13px 20px;
	width:calc(100% - 142px);
}
.renovation_addfanction .features .common_btn{
	max-width:100%;
	width:553px;
	margin:auto;
}
.renovation_addfanction .slide-img_wrap{
	position:relative;
}
.renovation_addfanction .slide-img_wrap .text{
	background:rgba(0,0,0,70%);
	padding:12px 20px;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.renovation_addfanction .slide-img_wrap .text p{
	color:#fff;
}

.renovation_addfanction .addFanction_link_wrap {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	position:relative;
	overflow:hidden;
}
.renovation_addfanction .addFanction_link_wrap::before {
	content: "";
	display: inline-block;
	background: url(../img/renovation/addFanction_link.svg) no-repeat;
	background-size: contain;
	width:clamp(100px,17vw,210px);
	height: clamp(100px,17vw,210px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.renovation_addfanction .addFanction_link_wrap .text{
	display:none;
}

.renovation_addfanction .addFanction_link_wrap .pic{
	width:50%;
	position: relative;
}
.renovation_addfanction .addFanction_link_wrap .pic:hover {
    opacity: 0.8;
}
.renovation_addfanction .addFanction_link_wrap .pic.is-active::before{
	content:"";
	display: block;
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.renovation_addfanction .addFanction_link_wrap .is-active .text {
	display: block;
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	font-size:clamp(14px,2.7vw,50px);
}
.renovation_addfanction .common_btn.arrow_r::before {
    border-color: #fff;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
}
.renovation_addfanction .common_btn.arrow_r:hover{
	color:#000;
	background:#ffff;
	border-color:#000;
}
.renovation_addfanction .common_btn.arrow_r:hover::before{
	border-color:#000;
}
.renovation_addfanction .anti-dirt_pic .in_pic{
	position:relative;
}
.renovation_addfanction .anti-dirt_pic .ttl{
	line-height:1.2;
	position:absolute;
/*	left:50px;
	bottom:97px;*/
	margin-bottom:0;
	bottom: 70%;
    right: 50px;
}
.renovation_addfanction .anti-dirt_pic .text {
    padding: 30px clamp(20px,2.6vw,50px);
}
.renovation_addfanction .link-btn.grid-list {
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    gap: 20px;
}
.renovation_addfanction .bg_ttl_cream {
    background: #f2efec;
    padding: 15px 20px 10px;
}
.border-ttl {
	position: relative;
	padding-left: 20px;
}
.border-ttl::before{
    content:"";
	display:block;
	height:2px;
	width:10px;
	background:#000;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}
.renovation_addfanction .in_wrap {
    padding: 0 20px;
}

.renovation_addfanction .middle_ttl{
	line-height:1.2;
}

/*//saving-energyt//*/
.saving-energy_box .bottom_arrow .renovation_fctories::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 100px 0px 100px;
    border-color: #9E9485 transparent transparent transparent;
    margin: 30px auto 0;
}
/*//anti-dirt//*/
.anti-dirt .ceramix .ceramix-grid-auto {
    display: flex;
    flex-wrap: wrap;
	justify-content:center;
    gap: 20px;
}
.anti-dirt .ceramix .ceramix-grid-auto .box_col1 {
    width: 320px;
}
.anti-dirt .ceramix .ceramix-grid-auto .box_col2 {
    width:460px;
}
.anti-dirt .hydrophilic_box p {
    text-align: center;
}
.anti-dirt .box_list-item{
	margin-top:30px;
}
.anti-dirt .triple_box .box_list-item{
	margin-top:0;
}
/*//anti-bacterial//*/
.anti-bacterial .ttl ,.anti-bacterial .local_sub-ttl{
    color: #0CD39A;
}
.anti-bacterial .local_sub-ttl {
    font-size: 30px;
}
.anti-bacterial .ttl span {
    font-size: 20px;
    display: block;
    color: #000;
    font-weight: 300;
    margin-top: 5px;
}

.factories_bottom_link_wrap ul{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap:10px 15px;
}
.factories_bottom_link_wrap ul li a{
	color:#fff;
	border:none;
	font-size:26px;
	font-weight:600;
	font-family:var(--font-serif);
}
.factories_bottom_link_wrap ul li a:hover{
	border:0;
}
.factories_bottom_link_wrap ul li a::before{
	border-color:#fff;
}

.roof_color a {
	background: #33a09a;
}
.roof_color_txt{
	color:#33a09a;
}

.ex-wall_color a {
	background: #758FC2;
}
.floor_color a {
	background: #966084;
}
.ci-wall_color a {
	background:#F37052;
}
.entrance_color a {
	background:#FAAF2B;
}
.m-surfaces_color a {
	background: #424475;
}
.factories_bottom_link_wrap ul li a.is-active{
	background:#000;
}
.renovation_fctories {
	padding-bottom:30px;
	margin-bottom:30px;
}
.renovation_fctories .text_inner{
	padding:5%;
}

.renovation_fctories .img-map_wrap {
	overflow-x: auto;
	margin: 0 auto;
	width: 98%;
}
.renovation_fctories .img-map_wrap .img-map-inner {
	padding-bottom: 30px;
	width: 1399px;
	margin: auto;
	overflow: hidden;
}

.color_ttl_wrap{
	display:flex;
	align-items:center;
}
.color_ttl_wrap .color_ttl{
	font-size:26px;
	font-family:var(--font-serif);
	font-weight:600;
	color:#fff;
	margin-right:35px;
	width:auto;
}
.color_ttl_wrap p{
	font-size:14px;
	font-weight:400;
	color:#fff;
}
.color_head_bg{
	padding:clamp(30px,6vw,100px) 0;
	margin-bottom:30px;
}
.color_head_bg .color_lead_ttl{
	font-size:40px;
	font-family:var(--font-serif);
	font-weight:bold;
	color:#fff;
	margin-bottom:20px;
}
.color_head_bg .color_lead_text{
	font-size:18px;
	color:#fff;
	font-weight:400;
}
.color_head_bg{
	height:100%;
	min-height:348px;
	width:100%;
}
.color_head_ttl{
	padding:10px 0;	
}
.renovation_fctories .btn_link {
    background: #ffff;
    padding: 20px 50px;
    display: flex;
	flex-wrap:wrap;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #000;
}

.renovation_fctories .btn_ttl_wrap {
    border-left: 10px solid #000;
    padding-left: 20px;
	width:calc(100% - 200px);
}

.renovation_fctories .btn_link:not(:last-child){
	margin-bottom:30px;
}

.renovation_fctories .link_ttl {
    font-size: clamp(30px,4.9vw,45px);
    font-weight: bold;
	line-height:1.2;
}
.renovation_fctories .btn_ttl_wrap .link_sub_ttl{
	font-size:16px;
	font-weight:400;
}

.renovation_fctories .btn_link .more_btn {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 2px 10px;
    max-width: 150px;
    width: 100%;
    display: inline-block;
    font-weight: 300;
	border:1px solid #fff;
	transition: all .3s ease-in;
}

.renovation_fctories .btn_link .more_btn span{
	display:block;
	position:relative;
}

.renovation_fctories .btn_link .more_btn span::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    right: 0;
    top: 50%;
    transition: all .3s ease-in;
}

.renovation_fctories .btn_link .more_btn:hover{
	background:#fff;
	color:#000;
	border:1px solid #000;
}

.renovation_fctories .btn_link .more_btn:hover span::before{
	border-color:#000;
	
}
.renovation_fctories .number_flex {
    display: flex;
    align-items: center;
	margin-bottom:20px;
}
.renovation_fctories .number_ttl .num {
    font-size: 70px;
    line-height: 0.8;
    font-weight: bold;
	margin-right: 10px;
}
.renovation_fctories .number_ttl h5 {
    font-size: 28px;
}
.renovation_fctories .text,.renovation_addfanction .text{
	line-height:1.6;
}


.renovation_fctories .page_ttlBox .label span{
	padding:5px 10px;
	font-size: 14px;
	background:#ddd;
	color:#fff;
	display: inline-block;
}
 
.renovation_fctories .page_ttlBox .page-ttl {
    font-size: clamp(30px,4.9vw,45px);
}

.renovation_fctories .product_box {
    padding: 20px 20px 17px;
    background: #ddd;
}
.renovation_fctories .product_box li {
    font-size: 14px;
}

.border-tbl{
	border-collapse: collapse;
}
.border-tbl th, .border-tbl td {
    padding: 10px 15px;
    border: 1px solid #333;
}

.text .red_bg {
    background: #ce323a;
    padding: 15px 0;
}

.text .blue_bg{
    background:#3F8DC2;
    padding: 15px 0;
}


/*roof*/
.roof_head .color_head_ttl{
	background:#33A09A;	
}
.roof_head .color_head_bg{
	background:url(../img/renovation/foof_color_bg.webp) no-repeat;
	background-size:cover;
}
.roof_link .btn_link,.roof_link .btn_ttl_wrap{
	border-color:#33A09A;
}
.roof_link .link_ttl,.roof_link .link_sub_ttl{
	color:#33A09A;
}

/*//Exterior_wall//*/
.exterior-wall_head .color_head_ttl{
	background:#758FC2;
}
.exterior-wall_head .color_head_bg{
	background:url(../img/renovation/exterior-wall_color_bg.webp) no-repeat;
	background-size:cover;
}
.exterior-wall_link .btn_link,.exterior-wall_link .btn_ttl_wrap{
	border-color:#758FC2;
}
.exterior-wall_link .link_ttl{
	color:#758FC2;
}
.ex_wall_color_txt{
	color:#758FC2;
	border-color:#758FC2;
}
.Exterior_wall_content .product_box {
    background: #D4DAED;
}
.Exterior_wall_content .text_inner{
	padding:0 20px;
}

.floor_head .color_head_ttl{
	background:#966084;
}
.floor_head  .color_head_bg{
	background:url(../img/renovation/floor_color_bg.webp) no-repeat;
	background-size:cover;
}
.floor_link .btn_link,.floor_link .btn_ttl_wrap{
	border-color:#966084;
}
.floor_link .link_ttl{
	color:#966084;
}
.floor_color_txt{
	border-color:#966084;
	color:#966084;
}
.floor_content .page_ttlBox .label span,.floor_content .product_box{
	background:#D5C5CF;
}

/*//ceiling-I-wall//*/
.ceiling-I-wall_head .color_head_ttl{
	background:#F37052;
}
.ceiling-I-wall_head .color_head_bg{
	background:url(../img/renovation/ceiling-I-wall_color_bg.webp) no-repeat;
	background-size:cover;
}
.ceiling-I-wall_head .color_ttl_wrap .color_ttl{
	width:27%;
}
.ceiling-I-wall_link .btn_link,.ceiling-I-wall_link .btn_ttl_wrap{
	border-color:#F37052;
}
.ceiling-I-wall_link .link_ttl{
	color:#F37052;
}
.ceilingI_color_txt{
	color:#F37052;
	border-color:#F37052;
}

.ceilingI_content .before_after_inner .flex-content::after{
	border-color: transparent transparent transparent #F37052;
}

/*//entrance//*/
.entrance_head .color_head_ttl{
	background:#FAAF2B;
}
.entrance_head .color_head_bg{
	background:url(../img/renovation/entrance_color_bg.webp) no-repeat;
	background-size:cover;
}
.entrance_link .btn_link,.entrance_link .btn_ttl_wrap{
	border-color:#FAAF2B;
}
.entrance_link .link_ttl{
	color:#FAAF2B;
}
.entrance_color_txt{
	color:#FAAF2B;
	border-color:#FAAF2B;
}
.entrance_content .before_after_inner .flex-content::after {
    border-color: transparent transparent transparent #FAAF2B;
}

/*//metal-surfaces//*/
.metal-surfaces_head .color_head_ttl{
	background:#424475;
}
.metal-surfaces_head .color_head_bg{
	background:url(../img/renovation/metal-surfaces_color_bg.webp) no-repeat;
	background-size:cover;
}
.metal-surfaces_link .btn_link,.metal-surfaces_link .btn_ttl_wrap{
	border-color:#424475;
}
.metal-surfaces_link .link_ttl{
	color:#424475;
}
.Metal_color_txt{
	border-color:#424475;
	color:#424475;
}

.Metal_content .before-after-l::after {
    border-color:#424475 transparent transparent transparent;
}

/*カラーシュミレーション*/
.color-scheme .link_banner {
	margin-bottom:25px;
}
.color-scheme .link_banner .box {
    position: relative;
	overflow:hidden;
}
.color-scheme .link_banner .link_banner_txt {
	text-align:center;
	font-size:20px;
	position:absolute;
	bottom:0;
	right:0;
	padding:4px 19px;
	background:#000;
}
.color-scheme-area {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-between;
	padding-bottom: 7px;
    overflow: hidden;
	max-height:560px;
}
.color-scheme-area .base-img {
    width: 77%;
}
.color-scheme-area .chang-img {
    width: 23%;
    background: #fff;
    padding: 10px;
}
.color-scheme-area .chang-tab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(59px, 1fr));
	gap: 10px;
	margin-bottom: 30px;
}
.color-scheme-area .chang-img .chang-tab .tab_item {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    background:#f2efec;
	padding: 5px 10px 3px;
	font-weight:600;
	cursor:pointer;
	transition-duration: .3s;
}
.color-scheme-area .chang-img .chang-tab .tab_item.active {
    background: #333232;
    color: #fff;
    border-radius: 25px;
}
.color-scheme-area .chang-img .chang-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 10px;
}
.color-scheme-area .chang-img .chang-colors .color_name{
	font-size:10px;
	font-weight:500;
	text-align:center;
}
.color-scheme-area .chang-img .tab_content{
	display:none;
	height:38%;
	overflow-y: auto;
}
.color-scheme-area .chang-img .tab_content.active{
	display:block;
}
.color-scheme-area .simu__result {
    position: relative;
    padding: 30%;
}
.color-scheme-area .simu__result::before{
	content:"";
	display:block;
	background:#a4946e;
	position:absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
}
.color-scheme-area .simu__result .change-parent img{
    transition-duration: .3s;
}
.color-scheme-area .simu__result>div {
	position: absolute;
	top: 0;
	left: 0;
}

.color-scheme-area .chang-colors input{
	display:none;
}
.color-scheme-area .chang-colors label {
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	height: 30px;
	border: 1px solid #ddd;
	transition:.3s all;
}

.color-scheme-area .chang-colors input:checked+label {
    border: 3px solid #000;
}

.saving-energy_box .half-box video,
.renovation_addfanction .half-box video
{
    width: 100%;
}

.saving-energy_box .three-box video {
    width: 100%;
    object-fit: cover;
	height: 115px;
}

.saving-energy_box .arrow::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20px 0px 20px;
    border-color: #ce323a transparent transparent transparent;
    margin: 5px auto 0;
}
.saving-energy_box .arrow_blue::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20px 0px 20px;
    border-color: #3f8dc2 transparent transparent transparent;
    margin: 5px auto 0;
}