/* 丸五市場 個店ページ（スライドショーのあるお店）用の追加スタイル
   shop.css の後に読み込む。写真に乗る英字ロゴの位置は、各ページの HTML に
   CSS 変数で書く（--x / --y / --w は PC の px、--sx / --sy / --sw はスマホの 320px 組みでの値）。 */

.shp-slides .shp-logo-a,
.shp-slides .shp-logo-b {
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
}
/* 代替フォントの字幅を元の書体に近づける（Yellowtail は細く小さめ、Oswald は太く広め） */
.shp-slides .shp-logo-a { font-size: 50px; }
.shp-slides .shp-logo-b { font-weight: 300; letter-spacing: -3px; padding-top: 12px; }
/* ハヤシ日用品店は2行に折り返し、行の間隔が広い */
.p-hayashi .shp-slides .shp-logo-b { line-height: 119px; padding-top: 0; }

/* 丸い送り点: 11px の枠を 23px 間隔で並べ、今の1枚は輪、ほかは小さな白丸 */
.shp-slides .shp-dots { bottom: 26px; gap: 12px; }
.shp-slides .shp-dots button,
.shp-slides .shp-dots button[aria-current="true"] {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3px, rgba(255, 255, 255, 0) 3.6px);
}
.shp-slides .shp-dots button[aria-current="true"] { background: none; box-shadow: inset 0 0 0 2px #fff; }

@media (max-width: 767px) {
  .shp-slides .shp-logo-a,
  .shp-slides .shp-logo-b {
    left: calc(var(--sx) * var(--u));
    top: calc(var(--sy) * var(--u));
    width: calc(var(--sw) * var(--u));
    overflow-wrap: anywhere;
  }
  .shp-slides .shp-logo-a { font-size: calc(51 * var(--u)); line-height: calc(76 * var(--u)); }
  .shp-slides .shp-logo-b { font-size: calc(65 * var(--u)); line-height: calc(96 * var(--u)); padding-top: calc(5 * var(--u)); letter-spacing: calc(-2.4 * var(--u)); }
  .p-hayashi .shp-slides .shp-logo-b { line-height: calc(96 * var(--u)); padding-top: calc(5 * var(--u)); }
  .shp-slides .shp-dots { bottom: calc(19 * var(--u)); gap: calc(12 * var(--u)); }
  .shp-slides .shp-dots button,
  .shp-slides .shp-dots button[aria-current="true"] { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  .shp-slides .shp-dots button { background: radial-gradient(circle, #fff 0 calc(3 * var(--u)), rgba(255, 255, 255, 0) calc(3.4 * var(--u))); }
  .shp-slides .shp-dots button[aria-current="true"] { background: none; }
}