/* =========================
   共通：調整用カスタムプロパティ
   ここを変えると全体のサイズ感を一括で調整できます
   ========================= */
:root {
  /* PCサイズ基準 */
  --banner-max-w: 1000px;
  --banner-h-pc: 100px;

  /* 色 */
  --c-col1: #1B9AD5;
  --c-col2: #1C3D77;
  --c-btn:  #1B9AD5;
  --c-btn-hover: #75C5E7;
  --c-text: #fff;

  /* テキスト（PC） */
  --fs-hours-pc: 0.9rem;  /* 営業時間 */
  --fs-tel-pc:   1.9rem;  /* 電話番号 */
  --fs-btn-pc:   1.3rem;  /* ボタン */

  /* テキスト（SP） 初期値：PCと同じ。@media内で上書きでもOK */
  --fs-hours-sp: 0.95rem; /* ←【営業時間】SPでの文字サイズ */
  --fs-tel-sp:   1.6rem;  /* ←【電話番号】SPでの文字サイズ */
  --fs-btn-sp:   1.05rem; /* ←【ボタン】SPでの文字サイズ */

  /* 余白系（SP向け微調整） */
  --pad-col2-l-sp: 12px;  /* ←【営業時間/電話】左余白 */
  --gap-sp: 10px;         /* ← カラム間の隙間（SPのみ） */
  --btn-pad-y-sp: 0.85em; /* ←【ボタン】上下パディング */
  --btn-pad-x-sp: 1.2em;  /* ←【ボタン】左右パディング */
  --banner-h-sp: 74px;    /* ← バナー高さ（SP）。被り回避にも使用 */
}

/* =========================
   ベース
   ========================= */
.myFooterBanner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(var(--banner-max-w), 95vw); /* ← PCでもスマホでもはみ出さない */
  font-family: sans-serif;
  box-shadow: 0 -3px 9px rgba(0, 0, 0, 0.15);
  background-color: transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden; /* ← 角丸のはみ出し防止 */
}

/* フッターに隠れないよう、ページ下部の余白を自動付与 */
body {
  /* PC基準。モバイルは@mediaで上書き */
  padding-bottom: calc(var(--banner-h-pc) + env(safe-area-inset-bottom, 0px));
}

.myFooterBanner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--banner-h-pc);
  color: var(--c-text);
  text-align: center;
}

/* 共通カラム */
.myFooterBanner__col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* カラム1（左端） */
.col1 {
  background-color: var(--c-col1);
  width: 35%;
  font-weight: bold;
  font-size: 1.8rem;
  padding: 10px 0 0;
  border-top-left-radius: 10px;
}

/* カラム2（営業時間・電話） */
.col2 {
  background-color: var(--c-col2);
  width: 32.5%;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px; /* ←【営業時間/電話】PC：左寄せ度合い */
  padding-right: 5px;
}

/* カラム3（ボタン） */
.col3 {
  background-color: var(--c-col2);
  width: 32.5%;
  padding-left: 0;
  padding-right: 50px; /* ←【ボタン】PC：右側の余白 */
  justify-content: center;
  border-top-right-radius: 10px;
}

/* テキスト */
.col2 p {
  margin: 0;
  line-height: 1.4;
  white-space: nowrap; /* 折り返したい場合はここを外す */
}

/* 【営業時間】PCフォントサイズ */
.col2 .hours { font-size: var(--fs-hours-pc); }

/* 【電話番号】PCフォントサイズ */
.col2 .tel   { font-size: var(--fs-tel-pc); font-weight: bold; }

/* 【電話番号リンク】見た目はテキストのまま */
.col2 .tel a {
  color: inherit;
  text-decoration: none;
}

/* ボタン */
.contactBtn {
  background: var(--c-btn);
  color: #ffffff;
  padding: 1em 1.5em;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: var(--fs-btn-pc);
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.contactBtn:hover {
  background-color: var(--c-btn-hover)!important;
  transform: translateY(-2px);
  color: #ffffff;
}

/* =========================
   レスポンシブ：タブレット以下
   ========================= */
@media (max-width: 1024px) {
  .myFooterBanner { width: 95vw; }

  .col1 { display: none; } /* 初回相談60分無料を非表示（必要なら残してOK） */

  .col2 {
    width: 50%;
    padding-left: 20px; /* ←【営業時間/電話】タブレット時の左余白 */
    padding-right: 5px;
    display: flex;
    justify-content: center;
  }

  .col2 .tel { font-size: 1.7rem; }

  .col3 {
    width: 50%;
    justify-content: center;
    padding-right: 0;
  }

  .contactBtn {
    font-size: 1.1rem;
    padding: 0.9em 1.3em;
  }
}

/* =========================
   レスポンシブ：スマホ（幅<=600px）
   ここからが「窮屈対策」の本丸。各要素をゆるめます。
   ========================= */
@media (max-width: 600px) {
  /* フッター高さ・ページ下余白をSP用に */
  .myFooterBanner__inner { height: var(--banner-h-sp); }
  body { padding-bottom: calc(var(--banner-h-sp) + env(safe-area-inset-bottom, 0px)); }

  /* 横幅は常に画面いっぱい＋安全域対応 */
  .myFooterBanner {
    left: 0;
    transform: none;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone下部安全域 */
  }

  /* カラム構成：col1は非表示、col2とcol3を等分＋中央寄せ */
  .col1 { display: none; }

  .myFooterBanner__inner {
    gap: var(--gap-sp); /* ← カラム間の隙間 */
    padding: 0 10px;    /* ← 画面端の窮屈感を軽減 */
  }

  .col2, .col3 { width: 50%; }

  /* 【営業時間/電話】周辺 */
  .col2 {
    padding-left: var(--pad-col2-l-sp); /* ← 左余白の微調整 */
    padding-right: 0;
    align-items: flex-start; /* ← 左寄せ。中央にしたい場合はcenter */
  }

  /* 【営業時間】SPフォント */
  .col2 .hours { font-size: var(--fs-hours-sp); }

  /* 【電話番号】SPフォント。もっと大きくしたければここを上げる */
  .col2 .tel   { font-size: var(--fs-tel-sp); }

  /* 【ボタン】SPサイズ・タップ余白 */
  .contactBtn {
    font-size: var(--fs-btn-sp);
    padding: var(--btn-pad-y-sp) var(--btn-pad-x-sp);
    border-radius: 999px;
  }

  /* ボタンを幅広にしたい時：コメントアウト解除
  .contactBtn { display: inline-block; width: 100%; text-align: center; }
  */

  /* もっとコンパクトにしたい場合のオプション（必要時だけ使う）
  .myFooterBanner__inner { height: 64px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  */
}

/* =========================
   さらに狭い端末（<=360px）用の微調整
   ※ 必要なければ削除OK
   ========================= */
@media (max-width: 360px) {
  .col2 .hours { font-size: 0.85rem; } /* ←【営業時間】さらに微縮小 */
  .col2 .tel   { font-size: 1.45rem; } /* ←【電話番号】さらに微縮小 */
  .contactBtn  { font-size: 0.98rem; }
}

/* フッターバナー配下は box-sizing を統一（外部CSSとの競合対策） */
#myFooterBanner, #myFooterBanner * {
  box-sizing: border-box;
}

/* タブレット以下：PCレイアウトは維持しつつ安全に縮小 */
@media (max-width: 1024px) {
  #myFooterBanner.myFooterBanner { width: 95vw; }  /* 画面幅に追従 */
  #myFooterBanner .col1 { display: none; }         /* 左の「60分無料」は隠す（任意） */
  #myFooterBanner .col2,
  #myFooterBanner .col3 { width: 50%; }
  #myFooterBanner .col3 { padding-right: 0; justify-content: center; }
}

/* スマホ：窮屈対策の本丸。ここだけ入れ替えれば崩れません */
@media (max-width: 600px) {
  /* 位置指定の競合を解消：中央寄せ→画面いっぱいへ */
  #myFooterBanner.myFooterBanner {
    left: 0;                  /* ← これで左端基準に */
    transform: none;          /* ← translateX(-50%) を打ち消し */
    width: 100%;              /* ← 画面幅いっぱい */
    max-width: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    /* 角丸のため overflow は維持。ボタンが切れる場合は visible に変更してください */
    /* overflow: visible; */
  }

  /* 高さ・内側余白をスマホ用に最適化 */
  #myFooterBanner .myFooterBanner__inner {
    height: 74px;             /* ← 高さはここで調整 */
    padding: 0 10px;          /* ← 端が窮屈な場合は増やす */
    gap: 10px;                /* ← col2 と col3 の間隔 */
  }

  /* 左カラムは非表示、残りを等分 */
  #myFooterBanner .col1 { display: none; }
  #myFooterBanner .col2,
  #myFooterBanner .col3 { width: 50%; }

  /* 営業時間・電話番号周りの調整点 */
  #myFooterBanner .col2 {
    padding-left: 12px;       /* ← 左寄せの度合い（増やすと右に寄る体感が出ます） */
    padding-right: 0;
    align-items: flex-start;  /* ← 左揃え。中央にしたければ center */
    justify-content: center;
    flex-direction: column;
  }
  /* 営業時間（クラス付けしていない場合も効くように全ての p に適用） */
  #myFooterBanner .col2 p {
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;      /* 折り返したければ削除 */
    font-size: 0.7rem;       /* ← 営業時間の文字サイズ */
  }
  /* 電話番号だけ少し大きく（既存の .tel を利用） */
  #myFooterBanner .col2 .tel { 
    font-size: 1.2rem;        /* ← 電話番号の文字サイズ */
    font-weight: 700;
  }

  /* ボタン側 */
  #myFooterBanner .col3 {
    justify-content: center;
    padding-right: 20px;               /* ← 右側の余白を打ち消し */
  }
  #myFooterBanner .contactBtn {
    font-size: 0.95rem;       /* ← ボタン文字サイズ */
    padding: 0.85em 1.2em;    /* ← タップ余白 */
    border-radius: 999px;     /* ← まるっとさせる */
    white-space: nowrap;
  }

  /* ページ下に隠れないよう余白を足したい場合は下を有効化（不要なら消してOK） */
  /*
  body { 
    padding-bottom: 80px !important;   <-- バナー高さに合わせて調整
  }
  */
}

/* さらに狭い端末（任意） */
@media (max-width: 360px) {
  #myFooterBanner .col2 p    { font-size: 0.88rem; }
  #myFooterBanner .col2 .tel { font-size: 1.45rem; }
  #myFooterBanner .contactBtn{ font-size: 0.98rem; }
}

/* ==== スマホ時の左右のスキマ＆角丸欠けの修正パッチ ==== */
@media (max-width: 600px) {
  /* 親を画面いっぱい＋背景色を持たせて角丸を見せる */
  .myFooterBanner {
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    /* 角丸は親で効かせる（既に指定済みだが念のため） */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    /* 親も着色 → gapやpaddingの隙間が見えても同色になる */
    background-color: var(--c-col2); /* ← col2/col3と同じ色 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 内側の左右padding/gapを0にしてスキマを消す */
  .myFooterBanner__inner {
    height: var(--banner-h-sp);
    padding: 0;    /* ← ここがスキマの主因 */
    gap: 0;        /* ← ここもスキマの主因 */
  }

  /* 左カラム非表示のまま、残りを等分 */
  .col1 { display: none; }
  .col2, .col3 { width: 50%; }

  /* 外側paddingを各カラム側で付与（親からは外す） */
  .col2 {
    /* 左右のゆとりはここで調整 */
    padding: 0 6px 0 12px;     /* ← 左余白はお好みで */
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
  }
  .col3 {
    padding: 0 12px 0 6px;     /* ← 右ボタン側の余白 */
    justify-content: center;
  }

  /* テキストサイズ類は既存変数をそのまま使用 */
  .col2 .hours { font-size: var(--fs-hours-sp); }
  .col2 .tel   { font-size: var(--fs-tel-sp); font-weight: 700; }
  .contactBtn  { font-size: var(--fs-btn-sp); padding: var(--btn-pad-y-sp) var(--btn-pad-x-sp); border-radius: 999px; }

  /* 仕切り線を入れたい場合はコメントアウト解除（隙間ではなく線） */
  /* .col3 { border-left: 1px solid rgba(255,255,255,.25); } */
}

/* 念のため：配下はbox-sizingを統一 */
#myFooterBanner, #myFooterBanner * { box-sizing: border-box; }


@media (max-width: 600px) {
  /* 親を画面いっぱい＋背景色を持たせてスキマ防止（角丸は削除） */
  .myFooterBanner {
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    background-color: var(--c-col2); /* col2/col3と同じ色 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0; /* ← 角丸削除 */
  }

  /* 内側の左右padding/gapを0にしてスキマを消す */
  .myFooterBanner__inner {
    height: var(--banner-h-sp);
    padding: 0;
    gap: 0;
  }

  .col1 { display: none; }
  .col2, .col3 { width: 50%; }

  .col2 {
    padding: 0 6px 0 12px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
  }
  .col3 {
    padding: 0 12px 0 6px;
    justify-content: center;
  }

  .col2 .hours { font-size: var(--fs-hours-sp); }
  .col2 .tel   { font-size: var(--fs-tel-sp); font-weight: 700; }
  .contactBtn  { font-size: var(--fs-btn-sp); padding: var(--btn-pad-y-sp) var(--btn-pad-x-sp); border-radius: 999px; }
}

@media (max-width: 600px) {
  /* 親 */
  .myFooterBanner {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* 内側ラッパー */
  .myFooterBanner__inner {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* 各カラム（col3に角丸が残りがち） */
  .myFooterBanner__col,
  .col2,
  .col3 {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}