/* CSS Document */

/* takehara */
@media print {
  html {
    font-size: 20pt;
  }
}

body {
  font-family: "YU Gothic UI", "Meiryo", "MS Pゴシック";
  background-color: #ffffff;
  color: #696969;
  margin-top: 10%;
  font-size: 16px; /* ベースフォントサイズ（16px） */
  line-height: 2;
}

/* h1: 最大 32px に調整（レスポンシブ） */
h1 {
  font-size: 32px; /* フォールバック */
  font-size: clamp(1.5rem, calc(1.6rem + 1vw), 2rem); /* 24px～32px 程度で可変 */
  line-height: 1.3;
}

/* h2: 20px を基準に可変 */
h2 {
  font-size: 20px; /* フォールバック */
  font-size: clamp(1.25rem, calc(1.25rem + 0.5vw), 1.5rem); /* 20px～24px */
  line-height: 1.3;
}

/* h3 */
h3 {
  font-size: 12px; /* フォールバック */
  font-size: clamp(0.75rem, calc(0.75rem + 0.4vw), 1.2rem);
  line-height: 1.3;
}

/* p */
p {
  font-size: 12px; /* フォールバック */
  font-size: clamp(0.75rem, calc(0.75rem + 0.4vw), 1.2rem);
  line-height: 1.3;
  font-weight: bold;
}

/* 大画面（>=1200px） */
@media (min-width: 1200px) {
  h1 { font-size: 2rem; } /* 32px */
  h2 { font-size: 1.5rem; }  /* 24px */
  h3 { font-size: 1.2rem; }
  p  { font-size: 1.2rem; }
}

/* 小画面（<=640px） */
@media screen and (max-width: 640px) {
  body { line-height: 2; }
  h1   { font-size: 1.5rem; }  /* 24px */
  h2   { font-size: 1.125rem; } /* 18px */
  h3   { font-size: 1.2rem; }
  p    { font-size: 1.2rem; }
}

.outer {
  position: relative;
}

.inner {
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 3.2rem;
}

.box {
  border: 2px solid #696969;
}