@charset "utf-8";
     html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}   h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}  .mod_main {
margin-top: 1.1rem;
}
.mod_main {
overflow: hidden;
}
main {
display: block;
}
.inner {
}
.pc_block{
display: block;
}
.sp_block{
display: none;
}
.pc_inline{
display: inline;
}
.sp_inline{
display: none;
} .tab-2 {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}
.tab-2 > label { order: -1;
flex: 0 0 auto; margin: 0 5px; color: #fff;
font-size: 2em;
text-align: center;
cursor: pointer;
margin: 0 auto;
line-height: 50px;
font-weight: bold;
color: #222222;
font-weight: bold;
width: 260px;
height: 50px;
background: #999999;
} .tab-2 > label:first-of-type {
margin-left: 35%; }
.tab-2 > label:last-of-type {
margin-right: 35%; }
.tab-2 > label:hover {
opacity: .8;
}
.tab-2 input {
display: none;
}
.tab-2 > div {
display: none;
width: 100%;
padding: 1.5em 0;
background-color: #fff;
}
.tab-2 label:has(:checked) {
opacity: 1;
background-color: #2cb3b3;
color: #ffffff;
}
.tab-2 label:has(:checked) + div {
display: block;
}  .line {
height: 1px;
position: relative;
width: 100%;
background: #000;
}
.line::before {
border-radius: 50%;
background: #000;
content: "";
height: 0.06rem;
left: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0.06rem;
}
.line::after {
border-radius: 50%;
background: #000;
content: "";
height: 0.06rem;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0.06rem;
}
h2{ text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 128px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 36px;
font-weight: 700;
}
*/ .service-nav {
width: 100%;
}
.service-nav ul {
display: flex;
flex-wrap: wrap; justify-content: flex-start;
gap: 10px;
margin: 60px auto 100px auto;
list-style: none;
height: 50px;
max-width: 1200px;
} .service-nav li {
flex: 1 1 auto; max-width: 220px; }
.service-nav a {
display: block;
background: #26aebf;
color: #fff;
font-weight: bold;
text-align: center;
padding: 5px 0;
width: 180px;
height: 60px;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size:2em;
position: relative;
transition: background 0.3s;
} .service-nav a:hover {
background: 2cb3b3;
} .service-nav .arrow {
display: block;
font-size: 0.2rem;
width: 100%;
opacity: 0.9;
}
span.arrow::before {
content: "\f078";
font-family: FontAwesome;
position: absolute;
font-size: 10px;
top: 47%;
right: 6%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
@media screen and (min-width: 768px) {
span.arrow::before {
font-size: 14px;
top: 70%;
right: 50%;
}
}   .equipment-section_1{
background: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/content_bg.jpg) repeat;
color: #333;
margin: 60px auto 100px;
width: 100%;
}
.equipment-section_2 {
background: #fff;
color: #333;
}
.equipment-section_1 .inner-k,
.equipment-section_2 .inner-k
{
width: 1210px;
padding: 60px 0 100px;
margin: 0 auto;
} .equipment-container {
display: flex;
max-width: 1200px;
margin: 60px auto 0px;
padding-bottom: 60px;
justify-content: space-between;
}
.equipment-container2 {
max-width: 1200px;
margin: 60px auto 0px;
padding-bottom: 60px;
} .equipment-image {
position: relative;
width: 38%;
margin-right: 2%;
min-width: 280px;
}
.equipment-image img {
width: 100%;
height: auto;
}
.equipment-label {
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
background: #2cb3b3;
color: #fff;
font-size: 2em;
padding: 0px 50px;
font-weight: bold;
height: 60px;
line-height: 60px;
}
.equipment-label2 {
background: #2cb3b3;
color: #fff;
font-size: 2em;
padding: 0px 50px;
font-weight: bold;
height: 60px;
line-height: 60px;
display: inline-block;
} .equipment-content {
width:60% ;
}
.equipment-content1 {
width:100% ;
}
.equipment-content1 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.equipment-content1 li {
width: 48%;
}
.equipment-content2 {
width:100% ;
}
.equipment-list ,.equipment-list2{
list-style: none;
padding: 0;
}
.equipment-list li {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #222;
padding:  0 0 10px 0;
align-items:flex-end;
}
.equipment-list li.column {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #222;
padding:  0 0 10px 0;
align-items:flex-start;
flex-direction: column;
}
.equipment-list .name {
flex: 1;
font-size: 24px;
font-weight: bold;
position: relative;
padding-left: 24px;
margin-top: 0.1rem;
}
.equipment-list .name2 {
font-size: 24px;
font-weight: bold;
position: relative;
padding-left: 24px;
margin-top: 0.1rem;
display: block;
}
.equipment-list .name:before,.equipment-list .name2:before {
flex: 1;
font-size: 24px;
font-weight: bold;
position: absolute;
width: 0.8em;
height: 0.8em;
border-radius: 4px;
content: '';
left: 0;
top:4px;
background: #2cb3b3;
}
.equipment-list .subt{
display: block;
font-weight: normal;
font-size: 16px;
color: #666;
line-height: 1.5;
margin-top: 5px;
}
.equipment-list .none .subt{
margin-left: 24px;
}
.equipment-list .price {
font-weight: bold;
color: #2cb3b3;
font-size: 24px;
}
.equipment-list .price2 {
font-weight: bold;
color: #2cb3b3;
font-size: 16px; margin-left: 5%;
}
.equipment-list .none{
margin-top: 10px;
}
.equipment-list .en {
font-weight: bold;
vertical-align: baseline;
font-size: 18px;
color: #222222;
} .equipment-example {
margin-top: 30px;
}
.equipment-example a {
width: 100%;
display: inline-flex;
}
.equipment-example h3 {
font-size: 24px;
font-weight: bold;
color: #ffffff;
background:#2CB3B3 ;
padding: 5px 10px;
margin-bottom: 0;
}
.equipment-example ul{
padding: 0 10px 0 10px;
}
.equipment-example li {
font-size: 16px;
border-bottom: 1px dashed #222;
position: relative;
padding: 10px 0;
margin: 0;
list-style: none;
line-height: 1.5;
}
.equipment-example li:after {
position: absolute;
content: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/arrow.png);
right: 0;
} .btn-wrap {
text-align: right;
}
.btn {
display: inline-block;
background: #2cb37d;
color: #fff;
font-weight: bold;
text-decoration: none;
transition: background 0.3s;
font-size: 24px;
width: 210px;
height: 80px;
border-radius: 10px;
line-height: 80px;
box-shadow: 0px 2px 0 0 #666666;
text-align:left;
padding-left: 20px;
padding-right: 20px;
position: relative;
margin-left: 20px;
}
.btn:after {
position: absolute;
content: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/arrow4.png);
right: 20px;
top: 50%;
transform: translateY(-40%);
}
.btn3:after {
position: absolute;
content: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/arrow4.png);
right: 20px;
top: 50%;
transform: translateY(-40%);
}
.btn:hover,.btn3:hover {
opacity:0.8;
}
.btn3 {
display: inline-block;
background: #e47911;
color: #fff;
font-weight: bold;
text-decoration: none;
transition: background 0.3s;
font-size: 24px;
width: 210px;
height: 80px;
border-radius: 10px;
line-height: 80px;
box-shadow: 0px 2px 0 0 #666666;
text-align:left;
padding-left: 20px;
padding-right: 20px;
position: relative;
margin-left: 20px;
} .ph{
background: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/relatedsites_item1.jpg) no-repeat ;
height: 80px;
width: 250px;
background-size: cover;
position: relative;
margin: 0 0 0 auto;
margin-top: 30px;
}
.ph .btn2 {
bottom: 6px;
color: #fff;
font-size: 0.16rem;
font-weight: bold;
line-height: 0.27rem;
position: absolute;
text-align: center;
width: 1.45rem;
background: #86b990;
right: 0;
left: 0;
margin: 0 auto 0 10%;
} .flex-a{
display: flex;
flex-wrap: wrap;
justify-content: flex-end; 
margin-top: 30px;
} .contentsArea .mod_w1210 {
position: relative;
z-index: 2;
}
.contentsArea .title {
letter-spacing: 0.15em;
text-align: center;
}
.contentsArea .subtitle {
font-size: 0.4rem;
text-align: center;
} .sp-none {
display: block;
}
.equipment-content.set-sec {
padding: 30px 0 0 0;
}
.set-sec {
padding: 30px 0 0 0;
width: 100%;
}
.set-sec span.name {
font-size: 26px;
}
.set-sec .name:before {
top: 8px;
}
.set-sec .equipment-list {
list-style: none;
padding: 0 0 30px 0;
border-bottom: 2px dotted #ccc;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.set-sec-list {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 50px 0;
}
li.set-sec-list-item {
position:relative;
width: 25%;
height: 400px;
}
li.set-sec-list-item2 {
position:relative;
width: 25%;
height: 400px;
}
li.set-sec-list-item img {
height: 400px;
width: 100%;
object-fit: cover;
}
li.set-sec-list-item2 img {
height: 400px;
width: 100%;
object-fit: cover;
}
li.set-sec-list-item .equipment-label {
padding: 0 2%;
width: 95%;
height: 80px;
text-align: center;
line-height: 1.5;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
li.set-sec-list-item2 .equipment-label {
padding: 0 2%;
width: 95%;
height: 80px;
text-align: center;
line-height: 1.5;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
top: unset;
bottom: 0;
}
li.set-sec-list-item3 {
position: relative;
width: 50%;
height: 300px;
}
li.set-sec-list-item3 img {
width: 100%;
height: 300px;
position: relative;
}
@media (min-width: 1024px) {
li.set-sec-list-item .equipment-label {
max-width: 300px;
width: 96%;
height: 80px;
font-size: 18px;
line-height: 1;
}
li.set-sec-list-item2 .equipment-label {
max-width: 300px;
width: 96%;
height: 80px;
font-size: 18px;
line-height: 1;
}
.set-sec-list .in .img {
margin-bottom: 0.3rem;
height: 3rem;
}
.set-sec-list .in .img img {
height: 3rem;
width: 100%;
}
.pc-flex {
flex-direction: column; 
height: 250px;
}
}
.btn::after {
position: absolute;
right: 15px;
top: 50%;
content: "▶";
color: #2cb37d;
background: #fff;
font-size: 14px;
padding-left: 2px;
height: 24px;
width: 22px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
p.coution {
padding-top: 20px;
}  @media (max-width: 768px) {
.pc_block{
display: none;
}
.sp_block{
display: block;
}
.pc_inline{
display: none;
}
.sp_inline{
display: inline;
}
.tab-2{
justify-content: center;
}
.tab-2 > label {
order: -1;
margin-bottom: 10px;
}
.tab-2 > label:last-of-type {
margin-right: auto;
}
.tab-2 > label:first-of-type {
margin-left: auto;
} .service-nav{
padding-inline: 20px;
width: 100%;
box-sizing: border-box;
height: auto;
}
.service-nav ul {
margin: 15px auto;
gap: 0.1rem;
height: auto;
}
.service-nav li {
width: 100%;
}
.service-nav a {
font-size: 1.5em;
}
.service-nav .arrow {
display: inline;
font-size: 1em;
opacity: 0.9;
margin-left: 5px;
} section{
width: 100%;
}
.equipment-section_1 .inner-k, .equipment-section_2 .inner-k {
width: auto;
padding: 60px 20px 100px;
margin: 0 auto;
}
.equipment-image {
position: relative;
width: 100%;
margin-right: 0;
min-width: 280px;
margin-bottom: 30px;
}
.equipment-container
{
flex-direction: column;
}
.equipment-content,
.equipment-content1,
.equipment-content2 {
width: 100%;
}
.equipment-content1 li {
width: 100%;
}
.btn-wrap {
text-align: center;
} .equipment-label {
position: absolute;
z-index:10;
top: 0px;
left: 0px;
background: #2cb3b3;
color: #fff;
font-size: 1.5em;
padding: 0px 20px;
font-weight: bold;
height: 45px;
line-height: 45px;
}
.equipment-label2 {
font-size: 1.5em;
}
.set-sec-list-item3 span.equipment-label {
z-index: 10;
width: 60%;
text-align: center;
}
.equipment-list li {
display: block;
}
.equipment-list .name::before, .equipment-list .name2::before {
top: 0px;
}
.equipment-list .name {
display: block;
margin-top: 0.1rem;
font-size: 20px;
}
.equipment-list .name2 {
font-size: 20px;
}
.equipment-list .price {
margin: 0.1rem 0 0;
text-align: right;
display: block;
font-size: 16px;
}
.equipment-list .price2 {
font-size: 12px;
}
.equipment-list .en {
font-size: 12px;
font-weight: bold;
vertical-align: baseline;
color: #222222;
}
.equipment-list .subt {
font-size: 12px;
}
.service-nav a {
display: block;
background: #26aebf;
color: #fff;
font-weight: bold;
text-align: center;
padding: 0.1rem 0.2rem 0.1rem 0.1rem;
width: fit-content;
height: auto;
} .equipment-example ul {
padding: 0px;
}
.equipment-example li {
padding: 10px 30px 10px 0;
} .flex-a {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn-wrap{
width: 52%;
}
.btn,.btn3{
font-size: 16px;
width: 100%;
height: 50px;
line-height: 50px;
padding-left: 20px;
padding-right: 0px;
position: relative;
margin: 0;
box-sizing: border-box;
}
.btn::after {
position: absolute;
right: 15px;
top: 50%;
content: "▶";
color: #2cb37d;
background: #fff;
font-size: 12px;
padding-left: 2px;
height: 20px;
width: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.btn3::after {
position: absolute;
content: url(/r_sys_admin/wp-content-renov/themes/renovation-theme/img/price/arrow5.png) ;
right: 15px;
top: 50%;
transform: translateY(-40%);
}
.service-nav a {
height: 20px;
} .contentsArea .title {
font-size: 0.13rem;
padding-left: 0.3rem;
}
.sp-none {
display: none;
}
.equipment-label {
font-size: 11px !important;
padding: 0 1%;
width: 40%;
}
li.set-sec-list-item {
width: 50%;
height: auto;
aspect-ratio: 3 / 4;
position: relative;
max-height: 5rem;
}
li.set-sec-list-item2 {
width: 50%;
height: auto;
aspect-ratio: 3 / 4;
position: relative;
max-height: 5rem;
}
li.set-sec-list-item img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
width: 100%;
max-height: 5rem;
}
li.set-sec-list-item2 img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
width: 100%;
max-height: 5rem;
}
li.set-sec-list-item .equipment-label {
padding: 0 2%;
width: 96%;
height: 40px;
}
li.set-sec-list-item2 .equipment-label {
padding: 0 2%;
width: 96%;
height: 40px;
}
}
.set-sec-list .clearfix {
width: 100%;
max-width: 1060px;
}
.set-sec-list .in .bef03 {
float: left;
clear: both;
}
.set-sec-list .in .aft03 {
float: right;
}
.detailArea .content .change .in {
position: relative;
margin-top: -0.7rem;
}
.set-sec-list .in .before:before {
background: url(//renovation-r.co.jp/img/case/single-case/arrow_right.png);
background-size: contain;
content: "";
background-repeat: no-repeat;
height: 1rem;
position: absolute;
top: 0;
left: 106%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, 50%);
width: 0.1rem;
}
.set-sec-list .in .img {
position: relative;
width: 47.1%;
margin-top: 0.3rem;
max-height: 4.5rem;
}
.set-sec-list .in .img img {
max-height: 4.5rem;
max-width: 500px;
}
.set-sec-list .in .before:after {
background: url(//renovation-r.co.jp/img/case/single-case/mark_before.png);
background-size: contain;
position: absolute;
content: "";
background-repeat: no-repeat;
height: 0.35rem;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 1.5rem;
}
.set-sec-list .in .after:after {
background: url(//renovation-r.co.jp/img/case/single-case/mark_after.png);
background-size: contain;
position: absolute;
content: "";
background-repeat: no-repeat;
height: 0.35rem;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 1.5rem;
}
@media screen and (max-width: 460px) {
.set-sec-list .in .img img {
height: 1.1rem;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.set-sec-list .in .before:after {
height: 0.8rem;
}
.set-sec-list .in .after:after {
height: 0.8rem;
}
.set-sec-list .in .before:before {
height: 2rem;
top: 25%;
width: 0.3rem;
}
.set-sec-list .in .after:before {
height: 2rem;
top: 25%;
width: 0.3rem;
}
.set-sec2 li.set-sec-list-item {
aspect-ratio: 4 / 3;
}
.set-sec2 li.set-sec-list-item2 {
aspect-ratio: 4 / 3;
}
.set-sec2 li.set-sec-list-item img {
aspect-ratio: 4 / 3;
}
.set-sec2 li.set-sec-list-item2 img {
aspect-ratio: 4 / 3;
}
} #kitchen-reform,
#toilet-reform,
#bathroom-reform,
#sink-reform,
#toilet-wall-reform,
#wallpaper-reform,
#siding-reform, 
#paint-reform,
#antenna-reform {
scroll-margin-top: 100px!important;
}