@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*高純度ガスについて start */
.pure-section{
    width: 70%;
    margin: 0px auto 50px auto;
    background-color:rgb(255, 254, 253);
    max-width: 1500px;
}
.pure-content{
    width: 80%;
    margin: 0px auto 100px auto;
    display:flex;
    flex-flow: row wrap;
    gap: 5%;
    place-content: center;
}
.pure-text{
    width: 80%;
}
.pure-image{
    width: 25%;
    max-width: 300px;
}
.pure-image2{
    width: 100%;
    max-width: 800px;
}
/*高純度ガスについて end */

/*ガスの種類とグレード start*/
.grade-section{
    width: 75%;
    margin: auto;
    max-width: 1500px;
}
.grade-content{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 6%;
    justify-content: center;
    
}
.grade-card{
    width: 44%;
    display: grid;
    grid-template-columns: 15% 25% 18% calc( 18% - 2px) 18%;
    grid-template-rows: auto;
    grid-template-areas: 
    "boxA boxL boxL boxL boxL"
    "boxA boxB boxF boxH boxJ"
    "boxA boxC boxG boxI boxK"
    "boxA boxD boxG boxI boxK"
    "boxA boxE boxG boxI boxK"
    "boxA boxM boxM boxM boxM" ;
    place-content: center;
    text-align: center;
    gap: 2%;
    margin-bottom: 50px;
    min-width: 500px;;
}
.bombe-image{
    grid-area: boxA;
    place-content: center;
}
.bombe-image img{
    width: 40%;
    margin: auto 10px auto 10px;
}
.pure-title{
    grid-area: boxL;
    place-content:center;
    background-color:rgb(227, 238, 254, 0.6);
}
.pure-title h1{
    font-size: 1.2rem;
    color:rgb(72, 72, 72);
}
.grade{
    grid-area: boxB;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.grade-g1{
    grid-area: boxC;
    background-color:rgb(227, 238, 254, 0.2);
    place-content:center;
}
.grade-g2{
    grid-area: boxD;
    background-color:rgb(227, 238, 254, 0.4);
    place-content:center;
}
.grade-g3{
    grid-area: boxE;
    background-color:rgb(227, 238, 254, 0.6);
    place-content:center;
}
.grade-industrial{
    grid-area: boxM;
    justify-items: right;
}
.grade-industrial p{
    display: block;
    font-size: 0.9rem;
}
.grade-g1 p, .grade-g2 p, .grade-g3 p{
    margin: 0px;
    font-weight: 500;
 }
.size{
    grid-area: boxF;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.size1{
    grid-area: boxG;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
.presure{
    grid-area: boxH;
    border: 1px solid rgb(227, 238, 254);
    place-content: center;
}
.presure1{
    grid-area: boxI;
    border: 1px solid rgb(227, 238, 254, 0.5);
    place-content: center;
}
.volume{
    grid-area: boxJ;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.volume1{
    grid-area: boxK;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
/*ガスの種類とグレード end*/
/*二種標準ガス start*/
.type2-section{
    width: 80%;
    margin: 0px auto 100px auto;
    max-width: 1500px;
}
.type2-table{
    width: 80%;
    margin: 50px auto 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01 box02 box03"
    "box04 box05 box06"
    "box07 box08 box09";
    place-content: center;
    text-align: center;
    gap: 2%;
 }
.box01{
    grid-area: box01;
    max-width: 200px;
}
.box02{
    grid-area: box02; 
    background-color: rgb(243, 245, 162);
}
.box03{
    grid-area: box03;
    background-color: rgb(175, 229, 245);
}
.box04{
    grid-area: box04;
    background-color: rgb(252, 235, 235,0.7)
}
.box05{
    grid-area: box05;
    background-color: rgb(243, 245, 162, 0.5);
}
.box06{
    grid-area: box06;
    background-color: rgb(175, 229, 245, 0.5);
}
.box07{
    grid-area: box07;
    background-color: rgb(252, 235, 235, 0.9)
}
.box08{
    grid-area: box08;
    background-color: rgb(243, 245, 162, 0.5);
}
.box09{
    grid-area: box09;
    background-color: rgb(175, 229, 245, 0.5);
}
.type2-content{
    display: flex;
    flex-flow: row wrap;
    width: 90%;
    gap: 5%;
    margin: auto;
}
.type2-image1{
    width: 40%;
    max-width: 500px;
}
.type2-text1{
    width: 55%;
}
.type2-image2{
    width: 45%;
    max-width: 500px;
}
.type2-text2{
    width: 50%;
}
/*二種標準ガス end*/
/*混合ガスの問い合わせ start*/
.over3-section{
    width :100%;
    background-color:aliceblue;
    
}
.over3-content{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003";
    place-items: center;
    padding: 30px;
    max-width: 1500px;
}
.box001{
    grid-area: box001;
    width:70%;
}
.box002{
    grid-area: box002;
}
.box003{
    grid-area: box003;
}
/*混合ガスの問い合わせ end*/

}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*高純度ガスについて start */
.pure-section{
    width: 80%;
    margin: 0px auto 50px auto;
    background-color:rgb(255, 254, 253);
}
.pure-content{
    width: 80%;
    margin: 0px auto 100px auto;
    display:flex;
    flex-flow: row wrap;
    gap: 5%;
    justify-content: left;
}
.pure-text{
    width: 80%;
}
.pure-image{
    width: 25%;
    max-width: 300px;
    min-width: 300px;
}
.pure-image2{
    width: 100%;
    max-width: 800px;
}
/*高純度ガスについて end */

/*ガスの種類とグレード start*/
.grade-section{
    width: 75%;
    margin: auto;
}
.grade-content{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 6%; 
}
.grade-card{
    width: 44%;
    display: grid;
    grid-template-columns: 15% 25% 18% calc( 18% - 2px) 18%;
    grid-template-rows: auto;
    grid-template-areas: 
    "boxA boxL boxL boxL boxL"
    "boxA boxB boxF boxH boxJ"
    "boxA boxC boxG boxI boxK"
    "boxA boxD boxG boxI boxK"
    "boxA boxE boxG boxI boxK"
    "boxA boxM boxM boxM boxM" ;
    place-content: center;
    text-align: center;
    gap: 2%;
    margin-bottom: 50px;
    min-width: 500px;;
}
.bombe-image{
    grid-area: boxA;
    place-content: center;
}
.bombe-image img{
    width: 40%;
    margin: auto 10px auto 10px;
}
.pure-title{
    grid-area: boxL;
    place-content:center;
    background-color:rgb(227, 238, 254, 0.6);
}
.pure-title h1{
    font-size: 1.2rem;
    color:rgb(72, 72, 72);
}
.grade{
    grid-area: boxB;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.grade-g1{
    grid-area: boxC;
    background-color:rgb(227, 238, 254, 0.2);
    place-content:center;
}
.grade-g2{
    grid-area: boxD;
    background-color:rgb(227, 238, 254, 0.4);
    place-content:center;
}
.grade-g3{
    grid-area: boxE;
    background-color:rgb(227, 238, 254, 0.6);
    place-content:center;
}
.grade-industrial{
    grid-area: boxM;
    justify-items: right;
}
.grade-industrial p{
    display: block;
    font-size: 0.9rem;
}
.grade-g1 p, .grade-g2 p, .grade-g3 p{
    margin: 0px;
    font-weight: 500;
 }
.size{
    grid-area: boxF;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.size1{
    grid-area: boxG;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
.presure{
    grid-area: boxH;
    border: 1px solid rgb(227, 238, 254);
    place-content: center;
}
.presure1{
    grid-area: boxI;
    border: 1px solid rgb(227, 238, 254, 0.5);
    place-content: center;
}
.volume{
    grid-area: boxJ;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.volume1{
    grid-area: boxK;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
/*ガスの種類とグレード end*/
/*二種標準ガス start*/
.type2-section{
    width: 80%;
    margin: 0px auto 100px auto;
}
.type2-table{
    width: 80%;
    margin: 50px auto 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01 box02 box03"
    "box04 box05 box06"
    "box07 box08 box09";
    place-content: center;
    text-align: center;
    gap: 2%;
}
.box01{
    grid-area: box01;
}
.box02{
    grid-area: box02; 
    background-color: rgb(243, 245, 162);
}
.box03{
    grid-area: box03;
    background-color: rgb(175, 229, 245);
}
.box04{
    grid-area: box04;
    background-color: rgb(252, 235, 235,0.7)
}
.box05{
    grid-area: box05;
    background-color: rgb(243, 245, 162, 0.5);
}
.box06{
    grid-area: box06;
    background-color: rgb(175, 229, 245, 0.5);
}
.box07{
    grid-area: box07;
    background-color: rgb(252, 235, 235, 0.9)
}
.box08{
    grid-area: box08;
    background-color: rgb(243, 245, 162, 0.5);
}
.box09{
    grid-area: box09;
    background-color: rgb(175, 229, 245, 0.5);
}
.type2-content{
    display: flex;
    flex-flow: row wrap;
    width: 90%;
    gap: 5%;
    margin: auto;
}
.type2-image1{
    width: 40%;
}
.type2-text1{
    width: 55%;
}
.type2-image2{
    width: 45%;
}
.type2-text2{
    width: 50%;
}
/*二種標準ガス end*/
/*混合ガスの問い合わせ start*/
.over3-section{
    width :100%;
    background-color:aliceblue;
}
.over3-content{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003";
    place-items: center;
    padding: 30px;
}
.box001{
    grid-area: box001;
    width:70%;
}
.box002{
    grid-area: box002;
}
.box003{
    grid-area: box003;
}
/*混合ガスの問い合わせ end*/

}
@media screen and (max-width: 480px){
/*高純度ガスについて start */
.pure-section{
    width: 90%;
    margin: 0px auto 50px auto;
    background-color:rgb(255, 254, 253);
}
.pure-content{
    width: 90%;
    margin: 0px auto 100px auto;
    display:flex;
    flex-flow: row wrap;
    gap: 5%;
    justify-content: center;
}
.pure-text{
    width: 80%;
}
.pure-image{
    width: 25%;
    max-width: 500px;
    min-width: 300px;
}
.pure-image2{
    width: 100%;
    max-width: 800px;
}
/*高純度ガスについて end */

/*ガスの種類とグレード start*/
.grade-section{
    width: 98%;
    margin: auto;
}
.grade-content{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 6%; 
}
.grade-card{
    width: 98%;
    display: grid;
    grid-template-columns: 15% 25% 18% calc( 18% - 2px) 18%;
    grid-template-rows: auto;
    grid-template-areas: 
    "boxA boxL boxL boxL boxL"
    "boxA boxB boxF boxH boxJ"
    "boxA boxC boxG boxI boxK"
    "boxA boxD boxG boxI boxK"
    "boxA boxE boxG boxI boxK"
    "boxA boxM boxM boxM boxM" ;
    place-content: center;
    text-align: center;
    gap: 1%;
    margin-bottom: 50px;
    min-width: 300px;;
}
.grade-card p{
    font-size: 0.9rem;
}

.bombe-image{
    grid-area: boxA;
    place-content: center;
}
.bombe-image img{
    width: 40%;
    margin: auto 5px auto 5px;
}
.pure-title{
    grid-area: boxL;
    place-content:center;
    background-color:rgb(227, 238, 254, 0.6);
}
.pure-title h1{
    font-size: 1.1rem;
    color:rgb(72, 72, 72);
}
.grade{
    grid-area: boxB;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.grade-g1{
    grid-area: boxC;
    background-color:rgb(227, 238, 254, 0.2);
    place-content:center;
}
.grade-g2{
    grid-area: boxD;
    background-color:rgb(227, 238, 254, 0.4);
    place-content:center;
}
.grade-g3{
    grid-area: boxE;
    background-color:rgb(227, 238, 254, 0.6);
    place-content:center;
}
.grade-industrial{
    grid-area: boxM;
    justify-items: right;
}
.grade-industrial p{
    display: block;
    font-size: 0.9rem;
}
.grade-g1 p, .grade-g2 p, .grade-g3 p{
    margin: 0px;
    font-weight: 500;
    font-size: 0.9rem;
 }
.size{
    grid-area: boxF;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.size1{
    grid-area: boxG;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
.presure{
    grid-area: boxH;
    border: 1px solid rgb(227, 238, 254);
    place-content: center;
}
.presure1{
    grid-area: boxI;
    border: 1px solid rgb(227, 238, 254, 0.5);
    place-content: center;
}
.volume{
    grid-area: boxJ;
    background-color:rgb(227, 238, 254);
    place-content: center;
}
.volume1{
    grid-area: boxK;
    background-color:rgb(227, 238, 254, 0.5);
    place-content: center;
}
/*ガスの種類とグレード end*/
/*二種標準ガス start*/
.type2-section{
    width: 90%;
    margin: 0px auto 50px auto;
}
.type2-table{
    width: 98%;
    margin: 50px auto 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box01 box02 box03"
    "box04 box05 box06"
    "box07 box08 box09";
    place-content: center;
    text-align: center;
    gap: 2%;
}
.type2-table p{
    font-size: 0.9rem;
    padding: 5px;
}
.box01{
    grid-area: box01;
}
.box02{
    grid-area: box02; 
    background-color: rgb(243, 245, 162);
}
.box03{
    grid-area: box03;
    background-color: rgb(175, 229, 245);
}
.box04{
    grid-area: box04;
    background-color: rgb(252, 235, 235,0.7)
}
.box05{
    grid-area: box05;
    background-color: rgb(243, 245, 162, 0.5);
}
.box06{
    grid-area: box06;
    background-color: rgb(175, 229, 245, 0.5);
}
.box07{
    grid-area: box07;
    background-color: rgb(252, 235, 235, 0.9)
}
.box08{
    grid-area: box08;
    background-color: rgb(243, 245, 162, 0.5);
}
.box09{
    grid-area: box09;
    background-color: rgb(175, 229, 245, 0.5);
}
.type2-content{
    display: flex;
    flex-flow: column wrap;
    width: 98%;
    gap: 1%;
    margin: auto;
    place-items: center;
}
.type2-image1{
    width: 90%;
}
.type2-text1{
    width: 98%;
}
.type2-image2{
    width: 90%;
}
.type2-text2{
    width: 98%;
}
/*二種標準ガス end*/
/*混合ガスの問い合わせ start*/
.over3-section{
    width :100%;
    background-color:aliceblue;
}
.over3-content{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 0px 70% 30%;
    grid-template-rows: auto;
    grid-template-areas:
    "box001 box002 box003";
    place-items: center;
    padding: 0px;
}
.box001{
    grid-area: box001;
    width:70%;
    display: none;
}
.box002{
    grid-area: box002;
}
.box002 p{
    padding: 10px;
}
.box003{
    grid-area: box003;
}
/*混合ガスの問い合わせ end*/

}