@charset "UTF-8";

.zen-maru-gothic {
  font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
  font-weight: 700;
}

.page-receipt {
  /* color */
  --receipt-blue: #005BAA;
  --receipt-blue-pale: #f4fafd;

  /* spacing */
  --receipt-spacing-20: min(20px, 20 / 750 * 100vw);
  --receipt-spacing-30: min(30px, 30 / 750 * 100vw);
  --receipt-spacing-40: min(40px, 40 / 750 * 100vw);
  --receipt-spacing-50: min(50px, 50 / 750 * 100vw);
  --receipt-spacing-60: min(60px, 60 / 750 * 100vw);
  --receipt-spacing-80: min(80px, 80 / 750 * 100vw);
  --receipt-outside: 7.333cqw;

  position: relative;
  overflow-x: clip;
  color: #333;

  & img {
    height: auto;
    vertical-align: middle;
  }

  & + .pane-footer {
    padding-block-start: 0;
  }
}

.page-receipt__container.-first {
  position: relative;
  background-color: var(--receipt-blue-pale);

  &::after {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 50%;
    z-index: 2;
    width: calc(1520 / 1280 * 100%);
    height: calc(var(--receipt-spacing-80) * 2);
    content: "";
    background-color: var(--receipt-blue-pale);
    border-radius: 50%;
    translate: -50% -50%;
  }
}

.page-receipt__container.-second {
  padding-block: calc(var(--receipt-spacing-80) * 2) 26.5vw;
  background-image: url("../img/bg_bottom_sp.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100%;
}

.page-receipt.page-free .ttl {
  padding-block: 0 1em;
  font-size: 7.2cqw;
  line-height: 1;
  color: #333;
}

.page-receipt.page-free .sttl {
  text-align: center;
}

.page-receipt + .pane-footer .block-page-top {
  bottom: 40vw;
}

.receipt__qr {
  display: none;
}

@media screen and (width >= 767px) {
  .page-receipt {
    --receipt-outside: 40px;
  }

  .page-receipt__container.-second {
    padding-block-end: var(--receipt-spacing-80);
    background-image: url("../img/bg_bottom_pc.png");
  }

  .page-receipt.page-free .ttl {
    font-size: 32px;
  }

  .page-receipt.page-free .sttl {
    font-size: calc(24 / 16 * 1em);
  }

  .receipt__qr {
    position: fixed;
    top: 220px;
    right: 20px;
    z-index: 10;
    display: block;
    transition: top 0.6s;
  }

  .sticky-header:has(.fixid) + .page-receipt .receipt__qr {
    top: 130px;
  }

  .page-receipt + .pane-footer .block-page-top {
    bottom: 220px;
  }
}

@media screen and (width >= 1024px) {
  .page-receipt + .pane-footer .block-page-top {
    bottom: 116px;
  }
}

/* media-object */
.media-object {
  display: grid;
  gap: var(--receipt-spacing-40) 1em;
}

@media screen and (width <= 766px) {
  .media-object__image {
    display: block;
    width: 60%;
    margin-inline: auto;
  }
}

@media screen and (width >= 767px) {
  .media-object {
    grid-template-columns: 1fr calc(267 / 790 * 100%);
  }
}

/*
MARK: list
*/
.receipt-list {
  &.-blue {
    --bullet-color: var(--receipt-blue);
  }

  & > li {
    position: relative;
    padding-inline-start: 1.333em;

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      color: var(--bullet-color, inherit);
      content: var(--bullet-obj, "◯");
    }

    &[data-bullet] {
      --bullet-obj: attr(data-bullet);
    }

    & + li {
      margin-block-start: 1em;
    }
  }
}

/*
MARK: header
*/
.receipt-header {
  text-align: center;
  background-color: var(--receipt-blue);
}

/*
MARK: fv
*/
.receipt-fv {
  position: relative;
  padding-block: var(--receipt-spacing-60);
  padding-inline: var(--receipt-spacing-40);
  text-align: center;
  background-image: url("../img/fv-bg_sp.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}

h1.receipt-fv__main {
  padding: 0;
  margin: 0;
  margin-block-end: var(--receipt-spacing-30);
}

.receipt-fv-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 40em;
  margin-inline: auto;
}

@media screen and (width <= 766px) {
  h1.receipt-fv__main {
    width: calc(100% + var(--receipt-spacing-20));
  }
}

@media screen and (width >= 767px) {
  .receipt-fv {
    padding-inline: min(140px, 140 / 1280 * 100vw) 140px;
    background-image: url("../img/fv-bg_pc.png");

    & .media-object {
      grid-template-columns: calc(267 / 790 * 100%) 1fr;
      max-width: 790px;
      margin-inline: auto;
    }

    & .media-object__content {
      order: 2;
    }
  }
}

/*
MARK: howto
*/
.receipt-howto {
  position: relative;
  z-index: 3;
  width: min(100%, 930px + var(--receipt-outside) * 2);
  padding-inline: var(--receipt-outside);
  margin-block-start: var(--receipt-spacing-60);
  margin-inline: auto;
}

.receipt-howto__en {
  margin-block-end: 1em;
  color: var(--receipt-blue);
  text-align: center;
}

@media screen and (width >= 767px) {
  .receipt-howto::before {
    position: absolute;
    inset-block-start: -3.2% ;
    inset-inline: 50%;
    width: 100vw;
    aspect-ratio: 1280 / 127;
    content: "";
    background-image: url("../img/bg_howto_pc.png");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    translate: -50% 0;
  }
}

/*
MARK: step
*/
.receipt-step {
  margin-block-start: var(--receipt-spacing-40);
}

.receipt-step__munber {
  font-size: min(38px, 48 / 750 * 100vw);
  color: #fff;
  text-align: center;
  background-color: var(--receipt-blue);
  border-radius: var(--receipt-spacing-30) var(--receipt-spacing-30) 0 0;
}

.receipt-step__container {
  padding: var(--receipt-spacing-40);
  padding-block-end: var(--receipt-spacing-60);
  background-color: #fff;
  border: 1px solid var(--receipt-blue);
  border-top-width: 0;
  border-radius: 0 0 var(--receipt-spacing-30) var(--receipt-spacing-30);
}

@media screen and (width >= 767px) {
  .receipt-step__container {
    padding-inline: min(70px, 70 / 750 * 100vw);
  }
}

/* step3 */
.step3__buta {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (width <= 766px) {
  .step3__header {
    position: relative;
  }

  .step3__buta {
    width: min(112px, 124 / 750 * 100vw);
  }
}

@media screen and (width >= 767px) {
  .step3 {
    position: relative;
  }

  .step3__buta {
    width: min(121px, 121 / 790 * 100%);
    translate: -8% 0;
  }
}

@media screen and (width >= 1024px) {
  .step3__buta {
    translate: -88% 0;
  }
}

/*
MARK: photo-tips
*/
.photo-tips {
  padding-block-end: var(--receipt-spacing-30);
  border-block-end: 1px dashed var(--receipt-blue);
}

.photo-tips__heading {
  position: relative;
  z-index: 1;
  padding: 0;
  margin-block-end: var(--receipt-spacing-30);
  font-weight: 500;
  line-height: 1;
  color: var(--receipt-blue);

  &::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    z-index: -1;
    height: 1px;
    content: "";
    border-block-end: 1px dashed var(--receipt-blue);
    translate: 0 -50%;
  }

  & > span {
    padding-inline: 1em;
    font-size: calc(18 / 16 * 1em);
    background-color: #fff;
  }
}

/*
MARK: photo-note
*/
.photo-note__heading {
  padding: 0;
  margin-block-end: 0.5em;
  font-size: calc(24 / 16 * 1em);
  font-weight: 500;
  color: var(--receipt-blue);
}

.photo-note__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--photo-note-gap, var(--receipt-spacing-30));
  justify-content: center;

  & > li {
    width: var(--photo-note-width, calc((100% - var(--receipt-spacing-30)) / 2));
  }
}

@media screen and (width >= 767px) {
  .photo-note {
    --photo-note-gap: var(--receipt-spacing-30) var(--receipt-spacing-40);
    --photo-note-width: calc((100% - var(--receipt-spacing-40) * 2) / 3);
  }
}

/*
MARK: border-box
*/
.border-box {
  padding: var(--receipt-spacing-20);
  margin-block: var(--receipt-spacing-30);
  border: 1px solid #dedede;

  &:last-child {
    margin-block-end: 0;
  }
}

/*
MARK: info
*/
.receipt-info {
  width: min(100%, 790px + var(--receipt-outside) * 2);
  padding-inline: var(--receipt-outside);
  margin-inline: auto;
}

.receipt-info__container:not(:last-child) {
  padding-block-end: var(--receipt-spacing-50);
  margin-block-end: var(--receipt-spacing-50);
  border-block-end: 1px dashed var(--receipt-blue);
}

.receipt-info__heading {
  padding: 0;
  margin-block-end: 0.75em;
  font-size: calc(24 / 16 * 1em);
  font-weight: 500;
  color: var(--receipt-blue);
  text-align: center;
  border-width: 0;
}

/*
MARK: follow
*/
.receipt-follow {
  position: fixed;
  inset-block-end: var(--follow-block-end, 0);
  inset-inline: 0;
  z-index: 10;
  border: 1px solid;
}

.receipt-follow__anchor {
  display: block;
  color: var(--receipt-blue);
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid;
}

.receipt-follow__label {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  padding-block: calc(10 / 16 * 1em);
  font-size: clamp(11px, calc(1.28vw + 6.22px), 16px);
  line-height: 1;

  &::before,
  &::after {
    width: 2px;
    height: 1.2em;
    content: "";
    border-left: 2px dotted;
  }

  &::before {
    rotate: -32deg;
  }

  &::after {
    rotate: 32deg;
  }
}

.receipt-follow__main {
  display: grid;
  justify-content: center;
  background-color: #ffe900;
}

.receipt-follow__close {
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  display: flex;
  gap: 0.333em;
  align-items: center;
  color: var(--receipt-blue);
  background-color: transparent;
  border-width: 0;

  & > span {
    position: relative;
    width: 1em;
    aspect-ratio: 1;

    &::before, &::after {
      position: absolute;
      inset: 0;
      width: 1px;
      height: 1em;
      margin: auto;
      content: "";
      background-color: currentColor;
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }
}

@media screen and (width >= 1024px) {
  .receipt-follow__close {
    inset-inline: auto 0;
    translate: 0 100%;
  }
}

/*
MARK: utility
*/
.u-blue {
  color: var(--receipt-blue);
}