.container{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: block;
    margin-top: 60px;
    text-align: center;
  }
  button{
    display: inline-block;
    font-family: 'Sawarabi Mincho', sans-serif;
    position: relative;
    color: rgba(255, 255, 255, 0);
    cursor: pointer;
    border: none;
    background-color:white;   
    background-size: cover;
    margin-top: 30px;
    width:100%;
    background-repeat:  no-repeat;
    background-position:left center;
    text-align: center;
  }
  .btn-1{
    background-image:url(新ヘッダー.jpg);
  }
  .btn-2{
    background-image: url(黒糸町.jpg);
  }
  .container1 { display: block !important; }
  .container2 { display: none !important; }
  @media only screen and (max-width: 750px) {
  .container1 { display: none !important; }
  .container2 { display: block !important; }
  }
  .container1 p{
    display: block;
    font-size: 3em;
  }
  .container1 div{
    display: block;
    font-size: 2em;
  }
  .container a{
    text-decoration: none;
  }
  button:hover {
      cursor: pointer;

      text-align: center;
  }
  button:hover {
      color: #000000;
      background-repeat:  no-repeat;
      background-position:left center;
      background-size: cover;
  }
  .btn-1:hover{
      background-image:url(新ヘッダー薄.jpg);
  }
  .btn-2:hover{
      background-image: url(黒糸町薄.jpg);
      background-position:center;
  }
  html,body{
      overflow-x: hidden;
      height: 100%;
  }
      body {
          background: rgba(255, 255, 255, 0.699);
          padding: 0;
          margin: 0;
          font-family: 'Sawarabi Mincho', sans-serif;
          animation: fadeIn 2s ease 0s 1 normal;
          -webkit-animation: fadeIn 2s ease 0s 1 normal;
          text-align: center;
      }
      .header {
          text-align: center;
          font-size: 4em;
          color: rgb(187, 49, 25);
          font-family: 'Nanum Pen Script', cursive;
          display: block;
          margin: 0 auto;
          width: 100%;
          max-width: 100%;
          box-shadow: none;
          background-color: rgba(255, 255, 255, 0.637);
          position: fixed;
          height: 60px!important;
          overflow: hidden;
          z-index: 10;
      }
      #logo{
          width:220px!important;
          height: 60px!important;
      }
      .title{
          font-size: 2em;
          background-color: white;
          color: rgb(136, 86, 105);
          font-family: 'Noto Serif JP', serif;
          float: inline-start ;
          text-align: center;
          width:100%;
      
      }
      .mainInner{
          display: table;
          height: 100%;
          width: 100%;
          text-align: center;
          margin-top: 60px;
      }
      #sidebarMenu {
          height: 100%;
          position: fixed;
          font-family: 'Sawarabi Mincho', sans-serif;
          left: 0;
          width: 250px;
          margin-top: 60px;
          transform: translateX(-250px);
          transition: transform 250ms ease-in-out;
          background: rgba(228, 228, 228, 0.89);
          z-index: 10;
      }
      .sidebarMenuInner{
          margin:0;
          padding:0;
      }
      .sidebarMenuInner li{
          list-style: none;
          color:black;
          text-transform: uppercase;
          font-weight: bold;
          padding: 20px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-user-select: none;
          cursor: default;
      }
      .sidebarMenuInner li:hover {
          cursor: pointer;
      }
      .sidebarMenuInner li:hover {
          color: #ffffff;
          background-color: #dd7878c0;
      }
      .sidebarMenuInner .o{
          background-color: rgba(22, 22, 22, 0.096);
      }
      .sidebarMenuInner .i{
          background-color: rgba(199, 199, 199, 0.096);
      }
      .sidebarMenuInner li span{
          display: block;
          font-size: 14px;
          color: rgb(100, 100, 100);
      }
      .sidebarMenuInner li a{
          color:rgb(0, 0, 0);
          text-transform: uppercase;
          font-weight: bold;
          cursor: pointer;
          text-decoration: none;
      }
      input[type="checkbox"]:checked ~ #sidebarMenu {
          transform: translateX(0);
      }
      
      input[type=checkbox] {
          transition: all 0.3s;
          box-sizing: border-box;
          display: none;
      }
      .sidebarIconToggle {
          transition: all 0.3s;
          box-sizing: border-box;
          cursor: pointer;
          position: absolute;
          z-index: 99;
          height: 100%;
          width: 100%;
          top: 22px;
          left: 15px;
          height: 22px;
          width: 22px;
      }
      .spinner {
          transition: all 0.3s;
          box-sizing: border-box;
          position: absolute;
          height: 3px;
          width: 100%;
          background-color: rgb(53, 53, 53);
      }
      .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      .diagonal.part-1 {
          position: relative;
          transition: all 0.3s;
          box-sizing: border-box;
          float: left;
      }
      .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          opacity: 0;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(135deg);
          margin-top: 8px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(-135deg);
          margin-top: -9px;
      }