@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Material+Symbols+Rounded:500|Inter:700");
/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/675ef7a38fd7981d2cc029a9.675ef7a48fd7981d2cc029ac.jATOgzX.hcp.png");

:root {
  --font-family-base: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  --font-family-bold: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", sans-serif;
}

* {
  font-family: var(--font-family-base);
}

.button,
.title,
h1, h2, h3, h4, h5, h6,
[class*="bold"] {
  font-family: var(--font-family-bold);
}

button {
  cursor: pointer;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

.bold {
  font-weight: bold !important;
}

.black {
  color: black !important;
}

.frame-758533775 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
}

.pcheader-state6 {
  height: 35.07px;
  position: relative;
  width: 98px;
}

.vector-2 {
  left: 0;
  width: 643px;
}

.frame-758534012 {
  flex: 0 0 auto;
  position: relative;
}

.frame-758534015 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.frame-758534010 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}

.frame-75853 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.frame-7585340 {
  align-items: center;
  background-color: var(--foundation-greengreen-700);
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 0px 8px;
  position: relative;
}

.frame-758533746 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.group-758533744 {
  display: flex;
  height: 84px;
  position: relative;
  width: 662px;
}

.frame-758533934 {
  align-items: flex-end;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  position: relative;
}

.frame-2561 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  justify-content: flex-end;
  position: relative;
}

.frame-2600 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-end;
  position: relative;
  width: 100%;
}

.frame-758533926 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
  width: 100%;
}

.badge {
  align-items: center;
  background-color: var(--foundation-orangeorange-50);
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0px 8px;
  position: relative;
}

.pcinput {
  align-items: center;
  align-self: stretch;
  background-color: var(--surfacebaseprimary);
  border: 1px solid;
  border-color: var(--borderlight);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  height: 44px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  margin-right: -1.00px;
  overflow: hidden;
  padding: 0px 12px;
  position: relative;
  width: 100%;
}

.placeholder {
  flex: 1;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.span1 {
  text-decoration: underline;
}

.frame-59 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.button {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.iconsearch {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.frame-758533646 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 56px;
  position: relative;
}

.frame-758533828 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  left: 0;
  padding: 16px;
  position: absolute;
  top: 0;
}

.number {
  letter-spacing: 0.80px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.x01 {
  letter-spacing: 0.80px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-758533648 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.step1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.frame-48 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.step {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.pcfooter {
  align-items: center;
  align-self: stretch;
  background-color: var(--labelsprimary);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  position: relative;
  width: 100%;
}

.logo {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 8px;
  position: relative;
}

.step-4 {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.vector-3 {
  height: 720px;
  position: absolute;
  top: 0;
}

.frame-222 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: space-between;
  position: relative;
}

.frame-758533722 {
  flex: 0 0 auto;
  height: 22px;
  position: relative;
}

.frame-758533724-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
}

.frame-758533797-1 {
  align-items: center;
  background-color: var(--surfacebrandyellow);
  border: 1px solid;
  border-color: var(--rankgoldprimary);
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  height: 32px;
  justify-content: center;
  padding: 4px 8px;
  position: relative;
}

.group-758533753 {
  height: 540px;
  left: 0;
  position: absolute;
  top: 0;
  width: 239px;
}

.frame-758534014 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  margin-left: -2.62px;
  margin-right: -2.62px;
  position: relative;
}

.frame-75853-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.frame-7585340-1 {
  align-items: center;
  background-color: var(--foundation-greengreen-700);
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 0px 8px;
  position: relative;
}

.frame-758534013 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.frame-758533949-1 {
  align-items: flex-start;
  background-color: var(--surfacebaseprimary);
  border-radius: 4.87px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4.87px;
  padding: 9.75px 7.31px;
  position: relative;
}

.frame-758533933-1 {
  align-items: flex-end;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4.87px;
  padding: 0px 4.87px 0px 0px;
  position: relative;
}

.frame-758533948-1 {
  align-items: flex-end;
  background-color: var(--surfacebaseprimary);
  border-radius: 4.87px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4.87px;
  margin-top: -4px;
  padding: 9.75px 6.09px;
  position: relative;
}

.group-758533748-1 {
  height: 215.53px;
  position: relative;
  width: 358px;
}

.overlap-group1-2 {
  height: 216px;
  position: relative;
}

.x001-white-1 {
  align-items: flex-end;
  background-image: url(../img/change-color-2@2x.png);
  background-size: 100% 100%;
  display: flex;
  height: 212px;
  left: 0;
  min-width: 351px;
  position: absolute;
  top: 0;
}

.mockup-2 {
  height: 183px;
  left: 33px;
  position: absolute;
  top: 6px;
  width: 284px;
}

.shadow-2 {
  height: 212px;
  width: 351px;
}

.reflection-2 {
  height: 212px;
  width: 351px;
}

.frame-758533965-1 {
  align-items: flex-end;
  display: flex;
  height: 110px;
  justify-content: flex-end;
  left: 304px;
  position: absolute;
  top: 105px;
  width: 54px;
}

.group-758533752-1 {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -10.2px;
  margin-right: 0.2px;
  width: 61.57px;
}

.group-758533751-1 {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  margin-right: 0.1px;
  width: 61.51px;
}

.x005-white-1 {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  height: 123.37px;
  position: relative;
  width: 61.51px;
}

.i-phone-13-1 {
  background-image: url(../img/shadow-4@2x.png);
  background-size: 100% 100%;
  height: 123.37px;
  position: relative;
  width: 61.51px;
}

.mockup-3 {
  height: 106px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 49px;
}

.shadow-3 {
  height: 111px;
  width: 55px;
}

.reflection-3 {
  height: 111px;
  width: 55px;
}

.frame-2561-1 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  justify-content: flex-end;
  position: relative;
}

.frame-2600-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-end;
  position: relative;
  width: 100%;
}

.frame-758533926-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
  width: 100%;
}

.frame-7585337 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  position: relative;
}

.badge-1 {
  align-items: center;
  background-color: var(--foundation-orangeorange-50);
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0px 8px;
  position: relative;
}

.pcinput-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--surfacebaseprimary);
  border: 1px solid;
  border-color: var(--borderlight);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  height: 44px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  margin-right: -1.00px;
  overflow: hidden;
  padding: 0px 12px;
  position: relative;
  width: 100%;
}

.placeholder-1 {
  flex: 1;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.pcbutton-2 {
  align-self: stretch;
  flex: 0 0 auto;
  width: 100%;
}

.frame-59-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.iconsearch-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.group-758533757 {
  height: 183.38px;
  position: relative;
  width: 334px;
}

.x-container {
  height: 183px;
  position: relative;
  width: 334px;
}

.group-758533756 {
  display: flex;
  flex-direction: column;
  height: 90px;
  left: 0;
  position: absolute;
  top: 22px;
  width: 54px;
}

.frame-758533995 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 32px;
  left: 5px;
  position: absolute;
  top: 0;
}

.group-758533755 {
  align-items: flex-end;
  display: flex;
  gap: 1px;
  height: 87px;
  left: 254px;
  min-width: 80px;
  position: absolute;
  top: 31px;
}

.ellipse-container {
  align-items: flex-start;
  align-self: flex-end;
  display: flex;
  gap: 20px;
  height: 39px;
  min-width: 60px;
}

.frame-758533994 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.x847-1 {
  height: 302px;
  left: -32px;
  position: absolute;
  top: -62px;
  width: 390px;
}

.x7-nesta {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 21px;
  position: relative;
}

.x7-nesta-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 21px;
  position: relative;
}

.frame-758533999 {
  align-items: center;
  align-self: stretch;
  background-color: var(--surfacebaseprimary);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  padding: 64px 16px;
  position: relative;
  width: 100%;
}

.frame-758534017 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 32px;
  position: relative;
  width: 100%;
}

.group-758533758 {
  display: flex;
  gap: 3px;
  height: 76.57px;
  margin-right: -8.46px;
  position: relative;
  width: 334.46px;
}

.group-758533759 {
  align-items: flex-start;
  display: flex;
  height: 226.43px;
  min-width: 326px;
}

.frame-7585336 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.x1169-2 {
  height: 286px;
  left: -32px;
  position: absolute;
  top: -22px;
  width: 390px;
}

.x257-1 {
  height: 284px;
  left: -32px;
  position: absolute;
  top: -45px;
  width: 390px;
}

.step2 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.x462-1 {
  height: 266px;
  left: -32px;
  position: absolute;
  top: -24px;
  width: 390px;
}

.step3 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.frame-79 {
  align-items: center;
  align-self: stretch;
  background-color: var(--surfacebaseprimary);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 32px;
  padding: 64px 0px;
  position: relative;
  width: 100%;
}

.frame-7585336-item {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--surfacebaseprimary);
  border: 1px solid;
  border-color: var(--borderlight);
  border-radius: 16px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 16px;
  position: relative;
  width: 100%;
}

.step2-1 {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.google {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 36px;
  position: relative;
}

.step3-1 {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.step4 {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.lpsp8 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  background-image: url(../img/lpsp8.png);
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 889.99px;
  overflow: hidden;
  padding: 64px 16px;
  position: relative;
  width: 100%;
}

.frame-758534013-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  margin-left: -2.62px;
  margin-right: -2.62px;
  position: relative;
}

.spfotter {
  align-items: center;
  align-self: stretch;
  background-color: var(--labelsprimary);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  padding: 32px 24px;
  position: relative;
  width: 100%;
}

.frame-97-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.logo-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 8px;
  position: relative;
}

.title {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-88-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px 4px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.copyright-1 {
  letter-spacing: 0;
  line-height: 15px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}