body {
    margin-bottom: 0;
    margin-left: 0;
}

.respon_top {
    display: none;
}

#nav {
    display: none;
}

.res_footer_nav {
    display: none;
    width: 100%;
}

.res_footer_nav a {
    color:#000;
}

.copyright {
    margin-bottom: 0;
}

.res_info {
    display: none;
}





@media  screen and (max-width : 1100px) {

    body {
        margin: 0;
    }

    #body {
        width: 100%;
        margin: 0 auto;
    }

    .nav {
        text-align: right;
    }

    .nav {
        display: none;
    }

    #nav {
        display: block;
        z-index: 10;
    }

    h1, h2 {
        font-size: 24px;
    }


    p {
        font-size: 16px;
    }




/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:rgba(255, 255, 255, 0.5);
    border: 1px solid #333;
    border-radius: 3px;
  }
  
  /*----------------------------
  * メニュー本体
  *----------------------------*/
  .menu{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:#890032;
    opacity: 0.8;
  }
  .menu__item{
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
  }
  
  /*----------------------------
  * アニメーション部分
  *----------------------------*/
  
  /* アニメーション前のメニューの状態 */
  .menu{
    transform: translateX(100vw);
    transition: all .3s linear;
  }
  /* アニメーション後のメニューの状態 */
  .menu.is-active{
    transform: translateX(0);
  }
  
  .menu__item a{
      color: #fff;
  }
  
  .menu__item a:hover {
      border: 1px solid #fff;
      padding:  10px 30px 10px 30px;
      transition: 0.5s;
  }
  
  .info {
      width: 80%;
      margin: auto;
      margin-top: 80px;
  }


  form {
    width: 90%;
    margin-top: 40px;
    }

    table {
        width: 80%;
        margin: auto;
    }

    td, input, textarea {
        width: 100%;
        display: inline;
    }

    th {
        width: 45%;
        display: block;
        float: left;
        text-align: right;
    }

    .required {
        float: right;
        text-align: left;
    }

    td {
        float: right;
    }

    input, textarea {
        width: 100%;
        margin: auto;
    }








    .footer_nav {
        display: none;
    }

    .res_footer_nav {
        padding-top: 20px;
        display: block;
        padding-left: 0;
    }

    footer p {
        margin-top: 0px;
    }



}







@media  screen and (max-width : 540px) {

    body {
        margin: 0;
    }

    .nav {
        display: none;
    }

    .respon_nav {
        display: block;
    }

    .respon_nav li {
        display: flex;
        flex-direction: column;
    }

    .info {
        display: none;
    }

    .res_info {
        display: block;
        width: 80%;
        margin: auto;
        margin-top: 80px;
    }

    table {
        width: 90%;
        margin-bottom: 40px;
    }

    th {
        width: 45%;
        display: block;
        float: left;
        text-align: left;
    }

    .required {
        float: right;
        text-align: right;
    }

    .submit {
        width: 90%;
        margin: auto;
    }

    #submit input {
        width: 90%;
    }


    #back {
        width: 90%;
        margin: auto;
    }

    #sand {
        width: 90%;
        margin: auto;

    }

    .copyright {
        font-size: 12px;
    }


    input[type="button"],input[type="submit"], input[type="hidden"] {
        -webkit-appearance: none !important; 
        border-radius: 0!important;
    }
    
    * {
        -webkit-appearance: none!important;
    }


}