/* ===============================
   龍光院 モバイルドロワー（独自）
   =============================== */

:root{
  --ryu-bg:#fff;               /* パネル背景 */
  --ryu-text:#2b2b2b;          /* 文字色 */
  --ryu-border:#eee;           /* 罫線 */
  --ryu-accent:#9c6222;        /* 山吹茶の差し色 */
  --ryu-mask:rgba(0,0,0,.35);  /* 背面マスク */
}


/* ─────────────────────────────────────────
   ハンバーガーボタン（基礎）
   ───────────────────────────────────────── */
.ryu-nav-toggle{
  /* PCでは非表示にするので基礎は最小だけ */
  background:transparent; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:10001;
}
.ryu-nav-bar{
  display:block; width:22px; height:2px; background:var(--ryu-text);
}
.ryu-nav-bar + .ryu-nav-bar{ margin-top:5px; }
.ryu-nav-text{ font-size:.75rem; color:var(--ryu-text); }

/* × 変形 */
.ryu-nav-toggle.is-open .ryu-nav-bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.ryu-nav-toggle.is-open .ryu-nav-bar:nth-child(2){ opacity:0; }
.ryu-nav-toggle.is-open .ryu-nav-bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }


/* ─────────────────────────────────────────
   ドロワー全体
   ───────────────────────────────────────── */
.ryu-drawer{ position:fixed; inset:0; z-index:10000; pointer-events:none; }
.ryu-drawer[aria-hidden="true"]{ visibility:hidden; }
.ryu-drawer[aria-hidden="false"]{ visibility:visible; pointer-events:auto; }

/* 背景マスク */
.ryu-drawer-backdrop{
  position:absolute; inset:0; background:var(--ryu-mask);
  opacity:0; transition:opacity .25s ease;
}

/* パネル本体（右スライド） */
.ryu-drawer-panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(84vw, 420px);
  background:var(--ryu-bg); color:var(--ryu-text);
  padding:max(16px, env(safe-area-inset-top)) 20px 24px;
  box-shadow:-4px 0 20px rgba(0,0,0,.2);
  translate:100% 0; transition:translate .3s ease;
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.ryu-drawer[aria-hidden="false"] .ryu-drawer-backdrop{ opacity:1; }
.ryu-drawer[aria-hidden="false"] .ryu-drawer-panel{ translate:0 0; }

/* 閉じるボタン */
.ryu-drawer-close{
  position:absolute; top:max(8px, env(safe-area-inset-top)); right:16px;
  padding:6px; border:0; background:transparent;
  font-size:1.6rem; line-height:1; cursor:pointer;
}


/* ─────────────────────────────────────────
   ブランド（寺院名/ロゴ）
   - テキストでも画像でもOK
   ───────────────────────────────────────── */
.ryu-drawer-brand{
  display:block; margin:8px auto 16px; text-align:center;
  font-size:1.05rem; font-weight:600; color:var(--ryu-accent);
  text-decoration:none;
}
.ryu-drawer-brand img.ryu-drawer-logo{
  max-width:160px; height:auto; display:inline-block;
}


/* ─────────────────────────────────────────
   メニュー
   ───────────────────────────────────────── */
.ryu-drawer-menu{ list-style:none; margin:8px 0 0; padding:0; }
.ryu-drawer-menu > li{ border-bottom:1px solid var(--ryu-border); }
.ryu-drawer-menu a{
  display:block; padding:14px 6px; text-decoration:none;
  color:var(--ryu-text); font-size:1.05rem;
}

/* サブメニュー（第2階層） */
.ryu-sub-toggle{
  margin-left:auto; border:0; background:transparent;
  font-size:1rem; cursor:pointer;
}
.ryu-submenu{
  list-style:none; padding:0 0 8px 14px; margin:0;
  border-left:2px solid var(--ryu-border);
}
.ryu-submenu li a{ padding:10px 4px; font-size:.98rem; }


/* ─────────────────────────────────────────
   フッター導線（電話・地図）
   ───────────────────────────────────────── */
.ryu-drawer-footer{ padding:16px 6px 12px; }
.ryu-drawer-note{ margin:8px 0 6px; font-size:.9rem; color:#666; }
.ryu-drawer-phone,
.ryu-drawer-map{
  display:inline-block; padding:8px 10px; margin-right:8px;
  border:1px solid var(--ryu-accent); color:var(--ryu-accent);
  text-decoration:none; border-radius:6px; font-size:.95rem;
}


/* ─────────────────────────────────────────
   汎用
   ───────────────────────────────────────── */
.body-lock{ overflow:hidden; touch-action:none; }  /* 画面スクロール抑止 */

@media (prefers-reduced-motion: reduce){
  .ryu-drawer-backdrop, .ryu-drawer-panel{ transition:none !important; }
}

/* Cocoon標準ハンバーガーを隠す（競合回避） */
@media (max-width:1024px){
  .menu-button, .navi-open-button, .drawer-menu-button{ display:none !important; }
}


/* ─────────────────────────────────────────
   レスポンシブ調整
   ───────────────────────────────────────── */

/* PCでは独自ドロワーUIを非表示 */
@media (min-width:1025px){
  .ryu-nav-toggle{ display:none !important; }
  #siteDrawer{ display:none !important; }
}

/* モバイル時のハンバーガー配置＆縦3本固定 */
@media (max-width:1024px){
  .ryu-nav-toggle{
    position:fixed; top:12px; right:12px;
    width:42px; height:42px; padding:0;
    display:flex !important;             /* ← 横並び防止 */
    flex-direction:column !important;     /* ← 縦に積む */
    justify-content:center; align-items:center;
    background:rgba(255,255,255,.9);
    border-radius:10px;
    box-shadow:0 1px 6px rgba(0,0,0,.08);
    z-index:100000; line-height:1;
  }
  .ryu-nav-toggle .ryu-nav-bar{
    display:block !important;
    width:24px !important; height:2.5px !important;
    background:var(--ryu-text) !important; border-radius:1px !important;
    margin:0 auto;
  }
  .ryu-nav-toggle .ryu-nav-bar + .ryu-nav-bar{ margin-top:6px !important; }
  .ryu-nav-text{ display:none !important; } /* “メニュー”文字は隠す */
}

/* メニューを開いている間は、ハンバーガーを隠して重なりを防ぐ */
.ryu-nav-toggle.is-open{
  opacity: 0;
  pointer-events: none; /* クリックも無効化 */
}

/* 念のため、閉じるボタンを前面に */
.ryu-drawer-close{
  z-index: 1001;
}


/* ─────────────────────────────────────────
   ドロワー下部に背景画像＋上から白グラデーション
   - 画像は必ず背面（z-index:-1）へ
   ───────────────────────────────────────── */

/* 1) 親：相対配置＋基準層（z-index:0）を作る */
.ryu-drawer-panel{
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto !important;   /* ← 左寄せを無効化 */
  right: 0 !important;     /* ← 右端基準に固定 */
  height: 100%;
  width: min(84vw, 420px);
  background: var(--ryu-bg);
  color: var(--ryu-text);
  padding: max(16px, env(safe-area-inset-top)) 20px 24px;
  box-shadow: -4px 0 20px rgba(0,0,0,.2);
  transform: translateX(100%);           /* ← 右の外に隠す */
  -webkit-transform: translateX(100%);
  transition: transform .3s ease, -webkit-transform .3s ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
}

/* 開いたときは右から0位置に */
.ryu-drawer[aria-hidden="false"] .ryu-drawer-panel{
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

/* 2) 子：背景画像（下寄せ）＋白グラデ（上から）を“背面”に敷く */
.ryu-drawer-panel::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42vh;                         /* 画像の見せ量（30〜50vhで調整可） */
  pointer-events: none;                  /* クリックを邪魔しない */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,0.92) 20%,
      rgba(255,255,255,0.6) 50%,
      rgba(255,255,255,0.0) 100% ),
    url("http://www.iwaisan-ryukouin.jp/wp-content/uploads/2025/07/d191e44cf2a87f37b37af4ab014e5fd8-e1753937198950.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top, center bottom; /* グラデ：上から／画像：下寄せ */
  background-size: 100% 100%, cover;       /* グラデは領域いっぱい／画像はカバー */
  z-index: -1;                              /* ← ここが重要：常に背面 */
}

/* 3) iPhoneのホームバー領域に配慮して少し余白を足す（任意） */
@supports (padding: env(safe-area-inset-bottom)){
  .ryu-drawer-panel{ padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* 4) 文字が読みにくい時は、下端にうっすら白ベールを追加（必要な場合だけON）
.ryu-drawer-panel::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:80px;
  background: linear-gradient(to top, rgba(255,255,255,.85), transparent);
  pointer-events:none; z-index: 1;
}
*/