/* sections/about.css — トップページの About
   Figma: p-about (node 1180:8580) */

.p-about {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-120);
  padding-bottom: var(--space-80);
  border-start-start-radius: var(--radius-2xl); /* Figma: 左上のみ120px */
  background: var(--color-tertiary-20);
  /* Figma: p-mv(800px) に対し p-about は y680 から始まる ＝ 120px 重なる。
     左上の角丸ノッチから MV の写真が覗く。上パディング120pxと相殺され、
     コンテンツは MV 下端ちょうどから始まる。 */
  margin-top: calc(-1 * var(--space-120));
}

/* 背景装飾のロゴ。右にはみ出す（横方向は html の overflow-x: clip で切れる）*/
.p-about__deco {
  position: absolute;
  inset: 11.05% -6.18% 49.45% 41.18%;
  pointer-events: none;
}

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

.p-about__inner {
  position: relative; /* 装飾ロゴより前面 */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-120);
  align-items: center;
}

.p-about__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-64);
  align-items: flex-start;
  width: 40rem; /* Figma: 640px */
  max-width: 100%;
}

.p-about__lead {
  width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-about__text {
  width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  text-align: justify;
}

/* --- アーチ型の写真 ------------------------------------------------------ */
.p-about__visual {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* 形状はFigmaの書き出しベクター（node 1180:8593）のパス実測値から起こしている：
     上部＝左右480pxの弧（縦半径は左483.728 / 右480.003）、下角＝56.7678px。
   マスクを画像に焼き込まず border-radius で表現することで、
   管理画面から差し替えた普通の矩形写真もそのまま同じ形に収まる。 */
.p-about__image {
  flex-shrink: 0;
  overflow: clip;
  width: 60rem;      /* Figma: 960px */
  height: 49.241rem; /* Figma: 787.849px */
  max-width: 100%;
  border-radius:
    30rem 30rem 3.548rem 3.548rem /
    30.233rem 30rem 3.548rem 3.548rem;
}

.p-about__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   SP（767px以下）— アーチ写真を可変幅に（高さ固定をやめて比率追従）
   ========================================================================== */
@media (max-width: 767px) {
  /* 重なり量はPCと同じ --space-120（SPではトークン側で4remに縮む）に任せる */
  .p-about { padding-bottom: var(--space-40); } /* PC（--space-80）の半分 */

  .p-about__inner { gap: var(--space-40); }

  .p-about__content {
    gap: var(--space-32);
    width: 100%; /* アーチ写真と同幅に揃える */
  }

  /* PCの h1 から二回り縮める。SPは中央寄せ */
  .p-about__lead {
    font-size: var(--font-size-h2);
    text-align: center;
  }

  .p-about__image {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 787.849; /* PCの実寸比を維持 */
  }
}