@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* 小型レンタル容器のレンタル  start*/
.kobin-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 100px auto;
    /*margin: 0px auto 50px auto;*/
}
.kobin-content1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "light fit use";
    gap: 3%;
    margin-top: 50px;
 }
 .kobin-light{
    grid-area: light;
    justify-items: center;
    background-color: #edf7fd;
 }
 .kobin-fit{
    grid-area: fit;
    justify-items: center;
    background-color: #f2f6db;
 }
 .kobin-use{
    grid-area: use;
    justify-items: center;
    background-color: #fef1dc;
 }
.kobin-light p, .kobin-fit p, .kobin-use p{
    margin: 8%;
}
.kobin-light img, .kobin-fit img, .kobin-use img{
    width: 80%;
    display: block;
}
.merit{
    display:flex;
    flex-flow: row wrap;
    background-color: rgb(255, 253, 238);
    align-items: center;
    border-radius: 20px;
}
.merit h2{
    width: 40%;
    text-align: center;
}
.merit li{
    width: 100%;
}
/*貸出可能なガスの種類と容器サイズ*/
.kobin-content2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01 box02"
    "box03 box04"
    "box05 box06";
    gap: 3%;
}
.kobin-box01{
    grid-area: box01;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    background-color: rgba(248,248,248,1.00);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box02{
    grid-area: box02;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    background-color: rgb(255, 251, 241);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box03{
    grid-area: box03;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
    background-color: rgb(245, 255, 246);
}
.kobin-box04{
    grid-area: box04;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box05{
    grid-area: box05;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box06{
    grid-area: box06;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.box001{
    grid-area: box001;
    place-items: center;
}
.box001 h3{
    font-size: 1.05rem;
}
.box002{
    grid-area: box002;
    place-content: center;
}
.box002 p{
    font-size: 0.9rem;
    font-weight: 500;
}
.box003{
    grid-area: box003;
}
.box003 p{
    margin: 8%;
    font-size: 0.9rem;
}
/*高圧ガス購入の費用*/
.kobin-content3{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr 3fr 4fr;
    grid-template-rows: auto;
    grid-template-areas:
    "cost01 cost02 cost03 cost04 cost05 cost06";
    place-items: center;
}
.cost01{
    grid-area: cost01;
}
.cost02{
    grid-area: cost02;
}
.cost03{
    grid-area: cost03;
}
.cost04{
    grid-area: cost04;
}
.cost05{
    grid-area: cost05;
}
.cost06{
    grid-area: cost06;
}
/*無償貸与期間*/
.kobin-content4{
    width: 80%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap :2%;
    background-color: rgb(255, 219, 228);
}
.taiyo1{
    width :46%;
    align-items: center;
    justify-items: center;
}
.kobin-content5{
    width: 80%;
    margin: auto;
}
.taiyo2{
    width :100%
}
/*リンク*/
.kobin-content6{
    width: 80%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 3%;
}

}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* 小型レンタル容器のレンタル  start*/
.kobin-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
}
.kobin-content1{
    display: grid wrap;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "light" "fit" "use";
    gap: 30px;
    margin-top: 50px;
    margin: auto;
    max-width: 700px;
 }
 .kobin-light{
    width: 80%;
    margin: auto;
    justify-items: center;
    background-color: #edf7fd;
    padding-bottom: 20px;
 }
 .kobin-fit{
    width: 80%;
    margin: auto;
    grid-area: fit;
    justify-items: center;
    background-color: #f2f6db;
    padding-bottom: 20px;
 }
 .kobin-use{
    width: 80%;
    margin: auto;
    grid-area: use;
    justify-items: center;
    background-color: #fef1dc;
    padding-bottom: 20px;
 }
.kobin-light p, .kobin-fit p, .kobin-use p{
    margin-left: 3%;
    margin-right: 3%;
}
.kobin-light img, .kobin-fit img, .kobin-use img{
    width: 60%;
    display: block;
}
.merit{
    display:flex;
    flex-flow: row wrap;
    background-color: rgb(255, 253, 238);
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}
.merit h2{
    width: 40%;
    text-align: center;
    font-size: 1.3rem;
}
.merit li{
    width: 100%;
}
/*貸出可能なガスの種類と容器サイズ*/
.kobin-content2{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01" "box02"
    "box03" "box04"
    "box05" "box06";
    gap: 30px;
}
.kobin-box01{
    width: 90%;
    margin: auto;
    grid-area: box01;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px; 
    background-color: rgba(248,248,248,1.00);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box02{
    width: 90%;
    margin: auto;
    grid-area: box02;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px; 
    background-color: rgb(255, 251, 241);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box03{
    width: 90%;
    margin: auto;
    grid-area: box03;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px; 
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
    background-color: rgb(245, 255, 246);
}
.kobin-box04{
    width: 90%;
    margin: auto;
    grid-area: box04;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box05{
    width: 90%;
    margin: auto;
    grid-area: box05;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box06{
    width: 90%;
    margin: auto;
    grid-area: box06;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 20px;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.box001{
    grid-area: box001;
    place-items: center;
}
.box001 h3{
    font-size: 1.05rem;
}
.box002{
    grid-area: box002;
    place-content: center;
}
.box002 p{
    font-size: 0.9rem;
    font-weight: 500;
}
.box003{
    grid-area: box003;
    display: flex;
    align-items: center;
}
.box003 p{
    margin: 8%;
    font-size: 0.9rem;
}
/*高圧ガス購入の費用*/
.kobin-content3{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr 3fr 4fr;
    grid-template-rows: auto;
    grid-template-areas:
    "cost01 cost02 cost03 cost04 cost05 cost06";
    place-items: center;
    gap: 5px;
}
.cost01{
    grid-area: cost01;
}
.cost02{
    grid-area: cost02;
}
.cost03{
    grid-area: cost03;
}
.cost04{
    grid-area: cost04;
}
.cost05{
    grid-area: cost05;
}
.cost06{
    grid-area: cost06;
}
/*無償貸与期間*/
.kobin-content4{
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap :20px;
    background-color: rgb(255, 219, 228);
}
.taiyo1{
    width :46%;
    align-items: center;
    justify-items: center;
}
.taiyo1 h2{
    margin-left: 5%;
}
.kobin-content5{
    width: 80%;
    margin: auto;
}
.taiyo2{
    width :100%
}
/*リンク*/
.kobin-content6{
    width: 80%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 3%;
}
}
@media screen and (max-width: 480px){
/* 小型レンタル容器のレンタル  start*/
.container h1{
    font-size: 1.4rem;
}
.kobin-section{
    width: 96%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    /*margin: 0px auto 50px auto;*/
}
.kobin-content1{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "light" "fit" "use";
    gap: 15px;
    margin-top: 50px;
    margin: auto;
 }
 .kobin-light{
    width: 100%;
    margin: auto;
    justify-items: center;
    align-items: center;
    background-color: #edf7fd;
    
    padding-bottom: 20px;
 }
 .kobin-fit{
    width: 100%;
    margin: auto;
    grid-area: fit;
    justify-items: center;
    background-color: #f2f6db;
    
    padding-bottom: 20px;
 }
 .kobin-use{
    width: 100%;
    margin: auto;
    grid-area: use;
    justify-items: center;
    background-color: #fef1dc;
    
    padding-bottom: 20px;
 }
.kobin-light p, .kobin-fit p, .kobin-use p{
    margin-left: 3%;
    margin-right: 3%;
}
.kobin-light h2, .kobin-fit h2, .kobin-use h2{
    margin-left: 3%;
}
.kobin-light img, .kobin-fit img, .kobin-use img{
    width: 60%;
    margin: auto;
    display: block;
}
.merit{
    display:flex;
    flex-flow: row wrap;
    background-color: rgb(255, 253, 238);
    align-items: center;
    border-radius: 20px;
}
.merit h2{
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
}
.merit p{
    width: 50%;
}
/*貸出可能なガスの種類と容器サイズ*/
.kobin-content2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01" "box02"
    "box03" "box04"
    "box05" "box06";
    gap: 3%;
    margin-bottom: 150px;
}
.kobin-box01{
    width: 100%;
    margin: auto;
    grid-area: box01;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    background-color: rgba(248,248,248,1.00);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box02{
    width: 100%;
    margin: auto;
    grid-area: box02;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    background-color: rgb(255, 251, 241);
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box03{
    width: 100%;
    margin: auto;
    grid-area: box03;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%; 
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
    background-color: rgb(245, 255, 246);
}
.kobin-box04{
    width: 100%;
    margin: auto;
    grid-area: box04;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box05{
    width: 100%;
    margin: auto;
    grid-area: box05;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.kobin-box06{
    width: 100%;
    margin: auto auto 100px auto;
    grid-area: box06;
    display: grid;
    grid-template-columns: 3fr 2fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003"; 
    gap: 2%;
    border-radius: 10px;
    background-color: rgba(251,251,251,1.00);
    box-shadow: -5px 5px 5px rgb(221, 221, 221);
}
.box001{
    grid-area: box001;
    place-items: center;
}
.box001 h3{
    font-size: 1.05rem;
    margin-left: 8%;
}
.box002{
    grid-area: box002;
    place-content: center;
}
.box002 p{
    font-size: 0.9rem;
    font-weight: 500;
}
.box003{
    grid-area: box003;
}
.box003 p{
    margin: 8%;
    font-size: 0.9rem;
}
/*高圧ガス購入の費用*/
.kobin-content3{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "cost01"
    "cost02"
    "cost03"
    "cost04"
    "cost05"
    "cost06";
    place-items: center;
}
.cost01{
    grid-area: cost01;
    margin: auto;
}
.cost02{
    grid-area: cost02;
    margin: auto;
}
.cost03{
    grid-area: cost03;
    margin: auto;
}
.cost04{
    grid-area: cost04;
    margin: auto;
}
.cost05{
    grid-area: cost05;
    margin: auto;
}
.cost06{
    margin: auto;
    width: 70%;
    grid-area: cost06;
}
.cost01, .cost03, .cost05{
    width: 35%;
}
.cost02, .cost04{
    width: 5%;
}
/*無償貸与期間*/
.kobin-content4{
    width: 100%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap :10px;
    background-color: rgb(255, 219, 228);
}
.taiyo1{
    width :100%;
    align-items: center;
    justify-items: center;
}
.taiyo1 h2, .taiyo1 p{ 
    margin-left: 5%;
}
.kobin-content5{
    width: 90%;
    margin: auto;
}
.taiyo2{
    width :100%
}
/*リンク*/
.kobin-content6{
    width: 80%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 10px;
}
}