/* ============================================================
   glaze3 — MUCCHI GUMMY WASH（単品コスメ系LP・丸文字×フレッシュ）
   構成: 購入固定帯 / FV（丸ロゴ+アンカー+価格） / 
         やみつきポイント / 3つのポイント / HOW TO USE / FAQ / 購入
   ============================================================ */
:root {
  --c-base: #fff8f2;
  --c-ink: #332a2a;
  --c-ink-sub: #6f6262;
  --c-main: #f2857d;      /* さくらグミ */
  --c-main-d: #d95d63;
  --c-sub: #7cc0b4;       /* ミント */
  --c-acc: #fbcf3f;       /* レモン */
  --c-dark: #3a2c2c;
  --c-line: #f0dcd4;
  --round: "M PLUS Rounded 1c", sans-serif;
  --sans: "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--round);
  color: var(--c-ink);
  background: var(--c-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 出現アニメ */
.section, .three-card, .point__mock-pill {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.section.is-visible, .three-card.is-visible, .point__mock-pill.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .section, .three-card, .point__mock-pill { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 購入固定帯 ── */
.buybar {
  background: var(--c-main);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: .85rem;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 60;
}
.buybar__date { display: inline-block; background: rgba(255,255,255,.2); padding: 2px 12px; border-radius: 999px; margin-right: 8px; }
.buybar__text { display: inline-block; }
.buybar__note { font-size: .68rem; font-weight: 400; opacity: .85; }

/* ── FV ── */
.fv {
  text-align: center;
  padding: 56px 24px 40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(242,133,125,.14), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(124,192,180,.14), transparent 45%),
    var(--c-base);
}
.fv__logo {
  font-weight: 800;
  font-size: clamp(1.8rem, 5.5vw, 3.4rem);
  letter-spacing: .02em;
  line-height: 1.2;
}
.fv__logo span { color: var(--c-main-d); }
.fv__copy {
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-weight: 700;
  margin-top: 8px;
}
.fv__copy b {
  color: var(--c-main-d);
  background: linear-gradient(transparent 60%, var(--c-acc) 60%);
  padding: 0 4px;
}
.fv__anchor {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.fv__anchor a {
  display: inline-block;
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 5px 16px rgba(58, 44, 44, .1);
  transition: transform .2s, box-shadow .2s;
}
.fv__anchor a b { color: var(--c-main-d); }
.fv__anchor a:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(58, 44, 44, .14); }

.fv__product {
  margin-top: 40px;
  display: inline-block;
}
.fv__pkg {
  width: 220px;
  margin: 0 auto 16px;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background: linear-gradient(170deg, #ffd1cc, #f2857d 70%, #e06a71);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(217, 93, 99, .3);
}
.fv__pkg-brand { font-size: .8rem; letter-spacing: .3em; font-weight: 700; opacity: .9; }
.fv__pkg-name {
  font-size: 1.9rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  margin: 8px 0;
}
.fv__pkg-name b { color: var(--c-main-d); }
.fv__pkg-note { font-size: .7rem; opacity: .85; letter-spacing: .1em; }
.fv__price { font-size: .9rem; }
.fv__price b { font-size: 1.3rem; color: var(--c-main-d); }
.fv__note { font-size: .7rem; color: var(--c-ink-sub); margin-top: 10px; line-height: 1.7; }
.fv__scroll {
  margin-top: 30px;
  font-size: .68rem;
  letter-spacing: .3em;
  color: var(--c-ink-sub);
}
.fv__scroll span { display: inline-block; animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: .4; }
}

/* ── セクション共通 ── */
.main { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-en {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-main-d);
  text-align: center;
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40px;
}
.section-title b.marker {
  color: var(--c-main-d);
  background: linear-gradient(transparent 62%, var(--c-acc) 62%);
  padding: 0 4px;
}
.btn {
  display: inline-block;
  padding: .9em 2.4em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  transition: opacity .2s, transform .2s;
}
.btn--primary { background: var(--c-main-d); color: #fff; }
.btn--ghost { border: 2px solid var(--c-main-d); color: var(--c-main-d); background: #fff; }
.btn:hover { opacity: .85; transform: translateY(-2px); }

/* ── やみつきポイント ── */
.point__lead {
  text-align: center;
  font-size: .96rem;
  margin-bottom: 40px;
}
.point__lead b { color: var(--c-main-d); }
.point__mock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.point__mock-pill {
  background: linear-gradient(140deg, #ffd1cc, #f2857d);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(217, 93, 99, .24);
}
.point__mock-pill--2 { background: linear-gradient(140deg, #a8e0d5, #7cc0b4); box-shadow: 0 10px 24px rgba(124, 192, 180, .24); }
.point__mock-pill--3 { background: linear-gradient(140deg, #ffe9a8, #fbcf3f); color: var(--c-dark); box-shadow: 0 10px 24px rgba(251, 207, 63, .24); }
.point__notes {
  list-style: none;
  text-align: center;
  font-size: .72rem;
  color: var(--c-ink-sub);
  line-height: 1.9;
}

/* ── 3つのポイント ── */
.section--three { background: #fff2ea; border-radius: 22px; padding: 80px 30px; }
.three__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.three-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px 24px;
  box-shadow: 0 6px 20px rgba(58, 44, 44, .07);
}
.three-card__num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-main);
  margin-bottom: 8px;
}
.three-card__ttl { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; line-height: 1.5; }
.three-card__desc { font-size: .86rem; color: var(--c-ink-sub); margin-bottom: 14px; }
.three-card__tags { display: flex; flex-direction: column; gap: 4px; }
.three-card__tags li {
  display: inline-block;
  background: var(--c-sub);
  color: #fff;
  border-radius: 999px;
  padding: 2px 14px;
  font-size: .72rem;
  font-weight: 700;
  align-self: flex-start;
}

/* ── HOW TO USE ── */
.section--howto ol { counter-reset: step; max-width: 560px; margin: 0 auto; }
.howto__list li {
  counter-increment: step;
  background: #fff;
  border-radius: 14px;
  padding: 16px 40px 16px 56px;
  font-size: .92rem;
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 4px 14px rgba(58, 44, 44, .06);
}
.howto__list li::before {
  content: counter(step);
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--c-main-d);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
}
.howto__note { text-align: center; font-size: .78rem; color: var(--c-ink-sub); margin-top: 16px; }

/* ── FAQ ── */
.section-en--faq { margin-top: 60px; }
.faq { max-width: 640px; margin: 0 auto; }
.faq details {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 14px 22px;
  box-shadow: 0 4px 14px rgba(58, 44, 44, .06);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .92rem;
}
.faq summary::marker { color: var(--c-main-d); }
.faq p { padding-top: 10px; font-size: .86rem; color: var(--c-ink-sub); }

/* ── 購入 ── */
.section--buy { text-align: center; }
.buy__note { font-size: .78rem; color: var(--c-ink-sub); margin: -10px 0 28px; }
.buy__cta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* ── フッター ── */
.footer {
  background: var(--c-dark);
  color: #fff8f2;
  text-align: center;
  padding: 60px 24px 30px;
  margin-top: 50px;
}
.footer__logo { font-weight: 800; font-size: 1.3rem; letter-spacing: .1em; margin-bottom: 16px; }
.footer__copy { font-size: .72rem; opacity: .55; }

/* ── SPレスポンシブ ── */
@media (max-width: 700px) {
  .fv__anchor { gap: 8px; }
  .fv__anchor a { font-size: .72rem; padding: 8px 14px; }
  .three__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .section--three { padding: 60px 22px; }
  .buybar__date { display: block; margin-bottom: 4px; }
  .buybar__text { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fv__scroll span { animation: none; }
  html { scroll-behavior: auto; }
}