@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

/* ============================================
   destyle.css v4.0.0 | MIT License (抜粋)
   ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { margin: 0; }
main { display: block; }

p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

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

b, strong { font-weight: bolder; }
small { font-size: 80%; }
svg, img, embed, object, iframe { vertical-align: bottom; }


/* ============================================
   Base
   ============================================ */
html {
  scroll-behavior: smooth;
  word-break: break-all;
  font-size: 10px;
}
@media (max-width: 767px) {
  html { font-size: 2.6666666667vw; }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4d4d4d;
  background: #fff;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

a { transition: opacity 0.3s ease; }
a:hover { opacity: 0.85; }

#container {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow:
    -20px 0 20px -15px rgba(0, 0, 0, 0.3),
    20px 0 20px -15px rgba(0, 0, 0, 0.3);
}


/* ============================================
   セクション（画像 1枚 + CTA グループ）
   ============================================ */
.sec {
  position: relative;
  display: block;
}

.sec img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================
   CTA グループ
   3つのボタン (電話・LINE・WEB) を縦並びで均一間隔配置。
   .cta-btn + .cta-btn の margin-top で親幅基準のギャップ
   を確保（flex gap% は parent height 基準で auto だと
   無効なため、margin で代用）。
   ============================================ */
.cta-group {
  position: absolute;
  left: 3%;
  width: 94%;
  z-index: 2;
}

.cta-btn {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  animation: cta-pulse 1.8s ease-in-out infinite;
  transform-origin: center center;
}

/* 2個目以降のボタンに上マージン（親 .cta-group の幅基準で
   レスポンシブにスケール）。値はデザイン上の見た目に合わせて狭め。 */
.cta-btn + .cta-btn {
  margin-top: 0.25%;
}

.cta-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* キラッと光るシャイン */
.cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: cta-shine 2.5s infinite;
  pointer-events: none;
  border-radius: inherit;
}

.cta-btn:hover,
.cta-btn:active {
  opacity: 1;
  filter: brightness(1.05);
}

@keyframes cta-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes cta-shine {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 120%; opacity: 1; }
  60%  { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* ============================================
   各セクション CTA グループの top%
   電話ボタン上端の位置を基準（ピクセル実測値）。
   ボタン間隔は .cta-group の gap で自動均一化。
   ============================================ */
/* sec-01 (1000 x 6128) — FV内CTA */
.cta-group-01 { top: 22.20%; }
/* sec-02 (1000 x 5879) */
.cta-group-02 { top: 88.22%; }
/* sec-04 (1000 x 4129) */
.cta-group-04 { top: 83.17%; }
/* sec-05 (1000 x 5994) */
.cta-group-05 { top: 87.85%; }
/* sec-07 (1000 x 7234) — 価格訴求直後 */
.cta-group-07 { top: 9.57%; }
/* sec-08 (1000 x 7607) */
.cta-group-08 { top: 90.43%; }
/* sec-10 (1000 x 4421 ※末尾203pxクロップ済 — 画像内ピンクフッター帯削除) */
.cta-group-10 { top: 84.30%; }


/* ============================================
   Google Map オーバーレイ
   sec-09 下部の店舗情報内・地図エリアに iframe を被せる。
   正方形（aspect-ratio: 1/1）で画像内の地図表現を上書き。
   ============================================ */
.map-overlay {
  position: absolute;
  top: 86.63%;
  left: 7%;
  width: 86%;
  aspect-ratio: 10 / 9;
  z-index: 2;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
  background: #f4f5f8;
}

.map-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ============================================
   フッター（画像内ピンク帯と同色のHTMLフッター）
   sec-10.jpg の末尾60pxをクロップした分、ここから
   ピンク背景 #f29293 が地続きで広がる設計。
   ============================================ */
#site-footer {
  background: #f29293;
  color: #fff;
  text-align: center;
  padding: 2.4rem 1.6rem 2.0rem;
  font-family: "Noto Sans JP", sans-serif;
}

.footer-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-links a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.footer-sep {
  opacity: 0.9;
  font-weight: 400;
}

.footer-copy {
  margin-top: 1.0rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

@media (min-width: 768px) {
  #site-footer {
    padding: 3.2rem 2rem 2.6rem;
  }
  .footer-links {
    font-size: 1.6rem;
    gap: 1.2rem;
  }
  .footer-copy {
    font-size: 1.4rem;
    margin-top: 1.4rem;
  }
}