* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  background: #F5F5F5;
}

.campaign-main {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.campaign-kv {
  display: block;
  width: 100%;
  height: auto;
}

.campaign-side {
  display: none;
}

/* 02_kv.svgのボタン領域（viewBox: 402 × 1844、x:30 y:992 幅342 高さ48） */
.campaign-line-link {
  position: absolute;
  left: calc(30 / 402 * 100%);
  top: calc(992 / 1844 * 100%);
  width: calc(342 / 402 * 100%);
  height: calc(48 / 1844 * 100%);
  border-radius: 999px;
}

/* 02_kv.svgのXアイコン領域（x:161 y:1268 幅80 高さ80） */
.campaign-x-link {
  position: absolute;
  left: calc(161 / 402 * 100%);
  top: calc(1268 / 1844 * 100%);
  width: calc(80 / 402 * 100%);
  height: calc(80 / 1844 * 100%);
  border-radius: 20%;
}

.campaign-line-link:focus-visible,
.campaign-x-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .campaign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 402px minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
  }

  .campaign-main {
    width: 402px;
  }

  .campaign-side {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100vh;
    padding: 24px clamp(16px, 4vw, 80px);
  }

  .campaign-side img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .campaign-side--right {
    align-items: center;
    height: auto;
    min-height: 100vh;
  }

  .campaign-social {
    width: 547px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .campaign-social-heading {
    width: 100%;
  }

  /* 幅547px時の間隔を30px / 64px / 28pxとし、狭い画面では比例縮小する。 */
  .campaign-social-qr {
    width: calc(243 / 547 * 100%);
    margin-top: calc(30 / 547 * 100%);
  }

  .campaign-social-text {
    width: calc(336 / 547 * 100%);
    margin-top: calc(64 / 547 * 100%);
  }

  .campaign-social-x {
    display: block;
    width: calc(80 / 547 * 100%);
    margin-top: calc(28 / 547 * 100%);
    border-radius: 20%;
  }

  .campaign-social-x img {
    width: 100%;
  }

  .campaign-social-x:focus-visible {
    outline: 3px solid #111;
    outline-offset: 4px;
  }
}