@charset "UTF-8";

/* ==========================================================================
   BUDDICA 夏の大感謝祭 LP
   -------------------------------------------------------------------------
   1. reset
   2. base
   3. layout (#container)
   4. section
   5. cta (キラリと光るボタン)
   6. footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
figure,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   2. base
   -------------------------------------------------------------------------- */
html {
  font-size: 62.5%; /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #191311;
  background-color: #fff;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   3. layout
   -------------------------------------------------------------------------- */
#container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow:
    -20px 0 20px -15px rgba(0, 0, 0, 0.3),
    20px 0 20px -15px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   4. section
   各セクション画像は「ご都合に合わせてラクラク予約！」等の吹き出しの下に
   ボタン用の余白を持つ。その余白にCTAを絶対配置する。
   -------------------------------------------------------------------------- */
.sec {
  position: relative;
}

.sec > img {
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. cta
   位置は原寸(750px幅)実測値を % 換算。画像は等比縮小するため画面幅に追従する。
   画像内CTAは全セクション焼き込み済みで、btn-line.webp を使うのは追従CTAのみ
   （btn-line.webp = 669x181 / うちボタン本体は 10,17 - 658,165）
   -------------------------------------------------------------------------- */
.cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 89.2%; /* 669 / 750 */
  /* inline-block のベースライン隙間を消す */
  font-size: 0;
  line-height: 0;
  text-align: center;
}

/* ボタンが画像に焼き込まれているセクション（sec-mv / sec-benefit）
   画像の上に透明リンクを重ねてクリック領域と計測だけを担う。
   高さは aspect-ratio でボタン実寸(650x150)から導出するので画面幅に追従する。 */
.cta-baked {
  width: 86.667%; /* 650 / 750 */
  transform: none;
}

/* 後述の .cta a / .cta a::before に負けないよう詳細度を上げる */
.cta.cta-baked a {
  aspect-ratio: 650 / 150;
  animation: none; /* 画像側のボタンは動かないので拡大アニメは付けない */
}

.cta.cta-baked a::before {
  /* 透明リンク＝ボタン本体そのものなので余白を差し引かない */
  inset: 0;
  border-radius: calc(min(100vw, 750px) * 0.02667); /* 実寸20px相当 */
}

/* sec-mv (750x1308) 焼き込みボタン x48 / y1148 / 650x150 */
.cta-mv {
  top: 87.768%;
  left: 6.4%; /* 48 / 750 */
}

/* sec-benefit (750x5136) 焼き込みボタン x46 / y4936 / 650x150 */
.cta-benefit {
  top: 96.106%;
  left: 6.133%; /* 46 / 750 */
}

/* sec-lineup (750x6814) 焼き込みLINEボタン x50 / y6294 / 650x150 */
.cta-lineup-line {
  top: 92.369%;
  left: 6.667%; /* 50 / 750 */
}

/* sec-lineup (750x6814) 焼き込み店舗一覧ボタン x54 / y6598 / 642x143
   このボタンだけ実寸が一回り小さいので幅と比率を個別に指定する */
.cta-lineup-store {
  top: 96.83%;
  left: 7.2%; /* 54 / 750 */
  width: 85.6%; /* 642 / 750 */
}

.cta.cta-baked.cta-lineup-store a {
  aspect-ratio: 642 / 143;
}

.cta a {
  display: inline-block;
  position: relative;
  width: 100%;
  animation: cta-float 1.8s ease-in-out infinite;
  transform-origin: center center;
}

.cta a img {
  width: 100%;
}

/* キラーンと流れる光
   ボタン画像の透明余白（左右10px / 上17px / 下15px）を除いた
   ピル本体の上にだけ光を走らせる */
.cta a::before {
  content: "";
  position: absolute;
  top: 9.392%; /* 17 / 181 */
  right: 1.495%; /* 10 / 669 */
  bottom: 8.287%; /* 15 / 181 */
  left: 1.495%;
  border-radius: 999px;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: cta-shine 2.5s infinite;
  pointer-events: none;
  z-index: 1;
}

/* 光の動き（端から端まで） */
@keyframes cta-shine {
  0% {
    background-position: 150% 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    background-position: -50% 0;
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    background-position: -50% 0;
    opacity: 0;
  }
}

/* ふわっとサイズが変わるアニメーション */
@keyframes cta-float {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* アニメーションを控えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .cta a,
  .cta a::before {
    animation: none;
  }
}

/* 画面下追従CTA（スクロール連動 / 下地なし）
   FV(最上部)では非表示。スクロールし始めると JS が .is-visible を付与し、
   ふわっとフェードインして以降は画面下の同じ位置で追従する。 */
.cta-fixed {
  position: fixed;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 750px; /* #container と揃える */
  z-index: 100;
  /* 初期は非表示（少し下げて透明に） */
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.cta-fixed a {
  width: 89.2%; /* 669 / 750 */
}

.cta-fixed.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cta-fixed {
    transform: translate(-50%, 0);
    transition: opacity 0.3s ease;
  }
}

/* --------------------------------------------------------------------------
   6. footer
   -------------------------------------------------------------------------- */
#site-footer {
  background-color: #fff;
  /* 追従CTA(高さ≒幅の約24%)にfooterが隠れないよう余白を確保
     ％はfooter幅(=#container幅)基準で解決されるため画面幅に追従する */
  padding-bottom: 22%;
}

.footer-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.45rem;
  padding-block: 1.6rem;
  background-color: #f2f2f3;
}

.footer-link a,
.footer-link__sep {
  color: #7d7f88;
  font-size: 1.2rem;
}

.copyright {
  background-color: #191311;
  color: #fff;
  text-align: center;
  padding: 1.2rem 0.8rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .footer-link a,
  .footer-link__sep {
    font-size: 1.4rem;
  }
  .copyright {
    font-size: 1.3rem;
  }
}