/* ============================================================
   英会話教材ポータル - stylesheet
   完成デザイン画像をそのまま1枚のレスポンシブ画像として表示し、
   その上に透明なクリック領域（CTAボタン3か所）だけを重ねる構造。
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  overflow-x: hidden;
}

.page {
  display: flex;
  justify-content: center;
}

/* 画像とクリック領域をまとめる基準コンテナ。
   このコンテナの幅=画像の実表示幅になるため、
   中の .hotspot は % 指定だけで画像に対して相対配置される。 */
.design-frame {
  position: relative;
  width: 100%;
  max-width: 640px; /* PCで間延びしないための最大幅 */
  line-height: 0;   /* 画像下の余白隙間を防止 */
}

.design-image {
  display: block;
  width: 100%;
  height: auto; /* 縦横比を維持したまま幅に追従 */
}

/* 透明クリック領域（画像内のオレンジCTAボタンと同じ位置に% 指定で重ねる） */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  /* 開発確認用に枠線を見たい場合は下の1行のコメントを外す */
  /* outline: 2px solid red; */
}

#cta-startkit {
  left: 37.109%;
  top: 47.982%;
  width: 33.594%;
  height: 3.841%;
}

#cta-pdf {
  left: 37.109%;
  top: 65.104%;
  width: 33.691%;
  height: 3.906%;
}

#cta-phrase {
  left: 37.109%;
  top: 82.487%;
  width: 33.887%;
  height: 4.102%;
}