/* PRIME GEAR Blocks v0.4.3 - theme independent */
.pg-caption{
  --pg-caption-color:#8c8f96;
  --pg-caption-bg:#fdfdfd;
  --pg-caption-icon-size:1.1em;
  position:relative;
  box-sizing:border-box;
  margin:2em 0;
  padding:1.5em;
  color:#1f2937;
  background:#fdfdfd;
  border:1px solid #8c8f96;
  border-radius:0;
  box-shadow:none;
}
.pg-caption *,.pg-caption *::before,.pg-caption *::after{box-sizing:border-box}
.pg-caption__title{display:flex;align-items:center;justify-content:flex-start;gap:.5em;margin:0!important;padding:0;color:#8c8f96;font-weight:400;line-height:1.5;text-align:left}
.pg-caption--icon-right .pg-caption__title{flex-direction:row-reverse;justify-content:flex-end}
.pg-caption__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--pg-caption-icon-size);height:var(--pg-caption-icon-size);margin-left:-.25em;color:currentColor;line-height:1}
.pg-caption--icon-right .pg-caption__icon{margin-left:0;margin-right:-.25em}
.pg-caption__icon svg{display:block;width:100%;height:100%}
.pg-caption__title-text{min-width:1em}
.pg-caption__content{position:relative;z-index:0;clear:both;margin-top:1em;padding:0;background:none;border:none}
.pg-caption__rows{margin:1.2em 0!important;padding:0!important;list-style:none!important}
.pg-caption__row{margin:0!important;padding:10px 0;border-top:1px solid #f2f4f6;font-size:15px;line-height:1.8;color:#1f2937;list-style:none!important}
.pg-caption__row:first-child{padding-top:0;border-top:none}
.pg-caption__row::before,.pg-caption__row::marker{content:none!important;display:none!important}
.pg-caption__label{display:inline-block;margin-right:.3em;color:#6b7280;font-weight:700;white-space:nowrap}
.pg-caption__text{min-width:1em;color:#1f2937;font-weight:400}
.pg-caption__line{display:block;min-width:1em;color:#1f2937;font-weight:400}

/* compatibility: old v0.2.x markup */
.pg-conclusion{--pg-conclusion-color:#8c8f96;--pg-conclusion-bg:#fdfdfd;position:relative;box-sizing:border-box;margin:2em 0;padding:1.5em;color:inherit;background:#fdfdfd;border:1px solid #8c8f96}
.pg-conclusion__title{display:flex;gap:.5em;align-items:center;margin:0!important;color:#8c8f96;line-height:1.5}
.pg-conclusion__icon{display:inline-flex;width:1.1em;height:1.1em;margin-left:-.25em}
.pg-conclusion__icon svg{width:100%;height:100%}
.pg-conclusion__content{margin-top:1em}
.pg-conclusion__list{margin:1.2em 0!important;padding:0!important;list-style:none!important}
.pg-conclusion__item{margin:0!important;padding:10px 0;border-top:1px solid #f2f4f6;font-size:15px;line-height:1.8;list-style:none!important}
.pg-conclusion__item:first-child{padding-top:0;border-top:0}
.pg-conclusion__label{display:inline-block;margin-right:.3em;color:#6b7280;font-weight:700;white-space:nowrap}

@media(max-width:767px){
  .pg-caption{padding:1.5em}
  .pg-conclusion{padding:1.5em}
  .pg-caption__row{padding:9px 0;font-size:14px;line-height:1.75}
  .pg-caption__label{display:block;margin:0 0 4px}
  .pg-conclusion__item{padding:9px 0;font-size:14px}
  .pg-conclusion__label{display:block;margin:0 0 4px}
}

/* =========================================================
 * v0.4.3: 「こんな人におすすめ」
 * 現在PRIME GEARで使っている黄色系キャプションボックスを再現。
 * ========================================================= */
.pg-caption--recommend{
  --pg-caption-color:#e6b422;
  --pg-caption-bg:#fdf9ee;
  color:#111111;
  background:#fdf9ee;
  border-color:#e6b422;
}
.pg-caption--recommend .pg-caption__title{
  color:#e6b422;
  font-size:16px;
  font-weight:400;
}
.pg-caption--recommend .pg-caption__content{
  margin-top:1em;
}
.pg-caption__recommend-list{
  margin:.75em 0 0!important;
  padding:0 0 0 1.35em!important;
  list-style:disc!important;
}
.pg-caption__recommend-item{
  margin:.12em 0!important;
  padding:0!important;
  color:#111111;
  font-size:16px;
  line-height:1.8;
  list-style:disc!important;
}
.pg-caption__recommend-item::marker{
  color:#111111;
  font-size:.88em;
}
.pg-caption__recommend-text{
  color:#111111;
  font-weight:400;
}

@media(max-width:767px){
  .pg-caption--recommend .pg-caption__title{font-size:15px}
  .pg-caption__recommend-list{padding-left:1.25em!important}
  .pg-caption__recommend-item{font-size:15px;line-height:1.75}
}


/* =========================================================
 * v0.4.7: 「更新情報」
 * 現在PRIME GEARで使用中の青系ボックスを再現。
 * 内部のDT/DDはSWELL「説明リスト(DL)」デフォルトを基準にする。
 * ========================================================= */
.pg-caption--update{
  --pg-caption-color:#3d79d5;
  --pg-caption-bg:#f3f8fd;
  color:#111111;
  background:#f3f8fd;
  border-color:#3d79d5;
}
.pg-caption--update .pg-caption__title{
  color:#3d79d5;
  font-weight:400;
}
.pg-caption--update .pg-caption__content{
  margin-top:1em;
}
.pg-caption__update-list{
  margin:.75em 0 0!important;
  padding:0!important;
}
.pg-caption__update-date{
  margin:0!important;
  padding:0!important;
  color:#111111;
  font-weight:700;
  line-height:1.5;
}
.pg-caption__update-text{
  margin-left:1em!important;
  padding:1em!important;
  color:#111111;
  line-height:1.8;
}
.pg-caption__update-text + .pg-caption__update-date{
  margin-top:1em!important;
}
.pg-caption__update-text-inner{
  margin:0!important;
  padding:0!important;
  color:inherit;
  font:inherit;
}
/* v0.4.12: 公開画面の更新内容も投稿画面と同じ段落間隔に揃える。
 * Enter = 段落（1emの余白）、Shift+Enter = 同一段落内の改行。
 */
.pg-caption__update-text-inner > *{
  margin-top:0!important;
  margin-bottom:1em!important;
}
.pg-caption__update-text-inner > :last-child{
  margin-bottom:0!important;
}
@media(max-width:767px){
  .pg-caption__update-text{line-height:1.75}
}

/* =========================================================
 * v0.6.0: PRIME GEAR 評価チャート（最小構成）
 * SVGのみで描画し、公開画面では追加JavaScriptを使わない。
 * ========================================================= */
.pg-rating-chart{
  box-sizing:border-box;
  margin:2em 0;
  padding:24px;
  color:#111111;
  background:#fdfdfd;
  border:0;
}
.pg-rating-chart *,.pg-rating-chart *::before,.pg-rating-chart *::after{box-sizing:border-box}
.pg-rating-chart__preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.pg-rating-chart__svg{display:block;width:100%;max-width:var(--pg-rating-chart-max-width,430px);height:auto;overflow:visible}
/* v0.6.8: PRIME GEARらしい落ち着いた質感を追加。
 * レイアウトや配色の方向性は変えず、線・塗り・頂点だけを精細化する。
 */
.pg-rating-chart__grid-polygon{
  fill:none;
  stroke:#d9dde3;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.pg-rating-chart__grid-polygon:nth-child(2n){stroke:#e3e6ea}
.pg-rating-chart__grid-polygon:last-child{stroke:#c8cdd4;stroke-width:1.15}
.pg-rating-chart__axis{
  stroke:#e3e6ea;
  stroke-width:.9;
  vector-effect:non-scaling-stroke;
}
.pg-rating-chart__value-polygon{
  fill:var(--pg-rating-fill,rgba(17,17,17,.075));
  stroke:var(--pg-rating-accent,#111111);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 4px 8px var(--pg-rating-shadow,rgba(17,17,17,.07)));
}
.pg-rating-chart__dot{
  fill:#fdfdfd;
  stroke:var(--pg-rating-accent,#111111);
  stroke-width:1.8;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 1.5px var(--pg-rating-shadow,rgba(17,17,17,.12)));
}
.pg-rating-chart__svg-label-name{fill:#303640;font-size:12px;font-weight:600}
.pg-rating-chart__svg-label-value{fill:#858c96;font-size:10px;font-weight:500}
.pg-rating-chart__svg--dense .pg-rating-chart__svg-label-name{font-size:11px}
.pg-rating-chart__svg--dense .pg-rating-chart__svg-label-value{font-size:9px}
.pg-rating-chart__overall{display:flex;align-items:baseline;justify-content:center;margin-top:-4px;line-height:1;color:#111111}
.pg-rating-chart__overall-label{margin-right:.65em;color:#6b7280;font-size:13px;font-weight:600}
.pg-rating-chart__overall-score{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--pg-rating-accent,#111111)}
.pg-rating-chart__overall-max{margin-left:.15em;color:#8a919b;font-size:13px;font-weight:500}
@media(max-width:767px){
  .pg-rating-chart{padding:18px 14px}
  .pg-rating-chart__svg{max-width:var(--pg-rating-chart-max-width-mobile,360px)}
  .pg-rating-chart__svg-label-name{font-size:11px}
  .pg-rating-chart__svg-label-value{font-size:9px}
  .pg-rating-chart__svg--dense .pg-rating-chart__svg-label-name{font-size:10px}
  .pg-rating-chart__svg--dense .pg-rating-chart__svg-label-value{font-size:8.5px}
  .pg-rating-chart__overall-score{font-size:27px}
}

/* =========================================================
 * v0.7.0: 比較レーダー（2系列）
 * ========================================================= */
.pg-rating-chart__legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 16px;
  width:100%;
  margin:0 0 4px;
  color:#4b5563;
  font-size:12px;
  line-height:1.4;
}
.pg-rating-chart__legend-item{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pg-rating-chart__legend-swatch{
  width:18px;
  height:10px;
  flex:0 0 auto;
  border:2px solid var(--pg-rating-accent,#111111);
  background:var(--pg-rating-fill,rgba(17,17,17,.12));
}
.pg-rating-chart__legend-swatch--compare{
  border-color:var(--pg-rating-compare-accent,#2f73d9);
  background:var(--pg-rating-compare-fill,rgba(47,115,217,.10));
}
.pg-rating-chart__legend-text{overflow-wrap:anywhere}
.pg-rating-chart__value-polygon--compare{
  fill:var(--pg-rating-compare-fill,rgba(47,115,217,.10));
  stroke:var(--pg-rating-compare-accent,#2f73d9);
  filter:drop-shadow(0 4px 8px var(--pg-rating-compare-shadow,rgba(47,115,217,.08)));
}
.pg-rating-chart__dot--compare{
  stroke:var(--pg-rating-compare-accent,#2f73d9);
  filter:drop-shadow(0 1px 1.5px var(--pg-rating-compare-shadow,rgba(47,115,217,.10)));
}
.pg-rating-chart__overall--compare{
  align-items:center;
  gap:10px 18px;
  flex-wrap:wrap;
  margin-top:2px;
}
.pg-rating-chart__overall-series{display:inline-flex;align-items:baseline;justify-content:center;min-width:0}
.pg-rating-chart__overall-dot{
  width:7px;
  height:7px;
  margin-right:6px;
  align-self:center;
  border-radius:50%;
  background:var(--pg-rating-accent,#111111);
}
.pg-rating-chart__overall-dot--compare{background:var(--pg-rating-compare-accent,#2f73d9)}
.pg-rating-chart__overall-series-name{
  max-width:120px;
  margin-right:.5em;
  overflow:hidden;
  color:#6b7280;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pg-rating-chart__overall-score--compare{color:var(--pg-rating-compare-accent,#2f73d9)}
@media(max-width:767px){
  .pg-rating-chart__legend{gap:8px 12px;font-size:11px}
  .pg-rating-chart__overall--compare{gap:8px 14px}
  .pg-rating-chart__overall-series-name{max-width:90px;font-size:11px}
  .pg-rating-chart__overall--compare .pg-rating-chart__overall-score{font-size:24px}
}

/* =========================================================
 * v0.7.2: 評価チャート 表示アニメーション
 * JSが動作する環境だけ初期状態を中央へ縮小し、表示時に一度だけ展開する。
 * JSが無効・prefers-reduced-motion時は通常表示を維持する。
 * ========================================================= */
.pg-rating-chart--animate.is-pg-rating-animate-ready .pg-rating-chart__value-polygon,
.pg-rating-chart--animate.is-pg-rating-animate-ready .pg-rating-chart__dot{
  transform-box:view-box;
  transform-origin:50% 50%;
  transform:scale(.04);
  opacity:0;
}
.pg-rating-chart--animate.is-pg-rating-animate-ready.is-pg-rating-visible .pg-rating-chart__value-polygon{
  transform:scale(1);
  opacity:1;
  transition:
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .28s ease;
}
.pg-rating-chart--animate.is-pg-rating-animate-ready.is-pg-rating-visible .pg-rating-chart__value-polygon--compare{
  transition-delay:.07s;
}
.pg-rating-chart--animate.is-pg-rating-animate-ready.is-pg-rating-visible .pg-rating-chart__dot{
  transform:scale(1);
  opacity:1;
  transition:
    transform .58s cubic-bezier(.16,1,.3,1) .14s,
    opacity .22s ease .14s;
}
.pg-rating-chart--animate.is-pg-rating-animate-ready.is-pg-rating-visible .pg-rating-chart__dot--compare{
  transition-delay:.20s,.20s;
}
@media (prefers-reduced-motion: reduce){
  .pg-rating-chart--animate .pg-rating-chart__value-polygon,
  .pg-rating-chart--animate .pg-rating-chart__dot{
    transform:none!important;
    opacity:1!important;
    transition:none!important;
  }
}

/* =========================================================
 * v0.7.3: 比較レーダー 凡例クリック切り替え
 * 上部の製品名をクリックすると、その系列だけを一時的に非表示。
 * 最後の1系列は常に残し、空のチャートにはしない。
 * ========================================================= */
.pg-rating-chart__legend-item{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:opacity .2s ease,color .2s ease;
}
.pg-rating-chart__legend-item:focus-visible{
  outline:2px solid var(--pg-rating-accent,#111111);
  outline-offset:4px;
  border-radius:2px;
}
.pg-rating-chart__legend-item.is-muted{
  opacity:.38;
}
.pg-rating-chart__legend-item.is-muted .pg-rating-chart__legend-text{
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.pg-rating-chart__value-polygon,
.pg-rating-chart__dots{
  transition:opacity .22s ease;
}
.pg-rating-chart.is-pg-rating-primary-hidden .pg-rating-chart__value-polygon:not(.pg-rating-chart__value-polygon--compare),
.pg-rating-chart.is-pg-rating-primary-hidden .pg-rating-chart__dots:not(.pg-rating-chart__dots--compare){
  opacity:0!important;
  pointer-events:none;
}
.pg-rating-chart.is-pg-rating-comparison-hidden .pg-rating-chart__value-polygon--compare,
.pg-rating-chart.is-pg-rating-comparison-hidden .pg-rating-chart__dots--compare{
  opacity:0!important;
  pointer-events:none;
}
.pg-rating-chart.is-pg-rating-primary-hidden .pg-rating-chart__overall--compare .pg-rating-chart__overall-series:first-child,
.pg-rating-chart.is-pg-rating-comparison-hidden .pg-rating-chart__overall--compare .pg-rating-chart__overall-series:last-child{
  display:none;
}

/* =========================================================
 * v0.7.4: 比較レーダー単独表示時の軸スコア
 * 2系列表示中は従来どおり数値を隠し、凡例で片方を非表示にした時だけ
 * 表示中の系列のスコアを各項目名の下へ表示する。
 * ========================================================= */
.pg-rating-chart__svg-label-value--primary,
.pg-rating-chart__svg-label-value--compare{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.pg-rating-chart.is-pg-rating-comparison-hidden .pg-rating-chart__svg-label-value--primary,
.pg-rating-chart.is-pg-rating-primary-hidden .pg-rating-chart__svg-label-value--compare{
  opacity:1;
}


/* =========================================================
   PRIME GEAR Before / After
========================================================= */
.pg-before-after-wrap {
  --pg-ba-position: 50%;
  --pg-ba-radius: 0px;
  --pg-ba-width: 100%;
  width: var(--pg-ba-width, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.pg-before-after {
  --pg-ba-position: inherit;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--pg-ba-radius, 0px);
  line-height: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  isolation: isolate;
}
.pg-before-after__image {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}
.pg-before-after__image--before {
  height: auto;
  /* Before/After を完全に分離。透過PNGでも反対側の画像を透かさない */
  clip-path: inset(0 calc(100% - var(--pg-ba-position, 50%)) 0 0);
}
.pg-before-after__after {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--pg-ba-position, 50%));
  pointer-events: none;
}
.pg-before-after__image--after {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pg-before-after__divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--pg-ba-position, 50%);
  width: 2px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  transform: translateX(-50%);
  pointer-events: none;
}
.pg-before-after__handle {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--pg-ba-position, 50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 5px 18px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: translate(-50%,-50%);
  cursor: ew-resize;
  line-height: 1;
}
.pg-before-after__handle svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}
.pg-before-after__handle:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}
.pg-before-after__label {
  position: absolute;
  z-index: 2;
  top: 14px;
  padding: 6px 9px;
  border-radius: 5px;
  background: rgba(17,17,17,.72);
  color: rgba(255,255,255,.98);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.pg-before-after__label--before { left: 14px; }
.pg-before-after__label--after { right: 14px; }
.pg-before-after.is-dragging .pg-before-after__handle { box-shadow: 0 7px 22px rgba(0,0,0,.22); }
@media (max-width: 767px) {
  .pg-before-after__handle { width: 42px; height: 42px; }
  .pg-before-after__label { top: 10px; padding: 5px 8px; font-size: 11px; }
  .pg-before-after__label--before { left: 10px; }
  .pg-before-after__label--after { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-before-after__handle { transition: none !important; }
}

/* PRIME GEAR Before / After v0.8.39 additions */
.pg-before-after--vertical {
  cursor: ns-resize;
  touch-action: pan-x;
}
.pg-before-after--vertical .pg-before-after__image--before {
  clip-path: inset(0 0 calc(100% - var(--pg-ba-position, 50%)) 0);
}
.pg-before-after--vertical .pg-before-after__after {
  clip-path: inset(var(--pg-ba-position, 50%) 0 0 0);
}
.pg-before-after--vertical .pg-before-after__divider {
  top: var(--pg-ba-position, 50%);
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 2px;
  transform: translateY(-50%);
}
.pg-before-after--vertical .pg-before-after__handle {
  top: var(--pg-ba-position, 50%);
  left: 50%;
  cursor: ns-resize;
}
.pg-before-after--vertical .pg-before-after__handle svg {
  transform: rotate(90deg);
}
/* 上下比較では各ラベルをそれぞれの領域へ固定して迷いにくくする */
.pg-before-after--vertical .pg-before-after__label--before {
  top: 14px;
  bottom: auto;
  left: 14px;
  right: auto;
}
.pg-before-after--vertical .pg-before-after__label--after {
  top: auto;
  bottom: 14px;
  left: auto;
  right: 14px;
}
/* 上下比較では「ラベル位置」の共通上下指定より領域内配置を優先 */
.pg-before-after--vertical.pg-before-after--labels-bottom .pg-before-after__label--before {
  top: 14px;
  bottom: auto;
}
.pg-before-after--vertical.pg-before-after--labels-bottom .pg-before-after__label--after {
  top: auto;
  bottom: 14px;
}
.pg-before-after--labels-bottom .pg-before-after__label {
  top: auto;
  bottom: 14px;
}
.pg-before-after__reset {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: rgba(17,17,17,.62);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.pg-before-after__reset:hover { background: rgba(17,17,17,.78); }
.pg-before-after__reset:active { transform: scale(.94); }
.pg-before-after__reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-before-after__reset svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 767px) {
  .pg-before-after-wrap.is-mobile-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .pg-before-after--labels-bottom .pg-before-after__label { bottom: 10px; }
  .pg-before-after--vertical .pg-before-after__label--before,
  .pg-before-after--vertical.pg-before-after--labels-bottom .pg-before-after__label--before {
    top: 10px; bottom: auto; left: 10px; right: auto;
  }
  .pg-before-after--vertical .pg-before-after__label--after,
  .pg-before-after--vertical.pg-before-after--labels-bottom .pg-before-after__label--after {
    top: auto; bottom: 10px; left: auto; right: 10px;
  }
  .pg-before-after__reset { right: 10px; bottom: 10px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-before-after__reset { transition: none !important; }
}

/* =========================================================
   PRIME GEAR 画像スポット
========================================================= */
.pg-hotspot-wrap {
  width: 100%;
  max-width: 100%;
}
.pg-hotspot-wrap > .pg-hotspot,
.pg-hotspot-editor__canvas-wrap {
  width: var(--pg-hotspot-width, 100%);
  max-width: none;
  margin-inline: auto;
}
.pg-hotspot {
  position: relative;
  width: 100%;
  line-height: 1.6;
  border-radius: var(--pg-hotspot-radius, 0px);
  overflow: visible;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pg-hotspot__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: var(--pg-hotspot-radius, 0px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.pg-hotspot__point {
  position: absolute;
  z-index: 4;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.09)),
    rgba(22,24,28,.28);
  color: rgba(255,255,255,.99);
  font: 700 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.36), 0 0 1px rgba(0,0,0,.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
  box-shadow:
    0 9px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(0,0,0,.14),
    0 0 0 2px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(145%) brightness(.78) contrast(1.10);
  -webkit-backdrop-filter: blur(10px) saturate(145%) brightness(.78) contrast(1.10);
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.pg-hotspot__point::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: transparent;
}
.pg-hotspot__point::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 5px;
  right: 5px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0));
  pointer-events: none;
  opacity: .92;
}
.pg-hotspot__point:hover,
.pg-hotspot__point.is-active {
  transform: translate(-50%,-50%) scale(1.08);
  border-color: rgba(255,255,255,.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.12)),
    rgba(20,22,26,.34);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.16),
    0 0 0 2px rgba(255,255,255,.24),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(255,255,255,.10);
}
.pg-hotspot__point:focus-visible {
  outline: 3px solid rgba(17,17,17,.24);
  outline-offset: 3px;
}
.pg-hotspot__card {
  position: absolute;
  z-index: 8;
  width: min(288px, calc(100% - 24px));
  padding: 14px 15px 14px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60));
  color: #1f2937;
  box-shadow:
    0 16px 40px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.pg-hotspot__card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: 15px 15px 13px 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
  pointer-events: none;
}
.pg-hotspot__card[hidden] { display: none !important; }
.pg-hotspot__card.is-right { transform: translate(calc(18px + var(--pg-hotspot-shift-x, 0px)), calc(-10px + var(--pg-hotspot-shift-y, 0px))); }
.pg-hotspot__card.is-left { transform: translate(calc(-100% - 18px + var(--pg-hotspot-shift-x, 0px)), calc(-10px + var(--pg-hotspot-shift-y, 0px))); }
.pg-hotspot__card.is-below { margin-top: 18px; }
.pg-hotspot__card.is-above { margin-top: -18px; }
.pg-hotspot__card.is-right.is-above { transform: translate(calc(18px + var(--pg-hotspot-shift-x, 0px)), calc(-100% - 10px + var(--pg-hotspot-shift-y, 0px))); }
.pg-hotspot__card.is-left.is-above { transform: translate(calc(-100% - 18px + var(--pg-hotspot-shift-x, 0px)), calc(-100% - 10px + var(--pg-hotspot-shift-y, 0px))); }
.pg-hotspot__card.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pg-hotspot__card-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: #5f6f83;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.pg-hotspot__card-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  margin-bottom: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.pg-hotspot__card-title {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}
.pg-hotspot__card-description {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.72;
}
.pg-hotspot__card-description.is-placeholder {
  color: #94a3b8;
  font-style: italic;
}

@media (max-width: 767px) {
  .pg-hotspot-wrap.is-mobile-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .pg-hotspot-wrap.is-mobile-full > .pg-hotspot { width: 100%; }
  .pg-hotspot__point {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .pg-hotspot__point::before { inset: -8px; }
  /*
   * スマホはポイントが左右端にあってもカードを画像中央基準にする。
   * PCの「ポイントの左右に出す」体験は維持しつつ、狭い画面だけ確実にはみ出しを防ぐ。
   */
  .pg-hotspot__card {
    left: 50% !important;
    width: min(264px, calc(100% - 16px), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 13px 14px;
    border-radius: 14px;
    margin-top: 0 !important;
  }
  .pg-hotspot__card::before {
    border-radius: 13px 13px 11px 11px;
  }
  .pg-hotspot__card.is-right,
  .pg-hotspot__card.is-left,
  .pg-hotspot__card.is-right.is-below,
  .pg-hotspot__card.is-left.is-below {
    transform: translate(-50%, calc(14px + var(--pg-hotspot-shift-y, 0px)));
  }
  .pg-hotspot__card.is-right.is-above,
  .pg-hotspot__card.is-left.is-above {
    transform: translate(-50%, calc(-100% - 14px + var(--pg-hotspot-shift-y, 0px)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hotspot__point,
  .pg-hotspot__card { transition: none !important; }
}