* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ページ内リンクのスクロールをスムーズにする */
html {
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  background-color: #fff7ca;
  display: flex;
  justify-content: center;
}

/* ========== Block: lp ========== */
.lp {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

/* ========== Element: lp__section ========== */
.lp__section {
  position: relative;
  width: 100%;
}

.lp__section-img {
  width: 100%;
  display: block;
}

/* ========== Element: lp__btn（共通スタイル） ========== */
.lp__btn {
  position: absolute;
  display: block;
  text-decoration: none;

  filter:
    drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.12))
    drop-shadow(0.5px 2px 2px rgba(0, 0, 0, 0.10))
    drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.08))
    drop-shadow(1.5px 4px 6px rgba(0, 0, 0, 0.06));

  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp__btn-img {
  width: 100%;
  display: block;
}

.lp__btn:hover {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  transform: translate(2px, 4px);
}

.lp__btn:active {
  transform: translate(3px, 5px);
}

/* ========== 目次 ========== */

.lp__toc {
  position: fixed;
  top: 50%;
  right: 40px; 
  transform: translateY(-50%);
  overflow: visible;
  z-index: 100;
  width: 16%;
  max-width: 175px;
}

.lp__toc-btn-img {
  width: 100%;
  display: block;
}

.lp__toc-list {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0; 
}

.lp__toc-item {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-end;
}


@media (max-width: 900px) {
  .lp__toc {
    right: 10px;
  }

  .lp__toc-item {
    margin-bottom: 20px;
  }
}

/* PC限定 */
@media (max-width: 767px) {
  .lp__toc {
    display: none;
  }
}

.lp__btn--nav {
  position: static;
  display: inline-flex;
}

.lp__btn--login-nav {
  width: 100%;
}

.lp__btn--login-nav:hover {
  transform: translate(2px, 4px);
}

.lp__btn--login-nav:active {
  transform: translate(3px, 5px);
}


/* ========== Modifier: fvセクションのボタン位置指定 ========== */

.lp__btn--fv-left {
  top: 82%;
  left: 7%;
  width: 39%;
}

.lp__btn--fv-right {
  top: 82%;
  left: 54%;
  width: 39%;
}

/* ========== Modifier: セクション1のボタン位置指定（すべて中央揃え） ========== */

/* ボタン1：クーポンコードコピー（button要素の見た目を完全リセット） */
.lp__btn--section1-1 {
  top: 40.5%;
  left: 50%;
  width: 75%;
  transform: translateX(-50%);

  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}

.lp__btn--section1-1:hover {
  transform: translate(calc(-50% + 2px), 4px);
}

.lp__btn--section1-1:active {
  transform: translate(calc(-50% + 3px), 5px);
}

/* ボタン2：コラムページへ */
.lp__btn--section1-2 {
  top: 56.8%;
  left: 52%;
  width: 91%;
  transform: translateX(-50%);
}

.lp__btn--section1-2:hover {
  transform: translate(calc(-50% + 2px), 4px);
}

.lp__btn--section1-2:active {
  transform: translate(calc(-50% + 3px), 5px);
}

/* ========== コピー完了メッセージ ========== */
.lp__copy-message {
  position: absolute;
  display: none;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}

.lp__copy-message--section1-1 {
  top: 36.5%;
  left: 50%;
  transform: translateX(-50%);
}

/* ========== Modifier: ログインボタン（見た目・機能は共通管理） ========== */

.lp__btn--login-pos1 {
  top: 92%;
  left: 51%;
  width: 61%;
  transform: translateX(-50%);
}

.lp__btn--login-pos1:hover {
  transform: translate(calc(-50% + 2px), 4px);
}

/* ========== セクション2：全会員対象 特典案内 ========== */

.lp__btn--login-pos2 {
  top: 96.9%;
  left: 51%;
  width: 61%;
  transform: translateX(-50%);
}

.lp__btn--login-pos2:hover {
  transform: translate(calc(-50% + 2px), 4px);
}

.lp__btn--login-pos2:active {
  transform: translate(calc(-50% + 3px), 5px);
}

/* ========== セクション3：新規登録の手順説明 ========== */

.lp__btn--login-pos3 {
  top: 93.5%;
  left: 51%;
  width: 61%;
  transform: translateX(-50%);
}

.lp__btn--login-pos3:hover {
  transform: translate(calc(-50% + 2px), 4px);
}

.lp__btn--login-pos3:active {
  transform: translate(calc(-50% + 3px), 5px);
}