body{margin:0;font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif;background:#fafafa;color:#222}
.wrap{max-width:1100px;margin:auto;padding:16px}
h1{font-size:clamp(18px,4vw,28px);margin:0 0 8px}

/* 置き換え：ヘッダー画像（panelの内幅に揃える） */
.hero{ margin:0 0 16px }         /* 枠・背景・padding等はpanelのスタイルを使用 */
.hero img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;             /* 画像の角を少し丸め（任意） */
}


/* 既存のセクション/地図/フォーム用は以前の追記のままでOK */


/* Myマップ埋め込み */
.map{position:relative;padding-top:62%;border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* リストUI */
.controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
input[type="search"]{flex:1;min-width:220px;padding:10px;border-radius:10px;border:1px solid #ddd;background:#fff}
select{padding:10px;border-radius:10px;border:1px solid #ddd;background:#fff}
.list{display:grid;gap:10px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px}
.name{font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.tag{font-size:12px;background:#eef;color:#124;padding:4px 8px;border-radius:999px}
.row{color:#555;font-size:14px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn{background:#f5f5f5;border:1px solid #e5e5e5;border-radius:10px;padding:8px 10px;color:#111;text-decoration:none}
.muted{color:#666;font-size:13px}
.error{background:#fee;border:1px solid #fbb;border-radius:12px;padding:10px;color:#900;margin:10px 0}

/* セクション枠 */
.panel{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; margin:0 0 16px }

/* タイトル下のCTA */
.top-cta{ margin:8px 0 16px }
.btn-yellow{ background:#ffd400; border:1px solid #e6b800; color:#111 }
.btn-yellow:hover{ filter:brightness(0.95) }
.btn-yellow:focus{ outline:2px solid #1113; outline-offset:2px }

/* 地図埋め込み */
.map{ position:relative; padding-top:62%; overflow:hidden; border-radius:8px }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* フォーム埋め込み：高さを十分に確保（端末幅で可変） */
.formbox iframe{
  width:100%;
  border:0;
  display:block;
  height:2400px;            /* デスクトップ基準の高さ */
}

/* タブレットでは行折返しが増えるので少し高めに */
@media (max-width: 1024px){
  .formbox iframe{ height:2800px; }
}

/* スマホはさらに高め（必要なら調整してください） */
@media (max-width: 640px){
  .formbox iframe{ height:6400px; }
}

/* スムーススクロール＆アンカー位置の上マージン（固定ヘッダー対策） */
html{ scroll-behavior:smooth }
#form, #map, #shops{ scroll-margin-top:56px }  /* ヘッダーの高さに合わせる */

/* モバイルナビ（スマホのみ表示） */
.mobile-nav{ display:none }  /* まず隠す（PC） */
@media (max-width: 768px){
  .mobile-nav{
    position: sticky; top:0; z-index: 1000;
    background:#fff; border-bottom:1px solid #eee;
  }
  .mobile-nav__bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 12px;
  }
  .mobile-nav__title{ font-size:15px; font-weight:700; line-height:1.2 }
  .mobile-nav__btn{
    font-size:22px; line-height:1; padding:6px 10px;
    background:#f5f5f5; border:1px solid #e5e5e5; border-radius:8px;
  }
  .mobile-nav__menu{
    display:flex; flex-direction:column; gap:6px;
    padding:10px 12px; border-top:1px solid #eee; background:#fff;
  }
  .mobile-nav__link{
    display:block; padding:10px 12px; border:1px solid #eee; border-radius:10px;
    background:#fafafa; color:#111; text-decoration:none;
  }
  .mobile-nav__link:active{ filter:brightness(0.95) }

  /* スマホ時は上にナビが乗るので、本文側に少し余白を追加（任意） */
  .wrap{ padding-top:8px }
  .mobile-nav{ display:block }
}

@media (max-width: 768px){
  .mobile-nav__bar{
    display:flex; align-items:center; justify-content:flex-end; /* ← 右寄せ */
    gap:12px; padding:10px 12px;
  }
  /* 使わなくなる .mobile-nav__title のCSSは削除してOK */
}

/* モバイルナビ（スマホのみ表示） */
.mobile-nav{ display:none }  /* PCでは非表示 */
@media (max-width: 768px){
  .mobile-nav{
    position: sticky; top:0; z-index: 1000;
    background:#fff; border-bottom:1px solid #eee;
  }
  .mobile-nav__bar{
    display:flex; align-items:center; justify-content:flex-end; /* 右寄せ */
    gap:12px; padding:10px 12px;
  }
  .mobile-nav__btn{
    font-size:22px; line-height:1; padding:6px 10px;
    background:#f5f5f5; border:1px solid #e5e5e5; border-radius:8px;
  }

  /* ▼ ここがポイント：閉じているときは非表示、開いたらflex */
  .mobile-nav__menu{ display:none; }                    /* デフォルトは隠す */
  .mobile-nav__menu[hidden]{ display:none !important; } /* hiddenがあれば確実に隠す */
  .mobile-nav__menu:not([hidden]){
    display:flex; flex-direction:column; gap:6px;
    padding:10px 12px; border-top:1px solid #eee; background:#fff;
  }

  .mobile-nav__link{
    display:block; padding:10px 12px; border:1px solid #eee; border-radius:10px;
    background:#fafafa; color:#111; text-decoration:none;
  }
  .mobile-nav__link:active{ filter:brightness(0.95) }

  .wrap{ padding-top:8px }
  .mobile-nav{ display:block }
}

/* アンカーのズレ対策（固定ヘッダー分） */
html{ scroll-behavior:smooth }
#form, #map, #shops{ scroll-margin-top:56px }