body { margin: 0; padding: 0px; width: 100%; overflow-x: hidden; font-family: Arial, Helvetica, sans-serif; }
.darken  { background-color: #171615; }
.nightly { background-color: #471060; }
label { font-size: 20px; color: #333333; }
.darken label, .nightly label { color: #F7F7F7; }
select, button { padding: 0.3em 0.8em; font-size: 15px; }
main { position: relative; display: block; margin: 0 auto; width: calc(100% - 2em); }
h3 { margin: 0.25em 0; }
.mr-h { margin-right: 0.5em; }
.d-flex-col { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-content: center; align-items: start; }
.text-caption { margin-bottom: 2px; font-size: smaller; color: #717477; }
.no-label { margin-top: 16px; }
.occupy-advance { position: relative; height: 100%; width: 100%; }
.occupy-advance::before {
    position: absolute;
    content: 'ただいま表示中です。しばらくお待ちください。';
    font-size: large;
    font-weight: 600;
    color: #CCC;
    margin-top: 100px;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.jqtl-side-index-item > * { padding-left: 1em !important; padding-right: 1em !important; }
.jqtl-event-node {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px dotted #777777;
    overflow: hidden !important;
}

.jqtl-event-node .jqtl-event-label,
.jqtl-event-node > * {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#controller { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; font-size: 15px; }
footer { margin: 32px 0 8px; text-align: center; }
footer > * { font-size: 86%; font-family: 'Lucida Console', Monaco, monospace; letter-spacing: -0.5px; color: #717477; }
footer a, footer a:hover, footer a:active, footer a:visited { text-decoration: none; }
.dismiss-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='%23666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>"); background-repeat: no-repeat; background-size: contain; position: absolute; cursor: pointer; width: 50px; height: 50px; }
/*.tippy-box[data-theme~='tooltip1'] { background-color: tomato; color: yellow; }*/

#main-header {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

#main-header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#sub-header {
    display: flex;
    flex-direction: column;
}

#sub-header label {
    font-size: 20px;
    font-weight: bold;
}

#sub-header #now {
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0px 0px auto;
}

#sub-header #controller-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#sub-header #controller-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

#sub-header #controller button {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    font-size: 18px;
    margin-left: 3px;
    margin-bottom: 2px;
    font-weight: bold;
    cursor: pointer;
}

#sub-header #controller-left #add-reserve{
    left: 0px;
    margin-left: 0px;
}

#sub-header #controller-left #calendar-view {
    padding: 2px 5px 3px;
}

#sub-header #controller-right #date-input-yesterday {
    margin-right: 5px;
}

#sub-header #controller-right label {
    margin-bottom: 4px;
}

#sub-header #controller-right #date-input {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    color: initial;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 2px;
}

#sub-header #controller-right #date-input-tomorrow {
    margin-right: 0px;
}

#title{
    font-size: 20px;
    font-weight: bold;
}

/* Hamburger menu */
#hamburger {
    display: inline-block;
    vertical-align: middle;
    /* width: 40px; */
    /* height: 40px; */
    /* margin-right: 8px; */
    /* margin-left: 8px; */
    padding: 5px 6px 0px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
#hamburger .hamburger-box{display:inline-block;position:relative;width:24px;height:24px}
#hamburger .hamburger-inner, #hamburger .hamburger-inner::before, #hamburger .hamburger-inner::after{display:block;position:absolute;width:24px;height:2px;background:#333;border-radius:2px;transition:transform .25s ease,opacity .2s ease,top .25s ease}
#hamburger .hamburger-inner{top:11px}
#hamburger .hamburger-inner::before{content:'';top:-8px}
#hamburger .hamburger-inner::after{content:'';top:8px}
#hamburger.open .hamburger-inner{transform:rotate(45deg)}
#hamburger.open .hamburger-inner::before{top:0;transform:rotate(90deg)}
#hamburger.open .hamburger-inner::after{opacity:0}

/* Nav drawer */
.nav-drawer {
  position: fixed;
  right: 8px;          /* ← left を right に変更 */
  top: 56px;
  z-index: 60;
  width: 220px;
  max-width: 70vw;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 8px;

  transform: translateX(110%);   /* ← 右側に隠す */
  transition: transform .25s ease;
}

.nav-drawer.open {
  transform: translateX(0);      /* ← 表示 */
}

.nav-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-drawer li {
  margin: 0;
  padding: 0;
}

.nav-drawer a {
  display: block;
  padding: 10px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.nav-drawer a:hover {
  background: #f0f0f0;
}


.ui-visual-focus { box-shadow: 0 0 0px 0px rgb(0, 0, 0) !important; }