/* ============================================================
 * addons.css — 固定フッター（スマホCTAバー）＋チャットボット位置調整
 * デザイン原本に無い新設要素。新ブランド色：青#14658a / 紺#082f43
 * ============================================================ */

/* --- Instagram アイコン（ナビ お知らせの右 ＋ フッター） --- */
.hero-nav .nav-ig, .global-nav .nav-ig{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 0; border-bottom: 1px solid transparent; color: inherit;
}
.hero-nav .nav-ig svg, .global-nav .nav-ig svg{ width: 18px; height: 18px; display: block; }
.hero-nav .nav-ig:hover, .hero-nav .nav-ig:focus-visible,
.global-nav .nav-ig:hover, .global-nav .nav-ig:focus-visible{ color: #14658a; border-color: transparent; }
.footer-ig{ display: inline-flex; align-items: center; }
.footer-ig svg{ width: 21px; height: 21px; display: block; }
@media (max-width: 900px){
  .hero-nav.is-open .nav-ig svg, .global-nav.is-open .nav-ig svg{ width: 26px !important; height: 26px !important; }
}

/* --- スマホメニュー：全画面で見やすく＋✕閉じるボタン（TOP hero-nav / 下層 global-nav 共通） --- */
@media (max-width: 900px){
  .hero-nav.is-open, .global-nav.is-open{
    position: fixed !important; inset: 0 !important; z-index: 9500 !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 0 !important; padding: 84px 26px 44px !important;
    background: rgba(255,255,255,.985) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    overflow-y: auto !important;
  }
  .hero-nav.is-open a, .global-nav.is-open a{
    width: 100% !important; padding: 19px 8px !important;
    border-bottom: 1px solid #e6e9ec !important; border-top: 0 !important;
    font-family: var(--font-min, serif) !important; font-size: 19px !important; font-weight: 600 !important;
    letter-spacing: .1em !important; color: #082f43 !important; text-align: center !important;
  }
  .hero-nav.is-open a:first-child, .global-nav.is-open a:first-child{ border-top: 1px solid #e6e9ec !important; }
  .hero-nav.is-open a[aria-current="page"], .global-nav.is-open a[aria-current="page"]{ color: #14658a !important; }

  /* MENUボタン → 開いている間は右上の「✕ 閉じる」に変身（同じボタン＝JSのトグルで閉じる） */
  body.nav-open .menu-button{
    position: fixed !important; top: 16px !important; right: 16px !important; z-index: 9600 !important;
    width: auto !important; margin: 0 !important; padding: 11px 17px !important;
    background: #14658a !important; color: #fff !important; border: 1px solid #14658a !important;
    font-size: 0 !important; line-height: 1 !important;
  }
  body.nav-open .menu-button::after{
    content: "✕ 閉じる"; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #fff;
  }

  /* メニューを開いている間はチャットFAB・固定バーを隠す（重なり防止） */
  body.nav-open #iz-chat-fab, body.nav-open .izmg-fixedbar{ display: none !important; }
}

/* --- スマホ固定CTAバー（HOME / 過ごし方 / お知らせ / 電話） --- */
.izmg-fixedbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: none; grid-template-columns: repeat(4, 1fr);
  background-color: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.izmg-fixedbar__item{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 8px; font-size: 11px; font-weight: 700; line-height: 1.1;
  text-decoration: none; text-align: center; color: #082f43;
  border-left: 1px solid #eef1f3;
}
.izmg-fixedbar__item:first-child{ border-left: 0; }
.izmg-fixedbar__tel{ background-color: #14658a; color: #fff; }
.izmg-fixedbar__item:active{ opacity: .82; }
.izmg-fixedbar svg{ width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }

/* スマホのみ表示。バーの高さ分だけ本文下に余白 */
@media (max-width: 768px){
  .izmg-fixedbar{ display: grid; }
  body{ padding-bottom: 60px; }
}

/* --- 見出しの不自然な途中改行を防ぐ（「来場前のご案/内」等の孤立を回避） --- */
.feature-head h2,
.site-cta-news-contact strong{ word-break: keep-all; }

/* --- 装飾セクション(site-effects)の説明文・見出しを写真上でも白く読みやすく --- */
.site-fx-copy h2,
.site-fx-copy p{ color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.4); }
/* FOOD(gravity)は明るい背景＝黒文字のまま影だけ弱く */
.site-fx-gravity .site-fx-copy h2,
.site-fx-gravity .site-fx-copy p{ color: #000; text-shadow: none; }