@charset "UTF-8";
@media (min-width: 1000px) {
body{
    min-width: 1000px;
}
.container{
    width: 100%;
    margin: 0 auto;

}
.menu{
    width: 100%;
    display: flex;
    align-items: center;
    

}
.openbtn,#g-nav,#g-nav-list{
    display: none;
}
.title{
    width: 20%;

}
.title img{
    width: 100%;
}
.home{
    width: 80%;
    }
    .home ul{
        width: 50%;
        height: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 380px;

    }
    .home li{
        list-style: none;
    }

.pricelist{
    width: 80%;
    margin: 0 auto;
    text-align: center;
 }


.pricelist img{
    width: 30%;  
   
}


table{
    width: 60%;
    margin: 0 auto;
  }
  
  table th{
    position: relative;
    text-align: left;
    width: 30%;
  }
  
  /*table th:after{
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #333;
    position: absolute;
    top:calc(50% - 1px);
    right:-15px;
  }*/
  
  table td{
    text-align: right;
    padding:7px 0 7px 30px;
    width: 30%;
  }

  .explain{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.aucation{
    width: 80%;
    margin: 0 auto;
   

}
.aucation h3{
   
    text-align: center;
}
.aucation dd{
    width: 55%;
   margin: 0 auto;
}
.snsicon{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
}
.fooder{
    width: 100%;
    text-align: center;
    margin-top: 30px;
        
    }
}
@media (min-width: 601px) and (max-width:999px) {
    /* 大枠 */
    body{
      min-width:601px;
      max-width:999px;
      margin: 0 auto;
    }
    .container {
      width: 100%;
    }
    
    .menu{
        width: 100%;
        display: flex;
        align-items: center;
        
    
    }

    .title{
        width: 100%;
    
    }
    .title img{
        width: 30%;
    }
    .home{
       display: none;
        }
        #g-nav{
            /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
            position:fixed;
            z-index: 999;
            /*ナビのスタート位置と形状*/
            top:0;
            right: -120%;
            width:100%;
            height: 100vh;/*ナビの高さ*/
            background:#c1baba;
            /*動き*/
            transition: all 0.6s;
        }
        
        /*アクティブクラスがついたら位置を0に*/
        #g-nav.panelactive{
            right: 0;
        }
        
        /*ナビゲーションの縦スクロール*/
        #g-nav.panelactive #g-nav-list{
            /*ナビの数が増えた場合縦スクロール*/
            position: fixed;
            z-index: 999; 
            width: 100%;
            height: 100vh;/*表示する高さ*/
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /*ナビゲーション*/
        #g-nav ul {
            /*ナビゲーション天地中央揃え*/
            position: absolute;
            z-index: 999;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        
        /*リストのレイアウト設定*/
        
        #g-nav li{
            list-style: none;
            text-align: center;
        }
        
        #g-nav li a{
            color: #333;
            text-decoration: none;
            padding:10px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: bold;
        }
        
        /*========= ボタンのためのCSS ===============*/
        .openbtn{
            position:fixed;
            z-index: 9999;/*ボタンを最前面に*/
            top:10px;
            right: 10px;
            cursor: pointer;
            width: 50px;
            height:50px;
        }
            
        /*×に変化*/	
        .openbtn span{
            display: inline-block;
            transition: all .4s;
            position: absolute;
            left: 14px;
            height: 3px;
            border-radius: 2px;
            background-color: #666;
              width: 45%;
          }
        
        .openbtn span:nth-of-type(1) {
            top:15px;	
        }
        
        .openbtn span:nth-of-type(2) {
            top:23px;
        }
        
        .openbtn span:nth-of-type(3) {
            top:31px;
        }
        
        .openbtn.active span:nth-of-type(1) {
            top: 18px;
            left: 18px;
            transform: translateY(6px) rotate(-45deg);
            width: 30%;
        }
        
        .openbtn.active span:nth-of-type(2) {
            opacity: 0;
        }
        
        .openbtn.active span:nth-of-type(3){
            top: 30px;
            left: 18px;
            transform: translateY(-6px) rotate(45deg);
            width: 30%;
        }
        

        .section{
            padding:100px 30px;
        }
        
        section:nth-child(2n){
            background:#f3f3f3;	
        }
        
    }

    .title{
        width: 20%;
    
    }
    .title img{
        width: 100%;
    }
    .home{
        width: 80%;
        }
        .home ul{
            width: 50%;
            height: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 380px;
    
        }
        .home li{
            list-style: none;
        }
    
    .pricelist{
        width: 80%;
        margin: 0 auto;
        text-align: center;
     }
    
    
    .pricelist img{
        width: 30%;  
       
    }
    
    
    table{
        width: 60%;
        margin: 0 auto;
      }
      
      table th{
        position: relative;
        text-align: left;
        width: 30%;
      }
      
      
      
      table td{
        text-align: right;
        padding:7px 0 7px 30px;
        width: 30%;
      }
    
      .explain{
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    .aucation{
        width: 80%;
        margin: 0 auto;
       
    
    }
    .aucation h3{
       
        text-align: center;
    }
    .aucation dd{
        width: 55%;
       margin: 0 auto;
    }
    .snsicon{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        margin-top: 50px;
    }
    .fooder{
        width: 100%;
        text-align: center;
        margin-top: 30px;
            
        }
    




    @media (max-width: 600px) {
        body{
          max-width: 600px;
        }
        /* 大枠 */
        .container {
          width:100%;
        }
    
    .container {
        width: 100%;
      }
      
      .menu{
          width: 100%;
          display: flex;
          align-items: center;
          
      
      }
  
      .title{
          width: 40%;
      
      }
      .title img{
          width: 100%;
      }
      .pricelist img{
        width: 60%;
      }
      .home{
         display: none;
          }
          #g-nav{
              /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
              position:fixed;
              z-index: 999;
              /*ナビのスタート位置と形状*/
              top:0;
              right: -120%;
              width:100%;
              height: 100vh;/*ナビの高さ*/
              background:#c1baba;
              /*動き*/
              transition: all 0.6s;
          }
          
          /*アクティブクラスがついたら位置を0に*/
          #g-nav.panelactive{
              right: 0;
          }
          
          /*ナビゲーションの縦スクロール*/
          #g-nav.panelactive #g-nav-list{
              /*ナビの数が増えた場合縦スクロール*/
              position: fixed;
              z-index: 999; 
              width: 100%;
              height: 100vh;/*表示する高さ*/
              overflow: auto;
              -webkit-overflow-scrolling: touch;
          }
          
          /*ナビゲーション*/
          #g-nav ul {
              /*ナビゲーション天地中央揃え*/
              position: absolute;
              z-index: 999;
              top:50%;
              left:50%;
              transform: translate(-50%,-50%);
          }
          
          /*リストのレイアウト設定*/
          
          #g-nav li{
              list-style: none;
              text-align: center;
          }
          
          #g-nav li a{
              color: #333;
              text-decoration: none;
              padding:10px;
              display: block;
              text-transform: uppercase;
              letter-spacing: 0.1em;
              font-weight: bold;
          }
          
          /*========= ボタンのためのCSS ===============*/
          .openbtn{
              position:fixed;
              z-index: 9999;/*ボタンを最前面に*/
              top:10px;
              right: 10px;
              cursor: pointer;
              width: 50px;
              height:50px;
          }
              
          /*×に変化*/	
          .openbtn span{
              display: inline-block;
              transition: all .4s;
              position: absolute;
              left: 14px;
              height: 3px;
              border-radius: 2px;
              background-color: #666;
                width: 45%;
            }
          
          .openbtn span:nth-of-type(1) {
              top:15px;	
          }
          
          .openbtn span:nth-of-type(2) {
              top:23px;
          }
          
          .openbtn span:nth-of-type(3) {
              top:31px;
          }
          
          .openbtn.active span:nth-of-type(1) {
              top: 18px;
              left: 18px;
              transform: translateY(6px) rotate(-45deg);
              width: 30%;
          }
          
          .openbtn.active span:nth-of-type(2) {
              opacity: 0;
          }
          
          .openbtn.active span:nth-of-type(3){
              top: 30px;
              left: 18px;
              transform: translateY(-6px) rotate(45deg);
              width: 30%;
          }

          .table{
            width: 90%;
            margin: 0 auto;
          }
          
          table th{
            position: relative;
            text-align: left;
            width: 45%;
            font-size: small;
          }
          
          
          
          table td{
            text-align: right;
            padding:7px 0 7px 30px;
            width: 30%;
          }
          
          .section{
              padding:100px 30px;
          }
          
          section:nth-child(2n){
              background:#f3f3f3;	
          }
          
          .explain{
            font-size: small;
          }
          .aucation h3{
            font-size: smaller;
          }
          .aucation dd{
            width: 90%;
            font-size: small;
          }
      }