/* ===== Reset (scoped to .kara40) ===== */
.kara40 *,
.kara40 *::before,
.kara40 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
@media (min-width: 769px) {
  .sp-only {
    display: none;
  }
}

/*
 * Easing function
 * Original：http://easings.net/
 */
:root {
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
  
  --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== Base ===== */
.kara40 {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  background: #04B0E0 url(/recommend/karaagekun40th/img/bg.webp) repeat;
  background-size: 80vw 80vw;
  color: #333;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.kara40-container {
  max-width: 750px; /* px */
  margin: 0 auto;
  position: relative;
}

/* .kara40 img {
  max-width: 100%;
  height: auto;
  display: block;
} */

/* ===== Decoration (shared) ===== */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* ===== Section Heading (shared) ===== */
.section-heading {
  font-size: 8vw;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10.667vw;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6vw;
  color: #000;
}

.section-heading span {
  display: inline-block;
}

.section-heading-img {
  display: block;
  margin: 0 auto;
  height: 7.467vw;
  width: auto;
}

.section-title--contact .section-heading-img {
  height: 13.333vw;
}

.heading-star {
  width: 6.933vw;
  height: 6.933vw;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .kara40 {
    background-size: 20.833vw 20.833vw;
  }

  .kara40-container {
    max-width: 1920px; /* px */
    margin: 0 auto;
    position: relative;
  }

  .section-heading {
    font-size: 2.778vw;
    margin-bottom: 2.778vw;
    gap: 0.417vw;
  }

  .section-heading-img {
    margin: 0 auto;
    height: 2.083vw;
  }

  .section-title--contact .section-heading-img {
    height: 3.472vw;
  }
  

  .heading-star {
    width: 2.361vw;
    height: 2.361vw;
  }
}
@media (min-width: 1920px) {
  .kara40 {
    background-size: 400px 400px;
  }
  .section-heading {
    font-size: 53.333px;
    margin-bottom: 53.333px;
    gap: 8px;
  }
  .section-heading-img {
    height: 40px;
  }
  .section-title--contact .section-heading-img {
    height: 66.667px;
  }
  .heading-star {
    width: 45.333px;
    height: 45.333px;
  }
}

/* ===== Section: Hero Bar ===== */
.section-hero-bar {
  /* no-vw */
  width: 100%;
  height: 60px;
  overflow: hidden;
  
  z-index: 10;
  position: relative;
}

.section-hero-bar__inner {
  position: relative;
  transform: translateY(-16vw);
  background-color: #FFD900;
}

.hero-bar-track {
  /* no-vw */
  display: flex;
  width: max-content;
  animation: hero-bar-scroll 46s linear infinite;
}

.hero-bar-img {
  /* no-vw */
  display: block;
  width: auto;
  height: 60px;
  flex-shrink: 0;
  margin-right: 30px;
}

@keyframes hero-bar-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .hero-bar-track {
    /* no-vw */
    animation-duration: 32s;
  }
}

/* ===== Section: Hero ===== */
.section-hero {
  position: relative;
  padding: 0;
}

/* Hero paper confetti (PC — display:none by default, block on PC) */
.hero-paper {
  position: absolute;
  pointer-events: none;
  /* z-index: 2; */
  display: none;
}
.hero-paper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero paper confetti SP (Figma: paper 635:2658, 375px base) */
.hero-paper-sp {
  position: absolute;
  pointer-events: none;
  /* z-index: 2; */
}
.hero-paper-sp img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-paper-sp1  { left: 8.8vw;  top: 69.333vw; width: 3.733vw; }
.hero-paper-sp2  { left: 86.133vw; top: 58.667vw; width: 3.733vw; }
.hero-paper-sp3  { left: 89.333vw; top: 126.933vw; width: 4.8vw; transform: rotate(15.62deg); }
.hero-paper-sp4  { left: 3.733vw;  top: 79.2vw; width: 4.267vw; }
.hero-paper-sp5  { left: 89.067vw; top: 68.533vw; width: 4.267vw; }
.hero-paper-sp6  { left: 77.067vw; top: 83.733vw; width: 3.2vw; transform: rotate(149.58deg); }
.hero-paper-sp7  { left: 93.067vw; top: 143.2vw; width: 5.867vw; transform: rotate(15.08deg); }
.hero-paper-sp8  { left: 18.933vw;  top: 134.4vw; width: 7.733vw; transform: rotate(7.08deg); }
.hero-paper-sp9  { left: 74.933vw; top: 88.533vw; width: 7.733vw; transform: rotate(7.08deg); }
.hero-paper-sp10 { left: 96.267vw; top: 128.8vw; width: 7.733vw; transform: rotate(7.08deg); }
.hero-paper-sp11 { left: 11.467vw;  top: 130.667vw; width: 5.333vw; transform: rotate(15.04deg); }
.hero-paper-sp12 { left: 91.2vw; top: 117.867vw; width: 5.333vw; transform: rotate(15.04deg); }

.hero-inner {
  position: relative;
  z-index: 1;
  height: 230.933vw;
}
.hero-inner > * {
  opacity: 0;
}

.hero-logo {
  width: 69.333vw;
  max-width: 70%;
  margin: 0 auto;
}

.hero-item {
  position: absolute;
  pointer-events: none;
}
.hero-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero decorations */
.hero-logo {
  width: 46.667vw;
  top: 6.933vw;
  left: 11.733vw;
}
.hero-logo2 {
  width: 21.333vw;
  top: 3.467vw;
  right: 15.2vw;
}
.hero-fireworks1 {
  width: 26.133vw;
  top: 29.867vw;
  left: calc(50% + 2.667vw);
  transform: rotate(27.5deg) translateX(-50%);
}
.hero-fireworks2 {
  width: 16.267vw;
  top: 94.4vw;
  left: -2.133vw;
  transform: rotate(-2.94deg);
}
.hero-fireworks3 {
  width: 38.933vw;
  top: 138.667vw;
  left: 32.8vw;
  transform: rotate(-2.94deg);
}
.hero-ribbon1 {
  width: 80.8vw;
  top: 61.067vw;
  left: -36.533vw;
  transform: rotate(-22.77deg);
}
.hero-ribbon2 {
  width: 36.8vw;
  top: 61.6vw;
  right: -8.533vw;
  transform: rotate(0.49deg);
}
.hero-ribbon3 {
  width: 54.133vw;
  bottom: 9.333vw;
  right: -24.267vw;
}
.hero-ribbon4 {
  width: 18.667vw;
  bottom: 35.733vw;
  right: 39.2vw;
  transform: rotate(-81.24deg);
}
.hero-star {
  width: 6.133vw;
  top: 193.067vw;
  left: 38.667vw;
  transform: rotate(-22.87deg);
}
.hero-karaage1 {
  width: 20.533vw;
  top: 47.467vw;
  left: -7.467vw;
  transform: rotate(29.65deg);
}
.hero-karaage2 {
  width: 16.533vw;
  top: 80vw;
  right: 1.867vw;
  transform: rotate(30deg);
}
.hero-karaage3 {
  width: 27.2vw;
  top: 110.933vw;
  left: -13.333vw;
  transform: rotate(-29.3deg);
}
.hero-karaage4 {
  width: 21.333vw;
  top: 135.733vw;
  left: 29.067vw;
  transform: rotate(30deg);
}
.hero-karaage5 {
  width: 52.267vw;
  top: 183.2vw;
  left: -14.933vw;
  transform: rotate(-30deg);
}
.hero-karaagekun1 {
  width: 35.733vw;
  top: 133.333vw;
  left: -0.533vw;
  transform: rotate(-22deg);
}
.hero-karaagekun2 {
  width: 17.867vw;
  top: 28.267vw;
  left: 17.867vw;
  transform: rotate(-25deg);
}
.hero-karaagekun3 {
  width: 18.933vw;
  top: 26.667vw;
  right: 11.467vw;
  transform: rotate(20deg);
}
.hero-karaagekun4 {
  width: 24.267vw;
  top: 123.733vw;
  right: 6.133vw;
  transform: rotate(22deg);
}
.hero-confetti-ball-left {
  width: 104.533vw;
  top: -5.6vw;
  left: -69.333vw;
  transform-origin: right 10%;
}
.hero-confetti-ball-right {
  width: 104.533vw;
  top: -6.4vw;
  right: -70.4vw;
  transform-origin: left 10%;
}
.hero-package {
  width: 69.333vw;
  top: 64vw;
  left: 50%;
  transform: translateX(-50%);
}
.hero-badge {
  width: 42.667vw;
  height: 42.667vw;
  position: absolute;
  bottom: 20vw;
  right: 1.867vw;
  z-index: 1;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 50%;
  transition: transform 1s var(--easeOutExpo);
}
.hero-badge:hover {
  transform: scale(1.03);
}
.hero-badge:hover:before {
  transform: scale(1.2) rotate(10deg);
}
.hero-badge:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(/recommend/karaagekun40th/img/badge-bg.svg) no-repeat center center / cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s var(--easeOutExpo);
}
.hero-badge img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}


.hero-banner {
  text-align: center;
  padding: 15.467vw 7.2vw 16.8vw 7.467vw;
  background: #fff url(/recommend/karaagekun40th/img/banner-bg-sp.webp) no-repeat center center / contain;
  border-radius: 5.333vw;
  margin-bottom: 12.8vw;
  overflow: hidden;
}

.hero-banner__title {
  width: 69.067vw;
  margin: 0 auto 9.333vw; 
}
.hero-banner__title img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-banner__list {
  width: 85.333vw;
  margin: 0 auto;
}
.hero-banner__list .swiper-pagination {
  position: relative;
  margin-top: 6.4vw;
  bottom: auto !important;
  top: auto !important;
  display: flex;
  justify-content: center;
  gap: 5.333vw;
}
.hero-banner__list .swiper-pagination-bullets {
  
}
.hero-banner__list .swiper-pagination-bullet {
  width: 4.267vw;
  height: 4.267vw;
  margin: 0 !important;
}
.hero-banner__list .swiper-pagination-bullet-active {
  background: #E60012;
}
.hero-banner__list.swiper {
  overflow: visible;
}

.hero-banner__list .swiper-wrapper {
  transition-timing-function: ease-in-out;
}
.hero-banner__list .swiper-slide {
  /* border-radius: 6px; */
  /* overflow: hidden; */
}
.hero-banner__list .swiper-slide a {
  overflow: hidden;
  border-radius: 1.6vw;
  display: block;
}

.hero-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-hero {

  }

  .hero-inner {
    height: 63.333vw;
  }

  .hero-banner {
    padding: 5.278vw 4.444vw 3.75vw;
    background: #fff url(/recommend/karaagekun40th/img/banner-bg-pc.webp) no-repeat center center / cover;
    border-radius: 1.944vw;
    margin: 0 auto;
    overflow: hidden;
    max-width: 71.111vw;
    z-index: 3;
    position: relative;
  }

  .hero-banner__title {
    width: 28.125vw;
    margin: 0 auto 3.681vw; 
  }

  /* PC: Swiper無効化 — スライドを横並び */
  .hero-banner__list .swiper-wrapper {
    display: flex;
    gap: 1.944vw;
    justify-content: center;
  }
  .hero-banner__list .swiper-pagination {
    display: none;
  }
  .hero-banner__list.swiper {
    overflow: visible;
    width: auto;
  }
  .hero-banner__list .swiper-slide {
    /* border-radius: 12px; */
    width: 31.25% !important;
    margin: 0 !important;
  }
  .hero-banner__list .swiper-slide a {
    border-radius: 0.833vw;
  }

  .hero-package {
    width: 30.625vw;
    top: 9.514vw;
  }

  /* Hero decorations */
  .hero-logo {
    width: 15vw;
    top: 1.319vw;
    left: 0.694vw;
  }
  .hero-logo2 {
    width: 8.333vw;
    top: 0.694vw;
    right: 1.389vw;
  }
  .hero-fireworks1 {
    width: 13.889vw;
    top: -4.028vw;
    left: 30.972vw;
    transform: rotate(0deg);
  }
  .hero-fireworks2 {
    width: 5.417vw;
    top: 20.764vw;
    left: 62.431vw;
    transform: rotate(0deg);
  }
  .hero-fireworks3 {
    width: 16.458vw;
    top: 51.944vw;
    left: 7.361vw;
    transform: rotate(-3.03deg);
  }
  .hero-fireworks4 {
    width: 11.528vw;
    top: 41.111vw;
    left: 50.208vw;
    transform: rotate(0deg);
  }
  .hero-fireworks5 {
    width: 19.514vw;
    top: 47.708vw;
    left: 69.931vw;
    transform: rotate(0deg);
  }
  /* red1 ribbon */
  .hero-ribbon1 {
    width: 12.5vw;
    top: 14.931vw;
    left: 18.403vw;
    transform: rotate(0deg);
  }
  /* yellow2 ribbon */
  .hero-ribbon2 {
    width: 4.861vw;
    top: 2.083vw;
    right: 26.597vw;
    transform: rotate(-28.66deg);
  }
  /* red2 ribbon */
  .hero-ribbon3 {
    width: 3.403vw;
    top: 41.181vw;
    bottom: auto;
    left: 38.75vw;
    right: auto;
    transform: rotate(69.49deg);
  }
  /* red1 ribbon */
  .hero-ribbon4 {
    width: 4.514vw;
    top: 37.083vw;
    bottom: auto;
    right: 26.667vw;
    transform: rotate(-82.52deg);
  }
  /* yellow2 ribbon */
  .hero-ribbon5 {
    width: 4.236vw;
    top: 43.125vw;
    bottom: auto;
    right: 26.875vw;
    transform: rotate(0deg);
  }
  /* yellow2 ribbon */
  .hero-ribbon6 {
    width: 9.306vw;
    top: 51.389vw;
    right: 35.972vw;
    transform: rotate(-20.13deg);
  }
  /* yellow1 ribbon */
  .hero-ribbon7 {
    width: 10.417vw;
    bottom: 0.208vw;
    left: 32.361vw;
    transform: rotate(-5.81deg);
  }
  /* yellow1 ribbon */
  .hero-ribbon8 {
    width: 17.5vw;
    top: 6.389vw;
    left: -0.903vw;
    transform: rotate(45.39deg);
  }
  /* red1 ribbon */
  .hero-ribbon9 {
    width: 42.917vw;
    top: 34.444vw;
    left: -9.792vw;
    transform: rotate(-15.3deg);
  }
  /* red1 ribbon */
  .hero-ribbon10 {
    width: 39.653vw;
    top: 9.167vw;
    right: -3.889vw;
    transform: rotate(178.2deg) scaleY(-1);
  }
  .hero-star {
    width: 1.875vw;
    top: 51.042vw;
    left: 46.806vw;
    transform: rotate(-30.47deg);
  }
  .hero-karaage1 {
    width: 6.944vw;
    top: 18.611vw;
    left: 21.944vw;
    transform: rotate(30deg);
  }
  .hero-karaage2 {
    width: 18.75vw;
    top: 40.139vw;
    left: 19.444vw;
    right: auto;
    transform: rotate(-30deg);
    z-index: 1;
  }
  .hero-karaage3 {
    width: 5.972vw;
    top: 26.736vw;
    right: 24.514vw;
    left: auto;
    transform: rotate(30deg);
  }
  .hero-karaage4 {
    width: 5.556vw;
    top: 49.236vw;
    right: 32.986vw;
    left: auto;
    transform: rotate(16deg);
  }
  .hero-karaage5 {
    width: 24.514vw;
    top: 37.361vw;
    left: 78.681vw;
    transform: rotate(15deg);
  }
  .hero-karaagekun1 {
    width: 12.778vw;
    top: 27.569vw;
    left: 9.514vw;
    transform: rotate(-22deg);
  }
  .hero-karaagekun2 {
    width: 7.153vw;
    top: 4.861vw;
    left: 26.181vw;
    transform: rotate(-25deg);
  }
  .hero-karaagekun3 {
    width: 8.125vw;
    top: 8.889vw;
    right: 21.806vw;
    transform: rotate(20deg);
  }
  .hero-karaagekun4 {
    width: 8.75vw;
    top: 22.917vw;
    right: 12.153vw;
    transform: rotate(22deg);
  }
  .hero-confetti-ball-left {
    width: 40.278vw;
    top: -7.847vw;
    left: -11.319vw;
  }
  .hero-confetti-ball-right {
    width: 40.278vw;
    top: -8.056vw;
    right: -12.014vw;
  }
  .hero-badge {
    width: 13.889vw;
    height: 13.889vw;
    top: 35.486vw;
    bottom: auto;
    right: 0.694vw;
  }

  /* SP紙吹雪を非表示 */
  .hero-paper-sp { display: none; }

  /* 紙吹雪 (Figma: paper 621:2971, PC 1440px base) */
  .hero-paper { display: block; }
  .hero-paper1  { left: 50.694vw; top: 4.306vw; width: 1.111vw; }
  .hero-paper2  { left: 61.25vw; top: 2.153vw; width: 1.319vw; }
  .hero-paper3  { left: 54.861vw; top: 4.792vw; width: 1.319vw; }
  .hero-paper4  { left: 55.347vw; top: -1.458vw; width: 4.236vw; }
  .hero-paper5  { left: 59.514vw; top: 17.986vw; width: 2.083vw; }
  .hero-paper6  { left: 60.069vw; top: 14.375vw; width: 1.319vw; }
  .hero-paper7  { left: 5.486vw;  top: 30.347vw; width: 2.014vw; transform: rotate(-171.85deg); }
  .hero-paper8  { left: 33.194vw; top: 24.722vw; width: 1.042vw; transform: rotate(-171.85deg); }
  .hero-paper9  { left: -0.486vw;  top: 32.847vw; width: 3.889vw; transform: rotate(33.59deg); }
  .hero-paper10 { left: 31.528vw; top: 27.361vw; width: 2.222vw; transform: rotate(33.59deg); }
  .hero-paper11 { left: 7.5vw; top: 31.458vw; width: 2.292vw; transform: rotate(36.53deg); }
  .hero-paper12 { left: 41.667vw; top: 45.347vw; width: 1.111vw; transform: rotate(30.46deg); }
  .hero-paper13 { left: 45.139vw; top: 54.653vw; width: 1.111vw; transform: rotate(-2.53deg); }
  .hero-paper14 { left: 46.875vw; top: 49.653vw; width: 1.319vw; transform: rotate(-179.74deg); }
  .hero-paper15 { left: 47.778vw; top: 55.556vw; width: 1.319vw; transform: rotate(6.90deg); }
  .hero-paper16 { left: 58.056vw; top: 53.403vw; width: 1.319vw; transform: rotate(30.65deg); }
  .hero-paper17 { left: 66.042vw; top: 39.514vw; width: 1.319vw; transform: rotate(19.84deg); }
  .hero-paper18 { left: 76.528vw; top: 42.083vw; width: 2.431vw; transform: rotate(6.81deg); }
  .hero-paper19 { left: 61.319vw; top: 43.056vw; width: 1.042vw; transform: rotate(148.37deg); }
  .hero-paper20 { left: 56.944vw; top: 52.014vw; width: 1.319vw; transform: rotate(149.05deg); }
  .hero-paper21 { left: 42.708vw; top: 50.764vw; width: 2.153vw; transform: rotate(32.00deg); }
  .hero-paper22 { left: 65.972vw; top: 47.569vw; width: 2.153vw; transform: rotate(8.13deg); }
  .hero-paper23 { left: 93.819vw; top: 44.167vw; width: 4.375vw; transform: rotate(8.13deg); }
  .hero-paper24 { left: 64.167vw; top: 44.306vw; width: 2.153vw; transform: rotate(28.30deg); }
  .hero-paper25 { left: 93.056vw; top: 27.917vw; width: 2.292vw; transform: rotate(9.30deg); }
  .hero-paper26 { left: 61.111vw; top: 55.625vw; width: 1.319vw; }
  .hero-paper27 { left: 49.375vw; top: 49.028vw; width: 1.319vw; transform: rotate(35.98deg); }
  .hero-paper28 { left: 62.222vw; top: 40.208vw; width: 1.319vw; transform: rotate(18.13deg); }
  .hero-paper29 { left: 91.597vw; top: 23.472vw; width: 1.319vw; transform: rotate(18.13deg); }
  .hero-paper30 { left: 90.903vw; top: 36.528vw; width: 2.431vw; transform: rotate(18.13deg); }
}
@media (min-width: 1920px) {
  .hero-inner {
    height: 1216px;
  }
  .hero-banner {
    padding: 101.333px 85.333px 72px;
    border-radius: 37.333px;
    max-width: 1365.333px;
  }
  .hero-banner__title {
    width: 540px;
    margin: 0 auto 70.667px;
  }
  .hero-banner__list .swiper-wrapper {
    gap: 37.333px;
  }
  .hero-banner__list .swiper-slide a {
    border-radius: 16px;
  }
  .hero-package {
    width: 588px;
    top: 182.667px;
  }
  .hero-logo {
    width: 288px;
    top: 25.333px;
    left: 13.333px;
  }
  .hero-logo2 {
    width: 160px;
    top: 13.333px;
    right: 26.667px;
  }
  .hero-fireworks1 {
    width: 266.667px;
    top: -77.333px;
    left: 594.667px;
  }
  .hero-fireworks2 {
    width: 104px;
    top: 398.667px;
    left: 1198.667px;
  }
  .hero-fireworks3 {
    width: 316px;
    top: 997.333px;
    left: 141.333px;
  }
  .hero-fireworks4 {
    width: 221.333px;
    top: 789.333px;
    left: 964px;
  }
  .hero-fireworks5 {
    width: 374.667px;
    top: 916px;
    left: 1342.667px;
  }
  .hero-ribbon1 {
    width: 240px;
    top: 286.667px;
    left: 353.333px;
  }
  .hero-ribbon2 {
    width: 93.333px;
    top: 40px;
    right: 510.667px;
  }
  .hero-ribbon3 {
    width: 65.333px;
    top: 790.667px;
    left: 744px;
  }
  .hero-ribbon4 {
    width: 86.667px;
    top: 712px;
    right: 512px;
  }
  .hero-ribbon5 {
    width: 81.333px;
    top: 828px;
    right: 516px;
  }
  .hero-ribbon6 {
    width: 178.667px;
    top: 986.667px;
    right: 690.667px;
  }
  .hero-ribbon7 {
    width: 200px;
    bottom: 4px;
    left: 621.333px;
  }
  .hero-ribbon8 {
    width: 336px;
    top: 122.667px;
    left: -17.333px;
  }
  .hero-ribbon9 {
    width: 824px;
    top: 661.333px;
    left: -188px;
  }
  .hero-ribbon10 {
    width: 761.333px;
    top: 176px;
    right: -74.667px;
  }
  .hero-star {
    width: 36px;
    top: 980px;
    left: 898.667px;
  }
  .hero-karaage1 {
    width: 133.333px;
    top: 357.333px;
    left: 421.333px;
  }
  .hero-karaage2 {
    width: 360px;
    top: 770.667px;
    left: 373.333px;
  }
  .hero-karaage3 {
    width: 114.667px;
    top: 513.333px;
    right: 470.667px;
  }
  .hero-karaage4 {
    width: 106.667px;
    top: 945.333px;
    right: 633.333px;
  }
  .hero-karaage5 {
    width: 470.667px;
    top: 717.333px;
    left: 1510.667px;
  }
  .hero-karaagekun1 {
    width: 245.333px;
    top: 529.333px;
    left: 182.667px;
  }
  .hero-karaagekun2 {
    width: 137.333px;
    top: 93.333px;
    left: 502.667px;
  }
  .hero-karaagekun3 {
    width: 156px;
    top: 170.667px;
    right: 418.667px;
  }
  .hero-karaagekun4 {
    width: 168px;
    top: 440px;
    right: 233.333px;
  }
  .hero-confetti-ball-left {
    width: 773.333px;
    top: -150.667px;
    left: -217.333px;
  }
  .hero-confetti-ball-right {
    width: 773.333px;
    top: -154.667px;
    right: -230.667px;
  }
  .hero-badge {
    width: 266.667px;
    height: 266.667px;
    top: 681.333px;
    right: 13.333px;
  }
  .hero-paper1 {
    left: 973.333px;
    top: 82.667px;
    width: 21.333px;
  }
  .hero-paper2 {
    left: 1176px;
    top: 41.333px;
    width: 25.333px;
  }
  .hero-paper3 {
    left: 1053.333px;
    top: 92px;
    width: 25.333px;
  }
  .hero-paper4 {
    left: 1062.667px;
    top: -28px;
    width: 81.333px;
  }
  .hero-paper5 {
    left: 1142.667px;
    top: 345.333px;
    width: 40px;
  }
  .hero-paper6 {
    left: 1153.333px;
    top: 276px;
    width: 25.333px;
  }
  .hero-paper7 {
    left: 105.333px;
    top: 582.667px;
    width: 38.667px;
  }
  .hero-paper8 {
    left: 637.333px;
    top: 474.667px;
    width: 20px;
  }
  .hero-paper9 {
    left: -9.333px;
    top: 630.667px;
    width: 74.667px;
  }
  .hero-paper10 {
    left: 605.333px;
    top: 525.333px;
    width: 42.667px;
  }
  .hero-paper11 {
    left: 144px;
    top: 604px;
    width: 44px;
  }
  .hero-paper12 {
    left: 800px;
    top: 870.667px;
    width: 21.333px;
  }
  .hero-paper13 {
    left: 866.667px;
    top: 1049.333px;
    width: 21.333px;
  }
  .hero-paper14 {
    left: 900px;
    top: 953.333px;
    width: 25.333px;
  }
  .hero-paper15 {
    left: 917.333px;
    top: 1066.667px;
    width: 25.333px;
  }
  .hero-paper16 {
    left: 1114.667px;
    top: 1025.333px;
    width: 25.333px;
  }
  .hero-paper17 {
    left: 1268px;
    top: 758.667px;
    width: 25.333px;
  }
  .hero-paper18 {
    left: 1469.333px;
    top: 808px;
    width: 46.667px;
  }
  .hero-paper19 {
    left: 1177.333px;
    top: 826.667px;
    width: 20px;
  }
  .hero-paper20 {
    left: 1093.333px;
    top: 998.667px;
    width: 25.333px;
  }
  .hero-paper21 {
    left: 820px;
    top: 974.667px;
    width: 41.333px;
  }
  .hero-paper22 {
    left: 1266.667px;
    top: 913.333px;
    width: 41.333px;
  }
  .hero-paper23 {
    left: 1801.333px;
    top: 848px;
    width: 84px;
  }
  .hero-paper24 {
    left: 1232px;
    top: 850.667px;
    width: 41.333px;
  }
  .hero-paper25 {
    left: 1786.667px;
    top: 536px;
    width: 44px;
  }
  .hero-paper26 {
    left: 1173.333px;
    top: 1068px;
    width: 25.333px;
  }
  .hero-paper27 {
    left: 948px;
    top: 941.333px;
    width: 25.333px;
  }
  .hero-paper28 {
    left: 1194.667px;
    top: 772px;
    width: 25.333px;
  }
  .hero-paper29 {
    left: 1758.667px;
    top: 450.667px;
    width: 25.333px;
  }
  .hero-paper30 {
    left: 1745.333px;
    top: 701.333px;
    width: 46.667px;
  }
}

@keyframes hero-banner-hover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.4vw);
  }
  100% {
    transform: translateY(0);
  }
}

@media (hover: hover) {
  .swiper-slide {
    overflow: visible;
  }
  .swiper-slide a {
    padding-bottom: 56.25%;
    display: block;
    position: relative;
  }
  .swiper-slide a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper-slide a:hover {
    /* opacity: 0.5; */
    animation: hero-banner-hover 0.3s ease-in-out;
  }
}

/* ===== Section: About ===== */
.section-about {
  position: relative;
  text-align: center;
}

.about-inner {
  position: relative;
  padding: 40vw 0 98.933vw;
  margin-bottom: -24.533vw;
}

.about-fireworks1 {
  width: 28.8vw;
  top: 0;
  left: 29.067vw;
}
.about-fireworks2 {
  width: 49.6vw;
  top: 230.4vw;
  left: 3.733vw;
}
.about-ribbon1 {
  width: 62.133vw;
  top: 11.467vw;
  left: -38.133vw;
  transform: rotate(58.79deg);
}
.about-ribbon2 {
  width: 126.4vw;
  top: 26.933vw;
  right: -65.867vw;
  transform: rotate(-81.82deg);
}
.about-ribbon3 {
  width: 60.267vw;
  top: 181.333vw;
  left: -24vw;
  transform: rotate(-39.82deg);
}
.about-karaage1 {
  width: 21.067vw;
  top: 76.8vw;
  left: -6.933vw;
  transform: rotate(15deg);
}
.about-karaage2 {
  width: 21.067vw;
  top: 184.267vw;
  left: 42.667vw;
  transform: rotate(15deg);
}
.about-karaage3 {
  width: 44.533vw;
  top: 197.333vw;
  right: -5.333vw;
  transform: rotate(-22.87deg);
}
.about-karaagekun1 {
  width: 28.533vw;
  top: 177.067vw;
  left: 7.467vw;
  transform: rotate(-21.5deg);
}
.about-karaagekun2 {
  width: 16.8vw;
  top: 164.267vw;
  right: 4.8vw;
  transform: rotate(19.75deg);
}

/* About paper confetti PC (display:none by default, block on PC) */
.about-paper {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.about-paper img {
  width: 100%;
  height: auto;
  display: block;
}

/* About paper confetti SP (Figma: paper 635:2747, 375px base) */
.about-paper-sp {
  position: absolute;
  pointer-events: none;
  /* z-index: 2; */
}
.about-paper-sp img {
  width: 100%;
  height: auto;
  display: block;
}
.about-paper-sp1  { left: 3.2vw;  top: 106.667vw; width: 3.733vw; }
.about-paper-sp2  { left: 91.2vw; top: 55.733vw; width: 3.733vw; }
.about-paper-sp3  { left: 11.467vw;  top: 140.533vw; width: 4.267vw; }
.about-paper-sp4  { left: 82.933vw; top: 79.2vw; width: 4.8vw; }
.about-paper-sp5  { left: 85.867vw; top: 94.667vw; width: 3.2vw; transform: rotate(148.01deg); }
.about-paper-sp6  { left: 6.133vw;  top: 134.933vw; width: 3.2vw; transform: rotate(150.09deg); }
.about-paper-sp7  { left: -2.4vw;  top: 184.533vw; width: 8.8vw; transform: rotate(12.67deg); }
.about-paper-sp8  { left: 88.267vw; top: 138.933vw; width: 8.8vw; transform: rotate(12.67deg); }
.about-paper-sp9  { left: 2.667vw;  top: 162.133vw; width: 5.067vw; transform: rotate(16.91deg); }
.about-paper-sp10 { left: 93.333vw; top: 123.2vw; width: 5.067vw; transform: rotate(16.91deg); }

.about-subtitle {
  display: block;
  margin: 0 auto 4.8vw;
  position: relative;
}

.about-subtitle-img {
  display: block;
  width: 70.133vw;
  margin: 0 auto;
  height: auto;
}

.about-title {
  display: block;
  margin: 0 auto 8vw;
  position: relative;
}

.about-title-img {
  display: block;
  width: 79.733vw;
  height: auto;
  margin: 0 auto;
}

.about-text1 {
  width: 79.467vw;
  height: 9.067vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text1 .about-messages-img {
  width: 75.733vw;
  height: auto;
  margin: 0 auto;
}
.about-messages-underline {
  clip-path: inset(0 100% 0 0);
}
.about-text1 .about-messages-underline {
  width: 23.733vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 37.333vw;
}
.about-text2 {
  width: 85.867vw;
  height: 9.6vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text2 .about-messages-img {
  width: 81.6vw;
  height: auto;
  margin: 0 auto;
}
.about-text2 .about-messages-underline {
  width: 30.933vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 37.333vw;
}
.about-text3 {
  width: 82.133vw;
  height: 9.6vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text3 .about-messages-img {
  width: 82.133vw;
  height: auto;
  margin: 0 auto;
}
.about-text3 .about-messages-underline {
  width: 32.267vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 34.667vw;
}
.about-text4 {
  width: 37.067vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text4 .about-messages-img {
  width: 100%;
  height: auto;
}
.about-text5 {
  width: 66.667vw;
  height: 10.133vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text5 .about-messages-img {
  width: 66.667vw;
  height: auto;
  margin: 0 auto;
}
.about-text5 .about-messages-underline {
  width: 67.2vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: -0.533vw;
}
.about-text6 {
  width: 50.133vw;
  height: 4vw;
  margin: 0 auto 4.267vw;
  position: relative;
}
.about-text6 .about-messages-img {
  width: 100%;
  height: auto;
}
.about-text7 {
  width: 28.533vw;
  height: 8vw;
  margin: 0 auto;
  position: relative;
}
.about-text7 .about-messages-img {
  width: 100%;
  height: auto;
}

.about-history {
  margin-top: 8vw;
}

.about-highlight em {
  font-size: 6.4vw;
}

/* About decorations */
.section-about .deco-character-left {
  width: 35%;
  bottom: -5%;
  left: -5%;
}

.section-about .deco-character-right {
  width: 25%;
  bottom: -5%;
  right: -5%;
}

.section-about .deco-confetti-about {
  width: 100%;
  top: 0;
  left: 0;
}

.white-bg {
  background-color: #fff;
  padding: 0;
}
.white-bg__bottom {
  width: 100%;
  padding-bottom: 25.333333%;
  margin-top: -0.267vw;
  background: url(/recommend/karaagekun40th/img/white-bg-bottom.svg) no-repeat bottom left / cover;
  position: relative;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-about {
    padding: 0;
  }

  .about-inner {
    padding: 11.111vw 0 1.389vw;
    margin-bottom: 0;
    /* margin-bottom: -92px; */
  }

  .about-fireworks1 {
    width: 11.25vw;
    top: 8.125vw;
    left: -1.181vw;
  }
  .about-fireworks2 {
    width: 12.778vw;
    top: 72.361vw;
    left: 37.361vw;
  }
  /* yellow2 ribbon */
  .about-ribbon1 {
    width: 19.167vw;
    top: 16.806vw;
    left: -5vw;
    transform: rotate(64.85deg);
    z-index: 1;
  }
  /* red1 ribbon */
  .about-ribbon2 {
    width: 39.861vw;
    top: 20.972vw;
    right: -16.458vw;
    transform: rotate(-81.27deg);
    z-index: 1;
  }
  /* red1 ribbon */
  .about-ribbon3 {
    width: 22.5vw;
    top: 50vw;
    left: -5vw;
    transform: rotate(-10.53deg);
  }
  /* brown2 ribbon */
  .about-ribbon4 {
    width: 6.25vw;
    top: 23.264vw;
    left: 73.958vw;
    transform: rotate(0deg);
  }
  /* yellow1 ribbon */
  .about-ribbon5 {
    width: 11.667vw;
    top: 70.069vw;
    left: 4.931vw;
    transform: rotate(-102.78deg);
  }
  /* yellow1 ribbon */
  .about-ribbon6 {
    width: 11.667vw;
    top: 60.903vw;
    right: 25.139vw;
    transform: rotate(-56.13deg);
  }
  .about-star {
    width: 2.847vw;
    top: 4.236vw;
    left: 55.764vw;
    transform: rotate(-18.51deg);
  }
  .about-karaage1 {
    width: 12.361vw;
    top: 27.708vw;
    left: 1.319vw;
    transform: rotate(-31.88deg);
  }
  .about-karaage2 {
    width: 10.972vw;
    top: 34.236vw;
    right: 1.806vw;
    left: auto;
    transform: rotate(15deg);
  }
  .about-karaagekun1 {
    width: 10.694vw;
    top: 57.639vw;
    left: 12.153vw;
    transform: rotate(-12.43deg);
  }
  .about-karaagekun2 {
    width: 6.736vw;
    top: 50.347vw;
    right: 17.847vw;
    transform: rotate(19.75deg);
  }
  

  .about-subtitle {
    margin: 0 auto 3.125vw;
  }

  .about-subtitle-img {
    width: 43.889vw;
  }

  .about-title {
    margin: 0 auto 4.167vw;
  }

  .about-title-img {
    width: 59.931vw;
  }

  .about-text1 {
    width: 38.472vw;
    height: 4.514vw;
    margin: 0 auto 2.292vw;
    position: relative;
  }
  .about-text1 .about-messages-img {
    width: 38.472vw;
    height: auto;
    margin: 0 auto;
  }
  .about-text1 .about-messages-underline {
    width: 11.389vw;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 18.056vw;
  }
  .about-text2 {
    width: 41.597vw;
    height: 4.514vw;
    margin: 0 auto 2.292vw;
    position: relative;
  }
  .about-text2 .about-messages-img {
    width: 41.597vw;
    height: auto;
    margin: 0 auto;
  }
  .about-text2 .about-messages-underline {
    width: 14.861vw;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 18.056vw;
  }
  .about-text3 {
    width: 41.597vw;
    height: 4.514vw;
    margin: 0 auto 2.292vw;
    position: relative;
  }
  .about-text3 .about-messages-img {
    width: 41.597vw;
    height: auto;
    margin: 0 auto;
  }
  .about-text3 .about-messages-underline {
    width: 14.861vw;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 18.056vw;
  }
  .about-text4 {
    width: 17.917vw;
    margin: 0 auto 1.944vw;
    position: relative;
  }
  .about-text4 .about-messages-img {
    width: 100%;
    height: auto;
  }
  .about-text5 {
    width: 32.292vw;
    height: 5.069vw;
    margin: 0 auto 2.292vw;
    position: relative;
  }
  .about-text5 .about-messages-img {
    width: 32.292vw;
    height: auto;
    margin: 0 auto;
  }
  .about-text5 .about-messages-underline {
    width: 32.292vw;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .about-text6 {
    width: 23.611vw;
    height: 1.944vw;
    margin: 0 auto 2.5vw;
    position: relative;
  }
  .about-text6 .about-messages-img {
    width: 100%;
    height: auto;
  }
  .about-text7 {
    width: 13.472vw;
    height: 2.083vw;
    margin: 0 auto;
    position: relative;
  }
  .about-text7 .about-messages-img {
    width: 100%;
    height: auto;
  }

  /* SP紙吹雪を非表示 */
  .about-paper-sp { display: none; }

  /* 紙吹雪 (Figma: paper 621:3128, PC 1440px base) */
  .about-paper { display: block; }
  .about-paper1  { left: 18.403vw;  top: 26.111vw; width: 2.431vw; }
  .about-paper2  { left: 81.042vw; top: 25.347vw; width: 2.292vw; }
  .about-paper3  { left: 86.042vw; top: 48.542vw; width: 2.292vw; }
  .about-paper4  { left: 21.25vw;  top: 55.903vw; width: 2.083vw; }
  .about-paper5  { left: 28.889vw;  top: 7.569vw; width: 1.736vw; transform: rotate(156.14deg); }
  .about-paper6  { left: 25.069vw;  top: 30.417vw; width: 2.917vw; transform: rotate(1.17deg); }
  .about-paper7  { left: 82.778vw; top: 34.444vw; width: 2.569vw; transform: rotate(1.17deg); }
  .about-paper8  { left: 92.361vw; top: 53.056vw; width: 2.569vw; transform: rotate(1.17deg); }
  .about-paper9  { left: 29.722vw;  top: 58.333vw; width: 2.708vw; transform: rotate(1.17deg); }
  .about-paper10 { left: 19.236vw;  top: 38.681vw; width: 1.944vw; transform: rotate(145.54deg); }
  .about-paper11 { left: 75.694vw; top: 39.653vw; width: 1.944vw; transform: rotate(145.54deg); }
  .about-paper12 { left: 84.236vw; top: 59.514vw; width: 1.944vw; transform: rotate(145.54deg); }
  .about-paper13 { left: 22.014vw;  top: 67.708vw; width: 1.944vw; transform: rotate(145.54deg); }
  .about-paper14 { left: 20.208vw;  top: 6.806vw; width: 4.722vw; }
  .about-paper15 { left: 19.931vw;  top: 42.639vw; width: 4.722vw; }
  .about-paper16 { left: 75.833vw; top: 42.847vw; width: 4.375vw; }
  .about-paper17 { left: 81.111vw; top: 65.417vw; width: 4.375vw; }
  .about-paper18 { left: 31.111vw;  top: 69.167vw; width: 4.722vw; }
  .about-paper19 { left: 47.083vw;  top: 3.958vw; width: 2.083vw; }
  .about-paper20 { left: 20.833vw;  top: 33.819vw; width: 2.778vw; }
  .about-paper21 { left: 79.375vw; top: 36.944vw; width: 2.778vw; }
  .about-paper22 { left: 88.125vw; top: 56.389vw; width: 2.778vw; }
  .about-paper23 { left: 25.208vw;  top: 61.25vw; width: 2.778vw; }

  .white-bg__bottom {
    width: 100%;
    padding-bottom: 20.27777778%;
    margin-top: -0.069vw;
    background: url(/recommend/karaagekun40th/img/white-bg-bottom-pc.svg) no-repeat bottom left / cover;
    position: relative;
  }
}
@media (min-width: 1920px) {
  .about-inner {
    padding: 213.333px 0 26.667px;
  }
  .about-fireworks1 {
    width: 216px;
    top: 156px;
    left: -22.667px;
  }
  .about-fireworks2 {
    width: 245.333px;
    top: 1389.333px;
    left: 717.333px;
  }
  .about-ribbon1 {
    width: 368px;
    top: 322.667px;
    left: -96px;
  }
  .about-ribbon2 {
    width: 765.333px;
    top: 402.667px;
    right: -316px;
  }
  .about-ribbon3 {
    width: 432px;
    top: 960px;
    left: -96px;
  }
  .about-ribbon4 {
    width: 120px;
    top: 446.667px;
    left: 1420px;
  }
  .about-ribbon5 {
    width: 224px;
    top: 1345.333px;
    left: 94.667px;
  }
  .about-ribbon6 {
    width: 224px;
    top: 1169.333px;
    right: 482.667px;
  }
  .about-star {
    width: 54.667px;
    top: 81.333px;
    left: 1070.667px;
  }
  .about-karaage1 {
    width: 237.333px;
    top: 532px;
    left: 25.333px;
  }
  .about-karaage2 {
    width: 210.667px;
    top: 657.333px;
    right: 34.667px;
  }
  .about-karaagekun1 {
    width: 205.333px;
    top: 1106.667px;
    left: 233.333px;
  }
  .about-karaagekun2 {
    width: 129.333px;
    top: 966.667px;
    right: 342.667px;
  }
  .about-subtitle {
    margin: 0 auto 60px;
  }
  .about-subtitle-img {
    width: 842.667px;
  }
  .about-title {
    margin: 0 auto 80px;
  }
  .about-title-img {
    width: 1150.667px;
  }
  .about-text1 {
    width: 738.667px;
    height: 86.667px;
    margin: 0 auto 44px;
  }
  .about-text1 .about-messages-img {
    width: 738.667px;
  }
  .about-text1 .about-messages-underline {
    width: 218.667px;
    left: 346.667px;
  }
  .about-text2 {
    width: 798.667px;
    height: 86.667px;
    margin: 0 auto 44px;
  }
  .about-text2 .about-messages-img {
    width: 798.667px;
  }
  .about-text2 .about-messages-underline {
    width: 285.333px;
    left: 346.667px;
  }
  .about-text3 {
    width: 798.667px;
    height: 86.667px;
    margin: 0 auto 44px;
  }
  .about-text3 .about-messages-img {
    width: 798.667px;
  }
  .about-text3 .about-messages-underline {
    width: 285.333px;
    left: 346.667px;
  }
  .about-text4 {
    width: 344px;
    margin: 0 auto 37.333px;
  }
  .about-text5 {
    width: 620px;
    height: 97.333px;
    margin: 0 auto 44px;
  }
  .about-text5 .about-messages-img {
    width: 620px;
  }
  .about-text5 .about-messages-underline {
    width: 620px;
    left: 0;
  }
  .about-text6 {
    width: 453.333px;
    height: 37.333px;
    margin: 0 auto 48px;
  }
  .about-text7 {
    width: 258.667px;
    height: 40px;
  }
  .about-paper1 {
    left: 353.333px;
    top: 501.333px;
    width: 46.667px;
  }
  .about-paper2 {
    left: 1556px;
    top: 486.667px;
    width: 44px;
  }
  .about-paper3 {
    left: 1652px;
    top: 932px;
    width: 44px;
  }
  .about-paper4 {
    left: 408px;
    top: 1073.333px;
    width: 40px;
  }
  .about-paper5 {
    left: 554.667px;
    top: 145.333px;
    width: 33.333px;
  }
  .about-paper6 {
    left: 481.333px;
    top: 584px;
    width: 56px;
  }
  .about-paper7 {
    left: 1589.333px;
    top: 661.333px;
    width: 49.333px;
  }
  .about-paper8 {
    left: 1773.333px;
    top: 1018.667px;
    width: 49.333px;
  }
  .about-paper9 {
    left: 570.667px;
    top: 1120px;
    width: 52px;
  }
  .about-paper10 {
    left: 369.333px;
    top: 742.667px;
    width: 37.333px;
  }
  .about-paper11 {
    left: 1453.333px;
    top: 761.333px;
    width: 37.333px;
  }
  .about-paper12 {
    left: 1617.333px;
    top: 1142.667px;
    width: 37.333px;
  }
  .about-paper13 {
    left: 422.667px;
    top: 1300px;
    width: 37.333px;
  }
  .about-paper14 {
    left: 388px;
    top: 130.667px;
    width: 90.667px;
  }
  .about-paper15 {
    left: 382.667px;
    top: 818.667px;
    width: 90.667px;
  }
  .about-paper16 {
    left: 1456px;
    top: 822.667px;
    width: 84px;
  }
  .about-paper17 {
    left: 1557.333px;
    top: 1256px;
    width: 84px;
  }
  .about-paper18 {
    left: 597.333px;
    top: 1328px;
    width: 90.667px;
  }
  .about-paper19 {
    left: 904px;
    top: 76px;
    width: 40px;
  }
  .about-paper20 {
    left: 400px;
    top: 649.333px;
    width: 53.333px;
  }
  .about-paper21 {
    left: 1524px;
    top: 709.333px;
    width: 53.333px;
  }
  .about-paper22 {
    left: 1692px;
    top: 1082.667px;
    width: 53.333px;
  }
  .about-paper23 {
    left: 484px;
    top: 1176px;
    width: 53.333px;
  }
  .white-bg__bottom {
    margin-top: -1.333px;
  }
}

/* ===== Section: Campaign ===== */
.section-campaign {
  position: relative;
  padding: 25.6vw 0 0;
  text-align: center;
  color: #000;
  background-color: #fff;
  /* overflow: hidden; */
  margin-top: -0.267vw;
}

.campaign-top {
  width: 100%;
  height: 86.4vw;
  background: url(/recommend/karaagekun40th/img/campaign-bg1.svg) no-repeat bottom left / contain;
  position: relative;
  z-index: 1;
}

.campaign-karaagekun {
  width: 64vw;
  position: absolute;
  top: 0;
  right: 4.533vw;
  transform: rotate(14.58deg);
}
.campaign-fireworks1 {
  width: 42.4vw;
  top: -34.667vw;
  left: -10.933vw;
}
.campaign-fireworks2 {
  width: 40.533vw;
  top: 77.6vw;
  right: -18.667vw;
}
.campaign-ribbon1 {
  width: 38.667vw;
  top: -2.133vw;
  right: -9.867vw;
  transform: rotate(79.637deg);
}
.campaign-ribbon2 {
  width: 157.333vw;
  top: 120vw;
  left: -30.933vw;
}
.campaign-ribbon3 {
  width: 47.2vw;
  top: 216vw;
  right: -15.467vw;
  transform: rotate(-79.19deg);
}
.campaign-ribbon4 {
  width: 29.6vw;
  bottom: -9.067vw;
  left: 0;
}

.campaign-karaage1 {
  width: 42.133vw;
  bottom: 12vw;
  left: -13.867vw;
  transform: rotate(-31.25deg);
}
.campaign-karaage2 {
  width: 31.467vw;
  bottom: -12.533vw;
  right: -7.467vw;
  transform: rotate(29.69deg);
}
.campaign-karaage3 {
  width: 45.333vw;
  top: 96vw;
  left: -13.333vw;
  transform: rotate(-33.21deg);
}
.campaign-karaage4 {
  width: 45.333vw;
  top: 165.867vw;
  right: -9.333vw;
  transform: rotate(-33.21deg);
  z-index: -1;
}


.campaign-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 48vw;
  /* padding-top: 35px; */
  /* margin-top: -35px; */
}

/* Campaign paper confetti SP (Figma: paper 635:2842, 375px base) */
.campaign-paper-sp {
  position: absolute;
  pointer-events: none;
}
.campaign-paper-sp img {
  width: 100%;
  height: auto;
  display: block;
}
.campaign-paper-sp1 { left: 18.133vw;  top: 196.533vw;  width: 6.4vw; transform: rotate(53.38deg); }
.campaign-paper-sp2 { left: 20vw;  top: 217.6vw;  width: 7.733vw; transform: rotate(51.94deg); }
.campaign-paper-sp3 { left: 3.733vw;  top: 209.867vw;  width: 6.133vw; transform: rotate(-157.14deg); }
.campaign-paper-sp4 { left: -1.867vw;  top: 222.933vw;  width: 13.333vw; transform: rotate(56.47deg); }
.campaign-paper-sp5 { left: 89.6vw; top: 308.8vw; width: 5.867vw; transform: rotate(-152.82deg); }
.campaign-paper-sp6 { left: 75.733vw; top: 311.467vw; width: 13.333vw; transform: rotate(56.47deg); }

/* Campaign paper confetti PC (display:none by default, block on PC) */
.campaign-paper {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.campaign-paper img {
  width: 100%;
  height: auto;
  display: block;
}

.campaign__40thlogo {
  width: 21.333vw;
  /* height: 90px; */
  margin: 0 auto 2.133vw;
}
.campaign__40thlogo-img {
  display: block;
  width: 100%;
  height: auto;
}

.campaign-title {
  width: 74.667vw;
  margin: 0 auto 3.733vw;
}
.campaign-title img {
  display: block;
  width: 100%;
  height: auto;
}

.campaign-period {
  margin-bottom: 4vw;
  position: relative;
}

.campaign-period-label {
  background: #fdd000;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.8vw;
  font-weight: bold;
  border-radius: 4.533vw;
  letter-spacing: 0.06em;
  margin: 0 auto 4vw;
  width: 80vw;
  height: 9.6vw;
}

.campaign-period-date {
  font-size: 5.333vw;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}

.campaign-prize {
  width: 74.667vw;
  margin: 0 auto 42.133vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.campaign-prize__inner {
  width: 74.667vw;
  width: 74.667vw;
  position: relative;
  background-color: #FDFFDC;
  overflow: hidden;
  border-radius: 50%;
}
.campaign-prize__inner::before {
  content: '';
  display: block;
  background: url(/recommend/karaagekun40th/img/prize-light.svg) no-repeat center center / contain;
  position: absolute;
  top: calc(50% + 9.333vw);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  animation: spin 20s linear infinite;
  animation-play-state: paused;
}
.campaign-prize__inner.is-visible::before {
  animation-play-state: running;
}
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.campaign-prize__inner img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.campaign-karaagekun1 {
  width: 17.867vw;
  top: -4vw;
  left: -4vw;
  transform: rotate(12.41deg);
}
.campaign-karaagekun2 {
  width: 16vw;
  bottom: 0.8vw;
  right: -1.067vw;
  transform: rotate(-19.37deg);
}

.campaign-love1 {
  width: 27.08vw;
  top: 81.6vw;
  left: -7.467vw;
  transform: rotate(15.39deg);
}
.campaign-love2 {
  width: 37.672vw;
  top: 208vw;
  left: 27.733vw;
  transform: rotate(15.39deg);
}
.campaign-love3 {
  width: 50.821vw;
  bottom: 10.933vw;
  right: -4.267vw;
  transform: rotate(-29.35deg);
}

.campaign-prize > img {
  width: 100%;
  height: auto;
  display: block;
}

.campaign-description {
  width: 100%;
  margin: 0 auto;
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
  position: relative;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-campaign {
    padding: 0;
  }

  .campaign-top {
    height: 42.5vw;
    background-image: url(/recommend/karaagekun40th/img/white-bg-top-pc.svg);
    margin-bottom: -6.319vw;
  }

  .campaign-karaagekun {
    width: 30.486vw;
    top: 0;
    right: 4.375vw;
    transform: rotate(13.16deg);
  }
  .campaign-karaagekun3 {
    width: 10.903vw;
    top: 10.069vw;
    left: 25.069vw;
    transform: rotate(-9.18deg);
  }
  .campaign-fireworks1 {
    width: 18.611vw;
    top: 30.833vw;
    left: 3.958vw;
    transform: rotate(-8deg);
  }
  .campaign-fireworks2 {
    width: 21.806vw;
    top: 8.611vw;
    right: 5.347vw;
  }
  /* yellow1 ribbon */
  .campaign-ribbon1 {
    width: 20.972vw;
    top: 87.986vw;
    left: 16.25vw;
    /* transform: rotate(0deg); */
    transform: rotate(-33.37deg);
  }
  /* red1 ribbon */
  .campaign-ribbon2 {
    width: 33.472vw;
    top: -2.847vw;
    left: -9.306vw;
    transform: rotate(-17.62deg);
  }
  /* red1 ribbon */
  .campaign-ribbon3 {
    width: 143.403vw;
    top: 29.792vw;
    left: -18.681vw;
    transform: rotate(0deg);
  }
  .campaign-ribbon3-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 6.944vw);
    overflow: hidden;
  }
  /* yellow2 ribbon */
  .campaign-ribbon4 {
    width: 10.972vw;
    top: 43.472vw;
    right: 12.083vw;
    left: auto;
    transform: rotate(0deg);
  }
  .campaign-karaage1 {
    width: 17.083vw;
    top: 12.917vw;
    bottom: auto;
    left: -4.861vw;
    transform: rotate(-38.28deg);
  }
  .campaign-karaage2 {
    width: 15.556vw;
    top: 29.375vw;
    bottom: auto;
    right: -3.472vw;
    transform: rotate(29.18deg);
  }
  .campaign-karaage3 {
    width: 21.736vw;
    top: 45.139vw;
    left: 18.264vw;
    transform: rotate(-31.41deg);
  }
  .campaign-karaage4 {
    width: 20.347vw;
    top: 76.25vw;
    right: 22.153vw;
    transform: rotate(-31.41deg);
  }
  .campaign-karaage5 {
    width: 14.097vw;
    top: 10.556vw;
    right: 30.417vw;
    transform: rotate(-21.26deg);
  }
  .campaign-love2 {
    width: 26.806vw;
    top: 64.236vw;
    left: 1.875vw;
    transform: rotate(24.29deg);
  }
  .campaign-love3 {
    width: 33.125vw;
    bottom: 24.097vw;
    right: -3.264vw;
    transform: rotate(-23.86deg);
  }
  .campaign-love4 {
    width: 16.319vw;
    top: 34.167vw;
    right: 12.361vw;
    transform: rotate(-31.91deg);
  }
  .campaign-love5 {
    width: 17.639vw;
    top: 3.958vw;
    left: 23.125vw;
    transform: rotate(21.35deg);
  }

  /* SP紙吹雪を非表示 */
  .campaign-paper-sp { display: none; }

  /* 紙吹雪 PC (Figma: paper 621:3252, 1440px base) */
  .campaign-paper { display: block; }
  /* Cluster 1: left */
  .campaign-paper1  { left: 18.75vw;  top: 17.153vw;  width: 2.708vw; }
  .campaign-paper2  { left: 25.625vw;  top: 21.389vw;  width: 2.778vw; }
  .campaign-paper3  { left: 19.306vw;  top: 24.583vw;  width: 1.944vw; transform: rotate(145.31deg); }
  .campaign-paper4  { left: 22.847vw;  top: 28.889vw;  width: 5.069vw; }
  /* Cluster 2: center-right */
  .campaign-paper5  { left: 66.042vw;  top: 43.611vw;  width: 2.708vw; }
  .campaign-paper6  { left: 72.917vw; top: 47.847vw;  width: 2.778vw; }
  .campaign-paper7  { left: 66.597vw;  top: 51.042vw;  width: 1.944vw; transform: rotate(145.31deg); }
  .campaign-paper8  { left: 70.139vw; top: 55.347vw;  width: 5.069vw; }
  /* Cluster 3: bottom-left */
  .campaign-paper9  { left: 11.042vw;  top: 104.236vw; width: 2.708vw; }
  .campaign-paper10 { left: 17.917vw;  top: 108.472vw; width: 2.778vw; }
  .campaign-paper11 { left: 11.597vw;  top: 111.667vw; width: 1.944vw; transform: rotate(145.31deg); }
  .campaign-paper12 { left: 15.139vw;  top: 115.972vw; width: 5.069vw; }
  /* Cluster 4: bottom-right */
  .campaign-paper13 { left: 87.569vw; top: 103.333vw; width: 2.708vw; }
  .campaign-paper14 { left: 94.444vw; top: 107.569vw; width: 2.778vw; }
  .campaign-paper15 { left: 88.125vw; top: 110.764vw; width: 1.944vw; transform: rotate(145.31deg); }
  .campaign-paper16 { left: 91.667vw; top: 115.069vw; width: 5.069vw; }

  .campaign-inner {
    padding-bottom: 11.528vw;
  }

  .campaign__40thlogo {
    width: 11.111vw;
    margin-bottom: 2.083vw;
  }

  .campaign-title {
    font-size: 2.083vw;
    margin: 0 auto 2.083vw;
    line-height: 1.6;
    width: 30.903vw;
  }

  .campaign-period {
    margin-bottom: 2.083vw;
  }

  .campaign-period-label {
    font-size: 1.875vw;
    height: 3.472vw;
    width: 31.25vw;
    border-radius: 1.667vw;
    margin-bottom: 2.083vw;
  }

  .campaign-period-date {
    font-size: 2.083vw;
    margin-bottom: 3.611vw;
    line-height: 1.6;
  }

  .campaign-prize {
    width: 38.889vw;
    height: 38.889vw;
    margin: 0 auto 6.25vw;
  }

  .campaign-prize__inner {
    width: 38.889vw;
    height: 38.889vw;
  }
  .campaign-prize__inner::before {
    top: calc(50% + 4.167vw);
  }

  .campaign-karaagekun1 {
    width: 8.056vw;
    top: -0.833vw;
    left: 0.972vw;
  }
  .campaign-karaagekun2 {
    width: 7.153vw;
    bottom: 0.208vw;
    right: 2.222vw;
  }

  .campaign-description {
    font-size: 1.667vw;
    max-width: 45.833vw;
    line-height: 1.8;
  }
}
@media (min-width: 1920px) {
  .campaign-top {
    height: 816px;
    margin-bottom: -121.333px;
  }
  .campaign-karaagekun {
    width: 585.333px;
    top: 0;
    right: 84px;
  }
  .campaign-karaagekun3 {
    width: 209.333px;
    top: 193.333px;
    left: 481.333px;
  }
  .campaign-fireworks1 {
    width: 357.333px;
    top: 592px;
    left: 76px;
  }
  .campaign-fireworks2 {
    width: 418.667px;
    top: 165.333px;
    right: 102.667px;
  }
  .campaign-ribbon1 {
    width: 402.667px;
    top: 1689.333px;
    left: 312px;
  }
  .campaign-ribbon2 {
    width: 642.667px;
    top: -54.667px;
    left: -178.667px;
  }
  .campaign-ribbon3 {
    width: 2753.333px;
    top: 572px;
    left: -358.667px;
  }
  .campaign-ribbon3-wrapper {
    top: 0;
    left: 0;
    height: calc(100% + 133.333px);
  }
  .campaign-ribbon4 {
    width: 210.667px;
    top: 834.667px;
    right: 232px;
  }
  .campaign-karaage1 {
    width: 328px;
    top: 248px;
    left: -93.333px;
  }
  .campaign-karaage2 {
    width: 298.667px;
    top: 564px;
    right: -66.667px;
  }
  .campaign-karaage3 {
    width: 417.333px;
    top: 866.667px;
    left: 350.667px;
  }
  .campaign-karaage4 {
    width: 390.667px;
    top: 1464px;
    right: 425.333px;
  }
  .campaign-karaage5 {
    width: 270.667px;
    top: 202.667px;
    right: 584px;
  }
  .campaign-love2 {
    width: 514.667px;
    top: 1233.333px;
    left: 36px;
  }
  .campaign-love3 {
    width: 636px;
    bottom: 462.667px;
    right: -62.667px;
  }
  .campaign-love4 {
    width: 313.333px;
    top: 656px;
    right: 237.333px;
  }
  .campaign-love5 {
    width: 338.667px;
    top: 76px;
    left: 444px;
  }
  .campaign-paper1 {
    left: 360px;
    top: 329.333px;
    width: 52px;
  }
  .campaign-paper2 {
    left: 492px;
    top: 410.667px;
    width: 53.333px;
  }
  .campaign-paper3 {
    left: 370.667px;
    top: 472px;
    width: 37.333px;
  }
  .campaign-paper4 {
    left: 438.667px;
    top: 554.667px;
    width: 97.333px;
  }
  .campaign-paper5 {
    left: 1268px;
    top: 837.333px;
    width: 52px;
  }
  .campaign-paper6 {
    left: 1400px;
    top: 918.667px;
    width: 53.333px;
  }
  .campaign-paper7 {
    left: 1278.667px;
    top: 980px;
    width: 37.333px;
  }
  .campaign-paper8 {
    left: 1346.667px;
    top: 1062.667px;
    width: 97.333px;
  }
  .campaign-paper9 {
    left: 212px;
    top: 2001.333px;
    width: 52px;
  }
  .campaign-paper10 {
    left: 344px;
    top: 2082.667px;
    width: 53.333px;
  }
  .campaign-paper11 {
    left: 222.667px;
    top: 2144px;
    width: 37.333px;
  }
  .campaign-paper12 {
    left: 290.667px;
    top: 2226.667px;
    width: 97.333px;
  }
  .campaign-paper13 {
    left: 1681.333px;
    top: 1984px;
    width: 52px;
  }
  .campaign-paper14 {
    left: 1813.333px;
    top: 2065.333px;
    width: 53.333px;
  }
  .campaign-paper15 {
    left: 1692px;
    top: 2126.667px;
    width: 37.333px;
  }
  .campaign-paper16 {
    left: 1760px;
    top: 2209.333px;
    width: 97.333px;
  }
  .campaign-inner {
    padding-bottom: 221.333px;
  }
  .campaign__40thlogo {
    width: 213.333px;
    margin-bottom: 40px;
  }
  .campaign-title {
    font-size: 40px;
    margin: 0 auto 40px;
    width: 593.333px;
  }
  .campaign-period {
    margin-bottom: 40px;
  }
  .campaign-period-label {
    font-size: 36px;
    height: 66.667px;
    width: 600px;
    border-radius: 32px;
    margin-bottom: 40px;
  }
  .campaign-period-date {
    font-size: 40px;
    margin-bottom: 69.333px;
  }
  .campaign-prize {
    width: 746.667px;
    height: 746.667px;
    margin: 0 auto 120px;
  }
  .campaign-prize__inner {
    width: 746.667px;
    height: 746.667px;
  }
  .campaign-prize__inner::before {
    top: calc(50% + 80px);
  }
  .campaign-karaagekun1 {
    width: 154.667px;
    top: -16px;
    left: 18.667px;
  }
  .campaign-karaagekun2 {
    width: 137.333px;
    bottom: 4px;
    right: 42.667px;
  }
  .campaign-description {
    font-size: 32px;
    max-width: 880px;
  }
}

/* ===== Section: How to Apply ===== */
.section-how {
  position: relative;
  background: #E60012 url(/recommend/karaagekun40th/img/how-bg-sp.webp) no-repeat center center / cover;
  border-radius: 5.333vw;
  padding: 21.333vw 0 24vw;
  color: #fff;
  overflow: hidden;
  margin: 0;
  margin-bottom: 16vw;
  z-index: 1;
}


.how-inner {
  text-align: center;
}

.how-title {
  height: 11.2vw;
  display: flex;
  justify-content: center;
  margin-bottom: 8vw;
}
.how-title img {
  height: 100%;
  width: auto;
  display: inline-block;
}

.section-how .section-heading {
  color: #fff;
}

.how-content {
  padding: 0 5.867vw;
  margin-bottom: 21.333vw;
}

.how-step1,
.how-step2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3.2vw;
  margin-bottom: 5.333vw;
  border: 2px solid #fff;
  padding: 5.333vw 0 5.333vw 14.667vw;
  border-radius: 4vw;
  position: relative;
}
.how-step2 {
  padding-right: 5.867vw;
}
.how-step1-text,
.how-step2-text {
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
}
.how-step1 img,
.how-step2 img {
  width: auto;
  height: 6.4vw;
  display: block;
  position: absolute;
  left: 4.533vw;
  top: 5.867vw;
}

.how-detail {
  font-size: 3.733vw;
  font-weight: bold;
  line-height: 1.8;
  margin: 5.333vw auto 8vw;
  text-align: center;
}

/* CTA Button */
.cta-button-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8vw;
}

.cta-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88vw;
  height: 17.6vw;
  background: #FFD900;
  border-radius: 17.6vw;
  position: relative;
  margin: 0 auto;
}

.cta-button__text {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 6.933vw;
}

.cta-button__character {
  position: absolute;
  height: 100%;
  width: auto;
  right: 7.733vw;
  bottom: 0;
  z-index: 2;
}

/* CTA character decoration */
.cta-button-wrap .deco-cta-character {
  position: absolute;
  width: 18.667vw;
  right: -16vw;
  bottom: -2.667vw;
  z-index: 2;
}

.love {
  /* margin-bottom: 30px; */
}
.love-pict-title {
  width: 91.733vw;
  height: auto;
  display: block;
  margin: 0 auto 8vw;
}
.love-pict {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8vw;
  border-radius: 2.667vw;
  box-shadow: 0 0 5.333vw 2.667vw rgba(0, 0, 0, 0.30);
  overflow: hidden;
}
.love-pict-title img,
.love-pict img {
  width: 100%;
  height: auto;
  display: block;
}


/* Marquee */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.marquee {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 60s linear infinite;
}

.marquee-group {
  display: flex;
  gap: 5.333vw;
  flex-shrink: 0;
  padding-right: 5.333vw;
}

.marquee-group img {
  height: 11.2vw;
  flex-shrink: 0;
  display: block;
}

.marquee-reverse {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Sample Posts */
.sample-posts {
  display: flex;
  gap: 5.333vw;
  padding: 8vw 0;
  overflow: hidden;
}

.sample-posts-track {
  display: flex;
  width: max-content;
  animation: sample-posts-scroll 20s linear infinite;
}

.sample-posts-group {
  display: flex;
  gap: 5.333vw;
  flex-shrink: 0;
  padding-right: 5.333vw;
}

@keyframes sample-posts-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.post-card {
  flex-shrink: 0;
  width: 74.667vw;
  background: #fff;
  border-radius: 2.667vw;
  border: 1px solid #c5c5c5;
  padding: 5.867vw 4.8vw;
  color: #000;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.post-card-header {
  display: flex;
  align-items: center;
  gap: 3.2vw;
  margin-bottom: 2.667vw;
}

.post-card__content {
  padding-left: 2.133vw;
}

.post-avatar {
  width: 9.867vw;
  height: 9.867vw;
  border-radius: 50%;
  background: #5E5D5D;
  flex-shrink: 0;
}

.post-username {
  font-size: 4.267vw;
  font-weight: bold;
}

.post-text {
  font-size: 3.2vw;
  line-height: 1.9;
  margin-bottom: 2.667vw;
}

.post-hashtag {
  color: #177cff;
}

.post-image {
  width: 100%;
  border-radius: 2.667vw;
  display: block;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-how {
    border-radius: 2.778vw;
    padding: 9.167vw 0 20.347vw;
    background-image: url(/recommend/karaagekun40th/img/how-bg-pc.webp);
    margin-bottom: 8.056vw;
  }

  .how-content {
    padding: 0;
    margin: 0 auto 8.819vw;
    width: 62.5vw
  }

  .how-title {
    height: 2.917vw;
    margin-bottom: 4.167vw;
  }

  .how-step1,
  .how-step2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6.944vw;
    margin-bottom: 2.083vw;
    border: 2px solid #fff;
    padding: 0 0.278vw 0 4.167vw;
    border-radius: 1.042vw;
    position: relative;
  }
  .how-step1-text,
  .how-step2-text {
    font-size: 1.667vw;
    line-height: 1.3;
    text-align: center;
  }
  .how-step1 img,
  .how-step2 img {
    width: auto;
    height: 1.736vw;
    display: block;
    position: absolute;
    left: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
  }


  .how-detail {
    font-size: 1.25vw;
    margin: 1.389vw auto 5.556vw;
    max-width: 100%;
    line-height: 2;
  }

  .cta-button-wrap {
    margin-bottom: 5.556vw;
  }

  .cta-button {
    width: 34.722vw;
    height: 6.944vw;
    padding: 0;
    font-size: 2.083vw;
    border-radius: 4.583vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4.167vw;
  }

  @media (hover: hover) {
    .cta-button:hover {
      animation: hero-banner-hover 0.3s ease-in-out;
    }
  }

  .cta-button__text {
    height: 2.778vw;
  }

  .cta-button__character {
    height: 6.944vw;
    right: 2.986vw;
  }

  .cta-button-wrap .deco-cta-character {
    width: 6.944vw;
    right: -6.25vw;
    bottom: -1.042vw;
  }

  .love {
    
  }
  .love-pict-title {
    width: 44.306vw;
    margin: 0 auto 4.167vw;
  }
  .love-pict-link {
    width: 48.611vw;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    display: block;
  }
  .love-pict {
    width: 100%;
    margin: 0 auto;
    border-radius: 0.694vw;
    box-shadow: 0 0 2.778vw 0.694vw rgba(0, 0, 0, 0.30);
  }

  @media (hover: hover) {
    .love-pict-link:hover .love-pict {
      animation: hero-banner-hover 0.3s ease-in-out;
    }
  }

  .marquee-wrap {
    padding: 0;
    margin-top: -16.875vw;
  }

  .marquee-group {
    gap: 1.042vw;
    padding-right: 1.042vw;
  }

  .marquee-group img {
    height: 6.458vw;
  }

  .sample-posts {
    gap: 1.389vw;
    padding: 2.083vw 0;
  }
  .sample-posts-group {
    gap: 2.083vw;
    padding-right: 2.083vw;
  }

  .post-card {
    width: 29.167vw;
    border-radius: 0.694vw;
    padding: 2.292vw 1.736vw 2.361vw;
  }

  .post-card-header {
    gap: 1.181vw;
    margin-bottom: 1.111vw;
  }

  .post-card__content {
    padding-left: 0.833vw;
  }

  .post-avatar {
    width: 3.889vw;
    height: 3.889vw;
  }

  .post-username {
    font-size: 1.667vw;
  }

  .post-text {
    font-size: 1.25vw;
    margin-bottom: 2.014vw;
  }

  .post-image {
    border-radius: 1.042vw;
  }
}
@media (min-width: 1920px) {
  .section-how {
    border-radius: 53.333px;
    padding: 176px 0 390.667px;
    margin-bottom: 154.667px;
  }
  .how-content {
    margin: 0 auto 169.333px;
    width: 1200px;
  }
  .how-title {
    height: 56px;
    margin-bottom: 80px;
  }
  .how-step1,
  .how-step2 {
    height: 133.333px;
    margin-bottom: 40px;
    padding: 0 5.333px 0 80px;
    border-radius: 20px;
  }
  .how-step1-text,
  .how-step2-text {
    font-size: 32px;
  }
  .how-step1 img,
  .how-step2 img {
    height: 33.333px;
    left: 48px;
  }
  .how-detail {
    font-size: 24px;
    margin: 26.667px auto 106.667px;
  }
  .cta-button-wrap {
    margin-bottom: 106.667px;
  }
  .cta-button {
    width: 666.667px;
    height: 133.333px;
    font-size: 40px;
    border-radius: 88px;
    margin-bottom: 80px;
  }
  .cta-button__text {
    height: 53.333px;
  }
  .cta-button__character {
    height: 133.333px;
    right: 57.333px;
  }
  .cta-button-wrap .deco-cta-character {
    width: 133.333px;
    right: -120px;
    bottom: -20px;
  }
  .love-pict-title {
    width: 850.667px;
    margin: 0 auto 80px;
  }
  .love-pict-link {
    width: 933.333px;
  }
  .love-pict {
    border-radius: 13.333px;
    box-shadow: 0 0 53.333px 13.333px rgba(0, 0, 0, 0.30);
  }
  .marquee-wrap {
    margin-top: -324px;
  }
  .marquee-group {
    gap: 20px;
    padding-right: 20px;
  }
  .marquee-group img {
    height: 124px;
  }
  .sample-posts {
    gap: 26.667px;
    padding: 40px 0;
  }
  .sample-posts-group {
    gap: 40px;
    padding-right: 40px;
  }
  .post-card {
    width: 560px;
    border-radius: 13.333px;
    padding: 44px 33.333px 45.333px;
  }
  .post-card-header {
    gap: 22.667px;
    margin-bottom: 21.333px;
  }
  .post-card__content {
    padding-left: 16px;
  }
  .post-avatar {
    width: 74.667px;
    height: 74.667px;
  }
  .post-username {
    font-size: 32px;
  }
  .post-text {
    font-size: 24px;
    margin-bottom: 38.667px;
  }
  .post-image {
    border-radius: 20px;
  }
}

/* ===== Section: Rules ===== */
.section-title {
  margin-bottom: 8vw;
}
.section-rules {
  padding: 0 4.8vw;
  text-align: center;
  margin-bottom: 16vw;
}

.rules-scroll {
  max-width: 90.4vw;
  max-height: 62.133vw;
  margin: 0 auto;
  border: 1.5px solid #b4b4b4;
  border-radius: 3.2vw;
  padding: 6.933vw 11.467vw 6.933vw 5.067vw;
  background-color: #fff;
}

/* OverlayScrollbars: リセット打ち消し */
.rules-scroll [class^="os-"],
.rules-scroll [class*=" os-"] {
  margin: initial;
  padding: initial;
  box-sizing: initial;
}

/* OverlayScrollbars カスタマイズ */
.rules-scroll .os-scrollbar {
  --os-size: 2.4vw;
}

.rules-scroll .os-scrollbar-vertical {
  right: 3.2vw !important;
  top: 8vw !important;
  bottom: 8vw !important;
}

.rules-scroll .os-scrollbar-track {
  background: #E0E0E0;
  border-radius: 1.067vw;
}

.rules-scroll .os-scrollbar-handle {
  background: #000;
  border-radius: 1.067vw;
}

.rules-content {
  text-align: left;
  font-size: 3.733vw;
  font-weight: bold;
  line-height: 1.8;
  color: #000;
}

.rules-content h4 {
  margin-bottom: 1em;
}

.rules-content p {
  font-size: 3.2vw;
  margin-bottom: 2em;
}

.rules-content a {
  color: #000;
  text-decoration: underline;
}
.rules-content a:visited {
  color: #000;
}
.rules-content a:hover {
  color: #000;
  opacity: 0.7;
}

.rules-content p:last-child {
  margin-bottom: 0;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-title {
    margin-bottom: 2.083vw;
  }
  .section-rules {
    padding: 0;
    margin-bottom: 4.861vw;
  }

  .rules-scroll {
    max-width: 72.222vw;
    max-height: 19.444vw;
    border-radius: 0.833vw;
    padding: 1.875vw 8.403vw 1.875vw 6.667vw; 
  }

  /* OverlayScrollbars カスタマイズ */
  .rules-scroll .os-scrollbar {
    --os-size: 0.625vw;
  }

  .rules-scroll .os-scrollbar-vertical {
    right: 2.292vw !important;
    top: 2.083vw !important;
    bottom: 2.083vw !important;
  }

  .rules-scroll .os-scrollbar-track {
    background: #E0E0E0;
    border-radius: 0.278vw;
  }

  .rules-scroll .os-scrollbar-handle {
    background: #000;
    border-radius: 0.278vw;
  }

  .rules-content {
    font-size: 1.111vw;
  }

  .rules-content p {
    font-size: 0.972vw;
  }

  .rules-small {
    font-size: 0.972vw;
  }
}
@media (min-width: 1920px) {
  .section-title {
    margin-bottom: 40px;
  }
  .section-rules {
    margin-bottom: 93.333px;
  }
  .rules-scroll {
    max-width: 1386.667px;
    max-height: 373.333px;
    border-radius: 16px;
    padding: 36px 161.333px 36px 128px;
  }
  .rules-scroll .os-scrollbar {
    --os-size: 12px;
  }
  .rules-scroll .os-scrollbar-vertical {
    right: 44px;
    top: 40px;
    bottom: 40px;
  }
  .rules-scroll .os-scrollbar-track {
    border-radius: 5.333px;
  }
  .rules-scroll .os-scrollbar-handle {
    border-radius: 5.333px;
  }
  .rules-content {
    font-size: 21.333px;
  }
  .rules-content p {
    font-size: 18.667px;
  }
  .rules-small {
    font-size: 18.667px;
  }
}

/* ===== Section: Contact ===== */
.section-contact {
  padding: 0 3.733vw;
  text-align: center;
  color: #141E46;
  margin-bottom: 16vw;
}

.contact-title {
  font-size: 5.333vw;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 8vw;
}

.contact-button {
  width: 85.333vw;
  height: 16.8vw;
  background: #FFD900;
  border-radius: 16.8vw;
  margin: 0 auto 0.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-button-img {
  width: 55.2vw;
  height: auto;
  display: block;
}

.contact-note {
  font-size: 3.733vw;
  line-height: 1.5;
  font-weight: bold;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-contact {
    padding: 0;
    margin-bottom: 6.25vw;
  }

  .contact-title {
    font-size: 1.389vw;
    margin-bottom: 2.083vw;
  }

  .contact-button {
    width: 22.222vw;
    height: 4.375vw;
    margin: 0 auto 0.556vw;
  }
  .contact-button-img {
    width: 14.375vw;
    height: auto;
  }

  @media (hover: hover) {
    .contact-button:hover {
      animation: hero-banner-hover 0.3s ease-in-out;
    }
  }

  .contact-note {
    font-size: 0.972vw;
  }
}
@media (min-width: 1920px) {
  .section-contact {
    margin-bottom: 120px;
  }
  .contact-title {
    font-size: 26.667px;
    margin-bottom: 40px;
  }
  .contact-button {
    width: 426.667px;
    height: 84px;
    margin: 0 auto 10.667px;
  }
  .contact-button-img {
    width: 276px;
  }
  .contact-note {
    font-size: 18.667px;
  }
}

/* ===== Section: SNS Share ===== */
.section-sns {
  padding: 0 5.333vw 13.333vw;
  text-align: center;
  position: relative;
}

.sns-ribbon1 {
  width: 19.733vw;
  top: -12vw;
  left: -1.867vw;
  transform: rotate(59.57deg);
}
.sns-ribbon2 {
  width: 68.868vw;
  top: -4.267vw;
  right: -34.933vw;
  transform: rotate(-79.39deg);
  z-index: 1;
}

.sns-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13.067vw;
  width: 74.133vw;
  height: 16vw;
  margin: 8vw auto 0;
}

.sns-icon {
  text-decoration: none;
  transition: opacity 0.3s;
}

.sns-icon img {
  width: 16vw;
  height: 16vw;
  display: block;
}

@media (hover: hover) {
  .sns-icon:hover {
    animation: hero-banner-hover 0.3s ease-in-out;
  }
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-sns {
    padding: 0 0 0.069vw;
    z-index: 1;
  }

  .sns-ribbon1 {
    width: 14.306vw;
    top: -27.778vw;
    left: 5.208vw;
    transform: rotate(57.87deg);
  }
  .sns-ribbon2 {
    width: 63.194vw;
    top: -15.417vw;
    right: -30.278vw;
    transform: rotate(-81.27deg);
    z-index: 1;
  }
  .sns-ribbon3 {
    width: 38.403vw;
    top: -6.181vw;
    left: -13.542vw;
    transform: rotate(-12.73deg);
  }
  .sns-ribbon4 {
    width: 10.972vw;
    top: -2.847vw;
    right: 13.958vw;
    z-index: 1;
  }

  .sns-icons {
    /* gap: 55px; */
    gap: 3.819vw;
    width: 19.306vw;
    height: 4.167vw;
    margin-top: 2.083vw;
  }

  .sns-icon img {
    width: 4.167vw;
    height: 4.167vw;
  }
}
@media (min-width: 1920px) {
  .section-sns {
    padding: 0 0 1.333px;
  }
  .sns-ribbon1 {
    width: 274.667px;
    top: -533.333px;
    left: 100px;
  }
  .sns-ribbon2 {
    width: 1213.333px;
    top: -296px;
    right: -581.333px;
  }
  .sns-ribbon3 {
    width: 737.333px;
    top: -118.667px;
    left: -260px;
  }
  .sns-ribbon4 {
    width: 210.667px;
    top: -54.667px;
    right: 268px;
  }
  .sns-icons {
    gap: 73.333px;
    width: 370.667px;
    height: 80px;
    margin-top: 40px;
  }
  .sns-icon img {
    width: 80px;
    height: 80px;
  }
}

/* ===== Footer Deco ===== */
.section-footer-deco {
  position: relative;
  height: 97.6vw;
  width: 100%;
  margin-top: -13.333vw;
}

.section-footer-deco img {
  width: 100%;
  height: auto;
  display: block;
}

.section-footer-deco .chara1 {
  position: absolute;
  width: 69.067vw;
  top: -1.6vw;
  left: 50%;
  transform: translateX(-50%);
}

.section-footer-deco .chara2 {
  position: absolute;
  width: 18.133vw;
  top: -9.067vw;
  left: 14.667vw;
  transform: rotate(23deg);
}

.section-footer-deco .chara3 {
  position: absolute;
  width: 20.8vw;
  top: 17.867vw;
  left: -2.133vw;
  transform: rotate(17deg);
}
.section-footer-deco .chara4 {
  position: absolute;
  width: 21.333vw;
  top: 0;
  right: 2.133vw;
  transform: rotate(-24deg);
}
.section-footer-deco .karaage1 {
  position: absolute;
  width: 34.667vw;
  bottom: 21.6vw;
  left: -2.4vw;
  transform: rotate(-33deg);
}
.section-footer-deco .karaage2 {
  position: absolute;
  width: 24vw;
  bottom: 13.867vw;
  right: -1.333vw;
  transform: rotate(30deg);
}
.section-footer-deco .karaage3 {
  display: none;
}

/* ===== Responsive: PC (769px+) ===== */
@media (min-width: 769px) {
  .section-footer-deco {
    min-height: 20.833vw;
    height: 64.028vw;
    margin: -20.278vw 0 0;
    position: relative;
  }

  .lawson-karaagekun {
    margin: 2.778vw auto;
    width: 20.833vw;
  }
  .section-footer-deco .chara1 {
    width: 38.889vw;
    top: 9.375vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .section-footer-deco .chara2 {
    width: 10.208vw;
    top: 8.889vw;
    left: 30.139vw;
    transform: rotate(23deg);
  }
  .section-footer-deco .chara3 {
    width: 11.806vw;
    top: 24.722vw;
    left: 17.361vw;
    transform: rotate(17deg);
  }
  .section-footer-deco .chara4 {
    width: 12.083vw;
    top: 11.181vw;
    left: auto;
    right: 24.236vw;
    transform: rotate(-24deg);
  }
  .section-footer-deco .karaage1 {
    position: absolute;
    width: 19.514vw;
    bottom: auto;
    top: 37.222vw;
    left: 19.722vw;
    transform: rotate(-33deg);
  }
  .section-footer-deco .karaage2 {
    position: absolute;
    width: 13.542vw;
    bottom: 6.667vw;
    right: 21.875vw;
    transform: rotate(30deg);
  }
  .section-footer-deco .karaage3 {
    position: absolute;
    width: 19.236vw;
    bottom: 43.264vw;
    left: -2.778vw;
    transform: rotate(-20deg);
    display: block;
  }
  .section-footer-deco .fireworks1 {
    position: absolute;
    width: 22.222vw;
    bottom: 2.986vw;
    left: -3.889vw;
    transform: rotate(19deg);
  }
  .section-footer-deco .fireworks2 {
    position: absolute;
    width: 22.222vw;
    bottom: 12.847vw;
    right: 2.639vw;
    transform: rotate(-7deg);
  }
}
@media (min-width: 1920px) {
  .section-footer-deco {
    min-height: 400px;
    height: 1229.333px;
    margin: -389.333px 0 0;
  }
  .lawson-karaagekun {
    margin: 53.333px auto;
    width: 400px;
  }
  .section-footer-deco .chara1 {
    width: 746.667px;
    top: 180px;
  }
  .section-footer-deco .chara2 {
    width: 196px;
    top: 170.667px;
    left: 578.667px;
  }
  .section-footer-deco .chara3 {
    width: 226.667px;
    top: 474.667px;
    left: 333.333px;
  }
  .section-footer-deco .chara4 {
    width: 232px;
    top: 214.667px;
    right: 465.333px;
  }
  .section-footer-deco .karaage1 {
    width: 374.667px;
    top: 714.667px;
    left: 378.667px;
  }
  .section-footer-deco .karaage2 {
    width: 260px;
    bottom: 128px;
    right: 420px;
  }
  .section-footer-deco .karaage3 {
    width: 369.333px;
    bottom: 830.667px;
    left: -53.333px;
  }
  .section-footer-deco .fireworks1 {
    width: 426.667px;
    bottom: 57.333px;
    left: -74.667px;
  }
  .section-footer-deco .fireworks2 {
    width: 426.667px;
    bottom: 246.667px;
    right: 50.667px;
  }
}

.kara40-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 1000;
    background: #04B0E0;
    clip-path: inset(0 0 0 0);
}
.kara40-loading__inner {
    width: 71.733vw;
    height: 33.333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.kara40-loading__characters {
    width: 70.4vw;
    height: auto;
    display: block;
    margin: 0 auto 4.8vw;
}
.kara40-loading__text {
    width: 63.467vw;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(-50%);
}

@media (min-width: 769px) {
    .kara40-loading {
        height: 100vh;
    }
    .kara40-loading__inner {
        width: 18.681vw;
        height: 9.236vw;
    }
    .kara40-loading__characters {
        width: 18.333vw;
        margin: 0 auto 1.806vw;
    }
    .kara40-loading__text {
        width: 18.125vw;
    }
}

@media (min-width: 1920px) {
    .kara40-loading__inner {
        width: 358.667px;
        height: 177.333px;
    }
    .kara40-loading__characters {
        width: 352px;
        margin: 0 auto 34.667px;
    }
    .kara40-loading__text {
        width: 348px;
    }
}


/*! 
 * OverlayScrollbars
 * Version: 2.14.0
 * 
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 * 
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

.os-size-observer {
  z-index: -1;
  contain: strict;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: inherit;
  border: inherit;
  box-sizing: inherit;
  margin: -133px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0.1);
}
.os-size-observer::before {
  content: "";
  flex: none;
  box-sizing: inherit;
  padding: 10px;
  width: 10px;
  height: 10px;
}

.os-size-observer-appear {
  animation: os-size-observer-appear-animation 1ms forwards;
}

.os-size-observer-listener {
  box-sizing: border-box;
  position: relative;
  flex: auto;
  padding: inherit;
  border: inherit;
  margin: -133px;
  transform: scale(calc(1 / 0.1));
}
.os-size-observer-listener.ltr {
  margin-right: -266px;
  margin-left: 0;
}
.os-size-observer-listener.rtl {
  margin-left: -266px;
  margin-right: 0;
}
.os-size-observer-listener:empty::before {
  content: "";
  width: 100%;
  height: 100%;
}
.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
  display: block;
  position: relative;
  padding: inherit;
  border: inherit;
  box-sizing: content-box;
  flex: auto;
}

.os-size-observer-listener-scroll {
  box-sizing: border-box;
  display: flex;
}

.os-size-observer-listener-item {
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr;
  flex: none;
}

.os-size-observer-listener-item-final {
  transition: none;
}

@keyframes os-size-observer-appear-animation {
  from {
    cursor: auto;
  }
  to {
    cursor: none;
  }
}
.os-trinsic-observer {
  flex: none;
  box-sizing: border-box;
  position: relative;
  max-width: 0px;
  max-height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
  height: 0;
  top: calc(100% + 1px);
  contain: strict;
}
.os-trinsic-observer:not(:empty) {
  height: calc(100% + 1px);
  top: -1px;
}
.os-trinsic-observer:not(:empty) > .os-size-observer {
  width: 1000%;
  height: 1000%;
  min-height: 1px;
  min-width: 1px;
}

/**
 * hide native scrollbars
 * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
 */
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),
[data-overlayscrollbars-viewport~=scrollbarHidden],
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body {
  scrollbar-width: none !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
  overflow: auto;
}

/**
 * body element
 */
html[data-overlayscrollbars-body] {
  overflow: hidden;
}

html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html[data-overlayscrollbars-body] > body {
  overflow: visible;
  margin: 0;
}

/**
 * structure setup 
 */
[data-overlayscrollbars] {
  position: relative;
}

[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  display: flex;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  scroll-behavior: auto !important;
}

[data-overlayscrollbars-padding],
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  box-sizing: inherit;
  position: relative;
  flex: auto;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 0;
}

[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  --os-vaw: 0;
  --os-vah: 0;
  outline: none;
}
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus {
  outline: none;
}
[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  min-width: 1px;
  min-height: 1px;
  width: var(--os-vaw);
  height: var(--os-vah);
}

/**
 * wrapper elements overflow:
 */
[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  overflow: hidden !important;
}

[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],
[data-overlayscrollbars-padding~=noClipping] {
  overflow: visible !important;
}

/**
 * viewport overflow:
 */
[data-overlayscrollbars-viewport] {
  --os-viewport-overflow-x: hidden;
  --os-viewport-overflow-y: hidden;
  overflow-x: var(--os-viewport-overflow-x);
  overflow-y: var(--os-viewport-overflow-y);
}

[data-overlayscrollbars-viewport~=overflowXVisible] {
  --os-viewport-overflow-x: visible;
}

[data-overlayscrollbars-viewport~=overflowXHidden] {
  --os-viewport-overflow-x: hidden;
}

[data-overlayscrollbars-viewport~=overflowXScroll] {
  --os-viewport-overflow-x: scroll;
}

[data-overlayscrollbars-viewport~=overflowYVisible] {
  --os-viewport-overflow-y: visible;
}

[data-overlayscrollbars-viewport~=overflowYHidden] {
  --os-viewport-overflow-y: hidden;
}

[data-overlayscrollbars-viewport~=overflowYScroll] {
  --os-viewport-overflow-y: scroll;
}

[data-overlayscrollbars-viewport~=overflowImportant] {
  overflow-x: var(--os-viewport-overflow-x) !important;
  overflow-y: var(--os-viewport-overflow-y) !important;
}

/**
 * viewport state modifiers:
 */
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) {
  font-size: 0 !important;
  line-height: 0 !important;
}

[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) > *:not(#osFakeId) {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

[data-overlayscrollbars-viewport~=measuring],
[data-overlayscrollbars-viewport~=scrolling] {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible] {
  overflow-x: hidden !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible] {
  overflow-y: hidden !important;
}

/**
 * content element:
 */
[data-overlayscrollbars-content] {
  box-sizing: inherit;
}

/**
 * Display contents to bridge any flickering during deferred initialization.
 */
[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
  display: contents;
}

/**
 * optional & experimental grid mode
 */
[data-overlayscrollbars-grid],
[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
  display: grid;
  grid-template: 1fr/1fr;
}

[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
  height: auto !important;
  width: auto !important;
}

@property --os-scroll-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-viewport-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.os-scrollbar {
  --os-viewport-percent: 0;
  --os-scroll-percent: 0;
  --os-scroll-direction: 0;
  --os-scroll-percent-directional: calc(
    var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *
      var(--os-scroll-direction)
  );
}

.os-scrollbar {
  contain: size layout;
  contain: size layout style;
  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

body > .os-scrollbar {
  position: fixed;
  z-index: 99999;
}

.os-scrollbar-transitionless {
  transition: none !important;
}

.os-scrollbar-track {
  position: relative;
  padding: 0 !important;
  border: none !important;
}

.os-scrollbar-handle {
  position: absolute;
}

.os-scrollbar-track,
.os-scrollbar-handle {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
  pointer-events: auto;
  touch-action: none;
}

.os-scrollbar-horizontal {
  bottom: 0;
  left: 0;
}

.os-scrollbar-vertical {
  top: 0;
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-horizontal {
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical {
  right: auto;
  left: 0;
}

.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
  opacity: 0;
  visibility: hidden;
}

.os-scrollbar-interaction.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-unusable,
.os-scrollbar-unusable *,
.os-scrollbar-wheel,
.os-scrollbar-wheel * {
  pointer-events: none !important;
}

.os-scrollbar-unusable .os-scrollbar-handle {
  opacity: 0 !important;
  transition: none !important;
}

.os-scrollbar-horizontal .os-scrollbar-handle {
  bottom: 0;
  left: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateX(calc(var(--os-scroll-percent-directional) * -100%));
  width: calc(var(--os-viewport-percent) * 100%);
}

.os-scrollbar-vertical .os-scrollbar-handle {
  right: 0;
  top: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateY(calc(var(--os-scroll-percent-directional) * -100%));
  height: calc(var(--os-viewport-percent) * 100%);
}

@supports (container-type: size) {
  .os-scrollbar-track {
    container-type: size;
  }
  .os-scrollbar-horizontal .os-scrollbar-handle {
    left: auto;
    transform: translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-vertical .os-scrollbar-handle {
    top: auto;
    transform: translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle {
    right: auto;
    left: 0;
  }
}
.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
  right: auto;
  left: 0;
}

.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
  left: 0;
  right: 0;
}

.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
  top: 0;
  bottom: 0;
}

@media print {
  .os-scrollbar {
    display: none;
  }
}
.os-scrollbar {
  --os-size: 0;
  --os-padding-perpendicular: 0;
  --os-padding-axis: 0;
  --os-track-border-radius: 0;
  --os-track-bg: none;
  --os-track-bg-hover: none;
  --os-track-bg-active: none;
  --os-track-border: none;
  --os-track-border-hover: none;
  --os-track-border-active: none;
  --os-handle-border-radius: 0;
  --os-handle-bg: none;
  --os-handle-bg-hover: none;
  --os-handle-bg-active: none;
  --os-handle-border: none;
  --os-handle-border-hover: none;
  --os-handle-border-active: none;
  --os-handle-min-size: 33px;
  --os-handle-max-size: none;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0;
}

.os-scrollbar-track {
  border: var(--os-track-border);
  border-radius: var(--os-track-border-radius);
  background: var(--os-track-bg);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.os-scrollbar-track:hover {
  border: var(--os-track-border-hover);
  background: var(--os-track-bg-hover);
}
.os-scrollbar-track:active {
  border: var(--os-track-border-active);
  background: var(--os-track-bg-active);
}

.os-scrollbar-handle {
  border: var(--os-handle-border);
  border-radius: var(--os-handle-border-radius);
  background: var(--os-handle-bg);
}
.os-scrollbar-handle:hover {
  border: var(--os-handle-border-hover);
  background: var(--os-handle-bg-hover);
}
.os-scrollbar-handle:active {
  border: var(--os-handle-border-active);
  background: var(--os-handle-bg-active);
}

.os-scrollbar-track:before,
.os-scrollbar-handle:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
}

.os-scrollbar-horizontal {
  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
  right: var(--os-size);
  height: var(--os-size);
}
.os-scrollbar-horizontal.os-scrollbar-rtl {
  left: var(--os-size);
  right: 0;
}
.os-scrollbar-horizontal .os-scrollbar-track:before {
  top: calc(var(--os-padding-perpendicular) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal .os-scrollbar-handle {
  min-width: var(--os-handle-min-size);
  max-width: var(--os-handle-max-size);
  height: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
}
.os-scrollbar-horizontal .os-scrollbar-handle:before {
  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal:hover .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-horizontal:active .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-active);
}

.os-scrollbar-vertical {
  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
  bottom: var(--os-size);
  width: var(--os-size);
}
.os-scrollbar-vertical .os-scrollbar-track:before {
  left: calc(var(--os-padding-perpendicular) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical .os-scrollbar-handle {
  min-height: var(--os-handle-min-size);
  max-height: var(--os-handle-max-size);
  width: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
}
.os-scrollbar-vertical .os-scrollbar-handle:before {
  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  left: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical:hover .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-vertical:active .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-active);
}

/* NONE THEME: */
[data-overlayscrollbars-viewport~=measuring] > .os-scrollbar,
.os-theme-none.os-scrollbar {
  display: none !important;
}

/* DARK & LIGHT THEME: */
.os-theme-dark,
.os-theme-light {
  box-sizing: border-box;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 10px;
  --os-handle-interactive-area-offset: 4px;
  --os-handle-border-radius: 10px;
}

.os-theme-dark {
  --os-handle-bg: rgba(0, 0, 0, 0.44);
  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
}

.os-theme-light {
  --os-handle-bg: rgba(255, 255, 255, 0.44);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
}
/**
 * Swiper 12.1.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 24, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}