:root {
  --color-text: #727171;

  --color-airline: #1bb8ce;
  --color-airline-light: #9bd5e2;

  --color-bridal-hotel: #f08437;
  --color-bridal-hotel-light: #f5ab70;

  --color-civil: #2eb6aa;
  --color-civil-light: #88ccc3;
}

.color-green {
  color: var(--color-civil);
}

.gakkaHero {
  &.-airline {
    background: url(../img/airline/bg_hero.svg) no-repeat center / cover;
    @media screen and (max-width: 750px){
      background-image: url(../img/airline/bg_hero_sp.svg);
    }
  }
  &.-bridal-hotel {
    background: url(../img/bridal-hotel/bg_hero.svg) no-repeat center / cover;
    @media screen and (max-width: 750px){
      background-image: url(../img/bridal-hotel/bg_hero_sp.svg);
    }
  }
  &.-civil {
    background: url(../img/civil-servant/bg_hero.svg) no-repeat center / cover;
    @media screen and (max-width: 750px){
      background-image: url(../img/civil-servant/bg_hero_sp.svg);
    }
  }
}
.gakkaHeroHeader {
  padding: 30px 0 40px;
  text-align: center;
  letter-spacing: 0.155em;
  color: #fff;
  @media screen and (max-width: 750px){
    padding: 28px 0 20px;
  }
}
.gakkaHeroHeader__title {
  img {
    width: auto;
    height: 64px;
    @media screen and (max-width: 750px){
      height: 28px;
    }
  }
}
.gakkaHeroHeader__course {
  font-size: 18px;
  margin-top: 20px;
  font-weight: 900;
  @media screen and (max-width: 750px){
    font-size: 11px;
  }
}
.gakkaHeroHeader__desc {
  font-size: 24px;
  font-weight: 900;
  @media screen and (max-width: 750px){
    font-size: 15px;
  }
}
.gakkaHero__bg {
  position: relative;
}
.gakkaHero__banner {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 514px;
  @media screen and (max-width: 750px){
    width: 100%;
    padding: 0 10px;
  }
}
.gakkaHeroBottom {
  padding: 10px;
  @media screen and (max-width: 750px){
    padding: 20px 10px;
  }
}
.gakkaHeroBottom__list {
  display: flex;
  justify-content: center;
  gap: 16px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    gap: 10px;
  }
  li {
    font-size: 23px;
    font-weight: 900;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    background-color: #fff;
    width: 494px;
    height: 62px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    @media screen and (max-width: 750px){
      font-size: 18px;
      width: 100%;
      height: 62px;
    }
  }
  .-airline & {
    li {
      color: var(--color-airline);
    }
  }
  .-bridal-hotel & {
    li {
      color: var(--color-bridal-hotel);
    }
  }
  .-civil & {
    li {
      color: var(--color-civil);
    }
  }
}
ul#courseNav {
  @media screen and (max-width: 750px){
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
  }
}

.gakkaDream {
  padding-top: 0;
  padding-bottom: 50px;
  @media screen and (max-width: 750px){
    padding: 0 10px 40px;
  }
}
.gakkaDream__img {
  text-align: center;
  img {
    width: 872px;
  }
}
.gakkaDreamList {
  display: flex;
  max-width: 1000px;
  margin: 15px auto 0;
  gap: 16px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    margin-top: 0;
  }
}
.gakkaDreamList__item {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  flex: 1;
  &.-large {
    flex: 4.8;
  }
  &.-small {
    flex: 3;
  }
}
.gakkaDreamList__title {
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  background-color: var(--color-airline);
  padding: 8px 0;
  text-align: center;
  color: #fff;
  .bgcOrange & {
    background-color: var(--color-bridal-hotel);
  }
}
.gakkaDreamList__inner {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  @media screen and (max-width: 750px){
    flex-direction: column;
  }
}
.gakkaDreamList__list {
  li {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.7;
    text-indent: -1em;
    margin-left: 1em;
    color: var(--color-text);
    font-feature-settings: "palt";
    &:before {
      content: "● ";
    }
    &.-last {
      text-align: right;
      &:before {
        display: none;
      }
    }
  }
}
.gakkaPer {
  background: url(../img/airline/bg_per.svg) no-repeat center top / cover;
  padding: 24px 0;
  @media screen and (max-width: 750px){
    background-image: url(../img/airline/bg_hero_sp.svg);
    padding: 24px;
  }
  .bgcOrange & {
    background-image: url(../img/bridal-hotel/bg_per.svg);
    @media screen and (max-width: 750px){
      background-image: url(../img/bridal-hotel/bg_hero_sp.svg);
    }
  }
  .bgcGreen & {
    background-image: url(../img/civil-servant/bg_per.svg);
    @media screen and (max-width: 750px){
      background-image: url(../img/civil-servant/bg_hero_sp.svg);
    }
  }
}
.gakkaPer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  @media screen and (max-width: 750px){
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
.gakkaPer__left {
  width: 65%;
  @media screen and (max-width: 750px){
    width: 212px;
    position: relative;
    left: 11px;
  }
}
.gakkaPer__right {
  width: 32%;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaPer__title {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.145em;
  color: var(--color-airline);
  background-color: #fff;
  padding: 8px 20px;
  border-radius: 15px;
  @media screen and (max-width: 750px){
    display: none;
  }
  .bgcOrange & {
    color: var(--color-bridal-hotel);
  }
}
.gakkaPer__list {
  line-height: 1.8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  .-civil & {
    + & {
      margin-top: 0;
    }
  }
  dt {
    font-weight: 900;
    font-size: 18px;
    flex: 1;
    display: flex;
    align-items: center;
    font-feature-settings: "palt";
    &:after {
      content: "";
      border-bottom: 1px dashed #fff;
      flex: 1;
      margin: 0 0.5em;
    }
    @media screen and (max-width: 750px){
      font-size: 17px;
    }
    .-civil & {
      font-size: 11px;
    }
  }
  dd {
    font-size: 18px;
    font-weight: 900;
    @media screen and (max-width: 750px){
      font-size: 17px;
    }
    .-civil & {
      font-size: 11px;
    }
  }
}
.gakkaPer__date {
  margin-top: 10px;
  text-align: right;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  width: 100%;
}
.gakkePer-civil__title {
  font-size: 35px;
  color: #fff;
  font-weight: bold;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  @media screen and (max-width: 750px){
    font-size: 28px;
  }
}
.gakkePer-civil__subtitle {
  font-size: 22px;
  font-weight: 900;
  color: #fff462;
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
}
.gakkePer-civil__note {
  font-size: 13px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  color: #fff;
}
.gakkaPer__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 10px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    gap: 24px;
  }
}
.gakkerPerClm {
  display: flex;
  align-items: flex-end;
  @media screen and (max-width: 750px){
    flex-direction: column;
    align-items: center;
  }
}
.gakkerPerClm__right {
  @media screen and (max-width: 750px){
    margin-top: 24px;
  }
  img {
    height: 90px;
  }
}

.gakkaExample {
  padding: 50px 0 0;
  @media screen and (max-width: 750px){
    padding: 50px 10px 0;
  }
}
.gakkaExample__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.title-gakka-radius {
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  background-color: var(--color-airline);
  padding: 8px 0;
  text-align: center;
  color: #fff;
  border-radius: 15px 15px 0 0;
  @media screen and (max-width: 750px){
    font-size: 22px;
  }
  .bgcOrange & {
    background-color: var(--color-bridal-hotel);
  }
  .bgcGreen & {
    background-color: var(--color-civil);
  }
}
.gakkaExampleGallery {
  padding: 15px 36px 20px;
  border-radius: 0 0 15px 15px;
  background-color: #fff;
  @media screen and (max-width: 750px){
    padding: 15px 26px 20px;
  }
}
.gakkaExampleGallery__item {
  padding: 0 4px;
  @media screen and (max-width: 750px){
    padding: 0;
  }
}
.slide-gakka-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    li {
      margin: 0;
      width: auto;
      height: auto;
      button {
        -webkit-appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: #c9caca;
        border: none;
        cursor: pointer;
        padding: 0;
        &:before {
          content: "";
          display: none;
        }
      }
      &.slick-active {
        button {
          background-color: #898989;
        }
      }
    }
  }
  .slide-gakka-prev {
    margin-right: 10px;
    -webkit-appearance: none;
    padding: 0;
    background-color: var(--color-airline-light);
    width: 18px;
    height: 21px;
    border: none;
    cursor: pointer;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    text-indent: -9999px;
    .bgcOrange & {
      background-color: var(--color-bridal-hotel-light);
    }
    .bgcGreen & {
      background-color: var(--color-civil-light);
    }
  }
  .slide-gakka-next {
    margin-left: 10px;
    -webkit-appearance: none;
    padding: 0;
    background-color: var(--color-airline-light);
    width: 18px;
    height: 21px;
    border: none;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    text-indent: -9999px;
    .bgcOrange & {
      background-color: var(--color-bridal-hotel-light);
    }
    .bgcGreen & {
      background-color: var(--color-civil-light);
    }
  }
}
.gakkaExample__section {
  + .gakkaExample__section {
    margin-top: 25px;
  }
}
.gakkaExampleList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 0;
  padding: 10px 40px 25px;
  background-color: #fff;
  @media screen and (max-width: 750px){
    padding: 10px;
  }
}
.gakkaExampleList__half {
  width: 48%;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaExampleList__item {
  width: 44%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  + .gakkaExampleList__item {
    margin-top: 10px;
  }
  &.-large {
    width: 100%;
  }
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaExampleList__title {
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  padding: 8px 0;
  text-align: center;
  color: #fff;
  background-color: #9bd5e2;
  border-radius: 8px;
  margin-bottom: 8px;
  @media screen and (max-width: 750px){
    padding: 4px 0;
  }
  .bgcOrange & {
    background-color: var(--color-bridal-hotel-light);
  }
  .bgcGreen & {
    background-color: var(--color-civil-light);
  }
}
.gakkaExampleList__clm {
  @media screen and (max-width: 750px){
    width: 100%;
  }
  li {
    font-size: 15px;
    line-height: 1.8;
    font-weight: bold;
    color: var(--color-text);
    font-feature-settings: "palt";
    text-indent: -1.2em;
    margin-left: 1.2em;
    &:before {
      content: "● ";
    }
  }
}
.gakkaPoint {
  padding: 50px 0 0;
}
.gakkaPoint__block {
  background-color: #fff;
  padding: 36px 0;
  @media screen and (max-width: 750px){
    padding: 24px 0 0;
  }
  + .gakkaPoint__block {
    margin-top: 12px;
    @media screen and (max-width: 750px){
      margin-top: 0;
    }
  }
}
.gakkaPoint__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 750px){
    flex-direction: column;
    padding: 0 10px;
    gap: 25px;
  }
}
.gakkaPoint__left {
  width: 53%;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaPoint__right {
  width: 43%;
  @media screen and (max-width: 750px){
    width: calc(100% + 20px);
    margin: 0 -10px;
    img {
      margin-bottom: 0 !important;
    }
  }
}
.gakkaPointHeader {
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 750px){
    flex-direction: column;
    align-items: center;
  }
}
.gakkaPoint__num {
  width: 124px;
  text-align: center;
  border-right: 1px solid var(--color-airline);
  position: relative;
  @media screen and (max-width: 750px){
    border-style: none;
    width: 100%;
  }
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 1px solid var(--color-airline);
    border-radius: 50%;
    @media screen and (max-width: 750px){
      display: none;
    }
  }
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 1px solid var(--color-airline);
    border-radius: 50%;
    @media screen and (max-width: 750px){
      display: none;
    }
  }
  .bgcOrange & {
    border-color: var(--color-bridal-hotel);
    &:before, &:after {
      border-color: var(--color-bridal-hotel);
    }
  }
  .bgcGreen & {
    border-color: var(--color-civil);
    &:before, &:after {
      border-color: var(--color-civil);
    }
  }
  img {
    height: 160px;
    width: auto;
    @media screen and (max-width: 750px){
      height: 112px;
    }
  }
}
.gakkaPointHeader__right {
  width: 370px;
  @media screen and (max-width: 750px){
    width: 100%;
    text-align: center;
    margin-top: 24px;
  }
}
.gakkaPoint__title {
  font-size: 38px;
  font-feature-settings: "palt";
  color: #87713a;
  font-weight: 900;
  @media screen and (max-width: 750px){
    font-size: 25px;
  }
}
.gakkaPoint__subtitle {
  color: #87713a;
  background-color: #fff462;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  padding: 8px 0;
  margin-top: 8px;
  border-radius: 10px;
  font-feature-settings: "palt";
  letter-spacing: 0.045em;
  @media screen and (max-width: 750px){
    font-size: 18px;
  }
  ul {
    padding: 0 12px;
    li {
      text-align: left;
      font-size: 15px;
      font-weight: 900;
      text-indent: -1.2em;
      margin-left: 1.2em;
      &:before {
        content: "● ";
      }
    }
  }
}
.gakkaPoint__text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
}
.gakkaPoint__nav {
  @media screen and (min-width: 751px){
    display: none;
  }
}
.gakkaAdvise {
  padding: 50px 0;
  @media screen and (max-width: 750px){
    padding: 50px 10px 0;
  }
}
.gakkaAdvise__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.gakkaAdvise__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
.gakkaAdvise__name {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .05em;
  @media screen and (max-width: 750px){
    font-size: 16px;
  }
  .-civil & {
    font-size: 18px;
    @media screen and (max-width: 750px){
      margin-right: -4em;
    }
  }
}
.gakkaAdvise__logo {
  width: 345px;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaAdvise__text {
  color: var(--color-text);
  font-size: 15px;
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.07em;
  margin-top: 15px;
}
.gakkaAdvise-civil__row {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  @media screen and (max-width: 750px){
    align-items: flex-end;
  }
}
.gakkaAdvise-civil__left {
  flex: 1;
  margin-right: 3em;
  @media screen and (max-width: 750px){
    margin-right: 1.5em;
  }
}
.gakkaAdvise-civil__right {
  width: 125px;
  @media screen and (max-width: 750px){
    margin-right: -10px;
  }
}
.gakkaSupport {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: space-between;
  @media screen and (max-width: 750px){
    flex-direction: column;
    gap: 20px;
  }
}
.gakkaSupport__clm {
  width: 48%;
  text-align: center;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaSupport__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  img {
    width: 56%;
  }
}
.gakkaSupport__name {
  margin-top: 12px;
  font-size: 16px;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  color: var(--color-text);
}
.gakkaSupport__thumb {
  margin-top: 15px;
}
.gakkaSupport__caution {
  width: 100%;
  font-size: 15px;
  font-feature-settings: "palt";
  letter-spacing: 0.07em;
  margin-top: 24px;
  color: var(--color-text);
}

.gakkaSchedule {
  margin-top: 45px;
  @media screen and (max-width: 750px){
    margin-top: 35px;
  }
}
.gakkaSchedule__subtitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-text);
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  margin-top: 16px;
  text-align: center;
}
.gakkaSchedule__img {
  margin-top: 25px;
  @media screen and (max-width: 750px){
    margin-top: 10px;
  }
}
.gakkaSchedule__caution {
  color: var(--color-text);
  font-size: 14px;
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.125em;
  text-align: right;
  margin-top: 10px;
  @media screen and (max-width: 750px){
    font-size: 12px;
  }
}
.gakkaCv {
  margin-top: 20px;
  text-align: center;
  overflow: hidden;
  @media screen and (max-width: 750px){
    margin-top: 3px;
    padding-bottom: 20px;
  }
  .gakkaAdvise & {
    @media screen and (max-width: 750px){
      margin: 0 -10px;
      padding: 0 10px;
    }
  }
}
.gakkaCv__img {
  width: 131px;
  margin: 0 auto;
  position: relative;
  @media screen and (max-width: 750px){
    margin: 0 0 0 auto;
  }
  &:before {
    content: "";
    position: absolute;
    top: 40px;
    left: -209px;
    width: 212px;
    aspect-ratio: 212 / 126;
    background: url(../img/gakka/text_cv.svg) no-repeat center / contain;
  }
  .bgcOrange & {
    width: 174px;
    @media screen and (max-width: 750px){
      position: relative;
      right: -20px;
    }
  }
  .bgcGreen & {
    width: 222px;
    @media screen and (max-width: 750px){
      position: relative;
      right: -44px;
    }
    &:before {
      left: -180px;
    }
  }
}
.gakkaCv__btns {
  display: flex;
  justify-content: center;
  gap: 30px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  a {
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 0.11em;
    background: linear-gradient(to bottom, #5dc2d0 0%, #226db6 100%);
    width: 372px;
    height: 98px;
    border-radius: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    @media screen and (max-width: 750px){
      width: 336px;
      height: 88px;
      font-size: 21px;
    }
    &:before {
      content: "";
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      border: 2px solid #fff;
      border-radius: 50vh;
      position: absolute;
      top: 4px;
      left: 4px;
      pointer-events: none;
      clip-path: polygon(0% 0%, 88% 0%, 88% 50%, 100% 50%, 100% 100%, 12% 100%, 12% 50%, 0% 50%);
    }
  }
}
.gakkaSkill {
  margin: 45px auto 0;
  max-width: 1000px;
  @media screen and (max-width: 750px){
    margin-top: 40px;
    padding: 0 0 50px;
  }
}
.gakkaSkill__title {
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  text-align: center;
  color: #87713a;
  background-color: #fff462;
  border-radius: 15px;
  padding: 6px 0;
  @media screen and (max-width: 750px){
    font-size: 22px;
  }
}
.gakkaSkill__row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 72px;
  gap: 20px;
  @media screen and (max-width: 750px){
    flex-direction: column;
    gap: 10px;
  }
}
.gakkaSkillFlow {
  background-color: #fff;
  border-radius: 15px;
  padding-bottom: 20px;
  flex: 1;
  position: relative;
  &:after {
    content: "";
    width: 30px;
    height: 26px;
    background-color: var(--color-airline);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    position: absolute;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
  }
  .bgcOrange & {
    &:after {
      background-color: var(--color-bridal-hotel);
    }
  }
  .bgcGreen & {
    &:after {
      background-color: var(--color-civil);
    }
  }
}
.gakkaSkillFlow__title {
  font-size: 20px;
  font-weight: 900;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-color: #87713a;
  line-height: 1.3;
  border-radius: 15px 15px 0 0;
}
.gakkaSkillFlow__slider {
  @media screen and (min-width: 751px) {
    display: flex;
    flex-direction: column;
  }
}
.gakkaSkillFlow__item {
  padding: 30px 10px 0;
  @media screen and (min-width: 751px){
    &:nth-child(1) {
      order: 3;
    }
    &:nth-child(2) {
      order: 1;
    }
    &:nth-child(3) {
      order: 2;
    }
    .bgcOrange & {
      &:nth-child(1) {
        order: 1;
      }
      &:nth-child(2) {
        order: 2;
      }
      &:nth-child(3) {
        order: 3;
      }
    }
  }
}
.gakkaSkillFlow__nav {
  @media screen and (min-width: 751px){
    display: none;
  }
}
.gakkaSkillFlow__balloon {
  height: 100px;
  background-color: #ebe5d6;
  border-radius: 20px;
  position: relative;
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 900;
  color: #87713a;
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &:after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -28px;
    width: 34px;
    aspect-ratio: 34 / 38;
    clip-path: polygon(20% 0%, 100% 0%, 0% 100%);
    background-color: #ebe5d6;
  }
  &.-blue {
    background-color: var(--color-airline);
    color: #fff;
    &:after {
      background-color: var(--color-airline);
    }
  }
  &.-orange {
    background-color: var(--color-bridal-hotel);
    color: #fff;
    &:after {
      background-color: var(--color-bridal-hotel);
    }
  }
  &.-green {
    background-color: var(--color-civil);
    color: #fff;
    &:after {
      background-color: var(--color-civil);
    }
  }
  &.-right {
    &:after {
      clip-path: polygon(0% 0%, 80% 0%, 100% 100%);
    }
  }
  &.-half {
    padding: 0 10px;
    span {
      width: 100%;
      font-size: 13px;
      color: #fff;
      line-height: 1.2;
      position: relative;
      padding: 6px 0;
      &.top {
        &:before {
          width: 24px;
          height: 24px;
          content: "";
          border-radius: 50%;
          border: 2px solid #fff;
          background-color: #f19ca6;
          position: absolute;
          top: 50%;
          left: -25px;
          transform: translateY(-50%);
        }
      }
      &.bottom {
        border-top: 1px dashed #fff;
        &:before {
          width: 24px;
          height: 24px;
          content: "";
          border-radius: 50%;
          border: 2px solid #fff;
          background-color: #83ccd2;
          position: absolute;
          top: 50%;
          left: -25px;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.gakkaSkillFlow__h4 {
  background-color: var(--color-airline);
  line-height: 1.2;
  font-size: 20px;
  color: #fff;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  padding: 6px 0;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 10px;
  small {
    font-size: 14px;
  }
  &.-orange {
    background-color: var(--color-bridal-hotel);
  }
  &.-green {
    background-color: var(--color-civil);
  }
}
.gakkaSkillFlow__description {
  dt {
    text-align: center;
    color: #87713a;
    font-size: 20px;
    font-weight: 900;
    font-feature-settings: "palt";
    padding: 6px 0;
    border-radius: 50vh;
    background-color: #ebe5d6;
  }
  dd {
    font-size: 14px;
    line-height: 2;
    margin-top: 0.5em;
    color: var(--color-text);
    font-feature-settings: "palt";
  }
}
.gakkaSkillFlow__thumb {
  &.-circle {
    padding: 0 20px;
  }
}
.gakkaSkillFlow__text {
  font-size: 14px;
  line-height: 2;
  margin-top: 10px;
  color: var(--color-text);
  font-feature-settings: "palt";
  letter-spacing: 0;
}
.gakkaSkillFlow__list {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  ul {
    li {
      font-size: 15px;
      color: var(--color-text);
      text-indent: -1em;
      margin-left: 1em;
      &:before {
        content: "●";
        color: var(--color-airline);
      }
      + li {
        margin-top: 8px;
      }
    }
  }
}
.gakkaSkill__bottom {
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  padding: 16px 0;
  background: linear-gradient(to right, #85cbbf 0%, #1bb8ce 100%);
  border-radius: 15px;
  text-align: center;
  color: #fff;
  @media screen and (max-width: 750px){
    font-size: 20px;
  }
  .bgcOrange & {
    background: linear-gradient(to right, #fcd475 0%, #f08437 100%);
  }
  .bgcGreen & {
    background: linear-gradient(to right, #8bc782 0%, #2eb6aa 100%);
  }
}
.gakkaMessage {
  background-color: #fff;
  padding: 30px 0 60px;
  text-align: center;
  @media screen and (max-width: 750px){
    padding: 80px 10px 30px;
  }
}
.gakkaMessage__title {
  display: inline-block;
  padding: 0 34px;
  position: relative;
  @media screen and (max-width: 750px){
    padding: 0 27px;
  }
  &:before {
    content: "";
    width: 20px;
    aspect-ratio: 20 / 34;
    background: url(../img/airline/line_title_left.svg) no-repeat center / contain;
    position: absolute;
    left: 0px;
    top: 0px;
    @media screen and (max-width: 750px){
      width: 30px;
      aspect-ratio: 30 / 70;
      background: url(../img/airline/line_title_left_sp.svg) no-repeat center / contain;
    }
  }
  &:after {
    content: "";
    width: 20px;
    aspect-ratio: 20 / 34;
    background: url(../img/airline/line_title_right.svg) no-repeat center / contain;
    position: absolute;
    right: 0px;
    top: 0px;
    @media screen and (max-width: 750px){
      width: 30px;
      aspect-ratio: 30 / 70;
      background: url(../img/airline/line_title_right_sp.svg) no-repeat center / contain;
    }
  }
  .bgcOrange & {
    &:before {
      background: url(../img/bridal-hotel/line_title_left.svg) no-repeat center / contain;
      @media screen and (max-width: 750px){
        background-image: url(../img/bridal-hotel/line_title_left_sp.svg);
      }
    }
    &:after {
      background: url(../img/bridal-hotel/line_title_right.svg) no-repeat center / contain;
      @media screen and (max-width: 750px){
        background-image: url(../img/bridal-hotel/line_title_right_sp.svg);
      }
    }
  }
  .bgcGreen & {
    &:before {
      background: url(../img/civil-servant/line_title_left.svg) no-repeat center / contain;
    }
    &:after {
      background: url(../img/civil-servant/line_title_right.svg) no-repeat center / contain;
    }
  }

  img {
    height: 26px;
    width: auto;
    @media screen and (max-width: 750px){
      height: 54px;
    }
  }
}
.gakkaMessageList {
  margin: 20px auto 0;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 750px){
    display: block;
  }
}
.gakkaMessageList__item {
  width: 290px;
  text-align: left;
}
.gakkaMessageList__name {
  font-size: 12px;
  margin-top: 8px;
}
.gakkaMessageList__subtitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-airline);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  .bgcOrange & {
    color: var(--color-bridal-hotel);
  }
  .bgcGreen & {
    color: var(--color-civil);
  }
}
.gakkaMessageList__text {
  font-size: 15px;
  line-height: 2;
  margin-top: 15px;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
.gakkaMessage__nav {
  @media screen and (min-width: 751px){
    display: none;   
  }
}

.gakkaCharm {
  padding-top: 0;
  @media screen and (max-width: 750px){
    background-color: #fff;
  }
}
.gakkaCharm__inner {
  margin: 45px auto 0;
  max-width: 1000px;
  position: relative;
  @media screen and (max-width: 750px){
    margin: 20px 10px 0;
  }
}
.gakkaCharm__left {
  width: 486px;
  @media screen and (max-width: 750px){
    width: 100%;
  }
}
.gakkaCharm__read {
  font-size: 14px;
  line-height: 1.7;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  color: var(--color-airline);
  @media screen and (max-width: 750px){
    font-size: 12px;
  }
  .bgcOrange & {
    color: var(--color-bridal-hotel);
  }
  .bgcGreen & {
    color: var(--color-civil);
  }
}
.gakkaCharm__title {
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.155em;
  color: var(--color-airline);
  @media screen and (max-width: 750px){
    font-size: 22px;
  }
  .bgcOrange & {
    color: var(--color-bridal-hotel);
  }
  .bgcGreen & {
    color: var(--color-civil);
  }
}
.gakkaCharm__list {
  margin-top: 20px;
  dl {
    margin-top: 6px;
    @media screen and (max-width: 750px){
      margin-top: 3px;
    }
  }
  dt {
    font-size: 14px;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    color: var(--color-text);
    @media screen and (max-width: 750px){
      font-size: 11px;
    }
  }
  dd {
    height: 20px;
    background-color: var(--color-airline);
    @media screen and (max-width: 750px){
      height: 16px;
    }
    .bgcOrange & {
      background-color: var(--color-bridal-hotel);
    }
    .bgcGreen & {
      background-color: var(--color-civil);
    } 
  }
}
.gakkaCharm__right {
  width: 634px;
  aspect-ratio: 634 / 604;
  position: absolute;
  top: 48px;
  left: 395px;
  @media screen and (max-width: 750px){
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
}
.gakkaFaq {
  padding-top: 120px;
  @media screen and (max-width: 750px){
    padding-top: 20px;
    background-color: #fff;
  }
}
.gakkaFaq__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  @media screen and (max-width: 750px){
    margin: 0 10px;
  }
}
.gakkaFaq__title {
  display: inline-block;
  padding: 0 40px;
  position: relative;
  margin-bottom: 24px;
  @media screen and (max-width: 750px){
    padding: 0 56px;
  }
  &:before {
    content: "";
    width: 27px;
    aspect-ratio: 27 / 45;
    background: url(../img/airline/line_title_left.svg) no-repeat center / contain;
    position: absolute;
    left: 0px;
    top: 0px;
    @media screen and (max-width: 750px){
      width: 36px;
      aspect-ratio: 36 / 74;
      background: url(../img/airline/line_title_left_sp.svg) no-repeat center / contain;
    }
  }
  &:after {
    content: "";
    width: 27px;
    aspect-ratio: 27 / 45;
    background: url(../img/airline/line_title_right.svg) no-repeat center / contain;
    position: absolute;
    right: 0px;
    top: 0px;
    @media screen and (max-width: 750px){
      width: 36px;
      aspect-ratio: 36 / 74;
      background: url(../img/airline/line_title_right_sp.svg) no-repeat center / contain;
    }
  }
  .bgcOrange & {
    &:before {
      background: url(../img/bridal-hotel/line_title_left.svg) no-repeat center / contain;
      @media screen and (max-width: 750px){
        background-image: url(../img/bridal-hotel/line_title_left_sp.svg);
      }
    }
    &:after {
      background: url(../img/bridal-hotel/line_title_right.svg) no-repeat center / contain;
      @media screen and (max-width: 750px){
        background-image: url(../img/bridal-hotel/line_title_right_sp.svg);
      }
    }
    .bgcGreen & {
      &:before {
        background: url(../img/civil-servant/line_title_left.svg) no-repeat center / contain;
        @media screen and (max-width: 750px){
          background-image: url(../img/civil-servant/line_title_left_sp.svg);
        }
      }
      &:after {
        background: url(../img/civil-servant/line_title_right.svg) no-repeat center / contain;
        @media screen and (max-width: 750px){
          background-image: url(../img/civil-servant/line_title_right_sp.svg);
        }
      }
    }
  }
  img {
    width: auto;
    height: 36px;
    @media screen and (max-width: 750px){
      height: 64px;
    }
  }
}
.gakkaFaq__h3 {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  padding: 6px 0;
  border-radius: 27px 27px 0 0;
  background: linear-gradient(to right, #85cbbf 0%, #1bb8ce 100%);
  color: #fff;
  @media screen and (max-width: 750px){
    font-size: 20px;
  }
    .bgcOrange & {
      background: linear-gradient(to right, #fcd475 0%, #f08437 100%);
    }
}
.gakkaFaqList {
  margin-top: 15px;
  display: flex;
  margin-right: -12px;
  @media screen and (max-width: 750px){
    margin: 10px 0 0;
    display: block;
  }
}
.gakkaFaqList__item {
  width: 33.33%;
  padding: 0 12px 24px 0;
  border-right: 2px solid var(--color-airline);
  &:last-child {
    border-right: none;
  }
  @media screen and (max-width: 750px){
    padding: 0;
    width: auto;
    border-style: none;
  }
  .bgcOrange & {
    border-color: var(--color-bridal-hotel);
  }
}
.gakkaFaqList__text {
  padding: 12px 0 0 12px;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: left;
}
.gakkaFaq__block {
  + .gakkaFaq__block {
    margin-top: 60px;
  }
}
.gakkaFaq__nav {
  @media screen and (min-width: 751px){
    display: none;
  }
}