/*
 * Mobile section 02 comp implementation.
 * The generated foundation contains only the paper, cards and illustrations.
 * All meaningful copy remains selectable HTML text.
 */
body main[data-page-id="S13"] .cs-pain-mobile-break {
  display: none;
}

@media (max-width: 720px) {
  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section {
    position: relative;
    width: 100%;
    aspect-ratio: 851 / 1849;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f8f3e9;
    background-image: url("/assets/generated/cram-school-pain-v2/pain-mobile-foundation-v1.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section::before,
  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section::after {
    display: none;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section > .container {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section .center-head {
    position: absolute;
    z-index: 2;
    top: 2.65%;
    left: 5%;
    width: 90%;
    height: 10.2%;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2,
  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2 .doc-word {
    color: #fffaf0 !important;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2 {
    width: 100%;
    margin: 0;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: clamp(22px, 5.64vw, 40px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-align: center;
    text-wrap: balance;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2 .doc-word {
    display: inline;
    white-space: normal !important;
  }

  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2::after {
    display: none;
  }

  body main[data-page-id="S13"] .cs-pain-list {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
  }

  body main[data-page-id="S13"] .cs-pain-list > li {
    position: absolute;
    left: 37.8%;
    width: 54.2%;
    min-height: 0;
    height: 13.8%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    text-align: left;
  }

  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(1) { top: 20.4%; }
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(2) { top: 35.25%; left: 40.6%; width: 51.4%; }
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(3) { top: 49.1%; }
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(4) { top: 62.4%; left: 41.1%; width: 50.9%; }
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(5) { top: 75.05%; }

  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(n + 4) {
    min-height: 0;
  }

  body main[data-page-id="S13"] .cs-pain-list > li::after,
  body main[data-page-id="S13"] .cs-pain-visual {
    display: none;
  }

  body main[data-page-id="S13"] .cs-pain-list p {
    width: 100%;
    margin: 0;
    color: #143c35;
    font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: clamp(16px, 4.1vw, 29px);
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: .015em;
    text-wrap: pretty;
  }

  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(4) p,
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(5) p {
    font-size: clamp(14.5px, 3.65vw, 26px);
    line-height: 1.5;
  }

  body main[data-page-id="S13"] .cs-pain-list p .doc-word {
    display: inline;
    white-space: normal !important;
  }

  body main[data-page-id="S13"] .cs-pain-conclusion {
    position: absolute;
    z-index: 2;
    top: 87.55%;
    left: 5.25%;
    width: 89.5%;
    height: 10.3%;
    min-height: 0;
    margin: 0;
    padding: 4.3% 4% 1.7%;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #143c35;
    font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: clamp(12.5px, 3.2vw, 23px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .01em;
    text-align: center;
    text-wrap: balance;
    box-sizing: border-box;
    font-feature-settings: "palt" 1;
  }

  body main[data-page-id="S13"] .cs-pain-conclusion .doc-word {
    display: inline;
    white-space: normal !important;
  }

  body main[data-page-id="S13"] .cs-pain-conclusion .doc-break {
    display: block !important;
  }

  body main[data-page-id="S13"] .cs-pain-conclusion .cs-pain-mobile-break {
    display: block !important;
  }
}

@media (max-width: 380px) {
  body main[data-page-id="S13"] .cram-school-parent-template .problem-section.cs-pain-section h2 {
    font-size: 21px;
  }

  body main[data-page-id="S13"] .cs-pain-list p {
    font-size: 15.4px;
  }

  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(4) p,
  body main[data-page-id="S13"] .cs-pain-list > li:nth-child(5) p {
    font-size: 14px;
  }

  body main[data-page-id="S13"] .cs-pain-conclusion {
    font-size: 12px;
  }
}