/* ボックスサイズのリセット */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
}

/* LP全体の最大幅とセンター寄せ、画像同士の余白除去 */
.lp-wrapper {
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.lp-wrapper img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 0;
}

/* 背景セクション共通 */
.bg-section {
  position: relative;
  width: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  margin: 0;
}

/* 背景ごとの画像（750px基準比率） */
.bg-04 {
  background-image: url('../images/temirulp_04.png');
  height: calc(100vw * (240 / 750));
}

.bg-06 {
  background-image: url('../images/temirulp_06.png');
  height: calc(100vw * (188 / 750));
}

.bg-08 {
  background-image: url('../images/temirulp_08.png');
  height: calc(100vw * (250 / 750));
}

/* PC表示時：背景画像も750pxに制限 */
@media screen and (min-width: 751px) {
  .bg-04 {
    background-size: 750px auto;
    height: calc(750px * (240 / 750)); /* ＝ 240px */
  }

  .bg-06 {
    background-size: 750px auto;
    height: calc(750px * (188 / 750)); /* ＝ 188px */
  }

  .bg-08 {
    background-size: 750px auto;
    height: calc(750px * (250 / 750)); /* ＝ 250px */
  }
}

/* ボタンリンク配置（中央下） */
.bg-section a {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  display: inline-block;
}

/* ボタン画像サイズ */
.bg-section img {
  width: 70vw;
  max-width: 500px;
  height: auto;
  display: block;
}

/* スマホ：背景は幅100% */
.logo-area {
  background-image: url('../images/temirulp_01.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: calc(100vw * (200 / 750)); /* ←実画像の高さを反映。例: 高さ375pxならこれでOK */
  position: relative;
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* PC表示時：背景サイズを750px固定に */
@media screen and (min-width: 751px) {
  .logo-area {
    background-size: 750px auto;
    height: 200px; /* 750px × 375px の画像ならそのまま高さ375pxに固定 */
    margin: 0 auto;
  }
}


.logo-area a {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.logo-area img {
  width: 140px;
  height: auto;
}

.logo-area a,
.logo-area img {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}