@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: #e5e5e5; /* 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);
  }
}

/* ==========================================================
   セクション内のCTAボタン
   画像の下に通常配置し、カンプと同じ余白を背景で補う
========================================================== */
/* 各セクションの背景と、ボタン下端からセクション下端までの余白
   （数値はすべてデザイン原本750px基準の実測値） */
/* section01.webp */
.fv {
  padding-bottom: calc(70 / 750 * 100%);
  background-color: #212e40;
}

/* section06.webp */
.menu {
  padding-bottom: calc(61 / 750 * 100%);
  background-color: #e0e0e0;
}

/* section07.webp */
.result {
  padding-bottom: calc(61 / 750 * 100%);
  background-color: #f1f1f1;
}

/* section10.webp */
.price {
  padding-bottom: calc(63 / 750 * 100%);
  background-image: url("img/section10_bg.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ボタンの表示幅（デザイン幅750px基準） */
.lp__cta,
.fixed-cta__link {
  width: calc(652 / 750 * 100%);
}

.lp__cta {
  margin: 0 auto;
}

/* リンクは光のアニメーションを重ねる位置の基準にする */
.lp__cta-link,
.fixed-cta__link {
  display: block;
  position: relative;
  overflow: hidden;
  transition: filter 0.3s;
}

/* 読み込み前に高さを確保して、表示のガタつきを防ぐ */
.lp__cta-link img,
.fixed-cta__link img {
  aspect-ratio: 652 / 205;
}

/* ホバー：背景色に左右されず、どのボタンもうっすら白くなるようにする
   （opacityだと背景と混ざるため、紺色のFVだけ暗く見えてしまう） */
.lp__cta-link:hover,
.fixed-cta__link:hover {
  filter: brightness(1.15);
}

/* 画像下端からボタン上端までの余白（デザイン幅750px基準） */
/* section01.webp */
.fv .lp__cta {
  margin-top: calc(25 / 750 * 100%);
}

/* section06.webp */
.menu .lp__cta {
  margin-top: calc(47 / 750 * 100%);
}

/* section07.webp */
.result .lp__cta {
  margin-top: calc(30 / 750 * 100%);
}

/* section10.webp */
.price .lp__cta {
  margin-top: calc(15 / 750 * 100%);
}

/* ==========================================================
   section12：Googleマップ
========================================================== */
.info__map {
  width: 100%;
  aspect-ratio: 750 / 500; /* 原本のマップ枠と同じ高さ（1466 - 見出し143 - 住所823） */
  background-color: #e5e5e5;
}

.info__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================
   section13：追従CTAの停止位置
========================================================== */
.message {
  position: relative; /* 停止位置（absolute）の位置基準にする */
}

/* 画像下端から33px上がった位置に、高さ261pxの停止エリアを置く（デザイン幅750px基準） */
.lp__cta-stop {
  position: absolute;
  right: 0;
  bottom: calc(33 / 2719 * 100%);
  left: 0;
  aspect-ratio: 750 / 261;
}

/* ==========================================================
   追従CTAボタン（FV通過後に画面下部へ固定）
========================================================== */
/* position:fixedの要素はパーセントの基準が画面幅になるため、
   上下の余白はpaddingではなく子要素のmarginで作る（flexでmarginの相殺も防ぐ） */
.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: #fff;
}

/* FVのボタンを通過するまでは隠す。display:noneだとアニメーションが止まり、
   表示された瞬間に0秒からやり直しになってセクション内のボタンとずれるため visibility で隠す */
.fixed-cta--hidden {
  visibility: hidden;
}

/* ボタン上下の白帯の余白（デザイン幅750px基準） */
.fixed-cta__link {
  margin: calc(28 / 750 * 100%) 0;
}

/* ==========================================================
   CTAのアニメーション（短く右へ動いて戻り、斜めの光が横切る）
========================================================== */
.lp__cta-link,
.fixed-cta__link {
  animation: cta-nudge 1.9s ease infinite;
}

/* 通常配置を保ったまま、光だけを赤いボタンの範囲に重ねる */
.lp__cta-link::after,
.fixed-cta__link::after {
  content: "";
  position: absolute;
  /* 赤いボタンの範囲にぴったり重ねる（652×205pxの画像内で x1〜650 / y63〜203） */
  inset: calc(63 / 205 * 100%) calc(1 / 652 * 100%) calc(1 / 205 * 100%);
  pointer-events: none;
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: cta-shine 1.8s linear infinite;
}

@keyframes cta-nudge {
  0%,
  85%,
  95%,
  100% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(2.3%);
  }
}

@keyframes cta-shine {
  0% {
    background-position: 150% 0;
    opacity: 0;
  }
  20% {
    background-position: 150% 0;
    opacity: 1;
  }
  70% {
    background-position: -50% 0;
    opacity: 1;
  }
  80%,
  100% {
    background-position: -50% 0;
    opacity: 0;
  }
}

/* ==========================================================
   フッター（.lpの外側にあるため、同じ幅制限を指定）
========================================================== */
.footer {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
}