.ttl {
  font-size: 30px;
  font-weight: 700 !important;
  line-height: 43px;
  letter-spacing: 0.07em;
  color: var(--color-purple2);
  text-align: center;
}
.ttl span {
  font-family: "Roboto", serif;
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.06em;
  display: block;
  color: var(--color-purple);
  line-height: 19px;
  text-transform: uppercase;
  margin-top: 8px;
}

body {
  color: #000;
}

main::before {
  content: "";
  background: url(../img/top/hd_deco1.webp) no-repeat left top;
  width: 311px;
  height: 175px;
  position: absolute;
  top: 0;
  left: -114px;
  z-index: -1;
}
main::after {
  content: "";
  background: url(../img/top/hd_deco2.webp) no-repeat right top;
  width: 291px;
  height: 158px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

#header {
  background: none;
}

.has_nav_top #header {
  background: #fff;
}

#key .wrap {
  max-width: 1140px;
}
#key .key__container {
  display: flex;
}
#key .key__container .key__info {
  width: 47%;
  margin-top: 96px;
}
#key .key__container .key__info .key__title {
  margin-bottom: 17px;
}
#key .key__container .key__photo {
  flex: 1;
  margin: 0px -139px 0 -12px;
}

#career-coaching {
  margin-top: -37px;
  padding-bottom: 133px;
  position: relative;
}
#career-coaching::before {
  content: "";
  background: url(../img/top/career-coaching_deco1.webp) no-repeat;
  width: 1263px;
  height: 679px;
  position: absolute;
  top: -136px;
  left: calc(50% - 583px);
  z-index: -1;
}
#career-coaching::after {
  content: "";
  background: linear-gradient(to left, #DFDCEB, #FAFAFA);
  position: absolute;
  top: -324px;
  right: 0;
  bottom: -7px;
  left: 0;
  clip-path: polygon(0 466px, 100% 0, 100% 100%, 0 66%);
  z-index: -2;
}
#career-coaching .career-coaching_info {
  max-width: 754px;
  margin: 0 auto;
  background: #fff;
  padding: 83px 103px 56px;
  box-shadow: 0 0 26px rgba(122, 141, 163, 0.16);
}
#career-coaching .career-coaching_info .career-coaching__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 43px;
  text-align: center;
  margin-bottom: 22px;
}
#career-coaching .career-coaching_info .career-coaching__title span {
  color: #fff;
  background: linear-gradient(to bottom, #A467C6, #316EB5);
  clip-path: polygon(5% 0, 100% 0, 96% 100%, 0% 100%);
  display: inline-block;
  padding: 1px 14px;
}
#career-coaching .career-coaching_info .career-coaching__btn {
  margin: 36px auto 0;
}
#career-coaching .features__header {
  display: flex;
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  bottom: 0;
}
#career-coaching .features__header .features__title {
  justify-content: center;
  position: relative;
  width: auto;
  font-size: 30px;
  font-weight: 900;
  line-height: 43px;
  color: var(--color-purple);
  border: 3px solid var(--color-purple);
  margin: 0 auto;
  padding: 0 6px;
  bottom: 0;
}

#features {
  padding-bottom: 92px;
}
#features .wrap {
  max-width: 1140px;
}
#features .features__container .features__row {
  display: flex;
  align-items: flex-start;
}
#features .features__container .features__row:nth-child(2n) {
  flex-direction: row-reverse;
}
#features .features__container .features__row.features__row1 {
  padding-bottom: 77px;
}
#features .features__container .features__row.features__row2 {
  padding-bottom: 68px;
}
#features .features__container .features__row.features__row2 .features__info {
  margin: 23px 0px 0 16px;
}
#features .features__container .features__row.features__row3 .features__info {
  margin: 28px 0px 0 16px;
}
#features .features__container .features__row .features__photo {
  width: 51.9090909091%;
}
#features .features__container .features__row .features__info {
  margin: 17px 0 0 9px;
  width: 42.7272727273%;
}
#features .features__container .features__row .features__info .features__title {
  font-size: 35px;
  font-weight: 700;
  line-height: 42px;
  margin-bottom: 12px;
}
#features .features__container .features__row .features__info .features__title span {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 25px;
  color: var(--color-purple);
  text-transform: uppercase;
  margin-left: 6px;
}
#features .features__container .features__row1 {
  position: relative;
}
#features .features__container .features__row1::before {
  content: "";
  background: url(../img/top/features_deco1.webp) no-repeat;
  width: 250px;
  height: 369px;
  position: absolute;
  top: -95px;
  left: -175px;
  z-index: -1;
}
#features .features__container .features__row2 {
  position: relative;
}
#features .features__container .features__row2::before {
  content: "";
  background: url(../img/top/features_deco2.webp) no-repeat;
  width: 188px;
  height: 329px;
  position: absolute;
  top: -187px;
  right: -138px;
  z-index: -1;
}

#slider {
  background: var(--color-gray);
  padding: 50px 0 53px;
}
#slider .js-slider1 li {
  display: block !important;
}
#slider .js-slider1 li img {
  width: 180px !important;
  height: auto;
  margin: 0 15px;
}

#career-advisor {
  padding: 73px 0 66px;
}
#career-advisor h2 {
  margin-bottom: 27px;
}
#career-advisor .career-advisor__js .career-advisor__item {
  width: 324px !important;
  margin: 0 10px;
  position: relative;
}
#career-advisor .career-advisor__js .career-advisor__item__info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.5) 100%);

}
#career-advisor .career-advisor__js .career-advisor__item .career-advisor__item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  position: absolute;
  left: 20px;
  bottom: 16px;
  line-height: 27px;
}
#career-advisor .career-advisor__js .career-advisor__item .career-advisor__item-title span {
  font-size: 20px;
}
#career-advisor .career-advisor__btn {
  margin: 19px auto 0;
}

.common .wrap {
  max-width: 1140px;
}
.common h2 {
  margin-bottom: 23px !important;
}
.common .common__container {
  --f-columns: 4;
  --f-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--f-gap));
  margin-bottom: calc(-1 * var(--f-gap));
}
.common .common__container .common__item {
  margin-left: var(--f-gap);
  margin-bottom: var(--f-gap);
  width: calc(100% / var(--f-columns) - var(--f-gap));
}
.common .common__container .common__item .common__image {
  position: relative;
}
.common .common__container .common__item .common__image .common__logo {
  position: absolute;
  bottom: 12px;
  left: 10px;
  width: 60px;
  height: 36px;
  padding: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.common .common__container .common__item .common__content {
  margin-top: 4px;
}
.common .common__container .common__item .common__content .common__info .common__category {
  background: linear-gradient(to right, #EB09AF, #4F33D0);
  min-width: 64px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  padding: 0 5px 1px;
  display: inline-block;
  color: var(--color-white);
}
.common .common__container .common__item .common__content .common__info .common__details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 21px;
  color: var(--color-dark-gray);
}
.common .common__container .common__item .common__content .common__text {
  margin-top: 4px;
}
.common .common__container .common__item .common__content .common__text .common__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-purple2);
}
.common .common__container .common__item .common__content .common__text .common__job-title {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-purple2);
  text-align: left;
  margin-top: 2px;
  min-height: 42px;
}
.common .common__container .common__item .common__content .common__text .common__company {
  font-size: 12px;
  line-height: 21px;
  color: var(--color-dark-gray);
  text-align: right;
  margin-top: 2px;
}
.common .common__btn {
  margin: 28px auto 0;
}
.common .common__link {
  text-align: center;
  margin-top: 17px;
}
.common .common__link a {
  font-weight: 400;
  display: inline-block;
  text-align: center;
  color: var(--color-purple);
  position: relative;
}
.common .common__link a::before {
  content: "";
  border-top: 1px solid var(--color-purple);
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
}
.common .common__link a:hover::before {
  content: none;
}
.common__image img {
  height: 144px;
}

#leadership {
  background: var(--color-gray);
  padding: 68px 0 53px;
}

#career-enhancement {
  padding: 61px 0 53px;
}
#career-enhancement h2 {
  margin-bottom: 27px !important;
}
#career-enhancement .common__btn {
  margin: 25px auto 0;
}

#content {
  background: var(--color-gray);
  padding: 71px 0 60px;
}
#content .common__container .common__item .common__content {
  margin-top: 6px;
}

#leadership-guide {
  padding: 61px 0 73px;
}
#leadership-guide .wrap {
  max-width: 1140px;
}
#leadership-guide .leadership-guide__list {
  --f-columns: 4;
  --f-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--f-gap));
  margin-bottom: calc(-1 * var(--f-gap));
}
#leadership-guide .leadership-guide__list li {
  margin-left: var(--f-gap);
  margin-bottom: var(--f-gap);
  width: calc(100% / var(--f-columns) - var(--f-gap));
}

@media only screen and (max-width: 560px) {
  main::before {
    background: url(../img/top/hd_deco1.webp) no-repeat left top/100% auto;
    left: -22.32vw;
  }
  main::after {
    background: url(../img/top/hd_deco2.webp) no-repeat right top/100% auto;
    width: 31.61vw;
    height: 45.36vw;
    right: 7.32vw;
  }
  .ttl {
    font-size: 5.36vw;
  }
  .ttl span {
    font-size: 2.85vw;
  }
  #key .key__container {
    flex-direction: column-reverse;
  }
  #key .key__container .key__info {
    width: 100%;
    margin-top: 3.57vw;
  }
  #key .key__container .key__info .key__title {
    margin-bottom: 3.75vw;
  }
  #key .key__container .key__photo {
    margin: 3.21vw -19% 0 -12%;
    flex: none;
  }
  #key .key__container .key__btn {
    margin: 0 11% 0 6%;
    max-width: 100%;
    width: auto;
  }
  #career-coaching {
    margin-top: 12.68vw;
    padding-bottom: 10.71vw;
  }
  #career-coaching::before {
    background: url(../img/top/career-coaching_deco1_sp.png) no-repeat center top/100% auto;
    width: auto;
    height: auto;
    top: -24.82vw;
    left: -9.82vw;
    right: -3.21vw;
    bottom: 0;
  }
  #career-coaching::after {
    background: url(../img/top/career-coaching_deco2_sp.png) no-repeat center top/100% auto;
    top: -67vw;
    bottom: 0;
    height: auto;
    clip-path: none;
  }
  #career-coaching .career-coaching_info {
    padding: 6.07vw 7.14vw 7.14vw;
  }
  #career-coaching .career-coaching_info .career-coaching__title {
    font-size: 5.36vw;
    margin-bottom: 3.93vw;
  }
  #career-coaching .career-coaching_info .career-coaching__title span {
    margin-top: 1.61vw;
  }
  #career-coaching .career-coaching_info .career-coaching__btn {
    margin: 3.39vw auto 0;
  }
  #career-coaching .features__header {
    position: absolute;
    width: 100%;
    height: auto;
    margin: 6.07vw 0 0 0;
    bottom: 0;
  }
  #career-coaching .features__header .features__title {
    position: relative;
    font-size: 5.36vw;
    font-weight: 900;
    line-height: 5.36vw;
    color: var(--color-purple);
    border: 3px solid var(--color-purple);
    margin: 0 auto;
    padding: 0.5vw;
  }

  #features {
    padding-bottom: 12.32vw;
  }
  #features .features__container .features__row {
    display: block;
  }
  #features .features__container .features__row.features__row1 {
    padding-bottom: 10.54vw;
  }
  #features .features__container .features__row.features__row2 {
    padding-bottom: 10.54vw;
  }
  #features .features__container .features__row .features__photo {
    width: 100%;
  }
  #features .features__container .features__row .features__info {
    margin: 3.04vw 0 0 !important;
    width: 100%;
  }
  #features .features__container .features__row .features__info .features__title {
    font-size: 6.25vw;
    line-height: 7.5vw;
    margin-bottom: 3.04vw;
  }
  #features .features__container .features__row .features__info .features__title span {
    font-size: 4.46vw;
    margin-left: 0;
  }
  #features .features__container .features__row1::before {
    background: url(../img/top/features_deco1_sp.webp) no-repeat 0 0/100% auto;
    width: 18.75%;
    height: auto;
    top: -10.71vw;
    left: -7.1428571429vw;
    bottom: 0;
  }
  #features .features__container .features__row2::before {
    background: url(../img/top/features_deco2_sp.webp) no-repeat right top/100% auto;
    width: 20.9375%;
    height: auto;
    top: -8.21vw;
    right: -7.1428571429vw;
    bottom: 0;
  }
  #career-advisor {
    padding: 12.68vw 0 13.75vw;
  }
  #career-advisor h2 {
    font-size: 5.36vw;
    margin-bottom: 4.46vw;
  }
  #career-advisor h2 span {
    font-size: 2.85vw;
  }
  #career-advisor .career-advisor__js .career-advisor__item .career-advisor__item-title {
    font-size: 3.21vw;
    font-weight: 500;
    left: 3.57vw;
    bottom: 3.57vw;
    line-height: 4.11vw;
  }
  #career-advisor .career-advisor__js .career-advisor__item .career-advisor__item-title span {
    font-size: 4.82vw;
    font-weight: 700;
    margin-top: 1.79vw;
    display: inline-block;
  }
  #career-advisor .career-advisor__btn {
    margin: 4.64vw auto 0;
  }
  .common h2 {
    margin-bottom: 7.5vw !important;
  }
  .common h2 span {
    font-size: 3.57vw;
    margin-top: 2.32vw;
  }
  .common .common__container {
    --f-columns: 1;
    --f-gap: 0vw;
    margin-bottom: -9.64vw;
  }
  .common .common__container .common__item {
    margin-bottom: 9.64vw;
  }
  .common .common__container .common__item .common__image .common__logo {
    bottom: 3.75vw;
    left: 3.21vw;
    width: 19.82vw;
    height: 11.96vw;
    padding: 0 1.79vw;
  }
  .common .common__container .common__item .common__content {
    margin-top: 3.39vw;
  }
  .common .common__container .common__item .common__content .common__info .common__category {
    min-width: 17.14vw;
    font-size: 3.57vw;
    padding: 1.07vw;
  }
  .common .common__container .common__item .common__content .common__info .common__details {
    font-size: 3.57vw;
    margin-top: 1.43vw;
  }
  .common .common__container .common__item .common__content .common__text {
    margin-top: 3.93vw;
  }
  .common .common__container .common__item .common__content .common__text .common__title {
    font-size: 5.36vw;
    line-height: 6.61vw;
  }
  .common .common__container .common__item .common__content .common__text .common__job-title {
    font-size: 3.57vw;
    margin-top: 4.11vw;
  }
  .common .common__container .common__item .common__content .common__text .common__company {
    font-size: 3.57vw;
    margin-top: 4.11vw;
  }
  .common .common__btn {
    margin: 9.46vw auto 0;
  }
  .common .common__link {
    margin-top: 3.57vw;
  }
  .common .common__link a {
    font-size: 3.57vw;
  }
  .common .common__link a::before {
    bottom: 0.54vw;
  }
  .common__image img {
    height: auto;
  }
  #leadership {
    padding: 12.32vw 0;
  }
  #career-enhancement {
    padding: 12.32vw 0;
  }
  #career-enhancement h2 {
    margin-bottom: 7.32vw !important;
  }
  #career-enhancement .common__btn {
    margin: 9.46vw auto 0;
  }
  #content {
    padding: 12.68vw 0;
  }
  #content h2 {
    margin-bottom: 6.43vw !important;
  }
  #content .common__container {
    margin-bottom: -11.43vw;
  }
  #content .common__container .common__item {
    margin-bottom: 11.43vw;
  }
  #content .common__container .common__item .common__content {
    margin-top: 3.75vw;
  }
  #content .common__container .common__item .common__content .common__details {
    margin-top: 2.5vw;
  }
  #leadership-guide {
    padding: 12.32vw 0 11.25vw;
  }
  #leadership-guide .wrap {
    padding: 0;
  }
  #leadership-guide .leadership-guide__list {
    --f-columns: 1;
    --f-gap: 0vw;
    display: block;
    flex-wrap: wrap;
    margin-left: 0;
    margin-bottom: 0;
  }
  #leadership-guide .leadership-guide__list li {
    margin: 0 1.79vw !important;
    width: auto !important;
  }
}

/* ヘッダ用仮テキスト */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.head_text1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 56px;
  font-weight: 800;
  font-style: italic;
  line-height: 68px;
  letter-spacing: 4px;
}
.head_text1 span {
  font-style: italic;
  background: linear-gradient(160deg, var(--color-purple), black);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head_text2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 56px;
  font-weight: 800;
  font-style: italic;
  line-height: 68px;
  letter-spacing: -5px;
  color: var(--color-black);
}
.head_sub_text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  line-height: 40px;
  letter-spacing: 0.5px;
  color: var(--color-purple);
}
/*# sourceMappingURL=top.css.map */