@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* レンタル可能な容器の種類 start*/
.rental-section{
    width: 100%;
}
.rental-content{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 2%;
    place-content: center;
}
.rental-content h1, .rental-content p{
    width:100%;
}
.rental-card{
    width: 23%;
    /*border: 1px solid #909090;*/
    background-color: #f8fcfe;
    place-items: center;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    margin: 50px 0px 20px 0px;
    border-radius: 10px;
 }
.rental-card p{
    font-weight: 600;
}
.rental-card p1{
    font-size: 0.9rem;
    text-align: left;
    padding: 5px;
}
.rental-card img{
    width: 70%;
    place-items:center;
    margin-bottom: 20px;
}
/* レンタル可能な容器の種類 end*/

/*容器以外に必要なもの　配達エリアについて start*/
.etc-section{
    width :100%;
}
.etc-content{
    width: 80%;
    max-width: 1000px;
    margin: 0px auto 80px auto;
    display: grid;
    grid-template-columns: 20% 50% 20%;
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box2 box3";
    gap: 2%;
    place-content: center;
    place-items: center;
    padding: 20px;
    border-radius: 10px;;
}
.etc-image1{
    grid-area: box1;
}
.etc-text{
    grid-area: box2;
}
.etc-link{
    width: 100%;
    margin: auto;
    place-content: center;
    place-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
}
.etc-image2{
    grid-area: box3;
}
/*容器以外に必要なもの 配達エリアについてend*/

}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* レンタル可能な容器の種類 start*/
.rental-section{
    width: 100%;
}
.rental-content{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 2%;
    place-content: center;
}
.rental-content h1, .rental-content p{
    width:100%;
}
.rental-card{
    width: 32%;
    background-color: #f8fcfe;
    place-items: center;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    margin: 20px 0px 20px 0px;
    border-radius: 10px;
 }
.rental-card p{
    font-weight: 600;
}
.rental-card p1{
    font-size: 0.9rem;
    text-align: left;
    padding: 5px;
}
.rental-card img{
    width: 70%;
    place-items:center;
    margin-bottom: 20px;
}
/* レンタル可能な容器の種類 end*/

/*容器以外に必要なもの　配達エリアについて start*/
.etc-section{
    width :100%;
}
.etc-content{
    width: 96%;
    max-width: 1000px;
    margin: 0px auto 80px auto;
    display: grid;
    grid-template-columns: 20% 50% 20%;
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box2 box3";
    gap: 2%;
    place-content: center;
    place-items: center;
    padding: 20px;
    border-radius: 10px;;
}
.etc-image1{
    grid-area: box1;
}
.etc-text{
    grid-area: box2;
}
.etc-link{
    width: 100%;
    margin: auto;
    place-content: center;
    place-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
}
.etc-image2{
    grid-area: box3;
}
/*容器以外に必要なもの 配達エリアについてend*/

}
@media screen and (max-width: 480px){
/* レンタル可能な容器の種類 start*/
.rental-section{
    width: 100%;
}
.rental-content{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    gap: 2%;
    place-content: center;
}
.rental-content h1, .rental-content p{
    width:100%;
}
.rental-card{
    width: 49%;
    background-color: #f8fcfe;
    place-items: center;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    margin: 20px 0px 20px 0px;
    border-radius: 10px;
 }
.rental-card p{
    font-weight: 600;
}
.rental-card p1{
    font-size: 0.9rem;
    text-align: left;
    padding: 5px;
}
.rental-card img{
    width: 70%;
    place-items:center;
    margin-bottom: 20px;
}
/* レンタル可能な容器の種類 end*/

/*容器以外に必要なもの　配達エリアについて start*/
.etc-section{
    width :100%;
}
.etc-content{
    width: 90%;
    margin: 0px auto 80px auto;
    display: grid;
    grid-template-columns: 49%;
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box3"
    "box2 box2";
    gap: 2%;
    place-content: center;
    place-items: center;
    padding: 20px;
    border-radius: 10px;;
}
.etc-image1{
    grid-area: box1;
    width: 100%;
}
.etc-text{
    grid-area: box2;
}
.etc-link{
    width: 100%;
    margin: auto;
    place-content: center;
    place-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 5%;
}
.etc-image2{
    grid-area: box3;
    width: 100%;
}
/*容器以外に必要なもの 配達エリアについてend*/

}