@charset "UTF-8";
.course-page {
  --space-4xs: 2px;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 128px;

  --font-2xs: 12px;
  --font-xs: 14px;
  --font-s: 16px;
  --font-m: 18px;
  --font-l: 20px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-3xl: 38px;
  --font-4xl: 44px;

  font-family: 'Noto sans';
  font-size: var(--font-xs);
  line-height: 1.5;
}

@media (min-width: 800px) {
  .course-page {
    --font-l: 24px;
    --font-xl: 32px;
    --font-2xl: 40px;
    --font-3xl: 48px;
    --font-4xl: 56px;

    font-size: var(--font-s);
  }
}

.course-page__section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  padding-left: 18px;
  padding-right: 18px;
}

.course-page__container {
  max-width: 1138px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .course-page__section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}

/* Utilities */
@media (min-width: 800px) {
  .course-page .hidden-pc {
    display: none !important;
  }
}

@media (max-width: 799px) {
  .course-page .hidden-sp {
    display: none !important;
  }
}
/* END: Utilities */

/* Typo */
.course-page h2,
.course-page .h2 {
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 1.4;
}

.course-page h3,
.course-page .h3 {
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 1.4;
}

.course-page strong {
  font-weight: 700;
}
/* END: Typo */


/* Common */
.course-page__section-header {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.course-page__section-title {
  color: #B8D200;
}

.course-page__section-subtitle {
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 800px) {
  .course-page__section-header {
    gap: var(--space-m);
  }

  .course-page__section-subtitle {
    font-size: 24px;
  }
}
/* END: Common */


/* Hero */
.as-hero {
  background-image: url('/wp-content/themes/tokyois/images/course/pattern-1.png');
  background-position: center;
  background-size: 6px;
}

.as-hero__inner {
}

.as-hero__image {
  display: block;
  margin-bottom: 18px;
}

.as-hero__image img {
  border-radius: 18px;
}

.as-hero__content {
  margin-bottom: 10px;
}

.as-hero__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.as-hero__badge {
  min-width: 109px;
  padding: var(--space-2xs) var(--space-s);
  background-color: #FABE00;
  border-radius: 50px;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.as-hero__plus {
  font-size: var(--font-m);
  font-weight: 700;
}

.as-hero__title {
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #B8D200;
}

.as-hero__title-highlight {
}

.as-hero__tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.as-hero__tag {
  padding: 5px 8px;
  background-color: #ffffff;
  border: 1px solid #B8D200;
  border-radius: 50px;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #B8D200;
}

/* Desktop and above */
@media (min-width: 800px) {
  .as-hero {
  }
  
  .as-hero__inner {
    position: relative;
  }
  
  .as-hero__image {
    margin-bottom: 0;
  }
  
  .as-hero__image img {
  }
  
  .as-hero__content {
    position: absolute;
    bottom: 60px;
    right: 152px;
    margin-bottom: 0;
  }
  
  .as-hero__badges {
    justify-content: flex-start;
    margin-bottom: 28px;
  }
  
  .as-hero__badge {
    min-width: 141px;
    font-size: var(--font-l);
  }
  
  .as-hero__plus {
    margin-top: -7px;
    font-size: 56px;
    color: #ffffff;
    line-height: 1;
  }
  
  .as-hero__title {
    font-size: 56px;
    line-height: 1.2;
    text-align: left;
    color: #ffffff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  .as-hero__title-highlight {
    color: #FABE00;
  }

  .as-hero__tags {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  
  .as-hero__tag {
    min-width: 236px;
    padding: var(--space-2xs) var(--space-s);
    background-color: #B8D200;
    border-color: #ffffff;
    font-size: var(--font-l);
    color: #ffffff;
  }
}

/* END: Hero */



/* About */
.as-about {
  background-image: url('/wp-content/themes/tokyois/images/course/pattern-1.png');
  background-position: center;
  background-size: 6px;
}

.as-about__inner {
}

.as-about__image {
  margin-bottom: 18px;
}

.as-about__image img {
  border-radius: 18px;
}

.as-about__content {

}

.as-about__title {
  
}

.as-about__subtitle {
}

.as-about__text {
  text-align: left;
}

@media (min-width: 800px) {
  .as-about {
    
  }

  .as-about__inner {
  }

  .as-about__image {
    margin-bottom: 50px;
  }

  .as-about__image img {
    aspect-ratio: 1138 / 601;
    width: 100%;
  }

  .as-about__text {
    text-align: center;
  }
}
/* END: About*/


/* Features */
.as-features {
  background-color: #F5F5F5;
}

.as-features__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.as-features__header {
  text-align: center;
}

.as-features__header h3 {
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.5;
}

.as-features__title {
  color: #B8D200;
}

.as-features__subtitle {}


.as-feature {
  max-width: 850px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.as-feature--01 {}
.as-feature--02 {}
.as-feature--03 {}
.as-feature--04 {}
.as-feature--05 {}

.as-feature__header {
  background-color: #B8D200;
  padding: 16.5px;
  text-align: center;
  color: #ffffff;
}

.as-feature__label {}

.as-feature__detail {
  padding: 20px 12px 16px;
}

.as-feature__body {
  display: flex;
  flex-direction: column;
}

.as-feature__content {}

.as-feature__title {
  margin-bottom: 18px;
  padding: var(--space-3xs);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #B8D200;
}

.as-feature__highlight {
  color: #B8D200;
}

.as-feature__text {
  font-size: 14px;
}

.as-feature__footer {
  margin-top: var(--space-l);
}

.as-feature__subhead {
  margin-bottom: var(--space-s);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.4;
  color: #5D5B50;
}

.as-feature__list {
  display: flex;
  gap: 24px;
  flex-direction: column;
}

.as-feature__list-item {}

.as-feature__list-item-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px;
  margin-bottom: 12px;
}

.as-feature__list-item-icon {
  width: 52px;
  height: auto;
}
.as-feature__list-item-title {
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.5;
  color: #B8D200;
}

.as-feature__image {
  margin-bottom: var(--space-s);
}

.as-feature__image img {
  border-radius: 8px;
}



.as-feature__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: 20px;
  padding: var(--space-s);
  border: 1px solid #B8D200;
  border-radius: 10px;
}

.as-feature__note-icon {
  width: 84px;
  height: auto;
}

.as-feature__note-text {
  font-size: 14px;
}


@media (min-width: 800px) {
  .as-features {}

  .as-features__inner {
    gap: 50px;
  }

  .as-features__header {
  }

  .as-features__title {}
  .as-features__subtitle {}

  .as-feature {
    box-shadow: none;
  }

  .as-feature__header {}
  .as-feature__label {}

  .as-feature__detail {
    padding: 56px;
  }

  .as-feature__body {
    flex-direction: row-reverse;
    gap: 32px;
  }

  .as-feature__content {
    width: calc(45% - 16px);
  }

  .as-feature__title {
    margin-bottom: 24px;
    padding: 0;
    font-size: 30px;
    color: initial;
  }

  .as-feature__text {
    position: relative;
    z-index: 1;
    padding: 22px 0;
  }

  .as-feature__text::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: -56px;
    width: 100vw;
    height: 100%;
    background-color: #B8D20026;
  }

  .as-feature__image {
    position: relative;
    z-index: 2;
    width: calc(55% - 16px);
  }

  .as-feature__footer {
    margin-top: var(--space-l);
  }

  .as-feature__subhead {
    margin-bottom: 18px;
    font-size: var(--font-m);
  }

  .as-feature__list {
    flex-direction: row;
  }

  .as-feature__list-item-header {

  }

  .as-feature__list-item {}
  .as-feature__list-item-header {

  }
  .as-feature__list-item-icon {

  }

  .as-feature__list-item-title {}

  .as-feature__note {
    flex-direction: row;
    gap: 40px;
    align-items: center;
  }
}
/* END: Features */


/* Why */
.as-why {}
.as-why__inner {}
.as-why__header {}
.as-why__title {}
.as-why__subtitle {}

.as-why__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
}

.as-why__item {
  flex: 1;
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.as-why__image img {
  width: 100%;
  aspect-ratio: 344 / 220;
  object-fit: cover;
}

.as-why__content {
  padding: var(--space-s);
  text-align: center;
}

.as-why__text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #B8D200;
}

.as-why__note {
  font-size: var(--font-2xs);
}

@media (min-width: 800px) {
  .as-why {}
  .as-why__inner {}
  .as-why__header {}
  .as-why__title {}
  .as-why__subtitle {}

  .as-why__items {
    flex-direction: row;
    justify-content: center;
    margin-top: 40px;
  }

  .as-why__item {
    margin: 0 10px;
  }

  .as-why__image {}
  .as-why__content {}
  .as-why__text {}
  .as-why__note {}
}
/* END: Why */


/* Parent's Voice */
.as-parents-voice {
  background-color: #F5F5F5;
}
.as-parents-voice__inner {}
.as-parents-voice__title-en {}
.as-parents-voice__title-jp {}

.as-parents-voice__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 850px;
  margin: 18px auto 0;
}

.as-parents-voice__item {
  width: 100%;
}

.as-parents-voice__toggle {
  position: relative;
  display: flex;
  gap: 14px;
  width: 100%;
  padding: var(--space-xs) 50px var(--space-xs) var(--space-xs);
  border: 1px solid #CCCCCC;
  border-radius: 8px;
  background-color: #F5F5F5;
  text-align: left;
  cursor: pointer;
}

.as-parents-voice__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0702 15.5744C12.1763 15.5744 12.278 15.5323 12.353 15.4573L18.7169 9.09336C18.9513 8.85905 19.3312 8.85905 19.5655 9.09336C19.7998 9.32768 19.7998 9.70758 19.5655 9.94189L13.2015 16.3059L13.2014 16.306C12.9014 16.6059 12.4945 16.7744 12.0702 16.7744C11.6459 16.7744 11.2391 16.6059 10.939 16.306L10.9389 16.3059L4.57495 9.94189C4.34063 9.70758 4.34063 9.32768 4.57495 9.09336C4.80926 8.85905 5.18916 8.85905 5.42347 9.09336L11.7874 15.4573C11.8624 15.5323 11.9641 15.5744 12.0702 15.5744Z' fill='%23924E94'/%3E%3C/svg%3E");
}

.as-parents-voice__item--open .as-parents-voice__toggle {
  background-color: #B8D200;
  color: #ffffff;
}

.as-parents-voice__item--open .as-parents-voice__toggle::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0714 8.2918C11.9653 8.2918 11.8636 8.33392 11.7886 8.40891L5.42465 14.7728C5.19034 15.0072 4.81044 15.0072 4.57613 14.7728C4.34181 14.5385 4.34181 14.1586 4.57613 13.9243L10.9401 7.56032L10.9402 7.56025C11.2402 7.2603 11.6471 7.0918 12.0714 7.0918C12.4957 7.0918 12.9025 7.2603 13.2026 7.56025L13.2027 7.56032L19.5667 13.9243C19.801 14.1586 19.801 14.5385 19.5667 14.7728C19.3323 15.0072 18.9524 15.0072 18.7181 14.7728L12.3542 8.40891C12.2792 8.33392 12.1775 8.2918 12.0714 8.2918Z' fill='white'/%3E%3C/svg%3E");
}

.as-parents-voice__profile {
  flex: 0 0 48px;
  width: 48px;
}

.as-parents-voice__photo {
  object-fit: cover;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.as-parents-voice__info {}

.as-parents-voice__name {
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.4;
}

.as-parents-voice__desc {
  font-size: var(--font-s);
}

.as-parents-voice__icon {}

.as-parents-voice__content {
  margin-top: var(--space-2xs);
  padding: var(--space-s);
  border-radius: 12px;
  background-color: #ffffff;
}

.as-parents-voice__content-header {
  margin-bottom: var(--space-m);
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 1.4;
  color: #B8D200;
}

.as-parents-voice__content-qas {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.as-parents-voice__content-qa {}

.as-parents-voice__content-q {
  margin-bottom: var(--space-2xs);
  font-size: var(--font-m);
  font-weight: 600;
  color: #B8D200;
}

.as-parents-voice__content-a {
  font-size: var(--font-m);
}

@media (min-width: 800px) {
  .as-parents-voice {
  }
  .as-parents-voice__inner {}
  .as-parents-voice__title-en {}
  .as-parents-voice__title-jp {}
  
  .as-parents-voice__list {
    margin-top: var(--space-2xl);
    gap: var(--space-l);
  }
  
  .as-parents-voice__item {}

  .as-parents-voice__toggle {
    padding-right: 66px;
  }

  .as-parents-voice__toggle::after {
    right: 28px;
  }

  .as-parents-voice__profile {}
  .as-parents-voice__photo {}
  .as-parents-voice__info {}
  .as-parents-voice__name {}
  .as-parents-voice__desc {}
  .as-parents-voice__icon {}

  .as-parents-voice__content {
    padding: 28px;
  }

  .as-parents-voice__content-header {
    margin-bottom: var(--space-l);
  }

  .as-parents-voice__content-qas {
    gap: var(--space-l);
  }

  .as-parents-voice__content-qa {}

  .as-parents-voice__content-q {}

  .as-parents-voice__content-a {}
}
/* END: Parent's Voice */


/* Course Options */
.as-course-options {
  background-color: #F5F5F5;
}

.as-course-options__inner {
}

.as-course-options__title {
}

.as-course-options__subtitle {
}

.as-course-options__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.as-course-options__card {
  border-radius: 8px;
  background-color: #ffffff;
  overflow: hidden;
}

.as-course-options__card-header {
}

h3.as-course-options__card-title {
  padding: 16px;
  background-color: #B8D200;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.as-course-options__card-content {
  padding: 32px;
}

.as-course-options__badge {
  display: block;
  background-color: #B8D200;
  color: #ffffff;
  border-radius: 44px;
  justify-self: center;
  padding: 5px 12px;
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.as-course-options__list {
  list-style: disc;
  padding-left: 20px;
  font-size: 14px;
}

.as-course-options__list-item {
}

/* Tablet and up */
@media (min-width: 800px) {
  .as-course-options {
  }

  .as-course-options__inner {
  }

  .as-course-options__grid {
    flex-direction: row;
    gap: 50px;
    margin-top: 50px;
  }

  .as-course-options__card {
    flex: 1;
  }

  h3.as-course-options__card-title {
    font-size: 18px;
  }
}
/* END: Course Options */


/* A day in the life */
.as-daylife {
}

.as-daylife__inner {
}

.as-daylife__header {
}

.as-daylife__title {
}

.as-daylife__subtitle {
}

.as-daylife__intro {
}

.as-daylife__timeline {
  display: flex;
  gap: 18px;
  flex-direction: column;
  margin-top: 18px;
}

.as-daylife-item {
  display: flex;
  gap: var(--space-2xs);
}

.as-daylife-item__timeblock {
  flex: 0 0 111px;
}

.as-daylife-item__time {
  display: flex;
  margin-bottom: var(--space-2xs);
  padding: 3px 18px 9px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='111' height='41' viewBox='0 0 111 41' fill='none'%3E%3Cpath d='M0 5.35596C0 2.59453 2.23858 0.355957 5 0.355957H86.3645C89.1259 0.355957 91.3645 2.59453 91.3645 5.35596V35.356C91.3645 38.1174 89.1259 40.356 86.3645 40.356H5C2.23857 40.356 0 38.1174 0 35.356V5.35596Z' fill='%23B8D200'/%3E%3Cpath d='M75.475 5.35596C75.475 2.59453 77.7136 0.355957 80.475 0.355957H92.9947C94.4788 0.355957 95.8862 1.01523 96.8361 2.15544L109.333 17.1554C110.878 19.0095 110.878 21.7024 109.333 23.5565L96.8361 38.5565C95.8862 39.6967 94.4788 40.356 92.9947 40.356H80.475C77.7136 40.356 75.475 38.1174 75.475 35.356V5.35596Z' fill='%23B8D200'/%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: var(--font-l);
  line-height: 1.4;
  font-weight: 700;
  color: #ffffff;
}

h3.as-daylife-item__label {
  color: #B8D200;
}

.as-daylife-item__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: 5px;
  background-color: #EEEEEE;
}

.as-daylife-item__image {
}

.as-daylife-item__image img {
  width: 100%;
  aspect-ratio: 184 / 123;
  object-fit: cover;
  border-radius: 5px;
}

.as-daylife-item__text {
}

@media (min-width: 800px) {
  .as-daylife {
    background-color: #F5F5F5;
  }
  
  .as-daylife__inner {
  }
  
  .as-daylife__header {
  }
  
  .as-daylife__title {
  }
  
  .as-daylife__subtitle {
  }
  
  .as-daylife__intro {
  }
  
  .as-daylife__timeline {
    gap: 50px;
    margin-top: 50px;
  }
  
  .as-daylife-item {
    position: relative;
    z-index: 1;
    gap: 18px;
  }

  .as-daylife-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 5px;
    background-color: #CCCCCC;
    height: calc(100% + 50px);
    z-index: -1;
  }

  .as-daylife__timeline > div:last-of-type::before {
    display: none;
  }
  
  .as-daylife-item__timeblock {
    flex: 0 0 327px;
    display: flex;
    align-items: flex-start;
    gap: 42px;
  }
  
  .as-daylife-item__time {
    width: 110px;
    padding: 3px 18px 3px 20px;
  }
  
  h3.as-daylife-item__label {
    margin-top: 3px;
  }
  
  .as-daylife-item__content {
    flex-direction: column-reverse;
    gap: 18px;
    padding: 0;
    background-color: transparent;
  }
  
  .as-daylife-item__image {
  }

  .as-daylife-item__image img {
    aspect-ratio: 792 / 296;
  }
  
  .as-daylife-item__text {
    padding: var(--space-l);
    border-radius: 5px;
    background-color: #EEEEEE;
  }
}

/* END: A day in the life */


/* Courses */
.as-course {
  background-color: #F5F5F5;
}

.as-course__inner {}
.as-course__header {
  margin-bottom: 18px;
}

.as-course__heading {}

/* TABS */
.as-tabs {
  display: none;
}

.as-tabs__tab {}
.as-tabs__tab.is-active {}
.as-tabs__indicator {}

/* PANELS WRAPPER */
.as-course-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* PANEL */
.as-course-panel {
  width: 100%;
}

.as-course-panel.is-active {}

.as-course-panel[data-tab-name]::before {
  content: attr(data-tab-name);
  display: block;
  width: 100%;
  padding: var(--space-xs);
  border-radius: 8px;
  box-sizing: border-box;
  background-position: calc(100% - 16px) center;
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0702 15.9719C12.1763 15.9719 12.278 15.9297 12.353 15.8548L18.7169 9.49082C18.9513 9.25651 19.3312 9.25651 19.5655 9.49082C19.7998 9.72514 19.7998 10.105 19.5655 10.3394L13.2015 16.7034L13.2014 16.7034C12.9014 17.0034 12.4945 17.1719 12.0702 17.1719C11.6459 17.1719 11.2391 17.0034 10.939 16.7034L10.9389 16.7034L4.57495 10.3394C4.34063 10.105 4.34063 9.72514 4.57495 9.49082C4.80926 9.25651 5.18916 9.25651 5.42347 9.49082L11.7874 15.8548C11.8624 15.9297 11.9641 15.9719 12.0702 15.9719Z' fill='%23B8D200'/%3E%3C/svg%3E");
  font-size: var(--font-m);
  line-height: 1.4;
  font-weight: 700;
}

.as-course-panel.is-active[data-tab-name]::before {
  background-color: #B8D200;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0714 8.58477C11.9653 8.58477 11.8636 8.62689 11.7886 8.70188L5.42465 15.0658C5.19034 15.3001 4.81044 15.3001 4.57613 15.0658C4.34181 14.8315 4.34181 14.4516 4.57613 14.2173L10.9401 7.85329L10.9402 7.85322C11.2402 7.55327 11.6471 7.38477 12.0714 7.38477C12.4957 7.38477 12.9025 7.55327 13.2026 7.85322L13.2027 7.85329L19.5667 14.2173C19.801 14.4516 19.801 14.8315 19.5667 15.0658C19.3323 15.3001 18.9524 15.3001 18.7181 15.0658L12.3542 8.70188C12.2792 8.62689 12.1775 8.58477 12.0714 8.58477Z' fill='white'/%3E%3C/svg%3E");
  color: #ffffff;
}

#course-panel-kids.is-active::before {
  background-color: #00BF66;
}

#course-panel-junior.is-active::before {
  background-color: #8DC556;
}

#course-panel-senior.is-active::before {
  background-color: #82B78C;
}

/* CARD */
.as-course-card {
  display: none;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-s);
  margin-top: var(--space-2xs);
  background-color: #ffffff;
  border-radius: 10px;
}

.as-course-panel.is-active .as-course-card {
  display: flex;
}

.as-course-card__media {
  margin-bottom: 0;
}

.as-course-card__img {
  aspect-ratio: 184 / 123;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.as-course-card__body {}

h3.as-course-card__title {
  margin-bottom: var(--space-s);
  font-size: var(--font-xl);
  color: #B8D200;
}

#course-panel-kids h3.as-course-card__title {
  color: #00BF66;
}

#course-panel-junior h3.as-course-card__title {
  color: #8DC556;
}

#course-panel-senior h3.as-course-card__title {
  color: #82B78C;
}

/* CARD SECTIONS */
.as-course-card__section {
  font-size: var(--font-m);
}
.as-course-card__section--time {}
.as-course-card__section--about {}
.as-course-card__heading {}
.as-course-card__text {}

/* Responsive (mobile-first) */
@media (min-width: 800px) {
  .as-course {
    background-color: #ffffff;
  }

  .as-course--nopadding {
    padding-bottom: 0;
  }
  .as-course__inner {}

  .as-course__header {
    margin-bottom: 50px;
  }

  .as-course__heading {}

  .as-tabs-group {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
  }

  .as-tabs {
    display: flex;
    overflow: hidden;
  }

  .as-tabs__tab {
    flex: 1;
    padding: 20px var(--space-s);
    border: 0;
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
  }

  .as-tabs__tab.is-active {
    background-color: #B8D200;
    color: #ffffff;
  }

  #course-tab-kids.is-active {
    background-color: #00BF66;
  }

  #course-tab-junior.is-active {
    background-color: #8DC556;
  }

  #course-tab-senior.is-active {
    background-color: #82B78C;
  }
  
  .as-course-panel[data-tab-name]::before {
    display: none;
  }

  .as-tabs__indicator {}

  .as-course-panels {
    gap: 0;
  }

  .as-course-panel {}
  .as-course-panel.is-active {}

  .as-course-card {
    gap: 0;
    flex-direction: row;
    min-height: 317px;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
  }

  .as-course-card__media {
    width: 50%;
  }

  .as-course-card__img {
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .as-course-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 16px 32px;
  }

  h3.as-course-card__title {
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-s);
    border-bottom: 1px solid #B8D200;
  }

  #course-panel-kids h3.as-course-card__title {
    border-bottom: 1px solid #00BF66;
  }
  
  #course-panel-junior h3.as-course-card__title {
    border-bottom: 1px solid #8DC556;
  }
  
  #course-panel-senior h3.as-course-card__title {
    border-bottom: 1px solid #82B78C;
  }

  .as-course-card__section {}
  .as-course-card__section--time {}
  .as-course-card__section--about {}
  .as-course-card__heading {}
  .as-course-card__text {}
}

/* END: Courses */


/* Trial */
/* BLOCK: Trial Flow */
.as-trialflow {}
.as-trialflow__inner {}
.as-trialflow__header {
  margin-bottom: 18px;
}
.as-trialflow__title {}
.as-trialflow__subtitle {}
.as-trialflow__intro {}
.as-trialflow__list {
  display: flex;
  flex-direction: column;
  gap: 84px;
}

/* BLOCK: Trial Card */
.as-trialcard {
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  padding: var(--space-s) var(--space-s) var(--space-l);
  border: 1px solid #EEEEEE;
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
}

.as-trialcard::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-color: #FABE00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4244 13.915C18.6587 14.1493 18.6587 14.5292 18.4244 14.7635L12.4244 20.7635C12.19 20.9978 11.8101 20.9978 11.5758 20.7635L5.57583 14.7635C5.34152 14.5292 5.34152 14.1493 5.57583 13.915C5.81015 13.6807 6.19005 13.6807 6.42436 13.915L11.4001 18.8907L11.4001 4.83926C11.4001 4.50789 11.6687 4.23926 12.0001 4.23926C12.3315 4.23926 12.6001 4.50789 12.6001 4.83926L12.6001 18.8907L17.5758 13.915C17.8101 13.6807 18.19 13.6807 18.4244 13.915Z' fill='white'/%3E%3C/svg%3E");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
}

.as-trialcard--03::after {
  display: none !important;
}

.as-trialcard--01 {}
.as-trialcard--02 {}
.as-trialcard--03 {}
.as-trialcard__media {
  margin-bottom: var(--space-m);
  padding: var(--space-m);
}
.as-trialcard__icon {
  display: block;
  max-height: 90px;
  width: auto;
  margin: 0 auto;
}
.as-trialcard__head {
  text-align: center;
  margin-bottom: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 3px solid #B8D200;
}
.as-trialcard__step {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.as-trialcard__step-index {}
.as-trialcard__step-label {}
h3.as-trialcard__title-en {
  font-size: var(--font-m);
  font-weight: 600;
  line-height: 1.5;
}
.as-trialcard__body {
  font-size: 16px;
}
.as-trialcard__text {}

/* LAYOUT (≥800px) */
@media (min-width: 800px) {
  /* BLOCK: Trial Flow */
  .as-trialflow {
    background-color: #F5F5F5;
  }
  .as-trialflow__inner {}
  .as-trialflow__header {
    margin-bottom: 40px;
  }
  .as-trialflow__title {}
  .as-trialflow__subtitle {}
  .as-trialflow__intro {}
  .as-trialflow__list {
    flex-direction: row;
    gap: 96px;
  }

  /* BLOCK: Trial Card */
  .as-trialcard {
    flex: 1;
  }

  .as-trialcard::after {
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    left: calc(100% + 24px);
  }

  .as-trialcard--01 {}
  .as-trialcard--02 {}
  .as-trialcard--03 {}
  
  .as-trialcard__media {
    display: flex;
    height: 155px;
    align-items: center;
  }

  .as-trialcard__icon {
    max-height: 100px;
  }
  .as-trialcard__head {}
  .as-trialcard__step {}
  .as-trialcard__step-index {}
  .as-trialcard__step-label {}
  .as-trialcard__title-en {}
  .as-trialcard__body {}
  .as-trialcard__text {}
}

/* END: Trial */


/* Stepup */
.as-stepup {
}

.as-stepup__inner {
}

.as-stepup__header {
  margin-bottom: 18px;
}

h2.as-stepup__title {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: var(--font-l);
  line-height: 1.5;
  color: #5BC4BD;
}

h2.as-stepup__title::before {
  content: '';
  width: 33px;
  height: 30px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='46' viewBox='0 0 51 46' fill='none'%3E%3Cpath d='M25.4993 3.60449V42.3541' stroke='%235BC4BD' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M10.5425 22.1465L25.5011 42.353L40.4597 22.1465' stroke='%235BC4BD' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.as-stepup-card {
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.as-stepup-card__head {
  background-color: #5BC4BD;
  padding: var(--space-s) var(--space-xs);
}

.as-stepup-card__tag {
  display: flex;
  justify-self: center;
  margin-bottom: var(--space-s);
  padding: 1px 10px;
  border-radius: 5px;
  border: 1px solid #5BC4BD;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #5BC4BD;
}

.as-stepup-card__course {
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.as-stepup-card__course span {
  font-size: var(--font-xs);
}

.as-stepup-card__image {
  margin-bottom: var(--space-s);
}

.as-stepup-card__image img {
  border-radius: 8px;
}

.as-stepup-card__body {
  padding: var(--space-s) var(--space-2xs) var(--space-l);
}

.as-stepup-card__content {
}

h3.as-stepup-card__subtitle {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.as-stepup-card__text {
  font-size: 12px;
}

.as-stepup-card__btn {
  display: flex;
  justify-self: center;
  margin-top: 18px;
  padding: var(--space-s);
  padding-right: 44px;
  background-color: #5BC4BD;
  border-radius: 4px;
  font-size: var(--font-s);
  font-weight: 600;
  line-height: 1;
  color: #ffffff !important;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: calc(100% - 16px) center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5758 5.65035C13.8101 5.41603 14.19 5.41603 14.4243 5.65035L20.4243 11.6503C20.6586 11.8847 20.6586 12.2646 20.4243 12.4989L14.4243 18.4989C14.19 18.7332 13.8101 18.7332 13.5758 18.4989C13.3414 18.2646 13.3414 17.8847 13.5758 17.6503L18.5515 12.6746L4.50002 12.6746C4.16865 12.6746 3.90002 12.406 3.90002 12.0746C3.90002 11.7432 4.16865 11.4746 4.50002 11.4746L18.5515 11.4746L13.5758 6.49887C13.3414 6.26456 13.3414 5.88466 13.5758 5.65035Z' fill='white'/%3E%3C/svg%3E");
  transition: all 0.3s ease;
}

.as-stepup-card__btn:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5758 5.65035C13.8101 5.41603 14.19 5.41603 14.4243 5.65035L20.4243 11.6503C20.6586 11.8847 20.6586 12.2646 20.4243 12.4989L14.4243 18.4989C14.19 18.7332 13.8101 18.7332 13.5758 18.4989C13.3414 18.2646 13.3414 17.8847 13.5758 17.6503L18.5515 12.6746L4.50002 12.6746C4.16865 12.6746 3.90002 12.406 3.90002 12.0746C3.90002 11.7432 4.16865 11.4746 4.50002 11.4746L18.5515 11.4746L13.5758 6.49887C13.3414 6.26456 13.3414 5.88466 13.5758 5.65035Z' fill='%23B8D200'/%3E%3C/svg%3E");
  color: #B8D200 !important;
}



@media (min-width: 800px) {
  .as-stepup {
  }
  
  .as-stepup__inner {
  }
  
  .as-stepup__header {
    margin-bottom: 50px;
  }
  
  .as-stepup__icon {
  }
  
  h2.as-stepup__title {
    gap: 50px;
    font-size: var(--font-xl);
  }

  h2.as-stepup__title::before {
    width: 50px;
    height: 45px;
  }
  
  .as-stepup-card {
  }
  
  .as-stepup-card__head {
    display: flex;
    gap: 29px;
    padding: 16px 56px;
  }
  
  .as-stepup-card__tag {
    margin-bottom: 0;
    justify-self: flex-start;
    background-color: #ffffff;
  }
  
  .as-stepup-card__course {
    align-self: center;
  }

  .as-stepup-card__course span {

  }

  .as-stepup-card__image {
    flex: 0 0 313px;
    margin-bottom: 0;
  }

  .as-stepup-card__image img {
  
  }
  
  .as-stepup-card__body {
    display: flex;
    flex-direction: row-reverse;
    gap: 32px;
    padding: 56px;
    align-items: center;
  }
  
  .as-stepup-card__content {
    flex: 1;
  }
  
  h3.as-stepup-card__subtitle {
    font-size: 16px;
  }
  
  .as-stepup-card__text {
    font-size: 16px;
  }
  
  .as-stepup-card__btn {
    justify-self: flex-start;
    margin-top: 24px;
  }
}

/* END: Stepup */