/* SIMIUS UV FACE POWDER — SP hero 1 (webdesign comp)
   Figma: sp_hero 1 (nodeId=9:551) in powder-_-lp
   Base: 400 x 729 (sp viewport) */

:root {
  --c-ink: #5e6b6e;
  --c-ink-strong: #514d75;
  --c-ink-soft: #7d8e93;
  --c-border-strong: #b4b3e1;
  --c-border-mid: #a9a5e5;
  --c-under: #bad3dc;
  --fs-headline: 32px;
  --fs-sub: 20px;
  --fs-spec: 12px;
  --fs-asterisk: 18.56px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-weight: 100;
  background: #bad3dc;              /* ヒーロー背景色と揃える (灰色の余白を消す) */
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

/* ---------- SP stage (phone-like frame with internal scroll + overlay CTA) ---------- */

.sp-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;            /* デザイン基準 400px */
  height: 100vh;
  transform-origin: top left;
  --sp-scale: 1;
  transform: scale(var(--sp-scale));        /* viewport の全高を使って上端から表示 */
  background: #bad3dc;
  border-radius: 0;
  box-shadow:
    0 24px 60px rgba(32, 24, 64, 0.18),
    0 2px 6px rgba(32, 24, 64, 0.08);
  overflow: hidden;
}

/* 実際のスクロール領域はこの内側 */
.sp-stage__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox: scrollbar 非表示 */
  padding-bottom: 90px;              /* 固定 CTA の分だけ底に余白、フッター下まで表示域確保 */
}

/* WebKit (Chrome / Safari): scrollbar 完全に非表示 */
.sp-stage__scroll::-webkit-scrollbar { display: none; width: 0; }

/* ---------- SP header (sticky top, transparent bg, centered SIMIUS wordmark) ---------- */

.sp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 400px;
  height: 47px;
  background: transparent;           /* Figma 仕様通り完全透過 */
  margin-bottom: -47px;              /* overlay the hero (hero starts at y=0, header floats on top) */
  pointer-events: none;              /* ロゴ以外はヒーロー操作を妨げない */
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.sp-header.is-stuck {
  background: rgba(186, 211, 220, 0.92);     /* #BAD3DC + 透過 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Figma inset-[33.6%_3.63%_28.11%_37.63%] of a 400x47 frame:
   left=150.52, top=15.79, width=235.49, height=18.
   The SIMIUS wordmark lives in the LEFT portion of the SVG and the right side
   carries a horizontal line decoration (visible as ═ on the right of the header). */
/* ハンバーガーボタン : header-simius.svg の右半分 (≡ 装飾部分) にかぶせる透明クリック領域 */
.sp-header__burger {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 25;
}
/* ドロワーが開いているあいだ、ヘッダー + 内部のロゴ/バーガーを完全に非表示に */
html body .sp-header.is-hidden-by-drawer,
html body .sp-header.is-hidden-by-drawer .sp-header__logo,
html body .sp-header.is-hidden-by-drawer .sp-header__burger {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ドロワー本体 : viewport 全体を purple で埋める (header の ≡ ごと覆い隠す) */
.sp-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  background: #514d75;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 9999;
}
.sp-nav-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sp-nav-drawer__panel {
  position: relative;
  width: 400px;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  transform: translateY(-16px);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sp-nav-drawer.is-open .sp-nav-drawer__panel { transform: translateY(0); }
.sp-nav-drawer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
/* 閉じる × : Figma 164:121、SIMIUS ロゴ (top:19, h:21.48) と上下中央で揃える */
.sp-nav-drawer__close {
  position: absolute;
  right: 18.89px;
  top: 19.13px;        /* ロゴ center y=29.74 と × center を一致させる */
  width: 21.22px;
  height: 21.22px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 10000;
}
.sp-nav-drawer__close img {
  display: block;
  width: 100%;
  height: 100%;
}
.sp-nav-drawer__close span {
  position: absolute;
  left: 5px;
  top: 15px;
  width: 22px;
  height: 1.4px;
  background: #fff;
  border-radius: 1px;
  display: block;
}
.sp-nav-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.sp-nav-drawer__close span:nth-child(2) { transform: rotate(-45deg); }
.sp-nav-drawer__logo {
  position: absolute;
  left: 140px;
  top: 19px;
  width: 118.617px;
  height: 21.48px;
  z-index: 1;
}
.sp-nav-drawer__nav {
  position: absolute;
  left: 106px;
  top: 215px;
  width: 227px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 1;
}
.sp-nav-drawer__item {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
.sp-nav-drawer__en {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.32px;
  line-height: 1;
}
.sp-nav-drawer__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
/* FB 1022: ハンバーガー drawer に SNS アイコン (下段中央寄せ) */
.sp-nav-drawer__social {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60px;
  display: flex;
  gap: 16px;
  z-index: 1;
}
.sp-nav-drawer__social a {
  display: block;
  width: 48px;
  height: 48px;
}
.sp-nav-drawer__social img {
  display: block;
  width: 48px;
  height: 48px;
}


.sp-header__logo {
  position: absolute;
  left: 150.52px;
  top: 15.79px;
  width: 235.49px;
  height: 18px;
  pointer-events: auto;
}

.sp-filler {
  position: relative;
  min-height: 720px;
  padding: 56px 32px 56px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f4fb 100%);
  color: #9a9a9a;
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}

.sp-filler__q {
  margin: 0 0 32px;
  font-weight: 100;
  font-size: 16px;
  color: var(--c-ink-strong);
}

.sp-filler__note {
  margin: 0;
  font-size: 11px;
  color: #bcbcc8;
  letter-spacing: 0.04em;
}

/* ---------- Hero container ---------- */

.hero {
  position: relative;
  width: 400px;
  height: 729px;
  overflow: hidden;
  background: var(--c-under);
}

.hero img {
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ---------- Background underlay ---------- */
/* bg-purple.svg is a solid #bad3dc rectangle that would extend down for the full LP;
   we clip it to the hero via overflow:hidden on .hero and use it as a safety underlay. */
.hero__bg {
  position: absolute;
  left: 0; top: 0;
  width: 400px;
  height: 729px;
  object-fit: cover;
}

/* ---------- Product photo scene ---------- */
/* Figma places the 702x674 photo at local (-272, 24) within hero.
   The photo PNG contains the full composed scene (gradient + rays + compact + glass orbs). */
.hero__photo {
  position: absolute;
  left: -272px;
  top: 38px;               /* Figma: 9:562 Group y=38.049 (New と被らないよう下げる) */
  width: 702px;
  height: 674px;
}

/* ---------- SPF50+ PA+++ badge (top-right circle) ---------- */
.hero__badge {
  position: absolute;
  left: 258px;
  top: 53px;
  width: 119.92px;
  height: 119.43px;
}

/* ---------- Inner badge composite (New ribbon area, 26:1439) ---------- */
.hero__badge-inner {
  position: absolute;
  left: 258px;
  top: 52px;
  width: 119.91px;
  height: 119.91px;
  overflow: hidden;
}
.hero__badge-inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__badge-inner .layer-text {
  position: absolute;
  left: 18.82%;
  top: 25.52%;
  right: 17.36%;
  bottom: 21.54%;
}
.hero__badge-inner .layer-text img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- "New!" decoration (updated 2026-10-15) ---------- */
.hero__ribbon {
  position: absolute;
  left: 276px;
  top: 181px;
  width: 105.16px;
  height: 66.58px;
}

/* ---------- Decorative vector marks (mid-right small marks) ---------- */
.hero__decor {
  position: absolute;
}
.hero__decor--1 { /* 091b9.svg : small vertical tick near "New" */
  left: 295px;
  top: 184px;
  width: 8.57px;
  height: 23.43px;
}
.hero__decor--2 { /* 065a0.svg : horizontal line mid-right */
  left: 374px;
  top: 238px;
  width: 25.09px;
  height: 2.6px;
}
.hero__decor--3 { /* 5875c.svg : horizontal line, slightly below decor-2 */
  left: 374px;
  top: 244px;
  width: 14.25px;
  height: 2px;
}

/* ---------- Headline block (FB 11/02: 画像化 Figma 253:162) ---------- */
.hero__headline-img {
  position: absolute;
  left: 24px;
  top: 89px;
  width: 207.5px;
  height: 157.5px;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ---------- Product spec (small text under headline) ---------- */

.spec {
  position: absolute;
  margin: 0;
  font-weight: 100;
  font-size: var(--fs-spec);
  color: var(--c-ink);
  line-height: 1;
  white-space: nowrap;
}
.spec--title { left: 24px;  top: 291px; letter-spacing: -0.6px; }
.spec--grade { left: 24px;  top: 307px; }
.spec--pa    { left: 66px;  top: 307px; }
.spec--size  { left: 108px; top: 307px; }
.spec--price { left: 24px;  top: 323px; }
.spec--tax   { left: 59px;  top: 325px; }
.spec--tax .tax-small { font-size: 7.2px; }

/* ---------- Three feature bullets (white boxes with purple corners) ---------- */

.features {
  position: absolute;
  left: 0;
  top: 518px;
  width: 100%;
  height: 100px;
}
.feature {
  position: absolute;
  background: #fff;
  height: 21px;                        /* 元の高さに戻す (上下余白はいじらない) */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.feature p {
  margin: 0;
  font-weight: 100;
  font-size: var(--fs-sub);
  color: var(--c-ink);
  white-space: nowrap;
  line-height: 1;
}
.feature--1 {
  left: 0; top: 0;
  width: 335px;                        /* FB 1023: テキストが「夜だけで終わらない。」に伸びたので 300 → 335 */
  padding-left: 24px;
  padding-right: 10px;
  border-right: 2px solid var(--c-border-mid);
  border-bottom: 2px solid var(--c-border-mid);
}
.feature--2 {
  left: 0; top: 28px;
  width: 255px;                        /* FB 1019: 275 → 255 */
  padding-left: 24px;
  padding-right: 10px;
  justify-content: flex-start;
  border-right: 2px solid var(--c-border-mid);
  border-bottom: 2px solid var(--c-border-mid);
}
.feature--3 {
  left: 0; top: 55px;
  width: 340px;                        /* FB 1019: 365 → 340 */
  padding-left: 24px;
  padding-right: 10px;
  justify-content: flex-start;
  border-right: 2px solid var(--c-border-mid);
  border-bottom: 2px solid var(--c-border-mid);
}
/* 本文中の注釈参照 (*1 シミを防ぐ 等) : 数字は 5px、＊ (全角) は 6px (first-letter で上書き)。
   ::first-letter は inline 要素に効かないため inline-block にする。 */
.footnote-ref {
  display: inline-block;       /* ::first-letter を効かせるため */
  font-size: 5px;              /* FB 10/30: 7 → 5 (-2px) */
  vertical-align: super;
  position: relative;
  top: -2px;
  line-height: 0;
  letter-spacing: 0;
  margin: 0 1px;
}
/* FB 10/30: 先頭の ＊ (全角) だけ 6px (7 → 6px、-2px) */
.footnote-ref::first-letter {
  font-size: 6px;
}

.feature--1 p { letter-spacing: -1.4px; }
.feature--2 p { letter-spacing: -1px; }
.feature--3 p { letter-spacing: -0.9px; }
.feature--3 p .punct { font-size: 15px; letter-spacing: -0.3px; }
.feature--2 p .punct { font-size: 15px; letter-spacing: -0.75px; }

/* ---------- Sticky CTA : overlaid on sp-stage, always at bottom ---------- */
/* NOTE: cta.css の .cta を上書きするため .cta.cta--sticky で詳細度 2 に上げる */

/* 初期は hero の直後 (= hero 底) に自然配置、hero の最後 90px に重ねる */
.cta.cta--sticky {
  position: relative;
  display: block;
  margin: -90px auto 0;              /* hero の最後 90px に重ねる */
  z-index: 10;
  width: 384px;
  height: 90px;
  overflow: hidden;
  border-radius: 13.72px;
  background: transparent;
  box-shadow: 0 -8px 24px rgba(32, 24, 64, 0.18);
}
/* 自然位置を越えてスクロールしたら画面底に fixed で追従 */
.cta.cta--sticky.is-sticky {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  width: 384px;
  max-width: 400px;
  z-index: 50;
}

/* FB 1019: SP/PC どちらも初期段階から画面底 fixed、画面底から 16px 上に、Figma 仕様 384×90 */
.cta.cta--sticky {
  position: fixed !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 384px !important;
  height: 90px !important;
  z-index: 50;
}
.cta.cta--sticky .cta__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* position: sticky なので scroll-idle fade や footer 隠しは不要 (natural な動作) */

/* bg も 100% に合わせて横伸ばし (SVG は preserveAspectRatio="none" でストレッチ) */
.cta.cta--sticky .cta__bg {
  width: 100%;
  height: 100%;
}

/* 内部要素は Figma 384 幅ベースの座標そのまま */
.cta.cta--sticky .cta__lede          { left: 144px; }
.cta.cta--sticky .cta__arrow         { left: 181px; }
.cta.cta--sticky .cta__slot--simius  { left: 25px; }
.cta.cta--sticky .cta__slot--rakuten { left: 156px; }
.cta.cta--sticky .cta__slot--amazon  { left: 284px; }

/* Hover state : dim the other two slots when one is hovered */
/* FB 1019: ロゴ外ホバーでは dim させず、いずれかのロゴをホバー時のみ他2つを dim */
.cta .cta__slot            { opacity: 1; transition: opacity 0.18s ease; }
.cta:has(.cta__slot:hover) .cta__slot        { opacity: 0.3; }
.cta:has(.cta__slot:hover) .cta__slot:hover  { opacity: 1; }