:root {
  color-scheme: only light;
  --campaign-red: #ff0014;
  --page-red: #ff0000;
  --campaign-white: #fff;
  --campaign-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
  --campaign-weight-b: 700;
  --campaign-weight-u: 900;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--page-red);
}

body {
  overflow-x: hidden;
}

.campaign-live {
  position: relative;
  container-type: inline-size;
  width: min(100%, 1700px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--page-red);
  font-family: var(--campaign-font);
}

.campaign-live--font-noto {
  --campaign-font: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --campaign-weight-b: 600;
  --campaign-weight-u: 800;
}

.campaign-live--font-zen-kaku {
  --campaign-font: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
  --campaign-weight-b: 500;
  --campaign-weight-u: 700;
}

.campaign-live--font-mplus {
  --campaign-font: "M PLUS 1p", "Yu Gothic", Meiryo, sans-serif;
  --campaign-weight-b: 600;
  --campaign-weight-u: 800;
}

.campaign-live::before,
.campaign-live::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 78.7%;
  bottom: 0;
  width: 2px;
  background: var(--page-red);
  pointer-events: none;
}

.campaign-live::before {
  left: 0;
}

.campaign-live::after {
  right: 0;
}

.campaign-live__art {
  display: block;
  width: 100%;
  aspect-ratio: 1700 / 874;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.campaign-live__art img {
  display: block;
  width: 100%;
  height: 100%;
}

.editable-copy {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-weight: var(--campaign-weight-u);
  text-align: center;
  user-select: text;
}

.editable-copy p {
  margin: 0;
}

.editable-copy--description {
  top: 24.73%;
  left: 69.647%;
  width: max-content;
  transform: translateX(-50%) rotate(7deg);
  transform-origin: 50% 1.133em;
  color: var(--campaign-red);
  font-weight: var(--campaign-weight-b);
  font-size: 0.882cqw;
  line-height: 1.53;
  letter-spacing: 0.024em;
  white-space: nowrap;
}

.editable-copy--theme {
  top: 70.7%;
  left: 50%;
  width: 31%;
  transform: translateX(-50%);
  color: var(--campaign-white);
  font-size: 1.176cqw;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.editable-copy--theme strong {
  font-weight: var(--campaign-weight-u);
}

.editable-copy--closing {
  top: 80.35%;
  left: 50%;
  width: 48%;
  transform: translateX(-50%);
  color: var(--campaign-white);
  font-weight: var(--campaign-weight-b);
  font-size: 0.941cqw;
  line-height: 1.5;
}

.copy-line {
  display: block;
}

.mobile-break {
  display: none;
}

.music-note {
  display: inline-block;
  width: 0.941cqw;
  height: auto;
  margin-left: 0.3em;
  vertical-align: -0.188cqw;
}

.editable-copy--copyright {
  top: 92.9%;
  left: 50%;
  width: 32%;
  transform: translateX(-50%);
  color: var(--campaign-white);
  font-weight: var(--campaign-weight-b);
  font-size: 0.765cqw;
  line-height: 1.615;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .campaign-live {
    width: 100%;
  }

  .campaign-live__art {
    aspect-ratio: 375 / 823;
  }

  .campaign-live::before,
  .campaign-live::after {
    top: 74%;
  }

  .editable-copy--description {
    top: 55.95%;
    left: 8%;
    width: 84%;
    transform: none;
    font-size: 3.2cqw;
    line-height: 1.58;
    letter-spacing: 0.04em;
    white-space: normal;
  }

  .editable-copy--theme {
    top: 75.45%;
    width: 82%;
    font-size: 3.733cqw;
    line-height: 1.43;
  }

  .editable-copy--closing {
    top: 83.6%;
    width: 94%;
    font-size: 3.2cqw;
    line-height: 1.5;
  }

  .mobile-break {
    display: inline;
  }

  .music-note {
    width: 4.267cqw;
    vertical-align: -0.853cqw;
  }

  .editable-copy--copyright {
    top: 96.25%;
    width: 90%;
    font-size: 2.667cqw;
    line-height: 2.1;
  }
}
