.oc#extra_program .anony {
  padding-top: 60px;
  padding-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony {
    padding-top: 30px;
  }
}

.oc#extra_program .anony__media02 dl dt {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__media02 dl dt {
    font-size: 12px;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
}

.oc#extra_program .anony__media02 dl dd {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.64285714286;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__media02 dl dd {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.oc#extra_program .anony__cost {
  margin-bottom: 60px;
}

.oc#extra_program .anony__cost__holder {
  border: 1px solid #C7DDDE;
  padding: 35px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__cost__holder {
    padding: 15px;
  }
}

.oc#extra_program .anony__cost__holder dl dt {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__cost__holder dl dt {
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
}

.oc#extra_program .anony__cost__holder dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.64285714286;
  font-size: 12px;
  font-size: 1.2rem;
}

.oc#extra_program .anony__special__media__holder {
  border: 1px solid #C7DDDE;
  padding: 35px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__special__media__holder {
    padding: 15px;
  }
}

.oc#extra_program .anony__special__media__holder dl dt {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__special__media__holder dl dt {
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
}

.oc#extra_program .anony__special__media__holder dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.3125;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__special__media__holder dl dd {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.oc#extra_program .anony__media01__step {
  margin-top: 70px;
}

.oc#extra_program .anony__media01__step__eachStep {
  position: relative;
  width: 356px;
  margin-left: calc((1156px - (356px * 3)) / 2);
  float: left;
  padding: 80px 20px 50px 20px;
  box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.06);
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .anony__media01__step__eachStep {
    width: 100%;
    margin-left: 0;
    float: none;
    margin-bottom: 80px;
  }
}

.oc#extra_program .anony__media01__step__eachStep:nth-child(3n+1) {
  margin-left: 0;
  clear: both;
}

.oc#extra_program .anony__media01__step__eachStep:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 46px 56px 0 0;
  border-color: #00509D transparent transparent transparent;
}

.oc#extra_program .anony__media01__step__eachStep:after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 46px 56px;
  border-color: transparent transparent #00509D transparent;
}

.oc#extra_program .anony__media01__step__eachStep__obj {
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -42px;
  width: 100%;
  width: 84px;
}

.oc#extra_program .anony__media01__step__eachStep__head {
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 30px;
  font-weight: 600;
}

.oc#extra_program .anony__media01__step__eachStep__rt {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.9375;
}

.oc#extra_program .anony__media01__step__eachStep__remarks {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.42857142857;
  margin-top: 20px;
}

.c-sec_type01 {
  margin-bottom: 80px;
}

@media only screen and (max-width: 767px) {
  .c-sec_type01 {
    margin-bottom: 40px;
  }
}

.c-list_type01 {
  margin-bottom: 30px;
}

.c-sec_type01.sec_over {
  background-color: #F5F5F5;
  margin: 0 calc(50% - 50vw);
  margin-bottom: 80px;
  padding: 80px 0;
  width: 100vw; }
  @media only screen and (max-width: 767px) {
    .c-sec_type01.sec_over {
      margin-bottom: 40px;
      padding: 40px 0; } }

.oc#extra_program .teachers_list {
  margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .teachers_list {
    margin-bottom: 0;
  }
}

.oc#extra_program .teachers_list_item {
  float: left;
  width: 356px;
  margin-left: 44px;
  margin-bottom: 40px;
}

.oc#extra_program .teachers_list_item:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .teachers_list_item {
    width: 47%;
  }
  .oc#extra_program .teachers_list_item:nth-child(3n+1) {
    clear: none;
  }
  .oc#extra_program .teachers_list_item:nth-child(even) {
    margin-left: 6%;
  }
  .oc#extra_program .teachers_list_item:nth-child(odd) {
    margin-left: 0;
    clear: both;
  }
}

.oc#extra_program .teachers_list dl {
  letter-spacing: -.4em;
}

.oc#extra_program .teachers_list dl dt {
  display: inline-block;
  vertical-align: top;
  width: 156px;
  margin-right: 20px;
  letter-spacing: normal;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .teachers_list dl dt {
    display: block;
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
  }
}

.oc#extra_program .teachers_list dl dd {
  display: inline-block;
  vertical-align: top;
  width: 180px;
  letter-spacing: normal;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .teachers_list dl dd {
    display: block;
    width: 100%;
  }
}

.oc#extra_program .teachers_list_name {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1em;
}

.oc#extra_program .teachers_list_position {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1em;
}

.oc#extra_program .teachers_list .teachers_list_item > a .teachers_list_name {
  text-decoration: underline;
}

.oc#extra_program .teachers_list .teachers_list_item > a .teachers_list_position {
  color: #404040;
}

.oc#extra_program .teachers_list .teachers_list_item > a:hover .teachers_list_name {
  text-decoration: none;
}

.oc#extra_program .compactContents {
  position: relative;
  height: auto;
  overflow: visible;
  padding-bottom: 100px;
}

.oc#extra_program .compactContents:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 300px;
  bottom: 0;
  left: 0;
  display: none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+50,1+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 75%, white 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  /* IE6-9 */
}
/* 隠す高さ */
.oc#extra_program .compactContents.is-compacted {
  height: 300px;
  overflow: hidden;
}

.oc#extra_program .compactContents.is-compacted:after {
  display: block;
}

.oc#extra_program .compactContents__btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: 360px;
  padding: 2em 0;
  margin: 0 auto;
  text-align: center;
  color: #00509D;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  border: solid 1px #E6E6E6;
  border-bottom: solid 2px #00509D;
  background-color: #fff;
  z-index: 2;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .compactContents__btn {
    width: 100%;
    padding: 1em 0;
    font-size: 1.4rem;
  }
}

.oc#extra_program .compactContents__btn:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -8px;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #00509D;
  border-right: solid 2px #00509D;
  transform: rotate(135deg);
}

.oc#extra_program .compactContents__btn:hover {
  color: #fff;
  border: solid 1px #00509D;
  border-bottom: solid 2px #00509D;
  background-color: #00509D;
}

.oc#extra_program .compactContents__btn:hover:after {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}

.oc#extra_program .compactContents__btn.is-clicked:after {
  transform: rotate(-45deg);
  margin-top: -2px;
}

.oc#extra_program .sec01__icon__list li {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.25;
  padding-left: 1em;
  text-indent: -1em;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .sec01__icon__list li {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

.oc#extra_program .sec01__icon__list li::before {
  content: "・";
}

@charset "UTF-8";
.oc#extra_program .fig_01 {
  width: 574px;
  margin: auto;
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .fig_01 {
    width: 100%;
    max-width: 574px;
  }
}

.oc#extra_program .fig_02 {
  width: 586px;
  margin: auto;
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .fig_02 {
    width: 100%;
    max-width: 586px;
  }
}

.oc#extra_program .sec01 .hl_type02 {
  margin-bottom: 25px;
}

.oc#extra_program .sec01 .list_title {
  margin-bottom: 10px;
}

.oc#extra_program .sec01 .list_title.u-fw_bold {
  font-weight: bold;
}

.oc#extra_program .sec01 .p-media {
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .sec01 .p-media[data-col="3"] > div {
    margin-bottom: 0;
  }
}

.oc#extra_program .sec01__icon__list li {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.25;
  padding-left: 1em;
  text-indent: -1em;
}

@media only screen and (max-width: 767px) {
  .oc#extra_program .sec01__icon__list li {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

.oc#extra_program .sec01__icon__list li::before {
  content: "・";
}

.c-media {
  margin-bottom: 40px;
}

.c-media > div {
  float: left;
}

.c-media[data-col="3"] > div {
  width: 356px;
  margin-left: 44px;
}

@media only screen and (max-width: 767px) {
  .c-media[data-col="3"] > div {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
}

.c-media[data-col="3"] > div:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}

/*20250828*/
.u-mlr-auto { margin-left: auto!important; margin-right: auto!important; float: none;}

/*20251031*/
.btn-fin {color:red; text-align: center;}

@media only screen and (max-width: 767px) {
  .btn-fin {font-size: 80%;}
}