/* SIMIUS UV FACE POWDER — SP concept section (webdesign comp)
   Figma: sp_concept 1 (nodeId=9:263) in powder-_-lp
   Base: 400 x 1225 (sp concept) */

.concept {
  position: relative;
  width: 400px;
  height: 1225px;
  background: #bad3dc;
  overflow: hidden;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: #514d75;
  isolation: isolate;        /* contain blend-modes to this section */
}

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

/* ---------- Scenery layer : lavender oval + "uv facepowder" cursive baked ---------- */
/* Figma consolidated the per-letter rotated cursive and the pale oval into a single
   SVG (ec1d7.svg, 710x1182.8). Positioned at (-155, 17) relative to the frame,
   clipped by .concept { overflow: hidden }. */
.concept__scenery {
  position: absolute;
  left: -155px;
  top: 17px;
  width: 710px;
  height: 1182.8px;
  z-index: 0;
}

/* FB 1019: uv facepowder 筆記体を繋がった画像に差し替え、楕円の底ラインに沿わせる */
.concept__cursive {
  position: absolute;
  left: 25px;
  top: 1120px;                         /* 1070 → 1120 で楕円下端に寄せる */
  width: 350px;
  height: 87px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* 楕円のカーブに沿って緩やかに湾曲させる (perspective + rotateX) */
  transform: perspective(900px) rotateX(28deg);
  transform-origin: 50% 100%;
}
/* ---------- Title "Concept" ---------- */

.concept__title {
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}

/* ---------- Headline ---------- */

.concept__headline {
  position: absolute;
  left: 0;
  top: 56px;
  width: 100%;
  text-align: center;
  font-weight: 100;                 /* FB 10/29: 300 → 100 (Thin) */
  color: #514d75;
}
.concept__headline p {
  margin: 0;
  font-size: 24px;                  /* FB 10/29: 28 → 24 (-4pt) */
  line-height: 1.35;
  letter-spacing: -0.08em;
}
.concept__headline .ast {
  font-size: 18px;
  vertical-align: 2px;
  color: #514d75;
}
/* FB 10/30: concept 見出し (24px) 内の *1 を標準より 2px 上に */
.concept__headline .footnote-ref { top: -4px; }
/* FB 10/30: concept 本文 (16px) 内の *1 を標準より 1px 下げる */
.concept__body .footnote-ref { top: -1px; }

/* ---------- 3 callout bubbles ---------- */

.concept__bubbles {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 370px;
}
.concept__bubble {
  position: relative;
  width: 369.42px;
  height: 90px;
  margin-bottom: 13px;                 /* FB 1027: Figma 207:185 の gap: 13 に合わせる */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.concept__bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.concept__bubble:nth-child(1).is-visible { transition-delay: 0s; }
.concept__bubble:nth-child(2).is-visible { transition-delay: 0.18s; }
.concept__bubble:nth-child(3).is-visible { transition-delay: 0.36s; }

/* FB 1019: 新 bubble SVG は内部で opacity/multiply 処理済みなので CSS 側では無指定 */
.concept__bubble > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.concept__bubble-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
/* FB 1019: テキストを吹き出しの rectangle 部分 (tail を除いた本体) の中央に揃える
   bubble-1/3 は tail が右 (rectangle 0-350) → inset-right 19.42px
   bubble-2 は tail が左 (rectangle 19.42-369.42) → inset-left 19.42px */
.concept__bubble:nth-child(1) .concept__bubble-text,
.concept__bubble:nth-child(3) .concept__bubble-text {
  right: 19.42px;
}
.concept__bubble:nth-child(2) .concept__bubble-text {
  left: 19.42px;
}
.concept__bubble-text {
  font-weight: 100;
  font-size: 19.2px;
  letter-spacing: -0.06em;
  line-height: 1.35;
}
.concept__bubble-text p { margin: 0; }
.concept__bubble-text .em {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.06em;
}

/* ---------- Body copy ---------- */

.concept__body {
  position: absolute;
  left: 0;
  top: 557px;
  width: 100%;
  text-align: center;
  color: #514d75;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.06em;
}
.concept__body p { margin: 0; }
.concept__body p + p { margin-top: 0; }
.concept__body .gap-before { margin-top: 16px; }   /* Figma: 段落間に広めの余白 */

/* ---------- Compact + 3 circle bubbles (lower portion) ---------- */

/* Center-upper circle : "光反射で シミ・毛穴・くすみを 自然にカバー" */
.concept__circle--top {
  position: absolute;
  left: 131px;
  top: 843px;
  width: 140px;
  height: 140px;
  z-index: 1;
}

/* Left circle : SPF50+ PA+++ */
.concept__circle--left {
  position: absolute;
  left: 11px;
  top: 965px;
  width: 140px;
  height: 140px;
  z-index: 1;
}

/* Right circle : シミケア成分配合 */
.concept__circle--right {
  position: absolute;
  left: 252px;
  top: 965px;
  width: 140px;
  height: 140px;
  z-index: 1;
}

/* Compact photo center-bottom, over the circle layer */
.concept__product {
  position: absolute;
  left: 136px;
  top: 961px;
  width: 136px;
  height: 146px;
  z-index: 2;
}

/* Benefit labels : each line positioned individually from Figma inset coords */
.concept__t {
  position: absolute;
  margin: 0;
  color: #3f474a;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}

/* ----- Top circle : 光反射で / シミ・毛穴・くすみを / 自然にカバー ----- */
/* Figma frame 9:386 at (138, 876) size 131x69. Inner lines absolutely positioned. */
.concept__t--top-l1 {   /* 光反射で */
  left: 168px;    /* 138 + 30 */
  top: 876px;     /* 876 + 0 */
  font-weight: 100;
  font-size: 16px;
  letter-spacing: -0.04em;
}
.concept__t--top-l2 {   /* シミ・毛穴・くすみを自然にカバー (<wbr> で を の前に改行) */
  left: 138px;
  top: 899px;     /* 876 + 23 */
  width: 128px;   /* Figma w=128、を の前で wrap */
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.14em;
  line-height: 1.5;
  white-space: normal;    /* wbr を効かせるため */
}

/* ----- Left circle : 高UVカット / SPF50+ / PA+++ ----- */
/* Left bubble-circle at (11, 965) size 140x140 */
.concept__t--left-l1 {  /* 高UVカット */
  left: 50px;
  top: 997px;
  font-weight: 100;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.concept__t--left-l2 {  /* SPF50+ (main) */
  left: 36px;
  top: 1017px;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.concept__t--left-l3 {  /* PA+++ */
  left: 50px;
  top: 1050px;
  font-weight: 300;
  font-size: 20px;
}

/* ----- Right circle : シミケア成分 / 配合 / プラセンタエキス / グリチルリチン酸 / ジカリウム -----
   FB 10/30: Figma 更新 (nodeId=240:688) の値に合わせる。
   container at left:278 top:997 width:88 items-center → 各行の中心は x=322px (円中心) */
.concept__t--right-l1 {  /* シミケア成分 */
  left: 322px;
  top: 997px;
  transform: translateX(-50%);
  font-weight: 300;
  font-size: 16px;              /* Figma: 16px Light */
  letter-spacing: -0.1em;       /* Figma: -1.6px / 16 */
  line-height: 1.18;
}
.concept__t--right-l2 {  /* 配合 */
  left: 322px;
  top: 1016px;                  /* l1 + 16*1.18 ≈ 19px */
  transform: translateX(-50%);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.1em;
  line-height: 1.18;
}
.concept__t--right-ingredients {
  position: absolute;
  left: 322px;
  top: 1038px;                  /* Figma: container top 997 + 9:311 高さ (37.76px) + gap 3 */
  transform: translateX(-50%);
  width: 133px;
  text-align: center;
  font-weight: 100;
  font-size: 12px;
  line-height: 1.25;
  color: #3f474a;
  z-index: 3;
  margin: 0;
}
.concept__t--right-ingredients p {
  margin: 0;
  white-space: nowrap;
}
.concept__t--right-ingredients .l1 { letter-spacing: -0.13em; }
.concept__t--right-ingredients .l2 { letter-spacing: -0.17em; }
.concept__t--right-ingredients .l3 { letter-spacing: -0.19em; }

/* FB 10/30: 右円内の注釈 ＊X は中心計算から除外する (width:0 で layout に貢献しない) */
.concept__t--right-l1 .footnote-ref,
.concept__t--right-l2 .footnote-ref,
.concept__t--right-ingredients .footnote-ref {
  width: 0;
  white-space: nowrap;
  margin: 0;                     /* 元 margin 0 1px の 1px も除去 */
}

/* NOTE: Previously the "uv facepowder" cursive and the pale oval were separate
   assets rendered as .concept__oval + .concept__cursive. Figma consolidated them
   into a single scenery SVG (.concept__scenery), so those rules are removed. */