#desktop{
  --header-size : 50px;
  --main-size   : calc(100% - var(--header-size));
  --color-bg1 : #6bd8e5;
  --color-bg2 : #98cead;
  
  width : 100%;
  height:50vh;
  min-height: 300px;
  box-shadow:4px 4px 20px rgba(0,0,0,0.5);
  display:flex;
  flex-direction:column;
  gap:0;
}
#desktop,
#desktop *{
  white-space:normal;
}
#desktop,
#desktop *,
#desktop *::before,
#desktop *::after{
  -webkit-box-sizing  : border-box;
  -moz-box-sizing  : border-box;
    -o-box-sizing  : border-box;
   -ms-box-sizing  : border-box;
       box-sizing  : border-box;
}

#desktop main{
  height : var(--main-size);
  position:relative;
  z-index:1;
  background: linear-gradient(-45deg, var(--color-bg1), var(--color-bg2));
}
#desktop header{
  width:100%;
  height        : var(--header-size);
  display       : flex;
  gap:20px;
  align-items   : center;
  padding:0 10px;
  background-color:white;
  position:relative;
  z-index:100;
}
#desktop header .time{
  padding-right:10px;
}
#desktop header .time *{
  font-size:0.8em;
  display:block;
  height:30%;
  text-align:right;
}
#desktop header .time > *{
  display:block;
  margin:0;
}

#desktop .menu{
  --hover-color: #FDD;
  height:100%;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

#desktop .menu li{
  height:100%;
  padding:5px;
  
  display:flex;
  gap:2px;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  position:relative;
}

#desktop .menu *{
  color : black;
  text-decoration:none;
}

#menu .icon{
  width:20px;
  height: 20px;
  fill:black;
  vertical-align:middle;
}

#desktop label[for='menu_toggle']{
  display:none;
}

/**
* サブメニュー
*/
#desktop .menu > li > ul{
  display:flex;
  flex-direction:column;
  background-color:white;
  min-width:100px;

  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  padding:0;
}
#desktop .menu > li:has(ul)::after{
  content:"";
  display:inline-block;
  width:0.5em;
  height:0.5em;
  border-color:black;
  border-style:solid;
  border-width:0 1px 1px 0;
  transform:rotate(45deg);
  margin-left:4px;
}
#desktop .menu > li:hover{
  background-color: var(--hover-color);
}
#desktop .menu > li:not(:hover) > ul{
  display:none;
}
#desktop .menu > li > ul li{
  height:var(--header-size);
  padding:5px 10px;
  cursor:pointer;
  justify-content:start;
}
#desktop .menu > li > ul li *{
  white-space:nowrap;
}
#desktop .menu > li > ul li:hover{
  background-color: var(--hover-color);
}

@media (max-width:500px){
  #desktop label[for='menu_toggle']{
    display:block;
  }
  #desktop header nav{
    height:100%;
    margin:0;
    width:100%;
  }
  #desktop header .menu{
    justify-content:flex-start;
    width:100%;
    height:100%;
    background-color:var(--color-body-bg);
  }
  #desktop header .menu > *{
    padding:0;
    flex-grow:1;
  }
}
#desktop .logo{
  height:100%;
  display:flex;
  align-items:center;
  text-decoration:none;
  background-color:var(--color-bg);
}

#desktop .logo img,
#desktop .logo svg{
  height:100%;
  fill:var(--color-01);
}


@media (max-width:500px){
  #desktop header .time{
    padding:0;
  }
}