@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* レンタル可能な容器の種類 start*/
.purchase-section{
    width: 100%;
}
.purchase-content{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto;
}
.purchase-card{
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0px auto;
    display: grid;
    grid-template-columns: repeat(2fr 3fr 3fr);
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box2 box3";
    gap: 2%;
    place-content: center;
    place-items: center;
 }
 .purchase-item1{
    align-self: start;
    grid-area: box1;
    background-color: #739fcb;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 80%,
        50% 100%,
        0% 80%);
 }
 .purchase-item1 p{
    padding:20px;
    text-align: center;
    color: white;
    font-weight: 500;
 }
 .purchase-item2{
    grid-area: box2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02";
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 .purchase-detail1{
    grid-area: box01;
    background-color: #739fcb;
 }
  .purchase-detail1 p{
    color: white;
    font-weight : 500;
    margin-left: 8%;
  }
 .purchase-detail2{
    grid-area: box02;
 }
  .purchase-detail3{
    display:grid;
    grid-template-columns: 30% calc( 70% - 10px );
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002";
    place-content: center;
    place-items:center;
    margin: 30px auto;
 }
 .purchase-detail3-1{
    grid-area: box001;
 }
  .purchase-detail3-2{
    grid-area: box002;
 }
 .purchase-detail3-2 p{
    padding-right: 10px;

 }
 .purchase-item3{
    grid-area: box3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02" ;
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 /* レンタル可能な容器の種類 end*/
/*補足1*/
.purchase-etc{
    width: 90%;
    max-width: 1000px;
    margin: 50px auto 100px auto;
    display: flex;
    flex-flow: row wrap;
    background-color: #def7b6;/*#fcf6c3;*/
    place-content: center;
    place-items: center;
    gap: 5%;
    border-radius: 10px;
}
.purchase-etc img{
    width: 15%;
}
.purchase-etc p{
    width: 70%;
}
/*補足1*/

/*ガスの引き渡し start*/
.purchase-detail3-3{
    grid-area: box002;
    display: flow;
    flex-flow: row wrap;
}
.purchase-detail3-3 img{
    width: 30%;
}
/*ガスの引き渡し end*/


/*容器以外に必要なもの　配達エリアについて start*/
.etc-section{
    width :100%;
}
.etc-content{
    width: 80%;
    max-width: 1000px;
    margin: 100px 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;
    margin: auto;
}
.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*/
.purchase-section{
    width: 100%;
}
.purchase-content{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto;
}
.purchase-card{
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0px auto;
    display: grid;
    grid-template-columns: repeat(1fr 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box1"
    "box2 box3";
    gap: 2%;
    place-items: start;
 }
 .purchase-item1{
    width: 50%;
    align-self: start;
    grid-area: box1;
    background-color: #4a79a7;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 80%,
        50% 100%,
        0% 80%);
        margin: auto;
 }
 .purchase-item1 p{
    padding:20px;
    text-align: center;
    color: white;
    font-weight: 500;
 }
 .purchase-item2{
    grid-area: box2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02";
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 .purchase-detail1{
    grid-area: box01;
    background-color: #739fcb;
 }
  .purchase-detail1 p{
    color: white;
    font-weight : 500;
    margin-left: 8%;
  }
 .purchase-detail2{
    grid-area: box02;
 }
  .purchase-detail3{
    display:grid;
    grid-template-columns: 30% calc( 70% - 10px );
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002";
    place-content: center;
    place-items:center;
    margin: 30px auto;
 }
 .purchase-detail3-1{
    grid-area: box001;
 }
  .purchase-detail3-2{
    grid-area: box002;
 }
 .purchase-detail3-2 p{
    padding-right: 10px;

 }
 .purchase-item3{
    grid-area: box3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02" ;
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 /* レンタル可能な容器の種類 end*/
/*補足1*/
.purchase-etc{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    background-color: #def7b6;/*#fcf6c3;*/
    place-content: center;
    place-items: center;
    gap: 5%;
}
.purchase-etc img{
    width: 15%;
}
.purchase-etc p{
    width: 70%;
}
/*補足1*/

/*ガスの引き渡し start*/
.purchase-detail3-3{
    grid-area: box002;
    display: flow;
    flex-flow: row wrap;
}
.purchase-detail3-3 img{
    width: 30%;
}
/*ガスの引き渡し end*/


/*容器以外に必要なもの　配達エリアについて start*/
.etc-section{
    width :100%;
}
.etc-content{
    width: 80%;
    max-width: 1000px;
    margin: 50px 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*/
.purchase-section{
    width: 100%;
}
.purchase-content{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto;
}
.purchase-card{
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 50px auto;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "box1"
    "box2"
    "box3";
    gap: 2%;
    /*place-content: start;*/
    place-items: start;
 }
 .purchase-item1{
    align-self: start;
    grid-area: box1;
    background-color: #739fcb;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 80%,
        50% 100%,
        0% 80%);
        margin: auto;
 }
 .purchase-item1 p{
    padding:20px;
    text-align: center;
    color: white;
    font-weight: 500;
 }
 .purchase-item2{
    grid-area: box2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02";
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 .purchase-detail1{
    grid-area: box01;
    background-color: #739fcb;
 }
  .purchase-detail1 p{
    color: white;
    font-weight : 500;
    margin-left: 8%;
  }
 .purchase-detail2{
    grid-area: box02;
 }
  .purchase-detail3{
    display:grid;
    grid-template-columns: 30% calc( 70% - 10px );
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002";
    place-content: center;
    place-items:center;
    margin: 30px auto;
 }
 .purchase-detail3-1{
    grid-area: box001;
 }
  .purchase-detail3-2{
    grid-area: box002;
 }
 .purchase-detail3-2 p{
    padding-right: 10px;

 }
 .purchase-item3{
    grid-area: box3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
    "box01"
    "box02" ;
    border: 1px solid  #739fcb;
    place-content: center;
    align-items: center;
 }
 /* レンタル可能な容器の種類 end*/
/*補足1*/
.purchase-etc{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    background-color: #def7b6;/*#fcf6c3;*/
    place-content: center;
    place-items: center;
    gap: 5%;
}
.purchase-etc img{
    width: 15%;
}
.purchase-etc p{
    width: 70%;
}
/*補足1*/

/*ガスの引き渡し start*/
.purchase-detail3-3{
    grid-area: box002;
    display: flow;
    flex-flow: row wrap;
}
.purchase-detail3-3 img{
    width: 30%;
}
/*ガスの引き渡し 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*/

}