html,
body {
  font-family: var(--sort-body-font);
  font-weight: var(--sort-body-font-weight);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-padding{
  padding-inline:var(--page-padding);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block: 0;
}

h1,
.title1,
.font-h1 {
  font-family: var(--sort-title1-font);
  font-size: var(--sort-title1-size);
  font-weight: var(--sort-title1-font-weight);
  line-height: var(--sort-title1-line-height);
  letter-spacing: var(--sort-title1-letter-spacing);
}

h2,
.title2,
.font-h2 {
  font-family: var(--sort-title2-font);
  font-size: var(--sort-title2-size);
  font-weight: var(--sort-title2-font-weight);
  line-height: var(--sort-title2-line-height);
  letter-spacing: var(--sort-title2-letter-spacing);
}

h3,
.title3,
.font-h3 {
  font-family: var(--sort-title3-font);
  font-size: var(--sort-title3-size);
  font-weight: var(--sort-title3-font-weight);
  line-height: var(--sort-title3-line-height);
  letter-spacing: var(--sort-title3-letter-spacing);
}

h4,
.title4,
.font-h4 {
  font-family: var(--sort-title4-font);
  font-size: var(--sort-title4-size);
  font-weight: var(--sort-title4-font-weight);
  line-height: var(--sort-title4-line-height);
  letter-spacing: var(--sort-title4-letter-spacing);
}

.body1,
.font-text-1 {
  font-family: var(--sort-body1-font);
  font-size: var(--sort-body1-size);
  font-weight: var(--sort-body1-font-weight);
  line-height: var(--sort-body1-line-height);
  letter-spacing: var(--sort-body1-letter-spacing);
}

.body2,
.font-text-2 {
  font-family: var(--sort-body2-font);
  font-size: var(--sort-body2-size);
  font-weight: var(--sort-body2-font-weight);
  line-height: var(--sort-body2-line-height);
  letter-spacing: var(--sort-body2-letter-spacing);
}

.body3,
.font-text-3 {
  font-family: var(--sort-body3-font);
  font-size: var(--sort-body3-size);
  font-weight: var(--sort-body3-font-weight);
  line-height: var(--sort-body3-line-height);
  letter-spacing: var(--sort-body3-letter-spacing);
}

.body4,
.font-text-4 {
  font-family: var(--sort-body4-font);
  font-size: var(--sort-body4-size);
  font-weight: var(--sort-body4-font-weight);
  line-height: var(--sort-body4-line-height);
  letter-spacing: var(--sort-body4-letter-spacing);
}

.body5,
.font-text-5 {

  font-family: var(--sort-body5-font);
  font-size: var(--sort-body5-size);
  font-weight: var(--sort-body5-font-weight);
  line-height: var(--sort-body5-line-height);
  letter-spacing: var(--sort-body5-letter-spacing);
}

.opacity-10{
  opacity: 1;
}
.opacity-9{
  opacity: 0.9;
}
.opacity-8{
  opacity: 0.8;
}
.opacity-7{
  opacity: 0.7;
}
.opacity-6{
  opacity: 0.6;
}
.opacity-5{
  opacity: 0.5;
}
.opacity-4{
  opacity: 0.5;
}
.opacity-3{
  opacity: 0.3;
}
.opacity-2{
  opacity: 0.2;
}
.opacity-1{
  opacity: 0.1;
}

.w100{
  width: 100%;
}

.h100{
  height: 100%;
}

img{
  max-width: 100%;
  height: auto;
  object-fit:contain;
}

v-image{
  width: 100%;
  height: 100%;
  display: flex;
  aspect-ratio: var(--aspect-ratio);
}

v-image .placeholder{
  background-color: rgba(51,51,51,0.4);
  height: 100%;
  width: 100%;
}
.fit-contain{
  object-fit:contain;
}
.fit-fill{
  object-fit: fill;
}
.fit-cover{
  object-fit: cover;
}

@media (max-width: 959px) {
  h1,
  .title1,
  .font-h1 {
    font-size: var(--sort-title1-size-mobile);
    line-height: var(--sort-title1-line-height-mobile);
  }

  h2,
  .title2,
  .font-h2 {
    font-size: var(--sort-title2-size-mobile);
    line-height: var(--sort-title2-line-height-mobile);
  }

  h3,
  .title3,
  .font-h3 {
    font-size: var(--sort-title3-size-mobile);
    line-height: var(--sort-title3-line-height-mobile);
  }

  h4,
  .title4,
  .font-h4 {
    font-size: var(--sort-title4-size-mobile);
    line-height: var(--sort-title4-line-height-mobile);
  }

  .body1,
  .font-text-1 {
    font-size: var(--sort-body1-size-mobile);
    line-height: var(--sort-body1-line-height-mobile);
  }

  .body2,
  .font-text-2 {
    font-size: var(--sort-body2-size-mobile);
    line-height: var(--sort-body2-line-height-mobile);
  }

  .body3,
  .font-text-3 {
    font-size: var(--sort-body3-size-mobile);
    line-height: var(--sort-body3-line-height-mobile);
  }

  .body4,
  .font-text-4 {
    font-size: var(--sort-body4-size-mobile);
    line-height: var(--sort-body4-line-height-mobile);
  }

  .body5,
  .font-text-5 {
    font-size: var(--sort-body5-size-mobile);
    line-height: var(--sort-body5-line-height-mobile);
  }

  .mobile-text-left{
      text-align: left;
  }
  .mobile-text-center{
      text-align: center;
  }
  .mobile-text-right{
      text-align: right;
  }
}

@media(min-width:960px){
    .pc-hidden{
        display: none !important;
    }
}

@media(max-width:959px){
    .mobile-hidden{
        display: none !important;
    }
}