/* =========================================================
   「個人向けサービスはこちら」吹き出しボタン（inc/personal.php）
   全ページ共通。固定ヘッダー（.l-header, z-index:10）の直下・右端に常時表示。
   ※ html の font-size が 62.5% なので px 指定で統一
   ========================================================= */
.c-personal-badge {
  --pf-top: 107px;               /* JS がヘッダー実測値で上書き */
  --pf-orange: #f28c38;
  --pf-ink: #3d3a36;
  position: fixed;
  z-index: 11;                   /* ヘッダー(10)より上、SPメニュー(9999)より下 */
  top: calc(var(--pf-top) + 14px);
  right: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--pf-ink);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.c-personal-badge.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* SPメニューを開いているときは隠す */
body[data-menu="active"] .c-personal-badge { opacity: 0; pointer-events: none; }

/* --- 吹き出し --- */
.c-personal-badge__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 11px;
  background: #fff;
  border: 2px solid var(--pf-orange);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(242, 140, 56, .22);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  transition: box-shadow .3s ease, transform .3s ease;
}
/* しっぽ（右のマスコットに向ける） */
.c-personal-badge__bubble::before,
.c-personal-badge__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border-style: solid;
  transform: translateY(-50%);
}
.c-personal-badge__bubble::before {
  right: -11px;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--pf-orange);
}
.c-personal-badge__bubble::after {
  right: -7px;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.c-personal-badge__sub {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--pf-orange);
  max-height: 20px;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.c-personal-badge__main {
  font-size: 15px;
  letter-spacing: .04em;
}

/* --- マスコット --- */
.c-personal-badge__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e3f4ec;
  box-shadow: 0 6px 16px rgba(61, 58, 54, .14);
  animation: pf-bob 3.2s ease-in-out infinite;
}
.c-personal-badge__mascot { width: 44px; height: 44px; display: block; }

/* --- hover --- */
.c-personal-badge:hover .c-personal-badge__bubble {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(242, 140, 56, .32);
}
.c-personal-badge:hover .c-personal-badge__mascot { animation: pf-wiggle .6s ease-in-out; }
.c-personal-badge:focus-visible { outline: none; }
.c-personal-badge:focus-visible .c-personal-badge__bubble { outline: 3px solid #004ca0; outline-offset: 3px; }

/* --- スクロール後はサブコピーを畳む --- */
.c-personal-badge.is-compact .c-personal-badge__sub { max-height: 0; opacity: 0; }

@keyframes pf-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes pf-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(10deg); }
}

/* --- SP --- */
@media screen and (max-width: 767px) {
  .c-personal-badge { top: calc(var(--pf-top) + 10px); right: 10px; }
  .c-personal-badge__bubble { padding: 7px 13px 8px; }
  .c-personal-badge__sub { font-size: 10px; }
  .c-personal-badge__main { font-size: 12.5px; }
  .c-personal-badge__icon { width: 48px; height: 48px; margin-left: 4px; }
  .c-personal-badge__mascot { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-personal-badge,
  .c-personal-badge__sub,
  .c-personal-badge__bubble { transition: none; }
  .c-personal-badge__icon,
  .c-personal-badge:hover .c-personal-badge__mascot { animation: none; }
}