/* 1240 768 */

:root {
  --text_color1: #323232;
  --text_color2: #545454;
  --text_color3: #bd2b48;
  --highlight_color: #d4af37;
  --background_white1: #FFFFFF;
  --background_gray: #F1F2F2;
  --background_white2: #FEFAF9;
  --background_navy1: #162549;
  --background_navy2: #001f3f;
  --background_pink: #F9F1EE;
  --arrow_color: #CCCCCC;
}

.text_red {
  color: var(--text_color3);
}

.text_black {
  color: var(--text_color1);
}

.text_bold {
  font-weight: bold;
}

.required-mark {
  color: red;
}

.required-note {
  color: red;
  font-weight: bold;
  margin: 10px 0;
}

.gray_line {
  margin: 0;
  width: 100%;
  height: 0.1vw;
  border: none;
  background-color: var(--arrow_color);
}

.red_line {
  margin-top: 4.17vw;
  width: 10.42vw;
  height: 0.16vw;
  background-color: var(--text_color3);
}

.black_line {
  margin-top: 2.6vw;
  width: 100%;
  height: 0.16vw;
  border: none;
  background-color: var(--text_color1);
}

.yellow_line {
  width: 13.02vw;
  height: 0.31vw;
  background-color: var(--highlight_color);
}

.selected_link {
  position: relative;
  text-decoration: none; 
}

.selected_link::after {
  content: "";
  position: absolute;
  bottom: -1.04vw;
  left: 0;
  width: 100%;
  height: 0.31vw;
  background-color: var(--text_color3);
  border-radius: 0.16vw;
}

.space {
  height: 4.17vw;
}

.text_space {
  display: inline-block;
  width: 18.23vw;
}

body {
  margin: 0;
  padding: 0;
}

.parent_bg, .parent_bg_sp {
  background-color: var(--background_white1);
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.6vw 0;
  font-size: 1vw;
}

.logo {
  height: 3.13vw;
}

.icon {
  height: 2.08vw;
}

.header_links a {
  text-decoration: none;
  margin-left: 2.08vw;
  color: var(--text_color1);
}

.header_lang {
  display: flex;
  align-items: center;
  margin-left: 2.6vw;
  gap: 0.52vw;
  font-weight: bold;
  color: var(--text_color1);
}

.header_btns {
  margin-left: 1.04vw;
}

.header_btn {
  background-color: var(--text_color3);
  color: var(--background_white1);
  padding: 0.78vw 1.3vw;
  border: none;
  border-radius: 2.6vw;
  font-size: 1.3vw;
  font-weight: bold;
  cursor: pointer;
  margin-left: 0.52vw;
}


.bg {
  height: 60px;
  width: 100%;
  background-color: var(--arrow_color);
  position: fixed;
  top: 0;
  left: 0;
}
.bottom {
  height: 1000px;
  background-color: rgba(255, 0, 0, 0.319);
}


/* 導入事例 */

.casebox_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.casebox_wrapper {
  overflow: hidden;
  width: 70vw;
}

.casebox_list {
  display: flex;
  gap: 4.69vw;
  transition: transform 0.5s ease-in-out;
}

.casebox_card {
  width: 21.88vw;
  height: 33.85vw;
  background-color: var(--background_white1);
  border: 0.16vw solid var(--arrow_color);
}

.casebox_img {
  width: 100%;
  height: 14.43vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.casebox_img img {
  width: 100%;
}

.casebox_btn {
  position: absolute;
  bottom: 1.04vw;
  right: 1.04vw;
  background-color: var(--background_white1);
  border: 0.26vw solid var(--text_color3);
  color: var(--text_color1);
  border-radius: 2.6vw;
  font-size: 1.3vw;
  padding: 0.52vw 1.04vw;
  cursor: pointer;
  text-decoration: none;
}

.casebox_label {
  margin: 1.56vw;
  padding: 0.26vw 1.56vw;
  background-color: var(--text_color3);
  border-radius: 2.6vw;
  color: var(--background_white1);
  font-size: 1.3vw;
  font-weight: bold;
  text-align: left;
}

.casebox_excerpt {
  margin-left: 1.56vw;
  margin-right: 1.56vw;
  color: var(--text_color2);
  font-size: 1.3vw;
}

.casebox_company {
  margin: 1.04vw 1.56vw;
  color: var(--text_color1);
  font-size: 1.3vw;
}

.casebox_arrow {
  cursor: pointer;
  width: 3vw;
}


.case-intro-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.case-intro-swiper {
    width: 100%;
    padding: 2vw 0;
}

.case-intro-wrapper {
    display: flex;
}

.case-intro-slide {
    width: 21.88vw;
    height: 33.85vw;
    background-color: var(--background_white1);
    border: 0.16vw solid var(--arrow_color);
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.case-intro-img {
    width: 100%;
    height: 14.43vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.case-intro-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.case-intro-btn {
    position: absolute;
    bottom: 1.04vw;
    right: 1.04vw;
    background-color: var(--background_white1);
    border: 0.26vw solid var(--text_color3);
    color: var(--text_color1);
    border-radius: 2.6vw;
    font-size: 1.3vw;
    padding: 0.52vw 1.04vw;
    cursor: pointer;
}

.case-intro-label {
    margin: 1.56vw;
    padding: 0.26vw 1.56vw;
    background-color: var(--text_color3);
    border-radius: 2.6vw;
    color: var(--background_white1);
    font-size: 1.3vw;
    font-weight: bold;
    text-align: left;
    display: inline-block;
}

.case-intro-desc {
    margin: 0 1.56vw;
    color: var(--text_color2);
    font-size: 1.3vw;
    line-height: 1.6;
}

.case-intro-univ {
    margin: 1.04vw 1.56vw;
    color: var(--text_color1);
    font-size: 1.3vw;
}

.case-intro-nav {
    position: absolute;
    top: 50%;
    width: 3vw;
    height: 3vw;
    background: url('path/to/arrow-icon.png.html') no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}

.case-intro-prev {
    left: 1vw;
}

.case-intro-next {
    right: 1vw;
}

.case-intro-pagination {
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.case-intro-pagination .swiper-pagination-bullet {
    width: 1vw;
    height: 1vw;
    background-color: var(--arrow_color);
    opacity: 0.3;
    border-radius: 50%;
    margin: 0 0.5vw;
    transition: opacity 0.3s;
}

.case-intro-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .case-intro-slide {
        width: 40vw;
        height: auto;
    }

    .case-intro-label,
    .case-intro-desc,
    .case-intro-univ,
    .case-intro-btn {
        font-size: 2vw;
    }

    .case-intro-nav {
        width: 4vw;
        height: 4vw;
    }
}

@media screen and (max-width: 768px) {
    .case-intro-slide {
        width: 80vw;
    }

    .case-intro-label,
    .case-intro-desc,
    .case-intro-univ,
    .case-intro-btn {
        font-size: 3.5vw;
    }

    .case-intro-nav {
        width: 6vw;
        height: 6vw;
    }
}



/* 導入事例スライド */
.cs-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cs-swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-slide {
  box-sizing: border-box;
}

.swiper-wrapper {
  padding-bottom: 2rem;
}

.cs-card {
  width: 100%;
  height: auto;
  background-color: var(--background_white1);
  border: 0.16vw solid var(--arrow_color);
}

.cs-card-img {
  width: 100%;
  height: 14.43vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cs-card-img img {
  width: 100%;
  height: auto;
}

.cs-btn {
  position: absolute;
  bottom: 1.04vw;
  right: 1.04vw;
  background-color: var(--background_white1);
  border: 0.26vw solid var(--text_color3);
  color: var(--text_color1);
  border-radius: 2.6vw;
  font-size: 1.3vw;
  padding: 0.52vw 1.04vw;
  cursor: pointer;
  text-decoration: none;
}

.cs-card-category {
  margin: 1.56vw;
  padding: 0.26vw 1.56vw;
  background-color: var(--text_color3);
  border-radius: 2.6vw;
  color: var(--background_white1);
  font-size: 1.1vw;
  font-weight: bold;
  text-align: left;
}

.cs-card-title {
  margin: 1.56vw;
  padding: 0.26vw 1.56vw;
  background-color: var(--text_color3);
  border-radius: 2.6vw;
  color: var(--background_white1);
  font-size: 1.3vw;
  font-weight: bold;
  text-align: left;
}

.cs-card-excerpt {
  margin-left: 1.56vw;
  margin-right: 1.56vw;
  color: var(--text_color2);
  font-size: 1.3vw;
}

.cs-card-client {
  margin: 1.04vw 1.56vw;
  color: var(--text_color1);
  font-size: 1.3vw;
}

.cs-arrow {
  width: 2vw;
  height: auto;
  cursor: pointer;
}

.cs-pagination {
  margin-top: 2.08vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.56vw;
}

.swiper-pagination-bullet {
  background-color: var(--arrow_color);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--text_color1);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  border: 2px solid #1b2a4e;
}

.price-table th {
  background-color: #1b2a4e;
  color: white;
  padding: 12px;
  text-align: center;
  border: 1px solid #ccc;
  font-weight: bold;
}

.price-table td {
  background-color: #fff;
  text-align: center;
  padding: 14px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.price-table td.price {
  color: #d9476d;
  font-weight: bold;
  font-size: 18px;
}

.top_price_table_wrapper {
  padding: 20px 0;
}

/* コーステーブル */
 .comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica', sans-serif;
    text-align: center;
    font-size: 14px;
  }

  .comparison-table td,
  .comparison-table th {
    border: 1px solid #ccc;
    padding: 12px;
  }

  /* 上部ヘッダー */
  .arrow-head {
    position: relative;
    background-color: #be1e2d;
    color: white;
    font-weight: bold;
    padding: 10px 0;
  }

  .arrow-head::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #be1e2d;
  }

  /* 左ラベル矢印 */
  .arrow-label {
    position: relative;
    background: #666;
    color: white;
    font-weight: bold;
    text-align: left;
    padding: 12px 12px 12px 16px;
    white-space: nowrap;
  }

  .arrow-label::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #666;
  }

  .highlight-red {
    color: #be1e2d;
    font-weight: bold;
  }

  .circle::before {
    content: "◯";
    font-size: 20px;
  }

  .triangle::before {
    content: "△";
    font-size: 20px;
  }

  .cross::before {
    content: "×";
    font-size: 20px;
  }

  .gray-bg {
    background-color: #f8f8f8;
  }

/* リンクの基本スタイル */
.top_price_btn {
    display: inline-flex;
    align-items: center;
    background-color: #4CAF50; /* ボタンの基本色 */
    color: white; /* テキストカラー */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none; /* 下線をなくす */
    border-radius: 5px;
    transition: background-color 0.3s ease; /* マウスオーバー時のスムーズな色変更 */
}

/* マウスオーバー時にグレーに変わる */
.top_price_btn:hover {
    background-color: #888888; /* グレーに変わる */
}

/* アイコンのスタイル */
.top_arrow_container {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    transition: transform 0.3s ease; /* アイコンの移動 */
}

/* マウスオーバー時の矢印の動き */
.top_price_btn:hover .top_arrow_container {
    transform: translateX(5px); /* 右に少し移動 */
}


.breadcrumb {
    width: 1120px;
    margin: 20px auto;
    font-size: 1rem;
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.breadcrumb li {
  margin-right: 5px;
}

.breadcrumb a {
  text-decoration: none;
  color: #007bff;
}

.about_btn a {
  text-decoration: none; /* テキストの下線を消す */
  color: inherit; /* リンクのデフォルトカラーを継承 */
font-size: 28px;
}

.about_btn a:hover {
  background-color: gray; /* マウスオーバー時にグレーの背景色 */
  color: inherit; /* 文字色も変更しない */
}

.about_btn_img {
  vertical-align: middle; /* 画像がテキストと整列するように */
}

.about_btn a:hover {
  background-color: gray; /* マウスオーバー時にグレーの背景色 */
  color: inherit; /* 文字色も変更しない */
}

.about_btn_img {
  vertical-align: middle; /* 画像がテキストと整列するように */
}

.about_others_btn {
  flex: 1;
  text-align: center;
  border: 0.1vw solid var(--arrow_color);
  color: var(--text_color1);
  font-size: 1.82vw;
  box-shadow: 0.52vw 0.52vw 0.78vw var(--arrow_color), -0.52vw 0.52vw 0.78vw var(--arrow_color);
  height: 6.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none; /* リンクの下線を削除 */
}

.about_others_btn:hover {
  background-color: #b0b0b0; /* マウスオーバー時に背景色変更 */
  cursor: pointer; /* マウスカーソルをポインターに */
}

.page-numbers {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0.5em;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.page-numbers:hover {
  background-color: #f0f0f0;
}

.page-numbers.current {
  background-color: #d0d0d0;
  font-weight: bold;
}

.news_title {
  text-decoration: none; /* リンクの下線を消す */
  color: inherit; /* デフォルトの文字色を継承 */
}

/* マウスオーバー時に背景色がグレーに */
.news_title:hover {
  background-color: #d0d0d0; /* グレー背景 */
  color: inherit; /* 文字色をそのまま */
}

.single_post_main {
  padding: 20px;
  background-color: #f9f9f9;
padding: 4.17vw 15.62vw 10.42vw 15.62vw;
}

.single_post_container {
  margin-bottom: 30px;
}

.news_content {
  font-size: 1.2em;
  color: #555;
}

.news_title {
  font-size: 2.5em;
  font-weight: bold;
  color: #333;
}

.single_post_content {
  margin-top: 20px;
  font-size: 1.4em;
  line-height: 1.6;
  color: #333;
}

.news_gray_line {
  border-top: 1px solid #ddd;
  margin-top: 20px;
}

.back_to_list {
  text-align: center;
  margin-top: 30px;
}

.back_button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #bd2b48;
  color: white;
  text-decoration: none;
  font-size: 1.2em;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.back_button:hover {
  background-color: #c3536a; /* マウスオーバー時に色を変更 */
}

.media_item {
  display: flex;
  margin: 0 auto 50px;
  width: 86.43vw;
  height: 23.8vw;
}

.media_left {
  position: relative;
  width: 36vw;
  overflow: hidden;
}

.media_left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.media_right {
  /* メディアタイトルや内容の部分 */
  padding: 30px;
  width: 50.43vw;
  box-sizing: border-box;
  background-color: var(--background_white1);
}


/* フローTOP */
.step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

.step {
  display: flex;
  align-items: center;
  margin: 10px;
  border-radius: 5px;
  width: 600px;
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.step-number {
  font-weight: bold;
    font-size: 20px;
    margin-right: 20px;
    background-color: #1f3b60;
    color: #fff;
    padding: 20px 15px;
}

.step-text {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  text-align: left;
}

.step-title {
  font-weight: bold;
    font-size: 20px;

}

.step-desc {
  margin-top: 6px;
  font-size: 13px;
  font-weight: normal;
  color: #666666;
}

.arrow {
  font-size: 36px;
  color: #1f3b60;
  margin: 20px 0;
}

.dli-chevron-down {
  display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 2em;
    height: 2em;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
}


.promo-banner {
 display: flex
;
    align-items: center;
    justify-content: center;
    border: 2px solid #333;
    /* font-size: 30px; */
    padding: 20px 20px;
    font-family: Arial, sans-serif;
    background-color: white;
    width: 500px;
}


.promo-wrap {
  position: relative;
  display: inline-block;
}

.promo-badge {
  position: absolute;
  right: 100%;
  margin-right: 35px;
  top: 50%;
  transform: translateY(-50%);
  height: 150px;
  width: auto;
}

.promo-badge_sp {
  display: flex;
  justify-self: center;
  height: 200px;
  margin: 0 70px;
}

.promo-subbanner {
  display: flex;
  font-size: 18px;
  align-items: baseline;
  justify-content: center;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
}

.promo-subbanner_sp {
  margin: 30px 0px;
  font-size: 18px;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #333;
  line-height: 2px;
}




.promo-subbanner .promo-highlight , .promo-highlight_sp {
  text-decoration: underline;
  text-decoration-color: #ffd500;
  text-decoration-thickness: 6px;
  line-height: 1;
}

.promo-subbanner .big-price {
  font-size: 35px;
  font-weight: bold;
  color: #e53744;
  line-height: 1;
}

.promo-subbanner_sp .big-price {
  font-size: 25px;
  font-weight: bold;
  color: #e53744;
  line-height: 1;
}

.promo-now {
  font-size: 28px;
  font-weight: bold;
  color: #e53744;
  margin-right: 8px;
}

.promo-now_sp {
  font-size: 7.69vw;
  font-weight: bold;
  color: #e53744;
}

.text-left {
  font-size: 28px;
    font-weight: bold;
    color: #333;
}

.price {
  font-size: 40px;
  color: #b33e5c;  /* 赤色 */
  font-weight: bold;
  margin: 0 10px;
}

.text-right {
      font-size: 28px;
  color: #333;
}

.highlight {
  position: relative;
}

.highlight::before {
  content: "・";
    font-size: 34px;
    position: absolute;
    top: -30px;
    left: 0;
color: #b33e5c;  /* 赤色 */
}

.top_footer_login_btn, .top_footer_inquiry_btn {
    display: inline-block;
    text-align: center;
    color: black; /* Default text color */
    text-decoration: none; /* No underline */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.top_footer_login_btn:hover, .top_footer_inquiry_btn:hover {
    color: gray; /* Change text color to gray on hover */
}


.top_footer_blogs a {
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure links are aligned properly */
}

.top_footer_blogs a:hover {
    opacity: 0.7; /* Change the opacity to make the element appear white-ish on hover */
}

.top_footer_blogs a img {
    transition: opacity 0.3s ease; /* Smooth opacity transition for images */
}

.top_footer_blogs a:hover img {
    opacity: 0.7; /* Make the image appear white-ish on hover */
}

.top_footer_blogs a div {
    color: black; /* Set text color for the blog link */
    transition: color 0.3s ease; /* Smooth color transition for text */
}

.top_footer_blogs a:hover div {
    color: #888888; /* Change the text color to white on hover */
}

/* 全体のフォームデザイン */
/* 全体のフォームデザイン */
.contact-form-container {
  width: 100%;
  max-width: 1000px; /* フォームの横幅をさらに広く */
  margin: 0 auto;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-size: 24px; /* フォントサイズを倍に */
  margin-bottom: 15px;
  color: #333;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 15px;
  font-size: 20px; /* フォントサイズを倍に */
  width: 100%;
  box-sizing: border-box;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  height: 60px;  /* 縦幅を広げる */
}

.contact-form textarea {
  min-height: 150px;  /* 縦幅を広げる */
  resize: vertical;
}

.contact-form select {
  height: 60px;  /* 縦幅を広げる */
  font-size: 20px; /* フォントサイズを倍に */
}

.contact-form .contact_txt p {
  font-size: 18px;  /* フォントサイズを大きく */
  color: #666;
}

.contact-form .contact_txt {
  margin-bottom: 35px;
}

.contact-form .acceptance {
  display: flex;
  align-items: center;
}

.contact-form .acceptance input {
  margin-right: 15px;
}

.contact-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 25px 30px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 24px;  /* フォントサイズを倍に */
  transition: background-color 0.3s;
  width: 100%;
}

.contact-form input[type="submit"]:hover {
  background-color: #45a049;
}


.top_inquiry_btn {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Keeps the current text color */
}

.top_inquiry_btn:hover {
  color: rgba(0, 0, 0, 0.6); /* Example of subtle color change on hover */
  transition: color 0.3s ease; /* Smooth transition for color change */
}


.site_bg {
  padding: 30px 90px;
  background-color: #f7f7f7;
}

.site_content {
  background-color: #fff;
  padding: 90px 175px;
}



/* スマホ版CSS */
.header_sp {
  display: none;
}


.logo_sp {
  width: 100px;
}

.top_footer_bg_sp {
  background-color: var(--background_gray);
  padding: 7.69vw;
}

.top_footer_item_sp a {
  text-decoration: none;
  color: var(--text_color1);
}

.top_footer_title_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 7.69vw;
}

.top_footer_label_sp {
  margin: 7.69vw 0 3.85vw;
  font-size: 6.15vw;
  color: var(--text_color1);
  font-weight: bold;
}

.top_footer_item_sp {
  font-size: 6.15vw;
  color: var(--text_color2);
  cursor: pointer;
}

.top_footer_spinner_sp {
  background-color: var(--background_white1);
  border: 0.77vw solid var(--arrow_color);
  padding: 1.28vw 0;
  border-radius: 12.82vw;
  font-size: 6.15vw;
  font-weight: bold;
  text-align: center;
  color: var(--text_color2);
  width: 51.28vw;
  cursor: pointer;
  text-decoration: none;
}

.top_footer_spinner_sp img {
  margin-left: 5.13vw;
  width: 5.13vw;
}

.top_footer_login_btn_sp {
  margin-top: 7.69vw;
  width: 100%;
  background-color: var(--text_color2);
  padding: 1.28vw 0;
  text-align: center;
  cursor: pointer;
}

.top_footer_login_btn_sp a {
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
  text-decoration: none;
}

.top_footer_inquiry_btn_sp {
  margin-top: 2.56vw;
  width: 100%;
  background-color: var(--text_color3);
  padding: 1.28vw 0;
  text-align: center;
  cursor: pointer;
}

.top_footer_inquiry_btn_sp a {
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
  text-decoration: none;
}

.top_footer_mail_sp {
  margin-top: 5.13vw;
  font-size: 6.15vw;
  color: var(--text_color2);
  text-align: center;
}

.blog_sp {
  margin-top: 12.82vw;
  text-align: center;
}

.blog_sp a {
  color: var(--text_color1);
  font-size: 5.64vw;
  text-decoration: none;
}

.top_footer_blogs_sp {
  margin-top: 5.13vw;
  display: flex;
  gap: 5.13vw;
  justify-content: center;
}

.top_footer_blogs_sp img {
  width: 11.03vw;
  height: 11.03vw;
}

.top_footer2_text_sp {
  margin-top: 12.82vw;
  color: var(--text_color2);
  font-size: 4.10vw;
}

.top_white_line_sp {
  margin: 2.56vw 0;
  width: 100%;
  height: 0.51vw;
  border: none;
  background-color: var(--background_white1);
}

.top_footer_item2_sp {
  display: flex;
  flex-direction: column;
  gap: 1.28vw;
}

.top_footer_item2_sp a {
  text-decoration: none;
  color: var(--text_color1);
  font-size: 4.10vw;
}

.top_bg_sp {
  padding: 7.69vw 7.69vw 12.82vw 7.69vw;
}

.top_inquiry_text1_sp {
  color: var(--text_color2);
  font-size: 6.15vw;
  line-height: 6.15vw;
}

.top_inquiry_text2_sp {
  margin: 7.69vw 0; 
  color: var(--background_navy2);
  font-size: 12.31vw;
  line-height: 15vw;
}

.top_inquiry_text3_sp {
  color: var(--text_color1);
  font-size: 6.67vw;
  line-height: 6.67vw;
}

.top_inquiry_btn_sp {
  margin-top: 12.82vw;
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
  background-color: var(--text_color3);
  width: 100%;
  padding: 2.56vw 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.15vw;
}

.top_arrow_container_sp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.38vw;
  height: 5.38vw;
}

.top_inquiry_img1_sp {
  width: 100%;
}

.top_companys_bg_sp {
  padding: 12.31vw 0;
  background-color: var(--background_gray);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.13vw;
}

.top_companys_sp {
  display: flex;
}

.top_companys_sp img {
  width: 33.33vw;
  height: 11.54vw;
  object-fit: contain;
}

.top_about_bg_sp {
  padding: 12.31vw 7.69vw;
  position: relative;
}

.top_about_arch1_sp {
  position: absolute;
  top: 2.56vw;
  left: -2.56vw;
  width: 15.38vw;
}

.top_about_arch2_sp {
  position: absolute;
  bottom: 2.56vw;
  right: -2.56vw;
  width: 18.21vw;
  transform: rotate(90deg);
}

.top_about_dot1_sp {
  position: absolute;
  top: 33.33vw;
  right: -1.28vw;
  width: 9.49vw;
}

.top_about_dot2_sp {
  position: absolute;
  bottom: 38.46vw;
  left: -5.13vw;
  width: 24.87vw;
}

.top_about_sp {
  color: var(--text_color3);
  font-size: 8.72vw;
  font-weight: bold;
  text-align: center;
}

.top_about_title_sp {
  margin-top: 12.31vw;
  color: var(--background_navy2);
  font-size: 11.79vw;
  line-height: 14vw;
  font-weight: bold;
}

.top_about_text1_sp {
  margin-top: 7.69vw;
  color: var(--text_color2);
  font-size: 6.15vw;
  text-align: center;
}

.top_about_text2_sp {
  margin-top: 7.69vw;
  color: var(--text_color2);
  font-size: 6.15vw;
  text-align: center;
}

.top_about_text3_sp {
  margin: 7.69vw 0;
  color: var(--text_color2);
  font-size: 6.67vw;
  text-decoration: underline;
  text-decoration-thickness: 3.08vw;
  text-decoration-color: var(--highlight_color);
  text-underline-offset: -5px;
  text-align: center;
}

.top_training_bg_sp {
  background-color: var(--background_gray);
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 12.31vw 0;
}

.top_training_sp {
  font-size: 7.69vw;
  color: var(--text_color1);
}

.top_training_title_sp {
  margin-top: 7.69vw;
  font-size: 10.77vw;
  color: var(--background_navy2);
  font-weight: bold;
}

.top_training_container_sp {
  margin-top: 12.31vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7.69vw;
}

.top_training_box_sp {
  width: 84.62vw;
  position: relative;
  padding-top: 2.56vw;
}

.top_backbground_blue_sp {
  background-color: #4cd4fc;
  border-radius: 2.56vw;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.top_backbground_white_sp {
  position: relative;
  background-color: var(--background_white1);
  border-radius: 2.56vw;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  z-index: 1;
}

.top_box_img_sp {
  width: 46.15vw;
}

.top_box_text1_sp {
  margin-top: 2.56vw;
  font-size: 6.15vw;
  color: var(--text_color1);
  text-align: center;
  line-height: 7vw;
}

.top_box_arrow_sp {
  margin: 5.13vw 0;
  width: 6.67vw;
}

.top_box_text2_sp {
  font-size: 6.15vw;
  color: var(--text_color3);
  text-align: center;
  line-height: 8vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.top_box_text2_sp.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.top_box_more_sp {
  margin-top: 3.08vw;
  text-align: center;
  color: var(--text_color2);
  font-size: 5.13vw;
  font-weight: bold;
  cursor: pointer;
}

.top_box_more_sp::after {
  content: '＋';
  margin-left: 1.54vw;
  font-weight: bold;
}

.top_box_text2_sp.expanded + .top_box_more_sp::after {
  content: '−';
}

.top_style_text_bg_sp {
  padding: 12.31vw 7.69vw;
}

.top_style_bg_sp img {
  width: 100%;
}

.top_style_sp {
  font-size: 7.69vw;
  color: var(--text_color3);
  text-align: center;
}

.top_style_title_sp {
  margin-top: 7.69vw;
  font-size: 12.31vw;
  font-weight: bold;
  color: var(--background_navy2);
  text-align: center;
}

.top_style_subtitle_sp {
  margin-top: 3.08vw;
  font-size: 6.15vw;
  font-weight: bold;
  color: var(--text_color1);
  text-align: center;
}

.top_style_nationality_sp {
  margin-top: 5.13vw;
  font-size: 4.62vw;
  color: var(--text_color2);
  text-align: left;
}

.top_style_flags_sp {
  margin-top: 3.08vw;
  display: flex;
  flex-wrap: wrap;
  gap: 2.05vw;
  font-size: 7.69vw;
  line-height: 1;
}

.top_style_flags_caption_sp {
  margin-top: 2.05vw;
  font-size: 3.59vw;
  color: var(--text_color2);
}

.top_style_text1_sp {
  margin-top: 7.69vw;
  font-size: 9.49vw;
  color: var(--text_color1);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--highlight_color);
  text-decoration-thickness: 1.54vw;
  text-underline-offset: 1.54vw;
}

.top_style_text2_sp {
  margin-top: 5.13vw;
  font-size: 6.15vw;
  color: var(--text_color2);
}

.top_style_btn_sp {
  margin: 12.31vw auto;
  width: 53.85vw;
  height: 10.26vw;
  color: var(--background_white1);
  font-size: 5.64vw;
  font-weight: bold;
  background-color: var(--text_color3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_course_title_sp {
  font-size: 10.77vw;
  color: var(--background_navy2);
  text-align: center;
}

.top_course_content_sp {
  margin: 5.13vw 7.69vw;
  font-size: 4.10vw;
  color: var(--text_color2);
}

.top_courses_sp {
  display: flex;
  flex-direction: column;
}

.top_course_sp {
  margin: 2.56vw auto 0;
  background-color: var(--background_navy2);
  border-radius: 7.69vw;
  width: 76.92vw;
  min-height: 11.54vw;
  padding: 2.05vw 5.13vw;
  box-sizing: border-box;
  color: var(--background_white1);
  font-size: 7.69vw;
  line-height: 1.3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.13vw;
}

.top_course_sp img {
  width: 4.62vw;
}

.rotate180 {
  transform: rotate(180deg);
}


.top_course_container_sp {
  background-color: var(--background_gray);
  padding: 5.13vw;
  display: none;
}

.top_course_container_sp img {
  width: 25.64vw;
  display: flex;
  margin: 0 auto;
}

.top_course_right_title_sp {
  margin-top: 2.56vw;
  font-size: 8.21vw;
  color: var(--background_navy2);
}

.top_label_sp {
  margin-top: 5.13vw;
  font-size: 6.15vw;
  font-weight: bold;
}

.top_content_sp {
  margin-top: 2.56vw;
  font-size: 6.15vw;
} 

.top_course_btn_container_sp {
  margin: 7.69vw auto 25.64vw;
}

.top_course_btn_sp {
  color: var(--background_white1);
  width: 76.92vw;
  height: 10.77vw;
  font-size: 5.64vw;
  background-color: var(--text_color3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_price_bg_sp {
  padding: 25.64vw 7.69vw;
  background-color: var(--background_gray);
  position: relative;
}

.top_price_title_sp {
  display: flex;
  justify-content: center;
  font-size: 10.77vw;
  color: var(--background_navy2);
}

.top_center_container_sp {
  display: flex;
  justify-content: center;
}

.price_sp {
  margin-left: 5.13vw;
  font-size: 14.36vw;
  color: var(--text_color3);
  font-weight: bold;
}

.highlight_sp {
  position: relative;
} 

.highlight_sp::before {
  content: "・";
  font-size: 7.69vw;
  position: absolute;
  top: -6.41vw;
  left: 0;
  color: var(--text_color3);
}

.top_price_content_sp {
  margin: 7.69vw 0;
  font-size: 4.10vw;
  color: var(--text_color2);
}

.top_price_table_wrapper_sp {
  overflow-x: auto;
  position: relative;
  margin: 0 -7.69vw;
}

.price-table_sp {
  margin: 0 7.69vw;
  border-collapse: collapse;
  display: table;
  font-family: sans-serif;
  border: 2px solid #1b2a4e;
}

.price-table_sp th {
  background-color: #1b2a4e;
  color: white;
  padding: 12px;
  text-align: center;
  border: 1px solid #ccc;
  font-weight: bold;
  font-size: 6.67vw;
  white-space: nowrap;
}

.price-table_sp td {
  background-color: #fff;
  text-align: center;
  padding: 14px;
  border: 1px solid #ccc;
  font-size: 6.67vw;
  white-space: nowrap;
}

.price-table_sp td.price {
  color: #d9476d;
  font-weight: bold;
  font-size: 18px;
}

.top_price_btn_sp {
  margin-top: 12.82vw;
  color: var(--background_white1);
  width: 100%;
  height: 10.77vw;
  font-size: 5.64vw;
  font-weight: bold;
  background-color: var(--text_color3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_usage_flow_bg_sp {
  padding: 25.64vw 7.69vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  gap: 7.69vw;
}

.top_usage_flow_title_sp {
  font-size: 9.49vw;
  color: var(--background_navy2);
}

.step-number_sp {
  padding: 1.28vw 5.13vw;
  font-size: 5.64vw;
  background-color: #1f3b60;
  color: #fff;
}

.step-title_sp {
  width: 100%;
  padding: 1.28vw 0;
  font-size: 5.64vw;
  text-align: center;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.step-desc_sp {
  width: 100%;
  padding: 0 5.13vw 3.08vw;
  font-size: 3.59vw;
  color: #666666;
  text-align: center;
}

.top_usage_flow_arrow {
  width: 5.64vw;
}

.top_introduction_bg_sp {
  padding: 25.64vw 0;
  background-color: var(--background_gray);
}

.top_introduction_title_sp {
  margin-left: 7.69vw;
  font-size: 9.49vw;
  color: var(--background_navy2);
}

.cs-wrapper_sp {
  padding: 12.82vw 2.56vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs-card_sp {
  margin: 0 auto 12.82vw;
  width: 76.92vw;
  height: auto;
  background-color: var(--background_white1);
  border: 0.16vw solid var(--arrow_color);
  padding-bottom: 12.82vw;
  position: relative;
}

.cs-card-img_sp {
  width: 76.92vw;
  min-height: 51.28vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-card-img_sp img {
  width: 84.62vw;
  height: auto;
}

.cs-btn_sp {
  position: absolute;
  top: 33.33vw;
  right: 2.56vw;
  padding: 1.28vw 2.56vw;
  background-color: var(--background_white1);
  border: 3px solid var(--text_color3);
  color: var(--text_color1);
  border-radius: 7.69vw;
  font-size: 5.13vw;
  cursor: pointer;
  text-decoration: none;
}

.cs-card-category_sp {
  margin: 2.56vw 5.13vw 0;
  padding: 1.28vw 0;
  background-color: var(--text_color3);
  border-radius: 2.6vw;
  color: var(--background_white1);
  font-size: 4.62vw;
  font-weight: bold;
  text-align: center;
}

.cs-card-excerpt_sp {
  margin: 2.56vw 5.13vw;
  color: var(--text_color2);
  font-size: 4.62vw;
}

.cs-card-client_sp {
  margin: 0 5.13vw;
  color: var(--text_color1);
  font-size: 4.62vw;
}

.cs-pagination_sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.56vw;
} 

.cs-pagination_sp .swiper-pagination-bullet {
  background-color: var(--arrow_color);
  opacity: 1;
  width: 3.33vw;
  height: 3.33vw;
}

.cs-pagination_sp .swiper-pagination-bullet-active {
  background-color: var(--text_color1);
}

.cs-arrow_sp {
  width: 4.10vw;
  height: auto;
  cursor: pointer;
}

.cs-arrow_sp.cs-arrow-next {
  transform: rotate(180deg);
}

.top_affiliate_bg_sp {
  padding: 25.64vw 0;
  background: #fff;
}

.affili_pagination_pc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.affili_pagination_pc .swiper-pagination-bullet {
  background: #cfcfcf;
  opacity: 1;
  width: 12px;
  height: 12px;
}
.affili_pagination_pc .swiper-pagination-bullet-active {
  background: #7a7a7a;
}


.top_affiliates_sp {
  padding: 0 5.13vw;
  display: flex;
  gap: 5.13vw;
}

.affili_imgs img {
  width: 76.92vw;
}

.affili_pagination_sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.56vw;
} 

.affili_pagination_sp .swiper-pagination-bullet {
  background-color: var(--arrow_color);
  opacity: 1;
  width: 3.33vw;
  height: 3.33vw;
}

.affili_pagination_sp .swiper-pagination-bullet-active {
  background-color: var(--text_color1);
}

.affili_imgs {
  margin-bottom: 50px;
}

.course_header_sp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.course_img_sp {
  height: 102.56vw;
}

.course_title_sp {
  margin: 0 7.69vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: var(--background_white1);
  font-size: 11.54vw;
  font-weight: bold;
}

.courses_main_sp {
  padding: 7.69vw 7.69vw 12.82vw 7.69vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.course_no_img {
  margin-top: 7.69vw;
  width: 20.51vw;
  height: 20.51vw;
}

.course_text1_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 10.77vw;
}

.course_text2_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 6.15vw;
  text-align: left;
}

.course_annotation_sp {
  margin-top: 7.69vw;
  color: var(--text_color2);
  font-size: 5.13vw;
}

.program_header_sp {
  padding: 12.82vw 7.69vw 38.46vw;
  background-color: var(--text_color3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--background_white1);
  font-size: 12.31vw;
  text-align: center;
}

.programs_sp {
  margin-top: -25.64vw;
  padding: 0 7.69vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.programs_sp img {
  width: 51.28vw;
}

.program_label_sp {
  margin-top: -5.13vw;
  color: var(--text_color3);
  font-size: 7.18vw;
  font-weight: bold;
}

.program_title_sp {
  color: var(--text_color1);
  font-size: 8.21vw;
  font-weight: bold;
}

.program_text_sp {
  margin: 5.13vw 0;
  color: var(--text_color1);
  font-size: 6.15vw;
}

.course_infoimg_compare {
  width: 192.31vw;
}

.program_courses_sp {
  background-color: var(--text_color3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20.51vw 7.69vw;
}

.program_course_sp {
  color: var(--background_white1);
  font-size: 7.18vw;
  font-weight: bold;
  text-align: center;
}

.program_class_sp {
  margin-top: 7.69vw;
  color: var(--background_white1);
  font-size: 12.05vw;
  font-weight: bold;
  text-align: center;
}

.program_courses_sp a {
  margin-top: 7.69vw;
  background-color: var(--background_white1);
  border-radius: 7.69vw;
  border: none;
  padding: 1.28vw 0;
  width: 100%;
  color: var(--text_color3);
  font-size: 7.18vw;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group_bg_sp {
  padding: 20.51vw 7.69vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.group_title_sp {
  color: var(--text_color1);
  font-size: 7.18vw;
  text-align: center;
}

.group_name_sp {
  margin-top: 12.82vw;
  background-color: var(--background_navy1);
  color: var(--background_white1);
  font-size: 7.18vw;
  text-align: center;
  padding: 1.28vw 5.13vw;
}

.group_bg_sp img {
  margin: 2.56vw auto 0;
  width: 15.38vw;
}

.group_detail_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 5.38vw;
}

.group_detail_sp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group_detail_sp.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

.group_more_sp {
  margin-top: 5.13vw;
  color: var(--text_color2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.56vw;
}

.group_more_sp::after {
  content: '>';
  display: inline-block;
  transform: rotate(90deg);
  font-size: 5.13vw;
}

.group_more_sp.open::after {
  transform: rotate(-90deg);
}

.price_header_sp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.price_img_sp {
  height: 102.56vw;
}

.price_title_sp {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--background_white1);
  font-size: 11.54vw;
  font-weight: bold;
}

.price_main_sp {
  padding: 7.69vw 7.69vw 12.82vw 7.69vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.price_text1_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 12.31vw;
  text-align: center;
}

.price_text2_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 10.77vw;
  text-align: center;
}

.price_text3_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 7.69vw;
  text-align: center;
}

.price_course_sp {
  margin-top: 7.69vw;
  background-color: var(--background_gray);
  padding: 7.69vw 5.13vw 12.82vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.85vw;
  width: 100%;
  box-sizing: border-box;
}

.course_label_sp {
  background-color: var(--background_navy1);
  width: 80%;
  color: var(--background_white1);
  font-size: 6.67vw;
  font-weight: bold;
  text-align: center;
  padding: 1.28vw 0;
}

.price_course_text1_sp {
  color: var(--text_color1);
  font-size: 8.21vw;
  font-weight: bold;
}

.price_course_text2_sp {
  color: var(--text_color1);
  font-size: 6.15vw;
  text-align: center;
}

.price_course_text3_sp {
  color: var(--text_color1);
  font-size: 5.90vw;
  text-align: center;
}

.course_plan_sp {
  background-color: var(--background_white1);
  width: 100%;
  padding: 1.28vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.plan_text1_sp {
  color: var(--text_color3);
  font-size: 7vw;
  font-weight: bold;
}

.plan_text2_sp {
  color: var(--text_color1);
  font-size: 6.15vw;
}

.manage_page_sp {
  background-color: var(--background_navy1);
  padding: 12.82vw 0 38.46vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.manage_title_sp {
  color: var(--background_white1);
  font-size: 10.77vw;
  text-align: center;
}

.manage_text_sp {
  margin: 7.69vw;
  color: var(--background_white1);
  font-size: 7.69vw;
  text-align: center;
}

.manage_imgs_sp {
  margin-top: -34.62vw;
  margin-bottom: 25.64vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.69vw;
}

.manage_img_sp {
  width: 89.74vw;
}

.support_bg_sp {
  padding: 12.82vw 7.69vw;
  background-color: var(--background_pink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.support_text_sp {
  color: var(--text_color1);
  font-size: 7.69vw;
  text-align: center;
}

.support_title_sp {
  margin-top: 5.13vw;
  color: var(--text_color3);
  font-size: 10.77vw;
  text-align: center;
}

.business_label_sp {
  margin-top: 7.69vw;
  padding: 1.28vw 0;
  background-color: var(--background_navy1);
  width: 100%;
  color: var(--background_white1);
  font-size: 8.21vw;
  text-align: center;
}

.support_bg_sp img {
  margin-top: 2.56vw;
  width: 34.62vw;
}

.business_text_sp {
  margin-top: 2.56vw;
  color: var(--text_color2);
  font-size: 6.15vw;
}

.button_container_sp {
  padding: 12.82vw 7.69vw;
}

.business_btn_sp  {
  background-color: var(--text_color3);
  border-radius: 7.69vw;
  border: none;
  padding: 2.56vw 0;
  width: 100%;
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
  cursor: pointer;
}

.introPage_img_sp {
  height: 128.21vw;
}

.introPage_container_sp {
  margin-top: 7.69vw;
  width: 100%;
  background-color: var(--background_white1);
  padding: 5.13vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.introPage_container_sp img {
  width: 100%;
}

.introPage_name_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 6.15vw;
  text-align: center;
}

.introPage_text1_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 6.15vw;
  font-weight: bold;
  text-align: center;
}

.introPage_text2_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 4.62vw;
  text-align: center;
}

.introPage_labels_sp {
  margin-top: 5.13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.13vw;
}

.introPage_labels_ho_sp {
  display: flex;
  justify-content: center;
  gap: 5.13vw;
}

.introPage_label_sp {
  background-color: var(--arrow_color);
  border-radius: 7.69vw;
  padding: 1.28vw 5.13vw;
  color: var(--text_color1);
  font-size: 4.62vw;
  text-align: center;
  width: fit-content;
  height: 6.67vw;
}

.introPage_btn_sp {
  margin: 7.69vw 0;
  background-color: var(--text_color3);
  border-radius: 2.56vw;
  text-decoration: none;
  color: var(--background_white1);
  font-size: 5.13vw;
  text-align: center;
  cursor: pointer;
  padding: 1.28vw 12.82vw;
}

.introPageLead_sp {
  margin: 7.69vw 0;
}

.introPageLead_text_sp {
  color: var(--text_color1);
  font-size: 5.13vw;
  line-height: 1.7;
}

.introPageLead_stats_sp {
  margin-top: 5.13vw;
  padding-left: 0;
  list-style: none;
}

.introPageLead_stats_sp li {
  position: relative;
  padding-left: 5.13vw;
  margin-bottom: 2.56vw;
  color: var(--text_color1);
  font-size: 4.62vw;
  font-weight: bold;
}

.introPageLead_stats_sp li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--highlight_color, #e53744);
  font-size: 3.5vw;
}

.introPageRecruit_bg_sp {
  background-color: var(--background_white1);
  padding: 12.82vw 7.69vw;
}

.introPageRecruit_title_sp {
  margin-bottom: 7.81vw;
  text-align: center;
  color: var(--text_color1);
  font-size: 7.18vw;
}

.red_line_sp {
  margin-top: 7.69vw;
  width: 25.64vw;
  height: 0.77vw;
  background-color: var(--text_color3);
}

.introPageRecruit_text1_sp {
  margin-top: 3.85vw;
  color: var(--text_color1);
  font-size: 7.18vw;
  font-weight: bold;
}

.introPageRecruit_text2_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 5.38vw;
}

.introPageRecruit_more_sp {
  margin-top: 2.56vw;
  text-align: end;
  color: var(--text_color2);
  font-size: 5.13vw;
}

.introPageRecruit_more_sp::after {
  content: '>';
  display: inline-block;
  margin-left: 2.56vw;
  transform: rotate(90deg);
  font-size: 6.15vw;
  font-weight: bold;
}

.introPageRecruit_more_sp.open::after {
  transform: rotate(-90deg);
}

.introduction_header_sp {
  background-color: var(--background_gray);
  padding: 12.82vw 7.69vw;
  display: flex;
  flex-direction: column;
}

.introduction_sp {
  color: var(--text_color3);
  font-size: 6.15vw;
  font-weight: bold;
}

.introduction_name_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 7.18vw;
}

.introduction_header_sp img {
  margin-top: 5.13vw;
  width: 100%;
}

.introduction_title_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 9.49vw;
  text-align: center;
}

.introduction_labels_sp {
  margin-top: 5.13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.13vw;
}

.introduction_labels_ho_sp {
  display: flex;
  justify-content: center;
  gap: 5.13vw;
}

.introduction_label_sp {
  background-color: var(--text_color2);
  border-radius: 7.69vw;
  padding: 1.28vw 5.13vw;
  color: var(--background_white1);
  font-size: 5.13vw;
  text-align: center;
  width: fit-content;
  height: 6.67vw;
}

.introduction_interviewer_sp {
  margin-top: 7.69vw;
  text-align: center;
  color: var(--text_color1);
  font-size: 4.62vw;
}

.introduction_main_sp {
  padding: 12.82vw 7.69vw;
}

.introduction_text1_sp {
  margin-top: 7.69vw;
  color: var(--text_color2);
  font-size: 7.18vw;
  font-weight: bold;
}

.introduction_text2_sp {
  margin-top: 7.69vw;
  color: var(--text_color2);
  font-size: 5.38vw;
}

.introduction_text3_sp {
  margin: 12.82vw 0 5.13vw;
  color: var(--text_color2);
  font-size: 4.10vw;
}

.introduction_main_sp img {
  margin: 7.69vw 0;
  width: 100%;
}

.etc_sp {
  text-align: end;
  color: var(--text_color2);
  font-size: 5.38vw;
}

.introduction_main2_sp {
  background-color: var(--background_gray);
  padding: 12.82vw 7.69vw;
}

.introduction_main2_sp img {
  margin: 7.69vw 0;
  width: 100%;
} 

.campaign_img_sp {
  height: 153.85vw;
}

.campaign_header_texts_sp {
  position: absolute;
  top: 0;
  left: 7.69vw;
  bottom: 0;
  right: 7.69vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.campaign_title_sp {
  color: var(--background_white1);
  font-size: 11.54vw;
  font-weight: bold;
  line-height: 13vw;
}

.campaign_subtitle_sp {
  margin-top: 7.69vw;
  color: var(--background_white1);
  font-size: 6.15vw;
  line-height: 7vw;
}

.campaign_more_btn_sp {
  margin-top: 7.69vw;
  background-color: var(--text_color3);
  color: var(--background_white1);
  font-size: 6.15vw;
  width: 100%;
  padding: 2.56vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign_more_btn_sp::after {
  content: '>';
  display: inline-block;
  transform: rotate(90deg);
  font-size: 7.69vw;
  margin-left: 7.69vw;
}

.campaign_main_sp {
  padding: 12.82vw 7.69vw;
  display: flex;
  flex-direction: column;
  gap: 5.13vw;
}

.campaign_sp {
  color: var(--text_color1);
  font-size: 7.18vw;
  font-weight: bold;
}

.campaign_main_sp a {
  text-decoration: none;
  color: var(--text_color2);
  font-size: 5.38vw;
  display: flex;
  align-items: center;
}

.campaign_main_sp a img {
  margin-left: 5.13vw;
}

.campaign_gray_sp {
  background-color: var(--background_gray);
  padding: 12.82vw 7.69vw;
}

.campaign_title2_sp {
  color: var(--text_color1);
  font-size: 8.21vw;
}

.campaign_subtitle2_sp {
  margin-top: 5.13vw;
  color: var(--text_color2);
  font-size: 5.38vw;
  font-weight: bold;
}

.campaign_labels_sp {
  margin-top: 5.13vw;
  display: flex;
  flex-direction: column;
  gap: 5.13vw;
}

.campaign_labels_ho_sp {
  display: flex;
  gap: 5.13vw;
}

.campaign_label_sp {
  padding: 1.28vw 5.13vw;
  border: 0.51vw solid var(--text_color3);
  border-radius: 5.13vw;
  color: var(--text_color1);
  font-size: 4.62vw;
  min-width: 17.95vw;
  text-align: center;
}

.benefits_sp {
  margin-top: 12.82vw;
  width: 100%;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.benefit_container_red_sp {
  background-color: var(--text_color3);
  padding: 5.13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.benefit_container_red_sp img {
  width: 41.03vw;
}

.benefits_title_sp {
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
}

.benefit_container_white_sp {
  background-color: var(--background_white1);
  padding: 5.13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.benefits_content_sp {
  color: var(--text_color1);
  font-size: 6.15vw;
  text-align: center;
}

.campaign_courses_sp {
  background-color: var(--background_white1);
  margin-top: 12.82vw;
  padding: 5.13vw;
  width: 100%;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.course_title1_sp {
  color: var(--text_color1);
  font-size: 5.38vw;
  font-weight: bold;
}

.course_content_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 5.38vw;
  background: #fff;
}

.course_title2_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 6.15vw;
  font-weight: bold;
}

.campaign_item_sp {
  margin-top: 5.13vw;
  color: var(--text_color2);
  font-size: 5.38vw;
  font-weight: bold;
}

.campaign_item_content_sp {
  margin-top: 1.28vw;
  color: var(--text_color2);
  font-size: 5.38vw;
}

.black_line_sp {
  background-color: var(--text_color2);
  width: 100%;
  height: 0.51vw;
}

.media_container_sp {
  padding: 7.69vw;
  background-color: var(--background_gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.69vw;
}

.media_item_sp {
  background-color: var(--background_white1);
  padding: 7.69vw 0;
}

.media_title_sp {
  margin: 0 5.13vw;
  color: var(--text_color1);
  font-size: 7.18vw;
  font-weight: bold;
}

.media_date_sp {
  margin: 5.13vw 5.13vw;
  margin-left: 5.13vw;
  color: var(--text_color2);
  font-size: 5.38vw;
  font-weight: bold;
}

.media_content_sp {
  margin: 0 5.13vw;
  color: var(--text_color1);
  font-size: 5.38vw;
}

.media_img_bg {
  margin-top: 5.13vw;
  width: 100%;
  position: relative;
}

.media_img_sp {
  width: 100%;
  height: 56vw;
  overflow: hidden;
  object-fit: cover;
  object-position: top;
}

.media_btn_sp {
  position: absolute;
  bottom: 2.56vw;
  right: 2.56vw;
  background-color: var(--text_color3);
  border-radius: 2.56vw;
  color: var(--background_white1);
  font-size: 5.13vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.28vw 7.69vw;
  cursor: pointer;
}

.media_btn_sp img {
  margin-right: 2.56vw;
  width: 5.13vw;
}

.form_header_sp {
  background-color: #39435C;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25.64vw 7.69vw;
}

.form_title_sp {
  color: var(--background_white1);
  font-size: 11.54vw;
  font-weight: bold;
}

.form_subtitle_sp {
  margin-top: 7.69vw;
  color: var(--background_white1);
  font-size: 8.21vw;
  text-align: center;
}

.form_main_sp {
  background:#fff;
}

.form_main2_sp {
  padding: 12.82vw 7.69vw 25.64vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form_finished_sp {
  color: var(--text_color1);
  font-size: 7.69vw;
  font-weight: bold;
}

.form_back_sp {
  background-color: var(--text_color3);
  border-radius: 7.69vw;
  color: var(--background_white1);
  font-size: 6.15vw;
  font-weight: bold;
  padding: 1.28vw 0;
  text-align: center;
  border: none;
  margin-top: 7.69vw;
  width: 100%;
}

.about_header_sp {
  background-color: var(--background_white1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12.82vw 7.69vw;
}

.about_title_sp {
  color: var(--background_navy1);
  font-size: 11.54vw;
  font-weight: bold;
}

.about_main_sp {
  padding: 12.82vw 7.69vw;
}

.about_title2_sp {
  color: var(--background_navy1);
  font-size: 11.54vw;
  text-align: center;
}

.about_subtitle2_sp {
  margin-top: 2.56vw;
  color: var(--text_color3);
  font-size: 6.15vw;
  text-align: center;
}

.about_content_sp {
  color: var(--text_color1);
  font-size: 5.38vw;
}

.yellow_line_sp {
  margin-top: 12.82vw;
  width: 34.62vw;
  height: 1.28vw;
  background-color: var(--highlight_color);
}

.about_title3_sp {
  margin-top: 5.13vw;
  color: var(--text_color1);
  font-size: 10.77vw;
}

.about_content3_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 5.38vw;
}

.about_main_sp img {
  margin-top: 7.69vw;
  width: 100%;
}

.about_btn_sp {
  border: 0.1vw solid var(--arrow_color);
  width: 100%;
  padding: 7.69vw;
  box-sizing: border-box;
  color: var(--text_color1);
  font-size: 7.18vw;
  box-shadow: 0 5px 5px var(--arrow_color);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.about_btn_img_sp {
  margin: 0 !important;
  width: 5.13vw !important; 
}

.about_main2_sp {
  padding: 12.82vw 7.69vw 25.64vw;
  position: relative;
}

.about_bg_img_sp {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}

.about_others_sp {
  color: var(--text_color1);
  font-size: 10.77vw;
}

.about_btns2_sp {
  margin-top: 7.69vw;
  border: 0.1vw solid var(--arrow_color);
  width: 100%;
  padding: 7.69vw;
  box-sizing: border-box;
  color: var(--text_color1);
  font-size: 7.18vw;
  box-shadow: 0 5px 5px var(--arrow_color);
  display: flex;
  justify-content: center;
}

.news_main_sp {
  padding: 7.69vw;
}

.news_content_sp {
  margin-top: 7.69vw;
  color: var(--text_color1);
  font-size: 5.38vw;
}

.news_gray_line_sp {
  margin-top: 7.69vw;
  width: 100%;
  height: 0.51vw;
  background-color: var(--arrow_color);
}

.company_main_sp {
  padding: 12.82vw 7.69vw;
}

.company_item_sp {
  width: 30%;
  background-color: var(--background_gray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text_color1);
  font-size: 5.38vw;
  text-align: center;
  padding: 2.56vw;
}

.company_content_sp {
  width: 70%;
  display: flex;
  align-items: center;
  color: var(--text_color1);
  font-size: 5.38vw;
  padding: 2.56vw;
}

.company_white_line_sp {
  width: 30%;
  height: 0.77vw;
}

.company_gray_line_sp {
  width: 70%;
  height: 0.77vw;
  margin-left: 2.56vw;
  background-color: var(--background_gray);
}

.site_bg_sp {
  padding: 12.82vw 7.69vw;
  background-color: var(--background_gray);
}

.site_main_sp {
  padding: 7.69vw;
  background-color: var(--background_white1);
}













@media all and (max-width: 768px) {
  .pc_bg {
    display: none;
  }
}

@media all and (min-width: 769px) {
  .sp_bg {
    display: none;
  }
}

/* Mobile sidebar (matches rinxs-business) */
.mobile-header,
.mobile-sidebar,
.mobile-sidebar-overlay {
    display: none;
}

@media all and (max-width: 768px) {
  .mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      height: 60px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      border-bottom: 1px solid var(--arrow_color);
      position: sticky;
      top: 0;
      z-index: 9999;
  }
  .mobile-header .logo {
      height: 36px;
      width: auto;
  }
  .mobile-hamburger {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
  }
  .hamburger-icon {
      display: block;
      position: relative;
      width: 26px;
      height: 2px;
      background: var(--text_color1);
      transition: background 0.2s;
  }
  .hamburger-icon::before,
  .hamburger-icon::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 26px;
      height: 2px;
      background: var(--text_color1);
      transition: margin-top 0.3s, transform 0.3s;
  }
  .hamburger-icon::before { margin-top: -8px; }
  .hamburger-icon::after  { margin-top:  8px; }
  .hamburger-icon.is-open { background: transparent; }
  .hamburger-icon.is-open::before,
  .hamburger-icon.is-open::after {
      margin-top: 0;
  }
  .mobile-sidebar-overlay {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 10000;
  }
  .mobile-sidebar-overlay.open {
      display: block;
      overscroll-behavior: none;
  }
  .mobile-sidebar {
      position: fixed;
      top: 60px;
      right: -280px;
      width: 280px;
      max-width: 100vw;
      height: calc(100% - 60px);
      background: #FFFFFF;
      z-index: 10001;
      display: flex;
      flex-direction: column;
      padding: 0 0 30px 0;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: -2px 0 12px rgba(0,0,0,0.12);
  }
  .mobile-sidebar.open {
      right: 0;
      transition: right 0.3s ease;
  }
  .mobile-sidebar-nav {
      display: flex;
      flex-direction: column;
      padding: 40px 0 0 0;
  }
  .mobile-sidebar-nav a {
      text-decoration: none;
      color: #323232;
      font-size: 18px;
      font-weight: bold;
      padding: 10px 30px;
  }
  .mobile-sidebar-nav a:hover {
      color: var(--text_color3);
  }
  .mobile-sidebar-btns {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 100%;
  }
  .mobile-sidebar-btns .header_btn {
      display: block;
      width: 100%;
      border-radius: 36px;
      font-size: 18px;
      padding: 11px 18px;
      text-align: center;
      margin: 0;
      box-sizing: border-box;
  }
}

/* GTranslate mobile sidebar */
.mobile-sidebar-lang {
  padding: 14px 20px;
  box-sizing: border-box;
  width: 100%;
}
.mobile-sidebar-lang .gtranslate_wrapper {
  width: 100%;
  max-width: 100%;
  display: block;
}
.mobile-sidebar-btns {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.mobile-sidebar-btns .header_btn {
  display: block;
  width: 100%;
  border-radius: 5px;
  font-size: 14px;
  padding: 10px;
  text-align: center;
  margin: 0;
}

@media all and (max-width: 768px) {
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher {
    display: block !important;
    width: 100% !important;
}
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher .gt_selected {
    display: block !important;
    width: 100% !important;
}
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher .gt_selected > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher .gt_selected > a::after {
    transform: translateY(1px) rotate(0deg) !important;
    margin-left: auto !important;
}
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher .gt_selected > a.open::after {
    transform: translateY(1px) rotate(180deg) !important;
}
.mobile-sidebar-lang .gtranslate_wrapper .gt_switcher .gt_option {
    top: auto !important;
    bottom: 121% !important;
    min-width: 240px !important;
}
}