/* ビジョンのページ（page-vision.php）専用。サイト共通の style.css の色・書体に合わせる。
   色: 文字 #222222 / 本文 #373737 / 黄 #FFFF33・#FFCC33 / 灰 #484E52・#DADCDC・#F2F5F5 */

.p-vision { color: #373737; }
.p-vision sup { font-size: 0.65em; color: #606060; margin-left: 1px; }

/* 冒頭 */
.p-vision__hero { position: relative; z-index: 1; max-width: 760px; }
.p-vision__heroH {
  font-family: "Midashi Go MB31", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700; color: #222222; line-height: 1.45;
  font-size: clamp(1.6rem, 4.2vw, 2.75rem); margin-bottom: 28px;
}
.p-vision__heroText p { font-size: 1.0625rem; line-height: 2; margin-bottom: 12px; }

.p-vision__toc {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 48px; max-width: 980px;
}
.p-vision__tocItem {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 16px 18px;
  color: #222222 !important; font-weight: 700; font-size: 0.9375rem;
  transition: background-color .2s;
}
.p-vision__tocItem:hover { background: #FFFF99; }
.p-vision__tocNum { font-family: "Poppins", sans-serif; font-weight: 600; color: #484E52; font-size: 0.875rem; }

/* 章 */
.p-vision__sec { padding: 100px 0; position: relative; scroll-margin-top: 110px; }
.p-vision__sec.u-bg--gray:before { content: none; }
.p-vision__secLabel {
  font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: .08em;
  color: #484E52; font-size: 0.9375rem; display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.p-vision__secH {
  font-family: "Midashi Go MB31", "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  color: #222222; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.45; margin-bottom: 20px;
}
.p-vision__secLead { font-size: 1.0625rem; line-height: 2; max-width: 860px; margin-bottom: 48px; }
.p-vision__h3 { font-weight: 700; color: #222222; font-size: 1.25rem; line-height: 1.5; margin-bottom: 16px; }
.p-vision__h3--center { text-align: center; margin: 64px 0 28px; }

/* 01 数字 */
.p-vision__stats { margin-bottom: 64px; max-width: 1000px; }
.p-vision__stat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 48px; align-items: center; padding: 22px 0; }
.p-vision__statNum {
  font-family: "Poppins", sans-serif; font-weight: 600; color: #222222;
  font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.p-vision__statNum .pre, .p-vision__statNum .unit { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1.125rem; font-weight: 700; }
.p-vision__statNum .pre { margin-right: 4px; }
.p-vision__statNum .unit { margin-left: 6px; }
.p-vision__statLabel { font-weight: 700; color: #222222; font-size: 1rem; line-height: 1.6; margin-bottom: 4px; }
.p-vision__statNote { font-size: 0.875rem; line-height: 1.8; }

.p-vision__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.p-vision__colText p { line-height: 2; margin-bottom: 14px; }
.p-vision__tableH { font-weight: 700; color: #222222; margin-bottom: 12px; }
.p-vision__tableWrap { overflow-x: auto; }
.p-vision__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.7; }
.p-vision__table th, .p-vision__table td { text-align: left; vertical-align: top; padding: 12px 8px; border-bottom: 1px solid #DADCDC; }
.p-vision__table th { white-space: nowrap; font-family: "Poppins", "Zen Kaku Gothic New", sans-serif; font-weight: 600; color: #484E52; width: 7.5em; }

.p-vision__src { list-style: none; margin-top: 40px; font-size: 0.75rem; line-height: 1.8; color: #606060; }
.p-vision__src--one { margin-top: 28px; }

/* 02 成長の型 */
.p-vision__flow {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: none;
}
.p-vision__step { background: #fff; border-radius: 16px; padding: 28px 24px; position: relative; }
.p-vision__step:not(:last-child):after {
  content: ""; position: absolute; top: 50%; right: -24px; transform: translateY(-50%);
  border-left: 14px solid #FFCC33; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.p-vision__stepNum { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.8125rem; color: #484E52; letter-spacing: .06em; margin-bottom: 6px; }
.p-vision__stepH { font-weight: 700; color: #222222; font-size: 1.125rem; line-height: 1.5; margin-bottom: 10px; }
.p-vision__stepText { font-size: 0.875rem; line-height: 1.8; }
.p-vision__flowNote { text-align: right; font-size: 0.875rem; color: #484E52; margin-top: 14px; }

.p-vision__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.p-vision__case {
  display: block; background: #fff; border-radius: 16px; padding: 28px 28px 24px; color: #373737 !important;
  border: 1px solid transparent; transition: border-color .2s;
}
.p-vision__case:hover { border-color: #FFCC33; }
.p-vision__caseTags { display: flex; gap: 6px; margin-bottom: 12px; }
.p-vision__caseTags span { font-size: 0.75rem; font-weight: 700; background: #F2F5F5; color: #484E52; border-radius: 9999px; padding: 3px 10px; }
.p-vision__caseH { font-weight: 700; color: #222222; font-size: 1.1875rem; line-height: 1.5; margin-bottom: 12px; }
.p-vision__caseText { font-size: 0.9375rem; line-height: 1.85; margin-bottom: 14px; }
.p-vision__caseFact { font-size: 0.8125rem; font-weight: 700; color: #222222; border-left: 4px solid #FFFF33; padding-left: 10px; line-height: 1.6; }

/* 03 強み */
.p-vision__strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.p-vision__strength { background: #F2F5F5; border-radius: 16px; padding: 32px 28px; position: relative; }
.p-vision__strengthNum {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.875rem;
  width: 32px; height: 32px; border-radius: 50%; background: #484E52; color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.p-vision__strengthH { font-weight: 700; color: #222222; font-size: 1.1875rem; line-height: 1.5; margin-bottom: 18px; }
.p-vision__strengthBig { font-family: "Poppins", "Zen Kaku Gothic New", sans-serif; font-weight: 600; color: #222222; font-size: 2.25rem; line-height: 1.1; white-space: nowrap; }
.p-vision__strengthBig span { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1rem; font-weight: 700; margin-left: 4px; }
.p-vision__strengthCap { font-size: 0.8125rem; color: #484E52; margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid #DADCDC; }
.p-vision__strengthText { font-size: 0.9375rem; line-height: 1.85; }

/* 04 これから */
.p-vision__nexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.p-vision__next { background: #fff; border-radius: 16px; padding: 28px; }
.p-vision__nextH { font-weight: 700; color: #222222; font-size: 1.1875rem; line-height: 1.5; margin-bottom: 12px; padding-left: 14px; border-left: 4px solid #FFFF33; }
.p-vision__next p { font-size: 0.9375rem; line-height: 1.85; }
.p-vision__nextLinks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.p-vision__nextLinks a { font-size: 0.875rem; font-weight: 700; color: #222222 !important; text-decoration: underline !important; text-decoration-color: #FFCC33 !important; text-underline-offset: 4px; }

.p-vision__cta { margin-top: 64px; background: #222222; color: #fff; border-radius: 20px; padding: 48px 40px; text-align: center; }
.p-vision__ctaH { font-family: "Midashi Go MB31", "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: 12px; }
.p-vision__ctaText { line-height: 1.9; margin-bottom: 24px; }
.p-vision__ctaBtn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 16px 32px;
  border-radius: 9999px; background: #FFFF33; color: #222222 !important; font-weight: 700; transition: background-color .2s;
}
.p-vision__ctaBtn:hover { background: #FFCC33; }

/* 中間幅 */
@media screen and (max-width: 1100px) {
  .p-vision__stat { grid-template-columns: 240px minmax(0, 1fr); gap: 0 32px; }
  .p-vision__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-vision__step:nth-child(2):after { content: none; }
  .p-vision__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p-vision__strengths { grid-template-columns: minmax(0, 1fr); }
}

/* スマホ */
@media screen and (max-width: 767px) {
  .p-vision__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
  .p-vision__tocItem { padding: 12px 14px; font-size: 0.875rem; }
  .p-vision__heroText p, .p-vision__secLead { font-size: 1rem; line-height: 1.9; }
  .p-vision__sec { padding: 64px 0; }
  .p-vision__secLead { margin-bottom: 32px; }
  .p-vision__stats { margin-bottom: 40px; }
  .p-vision__stat { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .p-vision__statNum { font-size: 2.75rem; }
  .p-vision__flow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .p-vision__step:after { content: none !important; }
  .p-vision__step:not(:last-child):before {
    content: ""; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
    border-top: 12px solid #FFCC33; border-left: 9px solid transparent; border-right: 9px solid transparent;
  }
  .p-vision__flowNote { text-align: left; }
  .p-vision__cases, .p-vision__nexts { grid-template-columns: minmax(0, 1fr); }
  .p-vision__case, .p-vision__next, .p-vision__strength { padding: 24px 20px; }
  .p-vision__cta { padding: 36px 20px; }
  .p-vision__h3--center { margin: 48px 0 20px; }
}

.p-vision__nb { display: inline-block; }

/* 動き（1.0.4）: 章の英字ラベルはサイト共通の .c-h（一文字ずつせり上がる）を使う。大きさだけこのページに合わせる */
.p-vision__secNum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: #FFFF33; color: #222222; font-size: 0.9375rem;
}
.p-vision__secLabel .c-h.p-vision__secEn { font-size: 0.9375rem; font-weight: 600; letter-spacing: .08em; line-height: 1.3; color: #484E52; transform-origin: left center; }