/* ===== base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;

  /* 背景：全面リピート＆固定 */
  background-color: #10a7a6;
  background-image: url("img/bg_repeat.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: top center;

  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

/* screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== layout ===== */
.lp {
  min-height: 100%;
  display: flex;
  justify-content: center;
}

.lp__inner {
  width: 100%;
  max-width: 1000px;
}

/* images */
.lp__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:50px;
}

.mzero {
  display: block;
  width: 100%;
  height: auto;
margin-top:0;
}

/* ===== sections ===== */
.section {
  width: 100%;
  position: relative;
  margin-top: 150px;     /* PC：各セクション上 100px */
}

/* いまは全セクション共通なので実質同値（将来ヒーローだけ変えたい時のフック） */
.section--hero {
  margin-top: 100px;
}

/* ===== section title images ===== */
/* 元画像基準で縮小 + タイトルと本文のアキを統一 */
.lp__tt {
  display: block;
  width: auto;
  max-width: 100%;
  transform: scale(0.5);          /* PC：元画像の50% */
  transform-origin: top center;
  margin: 0 auto;            /* PC：ttと本文の間隔（統一） */
}

/* ===== ranking ===== */
.rank {
  display: flex;
  gap: 18px;
  padding: 0 18px 0;              /* 上paddingを撤去（tt下アキを統一するため） */
}

.rank__img {
  display: block;
  width: 50%;
  height: auto;
}

/* ===== footer ===== */
.copyright {
  margin-top: 150px;          /* 上のセクションとの間隔（必要なければ削除OK） */
  background: #000;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 32px 12px;
  color: #fff;
}


/* ===== responsive ===== */
@media (max-width: 1020px) {
  .lp__inner {
    margin: 0 10px;
  }
}

@media (max-width: 768px) {

  .section {
    margin-top: 50px;              /* SP：各セクション上 50px */
  }

  .lp__tt {
    transform: scale(0.7);         /* スマホ：元画像の70% */
    margin: 0 auto;           /* SP：ttと本文の間隔（統一） */
  }

/* images */
.lp__img {
  margin-top:30px;
}

  .rank {
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 0;             /* SPは左右だけ少し詰め */
  }

  .rank__img {
    width: 100%;
  }
}