@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Murecho&display=swap");
body {
  overflow-x: hidden;
  font-size: clamp(14px, 1.5625vw, 18px);
}

.mudx_r7_course .layout-footer {
  background: none;
}
.mudx_r7_course .layout-header {
  padding-top: 0px;
}

h1 {
  font-size: clamp(24px, 2.9296875vw, 36px);
}

.inner-wrap {
  container-type: inline-size;
  max-width: 1280px;
  width: 100%;
  margin: auto;
  width: 100%;
}
@media screen and (min-width: 801px) {
  .inner-wrap {
    padding-inline: 7.8%;
  }
}
@media screen and (max-width: 800px) {
  .inner-wrap.is-layout-flex {
    padding-inline: 2%;
  }
}

.is-layout-flex.sec {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 801px) {
  .is-layout-flex.sec {
    -webkit-margin-after: 56px;
            margin-block-end: 56px;
  }
}
@media screen and (max-width: 800px) {
  .is-layout-flex.sec {
    -webkit-margin-after: 2em;
            margin-block-end: 2em;
  }
}

.sec-title {
  color: #026239;
}

.sec h3 {
  color: #259e53;
}

#layout-header {
  position: relative;
}
#layout-header .page-description {
  position: relative;
  color: #fff;
  margin-inline: auto 0;
  z-index: 0;
  padding-left: 10px;
  gap: 0;
  padding-block: 10px;
}
#layout-header .page-description::before {
  content: "";
  display: block;
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: -1;
  background: linear-gradient(90deg, rgb(2, 98, 57) 0%, rgb(34, 153, 80) 100%);
}
#layout-header .description {
  border-bottom: 1px solid #fff;
}
#layout-header .term {
  font-size: clamp(18px, 2.03125vw, 26px);
  font-weight: bold;
  color: #026239;
  margin-inline: auto 0;
}

@media screen and (min-width: 801px) {
  #layout-header > .inner-wrap {
    position: relative;
  }
  #layout-header > .inner-wrap:after {
    display: block;
    width: 100vw;
    height: 100%;
    content: "";
    position: absolute;
    z-index: -1;
    right: 38%;
    top: 0;
    background: url(../images/mudx/header_bg_pc.png) no-repeat center right;
    background-size: auto 100%;
  }
  #layout-header .h-logo {
    margin-inline: auto 0;
    width: 6.71875%;
    aspect-ratio: 43/51;
  }
  #layout-header .page-description {
    height: 44.21875%; /* 正確な縦横比に基づいた高さ計算 */
    width: 50%;
  }
  #layout-header .description {
    padding-bottom: 0.8rem;
  }
  #layout-header .term {
    width: 32.8125%;
  }
}
@media screen and (max-width: 800px) {
  #layout-header {
    min-height: 260px;
    background: url(../images/mudx/header_bg_sp.png) no-repeat left center;
    background-size: auto 100%;
  }
  #layout-header > .inner-wrap {
    gap: 0;
    flex-grow: 1;
  }
  #layout-header .h-logo {
    width: 12.5333333333%;
    aspect-ratio: 43/51;
  }
  #layout-header .page-name {
    font-size: 18px;
  }
  #layout-header .description {
    line-height: 1.4;
  }
  #layout-header .term {
    margin-top: auto;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
  }
  #layout-header .term > br {
    display: none;
  }
}

.sec-about_recurrent {
  height: 35.0515463918%; /* 正確な縦横比に基づいた高さ計算 */
  -webkit-padding-before: 3.90625%;
          padding-block-start: 3.90625%;
  -webkit-padding-after: 5.46875%;
          padding-block-end: 5.46875%;
  justify-content: center;
  align-items: center;
  border-image-source: linear-gradient(0deg, #faf8f2 0 100%);
  border-image-slice: fill 0;
  border-image-outset: 0 100vw;
}
.sec-about_recurrent .sec-title {
  border-bottom: 2px solid #212529;
  width: 100%;
}

@media screen and (min-width: 801px) {
  .sec-introduction.is-layout-flex {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: -webkit-max-content 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0;
  }
  .sec-introduction .sec-title {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .sec-introduction .gridbox-text {
    grid-column: 1/2;
    grid-row: 2/3;
    -webkit-padding-end: 1rem;
            padding-inline-end: 1rem;
  }
  .sec-introduction .gridbox-photo {
    grid-column: 2/3;
    grid-row: 1/3;
    aspect-ratio: 8/5;
  }
}
@media screen and (max-width: 800px) {
  .sec-introduction .sec-title {
    order: 2;
  }
  .sec-introduction .gridbox-text {
    order: 3;
  }
  .sec-introduction .gridbox-photo {
    order: 1;
  }
}
.sec-introduction .sec-title {
  width: 100%;
  color: #fff;
  padding: 0.5rem;
  background: linear-gradient(90deg, rgb(2, 98, 57) 0%, rgb(34, 153, 80) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#026239",endColorstr="#229950" , GradientType=1);
}

@media screen and (min-width: 801px) {
  .menu-page-link {
    align-items: stretch;
  }
  .menu-page-link .menu-item {
    width: calc((100% - 1em) / 3);
  }
  .menu-page-link .wp-block-button__link {
    height: 100%;
    background-color: #faf8f2;
    border: 1px solid #212529;
    color: #026239;
    text-align: center;
    width: 100%;
    border-radius: 0;
  }
  .menu-page-link .wp-block-button__link:hover, .menu-page-link .wp-block-button__link:active {
    background-color: #026239;
    color: #fff;
  }
}

@media screen and (max-width: 800px) {
  .menu-page-link.is-layout-flex {
    display: block;
  }
  #menu_btn {
    background-color: #026239;
  }
  .menu-trigger {
    width: 80%;
    height: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .menu-triggerspan {
    position: relative;
  }
  .menu-trigger span:nth-of-type(2) {
    top: unset;
    width: 100%;
  }
  .wp-block-button {
    text-align: right;
  }
  .wp-block-button__link {
    height: 100%;
    border-top: 1px solid #026239;
    background: initial;
    color: #026239;
    text-align: center;
    width: 80%;
    border-radius: 0;
  }
  .wp-block-button:last-child .wp-block-button__link {
    border-bottom: 1px solid #026239;
  }
  #menu_btn.active {
    border: 1px solid #026239;
    background-color: #fff;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
    background-color: #026239;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(3) {
    transform: translateY(-12px) rotate(45deg);
    background-color: #026239;
  }
  #nav {
    max-width: inherit;
    transform: translate(100%);
  }
  #nav.open {
    transform: translateZ(0);
    width: 310px;
  }
}
.sec:not(:is(.sec-about_recurrent, .sec-introduction)) > .sec-title {
  border-bottom: 3px solid #212529;
  width: 100%;
  margin-bottom: 0.3em;
}
.sec:not(:is(.sec-about_recurrent, .sec-introduction)) > .sec-title::before {
  content: "◆";
}

.sec-subject {
  gap: 0;
  counter-reset: number 0; /* number のカウンタを 0 にセット */
}
.sec-subject h3 {
  font-size: clamp(18px, 1.5625vw, 20px);
  margin-top: 1em;
}
.sec-subject h3::before {
  counter-increment: number 1; /* number カウンタの増加数をセット */
  content: counter(number) ". "; /* 表示形式を指定 */
}

.sec-tuition strong {
  color: #026239;
  font-size: clamp(18px, 1.40625vw, 18px);
}
.sec-tuition .tuition-item:nth-of-type(1) strong,
.sec-tuition .tuition-item:nth-of-type(3) strong {
  font-size: clamp(20px, 1.875vw, 24px);
}
@media screen and (min-width: 801px) {
  .sec-tuition .tuition-item {
    align-items: flex-start;
  }
  .sec-tuition .tuition-item > :nth-child(1)::after {
    content: ":";
  }
}
@media screen and (max-width: 800px) {
  .sec-tuition .tuition-item {
    flex-direction: column;
    gap: 0em;
    align-items: initial;
  }
}

.aim-list {
  counter-reset: number 0; /* number のカウンタを 0 にセット */
}
.aim-list.is-layout-flex {
  align-items: stretch;
  gap: 1em;
}
.aim-list .list-item {
  background-color: #f2f5f6;
  -webkit-padding-before: 1.953125%;
          padding-block-start: 1.953125%;
  -webkit-padding-after: 1.5625%;
          padding-block-end: 1.5625%;
  padding-inline: 1.953125%;
}
.aim-list .list-item h3:before {
  counter-increment: number 1; /* number カウンタの増加数をセット */
  content: counter(number) ". "; /* 表示形式を指定 */
}
@media screen and (min-width: 801px) {
  .aim-list .list-item {
    width: calc((100% - 1em) / 2);
  }
}
@media screen and (max-width: 800px) {
  .aim-list.is-layout-flex {
    flex-direction: column;
  }
}
.aim-list .list-item h3 {
  font-size: clamp(18px, 1.875vw, 22px);
}

.sec-program {
  counter-reset: number 0; /* number のカウンタを 0 にセット */
}
.sec-program.is-layout-flex {
  gap: 0;
}
.sec-program.is-layout-flex > .sec-title {
  border: none;
}
.sec-program table {
  width: 100%;
  width: 100cqw;
  font-size: clamp(14px, 1.5625vw, 16px);
}
.sec-program table th {
  font-weight: normal;
}
.sec-program .wp-block-table thead {
  border-bottom: none;
  background-color: #faf8f2;
}
.sec-program tr > td {
  vertical-align: top;
  padding: 0.8em;
  height: 4.8em;
  box-sizing: content-box;
}
.sec-program tr > td:nth-of-type(1) p {
  display: flex;
  -webkit-padding-start: 0.5em;
          padding-inline-start: 0.5em;
}
.sec-program tr > td:nth-of-type(1) p::before {
  counter-increment: number 1; /* number カウンタの増加数をセット */
  content: counter(number) ". "; /* 表示形式を指定 */
}
.sec-program tr > td:nth-of-type(2) ul {
  list-style: none;
}
.sec-program tr > td:nth-of-type(2) ul li {
  display: flex;
}
.sec-program tr > td:nth-of-type(2) ul li::before {
  content: "・"; /* 表示形式を指定 */
}
@media screen and (max-width: 800px) {
  .sec-program .wp-block-table {
    overflow-x: auto;
    width: 100%;
  }
  .sec-program table td {
    white-space: nowrap;
  }
}

.teacher-list.is-layout-flex {
  gap: 1em;
  align-items: stretch;
}
.teacher-list .card {
  background-color: #f2f5f6;
  padding-block: 2.109375%;
  padding-inline: 1.5625%;
  align-items: start;
}
.teacher-list .name {
  padding: 0.5rem;
  border-bottom: 2px solid #212529;
  color: #259e53;
  font-size: clamp(18px, 1.875vw, 22px);
}
@media screen and (min-width: 801px) {
  .teacher-list .card {
    width: calc((100% - 1em) / 2);
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    grid-template-rows: auto 1fr;
    gap: 0.5em 1em;
  }
  .teacher-list .card-photo {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  .teacher-list .name {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .teacher-list .card-text {
    grid-column: 2/3;
    grid-row: 2/3;
    font-size: clamp(12px, 1.25vw, 16px);
  }
}
@media screen and (max-width: 800px) {
  .teacher-list.is-layout-flex {
    flex-direction: column;
    width: 100%;
  }
  .teacher-list .card {
    width: 100%;
  }
  .teacher-list .card-photo {
    display: none;
  }
  .teacher-list .name {
    width: 100%;
  }
}

.layout-footer {
  border-top: 4.5px solid #259e53;
  min-height: auto;
}
.layout-footer .inner-wrap {
  -webkit-padding-before: 2.34375%;
          padding-block-start: 2.34375%;
  -webkit-padding-after: 4.296875%;
          padding-block-end: 4.296875%;
}
.layout-footer .contact {
  -webkit-margin-start: 1.40625%;
          margin-inline-start: 1.40625%;
  -webkit-margin-end: 3.90625%;
          margin-inline-end: 3.90625%;
}
.layout-footer .contact h4 {
  border-bottom: 3px solid #212529;
  width: 100%;
}
.layout-footer .contact h4:before {
  content: "◆";
}
.layout-footer .contact-name {
  font-size: clamp(18px, 1.875vw, 22px);
  font-weight: bold;
}
.layout-footer .contact-name span {
  display: block;
  font-size: 0.7em;
  font-weight: normal;
  line-height: 1;
}
.layout-footer .contact .tel {
  font-size: clamp(22px, 2.34375vw, 28px);
  font-weight: bold;
  line-height: 1;
}
.layout-footer .contact .tel > a {
  text-decoration: none;
  color: #000000;
}
@media screen and (min-width: 801px) {
  .layout-footer .f-logo {
    margin-inline: auto 0;
  }
}
@media screen and (max-width: 800px) {
  .layout-footer.is-layout-flex {
    align-items: start;
  }
  .layout-footer .inner-wrap {
    display: block;
  }
  .layout-footer .contact {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 1.5em;
  }
}

/* -----------------------*/
/* ページ上部へ戻る */
/* -----------------------*/
@media screen and (min-width: 801px) {
  div.tothetop a {
    background: url(../images/mudx/scrolltop_pc.png) center center no-repeat;
    width: 60px;
    aspect-ratio: 1/1;
    background-size: contain;
  }
}
@media screen and (max-width: 800px) {
  div.tothetop a {
    background: url(../images/mudx/scrolltop_sp.png) center center no-repeat;
    width: 50px;
    aspect-ratio: 1/1;
    background-size: contain;
  }
}