@charset "UTF-8";
.index-fixed_info {
  position: fixed;
  right: 28px;
  bottom: 149px;
  z-index: 1;
  width: fit-content;
  border: 2px solid var(--logo, #00528B);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
@media (max-width: 450px) {
  .index-fixed_info {
    right: 0;
    bottom: 85px;
    width: 263px;
    border-radius: 8px 0 0 8px;
  }
}
.index-fixed_info.js-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0);
  pointer-events: none;
}
.index-fixed_info--close_btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #333;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.index-fixed_info--close_btn::before, .index-fixed_info--close_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 9999px;
  background: #fff;
}
.index-fixed_info--close_btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.index-fixed_info--close_btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 450px) {
  .index-fixed_info--close_btn {
    right: 25px;
  }
}
.index-fixed_info--head {
  background: var(--logo, #00528B);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  padding: 8px 16px 7px;
}
.index-fixed_info--body {
  padding: 11px 22px 12px;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
@media (max-width: 450px) {
  .index-fixed_info--body {
    padding: 11px 24px 12px;
  }
}
.index-fixed_info--link {
  --cource_color: var(--logo, #00528B);
  color: var(--cource_color);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  width: fit-content;
  padding-right: 18px;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .index-fixed_info--link:hover {
    opacity: 0.8;
  }
}
.index-fixed_info--link.tekishoku {
  --cource_color: var(--tekishoku);
}
.index-fixed_info--link.skillup {
  --cource_color: var(--skillup);
}
.index-fixed_info--link.oneday {
  --cource_color: var(--oneday);
}
.index-fixed_info--link {
  /* 白丸 */
}
.index-fixed_info--link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cource_color);
  transform: translateY(-50%);
}
.index-fixed_info--link {
  /* 再生三角 */
}
.index-fixed_info--link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-5px + 16px / 2 - 4px * 0.75);
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #fff;
}

.visual {
  background-color: #d5f4fe;
  padding-top: 78px;
  padding-bottom: 70px;
  position: relative;
}
@media (max-width: 450px) {
  .visual {
    overflow: hidden;
    padding: 40px 25px 234px;
  }
}
.visual--layout {
  max-width: 1000px;
  margin: 0 auto;
}
.visual--content {
  width: fit-content;
  margin-left: auto;
}
@media (max-width: 450px) {
  .visual--ttl_img {
    display: block;
    width: min(325px, 100%);
    margin: 0 auto;
  }
}
.visual--lead {
  color: var(--logo-sub, #2C9DD7);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.7;
  margin-top: 30px;
}
@media (max-width: 450px) {
  .visual--lead {
    font-size: 20px;
    width: fit-content;
    margin: 0 auto;
    margin-top: 24px;
  }
}
.visual--bill_img {
  position: absolute;
  bottom: 0;
  left: calc(50% - 890px);
}
@media (max-width: 450px) {
  .visual--bill_img {
    max-width: initial;
    width: 667px;
    left: calc(50% - 333.5px);
  }
}
.visual--human_img {
  position: absolute;
  bottom: -4px;
  left: calc(50% - 866px - 4px);
}
@media (max-width: 450px) {
  .visual--human_img {
    max-width: initial;
    width: 556px;
    left: -206px;
    bottom: 0;
  }
}

.schedule {
  background: var(--sky-blue, #A4D9F4);
  padding-top: 32px;
  padding-bottom: 32px;
}
@media (max-width: 450px) {
  .schedule {
    padding-bottom: 40px;
    padding-left: 25px;
    padding-right: 25px;
  }
}
.schedule--layout {
  max-width: 1000px;
  margin: 0 auto;
}
.schedule--head {
  display: flex;
  align-items: center;
  column-gap: 24px;
}
@media (max-width: 450px) {
  .schedule--head {
    column-gap: 8px;
    justify-content: space-between;
  }
}
.schedule--head_ttl {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.28;
}
@media (max-width: 450px) {
  .schedule--head_ttl {
    font-size: 24px;
  }
}
.schedule--head_link {
  border-radius: 8px;
  background: var(--white, #FFF);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding-left: 16px;
  padding-top: 2px;
  padding-right: 16px;
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
.schedule--head_link:after {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_70_312%29%22%3E%3Cpath%20d%3D%22M0%208C0%2012.416%203.584%2016%208%2016C12.416%2016%2016%2012.416%2016%208C16%203.584%2012.416%200%208%200C3.584%200%200%203.584%200%208ZM10.4%208L7.2%2011.2V4.8L10.4%208Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_70_312%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
}
@media (max-width: 450px) {
  .schedule--head_link {
    font-size: 14px;
    padding: 4px 12px;
    column-gap: 6px;
  }
}

.schedule_nav {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
}
@media (max-width: 450px) {
  .schedule_nav {
    grid-template-columns: 1fr;
    row-gap: 8px;
    width: calc(100% - 12px);
  }
}
.schedule_nav--link {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.schedule_nav--link.tekishoku {
  --cource_color: var(--tekishoku);
}
.schedule_nav--link.skillup {
  --cource_color: var(--skillup);
}
.schedule_nav--link.oneday {
  --cource_color: var(--oneday);
}
.schedule_nav--link.tekishoku:hover {
  --cource_color: var(--tekishoku_light);
}
.schedule_nav--link.skillup:hover {
  --cource_color: var(--skillup_light);
}
.schedule_nav--link.oneday:hover {
  --cource_color: var(--oneday_light);
}
.schedule_nav--lead {
  background-color: var(--cource_color);
  color: #fff;
  border-radius: 8px 8px 0 0;
  padding-top: 7px;
  padding-bottom: 4px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  position: relative;
  transition: 0.2s;
  /* 白丸 */
}
.schedule_nav--lead::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}
.schedule_nav--lead {
  /* 再生三角 */
}
.schedule_nav--lead::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(16px + 16px / 2 - 4px * 0.75);
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--cource_color);
}
@media (max-width: 450px) {
  .schedule_nav--lead {
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 3px;
  }
}
.schedule_nav--date {
  min-height: calc(1lh + 16px);
  border-radius: 0 0 8px 8px;
  background-color: #fff;
  border: 2px solid var(--cource_color);
  border-top: none;
  padding: 8px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
  transition: 0.2s;
  flex: 1;
}
@media (max-width: 450px) {
  .schedule_nav--date {
    font-size: 16px;
  }
}

.feature {
  padding-top: 80px;
  padding-bottom: 120px;
}
@media (max-width: 450px) {
  .feature {
    padding: 56px 32px 80px;
  }
}
.feature--ttl {
  text-align: center;
}
.feature_list {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 450px) {
  .feature_list {
    flex-direction: column;
    row-gap: 56px;
    margin-top: 24px;
  }
}
.feature_list--img {
  display: block;
  margin: 0 auto;
}
.feature_list--ttl {
  position: relative;
  color: var(--logo);
  font-weight: bold;
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
  margin-top: 16px;
  text-box-trim: trim-start;
  background-repeat: no-repeat;
  background-image: linear-gradient(#f2b400, #f2b400), linear-gradient(#f2b400, #f2b400), linear-gradient(#f2b400, #f2b400), linear-gradient(#f2b400, #f2b400), linear-gradient(#f2b400, #f2b400), linear-gradient(#f2b400, #f2b400);
  background-size: 24px 2px, 24px 2px, 2px 100%, 24px 2px, 24px 2px, 2px 100%;
  background-position: left top, left bottom, left center, right top, right bottom, right center;
}
.feature_list--ttl > .small {
  font-size: 20px;
}
@media (max-width: 450px) {
  .feature_list--ttl > .small {
    font-size: 16px;
  }
}

.target {
  background-color: #d5f4fe;
  padding-top: 80px;
  padding-bottom: 120px;
}
@media (max-width: 450px) {
  .target {
    padding: 56px 25px 80px;
  }
}
.target--layout {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  column-gap: 57px;
}
@media (max-width: 450px) {
  .target--layout {
    flex-direction: column;
    row-gap: 16px;
  }
}
.target--block {
  flex-shrink: 0;
  width: fit-content;
}
@media (max-width: 450px) {
  .target--block {
    width: auto;
  }
}
.target--ttl {
  font-weight: bold;
  font-size: 48px;
  line-height: 1.5;
}
@media (max-width: 450px) {
  .target--ttl {
    font-size: 32px;
  }
}
.target--desc {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  margin-top: 16px;
}
@media (max-width: 450px) {
  .target--desc {
    font-size: 16px;
  }
}

.target_list {
  flex: 1;
}
.target_list--item {
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_66_56%29%22%3E%3Cpath%20d%3D%22M30.0804%200H1.91959C0.859428%200%200%200.859428%200%201.91959V30.0804C0%2031.1406%200.859428%2032%201.91959%2032H30.0804C31.1406%2032%2032%2031.1406%2032%2030.0804V1.91959C32%200.859428%2031.1406%200%2030.0804%200Z%22%20fill%3D%22%23ECF0F0%22%2F%3E%3Cpath%20d%3D%22M13.2637%2022.8421C12.749%2022.8421%2012.2367%2022.6365%2011.8599%2022.2321L6.39289%2016.3722C5.66917%2015.5968%205.71168%2014.3814%206.48709%2013.6589C7.26251%2012.9351%208.4779%2012.9776%209.20047%2013.7531L13.3808%2018.2344L22.919%209.65082C23.7071%208.94203%2024.9213%209.00521%2025.6301%209.79327C26.3389%2010.5813%2026.2757%2011.7956%2025.4877%2012.5044L14.5468%2022.3493C14.1804%2022.679%2013.7209%2022.8421%2013.2625%2022.8421H13.2637Z%22%20fill%3D%22%232C9DD7%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_66_56%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left 24px center;
  padding: 16px;
  padding-left: 80px;
}
.target_list--item + .target_list--item {
  margin-top: 8px;
}
@media (max-width: 450px) {
  .target_list--item {
    padding: 12px;
    padding-left: 48px;
    background-size: 16px 16px;
    background-position: left 16px center;
  }
  .target_list--item + .target_list--item {
    margin-top: 4px;
  }
}
.target_list--desc {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.8;
}
@media (max-width: 450px) {
  .target_list--desc {
    font-size: 16px;
  }
}
.target_list--labels + .target_list--desc {
  margin-top: 5px;
}
.target_list--labels {
  display: flex;
  column-gap: 4px;
}
.target_list--label {
  border-radius: 9999px;
  padding: 5px 8px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}
.target_list--label.tekishoku {
  background-color: var(--tekishoku);
}
.target_list--label.skillup {
  background-color: var(--skillup);
}
.target_list--label.oneday {
  background-color: var(--oneday);
}
@media (max-width: 450px) {
  .target_list--label {
    font-size: 11px;
  }
}
.target_list--note {
  font-size: 16px;
  line-height: 1.7;
  padding-left: 1em;
  text-indent: -1em;
}
@media (max-width: 450px) {
  .target_list--note {
    font-size: 13px;
    margin-top: 6px;
  }
}
.target_list--note + .target_list--labels {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 2px solid var(--gray);
}

.program {
  padding-top: 80px;
  padding-bottom: 120px;
}
@media (max-width: 450px) {
  .program {
    padding: 56px 25px 80px;
  }
}
.program--ttl {
  color: var(--logo, #00528B);
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  line-height: 1.5;
}
@media (max-width: 450px) {
  .program--ttl {
    font-size: 32px;
  }
}
.program--list {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
}
@media (max-width: 450px) {
  .program--list {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }
}
.program--item {
  display: flex;
  flex-direction: column;
}
.program--item.tekishoku {
  --cource_color: var(--tekishoku);
}
.program--item.skillup {
  --cource_color: var(--skillup);
}
.program--item.oneday {
  --cource_color: var(--oneday);
}
.program--img {
  display: block;
  margin: 0 auto;
}
.program--lead {
  color: var(--cource_color);
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-top: 21px;
}
.program--lead > .small {
  font-size: 20px;
  display: inline-block;
  margin-bottom: 8px;
}
.program--desc {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 17px;
  margin-bottom: 16px;
}
@media (max-width: 450px) {
  .program--desc {
    margin-bottom: 12px;
  }
}
.program--label {
  background: var(--gray, #ECF0F0);
  padding: 4px 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  width: fit-content;
  margin: 0 auto;
  margin-top: auto;
}
.program--date {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
  line-height: 1.5;
}
@media (max-width: 450px) {
  .program--date {
    margin-top: 8px;
  }
}
.program--link {
  border-radius: 16px;
  background: var(--cource_color);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 13px;
  color: var(--white, #FFF);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  display: block;
  margin-top: 16px;
  position: relative;
  transition: 0.2s;
  /* 白丸 */
}
.program--link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}
.program--link {
  /* 再生三角 */
}
.program--link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(16px + 16px / 2 - 4px * 0.75);
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--cource_color);
}
.tekishoku .program--link:hover {
  --cource_color: var(--tekishoku_light);
}
.skillup .program--link:hover {
  --cource_color: var(--skillup_light);
}
.oneday .program--link:hover {
  --cource_color: var(--oneday_light);
}

.flow {
  background: #D5F4FE;
  padding-top: 80px;
  padding-bottom: 120px;
}
@media (max-width: 450px) {
  .flow {
    padding: 56px 25px 80px;
  }
}
.flow--layout {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  column-gap: 104px;
}
@media (max-width: 450px) {
  .flow--layout {
    flex-direction: column;
    row-gap: 16px;
  }
}
.flow--ttl {
  font-weight: bold;
  font-size: 48px;
  line-height: 1.5;
}
@media (max-width: 450px) {
  .flow--ttl {
    font-size: 32px;
  }
}
.flow--right {
  flex: 1;
}
.flow--step {
  padding: 8px 26px;
  background-color: #fff;
  display: flex;
  align-items: center;
  column-gap: 24px;
  min-height: 68px;
}
.flow--step.step2 {
  background-color: #eef9ff;
}
.flow--step.step3 {
  background-color: #C5EBFF;
}
.flow--step.step4 {
  background-color: #ace3ff;
}
.flow--step.step5 {
  background-color: #83d5ff;
}
.flow--step + .flow--step {
  margin-top: 8px;
}
@media (max-width: 450px) {
  .flow--step {
    padding: 12px 14px;
    column-gap: 14px;
  }
}
.flow--step_number {
  flex-shrink: 0;
  color: var(--logo-sub, #2C9DD7);
  text-align: center;
  font-family: "Bubblegum Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
}
@media (max-width: 450px) {
  .flow--step_number {
    font-size: 16px;
  }
}
.flow--step_desc {
  font-size: 20px;
  line-height: 1.7;
  font-weight: bold;
}
@media (max-width: 450px) {
  .flow--step_desc {
    font-size: 16px;
  }
}
.flow--label {
  background: var(--logo, #00528B);
  padding: 20px;
  color: var(--white, #FFF);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-top: 40px;
  position: relative;
}
.flow--label:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  content: "";
  display: block;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2235%22%20height%3D%2218%22%20viewBox%3D%220%200%2035%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.3205%2018L-1.36852e-05%205.52035e-07L34.641%203.58045e-06L17.3205%2018Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  height: 18px;
  margin: 0 auto;
}
@media (max-width: 450px) {
  .flow--label {
    padding: 12px;
  }
}

.flow_jc {
  display: flex;
  max-width: 1000px;
  border-radius: 24px;
  background: #FFF;
  margin: 96px auto 0;
  padding: 56px;
  column-gap: 32px;
  align-items: center;
}
@media (max-width: 450px) {
  .flow_jc {
    flex-direction: column;
    padding: 20px 24px 24px;
  }
}
@media (max-width: 450px) {
  .flow_jc--img {
    width: calc(100% - 60px);
  }
}
@media (max-width: 450px) {
  .flow_jc--about {
    margin-top: 8px;
  }
}
.flow_jc--ttl {
  color: var(--logo, #00528B);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.28;
}
@media (max-width: 450px) {
  .flow_jc--ttl {
    text-align: center;
    font-size: 24px;
    line-height: 1.3;
  }
}
.flow_jc--txt {
  line-height: 1.7;
  margin-top: 24px;
}
@media (max-width: 450px) {
  .flow_jc--txt {
    margin-top: 16px;
  }
}

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