/* What is PIKAPIKA? Section — HPP HP
 * Figma node: 102:98 (sec_pikapika), file: hTk2UtIZPusbWScukKNgMV
 * Section: 1440×710px, dark background with bg image
 */

/* =====================
 * Section container
 * Figma: 1440×710px, position relative, overflow hidden
 * Background is Navy/Secondary #112b60 (the outer frame)
 * Inner card (102:102) is #1a2332 with border-radius 40px
 * ===================== */

.pikapika {
  position: relative;
  width: 100%;
  min-height: 710px;

  /* Navy/Secondary — outer section background */
  background-color: #112b60;
}

/* =====================
 * Background image layer
 * Figma node: 102:103 (img/pikapika-bg)
 * 1441×800px, covers full section
 * ===================== */

.pikapika__bg {
  position: absolute;
  /* Figma 102:102: inner card is centered, 1280px wide on very wide viewports;
   * 1300px 以下では 1024px にスケールダウンする（下部のメディアクエリで調整） */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--layout-content-wide); /* 1280px */
  max-width: calc(100% - 40px);
  height: 644px;
  overflow: hidden;
  pointer-events: none;
  border-radius: 40px;
  background-color: #1a2332;
  z-index: 1;
}

/* Figma 102:105: blue layer behind the photo */
.pikapika__bg-blue {
  position: absolute;
  inset: 0;
  background-color: #1e4d8b;
}

/* Figma 102:106: stock photo with multiply blend */
.pikapika__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: multiply;
}

/* =====================
 * Top gradient divider
 * Figma node: 102:99 (gradients)
 * height: 170px, fading from dark navy to transparent (top of section)
 * ===================== */

/* Figma 102:99: curved gradient divider at top of section
 * SVG with blurred curve, rotated 180deg to fade from white into navy */
.pikapika__gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
  z-index: 0;
  transform: rotate(180deg);
  overflow: visible;
}

.pikapika__gradient-top img {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* =====================
 * Main content frame
 * Figma node: 102:102 (pikapika frame)
 * x:80, y:0, w:1280, h:644
 * Figma node: 102:107 (Frame 1000004590)
 * x:100 (relative within 102:102), y:80, w:1080, h:484
 * Absolute position from section left: 80 + 100 = 180px
 * ===================== */

/* Figma 102:107: inner content is 1080px wide, centered within the 1280px card
 * Vertically/horizontally centered; flex column with gap 80px */
.pikapika__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: var(--layout-content-width); /* 1024px */
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
}

/* =====================
 * Section title block
 * Figma node: 102:108 (title)
 * English + Japanese stacked title
 * Title container height: EN 96px (lh:1) + JP 40px×1.5=60px, overlapping at ~40px from EN bottom
 * Effective container height: 96px (EN sits at top, JP anchored inside)
 * ===================== */

/* Figma 102:108: title uses CSS Grid to overlay EN and JA text in same cell */
.pikapika__title {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  white-space: nowrap;
  text-align: center;
}

/* Large English title: "What is "PIKA PIKA"?"
 * Figma 102:109: Cormorant Garamond Medium, 96px, lh:1.4, ls:1.92px
 * color: #f4f9ff (blue/100), opacity: 0.20
 */
.pikapika__title-en {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1.4;
  letter-spacing: 1.92px;
  color: #f4f9ff;
  opacity: 0.20;
  margin: 0;
}

/* Japanese subtitle: ""PIKA PIKA"とは？"
 * Figma 102:110: Shippori Mincho SemiBold, color: white
 * "PIKA PIKA" portion: 48px, ls: 9.6px
 * "とは？" portion: 40px, ls: 8px
 * Offset: margin-left 190px, margin-top 54px (overlapping EN text)
 */
.pikapika__title-ja {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: 9.6px;
  color: #ffffff;
  font-feature-settings: 'palt' 1;
  margin: 54px 0 0 190px;
}

/* "とは？" part is slightly smaller */
.pikapika__title-ja .pikapika__title-ja-suffix {
  font-size: 40px;
  letter-spacing: 8px;
}

/* =====================
 * Two-column body
 * Figma node: 102:111 (Frame 1000004541)
 * y:214 (from content frame top), w:1080, h:266
 * Left col: w:560 | Right col: x:598, w:482, h:248
 * Gap: 598 - 560 = 38px
 * ===================== */

/* Figma 102:111: body is flex, justify-between, align-items center, full width (1080px) */
.pikapika__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* =====================
 * Left column: text content
 * Figma node: 102:112
 * w:560
 * ===================== */

/* Figma 102:112: left text column。Figma 上は 560px だが、PC コンテンツ幅
 * (1024px - padding 48 = 976px) に収まるよう 520px に縮め、figure-col との
 * 合計が 976px 以内になるようにする。 */
.pikapika__text-col {
  width: 520px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Keyword line: "世界の人々の人生が" + highlight "光り輝く" + "状態"
 * Figma 102:113: Shippori Mincho SemiBold, 28px, lh:1.5, ls:4.2px
 * Base text is white; "光り輝く" uses gold gradient
 */
.pikapika__keyword {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 4.2px;
  color: #ffffff;
  font-feature-settings: 'palt' 1;
  margin: 0;
}

.pikapika__keyword-line {
  margin: 0;
}

/* Highlighted "光り輝く"
 * Figma 102:115: gold gradient text (156.13deg, #f3e3b6 → #d6bb89)
 */
.pikapika__keyword-highlight {
  background: linear-gradient(156.13deg, #f3e3b6 0.28%, #d6bb89 99.72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Description paragraph
 * Figma 102:117: Noto Sans JP Regular, 16px, lh:2, color: white
 * "周囲にも良い影響を与えるような生き方" is Noto Sans JP Bold
 */
.pikapika__description {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 2;
  color: #ffffff;
  margin: 0;
}

.pikapika__description p {
  margin: 0;
}

.pikapika__description strong {
  font-family: var(--font-jp-sans);
  font-weight: 700;
}

/* =====================
 * Right column: figure/diagram
 * Figma node: 102:118
 * x:598, w:482, h:248
 * Contains SVG template shape + two cards
 * ===================== */

/* Figma 102:118: figure area 482×248px。PC コンテンツ幅 (976px) に収めるため
 * 420×216 に縮小し text-col との合計を 940px 以内に収める。 */
.pikapika__figure-col {
  width: 420px;
  height: 216px;
  flex-shrink: 0;
}

/* Figure image (the circular arrows diagram with baked-in labels) */
.pikapika__figure-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 段階レスポンシブ: 1279px 以下では PIKAPIKA カードも 1024px に揃える
 * (responsive.css 側の 1024–1279px ブロックと境界を一致させる) */
@media (max-width: 1279px) {
  .pikapika__bg {
    width: var(--layout-content-width); /* 1024px */
  }
}