:root {
  --default-font-family: "Hiragino Sans", Helvetica;
  --default-font-weight: 400;
  --default-font-size: 14px;
  --small-font-size: 12px;
  --middle-font-size: 16px;
  --large-font-size: 24px;

  --1-secondary-01: rgba(70, 149, 212, 1);
  --1-primary-01: rgba(15, 88, 164, 1);
  --1-txt-01: rgba(51, 51, 51, 1);
}

/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/* サイドメニュー start*/
.side {
  margin-left: 40px;
  width: 300px;
}

.side--sticky {
  position: sticky;
  display: none;
  bottom: 0;
}

.valdemy-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-top: 30px;
}

.side-article-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 8px;
}

.approaching-events-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 24px 20px;
  position: relative;
  align-self: stretch;
  background-color: var(--1-secondary-01);
  border-radius: 8px;
}

.side-events-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 24px 20px;
  position: relative;
  align-self: stretch;
  background-color: var(--1-secondary-01);
  border-radius: 8px;
  margin-top: 20px;
}

/* サイドメニュー end*/

.article-tag-time-text-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 5px;
}

.article-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.material-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.tool-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.bottom-title-text-wrapper {
  gap: 12px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-left-width: 7px;
  display: flex;
  align-items: center;
  padding: 8px 24px;
  position: relative;
  border-left-style: solid;
  border-color: var(--1-primary-01);
}

.bottom-title-text {
  width: fit-content;
  margin-top: -7.00px;
  font-family: var(--default-font-family);
  font-weight: var(--default-font-weight);
  color: var(--1-primary-01);
  font-size: var(--large-font-size);
  white-space: nowrap;
  position: relative;
}

.article-contents-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.article-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: #dbdbdb;
  box-shadow: 0px 2px 6px #0000001f;
}

.article-img {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 1.76;
}

.article-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.material-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.material-description-text {
  position: relative;
  align-self: stretch;
  margin: 0px;
  font-family: var(--default-font-family);
  font-weight: var(--default-font-weight);
  color: var(--1-txt-01);
  font-size: var(--default-font-size);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.article-description-text {
  position: relative;
  align-self: stretch;
  font-family: var(--default-font-family);
  font-weight: var(--default-font-weight);
  color: var(--1-txt-01);
  font-size: var(--middle-font-size);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.article-tag-text-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 8px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--1-primary-01);
}

.article-time-text-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 100px;
}

.article-time-text {
  position: relative;
  width: fit-content;
  font-family: var(--default-font-family);
  font-weight: var(--default-font-weight);
  color: var(--1-txt-01);
  font-size: var(--small-font-size);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.material-content {
  display: flex;
  flex-direction: column;
  width: 338px;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.material-title-text {
  align-self: stretch;
  margin: 5px;
  font-family: var(--default-font-family);
  font-weight: var(--default-font-weight);
  color: var(--1-primary-01);
  font-size: var(--middle-font-size);
  text-align: center;
  position: relative;
}

.education-service-section {
  margin: 30px 0px 40px 0px;
}

.otherService__area--margin {
  border-radius: 16px;
}

.bottom-area {
  max-width: 1060px;
  margin: auto;
}

/* テストツール */
.tool-contents-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.tool-contents-wrapper-line {
  display: flex;
  height: 160px;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.tool-content {
  position: relative;
  flex: 1;
  width: 518px;
}

.tool-img {
  width: 100%;
}

/* Qbookの教育サービス */
.education-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 64px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--1-secondary-01);
  border-radius: 20px;
  overflow: hidden;
}

.education-wrapper-background-vector {
  position: absolute;
  top: 97px;
  left: calc(50.00% - 530px);
}

.education-wrapper-background-vector-2 {
  position: absolute;
  max-width: 140%;
  top: 250px;
  left: calc(50.00% - 810px);
}

.education-head-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.education-head {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.education-head-textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.education-head-sub-title {
  width: fit-content;
  margin-top: -1.00px;
  color: rgba(190, 226, 255, 1);
  font-size: 16px;
  line-height: 180%;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

.education-head-title {
  align-self: stretch;
  color: rgba(255, 255, 255, 1);
  font-size: 40px;
  line-height: 150%;
  position: relative;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

.education-head-text {
  align-self: stretch;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 180%;
  position: relative;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

.education-more-wrapper {
  width: 160px;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  position: relative;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 100px;
  text-decoration: none;
}

.education-more-vector {
  width: 16px;
  height: 16px;
  position: relative;
  aspect-ratio: 1;
}

.educations {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.education-line {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.education-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 24px 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
}

.columns {
  display: flex;
  align-items: stretch;
  gap: 20px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.education-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.education-header {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.education-title {
  width: 144px;
  margin-top: -1.00px;
  color: var(--1-txt-01);
  font-size: 24px;
  line-height: 150%;
  position: relative;
  font-weight: 600;
  letter-spacing: 0;
  font-style: normal;
}

.education-general-tag-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 8px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--1-secondary-01);
  border-radius: 4px;
}

.education-company-tag-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 8px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--1-primary-01);
  border-radius: 4px;
}

.education-tag-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1.00px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 180%;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

.education-sub-title {
  align-self: stretch;
  color: rgba(15, 88, 164, 1);
  font-size: 14px;
  line-height: 180%;
  position: relative;
  font-weight: 600;
  letter-spacing: 0;
  font-style: normal;
}

.education-more-btn {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background-color: var(--1-primary-01);
  border-radius: 100px;
  text-decoration: none;
}

.education-more-btn-vector {
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}

.education-text {
  align-self: stretch;
  color: var(--1-txt-01);
  font-size: 14px;
  line-height: 180%;
  position: relative;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

@media screen and (max-width: 767px) {

  :root {
    --default-font-weight: 600;
    --large-font-size: 18px;
  }

  /*サイドメニュー start*/
  .side {
    margin: auto;
    width: 342px;
    display: flex;
  }

  .side--sticky {
    display: none !important;
  }

  .approaching-events-section {
    padding: 15px 14px 15px;
  }

  /*サイドメニュー end*/

  .bottom-title-text-wrapper {
    padding: 8px 0px 8px 12px;
  }

  .article-contents-wrapper {
    margin: 0 auto;
    flex-direction: column;
  }

  .article-text-wrapper {
    padding: 10px 20px;
    margin: auto;
  }

  .material-content {
    width: 342px;
    margin-bottom: 20px;
  }

  .bottom-area {
    max-width: 342px;
    margin: 0 auto;
  }

  /* テストツール */
  .tool-contents-wrapper-line {
    display: block;
    margin-bottom: 45px;
  }

  .tool-content-wrapper {
    margin-bottom: 15px;
  }

  /* Qbookの教育サービス */
  .education-wrapper {
    gap: 24px;
    padding: 32px 24px;
  }

  .education-wrapper-background-vector {
    max-width: 350%;
    top: 110px;
    left: -470px;
  }

  .education-wrapper-background-vector-2 {
    max-width: 550%;
    top: 245px;
    left: -370px;
  }

  .education-head-textarea {
    gap: 0px;
  }

  .education-head-sub-title {
    font-size: 14px;
    white-space: normal;
  }

  .education-head-title {
    font-size: 24px;
  }

  .education-line {
    flex-direction: column;
  }

  .education-item {
    gap: 12px;
    padding: 20px 16px;
  }

  .education-header {
    height: 30px;
    gap: 12px;
  }

  .education-title {
    width: 120px;
    font-size: 20px;
  }

  .education-tag-text {
    font-size: 12px;
  }

  .education-more-btn {
    width: 32px;
    height: 32px;
  }

  .education-more-btn-vector {
    width: 16px;
    height: 16px;
  }
}