@charset "UTF-8";

/*-------------通塾時間の一例-------------*/
a[id^=course_exp] + .composite_box01 .inner_item {
  position: relative;
}
a[id^=course_exp] + .composite_box01 .inner_item::before {
  content: "";
  width: 8%;
  aspect-ratio: 1/1;
  background-image: url(/common/upload_data/school-kgcom/image/20241029101408.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: -5.5%;
  transform: translate(-50%, -50%);
}

#course_exp01 + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3)::before {
  display: none;
}
#course_exp01 + .composite_box01 .heading.block_header_1.align-center .h {
  font-weight: bold;
  font-size: 2rem;
}

#course_exp02 + .composite_box01 .wrapper_item {
  overflow: visible;
}
#course_exp02 + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3)::before {
  left: -3.5%;
}

@media screen and (max-width: 900px) {
  a[id^=course_exp] + .composite_box01 .inner_item {
    margin-top: 60px !important;
    margin-left: 0 !important;
  }
  a[id^=course_exp] + .composite_box01 .inner_item::before {
    width: 40px;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  a[id^=course_exp] + .composite_box01 .inner_item:nth-of-type(2n) {
    margin-left: 0 !important;
  }
  #course_exp01 + .composite_box01 {
    padding-bottom: 0 !important;
  }
  #course_exp01 + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3) {
    margin-top: 0 !important;
  }
  #course_exp02 + .composite_box01 {
    overflow: visible;
  }
  #course_exp02 + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3)::before {
    left: 50%;
  }
}
@media screen and (max-width: 700px) {
  a[id^=course_exp] + .composite_box01 .inner_item {
    margin-top: 30px !important;
  }
  a[id^=course_exp] + .composite_box01 .inner_item:nth-of-type(2n) {
    margin-left: 0 !important;
  }
  #course_exp02 + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3) {
    margin-top: 60px !important;
  }
}


/*-------------月々の費用-------------*/
a[id^=course_cost] + .widget_menu01 .items {
  display: flex;
  gap: 2%;
}
a[id^=course_cost] + .widget_menu01 .items::after {
  display: none;
}
a[id^=course_cost] + .widget_menu01 .inner_item {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 10px 10px 20px var(--i_shadow_color);
  padding: 2.5em;
}
a[id^=course_cost] + .widget_menu01 .inner_item .heading.block_header_2 {
  margin-bottom: 1em;
}
a[id^=course_cost] + .widget_menu01 .inner_item .heading.block_header_2 .h {
  display: none;
}
a[id^=course_cost] + .widget_menu01 .inner_item .heading.block_header_2 p {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
}
a[id^=course_cost] + .widget_menu01 .content_wrapper .inner_item:last-child {
  padding-bottom: 2.5em;
}

@media screen and (max-width: 900px) {
  a[id^=course_cost] + .widget_menu01 .items {
    flex-direction: column;
    gap: 2em;
  }
  a[id^=course_cost] + .widget_menu01 .inner_item {
    padding: 1.5em 1.5em 2em;
  }
  a[id^=course_cost] + .widget_menu01 .inner_item .heading.block_header_2 {
    margin-bottom: 0.75em;
  }
  a[id^=course_cost] + .widget_menu01 .content_wrapper .inner_item:last-child {
    padding-bottom: 2em;
  }
}


/*-------------月々の費用(高校生)-------------*/
.price_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  text-align: left;
}

.price_amount {
  border-top: 3px solid var(--i_sub3_color);
  padding-top: 0.5em;
  margin-top: 0.5em;
}

#course_highschool01 + .composite_box01 .wrapper_item {
  gap: 2%;
  overflow: visible;
}
#course_highschool01 + .composite_box01 .inner_item {
  flex: 1;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 10px 10px 20px var(--i_shadow_color);
  padding: 40px;
}

@media screen and (max-width: 1000px) {
  #course_highschool01 + .composite_box01 .inner_item {
    padding: 5vw;
  }
}
@media screen and (max-width: 900px) {
  #course_highschool01 + .composite_box01 .wrapper_item {
    gap: 2em;
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  #course_highschool01 + .composite_box01 .inner_item {
    padding: 4vw;
  }
}
@media screen and (max-width: 359px) {
  .price_flex {
    flex-direction: column;
  }
  .price_flex span {
    width: 100%;
  }
  .price_flex span:nth-of-type(2) {
    text-align: right;
  }
}