/* SIMIUS UV FACE POWDER — SP FAQ section (webdesign comp)
   Figma: sp-faq (nodeId=116:113) in powder-_-lp
   Structure : 400 wide white bg, "FAQ" title + 4 Q/A items */

.sp-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 400px;
  padding: 24px 32px 20px;             /* FB 10/29: footnote 下に少し息を入れる (12→20px) */
  background: #fff;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: #524d75;
}

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

/* --- Title "FAQ" --- */
.sp-faq__title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: #524d75;
  letter-spacing: 0.1em;             /* 3.6px / 36 = 0.1 */
  white-space: nowrap;
}

/* --- FAQ list --- */
.sp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-faq__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 13px 0;
  border-radius: 12px;
  filter: drop-shadow(0 4px 6px rgba(82, 77, 117, 0.06));
}
.sp-faq__row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.sp-faq__row--q { gap: 8px; }
.sp-faq__row--a { gap: 19px; }

.sp-faq__badge {
  flex-shrink: 0;
}
.sp-faq__badge--q { width: 30.578px; height: 24.639px; }
.sp-faq__badge--a { width: 20.898px; height: 20.82px; }

.sp-faq__q-text,
.sp-faq__a-text {
  margin: 0;
  width: 286px;
  font-size: 16px;
  line-height: 1.15;
}
.sp-faq__q-text {
  color: #524d75;
  font-weight: 400;                   /* FB 1019: Q は Regular */
  letter-spacing: -0.05em;
}
.sp-faq__a-text {
  color: #403b66;
  font-weight: 300;                   /* FB 1019: A は Light */
  letter-spacing: -0.04em;
}
.sp-faq__a-text--tight {
  letter-spacing: -0.05em;           /* -0.8px / 16 */
}

/* --- Footnote (薬機法まわりの表示順注釈)
   FB 10/29 : footnote の下端から footer までちょうど 12px になるよう .sp-faq の
   padding-bottom を 12px に固定。FAQ list との距離は margin-top で確保。 --- */
.sp-faq__footnote {
  align-self: flex-start;
  margin: 40px 0 0 3px;              /* FB 10/29 : 端 (LP 左端) から 35px → .sp-faq padding 32 + 3 */
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  color: #524d75;
  letter-spacing: 0;
}

.sp-faq__footnote .nowrap {
  white-space: nowrap;
}