@charset "UTF-8";

/* Base */
:root {
  --color-orange: #ff6b00;
  --color-pink: #fe5e82;
  --color-yellow: #ffc700;
  --color-cream: #fff8ec;
  --color-gray: #f5f5f5;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-feature-settings: "palt";
  line-height: 1.65;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

picture {
  display: block;
}

.common-inner {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 940px) {
  .common-inner {
    width: min(100%, 1000px);
    padding: 0;
  }
}

/* Main visual */
.main-visual-img {
  width: 100%;
}

@media (min-width: 940px) {
  .main-visual-img {
    min-width: 1000px;
  }
}

/* Section heading */
.common-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: var(--color-orange);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
}

.common-section-title::before,
.common-section-title::after {
  flex: 1;
  height: 2px;
  background: currentColor;
  content: "";
}

@media (min-width: 940px) {
  .common-section-title {
    gap: 20px;
    font-size: 36px;
  }
}

/* Campaign overview */
.campaign-overview {
  padding: 0 0 60px;
  background: #fff;
}

.campaign-overview .common-inner {
  padding-top: 24px;
}

.campaign-overview-lead-img {
  width: 100%;
}

.campaign-overview-text {
  margin: 16px 0 24px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.campaign-overview-images {
  display: grid;
  gap: 12px;
  margin-bottom: 40px;
}

.campaign-overview-brand-img {
  width: min(92%, 544px);
  margin: 20px auto 0;
}

@media (min-width: 940px) {
  .campaign-overview {
    padding: 0 0 100px;
  }

  .campaign-overview .common-inner {
    padding-top: 40px;
  }

  .campaign-overview-lead-img {
    min-width: 1000px;
  }

  .campaign-overview-text {
    margin: 20px 0 32px;
    font-size: 24px;
  }

  .campaign-overview-images {
    gap: 24px;
    margin-bottom: 80px;
  }

  .campaign-overview-brand-img {
    width: min(100%, 1000px);
  }
}

/* Campaign actions */
.campaign-actions {
  display: grid;
  gap: 10px;
  width: min(95%, 448px);
  margin: 0 auto 60px;
}

.campaign-actions-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.campaign-actions-link-entry {
  background: var(--color-pink);
}

.campaign-actions-link-account {
  background: var(--color-orange);
}

.campaign-actions-link:hover {
  opacity: .82;
}

@media (min-width: 940px) {
  .campaign-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: min(100%, 704px);
    margin-bottom: 100px;
  }

  .campaign-actions-link {
    min-height: 61px;
    font-size: 18px;
  }
}

/* Campaign details */
.campaign-details {
  padding: 32px 0 42px;
  background: var(--color-cream);
}

.campaign-details > .common-inner > .common-section-title {
  margin-bottom: 20px;
}

@media (min-width: 940px) {
  .campaign-details {
    padding: 48px 0;
  }

  .campaign-details > .common-inner > .common-section-title {
    margin-bottom: 32px;
  }
}

/* Campaign information card */
.campaign-details-card,
.campaign-benefit {
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px 32px;
  border-radius: 8px;
  background: #fff;
  width: 95%;
}

.campaign-benefit {
  position: relative;
  /* タイトル高さ半分のはみ出し分を確保（上ボックスとの余白24pxは直前要素のmargin-bottomで担保） */
  margin-top: 20vw;
  padding-top: calc(16px + min(100% - 32px, 480px) * 245 / 711 / 2);
  overflow: visible;
}

.campaign-details-list {
  margin: 0;
}

.campaign-details-item + .campaign-details-item {
  margin-top: 16px;
}

.campaign-details-term {
  width: fit-content;
  margin: 0 auto 9px;
  padding: 3px 18px;
  border-radius: 999px;
  background: var(--color-yellow);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.campaign-details-description {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.campaign-details-description p {
  margin: 0;
}

@media (min-width: 940px) {
  .campaign-details-card,
  .campaign-benefit {
    margin-bottom: 80px;
    padding: 32px 48px;
    border-radius: 12px;
  }

  .campaign-benefit {
    margin-top: 80px;
    padding-top: calc(32px + min(100% - 96px, 672px) * 128 / 979 / 2);
  }

  .campaign-details-item + .campaign-details-item {
    margin-top: 32px;
  }

  .campaign-details-term {
    margin-bottom: 12px;
    padding: 4px 28px;
    font-size: 21px;
  }

  .campaign-details-description {
    font-size: 18px;
  }
}

/* Campaign benefits */
.campaign-benefit-title {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(calc(100% - 32px), 480px);
  transform: translate(-50%, -50%);
}

.campaign-benefit-title-img {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.campaign-benefit-title + picture {
  margin-top: -28px;
}

.campaign-benefit-main-img {
  width: min(100%, 512px);
  margin: 0 auto 16px;
}

.campaign-benefit-description,
.campaign-benefit-note {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.campaign-benefit-description li::before,
.campaign-benefit-note li::before {
  content: "※";
}

.campaign-benefit-description li::before {
  content: "・";
}

.campaign-benefit-conditions-img {
  width: 100%;
  margin: 16px 0;
}

.campaign-benefit-note {
  color: #222;
  font-size: 11px;
  line-height: 1.55;
}

@media (min-width: 940px) {
  .campaign-benefit-title {
    width: min(calc(100% - 96px), 672px);
  }

  .campaign-benefit-main-img {
    width: min(100%, 900px);
    margin-bottom: 24px;
  }

  .campaign-benefit-description {
    font-size: 16px;
  }

  .campaign-benefit-conditions-img {
    margin: 60px 0 24px;
  }

  .campaign-benefit-note {
    font-size: 12px;
    display: inline-block;
  }
}

/* Additional cashback information */
.campaign-details-combined-img {
  width: min(100%, 560px);
  margin: 0 auto 16px;
}

.campaign-details-additions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 940px) {
  .campaign-details-combined-img {
    width: min(100%, 1000px);
    margin-bottom: 80px;
  }

  .campaign-details-additions {
    gap: 16px;
    margin-bottom: 24px;
  }
}

/* Cashback example */
.cashback-example {
  padding: 32px 0;
  background: #fff;
}

.cashback-example-img {
  width: min(100%, 560px);
  margin: 0 auto 24px;
}

.cashback-example .campaign-actions {
  margin-bottom: 0;
}

@media (min-width: 940px) {
  .cashback-example {
    padding: 48px 0;
  }

  .cashback-example-img {
    width: min(100%, 800px);
    margin-bottom: 32px;
  }
}

/* Campaign notes */
.campaign-notes {
  padding: 32px 0;
  background: var(--color-gray);
}

.campaign-notes-title {
  margin: 0 0 16px;
  font-size: 19px;
}

.campaign-notes-list {
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.6;
}

.campaign-notes-list li + li {
  margin-top: 10px;
}

@media (min-width: 940px) {
  .campaign-notes {
    padding: 48px 0;
  }

  .campaign-notes-title {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .campaign-notes-list {
    font-size: 13px;
  }
}