@charset "UTF-8";

.blue { background: #CDD6DD;
    .wrap { background: #fff; border-radius: 10px; box-shadow: 0px 0px 15px -5px #777777; margin-bottom: var(--space-mlg); padding-block: var(--space-mlg); }
    .access { background: #fff;
        .access__title { background: #CDD6DD; }
    }
}

.breadcrumb__list { display: flex; list-style-type: none; padding-block: var(--space-sm) var(--space-mlg);
    .breadcrumb__item { font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
        span { color: var(--base-color); }
        a {
            span { color: #303030; }
        }
    }
    .breadcrumb__item:has(a) { padding-right: 25px; margin-right: 15px; position: relative; }
    .breadcrumb__item:has(a)::after { position: absolute; top: 55%; right: 0; transform: translateY(-50%); content: '\f054'; font-family: "Font Awesome 5 Pro"; font-size: 0.8em; }
}

.wrap__inner { inline-size: 96%; max-inline-size: 960px; margin-inline: auto; }
.gradation__horizontal { background: rgb(255,147,0); background: linear-gradient(90deg, rgba(255,147,0,1) 0%, rgba(204,31,0,1) 100%); color: #fff; }
.lead { text-align: center; padding-block: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--font-large); }
.t-center { text-align: center; }
.page__head { color: var(--base-color); padding-bottom: var(--space-md); }

.kanta { padding-bottom: var(--space-mlg);
    .kanta__head { font-size: var(--font-xlarge);
        span { font-size: clamp(1px, 10vw, 100px); padding-left: 20px; }
    }
    .kanta__select { display: flex; justify-content: space-between;
        .kanta__select-btn { font-size: var(--font-base); inline-size: 32%; background: var(--base-color); border: 1px solid var(--base-color); color: #fff; border-radius: 10px; padding-block: var(--space-md); line-height: 1.5; }
        .kanta__select-btn[href] { background: #fff; color: var(--base-color); }
    }
}

.setup { border-bottom: var(--border); padding-bottom: var(--space-lg); margin-bottom: var(--space-lg);
    .setup__title { font-size: clamp(1px, 6vw, 60px); padding-bottom: var(--space-md); }
    .setup__desc { font-size: var(--font-xlarge); line-height: 1.5; padding-bottom: var(--space-md); }
    .setup__img { padding-bottom: var(--space-md); }
    .setup__grid {
        .setup__grid-img { display: block; }
        .setup__grid-desc { font-size: var(--font-base); line-height: 1.5; }
    }
}

.rental {
    .kanta__select { padding-bottom: var(--space-lg);}
    .weeks {
        .lease_push__able { padding-bottom: var(--space-md);}
        h2 { font-size: clamp(1px, 10vw, 100px); line-height: 1.5;}
        .weeks__grid { display: flex; align-items: center; justify-content: center; padding-bottom: var(--space-lg);
            img { inline-size: 48%; }
            .weeks__grid-desc { inline-size: 48%;
                p { display: table; margin-inline: auto; padding-bottom: var(--space-md); }
            }
        }
        .minutes { display: block; max-inline-size: 600px; inline-size: 70%; margin-inline: auto; }
    }
}
.attractive { background: #FFF6DD; position: relative; margin-bottom: var(--space-mlg);
    h2 { font-size: clamp(1px, 7vw, 70px); line-height: 1.5; padding-bottom: var(--space-md); }
    .attractive__head { font-size: clamp(1px, 7vw, 70px); line-height: 1.5; padding-bottom: var(--space-sm);
        span { color: var(--base-color); }
    }
    .attractive__head-sub { padding-bottom: var(--space-lg); }
    .attractive__list { display: table; margin-inline: auto;
        li { font-size: var(--font-xlarge); line-height: 1.5; }
    }
    .attractive_img { display: block; max-inline-size: 700px; margin-inline: auto; padding-bottom: var(--space-lg); position: relative; z-index: 2;}
    .line_btn { position: relative; z-index: 2; }
}
.attractive::after { content: ""; display: block; background: #fff; inline-size: 100%; block-size: 30%; position: absolute; bottom: 0; left: 0; z-index: 1; }

.products__list { border-bottom: var(--border); padding-bottom: var(--space-lg); margin-bottom: var(--space-lg);
    .product__card {
        .product__card-img { display: block; }
        .product__card-desc {
            .product__card-head { color: var(--base-color); font-size: var(--font-xlarge); line-height: 1.5; padding-bottom: var(--space-sm);
                img { max-inline-size: 400px;}
            }
            .product__card-kikaku { font-size: 0.9em; padding-bottom: var(--space-sm); }
            .product__card-bikou { padding-bottom: var(--space-sm); display: flex; justify-content: center;
                span { display: table; padding: 4px 12px; margin-right: 16px; line-height: 2; }
                span:last-child { margin-right: 0; }
            }
            .heater_specialplan { display: table; padding: 4px 16px; color: #fff; background: #DE0111; border-radius: 10px; margin-bottom: var(--space-sm); font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif"; }
            .product__card-komikomi { display: block; inline-size: 80%; max-inline-size: 300px; padding-bottom: var(--space-md); }
            .product__card-komikomi:has(img) { inline-size: 100%; max-inline-size: 100%;
                img { display: block; inline-size: 80%; max-inline-size: 300px; padding-bottom: 10px; }
                a { display: table; background: #000; color: #fff; font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif"; padding: 8px 20px; border-radius: 30px; }
            }
            .product__card-price { font-size: var(--font-middle); color: #DE0111; padding-bottom: 8px;
                .red { font-size: clamp(1px, 6vw, 60px); font-weight: bold;}
                .tax { color: #000; }
            }
            .product__card-btn { color: var(--base-color); border: 1px solid var(--base-color); border-radius: 8px; margin-left: 0;}
            .rangehood__card-desc { padding-bottom: var(--space-md);
                .product__card-kikaku { padding-bottom: var(--space-sm); }
                .product__card-komikomi { padding-bottom: var(--space-md); }
            }
            .rangehood__card-desc:last-child { padding-bottom: 0; }
            .product__card-micro { display: table; padding: 4px 12px; color: #fff; font-size: var(--font-xlarge); text-align: center; background: #E43B01; margin-top: 10px; line-height: 1.5;
                span { display: block; font-size: var(--font-base);}
            }
        }
    }
    picture { display: block; padding-bottom: var(--space-mlg); }
    .esthetic { padding-top: var(--space-md); padding-bottom:0;}
    .ecojozu__card-auto { padding-block: 20px var(--space-lg); }
}

.lease_lead { padding-bottom: var(--space-mlg);
    .lease_lead-grid { display: flex; align-items: flex-start;
        .lease_lead-suggest {
            .lease_lead__title { font-size: var(--font-xlarge); padding-bottom: var(--space-md); line-height: 1.5; }
            .lease_lead__list { margin-left: 20px; }
        }
        .lease_lead-img { display: block; }
    }
}
.lease_push { padding-bottom: var(--space-lg);
    .lease_push__title { font-size: clamp(1px, 6vw, 60px); line-height: 1.5; }
    .lease_push-img { display: block; inline-size: 90%; max-inline-size: 500px; margin-inline: auto; margin-bottom: var(--space-lg); }
    .lease_push__catch { font-size: clamp(1px, 5vw, 50px); padding-bottom: var(--space-md); }
    .lease_push__biko { display: flex; justify-content: center; padding-bottom: var(--space-md);
        p { inline-size: 30%; max-inline-size: 240px; text-align: center; padding-block: 8px; }
        p:nth-child(2) { margin-inline: 10px;}
    }
    .lease_push__able { padding-bottom: var(--space-md); }
    .lease_push__price { display: flex; justify-content: center; align-items: flex-end; padding-bottom: var(--space-md);
        .month { display: grid; place-items: center; background: var(--base-color); color: #fff; border-radius: 50%; margin-right: 20px; }
        .yen { font-weight: bold; font-size: clamp(1px, 10vw, 100px); display: table;
            span { font-size: var(--font-xlarge);}
        }
        .tax { display: table; font-size: var(--font-middle);}
    }
    .lease_push__kikaku { text-align: right; line-height: 1.5; }
}
.lease_function {
    .lease_function__title { font-size: clamp(1px, 4vw, 40px); padding-bottom: var(--space-md); }
    .lease_function__grid {
        .lease_function__grid-title { font-size: var(--font-xlarge); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--base-color); }
        .lease_function__grid-list {
            li {
                .lease_function__grid-desc { display: grid; place-items: center; block-size: 100%; font-size: var(--font-large); line-height: 1.5;}
            }
        }
    }
}
.lease_recommend {
    .lease_recommend__list { padding-bottom: var(--space-lg);
        .lease_recommend__list-head { font-size: clamp(1px, 4vw, 40px); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--base-color); line-height: 1.5; }
        .lease_recommend__list-img { display: block; inline-size: 90%; margin-inline: auto; padding-bottom: var(--space-md);}
    }
}
.item_lead { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: var(--border);
    .item_lead__head { font-size: clamp(1px, 6vw, 60px); line-height: 1.5; }
    .item_lead__mainimg,.item_lead__stove { padding-bottom: var(--space-md);}
    .item_lead__desc { padding-bottom: var(--space-lg); line-height: 1.5; }
    .item_lead__set { display: flex;
        img { inline-size: 50%; }
    }
    .rangehood_lead__set { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding-top: var(--space-md);
        img { inline-size: 48%; padding-bottom: var(--space-sm); }
        img:nth-last-child(-n+2) { padding-bottom: 0; }
    }
    .heater_lead-grid { display: flex; justify-content: space-between; padding-bottom: var(--space-md);
        .heater_lead-grid-desc { inline-size: 58%; background: url(../images/family.avif) no-repeat right 20px bottom; background-size: 50% auto;
            .heater_lead-grid-title { padding-bottom: var(--space-md); font-size: var(--font-middle); line-height: 1.5;
                span { display: block; color: var(--base-color); font-size: clamp(1px, 6vw, 60px);}
            }
            ul { list-style-type: square; margin-left: 20px;
                li { padding-bottom: var(--space-sm); font-size: var(--font-middle);}
            }
        }
        img { inline-size: 38%;}
    }
    .heater_lead-pomp { padding-bottom: var(--space-md);}
}
.builtin_products { padding-bottom: var(--space-md);
    .products__list { margin-bottom: var(--space-lg); border-bottom: var(--border);
        .builtin_products__title { font-size: var(--font-xlarge); line-height: 1.5;}
        .product__card { margin-bottom: 0; border-bottom: 0; }
        .product_features { padding-top: var(--space-md); }
    }
    .product_features { 
        .features_builtin__mainimg { padding-bottom: var(--space-md);}
        .delicia_features { display: flex; justify-content: space-between; list-style-type: none; padding-bottom: var(--space-md);
            li { inline-size: 32%;
                img { padding-bottom: var(--space-sm);}
                .delicia_features-name { color: var(--base-color); padding-bottom: var(--space-sm); font-size: var(--font-middle);}
            }
        }
    }
}
.table_products { padding-bottom: var(--space-md);
    .products__list { margin-bottom: var(--space-lg); border-bottom: var(--border);
        .table_products__title { font-size: var(--font-xlarge); line-height: 1.5;
            span { display: block; color: #000; font-size: var(--font-base); padding-bottom: 10px;}
        }
        .product__card { margin-bottom: 0; border-bottom: 0; }
        .product_features { padding-top: var(--space-md); }
    }
    .product_features {
        .features_table__mainimg { padding-bottom: var(--space-md); }
        .product_features-title { font-size: var(--font-xlarge); line-height: 1.5; }
    }
}

.delicia_alignment { padding-bottom: var(--space-lg);
    .delicia_alignment-mainimg { padding-bottom: var(--space-md); }
    .delicia_alignment-grid { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse;
        .delicia_alignment-grid-desc { inline-size: 66%;
            .delicia_alignment-title { font-size: var(--font-large); padding-bottom: var(--space-sm); color: var(--base-color);}
        }
        img { inline-size: 30%;}
    }
}

.rangehood_komikomi { padding-bottom: var(--space-mlg);
    .lead { margin-bottom: var(--space-md);}
    ul { display: table; margin-inline: auto;
        li { padding-bottom: var(--space-sm);}
        li:last-child { padding-bottom: 0; }
    }
}

.hybrid {
    .hybrid__about { padding-bottom: var(--space-lg);
        .hybrid__head { color: var(--base-color); font-size: clamp(1px, 9vw, 90px); text-align: center; line-height: 1.5; padding-bottom: var(--space-lg); }
        a { display: block; max-inline-size: 600px; margin-inline: auto; margin-bottom: var(--space-md); }
        .hybrid__ecoone { display: table; margin-inline: auto; margin-bottom: var(--space-md); padding-bottom: 10px; border-bottom: 1px solid #000; font-size: var(--font-middle);}
        .hybrid__lead { color: var(--base-color); padding-bottom: var(--space-md); font-size: clamp(1px, 4vw, 40px);}
    }
    .hybrid__cost { padding-bottom: var(--space-lg);
        .hybrid__cost-head { color: var(--base-color); padding-bottom: var(--space-md); font-size: clamp(1px, 4vw, 40px); line-height: 1.5;}
    }
    .hybrid__eco { padding-bottom: var(--space-lg);
        .hybrid__eco-grid { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-md);
            img { inline-size: 30%;}
            p { inline-size: 60%; }
        }
    }
    .hybrid__running { padding-bottom: var(--space-lg);
        img { display: block; max-inline-size: 600px; margin-inline: auto; padding-bottom: var(--space-md); }
    }
    .hybrid__resilience { padding-bottom: var(--space-lg);
        .hybrid__resilience-head { color: var(--base-color); padding-bottom: var(--space-md); font-size: clamp(1px, 4vw, 40px); line-height: 1.5; }
        .hybrid__resilience-grid { display: flex; align-items: center; justify-content: space-between;
            img { inline-size: 36%;}
            p { inline-size: 60%; }
        }
    }
    .hybrid__washing {
        .hybrid__washing-mainimg { padding-bottom: var(--space-md); }
    }
}

.sekiyu_lead { margin-bottom: 0; border-bottom: none;
    p { padding-bottom: var(--space-md);}
    a { display: block; margin-bottom: var(--space-md); }
    a:last-child { margin-bottom: 0; }
}
.oil_lead { margin-bottom: 0; border-bottom: none; }

.banner_waterheater { padding-bottom: var(--space-md); }

.norikae_lead { padding-bottom: var(--space-lg);
    .norikae_lead__head { line-height: 1.5; color: #000;
        span { color: var(--base-color); }
        strong { display: inline-block; font-size: 1.5em;}
    }
    .norikae_lead-grid { display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none;
        li { inline-size: 32%; padding-bottom: var(--space-md);
            img { padding-bottom: 10px; }
            .norikae_lead-grid-title { display: table; margin-inline: auto; color: var(--base-color); padding-bottom: var(--space-sm); font-size: var(--font-middle); line-height: 1.5;}
        }
    }
}
.eco_jozu { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: var(--border);
    .eco_jozu-grid { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--space-md);
        > img { inline-size: 48%; }
        .eco_jozu-grid-desc { inline-size: 48%;
            img { display: block; max-inline-size: 300px; margin-inline: auto; padding-bottom: var(--space-md);}
            .eco_jozu-grid-desc-title { color: var(--base-color); font-size: var(--font-large); padding-bottom: var(--space-md);}
            p { line-height: 1.5;}
        }
    }
}

.about_komikomi { padding-bottom: var(--space-lg);
    .about_komikomi-lead { font-size: var(--font-large); border-bottom: 1px solid var(--base-color); padding-bottom: 10px; margin-bottom: var(--space-md);}
    .about_komikomi-head { line-height: 1.5; font-size: clamp(1px, 4vw, 40px); padding-bottom: var(--space-md);
        strong { display: inline-block; font-size: clamp(1px, 8vw, 80px);}
        span { color: var(--base-color);}
    }
    .about_komikomi-title { font-size: var(--font-xlarge); padding-block: var(--space-mlg) var(--space-md); background: url(../images/komikomi_about.avif) no-repeat right bottom; background-size: auto 100%;
        span { color: var(--base-color); font-size: 2em;}
    }
    .about_komikomi-inner { background: #FFF8D3; border-radius: 10px; padding: var(--space-md); padding-bottom: 0;
        .about_komikomi-inner-grid { display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none;
            li { inline-size: 48%; padding-bottom: var(--space-md);
                img { padding-bottom: 10px;}
                p { text-align: center; }
            }
        }
        .about_komikomi-inner-head { color: var(--base-color); line-height: 1.5; padding-bottom: var(--space-lg);}
        .about_komikomi-inner-img { max-inline-size: 650px; margin-inline: auto; position: relative;
            img { position: relative; }
            p { position: absolute; inline-size: 50%; right: 0; bottom: 20px;}
        }
    }
}

.line_btn { display: block; background: #399D25; color: #fff; inline-size: 80%; max-inline-size: 300px; text-align: center; padding: var(--space-sm) 0; margin-inline: auto; margin-bottom: var(--space-lg); border-radius: 10px; font-size: var(--font-middle);}

.commitment { background: #E3F5FF; padding: var(--space-md); padding-bottom: 0; border-radius: 10px; margin-bottom: var(--space-mlg);
    .commitment__head { font-size: clamp(1px, 6vw, 60px); line-height: 1.5; color: var(--base-color); padding-bottom: var(--space-lg);}
    .commitment__head-sub { background: #FFF2BC; border: 1px solid #707070; border-radius: 8px; padding: 10px; margin-bottom: var(--space-md); font-size: var(--font-large); line-height: 1.5;
        > span { display: table; margin-inline: auto;
            span { color: var(--base-color); }
        }
    }
    .commitment__reassurance { font-size: var(--font-middle); line-height: 1.5; margin-bottom: var(--space-md);
        > span { display: table; margin-inline: auto; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--base-color);
            span { color: var(--base-color);}
        }
    }
    .commitment__illust { display: block; max-inline-size: 700px; margin-inline: auto; padding-bottom: var(--space-md);}
    .commitment__merit {
        .commitment__merit-list {
            dt { color: var(--base-color); padding-bottom: var(--space-sm); font-size: var(--font-middle);}
            dd { padding-bottom: var(--space-md);}
        }
    }
}

.gas_change { padding-bottom: var(--space-lg);
    .gas_change-grid { padding-bottom: var(--space-lg);
        p {
            span { display: block; padding-bottom: var(--space-md);}
        }
    }
    .selfcheck {
        .selfcheck_list { list-style-type: none;
            li { font-size: var(--font-middle); line-height: 1.5; padding-bottom: var(--space-md);}
        }
        .list-number { list-style-type: decimal; margin-left: 30px;}
        .selfcheck_sub { color: var(--base-color); font-size: var(--font-xlarge); padding-bottom: var(--space-md);}
        h4 { color: var(--base-color); line-height: 1.5; font-size: 3em; padding-bottom: var(--space-md);}
        .koukan-staff { padding-bottom: var(--space-lg);}
    }
}
.boiler_customer { padding-bottom: var(--space-lg);
    .boiler_customer-head { color: var(--base-color); line-height: 1.5; font-size: clamp(1px, 4vw, 40px); padding-bottom: var(--space-md);}
    .boiler_customer-oil { padding-bottom: var(--space-lg);
        .boiler_customer-grid { padding-bottom: var(--space-md);}
        .before_after { padding-bottom: var(--space-md);}
        .boiler_customer-oil-sub { font-size: clamp(1px, 4vw, 40px); line-height: 1.5; color: var(--base-color); padding-bottom: var(--space-md);}
    }
    .boiler_customer-grid {
        ul { list-style-type: none;
            li { font-size: var(--font-middle); padding-bottom: var(--space-sm); line-height: 1.5;}
        }
    }
}

.function__grid-list { display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none;
    li { inline-size: 48%; padding-bottom: var(--space-lg);
        img { padding-bottom: var(--space-sm); }
        .function__grid-listhead { display: table; margin-inline: auto; color: var(--base-color); font-size: var(--font-middle); line-height: 1.5; }
        .function__grid-desc { padding-top: var(--space-sm); }
    }
}

.wrap__area {
    .wrap__area-head { font-size: clamp(1px, 4vw, 40px); padding-bottom: var(--space-md); line-height: 1.5; }
    .wrap__area-grid {
        .wrap__area-lead { font-size: var(--font-large); display: grid; place-items: center; }
        .wrap__area-list { color: var(--base-color); font-size: var(--font-large); line-height: 1.5;
            span { display: block; color: #000; font-size: var(--font-base); }
        }
    }
}

.news { max-inline-size: 800px; padding-bottom: var(--space-mlg);
    .news__title { text-align: center; }
    ul { list-style-type: none; border-left: 16px solid var(--base-color); padding: 0 0 var(--space-sm) var(--space-lg); margin-bottom: var(--space-lg);
        li { padding-block: var(--space-sm); border-bottom: var(--border);
            a { font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif"; font-size: var(--font-middle); display: block; line-height: 1.5;
                time { display: block; color: var(--base-color); font-size: 0.9em; }
            }
        }
    }
}
.entry { max-inline-size: 800px; padding-bottom: var(--space-mlg); font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
    .entry__head { display: table; margin-inline: auto; }
    time { display: block; text-align: right; padding-bottom: var(--space-lg); }
    .entry__contents { line-height: 1.5;
        p { padding-bottom: var(--space-md); font-size: var(--font-middle); }
        p:last-child { padding-bottom: 0; }
    }
}

.works { padding-bottom: var(--space-mlg);
    .works__head { text-align: center; }
    .works__grid { display: flex; flex-wrap: wrap;
        .works__grid-card { inline-size: 32%; padding-bottom: var(--space-lg); font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
            a {
                > img { padding-bottom: var(--space-sm); }
                h2 { color: var(--base-color); font-size: var(--font-middle); padding-bottom: var(--space-sm); }
                .works__grid-card-desc { padding-bottom: var(--space-sm);
                    p { font-size: var(--font-base); line-height: 2;}
                }
                span { background: var(--base-color); color: #fff; display: block; text-align: center; padding-block: 10px; }
            }
        }
        .works__grid-card:nth-child(3n+2) { margin-inline: 2%; }
    }
}
.works__area { padding-bottom: var(--space-mlg); }
.detail { padding-bottom: var(--space-mlg);
    .detail__contents { font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
        .detail__contents-grid { padding-bottom: var(--space-lg); display: flex; justify-content: space-between; align-items: center;
            .photo { inline-size: 48%; }
            .detail__contents-grid-desc { inline-size: 48%; font-size: var(--font-middle); line-height: 1.5; border-collapse:collapse;
                thead { background: var(--base-color); color: #fff; text-align: center;
                    td { padding-block: 10px; }
                }
                tbody {
                    th,td { border: 1px solid var(--base-color); padding: 10px 8px; }
                    th { background: #ffeedb; }
                }
            }
        }
        .detail__contents-ba { padding-bottom: var(--space-lg);
            .head { padding-bottom: var(--space-md); line-height: 1; }
            .detail__contents-ba-grid { display: flex; justify-content: space-between; align-items: flex-start;
                p { inline-size: 48%; font-size: 20px; margin-bottom: var(--space-sm); font-weight: bold; }
                .detail__contents-before { color: blue;}
                .detail__contents-after { color: red;}
            }
        }
        .detail__contents-overview {
            .detail__contents-overview-head { color: var(--base-color); text-align: center; font-size: var(--font-large); padding-bottom: var(--space-md);}
            .detail__contents-overview-grid { display: flex; border: 1px solid #666;
                .detail__contents-overview-desc { inline-size: 50%;
                    dt { text-align: center; background: #ccc; padding-block: 10px;}
                    dd { padding: 10px;}
                }
                .detail__contents-overview-desc:first-child { border-right: 1px solid #666;}
            }
        }
    }
}

@media (max-width: 560px){
    .blue {
        .wrap { padding-block: var(--space-lg); }
        .wrap.w90 { inline-size: 96%; }
    }

    .breadcrumb__list { padding-block: var(--space-sm) var(--space-lg);
        .breadcrumb__item {
            span { font-size: 3.5vw; }
        }
        .breadcrumb__item:has(a) { padding-right: 18px; margin-right: 10px; }
        .breadcrumb__item:has(a)::after { top: 45%; font-size: 3vw; }
    }
    .lead { font-size: 4vw; }

    .kanta {
        .kanta__head { font-size: 4vw;
            span { font-size: 9vw; }
        }
        .kanta__select { flex-direction: column;
            .kanta__select-btn { inline-size: 100%; font-size: 3.5vw; margin-bottom: var(--space-sm); }
            .kanta__select-btn:last-child { margin-bottom: 0; }
        }
    }

    .setup {
        .setup__title { font-size: 7vw; }
        .setup__desc { font-size: 4vw; }
        .setup__grid {
            .setup__grid-img { padding-bottom: 10px; }
            .setup__grid-desc { font-size: 4vw; line-height: 2; }
        }
    }

    .rental {
        .weeks { position: relative;
            h2 { font-size: 7vw; position: relative; z-index: 2; }
            .weeks__grid { flex-direction: column; position: relative; z-index: 1;
                img { display: block; inline-size: 80%; margin-inline: auto; margin-top: -15vw; padding-bottom: var(--space-md); }
                .weeks__grid-desc { inline-size: 100%;
                    p { font-size: 4vw; line-height: 1.5; }
                }
            }
        }
    }
    .attractive {
        h2 { font-size: 6vw; }
        .attractive__head { font-size: 6vw; }
        .attractive__head-sub { font-size: 3.5vw; }
        .attractive__list {
            li { font-size: 4vw; padding-bottom: var(--space-sm); }
        }
    }

    .products__list {
        .product__card {
            .product__card-img { inline-size: 80%; margin-inline: auto; padding-bottom: var(--space-md); }
            .product__card-desc {
                .product__card-head { font-size: 5vw; text-align: center;
                    img { inline-size: 80%; }
                }
                .product__card-kikaku { font-size: 3.5vw; line-height: 1.5; display: table; margin-inline: auto; }
                .product__card-bikou {
                    span { font-size: 3.5vw; }
                }
                .product__card-komikomi { max-inline-size: 200px; margin-inline: auto; }
                .product__card-komikomi:has(img) { max-inline-size: 100%;
                    img { max-inline-size: 200px; margin-inline: auto; }
                    a { margin-inline: auto; font-size: 3.5vw; }
                }
                .product__card-price { font-size: 4.5vw; text-align: center;
                    .red { font-size: 10vw;}
                }
                .heater_specialplan { font-size: 3.5vw; line-height: 1.5; margin-inline: auto; }
                .product__card-micro { font-size: 5vw; margin-inline: auto;
                    span { font-size: 3.2vw;}
                }
            }
        }
        .oil_product__card {
            .product__card-auto { padding-top: var(--space-md); }
        }
    }

    .lease_lead {
        .lease_lead-grid { justify-content: space-between;
            .lease_lead-suggest { inline-size: 50%;
                .lease_lead__title { font-size: 5vw; }
                .lease_lead__list {
                    li { font-size: 3.5vw; line-height: 1.5; padding-bottom: 10px;}
                }
            }
            .lease_lead-img { inline-size: 46%; }
        }
    }
    .lease_push {
        .lease_push__biko {
            p { font-size: 3.5vw; }
        }
        .lease_push__price {
            .month { inline-size: 12vw; block-size: 12vw; font-size: 4vw; }
            .yen { font-size: 17vw;
                span { font-size: 5vw;}
            }
            .tax { font-size:4vw;}
        }
        .lease_push__kikaku { font-size: 3.5vw; }
    }
    .lease_function {
        .lease_function__title { font-size: 6vw; }
        .lease_function__grid {
            .lease_function__grid-title { font-size: 4.5vw; }
            .lease_function__grid-list {
                li {
                    .lease_function__grid-desc { font-size: 4vw; }
                }
            }
        }
    }
    .lease_recommend {
        .lease_recommend__list {
            .lease_recommend__list-head { font-size: 4.5vw; }
            .lease_recommend__list-desc { font-size: 3.2vw; line-height: 1.5; }
        }
    }

    .item_lead {
        .item_lead__head { font-size: 5vw; }
        .item_lead__desc { font-size: 3.5vw; }
        .item_lead__set { flex-direction: column;
            img { inline-size: 100%; }
        }
        .rangehood_lead__set { flex-direction: column;
            img { inline-size: 100%; }
            img:nth-last-child(2) { padding-bottom: var(--space-sm); }
        }
        .heater_lead-grid { flex-direction: column;
            .heater_lead-grid-desc { inline-size: 100%; background: url(../images/family.avif) no-repeat right bottom 30px; background-size: 40% auto; padding-bottom: 30px;
                .heater_lead-grid-title { font-size: 4vw;
                    span { font-size: 6vw;}
                }
                ul {
                    li { font-size: 4vw; line-height: 1.5;}
                }
            }
            img { inline-size: 100%;}
        }
    }

    .builtin_products {
        .products__list {
            .builtin_products__title { font-size: 3.5vw; }
            .product__card {
                .product__card-desc {
                    .product__card-head {
                        img { display: block; inline-size: 60%; margin-inline: auto; }
                    }
                }
            }
        }
        .product_features {
            .delicia_features { flex-direction: column;
                li { inline-size: 100%; font-size: 3.5vw; line-height: 1.5; padding-bottom: 30px;
                    .delicia_features-name { font-size: 5vw; line-height: 1.5; }
                }
            }
        }
    }
    .table_products {
        .products__list {
            .table_products__title { font-size: 4vw;
                span { font-size: 3.5vw;}
            }
        }
        .product_features {
            .product_features-title { font-size: 4vw; }
        }
    }

    .delicia_alignment {
        .delicia_alignment-grid { flex-direction: column;
            .delicia_alignment-grid-desc { inline-size: 100%;
                p { font-size: 3.5vw; line-height: 1.5; padding-bottom: 20px;}
                .delicia_alignment-title { font-size: 4.5vw; text-align: center; }
            }
            img { display: block; inline-size: 60%; margin-inline: auto; }
        }
    }

    .rangehood_komikomi {
        .lead { font-size: 4.5vw; }
        ul { margin-left: 20px;
            li { font-size: 3.2vw; line-height: 1.5; }
        }
    }

    .hybrid {
        .hybrid__about {
            .hybrid__ecoone { font-size: 4vw;}
            .hybrid__lead { font-size: 4.5vw;}
            p { font-size: 3.5vw; line-height: 1.5;}
        }
        .hybrid__cost {
            .hybrid__cost-head { font-size: 4.5vw; }
        }
        .hybrid__eco {
            .lead { font-size: 3.5vw; }
            .hybrid__eco-grid { flex-direction: column;
                img { inline-size: 70%; display: block; margin-inline: auto; padding-bottom: var(--space-md); }
                p { inline-size: 100%; font-size: 3.5vw; line-height: 1.5; }
            }
        }
        .hybrid__running {
            p { font-size: 3.5vw; line-height: 1.5; }
        }
        .hybrid__resilience {
            .hybrid__resilience-head { font-size: 4.5vw; }
            .hybrid__resilience-grid { flex-direction: column;
                img { inline-size: 70%; display: block; margin-inline: auto; padding-bottom: var(--space-md); }
                p { inline-size: 100%; font-size: 3.5vw; line-height: 1.5; }
            }
        }
    }

    .sekiyu_lead,.oil_lead {
        p { font-size: 3.5vw; line-height: 1.5;}
    }

    .norikae_lead {
        .norikae_lead__head { font-size: 5vw;
            strong { font-size: 7vw;}
        }
        .norikae_lead-grid {
            li { inline-size: 48%; font-size: 3.5vw; line-height: 1.5;
                .norikae_lead-grid-title { font-size: 4vw; text-align: center;}
            }
        }
    }
    .eco_jozu {
        .eco_jozu-grid { flex-direction: column;
            > img { inline-size: 70%; display: block; margin-inline: auto; padding-bottom: var(--space-md); }
            .eco_jozu-grid-desc { inline-size: 100%;
                .eco_jozu-grid-desc-title { font-size: 5vw; text-align: center;}
                p { font-size: 3.5vw;}
            }
        }
    }

    .about_komikomi {
        .about_komikomi-lead { font-size: 4vw; }
        .about_komikomi-head { font-size: 5vw;
            strong { font-size: 8vw;}
        }
        .about_komikomi-title { font-size: 4vw;
            span { font-size: 6vw;}
        }
        .about_komikomi-inner { 
            .about_komikomi-inner-grid {
                li {
                    p {font-size: 3.2vw; }
                }
            }
            .about_komikomi-inner-head { font-size: 5vw;}
            .about_komikomi-inner-img {
                p { font-size: 3vw; line-height: 1; bottom: 5px;}
            }
        }
    }

    .line_btn { font-size: 5vw;}

    .commitment {
        .commitment__head { font-size: 6vw;}
        .commitment__head-sub { font-size: 3.5vw;
            br { display: none;}
        }
        .commitment__reassurance { font-size: 4vw; }
        .commitment__merit {
            .commitment__merit-list {
                dt { font-size: 4vw }
                dd { font-size: 3.5vw; line-height: 1.5;}
            }
        }
    }

    .gas_change { 
        .gas_change-grid {
            img { padding-bottom: 10px; }
            p { font-size: 3.5vw; line-height: 1.5; }
        }
        .selfcheck {
            .selfcheck_list {
                li { font-size: 3.5vw; }
            }
            .list-number {
                li { font-size: 3.5vw;}
            }
            .selfcheck_sub { font-size: 5vw; }
        }
    }
    .boiler_customer {
        .boiler_customer-head { font-size: 6vw; }
        .boiler_customer-oil {
            .boiler_customer-oil-sub { font-size: 5vw;}
        }
        .boiler_customer-grid {
            img { padding-bottom: 10px; }
            ul { display: table; margin-inline: auto;
                li { font-size: 3.5vw; }
            }
        }
    }

    .function__grid-list { flex-direction: column; padding-bottom: 30px;
        li { inline-size: 100%; padding-bottom: 30px;
            img { display: block; inline-size: 80%; margin-inline: auto; }
            .function__grid-listhead { font-size: 4.5vw; }
            .function__grid-desc { font-size: 4vw; line-height: 1.5; }
        }
    }

    .wrap__area {
        .wrap__area-head { font-size: 5vw; }
        .wrap__area-grid {
            .wrap__area-lead { font-size: 5vw; padding-block: var(--space-md); margin-bottom: var(--space-sm); }
            .wrap__area-list { font-size: 5.5vw; text-align: center;
                span { font-size: 3.5vw; }
            }
        }
    }
    .news {
        ul { border-left: 10px solid var(--base-color); padding-left: 20px;
            li { 
                a { font-size: 3.8vw; line-height: }
            }
        }
    }
    .entry {
        .entry__head { font-size: 4.5vw; }
        time { font-size: 3.2vw; }
        .entry__contents { font-size: 3.5vw;
            p { font-size: 3.5vw; }
        }
    }

    .works {
        .works__grid { flex-direction: column;
            .works__grid-card { inline-size: 100%;
                a {
                    h2 { font-size: 4.5vw; }
                    .works__grid-card-desc {
                        p { font-size: 3.5vw;}
                    }
                    span { font-size: 3.5vw;  }
                }
            }
            .works__grid-card:nth-child(3n+2) { margin-inline: 0; }
        }
    }
    .detail {
        .detail__head { font-size: 5vw;}
        .detail__contents {
            .detail__contents-grid { flex-direction: column;
                .photo { inline-size: 100%; padding-bottom: var(--space-md); }
                .detail__contents-grid-desc { inline-size: 100%; font-size: 3.5vw; }
            }
            .detail__contents-ba {
                .detail__contents-ba-grid {
                    p { font-size: 4vw; line-height: 1.5; }
                }
            }
            .detail__contents-overview {
                .detail__contents-overview-head { font-size: 4.5vw; }
                .detail__contents-overview-grid { flex-direction: column; border: none;
                    .detail__contents-overview-desc { inline-size: 100%; margin-bottom: var(--space-sm); line-height: 1.5; border: 1px solid #666;
                        dt { font-size: 4vw; }
                        dd { font-size: 4vw; }
                    }
                    .detail__contents-overview-desc:first-child { border-right: 1px solid #666;}
                }
            }
        }
    }
}

@media (min-width: 561px){
    .setup {
        .setup__grid { display: flex; justify-content: space-between;
            .setup__grid-img,.setup__grid-desc { inline-size: 47%; }
        }
    }

    .products__list {
        .product__card { display: flex; justify-content: space-between; align-items: flex-start;
            .product__card-img { inline-size: 30%; }
            .product__card-desc { inline-size: 64%; }
        }
        .oil_product__card { flex-wrap: wrap;
            .product__card-desc { padding-bottom: var(--space-md); }
            .product__card-auto { inline-size: 100%; }
        }
    }

    .lease_lead {
        .lease_lead-grid { justify-content: center;
            .lease_lead-img { inline-size: 30%; padding-left: 20px;}
        }
    }
    .lease_push {
        .lease_push__price {
            .month { inline-size: 50px; block-size: 50px; }
        }
    }

    .rangehood__card-desc {
        display: table;
        margin-inline: auto;
    }

    .hybrid {
        .hybrid__about {
            p { text-align: center; }
        }
    }

    .commitment {
        .commitment__reassurance { text-align: center; }
        .commitment__merit {
            .commitment__merit-list { text-align: center; }
        }
    }

    .gas_change {
        .gas_change-grid {display: flex; justify-content: space-between; align-items: flex-start;
            img,p { inline-size: 48%;}
        }
    }

    .boiler_customer {
        .boiler_customer-grid { display: flex; justify-content: space-between; align-items: flex-start;
            img,ul {inline-size: 48%;}
        }
    }

    .wrap__area {
        .wrap__area-grid { display: flex; justify-content: center;
            .wrap__area-lead { inline-size: 30%; margin-right: 20px; }
        }
    }
}

@media (max-width: 768px){
    .breadcrumb__list { flex-wrap: wrap;
        .breadcrumb__item { margin-bottom: 10px; }
    }
}

@media (min-width: 961px){
    .products__list {
        .product__card {
            .product__card-img { inline-size: 38%; }
            .product__card-desc { inline-size: 50%; }
        }
    }
}

.hero-menu {
  background: #3B4043;
  padding-block: clamp(60px, 8vw, 100px) 40px;
}

.hero-menu__title {
  color: #fff;
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.hero-menu__grid {
  display: grid;
  gap: var(--space-sm);
  inline-size: 96%;
  max-inline-size: 800px;
  margin-inline: auto;
}

@media (max-width: 560px) {
  .hero-menu__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 561px) and (max-width: 960px) {
  .hero-menu__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 961px) {
  .hero-menu__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}