/* =========================================================
 * みなしるべ「みなしるべについて」最終バランス調整
 * about-v2.4-final-balance.css
 *
 * 前提：
 * - about-v2.0.css
 * - about-v2.1-refine.css
 * - about-v2.2-refine.css
 * - about-v2.3-refine.css
 * の後に読み込む差分CSS
 *
 * 主な変更：
 * 1. HEROのH1をPCで2行に安定させ、写真を少し大きく
 * 2. WHY WE EXISTを「表」ではなく独立カードとして見せる
 * 3. OUR NAMEの左右カード高さを自然に揃え、＋を拡大・中央配置
 * 4. OUR SYMBOLの右表組みを拡大
 * 5. ページ末尾の余白を少し圧縮
 * 6. Tablet / Mobileも同時調整
 * ========================================================= */


/* =========================================================
   1. HERO
   ========================================================= */

.ms-about-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr) !important;
  column-gap: 48px !important;
  align-items: center !important;
}

.ms-about-hero h1 {
  max-width: none !important;
  margin-bottom: 22px !important;

  font-size: 38px !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;

  text-wrap: wrap !important;
}

.ms-about-hero-title-line {
  display: block !important;
}

.ms-about-hero-title-line:last-child {
  white-space: nowrap !important;
}

.ms-about-hero-photo {
  width: 100% !important;
}

.ms-about-hero-photo img {
  object-position: 58% center !important;
}


/* =========================================================
   2. WHY WE EXIST
      2 + 2 + 1 / 独立カード化
   ========================================================= */

.ms-about-problem {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;

  border: 0 !important;
  background: transparent !important;
}

.ms-about-problem-step,
.ms-about-problem-step:nth-child(n) {
  min-height: 0 !important;
  padding: 16px 16px 18px !important;

  border: 1px solid var(--ms-border, #DDE2E0) !important;
  background: #FFFFFF !important;
}

.ms-about-problem-step:nth-child(5) {
  grid-column: 1 / -1 !important;
  padding: 16px 18px 18px !important;
}

.ms-about-problem-step h3 {
  margin: 0 0 9px !important;
}

.ms-about-problem-step p:last-child {
  margin: 0 !important;
}


/* =========================================================
   3. OUR NAME
      自然な高さ揃え + ＋の強調・中央配置
   ========================================================= */

.ms-about-name-stage {
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.ms-about-name-card {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;

  padding: 27px 30px 26px !important;
}

.ms-about-name-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;

  color: var(--ms-gold, #E6A23C) !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  transform: none !important;
}


/* =========================================================
   4. OUR SYMBOL
      左説明を確保しつつ、右表を「名前」右カードに近い幅へ
   ========================================================= */

.ms-about-symbol {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  gap: 42px !important;
  align-items: start !important;
}

.ms-about-symbol-copy p {
  max-width: 620px !important;
}

.ms-about-symbol-points {
  width: 100% !important;
  max-width: 500px !important;

  margin: 0 0 0 auto !important;
}

.ms-about-symbol-point {
  padding: 20px 21px 19px !important;
}


/* =========================================================
   5. ページ末尾
   ========================================================= */

.ms-about-closing {
  margin-bottom: 18px !important;
}


/* =========================================================
   6. Tablet 681–1023px
   ========================================================= */

@media screen and (min-width: 681px) and (max-width: 1023px) {

  .ms-about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.88fr) !important;
    column-gap: 30px !important;
  }

  .ms-about-hero h1 {
    font-size: 33px !important;
    line-height: 1.40 !important;
  }

  .ms-about-hero-title-line:last-child {
    white-space: normal !important;
  }

  .ms-about-problem {
    gap: 10px !important;
  }

  .ms-about-problem-step,
  .ms-about-problem-step:nth-child(5) {
    padding: 15px 15px 17px !important;
  }

  .ms-about-name-stage {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ms-about-name-card {
    padding: 25px 24px 23px !important;
  }

  .ms-about-name-plus {
    min-height: 34px !important;
    height: 34px !important;

    font-size: 32px !important;
  }

  .ms-about-symbol {
    grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.97fr) !important;
    gap: 26px !important;
  }

  .ms-about-symbol-points {
    max-width: 430px !important;
  }

  .ms-about-closing {
    margin-bottom: 16px !important;
  }
}


/* =========================================================
   7. Mobile ≤680px
   ========================================================= */

@media screen and (max-width: 680px) {

  .ms-about-hero {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }

  .ms-about-hero h1 {
    font-size: 28px !important;
    line-height: 1.40 !important;
  }

  .ms-about-hero-title-line:last-child {
    white-space: normal !important;
  }

  .ms-about-problem {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ms-about-problem-step,
  .ms-about-problem-step:nth-child(5) {
    grid-column: auto !important;
    padding: 15px 14px 17px !important;
  }

  .ms-about-name-stage {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ms-about-name-card {
    padding: 23px 20px 21px !important;
  }

  .ms-about-name-plus {
    min-height: 32px !important;
    height: 32px !important;

    font-size: 30px !important;
  }

  .ms-about-symbol {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ms-about-symbol-points {
    max-width: none !important;
    margin: 0 !important;
  }

  .ms-about-closing {
    margin-bottom: 18px !important;
  }
}