/* ==========================================================================
   Variables: CSS変数
   ========================================================================== */
:root {
  --color-white: #fff;
  --color-blue-1: #f0fafc;
  --color-blue-2: #d4f2f7;
  --color-blue-3: #4bc5d9;
  --color-blue-4: #00b3d1;
  --color-blue-5: #73d5e6;
  --color-pink-1: #fff6fa;
  --color-pink-2: #ffd3e4;
  --color-pink-3: #ff6fa6;
  --color-gray-1: #f7f7f7;
  --color-gray-2: #e6e6e6;
  --color-gray-3: #a5a5a5;
  --color-text-gray: #333;
  --color-green: #06c755;

  --font-family-zen-kaku: "Zen Kaku Gothic New", sans-serif;
  --font-family-noto-san: "Noto Sans JP", sans-serif;
  --font-family-open-san: "Open Sans", sans-serif;

  --design-width-pc: 1440;
  --design-width-sp: 375;
}

/* ==========================================================================
   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.25px;
}

.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;
  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: 12px;
  height: 12px;
  flex-shrink: 0;
}

@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);
}

/* Blueは常に1行なのでセンター揃え */
.c-heading.--blue {
  align-items: center;
}

.c-heading.--pink {
  align-items: flex-start;
}
.c-heading.--pink::before {
  margin-top: 11.5px;
}

@media (min-width: 769px) {
  .c-heading.--pink {
    align-items: center;
  }
  .c-heading.--pink::before {
    margin-top: 0;
  }
}

/* テキストを包むラッパー（SP:縦並び / PC:横並び） */
.c-heading__text-wrapper {
  display: flex;
  flex-direction: column; /* SPは縦に積む */
  align-items: flex-start;
}
@media (min-width: 769px) {
  .c-heading__text-wrapper {
    display: block; /* PCは横（インライン）に戻す */
  }
}

.c-heading__main {
  font-size: inherit;
}

.c-heading__sub {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.9px;
}
@media (min-width: 769px) {
  .c-heading__sub {
    font-size: 20px;
    letter-spacing: 1px;
  }
}
/* ==========================================================================
   Project: MV（メインビジュアル）
   ========================================================================== */
.p-flow-mv img {
  width: 100%;
  height: auto;
  border-radius: 0 0 0 32px;
}
@media (min-width: 769px) {
  .p-flow-mv img {
    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;
  }
}
/* ==========================================================================
   Project: Step Section（ステップセクション）
   ========================================================================== */
.p-step {
  margin-top: 56px;
}
@media (min-width: 769px) {
  .p-step {
    margin-top: 80px;
  }
}

.p-step__items {
  position: relative;
  /* display: flex;
  flex-direction: column; */
  margin-top: 40px;
}
@media (min-width: 769px) {
  .p-step__items {
    margin-top: 60px;
  }
}

.p-step__items::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0; /* SPは左端 */
  width: 5px;
  height: 100%;
  border-radius: 20px;
  background-color: var(--color-blue-5);
  z-index: 0;
}
@media (min-width: 769px) {
  .p-step__items::before {
    top: 10px;
    left: 156px;
    height: 100%;
    border-right: 8px solid var(--color-blue-5);
  }
}

.p-step__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 19px;
  padding-right: 0px;
}
@media (min-width: 769px) {
  .p-step__item {
    flex-direction: row;
    padding-top: 0;
    padding-left: 0;
    gap: 127px;
  }
}

/* ==========================================================================
   SP用：ステップ開始の青い丸（ドット）
   ========================================================================== */
@media (max-width: 768px) {
  .p-step__item::before {
    content: "";
    position: absolute;
    /* 丸のスタイル */
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-blue-4);
    left: -3px;
    transform: none;
    top: 12px;
    z-index: 15;
  }
}

.p-step__item + .p-step__item {
  margin-top: 64px;
}
@media (min-width: 769px) {
  .p-step__item + .p-step__item {
    margin-top: 80px;
  }
}
.p-step__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--font-family-open-san);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1.3px;
  line-height: 1;
  padding: 10px 0;
}

@media (max-width: 768px) {
  .p-step__badge {
    background-color: var(--color-blue-4);
    clip-path: polygon(0% 50%, 10.837px 0%, 100% 0%, 100% 100%, 10.837px 100%);
  }
}
@media (min-width: 769px) {
  .p-step__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 125px;
    height: 60px;
    font-size: 20px;
    top: -15px;
    left: 0;
    padding-right: 7px;
    letter-spacing: 1px;
    background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/bg-label.svg"); /* パスは適宜確認 */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

.p-step__sidebar {
  display: block;
  margin-top: 8px;
}
@media (min-width: 769px) {
  .p-step__sidebar {
    flex-shrink: 0;
    position: relative;
    padding-top: 66px;
    width: 108px;
    margin-top: 0;
  }
}

@media (min-width: 769px) {
  .p-step__sidebar::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 152px;
    width: 66px;
    height: 16px;
    border-radius: 0;
    background-color: initial;
    background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/top/icon-dot.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
  }
}

/* ==========================================================================
   Step Flow: Sidebar Base Styles
   ========================================================================== */
.p-step__grade {
  /* 共通設定があればここに */
  background-color: var(--color-gray-1);
  justify-content: center;
  font-family: var(--font-family-noto-san);
}
@media (max-width: 768px) {
  .p-step__grade {
    display: flex;
    align-items: baseline;
    color: var(--color-blue-4);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 1.26px;
    padding: 8px 0;
  }
}
@media (min-width: 769px) {
  .p-step__grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-blue-4);
    font-weight: 700;
    font-size: 20px;
    border-radius: 8px 0 0 8px;
    height: 100%;
    font-style: normal;
    line-height: 1;
    /* 基本のテキスト（年生、～、月など） */
    letter-spacing: 1.8px;
  }
}
.p-step__grade-top {
  display: inline-block;
}
@media (min-width: 769px) {
  .p-step__grade-top {
    padding-bottom: 30px;
    position: relative;
    line-height: 1.2;
  }
}
@media (max-width: 768px) {
  .p-step__grade-top::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: var(--color-blue-4);
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 18px;
    margin-right: 19px;
  }
}
@media (min-width: 769px) {
  .p-step__grade-top::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--color-blue-4, #00b3d1);
  }
}

/* --- 下段（○月～○月）のレイアウト --- */
@media (min-width: 769px) {
  .p-step__grade-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px; /* 線からの余白 */
    row-gap: 15px;
  }
}
@media (min-width: 769px) {
  .p-step__item:first-of-type .p-step__grade-bottom {
    padding-top: 0;
  }
}

/* --- 数字の基本スタイル --- */
.p-step__grade-num {
  font-size: 18px;
  font-family: var(--font-family-open-san);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  /* 基本の数字（1, 2, 4, 8など） */
  letter-spacing: 1.62px;
}
@media (min-width: 769px) {
  .p-step__grade-num {
    font-size: 26px;
    line-height: 1;
    /* 基本の数字（1, 2, 4, 8など） */
    letter-spacing: 2.34px;
  }
}

/* 「～」の縦書き対応 */
@media (min-width: 769px) {
  .p-step__grade-tilde {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 1.8px; /* 基本設定 */
  }
}

/* 「3年生」の3など大きくする数字 */
.p-step__grade-num.--large {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 769px) {
  .p-step__grade-num.--large {
    font-size: 32px;
    /* letter-spacingは以下で個別指定するためここでは指定しない */
  }
}

/* ==========================================================================
   Step Specific Letter-Spacing (文字間隔の個別調整)
   ========================================================================== */

@media (min-width: 769px) {
  /* --- STEP 2, 3, 4 共通 --- */
  /* 上段の数字「3」: 2.88px */
  .p-step__item:nth-of-type(2) .p-step__grade-top .p-step__grade-num,
  .p-step__item:nth-of-type(3) .p-step__grade-top .p-step__grade-num,
  .p-step__item:nth-of-type(4) .p-step__grade-top .p-step__grade-num {
    letter-spacing: 2.88px;
  }

  /* --- STEP 3 個別 --- */
  /* 下段の「翌年」: 1px */
  .p-step__item:nth-of-type(3) .p-step__grade-text-year {
    letter-spacing: 1px;
  }

  /* --- STEP 5 個別 --- */
  /* 上段の「入学」: 1.98px */
  .p-step__item:nth-of-type(5) .p-step__grade-text-entry {
    letter-spacing: 1.98px;
  }

  /* 下段の「ヶ月」: 1px */
  .p-step__item:nth-of-type(5) .p-step__grade-unit {
    letter-spacing: 1px;
  }
}
.p-step__content {
  width: 100%;
  flex-grow: 1;
  min-height: 223px;
}

.p-step__action {
  margin-top: 40px;
}

@media (min-width: 769px) {
  .p-step__action:first-child {
    margin-top: 0;
  }
}

.p-step__heading {
  position: relative;
  color: var(--color-blue-4);
  font-family: var(--font-family-zen-kaku);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
  padding-left: 28px;
  min-height: 30px;
  display: flex;
  align-items: center;
}
@media (min-width: 769px) {
  .p-step__heading {
    font-size: 24px;
    padding-left: 39px;
  }
}

.p-step__heading[class*="--"] {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 23px 22px;
}
@media (min-width: 769px) {
  .p-step__heading[class*="--"] {
    background-size: 28px 27px;
  }
}

.p-step__heading.--check {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-check.svg");
}
.p-step__heading.--pencil {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-pencil.svg");
}
.p-step__heading.--speech-bubble {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-speech-bubble.svg");
}
.p-step__heading.--global-education {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-global-education.svg");
}
.p-step__heading.--check-list {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-check-list.svg");
}
.p-step__heading.--cap {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-cap.svg");
}
.p-step__heading.--bell {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-bell.svg");
}
.p-step__heading.--document-bell {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-document-bell.svg");
}
.p-step__heading.--money {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-money.svg");
}
.p-step__heading.--passport {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-passport.svg");
}
.p-step__heading.--document {
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-document.svg");
}
.p-step__heading.--step-goal {
  color: var(--color-pink-3);
  background-image: url("/_wp/wp-content/themes/smaryu/images/malaysia-university/flow/icon-cherry-blossom.svg");
}
.p-step__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.75px;
  margin-top: 20px;
}
@media (min-width: 769px) {
  .p-step__text {
    font-size: 16px;
    letter-spacing: 0.8px;
  }
}
.p-step__button-group {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  margin-top: 30px;
}
@media (min-width: 769px) {
  .p-step__button-group {
    flex-direction: row;
    column-gap: 26px;
  }
}
.p-step__button-with-label-wrap {
  position: relative;
  width: 100%;
}
@media (min-width: 769px) {
  .p-step__button-with-label-wrap {
    width: calc((100% - 26px) / 2);
  }

  .p-step__button-with-label-wrap:hover .c-button__label.--pink,
  .p-step__button-with-label-wrap:hover .c-button__label.--line {
    color: #fff;
  }
  .p-step__button-with-label-wrap:hover .c-button__label.--pink::after,
  .p-step__button-with-label-wrap:hover .c-button__label.--line::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition: opacity 0.3s, transform 0.3s ease;
  }
}

.p-step__button-wrap {
  margin-top: 20px;
}
@media (min-width: 769px) {
  .p-step__button-wrap {
    max-width: 385px;
    margin-top: 24px;
  }
}

/* ==========================================================================
   Add: Step 2 Specific Styles (サイドバー区切り線・水色ボックス)
   ========================================================================== */

/* --- サイドバーの区切り線 (PCのみ表示されるサイドバー内) --- */
@media (min-width: 769px) {
  .p-step__sidebar-border {
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--color-blue-5);
    margin: 15px auto; /* 上下の余白 */
  }
}

/* --- 水色のボックス (出願書類一覧) --- */
.p-step__box {
  background-color: var(--color-blue-1); /* #f0fafc */
  border-radius: 8px;
  padding: 24px 24px 32px 24px;
  margin-top: 30px;
}
@media (min-width: 769px) {
  .p-step__box {
    padding: 32px;
    border-radius: 16px;
  }
}

/* ボックス内のタイトル */
.p-step__box-title {
  color: var(--color-blue-4);
  font-family: var(--font-family-zen-kaku);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center; /* SPは中央揃え */
}
@media (min-width: 769px) {
  .p-step__box-title {
    font-size: 20px;
    text-align: left; /* PCは左揃え */
    margin-bottom: 20px;
  }
}

/* ボックス内のリスト */
.p-step__box-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-step__box-list li {
  position: relative;
  padding-left: 14px;
  margin-top: 12px;
  color: var(--color-text-gray);
  font-family: var(--font-family-noto-san);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.75px;
}
@media (min-width: 769px) {
  .p-step__box-list li {
    font-size: 16px;
    padding-left: 20px;
    letter-spacing: 0.8px;
  }
}

.p-step__box-list li:first-child {
  margin-top: 0;
}

/* リストのピンクの点 */
.p-step__box-list li::before {
  content: "";
  position: absolute;
  top: 9px; /* 点の位置調整 */
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-pink-3);
}
/* ==========================================================================
   Project:Banner (サポート詳細バナー)
   ========================================================================== */
.p-flow-banner {
  margin-top: 48px;
  width: 100%;
}
@media (min-width: 769px) {
  .p-flow-banner {
    margin-top: 56px;
  }
}
.p-flow-banner img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: 4px;
}

@media (min-width: 769px) {
  .p-flow-banner img {
    border-radius: 11.77px;
  }
}
.p-flow-banner__link:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
/* ==========================================================================
   Add: Goal Dotted Line (GOALセクションの点線) & Blue Dot
   ========================================================================== */

/* 共通：GOALセクションの基本設定 */
.p-step__item--goal {
  position: relative;
  background-color: transparent;
  z-index: 5;
}

@media (max-width: 768px) {
  .p-step__item--goal::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -2px;
    width: 9px;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 0;
    z-index: 6;
  }
  .p-step__item--goal::after {
    content: "";
    display: block;
    position: absolute;
    top: 28px;
    left: 0;
    width: 0;
    height: 170px;
    border-right: 5px dotted var(--color-blue-5);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    z-index: 10;
  }
  /* GOAL専用の青丸 */
  .p-step__goal-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-blue-4);
    left: -3px;
    transform: none;
    top: 12px;
    z-index: 15;
  }
}
@media (min-width: 769px) {
  .p-step__item:last-of-type::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 155px;
    width: 11px;
    height: 100%;
    background-color: var(--color-white);
    z-index: 5;
  }

  .p-step__item:last-of-type::after {
    content: "";
    display: block;
    position: absolute;
    top: 32px;
    left: 156px;
    width: 8px;
    height: 60%;
    border-right: 8px dotted var(--color-blue-5);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    z-index: 10;
  }
}
/* ==========================================================================
    Project: Reasons Section（選ばれる理由セクション）
   ========================================================================== */
.p-reasons {
  margin-top: 64px;
}
@media (min-width: 769px) {
  .p-reasons {
    margin-top: 120px;
  }
}
.p-reasons__items-container {
  margin-right: calc(-20 / var(--design-width-sp) * 100vw);
  margin-top: 40px;
}
@media (min-width: 769px) {
  .p-reasons__items-container {
    margin-right: min(-64px, calc(-64 / var(--design-width-pc) * 100vw));
    margin-top: 60px;
  }
}
.p-reasons__items-wrap {
  position: relative;
}

.p-reasons__item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-reasons__item {
  height: auto;
  width: 261px;
  padding: 36px 26px 32px;
  border-radius: 8px;
  background-color: var(--color-pink-1);
}
@media (min-width: 769px) {
  .p-reasons__item {
    width: 80%;
    max-width: 440px;
    padding: 55px 40px 50px;
    border-radius: 16px;
  }
}
.p-reasons__item-heading-group {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 15px;
  justify-content: center;
}
.p-reasons__item-heading {
  color: var(--color--pink3, #ff6fa6);
  text-align: center;
  font-family: var(--font-family-zen-kaku);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
}
@media (min-width: 769px) {
  .p-reasons__item-heading {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}
.p-reasons__item-icon {
  width: fit-content;
  margin-inline: auto;
}
.p-reasons__item-text {
  color: var(--color-text-gray);
  font-family: var(--font-family-noto-san);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.7px;
  margin-top: 20px;
  margin-bottom: 24px;
}
@media (min-width: 769px) {
  .p-reasons__item-text {
    font-size: 16px;
    letter-spacing: 0.8px;
    margin-top: 24px;
    margin-bottom: 30px;
  }
}
.p-reasons__item-button {
  margin-top: auto;
}

.p-reasons__item-button > .c-button-pink {
  font-size: calc(15 / var(--design-width-sp) * 100vw);
  min-height: calc(56 / var(--design-width-sp) * 100vw);
  border-radius: 4px;
}
@media (min-width: 769px) {
  .p-reasons__item-button > .c-button-pink {
    font-size: 18px;
    min-height: 64px;
  }
}

.p-reasons .swiper-wrapper {
  padding-bottom: 28px;
}
@media (min-width: 769px) {
  .p-reasons .swiper-wrapper {
    padding-bottom: 42px;
  }
}
.p-reasons .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  bottom: 0;
}
.p-reasons .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: var(--color-gray-2);
  opacity: 1;
  border-radius: 50%;
}
.p-reasons .swiper-pagination-bullet-active {
  background-color: var(--color-pink-3);
}

.p-reasons .p-reasons__swiper-prev,
.p-reasons .p-reasons__swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-pink-2);
  background-image: url(../images/malaysia-university/common/icon-arrow-pink.svg);
  background-size: 14px 18px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.3s ease;
}
.p-reasons .p-reasons__swiper-prev {
  left: -18px;
  transform: rotate(-180deg) translateY(50%);
}
.p-reasons .p-reasons__swiper-next {
  right: 18px;
}
@media (min-width: 769px) {
  .p-reasons .p-reasons__swiper-prev,
  .p-reasons .p-reasons__swiper-next {
    width: 48px;
    height: 48px;
    background-size: 18px 22px;
  }

  .p-reasons .p-reasons__swiper-prev {
    left: -20px;
  }

  .p-reasons .p-reasons__swiper-next {
    right: 90px;
  }
}
@media (min-width: 769px) {
  .p-reasons .p-reasons__swiper-prev:hover,
  .p-reasons .p-reasons__swiper-next:hover {
    background-color: var(--color-pink-3);
    background-image: url(../images/malaysia-university/common/icon-arrow-pink-hover.svg);
  }
}
.p-reasons .p-reasons__swiper-prev svg,
.p-reasons .p-reasons__swiper-next svg {
  display: none;
}

.p-cta {
  margin-top: 48px;
}
@media (min-width: 769px) {
  .p-cta {
    margin-top: 104px;
  }
}
.c-line-button.--flow-page span {
  background-image: none;
  padding-left: 0;
}
.c-line-button.--flow-page {
  border-radius: 8px;
  min-height: calc(64 / var(--design-width-sp) * 100vw);
  font-size: calc(17 / var(--design-width-sp) * 100vw);
  letter-spacing: 0.85px;
}
@media (min-width: 769px) {
  .c-line-button.--flow-page {
    font-size: 20px;
    letter-spacing: 1.8px;
    min-height: 64px;
  }
}

.c-line-button.--flow-page:hover span {
  background-image: none;
  padding-left: 0;
}