*{padding:0;margin:0;box-sizing: border-box;line-height:1.8}
img{max-width:100%}
html {scroll-behavior: smooth;}
:root {
  --max-width: 1000px;
  --padding-side: 3%;
  --padding-pc:30px;
  --padding-sp: 30px;
  --wrapper-bg: #E3C891;

  --ff-base: "TBUDゴシック R","TBUDGothic R",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,"游ゴシック Medium",YuGothic,YuGothicM,sans-serif;
  --ff-bold: "TBUDゴシック B","TBUDGothic B",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,"游ゴシック Medium",YuGothic,YuGothicM,sans-serif;
}

.rc-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--padding-pc) var(--padding-side);
  font-family: var(--ff-base);
font-weight: normal;
    box-sizing: border-box;
}
.rc-wrapper2{max-width: var(--max-width);
  margin: 0 auto;font-family: var(--ff-base);
font-weight: normal;
    box-sizing: border-box;}
@media (max-width: 1000px) {
.rc-wrapper{margin:0 3%}
}
.bold {font-family: var(--ff-bold);font-weight: bold;}

/* title */
.rc-h2{font-family: var(--ff-base);}
.rc-title{width: 20%;}
.rc-title img{vertical-align: bottom}
@media (max-width: 768px) {.rc-title{width: 60%;}}

.pcOnly{display: block}
.spOnly{display:none}
h2.rc-h2{background: var(--wrapper-bg);font-weight: normal;width: 100%;}
@media (max-width: 768px) {
.rc-wrapper {padding: var(--padding-sp) var(--padding-side);}
.spOnly{display: block}
.pcOnly{display:none}
h2.rc-h2{padding: 0 3%;width: 100%;box-sizing: border-box;}
}

/* position */
.indent div{text-indent: -1em;padding-left: 1em;}
.t-a-c{text-align:center}
.t-a-l{text-align:left !important;}
.u-d-f { display: flex !important; }
.u-jc-c { justify-content: center !important; }
.u-ai-c { align-items: center !important; }
.u-ai-s { align-items: stretch !important; }
.u-jc-sa { justify-content: space-around !important; }
.u-pos-r { position: relative !important; }
@media (max-width: 768px) {
  .u-d-b-sp { display: block !important; }  
}

/* 余白 */
.u-pl10{padding-left: 10px}
.u-pr10{padding-right: 10px}
.u-pb10{padding-bottom: 10px}
.u-pb20{padding-bottom: 20px}
.u-pt10{padding-top: 10px}
.u-pt20{padding-top: 20px}
.u-mb10{margin-bottom: 10px}
.u-mt10{margin-top: 10px}
.u-mt20{margin-top: 20px}
.u-mt50{margin-top: 50px}
@media (max-width: 768px) {
    .u-pt20-sp{padding-top: 20px !important}
    .u-pb20-sp{padding-bottom: 20px !important}
}

/* icon */
.icon-img img{width: 1.2em;vertical-align: middle;}
@media (max-width: 768px) {.icon-img img{width: 2em;}}

/* font */
.font1s{font-size: clamp(16px, 3vw, 20px);}
.font1{font-size: clamp(19px, 3.2vw, 24px);}
.font2{font-size: clamp(19px, 4.4vw, 28px);}
.font3{font-size: clamp(19px, 4.8vw, 35px);}
@media (max-width: 768px) {
.font1sp{font-size: .8em !important;}
}

/* color */
.red1{color: #C05A45}
.red2{color: #EC2D2D}
.remotecontrol-change-lp-wrapper a{color: #EC2D2D;}
.remotecontrol-change-lp-wrapper a:hover{text-decoration: none}

/* bg */
.rc-bg-white{background: #fff}
.rc-marker {background: linear-gradient(transparent 50%, #FFDF41 50%);}

/* border-radius */
.br25{border-radius: 25px}

/* kv */
.rc-kv-img{max-width: 1000px;margin:0 auto}
.rc-kv{background: #FAF5EA}

/* nayami */
.rc-nayami-img{width: 60%;margin:0 auto}
.rc-nayami{background: #F4F1EA;padding:20px 0;}
.rc-nayami-inner{border: solid #D0C8BC 20px}
.rc-line{border-bottom:4px dotted #D0C8BC;padding:10px}
@media (max-width: 768px) {
    .rc-nayami-img{width: 90%;margin:0 auto}
    .rc-nayami-inner{border: solid #D0C8BC 10px}
}

/* 実は、給湯機器のリモコンは、蓋だけ購入、
自分で交換ができるんです！ */
.rc-diy{background: #FAF5EA;padding: 20px 0 0;}
.rc-arrow{vertical-align: top;width: 15%;margin: 0 auto;}
.diy-box{gap:20px}
.diy-box div{background: #E3C891;flex: 1 1 auto;padding: 1em;box-sizing: border-box;display: flex;align-items: center;justify-content: center;outline-offset: -10px;outline: 2px dashed rgb(255, 255, 255);}
.flex-column{display: flex; flex-direction: column; justify-content: center; text-align: center;}
.rc-arrow2 {width: 18%;position: absolute;bottom: -33px;left: 42%;}
.koukan-box{padding:20px}
.koukan-img{width: 30%;padding-right: 20px}
.rc-arrow img, .rc-arrow img{vertical-align: top;}
@media (max-width: 768px) {
.rc-arrow{width: 27vw;}
.rc-arrow2{width: 40%;left: 30%;}
.diy-box div {margin-bottom: 15px;}
.koukan-img{width: 100%;padding-right: 0px;}
    }

/* rc-button */
.rc-button{width: 45%;margin:0 auto}
.rc-button a:hover {opacity: .8;}
@media (max-width: 768px) {.rc-button{width:94%;margin:0 auto}}

/* rc-uservoice */
.rc-uservoice{border:8px solid #E3C891}
.rc-uservoice-img{width: 40%;padding-right: 20px}
@media (max-width: 768px) {
.rc-uservoice-img{width: 50%;padding-right: 0px;margin:0 auto;padding-bottom: 10px;}
    }

/* qa */
.rc-qa{background: #F4F1EA;padding-bottom: 30px}
.rc-qa-title{color: #C05A45;border-bottom: #D0C8BC 2px solid;padding-bottom: 10px;margin-bottom: 10px;}
.rc-series-title th {padding:10px;border-bottom: 2px solid;}
.rc-series-title td {text-align: center;padding:20px 10px;}
.rc-series{border: 2px solid #2E2E2E;width: 100%;box-sizing: border-box;border-spacing: 0 !important;border-bottom:none;border-top:none}
.rc-series td {padding:40px 10px;text-align: center;border-bottom: 2px solid #2E2E2E;vertical-align: middle;}
.va-middle{vertical-align: middle;}
.rc-series-title{background: #5F6A7A;color: #fff}
.rc-series > td:first-child{vertical-align: top}
.rc-series-title th:not(:last-child){border-right: 2px solid #2E2E2E}
table.rc-series tr td:not(:last-child) {border-right: 2px solid #2E2E2E;}
.rc-th1{width: 40%;vertical-align: top}
.rc-th2{width: 40%}
.rc-th3{width: 20%}
button {border: none;background: #EC2D2D;color: #fff;padding: 10px;border-radius: 8px;}
.rc-series a button {cursor: pointer;}
.rc-series a button:hover{opacity: .7}
table td:empty{
    background-image: linear-gradient(to right bottom, transparent calc(50% - 1px), #000 calc(50% - .5px), #000 calc(50% + .5px), transparent calc(50% + 1px), #fff);
    background-repeat: no-repeat;
}
tr.table-empty {height: 13em;}
tr.table-empty2 {height: 10em;}
button#toggleBtn {margin: 0 auto;text-align: center;justify-content: center;display: flex;padding: 10px;width: 40%;background: #5F6A7A;color: #fff;margin-top: 5%;}
.rc-change > div{width:calc((100% - 1px)/2)}
.rc-change-title{background: #5F6A7A;padding:5px 20px;width: fit-content;color: #fff;margin:0 auto}
.rc-change div{padding:15px}
.rc-change div:first-child {border-right: 1px dashed #2E2E2E;}
@media (max-width: 768px) {
.rc-th1{width: 30%;vertical-align: top}
.rc-th2{width: 40%}
.rc-th3{width: 30%}
tr.table-empty {height: 8em;}
tr.table-empty2 {height:6em;}
    }
@media (min-width: 767.9px) {.rc-series-pd{padding:10px !important}}
table.rc-series { table-layout: fixed; width: 100%; }
table#rc-series img , .rc-th1 img, .rc-th2 img{height: 120px;object-fit: contain;}