/*
 * assets/css/kt-keiei-mieruka.css — デザイン案B（STUDIO の DESIGN.md を骨格に）/ 2026-10-02
 * 骨格: design-references/awesome-design-md-jp/design-md/studio/DESIGN.md
 *   Inter + Noto Sans JP / 見出し600・字間0 / 本文15px・行間1.7 / #222・#707070・#f7f7f7
 *   CTAはピル型#222、補助は枠線radius4px / カードradius12px＋薄い影 / 容器1200px / 小さい文字は負の字間
 *   STUDIOの青は使わない。アクセントは深緑 #c8452c を点で使う。
 * 本文の正本: 本番 r18（2026-10-02 16:40）の文をそのまま使用。
 */
:root {
  --ksb-text: #222222;
  --ksb-text2: #707070;
  --ksb-on-dark: #f7f7f7;
  --ksb-bg: #ffffff;
  --ksb-surface: #f7f7f7;
  --ksb-line: #e6e6e6;
  --ksb-dark: #222222;
  --ksb-dark-card: #ffffff;
  --ksb-dark-line: #e6e6e6;
  --ksb-accent: #c8452c;
  --ksb-accent-tint: #faeae6;
  --ksb-shadow-1: 0 2px 8px rgba(0,0,0,.08);
  --ksb-shadow-2: 0 4px 16px rgba(0,0,0,.12);
  --ksb-shadow-3: 0 24px 60px rgba(0,0,0,.14);
  --ksb-font: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ksb-mono: "IBM Plex Mono", monospace;
  --ksb-max: 1200px;
  --ksb-pad: 32px;
}

/* ---- Lightning: 全幅化（旧版から継承） ---- */
body.kt-km-fullwidth #main,
body.kt-km-fullwidth .main-section { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; }
body.kt-km-fullwidth .sub-section,
body.kt-km-fullwidth #sub_section { display: none !important; }
body.kt-km-fullwidth .site-body-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
body.kt-km-fullwidth .m-body { padding-block: 0 !important; }
body.kt-km-fullwidth .breadcrumb { display: none !important; }
body.kt-km-fullwidth .kt-footer { margin-top: 0 !important; }
body.kt-km-fullwidth .l-cta-contact { display: none !important; }

/* ---- 土台 ---- */
.ksb-page { width: 100%; font-family: var(--ksb-font); font-size: 17px; line-height: 1.7; color: var(--ksb-text); background: var(--ksb-bg); letter-spacing: 0; font-feature-settings: normal; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
.ksb-page *, .ksb-page *::before, .ksb-page *::after { box-sizing: border-box; }
.ksb-page img { max-width: 100%; height: auto; display: block; }
html body .ksb-page a, html body .ksb-page a:link, html body .ksb-page a:visited, html body .ksb-page a:hover, html body .ksb-page a:focus, html body .ksb-page a:active { color: inherit; text-decoration: none; }
.ksb-page ul, .ksb-page ol { margin: 0; padding: 0; list-style: none; }
.ksb-page p { margin: 0; }
.ksb-page h1, .ksb-page h2, .ksb-page h3, .ksb-page h4 { margin: 0; padding: 0; border: 0; background: none; font-family: var(--ksb-font); font-weight: 600; letter-spacing: 0; color: inherit; }
.ksb-page h2::before, .ksb-page h2::after, .ksb-page h3::before, .ksb-page h3::after { content: none; }
.ksb-page table { margin: 0; border: 0; }
.ksb-wrap { max-width: var(--ksb-max); margin: 0 auto; padding: 0 var(--ksb-pad); }
.ksb-sec { padding: 96px 0; margin: 0; scroll-margin-top: 90px; }
.ksb-sec--surface { background: var(--ksb-surface); }
.ksb-sec--dark { background: var(--ksb-surface); color: var(--ksb-text); }
.ksb-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.ksb-label { font-size: 15px; font-weight: 500; letter-spacing: -.26px; color: var(--ksb-text2); }
.ksb-label--num { font-family: var(--ksb-mono); font-size: 13px; letter-spacing: -.44px; color: var(--ksb-text2); }
.ksb-sec--dark .ksb-label { color: var(--ksb-text2); }
html body.page #main.ksb-page h2.ksb-h2 { font-size: 36px; line-height: 1.25; margin: 16px 0 20px; font-weight: 600; }
.ksb-h2--center { text-align: center; }
.ksb-lead { font-size: 17px; line-height: 1.7; color: var(--ksb-text2); max-width: 760px; }
.ksb-lead strong, .ksb-prose strong { color: var(--ksb-text); font-weight: 600; }
.ksb-lead--center { margin: 0 auto; text-align: center; }
.ksb-sec--dark .ksb-lead { color: var(--ksb-text2); }
.ksb-sec--dark .ksb-lead strong { color: var(--ksb-text); }
.ksb-prose { font-size: 17px; line-height: 1.8; color: var(--ksb-text2); max-width: 760px; margin-bottom: 14px; }
.ksb-u { position: relative; white-space: nowrap; }
.ksb-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 2px dotted currentColor; opacity: .55; }

/* ---- ボタン ---- */
html body .ksb-page .ksb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ksb-dark); color: var(--ksb-on-dark); font-size: 15px; font-weight: 500; letter-spacing: -.26px; padding: 12px 24px; border-radius: 500px; border: 1px solid var(--ksb-dark); line-height: 1.2; white-space: nowrap; text-decoration: none; }
html body .ksb-page .ksb-btn--lg { font-size: 16px; padding: 15px 28px; }
html body .ksb-page .ksb-btn--ghost { background: transparent; color: var(--ksb-text); border: 1px solid var(--ksb-text); border-radius: 4px; }
.ksb-btn .ksb-arr { display: inline-block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 12px; text-align: center; }
.ksb-link { font-size: 16px; font-weight: 500; letter-spacing: -.28px; text-decoration: underline !important; text-underline-offset: 4px; }

/* ---- FV ---- */
.ksb-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); }
.ksb-hero .ksb-wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; min-height: 600px; padding-top: 56px; padding-bottom: 72px; }
.ksb-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.24px; color: var(--ksb-text); background: #fff; border: 1px solid var(--ksb-line); border-radius: 500px; padding: 6px 12px 6px 8px; box-shadow: var(--ksb-shadow-1); margin-bottom: 24px; }
.ksb-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ksb-accent); display: inline-block; }
html body.page #main.ksb-page .ksb-hero h1 { font-size: 42px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.6px !important; margin: 0 0 22px !important; padding: 0; border: 0; text-align: left; }
.ksb-hero h1 span { display: block; white-space: nowrap; }
.ksb-hero .ksb-sub { font-size: 17px; line-height: 1.9; color: var(--ksb-text2); max-width: 540px; margin-bottom: 32px; }
.ksb-hero .ksb-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ksb-hero-vis { position: relative; height: 500px; }
.ksb-hero-vis .ksb-browser { position: absolute; box-shadow: var(--ksb-shadow-3); }
.ksb-hero-vis .ksb-browser--back { left: 16%; top: 0; width: 104%; opacity: .92; transform: perspective(1800px) rotateY(-10deg) rotateX(3deg); transform-origin: left center; }
.ksb-hero-vis .ksb-browser--front { left: 0; top: 88px; width: 112%; transform: perspective(1800px) rotateY(-10deg) rotateX(3deg); transform-origin: left center; }

/* ---- カード共通 ---- */
.ksb-card { background: #fff; border-radius: 12px; box-shadow: var(--ksb-shadow-1); }
.ksb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ksb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ksb-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ksb-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* ---- ブラウザ枠 ---- */
.ksb-browser { background: #fff; border-radius: 12px; box-shadow: var(--ksb-shadow-2); overflow: hidden; border: 1px solid var(--ksb-line); }
.ksb-browser .ksb-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--ksb-line); background: #fafafa; }
.ksb-browser .ksb-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e2; display: inline-block; }
.ksb-browser .ksb-bar span { margin-left: 10px; font-family: var(--ksb-mono); font-size: 13px; color: var(--ksb-text2); letter-spacing: -.3px; }

/* ---- 認定の帯 ---- */
.ksb-strip { background: #fff; border-top: 1px solid var(--ksb-line); border-bottom: 1px solid var(--ksb-line); }
.ksb-strip .ksb-wrap { display: flex; align-items: center; justify-content: center; gap: 56px; min-height: 96px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.ksb-mark { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: -.26px; color: var(--ksb-text); line-height: 1.5; }
.ksb-mark img { width: 44px; height: 44px; }
.ksb-mark .ksb-seal { width: 36px; height: 36px; border-radius: 50%; background: var(--ksb-surface); display: inline-flex; align-items: center; justify-content: center; font-family: var(--ksb-mono); font-size: 13px; letter-spacing: -.3px; flex: 0 0 auto; }
.ksb-mark span { display: block; font-size: 13px; font-weight: 500; color: var(--ksb-text2); }

/* ---- お悩み ---- */
.ksb-wcard { padding: 28px 28px 26px; }
.ksb-wcard .ksb-k { font-size: 14px; font-weight: 600; letter-spacing: -.24px; color: var(--ksb-text2); margin-bottom: 12px; }
.ksb-wcard h3 { font-size: 20px; line-height: 1.55; letter-spacing: -.3px; }
.ksb-closing { margin-top: 28px; font-size: 18px; font-weight: 600; letter-spacing: -.3px; text-align: center; color: var(--ksb-text); }

/* ---- 作る理由 ---- */
.ksb-reason { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.ksb-bcard { padding: 26px 26px 24px; }
.ksb-bcard .ksb-n { font-family: var(--ksb-mono); font-size: 13px; color: var(--ksb-text2); letter-spacing: -.44px; }
.ksb-bcard h3 { font-size: 19px; line-height: 1.5; margin: 10px 0 8px; letter-spacing: -.3px; }
.ksb-bcard p { font-size: 15px; line-height: 1.75; color: var(--ksb-text2); }

/* ---- 黒い帯: お手伝いする内容 ---- */
.ksb-bigstat { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; max-width: 820px; margin: 36px auto 0; padding: 28px 32px; background: var(--ksb-dark-card); border: 1px solid var(--ksb-dark-line); border-radius: 12px; }
.ksb-bigstat .ksb-v { font-family: Inter, sans-serif; font-size: 56px; font-weight: 600; letter-spacing: -2px; line-height: 1; color: var(--ksb-text); }
.ksb-bigstat .ksb-v small { font-size: 24px; letter-spacing: -.5px; margin-left: 2px; }
.ksb-bigstat .ksb-c { font-size: 16px; line-height: 1.7; color: #555555; }
.ksb-bigstat .ksb-c strong { color: var(--ksb-text); font-weight: 600; }
.ksb-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ksb-fcard { background: var(--ksb-dark-card); border: 1px solid var(--ksb-dark-line); border-radius: 12px; padding: 32px 28px 28px; display: flex; flex-direction: column; }
.ksb-fcard .ksb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ksb-fcard h3 { font-size: 26px; line-height: 1.3; letter-spacing: -.4px; color: var(--ksb-text); }
.ksb-fcard .ksb-n { font-family: var(--ksb-mono); font-size: 13px; color: #707070; flex: 0 0 auto; }
.ksb-fcard .ksb-t { font-size: 17px; font-weight: 600; line-height: 1.6; margin: 24px 0 10px; letter-spacing: -.3px; color: var(--ksb-text); }
.ksb-fcard p { font-size: 16px; line-height: 1.8; color: #555555; }
.ksb-fcard .ksb-vis { margin-top: auto; padding-top: 28px; }
.ksb-shotbox { background: #fff; border-radius: 10px 10px 0 0; padding: 8px 8px 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.ksb-shotbox img { border-radius: 6px 6px 0 0; }
.ksb-flow { background: #fff; border-radius: 10px 10px 0 0; padding: 20px 18px 18px; color: var(--ksb-text); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.ksb-flow li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.26px; padding: 9px 0; border-bottom: 1px solid var(--ksb-line); }
.ksb-flow li:last-child { border-bottom: 0; }
.ksb-flow li i { font-style: normal; font-family: var(--ksb-mono); font-size: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--ksb-surface); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ksb-flow li span { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ksb-text2); }
.ksb-flow li.is-now { color: var(--ksb-accent); }
.ksb-flow li.is-now i { background: var(--ksb-accent-tint); color: var(--ksb-accent); }
.ksb-order { margin: 0; padding: 18px 18px 16px; border-radius: 10px 10px 0 0; background: #fff; color: var(--ksb-text); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.ksb-order-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ksb-order-h b { font-size: 15px; font-weight: 600; letter-spacing: -.26px; white-space: nowrap; }
.ksb-order-h span { font-size: 13px; color: var(--ksb-text2); letter-spacing: -.22px; }
.ksb-order-h.is-plan b { color: var(--ksb-accent); }
.ksb-bars { display: grid; gap: 6px; }
.ksb-row { display: grid; gap: 6px; }
.ksb-row--1 { grid-template-columns: 1fr; }
.ksb-row--62 { grid-template-columns: 62fr 38fr; }
.ksb-row--38 { grid-template-columns: 38fr 62fr; }
.ksb-seg { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; background: var(--ksb-surface); font-size: 15px; font-weight: 600; letter-spacing: -.26px; white-space: nowrap; }
.ksb-seg i { font-style: normal; font-family: var(--ksb-mono); font-size: 13px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--ksb-line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ksb-seg--muted { background: #fff; border: 1px dashed #cfcfcf; color: var(--ksb-text2); }
.ksb-seg--profit { background: var(--ksb-accent); color: var(--ksb-text); }
.ksb-seg--profit i { background: #fff; color: var(--ksb-accent); border-color: var(--ksb-text); }
.ksb-seg--sum { background: transparent; height: auto; padding: 10px 0 0; justify-content: center; position: relative; color: var(--ksb-text); }
.ksb-seg--sum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border: 1px solid #cfcfcf; border-top: 0; border-radius: 0 0 6px 6px; }
.ksb-divider { height: 1px; background: var(--ksb-line); margin: 12px 0; }
.ksb-after { font-size: 17px; line-height: 1.9; color: #555555; max-width: 720px; margin: 40px auto 0; text-align: center; }
/* 毎月の流れ・目指す姿・2レーン（黒い帯の中） */
.ksb-road { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--ksb-dark-line); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ksb-road h3 { font-size: 15px; font-weight: 500; letter-spacing: -.26px; color: #707070; margin-bottom: 18px; }
.ksb-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ksb-steps li { background: var(--ksb-dark-card); border: 1px solid var(--ksb-dark-line); border-radius: 10px; padding: 14px 12px; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: -.26px; color: var(--ksb-text); }
.ksb-steps li i { display: block; font-style: normal; font-family: var(--ksb-mono); font-size: 13px; color: #707070; margin-bottom: 6px; }
.ksb-steps li.is-decide { border-color: var(--ksb-accent); color: var(--ksb-text); background: rgba(23,130,95,.18); }
.ksb-steps-note { margin-top: 10px; font-size: 14px; color: #707070; letter-spacing: -.24px; }
.ksb-stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ksb-stairs li { border-top: 2px solid var(--ksb-dark-line); padding-top: 12px; font-size: 16px; font-weight: 600; color: var(--ksb-text); letter-spacing: -.28px; }
.ksb-stairs li:first-child { border-top-color: var(--ksb-text); }
.ksb-stairs li:last-child { border-top-color: var(--ksb-accent); }
.ksb-lanes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ksb-lane { background: var(--ksb-dark-card); border: 1px solid var(--ksb-dark-line); border-radius: 12px; padding: 20px 24px; }
.ksb-lane .ksb-lane-label { font-size: 15px; font-weight: 600; color: var(--ksb-text); letter-spacing: -.26px; margin-bottom: 10px; }
.ksb-lane ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ksb-lane ol li { font-size: 15px; color: #555555; letter-spacing: -.26px; }
.ksb-lane ol li::after { content: "→"; margin-left: 10px; color: #6a6a6a; }
.ksb-lane ol li:last-child::after { content: none; }
.ksb-lane .ksb-lane-tax { font-size: 15px; color: #555555; letter-spacing: -.26px; }

/* ---- 面談の2画面 ---- */
.ksb-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.ksb-shot { margin: 0; }
.ksb-shot-link { display: block; cursor: zoom-in; }
.ksb-shot figcaption { margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ksb-shot figcaption span { display: block; font-weight: 400; font-size: 15px; color: var(--ksb-text2); margin-top: 2px; }
.ksb-zoom { flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.24px; color: var(--ksb-text); background: #fff; border: 1px solid var(--ksb-text); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.ksb-note { font-size: 14px; color: var(--ksb-text2); margin-top: 24px; letter-spacing: -.24px; }

/* ---- 5つの画面 ---- */
.ksb-scard { padding: 24px 22px 22px; }
.ksb-scard .ksb-n { font-family: var(--ksb-mono); font-size: 13px; color: var(--ksb-text2); }
.ksb-scard h3 { font-size: 18px; line-height: 1.5; margin: 10px 0 8px; letter-spacing: -.3px; }
.ksb-scard p { font-size: 15px; line-height: 1.75; color: var(--ksb-text2); }

/* ---- 表 ---- */
.ksb-tbl { overflow: hidden; margin-top: 32px; }
.ksb-tbl caption { caption-side: top; text-align: left; padding: 18px 24px 0; font-size: 14px; color: var(--ksb-text2); letter-spacing: -.24px; }
html body.page #main.ksb-page .ksb-tbl table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0; border: 0; }
html body.page #main.ksb-page .ksb-tbl th, html body.page #main.ksb-page .ksb-tbl td { text-align: left; vertical-align: top; padding: 18px 24px; border: 0; border-bottom: 1px solid var(--ksb-line); line-height: 1.7; font-size: 16px !important; background: transparent; }
html body.page #main.ksb-page .ksb-tbl thead th { font-size: 15px !important; font-weight: 600; letter-spacing: -.26px; background: var(--ksb-surface); color: var(--ksb-text2); }
html body.page #main.ksb-page .ksb-tbl tbody th { font-weight: 600; letter-spacing: -.28px; color: var(--ksb-text); }
html body.page #main.ksb-page .ksb-tbl tbody tr:last-child th, html body.page #main.ksb-page .ksb-tbl tbody tr:last-child td { border-bottom: 0; }
/* 比較表 */
html body.page #main.ksb-page .ksb-tbl--cmp tbody th { width: 22%; }
html body.page #main.ksb-page .ksb-tbl--cmp thead th:nth-child(3) { color: var(--ksb-accent); background: var(--ksb-accent-tint); }
html body.page #main.ksb-page .ksb-tbl--cmp tbody td:nth-child(2) { color: var(--ksb-text2); }
html body.page #main.ksb-page .ksb-tbl--cmp tbody td:nth-child(3) { background: var(--ksb-accent-tint); font-weight: 600; letter-spacing: -.28px; }
/* 料金表 */
html body.page #main.ksb-page .ksb-tbl--price td { font-family: Inter, var(--ksb-font); font-variant-numeric: tabular-nums; font-weight: 500; }
html body.page #main.ksb-page .ksb-tbl--price td[colspan] { color: var(--ksb-text2); font-weight: 400; }

/* ---- サービス内容 ---- */
.ksb-svc { padding: 28px 26px; }
.ksb-svc h3 { font-size: 19px; letter-spacing: -.3px; margin-bottom: 14px; }
.ksb-svc li, .ksb-fit li, .ksb-pbody li, .ksb-facts li { position: relative; padding-left: 18px; font-size: 16px; color: var(--ksb-text); margin-bottom: 6px; line-height: 1.75; }
.ksb-svc li::before, .ksb-fit li::before, .ksb-pbody li::before, .ksb-facts li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1.5px; background: var(--ksb-accent); }
.ksb-fit { margin-top: 20px; padding: 26px 28px; display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.ksb-fit h3 { font-size: 17px; letter-spacing: -.3px; white-space: nowrap; }
.ksb-fit li { color: var(--ksb-text2); }

/* ---- 料金 ---- */
.ksb-price { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.ksb-pcard { padding: 32px 32px 28px; }
.ksb-pcard .ksb-l { font-size: 15px; font-weight: 600; letter-spacing: -.26px; color: var(--ksb-text2); }
.ksb-pcard .ksb-v { font-family: Inter, sans-serif; font-size: 52px; font-weight: 600; letter-spacing: -2px; line-height: 1.1; margin-top: 10px; color: var(--ksb-text); }
.ksb-pcard .ksb-v span { font-family: var(--ksb-font); font-size: 18px; font-weight: 600; letter-spacing: -.3px; margin-left: 6px; }
.ksb-pcard .ksb-s { font-size: 14px; color: var(--ksb-text2); margin-top: 12px; letter-spacing: -.24px; }
.ksb-pbody { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; margin-top: 20px; }
.ksb-pbody .ksb-card { padding: 28px; }
.ksb-pbody p { color: var(--ksb-text2); margin-bottom: 14px; font-size: 16px; line-height: 1.8; }
.ksb-pbody p:last-child { margin-bottom: 0; }
.ksb-pbody p.ksb-key { color: var(--ksb-text); font-weight: 600; letter-spacing: -.3px; }
.ksb-pbody h3 { font-size: 17px; letter-spacing: -.3px; margin-bottom: 12px; }
.ksb-pbody li { font-size: 15px; color: var(--ksb-text2); }
.ksb-plan-note { font-size: 16px; color: var(--ksb-text2); margin-top: 6px; }
.ksb-plan-note a { text-decoration: underline !important; text-underline-offset: 4px; color: var(--ksb-text) !important; }
.ksb-mid { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }

/* ---- ロカベン ---- */
.ksb-vcard { padding: 30px 28px 26px; display: flex; flex-direction: column; }
.ksb-vcard blockquote { margin: 0; padding: 0; border: 0; background: none; }
.ksb-vcard .ksb-q { font-size: 18px; font-weight: 600; line-height: 1.75; letter-spacing: -.3px; min-height: 5.3em; color: var(--ksb-text); }
.ksb-vcard figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ksb-line); font-size: 14px; color: var(--ksb-text2); line-height: 1.7; letter-spacing: -.24px; }
.ksb-mini { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 28px 32px; margin-top: 20px; }
.ksb-mini .ksb-v { font-family: Inter, sans-serif; font-size: 48px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; color: var(--ksb-accent); }
.ksb-mini .ksb-v small { font-size: 22px; letter-spacing: -.4px; }
.ksb-mini .ksb-c { font-size: 16px; font-weight: 600; letter-spacing: -.28px; line-height: 1.6; color: var(--ksb-text); }
.ksb-mini .ksb-c span { display: block; font-weight: 400; color: var(--ksb-text2); font-size: 15px; margin-top: 4px; }
.ksb-src { font-size: 14px; color: var(--ksb-text2); letter-spacing: -.24px; line-height: 1.7; margin-top: 20px; }
.ksb-src a { text-decoration: underline !important; text-underline-offset: 3px; word-break: break-all; }

/* ---- 当事務所について ---- */
.ksb-office { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; margin-top: 32px; }
.ksb-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ksb-markcard { padding: 20px 12px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -.24px; line-height: 1.5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 140px; }
.ksb-markcard img { width: 64px; height: 64px; }
.ksb-markcard .ksb-seal { width: 48px; height: 48px; border-radius: 50%; background: var(--ksb-surface); display: inline-flex; align-items: center; justify-content: center; font-family: var(--ksb-mono); font-size: 15px; }
.ksb-facts li { color: var(--ksb-text2); margin-bottom: 10px; }
.ksb-facts a { text-decoration: underline !important; text-underline-offset: 4px; color: var(--ksb-text) !important; }

/* ---- FAQ ---- */
.ksb-faq { padding: 8px 32px; margin-top: 32px; }
.ksb-faq .ksb-faq-item { display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "q dt" ". dd"; column-gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--ksb-line); }
.ksb-faq .ksb-faq-item:last-child { border-bottom: 0; }
.ksb-faq .ksb-faq-item::before { content: attr(data-q); grid-area: q; font-family: var(--ksb-mono); font-size: 14px; color: var(--ksb-accent); padding-top: 4px; }
.ksb-faq dt { grid-area: dt; }
.ksb-faq dd { grid-area: dd; }
.ksb-faq dt { font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: -.3px; margin: 0 0 8px; }
.ksb-faq dd { font-size: 16px; color: var(--ksb-text2); line-height: 1.8; margin: 0; }

/* ---- お問い合わせ ---- */
.ksb-contact .ksb-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
html body.page #main.ksb-page .ksb-contact h2 { font-size: 32px; line-height: 1.35; margin: 16px 0 20px; color: var(--ksb-text); }
.ksb-contact .ksb-prose { color: #555555; }
.ksb-contact .ksb-tel { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ksb-dark-line); }
.ksb-contact .ksb-tel .ksb-v { font-family: Inter, sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -1px; color: var(--ksb-text); line-height: 1; }
html body .ksb-page .ksb-contact .ksb-tel .ksb-v a { color: var(--ksb-text); }
.ksb-contact .ksb-tel span { display: block; font-size: 14px; color: #707070; margin-top: 8px; letter-spacing: -.24px; }
.ksb-form { background: #fff; color: var(--ksb-text); border-radius: 12px; padding: 32px; box-shadow: var(--ksb-shadow-2); scroll-margin-top: 100px; }
.ksb-form .wpcf7 { max-width: 100%; margin: 0; }
.ksb-form .wpcf7-form { margin: 0; }
.ksb-page .ksb-form .l-form dl { display: block !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
.ksb-page .ksb-form .l-form dt, .ksb-page .ksb-form .l-form dd { display: block !important; width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.ksb-page .ksb-form .l-form dt p { margin: 0 0 6px !important; font-size: 14px !important; font-weight: 600; letter-spacing: -.24px; line-height: 1.5; color: var(--ksb-text); }
.ksb-page .ksb-form .l-form dd p { margin: 0 !important; }
.ksb-page .ksb-form .l-form_rec, .ksb-page .ksb-form .wpcf7-not-valid-tip { color: var(--ksb-accent) !important; font-weight: 500; font-size: 14px; }
.ksb-page .ksb-form .l-form input[type="text"], .ksb-page .ksb-form .l-form input[type="email"], .ksb-page .ksb-form .l-form input[type="tel"] { width: 100% !important; height: 48px; padding: 0 12px; font: inherit; font-size: 17px !important; color: var(--ksb-text); border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; }
.ksb-page .ksb-form .l-form textarea { width: 100% !important; min-height: 120px; padding: 10px 12px; font: inherit; font-size: 17px !important; line-height: 1.7; color: var(--ksb-text); border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; }
.ksb-page .ksb-form .l-form ::placeholder { color: #707070; opacity: 1; }
.ksb-page .ksb-form input:focus-visible, .ksb-page .ksb-form textarea:focus-visible { outline: 2px solid var(--ksb-text); outline-offset: 2px; }
.ksb-page .ksb-form .wpcf7-form input[type="submit"] { display: block !important; width: 100% !important; max-width: 100%; height: 50px; margin: 8px 0 0 !important; padding: 0 !important; float: none !important; font: inherit; font-size: 16px !important; font-weight: 500; letter-spacing: -.28px; background: var(--ksb-dark) !important; color: var(--ksb-on-dark) !important; border: 1px solid var(--ksb-dark); border-radius: 500px; cursor: pointer; transition: opacity .18s ease; }
.ksb-page .ksb-form .wpcf7-form input[type="submit"]:hover { opacity: .85; }
.ksb-page .ksb-form .wpcf7-form p:has(> input[type="submit"]), .ksb-page .ksb-form .wpcf7-form .wpcf7-submit { text-align: center; }
.ksb-page .ksb-form .wpcf7-spinner { display: block; margin: 8px auto 0; }
.ksb-page .ksb-form .l-form_app { padding: 0 !important; margin: 8px 0 0 !important; width: 100% !important; max-width: none !important; text-align: center !important; }
.ksb-page .ksb-form .l-form_app p { margin: 0 !important; padding: 0 !important; text-align: center !important; }
.ksb-page .ksb-form .kt-contact-privacy-note { margin: 14px 0 0 !important; font-size: 14px !important; color: var(--ksb-text2) !important; line-height: 1.7; }
.ksb-page .ksb-form .wpcf7-response-output { border-color: var(--ksb-text) !important; color: var(--ksb-text); font-size: 15px; }

/* ---- 画面の拡大表示 ---- */
html.ksb-lock, html.ksb-lock body { overflow: hidden; }
.ksb-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(34,34,34,.88); display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; }
.ksb-lightbox-scroll { max-width: 1100px; width: 100%; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; background: #fff; }
.ksb-lightbox-scroll img { display: block; width: 100%; height: auto; }
.ksb-lightbox-close { position: absolute; top: 8px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #222; font-size: 26px; line-height: 1; cursor: pointer; }
.ksb-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- レスポンシブ ---- */
@media (max-width: 1024px) {
  .ksb-hero .ksb-wrap { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  html body.page #main.ksb-page .ksb-hero h1 { font-size: 36px !important; }
  .ksb-hero h1 span { white-space: normal; }
  .ksb-hero-vis { height: auto; }
  .ksb-hero-vis .ksb-browser--back { display: none; }
  .ksb-hero-vis .ksb-browser--front { position: static; width: 100%; transform: none; }
  .ksb-feat { grid-template-columns: 1fr; }
  .ksb-fcard { min-height: 0; }
  .ksb-reason { grid-template-columns: 1fr; gap: 32px; }
  .ksb-grid3, .ksb-grid4, .ksb-grid5 { grid-template-columns: 1fr 1fr; }
  .ksb-road { grid-template-columns: 1fr; }
  .ksb-contact .ksb-wrap { grid-template-columns: 1fr; gap: 40px; }
  .ksb-office { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ksb-page { --ksb-pad: 20px; }
  .ksb-sec { padding: 72px 0; }
  .ksb-hero .ksb-wrap { padding-top: 40px; padding-bottom: 56px; }
  html body.page #main.ksb-page .ksb-hero h1 { font-size: 30px !important; line-height: 1.4 !important; }
  .ksb-u { white-space: normal; }
  html body.page #main.ksb-page h2.ksb-h2 { font-size: 27px; }
  .ksb-strip .ksb-wrap { gap: 16px 28px; }
  .ksb-grid2, .ksb-grid3, .ksb-grid4, .ksb-grid5, .ksb-shots, .ksb-price, .ksb-pbody, .ksb-lanes { grid-template-columns: 1fr; }
  .ksb-bigstat { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .ksb-bigstat .ksb-v { font-size: 46px; }
  .ksb-steps { grid-template-columns: 1fr 1fr; }
  .ksb-stairs { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .ksb-fit { grid-template-columns: 1fr; gap: 8px; }
  .ksb-mini { grid-template-columns: 1fr; gap: 12px; }
  .ksb-vcard .ksb-q { min-height: 0; }
  .ksb-marks { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ksb-markcard { padding: 14px 6px; min-height: 0; font-size: 13px; }
  .ksb-pcard .ksb-v { font-size: 40px; }
  /* 表: 1件ずつ縦に */
  html body.page #main.ksb-page .ksb-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body.page #main.ksb-page .ksb-tbl table, html body.page #main.ksb-page .ksb-tbl tbody, html body.page #main.ksb-page .ksb-tbl tr, html body.page #main.ksb-page .ksb-tbl th, html body.page #main.ksb-page .ksb-tbl td { display: block; width: 100%; }
  html body.page #main.ksb-page .ksb-tbl tr { padding: 16px 20px; border-bottom: 1px solid var(--ksb-line); }
  html body.page #main.ksb-page .ksb-tbl tbody tr:last-child { border-bottom: 0; }
  html body.page #main.ksb-page .ksb-tbl th, html body.page #main.ksb-page .ksb-tbl td { border: 0; padding: 4px 0; }
  html body.page #main.ksb-page .ksb-tbl tbody th { width: auto; padding-bottom: 6px; font-size: 17px !important; }
  html body.page #main.ksb-page .ksb-tbl td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--ksb-text2); letter-spacing: -.22px; }
  html body.page #main.ksb-page .ksb-tbl td[colspan]::before { content: none; }
  html body.page #main.ksb-page .ksb-tbl--cmp tbody td:nth-child(3) { background: none; border-left: 2px solid var(--ksb-accent); padding-left: 10px; margin-top: 6px; }
  html body.page #main.ksb-page .ksb-tbl--cmp tbody td:nth-child(3)::before { color: var(--ksb-accent); }
  html body.page #main.ksb-page .ksb-tbl--price td { font-size: 19px !important; }
  .ksb-faq { padding: 4px 20px; }
  .ksb-faq .ksb-faq-item { grid-template-columns: 1fr; grid-template-areas: "q" "dt" "dd"; row-gap: 6px; }
  html body.page #main.ksb-page .ksb-contact h2 { font-size: 26px; }
  .ksb-form { padding: 22px 18px; }
  .ksb-lightbox { padding: 60px 0 0; align-items: flex-start; }
  .ksb-lightbox-scroll { border-radius: 0; max-height: calc(100vh - 60px); }
  .ksb-lightbox-scroll img { width: 900px; max-width: none; }
}
@media print {
  .ksb-lightbox { display: none !important; }
}

/* 仕上げ: 黒帯をやめたので、カードは白地＋枠線＋薄い影 */
.ksb-sec--dark .ksb-fcard, .ksb-sec--dark .ksb-steps li, .ksb-sec--dark .ksb-bigstat { background: #fff; border: 1px solid var(--ksb-line); box-shadow: var(--ksb-shadow-1); }
.ksb-sec--dark .ksb-stairs li { border-top-color: var(--ksb-text); }
.ksb-contact .ksb-form { box-shadow: var(--ksb-shadow-2); border: 1px solid var(--ksb-line); }
.ksb-sec-head { display: flex; justify-content: space-between; }

/* 仕上げ: 黒いボタンの文字は白のまま */
html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost), html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost):link, html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost):visited, html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost):hover, html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost):focus, html body .ksb-page a.ksb-btn:not(.ksb-btn--ghost):active { color: #f7f7f7 !important; }
html body .ksb-page .ksb-form .wpcf7-form input[type="submit"] { color: #f7f7f7 !important; background: var(--ksb-dark) !important; }
.ksb-faq-item::before, .ksb-faq-item dt::before { content: none !important; }

/* b2: 見出し上のラベルを外したので、見出しの上の余白を詰める */
html body.page #main.ksb-page h2.ksb-h2 { margin-top: 0; }
html body.page #main.ksb-page .ksb-contact h2 { margin-top: 0; }

/* b3: カードの中の図は、のぞかせずに全部見せる */
.ksb-fcard .ksb-order, .ksb-fcard .ksb-flow { border-radius: 10px; border: 1px solid var(--ksb-line); box-shadow: none; background: var(--ksb-surface); }
.ksb-fcard .ksb-order { padding: 18px 18px 18px; }
.ksb-fcard .ksb-flow { padding: 16px 18px; }
.ksb-fcard .ksb-vis { margin-top: auto; padding-top: 24px; }

/* b4: カードの下の締めの一文は、カードから離して置く */
html body.page #main.ksb-page .ksb-closing { margin-top: 56px !important; }
html body.page #main.ksb-page .ksb-after { margin-top: 56px !important; }

/* b5: カードは文章だけ。高さをそろえず、下の余白を整える */
.ksb-fcard { padding-bottom: 32px; }
.ksb-fcard p:last-child { margin-bottom: 0; }

/* b6: 改行の整え */
.ksb-page h1, .ksb-page h2, .ksb-page h3, .ksb-page p, .ksb-page li, .ksb-page dt, .ksb-page dd, .ksb-page figcaption, .ksb-page td, .ksb-page th { word-break: auto-phrase; overflow-wrap: break-word; }
html body.page #main.ksb-page h2.ksb-h2, html body.page #main.ksb-page .ksb-contact h2, .ksb-page h3, .ksb-fcard .ksb-t, .ksb-closing, .ksb-after, .ksb-hero .ksb-sub { text-wrap: pretty; }
html body.page #main.ksb-page h2.ksb-h2, .ksb-fcard h3 { text-wrap: balance; }
.ksb-wcard h3, .ksb-bcard h3, .ksb-scard h3, .ksb-steps li { text-wrap: pretty; word-break: normal; overflow-wrap: break-word; }
.ksb-hero .ksb-sub { max-width: 640px; }
.ksb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ksb-steps li { white-space: nowrap; }
.ksb-bigstat .ksb-v, .ksb-pcard .ksb-v, .ksb-tel .ksb-v, .ksb-tbl td { white-space: nowrap; }
.ksb-tbl--two td, .ksb-tbl--two th { white-space: normal; }
@media (max-width: 760px) {
  .ksb-hero .ksb-sub br { display: none; }
  html body.page #main.ksb-page .ksb-hero h1 span { display: inline; }
}

/* b7: スマホの表の説明文が縦1文字ずつにならないように */
@media (max-width: 768px) {
  html body.page #main.ksb-page .ksb-tbl caption { display: block; width: 100%; box-sizing: border-box; white-space: normal; padding: 16px 20px 0; }
  html body.page #main.ksb-page .ksb-tbl td { white-space: normal; }
}