/* === 全体の基本レイアウト（PC横並び） === */
body {
  display: grid;
  grid-template-areas:
    "title  title  title"
    "nav    main   side"
    "ad     main   side"
    "footer footer footer";
  grid-template-columns: 80px 1fr 300px;
  grid-template-rows: 70px auto 1fr 80px;
  gap: 5px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: sans-serif;
  background: #fefefe;

  /* 👇 追加：画面高に合わせて伸ばす */
  min-height: 100vh;
}


    header {
      grid-area: title;
      background: #ccf;
      padding: 10px;
      font-size: 1.8em;
      text-align: center;
      border-radius: 20px 20px 0 0;
    }

    nav {
      grid-area: nav;
      background: #aaa;
      padding: 10px;
    }

    main {
      grid-area: main;
      background: #ffffcc;
      padding: 10px;
    }

    #side {
      grid-area: side;
      background: #ccffff;
      padding: 10px;
    }

    #ad {
      grid-area: ad;
      background: #ccffff;
      height: auto;         /* ← 高さを内容に合わせる */
      min-height: 100%;     /* ← mainエリアに揃える試み */
      text-align: center;
      padding: 10px;
    }

    footer {
      grid-area: footer;
      background: #aaa;
      padding: 10px;
      text-align: center;
      font-size: 1.2em;
      border-radius: 0 0 10px 10px;
    }

    /* === スマホ表示（768px以下） === */
    @media screen and (max-width: 768px) {
      body {
        grid-template-areas:
          "title"
          "nav"
          "main"
          "side"
          "ad"
          "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }

      nav, main, #side, #ad, footer {
        width: 100%;
      }

      #side, #ad {
        height: auto;
      }

      header, nav, main, #side, #ad, footer {
        font-size: 0.95em;
      }
    }