[hidden] { display: none !important; }
button { font-family: var(--sans); }

/* 進み具合のバー（共通） */
.spot-bar, .pa-bar { display: block; height: 5px; overflow: hidden; background: rgba(255, 255, 255, .25); }
.spot-bar i, .pa-bar i { display: block; width: 0; height: 100%; background: var(--accent); }
.is-on > .spot-bar i, .is-on > .pa-bar i { width: 100%; animation: fill-bar var(--hold, 4s) linear; }
.is-pinned .is-on > .spot-bar i, .is-pinned .is-on > .pa-bar i { animation: none; }
@keyframes fill-bar { from { width: 0; } to { width: 100%; } }

/* 帯：順番にスポットライト（採用） */
.s-spot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 790px; }
.spot { position: relative; display: block; padding: 0 8px; overflow: hidden; background: none; border: 0; color: #fff; cursor: pointer; }
.spot-bg { position: absolute; inset: 0; background: var(--sub); transition: background .2s; }
.spot.is-on .spot-bg { background: var(--main); }
.spot-bar { position: relative; margin: 0 -8px 26px; }
.spot-word { position: relative; display: block; font: 900 clamp(15px, 1.5vw, 28px)/1.35 var(--serif); white-space: nowrap; opacity: .5; transition: opacity .2s; }
.spot-line { position: relative; display: block; min-height: 3em; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.5; opacity: 0; transition: opacity .2s; }
.spot.is-on .spot-word, .spot.is-on .spot-line { opacity: 1; }
.spot.is-on .spot-word { animation: pop-word .35s ease; }
@keyframes pop-word { from { transform: scale(.9); } 60% { transform: scale(1.05); } to { transform: scale(1); } }
.spot .real-phone { position: relative; left: auto; bottom: auto; display: block; width: min(84%, 270px); margin: 14px auto 0; filter: grayscale(1) brightness(.5); transform: scale(.9); transform-origin: top center; transition: filter .22s, transform .3s cubic-bezier(.2, 1.5, .4, 1); }
.spot.is-on .real-phone { filter: none; transform: scale(1.05); }
.spot .real-screen, .spot .real-status, .spot .real-video { display: flex; }
.spot .real-screen { flex-direction: column; }
.spot .real-status { align-items: center; }
.spot .real-video { flex: 1; min-height: 0; }
.spot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* 切り替え（確認用） */
.switcher { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-block: 0 22px; padding-inline: 14px; font-family: var(--sans); }
.switcher > span { color: #8a4b00; font-size: 13px; font-weight: 700; }
.switcher button { display: flex; align-items: baseline; gap: 5px; min-height: 40px; padding: 4px 11px; background: #fff7e6; border: 1px solid #e6b45e; border-radius: 8px; color: #6f3d00; font: 700 14px/1.4 var(--sans); cursor: pointer; }
.switcher small { font-size: 13px; font-weight: 500; }
.switcher button[aria-pressed="true"] { background: #8a4b00; border-color: #8a4b00; color: #fff; }

/* PCの共通 */
.stage { aspect-ratio: 16 / 9; background: #fff; }
.stage video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage .stage-v { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.stage .stage-v.is-on { opacity: 1; }
small { display: block; }

/* PC 案A：言葉のタブと大きな1台 */
.p-tabs { padding: 30px max(20px, calc((100% - 1040px) / 2)) 54px; background: var(--grad); text-align: center; }
.pa-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pa-tabs button { padding: 0 0 12px; overflow: hidden; background: rgba(255, 255, 255, .1); border: 0; color: rgba(255, 255, 255, .62); font: 900 clamp(24px, 3.4vw, 50px)/1.25 var(--serif); cursor: pointer; transition: background .2s, color .2s; }
.pa-tabs small { margin-top: 10px; font-size: clamp(13px, 1.2vw, 17px); font-weight: 700; }
.pa-tabs button.is-on { background: #fff; color: var(--main); }
.pa-tabs button.is-on .pa-bar { background: #d9e8dd; }
.pa-tabs button.is-on .pa-bar i { background: var(--main); }
.pa-line { min-height: 1.8em; margin-block: 16px 22px; color: #fff; font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; }
.p-tabs .real-laptop { width: min(100%, 900px); margin-inline: auto; }

/* PC 案B：重なる3枚の画面 */
.p-stack { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; padding: 44px max(24px, calc((100% - 1180px) / 2)); background: var(--sub); }
.pb-windows { position: relative; aspect-ratio: 16 / 10.5; }
.pb-win { position: absolute; left: 0; top: 0; width: 88%; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 16px 34px rgba(0, 0, 0, .4); filter: brightness(.55); transition: transform .4s ease, filter .3s; }
.pb-win:nth-child(1) { transform: translate(0, 0) scale(.94); z-index: 1; }
.pb-win:nth-child(2) { transform: translate(7%, 8%) scale(.94); z-index: 1; }
.pb-win:nth-child(3) { transform: translate(14%, 16%) scale(.94); z-index: 1; }
.pb-win.is-on { z-index: 3; filter: none; }
.pb-win:nth-child(1).is-on { transform: translate(4%, 3%); }
.pb-win:nth-child(2).is-on { transform: translate(7%, 8%); }
.pb-win:nth-child(3).is-on { transform: translate(10%, 13%); }
.pb-chrome { display: flex; gap: 5px; padding: 8px 12px; background: #e7e9ee; }
.pb-chrome i { width: 9px; height: 9px; background: #b7bcc6; border-radius: 50%; }
.pb-win video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.pb-words button { display: block; width: 100%; margin-bottom: 10px; padding: 0 0 12px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 0; color: rgba(255, 255, 255, .55); font: 900 clamp(24px, 2.8vw, 42px)/1.25 var(--serif); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.pb-words small, .pb-words button > span:last-child { padding-inline: 16px; }
.pb-words small { margin-top: 10px; font-size: 15px; font-weight: 700; }
.pb-words button { text-indent: 0; }
.pb-words button > span:last-child { display: none; margin-top: 4px; font: 700 14px/1.6 var(--sans); }
.pb-words button.is-on { background: var(--main); color: var(--accent); }
.pb-words button.is-on > span:last-child { display: block; color: #fff; }

/* PC 案C：帯と同じスポットライト */
.p-spot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-spot { padding: 0 18px 44px; overflow: hidden; background: var(--sub); border: 0; color: #fff; cursor: pointer; transition: background .2s; }
.pc-spot.is-on { background: var(--main); }
.pc-spot .pa-bar { margin: 0 -18px 24px; }
.pc-spot-word { display: block; color: rgba(255, 255, 255, .5); font: 900 clamp(26px, 3.3vw, 52px)/1.2 var(--serif); transition: color .2s; }
.pc-spot-word small { font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; }
.pc-spot.is-on .pc-spot-word { color: var(--accent); }
.pc-spot-line { display: block; min-height: 3.2em; margin-block: 8px 12px; font-size: 14px; font-weight: 700; line-height: 1.6; opacity: 0; transition: opacity .2s; }
.pc-spot.is-on .pc-spot-line { opacity: 1; }
.pc-spot .real-laptop { filter: grayscale(1) brightness(.5); transform: scale(.92); transition: filter .22s, transform .3s; }
.pc-spot.is-on .real-laptop { filter: none; transform: scale(1); }
.pc-spot .real-lid { padding: 10px 8px; }

/* PC 案D：全面の画面に大きな言葉 */
.p-cine { position: relative; height: clamp(520px, 50vw, 760px); overflow: hidden; background: #071f3d; }
.cine-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .35s; }
.cine-v.is-on { opacity: 1; }
.cine-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 31, 61, .96) 26%, rgba(7, 31, 61, .55) 52%, rgba(7, 31, 61, 0) 74%); }
.cine-copy { position: absolute; left: max(24px, calc((100% - 1180px) / 2)); top: 50%; width: min(46%, 560px); color: #fff; transform: translateY(-58%); }
.cine-item { display: none; }
.cine-item.is-on { display: block; animation: pop-word .35s ease; }
.cine-item p { font: 700 clamp(19px, 2.1vw, 32px)/1.4 var(--serif); }
.cine-item h3 { color: var(--accent); font: 900 clamp(50px, 7vw, 108px)/1.2 var(--serif); white-space: nowrap; }
.cine-item span { display: block; margin-top: 8px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; line-height: 1.6; }
.cine-nav { position: absolute; left: max(24px, calc((100% - 1180px) / 2)); bottom: 26px; display: flex; gap: 8px; width: min(52%, 640px); }
.cine-nav button { flex: 1; min-width: 0; padding: 0 0 8px; overflow: hidden; background: rgba(255, 255, 255, .1); border: 0; color: rgba(255, 255, 255, .7); font: 700 13px/1.4 var(--sans); cursor: pointer; }
.cine-nav .pa-bar { margin-bottom: 7px; }
.cine-nav button.is-on { color: #fff; }

@media (max-width: 1080px) and (min-width: 761px) {
  .s-spot { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  .spot { height: 760px; }
  .spot-word { font-size: 20px; white-space: normal; }
  .p-stack { grid-template-columns: minmax(0, 1fr); }
  .p-spot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .s-spot { display: block; height: auto; }
  .spot { width: 100%; padding: 0 8px 30px; }
  .spot-bar { margin-bottom: 20px; }
  .spot-word { font-size: 25px; white-space: normal; word-break: auto-phrase; }
  .spot-line { min-height: 0; }
  .spot .real-phone { width: min(280px, 78%); }

  .pa-tabs { gap: 4px; }
  .pa-tabs button { font-size: 19px; }
  .pa-tabs small { font-size: 12.5px; }
  .p-tabs { padding: 22px 10px 36px; }

  .p-stack { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 14px; }

  .p-spot { grid-template-columns: minmax(0, 1fr); }
  .pc-spot-line { min-height: 0; }

  .p-cine { height: 620px; }
  .cine-v { height: 46%; object-position: top; }
  .cine-shade { background: linear-gradient(transparent 28%, #071f3d 47%); }
  .cine-copy { left: 16px; right: 16px; top: auto; bottom: 86px; width: auto; transform: none; }
  .cine-item h3 { font-size: 58px; }
  .cine-nav { left: 12px; right: 12px; bottom: 14px; width: auto; }
  .cine-nav button { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .spot-bg, .spot-word, .spot-line, .spot .real-phone, .pa-tabs button, .pb-win, .pb-words button, .pc-spot, .pc-spot-word, .pc-spot-line, .pc-spot .real-laptop, .stage .stage-v, .cine-v { transition: none; }
  .spot.is-on .spot-word, .cine-item.is-on { animation: none; }
  .is-on > .spot-bar i, .is-on > .pa-bar i { animation: none; }
}

.p-tabs, .p-stack, .p-spot { overflow-x: clip; }

/* ボタンの中身を上から並べる（進み具合のバーを上端に） */
.spot { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.pc-spot { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.real-lid .stage { aspect-ratio: 16 / 9; }

/* 帯の高さはスマホに合わせる */
.s-spot { height: auto; }
.spot { height: auto; padding-bottom: 52px; }

/* 現場まるごと：スマホ3台の代わりに全体工程表 */
.about-pc { width: min(960px, 100%); margin: 28px auto 0; }

/* PC画面のタブを5つに */
.pa-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pa-tabs button { font-size: clamp(18px, 2.15vw, 34px); }
.pa-tabs small { font-size: clamp(12.5px, 1vw, 15px); }
@media (max-width: 760px) {
  .pa-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pa-tabs button { grid-column: span 2; font-size: 19px; }
  .pa-tabs button:nth-child(n+4) { grid-column: span 3; }
}
.ab { overflow-x: clip; }

/* 帯：先に課題の数字、次に解決の画面 */
.spot-num { position: relative; display: block; font: 900 clamp(28px, 3.1vw, 52px)/1.15 var(--serif); letter-spacing: -.01em; white-space: nowrap; opacity: .5; transition: opacity .2s; }
.spot.is-on .spot-num { color: var(--accent); opacity: 1; animation: pop-word .35s ease; }
.spot-pain { position: relative; display: block; min-height: 4.2em; margin-top: 6px; font: 700 clamp(14px, 1.2vw, 19px)/1.4 var(--serif); word-break: auto-phrase; opacity: 0; transition: opacity .2s; }
.spot-src { position: relative; display: block; min-height: 4.5em; margin-top: 4px; color: #eef4f0; font-size: 12.5px; font-weight: 500; line-height: 1.45; word-break: auto-phrase; opacity: 0; transition: opacity .2s; }
.spot-fix { position: relative; display: block; min-height: 5.2em; margin-top: 6px; padding: 7px 8px; background: #fff; border-radius: 8px; color: var(--main); font: 900 clamp(14px, 1.15vw, 18px)/1.35 var(--serif); word-break: auto-phrase; opacity: 0; transition: opacity .2s; }
.spot-fix small { margin-bottom: 2px; color: var(--sub); font: 700 12.5px/1.4 var(--sans); }
.spot.is-on .spot-pain, .spot.is-on .spot-src, .spot.is-on .spot-fix { opacity: 1; }
.spot .real-phone { margin-top: 14px; }

.facts-note { width: min(920px, 100%); margin-inline: auto; padding: 16px 20px 6px; color: #444; font-size: 13px; line-height: 1.7; }
.facts-note summary { margin-top: 8px; color: var(--main); font-weight: 700; cursor: pointer; }
.facts-note li { margin-top: 6px; padding-left: 1em; text-indent: -1em; }
.facts-note li::before { content: "・"; }
.facts-note a { color: var(--main); text-decoration: underline; }

@media (max-width: 1080px) and (min-width: 761px) {
  .spot { height: auto; }
  .spot-num { font-size: 40px; }
}
@media (max-width: 760px) {
  .spot-num { font-size: 46px; }
  .spot-pain { min-height: 0; font-size: 18px; }
  .spot-src { min-height: 0; }
  .spot-fix { min-height: 0; font-size: 18px; }
  .spot-pain, .spot-src, .spot-fix, .spot-num { opacity: 1; }
  .spot .spot-num { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .spot-num, .spot-pain, .spot-src, .spot-fix { opacity: 1; transition: none; }
  .spot.is-on .spot-num { animation: none; }
}

/* 文字と電話の間を詰める */
.spot-pain { min-height: 2.9em; text-wrap: balance; }
.spot-src { min-height: 3em; text-wrap: balance; }
.spot-fix { min-height: 4em; text-wrap: balance; }
@media (max-width: 1280px) and (min-width: 761px) {
  .spot-pain { min-height: 4.2em; }
  .spot-src { min-height: 4.4em; }
  .spot-fix { min-height: 5.4em; }
}
@media (max-width: 760px) {
  .spot-pain, .spot-src, .spot-fix { min-height: 0; }
}

/* 文字は最初から全部見せる。スポットは面・枠・拡大で一目で分かるように */
.spot-num { color: #fff; opacity: 1; }
.spot-pain { color: #fff; opacity: 1; }
.spot-src { color: #d5deea; opacity: 1; }
.spot-fix { background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; transition: background .2s, color .2s; }
.spot-fix small { color: #d5deea; }
.spot.is-on .spot-fix { background: #fff; color: var(--main); }
.spot.is-on .spot-fix small { color: var(--sub); }
.spot { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; }
.spot-bg::after { content: ""; position: absolute; inset: 0; border: 5px solid transparent; transition: border-color .2s; pointer-events: none; }
@media (min-width: 761px) {
  .s-spot { overflow: visible; padding-block: 14px; background: var(--sub); }
  .spot { overflow: visible; }
  .spot.is-on { z-index: 3; transform: scale(1.045); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
  .spot.is-on .spot-bg::after { border-color: var(--accent); }
  .spot.is-on .spot-num { font-size: clamp(32px, 3.5vw, 58px); }
}
.s-spot { overflow-x: clip; }

/* 最後の画面：工程が動いているPCと、診断結果のスマホ */
.end-visual { position: relative; align-self: center; padding-bottom: 34px; }
.end-visual .stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.end-phone { position: absolute; right: -6px; bottom: 0; width: 28%; background: #fff; border: 5px solid #15161a; border-radius: 20px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transform: rotate(3deg); }

/* 端の帯は拡大しても枠が切れないように */
@media (min-width: 761px) {
  .spot:first-child { transform-origin: left center; }
  .spot:last-child { transform-origin: right center; }
}

/* 現場まるごと：6案 */
.ab-opt { margin-top: 24px; }
.ab-box { width: min(1000px, 100%); margin-inline: auto; }
.ab-box .real-laptop { width: min(100%, 900px); margin-inline: auto; }
.ab-box video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab-box .stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab-box button { border: 0; font-family: var(--serif); cursor: pointer; }
.ab-line { min-height: 1.8em; margin-block: 14px; color: var(--ink); font: 700 clamp(16px, 1.7vw, 22px)/1.6 var(--serif); text-align: center; }

.ab-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.ab-steps button { min-height: 62px; padding: 4px 14px 4px 20px; background: var(--sub); color: #fff; font-size: clamp(14px, 1.7vw, 22px); font-weight: 900; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); transition: background .2s; }
.ab-steps button[aria-pressed="true"] { background: var(--main); color: var(--accent); }

.ab-roles { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.ab-roles button { flex: 1; max-width: 200px; min-height: 58px; background: #e7ebe6; color: var(--sub); font-size: clamp(18px, 2.2vw, 28px); font-weight: 900; }
.ab-roles button[aria-pressed="true"] { background: var(--main); color: #fff; }
.ab-role-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px; align-items: center; text-align: left; }
.ab-now, .ab-then { padding: 14px 16px; font: 900 clamp(17px, 1.8vw, 24px)/1.5 var(--serif); }
.ab-now { color: #555; }
.ab-then { margin-top: 10px; background: #fff; border-left: 6px solid var(--main); color: var(--main); }
.ab-now small, .ab-then small { display: block; color: var(--sub); font: 700 13px/1.6 var(--sans); }

.ab-box-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; text-align: left; }
.ab-merge-head, .ab-merge-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ab-merge-head { padding: 0 12px 6px; color: var(--sub); font-size: 13px; font-weight: 700; }
.ab-merge-row { align-items: center; margin-top: 5px; padding: 8px 12px; background: #fff; font-size: 15px; line-height: 1.4; }
.ab-merge-row s { color: #555; text-decoration-color: #c23a2c; text-decoration-thickness: 2px; }
.ab-merge-row b { color: var(--main); font: 900 17px/1.4 var(--serif); }

.ab-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 8px; }
.ab-doc { transform: rotate(var(--r)); transition: transform .2s; }
.ab-doc:hover { transform: rotate(0) scale(1.05); }
.ab-doc img { width: 100%; background: #fff; border: 1px solid #d6dad6; box-shadow: 0 14px 28px rgba(10, 44, 85, .2); }
.ab-doc figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; }
.ab-doc b { display: block; color: var(--main); font: 900 clamp(17px, 1.7vw, 22px)/1.4 var(--serif); }

.ab-line-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-line-steps button { padding: 10px 6px; background: #e7ebe6; color: var(--sub); }
.ab-line-steps b { display: block; font-size: clamp(19px, 2.3vw, 30px); font-weight: 900; line-height: 1.3; }
.ab-line-steps span { font: 700 13.5px/1.5 var(--sans); }
.ab-line-steps button[aria-pressed="true"] { background: var(--grad); color: #fff; }

.ab-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.ab-tabs button { min-height: 44px; padding: 4px 16px; background: #e7ebe6; border-radius: 22px; color: var(--sub); font-size: 16px; font-weight: 700; }
.ab-tabs button[aria-pressed="true"] { background: var(--main); color: #fff; }
.ab-browser { overflow: hidden; background: #fff; border: 1px solid #cfd6e4; border-top: 24px solid #e5e8ee; border-radius: 12px; box-shadow: 0 16px 34px rgba(10, 44, 85, .2); }
.ab-browser img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

@media (max-width: 760px) {
  .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-steps button { min-height: 50px; }
  .ab-role-body, .ab-box-2 { grid-template-columns: minmax(0, 1fr); }
  .ab-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-steps button, .ab-doc { transition: none; }
}

/* 採用：対応表（2列）と、ぜんぶの画面 */
.ab-merge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(900px, 100%); margin: 28px auto 0; text-align: left; }
.ab-then-line { margin: 34px 0 14px; color: var(--ink); font: 900 clamp(20px, 2.4vw, 30px)/1.5 var(--serif); }
#ab6 { margin-top: 0; }
@media (max-width: 760px) {
  .ab-merge { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ab-merge-col + .ab-merge-col .ab-merge-head { display: none; }
}
.ab-browser img { object-fit: contain; background: #fff; }
.ab-then-line { word-break: auto-phrase; }

/* 対応表を画面の横に */
.ab-side { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 28px; align-items: start; width: min(1280px, 100%); margin: 0 auto; }
.ab-side .ab-merge { display: block; width: auto; margin: 58px 0 0; }
.ab-side .ab-box { width: auto; margin: 0; }
.ab-side .ab-merge-row { margin-top: 7px; padding: 12px 12px; }
.ab-side .ab-merge-row s { font-size: 14px; }
.ab-side .ab-merge-row b { font-size: clamp(15px, 1.25vw, 18px); }
@media (max-width: 1000px) {
  .ab-side { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-side .ab-merge { margin-top: 0; }
}

/* 採用：3列の比較表 */
.ab-compare { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.4; text-align: left; box-shadow: 0 10px 24px rgba(10, 44, 85, .1); }
.ab-compare th, .ab-compare td { padding: 15px 10px; border-bottom: 1px solid #dfe3df; }
.ab-compare thead th { background: var(--sub); color: #fff; font-size: 14px; font-weight: 700; }
.ab-compare thead th:last-child { background: var(--main); }
.ab-compare tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ab-compare td:last-child { background: #f0f7f2; color: var(--main); font: 900 clamp(15px, 1.2vw, 17px)/1.4 var(--serif); }

/* 一般的なシステムとの比較 */
.vs { padding-block: 60px; background: var(--paper); }
.vs-why { margin-top: 24px; padding: 16px 20px; background: var(--sub); color: #fff; text-align: center; }
.vs-why-title { font: 700 clamp(15px, 1.6vw, 19px)/1.5 var(--serif); }
.vs-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 44px; margin-top: 4px; }
.vs-nums p { font: 700 clamp(15px, 1.5vw, 18px)/1.4 var(--serif); }
.vs-nums b { display: block; color: var(--accent); font-size: clamp(40px, 5vw, 58px); font-weight: 900; line-height: 1.15; }
.vs-why-src { margin-top: 8px; color: #d5deea; font-size: 12.5px; line-height: 1.5; }
.vs-scroll { margin-top: 18px; }
.vs-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.5; text-align: left; box-shadow: 0 10px 24px rgba(10, 44, 85, .1); }
.vs-table th, .vs-table td { padding: 14px 14px; border-bottom: 1px solid #dfe3df; vertical-align: middle; }
.vs-table thead th { background: #5b6675; color: #fff; font-size: 14.5px; font-weight: 700; }
.vs-table thead th:first-child { background: #fff; }
.vs-table thead th:last-child { background: var(--main); font: 900 19px/1.4 var(--serif); }
.vs-table tbody th { width: 20%; color: var(--ink); font-weight: 700; }
.vs-table td:nth-child(2) { width: 36%; color: #444; }
.vs-table td:last-child { background: #f0f7f2; color: var(--main); font: 900 clamp(15px, 1.35vw, 18px)/1.5 var(--serif); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vs-fair { margin-top: 16px; padding: 12px 16px; background: #fff; border-left: 5px solid var(--sub); font-size: 14.5px; line-height: 1.7; }
.vs-note { margin-top: 12px; color: #444; font-size: 13px; line-height: 1.7; }
.vs-note a { color: var(--main); text-decoration: underline; }
@media (max-width: 680px) {
  .vs { padding-block: 44px; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: 100% !important; }
  .vs-table thead { display: none; }
  .vs-table tr { margin-bottom: 10px; background: #fff; }
  .vs-table tbody th { padding: 8px 12px; background: var(--sub); border: 0; color: #fff; }
  .vs-table td { padding: 8px 12px; border: 0; }
  .vs-table td:nth-child(2)::before { content: "一般的なシステム"; display: block; color: #555; font-size: 12.5px; font-weight: 700; }
  .vs-table td:last-child::before { content: "塗カルテ"; display: block; color: var(--sub); font: 700 12.5px/1.6 var(--sans); }
}

/* 画面の左横：比べる相手を切り替える */
.ab-side .ab-merge { margin-top: 0; }
.ab-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.ab-switch button { min-height: 50px; padding: 4px 6px; background: #e7ebe6; border: 0; border-radius: 25px; color: var(--sub); font: 700 clamp(14px, 1.15vw, 16px)/1.3 var(--serif); cursor: pointer; }
.ab-switch button[aria-pressed="true"] { background: var(--main); color: #fff; }
.ab-why { padding: 10px 12px; background: var(--sub); color: #fff; text-align: center; }
.ab-why p { font: 700 13.5px/1.5 var(--serif); }
.ab-why div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.ab-why span { font: 700 13px/1.35 var(--serif); }
.ab-why b { display: block; color: var(--accent); font-size: clamp(28px, 2.5vw, 36px); font-weight: 900; line-height: 1.15; }
.ab-panel .ab-compare th, .ab-panel .ab-compare td { padding: 12px 8px; }
.ab-panel .ab-why + .ab-compare th, .ab-panel .ab-why + .ab-compare td { padding: 9px 7px; font-size: 13.5px; }
.ab-panel .ab-why + .ab-compare td:last-child { font-size: clamp(14px, 1.1vw, 15.5px); }
.ab-panel .ab-why + .ab-compare thead th:nth-child(2) { background: #5b6675; }
.ab-panel .ab-why + .ab-compare thead th:first-child { background: var(--sub); }
.ab-side-notes { width: min(1280px, 100%); margin: 18px auto 0; text-align: left; }
.vs-fair { padding: 12px 16px; background: #fff; border-left: 5px solid var(--sub); font-size: 14.5px; line-height: 1.7; }
.vs-note { margin-top: 10px; color: #444; font-size: 13px; line-height: 1.7; }
.vs-note a { color: var(--main); text-decoration: underline; }

/* 3者の比較：短い言葉だけ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ab-side .ab-merge { margin-top: 58px; }
.ab-simple { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; text-align: center; box-shadow: 0 10px 24px rgba(10, 44, 85, .1); }
.ab-simple th, .ab-simple td { padding: 19px 3px; border-bottom: 1px solid #e3e6e2; font-size: 14px; line-height: 1.3; word-break: keep-all; }
.ab-simple thead th { padding-block: 12px; background: #5b6675; color: #fff; font-weight: 700; }
.ab-simple thead th:first-child { background: #fff; }
.ab-simple thead th:last-child { background: var(--main); font: 900 15.5px/1.3 var(--serif); }
.ab-simple tbody th { color: var(--ink); font-weight: 700; }
.ab-simple td { color: #555; }
.ab-simple td:last-child { background: #f0f7f2; color: var(--main); font: 900 16px/1.3 var(--serif); }
.ab-simple-note { margin-top: 8px; color: #444; font-size: 13px; line-height: 1.5; text-align: left; }
@media (max-width: 1000px) { .ab-side .ab-merge { margin-top: 0; } }