/* front-page.php — content exclusive to the homepage template.
   Loaded only there (see wellnesslab_assets() in inc/setup.php); everything
   shared with other templates stays in the common style.css. */

/* ---------- Pre-footer: sponsor banners + official SNS ---------- */
.pre-footer-banners { border-top: 1px solid var(--line); }
.sponsor-heading { text-align: center; margin: 0 0 24px; }
.sponsor-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.sponsor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--amber-tint);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sponsor-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
.sponsor-card-name { flex: 1 1 auto; }
.sponsor-card img { height: 28px; width: auto; flex-shrink: 0; }
.arrow-circle {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--amber);
  font-size: 1rem;
  line-height: 1;
}

.pre-footer-sns { display: flex; align-items: center; justify-content: center; gap: 22px; }
.pre-footer-sns .social-link { width: 64px; height: 64px; }
.pre-footer-sns .social-link svg { height: 32px; width: auto; }
@media (max-width: 1180px) { .pre-footer-sns .social-link { display: inline-flex; } }
@media (max-width: 620px) { .pre-footer-sns .social-link { width: 52px; height: 52px; } .pre-footer-sns .social-link svg { height: 26px; width: auto; } }

/* ---------- Hero ----------
   Freely-scattered circle composition (not a 2-column grid): one large
   dominant photo bleeding off the right/bottom edge, a medium photo
   bleeding the top edge, a small photo bleeding the left/bottom edge, copy
   set left/unboxed, a vertical eyebrow on the right. The pastel
   accent-circle decoration is baked into hero_bg.jpg itself (used as this
   section's background) rather than drawn with CSS. Every piece enters on
   load via the [data-reveal] stagger below.

   Sizing/position use clamp()+vw so the composition scales down gracefully
   from 1920 to ~1280 before the ≤900px stacked layout takes over; the photo
   circles are allowed to overlap one another (each has its own white ring
   via box-shadow, so overlap reads as an intentional layered collage) but
   must never overlap the copy column — the big/small photos stay clear of
   it by sitting far enough right/low, and the medium photo's left edge is
   pinned via calc() to the copy's own right edge so the two can never
   collide regardless of viewport width. */
.hero-soft {
  --copy-left: clamp(110px, 6vw, 150px);
  --copy-max-w: min(720px, 44vw);
  position: relative;
  overflow: hidden;
  background: var(--bg-raised) url("../img/hero/hero_bg.jpg") center center / cover no-repeat;
  /* No upper cap on the preferred term (94svh, uncapped) and a generous
     min-height floor: the section is allowed real vertical room instead of
     being crushed to fit one screen — see .brand-tagline-band below, which
     depends on this section ending with enough clearance under the big
     photo for it to creep up over. */
  min-height: clamp(900px, 94svh, 1300px);
  padding: clamp(60px, 4.5vw, 90px) 0 clamp(50px, 4vw, 80px);
}
.hero-soft-copy {
  position: absolute;
  left: var(--copy-left);
  top: clamp(110px, 12vw, 160px);
  z-index: 4;
  max-width: var(--copy-max-w);
}
.hero-soft-title {
  font-family: "Zen Maru Gothic", "Yu Gothic Medium", "YuGothic", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 3.2vw, 58px);
  line-height: 1.4;
  letter-spacing: 0.03em;
  white-space: nowrap;
  word-break: keep-all;
  margin: 0;
}
.hero-soft-smile {
  display: block;
  overflow: visible;
  margin: 10px 0 0;
  width: clamp(80px, 6vw, 110px);
  height: auto;
}
.hero-soft-smile path { stroke: var(--amber); }
.hero-soft-lead {
  margin: clamp(40px, 2.5vw, 55px) 0 0;
  font-size: clamp(20px, 1.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.9;
  color: var(--ink-soft);
}
.hero-soft-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-soft-photo {
  position: absolute;
  margin: 0;
  /* No border-radius/box-shadow ring any more: the PNGs' own baked-in
     silhouettes aren't always a mathematically perfect ellipse matching
     the container's aspect-ratio exactly, so a CSS border-radius:50% mask
     on top could clip a sliver of the already-correct shape (that's what
     was reported as slide 2 looking cut off). overflow:hidden stays as a
     plain rectangular safety net — with object-fit:contain + a matching
     aspect-ratio there's nothing for it to actually clip in normal cases.
  */
  overflow: hidden;
}
.hero-soft-photo picture,
.hero-soft-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* These three source files are now pre-clipped PNGs (transparent
     background, the oval silhouette baked in by hand) rather than plain
     rectangular photos — object-fit:cover + object-position tuning is no
     longer needed (and would only risk re-cropping a shape that's already
     correct). contain shows the whole file; the container below is sized
     to each PNG's own aspect-ratio so there's no letterboxing gap. */
  object-fit: contain;
  object-position: center center;
}
/* Main visual — the red EQUOL pack (slide-1.png). Primary focal point, but
   capped well below full-bleed so it never reads as a standalone product
   ad. Sits BELOW the medium photo in stacking order: the two shapes'
   footprints inevitably overlap a little at every viewport (see
   .hero-soft-photo-medium below), and where they do, it must be this
   photo's plain blurred-background corner that's covered, never the logo
   photo's lettering. */
.hero-soft-photo-big {
  width: clamp(650px, 39vw, 780px);
  aspect-ratio: 843 / 749;
  right: clamp(15px, 2vw, 40px);
  bottom: clamp(40px, 4.5vh, 70px);
  z-index: 3;
}
/* Supporting visual — Wellnesslab logo wall photo (slide-2.png), upper
   area, now pre-cropped so the full "Wellnesslab" lettering is already in
   frame — no object-position balancing act needed any more. Nudged left of
   the copy's right edge on purpose — it's allowed to overlap the big photo
   (slide-1), just not the copy text. Stacked above the big photo (see
   comment there). */
.hero-soft-photo-medium {
  width: clamp(480px, 30vw, 560px);
  aspect-ratio: 686 / 682;
  left: calc(var(--copy-left) + var(--copy-max-w) - 30px);
  top: clamp(-10px, 1vh, 20px);
  z-index: 4;
}
/* Third-tier visual — serum bottles (slide-3.png), bottom-left, well clear
   of the copy's lead paragraph beneath it and allowed a slight left-edge
   bleed. The smallest of the three. */
.hero-soft-photo-small {
  width: clamp(370px, 22vw, 420px);
  aspect-ratio: 1 / 1;
  left: clamp(-40px, -1vw, 10px);
  bottom: clamp(50px, 4vh, 80px);
  z-index: 2;
}
.hero-soft-eyebrow {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  top: 20%;
  writing-mode: vertical-rl;
  letter-spacing: 0.28em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--navy);
  opacity: .55;
  z-index: 3;
}
/* Entrance stagger: gated behind .wl-inview (added pre-paint in header.php,
   same convention as .reveal-lines below) so JS-less visitors always see
   the hero — and behind #heroFull.hero-soft--in (added by main.js once the
   intro loader, if any, has cleared) so nothing animates while hidden
   under it. Photos additionally scale in per spec; everything else just
   fades/slides. */
.wl-inview #heroFull [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
.wl-inview #heroFull [data-reveal="photo"] { transform: translateY(20px) scale(.96); }
.wl-inview #heroFull.hero-soft--in [data-reveal] { opacity: 1; transform: translateY(0); }
.wl-inview #heroFull.hero-soft--in [data-reveal="photo"] { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .wl-inview #heroFull [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  /* Top of the section is message-only (title + lead, plain in-flow block,
     nothing else sharing that space) — the photo cluster starts fresh
     below it via margin-top, so there's no text/photo collision to guard
     against any more and no min-height guess needed either: the section's
     height is purely content-driven (copy block + visual block, both in
     normal flow). Within the cluster, medium sits tucked against big's
     top-right corner (not off on its own near the text) — big dominant,
     small overlapping its bottom-left corner. */
  .hero-soft {
    position: relative;
    padding: 40px 0 32px;
    background-image: url("../img/hero/hero_sp.png");
  }
  .hero-soft-copy {
    position: relative;
    left: auto;
    top: auto;
    padding-left: clamp(20px, 5.5vw, 28px);
    padding-right: clamp(20px, 5.5vw, 28px);
    max-width: 100%;
  }
  /* Bug fix ("改行してほしくない"): the markup hard-breaks this into two
     lines with a manual <br> ("世界中を" / "「キレイ」と「笑顔」に。"), but
     at this font-size the longer second line (12 zenkaku chars) was itself
     wider than the copy column on real phone widths (e.g. ~360px at
     30px/8vw on a 375px screen), so it silently wrapped a THIRD line inside
     the intended second line. Sized so 12 zenkaku chars + their
     letter-spacing fit inside .hero-soft-copy's padded width down to a
     320px screen, and switched to nowrap so a line can never wrap again
     even at the extremes of the clamp — only the deliberate <br> breaks it. */
  .hero-soft-title { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.4; max-width: 100%; white-space: nowrap; margin: 0; }
  .hero-soft-lead { margin-top: 20px; font-size: clamp(16px, 4vw, 18px); }
  .hero-soft-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 118vw;
    margin-top: 28px;
  }
  .hero-soft-photo { position: absolute; margin: 0; }
  .hero-soft-photo-big    { width: 82vw; aspect-ratio: 843 / 749; left: 4vw; top: 14vw; z-index: 2; }
  .hero-soft-photo-medium { width: 40vw; aspect-ratio: 686 / 682; right: 2vw; top: 0; z-index: 3; }
  .hero-soft-photo-small  { width: 34vw; aspect-ratio: 1 / 1; left: -3vw; top: 78vw; z-index: 4; }
  .hero-soft-eyebrow {
    display: block;
    position: absolute;
    right: 1vw;
    top: 45vw;
    font-size: 0.6rem;
  }
}

/* ---------- News ---------- */
.news-list { display: flex; flex-direction: column; }
.news-list li { list-style: none; }
.news-row {
  display: grid; grid-template-columns: 110px auto 1fr; gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.news-row:first-child { border-top: 1px solid var(--line); }
@media (max-width: 620px) { .news-row { grid-template-columns: 90px auto; } .news-row .news-body { grid-column: 1 / -1; } }
.news-row time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.85rem; }
/* Bug fix ("tag renders as a wide block"): as a grid item inside
   .news-row's "auto" column, a plain <span> defaults to justify-self:stretch
   and fills that column's full width — sized to whichever row's tag label
   is longest (e.g. "重要なお知らせ"), not its own text. justify-self:start
   plus inline-flex makes it hug its own label's width instead. */
.news-tag {
  display: inline-flex;
  justify-self: start;
  font-size: 0.68rem; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; height: fit-content;
}
.news-tag.info { background: var(--navy-tint); color: var(--ink); }
/* UX fix: "重要なお知らせ" used to carry the same visual weight as a routine
   "新商品" tag (same tint-fill treatment, just a different hue) — an urgent
   notice should not have to compete on equal footing with routine ones, so
   it now gets a solid fill instead of a tint. */
.news-tag.alert { background: var(--rose); color: #fff; font-weight: 700; }
.news-body a { color: var(--ink); text-decoration: none; }
.news-body a:hover { color: var(--amber); }

.lead-quote-plain {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 3.4;
  letter-spacing: 0.01em;
}
@media (max-width: 680px) {
  /* The desktop clamp's 1.25rem floor doesn't shrink further below its own
     2vw preferred term once vw drops under it — at phone widths that floor
     (plus a 2.8 line-height meant for the wider desktop measure) reads as
     oversized and forces mid-sentence wraps. A phone-specific size/line-
     height keeps the five lines readable without dominating the section. */
  .lead-quote-plain { font-size: clamp(0.95rem, 4.2vw, 1.15rem); line-height: 2.6; }
}

.mission-message { background: var(--bg-raised); }

/* Oversized brand tagline — a plain sibling AFTER .hero-soft (not nested
   inside it), so it is never subject to the hero's own overflow:hidden and
   can never be clipped, vertically or horizontally, no matter how tall the
   hero's content gets. A negative margin-top pulls it up so it visually
   creeps under the bottom of the hero's big photo (z-index/paint order is
   simply DOM order here — as a later sibling it already paints above the
   hero's content where they overlap), then normal margin-bottom hands off
   to the next section's own top padding — a soft continuation, not a
   banded divider. No background of its own, no text-shadow (kept flat/
   plain per request) — legibility over the photo comes from the fill's
   own opacity being high enough on its own, not from a glow/outline. */
.brand-tagline-band {
  position: relative;
  z-index: 2;
  margin: clamp(-260px, -13vw, -150px) 0 clamp(24px, 3vw, 56px);
  padding: 0 5%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  font-family: "Zen Maru Gothic", "Yu Gothic Medium", "YuGothic", sans-serif;
  font-weight: 800;
  /* Vw-dominant on purpose (not rem-clamped) so the text scales in lockstep
     with its own container (which is also vw-sized via the 5vw padding
     above) — the ratio of text width to available width stays constant
     across viewports instead of the text outgrowing its box and getting
     clipped by overflow:hidden at some widths. 4.8vw keeps
     "Your Smile is Our Happiness." comfortably inside a 90vw box in this
     font stack while reading larger than before; the rem bounds only
     guard the extreme ends. */
  font-size: clamp(0.6rem, 4.1vw, 7rem);
  line-height: 1;
  /* PC reads this at a much larger size (up to 7rem) than phones do, so the
     same fill strength that's right on mobile becomes visually loud on
     desktop — scaled back to a quieter background-texture level there;
     mobile keeps the stronger fill from before. */
  color: color-mix(in srgb, var(--navy) 20%, transparent);
  letter-spacing: 0.01em;
  user-select: none;
}
@media (max-width: 900px) {
  .brand-tagline-band {
    margin: clamp(-70px, -16vw, -36px) 0 28px;
    color: color-mix(in srgb, var(--navy) 45%, transparent);
  }
}
@media (max-width: 480px) {
  /* A fixed px size here (not vw-based) sidesteps whatever's inflating vw
     resolution at very narrow widths in testing — verified empirically to
     actually fit "Your Smile is Our Happiness." within a 5%-padded box
     down to 320px, rather than calculated from assumed character widths
     (which kept being wrong here). */
  .brand-tagline-band { font-size: 14px; }
}

/* ---------- Showcase panel (商品一覧 + ブランド一覧, merged card) — full-bleed background ---------- */
section.showcase-panel {
  position: relative;
  background: var(--sky-gradient);
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(48px, 7vw, 84px);
}
.section-wave-top {
  position: absolute; left: 0; right: 0; bottom: 100%;
  width: 100%; height: clamp(40px, 7vw, 80px);
  display: block;
}
.section-wave-top path { fill: var(--sky-tint); }

.column-scroll {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.column-scroll::-webkit-scrollbar { display: none; }
.column-card { flex: 0 0 260px; scroll-snap-align: start; }

/* ---------- Yuranya mascot: journal section (full-bleed, curved top like showcase-panel) ---------- */
.yuranya-journal { position: relative; background: var(--sky-gradient); }
.journal-panel {
  position: relative;
  padding: clamp(84px, 11vw, 130px) clamp(28px, 5vw, 52px) 0;
}
.journal-head { text-align: center; }
.journal-panel h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 10px 0 24px; }
.yuranya-corner {
  position: absolute;
  width: clamp(250px, 29vw, 420px);
  z-index: 2;
  opacity: 0;
  transform: translateY(70px) scale(0.35) rotate(-8deg);
  transition: opacity .55s ease, transform .85s cubic-bezier(.34,1.7,.5,1);
  pointer-events: none;
}
.yuranya-corner.is-visible { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
.yuranya-corner-left { top: clamp(-220px, -22vw, -170px); left: clamp(-120px, -11vw, -50px); }
.yuranya-corner-right {
  top: clamp(-155px, -16vw, -110px); right: clamp(-120px, -11vw, -50px);
  transform: translateY(70px) scale(0.35) rotate(8deg);
}
.yuranya-corner-right.is-visible { transform: translateY(0) scale(1) rotate(0deg); }
@media (max-width: 700px) {
  .journal-panel { padding-top: clamp(80px, 26vw, 110px); }
  .journal-panel h2 { font-size: clamp(1.3rem, 8vw, 1.6rem); }
  .yuranya-corner { width: clamp(145px, 40vw, 210px); }
  /* Bug fix: -30px pushed the mascot past the viewport's left/right edge on
     every phone width (.wrap's own gutter floors at 20px, so -30px always
     left ~10px hanging off-screen). Even with overflow-x:hidden blocking an
     actual scrollbar, that leftover horizontal overflow is exactly what lets
     iOS Safari's elastic scroll rubber-band sideways on any vertical swipe —
     the "横ブレ" (sideways jitter) on the homepage. -20px matches the
     gutter's own floor, so the mascot still bleeds to the edge but never
     past it, at every width from 320px up. */
  .yuranya-corner-left { top: -84px; left: -20px; }
  .yuranya-corner-right { top: -70px; right: -20px; }
}
.yuranya-intro {
  position: relative;
  display: block;
  padding: clamp(32px, 5vw, 48px) clamp(4px, 2vw, 16px) 8px;
  margin-top: 12px;
  overflow: hidden;
  text-decoration: none; color: inherit;
}
.yuranya-intro-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(96%, 1100px);
  pointer-events: none;
  z-index: 0;
}
.yuranya-intro-row {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 4px;
}
.yuranya-intro-img {
  width: clamp(200px, 22vw, 300px);
  height: auto;
  margin-top: 10px;
  animation: yuranyaIntroFloat 3.2s ease-in-out infinite;
}
@keyframes yuranyaIntroFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}

.yuranya-intro-link { margin-top: 14px; }
@media (max-width: 560px) {
  .yuranya-intro-img { width: clamp(150px, 45vw, 220px); }
  .yuranya-intro-watermark { width: 96%; }
}
@media (prefers-reduced-motion: reduce) {
  .yuranya-intro-img { animation: none; }
}