@charset "UTF-8";
/* ------------------------------
    base
------------------------------ */
:root {
  --red: #e50012;
  --blue: #004098;
  --color-food: #f18e2c;
  --color-cosmetic: #f1c64e;
  --color-bioscience: #86bb40;
  --color-teacher: #48b0e5;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
  color: #000000;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 500px) {
  html {
    font-size: 2vw;
  }
}
/* ------------------------------
    parts
------------------------------ */
.inner {
  width: min(1620px, 92%);
  margin: auto;
}

.spIn,
.spIn02 {
  display: none;
}

.red {
  color: var(--red);
}

.indent {
  display: flex;
}
.indent .indent__dot {
  flex-shrink: 0;
}

.sec__title {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}
.sec__title > span {
  font-size: 3.3rem;
  font-weight: 500;
  line-height: 50px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sec__title > span .sec__title--small {
  font-size: 2.2rem;
}
.sec__title > span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -20px;
  left: 0;
  background-color: #717071;
}
.sec__title::before {
  content: "";
  display: block;
  position: relative;
  width: 228px;
  aspect-ratio: 228/198;
  transform: translateX(-24.1228070175%);
  background: url(../image/sec_title_bg.png) top left/100% 100% no-repeat;
  z-index: -1;
}

.title__icon {
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--blue);
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 2rem;
}
.title__icon::before {
  content: "";
  display: block;
  width: 2.2rem;
  aspect-ratio: 1/1;
  background: url(../image/icon_title.jpg) top left/100% 100%;
}

.space {
  display: none;
}

@media screen and (max-width: 768px) {
  .spIn {
    display: inline;
  }
  .sec__title > span {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }
  .sec__title > span::after {
    height: 0.2rem;
    bottom: -1rem;
  }
  .sec__title::before {
    width: 16.2rem;
    transform: translateX(-2rem);
  }
}
@media screen and (max-width: 500px) {
  .spIn02 {
    display: inline;
  }
  .title__icon {
    font-size: 2rem;
  }
}
/* ------------------------------
    アニメーション
------------------------------ */
/* 親 */
/* 子要素 */
.js-parallax-item {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 表示後 */
.js-parallax.is-visible .js-parallax-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ディレイ */
.delay-01 {
  transition-delay: 0.3s;
}

.delay-02 {
  transition-delay: 0.6s;
}

.delay-03 {
  transition-delay: 0.9s;
}

/* ------------------------------
    ページトップ
------------------------------ */
#pagetop__wrap {
  position: sticky;
  bottom: 2.5rem;
  margin-top: 120px;
  padding-inline: 4%;
  margin-bottom: 30px;
  z-index: 100;
}

a#pagetop {
  display: block;
  width: 5.5rem;
  aspect-ratio: 1/1;
  position: relative;
  background-color: #fff;
  border: 0.1rem solid var(--blue);
  margin-inline: auto 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}
a#pagetop::after {
  content: "";
  width: 2.2rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 2.2rem;
  left: calc(50% - 1.1rem);
  border-top: 0.15rem solid var(--blue);
  border-right: 0.15rem solid var(--blue);
  transform: rotate(-45deg);
}

/* 表示時 */
a#pagetop.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* hover */
@media (hover: hover) and (pointer: fine) {
  a#pagetop:hover {
    transform: translateY(-4px);
  }
}
@media screen and (max-width: 768px) {
  #pagetop__wrap {
    bottom: 5rem;
    margin-top: 5rem;
    margin-bottom: 3rem;
  }
}
/* ------------------------------
    header
------------------------------ */
header {
  position: relative;
}

h1 {
  font-size: 1em;
  line-height: 0;
  width: 20.15625%;
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: calc(infinity);
}
h1 a {
  line-height: 0;
  transition: opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  h1 a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    width: 22rem;
    margin: 1.5rem auto 2.5rem;
    position: static;
    transform: none;
  }
}
/* ------------------------------
    mv
------------------------------ */
#mv {
  position: relative;
  padding-block: 19.0104166667%;
  border-bottom: 2px solid #dbdcdc;
  overflow: hidden;
}
#mv .mv__image--01,
#mv .mv__image--02,
#mv .mv__image--03,
#mv .mv__image--04,
#mv .mv__text {
  opacity: 0;
  transform: translateY(56px) scale(0.98);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}
#mv figure {
  position: absolute;
}
#mv .mv__image--01 {
  width: 40.625%;
  top: 5%;
  left: 0;
}
#mv .mv__image--02 {
  width: 41.9791666667%;
  top: 5%;
  right: 0;
}
#mv .mv__image--03 {
  width: 39.1666666667%;
  bottom: 0;
  left: 0;
}
#mv .mv__image--04 {
  width: 57.4479166667%;
  bottom: 3%;
  right: 0;
}
#mv .mv__text {
  position: relative;
  width: 43.3333333333%;
  margin: auto;
  z-index: 2;
}
#mv .mv__text.is-active {
  transition-duration: 2.4s;
}
#mv .is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 2s ease, transform 2.2s cubic-bezier(0.19, 1, 0.22, 1), filter 2s ease;
}

@media screen and (max-width: 768px) {
  #mv {
    padding-block: 28% 40%;
  }
  #mv .mv__image--01 {
    width: 43.3333333333%;
    top: 0;
  }
  #mv .mv__image--02 {
    width: 49.7333333333%;
    top: 0;
  }
  #mv .mv__image--03 {
    width: 38.1333333333%;
    left: 3.5%;
    bottom: 7%;
  }
  #mv .mv__image--04 {
    width: 59.7333333333%;
    right: 3.5%;
    bottom: 6%;
    z-index: -1;
  }
  #mv .mv__text {
    width: 60.9333333333%;
  }
}
/* ------------------------------
    introduction
------------------------------ */
#introduction {
  background: url(../image/introduction_bg.png) top left/100% auto no-repeat;
  padding-top: 140px;
  margin-bottom: 100px;
}
#introduction .introduction__headline {
  font-size: 4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.75;
  color: var(--blue);
  margin-bottom: 4rem;
}
#introduction .introduction__lead {
  font-size: 2rem;
  line-height: 2.1;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #introduction {
    padding-top: 10rem;
    margin-bottom: 8rem;
  }
  #introduction .introduction__headline {
    font-size: 3.3rem;
  }
  #introduction .introduction__lead {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 500px) {
  #introduction {
    padding-top: 10rem;
    margin-bottom: 8rem;
  }
  #introduction .introduction__headline {
    font-size: 2.2rem;
  }
  #introduction .introduction__lead {
    font-size: 1.8rem;
  }
}
/* ------------------------------
    system
------------------------------ */
#system {
  background: url(../image/system_bg.png) bottom left/22.65625% auto no-repeat;
  margin-bottom: 10rem;
}

#system .inner {
  position: relative;
  padding-top: 5rem;
}

#system .sec__title {
  position: absolute;
  top: 0;
  left: 0;
}
#system .sec__title span::after {
  display: none;
}

#system .system__image {
  width: min(1450px, 100%);
  margin: auto;
}

@media screen and (max-width: 1024px) {
  #system .sec__title {
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  #system .inner {
    padding: 0;
  }
  #system .system__image {
    overflow-x: scroll;
  }
  #system .system__image img {
    width: 102rem;
    max-width: none;
  }
}
/* ------------------------------
    feature
------------------------------ */
#feature {
  margin-bottom: 10rem;
}
#feature .feature__grid {
  display: grid;
  grid-template-columns: repeat(2, 48%);
  gap: 60px 4%;
}
#feature .feature__grid .feature__grid--card .card__headline {
  padding: 0 0 2rem 2rem;
  border-bottom: 0.2rem solid #b4b4b5;
  margin-bottom: 2rem;
}
#feature .feature__grid .feature__grid--card .card__headline span {
  font-size: 2.5rem;
  font-weight: 400;
  position: relative;
}
#feature .feature__grid .feature__grid--card .card__headline span::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  top: 0;
  left: -2rem;
  background-color: var(--blue);
}
#feature .feature__grid .feature__grid--card .card__bottom {
  display: grid;
  grid-template-columns: [text] 50% [image] 46%;
  column-gap: 4%;
}
#feature .feature__grid .feature__grid--card .card__bottom .card__bottom--text {
  font-size: 2rem;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
}

@media screen and (max-width: 768px) {
  #feature {
    margin-bottom: 3rem;
  }
  #feature .feature__grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
  #feature .feature__grid .feature__grid--card .card__headline {
    font-size: 2.2rem;
  }
  #feature .feature__grid .feature__grid--card .card__headline span::before {
    width: 0.8rem;
  }
  #feature .feature__grid .feature__grid--card .card__bottom .card__bottom--text {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 500px) {
  #feature .feature__grid .feature__grid--card .card__bottom {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* ------------------------------
    course
------------------------------ */
#course {
  margin-bottom: 10rem;
}
#course .course__accordion .course__accordion--head {
  position: relative;
  cursor: pointer;
  pointer-events: all;
}
#course .course__accordion .course__accordion--head .icon {
  position: absolute;
  width: 2.4691358025%;
  aspect-ratio: 1/1;
  top: 22.2222222222%;
  right: 2.4691358025%;
  background-color: #fff;
}
#course .course__accordion .course__accordion--head .icon::before, #course .course__accordion .course__accordion--head .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#course .course__accordion .course__accordion--head .icon::before {
  width: 45%;
  height: 2px;
}
#course .course__accordion .course__accordion--head .icon::after {
  width: 2px;
  height: 45%;
  transition: transform 0.3s;
}
#course .course__accordion .course__accordion--head .icon:where(.is-active *)::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
#course .course__accordion .course__accordion--body {
  display: none;
  padding: 40px 0 0 2.4691358025%;
}
#course .course__accordion .course__accordion--body .course__subtitle {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
#course .course__accordion .course__accordion--body .course__lead {
  font-size: 2rem;
  line-height: 1.8;
}
#course .course__accordion .course__accordion--body .cource_head {
  position: relative;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--orange *) {
  width: 50%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--yellow *) {
  width: 67%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--green *) {
  width: 51%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--blue *) {
  width: 53%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--orange *) {
  max-width: 38%;
  right: 10%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--yellow *) {
  width: 33%;
  right: 0;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--green *) {
  width: 33%;
  top: -40px;
  transform: none;
  right: 13%;
}
#course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--blue *) {
  width: 295px;
  max-width: 25%;
  right: 20%;
}
#course .course__accordion .course__accordion--body .course__content {
  margin-top: 5rem;
}
#course .course__accordion .course__accordion--body .course__content h5 {
  margin-bottom: 3rem;
}
#course .course__accordion .course__accordion--body .course__content--subject .subject__list {
  display: grid;
  grid-template-columns: repeat(2, 49%);
  gap: 0 2%;
}
#course .course__accordion .course__accordion--body .course__content--subject .subject__list .subject__list--card {
  padding-bottom: 3.2299741602%;
  background-color: #fff;
}
#course .course__accordion .course__accordion--body .course__content--subject .subject__list .subject__list--card h6 {
  font-size: 2.3rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  position: relative;
  width: fit-content;
  min-width: 290px;
  max-width: 95%;
  padding: 10px 30px;
  margin-bottom: 2rem;
}
#course .course__accordion .course__accordion--body .course__content--subject .subject__list .subject__list--card h6::after {
  content: "";
  position: absolute;
  height: calc(100% + 1px);
  aspect-ratio: 20/40;
  top: 0;
  right: -1px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  background-color: #fff;
}
#course .course__accordion .course__accordion--body .course__content--subject .subject__list .subject__list--card p {
  font-size: 1.9rem;
  line-height: 1.8947368421;
  padding-inline: 3.2299741602%;
}
#course .course__accordion .course__accordion--body .course__content--lab .lab__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#course .course__accordion .course__accordion--body .course__content--lab .lab__list .lab__list--item {
  font-size: 2.7rem;
  line-height: 1.44;
  display: flex;
}
#course .course__accordion .course__accordion--body .course__content--lab .lab__list .lab__list--item::before {
  content: "■";
  flex-shrink: 0;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list {
  display: grid;
  grid-template-columns: repeat(3, 32%);
  gap: 40px 2%;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card {
  padding: 20px 30px 30px;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 2.5rem;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name .card__name--icon {
  flex-shrink: 0;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name p {
  font-size: 2.4rem;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name p small {
  font-size: 1.7rem;
  color: #717071;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__list {
  display: grid;
  grid-template-columns: [head] max-content [body] 1fr;
  gap: 1.5rem;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__list .card__list--item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: flex-start;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__list .card__list--item .item__head {
  font-size: 1.6rem;
  text-align-last: justify;
  line-height: 1;
  padding: 0.5rem 0.7rem;
  background-color: #e5e5e6;
}
#course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__list .card__list--item .item__body {
  font-size: 1.8rem;
  line-height: 1.5;
}
#course .course__accordion + .course__accordion {
  margin-top: 40px;
}

.course__accordion--orange .icon::before,
.course__accordion--orange .icon::after {
  background-color: var(--color-food);
}
.course__accordion--orange .course__subtitle {
  color: var(--color-food);
}
.course__accordion--orange .course__content--lab .lab__list .lab__list--item::before {
  color: var(--color-food);
}
.course__accordion--orange .subject__list--card {
  border: 2px solid var(--color-food);
}
.course__accordion--orange .subject__list--card h6 {
  background-color: var(--color-food);
}
.course__accordion--orange .profile__list--card {
  border: 2px solid var(--color-food);
}
.course__accordion--orange .profile__list--card .card__name {
  border-bottom: 2px solid var(--color-food);
}

.course__accordion--yellow .icon::before,
.course__accordion--yellow .icon::after {
  background-color: var(--color-cosmetic);
}
.course__accordion--yellow .course__subtitle {
  color: var(--color-cosmetic);
}
.course__accordion--yellow .course__content--lab .lab__list .lab__list--item::before {
  color: var(--color-cosmetic);
}
.course__accordion--yellow .subject__list--card {
  border: 2px solid var(--color-cosmetic);
}
.course__accordion--yellow .subject__list--card h6 {
  background-color: var(--color-cosmetic);
}
.course__accordion--yellow .profile__list--card {
  border: 2px solid var(--color-cosmetic);
}
.course__accordion--yellow .profile__list--card .card__name {
  border-bottom: 2px solid var(--color-cosmetic);
}

.course__accordion--green .icon::before,
.course__accordion--green .icon::after {
  background-color: var(--color-bioscience);
}
.course__accordion--green .course__subtitle {
  color: var(--color-bioscience);
}
.course__accordion--green .course__content--lab .lab__list .lab__list--item::before {
  color: var(--color-bioscience);
}
.course__accordion--green .subject__list--card {
  border: 2px solid var(--color-bioscience);
}
.course__accordion--green .subject__list--card h6 {
  background-color: var(--color-bioscience);
}
.course__accordion--green .profile__list--card {
  border: 2px solid var(--color-bioscience);
}
.course__accordion--green .profile__list--card .card__name {
  border-bottom: 2px solid var(--color-bioscience);
}

.course__accordion--blue .icon::before,
.course__accordion--blue .icon::after {
  background-color: var(--color-teacher);
}
.course__accordion--blue .course__subtitle {
  color: var(--color-teacher);
}
.course__accordion--blue .course__content--lab .lab__list .lab__list--item::before {
  color: var(--color-teacher);
}
.course__accordion--blue .subject__list--card {
  border: 2px solid var(--color-teacher);
}
.course__accordion--blue .subject__list--card h6 {
  background-color: var(--color-teacher);
}
.course__accordion--blue .profile__list--card {
  border: 2px solid var(--color-teacher);
}
.course__accordion--blue .profile__list--card .card__name {
  border-bottom: 2px solid var(--color-teacher);
}

@media screen and (max-width: 1024px) {
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list {
    grid-template-columns: repeat(2, 49%);
  }
}
@media screen and (max-width: 768px) {
  #course {
    margin-bottom: 8rem;
  }
  #course .course__accordion .course__accordion--head .icon {
    width: 2.5rem;
    top: 1.25rem;
    right: 2rem;
  }
  #course .course__accordion .course__accordion--head .icon::before {
    width: 1rem;
    height: 0.1rem;
  }
  #course .course__accordion .course__accordion--head .icon::after {
    width: 0.1rem;
    height: 1rem;
  }
  #course .course__accordion .course__accordion--body {
    overflow: hidden;
    padding: 2.5rem 0 0 0;
  }
  #course .course__accordion .course__accordion--body .course__subtitle {
    font-size: 2.2rem;
  }
  #course .course__accordion .course__accordion--body .course__lead {
    font-size: 1.8rem;
  }
  #course .course__accordion .course__accordion--body .cource_head:where(.course__accordion--yellow *) {
    overflow: hidden;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--orange *) {
    width: 39.2rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--yellow *) {
    width: 100%;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--green *) {
    width: 100%;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--green *) .course__lead {
    width: 33.4rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text:where(.course__accordion--blue *) {
    width: 44.8rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .space:where(.course__accordion--yellow *) {
    display: block;
    height: 19rem;
    float: right;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image {
    max-width: none;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--orange *) {
    width: 34.4rem;
    right: -5.5rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--yellow *) {
    width: 32.1rem;
    float: right;
    clear: both;
    position: static;
    transform: none;
    margin-left: 0.5em;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--green *) {
    width: 32.2rem;
    top: 0;
    right: 0;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--blue *) {
    width: 20.3rem;
    right: 0rem;
  }
  #course .course__accordion .course__accordion--body .course__content--subject h5 {
    width: 23.8rem;
  }
  #course .course__accordion .course__accordion--body .course__content--subject .subject__list {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  #course .course__accordion .course__accordion--body .course__content--subject .subject__list .subject__list--card h6 {
    font-size: 2.1rem;
    min-width: 20.5rem;
    padding: 1rem 4rem 1rem 1.5rem;
  }
  #course .course__accordion .course__accordion--body .course__content--lab h5 {
    width: 23.8rem;
  }
  #course .course__accordion .course__accordion--body .course__content--lab .lab__list {
    flex-direction: column;
    gap: 1rem;
  }
  #course .course__accordion .course__accordion--body .course__content--lab .lab__list .lab__list--item {
    font-size: 2.5rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile h5 {
    width: 26.1rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card {
    padding: 2.5rem 3rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name .card__name--icon {
    width: 4rem;
  }
  #course .course__accordion + .course__accordion {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 500px) {
  #course .course__accordion .course__accordion--head .icon {
    top: 1rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text {
    width: 100%;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--text .course__lead {
    width: 100%;
  }
  #course .course__accordion .course__accordion--body .cource_head {
    overflow: hidden;
  }
  #course .course__accordion .course__accordion--body .cource_head .space {
    display: block;
    float: right;
  }
  #course .course__accordion .course__accordion--body .cource_head .space:where(.course__accordion--orange *) {
    height: 12rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .space:where(.course__accordion--yellow *) {
    height: 30rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .space:where(.course__accordion--green *) {
    height: 15rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .space:where(.course__accordion--blue *) {
    height: 19rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image {
    position: static;
    transform: none;
    float: right;
    clear: both;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--orange *) {
    width: 24.08rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--yellow *) {
    width: 22.47rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--green *) {
    width: 22.54rem;
  }
  #course .course__accordion .course__accordion--body .cource_head .cource_head--image:where(.course__accordion--blue *) {
    width: 15.75rem;
    margin-left: 0.5rem;
  }
  #course .course__accordion .course__accordion--body .course__content--lab .lab__list .lab__list--item {
    font-size: 1.8rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name p {
    font-size: 2rem;
  }
  #course .course__accordion .course__accordion--body .course__content--profile .profile__list .profile__list--card .card__name p small {
    font-size: 1.4rem;
  }
}
/* ------------------------------
    study
------------------------------ */
#study .sec__title > span {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 10px;
}
#study .sec__title > span .sec__title--note {
  font-size: 1.6rem;
}
#study .study__content {
  margin-bottom: 6rem;
}
#study .scroll__image {
  margin-bottom: 5rem;
}
#study .scroll__future {
  display: grid;
  grid-template-columns: [dt] 375px [dd] 1fr;
  border: 2px solid var(--blue);
  margin-bottom: 10px;
}
#study .scroll__future dt {
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  align-content: center;
  background-color: var(--blue);
}
#study .scroll__future dd {
  font-size: 2.3rem;
  line-height: 1.7391304348;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  padding: 2rem 2.5rem;
}
#study .scroll__note {
  font-size: 1.8rem;
  justify-content: flex-end;
}
#study .study__licence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 40px 10px;
  background-color: #e9eef6;
  padding: 60px 3.7037037037%;
}
#study .study__licence .study__licence--card {
  display: flex;
  align-items: center;
  column-gap: 20px;
}
#study .study__licence .study__licence--card .card__icon {
  flex-shrink: 0;
}
#study .study__licence .study__licence--card p {
  font-size: 2.2rem;
}
#study .study__licence .study__licence--note {
  font-size: 1.8rem;
  grid-row: 4;
  grid-column: 2/span 2;
  align-content: center;
}

@media screen and (max-width: 1024px) {
  #study .study__licence {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  #study .study__licence .study__licence--note {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
@media screen and (max-width: 768px) {
  #study .study__content .study__content--scroll {
    overflow-x: scroll;
  }
  #study .study__content .study__content--scroll .scroll__image {
    width: 130rem;
  }
  #study .scroll__future {
    grid-template-columns: 1fr;
  }
  #study .scroll__future dt {
    padding: 1.5rem;
  }
  #study .study__licence {
    gap: 2rem 1rem;
    padding: 5rem;
  }
  #study .study__licence .study__licence--card {
    column-gap: 1.5rem;
  }
  #study .study__licence .study__licence--card .card__icon {
    width: 5.4rem;
  }
  #study .study__licence .study__licence--card .card__icon p {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 500px) {
  #study .sec__title > span {
    display: block;
  }
  #study .scroll__future dt {
    font-size: 1.8rem;
  }
  #study .scroll__future dd {
    font-size: 1.6rem;
  }
  #study .scroll__note {
    font-size: 1.4rem;
  }
  #study .study__licence {
    grid-template-columns: 1fr;
    padding: 3rem;
  }
  #study .study__licence .study__licence--card p {
    font-size: 1.8rem;
  }
}
/* ------------------------------
    footer
------------------------------ */
footer {
  padding-block: 3rem 5rem;
  background-color: var(--blue);
}

#copy {
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
}/*# sourceMappingURL=style.css.map */