/*
rules:
- `g-` 接頭辞を付ける
- なるべく小さいものから先に書く
*/

/* iframes */

.g-iframe-container {
  width: 100%;
  margin: auto;
  iframe {
    aspect-ratio: 560 / 315;
    width: 100%;
    height: auto;
  }
}
.g-iframe-container--md {
  @media (min-width: 1024px) {
    width: var(--g-width--content-md);
  }
}

/* shapes */

.g-shape {
  content: "";
  width: 9rem;
  height: 4rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: var(--g-color--heading--blue);
  @media (min-width: 1024px) {
    width: 18rem;
    height: 8rem;
  }
}

.g-shape-container {
  margin: auto;
}

/* buttons */

.g-button {
  --bg-color: var(--g-color--blue--pro);
  --fg-color: var(--g-color--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  min-height: 5.2rem;
  background-color: var(--bg-color);
  text-decoration: none;
  color: var(--fg-color);
  @media (min-width: 1024px) {
    min-height: 12rem;
  }
  &::after {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 9 / 17;
    height: 1.8rem;
    background: url("./button__icon.png") no-repeat center / contain;
    content: "";
  }
  @media (min-width: 1024px) {
    &::after {
      height: 5rem;
    }
  }
}
.g-button--student {
  --bg-color: var(--g-color--blue--student);
}
.g-button__texts {
  min-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  @media (min-width: 1024px) {
    gap: 1.25rem;
  }
}
.g-button__divider {
  width: 100%;
  height: 1px;
  background-color: var(--g-color--white);
}
.g-button__texts-item {
  line-height: 1;
  font-weight: bold;
  font-size: var(--g-fz--p3);
  @media (min-width: 1024px) {
    padding: 0 1rem;
    font-size: 2.7rem;
  }
}
.g-button__texts-item--sub {
  font-weight: bold;
  font-size: 1rem;
  @media (min-width: 1024px) {
    font-size: 1.8rem;
  }
}

.g-button-2 {
  --bg-color: var(--g-color--blue);
  --fg-color: var(--g-color--white);
  --border-color: var(--g-color--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  min-height: 5.6rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  text-decoration: none;
  color: var(--fg-color);
  font-size: var(--g-fz--p2);
  @media (min-width: 1024px) {
    min-height: 8.1rem;
    font-size: var(--g-fz--p1);
  }
  &::after {
    position: absolute;
    right: 1.5rem;
    aspect-ratio: 1;
    height: 1.8rem;
    background: url("./button-2__icon.png") no-repeat center / contain;
    content: "";
  }
  @media (min-width: 1024px) {
    &::after {
      height: 2.9rem;
    }
  }
}
.g-button-2--transparent {
  --bg-color: transparent;
  --fg-color: var(--g-color--blue);
  --border-color: var(--g-color--blue);
  border: 1px solid var(--border-color);
  &::after {
    background-image: url("./button-2__icon--transparent.png");
  }
}
.g-button-2--fg-white {
  --fg-color: var(--g-color--white);
  --border-color: var(--g-color--white);
  &::after {
    background-image: url("./button-2__icon--fg-white.png");
  }
}
.g-button-2--cv {
  --bg-color: var(--g-color--cv);
  --fg-color: var(--g-color--white);
}
.g-button-2--no-icon {
  &::after {
    display: none;
  }
}
.g-button-2--s {
  --bg-color: var(--g-color--blue);
  --fg-color: var(--g-color--white);
  --border-color: var(--g-color--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  min-height: 5.1rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  text-decoration: none;
  color: var(--fg-color);
  font-size: var(--g-fz--p2);
  @media (min-width: 1024px) {
    min-height: 6.1rem;
    font-size: var(--g-fz--p1);
  }
  &::after {
    position: absolute;
    right: 1.5rem;
    aspect-ratio: 1;
    height: 1.8rem;
    background: url("./button-2__icon.png") no-repeat center / contain;
    content: "";
  }
  @media (min-width: 1024px) {
    &::after {
      height: 2.9rem;
    }
  }
}

.g-button-3 {
  --size: 11rem;
  --icon-size: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: var(--size);
  border-radius: 50%;
  background-color: var(--g-color--blue--light);
  aspect-ratio: 1;
  color: var(--g-color--white);
  &::before {
    content: "";
    height: var(--icon-size);
    aspect-ratio: 23 / 25;
    background: url("./button-3__icon.png") no-repeat center / contain;
  }
}

.g-button-4 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--g-color--blue);
  padding: 1rem;
  background-color: var(--g-color--white);
  text-decoration: none;
  color: inherit;
  font-size: var(--g-fz--p3);
  &::after {
    position: absolute;
    right: 1rem;
    content: "";
    width: 1em;
    aspect-ratio: 1;
    background: url("./button-4__icon.png") no-repeat center / contain;
  }
  img {
  }
}

.g-button-5 {
  --bg-color: transparent;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  height: 100%;
  background-color: var(--bg-color);
  font-weight: bold;
  font-size: 1.6rem;
  color: var(--g-color--white);
  text-decoration: none;
  padding: 0.25rem 0;
  &::after {
    aspect-ratio: 1;
    height: 1em;
    background: url("./button-5__icon.png") no-repeat center / contain;
    content: "";
  }
}
.g-button-5--pro {
  --bg-color: var(--g-color--blue--pro);
}
.g-button-5--student {
  --bg-color: var(--g-color--blue--student);
}

.g-button-6 {
  --bg-color: transparent;
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--g-color--white);
  background-color: var(--bg-color);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5rem;
  height: 5.4rem;
  &::after {
    position: absolute;
    right: 1rem;
    top: auto;
    height: 1.5em;
    aspect-ratio: 1;
    background: url("./button-6__icon.png") no-repeat center / contain;
    content: "";
  }
}
.g-button-6--pro {
  --bg-color: var(--g-color--blue--pro);
}
.g-button-6--student {
  --bg-color: var(--g-color--blue--student);
}

/* for form check (or radio) input */
.g-check-button {
  padding: 0.25em 1em;
  background-color: #f4f4f4;
  input {
    display: none;
  }
  &:has(input:checked) {
    background-color: var(--g-color--blue);
    color: var(--g-color--white);
  }
}

.g-button-container {
  --width: var(--g-width--content-xs);
  margin: auto;
  width: var(--width);
  display: grid;
  @media (min-width: 1024px) {
    --width: var(--g-width--content-sm);
  }
}
.g-button-container--content-center {
  justify-content: center;
}

.g-buttons {
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  justify-content: center;
}
.g-buttons__item {
  flex: 0 1 var(--g-width--content-sm);
}

.g-buttons-2 {
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: rgba(191, 221, 255, 0.77);
}
.g-buttons-2__item {
  --bg-color: #ff7045;
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--g-color--white);
  background-color: var(--bg-color);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5rem;
  height: 4.5rem;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  font-size: var(--g-fz--p1);
  font-weight: bold;
  &::after {
    position: absolute;
    right: 0.125rem;
    top: auto;
    height: 1em;
    aspect-ratio: 1;
    background: url("./buttons-2__item-icon.png") no-repeat center / contain;
    content: "";
  }
}
.g-buttons-2__item--bg-2 {
  --bg-color: #ff1601;
}
.g-buttons-2__item--bg-3 {
  --bg-color: #06c755;
}

/* inputs */

.g-input-set {
  display: flex;
  height: 4rem;
  justify-content: stretch;
  border: 1px solid var(--g-color--blue);
}
.g-input-set__input {
  flex: auto;
  appearance: none;
  border: none;
  padding: 0 1rem;
}
.g-input-set__button {
  flex: none;
  appearance: none;
  display: flex;
  aspect-ratio: 1;
  border: none;
  background: url("./input-set__button-icon.png") no-repeat center / auto 2.4rem,
    var(--g-color--blue);
}

/* labels */

.g-label {
  --bg-color: #7099d0;
  display: flex;
  align-items: stretch;
  &::after {
    width: 3rem;
    background-color: var(--bg-color);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: "";
  }
}
.g-label__text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6ic;
  min-height: 3.8rem;
  border-left: 6px solid #bfddff;
  font-size: var(--g-fz--h3);
  color: var(--g-color--white);
  background-color: var(--bg-color);
}

.g-label-2 {
  --bg-color: var(--g-color--blue);
  display: flex;
  align-items: stretch;
  &::after {
    width: 5rem;
    background-color: var(--g-color--gray);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: "";
  }
}
.g-label-2__text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125ic;
  min-height: 1.125ic;
  line-height: 1;
  font-size: 3rem;
  color: var(--g-color--white);
  background-color: var(--bg-color);
  @media (min-width: 1024px) {
    font-size: 5rem;
  }
}

/* paginations */

.g-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  .page-numbers {
    text-decoration: none;
    color: inherit;
    font-size: var(--g-fz--p1);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 4rem;
    height: 4rem;
    &:not(.dots) {
      background-color: var(--g-color--gray--light);
    }
    &.dots {
      align-self: flex-start;
      min-width: 0;
    }
    &.current {
      background-color: var(--g-color--blue);
      color: var(--g-color--white);
    }
    &.prev::before,
    &.next::before {
      content: "";
      width: 1em;
      height: 1em;
      background: url("./pagination__icon.png") no-repeat center / contain;
    }
    &.prev::before {
      transform: rotate(-180deg);
    }
  }
}

/* counters */

.g-counter {
  counter-reset: counter-count;
}
.g-counter__count {
  counter-increment: counter-count;
  &::before {
    content: counter(counter-count);
  }
}

/* accordions */

.g-accordion {
  --padding-x: 1rem;
  --padding-x-e: 3rem;
  --padding-y: 2.5rem;
  --trigger-icon-url: url("./accordion__trigger-icon.png");
}
.g-accordion--white {
  --trigger-icon-url: url("./accordion__trigger-icon--white.png");
}
.g-accordion__trigger {
  position: relative;
  cursor: pointer;
  padding: var(--padding-y) var(--padding-x-e) var(--padding-y) var(--padding-x);
  &:has(+ .g-accordion__body)::after {
    position: absolute;
    right: var(--padding-x);
    top: 50%;
    transform: translateY(-50%);
    height: 1em;
    aspect-ratio: 1;
    background: var(--trigger-icon-url) no-repeat center / contain;
    content: "";
    transition: transform 0.25s;
  }
  &.is-active::after {
    transform: rotate(-180deg);
  }
}
.g-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: padding 0.25s, grid-template-rows 0.25s;
  padding: 0;
  &.is-active {
    grid-template-rows: 1fr;
    padding: 0 var(--padding-x) var(--padding-y) var(--padding-x);
  }
}
.g-accordion__body-inner {
  overflow: hidden;
}

.g-accordions {
}
.g-accordions__item {
  border-top: 1px solid var(--g-color--gray);
  &:first-child {
    border-top: none;
  }
}

.g-accordions-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-accordions-2__item {
  --border-color: var(--g-color--white);
  --padding-y: 1rem;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* banners */

.g-banner {
  display: grid;
  grid-template-areas:
    "a"
    "b";
  @media (min-width: 1024px) {
    grid-template-areas: "a b";
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-banner--invert-on-pc {
  @media (min-width: 1024px) {
    grid-template-areas: "b a";
  }
}
.g-banner__thumb {
  grid-area: a;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.g-banner__content {
  grid-area: b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  min-height: 26rem;
  gap: 1.5rem;
  background-color: var(--g-color--blue);
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    padding: 0 8rem;
  }
}
.g-banner__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--g-fz--h3);
  &::after {
    width: min(100%, 15rem);
    height: 1px;
    background-color: var(--g-color--white);
    content: "";
  }
}
.g-banner__content-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.g-banner__text {
  font-size: var(--g-fz--p2);
}
.g-banner__button {
  width: 24rem;
  @media (min-width: 1024px) {
    width: 33rem;
  }
}

.g-banner-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f2f6fb;
}
.g-banner-2__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.g-banner-2__title-ja {
  font-size: var(--g-fz--p3);
}
.g-banner-2__title-en {
  font-size: var(--g-fz--h1);
  color: #5d8cc5;
}
.g-banner-2__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.g-banner-2__text {
  font-size: var(--g-fz--p3);
  font-weight: bold;
}
.g-banner-2__text-2 {
  font-size: var(--g-fz--p3);
}
.g-banner-2__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-banner-2__input-set {
  display: grid;
}
.g-banner-2__input-set-label {
  font-size: var(--g-fz--p4);
}
.g-banner-2__input-set-input {
  appearance: none;
  border: 1px solid var(--g-color--gray);
  height: 4rem;
  padding: 0 0.5rem;
}
.g-banner-2__submit {
  appearance: none;
  border: none;
  height: 4rem;
  background-color: var(--g-color--blue);
  color: var(--g-color--white);
}

.g-banner-3 {
  display: flex;
  justify-content: center;
  img {
    max-width: 100%;
  }
}

.g-banner-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--g-color--gray);
  padding: 1rem;
  img {
  }
}

.g-banner-set {
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  width: 100%;
  @media (min-width: 1024px) {
    max-width: var(--g-width--max-content);
    margin: auto;
  }
}
.g-banner-set__text {
  text-align: center;
}
.g-banner-set__banners {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 0;
  }
}

.g-banners {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  @media (min-width: 1024px) {
    gap: 4rem;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* tables */

.g-table-set {
}
.g-table-set--md {
  max-width: var(--g-width--content-md);
  margin: auto;
}
.g-table-set__title {
  padding: 1rem 0;
  border: 1px solid #6a87ae;
  background-color: #6a87ae;
  font-size: var(--g-fz--p1);
  color: var(--g-color--white);
  text-align: center;
}
.g-table-set__table {
  --th-width: 1;
  table-layout: fixed;
  border-collapse: collapse;
  tr {
  }
  th,
  td {
    padding: 1rem;
    font-size: var(--g-fz--p2);
    border: 1px solid var(--g-color--gray);
    text-align: left;
    vertical-align: top;
  }
  th {
    min-width: calc(var(--th-width) * 1ic);
  }
  td {
  }
}
.g-table__caption {
  font-size: var(--g-fz--p3);
}

/* infos */

.g-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.g-info__time {
  color: var(--g-color--blue);
  font-size: var(--g-fz--p3);
}
.g-info__label {
  padding: 0.25rem 1rem;
  background-color: #ebf1fb;
  color: var(--g-color--blue);
  font-size: var(--g-fz--p4);
}

/* articles */

.g-article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem;
  border: 1px solid var(--g-color--blue--light);
  background-color: var(--g-color--white);
}
.g-article__title {
  font-size: var(--g-fz--p1);
  color: var(--g-color--blue--student);
}
.g-article__content {
  font-size: var(--g-fz--p2);
}
.g-article__label {
  width: fit-content;
  padding: 0.25rem 1rem;
  background-color: var(--g-color--blue--light);
  font-size: var(--g-fz--p2);
  color: var(--g-color--white);
}

.g-article-2 {
  --gap: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-article-2__thumb {
  max-width: var(--g-width--content-md);
  margin: auto;
  img {
    width: 100%;
  }
}
.g-article-2__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-article-2__text {
  font-size: var(--g-fz--p2);
}

.g-article-3 {
  --gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-article-3__thumb {
  img {
    width: 100%;
  }
}
.g-article-3__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.g-article-4 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  @media (min-width: 1024px) {
    flex-direction: row;
  }
}
.g-article-4__thumb {
  flex: none;
  @media (min-width: 1024px) {
    width: 23rem;
  }
  img {
    width: 100%;
  }
}
.g-article-4__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.g-article-5 {
  border: 1px solid var(--g-color--gray);
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 0.5rem;
  @media (min-width: 1024px) {
    padding: 1.5rem;
  }
}
.g-article-5__cover {
  position: relative;
  img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 315 / 195;
  }
}
.g-article-5__content {
  display: grid;
  gap: 1rem;
}
.g-article-5__label {
  color: var(--g-color--blue);
  font-size: var(--g-fz--p3);
}
.g-article-5__title {
  color: var(--g-color--text);
  font-size: var(--g-fz--p2);
  /* @media (min-width: 1024px) { */
  color: var(--g-color--blue--student);
  font-size: var(--g-fz--p1);
  font-weight: 500;
  /* } */
  a {
    color: inherit;
    text-decoration: none;
  }
}
.g-article-5__text {
  color: var(--g-color--text);
  /* display: none; */
  font-size: var(--g-fz--p2);
  @media (min-width: 1024px) {
    display: block;
  }
}

.g-article-6 {
  border: 1px solid var(--g-color--gray);
}
.g-article-6__thumb {
  position: relative;
  img {
  }
}
.g-article-6__thumb-logo {
  position: absolute;
  left: 0;
  top: 0;
  --bg-color: #fff;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 7rem;
  width: 13rem;
  background-color: var(--bg-color);
  padding: 1rem;
}
.g-article-6__content {
  background-color: var(--g-color--white);
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}
.g-article-6__title-set {
  border-bottom: 1px solid var(--g-color--text);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}
.g-article-6__title {
  color: var(--g-color--text);
  font-size: var(--g-fz--p1);
  font-weight: 500;
}
.g-article-6__label {
  color: var(--g-color--text);
  font-size: var(--g-fz--p3);
}
.g-article-6__text {
  color: var(--g-color--text);
  font-size: var(--g-fz--p2);
}

.g-article-7 {
  border: 1px solid var(--g-color--gray);
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--g-color--white);
  text-decoration: none;
  color: inherit;
}
.g-article-7__cover {
  position: relative;
  img {
    width: 100%;
  }
}
.g-article-7__cat {
  align-items: center;
  background-color: var(--g-color--blue--pro);
  color: var(--g-color--white);
  display: flex;
  font-size: var(--g-fz--p3);
  height: 3.2rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1.4rem;
}
.g-article-7__cat--v-2 {
  background-color: var(--g-color--blue--student);
}
.g-article-7__info {
  background-color: rgba(191, 221, 255, 0.3);
  border: 1px solid rgba(191, 221, 255, 0.82);
  padding: 1rem;
}
.g-article-7__info p strong {
  font-size: var(--g-fz--p2);
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.g-article-7__info p {
  color: var(--g-color--text);
  font-size: var(--g-fz--p3);
}
.g-article-7__text {
  text-decoration: none;
  color: inherit;
}

.g-article-8 {
}
.g-article-8__content {
  background-color: var(--g-color--white);
  padding: 3rem 2rem 2rem;
  position: relative;
}
.g-article-8__thumb-labels {
  position: absolute;
  left: 0;
  top: -2.5rem;
  display: flex;
}
.g-article-8__thumb-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  min-width: 7ic;
  background-color: var(--g-color--blue--strong);
  font-weight: 500;
  color: var(--g-color--white);
}
.g-article-8__text {
  color: var(--g-color--text);
  font-size: var(--g-fz--p3);
}

.g-article-9 {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
}
.g-article-9__thumb {
  img {
    width: 100%;
  }
}
.g-article-9__content {
  display: grid;
  gap: 0.5rem;
}
.g-article-9__title {
  font-size: 1.3rem;
  a {
    color: inherit;
    text-decoration: none;
  }
}
.g-article-9__label {
  font-size: var(--g-fz--p4);
  color: var(--g-color--blue);
}

.g-article-10 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.g-article-10__thumb {
  img {
    width: 100%;
  }
}
.g-article-10__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-article-10__group {
}
.g-article-10__title {
  color: var(--g-color--heading--blue);
  font-size: var(--g-fz--p2);
  a {
    color: inherit;
    text-decoration: none;
  }
}

.g-article-11 {
  * {
    word-break: break-word;
  }
  > h3 {
    margin: 0 0 3rem;
    position: relative;
    &::before,
    &::after {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 4px;
      content: "";
    }
    padding-bottom: 1rem;
    font-size: var(--g-fz--h2);
    color: var(--g-color--blue);
    &::before {
      width: 100%;
      background-color: #c8daf3;
    }
    &::after {
      width: 9.6rem;
      background: var(--g-color--blue);
    }
  }
  > h4 {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--g-fz--h3);
    &::after {
      flex: auto;
      height: 1px;
      background-color: var(--g-color--text);
      content: "";
    }
  }
  > p {
    margin: 0 0 4rem;
    line-height: 2;
  }
  > [class*="article-img"] {
    margin: 0 2rem 4rem;
  }
  @media (min-width: 1024px) {
    > .-img-right {
      float: right;
      margin: 0 0 4rem 3rem;
      max-width: 35rem;
    }
    > .-img-center {
      clear: both;
      text-align: center;
      margin: 0 0 4rem;
    }
  }
  > [class*="profile"] {
    background-color: #fff;
    padding: 2rem;
    border: 1px solid var(--g-color--blue);
    font-size: var(--g-fz--p2);
    > h3 {
      margin: 0 0 1rem;
      color: var(--g-color--blue);
      span {
        color: #ccc;
        font-weight: normal;
        font-size: 0.75em;
      }
    }
    > address {
      font-style: normal;
    }
    > p {
    }
    > ul {
      margin-left: 2em;
      li {
        list-style: disc;
        margin-bottom: 0.5rem;
      }
    }
    > [class*="btn"] {
      margin-top: 3rem;
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        border: 1px solid var(--g-color--blue);
        text-decoration: none;
        color: var(--g-color--blue);
      }
    }
  }
}

.g-article-12 {
  * {
    word-break: break-word;
  }
  h2 {
    margin: 0 0 3rem;
    position: relative;
    &::before,
    &::after {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 4px;
      content: "";
    }
    padding-bottom: 1rem;
    font-size: var(--g-fz--h2);
    color: var(--g-color--blue);
    &::before {
      width: 100%;
      background-color: #c8daf3;
    }
    &::after {
      width: 9.6rem;
      background: var(--g-color--blue);
    }
  }
  p {
    margin: 0 0 4rem;
  }
  /* strong {
    display: block;
    font-size: var(--g-fz--h3);
    font-weight: bold;
    color: var(--g-color--blue);
  } */
}

.g-article-13 {
  * {
    word-break: break-word;
  }
}

.g-article-set {
  background-color: #091b30;
}
.g-article-set__row {
  max-width: var(--g-width--max-content);
  margin: auto;
  align-items: stretch;
  color: var(--g-color--white);
  display: grid;
  grid-template:
    "title button" 4rem
    "article article" auto / 1fr 1fr;
  @media (min-width: 1024px) {
    grid-template: "title article button" 14.2rem / 1fr 10fr 1fr;
  }
}
.g-article-set__title {
  grid-area: title;
  align-items: center;
  font-size: var(--g-fz--p3);
  display: flex;
  justify-content: flex-start;
  padding: 0 2rem;
  font-weight: bold;
  @media (min-width: 1024px) {
    font-size: var(--g-fz--h2);
    justify-content: center;
  }
}
.g-article-set__button {
  grid-area: button;
  display: flex;
  font-size: var(--g-fz--p3);
  color: var(--g-color--white);
  font-weight: bold;
  text-decoration: none;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;
  @media (min-width: 1024px) {
    font-size: var(--g-fz--h2);
    justify-content: center;
    gap: 2rem;
  }
  &::after {
    width: 1em;
    height: 1em;
    content: "";
    background: url("./article-set__button-icon.png") no-repeat center / contain;
  }
}
.g-article-set__article {
  grid-area: article;
  align-items: center;
  background-color: var(--g-color--blue);
  display: flex;
  flex-direction: row;
  font-size: var(--g-fz--p2);
  padding: 1rem 0;
}
.g-article-set__article-date {
  padding: 0 1rem;
  font-size: var(--g-fz--p3);
  @media (min-width: 1024px) {
    font-size: var(--g-fz--p2);
    padding: 0 2rem;
  }
}
.g-article-set__article-text {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--g-color--white);
  padding: 0 1rem;
  font-size: var(--g-fz--p2);
  color: inherit;
  text-decoration: none;
  @media (min-width: 1024px) {
    padding: 0 2rem;
  }
}

.g-article-set-2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  @media (min-width: 1024px) {
    gap: 3rem;
  }
}
.g-article-set-2__title {
  text-align: center;
  font-size: var(--g-fz--h2);
  font-weight: bold;
  color: var(--g-color--blue);
}
.g-article-set-2__articles-splide {
}
.g-article-set-2__articles-track {
}
.g-article-set-2__articles {
}

.g-articles {
  display: grid;
  gap: 2rem;
}

.g-articles-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.g-articles-3 {
  display: grid;
  gap: 1rem;
  @media (min-width: 1024px) {
    gap: 4rem;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* lists */

.g-list {
  @media (min-width: 1024px) {
    padding: 0 15rem;
  }
}
.g-list__item {
  border-top: 1px solid var(--g-color--gray);
  display: grid;
  align-items: stretch;
  justify-content: center;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  @media (min-width: 1024px) {
    padding: 2rem 0;
    align-items: center;
    grid-template-columns: 11rem 1fr;
    gap: 3rem;
  }
  &:last-child {
    border-bottom: 1px solid var(--g-color--gray);
  }
}
.g-list__item-label {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10rem;
  background-color: var(--g-color--blue);
  border-radius: 1rem;
  color: var(--g-color--white);
  font-size: var(--g-fz--p2);
  font-weight: 500;
  padding: 1rem 0.5rem;
  text-align: center;
  @media (min-width: 1024px) {
    padding: 1rem 0.5rem;
    flex-direction: row;
    min-height: auto;
  }
}
.g-list__item-text {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-color--text);
  font-size: var(--g-fz--p2);
  @media (min-width: 1024px) {
    justify-content: flex-start;
  }
}

.g-list-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-list-2__item {
  font-size: var(--g-fz--p2);
  &::marker {
    color: var(--g-color--heading--blue);
  }
}

.g-list-3 {
}
.g-list-3__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--g-color--gray);
  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}
.g-list-3__item-date {
  @media (min-width: 1024px) {
    flex: none;
  }
  time {
    font-size: var(--g-fz--p2);
  }
}
.g-list-3__item-content {
}
.g-list-3__item-text {
  font-size: var(--g-fz--p1);
  font-weight: normal;
  a {
    text-decoration: none;
    color: inherit;
  }
}

/* links */

.g-link-set {
  justify-content: center;
  background-color: #f0f3f8;
  overflow: auto;
}
.g-link-set__links {
  display: flex;
  width: max-content;
  margin: auto;
  padding: 1rem;
  gap: 2rem;
}
.g-link-set__link {
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--g-color--blue);
  font-weight: bold;
  font-size: var(--g-fz--p2);
}
.g-link-set__link.is-active {
  border-bottom: 2px solid var(--g-color--blue);
}

.g-link-set-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background-color: #f0f3f8;
}
.g-link-set-2__title {
  font-size: var(--g-fz--h4);
  color: var(--g-color--blue);
  font-weight: bold;
  text-align: center;
}
.g-link-set-2__links {
  display: grid;
  @media (min-width: 1024px) {
    grid-template-columns: repeat(2, 37.5rem);
    justify-content: center;
    gap: 0 2rem;
  }
}
.g-link-set-2__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #dce1e9;
  font-size: var(--g-fz--p2);
  text-decoration: none;
  color: var(--g-color--blue);
  font-weight: bold;
  &::after {
    position: absolute;
    right: 1rem;
    content: "";
    width: 0.75em;
    aspect-ratio: 1;
    background: url("./link-set-2__link-icon.png") no-repeat center / contain;
  }
}
.g-link-set-2__link.is-active {
  color: var(--g-color--heading--blue);
}

.g-link-set-3 {
  --gap: 1rem;
  align-items: center;
  background-color: var(--g-color--blue--light);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  padding: 2rem;
  @media (min-width: 1024px) {
    --gap: 2rem;
  }
}
.g-link-set-3__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  @media (min-width: 1024px) {
    flex: 0 1 calc(100% / 3 - var(--gap));
  }
  &:after {
    height: 0.75em;
    aspect-ratio: 19 / 6;
    background: url(./anchor-set__item-icon.svg) no-repeat center / contain;
    content: "";
  }
}
.g-link-set-3__item-text {
  align-items: center;
  background-color: var(--g-color--blue);
  border-radius: 1rem;
  color: var(--g-color--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: var(--g-fz--p1);
  @media (min-width: 1024px) {
    padding: 1.5rem 3rem;
  }
  @media (max-width: 321px) {
    font-size: var(--g-fz--p3);
  }
  &:before,
  &:after {
    background-color: var(--g-color--white);
    content: "";
    height: 1px;
    width: 100%;
  }
}

.g-link-set-4 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 1rem;
  background-color: #edf5ff;
  @media (min-width: 1024px) {
    padding: 3rem;
  }
}
.g-link-set-4__title {
  font-size: var(--g-fz--h3);
  font-weight: bold;
  text-align: center;
}
.g-link-set-4__links {
}

.g-link-set-5 {
}
.g-link-set-5__item {
}
.g-link-set-5__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  a {
    color: var(--g-color--white);
    text-decoration: none;
  }
}

.g-link-set-6 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.g-link-set-6__title {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  border-top: 1px solid var(--g-color--white);
  border-bottom: 1px solid var(--g-color--white);
  a {
    font-size: var(--g-fz--p1);
    color: var(--g-color--white);
    text-decoration: none;
  }
}
.g-link-set-6__links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  a {
    font-size: var(--g-fz--p3);
    color: var(--g-color--white);
    text-decoration: none;
  }
}

.g-links {
  --gap: 1rem;
  --divide: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --divide: 4;
  }
}
.g-links__item {
  flex: 1 1 calc(100% / var(--divide) - var(--gap));
}

.g-links-2 {
  display: grid;
  gap: 1.5rem;
}
.g-links-2__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: var(--g-fz--p2);
  &::before {
    content: "";
    width: 1em;
    aspect-ratio: 1;
    background: url("./link-set-2__link-icon.png") no-repeat center / contain;
  }
}
.g-links-2__item.is-active {
  color: var(--g-color--heading--blue);
}
.g-links-3 {
  --gap: 1rem;
  --divide: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --divide: 3;
  }
}
.g-links-3__item {
  flex: 1 1 calc(100% / var(--divide) - var(--gap));
}

/* boxes */

.g-boxes {
  border-right: 1px solid var(--g-color--blue);
  border-bottom: 1px solid var(--g-color--blue);
  display: flex;
  flex-wrap: wrap;
}
.g-boxes--md {
  max-width: var(--g-width--content-md);
  margin: auto;
}
.g-boxes__item {
  flex: 1 1 calc(100% / 2);
  display: flex;
  flex-direction: column;
  @media (min-width: 1024px) {
    flex: 1 1 calc(100% / 3);
  }
}
.g-boxes__item-title {
  flex: none;
  padding: 0.5rem 0;
  border-top: 1px solid var(--g-color--blue);
  border-left: 1px solid var(--g-color--blue);
  background-color: var(--g-color--blue);
  color: var(--g-color--white);
  font-size: var(--g-fz--p2);
  text-align: center;
}
.g-boxes__item-content {
  flex: auto;
  padding: 1rem 0;
  border-left: 1px solid var(--g-color--blue);
  font-size: var(--g-fz--p2);
  text-align: center;
}

/* bgs */

.g-bg {
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 5rem;
  @media (min-width: 1024px) {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}
.g-bg--wide {
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  width: 100%;
  @media (min-width: 1024px) {
  }
}

/* containers */

.g-container {
  --pc-width: var(--g-width--max-content);
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  width: 100%;
  @media (max-width: 1023px) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  @media (min-width: 1024px) {
    width: var(--pc-width);
    margin: auto;
  }
}
.g-container--gap-v-2 {
  gap: var(--g-space--between-section--v-2);
}
.g-container--wide {
  --pc-width: var(--g-width--max-content);
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  width: 100%;
  @media (max-width: 1023px) {
  }
  @media (min-width: 1024px) {
    margin: auto;
  }
}

/* sections */

.g-section {
  --title-color: var(--g-color--blue);
  --title-fz: var(--g-fz--h2);
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section--v-2 {
  --title-color: var(--g-color--text);
  --title-fz: var(--g-fz--h3);
  --gap: 1rem;
  @media (min-width: 1024px) {
    --gap: 2rem;
  }
}
.g-section--v-3 {
  --title-color: var(--g-color--text);
  --title-fz: var(--g-fz--h3);
  --gap: 1rem;
  @media (min-width: 1024px) {
    --gap: 1rem;
  }
}
.g-section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--title-fz);
  &::after {
    flex: auto;
    height: 1px;
    background-color: var(--title-color);
    content: "";
  }
}
.g-section__title--v-2 {
  font-size: var(--g-fz--p1);
  font-weight: 500;
  gap: 0;
  @media (min-width: 1024px) {
    padding: 0 6rem;
  }
}
.g-section__title-text {
  flex: none;
  max-width: 100%;
  color: var(--title-color);
}
.g-section__title-text--v-2 {
  font-size: var(--g-fz--h4);
}
.g-section__title-text--v-3 {
  color: var(--g-color--blue);
  font-size: var(--g-fz--h2);
  font-weight: 500;
  @media (min-width: 1024px) {
    padding: 0 15rem;
    text-align: center;
  }
}
.g-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section__content--v-2 {
  gap: 2rem;
  @media (min-width: 1024px) {
    gap: 3rem;
  }
}
.g-section__text {
}
.g-section__text-2 {
  text-align: center;
}

.g-section-2 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-2__title {
  --color: var(--g-color--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--color);
  @media (min-width: 1024px) {
    gap: 1rem;
  }
}
.g-section-2__title--white {
  --color: var(--g-color--white);
}
.g-section-2__title-text {
  padding: 0 2rem 1rem;
  border-bottom: 1px solid var(--color);
  font-size: var(--g-fz--h2);
}
.g-section-2__title-text--sub {
  border-bottom: none;
  font-size: var(--g-fz--h3);
}
.g-section-2__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-2__text {
}

.g-section-3 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-3__title {
  --bg-color: var(--g-color--blue);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 7.4rem;
  background-color: var(--bg-color);
  @media (min-width: 1024px) {
    min-height: 22.2rem;
  }
}
.g-section-3__title--v-2 {
  flex-direction: column;
  gap: 1rem;
  padding: 3rem 2rem 2rem;
  @media (min-width: 1024px) {
    gap: 4rem;
    padding: 5rem 2rem 4rem;
  }
}
.g-section-3__title-text {
  padding: 0.5rem 0;
  border-top: 1px solid var(--g-color--white);
  border-bottom: 1px solid var(--g-color--white);
  color: var(--g-color--white);
  font-size: var(--g-fz--h3);
  @media (min-width: 1024px) {
    font-size: 4rem;
  }
}
.g-section-3__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-3__content--v-2 {
  padding: 0;
  @media (min-width: 1024px) {
    padding: 0 4rem;
  }
}
.g-section-3__text {
}

.g-section-4 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-4--v-2 {
  --gap: 1rem;
  @media (min-width: 1024px) {
    --gap: 3rem;
  }
}
.g-section-4__title {
  --bg-color: var(--g-color--heading--blue);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5.6rem;
  background-color: var(--bg-color);
  color: var(--g-color--white);
  font-size: var(--g-fz--h2);
  @media (min-width: 1024px) {
    min-height: 8rem;
  }
}
.g-section-4__title--v-2 {
  font-size: var(--g-fz--p1);
  justify-content: flex-start;
  padding: 0 1rem;
  @media (min-width: 1024px) {
    min-height: 4rem;
  }
}
.g-section-4__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-4__content--v-2 {
  gap: 2rem;
  @media (min-width: 1024px) {
    gap: 3rem;
  }
}
.g-section-4__content--v-3 {
  @media (min-width: 1024px) {
    padding: 0 50px;
  }
}
.g-section-4__text {
  text-align: center;
}
.g-section-4__text-2 {
}

.g-section-5 {
  --gap: 3rem;
  --border-length: 50rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-5--v-2 {
  --gap: 2rem;
  --border-length: 19rem;
  @media (min-width: 1024px) {
    --gap: 3rem;
  }
}
.g-section-5--v-3 {
  --gap: 1.5rem;
  @media (min-width: 1024px) {
    --gap: 3rem;
  }
}
.g-section-5__title {
  --color: var(--g-color--blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  &::after {
    width: min(100%, var(--border-length));
    height: 1px;
    background-color: var(--g-color--gray);
    content: "";
  }
  @media (min-width: 1024px) {
    &::after {
    }
  }
}
.g-section-5__title--v-2 {
  &:after {
    display: none;
  }
}
.g-section-5__title--v-3 {
  align-items: flex-start;
  &:after {
    display: none;
  }
}
.g-section-5__title--v-4 {
  font-weight: bold;
  &:after {
    display: none;
  }
}
.g-section-5__title--v-5 {
  &::after {
    width: 19rem;
  }
}
.g-section-5__title--text-white {
  --color: var(--g-color--white);
}
.g-section-5__title-text {
  text-align: center;
  color: var(--color);
  font-size: var(--g-fz--h2);
}
.g-section-5__title-text--v-2 {
  color: var(--g-color--text);
  font-size: var(--g-fz--h3);
}
.g-section-5__title-text--v-3 {
  text-align: left;
  @media (min-width: 1024px) {
    text-align: center;
  }
}
.g-section-5__title-text--v-4 {
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    padding: 0 5rem;
  }
}
.g-section-5__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-5__text {
}
.g-section-5__text--v-2 {
  padding: 0;
  @media (min-width: 1024px) {
    padding: 0 5rem;
  }
}
.g-section-5__text--v-3 {
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    padding: 0 5rem;
  }
}
.g-section-5__text-2 {
  text-align: center;
}
.g-section-5__text-3 {
  text-align: left;
  width: auto;
  margin: auto;
}

.g-section-6 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-6__title {
  position: relative;
  &::before,
  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    content: "";
  }
  padding-bottom: 1rem;
  font-size: var(--g-fz--h2);
  color: var(--g-color--blue);
  &::before {
    width: 100%;
    background-color: #c8daf3;
  }
  &::after {
    width: 9.6rem;
    background: var(--g-color--blue);
  }
}
.g-section-6__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-6__text {
}

.g-section-7 {
  --gap: 3rem;
  --padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 3rem;
    --padding: 4rem;
  }
}
.g-section-7__title {
}
.g-section-7__title-label {
}
.g-section-7__title-texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  background-color: var(--g-color--heading--blue);
  padding: 0.25rem 1rem;
  min-height: 8rem;
  @media (min-width: 1024px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 2rem;
  }
}
.g-section-7__title-texts-item {
  font-size: var(--g-fz--h2);
  color: var(--g-color--white);
}
.g-section-7__title-texts-item--sub {
  font-size: var(--g-fz--h3);
}
.g-section-7__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 var(--padding) var(--padding);
}
.g-section-7__text {
}

.g-section-8 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
  }
}
.g-section-8__title {
  font-size: var(--g-fz--h1);
  font-weight: bold;
}
.g-section-8__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.g-section-9 {
  --gap: 2rem;
  --gap_m: 1.2rem;
  --gap_s: 5px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-9__title {
  padding-bottom: var(--gap);
  @media (min-width: 1024px){
    padding-bottom: var(--gap_s);
  }
  border-bottom: 1px solid var(--g-color--heading--blue);
  font-size: var(--g-fz--h3);
  color: var(--g-color--heading--blue);
}
.g-section-9__title-2 {
  font-size: var(--g-fz--h4);
  color: var(--g-color--heading--blue);
  padding-top: var(--gap_m);
}
.g-section-9__title-3 {
  font-size: var(--g-fz--h4);
  color: var(--g-color--text);
  font-weight: bold;
}
.g-section-9__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap_s);
}
.g-section-9__text {
  font-size: var(--g-fz--p2);
}

.g-section-10 {
  --content-gap: 4rem;
  display: grid;
  gap: 4rem;
  @media (min-width: 1024px) {
    grid-template-columns: 1fr 30rem;
    align-items: start;
  }
}
.g-section-10__content {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.g-section-10__aside {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  @media (min-width: 1024px) {
    position: sticky;
    top: calc(var(--g-height--navbar) + 2rem);
  }
}

.g-section-11 {
  --gap: 2rem;
  display: grid;
  gap: var(--gap);
}
.g-section-11__title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5.2rem;
  gap: 1rem;
  border-top: 1px solid var(--g-color--heading--blue);
  border-bottom: 1px solid var(--g-color--heading--blue);
}
.g-section-11__title-text {
  font-size: var(--g-fz--h4);
  color: var(--g-color--heading--blue);
  font-weight: bold;
}
.g-section-11__title-text-2 {
  font-size: var(--g-fz--p3);
  color: #cc1111;
}
.g-section-11__content {
  display: grid;
  gap: var(--gap);
}

.g-section-12 {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 5rem;
    --padding: 4rem;
    padding: 0 var(--padding) var(--padding);
  }
}
.g-section-12--v-2 {
  --gap: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    --gap: 2rem;
    --padding: 4rem;
    padding: 0 var(--padding) var(--padding);
  }
}
.g-section-12__title {
  position: relative;
  &::before,
  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    content: "";
  }
  padding-bottom: 1rem;
  font-size: var(--g-fz--h2);
  color: var(--g-color--blue);
  &::before {
    width: 100%;
    background-color: #c8daf3;
  }
  &::after {
    width: 9.6rem;
    background: var(--g-color--blue);
  }
}
.g-section-12__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-section-12__text {
}

.g-search-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-search-section__accordion {
  border: 2px solid var(--g-color--blue);
  padding: 0 1rem;
}
.g-search-section__content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.g-search-section__rows {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.g-search-section__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-search-section__title {
  text-align: center;
  font-weight: bold;
  font-size: var(--g-fz--h3);
  color: var(--g-color--blue);
}
.g-search-section__title-2 {
  font-size: var(--g-fz--h4);
  font-weight: bold;
}
.g-search-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.g-search-section__infos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.g-search-section__result {
  font-size: var(--g-fz--p2);
  color: var(--g-color--blue);
}
.g-search-section__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.g-search-section__conditions-item {
  font-size: var(--g-fz--p2);
}

/* navbars */

.g-navbar {
  width: 100%;
  background-color: var(--g-color--white);
  transition: background-color 0.25s;
}
.g-navbar--v-2 {
  border-bottom: 1px solid var(--g-color--white);
  background-color: transparent;
}
.g-navbar__group {
  display: flex;
  justify-content: space-between;
  height: var(--g-height--navbar);
  @media (min-width: 1024px) {
    width: var(--g-width--max-content);
    margin: auto;
  }
}
.g-navbar__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}
.g-navbar__group-3 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.g-navbar__links {
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
}
.g-navbar__links-item {
  display: flex;
  gap: var(--gap);
  font-size: var(--g-fz--p2);
  color: var(--g-color--gray);
  text-decoration: none;
  &::before {
    content: "|";
  }
  &:first-child::before {
    display: none;
  }
}
.g-navbar__content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  @media (min-width: 1024px) {
    gap: 4rem;
  }
}
.g-navbar__logo {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  img {
    height: 2.5rem;
    transition: filter 0.25s;
    @media (min-width: 1024px) {
      height: 5rem;
    }
  }
  .g-navbar--v-2 & {
    img {
      filter: brightness(0) invert(1);
    }
  }
}
.g-navbar__button {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  height: 100%;
  border: none;
  background-color: var(--g-color--blue);
  cursor: pointer;
  transition: opacity 0.25s, background-color 0.25s;
  &:hover {
    opacity: 0.75;
  }
  .g-navbar--v-2 & {
    background-color: transparent;
    border-left: 1px solid var(--g-color--white);
  }
}
.g-navbar__button-lines {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.2rem;
  height: 1.8rem;
}
.g-navbar__button-line {
  display: block;
  content: "";
  width: 100%;
  height: 0.1rem;
  background-color: var(--g-color--white);
  transition: transform 0.25s;
}
.g-navbar__button-line:nth-child(1) {
  .g-navbar__button.is-active & {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
}
.g-navbar__button-line:nth-child(2) {
  .g-navbar__button.is-active & {
    opacity: 0;
  }
}
.g-navbar__button-line:nth-child(3) {
  .g-navbar__button.is-active & {
    opacity: 0;
  }
}
.g-navbar__button-line:nth-child(4) {
  .g-navbar__button.is-active & {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}
.g-navbar__menu-sets {
  display: flex;
  align-items: stretch;
  gap: 4rem;
}
.g-navbar__menu-set {
  --link-min-height: 3.2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-navbar__menu-set-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--link-min-height);
  text-decoration: none;
  color: var(--g-color--blue);
  transition: color 0.25s;
  /* &:has(~ .g-navbar__menu-set-sub)::after {
    height: 1em;
    aspect-ratio: 1;
    background: url("./navbar__menu-set-link-icon.png") no-repeat bottom center /
      contain;
    content: "";
  } */
  .g-navbar--v-2 & {
    color: var(--g-color--white);
  }
}
.g-navbar__menu-set-sub {
  position: absolute;
  min-width: 30rem;
  top: var(--link-min-height);
  display: none;
  padding: 2rem;
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.25));
  background-color: var(--g-color--white);
  .g-navbar__menu-set:hover & {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
.g-navbar__menu-set-sub-link {
  text-decoration: none;
  color: var(--g-color--blue);
}
.g-navbar__buttons {
  display: grid;
  grid-template-columns: repeat(2, 23rem);
}
.g-navbar__buttons-item {
  transition: background-color 0.25s;
  .g-navbar--v-2 & {
    background-color: transparent;
    border-left: 1px solid var(--g-color--white);
  }
}

.g-navbar-menu {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 1rem;
  background-color: var(--g-color--blue);
}
.g-navbar-menu__buttons {
  display: flex;
  gap: 1rem;
}
.g-navbar-menu__buttons-item {
  flex: 1 1 50%;
}
.g-navbar-menu__buttons-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.g-navbar-menu__buttons-2-item {
}
.g-navbar-menu__links {
}

/* headers */

.g-header {
  position: relative;
}
.g-header__bg {
  position: relative;
  img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    @media (min-width: 1024px) {
      height: 24rem;
    }
  }
}
.g-header__text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-header__text {
  margin: 0;
  color: var(--g-color--white);
  font-size: var(--g-fz--h1);
  border-bottom: 1px solid var(--g-color--white);
}

.g-header-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.g-header-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 17rem;
  background: url("./header-2__bg.png") no-repeat center / contain;
  @media (min-width: 1024px) {
    min-height: 60rem;
  }
}
.g-header-2__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.g-header-2__logo {
  width: 22rem;
  @media (min-width: 1024px) {
    width: 36rem;
  }
  img {
    width: 100%;
  }
}
.g-header-2__labels {
  display: flex;
}
.g-header-2__label {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 7ic;
  font-size: var(--g-fz--p2);
  color: var(--g-color--white);
}
.g-header-2__label--student {
  background-color: var(--g-color--blue--student);
}
.g-header-2__label--pro {
  background-color: var(--g-color--blue--pro);
}
.g-header-2__label-2 {
  padding: 0.25em 1em;
  font-size: var(--g-fz--p2);
  background-color: #ebf1fb;
}
.g-header-2__text {
  text-align: center;
}

.g-header-3 {
  --bg: none;
  --bg-pc: none;
  position: relative;
  height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: var(--bg);
  @media (min-width: 1024px) {
    height: 72rem;
    background-image: var(--bg-pc);
  }
}
.g-header-3--v-2 {
  height: 49.5rem;
  @media (min-width: 1024px) {
    height: 100svh;
  }
}
.g-header-3__texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.g-header-3__title {
  border-top: 1px solid var(--g-color--white);
  border-bottom: 1px solid var(--g-color--white);
  padding: 0.25em 1em;
  font-size: var(--g-fz--h3);
  font-weight: bold;
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    font-size: 5rem;
  }
}
.g-header-3__text {
  font-size: var(--g-fz--p4);
  font-weight: bold;
  color: var(--g-color--white);
  text-align: center;
  @media (min-width: 1024px) {
    font-size: var(--g-fz--h2);
  }
}
.g-header-3__texts-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.g-header-3__title-2 {
  border-top: 1px solid var(--g-color--white);
  border-bottom: 1px solid var(--g-color--white);
  padding: 0.25em 1em;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    font-size: 2.5rem;
  }
}
.g-header-3__text-2 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--g-color--white);
  text-align: center;
  @media (min-width: 1024px) {
    font-size: 5rem;
  }
}
.g-header-3__buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 15.3rem);
  justify-content: center;
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, 0.3);
  @media (min-width: 1024px) {
    padding: 4rem 0;
    gap: 4rem;
    grid-template-columns: repeat(2, 37rem);
  }
}

/* breadcrumbs */

.g-breadcrumb {
  --padding: 1rem;
  padding: var(--padding);
  width: 100%;
  overflow: auto;
  @media (min-width: 1024px) {
    width: var(--g-width--max-content);
    padding: var(--padding) 0;
    margin: auto;
  }
}
.g-breadcrumb__inner {
  width: max-content;
  display: flex;
  gap: 0.25rem;
}
.g-breadcrumb__item-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--g-fz--p3);
  &::before {
    content: "/";
  }
  &:first-child::before {
    display: none;
  }
}
.g-breadcrumb__item {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/* footers */

.g-footer {
  background-color: var(--g-color--blue);
}
.g-footer__groups {
  display: grid;
  gap: 3rem;
  padding: 5rem 0 0;
  margin: auto;
  @media (min-width: 1024px) {
    padding: 8rem 0;
    width: var(--g-width--max-content);
    gap: 6rem;
    grid-template-columns: 0.5fr 1fr 0.5fr;
  }
}
.g-footer__group {
  padding: 0 1rem;
  @media (min-width: 1024px) {
    padding: 0;
  }
}
.g-footer__group--v-2 {
  padding: 0;
}
.g-footer__logo-set {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
}
.g-footer__logo {
  width: 19.4rem;
  @media (min-width: 1024px) {
    width: 100%;
  }
  img {
    width: 100%;
  }
}
.g-footer__buttons {
  display: grid;
  width: 100%;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  @media (min-width: 1024px) {
    gap: 3rem;
    grid-template-columns: 1fr;
  }
}
.g-footer__buttons-item {
  @media (min-width: 1024px) {
    height: 8rem;
  }
}
.g-footer__buttons-2 {
  display: grid;
  @media (max-width: 1023px) {
    border-right: 1px solid var(--g-color--white);
    border-bottom: 1px solid var(--g-color--white);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    gap: 3rem;
  }
}
.g-footer__buttons-2-item {
  @media (max-width: 1023px) {
    border-right: none;
    border-bottom: none;
  }
}
.g-footer__links {
}
.g-footer__links-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 0;
}

.g-footer-2 {
  display: flex;
  flex-direction: column;
  background-color: #1b1b1b;
  padding: 4rem 0;
  gap: 2rem;
  @media (min-width: 1024px) {
    padding: 6rem 0;
    gap: 6rem;
  }
}
.g-footer-2__groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  @media (min-width: 1024px) {
    width: var(--g-width--max-content);
    margin: auto;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}
.g-footer-2__group {
  padding: 0 1rem;
  @media (min-width: 1024px) {
    display: flex;
    justify-content: center;
    padding: 0;
  }
}
.g-footer-2__logo-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @media (min-width: 1024px) {
    justify-content: flex-start;
    gap: 2rem;
  }
}
.g-footer-2__logo {
  width: 18rem;
  @media (min-width: 1024px) {
    width: 20rem;
  }
  img {
    width: 100%;
  }
}
.g-footer-2__logos {
  display: flex;
  gap: 1rem;
}
.g-footer-2__logos-item {
  width: 3rem;
  @media (min-width: 1024px) {
    width: 5rem;
  }
  img {
    width: 100%;
  }
}
.g-footer-2__text {
  color: var(--g-color--white);
  font-size: var(--g-fz--p2);
}
.g-footer-2__sns-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.g-footer-2__sns-links-item {
  width: 5rem;
  img {
    width: 100%;
  }
}
.g-footer-2__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-color--white);
  font-size: var(--g-fz--p2);
  @media (min-width: 1024px) {
    width: var(--g-width--max-content);
    margin: auto;
  }
}

/* layouts */

.g-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.g-layout__navbar {
  position: sticky;
  z-index: 2;
  top: 0;
  flex: none;
}
.g-layout__navbar--v-2 {
  margin-top: calc(var(--g-height--navbar) * -1);
  transition: margin-top 0.25s;
}
.g-layout__navbar-menu-for-sp {
  position: fixed;
  z-index: 2;
  right: -100%;
  top: var(--g-height--navbar);
  width: 100%;
  height: calc(100svh - var(--g-height--navbar));
  transition: right 0.25s;
  @media (min-width: 1024px) {
    display: none;
  }
  &.is-active {
    right: 0;
  }
}
.g-layout__navbar-menu-for-sp-inner {
  height: 100%;
  overflow: auto;
}
.g-layout__breadcrumb {
  position: relative;
  z-index: 1;
  flex: none;
}
.g-layout__body {
  flex: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
  padding: 0 0 2rem;
  @media (min-width: 1024px) {
    padding: 0 0 5rem;
    border-left: 1rem solid var(--g-color--blue);
    border-right: 1rem solid transparent;
  }
}
.g-layout__body--gap-v-2 {
  gap: var(--g-space--between-section--v-2);
}
.g-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--g-space--between-section);
}
.g-layout__banner-set {
}
.g-layout__fixed-bottom-item-container {
  display: none;
  position: fixed;
  z-index: 2;
  width: 100%;
  right: 0;
  bottom: 0;
}
.g-layout__fixed-bottom-item-container.is-active {
  display: block;
}
.g-layout__fixed-bottom-item-container-2 {
  @media (min-width: 1024px) {
    display: grid;
    justify-content: end;
  }
}
.g-layout__fixed-bottom-item {
  @media (min-width: 1024px) {
    width: 65rem;
    border-top-left-radius: 2rem;
  }
}
.g-layout__footer {
  position: relative;
  z-index: 1;
  flex: none;
}
.g-layout__footer-2 {
  position: relative;
  z-index: 3;
  flex: none;
}
.g-layout__pro {
  border-left-color: var(--g-color--blue--pro) !important;
}
.g-layout__student {
  border-left-color: var(--g-color--blue--student) !important;
}

/* utilities */

.g-hide-on-sp {
  @media (max-width: 1023px) {
    display: none !important;
  }
}
.g-hide-on-pc {
  @media (min-width: 1024px) {
    display: none !important;
  }
}

.g-pre-line {
  white-space: pre-line;
}