/* ================================
   Reset & Base Styles
   ================================ */

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f7f0f4; /* お好みで */
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                   "Segoe UI", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
                   "Meiryo", sans-serif;
    }

    .teaser {
      position: relative;
      max-width: 768px;
    }

    .teaser img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* 画像上にX/Instagramのクリック範囲だけを載せる */
    .teaser a {
      position: absolute;
      display: block;
      text-indent: -9999px; /* テキストを画面外に追い出す（画像だけ見せる） */
      overflow: hidden;
    }

    /* Xアイコン部分（左側） */
    .teaser .link-x {
      /* 位置と大きさは画像に合わせて微調整してください */
      left: 20%;       /* 横位置（パーセントで指定） */
      bottom: 9%;      /* 下からの位置 */
      width: 28%;      /* クリック範囲の幅 */
      height: 7%;      /* クリック範囲の高さ */
    }

    /* Instagramアイコン部分（右側） */
    .teaser .link-instagram {
      left: 52%;
      bottom: 9%;
      width: 28%;
      height: 7%;
    }