/* sections/message.css — 代表メッセージ
   Figma: p-message (node 1180:8655) */

.p-message {
  position: relative; /* positioned な .p-top-visual より前面（DOM順）に出すため */
  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: ビジュアル帯（〜y1304）に対し p-message は y1184 から始まる ＝ 120px 重なる。
     左上の角丸ノッチから帯の写真が覗く。 */
  margin-top: calc(-1 * var(--space-120));
}

.p-message__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

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

.p-message__body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
  color: var(--color-text);
}

/* 冒頭の一文（大きめ）*/
.p-message__catch {
  width: 100%;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
}

.p-message__text {
  width: 100%;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
}

/* 署名（役職＋氏名）*/
.p-message__sign {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-24);
  align-items: center;
  color: var(--color-text);
  white-space: nowrap;
}

.p-message__role {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

.p-message__name {
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

/* 写真（Figma: アーチ型のベクターマスクに写真フィル。
   マスク形状は書き出し画像（背景ベージュ #F4ECE2 に合成済み）に焼き込み。CSS側で角丸は付けない。
   ※セクション背景が --color-tertiary-20 である前提。背景色を変える場合は画像の再書き出しが必要。 */
.p-message__img {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 327 / 268.36; /* Figma実測（施設一覧のアーチと同形状）*/
}

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

/* ==========================================================================
   SP（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  .p-message { padding-bottom: 0; }

  .p-message__inner { width: 100%; }

  .p-message__content { gap: var(--space-24); }

  /* 署名は縦積みで左揃え（役職の下に氏名） */
  .p-message__sign {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    align-self: flex-start;
    white-space: normal;
  }
}