* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 750px) {
  html {
    width: 100%;
    height: 100%;
    font-size: calc(1 * (100vw / 393));
  }
}
@media screen and (min-width: 650px) {
  html {
    width: 100%;
    height: 100%;
    font-size: calc(1 * (600px / 393));
  }
  body {
    max-width: 600px;
    margin-inline: auto;
    width: 100%;
  }
}
.logo img {
  width: 141.95rem;
  height: 24rem;
}
header {
  width: 100%;
  height: 62rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 16rem;
  background-color: #ffffff;
}
.intro-writing {
  border: 1rem solid #00bc3f;
  width: 177.34rem;
  height: 36rem;
}
.intro-writing {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 12rem;
  line-height: 14rem;
  letter-spacing: 0%;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
}
.intro-writing p {
  width: 140rem;
  height: 28rem;
}
main .kv {
  background: url("./assets/image\ 1.png");
  background-size: cover;
  width: 100%;
  height: 211rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.post-writing {
  width: 383rem;
  height: 79rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15rem;
}
.post-writing-1 {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  background-color: #008d18b2;
  width: 335rem;
  height: 38rem;
  padding-right: 9rem;
  padding-left: 9rem;
  border-radius: 4rem;
  font-weight: 600;
  font-size: 26rem;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #ffffff;
  margin-bottom: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.post-writing-1 img {
  width: 8rem;
  height: 10rem;
  position: absolute;
  bottom: 3rem;
  right: 5rem;
}
.kv > p {
  position: absolute;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 10rem;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
  right: 5rem;
  bottom: 4rem;
}
.post-writing-2 {
  background-color: #008d18b2;
  border-radius: 4rem;
  width: 220rem;
  height: 34rem;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 19rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  bottom: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.post-table {
  width: 306rem;
  height: 84rem;
  display: flex;
  gap: 18rem;
  margin-top: 12rem;
}
.post-table-1 {
  width: 89rem;
  height: 84rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.post-table-2 {
  width: 92rem;
  height: 84rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.post-table-3 {
  width: 89rem;
  height: 84rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.post-table-writing {
  position: absolute;
  width: 56rem;
  height: 28rem;
  background-color: #003512;
  border-radius: 100rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.post-table-1-writing p {
  color: #ffffff;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-size: 12rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}
.post-table-writing {
  color: #ffffff;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-size: 12rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}
.post-table-2-writing {
  width: 89rem;
  height: 28rem;
}
.post-table-table {
  position: absolute;
  bottom: 0;
  width: 89rem;
  height: 71rem;
  background-color: #ffffff;
  z-index: 1;
  border-radius: 10rem;
  border: 2rem solid #003512;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 12rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.post-table-table p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}
.post-table-1-table p {
  font-size: 16rem;
  margin-top: 27rem;
}
.post-table-2-table p {
  font-size: 14rem;
  margin-top: 20rem;
  width: 61rem;
  height: 39rem;
  line-height: 21rem;
}
.post-table-3-table p {
  font-size: 13rem;
  margin-top: 20rem;
  width: 75rem;
  height: 40rem;
  line-height: 21rem;
}
.post-table-1-table span {
  font-size: 18rem;
}
.post-table-3-table span {
  font-size: 17rem;
}
.input-btn {
  width: 393rem;
  height: 28rem;
  background-color: #003512;
}
.input-btn p {
  color: #ffffff;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}
.option-interface {
  width: 393rem;
  height: 391rem;
  background-color: #f6fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .35s ease-in-out;
  transform: translateX(0);
}
.option-step {
  width: 208rem;
  height: 31.87rem;
  margin-top: 15rem;
  display: flex;
  align-items: center;
  margin-bottom: 14.13rem;
  position: relative;
}
.step-text {
  width: 39rem;
  height: 16rem;
  color: #003512;
  margin-right: 11rem;
}
.step-text p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16rem;
  line-height: 16rem;
  letter-spacing: 0%;
  vertical-align: middle;
}
.step-circle {
  width: 158rem;
  height: 31.87rem;
  display: flex;
  gap: 9.96rem;
}
#circle-1 {
  background-color: #d34b4b;
}
.circle-symbol {
  width: 31.87rem;
  height: 31.87rem;
  background-color: #dbdbdb;
  border-radius: 100%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.circle-symbol p {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 17.26rem;
  line-height: 17.26rem;
  letter-spacing: 0%;
  vertical-align: middle;
}
.line-symbol {
  width: 152.69rem;
  height: 2.66rem;
  background-color: #dbdbdb;
  position: absolute;
  right: 1.13rem;
  z-index: 1;
}
.option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 312rem;
  height: 306rem;
}
.option-intro {
  display: flex;
  justify-content: center;
  color: #003512;
  margin-bottom: 12rem;
}
.option-intro p {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 31.72rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}
.option-detail {
  display: flex;
  flex-direction: column;
  width: 312rem;
  height: 262rem;
  gap: 12rem;
}
.detail-group {
  width: 312rem;
  height: 125rem;
  display: flex;
  gap: 12rem;
}
.group {
  width: 150rem;
  height: 125rem;
  background-color: #ffffff;
  border: 1rem solid #000000;
  border-radius: 10px;
  box-shadow: 5px 4px 10px 0px #00bc3f1a;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.group:hover {
  scale: 1.05;
  background-color: #00bc3f66;
}
.group-1,
.group-2 {
  padding-block: 18rem;
}
.group-3 {
  padding-block: 12rem;
}
.group-4 {
  padding-block: 13rem;
}
.group-1 > img {
  width: 85rem;
  height: 54rem;
}
.group-2 > img {
  width: 85rem;
  height: 54rem;
}
.group-3 > img {
  width: 85rem;
  height: 66rem;
}
.group-4 > img {
  width: 85rem;
  height: 64rem;
}
.triangle {
  width: 5rem;
  height: 10rem;
  position: absolute;
  right: 0;
}
.triangle-text {
  margin-top: 7rem;
  color: #003512;
  display: flex;
  align-items: center;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.triangle-text-1 {
  width: 116rem;
  height: 28rem;
}
.triangle-text-2 {
  width: 102rem;
  height: 28rem;
}
.triangle-text-3 {
  width: 102rem;
  height: 28rem;
}
.triangle-text-4 {
  width: 66rem;
  height: 28rem;
}
footer {
  width: 393rem;
  height: 76rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-content {
  width: 383rem;
  height: 48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phone-number {
  color: #003512;
  width: 180rem;
  height: 24rem;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 10rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}
.link-address {
  display: flex;
  width: 220rem;
  height: 12rem;
  justify-content: space-between;
}
.link-address a p {
  margin-top: 12rem;
  color: #003512;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 10rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
}
.option-interface-step1 {
  width: 393rem;
  height: 541rem;
  background-color: #f6fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.option-interface-step1 > p {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 31.72rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  width: 318rem;
  height: 32rem;
  color: #003512;
  margin-bottom: 12rem;
}
.option-step-info {
  width: 329rem;
  height: 313rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  transform: translateX(0px);
  transition: all 0.35s ease-in-out;
}
.option-step-info-detail {
  width: 312rem;
  height: 99rem;
  display: flex;
  justify-content: space-between;
}
.option-step-detail {
  width: 150rem;
  height: 99rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1rem solid #000000;
  border-radius: 10rem;
  background-color: #ffffff;
}
.option-step-detail img {
  width: 85rem;
  height: 54rem;
}
.option-step-detail-writing {
  display: flex;
  align-items: center;
  position: relative;
}
.option-step-detail-writing img {
  width: 5rem;
  height: 10rem;
  position: absolute;
  right: 0;
}
.option-step-detail-writing p {
  color: #003512;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}
.option-step-detail-1 {
  width: 127rem;
  height: 28rem;
}
.option-step-detail-2 {
  width: 127rem;
  height: 28rem;
}
.option-step-detail-3 {
  width: 85rem;
  height: 28rem;
}
.option-step-detail-4 {
  width: 85rem;
  height: 28rem;
}
.option-step-detail-5 {
  width: 124rem;
  height: 28rem;
}
.option-step-detail-6 {
  width: 57rem;
  height: 28rem;
}
.btn-setting {
  margin-top: 36rem;
  width: 329rem;
  height: 54rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.before-btn {
  width: 39rem;
  height: 28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background-color: #f6fff9;
}
.before-btn img {
  width: 5rem;
  height: 10rem;
}
.next-btn-manage img {
  width: 5rem;
  height: 12rem;
}
.before-btn p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 12rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.next-btn-manage {
  width: 201rem;
  height: 54rem;
  background-color: #00bc3f;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5rem;
}
.next-btn {
  width: 81rem;
  height: 28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.next-btn p {
  color: #ffffff;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 16rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}
#circle-2-step2 {
  background-color: #d34b4b;
}
#circle-3-step3 {
  background-color: #d34b4b;
}
.option-interface-step2 {
  width: 393rem;
  height: 541rem;
  background-color: #f6fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.option-interface-step2 > p {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 31.72rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  width: 318rem;
  height: 32rem;
  color: #003512;
  margin-bottom: 12rem;
}
.select-group {
  width: 324rem;
  height: 43rem;
  gap: 8rem;
  display: flex;
  margin-bottom: 42rem;
}
.select-group select {
  width: 150rem;
  height: 43rem;
  border-radius: 10rem;
}
.select-group-age select {
  width: 324rem;
  height: 43rem;
  border-radius: 10rem;
}
.option-interface-step3 {
  width: 393rem;
  height: 541rem;
  background-color: #f6fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#circle-4-step4 {
  background-color: #d34b4b;
}
.input-group {
  width: 329rem;
  height: 293rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.input-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.name-fields {
  display: flex;
  justify-content: flex-start;
  width: 324rem;
  gap: 8rem;
}

.name-field {
  width: 158rem;
}
input {
  padding: 7.5rem 15rem 7.5rem 15rem;
  width: 324rem;
  height: 43rem;
  border-radius: 10rem;
  border: 1rem solid;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #003512;
}
input::placeholder {
  color: #003512; /* Light gray color */
  opacity: 0.4; /* Ensure it's fully opaque */
}
.input-name > div:first-child {
  width: 102rem;
  height: 32rem;
  display: flex;
  margin-bottom: 12rem;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: space-between;
}
.input-name > div > p,
.input-number > div > p,
.input-email > div > p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 16rem;
  line-height: 31.72rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.input-name > div > div > p,
.input-number > div > div > p,
.input-email > div > div > p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 12rem;
  line-height: 31.72rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
}
.input-name > div > div {
  background-color: #d34b4b;
  width: 38rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-number > div > div {
  background-color: #d34b4b;
  width: 38rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-email > div > div {
  background-color: #d34b4b;
  width: 38rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.input-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 329rem;
  height: 87rem;
}
.input-number > div {
  width: 134rem;
  height: 32rem;
  display: flex;
  margin-bottom: 12rem;
  align-items: center;
  justify-content: space-between;
}
.input-email > div {
  width: 166rem;
  height: 32rem;
  display: flex;
  margin-bottom: 12rem;
  align-items: center;
  justify-content: space-between;
}
.thank-page {
  width: 393rem;
  height: 780rem;
  background-color: #f6fff9;
  padding-top: 15rem;
}
.thank-content {
  width: 329rem;
  height: 662rem;
  background-color: #f6fff9;
}
.thank-thanks {
  width: 315rem;
  height: 62rem;
}
.thank-thanks p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 22rem;
  line-height: 31rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.thank-intro {
  width: 330rem;
  height: 46rem;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 14rem;
  line-height: 23rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}
.thank-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42rem;
}
.thank-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thank-register {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.guide-intro-write p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 31rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.guide-intro-btn div > img {
  width: 5rem;
  height: 10rem;
}
.guide-intro-btn {
  width: 281rem;
  height: 54rem;
  background-color: #d34b4b;
  border: none;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12rem;
}
.guide-intro-btn div > p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 16rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  width: 144rem;
  height: 28rem;
}
.guide {
  width: 329rem;
  height: 263rem;
  border: 2px solid #003512;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.guide-intro-btn > div {
  width: 161rem;
  height: 28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guide-intro > p {
  margin-top: 8rem;
  width: 280rem;
  height: 120rem;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.thank-line {
  width: 329rem;
  height: 199rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #003512;
  border-radius: 10rem;
  background-color: #ffffff;
}
.thank-line-intro {
  width: 288rem;
  height: 161rem;
  display: flex;
  flex-direction: column;
}
.thank-line-intro-writing-1 {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 18rem;
  line-height: 31rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.thank-line-intro button {
  width: 281rem;
  height: 54rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #08c656;
  border: none;
  border-radius: 5rem;
  margin-top: 12rem;
  margin-bottom: 8rem;
}
#line-ping {
  width: 42.15rem;
  height: 39rem;
}
.thank-line-intro button div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 199.15rem;
  height: 39rem;
}
.thank-line-intro button div p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 16rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
}
#next-ping {
  width: 5rem;
  height: 12rem;
}
.thank-line-intro-writing-2 {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
.select-group select option {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #003512;
}
select {
  appearance: none;
  background: url("./assets/down.png") no-repeat right 10px center;
  background-color: white;
  background-size: 10rem 5rem; /* Adjust the size here */
  padding-right: 0px;
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 28rem;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #003512;
}
#option-interface-step1,
#option-interface-step2,
#option-interface-step3,
#thank-page {
  transform: translateX(100%);
  transition: all 0.35s ease-in-out;
  display: none;
}
.input-email > p,
.input-number > p {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 10rem;
  line-height: 12rem;
  letter-spacing: 0%;
  color: #d34b4b;
}
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 70px;
  height: 70px;
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid #ffffff;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}