@charset "UTF-8";
.sec-spbar {
  display: none;
}
@media (max-width: 767px) {
  .sec-spbar {
    --spbar-u: calc(100vw / 390);
    --spbar-c-navy:   #244496;
    --spbar-c-orange: #E47F10;
    --spbar-c-gray:   #F8F8F8;
    display: grid;
    grid-template-columns: calc(79 * var(--spbar-u)) 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(74 * var(--spbar-u));
    z-index: 120;
    font-family: var(--font-body);
    font-feature-settings: normal;
  }
  .spbar-btn {
    position: relative;
    display: block;
    height: 100%;
  }
  .spbar-btn--tel     { background: var(--spbar-c-gray); }
  .spbar-btn--web     { background: var(--spbar-c-navy); }
  .spbar-btn--consult { background: var(--spbar-c-orange); }
  .spbar-icon {
    position: absolute;
    height: auto;
  }
  .spbar-icon--tel {
    left: calc(30.785 * var(--spbar-u));
    top: calc(16.32 * var(--spbar-u));
    width: calc(19.854 * var(--spbar-u));
    height: calc(25.894 * var(--spbar-u));
  }
  .spbar-icon--web {
    left: calc(68.262 * var(--spbar-u));
    top: calc(18.961 * var(--spbar-u));
    width: calc(25.238 * var(--spbar-u));
    height: calc(22.548 * var(--spbar-u));
  }
  .spbar-icon--consult {
    left: calc(69.012 * var(--spbar-u));
    top: calc(17.5 * var(--spbar-u));
    width: calc(17.477 * var(--spbar-u));
    height: calc(24.599 * var(--spbar-u));
  }
  .spbar-label {
    position: absolute;
    white-space: nowrap;
    line-height: 1;
    font-weight: 500;
  }
  .spbar-btn--tel .spbar-label {
    left: calc(12.191 * var(--spbar-u));
    top: calc(50 * var(--spbar-u));
    font-size: calc(14 * var(--spbar-u));
    letter-spacing: calc(0.56 * var(--spbar-u));
    color: var(--c-text);
  }
  .spbar-btn--web .spbar-label {
    left: calc(19.379 * var(--spbar-u));
    top: calc(49.75 * var(--spbar-u));
    font-size: calc(15 * var(--spbar-u));
    color: #fff;
  }
  .spbar-btn--consult .spbar-label {
    left: calc(17.246 * var(--spbar-u));
    top: calc(49.75 * var(--spbar-u));
    font-size: calc(15 * var(--spbar-u));
    color: #fff;
  }
  .spbar-badge {
    position: absolute;
    top: calc(-10.5 * var(--spbar-u));
    left: calc(21.75 * var(--spbar-u));
    width: calc(112 * var(--spbar-u));
    height: calc(20 * var(--spbar-u));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: calc(26 * var(--spbar-u));
    font-size: calc(13 * var(--spbar-u));
    font-weight: 500;
    letter-spacing: calc(0.26 * var(--spbar-u));
    line-height: 1;
    white-space: nowrap;
  }
  .spbar-badge--web {
    border: calc(1 * var(--spbar-u)) solid var(--spbar-c-navy);
    color: var(--spbar-c-navy);
  }
  .spbar-badge--consult {
    border: calc(1 * var(--spbar-u)) solid var(--spbar-c-orange);
    color: var(--spbar-c-orange);
  }
  .spbar-dentai {
    position: fixed;
    right: calc(13.271 * var(--spbar-u));
    bottom: calc(95.168 * var(--spbar-u));
    width: calc(88.586 * var(--spbar-u));
    height: calc(88.586 * var(--spbar-u));
  }
  .spbar-dentai-circle {
    position: absolute;
    inset: calc(-8 * var(--spbar-u));
    width: calc(104.586 * var(--spbar-u));
    height: calc(104.586 * var(--spbar-u));
    max-width: none;
  }
  .spbar-dentai-mark {
    position: absolute;
    left: calc(27.605 * var(--spbar-u));
    top: calc(4.586 * var(--spbar-u));
    width: calc(33.376 * var(--spbar-u));
    height: calc(26 * var(--spbar-u));
  }
  .spbar-dentai-logo {
    position: absolute;
    left: calc(23.758 * var(--spbar-u));
    top: calc(30.586 * var(--spbar-u));
    width: calc(41.071 * var(--spbar-u));
    height: calc(9.75 * var(--spbar-u));
  }
  .spbar-dentai-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(46.2 * var(--spbar-u));
    font-size: calc(15 * var(--spbar-u));
    font-weight: 500;
    line-height: 1;
    color: var(--spbar-c-navy);
    white-space: nowrap;
  }
  .spbar-dentai-arrow {
    position: absolute;
    left: calc(38.793 * var(--spbar-u));
    top: calc(63.883 * var(--spbar-u));
    width: calc(11 * var(--spbar-u));
    height: calc(19 * var(--spbar-u));
  }
}
@media (max-width: 767px) {
  .sec-spbar { --spbar-u: min(calc(100vw / 390), 1.2px); }
  .spbar-btn--web > *,
  .spbar-btn--consult > * {
    translate: calc(((100vw - 79 * var(--spbar-u)) / 2 - 155.5 * var(--spbar-u)) / 2) 0;
  }
}
