/* batonq.com の本体ページは assets/main-*.css（Astro の build）が box-sizing を border-box にしている。
   この 1 枚は単体で置かれるので、同じ土台をここで持つ。無いと 390px で hero が 80px はみ出す。 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
/* BATON for CMS = 黒い兄弟。本体は黄、Personal は藍。
   lp-top.css は data-seller="personal" を「濃い主色＋白文字」の型として持っているので、その型を借りて主色だけ黒にする。
   （恒久対応：lp-top.css に data-seller="cms" を足してもらう。それまでは personal の型 + data-product="cms"） */
html[data-seller="personal"][data-product="cms"] { --lpt-main: #232616; }
body[data-seller="personal"] { --lpt-chrome-bg: #232616; --lpt-chrome-ink: #fff; --lpt-header-bg: var(--lpt-chrome-bg); }
html[data-seller="personal"][data-product="cms"] body .site-footer.lpt, body[data-seller="personal"] .site-footer.lpt { --lpt-main: #232616; background: #232616; } /* footer も黒（site-chrome.css は personal の藍を直書きしている） */
:root { --cms-caution: #f5e149; } /* 注意書きだけ本体の黄を借りる */
.cms-caution { background: var(--cms-caution); color: #232616; padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.cms-table { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: 0.95rem; }
.cms-table th, .cms-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lpt-gray); vertical-align: top; }
.cms-table th { font-weight: 700; }
.cms-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.cms-facts div { background: var(--lpt-gray-2); border-radius: 8px; padding: 14px 16px; }
.cms-facts b { display: block; font-family: var(--lpt-font-en); font-size: 1.5rem; font-weight: 900; }
.cms-story { max-width: 640px; margin: 0 auto; padding: 8px 0; color: #fff; font-size: 1.05rem; line-height: 1.9; } .cms-story p { display: grid; grid-template-columns: 7.5em 1fr; gap: 0 12px; margin: 0 0 14px; align-items: baseline; } .cms-story b { font-weight: 700; color: var(--cms-caution); } @media (max-width: 767px) { .cms-story p { grid-template-columns: 1fr; gap: 2px; margin-bottom: 18px; } } /* マンガ 3 コマが来たらこの 3 行と差し替える */
.pricing .paper-set__yen .paper-set__tax { font-family: var(--lpt-font-en); }
/* about 系の節：lp-top.css は about__top/about__content の型しか持たないので、この LP の素の p・h2・grid に幅と間隔を与える */
body.lp-chrome .about { gap: 40px; padding: 100px 40px; }
body.lp-chrome .about > * { width: min(880px, 100%); }
body.lp-chrome .about > p { margin: 0; font-size: 17px; line-height: 1.9; color: var(--lpt-black-2); }
body.lp-chrome .about > h2 { margin: 24px 0 0; font-size: 28px; font-weight: 800; }
body.lp-chrome .about__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.lp-chrome #parallel .about__grid { grid-template-columns: repeat(3, 1fr); }
body.lp-chrome .about__grid article { padding: 24px 28px; border-radius: 16px; background: #fff; }
body.lp-chrome .about__grid h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
body.lp-chrome .about__grid p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--lpt-black-2); }
body.lp-chrome .about > .cms-table { width: min(880px, 100%); background: #fff; border-radius: 16px; overflow: hidden; }
body.lp-chrome .cms-table th, body.lp-chrome .cms-table td { padding: 14px 20px; }
@media (max-width: 767px) { body.lp-chrome .about { gap: 28px; padding: 60px 24px; } body.lp-chrome .about__grid, body.lp-chrome #parallel .about__grid { grid-template-columns: 1fr; } body.lp-chrome .about > p { font-size: 16px; } body.lp-chrome .cms-table th, body.lp-chrome .cms-table td { padding: 12px 10px; } }
/* 値段の帯：見本の図（paper-set__sample）が無いので札 4 枚で幅を使う。ロゴは 1 行。 */
body.lp-chrome .paper-set__body { grid-template-columns: 1fr; }
body.lp-chrome .pricing__logo-word { white-space: nowrap; font-size: 44px; }
@media (max-width: 767px) { body.lp-chrome .pricing__logo-word { font-size: 36px; } }
/* 献辞：PC で hero の上の空白（lp-top.css の padding 200px）を使う */
.cms-dedication { width: min(1200px, 100%); margin: 0 auto -120px; padding: 0 0 0 20px; border-left: 4px solid var(--cms-caution); color: #fff; font-size: 20px; font-weight: 700; line-height: 1.7; position: relative; z-index: 2; }
body.lp-chrome .hero { padding: 48px 40px 0; }
@media (max-width: 1023px) { .cms-dedication { margin-bottom: -60px; font-size: 17px; } }
@media (max-width: 767px) { body.lp-chrome .hero { padding: 32px 24px 0; } .cms-dedication { margin-bottom: -40px; font-size: 15px; padding-left: 14px; } }
/* BYOK / AI AGENT の帯 */
.cms-words { position: relative; z-index: 9; display: grid; grid-template-columns: repeat(2, minmax(0, 580px)); justify-content: center; gap: 24px; width: 100%; margin: 0; padding: 0 40px 56px; background: var(--lpt-main); color: #fff; }
.cms-words__item { padding: 28px 32px; border: 3px solid var(--cms-caution); border-radius: 20px; }
.cms-words__item b { display: block; font-family: var(--lpt-font-en); font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--cms-caution); }
.cms-words__read { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; }
.cms-words__item p { margin: 12px 0 0; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.85); }
@media (max-width: 767px) { .cms-words { grid-template-columns: 1fr; gap: 16px; padding: 0 16px 40px; } .cms-words__item { padding: 22px 20px; } .cms-words__item b { font-size: 44px; } }
/* hero の背景：Web の年表を薄く敷く */
body.lp-chrome .hero { position: relative; overflow: hidden; }
/* 写真（Adobe Stock・ぼけたコード）を色を抜いて薄く敷く。無くても成り立つ */
body.lp-chrome .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(/cms/hero-code.jpg) center / cover no-repeat; opacity: .24; pointer-events: none; }
body.lp-chrome .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 30% 40%, rgba(35,38,22,0) 0%, rgba(35,38,22,.7) 75%); pointer-events: none; }
.cms-timeline { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 1; opacity: .22; pointer-events: none; }
.cms-timeline svg { display: block; width: min(1400px, 100%); margin: 0 auto; }
body.lp-chrome .hero__inner, .cms-dedication { position: relative; z-index: 2; }
body.lp-chrome .hero__inner { padding-bottom: 210px; }
@media (max-width: 1023px) { body.lp-chrome .hero__inner { padding-bottom: 170px; } }
@media (max-width: 767px) { .cms-timeline { bottom: 10px; opacity: .22; } .cms-timeline svg { width: 900px; margin-left: calc(100% - 840px); } body.lp-chrome .hero__inner { padding-bottom: 130px; } }
/* 並行の 3 枚の絵 */
.cms-icon { width: 36px; height: 36px; margin-bottom: 12px; fill: none; stroke: #232616; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* hero：URL 欄 1 つ＋ボタン 1 本 */
.cms-eyebrow { margin: 0 0 8px; font-family: var(--lpt-font-en); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--cms-caution); }
.cms-br { display: none; }
.cms-start { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.cms-start__url { flex: 1 1 0; min-width: 0; height: 64px; min-height: 64px; box-sizing: border-box; -webkit-appearance: none; appearance: none; padding: 0 18px; border: 0; border-radius: 16px; background: #fff; color: #232616; font-size: 17px; font-family: inherit; }
.cms-start__url::placeholder { color: #9aa39d; }
.cms-start__url:focus-visible { outline: 3px solid var(--cms-caution); outline-offset: 2px; }
body.lp-chrome .hero .cms-start__go img { filter: none; } /* hero の主ボタンは白地なので、黒のまま */
body.lp-chrome .hero form .cms-start__go.button--primary:hover { background: #fff; border-color: #fff; }
body.lp-chrome .hero form .cms-start__go.button--primary { flex: 0 0 auto; gap: 10px; height: 64px; min-width: 0; padding: 0 26px; font-size: 20px; font-weight: 800; background: var(--cms-caution); color: #232616; border-color: var(--cms-caution); white-space: nowrap; cursor: pointer; }
.cms-start__note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.78); }
@media (max-width: 767px) { .cms-br { display: inline; } .cms-start { flex-direction: column; } body.lp-chrome .hero form .cms-start__go.button--primary { width: 100%; } .cms-eyebrow { text-align: center; } }
/* 白い節の見出し：黄色のマーカー */
body.lp-chrome .section-heading h2 { text-decoration: underline; text-decoration-color: var(--cms-caution); text-decoration-thickness: .38em; text-underline-offset: -.14em; text-decoration-skip-ink: none; }
body.lp-chrome .faq .section-heading h2 { text-decoration: none; }
/* 渡すもの の札：絵・黄色の縁・大きめの字 */
body.lp-chrome .about__grid article { position: relative; padding: 28px 28px 28px 32px; border-left: 6px solid var(--cms-caution); }
body.lp-chrome .about__grid h3 { font-size: 20px; }
body.lp-chrome .about__grid p { font-size: 15.5px; }
/* 並行の節：黒の帯とレーンの図 */
body.lp-chrome .about.cms-dark { background: var(--lpt-main); color: #fff; }
body.lp-chrome .about.cms-dark > p { color: rgba(255,255,255,.85); }
body.lp-chrome .about.cms-dark .section-tag { background: var(--cms-caution); color: #232616; }
body.lp-chrome .about.cms-dark .section-heading h2 { color: #fff; text-decoration: none; }
.cms-lanes { width: min(1000px, 100%) !important; }
.cms-lanes svg { display: block; width: 100%; height: auto; }
body.lp-chrome .cms-steps article { background: transparent; border: 2px solid rgba(255,255,255,.25); border-left: 2px solid rgba(255,255,255,.25); color: #fff; }
body.lp-chrome .cms-steps h3 { color: #fff; }
body.lp-chrome .cms-steps p { color: rgba(255,255,255,.85); }
.cms-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--cms-caution); color: #232616; font-family: var(--lpt-font-en); font-size: 20px; font-weight: 900; }
.cms-lanes--phone { display: none; }
@media (max-width: 767px) { .cms-lanes { display: none; } .cms-lanes--phone { display: block; } body.lp-chrome .about__grid h3 { font-size: 18px; } }
/* 使い方：5 手（矢印で繋ぐ） */
.cms-ico { width: 34px; height: 34px; fill: none; stroke: #232616; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: absolute; top: 22px; right: 20px; }
.cms-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cms-flow::before { content: ""; position: absolute; left: 40px; right: 40px; top: 44px; border-top: 3px dashed var(--cms-caution); z-index: 0; }
.cms-flow li { position: relative; z-index: 1; padding: 24px 20px 22px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(35,38,22,.06); }
.cms-flow li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 40px; width: 0; height: 0; border-left: 10px solid var(--cms-caution); border-top: 7px solid transparent; border-bottom: 7px solid transparent; z-index: 2; }
.cms-flow .cms-num { margin-bottom: 18px; box-shadow: 0 0 0 6px #fff; }
.cms-flow h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.4; }
.cms-flow p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--lpt-black-2); }
@media (max-width: 1023px) { .cms-flow { grid-template-columns: repeat(2, 1fr); } .cms-flow::before, .cms-flow li::after { display: none; } }
@media (max-width: 767px) { .cms-flow { grid-template-columns: 1fr; gap: 12px; } .cms-flow::before { display: block; left: 44px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 3px dashed var(--cms-caution); } .cms-flow li { padding-left: 24px; } }
/* 中身：1 割／9 割の帯・道具のタイル・✗ の 4 行 */
body.lp-chrome .about.cms-dark > p b { color: var(--cms-caution); }
.cms-ratio { display: grid; grid-template-columns: 1fr 9fr; gap: 6px; width: min(1000px, 100%) !important; }
.cms-ratio > div { padding: 14px 16px; border-radius: 12px; line-height: 1.3; }
.cms-ratio b { display: block; font-family: var(--lpt-font-en); font-size: 26px; font-weight: 900; }
.cms-ratio span { font-size: 13px; }
.cms-ratio__a { background: rgba(255,255,255,.14); color: #fff; }
.cms-ratio__b { background: var(--cms-caution); color: #232616; }
.cms-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: min(1000px, 100%) !important; margin: 0; padding: 0; list-style: none; }
.cms-tools li { position: relative; padding: 20px 18px 18px; border-radius: 16px; background: #fff; color: #232616; }
.cms-tools .cms-ico { position: static; display: block; width: 32px; height: 32px; margin-bottom: 12px; }
.cms-tools h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.cms-tools p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--lpt-black-2); }
.cms-tools__num { background: var(--cms-caution) !important; }
.cms-tools__num b { display: block; font-family: var(--lpt-font-en); font-size: 44px; font-weight: 900; line-height: 1; margin-bottom: 8px; }
.cms-fails { width: min(1000px, 100%) !important; padding: 26px 30px; border: 2px solid rgba(255,255,255,.25); border-radius: 20px; }
.cms-fails h3 { margin: 0 0 14px; font-size: 19px; font-weight: 800; color: #fff; }
.cms-fails h3 small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); }
.cms-fails ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.cms-fails li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); }
.cms-x { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.cms-fails__fix { margin: 16px 0 0; font-size: 16px; font-weight: 800; color: var(--cms-caution); }
@media (max-width: 1023px) { .cms-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .cms-ratio { grid-template-columns: 1fr 4fr; } .cms-tools { grid-template-columns: 1fr 1fr; gap: 10px; } .cms-tools li { padding: 16px 14px; } .cms-tools p { font-size: 13px; } .cms-fails { padding: 20px 18px; } .cms-fails ul { grid-template-columns: 1fr; } }
.cms-caution--note { width: min(880px, 100%); font-size: 16px; line-height: 1.7; }
.cms-caution--note b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* これからの版 */
.cms-versions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(880px, 100%); margin-top: 8px; }
.cms-versions__item { position: relative; padding: 18px 20px; border-radius: 14px; background: #fff; border: 2px solid var(--lpt-gray); }
.cms-versions__item--now { border-color: var(--cms-caution); background: var(--cms-caution); }
.cms-versions__item b { font-size: 24px; font-weight: 900; margin-right: 8px; }
.cms-versions__item span { font-size: 13px; font-weight: 700; color: var(--lpt-black-2); }
.cms-versions__item p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--lpt-black-2); }
@media (max-width: 767px) { .cms-versions { grid-template-columns: 1fr; } }
/* 使い方の札：画面の画像（step-card__screen）が無いので、空の高さを持たない */
body.lp-chrome .step-card, body.lp-chrome .step-card--first { min-height: 0; }
/* 黒地の上で消える物を直す */
body.lp-page .site-header.lpt { color: #232616; }
body.lp-page .site-header.lpt .brand__name, body.lp-page .site-header.lpt .brand__tagline { color: #232616; }
body.lp-chrome .hero .button--primary { background: #fff; color: #232616; border-color: #fff; }
body.lp-chrome .hero__circle { display: none; }
/* hero の絵の枠。イラスト（マンガ 3 コマ）が来るまでは「502 の画面」を CSS で描く。来たらこの枠ごと差し替える */
body.lp-chrome .hero__visual { height: auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cms-502 { width: min(440px, 100%); background: #fff; color: #232616; border-radius: 16px; box-shadow: 10px 10px 0 rgba(0,0,0,.45); overflow: hidden; transform: rotate(-2deg); }
.cms-502__bar { display: flex; gap: 8px; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid #e3e6e1; background: #f6f7f5; }
.cms-502__bar i { width: 11px; height: 11px; border-radius: 50%; background: #d7dbd5; }
.cms-502__bar i:first-child { background: #f5e149; }
.cms-502__body { padding: 40px 24px 36px; text-align: center; }
.cms-502__body b { display: block; font-family: var(--lpt-font-en); font-size: clamp(72px, 9vw, 112px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.cms-502__body span { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 17px; color: #6b746e; }
.cms-502__body small { display: block; margin-top: 20px; font-size: 13px; color: #9aa39d; }
@media (max-width: 767px) { body.lp-chrome .hero__visual { width: 100%; } .cms-502 { width: min(320px, 100%); transform: rotate(-1.5deg); } .cms-502__body { padding: 28px 16px 24px; } }
.cms-mt28{margin-top:28px}.cms-mt12{margin-top:12px}
.cms-contact__form { display: grid; gap: 16px; width: 100%; max-width: 640px; margin-top: 24px; }
.cms-contact__field { display: grid; gap: 6px; font-weight: 600; }
.cms-contact__input { width: 100%; min-height: 56px; box-sizing: border-box; -webkit-appearance: none; appearance: none; padding: 0 18px; border: 2px solid #d7dbd5; border-radius: 16px; background: #fff; color: #232616; font-size: 17px; font-family: inherit; font-weight: 400; }
.cms-contact__text { min-height: 160px; padding: 14px 18px; line-height: 1.7; resize: vertical; }
.cms-contact__input:focus-visible, .cms-contact__go:focus-visible { outline: 3px solid var(--cms-caution); outline-offset: 2px; }
.cms-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cms-contact__go { justify-self: start; height: 64px; padding: 0 40px; border: 2px solid var(--cms-caution); border-radius: 999px; background: var(--cms-caution); color: #232616; font-size: 20px; font-weight: 800; font-family: inherit; cursor: pointer; }
.cms-contact__go:disabled { opacity: .6; cursor: default; }
.cms-contact__note { margin: 0; font-weight: 600; }
@media (max-width: 767px) { .cms-contact__go { justify-self: stretch; } }

/* --- ここから下は batonq.com 側の追記（LP を写し直す時もここから下は残す） --- */
/* P285: hero の写真をもう少し出す（元の .24 と暗いグラデ .7 だとほぼ見えない） */
body.lp-chrome .hero::before { opacity: .55; filter: brightness(1.35) contrast(1.05); }
body.lp-chrome .hero::after { background: radial-gradient(ellipse at 30% 40%, rgba(35,38,22,0) 0%, rgba(35,38,22,.55) 80%); }