/* =========================================================
 * みなしるべ「みなしるべについて」追加調整
 * about-v2.2-refine.css
 *
 * 前提：
 * - about-v2.0.css
 * - about-v2.1-refine.css
 * の後に読み込む差分CSS
 * ========================================================= */


/* =========================================================
   1. HERO：ロゴ背景を撤去し、サイズと余白を再調整
   ========================================================= */

.ms-about-beacon {
  min-height: 245px !important;
  background: transparent !important;
  overflow: visible !important;
}

.ms-about-beacon::before {
  background-size: 210px auto !important;
}


/* =========================================================
   2. 「調べることより、判断することに時間を使えるように。」
      数字を撤去／カード背景をすべて白へ統一
   ========================================================= */

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

.ms-about-problem-step,
.ms-about-problem-step:nth-child(n) {
  background: #FFFFFF !important;
}

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


/* =========================================================
   3. 「情報を、判断の材料へ変える。」
      数字・上部横線を撤去
      H3を「背景色＋左縦線」に統一
   ========================================================= */

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

.ms-about-action::before {
  display: none !important;
}

.ms-about-action {
  padding: 18px 18px 20px !important;
  background: #FFFFFF !important;
}

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

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

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

  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* 01 集める */
.ms-about-action:nth-child(1) h3 {
  border-left-color: var(--ms-navy, #0D1B2A) !important;
  background: #F2F3F4 !important;
}

/* 02 そろえる */
.ms-about-action:nth-child(2) h3 {
  border-left-color: var(--ms-bluegray, #5F7685) !important;
  background: var(--ms-soft-bluegray, #EEF2F4) !important;
}

/* 03 確かめる */
.ms-about-action:nth-child(3) h3 {
  border-left-color: var(--ms-sage, #7A9B83) !important;
  background: var(--ms-soft-sage, #EEF3EF) !important;
}

/* 04 整理する */
.ms-about-action:nth-child(4) h3 {
  border-left-color: var(--ms-gold, #E6A23C) !important;
  background: var(--ms-soft-gold, #FFF5E6) !important;
}


/* =========================================================
   4. 「みなしるべ」という名前に込めたこと。
      方言説明用の補足テキスト
   ========================================================= */

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

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


/* =========================================================
   5. 「道標、光、そして情報の集約。」
      説明文と表組みの上端をそろえる
   ========================================================= */

.ms-about-symbol {
  align-items: start !important;
  gap: 38px !important;
}

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

.ms-about-symbol-points {
  align-self: start !important;
  margin-top: 0 !important;
}


/* =========================================================
   6. Tablet
   ========================================================= */

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

  .ms-about-beacon {
    min-height: 205px !important;
  }

  .ms-about-beacon::before {
    background-size: 170px auto !important;
  }

  .ms-about-action {
    padding: 17px 16px 19px !important;
  }

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

  .ms-about-symbol {
    gap: 22px !important;
  }
}


/* =========================================================
   7. Mobile
   ========================================================= */

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

  .ms-about-beacon {
    min-height: 150px !important;
  }

  .ms-about-beacon::before {
    background-size: 148px auto !important;
  }

  .ms-about-problem-step {
    background: #FFFFFF !important;
  }

  .ms-about-action {
    padding: 16px 14px 18px !important;
  }

  .ms-about-action h3 {
    margin-bottom: 10px !important;
    padding: 7px 9px 7px 11px !important;
    font-size: 15px !important;
  }

  .ms-about-name-dialect-note {
    margin-bottom: 10px !important;
    font-size: 12px !important;
  }

  .ms-about-symbol {
    gap: 18px !important;
  }

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