@charset "UTF-8";
/* --------------------------------------------------------------------
 COMMON
-------------------------------------------------------------------- */
html, body {
  height: 100%;
}

.page-cat-title {
  --main-font-size: 4rem;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------
 HEADER
-------------------------------------------------------------------- */
#about #header .header-brand .logo-white {
  opacity: 1;
}

#about #header.members-nav-open .header-brand .logo-white,
#about #header.search-nav-open .header-brand .logo-white {
  opacity: 0;
}

#about #header.bg-color-change .header-brand .logo-white {
  opacity: 0;
}

#about #header.sp-nav-open .header-brand .logo-white {
  opacity: 0;
}

.header-nav-item a {
  color: #fff;
}

#header.bg-color-change .header-nav-item a {
  color: #222;
}

/* --------------------------------------------------------------------
 MAIN
-------------------------------------------------------------------- */
.breadcrumb {
  padding-top: 122px;
}

.breadcrumb-item-link {
  color: #fff;
}

#about-kv {
  position: relative;
  background-image: url("../img/bg-about.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.breadcrumb-item-link::after {
  background-color: #fff;
}

.breadcrumb-item:last-child {
  color: #fff;
}

.kv-block {
  padding-top: 45px;
}

.kv-wrap {
  height: auto;
  position: relative;
  margin-top: -262px;
}

.page-top-title {
  position: sticky;
  top: 220px;
  padding-bottom: 50px;
}

.page-title {
  color: #fff;
}

.about-kv-text {
  width: 48%;
  color: #fff;
  margin-left: auto;
  padding: 40px 0 100px;
}

.about-kv-text-main {
  font-size: 4rem;
  font-weight: 600;
}

.about-kv-text-sub {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  margin: 60px 0;
}

.about-kv-map {
  text-align: right;
}

.about-kv-map-img {
  margin-bottom: 24px;
  margin: 0 auto;
  padding: 0 6.6vw;
}

.about-kv-map-stat {
  font-size: 1.6rem;
  line-height: 2;
}

.about-kv-text-sub p + p {
  margin-top: 20px;
}

.about-nav {
  flex-basis: 50%;
  flex-shrink: 2;
  height: 100vh;
  width: fit-content;
  position: sticky;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.about-nav-list {
  padding-left: 58px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.about-nav-list::before {
  content: '';
  display: block;
  width: 1px;
  height: 82%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.about-nav-item {
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  word-break: keep-all;
}

.about-nav-item + .about-nav-item {
  margin-top: 40px;
}

.about-nav-item::before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: 17px;
  left: -63px;
  transition: 0.3s;
}

.about-nav-item.active::before {
  width: 19px;
  height: 19px;
  top: 13px;
  left: -67px;
}

.about-content {
  color: #fff;
  background-color: #222530;
  position: relative;
}

.about-bg-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

.about-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

.about-bg.active {
  opacity: 1;
}

.about-bg.training {
  background-image: url("../img/bg-training.jpg");
}

.about-bg.seminar {
  background-image: url("../img/bg-seminar.jpg");
}

.about-bg.seminar-online {
  background-image: url("../img/bg-seminar-online.jpg");
}

.about-bg.networking {
  background-image: url("../img/bg-networking.jpg");
}

.about-wrap {
  position: relative;
  z-index: 1;
  top: 0;
  width: 100%;
  margin-top: -100vh;
}

.about-block {
  position: relative;
  display: flex;
  gap: 8vw;
  flex-flow: row-reverse;
}

.about-content-list {
  flex-grow: 1;
  flex-basis: 50%;
}

.about-content-item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: 100svh;
}

.about-text {
  font-size: 1.6rem;
  font-weight: 300;
  margin: 40px 0 56px;
}

.about-img {
  display: flex;
  gap: 16px;
}

.about-img-item {
  width: 299px;
}

.about-download {
  padding: 64px 0;
  background-color: #F9F9F9;
}

.download-text {
  font-size: 1.6rem;
  line-height: 2;
  margin-bottom: 28px;
  text-align: center;
}

.download-link .content-link {
  margin: 0 auto;
}

@media screen and (max-width: 1280px) {
  .page-top-title {
    position: relative;
    top: auto;
    left: auto;
  }

  .kv-wrap {
    position: relative;
    overflow: visible;
    margin-top: 0;
  }

  .breadcrumb {
    padding-top: 40px;
  }

  .about-kv-text {
    padding: 60px 0 135px;
  }

  .about-kv-text {
    width: 100%;
  }

  .about-kv-map-img {
    padding: 0;
    max-width: 515px;
  }

  .about-img-item {
    width: 50%;
  }
}

@media screen and (max-width: 1024px) {
  .kv-block {
    padding-top: 24px;
  }

  .about-kv-text-main {
    font-size: 2.4rem;
  }

  .about-kv-text-sub {
    font-size: 1.6rem;
    margin: 40px 0;
  }

  .about-kv-map-img {
    padding: 0 15px;
  }

  .about-kv-map-stat {
    font-size: 1.4rem;
  }

  .about-block {
    padding: min(8.1vw, 155px) 0 90px;
  }

  .about-content-list {
    width: 100%;
    padding-bottom: 10vh;
  }

  .about-text {
    width: 100%;
    margin: 4vh 0;
  }

  .download-text {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 768px) {
  #about-kv {
    background: none;
  }

  #about-kv::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    background-image: url("../img/bg-about_sp.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
  }

  .about-kv-map-img {
    width: 100%;
  }

  .page-cat-title {
    --main-font-size: 2rem;
  }

  .about-block {
    padding: 0;
  }

  .about-img {
    display: block;
    padding: 0 27px;
  }

  .about-img-item {
    width: 100%;
  }

  .about-img-item + .about-img-item {
    margin-top: 16px;
  }

  .about-bg.training {
    background-image: url("../img/bg-training_sp.jpg");
  }

  .about-bg.seminar {
    background-image: url("../img/bg-seminar_sp.jpg");
  }

  .about-bg.seminar-online {
    background-image: url("../img/bg-seminar-online_sp.jpg");
  }

  .about-bg.networking {
    background-image: url("../img/bg-networking_sp.jpg");
  }
}