/* =========================================================
   スマホ専用メニュー（sp-menu.css / v14・v15で見た目を変更）
   ・899px 以下だけで表示。PCのヘッダー・ナビは変更しません。
   ・ヘッダーは既存の固定ナビ（高さ56px）をそのまま使用し、
     スマホでは右上の「読みもの」「活動を見る」をメニューにまとめます。
   ========================================================= */
.sp-menu-toggle, .sp-menu, .sp-menu-backdrop { display: none; }

@media (max-width: 899px) {
  nav .nav-cta { display: none; }

  /* ハンバーガー → × */
  .sp-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-menu-toggle:focus-visible { outline: 3px solid var(--c-aqua, #6cb8c4); outline-offset: 1px; }
  .sp-menu-bars { position: relative; width: 22px; height: 16px; }
  .sp-menu-bars span {
    position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
    background: var(--text-dark, #46382f);
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
  }
  .sp-menu-bars span:nth-child(1) { top: 0; }
  .sp-menu-bars span:nth-child(2) { top: 7px; }
  .sp-menu-bars span:nth-child(3) { top: 14px; }
  .sp-menu-toggle[aria-expanded="true"] .sp-menu-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .sp-menu-toggle[aria-expanded="true"] .sp-menu-bars span:nth-child(2) { opacity: 0; }
  .sp-menu-toggle[aria-expanded="true"] .sp-menu-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* メニュー本体：ヘッダーの下から上→下に展開 */
  .sp-menu {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    z-index: 99;                                  /* 固定ナビ(100)の下、常駐おこめー(90)・拡大表示(1000)との関係はそのまま */
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--t-ivory, #fbf7f0);
    border-bottom: 1px solid rgba(70,56,47,0.12);
    box-shadow: 0 12px 24px rgba(70,56,47,0.10);
    padding: 8px 24px 22px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .sp-menu[hidden] { display: none; }
  .sp-menu.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s; }

  .sp-menu-backdrop {
    display: block;
    position: fixed; inset: 56px 0 0 0;
    z-index: 98;
    background: rgba(46,36,28,0.28);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .sp-menu-backdrop[hidden] { display: none; }
  .sp-menu-backdrop.is-open { opacity: 1; }

  /* ── v15：メニュー項目（線画アイコン＋文字＋控えめな矢印） ── */
  .sp-menu {
    background: #fbf6ee;                          /* 温かみのあるアイボリー */
    padding: 6px 26px calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .sp-menu-list { list-style: none; }
  .sp-menu-list > li { border-bottom: 1px solid #ece2d3; }  /* 薄いベージュの区切り線 */
  .sp-menu-list > li > a {
    display: flex; align-items: center; gap: 16px;
    min-height: 58px; padding: 8px 2px;
    font-size: 0.98rem; font-weight: 700; letter-spacing: 0.06em;
    color: #46382f; text-decoration: none;
    -webkit-tap-highlight-color: rgba(223,129,120,0.12);
  }
  .sp-menu-list > li > a::after {
    content: '→'; margin-left: auto; padding-left: 8px;
    font-size: 0.9rem; font-weight: 500; color: #d98c83;   /* 控えめなコーラル */
  }
  .sp-menu-label { flex: 1 1 auto; min-width: 0; }
  .sp-ic {
    flex-shrink: 0; width: 26px; height: 26px;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .sp-ic .dot { stroke-width: 2.2; }
  .sp-ic--c { color: #d77f74; }                /* 落ち着いたコーラル */
  .sp-ic--m { color: #c99a3e; }                /* 落ち着いたマスタード */
  .sp-menu-list a:focus-visible { outline: 3px solid var(--c-aqua, #6cb8c4); outline-offset: 2px; border-radius: 8px; }

  /* 開催情報のカード */
  .sp-menu-info {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    margin-top: 22px; padding: 14px 52px 14px 16px;
    border-radius: 16px;
    background: #f8e6df;                          /* 淡いコーラルベージュ */
  }
  .sp-menu-info .sp-ic { width: 30px; height: 30px; }
  .sp-menu-info p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
  .sp-menu-info-when { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; color: #b5574c; }
  .sp-menu-info-detail { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: #5d4a3d; }
  .sp-menu-info::after {
    content: ''; position: absolute; right: 14px; bottom: 10px; width: 22px; height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 44' fill='none' stroke-linecap='round'%3E%3Cpath d='M15 42V18' stroke='%237db37d' stroke-width='1.3'/%3E%3Cpath d='M15 33c-4-.5-6.5-3-7-6.5 4 .3 6.5 3 7 6.5z' stroke='%237db37d' stroke-width='1.2' fill='%23e3efdc'/%3E%3Cg stroke='%23d9a23c' stroke-width='1.2' fill='%23f6dc9a'%3E%3Ccircle cx='15' cy='8' r='3'/%3E%3Ccircle cx='20' cy='12' r='3'/%3E%3Ccircle cx='18' cy='17.5' r='3'/%3E%3Ccircle cx='12' cy='17.5' r='3'/%3E%3Ccircle cx='10' cy='12' r='3'/%3E%3C/g%3E%3Ccircle cx='15' cy='13' r='2' fill='%23d9a23c'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* ひとことメッセージ（控えめに） */
  .sp-menu-msg {
    margin: 18px 0 0; padding: 12px 16px;
    border-radius: 40% 46% 42% 48% / 60% 55% 62% 50%;
    background: rgba(226, 239, 222, 0.7);
    font-size: 0.82rem; line-height: 1.85; letter-spacing: 0.04em; color: #5d4a3d;
    text-wrap: balance;
  }
  /* いちばん下の小さな家と草花の線画 */
  .sp-menu-deco {
    display: block; width: 110px; height: 64px; margin: 10px 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 64' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23b98a6a' stroke-width='1.4'%3E%3Cpath d='M30 30 52 12l22 18'/%3E%3Cpath d='M35 26v34h34V26'/%3E%3Cpath d='M47 60V47h10v13'/%3E%3Cpath d='M62 17v-6h5v10'/%3E%3Ccircle cx='42' cy='37' r='2.2'/%3E%3Ccircle cx='62' cy='37' r='2.2'/%3E%3C/g%3E%3Cpath d='M2 61c20-3 40 1 60 0s32-2 46-1' stroke='%2391b98f' stroke-width='1.3'/%3E%3Cpath d='M88 60V40' stroke='%237db37d' stroke-width='1.3'/%3E%3Cpath d='M88 50c-4-.5-6.5-3-7-6.5 4 .3 6.5 3 7 6.5z' stroke='%237db37d' stroke-width='1.2' fill='%23e3efdc'/%3E%3Cg stroke='%237db37d' stroke-width='1.2' fill='%23e3efdc'%3E%3Ccircle cx='88' cy='32' r='3'/%3E%3Ccircle cx='93' cy='36' r='3'/%3E%3Ccircle cx='83' cy='36' r='3'/%3E%3Ccircle cx='88' cy='39' r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* メニューを開いている間：常駐おこめーは隠す */
  .sp-menu-open .okm-dock, .sp-menu-open .okm-restore { opacity: 0 !important; pointer-events: none !important; }

  /* 移動先の見出しが固定ヘッダーに隠れないように */
  body.top-page section[id] { scroll-margin-top: 64px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sp-menu, .sp-menu.is-open, .sp-menu-backdrop, .sp-menu-bars span { transition: none; }
}
/* メニューから移動したセクションにフォーカスを移すが、枠線は出さない */
@media (max-width: 899px) { body.top-page section[tabindex="-1"]:focus { outline: none; } }