/* ==========================================================================
   NARAMILE プレビュー — レスポンシブ調整レイヤー

   - デスクトップ（>1024px）の表示は一切変更しない
   - タブレット/モバイルでのみ、コンポーネントのインライン style を上書きする
   - React のインライン style を上回るため !important を使用している
   ========================================================================== */

/* ========== ヒーローカルーセル — スライド切替時のフェードイン ========== */
@keyframes nmHeroFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nm-hero-slide { animation: nmHeroFade 0.9s ease both; }

/* ヒーロー画像 — 全画像を同期させて常にゆっくりズーム（Ken Burns）。
   非アクティブ画像もアニメーションを継続させることで、フェードアウト時に
   transform が scale(1) へ巻き戻って「縮んで見える」現象を防ぐ。 */
@keyframes nmHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.nm-hero-img { animation: nmHeroZoom 22s ease-out both; }

/* ========== グローバルヘッダー — スクロール追従＋背景フェードイン ========== */
.nm-header {
  background: transparent;
  transition: background 0.32s ease, backdrop-filter 0.32s ease, -webkit-backdrop-filter 0.32s ease;
}
.nm-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.nm-header.is-scrolled.is-light {
  background: rgba(26, 26, 26, 0.8);
}

/* ========== タブレット以下（≤1024px） ========== */
@media (max-width: 1024px) {

  /* 複数カラムのグリッドをすべて1カラムに集約する */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* セクションの左右余白を圧縮する */
  section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* 主要見出しを画面幅に追従させる（デスクトップ固有サイズはここでのみ縮小） */
  h1 { font-size: clamp(34px, 6.2vw, 88px) !important; line-height: 1.3 !important; }
  h2 { font-size: clamp(27px, 4.6vw, 56px) !important; }
  h3 { font-size: clamp(21px, 3.4vw, 52px) !important; }

  /* 抹茶体験ブロックの縦書き装飾は重なるため非表示にする */
  .nm-feature .vertical-jp { display: none !important; }
}

/* ========== モバイル（≤768px） ========== */
@media (max-width: 768px) {

  /* セクション/フッターの余白をさらに圧縮する */
  section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer {
    padding-top: 72px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ヘッダーを内包するセクションは上余白0に（ヘッダーが通常フローへ入るため） */
  section:has(header) { padding-top: 0 !important; }

  /* ヘッダー — 絶対配置を解除して通常フローへ、ナビは折り返し可にする */
  header {
    position: static !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 16px 20px !important;
  }
  header nav {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* 1カラム化したグリッドの行間隔をモバイル向けに調整する */
  [style*="grid-template-columns"] { gap: 24px !important; }

  /* 抹茶体験フィーチャーブロックの内側余白を圧縮する */
  .nm-feature { padding: 48px 24px !important; }

  /* 記事内の引用ブロック — 負のマージンによる画面外はみ出しを解消する */
  blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ニュースレター登録フォームを折り返し可にする */
  footer form { flex-wrap: wrap !important; }

  /* 横スクロール帯の左右余白を調整する */
  .h-scroll {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ========== モバイル用ハンバーガーメニュー ========== */
/* ハンバーガーボタンはデスクトップでは非表示、モバイルで右上に固定 */
.nm-hamburger { display: none; }

/* メニューオーバーレイ — 開いた時のスタイル（JSXがmenuOpen時のみ描画する） */
.nm-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26, 26, 26, 0.96);
  color: #f4efe6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 24px;
}
.nm-menu-close {
  position: absolute; top: 14px; right: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent; color: #f4efe6;
  border: 1px solid rgba(244, 239, 230, 0.45);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.nm-menu-nav {
  display: flex; flex-direction: column; gap: 26px;
  align-items: center; text-align: center;
}
.nm-menu-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: #f4efe6;
}
.nm-menu-nav a span:first-child {
  font-family: var(--f-sans-en); font-size: 26px; letter-spacing: 0.02em;
}
.nm-menu-nav a span:last-child {
  font-family: var(--f-sans-en); font-size: 11px; letter-spacing: 0.18em;
  color: rgba(244, 239, 230, 0.6);
}

@media (max-width: 768px) {
  /* デスクトップ用のインラインナビを隠し、ハンバーガーを右上に表示 */
  .nm-nav { display: none !important; }
  .nm-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center; align-items: center; gap: 5px;
    position: fixed; top: 14px; right: 14px; z-index: 950;
    width: 46px; height: 46px;
    border-radius: 50%; border: none; padding: 0;
    background: #1a1a1a; color: #ffffff; cursor: pointer;
  }
  .nm-hamburger span {
    display: block; width: 18px; height: 1.5px;
    background: #ffffff; border-radius: 1px;
  }
}