/* SIMIUS UV FACE POWDER — SP feature section (webdesign comp)
   Figma: sp-feature (nodeId=64:9) in powder-_-lp
   Structure : 400x527 visual (hero photo + headline overlay) + 400x575 body copy */

.sp-feature {
  display: flex;
  flex-direction: column;
  width: 400px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: #514d75;
}

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

/* ---------- feature-visual : 400x527 hero image + decorative vector + headline ---------- */
.sp-feature__visual {
  position: relative;
  flex: 0 0 527px;            /* 幅親で高さ 527 を強制、縮小禁止 */
  width: 400px;
  height: 527px;
  min-height: 527px;
  overflow: hidden;
  background: #c2c7d6;        /* 画像が読めない時でも box が可視化される */
}
.sp-feature__visual__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 527px;
  object-fit: cover;
}
/* Decorative frame overlay (updated 2026-10-13):
   Figma: 341.487 x 465.814 wrapper at (29, 30), inner 339x464 rotated -0.31deg.
   Inner contains a cropped image (rectangle-overlay.png) + darkening gradient. */
.sp-feature__visual__deco {
  position: absolute;
  left: 29px;
  top: 30px;
  width: 341.487px;
  height: 465.814px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sp-feature__visual__deco__box {
  position: relative;
  width: 339px;
  height: 464px;
  transform: rotate(-0.31deg);
  overflow: hidden;
}
.sp-feature__visual__deco__box > img {
  position: absolute;
  left: -45.05%;
  top: -44.19%;
  width: 191.59%;
  height: 210.09%;
  max-width: none;
}
.sp-feature__visual__deco__gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(102, 102, 102, 0.012) 0%,
    rgba(74, 78, 102, 0.03) 34.615%,
    rgba(40, 32, 70, 0.132) 54.808%,
    rgba(27, 0, 84, 0.2) 82.212%
  );
}

/* Headline "いつもの化粧直しを / 　シミ予防の習慣に。" (updated 2026-10-13)
   Figma: left:214 top:404 w:326 -translate-x-1/2 text-center, Light, tracking -0.96px.
   The 2nd line starts with a full-width space (U+3000) for a slight indent. */
.sp-feature__headline {
  position: absolute;
  top: 404px;
  left: 51px;                      /* center 214 - width/2 (326/2=163) = 51 */
  width: 326px;
  margin: 0;
  color: #fff;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.03em;         /* -0.96px / 32 = -0.03 */
  text-align: center;
  text-shadow: 0 2px 12px rgba(32, 24, 64, 0.4), 0 0 2px rgba(32, 24, 64, 0.25);
  z-index: 2;
}
.sp-feature__headline p { margin: 0; }
/* FB 10/30: feature 見出し内の *1 を標準より 4px 上げる */
.sp-feature__headline .footnote-ref { top: -6px; }
/* FB 10/30: feature 本文 (16px) 内の *1/*2/*3 を標準より 1px 下げる */
.sp-feature__body .footnote-ref { top: -1px; }

/* ---------- feature-body : 400x575 lavender bg, 6 copy paragraphs + 2 marker SVGs ---------- */
.sp-feature__body {
  position: relative;              /* marker 下線を absolute で乗せるため */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 26px;
  width: 400px;
  height: 575px;
  padding: 30px 20px;
  background: #bad3dc;
  box-sizing: border-box;
  overflow: hidden;
  color: #514d75;
  font-size: 16px;
  word-break: break-word;
}

/* 黄色マーカー下線 : 本文のエンファシスフレーズに乗る */
.sp-feature__marker {
  position: absolute;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.sp-feature__marker--2 {           /* 「日中も紫外線から肌を守り、ケアすること」の下 */
  left: 14px;                      /* FB 1019: 下線を文字より長めに (左 6px 延長) */
  top: 152px;
  width: 335px;                    /* FB 1019: 309 → 335 (右 20px 延長) */
  height: 13.6302px;
}
.sp-feature__marker--6 {           /* 「ケアしながら軽やかなメイクへ。」の下 */
  left: 14px;                      /* FB 1019: 下線を文字より長めに (左 6px 延長) */
  top: 467px;
  width: 240px;                    /* FB 1019: 219.4 → 240 (右 15px 延長) */
  height: 9.8px;
}

/* 本文テキストはマーカーの上に出す */
.sp-feature__body > p,
.sp-feature__body > .sp-feature__lines {
  position: relative;
  z-index: 2;
}

.sp-feature__body p { margin: 0; }

.sp-feature__p {
  font-weight: 300;
  line-height: 25px;
}
.sp-feature__p--emphasis {
  font-weight: 500;
}
.sp-feature__p--tracking-tight {
  letter-spacing: -0.07em;              /* -1.12px / 16 ≈ -0.07 */
}
.sp-feature__p--tracking-wide {
  letter-spacing: -0.06em;              /* -0.96px / 16 = -0.06 */
}
.sp-feature__p--tracking-base {
  letter-spacing: -0.05em;              /* -0.8px / 16 = -0.05 */
}
.sp-feature__p .asterisk {
  font-weight: 400;
}

/* Multi-line text blocks (stacked lines with no gap, each p on own line) */
.sp-feature__lines p {
  margin: 0;
  line-height: 1.4;
}