@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* 小型レンタル容器のレンタル  start*/
.example-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
}
.example-content1{
    margin: auto;
    display: grid;
    grid-template-columns: 4fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "use-img use-text";
    gap: 3%;
    margin-top: 50px;
 }
 .use-img{
    grid-area: use-img;
 }
 .use-text{
    grid-area: use-text;
 }
/*貸出可能なボンベ*/
.example-content2{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title detail";
    place-items: center;
    gap: 5%;
}
.example-title{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
}
.example-detail{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 8%;
    place-content: center;
}
.d-1{
    width: 46%;
}
.d-2{
    width: 46%;
}
/*初回購入時*/
.example-content3{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title detail";
    place-items: center;
    gap: 5%;
}
.example-title3{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title3 h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
}
.example-detail3{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 4%;
    place-content: center;
    place-items: center;
}
.d-01{
    width: 40%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
.d-01 h2, .d-03 h2{
    text-align: center;
    width:100%;
    color:white;
}
.d-01 p, .d-03 p{
    margin: auto 20px 30px 20px;
}
.d-02{
    width: 5%;
}
.d-03{
    width: 40%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* 小型レンタル容器のレンタル  start*/
.example-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
}
.example-content1{
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "use-img" "use-text";
    gap: 3%;
    margin-top: 50px;
 }
 .use-img{
    grid-area: use-img;
    width: 90%;
    max-width: 500px;
    margin: auto;
 }
 .use-text{
    grid-area: use-text;
 }
/*貸出可能なボンベ*/
.example-content2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title" "detail";
    place-items: center;
    place-content: center;
    gap: 5%;
}
.example-title{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
}
.example-detail{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 8%;
    place-content: center;
}
.d-1{
    width: 46%;
}
.d-2{
    width: 46%;
}
/*初回購入時*/
.example-content3{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title detail";
    place-items: center;
    gap: 5%;
}
.example-title3{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title3 h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
}
.example-detail3{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 4%;
    place-content: center;
    place-items: center;
}
.d-01{
    width: 40%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
.d-01 h2, .d-03 h2{
    text-align: center;
    width:100%;
    color:white;
}
.d-01 p, .d-03 p{
    margin: auto 20px 30px 20px;
}
.d-02{
    width: 5%;
}
.d-03{
    width: 40%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
}
@media screen and (max-width: 480px){
/* 小型レンタル容器のレンタル  start*/
.example-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    display: wrap;
}
.example-content1{
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "use-img"
    "use-text";
    gap: 3%;
    margin-top: 50px;
 }
 .use-img{
    grid-area: use-img;
    width: 90%;
    max-width: 500px;
    margin: auto;
 }
 .use-text{
    grid-area: use-text;
 }
/*貸出可能なボンベ*/
.example-content2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "detail";
    place-items: center;
    place-content: center;
    gap: 5%;
}
.example-title{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
}
.example-detail{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 8%;
    place-content: center;
}
.d-1{
    width: 90%;
}
.d-2{
    width: 90%;
}
/*初回購入時*/
.example-content3{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "detail";
    place-items: center;
    gap: 5%;
}
.example-title3{
    grid-area: title;
    border-radius: 75px;
    width: 150px;
    height: 150px;
    place-content: center;
    place-items: center;
}
.example-title3 h2{
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
}
.example-detail3{
    grid-area: detail;
    display: flex;
    flex-flow: row wrap;
    gap: 4%;
    place-content: center;
    place-items: center;
}
.d-01{
    width: 90%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
.d-01 h2, .d-03 h2{
    text-align: center;
    width:100%;
    color:white;
}
.d-01 p, .d-03 p{
    margin: auto 20px 30px 20px;
}
.d-02{
    width: 11%;
}
.d-03{
    width: 90%;
    background-color: rgb(253, 255, 240);
    height: stretch;
}
}