/* Approved benefit comp: PC 1536x1024 / mobile 836x1881.
   All rules are restricted to this section; the existing page stylesheet is untouched. */
[data-page-id="S13"] .cs-section.cs-benefit-comp {
  --csb-u: min(.065104167vw, 1px);
  padding: 0;
  container-type: inline-size;
  background: #03172f url('/assets/generated/cram-school-benefit-20260831/benefit-navy-paper-v1.webp') repeat;
  background-size: 768px 512px;
  color: #fff;
}
[data-page-id="S13"] .cs-benefit-comp .csb-inner { --csb-u: min(.065104167cqw, 1px); width: min(100%, 1536px); margin: 0 auto; padding: calc(68 * var(--csb-u)) calc(70 * var(--csb-u)) calc(76 * var(--csb-u)); box-sizing: border-box; }
[data-page-id="S13"] .cs-benefit-comp .csb-intro { padding: 0 calc(28 * var(--csb-u)); }
[data-page-id="S13"] .cs-benefit-comp h2 {
  max-width: none; margin: 0; padding: 0; color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: calc(56 * var(--csb-u)); font-weight: 600; line-height: 1.58; letter-spacing: .035em;
  text-align: left; word-break: normal; overflow-wrap: normal; text-wrap: wrap;
  scroll-margin-top: 136px;
}
[data-page-id="S13"] .cs-benefit-comp h2 > span { display: block; white-space: nowrap; }
[data-page-id="S13"] .cs-benefit-comp .csb-body {
  display: block; max-width: none; margin: calc(30 * var(--csb-u)) 0 0; padding: 0; color: #fff;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: calc(24 * var(--csb-u)); font-weight: 500; line-height: 1.96; letter-spacing: .1em;
  text-align: left; word-break: normal; overflow-wrap: normal; text-wrap: wrap;
}
[data-page-id="S13"] .cs-benefit-comp .csb-summary {
  position: relative; margin: calc(28 * var(--csb-u)) 0 calc(25 * var(--csb-u)); padding: 0 0 calc(16 * var(--csb-u));
  color: #fff; border: 0; font-size: calc(30 * var(--csb-u)); font-weight: 700; line-height: 1.4; letter-spacing: .08em;
}
[data-page-id="S13"] .cs-benefit-comp .csb-summary::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: calc(43 * var(--csb-u)); height: calc(4 * var(--csb-u)); background: #35aebb; }
[data-page-id="S13"] .cs-benefit-comp .csb-steps { display: grid; grid-template-columns: 410fr 422fr 430fr; gap: calc(67 * var(--csb-u)); padding: 0; margin: 0; list-style: none; }
[data-page-id="S13"] .cs-benefit-comp .csb-step { position: relative; min-width: 0; margin: 0; padding: 0; }
[data-page-id="S13"] .cs-benefit-comp .csb-step-heading { display: flex; align-items: center; gap: calc(27 * var(--csb-u)); height: calc(97 * var(--csb-u)); padding: 0 calc(10 * var(--csb-u)) calc(20 * var(--csb-u)); box-sizing: border-box; }
[data-page-id="S13"] .cs-benefit-comp .csb-number { flex-shrink: 0; color: #35adba; font-family: "Times New Roman", serif; font-size: calc(90 * var(--csb-u)); font-weight: 400; font-style: italic; line-height: 1; letter-spacing: -.06em; }
[data-page-id="S13"] .cs-benefit-comp .csb-step-heading p { margin: 0; padding: 0; color: #fff; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: calc(24 * var(--csb-u)); font-weight: 500; line-height: 1.66; letter-spacing: .025em; white-space: nowrap; }
[data-page-id="S13"] .cs-benefit-comp .csb-photo { display: block; width: 100%; height: calc(324 * var(--csb-u)); border-radius: calc(18 * var(--csb-u)); object-fit: cover; object-position: 50% 50%; }
[data-page-id="S13"] .cs-benefit-comp .csb-step:not(:last-child)::after { content: ""; position: absolute; width: calc(40 * var(--csb-u)); height: calc(62 * var(--csb-u)); left: calc(100% + 13 * var(--csb-u)); top: calc(207 * var(--csb-u)); background: #2aafc0; clip-path: polygon(0 27%, 40% 27%, 40% 0, 100% 50%, 40% 100%, 40% 73%, 0 73%); }
[data-page-id="S13"] .cs-benefit-comp .csb-mobile-break { display: none; }
@media (max-width: 720px) {
  [data-page-id="S13"] .cs-section.cs-benefit-comp { padding: 0; }
  [data-page-id="S13"] .cs-benefit-comp .csb-inner { --csb-u: calc(100cqw / 836); padding: calc(49 * var(--csb-u)) calc(60 * var(--csb-u)) calc(74 * var(--csb-u)); }
  [data-page-id="S13"] .cs-benefit-comp .csb-intro { padding: 0; }
  [data-page-id="S13"] .cs-benefit-comp h2 { font-size: calc(56 * var(--csb-u)); line-height: 1.5; letter-spacing: .03em; }
  [data-page-id="S13"] .cs-benefit-comp .csb-body { margin-top: calc(27 * var(--csb-u)); font-size: calc(34 * var(--csb-u)); line-height: 1.86; letter-spacing: .06em; }
  [data-page-id="S13"] .cs-benefit-comp .csb-summary { margin: calc(35 * var(--csb-u)) 0 calc(30 * var(--csb-u)); padding-bottom: calc(15 * var(--csb-u)); font-size: calc(34 * var(--csb-u)); line-height: 1.45; letter-spacing: .04em; }
  [data-page-id="S13"] .cs-benefit-comp .csb-summary::after { width: calc(50 * var(--csb-u)); height: calc(5 * var(--csb-u)); }
  [data-page-id="S13"] .cs-benefit-comp .csb-steps { grid-template-columns: 1fr; gap: calc(72 * var(--csb-u)); }
  [data-page-id="S13"] .cs-benefit-comp .csb-step { display: grid; grid-template-columns: calc(368 * var(--csb-u)) minmax(0,1fr); gap: calc(34 * var(--csb-u)); align-items: start; }
  [data-page-id="S13"] .cs-benefit-comp .csb-step-heading { grid-column: 2; grid-row: 1; display: block; height: auto; padding: 0; }
  [data-page-id="S13"] .cs-benefit-comp .csb-number { display: block; font-size: calc(98 * var(--csb-u)); line-height: .84; letter-spacing: -.05em; }
  [data-page-id="S13"] .cs-benefit-comp .csb-step-heading p { margin-top: calc(16 * var(--csb-u)); font-size: calc(34 * var(--csb-u)); line-height: 1.52; letter-spacing: .012em; }
  [data-page-id="S13"] .cs-benefit-comp .csb-photo { grid-column: 1; grid-row: 1; height: calc(254 * var(--csb-u)); border-radius: calc(20 * var(--csb-u)); }
  [data-page-id="S13"] .cs-benefit-comp .csb-step:not(:last-child)::after { top: calc(264 * var(--csb-u)); left: calc(162 * var(--csb-u)); width: calc(46 * var(--csb-u)); height: calc(42 * var(--csb-u)); clip-path: polygon(28% 0, 72% 0, 72% 40%, 100% 40%, 50% 100%, 0 40%, 28% 40%); }
  [data-page-id="S13"] .cs-benefit-comp .csb-mobile-break { display: inline; }
  [data-page-id="S13"] .cs-benefit-comp .csb-desktop-break { display: none; }
}