/* 案G「幾何学」：章ごとの考え方を、3Dの幾何学で見せる
   文字組み：見出しは約物を詰め（palt）、行の途中で語句を割らない（.ib と auto-phrase）。本文は1行30字前後、行間2.1。
   G1 線の幾何学：文と線の立体を2段に（章ごとに左右を入れ替え）
   G2 面の幾何学：立体を画面いっぱいの舞台に置き、見出しの言葉を舞台に重ねる
   G3 弦の幾何学：文は左の1列、右の背景で弦の彫刻が章ごとに形を変える */

.br-g { --g-gap: clamp(40px, 6vw, 96px); }
.g-night { position: fixed; inset: 0; z-index: -1; background: #0a0c11; opacity: 0; pointer-events: none; }
.br-g .sec.g-sec { padding-top: clamp(96px, 10vw, 160px); padding-bottom: clamp(48px, 5vw, 80px); transition: none; }
.br-g .g-sec:last-of-type { padding-bottom: clamp(96px, 10vw, 160px); }
.br-g .g-in { max-width: 1240px; }
.br-g .d-k { margin: 0; }

/* ---------- type ---------- */
.br-g .g-lead { margin: 0 0 32px; font-weight: 400; font-size: 40px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; color: var(--fg); }
.br-g .g-body { margin: 0 0 48px; max-width: 30em; font-size: 16px; line-height: 2.1; letter-spacing: .06em; color: var(--muted); word-break: auto-phrase; text-wrap: pretty; }
.br-g .mono { font-family: var(--f-mono); }
.br-g .g-no { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

/* lists: number | name, then the text */
.br-g .g-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.br-g .g-list > li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); outline-offset: 4px; transition: color .4s; }
.br-g .g-list > li > .g-no { grid-row: 1 / span 3; padding-top: 6px; }
.br-g .g-list b { font-weight: 500; font-size: 18px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; }
.br-g .g-list b .en { margin-left: 14px; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.br-g .g-list .d { font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: var(--muted); word-break: auto-phrase; }
.br-g .g-list .tg { font-size: 12px; line-height: 1.8; letter-spacing: .08em; color: var(--fg); }
.br-g .g-list .o { display: flex; gap: 12px; align-items: baseline; font-size: 12px; letter-spacing: .06em; }
.br-g .g-list .o .mono { color: var(--blue); letter-spacing: .14em; text-transform: uppercase; }
.br-g .g-list > li:is(:hover, :focus-visible, .is-cur) .g-no, .br-g .g-list > li:is(:hover, :focus-visible, .is-cur) b { color: var(--blue); }
.br-g .g-def > li { grid-template-columns: 7.5em minmax(0, 1fr); }
.br-g .g-steps > li { padding: 16px 0 18px; }
.br-g .g-zero, .br-g .g-loop { display: flex; align-items: baseline; gap: 16px; margin: 32px 0 0; font-size: 20px; line-height: 1.6; letter-spacing: .12em; font-feature-settings: "palt"; }
.br-g .g-zero::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--fg); transform: translateY(-.35em); }
.br-g .g-loop .mono { font-size: 12px; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; }

/* do & don't */
.br-g .g-dd { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
.br-g .g-dd thead th { padding: 14px 0; text-align: left; font: 400 12px/1.4 var(--f-mono); letter-spacing: .14em; color: var(--muted); border-bottom: 1px solid var(--line); }
.br-g .g-dd tbody tr { border-bottom: 1px solid var(--line); }
.br-g .g-dd th[scope="row"] { width: 3.5em; padding: 22px 0; vertical-align: top; text-align: left; font-weight: 400; font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.br-g .g-dd td { padding: 20px 24px 20px 0; vertical-align: top; }
.br-g .g-dd td.n { width: 30%; font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: var(--muted); word-break: auto-phrase; }
.br-g .g-dd td.n s { text-decoration-thickness: 1px; }
.br-g .g-dd td.y b { display: block; font-weight: 500; font-size: 18px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; word-break: auto-phrase; }
.br-g .g-dd td.y span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: var(--muted); word-break: auto-phrase; }

/* benefit */
.br-g .g-bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--g-gap); margin: 64px 0 0; padding: 0; list-style: none; }
.br-g .g-ben-h { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.br-g .g-ben-h b { font-weight: 500; font-size: 20px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; }
.br-g .g-bens .d { margin: 0; font-size: 14px; line-height: 1.95; letter-spacing: .05em; color: var(--muted); word-break: auto-phrase; }

/* fit */
.br-g .g-fit .g-lead { margin-top: 48px; }
.br-g .g-fitw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--g-gap); }
.br-g .g-fitw .br-label { margin: 0 0 14px; }
.br-g .g-fitw ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.br-g .g-fitw li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.8; letter-spacing: .06em; word-break: auto-phrase; }
.br-g .g-fitw .g li { padding-left: 24px; position: relative; }
.br-g .g-fitw .g li::before { content: ""; position: absolute; left: 2px; top: 1.32em; width: 8px; height: 1px; background: var(--blue); }
.br-g .g-fitw .o b { display: block; font-weight: 500; }
.br-g .g-fitw .o span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.br-g .br-faq, .br-g .la-wks { margin-top: 56px; }

/* ---------- the figures ---------- */
html:not(.gl-ok) .br-g .g-fig { display: none; }
.br-g .g-fig { position: relative; margin: 0; }
.br-g .g-cv { position: relative; aspect-ratio: 1 / 1; }
.br-g .g-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.br-g .g-fig figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-g .g-fno { font-size: 12px; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; }
.br-g .g-fnm { font-size: 14px; letter-spacing: .04em; color: var(--fg); }
.br-g .g-fcap { grid-column: 1 / -1; max-width: 28em; font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: var(--muted); word-break: auto-phrase; }
.br-g .g-fig-s .g-cv { aspect-ratio: 4 / 3; }
.br-g .g-fig-s figcaption { position: absolute; left: 24px; top: 0; margin: 0; padding: 0; border: 0; }
.br-g .g-fig-s .g-fnm { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.br-g .g-lbs { position: absolute; inset: 0; pointer-events: none; }
.br-g .g-lb { position: absolute; left: 0; top: 0; padding-bottom: 14px; white-space: nowrap; font-size: 14px; letter-spacing: .12em; font-feature-settings: "palt"; color: var(--fg); transition: color .4s; will-change: transform; }
.br-g .g-lb::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 10px; background: currentColor; opacity: .5; }
.br-g .g-lb.on { color: var(--blue); }

/* ================= G1 線の幾何学 ================= */
.br-g1 .g-lead, .br-g3 .g-lead { font-size: 32px; line-height: 1.65; }
.br-g1 .g-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 var(--g-gap); align-items: center; margin-top: 64px; }
.br-g1 .g-grid.g-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.br-g1 .g-flip .g-fig { order: -1; }
.br-g1 .g-fig .g-cv::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 16px 1px no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 1px 16px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 16px 1px no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 16px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 16px 1px no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 1px 16px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) 100% 100% / 16px 1px no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 100% 100% / 1px 16px no-repeat,
              linear-gradient(var(--line), var(--line)) 50% 50% / 1px 24px no-repeat, linear-gradient(var(--line), var(--line)) 50% 50% / 24px 1px no-repeat; }

/* ================= G2 面の幾何学 ================= */
.br-g2 .g-stage { position: relative; height: clamp(560px, 92vh, 980px); margin-top: 56px; }
.br-g2 .g-stage .g-fig { position: absolute; inset: 0; }
.br-g2 .g-stage .g-cv { aspect-ratio: auto; height: 100%; }
.br-g2 .g-stage figcaption { position: absolute; right: var(--gutter); top: 32px; width: min(22em, 30vw); margin: 0; }
.br-g2 .g-stage-tx { position: absolute; left: 0; right: 0; bottom: clamp(32px, 5vh, 64px); padding: 0 var(--gutter); pointer-events: none; }
.br-g2 .g-stage-tx .g-lead { margin: 0; font-size: 64px; line-height: 1.45; letter-spacing: .06em; }
.br-g2 .g-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--g-gap); margin-top: 64px; align-items: start; }
.br-g2 .g-cols .g-body { margin: 0; }
.br-g2 .g-cols:not(:has(.g-body)) { grid-template-columns: minmax(0, 1fr); }
.br-g2 .g-grid { margin-top: 56px; }
.br-g2 .g-fit .g-grid, .br-g2 .g-grid:not(:has(.g-fig)) { display: block; }
.br-g2 .g-fig-s .g-cv { aspect-ratio: 4 / 5; }

/* ================= G3 弦の幾何学 ================= */
.g3-cv { position: fixed; left: 0; right: 0; top: var(--barh, 64px); bottom: 0; z-index: 0; pointer-events: none; opacity: 0; }
.g3-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-g3 main, .br-g3 #contact, .br-g3 footer { position: relative; z-index: 1; }
.br-g3 .g-grid { max-width: 600px; margin-top: 64px; }
.br-g3 .g-sec[data-shape]:not(.g-faq):not(.g-projects) { min-height: 100vh; }
.br-g3 .g-bens { grid-template-columns: minmax(0, 1fr); max-width: 600px; gap: 32px; }
.br-g3 .g-fit .g-lead, .br-g3 .g-fitw { max-width: 600px; }
.br-g3 .g-fitw { grid-template-columns: minmax(0, 1fr); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .br-g1 .g-grid, .br-g1 .g-grid.g-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .br-g .g-lead { font-size: 32px; }
  .br-g2 .g-stage-tx .g-lead { font-size: 48px; }
  .br-g .g-list > li { grid-template-columns: 6em minmax(0, 1fr); }
  .br-g3 .g-grid { max-width: 52%; }
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .br-g .g-lead { font-size: 24px; line-height: 1.7; letter-spacing: .06em; margin-bottom: 20px; }
  .br-g .g-body { font-size: 14px; line-height: 2.05; margin-bottom: 32px; }
  .br-g1 .g-grid, .br-g1 .g-grid.g-flip { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .br-g1 .g-fig { order: -1; margin: 0 0 32px; }
  .br-g .g-list > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 16px 0 18px; }
  .br-g .g-list > li > .g-no { grid-row: auto; padding: 0; }
  .br-g .g-list b { font-size: 16px; }
  .br-g .g-zero, .br-g .g-loop { font-size: 16px; }
  .br-g .g-dd thead { display: none; }
  .br-g .g-dd, .br-g .g-dd tbody, .br-g .g-dd tr, .br-g .g-dd th, .br-g .g-dd td { display: block; width: auto !important; }
  .br-g .g-dd tr { padding: 16px 0; }
  .br-g .g-dd th[scope="row"] { padding: 0 0 6px; }
  .br-g .g-dd td { padding: 0; }
  .br-g .g-dd td.n { margin-bottom: 6px; }
  .br-g .g-dd td.y b { font-size: 16px; }
  .br-g .g-bens { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .br-g .g-fitw { grid-template-columns: minmax(0, 1fr); }
  .br-g .g-fig figcaption { margin-top: 12px; }
  .br-g .g-lb { font-size: 12px; }
  .br-g2 .g-stage { height: 76vh; height: 76svh; margin: 32px 0 0; }
  .br-g2 .g-stage figcaption { display: none; }
  .br-g2 .g-stage-tx .g-lead { font-size: 24px; line-height: 1.7; }
  .br-g2 .g-cols { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .br-g3 .g-grid { margin-top: 32px; }
  .br-g3 .g-sec[data-shape]:not(.g-faq):not(.g-projects) { min-height: 0; }
}

/* G6 adopted (2026-10-14): chapter leads at weight 500; the page lead "価格ではなく、「らしさ」で選ばれる。" on one line (proportional punctuation, tighter tracking) wherever the column is wide enough; phones keep the two phrases */
.br-g6 .g-lead { font-weight: 500; }
@media (min-width: 600px) { .br-g6 .pg-intro .cs-lead { white-space: nowrap; letter-spacing: .02em; font-feature-settings: "palt"; } }

/* ---------- the branding page with the copy for search (brand_seo.py, 2026-10-14) ---------- */
.br-g6 h2.br-k { font-weight: 400; }
.br-g6 .g-body.g-more { margin: 40px 0 0; }
.br-g6 .g-body.g-more + .g-body.g-more { margin-top: 24px; }
.br-g6 .g-sub { margin: 80px 0 24px; max-width: 600px; font-weight: 500; font-size: 20px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt"; word-break: auto-phrase; }
.br-g6 .g-inds { max-width: 600px; }
.br-g6 .g-inds .d a { color: var(--fg); white-space: nowrap; }
.br-g6 .g-cost .g-lead { margin-top: 48px; }
.br-g6 .g-cost .g-body { max-width: 600px; }
.br-g6 .g-cost .g-body + .g-body { margin-top: -24px; }
.br-g6 .g-pj { margin: 0 0 40px; }
.br-g6 .g-pj + .la-wks { margin-top: 0; }
@media (max-width: 900px) {
  .br-g6 .g-body.g-more { margin-top: 32px; }
  .br-g6 .g-sub { margin: 56px 0 16px; font-size: 18px; }
  .br-g6 .g-cost .g-body + .g-body { margin-top: -12px; }
}

/* the blue mark of the lists ("向いているご相談", "お見積もりに関わる主な項目") sits on the middle of the first line's ink
   (p4.js measures it into --oc-y; before that, the middle of the first line box) — 2026-10-14 */
.br-g6 .g-fitw .g li::before { top: var(--oc-y, calc(16px + .9em)); transform: translateY(-50%); }