.button1 {
  -webkit-appearance none;
  -webkit-text-size-adjust: 160%;
  width: 100px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 10px;
  cursor: pointer;
}

.button2 {
  -webkit-appearance: none;
  -webkit-text-size-adjust: 160%;
  width: 150px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 10px;
  cursor: pointer;
}

model-viewer {
  width: 100%;
  height: 350px;
}

#custom-ar-button {
  font-size: 1.5em; 
  position: absolute;
  bottom: 24px;
  left: 24px;
}

ul.notes li {
  font-size: 1em;
  line-height: 1.1

}



/* デフォルトのスタイル（小〜中画面向け） */
body {
  font-size: 16px; /* body要素のデフォルトフォントサイズ */
}

  h1 {
    font-size: 1.5em; 
    line-height: 1.0

  }

  h2 {
    font-size: 1.2em;
    line-height: 0.8
  }

  #custom-ar-button {
    font-size: 1.8em; 
  }

  ul.notes li {
    font-size: 0.8em;
  }

/* 中〜大画面向け（画面幅768px以上） */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px; 
  }

  h1 {
    font-size: 2.5em; 
    line-height: 1.0

  }

  h2 {
    font-size: 1.8em;
    line-height: 0.8
  }

  #custom-ar-button {
    font-size: 1.5em; 
  }

model-viewer {
  width: 100%;
  height: 500px;
}

ul.notes li {
  font-size: 0.8em;
  line-height: 1.2
  }

}

/* 大画面向け（画面幅1024px以上） */
@media screen and (min-width: 1024px) {
  body {
    font-size: 20px; 
  }

  h1 {
    font-size: 1.5em; 
    line-height: 0.8em

  }

  h2 {
    font-size: 1.5em;
    line-height: 0.5
  }

  #custom-ar-button {
    font-size: 1.5em; 
  }

model-viewer {
  width: 100%;
  height: 600px;
}

ul.notes li {
  font-size: 0.8em;
  line-height: 1.2
  }

}