.menu {
    width:80%;
    padding: 10px 10px 20px;
    margin: 0 auto;
    input {
    display: none; /* チェックボックスを隠す */
  }
    label, 
    .menu-item {
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #fff;
    line-height: 1; /* PEES行間 */
    position: relative;
    margin: 4px 0 1px; /* ラベルの間隔 */
    padding: 10px; /* PEESドロップダウンの高さ */
    background-color: black;
    outline: none; 
  }
    label:focus, .menu-item:focus {
      background-color: black; /* フォーカス時の背景色 */
  }

  /* ドロップダウンなしのメニューアイテム */
  .menu-item {
    text-decoration: none;
    color: #fff;
    background-color: black; /* 固定背景色 */
  }
  /* 開いたときに表示される部分 */
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 1px;
    background-color: #333333; /* PEES */
	
    li {
    height: 0;
    overflow-y: hidden;
    transition: padding-bottom 0.5s, padding-top 0.5s;
    padding-top: 0;
    padding-bottom: 0;

  }
  
  }
  }
  /* チェックボックスがチェックされた場合、またはフォーカスされた場合に開く */
  #menu_bar01:checked ~ #links01 li,
  #menu_bar02:checked ~ #links02 li,
  #menu_bar03:checked ~ #links03 li,
  #menu_bar04:checked ~ #links04 li {
    height: auto; /* 開いたときの高さ */
    padding: 0; /* PEES */
  }
  /* 開いたときの下の余白 */
  #menu_bar01:checked ~ #links01 li:last-child,
  #menu_bar02:checked ~ #links02 li:last-child,
  #menu_bar03:checked ~ #links03 li:last-child,
  #menu_bar04:checked ~ #links04 li:last-child {
    margin-bottom: 0; /* PEES */
  }
  
  /* 閉じた状態の矢印描画 */
  .menu label:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: #fff 2px solid;
    border-right: #fff 2px solid;
    transform: rotate(135deg);
    position: absolute;
    right: 2%;
    top: 0;
    bottom: 15%;
    margin: auto;
  }
  
  /* 開いた状態の矢印描画 */
  .menu input[type=checkbox]:checked + label:after {
    transform: rotate(-45deg);
  }
  

    a{
      text-decoration:none;
      color:black;
    }
	
hr {
height: 1px;
background-color: #606060;
border: none;
}