@charset "utf-8";
/* 企業ユニフォーム事業ページ専用 追従電話ナビ
   PC = 右下のカード / SP = 画面下の固定バー
   ブランドカラー: 企業ユニフォーム #3D69B7 */

#hk-fixnav {
  position: fixed;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.4;
}
#hk-fixnav.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#hk-fixnav a { text-decoration: none; }
#hk-fixnav .fx-ico { display: inline-flex; align-items: center; }
#hk-fixnav .fx-ico svg { display: block; }

/* ---------------- PC ---------------- */
@media screen and (min-width: 768px), print {
  #hk-fixnav {
    /* 右端には既存の縦帯メニュー(#pc-menu-open 幅90px)が居るので、その左に避ける */
    right: 110px;
    bottom: 24px;
    width: 286px;
    padding: 18px 18px 16px;
    background: #fff;
    border: 1px solid #e3e6ee;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    transform: translateY(14px);
  }
  #hk-fixnav.is-show { transform: translateY(0); }

  #hk-fixnav .fx-lead {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3D69B7;
    letter-spacing: .04em;
    margin: 0 0 8px;
  }
  #hk-fixnav .fx-lead br.sp { display: none; }

  #hk-fixnav .fx-tel {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1b2440;
  }
  #hk-fixnav .fx-tel .fx-ico { color: #3D69B7; }
  #hk-fixnav .fx-sp-label { display: none; }
  #hk-fixnav .fx-num {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  #hk-fixnav .fx-time {
    font-size: 1.15rem;
    color: #6b7285;
    margin: 4px 0 12px;
  }

  #hk-fixnav .fx-btn {
    display: block;
    text-align: center;
    padding: 11px 8px;
    border-radius: 6px;
    background: #3D69B7;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background .2s ease;
  }
  #hk-fixnav .fx-btn:hover { background: #31559a; }

  #hk-fixnav .fx-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #d7dbe6;
    border-radius: 50%;
    background: #fff;
    color: #6b7285;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  }
  #hk-fixnav .fx-close:hover { color: #1b2440; }
}

/* ---------------- SP ---------------- */
@media screen and (max-width: 767px) {
  #hk-fixnav {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .14);
    transform: translateY(100%);
  }
  #hk-fixnav.is-show { transform: translateY(0); }

  #hk-fixnav .fx-lead,
  #hk-fixnav .fx-time,
  #hk-fixnav .fx-close { display: none; }

  #hk-fixnav .fx-tel,
  #hk-fixnav .fx-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 6px;
    text-align: center;
  }
  #hk-fixnav .fx-tel {
    gap: 6px;
    background: #3D69B7;
    color: #fff;
  }
  #hk-fixnav .fx-tel .fx-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #hk-fixnav .fx-sp-label {
    display: block;
    font-size: 3.1vw;
    font-weight: 500;
    letter-spacing: .02em;
  }
  #hk-fixnav .fx-num {
    font-size: 4.2vw;
    font-weight: 700;
    white-space: nowrap;
  }
  #hk-fixnav .fx-btn {
    background: #fff;
    border: 2px solid #3D69B7;
    color: #3D69B7;
    font-size: 3.6vw;
    font-weight: 700;
    letter-spacing: .02em;
  }
}