@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* 高圧ガス購入までの流れ  start*/
.process-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    /*margin: 0px auto 50px auto;*/
}
.process-content1{
    display: grid;
    grid-template-columns: 4fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image text";
    /*place-items: center;*/
 }
.process-image{
    grid-area: image;
}
.process-text{
    grid-area: text;
}
.process-content2{
    width: 100%;
    margin: auto ;
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;
    grid-template-rows: auto;
    grid-template-areas:
    "number title n-text";
    background-color: #ddf0fc;
    place-items:center;
    place-content:center;
    border-radius: 20px;
}
.process-number{
    grid-area: number;
}
.process-number p{
    font-size: 4.0rem;
    font-weight: 800;
    color: white;
}
.process-title{
    grid-area: title;
    text-align: center;
}
.process-t{
    grid-area: n-text;
}
.process-t p{
    margin: 20px 40px 50px 40px;
}
.process-t li{
    margin-left: 40px;

}
.process-links{
    margin-top: 10px;
    display: flex;
    flex-flow: row wrap;
    gap: 3% ;
    justify-content:flex-end;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* 高圧ガス購入までの流れ  start*/
.process-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    /*margin: 0px auto 50px auto;*/
}
.process-content1{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image"
    "text";
    /*place-items: center;*/
 }
.process-image{
    grid-area: image;
}
.process-text{
    grid-area: text;
}
.process-content2{
    width: 100%;
    margin: auto ;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "title number"
    "n-text n-text";
    background-color: #ddf0fc;
    place-items:center;
    place-content:center;
    border-radius: 20px;
}
.process-number{
    grid-area: number;
}
.process-number p{
    font-size: 4.0rem;
    font-weight: 800;
    color: white;
}
.process-title{
    grid-area: title;
    text-align: center;
}
.process-title img{
    width: 50%;
    margin: auto;
}
.process-t{
    grid-area: n-text;
}
.process-t p{
    margin: 20px 40px 50px 40px;
}
.process-t li{
    margin-left: 40px;

}
.process-links{
    margin-top: 10px;
    display: flex;
    flex-flow: row wrap;
    gap: 3% ;
    justify-content:flex-end;
}
}
@media screen and (max-width: 480px){
/* 高圧ガス購入までの流れ  start*/
.process-section{
    width: 94%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
}
.process-content1{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image"
    "text";
 }
.process-image{
    grid-area: image;
}
.process-text{
    grid-area: text;
}
.process-content2{
    width: 100%;
    margin: auto ;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "title number"
    "n-text n-text";
    background-color: #ddf0fc;
    place-items:center;
    place-content:center;
    border-radius: 20px;
}
.process-number{
    grid-area: number;
}
.process-number p{
    font-size: 4.0rem;
    font-weight: 800;
    color: white;
}
.process-title{
    grid-area: title;
    text-align: center;
}
.process-title img{
    width: 50%;
    margin: auto;
}
.process-t{
    grid-area: n-text;
}
.process-t p{
    margin: 10px 5% 50px 5%;
}
.process-t li{
    margin-left: 40px;

}
.process-links{
    margin-top: 10px;
    display: flex;
    flex-flow: row wrap;
    gap: 3% ;
    justify-content:flex-end;
}
}