@charset "UTF-8";
:root {
  --rose: #C05888;
  --teal: #c5ae2b;
  --lavender: #ac6ac5;
  --navy: #1C2B45;
  --yellow: #EDD07A;
  --bg-base: #f4f4eb;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #1a1a1a;
  background: #f4f4eb;
  line-height: 1.75;
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stripScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes badgePop {
  0% {
    transform: scale(0.92);
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: inline-block;
  }
}

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

.mt-0 {
  margin-top: 0rem;
}
@media screen and (max-width: 767px) {
  .mt-0 {
    margin-top: calc( 0rem * .7);
  }
}

.mb-0 {
  margin-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .mb-0 {
    margin-bottom: calc( 0rem * .7);
  }
}

.ml-0 {
  margin-left: 0rem;
}
@media screen and (max-width: 767px) {
  .ml-0 {
    margin-left: calc( 0rem * .7);
  }
}

.mr-0 {
  margin-right: 0rem;
}
@media screen and (max-width: 767px) {
  .mr-0 {
    margin-right: calc( 0rem * .7);
  }
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}
@media screen and (max-width: 767px) {
  .mx-0 {
    margin-left: calc( 0rem * .7);
    margin-right: calc( 0rem * .7);
  }
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .my-0 {
    margin-top: calc( 0rem * .7);
    margin-bottom: calc( 0rem * .7);
  }
}

.pt-0 {
  padding-top: 0rem;
}
@media screen and (max-width: 767px) {
  .pt-0 {
    padding-top: calc( 0rem * .7);
  }
}

.pb-0 {
  padding-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .pb-0 {
    padding-bottom: calc( 0rem * .7);
  }
}

.pl-0 {
  padding-left: 0rem;
}
@media screen and (max-width: 767px) {
  .pl-0 {
    padding-left: calc( 0rem * .7);
  }
}

.pr-0 {
  padding-right: 0rem;
}
@media screen and (max-width: 767px) {
  .pr-0 {
    padding-right: calc( 0rem * .7);
  }
}

.px-0 {
  padding-left: 0rem;
  padding-right: 0rem;
}
@media screen and (max-width: 767px) {
  .px-0 {
    padding-left: calc( 0rem * .7);
    padding-right: calc( 0rem * .7);
  }
}

.py-0 {
  padding-top: 0rem;
  padding-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .py-0 {
    padding-top: calc( 0rem * .7);
    padding-bottom: calc( 0rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-0 {
    margin-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-0 {
    margin-bottom: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-0 {
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-0 {
    padding-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-0 {
    padding-bottom: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-0 {
    padding-bottom: 0rem !important;
    padding-top: 0rem !important;
  }
}

.mt-1 {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .mt-1 {
    margin-top: calc( 1rem * .7);
  }
}

.mb-1 {
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .mb-1 {
    margin-bottom: calc( 1rem * .7);
  }
}

.ml-1 {
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .ml-1 {
    margin-left: calc( 1rem * .7);
  }
}

.mr-1 {
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .mr-1 {
    margin-right: calc( 1rem * .7);
  }
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .mx-1 {
    margin-left: calc( 1rem * .7);
    margin-right: calc( 1rem * .7);
  }
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .my-1 {
    margin-top: calc( 1rem * .7);
    margin-bottom: calc( 1rem * .7);
  }
}

.pt-1 {
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .pt-1 {
    padding-top: calc( 1rem * .7);
  }
}

.pb-1 {
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .pb-1 {
    padding-bottom: calc( 1rem * .7);
  }
}

.pl-1 {
  padding-left: 1rem;
}
@media screen and (max-width: 767px) {
  .pl-1 {
    padding-left: calc( 1rem * .7);
  }
}

.pr-1 {
  padding-right: 1rem;
}
@media screen and (max-width: 767px) {
  .pr-1 {
    padding-right: calc( 1rem * .7);
  }
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (max-width: 767px) {
  .px-1 {
    padding-left: calc( 1rem * .7);
    padding-right: calc( 1rem * .7);
  }
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .py-1 {
    padding-top: calc( 1rem * .7);
    padding-bottom: calc( 1rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-1 {
    margin-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-1 {
    margin-bottom: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-1 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-1 {
    padding-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-1 {
    padding-bottom: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-1 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
  }
}

.mt-2 {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .mt-2 {
    margin-top: calc( 2rem * .7);
  }
}

.mb-2 {
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .mb-2 {
    margin-bottom: calc( 2rem * .7);
  }
}

.ml-2 {
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  .ml-2 {
    margin-left: calc( 2rem * .7);
  }
}

.mr-2 {
  margin-right: 2rem;
}
@media screen and (max-width: 767px) {
  .mr-2 {
    margin-right: calc( 2rem * .7);
  }
}

.mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}
@media screen and (max-width: 767px) {
  .mx-2 {
    margin-left: calc( 2rem * .7);
    margin-right: calc( 2rem * .7);
  }
}

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .my-2 {
    margin-top: calc( 2rem * .7);
    margin-bottom: calc( 2rem * .7);
  }
}

.pt-2 {
  padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  .pt-2 {
    padding-top: calc( 2rem * .7);
  }
}

.pb-2 {
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .pb-2 {
    padding-bottom: calc( 2rem * .7);
  }
}

.pl-2 {
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .pl-2 {
    padding-left: calc( 2rem * .7);
  }
}

.pr-2 {
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .pr-2 {
    padding-right: calc( 2rem * .7);
  }
}

.px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .px-2 {
    padding-left: calc( 2rem * .7);
    padding-right: calc( 2rem * .7);
  }
}

.py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .py-2 {
    padding-top: calc( 2rem * .7);
    padding-bottom: calc( 2rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-2 {
    margin-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-2 {
    margin-bottom: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-2 {
    margin-bottom: 2rem !important;
    margin-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-2 {
    padding-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-2 {
    padding-bottom: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-2 {
    padding-bottom: 2rem !important;
    padding-top: 2rem !important;
  }
}

.mt-3 {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .mt-3 {
    margin-top: calc( 3rem * .7);
  }
}

.mb-3 {
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .mb-3 {
    margin-bottom: calc( 3rem * .7);
  }
}

.ml-3 {
  margin-left: 3rem;
}
@media screen and (max-width: 767px) {
  .ml-3 {
    margin-left: calc( 3rem * .7);
  }
}

.mr-3 {
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .mr-3 {
    margin-right: calc( 3rem * .7);
  }
}

.mx-3 {
  margin-left: 3rem;
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .mx-3 {
    margin-left: calc( 3rem * .7);
    margin-right: calc( 3rem * .7);
  }
}

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .my-3 {
    margin-top: calc( 3rem * .7);
    margin-bottom: calc( 3rem * .7);
  }
}

.pt-3 {
  padding-top: 3rem;
}
@media screen and (max-width: 767px) {
  .pt-3 {
    padding-top: calc( 3rem * .7);
  }
}

.pb-3 {
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .pb-3 {
    padding-bottom: calc( 3rem * .7);
  }
}

.pl-3 {
  padding-left: 3rem;
}
@media screen and (max-width: 767px) {
  .pl-3 {
    padding-left: calc( 3rem * .7);
  }
}

.pr-3 {
  padding-right: 3rem;
}
@media screen and (max-width: 767px) {
  .pr-3 {
    padding-right: calc( 3rem * .7);
  }
}

.px-3 {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media screen and (max-width: 767px) {
  .px-3 {
    padding-left: calc( 3rem * .7);
    padding-right: calc( 3rem * .7);
  }
}

.py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .py-3 {
    padding-top: calc( 3rem * .7);
    padding-bottom: calc( 3rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-3 {
    margin-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-3 {
    margin-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-3 {
    margin-bottom: 3rem !important;
    margin-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-3 {
    padding-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-3 {
    padding-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-3 {
    padding-bottom: 3rem !important;
    padding-top: 3rem !important;
  }
}

.mt-4 {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .mt-4 {
    margin-top: calc( 4rem * .7);
  }
}

.mb-4 {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .mb-4 {
    margin-bottom: calc( 4rem * .7);
  }
}

.ml-4 {
  margin-left: 4rem;
}
@media screen and (max-width: 767px) {
  .ml-4 {
    margin-left: calc( 4rem * .7);
  }
}

.mr-4 {
  margin-right: 4rem;
}
@media screen and (max-width: 767px) {
  .mr-4 {
    margin-right: calc( 4rem * .7);
  }
}

.mx-4 {
  margin-left: 4rem;
  margin-right: 4rem;
}
@media screen and (max-width: 767px) {
  .mx-4 {
    margin-left: calc( 4rem * .7);
    margin-right: calc( 4rem * .7);
  }
}

.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .my-4 {
    margin-top: calc( 4rem * .7);
    margin-bottom: calc( 4rem * .7);
  }
}

.pt-4 {
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .pt-4 {
    padding-top: calc( 4rem * .7);
  }
}

.pb-4 {
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .pb-4 {
    padding-bottom: calc( 4rem * .7);
  }
}

.pl-4 {
  padding-left: 4rem;
}
@media screen and (max-width: 767px) {
  .pl-4 {
    padding-left: calc( 4rem * .7);
  }
}

.pr-4 {
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .pr-4 {
    padding-right: calc( 4rem * .7);
  }
}

.px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .px-4 {
    padding-left: calc( 4rem * .7);
    padding-right: calc( 4rem * .7);
  }
}

.py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .py-4 {
    padding-top: calc( 4rem * .7);
    padding-bottom: calc( 4rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-4 {
    margin-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-4 {
    margin-bottom: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-4 {
    margin-bottom: 4rem !important;
    margin-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-4 {
    padding-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-4 {
    padding-bottom: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-4 {
    padding-bottom: 4rem !important;
    padding-top: 4rem !important;
  }
}

.mt-5 {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .mt-5 {
    margin-top: calc( 5rem * .7);
  }
}

.mb-5 {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .mb-5 {
    margin-bottom: calc( 5rem * .7);
  }
}

.ml-5 {
  margin-left: 5rem;
}
@media screen and (max-width: 767px) {
  .ml-5 {
    margin-left: calc( 5rem * .7);
  }
}

.mr-5 {
  margin-right: 5rem;
}
@media screen and (max-width: 767px) {
  .mr-5 {
    margin-right: calc( 5rem * .7);
  }
}

.mx-5 {
  margin-left: 5rem;
  margin-right: 5rem;
}
@media screen and (max-width: 767px) {
  .mx-5 {
    margin-left: calc( 5rem * .7);
    margin-right: calc( 5rem * .7);
  }
}

.my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .my-5 {
    margin-top: calc( 5rem * .7);
    margin-bottom: calc( 5rem * .7);
  }
}

.pt-5 {
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .pt-5 {
    padding-top: calc( 5rem * .7);
  }
}

.pb-5 {
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .pb-5 {
    padding-bottom: calc( 5rem * .7);
  }
}

.pl-5 {
  padding-left: 5rem;
}
@media screen and (max-width: 767px) {
  .pl-5 {
    padding-left: calc( 5rem * .7);
  }
}

.pr-5 {
  padding-right: 5rem;
}
@media screen and (max-width: 767px) {
  .pr-5 {
    padding-right: calc( 5rem * .7);
  }
}

.px-5 {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media screen and (max-width: 767px) {
  .px-5 {
    padding-left: calc( 5rem * .7);
    padding-right: calc( 5rem * .7);
  }
}

.py-5 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .py-5 {
    padding-top: calc( 5rem * .7);
    padding-bottom: calc( 5rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-5 {
    margin-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-5 {
    margin-bottom: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-5 {
    margin-bottom: 5rem !important;
    margin-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-5 {
    padding-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-5 {
    padding-bottom: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-5 {
    padding-bottom: 5rem !important;
    padding-top: 5rem !important;
  }
}

.mt-6 {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .mt-6 {
    margin-top: calc( 6rem * .7);
  }
}

.mb-6 {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .mb-6 {
    margin-bottom: calc( 6rem * .7);
  }
}

.ml-6 {
  margin-left: 6rem;
}
@media screen and (max-width: 767px) {
  .ml-6 {
    margin-left: calc( 6rem * .7);
  }
}

.mr-6 {
  margin-right: 6rem;
}
@media screen and (max-width: 767px) {
  .mr-6 {
    margin-right: calc( 6rem * .7);
  }
}

.mx-6 {
  margin-left: 6rem;
  margin-right: 6rem;
}
@media screen and (max-width: 767px) {
  .mx-6 {
    margin-left: calc( 6rem * .7);
    margin-right: calc( 6rem * .7);
  }
}

.my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .my-6 {
    margin-top: calc( 6rem * .7);
    margin-bottom: calc( 6rem * .7);
  }
}

.pt-6 {
  padding-top: 6rem;
}
@media screen and (max-width: 767px) {
  .pt-6 {
    padding-top: calc( 6rem * .7);
  }
}

.pb-6 {
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .pb-6 {
    padding-bottom: calc( 6rem * .7);
  }
}

.pl-6 {
  padding-left: 6rem;
}
@media screen and (max-width: 767px) {
  .pl-6 {
    padding-left: calc( 6rem * .7);
  }
}

.pr-6 {
  padding-right: 6rem;
}
@media screen and (max-width: 767px) {
  .pr-6 {
    padding-right: calc( 6rem * .7);
  }
}

.px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}
@media screen and (max-width: 767px) {
  .px-6 {
    padding-left: calc( 6rem * .7);
    padding-right: calc( 6rem * .7);
  }
}

.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .py-6 {
    padding-top: calc( 6rem * .7);
    padding-bottom: calc( 6rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-6 {
    margin-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-6 {
    margin-bottom: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-6 {
    margin-bottom: 6rem !important;
    margin-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-6 {
    padding-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-6 {
    padding-bottom: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-6 {
    padding-bottom: 6rem !important;
    padding-top: 6rem !important;
  }
}

.mt-7 {
  margin-top: 7rem;
}
@media screen and (max-width: 767px) {
  .mt-7 {
    margin-top: calc( 7rem * .7);
  }
}

.mb-7 {
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .mb-7 {
    margin-bottom: calc( 7rem * .7);
  }
}

.ml-7 {
  margin-left: 7rem;
}
@media screen and (max-width: 767px) {
  .ml-7 {
    margin-left: calc( 7rem * .7);
  }
}

.mr-7 {
  margin-right: 7rem;
}
@media screen and (max-width: 767px) {
  .mr-7 {
    margin-right: calc( 7rem * .7);
  }
}

.mx-7 {
  margin-left: 7rem;
  margin-right: 7rem;
}
@media screen and (max-width: 767px) {
  .mx-7 {
    margin-left: calc( 7rem * .7);
    margin-right: calc( 7rem * .7);
  }
}

.my-7 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .my-7 {
    margin-top: calc( 7rem * .7);
    margin-bottom: calc( 7rem * .7);
  }
}

.pt-7 {
  padding-top: 7rem;
}
@media screen and (max-width: 767px) {
  .pt-7 {
    padding-top: calc( 7rem * .7);
  }
}

.pb-7 {
  padding-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .pb-7 {
    padding-bottom: calc( 7rem * .7);
  }
}

.pl-7 {
  padding-left: 7rem;
}
@media screen and (max-width: 767px) {
  .pl-7 {
    padding-left: calc( 7rem * .7);
  }
}

.pr-7 {
  padding-right: 7rem;
}
@media screen and (max-width: 767px) {
  .pr-7 {
    padding-right: calc( 7rem * .7);
  }
}

.px-7 {
  padding-left: 7rem;
  padding-right: 7rem;
}
@media screen and (max-width: 767px) {
  .px-7 {
    padding-left: calc( 7rem * .7);
    padding-right: calc( 7rem * .7);
  }
}

.py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .py-7 {
    padding-top: calc( 7rem * .7);
    padding-bottom: calc( 7rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-7 {
    margin-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-7 {
    margin-bottom: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-7 {
    margin-bottom: 7rem !important;
    margin-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-7 {
    padding-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-7 {
    padding-bottom: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-7 {
    padding-bottom: 7rem !important;
    padding-top: 7rem !important;
  }
}

.mt-8 {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .mt-8 {
    margin-top: calc( 8rem * .7);
  }
}

.mb-8 {
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .mb-8 {
    margin-bottom: calc( 8rem * .7);
  }
}

.ml-8 {
  margin-left: 8rem;
}
@media screen and (max-width: 767px) {
  .ml-8 {
    margin-left: calc( 8rem * .7);
  }
}

.mr-8 {
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .mr-8 {
    margin-right: calc( 8rem * .7);
  }
}

.mx-8 {
  margin-left: 8rem;
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .mx-8 {
    margin-left: calc( 8rem * .7);
    margin-right: calc( 8rem * .7);
  }
}

.my-8 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .my-8 {
    margin-top: calc( 8rem * .7);
    margin-bottom: calc( 8rem * .7);
  }
}

.pt-8 {
  padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .pt-8 {
    padding-top: calc( 8rem * .7);
  }
}

.pb-8 {
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .pb-8 {
    padding-bottom: calc( 8rem * .7);
  }
}

.pl-8 {
  padding-left: 8rem;
}
@media screen and (max-width: 767px) {
  .pl-8 {
    padding-left: calc( 8rem * .7);
  }
}

.pr-8 {
  padding-right: 8rem;
}
@media screen and (max-width: 767px) {
  .pr-8 {
    padding-right: calc( 8rem * .7);
  }
}

.px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 767px) {
  .px-8 {
    padding-left: calc( 8rem * .7);
    padding-right: calc( 8rem * .7);
  }
}

.py-8 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .py-8 {
    padding-top: calc( 8rem * .7);
    padding-bottom: calc( 8rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-8 {
    margin-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-8 {
    margin-bottom: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-8 {
    margin-bottom: 8rem !important;
    margin-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-8 {
    padding-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-8 {
    padding-bottom: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-8 {
    padding-bottom: 8rem !important;
    padding-top: 8rem !important;
  }
}

.mt-9 {
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .mt-9 {
    margin-top: calc( 9rem * .7);
  }
}

.mb-9 {
  margin-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .mb-9 {
    margin-bottom: calc( 9rem * .7);
  }
}

.ml-9 {
  margin-left: 9rem;
}
@media screen and (max-width: 767px) {
  .ml-9 {
    margin-left: calc( 9rem * .7);
  }
}

.mr-9 {
  margin-right: 9rem;
}
@media screen and (max-width: 767px) {
  .mr-9 {
    margin-right: calc( 9rem * .7);
  }
}

.mx-9 {
  margin-left: 9rem;
  margin-right: 9rem;
}
@media screen and (max-width: 767px) {
  .mx-9 {
    margin-left: calc( 9rem * .7);
    margin-right: calc( 9rem * .7);
  }
}

.my-9 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .my-9 {
    margin-top: calc( 9rem * .7);
    margin-bottom: calc( 9rem * .7);
  }
}

.pt-9 {
  padding-top: 9rem;
}
@media screen and (max-width: 767px) {
  .pt-9 {
    padding-top: calc( 9rem * .7);
  }
}

.pb-9 {
  padding-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .pb-9 {
    padding-bottom: calc( 9rem * .7);
  }
}

.pl-9 {
  padding-left: 9rem;
}
@media screen and (max-width: 767px) {
  .pl-9 {
    padding-left: calc( 9rem * .7);
  }
}

.pr-9 {
  padding-right: 9rem;
}
@media screen and (max-width: 767px) {
  .pr-9 {
    padding-right: calc( 9rem * .7);
  }
}

.px-9 {
  padding-left: 9rem;
  padding-right: 9rem;
}
@media screen and (max-width: 767px) {
  .px-9 {
    padding-left: calc( 9rem * .7);
    padding-right: calc( 9rem * .7);
  }
}

.py-9 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .py-9 {
    padding-top: calc( 9rem * .7);
    padding-bottom: calc( 9rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-9 {
    margin-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-9 {
    margin-bottom: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-9 {
    margin-bottom: 9rem !important;
    margin-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-9 {
    padding-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-9 {
    padding-bottom: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-9 {
    padding-bottom: 9rem !important;
    padding-top: 9rem !important;
  }
}

.mt-10 {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .mt-10 {
    margin-top: calc( 10rem * .7);
  }
}

.mb-10 {
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .mb-10 {
    margin-bottom: calc( 10rem * .7);
  }
}

.ml-10 {
  margin-left: 10rem;
}
@media screen and (max-width: 767px) {
  .ml-10 {
    margin-left: calc( 10rem * .7);
  }
}

.mr-10 {
  margin-right: 10rem;
}
@media screen and (max-width: 767px) {
  .mr-10 {
    margin-right: calc( 10rem * .7);
  }
}

.mx-10 {
  margin-left: 10rem;
  margin-right: 10rem;
}
@media screen and (max-width: 767px) {
  .mx-10 {
    margin-left: calc( 10rem * .7);
    margin-right: calc( 10rem * .7);
  }
}

.my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .my-10 {
    margin-top: calc( 10rem * .7);
    margin-bottom: calc( 10rem * .7);
  }
}

.pt-10 {
  padding-top: 10rem;
}
@media screen and (max-width: 767px) {
  .pt-10 {
    padding-top: calc( 10rem * .7);
  }
}

.pb-10 {
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .pb-10 {
    padding-bottom: calc( 10rem * .7);
  }
}

.pl-10 {
  padding-left: 10rem;
}
@media screen and (max-width: 767px) {
  .pl-10 {
    padding-left: calc( 10rem * .7);
  }
}

.pr-10 {
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .pr-10 {
    padding-right: calc( 10rem * .7);
  }
}

.px-10 {
  padding-left: 10rem;
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .px-10 {
    padding-left: calc( 10rem * .7);
    padding-right: calc( 10rem * .7);
  }
}

.py-10 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .py-10 {
    padding-top: calc( 10rem * .7);
    padding-bottom: calc( 10rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-10 {
    margin-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-10 {
    margin-bottom: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-10 {
    margin-bottom: 10rem !important;
    margin-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-10 {
    padding-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-10 {
    padding-bottom: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-10 {
    padding-bottom: 10rem !important;
    padding-top: 10rem !important;
  }
}

.mt-11 {
  margin-top: 11rem;
}
@media screen and (max-width: 767px) {
  .mt-11 {
    margin-top: calc( 11rem * .7);
  }
}

.mb-11 {
  margin-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .mb-11 {
    margin-bottom: calc( 11rem * .7);
  }
}

.ml-11 {
  margin-left: 11rem;
}
@media screen and (max-width: 767px) {
  .ml-11 {
    margin-left: calc( 11rem * .7);
  }
}

.mr-11 {
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  .mr-11 {
    margin-right: calc( 11rem * .7);
  }
}

.mx-11 {
  margin-left: 11rem;
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  .mx-11 {
    margin-left: calc( 11rem * .7);
    margin-right: calc( 11rem * .7);
  }
}

.my-11 {
  margin-top: 11rem;
  margin-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .my-11 {
    margin-top: calc( 11rem * .7);
    margin-bottom: calc( 11rem * .7);
  }
}

.pt-11 {
  padding-top: 11rem;
}
@media screen and (max-width: 767px) {
  .pt-11 {
    padding-top: calc( 11rem * .7);
  }
}

.pb-11 {
  padding-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .pb-11 {
    padding-bottom: calc( 11rem * .7);
  }
}

.pl-11 {
  padding-left: 11rem;
}
@media screen and (max-width: 767px) {
  .pl-11 {
    padding-left: calc( 11rem * .7);
  }
}

.pr-11 {
  padding-right: 11rem;
}
@media screen and (max-width: 767px) {
  .pr-11 {
    padding-right: calc( 11rem * .7);
  }
}

.px-11 {
  padding-left: 11rem;
  padding-right: 11rem;
}
@media screen and (max-width: 767px) {
  .px-11 {
    padding-left: calc( 11rem * .7);
    padding-right: calc( 11rem * .7);
  }
}

.py-11 {
  padding-top: 11rem;
  padding-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .py-11 {
    padding-top: calc( 11rem * .7);
    padding-bottom: calc( 11rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-11 {
    margin-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-11 {
    margin-bottom: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-11 {
    margin-bottom: 11rem !important;
    margin-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-11 {
    padding-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-11 {
    padding-bottom: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-11 {
    padding-bottom: 11rem !important;
    padding-top: 11rem !important;
  }
}

.mt-12 {
  margin-top: 12rem;
}
@media screen and (max-width: 767px) {
  .mt-12 {
    margin-top: calc( 12rem * .7);
  }
}

.mb-12 {
  margin-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .mb-12 {
    margin-bottom: calc( 12rem * .7);
  }
}

.ml-12 {
  margin-left: 12rem;
}
@media screen and (max-width: 767px) {
  .ml-12 {
    margin-left: calc( 12rem * .7);
  }
}

.mr-12 {
  margin-right: 12rem;
}
@media screen and (max-width: 767px) {
  .mr-12 {
    margin-right: calc( 12rem * .7);
  }
}

.mx-12 {
  margin-left: 12rem;
  margin-right: 12rem;
}
@media screen and (max-width: 767px) {
  .mx-12 {
    margin-left: calc( 12rem * .7);
    margin-right: calc( 12rem * .7);
  }
}

.my-12 {
  margin-top: 12rem;
  margin-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .my-12 {
    margin-top: calc( 12rem * .7);
    margin-bottom: calc( 12rem * .7);
  }
}

.pt-12 {
  padding-top: 12rem;
}
@media screen and (max-width: 767px) {
  .pt-12 {
    padding-top: calc( 12rem * .7);
  }
}

.pb-12 {
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .pb-12 {
    padding-bottom: calc( 12rem * .7);
  }
}

.pl-12 {
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .pl-12 {
    padding-left: calc( 12rem * .7);
  }
}

.pr-12 {
  padding-right: 12rem;
}
@media screen and (max-width: 767px) {
  .pr-12 {
    padding-right: calc( 12rem * .7);
  }
}

.px-12 {
  padding-left: 12rem;
  padding-right: 12rem;
}
@media screen and (max-width: 767px) {
  .px-12 {
    padding-left: calc( 12rem * .7);
    padding-right: calc( 12rem * .7);
  }
}

.py-12 {
  padding-top: 12rem;
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .py-12 {
    padding-top: calc( 12rem * .7);
    padding-bottom: calc( 12rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-12 {
    margin-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-12 {
    margin-bottom: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-12 {
    margin-bottom: 12rem !important;
    margin-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-12 {
    padding-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-12 {
    padding-bottom: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-12 {
    padding-bottom: 12rem !important;
    padding-top: 12rem !important;
  }
}

.mt-13 {
  margin-top: 13rem;
}
@media screen and (max-width: 767px) {
  .mt-13 {
    margin-top: calc( 13rem * .7);
  }
}

.mb-13 {
  margin-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .mb-13 {
    margin-bottom: calc( 13rem * .7);
  }
}

.ml-13 {
  margin-left: 13rem;
}
@media screen and (max-width: 767px) {
  .ml-13 {
    margin-left: calc( 13rem * .7);
  }
}

.mr-13 {
  margin-right: 13rem;
}
@media screen and (max-width: 767px) {
  .mr-13 {
    margin-right: calc( 13rem * .7);
  }
}

.mx-13 {
  margin-left: 13rem;
  margin-right: 13rem;
}
@media screen and (max-width: 767px) {
  .mx-13 {
    margin-left: calc( 13rem * .7);
    margin-right: calc( 13rem * .7);
  }
}

.my-13 {
  margin-top: 13rem;
  margin-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .my-13 {
    margin-top: calc( 13rem * .7);
    margin-bottom: calc( 13rem * .7);
  }
}

.pt-13 {
  padding-top: 13rem;
}
@media screen and (max-width: 767px) {
  .pt-13 {
    padding-top: calc( 13rem * .7);
  }
}

.pb-13 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .pb-13 {
    padding-bottom: calc( 13rem * .7);
  }
}

.pl-13 {
  padding-left: 13rem;
}
@media screen and (max-width: 767px) {
  .pl-13 {
    padding-left: calc( 13rem * .7);
  }
}

.pr-13 {
  padding-right: 13rem;
}
@media screen and (max-width: 767px) {
  .pr-13 {
    padding-right: calc( 13rem * .7);
  }
}

.px-13 {
  padding-left: 13rem;
  padding-right: 13rem;
}
@media screen and (max-width: 767px) {
  .px-13 {
    padding-left: calc( 13rem * .7);
    padding-right: calc( 13rem * .7);
  }
}

.py-13 {
  padding-top: 13rem;
  padding-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .py-13 {
    padding-top: calc( 13rem * .7);
    padding-bottom: calc( 13rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-13 {
    margin-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-13 {
    margin-bottom: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-13 {
    margin-bottom: 13rem !important;
    margin-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-13 {
    padding-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-13 {
    padding-bottom: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-13 {
    padding-bottom: 13rem !important;
    padding-top: 13rem !important;
  }
}

.mt-14 {
  margin-top: 14rem;
}
@media screen and (max-width: 767px) {
  .mt-14 {
    margin-top: calc( 14rem * .7);
  }
}

.mb-14 {
  margin-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .mb-14 {
    margin-bottom: calc( 14rem * .7);
  }
}

.ml-14 {
  margin-left: 14rem;
}
@media screen and (max-width: 767px) {
  .ml-14 {
    margin-left: calc( 14rem * .7);
  }
}

.mr-14 {
  margin-right: 14rem;
}
@media screen and (max-width: 767px) {
  .mr-14 {
    margin-right: calc( 14rem * .7);
  }
}

.mx-14 {
  margin-left: 14rem;
  margin-right: 14rem;
}
@media screen and (max-width: 767px) {
  .mx-14 {
    margin-left: calc( 14rem * .7);
    margin-right: calc( 14rem * .7);
  }
}

.my-14 {
  margin-top: 14rem;
  margin-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .my-14 {
    margin-top: calc( 14rem * .7);
    margin-bottom: calc( 14rem * .7);
  }
}

.pt-14 {
  padding-top: 14rem;
}
@media screen and (max-width: 767px) {
  .pt-14 {
    padding-top: calc( 14rem * .7);
  }
}

.pb-14 {
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .pb-14 {
    padding-bottom: calc( 14rem * .7);
  }
}

.pl-14 {
  padding-left: 14rem;
}
@media screen and (max-width: 767px) {
  .pl-14 {
    padding-left: calc( 14rem * .7);
  }
}

.pr-14 {
  padding-right: 14rem;
}
@media screen and (max-width: 767px) {
  .pr-14 {
    padding-right: calc( 14rem * .7);
  }
}

.px-14 {
  padding-left: 14rem;
  padding-right: 14rem;
}
@media screen and (max-width: 767px) {
  .px-14 {
    padding-left: calc( 14rem * .7);
    padding-right: calc( 14rem * .7);
  }
}

.py-14 {
  padding-top: 14rem;
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .py-14 {
    padding-top: calc( 14rem * .7);
    padding-bottom: calc( 14rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-14 {
    margin-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-14 {
    margin-bottom: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-14 {
    margin-bottom: 14rem !important;
    margin-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-14 {
    padding-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-14 {
    padding-bottom: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-14 {
    padding-bottom: 14rem !important;
    padding-top: 14rem !important;
  }
}

.mt-15 {
  margin-top: 15rem;
}
@media screen and (max-width: 767px) {
  .mt-15 {
    margin-top: calc( 15rem * .7);
  }
}

.mb-15 {
  margin-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .mb-15 {
    margin-bottom: calc( 15rem * .7);
  }
}

.ml-15 {
  margin-left: 15rem;
}
@media screen and (max-width: 767px) {
  .ml-15 {
    margin-left: calc( 15rem * .7);
  }
}

.mr-15 {
  margin-right: 15rem;
}
@media screen and (max-width: 767px) {
  .mr-15 {
    margin-right: calc( 15rem * .7);
  }
}

.mx-15 {
  margin-left: 15rem;
  margin-right: 15rem;
}
@media screen and (max-width: 767px) {
  .mx-15 {
    margin-left: calc( 15rem * .7);
    margin-right: calc( 15rem * .7);
  }
}

.my-15 {
  margin-top: 15rem;
  margin-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .my-15 {
    margin-top: calc( 15rem * .7);
    margin-bottom: calc( 15rem * .7);
  }
}

.pt-15 {
  padding-top: 15rem;
}
@media screen and (max-width: 767px) {
  .pt-15 {
    padding-top: calc( 15rem * .7);
  }
}

.pb-15 {
  padding-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .pb-15 {
    padding-bottom: calc( 15rem * .7);
  }
}

.pl-15 {
  padding-left: 15rem;
}
@media screen and (max-width: 767px) {
  .pl-15 {
    padding-left: calc( 15rem * .7);
  }
}

.pr-15 {
  padding-right: 15rem;
}
@media screen and (max-width: 767px) {
  .pr-15 {
    padding-right: calc( 15rem * .7);
  }
}

.px-15 {
  padding-left: 15rem;
  padding-right: 15rem;
}
@media screen and (max-width: 767px) {
  .px-15 {
    padding-left: calc( 15rem * .7);
    padding-right: calc( 15rem * .7);
  }
}

.py-15 {
  padding-top: 15rem;
  padding-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .py-15 {
    padding-top: calc( 15rem * .7);
    padding-bottom: calc( 15rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-15 {
    margin-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-15 {
    margin-bottom: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-15 {
    margin-bottom: 15rem !important;
    margin-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-15 {
    padding-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-15 {
    padding-bottom: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-15 {
    padding-bottom: 15rem !important;
    padding-top: 15rem !important;
  }
}

.mt-16 {
  margin-top: 16rem;
}
@media screen and (max-width: 767px) {
  .mt-16 {
    margin-top: calc( 16rem * .7);
  }
}

.mb-16 {
  margin-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .mb-16 {
    margin-bottom: calc( 16rem * .7);
  }
}

.ml-16 {
  margin-left: 16rem;
}
@media screen and (max-width: 767px) {
  .ml-16 {
    margin-left: calc( 16rem * .7);
  }
}

.mr-16 {
  margin-right: 16rem;
}
@media screen and (max-width: 767px) {
  .mr-16 {
    margin-right: calc( 16rem * .7);
  }
}

.mx-16 {
  margin-left: 16rem;
  margin-right: 16rem;
}
@media screen and (max-width: 767px) {
  .mx-16 {
    margin-left: calc( 16rem * .7);
    margin-right: calc( 16rem * .7);
  }
}

.my-16 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .my-16 {
    margin-top: calc( 16rem * .7);
    margin-bottom: calc( 16rem * .7);
  }
}

.pt-16 {
  padding-top: 16rem;
}
@media screen and (max-width: 767px) {
  .pt-16 {
    padding-top: calc( 16rem * .7);
  }
}

.pb-16 {
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .pb-16 {
    padding-bottom: calc( 16rem * .7);
  }
}

.pl-16 {
  padding-left: 16rem;
}
@media screen and (max-width: 767px) {
  .pl-16 {
    padding-left: calc( 16rem * .7);
  }
}

.pr-16 {
  padding-right: 16rem;
}
@media screen and (max-width: 767px) {
  .pr-16 {
    padding-right: calc( 16rem * .7);
  }
}

.px-16 {
  padding-left: 16rem;
  padding-right: 16rem;
}
@media screen and (max-width: 767px) {
  .px-16 {
    padding-left: calc( 16rem * .7);
    padding-right: calc( 16rem * .7);
  }
}

.py-16 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .py-16 {
    padding-top: calc( 16rem * .7);
    padding-bottom: calc( 16rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-16 {
    margin-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-16 {
    margin-bottom: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-16 {
    margin-bottom: 16rem !important;
    margin-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-16 {
    padding-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-16 {
    padding-bottom: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-16 {
    padding-bottom: 16rem !important;
    padding-top: 16rem !important;
  }
}

.mt-17 {
  margin-top: 17rem;
}
@media screen and (max-width: 767px) {
  .mt-17 {
    margin-top: calc( 17rem * .7);
  }
}

.mb-17 {
  margin-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .mb-17 {
    margin-bottom: calc( 17rem * .7);
  }
}

.ml-17 {
  margin-left: 17rem;
}
@media screen and (max-width: 767px) {
  .ml-17 {
    margin-left: calc( 17rem * .7);
  }
}

.mr-17 {
  margin-right: 17rem;
}
@media screen and (max-width: 767px) {
  .mr-17 {
    margin-right: calc( 17rem * .7);
  }
}

.mx-17 {
  margin-left: 17rem;
  margin-right: 17rem;
}
@media screen and (max-width: 767px) {
  .mx-17 {
    margin-left: calc( 17rem * .7);
    margin-right: calc( 17rem * .7);
  }
}

.my-17 {
  margin-top: 17rem;
  margin-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .my-17 {
    margin-top: calc( 17rem * .7);
    margin-bottom: calc( 17rem * .7);
  }
}

.pt-17 {
  padding-top: 17rem;
}
@media screen and (max-width: 767px) {
  .pt-17 {
    padding-top: calc( 17rem * .7);
  }
}

.pb-17 {
  padding-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .pb-17 {
    padding-bottom: calc( 17rem * .7);
  }
}

.pl-17 {
  padding-left: 17rem;
}
@media screen and (max-width: 767px) {
  .pl-17 {
    padding-left: calc( 17rem * .7);
  }
}

.pr-17 {
  padding-right: 17rem;
}
@media screen and (max-width: 767px) {
  .pr-17 {
    padding-right: calc( 17rem * .7);
  }
}

.px-17 {
  padding-left: 17rem;
  padding-right: 17rem;
}
@media screen and (max-width: 767px) {
  .px-17 {
    padding-left: calc( 17rem * .7);
    padding-right: calc( 17rem * .7);
  }
}

.py-17 {
  padding-top: 17rem;
  padding-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .py-17 {
    padding-top: calc( 17rem * .7);
    padding-bottom: calc( 17rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-17 {
    margin-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-17 {
    margin-bottom: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-17 {
    margin-bottom: 17rem !important;
    margin-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-17 {
    padding-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-17 {
    padding-bottom: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-17 {
    padding-bottom: 17rem !important;
    padding-top: 17rem !important;
  }
}

.mt-18 {
  margin-top: 18rem;
}
@media screen and (max-width: 767px) {
  .mt-18 {
    margin-top: calc( 18rem * .7);
  }
}

.mb-18 {
  margin-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .mb-18 {
    margin-bottom: calc( 18rem * .7);
  }
}

.ml-18 {
  margin-left: 18rem;
}
@media screen and (max-width: 767px) {
  .ml-18 {
    margin-left: calc( 18rem * .7);
  }
}

.mr-18 {
  margin-right: 18rem;
}
@media screen and (max-width: 767px) {
  .mr-18 {
    margin-right: calc( 18rem * .7);
  }
}

.mx-18 {
  margin-left: 18rem;
  margin-right: 18rem;
}
@media screen and (max-width: 767px) {
  .mx-18 {
    margin-left: calc( 18rem * .7);
    margin-right: calc( 18rem * .7);
  }
}

.my-18 {
  margin-top: 18rem;
  margin-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .my-18 {
    margin-top: calc( 18rem * .7);
    margin-bottom: calc( 18rem * .7);
  }
}

.pt-18 {
  padding-top: 18rem;
}
@media screen and (max-width: 767px) {
  .pt-18 {
    padding-top: calc( 18rem * .7);
  }
}

.pb-18 {
  padding-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .pb-18 {
    padding-bottom: calc( 18rem * .7);
  }
}

.pl-18 {
  padding-left: 18rem;
}
@media screen and (max-width: 767px) {
  .pl-18 {
    padding-left: calc( 18rem * .7);
  }
}

.pr-18 {
  padding-right: 18rem;
}
@media screen and (max-width: 767px) {
  .pr-18 {
    padding-right: calc( 18rem * .7);
  }
}

.px-18 {
  padding-left: 18rem;
  padding-right: 18rem;
}
@media screen and (max-width: 767px) {
  .px-18 {
    padding-left: calc( 18rem * .7);
    padding-right: calc( 18rem * .7);
  }
}

.py-18 {
  padding-top: 18rem;
  padding-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .py-18 {
    padding-top: calc( 18rem * .7);
    padding-bottom: calc( 18rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-18 {
    margin-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-18 {
    margin-bottom: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-18 {
    margin-bottom: 18rem !important;
    margin-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-18 {
    padding-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-18 {
    padding-bottom: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-18 {
    padding-bottom: 18rem !important;
    padding-top: 18rem !important;
  }
}

.mt-19 {
  margin-top: 19rem;
}
@media screen and (max-width: 767px) {
  .mt-19 {
    margin-top: calc( 19rem * .7);
  }
}

.mb-19 {
  margin-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .mb-19 {
    margin-bottom: calc( 19rem * .7);
  }
}

.ml-19 {
  margin-left: 19rem;
}
@media screen and (max-width: 767px) {
  .ml-19 {
    margin-left: calc( 19rem * .7);
  }
}

.mr-19 {
  margin-right: 19rem;
}
@media screen and (max-width: 767px) {
  .mr-19 {
    margin-right: calc( 19rem * .7);
  }
}

.mx-19 {
  margin-left: 19rem;
  margin-right: 19rem;
}
@media screen and (max-width: 767px) {
  .mx-19 {
    margin-left: calc( 19rem * .7);
    margin-right: calc( 19rem * .7);
  }
}

.my-19 {
  margin-top: 19rem;
  margin-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .my-19 {
    margin-top: calc( 19rem * .7);
    margin-bottom: calc( 19rem * .7);
  }
}

.pt-19 {
  padding-top: 19rem;
}
@media screen and (max-width: 767px) {
  .pt-19 {
    padding-top: calc( 19rem * .7);
  }
}

.pb-19 {
  padding-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .pb-19 {
    padding-bottom: calc( 19rem * .7);
  }
}

.pl-19 {
  padding-left: 19rem;
}
@media screen and (max-width: 767px) {
  .pl-19 {
    padding-left: calc( 19rem * .7);
  }
}

.pr-19 {
  padding-right: 19rem;
}
@media screen and (max-width: 767px) {
  .pr-19 {
    padding-right: calc( 19rem * .7);
  }
}

.px-19 {
  padding-left: 19rem;
  padding-right: 19rem;
}
@media screen and (max-width: 767px) {
  .px-19 {
    padding-left: calc( 19rem * .7);
    padding-right: calc( 19rem * .7);
  }
}

.py-19 {
  padding-top: 19rem;
  padding-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .py-19 {
    padding-top: calc( 19rem * .7);
    padding-bottom: calc( 19rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-19 {
    margin-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-19 {
    margin-bottom: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-19 {
    margin-bottom: 19rem !important;
    margin-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-19 {
    padding-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-19 {
    padding-bottom: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-19 {
    padding-bottom: 19rem !important;
    padding-top: 19rem !important;
  }
}

.mt-20 {
  margin-top: 20rem;
}
@media screen and (max-width: 767px) {
  .mt-20 {
    margin-top: calc( 20rem * .7);
  }
}

.mb-20 {
  margin-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .mb-20 {
    margin-bottom: calc( 20rem * .7);
  }
}

.ml-20 {
  margin-left: 20rem;
}
@media screen and (max-width: 767px) {
  .ml-20 {
    margin-left: calc( 20rem * .7);
  }
}

.mr-20 {
  margin-right: 20rem;
}
@media screen and (max-width: 767px) {
  .mr-20 {
    margin-right: calc( 20rem * .7);
  }
}

.mx-20 {
  margin-left: 20rem;
  margin-right: 20rem;
}
@media screen and (max-width: 767px) {
  .mx-20 {
    margin-left: calc( 20rem * .7);
    margin-right: calc( 20rem * .7);
  }
}

.my-20 {
  margin-top: 20rem;
  margin-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .my-20 {
    margin-top: calc( 20rem * .7);
    margin-bottom: calc( 20rem * .7);
  }
}

.pt-20 {
  padding-top: 20rem;
}
@media screen and (max-width: 767px) {
  .pt-20 {
    padding-top: calc( 20rem * .7);
  }
}

.pb-20 {
  padding-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .pb-20 {
    padding-bottom: calc( 20rem * .7);
  }
}

.pl-20 {
  padding-left: 20rem;
}
@media screen and (max-width: 767px) {
  .pl-20 {
    padding-left: calc( 20rem * .7);
  }
}

.pr-20 {
  padding-right: 20rem;
}
@media screen and (max-width: 767px) {
  .pr-20 {
    padding-right: calc( 20rem * .7);
  }
}

.px-20 {
  padding-left: 20rem;
  padding-right: 20rem;
}
@media screen and (max-width: 767px) {
  .px-20 {
    padding-left: calc( 20rem * .7);
    padding-right: calc( 20rem * .7);
  }
}

.py-20 {
  padding-top: 20rem;
  padding-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .py-20 {
    padding-top: calc( 20rem * .7);
    padding-bottom: calc( 20rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-20 {
    margin-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-20 {
    margin-bottom: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-20 {
    margin-bottom: 20rem !important;
    margin-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-20 {
    padding-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-20 {
    padding-bottom: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-20 {
    padding-bottom: 20rem !important;
    padding-top: 20rem !important;
  }
}

.mt-21 {
  margin-top: 21rem;
}
@media screen and (max-width: 767px) {
  .mt-21 {
    margin-top: calc( 21rem * .7);
  }
}

.mb-21 {
  margin-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .mb-21 {
    margin-bottom: calc( 21rem * .7);
  }
}

.ml-21 {
  margin-left: 21rem;
}
@media screen and (max-width: 767px) {
  .ml-21 {
    margin-left: calc( 21rem * .7);
  }
}

.mr-21 {
  margin-right: 21rem;
}
@media screen and (max-width: 767px) {
  .mr-21 {
    margin-right: calc( 21rem * .7);
  }
}

.mx-21 {
  margin-left: 21rem;
  margin-right: 21rem;
}
@media screen and (max-width: 767px) {
  .mx-21 {
    margin-left: calc( 21rem * .7);
    margin-right: calc( 21rem * .7);
  }
}

.my-21 {
  margin-top: 21rem;
  margin-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .my-21 {
    margin-top: calc( 21rem * .7);
    margin-bottom: calc( 21rem * .7);
  }
}

.pt-21 {
  padding-top: 21rem;
}
@media screen and (max-width: 767px) {
  .pt-21 {
    padding-top: calc( 21rem * .7);
  }
}

.pb-21 {
  padding-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .pb-21 {
    padding-bottom: calc( 21rem * .7);
  }
}

.pl-21 {
  padding-left: 21rem;
}
@media screen and (max-width: 767px) {
  .pl-21 {
    padding-left: calc( 21rem * .7);
  }
}

.pr-21 {
  padding-right: 21rem;
}
@media screen and (max-width: 767px) {
  .pr-21 {
    padding-right: calc( 21rem * .7);
  }
}

.px-21 {
  padding-left: 21rem;
  padding-right: 21rem;
}
@media screen and (max-width: 767px) {
  .px-21 {
    padding-left: calc( 21rem * .7);
    padding-right: calc( 21rem * .7);
  }
}

.py-21 {
  padding-top: 21rem;
  padding-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .py-21 {
    padding-top: calc( 21rem * .7);
    padding-bottom: calc( 21rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-21 {
    margin-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-21 {
    margin-bottom: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-21 {
    margin-bottom: 21rem !important;
    margin-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-21 {
    padding-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-21 {
    padding-bottom: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-21 {
    padding-bottom: 21rem !important;
    padding-top: 21rem !important;
  }
}

.mt-22 {
  margin-top: 22rem;
}
@media screen and (max-width: 767px) {
  .mt-22 {
    margin-top: calc( 22rem * .7);
  }
}

.mb-22 {
  margin-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .mb-22 {
    margin-bottom: calc( 22rem * .7);
  }
}

.ml-22 {
  margin-left: 22rem;
}
@media screen and (max-width: 767px) {
  .ml-22 {
    margin-left: calc( 22rem * .7);
  }
}

.mr-22 {
  margin-right: 22rem;
}
@media screen and (max-width: 767px) {
  .mr-22 {
    margin-right: calc( 22rem * .7);
  }
}

.mx-22 {
  margin-left: 22rem;
  margin-right: 22rem;
}
@media screen and (max-width: 767px) {
  .mx-22 {
    margin-left: calc( 22rem * .7);
    margin-right: calc( 22rem * .7);
  }
}

.my-22 {
  margin-top: 22rem;
  margin-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .my-22 {
    margin-top: calc( 22rem * .7);
    margin-bottom: calc( 22rem * .7);
  }
}

.pt-22 {
  padding-top: 22rem;
}
@media screen and (max-width: 767px) {
  .pt-22 {
    padding-top: calc( 22rem * .7);
  }
}

.pb-22 {
  padding-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .pb-22 {
    padding-bottom: calc( 22rem * .7);
  }
}

.pl-22 {
  padding-left: 22rem;
}
@media screen and (max-width: 767px) {
  .pl-22 {
    padding-left: calc( 22rem * .7);
  }
}

.pr-22 {
  padding-right: 22rem;
}
@media screen and (max-width: 767px) {
  .pr-22 {
    padding-right: calc( 22rem * .7);
  }
}

.px-22 {
  padding-left: 22rem;
  padding-right: 22rem;
}
@media screen and (max-width: 767px) {
  .px-22 {
    padding-left: calc( 22rem * .7);
    padding-right: calc( 22rem * .7);
  }
}

.py-22 {
  padding-top: 22rem;
  padding-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .py-22 {
    padding-top: calc( 22rem * .7);
    padding-bottom: calc( 22rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-22 {
    margin-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-22 {
    margin-bottom: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-22 {
    margin-bottom: 22rem !important;
    margin-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-22 {
    padding-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-22 {
    padding-bottom: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-22 {
    padding-bottom: 22rem !important;
    padding-top: 22rem !important;
  }
}

.mt-23 {
  margin-top: 23rem;
}
@media screen and (max-width: 767px) {
  .mt-23 {
    margin-top: calc( 23rem * .7);
  }
}

.mb-23 {
  margin-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .mb-23 {
    margin-bottom: calc( 23rem * .7);
  }
}

.ml-23 {
  margin-left: 23rem;
}
@media screen and (max-width: 767px) {
  .ml-23 {
    margin-left: calc( 23rem * .7);
  }
}

.mr-23 {
  margin-right: 23rem;
}
@media screen and (max-width: 767px) {
  .mr-23 {
    margin-right: calc( 23rem * .7);
  }
}

.mx-23 {
  margin-left: 23rem;
  margin-right: 23rem;
}
@media screen and (max-width: 767px) {
  .mx-23 {
    margin-left: calc( 23rem * .7);
    margin-right: calc( 23rem * .7);
  }
}

.my-23 {
  margin-top: 23rem;
  margin-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .my-23 {
    margin-top: calc( 23rem * .7);
    margin-bottom: calc( 23rem * .7);
  }
}

.pt-23 {
  padding-top: 23rem;
}
@media screen and (max-width: 767px) {
  .pt-23 {
    padding-top: calc( 23rem * .7);
  }
}

.pb-23 {
  padding-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .pb-23 {
    padding-bottom: calc( 23rem * .7);
  }
}

.pl-23 {
  padding-left: 23rem;
}
@media screen and (max-width: 767px) {
  .pl-23 {
    padding-left: calc( 23rem * .7);
  }
}

.pr-23 {
  padding-right: 23rem;
}
@media screen and (max-width: 767px) {
  .pr-23 {
    padding-right: calc( 23rem * .7);
  }
}

.px-23 {
  padding-left: 23rem;
  padding-right: 23rem;
}
@media screen and (max-width: 767px) {
  .px-23 {
    padding-left: calc( 23rem * .7);
    padding-right: calc( 23rem * .7);
  }
}

.py-23 {
  padding-top: 23rem;
  padding-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .py-23 {
    padding-top: calc( 23rem * .7);
    padding-bottom: calc( 23rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-23 {
    margin-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-23 {
    margin-bottom: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-23 {
    margin-bottom: 23rem !important;
    margin-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-23 {
    padding-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-23 {
    padding-bottom: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-23 {
    padding-bottom: 23rem !important;
    padding-top: 23rem !important;
  }
}

.mt-24 {
  margin-top: 24rem;
}
@media screen and (max-width: 767px) {
  .mt-24 {
    margin-top: calc( 24rem * .7);
  }
}

.mb-24 {
  margin-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .mb-24 {
    margin-bottom: calc( 24rem * .7);
  }
}

.ml-24 {
  margin-left: 24rem;
}
@media screen and (max-width: 767px) {
  .ml-24 {
    margin-left: calc( 24rem * .7);
  }
}

.mr-24 {
  margin-right: 24rem;
}
@media screen and (max-width: 767px) {
  .mr-24 {
    margin-right: calc( 24rem * .7);
  }
}

.mx-24 {
  margin-left: 24rem;
  margin-right: 24rem;
}
@media screen and (max-width: 767px) {
  .mx-24 {
    margin-left: calc( 24rem * .7);
    margin-right: calc( 24rem * .7);
  }
}

.my-24 {
  margin-top: 24rem;
  margin-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .my-24 {
    margin-top: calc( 24rem * .7);
    margin-bottom: calc( 24rem * .7);
  }
}

.pt-24 {
  padding-top: 24rem;
}
@media screen and (max-width: 767px) {
  .pt-24 {
    padding-top: calc( 24rem * .7);
  }
}

.pb-24 {
  padding-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .pb-24 {
    padding-bottom: calc( 24rem * .7);
  }
}

.pl-24 {
  padding-left: 24rem;
}
@media screen and (max-width: 767px) {
  .pl-24 {
    padding-left: calc( 24rem * .7);
  }
}

.pr-24 {
  padding-right: 24rem;
}
@media screen and (max-width: 767px) {
  .pr-24 {
    padding-right: calc( 24rem * .7);
  }
}

.px-24 {
  padding-left: 24rem;
  padding-right: 24rem;
}
@media screen and (max-width: 767px) {
  .px-24 {
    padding-left: calc( 24rem * .7);
    padding-right: calc( 24rem * .7);
  }
}

.py-24 {
  padding-top: 24rem;
  padding-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .py-24 {
    padding-top: calc( 24rem * .7);
    padding-bottom: calc( 24rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-24 {
    margin-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-24 {
    margin-bottom: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-24 {
    margin-bottom: 24rem !important;
    margin-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-24 {
    padding-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-24 {
    padding-bottom: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-24 {
    padding-bottom: 24rem !important;
    padding-top: 24rem !important;
  }
}

.mt-25 {
  margin-top: 25rem;
}
@media screen and (max-width: 767px) {
  .mt-25 {
    margin-top: calc( 25rem * .7);
  }
}

.mb-25 {
  margin-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .mb-25 {
    margin-bottom: calc( 25rem * .7);
  }
}

.ml-25 {
  margin-left: 25rem;
}
@media screen and (max-width: 767px) {
  .ml-25 {
    margin-left: calc( 25rem * .7);
  }
}

.mr-25 {
  margin-right: 25rem;
}
@media screen and (max-width: 767px) {
  .mr-25 {
    margin-right: calc( 25rem * .7);
  }
}

.mx-25 {
  margin-left: 25rem;
  margin-right: 25rem;
}
@media screen and (max-width: 767px) {
  .mx-25 {
    margin-left: calc( 25rem * .7);
    margin-right: calc( 25rem * .7);
  }
}

.my-25 {
  margin-top: 25rem;
  margin-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .my-25 {
    margin-top: calc( 25rem * .7);
    margin-bottom: calc( 25rem * .7);
  }
}

.pt-25 {
  padding-top: 25rem;
}
@media screen and (max-width: 767px) {
  .pt-25 {
    padding-top: calc( 25rem * .7);
  }
}

.pb-25 {
  padding-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .pb-25 {
    padding-bottom: calc( 25rem * .7);
  }
}

.pl-25 {
  padding-left: 25rem;
}
@media screen and (max-width: 767px) {
  .pl-25 {
    padding-left: calc( 25rem * .7);
  }
}

.pr-25 {
  padding-right: 25rem;
}
@media screen and (max-width: 767px) {
  .pr-25 {
    padding-right: calc( 25rem * .7);
  }
}

.px-25 {
  padding-left: 25rem;
  padding-right: 25rem;
}
@media screen and (max-width: 767px) {
  .px-25 {
    padding-left: calc( 25rem * .7);
    padding-right: calc( 25rem * .7);
  }
}

.py-25 {
  padding-top: 25rem;
  padding-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .py-25 {
    padding-top: calc( 25rem * .7);
    padding-bottom: calc( 25rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-25 {
    margin-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-25 {
    margin-bottom: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-25 {
    margin-bottom: 25rem !important;
    margin-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-25 {
    padding-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-25 {
    padding-bottom: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-25 {
    padding-bottom: 25rem !important;
    padding-top: 25rem !important;
  }
}

.mt-26 {
  margin-top: 26rem;
}
@media screen and (max-width: 767px) {
  .mt-26 {
    margin-top: calc( 26rem * .7);
  }
}

.mb-26 {
  margin-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .mb-26 {
    margin-bottom: calc( 26rem * .7);
  }
}

.ml-26 {
  margin-left: 26rem;
}
@media screen and (max-width: 767px) {
  .ml-26 {
    margin-left: calc( 26rem * .7);
  }
}

.mr-26 {
  margin-right: 26rem;
}
@media screen and (max-width: 767px) {
  .mr-26 {
    margin-right: calc( 26rem * .7);
  }
}

.mx-26 {
  margin-left: 26rem;
  margin-right: 26rem;
}
@media screen and (max-width: 767px) {
  .mx-26 {
    margin-left: calc( 26rem * .7);
    margin-right: calc( 26rem * .7);
  }
}

.my-26 {
  margin-top: 26rem;
  margin-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .my-26 {
    margin-top: calc( 26rem * .7);
    margin-bottom: calc( 26rem * .7);
  }
}

.pt-26 {
  padding-top: 26rem;
}
@media screen and (max-width: 767px) {
  .pt-26 {
    padding-top: calc( 26rem * .7);
  }
}

.pb-26 {
  padding-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .pb-26 {
    padding-bottom: calc( 26rem * .7);
  }
}

.pl-26 {
  padding-left: 26rem;
}
@media screen and (max-width: 767px) {
  .pl-26 {
    padding-left: calc( 26rem * .7);
  }
}

.pr-26 {
  padding-right: 26rem;
}
@media screen and (max-width: 767px) {
  .pr-26 {
    padding-right: calc( 26rem * .7);
  }
}

.px-26 {
  padding-left: 26rem;
  padding-right: 26rem;
}
@media screen and (max-width: 767px) {
  .px-26 {
    padding-left: calc( 26rem * .7);
    padding-right: calc( 26rem * .7);
  }
}

.py-26 {
  padding-top: 26rem;
  padding-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .py-26 {
    padding-top: calc( 26rem * .7);
    padding-bottom: calc( 26rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-26 {
    margin-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-26 {
    margin-bottom: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-26 {
    margin-bottom: 26rem !important;
    margin-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-26 {
    padding-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-26 {
    padding-bottom: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-26 {
    padding-bottom: 26rem !important;
    padding-top: 26rem !important;
  }
}

.mt-27 {
  margin-top: 27rem;
}
@media screen and (max-width: 767px) {
  .mt-27 {
    margin-top: calc( 27rem * .7);
  }
}

.mb-27 {
  margin-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .mb-27 {
    margin-bottom: calc( 27rem * .7);
  }
}

.ml-27 {
  margin-left: 27rem;
}
@media screen and (max-width: 767px) {
  .ml-27 {
    margin-left: calc( 27rem * .7);
  }
}

.mr-27 {
  margin-right: 27rem;
}
@media screen and (max-width: 767px) {
  .mr-27 {
    margin-right: calc( 27rem * .7);
  }
}

.mx-27 {
  margin-left: 27rem;
  margin-right: 27rem;
}
@media screen and (max-width: 767px) {
  .mx-27 {
    margin-left: calc( 27rem * .7);
    margin-right: calc( 27rem * .7);
  }
}

.my-27 {
  margin-top: 27rem;
  margin-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .my-27 {
    margin-top: calc( 27rem * .7);
    margin-bottom: calc( 27rem * .7);
  }
}

.pt-27 {
  padding-top: 27rem;
}
@media screen and (max-width: 767px) {
  .pt-27 {
    padding-top: calc( 27rem * .7);
  }
}

.pb-27 {
  padding-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .pb-27 {
    padding-bottom: calc( 27rem * .7);
  }
}

.pl-27 {
  padding-left: 27rem;
}
@media screen and (max-width: 767px) {
  .pl-27 {
    padding-left: calc( 27rem * .7);
  }
}

.pr-27 {
  padding-right: 27rem;
}
@media screen and (max-width: 767px) {
  .pr-27 {
    padding-right: calc( 27rem * .7);
  }
}

.px-27 {
  padding-left: 27rem;
  padding-right: 27rem;
}
@media screen and (max-width: 767px) {
  .px-27 {
    padding-left: calc( 27rem * .7);
    padding-right: calc( 27rem * .7);
  }
}

.py-27 {
  padding-top: 27rem;
  padding-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .py-27 {
    padding-top: calc( 27rem * .7);
    padding-bottom: calc( 27rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-27 {
    margin-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-27 {
    margin-bottom: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-27 {
    margin-bottom: 27rem !important;
    margin-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-27 {
    padding-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-27 {
    padding-bottom: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-27 {
    padding-bottom: 27rem !important;
    padding-top: 27rem !important;
  }
}

.mt-28 {
  margin-top: 28rem;
}
@media screen and (max-width: 767px) {
  .mt-28 {
    margin-top: calc( 28rem * .7);
  }
}

.mb-28 {
  margin-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .mb-28 {
    margin-bottom: calc( 28rem * .7);
  }
}

.ml-28 {
  margin-left: 28rem;
}
@media screen and (max-width: 767px) {
  .ml-28 {
    margin-left: calc( 28rem * .7);
  }
}

.mr-28 {
  margin-right: 28rem;
}
@media screen and (max-width: 767px) {
  .mr-28 {
    margin-right: calc( 28rem * .7);
  }
}

.mx-28 {
  margin-left: 28rem;
  margin-right: 28rem;
}
@media screen and (max-width: 767px) {
  .mx-28 {
    margin-left: calc( 28rem * .7);
    margin-right: calc( 28rem * .7);
  }
}

.my-28 {
  margin-top: 28rem;
  margin-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .my-28 {
    margin-top: calc( 28rem * .7);
    margin-bottom: calc( 28rem * .7);
  }
}

.pt-28 {
  padding-top: 28rem;
}
@media screen and (max-width: 767px) {
  .pt-28 {
    padding-top: calc( 28rem * .7);
  }
}

.pb-28 {
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .pb-28 {
    padding-bottom: calc( 28rem * .7);
  }
}

.pl-28 {
  padding-left: 28rem;
}
@media screen and (max-width: 767px) {
  .pl-28 {
    padding-left: calc( 28rem * .7);
  }
}

.pr-28 {
  padding-right: 28rem;
}
@media screen and (max-width: 767px) {
  .pr-28 {
    padding-right: calc( 28rem * .7);
  }
}

.px-28 {
  padding-left: 28rem;
  padding-right: 28rem;
}
@media screen and (max-width: 767px) {
  .px-28 {
    padding-left: calc( 28rem * .7);
    padding-right: calc( 28rem * .7);
  }
}

.py-28 {
  padding-top: 28rem;
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .py-28 {
    padding-top: calc( 28rem * .7);
    padding-bottom: calc( 28rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-28 {
    margin-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-28 {
    margin-bottom: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-28 {
    margin-bottom: 28rem !important;
    margin-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-28 {
    padding-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-28 {
    padding-bottom: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-28 {
    padding-bottom: 28rem !important;
    padding-top: 28rem !important;
  }
}

.mt-29 {
  margin-top: 29rem;
}
@media screen and (max-width: 767px) {
  .mt-29 {
    margin-top: calc( 29rem * .7);
  }
}

.mb-29 {
  margin-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .mb-29 {
    margin-bottom: calc( 29rem * .7);
  }
}

.ml-29 {
  margin-left: 29rem;
}
@media screen and (max-width: 767px) {
  .ml-29 {
    margin-left: calc( 29rem * .7);
  }
}

.mr-29 {
  margin-right: 29rem;
}
@media screen and (max-width: 767px) {
  .mr-29 {
    margin-right: calc( 29rem * .7);
  }
}

.mx-29 {
  margin-left: 29rem;
  margin-right: 29rem;
}
@media screen and (max-width: 767px) {
  .mx-29 {
    margin-left: calc( 29rem * .7);
    margin-right: calc( 29rem * .7);
  }
}

.my-29 {
  margin-top: 29rem;
  margin-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .my-29 {
    margin-top: calc( 29rem * .7);
    margin-bottom: calc( 29rem * .7);
  }
}

.pt-29 {
  padding-top: 29rem;
}
@media screen and (max-width: 767px) {
  .pt-29 {
    padding-top: calc( 29rem * .7);
  }
}

.pb-29 {
  padding-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .pb-29 {
    padding-bottom: calc( 29rem * .7);
  }
}

.pl-29 {
  padding-left: 29rem;
}
@media screen and (max-width: 767px) {
  .pl-29 {
    padding-left: calc( 29rem * .7);
  }
}

.pr-29 {
  padding-right: 29rem;
}
@media screen and (max-width: 767px) {
  .pr-29 {
    padding-right: calc( 29rem * .7);
  }
}

.px-29 {
  padding-left: 29rem;
  padding-right: 29rem;
}
@media screen and (max-width: 767px) {
  .px-29 {
    padding-left: calc( 29rem * .7);
    padding-right: calc( 29rem * .7);
  }
}

.py-29 {
  padding-top: 29rem;
  padding-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .py-29 {
    padding-top: calc( 29rem * .7);
    padding-bottom: calc( 29rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-29 {
    margin-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-29 {
    margin-bottom: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-29 {
    margin-bottom: 29rem !important;
    margin-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-29 {
    padding-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-29 {
    padding-bottom: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-29 {
    padding-bottom: 29rem !important;
    padding-top: 29rem !important;
  }
}

.mt-30 {
  margin-top: 30rem;
}
@media screen and (max-width: 767px) {
  .mt-30 {
    margin-top: calc( 30rem * .7);
  }
}

.mb-30 {
  margin-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .mb-30 {
    margin-bottom: calc( 30rem * .7);
  }
}

.ml-30 {
  margin-left: 30rem;
}
@media screen and (max-width: 767px) {
  .ml-30 {
    margin-left: calc( 30rem * .7);
  }
}

.mr-30 {
  margin-right: 30rem;
}
@media screen and (max-width: 767px) {
  .mr-30 {
    margin-right: calc( 30rem * .7);
  }
}

.mx-30 {
  margin-left: 30rem;
  margin-right: 30rem;
}
@media screen and (max-width: 767px) {
  .mx-30 {
    margin-left: calc( 30rem * .7);
    margin-right: calc( 30rem * .7);
  }
}

.my-30 {
  margin-top: 30rem;
  margin-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .my-30 {
    margin-top: calc( 30rem * .7);
    margin-bottom: calc( 30rem * .7);
  }
}

.pt-30 {
  padding-top: 30rem;
}
@media screen and (max-width: 767px) {
  .pt-30 {
    padding-top: calc( 30rem * .7);
  }
}

.pb-30 {
  padding-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .pb-30 {
    padding-bottom: calc( 30rem * .7);
  }
}

.pl-30 {
  padding-left: 30rem;
}
@media screen and (max-width: 767px) {
  .pl-30 {
    padding-left: calc( 30rem * .7);
  }
}

.pr-30 {
  padding-right: 30rem;
}
@media screen and (max-width: 767px) {
  .pr-30 {
    padding-right: calc( 30rem * .7);
  }
}

.px-30 {
  padding-left: 30rem;
  padding-right: 30rem;
}
@media screen and (max-width: 767px) {
  .px-30 {
    padding-left: calc( 30rem * .7);
    padding-right: calc( 30rem * .7);
  }
}

.py-30 {
  padding-top: 30rem;
  padding-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .py-30 {
    padding-top: calc( 30rem * .7);
    padding-bottom: calc( 30rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-30 {
    margin-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-30 {
    margin-bottom: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-30 {
    margin-bottom: 30rem !important;
    margin-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-30 {
    padding-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-30 {
    padding-bottom: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-30 {
    padding-bottom: 30rem !important;
    padding-top: 30rem !important;
  }
}

.mt-31 {
  margin-top: 31rem;
}
@media screen and (max-width: 767px) {
  .mt-31 {
    margin-top: calc( 31rem * .7);
  }
}

.mb-31 {
  margin-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .mb-31 {
    margin-bottom: calc( 31rem * .7);
  }
}

.ml-31 {
  margin-left: 31rem;
}
@media screen and (max-width: 767px) {
  .ml-31 {
    margin-left: calc( 31rem * .7);
  }
}

.mr-31 {
  margin-right: 31rem;
}
@media screen and (max-width: 767px) {
  .mr-31 {
    margin-right: calc( 31rem * .7);
  }
}

.mx-31 {
  margin-left: 31rem;
  margin-right: 31rem;
}
@media screen and (max-width: 767px) {
  .mx-31 {
    margin-left: calc( 31rem * .7);
    margin-right: calc( 31rem * .7);
  }
}

.my-31 {
  margin-top: 31rem;
  margin-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .my-31 {
    margin-top: calc( 31rem * .7);
    margin-bottom: calc( 31rem * .7);
  }
}

.pt-31 {
  padding-top: 31rem;
}
@media screen and (max-width: 767px) {
  .pt-31 {
    padding-top: calc( 31rem * .7);
  }
}

.pb-31 {
  padding-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .pb-31 {
    padding-bottom: calc( 31rem * .7);
  }
}

.pl-31 {
  padding-left: 31rem;
}
@media screen and (max-width: 767px) {
  .pl-31 {
    padding-left: calc( 31rem * .7);
  }
}

.pr-31 {
  padding-right: 31rem;
}
@media screen and (max-width: 767px) {
  .pr-31 {
    padding-right: calc( 31rem * .7);
  }
}

.px-31 {
  padding-left: 31rem;
  padding-right: 31rem;
}
@media screen and (max-width: 767px) {
  .px-31 {
    padding-left: calc( 31rem * .7);
    padding-right: calc( 31rem * .7);
  }
}

.py-31 {
  padding-top: 31rem;
  padding-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .py-31 {
    padding-top: calc( 31rem * .7);
    padding-bottom: calc( 31rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-31 {
    margin-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-31 {
    margin-bottom: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-31 {
    margin-bottom: 31rem !important;
    margin-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-31 {
    padding-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-31 {
    padding-bottom: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-31 {
    padding-bottom: 31rem !important;
    padding-top: 31rem !important;
  }
}

.mt-32 {
  margin-top: 32rem;
}
@media screen and (max-width: 767px) {
  .mt-32 {
    margin-top: calc( 32rem * .7);
  }
}

.mb-32 {
  margin-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .mb-32 {
    margin-bottom: calc( 32rem * .7);
  }
}

.ml-32 {
  margin-left: 32rem;
}
@media screen and (max-width: 767px) {
  .ml-32 {
    margin-left: calc( 32rem * .7);
  }
}

.mr-32 {
  margin-right: 32rem;
}
@media screen and (max-width: 767px) {
  .mr-32 {
    margin-right: calc( 32rem * .7);
  }
}

.mx-32 {
  margin-left: 32rem;
  margin-right: 32rem;
}
@media screen and (max-width: 767px) {
  .mx-32 {
    margin-left: calc( 32rem * .7);
    margin-right: calc( 32rem * .7);
  }
}

.my-32 {
  margin-top: 32rem;
  margin-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .my-32 {
    margin-top: calc( 32rem * .7);
    margin-bottom: calc( 32rem * .7);
  }
}

.pt-32 {
  padding-top: 32rem;
}
@media screen and (max-width: 767px) {
  .pt-32 {
    padding-top: calc( 32rem * .7);
  }
}

.pb-32 {
  padding-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .pb-32 {
    padding-bottom: calc( 32rem * .7);
  }
}

.pl-32 {
  padding-left: 32rem;
}
@media screen and (max-width: 767px) {
  .pl-32 {
    padding-left: calc( 32rem * .7);
  }
}

.pr-32 {
  padding-right: 32rem;
}
@media screen and (max-width: 767px) {
  .pr-32 {
    padding-right: calc( 32rem * .7);
  }
}

.px-32 {
  padding-left: 32rem;
  padding-right: 32rem;
}
@media screen and (max-width: 767px) {
  .px-32 {
    padding-left: calc( 32rem * .7);
    padding-right: calc( 32rem * .7);
  }
}

.py-32 {
  padding-top: 32rem;
  padding-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .py-32 {
    padding-top: calc( 32rem * .7);
    padding-bottom: calc( 32rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-32 {
    margin-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-32 {
    margin-bottom: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-32 {
    margin-bottom: 32rem !important;
    margin-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-32 {
    padding-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-32 {
    padding-bottom: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-32 {
    padding-bottom: 32rem !important;
    padding-top: 32rem !important;
  }
}

.mt-33 {
  margin-top: 33rem;
}
@media screen and (max-width: 767px) {
  .mt-33 {
    margin-top: calc( 33rem * .7);
  }
}

.mb-33 {
  margin-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .mb-33 {
    margin-bottom: calc( 33rem * .7);
  }
}

.ml-33 {
  margin-left: 33rem;
}
@media screen and (max-width: 767px) {
  .ml-33 {
    margin-left: calc( 33rem * .7);
  }
}

.mr-33 {
  margin-right: 33rem;
}
@media screen and (max-width: 767px) {
  .mr-33 {
    margin-right: calc( 33rem * .7);
  }
}

.mx-33 {
  margin-left: 33rem;
  margin-right: 33rem;
}
@media screen and (max-width: 767px) {
  .mx-33 {
    margin-left: calc( 33rem * .7);
    margin-right: calc( 33rem * .7);
  }
}

.my-33 {
  margin-top: 33rem;
  margin-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .my-33 {
    margin-top: calc( 33rem * .7);
    margin-bottom: calc( 33rem * .7);
  }
}

.pt-33 {
  padding-top: 33rem;
}
@media screen and (max-width: 767px) {
  .pt-33 {
    padding-top: calc( 33rem * .7);
  }
}

.pb-33 {
  padding-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .pb-33 {
    padding-bottom: calc( 33rem * .7);
  }
}

.pl-33 {
  padding-left: 33rem;
}
@media screen and (max-width: 767px) {
  .pl-33 {
    padding-left: calc( 33rem * .7);
  }
}

.pr-33 {
  padding-right: 33rem;
}
@media screen and (max-width: 767px) {
  .pr-33 {
    padding-right: calc( 33rem * .7);
  }
}

.px-33 {
  padding-left: 33rem;
  padding-right: 33rem;
}
@media screen and (max-width: 767px) {
  .px-33 {
    padding-left: calc( 33rem * .7);
    padding-right: calc( 33rem * .7);
  }
}

.py-33 {
  padding-top: 33rem;
  padding-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .py-33 {
    padding-top: calc( 33rem * .7);
    padding-bottom: calc( 33rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-33 {
    margin-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-33 {
    margin-bottom: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-33 {
    margin-bottom: 33rem !important;
    margin-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-33 {
    padding-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-33 {
    padding-bottom: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-33 {
    padding-bottom: 33rem !important;
    padding-top: 33rem !important;
  }
}

.mt-34 {
  margin-top: 34rem;
}
@media screen and (max-width: 767px) {
  .mt-34 {
    margin-top: calc( 34rem * .7);
  }
}

.mb-34 {
  margin-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .mb-34 {
    margin-bottom: calc( 34rem * .7);
  }
}

.ml-34 {
  margin-left: 34rem;
}
@media screen and (max-width: 767px) {
  .ml-34 {
    margin-left: calc( 34rem * .7);
  }
}

.mr-34 {
  margin-right: 34rem;
}
@media screen and (max-width: 767px) {
  .mr-34 {
    margin-right: calc( 34rem * .7);
  }
}

.mx-34 {
  margin-left: 34rem;
  margin-right: 34rem;
}
@media screen and (max-width: 767px) {
  .mx-34 {
    margin-left: calc( 34rem * .7);
    margin-right: calc( 34rem * .7);
  }
}

.my-34 {
  margin-top: 34rem;
  margin-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .my-34 {
    margin-top: calc( 34rem * .7);
    margin-bottom: calc( 34rem * .7);
  }
}

.pt-34 {
  padding-top: 34rem;
}
@media screen and (max-width: 767px) {
  .pt-34 {
    padding-top: calc( 34rem * .7);
  }
}

.pb-34 {
  padding-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .pb-34 {
    padding-bottom: calc( 34rem * .7);
  }
}

.pl-34 {
  padding-left: 34rem;
}
@media screen and (max-width: 767px) {
  .pl-34 {
    padding-left: calc( 34rem * .7);
  }
}

.pr-34 {
  padding-right: 34rem;
}
@media screen and (max-width: 767px) {
  .pr-34 {
    padding-right: calc( 34rem * .7);
  }
}

.px-34 {
  padding-left: 34rem;
  padding-right: 34rem;
}
@media screen and (max-width: 767px) {
  .px-34 {
    padding-left: calc( 34rem * .7);
    padding-right: calc( 34rem * .7);
  }
}

.py-34 {
  padding-top: 34rem;
  padding-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .py-34 {
    padding-top: calc( 34rem * .7);
    padding-bottom: calc( 34rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-34 {
    margin-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-34 {
    margin-bottom: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-34 {
    margin-bottom: 34rem !important;
    margin-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-34 {
    padding-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-34 {
    padding-bottom: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-34 {
    padding-bottom: 34rem !important;
    padding-top: 34rem !important;
  }
}

.mt-35 {
  margin-top: 35rem;
}
@media screen and (max-width: 767px) {
  .mt-35 {
    margin-top: calc( 35rem * .7);
  }
}

.mb-35 {
  margin-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .mb-35 {
    margin-bottom: calc( 35rem * .7);
  }
}

.ml-35 {
  margin-left: 35rem;
}
@media screen and (max-width: 767px) {
  .ml-35 {
    margin-left: calc( 35rem * .7);
  }
}

.mr-35 {
  margin-right: 35rem;
}
@media screen and (max-width: 767px) {
  .mr-35 {
    margin-right: calc( 35rem * .7);
  }
}

.mx-35 {
  margin-left: 35rem;
  margin-right: 35rem;
}
@media screen and (max-width: 767px) {
  .mx-35 {
    margin-left: calc( 35rem * .7);
    margin-right: calc( 35rem * .7);
  }
}

.my-35 {
  margin-top: 35rem;
  margin-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .my-35 {
    margin-top: calc( 35rem * .7);
    margin-bottom: calc( 35rem * .7);
  }
}

.pt-35 {
  padding-top: 35rem;
}
@media screen and (max-width: 767px) {
  .pt-35 {
    padding-top: calc( 35rem * .7);
  }
}

.pb-35 {
  padding-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .pb-35 {
    padding-bottom: calc( 35rem * .7);
  }
}

.pl-35 {
  padding-left: 35rem;
}
@media screen and (max-width: 767px) {
  .pl-35 {
    padding-left: calc( 35rem * .7);
  }
}

.pr-35 {
  padding-right: 35rem;
}
@media screen and (max-width: 767px) {
  .pr-35 {
    padding-right: calc( 35rem * .7);
  }
}

.px-35 {
  padding-left: 35rem;
  padding-right: 35rem;
}
@media screen and (max-width: 767px) {
  .px-35 {
    padding-left: calc( 35rem * .7);
    padding-right: calc( 35rem * .7);
  }
}

.py-35 {
  padding-top: 35rem;
  padding-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .py-35 {
    padding-top: calc( 35rem * .7);
    padding-bottom: calc( 35rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-35 {
    margin-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-35 {
    margin-bottom: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-35 {
    margin-bottom: 35rem !important;
    margin-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-35 {
    padding-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-35 {
    padding-bottom: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-35 {
    padding-bottom: 35rem !important;
    padding-top: 35rem !important;
  }
}

.mt-36 {
  margin-top: 36rem;
}
@media screen and (max-width: 767px) {
  .mt-36 {
    margin-top: calc( 36rem * .7);
  }
}

.mb-36 {
  margin-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .mb-36 {
    margin-bottom: calc( 36rem * .7);
  }
}

.ml-36 {
  margin-left: 36rem;
}
@media screen and (max-width: 767px) {
  .ml-36 {
    margin-left: calc( 36rem * .7);
  }
}

.mr-36 {
  margin-right: 36rem;
}
@media screen and (max-width: 767px) {
  .mr-36 {
    margin-right: calc( 36rem * .7);
  }
}

.mx-36 {
  margin-left: 36rem;
  margin-right: 36rem;
}
@media screen and (max-width: 767px) {
  .mx-36 {
    margin-left: calc( 36rem * .7);
    margin-right: calc( 36rem * .7);
  }
}

.my-36 {
  margin-top: 36rem;
  margin-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .my-36 {
    margin-top: calc( 36rem * .7);
    margin-bottom: calc( 36rem * .7);
  }
}

.pt-36 {
  padding-top: 36rem;
}
@media screen and (max-width: 767px) {
  .pt-36 {
    padding-top: calc( 36rem * .7);
  }
}

.pb-36 {
  padding-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .pb-36 {
    padding-bottom: calc( 36rem * .7);
  }
}

.pl-36 {
  padding-left: 36rem;
}
@media screen and (max-width: 767px) {
  .pl-36 {
    padding-left: calc( 36rem * .7);
  }
}

.pr-36 {
  padding-right: 36rem;
}
@media screen and (max-width: 767px) {
  .pr-36 {
    padding-right: calc( 36rem * .7);
  }
}

.px-36 {
  padding-left: 36rem;
  padding-right: 36rem;
}
@media screen and (max-width: 767px) {
  .px-36 {
    padding-left: calc( 36rem * .7);
    padding-right: calc( 36rem * .7);
  }
}

.py-36 {
  padding-top: 36rem;
  padding-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .py-36 {
    padding-top: calc( 36rem * .7);
    padding-bottom: calc( 36rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-36 {
    margin-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-36 {
    margin-bottom: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-36 {
    margin-bottom: 36rem !important;
    margin-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-36 {
    padding-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-36 {
    padding-bottom: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-36 {
    padding-bottom: 36rem !important;
    padding-top: 36rem !important;
  }
}

.mt-37 {
  margin-top: 37rem;
}
@media screen and (max-width: 767px) {
  .mt-37 {
    margin-top: calc( 37rem * .7);
  }
}

.mb-37 {
  margin-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .mb-37 {
    margin-bottom: calc( 37rem * .7);
  }
}

.ml-37 {
  margin-left: 37rem;
}
@media screen and (max-width: 767px) {
  .ml-37 {
    margin-left: calc( 37rem * .7);
  }
}

.mr-37 {
  margin-right: 37rem;
}
@media screen and (max-width: 767px) {
  .mr-37 {
    margin-right: calc( 37rem * .7);
  }
}

.mx-37 {
  margin-left: 37rem;
  margin-right: 37rem;
}
@media screen and (max-width: 767px) {
  .mx-37 {
    margin-left: calc( 37rem * .7);
    margin-right: calc( 37rem * .7);
  }
}

.my-37 {
  margin-top: 37rem;
  margin-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .my-37 {
    margin-top: calc( 37rem * .7);
    margin-bottom: calc( 37rem * .7);
  }
}

.pt-37 {
  padding-top: 37rem;
}
@media screen and (max-width: 767px) {
  .pt-37 {
    padding-top: calc( 37rem * .7);
  }
}

.pb-37 {
  padding-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .pb-37 {
    padding-bottom: calc( 37rem * .7);
  }
}

.pl-37 {
  padding-left: 37rem;
}
@media screen and (max-width: 767px) {
  .pl-37 {
    padding-left: calc( 37rem * .7);
  }
}

.pr-37 {
  padding-right: 37rem;
}
@media screen and (max-width: 767px) {
  .pr-37 {
    padding-right: calc( 37rem * .7);
  }
}

.px-37 {
  padding-left: 37rem;
  padding-right: 37rem;
}
@media screen and (max-width: 767px) {
  .px-37 {
    padding-left: calc( 37rem * .7);
    padding-right: calc( 37rem * .7);
  }
}

.py-37 {
  padding-top: 37rem;
  padding-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .py-37 {
    padding-top: calc( 37rem * .7);
    padding-bottom: calc( 37rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-37 {
    margin-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-37 {
    margin-bottom: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-37 {
    margin-bottom: 37rem !important;
    margin-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-37 {
    padding-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-37 {
    padding-bottom: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-37 {
    padding-bottom: 37rem !important;
    padding-top: 37rem !important;
  }
}

.mt-38 {
  margin-top: 38rem;
}
@media screen and (max-width: 767px) {
  .mt-38 {
    margin-top: calc( 38rem * .7);
  }
}

.mb-38 {
  margin-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .mb-38 {
    margin-bottom: calc( 38rem * .7);
  }
}

.ml-38 {
  margin-left: 38rem;
}
@media screen and (max-width: 767px) {
  .ml-38 {
    margin-left: calc( 38rem * .7);
  }
}

.mr-38 {
  margin-right: 38rem;
}
@media screen and (max-width: 767px) {
  .mr-38 {
    margin-right: calc( 38rem * .7);
  }
}

.mx-38 {
  margin-left: 38rem;
  margin-right: 38rem;
}
@media screen and (max-width: 767px) {
  .mx-38 {
    margin-left: calc( 38rem * .7);
    margin-right: calc( 38rem * .7);
  }
}

.my-38 {
  margin-top: 38rem;
  margin-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .my-38 {
    margin-top: calc( 38rem * .7);
    margin-bottom: calc( 38rem * .7);
  }
}

.pt-38 {
  padding-top: 38rem;
}
@media screen and (max-width: 767px) {
  .pt-38 {
    padding-top: calc( 38rem * .7);
  }
}

.pb-38 {
  padding-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .pb-38 {
    padding-bottom: calc( 38rem * .7);
  }
}

.pl-38 {
  padding-left: 38rem;
}
@media screen and (max-width: 767px) {
  .pl-38 {
    padding-left: calc( 38rem * .7);
  }
}

.pr-38 {
  padding-right: 38rem;
}
@media screen and (max-width: 767px) {
  .pr-38 {
    padding-right: calc( 38rem * .7);
  }
}

.px-38 {
  padding-left: 38rem;
  padding-right: 38rem;
}
@media screen and (max-width: 767px) {
  .px-38 {
    padding-left: calc( 38rem * .7);
    padding-right: calc( 38rem * .7);
  }
}

.py-38 {
  padding-top: 38rem;
  padding-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .py-38 {
    padding-top: calc( 38rem * .7);
    padding-bottom: calc( 38rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-38 {
    margin-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-38 {
    margin-bottom: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-38 {
    margin-bottom: 38rem !important;
    margin-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-38 {
    padding-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-38 {
    padding-bottom: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-38 {
    padding-bottom: 38rem !important;
    padding-top: 38rem !important;
  }
}

.mt-39 {
  margin-top: 39rem;
}
@media screen and (max-width: 767px) {
  .mt-39 {
    margin-top: calc( 39rem * .7);
  }
}

.mb-39 {
  margin-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .mb-39 {
    margin-bottom: calc( 39rem * .7);
  }
}

.ml-39 {
  margin-left: 39rem;
}
@media screen and (max-width: 767px) {
  .ml-39 {
    margin-left: calc( 39rem * .7);
  }
}

.mr-39 {
  margin-right: 39rem;
}
@media screen and (max-width: 767px) {
  .mr-39 {
    margin-right: calc( 39rem * .7);
  }
}

.mx-39 {
  margin-left: 39rem;
  margin-right: 39rem;
}
@media screen and (max-width: 767px) {
  .mx-39 {
    margin-left: calc( 39rem * .7);
    margin-right: calc( 39rem * .7);
  }
}

.my-39 {
  margin-top: 39rem;
  margin-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .my-39 {
    margin-top: calc( 39rem * .7);
    margin-bottom: calc( 39rem * .7);
  }
}

.pt-39 {
  padding-top: 39rem;
}
@media screen and (max-width: 767px) {
  .pt-39 {
    padding-top: calc( 39rem * .7);
  }
}

.pb-39 {
  padding-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .pb-39 {
    padding-bottom: calc( 39rem * .7);
  }
}

.pl-39 {
  padding-left: 39rem;
}
@media screen and (max-width: 767px) {
  .pl-39 {
    padding-left: calc( 39rem * .7);
  }
}

.pr-39 {
  padding-right: 39rem;
}
@media screen and (max-width: 767px) {
  .pr-39 {
    padding-right: calc( 39rem * .7);
  }
}

.px-39 {
  padding-left: 39rem;
  padding-right: 39rem;
}
@media screen and (max-width: 767px) {
  .px-39 {
    padding-left: calc( 39rem * .7);
    padding-right: calc( 39rem * .7);
  }
}

.py-39 {
  padding-top: 39rem;
  padding-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .py-39 {
    padding-top: calc( 39rem * .7);
    padding-bottom: calc( 39rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-39 {
    margin-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-39 {
    margin-bottom: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-39 {
    margin-bottom: 39rem !important;
    margin-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-39 {
    padding-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-39 {
    padding-bottom: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-39 {
    padding-bottom: 39rem !important;
    padding-top: 39rem !important;
  }
}

.mt-40 {
  margin-top: 40rem;
}
@media screen and (max-width: 767px) {
  .mt-40 {
    margin-top: calc( 40rem * .7);
  }
}

.mb-40 {
  margin-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .mb-40 {
    margin-bottom: calc( 40rem * .7);
  }
}

.ml-40 {
  margin-left: 40rem;
}
@media screen and (max-width: 767px) {
  .ml-40 {
    margin-left: calc( 40rem * .7);
  }
}

.mr-40 {
  margin-right: 40rem;
}
@media screen and (max-width: 767px) {
  .mr-40 {
    margin-right: calc( 40rem * .7);
  }
}

.mx-40 {
  margin-left: 40rem;
  margin-right: 40rem;
}
@media screen and (max-width: 767px) {
  .mx-40 {
    margin-left: calc( 40rem * .7);
    margin-right: calc( 40rem * .7);
  }
}

.my-40 {
  margin-top: 40rem;
  margin-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .my-40 {
    margin-top: calc( 40rem * .7);
    margin-bottom: calc( 40rem * .7);
  }
}

.pt-40 {
  padding-top: 40rem;
}
@media screen and (max-width: 767px) {
  .pt-40 {
    padding-top: calc( 40rem * .7);
  }
}

.pb-40 {
  padding-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .pb-40 {
    padding-bottom: calc( 40rem * .7);
  }
}

.pl-40 {
  padding-left: 40rem;
}
@media screen and (max-width: 767px) {
  .pl-40 {
    padding-left: calc( 40rem * .7);
  }
}

.pr-40 {
  padding-right: 40rem;
}
@media screen and (max-width: 767px) {
  .pr-40 {
    padding-right: calc( 40rem * .7);
  }
}

.px-40 {
  padding-left: 40rem;
  padding-right: 40rem;
}
@media screen and (max-width: 767px) {
  .px-40 {
    padding-left: calc( 40rem * .7);
    padding-right: calc( 40rem * .7);
  }
}

.py-40 {
  padding-top: 40rem;
  padding-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .py-40 {
    padding-top: calc( 40rem * .7);
    padding-bottom: calc( 40rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-40 {
    margin-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-40 {
    margin-bottom: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-40 {
    margin-bottom: 40rem !important;
    margin-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-40 {
    padding-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-40 {
    padding-bottom: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-40 {
    padding-bottom: 40rem !important;
    padding-top: 40rem !important;
  }
}

#page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: #ef8289;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
  transition: background 0.3s;
}
@media screen and (max-width: 767px) {
  #page-header {
    justify-content: center;
  }
}
#page-header .header-logo img {
  height: 35px;
  width: auto;
}
#page-header .header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  #page-header .header-cta {
    display: none;
  }
}
#page-header .header-cta a {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #1C2B45;
  border: 1px solid rgba(28, 43, 69, 0.4);
  padding: 7px 18px;
  border-radius: 20px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  #page-header .header-cta a {
    font-size: 11px;
    padding: 7px 10px;
  }
}
#page-header .header-cta a:hover {
  background: #C05888;
  border-color: #C05888;
  color: #fff;
}

.hero {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.hero-main {
  flex: 1;
  position: relative;
  background-image: linear-gradient(-225deg, #b5e6d7 0%, #E8F2FF 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 52px;
}
.hero-main::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(192, 88, 136, 0.1) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
}
.hero-main::after {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-image: linear-gradient(to top, #FFD8EC 0%, #DDEAFF 100%);
  pointer-events: none;
}

.hero-main-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: #C05888;
  opacity: 0.5;
}
.hero-eyebrow span {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.45em;
  color: #C05888;
  text-transform: uppercase;
}

.hero-kicker {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 500;
  letter-spacing: 0.28em;
  max-width: 700px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #8A3E60;
  opacity: 0;
  animation: fadeUp 0.7s 0.38s forwards;
}

.hero-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(42px, 8vw, 88px);
  font-weight: 600;
  color: #1C2B45;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeUp 0.8s 0.52s forwards;
}

.hero-en {
  font-family: "Dancing Script", cursive;
  font-size: clamp(18px, 2.8vw, 28px);
  color: #C05888;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.7s 0.66s forwards;
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.7s 0.82s forwards;
}

.hero-off-badge {
  flex-shrink: 0;
  background: #D06080;
  color: #fff;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(208, 96, 128, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  animation: badgePop 0.6s 1s both, floatY 3.5s 1.6s ease-in-out infinite;
  position: relative;
}
.hero-off-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.hero-off-badge .hob-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.88;
  line-height: 1.3;
  text-align: center;
}
.hero-off-badge .hob-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-off-badge .hob-num span {
  font-size: 20px;
  font-weight: 700;
}

.hero-period-box {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.period-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: #5A5A5A;
}
.period-row .period-tag {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.15em;
  background: #9AA0B2;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.period-row .period-val {
  font-size: 13px;
  font-weight: 500;
  color: #1C2B45;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 28px;
  background: #1C2B45;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.2em;
  border-radius: 30px;
  transition: all 0.12s ease;
}

.hero-strip {
  height: 220px;
  overflow: hidden;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}
.hero-strip::before, .hero-strip::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
.hero-strip::before {
  left: 0;
  background: linear-gradient(to right, #f4f4eb, transparent);
}
.hero-strip::after {
  right: 0;
  background: linear-gradient(to left, #f4f4eb, transparent);
}

.hero-strip-track {
  display: flex;
  gap: 6px;
  width: max-content;
  height: 100%;
  animation: stripScroll 32s linear infinite;
}
.hero-strip-track:hover {
  animation-play-state: paused;
}

.strip-item {
  width: 320px;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}
.strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.strip-item:hover img {
  transform: scale(1.05);
}

.section-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.section-head {
  text-align: center;
  margin-bottom: 52px;
}
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.45em;
  color: #c5ae2b;
  margin-bottom: 14px;
}
.section-head .eyebrow::before, .section-head .eyebrow::after {
  content: "";
  width: 22px;
  height: 1.5px;
  background: #c5ae2b;
  opacity: 0.5;
}
.section-head h2 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 400;
  color: #1C2B45;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.section-head .lead {
  margin-top: 14px;
  font-size: 14px;
  color: #5A5A5A;
  line-height: 1.9;
}

.section-campaign {
  padding: 96px 0 88px;
  background: #fcf9dc;
  position: relative;
  overflow: hidden;
}
.section-campaign::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(58, 144, 128, 0.1) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 10% 100%, rgba(58, 144, 128, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 90% 80%, rgba(237, 208, 122, 0.07) 0%, transparent 55%);
  pointer-events: none;
}
.section-campaign::after {
  content: "";
  position: absolute;
  inset: 0;
  /*background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;*/
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
}
.section-campaign .section-head h2 {
  color: #1C2B45;
  font-weight: 300;
  letter-spacing: 0.08em;
}
.section-campaign .section-head .eyebrow {
  color: #c5ae2b;
}
.section-campaign .section-head .eyebrow::before, .section-campaign .section-head .eyebrow::after {
  background: #c5ae2b;
}
.section-campaign .section-head .lead {
  color: #5A5A5A;
}

.campaign-card {
  max-width: 900px;
  margin: 0 auto 24px;
  border-radius: 16px;
  background: #fff;
  background-image: linear-gradient(-225deg, #FFF8F2 0%, #FFFDF8 100%);
  border: 1px solid #baba3e;
  overflow: hidden;
}

.campaign-card-header {
  padding: 32px 52px 28px;
  text-align: center;
  border-bottom: 1px solid #baba3e;
  background: #baba3e;
}
.campaign-card-header .tag-en {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.55em;
  color: #fff;
  margin-bottom: 10px;
  opacity: 0.85;
}
.campaign-card-header h3 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fff;
}

.campaign-card-body {
  padding: 44px 52px 38px;
  text-align: center;
}

.campaign-off-block {
  text-align: center;
  padding-bottom: 32px;
  margin-bottom: 28px;
  position: relative;
}
.campaign-off-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, #c5ae2b, transparent);
}

.off-label {
  font-size: 15px;
  letter-spacing: 0.35em;
  color: #c5ae2b;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 400;
}

.off-number {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.off-number .num {
  font-size: clamp(100px, 17vw, 168px);
  font-weight: 700;
  color: #ef8289;
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-family: "Noto Serif JP", serif;
}
.off-number .pct {
  font-size: clamp(38px, 6.5vw, 68px);
  font-weight: 400;
  color: #ef8289;
  letter-spacing: -0.01em;
  font-family: "Noto Serif JP", serif;
}

.off-sub {
  margin-top: 16px;
  font-size: 14px;
  color: #909090;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.campaign-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.date-item {
  padding: 16px 20px;
}
.date-item .d-label {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #c5ae2b;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-weight: 500;
}
.date-item .d-value {
  font-size: 14px;
  font-weight: 500;
  color: #1C2B45;
  line-height: 1.75;
}

.campaign-note {
  margin-top: 16px;
  font-size: 11px;
  color: #909090;
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-align: center;
}

.lucky-strip {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #6da1e4;
  background: #eef4fc;
}

.lucky-strip-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #98bdec;
  padding: 18px 30px;
  color: #5A2A22;
  border-bottom: 1px solid rgba(155, 74, 66, 0.3);
  position: relative;
}
.lucky-strip-head::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #ac6ac5 30%, #ac6ac5 70%, transparent);
}
.lucky-strip-head::after {
  display: none;
}
.lucky-strip-head .ls-badge {
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 500;
}
.lucky-strip-head .ls-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .lucky-strip-head .ls-title {
    text-align: center;
  }
}
.lucky-strip-head .ls-en {
  margin-left: auto;
  margin-right: 0;
  font-family: "Dancing Script", cursive;
  font-size: clamp(13px, 1.6vw, 17px);
  color: rgba(90, 42, 34, 0.5);
  white-space: nowrap;
}

.lucky-strip-body {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
}

.lucky-lead {
  font-size: 13px;
  color: #7A4A44;
  text-align: center;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
.lucky-lead strong {
  color: #5A2A22;
  font-weight: 500;
}
.lucky-lead .ls-period {
  display: inline-block;
  margin-left: 14px;
  font-size: 11px;
  color: #5794e0;
  padding: 3px 12px;
  background: rgba(152, 189, 236, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(152, 189, 236, 0.3);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.lucky-cap {
  font-size: 11px;
  text-align: center;
}

.lucky-prizes-inline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.prize-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.prize-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.prize-inline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 0 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(172, 106, 197, 0.18);
  transition: all 0.28s ease;
  cursor: default;
  overflow: hidden;
}
.prize-inline-item .prize-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.prize-rank-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.prize-rank-sm.rank-1 {
  color: #fff;
  background: #efacbe;
}
.prize-rank-sm.rank-2 {
  color: #fff;
  background: #69be9c;
}
.prize-rank-sm.rank-3 {
  color: #fff;
  background: rgba(154, 162, 75, 0.85);
}
.prize-rank-sm.rank-4 {
  color: #fff;
  background: rgba(120, 187, 163, 0.85);
}

.prize-inline-text .p-name {
  font-size: 18px;
  font-weight: 500;
  color: #5A2A22;
  line-height: 1.45;
}
.prize-inline-text .p-sub {
  font-size: 10px;
  color: #A07870;
  line-height: 1.45;
  margin-top: 3px;
}

.lucky-strip-footer {
  padding: 14px 30px 16px;
  border-top: 1px solid #6da1e4;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #6da1e4;
  letter-spacing: 0.03em;
}
.lucky-strip-footer .sns-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(152, 189, 236, 0.12);
  color: #4a8bde;
  background: #fff;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(152, 189, 236, 0.35);
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.2s;
}
.lucky-strip-footer .sns-icon:hover {
  background: rgba(152, 189, 236, 0.22);
}

.section-hotels {
  padding: 88px 0;
  background: #f4f4eb;
}

.hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.hotel-card {
  background: #f4f4eb;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(192, 88, 136, 0.15);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}
.hotel-card:nth-child(1) .hotel-img-wrap {
  background: linear-gradient(135deg, #1C2B45, #2C4A7A);
}
.hotel-card:nth-child(2) .hotel-img-wrap {
  background: linear-gradient(135deg, #1C2830, #1C5050);
}
.hotel-card:nth-child(3) .hotel-img-wrap {
  background: linear-gradient(135deg, #281838, #583068);
}
.hotel-card:nth-child(4) .hotel-img-wrap {
  background: linear-gradient(135deg, #1A2818, #285028);
}
.hotel-card:nth-child(5) .hotel-img-wrap {
  background: linear-gradient(135deg, #2C1C12, #784018);
}
.hotel-card:nth-child(6) .hotel-img-wrap {
  background: linear-gradient(135deg, #1A1030, #481E60);
}
.hotel-card:nth-child(7) .hotel-img-wrap {
  background: linear-gradient(135deg, #0C1C30, #184870);
}
.hotel-card:nth-child(8) .hotel-img-wrap {
  background: linear-gradient(135deg, #301A0E, #7A3C1C);
}
.hotel-card:nth-child(9) .hotel-img-wrap {
  background: linear-gradient(135deg, #0E1828, #103858);
}
.hotel-card:nth-child(10) .hotel-img-wrap {
  background: linear-gradient(135deg, #182820, #185840);
}
.hotel-card:nth-child(11) .hotel-img-wrap {
  background: linear-gradient(135deg, #201018, #5C1E2E);
}
.hotel-card:nth-child(12) .hotel-img-wrap {
  background: linear-gradient(135deg, #1E1628, #502C58);
}

.hotel-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.hotel-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.hotel-area-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(28, 43, 69, 0.82);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 20px;
}

.hotel-name-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 12px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.52));
  color: #fff;
  font-size: 13px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.hotel-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.hotel-card-body .h-name {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 500;
  color: #1C2B45;
  margin-bottom: 5px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.hotel-card-body .h-desc {
  font-size: 12px;
  color: #5A5A5A;
  line-height: 1.7;
  flex: 1;
  margin-bottom: 12px;
}

.btn-reserve {
  display: block;
  text-align: center;
  background: #ef8289;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 10px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
  position: relative;
  font-weight: 600;
}
.btn-reserve::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  transition: right 0.2s ease;
}
.btn-reserve:hover {
  opacity: 0.8;
}

.section-notes {
  padding: 48px 0;
  background: #fff;
}

.notes-list {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  color: #888;
  line-height: 1.85;
}
.notes-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: #bbb;
}

footer {
  background: #1C2B45;
  padding: 44px 32px 28px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.footer-logo {
  margin-bottom: 16px;
}
.footer-logo img {
  height: 36px;
  width: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.58;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 20px;
}
.footer-links a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: 0.08em;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: rgba(255, 255, 255, 0.72);
}

.footer-copyright {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.12em;
}

.gold-line {
  width: 36px;
  height: 1px;
  background: #EDD07A;
  margin: 0 auto 14px;
  opacity: 0.45;
}

@media (max-width: 960px) {
  .hero-off-badge {
    width: 120px;
    height: 120px;
  }
  .hero-off-badge .hob-num {
    font-size: 34px;
  }

  .campaign-card-body {
    padding: 36px 36px 28px;
  }

  .campaign-card-header {
    padding: 28px 36px;
  }

  .campaign-dates {
    grid-template-columns: 1fr 1fr;
  }

  .lucky-prizes-inline {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .strip-item {
    width: 260px;
    height: 180px;
  }

  .hero-strip {
    height: 180px;
  }
}
@media (max-width: 640px) {
  #page-header {
    padding: 0 16px;
  }

  .section-wrap {
    padding: 0 18px;
  }

  .hero-main {
    padding: 80px 20px 40px;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .hero-period-box {
    text-align: center;
    align-items: center;
  }

  .period-row {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .hero-off-badge {
    width: 110px;
    height: 110px;
  }
  .hero-off-badge .hob-num {
    font-size: 30px;
  }

  .campaign-card-header {
    padding: 24px 20px;
  }

  .campaign-card-body {
    padding: 28px 20px 24px;
  }

  .campaign-dates {
    grid-template-columns: 1fr;
  }

  .lucky-strip-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .lucky-strip-head .ls-en {
    display: none;
  }

  .lucky-prizes-inline {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }

  .lucky-lead .ls-period {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }

  .hotels-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .strip-item {
    width: 200px;
    height: 150px;
  }

  .hero-strip {
    height: 150px;
  }

  .section-campaign,
.section-hotels {
    padding: 60px 0;
  }
}
.confetti-wrap {
  position: absolute;
  /* そのセクション内で重ねたいなら親を position:relative に */
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#confetti {
  width: 100%;
  height: 100%;
  display: block;
}

.kazari-b {
  width: 100%;
  overflow: hidden;
  height: 10rem;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
}
.kazari-b img {
  width: 100%;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .kazari-b img {
    left: 50%;
    width: 200%;
    transform: translateX(-50%);
  }
}

.kazari {
  position: absolute;
  position: sticky;
  z-index: -1;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.kazari img {
  width: 30%;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 767px) {
  .kazari img {
    width: 40%;
  }
}
.kazari-l {
  left: 0;
}
.kazari-r {
  right: 0;
}

/*# sourceMappingURL=style-lp.css.map */