@charset "UTF-8";
/* ------------------------------------------------------------------ */
/* 下部固定バー（電話／LINE／計画診断）        .mgs-fixed-bar          */
/* マークアップ: inc/inc_fixed_bar.php（footer.php から読み込み）       */
/* タブレット以下（1024px以下）でのみ表示。PCは非表示のまま。          */
/* ------------------------------------------------------------------ */

/* PC（1025px以上）では出さない */
.mgs-fixed-bar
{
  display: none;
}

@media screen and (max-width: 1024px)
{
  .mgs-fixed-bar
  {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* ヘッダー(100)より背面 / .footer-yoyaku-link(90)より前面 */
    z-index: 95;
    background: #fff;
    border-top: 1px solid var(--main-color-light);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
    /* iPhone のホームバー分を内側に確保（未対応環境で calc/宣言が無効化されないよう既定値0px） */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mgs-fixed-bar__item
  {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 60px;
    color: var(--main-color);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    background: #fff;
    transition: background .2s, color .2s;
  }
  .mgs-fixed-bar__item + .mgs-fixed-bar__item
  {
    border-left: 1px solid var(--main-color-light);
  }
  .mgs-fixed-bar__item i
  {
    font-size: 20px;
    line-height: 1;
  }
  .mgs-fixed-bar__label
  {
    display: block;
    white-space: nowrap;
  }

  /* LINE（ブランドカラー） */
  .mgs-fixed-bar__item--line i
  {
    color: #06c755;
  }

  /* 計画診断（主導線・塗り） */
  .mgs-fixed-bar__item--cta
  {
    background: var(--cta-color);
    color: #fff;
    border-left-color: var(--cta-color);
  }
  .mgs-fixed-bar__item--cta:hover,
  .mgs-fixed-bar__item--cta:active
  {
    background: var(--cta-color-dark);
    color: #fff;
  }
  .mgs-fixed-bar__item--tel:active,
  .mgs-fixed-bar__item--line:active
  {
    background: var(--main-color-bg);
  }

  /* ドロワーメニュー展開中はバーを隠す（#g-nav は全画面表示）
     body.mgs-nav-open は js/mobile_menu.js で付与 */
  body.mgs-nav-open .mgs-fixed-bar
  {
    display: none;
  }

  /* フッター最下部がバーに隠れないよう逃げ余白を確保。
     body 側の padding だとフッターの背景色が途切れて白帯になるため、footer の内側に持たせる。
     バー高さ60px + ホームバー + 視覚的な余白24px。
     このファイルは frame_tablet.css / frame_mobile.css より後に読み込むため、
     それらの padding ショートハンドを後勝ちで上書きできる（!important 不要）。 */
  footer
  {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 24px);
  }
}