@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
.change-title {
    width: 80%;
    max-width: 1000px;
    margin: auto;
}
.change-title h2{
    font-size: 1.4rem;
}
.change-container{
    padding: 20px 0px;
    margin-bottom: 100px;
}
.change-container h1{
    font-size: 1.4rem;
}
.change-content{
    width: 80%;
    max-width: 1000px;
    margin: 20px auto 50px auto;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1%;
    grid-template-areas:
    "box1 box2";
    background-color: white;
    border-radius: 10px;
}
.change-image{
    grid-area: box1;
    display: flex;
    justify-content: center;
}
.change-image img{
    width: 100%;
    height: auto;
}
.change-text{
    grid-area: box2;
    display: block;
}
.change-text h1, .change-text p{
    margin: 20px 20px;
}
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
/*詳しくはこちらリンク start*/
.link-content{
    width: 80%;
    max-width: 1000px;
    display: flex;
    flex-flow: row wrap;
    margin: 0px auto 50px auto;
    gap: 5%;
    align-items: center;
    justify-content: center;
    background-color: #fdecff;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.link-text{
    width: 100%;
}
.link-text p{
    text-align: center;
    font-weight: 600;
}
/*詳しくはこちらリンク end*/
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
.change-title {
    width: 80%;
    max-width: 1000px;
    margin: auto;
}
.change-title h2{
    font-size: 1.4rem;
}
.change-container{
    padding: 20px 0px;
    margin-bottom: 100px;
}
.change-container h1{
    font-size: 1.4rem;
}
.change-content{
    width: 90%;
    max-width: 1000px;
    margin: 20px auto 50px auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1%;
    grid-template-areas:
    "box1"
    "box2";
    background-color: white;
    border-radius: 10px;
}
.change-image{
    grid-area: box1;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 50%;
    min-width: 450px;
}
.change-image img{
    width: 100%;
    height: auto;
}
.change-text{
    grid-area: box2;
    display: block;
}
.change-text h1, .change-text p{
    margin: 20px 20px;
}
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
/*詳しくはこちらリンク start*/
.link-content{
    width: 80%;
    max-width: 1000px;
    display: flex;
    flex-flow: row wrap;
    margin: 0px auto 50px auto;
    gap: 50px;
    align-items: center;
    justify-content: center;
    background-color: #ffeefc;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.link-text{
    width: 100%;
}
.link-text p{
    text-align: center;
    font-weight: 600;
}
/*詳しくはこちらリンク end*/
}
@media screen and (max-width: 480px){
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
.change-title {
    width: 90%;
    max-width: 1000px;
    margin: auto;
}
.change-title h2{
    font-size: 1.4rem;
}
.change-container{
    padding: 20px 0px;
    margin-bottom: 50px;
}
.change-container h1{
    font-size: 1.4rem;
}
.change-content{
    width: 94%;
    max-width: 1000px;
    margin: 20px auto 50px auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1%;
    grid-template-areas:
    "box1"
    "box2";
    background-color: white;
    border-radius: 10px;
}
.change-image{
    grid-area: box1;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 100%;
}
.change-image img{
    width: 100%;
    height: auto;
}
.change-text{
    grid-area: box2;
    display: block;
}
.change-text h1, .change-text p{
    margin: 20px 20px;
}
/*ガスの充填　高圧ガスの返却 高圧ガスの管理*/
/*詳しくはこちらリンク start*/
.link-content{
    width: 80%;
    max-width: 1000px;
    display: flex;
    flex-flow: row wrap;
    margin: 0px auto 50px auto;
    gap: 20px;
    align-items: center;
    justify-content: center;
    background-color: #fee9fa;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.link-text{
    width: 100%;
}
.link-text p{
    text-align: center;
    font-weight: 600;
}
/*詳しくはこちらリンク end*/
}