body {
    margin: 0;
    padding: 0;
  }
  
  /*ヘッダー*/
  header {
      position: relative;
      padding: 15px 0 0 0px;
      background-color: #fff;
  }
  .logo {
      width: 140px;
      margin: 0 auto;
  }
  img {
      max-width: 100%;
      height: auto;
  }
  
  
  /*ハンバーガーアイコン*/
  .btn-burger {
      cursor: pointer;
      display: block;
      width: 56px;
      height: 60px;
      position: absolute;
      top: 5px;
      right: 10px;
  }
  
  /*ハンバーガーアイコンを作る三本線*/
  .icon, .icon:before, .icon:after {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      height: 2px; /*線の太さ*/
      width: 35px; /*線の長さ*/
      background-color: #444;
      border-radius: 2px;
      display: block;
      content: '';
      cursor: pointer;
      margin: auto;
  }
  
  /*三本線の間隔*/
  .icon:before {
    top: 20px;
  }
  .icon:after {
    top: -20px;
  }
  
  /*チェックボックス非表示*/
  .nav-toggle {
      display: none;
  }
  
  /*アイコンをクリックしたら*/
  .nav-toggle:checked ~ .btn-burger .icon {
      background: transparent;
  }
  .nav-toggle:checked ~ .btn-burger .icon:before {
      transform: rotate(-45deg);
      top: 0;
  }
  .nav-toggle:checked ~ .btn-burger .icon:after {
      transform: rotate(45deg);
      top: 0;
  }
  
  .icon,
  .icon:before,
  .icon:after {
      transition: all .2s;
  }
  
  
  /*中身*/
  .nav_Ham {
      background-color: #66C5FF;
  }
  .nav-list_Ham a {
      display: block;
      text-decoration: none;
      color: #fff;
  }
  
  .nav-list_Ham {
      list-style: none;
      display: none;
      margin: 0;
      padding-left: 20px;
      text-shadow: 1px 1px 2px rgb(0 0 0 / 85%);
  }
  
  .nav-list_Ham li {
      margin: 0;
      padding: 10px;
  }
  
  .nav-toggle:checked ~ .nav_Ham .nav-list_Ham {
      display: block;
  }
  
  /*メインイメージ*/
  .top_Ham {
      height: 200px;
      margin-bottom: 50px;
      background-color: #f0f8ff;
  }
  
  /* --------------------------------------------------
    幅768px以上のスタイル指定 ここから
  -------------------------------------------------- */
  @media screen and (min-width: 768px) {
  /* ハンバーガーボタン */
  .btn-burger {
      display: none;  /*768px以上では使用しない */
  }
  header {
      padding: 41px 0 0;
  }
  .logo {
      width: auto;
      margin: 0 0 20px;
      padding: 0;
      text-align: center;
  }
  .nav-toggle:checked ~ .nav_Ham .nav-list_Ham {
      display: none;
  }
  .nav_Ham {
      height: 50px;
  }
  .nav-list_Ham {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    text-align: center;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 85%);
}
  .nav-list_Ham li {
    flex-basis: 10
    0px;

  }

  .nav-list_Ham li:not(:last-child) {
      border-right: 1px solid #fff;
  }
  }