/* --- スマホ用：デフォルトは上画像・下文章 --- */
    .vr-media-row {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 40px;
      text-align: left; /* 左詰めに固定 */
    }
    .vr-media-img {
      width: 100%;
    }
    .vr-media-img img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
    .vr-media-body {
      width: 100%;
    }
    .vr-media-title {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333; /* サイトに合わせて色を設定してください */
    }
    .vr-media-desc {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #555;
    }


    /* --- 3カラム用：スマホでは縦1列 --- */
    .vr-column-container {
      display: flex;
      flex-direction: column;
      gap: 30px; /* スマホ時の上下の隙間 */
      margin-bottom: 50px;
      text-align: left;
    }
    .vr-column-item {
      width: 100%;
      background: #fff; /* 必要に応じて背景色を設定 */
    }
    .vr-column-img img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; /* 先ほど同様、16:9に揃えると綺麗です */
      object-fit: cover;
      display: block;
      margin-bottom: 15px;
    }
    .vr-column-title {
      font-size: 1.15rem;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }
    .vr-column-desc {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #555;
    }

    /* スマホ用 */
    .vr-feature-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      width: 100%;
    }

    .vr-feature-img img {
      width: 100%;
      height: auto;
      display: block;
    }


    /* --- PC用：画面幅 768px 以上で左画像・右文章の横並び --- */
    @media (min-width: 768px) {
      .vr-media-row {
        flex-direction: row;
        align-items: center; /* 上下中央揃え（上揃えにしたい場合は flex-start ） */
        gap: 40px; /* 画像とテキストの間の余白 */
      }
      .vr-media-img {
        width: 45%; /* 画像の横幅（お好みで調整してください） */
      }
      .vr-media-body {
        width: 55%; /* テキストの横幅 */
      }
      .vr-media-title {
        font-size: 1.4rem;
      }

      .vr-column-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px; /* PC時のカラム間の隙間 */
      }
      .vr-column-item {
        width: 31%; /* 3列が綺麗に収まる横幅（左右の余白を考慮） */
      }

      /* PC用 */
      .vr-feature-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
      }
    }