/* ============================================================
   HARE — Mobile / responsive + hamburger menu
============================================================ */

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: #fff;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.mobile-menu__list { padding: 8px var(--pad) 24px; }
.mobile-menu__item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.mobile-menu__item .mm-ico { color: var(--blue); flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.mobile-menu__item .mm-ico img { width: 28px; height: 28px; object-fit: contain; }
.mobile-menu__item .mm-caret { margin-left: auto; color: var(--muted); }
.mobile-menu__item:active { background: var(--sky-2); }

.scroll-lock { overflow: hidden; }

/* Mobile menu footer (social + copyright + legal) */
.mobile-menu__foot {
  padding: 26px var(--pad) calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
}
.mobile-menu__social { display: flex; align-items: center; gap: 14px; }
.mobile-menu__copy { color: var(--muted); font-size: 12px; }
.mobile-menu__legal { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.mobile-menu__legal a { color: var(--ink-soft); }
.mobile-menu__legal span { color: var(--border); }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 24px 22px; }
  .themes { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
  .bottom { grid-template-columns: 1fr; }
  .about-card { min-height: 240px; }
  .about-card p { max-width: 64%; }
  .popular { grid-template-columns: 1fr; gap: 26px; }
  .popular__art { display: none; }
  .header__tagline { display: none; }
  .hero__bg { width: 58%; }
  .hero__copy { max-width: 52%; }

  /* ヘッダー（タブレット）：ナビの密度を下げて折返し・はみ出しを防止 */
  .header__inner { gap: 16px; }
  .logo__img { height: 38px; }
  .nav { gap: clamp(12px, 2.2vw, 26px); }
  .nav__item { font-size: 13.5px; }

  /* フッター（タブレット）：折返し時の間隔を整える */
  .footer__top { gap: 22px 28px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  :root { --pad: 18px; }
  .nav, .header .icon-btn.search { display: none; }
  .hamburger { display: grid; margin-left: auto; }

  .header__inner { height: 60px; gap: 12px; }
  .logo__img { height: 34px; }

  .hero { display: block; position: relative; background: #fff; aspect-ratio: 3136 / 5364; }
  .hero__bg {
    position: absolute; inset: 0; width: auto; height: auto;
    background: url("../img/hero-mv-sp-1000.webp") top center / 100% auto no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__inner {
    position: absolute; inset: 0; z-index: 2;
    display: block; min-height: 0;
    padding-top: 76px; padding-bottom: 0;
  }
  .hero__copy { max-width: 62%; }
  .hero__title { font-size: 30px; line-height: 1.34; }
  .hero__title .ln { white-space: normal; }
  .hero__lead { margin-top: 18px; font-size: 12.5px; line-height: 1.8; }
  .br-sp { display: inline; }
  .hero__cta { margin-top: 30px; }
  .hero__cta .btn { width: auto; padding: 15px 26px; font-size: 13.5px; gap: 10px; white-space: nowrap; }

  .sec-head { margin-bottom: 20px; }
  .cards { grid-template-columns: 1fr; gap: 22px; }
  /* New-article cards become horizontal rows on mobile (matches SP comp) */
  .card--row { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: start; }
  .card--row .card__media { aspect-ratio: 1/1; }
  .card--row .card__body { padding-top: 2px; }
  .card--row .card__meta { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .card--row .card__title { font-size: 15px; }
  .card--row .card__excerpt { display: none; }

  .popular { padding: 24px 18px; }
  .rank__item {
    display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 10px; align-items: center; padding: 16px 0;
  }
  .rank__meta { display: flex; align-items: center; gap: 10px; grid-column: 2; grid-row: 1; }
  .rank__num { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; font-size: 24px; }
  .rank__thumb { grid-column: 1; grid-row: 2; width: 84px; height: 63px; align-self: center; }
  .rank__ttl { grid-column: 2; grid-row: 2; align-self: center; font-size: 14px; }

  .themes { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .theme__icon { width: 70px; height: 70px; }

  .about-card { padding: 30px 26px 0; min-height: 320px; }
  .about-card p { max-width: 100%; }
  .about-card .btn { margin-bottom: 55px; }

  .footer__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__nav { flex-direction: column; gap: 16px; }
  .footer__social { margin-left: 0; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}