/* p3-brand-growth.css — brand-growth ページだけの調整（biz3.css の後に読み込む） */

/* 導入と写真3枚は同じ余白トークンで整え、写真側の密度で一続きに見せる */
.b3 #intro, .b3 #photos { padding-block: var(--b3-sec); }

/* 取り組みの2タイルは事例の下に置く */
.b3 #case .b3-grid { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* 事例リンク全体のホバー：写真をわずかに寄せ、矢印を進める */
.b3 .b3-case-hero .b3-photo img { transition: transform 1.6s var(--b3-ease); }
@media (hover: hover) {
  .b3 .b3-case-hero:hover .b3-photo img { transform: scale(1.04); }
  .b3 .b3-case-hero:hover .b3-btn--text::after { transform: translateX(4px); }
}

/* 問い合わせ帯：見出し「ブランドの承継や成長について、ご相談ください」を PC 幅で1行に収める */
.b3 .b3-cta-in { width: min(100%, 56rem); }

/* 写真3枚：タブレット幅でも3列のまま（2＋1の片寄りを避ける） */
@media (max-width: 960px) and (min-width: 601px) {
  .b3 #photos .b3-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 事例：タブレット幅では写真と本文を横並びのまま（写真が全幅で大きくなりすぎない） */
@media (max-width: 960px) and (min-width: 701px) {
  .b3 #case .b3-case-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 進め方：スマートフォン幅では丸を左、文字を右に置き、線は丸の列だけを通す（文字と線が重ならない） */
@media (max-width: 600px) {
  .b3 #approach .b3-flow { gap: 1.6rem; }
  .b3 #approach .b3-flow::before { left: 6px; top: 15px; bottom: 15px; }
  .b3 #approach .b3-flow > li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 1rem; align-items: start; text-align: left; }
  .b3 #approach .b3-flow > li::before { grid-row: 1 / span 2; margin: 8px 0 0; }
  .b3 #approach .b3-flow-h { margin: 0 0 .45rem; }
  .b3 #approach .b3-flow-p { max-width: none; }
}

/* ── FRAMEWORK：承継する会社の強み × B supplyの強み（点線で全部を結ぶ） ── */
.b3 .b3-mx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 27vw, 25rem) minmax(0, 1fr); margin-top: clamp(2.4rem, 4vw, 3.6rem); }
.b3 .b3-mx-cap { height: 2.3rem; margin-bottom: 1.3rem; display: flex; align-items: center; }
.b3 .b3-mx-col--a .b3-mx-cap { justify-content: flex-end; padding-right: calc(7px + .9rem); }
.b3 .b3-mx-col--b .b3-mx-cap { padding-left: calc(7px + .9rem); }
.b3 .b3-mx-cap span { display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; font-size: .95rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.b3 .b3-mx-col--a .b3-mx-cap span { background: var(--b3-ink); color: #fff; }
.b3 .b3-mx-col--b .b3-mx-cap span { background: #ff6a1a; color: #fff; }
.b3 .b3-mx-list { display: grid; grid-auto-rows: 5rem; }
.b3 .b3-mx-item { display: flex; align-items: center; gap: .9rem; }
.b3 .b3-mx-col--a .b3-mx-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.b3 .b3-mx-mask { display: block; overflow: hidden; padding-bottom: .1em; }
.b3 .b3-mx-jp { display: block; font-size: clamp(1.05rem, 1.55vw, 1.45rem); font-weight: 700; line-height: 1.4; letter-spacing: .02em; text-wrap: balance; transition: transform 1s var(--b3-ease); }
.b3 .b3-mx-dot { flex: none; position: relative; width: 9px; height: 9px; border-radius: 50%; background: #ff6a1a; }
.b3 .b3-mx-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px #ff6a1a; opacity: 0; }
.b3 .b3-mx-core { align-self: stretch; display: grid; place-items: center; padding-top: 3.6rem; }
.b3 .b3-mx-x { display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; border-radius: 50%; background: #ff6a1a; z-index: 2; }
.b3 .b3-mx-xs { width: 100%; height: 100%; overflow: visible; }
.b3 .b3-mx-xs path { fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; }
.b3 .b3-mx-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.b3 .b3-mx-ln { fill: none; stroke: #ff6a1a; stroke-opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 7; }
.b3 .b3-mx-mk { fill: none; stroke: #fff; stroke-width: 8; }
.b3 .b3-mx-tr { fill: #ff6a1a; }
html.js .b3 .b3-mx .b3-mx-jp { transform: translateY(110%); transition-delay: calc(var(--i) * 90ms); }
html.js .b3 .b3-mx.in .b3-mx-jp { transform: none; }
html.js .b3 .b3-mx .b3-mx-dot { opacity: 0; transform: scale(.3); }
html.js .b3 .b3-mx.in .b3-mx-dot { opacity: 1; transform: none; transition: opacity .6s calc(var(--i) * 90ms + .4s), transform .8s calc(var(--i) * 90ms + .4s) var(--b3-ease); }
html.js .b3 .b3-mx.in .b3-mx-dot::after { animation: b3MxPulse 2.8s ease-out infinite calc(2.6s + var(--i) * .25s); }
@keyframes b3MxPulse { 0% { opacity: .6; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(2.2); } }
html.js .b3 .b3-mx .b3-mx-x { transform: rotate(-135deg) scale(.4); opacity: 0; }
html.js .b3 .b3-mx.in .b3-mx-x { transform: none; opacity: 1; transition: transform 1.1s .3s var(--b3-ease), opacity .6s .3s; }
html.js .b3 .b3-mx .b3-mx-xs path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .b3 .b3-mx.in .b3-mx-xs path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s .9s var(--b3-ease); }
html.js .b3 .b3-mx.in .b3-mx-xs path + path { transition-delay: 1.05s; }
html.js .b3 .b3-mx.in .b3-mx-xs { animation: b3MxTurn 9s cubic-bezier(.76, 0, .18, 1) 3s infinite; }
@keyframes b3MxTurn { 0%, 42% { transform: rotate(0); } 50%, 92% { transform: rotate(45deg); } 100% { transform: rotate(90deg); } }
html.js .b3 .b3-mx .b3-mx-mk { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .b3 .b3-mx.in .b3-mx-mk { stroke-dashoffset: 0; }
@media (max-width: 960px) {
  .b3 .b3-mx { grid-template-columns: minmax(0, 1fr) clamp(5.2rem, 23vw, 10rem) minmax(0, 1fr); margin-top: 1.8rem; }
  .b3 .b3-mx-cap { height: 2rem; margin-bottom: .9rem; }
  .b3 .b3-mx-col--a .b3-mx-cap { justify-content: flex-start; padding-right: 0; margin-right: -4rem; }
  .b3 .b3-mx-col--b .b3-mx-cap { justify-content: flex-end; padding-left: 0; margin-left: -4rem; }
  .b3 .b3-mx-cap span { padding: .42rem .8rem; font-size: .68rem; letter-spacing: 0; white-space: nowrap; }
  .b3 .b3-mx-list { grid-auto-rows: 4.7rem; }
  .b3 .b3-mx-item { gap: .5rem; }
  .b3 .b3-mx-jp { font-size: clamp(.8rem, 3.2vw, 1.2rem); line-height: 1.5; letter-spacing: 0; }
  .b3 .b3-mx-dot { width: 7px; height: 7px; }
  .b3 .b3-mx-core { padding-top: 2.9rem; }
  .b3 .b3-mx-x { width: 2.7rem; }
  .b3 .b3-mx-xs path { stroke-width: 2.4; }
  .b3 .b3-mx-ln { stroke-width: 1.6; stroke-dasharray: .1 6; stroke-opacity: .8; }
  .b3 .b3-mx-tr { r: 2.6px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .b3 .b3-mx .b3-mx-jp, html.js .b3 .b3-mx .b3-mx-x, html.js .b3 .b3-mx .b3-mx-dot { transform: none !important; opacity: 1 !important; transition: none !important; }
  html.js .b3 .b3-mx .b3-mx-mk, html.js .b3 .b3-mx .b3-mx-xs path { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .b3 .b3-mx .b3-mx-xs { animation: none !important; }
  .b3 .b3-mx-dot::after { animation: none !important; }
}

/* 導入：見出しと本文の下端をそろえ、本文は読みやすい幅に収める */
.b3 .b3-intro { align-items: end; }
.b3 .b3-intro .b3-body { max-width: 36rem; padding-bottom: .55rem; }
.b3 .b3-intro .b3-body p { font-size: 1.02rem; line-height: 2; text-wrap: pretty; }
@media (max-width: 960px) { .b3 .b3-intro { align-items: start; } .b3 .b3-intro .b3-body { max-width: none; padding-bottom: 0; } }

/* 強みの図の導入文：幅の上限を外し、PCでは折り返さず1行で読める長さにする */
.b3 #framework .b3-lede { max-width: none; }