@layer reset, base, components, utilities;

@layer components {
/* ===== summer-learning ===== */
body {
  &.summer-learning {
  }
  &.summer-learning2026 {
    --contents-red: #ca2420;
    .container-wrapper,
    .container:not(.experience) {
      background-color: #fff;
      &.-head {
        background-color: #80cce6;
        background-image: url(/shared/images/classroom/summer-learning2026/bg_head-sp.png);
        background-position: center top;
        background-repeat: no-repeat;
        @media (min-width: 800px) {
          background-image: url(/shared/images/classroom/summer-learning2026/bg_head-pc.png);
          height: 430px;
        }
        .container__inner {
          padding: 0;
          position: relative;
          @media (max-width: 799px) {
          }
          @media (min-width: 800px) {
            height: 430px;
          }
        }
        &[class*=-theme] {
          @media (max-width: 799px) {
            background-size: calc(1000px / 780px * 100%) auto;
          }
          .container__inner {
            @media (max-width: 799px) {
              flex-direction: column;
              .heading__text-wrapper {
                align-self: flex-start;
                padding-inline: 20px;
              }
            }
            @media (min-width: 800px) {
              justify-content: flex-start;
              .heading__text-wrapper {
                flex-grow: 0;
                padding-inline-start: 40px;
                position: relative;
                z-index: 1;
              }
            }
            .heading__image {
              aspect-ratio: 878 / 430;
              img {
                aspect-ratio: 878 / 430;
              }
              @media (min-width: 800px) {
                inset: 0 -125px auto auto;
                position: absolute;
                img {
                  width: 878px;
                  max-width: none;
                }
              }
            }
          }
          .tag {
            background-color: #e95532;
            border-color: #e95532;
            border-radius: var(--border-radius-10);
            color: #fff;
            &:has(ruby) {
              rt {
                font-size: 10px;
              }
            }
          }
        }
        &:not([class*=-theme]) {
          background-image: url(/shared/images/classroom/summer-learning2026/bg_head_top-sp.png);
          @media (max-width: 799px) {
            aspect-ratio: 780/816;
            background-size: calc(900px / 780px * 100%) 100%;
          }
          @media (min-width: 800px) {
            background-image: url(/shared/images/classroom/summer-learning2026/bg_head_top-pc.png);
          }
          .container__inner {
            background-repeat: no-repeat;
            align-items: flex-start;
            @media (max-width: 799px) {
              aspect-ratio: 780/816;
              background-image: url(/shared/images/classroom/summer-learning2026/img_head_top-sp.png);
              background-position: center bottom;
              background-size: contain;
            }
            @media (min-width: 800px) {
              background-image: url(/shared/images/classroom/summer-learning2026/img_head_top-pc.png);
              background-position: center center;
              max-width: 100%;
            }
            .heading__text-image {
              @media (max-width: 799px) {
                aspect-ratio: 780/816;
                width: 100%;
                height: auto;
              }
              @media (min-width: 800px) {
                margin-block-start: 85px;
              }
            }
          }
        }
        &.-theme01 {
          background-color: #ffe1c6;
        }
        &.-theme02 {
          background-color: #e0d0f8;
        }
        &.-theme03 {
          background-color: #ffefcb;
        }
        &.-theme04 {
          background-color: #cbedc1;
        }
      }
      .heading__text {
        color: #e95532;
        .heading-1 {
          color: inherit;
        }
      }
    }

    .section-column-01 {
      &:has(ruby) {
        rt {
          margin-block: .4em .1em;
          @supports (hanging-punctuation: first) {
            margin-block: 0 -.5em;
          }
        }
      }
    }

    .section-card-list-01__item {
      &:has(ruby) {
        rt {
          margin-block-start: -1.5em;
        }
      }
      .section-card-list-01__title {
        &:has(ruby) {
          line-height: 1.8;
        }
      }
      .list-data {
        row-gap: 8px;
      }
      .tag {
        &:has(ruby) {
          rt {
            background-color: #fff;
            font-size: 10px;
          }
        }
      }
    }


    .section-column-01__box-lead {
      background-color: #f2eeec;
      text-align: center;
    }

    .section-column-01__title {
      &:is(h2),
      > h2 {
        color: var(--contents-red);
      }
    }

    .section-column-01__contents {
      > .box__section {
        &:not(:first-child) {
          margin-block-start: 20px;
          @media (min-width: 640px) {
            margin-block-start: 40px;
          }
        }
      }
    }

    .box__calc {
      background-color: #faf6f4;
      border-radius: 10px;
      color: var(--color-black-02);
      display: grid;
      gap: 8px 10px;
      font-size: var(--font-size-20);
      font-weight: 700;
      padding: 10px;
      @media (min-width: 640px) {
        grid-auto-flow: column;
        font-size: var(--font-size-24);
      }
      .box__calc-line {
        display: flex;
        align-items: center;
        column-gap: 4px;
        @media (max-width: 799px) {
        }
        &:last-child {
          @media (min-width: 640px) and (max-width: 799px) {
              grid-row: 2 / 3;
              grid-column: 1 / 3;
            }
        }
      }
      .box__calc-number,
      .box__calc-result {
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        padding: 10px 20px;
      }
      .box__calc-result {
        color: var(--contents-red);
      }
    }
    .step {
      color: var(--contents-red); 
      font-size: var(--font-size-20);
      font-weight: 700;
      line-height: 1.5;
      margin-inline-end: 4px;
      @media (min-width: 640px) {
        font-size: var(--font-size-28);
      }
    }
    .marker-note {
      color: var(--color-black);
      font-size: var(--font-size-14);
      @media (min-width: 640px) {
        font-size: var(--font-size-16);
      }
    }
    .list-step {
      &,
      > div {
        display: flex;
        flex-direction: column;
      }
      & {
        font-weight: 500;
        row-gap: 20px;
        @media (min-width: 640px) {
          row-gap: 40px;
        }
      }
      > div {
        row-gap: 10px;
        @media (min-width: 640px) {
          row-gap: 14px;
        }
        > dt {
          color: var(--color-black);
          font-size: var(--font-size-20);
          font-weight: 700;
          margin-inline-start: 22px;
          text-indent: -22px;
          @media (min-width: 640px) {
            font-size: var(--font-size-24);
          }
          &::before {
            content: "";
            display: inline-block;
            margin-inline-end: 10px;
            vertical-align: middle;
            width: 12px;
            height: 12px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1,1 C1,0.5 1.5,0.2 2,0.5 L9,5.5 C9.5,5.8 9.5,6.2 9,6.5 L2,11.5 C1.5,11.8 1,11.5 1,11 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
            background-color: var(--contents-red);
          }
        }
        > dd {
          &,
          .list-circle-num {
            font-size: var(--font-size-16);
            @media (min-width: 640px) {
              font-size: var(--font-size-20);
            }
          }
          > .list-circle-num {
            > li {
              > :not(ruby) {
                font-size: var(--font-size-14);
                @media (min-width: 640px) {
                  font-size: var(--font-size-16);
                }
              }
              figure {
                margin-block-start: 9px;
              }
            }
          }
        }
      }
    }
    .table-stack {
      border: 1px solid #d9d9d9;
      display: flex;
      @media (max-width: 639px) {
        flex-direction: column;
      }
      @media (min-width: 640px) {
        flex-wrap: wrap;
      }
      > div {
        @media (min-width: 640px) {
          flex-basis: 50%;
        }
        @media (min-width: 1000px) {
          flex-basis: 25%;
        }
        > dt,
        > dd {
          font-size: var(--font-size-14);
          padding: 8px;
          @media (min-width: 640px) {
            font-size: var(--font-size-16);
            padding: 16px;
          }
        }
        > dt {
          background-color: #fff3e8;
          font-weight: 700;
          @media (min-width: 640px) {
            display: flex;
            align-items: center;
            padding-block: 2px;
            min-height: 56px;
          }
          + dd {
            border-block-start: 1px solid #d9d9d9;
          }
        }
        > dd {
          font-weight: 500;
        }
        + div {
          @media (max-width: 639px) {
            border-block-start: 1px solid #d9d9d9;
          }
          @media (min-width: 640px) and (max-width: 999px) {
            &:nth-of-type(even) {
              border-inline-start: 1px solid #d9d9d9;
            }
            &:nth-of-type(n + 3) {
              border-block-start: 1px solid #d9d9d9;
            }
          }
          @media (min-width: 1000px) {
            border-inline-start: 1px solid #d9d9d9;
          }
        }
      }
      &.-div3 {
        > div {
          @media (min-width: 1000px) {
            flex-basis: 33.333333%;
            &:nth-of-type(3n + 1) {
              border-inline-start-width: 0;
            }
            &:nth-of-type(n + 4) {
              border-block-start: 1px solid #d9d9d9;
            }
          }
        }
      }
    }
    .worksheet {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      font-size: var(--font-size-14);
      margin-block-start: 20px;
      @media (min-width: 640px) {
        row-gap: 40px;
        font-size: var(--font-size-16);
        margin-block-start: 30px;
      }
      > div {
        > dt {
          display: flex;
          column-gap: 4px;
          &::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3'%3E%3Cpath d='M1.5 1.5H765.5' stroke='%23d0d0d0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='0.1 8'/%3E%3C/svg%3E");
            background-position: 0 center;
            background-repeat: repeat-x;
            background-size: 8px 3px;
            content: '';
            flex-grow: 1;
          }
          font-weight: 700;
        }
        > dd {
          display: flex;
          flex-direction: column;
          row-gap: 5px;
        }
      }
    }
    .list-circle-num {
      display: flex;
      flex-direction: column;
      row-gap: 10px;
      font-size: var(--font-size-16);
      @media (min-width: 640px) {
        row-gap: 14px;
        font-size: var(--font-size-20);
      }
      > li {
        font-weight: 500;
        margin-inline-start: 36px;
        text-indent: -36px;
        &::before {
          content: "";
          display: inline-block;
          margin-inline-end: 10px;
          vertical-align: middle;
          width: 26px;
          height: 26px;
        }
        &:nth-of-type(1)::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23137870' fill-opacity='.53' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13'/%3E%3Cpath fill='%23fff' d='M12.261 10.58c-.196.18-.42.326-.663.433-.27.111-.561.165-.854.156a1.2 1.2 0 0 1-.514-.108 1.2 1.2 0 0 1-.4-.285 1.4 1.4 0 0 1-.265-.414 1.2 1.2 0 0 1-.095-.488 1.1 1.1 0 0 1 .083-.447q.083-.19.23-.332.157-.146.345-.248l.42-.23q.435-.286.828-.625.367-.314.65-.59c.19-.183.361-.339.502-.468a1.7 1.7 0 0 1 .372-.27c.062-.035.122-.055.166-.084q.082-.028.165-.047.09-.016.183-.02h.254c.27-.013.536.055.766.196.187.125.335.3.427.505.098.222.16.458.183.699q.038.393.035.79v8.6c0 .272-.013.543-.034.8-.018.242-.08.479-.182.699-.096.2-.243.372-.427.497-.23.139-.498.205-.767.19a1.3 1.3 0 0 1-.766-.19 1.24 1.24 0 0 1-.42-.497c-.1-.221-.161-.457-.182-.699a8 8 0 0 1-.034-.8V10.57z'/%3E%3C/svg%3E");
        }
        &:nth-of-type(2)::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23137870' fill-opacity='.53' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13'/%3E%3Cpath fill='%23fff' d='M12.902 6.51a5.4 5.4 0 0 1 1.824.283c.489.166.938.432 1.318.781.35.336.62.745.795 1.198.185.49.276 1.01.269 1.535.004.347-.046.692-.148 1.023a3.7 3.7 0 0 1-.397.855q-.241.382-.56.7a6 6 0 0 1-.632.553c-.532.39-1.117.7-1.737.923q-.33.133-.639.309-.313.167-.57.414-.247.238-.403.546c-.105.22-.158.462-.154.707v.578h3.201c.256 0 .519.012.774.033.24.021.477.076.701.165.2.08.374.213.505.384.14.2.208.442.195.686.012.249-.056.494-.195.701-.13.175-.304.312-.505.397-.223.096-.46.155-.7.176a7 7 0 0 1-.775.034h-4.586a1.7 1.7 0 0 1-.761-.155 1.4 1.4 0 0 1-.478-.383A1.45 1.45 0 0 1 9 18.427a2.4 2.4 0 0 1-.067-.577V16.38a3.8 3.8 0 0 1 .895-2.465c.298-.35.642-.659 1.024-.915q.621-.417 1.316-.694.601-.225 1.156-.546.372-.21.667-.518c.14-.145.246-.32.309-.512q.072-.258.072-.525a1.5 1.5 0 0 0-.165-.754 1.1 1.1 0 0 0-.397-.412 1.4 1.4 0 0 0-.485-.165 4 4 0 0 0-.433-.034 1.7 1.7 0 0 0-.734.136 1.02 1.02 0 0 0-.6.78q-.038.232-.04.465c.006.214-.044.425-.144.614a1.4 1.4 0 0 1-.343.411 1.4 1.4 0 0 1-.45.23 1.6 1.6 0 0 1-.445.071 1.46 1.46 0 0 1-1.011-.343 1.14 1.14 0 0 1-.383-.889q.007-.31.053-.62.063-.411.209-.801.17-.451.444-.849a3 3 0 0 1 .76-.758 3.8 3.8 0 0 1 1.123-.553 5.2 5.2 0 0 1 1.583-.208z'/%3E%3C/svg%3E");
        }
        &:nth-of-type(3)::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23137870' fill-opacity='.53' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13'/%3E%3Cpath fill='%23fff' d='M13.387 9.191v-.128h-2.393c-.21 0-.424-.013-.65-.034a2 2 0 0 1-.614-.164 1.2 1.2 0 0 1-.458-.385 1.2 1.2 0 0 1-.182-.701 1.08 1.08 0 0 1 .64-1.072q.294-.132.614-.164.324-.037.65-.034h4.117c.226-.004.45.038.66.121.18.073.345.18.485.317.13.13.232.286.297.458.066.167.1.346.1.526q0 .152-.02.303a.7.7 0 0 1-.108.284l-1.662 2.762q.444.183.83.466c.28.204.523.452.722.735.223.32.393.672.505 1.046.134.45.197.918.189 1.388a5.8 5.8 0 0 1-.189 1.571 4.6 4.6 0 0 1-.505 1.193 3.3 3.3 0 0 1-.749.85 4.3 4.3 0 0 1-.907.564 4.4 4.4 0 0 1-.998.303q-.501.09-1.01.095a5.1 5.1 0 0 1-2.497-.688 3 3 0 0 1-.695-.54 2.6 2.6 0 0 1-.485-.7 2 2 0 0 1-.182-.857 1.4 1.4 0 0 1 .068-.439c.042-.134.108-.26.195-.37a.9.9 0 0 1 .337-.257c.153-.066.319-.098.485-.095.252 0 .498.072.708.21.238.165.426.39.547.654q.07.123.165.229.13.148.303.243.218.121.459.189.303.087.62.082c.303.013.605-.044.883-.165a1.5 1.5 0 0 0 .547-.444c.137-.187.234-.4.284-.627a3.2 3.2 0 0 0 .082-.708 2 2 0 0 0-.144-.763 2 2 0 0 0-.371-.607c-.151-.164-.332-.3-.533-.397a1.4 1.4 0 0 0-.614-.145 1 1 0 0 1-.722-.27.97.97 0 0 1-.276-.728q.006-.222.072-.433a2.6 2.6 0 0 1 .244-.533l1.161-2.13z'/%3E%3C/svg%3E");
        }
        &:nth-of-type(4)::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23137870' fill-opacity='.53' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13'/%3E%3Cpath fill='%23fff' d='M15.411 11.01c.242-.011.483.03.707.123.159.072.294.188.39.334.091.15.15.317.17.49q.037.295.036.592v5.429q.002.299-.037.595a1.2 1.2 0 0 1-.165.482.87.87 0 0 1-.385.326c-.221.089-.46.13-.698.119-.234.01-.468-.03-.687-.115a.94.94 0 0 1-.394-.307 1.06 1.06 0 0 1-.18-.458 4 4 0 0 1-.04-.569V16.42h-3.136a4 4 0 0 1-.935-.092 1.8 1.8 0 0 1-.582-.242.85.85 0 0 1-.303-.354 1.03 1.03 0 0 1-.064-.629q.023-.11.05-.216l1.852-6.437.18-.66q.078-.301.238-.568c.102-.167.246-.304.417-.399.224-.11.473-.163.722-.15.186-.007.372.024.546.09a.86.86 0 0 1 .523.59q.05.207.05.42 0 .223-.037.444a4.6 4.6 0 0 1-.188.761q-.05.15-.073.225l-.049.187-.144.513q-.09.316-.202.723-.11.407-.229.83-.284.99-.632 2.246l.072.072h1.924v-1.241q0-.294.037-.587a1.2 1.2 0 0 1 .165-.481.9.9 0 0 1 .385-.33c.22-.092.458-.135.696-.125'/%3E%3C/svg%3E");
        }
        &:nth-of-type(5)::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23137870' fill-opacity='.53' d='M13 26c7.18 0 13-5.82 13-13S20.18 0 13 0 0 5.82 0 13s5.82 13 13 13'/%3E%3Cpath fill='%23fff' d='M11.836 11.358q.399-.143.82-.197.395-.056.795-.06.37.004.733.072.423.08.817.252.43.19.806.473c.27.204.505.45.696.73.214.317.378.665.486 1.031.128.443.19.902.183 1.363a6 6 0 0 1-.188 1.564c-.11.418-.28.818-.506 1.187a3.4 3.4 0 0 1-.74.852 4 4 0 0 1-.909.554 4.4 4.4 0 0 1-.994.303q-.5.09-1.009.09a5 5 0 0 1-1.142-.144 4.6 4.6 0 0 1-1.14-.428 3.7 3.7 0 0 1-.944-.722 2.3 2.3 0 0 1-.555-1.031 1.8 1.8 0 0 1-.055-.44q0-.221.065-.434.061-.203.197-.366a1 1 0 0 1 .337-.263c.153-.067.319-.1.486-.096.25 0 .493.073.701.211.237.164.425.388.546.65a1.3 1.3 0 0 0 .472.468q.215.12.454.187.302.082.614.078c.301.011.6-.047.875-.17.216-.101.403-.254.546-.444a1.65 1.65 0 0 0 .28-.624q.077-.349.077-.706a1.8 1.8 0 0 0-.156-.775 1.6 1.6 0 0 0-.417-.54 1.8 1.8 0 0 0-.59-.32 2.2 2.2 0 0 0-1.252-.027q-.288.078-.578.17a13 13 0 0 1-.582.17 2.4 2.4 0 0 1-.605.078q-.213 0-.421-.043a.947.947 0 0 1-.65-.498 1.1 1.1 0 0 1-.106-.523l.536-5.046q.021-.216.078-.426.058-.223.183-.417a1 1 0 0 1 .33-.316c.161-.089.344-.132.527-.124h3.668q.346 0 .692.037c.218.02.432.076.632.165.184.084.343.215.459.38.13.204.192.443.18.684a1.2 1.2 0 0 1-.18.697c-.115.168-.274.3-.459.385-.2.09-.414.145-.632.165q-.345.037-.692.037h-2.2q-.073 0-.145.005a.22.22 0 0 0-.12.04.26.26 0 0 0-.082.115.7.7 0 0 0-.04.225z'/%3E%3C/svg%3E");
        }
        > :not(ruby) {
          font-size: var(--font-size-14);
          font-weight: 400;
          text-indent: 0;
          @media (min-width: 640px) {
            font-size: var(--font-size-16);
          }
        }
        > .marker-note {
          text-indent: -1em;
        }
      }
    }
    .box__section {
      .heading-4 {
        font-size: var(--font-size-16);
        @media (min-width: 640px) {
          font-size: var(--font-size-20);
        }
      }
      .list-definition {
        row-gap: 8px;
        @media (min-width: 640px) {
          row-gap: 10px;
        }
      }
      &.-explanation {
        background-color: #f4f7fa;
        .heading-2.-pill {
          background-color: #5478c7;
        }
      }
    }
    .box__example {
      background-color: #faf7e6;
      border-radius: var(--border-radius-10);
      display: flex;
      column-gap: 8px;
      margin-block: 16px;
      padding: 20px;
      @media (min-width: 640px) {
        font-size: var(--font-size-18);
      }
      dt,
      dd {
        font-size: var(--font-size-16);
        font-weight: 700;
      }
      ul {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
      }
    }
    .link-table-of-contents-wrapper {
      margin-block: 30px 20px;
    }
    strong {
      color: var(--contents-red);
    }
  }
}
}