.s-price-spot-tables { --ink: var(--price-ink, #11294f); --navy: var(--price-navy, #183464); --deep: var(--price-navy-deep, #10284f); --gold: var(--price-gold, #a88a4c); --paper: var(--price-paper, #fbf8f0); --line: var(--price-table-line, rgba(17,41,79,.17)); box-sizing: border-box; padding: clamp(76px,6vw,92px) 0; color: var(--ink); background: var(--paper) var(--price-paper-texture, none); }
  .s-price-spot-tables *, .s-price-spot-tables *::before, .s-price-spot-tables *::after { box-sizing: inherit; }
  .s-price-spot-tables__container { width: min(1180px,calc(100% - 48px)); margin-inline: auto; }
  .s-price-spot-tables__head { margin-bottom: clamp(32px,4vw,48px); }
  .s-price-spot-tables__eyebrow, .s-price-spot-tables__chapter-head p { margin: 0 0 10px; color: var(--gold); font-family: var(--price-font-sans,sans-serif); font-size: var(--price-fs-eyebrow,.76rem); font-weight: 800; letter-spacing: .18em; }
  .s-price-spot-tables__head h2 { margin: 0; font-family: var(--price-font-serif,serif); font-size: min(var(--price-fs-section-title,clamp(2rem,4.2vw,3.7rem)),3.35rem); font-weight: 600; letter-spacing: .035em; line-height: 1.3; }
  .s-price-spot-tables__lead { max-width: 820px; margin: 20px 0 0; color: rgba(17,41,79,.76); font-size: var(--price-fs-section-lead,1rem); line-height: 2; }
    .s-price-spot-tables__chapter + .s-price-spot-tables__chapter { margin-top: clamp(50px,5vw,64px); }
  .s-price-spot-tables__chapter-head { margin-bottom: 18px; } .s-price-spot-tables__chapter-head p { display: flex; align-items: center; gap: 11px; margin: 0 0 8px; line-height: 1.35; white-space: nowrap; } .s-price-spot-tables__chapter-head p::before { width: 32px; height: 1px; background: currentColor; content: ''; } .s-price-spot-tables__chapter-head p span { color: var(--navy); font-family: var(--price-font-serif,serif); font-size: 1.16rem; letter-spacing: 0; } .s-price-spot-tables__chapter-head p b { font: inherit; }
  .s-price-spot-tables__chapter-head h3 { margin: 0; font-family: var(--price-font-serif,serif); font-size: clamp(1.6rem,2.7vw,2.25rem); font-weight: 600; line-height: 1.3; } .s-price-spot-tables__chapter-head small { display: block; margin-top: 5px; color: rgba(17,41,79,.67); font-size: .77rem; font-weight: 600; line-height: 1.6; }
  .s-price-spot-tables__ledger { overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.56); box-shadow: 0 16px 34px rgba(17,41,79,.06); } .s-price-spot-tables__ledger-label, .s-price-spot-tables__addition-label { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 16px; } .s-price-spot-tables__ledger-label { color: #fff; background: var(--navy); } .s-price-spot-tables__ledger-label strong, .s-price-spot-tables__addition-label strong { font-family: var(--price-font-serif,serif); font-size: 1rem; font-weight: 600; } .s-price-spot-tables__ledger-label span { color: rgba(255,255,255,.73); font-size: .71rem; }
  .s-price-spot-tables__table-wrap { overflow-x: auto; } .s-price-spot-tables__table-wrap > table { width: 100%; } .s-price-spot-tables__table-wrap:focus-visible { outline: 3px solid rgba(42,122,170,.42); outline-offset: -3px; } .s-price-spot-tables table { width: 100%; min-width: 670px; border-collapse: collapse; table-layout: fixed; font-family: var(--price-font-sans,sans-serif); } .s-price-spot-tables thead th { height: 48px; padding: 9px 12px; color: #fff; background: var(--deep); font-size: .75rem; font-weight: 750; text-align: center; white-space: nowrap; } .s-price-spot-tables thead th:first-child { width: 43%; text-align: left; } .s-price-spot-tables thead th + th, .s-price-spot-tables tbody td { border-left: 1px solid var(--line); } .s-price-spot-tables tbody th, .s-price-spot-tables tbody td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; } .s-price-spot-tables tbody th { display: flex; gap: 11px; align-items: center; background: rgba(255,255,255,.72); text-align: left; } .s-price-spot-tables tbody td { color: var(--deep); background: rgba(234,243,248,.72); font-family: var(--price-font-serif,serif); font-size: clamp(.98rem,1.45vw,1.18rem); font-weight: 650; text-align: center; white-space: nowrap; }
  .s-price-spot-tables__plan-letter { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(168,138,76,.72); border-radius: 50%; color: var(--deep); background: #fff; font-family: var(--price-font-serif,serif); font-size: .98rem; font-weight: 650; } .s-price-spot-tables tbody th strong { display: inline; margin-right: 6px; color: var(--deep); font-size: .8rem; font-weight: 800; } .s-price-spot-tables tbody th small { color: rgba(17,41,79,.71); font-size: .73rem; font-weight: 600; line-height: 1.45; } .s-price-spot-tables tbody th em { display: inline-block; margin-left: 6px; color: rgba(17,41,79,.62); font-size: .65rem; font-style: normal; font-weight: 800; } .s-price-spot-tables tr.is-exception th, .s-price-spot-tables tr.is-exception td { background-color: rgba(248,246,240,.88); }
  .s-price-spot-tables__note { display: flex; gap: 13px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: rgba(17,41,79,.68); background: rgba(255,255,255,.42); font-size: .73rem; line-height: 1.5; } .s-price-spot-tables__note b { flex: 0 0 auto; color: var(--gold); } .s-price-spot-tables__addition-label { border-top: 3px double var(--line); background: rgba(248,244,232,.78); } .s-price-spot-tables__addition-label i { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(168,138,76,.55); border-radius: 50%; color: var(--gold); background: #fff; font-family: var(--price-font-serif,serif); font-size: 1rem; font-style: normal; } .s-price-spot-tables__addition-label small { display: block; margin-top: 2px; color: rgba(17,41,79,.62); font-size: .69rem; font-weight: 600; }
  .s-price-spot-tables__formula { display: flex; align-items: baseline; gap: 14px; margin: -4px 0 14px; padding: 9px 12px; border-left: 2px solid var(--gold); color: rgba(17,41,79,.78); background: rgba(248,244,232,.7); font-size: .78rem; line-height: 1.6; } .s-price-spot-tables__formula b { flex: 0 0 auto; color: var(--gold); font-size: .71rem; }
  @media (max-width: 700px) { .s-price-spot-tables { padding-block: 76px 92px; } .s-price-spot-tables__container { width: min(100% - 32px,1180px); } .s-price-spot-tables__chapter-head p { gap: 8px; font-size: .58rem; letter-spacing: .12em; } .s-price-spot-tables__chapter-head p::before { width: 20px; } .s-price-spot-tables__chapter-head p span { font-size: 1rem; } .s-price-spot-tables__chapter-head h3 { font-size: 1.5rem; } .s-price-spot-tables__chapter-head small { font-size: .69rem; } .s-price-spot-tables__ledger-label, .s-price-spot-tables__addition-label { padding-inline: 12px; } .s-price-spot-tables__ledger-label span { display: none; } .s-price-spot-tables__table-wrap { position: relative; } .s-price-spot-tables__table-wrap::after { content: '横にスクロールして比較'; position: sticky; left: 100%; display: block; width: max-content; margin: -25px 8px 6px auto; padding: 3px 6px; color: rgba(17,41,79,.62); background: rgba(255,255,255,.82); font-size: .58rem; pointer-events: none; } .s-price-spot-tables table { min-width: 660px; } .s-price-spot-tables thead th:first-child, .s-price-spot-tables tbody th { position: sticky; left: 0; z-index: 1; } .s-price-spot-tables thead th:first-child { z-index: 2; } .s-price-spot-tables tbody th { min-width: 280px; } .s-price-spot-tables tbody th, .s-price-spot-tables tbody td { padding: 10px; } .s-price-spot-tables__note { padding: 9px 12px; font-size: .67rem; } .s-price-spot-tables__formula { display: block; margin-bottom: 13px; font-size: .7rem; } .s-price-spot-tables__formula b { display: block; margin-bottom: 2px; } .s-price-spot-tables__chapter + .s-price-spot-tables__chapter { margin-top: 56px; } }