/* ===== Hero — SP 94:2573 (440), PC 53:78 (679.033) ===== */
.p-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 440px;
  overflow: hidden;
}

.p-hero__bg {
  position: absolute;
  inset: 0;
}

.p-hero__bg picture {
  display: block;
  height: 100%;
}

.p-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* user: ưu tiên giữ phần trên của map */
}

.p-hero__copy {
  position: relative;
}

.p-hero__copy img {
  max-width: none;
}

@media (min-width: 1200px) {
  .p-hero {
    height: 679.033px;
  }
}

/* ===== Narrative — SP 94:2590, PC 53:80 ===== */
.p-narrative {
  padding: 64px var(--gutter);
  overflow: hidden;
}

.p-narrative .l-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-narrative__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-narrative__body {
  color: var(--color-body);
  font-size: 15px;
  line-height: 27px;
  text-align: center;
}

/* Company logos — dựng lại ảnh ghép bằng logo riêng; vị trí/kích thước % theo ảnh ghép
   SP 92:621 (328×399, ảnh 1383×1682), PC 53:88 (1200×457, ảnh 2463×938) */
.p-narrative__logos {
  align-self: center;
  width: 328px;
  max-width: calc(100% + 1px);
}

.p-logos {
  position: relative;
  aspect-ratio: 1383 / 1682;
}

.p-logos__item {
  position: absolute;
  top: var(--sy);
  left: var(--sx);
  width: var(--sw);
}

.p-logos__link {
  display: block;
}

.p-logos__item img {
  width: 100%;
  height: auto;
}

/* Hover: opacity 0.8 theo quy ước Button_Primary */
@media (hover: hover) {
  .p-logos__link {
    transition: opacity 0.2s;
  }

  .p-logos__link:hover {
    opacity: 0.8;
  }
}

@media (min-width: 1200px) {
  .p-narrative {
    padding: 60.478px var(--gutter) 106.551px;
  }

  .p-narrative .l-container {
    gap: 0;
  }

  .p-narrative__title {
    padding-top: 59.779px;
    font-size: 32px;
    line-height: 44.8px;
  }

  .p-narrative__body {
    padding-top: 27.822px;
    font-size: 20px;
    font-weight: 350;
    line-height: 36px;
  }

  .p-narrative__logos {
    margin-top: 28.914px;
    padding: 16.072px 0 17.003px;
  }
}

/* 768–1199 (layout SP, chưa có design): dùng bố cục logo PC co theo chiều rộng nội dung */
@media (min-width: 768px) {
  .p-narrative__logos {
    width: 100%;
    max-width: none;
  }

  .p-logos {
    aspect-ratio: 2463 / 938;
  }

  .p-logos__item {
    top: var(--py);
    left: var(--px);
    width: var(--pw);
  }
}

/* ===== Vision — SP 94:2687, PC 53:89 ===== */
.p-vision {
  padding: 64px var(--gutter);
  background: var(--color-cream);
  overflow: hidden;
}

.p-vision .l-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-vision__intro {
  color: var(--color-body);
  font-size: 15px;
  line-height: 27px;
}

.p-vision__intro p + p {
  margin-top: 27px;
}

.p-vision__intro-em {
  font-weight: 500;
}

.p-vision__intro-strong {
  font-weight: 700;
}

.p-vision__arrow {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.p-vision__map {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}

.p-vision__map-title {
  color: var(--color-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-vision__map-window {
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .p-vision {
    padding: 107px var(--gutter) 158.725px;
  }

  .p-vision .l-container {
    gap: 0;
  }

  .p-vision__head {
    text-align: center;
  }

  .p-vision__intro {
    padding-top: 17.542px;
    font-size: 20px;
    font-weight: 350;
    line-height: 36px;
    text-align: center;
  }

  .p-vision__intro p + p {
    margin-top: 36px;
  }

  /* line-height 1: tránh chữ 23px làm cao dòng 36px */
  .p-vision__intro-em,
  .p-vision__intro-strong {
    font-size: 23px;
    line-height: 1;
  }

  .p-vision__cards {
    padding-top: 45.173px;
  }

  .p-vision__arrow {
    padding: 29.674px 0 0;
  }

  .p-vision__map {
    gap: 0;
    padding-top: 111.276px;
  }

  .p-vision__map-title {
    width: 502px;
    height: 68px;
    margin: 0 auto;
    font-size: 35px;
    line-height: 49px;
  }

  .p-vision__map-window {
    height: 400px;
    border-radius: var(--radius-30);
  }
}

/* Vision card — SP 94:2704 / 94:2710 / 94:2760, PC 53:103 / 53:115 / 53:159 */
.p-vision-card {
  --card-gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: 24px;
  border-radius: var(--radius-25);
  background: var(--color-white);
  overflow: hidden;
}

.p-vision-card--2 {
  --card-gap: 24px;
}

.p-vision-card__num {
  color: var(--color-arrow);
  font-size: 44px;
  line-height: 56px;
  text-align: center;
  white-space: nowrap;
}

.p-vision-card__divider {
  display: none;
}

.p-vision-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  width: 100%;
  text-align: center;
}

.p-vision-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.p-vision-card__text {
  color: var(--color-body);
  font-size: 15px;
  line-height: 27px;
}

.p-vision-card--3 .p-vision-card__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-vision-card__lead {
  font-size: 16px;
  line-height: 1.6;
}

.p-vision-card__aspiration {
  line-height: 1.75;
}

.p-em--green {
  color: var(--color-em-green);
}

.p-em--orange {
  color: var(--color-em-orange);
}

.p-em--orange-2 {
  color: var(--color-em-orange-2);
}

.p-em--pink {
  color: var(--color-em-pink);
}

.p-em--blue {
  color: var(--color-em-blue);
}

/* 「遠鉄グループ」: không ngắt giữa từ (R-13) */
.p-em--navy {
  color: var(--color-chart-blue);
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .p-vision-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
    padding: 0 64px 0 87.893px;
    border-radius: var(--radius-30);
  }

  .p-vision-card--1 {
    height: 290px;
  }

  .p-vision-card--2 {
    height: 580px;
    margin-top: 29.674px;
  }

  .p-vision-card--3 {
    height: 266px;
    margin-top: 25.041px;
  }

  .p-vision-card__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 110px;
    font-size: 89px;
    line-height: 124.6px;
  }

  .p-vision-card--1 .p-vision-card__num {
    height: 290px;
  }

  .p-vision-card--2 .p-vision-card__num {
    justify-content: flex-start;
    padding-top: 31px;
  }

  .p-vision-card--3 .p-vision-card__num {
    height: 220px;
  }

  .p-vision-card__divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    background: var(--color-value-heading);
  }

  .p-vision-card--1 .p-vision-card__divider {
    height: 172.067px;
    margin-top: 79.531px;
  }

  .p-vision-card--2 .p-vision-card__divider {
    height: 480.215px;
    margin-top: 47.127px;
  }

  .p-vision-card--3 .p-vision-card__divider {
    height: 155px;
    margin-top: 46px;
  }

  .p-vision-card__content {
    flex: 1 0 0;
    gap: 0;
    min-width: 1px;
    text-align: left;
  }

  .p-vision-card--1 .p-vision-card__content {
    padding-top: 89.784px;
  }

  .p-vision-card--2 .p-vision-card__content {
    padding-top: 71.057px;
  }

  .p-vision-card--3 .p-vision-card__content {
    padding-top: 72.211px;
  }

  /* Figma đặt baseline dòng đầu theo cỡ chữ lớn nhất của dòng đầu, các dòng sau cách đúng 43.4px;
     CSS đặt theo cỡ chữ khối (31px) → dịch cả khối chữ, không đổi layout (đo khớp ảnh Figma).
     Card 01/02: 0.436 × (40 − 31) = 3.92px (0.436 = (ascent − descent) / 2 của Noto Sans JP) */
  .p-vision-card__title {
    position: relative;
    top: 3.92px;
    font-size: 31px;
    line-height: 43.4px;
  }

  .p-vision-card__text {
    padding-top: 12.095px;
    font-size: 20px;
    font-weight: 350;
    line-height: 36px;
  }

  /* Card 03: dòng đầu là chữ 23px (đúng sẵn); +1px đo theo ảnh Figma */
  .p-vision-card--3 .p-vision-card__title {
    display: block;
    top: 1px;
  }

  .p-vision-card__lead {
    display: block;
    font-size: 23px;
    line-height: 43.4px;
  }

  /* 2 dòng dưới card 03: baseline theo dòng đầu 23px thay vì 31px → 0.436 × (23 − 31) = −3.52px */
  .p-vision-card__aspiration {
    position: relative;
    top: -3.52px;
    line-height: 43.4px;
  }

  /* line-height 0: chữ nhấn to không làm dòng cao hơn 43.4px (Figma line-height cố định) */
  .p-em--33,
  .p-em--34,
  .p-em--35,
  .p-em--36,
  .p-em--40 {
    line-height: 0;
  }

  .p-em--33 {
    font-size: 33px;
  }

  .p-em--34 {
    font-size: 34px;
  }

  .p-em--35 {
    font-size: 35px;
  }

  .p-em--36 {
    font-size: 36px;
  }

  .p-em--40 {
    font-size: 40px;
  }
}

/* Values SP — 94:2713 / 94:2733 */
.p-values-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Values PC — 53:122 */
.p-values-pc {
  display: flex;
  align-items: flex-start;
  gap: 29.048px;
  width: 100%;
  max-width: 868.507px;
  margin-top: 42.804px;
  padding-left: 13.553px;
}

.p-values-pc__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-width: 1px;
}

.p-values-pc__category {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 279.332px;
  height: 47.651px;
  padding-top: 4.667px;
  background: var(--color-category-highlight);
}

.p-values-pc__category-title {
  width: 100%;
  margin-bottom: -15.307px;
  color: var(--color-value-heading);
  font-size: 22.405px;
  font-weight: 500;
  line-height: 31.367px;
  text-align: center;
}

.p-values-pc__category img {
  flex-shrink: 0;
  max-width: none;
  margin: -0.871px -0.872px;
}

.p-values-pc__list {
  display: flex;
  flex-direction: column;
  gap: 11.679px;
  width: 100%;
  margin-top: 20.592px;
}

/* ===== Top message — SP 94:2767, PC 53:173 ===== */
.p-message {
  padding: 64px var(--gutter);
  background: var(--color-vision);
}

.p-message__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Giữ tỉ lệ khung SP 94:2768 (327 × 206.68) ở mọi độ rộng < 1200 → không cắt mất mặt */
.p-message__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 206.68;
  object-fit: cover;
}

.p-message__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-message__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.p-message__label {
  color: var(--color-body);
  font-size: 15px;
  font-weight: 350;
  line-height: 21px;
}

.p-message__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.p-message__role {
  color: var(--color-body);
  font-size: 15px;
  line-height: 1.8;
}

.p-message__signature {
  margin-top: 8px;
}

.p-message__signature img {
  width: 217px;
  height: 53.93px;
  object-fit: cover;
}

.p-message__action {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 32px;
}

@media (min-width: 1200px) {
  .p-message {
    padding: 167.507px var(--gutter) 134.308px;
  }

  .p-message__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 34.379px;
  }

  .p-message__photo {
    flex-shrink: 0;
    padding-top: 2.378px;
  }

  .p-message__photo img {
    width: 496.53px;
    height: 313.808px;
  }

  .p-message__content {
    flex-shrink: 0;
    align-items: flex-start;
    width: 260px;
  }

  .p-message__text {
    align-items: stretch;
    gap: 0;
    padding-left: 10.348px;
    text-align: left;
  }

  .p-message__title {
    padding-top: 10.051px;
    font-size: 21px;
    line-height: 35.994px;
  }

  .p-message__role {
    padding-top: 15.123px;
    font-weight: 350;
    line-height: 21px;
  }

  .p-message__signature {
    margin-top: 0;
    padding: 6.64px 0 0 1.287px;
  }

  .p-message__signature img {
    height: 53.927px;
  }

  .p-message__action {
    padding-top: 24.83px;
  }
}

/* ===== Reorganization — SP 94:2778, PC 53:364 ===== */
.p-reorg {
  padding: 64px var(--gutter);
}

.p-reorg .l-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-reorg__intro {
  color: var(--color-body);
  font-size: 15px;
  line-height: 27px;
}

.p-reorg__strong {
  color: var(--color-chart-blue);
  font-weight: 700;
}

.p-reorg__chart img {
  width: 320px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .p-reorg {
    padding: 92.8px var(--gutter) 110.147px;
  }

  .p-reorg .l-container {
    align-items: center;
    gap: 0;
  }

  .p-reorg__intro {
    width: 100%;
    height: 254px;
    padding-top: 28.141px;
    font-size: 20px;
    font-weight: 350;
    line-height: 36px;
    text-align: center;
  }

  .p-reorg__lead {
    font-weight: 500;
  }

  /* line-height 0: giữ mỗi dòng đúng 36px */
  .p-reorg__strong--25 {
    font-size: 25px;
    line-height: 0;
  }

  .p-reorg__strong--23 {
    font-size: 23px;
    line-height: 0;
  }

  /* Baseline Figma theo chữ 25px của dòng đầu (lý thuyết 0.436 × 5 = 2.18px); đo theo ảnh Figma
     khớp nhất ở 3.5px (DemiLight của Figma khác font web 350). Không đổi layout (khung cao cố định) */
  .p-reorg__intro p {
    position: relative;
    top: 3.5px;
  }
}

/* ≥ 768: sơ đồ PC (SVG), co theo chiều rộng nội dung */
@media (min-width: 768px) {
  .p-reorg__chart img {
    width: 1102.96px;
  }
}