@import url("./basic.css");

.hero-title__classic {
  letter-spacing: 0.48em;
  padding-left: 0.18em;
}

.classic-hero-main {
  padding-bottom: 64px;
}

.classic-hero-main .universal-hero-intoro {
  padding-left: 0;
  padding-top: 50px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  row-gap: 5px;
}

.fitit3-universal-hero-title {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding-left: var(--hero-left-pad);
  font-size: 40.5px;
  font-weight: 400;
  line-height: 1;
  color: #434853;
  display: flex;
  align-items: baseline;
  gap: 0.24em;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .fitit3-universal-hero-title {
    font-size: clamp(24px, calc(2.23vw + 16.86px), 34px);
    margin-top: -10px;
  }
}

.classic-hero-main .universal-hero-intoro > img {
  grid-area: auto;
  grid-row: 2;
  width: min(86%, 1100px);
  justify-self: start;
  margin-top: 0;
  z-index: 1;
}

.classic-hero__Image {
  position: relative;
  width: min(100vw, var(--wrap-max));
  margin-left: calc(50% - (min(100vw, var(--wrap-max)) / 2));
  margin-top: 35px;
  padding-bottom: 25px;
  z-index: 4;
}

.classic-hero__Image-foot {
  display: block;
  height: auto;
  margin: 0;
}

.classic-story__Card {
  left: auto;
  right: 34px;
  top: -275px;
  width: min(56%, 680px);
  max-width: 700px;
}

.classic-story {
  --basic-story-img-width: min(calc(var(--basic-story-section-width) - 154px), 558px);
  --basic-story-bg-top-ratio: 0.34;
  padding-left: 0;
  min-height: 0;
  margin-top: 0;
}

.classic-story > .classic-story__main {
  width: var(--basic-story-img-width);
  max-width: 558px;
  margin: 0 154px 0 auto;
  height: auto;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .classic-hero-main .universal-hero-intoro > img {
    width: min(90%, 980px);
  }

  .classic-story__Card {
    top: -154px;
    width: min(62%, 640px);
  }

  .classic-story {
    --basic-story-img-width: min(calc(var(--basic-story-section-width) - 154px), 558px);
    --basic-story-bg-top-ratio: 0.36;
    min-height: 0;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
  .classic-hero-main .fitit3-universal-hero-title {
    font-size: 40.5px;
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .classic-hero-main .fitit3-universal-hero-title {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .classic-hero-main {
    padding-bottom: 32px;
  }

  .classic-hero-main .fitit3-universal-hero-title {
    margin-left: 0.36em;
  }

  .classic-hero-main .universal-hero-intoro {
    padding-top: 30px;
  }

  .classic-hero-main .universal-hero-intoro > img {
    width: 100%;
  }

  .classic-hero__Image {
    margin-top: 12px;
    padding-bottom: 0;
  }

  .classic-hero__Image-foot {
    width: 100%;
    margin: 0 auto;
  }

  .classic-story__Card {
    position: relative;
    right: auto;
    top: auto;
    width: 90%;
    max-width: none;
    margin: 16px auto 0;
    padding: 34px 4% 32px;
  }

  .classic-story {
    --basic-story-img-width: min(calc(var(--basic-story-section-width) * 0.75), 558px);
    --basic-story-bg-top-ratio: 0.34;
    min-height: 0;
    margin-top: 40px;
  }

  .classic-story > .classic-story__main {
    width: var(--basic-story-img-width);
    margin: 0 auto;
  }

}

@media (max-width: 485px) {
  .classic-hero__Image-foot {
    width: 85%;
  }

  .classic-story__Card {
    width: 90%;
  }

  .classic-story {
    --basic-story-img-width: min(calc(var(--basic-story-section-width) * 0.85), 558px);
  }

}