@charset "UTF-8";
/* =========================================================
   RESET
========================================================= */
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box !important;
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Serif JP", serif;
  color: var(--c-text);
  background: var(--c-bg-outer);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* background-attachment:fixed on body is unreliable across browsers
   (notably iOS Safari), so use a dedicated fixed backdrop layer instead. */
.bg_backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--c-bg-outer);
}

/* =========================================================
   INTRO SPLASH
   Full-screen rose background with the catch copy fading in,
   then the whole overlay fades out to reveal the site.
========================================================= */
body.is_intro_lock {
  overflow: hidden;
  height: 100%;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--c-bg-outer);
  animation: intro_fade_out 1.1s ease forwards;
  animation-delay: 3.4s;
}

/* EN copy is longer, so it needs more time to fully reveal
   before the overlay fades out (double the JA delay). */
.intro.intro--en {
  animation-delay: 6.8s;
}

.intro_catch {
  color: #fff;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(20, 30, 40, 0.55), 0 2px 24px rgba(20, 30, 40, 0.6);
}

.sp_break {
  display: none;
}

.sp_only {
  display: none;
}

/* Each character is wrapped in a .ch span by scripts.js and
   staggered via an inline animation-delay for a "flowing in"
   reveal, rather than a single fade for the whole line. */
.intro_catch .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: intro_char_in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes intro_char_in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro_fade_out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

/* =========================================================
   SCROLL REVEAL
   Section titles & images fade/slide in the first time they
   enter the viewport (triggered via IntersectionObserver in
   scripts.js, which toggles the .is_visible class).
========================================================= */
.js_reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: 0.5s;
}

.js_reveal.is_visible {
  opacity: 1;
  transform: none;
}

/* Paragraph text / lists (class added by scripts.js): a shorter, quicker
   rise than titles & images so reading isn't held up. */
.js_reveal--txt {
  transform: translateY(14px);
  transition-duration: 0.8s;
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .js_reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

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

button {
  background: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

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

.text-center { text-align: center !important; }
.serif_en { font-family: "Cormorant Garamond", serif; }

/* =========================================================
   VARIABLES
========================================================= */
:root {
  --content-w: 480px;
  --c-bg-outer: #3b0a36;
  --c-bg: #fffdf9;
  --c-text: #3a1636;
  --c-text-body: #434343;
  --c-black: #2e0a2a;
  --c-gold: #b59a5a;
  --c-cream: #f6eef6;
  --c-apricot: #e3cf9f;
  --c-line: #e4d3e2;
  --c-purple: #7a1b6e;
  --c-lilac: #f0e4f1;
  --c-lime: #f4f5dc;
  --font-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* ---- Body copy: paragraph text uses the sans-serif font & color,
   headings/logo keep the serif family set on <body>/.serif_en. ---- */
p {
  font-family: var(--font-sans);
  color: var(--c-text-body);
}

/* =========================================================
   IMAGE PLACEHOLDER (temporary, until real assets are supplied)
========================================================= */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #e7dccb, #e7dccb 10px, #f1e9dc 10px, #f1e9dc 20px);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ph::after {
  content: attr(data-ph);
  font-family: sans-serif;
  font-size: 0.75rem;
  color: #8a7a63;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 4px;
}

/* =========================================================
   ICONS
========================================================= */
.icon_cart {
  display: inline-block;
  width: 18px;
  height: auto;
  vertical-align: middle;
}

/* =========================================================
   LAYOUT / CONTENT COLUMN
   Same design is shared by PC and SP: a fixed-width column
   centered on the viewport.
========================================================= */
.lp_wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}

/* ---- MV ---- */
.mv {
  position: relative;
}

.mv_media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.mv_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---- Section common ---- */
.sec {
  padding: 64px 0;
}

.sec_inner {
  padding: 0 32px;
}

.sec_label {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--c-gold);
  margin-bottom: 12px;
}

.sec_ttl {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 28px;
}

.sec_lead {
  font-size: 0.9rem;
  line-height: 2.1;
  text-align: center;
  margin-bottom: 32px;
}

/* ---- FAQ ---- */
.faq_item {
  border-bottom: 1px solid var(--c-line);
}

.faq_q {
  width: 100%;
  text-align: left;
  padding: 20px 36px 20px 4px;
  font-size: 0.9rem;
  position: relative;
}

.faq_q::before {
  content: "Q";
  font-family: "Cormorant Garamond", serif;
  color: var(--c-gold);
  margin-right: 10px;
}

.faq_q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.faq_item.is_open .faq_q::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq_a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq_a p {
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.9;
  padding: 0 4px;
}

.faq_item.is_open .faq_a {
  grid-template-rows: 1fr;
}

.faq_item.is_open .faq_a p {
  padding-bottom: 20px;
}

/* ---- Company Profile ---- */
.company_subttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 16px;
}

.company_lead {
  font-size: 0.88rem;
  line-height: 2;
  text-align: center;
  margin-bottom: 32px;
}

.company_box {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--c-line);
  padding: 20px;
}

.company_logo {
  flex: none;
  width: 84px;
}

.company_info {
  flex: 1;
}

.company_name {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 8px;
}

.company_txt {
  font-size: 0.78rem;
  line-height: 1.8;
}

/* ---- Footer ---- */
.footer {
  background: #fff;
  padding: 56px 32px 40px;
  text-align: center;
}

.footer_logo {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.footer_copyright {
  font-size: 0.7rem;
  color: #8a7a63;
}

/* =========================================================
   Fixed chrome shared base (visibility toggled per breakpoint
   in pc.css / sp.css)
========================================================= */
.l_side_left,
.l_side_cta,
.l_copyright,
.sp_header,
.sp_nav,
.sp_nav_overlay,
.sp_bottom_cta {
  position: fixed;
  z-index: 100;
}

/* =========================================================
   Clear Whitening
========================================================= */
.sec_cream { background: var(--c-cream); }
.sec_concept,
.sec_feature,
.sec_product,
.sec_faq { background: #fff; }
.intro { background: #fff; }
.intro_catch { color: var(--c-purple); text-shadow: none; }
.sec_label { color: var(--c-purple); }

/* ---- MV: photo already contains the product ---- */
.mv { position: relative; background: #fff; }
.mv_media { position: relative; aspect-ratio: 3 / 4; }
.mv_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mv_body {
  position: absolute;
  left: 0; right: 0; bottom: 60px;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.mv_sub {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--c-apricot);
  line-height: 1.4;
  margin-bottom: 4px;
}
.mv_catch_sub { font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.88); margin-top: 0; letter-spacing: 0.06em; }
.mv_sub, .mv_catch_sub {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: mv_fade_up 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 3.8s forwards;
}
.mv_sub {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.55);
}
@keyframes mv_fade_up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mv_sub, .mv_catch_sub { opacity: 1; animation: none; }
}

/* ---- tags / chips ---- */
.tag_quasi {
  display: inline-block;
  border: 1px solid var(--c-text-body);
  padding: 2px 14px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--c-text-body);
}
.center { text-align: center; }
.sec_sub {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--c-purple);
  margin-bottom: 14px;
}

/* ---- Concept ---- */
.concept_ingredients { text-align: center; margin: 32px 0 8px; }
.concept_ingredients .lead_s { font-family: var(--font-sans); font-size: 0.85rem; margin: 10px 0 14px; }
.orb_row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.orb {
  width: 140px; height: 140px; flex: none;
  margin: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(circle, #f1e3f2 0%, rgba(241, 227, 242, 0.55) 60%, rgba(241, 227, 242, 0) 100%);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text);
}
.orb_x { text-align: center; font-size: 1.4rem; color: #8a7a8a; }
@media (max-width: 380px) { .orb { width: 118px; height: 118px; font-size: 0.78rem; } }
.concept_img { aspect-ratio: 3 / 2; }

/* ---- Feature ---- */
.cause_box { margin-bottom: 48px; }
.cause_img { display: block; width: 100%; max-width: 360px; height: auto; margin: 28px auto 0; }
.cause_list { counter-reset: c; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.8; }
.cause_list li { counter-increment: c; display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.cause_list li::before { content: counter(c); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-purple); color: #fff; font-size: 0.72rem; line-height: 22px; text-align: center; margin-top: 3px; }
.feature_ttl { color: var(--c-purple); font-size: 1.5rem; font-weight: 500; line-height: 1.7; margin: 24px 0 20px; }
.feature_ttl small { display: block; font-size: 0.75rem; line-height: 1.8; margin-bottom: 6px; color: var(--c-text-body); }
.feature_txt { text-align: center; }
.double_care { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 20px 0 48px; }
.care_card { background: var(--c-lilac); border-radius: 16px; padding: 18px 16px; text-align: center; font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.8; }
.care_card .care_kind { display: block; font-size: 0.78rem; }
.care_card .care_name { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 4px; }
.care_x { text-align: center; font-size: 1.3rem; color: #8a7a8a; }
.support_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 48px; justify-items: center; }
.support_item {
  width: 100%; max-width: 170px; aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px;
  font-family: var(--font-sans); font-size: 0.74rem; line-height: 1.6; color: var(--c-text-body);
}
.support_item b { font-weight: 500; font-size: 0.82rem; color: var(--c-purple); margin-bottom: 6px; }
.effect { margin: 48px 0 72px; text-align: left; }
.effect_ttl { text-align: center; font-size: 0.95rem; color: var(--c-purple); letter-spacing: 0.06em; line-height: 1.8; padding-bottom: 6px; }
.effect_ttl_main { display: inline-block; margin-top: 6px; font-size: 1.2rem; }
.effect_num { font-family: var(--font-sans); font-size: 2.6rem; font-weight: 500; line-height: 1; margin-right: 2px; vertical-align: -0.1em; }
.effect_list li { display: flex; align-items: center; gap: 18px; padding: 22px 4px; border-bottom: 1px solid var(--c-line); font-family: var(--font-sans); }
.effect_list .n { flex: none; width: 2em; font-family: "Cormorant Garamond", serif; font-size: 1.3rem; line-height: 1.3; color: var(--c-gold); }
.effect_list h4 { font-size: 0.95rem; font-weight: 500; line-height: 1.6; margin-bottom: 6px; color: var(--c-purple); }
.effect_list p { font-size: 0.8rem; line-height: 1.9; color: var(--c-text-body); }

/* ---- Flow ---- */
.flow_head { text-align: center; font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 4px; }
.flow_list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 24px 0 0; }
.flow_item { text-align: center; font-family: var(--font-sans); background: #fff; border: 1px solid var(--c-line); padding: 14px 8px; }
.flow_item .no { display: block; font-size: 0.85rem; color: var(--c-purple); font-weight: 500; }
.flow_chip { display: inline-block; margin: 4px 0 8px; padding: 2px 16px; border-radius: 999px; background: #c775b8; color: #fff; font-size: 0.74rem; }
.flow_item .kind { display: block; font-size: 0.7rem; color: var(--c-text-body); }
.flow_item .nm { display: block; font-size: 0.78rem; line-height: 1.6; color: var(--c-purple); }
.flow_item > img { display: block; width: 100%; max-width: 140px; margin: 0 auto 4px; mix-blend-mode: multiply; }
.flow_item--special { grid-column: 1 / -1; border: 2px solid var(--c-apricot); background: #fff; }
.flow_item--special .flow_chip { background: var(--c-apricot); color: var(--c-text); }
.flow_callout { width: fit-content; max-width: 86%; margin: 0 auto 12px; background: var(--c-apricot); border-radius: 8px; padding: 8px 22px; font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.6; }
.flow_callout b { display: block; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 0.95rem; }
.flow_item--special img { width: 90px; margin: 0 auto 6px; mix-blend-mode: multiply; }

/* ---- Product ---- */
.prod { text-align: center; }
.prod_img { position: relative; width: 100%; max-width: 340px; margin: 8px auto 20px; }
.prod_img img { mix-blend-mode: multiply; }
.prod_img .tube { display: block; width: 74.9%; margin: 0 auto; }
.prod_img .cream { position: absolute; top: 46%; right: 10%; width: 45.6%; }
.prod_name { font-family: "Noto Serif JP", serif; font-size: 1.15rem; font-weight: 500; color: var(--c-purple); line-height: 1.6; margin: 8px 0; }
.prod_price { font-family: var(--font-sans); font-size: 0.95rem; margin-bottom: 14px; }
.prod_price b { font-size: 1.3rem; font-weight: 500; }
.prod_badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.prod_badges span { background: var(--c-purple); color: #fff; font-family: var(--font-sans); font-size: 0.75rem; padding: 4px 18px; border-radius: 999px; }
.prod_use { text-align: left; font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.9; margin-bottom: 20px; }
.prod_use b { display: inline-block; background: #e8e4e8; padding: 0 12px; font-weight: 400; margin-bottom: 4px; font-size: 0.8rem; }
.prod_btn { display: block; text-align: center; padding: 14px 0; background: var(--c-purple); color: #fff; font-family: var(--font-sans); font-size: 0.9rem; letter-spacing: 0.08em; margin-bottom: 24px; }
.prod_ing { text-align: left; font-family: var(--font-sans); font-size: 0.68rem; line-height: 1.7; color: var(--c-text-body); }
.prod_ing dt { font-weight: 500; margin-top: 8px; }

/* ---- Company / contact ---- */
.company_contact { margin-top: 24px; font-size: 0.78rem; line-height: 1.9; text-align: center; }
.footer_logo_img { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 20px; }