/*
 * グローバルナビ「年代別おすすめ」ドロップダウン。
 * テーマ style.css の後に読み込む上書きシート（a11y-overrides.css と同方針・追加のみ）。
 *  - PC(≥1111px): hover / focus-within で開く絶対配置ドロップダウン。
 *  - SP(≤1110px): 縦スクロールパネル内に子を常時インデント表示（トグル無し・JS不要）。
 * テーマCSS・HTMLブロブは一切改変しない。
 */

/* 共通リセット（テーマの ul 装飾に依存しない） */
.subnav {
  list-style: none;
  margin: 0;
}

/* ===== デスクトップ：hover / focus で開くドロップダウン ===== */
@media screen and (min-width: 1111px) {
  .has-children {
    position: relative;
  }
  /* 親ラベル(<span>)はテーマの `nav > ul > li > span` 装飾を継承。
     ▼は日本語ラベル(1段目)の右横にインライン表示し、他の2段項目と縦位置を揃える
     （3段目に置くと親項目だけ上にズレるため）。 */
  .nav-parent > span:first-child::after {
    content: "▼";
    margin-left: 5px;
    font-size: 9px;
    line-height: 1;
    color: #e1a1a1;
    vertical-align: middle;
  }
  .subnav {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 13em;
    padding: 0.5rem 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
    z-index: 10001;
  }
  .has-children:hover .subnav,
  .has-children:focus-within .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .subnav > li {
    width: 100%;
    height: auto;
  }
  .subnav > li > a {
    display: block;
    padding: 0.65rem 1.5rem;
    white-space: nowrap;
    text-align: center;
    font-size: 15px;
    color: #333;
    transition: background-color 0.2s ease;
  }
  .subnav > li > a:hover,
  .subnav > li > a:focus-visible {
    background-color: #faf2f2;
  }
}

/* ===== モバイル：縦パネル内に子を常時インデント表示 ===== */
@media screen and (max-width: 1110px) {
  /* 親ラベル(<span>)はテーマが <a> 前提で装飾しないため、ここでメニュー行として整える */
  .nav-parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0;
  }
  /* 入れ子 ul はテーマ `nav ul` の外周パディング(2rem/3rem)を継承するため打ち消す。
     テーマと同等以上の詳細度で確実に上書きする。 */
  body > header .fixed-header .inner .navi-area nav ul.subnav {
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 0;
    background-color: #faf5f5;
    border-radius: 8px;
  }
  /* 子リンクは階層が分かるよう少し小さめに。テーマの `nav ul li a` を上書き。 */
  body > header .fixed-header .inner .navi-area nav ul.subnav li a {
    font-size: 0.95em;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}