/* =========================================================
 * みなしるべ「みなしるべについて」最終調整
 * about-v2.1-refine.css
 * 
 * 前提：
 * - about-v2.0.css の後に読み込む上書きCSS
 * - トップページ / 調査・編集方針の完成版に合わせる
 * - PC / Tablet / Mobile 対応
 * ========================================================= */

/* ---------------------------------------------------------
   0. ブランドシンボル画像
   ---------------------------------------------------------
   下の none を、WordPressメディアライブラリにある
   「正式ブランドシンボル（背景透過）」のURLへ置き換えてください。

   例：
   --ms-about-brand-symbol: url("https://minashirube.jp/wp-content/uploads/....png");
   --------------------------------------------------------- */
.ms-about-page {
  --ms-about-brand-symbol:
  url("https://minashirube.jp/wp-content/uploads/2026/09/minashirube-symbol_main.png");
  --about-rule: var(--ms-border, #DDE2E0);
  --about-soft-text: #46535C;
  --about-pale: #F6F8F7;
  --about-warm: #FBF8F1;
  --about-closing-bg: #F7F5EF;
}


/* =========================================================
   1. ページ共通
   ========================================================= */

/* ページ下部に孤立していたパンくずを非表示 */
body:has(.ms-about-page) #breadcrumb,
body:has(.ms-about-page) .breadcrumb.wrap {
  display: none !important;
}

/* 旧デザインの「罫線で区切る」表現を撤去 */
.ms-about-hero,
.ms-about-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* =========================================================
   2. HERO
   ========================================================= */

.ms-about-hero {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  column-gap: 60px !important;
  align-items: center !important;

  padding: 34px 0 42px !important;
}

/* 装飾英字は撤去 */
.ms-about-eyebrow {
  display: none !important;
}

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

  color: var(--ms-navy, #0D1B2A) !important;
  font-size: clamp(40px, 3.1vw, 46px) !important;
  line-height: 1.34 !important;
  letter-spacing: 0.01em !important;

  word-break: normal !important;
  line-break: strict !important;
  text-wrap: balance !important;
}

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

.ms-about-hero-copy p {
  margin-bottom: 9px !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
}

/*
 * 旧CSS描画の抽象ビーコンをやめ、
 * 正式ブランドシンボルを静かに配置する。
 */
.ms-about-beacon {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

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

  overflow: hidden !important;
  border: 0 !important;
  background: var(--about-closing-bg) !important;
}

.ms-about-beacon::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  width: auto !important;
  height: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;

  background-image: var(--ms-about-brand-symbol) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 170px auto !important;
}

/* 旧ビーコン構成要素を消す */
.ms-about-beacon::after,
.ms-about-beacon-light,
.ms-about-beacon-base,
.ms-about-beacon-dot {
  display: none !important;
}


/* =========================================================
   3. セクション見出し
   ========================================================= */

.ms-about-section {
  padding: 42px 0 46px !important;
}

.ms-about-section-head {
  display: block !important;
  margin-bottom: 24px !important;
}

/* 01 / WHY WE EXIST 等は撤去 */
.ms-about-section-index {
  display: none !important;
}

.ms-about-section-title h2 {
  position: relative !important;

  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px 16px !important;

  color: var(--ms-navy, #0D1B2A) !important;
  background: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid var(--about-rule) !important;

  font-size: 30px !important;
  line-height: 1.40 !important;
  letter-spacing: 0 !important;
}

.ms-about-section-title h2::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 0.16em !important;

  width: 3px !important;
  height: 1.04em !important;

  background: var(--ms-navy, #0D1B2A) !important;
}

.ms-about-section-title p {
  max-width: 820px !important;
  margin: 0 !important;

  font-size: 14.5px !important;
  line-height: 1.76 !important;
}


/* =========================================================
   4. WHY WE EXIST — 5段階
   ========================================================= */

.ms-about-problem-step {
  min-height: 0 !important;
  padding: 23px 20px 22px !important;
}

.ms-about-problem-no {
  margin-bottom: 12px !important;

  color: var(--ms-warmgray, #8D8F92) !important;
  font-size: 11px !important;
}

.ms-about-problem-step h3 {
  margin-bottom: 8px !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
}

.ms-about-problem-step p:last-child {
  font-size: 13.5px !important;
  line-height: 1.64 !important;
}


/* =========================================================
   5. WHAT WE DO — 4工程
   ========================================================= */

.ms-about-action {
  min-height: 0 !important;
  padding: 24px 22px 23px !important;
}

.ms-about-action::before {
  left: 22px !important;
  width: 32px !important;
  height: 3px !important;
}

.ms-about-action-no {
  margin-bottom: 14px !important;
}

.ms-about-action h3 {
  margin-bottom: 9px !important;
  font-size: 18px !important;
}

.ms-about-action p:last-child {
  font-size: 13.75px !important;
  line-height: 1.68 !important;
}


/* =========================================================
   6. OUR NAME
   ========================================================= */

.ms-about-name-stage {
  grid-template-columns: 1fr 54px 1fr !important;
  gap: 22px !important;
  margin-top: 4px !important;
}

.ms-about-name-card {
  min-height: 0 !important;
  padding: 30px 30px 28px !important;
}

.ms-about-name-label {
  margin-bottom: 14px !important;
  font-size: 10.5px !important;
}

.ms-about-name-card h3 {
  margin-bottom: 13px !important;
  font-size: 26px !important;
}

.ms-about-name-card p:last-child {
  font-size: 13.75px !important;
  line-height: 1.72 !important;
}

.ms-about-name-plus {
  font-size: 25px !important;
}


/* =========================================================
   7. OUR SYMBOL
   ========================================================= */

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

/* 左側の説明文の下に正式シンボルを表示 */
.ms-about-symbol-copy {
  position: relative !important;
  padding-bottom: 132px !important;
}

.ms-about-symbol-copy::after {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 150px !important;
  height: 104px !important;

  background-image: var(--ms-about-brand-symbol) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

.ms-about-symbol-copy p {
  margin-bottom: 10px !important;
  font-size: 14.5px !important;
  line-height: 1.76 !important;
}

.ms-about-symbol-point {
  min-height: 0 !important;
  padding: 21px 22px 20px !important;
}

.ms-about-symbol-point strong {
  margin-bottom: 5px !important;
  font-size: 14.5px !important;
}

.ms-about-symbol-point span {
  font-size: 13.25px !important;
  line-height: 1.62 !important;
}


/* =========================================================
   8. 最終クロージング
   ========================================================= */

.ms-about-closing {
  position: relative !important;

  margin: 8px 0 34px !important;
  padding: 38px 240px 36px 34px !important;

  background: var(--about-closing-bg) !important;
  text-align: left !important;
}

/* 装飾英字 MINASHIRUBE は撤去 */
.ms-about-closing-kicker {
  display: none !important;
}

.ms-about-closing-copy {
  max-width: 760px !important;
  margin: 0 0 12px !important;

  color: var(--ms-navy, #0D1B2A) !important;
  font-size: 21px !important;
  line-height: 1.52 !important;
  font-weight: 700 !important;
}

.ms-about-closing-sub {
  max-width: 760px !important;
  margin: 0 !important;

  color: var(--about-soft-text) !important;
  font-size: 14.5px !important;
  line-height: 1.74 !important;
}

/* クロージング右端にも正式シンボル */
.ms-about-closing::after {
  content: "" !important;

  position: absolute !important;
  right: 38px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 150px !important;
  height: 106px !important;

  background-image: var(--ms-about-brand-symbol) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}


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

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

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

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

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

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

  .ms-about-section {
    padding: 36px 0 40px !important;
  }

  .ms-about-section-title h2 {
    font-size: 27px !important;
  }

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

  .ms-about-problem-step:last-child {
    grid-column: 1 / -1 !important;
  }

  .ms-about-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

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

  .ms-about-name-plus {
    transform: rotate(90deg) !important;
  }

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

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

  .ms-about-closing {
    padding: 34px 200px 32px 30px !important;
  }

  .ms-about-closing::after {
    right: 28px !important;
    width: 130px !important;
  }
}


/* =========================================================
   10. 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.38 !important;
    text-wrap: balance !important;
  }

  .ms-about-hero-copy p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

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

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

  .ms-about-section {
    padding: 30px 0 34px !important;
  }

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

  .ms-about-section-title h2 {
    margin-bottom: 10px !important;
    padding: 0 0 9px 12px !important;

    font-size: 21px !important;
    line-height: 1.44 !important;

    word-break: auto-phrase !important;
  }

  .ms-about-section-title h2::before {
    width: 3px !important;
  }

  .ms-about-section-title p {
    font-size: 14px !important;
    line-height: 1.70 !important;
  }

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

  .ms-about-problem-step:last-child {
    grid-column: auto !important;
  }

  .ms-about-problem-step,
  .ms-about-action {
    min-height: 0 !important;
    padding: 19px 16px 18px !important;
  }

  .ms-about-problem-no,
  .ms-about-action-no {
    margin-bottom: 10px !important;
  }

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

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

  .ms-about-name-card h3 {
    font-size: 23px !important;
  }

  .ms-about-name-plus {
    transform: rotate(90deg) !important;
    font-size: 22px !important;
  }

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

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

  .ms-about-symbol-copy::after {
    width: 126px !important;
    height: 90px !important;
  }

  .ms-about-symbol-point {
    min-height: 0 !important;
    padding: 18px 16px 17px !important;
  }

  .ms-about-closing {
    margin: 4px 0 24px !important;
    padding: 28px 20px 128px !important;

    text-align: left !important;
  }

  .ms-about-closing-copy {
    margin-bottom: 10px !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  .ms-about-closing-sub {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  .ms-about-closing::after {
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;
    transform: none !important;

    width: 128px !important;
    height: 82px !important;

    background-position: left center !important;
  }
}