@charset "UTF-8";
/* -------------------------------------------------------------------
sp layout
------------------------------------------------------------------- */
/* 変数 */
:root {
  --rate1: calc(100vw / 390);
/* color */
  --baseTextColorBlack: #333;
  --baseTextColorWhite: #fff;
  --baseTextColorNote: #686868;
  --baseTextColorEmphasis: #fb0000;
  --baseRakutenRed: #bf0000;
  --baseBorderColor: #ebebeb;
  --baseBgColor1: #fff;
  --baseBgColor2: #ececec;
  --themeColor1: #e72427;
  --themeColor2: #fff489;
  --themeColor3: #00a161;
  --themeColor4: #fb0000;
  /* for margin and padding */
  --rate4-4: min(calc(var(--rate1) * 4), 4px);
  --rate8-8: min(calc(var(--rate1) * 8), 8px);
  --rate8-16: min(calc(var(--rate1) * 8), 16px);
  --rate12-12: min(calc(var(--rate1) * 12), 12px);
  --rate12-14: min(calc(var(--rate1) * 12), 14px);
  --rate14-16: min(calc(var(--rate1) * 14), 16px);
  --rate16-16: min(calc(var(--rate1) * 16), 16px);
  --rate16-24: min(calc(var(--rate1) * 16), 24px);
  --rate20-22: min(calc(var(--rate1) * 20), 22px);
  --rate24-24: min(calc(var(--rate1) * 24), 24px);
  --rate24-32: min(calc(var(--rate1) * 24), 32px);
  --rate24-32: min(calc(var(--rate1) * 24), 32px);
  --rate24-36: min(calc(var(--rate1) * 24), 48px);
  --rate32-32: min(calc(var(--rate1) * 32), 32px);
  --rate32-48: min(calc(var(--rate1) * 32), 48px);
  --rate40-56: min(calc(var(--rate1) * 40), 56px);
  --rate48-48: min(calc(var(--rate1) * 48), 48px);
  --rate48-72: min(calc(var(--rate1) * 48), 72px);
/* font only*/
  --fontSizeHdLv1: clamp(10px, calc(var(--rate1) * 24), 26px); /* 見出しLv-1 */
  --fontSizeHdLv2: clamp(10px, calc(var(--rate1) * 16), 22px); /* 見出しLv-2 */
  --fontSizeHdLv3: clamp(10px, calc(var(--rate1) * 16), 18px); /* 見出しLv-3 */
  --fontSizeTxLv1: clamp(10px, calc(var(--rate1) * 24), 26px); /* 本文Lv-1 */
  --fontSizeTxLv2: clamp(10px, calc(var(--rate1) * 16), 18px); /* 本文Lv-2 */
  --fontSizeTxLv3: clamp(10px, calc(var(--rate1) * 14), 16px); /* 本文Lv-3 */
  --fontSizeNotes: clamp(10px, calc(var(--rate1) * 12), 12px); /* 注釈 */
  --rate13-15: clamp(10px, calc(var(--rate1) * 13), 15px);
  --rate14-14: clamp(10px, calc(var(--rate1) * 14), 14px);
  --rate18-18: clamp(10px, calc(var(--rate1) * 18), 18px);
  --rate20-20: clamp(10px, calc(var(--rate1) * 20), 20px);
  --rate20-26: clamp(10px, calc(var(--rate1) * 20), 26px);
}
/* commonの調整 */
html img, body img {
  width: revert-layer;
}
html *,body * {
  font-family: "Noto Sans JP","Rakuten Sans UI",sans-serif;
}
.is-rp-os-android .iosOnly, .is-rp-os-iOS .androidOnly {
  display: none;
}
.CPN-custom-inner-middle, .CPN-custom-inner-large {
  width: 87.7%;
  margin-right: auto;
  margin-left: auto;
}
.CPN-custom-inner-middle {
  max-width: 856px;
}
.CPN-custom-inner-large {
  max-width: 1032px;
}
.CPN .rex-button.rex-button.rex-button.rex-button {
  padding: 12px 43px;
  text-decoration: none;
}
.CPN .RexButton-message {
  font-size: 1.6rem;
}
@media (min-width: 445px) {
  .CPN .RexButton-message {
    font-size: 3rem;
  }
}
.CPN .rp-list {
  color: var(--baseTextColorNote);
}
.rp-area-util_top {
  width: 40px;
  height: 40px;
}
.rp-area-util_top:after {
  width: 38px;
  height: 20px;
  margin-top: 8px;
  font-size: 2rem;
}
/* エントリーボタン */
.rex-button.rex-button.rex-button.rex-button.rex-button {
  text-decoration: none;
}
@media screen and (min-width: 48em) {
  .CPN .rex-button.rex-button.rex-button.rex-button.rex-button {
    padding: 1.2rem 5.1rem;
  }
}
.RexButton-message.RexButton-message.RexButton-message.RexButton-message.RexButton-message {
  font-size: 4.1025641026vw;
}
@media screen and (min-width: 48em) {
  .RexButton-message.RexButton-message.RexButton-message.RexButton-message.RexButton-message {
    font-size: 3rem;
    line-height: 1.3;
  }
}
.pay__rexEntryButtonPermission .notes {
  width: 90%;
  max-width: 856px;
  margin: 16px auto;
}
.pay__rexEntryButtonPermission .notes>li {
  position: relative;
  line-height: 1.3;
  padding-left: 1.3em;
  color: var(--baseTextColorNote);
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
  font-size: 3.0769230769vw;
}
.pay__rexEntryButtonPermission .notes>li::before {
  content: "※";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 48em) {
  .pay__rexEntryButtonPermission .notes>li {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
/* アプリダウンロード */
.common__appDownloadPay {
  margin-top: 12.3076923077vw;
}
.appDownload {
  padding-right: 6.1538461538vw;
  padding-left: 6.1538461538vw;
}
@media screen and (min-width: 48em) {
  .common__appDownloadPay {
    margin-top: 7.2rem;
  }
}
.appDownload .appDownload--wrap {
  margin-top: 6.1538461538vw;
  padding: 6.1538461538vw;
  border: #ebebeb solid .1rem;
  border-radius: 2.0512820513vw;
  background: #f7f7f7;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload--wrap {
    max-width: 856px;
    margin-top: 2.4rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2.4rem 4.8rem;
    border-radius: .8rem;
  }
}
.appDownload .appDownload__ttl {
  font-weight: 700;
  font-size: 5.1282051282vw;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__ttl {
    font-size: 2.2rem;
    line-height: 1.3;
  }
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__ttl br.sm:not(.tablet), .appDownload .appDownload__ttl br.sp:not(.tablet) {
    display: none;
  }
}
@media screen and (min-width: 59.375em) {
  .appDownload .appDownload__ttl br.md, .appDownload .appDownload__ttl br.tablet {
    display: none;
  }
}
@media screen and (min-width: 59.375em) {
  .appDownload .appDownload__ttl br.sm.md, .appDownload .appDownload__ttl br.sp.tablet {
    display: none;
  }
}
@media screen and (max-width: 47.9375em) {
  .appDownload .appDownload__ttl br.lg, .appDownload .appDownload__ttl br.pc {
    display: none;
  }
}
.appDownload .appDownload__ttl br.xl {
  display: none;
}
@media screen and (min-width: 64em) {
  .appDownload .appDownload__ttl br.xl {
    display: block;
  }
}
.appDownload .appDownload__ttl br.xxl {
  display: none;
}
@media screen and (min-width: 80em) {
  .appDownload .appDownload__ttl br.xxl {
    display: block;
  }
}
.appDownload .appDownload__btn {
  display: flex;
  margin-top: 4.1025641026vw;
  gap: 4.1025641026vw;
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__btn {
    margin-top: 1.6rem;
    gap: 3.2rem;
  }
}
.appDownload .appDownload__btn .appDownload__btn--block {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__btn .appDownload__btn--block {
    display: flex;
    align-items: center;
    width: 50%;
    gap: 1.6rem;
  }
  .appDownload .appDownload__btn .appDownload__btn--block .appDownload__btn__ios {
    width: 100%;
    max-width: 193px;
  }
  .appDownload .appDownload__btn .appDownload__btn--block .appDownload__btn__android {
    width: 100%;
    max-width: 237px;
  }
  .appDownload .appDownload__btn .appDownload__btn--block #DL-iOS-store img, .appDownload .appDownload__btn .appDownload__btn--block #DL-android-store img {
    max-height: 65px;
  }
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__btn .appDownload__btn--block.iosOnly {
    width: 46.5%;
  }
}
@media screen and (min-width: 48em) {
  .appDownload .appDownload__btn .appDownload__btn--block.androidOnly {
    width: 52.5%;
  }
}
.appDownload .payAppActivate__list {
  margin-top: 4.1025641026vw;
}
.appDownload .payAppActivate__list > li {
  position: relative;
  padding-left: 1.3em;
  color: #686868;
  font-size: 3.0769230769vw;
  line-height: 1.3;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
}
@media screen and (min-width: 48em) {
  .appDownload .payAppActivate__list > li {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
.appDownload .payAppActivate__list > li::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.appDownload .payAppActivate__list > li + li {
  margin-top: 1.0256410256vw;
}
@media screen and (min-width: 48em) {
  .appDownload .payAppActivate__list > li + li {
    margin-top: .4rem;
  }
}
.appDownload .payAppActivate__list > li::before {
  content: "※";
}
@media screen and (min-width: 48em) {
  .appDownload .payAppActivate__list {
    margin-top: 1.6rem;
  }
}
.appDownload .payAppActivate__list > li {
  display: inline-block;
  text-align: center;
}
/* カンバン */
.kanban .kanban__common__wrap {
  text-align: center;
}
.kanban .kanban__hd__wrap {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.common__kanban .kanban__figure {
  background: var(--themeColor1);
}
.common__kanban .kanban__period {
  padding: var(--rate8-8) 0;
  background: var(--baseRakutenRed);
}
.common__kanban .kanban__period__list__itm {
  margin-top: var(--rate8-8);
  color: var(--baseTextColorWhite);
  font-weight: 700;
  font-size: var(--rate13-15);
}
.common__kanban .kanban__period__list__itm:first-child {
  margin-top: 0;
}
/* キャンペーン参加方法 */
.common__campaignStep2 .campaign-step-2 {
  padding: var(--rate48-72) 0;
  background-color: var(--themeColor2);
}
.common__campaignStep2 .title {
  font-weight: 700;
  font-size: 6.1538461538vw;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .title {
    font-size: var(--fontSizeHdLv1);
  }
}
.CPN-howto-join {
  margin-top: var(--rate48-72);
}
.CPN-howto-join .title {
  color: var(--themeColor1);
}
@media screen and (min-width: 48em) {
  .CPN-howto-join .steps .step {
    padding: 36px;
  }
}
.common__campaignStep2 .steps {
  margin-top: 8.2051282051vw;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps {
    display: flex;
    margin-top: var(--rate32-48);
  }
}
.common__campaignStep2 .steps .step {
  position: relative;
  width: 100%;
  padding: 12.3076923077vw 6.1538461538vw 8.2051282051vw;
  background: var(--baseBgColor1);
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step {
    padding: var(--rate48-48) var(--rate24-24) var(--rate32-32);
  }
}
.common__campaignStep2 .steps .step .step__box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--rate24-24);
}
.common__campaignStep2 .steps .step.step--radius {
  border-radius: var(--rate24-24);
}
.common__campaignStep2 .steps .step.step--border {
  border: var(--themeColor1) solid 4px;
}
.common__campaignStep2 .steps .step + .step {
  margin-top: 12.3076923077vw;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step + .step {
    margin-top: 0;
    margin-left: var(--rate32-32);
  }
}
.common__campaignStep2 .steps .step:only-of-type {
  padding-top: var(--rate32-32);
}
.common__campaignStep2 .steps .step .hidden-pc {
  display: block;
}
.common__campaignStep2 .steps .step .hidden-sp {
  display: none;
}
.common__campaignStep2 .steps .step__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: var(--rate8-8) var(--rate32-32);
  border-radius: 100vh;
  background: var(--themeColor1);
  color: var(--baseTextColorWhite);
  font-weight: 700;
  font-size: 4.6153846154vw;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step__label {
    font-size: 18px;
  }
}
.common__campaignStep2 .steps .step__title {
  font-weight: 700;
  font-size: 5.1282051282vw;
  text-align: center;
}

@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step__title {
    display: flex;
    align-items: center;
    min-height: calc(1em * 1.4 * 4);
    font-size: var(--fontSizeHdLv2);
  }
  .common__campaignStep2 .steps .step + .step .step__title {
    font-size: min( 2.4vw,22px);
  }
}
.common__campaignStep2 .steps .step__title-img {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step__title-img {
    max-width: 280px;
  }
}
.common__campaignStep2 .steps .step__text {
  font-size: var(--rate14-14);
  text-align: left;
}
@media screen and (min-width: 48em) {
  .common__campaignStep2 .steps .step__text {
  }
}
.common__campaignStep2 .steps .step .notes {
  margin-top: 0;
}
.common__campaignStep2 .notes {
  margin-top: var(--rate16-16);
  font-size: var(--fontSizeNotes);
}

.campaign-step-2 .notes {
  width: 90%;
  margin: 4.1025641026vw auto 0;
  padding: 0;
  color: var(--baseTextColorNote);
  text-align: left;
}
.campaign-step-2 .notes > li {
  position: relative;
  padding-left: 1.3em;
  color: var(--baseTextColorNote);
  font-size: 3.0769230769vw;
  line-height: 1.3;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .incentive-note-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .campaign-step-2 .notes {
    width: 100%;
  }
  .campaign-step-2 .notes > li {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
.campaign-step-2 .notes > li::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.campaign-step-2 .notes > li + li {
  margin-top: 1.0256410256vw;
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .notes > li + li {
    margin-top: .4rem;
  }
}
.campaign-step-2 .notes > li::before {
  content: "※";
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .notes {
    max-width: 85.6rem;
    margin: 1.6rem auto 0;
  }
}
.campaign-step-2 .incentive {
  display: block;
  width: 100%;
  margin-top: var(--rate24-32);
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .incentive {
    width: 87.7%;
    max-width: 85.6rem;
    margin: var(--rate24-32) auto 0;
  }
}
.campaign-step-2 .incentive__arrow {
  display: block;
  width: 7.1794871795vw;
  margin: 0 auto 6.1538461538vw;
  border-top: 7.1794871795vw solid #0a0a0a;
  border-right: 6.6666666667vw solid rgba(0, 0, 0, 0);
  border-left: 6.6666666667vw solid rgba(0, 0, 0, 0);
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .incentive__arrow {
    width: 5.25rem;
    margin: 0 auto 3.6rem;
    border-top: 2.8rem solid #0a0a0a;
    border-right: 2.6rem solid rgba(0, 0, 0, 0);
    border-left: 2.6rem solid rgba(0, 0, 0, 0);
  }
}
.campaign-step-2 .incentive__img {
  width: 100vw;
  max-width: 100vw;
}
@media screen and (min-width: 48em) {
  .campaign-step-2 .incentive__img {
    width: 100%;
    max-width: 100%;
    margin-right: initial;
    margin-left: initial;
  }
}
/* お支払い方法 */
.CPN-howto-pay {
  padding: var(--rate48-72) 0 0;
}
.CPN-howto-pay-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6.1538461538vw;
}
.CPN-howto-pay-content + .CPN-howto-pay-content {
  margin-top: 9.2307692308vw;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-content {
    gap: 36px;
  }
  .CPN-howto-pay-content + .CPN-howto-pay-content {
    margin-top: 56px;
  }
}
.CPN-howto-pay-device {
  width: 65.3846153846vw;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-device {
    width: 255px;
  }
}
.CPN-howto-pay-service-content {
  display: flex;
  flex-direction: column;
  gap: 6.1538461538vw;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-service-content {
    flex-direction: row;
    gap: 48px;
  }
}
.CPN-howto-pay-service-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3.0769230769vw;
  width: 100%;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-service-item {
    width: 50%;
    gap: 24px;
  }
  .CPN-howto-pay-service-item:last-of-type::before {
    content: "";
    position: absolute;
    left: -24px;
    border-left: dotted 4px #d3d3d3;
    height: 100%;
  }
}
.CPN-howto-pay-service-txt {
  width: 100%;
  font-size: 3.5897435897vw;
  flex-grow: 1;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-service-txt {
    font-size: 16px;
  }
}
.CPN-howto-pay-btn {
  width: 100%;
  max-width: 75.3846153846vw;
  padding: 3.3333333333vw 6.6666666667vw;
  font-size: 3.5897435897vw;
}
.CPN-howto-pay-btn::after {
  right: 4.6153846154vw;
  width: 3.5897435897vw;
  height: 3.5897435897vw;
  margin-top: 0;
  transform: translate(0, -50%);
  font-size: 3.5897435897vw;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay-btn {
    max-width: 294px;
    padding: 13px 26px;
    font-size: 16px;
  }
  .CPN-howto-pay-btn::after {
    right: 18px;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.4rem;
  }
}
.CPN-howto-pay .notes {
  width: 100%;
  font-size: 3.0769230769vw;
}
@media screen and (min-width: 48em) {
  .CPN-howto-pay .notes {
    font-size: var(--fontSizeNotes);
  }
}
/* スライダー */
.CPN-common-steps-content {
  width: 100%;
  max-width: 856px;
}
.CPN-common-steps-list {
  height: auto;
}
.CPN-common-steps-list-body {
  min-width: 238px;
  height: auto;
}
.CPN-common-steps-list-item {
  width: 292px;
  padding-right: 64px;
  box-sizing: content-box;
}
.CPN-common-steps-list-item:after {
  right: 32px;
  width: 22px;
  height: 36px;
  background: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/icon-arrow-red.png) no-repeat 0 0;
  background-size: contain;
  transform: translate(50%, -50%);
}
.CPN-common-steps-list-item:last-child {
  padding-right: 0;
}
.CPN-common-steps-list-body img {
  height: auto;
}
@media screen and (min-width: 48em) {
  .CPN-common-steps-list {
    justify-content: center;
  }
  .CPN-common-steps-list-item {
    width: fit-content;
    max-width: 450px;
  }
  .CPN-common-steps-list-item + .CPN-common-steps-list-item {
    max-width: 292px;
  }
  .CPN-common-steps-list-item:after {
    width: 16px;
    height: 28px;
  }
  .CPN-step-txt {
    font-size: 18px;
  }
}

/* CPN-X-button */
.CPN-X-button-section {
  margin-top: var(--rate24-36);
  text-align: center;
}
.CPN-X-button-ttl {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  font-size: 5.1282051282vw;
  font-weight: 600;
}
.CPN-X-button-ttl::before,
.CPN-X-button-ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 6.1538461538vw;
  height: 9.7435897436vw;
  background: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/icon-x-deco.png) no-repeat 0 0;
  background-size: contain;
}
.CPN-X-button-ttl::before {
  left: 0;
  transform: translate(-125%, 0);
}
.CPN-X-button-ttl::after {
  right: 0;
  transform: translate(125%, 0) scale(-1,1);
}
.CPN-X-button.CPN-X-button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 87.6923076923vw;
  margin: 3.0769230769vw auto 0;
  padding: 4.1025641026vw 0;
  text-align: center;
  font-size: 3.5897435897vw;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 100vw;
  background: #000;
}
.CPN-X-button.CPN-X-button::after {
  font-family: rex-caret;
  content: "\e900";
  position: absolute;
  top: 50%;
  right: min(calc(var(--rate1) * 18), 18px);
  transform: translate(0, -50%);
  font-size: 1em;
  line-height: 1;
  color: #fff;
}
.CPN-X-button-logo {
  position: relative;
  margin-left: min(calc(var(--rate1) * 28), 28px);
}
.CPN-X-button-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-125%, -50%);
  width: 5.6410256410vw;
  height: 5.6410256410vw;
  background: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/logo-x.svg) no-repeat 0 0;
  background-size: contain;
}
@media screen and (min-width: 48em) {
  .CPN-X-button-section {
    margin-top: var(--rate24-36);
  }
  .CPN-X-button-ttl {
    font-size: var(--rate20-22);
  }
  .CPN-X-button-ttl::before,
  .CPN-X-button-ttl::after {
    width: min(calc(var(--rate1) * 24), 30px);
    height: min(calc(var(--rate1) * 38), 48px);
  }
  .CPN-X-button.CPN-X-button {
    max-width: 368px;
    margin: 12px auto 0;
    padding: 16px 0;
    font-size: var(--rate14-16);
  }
  .CPN-X-button-logo::before {
    width: 22px;
    height: 22px;
  }
}

/* CPN-mobile-kanban */
.CPN-mobile-kanban {
  position: relative;
  background-color: #ff008c;
  margin-top: min(calc(var(--rate1) * 72), 72px);
  margin-bottom: 10.2564102564vw;
  padding-bottom: min(calc(var(--rate1) * 12), 48px);
  text-align: center;
  color: #fff;
}
.CPN-mobile-kanban .rp-list {
  font-size: 3.0769230769vw;
  color: #fff;
}
.CPN-mobile-kanban-button.CPN-mobile-kanban-button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 87.6923076923vw;
  margin: 3.0769230769vw auto 0;
  padding: 4.1025641026vw 0;
  text-align: center;
  font-size: 3.5897435897vw;
  color: #ff008c;
  text-decoration: none;
  border-radius: 100vw;
  background: #fff;
}
.CPN-mobile-kanban-button.CPN-mobile-kanban-button::after {
  font-family: rex-caret;
  content: "\e900";
  position: absolute;
  top: 50%;
  right: min(calc(var(--rate1) * 18), 18px);
  transform: translate(0, -50%);
  font-size: 1em;
  line-height: 1;
  color: #ff008c;
}
.CPN-mobile-kanban-kupon {
  margin-top: 3.0769230769vw;
  font-size: 4.1025641026vw;
  font-weight: 600;
}
.CPN-mobile-kanban-txt {
  text-align: left;
  font-size: 4.1025641026vw;
}
.CPN-mobile-kanban-arrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(0,calc(100% - 1px));
}
@media screen and (min-width: 48em) {
  .CPN-mobile-kanban {
    padding-top: 48px;
    margin-top: min(calc(var(--rate1) * 72), 72px);
    margin-bottom: 40px;
    padding-bottom: min(calc(var(--rate1) * 12), 48px);
  }
  .CPN-mobile-kanban .rp-list {
    display: inline-block;
    font-size: var(--rate12-12);
  }
  .CPN-mobile-kanban-button.CPN-mobile-kanban-button {
    max-width: 368px;
    margin: 12px auto 0;
    padding: 16px 0;
    font-size: var(--rate14-16);
  }
  .CPN-mobile-kanban-kupon {
    margin-top: var(--rate12-12);
    font-size: var(--rate16-16);
  }
  .CPN-mobile-kanban-txt {
    text-align: center;
    font-size: var(--rate16-16);
  }
  .CPN-mobile-kanban-arrow {
    width: 160px;
    margin: 0 auto;
  }
}

/* キャンペーン参加方法（モバイル） */
.CPN-mobile-step {
  padding: 6.1538461538vw 0;
}
.CPN-mobile-step-title {
  margin-bottom: 11.0256410256vw;
}
.CPN-mobile-step-content {
  display: grid;
  gap: 10.2564102564vw;
}
.CPN-mobile-step-item {
  border-radius: 2.0512820513vw;
  border: solid 2px #bfbfbf;
}
.CPN-mobile-step-item-hd {
  position: relative;
  padding: 7.6923076923vw 3.5897435897vw 4.1025641026vw;
  text-align: center;
  border-radius: 1.7948717949vw 1.7948717949vw 0 0;
  background-color: #fff2f9;
}
.CPN-mobile-step-item-hd::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  width: 38.4615384615vw;
  height: 2px;
  margin: 0 auto;
  background: #fff2f9;
}
.CPN-mobile-step-item-hd-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 39.2307692308vw;
  margin: 0 auto;
  transform: translate(0,calc(-50% - 1px));
}
.CPN-mobile-step-item-title {
  font-size: 6.1538461538vw;
  font-weight: 600;
  line-height: 1.4;
}
.CPN-mobile-step-item-body {
  display: flex;
  flex-direction: column;
  gap: 4.1025641026vw;
  padding: 4.1025641026vw;
  text-align: left;
}
.CPN-mobile-step-item-txt.CPN-mobile-step-item-txt {
  font-size: 4.1025641026vw;
  text-decoration: none;
}
.CPN-mobile-step-item-txt-red {
  color: #df0101;
}
.CPN-mobile-step-item-body .rp-list {
  margin-top: 2.0512820513vw;
  font-size: 3.0769230769vw;
}
.CPN-mobile-btn.CPN-mobile-btn {
  display: block;
  width: 100%;
  padding: 3.0769230769vw 6.1538461538vw;
  text-align: center;
  font-size: 4.1025641026vw;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: #ff008c;
  border-radius: 50vw;
  text-decoration: none;
  box-shadow: 0px 1.0256410256vw 0px 0px rgba(0,0,0,.1);
}
.CPN-mobile-icon-link {
  position: relative;
  padding-right: 1.1em;
  color: #0072bf;
}
.CPN-mobile-icon-link .CPN-mobile-icon-link {
  padding: 0;
}
.CPN-mobile-icon-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
}
.CPN-mobile-icon-link .CPN-mobile-icon-link::after {
  right: -1em;
}
.CPN-mobile-icon-link-arrow.CPN-mobile-icon-link::after {
  background-image: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/icon-arrow-mobile.png);
}
.CPN-mobile-icon-link-window.CPN-mobile-icon-link::after {
  background-image: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/icon-window-mobile.png);
}
.CPN-mobile-step-incentive {
  margin-top: 4.1025641026vw;
}
.CPN-mobile-step-incentive .rp-list {
  margin-top: 2.0512820513vw;
  font-size: 3.0769230769vw;
}
@media screen and (min-width: 48em) {
  .CPN-mobile-step {
    padding: 24px 0 56px;
  }
  .CPN-mobile-step-title {
    display: block;
    max-width: 266px;
    margin: 0 auto 24px;
  }
  .CPN-mobile-step-content {
    gap: 24px;
  }
  .CPN-mobile-step-item {
    display: flex;
    border-radius: 16px;
  }
  .CPN-mobile-step-item-hd {
    display: flex;
    align-items: center;
    padding: 24px 36px;
    border-radius: 14px 0 0 14px;
  }
  .CPN-mobile-step-item-hd::before {
    display: none;
  }
  .CPN-mobile-step-item-hd-img {
    position: relative;
    width: 110px;
    transform: initial;
  }
  .CPN-mobile-step-item-title {
    font-size: 24px;
  }
  .CPN-mobile-step-item-body {
    gap: 16px;
    padding: 24px 32px;
  }
  .CPN-mobile-step-item-txt.CPN-mobile-step-item-txt {
    font-size: 16px;
  }
  .CPN-mobile-step-item-body .rp-list {
    margin-top: 8px;
    font-size: 12px;
  }
  .CPN-mobile-btn.CPN-mobile-btn {
    font-size: 16px;
    padding: 12px 24px;
    box-shadow: 0px 4px 0px 0px rgba(0,0,0,.1);
  }
  .CPN-mobile-step-item-body .CPN-mobile-btn.CPN-mobile-btn {
    max-width: 354px;
  }
  .CPN-mobile-step-incentive {
    margin-top: 16px;
    text-align: center;
  }
  .CPN-mobile-step-incentive .rp-list {
    display: inline-block;
    margin-top: 24px;
    font-size: 12px;
  }
}

/* よくある質問 */
.CPN-mobile-question {
  padding: 12.3076923077vw 0 14.3589743590vw;
}
.CPN-mobile-question-title {
  margin-bottom: 6.1538461538vw;
  text-align: center;
  font-size: 7.1794871795vw;
  font-weight: 600;
}
.CPN-mobile-question-content {
  font-size: 4.1025641026vw;
}
.CPN-mobile-question-item {
  border-top: solid 1px #bfbfbf;
  border-bottom: solid 1px #bfbfbf;
  padding: 4.1025641026vw 0;
}
.CPN-mobile-question-item:not(:first-of-type) {
  border-top: none;
}
.CPN-mobile-question-Q {
  position: relative;
  padding-left: 7.6923076923vw;
  font-weight: 600;
}
.CPN-mobile-question-Q::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  width: 5.6410256410vw;
  height: 5.6410256410vw;
  background-image: url(https://finance.jp.rakuten-static.com/rpay/img/campaign/mcdonalds/20250601/icon-arrow-question.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.CPN-mobile-question-Q.is-active::before {
  transform: rotate(180deg);
}
.CPN-mobile-question-A {
  display: none;
  margin-top: 4.1025641026vw;
}
.CPN-mobile-question-A.is-open {
  display: block;
}
.CPN-mobile-question-A .rp-list {
  font-size: 3.0769230769vw;
}
@media screen and (min-width: 48em) {
  .CPN-mobile-question {
    padding: 48px 0 56px;
  }
  .CPN-mobile-question-title {
    margin-bottom: 24px;
    font-size: 28px;
  }
  .CPN-mobile-question-content {
    font-size: 16px;
  }
  .CPN-mobile-question-item {
    padding: 16px 0;
  }
  .CPN-mobile-question-Q {
    padding-left: 30px;
  }
  .CPN-mobile-question-Q::before {
    width: 22px;
    height: 22px;
  }
  .CPN-mobile-question-A {
    margin-top: 16px;
  }
  .CPN-mobile-question-A .rp-list {
    font-size: 12px;
  }
}

/* プラン詳細 */
.CPN-mobile-detail-content {

}
.CPN-mobile-detail-content-button {
  display: grid;
  gap: 4.1025641026vw;
  margin: 6.1538461538vw 0 4.1025641026vw;
}
.CPN-mobile-detail-content-button .CPN-mobile-btn + .CPN-mobile-btn {
  border: solid 1px #ff008c;
  color: #ff008c;
  background: #fff;
}
.CPN-mobile-detail-content .rp-list {
  font-size: 3.0769230769vw;
}
@media screen and (min-width: 48em) {
  .CPN-mobile-detail-content {
    padding: 0 16px;
  }
  .CPN-mobile-detail-content-button {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0 16px;
  }
  .CPN-mobile-detail-content .rp-list {
    font-size: 12px;
  }
}

/* キャンペーン詳細 */
.campaignDetails__root .campaignDetails__row .mt_4 {
  margin-top: .4rem;
}
.campaignDetails__root .campaignDetails__row .mt_8 {
  margin-top: .8rem;
}
.campaignDetails__root .campaignDetails__row .mt_16 {
  margin-top: 1.6rem;
}
.campaignDetails__root .campaignDetails__row .list-icon-kome,
.campaignDetails__root .campaignDetails__row .list-icon-bullet,
.campaignDetails__root .campaignDetails__row .list-icon-hyphen {
  margin-left: 1em;
  color: #333;
  text-indent: -1em;
}
.campaignDetails__root .campaignDetails__row .list-icon-numbered {
  margin-left: 1.2em;
  color: #333;
  text-indent: -1.2em;
}
.campaignDetails__root .campaignDetails__row .list-icon-kome > li:before,
.campaignDetails__root .campaignDetails__row .list-icon-bullet > li:before,
.campaignDetails__root .campaignDetails__row .list-icon-hyphen > li:before {
  display: inline-block;
  width: 1em;
  text-indent: 0;
}
.campaignDetails__root .campaignDetails__row .list-icon-kome > li:before {
  content: "※";
  margin-right: 0;
}
.campaignDetails__root .campaignDetails__row .list-icon-bullet > li:before {
  content: "・";
}
.campaignDetails__root .campaignDetails__row .list-icon-hyphen > li:before {
  content: "-";
}

/* -------------------------------------------------------------------
pc layout
------------------------------------------------------------------- */
@media print,
screen and (min-width: 768px) {
  /* 変数 */
  /* commonの調整 */
  .CPN .rex-button.rex-button.rex-button.rex-button {
    padding: 12px 51px;
  }
  /* カンバン */
  .kanban .kanban__common__wrap {
    max-width: 1032px;
    margin-right: auto;
    margin-left: auto;
  }
  .kanban .kanban__hd__wrap {
    max-width: 390px;
  }
}