#line-connect.ec-page__begin {
  /* --spacing-30: min(30px, 30 / 715 * 100vw);
  --spacing-35: min(35px, 35 / 715 * 100vw);
  --spacing-40: min(40px, 40 / 715 * 100vw);
  --spacing-60: min(60px, 60 / 715 * 100vw);
  --spacing-80: min(80px, 80 / 715 * 100vw); */

  /* 715 > 420 = 0.5874 */
  --spacing-30: min(18px, 18 / 420 * 100vw);
  --spacing-35: min(20px, 20 / 420 * 100vw);
  --spacing-40: min(24px, 24 / 420 * 100vw);
  --spacing-60: min(35px, 35 / 420 * 100vw);
  --spacing-80: min(47px, 47 / 420 * 100vw);

  position: relative;
  max-width: 420px;
  padding: 0;
}

#line-connect::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  content: "";
  background-color: #ef9f23;
  background-image: url("../../img/line-connect/bg.png");
  background-repeat: repeat-y;
  background-position: 0 0;
  background-size: contain;
}

#line-connect :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

#line-connect :is(img) {
  max-width: 100%;
  height: auto;
}

#line-connect .ec-content__begin {
  position: relative;
  z-index: 2;
  padding-bottom: 0;
  background-color: #fff;
}

/* fv */
#line-connect .fv {
  position: relative;
}

#line-connect .fv-button {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding-inline: var(--spacing-40);
  text-align: center;
  translate: 0 50%;
}

/* connect */
#line-connect .connect {
  padding-inline: var(--spacing-30);
  background-color: #ebf3d0;
}

#line-connect .connect-container {
  padding-block-end: var(--spacing-60);
  background-color: #fff;
  border-radius: 0 0 var(--spacing-30) var(--spacing-30);
}

#line-connect .connect-container:not(:last-child) {
  margin-block-end: var(--spacing-40);
}

#line-connect .connect-inner {
  padding-block-start: var(--spacing-35);
  padding-inline: var(--spacing-40);
}

#line-connect .connect-button {
  display: block;
  margin-block-start: var(--spacing-35);
}

#line-connect .connect-qr {
  display: none;
}

@media (width >= 768px) {
  #line-connect .connect-qr {
    display: block;
    margin-block-start: var(--spacing-40);
  }
}

/* coupon */
#line-connect .coupon {
  padding-block-end: var(--spacing-60);
}

/* utility */
#line-connect .u-bs-60 {
  padding-block-start: var(--spacing-60);
}

#line-connect .u-bs-80 {
  padding-block-start: var(--spacing-80);
}

/* スライダー */
.line-connect-swiper {
  --swiper-pagination-progressbar-bg-color: #e6e6e6;
  --swiper-pagination-color: #cacaca;
  --swiper-progressbar-size: min(12px, 12 / 420 * 100vw);
  --swiper-progressbar-spacing: calc(var(--swiper-progressbar-size) * 4);
  --swiper-navigation-size: min(24px, 24 / 420 * 100vw);
  --swiper-navigation-sides-offset: var(--spacing-30);

  position: relative;
  width: 100%;
  padding-block-end: var(--swiper-progressbar-spacing);
  overflow: hidden;
}

.line-connect-swiper :is(.swiper-button-prev, .swiper-button-next)::before {
  width: calc(36 / 40 * 100%);
  aspect-ratio: 27 / 36;
  content: "";
  background-color: #979797;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.line-connect-swiper .swiper-button-prev::before {
  scale: -1 1;
}

.line-connect-swiper :is(.swiper-button-prev, .swiper-button-next) svg {
  display: none;
}

.line-connect-swiper :is(.swiper-button-prev, .swiper-button-next).swiper-button-disabled {
  opacity: 0;
}

.line-connect-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(285px, 285 / 420 * 100vw);
  height: 100%;
  background: #f1f1f1;
  transition: opacity 0.3s; /* 見栄え調整用 */
}

/* アクティブなスライド以外の不透明度を下げる場合（お好みで） */
.line-connect-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.5;
}

/* プログレスバーの位置調整 */
.line-connect-swiper .swiper-pagination-progressbar {
  top: auto;
  bottom: 0;
  left: 50%;
  width: calc(555 / 715 * 100%);
  height: var(--swiper-progressbar-size);
  overflow: hidden;
  border-radius: 100vmax;
  translate: -50% 0;
}