@charset "utf-8";
/*********************************************
 フッターバナー
 更新日: 2026-02-17
 
 担当者: 寿ラボ
 - 初期非表示 → スクロールでスライドイン
 - PC: 最下部到達でスライドアウト（コピーライト確保）
 - SP: 常時表示、bodyに余白追加でコピーライト確保
 
 ■ 色調整メモ（ここの値を変えて試す）
 --col1-bg:    左カラム背景
 --col2-bg:    中央カラム背景
 --col3-bg:    右カラム背景（中央と同色）
 --btn-bg:     ボタン背景
 --btn-border: ボタンボーダー
*********************************************/

/*********************************************
 カスタムプロパティ（色調整はここだけ触る）
*********************************************/
#myFooterBanner.myFooterBanner--v2 {
  --col1-bg:    #009AAA;     /* ティール */
  --col2-bg:    #1a1a1a;     /* ダークグレー */
  --col3-bg:    #1a1a1a;     /* ダークグレー（col2と同色） */
  --grid-bg:    repeating-linear-gradient(
                  45deg,
                  transparent,
                  transparent 19px,
                  rgba(255,255,255,0.02) 19px,
                  rgba(255,255,255,0.02) 20px
                ),
                repeating-linear-gradient(
                  -45deg,
                  transparent,
                  transparent 19px,
                  rgba(255,255,255,0.02) 19px,
                  rgba(255,255,255,0.02) 20px
                ),
                #1a1a1a;
  --btn-bg:     #ff8c00;     /* オレンジ */
  --btn-border: #ff8c00;
  --btn-hover-bg:    #e67e00;
  --btn-hover-color: #fff;
}

/*********************************************
 スクロール表示アニメーション
*********************************************/
#myFooterBanner.myFooterBanner--v2 {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 9999;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: sans-serif;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.3);
  background-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;

  /* 初期状態：画面下に隠す */
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.5s ease,
              visibility 0.5s ease;
}

/* スクロール後：表示 */
#myFooterBanner.myFooterBanner--v2.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/*********************************************
 レイアウト（v1と同構造）
*********************************************/
#myFooterBanner.myFooterBanner--v2 .myFooterBanner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 95px;
  color: white;
  text-align: center;
}

#myFooterBanner.myFooterBanner--v2 .myFooterBanner__col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

/*********************************************
 カラム1（左端）
*********************************************/
#myFooterBanner.myFooterBanner--v2 .col1 {
  background-color: var(--col1-bg);
  width: 24%;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  border-radius: 0;
}

#myFooterBanner.myFooterBanner--v2 .col1 p {
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

#myFooterBanner.myFooterBanner--v2 .col1 span {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
  margin-top: 5px;
  line-height: 1.2;
  white-space: normal;
  color: rgba(255, 255, 255, 0.8);
}

/*********************************************
 カラム2（中央）
*********************************************/
#myFooterBanner.myFooterBanner--v2 .col2 {
  background: var(--grid-bg);
  width: 50%;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 24px;
  color: #fff;
}

#myFooterBanner.myFooterBanner--v2 .col2 .cta-catch {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 6px 0;
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}

#myFooterBanner.myFooterBanner--v2 .col2 .cta-badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
}

#myFooterBanner.myFooterBanner--v2 .col2 .cta-badge {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

#myFooterBanner.myFooterBanner--v2 .col2 .cta-badge::before {
  content: "✓ ";
  color: #c0392b;
}

/*********************************************
 カラム3（右端）
*********************************************/
#myFooterBanner.myFooterBanner--v2 .col3 {
  background: var(--grid-bg);
  width: 26%;
  justify-content: center;
  border-radius: 0;
  padding: 0 38px 0 6px;
}

/*********************************************
 ボタン
*********************************************/
#myFooterBanner.myFooterBanner--v2 .contactBtn {
  background: var(--btn-bg);
  color: #fff;
  padding: 0.8em 1.5em;
  font-size: 1.2rem;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  border: 3px solid var(--btn-border);
}

#myFooterBanner.myFooterBanner--v2 .contactBtn:hover {
  background-color: var(--btn-hover-bg);
  transform: translateY(-2px);
  color: var(--btn-hover-color);
}

/*********************************************
 レスポンシブ（SP）
*********************************************/
@media (max-width: 1024px) {

  /* SP: バナー高さ分の余白をbodyに追加してコピーライトを見せる */
  body.show_footer_bar {
    padding-bottom: 80px;
  }

  /* SP: コピーライト 1行に収める */
  #copyright {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
  }

  #myFooterBanner.myFooterBanner--v2 {
    width: 100%;
  }

  #myFooterBanner.myFooterBanner--v2 .myFooterBanner__inner {
    height: 80px;
  }

  #myFooterBanner.myFooterBanner--v2 .col1 {
    width: 55%;
    font-size: 1.4rem;
    padding: 5px 10px 0;
  }

  #myFooterBanner.myFooterBanner--v2 .col1 span {
    font-size: 0.7rem;
  }

  #myFooterBanner.myFooterBanner--v2 .col2 {
    display: none;
  }

  #myFooterBanner.myFooterBanner--v2 .col3 {
    width: 45%;
    padding: 0 10px;
    justify-content: center;
  }

  #myFooterBanner.myFooterBanner--v2 .contactBtn {
    width: 100%;
    text-align: center;
    padding: 0.9em 0.8em;
    font-size: 1.0rem;
    white-space: nowrap;
    position: relative;
    color: transparent;
    overflow: hidden;
  }

  #myFooterBanner.myFooterBanner--v2 .contactBtn::after {
    content: "お問い合わせ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
  }
}