@charset "UTF-8";
/* =========================================================
   株式会社Levela 採用LP（画像コーディング版）
   - 構成/幅         : 参考 levela.co.jp/snsclub/lp/17（max-width 750px・縦積み）
   - CTA横揺れ        : 参考 levela.co.jp/snsclub/lp/01 の .buruburu を踏襲
   ========================================================= */

body {
  background: #ffffff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo,
    system-ui, sans-serif;
}

/* -----------------------------------------------------------
   LP本体：スマホ幅を基準に中央寄せ（PCでは左右に余白）
----------------------------------------------------------- */
main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow-x: hidden; /* CTA横揺れが左右にはみ出してもスクロールバーを出さない */
}

/* 画像は隙間なく縦積み */
main p {
  line-height: 0;
}

main img {
  width: 100%;
  display: block;
}

/* -----------------------------------------------------------
   CTAボタン
----------------------------------------------------------- */
.cta-btn {
  background: #ffffff;
}

.cta-btn a {
  display: block;
}

.cta-btn img {
  width: 100%;
}

/* 横揺れアニメーション（参考LP01 .buruburu を踏襲） */
.buruburu {
  animation: buruburu 1.5s linear infinite;
  will-change: transform;
}

@keyframes buruburu {
  0% {
    transform: translateX(0);
  }
  7% {
    transform: translateX(-10px);
  }
  14% {
    transform: translateX(10px);
  }
  20% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(10px);
  }
  40% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/* アニメーションを控える設定の環境では停止 */
@media (prefers-reduced-motion: reduce) {
  .buruburu {
    animation: none;
  }
}

/* -----------------------------------------------------------
   クロージング（image8）下部にCTA（image9）を重ねて、
   image8 と image10 の背景を途切れさせずにつなげる（参考LP01方式）
   ※image9 はボタン周りが透明PNGのため、重ねると背景が透ける
----------------------------------------------------------- */
.closing {
  position: relative;
}

.cta-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%; /* image8下部の余白にボタンを配置。位置はここで微調整 */
  z-index: 2;
  background: transparent; /* image8を透かすため白背景を打ち消す（.cta-btnのbackgroundを上書き） */
}

/* -----------------------------------------------------------
   フッター（参考LP17踏襲：テキストリンクを " / " 区切りで中央寄せ）
----------------------------------------------------------- */
.site-footer {
  padding: 28px 16px 40px;
  background: #ffffff;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  line-height: 1.6;
}

.footer-links a {
  color: #333333;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-links a:hover {
  color: #ed1c24;
}

.footer-links .sep {
  color: #bbbbbb;
  font-size: 12px;
}