@charset "Shift_JIS";

/* ================================================================
    長崎キャンペーン LP Base
================================================================ */
.nagasaki-lp {
  width: 100%;
  overflow: hidden;
  /* 透過PNG対策: SP用のベース背景パターン */
  background: #e5f3f8 url("../images/bgo.png") repeat top center;
}

.nagasaki-lp .scene {
  width: 100%;
  overflow: hidden;
  background-color: #fff; /* PC版のベース背景色 */
}

/* ================================================================
    画像コンテナ (con1 〜 con5)
    ※ 各conが親要素（position: relative）となり、内包するbtを絶対配置します。
================================================================ */
.nagasaki-lp .con-block {
  position: relative;
  width: 1920px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
  margin: 0;
  padding: 0;
}

.nagasaki-lp .con-block h1 {
  margin: 0;
  padding: 0;
}

.nagasaki-lp .con-block .bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
    ボタンの共通設定
================================================================ */
.nagasaki-lp .link {
  position: absolute;
  display: block;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.nagasaki-lp .link:hover {
  opacity: 0.7;
}

.nagasaki-lp .link img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
    PC版 ボタン配置設定 (1920px幅ベースの「px」指定)
    ※ 画像上の正確な位置を px で指定するため、絶対にズレません。
    ※ 位置が微妙に違う場合は top / left の px 数値を微調整してください。
================================================================ */
/* con3: bt1 */
.nagasaki-lp .bt1 {
  width: 660px;  /* ボタンの幅 */
  top: 1320px;   /* con3の上部からのピクセル数 */
  left: 630px;   /* con3の左側からのピクセル数 */
}

.nagasaki-lp .bt1-1 {
  width: 610px;  /* ボタンの幅 */
  top: 1430px;   /* con3の上部からのピクセル数 */
  left: 657px;   /* con3の左側からのピクセル数 */
}

/* con4: bt2 */
.nagasaki-lp .bt2 {
  width: 500px;
  top: 550px;
  left: 513px;
}

/* con5: bt3, bt4 */
.nagasaki-lp .bt3 {
  width: 690px;
  top: 270px;
  left: 610px;
}

.nagasaki-lp .bt4 {
  width: 560px;
  bottom: 121px;
  left: 680px;
}


/* ================================================================
    SP版 (ブレイクポイント: 920px)
================================================================ */
@media (max-width: 920px) {

  .nagasaki-lp .scene {
    background-color: transparent; /* 背景透過で bgo.png を表示 */
  }

  /* 1920px固定を解除し、画面幅(100vw)に合わせる */
  .nagasaki-lp .con-block {
    width: 100vw;
    left: 0;
    transform: none;
  }

  /*
    SP版 ボタン配置設定 (vwベース)
    ※ スマホ画面幅に対するvwで指定するため、スマホでも絶対にズレません。
  */
  .nagasaki-lp .bt1 {
    width: 76vw;
    top: 138vw;
    left: 12vw;
  }

  .nagasaki-lp .bt1-1 {
    width: 66vw;
    top: 150vw;
    left: 16vw;
  }

  .nagasaki-lp .bt2 {
    width: 55vw;
    top: 60vw;
    left: 1.5vw;
  }

  .nagasaki-lp .bt3 {
    width: 76vw;
    top: 26vw;
    left: 12vw;
  }

  .nagasaki-lp .bt4 {
    width: 61vw;
    bottom: 13vw;
    left: 20vw;
  }
}