@charset "UTF-8";
/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/

#block-classroom>.bg:before {
  top: 0;
  background: url(/mathematics/classroom/assets/img/bg_before.png) -10% 0% repeat-y;
  background-size: 160px auto;
}

#block-classroom>.bg:after {
  top: 0;
  background: url(/mathematics/classroom/assets/img/bg_after.png) 110% 0% repeat-y;
  background-size: 160px auto;
}


/*マーカー*/
span.marker {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
  /***************************
      container
  ***************************/
}

/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  #block-classroom>.bg:before {
    background-size: 320px auto;
  }

  #block-classroom>.bg:after {
    background-size: 320px auto;
  }
}

/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {
  #block-classroom>.bg:before {
    background-size: 420px auto;
    background-position: -2% 0%;
  }

  #block-classroom>.bg:after {
    background-size: 420px auto;
    background-position: 102% 0%;
  }

  /***************************
      container
  ***************************/

}


/*20240409*/
#block-classroom>.inner {
  max-width: 1110px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  box-sizing: border-box;
}

@media screen and (max-width: 1279px) {
  #block-classroom>.inner {
    padding: 0 0 80px;
  }
}

#block-recommend>.inner {
  max-width: 1110px;
  margin: 0 auto;
  padding: 40px 40px 0px;
  box-sizing: border-box;
}

@media screen and (max-width: 1279px) {
  #block-recommend>.inner {
    padding: 0 0 80px;
  }
}

#block-recommend>.bg:before {
  top: 0;
  background: url(/mathematics/classroom/assets/img/bg_before.png) -10% 0% repeat-y;
  background-size: 200px auto;
}

#block-recommend>.bg:after {
  top: 0;
  background: url(/mathematics/classroom/assets/img/bg_after.png) 110% 0% repeat-y;
  background-size: 200px auto;
}

@media screen and (min-width: 600px) {
  #block-recommend>.bg:before {
    background-size: 260px auto;
  }

  #block-recommend.bg:after {
    background-size: 260px auto;
  }
}

@media screen and (min-width: 960px) {
  #block-recommend>.bg:before {
    background-size: 280px auto;
    background-position: -2% 0%;
  }

  #block-recommend>.bg:after {
    background-size: 280px auto;
    background-position: 102% 0%;
  }
}

#block-recommend .recommend-wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
  background: #B73F91;
  color: #fff;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  #block-recommend .recommend-wrapper {
    flex-direction: column-reverse;
  }
}

#block-recommend .recommend-ttl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

#block-recommend .recommend-txt:nth-of-type(1) {
  margin-bottom: 30px;
}

#block-recommend .recommend-img {
  display: block;
  width: 40%;
}
@media screen and (max-width: 768px) {
  #block-recommend .recommend-img {
    margin-bottom: 5%;
  }
}
@media screen and (max-width: 425px) {
  #block-recommend .recommend-img {
    width: 50%;
  }
}





/* .close-mathematics-title {
    color: #fff;
    font-size: clamp(18px,4vw,25px);
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    padding: 0.5em 2.5em;
    margin-top: 10%
}
.close-mathematics-content {
  padding: 10px 20px;
  text-align: justify;
}

.close-mathematics-content p {
  padding: 1%;
}

.caution-info-item .close-mathematics-title {
  background-color: #1BAD55;
}

.caution-info-item .close-mathematics-content {
  border-bottom: 2px solid #1BAD55;
  border-left: 2px solid #1BAD55;
  border-right: 2px solid #1BAD55;
}

.close-mathematics-title {
  position: relative;
}
.caution-info-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
} */



.inner h1 {
  line-height: 52px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  /* background-color: #B73F91; */
  color: #B73F91;
  padding: 3% 0;
}

.recommend-txt {
  font-size: clamp(15px,4vw,20px);
}

.recommend-txt p{
  padding: 1%;
}

#block-recommend .recommend-wrapper {
  display: flex;
  margin: 2% 20%;
  align-items: center;
  background: #B73F91;
  color: #fff;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  #block-recommend .recommend-wrapper {
    flex-direction: column-reverse;
  }
}

section .block h2 {
  font-weight: bold;
}