@charset "utf-8";

    body {
      font-family: "ヒラギノ角ゴ ProN W3", Noto Sans JP,メイリオ, Meiryo, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }

    /* 1行目：ボックス */
    .box {
      background-color:#dcefff;
      font-family: sans-serif;
      font-weight: bold;
      font-size: calc((100vw - 320px) / 140 + 24px);
      padding: 1vw;
      text-align: center;
    }

    /* 2行目：画像 + テキスト */
    .image-text {
     font-size: calc((100vw - 320px) / 140 + 14px);
      text-align: center;
    }
    
    .image-text img {
      width: 100%;
      max-width: 95vw;
      height: auto;
    }

    /* 3行目：タイトル付きのボックス */
    .title-box {
      background-color : #dcefff;
      padding: 0.2vw;
     font-size: calc((100vw - 320px) / 140 + 14px);
      color: black;
      text-align: left;
    }

    .title-box .title {
      background-color: #5fb3f5;
      font-family: sans-serif;
      padding: 0.1vw;
      color: white;
      font-size: calc((100vw - 320px) / 140 + 18px);
      text-align: center;
    }

    /* 4行目：横並びの画像2枚 + テキスト */
    .image-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      text-align: center;
    }

    .image-row-2 img {
      width: 100%;
      height: auto;
    }

     /* 5行目：横並びの画像3枚 + テキスト */
    .image-row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      text-align: center;
    }

    .image-row-3 img {
      width: 100%;
      height: auto;
    }

    /* フッター */
    footer {
      background-color: #dcefff;
      color: black;
      font-size: calc((100vw - 320px) / 140 + 16px);
      text-align: center;
      padding: 20px;
      margin-top: 20px;
    }

/* ベースとなるフォントサイズを調整 */
html {
    font-size: 16px; /* 基本フォントサイズを16pxに設定 */
}

/* h1のフォントサイズ */
h1 {
    font-size: clamp(2rem, 4vw, 3rem); /* 最小2rem, 推奨4vw, 最大3rem */
    line-height: 1.2; /* 行間を調整 */
}

/* h2のフォントサイズ */
h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* 最小1.5rem, 推奨3.5vw, 最大2.5rem */
    line-height: 1.3;
}

/* h3のフォントサイズ */
h3 {
    font-size: clamp(1.25rem, 3vw, 2rem); /* 最小1.25rem, 推奨3vw, 最大2rem */
    line-height: 1.4;
}

/* pのフォントサイズ */
p {
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* 最小1rem, 推奨2.5vw, 最大1.5rem */
    line-height: 1.6;
}


    /* レスポンシブ対応 */
    @media (max-width: 768px) {
      .image-row-2,  .image-row-3 {
        grid-template-columns: 1fr;
      }
}

   @media (max-width: 480px) {
      .image-row-2 {
        grid-template-columns: 1fr;
      }
      .image-row-3 {
        grid-template-columns: 1fr;
      }
}