/* =========================================================
   J4C 私たちの想い（message.html）専用スタイル
   ※ページ見出し・左の目次・2カラムの枠・表示アニメーションは
     common.css の「下層ページ共通」
   ========================================================= */

/* =========================================================
   ビジョン／ミッション／バリュー
   写真は画面に止まったまま、文字がその上をスクロールしていく
   ========================================================= */
.msg-main {
  /* 写真を画面右端まで伸ばす */
  margin-right: calc(-1 * (max(0px, (100vw - var(--page-max)) / 2) + var(--page-pad)));
}

.msg-section {
  position: relative;
  color: #fff;
  background: #6d6f6e;
}
.msg-section + .msg-section { margin-top: 2px; }

/* ---------- 止まったままの写真 ---------- */
.msg-photo {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
.msg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* common.js がスクロール量（--p：0〜1）を入れて、ゆっくりズームアウトさせる */
  transform: scale(calc(1.14 - var(--p, 0) * .14));
  will-change: transform;
}
.msg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(40, 40, 40, .62) 0%, rgba(40, 40, 40, .42) 55%, rgba(40, 40, 40, .2) 100%);
}

/* ---------- 写真の上を流れる文字 ---------- */
.msg-content {
  position: relative;
  margin-top: calc(-1 * (100vh - var(--header-h)));
  min-height: calc(100vh - var(--header-h));
  padding: 16vh 8% 24vh 10%;
}

.msg-en {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-en);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* 英字の横の線（表示されるとスッと伸びる） */
.msg-en-line {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, .85);
  transform-origin: left center;
}
.js .msg-en { opacity: 0; transition: opacity .8s var(--ease); }
.js .msg-en .msg-en-line { transform: scaleX(0); transition: transform 1s var(--ease) .1s; }
.js .msg-en.is-in { opacity: 1; }
.js .msg-en.is-in .msg-en-line { transform: scaleX(1); }

/* 見出し：各行が下からせり上がる */
.msg-title {
  margin-top: 26px;
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
.msg-title-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.msg-title-line > span { display: inline-block; }
.js .msg-title-line > span {
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.js .msg-title-line:nth-child(2) > span { transition-delay: .14s; }
.js .msg-title.is-in .msg-title-line > span { transform: none; }

/* 本文：1行ずつふわっと表示 */
.msg-text {
  margin-top: 8vh;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
}
.msg-text .ln { display: block; padding: .3em 0; }
.msg-text .ln-gap { display: block; height: 2.2em; }

/* バリュー：項目が1つずつ現れる */
.msg-values {
  margin-top: 8vh;
  padding: 0;
  list-style: none;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
}
.msg-values li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  max-width: 560px;
}
.msg-values li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(255, 138, 0, .25);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 960px) {
  .msg-main { margin-left: calc(-1 * var(--page-pad)); }
  .msg-content { padding: 12vh 24px 18vh; }
  .msg-en { font-size: 16px; }
  .msg-en-line { width: 40px; }
  .msg-photo::after { background: rgba(40, 40, 40, .5); }
  .msg-title { font-size: 6vw; letter-spacing: 0.03em; }
  .msg-text { font-size: 14px; letter-spacing: 0.02em; }
  .msg-values { font-size: 15px; letter-spacing: 0.03em; }
  .msg-text .ln { padding: .15em 0; }
  .msg-text .ln-gap { height: 1.4em; }
}

/* 動きを減らす設定のときはアニメーションなしで表示 */
@media (prefers-reduced-motion: reduce) {
  .msg-photo img { transform: none; }
  .js .msg-en,
  .js .msg-en .msg-en-line,
  .js .msg-title-line > span { opacity: 1; transform: none; transition: none; }
}