@charset "UTF-8";

/* ========================================
   message.css
   代表メッセージページ専用スタイル
   設計幅: PC 1920px / 本文コンテンツ幅 1200px
   Figma: node 54-29179
======================================== */

.message {
  --msg-red: #f75959;       /* ヒーロー赤帯・キャッチ文字 */
  --msg-pink: #efbcb9;      /* MESSAGE 英字 */
  --msg-ink: #212121;
  --msg-text: #2c2c2c;
  --msg-road: #595959;

  background-color: #fffdf4;
  padding-bottom: clamp(40px, 3.9vw, 75px);
}

/* ============================================================
   Hero（赤帯＋MESSAGE＋タイトル＋道路）
   Figma(1920): 赤帯 h193。MESSAGE（#efbcb9・50px）は帯上部中央。
   タイトル（100px・白抜き黒フチ）は帯下端と道路（h40）に跨る。
============================================================ */
.message-hero-band {
  position: relative;
  height: clamp(120px, 10.05vw, 193px);    /* Figma 193px */
  background-color: var(--msg-red);
}
.message-hero-en {
  position: absolute;
  top: clamp(8px, 1.33vw, 26px);           /* Figma: 帯上端から約25px */
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--msg-pink);
  font-family: "Dela Gothic One", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 2.604vw, 5rem);   /* Figma 50px */
  letter-spacing: 0.025em;
  line-height: 1.2;
}
/* タイトル画像（代表メッセージ）。question と同じく帯下端と道路に跨る。*/
.message-hero-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(52%);
  z-index: 2;                              /* 道路より前面 */
  margin: 0;
  line-height: 0;
  text-align: center;
}
.message-hero-title-img {
  width: clamp(280px, 42vw, 807px);        /* 画像 1614×470 の @2x 表示 */
  height: auto;
}

/* 道路ライン（question / recruit と同手法） */
.message-hero-road {
  position: relative;
  width: 100%;
  height: clamp(22px, 2.084vw, 40px);      /* Figma 40px */
  background-color: var(--msg-road);
}
.message-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(2px, 0.21vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}

/* ============================================================
   社長写真1（大・中央）＋ 背景の切り替わり
   Figma: 上部の背景は #fdf8e2 で、写真1の途中（y=871）から下が #fffdf4。
   写真に負マージンを付けて #fdf8e2 の帯を写真の途中で終わらせ、
   次セクション（#fffdf4）に写真の下側を重ねて跨がせる。
============================================================ */
.message-intro {
  position: relative;
  z-index: 1;                              /* 写真を次セクション背景の前面に */
  background-color: #fdf8e2;
  padding-top: clamp(36px, 4.19vw, 81px);  /* 道路下端→写真 Figma 80.5px */
}
.message-photo {
  display: block;
  height: auto;
}
/* 写真1: Figma 1200×520（影込み 1213.5×531）。中央寄せ。
   下 106px（=写真の約2割）が背景境界より下にはみ出す。*/
.message-photo--1 {
  width: min(1213px, calc(100% - 40px));
  margin: 0 auto calc(-106 / 1920 * 100vw);
}

/* ============================================================
   キャッチ＋本文＋写真2＋署名（背景 #fffdf4）
============================================================ */
.message-main {
  background-color: #fffdf4;
  /* 背景境界(871)→キャッチ(1047) = 176px。写真のはみ出し(106px)を含む。*/
  padding-top: clamp(90px, 9.167vw, 176px);
}
.message-inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* PC では本文コンテンツ一式を縮小（recruit / question と同じ手法）。
   背景帯（#fdf8e2 / #fffdf4）は全幅のまま、写真と本文だけを zoom で縮める。
   SP/TAB(〜1024px)は従来どおり。
   0.9 で一段縮小後、さらに10%の縮小要望があり 0.81（= 0.9 × 0.9）に。*/
@media (min-width: 1025px) {
  .message-photo--1,
  .message-inner {
    zoom: 0.81;
  }
}

/* キャッチ（一人ひとりの成長が、〜）。左にグレーの縦バー（Figma 18×153 #aaa）*/
.message-catch {
  position: relative;
  margin: 0;
  padding-left: clamp(24px, 2.552vw, 49px);  /* Figma: バー左端→文字 49px */
  color: var(--msg-red);
  font-size: clamp(2.4rem, 3.385vw, 6.5rem); /* Figma 65px */
  letter-spacing: 0.05em;
  line-height: 1.35;                          /* Figma 87.75/65 */
  /* 文字の外線（2px・黒）。stroke を塗りの後ろに描いて外側だけ縁取る */
  -webkit-text-stroke: 2px var(--msg-ink);
  paint-order: stroke fill;
}
.message-catch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(10px, 0.938vw, 18px);          /* Figma 18px */
  height: 87%;                                /* Figma 153/175 */
  background-color: #aaa;
}

/* 本文（Inter Bold 25px 相当・行間2） */
.message-text {
  margin-top: clamp(28px, 2.7vw, 52px);      /* キャッチ→本文 / 写真→本文 */
  color: var(--msg-text);
  font-size: clamp(1.5rem, 1.303vw, 2.5rem); /* Figma 25px */
  line-height: 2;                            /* Figma leading 50/25 */
}
.message-text p {
  margin: 0;
}
/* Figma の段落間は空行1つ＝1行ぶん（50px = 2em）*/
.message-text p + p {
  margin-top: 2em;
}

/* 写真2: Figma 900×420（影込み 911×431）。
   ★2026-08-19 跡田さん指示で左寄せ→中央寄せに変更（大きさは現状のまま=幅76%/911px）。
   margin の左右を auto にして水平中央。上マージンは据え置き。*/
.message-photo--2 {
  width: min(911px, 76%);
  margin: clamp(20px, 1.823vw, 35px) auto 0;
}

/* 署名 */
.message-sign {
  margin: clamp(40px, 4.95vw, 95px) 0 0;
  color: var(--msg-text);
  font-size: clamp(1.7rem, 1.563vw, 3rem);   /* Figma 30px */
  letter-spacing: 0.04em;
}

/* SP: 指定改行を解除して自然に折り返す（hearing / MESSAGE と同じ手法）。
   タイトル画像は question と同様に少し大きめにする。*/
@media (max-width: 767px) {
  .message-text br {
    display: none;
  }
  .message-hero-title-img {
    width: min(370px, 88vw);
  }
}