/* 花がかりとは（/about。FR-HGS-021）。2026-11-10 法人向けサービス紹介ページの型（帯の見出し・目次・はじめに・お悩み・なぜ家族・紹介・なぜ花・記念日・続けると・料金・質問）。
   色・余白・書体は site.css の変数だけ。動きは使わない */

:root {
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 6px 24px rgba(30, 37, 33, 0.1);
}

.sp { display: none; }

/* ---- パンくず ---- */
.ab-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; font-size: 13px; color: var(--color-muted); }
.ab-crumb li + li::before { content: ">"; margin-right: var(--space-2); }
.ab-crumb a { color: var(--color-muted); }

/* ---- 最初の画面: 左に大きな明朝、右に写真を 2 枚重ねる（花のブランドサイトの型） ---- */
.ab-hero { background: var(--color-bg); padding: var(--space-12) 0 var(--space-24); overflow: hidden; }
.ab-hero__in { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.ab-hero__who { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-accent); border-bottom: 1px solid var(--color-accent); padding-bottom: var(--space-1); }
.ab-hero h1 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.4; margin: var(--space-6) 0 var(--space-6); letter-spacing: 0.02em; }
.ab-hero__sub { font-size: 17px; line-height: 2; max-width: 26em; }
.ab-hero__photo { position: relative; margin: 0; min-width: 0; padding: 0 0 var(--space-16) var(--space-12); }
.ab-hero__photo > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 160px 160px var(--radius-lg) var(--radius-lg); }
.ab-hero__sub-photo { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); border: 6px solid var(--color-bg); box-shadow: var(--shadow-md); }

/* ---- 料金・基本料・手間の 3 つと入口 ---- */
.ab-facts-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-top: calc(-1 * var(--space-16)); position: relative; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8) var(--space-10); max-width: calc(var(--container) - var(--space-8)); }
.ab-facts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.ab-facts > div { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); }
.ab-facts dt { font-size: 13px; font-weight: 700; color: var(--color-muted); }
.ab-facts dd { margin: 0; }
.ab-facts b { display: block; font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--color-primary); white-space: nowrap; }
.ab-facts span { font-size: 13px; }
.ab-facts-row__cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ab-textlink { color: var(--color-primary); min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

/* ---- 丸いボタン ---- */
.ab-pill { border-radius: var(--radius-pill); min-width: 320px; justify-content: center; box-shadow: var(--shadow); }
.ab-pill::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: var(--space-4); }
.ab-cta { text-align: center; margin-top: var(--space-12); }

/* ---- 目次: 番号つきの索引 ---- */
.ab-toc { padding-top: var(--space-16); padding-bottom: var(--space-20); }
.ab-toc__h { font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.2em; color: var(--color-muted); text-align: center; margin-bottom: var(--space-5); }
.ab-toc ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.ab-toc li { border-bottom: 1px solid var(--color-line); }
.ab-toc li:not(:nth-child(3n)) { border-right: 1px solid var(--color-line); }
.ab-toc a { position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-10) var(--space-3) var(--space-5); color: var(--color-primary); font-weight: 700; font-size: 15px; line-height: 1.4; text-decoration: none; }
.ab-toc a span { font-family: var(--font-serif); font-size: 20px; color: var(--color-accent); }
.ab-toc a::after { content: ""; position: absolute; right: var(--space-5); top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ab-toc a:hover { background: var(--color-tint); }

/* ---- 節: 番号と大きな明朝の見出し ---- */
.ab-sec { padding: var(--space-24) 0; scroll-margin-top: 72px; }
.ab-sec--tint { background: var(--color-tint); }
.ab-sec--dark { background: var(--color-primary); color: var(--color-bg); }
.ab-head { text-align: center; margin: 0 auto var(--space-12); padding: 0 var(--gutter); }
.ab-head__n { font-family: var(--font-serif); font-weight: 700; font-size: 15px; letter-spacing: 0.2em; color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-3); }
.ab-head__n::before, .ab-head__n::after { content: ""; width: 32px; border-top: 1px solid currentColor; }
.ab-head h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.45; margin-top: var(--space-3); letter-spacing: 0.04em; }
.ab-sec--dark .ab-head h2 { color: var(--color-bg); }
.ab-sec--dark .ab-head__n { color: var(--color-accent-light); }
.ab-lead-c { text-align: center; font-weight: 700; color: var(--color-primary); font-size: 17px; line-height: 1.9; margin: 0 auto var(--space-10); max-width: 46em; }
.ab-lead-c--big { font-family: var(--font-serif); font-size: clamp(19px, 2vw, 24px); }
.ab-subhead { text-align: center; font-size: clamp(19px, 2vw, 23px); margin: var(--space-16) auto var(--space-6); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary); width: fit-content; max-width: 100%; }
.ab-note { margin-top: var(--space-6); font-size: 14px; color: var(--color-muted); }
.ab-note--c { text-align: center; }

/* ---- 写真・図と文の 2 列 ---- */
.ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.ab-two__img { margin: 0; min-width: 0; }
.ab-two__img > img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.ab-two__text h3 { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.5; margin-bottom: var(--space-5); }
.ab-two__text p { line-height: 2; }
.ab-two__text p + p { margin-top: var(--space-4); }

/* はじめにの図 */
.ab-rel__svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.ab-rel__panel { fill: var(--color-surface); stroke: var(--color-line); }
.ab-rel__panel--on { fill: var(--color-tint); stroke: none; }
.ab-rel__cap { font-size: 15px; font-weight: 700; fill: var(--color-muted); }
.ab-rel__cap--on { fill: var(--color-primary); }
.ab-rel__node rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2; }
.ab-rel__node text { font-family: var(--font-serif); font-size: 20px; font-weight: 700; fill: var(--color-primary); text-anchor: middle; }
.ab-rel__node--fam rect { fill: var(--color-primary); }
.ab-rel__node--fam text { fill: var(--color-bg); }
.ab-rel__line { stroke: var(--color-primary); stroke-width: 2; fill: none; }
.ab-rel__none { stroke: var(--color-line); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.ab-rel__gift, .ab-rel__head { stroke: var(--color-accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-rel__note { font-size: 15px; font-weight: 700; fill: var(--color-muted); text-anchor: middle; }
.ab-rel__note--on { fill: var(--color-accent); }

/* カードの写真 */
.ab-cardphoto { position: relative; padding-bottom: var(--space-12); }
.ab-cardphoto > img { aspect-ratio: 1 / 1; object-fit: cover; width: 86%; box-shadow: var(--shadow-md); }
.ab-cardphoto__card { position: absolute; right: 0; bottom: 0; width: 64%; }

/* ---- お悩み ---- */
.ab-prob { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.ab-check { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ab-check li { position: relative; padding: var(--space-5) var(--space-4) var(--space-5) 52px; background: color-mix(in srgb, var(--color-bg) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent); border-radius: var(--radius-lg); font-weight: 700; line-height: 1.6; color: var(--color-bg); }
.ab-check li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--color-accent-light); border-radius: var(--radius); }
.ab-check li::after { content: ""; position: absolute; left: 24px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); }
.ab-prob__img { margin: 0; background: var(--color-bg); border-radius: 50%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; max-width: 320px; justify-self: center; width: 100%; }
.ab-prob__img img { display: block; width: 66%; height: auto; }
.ab-answer { position: relative; text-align: center; font-family: var(--font-serif); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); color: var(--color-bg); margin-top: var(--space-12); padding-top: var(--space-12); }
.ab-answer::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -32px; border-left: 32px solid transparent; border-right: 32px solid transparent; border-top: 26px solid var(--color-accent-light); }
.ab-answer .ib { display: inline-block; }
.ab-answer b { color: var(--color-accent-light); font-size: 1.2em; }

/* ---- なぜ家族 ---- */
.ab-why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: center; }
.ab-why__fig { background: var(--color-tint); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-10); text-align: center; }
.ab-why__fig .picto { margin: 0 auto; }
.ab-why__big { font-family: var(--font-serif); font-weight: 700; color: var(--color-primary); font-size: clamp(72px, 9vw, 120px); line-height: 1; margin-top: var(--space-6); }
.ab-why__big span { font-size: 0.4em; margin-left: 2px; }
.ab-why__text h3 { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.5; margin-bottom: var(--space-5); }
.ab-why__text p { line-height: 2; }
.ab-why__text p + p { margin-top: var(--space-4); }
.ab-why__text .ab-why__src { font-size: 13px; line-height: 1.8; color: var(--color-muted); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

/* ---- なぜ花 ---- */
.ab-reasons { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ab-reasons li { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.ab-reasons img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ab-reasons li > div { padding: var(--space-6); }
.ab-reasons__n { font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1; color: var(--color-accent); }
.ab-reasons h3 { font-size: 20px; line-height: 1.5; margin: var(--space-3) 0; }
.ab-reasons li p:last-child { font-size: 15px; line-height: 1.9; }

/* ---- 記念日のカード ---- */
.ab-scenes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.ab-scenes li { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.ab-scenes__label { position: relative; background: var(--color-primary); color: var(--color-bg); text-align: center; padding: var(--space-4) var(--space-2); }
.ab-scenes__label::after { content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--color-primary); z-index: 1; }
.ab-scenes__label b { display: block; font-family: var(--font-serif); font-size: 18px; line-height: 1.4; }
.ab-scenes__label span { display: block; font-size: 12px; color: var(--color-tint); margin-top: 2px; }
.ab-scenes img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ab-scenes li > p:last-child { font-size: 15px; line-height: 1.8; padding: var(--space-4) var(--space-5) var(--space-5); }

/* ---- 続けると ---- */
.ab-years { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); position: relative; }
.ab-years::before { content: ""; position: absolute; left: 16%; right: 16%; top: 36px; border-top: 2px dashed var(--color-line); }
.ab-years li { position: relative; text-align: center; }
.ab-years__y { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 72px; padding: 0 var(--space-5); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-bg); font-family: var(--font-serif); font-weight: 700; font-size: 22px; }
.ab-years li:last-child .ab-years__y { background: var(--color-accent); }
.ab-years h3 { font-size: 20px; line-height: 1.5; margin: var(--space-5) 0 var(--space-3); }
.ab-years li > p:last-child { font-size: 15px; line-height: 1.9; text-align: left; }
.ab-keep { margin-top: var(--space-12); background: var(--color-tint); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-10); }
.ab-keep h3 { font-size: clamp(19px, 2vw, 23px); margin-bottom: var(--space-3); }
.ab-keep p { line-height: 2; }

/* ---- 料金 ---- */
.ab-plan { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.ab-plan li { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; text-align: center; box-shadow: var(--shadow); }
.ab-plan__label { background: var(--color-tint); color: var(--color-primary); font-weight: 700; padding: var(--space-3); font-size: 17px; }
.ab-plan li:nth-child(2) .ab-plan__label { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-tint)); color: var(--color-bg); }
.ab-plan li:nth-child(3) .ab-plan__label { background: var(--color-primary); color: var(--color-bg); }
.ab-plan__desc { padding: var(--space-5) var(--space-5) 0; font-size: 15px; line-height: 1.8; text-align: left; min-height: 5.4em; }
.ab-plan__fig { display: block; width: 72%; max-width: 220px; height: auto; margin: var(--space-2) auto 0; }
.pl-person { fill: var(--color-tint); }
.pl-paper { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 1.5; }
.pl-paper2 { fill: var(--color-bg); }
.pl-leaf { fill: var(--color-primary); }
.pl-fa { fill: var(--color-accent-light); }
.pl-fb { fill: var(--color-accent); }
.pl-fc { fill: var(--color-surface); stroke: var(--color-accent-light); stroke-width: 2; }
.pl-core { fill: var(--color-bg); opacity: 0.8; }
.ab-plan__price { margin: 0 var(--space-5); border-top: 1px solid var(--color-line); padding-top: var(--space-4); font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 3vw, 38px); color: var(--color-primary); line-height: 1.2; white-space: nowrap; }
.ab-plan__price small { font-size: 14px; }
.ab-plan__in { font-size: 14px; color: var(--color-muted); padding: var(--space-1) 0 var(--space-5); }
.ab-price1 { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-12) var(--space-6); text-align: center; }
.ab-price1__price { font-family: var(--font-serif); font-weight: 700; color: var(--color-primary); font-size: clamp(48px, 7vw, 88px); line-height: 1.1; }
.ab-price1__unit { font-size: 0.4em; margin-right: var(--space-2); }
.ab-price1__tail { font-size: 0.3em; margin-left: var(--space-1); }
.ab-price1__in { margin-top: var(--space-4); color: var(--color-muted); }
.ab-plans { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.ab-plans li { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 0 var(--space-6) var(--space-6); text-align: center; overflow: hidden; }
.ab-plans__label { margin: 0 calc(-1 * var(--space-6)) var(--space-6); padding: var(--space-3); background: var(--color-bg); color: var(--color-primary); font-weight: 700; }
.ab-plans li.is-base { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.ab-plans li.is-base .ab-plans__label { background: var(--color-primary); color: var(--color-bg); }
.ab-plans__price { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 3.6vw, 44px); color: var(--color-primary); line-height: 1.2; white-space: nowrap; }
.ab-plans__price small { font-size: 14px; }
.ab-plans__in { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-5); }
.ab-plans li > p:last-child { font-size: 15px; line-height: 1.8; border-top: 1px solid var(--color-line); padding-top: var(--space-4); }
.ab-spec { margin-top: var(--space-10); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-8); }
.ab-spec > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.ab-spec > div:last-child { border-bottom: 0; }
.ab-spec dt { font-weight: 700; color: var(--color-primary); }
.ab-spec dd { margin: 0; line-height: 1.8; }
.ab-start { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.ab-start li { counter-increment: st; position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; }
.ab-start li::before { content: counter(st); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto var(--space-3); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-bg); font-family: var(--font-serif); font-weight: 700; font-size: 20px; }
.ab-start li + li::after { content: ""; position: absolute; left: -22px; top: 50%; margin-top: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 12px solid var(--color-primary); }
.ab-start b { display: block; font-family: var(--font-serif); font-size: 17px; color: var(--color-primary); line-height: 1.5; }
.ab-start span { display: block; font-size: 14px; line-height: 1.7; margin-top: var(--space-2); color: var(--color-muted); }
.ab-more { text-align: center; margin-top: var(--space-8); }
.ab-more a { color: var(--color-primary); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- 先にお伝えしておくこと ---- */
.ab-limits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ab-limits li { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-5) var(--space-6); line-height: 1.8; }
.ab-limits b { display: block; font-family: var(--font-serif); font-size: 18px; color: var(--color-primary); margin-bottom: var(--space-1); }
.ab-privacy { margin-top: var(--space-6); }
.ab-privacy a { color: var(--color-primary); margin-left: var(--space-2); }

/* ---- よくある質問: 開閉するカード ---- */
.ab-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ab-faq details { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ab-faq summary { position: relative; list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5); font-weight: 700; color: var(--color-primary); line-height: 1.6; }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::before { content: "Q"; flex: 0 0 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-bg); font-family: var(--font-serif); font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ab-faq summary::after { content: ""; position: absolute; right: var(--space-5); top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ab-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ab-faq details p { position: relative; margin: 0 var(--space-5) 0; padding: var(--space-4) 0 var(--space-5) 52px; border-top: 1px solid var(--color-line); line-height: 1.9; }
.ab-faq details p::before { content: "A"; position: absolute; left: 0; top: var(--space-4); width: 36px; height: 36px; border-radius: var(--radius-pill); border: 2px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-serif); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ab-faq p a { color: var(--color-primary); font-weight: 700; margin-left: var(--space-2); }

@media (max-width: 900px) {
  .sp { display: inline; }
  .ab-hero { padding: var(--space-6) 0 var(--space-20); }
  .ab-hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .ab-hero__photo { padding: 0 0 var(--space-10) var(--space-8); max-width: 520px; }
  .ab-hero__photo > img:first-child { border-radius: 120px 120px var(--radius-lg) var(--radius-lg); }
  .ab-check { grid-template-columns: minmax(0, 1fr); }
  .ab-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-toc li:not(:nth-child(3n)) { border-right: 0; }
  .ab-toc li:nth-child(odd) { border-right: 1px solid var(--color-line); }
  .ab-facts-row { grid-template-columns: minmax(0, 1fr); margin: calc(-1 * var(--space-8)) var(--space-4) 0; padding: var(--space-6); width: auto; }
  .ab-toc a { padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3); font-size: 14px; gap: var(--space-2); }
  .ab-toc a span { font-size: 16px; }
  .ab-toc a::after { right: var(--space-3); }
  .ab-prob, .ab-two, .ab-why { grid-template-columns: minmax(0, 1fr); }
  .ab-prob { padding: var(--space-6) var(--space-4); gap: var(--space-6); }
  .ab-prob__img { order: -1; }
  .ab-prob__img img { max-width: 160px; }
  .ab-reasons, .ab-years { grid-template-columns: minmax(0, 1fr); }
  .ab-years::before { display: none; }
  .ab-years li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-4); text-align: left; align-items: start; }
  .ab-years__y { grid-row: span 2; min-width: 0; width: 96px; height: 56px; font-size: 17px; padding: 0; }
  .ab-years h3 { margin: 0 0 var(--space-2); }
  .ab-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .ab-plans, .ab-plan { grid-template-columns: minmax(0, 1fr); }
  .ab-plan__desc { min-height: 0; }
  .ab-plan__fig { width: 52%; }
  .ab-start { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .ab-start li + li::after { display: none; }
  .ab-limits, .ab-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ab-sec { padding: var(--space-16) 0; }
  .ab-head { margin-bottom: var(--space-10); }
  .ab-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ab-facts > div { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
  .ab-facts dt { min-width: 6em; }
  .ab-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
  .ab-facts b { display: inline; }
  .ab-pill { min-width: 0; width: 100%; }
  .ab-scenes__label b { font-size: 15px; }
  .ab-scenes li > p:last-child { font-size: 14px; padding: var(--space-3) var(--space-3) var(--space-4); }
  .ab-spec { padding: var(--space-2) var(--space-5); }
  .ab-spec > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .ab-toc ol { grid-template-columns: minmax(0, 1fr); }
  .ab-toc li:nth-child(odd) { border-right: 0; }
  .ab-toc a { min-height: 52px; }
  .ab-start { grid-template-columns: minmax(0, 1fr); }
  .ab-keep { padding: var(--space-6); }
}