@charset "UTF-8";

/* ==========================================================
   リセット
========================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 0;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

a {
  text-decoration: none;
}

/* ==========================================================
   ベース
========================================================== */
body {
  background-color: #f2dede;; /* PC表示時にLPの外側に見える背景色 */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* ==========================================================
   LP本体（SPファースト：最大幅500pxを中央寄せ）
========================================================== */
.lp {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
}

/* PC表示：背景色を変え、中央のLPカラムに影をつけて浮き上がらせる */
@media (min-width: 501px) {

  .lp {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
}

/* 各セクション（画像同士の隙間をなくして1枚のLPとして見せる） */
.lp__img-wrap {
  width: 100%;
}

/* ==========================================================
   画像重ね合わせセクション（FV：section01系／オーナーメッセージ：section12系 共通）
   背面画像を通常配置で置き、前面画像とCTAボタンをabsoluteで重ねる
========================================================== */
.fv,
.owner {
  position: relative; /* 前面画像（absolute）の位置基準にする */
}

/* FVセクションが追従CTA（z-index:10）より前面になるようにし、
   スクロールでFVと重なっている間だけ追従CTAを隠す（FV通過後は重なりがなくなり自然に表示される） */
.fv {
  z-index: 20;
}

/* 前面画像（背面画像の上端に揃えて重ねる） */
.fv__main,
.owner__main {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* 前面画像下の領域に、下端基準でボタンを配置 */
.fv__btn,
.owner__btn {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ボタン下の余白（デザイン幅750px基準）。
   デザイン指定値から、画像下端の書き出し余白 約29px を差し引いて指定 */
.fv__btn {
  padding-bottom: calc(51 / 750 * 100%); /* デザイン指定 80px - 29px */
}

.owner__btn {
  padding-bottom: calc(42 / 750 * 100%); /* デザイン指定 71px - 29px */
}

/* ボタン画像の表示幅（デザイン幅750px基準） */
.fv__btn-link,
.owner__btn-link,
.bottom-cta__link {
  display: block;
  width: calc(695 / 750 * 100%);
  transition: opacity 0.3s;
  animation: pulse 2.4s ease-in-out infinite; /* ゆっくり拡大縮小するアニメーション */
}

.fv__btn-link:hover,
.owner__btn-link:hover,
.bottom-cta__link:hover {
  opacity: 0.8;
}

/* リンクボタンにアニメーション */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ==========================================================
   フッター（.lpの外側にあるため、同じ幅制限を指定）
========================================================== */
.footer {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 16px;
  background-color: #fff; /* フッター下端の余白（追従CTA用スペース）もピンクにならないよう白にする */
  /* 追従CTAボタンでフッターが隠れないよう余白を確保
     （ボタンの高さは画面幅に比例するため vw で指定し、LP最大幅500px時の高さで頭打ちにする） */
  padding-bottom: min(28vw, 128px);
}

/* ==========================================================
   section15下のCTAボタン
========================================================== */
.bottom-cta {
  display: flex;
  justify-content: center;
  /* section15との間84px（画像上端の書き出し余白 約15px を差し引き） */
  padding-top: calc(69 / 750 * 100%);
  /* フッターとの間164px（画像下端の書き出し余白 約29px を差し引き） */
  padding-bottom: calc(135 / 750 * 100%);
}

/* ==========================================================
   追従CTAボタン（画面下部に固定表示・動きなし）
========================================================== */
.fixed-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  max-width: 500px; /* LP本体と同じ幅に揃える */
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8); /* 背後の本文がうっすら透ける半透明の白帯 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 本文との境界をわかりやすくする影 */
}

.fixed-cta__link {
  display: block;
  width: calc(695 / 750 * 100%); /* 既存ボタンと同じ表示幅 */
  transition: opacity 0.3s;
}

.fixed-cta__link:hover {
  opacity: 0.8;
}