/* ============================================================
   トップ セクション09: 代表挨拶 (MESSAGE)
   Figma: 258:12581 (MESSAGE) / 1440x825 基準
   値は Figma REST API 実測に準拠
   トークンは base.css を参照
   ============================================================ */

.nv-message{
  --nv-latin:'Montserrat', var(--nv-font);
  background:var(--nv-white);
  padding:88px 0;
}

/* --- 見出し --- */
.nv-message__head-wrap{
  width:min(var(--nv-content), calc(100% - 48px));
  margin-inline:auto;
}
.nv-message__head{
  position:relative;
  text-align:center;
  padding-top:40px;
  margin-bottom:56px;
}
.nv-message__watermark{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--nv-latin);
  font-size:96px;
  font-style:italic;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  color:#e2ecfb;             /* Figma: MESSAGE は淡い青 (#FFFFFF 面に浮かす) */
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.nv-message__title{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--nv-latin);
  font-size:40px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-message__accent{
  position:relative;
  display:block;
  width:40px;
  height:4px;
  margin:20px auto 0;
  border-radius:4px;
  background:var(--nv-main);
}
.nv-message__accent::after{
  content:"";
  position:absolute;
  top:0;
  left:48px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--nv-main);
}

/* --- 本体（写真 + テキスト） --- */
.nv-message__inner{
  width:min(1270px, calc(100% - 48px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:56px;
}

.nv-message__photo{
  flex:0 0 560px;
  width:560px;
  height:440px;
  margin:0;
  overflow:hidden;
  background:#d9d9d9;          /* Figma プレースホルダ色 */
}
.nv-message__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.nv-message__photo-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-family:var(--nv-latin);
  font-size:15px;
  font-weight:600;
  letter-spacing:.3em;
  color:rgba(31,58,95,.4);
}

.nv-message__body{
  flex:1 1 auto;
  min-width:0;
}
.nv-message__lead{
  margin:0 0 28px;
  font-size:32px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-message__mark{          /* 「読まれ方」= 白文字 / 青ハイライト */
  background:var(--nv-main);
  color:var(--nv-white);
  padding:0 8px;
  border-radius:2px;
}
.nv-message__text{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.nv-message__text p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-message__sign{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-top:32px;
}
.nv-message__sign-role{
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-message__sign-name{
  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}

/* --- レスポンシブ --- */
@media (max-width:1024px){
  .nv-message{ padding:64px 0; }
  .nv-message__watermark{ font-size:72px; }
  .nv-message__title{ font-size:34px; }
  .nv-message__head{ margin-bottom:44px; }
  .nv-message__inner{ gap:40px; }
  .nv-message__photo{
    flex-basis:44%;
    width:44%;
    height:auto;
    aspect-ratio:560/440;
  }
  .nv-message__lead{ font-size:27px; }
}

/* --- SP (Figma 390x822 実測に準拠) --- */
@media (max-width:767px){
  .nv-message{ padding:32px 0 40px; }   /* 上32 (透かしまで) / 下40 */

  /* 見出し (透かし y32 → タイトル y64 → アクセント y108) */
  .nv-message__head-wrap{ width:min(var(--nv-content), calc(100% - 40px)); }
  .nv-message__head{ padding-top:32px; margin-bottom:24px; }
  .nv-message__watermark{
    top:0;
    font-size:40px;          /* Montserrat SemiBoldItalic 40 / w600 italic (base継承) */
    line-height:60px;        /* Figma text box 60 */
    color:#EBF6FF;           /* Figma SP: MESSAGE */
  }
  .nv-message__title{
    font-size:24px;          /* Noto Sans JP Bold 24 / lh36 */
    line-height:1.5;
  }
  .nv-message__accent{
    width:24px;              /* Figma line 24 */
    height:3px;              /* stroke 3 */
    margin:8px auto 0;
  }
  .nv-message__accent::after{
    left:28px;               /* group 31 - dot 3 */
    width:3px;
    height:3px;
  }

  /* 本体 (縦積み: 写真 → リード → 本文 → 署名) */
  .nv-message__inner{
    width:min(var(--nv-content), calc(100% - 40px));   /* 20pxガター / コンテンツ350 */
    flex-direction:column;
    align-items:stretch;
    gap:16px;                /* 写真 y355 → リード y371 */
  }
  .nv-message__photo{
    flex:0 0 auto;
    width:100%;
    height:auto;
    aspect-ratio:370 / 220;  /* Figma 370x220 */
  }
  .nv-message__lead{
    margin:0 0 16px;         /* リード下 y447 → 本文 y463 */
    font-size:24px;          /* Noto Sans JP Bold 24 / 2行・行送り40 */
    line-height:1.6667;      /* 24 * 1.6667 = 40 */
  }
  .nv-message__mark{
    padding:4px 8px;         /* Figma: 青box 36px高 / 左右8px */
    white-space:nowrap;      /* 「読まれ方」を分割させない */
  }
  .nv-message__text{ gap:22px; }   /* Figma: 段落間 = 空1行 (lh22) */
  .nv-message__text p{
    font-size:15px;          /* Noto Sans JP Regular 15 / lh22 */
    line-height:1.4667;      /* 15 * 1.4667 = 22 */
  }
  .nv-message__sign{
    margin-top:16px;         /* 本文下 y739 → 署名 y755 */
    gap:16px;                /* 役職 → 氏名 */
  }
  .nv-message__sign-role{ font-size:15px; }   /* Bold 15 / lh22 */
  .nv-message__sign-name{ font-size:18px; }   /* Bold 18 / lh27 */
}
