html {
  scroll-behavior: smooth;
  box-sizing: border-box; /* HTML要素にborder-boxを設定 */
 
}

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

body {
  font-family: 'Noto Sans JP';
  margin: 0;
  padding: 0;
  background-image: 
    url('../img/catch.png'),
    url('../img/bg_illustration.png'),
    url('../img/bg_illustration.gif');
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  background-position: 
    2rem 4rem,
    center top,
    center top;
  background-size: 
    5rem auto,
    cover,
    70rem auto;
  background-attachment:
    fixed,
    fixed,
    fixed;
  z-index: -10;
}

/* スマホ */
@media (max-width: 450px){
    body {
    background-image: url('../img/bg_illustration.gif');
    background-repeat: no-repeat;
    background-position: center 3.2rem;
    background-size: 110% auto; 
    background-attachment: scroll;
  }
}

.noto-sans-jp {
  font-family: "Noto Sans JP";
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
}

.roboto-condensed {
  font-family: "Roboto Condensed";
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

.josefin-sans-en-title {
  font-family: "Josefin Sans";
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.syne {
  font-family: "Syne";
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

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

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 764px) {
  .hero-content-wrapper {
    padding-right: 0; 
  }
}