@font-face {
  font-family: Nunito;
  src: url("assets/nunito-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: Nunito, sans-serif;
  color: #212121;
  background: #5e239e;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body, p { margin: 0; }
.page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 560px;
  padding: 48px 24px 40px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.notice::before, .notice::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
}
.notice::before { top: 0; background: #f4364c; }
.notice::after { bottom: 0; background: #41b6e6; }
.logo {
  position: relative;
  display: block;
  width: 142.667px;
  height: 32px;
  overflow: hidden;
  mask-image: url("assets/logo-mask-desktop.svg"), url("assets/logo-mask-desktop.svg"), url("assets/logo-mask-detail-desktop.svg");
  mask-size: 142.667px 32px;
  mask-repeat: no-repeat;
}
.logo img { display: block; position: absolute; top: -.041px; }
.legal {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  overflow-wrap: break-word;
  text-box: trim-both cap alphabetic;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.signature {
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #616161;
  text-align: center;
  white-space: nowrap;
  font-size: 16px;
  line-height: normal;
}
.signature p { text-box: normal; }
.arrow { display: flex; flex-shrink: 0; }
.arrow img { display: block; }
.arrow-red { align-items: flex-start; }
.arrow-blue { align-items: flex-end; }
.arrow-blue img { transform: rotate(180deg); }
.process-number { white-space: nowrap; }

@media (max-width: 600px) {
  .notice { gap: 24px; padding: 40px 24px 32px; }
  .logo {
    width: 107px;
    height: 24px;
    mask-image: url("assets/logo-mask-mobile.svg"), url("assets/logo-mask-mobile.svg"), url("assets/logo-mask-detail-mobile.svg");
    mask-size: 107px 24px;
  }
  .logo img { width: auto; height: auto; top: -.031px; }
  .legal, .signature { font-size: 14px; }
  .signature { height: 45px; }
}

@media (max-height: 430px) {
  .page { padding-bottom: 32px; }
}