/* HA Fix Content */
/* PC用 */

/* ページ表示時に一旦隠す */
.ha-bf-container {
  display: none;
}

/* 外枠 */
.ha-bf-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  background: rgb(34 34 34 / 20%);
  /*background: #ddd;*/
  padding-top: 8px;
  padding-bottom: 8px;
  z-index: 9998;
}

/* 閉じるボタン */
.ha-close {
  position: absolute;
  right: clamp(0.5rem, 0.1382rem + 1.4474vw, 1.875rem);
  font-size: clamp(0.5rem, 0.2368rem + 1.0526vw, 1.5rem);
  background: #b5b5bb;
  padding: 5px;
}

.ha-close a {
  text-decoration: none;
  color: #fff;
}

.ha-bf-content {
  max-width: 90%;
  margin: 0 auto;
  font-size: clamp(0.5rem, 0.2368rem + 1.0526vw, 1.5rem);
  padding: 10px 0px 0px 0px; /******** 20px→10px */
}

/* ヘッドライン（大好評・・の部分） */
.ha-bf-headline {
  text-align: center;
  font-weight: bold;
  font-size: clamp(0.5rem, 0.1053rem + 1.5789vw, 2rem);
  /*letter-spacing:0.1vw;*/
  color: #000;
  margin-bottom: 0.5rem; /******** 2rem → 0.5rem */
  text-shadow: 2px 2px 1px #ffffff, -2px 2px 1px #ffffff, 2px -2px 1px #ffffff,
    -2px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff,
    -2px 0px 1px #ffffff, 0px -2px 1px #ffffff;
}

ul.ha-bf-ul {
  list-style: none;
  display: flex;
  gap: clamp(0.5rem, 0.1382rem + 1.4474vw, 1.875rem);
  align-items: space-evenly;
  justify-content: center;
  padding-left: 0;
}

ul.ha-bf-ul ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 20px;
}

ul.ha-bf-ul li {
  width: 30%;
  padding: 4px;
  text-align: center;
  font-weight: 700;
}

ul.ha-bf-ul li {
  color: #fff;
}

ul.ha-bf-ul li a {
  text-decoration: none;
  color: #fff;
}

svg.svg-inline--fa.fa-envelope.pc-icon-mail,
svg.svg-inline--fa.fa-line.pc-icon-line,
svg.svg-inline--fa.fa-phone.pc-icon-tel,
i.fas.fa-phone.pc-icon-tel,
i.fas.fa-envelope.pc-icon-mail,
i.fab.fa-line.pc-icon-line {
  font-size: clamp(0.5rem, 0.2368rem + 1.0526vw, 1.5rem);
  margin-right: 0.5rem;
}

/* 左ボタン */
.ha-bf-ul-left {
  background: #ff4500;
  border: 2px solid #d43b05;
  border-radius: 8px;
}

/* 中央ボタン */
.ha-bf-ul-center {
  background: #0693e3;
  border: 2px solid #0693b5;
  border-radius: 8px;
}

.ha-bf-ul-center:hover {
  background: #056095;
}

/* 右ボタン */
.ha-bf-ul-right {
  background: #00d084;
  border: 2px solid #00d09c;
  border-radius: 8px;
}

.ha-bf-ul-right:hover {
  background: #00935d;
}

/* モバイル用（幅650pxまで） */
@media only screen and (max-width: 649px) {
  .ha-bf-container-mob {
    display: none;
  }

  .ha-bf-container-mob {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #000;
    z-index: 9998;
  }

  .ha-bf-content-mob {
    width: 100%;
    margin: 0 auto;
  }

  /* ボタン */
  ul.ha-bf-ul-mob {
    list-style: none;
    padding-left: 0;
    display: flex;
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    margin-left: 0;
  }

  ul.ha-bf-ul-mob a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }

  /* 左ボタン */
  li.ha-bf-ul-left-mob {
    width: 50%;
    background: #ff4500;
    font-size: 1em;
  }

  span.ha-tel {
    font-size: 1.3em;
    font-weight: bold;
  }

  .mob-icon-tel {
    font-size: 1em;
  }

  /* 中央ボタン */
  li.ha-bf-ul-center-mob {
    width: 25%;
    background: #0693e3;
    font-size: 1em;
  }

  .mob-icon-mail {
    font-size: 1.7em;
    vertical-align: middle;
  }

  /* 右ボタン */
  li.ha-bf-ul-right-mob {
    width: 25%;
    background: #00d084;
    font-size: 1em;
  }

  .mob-icon-line {
    font-size: 1.7em;
    vertical-align: middle;
  }
}

/* モバイル用（幅650pxから） */
@media only screen and (min-width: 650px) {
  .ha-bf-container-mob {
    display: none;
  }

  .ha-bf-container-mob {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #000;
    z-index: 9998;
  }

  .ha-bf-content-mob {
    width: 100%;
    margin: 0 auto;
  }

  /* ボタン */
  ul.ha-bf-ul-mob {
    list-style: none;
    padding-left: 0;
    display: flex;
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    margin-left: 0;
  }

  ul.ha-bf-ul-mob a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }

  /* 左ボタン */
  li.ha-bf-ul-left-mob {
    width: 50%;
    background: #ff4500;
    font-size: 1.2em;
  }

  span.ha-tel {
    font-size: 1.4em;
    font-weight: bold;
  }

  .mob-icon-tel {
    font-size: 1.3em;
    vertical-align: middle;
  }

  /* 中央ボタン */
  li.ha-bf-ul-center-mob {
    width: 25%;
    background: #0693e3;
    font-size: 1em;
  }

  .mob-icon-mail {
    font-size: 1.7em;
    vertical-align: middle;
  }

  /* 右ボタン */
  li.ha-bf-ul-right-mob {
    width: 25%;
    background: #00d084;
    font-size: 1.2em;
  }

  .mob-icon-line {
    font-size: 1.7em;
    vertical-align: middle;
  }
}