@charset "UTF-8";

/*
 * ── 信頼バー（細ラインのマーキー）共通部品 ──
 * トップ・24h 両店・パーソナル両店で使う。形はここだけに持つ（2026-10-31 に 24h.css から移した）。
 * 読込は functions.php の vision24_enqueue_trust_line()。
 * 配色は変数だけで切り替える。既定は白地×ゴールド数字（2026-10-31）。
 * 濃紺×黄にするページは次の4つを上書きする:
 *   --trust-line-bg: #111317; --trust-line-fg: #fff; --trust-line-rule: rgba(255, 255, 255, .08);
 *   --trust-line-sep: rgba(255, 255, 255, .28); --trust-line-num: #fee801;
 */
.vision-trust--line {
  overflow: hidden;
  background: var(--trust-line-bg, #fdfcfb);
  color: var(--trust-line-fg, #0c0c0c);
  border-block: 1px solid var(--trust-line-rule, rgba(12, 12, 12, .08));
}

.vision-trust--line .vision-trust__marquee {
  display: flex;
  width: max-content;
  min-width: 0;
  animation: vision-trust-line 42s linear infinite;
}

.vision-trust--line:hover .vision-trust__marquee,
.vision-trust--line:focus-within .vision-trust__marquee {
  animation-play-state: paused;
}

.vision-trust--line .vision-trust__list {
  display: flex;
  flex-shrink: 0;
  max-width: none;
  margin: 0;
}

.vision-trust--line .vision-trust__list li,
.vision-trust--line .vision-trust__list li:not(:first-child),
.vision-trust--line .vision-trust__list li:nth-child(n) {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border: 0;
  font-size: .78rem;
  line-height: 1.3;
  white-space: nowrap;
}

.vision-trust--line .vision-trust__list li > a {
  display: inline-flex;
  align-items: center;
}

/* 項目の区切り（細い斜線） */
.vision-trust--line .vision-trust__list li::after {
  content: "";
  width: 1px;
  height: 14px;
  margin-inline: 28px;
  background: var(--trust-line-sep, rgba(12, 12, 12, .22));
  transform: rotate(20deg);
}

.vision-trust--line .vision-trust__list b {
  display: inline;
  margin-right: .55em;
  color: var(--trust-line-num, #8a6d00);
  font-size: 1.05rem;
  line-height: 1;
}

.vision-trust--line .vision-trust__list br {
  display: none;
}

@keyframes vision-trust-line {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .vision-trust--line .vision-trust__marquee {
    animation-duration: 30s;
  }

  .vision-trust--line .vision-trust__list li,
  .vision-trust--line .vision-trust__list li:not(:first-child),
  .vision-trust--line .vision-trust__list li:nth-child(n) {
    padding: 6px 0;
    font-size: .72rem;
  }

  .vision-trust--line .vision-trust__list li::after {
    margin-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision-trust--line {
    overflow-x: auto;
  }

  .vision-trust--line .vision-trust__marquee {
    animation: none;
  }
}

/* 24h.css の .vision-trust の基本形を読まないページ（トップ）でも同じに見せる分 */
.vision-trust--line .vision-trust__list {
  padding: 0;
  list-style: none;
}
.vision-trust--line .vision-trust__list b {
  font-family: var(--f-en);
  font-weight: 700;
}
.vision-trust--line .vision-trust__list a {
  color: inherit;
  text-decoration: none;
}
.vision-trust--line .vision-trust__list a:hover {
  text-decoration: underline;
}
.vision-trust--line .vision-trust__list a:focus-visible {
  outline: 3px solid #FEE801;
  outline-offset: 2px;
}