/* 全ページ共通。ヘッダーを残し、その直下にスマートフォン用メニューを表示する。 */
html:has(.hd--top-menu){scrollbar-gutter:stable}
.hd--top-menu .hd__menu-toggle{display:none}
.top-drawer{display:none}

@media(max-width:900px){
  .hd--top-menu .hd__in{gap:12px}
  .hd--top-menu .hd__cta{margin-left:auto}
  .hd--top-menu .hd__menu-toggle:not([hidden]){
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;min-width:48px;min-height:48px;padding:4px;color:#fff;flex-shrink:0;
    border:1px solid rgba(255,255,255,.35);border-radius:6px;line-height:1;
  }
  .hd--top-menu .hd__menu-label{font-size:10px;white-space:nowrap}
  .hd--top-menu .hd__menu-icon{position:relative;display:block;width:22px;height:16px}
  .hd--top-menu .hd__menu-icon span{position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .24s,opacity .24s}
  .hd--top-menu .hd__menu-icon span:nth-child(1){top:0}
  .hd--top-menu .hd__menu-icon span:nth-child(2){top:7px}
  .hd--top-menu .hd__menu-icon span:nth-child(3){top:14px}
  .hd--top-menu .hd__menu-toggle[aria-expanded="true"] .hd__menu-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd--top-menu .hd__menu-toggle[aria-expanded="true"] .hd__menu-icon span:nth-child(2){opacity:0}
  .hd--top-menu .hd__menu-toggle[aria-expanded="true"] .hd__menu-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .top-drawer{
    position:fixed;inset:var(--mobile-header-bottom,76px) 0 0;z-index:49;width:100%;
    height:calc(100vh - var(--mobile-header-bottom,76px));height:calc(100dvh - var(--mobile-header-bottom,76px));
    max-width:none;max-height:none;margin:0;padding:0;border:0;border-top:1px solid rgba(255,255,255,.16);
    background:var(--ink);color:#fff;overflow:hidden;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .top-drawer[open]{display:flex;flex-direction:column}
  .top-drawer[data-drawer-open="true"]{transform:translateX(0)}
  .top-drawer__body{
    display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:16px var(--gut) max(24px,env(safe-area-inset-bottom));
  }
  .top-drawer__nav{display:flex;flex-direction:column;flex-shrink:0}
  .top-drawer__nav a{display:flex;align-items:center;min-height:48px;padding:10px 12px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.16)}
  .top-drawer__nav a[aria-current]{background:rgba(21,168,173,.14);border-left:3px solid var(--teal);padding-left:9px}
  .top-drawer__nav a:hover{color:var(--teal)}
  .top-drawer__footer{margin-top:auto;padding-top:28px;text-align:center;flex-shrink:0}
  .top-drawer__banner{display:block;width:min(100%,240px);margin-inline:auto}
  .top-drawer__banner img{display:block;width:100%;height:auto}
  .top-drawer__credits{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.66);font-size:11px;line-height:1.8}
  .hd--top-menu .hd__menu-toggle:focus-visible,.top-drawer a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
}

@media(max-width:400px){
  .hd--top-menu .hd__in{gap:10px}
  .hd--top-menu .hd__cta .btn{font-size:12px;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .top-drawer,.hd--top-menu .hd__menu-icon span{transition:none}
}