/* ============================================================
   Asobe 共有UI部品 (ui-bits) — NameThatUI参照パターンの実装
   ツールチップ / ステッパー / スケルトン / 税込・税別ピル
   変更時は参照側の ?v= クエリを更新すること
   ============================================================ */

/* ---- 用語ツールチップ (Tooltip) ----
   使い方: <span class="tt" tabindex="0" data-tip="説明文">用語</span> */
.tt {
  border-bottom: 1px dashed #7a8699;
  cursor: help;
  position: relative;
  white-space: nowrap;
}
.tt:hover::after,
.tt:focus::after,
.tt:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2233;
  color: #ffffff;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.7;
  width: max-content;
  max-width: min(280px, 78vw);
  white-space: normal;
  z-index: 12000;
  box-shadow: 0 8px 24px rgba(16, 30, 54, 0.22);
  pointer-events: none;
}
.tt:hover::before,
.tt:focus::before,
.tt:focus-visible::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a2233;
  z-index: 12000;
  pointer-events: none;
}
.tt:focus-visible {
  outline: 2px solid #084aab;
  outline-offset: 2px;
}
/* 画面左右端で見切れないよう、端寄せ用の補助クラス */
.tt.tt-left::after { left: 0; transform: none; }
.tt.tt-right::after { left: auto; right: 0; transform: none; }

/* ---- ステッパー (Steps) ----
   使い方: <nav class="stp" aria-label="進行ステップ"><ol>
     <li><a href="#step1"><span class="stp-num">1</span><span class="stp-label">無料相談</span></a></li>
   ...</ol></nav> */
.stp ol {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.stp li {
  flex: 1;
  position: relative;
  text-align: center;
  min-width: 0;
}
.stp li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: #d3dce6;
}
.stp a,
.stp .stp-static {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #4a5568;
  max-width: 100%;
}
.stp a:hover .stp-label { color: #1a2233; text-decoration: underline; }
.stp a:focus-visible { outline: 2px solid #084aab; outline-offset: 2px; border-radius: 8px; }
.stp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0a5cd6;
  color: #0a5cd6;
  font-weight: 800;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.stp a:hover .stp-num { background: #0a5cd6; color: #ffffff; }
.stp-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .stp-label { font-size: 0.68rem; }
  .stp-num { width: 28px; height: 28px; font-size: 0.82rem; }
  .stp li:not(:last-child)::after { top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); }
}

/* ---- スケルトン (Skeleton) ----
   画像・iframe読み込み中のプレースホルダー。コンテナに付与 */
.skl-media {
  background: linear-gradient(100deg, #eef2f7 30%, #e2e8f0 45%, #eef2f7 60%);
  background-size: 300% 100%;
  animation: skl-shimmer 1.5s ease-in-out infinite;
}
@keyframes skl-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skl-media { animation: none; background: #eef2f7; }
}

/* ---- 税込/税別ピル (Pill) ---- */
.pill-tax {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 11px;
  border-radius: 999px;
  background: #e9eef4;
  color: #33415c;
  vertical-align: middle;
  line-height: 1.4;
}
.pill-tax--incl { background: #e6f0fb; color: #084aab; }
.pill-tax--excl { background: #f3ede2; color: #8a5a10; }