/* ============================================================
   Aclir — 集中ケア マイクロパッチ(制作サンプル)
   Tone: ソフトピーチピンク×クリームのクリーンD2Cスキンケア。
   方式: ベイク画像フルブリード(面一固定・スクロール演出なし)+ FAQでAEO。
   ============================================================ */
:root {
  --pink:      #E08A9A;
  --pink-deep: #C2667A;
  --peach:     #F6C9C0;
  --peach-pale:#FCE7E2;
  --cream:     #FBF3EC;
  --ink:       #4A3A3D;
  --muted:     #9A7E82;
  --line:      #F0DDD8;
  --white:     #FFFFFF;
  --radius:    16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
.fv, .sec { scroll-margin-top: 16px; }
body {
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, #FCE7E2 0, transparent 46%),
    radial-gradient(circle at 82% 92%, #FBF3EC 0, transparent 46%),
    #F7EAE5;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* スクロール進捗 */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 70; pointer-events: none;
  background: linear-gradient(90deg, var(--pink), var(--pink-deep));
  box-shadow: 0 1px 6px rgba(224, 138, 154, .5);
}

/* サンプル注記バー */
.sample-bar {
  position: sticky; top: 0; z-index: 60;
  background: #3F2F33; color: #FCE7E2;
  font-size: 11px; text-align: center; padding: 6px 10px;
  letter-spacing: .04em;
}

/* スマホ縦長コンテナ */
.lp {
  max-width: 430px; margin: 0 auto;
  background: var(--white);
  box-shadow: 0 0 60px rgba(194, 102, 122, .16);
  overflow: clip;
}

/* ① FV(ベイク画像フルブリード+透明クリックリンク) */
.fv { position: relative; }
.fv-hero { position: relative; line-height: 0; }
.fv-img { width: 100%; height: auto; display: block; }
.fv-cta-overlay {
  position: absolute; left: 8%; top: 89%; width: 82%; height: 8%;
  z-index: 3; border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: rgba(224,138,154,.25);
  transition: box-shadow .2s ease;
}
.fv-cta-overlay:hover { box-shadow: 0 0 0 3px rgba(224,138,154,.3), 0 10px 26px -8px rgba(194,102,122,.45); }
.fv-cta-overlay:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ベイクセクション:全幅・余白ゼロ・面一固定(スクロール演出なし) */
.sec-bake { padding: 0; margin: 0; background: none; line-height: 0; }
.sec-bake .ph { width: 100%; height: auto; margin: 0; border-radius: 0; display: block; }
.bake-hero { position: relative; line-height: 0; }
.bake-link {
  position: absolute; z-index: 3; border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: rgba(224,138,154,.25); transition: box-shadow .2s ease;
}
.bake-link:hover { box-shadow: 0 0 0 3px rgba(224,138,154,.3), 0 10px 26px -8px rgba(194,102,122,.45); }
.bake-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* 視覚的に隠すがDOM/AIには残す(結論先出し・価格のAEO用) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* FAQ */
.sec { padding: 44px 22px 50px; }
.faq-section { background: var(--cream); }
.faq-title {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 900;
  font-size: 21px; text-align: center; margin-bottom: 16px; color: var(--ink);
}
.faq details {
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; font-weight: 700; font-size: 14px;
  padding: 15px 38px 15px 42px; position: relative; transition: background-color .2s ease;
}
.faq summary:hover { background: var(--peach-pale); }
.faq summary::before {
  content: "Q"; position: absolute; left: 14px; top: 14px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 11px; font-weight: 900;
  display: grid; place-items: center;
}
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 13px; color: var(--pink); font-weight: 900; font-size: 18px; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 16px 15px 42px; font-size: 13px; color: #6B565A; }
.faq details[open] > p { animation: faqReveal .3s ease-out both; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* フッター */
.foot { background: #3F2F33; color: #E8CFD3; padding: 26px 22px 110px; font-size: 11px; text-align: center; }
.foot-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; text-decoration: underline; }
.foot-links a { transition: opacity .2s ease; }
.foot-links a:hover { opacity: .65; }
.foot-sample-note { text-align: left; font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,.4); max-width: 80ch; margin: 0 auto; }

/* 追従CTA */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  max-width: 430px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.sticky-price { line-height: 1.2; }
.sticky-price span { display: block; font-size: 10px; font-weight: 700; color: var(--muted); }
.sticky-price b { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 24px; color: var(--pink-deep); }
.cta-mini {
  flex: 1; text-align: center; text-decoration: none;
  font-weight: 900; font-size: 16px; letter-spacing: .04em;
  color: #fff; background: linear-gradient(120deg, var(--pink) 0%, var(--pink-deep) 100%);
  border-radius: 999px; padding: 13px;
  box-shadow: 0 4px 14px -4px rgba(194,102,122,.6);
  transition: filter .2s ease;
}
.cta-mini:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .faq details[open] > p { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}