@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* レンタル可能な容器の種類 start*/
.point-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.point-content{
    width: 100%;
}
.point1{
    display: grid;
    grid-template-columns: 7fr 2fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box1-1 box1-2";
    place-content: center;
    place-items: center;
    gap: 2%;
}
.point1-text{
    grid-area: box1-1;
}
.point1-text p{
    padding: 30px 50px 20px 50px;
}
.point1-image{
    grid-area: box1-2;
}
.point1-image img{
    width: 90%;
    margin:auto;
}
.point3{
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box3-1 box3-2 box3-3";
    place-content: center;
    place-items: center;
    gap: 2%; 
    width: 80%;
    margin: auto;
}
.point3-1{
    grid-area: box3-1;
}
.point3-2{
    grid-area: box3-2;
}
.point3-3{
    grid-area: box3-3;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* レンタル可能な容器の種類 start*/
.point-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.point-content{
    width: 100%;
}
.point1{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    "box1-2"
    "box1-1";
    place-content: center;
    place-items: center;
    gap: 2%;
}
.point1-text{
    grid-area: box1-1;
}
.point1-text p{
    padding: 0px 30px 20px 30px;
}
.point1-image{
    grid-area: box1-2;
}
.point1-image img{
    width: 90%;
    margin:auto;
}
.point3{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box3-1 box3-3"
    "box3-2 box3-2";
    place-content: center;
    place-items: center;
    gap: 2%; 
    width: 80%;
    margin: auto;
}
.point3-1{
    grid-area: box3-1;
    width: 70%;
}
.point3-2{
    grid-area: box3-2;
}
.point3-3{
    grid-area: box3-3;
    width: 70%;
}
}
@media screen and (max-width: 480px){
.point-section{
    width: 100%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.point-section h2{
    margin-left: 5%;
}
.point-content{
    width: 100%;
}
.point1{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    "box1-2"
    "box1-1";
    place-content: center;
    place-items: center;
    gap: 2%;
}
.point1-text{
    grid-area: box1-1;
    width: 90%;
    margin: auto;
}
.point1-text p{
    /*width:90%;
    margin: 10px auto 20px auto;*/
}
.point1-image{
    grid-area: box1-2;
    place-items: center;
}
.point1-image img{
    width: 90%;
    display: block;
}
.point3{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box3-1 box3-3"
    "box3-2 box3-2";
    place-content: center;
    place-items: center;
    /*gap: 2%; */
    width: 100%;
    margin: auto;
}
.point3-1{
    grid-area: box3-1;
    width: 70%;
}
.point3-2{
    grid-area: box3-2;
    width: 90%;
    margin: auto;

}
.point3-3{
    grid-area: box3-3;
    width: 70%;
}
}