@charset "UTF-8";
@media screen and (min-width: 768px),print {
main{width: 100%!important; max-width: 1920px!important; margin: 0 auto!important; letter-spacing: 1px; line-height: 1.8;}
.seo_bread_list {  margin-bottom: 45px;}

#con1 {}
#con1 .bx{width: 100%; max-width: 1920px; margin: 0 auto; background: linear-gradient(180deg, #fff 0%, #fff 360px, #F2F2F2 360px, #F2F2F2 100%);}
#con1 .bx .inner{width: 1280px; margin: 0 auto -67px; position: relative; background: url(../images/renovation/con1-bg.png) no-repeat top center; padding: 580px 0 130px;;}
#con1 .bx .inner .ttl{position: absolute; left: -20px; top: 148px;}
#con1 .bx .inner .bx1{}
#con1 .bx .inner .bx1 .ttl1{text-align: center; margin-bottom: 42px;}
#con1 .bx .inner .bx1 .inner1{width: 950px; margin: 0 auto; background: #fff; padding: 64px 0;}
#con1 .bx .inner .bx1 .inner1 .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; text-align: center;}

#con2 {}
#con2 .bx{width: 100%; max-width: 1920px; margin: 0 auto; background: url(../images/renovation/con2-bg.png) no-repeat top center; padding: 107px 0 1px;}
#con2 .bx .inner{width: 1280px; margin: 0 auto; position: relative; }
#con2 .bx .inner .ttl{font-size: 39px; color: #fff; letter-spacing: 2px; line-height: 1.9; text-align: center; margin-bottom: 26px;}

#con2 .bx .inner .in-inner{width: 850px; margin: 0 auto 59px; background: #fff; border-radius: 170px; padding: 77px 0 66px;}
#con2 .bx .inner .in-inner .list{width: 535px; margin: 0 auto;}
#con2 .bx .inner .in-inner .list li{font-size: 16px; letter-spacing: 0.75px; line-height: 1.85; padding-left: 33px; position: relative; margin-bottom: 10px;}
#con2 .bx .inner .in-inner .list li::before{content: ""; width: 20px; height: 20px; margin: 0 auto; background: url(../images/renovation/con2-icon.png) no-repeat top center; position: absolute; left: 0; top: 5px;}

#con2 .bx .inner .ttl1{width: 640px; margin: 0 auto; font-size: 34px; color: #fff; letter-spacing: 1.8px; line-height: 1.5; text-align: center; margin-bottom: 50px; position: relative;}
#con2 .bx .inner .ttl1::before{content: ""; width: 21px; height: 61px; margin: 0 auto; background: url(../images/renovation/con2-ttl-icon1.svg) no-repeat top center; position: absolute; left: 0; top: 30px;}
#con2 .bx .inner .ttl1::after{content: ""; width: 21px; height: 61px; margin: 0 auto; background: url(../images/renovation/con2-ttl-icon2.svg) no-repeat top center; position: absolute; right: 0; top: 30px;}

#con2 .bx .inner .icon1{position: absolute; left: 136px; top: 135px;}
#con2 .bx .inner .icon2{position: absolute; right: 157px; top: 141px;}


#con3 {}
#con3 .bx{width: 100%; max-width: 1920px; margin: 0 auto 130px; background: #F2F2F2; padding: 80px 0 58px;}
#con3 .bx .ttl{font-size: 35px; letter-spacing: 2px; line-height: 1.9; text-align: center; margin-bottom: 24px;}
#con3 .bx .ttl1{font-size: 29px; letter-spacing: 1.8px; line-height: 0; text-align: center; margin-bottom: 88px;}
#con3 .bx .ttl1 span{font-size: 69px; position: relative; top: 10px; left: 10px; padding-right: 15px;}

#con3 .bx .bx1{width: 1200px; margin: 0 auto 40px; background: #fff; padding: 88px 90px 43px; position: relative;}
#con3 .bx .bx1 .inner1{width: 510px; margin-right: auto;}
#con3 .bx .bx1 .inner1 .num{margin-bottom: 15px;}
#con3 .bx .bx1 .inner1 .ttl2{font-size: 24px; letter-spacing: 1.2px; line-height: 1.6; margin-bottom: 24px;}
#con3 .bx .bx1 .inner1 .img{position: absolute; right: 88px; top: 100px;}
#con3 .bx .bx1 .inner1 .txt{font-size: 14px; letter-spacing: 0.7px; line-height: 1.8; margin-bottom: 33px;}
#con3 .bx .bx1 .inner1 .link{font-size: 16px; letter-spacing: 0.9px; line-height: 1.8; width: 338px; margin-bottom: 30px; border: 1px solid #1A1A1A; position: relative; }
#con3 .bx .bx1 .inner1 .link a{display: block; padding: 11px 22px;}
#con3 .bx .bx1 .inner1 .link a::after{content: ""; width: 11px; height: 17px; margin: 0 auto; background: url(../images/renovation/con3-link-icon.svg) no-repeat top center;; position: absolute; right: 18px; top: 17px;}


#con3 .bx .bx2{width: 1200px; margin: 0 auto 40px; background: #fff; padding: 88px 90px 106px; position: relative;}
#con3 .bx .bx2 .inner1{width: 510px; margin-right: auto;}
#con3 .bx .bx2 .inner1 .num{margin-bottom: 15px;}
#con3 .bx .bx2 .inner1 .ttl2{font-size: 24px; letter-spacing: 1.2px; line-height: 1.6; margin-bottom: 24px;}
#con3 .bx .bx2 .inner1 .img{position: absolute; right: 88px; top: 100px;}
#con3 .bx .bx2 .inner1 .txt{font-size: 14px; letter-spacing: 0.7px; line-height: 1.8; margin-bottom: 33px;}

#con3 .bx .bx3{width: 1200px; margin: 0 auto 40px; background: #fff; padding: 88px 90px 77px; position: relative;}
#con3 .bx .bx3 .inner1{width: 510px; margin-right: auto;}
#con3 .bx .bx3 .inner1 .num{margin-bottom: 15px;}
#con3 .bx .bx3 .inner1 .ttl2{font-size: 24px; letter-spacing: 1.2px; line-height: 1.6; margin-bottom: 24px;}
#con3 .bx .bx3 .inner1 .img{position: absolute; right: 88px; top: 100px;}
#con3 .bx .bx3 .inner1 .txt{font-size: 14px; letter-spacing: 0.7px; line-height: 1.8; margin-bottom: 33px;}


#con4 {}
#con4 .bx{width: 1100px; margin: 0 auto 245px; }
#con4 .bx .ttl{font-size: 29px; letter-spacing: 1.4px; line-height: 2; text-align: center; margin-bottom: 50px;}

#con4 .bx .ba-bx1{width: 1100px; margin: 0 auto 90px; padding-top: 70px; position: relative;}
#con4 .bx .ba-bx1 .ba-txt{font-size: 16px; letter-spacing: 0; text-align: center; margin-top: 10px;}
#con4 .bx .ba-bx1 .ttl1{font-size: 34px; letter-spacing: 1.8px; position: absolute; left: 0; top: 10px;}
#con4 .bx .ba-bx1 .ttl2{font-size: 34px; letter-spacing: 1.8px; position: absolute; right: 0; top: 10px;}
#con4 .bx .ba-bx1 .compare-box{position: relative;width: 100%;max-width: 1100px;overflow: hidden;margin: 0 auto;}
#con4 .bx .ba-bx1 .compare-box img{width: 100%;height: auto;display: block;object-fit: cover;   /* 保険 */}
#con4 .bx .ba-bx1 .compare-before{position: absolute;top: 0;left: 0;}
#con4 .bx .ba-bx1 .compare-after{clip-path: inset(0 50% 0 0); /* 初期は半分表示 */}
#con4 .bx .ba-bx1 .compare-slider{position: absolute;bottom: 50%;left: 0;width: 100%;transform: translateY(50%);appearance: none;background: none;z-index: 10;height: 0px;}
#con4 .bx .ba-bx1 .compare-slider::-webkit-slider-thumb{appearance: none !important;width: 104px !important;height: 640px !important;background: url('../images/renovation/ba-icon.png') no-repeat center center;background-size: contain !important;border: none !important;cursor: pointer !important;}

#con4 .bx .ba-bx2{width: 1100px; margin: 0 auto 70px; padding-top: 70px; position: relative;}
#con4 .bx .ba-bx2 .ba-txt{font-size: 16px; letter-spacing: 0; text-align: center; margin-top: 10px;}
#con4 .bx .ba-bx2 .ttl1{font-size: 34px; letter-spacing: 1.8px; position: absolute; left: 0; top: 10px;}
#con4 .bx .ba-bx2 .ttl2{font-size: 34px; letter-spacing: 1.8px; position: absolute; right: 0; top: 10px;}
#con4 .bx .ba-bx2 .compare-box{position: relative;width: 100%;max-width: 1100px;overflow: hidden;margin: 0 auto;}
#con4 .bx .ba-bx2 .compare-box img{width: 100%;height: auto;display: block;object-fit: cover;   /* 保険 */}
#con4 .bx .ba-bx2 .compare-before{position: absolute;top: 0;left: 0;}
#con4 .bx .ba-bx2 .compare-after{clip-path: inset(0 50% 0 0); /* 初期は半分表示 */}
#con4 .bx .ba-bx2 .compare-slider{position: absolute;bottom: 50%;left: 0;width: 100%;transform: translateY(50%);appearance: none;background: none;z-index: 10;height: 0px;}
#con4 .bx .ba-bx2 .compare-slider::-webkit-slider-thumb{appearance: none !important;width: 104px !important;height: 640px !important;background: url('../images/renovation/ba-icon.png') no-repeat center center;background-size: contain !important;border: none !important;cursor: pointer !important;}

#con4 .bx .link{font-size: 16px; letter-spacing: 0.9px; line-height: 1.8; width: 240px; margin: 0 auto 30px; border: 1px solid #1A1A1A; position: relative; }
#con4 .bx .link a{display: block; padding: 11px 22px;}
#con4 .bx .link a::after{content: ""; width: 11px; height: 17px; margin: 0 auto; background: url(../images/renovation/con4-link-icon.svg) no-repeat top center;; position: absolute; right: 18px; top: 17px; }


#con-last {}
#con-last .bx{width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 0 82px ; background: linear-gradient(180deg, #fff 0%, #fff 420px, #F2F2F2 420px, #F2F2F2 100%);}
#con-last .bx .con-last-bigimg {width: 100%; margin: 0 auto -80px;}
#con-last .bx .loop {width: 100%;height: 540px; /*画像の高さ等*/background: url(../images/renovation/con-last-bigimg.png) repeat-x;background-position: center;animation: bgloop 60s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/}
@keyframes bgloop {from { background-position: 0 0; }to { background-position: -2510px 0; /*-1000px部分は画像の横幅と同じ数値*/ }}

#con-last .bx .inner{width: 800px; margin: 0 auto; background: #fff; padding: 43px 64px 54px; position: relative;}
#con-last .bx .inner .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; text-align: center;}


}

@media screen and (max-width: 767px) {
main{letter-spacing: 0.3vw; line-height: 1.8;}
h1.main-title {margin: 0 auto 17vw;}

#con1 {}
#con1 .bx{width: 100%; margin: 0 auto; background: linear-gradient(180deg, #fff 0%, #fff 20vw, #F2F2F2 20vw, #F2F2F2 100%);}
#con1 .bx .inner{width: 100%; margin: 0 auto -7vw; position: relative; background: url(../images/renovation/sp-con1-bg.png) no-repeat top center; padding: 88vw 0 28vw; background-size: 100%;}
#con1 .bx .inner .ttl{position: absolute; left: 0; right: 0; top: 49vw; text-align: center;}
#con1 .bx .inner .ttl img{width: 77%; margin: 0 auto;}
#con1 .bx .inner .bx1{}
#con1 .bx .inner .bx1 .ttl1{text-align: center; margin-bottom: 12vw;}
#con1 .bx .inner .bx1 .ttl1 img{width: 81%; margin: 0 auto;}
#con1 .bx .inner .bx1 .inner1{width: 100%; margin: 0 auto; background: #fff; padding: 11vw 9vw;}
#con1 .bx .inner .bx1 .inner1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.9; }

#con2 {}
#con2 .bx{width: 100%; margin: -18vw auto 0; background: url(../images/renovation/sp-con2-bg.png) no-repeat top center; padding: 10vw 0 4vw; background-size: 100%;}
#con2 .bx .inner{width: 100%; margin: 0 auto; position: relative; }
#con2 .bx .inner .ttl{font-size: 7.5vw; color: #fff; letter-spacing: 0.3vw; line-height: 1.3; text-align: center; margin-bottom: 6vw;}

#con2 .bx .inner .in-inner{width: 87%; margin: 0 auto 59px; background: #fff; border-radius: 9vw; padding: 8vw 7vw 32vw;}
#con2 .bx .inner .in-inner .list{width: 100%; margin: 0 auto;}
#con2 .bx .inner .in-inner .list li{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.9; padding-left: 5vw; position: relative; margin-bottom: 2vw;}
#con2 .bx .inner .in-inner .list li::before{content: ""; width: 5vw; height: 5vw; margin: 0 auto; background: url(../images/renovation/sp-con2-icon.png) no-repeat top center; position: absolute; left: -1vw; top: 1vw; background-size: 4vw;}

#con2 .bx .inner .ttl1{width: 100%; margin: 0 auto; font-size: 5vw; color: #fff; letter-spacing: 0.2vw; line-height: 1.5; text-align: center; margin-bottom: 5vw; position: relative;}
#con2 .bx .inner .ttl1::before{content: ""; width: 10vw; height: 10vw; margin: 0 auto; background: url(../images/renovation/con2-ttl-icon1.svg) no-repeat top center; position: absolute; left: 4vw; top: 6vw; background-size: 5vw;}
#con2 .bx .inner .ttl1::after{content: ""; width: 10vw; height: 10vw; margin: 0 auto; background: url(../images/renovation/con2-ttl-icon2.svg) no-repeat top center; position: absolute; right: 4vw; top: 6vw; background-size: 5vw;}

#con2 .bx .inner .icon1{position: absolute; left: 25vw; bottom: 22vw;}
#con2 .bx .inner .icon1 img{width: 49%;}
#con2 .bx .inner .icon2{position: absolute; right: 0; bottom: 22vw;}
#con2 .bx .inner .icon2 img{width: 49%;}


#con3 {}
#con3 .bx{width: 100%; margin: 0 auto 13vw; background: #F2F2F2; padding: 10vw 0 4vw;}
#con3 .bx .ttl{font-size: 7.5vw; letter-spacing: 0.2vw; line-height: 1.9; text-align: center; margin-bottom: 4vw;}
#con3 .bx .ttl1{font-size: 4.8vw; letter-spacing: 1.2vw; line-height: 1.2; text-align: center; margin-bottom: 12vw;}
#con3 .bx .ttl1 span{font-size: 13vw; position: relative; top: 2vw; left: 2vw; padding-right: 3vw; line-height: 0.8;}

#con3 .bx .bx1{width: 96%; margin: 0 auto 8vw; background: #fff; padding: 12vw 7vw 5vw; position: relative;}
#con3 .bx .bx1 .inner1{width: 100%; margin: 0 auto;}
#con3 .bx .bx1 .inner1 .num{margin-bottom: 6vw; text-align: center;}
#con3 .bx .bx1 .inner1 .num img{width: 13%; margin: 0 auto;}
#con3 .bx .bx1 .inner1 .ttl2{font-size: 5vw;letter-spacing: 0.1vw;line-height: 1.7;margin-bottom: 6vw;text-align: center;}
#con3 .bx .bx1 .inner1 .img{margin-bottom: 7vw;}
#con3 .bx .bx1 .inner1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 3vw;}
#con3 .bx .bx1 .inner1 .link{font-size: 3.5vw; letter-spacing: 0.55vw; line-height: 1.8; width: 100%; margin-bottom: 3vw; border: 1px solid #1A1A1A; position: relative;}
#con3 .bx .bx1 .inner1 .link a{display: block; padding: 3vw 6vw;}
#con3 .bx .bx1 .inner1 .link a::after{content: "";  width: 5vw;  height: 5vw;  margin: 0 auto;  background: url(../images/renovation/con3-link-icon.svg) no-repeat top center;  position: absolute;  right: 3vw;  top: 4vw;  background-size: 3vw;}

#con3 .bx .bx2{width: 96%; margin: 0 auto 8vw; background: #fff; padding: 12vw 7vw 5vw; position: relative;}
#con3 .bx .bx2 .inner1{width: 100%; margin: 0 auto;}
#con3 .bx .bx2 .inner1 .num{margin-bottom: 6vw; text-align: center;}
#con3 .bx .bx2 .inner1 .num img{width: 13%; margin: 0 auto;}
#con3 .bx .bx2 .inner1 .ttl2{font-size: 5vw;letter-spacing: 0.1vw;line-height: 1.7;margin-bottom: 6vw;text-align: center;}
#con3 .bx .bx2 .inner1 .img{margin-bottom: 7vw;}
#con3 .bx .bx2 .inner1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 3vw;}

#con3 .bx .bx3{width: 96%; margin: 0 auto 8vw; background: #fff; padding: 12vw 7vw 5vw; position: relative;}
#con3 .bx .bx3 .inner1{width: 100%; margin: 0 auto;}
#con3 .bx .bx3 .inner1 .num{margin-bottom: 6vw; text-align: center;}
#con3 .bx .bx3 .inner1 .num img{width: 13%; margin: 0 auto;}
#con3 .bx .bx3 .inner1 .ttl2{font-size: 5vw;letter-spacing: 0.1vw;line-height: 1.7;margin-bottom: 6vw;text-align: center;}
#con3 .bx .bx3 .inner1 .img{margin-bottom: 7vw;}
#con3 .bx .bx3 .inner1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 3vw;}


#con4 {}
#con4 .bx{width: 100%; margin: 0 auto -28vw; }
#con4 .bx .ttl{font-size: 4.7vw; letter-spacing: 0.3vw; line-height: 2; text-align: center; margin-bottom: 3vw;}

#con4 .bx .ba-bx1{width: 100%; margin: 0 auto 10vw; padding-top: 14vw; position: relative;}
#con4 .bx .ba-bx1 .ba-txt{font-size: 3.35vw; letter-spacing: 0vw; text-align: center; margin-top: 2vw;}
#con4 .bx .ba-bx1 .ttl1{font-size: 4.5vw; letter-spacing: 0.4vw; position: absolute; left: 7vw; top: 4vw;}
#con4 .bx .ba-bx1 .ttl2{font-size: 4.5vw; letter-spacing: 0.5vw; position: absolute; right: 6vw; top: 4vw;}
#con4 .bx .ba-bx1 .compare-box{position: relative;width: 100%;max-width: 100%;overflow: hidden; margin: 0 auto;}
#con4 .bx .ba-bx1 .compare-box img{width: 100%;height: 70vw;display: block;object-fit: cover;   /* 保険 */}
#con4 .bx .ba-bx1 .compare-before{position: absolute;top: 0;left: 0;}
#con4 .bx .ba-bx1 .compare-after{clip-path: inset(0 50% 0 0); /* 初期は半分表示 */}
#con4 .bx .ba-bx1 .compare-slider{position: absolute;bottom: 50%;left: 0;width: 100%;transform: translateY(50%);appearance: none;background: none;z-index: 10;height: 0px;}
#con4 .bx .ba-bx1 .compare-slider::-webkit-slider-thumb{appearance: none !important;width: 18vw !important;height: 70vw !important;background: url('../images/renovation/sp-ba-icon.png') no-repeat center center;background-size: 120% !important;border: none !important;cursor: pointer !important;}

#con4 .bx .ba-bx2{width: 100%; margin: 0 auto 10vw; padding-top: 14vw; position: relative;}
#con4 .bx .ba-bx2 .ba-txt{font-size: 3.35vw; letter-spacing: 0vw; text-align: center; margin-top: 2vw;}
#con4 .bx .ba-bx2 .ttl1{font-size: 4.5vw; letter-spacing: 0.4vw; position: absolute; left: 7vw; top: 4vw;}
#con4 .bx .ba-bx2 .ttl2{font-size: 4.5vw; letter-spacing: 0.5vw; position: absolute; right: 6vw; top: 4vw;}
#con4 .bx .ba-bx2 .compare-box{position: relative;width: 100%;max-width: 100%;overflow: hidden; margin: 0 auto;}
#con4 .bx .ba-bx2 .compare-box img{width: 100%;height: 70vw;display: block;object-fit: cover;   /* 保険 */}
#con4 .bx .ba-bx2 .compare-before{position: absolute;top: 0;left: 0;}
#con4 .bx .ba-bx2 .compare-after{clip-path: inset(0 50% 0 0); /* 初期は半分表示 */}
#con4 .bx .ba-bx2 .compare-slider{position: absolute;bottom: 50%;left: 0;width: 100%;transform: translateY(50%);appearance: none;background: none;z-index: 10;height: 0px;}
#con4 .bx .ba-bx2 .compare-slider::-webkit-slider-thumb{appearance: none !important;width: 18% !important;height: 70vw !important;background: url('../images/renovation/sp-ba-icon.png') no-repeat center center;background-size: 120% !important;border: none !important;cursor: pointer !important;}

#con4 .bx .link{font-size: 3.5vw; letter-spacing: 0.55vw; line-height: 1.8; width: 58%; margin-bottom: 3vw; border: 1px solid #1A1A1A; position: relative; margin: 0 auto 3vw;}
#con4 .bx .link a{display: block; padding: 3vw 6vw;}
#con4 .bx .link a::after{content: "";  width: 5vw;  height: 5vw;  margin: 0 auto;  background: url(../images/renovation/con3-link-icon.svg) no-repeat top center;  position: absolute;  right: 3vw;  top: 4vw;  background-size: 3vw;}



#con-last {}
#con-last .bx{width: 100%; margin: 0 auto 11vw; padding: 39vw 0 5vw ; background: linear-gradient(180deg, #fff 0%, #fff 40vw, #F2F2F2 40vw, #F2F2F2 100%); }
#con-last .bx .con-last-bigimg {width: 100%; margin: 0 auto -26vw;}
#con-last .bx .loop {width: 100%;height: 81vw; /*画像の高さ等*/background: url(../images/renovation/con-last-bigimg.png) repeat-x;background-position: center;animation: bgloop 40s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/; background-size: 232%; }
@keyframes bgloop {from { background-position: 0 0; }to { background-position: -200vw 0; /*-1000px部分は画像の横幅と同じ数値*/ }}

#con-last .bx .inner{width: 87%; margin: 0 auto; background: #fff; padding: 6vw 7vw 6vw 9.5vw;}
#con-last .bx .inner .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.9;}


}