/* ===================================
   MISSION PAGE STYLES
   ヤマト技研とは ページ専用スタイル
=================================== */

/* ============================================================
   Mission MV — Editorial Numbered
   About セクションと同じ言語：
     - Cormorant Italic の大きな番号
     - Zen Old Mincho の明朝主コピー
     - 細い罫線と controlled な余白
     - accent (#4D76FF) は下線・アクセントとして控えめに
============================================================ */

.mission_mv {
  position: relative;
  background: var(--white-color, #fff);
  padding: 80px 24px 100px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mission_mv { padding: 100px 64px 120px; }
}
@media screen and (min-width: 1080px) {
  .mission_mv { padding: 120px 100px 140px; }
}

/* 左端の縦アクセントライン（他セクションと呼応） */
.mission_mv::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 80px;
  background: var(--accent-color, #4D76FF);
}

.mission_mv_content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ========== 共通ブロック ========== */
.mission_mv_desc {
  position: relative;
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--line-color, #d5dae5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.mission_mv_desc:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
@media screen and (min-width: 768px) {
  .mission_mv_desc {
    padding-top: 72px;
    margin-top: 72px;
    grid-template-columns: 220px 1fr;
    gap: 48px;
  }
}
@media screen and (min-width: 1080px) {
  .mission_mv_desc {
    padding-top: 88px;
    margin-top: 88px;
    grid-template-columns: 260px 1fr;
    gap: 64px;
  }
}

/* ---- 左カラム：番号 + eyebrow ---- */
.mission_mv_head {
  position: relative;
}
/* 既存の .mission_mv_title の下線ボーダーは打ち消し */
.mission_mv_title {
  display: block;
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--primary-color, #03113E);
  text-transform: uppercase;
  padding: 0;
  border-bottom: none;
}
@media screen and (min-width: 768px) {
  .mission_mv_title { font-size: 38px; }
}
@media screen and (min-width: 1080px) {
  .mission_mv_title { font-size: 44px; }
}

.mission_mv_title-jp {
  display: block;
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  color: #6a7089;
}
@media screen and (min-width: 768px) {
  .mission_mv_title-jp { font-size: 12px; }
}

/* ---- 右カラム：本文 ---- */
.mission_mv_body {
  position: relative;
}

/* MISSION / VISION の大コピー */
.mission_mv_main-copy {
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  color: var(--primary-color, #03113E);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.4;
  letter-spacing: .06em;
}
.mission_mv_main-copy .accent {
  color: var(--accent-color, #4D76FF);
}

/* VISION などのサブコピー */
.mission_mv_sub-copy {
  margin-top: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14.5px;
  line-height: 2.05;
  color: #4a4f65;
  letter-spacing: .02em;
  max-width: 680px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .mission_mv_sub-copy { font-size: 15px; margin-top: 32px; }
}

/* 既存の .mission_mv_copy-wrapper は無効化 */
.mission_mv_copy-wrapper {
  display: block;
  margin-top: 0;
}

/* ---- 各項目コンテナ（PRINCIPAL / VALUE） ---- */
.mission_mv_items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-color, #d5dae5);
}

.mission_mv_desc-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-color, #d5dae5);
  margin-top: 0;
}
.mission_mv_desc-inner:first-of-type { margin-top: 0; }

@media screen and (min-width: 768px) {
  .mission_mv_desc-inner {
    grid-template-columns: 64px auto 1fr;
    column-gap: 32px;
    padding: 32px 0;
  }
}
@media screen and (min-width: 1080px) {
  .mission_mv_desc-inner {
    grid-template-columns: 72px auto 1fr;
    column-gap: 40px;
    padding: 36px 0;
  }
}

/* 各項目の番号（0.1 / 0.2 …） */
.mission_mv_item-num {
  display: none;
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: #6a7089;
  letter-spacing: .02em;
  line-height: 1;
  align-self: baseline;
}
@media screen and (min-width: 768px) {
  .mission_mv_item-num { display: block; }
}

/* 項目タイトル（明朝） */
.mission_mv_main-copy02 {
  grid-column: 1 / -1;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  color: var(--primary-color, #03113E);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .mission_mv_main-copy02 {
    grid-column: 2;
    font-size: 26px;
  }
}
@media screen and (min-width: 1080px) {
  .mission_mv_main-copy02 { font-size: 30px; }
}

/* 項目説明 */
.mission_mv_sub-copy02 {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13.5px;
  line-height: 1.95;
  color: #4a4f65;
  letter-spacing: .02em;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .mission_mv_sub-copy02 {
    grid-column: 3;
    margin-top: 0;
    font-size: 14.5px;
  }
}

/* ============================================================
   Motion (控えめ fade + rise)
============================================================ */
.mission_mv_desc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(.2,.6,.2,1),
              transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.mission_mv.is-visible .mission_mv_desc { opacity: 1; transform: none; }
.mission_mv.is-visible .mission_mv_desc:nth-of-type(1) { transition-delay: .10s; }
.mission_mv.is-visible .mission_mv_desc:nth-of-type(2) { transition-delay: .25s; }
.mission_mv.is-visible .mission_mv_desc:nth-of-type(3) { transition-delay: .40s; }
.mission_mv.is-visible .mission_mv_desc:nth-of-type(4) { transition-delay: .55s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mission_mv_desc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Mission Thoughts — Editorial Letter
   代表挨拶風の静かに読ませる長文レイアウト
     - オフホワイト背景の紙面
     - Cormorant Italic の巨大番号 + 英字ラベル
     - 明朝の見出し + ゴシックの読みやすい本文
     - 強調表現は使わず、事実を伝える構成
============================================================ */

.mission_thoughts {
  position: relative;
  background: #fafbfd;
  padding: 80px 24px 100px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mission_thoughts { padding: 100px 64px 120px; }
}
@media screen and (min-width: 1080px) {
  .mission_thoughts { padding: 120px 100px 140px; }
}

/* 左端アクセントライン */
.mission_thoughts::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 80px;
  background: var(--accent-color, #4D76FF);
}

.mission_thoughts_content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ========== レイアウト（左：番号+ラベル / 右：本文） ========== */
.mission_thoughts_desc {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_desc {
    grid-template-columns: 220px 1fr;
    gap: 48px;
  }
}
@media screen and (min-width: 1080px) {
  .mission_thoughts_desc {
    grid-template-columns: 260px 1fr;
    gap: 64px;
  }
}

/* ---- 左カラム：番号 + ラベル ---- */
.mission_thoughts_head { position: relative; }

.mission_thoughts_eyebrow {
  display: block;
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--primary-color, #03113E);
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_eyebrow { font-size: 38px; }
}
@media screen and (min-width: 1080px) {
  .mission_thoughts_eyebrow { font-size: 44px; }
}

.mission_thoughts_eyebrow-jp {
  display: block;
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  color: #6a7089;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_eyebrow-jp { font-size: 12px; }
}

/* ---- 右カラム：本文 ---- */
.mission_thoughts_body { position: relative; }

/* タイトル（既存クラス .mission_thoughts_title を再定義） */
.mission_thoughts_title {
  position: relative;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  color: var(--primary-color, #03113E);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.5;
  letter-spacing: .06em;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_title { margin-bottom: 40px; }
}

/* 本文（既存クラス .mission_thoughts_main-copy を再定義） */
.mission_thoughts_main-copy {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 2.1;
  color: #4a4f65;
  letter-spacing: .04em;
  margin-top: 0;
  max-width: 720px;
}
.mission_thoughts_main-copy + .mission_thoughts_main-copy {
  margin-top: 1.4em;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_main-copy { font-size: 15px; line-height: 2.15; }
}
@media screen and (min-width: 1080px) {
  .mission_thoughts_main-copy { font-size: 15.5px; line-height: 2.2; }
}

/* half break は残しつつ、乱用しない前提の余白に */
br.half {
  display: block;
  content: "";
  margin-top: .6em;
}

/* 署名（代表挨拶風の結び） */
.mission_thoughts_sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line-color, #d5dae5);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--primary-color, #03113E);
}
.mission_thoughts_sign_company {
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.mission_thoughts_sign_sep {
  width: 24px; height: 1px;
  background: var(--line-color, #d5dae5);
}
.mission_thoughts_sign_role {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  color: #6a7089;
}
@media screen and (min-width: 768px) {
  .mission_thoughts_sign { margin-top: 64px; padding-top: 36px; }
  .mission_thoughts_sign_company { font-size: 16px; }
  .mission_thoughts_sign_role { font-size: 13px; }
}

/* ============================================================
   Motion (控えめ fade + rise)
============================================================ */
.mission_thoughts_head,
.mission_thoughts_body {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(.2,.6,.2,1),
              transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.mission_thoughts.is-visible .mission_thoughts_head {
  opacity: 1; transform: none; transition-delay: .10s;
}
.mission_thoughts.is-visible .mission_thoughts_body {
  opacity: 1; transform: none; transition-delay: .25s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mission_thoughts_head,
  .mission_thoughts_body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* セクション内の l_contents 二重パディングを解消し、
   VALUE → 想い の間隔を適正化 */
.mission_mv .l_contents,
.mission_thoughts .l_contents {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .mission_mv { padding-bottom: 80px; }
  .mission_thoughts { padding-top: 80px; }
}
@media screen and (min-width: 1080px) {
  .mission_mv { padding-bottom: 96px; }
  .mission_thoughts { padding-top: 96px; }
}