/* =========================================================
 * みなしるべ「みなしるべについて」追加調整
 * about-v2.3-refine.css
 *
 * 前提：
 * - about-v2.0.css
 * - about-v2.1-refine.css
 * - about-v2.2-refine.css
 * の後に読み込む差分CSS
 *
 * 主な変更：
 * - HERO右側を正式ロゴから写真へ変更
 * - WHY WE EXISTを「2 + 2 + 1」構成へ
 * - WHY WE EXISTのH3をサイト標準の「背景色＋左縦線」へ
 * - OUR NAME左右カードの高さを揃える
 * - OUR SYMBOLは左説明を広く、右表を狭く
 * - Tablet / Mobileも同時調整
 * ========================================================= */


/* =========================================================
   1. HERO：写真化
   ========================================================= */

.ms-about-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr) !important;
  column-gap: 54px !important;
  align-items: center !important;

  padding: 34px 0 46px !important;
}

.ms-about-hero-copy {
  max-width: 700px !important;
}

.ms-about-hero h1 {
  max-width: 690px !important;

  margin: 0 0 22px !important;

  font-size: clamp(38px, 3vw, 44px) !important;
  line-height: 1.36 !important;
  letter-spacing: 0.01em !important;

  text-wrap: balance !important;
}

.ms-about-hero-copy p {
  max-width: 660px !important;
}

/* 旧ロゴ／ビーコン用の疑似要素を完全停止 */
.ms-about-beacon::before,
.ms-about-beacon::after,
.ms-about-beacon-light,
.ms-about-beacon-base,
.ms-about-beacon-dot {
  display: none !important;
}

/* HTML側では
   <figure class="ms-about-beacon ms-about-hero-photo">...</figure>
   として使用 */
.ms-about-beacon.ms-about-hero-photo,
.ms-about-hero-photo {
  display: block !important;

  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

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

.ms-about-hero-photo img {
  display: block !important;

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

  margin: 0 !important;

  object-fit: cover !important;
  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: 0 !important;

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

.ms-about-problem-step,
.ms-about-problem-step:nth-child(n) {
  box-sizing: border-box !important;

  min-height: 0 !important;
  padding: 18px 18px 20px !important;

  border: 0 !important;
  border-right: 1px solid var(--ms-border, #DDE2E0) !important;
  border-bottom: 1px solid var(--ms-border, #DDE2E0) !important;

  background: #FFFFFF !important;
}

/* 5番目だけ横長1カラム */
.ms-about-problem-step:nth-child(5) {
  grid-column: 1 / -1 !important;
  padding-right: 22px !important;
  padding-left: 22px !important;
}

.ms-about-problem-no {
  display: none !important;
}

.ms-about-problem-step h3 {
  box-sizing: border-box !important;
  width: 100% !important;

  margin: 0 0 10px !important;
  padding: 7px 10px 7px 12px !important;

  border-left: 3px solid var(--ms-navy, #0D1B2A) !important;
  background: #F2F3F4 !important;

  color: var(--ms-navy, #0D1B2A) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

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

  font-size: 13.5px !important;
  line-height: 1.68 !important;
}

/* 01 情報が散らばる */
.ms-about-problem-step:nth-child(1) h3 {
  border-left-color: var(--ms-navy, #0D1B2A) !important;
  background: #F2F3F4 !important;
}

/* 02 条件が違う */
.ms-about-problem-step:nth-child(2) h3 {
  border-left-color: var(--ms-bluegray, #5F7685) !important;
  background: var(--ms-soft-bluegray, #EEF2F4) !important;
}

/* 03 判断しにくい */
.ms-about-problem-step:nth-child(3) h3 {
  border-left-color: var(--ms-warmgray, #8D8F92) !important;
  background: #F4F4F2 !important;
}

/* 04 みなしるべが整える */
.ms-about-problem-step:nth-child(4) h3 {
  border-left-color: var(--ms-sage, #7A9B83) !important;
  background: var(--ms-soft-sage, #EEF3EF) !important;
}

/* 05 自分で判断できる */
.ms-about-problem-step:nth-child(5) h3 {
  border-left-color: var(--ms-gold, #E6A23C) !important;
  background: var(--ms-soft-gold, #FFF5E6) !important;
}

.ms-about-problem-step:nth-child(5) p:last-child {
  max-width: 780px !important;
}


/* =========================================================
   3. WHAT WE DO
      v2.2のH3デザインをそのまま維持
   ========================================================= */

.ms-about-action h3 {
  margin-top: 0 !important;
}


/* =========================================================
   4. OUR NAME
      左右カードの高さを揃える
   ========================================================= */

.ms-about-name-stage {
  align-items: stretch !important;
}

.ms-about-name-card {
  display: flex !important;
  flex-direction: column !important;

  height: 100% !important;
  min-height: 224px !important;
  padding: 29px 30px 28px !important;
}

.ms-about-name-card h3 {
  margin-top: 0 !important;
}

.ms-about-name-card > p:last-child {
  margin-bottom: 0 !important;
}

.ms-about-name-dialect-note {
  margin: -2px 0 12px !important;

  color: var(--ms-warmgray, #8D8F92) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}


/* =========================================================
   5. OUR SYMBOL
      左を広く、右の表組みを狭く
   ========================================================= */

.ms-about-symbol {
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, 0.72fr) !important;
  gap: 54px !important;
  align-items: start !important;
}

.ms-about-symbol-copy {
  padding-bottom: 112px !important;
}

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

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

  margin: 0 0 0 auto !important;
  align-self: start !important;
}

.ms-about-symbol-point {
  padding: 20px 20px 19px !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(290px, 0.82fr) !important;
    column-gap: 32px !important;

    padding: 30px 0 38px !important;
  }

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

  .ms-about-hero-photo {
    aspect-ratio: 4 / 3 !important;
  }

  .ms-about-problem-step {
    padding: 17px 16px 18px !important;
  }

  .ms-about-problem-step:nth-child(5) {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .ms-about-problem-step h3 {
    padding: 7px 9px 7px 11px !important;
  }

  .ms-about-name-card {
    min-height: 0 !important;
  }

  .ms-about-symbol {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
    gap: 28px !important;
  }

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


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

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

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

    padding: 24px 0 30px !important;
  }

  .ms-about-hero h1 {
    max-width: none !important;

    margin-bottom: 18px !important;

    font-size: 28px !important;
    line-height: 1.40 !important;
  }

  .ms-about-hero-photo {
    aspect-ratio: 3 / 2 !important;
  }

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

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

  .ms-about-problem-step,
  .ms-about-problem-step:nth-child(5) {
    grid-column: auto !important;

    padding: 16px 14px 18px !important;
  }

  .ms-about-problem-step h3 {
    margin-bottom: 10px !important;
    padding: 7px 9px 7px 11px !important;

    font-size: 15px !important;
  }

  .ms-about-problem-step:nth-child(5) p:last-child {
    max-width: none !important;
  }

  .ms-about-name-card {
    min-height: 0 !important;
    padding: 24px 20px 22px !important;
  }

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

  .ms-about-symbol-copy {
    padding-bottom: 104px !important;
  }

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