/* ==========================================================================
   p-top — Figma: PC/01_Top (24381:5799) / SP/01_Top (24381:5933)
   ========================================================================== */

/* ---- sec-hero ---- */
.p-top-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-120) var(--layout-gutter);

  /* Figma: 白 → purple/10（29.327% 地点）の横グラデーション。トークンの色で再現 */
  background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-purple-10) 29.327%);
}

.p-top-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--layout-container-max);
  margin-inline: auto;
}

.p-top-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  width: 500px; /* Figma 固有寸法 */
  max-width: 100%;
}

.p-top-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.p-top-hero__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-top-hero__eyebrow {
  height: 20px; /* Figma 固有寸法: テキストボックス高さ（行間 30px ははみ出す）。見出しとの距離を合わせる（静的HTML と同じ） */
  color: var(--color-text-brand);
}

.p-top-hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Figma: hero-mv-1 / hero-mv-2（白地の枠 + Box-Dropshadow。画像は枠いっぱいに切り抜き） */
.p-top-hero__screen {
  position: absolute;
  box-sizing: border-box;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-box);
  object-fit: cover;
}

.p-top-hero__screen--back {
  top: 218px;  /* Figma 固有寸法（1440px 幅での配置） */
  left: calc(50% + 180px); /* 同上 */
  width: 580px; /* 同上 */
  height: 335px; /* 同上 */
}

.p-top-hero__screen--front {
  /* Figma 固有寸法: セクション上端から 82px（1440px 幅での配置）。
     手前の画像は p-top-hero__inner（セクションの上余白 120px の下から始まる）が基準のため、その分を引く */
  top: calc(82px - var(--space-120));
  left: calc(50% + 36px); /* 同上 */
  width: 626px; /* 同上: 枠 626px のうち画像は左の 580px、右 46px は白地 */
  height: 362px; /* 同上 */
  padding-right: 46px; /* 同上 */
  object-position: left bottom;
}

@media (min-width: 1024px) and (max-width: 1339px) {

  /* Tablet: 画面内に収まるよう縮小（実装判断）。縦横比は PC の枠と同じ */
  .p-top-hero__screen--front {
    width: 45vw;
    height: calc(45vw * 362 / 626);
  }

  .p-top-hero__screen--back {
    width: 42vw;
    height: calc(42vw * 335 / 580);
  }
}

@media (max-width: 1023px) {

  .p-top-hero {
    padding: var(--space-64) var(--space-16);
  }

  .p-top-hero__inner {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .p-top-hero__copy {
    gap: var(--space-24);
    width: 100%;
  }

  .p-top-hero__text {
    gap: var(--space-16);
  }

  .p-top-hero__eyebrow {
    font-size: 0.875rem; /* SP: renewal/JP/Label/14/Bold（tokens.css .t-jp-label-14-bold） */
    line-height: calc(20 / 14);
  }

  .p-top-hero__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（tokens.css .t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .p-top-hero__lead {
    font-size: 1rem; /* SP: renewal/JP/16/Regular（tokens.css .t-jp-16-regular） */
    line-height: calc(28 / 16);
  }

  /* SP: Figma の SP は旧デザインのため、PC の枠・シャドウ・縦横比を SP の幅に合わせて当てる（実装判断） */
  .p-top-hero__screen--front {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    width: 300px; /* Figma 固有寸法（SP） */
    height: calc(300px * 362 / 626);
    padding-right: calc(300px * 46 / 626); /* PC の右 46px の白地を同じ比率で */
  }

  .p-top-hero__screen--back {
    /* 手前の画像（上端 444px）から PC と同じ比率だけ下げる。シャドウがセクション下端で切れない位置 */
    top: 510px;
    left: 166px; /* Figma 固有寸法（SP・セクション左端から） */
    width: 277px; /* 同上 */
    height: calc(277px * 335 / 580);
  }
}

/* ---- sec-achievements（ロゴの横スクロール + 東証バナー） ---- */
.p-top-achievements {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: var(--space-48);
  background-color: var(--color-purple-400); /* semantic に該当なし（Figma: purple/400） */
}

.p-top-achievements__logos {
  overflow: hidden;
}

.p-top-achievements__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  animation: p-top-marquee 60s linear infinite;
}

.p-top-achievements__logos:hover .p-top-achievements__track,
.p-top-achievements__logos:focus-within .p-top-achievements__track {
  animation-play-state: paused;
}

.p-top-achievements__list {
  display: flex;
  gap: var(--space-16);
}

/* ロゴの枠（白地）。ロゴは枠の中央に、--logo-scale（企業ロゴフィールドの「ロゴの大きさ」）の割合まで広げる */
.p-top-achievements__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 200px;  /* Figma 固有寸法 */
  height: 67px;
  background-color: var(--color-bg-base);
}

/* リンク付きのロゴ（企業ロゴフィールドの「リンク先 URL」） */
.p-top-achievements__item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.p-top-achievements__logo-image {
  width: auto;
  height: auto;
  max-width: calc(100% * var(--logo-scale, 1));
  max-height: calc(100% * var(--logo-scale, 1));
  object-fit: contain;
}

.p-top-achievements__banner {
  width: 100%;
  max-width: calc(var(--layout-container-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

@keyframes p-top-marquee {

  from { transform: translateX(0); }

  to   { transform: translateX(calc(-50% - var(--space-8))); } /* 2 セット目の先頭まで（gap の半分を含む） */
}

@media (prefers-reduced-motion: reduce) {

  .p-top-achievements__logos {
    overflow-x: auto;
  }

  .p-top-achievements__track {
    animation: none;
  }
}

@media (max-width: 1023px) {

  .p-top-achievements {
    gap: var(--space-16);
    padding-block: var(--space-32);
  }

  .p-top-achievements__logos {
    padding-left: var(--space-16);
  }

  .p-top-achievements__banner {
    padding-inline: var(--space-16);
  }
}

/* ---- sec-services ---- */
.p-top-services__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

@media (max-width: 1023px) {

  .p-top-services__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- sec-experts ---- */
.p-top-experts__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  height: 100%;
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-base);
  box-shadow: var(--shadow-box);
  text-align: center;
}

.p-top-experts__photo {
  width: 200px; /* 画像寸法（Figma） */
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.p-top-experts__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-top-experts__bio {
  color: var(--color-text-muted);
}