@charset "UTF-8";

/* ==========================================================
   シーナシーナ 夏祭りLP  共通スタイル
   ========================================================== */

:root {
  /* ★ LPの最大表示幅。ここ1箇所を変えれば本体・バナー・余白がすべて連動します */
  --lp-max: 500px;

  /* バナーの高さ（画像比 188:90 から自動計算） */
  --banner-h: calc(min(100vw, var(--lp-max)) / 2 * 90 / 188);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  /* 固定バナーに隠れないよう下部に余白 */
  padding-bottom: calc(var(--banner-h) + env(safe-area-inset-bottom));
}


/* ==========================================================
   LP本体
   ========================================================== */

.w_center {
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
}

.lp-img img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================
   下部固定バナー
   ========================================================== */

#fixed-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);

  /* 初期状態は画面外に隠す */
  transform: translateY(110%);
  transition: transform .3s ease;
}

/* 表示状態（JSで .is-visible を付け外し） */
#fixed-banner.is-visible {
  transform: translateY(0);
}

.fixed-banner-inner {
  display: flex;
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
}

.fixed-banner-item {
  display: block;
  width: 50%;
  line-height: 0;
}

.fixed-banner-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* アニメーションを減らす設定の端末では即時切替 */
@media (prefers-reduced-motion: reduce) {
  #fixed-banner {
    transition: none;
  }
}


/* ==========================================================
   地図の埋め込み（レスポンシブ）
   ========================================================== */

.lp-map {
  width: 100%;
  aspect-ratio: 4 / 3;   /* 元iframe 600×450 と同じ比率 */
  line-height: 0;
}

.lp-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}