@charset "UTF-8";
/* A Modern CSS Reset */
* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  border-style: solid;
  box-sizing: border-box;
  border-width: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
  text-decoration-skip-ink: auto;
}

img {
  width: 100%;
  display: block;
}

input,
button,
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 0;
  background: transparent;
  font: inherit;
  outline: none;
}

textarea {
  resize: none;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

h2, p {
  margin-block-start: initial;
  margin-block-end: initial;
}

body {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
}

body {
  color: #72716f;
}

@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media (max-width: 787px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.3194444444vw;
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  a {
    transition: 0.2s ease-in-out;
  }
}

main {
  overflow: hidden;
  overflow-x: hidden;
}

img {
  /* SPの長押し禁止 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}

header {
  height: 3.75rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: white;
}
@media screen and (min-width: 768px) {
  header {
    height: 5.625rem;
  }
}

.header-wrapper {
  display: flex;
  align-items: center;
  height: inherit;
}
@media screen and (min-width: 768px) {
  .header-wrapper {
    justify-content: space-between;
  }
}

.header-wrapper__logo {
  margin-left: 0;
  margin: 0.25rem 0 0rem 0.9375rem;
}
@media screen and (min-width: 768px) {
  .header-wrapper__logo {
    margin: 0.3125rem 0rem 0rem 5rem;
    line-height: 0.0625rem;
  }
}

.header-wrapper__logo a {
  display: block;
  width: 5.5rem;
}
@media screen and (min-width: 768px) {
  .header-wrapper__logo a {
    width: 9.375rem;
  }
}

.header-wrapper__logo .header-wrapper__logo a {
  height: inherit;
  display: flex;
  align-items: center;
}

.header-wrapper__button {
  display: flex;
  padding-right: 1.875rem;
  column-gap: 0.625rem;
  margin: 0 auto;
}
@media (max-width: 520px) {
  .header-wrapper__button {
    padding-right: 2.5rem;
    column-gap: 0.3125rem;
  }
}

.header-wrapper__button-youtube button {
  width: 2.5rem;
  height: 2.5rem;
}

.header-wrapper__button-youtube img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-wrapper__button-contactbutton button {
  width: 7.5rem;
  height: 2.5rem;
}

.header-wrapper__button-contactbutton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header__hamburger {
  margin-right: 0;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .header__hamburger {
    display: none;
  }
}

.header-right {
  display: none;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .header-right {
    display: block !important;
    position: static;
  }
}

.header-nav {
  width: 100%;
  min-height: 100vh;
  background-image: url("/wp-content/themes/pep/img/header-navback.png");
  background-size: cover;
  background-repeat: repeat;
  overflow-y: scroll;
  z-index: 80;
}
@media screen and (min-width: 768px) {
  .header-nav {
    width: 100%;
    height: inherit;
    min-height: unset;
    overflow-y: initial;
    background-image: initial;
    background-size: initial;
    background-repeat: initial;
    background-color: white;
    z-index: initial;
  }
}

.header-nav__block {
  background-color: white !important;
  position: fixed;
  width: 100% !important;
  height: 3.75rem;
  z-index: 999;
}
@media screen and (min-width: 768px) {
  .header-nav__block {
    background-color: white;
    position: initial;
    width: initial;
    height: initial;
    z-index: initial;
  }
}

.header-nav__block .header-wrapper__logo {
  margin-left: 0;
  margin: 0rem 0 0rem 0.9375rem;
  padding: 0.625rem 0 0.625rem 0rem;
  position: fixed;
}
@media screen and (min-width: 768px) {
  .header-nav__block .header-wrapper__logo {
    margin: 0.3125rem 0rem 0rem 7.5rem;
    line-height: 0.0625rem;
  }
}

.header-nav ul {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
  padding-top: 6.25rem;
  text-align: left;
  max-width: 12.5rem;
}
@media screen and (min-width: 768px) {
  .header-nav ul {
    width: inherit;
    height: inherit;
    padding-top: 2.1875rem;
    padding-bottom: 0.625rem;
    padding-left: 24.0625rem;
    height: 4.375rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: initial;
    margin-top: initial;
    margin-left: initial;
    text-align: initial;
    max-width: initial;
  }
}

.header-nav li {
  padding-bottom: 3.75rem;
  transition-duration: 0.4s;
}

.header-nav li:hover {
  transform: scale(1.1);
}

.header-nav li:nth-of-type(1) a p::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  /* 画像の幅 */
  height: 2.5rem;
  /* 画像の高さ */
  margin-right: 8px;
  /* テキストとの間の余白 */
  background-image: url("/wp-content/themes/pep/img/about-icon.png");
  /* 画像のURL */
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* テキストと揃える */
}
.header-nav li:nth-of-type(1) a p::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  /* 画像の幅 */
  height: 2.5rem;
  /* 画像の高さ */
  margin-right: 8px;
  /* テキストとの間の余白 */
  background-image: url("/wp-content/themes/pep/img/about-icon.png");
  /* 画像のURL */
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* テキストと揃える */
}
.header-nav li:nth-of-type(2) a p::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  /* 画像の幅 */
  height: 2.5rem;
  /* 画像の高さ */
  margin-right: 8px;
  /* テキストとの間の余白 */
  background-image: url("/wp-content/themes/pep/img/course-icon.png");
  /* 画像のURL */
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* テキストと揃える */
}
.header-nav li:nth-of-type(3) a p::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  /* 画像の幅 */
  height: 2.5rem;
  /* 画像の高さ */
  margin-right: 8px;
  /* テキストとの間の余白 */
  background-image: url("/wp-content/themes/pep/img/schedule-icon.png");
  /* 画像のURL */
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* テキストと揃える */
}
.header-nav li:nth-of-type(4) {
  padding-bottom: initial;
}

.header-nav li:nth-of-type(4) a p::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  /* 画像の幅 */
  height: 2.5rem;
  /* 画像の高さ */
  margin-right: 8px;
  /* テキストとの間の余白 */
  background-image: url("/wp-content/themes/pep/img/access-icon.png");
  /* 画像のURL */
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* テキストと揃える */
}
.header-nav li a {
  cursor: pointer;
}

.header-nav li a p {
  color: #723d11;
  font-family: "Zen Maru Gothic", serif;
  font-size: 1.25rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .header-nav li a p {
    font-size: 1rem;
  }
}

.header-nav__contact {
  column-gap: 3.125rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 12.5rem;
  margin: 0 auto;
  padding-top: 6.25rem;
  padding-bottom: 312.5rem;
}

.header-nav__contact-mail,
.header-nav__contact-x {
  cursor: pointer;
  transition-duration: 0.4s;
}

.header-nav__contact-mail:hover,
.header-nav__contact-x:hover {
  transform: scale(1.1);
}

.header-nav__contact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.hamburger {
  position: relative;
  /*ボタン内側の基点となるためrelativeを指定*/
  background: white;
  cursor: pointer;
  width: 2.1875rem;
  height: 2.1875rem;
  top: 1.5%;
  right: 7%;
  position: fixed;
  z-index: 90;
}

/*ボタン内側*/
.hamburger span {
  background: #723d11;
  display: inline-block;
  position: absolute;
  top: 5%;
  left: 0.375rem;
  height: 0.125rem;
  width: 1.875rem;
  transition: 0.3s ease-in-out;
}

.hamburger span:nth-of-type(1) {
  top: 0.625rem;
}

.hamburger span:nth-of-type(2) {
  top: 1.25rem;
}

.hamburger span:nth-of-type(3) {
  top: 1.875rem;
}

/*openクラスが付与されると線が回転して×に変更*/
.hamburger.active {
  position: relative;
  /*ボタン内側の基点となるためrelativeを指定*/
  cursor: pointer;
  top: 1.5%;
  right: 5.5%;
  position: fixed;
}

.hamburger.active span {
  background: #723d11;
}

.hamburger.active span:nth-of-type(1) {
  top: 1rem;
  left: 0.4375rem;
  transform: translateY(2px) rotate(-45deg);
  width: 2.1875rem;
}

.hamburger.active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger.active span:nth-of-type(3) {
  top: 1.875rem;
  left: 0.4375rem;
  transform: translateY(-12px) rotate(45deg);
  width: 2.1875rem;
}

footer {
  padding-top: 4.375rem;
  padding-bottom: 4.375rem;
  background-color: white;
  text-align: center;
}
@media screen and (min-width: 768px) {
  footer {
    padding-top: 3.125rem;
    padding-bottom: 4.25rem;
  }
}

@media screen and (min-width: 768px) {
  .footer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 11%;
    padding-right: 11%;
    column-gap: 12.5rem;
  }
}

.footer-wrapper__info-logo a {
  display: block;
  margin: 0 auto;
  width: 14.1875rem;
}

.footer-wrapper__info-logo .footer-wrapper__info-logo a {
  height: inherit;
  display: flex;
  align-items: center;
}

.footer-wrapper__info p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .footer-wrapper__info p {
    text-align: left;
  }
}

footer small {
  font-weight: 400;
  color: #723d11;
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  footer small {
    font-size: 1rem;
    color: white;
  }
}

footer small button {
  color: #723d11;
  cursor: pointer;
  margin-top: 3.75rem;
}
.footer-nav {
  background-color: #fbbf13;
  border-radius: 1.25rem;
  margin: 0 auto;
  margin-top: 2.5rem;
  width: 80%;
}
@media screen and (min-width: 768px) {
  .footer-nav {
    border-radius: 2.5rem;
    margin-top: 1.25rem;
    width: 55%;
    height: 100%;
  }
}

.footer-nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 5%;
  padding-right: 5%;
}
@media (min-width: 474px) {
  .footer-nav ul {
    column-gap: 0.625rem;
  }
}
@media screen and (min-width: 768px) {
  .footer-nav ul {
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.footer-nav li {
  padding-bottom: 1.25rem;
  transition-duration: 0.4s;
}
@media (min-width: 516px) {
  .footer-nav li {
    padding-bottom: initial;
  }
}

.footer-nav li:hover {
  transform: scale(1.1);
}

.footer-nav li:nth-of-type(3),
.footer-nav li:nth-of-type(4) {
  padding-bottom: initial;
}

.footer-nav li p {
  color: white;
  font-size: 1rem;
  font-weight: 700;
}

.inner {
  width: 100%;
  padding-right: 1.4375rem;
  padding-left: 1.4375rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: initial;
    padding-right: initial;
    padding-left: initial;
  }
}

.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.concept-sp {
  padding-top: 3.125rem;
}

.concept-sp__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

.concept-sp__wrapper-img {
  position: relative;
  width: 42%;
  z-index: 0;
}

.concept-sp__wrapper-img:nth-of-type(1) {
  position: relative;
  margin-top: -6.875rem;
}

.concept-sp__wrapper-img:nth-of-type(1)::before {
  content: "";
  display: inline-block;
  width: 50%;
  height: 6.25rem;
  background-image: url("/wp-content/themes/pep/img/conceptsp-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
  z-index: 0;
}

.concept-sp__wrapper-img:nth-of-type(2) {
  position: relative;
  margin-top: 5rem;
  z-index: 20;
}

.concept-sp__wrapper-img:nth-of-type(2)::before {
  content: "";
  width: 130%;
  height: 120%;
  background-image: url("/wp-content/themes/pep/img/conceptsp-right.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: -5rem;
  right: 0rem;
  z-index: 0;
  display: block;
}

.concept-sp__wrapper-img:nth-of-type(2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 20;
}

.concept-sp__text {
  margin-top: 0.625rem;
  position: relative;
  z-index: 0;
}

.concept-sp__text-left {
  position: absolute;
  width: 50%;
  top: 0rem;
  left: 0.9375rem;
  display: block;
  z-index: 0;
}

.concept-sp__text-right {
  position: absolute;
  width: 50%;
  top: 20rem;
  right: -0.9375rem;
  display: block;
  z-index: 0;
}

.concept-sp__text h3 {
  color: #723d11;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 10;
}
.concept-sp__text-detail {
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  margin-top: 0.9375rem;
  position: relative;
  z-index: 10;
}

.concept-sp__text-detail p {
  color: #72716f;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}

.concept-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .concept-pc {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 3.125rem;
    overflow: visible;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__img {
    width: 20%;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__img:last-of-type {
    transform: translateY(-40%);
  }
}

.concept-pc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .concept-pc__text {
    margin-top: -0.625rem;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__text::before {
    content: "";
    width: 80%;
    height: 120%;
    background-image: url("/wp-content/themes/pep/img/concept-middle.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    display: block;
    position: absolute;
    top: 0.625rem;
    right: -21.875rem;
    overflow: visible;
    z-index: 0;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__text h3 {
    color: #723d11;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__text-detail {
    margin-top: 1.875rem;
    position: relative;
    z-index: 10;
  }
}

@media screen and (min-width: 768px) {
  .concept-pc__text-detail p {
    color: #72716f;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.6;
  }
}

.feature-cards {
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 3.75rem;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .feature-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 2.5rem;
  }
}

.feature-cards li {
  margin-bottom: 3.125rem;
}
@media screen and (min-width: 768px) {
  .feature-cards li {
    margin-bottom: initial;
    max-width: 23rem;
  }
}

.feature-cards li:nth-of-type(1) {
  position: relative;
  z-index: 20;
}

.feature-cards li:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 20%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/conceptsp-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 3.125rem;
  left: -10%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-cards li:nth-of-type(1)::before {
    display: none;
  }
}

.feature-cards li:nth-of-type(1)::after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-image: url("/wp-content/themes/pep/img/feature-right.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-cards li:nth-of-type(1)::after {
    display: none;
  }
}

.feature-cards li:nth-of-type(2) {
  position: relative;
  z-index: 20;
}

.feature-cards li:nth-of-type(2)::before {
  content: "";
  display: block;
  width: 40%;
  height: 45%;
  background-image: url("/wp-content/themes/pep/img/feature2-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 3.125rem;
  left: -10%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-cards li:nth-of-type(2)::before {
    display: none;
  }
}

.feature-cards li:nth-of-type(3) {
  margin-bottom: initial;
  position: relative;
  z-index: 20;
}

.feature-cards li:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 50%;
  height: 45%;
  background-image: url("/wp-content/themes/pep/img/feature3-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 11.25rem;
  left: -10%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-cards li:nth-of-type(3)::before {
    display: none;
  }
}

.feature-cards li:nth-of-type(3)::after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-image: url("/wp-content/themes/pep/img/concept-middle.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-cards li:nth-of-type(3)::after {
    display: none;
  }
}

.feature-cards__img {
  position: relative;
  display: inline-block;
}
@media screen and (min-width: 600px) {
  .feature-cards__img {
    max-width: 37.5rem;
    margin: 0 auto;
  }
}

.feature-cards__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0);
  /* 完全透明 */
}

.feature-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-cards h3 {
  color: #723d11;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 600px) {
  .feature-cards h3 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .feature-cards h3 {
    font-size: 1.25rem;
    margin-top: 0.3125rem;
    margin-bottom: 2.8125rem;
  }
}

.feature-cards p {
  color: #72716f;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .feature-cards p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .feature-cards p {
    font-size: 1rem;
  }
}

.course-cards {
  display: block;
  padding-top: 3.75rem;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .course-cards {
    padding-top: 3.75rem;
  }
}

.course-cards li {
  display: block;
  margin-bottom: 3.4375rem;
  max-width: 98%;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 400px) {
  .course-cards li {
    margin-bottom: 4.6875rem;
  }
}
@media (min-width: 500px) {
  .course-cards li {
    margin-bottom: 5.9375rem;
  }
}
@media (min-width: 600px) {
  .course-cards li {
    margin-bottom: 7.1875rem;
  }
}
@media screen and (min-width: 768px) {
  .course-cards li {
    align-items: flex-start;
    column-gap: 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-bottom: 3.125rem;
    margin-bottom: 5rem;
    max-width: 83%;
  }
}

.course-cards li:nth-of-type(1) {
  background-color: #ffdd78;
  border-top-right-radius: 1.875rem;
  border-bottom-right-radius: 1.875rem;
  margin-right: auto;
}

.course-cards li:nth-of-type(1) .course-cards__img {
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .course-cards li:nth-of-type(1) .course-cards__img {
    margin-right: initial;
  }
}

.course-cards li:nth-of-type(2) {
  background-color: #ffbfc5;
  border-top-left-radius: 1.875rem;
  border-bottom-left-radius: 1.875rem;
  flex-direction: row-reverse;
  margin-left: auto;
}

.course-cards li:nth-of-type(2) .course-cards__img {
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .course-cards li:nth-of-type(2) .course-cards__img {
    margin-left: initial;
    width: 60%;
  }
}

.course-cards li:nth-of-type(3) {
  background-color: #c7e883;
  border-top-right-radius: 1.875rem;
  border-bottom-right-radius: 1.875rem;
  margin-right: auto;
}

.course-cards li:nth-of-type(3) .course-cards__img {
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .course-cards li:nth-of-type(3) .course-cards__img {
    margin-right: initial;
    width: 40%;
  }
}

.course-cards__img {
  position: relative;
  display: inline-block;
  width: 90%;
}
@media screen and (min-width: 768px) {
  .course-cards__img {
    margin-top: 0.625rem;
    width: 40%;
  }
}

.course-cards__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0);
  /* 完全透明 */
}

.course-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-cards__text {
  text-align: left;
  margin-top: 2.5rem;
  max-width: 95%;
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .course-cards__text {
    max-width: initial;
  }
}

.course-cards__text h3 {
  color: white;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .course-cards__text h3 {
    font-size: 2.5rem;
  }
}

.course-cards__text p {
  color: white;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .course-cards__text p {
    font-size: 1.25rem;
  }
}

.reviews-slider {
  margin: 0 auto;
  padding-top: 3.125rem;
  height: auto;
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .reviews-slider {
    padding-top: 4.6875rem;
    width: 90%;
  }
}

.reviews-slider li {
  max-width: 20.5625rem;
  overflow: visible;
  position: relative;
}

.slick-slide {
  margin: 0rem 2.5rem;
}
@media screen and (min-width: 768px) {
  .slick-slide {
    margin: 0rem 2.5rem;
  }
}

.reviews-slider li:nth-of-type(even) .fukidashi {
  border: solid 0.1875rem #ff96a0;
}

.reviews-slider li:nth-of-type(even) .fukidashi::before {
  border-top: 0.625rem solid #ff96a0;
}

.reviews-slider li:nth-of-type(odd) .fukidashi {
  border: solid 0.1875rem #f8be18;
}

.reviews-slider li:nth-of-type(odd) .fukidashi::before {
  border-top: 0.625rem solid #f8be18;
}

.reviews-slider li .cat-parents:after {
  content: "";
  width: 6.25rem;
  height: 7.375rem;
  background-image: url("/wp-content/themes/pep/img/woman.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: -8.75rem;
  right: 0rem;
  z-index: 20;
}

.reviews-slider li .cat-boy:after {
  content: "";
  width: 6.25rem;
  height: 7.375rem;
  background-image: url("/wp-content/themes/pep/img/boy.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: -8.75rem;
  right: 0rem;
  z-index: 20;
}

.reviews-slider li .cat-elementalygirl:after {
  content: "";
  width: 6.25rem;
  height: 7.375rem;
  background-image: url("/wp-content/themes/pep/img/junior-girl.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: -8.75rem;
  right: 0rem;
  z-index: 20;
}

.reviews-slider li .cat-juniorgirl:after {
  content: "";
  width: 6.25rem;
  height: 7.375rem;
  background-image: url("/wp-content/themes/pep/img/high-girl.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: -8.75rem;
  right: 0rem;
  z-index: 20;
}

.reviews-slider li .cat-juniorboy:after {
  content: "";
  width: 6.875rem;
  height: 7.375rem;
  background-image: url("/wp-content/themes/pep/img/junior-boy.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: -8.75rem;
  right: 0rem;
  z-index: 20;
}

.slick-list,
.slick-track,
.slick-slide,
.reviews-slider__detail {
  overflow: visible !important;
  position: relative;
}

.detail-address {
  margin-top: 3.125rem;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .detail-address {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-top: 2.5rem;
    width: 95%;
  }
}

.detail-address::before {
  content: "";
  display: block;
  width: 40%;
  height: 50%;
  background-image: url("/wp-content/themes/pep/img/detailsp-bottom.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -10.625rem;
  right: -20%;
  z-index: -1;
}
@media (min-width: 450px) {
  .detail-address::before {
    bottom: -8.125rem;
  }
}
@media (min-width: 500px) {
  .detail-address::before {
    bottom: -6.25rem;
  }
}
@media screen and (min-width: 768px) {
  .detail-address::before {
    background-image: url("/wp-content/themes/pep/img/detailpc-bottom.png");
    right: initial;
    left: 12%;
  }
}

.detail-address li {
  width: 100%;
  background-color: white;
}

.detail-address li:nth-of-type(2) {
  border-top-right-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}
@media screen and (min-width: 768px) {
  .detail-address li:nth-of-type(2) {
    align-items: center;
  }
}

.detail-address li iframe {
  display: block;
  width: 100%;
  max-height: 18.75rem;
}
@media screen and (min-width: 768px) {
  .detail-address li iframe {
    padding: 0;
    margin: 0;
    width: 90%;
    max-height: initial;
    height: 100%;
  }
}

.detail-address__table {
  padding-top: 2.5rem;
  padding-left: 5%;
  padding-right: 5%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .detail-address__table {
    border-spacing: initial;
    border-collapse: separate;
    border-spacing: 0;
    border-spacing: 0;
    padding-top: 8.125rem;
    padding-bottom: 3.125rem;
    padding-left: 4%;
    padding-right: 10%;
  }
}

.detail-address__table .tbody {
  margin: auto 0;
}

.detail-address__table tr {
  border-bottom: 0.125rem dashed #e75382;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.875rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .detail-address__table tr {
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 3.125rem;
  }
}

.detail-address__table th {
  color: #723d11;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.03125rem;
}
@media screen and (min-width: 768px) {
  .detail-address__table th {
    line-height: initial;
    vertical-align: top;
    width: 13.125rem;
  }
}

.detail-address__table td {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03125rem;
  padding-bottom: 1.875rem;
}
@media screen and (min-width: 768px) {
  .detail-address__table td {
    padding-bottom: 1.875rem;
  }
}

.flow-cards {
  margin: 0 auto;
  margin-top: 4.375rem;
  padding-left: 15%;
  padding-right: 15%;
}
@media screen and (min-width: 768px) {
  .flow-cards {
    display: flex;
    justify-content: center;
    margin-top: 6.25rem;
    padding-left: 8%;
    padding-right: 8%;
  }
}

.flow-cards li {
  align-items: center;
  background-color: white;
  border: 0.3125rem solid #c7e883;
  border-radius: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 18.75rem;
  position: relative;
  margin-bottom: 1.25rem;
}
@media (min-width: 450px) {
  .flow-cards li {
    height: 28.125rem;
  }
}
@media (min-width: 550px) {
  .flow-cards li {
    height: 31.25rem;
  }
}
@media (min-width: 700px) {
  .flow-cards li {
    height: 37.5rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-cards li {
    height: initial;
  }
}

.flow-cards li:nth-of-type(even) {
  background-color: initial;
  border: initial;
  border-radius: initial;
  height: initial;
  position: initial;
}

@media screen and (min-width: 768px) {
  .flow-cards li:nth-of-type(odd) {
    width: 15.625rem;
    height: 18.75rem;
  }
}

.flow-cards li:nth-of-type(even) .flow-cards__arrow {
  display: block;
  margin: 0 auto;
  width: 20%;
}
@media screen and (min-width: 768px) {
  .flow-cards li:nth-of-type(even) .flow-cards__arrow {
    transform: rotate(-90deg);
    width: 60%;
  }
}

.flow-cards li:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 40%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/flow-step1.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -10%;
  left: -15%;
  z-index: 10;
}

.flow-cards li:nth-of-type(1) .flow-cards__img {
  display: block;
  margin: 0 auto;
  width: 50%;
}

.flow-cards li:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 40%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/flow-step2.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -10%;
  left: -15%;
  z-index: 10;
}

.flow-cards li:nth-of-type(3) .flow-cards__img {
  display: block;
  margin: 0 auto;
  width: 40%;
}
@media screen and (min-width: 768px) {
  .flow-cards li:nth-of-type(3) .flow-cards__img {
    width: 50%;
  }
}

.flow-cards li:nth-of-type(5)::before {
  content: "";
  display: block;
  width: 40%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/flow-step3.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -10%;
  left: -15%;
  z-index: 10;
}

.flow-cards li:nth-of-type(5) .flow-cards__img {
  display: block;
  margin: 0 auto;
  width: 50%;
}
@media screen and (min-width: 768px) {
  .flow-cards li:nth-of-type(5) .flow-cards__img {
    width: 70%;
  }
}

.flow-cards li:nth-of-type(5) p {
  margin-top: 0.625rem;
}

.flow-cards li:nth-of-type(7)::before {
  content: "";
  display: block;
  width: 40%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/flow-step4.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -10%;
  left: -15%;
  z-index: 10;
}

.flow-cards li:nth-of-type(7) .flow-cards__img {
  display: block;
  margin: 0 auto;
  width: 70%;
}

.flow-cards li:nth-of-type(7) p {
  margin-top: 0rem;
}

.flow-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow-cards li p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 1.875rem;
}
@media (min-width: 500px) {
  .flow-cards li p {
    font-size: 1.25rem;
  }
}
@media (min-width: 600px) {
  .flow-cards li p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .flow-cards li p {
    font-size: 1rem;
    margin-top: 1.875rem;
  }
}

.flow-cards__arrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .contact-cards {
    display: flex;
    justify-content: center;
    padding-left: 10%;
    padding-right: 10%;
  }
}

.contact-cards li {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .contact-cards li:nth-of-type(1) {
    padding-top: 6.25rem;
  }
}

.contact-cards li:nth-of-type(2) {
  aspect-ratio: 1.179389313;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1.25rem;
  cursor: pointer;
  margin-top: 4.375rem;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .contact-cards li:nth-of-type(2) {
    aspect-ratio: 1.1764705882;
    display: initial;
    flex-direction: initial;
    margin-top: initial;
    padding-top: 6.25rem;
    text-align: center;
    width: 35%;
  }
}

.contact-cards h2 {
  width: 17.5rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contact-cards h2 {
    margin: initial;
    width: 32.5rem;
  }
}

.contact-cards h2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-cards .subtitle {
  color: white;
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .contact-cards .subtitle {
    font-size: 2rem;
    text-align: left;
  }
}

.contact-cards__text {
  color: white;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .contact-cards__text {
    font-size: 1.25rem;
  }
}

.contact-cards__img {
  margin: 0 auto;
  transition-duration: 0.4s;
  width: 30%;
}
@media screen and (min-width: 768px) {
  .contact-cards__img {
    margin: auto;
    width: 25%;
  }
}

.contact-cards__img:hover {
  transform: scale(1.1);
}

.contact-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-cards__mail {
  color: #723d11;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .contact-cards__mail {
    font-size: 1.25rem;
  }
}

.tracking {
  display: flex;
  padding-inline-start: initial;
  position: fixed;
  bottom: 0rem;
  right: 0rem;
  z-index: 50;
  transition: opacity 0.3s, transform 0.3s;
}
@media (min-width: 550px) {
  .tracking {
    max-width: 33.5625rem;
  }
}

.tracking-mail:hover,
.tracking-x:hover,
.tracking-top:hover {
  cursor: pointer;
  opacity: 1;
  transform: scale(1.1);
}

.tracking img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breadcrumb {
  background-color: #fff6d7;
  padding-top: 2.5rem;
  padding-left: 5%;
}
@media screen and (min-width: 768px) {
  .breadcrumb {
    padding-top: 3.75rem;
    padding-left: 5.5%;
  }
}

.breadcrumb-list {
  list-style: none;
  column-gap: 0.3125rem;
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .breadcrumb-list {
    font-size: 1rem;
  }
}

.breadcrumb a {
  text-decoration: none;
  color: #723d11;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: #723d11;
}

.breadcrumb-list li[aria-current=page] {
  color: #e75382;
  font-weight: bold;
  pointer-events: none;
}

.breadcrumb-list li[aria-current=page] :hover {
  text-decoration: underline;
  color: #e75382;
}

.introduction-sp {
  padding-top: 4.375rem;
}

.introduction-sp__wrapper {
  position: relative;
  z-index: 10;
}

.introduction-sp__wrapper-img {
  position: relative;
  width: 70%;
  z-index: 0;
}

.introduction-sp__wrapper-img:nth-of-type(1) {
  position: relative;
  margin-left: auto;
  z-index: 0;
}

.introduction-sp__wrapper-img:nth-of-type(1)::before {
  content: "";
  width: 80%;
  height: 18.75rem;
  background-image: url("/wp-content/themes/pep/img/concept-middle.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  top: 1.875rem;
  left: -6.25rem;
  z-index: -1;
}

.introduction-sp__wrapper-img:nth-of-type(2) {
  position: relative;
  margin-top: 3.125rem;
  z-index: 0;
}

.introduction-sp__wrapper-img:nth-of-type(2)::before {
  content: "";
  width: 80%;
  height: 15.625rem;
  background-image: url("/wp-content/themes/pep/img/concept-middle2.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 3.125rem;
  right: -60%;
  z-index: -1;
  display: block;
}
@media (min-width: 600px) {
  .introduction-sp__wrapper-img:nth-of-type(2)::before {
    right: -70%;
  }
}

.introduction-sp__wrapper-img:nth-of-type(2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 20;
}

.introduction-sp__text {
  margin-top: 2.8125rem;
  position: relative;
  z-index: 0;
}

.introduction-sp__text-middle {
  position: absolute;
  width: 60%;
  top: 1.25rem;
  right: 10%;
  display: block;
  z-index: 0;
}
@media (min-width: 600px) {
  .introduction-sp__text-middle {
    width: 40%;
  }
}

.introduction-sp__text-detail {
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  margin-top: 0.9375rem;
  position: relative;
  z-index: 10;
}

.introduction-sp__text-detail p {
  color: #72716f;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.6;
}

.introduction-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .introduction-pc {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 5.625rem;
    overflow: visible;
  }
}

@media screen and (min-width: 768px) {
  .introduction-pc__img {
    width: 27%;
  }
}

@media screen and (min-width: 768px) {
  .introduction-pc__img:first-of-type {
    transform: translateY(43%);
  }
}

@media screen and (min-width: 768px) {
  .introduction-pc__img:last-of-type {
    transform: translateY(-10%);
  }
}

.introduction-pc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .introduction-pc__text {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 31.25rem;
  }
}
@media screen and (min-width: 1440px) {
  .introduction-pc__text {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 35rem;
  }
}

@media screen and (min-width: 768px) {
  .introduction-pc__text-detail {
    margin-top: 1.875rem;
    position: relative;
    z-index: 0;
  }
}

@media screen and (min-width: 768px) {
  .introduction-pc__text-detail p {
    color: #72716f;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.6;
  }
}

.os-sp {
  margin: 0 auto;
  margin-top: 2.1875rem;
  padding-left: 2%;
  padding-right: 2%;
  text-align: center;
}
@media (min-width: 600px) {
  .os-sp {
    max-width: 31.25rem;
  }
}
@media screen and (min-width: 768px) {
  .os-sp {
    padding-left: 5.5%;
    padding-right: 5.5%;
  }
}

.os-sp h4 {
  background-color: #723d11;
  border-radius: 0.625rem;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4375rem;
  padding: 0.4375rem 1.5625rem;
}

.os-sp h4:nth-of-type(2) {
  margin-top: 3.125rem;
}

.os-sp li {
  background-color: white;
  border-radius: 1.875rem;
  margin-top: 2.1875rem;
  padding-top: 1.875rem;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  height: 34.5rem;
  text-align: left;
}

.os-sp__dec {
  position: absolute;
  width: 80%;
  top: 23%;
  left: -30%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec {
    display: none;
  }
}

.os-sp__dec2 {
  position: absolute;
  width: 60%;
  top: 34%;
  right: -10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec2 {
    display: none;
  }
}

.os-sp__dec3 {
  position: absolute;
  width: 50%;
  top: 49%;
  left: -5%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec3 {
    display: none;
  }
}

.os-sp__dec4 {
  position: absolute;
  width: 40%;
  top: 53%;
  left: 10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec4 {
    display: none;
  }
}

.os-sp__dec5 {
  position: absolute;
  width: 70%;
  top: 65%;
  right: -5%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec5 {
    display: none;
  }
}

.os-sp__dec6 {
  position: absolute;
  width: 70%;
  bottom: 5%;
  left: -10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-sp__dec6 {
    display: none;
  }
}

.os-sp li h5 {
  background-color: #e75382;
  border-radius: 2.5rem;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4375rem;
  padding: 0.4375rem 0.9375rem;
  margin: 0 auto;
  text-align: center;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1.25rem;
}

.os-sp li .subtitle3 {
  margin-left: 8%;
}

.os-sp__text {
  margin-top: 2.5rem;
}

.os-sp__text p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.os-sp__text p span {
  color: #e75382;
}

.os-sp__img1 {
  transform: rotate(-10deg);
  position: absolute;
  bottom: 0.625rem;
  right: 2%;
  width: 40%;
}

.os-sp__img2 {
  position: absolute;
  bottom: 0.9375rem;
  right: 2%;
  width: 40%;
}

.os-sp__img3 {
  position: absolute;
  bottom: 2.5rem;
  right: 4%;
  width: 30%;
}

.os-sp__img4 {
  transform: rotate(-14.34deg);
  position: absolute;
  bottom: 0.625rem;
  right: 2%;
  width: 40%;
}

.os-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .os-pc {
    display: block;
    position: relative;
    height: 66.25rem;
    margin: 0 auto;
    margin-top: 6.25rem;
    max-width: 73.75rem;
    box-sizing: border-box;
    z-index: 0;
  }
}
@media screen and (min-width: 1440px) {
  .os-pc {
    height: 66.25rem;
    max-width: 83.125rem;
  }
}

@media screen and (min-width: 768px) {
  .os-pc__dec {
    position: absolute;
    width: 40%;
    top: 10%;
    left: 5%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .os-pc__dec2 {
    position: absolute;
    width: 35%;
    top: -35%;
    right: 8%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .os-pc__dec3 {
    position: absolute;
    width: 40%;
    top: 48%;
    left: -10%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .os-pc__dec4 {
    position: absolute;
    width: 35%;
    bottom: -40%;
    right: -8%;
    display: block;
    z-index: -1;
  }
}

.os-pc__vertical,
.os-pc__horizontal {
  position: absolute;
}

.os-pc__vertical {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-left: 0.125rem dashed #e75382;
}

.os-pc__vertical::before {
  content: "";
  position: absolute;
  top: -8px;
  /* 軸より少し上 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #e75382;
  /* 三角の色 */
}

.os-pc__vertical::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* 軸の下に少しはみ出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #e75382;
  /* 三角の色 */
}

.os-pc__horizontal {
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-top: 0.125rem dashed #e75382;
}

.os-pc__horizontal::before {
  content: "";
  position: absolute;
  left: -8px;
  /* 横軸より少し左に出す */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #e75382;
  /* ←向き三角 */
}

.os-pc__horizontal::after {
  content: "";
  position: absolute;
  right: -8px;
  /* 横軸より少し右に出す */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #e75382;
  /* →向き三角 */
}

/* 第1象限（右上） */
@media screen and (min-width: 768px) {
  .os-pc__topright {
    top: 5%;
    left: 50%;
  }
}
@media screen and (min-width: 1440px) {
  .os-pc__topright {
    top: 0;
  }
}

/* 第2象限（左上） */
@media screen and (min-width: 768px) {
  .os-pc__topleft {
    top: 5%;
    left: 0%;
  }
}
@media screen and (min-width: 1440px) {
  .os-pc__topleft {
    top: 0;
  }
}

/* 第3象限（左下） */
@media screen and (min-width: 768px) {
  .os-pc__bottomrleft {
    top: 55%;
    left: 0%;
  }
}
@media screen and (min-width: 1440px) {
  .os-pc__bottomrleft {
    top: 50%;
  }
}

/* 第4象限（右下） */
@media screen and (min-width: 768px) {
  .os-pc__bottomright {
    top: 55%;
    left: 50%;
  }
}
@media screen and (min-width: 1440px) {
  .os-pc__bottomright {
    top: 50%;
  }
}

/* 各象限 */
@media screen and (min-width: 768px) {
  .quadrant {
    position: absolute;
    width: 50%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("/wp-content/themes/pep/img/os-cloud.png");
    background-size: contain;
    background-repeat: no-repeat;
    box-sizing: border-box;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .quadrant {
    align-items: flex-start;
  }
}
@media screen and (min-width: 1440px) {
  .quadrant {
    height: 45%;
  }
}

.quadrant h5 {
  background-color: #e75382;
  border-radius: 2.5rem;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4375rem;
  padding: 0.625rem 1.25rem;
  margin: 0 auto;
  margin-bottom: 0rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .quadrant .subtitle3 {
    margin-left: 23%;
  }
}

.quadrant .os-sp__b {
  color: #8ec321;
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  position: relative;
}

.quadrant .os-sp__b::before {
  content: "";
  background-color: #fbbf13;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -2.5rem;
  width: 1.875rem;
  height: 1.875rem;
}

@media screen and (min-width: 768px) {
  .quadrant .os-sp__text {
    margin-top: 0.625rem;
    max-width: 25rem;
    margin-left: 20%;
  }
}
@media screen and (min-width: 1440px) {
  .quadrant .os-sp__text {
    max-width: 28.125rem;
  }
}

.quadrant .os-sp__text p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.quadrant .os-sp__text p span {
  color: #e75382;
}

.quadrant .os-sp__img1 {
  transform: rotate(-10deg);
  position: absolute;
  bottom: -1.875rem;
  right: 10%;
  width: 30%;
}

.quadrant .os-sp__img2 {
  position: absolute;
  bottom: 1.25rem;
  right: 25%;
  width: 20%;
}

.quadrant .os-sp__img3 {
  position: absolute;
  bottom: -0.625rem;
  right: 15%;
  width: 20%;
}

.quadrant .os-sp__img4 {
  transform: rotate(-14.34deg);
  position: absolute;
  bottom: -0.625rem;
  right: 15%;
  width: 25%;
}

.navigation {
  background-color: #ffbfc5;
  border-radius: 1.25rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .navigation {
    height: 100%;
  }
}

.navigation ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 8%;
  padding-right: 8%;
}
@media (min-width: 474px) {
  .navigation ul {
    column-gap: 0.625rem;
  }
}
@media screen and (min-width: 768px) {
  .navigation ul {
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.navigation li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.25rem;
  transition-duration: 0.4s;
}
@media (min-width: 759px) {
  .navigation li {
    padding-bottom: initial;
  }
}

.navigation li:hover {
  transform: scale(1.1);
}

.navigation li p {
  color: white;
  font-size: 1rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .navigation li p {
    font-size: 1.25rem;
  }
}

.navigation li p::before {
  content: "＞";
  color: #ed80a3;
  font-family: "Arial Black", "Segoe UI Symbol", sans-serif;
  font-weight: 700;
  margin-right: 0.5em;
}

.nav {
  display: none;
}
@media screen and (min-width: 768px) {
  .nav {
    display: block;
    background-color: #ffbfc5;
    border-radius: 1.25rem;
    margin: 0 auto;
    height: 100%;
    width: 80%;
  }
}

@media screen and (min-width: 768px) {
  .nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.nav li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.25rem;
  transition-duration: 0.4s;
}
@media (min-width: 759px) {
  .nav li {
    padding-bottom: initial;
  }
}

.nav li:hover {
  transform: scale(1.1);
}

.nav li p {
  color: white;
  font-size: 1rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .nav li p {
    font-size: 1.25rem;
  }
}

.nav li p::before {
  content: "＞";
  color: #ed80a3;
  font-family: "Arial Black", "Segoe UI Symbol", sans-serif;
  font-weight: 700;
  margin-right: 0.5em;
}

.schedule-cards {
  margin-top: 4.0625rem;
}
@media screen and (min-width: 768px) {
  .schedule-cards {
    margin-top: 11.875rem;
  }
}

.schedule-cards li {
  position: relative;
  margin-bottom: 6.25rem;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .schedule-cards li {
    margin-bottom: 18.75rem;
  }
}

.schedule-cards li:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 50%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/concept-middle2.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 10%;
  right: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(1)::before {
    background-image: url("/wp-content/themes/pep/img/coursepc-bottom.png");
    top: 10%;
    right: 0%;
  }
}

.schedule-cards li:nth-of-type(1)::after {
  content: "";
  display: block;
  width: 30%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/os-top.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 13%;
  left: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(1)::after {
    display: none;
  }
}

.schedule-cards li:nth-of-type(2)::before {
  content: "";
  display: block;
  width: 70%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/schedulesp-left.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 10%;
  left: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(2)::before {
    background-image: url("/wp-content/themes/pep/img/feature-top.png");
    width: 50%;
    height: 90%;
    top: 0%;
    left: -25%;
  }
}

.schedule-cards li:nth-of-type(2)::after {
  content: "";
  display: block;
  width: 70%;
  height: 25%;
  background-image: url("/wp-content/themes/pep/img/reviewspc-top.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 40%;
  right: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(2)::after {
    display: none;
  }
}

.schedule-cards li:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 70%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/detailpc-right.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 20%;
  right: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(3)::before {
    background-image: url("/wp-content/themes/pep/img/schedulepc-bottom.png");
    width: 27%;
    height: 45%;
    top: -15%;
    right: 20%;
  }
}

.schedule-cards li:nth-of-type(3)::after {
  content: "";
  display: block;
  width: 30%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/detailpc-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 10%;
  left: -15%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(3)::after {
    background-image: url("/wp-content/themes/pep/img/feature-right.png");
    width: 50%;
    height: 80%;
    top: 25%;
    bottom: initial;
    left: -25%;
  }
}

.schedule-cards li:nth-of-type(4)::before {
  content: "";
  display: block;
  width: 75%;
  height: 40%;
  background-image: url("/wp-content/themes/pep/img/schedulesp-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(4)::before {
    background-image: url("/wp-content/themes/pep/img/coursepc-bottom.png");
    width: 40%;
    height: 80%;
    top: 5%;
    left: 20%;
  }
}

.schedule-cards li:nth-of-type(4)::after {
  content: "";
  display: block;
  width: 80%;
  height: 30%;
  background-image: url("/wp-content/themes/pep/img/schedulesp-bottom2.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -35%;
  left: -10%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(4)::after {
    display: none;
  }
}

.schedule-cards li:nth-of-type(4) iframe {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 3.125rem;
  width: 90%;
  aspect-ratio: 0.75;
}
@media screen and (min-width: 768px) {
  .schedule-cards li:nth-of-type(4) iframe {
    width: 50%;
    aspect-ratio: 1;
  }
}

.schedule-cards li picture {
  display: block;
  margin: 0 auto;
  margin-top: 3.125rem;
}
@media (min-width: 500px) {
  .schedule-cards li picture {
    width: 90%;
  }
}
@media screen and (min-width: 768px) {
  .schedule-cards li picture {
    width: 100%;
  }
}

.schedule-cards li picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eachcourse-sp {
  margin: 0 auto;
  margin-top: 4.0625rem;
}
@media screen and (min-width: 768px) {
  .eachcourse-sp {
    display: none;
  }
}

.eachcourse-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .eachcourse-pc {
    display: initial;
  }
}

.elementaly {
  margin: 0 auto;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .elementaly {
    margin-top: 12.5rem;
  }
}

.elementaly__dec {
  position: absolute;
  width: 50%;
  top: -1.875rem;
  left: 10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly__dec {
    display: none;
  }
}

.elementaly__dec2 {
  position: absolute;
  width: 40%;
  top: 18.75rem;
  right: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly__dec2 {
    display: none;
  }
}

.elementaly__dec3 {
  position: absolute;
  width: 60%;
  top: 28.125rem;
  right: 7%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly__dec3 {
    width: 35%;
    top: 18.75rem;
    right: 7%;
  }
}
@media screen and (min-width: 1440px) {
  .elementaly__dec3 {
    width: 35%;
    top: 20.625rem;
    right: 7%;
  }
}

.elementaly-sukiglish {
  margin-top: 2.5rem;
  padding-left: 4%;
  padding-right: 4%;
}
@media screen and (min-width: 768px) {
  .elementaly-sukiglish {
    margin-top: 5rem;
    padding-left: 16%;
    padding-right: 16%;
  }
}

.elementaly-sukiglish img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementaly-sukiglishtext {
  margin-top: 1.875rem;
  padding-left: 12%;
  padding-right: 12%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .elementaly-sukiglishtext {
    margin-top: 2.5rem;
  }
}

.elementaly-parents {
  margin-top: 3.4375rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .elementaly-parents {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 9.375rem;
  }
}

.elementaly-parents__dec {
  position: absolute;
  width: 30%;
  top: 11.25rem;
  left: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly-parents__dec {
    display: none;
  }
}

.elementaly-parents__dec2 {
  position: absolute;
  width: 70%;
  top: 50%;
  right: 5%;
  display: block;
  z-index: -1;
}
@media (min-width: 500px) {
  .elementaly-parents__dec2 {
    top: 60%;
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .elementaly-parents__dec2 {
    top: -20%;
    right: initial;
    left: 2%;
    width: 35%;
  }
}
@media screen and (min-width: 1440px) {
  .elementaly-parents__dec2 {
    top: -45%;
    right: initial;
    left: 2%;
  }
}

.elementaly-parents__dec3 {
  position: absolute;
  width: 45%;
  top: 98%;
  left: 0rem;
  display: block;
  z-index: -1;
}
@media (min-width: 500px) {
  .elementaly-parents__dec3 {
    top: 100%;
    width: 40%;
  }
}
@media screen and (min-width: 768px) {
  .elementaly-parents__dec3 {
    width: 20%;
    top: 45%;
    left: 0rem;
  }
}

.elementaly-parents .title3 {
  text-align: center;
  max-width: 20.625rem;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .elementaly-parents .title3 {
    margin-left: 0;
    max-width: 40.625rem;
    text-align: left;
    white-space: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .elementaly-parents .subtitle2 {
    margin-left: 0;
    margin-bottom: 1.875rem;
    text-align: left;
  }
}

.elementaly-parents__img {
  margin-top: 1.875rem;
  margin-right: 0;
  padding-left: 4%;
  position: relative;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .elementaly-parents__img {
    margin-top: 0.625rem;
    margin-left: auto;
    padding-left: 6%;
    display: block;
    max-height: 100%;
  }
}

.elementaly-parents__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0); /* 完全透明 */
}

.elementaly-parents img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 2000px) {
  .elementaly-parents img {
    object-fit: contain;
  }
}

.elementaly-parents__text {
  margin-top: 1.875rem;
  padding-left: 6%;
  padding-right: 6%;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .elementaly-parents__text {
    margin-top: initial;
    max-width: 45.625rem;
    padding-left: 8%;
    padding-right: initial;
  }
}

.elementaly-parents__text p:nth-of-type(5) {
  margin-top: 2.5rem;
  color: #e75382;
  font-size: 1.125rem;
  font-weight: 800;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .elementaly-parents__text p:nth-of-type(5) {
    margin-top: initial;
    color: #72716f;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .elementaly-parents__text p:nth-of-type(6) {
    margin-top: 2.5rem;
    color: #e75382;
    font-size: 1.0625rem;
    font-weight: 800;
    text-align: center;
  }
}

.elementaly-curriculum {
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .elementaly-curriculum {
    margin-top: 15.625rem;
  }
}

.elementaly-curriculum .title3 {
  max-width: 17.5rem;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .elementaly-curriculum .title3 {
    max-width: initial;
  }
}

.elementaly-cards {
  margin: 0 auto;
  margin-top: 3.75rem;
  padding-left: 4%;
  padding-right: 4%;
  z-index: 20;
  position: relative;
}
@media screen and (min-width: 768px) {
  .elementaly-cards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.elementaly-cards__dec {
  position: absolute;
  width: 55%;
  top: 5%;
  right: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly-cards__dec {
    display: none;
  }
}

.elementaly-cards__dec2 {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly-cards__dec2 {
    display: none;
  }
}

.elementaly-cards__dec3 {
  position: absolute;
  width: 50%;
  top: 62%;
  left: 10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .elementaly-cards__dec3 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .elementaly-cards__circle {
    width: 48%;
    height: 48%;
    aspect-ratio: 1;
    background-color: #fff6d7;
    border-radius: 50%;
    border: 0.5rem solid #f5a843;
    position: relative;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .elementaly-cards__circle .title3 {
    position: absolute;
    top: 40%;
    left: 10%;
    letter-spacing: 0rem;
  }
}

@media screen and (min-width: 768px) {
  .elementaly-cards__circle .subtitle2 {
    position: absolute;
    top: 47%;
    left: 15%;
  }
}

.elementaly-cards__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .elementaly-cards__list {
    gap: 0;
  }
}

.elementaly-cards__list:nth-of-type(4) .elementaly-curriculum__cards-img {
  width: 70%;
}

.elementaly-curriculum__cards-img {
  width: 70%;
  height: 70%;
  aspect-ratio: 1;
  position: relative;
  display: inline-block;
}

.elementaly-curriculum__cards-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0);
  /* 完全透明 */
}

.elementaly-curriculum__cards-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementaly-curriculum__cards-cloud {
  text-align: center;
  top: -0.625rem;
  width: 120%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("/wp-content/themes/pep/img/elementaly-cloud.png");
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  z-index: -1;
}

.elementaly-curriculum__cards-cloud-text {
  max-width: 11.25rem;
}

.elementaly-curriculum__cards-cloud-text3 {
  max-width: 9.375rem;
}

.elementaly-curriculum__cards-cloud b {
  color: #e75382;
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.3125rem;
}

.elementaly-curriculum__cards-cloud h5 {
  color: white;
  text-shadow: -1px -1px 0 #e75382, 1px -1px 0 #e75382, -1px 1px 0 #e75382, 1px 1px 0 #e75382;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  margin-top: -0.625rem;
}

.elementaly-curriculum__cards-cloud p {
  color: #723d11;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.elementaly-cards__line {
  width: 0.3125rem;
  height: 3.125rem;
  margin-left: 18%;
  background-color: #f5a843;
}

.junior {
  margin: 0 auto;
  margin-top: 6.25rem;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .junior {
    margin-top: 13.75rem;
  }
}

.junior__dec {
  position: absolute;
  width: 30%;
  top: -2%;
  left: 10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior__dec {
    width: 43%;
    top: -15%;
    left: -10%;
  }
}

.junior__dec2 {
  position: absolute;
  width: 65%;
  top: -4%;
  right: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior__dec2 {
    width: 40%;
    top: 0%;
    right: 2%;
  }
}

.junior .title3 {
  text-align: center;
  margin-top: 3.125rem;
  max-width: 19.6875rem;
}
@media screen and (min-width: 768px) {
  .junior .title3 {
    max-width: 48rem;
  }
}

.junior .subtitle2 {
  text-align: center;
  margin: 0 auto;
  margin-top: 0.625rem;
  max-width: 16.875rem;
}
@media screen and (min-width: 768px) {
  .junior .subtitle2 {
    max-width: 48rem;
  }
}

.junior-cards {
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .junior-cards {
    margin-top: 6.25rem;
    position: relative;
  }
}

.junior-cards li {
  margin-bottom: 4.375rem;
}
@media screen and (min-width: 768px) {
  .junior-cards li {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.junior-cards li:nth-of-type(odd) {
  position: relative;
}

.junior-cards li:nth-of-type(odd) .junior-cards__img {
  margin-right: auto;
  margin-left: 0;
}

.junior-cards li:nth-of-type(even) .junior-cards__dec {
  position: absolute;
  width: 60%;
  bottom: -40%;
  left: 5%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(even) .junior-cards__dec {
    width: 30%;
    bottom: -40%;
    left: 0%;
  }
}

.junior-cards li:nth-of-type(even) {
  position: relative;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(even) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.junior-cards li:nth-of-type(even) .junior-cards__img {
  margin-left: auto;
}

.junior-cards li:nth-of-type(even) .junior-cards__dec {
  position: absolute;
  width: 60%;
  top: -10%;
  left: 20%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(even) .junior-cards__dec {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) {
    justify-content: center;
    padding-left: 8%;
    padding-right: 8%;
    column-gap: 2%;
  }
}

.junior-cards li:nth-of-type(3) .junior-cards__img {
  margin: 0 auto;
  width: 70%;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) .junior-cards__img {
    width: initial;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) .subtitle3 {
    padding-left: 5rem;
  }
}
@media screen and (min-width: 1440px) {
  .junior-cards li:nth-of-type(3) .subtitle3 {
    padding-left: 6.25rem;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) .subtitle3::before {
    left: 3.125rem;
  }
}
@media screen and (min-width: 1440px) {
  .junior-cards li:nth-of-type(3) .subtitle3::before {
    left: 4.375rem;
  }
}

.junior-cards li:nth-of-type(3) .junior-cards__dec2 {
  position: absolute;
  width: 30%;
  bottom: -35%;
  left: 20%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) .junior-cards__dec2 {
    display: none;
  }
}

.junior-cards li:nth-of-type(3) .junior-cards__dec3 {
  position: absolute;
  width: 70%;
  bottom: -50%;
  right: -10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(3) .junior-cards__dec3 {
    width: 30%;
    bottom: 10%;
    right: initial;
    left: 3%;
  }
}

.junior-cards li:nth-of-type(4) .junior-cards__img {
  margin: 0 auto;
  width: 70%;
}

.junior-cards li:nth-of-type(4) .junior-cards__dec4 {
  position: absolute;
  width: 50%;
  top: 55%;
  left: 20%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .junior-cards li:nth-of-type(4) .junior-cards__dec4 {
    display: none;
  }
}

.junior-cards__img {
  display: block;
  width: 95%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .junior-cards__img {
    width: 100%;
  }
}

.junior-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.junior-cards li .subtitle3 {
  display: flex;
  padding-left: 1.875rem;
  margin-top: 2.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .junior-cards li .subtitle3 {
    font-size: 1.875rem;
    font-weight: 800;
    padding-left: 1.875rem;
    text-align: left;
  }
}
@media screen and (min-width: 1440px) {
  .junior-cards li .subtitle3 {
    padding-left: 1.875rem;
  }
}

.junior-cards li .subtitle3::before {
  content: "";
  background-color: #fbbf13;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.625rem;
  width: 1.125rem;
  height: 1.125rem;
}
@media screen and (min-width: 768px) {
  .junior-cards li .subtitle3::before {
    width: 1.875rem;
    height: 1.875rem;
    left: 0rem;
  }
}
@media screen and (min-width: 1440px) {
  .junior-cards li .subtitle3::before {
    left: 0rem;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards__dec {
    position: absolute;
    width: 33%;
    top: 10%;
    left: 10%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards__dec2 {
    position: absolute;
    width: 43%;
    top: 40%;
    right: 10%;
    display: block;
    z-index: -1;
  }
}

.junior-cards__text {
  margin-top: 1.875rem;
  padding-left: 5%;
  padding-right: 5%;
}
@media screen and (min-width: 768px) {
  .junior-cards__text {
    margin-top: initial;
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards__text .subtitle3 {
    display: flex;
    font-size: 1.875rem;
    font-weight: 800;
    margin-top: 2.5rem;
    text-align: left;
    white-space: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards__text .subtitle3::before {
    content: "";
    background-color: #fbbf13;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.625rem;
    width: 1.875rem;
    height: 1.875rem;
  }
}

@media screen and (min-width: 768px) {
  .junior-cards__text p {
    margin-top: 1.875rem;
  }
}

.junior-cards__bottom {
  min-width: 50%;
  margin: 0 auto;
}

.junior-cards__bottom-img {
  width: 80%;
  margin: 0 auto;
  margin-top: 1.875rem;
}

.junior-cards__bottom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.high {
  margin: 0 auto;
  margin-top: 6.25rem;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .high {
    margin-top: 20.625rem;
  }
}

.high__dec {
  position: absolute;
  width: 50%;
  top: -20%;
  left: 4%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .high__dec {
    width: 18%;
    top: -13%;
    left: initial;
    right: 28%;
  }
}

.high__dec2 {
  position: absolute;
  width: 50%;
  top: 22%;
  right: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .high__dec2 {
    width: 40%;
    top: -30%;
    right: -5%;
  }
}

.high__dec3 {
  position: absolute;
  width: 55%;
  top: 70%;
  left: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .high__dec3 {
    width: 38%;
    top: initial;
    bottom: 0%;
    left: 0rem;
  }
}

.high .title3 {
  text-align: center;
  margin-top: 3.125rem;
  max-width: 15.3125rem;
}
@media screen and (min-width: 768px) {
  .high .title3 {
    max-width: 39rem;
    white-space: nowrap;
  }
}

.high .subtitle2 {
  text-align: center;
  margin: 0 auto;
  margin-top: 0.625rem;
  max-width: 12.5rem;
}
@media screen and (min-width: 768px) {
  .high .subtitle2 {
    max-width: 39rem;
    white-space: nowrap;
  }
}

.high-cards {
  margin-top: 2.1875rem;
}
@media screen and (min-width: 768px) {
  .high-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 6.25rem;
  }
}

.high-cards__img {
  display: block;
  margin-right: auto;
  width: 95%;
  position: relative;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .high-cards__img {
    width: 120%;
  }
}

.high-cards__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0);
  /* 完全透明 */
}

.high-cards__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.high-cards__text {
  margin-top: 1.5625rem;
  padding-left: 5%;
  padding-right: 5%;
}
@media screen and (min-width: 768px) {
  .high-cards__text {
    margin-top: initial;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media screen and (min-width: 768px) {
  .high-cards__text p:nth-of-type(2) {
    margin-top: 1.875rem;
  }
}

.test {
  margin-top: 156.25rem;
  background-color: plum;
  font-size: 1rem;
  color: red;
}
@media screen and (min-width: 768px) {
  .test {
    font-size: 3.125rem;
    color: green;
  }
}

.fv {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 3.75rem;
}
@media screen and (min-width: 768px) {
  .fv {
    padding-top: 6.25rem;
  }
}

.fv-wrapper {
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .fv-wrapper {
    margin-left: auto;
    width: 60%;
  }
}

.fv-wrapper picture {
  position: relative;
  display: inline-block;
}

.fv-wrapper picture::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0); /* 完全透明 */
}

.fv-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-decwrapper {
  position: relative;
}
.fv-decwrapper__left {
  position: absolute;
  z-index: 30;
  width: 30%;
  margin-top: -20%;
  left: 0rem;
}
@media screen and (min-width: 768px) {
  .fv-decwrapper__left {
    width: 15%;
    margin-top: -47%;
    left: initial;
    margin-left: -3%;
  }
}

.fv-decwrapper__left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-decwrapper__middle {
  position: absolute;
  z-index: 20;
  width: 90%;
  margin-top: -30%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .fv-decwrapper__middle {
    width: 44%;
    margin-top: -50%;
    left: initial;
    transform: initial;
    margin-left: -5%;
  }
}

.fv-decwrapper__middle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-decwrapper__right {
  position: absolute;
  z-index: 30;
  width: 40%;
  margin-top: 20%;
  right: 0rem;
}
@media screen and (min-width: 768px) {
  .fv-decwrapper__right {
    width: 19%;
    margin-top: -25%;
    right: initial;
    margin-left: 22%;
  }
}

.fv-decwrapper__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-decwrapper p {
  color: white;
  display: inline-block;
  font-family: "Zen Maru Gothic", serif;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  top: 0rem;
  position: absolute;
  width: 100%;
  z-index: 40;
}
@media (min-width: 450px) {
  .fv-decwrapper p {
    font-size: 2.5rem;
    top: 0rem;
  }
}
@media (min-width: 550px) {
  .fv-decwrapper p {
    font-size: 2.5rem;
    top: 0rem;
  }
}
@media (min-width: 600px) {
  .fv-decwrapper p {
    font-size: 2.8125rem;
    top: 0rem;
  }
}
@media screen and (min-width: 768px) {
  .fv-decwrapper p {
    font-size: 3.125rem;
    margin-top: -35%;
    margin-left: -33%;
  }
}
@media screen and (min-width: 1024px) {
  .fv-decwrapper p {
    font-size: 3.125rem;
    margin-top: -35%;
    margin-left: -33%;
  }
}
@media screen and (min-width: 1440px) {
  .fv-decwrapper p {
    font-size: 3.125rem;
    margin-top: -35%;
    margin-left: -33%;
  }
}
@media (min-width: 1800px) and (max-width: 2000px) {
  .fv-decwrapper p {
    font-size: 3.125rem;
    margin-top: -35%;
    margin-left: -33%;
  }
}

.concept {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 15.625rem;
}
@media (min-width: 500px) {
  .concept {
    padding-top: 18.75rem;
  }
}
@media (min-width: 600px) {
  .concept {
    padding-top: 21.875rem;
  }
}
@media (min-width: 700px) {
  .concept {
    padding-top: 25rem;
  }
}
@media screen and (min-width: 768px) {
  .concept {
    padding-top: 6.25rem;
  }
}

.feature {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .feature {
    padding-top: 4.375rem;
  }
}

.feature-wrapper {
  position: relative;
  z-index: 0;
}

.feature-wrapper__dec {
  position: absolute;
  width: 55%;
  top: -3.75rem;
  left: 30%;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .feature-wrapper__dec {
    display: none;
  }
}

.feature-wrapper__dec2 {
  position: absolute;
  width: 50%;
  top: 58%;
  right: 0;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .feature-wrapper__dec2 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .feature-wrapper__dec3 {
    position: absolute;
    width: 35%;
    left: 10%;
    display: block;
    z-index: 0;
  }
}

@media screen and (min-width: 768px) {
  .feature-wrapper__dec4 {
    position: absolute;
    width: 37%;
    bottom: 0rem;
    left: -8%;
    display: block;
    z-index: 0;
  }
}

.feature-wrapper h3, p {
  position: relative;
  z-index: 20;
}

.feature-wrapper .button {
  background-color: #8ec321;
  color: white;
  padding: 1.25rem 10%;
  margin-top: 2.1875rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .feature-wrapper .button {
    padding: 1.25rem 3%;
    margin-top: 3.125rem;
  }
}

.feature-wrapper .button p {
  font-size: 1.25rem;
  letter-spacing: 0.3125rem;
}

.feature-wrapper .button-wrapper {
  background-color: white;
}

.feature-wrapper .button-wrapper__arrow {
  border-left: 0.6em solid #8ec321;
}

.course {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 5rem;
  padding-bottom: 5%;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .course {
    padding-top: 8.75rem;
  }
}

.course-wrapper {
  position: relative;
  z-index: 0;
}

.course-wrapper__dec {
  position: absolute;
  width: 30%;
  top: 0;
  left: 10%;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .course-wrapper__dec {
    display: none;
  }
}

.course-wrapper__dec2 {
  position: absolute;
  width: 65%;
  top: -1.875rem;
  right: 0;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .course-wrapper__dec2 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .course-wrapper__dec3 {
    position: absolute;
    width: 30%;
    right: 0;
    display: block;
    z-index: -1;
    top: -5rem;
  }
}

@media screen and (min-width: 768px) {
  .course-wrapper__dec4 {
    position: absolute;
    width: 45%;
    left: -10%;
    display: block;
    z-index: -1;
    top: 28.125rem;
  }
}

.course-wrapper__dec5 {
  position: absolute;
  width: 30%;
  top: 67%;
  left: 20%;
  display: block;
  z-index: -1;
}
@media (min-width: 400px) {
  .course-wrapper__dec5 {
    top: 66%;
  }
}
@media (min-width: 580px) {
  .course-wrapper__dec5 {
    top: 64%;
  }
}
@media (min-width: 600px) {
  .course-wrapper__dec5 {
    top: 64%;
  }
}
@media screen and (min-width: 768px) {
  .course-wrapper__dec5 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .course-wrapper__dec6 {
    position: absolute;
    width: 35%;
    right: 5%;
    display: block;
    z-index: -1;
    top: 55%;
  }
}
@media screen and (min-width: 1440px) {
  .course-wrapper__dec6 {
    top: 52%;
  }
}

.course-wrapper__dec7 {
  position: absolute;
  width: 45%;
  left: 15%;
  display: block;
  z-index: -1;
  bottom: -8%;
}
@media (min-width: 600px) {
  .course-wrapper__dec7 {
    bottom: -10%;
  }
}
@media screen and (min-width: 768px) {
  .course-wrapper__dec7 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .course-wrapper__dec8 {
    position: absolute;
    width: 30%;
    left: 10%;
    display: block;
    z-index: -1;
    bottom: -12.5rem;
  }
}

.course-wrapper__dec img,
.course-wrapper__dec2 img,
.course-wrapper__dec3 img,
.course-wrapper__dec4 img,
.course-wrapper__dec5 img,
.course-wrapper__dec6 img,
.course-wrapper__dec7 img,
.course-wrapper__dec8 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 3.75rem;
  padding-bottom: 9.375rem;
  text-align: center;
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .reviews {
    padding-top: 3.125rem;
  }
}

.reviews-wrapper {
  position: relative;
  z-index: 0;
}

.reviews-wrapper__dec {
  position: absolute;
  width: 50%;
  top: -3.125rem;
  left: 0rem;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .reviews-wrapper__dec {
    display: none;
  }
}

.reviews-wrapper__dec2 {
  position: absolute;
  width: 65%;
  bottom: -6.25rem;
  right: 0;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .reviews-wrapper__dec2 {
    display: none;
  }
}

.reviews-wrapper__dec3 {
  position: absolute;
  width: 50%;
  bottom: -15.625rem;
  left: 0;
  display: block;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .reviews-wrapper__dec3 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .reviews-wrapper__dec4 {
    position: absolute;
    width: 40%;
    right: 10%;
    display: block;
    z-index: 0;
    top: -5rem;
  }
}

@media screen and (min-width: 768px) {
  .reviews-wrapper__dec5 {
    position: absolute;
    width: 30%;
    left: 0;
    display: block;
    z-index: 0;
    bottom: -9.375rem;
  }
}

.reviews-wrapper__dec img,
.reviews-wrapper__dec2 img,
.reviews-wrapper__dec3 img,
.reviews-wrapper__dec4 img .reviews-wrapper__dec5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews-wrapper__slider-button {
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .reviews-wrapper__slider-button {
    width: 10%;
  }
}

.reviews-wrapper__slider-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail {
  background-color: #fff6d7;
  width: 100%;
  height: 100%;
  padding-top: 7.5rem;
  padding-bottom: 3.125rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .detail {
    padding-top: 11.25rem;
    padding-bottom: 9.375rem;
  }
}

.detail-wrapper {
  position: relative;
  z-index: 0;
}

@media screen and (min-width: 768px) {
  .detail-wrapper__dec {
    position: absolute;
    width: 20%;
    top: 9.375rem;
    right: 25%;
    display: block;
    z-index: 0;
  }
}

@media screen and (min-width: 768px) {
  .detail-wrapper__dec2 {
    position: absolute;
    width: 35%;
    top: 3.125rem;
    right: 0;
    display: block;
    z-index: 0;
  }
}

.flow {
  background-color: #fff6d7;
  background-image: url("/wp-content/themes/pep/img/flowsp-back.png");
  background-size: cover;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  padding-top: 6.25rem;
  padding-bottom: 5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .flow {
    background-image: url("/wp-content/themes/pep/img/flowpc-back.png");
    padding-top: 12.5rem;
    padding-bottom: 5rem;
  }
}

.flow .title {
  color: #f2ffe0;
}

.contact {
  background-color: rgb(142, 195, 33);
  background-image: url("/wp-content/themes/pep/img/contact-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 4.375rem;
  padding-bottom: 6.875rem;
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .contact {
    padding-bottom: 5.625rem;
  }
}

.mv {
  padding-top: 5.625rem;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  z-index: 0;
  background-color: #fff6d7;
}
@media screen and (min-width: 768px) {
  .mv {
    padding-top: 8.75rem;
    padding-left: 5.5%;
    padding-right: 5.5%;
  }
}

.mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv h2 {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1875rem;
  position: absolute;
  top: 60%;
  left: 10%;
}
@media screen and (min-width: 768px) {
  .mv h2 {
    font-size: 2.375rem;
    top: 60%;
    left: 11%;
  }
}

.mv__dec {
  position: absolute;
  width: 20%;
  top: 4.0625rem;
  left: 0rem;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .mv__dec {
    display: none;
  }
}

.mv__dec2 {
  position: absolute;
  width: 50%;
  bottom: -8.125rem;
  right: 0;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .mv__dec2 {
    width: 35%;
    bottom: -16.875rem;
    right: -7%;
  }
}

@media screen and (min-width: 768px) {
  .mv__dec3 {
    position: absolute;
    display: block;
    z-index: -1;
    width: 23%;
    top: 12.5rem;
    left: 0rem;
    pointer-events: none;
  }
}

.introduction {
  background-color: #fff6d7;
  padding-top: 2.1875rem;
}
@media screen and (min-width: 768px) {
  .introduction {
    padding-top: 7.5rem;
  }
}

.os {
  padding-top: 5.625rem;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 3.125rem;
  background-color: #fff6d7;
}
@media screen and (min-width: 768px) {
  .os {
    padding-top: 14.375rem;
    padding-left: initial;
    padding-right: initial;
    padding-bottom: 11.25rem;
  }
}

.os-wrapper {
  position: relative;
  z-index: 0;
}

.os-wrapper__dec {
  position: absolute;
  width: 30%;
  top: 0rem;
  left: -10%;
  display: block;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .os-wrapper__dec {
    display: none;
  }
}

.os-wrapper .title3 {
  white-space: nowrap;
}

.schedule {
  padding-top: 3.75rem;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 3.125rem;
  background-color: #fff6d7;
}
@media (min-width: 600px) {
  .schedule {
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media screen and (min-width: 768px) {
  .schedule {
    padding-left: 11%;
    padding-right: 11%;
  }
}

.schedule-wrapper {
  position: relative;
  z-index: 20;
}

.schedule-wrapper::before {
  content: "";
  display: block;
  width: 60%;
  height: 7%;
  background-image: url("/wp-content/themes/pep/img/coursepc-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 4%;
  left: 1%;
  z-index: -1;
}
@media (min-width: 450px) {
  .schedule-wrapper::before {
    top: 2%;
  }
}
@media screen and (min-width: 768px) {
  .schedule-wrapper::before {
    display: none;
  }
}

.schedule-wrapper__dec {
  position: absolute;
  width: 60%;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: -1;
}
@media (min-width: 450px) {
  .schedule-wrapper__dec {
    top: 29%;
  }
}
@media screen and (min-width: 768px) {
  .schedule-wrapper__dec {
    display: none;
  }
}

.schedule-wrapper__dec2 {
  position: absolute;
  width: 60%;
  top: 56%;
  left: 5%;
  display: block;
  z-index: -1;
}
@media (min-width: 450px) {
  .schedule-wrapper__dec2 {
    top: 55%;
  }
}
@media screen and (min-width: 768px) {
  .schedule-wrapper__dec2 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .schedule-wrapper__dec3 {
    position: absolute;
    width: 45%;
    top: 27%;
    left: 0%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .schedule-wrapper__dec4 {
    position: absolute;
    width: 40%;
    top: 48%;
    right: -15%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .schedule-wrapper__dec5 {
    position: absolute;
    width: 50%;
    top: 70%;
    right: -10%;
    display: block;
    z-index: -1;
  }
}

@media screen and (min-width: 768px) {
  .schedule-wrapper__dec6 {
    position: absolute;
    width: 50%;
    bottom: -10%;
    right: 15%;
    display: block;
    z-index: -1;
  }
}

.schedule-wrapper h2 {
  white-space: nowrap;
}

.schedule-wrapper__text {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.625rem;
  margin-bottom: 5.3125rem;
}
@media screen and (min-width: 768px) {
  .schedule-wrapper__text {
    margin-top: 3.125rem;
    margin-bottom: 5rem;
  }
}

.schedule .navigation ul li:nth-of-type(3) {
  padding-bottom: initial;
}
@media (min-width: 503px) {
  .schedule .navigation ul li:nth-of-type(3) {
    padding-bottom: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .schedule .navigation ul li:nth-of-type(3) {
    padding-bottom: initial;
  }
}

.schedule .navigation ul li:nth-of-type(4) {
  padding-bottom: initial;
}

.eachcourse {
  background-color: #fff6d7;
  margin: 0 auto;
  padding-top: 3.125rem;
  padding-bottom: 6.25rem;
}
@media screen and (min-width: 768px) {
  .eachcourse {
    padding-top: 3.75rem;
    padding-left: initial;
    padding-right: initial;
    padding-bottom: 10.625rem;
  }
}

.eachcourse-wrapper .navigation {
  margin-left: 5%;
  margin-right: 5%;
  position: relative;
}
@media (min-width: 503px) {
  .eachcourse-wrapper .navigation ul li {
    padding-bottom: initial;
  }
}

.eachcourse-wrapper .navigation ul li:nth-of-type(3),
.eachcourse-wrapper .nav ul li:nth-of-type(3) {
  padding-bottom: initial;
}

.eachcourse-wrapper .nav {
  position: relative;
}
.u-desktop {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-desktop {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .u-mobile {
    display: none;
  }
}

.title {
  color: #fff6d7;
  text-shadow: -1px -1px 0 #8ec321, 1px -1px 0 #8ec321, -1px 1px 0 #8ec321, 1px 1px 0 #8ec321;
  /* 縁の色を指定 */
  font-size: 3.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .title {
    font-size: 5rem;
  }
}

.subtitle {
  color: #f2ae52;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1875rem;
  margin-top: -0.625rem;
}
@media screen and (min-width: 768px) {
  .subtitle {
    font-size: 1.25rem;
    letter-spacing: initial;
    margin-top: -0.3125rem;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2.5rem;
  transition-duration: 0.4s;
}

.button:hover {
  transform: scale(1.1);
}

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
}

.button-wrapper__arrow {
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
}

.course-button {
  background-color: white;
  padding: 0.9375rem 7%;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .course-button {
    display: none;
  }
}

.course-button p {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3125rem;
}

.course-button__wrapper-arrow {
  border-left: 0.6em solid white;
}

.elementary-button p {
  color: #ffdd78;
}

.junior-button p {
  color: #ffbfc5;
}

.high-button p {
  color: #c7e883;
}

.elementary-button .course-button__wrapper {
  background-color: #ffdd78;
}

.junior-button .course-button__wrapper {
  background-color: #ffbfc5;
}

.high-button .course-button__wrapper {
  background-color: #c7e883;
}

@media screen and (min-width: 768px) {
  .course-btn {
    background-color: white;
    padding: 1.25rem 3%;
    margin-top: 3.125rem;
  }
}

@media screen and (min-width: 768px) {
  .course-btn p {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3125rem;
  }
}

@media screen and (min-width: 768px) {
  .course-btn__wrapper-arrow {
    border-left: 0.6em solid white;
  }
}

.elementary-button p {
  color: #ffdd78;
}

.junior-button p {
  color: #ffbfc5;
}

.high-button p {
  color: #c7e883;
}

.elementary-button .course-btn__wrapper {
  background-color: #ffdd78;
}

.junior-button .course-btn__wrapper {
  background-color: #ffbfc5;
}

.high-button .course-btn__wrapper {
  background-color: #c7e883;
}

.fukidashi {
  align-items: center;
  background: #FFF;
  border-radius: 2.5rem;
  box-sizing: border-box;
  color: #555;
  display: flex;
  font-size: 1rem;
  font-weight: 500;
  justify-content: center;
  line-height: 1.6;
  overflow: visible;
  padding: 0rem 1.25rem;
  position: relative;
  z-index: 0;
  text-align: left;
  height: 22.75rem;
  width: 20.5625rem;
}

.fukidashi::before {
  content: "";
  position: absolute;
  bottom: -1.375rem;
  right: 10%;
  transform: translateY(-2px);
  border: 0.625rem solid transparent;
  z-index: 3;
}
.balloon2 p {
  margin: 0;
  padding: 0;
}

.title2 {
  width: 21.875rem;
  height: 4.6875rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/wp-content/themes/pep/img/titlesp-tape.png");
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .title2 {
    width: 43.75rem;
    height: 7.5rem;
    font-size: 1.75rem;
  }
}

.title3 {
  border-bottom: 0.125rem dashed #fbbf13;
  color: #8ec321;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.125rem;
  line-height: 1.6;
  max-width: 12.5rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .title3 {
    font-size: 1.875rem;
    max-width: 20.4375rem;
  }
}

.subtitle2 {
  color: #fbbf13;
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .subtitle2 {
    font-size: 1.25rem;
  }
}

.subtitle3 {
  color: #8ec321;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  position: relative;
}

.subtitle3::before {
  content: "";
  background-color: #fbbf13;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -1.25rem;
  width: 1.125rem;
  height: 1.125rem;
}