/* ID8: ID0の構成を維持し、ナビゲーションアイコンだけを表示する。 */
html[data-site-design="8"] .site-nav a,
html[data-site-design="8"] .nav-dropdown-toggle,
html[data-site-design="8"] .site-nav .ghost-button {
  gap: 0.45rem;
}

html[data-site-design="8"] .nav-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

html[data-site-design="8"] .nav-dropdown-menu .nav-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ID9-12: 横画面用の左ナビゲーション基盤。 */
@media (min-width: 901px) {
  html[data-site-design="9"] .site-shell,
  html[data-site-design="10"] .site-shell,
  html[data-site-design="11"] .site-shell,
  html[data-site-design="12"] .site-shell {
    width: min(1440px, calc(100% - 32px));
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 60px);
    padding: 16px 0 56px;
  }

  html[data-site-design="9"] .site-header,
  html[data-site-design="10"] .site-header,
  html[data-site-design="11"] .site-header,
  html[data-site-design="12"] .site-header {
    position: sticky;
    top: 16px;
    min-height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding: 22px 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--md-surface-container-lowest) 92%, var(--md-surface-container));
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--shape-xl);
    box-shadow: var(--elevation-1);
    backdrop-filter: none;
  }

  html[data-site-design="9"] .brand,
  html[data-site-design="10"] .brand,
  html[data-site-design="11"] .brand,
  html[data-site-design="12"] .brand {
    width: 100%;
    padding: 4px 8px 14px;
    border-bottom: 1px solid var(--md-outline-variant);
  }

  html[data-site-design="9"] .site-nav,
  html[data-site-design="10"] .site-nav,
  html[data-site-design="11"] .site-nav,
  html[data-site-design="12"] .site-nav {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  html[data-site-design="9"] .site-nav form,
  html[data-site-design="10"] .site-nav form,
  html[data-site-design="11"] .site-nav form,
  html[data-site-design="9"] .nav-dropdown,
  html[data-site-design="10"] .nav-dropdown,
  html[data-site-design="11"] .nav-dropdown,
  html[data-site-design="12"] .site-nav form,
  html[data-site-design="12"] .nav-dropdown {
    width: 100%;
  }

  html[data-site-design="9"] .site-nav a,
  html[data-site-design="9"] .nav-dropdown-toggle,
  html[data-site-design="9"] .site-nav .ghost-button,
  html[data-site-design="10"] .site-nav a,
  html[data-site-design="10"] .nav-dropdown-toggle,
  html[data-site-design="10"] .site-nav .ghost-button,
  html[data-site-design="11"] .site-nav a,
  html[data-site-design="11"] .nav-dropdown-toggle,
  html[data-site-design="11"] .site-nav .ghost-button,
  html[data-site-design="12"] .site-nav a,
  html[data-site-design="12"] .nav-dropdown-toggle,
  html[data-site-design="12"] .site-nav .ghost-button {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--shape-md);
    background: transparent;
    color: var(--md-on-surface-variant);
    box-shadow: none;
    text-align: left;
  }

  html[data-site-design="9"] .site-nav a:hover,
  html[data-site-design="9"] .nav-dropdown-toggle:hover,
  html[data-site-design="9"] .site-nav .ghost-button:hover,
  html[data-site-design="10"] .site-nav a:hover,
  html[data-site-design="10"] .nav-dropdown-toggle:hover,
  html[data-site-design="10"] .site-nav .ghost-button:hover,
  html[data-site-design="12"] .site-nav a:hover,
  html[data-site-design="12"] .nav-dropdown-toggle:hover,
  html[data-site-design="12"] .site-nav .ghost-button:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
  }

  html[data-site-design="11"] .site-nav a:hover,
  html[data-site-design="11"] .nav-dropdown-toggle:hover,
  html[data-site-design="11"] .site-nav .ghost-button:hover {
    background: color-mix(in srgb, var(--md-primary) 9%, transparent);
    color: var(--md-on-surface);
  }

  html[data-site-design="9"] .nav-dropdown-menu,
  html[data-site-design="10"] .nav-dropdown-menu,
  html[data-site-design="11"] .nav-dropdown-menu,
  html[data-site-design="12"] .nav-dropdown-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin: 4px 0 6px;
    padding: 4px 0 4px 12px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--md-outline-variant);
    border-radius: 0;
    box-shadow: none;
  }

  html[data-site-design="9"] .nav-dropdown-menu a,
  html[data-site-design="10"] .nav-dropdown-menu a,
  html[data-site-design="11"] .nav-dropdown-menu a,
  html[data-site-design="12"] .nav-dropdown-menu a {
    min-height: 38px;
    padding: 8px 10px;
  }

  html[data-site-design="9"] .page-shell,
  html[data-site-design="10"] .page-shell,
  html[data-site-design="11"] .page-shell,
  html[data-site-design="12"] .page-shell {
    min-width: 0;
    padding-top: 20px;
  }

  /* ID10: 左ナビにFont Awesomeアイコンを加える。 */
  html[data-site-design="10"] .site-nav a,
  html[data-site-design="10"] .nav-dropdown-toggle,
  html[data-site-design="10"] .site-nav .ghost-button {
    gap: 0.65rem;
  }

  html[data-site-design="10"] .nav-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--md-on-surface-variant);
  }

  html[data-site-design="10"] .site-nav a:hover .nav-icon,
  html[data-site-design="10"] .nav-dropdown-toggle:hover .nav-icon,
  html[data-site-design="10"] .site-nav .ghost-button:hover .nav-icon {
    color: var(--md-on-surface);
  }

  html[data-site-design="10"] .nav-dropdown-menu .nav-icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* ID11: ID9を少し細くし、情報密度と余白の均衡を変える。 */
  html[data-site-design="11"] .site-shell {
    grid-template-columns: 184px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }

  html[data-site-design="11"] .site-header {
    gap: 20px;
    padding: 20px 10px;
    background: var(--md-surface-container-low);
    border-color: transparent;
    border-radius: var(--shape-lg);
    box-shadow: none;
  }

  html[data-site-design="11"] .brand {
    padding: 4px 8px 12px;
  }

  html[data-site-design="11"] .brand-mark {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }

  html[data-site-design="11"] .site-nav a,
  html[data-site-design="11"] .nav-dropdown-toggle,
  html[data-site-design="11"] .site-nav .ghost-button {
    min-height: 38px;
    padding: 7px 9px;
    border-left: 3px solid transparent;
    border-radius: var(--shape-sm);
    font-size: 0.8125rem;
  }

  html[data-site-design="11"] .site-nav a:hover,
  html[data-site-design="11"] .nav-dropdown-toggle:hover,
  html[data-site-design="11"] .site-nav .ghost-button:hover {
    border-left-color: var(--md-primary);
    background: var(--md-surface-container-high);
  }
}

html[data-site-design="9"] .nav-settings-dropdown .nav-dropdown-form,
html[data-site-design="10"] .nav-settings-dropdown .nav-dropdown-form,
html[data-site-design="12"] .nav-settings-dropdown .nav-dropdown-form {
  margin: 0;
}

html[data-site-design="9"] .nav-settings-dropdown .nav-dropdown-form .ghost-button,
html[data-site-design="10"] .nav-settings-dropdown .nav-dropdown-form .ghost-button,
html[data-site-design="12"] .nav-settings-dropdown .nav-dropdown-form .ghost-button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  box-shadow: none;
  color: var(--md-on-surface);
  font-size: 0.8125rem;
}

@media (min-width: 901px) {
  html[data-site-design="9"] .nav-settings-dropdown .nav-dropdown-form .ghost-button,
  html[data-site-design="10"] .nav-settings-dropdown .nav-dropdown-form .ghost-button,
  html[data-site-design="12"] .nav-settings-dropdown .nav-dropdown-form .ghost-button {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 9px;
  }
}

/* ID10はスマートフォンでもID8と同じアイコン付き上部メニューにする。 */
@media (max-width: 900px) {
  html[data-site-design="10"] .site-nav a,
  html[data-site-design="10"] .nav-dropdown-toggle,
  html[data-site-design="10"] .site-nav .ghost-button {
    gap: 0.45rem;
  }

  html[data-site-design="10"] .nav-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
  }
}