@charset "UTF-8";

/* =========================================================
   OUTDOOR × Usual Things LP
   ベイクルーズルール準拠：すべての記述を .box-wrapper 配下に限定
   ブレークポイント：750px（≤750=SP / ≥751=PC）
   PC: Figma 1440幅をベースに 100vw でリキッドレスポンシブ
   SP: Figma 390幅をベースに 100vw でリキッドレスポンシブ
   ========================================================= */

/* ---------- 変数 / トークン（:root で全要素スコープに定義） ---------- */
:root {
  --color-bg: #000000;
  --color-accent: #fff100;
  --font-en: "futura-pt", "Futura PT", "Futura", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --s: calc(100vw / 1440);
}

@media screen and (max-width: 750px) {
  :root {
    --s: calc(100vw / 390);
  }
}

.box-wrapper {
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  color: var(--color-accent);
  font-family: var(--font-en);
  overflow: hidden;
}

/* モーダルページでは overflow:hidden を外してスクロールできるようにする */
body.is-modal-page .box-wrapper {
  overflow: visible;
}

.box-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

.box-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.box-wrapper a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 表示切替ヘルパ ---------- */
.box-wrapper .is-pc { display: inline; }
.box-wrapper .is-sp { display: none; }

/* =========================================================
   FV  （PC: 1440×1003）
   ========================================================= */
.box-wrapper .fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1003;
  overflow: hidden;
}

.box-wrapper .fv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.box-wrapper .fv__bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-wrapper .fv__diner {
  position: absolute;
  left: calc(120 / 1440 * 100%);
  bottom: calc(80 / 1003 * 100%);
  width: calc(323 / 1440 * 100%);
  aspect-ratio: 323 / 848;
  animation: fv-diner-reveal 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

.box-wrapper .fv__diner img {
  width: 100%;
  height: 100%;
}

@keyframes fv-diner-reveal {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .box-wrapper .fv__diner {
    animation: none;
  }
}

.box-wrapper .fv__logo {
  position: absolute;
  right: calc(56 / 1440 * 100%);
  bottom: calc(80 / 1003 * 100%);
  width: calc(249.66 / 1440 * 100%);
  aspect-ratio: 249.66 / 118.13;
}

.box-wrapper .fv__logo img {
  width: 100%;
  height: 100%;
}

/* =========================================================
   COLLAGE  (img-box: 1328幅, pt 120, gap 8)
   ========================================================= */
.box-wrapper .collage {
  width: calc(1328 * var(--s));
  margin: 0 auto;
  padding-top: calc(120 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
}

.box-wrapper .collage__row {
  display: flex;
  gap: calc(8 * var(--s));
  align-items: center;
}

.box-wrapper .collage__row--2 {
  align-items: flex-start;
}

.box-wrapper .collage__col {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
}

/* ---------- Cell 共通 ---------- */
.box-wrapper .cell {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.box-wrapper .cell > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
  transition: transform 0.6s ease;
}

.box-wrapper .cell:hover > img {
  transform: scale(1.04);
}

.box-wrapper .cell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 29.4%;
  background: linear-gradient(155.47deg, rgba(0, 0, 0, 0) 48.96%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

/* b2 (14-2.jpg) / c1 (10-1.jpg) はモーダル無しなのでグラデーション・ホバー無し・カーソル通常 */
.box-wrapper .cell--b2::before,
.box-wrapper .cell--c1::before {
  display: none;
}
.box-wrapper .cell--b2,
.box-wrapper .cell--c1 {
  cursor: default;
}
.box-wrapper .cell--b2:hover > img,
.box-wrapper .cell--c1:hover > img {
  transform: none;
}

.box-wrapper .cell__plus {
  position: absolute;
  right: calc(15 * var(--s));
  bottom: calc(15 * var(--s));
  width: calc(24 * var(--s));
  height: calc(24 * var(--s));
  pointer-events: none;
  z-index: 2;
}

.box-wrapper .cell__plus img {
  width: 100%;
  height: 100%;
}

/* ---------- Grid A (2×3): row3 は 14-3 (785) ---------- */
.box-wrapper .collage__grid--a {
  display: grid;
  grid-template-columns: repeat(2, calc(260 * var(--s)));
  grid-template-rows: calc(388 * var(--s)) calc(388 * var(--s)) calc(785 * var(--s));
  gap: calc(8 * var(--s));
}

.box-wrapper .cell--a1 { grid-column: 1; grid-row: 1; }
.box-wrapper .cell--a2 { grid-column: 1; grid-row: 2; }
.box-wrapper .cell--a3 { grid-column: 1 / span 2; grid-row: 3; }
.box-wrapper .cell--a4 { grid-column: 2; grid-row: 1; }
.box-wrapper .cell--a5 { grid-column: 2; grid-row: 2; }

/* ---------- Grid B (3×2): row1 は 10-3 (1182) ---------- */
.box-wrapper .collage__grid--b {
  display: grid;
  grid-template-columns: repeat(3, calc(258 * var(--s)));
  grid-template-rows: calc(1182 * var(--s)) calc(385 * var(--s));
  gap: calc(8 * var(--s));
}

.box-wrapper .cell--b1 { grid-column: 1 / span 3; grid-row: 1; }
.box-wrapper .cell--b2 { grid-column: 1; grid-row: 2; }
.box-wrapper .cell--b3 { grid-column: 2; grid-row: 2; }
.box-wrapper .cell--b4 { grid-column: 3; grid-row: 2; }

/* ---------- Grid C / D (3×2) ---------- */
.box-wrapper .collage__grid--c,
.box-wrapper .collage__grid--d {
  display: grid;
  grid-template-columns: repeat(3, calc(258 * var(--s)));
  grid-template-rows: repeat(2, calc(385 * var(--s)));
  gap: calc(8 * var(--s));
}

.box-wrapper .cell--c1 { grid-column: 1; grid-row: 2; }
.box-wrapper .cell--c2 { grid-column: 1; grid-row: 1; }
.box-wrapper .cell--c3 { grid-column: 2 / span 2; grid-row: 1 / span 2; }

.box-wrapper .cell--d1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.box-wrapper .cell--d2 { grid-column: 3; grid-row: 1; }
.box-wrapper .cell--d3 { grid-column: 3; grid-row: 2; }

/* ---------- Grid E (2×4) ---------- */
.box-wrapper .collage__grid--e {
  display: grid;
  grid-template-columns: repeat(2, calc(258 * var(--s)));
  grid-template-rows: repeat(4, calc(385 * var(--s)));
  gap: calc(8 * var(--s));
}

.box-wrapper .cell--e1 { grid-column: 1; grid-row: 1; }
.box-wrapper .cell--e2 { grid-column: 2; grid-row: 1; }
.box-wrapper .cell--e3 { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.box-wrapper .cell--e4 { grid-column: 1; grid-row: 4; }
.box-wrapper .cell--e5 { grid-column: 2; grid-row: 4; }

/* =========================================================
   QR + CREDITS
   ========================================================= */
.box-wrapper .qr-sec {
  padding-top: calc(120 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--s));
}

.box-wrapper .qr-sec__img {
  width: calc(340 * var(--s));
}

.box-wrapper .qr-sec__img img {
  width: 100%;
  height: auto;
}

.box-wrapper .qr-sec__credits {
  display: flex;
  gap: calc(4 * var(--s));
  font-family: var(--font-en);
  font-weight: 450;
  font-size: calc(12 * var(--s));
  line-height: normal;
  color: var(--color-accent);
  white-space: nowrap;
}

.box-wrapper .qr-sec__credits p {
  margin: 0;
}

/* =========================================================
   SHOP LIST
   ========================================================= */
.box-wrapper .shoplist {
  padding-top: calc(80 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-wrapper .shoplist__heading {
  width: calc(1100 * var(--s));
  padding: calc(12 * var(--s)) 0;
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-wrapper .shoplist__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(32 * var(--s));
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin: 0;
}

.box-wrapper .shoplist__body {
  width: calc(942 * var(--s));
  padding-top: calc(48 * var(--s));
  display: flex;
  gap: calc(48 * var(--s));
}

.box-wrapper .shoplist__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--s));
  justify-content: center;
}

.box-wrapper .shoplist__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--s));
}

.box-wrapper .shoplist__num {
  font-family: var(--font-en);
  font-weight: 450;
  font-size: calc(20 * var(--s));
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin: 0;
  flex-shrink: 0;
}

.box-wrapper .shoplist__info {
  flex: 1;
  padding: calc(2 * var(--s)) 0 calc(2 * var(--s)) calc(16 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
  border-left: 1px solid var(--color-accent);
}

.box-wrapper .shoplist__shop {
  font-family: var(--font-en);
  font-weight: 450;
  font-size: calc(20 * var(--s));
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin: 0;
}

.box-wrapper .shoplist__address {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: calc(12 * var(--s));
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0;
}

.box-wrapper .shoplist__tel {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: calc(12 * var(--s));
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0;
}

/* =========================================================
   COPY
   ========================================================= */
.box-wrapper .copy {
  padding: calc(120 * var(--s)) 0 calc(80 * var(--s));
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-wrapper .copy__txt {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(14 * var(--s));
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
}

/* =========================================================
   MODAL OVERLAY (index.html 内): cell の + クリックで :target 発火
   背景 rgba(0,0,0,0.7) 70% 黒, 縦スクロール, × ボタン追従固定
   Figma 3:1562 : list 880 幅 gap 80 / item 880×635 画像左 商品右 bottom-align
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  padding: calc(80 * var(--s)) 0;
  -webkit-overflow-scrolling: touch;
}

/* いずれかの modal__item が :target の時にオーバーレイ表示 */
body:has(.modal__item:target) .modal-overlay {
  display: block;
}

/* モーダル表示中は背面（index）のスクロールを止める */
html:has(.modal__item:target),
body:has(.modal__item:target) {
  overflow: hidden;
}

.modal-overlay__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  cursor: pointer;
}

/* × ボタン (追従、右上固定、白) */
.modal-overlay__close {
  position: fixed;
  top: calc(24 * var(--s));
  right: calc(32 * var(--s));
  z-index: 1002;
  width: calc(88 * var(--s));
  height: calc(88 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(80 * var(--s));
  line-height: 1;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.modal-overlay__close:hover { opacity: 0.7; }

.modal-overlay__inner {
  position: relative;
  z-index: 1;
  width: calc(880 * var(--s));
  margin: 0 auto;
  padding: calc(80 * var(--s)) 0;
}

.modal__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--s));
}

.modal__item {
  width: 100%;
  display: flex;
  gap: calc(48 * var(--s));
  align-items: flex-end;
  scroll-margin-top: calc(80 * var(--s));
}

.modal__img {
  width: calc(423 * var(--s));
  aspect-ratio: 423 / 635;
  overflow: hidden;
  flex-shrink: 0;
}

.modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal__info {
  flex: 1;
  min-width: 0;
}

.modal__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.modal__product {
  width: 100%;
  padding: calc(8 * var(--s)) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(16 * var(--s));
  border-bottom: 1px dashed var(--color-accent);
}

.modal__product-name {
  font-family: "din-alternate", "DIN Alternate", var(--font-en);
  font-weight: 700;
  font-size: calc(14 * var(--s));
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-accent);
  margin: 0;
}

.box-wrapper .modal__buy,
.modal__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--s)) calc(6 * var(--s));
  font-family: "din-2014", "DIN 2014", var(--font-en);
  font-weight: 400;
  font-size: calc(12 * var(--s));
  line-height: 1;
  color: #000;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.modal__buy:hover { opacity: 0.8; }


/* =========================================================
   SP  (≤ 750px)
   Figma SPカンプ (node 14:2431) 実測値そのまま
   スケール変数 --s = 100vw / 390
   ========================================================= */
@media screen and (max-width: 750px) {
  .box-wrapper {
    --s: calc(100vw / 390);
  }

  .box-wrapper .is-pc { display: none; }
  .box-wrapper .is-sp { display: inline; }

  /* ----- FV (14:2862: 390×591) ----- */
  .box-wrapper .fv {
    aspect-ratio: 390 / 591;
  }

  .box-wrapper .fv__bg img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Diner title (14:2864: 139×365 at 24,29) */
  .box-wrapper .fv__diner {
    left: calc(24 / 390 * 100%);
    top: calc(29 / 591 * 100%);
    right: auto;
    bottom: auto;
    width: calc(139 / 390 * 100%);
    height: calc(365 / 591 * 100%);
    aspect-ratio: auto;
  }

  /* OUTDOOR logo (14:2900: 110×52 at 260,499) */
  .box-wrapper .fv__logo {
    left: calc(260 / 390 * 100%);
    top: calc(499 / 591 * 100%);
    right: auto;
    bottom: auto;
    width: calc(110 / 390 * 100%);
    height: calc(52 / 591 * 100%);
    aspect-ratio: auto;
  }

  /* ----- img-box (14:2484: 390幅, pt 80, gap 6) ----- */
  .box-wrapper .collage {
    width: 100%;
    padding-top: calc(80 * var(--s));
    gap: calc(6 * var(--s));
  }

  /* flex (14:2485 / 14:2579): 縦並び, gap 6 */
  .box-wrapper .collage__row {
    flex-direction: column;
    gap: calc(6 * var(--s));
    width: 100%;
    align-items: center;
  }

  .box-wrapper .collage__row--2 {
    align-items: center;
  }

  /* column (14:2580 / 14:2644): 縦並び, gap 6 */
  .box-wrapper .collage__col {
    gap: calc(6 * var(--s));
    width: 100%;
  }

  /* plus アイコン (SP: 17.7×17.7 = 大きいセル / 11.8×11.8 = 小さいセル。統一的に 18 と 12 で割り当て) */
  .box-wrapper .cell__plus {
    right: calc(10 * var(--s));
    bottom: calc(10 * var(--s));
    width: calc(17.7 * var(--s));
    height: calc(17.7 * var(--s));
  }

  /* 小セル（grid B/C/D 内）の plus は小さい */
  .box-wrapper .collage__grid--b .cell__plus,
  .box-wrapper .collage__grid--c .cell:not(.cell--c3) .cell__plus,
  .box-wrapper .collage__grid--d .cell:not(.cell--d1) .cell__plus {
    width: calc(11.8 * var(--s));
    height: calc(11.8 * var(--s));
  }

  /* ===== Grid A (14:2486: 2×3, cell 192×286, row3 14-3 が 582) ===== */
  .box-wrapper .collage__grid--a {
    grid-template-columns: repeat(2, calc(192 * var(--s)));
    grid-template-rows: calc(286 * var(--s)) calc(286 * var(--s)) calc(582 * var(--s));
    gap: calc(6 * var(--s));
  }

  /* ===== Grid B (14:2538: 3×2, cell 126×188, row1 10-3 が 582) ===== */
  .box-wrapper .collage__grid--b {
    grid-template-columns: repeat(3, calc(126 * var(--s)));
    grid-template-rows: calc(582 * var(--s)) calc(188 * var(--s));
    gap: calc(6 * var(--s));
  }

  /* ===== Grid C (14:2581: 3×2, cell 126×188), Grid D (14:2613: 3×2) ===== */
  .box-wrapper .collage__grid--c,
  .box-wrapper .collage__grid--d {
    grid-template-columns: repeat(3, calc(126 * var(--s)));
    grid-template-rows: repeat(2, calc(188 * var(--s)));
    gap: calc(6 * var(--s));
  }

  /* ===== Grid E (14:2645: 2×4, cell 192×286.5) ===== */
  .box-wrapper .collage__grid--e {
    grid-template-columns: repeat(2, calc(192 * var(--s)));
    grid-template-rows: repeat(4, calc(286.5 * var(--s)));
    gap: calc(6 * var(--s));
  }

  /* ----- sec (14:2696): padding 80 上下 ----- */
  /* QR sec (14:2697) */
  .box-wrapper .qr-sec {
    padding-top: calc(80 * var(--s));
    gap: calc(32 * var(--s));
  }

  .box-wrapper .qr-sec__img {
    width: calc(340 * var(--s));
    max-width: 100%;
  }

  /* credits (14:2924: 185幅, VERTICAL, gap 4, 中央配置) */
  .box-wrapper .qr-sec__credits {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 * var(--s));
    text-align: left;
    width: calc(185 * var(--s));
    font-size: calc(12 * var(--s));
  }

  .box-wrapper .qr-sec__credits p br {
    display: none;
  }

  /* SP: 縦並びなので区切り "|" は非表示 */
  .box-wrapper .qr-sec__credits .qr-sec__sep {
    display: none;
  }

  /* ----- SHOP LIST (14:2815) ----- */
  .box-wrapper .shoplist {
    padding: calc(80 * var(--s)) calc(24 * var(--s)) 0;
  }

  /* heading (23:1695): 342幅(=390-24-24), padding 10 上下 */
  .box-wrapper .shoplist__heading {
    width: 100%;
    padding: calc(10 * var(--s)) 0;
  }

  .box-wrapper .shoplist__title {
    font-size: calc(26 * var(--s));
  }

  /* list (23:1698): padding-top 40, gap 40, 縦2カラム */
  .box-wrapper .shoplist__body {
    width: 100%;
    flex-direction: column;
    gap: calc(40 * var(--s));
    padding-top: calc(40 * var(--s));
  }

  .box-wrapper .shoplist__col {
    width: 100%;
    gap: calc(40 * var(--s));
  }

  /* item (23:1700): HORIZONTAL, gap 20 */
  .box-wrapper .shoplist__item {
    gap: calc(20 * var(--s));
  }

  .box-wrapper .shoplist__num {
    font-size: calc(20 * var(--s));
  }

  .box-wrapper .shoplist__info {
    padding: calc(2 * var(--s)) 0 calc(2 * var(--s)) calc(16 * var(--s));
    gap: calc(10 * var(--s));
  }

  .box-wrapper .shoplist__shop {
    font-size: calc(18 * var(--s));
  }

  .box-wrapper .shoplist__address {
    font-size: calc(12 * var(--s));
  }

  .box-wrapper .shoplist__tel {
    font-size: calc(12 * var(--s));
  }

  /* ----- copy sec (14:2858): pt 120 のみ、sec 側に pb 80 ----- */
  .box-wrapper .copy {
    padding: calc(120 * var(--s)) 0 calc(80 * var(--s));
  }

  .box-wrapper .copy__txt {
    font-size: calc(14 * var(--s));
  }

  /* ----- MODAL OVERLAY (SP: 画像上 / リスト下 縦積み) ----- */
  .modal-overlay {
    padding: calc(60 * var(--s)) 0;
  }

  .modal-overlay__close {
    top: calc(16 * var(--s));
    right: calc(16 * var(--s));
    width: calc(56 * var(--s));
    height: calc(56 * var(--s));
    font-size: 0; /* SP は疑似要素でラインを描画（Safari でも太さ一定） */
  }
  .modal-overlay__close::before,
  .modal-overlay__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: calc(3 * var(--s));
    background: #fff;
    border-radius: calc(2 * var(--s));
  }
  .modal-overlay__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .modal-overlay__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .modal-overlay__inner {
    width: 100%;
    padding: calc(60 * var(--s)) calc(24 * var(--s));
  }

  .modal__list {
    gap: calc(120 * var(--s));
  }

  .modal__item {
    flex-direction: column;
    align-items: stretch;
    gap: calc(24 * var(--s));
  }

  .modal__img {
    width: 100%;
    aspect-ratio: 423 / 635;
  }

  .modal__product {
    padding: calc(8 * var(--s)) 0;
  }

  .modal__product-name {
    font-size: calc(14 * var(--s));
  }

  .modal__buy {
    padding: calc(2 * var(--s)) calc(6 * var(--s));
    font-size: calc(12 * var(--s));
  }
}

/* =========================================================
   MODAL SLIDER (modal-1 から順次適用): .modal__img 内を Swiper 化
   .modal__img の既存サイズ (width / aspect-ratio) をそのまま継承、
   Swiper 内部構造だけ中を埋めるように記述
   ========================================================= */
.modal__slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.modal__slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.modal__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal__slider .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.modal__slider .swiper-pagination-bullet-active {
  background: #fff;
}