/* Kansai shared navigation shell v41.21
   Canonical visual geometry for ALL operational pages and subpages.
   Home / Schedule / Rental / Inventory / GIKEN / Search are the visual reference.
   This file intentionally uses specific selectors so old page-local CSS cannot drift. */

html body .board > .topbar,
html body .board > .topbar *,
html body .board > .menu-bar,
html body .board > .menu-bar *{
  box-sizing:border-box!important;
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif!important;
}

html body .board > .topbar{
  height:130px!important;
  min-height:130px!important;
  flex:0 0 130px!important;
  display:grid!important;
  align-items:center!important;
  gap:18px!important;
  padding:12px 22px!important;
  border-bottom:1px solid var(--line,#3b424a)!important;
  background:var(--panel2,#1c2025)!important;
}
html body .board > .topbar > *{min-width:0!important}

html body .board > .topbar .weather-summary{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
html body .board > .topbar .weather-icon{
  font-size:44px!important;
  line-height:1!important;
}
html body .board > .topbar .weather-place{
  font-size:13px!important;
  line-height:1.2!important;
  color:var(--muted,#aeb5bd)!important;
  font-weight:700!important;
}
html body .board > .topbar .weather-main-line{
  display:flex!important;
  align-items:baseline!important;
  gap:9px!important;
  white-space:nowrap!important;
}
html body .board > .topbar .weather-condition{
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
html body .board > .topbar .weather-temp{
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
html body .board > .topbar .weather-details{
  margin-top:4px!important;
  color:var(--muted,#aeb5bd)!important;
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

html body .board > .topbar .hourly-weather{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
  min-width:0!important;
  overflow:hidden!important;
}
html body .board > .topbar .hour-card{
  height:82px!important;
  min-height:82px!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:6px 4px!important;
  border:1px solid var(--line,#3b424a)!important;
  border-radius:7px!important;
  background:#22272d!important;
}
html body .board > .topbar .hour-time{
  font-size:11px!important;
  line-height:1.1!important;
  color:var(--muted,#aeb5bd)!important;
}
html body .board > .topbar .hour-icon{
  font-size:20px!important;
  line-height:1.3!important;
  margin:2px 0!important;
}
html body .board > .topbar .hour-temp{
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
html body .board > .topbar .hour-rain{
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.1!important;
  color:#bfcfe0!important;
}
html body .board > .topbar .clock-time{
  font-size:30px!important;
  line-height:1!important;
  font-weight:800!important;
}
html body .board > .topbar .clock-date{
  margin-top:7px!important;
  color:var(--muted,#aeb5bd)!important;
  font-size:13px!important;
  line-height:1.2!important;
}

html body .board > .menu-bar{
  height:58px!important;
  min-height:58px!important;
  flex:0 0 58px!important;
  display:grid!important;
  grid-template-columns:repeat(9,minmax(0,1fr))!important;
  gap:0!important;
  border-bottom:1px solid var(--line,#3b424a)!important;
  background:#20242a!important;
}
html body .board > .menu-bar .menu-btn{
  min-width:0!important;
  border:0!important;
  border-right:1px solid var(--line,#3b424a)!important;
  background:#20242a!important;
  color:var(--text,#f3f5f7)!important;
  font-size:15px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
html body .board > .menu-bar .menu-btn:last-child{border-right:0!important}
html body .board > .menu-bar .menu-btn:hover{background:#2b3037!important}
html body .board > .menu-bar .menu-btn.active{
  background:#343a42!important;
  box-shadow:inset 0 -3px 0 #aeb5bd!important;
}

@media(min-width:1101px){
  html body .board > .topbar{
    grid-template-columns:minmax(250px,280px) minmax(420px,1fr) minmax(250px,280px)!important;
  }
}

@media(min-width:701px) and (max-width:1100px){
  html body .board > .topbar{
    grid-template-columns:180px minmax(300px,1fr) 230px!important;
    gap:8px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html body .board > .topbar .hourly-weather{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:5px!important;
  }
  html body .board > .topbar .hour-card{display:flex!important}
}

@media(min-width:701px) and (max-width:780px){
  html body .board > .topbar{
    grid-template-columns:170px minmax(220px,1fr) 210px!important;
  }
  html body .board > .topbar .hourly-weather{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  html body .board > .topbar .hourly-weather .hour-card:nth-child(n+5){display:none!important}
}

@media(max-width:700px){
  html body .board > .topbar{
    height:56px!important;
    min-height:56px!important;
    flex:0 0 56px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px auto!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 10px!important;
    position:sticky!important;
    top:0!important;
    z-index:10020!important;
    align-self:stretch!important;
  }
  html body .board > .topbar > .weather-summary,
  html body .board > .topbar > .hourly-weather,
  html body .board > .topbar .clock-time,
  html body .board > .topbar .clock-date{display:none!important}
  html body .board > .menu-bar{
    height:54px!important;
    min-height:54px!important;
    flex:0 0 54px!important;
    display:flex!important;
    overflow-x:auto!important;
    position:sticky!important;
    top:56px!important;
    z-index:10010!important;
    align-self:stretch!important;
  }
  html body .board > .menu-bar .menu-btn{
    min-width:110px!important;
    flex:0 0 110px!important;
    font-size:15px!important;
  }
}