/* ==========================================================================
   Component: Heading（共通見出し）
   ========================================================================== */
.c-heading {
  color: var(--color-text-gray);
  font-family: var(--font-family-zen-kaku);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.8px;
}

.c-heading.--blue {
  font-size: 18px;
}

@media (min-width: 769px) {
  .c-heading.--blue {
    font-size: 24px;
  }
}

.c-heading.--pink {
  font-size: 25px;
}

@media (min-width: 769px) {
  .c-heading.--pink {
    font-size: 36px;
  }
}

.c-heading.--blue,
.c-heading.--pink {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 12px;
}

@media (min-width: 769px) {
  .c-heading.--blue,
  .c-heading.--pink {
    column-gap: 20px;
  }
}

.c-heading.--blue::before,
.c-heading.--pink::before {
  content: '';
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

@media (min-width: 769px) {
  .c-heading.--blue::before,
  .c-heading.--pink::before {
    width: 16px;
    height: 16px;
  }
}

.c-heading.--blue::before {
  background-color: var(--color-blue-4);
}

.c-heading.--pink::before {
  background-color: var(--color-pink-3);
}

/* ==========================================================================
   Project: KV（キービジュアル）
   ========================================================================== */
.p-support-kv img {
  width: 100%;
  height: auto;
  border-radius: 0 0 0 48px;
}

/* ==========================================================================
   Project: Main Heading / Lead（メインタイトル・リード文）
   ========================================================================== */
.p-main-heading {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 9px;
  margin-top: 48px;
}

@media (min-width: 769px) {
  .p-main-heading {
    row-gap: 8px;
    margin-top: 94px;
  }
}

.p-main-heading__ja {
  color: var(--color-text-gray);
  font-family: var(--font-family-zen-kaku);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2.4px;
}

@media (min-width: 769px) {
  .p-main-heading__ja {
    font-size: 48px;
  }
}

.p-main-heading__en {
  color: var(--color-blue-4);
  font-family: var(--font-family-open-san);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 2.2px;
}

@media (min-width: 769px) {
  .p-main-heading__en {
    font-size: 22px;
  }
}

.p-read {
  color: var(--color-text-gray);
  font-family: var(--font-family-noto-san);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.8px;
  margin-top: 24px;
}

@media (min-width: 769px) {
  .p-read {
    font-size: 16px;
    margin-top: 45px;
  }
}

/* ==========================================================================
   Project: Option（有料オプション）
   ========================================================================== */
.p-option {
  margin-top: 48px;
}

@media (min-width: 769px) {
  .p-option {
    margin-top: 80px;
  }
}

.p-option__text {
  color: var(--color-text-gray);
  font-family: var(--font-family-noto-san);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.8px;
  margin-top: 24px;
}

@media (min-width: 769px) {
  .p-option__text {
    font-size: 16px;
    margin-top: 16px;
  }
}

.p-option__items {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  margin-top: 24px;
}

@media (min-width: 769px) {
  .p-option__items {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
  }
}

.p-option__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  background-color: var(--color-blue-1);
}

@media (min-width: 769px) {
  .p-option__item {
    width: max(calc( ( 100% - 16px ) / 2 ), 320px);
    row-gap: 16px;
    padding: 32px;
    border-radius: 16px;
  }
}

.p-option__item-text {
  color: var(--color-blue-4);
  text-align: center;
  font-family: var(--font-family-noto-san);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.1px;
}

@media (min-width: 769px) {
  .p-option__item-text {
    font-size: 22px;
  }
}

.p-option__item-text span {
  color: var(--color-blue-4);
  font-family: var(--font-family-noto-san);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.9px;
}

@media (min-width: 769px) {
  .p-option__item-text span {
    font-size: 18px;
  }
}

.p-option__icon-score {
  width: 52px;
  height: 54px;
}

.p-option__icon-tour {
  width: 57px;
  height: 54px;
}

/* ==========================================================================
   Project: Support（サポート内容）
   ========================================================================== */
.p-support {
  margin-top: 64px;
}

@media (min-width: 769px) {
  .p-support {
    margin-top: 104px;
  }
}

.p-support__text {
  color: var(--color-text-gray);
  font-family: var(--font-family-noto-san);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.8px;
  margin-top: 40px;
}

@media (min-width: 769px) {
  .p-support__text {
    font-size: 16px;
  }
}

.p-support__section {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin-top: 32px;
}

@media (min-width: 769px) {
  .p-support__section {
    margin-top: 56px;
  }
}

/* ==========================================================================
   Project: CTA（行動喚起エリア）
   ========================================================================== */
.p-cta {
  margin-top: 48px;
}

@media (min-width: 769px) {
  .p-cta {
    margin-top: 104px;
  }
}

/* ==========================================================================
   Project: Plan（料金プラン）
   ========================================================================== */
.p-plan {
  margin-top: 64px;
}

@media (min-width: 769px) {
  .p-plan {
    margin-top: 80px;
  }
}
.p-plan__table-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.p-plan__table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 36px;
}

@media (min-width: 769px) {
  .p-plan__table {
    margin-top: 46px;
  }
}

.p-plan__table th,
.p-plan__table td {
  border: 2px solid var(--color-white);
  box-sizing: border-box;
  vertical-align: middle;
}

.p-plan__table-col1 {
  width: 70px;
}

@media (min-width: 769px) {
  .p-plan__table-col1 {
    width: 103px;
  }
}

.p-plan__table-col2 {
  width: 94px;
}

@media (min-width: 769px) {
  .p-plan__table-col2 {
    width: 211px;
  }
}

.p-plan__table-col3,
.p-plan__table-col5 {
  width: 169px;
}

@media (min-width: 769px) {
  .p-plan__table-col3,
  .p-plan__table-col5 {
    width: 189px;
  }
}

.p-plan__table-col4 {
  width: 189px;
}

@media (min-width: 769px) {
  .p-plan__table-col4 {
    width: 253px;
  }
}

.p-plan__table-header {
  position: relative;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family-zen-kaku);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.65px;
  vertical-align: top;
  padding: 15px 14px;
  background-color: var(--color-white);
}

@media (min-width: 769px) {
  .p-plan__table-header {
    font-size: 13px;
    padding: 16px;
  }
}

.p-plan__table-header.--sticky {
  position: sticky;
  left: 0;
  z-index: 5;
}

.p-plan__table-header.--sticky-col2 {
  position: sticky;
  left: 70px;
  z-index: 5;
}

@media (min-width: 769px) {
  .p-plan__table-header.--sticky-col2 {
    left: 103px;
  }
}

.p-plan__table-header .large {
  display: block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1.3px;
  margin-top: 10px;
}

@media (min-width: 769px) {
  .p-plan__table-header .large {
    font-size: 26px;
    margin-top: 12px;
  }
}

.p-plan__table-header .balloon {
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  color: #ED78A5;
  font-family: var(--font-family-noto-san);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.75px;
  border-radius: 16px;
  padding: 4px 10px;
  background-color: #FFE6EF;
}

@media (min-width: 769px) {
  .p-plan__table-header .balloon {
    top: -30px;
    font-size: 15px;
    padding: 5px 14px;
  }
}

.p-plan__table-header .balloon::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #FFE6EF;
}

.p-plan__table-header .balloon::after {
  content: '';
  position: absolute;
  top: -13px;
  left: -14px;
  width: 21px;
  height: 21px;
  background: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/support/three-points.svg") no-repeat center center / contain;
}

.p-plan__table-header.--light,
.p-plan__table-header.--premium {
  position: relative;
  background-color: var(--color-blue-4);
  border-radius: 8px 8px 0 0;
  border-top: none;
  border-bottom: none;
}

@media (min-width: 769px) {
  .p-plan__table-header.--light,
  .p-plan__table-header.--premium {
    border-radius: 16px 16px 0 0;
  }
}

.p-plan__table-header.--light::before,
.p-plan__table-header.--premium::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--color-blue-4);
}

.p-plan__table-header.--standard {
  background-color: var(--color-pink-3);
  border-top: none;
  border-bottom: none;
}

.p-plan__table-header.--standard::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background-color: var(--color-pink-3);
  border-radius: 8px 8px 0 0;
}

@media (min-width: 769px) {
  .p-plan__table-header.--standard::before {
    top: -16px;
    border-radius: 16px 16px 0 0;
  }
}

.p-plan__table-header.--standard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: #FF69B4;
}

.p-plan__table-header.--mask::before {
  content: '';
  position: absolute;
  top: -36px;
  left: -2px;
  right: -1px;
  bottom: -200px;
  background-color: var(--color-white);
  z-index: 5;
}

@media (min-width: 769px) {
  .p-plan__table-header.--mask::before {
    top: -32px;
    left: -2px;
    right: 0;
    bottom: -200px;
  }
}

.p-plan__table-column-heading {
  position: relative;
  color: var(--color-text-gray);
  font-family: var(--font-family-zen-kaku);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.8px;
  text-align: left;
  padding: 24px 16px;
  background-color: var(--color-gray-1);
}

@media (min-width: 769px) {
  .p-plan__table-column-heading {
    font-size: 18px;
    padding: 24px 18px;
  }
}

.p-plan__table-column-heading::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  border-top: 1px solid var(--color-white);
  border-left: 2px solid var(--color-gray-1);
  border-right: 2px solid var(--color-gray-1);
  pointer-events: none;
}

.p-plan__table-column-heading::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--color-white);
  pointer-events: none;
}

.p-plan__table-column-heading.--sticky {
  position: sticky;
  left: 0;
  z-index: 10;
}

.p-plan__table-column-heading.--center {
  text-align: center;
}

.p-plan__table-column-heading.--radius-top-left {
  border-top-left-radius: 8px;
}

@media (min-width: 769px) {
  .p-plan__table-column-heading.--radius-top-left {
    border-top-left-radius: 16px;
  }
}

.p-plan__table-column-heading.--radius-bottom-left {
  border-bottom-left-radius: 8px;
}

@media (min-width: 769px) {
  .p-plan__table-column-heading.--radius-bottom-left {
    border-bottom-left-radius: 16px;
  }
}

.p-plan__table-column-heading span {
  display: block;
  font-family: var(--font-family-zen-kaku);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.7px;
  margin-top: 6px;
}

@media (min-width: 769px) {
  .p-plan__table-column-heading span {
    font-size: 14px;
  }
}

.p-plan__table-column-sub-heading {
  color: var(--color-text-gray);
  font-family: var(--font-family-zen-kaku);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.7px;
  padding: 16px;
  background-color: var(--color-gray-2);
  z-index: 10;
}

@media (min-width: 769px) {
  .p-plan__table-column-sub-heading {
    font-size: 14px;
    padding: 20px;
  }
}

.p-plan__table-column-sub-heading.--sticky-col2 {
  position: sticky;
  left: 70px;
}

@media (min-width: 769px) {
  .p-plan__table-column-sub-heading.--sticky-col2 {
    left: 103px;
  }
}

.p-plan__table-price {
  color: var(--color-white);
  font-family: var(--font-family-open-san);
  font-style: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.3px;
  background-color: var(--color-blue-4);
  text-align: center;
}

@media (min-width: 769px) {
  .p-plan__table-price {
    font-size: 26px;
  }
}

.p-plan__table-price.--standard {
  background-color: var(--color-pink-3);
}

.p-plan__table-price .unit {
  color: var(--color-white);
  font-family: var(--font-family-zen-kaku);
  font-style: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.7px;
}

@media (min-width: 769px) {
  .p-plan__table-price .unit {
    font-size: 14px;
  }
}

.p-plan__table-data {
  color: var(--color-blue-4);
  font-family: var(--font-family-noto-san);
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.8px;
  background-color: #F2FAFC;
}

@media (min-width: 769px) {
  .p-plan__table-data {
    font-size: 16px;
  }
}

.p-plan__table-data span {
  display: block;
  font-family: var(--font-family-noto-san);
  font-size: 11px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.7px;
  margin-top: 8px;
}

@media (min-width: 769px) {
  .p-plan__table-data span {
    font-size: 14px;
  }
}

.p-plan__table-data.--standard {
  position: relative;
  color: var(--pink3, var(--color-pink-3));
  background-color: var(--color-pink-1);
}

.p-plan__table-data.--standard::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  bottom: 0;
  border-right: var(--color-pink-3) 2px solid;
  border-left: var(--color-pink-3) 2px solid;
  pointer-events: none;
}

@media (min-width: 769px) {
  .p-plan__table-data.--standard::before {
    top: -2px;
    border-right: var(--color-pink-3) 4px solid;
    border-left: var(--color-pink-3) 4px solid;
  }
}

.p-plan__table-data.--standard.--first::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  border-top: var(--color-pink-3) 2px solid;
  pointer-events: none;
}

@media (min-width: 769px) {
  .p-plan__table-data.--standard.--first::after {
    top: -3px;
    border-top: var(--color-pink-3) 4px solid;
  }
}

.p-plan__table-data.--standard.--last::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: var(--color-pink-3) 2px solid;
  pointer-events: none;
}

@media (min-width: 769px) {
  .p-plan__table-data.--standard.--last::after {
    border-bottom: var(--color-pink-3) 4px solid;
  }
}

.p-plan__notice {
  color: var(--color-text-gray);
  font-family: var(--font-family-zen-kaku);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.7px;
  margin-top: 20px;
}

@media (min-width: 769px) {
  .p-plan__notice {
    margin-top: 32px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Component: Scroll Hint（スクロールヒント）
   ========================================================================== */
.scroll-hint-icon-wrap {
  z-index: 50;
}

.scroll-hint-icon-wrap .scroll-hint-icon {
  top: 500px;
}

@media (min-width: 769px) {
  .scroll-hint-icon-wrap .scroll-hint-icon {
    top: 40%;
  }
}