@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*アンカーリンク start*/
.anker-section{
   width: 80%;
   margin: auto;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 10px;
}
.anker-card{
   width: 150px;
   display: flex;
   flex-flow: row wrap;
   border: 1px solid rgb(149, 149, 149);
   border-radius: 10px;
   height: 30px;
   place-content: center;
   background-color:white;
   margin-bottom: 10px;
 }
.anker-card img{
   width: 10%;
   margin-left: 10px;
}
.anker-card h1{
   margin: 5px;
   font-size: 0.8rem;
   color:rgb(78, 78, 78);
   font-weight: 500;
}
/*　アンカーリンク end*/
/*ガスの種類 表 start*/
 .kind-section{
    width: 90%;
    margin: auto;
    max-width: 1200px;
 }
 .kind-content{
    width: 100%;
    margin: 100px auto 50px auto;
    display: grid;
    grid-template-columns: 20% 20% 15% 15% 15% 15%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA  boxA  boxA  boxA  boxA  boxA"
    "boxB  boxC  boxD  boxE  boxF  boxG"
    "boxBB boxCC boxDD boxEE boxFF boxGG";
    place-content: center;
    gap: 4px;
 }
 .gasA{
    grid-area: boxA;
 }
  .gasA h1{
    color:white;
    margin-left: 5%;
    font-size: 1.3rem;
 }
 .gasB p, .gasC p, .gasD p, .gasE p, .gasF p, .gasG p, .gasBB p, .gasCC p, .gasDD p, .gasEE p, .gasFF p, .gasGG p{
    font-size: 0.9rem;
    text-align: center;
    line-height: 100%;
    margin: 10% 5% 10% 5%;
 }
 .gasB{
    grid-area: boxB;
    background-color: #f5f9fd;
 }
 .gasC{
    grid-area: boxC;
    background-color: #f5f9fd;
 }
 .gasD{
    grid-area: boxD;
    background-color: #f5f9fd;
 }
.gasE{
    grid-area: boxE;
    background-color: #f5f9fd;
 }
 .gasF{
    grid-area: boxF;
    background-color: #f5f9fd;
 }
.gasG{
    grid-area: boxG;
    background-color: #f5f9fd;
 }
 .gasBB{
    grid-area: boxBB;
    place-content: center;
  }
  .gasBB img{
    width: 40%;
    display: block;
    margin:auto;
 }
 .gasCC{
    grid-area: boxCC;
    background-color: #fdfdeb;
  }
  .gasCC p{
    /*text-align: left;*/
    /*margin-left: 5%;*/
 }
 .gasDD{
    grid-area: boxDD;
    place-content: center;
    background-color: #f5f9fd;
 }
  .gasDD img{
    width: 70%;
    display: block;
    margin:auto;
 }
.gasEE{
    grid-area: boxEE;
    background-color: #fefeff;
 }
 .gasFF{
    grid-area: boxFF;
    background-color: #f5f9fd;
 }
.gasGG{
    grid-area: boxGG;
    background-color: #fefeff;
 }
 .gasGG p{
   text-align: left;
 }
/*ガスの種類 表　end*/
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*アンカーリンク start*/
.anker-section{
   width: 80%;
   margin: auto;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 10px;
}
.anker-card{
   width: 150px;
   display: flex;
   flex-flow: row wrap;
   border: 1px solid rgb(149, 149, 149);
   border-radius: 10px;
   height: 30px;
   place-content: center;
   background-color:white;
   margin-bottom: 10px;
 }
.anker-card img{
   width: 10%;
   margin-left: 10px;
}
.anker-card h1{
   margin: 5px;
   font-size: 0.8rem;
   color:rgb(78, 78, 78);
   font-weight: 500;
}
/*　アンカーリンク end*/
/*ガスの種類 表 start*/
 .kind-section{
    width: 90%;
    margin: auto;
    max-width: 1200px;
 }
 .kind-content{
    width: 100%;
    margin: 100px auto 50px auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA  boxA  boxA  "
    "boxB  boxC  boxD  "
    "boxBB boxCC boxDD "
    "boxE  boxF  boxG"
    "boxEE boxFF boxGG"
    ;
    place-content: center;
    gap: 4px;
 }
 .gasA{
    grid-area: boxA;
 }
  .gasA h1{
    color:white;
    margin-left: 5%;
    font-size: 1.3rem;
 }
 .gasB p, .gasC p, .gasD p, .gasE p, .gasF p, .gasG p, .gasBB p, .gasCC p, .gasDD p, .gasEE p, .gasFF p, .gasGG p{
    font-size: 0.9rem;
    text-align: center;
    line-height: 100%;
    margin: 10% 5% 10% 5%;
 }
 .gasB{
    grid-area: boxB;
    background-color: #f5f9fd;
 }
 .gasC{
    grid-area: boxC;
    background-color: #f5f9fd;
 }
 .gasD{
    grid-area: boxD;
    background-color: #f5f9fd;
 }
.gasE{
    grid-area: boxE;
    background-color: #f5f9fd;
 }
 .gasF{
    grid-area: boxF;
    background-color: #f5f9fd;
 }
.gasG{
    grid-area: boxG;
    background-color: #f5f9fd;
 }
 .gasBB{
    grid-area: boxBB;
    place-content: center;
  }
  .gasBB img{
    width: 50%;
    max-width: 100px;
    display: block;
    margin:auto;
 }
 .gasCC{
    grid-area: boxCC;
    background-color: #fdfdeb;
  }
  .gasCC p{
    /*text-align: left;*/
    /*margin-left: 5%;*/
 }
 .gasDD{
    grid-area: boxDD;
    place-content: center;
    background-color: #f5f9fd;
 }
  .gasDD img{
    width: 70%;
    max-width: 120px;
    display: block;
    margin:auto;
 }
.gasEE{
    grid-area: boxEE;
    background-color: #fefeff;
 }
 .gasFF{
    grid-area: boxFF;
    background-color: #f5f9fd;
 }
.gasGG{
    grid-area: boxGG;
    background-color: #fefeff;
 }
 .gasGG p{
   text-align: left;
 }
/*ガスの種類 表　end*/
}
@media screen and (max-width: 480px){
/*アンカーリンク start*/
.anker-section{
   width: 90%;
   margin: auto;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 10px;
}
.anker-card{
   width: 130px;
   display: flex;
   flex-flow: row wrap;
   border: 1px solid rgb(149, 149, 149);
   border-radius: 10px;
   height: 30px;
   place-content: center;
   background-color:white;
   margin-bottom: 10px;
 }
.anker-card img{
   width: 10%;
   margin-left: 10px;
}
.anker-card h1{
   margin: 5px;
   font-size: 0.8rem;
   color:rgb(78, 78, 78);
   font-weight: 500;
}
/*　アンカーリンク end*/
/*ガスの種類 表 start*/
 .kind-section{
    width: 90%;
    margin: auto;
    max-width: 1200px;
 }
 .kind-content{
    width: 100%;
    margin: 50px auto 50px auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA  boxA  boxA  "
    "boxB  boxC  boxD  "
    "boxBB boxCC boxDD "
    "boxE  boxF  boxG"
    "boxEE boxFF boxGG"
    ;
    place-content: center;
    gap: 4px;
 }
 .gasA{
    grid-area: boxA;
 }
  .gasA h1{
    color:white;
    margin-left: 5%;
    font-size: 1.3rem;
 }
 .gasB p, .gasC p, .gasD p, .gasE p, .gasF p, .gasG p, .gasBB p, .gasCC p, .gasDD p, .gasEE p, .gasFF p, .gasGG p{
    font-size: 0.9rem;
    text-align: center;
    line-height: 100%;
    margin: 10% 5% 10% 5%;
 }
 .gasB{
    grid-area: boxB;
    background-color: #f5f9fd;
 }
 .gasC{
    grid-area: boxC;
    background-color: #f5f9fd;
 }
 .gasD{
    grid-area: boxD;
    background-color: #f5f9fd;
 }
.gasE{
    grid-area: boxE;
    background-color: #f5f9fd;
 }
 .gasF{
    grid-area: boxF;
    background-color: #f5f9fd;
 }
.gasG{
    grid-area: boxG;
    background-color: #f5f9fd;
 }
 .gasBB{
    grid-area: boxBB;
    place-content: center;
  }
  .gasBB img{
    width: 70%;
    max-width: 100px;
    display: block;
    margin:auto;
 }
 .gasCC{
    grid-area: boxCC;
    background-color: #fdfdeb;
  }
  .gasCC p{
    /*text-align: left;*/
    /*margin-left: 5%;*/
 }
 .gasDD{
    grid-area: boxDD;
    place-content: center;
    background-color: #f5f9fd;
 }
  .gasDD img{
    width: 90%;
    max-width: 120px;
    display: block;
    margin:auto;
 }
.gasEE{
    grid-area: boxEE;
    background-color: #fefeff;
 }
 .gasFF{
    grid-area: boxFF;
    background-color: #f5f9fd;
 }
.gasGG{
    grid-area: boxGG;
    background-color: #fefeff;
 }
 .gasGG p{
   text-align: left;
 }
/*ガスの種類 表　end*/
}