*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img {
  width: 100%;
}

a {
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}

body {
  font-family: "Quicksand", "Noto Sans JP", sans-serif;
  color: #333;
  font-size: clamp(0.875rem, 0.745rem + 0.43vw, 1.125rem);
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.top-logo img {
  max-width: 174px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .top-logo img {
    width: 132px;
    margin: 0.5rem auto;
  }
}

.fv {
  display: flex;
  position: relative;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .fv {
    justify-content: center;
  }
}
.fv-left {
  width: 6%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .fv-left {
    display: none;
  }
}
.fv-left-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.fv-left img {
  width: 1.5rem;
}
.fv-right {
  width: 88%;
  position: relative;
}
.fv-right::before, .fv-right::after {
  content: "";
  position: absolute;
  width: 25%;
  aspect-ratio: 3/2;
  bottom: 1rem;
}
.fv-right::before {
  background: url(./images/illust_1.png) no-repeat center/contain;
  left: 10%;
  width: 23%;
}
@media screen and (max-width: 767px) {
  .fv-right::before {
    width: 120px;
    bottom: -2.5rem;
    left: 0;
  }
}
.fv-right::after {
  background: url(./images/illust_2.png) no-repeat center/contain;
  right: 10%;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .fv-right::after {
    width: 140px;
    bottom: -2.5rem;
    right: 0;
  }
}
.fv-right > img {
  width: 100%;
  min-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .fv-right > img {
    min-height: 325px;
  }
}
.fv-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  z-index: 3;
}
.fv-text img {
  margin: 0 auto -2%;
  max-width: 300px;
}
@media screen and (max-width: 767px) {
  .fv-text img {
    max-width: 200px;
  }
}
.fv-text h1 {
  font-size: clamp(2rem, 1.022rem + 3.26vw, 3.875rem);
  color: #FF009E;
  text-shadow: 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF, 0px 0px 18.8544px #FFFFFF;
  letter-spacing: 0.04em;
  font-weight: black;
}
.fv-text h1 span {
  font-size: clamp(1.625rem, 0.842rem + 2.61vw, 3.125rem);
  text-shadow: 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF, 0px 0px 9px #FFFFFF;
}
.fv-text p {
  font-size: clamp(0.75rem, 0.489rem + 0.87vw, 1.25rem);
  font-weight: bold;
  background: #F1F1F1;
  border: 1px solid #B6B6B6;
  border-radius: 55px;
  padding: 1rem 1.5rem;
  line-height: 1;
  width: -moz-fit-content;
  width: fit-content;
  margin: 2rem auto 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .fv-text p {
    margin-top: 0.5rem;
  }
}
.fv-text p:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0px;
  top: 0px;
  background: #ECDF08;
  z-index: -1;
}

.point {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .point {
    margin-bottom: 4rem;
  }
}
.point-box {
  width: 80%;
  margin: 0 auto;
  max-width: 1080px;
  background: #04AADB;
  color: #fff;
  text-align: center;
  padding: 2.5rem 3rem;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 1200px) {
  .point-box {
    width: 85%;
    padding: 1.5rem;
  }
}
@media screen and (max-width: 1024px) {
  .point-box {
    width: 95%;
    max-width: 860px;
  }
}
@media screen and (max-width: 767px) {
  .point-box {
    padding: 2rem;
    width: 90%;
    margin-top: 2.5rem;
  }
}
.point-box::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  background: url(./images/border.png) no-repeat center/contain;
}
@media screen and (max-width: 1024px) {
  .point-box::before {
    top: 0.5rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
  }
}
@media screen and (max-width: 767px) {
  .point-box::before {
    background: url(./images/border-2.png) no-repeat center/contain;
  }
}
.point-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./images/bg1.png) no-repeat left/cover;
  filter: brightness(3);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .point-box::after {
    background: url(./images/bg2.png) no-repeat bottom/cover;
    filter: brightness(3);
  }
}
.point-box h2 {
  font-weight: 900;
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  line-height: 41px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #ECDF08;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 1rem;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .point-box h2 {
    margin: 0 auto 0.25rem;
  }
}
@media screen and (max-width: 767px) {
  .point-box h2 {
    width: 85%;
    line-height: 1.5;
  }
}
.point-box h2::before, .point-box h2::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
  .point-box h2::before, .point-box h2::after {
    width: 40px;
  }
}
@media screen and (max-width: 767px) {
  .point-box h2::before, .point-box h2::after {
    width: 20px;
  }
}
.point-box h2::before {
  left: -80px;
}
@media screen and (max-width: 1024px) {
  .point-box h2::before {
    left: -50px;
  }
}
@media screen and (max-width: 767px) {
  .point-box h2::before {
    left: -30px;
  }
}
.point-box h2::after {
  right: -80px;
}
@media screen and (max-width: 1024px) {
  .point-box h2::after {
    right: -50px;
  }
}
@media screen and (max-width: 767px) {
  .point-box h2::after {
    right: -30px;
  }
}
.point-box h2 span {
  color: #fff;
}
.point-box p {
  font-weight: 500;
  font-size: clamp(1rem, 0.87rem + 0.43vw, 1.25rem);
  line-height: 140%;
  letter-spacing: 0.04em;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 767px) {
  .point-box p br:not(.sp) {
    display: none;
  }
}
.point .point1 {
  position: absolute;
  width: 12%;
  top: -15%;
  left: 2.5%;
}
@media screen and (max-width: 1200px) {
  .point .point1 {
    width: 10%;
    top: -10%;
  }
}
@media screen and (max-width: 1024px) {
  .point .point1 {
    width: 8%;
    top: -5%;
  }
}
@media screen and (max-width: 767px) {
  .point .point1 {
    width: 55px;
    top: -1rem;
    left: 0%;
  }
}
.point .point2 {
  position: absolute;
  width: 15%;
  right: -2.5%;
  bottom: 0;
}
@media screen and (max-width: 1200px) {
  .point .point2 {
    width: 13%;
  }
}
@media screen and (max-width: 1024px) {
  .point .point2 {
    bottom: -5%;
    width: 9%;
  }
}
@media screen and (max-width: 767px) {
  .point .point2 {
    bottom: -2rem;
    width: 70px;
  }
}

.ranking {
  background-color: #EFF7FC;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .ranking {
    padding: 1rem 0 2.5rem;
  }
}
.ranking::after {
  content: "";
  position: absolute;
  width: 3%;
  left: 15%;
  top: 2%;
  background: url(./images/snow.png) no-repeat center/contain;
  aspect-ratio: 41/46;
}
@media screen and (max-width: 767px) {
  .ranking::after {
    display: none;
  }
}
.ranking-wrap {
  background-color: #fff;
  border-radius: 10px;
  padding: 2.5rem 4%;
  width: 80%;
  margin: 0 auto 2.5rem;
  max-width: 1080px;
}
@media screen and (max-width: 767px) {
  .ranking-wrap {
    width: 90%;
    padding: 1.5rem 3% 2.5rem;
  }
}
.ranking-wrap.rank1 {
  position: relative;
}
.ranking-wrap.rank1::before {
  content: "";
  position: absolute;
  width: 9%;
  right: -12%;
  top: 25%;
  background: url(./images/board.png) no-repeat center/contain;
  aspect-ratio: 92/88;
}
@media screen and (max-width: 767px) {
  .ranking-wrap.rank1::before {
    display: none;
  }
}
.ranking-wrap.rank1::after {
  content: "";
  position: absolute;
  width: 4%;
  left: -8%;
  top: -2%;
  background: url(./images/snow.png) no-repeat center/contain;
  aspect-ratio: 41/46;
}
@media screen and (max-width: 767px) {
  .ranking-wrap.rank1::after {
    display: none;
  }
}
.ranking-wrap.rank2 {
  position: relative;
}
.ranking-wrap.rank2::before {
  content: "";
  position: absolute;
  width: 9%;
  left: -12%;
  top: 65%;
  background: url(./images/ski.png) no-repeat center/contain;
  aspect-ratio: 90/83;
}
@media screen and (max-width: 767px) {
  .ranking-wrap.rank2::before {
    display: none;
  }
}
.ranking-wrap.rank2 h3 {
  border-bottom: 2px dashed #04AADB;
}
.ranking-wrap.rank3 {
  position: relative;
}
.ranking-wrap.rank3::before {
  content: "";
  position: absolute;
  width: 9%;
  right: -11%;
  top: 40%;
  background: url(./images/ski2.png) no-repeat center/contain;
  aspect-ratio: 92/80;
}
@media screen and (max-width: 767px) {
  .ranking-wrap.rank3::before {
    display: none;
  }
}
.ranking-wrap.rank3 h3 {
  border-bottom: 2px dashed #ECDF08;
}
.ranking-wrap.last {
  margin-bottom: 0;
}
.ranking-title {
  text-align: center;
  position: relative;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 767px) {
  .ranking-title {
    margin-bottom: 1.5rem;
  }
}
.ranking-title::before, .ranking-title::after {
  content: "";
  position: absolute;
}
.ranking-title::before {
  aspect-ratio: 47/53;
  background: url(./images/snow.png) no-repeat center/contain;
  right: 5%;
  width: 2.5%;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .ranking-title::before {
    display: none;
  }
}
.ranking-title::after {
  aspect-ratio: 101/75;
  background: url(./images/daruma.png) no-repeat center/contain;
  right: 25%;
  width: 7.5%;
  bottom: -2.5rem;
}
@media screen and (max-width: 1600px) {
  .ranking-title::after {
    right: 17%;
  }
}
@media screen and (max-width: 767px) {
  .ranking-title::after {
    display: none;
  }
}
.ranking-title img {
  max-width: 230px;
  margin: 0 auto -3rem;
}
@media screen and (max-width: 767px) {
  .ranking-title img {
    max-width: 180px;
    margin-bottom: -2rem;
  }
}
.ranking-title h2 {
  font-size: clamp(1.813rem, 1.649rem + 0.54vw, 2.125rem);
  color: #FF009E;
  letter-spacing: 0.04em;
}
.ranking-title h2 span.first {
  font-size: clamp(1.188rem, 1.09rem + 0.33vw, 1.375rem);
  color: #333;
}
.ranking-title h2 span.second {
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  color: #333;
}
.ranking h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  padding-bottom: 1rem;
  border-bottom: 2px dashed #FF009E;
  margin-bottom: 1rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .ranking h3 {
    padding-bottom: 0.5rem;
  }
}
.ranking h3 img {
  width: 40px;
}
.ranking-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .ranking-top {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 0;
  }
}
.ranking-top > img {
  width: 35%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 322/220;
}
@media screen and (max-width: 767px) {
  .ranking-top > img {
    width: 100%;
  }
}
.ranking-top-text {
  width: 62%;
}
@media screen and (max-width: 767px) {
  .ranking-top-text {
    width: 100%;
  }
}
.ranking-top-text p {
  line-height: 160%;
}
.ranking-top-text p span {
  color: red;
}
.ranking-top-text h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 0.87rem + 0.43vw, 1.25rem);
  margin-bottom: 1rem;
}
.ranking-top-text img {
  width: 26px;
}
.ranking-bottom {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .ranking-bottom {
    flex-direction: column;
  }
}
.ranking-bottom-left {
  width: 35%;
}
@media screen and (max-width: 767px) {
  .ranking-bottom-left {
    width: 100%;
  }
}
.ranking-bottom-right {
  width: 62%;
}
@media screen and (max-width: 767px) {
  .ranking-bottom-right {
    width: 100%;
  }
}
.ranking-bottom h5 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 0.935rem + 0.22vw, 1.125rem);
  margin: 1.5rem 0 0.5rem;
}
.ranking-bottom h5 img {
  width: 1.5rem;
}
.ranking-bottom p {
  margin-bottom: 0.5rem;
}
.ranking-bottom .lebel {
  color: #fff;
  font-weight: 500;
  padding: 0.5rem 20px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 131px;
}
.ranking-bottom .lebel1 {
  background-color: #667EEB;
}
.ranking-bottom .lebel2 {
  background-color: #2848DA;
}
.ranking-bottom .lebel3 {
  background-color: #05008F;
}
.ranking-bottom .lebel-9 {
  width: 39%;
}
.ranking-bottom .lebel-10 {
  width: 40%;
}
.ranking-bottom .lebel-15 {
  width: 45%;
}
.ranking-bottom .lebel-20 {
  width: 50%;
}
.ranking-bottom .lebel-25 {
  width: 55%;
}
.ranking-bottom .lebel-30 {
  width: 60%;
}
.ranking-bottom .lebel-35 {
  width: 65%;
}
.ranking-bottom .lebel-40 {
  width: 70%;
}
.ranking-bottom .lebel-45 {
  width: 75%;
}
.ranking-bottom .lebel-50 {
  width: 80%;
}
.ranking-bottom .lebel-55 {
  width: 85%;
}
.ranking-bottom .lebel-60 {
  width: 90%;
}
.ranking a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 3rem auto 0;
}
@media screen and (max-width: 767px) {
  .ranking a {
    margin-top: 2rem;
  }
}
.ranking a img {
  max-width: 355px;
}
.ranking .list {
  text-align: center;
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  letter-spacing: 0.04em;
  margin: 7.5rem 0 2.5rem;
}
@media screen and (max-width: 767px) {
  .ranking .list {
    margin: 4rem 0 1rem;
  }
}
.ranking .list span {
  font-size: clamp(1.125rem, 1.06rem + 0.22vw, 1.25rem);
}

.check {
  position: relative;
}
.check::before {
  content: "";
  position: absolute;
  width: 13%;
  aspect-ratio: 183/126;
  top: 10%;
  left: 5%;
  background: url(./images/check-snow1.png) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .check::before {
    width: 16%;
    top: 20%;
    left: 2.5%;
  }
}
.check::after {
  content: "";
  position: absolute;
  width: 13%;
  aspect-ratio: 183/126;
  top: 10%;
  right: 5%;
  background: url(./images/check-snow2.png) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .check::after {
    width: 16%;
    top: 20%;
    right: 2.5%;
  }
}
.check-wrap {
  position: relative;
  padding: 3.5rem 0 7.5rem;
}
@media screen and (max-width: 767px) {
  .check-wrap {
    padding: 2.5rem 0 5rem;
  }
}
.check-wrap::before {
  content: "";
  position: absolute;
  background: url(./images/other-bg.png) no-repeat center/contain;
  aspect-ratio: 74/115;
  width: 5.5%;
  bottom: 0;
  left: 5%;
}
@media screen and (max-width: 767px) {
  .check-wrap::before {
    width: 30px;
  }
}
.check-wrap::after {
  content: "";
  position: absolute;
  background: url(./images/other-bg2.png) no-repeat center/contain;
  aspect-ratio: 158/90;
  width: 11.5%;
  bottom: 0;
  right: 5%;
}
@media screen and (max-width: 767px) {
  .check-wrap::after {
    width: 77px;
  }
}
.check-title img {
  max-width: 375px;
  margin: 0 auto 0.5rem;
  width: 80%;
}
.check-title h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  letter-spacing: 0.04em;
}
.check-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 824px;
  margin: 2.5rem auto 0;
  width: 80%;
}
@media screen and (max-width: 767px) {
  .check-contents {
    width: 90%;
    gap: 0.5rem 10px;
    margin: 1.5rem auto 0;
  }
}
.check-item {
  width: calc((100% - 1.5rem) / 2);
}
@media screen and (max-width: 767px) {
  .check-item {
    width: calc((100% - 0.8rem) / 2);
  }
}
.check-item a {
  display: flex;
  align-items: center;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  background-color: #EFF7FC;
  height: 100px;
  border-radius: 10px;
  font-size: clamp(0.875rem, 0.549rem + 1.09vw, 1.5rem);
  gap: 0.5rem;
  color: #333;
  position: relative;
  font-weight: 500;
  gap: 10%;
}
@media screen and (max-width: 767px) {
  .check-item a {
    height: 52px;
  }
}
.check-item a::before {
  content: ">";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .check-item a::before {
    right: 1rem;
  }
}
.check-item a:hover {
  opacity: 0.7;
}
.check-item img {
  width: 20%;
  max-height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-left: 10%;
}
@media screen and (max-width: 767px) {
  .check-item img {
    width: 15%;
    max-height: 35px;
  }
}

.other {
  padding: 5rem 0 7.5rem;
  background-color: #EFF7FC;
}
@media screen and (max-width: 767px) {
  .other {
    padding: 2.5rem 0;
  }
}
.other h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1.37rem + 0.43vw, 1.75rem);
  letter-spacing: 0.04em;
}
.other-contents {
  max-width: 1024px;
  width: 80%;
  margin: 2.5rem auto 0;
  display: flex;
  gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .other-contents {
    flex-direction: column;
    margin: 1.5rem auto 0;
    width: 90%;
  }
}
.other-item {
  position: relative;
}
.other-item p {
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.864rem + 0.87vw, 1.625rem);
  line-height: 150%;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.45), 0px 0px 3px rgba(0, 0, 0, 0.45), 0px 0px 3px rgba(0, 0, 0, 0.45), 0px 0px 3px rgba(0, 0, 0, 0.45), 0px 0px 3px rgba(0, 0, 0, 0.45);
}
.other-item img {
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .footer {
    text-align: center;
  }
}
.footer .copyright {
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
  font-size: 12px;
}
.footer-top {
  padding: 5rem 0 2.5rem;
  background-color: #003353;
  color: #fff;
  position: relative;
}
@media screen and (max-width: 767px) {
  .footer-top {
    padding: 2.5rem 0 2.5rem;
  }
}
.footer-top::before {
  content: "";
  position: absolute;
  width: 8%;
  bottom: -5.5%;
  background: url(./images/footer.png) no-repeat center/contain;
  right: 5%;
  aspect-ratio: 113/98;
}
@media screen and (max-width: 1024px) {
  .footer-top::before {
    bottom: -3%;
  }
}
@media screen and (max-width: 767px) {
  .footer-top::before {
    bottom: -0.8rem;
    width: 65px;
  }
}
.footer-top-wrap {
  display: flex;
  width: 80%;
  margin: 0 auto 2.5rem;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .footer-top-wrap {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .footer-top-wrap {
    flex-direction: column;
    gap: 2.5rem;
  }
}
.footer-left > p {
  font-size: clamp(1rem, 0.935rem + 0.22vw, 1.125rem);
  font-weight: 500;
}
.footer-left img {
  max-width: 273px;
  width: 75%;
  margin: 1rem 0 2rem;
}
@media screen and (max-width: 767px) {
  .footer-left img {
    width: 130px;
    margin: 1rem auto;
  }
}
.footer-left div p {
  font-size: clamp(0.875rem, 0.81rem + 0.22vw, 1rem);
}
.footer-left div p:first-child {
  font-size: clamp(1rem, 0.935rem + 0.22vw, 1.125rem);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-right p {
  font-size: clamp(0.875rem, 0.81rem + 0.22vw, 1rem);
}
@media screen and (max-width: 767px) {
  .footer-right p {
    margin-bottom: 0.5rem;
  }
}
.footer-right p:first-child {
  font-size: clamp(1rem, 0.935rem + 0.22vw, 1.125rem);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-icon {
  display: flex;
  margin-top: 1.5rem;
  gap: 8%;
}
@media screen and (max-width: 767px) {
  .footer-icon {
    justify-content: center;
  }
}
.footer-icon img {
  width: 60px;
}
@media screen and (max-width: 1024px) {
  .footer-icon img {
    width: 45px;
  }
}
.footer-list {
  display: flex;
  width: 80%;
  margin: 0 auto;
  gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .footer-list {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .footer-list {
    justify-content: center;
  }
}
.footer-list a {
  color: #fff;
  font-size: clamp(0.875rem, 0.81rem + 0.22vw, 1rem);
}