@charset 'utf-8';

:root {
  --light-blue: #70c1ff;
  --blue: #007aff;
  --light-grey: #eee;
  --dark-grey: #6f6f6f;
  --black: #030202;
  --white: #fff;
  --font-chivo: "Chivo", sans-serif;
  --font-noto-sans: "Noto Sans JP", sans-serif;
}

body,
html {
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-noto-sans);
}

.about {
  margin-top: 4rem;
}

.about__section {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow-x: hidden;
}

.about__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__image--filtered {
  filter: brightness(70%);
}

.about__text {
  position: absolute;
  top: 15%;
  right: 4%;
  color: var(--white);
  font-family: var(--font-noto-sans);
  max-width: 80%;

  @media (768px <= width), print {
    top: 15%;
    right: 10%;
    max-width: 90%;
  }
}

.about__heading {
  font-size: max(3rem, 5vw);

  font-weight: bold;
  font-family: var(--font-chivo);
  font-weight: 700;

  @media (768px <= width), print {
    font-size: max(4vw, 4.5rem);
  }
}

.about__description {
  font-size: max(0.88rem, 2.3vw);
  margin-top: 0.75rem;
  line-height: 1.6;
  font-family: var(--font-noto-sans);
  font-weight: 400;

  @media (768px <= width), print {
    font-size: max(1.2rem, 1.5vw);
  }
}