@charset "UTF-8";

.page-rakuten-cp {
  --header-height: 0px;
}

.rkc {
  background-color: #fff;
}

.rkc ul {
  list-style: none;
}

.rkc_inner {
  width: 100%;
  max-width: 704px;
  margin: 0 auto;
}

.rkc_fv {
  width: 100%;
  height: 100%;
}

.rkc_fv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rkc_cta-wrap {
  width: 100%;
  max-width: 360px;
  margin: 22px auto;
}

.rkc_cta {
  width: 100%;
  max-width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: Hiragino Sans;
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0;
  text-align: center;
  background-color: #C78500;
  color: #fff;
  border-radius: 60px;
  padding: 0 24px;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .rkc_cta:hover {
    opacity: 0.7;
  }
}

.rkc_cta::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
}

.rkc_blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  margin: 0 0 64px;
}

.rkc #timerex_calendar {
  margin: -40px 0 0;
}

.rkc_block {
  width: 100%;
}

.rkc_block:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rkc_desc {
  font-family: "Hiragino Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #363843;
  letter-spacing: 0;
  text-align: left;
}

.rkc_desc span {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0;
  color: #C78500;
  text-align: left;
}

.rkc_note {
  font-family: "Hiragino Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: #363843;
  letter-spacing: 0;
  text-align: left;
}

.rkc_title {
  font-family: "Hiragino Sans";
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: #363843;
  letter-spacing: 0;
  text-align: left;
  border-bottom: 2px solid #C78500;
  padding: 0 0 2px;
  margin: 0 0 24px;
}

.rkc_content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rkc_content--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: item;
  list-style: none;
}

.rkc_content--list .rkc_content--item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Hiragino Sans";
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0;
  color: #363843;
}

.rkc_content--list .rkc_content--item::before {
  content: counter(item);
  counter-increment: item;
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #C78500;
  border: 1px solid #C78500;
  border-radius: 50%;
}

.rkc_notes {
  display: flex;
  flex-direction: column;
}

.rkc_note-item {
  display: block;
  font-family: "Hiragino Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: #363843;
  letter-spacing: 0;
  text-align: left;
}

.rkc_aside {
  display: flex;
  flex-direction: column;
  margin: 26px 0 0;
}

.rkc_aside--list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rkc_aside--item,
.rkc_aside--note {
  font-family: "Hiragino Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: #363843;
  letter-spacing: 0;
  text-align: left;
}

.rkc_aside--item:first-child {
  position: relative;
}

.rkc_aside--item:first-child::before {
  content: "：";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: #363843;
}

.rkc_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rkc_content--link {
  display: block;
  max-width: 100%;
  font-family: "Hiragino Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #C78500;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  margin: 24px 0 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.rkc_schedule {
  display: flex;
  flex-direction: column;
}

.rkc_schedule--item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.rkc_schedule--title {
  font-family: "Hiragino Sans";
  font-size: 18px;
  font-weight: 400;
  color: #363843;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
}

.rkc_schedule--title::before {
  content: "【";
}

.rkc_schedule--title::after {
  content: "】";
}

.rkc_schedule--desc {
  font-family: "Hiragino Sans";
  font-size: 18px;
  font-weight: 400;
  color: #363843;
  line-height: 1.8;
  letter-spacing: 0;
}

.rkc_detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.rkc_detail--item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rkc_detail--sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rkc_detail--subitem {
  position: relative;
  padding-left: 1em;
  font-family: "Hiragino Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
  color: #363843;
}

.rkc_detail--subitem::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.rkc_detail--title {
  position: relative;
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 14px;
  color: #363843;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
  padding: 0 0 0 33px;
  margin: 0;
}

.rkc_detail--title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  aspect-ratio: 1/1;
  background-image: url("../img/campaign/campaign-check.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.rkc_detail--desc {
  font-family: "Hiragino Sans";
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
  color: #363843;
}

.rkc_thanks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 29px 30px 31px;
  margin: 0 0 64px;
}

.rkc_thanks::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  aspect-ratio: 1/1;
  background-image: url("../img/campaign/campaign-deco.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.rkc_thanks::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  aspect-ratio: 1/1;
  background-image: url("../img/campaign/campaign-deco.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
}

.rkc_thanks--text {
  font-family: "Hiragino Sans";
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: center;
  color: #C78500;
}

.rkc_footer {
  width: 100%;
  background: #F7F7FA;
  padding: 32px 16px 8px;
}

.rkc_footer_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rkc_footer_logo {
  width: 100%;
  max-width: 175px;
  height: auto;
  margin: 0 0 32px;
}

.rkc_footer_links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 34px;
}

.rkc_footer_link--item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rkc_footer_link {
  font-family: Hiragino Sans;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
  color: #363843;
  text-decoration: underline;
}

.rkc_footer_link:hover {
  text-decoration: underline;
}

.rkc_footer_copy {
  font-family: Inter;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  color: #363843;
}


@media screen and (max-width: 740px) {
  .rkc_blocks {
    width: calc(100% - 32px);
    margin: 32px auto 64px;
  }

  .rkc_thanks {
    width: calc(100% - 32px);
    margin: 0 auto 64px;
  }
}

@media screen and (max-width: 550px) {
  .rkc_thanks--text {
    text-align: left;
  }
}

@media screen and (max-width: 450px) {
  .rkc_cta-wrap {
    width: 100%;
    max-width: 358px;
    margin: 16px auto;
  }

  .rkc_blocks {
    margin: 40px auto 64px;
    gap: 71px;
  }

  .rkc_desc {
    line-height: 2;
  }

  .rkc_title {
    padding: 0 0 5px;
    margin: 0 0 31px;
  }
}

@media screen and (max-width: 390px) {
  .rkc_cta-wrap {
    width: 100%;
    max-width: calc(358 / 390 * 100vw);
    margin: calc(16 / 390 * 100vw) auto;
  }

  .rkc_cta {
    height: calc(56 / 390 * 100vw);
    gap: calc(8 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
    border-radius: calc(60 / 390 * 100vw);
    padding: 0 calc(24 / 390 * 100vw);
  }

  .rkc_cta::after {
    border-width: calc(6 / 390 * 100vw) 0 calc(6 / 390 * 100vw) calc(8 / 390 * 100vw);
  }

  .rkc_inner {
    max-width: calc(704 / 390 * 100vw);
  }

  .rkc_blocks {
    gap: calc(71 / 390 * 100vw);
    width: calc(100% - calc(32 / 390 * 100vw));
    margin: calc(40 / 390 * 100vw) auto calc(64 / 390 * 100vw);
  }

  .rkc #timerex_calendar {
    margin: calc(-40 / 390 * 100vw) 0 0;
  }

  .rkc_block:nth-child(1) {
    gap: calc(8 / 390 * 100vw);
  }

  .rkc_desc {
    font-size: calc(16 / 390 * 100vw);
  }

  .rkc_desc span {
    font-size: calc(16 / 390 * 100vw);
  }

  .rkc_note {
    font-size: calc(12 / 390 * 100vw);
  }

  .rkc_title {
    font-size: calc(20 / 390 * 100vw);
    border-bottom-width: calc(2 / 390 * 100vw);
    padding: 0 0 calc(5 / 390 * 100vw);
    margin: 0 0 calc(31 / 390 * 100vw);
  }

  .rkc_content {
    gap: calc(18 / 390 * 100vw);
  }

  .rkc_content--list {
    gap: calc(10 / 390 * 100vw);
  }

  .rkc_content--list .rkc_content--item {
    gap: calc(8 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
  }

  .rkc_content--list .rkc_content--item::before {
    width: calc(24 / 390 * 100vw);
    height: calc(24 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
    border-width: calc(1 / 390 * 100vw);
  }

  .rkc_note-item {
    font-size: calc(12 / 390 * 100vw);
  }

  .rkc_aside {
    margin: calc(26 / 390 * 100vw) 0 0;
  }

  .rkc_aside--list {
    gap: calc(12 / 390 * 100vw);
  }

  .rkc_aside--item,
  .rkc_aside--note {
    font-size: calc(12 / 390 * 100vw);
  }

  .rkc_aside--item:first-child::before {
    right: calc(-12 / 390 * 100vw);
  }

  .rkc_wrap {
    gap: calc(8 / 390 * 100vw);
  }

  .rkc_content--link {
    font-size: calc(16 / 390 * 100vw);
    margin: calc(24 / 390 * 100vw) 0 0;
  }

  .rkc_schedule--title,
  .rkc_schedule--desc {
    font-size: calc(18 / 390 * 100vw);
  }

  .rkc_detail {
    gap: calc(24 / 390 * 100vw);
  }

  .rkc_detail--item {
    gap: calc(8 / 390 * 100vw);
  }

  .rkc_detail--sublist {
    gap: calc(2 / 390 * 100vw);
  }

  .rkc_detail--subitem {
    font-size: calc(14 / 390 * 100vw);
  }

  .rkc_detail--title {
    font-size: calc(14 / 390 * 100vw);
    padding: 0 0 0 calc(33 / 390 * 100vw);
  }

  .rkc_detail--title::before {
    width: calc(25 / 390 * 100vw);
  }

  .rkc_detail--desc {
    font-size: calc(14 / 390 * 100vw);
  }

  .rkc_thanks {
    gap: calc(8 / 390 * 100vw);
    padding: calc(29 / 390 * 100vw) calc(30 / 390 * 100vw) calc(31 / 390 * 100vw);
    width: calc(100% - calc(32 / 390 * 100vw));
    margin: 0 auto calc(64 / 390 * 100vw);
  }

  .rkc_thanks::before,
  .rkc_thanks::after {
    width: calc(40 / 390 * 100vw);
  }

  .rkc_thanks--text {
    font-size: calc(18 / 390 * 100vw);
  }

  .rkc_footer {
    padding: calc(32 / 390 * 100vw) calc(16 / 390 * 100vw) calc(8 / 390 * 100vw);
  }

  .rkc_footer_logo {
    max-width: calc(175 / 390 * 100vw);
    margin: 0 0 calc(32 / 390 * 100vw);
  }

  .rkc_footer_links {
    gap: calc(22 / 390 * 100vw);
    margin: 0 0 calc(34 / 390 * 100vw);
  }

  .rkc_footer_link--item {
    gap: calc(8 / 390 * 100vw);
  }

  .rkc_footer_link,
  .rkc_footer_copy {
    font-size: calc(10 / 390 * 100vw);
  }
}