@charset "UTF-8";
@media screen and (min-width: 768px),print {

#reform-renovation main{ width: 100%; margin: 0; position: relative; }
#reform-renovation .seo_bread_list{ max-width: 1100px; padding: 20px 0 24px; font-size: 14px; letter-spacing: 1.4px; }
#reform-renovation article{ color: #000; }
#reform-renovation .sp{ display: none; }

/* 見出し（共通） */
#reform-renovation .sec-head{ text-align: center; }
#reform-renovation .sec-head .en{ font-size: 20px; line-height: 30px; letter-spacing: 1px; }
#reform-renovation .sec-head .ttl,
#reform-renovation .cta-head .ttl{ font-size: 32px; font-weight: 600; line-height: 52px; letter-spacing: 1.6px; margin-top: -3px; }
#reform-renovation .sec-head .ttl span,
#reform-renovation .cta-head .ttl span{ display: inline-block; position: relative; z-index: 0; padding: 0 42px; }
#reform-renovation .sec-head .ttl span::after,
#reform-renovation .cta-head .ttl span::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 1px; z-index: -1; height: 24px; border-radius: 12px; background: #FEF57F; }
#reform-renovation .sec-head .txt{ display: inline-block; font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.8px; text-align: left; margin-top: 4px; }

/* FV */
#reno-fv{ width: 1200px; margin: 0 auto; }
#reno-fv .fv-pic{ position: relative; width: 1200px; height: 407px; overflow: hidden; }
#reno-fv .fv-pic img{ display: block; width: 1200px; height: 407px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-fv .fv-pic::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #454443; opacity: 0.606; }
#reno-fv .fv-txt{ position: absolute; top: 136px; left: 0; z-index: 1; width: 100%; color: #fff; text-align: center; }
#reno-fv .fv-txt .en{ font-size: 18px; line-height: 24px; letter-spacing: 0.9px; }
#reno-fv .fv-txt .catch{ font-weight: 600; }
#reno-fv .fv-txt .catch .l1{ display: block; font-size: 36px; line-height: 44px; margin-top: 15px; }
#reno-fv .fv-txt .catch .l2{ display: block; font-size: 27px; line-height: 36px; margin-top: 2px; }
#reno-fv .lead{ font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.8px; text-align: center; margin-top: 11px; }

/* 3つのポイント */
#reno-point{ width: 1200px; margin: 85px auto 0; }
#reno-point .point-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#reno-point .point-list li{ position: relative; width: 330px; height: 220px; margin: 55px 25px 0; background: #EDEDED; text-align: center; }
#reno-point .point-list li::before{ content: ''; position: absolute; top: -55px; left: 113px; width: 103px; height: 103px; border-radius: 50%; background: #EDEDED; }
#reno-point .point-list li::after{ content: ''; position: absolute; top: -10px; left: -10px; width: 40px; height: 40px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #FDEC01 calc(50% - 1px), #FDEC01 calc(50% + 1px), transparent calc(50% + 1px)); }
#reno-point .point-list .num{ position: absolute; top: -36px; left: 0; width: 100%; font-size: 30px; font-weight: bold; line-height: 30px; letter-spacing: 1.5px; color: #0D0D0D; }
#reno-point .point-list .icon{ position: relative; padding-top: 15px; }
#reno-point .point-list .icon img{ display: block; width: 120px; height: 120px; margin: 0 auto; }
#reno-point .point-list .ttl{ position: relative; font-size: 25px; font-weight: 600; line-height: 36px; letter-spacing: 1.25px; margin-top: -5px; }
#reno-point .point-list .sub{ position: relative; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 1px; }
#reno-point .note{ font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.8px; text-align: center; margin-top: 12px; }

/* ABOUT */
#reno-about{ width: 1200px; margin: 94px auto 0; }
#reno-about .about-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 50px; }
#reno-about .box{ position: relative; width: 580px; height: 300px; background: #E8E3CF; padding: 105px 0 0; }
#reno-about .box::before{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px dashed #707070; }
#reno-about .box-ttl{ position: absolute; top: -14px; left: 84px; width: 412px; height: 86px; background: #fff; border: 1px solid #707070; font-size: 30px; font-weight: 600; line-height: 84px; letter-spacing: 1.5px; text-align: center; }
#reno-about .box-in{ position: relative; width: 410px; margin: 0 auto; text-align: center; }
#reno-about .box .catch{ display: inline-block; font-size: 20px; font-weight: bold; line-height: 30px; letter-spacing: 1px; border-bottom: 1px solid #707070; padding: 0 0 4px; }
#reno-about .box .txt{ font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.8px; text-align: left; margin-top: 8px; }
#reno-about .box .arrow{ position: absolute; left: 255px; bottom: -26px; z-index: 1; width: 70px; height: 70px; border-radius: 50%; border: 1px solid #000; background: #fff; }
#reno-about .box .arrow::after{ content: ''; position: absolute; top: 25px; left: 29px; width: 10px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#reno-about .box .arrow span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#reno-about .box .arrow:hover{ opacity: 0.7; }

/* RENOVATION */
#reno-renovation{ width: 1200px; margin: 121px auto 0; }
#reno-renovation .reno-box{ position: relative; background: #fff; border: 1px solid #707070; box-shadow: 0 3px 6px rgba(0,0,0,0.16); margin-top: 50px; padding-bottom: 50px; }
#reno-renovation .sec-head + .reno-box{ margin-top: 19px; }
#reno-renovation .box-head{ position: relative; margin: 0 100px; padding: 42px 0 7px 100px; border-bottom: 1px solid #707070; }
#reno-renovation .box-head .num{ position: absolute; top: 55px; left: 2px; width: 68px; height: 68px; background: #FDEC01; font-size: 30px; font-weight: bold; line-height: 68px; letter-spacing: 1.5px; text-align: center; }
#reno-renovation .box-head .ttl{ font-size: 40px; font-weight: 600; line-height: 56px; letter-spacing: 2px; }
#reno-renovation .box-head .sub{ font-size: 20px; font-weight: 500; line-height: 30px; letter-spacing: 1px; margin-top: 7px; }
#reno-renovation .row{ display: -ms-grid; display: grid; -ms-grid-columns: 380px 50px 370px; grid-template-columns: 380px 370px; -webkit-column-gap: 50px; column-gap: 50px; grid-template-rows: auto 1fr; width: 800px; margin: 46px 0 0 200px; }
#reno-renovation .row + .row{ margin-top: 52px; }
#reno-renovation .row .ttl{ grid-column: 2; grid-row: 1; font-size: 28px; font-weight: 600; line-height: 46px; letter-spacing: 1.4px; margin-top: 24px; }
#reno-renovation .row .pic{ grid-column: 1; grid-row: 1 / 3; }
#reno-renovation .row .pic img{ display: block; width: 380px; height: 253px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-renovation .row .txt{ grid-column: 2; grid-row: 2; font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: 0.8px; margin-top: 2px; }
#reno-renovation .rev .row{ grid-template-columns: 370px 380px; }
#reno-renovation .rev .row .ttl,
#reno-renovation .rev .row .txt{ grid-column: 1; }
#reno-renovation .rev .row .pic{ grid-column: 2; }

#reno-renovation .both{ width: 800px; margin: 90px auto 0; }
#reno-renovation .both a{ display: block; color: #000; }
#reno-renovation .both a:hover{ opacity: 0.8; }
#reno-renovation .both-pic{ position: relative; display: block; height: 217px; overflow: hidden; }
#reno-renovation .both-pic img{ display: block; width: 800px; height: 217px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-renovation .both-pic::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(49,49,49,0.8078) 43.35%, rgba(255,255,255,0) 100%); opacity: 0.704; }
#reno-renovation .both-txt{ position: absolute; top: 50px; left: 0; z-index: 1; width: 100%; color: #fff; text-align: center; }
#reno-renovation .both-txt .t1{ position: relative; display: block; font-size: 30px; font-weight: 500; line-height: 38px; letter-spacing: 1.5px; padding-bottom: 8px; }
#reno-renovation .both-txt .t1::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 485px; margin-left: -242px; border-bottom: 1px solid #fff; }
#reno-renovation .both-txt .t2{ display: block; font-size: 33px; font-weight: 600; line-height: 51px; letter-spacing: 1.65px; margin-top: 6px; }
#reno-renovation .both-txt .t2 .x{ position: relative; display: inline-block; width: 16px; height: 16px; margin: 0 4px; vertical-align: middle; }
#reno-renovation .both-txt .t2 .x::before,
#reno-renovation .both-txt .t2 .x::after{ content: ''; position: absolute; top: 7px; left: -3px; width: 22px; border-top: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#reno-renovation .both-txt .t2 .x::after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#reno-renovation .both-btn{ display: block; height: 63px; background: #F5F5F5; font-size: 23px; font-weight: bold; line-height: 63px; letter-spacing: 1.15px; text-align: center; text-decoration: underline; }

/* REFORM */
#reno-reform{ background: #EFEFEF; margin-top: 90px; padding: 83px 0 70px; }
#reno-reform .sec-head .txt{ text-align: center; }
#reno-reform .reform-list{ display: -ms-grid; display: grid; -ms-grid-columns: 366px 20px 366px 20px 366px; grid-template-columns: repeat(3, 366px); gap: 20px; -webkit-box-pack: center; justify-content: center; margin-top: 30px; }
#reno-reform .reform-list li{ position: relative; height: 228px; overflow: hidden; }
#reno-reform .reform-list li img{ display: block; width: 366px; height: 228px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-reform .reform-list li::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
#reno-reform .reform-list .txt{ position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; color: #fff; font-size: 23px; font-weight: 500; line-height: 46px; letter-spacing: 1.15px; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

/* STRENGTH */
#reno-strength{ margin-top: 160px; }
#reno-strength .inner-Box{ width: 1200px; margin: 0 auto; background: #E8E3CF; padding: 61px 0 50px; }
#reno-strength .sec-head .txt{ text-align: center; }
#reno-strength .strength-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 790px; margin: 16px auto 0; }
#reno-strength .strength-list li{ position: relative; width: 360px; padding: 30px 0 0 30px; margin-bottom: 42px; }
#reno-strength .strength-list li:nth-child(2n){ margin-left: 70px; }
#reno-strength .strength-list li:nth-last-child(-n+2){ margin-bottom: 0; }
#reno-strength .strength-list .num{ position: absolute; top: 0; left: 0; z-index: 2; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #707070; background: #fff; font-size: 20px; font-weight: bold; line-height: 20px; letter-spacing: 1px; text-align: center; padding-top: 7px; }
#reno-strength .strength-list .num span{ display: block; font-size: 14px; line-height: 16px; letter-spacing: 0.7px; }
#reno-strength .strength-list .card{ position: relative; width: 330px; height: 200px; border-radius: 15px; overflow: hidden; }
#reno-strength .strength-list .card img{ display: block; width: 330px; height: 200px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-strength .strength-list .card::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #0D0D0D 100%); opacity: 0.8046; }
#reno-strength .strength-list .card .ttl{ position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; color: #fff; font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: 1px; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#reno-strength .strength-list .txt{ font-size: 18px; font-weight: 500; line-height: 25px; letter-spacing: 0.9px; margin-top: 6px; white-space: nowrap; }
#reno-strength .btn{ width: 428px; margin: 44px auto 0; }
#reno-strength .btn a{ display: block; height: 56px; border-radius: 28px; background: #fff; color: #000; font-size: 20px; font-weight: bold; line-height: 56px; letter-spacing: 1px; text-align: center; }
#reno-strength .btn a:hover{ opacity: 0.7; }

/* 施工事例 */
#reno-works{ margin-top: 70px; }
#reno-works .inner-Box{ width: 1200px; margin: 0 auto; background: #EFEFEF; padding: 51px 0 50px; }
#reno-works .sec-head .ttl span{ padding: 0 22px; }
#reno-works .sec-head .ttl span::after{ height: 20px; border-radius: 10px; bottom: 4px; }
#reno-works .works-list{ display: -webkit-box; display: -ms-flexbox; display: flex; width: 1080px; margin: 24px auto 0; }
#reno-works .works-list li{ width: 267px; margin-right: 4px; }
#reno-works .works-list li:last-child{ margin-right: 0; }
#reno-works .works-list a{ display: block; color: #1A1A1A; }
#reno-works .works-list a:hover{ opacity: 0.8; }
#reno-works .works-list .pic img{ display: block; width: 267px; height: 195px; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-works .works-list .txt{ font-size: 14px; font-weight: 500; line-height: 21px; text-align: center; margin-top: 5px; }
#reno-works .btn{ width: 320px; margin: 64px auto 0; }
#reno-works .btn a{ position: relative; display: block; height: 60px; border-radius: 30px; border: 1px solid #1A1A1A; background: #F2F2F2; color: #000; font-size: 16px; line-height: 58px; letter-spacing: 0.8px; text-align: center; }
#reno-works .btn a::after{ content: ''; position: absolute; top: 50%; right: 28px; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #1A1A1A; border-right: 1px solid #1A1A1A; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#reno-works .btn a:hover{ opacity: 0.7; }

/* 相談フォーム */
#reform-renovation .cta-head{ margin-top: 109px; text-align: center; }
#reform-renovation .cta-head .txt{ font-size: 20px; font-weight: 500; line-height: 34px; letter-spacing: 1px; margin-top: 3px; }
#reform-renovation .form-Box{ width: 1280px!important; margin: 24px auto 100px; }

/* 右固定ボタン */
#reform-renovation .reno-fix{ position: fixed; top: 50%; right: 0; z-index: 90; margin-top: -179px; }
#reform-renovation .reno-fix a{ display: block; width: 94px; height: 358px; background: #FDEC01; border: 1px solid #707070; color: #000; font-size: 16px; font-weight: 500; line-height: 92px; letter-spacing: 16px; padding-top: 35px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#reform-renovation .reno-fix a:hover{ opacity: 0.8; }

}
@media screen and (max-width: 767px) {

#reform-renovation main{ width: 100%; margin: 0; position: relative; }
#reform-renovation .seo_bread_list{ display: none; }
#reform-renovation article{ color: #000; }
#reform-renovation .pc{ display: none; }

/* 見出し（共通） */
#reform-renovation .sec-head{ text-align: center; }
#reform-renovation .sec-head .en{ font-size: 4.35vw; line-height: 1.5; letter-spacing: 0.2vw; }
#reform-renovation .sec-head .ttl,
#reform-renovation .cta-head .ttl{ font-size: 5.8vw; font-weight: 600; line-height: 7.25vw; letter-spacing: 0.3vw; margin-top: 1vw; }
#reform-renovation .sec-head .ttl span,
#reform-renovation .cta-head .ttl span{ display: inline-block; position: relative; z-index: 0; width: 86.96vw; }
#reform-renovation .sec-head .ttl span::after,
#reform-renovation .cta-head .ttl span::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 5.8vw; border-radius: 2.9vw; background: #FEF57F; }
#reform-renovation .sec-head .txt{ font-size: 3.86vw; font-weight: 500; line-height: 7.25vw; letter-spacing: 0.2vw; text-align: left; margin: 3vw 9.2vw 0; }

/* FV */
#reno-fv .fv-pic{ position: relative; height: 89.4vw; overflow: hidden; margin-top: -4%; }
#reno-fv .fv-pic img{ display: block; width: 100%; height: 89.4vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-fv .fv-pic::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #454443; opacity: 0.603; }
#reno-fv .fv-txt{ position: absolute; top: 31.2vw; left: 0; z-index: 1; width: 100%; color: #fff; text-align: center; }
#reno-fv .fv-txt .en{ font-size: 3.86vw; line-height: 5.8vw; letter-spacing: 0.2vw; }
#reno-fv .fv-txt .catch{ font-weight: 600; }
#reno-fv .fv-txt .catch .l1{ display: block; font-size: 7.25vw; line-height: 9.7vw; margin-top: 1vw; }
#reno-fv .fv-txt .catch .l2{ display: block; font-size: 4.83vw; line-height: 7.2vw; margin-top: 2.7vw; }
#reno-fv .lead{ font-size: 3.86vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.2vw; margin: 3.4vw 8.9vw 0; }

/* 3つのポイント */
#reno-point{ margin-top: 15vw; }
#reno-point .point-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#reno-point .point-list li{ position: relative; width: 79.7vw; height: 53.1vw; margin-top: 13.3vw; background: #EDEDED; text-align: center; }
#reno-point .point-list li:first-child{ margin-top: 0; }
#reno-point .point-list li + li{ margin-top: 20.5vw; }
#reno-point .point-list li::before{ content: ''; position: absolute; top: -13.3vw; left: 27.3vw; width: 24.9vw; height: 24.9vw; border-radius: 50%; background: #EDEDED; }
#reno-point .point-list li::after{ content: ''; position: absolute; top: -2.4vw; left: -2.4vw; width: 9.7vw; height: 9.7vw; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #FDEC01 calc(50% - 1px), #FDEC01 calc(50% + 1px), transparent calc(50% + 1px)); }
#reno-point .point-list .num{ position: absolute; top: -8.7vw; left: 0; width: 100%; font-size: 7.25vw; font-weight: bold; line-height: 7.25vw; letter-spacing: 0.36vw; color: #0D0D0D; }
#reno-point .point-list .icon{ position: relative; padding-top: 3.6vw; }
#reno-point .point-list .icon img{ display: block; width: 29vw; height: 29vw; margin: 0 auto; }
#reno-point .point-list .ttl{ position: relative; font-size: 6vw; font-weight: 600; line-height: 8.7vw; letter-spacing: 0.3vw; margin-top: 3.4vw; }
#reno-point .point-list .sub{ position: relative; font-size: 4.83vw; font-weight: 500; line-height: 6.8vw; letter-spacing: 0.24vw; }
#reno-point .note{ font-size: 3.86vw; font-weight: 500; line-height: 7.25vw; letter-spacing: 0.2vw; margin: 3.4vw 8.9vw 0; }

/* ABOUT */
#reno-about{ margin-top: 17.4vw; }
#reno-about .about-list{ margin: 10.4vw 4.1vw 0; }
#reno-about .box{ position: relative; background: #E8E3CF; padding: 18.6vw 0 14vw; margin-top: 21.5vw; }
#reno-about .box:first-child{ margin-top: 0; }
#reno-about .box::before{ content: ''; position: absolute; top: 1.7vw; left: 1.7vw; right: 1.7vw; bottom: 1.7vw; border: 1px dashed #707070; }
#reno-about .box-ttl{ position: absolute; top: -5.8vw; left: 7.7vw; width: 76.3vw; height: 16.2vw; background: #fff; border: 1px solid #707070; font-size: 5.56vw; font-weight: 600; line-height: 15.7vw; letter-spacing: 0.28vw; text-align: center; }
#reno-about .box-in{ position: relative; margin: 0 7.7vw; text-align: center; }
#reno-about .box .catch{ display: inline-block; font-size: 4.35vw; font-weight: bold; line-height: 6.5vw; letter-spacing: 0.1vw; white-space: nowrap; border-bottom: 1px solid #707070; padding: 0 0 1vw; }
#reno-about .box .txt{ font-size: 3.86vw; font-weight: 500; line-height: 7.25vw; letter-spacing: 0.2vw; text-align: left; margin-top: 2vw; }
#reno-about .box .arrow{ position: absolute; left: 50%; bottom: -3.9vw; z-index: 1; width: 11.1vw; height: 11.1vw; margin-left: -5.55vw; border-radius: 50%; border: 1px solid #000; background: #fff; }
#reno-about .box .arrow::after{ content: ''; position: absolute; top: 3.4vw; left: 4.1vw; width: 2.4vw; height: 2.4vw; border-right: 2px solid #000; border-bottom: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#reno-about .box .arrow span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* RENOVATION */
#reno-renovation{ margin-top: 21vw; }
#reno-renovation .reno-box{ position: relative; background: #fff; border: 1px solid #707070; margin-top: 9.7vw; padding-bottom: 6.3vw; }
#reno-renovation .sec-head + .reno-box{ margin-top: 6vw; }
#reno-renovation .box-head{ position: relative; margin: 0 4.1vw; padding: 9.4vw 0 1.4vw 13.5vw; border-bottom: 1px solid #707070; }
#reno-renovation .box-head .num{ position: absolute; top: 10.1vw; left: 0; width: 11.1vw; height: 11.1vw; background: #FDEC01; font-size: 4.83vw; font-weight: bold; line-height: 11.1vw; letter-spacing: 0.24vw; text-align: center; }
#reno-renovation .box-head .ttl{ font-size: 6vw; font-weight: 600; line-height: 8vw; letter-spacing: 0.3vw; }
#reno-renovation .box-head .sub{ font-size: 4.35vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.2vw; }
#reno-renovation .row{ margin: 5.3vw 4.1vw 0; }
#reno-renovation .row + .row{ margin-top: 9vw; }
#reno-renovation .row .ttl{ font-size: 6.76vw; font-weight: 600; line-height: 8vw; letter-spacing: 0.34vw; margin-bottom: 0.5vw; }
#reno-renovation .row .pic img{ display: block; width: 100%; height: 61.1vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-renovation .row .txt{ font-size: 3.86vw; font-weight: 500; line-height: 7.25vw; letter-spacing: 0.2vw; margin-top: 1.4vw; }

#reno-renovation .both{ margin: 19.3vw 6.5vw 0; }
#reno-renovation .both a{ display: block; color: #000; }
#reno-renovation .both-pic{ position: relative; display: block; height: 38.4vw; overflow: hidden; }
#reno-renovation .both-pic img{ display: block; width: 100%; height: 38.4vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-renovation .both-pic::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(49,49,49,0.8078) 43.35%, rgba(255,255,255,0) 100%); opacity: 0.704; }
#reno-renovation .both-txt{ position: absolute; top: 10.6vw; left: 0; z-index: 1; width: 100%; color: #fff; text-align: center; }
#reno-renovation .both-txt .t1{ position: relative; display: block; font-size: 3.86vw; font-weight: 500; line-height: 4.8vw; letter-spacing: 0.2vw; padding-bottom: 1.2vw; }
#reno-renovation .both-txt .t1::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 62vw; margin-left: -31vw; border-bottom: 1px solid #fff; }
#reno-renovation .both-txt .t2{ display: block; font-size: 4.83vw; font-weight: 600; line-height: 7vw; letter-spacing: 0.24vw; margin-top: 1.4vw; }
#reno-renovation .both-txt .t2 .x{ position: relative; display: inline-block; width: 2.2vw; height: 2.2vw; margin: 0 0.5vw; vertical-align: middle; }
#reno-renovation .both-txt .t2 .x::before,
#reno-renovation .both-txt .t2 .x::after{ content: ''; position: absolute; top: 1vw; left: -0.5vw; width: 3.1vw; border-top: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#reno-renovation .both-txt .t2 .x::after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#reno-renovation .both-btn{ position: relative; display: block; height: 8.5vw; margin-top: -1.7vw; background: #F5F5F5; font-size: 3.38vw; font-weight: bold; line-height: 8.5vw; letter-spacing: 0.17vw; text-align: center; text-decoration: underline; }

/* REFORM */
#reno-reform{ background: #EFEFEF; margin-top: 19.3vw; padding: 11.6vw 4.1vw 9.2vw; }
#reno-reform .sec-head .txt{ margin: 3vw 5vw 0; }
#reno-reform .reform-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 4.8vw; }
#reno-reform .reform-list li{ position: relative; width: 44.7vw; height: 27.8vw; overflow: hidden; margin-top: 2.4vw; }
#reno-reform .reform-list li:nth-child(-n+2){ margin-top: 0; }
#reno-reform .reform-list li img{ display: block; width: 100%; height: 27.8vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-reform .reform-list li::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
#reno-reform .reform-list .txt{ position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; color: #fff; font-size: 3.38vw; font-weight: 500; line-height: 5.3vw; letter-spacing: 0.17vw; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

/* STRENGTH */
#reno-strength{ margin-top: 19.3vw; }
#reno-strength .inner-Box{ background: #E8E3CF; padding: 11.6vw 4.1vw 9.7vw; }
#reno-strength .sec-head .txt{ margin: 3vw 5vw 0; }
#reno-strength .strength-list{ margin-top: 4vw; }
#reno-strength .strength-list li{ position: relative; padding: 7.2vw 0 0 7.2vw; margin-top: 4vw; }
#reno-strength .strength-list li:first-child{ margin-top: 0; }
#reno-strength .strength-list .num{ position: absolute; top: 0; left: 0; z-index: 2; width: 14.5vw; height: 14.5vw; border-radius: 50%; border: 1px solid #707070; background: #fff; font-size: 4.83vw; font-weight: bold; line-height: 4.83vw; letter-spacing: 0.24vw; text-align: center; padding-top: 1.7vw; }
#reno-strength .strength-list .num span{ display: block; font-size: 3.38vw; line-height: 3.9vw; letter-spacing: 0.17vw; }
#reno-strength .strength-list .card{ position: relative; width: 79.7vw; height: 48.3vw; border-radius: 3.6vw; overflow: hidden; }
#reno-strength .strength-list .card img{ display: block; width: 100%; height: 48.3vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-strength .strength-list .card::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #0D0D0D 100%); opacity: 0.8046; }
#reno-strength .strength-list .card .ttl{ position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; color: #fff; font-size: 4.83vw; font-weight: 800; line-height: 5.8vw; letter-spacing: 0.24vw; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#reno-strength .strength-list .txt{ font-size: 4.1vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.2vw; margin-top: 0.5vw; }
#reno-strength .btn{ margin-top: 8vw; }
#reno-strength .btn a{ display: block; height: 13.5vw; border-radius: 6.8vw; background: #fff; color: #000; font-size: 4.35vw; font-weight: bold; line-height: 13.5vw; letter-spacing: 0.2vw; text-align: center; }

/* 施工事例 */
#reno-works .inner-Box{ background: #EFEFEF; padding: 10.9vw 4.1vw 7.2vw; }
#reno-works .sec-head .ttl span{ width: auto; padding: 0 5.3vw; }
#reno-works .sec-head .ttl span::after{ height: 4.83vw; }
#reno-works .works-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 3vw; }
#reno-works .works-list li{ width: 45.4vw; margin-top: 4vw; }
#reno-works .works-list li:nth-child(-n+2){ margin-top: 0; }
#reno-works .works-list a{ display: block; color: #1A1A1A; }
#reno-works .works-list .pic img{ display: block; width: 100%; height: 33.3vw; object-fit: cover; font-family: 'object-fit: cover;'; }
#reno-works .works-list .txt{ font-size: 3.38vw; font-weight: 500; line-height: 5.3vw; text-align: center; margin-top: 3vw; }
#reno-works .btn{ width: 77.3vw; margin: 8vw auto 0; }
#reno-works .btn a{ position: relative; display: block; height: 14.5vw; border-radius: 7.25vw; border: 1px solid #1A1A1A; background: #F2F2F2; color: #000; font-size: 3.86vw; line-height: 14vw; letter-spacing: 0.2vw; text-align: center; }
#reno-works .btn a::after{ content: ''; position: absolute; top: 50%; right: 6.8vw; width: 1.9vw; height: 1.9vw; margin-top: -0.95vw; border-top: 1px solid #1A1A1A; border-right: 1px solid #1A1A1A; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

/* 相談フォーム */
#reform-renovation .cta-head{ margin-top: 14.5vw; text-align: center; }
#reform-renovation .cta-head .txt{ font-size: 3.6vw; font-weight: 500; line-height: 6.5vw; letter-spacing: 0; margin: 2vw 4.1vw 0; }
#reform-renovation .form-Box{ margin: 6vw 0 14.5vw; }
#reform-renovation h2.sub-title{ font-size: 4.1vw; letter-spacing: 0; padding-left: 0; padding-right: 0; }

/* 右固定ボタン（SPは共通の下部固定バーを使う） */
#reform-renovation .reno-fix{ display: none; }

}