@charset "UTF-8";
/*------------------------------
 common
------------------------------*/
html.is-fixed {
  height: 100%;
  overflow: hidden;
  overflow: auto;
  scrollbar-gutter: stable !important;
}

button {
  color: #333 !important;
}

.z-index-9 {
  z-index: 9;
}

.z-index-99 {
  z-index: 99;
}

.z-index-999 {
  z-index: 999;
}

.ope-32 {
  padding-right: 32px !important;
}

.link-hover {
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.link-disabled {
  pointer-events: none;
}

.text-mb-0 > * {
  margin-bottom: 0;
}

.text-ellipsis-2,
.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  -webkit-line-clamp: 2;
}

.text-ellipsis-3 {
  -webkit-line-clamp: 3;
}

.row-gap-14 {
  row-gap: 14px;
}

.icon-external-link {
  object-fit: contain;
  width: 1em;
}

.external-links-dark,
.external-links-white {
  position: relative;
  padding-left: 1.5em;
}

.external-links-light-orange {
  position: relative;
  padding-left: 1em;
}

.external-links-dark::after,
.external-links-light-orange::after,
.external-links-white::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: -0.5em;
  width: 1em;
  height: 1em;
  transform: translateY(-55%);
}

.external-links-light-orange::after {
  left: 0;
}

#information .external-links-dark::after {
  left: 0;
}

#strength .external-links-white::after {
  left: -0.5em;
}

.external-links-dark::after {
  background-image: url("../images/common/external_links.svg");
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.external-links-white::after {
  background-image: url("../images/common/external_links_white.svg");
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.external-links-light-orange::after {
  background-image: url("../images/common/external_links_light_orange.svg");
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

@media (hover: hover) {
  .link-hover:hover {
    opacity: 0.6;
  }

  .hover-pointer:hover {
    cursor: pointer;
  }

  .external-links-blue:hover .external-links-white::after {
    background-image: url("../images/common/external_links_blue.svg");
  }

  .external-links-orange:hover .external-links-white::after,
  .external-links-light-orange:hover .external-links-light-orange::after {
    background-image: url("../images/common/external_links_orange.svg");
  }
}

@media screen and (min-width: 992px) {
  a[href^="tel:"] {
    pointer-events: none;
  }

  .text-lg-nowrap {
    white-space: nowrap;
  }

  .row-gap-14 {
    row-gap: 0;
  }

  .col-gap-lg-15 {
    column-gap: 15px !important;
  }

  .col-gap-lg-33 {
    column-gap: 33px !important;
  }

  .col-gap-lg-40 {
    column-gap: 40px !important;
  }

  #strength .external-links-white::after {
    left: -1.5em;
  }

  .external-links-dark::after,
  #information .external-links-dark::after,
  .external-links-white::after {
    left: 0;
  }
}

/* animation */
.slide-box {
  overflow: hidden;
}

.slide-body {
  transform: translateY(100%);
}

.slide-body.active {
  animation: slideIn 0.7s cubic-bezier(0.4, 0.4, 0, 1) forwards;
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateX(0);
  }
}

.text-curtain {
  position: relative;
  width: fit-content;
  color: #0064ff;
  overflow: hidden;
  z-index: 1;
}

.active.text-curtain::after {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
  animation: textAnime2 0.7s cubic-bezier(0.4, 0.4, 0, 1) forwards;
}

@keyframes textAnime2 {
  to {
    transform: scale(1, 1);
  }
}

.career-box:has(.active.text-curtain) .slide-body {
  animation: slideIn 0.7s cubic-bezier(0.4, 0.4, 0, 1) 0.5s forwards;
}

.skill-box:has(.active.fade-wrapper) .slide-body {
  animation: slideIn 0.7s cubic-bezier(0.4, 0.4, 0, 1) 0.2s forwards;
}

.fade-wrapper {
  opacity: 0;
  visibility: hidden;
  transition: 1s cubic-bezier(0.4, 0.4, 0, 1);
}

.fade-wrapper.active {
  opacity: 1;
  visibility: visible;
}

/*------------------------------
 TOP
------------------------------*/
.top-fv-container {
  position: relative;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
}

.top-fv-container::after {
  position: absolute;
  content: "";
  background-image: url("../images/top/img_top_fv.svg");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1066 / 672;
  height: 40lvh;
  bottom: 23%;
  right: -45px;
  transform: translate(80%, -50%);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.active.top-fv-container::after {
  animation: mvFadeIn 1.2s cubic-bezier(0.4, 0.4, 0, 1) forwards 0.4s;
  opacity: 0;
  visibility: visible;
}

@keyframes mvFadeIn {
  0% {
    transform: translate(10%, -50%);
    opacity: 0;
  }

  100% {
    transform: translate(0%, -50%);
    opacity: 1;
  }
}

.top-fv-text-wrapper {
  padding-left: 24px;
  padding-right: 24px;
}

.top-fv-text-lead {
  font-size: 2.5rem;
}

.link-button {
  position: relative;
  background-color: var(--bs-color-blue);
  border: 3px solid var(--bs-color-blue);
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.link-button div,
.link-button span {
  color: #fff !important;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.link-button::before,
.link-button::after {
  position: absolute;
  content: "";
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.link-button::before {
  background-color: #fff;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.link-button::after {
  border-right: 4px solid var(--bs-color-blue);
  border-bottom: 4px solid var(--bs-color-blue);
  width: 10px;
  height: 10px;
  top: 50%;
  right: 42px;
  transform: translateY(-50%) rotate(-45deg);
  z-index: 2;
}

/* about */

.top-about-container {
  border-radius: 18px;
}

.about-bg-bottom {
  position: relative;
}

.about-bg-bottom::before {
  position: absolute;
  content: "";
  background-color: #ececec;
  width: 100%;
  height: 152px;
  bottom: -2px;
  left: 0;
  z-index: -1;
}

/* strength */

.bg-strength {
  background-color: #ececec;
}

.strength-container {
  position: relative;
  border-radius: 18px;
}

.strength-title {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.strength-number {
  font-size: 7.625rem;
}

.strength-annotation {
  position: absolute;
  bottom: 11px;
  right: 30px;
  color: #aeaeae;
}

#strength .box-link-button {
  position: relative;
  background-color: var(--bs-color-blue);
  border: 3px solid var(--bs-color-blue);
  border-radius: 10px;
  color: #fff !important;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#strength .box-link-button::before,
#strength .box-link-button::after,
#course .course-button::before,
#course .course-button::after {
  position: absolute;
  content: "";
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#strength .box-link-button::before,
#course .course-button::before {
  background-color: #fff;
  border-radius: 9999px;
  width: 56px;
  height: 30px;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#strength .box-link-button::before {
  right: 15px;
}

#strength .box-link-button::after,
#course .course-button::after {
  border-right: 3px solid var(--bs-color-blue);
  border-bottom: 3px solid var(--bs-color-blue);
  width: 0.5em;
  height: 0.5em;
  top: 50%;
  right: 45px;
  transform: translateY(-50%) rotate(-45deg);
}

#strength .box-link-button::after {
  right: 40px;
}

.strength-border-line {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.strength-border-line::before {
  position: absolute;
  content: "";
  background-color: #333;
  width: 80px;
  height: 2px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* information */

.bg-information {
  position: relative;
}

.bg-information::after {
  position: absolute;
  content: "";
  background-color: #fff;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0;
}

.information-text {
  letter-spacing: 0.03em;
  font-size: 5rem;
}

.information-text-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.section-title-border {
  position: relative;
}

.section-title-border::before {
  position: absolute;
  content: "";
  background-color: #333;
  width: 60px;
  height: 3px;
  bottom: 34px;
  left: 0;
}

.--white.section-title-border::before {
  background-color: #fff;
}

.--center.section-title-border::before {
  left: 50%;
  transform: translateX(-50%);
}

.news-list-border {
  border-bottom: 2px solid rgba(51, 51, 51, 0.1);
  padding-bottom: 25px;
}

.news-list-border:not(:last-of-type) {
  margin-bottom: 34px;
}

.text-news-time {
  color: #b0b0b0 !important;
}

#information .list-link-button {
  position: relative;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#information .list-link-button::before,
#information .list-link-button::after {
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#information .list-link-button::before {
  position: absolute;
  content: "";
  border: 2px solid var(--bs-color-blue);
  background-color: var(--bs-color-blue);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  bottom: 0;
  right: 0;
  transform: translateY(-50%);
}

#information .list-link-button::after {
  position: absolute;
  content: "";
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  width: 8px;
  height: 8px;
  bottom: 22px;
  right: 12px;
  transform: translateY(-50%) rotate(-45deg);
  z-index: 2;
}

#information .list-link-button div,
#information .list-link-button h3 {
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

/* course */

.bg-course {
  position: relative;
}

.bg-course::before {
  position: absolute;
  content: "";
  background-color: var(--bs-color-blue);
  border-top-right-radius: 30px;
  border-bottom-right-radius: -30px;
  width: 50%;
  height: 60px;
  top: -60px;
  left: 0;
}

.bg-course-container {
  position: relative;
  border-top-right-radius: 30px;
}

.bg-course-container::before,
.bg-course-container::after {
  position: absolute;
  content: "";
}

.bg-course-container::before {
  width: 62px;
  height: 62px;
  background-color: var(--bs-color-blue);
  top: -40px;
  left: 49%;
}

.bg-course-container::after {
  background-color: #fff;
  border-bottom-left-radius: 24px;
  width: 62px;
  height: 40px;
  top: -40px;
  left: calc(50% - 2px);
}

.course-thumbnail-wrapper {
  position: relative;
  border-radius: 30px;
}

.course-thumbnail-inner {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}

.course-thumbnail-wrapper::after {
  position: absolute;
  content: "";
  background-image: url("../images/common/bg_thumbnail_corner.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  width: 280px;
  height: 177px;
  bottom: -1px;
  right: -0.05em;
  z-index: 1;
}

.course-thumbnail-inner .course-thumbnail-body {
  border-radius: 30px;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#course .course-button {
  position: relative;
}

#course .course-button::before {
  width: 78px;
  height: 42px;
  border: 3px solid #fff;
  background-color: #fff;
  top: unset;
  bottom: -12px;
  right: 16px;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

#course .course-button::after {
  border-width: 4px;
  width: 0.6em;
  height: 0.6em;
  top: unset;
  bottom: 20px;
  right: 52px;
  z-index: 3;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

/* career */
.bg-career-support {
  position: relative;
  overflow: hidden;
}

.bg-career-support::before,
.bg-career-support::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  z-index: -1;
}

.career-support-title {
  font-size: 40px;
}

.career-support-title-sub {
  position: relative;
  margin-bottom: 40px;
}

.career-support-title-sub::before {
  position: absolute;
  content: "";
  background-color: #333;
  width: 60px;
  height: 3px;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.illust-career-support {
  transform: scale(1.2);
}

/* staff */

.bg-staff {
  position: relative;
  background-color: #e6f0ff;
}

.bg-staff::before {
  position: absolute;
  content: "";
  background-color: #e6f0ff;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  width: 100%;
  height: 60px;
  top: -60px;
  left: 0;
}

.bg-staff-logo {
  position: relative;
}

.bg-staff-logo::after {
  position: absolute;
  content: "";
  background-image: url("../images/top/bg_ks_logo_blue.svg");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 750 / 779;
  width: 90%;
  bottom: -18%;
  right: -20%;
  z-index: 1;
  opacity: 0.15;
}

/* contact */

.contact-box {
  border-radius: 18px;
  max-width: calc(100% - 12px * 2);
  width: 100%;
  padding: 14px;
}

.contact-box .--center.section-title-border::before {
  top: -40px;
}

.contact-box .row .col-12:first-child .--center.section-title-border::before {
  top: -17px !important;
}

.contact-box-container {
  container-type: inline-size;
}

.contact-box-border {
  position: relative;
  border: 3px solid #fff;
  border-radius: 10px;
  z-index: 10;
}

.phone-icon {
  max-width: 30px;
  width: 100%;
}

.phone-number {
  font-size: 9.2716cqw !important;
}

.contact-button {
  container-type: inline-size;
  background-color: #f98b24;
  border-radius: 14px;
  max-width: 286px;
  width: 100%;
}

.contact-button.link-button::before {
  width: 39px;
  height: 39px;
}

.contact-button.link-button::after {
  border-color: #f98b24;
  border-width: 3px;
  width: 8px;
  height: 8px;
  right: 35px;
}

.contact-button-text {
  font-weight: bold;
}

.contact-button.link-button .contact-button-text {
  color: #fff !important;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  font-size: 16px;
}

.contact-button.link-button .contact-button-text-sub {
  color: #ffcea1 !important;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  font-size: 10px;
}

@media screen and (min-width: 992px) {
  .top-fv-container::after {
    aspect-ratio: 1066 / 672;
    height: 72lvh;
    bottom: -28%;
    right: -78px;
    transform: translateY(-50%);
    z-index: -1;
  }

  .top-fv-text-wrapper {
    padding-left: 120px;
    padding-right: 12px;
  }

  .top-fv-text-lead {
    font-size: 4.5rem;
  }

  .contact-button.link-button .contact-button-text {
    font-size: 20px;
  }

  .contact-button.link-button .contact-button-text-sub {
    font-size: 12px;
  }

  /* about */

  .top-about-container {
    border-radius: 30px;
  }

  .section-title-border::before {
    width: 80px;
  }

  /* strength */

  .strength-number {
    font-size: 10.5rem;
  }

  .strength-annotation {
    bottom: 20px;
  }

  #strength .box-link-button::before {
    width: 68px;
    height: 35px;
  }

  #strength .box-link-button::after {
    top: 50%;
    right: 46px;
  }

  /* information */

  .bg-information::after {
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    height: 65px;
    top: -65px;
  }

  .information-text {
    font-size: 10.5rem;
  }

  .news-list-border {
    padding-bottom: 32px;
  }

  #information .list-link-button::before {
    width: 38px;
    height: 38px;
    bottom: -24px;
    transform: translateY(-50%);
  }

  #information .list-link-button::after {
    width: 8px;
    height: 8px;
    bottom: 6px;
    right: 16px;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* course */
  .bg-course::before {
    border-top-right-radius: 50px;
    height: 90px;
    top: -88px;
  }

  .bg-course-container {
    border-top-right-radius: 50px;
  }

  .bg-course-container::after {
    border-bottom-left-radius: 36px;
    height: 62px;
    top: -62px;
    left: calc(50% - 1px);
  }

  #course .course-button::before {
    width: 78px;
    height: 42px;
    /* top: 255px; */
    right: 16px;
  }

  #course .course-button::after {
    border-width: 4px;
    width: 0.6em;
    height: 0.6em;
    /* top: 255px; */
    right: 52px;
  }

  /* career */
  .bg-career-support::before {
    background-image: url("../images/top/bg_support_left.jpg");
    aspect-ratio: 674 / 537;
    width: 42%;
    top: 0;
    left: -12%;
  }

  .bg-career-support::after {
    width: 42%;
    bottom: -10%;
    right: -8%;
  }

  .career-support-title {
    font-size: 74px;
  }

  .career-support-title-sub {
    margin-bottom: 65px;
  }

  .career-support-title-sub::before {
    width: 80px;
  }

  .bg-career-support::after {
    background-image: url(../images/top/bg_support_right.jpg);
    aspect-ratio: 766 / 546;
    width: 47%;
    bottom: 0;
    right: -8%;
  }

  .bg-staff::before {
    height: 120px;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    top: -120px;
  }

  .bg-staff-logo::after {
    width: 48%;
    bottom: -50%;
    right: -6%;
    opacity: 1;
  }

  /* contact */

  .contact-box-container {
    max-width: calc(calc(50% - 20px));
    /* padding-top: 40px; */
    padding-left: 0;
    padding-right: 0;
  }

  .contact-box .--center.section-title-border::before {
    top: -40px !important;
  }

  .contact-box .row .col-12:first-child .--center.section-title-border::before {
    top: -17px !important;
  }

  .contact-box-border {
    border-radius: 22px;
  }

  .phone-icon {
    max-width: 54px;
  }

  .phone-number {
    font-size: 9.2716cqw !important;
  }

  .contact-button {
    max-width: 400px;
  }

  .contact-button.link-button::before {
    width: 57px;
    height: 57px;
  }

  .contact-button.link-button::after {
    border-width: 4px;
    width: 10px;
    height: 10px;
    right: 42px;
  }
}

@media screen and (min-width: 992px) {
  .strength-border-line {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contact-box {
    border-radius: 30px;
    max-width: calc(calc(100% - 40px * 2));
    padding: 40px;
  }
}

@media screen and (min-width: 1200px) {
  .strength-border-line::before {
    width: 2px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(0);
  }
}

@media screen and (min-width: 1400px) {
  .bg-career-support::before {
    width: 42%;
    top: -8%;
    left: -9%;
  }

  .bg-career-support::after {
    width: 48%;
    bottom: 4%;
    right: -8%;
  }

  .contact-box {
    border-radius: 30px;
    max-width: 1376px;
  }
}

@media screen and (min-width: 1920px) {
  .top-fv-text-lead {
    font-size: 5.75rem;
  }

  .bg-career-support::before {
    width: 42%;
    top: -11%;
    left: -4.5%;
  }

  .bg-career-support::after {
    width: 48%;
    bottom: -1%;
    right: -8%;
  }

  .bg-staff-logo::after {
    width: 44%;
    bottom: -58%;
    right: -1.5%;
    background-position: bottom right;
  }
}

@media (hover: hover) {
  .link-button:hover {
    background-color: #fff;
  }

  .link-button:hover div,
  .link-button:hover span {
    color: var(--bs-color-blue) !important;
  }

  .link-button:hover.link-button::before {
    background-color: var(--bs-color-blue);
  }

  .link-button:hover.link-button::after {
    border-color: #fff;
  }

  .contact-button.link-button:hover.link-button::before,
  .support-contact-button.link-button:hover.link-button::before {
    background-color: #f98b24;
  }

  .contact-button.link-button:hover .contact-button-text {
    color: #f98b24 !important;
  }

  .contact-button.link-button:hover .contact-button-text-sub {
    color: #ffbb7d !important;
  }

  #strength .box-link-button:hover {
    background-color: #fff;
    color: var(--bs-color-blue) !important;
  }

  #strength .box-link-button:hover.box-link-button::before {
    background-color: var(--bs-color-blue);
  }

  #strength .box-link-button:hover.box-link-button::after {
    border-color: #fff;
  }

  #information .list-link-button:hover.list-link-button::before {
    background-color: #fff;
  }

  #information .list-link-button:hover.list-link-button::after {
    border-color: var(--bs-color-blue);
  }

  #information .list-link-button:hover div,
  #information .list-link-button:hover h3 {
    opacity: 0.6;
  }

  #course .course-hover:hover .course-button::before {
    background-color: var(--bs-color-blue);
  }

  #course .course-hover:hover .course-button::after {
    border-color: #fff;
  }

  #course .course-hover:hover .course-thumbnail-body {
    transform: scale(1.1);
  }

  .support-contact-button.link-button:hover .contact-button-text {
    color: #f98b24 !important;
  }
}

/*------------------------------
 course
------------------------------*/

/* Web-design */
.course-fv-container {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  aspect-ratio: 390 / 320;
  width: 100%;
  height: max-content;
}

.course-fv-container.web-design {
  background-image: url("../images/course/web_design/bg_course_fv_web_design_sp.jpg");
}

.course-title-sub {
  color: #4e94ff !important;
}

.course-image-box {
  aspect-ratio: 628 / 426;
  height: max-content;
}

.course-flex-gap {
  row-gap: 70px;
}

.course-image-introduction {
  height: auto;
  position: absolute;
  left: 0;
  max-width: 366px;
  width: 100%;
}

.course-image-introduction-body {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.course-bubble {
  position: relative;
}

.course-bubble::after {
  position: absolute;
  content: "";
  width: 22px;
  height: 19px;
  background-color: #0064ff;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  bottom: -13px;
  left: 22px;
  z-index: -1;
}

.course-lists-wrapper {
  padding: 26px 16px 26px 24px;
  border: 3px solid #0064ff;
  border-radius: 13px;
}

.course-lists-box li,
.certification-lists-box li {
  position: relative;
}

.course-lists-box li::before {
  position: absolute;
  content: "";
  background-color: #0064ff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  top: 16px;
  left: -10px;
  transform: translate(-100%, -50%);
}

.certification-lists-box li:before {
  position: absolute;
  content: "";
  background-color: #0064ff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  top: 14px;
  left: 12px;
  transform: translate(-100%, -50%);
}

.course-skill-container {
  background-color: #ececec;
  border-radius: 18px;
  padding: 24px;
}

.works-img-wrapper {
  object-position: center;
  /* aspect-ratio: 342 / 193; */
  /* height: 200px; */
}

.modal-backdrop {
  background-color: #000 !important;
  opacity: 0.8 !important;
}

.modal-body {
  padding-top: 20px;
  padding-bottom: 30px;
}

.modal-content {
  border-radius: 20px !important;
}

.btn-close {
  position: absolute !important;
  width: 64px;
  height: 35px;
  top: 20px !important;
  right: 20px !important;
  --bs-btn-close-bg: none !important;
  --bs-btn-close-opacity: 1 !important;
  z-index: 9999 !important;
}

.modal-close-button {
  width: 60px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 9999px;
}

.modal-close-button::before,
.modal-close-button::after {
  position: absolute;
  content: "";
  background-color: #fff;
  top: 50%;
  right: 50%;
  width: 32px;
  height: 3px;
}

.modal-close-button::before {
  transform: translate(50%, -50%) rotate(-30deg);
}

.modal-close-button::after {
  transform: translate(50%, -50%) rotate(30deg);
}

.modal-footer {
  border: none !important;
}

.modal-in-button-close {
  max-width: 220px;
  width: 100%;
  border: 2px solid #333;
  background-color: transparent;
  color: #333;
  margin: 0 auto 60px;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.works-thumbnail-body {
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

@media screen and (min-width: 576px) {
  .course-fv-container {
    aspect-ratio: 1536 / 440;
  }

  .course-image-box {
    aspect-ratio: 628 / 426;
    height: 426px;
  }

  .course-image-introduction {
    max-width: 628px;
  }
}

@media screen and (min-width: 992px) {
  .course-fv-container.web-design {
    background-image: url("../images/course/web_design/bg_course_fv_web_design.jpg");
  }

  .course-flex-gap {
    row-gap: 140px;
  }

  .course-lists-wrapper {
    padding: 26px 16px 26px 30px;
  }

  .course-lists-box li::before {
    top: 12px;
  }

  .course-skill-container {
    padding: 30px 40px 40px;
  }

  .certification-lists-box li:before {
    top: 19px;
    transform: translate(-100%, -50%);
  }

  .works-img-wrapper {
    aspect-ratio: 419 / 236;
  }

  .btn-close {
    position: absolute !important;
    top: 40px !important;
    right: 56px !important;
  }

  .modal-content {
    border-radius: 30px !important;
  }

  .modal-body {
    padding: 60px !important;
  }

  .modal-in-button-close {
    max-width: 466px;
  }
}

@media screen and (min-width: 1375px) {
  .btn-close {
    position: fixed !important;
    top: 40px !important;
    right: 56px !important;
  }
}

@media screen and (min-width: 1600px) {
  .modal-xxl {
    --bs-modal-width: 1260px !important;
  }
}

@media screen and (min-width: 1920px) {
  .course-image-box {
    aspect-ratio: 800 / 426;
  }

  .course-image-introduction {
    max-width: 800px;
  }
}

@media (hover: hover) {
  /* .modal-in-button-close:hover {
    background-color: #0064ff;
    border-color: #0064ff;
    color: #fff !important;
  } */

  .works-modal-container:hover .works-thumbnail-body {
    transform: scale(1.1);
  }
}

/* Office-pc */
.course-fv-container.office-pc {
  background-image: url("../images/course/office_pc/bg_course_fv_office_sp.jpg");
}

@media screen and (min-width: 992px) {
  .course-fv-container.office-pc {
    background-image: url("../images/course/office_pc/bg_course_fv_office_pc.jpg");
  }
}

/* Programming */
.course-fv-container.programming {
  background-image: url("../images/course/programming/bg_course_fv_programming_sp.jpg");
}

@media screen and (min-width: 992px) {
  .course-fv-container.programming {
    background-image: url("../images/course/programming/bg_course_fv_programming_pc.jpg");
  }
}

/*------------------------------
 support
------------------------------*/
.course-fv-container.support {
  background-image: url("../images/employment-support/bg_fv_support_sp.jpg");
}

.bg-event {
  position: relative;
  background-color: #ececec;
}

.bg-event::before {
  position: absolute;
  content: "";
  background-color: #ececec;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0;
}

.support-event-box {
  border-radius: 18px;
  padding: 34px 24px 40px;
  margin-bottom: 12px;
}

.support-tilte-event {
  padding-left: 22px;
}

.support-tilte-event::before {
  position: absolute;
  content: "";
  background-color: #0064ff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.text-consulting-box {
  border: 3px solid var(--bs-color-blue);
  border-radius: 12px;
}

.bg-consulting-box {
  background-color: var(--bs-color-blue);
  border-radius: 12px;
}

.consulting-arrow {
  max-width: 40px;
  width: 100%;
}

.bg-consulting-box {
  border-radius: 12px;
  padding: 22px 8px;
}

.consulting-point-gap {
  column-gap: 36px;
}

.consulting-point-container {
  width: 100%;
}

.consulting-point-body {
  border-radius: 18px;
}

.consulting-point-img-number {
  position: absolute;
  top: -8px;
  left: 14px;
}

.bg-voice-container {
  border-radius: 18px;
}

.bg-voice-box {
  border-radius: 14px;
  padding: 30px 24px 40px;
}

.support-contact-button {
  border-color: #f98b24;
  background-color: #f98b24;
  border-radius: 14px;
}

.support-contact-button.link-button::before {
  width: 47px;
  height: 47px;
}

.support-contact-button.link-button::after {
  border-color: #f98b24;
  right: 38px;
}

.support-contact-wrapper .contact-button {
  max-width: 480px;
}

@media screen and (min-width: 992px) {
  .course-fv-container.support {
    background-image: url("../images/employment-support/bg_fv_support_pc.jpg?20250908_0.0.1");
  }

  .bg-event::before {
    border-top-right-radius: 70px;
    border-top-left-radius: 70px;
    height: 65px;
    top: -65px;
  }

  .support-event-box {
    border-radius: 20px;
    padding: 50px 60px 55px;
    margin-bottom: 20px;
  }

  .support-tilte-event,
  .support-text-event {
    padding-left: 36px;
  }

  .support-tilte-event::before {
    width: 16px;
    height: 16px;
  }

  .bg-consulting-box {
    border-radius: 14px;
    padding: 31px 8px;
  }

  .bg-voice-container {
    border-radius: 30px;
    max-width: 1536px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
  }

  .bg-voice-box {
    border-radius: 20px;
    padding: 40px 60px 45px;
  }

  .support-contact-wrapper {
    max-width: 632px;
    width: 100%;
  }

  .support-contact-button.link-button::before {
    width: 57px;
    height: 57px;
  }

  .support-contact-button.link-button::after {
    border-color: #f98b24;
    right: 43px;
  }
}

@media screen and (min-width: 1200px) {
  .consulting-container {
    max-width: calc((100% - 140px) / 2);
    width: 100%;
  }

  .consulting-arrow {
    max-width: 65px;
  }

  .consulting-point-container {
    max-width: calc((100% - 36px * 2) / 3);
  }
}

/*------------------------------
 staff
------------------------------*/

.course-fv-container.staff {
  background-image: url("../images/instructor/bg_fv_instructor_sp.jpg?20250908_0.0.1");
}

.staff-image-wrapper {
  position: relative;
  container-type: inline-size;
}

.staff-image-body {
  border-radius: 18px;
  aspect-ratio: 342 / 211;
  object-fit: cover;
  object-position: top center;
}

.staff-image-wrapper::after {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.57) 60%, rgba(0, 0, 0, 0.8) 100%);
  width: 100%;
  height: 110px;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 0;
}

.staff-image-caption {
  position: absolute;
  font-size: 6.3cqi;
  line-height: 1.25;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 14px;
  padding-right: 14px;
}

.staff-course-category {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
  padding: 8px 13px;
}

@media screen and (min-width: 992px) {
  .course-fv-container.staff {
    background-image: url("../images/instructor/bg_fv_instructor_pc.jpg");
  }

  .staff-image-caption {
    line-height: 1.1;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 6.3cqi;
  }

  .staff-course-category {
    padding: 12px 24px;
  }

  .staff-image-body {
    aspect-ratio: 628 / 388;
  }
}

/*------------------------------
 blog
------------------------------*/
.course-fv-container.blog {
  background-image: url("../images/blog/bg_fv_blog_sp.jpg");
}

.blog-image-wrapper {
  aspect-ratio: 406 / 251;
}

.blog-image-wrapper img {
  border-radius: 18px;
  background-color: #dedede;
}

.blog-col {
  flex: 0 0 auto;
  width: 100%;
}

.blog-content-container {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

.blog-content-container mark {
  padding: 0 !important;
}

.blog-content-container p {
  margin-bottom: 1rem !important;
}

.blog-content-container h1 {
  font-size: 48px;
  font-weight: bold;
  padding-top: 50px;
  margin-bottom: 30px;
}

.blog-content-container h2 {
  font-size: 26px;
  font-weight: bold;
  border-bottom: 2px solid #333333;
  padding-top: 50px;
  padding-bottom: 8px;
  margin-bottom: 30px;
}

.blog-content-container h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  padding-top: 24px;
  margin-bottom: 32px;
}

.blog-content-container h4 {
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
  padding-top: 1.25em;
  margin-bottom: 1.75em;
}

.blog-content-container h5 {
  font-size: 14px;
  font-weight: bold;
  line-height: 2;
  padding-top: 1.5em;
  margin-bottom: 1.5em;
}

.blog-content-container h6 {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  padding-top: 1.5em;
  margin-bottom: 1em;
}

.blog-content-container figure {
  margin-bottom: 30px;
}

.blog-content-container a {
  text-decoration: underline;
  color: #0064ff !important;
  opacity: 1;
  transition: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}

.blog-content-container ul,
.blog-content-container ol {
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  margin-bottom: 35px;
}

.blog-content-container ul li {
  list-style-type: disc !important;
}

.blog-content-container ol li {
  list-style-type: decimal !important;
}

@media screen and (min-width: 992px) {
  .course-fv-container.blog {
    background-image: url("../images/blog/bg_fv_blog_pc.jpg");
  }

  .blog-col {
    flex: 0 0 auto;
    max-width: calc((100% - (15px * 2)) / 3);
    width: 100%;
  }

  .blog-content-container h2 {
    font-size: 32px;
  }

  .blog-content-container h3 {
    font-size: 22px;
  }
}

@media (hover: hover) {
  .blog-content-container a:hover {
    opacity: 0.6;
  }
}

/*------------------------------
 privacy-policy
------------------------------*/
#privacyPolicy ul,
#privacyPolicy ul li {
  list-style-type: disc !important;
}

#privacyPolicy ol,
#privacyPolicy ol li {
  list-style-type: decimal !important;
}

#privacyPolicy ol {
  padding-left: 1.25rem !important;
}

#privacyPolicy ol li ol {
  padding-left: 2rem !important;
}