/* 一人ひとりの輝き (Highlight) Section — HPP HP
 * Figma node: 102:137 (sec_一人ひとりの輝き), file: hTk2UtIZPusbWScukKNgMV
 * Section: 1441×950px, dark background with bg image
 */

/* =====================
 * Section container
 * Figma: 1441×950px, bg: #112B60
 * ===================== */

.highlight {
  position: relative;
  width: 100%;
  min-height: 950px;
  overflow: hidden;

  /* Figma: Navy/Secondary #112B60 */
  background-color: #112b60;
}

/* =====================
 * Background image layer
 * Figma node: 102:138 (bg-video)
 * 1710×963px, opacity: 0.30, centered
 * ===================== */

.highlight__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.highlight__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Figma: opacity 0.30 on the bg-video layer */
  opacity: 0.3;
}

/* =====================
 * Top gradient overlay (rotated 180deg in Figma)
 * Figma node: 102:232 (gradients-navy)
 * Positioned at TOP of section, 1441×170px, rotated 180deg
 * Fades from navy to transparent (top to bottom)
 * ===================== */

.highlight__gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 170px;
  /* Rotated 180deg = gradient going from navy at top to transparent at bottom */
  background: linear-gradient(
    to bottom,
    #112b60 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* =====================
 * Main content frame
 * Figma node: 102:139 (contents)
 * Centered, w:1079, flex-col, gap:48px
 * ===================== */

.highlight__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--layout-content-width); /* 1024px */
  margin: 0 auto;
  padding: 160px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px; /* Figma: gap-[48px] between title, steps, bottom-text */
}

/* =====================
 * Title block
 * Figma node: 102:140 (title)
 * Flex col, gap:20px, centered
 * ===================== */

.highlight__title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Figma: gap-[20px] between heading and subtitle */
}

/* Main heading: "一人ひとりの輝きが、世界を変える"
 * Figma: Shippori Mincho SemiBold, 40px, line-height 1.5,
 *        letter-spacing 6px, gold gradient text, palt
 */
.highlight__title-main {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 40px; /* Figma: text-[40px] */
  line-height: 1.5;
  letter-spacing: 6px; /* Figma: tracking-[6px] */
  font-feature-settings: 'palt' 1;
  margin: 0;

  /* Figma: gold gradient text — linear-gradient(174.51deg, #f3e3b6 0.28%, #d6bb89 99.72%) */
  background: linear-gradient(174.51deg, #f3e3b6 0.28%, #d6bb89 99.72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtitle: "個人の「PIKAPIKA」は、周囲へと広がり、やがて世界を照らします。"
 * Figma: Noto Sans JP Regular, 18px, line-height 1.75,
 *        letter-spacing 0.9px, color #F8FAFC
 */
.highlight__title-sub {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-regular);
  font-size: 18px; /* Figma: text-[18px] */
  line-height: 1.75; /* Figma: leading-[1.75] */
  letter-spacing: 0.9px; /* Figma: tracking-[0.9px] */
  color: #f8fafc; /* Figma: White/Pure */
  margin: 0;
}

/* Mobile-only line break (hidden on PC/tablet) */
.highlight__br-mobile {
  display: none;
}

/* =====================
 * 4-step flow image (PC: horizontal, SP: vertical via <picture>)
 * ===================== */

.highlight__steps {
  display: block;
  width: 100%;
}

.highlight__steps img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================
 * Bottom centered paragraph
 * Figma node: 102:231
 * Noto Sans JP Regular, 16px, line-height 1.75, white, text-center
 * ===================== */

.highlight__bottom-text {
  text-align: center;
}

.highlight__bottom-text p {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-regular);
  font-size: 16px; /* Figma: text-[16px] */
  line-height: 1.75; /* Figma: leading-[1.75] */
  color: #ffffff; /* Figma: text-white */
  margin: 0;
}