.example {
  position: relative;
}

/* 画像 */
.example img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- aタグ（ボタン等）--- */
.example a {
  position: absolute;
  top: 50%;
  left: 50%;

  /* a専用：ずらし量（デスクトップ基準） */
  --a-offset-x: 0px;     /* 右に+、左に- */
  --a-offset-y: -200px;  /* 下に+、上に- */

  transform: translate(
    calc(-50% + var(--a-offset-x)),
    calc(-50% + var(--a-offset-y))
  );
  -webkit-transform: translate(
    calc(-50% + var(--a-offset-x)),
    calc(-50% + var(--a-offset-y))
  );

  /* 装飾 */
  margin: 0 10px;                 /* ✅ pxを付与 */
  font-size: 20px;
  font-weight: 700;
  border: solid OrangeRed 2px;
  border-radius: 3px;
  padding: 7px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 165, 0, 0.6);

  /* ✅ はみ出し/タップ性改善 */
  max-width: min(90vw, 480px);
  white-space: nowrap;
  touch-action: manipulation;
}

.example a:hover {
  background: rgba(255, 127, 80, 0.3);
}

/* --- pタグ（テキスト等）--- */
.example p {
  position: absolute;
  top: 50%;
  left: 50%;

  /* p専用：ずらし量（デスクトップ基準） */
  --p-offset-x: 0px;
  --p-offset-y: -300px;

  transform: translate(
    calc(-50% + var(--p-offset-x)),
    calc(-50% + var(--p-offset-y))
  );
  -webkit-transform: translate(
    calc(-50% + var(--p-offset-x)),
    calc(-50% + var(--p-offset-y))
  );

  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 700;
  font-size: 23px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;

  /* 文字枠 */
  display: inline-block;
  padding: 12px 16px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  line-height: 1.4;

  /* ✅ はみ出し防止 */
  max-width: min(92vw, 680px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.example p .fa {
  display: block;
  padding-bottom: 10px;
  font-size: 3em;
  color: rgba(255, 255, 255, 0.6);
}

/* ===========================
   ✅ スマホ対応（768px以下）
   =========================== */
@media (max-width: 768px) {
  .example a {
    /* ✅ オフセットを“画面に応じて可変”に */
    --a-offset-y: clamp(-120px, -18vw, -60px);
    --a-offset-x: 0px;

    /* ✅ 文字と余白をスマホ向けに */
    font-size: clamp(14px, 3.8vw, 18px);
    padding: clamp(6px, 1.8vw, 10px);
    border-width: 2px;
    border-radius: 6px;
    white-space: nowrap;
  }

  .example p {
    /* ✅ 上に上げ過ぎないよう可変に */
    --p-offset-y: clamp(-180px, -28vw, -80px);
    --p-offset-x: 0px;

    font-size: clamp(14px, 4.2vw, 18px);
    padding: clamp(8px, 2.6vw, 14px) clamp(10px, 3vw, 16px);
    border-width: 2px;
    border-radius: 8px;
    line-height: 1.35;
  }

  .example p .fa {
    font-size: clamp(1.8em, 7vw, 2.6em);
    padding-bottom: clamp(6px, 2vw, 10px);
  }
}

/* ===========================
   ✅ SP時：申込ボタンを画面下固定
   =========================== */
@media (max-width: 768px) {

  /* 申込ボタン（.example内のa）を下固定にする */
  .example a {
    position: fixed;          /* ✅ 画面に固定 */
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); /* iPhoneノッチ対策 */
    top: auto;                /* ✅ absolute時のtopを無効化 */
    z-index: 9999;            /* ✅ 画像などより前面に */

    /* 中央寄せ：transformはX方向だけに */
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    /* ✅ SP用に見た目/タップ性を最適化 */
    width: min(92vw, 420px);  /* 画面幅に収める */
    text-align: center;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;

    /* 影を付けて視認性UP（任意） */
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }

  /* ✅ 画像内の中央寄せオフセットはSPでは不要なので無効化 */
  .example a {
    --a-offset-x: 0px;
    --a-offset-y: 0px;
  }

  /* ✅ ボタンが下に固定される分、ページ末尾のコンテンツが隠れないよう余白を確保 */
  body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  }
}

/* さらに小さい端末向け（任意） */
@media (max-width: 480px) {
  .example a {
    width: 94vw;
    font-size: 15px;
    padding: 13px 14px;
  }
}