@charset "UTF-8";

.slider { max-inline-size: 100vw; overflow-x: hidden; }

.hero__bottom { padding-bottom: var(--space-mlg); }

.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; }
            }
        }
    }
    .btn { background: var(--base-color); color: #fff;}
}

.page-links {
    .page-links__title { text-align: right; }
    .page-links__grid { padding-block: var(--space-md);
        .w90 { display: flex; flex-wrap: wrap; justify-content: space-between; max-inline-size: 800px; list-style-type: none;
            .page-links__btn { inline-size: 32%; box-sizing: border-box; padding: var(--space-sm); margin-bottom: var(--space-md); text-align: center; background: #fff; }
            .page-links__btn:nth-last-child(-n+3) { margin-bottom: 0;}
        }
    }
}

.gas-recommend { background: #97D6F5; padding-top: var(--space-mlg);
    .gas-recommend__innner { max-inline-size: 1024px; container-type: inline-size; container-name: gas;
        .gas-recommend__banners {
            .gas-recommend__banner { margin-bottom: var(--space-md); display: block; }
        }
        .gas-recommend__products { inline-size: 90%; margin-inline: auto; padding-bottom: var(--space-lg); display: flex; justify-content: space-between;
            .gas-recommend__product { display: block; text-align: center; color: #fff; inline-size: 32%; background: #F79C00; padding-bottom: var(--space-sm);
                img { padding-bottom: var(--space-sm);}
            }
        }
    }
}
@container gas (max-width: 600px) {
    .gas-recommend {
        .gas-recommend__innner {
            .gas-recommend__products { flex-direction: column;
                .gas-recommend__product { inline-size: 100%; margin-bottom: var(--space-md);
                    span { font-size: 3.5vw; line-height: 1.2; }
                }
            }
        }
    }
}
.showroom { background: #97D6F5; margin-bottom: var(--space-mlg);
    .showroom__inner { max-inline-size: 1024px; position: relative;
        .showroom__headline { position: absolute; top: 0; left: 0; z-index: 2; inline-size: 75%;}
        .showroom__img { position: relative; z-index: 1; }
    }
}

.gas-banners5 { padding-bottom: var(--space-mlg);
    .gas-banners5__grid { display: flex; justify-content: space-between; flex-wrap: wrap;
        .gas-banners5__banner { display: block; inline-size: 48%; margin-bottom: var(--space-md);}
        .gas-banners5__banner:last-child { inline-size: 100%; margin-bottom: 0; }
    }
}

.gas-equipment { padding-bottom: var(--space-mlg);
    .gas-equipment__grid { font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
        .gas-equipment__img,.gas-equipment__card { margin-bottom: var(--space-md); }
        .gas-equipment__card { display: block; block-size: 100%; background: #F0F3F5; padding-bottom: var(--space-md);
            img { display: block; padding-bottom: var(--space-sm); }
            .card-name { font-size: var(--font-middle);}
            .card-desc { font-size: var(--font-base);}
            span { display: table; margin-left: auto; background: #F88300; color: #fff; border-radius: 20px; }
        }
    }
}
.about { padding-bottom: var(--space-mlg);
    .about__img { position: relative;
        .about__title { position: absolute; z-index: 1; left: 50%; transform: translate(-50%); color: #fff; text-align: center; }
        .btn { background: #fff; border-radius: 20px; position: absolute; z-index: 1; left: 50%; transform: translate(-50%); }
        picture { display: block; position: relative; }
    }
    .about__catch { padding-block: var(--space-sm);
        span { display: block; text-align: center; color: #fff; font-size: var(--font-xlarge); line-height: 1.5; }
    }
}

@media (max-width: 560px){
.news {
    ul { border-left: 10px solid var(--base-color); padding-left: 20px;
        li { 
            a { font-size: 3.8vw; line-height: }
        }
    }
    .btn { background: var(--base-color); color: #fff;}
}

    .page-links {
        .page-links__grid {
            .w90 {
                .page-links__btn { font-size: 2.8vw; line-height: 1.5; }
            }
        }
    }
    .showroom {
        .showroom__inner {
            .showroom__headline { position: relative; inline-size: 100%; padding-bottom: var(--space-sm);}
        }
    }
    .gas-banners5 {
        .gas-banners5__grid {
            .gas-banners5__banner { inline-size: 100%;}
        }
    }
    .gas-equipment {
        .gas-equipment__grid {
            .gas-equipment__card {
                .card-name { font-size: 4vw; padding: 0 0 20px 10px; }
                .card-desc { font-size: 3.5vw; padding: 0 0 30px 10px; line-height: 1.5; }
                span { padding: 8px 20px; margin-right: 10px; font-size: 3.5vw; }
            }
        }
    }
    .about {
        .about__img {
            .about__title { top: 10px; }
            a.btn { inline-size: 80%; max-inline-size: 300px; bottom: 10px; }
        }
        .about__catch {
            span { font-size: 4.5vw;}
        }
    }
}

@media (min-width: 561px){
    .slider .slick-slide{ margin-right: 10px !important; margin-left: 10px !important; }
    .gas-equipment {
        .gas-equipment__grid { display: flex; flex-wrap: wrap; justify-content: space-between;
            img { align-self: flex-start; }
            .gas-equipment__card {
                .card-name { padding: 0 0 20px 20px; }
                .card-desc { padding: 0 0 40px 20px; }
                span { padding: 8px 16px; margin-right: 20px; }
            }
        }
    }
    .about {
        .about__img {
            .about__title { top: 50px; }
            a.btn { bottom: 150px; }
        }
    }
}

@media (min-width: 561px) and (max-width: 960px){
    .gas-equipment {
        .gas-equipment__grid {
            .gas-equipment__card { inline-size: 48%; }
            .gas-equipment__card:first-child { inline-size: 100%; }
            .gas-equipment__card:nth-last-child(-n+2) { margin-bottom: 0; }
        }
    }
}

@media (min-width: 961px){
    .gas-equipment {
        .gas-equipment__grid {
            .gas-equipment__img { inline-size: 66%; order: 1; }
            .gas-equipment__card { inline-size: 32%; }
            .gas-equipment__card:nth-last-child(-n+3) { margin-bottom: 0; }
            .gas-equipment__card:nth-child(2) { order: 0; }
            .gas-equipment__card:nth-child(3) { order: 2; }
            .gas-equipment__card:nth-child(4) { order: 3; }
            .gas-equipment__card:nth-child(5) { order: 4; }
        }
    }
}