/* SIMIUS UV FACE POWDER — SP howto section (webdesign comp)
   Figma: sp-howto (nodeId=82:16) in powder-_-lp
   Structure : 400 x ~2200, 3 STEP (整える / 仕込む / 守る＋仕上げ) + recommend carousel */

.sp-howto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 400px;
  padding: 28px 0 60px;                /* FB 1019: Figma 仕様通り 28px */
  background: #bad3dc;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: #514d75;
}

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

/* --- white arch background (behind all 3 steps) --- */
.sp-howto__arch {
  position: absolute;
  left: 25px;
  top: 66px;                        /* Figma 92:32: y=66 */
  bottom: 35px;                     /* 下端は親の底から 35px (height より優先) */
  width: 350px;
  background: #fff;
  border-radius: 190px 190px 11px 11px;
  z-index: 0;
}

/* ---------- header : "Howto" cursive + subtitle pill ---------- */
.sp-howto__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 101px;                       /* Figma 82:17: h=101 */
  padding: 6.35px 25px 0;              /* Figma 82:18: decoration y=6.35 */
  box-sizing: border-box;
}

/* "Howto" decorative cursive text — SVG textPath で arch 上端のカーブに沿わせる */
.sp-howto__howto {
  display: block;
  width: 161.5px;                      /* Illustrator 書き出し SVG 自然幅 */
  height: 56.16px;                     /* 同 自然高さ */
  margin: 0 auto;
}
.sp-howto__howto img { display: block; width: 100%; height: 100%; }

.sp-howto__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 336px;
  height: 26px;
  background: #524d75;
  border-radius: 6px;
  color: #fff;
  font-weight: 100;                /* Figma 更新: Light (300) → Thin (100) */
  font-size: 12px;                 /* FB 10/29: 16 → 12 (-4px) */
  line-height: 1;
  text-align: center;
}

/* ---------- step blocks (shared) ---------- */
.sp-howto__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  padding: 7px 25px 10px;
  box-sizing: border-box;
}
.sp-howto__step--1 { gap: 19px; padding-top: 24px; }  /* Figma: header→step1 間 40px (sp-howto gap 16 + 24) */
.sp-howto__step--2,
.sp-howto__step--3 { gap: 24px; padding-top: 0; }

/* step header : badge (top-left, extends out of arch) + hero portrait */
.step__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.step__badge {
  display: block;
  align-self: flex-start;
  margin-left: -25px;                /* step の padding-left 分だけ外に出して arch 左端から突き出す */
  width: 112px;
  height: 45px;
  margin-bottom: -45px;              /* 以降の step-image に重ねる */
  z-index: 2;
}
.step__image {
  width: 144px;
  height: 199px;
  object-fit: cover;
}
.step--2 .step__image,
.step--3 .step__image { width: 126px; height: 202px; }

/* step text : heading + body */
.step__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}
.step__text h3 {
  margin: 0;
  font-weight: 300;                /* Figma 更新: Light (was Regular) */
  font-size: 26px;
  line-height: 1;
  color: #333359;
}
.step__text p {
  margin: 0;
  font-weight: 100;                /* Figma 更新: Thin (was Light) */
  font-size: 15px;
  line-height: 1.5;
  color: #4d4d73;
  letter-spacing: -0.03em;
}
.step__text--step2 p,
.step__text--step3 p {
  width: 282px;
  color: #333359;                  /* FB 11/04 山田: 見出しと同色 (黒→#333359) */
  font-size: 16px;
  font-weight: 100;                /* Thin */
  letter-spacing: -0.1em;
  line-height: 1.3;
  text-align: left;
}
.step__text--step3 h3 { color: #514d75; font-size: 24px; }
.step__text--step3 p { color: #333359; font-size: 14px; letter-spacing: -0.06em; }  /* FB 11/04 山田: 黒→#333359 */
/* FB 10/30: この箇所の *1/*2/*3 は 2px 下げる (他箇所より控えめな superscript 位置) */
.step__text--step3 .footnote-ref { top: 0; }

/* ---------- Recommend Card (330 x 408) ----------
   Figma 厳守: card-bg-chamfer.svg が角のシェイプを担う。 */
.recommend-card {
  position: relative;
  width: 330px;
  height: 408px;
  background:
    url('assets-howto/card-bg-chamfer.svg') no-repeat center / 330px 408px,
    transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  padding: 3px 0 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.recommend-card__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}
.recommend-card__badge-wrap {
  display: flex;
  width: 100%;
  padding: 10px 13px;
  box-sizing: border-box;
}
.recommend-card__badge {
  width: 112.893px;
  height: 21.534px;
}
.recommend-card__title {
  width: 258px;
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: left;                 /* Figma 仕様: 258 幅ブロック内で左揃え */
  color: #514d75;
}
.recommend-card__title p { margin: 0; }
.recommend-card__title p:first-child { letter-spacing: -0.01em; }
.recommend-card__title p:last-child { letter-spacing: -0.06em; }

.recommend-card__product {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  width: 330px;
  height: 210px;                    /* Figma 厳守 */
  padding: 0 43px 0 22px;
  box-sizing: border-box;
}
.recommend-card__image {
  width: 243px;
  height: 243px;
  margin-right: -64px;              /* Figma 厳守 */
  object-fit: contain;
  flex-shrink: 0;
}
.recommend-card__desc {
  display: flex;
  flex-direction: column;
  gap: 6px;                         /* 本文と meta のあいだを 2px 下げ (4 → 6) */
  width: 155px;
  height: 191px;
  flex-shrink: 0;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.recommend-card__desc > p {
  line-height: 1.4;                 /* 1.47 → 1.4 */
}
.recommend-card__desc > p {
  margin: 0;
  font-weight: 300;
  line-height: 1.47;
  color: #514d75;                   /* FB 11/02: 商品名と同色に揃える (#000 → #514d75) */
  letter-spacing: -0.05em;
}
.recommend-card__meta {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #514d75;
  line-height: 1.15;                /* 1.3 → 1.15 で詰める */
  letter-spacing: -0.03em;
}
.recommend-card__meta p { margin: 0; }

/* "詳細はこちら →" button
   Figma: w-200 h-53, pl-49 pr-16, inner gap-32, text w-96, arrow w-7.41 */
.recommend-card__cta {
  position: relative;
  width: 200px;
  height: 53px;
  display: flex;
  align-items: center;
  padding: 0 16px 0 49px;
  background: #727191;                 /* FB 1027 Figma 207:290 default */
  border-radius: 200px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 100;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 #514d75, 0 6px 8px rgba(60, 55, 100, 0.25);  /* FB 1027: 通常時も hover と同じ 3px の濃い段差 */
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.recommend-card__cta > span {
  display: inline-block;
  width: 96px;
  white-space: nowrap;
}
.recommend-card__cta__arrow {
  width: 7.41px;
  height: 12px;
  margin-left: 32px;
  flex-shrink: 0;
}
.recommend-card__cta > span { white-space: nowrap; }
.recommend-card__cta:hover {
  background: #c7c4d5;                 /* FB 1027 Figma 207:290 hover */
  transform: translateY(-1px);
}
.recommend-card__cta:active {
  background: #4a4668;                 /* FB 1019 BUTTON-2 active: 最も暗い紫 */
  box-shadow: 0 2px 6px rgba(60, 55, 100, 0.3);
  transform: translateY(1px);
}
.recommend-card__cta__arrow {
  width: 7.41px;
  height: 12px;
}

/* ---------- Carousel (3 cards horizontal scroll) ---------- */
.carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 400px;
}
/* Outer viewport = 330 wide (one card), centered in 400 parent */
.carousel__viewport {
  display: flex;
  gap: 16px;
  width: 330px;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport > .recommend-card {
  flex: 0 0 330px;
  scroll-snap-align: start;
}
.carousel__nav {
  position: absolute;
  top: 194.83px;
  width: 16px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 3;
}
.carousel__nav--prev { left: 45px; }
.carousel__nav--next { left: 346.38px; }
.carousel__nav img { width: 9px; height: 18px; }
.carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px;
  height: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #bad3dc;
  padding: 0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.carousel__dot:hover { border-color: #9bbbc5; }
.carousel__dot.is-active {
  background: #bad3dc;
  border-color: #bad3dc;
}

/* ---------- Carousel-aware image positioning for products 2/3/4 ----------
   Figma uses specific inset/scale per card image inside a 243x243 "slot". */
.recommend-card--essence .recommend-card__image--inner {
  position: absolute;
  left: 34.22%; top: 5.14%;
  width: 31.21%; height: 90.73%;
  object-fit: contain;
}
.recommend-card--pink .recommend-card__image--inner {
  position: absolute;
  left: 39.64%; top: 7.3%;
  width: 21.68%; height: 88.22%;
  object-fit: contain;
}
/* pink カードの product tube を一回り小さく */
.recommend-card--pink .recommend-card__image {
  transform: scale(0.86);
  transform-origin: center;
}
.recommend-card--lavender .recommend-card__image--inner {
  position: absolute;
  left: 39.01%; top: 6.57%;
  width: 21.9%; height: 89.25%;
  object-fit: contain;
}
/* lavender カードの product tube も pink と揃えて一回り小さく */
.recommend-card--lavender .recommend-card__image {
  transform: scale(0.86);
  transform-origin: center;
}
.recommend-card__image--slot {
  position: relative;
  width: 243px;
  height: 243px;
  margin-right: -64px;
  overflow: hidden;
}

/* --- Step 3 (守る＋仕上げ) has no card, text only --- */
.sp-howto__step--3 .step__text p { height: auto; }