/* ===================================================
   clamp() でフォントサイズをなめらかに
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 01 clamp() の見出しと本文 ---------- */
.box {
  border: 2px dashed #6b675f;
  padding: 20px;
}
.box h2 {
  font-size: clamp(24px, 4vw + 1rem, 48px);
  margin: 0 0 10px;
}
.box p {
  font-size: clamp(15px, 1vw + 0.8rem, 18px);
  line-height: 1.7;
  margin: 0;
}
.box .hint {
  margin-top: 12px;
  font-size: 12px;
  color: #6b675f;
}