/*--------------------------------------------------------------
# ページビジュアル
--------------------------------------------------------------*/
.page_visual {
  background: url(/assets/img/lesson/page_visual.jpg) no-repeat center / cover;
}
/*--------------------------------------------------------------
# サイド
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .page_lesson .page_content_wrap {
    background-image: url(/assets/img/common/side_flower_left.png),url(/assets/img/common/side_flower_right.png);
    background-position: top left, top right;
    background-repeat: repeat-Y;
    background-size: 6%, 7%;
  }
}
/*--------------------------------------------------------------
# イントロ
--------------------------------------------------------------*/
#lesson_intro .inner {
  background-position: right 95% top 5%, right 84% top 10%, left 88% top 93%, left 97% top 97%;
  @media (min-width:768px) {
    background-position: right 95% top 10%, right 91% top 23%, left 93% top 72%, left 97% top 82%;
  }
}
#lesson_intro .block_title {
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  margin-bottom: 1em;
}
#lesson_intro .text {
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 70rem;
  margin: 0 auto;
}
/*--------------------------------------------------------------
# 4つの課外教室
--------------------------------------------------------------*/
#lesson_content {
  padding-bottom: 13rem;
  @media (min-width:768px) {
    padding-bottom: 18.4rem;
  }
}
#lesson_content .content_block {
  @media (min-width:768px) {
    flex-wrap: wrap;
  }
  + .content_block {
    margin-top: 4rem;
  
    &::before {
      display: block;
      content: "";
      width: 100%;
      height: 0.2rem;
      margin-bottom: 4rem;
      background-image: linear-gradient(to right, #D9D9D9, #D9D9D9 0.8rem, transparent 0.8rem,transparent 1.6rem);
      background-size: 1.6rem 100%;
      background-position: left top;
      background-repeat: repeat-x;
    }
  }
}
#lesson_content .block_title {
  color: #FFF;
  font-size: clamp( 1.6rem, calc( 0.9142857142857142rem + 1.9047619047619049vw ), 3.2rem );
  line-height: 1.5;
  width: fit-content;
  margin-bottom: 1.6rem;
  padding: 0 0.5em;
  border-radius: 0.4rem;
}
#lesson_content .note {
  color: var(--key-color);
  margin-bottom: 1em;
  &::before {
    content: "☆";
  }
  /*
  &.r7 {
    color: var(--accent-blue);
  }
  &.r8 {
    color: var(--accent-green);
  }
    */
}
#lesson_content .img_wrap img {
  width: 100%;
}
#lesson_content .point_wrap {
  display: flex;
  margin: 1.6rem 0 2.4rem;
  gap: 1em;

  .point_title {
    font-size: var(--fs-block-title);
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 0.5em 0;
    border-radius: 999rem;
    border: 1px solid currentColor;
  }
  .point_list {
    align-self: center;

    & li {
      font-size: clamp( 1.4rem, calc( 1.1428571428571429rem + 0.7142857142857143vw ), 2rem );
      font-weight: 700;
      line-height: 1.3;
      width: fit-content;
      background-image: linear-gradient(transparent 70%, #FFF155 70%);

      + li {
        margin-top: 1em;
      }
    }
  }
}
#lesson_content .lesson_outline {
  padding-bottom: 0;
  gap: 4em;
  border-bottom: 0.2rem solid #D9D9D9;
}
#lesson_content .english {
  .block_title {
    background: #F49A00;
  }
  .point_title {
    color: #F49A00;
  }
}
#lesson_content .abacus {
  .block_title {
    background: #EE8485;
  }
  .point_title {
    color: #EE8485;
  }
}
#lesson_content .music {
  .block_title {
    background: #CF4B1D;
  }
  .point_title {
    color: #CF4B1D;
  }
}
#lesson_content .athletic {
  .block_title {
    background: #AD93E5;
  }
  .point_title {
    color: #AD93E5;
  }
}
#lesson_content .ballet {
  .block_title {
    background: #4E9D9B;
  }
  .point_title {
    color: #4E9D9B;
  }
}
#lesson_content .rhythmic {
  .block_title {
    background: #1369B1;
  }
  .point_title {
    color: #1369B1;
  }
}
#lesson_content .calligraphy {
  .block_title {
    background: #BBAC1D;
  }
  .point_title {
    color: #BBAC1D;
  }
}
#lesson_content .gakken {
  .block_title {
    background: #94C428;
  }
  .point_title {
    color: #94C428;
  }
}
#lesson_content .soccer {
  .block_title {
    background: #98485A;
  }
  .point_title {
    color: #98485A;
  }
}
#lesson_content .pool {
  .block_title {
    background: #44BFDE;
  }
  .point_title {
    color: #44BFDE;
  }
}
#lesson_content .programming {
  .block_title {
    background: #F49A00;
  }
  .point_title {
    color: #F49A00;
  }
}