@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*車での運搬 start*/
.trans-section{
    width: 90%;
    max-width: 1500px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
    place-items: center;
}
.trans-image{
    width: 35%;
}
.trans-text{
    width: 60%;
}
/*車での運搬 end*/
/*47L容器と13.4L・10Lボンベ（容器）について start*/
.size-section{
    width: 100%;
}
.size-content{
    width: 60%;
    max-width: 1200px;
    min-width: 800px;
    margin: 50px auto 100px auto;
    display: grid;
    grid-template-columns: 28% 35% 35%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box-1 box-2 box-3"
    "box-4 box-5 box-6"
    "box-7 box-8 box-9";
    gap: 2%;
}
.box-1{
    grid-area: box-1;
}
.box-2{
    grid-area: box-2;
}
.box-3{
    grid-area: box-3;
}
.box-4{
    grid-area: box-4;
    background-color: #3577bd;
}
.box-5{
    grid-area: box-5;
    background-color: #eff8fe;
}
.box-6{
    grid-area: box-6;
    background-color: #fef5f9;
}
.box-7{
    grid-area: box-7;
    background-color: #3577bd;
}
.box-8{
    grid-area: box-8;
    background-color: #eff8fe;
}
.box-9{
    grid-area: box-9;
    background-color: #fef5f9;
}
.box-1, .box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9{
    justify-items: center;
    align-content: center;
}
.box-1 p, .box-2 p,.box-3 p,.box-4 p,.box-5 p,.box-6 p,.box-7 p,.box-8 p,.box-9 p{
    padding: 0px 20px 0px 20px;
}
.box-4 p, .box-7 p{
    color: white;
    font-weight: 500;
}
.size-text{
    width: 80%;
    max-width: 1500px;
    margin: auto;
}
/*47L容器と13.4L・10Lボンベ（容器）について end*/
/*液化ガスの運搬について start*/
.liquid-text1{
    width: 60%;
    max-width: 1500px;
    margin: 0px auto 50px auto;
    background-color: #f8d5f2;
    border-radius: 10px;
}
.liquid-text1 p{
    padding: 30px;
}
.liquid-section{
    width: 90%;
    max-width: 1500px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
    place-items: center;
}
.liquid-image{
    width: 35%;
}
.liquid-text{
    width: 60%;
}
/*液化ガスの運搬について end*/
/*ボンベ転がし start*/
.korogashi-section{
    width: 80%;
    max-width: 1500px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
    place-items: center;
    background-color: #e8f5fd;
}
.korogashi-image{
    width: 20%;
    /*max-width: 250px;*/
}
.korogashi-text{
    width: 70%; 
}
/*ボンベ転がし end*/
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*車での運搬 start*/
.trans-section{
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column wrap;
    gap: 5%;
    place-items: center;
}
.trans-image{
    width: 60%;
}
.trans-text{
    width: 90%;
}
/*車での運搬 end*/
/*47L容器と13.4L・10Lボンベ（容器）について start*/
.size-section{
    width: 100%;
}
.size-content{
    width: 80%;
    margin: 50px auto 100px auto;
    display: grid;
    grid-template-columns: 28% 35% 35%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box-1 box-2 box-3"
    "box-4 box-5 box-6"
    "box-7 box-8 box-9";
    gap: 2%;
}
.box-1{
    grid-area: box-1;
}
.box-2{
    grid-area: box-2;
}
.box-3{
    grid-area: box-3;
}
.box-4{
    grid-area: box-4;
    background-color: #3577bd;
}
.box-5{
    grid-area: box-5;
    background-color: #eff8fe;
}
.box-6{
    grid-area: box-6;
    background-color: #fef5f9;
}
.box-7{
    grid-area: box-7;
    background-color: #3577bd;
}
.box-8{
    grid-area: box-8;
    background-color: #eff8fe;
}
.box-9{
    grid-area: box-9;
    background-color: #fef5f9;
}
.box-1, .box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9{
    justify-items: center;
    align-content: center;
}
.box-1 p, .box-2 p,.box-3 p,.box-4 p,.box-5 p,.box-6 p,.box-7 p,.box-8 p,.box-9 p{
    padding: 0px 20px 0px 20px;
}
.box-4 p, .box-7 p{
    color: white;
    font-weight: 500;
}
.size-text{
    width: 80%;
    margin: auto;
}
/*47L容器と13.4L・10Lボンベ（容器）について end*/
/*液化ガスの運搬について start*/
.liquid-text1{
    width: 80%;
    margin: 0px auto 50px auto;
    background-color: #f8d5f2;
    border-radius: 10px;
}
.liquid-text1 p{
    padding: 30px;
}
.liquid-section{
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column wrap;
    gap: 5%;
    place-items: center;
}
.liquid-image{
    width: 60%;
}
.liquid-text{
    width: 90%;
}
/*液化ガスの運搬について end*/
/*ボンベ転がし start*/
.korogashi-section{
    width: calc( 90% - 20px);
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    place-items: center;
    background-color: #e8f5fd;
}
.korogashi-image{
    width: 35%;
}
.korogashi-text{
    width: 60%; 
}
.korogashi-text p{
    padding: 10px; 
}
/*ボンベ転がし end*/
}
@media screen and (max-width: 480px){
/*車での運搬 start*/
.trans-section{
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column wrap;
    gap: 5%;
    place-items: center;
}
.trans-image{
    width: 70%;
}
.trans-text{
    width: 100%;
}
/*車での運搬 end*/
/*47L容器と13.4L・10Lボンベ（容器）について start*/
.size-section{
    width: 100%;
}
.size-content{
    width: 90%;
    margin: 50px auto 50px auto;
    display: grid;
    grid-template-columns: 18% 40% 40%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box-1 box-2 box-3"
    "box-4 box-5 box-6"
    "box-7 box-8 box-9";
    gap: 1%;
}
.box-1{
    grid-area: box-1;
}
.box-2{
    grid-area: box-2;
}
.box-3{
    grid-area: box-3;
}
.box-4{
    grid-area: box-4;
    background-color: #3577bd;
}
.box-5{
    grid-area: box-5;
    background-color: #eff8fe;
}
.box-6{
    grid-area: box-6;
    background-color: #fef5f9;
}
.box-7{
    grid-area: box-7;
    background-color: #3577bd;
}
.box-8{
    grid-area: box-8;
    background-color: #eff8fe;
}
.box-9{
    grid-area: box-9;
    background-color: #fef5f9;
}
.box-1, .box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9{
    justify-items: center;
    align-content: center;
}
.box-1 p, .box-2 p,.box-3 p,.box-4 p,.box-5 p,.box-6 p,.box-7 p,.box-8 p,.box-9 p{
    padding: 0px 20px 0px 20px;
}
.box-4 p, .box-7 p{
    color: white;
    font-weight: 500;
}
.size-text{
    width: 90%;
    margin: auto;
}
/*47L容器と13.4L・10Lボンベ（容器）について end*/
/*液化ガスの運搬について start*/
.liquid-text1{
    width: 80%;
    margin: 0px auto 50px auto;
    background-color: #f8d5f2;
    border-radius: 10px;
}
.liquid-text1 p{
    padding: 30px;
}
.liquid-section{
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column wrap;
    gap: 5%;
    place-items: center;
}
.liquid-image{
    width: 80%;
}
.liquid-text{
    width: 100%;
}
/*液化ガスの運搬について end*/
/*ボンベ転がし start*/
.korogashi-section{
    width: calc( 90% - 20px);
    margin: auto;
    display: flex;
    flex-flow: column wrap;
    place-items: center;
    background-color: #e8f5fd;
    border-radius: 10px;
}
.korogashi-image{
    width: 60%;
}
.korogashi-text{
    width: calc( 100% - 20px ); 
}
.korogashi-text p{
    padding: 0px 10px 0px 10px; 
}
/*ボンベ転がし end*/
}