/* メニュー全体 */
@media screen and (max-width:550px){
    /*画面幅が550px以下の時*/
.menu {
    width: 90%;
}}
@media screen and (min-width:551px){
    /*画面幅が551px以上の時*/
.menu {
    width: 380px;
}}

  /* チェックボックスは非表示にする（内部的な Off/On の機能だけ利用する） */
  .menu input {
      display: none;
  }
  
 /* 閉じた状態のサブメニュー */
.menu ul {
    line-height: 0px;
    padding: 0 1rem;
    

    /* 下記は開閉によらず共通の設定 */
    background: #eee;
    list-style: none;
    margin: 0;
}

.menu li{
	overflow: hidden;
	transition: all 0.5s;
}



@media screen and (min-width:551px){
    /*画面幅が551px以上の時*/
.menu ul:hover{
    line-height: 40px;
    padding: 1rem 1rem;
}}
@media screen and (min-width:551px){
    /*画面幅が551px以上の時*/
/* 開いた状態のサブメニュー */
.menu input:hover + ul {
    line-height: 40px;
    padding: 1rem 1rem;
}}


@media screen and (max-width:550px){
    /*画面幅が550px以下の時*/
.menu input:checked + ul {
    line-height: 40px;
    padding: 1rem 1rem;
}}


  /* 親項目の装飾 */
  .menu label {
	  position: relative;
      display: block;
      margin: 0;
	  padding: 0.5rem;
	  color: #fff;
      background: #1b2538;
      cursor: pointer;
  }
  
  .menu label::before {
	position: absolute;
	content: '▼';
	color: #ffffff;
	right: 0.5em;
	top: 20%;
  }