/* Fonts */
/* Regular */
/* Regular */
@font-face {
  font-family: "Meiryo";
  src: url("../../font/meiryo.woff") format("woff"), url("../../font/meiryo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Font Family */
/* Font Weights */
/* Breakpoints */
/* Percentages Default Value */
/* Tablet VW Default Value */
/* Fonts */
/* Regular */
/* Regular */
@font-face {
  font-family: "Meiryo";
  src: url("../../font/meiryo.woff") format("woff"), url("../../font/meiryo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Font Family */
/* Font Weights */
/* Breakpoints */
/* Percentages Default Value */
/* Tablet VW Default Value */
/* Media Queries */
.artstudio_lesson .sec_lesson {
  padding: 175px 0;
}
.artstudio_lesson .sec_lesson .lesson_mod {
  padding: 0 135px;
  margin-bottom: 200px;
  position: relative;
  z-index: 1;
}
.artstudio_lesson .sec_lesson .lesson_mod::after {
  position: absolute;
  content: "";
  z-index: -1;
  right: 0;
}
.artstudio_lesson .sec_lesson .lesson_mod .txt_lg_mod {
  font-size: 50px;
  line-height: 1.5;
  color: #267F8A;
  margin-bottom: 30px;
}
.artstudio_lesson .sec_lesson .lesson_mod .txt_intro {
  font-family: "yu-mincho-pr6n", sans-serif;
}
.artstudio_lesson .sec_lesson .lesson01::after {
  background: url(/sp/irojiten/assets/images/water_color/artstudio/lesson01/img_flower.png) no-repeat center;
  background-size: 100% auto;
  width: 800px;
  height: 587px;
  top: -115px;
}
.artstudio_lesson .sec_lesson .lesson02::after {
  background: url(/sp/irojiten/assets/images/water_color/artstudio/lesson02/img_door_paint.png) no-repeat center;
  background-size: 100% auto;
  width: 800px;
  height: 667px;
  top: -150px;
}
.artstudio_lesson .sec_lesson .lesson03::after {
  background: url(/sp/irojiten/assets/images/water_color/artstudio/lesson03/img_deer_paint.png) no-repeat center;
  background-size: 100% auto;
  width: 1000px;
  height: 563px;
  top: -180px;
}
.artstudio_lesson .sec_lesson .lesson_video {
  max-width: 1417px;
  width: 73.8020833333%;
  margin: 0 auto 195px;
  position: relative;
  z-index: 1;
}
.artstudio_lesson .sec_lesson .lesson_video .video_box {
  width: 100%;
}
.artstudio_lesson .sec_lesson .lesson_video .video_box iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.artstudio_lesson .sec_lesson .pickup_colors {
  max-width: 82.8645833333%;
  width: 100%;
  margin: 0 auto;
  border: 4px solid #21826E;
  padding: 60px 70px 45px;
  border-radius: 20px;
  position: relative;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_title {
  position: absolute;
  background-color: #fff;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 54px;
  line-height: 1.2;
  color: #21826E;
  padding: 0 55px;
}
.artstudio_lesson .sec_lesson .pickup_colors .sub_ttl_mod {
  text-align: center;
  font-size: 27px;
  color: #267F8A;
  line-height: 1.5;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_box {
  max-width: 72.5958516656%;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_box .col {
  width: 33.3333333333%;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_box .col p {
  text-align: left;
  padding-right: 95px;
  font-family: "Meiryo", sans-serif;
  font-size: 22px;
  color: #4A605E;
  line-height: 1.5;
  margin-bottom: 20px;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_box .col p.txt_mod {
  color: #267F8A;
  font-size: 18px;
}
.artstudio_lesson .sec_lesson .pickup_colors .color_box .col img {
  width: 378px;
  height: 345px;
}
.artstudio_lesson .sec_lesson .pickup_colors .txt_mod {
  color: #4A605E;
}
.artstudio_lesson .sec_mod .mod_color_list {
  margin-bottom: 175px;
  border: 4px solid #688ECB;
  padding: 80px 50px 30px 130px;
  border-radius: 20px;
  position: relative;
}
.artstudio_lesson .sec_mod .mod_color_list .ttl_sub_color {
  width: 420px;
  font-weight: 700;
  font-family: "Zen Old Mincho", serif;
  position: absolute;
  background-color: #fff;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 38px;
  line-height: 1.2;
  color: #688ECB;
  padding: 0 55px;
  text-align: center;
}
.artstudio_lesson .sec_mod .mod_color_list .txt_mod_color {
  font-family: "Meiryo", sans-serif;
  font-size: 22px;
  color: #688ECB;
  line-height: 1.5;
  margin-bottom: 40px;
}
.artstudio_lesson .sec_mod .mod_color_list .txt_color {
  font-family: "Meiryo", sans-serif;
  font-size: 22px;
  color: #688ECB;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 20px;
}
.artstudio_lesson .sec_mod .mod_color_list .color_list {
  margin-bottom: 40px;
  gap: 150px;
  padding-left: 20px;
}
.artstudio_lesson .sec_mod .mod_color_list .color_list .flex {
  gap: 150px;
}
.artstudio_lesson .sec_mod .mod_color_list .color_list li {
  margin-bottom: 5px;
  list-style: disc;
}
.artstudio_lesson .sec_mod .mod_color_list .color_list li span {
  font-family: "Meiryo", sans-serif;
  font-size: 22px;
  color: #4A605E;
  line-height: 1.5;
  display: inline-block;
  margin-right: 20px;
}
.artstudio_lesson .sec_mod .mod_color_list .color_list li span:nth-child(2), .artstudio_lesson .sec_mod .mod_color_list .color_list li span:nth-child(3) {
  margin-right: 0;
}
.artstudio_lesson .sec_mod .mod_color_list.gp1::before {
  content: "";
  width: 400px;
  height: 360px;
  position: absolute;
  background: url(../../images/water_color/artstudio/lesson01/pencil_gp1.png) no-repeat center;
  background-size: cover;
  right: 0;
  bottom: 0;
}
.artstudio_lesson .sec_mod .mod_color_list.gp2::before {
  content: "";
  width: 458px;
  height: 368px;
  position: absolute;
  background: url(../../images/water_color/artstudio/lesson02/pencil_gp2.png) no-repeat center;
  background-size: cover;
  right: 45px;
  bottom: 45px;
}
.artstudio_lesson .sec_mod .mod_color_list.gp3::before {
  content: "";
  width: 535px;
  height: 409px;
  position: absolute;
  background: url(../../images/water_color/artstudio/lesson03/pencil_gp3.png) no-repeat center;
  background-size: cover;
  right: 45px;
  bottom: 45px;
}
.artstudio_lesson .sec_mod .color_list_grid li {
  margin-bottom: 100px;
}
.artstudio_lesson .sec_mod .color_list_grid li:last-child {
  margin-bottom: 0;
}
.artstudio_lesson .sec_mod .color_list_grid li.double_mb {
  margin-bottom: 200px;
}
.artstudio_lesson .sec_mod .color_list_grid li .cover_img {
  width: 725px;
  height: 408px;
  margin-right: 30px;
}
.artstudio_lesson .sec_mod .color_list_grid li .cover_img.special_div {
  width: 1100px;
}
.artstudio_lesson .sec_mod .color_list_grid li .color_detail .txt_mod {
  margin-bottom: 30px;
}
.artstudio_lesson .sec_mod .color_list_grid li .ttl_h3_vline {
  font-size: 48px;
  line-height: 1.2;
  position: relative;
  color: #1D4D53;
}
.artstudio_lesson .sec_mod .color_list_grid li .color_detail {
  width: 880px;
}
.artstudio_lesson .sec_mod .color_list_grid li .color_detail .ttl_h4_vline {
  font-size: 24px;
  color: #125F69;
  margin-bottom: 30px;
  font-family: "Meiryo", sans-serif;
}
.artstudio_lesson .sec_fav {
  max-width: 68.0729166667%;
  width: 100%;
  margin: 0 auto 175px;
}
.artstudio_lesson .sec_fav .txt_fav {
  font-size: 34px;
  line-height: 1.5;
  color: #1D4D53;
  text-align: center;
  margin-bottom: 110px;
}
.artstudio_lesson .sec_fav .img_fav {
  width: 100%;
  height: 100%;
}
.artstudio_lesson .sec_fav .img_fav img {
  width: 100%;
  height: 100%;
}

/* For Tablet */
@media (min-width: 768px) and (max-width: 1700px) {
  .artstudio_lesson .sec_lesson {
    padding: 9.1145833333vw 0;
  }
  .artstudio_lesson .sec_lesson .lesson_mod {
    padding: 0 7.03125vw;
    margin-bottom: 10.4166666667vw;
  }
  .artstudio_lesson .sec_lesson .lesson_mod .txt_lg_mod {
    font-size: 2.6041666667vw;
    margin-bottom: 1.5625vw;
  }
  .artstudio_lesson .sec_lesson .lesson01::after {
    width: 39.0625vw;
    height: 30.5729166667vw;
    top: -5.7291666667vw;
  }
  .artstudio_lesson .sec_lesson .lesson02::after {
    width: 41.6666666667vw;
    height: 34.7395833333vw;
    top: -7.8125vw;
  }
  .artstudio_lesson .sec_lesson .lesson03::after {
    width: 52.0833333333vw;
    height: 29.3229166667vw;
    top: -9.375vw;
  }
  .artstudio_lesson .sec_lesson .lesson_video {
    margin: 0 auto 10.15625vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors {
    max-width: 82.8645833333%;
    border: 0.2083333333vw solid #21826E;
    padding: 3.125vw 3.6458333333vw 2.34375vw;
    border-radius: 1.0416666667vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_title {
    top: -1.6666666667vw;
    font-size: 2.8125vw;
    padding: 0 2.8645833333vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .sub_ttl_mod {
    font-size: 1.40625vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box {
    max-width: 72.5958516656%;
    margin: 0 auto 2.8645833333vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col {
    width: 33.3333333333%;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col p {
    padding-right: 4.9479166667vw;
    font-size: 1.1458333333vw;
    margin-bottom: 1.0416666667vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col p.txt_mod {
    font-size: 0.9375vw;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col img {
    width: 19.6875vw;
    height: 17.96875vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list {
    margin-bottom: 9.1145833333vw;
    padding: 4.1666666667vw 2.6041666667vw 1.5625vw 6.7708333333vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .ttl_sub_color {
    width: 21.875vw;
    top: -1.1979166667vw;
    font-size: 1.9791666667vw;
    margin-bottom: 0.5208333333vw;
    padding: 0vw 2.8645833333vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .txt_mod_color {
    font-size: 1.1458333333vw;
    margin-bottom: 2.0833333333vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .txt_color {
    font-size: 1.1458333333vw;
    margin-bottom: 1.0416666667vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list {
    margin-bottom: 2.0833333333vw;
    gap: 7.8125vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list .flex {
    gap: 7.8125vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list li {
    margin-bottom: 0.2604166667vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list li span {
    font-size: 0.9375vw;
    margin-right: 1.0416666667vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp1::before {
    content: "";
    width: 20.8333333333vw;
    height: 18.75vw;
    right: 0;
    bottom: 0;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp2::before {
    content: "";
    width: 23.8541666667vw;
    height: 19.1666666667vw;
    right: 2.34375vw;
    bottom: 2.34375vw;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp3::before {
    content: "";
    width: 27.8645833333vw;
    height: 21.3020833333vw;
    right: 2.34375vw;
    bottom: 2.34375vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li {
    margin-bottom: 5.2083333333vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li:last-child {
    margin-bottom: 0;
  }
  .artstudio_lesson .sec_mod .color_list_grid li.double_mb {
    margin-bottom: 10.4166666667vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .cover_img {
    width: 37.7604166667vw;
    height: 21.25vw;
    margin-right: 1.5625vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .cover_img.special_div {
    width: 57.2916666667vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .ttl_h3_vline {
    font-size: 2.5vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .color_detail {
    width: 45.8333333333vw;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .color_detail .ttl_h4_vline {
    color: #125F69;
    font-size: 1.25vw;
    margin-bottom: 1.5625vw;
  }
  .artstudio_lesson .sec_fav {
    max-width: 68.0729166667%;
    margin: 0 auto 9.1145833333vw;
  }
  .artstudio_lesson .sec_fav .txt_fav {
    font-size: 1.7708333333vw;
    margin-bottom: 5.7291666667vw;
  }
}
@media (max-width: 767px) {
  .artstudio_lesson .sec_lesson {
    padding: 1rem 0;
  }
  .artstudio_lesson .sec_lesson .lesson_mod {
    padding: 0 0.5rem;
    margin-bottom: 6.6rem;
  }
  .artstudio_lesson .sec_lesson .lesson_mod::after {
    left: 0%;
  }
  .artstudio_lesson .sec_lesson .lesson_mod .txt_lg_mod {
    font-size: 0.5rem;
    margin-bottom: 0.3rem;
  }
  .artstudio_lesson .sec_lesson .lesson01::after {
    width: 90%;
    height: 5.44rem;
    top: 4.76rem;
    left: 4%;
  }
  .artstudio_lesson .sec_lesson .lesson02 {
    margin-bottom: 8.6rem;
  }
  .artstudio_lesson .sec_lesson .lesson02::after {
    background: url(/sp/irojiten/assets/images/water_color/artstudio/lesson02/img_door_paint_sp.png) no-repeat center;
    background-size: 100% auto;
    width: 8rem;
    height: 12rem;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .artstudio_lesson .sec_lesson .lesson03 {
    margin-bottom: 9.6rem;
  }
  .artstudio_lesson .sec_lesson .lesson03::after {
    background: url(/sp/irojiten/assets/images/water_color/artstudio/lesson03/img_deer_paint_sp.png) no-repeat center;
    background-size: 100% auto;
    width: 8rem;
    height: 7.4rem;
    top: 5.8rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .artstudio_lesson .sec_lesson .lesson_video {
    width: 92.1875%;
    max-width: 7.08rem;
    margin: 0 auto 1.95rem;
  }
  .artstudio_lesson .sec_lesson .pickup_colors {
    max-width: 92.1875%;
    border: 0.04rem solid #21826E;
    padding: 0.6rem 0.3rem 0.35rem;
    border-radius: 0.2rem;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_title {
    top: -0.32rem;
    font-size: 0.54rem;
    padding: 0 0.55rem;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .sub_ttl_mod {
    font-size: 0.27rem;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 0.55rem;
    justify-content: space-between;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col img {
    width: 60%;
    height: auto;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col .color_name {
    width: 40%;
    top: 0.5rem;
    position: relative;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col p {
    position: relative;
    padding-right: 0rem;
    font-size: 0.28rem;
    margin-bottom: 0.2rem;
  }
  .artstudio_lesson .sec_lesson .pickup_colors .color_box .col p.txt_mod {
    font-size: 0.28rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list {
    margin-bottom: 1.75rem;
    padding: 0.5rem 0.3rem 0.45rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list .ttl_sub_color {
    top: -0.23rem;
    width: 4.2rem;
    font-size: 0.38rem;
    margin-bottom: 0.2rem;
    padding: 0;
  }
  .artstudio_lesson .sec_mod .mod_color_list .txt_mod_color {
    font-size: 0.28rem;
    margin-bottom: 0.4rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list .txt_color {
    font-size: 0.28rem;
    margin-bottom: 0.2rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list {
    margin-bottom: 0.3rem;
    gap: 0;
    position: relative;
    z-index: 5;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list .flex {
    gap: 0;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list .col {
    margin-bottom: 0.3rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list .col_sp {
    width: 100%;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list .col_sp:first-child {
    width: 100%;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list li {
    margin-bottom: 0.2rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list .color_list li span {
    font-size: 0.28rem;
    margin-right: 0.25rem;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp1::before {
    display: none;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp2::before {
    display: none;
  }
  .artstudio_lesson .sec_mod .mod_color_list.gp3::before {
    display: none;
  }
  .artstudio_lesson .sec_mod .color_list_grid li {
    margin-bottom: 1rem;
  }
  .artstudio_lesson .sec_mod .color_list_grid li:last-child {
    margin-bottom: 0;
  }
  .artstudio_lesson .sec_mod .color_list_grid li.double_mb {
    margin-bottom: 2rem;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .special_div.cover_img {
    width: 100%;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .special_div.cover_img img {
    object-fit: contain;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .cover_img {
    width: 6.85rem;
    height: 3.85rem;
    margin-right: 0.3rem;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .ttl_h3_vline {
    font-size: 0.48rem;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .color_detail {
    width: 100%;
  }
  .artstudio_lesson .sec_mod .color_list_grid li .color_detail .ttl_h4_vline {
    font-size: 0.32rem;
    margin-bottom: 0.3rem;
  }
  .artstudio_lesson .sec_fav {
    max-width: 89.0625%;
    margin: 0 auto 1.75rem;
  }
  .artstudio_lesson .sec_fav .txt_fav {
    font-size: 0.34rem;
    margin-bottom: 1.1rem;
  }
  .artstudio_lesson .inner {
    max-width: 92.1875%;
  }
  #waterColorArtstudioLesson2.artstudio_lesson .sec_mod .color_list .col_sp {
    width: 100%;
  }
  #waterColorArtstudioLesson2.artstudio_lesson .sec_mod .color_list .col_sp:first-child {
    width: 100%;
  }
  #waterColorArtstudioLesson3.artstudio_lesson .sec_mod .color_list .col {
    width: 100%;
  }
  #waterColorArtstudioLesson3.artstudio_lesson .sec_mod .color_list .col:first-child {
    width: 100%;
  }
}

/*# sourceMappingURL=lesson.css.map */